首頁 > 建站資源 > 網站運營 > 想學微信的界面設計?來看看WeUI的暴力美學吧!

江苏十一选五号码遗漏查询:想學微信的界面設計?來看看WeUI的暴力美學吧!

時間:2016-04-11    來源:人人都是產品經理

江苏十一选五开奖公告 www.ervgn.com 產品設計 微信界面設計 微信運營 微信設計

寫在開頭,以表明動機、甩掉一切可能需要承擔的責任。

目的:看到傳播很熱的微信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中進行操作時,應當盡量在這些細節中感覺到統一和諧,有良好的用戶體驗是我們最終的追求。

相關推薦
20大UI設計原則 設計師必備寶典
APP應用設計教程:設計元素的應用條件
設計完美的界面排版10個要點分享
讓UI設計顯得更簡約的小技巧分享
細說用戶體驗設計背后的“黑暗模式”
遵循用戶需求的設計:最美APP的9條閃光定律
微軟發布Windows 8.1更新 針對鼠標鍵盤用戶
企鵝進化論 細數那些年我們一起用過的QQ
用戶界面設計教程:UI設計六要素分享
谷歌將推新設計語言 統一安卓用戶界面設計
今日最佳設計:人像即按鈕 社交應用新趨勢
細節決定成敗!提高用戶登錄體驗的5個細節
百設網:專注于應用界面設計的作品交易網站
好看好用?UI設計師不可不學的易用性原則
如何給Android產品設計一款合適的圖標?
分享設計:Froont打造網站設計界的Github
2014年八個最棒UI設計靈感:你最中意哪個?
Web APP與原生APP有哪些交互設計區別?
想讓界面優雅易讀?聊聊移動端字體7個準則
天天喊著學UI 你知道安卓和iOS的區別嗎?
連按鈕都設計不好 你還指望用戶點擊?
分享為SOUNDWAVE設計WATCH應用的五個技巧
這是個看臉的世界 即便你是APP也是如此
再見METRO!WINDOWS 10通用應用設計趨勢分析
以微信網易為例:新聞型產品列表設計分析
超實用干貨!視覺設計師的五項技能修煉方法
百度官方出品!2015-2016交互體驗趨勢
界面設計:從減少點擊次數到降低使用負荷
簡約至上:教你打造用戶喜愛的產品設計風格
用戶為王!關于征詢授權、注冊及加載等待的體驗優化
APP產品設計:讓用戶看見 才是王道!
簡約之道:極簡風格界面設計的起源與發展
nice 啟示錄: 看移動 App 的產品設計和運營策略
超實用干貨!深聊時下最熱門應用的11種設計模式
網站策劃:如何使簡單的想法更簡單?
被小米青睞的“UI 中國”,還想圍繞界面交互設計師做點什

精彩推薦

熱門教程