今天和大家聊一聊設(shè)計(jì)細(xì)節(jié)，每個(gè)提到的細(xì)節(jié)你們都能直接拿走，并且在項(xiàng)目中使用。

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

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

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

仔細(xì)觀察，我們會(huì)發(fā)現(xiàn)「聯(lián)系人」和「歷史消息」的圖標(biāo)過(guò)于飽滿(mǎn)，雖然他們尺寸一樣，但是比「最近使用」這個(gè)圖標(biāo)要大很多，原因是什么呢？因?yàn)楹竺孢@兩個(gè)圖標(biāo)從視覺(jué)來(lái)說(shuō)他們的重量太重了，所以看起來(lái)會(huì)比較大。

所以今天我們?cè)谧鲈O(shè)計(jì)時(shí)候，如遇圖標(biāo)瘦長(zhǎng)或者圓形等不夠飽滿(mǎn)的情況，請(qǐng)酌情將圖標(biāo)撐滿(mǎn)像素，來(lái)保證整體一致的視覺(jué)體量感。

如果圖標(biāo)較飽滿(mǎn)的情況下，可使用微縮，來(lái)保證整體一致的視覺(jué)體量感。我們文中案例之所以出現(xiàn)這種情況，是因?yàn)闆](méi)有定義出圖形體量大小具體的繪制規(guī)則，所以導(dǎo)致圖形過(guò)于飽滿(mǎn)，看起來(lái)會(huì)顯得視覺(jué)重量不一致。

所以我們第一步，對(duì)圖形繪制規(guī)則進(jìn)行優(yōu)化，保證圖形在頁(yè)面中體感一致，我提供了 4 個(gè)基礎(chǔ)圖形繪制技巧和對(duì)應(yīng)的輔助線參考圖。

所以在實(shí)際應(yīng)用時(shí)，可略微在可變范圍內(nèi)微調(diào)，對(duì)于過(guò)于飽滿(mǎn)的圖形，高度變低時(shí)，需要增加寬度來(lái)保證視覺(jué)重量相等。

這樣調(diào)整后，整體的圖標(biāo)視覺(jué)重量就會(huì)更加均衡，也會(huì)更加規(guī)則。所以，今天如果你發(fā)現(xiàn)你們產(chǎn)品頁(yè)面中圖標(biāo)大小體量不一樣，或許是因?yàn)槟阃泴?duì)圖標(biāo)體量進(jìn)行規(guī)范。

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

圖標(biāo)我們?cè)诮缑嬷惺褂脠?chǎng)景很多，很多時(shí)候用大圖標(biāo)，有時(shí)候用小圖標(biāo)，我們?cè)撊绾稳ザx小圖標(biāo)大小，大圖標(biāo)大小，這是很多同學(xué)非常糾結(jié)的。有時(shí)候就亂定，導(dǎo)致頁(yè)面沒(méi)有秩序感。

第一步，我們要先去梳理頁(yè)面場(chǎng)景，看看哪些地方會(huì)用到圖標(biāo)，把全部場(chǎng)景列出來(lái)。

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

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

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

直接放大縮小，圖標(biāo)粗細(xì)沒(méi)有任何說(shuō)法，而且會(huì)顯得比例非常奇怪，如何去解決這個(gè)問(wèn)題？

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

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

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

最后

以上三個(gè)小點(diǎn)，是絕大多設(shè)計(jì)師忽略掉的，也是設(shè)計(jì)中不太注意的細(xì)節(jié)，但是設(shè)計(jì)的專(zhuān)業(yè)程度往往就是由這些細(xì)節(jié)組成，今天這 3 個(gè)技巧，看會(huì)了之后，你就可以直接在項(xiàng)目中去運(yùn)用。

文章來(lái)源：優(yōu)設(shè)網(wǎng)       作者：我們的設(shè)計(jì)日記

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)