中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

金剛區(qū)是一個(gè)頁(yè)面中頭部的重要位置、是頁(yè)面的核心功能區(qū)域，表現(xiàn)形式為多行排列的宮格區(qū)圖標(biāo)。那么，金剛?cè)サ膱D標(biāo)應(yīng)該如何去設(shè)計(jì)呢？

文章結(jié)構(gòu)預(yù)覽：

什么是金剛區(qū)？

1. 金剛區(qū)的意義和功能是什么？
2. 金剛區(qū)圖標(biāo)的常見(jiàn)設(shè)計(jì)類(lèi)型和表現(xiàn)手法？
3. 金剛區(qū)圖標(biāo)該從哪幾個(gè)緯度出發(fā)去做設(shè)計(jì)？
4. 金剛區(qū)圖標(biāo)設(shè)計(jì)時(shí)有哪些注意要點(diǎn)？

一、什么是金剛區(qū)？

金剛區(qū)是一個(gè)頁(yè)面中頭部的重要位置、是頁(yè)面的核心功能區(qū)域，表現(xiàn)形式為多行排列的宮格區(qū)圖標(biāo)。

比如：淘寶app首頁(yè)banner（廣告橫幅）下的兩行圖標(biāo)、餓了么外賣(mài)app首頁(yè)banner下的兩行圖標(biāo)、支付寶app首頁(yè)頭部的4個(gè)圖標(biāo)就是金剛區(qū)。

二、金剛區(qū)的意義和功能是什么？

金剛區(qū)的位置通常是位于搜索框、banner之下，而且金剛區(qū)區(qū)域通常會(huì)占據(jù)屏幕22%~25%的大小且位于屏幕頭部，從用戶(hù)閱讀屏幕內(nèi)容的視覺(jué)流來(lái)說(shuō)位置至關(guān)重要，而且是聚合各類(lèi)子板塊的入口，為各個(gè)子版塊分發(fā)內(nèi)容引導(dǎo)流量。

所以其重要性不言而喻，產(chǎn)品要讓用戶(hù)通過(guò)不同類(lèi)型展示方式的組件找到相應(yīng)的功能，而圖標(biāo)具備精煉高度概括內(nèi)容的特性，而且圖標(biāo)的識(shí)別度大于文字，所以金剛區(qū)的設(shè)計(jì)通常以圖標(biāo)+說(shuō)明文字為主。

我們都知道，app中的圖標(biāo)也是構(gòu)成整個(gè)品牌設(shè)計(jì)語(yǔ)言的重要一部分，圖標(biāo)的展示形態(tài)，采用的配色，圖標(biāo)的設(shè)計(jì)層次、設(shè)計(jì)手法、設(shè)計(jì)細(xì)節(jié)都在影響著整個(gè)品牌設(shè)計(jì)語(yǔ)言的走向。所以在設(shè)計(jì)金剛區(qū)圖標(biāo)的時(shí)候，也是值得花很多心思在上面的。

三、金剛區(qū)圖標(biāo)的常見(jiàn)設(shè)計(jì)類(lèi)型和表現(xiàn)手法？

金剛區(qū)常見(jiàn)的設(shè)計(jì)類(lèi)型有3種：

1. 面性圖標(biāo)；
2. 實(shí)拍性圖標(biāo)；
3. 線(xiàn)性圖標(biāo)。

下面我們通過(guò)案例來(lái)逐一分析他們的設(shè)計(jì)手法和設(shè)計(jì)亮點(diǎn)。

1. 淘寶APP：面性圖標(biāo)

因?yàn)樘詫毜恼麄€(gè)業(yè)務(wù)線(xiàn)很多，涵蓋的方向也很多，所以金剛區(qū)的部分是1排5個(gè)圖標(biāo)，共2排也就是10個(gè)圖標(biāo)。一行5個(gè)圖標(biāo)也是當(dāng)下行業(yè)內(nèi)的圖標(biāo)數(shù)量極限了，再多的話(huà)勢(shì)必會(huì)顯得很擁擠，而且圖標(biāo)的識(shí)別性會(huì)打折扣。

淘寶8.0.0

淘寶 APP 金剛區(qū)組成：圓形底板+業(yè)務(wù)說(shuō)明+圖形+板塊名稱(chēng)

縱觀多種案例，我們會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，為什么電商類(lèi)APP金剛區(qū)圖標(biāo)多為圓形呢？

我們來(lái)一起思考一下，從圓和方的直觀直覺(jué)感受來(lái)講，圓給人一種親近柔和的感覺(jué)，而正方形有4個(gè)棱角會(huì)讓人感覺(jué)很生硬顯得有距離感。

在設(shè)計(jì)上來(lái)講，方形的圖標(biāo)還需要考慮到四個(gè)棱角部分的設(shè)計(jì)不然會(huì)顯得很空，圓形會(huì)顯得更加聚焦內(nèi)容，如下圖。而且如果一排5個(gè)寬和高相同的圓形和方形圖標(biāo)，方形圖標(biāo)面積大所以會(huì)顯得擁擠一些，所以金剛區(qū)圖標(biāo)圓形居多一些。

顏色：底板是從左到右0度的漸變，左邊的顏色和右邊的顏色屬于同一色系。在色相、明度、飽和度上等數(shù)值上都有差別，但不會(huì)讓漸變的兩個(gè)顏色相差的特別明顯。視覺(jué)感官上是左邊的顏色比右邊的顏色“亮”一些。

造型結(jié)構(gòu)：圖標(biāo)是上下結(jié)構(gòu)。上方是圖標(biāo)的業(yè)務(wù)說(shuō)明描述，告知用戶(hù)這個(gè)板塊是做什么的，除了第一個(gè)圖標(biāo)外，其余的圖標(biāo)業(yè)務(wù)說(shuō)明均是2個(gè)字，用最簡(jiǎn)短的詞去描述、高度概括子版塊內(nèi)容。因?yàn)樘詫毜氖鼙娪脩?hù)人群眾多，年齡跨度也較大，金剛區(qū)的識(shí)別性放在絕對(duì)的第一位，所以會(huì)在圖標(biāo)上寫(xiě)上業(yè)務(wù)說(shuō)明。

圖形：圖標(biāo)的下方是和子版塊相關(guān)的圖形，不過(guò)因?yàn)樘詫毜臉I(yè)務(wù)線(xiàn)眾多，風(fēng)格也不一，所以沒(méi)有將下方的業(yè)務(wù)圖形做成完全統(tǒng)一的風(fēng)格。但在設(shè)計(jì)風(fēng)格上都是扁平化的圖標(biāo)，沒(méi)有添加陰影高光等立體效果。

2. 京東APP：面性圖標(biāo)

京東7.1.6

京東APP金剛區(qū)組成：超橢圓底板+業(yè)務(wù)字設(shè)計(jì)／圖形+板塊名稱(chēng)

超橢圓形狀介于圓形和方形之間，而相比于圓角矩形又顯得很靈活生動(dòng)飽滿(mǎn)。

顏色：底板采用的是從左上到右下的斜45度漸變，左邊的顏色和右邊的顏色屬于同一色系，漸變?nèi)岷妥兓皇呛苊黠@。

造型結(jié)構(gòu)：在金剛區(qū)圖標(biāo)的設(shè)計(jì)上，京東也是將圖標(biāo)的識(shí)別性放在了首位，大部分圖標(biāo)使用板塊的業(yè)務(wù)說(shuō)明文字來(lái)進(jìn)行設(shè)計(jì)，再疊加一個(gè)弧形的過(guò)渡，讓圖標(biāo)內(nèi)的圖形看起來(lái)像是從一個(gè)空間延展到了另一個(gè)空間，增加了設(shè)計(jì)感不失趣味性。

圖形：業(yè)務(wù)相關(guān)圖形或字體設(shè)計(jì)，且均添加了投影，營(yíng)造空間感增加設(shè)計(jì)細(xì)節(jié)。有一點(diǎn)需要注意的是，比如：“京東超市”這個(gè)圖標(biāo)的右上角是加了促銷(xiāo)標(biāo)簽的，利用用戶(hù)喜歡貪便宜的心里，也是吸引用戶(hù)點(diǎn)擊的一種手段。但是此處不建議做字體的傾斜，試想一下，金剛區(qū)有8個(gè)圖標(biāo)，每個(gè)圖標(biāo)上都有一個(gè)字，每一個(gè)字都向右傾斜4～8度，那么你會(huì)感覺(jué)整個(gè)金剛區(qū)都是“傾斜”的。

3. 餓了么APP

餓了么8.3.1

餓了么APP金剛區(qū)組成：軸測(cè)圖立體圖標(biāo)+板塊名稱(chēng)

顏色：金剛區(qū)圖標(biāo)的顏色總體給人鮮艷明亮的感覺(jué)，來(lái)表達(dá)食物的新鮮美味。就像我們生活中吃的食物生鮮蔬菜一樣，如果顏色看起來(lái)臟臟的，怪怪的，一點(diǎn)都不給人新鮮的感覺(jué)，那么你肯定也不放心去吃他。

造型結(jié)構(gòu)：餓了么采用的是2.5D軸測(cè)圖的形式做的立體圖標(biāo)。與常規(guī)圖標(biāo)不同，這樣的設(shè)計(jì)手法會(huì)展示圖標(biāo)3個(gè)不同的面，細(xì)節(jié)豐富設(shè)計(jì)感強(qiáng)，能在同類(lèi)競(jìng)品中脫穎而出。而且這種設(shè)計(jì)手法所畫(huà)出來(lái)的圖標(biāo)更加貼近真實(shí)食物的形態(tài)。

外賣(mài)美食類(lèi)APP的金剛區(qū)圖標(biāo)應(yīng)該盡量以美觀度為主，其次是識(shí)別度。

為什么這樣說(shuō)呢？

我們?cè)囅胍粋€(gè)場(chǎng)景，當(dāng)你打開(kāi)外賣(mài)類(lèi)APP的時(shí)候通常是肚子餓了，有了“吃”的這一層身體上的欲望，那么在進(jìn)不同的板塊選美食之前我們首先就是在選金剛區(qū)圖標(biāo)，除非用戶(hù)在進(jìn)APP之前腦海中已經(jīng)決定好了要吃什么，進(jìn)來(lái)直接下單。否則，金剛區(qū)圖標(biāo)的設(shè)計(jì)影響著對(duì)用戶(hù)的吸引程度。

你的第一印象看到了整體的圖標(biāo)都非常精致美觀，你的潛意識(shí)也會(huì)覺(jué)得里面的東西應(yīng)該會(huì)很好吃，反之亦然。

圖形：因?yàn)?.5D設(shè)計(jì)手法畫(huà)出來(lái)的圖標(biāo)是3個(gè)面，所以細(xì)節(jié)相比正常的圖標(biāo)來(lái)說(shuō)會(huì)多，那么就沒(méi)必要在給每個(gè)圖標(biāo)添加一樣的底板了，那樣做會(huì)顯得圖標(biāo)很復(fù)雜，不夠精簡(jiǎn)。而且也會(huì)降低圖標(biāo)的識(shí)別度。

4. 盒馬APP：實(shí)拍性圖標(biāo)

盒馬4.0.0

盒馬鮮生APP金剛區(qū)組成：實(shí)物實(shí)拍+統(tǒng)一圓形底板+板塊名稱(chēng)

顏色：底板的配色依然是業(yè)務(wù)色，比如“海鮮水產(chǎn)”的底板色是海藍(lán)。但有一點(diǎn)要注意，底板色要與實(shí)物實(shí)拍圖有區(qū)別，不能看起來(lái)像是融為一體的感覺(jué)。而且為了營(yíng)造新鮮感顏色應(yīng)明亮一些。

造型結(jié)構(gòu)：實(shí)拍實(shí)物擺放角度為從左上向右下的斜45度。此處采用了“破格”的設(shè)計(jì)手法，讓實(shí)拍物品一小部分“沖”出了圓形底板，空間感很強(qiáng)。

圖形：金剛區(qū)圖標(biāo)大多采用兩件物品進(jìn)行擺拍，而在兩件物品的組合上選的是大小對(duì)比大的物品，這樣更能營(yíng)造層次感，空間感。

類(lèi)似的實(shí)拍性金剛區(qū)圖標(biāo)還有小米有品、網(wǎng)易考拉。

小米有品2.5.1

實(shí)拍性實(shí)物做圖標(biāo)的好處是可以帶來(lái)真實(shí)，可靠的感覺(jué)，而且還可以將運(yùn)營(yíng)方需要主推的商品換成圖標(biāo)為板塊帶來(lái)流量。

5. 京東金融-支付、支付寶：線(xiàn)性圖標(biāo)

京東金融4.9.10

支付寶10.1.35

兩個(gè)APP都是錢(qián)包和支付有關(guān)，錢(qián)包級(jí)別的應(yīng)用要給用戶(hù)帶來(lái)安全、可靠的感覺(jué)，所以在金剛區(qū)的視覺(jué)上的設(shè)計(jì)盡量克制、簡(jiǎn)潔。線(xiàn)性圖標(biāo)在此應(yīng)用最適合不過(guò)了。

四、金剛區(qū)圖標(biāo)應(yīng)該從哪幾個(gè)緯度去設(shè)計(jì)？

1. 辨識(shí)度、識(shí)別性

圖標(biāo)在辨識(shí)度上要優(yōu)于文字。

還有一層意思是在圖標(biāo)的設(shè)計(jì)上要與競(jìng)品有一些差異度，要讓自身產(chǎn)品在市場(chǎng)中有“存在感”和“存在率”，存在感即我們通過(guò)對(duì)自身產(chǎn)品app的整體視覺(jué)語(yǔ)言設(shè)計(jì)從而讓用戶(hù)使用我們的產(chǎn)品和竟品時(shí)有一個(gè)明確的記憶區(qū)分，比如：請(qǐng)你在腦海中回憶“咸魚(yú)”app的顏色和“京東”app的顏色。

如果你用過(guò)兩款產(chǎn)品，那么你可以輕易的回憶起咸魚(yú)的品牌色是黃色，京東的品牌色是紅色。再回到金剛區(qū)，你只看到下面這組圖標(biāo)就能知道這是什么app，對(duì)么？

2. 強(qiáng)調(diào)性

金剛區(qū)圖標(biāo)通常是在app的首屏出現(xiàn)，位置位于搜索框、banner之下，而且金剛區(qū)圖標(biāo)通常會(huì)占據(jù)屏幕五分之或者四分之一的大小，還起著為各個(gè)子版塊分發(fā)引流的重要作用，所以在設(shè)計(jì)的重量上應(yīng)該比金剛區(qū)圖標(biāo)下方的內(nèi)容區(qū)：UGC、瓷片區(qū)等內(nèi)容要重一些。

3. 識(shí)意性

有了前兩步的鋪墊后，金剛區(qū)圖標(biāo)還需要有可識(shí)意性。通俗來(lái)講，能讓用戶(hù)做到看其形明其意，這一點(diǎn)很重要，即使畫(huà)的再好看，用戶(hù)看到圖標(biāo)后需要仔細(xì)思考圖標(biāo)的含義到底是什么的時(shí)候這個(gè)圖標(biāo)就是失敗的（特殊情況除外），因?yàn)閳D標(biāo)的作用就是為了在文字之上輔助用戶(hù)識(shí)別，人腦對(duì)圖片的敏感度要大于文字。

圖標(biāo)要表意，高度概括說(shuō)明文字，如果實(shí)在沒(méi)有合適的圖案那么可以像京東一樣，將單字拿出來(lái)，去做一些字體基礎(chǔ)上的設(shè)計(jì)。

飛豬9.0.5

4. 趣味性

相當(dāng)于考試時(shí)候的附加題了，不做不扣分，做了加分。如上圖的飛豬APP趣味性的出現(xiàn)讓整體的金剛區(qū)圖標(biāo)更加的生動(dòng)靈活，多漸變多色彩的應(yīng)用會(huì)給你帶來(lái)一種旅途出游很愉快的感覺(jué)。不死板便是增加了與用戶(hù)的親密感，有助于在用戶(hù)首次使用產(chǎn)品是消除陌生帶來(lái)的距離感，增加用戶(hù)使用產(chǎn)品時(shí)的安全感。

五、金剛區(qū)圖標(biāo)設(shè)計(jì)時(shí)有那些要點(diǎn)？

貝殼1.8.0

原支付寶口碑

金剛區(qū)圖標(biāo)常用做法：45°漸變底板+白色面性圖標(biāo)+微投影

網(wǎng)上流傳一種做法，圖標(biāo)底板之上的圖形區(qū)域范圍是底板乘以黃金比例0.618的結(jié)果。但縱觀市面上的案例，如此做法的少之又少，而且設(shè)計(jì)本來(lái)也沒(méi)有特定的數(shù)值，具體情況要具體應(yīng)用，而且習(xí)慣性操作后容易讓自己的思維陷入死角。

底板上圖形設(shè)計(jì)區(qū)域約占底板區(qū)域的50%~65%之間，45°漸變可以讓圖標(biāo)看上去更加有設(shè)計(jì)感，漸變的兩色要在同一色系，漸變不要過(guò)于明顯。整體金剛區(qū)圖標(biāo)底板色的飽和度和明度要盡量做成視覺(jué)統(tǒng)一。白色面性圖標(biāo)會(huì)使圖標(biāo)整體看上去更加簡(jiǎn)約，直接。

有些稍復(fù)雜的圖形在做白色面性圖標(biāo)時(shí)可以做一些漸變?cè)谏厦?，或者做一些透明度的變化，如上圖貝殼APP和之前的支付寶口碑APP。在圖形上加一些底板色同色系的投影上去，營(yíng)造一些層次感空間感，但切記不要讓投影過(guò)于明顯和顏色臟。

當(dāng)然，并非一定要做統(tǒng)一圓形底板的面性圖標(biāo)。不帶底板的異形圖標(biāo)，線(xiàn)性圖標(biāo)都可以，具體還得看業(yè)務(wù)需求，如果不需要金剛區(qū)視覺(jué)效果很重的話(huà)可以考慮線(xiàn)性圖標(biāo)，更加的輕量、簡(jiǎn)潔、逼格高。

本文由 @?黑桃A 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議