2021-4-8 高勁
今天和大家聊一聊設計細節(jié)，每個提到的細節(jié)你們都能直接拿走，并且在項目中使用。
這個頁面相信大家平時工作中都會做到，有很多圖標放在一起，里面可能是一些常用菜單，這個設計有什么問題呢？相信看在這里的小伙伴，腦海里有無數答案？不統(tǒng)一，還是什么？我們來分析下。
首先從大家關心的統(tǒng)一性來說，沒有任何問題，圖形都是在規(guī)范的圖標柵格里面，也非常的統(tǒng)一，那么問題出在哪里？
仔細觀察，我們會發(fā)現(xiàn)「聯(lián)系人」和「歷史消息」的圖標過于飽滿，雖然他們尺寸一樣，但是比「最近使用」這個圖標要大很多，原因是什么呢？因為后面這兩個圖標從視覺來說他們的重量太重了，所以看起來會比較大。
所以今天我們在做設計時候，如遇圖標瘦長或者圓形等不夠飽滿的情況，請酌情將圖標撐滿像素，來保證整體一致的視覺體量感。
如果圖標較飽滿的情況下，可使用微縮，來保證整體一致的視覺體量感。我們文中案例之所以出現(xiàn)這種情況，是因為沒有定義出圖形體量大小具體的繪制規(guī)則，所以導致圖形過于飽滿，看起來會顯得視覺重量不一致。
所以我們第一步，對圖形繪制規(guī)則進行優(yōu)化，保證圖形在頁面中體感一致，我提供了 4 個基礎圖形繪制技巧和對應的輔助線參考圖。
所以在實際應用時，可略微在可變范圍內微調，對于過于飽滿的圖形，高度變低時，需要增加寬度來保證視覺重量相等。
這樣調整后，整體的圖標視覺重量就會更加均衡，也會更加規(guī)則。所以，今天如果你發(fā)現(xiàn)你們產品頁面中圖標大小體量不一樣，或許是因為你忘記對圖標體量進行規(guī)范。
圖標我們在界面中使用場景很多，很多時候用大圖標，有時候用小圖標，我們該如何去定義小圖標大小，大圖標大小，這是很多同學非常糾結的。有時候就亂定，導致頁面沒有秩序感。
第一步，我們要先去梳理頁面場景，看看哪些地方會用到圖標，把全部場景列出來。
列出來后，我們根據你 APP 設計的最小單元的倍數來定義圖標風格，比如支付寶最小單元是 4，所有間距都是 4 的倍數，那么在圖標這里，也是同樣的原則，全部的圖標尺寸，我們根據 4 的倍數去定義幾種大小，比如 24X24，32X32，44X44，56X56，72X72 等等，如果頁面中不夠用，同樣的在 4 的倍數基礎上進行新增。
我相信大家都有這種情況，一組圖標在使用時候，會出現(xiàn)在各個場景，這個時候需要放大，甚至縮小，但是不知道放大后圖標粗細該如何確定，直接放大，直接縮小會出現(xiàn)圖標的細節(jié)粗細有問題，那么這種時候該如何處理？
直接放大縮小，圖標粗細沒有任何說法，而且會顯得比例非常奇怪，如何去解決這個問題？
第一步：我們需要確定圖標大小和線條比例，以支付寶為例，首先要確定圖標大小和線條粗細比例為 14：1。當然每個比例是不一樣的，你可以根據你們產品的調性去決定，如果你圖標比較細，你可以設定為 10：1，這些都沒有固定標準。
這樣的話，假如你圖標需要設計一個 140X140 的大小，那么你的圖標粗細就應該是 10px。
如果你圖標是 112 尺寸大小，那么按照 14：1 的比例，那么你圖標線條粗細就應該是 8px，以此推動，通過這樣的方式來保證圖形的一致性和穩(wěn)定性。
以上三個小點，是絕大多設計師忽略掉的，也是設計中不太注意的細節(jié)，但是設計的專業(yè)程度往往就是由這些細節(jié)組成，今天這 3 個技巧，看會了之后，你就可以直接在項目中去運用。
文章來源：優(yōu)設網 作者：我們的設計日記
藍藍設計( m.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務