最近設(shè)計群里經(jīng)常有人問起小程序設(shè)計規(guī)范的問題,雖然官方有提供樣式庫的下載,但是停留在16年版,不是最新的,而設(shè)計經(jīng)驗這部分網(wǎng)絡(luò)上也沒有比較全面的分享,這促使我停下手上計劃,加快輸出本篇文章,正好近期剛結(jié)束幾個小程序項目,總結(jié)下經(jīng)驗,并結(jié)合微信小程序的官方設(shè)計指南,一起分享給大家,希望幫助大家更快速的上手。
隨著2018年小程序的迅猛發(fā)展,小程序現(xiàn)已為各大企業(yè)廣泛采用,“觸手可及、用完即走”的用戶體驗備受青睞,隨之小程序設(shè)計也成為設(shè)計師的必備技能,那在進(jìn)行小程序界面設(shè)計時,應(yīng)該如何快速做設(shè)計?過程中又要注意哪些問題呢?
接下來是干貨時間~
內(nèi)容大綱
一、小程序設(shè)計區(qū)域
二、Nav Bar設(shè)計
三、Tool Bar設(shè)計
四、Tab Bar設(shè)計
五、啟動頁設(shè)計
六、加載樣式
七、沒有App如何設(shè)計
八、推薦幾個常用的平臺設(shè)計網(wǎng)站
對于已經(jīng)開發(fā)了App的產(chǎn)品,在進(jìn)行小程序設(shè)計時需遵守小程序的規(guī)范,同時要保持小程序界面設(shè)計與App的風(fēng)格統(tǒng)一性。
在設(shè)計過程中主要注意以下幾點:
一、小程序設(shè)計區(qū)域
小程序的“所有頁面”右上角位置,都固定放置了小程序的菜單,在設(shè)計界面時需預(yù)留出該區(qū)域空間。
二、Nav Bar設(shè)計
1、小程序菜單固定樣式
微信提供了深淺兩種配色樣式,以便更好的融合到各種風(fēng)格的頁面中,需注意保持小程序菜單清晰的辨識度。
線上案例:
2、交互注意事項
如果要在小程序菜單附近放置交互元素,要考慮是否有交互沖突,應(yīng)盡量避免誤觸的可能。
建議開發(fā)者設(shè)計的自有導(dǎo)航樣式與微信官方小程序菜單樣式保持一定差異,以便區(qū)分。
如上圖,小紅書的自有導(dǎo)航樣式個人不推崇,理由如下:
1)樣式與官方菜單樣式未區(qū)分開,容易產(chǎn)生疑惑
2)NavBar欄兩端對稱在頂部,視覺上顯得過于呆板
微信讀書既有微信線條外框的DNA, 又區(qū)別于官方樣式,是不錯的綜合。以上僅限個人觀點,還需用戶數(shù)據(jù)來客觀驗證。
3、搜索框常見的幾種表現(xiàn)形式
三、Toolbar設(shè)計
1、小程序設(shè)計規(guī)范
頂部標(biāo)簽分頁欄顏色可自定義,一般會沿用App的設(shè)計風(fēng)格,以保證兩個平臺的視覺統(tǒng)一性。
2、常見的幾種表現(xiàn)形式
四、Tab Bar設(shè)計
1、小程序設(shè)計規(guī)范
微信有提供小程序的底部標(biāo)簽樣式,建議標(biāo)簽數(shù)量在2-4個適宜。
也可根據(jù)產(chǎn)品需要選擇或者去掉底部標(biāo)簽欄功能
2、常見的幾種表現(xiàn)形式
五、啟動頁圖標(biāo)
啟動頁除品牌Logo外,其他元素都由微信統(tǒng)一提供,且不能更改,設(shè)計師需要提供2倍和3倍尺寸的Logo即可。
六、加載樣式
1、小程序設(shè)計規(guī)范
全局加載是小程序名稱左側(cè)的加載圖標(biāo)。模態(tài)的加載樣式將覆蓋整個頁面的,由于無法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感,建議謹(jǐn)慎使用。
2、常用的加載樣式
需告知用戶具體加載的位置形狀,減輕用戶焦慮情緒。
七、沒有App如何設(shè)計
對于沒有開發(fā)App來說,可依據(jù)官方推出的《微信小程序設(shè)計指南》來設(shè)計,以確??焖僭O(shè)計出符合規(guī)范的小程序。
小程序設(shè)計應(yīng)遵循友好、高效、一致的設(shè)計原則,每個頁面都應(yīng)有明確的重點,清晰明確地告知用戶身在何處、又可以往何處去,確保用戶在頁面中游刃有余地穿梭而不迷路。
八、推薦幾個常用的平臺設(shè)計網(wǎng)站
1、BAT各平臺小程序設(shè)計規(guī)范網(wǎng)站
1)微信小程序設(shè)計指南:
https://developers.weixin.qq.com/miniprogram/design/
2)支付寶小程序設(shè)計規(guī)范:
https://docs.alipay.com/mini/design
3)百度-智能小程序設(shè)計規(guī)范:
https://smartprogram.baidu.com/docs/design/overview/introduction/
2、其他常用的設(shè)計規(guī)范網(wǎng)站:
1)蘋果-人機界面指南
詳細(xì)介紹了ios設(shè)計規(guī)范,同時還提供了Ui設(shè)計資源下載
https://developer.apple.com/design/human-interface-guidelines/
2)安卓-MD設(shè)計指南
https://material.io/design/
3)螞蟻設(shè)計
提供移動和Web端的設(shè)計組建,還有設(shè)計案例和心得的文章供學(xué)習(xí)
https://design.alipay.com/#ds
4)微信樣式庫
提供微信內(nèi)的網(wǎng)頁和小程序設(shè)計規(guī)范
https://weui.io/
作者:孫青Cynthia_Sun
文章來源:https://www.zcool.com.cn/article/ZOTM4NjQ0.html
全站高品質(zhì)素材免費下載!