【UI設計】擬物化圖示設計風格技巧

擬物化風格也稱為寫實風格,即據實直書,真實地描繪事物。

【UI設計】擬物化圖示設計風格技巧

【UI設計】擬物化圖示設計風格技巧

擬物化圖示基本上使用生活中原有的物象來反映產品的功能,同時圖示的內部加入更多的寫實細節,比如色彩、3D效果、陰影、透視效果,甚至一些簡單的物理效果,使得使用者認知時一目瞭然,視覺刺激強烈,大大提高辨識程度。

【UI設計】擬物化圖示設計風格技巧

但有些時候寫實的設計並不一定是原始的意思,而是一種近似的表達,比如眼睛圖形可能不代表“眼睛“,而代表“檢視”或“檢視”;齒輪狀的圖形不一定代表的是“齒輪“,可能是“設定”,也可能是“調整“。

【UI設計】擬物化圖示設計風格技巧

簡而言之,擬物化的圖示,無論是面對真實存在的物體,還是想象出來的物件,其總是在描述一個真實存在的事物,而不是抽象的符號。

【UI設計】擬物化圖示設計風格技巧

擬物化風格圖示的實際設計,並不一定是照著原始物體將其完全描繪出來,有時候只需要描繪基本元素即可,即將重點的部分表達出來就可以了。比如我們經常看到使用者介面上的主頁按鈕,通常會用一個小房子作為圖示,將代表房子的重點元素繪製出來。

【UI設計】擬物化圖示設計風格技巧

【UI設計】擬物化圖示設計風格技巧

擬物化風格設計對於初次接觸電子產品的使用者來說,識別直觀,易用性強,可以很容易找到操作的入口。但多年一成不變的設計也造成了一些問題,比較突出地表現於以下兩個方面:擬物化風格圖示流行多年,造成使用者的審美疲勞;過度地在意擬物化的細節表現,使得使用者對產品內容的轉化效率變低。

【UI設計】擬物化圖示設計風格技巧

【UI設計】擬物化圖示設計風格技巧

①注意取捨。在擬物化圖示的創作中,細節太多或太少,都有可能造成使用者看不懂的情況,所以要注意取捨。可以先在紙稿上繪製草圖,用來確定哪些細節需要表達,哪些可以省略。當然,如果介面元素和生活參照物相差太遠,就會很難辨別;如果太寫實,有時候也會讓人們無法識別你要表達的內容。

【UI設計】擬物化圖示設計風格技巧

②使用合適的材質和紋理。擬物化圖示中使用好的材質和紋理,能夠讓使用者得到對品質追求的滿足感。比如木質、皮質或者塑膠一般可以使人產生懷舊感,金屬一般可以使人產生科技感,大自然中的事物能夠喚起親和感,食物類的質感表現可以勾起人們的食慾感。使用合適的質感與紋理表現,可以使使用者的感受從物質感受提升至對美好事物的精神感受。

【UI設計】擬物化圖示設計風格技巧

③規劃擬物化圖示中的光影與色彩。擬物化圖示中的光影與色彩是還原“真實”物象的重要環節,能使圖示從二維平面轉換為三維的立體效果。光影與色彩從不同的角度、不同的空間表現出來的組合效果,成為一種獨特的視覺語言,帶給人們美好的享受。

【UI設計】擬物化圖示設計風格技巧