每個UI設計師必須瞭解的圖示
大家知道現在的UI設計逐漸趨向極簡風和質感,加上人們的注意力集中時間在快速下降,所以作為一個UI設計師,設計好一個傳達效率高的圖示是非常有必要的,今天譽財教育就帶大家從零開始瞭解一下圖示。
一、什麼是圖示
設計圖示之前我們首先要明白圖示存在的意義。廣義上來說,圖示是指有明確指代意義的圖形。它以單純、顯著、易識別的物象、圖形或文字元號作為直觀語言;除表示、代替具體事物之外,還具有表達意義、情感和指令行動等作用。它不僅是一種圖形,更是一種標識,它具有高度濃縮並快捷傳達資訊、便於記憶的特性。
研究表明人類的平均注意力正在逐年下降從12秒至8秒。因此,傳遞資訊的速度就越來越重要。因此,圖示的“高識別度”,“高度濃縮”,“便於記憶”就非常重要了。
二、圖示的分類
1、說明性圖示(解釋說明)
說明性圖示主要是用來闡述和解釋說明特定的功能或者內容,它們並不一定是被點選直接可操作的UI元素,有時僅僅是作為靜態頁面對於文字的輔助說明;它們通常也會配有輔助解釋其含義的文案,以提高資訊的可識別性,是頁面設計中使用範圍最廣的一種圖示使用手法。
2、互動性圖示(操作指令)
這種圖示在使用者介面中不止是展示的作用,還會參與到使用者互動當中來,是不可或缺的組成部分。它們可以被點選,並且隨之響應,最典型的就是點讚的操作了;可以幫助使用者執行特定的操作,觸發相應的功能。
3、裝飾性圖示(審美輔助)
這種圖示通常是用來提升整個介面的美感和視覺體驗,不一定具備明顯的功能性。但它們同樣是重要的。這類圖示在設計風格上的迎合了目標受眾的偏好與期望,具備了有風格性的獨特外觀,並且提升了整個設計的可靠性和友好度。
三、圖示的設計風格
根據設計風格的不斷演變,圖示也產生了很多種不同的風格變化,其中最常見的幾種是:
面性圖示 —— 性質:穩定、安全、強調分量感,體量較重;往往用於分割層次,區分資訊的重要程度; 使用時需要仔細考慮資訊層級與文字搭配時的體量比例。
線性圖示 —— 性質:輕盈、連貫、精緻,體量較輕;往往用於整體觀感精緻簡約風格的頁面設計;但是過大面積的使用容易使頁面產生過於輕浮沒有重心的感覺。
線+面 —— 線上性圖示的基礎上填色或者區域性填色,使圖示更加個性化,可拓展且靈活, 相較於單純線性或單純面性icon來說更具有特色、年輕化;通常適用於需要強調的入口,相對於純線性或面性icon較複雜,不適合小體量場景使用。
面+面 —— 採用配色與其他視覺元素呈現出的稍複雜圖形,與線+面的形式類似,與審美氣質與設計風格的選擇有較強關聯,設計師在其中可以更加靈活的運用色彩;相對於功能性圖示來說更適用於裝飾性圖示。
2.5D 圖示 —— 也是運用配色搭建的圖示,整體相較於扁平圖示有了立體感,使得對於物象的表達更加清晰不趨同;同樣也趨於裝飾性圖示。
擬物 —— 手機介面興起伊始的風格,對現實事物元素的超級詳細的模仿與拷貝;用於最初在介面設計中對於使用者的教育——模擬更真實的實用場景。現在多用於更加個性及細節化的展示,目前仍廣泛用於遊戲場景中。
由於篇幅限制,今天譽財雙流UI設計培訓給大家帶來的內容到這裡就結束了,希望能對大家有所幫助,關於圖示的使用會在下一次與大家一起討論哦!