編輯導(dǎo)語：在設(shè)計中，美觀是非常重要的一項，對于用戶來說，在使用產(chǎn)品時的第一感受就來自外觀，所以產(chǎn)品各種的各種設(shè)計出了注意功能以外，更要注意外觀的設(shè)計；本文作者分享了關(guān)于圖標(biāo)設(shè)計的一些細(xì)節(jié)，我們一起來了解一下。

很多同學(xué)經(jīng)常會問設(shè)計不精致怎么辦？今天就拿大公司的一個圖標(biāo)舉例，爭取每個細(xì)節(jié)點你們都能get，并在項目中使用。下面我們就聊下圖標(biāo)設(shè)計細(xì)節(jié)，圖標(biāo)尺寸以及對于頭像處理的小細(xì)節(jié)，希望可以幫助到你。

一、圖標(biāo)比例保持體量統(tǒng)一

這個頁面相信大家都平時工作中會做到，有很多圖標(biāo)放在一起，里面可能是一些常用菜單，這個設(shè)計有什么問題呢？相信看在這里小伙伴腦海里有無數(shù)答案？不統(tǒng)一，還是什么？我們來分析下：

首先從大家關(guān)心的統(tǒng)一性來說，沒有任何問題，圖形都是在規(guī)范的圖標(biāo)柵格里面，也非常的統(tǒng)一，那么問題出在哪里？

仔細(xì)觀察，會發(fā)現(xiàn)「聯(lián)系人」和「歷史消息」的圖標(biāo)過于飽滿，雖然它們尺寸一樣，但是比「最近使用」這個圖標(biāo)要大很多，因為后面這兩個圖標(biāo)過于的飽滿。從視覺來說它們的重量太重了，所以看起來會比較大。

在做設(shè)計時候，如遇圖標(biāo)比較瘦長或者圓形等不夠飽滿的情況，請酌情將圖標(biāo)撐滿像素，來保證整體一致的視覺體量感。

如果圖標(biāo)語義較飽滿的情況下，可使用微縮，來保證整體一致的視覺體量感。文中案例之所以出現(xiàn)這種情況，是因為沒有定義出圖形體量大小具體的繪制規(guī)則，所以導(dǎo)致圖形過于飽滿看起來和瘦長，會顯得視覺重量不一致。

所以需要對圖形繪制規(guī)則進(jìn)行優(yōu)化，保證瘦長，或者飽滿的圖形在頁面中體感一致。提供了4個基礎(chǔ)圖形繪制技巧和對應(yīng)的輔助線參考圖。

在實際應(yīng)用時，可略微在可變范圍內(nèi)微調(diào)，對于過于飽滿的圖形，高度變低時，需要增加寬度來保證視覺重量相等。

這樣調(diào)整后，整體的圖標(biāo)視覺重量就會更加均衡，也會更加規(guī)則。所以如果你發(fā)現(xiàn)你們產(chǎn)品頁面中圖標(biāo)大小體量不一樣，或許是因為你忘記對圖標(biāo)體量進(jìn)行規(guī)范。

二、圖標(biāo)尺寸比例怎么定？

圖標(biāo)在界面中使用場景很多，有時用大圖標(biāo)，有時用小圖標(biāo)，該如何去定義小圖標(biāo)大小，大圖標(biāo)大小，這時很多同學(xué)非常糾結(jié)，有時候就亂定，導(dǎo)致頁面沒有秩序感。

第一步，要先去梳理頁面場景，看看哪些地方會用到圖標(biāo)，全部把場景列出來。

列出來，然后根據(jù)APP設(shè)計的最小單元的倍數(shù)來定義圖標(biāo)風(fēng)格，比如支付寶最小單元是4，所有間距都是4的倍數(shù)，那么在圖標(biāo)這里，也是同樣的原則，全部的圖標(biāo)尺寸，根據(jù)4的倍數(shù)去定義幾種大小，比如24X24，32X32，44X44，56X56，72X72等等，如果頁面中不夠用，同樣的在4的倍數(shù)基礎(chǔ)上進(jìn)行新增。

三、圖標(biāo)放大后，線條粗細(xì)該如何定義?

我相信大家都有這種情況，一組圖標(biāo)在使用時候，會出現(xiàn)在各個場景，這個時候需要放大，甚至縮小，但是不知道放大后圖標(biāo)粗細(xì)該如何確定，直接放大，直接縮小會出現(xiàn)圖標(biāo)的細(xì)節(jié)粗細(xì)有問題，那么該如何處理呢？

第一步：需要確定圖標(biāo)大小和線條比例，以支付寶為例，首先要確定圖標(biāo)大小和線條粗細(xì)比例為14：1當(dāng)然每個比例是不一樣的，可以根據(jù)你們產(chǎn)品的調(diào)性去決定，如果圖標(biāo)比較細(xì)，可以設(shè)定為10：1，這些都沒有固定標(biāo)準(zhǔn)。

假如圖標(biāo)需要設(shè)計一個140X140的大小，那么圖標(biāo)粗細(xì)就應(yīng)該是10px。

如果圖標(biāo)是112尺寸大小，那么按照14：1的比例，那么圖標(biāo)線條粗細(xì)就應(yīng)該是8px，以此推動，通過這樣的方式來保證圖形的一致性和穩(wěn)定性。

以上三個小點，是絕大多設(shè)計師忽略掉的，也是設(shè)計中不太注意的細(xì)節(jié)，但是今天設(shè)計的專業(yè)度，設(shè)計的細(xì)節(jié)程度往往就是由于這些細(xì)節(jié)組成，今天這3個技巧，看會了之后，你就可以直接在項目中去運用，希望可以幫助到你。

#專欄作家#

Sky，微信公眾號：我們的設(shè)計日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗設(shè)計專家，阿里巴巴天貓設(shè)計專家；10年知名互聯(lián)網(wǎng)公司設(shè)計經(jīng)驗，對于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經(jīng)驗。

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

題圖來自?Unsplash，基于 CC0 協(xié)議