圖標(biāo)定制設(shè)計(jì)之六:客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

2022-6-14    博博


今年年初,我到客戶現(xiàn)場進(jìn)行需求溝通,在溝通結(jié)束后,客戶問了我一個(gè)問題,我竟然不知如何回答,只在當(dāng)時(shí)說了:“好的好的,我們會(huì)進(jìn)行優(yōu)化的?!?

當(dāng)時(shí)客戶是這么說的:“為什么界面的圖標(biāo)這么普通,毫無新意,能不能設(shè)計(jì)的好看點(diǎn)。雖然我們是 B 端產(chǎn)品,但這樣子的圖標(biāo)真的不好看?!?

雖然我心里知道 B 端產(chǎn)品首先是以可用、易用為主的,那么圖標(biāo)也不例外,在評(píng)價(jià)圖標(biāo)設(shè)計(jì)的時(shí)候,我們首先看圖標(biāo)是否體現(xiàn)了可用與易用,是否讓用戶通過看圖標(biāo)就可以聯(lián)想到這個(gè)功能是什么(合理、無歧義表達(dá));同時(shí)圖標(biāo)是否符合設(shè)計(jì)規(guī)則,讓界面看起來統(tǒng)一與專業(yè)。若圖標(biāo)符合以上要素,就可以再來看圖標(biāo)好不好看的問題了。

不過這并不是一位客戶的問題,后面我們還遇到了很多客戶有類似的問題,一上來就想要視覺層面好看的圖標(biāo)、有創(chuàng)意的圖標(biāo)、顏色豐富的圖標(biāo)。

那 B 端圖標(biāo)設(shè)計(jì)真的只需要考慮好不好看嗎?作為設(shè)計(jì)者的我們,還能做什么呢?其實(shí),B 端圖標(biāo)設(shè)計(jì)是帶著腳鐐在跳舞,小小的圖標(biāo)藏著大大的智慧,下面我們一起來看看吧~


引言


圖標(biāo)也叫 icon,它是對(duì)現(xiàn)實(shí)世界的概括、抽象、隱喻,在產(chǎn)品軟件中,它會(huì)向我們傳達(dá)功能與操作。

有些圖標(biāo)已經(jīng)成為人人熟悉并一致認(rèn)同的傳播語言,例如刪除、設(shè)置、男士、女士、刷新、電話、郵件,看到這些圖標(biāo),人們的反應(yīng)基本是一致的,無需再多說什么。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?


圖標(biāo)分類


圖標(biāo)在 B 端界面的用途我們就不展開長篇大論說了,簡單來說圖標(biāo)除了做點(diǎn)綴,還可以直接表達(dá)功能與用途。因此,我們可以將 B 端圖標(biāo)分為兩大類:示意類圖標(biāo)和半裝飾類圖標(biāo)。

1. 示意類圖標(biāo)

示意類圖標(biāo)(也有稱之為功能類圖標(biāo))是指可以向用戶示意功能用途的抽象化圖形,可以和文字配合使用,也可以單獨(dú)使用。

該類圖標(biāo)在中后臺(tái)系統(tǒng)的界面中會(huì)比較常用,例如基礎(chǔ)組件、導(dǎo)航菜單、狀態(tài)、功能性模塊。示意類圖標(biāo)不僅以可用的方式豐富了界面效果,在一定程度上也緩解了用戶的視覺疲勞(試想,全是文字的界面會(huì)怎么樣)。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

2. 半裝飾類圖標(biāo)

為什么我們要取名「半裝飾類圖標(biāo)」呢?原因在于,在 B 端界面上,不會(huì)無緣無故出現(xiàn)純裝飾、毫無寓意的圖標(biāo),任何圖標(biāo)的出現(xiàn)即便原本是為了裝飾,設(shè)計(jì)者在設(shè)計(jì)時(shí)也需要思考其含義屬性。

該類圖標(biāo)會(huì)在中后臺(tái)導(dǎo)航、中后臺(tái)工作臺(tái)、Dashboard、B 端網(wǎng)站等地方出現(xiàn),它們可以讓 B 端界面活躍起來。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

我們可以發(fā)現(xiàn),某些場景下使用示意類圖標(biāo)會(huì)更好(比如基礎(chǔ)組件),某些場景下使用半裝飾類圖標(biāo)會(huì)更好(比如 B 端網(wǎng)站),某些場景下使用任意一類圖標(biāo)都可以(比如中后臺(tái)導(dǎo)航菜單)。

回到一開始客戶的問題:把圖標(biāo)設(shè)計(jì)的好看點(diǎn),他說了好幾個(gè)地方,記得好像有樹控件 、導(dǎo)航菜單、按鈕等。設(shè)計(jì)者們需看看目前客戶講的場景是哪個(gè),有些場景不適合亮麗的圖標(biāo),這會(huì)喧賓奪主,例如基礎(chǔ)組件中。

我們深刻了解 B 端圖標(biāo)類型的使用場景,在設(shè)計(jì)決策時(shí)會(huì)更加得心應(yīng)手。


圖標(biāo)設(shè)計(jì)規(guī)則


雖然示意類圖標(biāo)和半裝飾類圖標(biāo)視覺形式不同,但在繪制上的規(guī)則是互通的。我們團(tuán)隊(duì)輸出了一套企業(yè)級(jí) B 端圖標(biāo)設(shè)計(jì)規(guī)范,不僅可以幫助新人設(shè)計(jì)師快速上手,并且可以使團(tuán)隊(duì)內(nèi)設(shè)計(jì)師高效協(xié)作,保證設(shè)計(jì)結(jié)果的一致性。接下來和大家分享下思路,這是一套可復(fù)用的方法。

1. 約定圖標(biāo)繪制區(qū)域

我們需要給一整套圖標(biāo)約定合適的繪制區(qū)域,保證不論哪位設(shè)計(jì)師輸出的圖標(biāo),均符合設(shè)計(jì)標(biāo)準(zhǔn)。并且原始圖標(biāo)大小一致,可以保證前端使用也非常友好。

假如都是 48px*48px 區(qū)域繪制的圖標(biāo),它們均縮放到 16px*16px 即可;如果一個(gè)是在 48px*48px 畫板上繪制的,一個(gè)是在 88px*88px 畫板上繪制的,它們都縮小到 16px*16px,會(huì)導(dǎo)致圖標(biāo)看起來視覺不一致。若期望它們看起來一致,就需要專門為不同畫板的圖標(biāo)設(shè)計(jì)繪制規(guī)則。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

這里在和大家分享一個(gè)小心得:我們團(tuán)隊(duì)在約定圖標(biāo)繪制區(qū)域時(shí),發(fā)現(xiàn)了一個(gè)問題。Antd 的圖標(biāo)是繪制在 1024px*1024px 畫板上的,但又有一些團(tuán)隊(duì)是繪制在 16px*16px,到底應(yīng)該選取哪種畫板呢?經(jīng)過實(shí)際操作后我們發(fā)現(xiàn),畫板越大,設(shè)計(jì)細(xì)節(jié)可以越豐富。但縮小到小尺寸時(shí),會(huì)有小數(shù)點(diǎn)的虛邊(不過不妨礙前端應(yīng)用,用戶也看不到虛邊)。而小尺寸畫板繪制圖標(biāo),畫板全在視線范圍內(nèi),設(shè)計(jì)師繪制圖標(biāo)時(shí)更有安全感。所以,不論用什么尺寸的畫板,只要團(tuán)隊(duì)成員一致認(rèn)同即可,不用過于糾結(jié)。

2. 設(shè)置出血位

除了要讓圖標(biāo)繪制到統(tǒng)一的畫板中,我們還約定了出血位,要求所有圖標(biāo)均保留出血位(出血位默認(rèn)使用固定值),出血位起到的作用是:防止設(shè)計(jì)師圖標(biāo)繪制不小心貼邊后,圖標(biāo)在實(shí)際應(yīng)用場景中會(huì)出現(xiàn)缺失現(xiàn)象。當(dāng)然,出血位的默認(rèn)數(shù)值并不是一成不變的,允許設(shè)計(jì)師在繪制一些特殊形狀的圖標(biāo)時(shí),有調(diào)整空間,保證視覺平衡。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

3. 約定元素調(diào)整規(guī)則

針對(duì)示意類圖標(biāo):

線條:我們會(huì)要求設(shè)計(jì)師在繪制圖標(biāo)的線條/圓點(diǎn)時(shí)默認(rèn)使用某個(gè)數(shù)值,然后設(shè)定線條粗細(xì)/圓點(diǎn)大小的遞增或遞減規(guī)律,例如以 2 的倍數(shù)為主基調(diào)繪制,默認(rèn)為 6px 粗細(xì)/6px 大小。但允許設(shè)計(jì)師在繪制圖標(biāo)時(shí),不合適用默認(rèn)數(shù)值的,就按照增減規(guī)律去指導(dǎo)設(shè)計(jì),如下所示。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

圓角:圖標(biāo)采用何種內(nèi)外圓角設(shè)計(jì)會(huì)影響圖標(biāo)給人的感覺,數(shù)值大的圓角會(huì)讓用戶感覺親切;數(shù)值小的圓角會(huì)讓用戶感覺硬朗、專業(yè)。采用哪種圓角方式,設(shè)計(jì)師可以參考產(chǎn)品調(diào)性去規(guī)定。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

針對(duì)半裝飾類圖標(biāo):

半裝飾類圖標(biāo)在設(shè)計(jì)上也不是隨意為之,除了要可以表達(dá)文案內(nèi)涵外,假如是一整套的圖標(biāo)系列也需要約定元素調(diào)整的規(guī)則。

例如約定在「幾何圖形+業(yè)務(wù)圖形」的設(shè)計(jì)基礎(chǔ)上進(jìn)行發(fā)揮,保證圖標(biāo)放到一起具有很強(qiáng)的一致性。并且半裝飾類圖標(biāo)還要設(shè)定色彩范圍(主色、輔色),如此可以讓界面色彩不雜亂,嚴(yán)謹(jǐn)有序??梢钥吹津v訊云官網(wǎng)的圖標(biāo)采用了類似的設(shè)計(jì)方法。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

4. 分層打造秩序

對(duì)于圖標(biāo)畫板來說,它不是一個(gè)平面,它就像樓房一樣,是分層的。從底層到最上層的內(nèi)容依次為:主畫板區(qū)域、核心內(nèi)容繪制區(qū)域、基礎(chǔ)圖形參考區(qū)域、實(shí)際圖標(biāo)。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

5. 從基礎(chǔ)型拓展

我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí),都應(yīng)該先從基礎(chǔ)型開始思考——圓形、矩形、三角形、正方形等,保證設(shè)計(jì)構(gòu)圖上的節(jié)奏感和規(guī)整性。當(dāng)基礎(chǔ)型無法滿足需要的時(shí),以它們?yōu)闇?zhǔn)向外散發(fā),在遵循設(shè)計(jì)規(guī)范的基礎(chǔ)上,做視覺上的平衡和微調(diào)。

如果是落到實(shí)際軟件中應(yīng)用的,建議所有圖標(biāo)最后都要合并路徑,保證圖形規(guī)整和干凈,同時(shí)便于正確輸出和使用。


圖標(biāo)畫板尺寸


在「2.1、約定圖標(biāo)繪制區(qū)域」中,我們說到了要為一套圖標(biāo)約定統(tǒng)一的畫板區(qū)域,但這個(gè)事情給設(shè)計(jì)師造成了困擾,還不止一位設(shè)計(jì)師問我:“那是不是我不能再用其他尺寸的畫板來設(shè)計(jì)圖標(biāo)了?!贝鸢府?dāng)然是否定的。約定畫板尺寸不是約束,恰恰是在規(guī)則中給予了設(shè)計(jì)師有序拓展的能力。

假如不約定畫板尺寸,那么設(shè)計(jì)師直接放飛,每個(gè)圖標(biāo)都有自己的尺寸,并且有些還會(huì)出現(xiàn)長方形的形態(tài)。畢竟每個(gè)人的工作習(xí)慣不同、面對(duì)的產(chǎn)品不同,直接打開軟件畫圖標(biāo)是最快的方式。

而首先約定畫板尺寸,設(shè)計(jì)師就會(huì)有條理地進(jìn)行繪制,在遇到特殊情況時(shí)進(jìn)行有序拓展,我們可以稱之為場景拓展法。例如設(shè)計(jì)師可以為 B 端基礎(chǔ)組件、工作臺(tái)常用導(dǎo)航模塊、結(jié)果頁的圖標(biāo)各自設(shè)計(jì)一套繪制尺寸。

那設(shè)計(jì)師要怎么判斷什么時(shí)候采用場景拓展法去設(shè)計(jì)呢?我們可以優(yōu)先使用默認(rèn)畫板尺寸設(shè)計(jì)圖標(biāo),在遇到特殊場景不允許情況下,采用場景拓展法去執(zhí)行,針對(duì)界面風(fēng)格有場景區(qū)別的,可以規(guī)定幾類畫板尺寸,為不同場景使用。


線型與面型


線型圖標(biāo)與面型圖標(biāo)也是設(shè)計(jì)師經(jīng)常在討論的話題,他們常常討論「什么情況下使用線型圖標(biāo),什么情況下使用面型圖標(biāo)」。做過比較多 B 端產(chǎn)品的小伙伴可以發(fā)現(xiàn),沒有說哪種場景必須使用線型圖標(biāo),哪種場景必須使用面型圖標(biāo),主要還是看當(dāng)前產(chǎn)品調(diào)性合適哪種,并且使用某類型圖標(biāo)后,對(duì)界面產(chǎn)生的效果是什么。

例如當(dāng)界面圖標(biāo)較多時(shí),采用面型圖標(biāo),會(huì)顯得頁面很重,會(huì)把用戶視覺引導(dǎo)到圖標(biāo)而不是重點(diǎn)數(shù)據(jù)上。

線型圖標(biāo)與面型圖標(biāo)在界面中使用,是一項(xiàng)系統(tǒng)工程,是由多方因素決定的。但我們?cè)O(shè)計(jì)師需要保證 B 端界面圖標(biāo)使用的統(tǒng)一性,即便按照?qǐng)鼍皡^(qū)分,也需要認(rèn)真思考,是不是有必要。就如界面字號(hào)使用定律一樣,建議不要超過 3 種,多了會(huì)讓界面雜亂,降低界面設(shè)計(jì)品質(zhì)。圖標(biāo)也是如此,不論面型還是線型,要站在產(chǎn)品角度去整體把握,而非線型和面型的簡單選擇。很多 B 端產(chǎn)品是兩種類型混用的,但它們很好的劃分了使用場景。

這里我總結(jié)了一些線型圖標(biāo)與面型圖標(biāo)常用的場景(以 B 端中后臺(tái)為例,但這并不是唯一選擇):

1. 在導(dǎo)航上(菜單極其多),常見默認(rèn)用線型,選中用面型。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

2. 在導(dǎo)航上(菜單很少,單層),粗一些的線型圖標(biāo)或者面型圖標(biāo)都會(huì)用,且會(huì)比較個(gè)性化,以提升產(chǎn)品整體調(diào)性。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

3. 在基礎(chǔ)組件中,通常使用線型圖標(biāo),且顏色淺,用戶可以把注意力聚焦在信息本身。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

4. 在表格數(shù)據(jù)的狀態(tài)中,面型和線型是均分使用的狀態(tài)出現(xiàn)。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

5. 在文字按鈕中如果要添加圖標(biāo),讓界面展現(xiàn)更豐富,線型按鈕居多。假如一旦按鈕很多,面型圖標(biāo)會(huì)讓界面顯得太重。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

6. 若標(biāo)題區(qū)要出現(xiàn)按鈕,面型按鈕會(huì)使得區(qū)塊顯得更整體。

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?


視覺尺寸與規(guī)范尺寸


這里還想和大家說說「視覺尺寸與規(guī)范尺寸」的事情。之前遇到設(shè)計(jì)師這么問:“既然已經(jīng)約定了圖標(biāo)的設(shè)計(jì)規(guī)范,那是不是就嚴(yán)格按照規(guī)范區(qū)間來(嚴(yán)格按照基礎(chǔ)圖形參考區(qū)域來),但是有些圖標(biāo)不適合直接套用規(guī)范啊?!?

是的,其實(shí)很多不規(guī)則圖標(biāo)是不適合直接套用規(guī)范的,就像一份周報(bào)格式不是所有崗位都適用一樣。如果設(shè)計(jì)師發(fā)現(xiàn)有些圖標(biāo)直接套用規(guī)范不可行,是可以根據(jù)「視覺大小一致性」進(jìn)行微調(diào)的。這不僅保證了前端開發(fā)的便捷,也保證了界面視覺的整潔。


圖標(biāo)命名


既然是一套 B 端產(chǎn)品層/企業(yè)級(jí)圖標(biāo)庫,那么必須要有規(guī)范的命名方式,這樣會(huì)方便設(shè)計(jì)師之間的協(xié)同,也會(huì)更方便開發(fā)與設(shè)計(jì)之間的協(xié)作,同時(shí)查找效率會(huì)提升。

那么命名有什么規(guī)律呢?其實(shí)只要根據(jù)項(xiàng)目的情況,團(tuán)隊(duì)內(nèi)有統(tǒng)一的認(rèn)知即可。關(guān)于命名的中英文,也是視團(tuán)隊(duì)而定,各有優(yōu)缺點(diǎn)。比如是英文,那會(huì)方便開發(fā)直接用名字,不用重新取名(當(dāng)然設(shè)計(jì)師取的英文名開發(fā)不喜歡,也會(huì)改);用中文的話,方便檢索。

可以是:

尺寸/類型/圖標(biāo)名稱/狀態(tài)
16px/導(dǎo)航/上傳/默認(rèn)

形態(tài)/格式/圖標(biāo)名稱
面型/方型/新增

模塊/圖標(biāo)名稱/狀態(tài)
導(dǎo)航/分享/正常


三方圖標(biāo)庫


好用的三方圖標(biāo)庫還是很多的,雖然圖標(biāo)庫質(zhì)量參差不齊,但還是在一定程度上解放了設(shè)計(jì)師天天畫圖標(biāo)的痛苦。這里介紹幾個(gè)圖標(biāo)質(zhì)量不錯(cuò)的網(wǎng)站:

1. Noun Project

網(wǎng)站鏈接:https://thenounproject.com

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

2. Iconfont

網(wǎng)站鏈接:https://www.iconfont.cn

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

3. ICONS8

網(wǎng)站鏈接:https://icons8.com

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

4. Font Awesome

網(wǎng)站鏈接:https://fontawesome.dashgame.com/

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

5. IconPark

網(wǎng)站鏈接:https://iconpark.oceanengine.com/home

客戶說B端圖標(biāo)太普通沒新意,該怎么解決?


寫在最后


當(dāng)客戶提出圖標(biāo)好不好看時(shí),是一個(gè)正常人的反應(yīng),試著想想我們自己,不也總是會(huì)很表面得看待一件事情么。因此,客戶不會(huì)知道原來一個(gè)小小的圖標(biāo)也是藏著大大智慧的。不過沒關(guān)系,當(dāng)我們了解了小圖標(biāo)內(nèi)部的大智慧后,我們可以更輕松的駕馭圖標(biāo)了,也可以知道在何種場景下,使用何種圖標(biāo)可以提升界面展示效果,得到客戶的好評(píng)。

作者:小果

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

圖標(biāo)定制設(shè)計(jì)之一:6大章節(jié)!圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門指南

圖標(biāo)定制設(shè)計(jì)之二:超全總結(jié)!金剛區(qū)圖標(biāo)設(shè)計(jì)的 10 大風(fēng)格

圖標(biāo)定制設(shè)計(jì)之三:想讓圖標(biāo)更精致?先掌握這11個(gè)容易忽略的設(shè)計(jì)細(xì)節(jié)!

圖標(biāo)定制設(shè)計(jì)之四:學(xué)會(huì)SVG圖標(biāo)的高級(jí)用法,界面適配效率翻一倍!

圖標(biāo)定制設(shè)計(jì)之五:研究微軟 Fluent 圖標(biāo)規(guī)范后,我總結(jié)了這9個(gè)知識(shí)點(diǎn)!

圖標(biāo)定制設(shè)計(jì)之六:為什么別人的圖標(biāo)設(shè)計(jì)又快又好?來看騰訊高手總結(jié)的知識(shí)點(diǎn)!

圖標(biāo)定制設(shè)計(jì)之七:客戶說B端圖標(biāo)太普通沒新意,該怎么解決?

圖標(biāo)定制設(shè)計(jì)之八:從6個(gè)方面幫你快速掌握?qǐng)D標(biāo)設(shè)計(jì)規(guī)范

圖標(biāo)定制設(shè)計(jì)之九:不止畫圖標(biāo)!5 個(gè)金剛區(qū)的交互設(shè)計(jì)思考







分享本文至:

日歷

鏈接

個(gè)人資料

存檔