當前位置:
首頁 > 設計 > 工具欄圖標設計方法!

工具欄圖標設計方法!

文/羅曉萌

工具欄圖標的設計在整個應用程序中扮演了人機交互的重要角色。工具欄圖標設計的成功與否,直接決定了用戶對應用程序的滿意度。

如果說啟動圖標是應用門面的話,那工具欄圖標就是導航燈,它的設計應該是以提示、引導、警告為目的。APP只有一個啟動圖標,但是卻有很多的工具欄圖標。

將圖形幾何化。我們生活中所看到的任何圖形,幾乎總是有幾何形的存在,將圖形簡化為幾何形是對圖形進行一種高度概括。

幾何化就是將圖標設計的所選圖形的輪廓進行規範化,不論輪廓多麼繁瑣,都要簡化成幾何圖形,可以是三角形、矩形、圓形、梯形、五角形。簡單來說,幾何化是一種從具象到抽象的演變。

用單線勾勒圖形。線是造型藝術最基本的語言,線具有較強的表現性。這裡所講的用單線勾勒即是先確定所要設計工具欄圖標的元素圖形,然後用單線勾勒圖形輪廓,整個線條軌跡連接閉合就形成了圖形。

線條的顏色應與界面顏色區別開來,圖形內部無需再著色。線條高度的概括性讓整個圖標顯得簡潔,輕快而不呆板。

用剪影詮釋圖形。剪影風格經常會運用到工具欄圖標的設計,剪影是一種高度概括的表現形式,這種高度概括放在演算法中就是一種減法,是在保留表達目標的基礎上合理刪減,簡單的說就是簡化圖形。

將所選圖形平鋪,不做任何的修飾和效果,諸如高光、漸變、反光、投影,只需保留最重要的細節,不必要的地方一概刪除,直接表達所需要表現的對象。

工具欄圖標的設計大都非常簡約,APP界面上同時會有多個工具欄圖標,如果想讓整個界面看起來乾淨簡潔,圖標就要統一起來。統一的形式除了造型之外最重要的就是配色了。

一般工具欄圖標的顏色都是單色的,我們不能把這裡的單色單純理解為黑色和白色,而是只採用一種顏色。當然可以是各種顏色,但是具體要和整個的界面顏色相和諧。也有的一些APP的工具欄圖標每一個圖標都用不同的顏色,這種配色不是不可以,運用的不好容易使得整個界面繁瑣雜亂。

工具欄圖標看似簡單,但是它的設計需要更加嚴謹和高超的造型能力和技巧,設計方法也更加嚴格。工具欄圖標的設計要充分考慮用戶的慣用思維和一些各大平台用戶公認的工具欄圖標。

例如:說搜索的常用圖標就是一個放大鏡的圖形,像這種慣用圖標用於再設計時就要根據自己整個APP的風格和界面布局,做細節的改動,以求與整個APP設計相協調。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!


請您繼續閱讀更多來自 設計智造 的精彩文章:

Logo就要減形不減意
PS教程/鬧鐘小圖標