想學(xué)微信的界面設(shè)計(jì)，來看看WeUI的暴力美學(xué)

本文作者：人人都是產(chǎn)品經(jīng)理

2016-04-08 15:01

導(dǎo)語：傳播很熱的微信WeUI，是一種比較簡單暴力的表現(xiàn)形式。

寫在開頭，以表明動機(jī)、甩掉一切可能需要承擔(dān)的責(zé)任。

說明一下目的：看到傳播很熱的微信WeUI，應(yīng)該說是一種比較簡單暴力的表現(xiàn)形式，但落實(shí)到設(shè)計(jì)者進(jìn)行學(xué)習(xí)和實(shí)操時，具體數(shù)值應(yīng)該會更有參考性；

說明一下過程：部分?jǐn)?shù)據(jù)來自CSS樣式，部分?jǐn)?shù)據(jù)來自截圖后PS測量。

說明一下成果：數(shù)據(jù)中類似色值本身并不具有參考價值，但是動態(tài)變化方法值得參考。

其實(shí)，規(guī)范首頁設(shè)計(jì)上配色清爽、排版簡潔、內(nèi)容上分類清晰，甚得我心（相比于IBM龐大的結(jié)構(gòu)復(fù)雜的沒漢化的設(shè)計(jì)規(guī)范，真的是業(yè)界良心）；

每個類別內(nèi)的交互做得很直觀，測試過程真是痛并快樂著；

微信WeUI設(shè)計(jì)規(guī)范查看鏈接：WeUI

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

Button

一般情況，我們認(rèn)為按鈕有三態(tài)Normal（正常）、Pressed/Highlighted（按下）、Disabled（不可）。

圖01：WeUI-BUTTON整理

表01：WeUI-BUTTON內(nèi)容整理

百分?jǐn)?shù)代表不透明度
- 表示無變化
線框類的button Pressed狀態(tài)下僅在描邊上加響應(yīng)黑透蒙版

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

在規(guī)范中，配色方案的確定通常都是比較糾結(jié)的過程，而為了簡化配色方案及為了更有通用性，我們常用的方法就是：調(diào)整透明度；

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

再比如pressed狀態(tài)，無論是什么背景的色值，通過疊加蒙版的方式都可以得到一個有效的明顯的統(tǒng)一的反饋。

另外針對灰度等級的設(shè)定也可以使用調(diào)整透明度的方法，確定多個不同層級的色值；

Cell

解釋為單元格，會不會更易被認(rèn)知？

設(shè)計(jì)規(guī)范的初衷是為了讓更多的工作人員迅速認(rèn)知產(chǎn)品提高開發(fā)效率，并且不同的工作人員能在規(guī)范約束下做出交互、視覺等方面能保持整體和諧統(tǒng)一的設(shè)計(jì)；

比如：

圖中標(biāo)識的兩邊留白的統(tǒng)一（即柵格系統(tǒng)）；
不同文本內(nèi)容選取的控件的一致性；
Pressed狀態(tài) 通常在背景上加10%透明蒙版等細(xì)節(jié)；

圖02：Cell列表整理

圖03：Cell中的常用控件

操作列表（ActionSheet）
數(shù)字鍵盤（Keyboard）
選擇器（Picker）
時間日期選擇器（Date Picker）

Toast

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

圖04：Toast整理

Dialog

在iOS標(biāo)準(zhǔn)UI控件中也叫警告框（Alert）

圖05：Dialog整理

應(yīng)當(dāng)盡量遵守：彈框內(nèi)容須包含標(biāo)題，有時候會包含正文；包含一個或多個按鈕;避免出現(xiàn)不必要的警告框（對話框）。

另外彈框的形式一般情況下可以設(shè)計(jì)成居中彈框或者是底部的彈框，底部的彈框似乎是隨著大屏手機(jī)的普及應(yīng)需而生，現(xiàn)在也被越來越廣泛得使用；

在iOS人機(jī)界面指南的控件篇章中，居底彈框是在Actionsheet（操作列表）中的例子，而居中彈框是Alert（警告框）的例子，因此個人覺得，當(dāng)需要用戶進(jìn)行功能性的操作時用局底彈框，而提示性信息并需要用戶確認(rèn)時可用居中（如上圖微信中的案例）；

無論如何，保持用戶沉浸在我們的APP中進(jìn)行操作時，應(yīng)當(dāng)盡量在這些細(xì)節(jié)中感覺到統(tǒng)一和諧，有良好的用戶體驗(yàn)是我們最終的追求。

Progress

圖06：Progress整理

Msg

信息提示的面板

圖07：Msg頁面案例

Article

文本內(nèi)容的規(guī)范

圖08：Article頁面案例

通常，閱讀類的應(yīng)用會對內(nèi)容的排版進(jìn)行額外的調(diào)整，如網(wǎng)易新聞。在這里說一些常見的通用的文字處理方式：

要考慮文字的響應(yīng)式變化，如在大屏手機(jī)和小屏手機(jī)中的單行文字顯示數(shù)量變化引起的布局上的變化；
不同頁面導(dǎo)航欄的文字使用相同字號，一般為17pt；
確保文字的可讀性，最小字號不小于11pt(dp)；
通常情況下，應(yīng)用整體使用單一字體（后面附不同OS下文字使用規(guī)范）；
1.5-1.8倍的行距是比較適宜的文本內(nèi)容行距；如微信案例中為1.6倍（倍數(shù)是指在字號的基礎(chǔ)上）；
文本總是使用常規(guī)(regular)或中等(medium)，一般不使用輕(Light)或者加粗(Bold);

圖09：不同OS下的文字使用規(guī)范

當(dāng)你在你的app中使用San Francisco時，iOS會自動在適當(dāng)?shù)臅r機(jī)在文本模式和展示模式中切換（無需額外標(biāo)注）；
用photoshop或者sketch生成設(shè)計(jì)稿時，調(diào)整Text/Display，并將渲染模式設(shè)為Mac 更接近實(shí)現(xiàn)效果；
iOS會根據(jù)字號大小，自動調(diào)整字間距。

Actionsheet

操作列表的規(guī)范，在Toast中已提及

圖10：Actionsheet頁面案例

icons

圖標(biāo)的設(shè)計(jì)規(guī)范

圖11：icons頁面案例

圖標(biāo)的設(shè)計(jì)是在UI設(shè)計(jì)中比較能體現(xiàn)界面風(fēng)格的細(xì)節(jié)，icon的設(shè)計(jì)屬于理性和感性比較交錯的部分。對于細(xì)節(jié)要敢于創(chuàng)新也要舍得取舍。體量感的控制，風(fēng)格的統(tǒng)一，視錯覺下的調(diào)整……