:最近設計群里經常有人問起小法式設計規范的問題,雖然官方有提供樣式庫的下載,但是停留在 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各平臺小法式設計規范網站

微信小法式設計指南:

支付寶小法式設計規范:

百度-智能小法式設計規范:

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

蘋果-人機界面指南:

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

安卓-MD設計指南:

螞蟻設計:

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

微信樣式庫:

提供微信內的網頁和小法式設計規范。

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

點贊 4
收藏 438
繼續閱讀相關文章

發表評論 已發布 8

還可以輸入 800 個字
 
 
載入中....
8 收藏