萬字長文|終極圖標(biāo)設(shè)計(jì)指南——工作篇
編輯導(dǎo)語:當(dāng)接到圖標(biāo)設(shè)計(jì)的需求時(shí),首先應(yīng)該怎么做呢?本文作者從圖標(biāo)的繪制流程、繪制方式、設(shè)計(jì)原則、可用性測試等方面,對圖標(biāo)設(shè)計(jì)進(jìn)行了分析,一起來看一下吧。
一、圖標(biāo)的繪制流程
1. 關(guān)鍵詞提取以及頭腦風(fēng)暴
當(dāng)接到圖標(biāo)設(shè)計(jì)需求時(shí),需要將信息中的關(guān)鍵詞進(jìn)行提煉,并且發(fā)散思維獲取一些關(guān)鍵詞的同義詞、近義詞。提供最初的設(shè)計(jì)方向。
2. 文字符號化
把腦暴后的關(guān)鍵詞圖形化,過程中可以用筆紙粗略繪制,目的是能確定出最契合要表達(dá)信息的圖標(biāo)外形。
3. 使用場景梳理
梳理圖標(biāo)所使用的環(huán)境、場景。比如標(biāo)簽欄、導(dǎo)航欄在頁面中屬于一級使用場景,使用視覺重量更大的面形圖標(biāo)。個(gè)人中心、分類、詳情頁屬于二級使用場景,使用線型圖標(biāo)居多。更多強(qiáng)調(diào)內(nèi)容本身。
二、圖標(biāo)的繪制方式
1. 貝塞爾曲線
塞爾曲線(Bézier curve),又稱貝茲曲線或貝濟(jì)埃曲線,是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。一般的矢量圖形軟件通過它來精確畫出曲線,貝茲曲線由線段與節(jié)點(diǎn)組成,節(jié)點(diǎn)是可拖動(dòng)的支點(diǎn),線段像可伸縮的皮筋,其實(shí)就是我們通常理解的PhotoShop中的鋼筆工具。
對于貝塞爾曲線,最重要的點(diǎn)是數(shù)據(jù)點(diǎn)(路徑的起始點(diǎn)和中指點(diǎn))和控制點(diǎn)(決定一條路徑的彎曲軌跡)。
2. 布爾運(yùn)算
爾運(yùn)算是數(shù)字符號化的邏輯推演法,包括聯(lián)合、相交、相減。在圖形處理操作中引用了這種邏輯運(yùn)算方法以使簡單的基本圖形組合產(chǎn)生新的形體,并由二維布爾運(yùn)算發(fā)展到三維圖形的布爾運(yùn)算。
在三維圖形方面,布爾運(yùn)算則是通過兩個(gè)以上的物體進(jìn)行并集、差集、交集的運(yùn)算,從而得到新的物體形態(tài)。軟件系統(tǒng)提供了4種布爾運(yùn)算方式:并集、交集、差集、減去頂層。
- 并集:將兩個(gè)形狀合并成為一個(gè)形狀,取全部形狀
- 減去頂層:用底層圖形減去頂層圖形,剩下的部分為最終圖形
- 交集:兩個(gè)圖形重疊、相交的部分
- 差集:相當(dāng)于「并集」減去「交集」之后剩下的部分
通過布爾運(yùn)算,我們能繪制出絕大多數(shù)的圖標(biāo),但有些結(jié)構(gòu)線條復(fù)雜的圖標(biāo)無法使用相加、相減、相切進(jìn)行完成,這個(gè)時(shí)候就需要使用貝塞爾曲線刻畫圖標(biāo)。
三、圖標(biāo)的設(shè)計(jì)原則
1. 簡單:圖標(biāo)存在的目的,是快速傳達(dá)概念
在這一系列符號當(dāng)中,你能明白其中哪些的含義?對于這款車的駕駛者而言,可能會隨著使用時(shí)間的積累,逐漸明白其中一部分圖標(biāo)的含義。很大程度上,這是因?yàn)檫@些圖標(biāo)本身并不直觀。
我們可以從下面看到,圖標(biāo)是怎么一步步變得難以識別的:
當(dāng)圖標(biāo)開始使用我們不熟悉的含義和隱喻時(shí)候,它就自然變得難以理解。從左往右數(shù)第三個(gè)圖標(biāo),是安全帶的提示燈圖標(biāo),當(dāng)它亮起的時(shí)候,意味著你沒有系好安全帶。這個(gè)含義相對直觀,你可能能夠很快掌握。而最右邊的這個(gè)「電動(dòng)助力轉(zhuǎn)向系統(tǒng)警告燈」含義就非常模糊了。
最成功的圖標(biāo)設(shè)計(jì),不僅僅是讓圖標(biāo)本身易于理解,而且對于不同的文化背景、不同年齡段、不同知識背景的人都能理解,只有做到這樣才行。
如果你想要表達(dá)的信息過于抽象,那么單獨(dú)使用圖標(biāo),可能不是最清晰的解決方案,應(yīng)當(dāng)將圖標(biāo)和文本標(biāo)簽結(jié)合起來使用。
2. 對齊:確保每個(gè)圖標(biāo)都感覺平衡,盡量進(jìn)行視覺對齊
在這個(gè)播放圖標(biāo)當(dāng)中,盡管三角形被放置在中間位置,但是它并沒有視覺對齊,我們的眼睛看到的時(shí)候,會覺得中間的三角形說向左靠的。三角形靠左的這一邊在視覺上更重,因此它應(yīng)該向右移動(dòng)一點(diǎn)來確保平衡。
設(shè)計(jì)的時(shí)候,適當(dāng)?shù)奈⒄{(diào)就能達(dá)到平衡的效果。不要單純的相信數(shù)據(jù),要用你的雙眼來進(jìn)行檢查和修正。
3. 簡潔:用盡可能少的詞匯來進(jìn)行表達(dá)和描述
簡潔是圖標(biāo)設(shè)計(jì)的精髓之一,因?yàn)槲覀兘?jīng)常需要在很小的屏幕上操作,圖標(biāo)可以傳達(dá)很多信息,而不同文本或者其他復(fù)雜的內(nèi)容。在用戶界面當(dāng)中,簡約準(zhǔn)確的設(shè)計(jì)風(fēng)格能夠凸顯重點(diǎn),讓內(nèi)容發(fā)揮效用。Telegram 的圖標(biāo)設(shè)計(jì),就非常的簡約有趣:
1)一致性
為了讓圖標(biāo)家族顯得更加和諧,始終保證相同的樣式和設(shè)計(jì)規(guī)則。
在 iOS 13 之前,蘋果的圖標(biāo)設(shè)計(jì)有著各種不同的粗細(xì)筆觸,不同的填充樣式,大小也各不相同。
任何圖標(biāo)都有著相應(yīng)的視覺重量。而視覺重量取決于圖標(biāo)筆觸的粗細(xì)、填充模式、大小和形狀這幾個(gè)屬性。而圖標(biāo)設(shè)計(jì)的難點(diǎn)就在于,如何控制所有的這些參數(shù),做到整體的一致性。
蘋果公司最近引入了 SF Symbols 這個(gè)功能,將圖標(biāo)直接制作成為圖標(biāo)字體,在這套字體當(dāng)中,圖標(biāo)有 9 種不同的「字重」和3種不同的的風(fēng)格(也許有點(diǎn)復(fù)雜,但是絕對充分夠用)。從圖標(biāo)到符號,在填充模式、筆觸輪廓等多個(gè)不同的屬性上,確保你能挑出感覺更加和諧的圖標(biāo)。
2)避免半像素
做設(shè)計(jì)最基礎(chǔ)也是最忌諱的就是像素模糊,因?yàn)殡S著設(shè)備的不斷更新手機(jī)屏幕的顯示精致度越來高,任何一個(gè)微小的瑕疵都會在手機(jī)屏幕上被用戶明顯感知。并且會因?yàn)檫@樣的模糊問題直接降低整個(gè)UI界面的品質(zhì)度。
3)視覺風(fēng)格統(tǒng)一
統(tǒng)一的視覺風(fēng)格有很多種元素,包含圓角、線面、線條粗細(xì)、設(shè)計(jì)形式等。圓角的統(tǒng)一又分為統(tǒng)一的外圓角和統(tǒng)一的內(nèi)圓角,例如外圓角為4px內(nèi)圓角為2px,那么所有涉及到圓角的圖標(biāo)都要保持統(tǒng)一。
線形圖標(biāo)和面性圖標(biāo)最好不要混合使用,尤其是同一類的圖標(biāo)。線條粗細(xì)要全套圖標(biāo)完全一致,例如設(shè)定圖標(biāo)粗細(xì)為3px那就要統(tǒng)一為3px。當(dāng)然在實(shí)際設(shè)計(jì)中可能還有更多的設(shè)計(jì)元素需要統(tǒng)一,只要遵循這個(gè)統(tǒng)一的原則就一定能設(shè)計(jì)出一套有品質(zhì)保證的圖標(biāo)。
四、圖標(biāo)設(shè)計(jì)自查方法
圖標(biāo)的的底層價(jià)值在于它能否準(zhǔn)確的向用戶傳達(dá)信息!所以識別性是圖標(biāo)最基礎(chǔ)的要求,一個(gè)有價(jià)值的圖標(biāo),不光在于視覺是否美觀,更在于信息傳遞的精確度,圖標(biāo)識別性主要分為語義識別和視覺識別兩部分。
1. 語義識別
語義識別的理解就是當(dāng)用戶看到這個(gè)圖標(biāo)之后,很清晰的知道這個(gè)是干什么的。如下方支付寶的圖標(biāo)掃一掃,首付款、出行、卡包?!皰咭粧摺眻D標(biāo),與日常用戶在掃碼頁面時(shí),都會有一個(gè)二維碼顯示區(qū)域,中間有一條線在區(qū)域內(nèi)掃瞄,基于這樣的用戶習(xí)慣和認(rèn)知,掃一掃圖標(biāo)就很好的傳遞這是掃描二維碼的意思。
2. 視覺識別
視覺識別更在乎影響用戶識別圖標(biāo)的感官因素,如顏色、復(fù)雜程度、圖標(biāo)類型的搭配等。
圖標(biāo)顏色:明度相近的色相顏色不能在一起使用,放在一起就會顯得圖標(biāo)很刺眼,我們平常說的白底黑字,意思就是為了形成顏色對比,從而突出主體。
復(fù)雜程度:明度相近的色相顏色不能在一起使用,放在一起就會顯得圖標(biāo)很刺眼,我們平常說的白底黑字,意思就是為了形成顏色對比,從而突出主體。
類型搭配:底色與圖標(biāo)類型的結(jié)合,“底色+面性”的識別性 >“底色+線性”的識別性。
統(tǒng)一性:可以從圓角大?。簣A角大小的細(xì)節(jié)很容易被忽略,因?yàn)樗某尚魏兔柽呅问降倪x取也有很大的關(guān)聯(lián),描邊方式有內(nèi)描邊、居中描邊、外描邊。描邊的大小會根據(jù)基線來擴(kuò)展。
描邊粗細(xì):圖標(biāo)的粗線也會影響整體圖標(biāo)的一致性如下圖所示,對比很強(qiáng)烈。
端點(diǎn)類型:平頭斷點(diǎn)較為生硬,圓頭斷點(diǎn)比較可愛活潑。
視覺統(tǒng)一:根據(jù)keyline網(wǎng)格規(guī)范設(shè)計(jì)保證圖標(biāo)的平衡統(tǒng)一。
圖標(biāo)數(shù)據(jù)小數(shù)點(diǎn):當(dāng)圖標(biāo)中的點(diǎn)的位置或者某一部分出現(xiàn)小數(shù)點(diǎn)的場景,需要調(diào)整至整數(shù),根據(jù)四舍五入的計(jì)數(shù)方式進(jìn)行精確,描邊大小數(shù)值可以存在“X.5”這樣的情況。
五、圖標(biāo)的可用性測試
1. 可用性測試標(biāo)準(zhǔn)
根據(jù)前面的設(shè)計(jì)原則可以推導(dǎo)出圖標(biāo)可用性的測試標(biāo)準(zhǔn):
- 識別度:圖標(biāo)是否能讓用戶理解含義?是否是用戶認(rèn)知習(xí)慣下熟悉的圖標(biāo)?一套圖標(biāo)下是否存在與其他圖標(biāo)含義沖突?圖標(biāo)的拓展性如何?是否需要添加文字標(biāo)簽說明?
- 設(shè)計(jì)是否統(tǒng)一:表現(xiàn)在視覺大小、視覺語言、復(fù)雜程度、圖標(biāo)元素參數(shù)、整體協(xié)調(diào)性、配色。
- 品牌信息:是否有獨(dú)特性、是否可以傳遞品牌信息?
- 細(xì)節(jié):圖標(biāo)是否簡潔、美感?
2. 可用性測試方法
測試方法主要有兩種:放在頁面中測試以及獨(dú)立頁面外測試。
測試圖標(biāo)的統(tǒng)一性,需要放在頁面中測試,根據(jù)頁面的實(shí)際使用環(huán)境,測試圖標(biāo)在頁面中是否和諧、完整;是否需要文字信息輔助說明;圖標(biāo)在頁面中是否容易被用戶找到。
可以使用A/B測試,找一些用戶通過AB版測試,衡量兩個(gè)版本見圖標(biāo)的差異性,是否出現(xiàn)用戶疑惑、失望,是否符合用戶的心理預(yù)期。當(dāng)然在測試前需要保證AB版本的圖標(biāo)大小位置完全一致,確保沒有其他變量影響測試。
測試圖標(biāo)的識別性,需要將所有圖標(biāo)單獨(dú)出來,刪除所有文字信息,如果帶有文字。判斷是否出現(xiàn)圖標(biāo)不能理解的情況。刪除文字也是考慮到測試的時(shí)候會因?yàn)槲淖中畔⒌囊龑?dǎo),從而忽略了圖標(biāo)傳遞含義。
六、圖標(biāo)的交付
1. 圖標(biāo)的交付格式
說圖標(biāo)交付之前,先了解一下圖標(biāo)的格式有哪些。 JPG、PNG、GIF、SVG,一共四種格式。區(qū)別是什么呢?
- JPG:自帶背景,不支持縮放
- PNG:可以透明模式,不支持縮放,需要注意留白大小
- GIF:一般用在動(dòng)態(tài)度表,支持透明背景
- SVG:唯一可以支持無損縮放的矢量格式
2. 圖標(biāo)的交付方式
通常有兩種交付方式:
- 通過藍(lán)湖進(jìn)行界面倍數(shù)適配,自動(dòng)切圖。
- 將SVG格式的圖標(biāo)上傳到iconfont的網(wǎng)站,讓開發(fā)同學(xué)自己下載。需要注意上傳到iconfont是有嚴(yán)格設(shè)計(jì)標(biāo)準(zhǔn),需要自己檢查是否符合上傳標(biāo)準(zhǔn)。
七、小結(jié)
整個(gè)圖標(biāo)設(shè)計(jì)分為三篇來講述的。
- 《理論篇》主要講述圖標(biāo)設(shè)計(jì)的概念以及設(shè)計(jì)原則等理論內(nèi)容
- 《工作篇》主要講述工作中圖標(biāo)設(shè)計(jì)過程以及圖標(biāo)落地
- 《分享篇》主要分享圖標(biāo)設(shè)計(jì)的工具、圖標(biāo)網(wǎng)站、圖標(biāo)設(shè)計(jì)團(tuán)隊(duì)或者設(shè)計(jì)師
第二篇內(nèi)容就到這里結(jié)束了。
本文由 @卡洛設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash ,基于 CC0 協(xié)議。
- 目前還沒評論,等你發(fā)揮!