weui

 我的微信：hellocongzhi，驗證信息：博客園同窗，歡迎隨時交流溝通技術心得

 

過程：部分數據來自CSS樣式，部分數據來自截圖後PS測量。

　　成果：數據中相似色值自己並不具備參考價值，可是動態變化方法值得參考。

　　其實，規範首頁設計上配色清爽、排版簡潔、內容上分類清晰，甚得我心（相比於IBM龐大的結構複雜的沒漢化的設計規範，真的是業界良心）；

　　每一個類別內的交互作得很直觀，測試過程真是痛並快樂着；

　　微信WeUI設計規範查看連接：WeUI

　　接下來的內容是對WeUI中列舉到的控件的一些理解，除了微信中的實例也會說起這些控件的通用用法；主要包括Button、Cell 、 Toast 、 Dialog 、Progress 、 Msg 、 Article、 Actionsheet、Icons、 Panel、 Tab、 Searchbar。

　　Button

　　通常狀況，咱們認爲按鈕有三態Normal（正常）、Pressed/Highlighted（按下）、Disabled（不可）。

　　

　　圖01：WeUI-BUTTON整理

　　

　　表01：WeUI-BUTTON內容整理

　　百分數表明不透明度

　　– 表示無變化

　　線框類的button Pressed狀態下僅在描邊上加響應黑透蒙版

　　另外，咱們知道表單中經常使用有RadioButton(單選)/CheckBox(複選框)控件，可是這兩個控件在iOS控件庫中是不存在的，且在移動端咱們更多地會把這類需求設計成按鈕平鋪的形式（面積更大更易識別，如充話費時選擇額度按鈕 ），這個時候按鈕就可能會出現Focused(選中)狀態。微信中沒有發現相關案例，但在表格中寫明。

　　在規範中，配色方案的肯定一般都是比較糾結的過程，而爲了簡化配色方案及爲了更有通用性，咱們經常使用的方法就是：調整透明度；

　　具體的作法好比表格中純色類的按鈕邊界 是在純色基礎上疊加20%的#000000（不用靠感受去吸色-調一個深色了），這種方法簡單有效、理性；

　　再好比pressed狀態，不管是什麼背景的色值，經過疊加蒙版的方式均可以獲得一個有效的明顯的統一的反饋。

　　另外針對灰度等級的設定也可使用調整透明度的方法，肯定多個不一樣層級的色值；

　　Cell

　　解釋爲單元格，會不會更易被認知？

　　設計規範的初衷是爲了讓更多的工做人員迅速認知產品提升開發效率，而且不一樣的工做人員能在規範約束下作出交互、視覺等方面能保持總體和諧統一的設計；

　　好比：

　　圖中標識的 兩邊留白的統一（即柵格系統）；

　　不一樣文本內容選取的控件的一致性；

　　Pressed狀態 一般在背景上加10%透明蒙版等細節；

　　

　　圖02：Cell列表整理

　　

　　圖03：Cell中的經常使用控件

　　操做列表（ActionSheet）

　　數字鍵盤（Keyboard）

　　選擇器（Picker）

　　時間日期選擇器（Date Picker）

　　Toast

　　臨時的彈框用來表示一些提示信息，一般在3s±時間消失；

　　

　　圖04：Toast整理

　　Dialog

　　在iOS標準UI控件中 也叫警告框（Alert）

　　

　　圖05：Dialog整理

　　應當儘可能遵照：彈框內容須包含標題，有時候會包含正文；包含一個或多個按鈕;避免出現沒必要要的警告框（對話框）。

　　另外彈框的形式通常狀況下能夠設計成居中彈框或者是底部的彈框，底部的彈框彷佛是隨着大屏手機的普及應需而生，如今也被愈來愈普遍得使用；

　　在iOS人機界面指南的控件篇章中，居底彈框是在Actionsheet（操做列表）中的例子，而居中彈框是Alert（警告框）的例子，所以我的以爲，當須要用戶進行功能性的操做時用局底彈框，而提示性信息並須要用戶確認時可用居中（如上圖微信中的案例）；

　　不管如何，保持用戶沉浸在咱們的APP中進行操做時，應當儘可能在這些細節中感受到統一和諧，有良好的用戶體驗是咱們最終的追求。

　　Progress

　　

　　圖06：Progress整理

　　Msg

　　信息提示的面板

　　

　　圖07：Msg頁面案例

　　Article

　　文本內容的規範

　　

　　圖08：Article頁面案例

　　一般，閱讀類的應用會對內容的排版進行額外的調整，如網易新聞。在這裏說一些 常見的通用的文字處理方式：

　　要考慮文字的響應式變化，如在大屏手機和小屏手機中的單行文字顯示數量變化引發的佈局上的變化；

　　不一樣頁面導航欄的文字使用相同字號，通常爲17pt；

　　確保文字的可讀性，最小字號不小於11pt(dp)；

　　一般狀況下，應用總體使用單一字體（後面附不一樣OS下文字使用規範）；

　　1.5-1.8倍的行距是比較適宜的文本內容行距；如微信案例中爲1.6倍（倍數是指在字號的基礎上）；

　　文本老是使用常規(regular)或中等(medium)，通常不使用輕(Light)或者加粗(Bold);

　　

　　圖09：不一樣OS下的文字使用規範

　　當你在你的app中使用San Francisco時，iOS會自動在適當的時機在文本模式和展現模式中切換（無需額外標註）；

　　用photoshop或者sketch生成設計稿時，調整Text/Display，並將渲染模式設爲Mac 更接近實現效果；

　　iOS會根據字號大小，自動調整字間距。

　　Actionsheet

　　操做列表的規範，在Toast中已說起

　　

　　圖10：Actionsheet頁面案例

　　icons

　　圖標的設計規範

　　

　　圖11：icons頁面案例

　　圖標的設計是在UI設計中比較能體現界面風格的細節，icon的設計屬於理性和感性比較交錯的部分。對於細節要勇於創新也要捨得取捨。體量感的控制，風格的統一，視錯覺下的調整……

　　Panel

　　面板的設計規範

　　

　　圖12：panel頁面案例

　　我以爲WeUI中出現的pannel這部分可能有點多餘，這應該和Cell部分同樣，屬於表單系列；只不過這裏的表單是平時咱們比較常見的部分（圖文組合）；

　　在這種圖文組合中，若是能用上親密性、對比、重複、對齊這幾個原則，那必定會是一個標準溫馨的界面。

　　Tab

　　Tab的設計規範

　　

　　圖13Tab頁面案例

　　咱們知道Tab的高度通常取49pt，相對應的tab中icon的大小一半控制在25pt內；

　　SearchBar

　　搜索框的設計規範

　　

　　圖14searchbar頁面案例