那些你不曾注意的APP UI

Wa小編
YACHEN
Published in
3 min readJun 18, 2019

--

104、Richart、Airbnb、全家便利商店、美圖秀秀、Facebook

觀察手機裡常用的APP設計規則

繼上一篇關於圖標設計型態解說後,再用「APP實例」更深入闡述,解釋icon的運作方式,不過,我還是要強調,理論應用可以有很多種方式,適合我的,未必適合你,切合實用才是最重要的。

圖形使用者介面

(英語:Graphical User Interface,縮寫:GUI

GUI設計規範很重要、GUI設計規範很重要、GUI設計規範很重要,講三次。

GUI設計規範舉例:50px * 50px大小圖面繪製圖標,線條描邊是2px,所有斷線的開口大小為10px,有了這些規則之後,才能夠保證你輸出的圖標統一、規範。

Richart

線性斷線圖標:視覺表現弱,用戶可以通過文字信息來找尋功能,drbbble上流行的用帶透明度的色塊疊加的風格,用色塊去裝點原本的線形icon。

App icon

漸變圖標:圖標面的填充方式如果選擇漸變,可以有線性漸變和角度漸變兩種方式,這樣的設計風格柔和,也是當前非常流行的設計風格,比如新版的Facebook icon。

補充:自適應圖標、異形圖標:理解 Android開發出的Adaptive icon,也稱為異形圖標雖然給了創作者極大自由,但缺點就在於設計缺乏統一。

104人力銀行

實物貼圖風格圖標:以實物圖示表現,缺點就在於視覺缺乏統一,但可增加可信度,適合用在版面小的介面內,如網頁版面則不適合,過於複雜的版面影響用戶的閱讀效率。

全家便利商店

扁平化圖標:圖示中「我的點數」「我的寄杯」「折價券」

扁平化圖標特色:亮色調、簡化排版,沒有過多的陰影、浮雕、斜角、漸變等效果,通常以單純的色塊,搭配清楚的字型編排,呈現出一種乾淨且簡約的風格,製作起來需要花更多時間也要顧及細節。

Airbnb

線性圖標:通過線來產生面,塑造形體輪廓,可搭配陰影混合使用。

UI/UX Collective 蒐集用戶體驗的小小設計師
Curated stories on user experience, usability

文章撰寫:亞宸
喜歡這篇文章的朋友,「拍手」給鼓勵,超喜歡可以拍到50個喔。
更多UI/UX文章...more

--

--