參與多個項目后,我總結了這份可能是網上最全的小程序設計規范 - 優設網 - UISDC

參與多個項目后,我總結了這份可能是網上最全的小程序設計規范

2019/05/13 16338評論 8

@設計之青 :最近設計群里經常有人問起小程序設計規范的問題,雖然官方有提供樣式庫的下載,但是停留在 16 年版,不是最新的。而設計經驗這部分網絡上也沒有比較全面的分享,這促使我停下手上的計劃,加快輸出本篇文章。正好近期剛結束幾個小程序項目,總結下經驗,并結合微信小程序的官方設計指南,一起分享給大家,希望幫助大家更快速地上手。

隨著 2018 年小程序的迅猛發展,小程序現已被各大企業廣泛采用,「觸手可及、用完即走」的用戶體驗備受青睞,隨之小程序設計也成為設計師的必備技能,那在進行小程序界面設計時,應該如何快速做設計?過程中又要注意哪些問題呢?

對于已經開發了 App 的產品,在進行小程序設計時需遵守小程序的規范,同時要保持小程序界面設計與 App 的風格統一性。

小程序設計區域

小程序的「所有頁面」右上角位置,都固定放置了小程序的菜單,在設計界面時需預留出該區域空間。

Nav Bar設計

1. 小程序菜單固定樣式

微信提供了深淺兩種配色樣式,以便更好地融合到各種風格的頁面中,需注意保持小程序菜單清晰的辨識度。

線上案例:

2. 交互注意事項

如果要在小程序菜單附近放置交互元素,要考慮是否有交互沖突,應盡量避免誤觸的可能。

建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異,以便區分。

如上圖,小紅書的自有導航樣式個人不推崇,理由如下:

  • 樣式與官方菜單樣式未區分開,容易產生疑惑;
  • Nav Bar 欄兩端對稱在頂部,視覺上顯得過于呆板。

微信讀書既有微信線條外框的 DNA,又區別于官方樣式,是不錯的綜合。以上僅限個人觀點,還需用戶數據來客觀驗證。

3. 搜索框常見的幾種表現形式

Tool Bar設計

1. 小程序設計規范

頂部標簽分頁欄顏色可自定義,一般會沿用 App 的設計風格,以保證兩個平臺的視覺統一性。

2. 常見的幾種表現形式

Tab Bar設計

1. 小程序設計規范

微信有提供小程序的底部標簽樣式,建議標簽數量在 2-4 個適宜。

也可根據產品需要選擇或者去掉底部標簽欄功能。

2. 常見的幾種表現形式

啟動頁圖標

啟動頁除品牌 Logo 外,其他元素都由微信統一提供,且不能更改,設計師僅需提供 2 倍和 3 倍尺寸的 Logo 即可。

加載樣式

1. 小程序設計規范

全局加載是小程序名稱左側的加載圖標。模態的加載樣式將覆蓋整個頁面,由于無法明確告知具體加載的位置或內容,可能會引起用戶的焦慮感,建議謹慎使用。

2. 常用的加載樣式

需告知用戶具體加載的位置形狀,減輕用戶焦慮情緒。

對于沒有開發App來說,可依據官方推出的《微信小程序設計指南》來設計,以確保快速設計出符合規范的小程序。

小程序設計應遵循友好、高效、一致的設計原則,每個頁面都應有明確的重點,清晰明確地告知用戶身在何處,又可以往何處去,確保用戶在頁面中游刃有余地穿梭而不迷路。

平臺設計網站推薦

最后,推薦幾個常用的平臺設計網站。

1. BAT各平臺小程序設計規范網站

微信小程序設計指南:https://developers.weixin.qq.com/miniprogram/design/

支付寶小程序設計規范:https://docs.alipay.com/mini/design

百度-智能小程序設計規范:
https://smartprogram.baidu.com/docs/design/overview/introduction/

2. 其他常用的設計規范網站

蘋果-人機界面指南:https://developer.apple.com/design/human-interface-guidelines/

詳細介紹了 iOS 設計規范,同時還提供了 UI 設計資源下載。

安卓-MD設計指南:https://material.io/design/

螞蟻設計:https://design.alipay.com/#ds

提供移動和 Web 端的設計組件,還有設計案例和心得的文章供學習。

微信樣式庫:https://weui.io/

提供微信內的網頁和小程序設計規范。

歡迎添加作者的個人微信:

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.wydhjd.tw/small-program-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計師 扁平化設計 版式設計 交互設計師 界面設計 排版布局 職場 優設專訪 優設大課堂 配色 視覺設計 web前端開發 素材下載 設計流程 AI教程 設計理論 神器下載 字體下載 設計師專訪 psd下載 平面設計 用戶體驗設計 設計趨勢 設計規范 海報設計 動效設計 圖標設計 logo設計 產品設計 ICON 神器推薦 App設計 職場規劃 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

94期香港马会三肖中特