無極登錄平台_從這3個方面,快速了解產品圖標設計體系的煉成

前不久我在講標籤欄專題的時候,有聊到過一次圖標。(前文已提及到部分規範,本文將直接引用,為防止新讀者理解脫節,建議先看前文)。

往期回顧:

掏空家底!圖標設計落地全方位指南

這一期真的是掏空了職業經驗,總結出一套圖標製作與落地方法,內容涵蓋真實項目中的大多數坑點。

閱讀文章 >>

那一次因為主題的緣故,不能偏題太遠,所以對圖標本身的講解我沒有進行太多的剖析,更多是在講標籤欄圖標的切圖、對接前端落地等項目實操的手法。於是有部分讀者在後台給我留言,讓我再全面地講解一次圖標。

所以這一期我將分三個步驟來總結一下一個產品圖標體系的誕生。

認識:圖標的分類

不論是從應用場景還是視覺效果來講,圖標的種類都是非常繁多的。所以對於圖標的分類,其實需要落實到具體的分類標準。

如果是基於 iOS 和 Material Design 平台規範,兩大平台僅從應用場景將圖標分為了:應用圖標(App/Product Icon)、系統圖標(System Icons),這並不難理解。

但據我所知,讓大家更加感到糾結的其實是自定義圖標(Custom Icons)。不清楚當下流行的圖標視覺類型,也不知道該如何搭建起一套產品圖標體系。所以我將對兩種分類標準下的圖標都進行一次總結。

1. 應用場景分類下的圖標

應用場景分類下的圖標我們主要先來說一說應用圖標(App Icon)。

因為應用圖標和我們在 App 界面內自定義的圖標不同,App 內的圖標我們可以根據產品的視覺風格隨意創造規範,但應用圖標需要符合平台的上架規定,我們必須要遵守平台規範。

實際上 iOS 和 MD 規範中的應用圖標視覺規範其實還是有所差異的,但因為在國內很少有項目會獨立設計雙平台應用,所以大多數時候我們還是會一圖適用雙平台。

所以在設計應用圖標時,不用過分拘泥於某一方平台規範,只需要注意簡單藉助輔助網格。最重要的還是不同終端要求的不同輸出尺寸。

應用圖標不僅僅出現在桌面上,iOS 還會在通知欄、Spotlight、設置等地方;安卓也會在狀態欄、消息 push 中出現。這些場景下的應用圖標尺寸根據設備的不同,显示的尺寸也是不同的。為了保證應用圖標的显示效果,需要單獨對每個尺寸進行調整,盡可能避免出現半個像素等情況,以保證邊緣显示的銳利。而單純的縮放並不能解決這些問題。

所以我總結了一份 iOS 應用圖標尺寸清單:

安卓的應用圖標,因為雜屏原因,且圖標應用場景繁多,整理起來過於繁瑣,並且 Android 8.0之後,應用圖標還支持 Z 軸適配法,這一系列的內容整理出來完全可以新開一個文章再詳解了……後續我一定會再專門開一期文章講解 Z 軸適配法,所以原諒我考慮到篇幅原因就不再贅述了。

一般安卓開發遇到特定場景,會和 UI 進行溝通確定。

2. 視覺效果分類下的圖標

在日常進行產品 UI 設計時,我們更多會涉及到設計各式各樣自定義視覺風格的圖標。許多小夥伴認為圖標類別太多,難以具象地描述它們。實際上目前常見的圖標類別大致可分為 8 種:

線型圖標:通過線條勾勒出來的圖標。

在越來越以「Less is More」為審美的時代,線性圖標已經普及到了許多的應用程序中。一般通過描邊粗細、圖標細節來打造產品圖標的區別。

面型圖標:採用填充和負空間結構的圖標。

面型相對於線型來說更加具有視覺重量,更容易吸引用戶的關注,識別度也更強。所以面型圖標經常被設計師用於區分線型圖標的選中狀態。

漸變圖標:採用漸變色填充的圖標。

漸變圖標算是面型圖標的一個分支,但因為細節豐富,彌散陰影的運用更偏向於年輕化,和傳統的面型圖標還是有所區別,所以常被單獨作為一種分類定義。

線面混合圖標:線型與面型的結合。

線面混合圖標因為視覺層級更加豐富,所以顯得更加活潑。通常用於打造視覺調性。

扁平圖標:採用扁平插畫形式的圖標。

扁平圖標對於普通的面型圖標,更加註重細節表現,視覺層級豐富,所以常用於營造產品氛圍和視覺調性。

擬物風格圖標:通過光影模擬真實物體質感的圖標。

擬物風格圖標一般都會在節日活動或遊戲中更為常見,更加有氣氛烘托。並且更貼近現實物體的真實質感,所以可以降低用戶的認知成本。

實物貼圖圖標:採用真實攝影物體的圖標。

和擬物風格相似,但實物貼圖圖標更加直接地採用真實的攝影作品。一般常用於電商和超市、生鮮類產品。

2.5D圖標:2.5D立體圖標。

2017-2018 年左右,2.5D 圖標曾在 UI 界颳起一陣風,所以有不少設計師認為這將成為未來圖標的一個趨勢,但是這陣風好像很快又刮停了……可能是因為設計成本過高,且風格過於鮮明,難以被許多產品駕馭。

動手:圖標的設計

前面說到的圖標類型非常多,要在一篇文章中一一剖析每一種類型的圖標設計確實挺難,並且複雜的圖標設計其實是考驗設計師的想法和軟件的使用能力,要專攻這一塊的話,網上的案例一搜一大把。所以我就不再做過多的講解了。

我主要來講一講平台規範中提到的線型、面型圖標的設計。

如果按照 MD 規範,圖標的組成結構有:描邊、端點、圓角、負空間、內邊距與安全邊距幾個部分。

除了安全邊距 MD 規範規定始終應保持 2dp 之外,我們改變其他任意的一個的組成結構,都可以影響到一個圖標的視覺風格。

我們來看一組示例:

之所以一套圖標能夠保持視覺統一,就是因為保證了以上拆解出的圖標組成結構細節統一。當你發現你搭建的圖標體系,視覺風格總是有所差異的時候,不妨再檢查一下這些細節。

管理:圖標的命名

製作完成的圖標,有些可能會復用於多個頁面,有些可能只應用於特定的頁面中。並且有一些圖標我們會輸出為位圖,有一些圖標我們又會使用線上矢量圖標庫來維護。導致我們的圖標管理起來特別麻煩。

曾經還是 UI 小白的我,百度過一套切圖命名模式,大致是「模塊-類別-功能-狀態」。並且文中給出了一堆常用單詞,最後經過組裝,通常命名后的文件名是「customer-settings-clearcache-selected@2x.png」這樣的一長串英文。

文件名冗長,且對於英語不是非常熟練的我來說,每次命名文件還要附帶打開一個翻譯軟件。翻譯出來的英文,還可能不滿足開發人員的命名習慣,導致他們要找很久的圖標文件。

後來在日常工作中,我慢慢積累了一套我自己的命名與管理方式,不敢說專業,但希望能夠幫助大家維護圖標文件更加方便。

首先我會針對不同的端分為不同的文件夾,如「iOS」、「Android」、「Web」、「小程序」。

然後以中文按照「模塊-名稱-狀態」三級命名即可。通常這樣命名的圖標文件為「設置-清理緩存-選中@2x.png」,沒有狀態區別的圖標或沒有特定模塊可復用的圖標,還可以再省去一級,這樣的命名明了簡單,易用易查找。

過來人告訴大家:千萬不要為了形式化的命名規範而做規範,一方面加大了自己的工作量,另一方面卻根本沒有輔助開發更方便地找到圖標文件。真是一種費力不討好的做法。

總結

本文淺談了圖標的搭建與管理,更多是在認知層面上。

歡迎大家關注作者微信公眾號:「UCD耍家」

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極登錄平台_從這3個方面,快速了解產品圖標設計體系的煉成

赞 (0)