金剛區(qū)是一個頁面中頭部的重要位置、是頁面的核心功能區(qū)域,表現(xiàn)形式為多行排列的宮格區(qū)圖標(biāo)。那么,金剛區(qū)的圖標(biāo)應(yīng)該如何去設(shè)計呢?今天AAA教育郭老師就對UI設(shè)計中金剛區(qū)圖標(biāo)設(shè)計總結(jié)進行簡單的說明。
金剛區(qū)是一個頁面中頭部的重要位置,是頁面的核心功能區(qū)域,表現(xiàn)形式為多行排列的宮格區(qū)圖標(biāo)。
比如淘寶app 首頁banner(廣告橫幅)下的兩行圖標(biāo),餓了么外賣app 首頁banner下的兩行圖標(biāo)、支付寶app 首頁頭部的4個圖標(biāo)就是金剛區(qū)。
金剛區(qū)的位置通常是位于搜索框、banner之下,而且金剛區(qū)區(qū)域通常會占據(jù)屏幕22%~25%的大小且位于屏幕頭部,從用戶閱讀屏幕內(nèi)容的視覺流來說位置至關(guān)重要,而且是聚合各類子板塊的入口,為各個子版塊分發(fā)內(nèi)容引導(dǎo)流量。所以其重要性不言而喻,產(chǎn)品要讓用戶通過不同類型展示方式的組件找到相應(yīng)的功能,而圖標(biāo)具備精煉高度概括內(nèi)容的特性,而且圖標(biāo)的識別度大于文字,所以金剛區(qū)的設(shè)計通常以圖標(biāo)+說明文字為主。
我們都知道,app中的圖標(biāo)也是構(gòu)成整個品牌設(shè)計語言的重要一部分,圖標(biāo)的展示形態(tài),采用的配色,圖標(biāo)的設(shè)計層次、設(shè)計手法、設(shè)計細節(jié)都在影響著整個品牌設(shè)計語言的走向。所以在設(shè)計金剛區(qū)圖標(biāo)的時候也是值得花很多心思在上面的。
三、金剛區(qū)圖標(biāo)的常見設(shè)計類型和表現(xiàn)手法?
金剛區(qū)常見的設(shè)計類型有3種:
面性圖標(biāo)
實拍性圖標(biāo)
線性圖標(biāo)
下面我們通過案例來逐一分析他們的設(shè)計手法和設(shè)計亮點。
1. 淘寶APP——面性圖標(biāo)
因為淘寶的整個業(yè)務(wù)線很多,涵蓋的方向也很多,所以金剛區(qū)的部分是1排5個圖標(biāo),共2排也就是10個圖標(biāo)。一行5個圖標(biāo)也是當(dāng)下行業(yè)內(nèi)的圖標(biāo)數(shù)量極限了。再多的話勢必會顯得很擁擠,而且圖標(biāo)的識別性會打折扣。
淘寶8.0.0
淘寶APP金剛區(qū)組成:圓形底板+業(yè)務(wù)說明+圖形+板塊名稱
縱觀多種案例,我們會發(fā)現(xiàn)一個問題,為什么電商類APP 金剛區(qū)圖標(biāo)多為圓形呢?我們來一起思考一下。從圓和方的直觀感受來講,圓給人一種親近柔和的感覺,而正方形有4個棱角會讓人感覺很生硬顯得有距離感。在設(shè)計上來講,方形的圖標(biāo)還需要考慮到四個棱角部分的設(shè)計不然會顯得很空,圓形會顯得更加聚焦內(nèi)容,如下圖。而且如果一排5個寬和高相同的圓形和方形圖標(biāo),方形圖標(biāo)面積大所以會顯得擁擠一些,所以金剛區(qū)圖標(biāo)圓形居多一些。
顏色:底板是從左到右0度的漸變,左邊的顏色和右邊的顏色屬于同一色系。在色相,明度,飽和度上等數(shù)值上都有差別,但不會讓漸變的兩個顏色相差的特別明顯。視覺感官上是左邊的顏色比右邊的顏色「亮」一些。
造型結(jié)構(gòu):圖標(biāo)是上下結(jié)構(gòu)。上方是圖標(biāo)的業(yè)務(wù)說明描述,告知用戶這個板塊是做什么的,除了第一個圖標(biāo)外,其余的圖標(biāo)業(yè)務(wù)說明均是2個字,用最簡短的詞去描述、高度概括子版塊內(nèi)容。因為淘寶的受眾用戶人群眾多,年齡跨度也較大,金剛區(qū)的識別性放在絕對的第一位,所以會在圖標(biāo)上寫上業(yè)務(wù)說明。
圖形:圖標(biāo)的下方是和子版塊相關(guān)的圖形,不過因為淘寶的業(yè)務(wù)線眾多,風(fēng)格也不一,所以沒有將下方的業(yè)務(wù)圖形做成完全統(tǒng)一的風(fēng)格。但在設(shè)計風(fēng)格上都是扁平化的圖標(biāo),沒有添加陰影高光等立體效果。
2. 京東APP——面性圖標(biāo)
京東7.1.6
京東APP金剛區(qū)組成:超橢圓底板+業(yè)務(wù)字設(shè)計/圖形+板塊名稱
超橢圓形狀介于圓形和方形之間,而相比于圓角矩形又顯得很靈活生動飽滿。
顏色:底板采用的是從左上到右下的斜45度漸變,左邊的顏色和右邊的顏色屬于同一色系,漸變?nèi)岷妥兓皇呛苊黠@。
造型結(jié)構(gòu):在金剛區(qū)圖標(biāo)的設(shè)計上,京東也是將圖標(biāo)的識別性放在了首位,大部分圖標(biāo)使用板塊的業(yè)務(wù)說明文字來進行設(shè)計,再疊加一個弧形的過渡,讓圖標(biāo)內(nèi)的圖形看起來像是從一個空間延展到了另一個空間,增加了設(shè)計感不失趣味性。
圖形:業(yè)務(wù)相關(guān)圖形或字體設(shè)計,且均添加了投影,營造空間感增加設(shè)計細節(jié)。有一點需要注意的是,比如「京東超市」這個圖標(biāo)的右上角是加了促銷標(biāo)簽的,利用用戶喜歡貪便宜的心里,也是吸引用戶點擊的一種手段。但是此處不建議做字體的傾斜,試想一下,金剛區(qū)有8個圖標(biāo),每個圖標(biāo)上都有一個字,每一個字都向右傾斜4~8度,那么你會感覺整個金剛區(qū)都是「傾斜」的。
3. 餓了么APP
餓了么8.3.1
餓了么APP金剛區(qū)組成:軸測圖立體圖標(biāo)+板塊名稱
顏色:金剛區(qū)圖標(biāo)的顏色總體給人鮮艷明亮的感覺,來表達食物的新鮮美味。就像我們生活中吃的食物生鮮蔬菜一樣,如果顏色看起來臟臟的,怪怪的,一點都不給人新鮮的感覺,那么你肯定也不放心去吃它。
造型結(jié)構(gòu):餓了么采用的是2.5D軸測圖的形式做的立體圖標(biāo)。與常規(guī)圖標(biāo)不同,這樣的設(shè)計手法會展示圖標(biāo)3個不同的面,細節(jié)豐富設(shè)計感強,能在同類競品中脫穎而出。而且這種設(shè)計手法所畫出來的圖標(biāo)更加貼近真實食物的形態(tài)。
外賣美食類APP 的金剛區(qū)圖標(biāo)應(yīng)該盡量以美觀度為主,其次是識別度。為什么這樣說呢,我們試想一個場景。當(dāng)你打開外賣類APP 的時候通常是肚子餓了,有了「吃」的這一層身體上的欲望,那么在進不同的板塊選美食之前我們首先就是在選金剛區(qū)圖標(biāo),除非用戶在進 APP之前腦海中已經(jīng)決定好了要吃什么,進來直接下單。否則,金剛區(qū)圖標(biāo)的設(shè)計影響著對用戶的吸引程度。
你的第一印象看到了整體的圖標(biāo)都非常精致美觀,你的潛意識也會覺得里面的東西應(yīng)該會很好吃,反之亦然。
圖形:因為2.5D設(shè)計手法畫出來的圖標(biāo)是3個面,所以細節(jié)相比正常的圖標(biāo)來說會多,那么就沒必要再給每個圖標(biāo)添加一樣的底板了,那樣做會顯得圖標(biāo)很復(fù)雜,不夠精簡。而且也會降低圖標(biāo)的識別度。
4. 盒馬APP——實拍性圖標(biāo)
盒馬4.0.0
盒馬鮮生APP金剛區(qū)組成:實物實拍+統(tǒng)一圓形底板+板塊名稱
顏色:底板的配色依然是業(yè)務(wù)色,比如「海鮮水產(chǎn)」的底板色是海藍。但有一點要注意,底板色要與實物實拍圖有區(qū)別,不能看起來像是融為一體的感覺。而且為了營造新鮮感顏色應(yīng)明亮一些。
造型結(jié)構(gòu):實拍實物擺放角度為從左上向右下的斜45度。此處采用了「破格」的設(shè)計手法,讓實拍物品一小部分「沖」出了圓形底板,空間感很強。
圖形:金剛區(qū)圖標(biāo)大多采用兩件物品進行擺拍,而在兩件物品的組合上選的是大小對比的物品,這樣更能營造層次感,空間感。
類似的實拍性金剛區(qū)圖標(biāo)還有小米有品、網(wǎng)易考拉。
小米有品2.5.1
實拍性實物做圖標(biāo)的好處是可以帶來真實,可靠的感覺。而且還可以將運營方需要主推的商品換成圖標(biāo)為板塊帶來流量。
5. 京東金融、支付寶——線性圖標(biāo)
京東金融4.9.10
支付寶10.1.35
兩個APP 都是錢包和支付有關(guān),錢包級別的應(yīng)用要給用戶帶來安全、可靠的感覺,所以在金剛區(qū)的視覺上的設(shè)計盡量克制、簡潔。線性圖標(biāo)在此應(yīng)用最適合不過了。
四、金剛區(qū)圖標(biāo)應(yīng)該從哪幾個緯度去設(shè)計?
1. 辨識度、識別性
圖標(biāo)在辨識度上要優(yōu)于文字。
還有一層意思是在圖標(biāo)的設(shè)計上要與競品有一些差異度。要讓自身產(chǎn)品在市場中有「存在感」和「存在率」,存在感即我們通過對自身產(chǎn)品app 的整體視覺語言設(shè)計從而讓用戶使用我們的產(chǎn)品和競品時有一個明確的記憶區(qū)分,比如請你在腦海中回憶「閑魚」app 的顏色和「京東」app 的顏色,如果你用過兩款產(chǎn)品,那么你可以輕易的回憶起閑魚的品牌色是黃色,京東的品牌色是紅色。再回到金剛區(qū),你只看到下面這組圖標(biāo)就能知道這是什么app,對么?
2. 強調(diào)性
金剛區(qū)圖標(biāo)通常是在 app 的首屏出現(xiàn),位置位于搜索框、banner之下,而且金剛區(qū)圖標(biāo)通常會占據(jù)屏幕五分之一或者四分之一的大小,還起著為各個子版塊分發(fā)引流的重要作用,所以在設(shè)計的重量上應(yīng)該比金剛區(qū)圖標(biāo)下方的內(nèi)容區(qū):UGC、瓷片區(qū)等內(nèi)容要重一些。
3. 識意性
有了前兩步的鋪墊后,金剛區(qū)圖標(biāo)還需要有可識意性,通俗來講,能讓用戶做到看其形明其意,這一點很重要,即使畫的再好看,用戶看到圖標(biāo)后需要仔細思考圖標(biāo)的含義到底是什么的時候這個圖標(biāo)就是失敗的(特殊情況除外),因為圖標(biāo)的作用就是為了在文字之上輔助用戶識別,人腦對圖片的敏感度要大于文字。圖標(biāo)要表意,高度概括說明文字,如果實在沒有合適的圖案那么可以像京東一樣,將單字拿出來,去做一些字體基礎(chǔ)上的設(shè)計。
飛豬9.0.5
4. 趣味性
相當(dāng)于考試時候的附加題了。不做不扣分,做了加分。如上圖的飛豬APP 趣味性的出現(xiàn)讓整體的金剛區(qū)圖標(biāo)更加的生動靈活,多漸變多色彩的應(yīng)用會給你帶來一種旅途出游很愉快的感覺。不死板便是增加了與用戶的親密感。有助于在用戶首次使用產(chǎn)品時消除陌生帶來的距離感,增加用戶使用產(chǎn)品時的安全感。
五、金剛區(qū)圖標(biāo)設(shè)計時有哪些注意要點?
貝殼1.8.0
原支付寶口碑
金剛區(qū)圖標(biāo)常用做法:45°漸變底板+白色面性圖標(biāo)+微投影
網(wǎng)上流傳一種做法,圖標(biāo)底板之上的圖形區(qū)域范圍是底板乘以黃金比例0.618的結(jié)果。但縱觀市面上的案例,如此做法的少之又少,而且設(shè)計本來也沒有特定的數(shù)值,具體情況要具體應(yīng)用,而且習(xí)慣性操作后容易讓自己的思維陷入死角。
底板上圖形設(shè)計區(qū)域約占底板區(qū)域的50%~65%之間,45°漸變可以讓圖標(biāo)看上去更加有設(shè)計感,漸變的兩色要在同一色系,漸變不要過于明顯。整體金剛區(qū)圖標(biāo)底板色的飽和度和明度要盡量做成視覺統(tǒng)一。白色面性圖標(biāo)會使圖標(biāo)整體看上去更加簡約,直接。有些稍復(fù)雜的圖形在做白色面性圖標(biāo)時可以做一些漸變在上面,或者做一些透明度的變化,如上圖貝殼APP和之前的支付寶口碑APP。在圖形上加一些底板色同色系的投影上去,營造一些層次感空間感,但切記不要讓投影過于明顯和顏色臟。
當(dāng)然,并非一定要做統(tǒng)一圓形底板的面性圖標(biāo)。不帶底板的異形圖標(biāo),線性圖標(biāo)都可以,具體還得看業(yè)務(wù)需求,如果不需要金剛區(qū)視覺效果很重的話可以考慮線性圖標(biāo),更加的輕量、簡潔、格調(diào)高。
總結(jié)
因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc