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

最近在做圖標的優化調整，雖然改動不大，但在復盤的時候還是總結出很多心得，在這里和大家分享一下。

圖標是界面設計中最重要的元素之一，也是我們UI設計師必備的技能，日常工作中我們經常會接到含有圖標設計、優化的需求。但到底什么樣的圖標才算是優秀的？也許很多設計師并沒有太完整的評判體系，只是憑感覺，這樣就會造成輸出效果不穩定、耗時太長等不良的后果。所以借著這次機會我梳理了一套圖標設計自檢的評判體系，一共五個維度，大綱如下：

1. 識別
2. 性格
3. 品牌
4. 飽滿
5. 細節

1. 識別

評判事物的價值在于它的用途是什么！圖標的用途是幫助用戶理解信息，所以“識別性”就是圖標最重要、最底層的價值，如果你設計一個圖標，用戶看不懂，即使視覺再美觀，也是無根之木，沒有任何價值可言！

識別性可以分為兩個方面，一是含義識別，二是視覺識別。

先說含義識別：簡單來說就是你的圖標能不能被理解，當然并不是設計師自己能理解就ok，而是需要用戶來決定，這里和大家分享一個我判斷圖標是否易識別的方法——內部用戶調研法，說白了就是隨機問一些團隊內部人員，最好多問幾種崗位，這樣得來的結果更加可靠，案例如下：

我在改版“話題”這個圖標的時候，想到了微博的“#”，于是把“#”和氣泡框結合到了一起，如下圖：

這時我找來10個內部人員進行測試，只有3個能看懂圖標的意思（這3個人都是平時經常玩微博的），在這樣的數據之下，不用猶豫，這個方案一定是不可取的。

在進行調研時，最少要保證80%的人能看懂，才證明你的方案是可行的。

再來說視覺識別：顧名思義這一點已經與圖標含義無關，而是視覺層面的問題，例如大小、底色等等阻礙用戶識別的因素。

這里引入一個國外的測試結果，是我在一位前輩的文章中看到的，測驗包括一組四種樣式的圖標：白底黑色實心圖標，白底黑色空心圖標，黑底白色實心圖標，黑底白色空心圖標，經過10天的時間，1260名參與者總共完成了超過25000次圖標的認知測試。將得出的數據分成四組進行雙向方差分析，在相同的統計條件下，選擇黑底白色空心圖標要比其他三種組合的時間慢0.17秒，也就是說這種圖標的信息表達能力會少弱，如下圖：

所以在這樣的理論與數據的支撐下，我對部分圖標進行了如下改版：

有底色的圖標全部從線性改成面性，如改不成面性（例如時鐘）需要適當加粗描邊，目的就是提高視覺識別性。切記，識別性是圖標最重要的價值，尤其是在沒有文字說明的情況下，一定不要讓用戶產生困惑，不然你就是在消耗用戶體驗，而不是給用戶體驗賦能！

2. 性格

試想：如果一個人沒有性格，那這個人就是沒有靈魂的，圖標也一樣，沒有性格即沒有靈魂。那如何打造屬于自己的性格呢，我們需要從用戶和品牌出發，例如騰訊動漫的用戶都是動漫、cosplay愛好者，給人一種又萌又可愛的感覺，所以我們需要讓圖標盡量圓潤一些：

像上圖2號圖標一樣，增大圓角，使圖標看起來更加圓潤可愛。基于這樣的用戶人群，我們還將原有一些單色圖標，改成下面這樣的彩色圖標：

目的就是讓圖標可愛活潑的性格更加明顯。

3. 品牌

品牌性是我們經常提到的緯度，常用的提取品牌的基因也有很多，顏色、圖形、吉祥物等等，這里舉兩個例子，一個是具象的品牌基因——吉祥物：

我們有自己的品牌吉祥物——黑子，所以在圖標設計時可以將其運用起來，如下圖就是結合黑子形象設計出來的“逗幣”圖標：

再舉個比較抽象的例子，從logo當中提取品牌基因。由于logo的字體筆畫比較粗，整體給人一種厚重飽滿的感覺：

因此，我們可以在品牌logo中提取“粗胖飽滿”的品牌基因，在這樣的背景下就不用再糾結圖標使用2px描邊還是3px的描邊了：

我們可以很確定的使用3px描邊，因為它既符合品牌基因又符合用戶性格（肥胖圓潤顯得可愛）。

4. 飽滿

很多時候我們做出來的圖標不夠精致，其中一個很大的原因就是不夠飽滿。如何判斷圖標是否飽滿呢？我常用的衡量方法就是在圖標上面加一個矩形，看圖標的正形的面積是否還可以增加。

例如下圖，藍色是正形，紅色是負形：

很明顯藍色的正形面積是可以增加的，例如：

這就是在增加圖標的飽滿度，我也是按照這個思路來改版圖標飽滿度的。舉個真實的例子，我們原版的續看圖標是上下結構，而上面部門的圖形太窄，導致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：

于是，我對圖標的結構進行了調整，盡可能地減少綠色部分，最后達到了下圖這樣的效果：

最后提醒大家，對于圖標的飽滿度，還需要結合整套圖標的視覺效果來進行調試，雖然上面這個方法可以解決大部門圖標的飽滿問題，但還是要具體場景具體分析，切記，我們的目標是讓整套圖標看起來和諧、統一、精致！

5. 細節

細節也包含很多方面，例如：

5.1 角度是否一致或者遵循某種規律

我們定制的角度規范是30度的倍數，這樣可以很大程度的提高圖標統一性。

5.2 描邊末端的細節處理

下圖就是一個錯誤的例子，一個描邊末端是直角，一個又是圓角：

我們在處理這樣的細節時，一定要保證統一性。

5.3? 像素對其問題

大家會覺得只要把一個尺寸的圖標做好像素對齊，導出其他倍數的圖標就是ok的，其實這樣的想法是不對的，因為在導出0.5或1.5倍數關系的時候，像素很容易再次產生不對齊的情況。

舉個例子，我們做圖標是以2倍圖為基礎，然后統一導出3倍圖，那這時候3倍圖就是2倍圖的1.5倍，導出的時候就發生了下面這樣的情況：

雖然2倍圖是像素對齊的，但3倍圖卻沒有對齊，如果設計師沒有仔細檢查切圖，就會發生線上圖標發虛的情況，所以我們在輸出切圖時，一定要仔細核查，發現錯誤及時調整，免得造成不良影響。這里大家不要糾結，2倍圖3像素，3倍圖就是4.5像素，我們可以手動調整為4或者5像素，或者其他辦法也可以，我只是舉個極端的例子，如果遇到可以這樣調整，但最好還是用一倍圖來做圖標，這樣就不會出現小數點了。

除了以上這些，還有視覺大小、圓角、描邊粗細是否統一的細節，當然，這些都比較容易理解，就不一一舉例說明了，大家在做圖標設計的時候一定要多多注意。

總結本次梳理的五緯自檢法可以用在圖標設計的自我檢查、改版優化等多個方面，或許它并不全面，但一定具有參考價值，希望能給大家帶來啟發和靈感，我們也會更加努力，爭取做出更好的作品和教程與在設計道路上的你們分享交流！

#專欄作家#

菜心，微信公眾號：菜心設計鋪，人人都是產品經理專欄作家，騰訊視覺設計師，4年工作經驗，負責騰訊動漫移動端相關設計。歡迎大家互相交流關注。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議