1-線上圖片的四大類別
2-線上圖片常見的五種處理方式
3-線上圖片使用的五大要點(diǎn)
4-總結(jié)
在頁面中單獨(dú)存在的圖片，以圖片為主要元素傳達(dá)給用戶有效信息。
例如好好住APP，它在“看圖板塊”中就使用了信息圖片，重點(diǎn)表現(xiàn)圖片的信息，周圍無任何干擾元素或輔助信息元素。
背景圖片可以用于單個(gè)元素，也可以用于整體畫面，主要作用于營造氛圍。
單個(gè)元素：例如嘀嗒出行的“優(yōu)惠券板塊”，把插畫圖片應(yīng)用在單個(gè)卡片中。
整體畫面：例如網(wǎng)易云音樂的“聽歌頁面”，它就把歌曲封面的圖片作為頁面整體的背景。（圖片進(jìn)行了模糊處理）
作為導(dǎo)航入口，引導(dǎo)用戶點(diǎn)擊進(jìn)入詳情頁面，在各應(yīng)用都普遍使用。
Banner圖作為最常見的圖片使用形式之一，大家再熟悉不過了，它可以出現(xiàn)在APP中的各個(gè)界面中，如：首頁、個(gè)人中心、運(yùn)營活動(dòng)頁等等，造作新家APP的首頁就用到了banner圖。
作為文字的輔助元素，圖片的含義需要和文字相符合才能更好地輔助傳達(dá)文字的意思，反之會(huì)讓用戶覺得困惑。
圖片與文字之間加黑色到透明度（10-60%）的遮罩，保證文字內(nèi)容區(qū)域在黑色區(qū)域，目的是為了能讓用戶看清文字。
根據(jù)圖片整體的色調(diào)，在圖片上加與圖片色調(diào)統(tǒng)一的顏色遮照，保證文字的可識(shí)別性，不影響圖片的正常顯示。 
圖片與文字之間加透明度的漸變遮罩，讓文字顯得更加清晰，使畫面過度更加協(xié)調(diào)。
在很多場(chǎng)景下我們都會(huì)采用到封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會(huì)在背景上加一個(gè)深色半透明蒙層。半透明層可以取黑色、深灰色、背景顏色（深），透明度為（25%-40%），它們呈現(xiàn)出來的效果都各有不同，我們可以根據(jù)不同的場(chǎng)景選擇不同的方案。
圖片圓角的使用也是十分有講究，根據(jù)不同的產(chǎn)品屬性去設(shè)定氣質(zhì)相符的圓角設(shè)計(jì)。
小圓角或直角：視覺印象是硬朗、高冷、具有攻擊性的，多用于時(shí)尚、高端、沖突感強(qiáng)烈的設(shè)計(jì)中；
大圓角：視覺映像是有親和力，柔軟，安全的，多用于母嬰產(chǎn)品、二次元產(chǎn)品、娛樂性強(qiáng)的設(shè)計(jì)中。
在設(shè)計(jì)banner圖時(shí)我們?nèi)绻皇窃诳蚩蚶镒鲈O(shè)計(jì)，有時(shí)候未免顯得太呆板，我們可以突破畫框讓內(nèi)容溢出，營造更大的氛圍，近而使整個(gè)畫面更具有沖擊力。
圖片投影的方式一共分為7大類別，分別為：普通投影、等高線投影、矢量投影、圖層模糊投影、多層投影、移軸模糊投影、手動(dòng)投影。（投影制作步驟可查看我之前發(fā)布的文章《七種投影詳細(xì)解析》）。而在線上運(yùn)用的最多的就是：普通投影、等高線投影、圖片模糊投影，效果如下：
對(duì)于位圖，我們?cè)诰€上場(chǎng)景中最常使用的文件格式無非是PNG與JPEG（在特殊情況下會(huì)用到動(dòng)畫GIF）。
無損文件格式，我們UI設(shè)計(jì)師出圖的首選，不會(huì)輕易造成細(xì)節(jié)像素模糊或輸出文件變色的情況，并且支持alpha通道（透明度）。所以對(duì)于高質(zhì)量圖像文件建議輸出為PNG格式，不過正因?yàn)橄袼責(zé)o損，所以PNG文件大小相對(duì)較大，在特定情況下可以選擇8位處理的做法來減小文件大小，在保證盡可能縮小文件大小的同時(shí)，也不會(huì)降低圖像質(zhì)量。
JPEG格式會(huì)損失掉圖片中的一些像素細(xì)節(jié)，所以輸出JPEG通常會(huì)比輸出PNG的文件大小更小，適用于對(duì)于圖片質(zhì)量要求不過高的場(chǎng)景。并且JPEG格式支持對(duì)文件質(zhì)量進(jìn)行二次壓縮，我們可以選擇使用JPEG格式質(zhì)量壓縮的方式，在文件大小和圖像質(zhì)量之間找到平衡。
UI界面中常用的圖片比例是1:1、3:2、4:3、16:9。
1:1是傳統(tǒng)的120膠片畫幅，也叫大畫幅，因?yàn)橄鄼C(jī)結(jié)構(gòu)和其他一些原因?qū)е铝四z片是方形的，此比例更容易將構(gòu)圖規(guī)整的簡(jiǎn)單，能突出主體圖片，通常用于頭像、電商圖片等。
3:2這個(gè)尺寸源于135膠卷的比例，采用這一比例并不是因?yàn)樗屈S金比例，而是由相機(jī)的像場(chǎng)大小決定的，這個(gè)尺寸運(yùn)用到線上時(shí)適用于以內(nèi)容為主的應(yīng)用。
4:3是隨著攝影的發(fā)展，微單的出現(xiàn)而誕生的，3:2尺寸與4:3尺寸極為相似，在做設(shè)計(jì)時(shí)很容易混淆，不過在同屏顯示中，4:3的圖片內(nèi)容顯示略大于3:2，所以4:3尺寸更適用于以圖片為主或圖片與內(nèi)容比重相同的應(yīng)用。
16:9是根據(jù)人體工程學(xué)的研究，發(fā)現(xiàn)人的兩只眼睛視野范圍是一個(gè)長寬比例為16:9的長方形，所以電視、顯示器行業(yè)根據(jù)這個(gè)的黃金比例尺寸設(shè)計(jì)產(chǎn)品。這個(gè)尺寸的圖片在線上運(yùn)用于視頻播放的圖片顯示。
柵格系統(tǒng)以規(guī)則的網(wǎng)絡(luò)陣列來指導(dǎo)和規(guī)范版面布局以及信息分布，而UI設(shè)計(jì)里常用的柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展起來，柵格系統(tǒng)有時(shí)候也稱為網(wǎng)格系統(tǒng)。
柵格系統(tǒng)在圖片的排版布局、尺寸設(shè)定方面給了設(shè)計(jì)者直觀的參考，它讓圖片變得有規(guī)律，從而減少了設(shè)計(jì)決策成本，使整個(gè)畫面更加具有條理，讓內(nèi)容的可讀性變高。
移動(dòng)端常用的柵格系統(tǒng)最小單位為4px（@1x）或3px（@1x），那么我們來看看airbnb是如何用3px（@1x）的柵格系統(tǒng)來確認(rèn)banner的尺寸大?。╯ketch軟件-顯示-布局，就可以打開柵格系統(tǒng)布局面板）：
如上圖，airbnb的柵格系統(tǒng)布局設(shè)置總寬為328px（總寬為中間6列+4個(gè)間距寬度），偏置為24px（左側(cè)初始偏置像素），列數(shù)為6（一共分為6列），列寬45px（列數(shù)的寬度），間距寬度為12px（當(dāng)不能除正數(shù)時(shí)，會(huì)自動(dòng)把間距縮小1px，所以會(huì)看到有些間距為11px，有些間距為12px）
當(dāng)設(shè)定好柵格系統(tǒng)后，我們就可以很好的得出圖片的寬度：158px（45+11+45+12+45）。再根據(jù)圖片比例的尺寸3:2，我們就可以算出圖片的高度為：106px（158*3x2），所以圖片的像素為：158px X 106px。根據(jù)相同的方法，我們可以用柵格系統(tǒng)+尺寸比例得出更多的尺寸大小。（注：不管是3px或4px柵格，都會(huì)出現(xiàn)除不整的情況，如上圖中的11px，這個(gè)不用擔(dān)心，不影響大局。）
在對(duì)banner圖進(jìn)行輸出時(shí)要考慮倍率的大小，每個(gè)產(chǎn)品會(huì)根據(jù)產(chǎn)品的特性來決策輸出的倍率，有些產(chǎn)品用二倍圖輸出，有些產(chǎn)品用3倍圖輸出，各有利弊。
標(biāo)準(zhǔn)分辨率的顯示器具有1：1的像素密度（即@1x），其中一個(gè)像素占位一個(gè)點(diǎn)。高分辨率顯示器具有更高的像素密度， 2倍或3倍的比例系數(shù)（即@2x、@3x）。當(dāng)1倍的位圖放在2倍或3倍的尺寸下時(shí)，就會(huì)出現(xiàn)圖片損傷現(xiàn)象（失真），那么我們到底該用幾倍圖去制作banner圖呢？
優(yōu)點(diǎn)：導(dǎo)出文件比@3x小，可平衡圖片質(zhì)量和線上文件大小的一個(gè)優(yōu)質(zhì)方案。
缺點(diǎn)：雖然@2x可向下適配@1x，但適配@3x放大后圖片會(huì)微微模糊，所以我們?nèi)绻聾2x導(dǎo)出圖片，那么banner內(nèi)的文字不能過小或過于密集、粗曠，畫面中也不能出現(xiàn)過多的效果，不然會(huì)看出明顯的模糊痕跡（如下圖的頂部文字與按鈕文字放大后就有明顯的模糊痕跡）
優(yōu)點(diǎn)：@3x可向下適配@1x與@2x，能夠很好的保證不同尺寸下的圖片質(zhì)量，對(duì)視覺要求高的項(xiàng)目就必須用3倍圖來設(shè)計(jì)。
缺點(diǎn)：輸出的文件相對(duì)較大。
圖片的適配類型非常多，對(duì)于不同的布局適配場(chǎng)景我們選擇的適配方案也不同，圖片適配一共分為3大類：智能適配、設(shè)計(jì)師制圖適配、用戶裁剪適配。
簡(jiǎn)單來說智能適配是指通過后臺(tái)代碼的約束對(duì)上傳的圖片進(jìn)行智能匹配，匹配內(nèi)容包含圖片大小、圖片尺寸以及圖片的展現(xiàn)方式。
圖片大?。嚎梢韵拗粕蟼鲌D片的最大尺寸。
圖片尺寸：可以限制圖片的長（寬）最小值，也可以限制圖片的精準(zhǔn)尺寸。
圖片展現(xiàn)方式：可以設(shè)定圖片在容器中的呈現(xiàn)方式，下面是最常見的8個(gè)圖片呈現(xiàn)方式。
當(dāng)你無法保證用戶發(fā)幾張圖片，無法預(yù)估圖片的比例時(shí)，我們就可以去設(shè)定它相應(yīng)的規(guī)則使之適配。
*1、單張布局：
不管用戶上傳幾張圖片，F(xiàn)eed流中以一張大圖進(jìn)行展現(xiàn)，使用大圖布局的圖片適配方式一般有兩種，一種是給予圖片一個(gè)容器大小，讓其內(nèi)容全部展示；另一種是按照?qǐng)D片的上傳比例而變化。
*1-1給予容器大小
我們可以給予圖片一個(gè)容器尺寸（如：300X300px），無論圖片有多大都不能超過此容器，為了讓圖片內(nèi)容全部展示出來且不變形，我們可以讓圖片保持正比例縮放，使長邊能完全顯示出來（左上或中心區(qū)域）。這一類的適配更偏向于以內(nèi)容為主的產(chǎn)品，下面是常用的兩種適配方案：
*1-2隨圖片比例而變化
如果你想保證圖片最佳的大圖預(yù)覽效果，那么就可以采用隨圖片比例而變化的方案，當(dāng)用戶上傳不同比例的圖片時(shí)，圖片展示的高度與寬度會(huì)根據(jù)我們提供比例縮放。采用該適配方式能將圖片信息表達(dá)完善，圖片占用空間大，適合圖片質(zhì)量高，這一類的適配更偏向于以圖片為主的應(yīng)用。
要做這類適配時(shí)我們首先要設(shè)定裁切的比例，裁剪比例一般設(shè)置為常用的圖片比例 1:1、4:3、3:2、16:9。我們上傳的圖片可以根據(jù)圖片的比例進(jìn)行自行匹配。當(dāng)圖片越接近正方形則選擇1:1，當(dāng)圖片長寬比例越大則選擇16:9。
用戶上傳的很多圖片并不是標(biāo)準(zhǔn)比例，如果存在多余像素，那么可以采用保持圖片正比縮放，從圖片中心區(qū)域展示，根據(jù)比例一共可以分為7種展現(xiàn)方式：
我們可以看到上圖，根據(jù)不同比例的尺寸展現(xiàn)出來的頁面占比也是不同的，如果產(chǎn)品對(duì)頁面承載信息量有較高要求，那么可以去除16:9、3:2、4:3的縱向尺寸。
瀑布流的圖片適配方法需要規(guī)定圖片比例，并且每個(gè)比例的容器大小是固定的，呈現(xiàn)方式也是保持圖片正比縮放，從圖片中心區(qū)域展示。
*3、宮格：
宮格式布局簡(jiǎn)單來說就是有規(guī)律的方形布局(1:1尺寸)，宮格布局的形式多種多樣可以是九宮格、四宮格、三宮格，下面以較為復(fù)雜的九宮格的適配為例，當(dāng)然最好的參考或者最常見的就是微信朋友圈。
對(duì)于特殊頁面的圖片展示，我們?yōu)榱顺尸F(xiàn)最好的視覺效果，需要設(shè)計(jì)師對(duì)圖片進(jìn)行單獨(dú)尺寸的適配設(shè)計(jì)，并且輸出多個(gè)尺寸的圖片進(jìn)行上傳。
例如在適配開屏頁時(shí)就對(duì)其進(jìn)行了單獨(dú)的制圖適配，想要讓二倍圖適配三倍圖，最簡(jiǎn)單的方法就是把畫面的上下區(qū)域留出更多的空間，中心畫面放大10%，可操作按鈕放置畫面安全區(qū)域：
如果設(shè)計(jì)師不進(jìn)行制圖適配，把適配交給程序處理，那么最終呈現(xiàn)的圖片就會(huì)顯得非常糟糕。如下圖1的強(qiáng)行適配，使得整個(gè)banner比例非常不協(xié)調(diào)，讓人看了后覺得十分廉價(jià)；下圖2則稍微好一點(diǎn)，雖然保證了畫面的視覺中心，但是整體畫面看起來過于飽滿，沒有任何呼吸感，并且“點(diǎn)擊參與”按鈕過于靠下，容易與home指示器造成誤操作。
當(dāng)用戶想要呈現(xiàn)某些重要信息或識(shí)別性信息時(shí)，就可以把主動(dòng)權(quán)交給用戶，讓用戶進(jìn)行自行裁剪，如頭像、身份證信息。用戶上傳圖片后，我們可以給用戶設(shè)定一個(gè)默認(rèn)裁剪區(qū)域，當(dāng)用戶不想進(jìn)行繁瑣時(shí)可以直接默認(rèn)系統(tǒng)裁剪，如上傳頭像，我們可以把默認(rèn)區(qū)域設(shè)置為圖片的中心區(qū)域。
小紅書在選擇頭像時(shí)默認(rèn)裁剪區(qū)域是圖片的中心區(qū)域1:1圓形，并且圖片是短邊顯示，無論什么比例的圖片都能全部展示在選區(qū)內(nèi)，當(dāng)你想要把圖片脫離到選區(qū)外，系統(tǒng)會(huì)自動(dòng)使圖片彈回。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清，選區(qū)外圖片模糊，選擇狀態(tài)則是選區(qū)內(nèi)圖片高清，選區(qū)外圖片黑色不透明遮罩（高透明度）。
微信在選擇頭像時(shí)默認(rèn)裁剪區(qū)域是圖片的中心區(qū)域1:1正方形，圖片一樣是短邊顯示，也不能讓圖片脫離到選區(qū)外，但是能拖動(dòng)并放大縮小選區(qū)框。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清，選區(qū)外圖片有黑色不透明遮罩，選擇狀態(tài)則是圖片內(nèi)容全部高清呈現(xiàn)。
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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ì)的含義，是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。隨著扁平化設(shè)計(jì)風(fēng)格的普及，圖標(biāo)的風(fēng)格越來越簡(jiǎn)約，看似簡(jiǎn)單的圖形，實(shí)際要準(zhǔn)確的表達(dá)含義，也是需要注意很多細(xì)節(jié)的，在如今大同小異的圖標(biāo)中，如何讓你設(shè)計(jì)出的圖標(biāo)具有說服力也是一門學(xué)問，今天就給大家全面的剖析一下圖標(biāo)的知識(shí)，讓你做出的圖標(biāo)有理有據(jù)。
1、圖標(biāo)的定義及分類
2、圖標(biāo)的設(shè)計(jì)規(guī)范
3、圖標(biāo)的性格走向
4、圖標(biāo)的評(píng)判標(biāo)準(zhǔn)
5、總結(jié)
圖標(biāo)是具有高度概括性的、用于視覺信息傳達(dá)的圖像。圖標(biāo)常?？梢詡鬟_(dá)出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內(nèi)容和信息。
在數(shù)字設(shè)計(jì)領(lǐng)域，圖標(biāo)作為網(wǎng)頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎(chǔ)設(shè)施，也是達(dá)成人機(jī)交互這一目標(biāo)的有效途徑。
釋意性圖標(biāo)是用來解釋和闡明特定功能或者內(nèi)容類別的視覺標(biāo)記。它并不是一定被點(diǎn)擊可交互的UI元素，在很多時(shí)候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會(huì)借助這些圖標(biāo)來獲取信息。不過有時(shí)候圖標(biāo)表達(dá)的含義可能還不夠完整或者清晰，所以會(huì)將圖標(biāo)和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標(biāo)一共可以分為以下三類：
2-1-1純圖標(biāo)：
例如火球買手APP中的店家“特定標(biāo)簽”，以及圖文展示下的“觀看數(shù)量圖標(biāo)”與“收藏圖標(biāo)”，它們并不需要用文字去解釋，用戶也知道它表達(dá)的是什么。
2-1-2圖文結(jié)合：
例如造作APP中的“購物車圖標(biāo)”與“收貨地址圖標(biāo)”，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會(huì)配有文字提示，這樣就能大大的降低誤讀的可能性。
2-1-3純圖標(biāo)（圖標(biāo)內(nèi)含文字）：
例如開眼APP中視頻封面左上角“開眼精選圖標(biāo)”，它把圖標(biāo)與重要文字結(jié)合在一起展示給用戶，看起來不僅十分具有個(gè)性，而且用戶對(duì)其理解性也非常強(qiáng)。
交互圖標(biāo)的最大意義在于可以引導(dǎo)用戶進(jìn)行交互行為，是在產(chǎn)品中不可或缺的組成部分。它們可以在用戶不同的操作手勢(shì)下幫助用戶執(zhí)行不同的交互過程，這種類型圖標(biāo)也是APP中最常見的，常見的交互性圖標(biāo)如：搜索、底部標(biāo)簽、返回、點(diǎn)贊、收藏、掃一掃等。
裝飾性圖標(biāo)僅僅是用來提升整個(gè)界面的視覺體驗(yàn)，它并不具備任何功能性。這類圖標(biāo)往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個(gè)用戶體驗(yàn)更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標(biāo)”。
圖標(biāo)基于基礎(chǔ)樣式（線、面、線面結(jié)合）+表現(xiàn)手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。
線性圖標(biāo)通過線來塑造輪廓，在界面中App的圖標(biāo)尺寸并不大，所以如果線過于復(fù)雜，在小面積中過多的線會(huì)對(duì)識(shí)別性產(chǎn)生較大的困擾。在圖標(biāo)設(shè)計(jì)中使用的線有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2PX或者3PX，不同的線條粗細(xì)所帶來的視覺感受也不同，細(xì)線顯得精致，粗線視覺面積大，顯得厚重。
面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別。
線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計(jì)的角度上說，由于元素的多樣化，設(shè)計(jì)更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會(huì)顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過度是關(guān)鍵。
這類圖標(biāo)的特點(diǎn)是通過細(xì)節(jié)和光影還原現(xiàn)實(shí)物品的造型和質(zhì)感，能給用戶極強(qiáng)的代入感，用戶可通過對(duì)現(xiàn)實(shí)事物的聯(lián)想，快速領(lǐng)會(huì)圖標(biāo)表達(dá)的意圖。但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來了一些問題，因?yàn)橛脩絷P(guān)注的核心永遠(yuǎn)都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對(duì)用戶獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標(biāo)很少運(yùn)用在APP界面之內(nèi)。
相較于擬物風(fēng)格不會(huì)有太多復(fù)雜的視覺元素，層次簡(jiǎn)單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類圖標(biāo)具有一定的立體感，能給人輕盈、簡(jiǎn)潔、精致的感覺，在界面設(shè)計(jì)中，一般在面積比較大的區(qū)域我們會(huì)使用加入輕質(zhì)感的圖標(biāo)。
合理的遵循圖標(biāo)規(guī)范可以有利于設(shè)計(jì)師之間合作使用，指導(dǎo)設(shè)計(jì)師如何規(guī)范的去設(shè)計(jì)圖標(biāo)，以確保企業(yè)所有產(chǎn)品圖標(biāo)風(fēng)格的一致性和可用性達(dá)到統(tǒng)一，同時(shí)也是為了后續(xù)產(chǎn)品更新迭代有可參考的地方。
為了保證圖標(biāo)的尺寸大小一致性，我們往往會(huì)建立基礎(chǔ)的網(wǎng)格尺寸來進(jìn)行繪制圖標(biāo)，常用的網(wǎng)格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設(shè)計(jì)中也會(huì)存在特殊的尺寸，例如谷歌在臺(tái)式機(jī)上設(shè)計(jì)圖標(biāo)，當(dāng)鼠標(biāo)和鍵盤是主要輸入方法時(shí)，就會(huì)使用密集布局，基礎(chǔ)網(wǎng)格就會(huì)縮小到20。
下面就以常用的24x24為大家展示：
網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時(shí)將保留其所需的比例和周圍的空白區(qū)域，同時(shí)還能夠很好的平衡圖標(biāo)的視覺重心。
*在使用常規(guī)圖標(biāo)時(shí)避免一部分在出血位。
*在使用多個(gè)元素的圖標(biāo)時(shí)，避免圖標(biāo)擁擠我們可以讓其部分出現(xiàn)在出血位，確保它們之間有足夠的空間。
keyline由圓形，正方形，矩形，正交，三角形和對(duì)角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設(shè)計(jì)相似比例的圖標(biāo)時(shí)有共同的參考準(zhǔn)則。
在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：
當(dāng)把圖標(biāo)畫在網(wǎng)格上時(shí)可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺上看著統(tǒng)一規(guī)范。
在設(shè)計(jì)一整套系統(tǒng)化的圖標(biāo)時(shí)，我們一定要注意圖標(biāo)的像素大小，要運(yùn)用相同的網(wǎng)格尺寸設(shè)計(jì)相同線條粗細(xì)的圖標(biāo)，包括曲線，角度以及內(nèi)部和外部筆劃。這樣圖標(biāo)看起來才更統(tǒng)一，也有利于后期圖標(biāo)的迭代更新。
當(dāng)然，描邊像素的粗細(xì)并不是絕對(duì)的，如果我們要做一些密集型的圖標(biāo)時(shí)，可以考慮適當(dāng)?shù)目s小線的像素大小。如下，我們?cè)O(shè)定的系統(tǒng)圖標(biāo)線條粗細(xì)為3px，當(dāng)你用3px作用于指紋圖標(biāo)上時(shí)就會(huì)顯得非常擁擠，并且在視覺上比其余圖標(biāo)更重，這時(shí)我們就可以把它的線條像素降級(jí)，設(shè)定為2px。
我們?cè)谟檬噶抗ぞ呃L制圖標(biāo)時(shí)，要仔細(xì)看好圖標(biāo)的網(wǎng)格尺寸和圖標(biāo)結(jié)構(gòu)尺寸，避免產(chǎn)生小數(shù)位。
曲率簡(jiǎn)單來講就是圖標(biāo)中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會(huì)有一定的曲率。在圖標(biāo)中曲率的呈現(xiàn)方式有兩種：外曲、內(nèi)曲。
外曲與內(nèi)曲并不一定同時(shí)存在，在特定情況下內(nèi)部結(jié)構(gòu)可以是直角（無曲率）。如下圖：當(dāng)內(nèi)部結(jié)構(gòu)都是圓角時(shí)會(huì)發(fā)現(xiàn)整個(gè)圖標(biāo)稍顯臃腫，這時(shí)我們可以把部分內(nèi)部圓角直接變?yōu)橹苯牵ㄒ部梢愿淖兦蚀笮。?，改變后就?huì)發(fā)現(xiàn)圖標(biāo)的整體結(jié)構(gòu)會(huì)顯得更加協(xié)調(diào)。需要注意的是如果一個(gè)圖標(biāo)做了這樣的處理，在同等情況下的圖標(biāo)都要做一樣的處理，不然圖標(biāo)會(huì)顯得非常雜亂，不統(tǒng)一。
根據(jù)像素的網(wǎng)格線來設(shè)置兩條對(duì)角線，會(huì)讓你的圖標(biāo)看起來更清晰。在傾斜的角度選擇上，不要出現(xiàn)7.8°、14.2°這樣的奇怪?jǐn)?shù)值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會(huì)使得整體的圖形變化顯得更加規(guī)律，也能夠滿足不同圖形的角度需求。
在做很多圖標(biāo)時(shí)都會(huì)用斷點(diǎn)的缺口來打破“全包邊圖標(biāo)”的沉悶感，使圖標(biāo)具有透氣性，如果想給圖標(biāo)添加斷點(diǎn)，那么要保證斷點(diǎn)的形態(tài)保持一致。
確保圖標(biāo)內(nèi)每個(gè)細(xì)節(jié)和元素都有足夠的空間，圖標(biāo)的相鄰元素之間的空間在整個(gè)圖標(biāo)中不應(yīng)太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。
如果在做圖標(biāo)時(shí)牽涉到了透視需求，那么就一定要保證圖標(biāo)的透視角度一致。
非中心對(duì)稱圖形物理對(duì)齊時(shí)視覺上會(huì)有偏離感，多個(gè)不同形狀的圖標(biāo)視覺重心并不在一條水平線上，需要微調(diào)才能保證平衡感。
在圖形的處理上，不要留有多余的節(jié)點(diǎn)，干掉多余的節(jié)點(diǎn)，保持圖形的整潔。
ICON命名要求較為嚴(yán)格，涉及到我們切圖給開發(fā)，所以我們命名爭(zhēng)取做對(duì)，且需嚴(yán)格遵守規(guī)則，正確的命名原則：類型_位置_功能_狀態(tài)_大小
每個(gè)App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，同樣圖標(biāo)性格也應(yīng)當(dāng)與產(chǎn)品氣質(zhì)保持一致。圖標(biāo)性格一共分為了4個(gè)走向：粗曠（粗直）、活潑（粗圓）、商務(wù)（細(xì)直）、精致（細(xì)圓）。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為直角。
粗曠類圖標(biāo)讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調(diào)類型等產(chǎn)品中。例如VSCO，它的底部標(biāo)簽欄圖標(biāo)全部采用了粗線條的直角設(shè)計(jì)。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較粗（或面性圖標(biāo)、線面結(jié)合圖標(biāo)）、拐角為圓角。
活潑類圖標(biāo)讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產(chǎn)品中。例如閑魚，不管是在LOGO字體的處理還是APP內(nèi)部的圖標(biāo)處理，都是采用了線條較粗的圓角設(shè)計(jì)。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較細(xì)、拐角為直角。
商務(wù)類圖標(biāo)讓人看起來十分規(guī)矩、嚴(yán)謹(jǐn)、值得信賴，它更多適用于新聞、政府、商務(wù)、工具等產(chǎn)品中。例如工具類的思維導(dǎo)圖APP，它的可操作按鈕都是商務(wù)類的圖標(biāo)。因?yàn)檫@類圖標(biāo)的特性，所以目前我們很少在移動(dòng)端上看到它，它更多適用于PC端的后臺(tái)界面中。
圖標(biāo)結(jié)構(gòu)特點(diǎn)：線條較細(xì)、拐角為圓角。
精致類圖標(biāo)讓人看起來非常干凈、柔和、顯得高級(jí)感，它更多適用于旅游、奢侈品、藝術(shù)、領(lǐng)域垂直等產(chǎn)品中。例如airbnb，在APP應(yīng)用中大部分都采用了精致類圖標(biāo)。
當(dāng)圖標(biāo)設(shè)計(jì)完后，我們應(yīng)該如何去評(píng)判一個(gè)圖標(biāo)的好壞？很多設(shè)計(jì)師并沒有完整的評(píng)判體系，其實(shí)我們可以從這五個(gè)維度對(duì)圖標(biāo)進(jìn)行評(píng)判：識(shí)別性、圖標(biāo)氣質(zhì)、協(xié)調(diào)性、一致性、品牌調(diào)性。
圖標(biāo)最主要的用途就是輔助用戶理解信息，特別是對(duì)于當(dāng)圖標(biāo)單獨(dú)存在時(shí)，一定不能讓用戶產(chǎn)生疑慮。要想圖標(biāo)達(dá)到高識(shí)別，我們可以從這2個(gè)方向入手：大眾認(rèn)知隱喻、真實(shí)世界映射。
在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標(biāo)已被廣大用戶熟知認(rèn)可，對(duì)于這類隱喻圖標(biāo)用戶不用思考身體就已做出反應(yīng)，我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí)可以從隱喻圖標(biāo)中添加修改部分元素，從而形成新的圖標(biāo)，這樣既能保證圖標(biāo)的識(shí)別性，也能做出差異化。
選擇真實(shí)世界中的物品映射，能使人下意識(shí)對(duì)圖標(biāo)的作用有近似預(yù)期，降低學(xué)習(xí)成本，提高識(shí)別度。
每個(gè)App應(yīng)該有自己獨(dú)特的產(chǎn)品氣質(zhì)，而我們所做的圖標(biāo)就是要跟隨產(chǎn)品的氣質(zhì)。例如當(dāng)你要做一款二次元產(chǎn)品，你的圖標(biāo)氣質(zhì)就應(yīng)該偏活潑、可愛、萌、青春，而不是剛硬、嚴(yán)謹(jǐn)、規(guī)矩。
一致性是圖標(biāo)的基礎(chǔ)，我們?cè)诶L制整套圖標(biāo)時(shí)要確保它們的基礎(chǔ)屬性全部一致，細(xì)節(jié)統(tǒng)一，圖標(biāo)內(nèi)容的統(tǒng)一在視覺上也更加和諧美觀。圖標(biāo)是否具有一致性，就要從以下七個(gè)方向去評(píng)判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。
3-1 尺寸大小：網(wǎng)格大小是否統(tǒng)一、是否遵守圖標(biāo)的keyline規(guī)則。
3-2 圖形角度：是否遵循設(shè)定的角度規(guī)范（15°的增量用于傾斜角度）
3-3 拐角（曲率）：拐角的曲率是否統(tǒng)一，如果圖形太多且復(fù)雜，那么我們可以根據(jù)圖標(biāo)的特性去設(shè)定曲率的規(guī)則，例如可以設(shè)定當(dāng)邊角像素在1-2px時(shí)內(nèi)外曲率為2px；當(dāng)邊角像素在3px時(shí)內(nèi)外曲為2px，內(nèi)曲為1px；當(dāng)邊角像素大于或等于4px時(shí)，外曲為2px，內(nèi)部則為直角。
3-4 描邊：描邊大小是否一致。
3-5 間距：是否遵守間距規(guī)范。
3-6 透視：透視是否一致，避免在同一套圖標(biāo)中出現(xiàn)正視圖/側(cè)視圖混雜的情況。
3-7顏色：在圖標(biāo)的配色上要保持一致的規(guī)律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調(diào)，避免出現(xiàn)飽和度、明度反差過大的配色。
一致性代表的是圖標(biāo)的基礎(chǔ)，而協(xié)調(diào)性則代表圖標(biāo)的整體狀態(tài)，協(xié)調(diào)性的呈現(xiàn)狀態(tài)是驗(yàn)證一致性是否合理的標(biāo)準(zhǔn)，當(dāng)協(xié)調(diào)性存在問題時(shí)，我們就要反過來查看一致性存在的誤區(qū)并給予修改。在圖標(biāo)的協(xié)調(diào)性上我們主要審視這三點(diǎn)：視覺大小、飽滿度、透析感。
視覺大小對(duì)標(biāo)的是一致性的尺寸大小與描邊大小，當(dāng)你發(fā)現(xiàn)圖標(biāo)視覺大小不對(duì)等時(shí)，你就要回過去查看你的網(wǎng)格與keyline是否運(yùn)用正確，確保正確后再查看你的圖標(biāo)是否按照keyline的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標(biāo)，從光感上來看描邊粗的圖標(biāo)視覺偏大）
飽滿度對(duì)標(biāo)的一致性的間距，當(dāng)你發(fā)現(xiàn)圖標(biāo)不夠飽滿時(shí)，你就要去查看你設(shè)定的間距值是否偏大，是否合理。
透析感簡(jiǎn)單來說就是留白區(qū)域。透析感對(duì)標(biāo)的也是一致性的間距，當(dāng)元素的描邊過大時(shí)，我們就要合理的設(shè)定間距的最小值，不然整個(gè)圖標(biāo)就顯得非常臃腫。
品牌調(diào)性是我們經(jīng)常提到的緯度，我們打開很多APP都會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動(dòng)性。其實(shí)我們可以結(jié)合品牌調(diào)性，在圖標(biāo)上做更多的聯(lián)動(dòng)、創(chuàng)新。
色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。
當(dāng)然品牌顏色除了可以直接用外，還可以在提取時(shí)適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時(shí)，使得整個(gè)圖標(biāo)更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標(biāo)一般運(yùn)用在APP首頁標(biāo)簽。因?yàn)槭醉撌茿PP中最重要的頁面，也是進(jìn)入APP默認(rèn)的頁面，把首頁圖標(biāo)替換成品牌LOGO，能反復(fù)加強(qiáng)了用戶對(duì)App的logo印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時(shí)也二次傳遞了品牌形象。例如大眾點(diǎn)評(píng)，它的首頁標(biāo)簽就用了品牌LOGO。
我們可以在品牌中提取它識(shí)別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標(biāo)。
品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂，就把音符作為首頁圖標(biāo)。
如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶對(duì)品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個(gè)字母分別放在了4個(gè)標(biāo)簽內(nèi)，需要注意的是這類圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆湟龑?dǎo)含義，必須配合文字一起出現(xiàn)，這樣才能讓用戶能易理解。
圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會(huì)讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風(fēng)。
如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產(chǎn)品的圖標(biāo)中。例如盒馬，它就把盒馬的吉祥物做了風(fēng)格化的處理，放于APP的首頁標(biāo)簽。
設(shè)計(jì)師對(duì)自己做出的所有設(shè)計(jì)都必須要有理論支撐，圖標(biāo)也不例外，一套優(yōu)秀的圖標(biāo)是設(shè)計(jì)師不斷沉淀的結(jié)果?？赐瓯疚恼潞螅绻蠹蚁胍ゾ毩?xí)圖標(biāo)，建議找大廠的圖標(biāo)放在keyline里臨摹，真的會(huì)讓你收獲不少。
資料提?。?/strong>
最后給大家整理了一些資料，包含30個(gè)輕質(zhì)感圖標(biāo)（臨摹參考）、Ant Design的sketch插件、IBM的圖標(biāo)、keyline矢量文件（AI與Sketch）。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.yvirxh.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ì)公司
提到輪播首先可能想到的是廣告，我們經(jīng)常在移動(dòng)端首頁或網(wǎng)站首頁會(huì)看到各式各樣的輪播banner，不管在移動(dòng)端還是網(wǎng)頁上通常點(diǎn)擊數(shù)據(jù)都是非常差的，本篇文章帶你深入了解banner輪播。
如果需要設(shè)計(jì)一個(gè)輪播，我們應(yīng)該考慮哪些因素？如何讓輪播更具有價(jià)值？如何讓輪播的體驗(yàn)更好？如何避免輪播常見的問題。
本篇文章通過以下幾點(diǎn)探索輪播的特性，預(yù)計(jì)閱讀20分鐘
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進(jìn)度展示
4、輪播定位
5、輪播的切換
6、對(duì)輪播進(jìn)行分類
7、使用縮略圖進(jìn)行預(yù)知
8、輪播異形化
9、輪播時(shí)間
10、總結(jié)
用戶是否對(duì)輪播有感知，這個(gè)則需要根據(jù)不同的場(chǎng)景進(jìn)行判斷，包括每個(gè)產(chǎn)品中的每個(gè)輪播對(duì)用戶用戶的定位也不相同，常見的應(yīng)用場(chǎng)景品牌曝光、活動(dòng)營銷、產(chǎn)品展示，每個(gè)場(chǎng)景下相關(guān)的數(shù)據(jù)也不相同。
促銷輪播banner
品牌推廣輪播banner
產(chǎn)品介紹輪播banner
同時(shí)還有個(gè)關(guān)鍵因素，輪播的占比，這里以pc端為例若是產(chǎn)品是以品牌效應(yīng)吸引用戶的，大多輪播是以大的屏幕占比為主通常會(huì)占首屏的50%，如果是以營銷、內(nèi)容為主的產(chǎn)品，輪播通常以16:9、7:4的常規(guī)比例進(jìn)行展示。
用戶在使用產(chǎn)品時(shí)會(huì)默認(rèn)忽略輪播區(qū)域，一般輪播都會(huì)有自動(dòng)輪換機(jī)制，一定時(shí)間后自動(dòng)輪放下一張banner，那么每當(dāng)頁面上進(jìn)行輪播時(shí)便會(huì)吸引用戶進(jìn)行關(guān)注，效果上會(huì)有一定的提升，所以在輪播中第二張第三張的效果往往會(huì)比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關(guān)注輪播過去的banner以此來滿足好奇心。
如果banner是作為內(nèi)容傳播希望用戶通過banner了解內(nèi)容，那么則要避免放在最后一位置，對(duì)于用戶而言最后一張輪播路徑過于長，并且用戶很少會(huì)手動(dòng)滑動(dòng)banner。
國外一家公司在針對(duì)輪播中進(jìn)行了相關(guān)的研究測(cè)試，隨著頁數(shù)的增加用戶的點(diǎn)擊逐步下降。
那么如果想讓產(chǎn)品中的輪播更具有效果，則需要根據(jù)不同的場(chǎng)景設(shè)定策略達(dá)到目的。
不管在移動(dòng)端還是手機(jī)端，輪播都有各種交互形式和尺寸，以pc為例在交互上會(huì)多樣化一些，常見的幾種則是通過滾輪滑動(dòng)、通過點(diǎn)擊切換兩種。
如下圖某藝術(shù)網(wǎng)站，它則是通過鼠標(biāo)滾輪進(jìn)行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產(chǎn)品宣傳等相關(guān)的網(wǎng)站以此來突出產(chǎn)品的亮點(diǎn)，同時(shí)也符合用戶目標(biāo)。
在看下面這個(gè)醫(yī)美網(wǎng)站它的切換方式則是通過鼠標(biāo)點(diǎn)擊進(jìn)行切換，并且占比也是鋪滿首屏，在醫(yī)美領(lǐng)域用戶更關(guān)注美感，而輪播形態(tài)也是符合用戶的心理預(yù)期更加沉浸美觀。
而在移動(dòng)端輪播的形式就比較統(tǒng)一，大多都是自動(dòng)播放+手指滑動(dòng)進(jìn)行切換。
在網(wǎng)頁中輪播都會(huì)有當(dāng)前的定位點(diǎn)，許多用戶的習(xí)慣是點(diǎn)擊進(jìn)度條進(jìn)行切換banner這樣能夠更快的達(dá)到目標(biāo)，不用一張一張切換，但是在有些產(chǎn)品中會(huì)忽略這一點(diǎn)，設(shè)計(jì)中會(huì)做的非常小導(dǎo)致用戶在點(diǎn)擊上可用性不太友好，如下圖中的banenr進(jìn)度點(diǎn)設(shè)計(jì)上過于小導(dǎo)致點(diǎn)擊上有些阻礙。
如以下網(wǎng)站去除進(jìn)度定位的方式，通過縮略圖預(yù)覽來告知用戶下一個(gè)banner的內(nèi)容，空白區(qū)域也可以添加縮略圖引導(dǎo)介紹等關(guān)鍵信息，幫助用戶提前預(yù)知在體驗(yàn)上相對(duì)較好。
以下國外某網(wǎng)站在進(jìn)度定位的設(shè)計(jì)上采用了標(biāo)簽文案方式進(jìn)行設(shè)計(jì)，能夠幫助用戶更加全局的了解banner內(nèi)容
定位主要是用來指示當(dāng)前輪播的進(jìn)度，像上圖中講的便于用戶更加全局的觀看banner的張數(shù)和當(dāng)前進(jìn)度。
以下網(wǎng)站的設(shè)計(jì)中則把定位與進(jìn)度相結(jié)合，進(jìn)度條展示該banner預(yù)計(jì)多久會(huì)切換下一張，對(duì)于自動(dòng)切換的產(chǎn)品輪播這個(gè)更直觀的進(jìn)度展示體驗(yàn)上相對(duì)較好。
以下是某個(gè)國外網(wǎng)站，不管是pc還是移動(dòng)端都在輪播底部添加了水平條，告知用戶當(dāng)前位置
隨著市場(chǎng)上產(chǎn)品同質(zhì)化嚴(yán)重，產(chǎn)品的競(jìng)爭(zhēng)力也更依賴體驗(yàn)，在下圖中的數(shù)據(jù)可視化的網(wǎng)站上，在進(jìn)度條上就利用了產(chǎn)品的特性以餅狀圖的形式進(jìn)行展示。
在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設(shè)計(jì)上都很有創(chuàng)新性，但是需要注意一個(gè)點(diǎn)，在輪播中不只有自動(dòng)播放，還需要考慮用戶手動(dòng)切換，因?yàn)樵趯?shí)際用戶瀏覽中可能會(huì)對(duì)產(chǎn)品的播放時(shí)間達(dá)不到預(yù)期，此時(shí)則會(huì)使用手動(dòng)切換，除去可點(diǎn)擊的進(jìn)度點(diǎn)，還需要上一張和下一張的入口切換。
在此基礎(chǔ)上需要注意，在處于最后一張banner時(shí)，下一張切換還能不能點(diǎn)擊，第一張時(shí)上一張切換還能不能切換，這個(gè)取決于產(chǎn)品特性和輪播張數(shù)，如果輪播張數(shù)過小的話則需要進(jìn)行循環(huán)播放，如果過多的頁數(shù)則第一步和最后一步不可點(diǎn)擊。
上一張和下一張的距離遠(yuǎn)近取決于banner的大小，如果輪播banner占比較大時(shí)則需要考慮用戶的操作時(shí)長，距離越短時(shí)間越快，為了避免用戶操作失誤在相對(duì)較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因?yàn)樾^(qū)域banner用戶能夠更加全局的觀看，在使用上不會(huì)猶豫。
反觀移動(dòng)端在輪播中除了展示banner進(jìn)度外很少展示切換按鈕，移動(dòng)端更加依賴手勢(shì)交互。
當(dāng)輪播banner過多時(shí)利用標(biāo)簽進(jìn)行分類，用戶通過點(diǎn)擊標(biāo)簽進(jìn)行查看相關(guān)的輪播組合。
此方式更適合一些電商平臺(tái)、新聞網(wǎng)站這種內(nèi)容過多的產(chǎn)品
如下圖國外社交媒體網(wǎng)站則使用了標(biāo)簽進(jìn)行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個(gè)場(chǎng)景。
在banner首屏中，顯示的內(nèi)容越多，越能激發(fā)用戶進(jìn)行點(diǎn)擊，像上面講過的農(nóng)業(yè)產(chǎn)品網(wǎng)站就使用下一張預(yù)覽圖的形式進(jìn)行展示，當(dāng)然不僅局限于這種形式，如下圖中的餐飲網(wǎng)站把所有的輪播banner展示給用戶觀看。
相對(duì)于縮放圖，圖標(biāo)展示效果上也較好，空間占用更少，使用這種方式需要謹(jǐn)慎，對(duì)圖標(biāo)的識(shí)別性要求較高，我印象中能夠使用的這種方法的網(wǎng)站是蘋果官網(wǎng)，讓產(chǎn)品抽象化展示。
在移動(dòng)端也存在這種設(shè)計(jì)手法，但是基于分辨率原因移動(dòng)端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競(jìng)。
輪播最大的缺陷則是像剛開始講的用戶會(huì)默認(rèn)為廣告，對(duì)此可以使用個(gè)性化設(shè)計(jì)突破用戶心理障礙，使輪播banner更具備親和力。
如下圖中的數(shù)碼科技網(wǎng)站，利用產(chǎn)品與背景的結(jié)合營造出一種功能性的展示。
再例如下圖中蘋果官網(wǎng)入口，結(jié)合百度的定制化功能在大搜中進(jìn)行個(gè)性化處理，把常規(guī)的banner輪播以功能卡片形式進(jìn)行展示，同時(shí)卡片承載產(chǎn)品動(dòng)畫引導(dǎo)用戶進(jìn)行點(diǎn)擊。
蘋果官網(wǎng)進(jìn)入后隨意點(diǎn)擊產(chǎn)品介紹頁后會(huì)發(fā)現(xiàn)，蘋果把輪播結(jié)合鼠標(biāo)滾輪營造沉浸式觀看，每個(gè)屏效內(nèi)都展示產(chǎn)品一個(gè)功能特點(diǎn)，打破傳統(tǒng)banner的展現(xiàn)形式。
自動(dòng)播放的輪播會(huì)根據(jù)用戶的耐心和用戶的訴求進(jìn)行調(diào)整優(yōu)先級(jí)，如我們平常使用產(chǎn)品時(shí)會(huì)忽略banner廣告，我們會(huì)更加關(guān)注移動(dòng)中的東西，特別是在移動(dòng)端上通常是banner進(jìn)行輪播時(shí)才會(huì)關(guān)注。
谷歌設(shè)計(jì)團(tuán)隊(duì)曾對(duì)banner輪播的時(shí)間進(jìn)行測(cè)試，測(cè)試結(jié)果得出5s-7s的輪播時(shí)間最佳，在這個(gè)時(shí)間內(nèi)用戶有足夠的時(shí)間對(duì)輪播banner上的產(chǎn)品內(nèi)容進(jìn)行了解。
如下圖谷歌商店的輪播時(shí)間設(shè)定在6s。
同時(shí)還需要注意，在自動(dòng)播放的過程中如果用戶鼠標(biāo)hover上去后，則需要判定播放暫定，避免用戶錯(cuò)過感興趣的內(nèi)容。
本文從輪播的樣式、特性、用戶對(duì)輪播的認(rèn)知等多方面的介紹，在實(shí)際產(chǎn)品中輪播有很多可用性上的問題存在，我們?cè)谠O(shè)計(jì)中則需要根據(jù)自己產(chǎn)品的特性、用戶群體特點(diǎn)等多維度去思考適合什么樣的輪播形式。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：愛吃貓的魚____ 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.yvirxh.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ì)公司
因?yàn)槲恼聦?shí)在太長，所以會(huì)分為上下兩篇發(fā)布，本篇為下篇，主要內(nèi)容為：
- 02. 字體字號(hào)
- 03. 圖標(biāo)大小
- 04. 組件尺寸
本小節(jié)要開始介紹前面沒有說的文字了，文字的尺寸至關(guān)重要，但首先理解了前面所講的控件之后，再去思考文字尺寸的用法，會(huì)相對(duì)更容易一些，它們之間也有一些有趣的聯(lián)系。
而在對(duì)控件和文字都掌握熟練以后，才能進(jìn)入后面的組件設(shè)計(jì)，這是我認(rèn)為的一個(gè)比較合理的學(xué)習(xí)過程。
首先我們知道，安卓和 iOS 應(yīng)用的中英文字體各不相同，蘋果是用蘋方和 San Francisco，安卓使用思源黑體和 Roboto。
?
如果不知道該去哪里下載這些字的同學(xué)，可以在我公眾號(hào)里回復(fù)“字體”下載對(duì)應(yīng)的字體源文件。
在后面我們主要以 iOS 作為說明的對(duì)象，安卓則同理，可以直接參照 iOS 的字體尺寸設(shè)置。
一、英文的字號(hào)
在蘋果的官方建議中，有羅列出比較完整的文字字號(hào)建議，但大家一定要謹(jǐn)記，那些就是建議，并不需要在非官方的組件中應(yīng)用那些字號(hào)。下圖是蘋果默認(rèn)字體尺寸，詳見我們翻譯的 iOS 規(guī)范第 124 頁 (公眾號(hào)中回復(fù)“iOS”可獲得下載鏈接)。
首先我們要先劃分出一個(gè)文字字號(hào)的取用范圍，之后所有字體的字號(hào)設(shè)置就在那里面挑選。
在 UI 中，最小字號(hào)的依據(jù)一般有兩個(gè)，一個(gè)是人眼的可見度，另一個(gè)是屏幕的顯示極限，綜合兩者最小的字號(hào)應(yīng)該在 9pt 。而最大的字號(hào)，以 iOS11 的標(biāo)題字號(hào) 34pt 為準(zhǔn)即可。
?
從 9-34，理論上其中每一個(gè)整數(shù)都可以使用，但我還是建議要應(yīng)用一定的習(xí)慣。下面，就是我在英文應(yīng)用設(shè)計(jì)中會(huì)使用的字體字號(hào)列表，為了便于記憶，我就只拆分成三種類型，初學(xué)者在使用時(shí)直接套用就可以。
? 標(biāo)題：34、28、24、22、20
? 閱讀：18、16、14、12
? 注釋：11、10、9
注：?jiǎn)挝痪鶠閜t
在英文應(yīng)用中，我們應(yīng)用的字號(hào)大小隨項(xiàng)目復(fù)雜度決定，通常，尺寸會(huì)在五種以上，兩種標(biāo)題、兩種正文、一種注釋類字號(hào)，當(dāng)然，我們還會(huì)通過字重和色彩進(jìn)一步劃分，不過那不在這里的討論范圍中。例如下面我使用五種字號(hào)尺寸設(shè)計(jì)出來的原型案例：
另外，在 iOS 中，字號(hào)小于 20pt 使用 SF Pro Text，大于等于 20pt 時(shí)則使用 SF Pro Display 字體，這點(diǎn)大家需要牢記。
?
數(shù)字字體則可以等同于英文，但如果有需要展示數(shù)據(jù)的需求，那么最大尺寸就要靠自己的判斷了。
二、中文字體
中文字體和英文字體的最大差異在于筆畫數(shù)，很多中文的筆畫和結(jié)構(gòu)都異常復(fù)雜，如 “嚷”、“饕”、“餐”等，所以，最小的尺寸不可能和英文相等。建議最小中文字號(hào)使用 11pt。
至于最大的中文，因?yàn)樘O方并沒有 SF pro 字體那么豐富的字重，字號(hào)過大會(huì)有正負(fù)形失衡的違和感，所以，最大字號(hào)的尺寸也應(yīng)比英文小。
下面是我在中文應(yīng)用中建議使用的字號(hào)：
? 標(biāo)題：28、24、22、20
? 正文：18、16、14
? 注釋：12、11
注：?jiǎn)挝痪鶠閜t
前面做過的原型，應(yīng)用的就是這些字號(hào)。
?
中文的字號(hào)選擇范圍是比英文小的，并且，中文字重?cái)?shù)遠(yuǎn)少于英文，我們?cè)谧鲋形膽?yīng)用的排版遠(yuǎn)遠(yuǎn)比英文應(yīng)用的容易。很多新手誤以為英文更容易設(shè)計(jì)，那都是源自對(duì)英文的陌生，只是將字符純粹的當(dāng)成有節(jié)奏變化的幾何形狀而不是用來閱讀的文本，而如果涉及到需要閱讀的英文文本設(shè)計(jì)時(shí)，字體、字號(hào)、字間距以及行高的選擇就會(huì)變得異常復(fù)雜。
三、文字的邊距
講完了字號(hào)的選擇范圍，這里我們就要再來討論下一個(gè)問題，就是如何更細(xì)化地去選擇字號(hào)。
首先，合理的字號(hào)是和環(huán)境息息相關(guān)的，而這種聯(lián)系最多的體現(xiàn)在文本區(qū)域的邊距上。能被合理閱讀的文本段落，是需要留白的，過于擁擠的文字排列只會(huì)造成閱讀的不適。
因?yàn)榍懊嫖覀円呀?jīng)說過控件的尺寸如何設(shè)置，所以當(dāng)我們?cè)谠O(shè)置文字時(shí)，很多時(shí)候是根據(jù)所定義的控件的高度，結(jié)合邊距來選擇文字的字號(hào)，下面通過一些控件來舉例。
例如我們定義了一個(gè) 40pt 高的按鈕，在設(shè)置文字時(shí)，嘗試將多種文字字號(hào)置入，過多的間距和過小的間距都會(huì)讓按鈕看起來不精致。合適的字體大小應(yīng)該是 16pt。
?
而如果設(shè)置了一個(gè) 24pt 按鈕，那么得到的結(jié)論應(yīng)該是 12pt。
?
輸入框的文字應(yīng)用和按鈕相同，也以上下間距作為主要參考。
?
字號(hào)的選擇，除了本身的定位（如標(biāo)題或正文）以外，是可以通過比較的方式得出最優(yōu)結(jié)果的。只要稍微花一點(diǎn)點(diǎn)時(shí)間，像上方案例演示的一樣將設(shè)計(jì)元素復(fù)制排列出來，就可以很快選出最適合的數(shù)值。
最后，前面說到的關(guān)于文字字號(hào)的設(shè)定，結(jié)合控件的尺寸規(guī)范，就能在下面決定組件的設(shè)計(jì)尺寸，缺一不可。
多做針對(duì)性練習(xí)，以提升對(duì)控件和文字的掌握熟練度是很有必要的。建議多做一些簡(jiǎn)單界面的臨摹，并套用前面提到的元素尺寸，這樣很快就能適應(yīng)這種高效規(guī)范的方式了。
這一節(jié)要講講關(guān)于圖標(biāo)的尺寸，應(yīng)該是最容易的地方，因?yàn)榍懊娴膬?nèi)容中，我們已經(jīng)規(guī)范并習(xí)慣了使用 4 的倍數(shù)作為尺寸的最小量度，那么在圖標(biāo)中只需要同樣遵循這樣的原則。從相關(guān)的圖標(biāo)素材下載網(wǎng)站就可以發(fā)現(xiàn)這種規(guī)律，如 iconfont、iconsearch 等等。
一、圖標(biāo)的權(quán)重
在設(shè)置具體的尺寸前，我們還是要談?wù)剻?quán)重的問題。正常的 APP，通常會(huì)包含大量的圖標(biāo)，而這些圖標(biāo)，大小并不會(huì)完全一樣。如下面的案例：
之所以這些圖標(biāo)的大小不一樣，和它們代表的功能和權(quán)重分不開關(guān)系。我們可以簡(jiǎn)單將應(yīng)用內(nèi)會(huì)出現(xiàn)的圖標(biāo)分成 3 類，代表不同級(jí)別的權(quán)重。
最高：頁面中重要的功能入口
?
中等：底部導(dǎo)航欄用的圖標(biāo)
?
最低：一般的工具類圖標(biāo)
當(dāng)然，這是我簡(jiǎn)化過的邏輯，類似淘寶、京東、攜程這類大型應(yīng)用，就還可以劃分出更細(xì)致的權(quán)重類型。而不同的權(quán)重實(shí)際上就對(duì)應(yīng)了不同尺寸的圖標(biāo)，如果有 3 種權(quán)重，那么我們?cè)谠O(shè)計(jì)的過程里就會(huì)設(shè)計(jì)三種尺寸的圖標(biāo)。
二、圖標(biāo)的尺寸
首先劃重點(diǎn)：圖標(biāo)的尺寸，主要指的是圖標(biāo)在應(yīng)用中占據(jù)的矩形區(qū)域，而不是圖標(biāo)本身圖形的區(qū)域。
我們?cè)谠O(shè)計(jì)具體圖形前，是先通過確定矩形區(qū)域的尺寸，再制作參考線然后進(jìn)行設(shè)計(jì)的。而不是隨意設(shè)計(jì)了圖標(biāo)再對(duì)應(yīng)縮放到指定的位置。
例如，設(shè)計(jì)快速入口時(shí)，一開始我們定義出的這個(gè)組件為分割成兩行四列的矩形塊，即每個(gè)入口的實(shí)際大小。
所以，下面就是我對(duì)矩形尺寸定義的建議：
? 最大：64、56、48
? 中等：44、36、32
? 最?。?8、24、20
注：?jiǎn)挝痪鶠閜t
根據(jù)圖標(biāo)所處區(qū)域的上下間距，從上方挑選合理尺寸即可，過程與字號(hào)設(shè)置是一樣的，這里就不多做演示了。
還需要注意，在一套 App 中，圖標(biāo)出現(xiàn)的尺寸數(shù)盡可能減少，尤其對(duì)于新手，只需要應(yīng)用 2-4 套不同的尺寸即可，否則也會(huì)對(duì)視覺體驗(yàn)帶來明顯的破壞。
最后，就要說說組件的尺寸是怎么設(shè)置了。
首先我們要知道組件是什么，它是一個(gè)包含了控件、文字、圖標(biāo)的功能合集?？梢允且粋€(gè)獨(dú)立的信息展示單元，也可以完成一個(gè)復(fù)雜的操作流，是學(xué)習(xí) App 設(shè)計(jì)中最重要的環(huán)節(jié)。
?
一、組件的尺寸原則
定義組件的長和寬，方式有兩種，一種是根據(jù)外部環(huán)境制定，一種是根據(jù)內(nèi)容調(diào)節(jié)。
第一種，即通過外部的元素來確定組件的尺寸。例如我們要設(shè)計(jì)一個(gè)頭部的 banner 輪播圖組件，以左右可以滾動(dòng)的形式展現(xiàn)。那么首先要確定我們希望輪播圖在屏幕中占多少比例，再確定高度。例如我們覺得大致要有屏幕 1/3 高，那么可以設(shè)定高度為 220pt（664/3），而根據(jù)上下對(duì)齊的原則，左右就由屏幕寬減去左右內(nèi)邊距 16pt 即可。
?
第二種，是根據(jù)我們里面添加的內(nèi)容元素來確定寬和高。例如在首頁輪播圖下方，添加左右滾動(dòng)的卡片，那么我們先設(shè)定里面的控件和文字尺寸，然后再通過添加內(nèi)邊距的形式確定組件的尺寸。
當(dāng)然，也有混合的定義方式，如一開始定好寬，根據(jù)內(nèi)容設(shè)定高，像花瓣瀑布流的卡片，或者定義好高來調(diào)節(jié)寬。具體使用什么形式，就要因地制宜了。
下面會(huì)通過幾個(gè)常見的組件案例，來演示如何定義它們的尺寸。
二、動(dòng)態(tài)卡片
動(dòng)態(tài)卡片是很常用的組件，通常以卡片的形式展現(xiàn)。每條動(dòng)態(tài)通常占據(jù)內(nèi)容區(qū)域的整列，即左右減去制定好的內(nèi)邊距 16pt，那么就是 375-32 = 343 pt 的寬。而高度，就要根據(jù)里面所包含的元素了，如下圖所示。
三、設(shè)置列表
設(shè)置列表中，由高度相同的列表項(xiàng)組成，它們的高和寬應(yīng)該是根據(jù)設(shè)計(jì)的風(fēng)格一開始就制定好，如比較緊湊的風(fēng)格我們采用 48pt 的高，比較寬松的風(fēng)格就采用 64pt 的高。然后我們?cè)倥帕袃?nèi)部的元素，進(jìn)行垂直居中。
四、班次信息
常見的班次信息，我們?cè)诙x它尺寸時(shí)，也是根據(jù)內(nèi)容來考慮的。首先確認(rèn)它是一個(gè)撐滿屏幕的組件即 375pt 寬，再填入對(duì)應(yīng)的字段內(nèi)容。
這時(shí)候可以將上下的內(nèi)容拆分成3個(gè)不同的子模塊：班次、時(shí)間、更多操作，班次和更多操作采用固定高度 44pt 的方式，時(shí)間則根據(jù)內(nèi)容設(shè)置邊距的方式，最后得到的高度的和，就是班次信息組件的高度。
?
五、瓷片區(qū)
主流的瓷片區(qū)，其實(shí)也由若干子模塊組合而成，而如淘寶這類會(huì)有很多瓷片區(qū)并列的狀態(tài)，我們優(yōu)先要考慮的，是每個(gè)瓷片區(qū)在屏幕中的占比，也就是先定義好瓷片區(qū)的高度，再拆分內(nèi)容的子模塊。
例如劃分為兩行的瓷片區(qū)，總高度為 280pt，上方的模塊高度為 180pt，下方的模塊高度為 100pt，里面的元素，再根據(jù)這個(gè)內(nèi)容區(qū)域進(jìn)行排版。
完成一個(gè)完整的組件，是根據(jù)它的內(nèi)容和周圍的環(huán)境決定，我們只要感覺前面幾個(gè)部分所說的參數(shù)設(shè)置進(jìn)行分解，就可以很輕松的定義出組件的實(shí)際尺寸。而無論任何組件，它們都沒有固定的尺寸值，需要大家不斷的練習(xí)掌握制定的思路。之后再設(shè)計(jì)完整的頁面，或整套應(yīng)用時(shí)，就能大大提升效率和設(shè)計(jì)質(zhì)量。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：酸梅干超人。 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.yvirxh.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ì)公司
- 00.基礎(chǔ)原則
- 01.控件尺寸
一、官方規(guī)范
對(duì)于剛開始思考 UI 元素尺寸的新人，通常第一反應(yīng)都是去看官方規(guī)范，新人都以為官方設(shè)計(jì)規(guī)范的作用就是告訴你們?cè)氐拇笮『驮趺丛O(shè)置，只要看完了就能懂得如何設(shè)計(jì) iOS 或 Android 應(yīng)用。而實(shí)際上，這些規(guī)范并不能幫助你們解決這個(gè)問題，因?yàn)樵O(shè)計(jì)規(guī)范涵蓋的內(nèi)容遠(yuǎn)遠(yuǎn)比這些復(fù)雜，比如我們之前翻譯過的 iOS 規(guī)范。
超人的電話亭獨(dú)家譯制 iOS 系統(tǒng)規(guī)范
規(guī)范鏈接：https://pan.baidu.com/share/init?surl=j0dtln14kKdUEfp19jewKQ
密碼：vpkj
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方并不會(huì)提供一個(gè)列表，逐一羅列每個(gè)元素的長寬和其它參數(shù)，所以想要弄明白參數(shù)的問題，要自己在這兩套素材庫中選中元素才能查看其尺寸。如下圖左側(cè)這個(gè)按鈕，我們就能看見它的各項(xiàng)屬性：寬 359pt、高 57pt、圓角 14pt；右側(cè)的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。
因?yàn)?iOS 組件庫下載下來的都是 dmg 格式的文件，很多 windows 用戶不知道該怎么打開它，這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。
在初期，我們想要設(shè)計(jì)出符合官方規(guī)范的界面，就可以嚴(yán)格照搬官方的元素設(shè)置。但是，即使官方的源文件所包含的元素及字體已經(jīng)非常多了，在實(shí)際設(shè)計(jì)過程中，還是會(huì)出現(xiàn)它們無法覆蓋的元素類型，需要依靠我們自己去給出尺寸。
還有如字體的應(yīng)用，官方源文件使用的語言是英文，光是官方應(yīng)用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應(yīng)用面板中密密麻麻的字體類型。在真實(shí)的中文設(shè)計(jì)場(chǎng)景下，我們是不可能照搬這種規(guī)范的！
所以每一個(gè)學(xué)習(xí)UI設(shè)計(jì)的新手，都必須要明白，官方的規(guī)范終究只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無法設(shè)計(jì)出有趣個(gè)性化的界面的，比如下面這幾款已經(jīng)看不到 “ iOS 設(shè)計(jì) ”的應(yīng)用。
官方的參數(shù)決定我們?cè)O(shè)計(jì)的下限，當(dāng)你不知道該怎么做，或者設(shè)計(jì)的目標(biāo)就是以系統(tǒng)原生的體驗(yàn)和視覺為準(zhǔn)，那么照搬就行了！后面文章要說的，就是脫離開這些束縛之后，該怎么自定義 UI 元素的尺寸。
二、尺寸設(shè)置原則
UI 和平面不一樣的地方，就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無論是海報(bào)或畫冊(cè)，使用百分比、目測(cè)的形式就足以讓我們做出很多優(yōu)秀的作品，無需緊盯著其中出現(xiàn)的每個(gè)元素的長寬高的數(shù)值。而 UI 的設(shè)計(jì)中，無論字體、圖標(biāo)還是按鈕，都需要我們嚴(yán)謹(jǐn)?shù)囟x它們的長寬高，如下圖設(shè)計(jì)一個(gè)按鈕的操作：拖拉出矩形之后，我們依然需要到屬性設(shè)置的對(duì)話框中去輸入精確到1pt的數(shù)值。
這么做是因?yàn)樵陔娮悠聊恢?，圖像的呈現(xiàn)是由屏幕中的像素點(diǎn)來完成的，像素點(diǎn)是最小的顯示單位，一個(gè)像素只能顯示一個(gè)顏色，所以如果設(shè)置了帶有小數(shù)點(diǎn)的數(shù)值，那么這個(gè)元素的邊緣就會(huì)虛化。所以為了避免這種情況的出現(xiàn)，我們就得用整數(shù)來定義元素的長和寬。
這當(dāng)中還涉及到不少比較復(fù)雜的屏幕顯示原理問題，尤其是和像素倍率相關(guān)的基礎(chǔ)知識(shí)，我會(huì)在另外的文章里分享。
需要注意的是，文章中出現(xiàn)的所有尺寸數(shù)值的單位，默認(rèn)以 iOS 官方規(guī)定的邏輯像素單位「pt」為準(zhǔn)，即 XD 和 Sketch 默認(rèn)畫布的單位，若在 PS 中設(shè)計(jì)需要在這個(gè)基礎(chǔ)上乘以 2。
只有分隔線，是唯一可以不使用整數(shù)的特例。因?yàn)?1pt 的分隔線看起來會(huì)非常粗，一點(diǎn)也不精致，感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫個(gè)列表然后用 1pt 的線條做分隔，再導(dǎo)出到手機(jī)里觀看效果。即使是官方應(yīng)用，也主要使用 0.5pt 的線條做分隔。
無論是在 iOS 還是在 Android 的規(guī)范中，都提到過使用 8 x 8 的網(wǎng)格做輔助，這導(dǎo)致網(wǎng)上有很多片面的文章會(huì)反復(fù)強(qiáng)調(diào)對(duì)元素的尺寸使用 8 的倍數(shù)。
iOS: 使用 8px 網(wǎng)格系統(tǒng)：網(wǎng)格系統(tǒng)可以讓線條和圖像內(nèi)容在所有尺寸上保持清晰，無需太多的修飾和銳化。將圖形邊界對(duì)齊到網(wǎng)格上，減少按比例縮小圖像時(shí)出現(xiàn)的半像素和內(nèi)容模糊的情況。
Android：所有組件都與間隔為 8dp 的基準(zhǔn)網(wǎng)格對(duì)齊。排版/文字與間隔為 4dp 的基準(zhǔn)網(wǎng)格對(duì)齊。在工具中的圖標(biāo)同樣與間隔為 4dp 的基準(zhǔn)網(wǎng)格對(duì)齊。
實(shí)際上，我們?cè)谡鎸?shí)的設(shè)計(jì)環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24……等，它的好處我會(huì)在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26 等。
以上就是我們一開始要建立的元素尺寸原則，精簡(jiǎn)完即：
使用整數(shù)，只有分隔線可以使用 0.5 的小數(shù)
使用 4 的倍數(shù)，根據(jù)實(shí)際情況可以切換成一般偶數(shù)。
有了這樣的原則，并養(yǎng)成習(xí)慣，我們就能在每次設(shè)計(jì)前對(duì)元素尺寸有個(gè)大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調(diào)整，如下面設(shè)計(jì)注冊(cè)登錄頁面的輸入框作為案例。
開始我使用 280pt 寬，44pt 高的尺寸，但是覺得有點(diǎn)僵硬，太正式了！這時(shí)候反思認(rèn)為應(yīng)該是輸入框太矮導(dǎo)致的，所以高度上改成 44+(4x2)=52pt 。這時(shí)候又覺得太高了，實(shí)際輸入內(nèi)容也沒那么寬，于是再對(duì)高減 4，寬減 40，獲取最終結(jié)果。
所以，因?yàn)檫@樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標(biāo)拖拽出來的（拖動(dòng)效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計(jì)過程就是一個(gè)不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。
這里要聲明，在我的描述體系中，控件指的是：界面中最基本的交互單位，如按鈕、滑塊、開關(guān)、分頁控件等，更復(fù)雜的如動(dòng)態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，我會(huì)根據(jù)前面定義的基礎(chǔ)原則，分別講解控件應(yīng)該使用的尺寸范圍。
一、按鈕 ( Buttons )
按鈕是界面交互操作中使用最頻繁的控件了，當(dāng)然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標(biāo)、卡通形象等等。在這里，我們只聚焦于矩形的基礎(chǔ)按鈕。
在進(jìn)入具體參數(shù)的講解前，要先理解一點(diǎn)，按鈕實(shí)際上是所有控件中最復(fù)雜的一個(gè)。并不是因?yàn)樵谠O(shè)計(jì)樣式上復(fù)雜，而是因?yàn)榘粹o承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。
在上圖里，可以點(diǎn)擊的東西不少，我們只說外觀是標(biāo)準(zhǔn)樣式的按鈕，就有 9 個(gè)。而這里面，權(quán)重最高的必然是 “加入購物車”。權(quán)重最低的，則是前往新品頁。
要定義按鈕尺寸，我們首先需要整理清楚不同的按鈕在界面或整個(gè)應(yīng)用中的權(quán)重。尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然，顏色也是對(duì)重要性表現(xiàn)的關(guān)鍵因素，不過不在這里展開。
按鈕高度
當(dāng)我們?cè)O(shè)計(jì)按鈕時(shí)，優(yōu)先從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權(quán)重，分成高、中、低三類：
- 高權(quán)重：40-56pt
- 中權(quán)重：24-40pt
- 底權(quán)重：12-24pt
高權(quán)重的按鈕，類似登錄頁的注冊(cè)、登錄，購物詳情頁的購買，流程頁中的下一步，它們的最小高度應(yīng)該從 40pt 開始遞增。低于這個(gè)數(shù)值，那么按鈕就很難在頁面中起到視覺支撐的作用，因?yàn)闀?huì)感覺到它太細(xì)了。
中權(quán)重的按鈕，類似個(gè)人主頁的關(guān)注、點(diǎn)贊、評(píng)論按鈕等。這個(gè)層級(jí)的按鈕依舊有比較高的交互頻次，所以我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊得最小尺寸了。這種按鈕通常是組件中的一部分，不像層級(jí)最高的按鈕常常是處于一個(gè)孤立的空間，所以高度如果超出 40pt，就會(huì)對(duì)當(dāng)前模塊產(chǎn)生直觀的破壞。
低權(quán)重的按鈕，就類似查看更多、標(biāo)簽、詳情等類型，相對(duì)于交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形的也有，但就是不能變成縱向的矩形。
按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無視內(nèi)容的長度。因?yàn)樗鼈冃枰嗟膮^(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或橫跨屏幕的，可以特殊處理。
普通按鈕，左右邊界與內(nèi)容的距離過大，就會(huì)讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容的長度來設(shè)置按鈕的寬。左右間距的大小，應(yīng)該小于或等于上下間距的 2 倍。
按鈕圓角
最后，按鈕尺寸還有一個(gè)屬性，就是按鈕的圓角。矩形的四角有三種類型，即直角、圓角和半圓。
為矩形設(shè)置圓角，是為了讓按鈕看起來有一定的圓潤感不會(huì)顯得太尖銳鋒利，這種圓角的數(shù)值要給得更加謹(jǐn)慎，只要超出了一定的范疇，就會(huì)對(duì)視覺的和諧產(chǎn)生影響，我習(xí)慣稱呼為——半圓不圓，如下圖右側(cè)的錯(cuò)誤案例。
所以，我們?cè)谠O(shè)計(jì)圓角的過程中，一定要仔細(xì)感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍，小于等于高度的 1/4。例如，一個(gè) 24pt 的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt。
以上就是按鈕相關(guān)尺寸定義的說明，當(dāng)然，在真實(shí)的設(shè)計(jì)需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
二、輸入框 ( Text Fields )
輸入框也是比較常用的控件之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號(hào)密碼輸入框，以及首頁上方的搜索欄了。
輸入框的高度，常規(guī)在 36-56pt 之間。低于 36pt 時(shí)則輸入框看起來會(huì)非常擁擠，比如我用下面學(xué)生的案例做個(gè)演示。
三、步進(jìn)器 ( Steppers )
常見的步進(jìn)器，就是輸入框和按鈕的結(jié)合。左右有兩個(gè)用來增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28-40pt 之間。下面我再用學(xué)員的作業(yè)做次演示，當(dāng)?shù)陀?28pt 以后，就會(huì)發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。
步進(jìn)器中常見的錯(cuò)誤，是在我們?cè)诶L制左右兩個(gè)按鈕，設(shè)置外框的圓角時(shí)，并沒有合理的去掉內(nèi)側(cè)的圓角，這是絕對(duì)不應(yīng)該忽略的細(xì)節(jié)。
四、下拉菜單 ( Dropdown Menus )
下拉菜單要注意它具有多種狀態(tài)，默認(rèn)、展開和選中。默認(rèn)狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當(dāng)菜單展開后，下方多出來的選項(xiàng)菜單，就值得注意了。
菜單的寬度正常情況下與默認(rèn)狀態(tài)相同，而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)的高度，不大于默認(rèn)的選項(xiàng)框。但也不能過小，新手很容易在彈出菜單中設(shè)定過小的高度，使個(gè)控件看起來會(huì)非常的別扭。
五、開關(guān) ( Switches )
開關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁的列表中，上方就是它主流的幾種樣式。在設(shè)計(jì)開關(guān)的時(shí)候，要先確定一個(gè)矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt，之后再將其他細(xì)節(jié)填入。
六、滑塊 ( Sliders )
滑塊形式接近開關(guān)，通常在中間有一個(gè)操作節(jié)點(diǎn)，下面有一個(gè)用來表示區(qū)間的線條。實(shí)際上我們?cè)撟龅木褪欠謩e決定它們的尺寸。
節(jié)點(diǎn)如果做的太小，不僅會(huì)顯得難看，而且會(huì)讓人覺得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下方的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。
七、頁面指示器 ( Page Controls )
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進(jìn)去，就要讓它看起來和諧。大多數(shù)人在定義指示器時(shí)，不是太大，就是太小。可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會(huì)出錯(cuò)。
指示器主要是圓形和矩形兩種形式：
- 圓形：8、10、12pt ( 直徑 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示紅點(diǎn) ( Badges )
提示紅點(diǎn)也是大多數(shù)應(yīng)用會(huì)使用的一個(gè)控件，它的大小應(yīng)該在 24-32 pt 之間。作為一個(gè)圓形，這個(gè)控件設(shè)計(jì)起來很容易，但設(shè)計(jì)師往往忽略一件事，那就是如果中間的數(shù)值超過 10 變成 2 位以后，要怎么處理。
在設(shè)計(jì)這樣的元素時(shí)，我們要用一個(gè)矩形元素來表現(xiàn)，即畫一個(gè)正方形，然后將圓角設(shè)成最大，那它看上去就是一個(gè)圓形。那么每增加一位字符，我們就需要為這個(gè)矩形增加該字符的寬度，可以用左右間距判斷。
因?yàn)橄嗤痔?hào)下，不同英文、數(shù)字的寬度都是不一樣的，所以我們要根據(jù)實(shí)際輸入的字段長度去決定圓角矩形的寬度。
九、分頁控件 ( Tabs )
后一個(gè)控件，就是分頁控件了，安卓中的 Tabs。這個(gè)元素在設(shè)計(jì)時(shí)也受到排版空間的影響。較為寬松的排版風(fēng)格，高度就比較大，若擁擠則反之。下面是高度的取值：
- 高權(quán)重：40-48pt
- 低權(quán)重：28-36pt
分頁控件主要應(yīng)用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時(shí)候分頁器沒有背景色，但是背景的矩形框是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個(gè)完整的分頁控件，里面會(huì)包含兩個(gè)或以上的選項(xiàng)，所以定義每個(gè)選項(xiàng)的寬是必要的。通常，我們有兩種定義方法，一種是選項(xiàng)少時(shí)，直接進(jìn)行均分顯示，另一種是選項(xiàng)較多，采取定寬模式，寬度最小建議在 64pt以上，才不會(huì)顯得過度擁擠。
分頁控件選項(xiàng)處于選中狀態(tài)時(shí)，有的設(shè)計(jì)是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個(gè)元素如果定義得不好，會(huì)讓整個(gè)控件看起來非常粗糙，它需要在樣式中能起到畫龍點(diǎn)睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都不應(yīng)該大于 2pt。寬度的話，前者和每個(gè)選項(xiàng)背景區(qū)域相等，后者則可以在 8-16pt 間（小于文字總寬）。下面是正確設(shè)計(jì)效果：
十、尾聲
前面說到了不少控件的尺寸，那么真實(shí)應(yīng)用的效果會(huì)如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
可以看到，模塊大小很均衡，看上去不會(huì)覺得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設(shè)計(jì)稿了。
這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會(huì)被設(shè)計(jì)得很奇怪。當(dāng)設(shè)計(jì)師沒有對(duì)于特殊化風(fēng)格設(shè)計(jì)的控制能力時(shí)，就先學(xué)會(huì)正確的使用上面的這些參數(shù)吧。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.yvirxh.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ì)公司
“ 增長是現(xiàn)在業(yè)務(wù)的硬指標(biāo)，大環(huán)境下設(shè)計(jì)師也免不了要背這樣的KPI。 ”
設(shè)想一下這樣的畫面，如果在你的Feeds列表里面推薦的是一些機(jī)械鍵盤和游戲裝備，那作為用戶，會(huì)心想“暈，這些東西又不能讓我變瘦變美，跟我啥關(guān)系？往下翻翻再看看有沒有什么可買的東西”。
2. 商戶信息：品牌標(biāo)簽（比方說品牌、優(yōu)質(zhì)商家等）。商戶信息的透出，對(duì)追求品牌的用戶來說是個(gè)有利的促進(jìn)因素。如下圖中商戶的“品牌”標(biāo)簽。
光有這樣的利益點(diǎn)也還不夠，設(shè)計(jì)師需要做的就是將這些信息進(jìn)行表達(dá)，怎樣表達(dá)？設(shè)計(jì)方案將卡片進(jìn)行結(jié)構(gòu)化和組件化。什么是結(jié)構(gòu)化和組件化？如之前的圖（某平臺(tái)的商品卡片結(jié)構(gòu)）
三、興趣點(diǎn)的試探
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.yvirxh.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ì)公司
在今天的 UI 設(shè)計(jì)領(lǐng)域，由扁平化設(shè)計(jì)風(fēng)格占據(jù)主導(dǎo)地位，已經(jīng)是無可辯駁的事實(shí)了。扁平化應(yīng)用除了提升用戶獲取信息的效率外，對(duì)設(shè)計(jì)師而言就是設(shè)計(jì)的難度大大降低了。
一個(gè)界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標(biāo)、幾何、文字，UI 設(shè)計(jì)師的工作僅僅是對(duì)內(nèi)容進(jìn)行組織和排版，涉及到原創(chuàng)的也僅僅只有少量的圖標(biāo)（大多數(shù)人還畫不好）。
這種狀態(tài)持續(xù)了很多年，看起來歲月一片靜好。
但是，這兩年市場(chǎng)發(fā)出了一些不同的聲音，那就是打破純扁平風(fēng)格的 UI 風(fēng)格、元素開始越來越盛行了。
比如新擬態(tài)風(fēng)格在年初炒了一波熱度，各大平臺(tái)和公眾號(hào)都鋪天蓋地的發(fā)文和介紹，介紹它的設(shè)計(jì)理念和設(shè)計(jì)方法。
還有就是以餓了么、美團(tuán)為首的國民級(jí)應(yīng)用在主頁顯眼的位置里使用極具識(shí)別性的擬物圖標(biāo)，引起設(shè)計(jì)圈的熱議。
首先講講新擬態(tài)設(shè)計(jì)，之所以之前只字不提，是因?yàn)槲覍?duì)這個(gè)風(fēng)格實(shí)在沒什么好感，有種對(duì)純擬物借尸還魂的味道，且它的樣式對(duì)于信息密度高的應(yīng)用是完全不適用的，只能活在飛機(jī)稿里。
而國內(nèi)大型應(yīng)用開始在實(shí)際項(xiàng)目中上線擬物圖標(biāo)，意義就不一樣了，證明這樣的設(shè)計(jì)是經(jīng)過幾個(gè)大廠團(tuán)隊(duì)認(rèn)可，且有共識(shí)的。
當(dāng)然，這并不因?yàn)榇髲S用了就無腦推崇。而是純扁平的設(shè)計(jì)已經(jīng)越來越難滿足部分需要強(qiáng)視覺效果的頁面設(shè)計(jì)了。
今天的互聯(lián)網(wǎng)和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個(gè)產(chǎn)品只要認(rèn)真打磨體驗(yàn)、功能就能獲得用戶的青睞和駐留。用戶的精力時(shí)間是固定的，而互聯(lián)網(wǎng)產(chǎn)品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現(xiàn)狀也被稱為互聯(lián)網(wǎng)的下半場(chǎng)。
佛系不行，當(dāng)舔狗更不行（成本太高），所以今天大型產(chǎn)品都在對(duì)待用戶的態(tài)度都選擇更具更具侵略性的霸道總裁人設(shè)。不僅是用色飽和度越來越高，運(yùn)營活動(dòng)越來越密集，廣告和強(qiáng)提示也越來越多。比如剛打開了三個(gè)應(yīng)用，進(jìn)入的首頁大家自己意會(huì)……
有點(diǎn)扯遠(yuǎn)了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡(jiǎn)風(fēng)就不會(huì)合適。當(dāng)對(duì)扁平的視覺效果已經(jīng)開發(fā)到極限以后，那么進(jìn)一步在一些細(xì)節(jié)處應(yīng)用擬物就成為必然的選擇。
而擬物的應(yīng)用并不可能鋪設(shè)到整個(gè)應(yīng)用中去，因?yàn)橥耆珨M物化的設(shè)計(jì)降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強(qiáng)化，來加強(qiáng)用戶對(duì)特定區(qū)域的感知。
最常見的需要被凸出的要素，就是首頁中應(yīng)用的快速入口圖標(biāo)、分類圖標(biāo)和底部導(dǎo)航欄圖標(biāo)了。這些區(qū)域長期受運(yùn)營活動(dòng)支配，相信大家已經(jīng)很習(xí)慣了。
只是，這些圖標(biāo)開始在脫離運(yùn)營活動(dòng)的狀態(tài)下，也開始使用非扁平模式，那就不再是運(yùn)營設(shè)計(jì)師的工作職責(zé)，而是 UI 設(shè)計(jì)師們繞不過去的檻了（知識(shí)盲區(qū)）！
且除了 APP 外，其它領(lǐng)域?qū)τ跀M物設(shè)計(jì)的需求也會(huì)開始逐漸提升，尤其是目前越來越復(fù)（fu）雜（kua）的大屏數(shù)據(jù)展示、車載界面、定制系統(tǒng)等等。
作為新世代的 UI 設(shè)計(jì)師，多數(shù)人對(duì)擬物的設(shè)計(jì)可以說是完全空白的狀態(tài)，所以是時(shí)候要重拾擬物設(shè)計(jì)這個(gè)傳統(tǒng)藝能了。
前面我有提到，擬物主要應(yīng)用在關(guān)鍵的圖標(biāo)上，但應(yīng)用的擬物風(fēng)格并不是過去我們追求的那種極其真實(shí)、復(fù)雜的擬物，而是經(jīng)過一定簡(jiǎn)化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。
首先我們看看，過去優(yōu)秀的擬物圖標(biāo)和設(shè)計(jì)案例，它不僅表現(xiàn)元素本身的光影、透視、構(gòu)造，甚至?xí)浅Ｍ暾谋憩F(xiàn)物體表面的材質(zhì)和肌理。
這種圖標(biāo)單看起來確實(shí)很好看、細(xì)致。但是，把它丟進(jìn)我們當(dāng)前的頁面中是非常違和的，因?yàn)樗鼈兗?xì)節(jié)實(shí)在太多了，而且畫起來非常耗時(shí)間，不利于項(xiàng)目整體的推進(jìn)。
所以為了符合畫面的質(zhì)感，又要考慮項(xiàng)目效率，輕擬物這個(gè)概念開始被提出和應(yīng)用，作為一個(gè)折中的解決方案。
它和純擬物設(shè)計(jì)的共同點(diǎn)在于，也表現(xiàn)光影、結(jié)構(gòu)、透視，但它盡可能精簡(jiǎn)了輪廓的復(fù)雜度、肌理和層級(jí)，呈現(xiàn)出更概念化、理想化、易于辨識(shí)的擬物圖形。
所以，我們主要去學(xué)習(xí)的內(nèi)容是輕擬物的設(shè)計(jì)方法，而不是徒手畫照片（這個(gè)可以緩緩）！
而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實(shí)體質(zhì)感的。但是扁平從插畫到圖標(biāo)設(shè)計(jì)經(jīng)過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設(shè)計(jì)，應(yīng)用大量的漸變、投影、模糊的效果，比如下圖案例。
這在我們之前圖標(biāo)的系列干貨中有提過，這類設(shè)計(jì)是面性圖標(biāo)的進(jìn)階版，它們依舊屬于扁平風(fēng)格的范疇之內(nèi)，不能和輕擬物劃上等號(hào)。
對(duì)于這幾年才開始學(xué)習(xí) UI 設(shè)計(jì)的新手來講，擬物已經(jīng)變成一個(gè)很陌生的事物，這對(duì)行業(yè)來說是比較悲哀的一件事。
因?yàn)閿M物的設(shè)計(jì)不僅僅是畫圖標(biāo)而已，對(duì)它的學(xué)習(xí)可以全方位的提升設(shè)計(jì)師的基礎(chǔ)素養(yǎng)，不僅包括對(duì)傳統(tǒng)美術(shù)（結(jié)構(gòu)、光影、色彩、透視）知識(shí)點(diǎn)的剖析，還包含對(duì) PS 使用的深入探索。
可以說，自從擬物不成為必修題材以后，九成以上的UI設(shè)計(jì)師是不會(huì)用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。
輕擬物本身也是擬物，所以它的核心基礎(chǔ)和擬物設(shè)計(jì)師一致的，只是省略了更多復(fù)雜的細(xì)節(jié)。而對(duì)于整個(gè)擬物的體系來講，最重要的東西實(shí)際上只有2個(gè)，形體、光影。
形體的表現(xiàn)，就是對(duì)圖形外輪廓的樣式的呈現(xiàn)。在過去我們寫的圖標(biāo)分享中，有寫過面性圖標(biāo)進(jìn)階的設(shè)計(jì)中，可以包含更多的細(xì)節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。
輕擬物的形體設(shè)計(jì)就要處于進(jìn)階面性圖標(biāo)或者更難的水平之上，即你要把這個(gè)圖形的內(nèi)容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點(diǎn)評(píng)的快速入口圖標(biāo)，雖然看起來很復(fù)雜，但是那是配色上的復(fù)雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風(fēng)格圖標(biāo)，不能表現(xiàn)得太抽象，也不能增加過多的細(xì)節(jié)，需要一種恰到好處的平衡（玄學(xué)），這就非?？简?yàn)設(shè)計(jì)師的判斷和經(jīng)驗(yàn)了。
并且，在描繪輪廓的時(shí)候，新手盡可能的采取正視圖來進(jìn)行繪制，而不要通過俯視圖、側(cè)視圖、斜視圖等方法來呈現(xiàn)圖形的多個(gè)面，這樣難度會(huì)大幅度上升，比如下面這種情況。
除了形體外，光影就是整個(gè)擬物的靈魂了。
當(dāng)一個(gè)完整的圖形完成填充色時(shí)，它是扁平圖案，如果完成光影呈現(xiàn)的時(shí)候，它就是三維空間的立體圖形，比如下面這個(gè)圓的案例：
在擬物的設(shè)計(jì)中，我們對(duì)光影的定義是至關(guān)重要的，所以首先就是針對(duì)該圖形確定光源的方向，是上方、前方、左上還右上，這對(duì)后續(xù)的設(shè)計(jì)有一連串的影響。
如果對(duì)光影沒有正確的解釋，那么在制作細(xì)節(jié)的漸變角度、投影的使用上，就會(huì)產(chǎn)生錯(cuò)誤的設(shè)計(jì)，造成光影視覺沖突和矛盾。
在創(chuàng)建了光源以后，物體受到光線的影響就會(huì)產(chǎn)生明暗面和投影，可以簡(jiǎn)單劃分成4個(gè)部分，高光、亮部、暗部、投影。
這和我們學(xué)習(xí)的素描有一定的差異，美術(shù)中對(duì)光影的表現(xiàn)害會(huì)包含明暗交界、反光面，這對(duì)于輕擬物的來說負(fù)擔(dān)太重，所以我們要去掉它們，接下來重點(diǎn)講講高光和暗部。
高光是物體作為受光物對(duì)光源的直接反映，比如人像攝影中人眼眸中的高光就是對(duì)閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長期存在的高光配飾（多數(shù)動(dòng)畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對(duì)比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因?yàn)椴辉谑芄饷?，所以顏色?huì)變暗。在實(shí)際操作過程中，我們可以通過漸變的方式開控制明暗的表達(dá)，但盡量不要直接手動(dòng)設(shè)置一個(gè)漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個(gè)特性以后，下面，我們就通過一個(gè)實(shí)例來講解一下輕擬物設(shè)計(jì)的過程吧。
作為輕擬物的演示，直接畫個(gè)圖標(biāo)講一遍怎么操作是沒什么用的，我們要從實(shí)際場(chǎng)景出發(fā)，用它來解決一些真實(shí)的問題。比如看看下面的 KFC 官方 APP 首頁：
總結(jié)它的問題，不難發(fā)現(xiàn)首頁頂部業(yè)務(wù)功能太多了，頂部圖標(biāo)就包含30個(gè)（加滑動(dòng)的），雖然每個(gè)模塊圖標(biāo)單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級(jí)和對(duì)比性。
我們要做的，就是通過輕擬物的方式，調(diào)整快速入口最大的三個(gè)圖標(biāo)，凸顯它們的重要性以及和其它圖標(biāo)的視覺差異性。先從第一個(gè)圖標(biāo)開始，講解一下如何完成輕擬物化設(shè)計(jì)的升級(jí)。
第一步：確認(rèn)輪廓造型
第一個(gè)操作，即確定圖標(biāo)本身的輪廓。根據(jù)原有圖標(biāo)的樣式我做了一些改動(dòng)，包括加粗車頭，減少高度，增加車燈等。并對(duì)每一個(gè)模塊進(jìn)行純色的填充，定義它們的色彩和做出區(qū)分。
形體的重要性在于要對(duì)圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達(dá)意。
第二步：完善圖形細(xì)節(jié)
這一步，就要在原有基礎(chǔ)上，進(jìn)行下一步的深入。包括對(duì)一些細(xì)節(jié)交代得更清楚一點(diǎn)，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎(chǔ)的暗部表現(xiàn)
在這里，我們就要開始為圖標(biāo)增加高光了，高光從右上角打下來，那么有疊加關(guān)系的元素就會(huì)產(chǎn)生一個(gè)向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強(qiáng)。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創(chuàng)建一個(gè)圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對(duì)暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，講整個(gè)圖標(biāo)的質(zhì)感進(jìn)行拉升，
通過上面的演示，我們可以將整個(gè)擬物設(shè)計(jì)流程精簡(jiǎn)成：
1.確定圖形基本輪廓、外形比例、模塊色彩
2.豐富細(xì)節(jié)樣式增加趣味性和適當(dāng)?shù)臄M真感
3.通過蒙版添加暗部來完善表現(xiàn)的明暗和層級(jí)關(guān)系
4.添加高光元素作為圖形的亮點(diǎn)，拉升層次感
然后，通過這樣的步驟，再來完成后續(xù)的兩個(gè)圖形，拆解完的效果如下。
然后，再用這三個(gè)修改后圖標(biāo)套用進(jìn)原來的頁面，并做出對(duì)應(yīng)的修改，再來看看前后對(duì)比：
通過這個(gè)對(duì)比，我們就可以看出在這個(gè)復(fù)雜的首頁頭部中，輕擬物風(fēng)格可以從一眾平面中被凸顯出來，且不會(huì)顯得太突兀和復(fù)雜。
而這就是輕擬物在項(xiàng)目設(shè)計(jì)中的實(shí)際作用，當(dāng)畫面元素已經(jīng)開始超負(fù)荷，且容易導(dǎo)致同質(zhì)化的審美疲勞和主次不清時(shí)，就是輕擬物登場(chǎng)的時(shí)候了。
最后的總結(jié)，學(xué)習(xí)輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創(chuàng)意增加一些儲(chǔ)備彈藥，以應(yīng)對(duì)越來越復(fù)雜的互聯(lián)網(wǎng)產(chǎn)品和職業(yè)要求。
我們只在這篇羅列了制作的順序和思路，并沒有把軟件的操作完全放出來，一方面是因?yàn)闀r(shí)間上來不及（偷懶），另一方面是希望大家不會(huì)被軟件的使用框柱。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.yvirxh.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ì)公司
從平面到屏幕，CMYK 到 RGB，墨點(diǎn)到像素，色彩越來越豐富，形式越來越復(fù)雜。而 UI 的發(fā)展從擬物的繁瑣細(xì)節(jié)中掙脫出來，卻在色彩的展現(xiàn)中放飛了自我。
零售業(yè)有個(gè)有趣的研究成果 —— “七秒鐘定律”：人們?cè)谔暨x商品和服務(wù)時(shí) ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。
要在小小的手機(jī)屏幕中加入這么多顏色，并保持其中的聯(lián)系和邏輯，著實(shí)不易。如果你還對(duì)配色一無所知，完全不知道配色應(yīng)該怎么入手，那么你需要了解一下，我?guī)啄杲?jīng)驗(yàn)總結(jié)的配色思路。
無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：
雖然是不同的應(yīng)用，但是這個(gè)拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應(yīng)用邏輯。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。
HSB 是色彩科學(xué)中對(duì)所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉(zhuǎn)化，且 HSB 的選色邏輯更清晰、簡(jiǎn)潔、干練。
因?yàn)橐粋€(gè)正確的選色過程，是先確定出色相，然后再在這個(gè)色相維度下選出明度和飽和度，所以我們首先要關(guān)注色相選擇條。
細(xì)心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是紅色，那是因?yàn)樯嗟男蛄惺且粋€(gè)首尾相接的環(huán)形模式，所以它實(shí)際上就是色環(huán)的柱狀展示圖，應(yīng)用起來和色環(huán)沒有實(shí)際區(qū)別。
接下來就要說到重點(diǎn)，飽和度和明度選擇區(qū)，我自己使用的習(xí)慣，是將這個(gè)選擇區(qū)通過黃金三分法的方式切割成等比的 9 個(gè)區(qū)域，然后明確它們?cè)?UI 中的對(duì)應(yīng)情緒和應(yīng)用場(chǎng)景。
在過去的大量分析中，互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會(huì)往右上角聚集，一些次要、不可點(diǎn)的色彩聚集在中上方，而文字背景色則聚集在左側(cè)，無人區(qū)則是我們重點(diǎn)避開的對(duì)象。
下面我們分析幾個(gè)案例，看看它們?cè)谶@個(gè)選擇區(qū)中的色彩分布情況：
大家也可以自己拿一些主流的應(yīng)用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會(huì)得到基本一致的結(jié)果。牢記這 9 個(gè)區(qū)域的場(chǎng)景劃分，可以幫助我們非常高效、安全地完成 UI 配色。
在眾多的 UI 設(shè)計(jì)規(guī)范中，色彩部分的介紹，都必然包含三種類型，分別是：
主色：應(yīng)用的核心色彩，品牌色
輔色：豐富頁面視覺和傳達(dá)效果的次要顏色
中性：沒有色相的文字、背景用色
主色是一個(gè)應(yīng)用的最核心的色彩，品牌的象征色，比如想到餓了么的藍(lán)色、微信的綠色、京東的紅色、淘寶的橙色。
確定主色，并沒有大家想象的那么復(fù)雜，它的要點(diǎn)在于 —— 你想讓用戶感受到哪種情緒，然后通過情緒關(guān)聯(lián)一個(gè)大致的色彩范圍，再進(jìn)行微調(diào)。
在今天的互聯(lián)網(wǎng)產(chǎn)品中，主色的應(yīng)用選擇范圍在拾色器區(qū)域的右上角，前面已經(jīng)有解釋了。這和平面設(shè)計(jì)中的用色有非常大的不同。
移動(dòng)端產(chǎn)品要在一個(gè)方寸大的空間中爭(zhēng)奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調(diào)是無法實(shí)現(xiàn)這個(gè)目標(biāo)的，所以今天主色飽和度越來越極致，比如我們之前整理的，發(fā)在站酷的一篇總結(jié)：
再加上屏幕的 RGB 顯示特性，高對(duì)比度，高動(dòng)態(tài)范圍的特質(zhì)能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區(qū)域選出合適的色值。
輔助色是豐富應(yīng)用中的次要色彩，它會(huì)包含一到若干個(gè)和主色不同的色彩，除了品牌傳達(dá)外，具有更強(qiáng)的實(shí)用性。
前面我們提到過色環(huán)，這里就要派上用場(chǎng)了。我們知道色環(huán)是個(gè)色彩序列首尾相連的環(huán)形模型，它蘊(yùn)含一個(gè)最樸素的原則，即兩個(gè)顏色在這個(gè)環(huán)形中角度越大，那么視覺差異性越大，對(duì)比越強(qiáng)，比如下圖的展示：
這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個(gè)色彩對(duì)比度的判斷標(biāo)準(zhǔn)。而真正輔助色的選擇，是根據(jù)實(shí)際場(chǎng)景的功能決定的。
比如通知、提醒、取消用大紅色，確認(rèn)、同意用綠色或者藍(lán)色，收藏、打分、評(píng)價(jià)用橙黃色。都是已經(jīng)在用戶心智中建立了標(biāo)準(zhǔn)的用色類型，跟著常規(guī)方法來做，是沒有其它思路的情況下最簡(jiǎn)單、最安全的輔助色選擇方式。
沒有標(biāo)準(zhǔn)元素用色的情況下，再考慮應(yīng)用色環(huán)的 “角度原則”，越需要被突出的顏色，可以在色環(huán)中離主色越遠(yuǎn)，越不需要被突出的則越近。
比如下方攜程的案例，主色在藍(lán)色的情況下，支付、保險(xiǎn)金標(biāo)簽這些需要被重點(diǎn)突出的色彩，使用了主色的互補(bǔ)色， 讓我們一眼就能看見并產(chǎn)生強(qiáng)烈的操作欲望。
中性色，是頁面中文字、背景用到的顏色，它們承擔(dān)起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺得中性色無關(guān)緊要，實(shí)際情況恰恰相反。
主色輔助色決定了界面視覺是否出彩，而中性色的應(yīng)用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應(yīng)該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁面和進(jìn)行使用也不會(huì)有絲毫的障礙。
中性色的配置，就是制定一個(gè)由深到淺的灰度階梯，應(yīng)用在對(duì)應(yīng)權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。
中性色雖然指的是無個(gè)性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍(lán)色飽和度，提升觀看體驗(yàn)（滿足 RGB 的某種特性）。
這種做法，顏色越淺的時(shí)候飽和度應(yīng)用色值就越低，將這個(gè)規(guī)律在拾色器中進(jìn)行表現(xiàn)，那么我們就可以得到一個(gè) L 型曲線，我稱它為 “中性曲線”。
掌握對(duì)于主色、輔助色、中性色的選擇方法，那么對(duì)于 UI 配色的奧義來說，你已經(jīng)掌握了一半，接下來就要了解更具體的實(shí)踐思路了。
配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學(xué)和理論，卻很少關(guān)心它們應(yīng)用如何應(yīng)用，如何配置。
所以，我根據(jù)主色和輔助色應(yīng)用總結(jié)了一個(gè)配色的四象限表格，在分別看看它們對(duì)應(yīng)的案例：
主色會(huì)作為頂部標(biāo)題欄或其它重要模塊中的背景色，進(jìn)行大面積應(yīng)用，加深用戶對(duì)品牌的認(rèn)知和辨識(shí)度。而產(chǎn)品中又包含了大量功能和服務(wù)，需要用豐富的色彩來進(jìn)行暗示，吸引用戶關(guān)注。
這類配色中，主色的應(yīng)用占比也大，出現(xiàn)頻率高，鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中，或者是相對(duì)正式、品牌感強(qiáng)的應(yīng)用。
這是多數(shù)主流應(yīng)用的趨勢(shì)，降低主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自身帶有的服務(wù)和功能。
通常，會(huì)應(yīng)用這種方式是因?yàn)楫a(chǎn)品的服務(wù)是相對(duì)單一，但也需要用戶投入注意力的應(yīng)用，設(shè)計(jì)師就會(huì)盡力避免給予用戶過多的干擾。
每次在進(jìn)行配色的時(shí)候，我們都需要對(duì)自己要應(yīng)用哪種配色應(yīng)用方式做出規(guī)劃，然后再動(dòng)手執(zhí)行。有了這個(gè)目標(biāo)，后面在整個(gè)項(xiàng)目的設(shè)計(jì)中的配色步驟就是水到渠成的事情了。
在實(shí)踐前，我們要簡(jiǎn)單講講一個(gè)應(yīng)用或者界面的標(biāo)準(zhǔn)配色的流程了，流程順序如下：
具體應(yīng)該怎么使用這套流程，我們用一個(gè)圖蟲 APP 改版的案例來做演示，首先從四象限中的第一個(gè)主色占比高、色彩豐富度高的類型做起。
原型是 UI 設(shè)計(jì)的基本藝能了，在開始具體設(shè)計(jì)、配色前，搭建頁面的框架原型是一個(gè)必備的條件，下面，是我們已經(jīng)準(zhǔn)備好的原型案例。
然后，我們確定以橙色作為應(yīng)用主色，并在拾色器中進(jìn)行確認(rèn)。
有了主色，就可以對(duì)頁面進(jìn)行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標(biāo)題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。
接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現(xiàn)模塊層級(jí)，文字信息的權(quán)重。
最后，就是添加輔助色和其它色彩的元素了，這個(gè)步驟建議都是放在最后一步操作。因?yàn)樯试截S富，越難控制，容易讓整個(gè)畫面顯得雜亂無序，所以先完成基礎(chǔ)搭建，可以更好的幫助我們判斷彩色的使用是否合理。
下面，我們使用彩色的金剛區(qū)圖標(biāo)，然后將用戶關(guān)注、認(rèn)證用戶、標(biāo)簽等元素使用其它色彩，來豐富頁面的色彩內(nèi)容。
根據(jù)第一個(gè)方案，我們可以再用這個(gè)原型來實(shí)現(xiàn)其余的三個(gè)方案的配色。
比如下面的主色占比大，但是色彩豐富度低的。因?yàn)橐呀?jīng)不太應(yīng)用其它輔助色，所以主色填充上我們不再填充頂部導(dǎo)航欄的背景，而是將更多元素應(yīng)用主色，減少輔助色數(shù)量。
然后是主色占比小，色彩豐富度高的方案，進(jìn)一步降低主色應(yīng)用的比例，然后在金剛區(qū)、標(biāo)簽等處使用較為豐富的配色。
最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。
根據(jù)四種不同的配色方案，我們就可以得到四種不同的配色結(jié)果和風(fēng)格，在每次設(shè)計(jì)開始實(shí)施前，我們都可以根據(jù)這種做法來做嘗試，并選出自己滿意的方案。
要再次強(qiáng)調(diào)，UI 配色是極其強(qiáng)調(diào)形式的應(yīng)用科學(xué)，最后做的往往會(huì)和一開始想的效果有極大出入，所以需要我們有幾個(gè)備選方案，可以隨時(shí)進(jìn)行調(diào)整，并選出合理的那個(gè)。
以上是我們關(guān)于配色有關(guān)知識(shí)點(diǎn)的分享，希望可以幫助大家提升對(duì) UI 配色的認(rèn)識(shí)。
最后放一張阿瑪尼的配色格言，我們下一篇再賤！
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.yvirxh.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ì)公司
01、騰訊視頻，色覺障礙優(yōu)化
騰訊視頻在播放視頻時(shí)可以通過輔助功能調(diào)節(jié)色覺障礙優(yōu)化，針對(duì)色覺障礙的用戶提供了相應(yīng)色彩畫面的選擇。通過優(yōu)化視頻色彩來提高畫面辨識(shí)度，更加人性化的照顧更多用戶群體。
代代 摘錄
02、騰訊視頻，重回后繼續(xù)播放的小細(xì)節(jié)
當(dāng)用戶觀影過程中需要暫停退出當(dāng)前窗口，當(dāng)重新切換回來時(shí)，視頻播放進(jìn)度會(huì)自動(dòng)調(diào)節(jié)到暫停前 3-5 秒。這樣的處理可以讓用戶可以更好的對(duì)劇情進(jìn)行重新銜接，延續(xù)離開時(shí)的記憶，非常人性化的細(xì)節(jié)處理。
代代 摘錄
03、高德地圖十一期間不一樣
高德地圖節(jié)日期間在左上角新增了“景區(qū)隨身聽”服務(wù)，打造千人千面的全新語音導(dǎo)覽體驗(yàn)，首批覆蓋全國逾500個(gè)熱門景區(qū)，為高德用戶帶來不一樣的十一假期體驗(yàn)。
黑馬青年 摘錄
04、剪映，拖動(dòng)試聽音樂有助于選擇
剪映在添加音樂時(shí)，可以通過拖動(dòng)音頻來快速試聽該音樂，快速跳過緩慢的前奏部分，直接試聽音樂高潮部分。根據(jù)當(dāng)前素材選擇最適合的高潮部分配音，可以節(jié)省用戶選擇配音的時(shí)間。
Liaju 摘錄
05、高德地圖，截圖生成長圖
搜索好目的地之后如果選擇公交地鐵出行，為了防止可能由于網(wǎng)絡(luò)不佳等因素不能及時(shí)查看交通信息，可通過截圖功能，保存完整的路線指引圖。保存圖片后可在相冊(cè)中查看長圖，也方便分享給好友，非常人性化。
疏晶晶 摘錄
06、企鵝 FM，左滑到底直接刪除收聽記錄
企鵝 FM 最近收聽記錄中，不僅可以左滑配合點(diǎn)擊刪除，還可以左滑到底直接刪除當(dāng)前操作內(nèi)容。
許文娟 摘錄
07、攜程旅行語音導(dǎo)覽
在攜程旅行 APP 中，針對(duì)部分景點(diǎn)介紹有設(shè)置語音導(dǎo)覽的功能，初次體驗(yàn)?zāi)憧梢赃x擇該旅游景區(qū)的三個(gè)景點(diǎn)進(jìn)行試聽。對(duì)于很多游客來說只是看風(fēng)景，如果不了解景點(diǎn)背后的故事，是很難有代入感的，這個(gè)功能可以讓你對(duì)景點(diǎn)有個(gè)初步認(rèn)知。
黑馬青年 摘錄
08、微信讀書，想看啥搖一搖
微信讀書，搖一搖！它會(huì)根據(jù)用戶的閱讀記錄推薦類似的書籍。當(dāng)用戶不知道看什么書的時(shí)候就搖一搖，以有趣的交互解決用戶選擇困難癥。
代代 摘錄
09、bilibili 漫畫跨頁拼貼閱讀
一般的漫畫都是在一頁之中進(jìn)行分鏡，在手機(jī)上閱讀時(shí)不會(huì)有什么障礙，但是當(dāng)出現(xiàn)一些比較大的跨頁插畫時(shí)，手機(jī)上的觀看體驗(yàn)就不是那么友好。而當(dāng)出現(xiàn)跨頁時(shí)，bilibili 漫畫可以通過向下滑動(dòng)來進(jìn)行拼頁，將跨頁拼成一頁來進(jìn)行觀看，優(yōu)化了閱讀體驗(yàn)。
住住 摘錄
10、叮咚買菜購物車領(lǐng)券激活用戶購買欲
隨著生活方式的不斷變化，現(xiàn)在買菜這樣的家常小事都可以服務(wù)到家。
最近在體驗(yàn)叮咚買菜 App 的時(shí)候，發(fā)現(xiàn)購物車頂部會(huì)有領(lǐng)券提示，通過滿減、優(yōu)惠券等形式可以更快的激活用戶購買欲?？諣顟B(tài)的購物車可以激活用戶進(jìn)行商品添加，已選擇商品后會(huì)看到滿減提示，激活用戶選擇更多的商品達(dá)到滿減權(quán)限，一舉多得。
黑馬青年 摘錄
11、微博動(dòng)漫，不一樣的性別設(shè)置
點(diǎn)擊右上角的男生/女生頭像便可直接替換角色，區(qū)別于常見的輸入形式，簡(jiǎn)化用戶操作步驟，并且推送內(nèi)容會(huì)根據(jù)用戶性別進(jìn)行差異化推送。
Cherry 摘錄
12、記賬城市，游戲化記賬玩法
對(duì)于我們這一代的年輕人來說能堅(jiān)持記賬的估計(jì)相對(duì)較少，一些互聯(lián)產(chǎn)品的引入相對(duì)可以激活這一部分人群。最近體驗(yàn)的記賬城市讓我影響深刻，將游戲化的場(chǎng)景引入產(chǎn)品設(shè)計(jì)中，你記錄一次就相當(dāng)于為自己的虛擬城市進(jìn)行一次基建，帶入了幾分趣味性。
也可以點(diǎn)擊拍攝圖標(biāo)進(jìn)行照片記錄，調(diào)整好需要展示的城市場(chǎng)景，點(diǎn)擊拍攝時(shí)模擬了類似拍立得形式的照片打印。整個(gè)體驗(yàn)不僅年輕化、游戲化，也結(jié)合了趣味性，在細(xì)節(jié)的處理上面也非常到位。
黑馬青年 摘錄
13、美圖秀秀以營銷思路引導(dǎo)登錄
通常訪問個(gè)人中心都需要用戶登錄賬戶，如何引導(dǎo)用戶創(chuàng)建賬戶是產(chǎn)品不斷思考的問題。美圖秀秀以紅包微動(dòng)效替換默認(rèn)頭像，以登錄領(lǐng)紅包引導(dǎo)用戶創(chuàng)建賬戶，也算是一種不錯(cuò)的以營銷思路作為引導(dǎo)的方式。
黑馬青年 摘錄
14、骨骼，繪畫人的熱愛
很喜歡這款解析人體結(jié)構(gòu)的 App，設(shè)計(jì)很大膽，有個(gè)性。點(diǎn)擊右上角“顯示插針”會(huì)顯示插針在某個(gè)部位，點(diǎn)擊插針還能出現(xiàn)對(duì)這個(gè)部位的解釋。還能對(duì)骨骼進(jìn)行360旋轉(zhuǎn)，深入解剖每個(gè)部位。
功能操作控件放在上下左右四個(gè)角，內(nèi)容的布局打破常規(guī)設(shè)計(jì)，左下角的“滑輪”操作，當(dāng)你滑動(dòng)時(shí)就會(huì)在“顯示界面”跟“隱藏界面”之間切換。
Liaju 摘錄
15、Keep 不一樣的任務(wù)設(shè)置
Keep 的任務(wù)設(shè)置采用 H5 的形式，區(qū)別于其他大眾的常規(guī)任務(wù)形式。沒人喜歡做任務(wù)，用講故事的方式去設(shè)置任務(wù)關(guān)卡，會(huì)增加用戶的參與度。
“卡路里工廠”在取名上就增加了不少趣味性與點(diǎn)擊欲望，進(jìn)入“卡路里工廠”界面用星球、星空等元素設(shè)計(jì)，畫面具有神秘感，讓用戶覺得是在探索星球中完成任務(wù)。結(jié)合游戲化的形式更有趣味性，因而提升用戶參與度。
Liaju 摘錄
16、音兔，音樂智能推薦
音兔 App 在進(jìn)行圖片和視頻編輯時(shí)，音樂的類型會(huì)根據(jù)圖片和視頻的內(nèi)容進(jìn)行推薦，如發(fā)的風(fēng)景照就會(huì)推薦旅行相關(guān)的音樂，發(fā)的貓咪照片就會(huì)推薦貓奴的音樂，方便用戶在進(jìn)行圖片和視頻編輯時(shí)更快捷的選到適合的音樂。
Xindy 摘錄
17、微信讀書滑到頭還能無限場(chǎng)
卡片式滑動(dòng)翻頁現(xiàn)在非常普及，起點(diǎn)通常是無法滑動(dòng)的，但是微信讀書打破了你的思維局限。在開始時(shí)允許你向右滑動(dòng)，此時(shí)便可進(jìn)入無限場(chǎng)，帶給你不一樣的互動(dòng)體驗(yàn)。
黑馬青年 摘錄
18、招商銀行雙重刷新相結(jié)合
招商銀行 App 進(jìn)入社區(qū)狀態(tài)下 icon 變?yōu)樗⑿聵邮?，可以手?shì)下拉進(jìn)行刷新，也可以點(diǎn)擊 icon 進(jìn)行刷新，操作更加便捷。
Cherry 摘錄
19、網(wǎng)易云音樂，生日祝福
生日那天，網(wǎng)易云音樂的每日推薦圖標(biāo)會(huì)變成一個(gè)蛋糕圖形，每日推薦的第一首歌是「祝你生日快樂」。這些小細(xì)節(jié)是不是很暖心呢，反正我是被俘獲了。（Android Version 6.3.2）
無休 摘錄
20、Space FM 通過音樂交友
Space FM 模擬宇宙太空，把每個(gè)用戶比作一個(gè)宇航員，宇航員添加喜歡的歌曲，形成自己的音樂星球；宇航員可以帶著自己的星球在太空漫游，每隔30秒匹配新的宇航員，如果雙方都停留下來，可以聽對(duì)方的歌曲，還可以打招呼、聊天，聊得來可以收聽對(duì)方的音樂，即可私聊。
以太空星辰為動(dòng)態(tài)背景，播放著自己喜歡的歌，營造了一個(gè)輕松的氛圍。在與陌生人打招呼，有了音樂為話題引子，不會(huì)顯得唐突尷尬。
無休 摘錄
21、貓耳 FM 的閃屏啟動(dòng)音
貓耳 FM 增加啟動(dòng)音的設(shè)置，區(qū)別于傳統(tǒng) App 閃屏啟動(dòng)，加入聲音的閃屏啟動(dòng)音更增趣味性。推薦的啟動(dòng)音也非常符合產(chǎn)品二次元的調(diào)性，讓用戶在進(jìn)入 App 時(shí)有聲優(yōu)體驗(yàn)的沉浸感受，每一次的打開都是一次驚喜的體驗(yàn)。
“歡迎回來，主人”、“早安，大小姐”…等聲音錄制來自不同動(dòng)漫的經(jīng)典重現(xiàn)，能抓住一部分特定用戶人群的喜愛，也是非常棒的運(yùn)營策略。
老白 摘錄
22、京東商城添加活動(dòng)日歷功能
京東商城在首頁添加了活動(dòng)日歷的功能，用戶可以了解到未來一周的優(yōu)惠促銷活動(dòng)?？商砑踊顒?dòng)提醒，這樣用戶就不會(huì)錯(cuò)過好的優(yōu)惠活動(dòng)，同時(shí)也提高了平臺(tái)的轉(zhuǎn)化率。
逆光 摘錄
23、騰訊視頻，播放短視頻中推薦正片
觀看短視頻的時(shí)候，播放大概 5 秒左右，視頻下方標(biāo)題欄會(huì)變成正片內(nèi)容導(dǎo)航，避免用戶找影視名字的繁瑣，既能滿足用戶需要，又能增加產(chǎn)品需求。
皓月長歌 摘錄
24、酷狗音樂，透視立體翻頁設(shè)計(jì)
酷狗音樂歌單頁，頭部推薦歌單采用透視立體翻頁效果呈現(xiàn)，增強(qiáng)視覺畫面感，主體內(nèi)容更突出，也區(qū)別于平鋪卡片形式。頭部的背景顏色也融合當(dāng)前卡片的色調(diào)，整體更協(xié)調(diào)。類似這種呈現(xiàn)簡(jiǎn)單立體翻頁效果的表現(xiàn)手法，在 UI 應(yīng)用場(chǎng)景中也越來越常見。
Liaju 摘錄
25、途家民宿，未完成訂單的設(shè)計(jì)呈現(xiàn)
當(dāng)用戶有未完成的任務(wù)訂單，在“首頁”和“我的”以顯著位置提示用戶完成訂單。多個(gè)訂單“首頁”以輪播形式進(jìn)行展示，“我的”以上下滑動(dòng)形式展示并提示用戶。
皓月長歌 摘錄
26、QQ 夜間模式下的 icon 設(shè)計(jì)
切換 QQ 夜間模式，底部標(biāo)簽欄消息選中模式下的 icon 結(jié)合睡覺打呼的情景設(shè)計(jì)，符合夜間場(chǎng)景。貼合場(chǎng)景的細(xì)節(jié)設(shè)計(jì)，帶給用戶更好的體驗(yàn)。
Liaju 摘錄
27、馬蜂窩旅游，詳情頁照片展示處理
馬蜂窩旅游在文章詳情頁展示作者拍攝的景點(diǎn)照片時(shí)，不會(huì)對(duì)照片進(jìn)行裁切等處理，而是以寬度固定高度自定義的方式進(jìn)行呈現(xiàn)。展示出照片本身的原始狀態(tài)，不僅方便作者拍攝不同比例的照片，也方便用戶從不同的視角觀看景點(diǎn)。
黑馬青年 摘錄
28、毒湯日歷，點(diǎn)贊也要扎心
一款毒雞湯產(chǎn)品，覺得很喪就打開看看，說不定喪喪就好了。點(diǎn)贊 icon 設(shè)計(jì)也是帶“扎”的，恰好符合產(chǎn)品屬性；當(dāng)你想翻過明天的時(shí)候，會(huì)提示“明天，怎么翻也翻不過去”。
Liaju 摘錄
29、百度翻譯，通過引導(dǎo)互動(dòng)完成信息采集
引導(dǎo)頁在產(chǎn)品中比較常見，從靜態(tài)、動(dòng)態(tài)、視頻等不斷演變到互動(dòng)式新形式引導(dǎo)設(shè)計(jì)。
在百度翻譯 APP 中，通過引導(dǎo)頁和用戶進(jìn)行互動(dòng)，來了解用戶群信息。通過這樣的互動(dòng)形式可以更好的被用戶所接受，并進(jìn)行相應(yīng)信息的選擇。
疏晶晶 摘錄
30、抖音，背景圖編輯預(yù)覽更人性化
在抖音設(shè)置個(gè)人主頁背景圖，更換圖片來自個(gè)人相冊(cè)，在進(jìn)行圖片編輯時(shí)，可以預(yù)覽基于布局結(jié)構(gòu)上的呈現(xiàn)效果，便于用戶截取需要的圖片顯示區(qū)域。
疏晶晶 摘錄
31、編輯微信朋友圈動(dòng)態(tài)試試長按照片
編輯微信朋友圈動(dòng)態(tài)過程中，如果選錯(cuò)圖片通常大家都是點(diǎn)擊圖片預(yù)覽時(shí)刪除。還有一種長按拖拽刪除可能容易被你忽略，不妨試試看，通過長按拖拽刪除照片更能方便用戶操作。
疏晶晶 摘錄
32、酷狗音樂，30 秒副歌播放
通過 30 秒的副歌播放，為你快速篩選是否喜歡這首歌，30 秒縮短了用戶試聽歌曲的時(shí)間成本。也會(huì)提示用戶下一步操作，如果 30 秒不夠可以增加 30 秒。
Matilda 摘錄
33、QQ 音樂制作視頻歌詞海報(bào)
喜歡的歌詞可以制作成動(dòng)態(tài)海報(bào)，還可以自定義拍攝視頻，符合當(dāng)下流行的小視頻。將喜歡的歌詞歌曲同時(shí)賦予視頻的記憶，聽覺+視覺體驗(yàn)結(jié)合，給人更加豐富的情感體驗(yàn)。
Matilda 摘錄
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：黑馬青年 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.yvirxh.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ì)風(fēng)格？
大標(biāo)題導(dǎo)航欄是從iOS11發(fā)布后，開始在中國的UI設(shè)計(jì)師中急速流行的一種設(shè)計(jì)風(fēng)格。其實(shí)這種風(fēng)格最早在2016年就在硅谷盛行了起來，源自一位叫Michael Horton的設(shè)計(jì)師發(fā)表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章，這篇文章提到的Complexion Reduction這種設(shè)計(jì)風(fēng)格(下文簡(jiǎn)稱CR)就是大標(biāo)題導(dǎo)航欄的起源，即大、黑、粗的標(biāo)題。
CR這種風(fēng)格有四個(gè)明顯的特征：
1.刪除多余的顏色；
2.又大、又黑、又粗的標(biāo)題；
3.簡(jiǎn)單、可識(shí)別的圖標(biāo)，也不要使用顏色(常用黑灰色)；
4.留白留白留白，更多的留白。
下圖是比較典型的使用CR風(fēng)格的APP（分別是愛彼迎、ENJOY、火球買手、MOO音樂），大家可以結(jié)合CR風(fēng)格的4大特征感受一下：
不知道小伙伴們有沒有發(fā)現(xiàn)，這幾個(gè)APP的功能會(huì)比較單一或是某一垂直領(lǐng)域，且視覺上都給人一種高品質(zhì)，超極簡(jiǎn)的感覺，人們會(huì)更多的關(guān)注界面中內(nèi)容本身，對(duì)內(nèi)容的要求也會(huì)更高。
二、中西方的差異
那么問題來了，為什么這種CR風(fēng)格鮮少出現(xiàn)在中國特有的淘寶類電商APP中呢？
國外的APP大都是小而精致的，一般一個(gè)APP只能做一件事，功能比較單一，而國內(nèi)的淘寶類電商APP，攜程類的綜合旅游APP所包含的業(yè)務(wù)與功能都非常廣泛，在狹小的手機(jī)屏幕上展示更多的商品就顯得尤其重要，CR風(fēng)格提倡的大標(biāo)題大留白無疑不是在挑戰(zhàn)老板的底線。
實(shí)際上即便使用大標(biāo)題風(fēng)格也不要盲目采用iOS11官方的大標(biāo)題導(dǎo)航，其原因在于中英文的差異。
英文大標(biāo)題一個(gè)單詞有大小寫的變化，富有一定的層級(jí)變化，而中文如果使用iOS11給定的68px（二倍圖下）的字號(hào)，那真是大到閃瞎我的眼。中文一個(gè)詞語每一個(gè)字都是差不多的大小，沒有層級(jí)上的變化，太大的字體在整個(gè)界面中看起來會(huì)很奇怪，如下圖：
三、合理使用大標(biāo)題
雖說iOS11那么大的標(biāo)題不適合大部分的APP，但并不是說大標(biāo)題風(fēng)格就不適合大部分APP了，實(shí)際上目前大多數(shù)的APP依然使用了大標(biāo)題的風(fēng)格，不過進(jìn)行了一定的改良。
以下參考尺寸均是二倍圖下的尺寸
1.大標(biāo)題導(dǎo)航欄
大標(biāo)題導(dǎo)航欄大致有兩種樣式，一種是延用iOS11的大標(biāo)題導(dǎo)航欄，一種是稍微改良使用的大標(biāo)題導(dǎo)航欄。
1）iOS11大大大標(biāo)題導(dǎo)航欄
iOS11的大標(biāo)題導(dǎo)航欄標(biāo)題字號(hào)約為68px、欄高192px(二倍圖)，大標(biāo)題對(duì)齊導(dǎo)航欄左邊，頁面滑動(dòng)時(shí)轉(zhuǎn)換為常規(guī)的導(dǎo)航欄。
國內(nèi)使用這種大大大標(biāo)題的APP比較少，標(biāo)題文字實(shí)在太大，若只作為導(dǎo)航標(biāo)題占位，會(huì)極其浪費(fèi)屏幕空間。
使用這種大大大標(biāo)題時(shí)，導(dǎo)航標(biāo)題一般都有一定的意義，如下圖:
餓了么的訂單頁詳情頁使用了這種大大大標(biāo)題，但是標(biāo)題賦予了訂單狀態(tài)的意義，比起單純的“訂單詳情”，這樣有一定意義的標(biāo)題文字則可考慮使用iOS11的大大大標(biāo)題。
2）改良大標(biāo)題導(dǎo)航欄
某些APP在使用大標(biāo)題導(dǎo)航欄時(shí)，在iOS11的大標(biāo)題導(dǎo)航欄上進(jìn)行了一定的改良，最常見的就是一定程度縮小了標(biāo)題的字號(hào)，如下圖:
這三個(gè)APP的標(biāo)題字號(hào)都沒有到68px，常用40px~48px的字號(hào)，陌陌與天貓是固定在頂部導(dǎo)航欄的，而Kepp會(huì)隨頁面上滑變?yōu)槌Ｒ?guī)標(biāo)題導(dǎo)航。
一般這種固定的較大標(biāo)題都會(huì)隱去導(dǎo)航欄的分割線，顯得導(dǎo)航欄更高，更有呼吸感。像是天貓的大標(biāo)題導(dǎo)航欄使用的色塊，與下方模塊又比較近，就顯得很擁擠。
2.Tab欄大標(biāo)題
Tab欄的文字標(biāo)題切換樣式最常見的就是顏色變化，加小短線等，隨著大標(biāo)題風(fēng)格的流行，Tab欄的切換樣式也出現(xiàn)了大標(biāo)題的選中樣式，選中字號(hào)通常采用40~48px（甚至更大，如蝦米音樂的72px），而非選中標(biāo)題通常則是采用的28~32px，如下圖：
使用這樣的Tab欄，能夠迅速幫助用戶辨識(shí)自己所在的位置，就差指著自己說“這兒”了。需要注意的是一個(gè)屏幕內(nèi)盡量只在一級(jí)Tab使用大標(biāo)題切換，與二級(jí)Tab做出區(qū)分。
3.模塊化大標(biāo)題
大標(biāo)題的風(fēng)格除了應(yīng)用在界面頂部導(dǎo)航，在模塊化標(biāo)題上應(yīng)用的也非常多，有些APP即便頂部導(dǎo)航不使用大標(biāo)題，卻會(huì)在模塊化標(biāo)題上使用較大的字號(hào)，如下圖：
這種模塊化大標(biāo)題常配合留白分割的界面使用(這也符合了CR風(fēng)格的特征)，模塊化大標(biāo)題在留白分割的界面上能夠更好地幫助上下模塊做到層級(jí)區(qū)分的作用。
4.文字變大變粗變黑
拋開大標(biāo)題不談，不知大家有沒有發(fā)現(xiàn)，現(xiàn)在越來越多的APP的內(nèi)容標(biāo)題、正文內(nèi)容的字體也在逐漸變得更黑更粗，甚至更大，畢竟我們的手機(jī)變得越來越大了。如下圖：
即便是擁有復(fù)雜業(yè)務(wù)的淘寶與飛豬，在某些內(nèi)容標(biāo)題上也變得更粗更黑，一眼看過去用戶能更容易找到自己想看的內(nèi)容。
四、劃重點(diǎn)
· 大標(biāo)題設(shè)計(jì)風(fēng)格源自Complexion Reduction這種設(shè)計(jì)風(fēng)格，CR這種風(fēng)格的特征就在于顏色少、標(biāo)題大黑粗、圖標(biāo)通用簡(jiǎn)單、大留白；
· 由于中英文字體的差異，中文使用超大字號(hào)沒有英文富有變化；
· 合理使用大標(biāo)題，做一些適當(dāng)?shù)母牧肌３Ｒ娪糜趯?dǎo)航欄、一級(jí)Tab選中標(biāo)題、模塊化大標(biāo)題以及內(nèi)容標(biāo)題。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：人類君 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.yvirxh.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ì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn