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

圖標(biāo)作為頁(yè)面中顯示最直接的設(shè)計(jì)元素之一，有著非常重要的傳播與提示作用。而圖標(biāo)風(fēng)格的設(shè)計(jì)，與產(chǎn)品屬性，設(shè)計(jì)理念，頁(yè)面風(fēng)格搭配等因素有很大的關(guān)系。

一、圖標(biāo)風(fēng)格

1. 面性圖標(biāo)

面性圖標(biāo)，常見(jiàn)的樣式有元素輪廓圖形和統(tǒng)一化圖形兩種。 風(fēng)格上有：多色、漸變、不透明度、 微擬物等風(fēng)格。

2. 線性圖標(biāo)

線性圖標(biāo)，常見(jiàn)的風(fēng)格有：漸變、斷點(diǎn)、粗描邊、雙色、高光、直角、點(diǎn)綴填充等樣式。

3. 線面混合圖標(biāo)

線面混合圖標(biāo)，樣式更加豐富，細(xì)節(jié)更多。不透明度、漸變、多色、粗描邊等 可組合的形式也更多。

4. 插畫(huà)類(lèi)圖標(biāo)

插畫(huà)類(lèi)圖標(biāo)有非常豐富的細(xì)節(jié)，復(fù)雜程度很高。但使用局限性也相對(duì)高，常用于節(jié)日活動(dòng)更換圖標(biāo)，或特定產(chǎn)品屬性的APP中使用。

可以選擇和搭配的圖標(biāo)種類(lèi)有很多，但不能盲目使用，并不是圖標(biāo)做的足夠炫就是好的。使用時(shí)，要結(jié)合產(chǎn)品屬性，頁(yè)面的布局和風(fēng)格，選擇合適的圖標(biāo)。合適的出彩的圖標(biāo)可以在很短的時(shí)間吸引住人們的眼球，并且可以增加用戶使用時(shí)的舒適度，也有很好的辨識(shí)度以及傳播性。相反，不合適的圖標(biāo)在頁(yè)面中十分眨眼，影響用戶的體驗(yàn)。

二、圖標(biāo)制作

圖標(biāo)制作的幾點(diǎn)要素：①形態(tài)、 ②配色、 ③規(guī)范、 ④趣味、 ⑤提示

1. 形態(tài)

以金融產(chǎn)品為例，為了突顯產(chǎn)品安全、效率等屬性，圖標(biāo)風(fēng)格應(yīng)該設(shè)計(jì)得穩(wěn)重，大氣、簡(jiǎn)潔、精致。一來(lái)圖標(biāo)所表達(dá)的內(nèi)容清晰易懂，不需要用戶思考就可以識(shí)別；二來(lái)消除了新用戶開(kāi)始使用時(shí)的不安情緒。

精致的設(shè)計(jì)可以提升整體頁(yè)面的品質(zhì)，使得產(chǎn)品更加專(zhuān)業(yè)可信。細(xì)節(jié)的優(yōu)化可以使得產(chǎn)品在眾多競(jìng)品中更加亮眼。當(dāng)設(shè)計(jì)精致得當(dāng)?shù)漠a(chǎn)品與設(shè)計(jì)粗糙的產(chǎn)品進(jìn)行視覺(jué)比對(duì)時(shí)，用戶的選擇不言自明。

常用的樣式大致分為兩種：純面性或線面結(jié)合。

線性圖標(biāo)標(biāo)簽切換時(shí)，由線性轉(zhuǎn)化為面性時(shí)變化細(xì)節(jié)更明顯，加上動(dòng)效效果更豐富。面性圖標(biāo)給人的感覺(jué)更加有整體感，更加穩(wěn)重。

線性圖標(biāo)

面性圖標(biāo)

標(biāo)簽欄設(shè)計(jì)當(dāng)中，首頁(yè)位置的圖標(biāo)常用的有房屋標(biāo)志，或者是直接使用產(chǎn)品logo的樣式來(lái)進(jìn)行設(shè)計(jì)。

logo直接用作首頁(yè)圖標(biāo)

細(xì)節(jié)上，前面已經(jīng)通過(guò)分析“產(chǎn)品屬性”、提煉“LOGO特點(diǎn)”等方法得到了延伸圖形。這里的icon也可使用這種方法。

土豆視頻and天貓

2. 配色

上一篇中分享了選擇顏色的方法，這個(gè)時(shí)候便派上了用場(chǎng)。我們?cè)跇?biāo)簽欄中可以直接使用品牌主色，未選中的標(biāo)簽圖標(biāo)可以搭配灰色來(lái)使用。當(dāng)然，顏色的選擇也與產(chǎn)品屬性以及產(chǎn)品定位相關(guān)。比如：百度外賣(mài)首頁(yè)的icon，為了突顯科技與品質(zhì)，選擇了線性紅黑兩色搭配。

鏈家and百度外賣(mài)

3. 規(guī)范

統(tǒng)一性，是圖標(biāo)設(shè)計(jì)中非常重要的一項(xiàng)內(nèi)容。拿方形、圓形等形狀來(lái)說(shuō)，雖然都是在統(tǒng)一大小的框中進(jìn)行設(shè)計(jì)，但從視覺(jué)上給人的感覺(jué)卻不一樣大，這種情況時(shí)有發(fā)生。

這時(shí)候我們可以用輔助模板來(lái)進(jìn)行視覺(jué)約束，來(lái)輔助我們進(jìn)行設(shè)計(jì)。谷歌的material design設(shè)計(jì)規(guī)范中就為我們提供了這樣的模板，我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí)，在固定的框架內(nèi)制作即可。

4. 趣味

ofo、百度外賣(mài)、淘寶、優(yōu)酷、京東等APP在節(jié)日或是重要活動(dòng)發(fā)布時(shí)，首頁(yè)版式以及重要的icon都進(jìn)行了更換。這不僅僅是為了迎合活動(dòng)內(nèi)容或是節(jié)日的到來(lái)，更主要的是為了增加產(chǎn)品的趣味性，增加用戶粘度，讓用戶覺(jué)得產(chǎn)品有趣并且想繼續(xù)使用深挖功能。同時(shí)，也緩解了用戶長(zhǎng)期使用此產(chǎn)品所產(chǎn)生的審美疲勞。

所以，找準(zhǔn)切入點(diǎn)，在合適的時(shí)機(jī)適當(dāng)更新頁(yè)面版式或icon，會(huì)起到不錯(cuò)的效果，讓用戶眼前一亮。

ofo and 百度外賣(mài)

5. 提示

現(xiàn)在有越來(lái)越的產(chǎn)品都將重要信息或者是迫切需要讓用戶知道的內(nèi)容，做成浮動(dòng)的氣泡形式，懸浮在標(biāo)簽欄之上。或是在消息、我的icon上添加“紅點(diǎn)”來(lái)進(jìn)行提示。

網(wǎng)易云音樂(lè) and 京東金融

這么做的好處是搭配動(dòng)效可以讓用戶在打開(kāi)產(chǎn)品時(shí)第一時(shí)間看到，起到非常醒目的效果。同時(shí)，不占用首頁(yè)的面積，小巧靈活的解決了“提示”這一問(wèn)題。

三、細(xì)節(jié)梳理

① 圖標(biāo)制作時(shí)，始終保持為矢量圖形，不能轉(zhuǎn)為智能對(duì)象或柵格化。

② 圖標(biāo)設(shè)計(jì)不能過(guò)于復(fù)雜，形狀簡(jiǎn)潔易懂就好，適當(dāng)用“減法”。

③ 圖標(biāo)尺寸要為整數(shù)，不能有小數(shù)的出現(xiàn)。

④ 圓角大小統(tǒng)一、描邊粗細(xì)統(tǒng)一、變化的角度統(tǒng)一。

⑤ 設(shè)計(jì)時(shí)要預(yù)留出足夠的可點(diǎn)擊區(qū)域的位置。

⑥ 產(chǎn)品中的icon風(fēng)格不要過(guò)多，三種是極限，配色要達(dá)到和諧。

⑦ 制作工具建議使用AI或者sketch，成稿確定后不要忘記將路徑變?yōu)樾螤睢?/p>

⑧ 使用PS或者AI設(shè)計(jì)時(shí)，可以調(diào)節(jié)網(wǎng)格線間隔方便設(shè)計(jì)。

⑨ 常用icon素材網(wǎng)站：https://icons8.com、http://www.iconfont.cn

四、延展圖形

延展圖形的應(yīng)用場(chǎng)景非常廣泛，線上的網(wǎng)站或是APP中的banner素材、icon下拉刷新等細(xì)節(jié)，線下的海報(bào)易拉寶等都可以用到；延伸圖形并不僅僅是作為素材被使用，更有加強(qiáng)品牌認(rèn)知等功能，潛移默化中加強(qiáng)用戶對(duì)品牌的了解。

網(wǎng)易考拉

菜鳥(niǎo) and QQ支付

1. 分析產(chǎn)品屬性

在理念和認(rèn)知上尋找品牌、產(chǎn)品的屬性特點(diǎn)。以金融APP為例，提到金融相關(guān)產(chǎn)品我們會(huì)想到什么？

結(jié)合上一篇分析出的品牌關(guān)鍵詞可以得出：安全、保險(xiǎn)、金錢(qián)、供應(yīng)鏈等等。我們可以結(jié)合這些關(guān)鍵點(diǎn)分析出相關(guān)圖形。

（1）安全——盾牌、鎖

（2）保險(xiǎn)——保險(xiǎn)箱——矩形

（3）金融——金幣紙幣——矩形、圓形

（4）供應(yīng)鏈——融合、連接——鏈條、重疊

（5）專(zhuān)業(yè)性——醫(yī)療——六邊形

2. 觀察LOGO特點(diǎn)

視覺(jué)上觀察分析品牌logo，抓住其每一點(diǎn)細(xì)節(jié)與特點(diǎn)，并將它們作為“元素”提取出來(lái)，加以運(yùn)用，這里以公司目前的主要產(chǎn)品logo為例。

3. 組合示例

（1）實(shí)物搭配

將選中的圖形，搭配人物或者物品作為展示，觀察哪種圖形更加合適，這種搭配可以運(yùn)用在banner或線下物料等。

（2）帶入場(chǎng)景

將挑選出來(lái)的圖形進(jìn)行設(shè)計(jì)并帶入場(chǎng)景，去掉樣式重復(fù)、延展性差等圖形，選出最終品牌圖形。這一過(guò)程不僅可以找到適合的圖形，也可以根據(jù)設(shè)計(jì)的場(chǎng)景海報(bào)等作為后面運(yùn)營(yíng)設(shè)計(jì)方面的風(fēng)格參考，完善情緒板，對(duì)后期頁(yè)面等整體風(fēng)格有一個(gè)預(yù)期走向。

延展圖形的分析與建立使我們對(duì)產(chǎn)品的認(rèn)知更近了一步。同時(shí)，新的圖形方案也打開(kāi)了我們的視野。使我們可以更多的去嘗試不同的風(fēng)格，去尋找更多優(yōu)秀的案例。慢慢的我們會(huì)發(fā)現(xiàn)，即使是一些簡(jiǎn)單的圖形，在正確的運(yùn)用之后也會(huì)起到意想不到的效果。

作者：FLYXMF，微信公眾號(hào)：Fly Lab

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

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