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

圖標(biāo)做為頁面中最重要的元素之一，合理的運(yùn)用與設(shè)計，是UI設(shè)計師必備的技能。設(shè)計與運(yùn)用圖標(biāo)是兩回事，很多設(shè)計師都能夠設(shè)計出漂亮的圖標(biāo)，卻不能準(zhǔn)確的運(yùn)用到頁面當(dāng)中去。所以，今天這篇文章不講圖標(biāo)的設(shè)計，只探討各種類別的圖標(biāo)在app頁面中的準(zhǔn)確用法。

圖標(biāo)的風(fēng)格類別有很多種，設(shè)計的技法也是千千萬，總的來說常用的圖標(biāo)可以分為三大類：

1. 面性圖標(biāo)
2. 異形圖標(biāo)
3. 線性圖標(biāo)

案例解析

1. 面性圖標(biāo)特征與運(yùn)用

面性圖標(biāo)

面性圖標(biāo)視覺表現(xiàn)力強(qiáng)，在頁面當(dāng)中是視覺擔(dān)當(dāng)，能有效的強(qiáng)調(diào)頁面的視覺重心，能更好的突出主要業(yè)務(wù)重心，所以常常用在首頁一級頁面做為主要流量分發(fā)。

1）面性圖標(biāo)不建議用在哪些區(qū)域？

列表流不建議用面性圖標(biāo)，原因是形式與功能之間的關(guān)系，面性圖標(biāo)的特點(diǎn)是視覺表現(xiàn)力強(qiáng)，相對其他類型的圖標(biāo)不具備高效的識別性，對于功能分類的頁面，沒有起到一個很好的高度概括性與高效引導(dǎo)的作用。

2）面性圖標(biāo)一般不在頁面中大量的出現(xiàn)。

右圖在藝APP頁面中大量運(yùn)用面性圖標(biāo)，雖然顏色明度上做了弱化，但依舊不能起到對功能的快速引導(dǎo)，第一視覺看上去是一個個小色塊。

做為不是引流的入口和不需要過重強(qiáng)調(diào)色彩表現(xiàn)的頁面，應(yīng)該落實(shí)到信息引導(dǎo)上，運(yùn)用具備高效識別性的圖標(biāo)更為合適。例如：左圖”國美APP”異形圖標(biāo)或線性圖標(biāo)，這樣的圖標(biāo)形式更符合功能模塊的入口，甚至很多產(chǎn)品的列表流去掉圖標(biāo)，也是很不錯的選擇！

3）面性圖標(biāo)更容易營造氛圍

很多產(chǎn)品在節(jié)日或活動中，常常改變面性圖標(biāo)來營造氣氛，原因是面性的圖標(biāo)有很強(qiáng)的視覺表現(xiàn)力。右圖的面性圖標(biāo)不建議在平常狀態(tài)下運(yùn)用，因?yàn)閳D標(biāo)的意義還是要具有功能的外在表現(xiàn)，要具有功能的識別性。

2. 面性圖標(biāo)與異形圖標(biāo)的分析運(yùn)用

面性圖標(biāo)的第一視覺是一個色塊，異形圖標(biāo)第一視覺是個形狀，所以面性圖標(biāo)視覺表現(xiàn)力強(qiáng)，異形圖標(biāo)識別效率高，通過二者的這一特征，淘寶和美團(tuán)外賣的圖標(biāo)做了這樣的設(shè)計。

淘寶首頁的面性圖標(biāo)，在圖標(biāo)上面加了文字注釋，即有了視覺表現(xiàn)，又提高了識別性，同樣的美團(tuán)外賣也是同樣的表現(xiàn)形式。而且，不難發(fā)現(xiàn)，第一排的面性圖標(biāo)都是用戶的高頻使用的業(yè)務(wù)板塊，視覺上強(qiáng)引導(dǎo)為用戶優(yōu)先做出選擇，這就是一種高級的設(shè)計手法！

上面說了面性圖標(biāo)不適合在頁面中大量出現(xiàn)，那么哪種類型的圖標(biāo)適合呢？看下支付寶頁面：

右圖支付寶“更多”頁面，整體看起來亂亂的，層級區(qū)分不突出，有待優(yōu)化。但這不是重點(diǎn)，重點(diǎn)看圖標(biāo)，如果“更多”頁面使用面性圖標(biāo)，那么用戶在找某個功能時就會有意識的去看文字。因?yàn)榈谝灰曈X都是一個個同樣的色塊，沒有起到很好的識別作用，用戶視覺會有意的避開色塊，然后去看文字，但是有著較強(qiáng)的視覺表現(xiàn)的色塊，一次次拉扯你的視線，這樣的感受雖然很微妙，但是體驗(yàn)上也是極大的損失！

不同的特征圖標(biāo)會影響其它元素的調(diào)整：

前不久微信7.0的升級，圖標(biāo)有了很大的變化，隨之頁面中的分割線也由之前的對齊圖標(biāo)，改為了對齊文字。

看上圖，如果把改版前的頁面，分割線由對齊圖標(biāo)改為對齊文字，右圖對齊到字的頁面，看上去整個畫面向左傾斜?？赡苓@么微妙的變化對于很多用戶并沒有什么感知，但也有一大批用戶，會覺得有問題，但他們也不知道問題出在哪里，我們作為UI設(shè)計師，一定要練就這樣的視覺感，一眼就知道問題所在?。ㄏ嘈耪J(rèn)真看文章的你是可以的）

當(dāng)改為線性圖標(biāo)后，分割線如果對齊圖標(biāo)，因?yàn)槎际羌?xì)線看上去就會稍顯層次過多，線性圖標(biāo)也就不能更好的表現(xiàn)出應(yīng)有的輕盈與透氣。線性圖標(biāo)沒有過重的視覺表現(xiàn)，頁面也就降低甚至不存在畫面左傾斜的感受。

3. 用圖標(biāo)區(qū)別視覺層級、業(yè)務(wù)板塊

同樣的個人中心，鏈家APP視覺表現(xiàn)要高于得到APP很多，左圖鏈家的圖標(biāo)有主有次，有視覺層級，強(qiáng)化用戶常用的或者產(chǎn)品主推的業(yè)務(wù)，為用戶做選擇。鏈家“其他服務(wù)”的線性圖標(biāo)一般強(qiáng)調(diào)功能性的圖標(biāo)，通常不用于主要流量的入口。

得到APP不同的板塊圖標(biāo)樣式一樣，不能有效的區(qū)分主次，沒有為用戶做選擇，用戶面對數(shù)量多，同樣類型的圖標(biāo)很難形成記憶。

豎線色塊的合理運(yùn)用：

這個頁面是不建議有豎線色塊這樣的元素的，這個要重點(diǎn)說一下為什么。首頁要知道，標(biāo)題旁邊加豎線色塊為了牽引視覺，這個頁面是不用牽引視覺的，因?yàn)闃?biāo)題數(shù)量太少，這個頁面直接把標(biāo)題文字加大列出來就很好。

類似這種小色塊是比較適合頁面流，有較多數(shù)量的標(biāo)題板塊頁面，當(dāng)我們滑動頁面，或者快速滑動頁面，小色塊會很好的牽引用戶的視覺，找到用戶關(guān)注的標(biāo)題板塊。

不同的功能板塊用圖標(biāo)類別區(qū)分：

上面微信頁面，自己的服務(wù)跟第三方服務(wù)，業(yè)務(wù)都是服務(wù)，所以圖標(biāo)類型一樣。安居客不同的功能板塊用不同類型的圖標(biāo)表現(xiàn)，即有了視覺層次，又能讓用戶快速對功能模塊建立良好的認(rèn)知！而且標(biāo)題沒加豎線色塊，層級處理的也相當(dāng)?shù)轿唬?/p>

4. 圖標(biāo)用色原則

上圖的圖標(biāo)用色能夠看出，都運(yùn)用了四色系原則。一般多色的圖標(biāo)表現(xiàn)形式，保證四個色系是比較合理的，紅、黃、藍(lán)、綠四個色系也能夠映射大多數(shù)業(yè)務(wù)的屬性。例如上圖面性圖標(biāo)的“果蔬”運(yùn)用了綠色，給人一種新鮮健康的感受，“鮮花”運(yùn)用紅色系體現(xiàn)鮮花原本的特征，以及人對“鮮花”顏色通常的認(rèn)知。

當(dāng)然四色系原則也不是絕對的，只要視覺上舒適，業(yè)務(wù)上符合，是可以突破四色系的，一般情況下四色系能夠保證圖標(biāo)用色的合理性和的。

純黑色的線性圖標(biāo)：

我常常能聽到很多人有這樣的認(rèn)識，自然界不存在純黑色的東西，所以設(shè)計中不應(yīng)該出現(xiàn)純黑色，顯然這種理解是把美術(shù)知識強(qiáng)加給設(shè)計，這是行不通的。

其實(shí)純黑色用好了很高級有逼格，用不好確實(shí)死黑死黑的很難接受。

看下微信、汽車之家、寺庫奢侈品等產(chǎn)品，都運(yùn)用了純黑色的圖標(biāo)，而且看起來都很不錯。

黑色的象征與寓意？

——黑色象征著高貴、穩(wěn)重、科技

黑色是一個很強(qiáng)大的色彩。它可以很莊重、高雅，而且可以讓其它顏色(亮色)突顯出來。在只使用黑色而不用其它顏色的時候，會有一種沉重的感覺。

黑色可以流露出高雅、剛毅、信心、神秘、權(quán)力和力量?？梢韵氲揭恍┖谏恼嬗∠螅耗承┚赖臇|西可以被描述為黑色領(lǐng)帶，或者一個高手(不只是在武術(shù)方面) 可以被說成黑帶。

——來自百度百科

從上面的解釋不難理解，汽車之家為什么運(yùn)用了純黑色圖標(biāo)，因?yàn)槠囍矣脩裟行跃佣?，又是關(guān)于車的業(yè)務(wù)，所以完全迎合產(chǎn)品的業(yè)務(wù)屬性和目標(biāo)人群。

再者就是奢侈品的產(chǎn)品，常常用純黑色，能夠很好的傳遞神秘、高貴、價值的感受。

微信為什么運(yùn)用了純黑色Tab圖標(biāo)？

——因?yàn)楦m合，微信的品牌色為綠色，頁面中的占比少之又少，大量的是灰白顏色，所以要讓頁面有所表現(xiàn)，純黑色無疑在視覺上最舒適。

為什么支付寶的Tab導(dǎo)航不是純黑色的圖標(biāo)？

——因?yàn)轫撁嬷写罅康纳试?，所以弱化該弱化的，不然視覺上所有的元素都在向你招手，“來了，老妹！”

5. 總結(jié)

1）面性圖標(biāo)

特點(diǎn)：可有效強(qiáng)調(diào)頁面視覺重心，視覺表現(xiàn)力強(qiáng)。

2）異形圖標(biāo)

特點(diǎn)：識別性較強(qiáng)，功能引導(dǎo)性較強(qiáng)，區(qū)分業(yè)務(wù)模塊和視覺層級。

3）線性圖標(biāo)

特點(diǎn)：輕盈有引導(dǎo)性，強(qiáng)調(diào)功能性，視覺力度較弱，不干擾重要內(nèi)容。

最后

圖標(biāo)的表現(xiàn)形式有很多種，以上所探討的是對圖標(biāo)運(yùn)用的一種思考方式。所以，都不是絕對的說法，無論哪種類型的圖標(biāo)，只要讓產(chǎn)品有一個好的表現(xiàn)形式都是好的。

作者：吳星辰，微信公眾號：互聯(lián)網(wǎng)設(shè)計幫

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

題圖來自Unspalsh, 基于CC0協(xié)議