想學微信的界面設計,來看看WeUI的暴力美學

iqos 寫在開頭,以表明動機、甩掉一切可能需要承擔的責任。說明一下目的:看到傳播很熱的微信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(選中)狀態。微信中沒有發現相關案例,但在表格中寫明。在規范中,配色方案的確定通常都是比較糾結的過程,而為瞭簡化配色方案及為瞭更有通用性,我們常用的方法就是:調整透明度;具體的做法比如表格中純色類的按鈕邊界 是在純iqos菸草色基礎上疊加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頁面案例通常,閱讀類的應用會對內容的排版進行額外的調整,如網易新聞。在這裡說一些常見的通用的文字處理方式:要考慮文字的響應式變化,如在大屏手機和小屏手機中的單行文字顯示數量變化引起的佈局上的變化;不同iqos電子菸頁面導航欄的文字使用相同字號,一般為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部分一樣,屬於表單系列;隻不過這裡的表單是平時我們比較常見的部分(圖文組合);在這種圖文組合中,如果能用上親密性、對比、重復、對齊這幾個原則,那一定會是一個標準舒適的界面。TabTab的設計規范圖12:Tab頁面案例我們知道Tab的高度一般取49pt,相對應的tab中icon的大小一半控制在25pt內;SearchBar搜索框的設計規范圖12:searchbar頁面案例文末感謝開發小夥伴的技術支持。本文由人人都是產品經理的@風口上的豬毛原創發佈雷鋒網(公眾號:雷鋒網),未經許可,禁止轉載。編輯:小芹菜 雷鋒網原創文章,未經授權禁止轉載。詳情見轉載須知。

source:https://www.leiphone.com/news/201603/se4mE1efVmlzMdpD.html