關于小程序的界面設計開發(fā)的探索

在我們做很多軟件的時候,一般都會前端后端分開亥宿,對于我們一般的開發(fā)人員來說卸勺,側重一個方向居多,如編碼的就較少設計UI的設計開發(fā)烫扼,特別在目前一些APP曙求、Web方面,界面的設計方面更加是比較精細化映企,也越來越需要一些專業(yè)化的人員去專門處理悟狱。不過話說回來,很多時候堰氓,我們小項目也需要自己能夠舉得起大刀挤渐,用得了菜刀,有時候形勢所逼也需要我們擅長后端開發(fā)的人員兼顧UI的開發(fā)双絮,一般不太復雜的界面也不用去專門找一個UI設計的人員了浴麻。本篇專門針對于小程序的界面設計方面進行一些探索性的研究討論得问,介紹小程序界面設計的一些思路和方向。

1软免、基于快速開發(fā)的設計平臺

在網(wǎng)上搜索一下椭赋,關于小程序零編碼的平臺如雨后春筍一般,令人目不暇接或杠,各種設計平臺的網(wǎng)站令人眼花繚亂哪怔,隨著這幾年H5頁面設計的興起,很多這樣的設計平臺向抢,換一個馬甲就繼續(xù)囊括小程序的在線設計了认境,感覺上是重復了互聯(lián)網(wǎng)早期網(wǎng)頁設計的那種風潮,小程序零代碼挟鸠?那種是一種比較簡單的靜態(tài)小程序叉信,也可能是具有一些表單填寫功能的小程序,不過這種需求隨著小程序的熱度高升而帶動了很多這些商機艘希,畢竟一般商家沒有一個看著順眼的小程序硼身,感覺就低人一等般,因此這樣類似靜態(tài)頁面般的小程序還是有很大的市場覆享。

而基于這些快速開發(fā)的設計平臺佳遂,只需要繳納年費,就可以套用模板撒顿,快速設計出比較美觀的界面了丑罪,速度第一啊,一般設計人員搞一套過得去的界面凤壁,還需要了解客戶需求吩屹,還需要設計下,至少一個一天半天拧抖,人家直接出效果部署煤搜,前后幾分鐘就搞定,因此有很大的市場唧席。

這些開發(fā)平臺一般不給導出源碼(如代表的凡科輕站 http://www.fkw.com/)擦盾,即使能夠使用其他途徑下載到小程序的源碼,也是高度被高度封裝混淆的袱吆,很難搞的明白厌衙,當然部分樣式還是可以參考下的,這類設計平臺的特點是付費模板比較多绞绒,而且也比較好看婶希。

image

也有一些能夠給導出源碼,源碼要求符合小程序的標準格式蓬衡,較好的閱讀的(這個代表有意派Coolsite360 http://www.coolsite360.com/wxapp/)喻杈,基于快速設計小程序界面彤枢,基于一些組件模板的開發(fā),不過缺點是組件模板太少筒饰,這個應該是基于開發(fā)人員的視角來做的缴啡,如果能夠堅持可以導出文件,且組件內(nèi)容比較多的話瓷们,應該很有吸引力业栅。

image

另外一個也值得提一下的是墨刀,這個也是基于設計師的視角來設計小程序界面的谬晕,界面元素比較豐富碘裕,略顯得臃腫一些。這個是一個客戶端的軟件攒钳,安裝后可以進行界面的設計帮孔,另外可以導出網(wǎng)頁文件,但非小程序格式內(nèi)容不撑,這點做的沒有前面說的意派Coolsite360好文兢。

image

基于這些開發(fā),應該是在素材或者模板比較豐富的時候焕檬,快速套用一些設計風格比較方便姆坚,可以很方便做出比較專業(yè)的效果,不過也缺點是受制于人揩页,還有就是要交納不少的費用旷偿,這對于一般小項目或者偶爾做的小程序項目的團隊來說烹俗,是一個不少的費用爆侣。

2、基于Sketch設計

一般現(xiàn)在設計APP幢妄、Web網(wǎng)站兔仰、小程序等,都可能會用到強大的設計工具Sketch蕉鸳,這個工具在設計領域用的越來越廣泛乎赴,而且功能確實也夠好,不過和其他工具一樣潮尝,需要花點時間來學習下如何使用榕吼,目前微信官方很多資源都同時放出Sketch的設計原稿,可以在網(wǎng)站上下載到的勉失。

Sketch 是一款適用于所有設計師的矢量繪圖應用羹蚣。矢量繪圖也是目前進行網(wǎng)頁,圖標以及界面設計的最好方式乱凿。

Sketch 是為圖標設計和界面設計而生的顽素,它是一個有著出色 UI 的一站式應用咽弦。

Sketch是一個功能強大的、易用的偉大產(chǎn)品胁出,是應用在Mac上的一款設計軟件型型,在UI設計領域有著很好的聲譽,只要搜一下這個關鍵字全蝶,很多教程和相關資源都會出現(xiàn)闹蒜,學習起來也不算太難。

image

它的界面分為幾個區(qū)域抑淫,如下所示

1209576-22edbd0253f51834

基于Sketch的設計嫂用,我們也可以用循序漸進的方式來組合我們的設計圖,也就是原子設計理念來指導模塊化處理丈冬。

image

基于Sketch的開發(fā)嘱函,需要積累一定的時間,不過好處就是不用受制于一些貌似很強大的界面設計平臺埂蕊,那些早期使用往弓、或者快速交付的時候使用倒是可以,長久的話蓄氧,還是需要掌握相關的設計知識函似,利用專業(yè)工具快速開發(fā)自己的界面。

厚積薄發(fā)喉童,慢慢的積累更多一些Sketch的素材以及設計資源撇寞,多動手解決問題才是根本。

在小程序的界面設計完成后堂氯,我們就可以結合我們的后端API蔑担,在客戶端封裝相關的JS的處理,從而實現(xiàn)一個前端后端完整的解決方案咽白。

image
image
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末啤握,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子晶框,更是在濱河造成了極大的恐慌排抬,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件授段,死亡現(xiàn)場離奇詭異蹲蒲,居然都是意外死亡,警方通過查閱死者的電腦和手機侵贵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門届搁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事咖祭⊙谝耍” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵么翰,是天一觀的道長牺汤。 經(jīng)常有香客問我,道長浩嫌,這世上最難降的妖魔是什么檐迟? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮码耐,結果婚禮上追迟,老公的妹妹穿的比我還像新娘。我一直安慰自己骚腥,他們只是感情好敦间,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著束铭,像睡著了一般廓块。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上契沫,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天带猴,我揣著相機與錄音,去河邊找鬼懈万。 笑死拴清,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的会通。 我是一名探鬼主播口予,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼渴语!你這毒婦竟也來了苹威?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤驾凶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后掷酗,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體调违,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年泻轰,在試婚紗的時候發(fā)現(xiàn)自己被綠了技肩。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖虚婿,靈堂內(nèi)的尸體忽然破棺而出旋奢,到底是詐尸還是另有隱情,我是刑警寧澤然痊,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布至朗,位于F島的核電站,受9級特大地震影響剧浸,放射性物質(zhì)發(fā)生泄漏锹引。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一唆香、第九天 我趴在偏房一處隱蔽的房頂上張望嫌变。 院中可真熱鬧,春花似錦躬它、人聲如沸腾啥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碑宴。三九已至,卻和暖如春桑谍,著一層夾襖步出監(jiān)牢的瞬間延柠,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工锣披, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留贞间,地道東北人。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓雹仿,卻偏偏與公主長得像增热,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子胧辽,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 縱觀歷史本涕,走近世界,才深深領悟到人的渺小涩维。
    如簡Jane閱讀 112評論 0 1
  • 01 在我的印象中患膛,少年時代的每周末,父母各種大掃除的轟鳴聲夾雜著古典音樂的震撼旋律人断,每每順著透過窗簾的晨曦...
    Hattie小小閱讀 850評論 6 51
  • 清晨吭从,沿著運河走到東門乘車。清風拂面恶迈,陽光帶著一絲絲秋意穿云破霧而來涩金,此時的太陽仿佛也初醒一般,揉著朦朧的睡眼,輕...
    凡心塵語閱讀 1,141評論 3 10
  • 重新聽了丫丫老師的30講音頻,讓我對親子時間管理有了一些更加深刻的認識全度。 第一煮剧,榜樣的力量。 親子時間管理得靠全家...
    6f22daf3cea6閱讀 219評論 0 0
  • 1《留月》 文/阿雷 滿月西關沉讼载, 海天著墨色轿秧。 借我一臂力, 九天攬落月咨堤。 2 月下 文/小軍 衣袂飄飄之何處 ...
    苗苗_2223閱讀 344評論 0 1