想學微信的界面計劃，來看看WeUI的暴力美學

寫在開首，以註解念頭、拋棄統統大概須要負擔的義務。

目標：看到流傳很熱的微信WeUI，應當說是一種比擬簡略暴力的表示情勢，但落實到計劃者舉行進修和實操時，詳細數值應當會更有參考性；

進程：部門數據來自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中舉行操縱時，應該隻管在這些細節中感到到同一協調，有優越的用戶體驗是我們終極的尋求。

1
2
下一頁
檢察全文