6
寫在開頭，以表明動機、甩掉一切可能需要承擔的責任。
說明一下目的：看到傳播很熱的微信WeUI，應該說是一種比較簡單暴力的表現形式，但落實到設計者進行學習和實操時，具體數值應該會更有參考性；
說明一下過程：部分數據來自CSS樣式，部分數據來自截圖后PS測量。
說明一下成果：數據中類似色值本身并不具有參考價值，但是動態變化方法值得參考。
其實，規范首頁設計上配色清爽、排版簡潔、內容上分類清晰，甚得我心（相比于IBM龐大的結構復雜的沒漢化的設計規范，真的是業界良心）；
每個類別內的交互做得很直觀，測試過程真是痛并快樂著；
微信WeUI設計規范查看鏈接：WeUI
接下來的內容是對WeUI中列舉到的控件的一些理解，除了微信中的實例也會提及這些控件的通用用法；主要包括Button、Cell 、 Toast 、 Dialog 、Progress 、 Msg 、 Article、 Actionsheet、Icons、 Panel、 Tab、 Searchbar。
一般情況，我們認為按鈕有三態Normal（正常）、Pressed/Highlighted（按下）、Disabled（不可）。
圖01：WeUI-BUTTON整理
表01：WeUI-BUTTON內容整理
百分數代表不透明度
- 表示無變化
線框類的button Pressed狀態下僅在描邊上加響應黑透蒙版
另外，我們知道表單中常用有RadioButton(單選)/CheckBox(復選框)控件，但是這兩個控件在iOS控件庫中是不存在的，且在移動端我們更多地會把這類需求設計成按鈕平鋪的形式（面積更大更易識別，如充話費時選擇額度按鈕 ），這個時候按鈕就可能會出現Focused(選中)狀態。微信中沒有發現相關案例，但在表格中寫明。
在規范中，配色方案的確定通常都是比較糾結的過程，而為了簡化配色方案及為了更有通用性，我們常用的方法就是：調整透明度；
具體的做法比如表格中純色類的按鈕邊界 是在純色基礎上疊加20%的#000000（不用靠感覺去吸色-調一個深色了），這種方法簡單有效、理性；
再比如pressed狀態，無論是什么背景的色值，通過疊加蒙版的方式都可以得到一個有效的明顯的統一的反饋。
另外針對灰度等級的設定也可以使用調整透明度的方法，確定多個不同層級的色值；
解釋為單元格，會不會更易被認知？
設計規范的初衷是為了讓更多的工作人員迅速認知產品提高開發效率，并且不同的工作人員能在規范約束下做出交互、視覺等方面能保持整體和諧統一的設計；
比如：
圖中標識的 兩邊留白的統一（即柵格系統）；
不同文本內容選取的控件的一致性；
Pressed狀態 通常在背景上加10%透明蒙版等細節；
圖02：Cell列表整理
圖03：Cell中的常用控件
操作列表（ActionSheet）
數字鍵盤（Keyboard）
選擇器（Picker）
時間日期選擇器（Date Picker）
臨時的彈框用來表示一些提示信息，通常在3s±時間消失；
圖04：Toast整理
在iOS標準UI控件中 也叫警告框（Alert）
圖05：Dialog整理
應當盡量遵守：彈框內容須包含標題，有時候會包含正文；包含一個或多個按鈕;避免出現不必要的警告框（對話框）。
另外彈框的形式一般情況下可以設計成居中彈框或者是底部的彈框，底部的彈框似乎是隨著大屏手機的普及應需而生，現在也被越來越廣泛得使用；
在iOS人機界面指南的控件篇章中，居底彈框是在Actionsheet（操作列表）中的例子，而居中彈框是Alert（警告框）的例子，因此個人覺得，當需要用戶進行功能性的操作時用局底彈框，而提示性信息并需要用戶確認時可用居中（如上圖微信中的案例）；
無論如何，保持用戶沉浸在我們的APP中進行操作時，應當盡量在這些細節中感覺到統一和諧，有良好的用戶體驗是我們最終的追求。
圖06：Progress整理
信息提示的面板
圖07：Msg頁面案例
文本內容的規范
圖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會根據字號大小，自動調整字間距。
操作列表的規范，在Toast中已提及
圖10：Actionsheet頁面案例
圖標的設計規范
圖11：icons頁面案例
圖標的設計是在UI設計中比較能體現界面風格的細節，icon的設計屬于理性和感性比較交錯的部分。對于細節要敢于創新也要舍得取舍。體量感的控制，風格的統一，視錯覺下的調整……
面板的設計規范
圖12：panel頁面案例
我覺得WeUI中出現的pannel這部分可能有點多余，這應該和Cell部分一樣，屬于表單系列；只不過這里的表單是平時我們比較常見的部分（圖文組合）；
在這種圖文組合中，如果能用上親密性、對比、重復、對齊這幾個原則，那一定會是一個標準舒適的界面。
Tab的設計規范
圖12：Tab頁面案例
我們知道Tab的高度一般取49pt，相對應的tab中icon的大小一半控制在25pt內；
搜索框的設計規范
圖12：searchbar頁面案例
文末感謝開發小伙伴的技術支持。
本文由人人都是產品經理的@風口上的豬毛原創發布雷鋒網，未經許可，禁止轉載。
編輯：小芹菜
雷峰網原創文章，未經授權禁止轉載。詳情見轉載須知。
