<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    2021-4-7    周周


    不知道大家有沒有被說過,設計做的不精致?拿圖標舉例,其實不精致的原因就是統一性沒做好。我們總說做圖標要統一,但是到底要統一哪些要素?有沒有一個完整的自檢表呢?以前我總結了 5 到 6 個要統一的要素,最近觀察大家的練習之后,直接擴增到 9 個了,今天就以線形圖標為例,看看我們需要統一哪 9 個要素。

    大綱如下:

    1. 大小統一
    2. 圓角統一
    3. 語言統一
    4. 粗細統一
    5. 疏密統一
    6. 間距統一
    7. 比例統一
    8. 正負形統一
    9. 角度統一

    大小統一

    這個很容易理解,就是一組圖標看起來大小是一致的。但是最近發現了一個比較重要的點,就是很多同學做一組練習,相鄰的圖標都差不太多,但是隔的比較遠的圖標放在一起就差很多了,比如下面這幾個圖標,就是逐漸變大的:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    所以對于大小統一,我們必須要做到,一組圖標里,任意兩個圖標拿出來都是大小統一的,否則就是不及格。

    保持大小統一的方法見這篇 – 圖標設計規范。

    圓角統一

    圓角統一也是比較好理解的點,無非就是圓角大小,像下面這兩個圖標:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    如果圓角差很多,你很容易發現,因為都是差不多大小的矩形,但是我們很容易忽略一些細節,比如下面第一個圖標的三角形,和旁邊的日歷相比,就過于尖銳:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    這是圖標里面很細的細節,所以容易被忽視,大家一定要重視。

    語言統一

    語言統一你可以理解為設計風格統一,如果一組圖標里面出現了多種風格,那會顯得非常不專業。

    比如下面這組練習:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    大體看好像是一種語言,但仔細觀察其實還是有很多細節不統一的,比如外輪廓上面有的有白色,有的沒有,白色還分帶描邊和不帶描邊:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    這就是在語言上不統一的案例,大家在做練習的時候,一定要想清楚你的語言是什么。

    粗細統一

    粗細統一就不用說了吧,基本就是用在線性圖標線條粗的,比如像這種比較明顯的粗細不一致,就不應該出現了:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    這都是最最基礎的問題。

    疏密統一

    疏密統一其實是很多新人朋友容易犯的錯,比如下面這一組圖標:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    大部分地方是比較透氣疏松的,但是只有第二個比較密集,這樣就會讓人感覺比較突兀,整體不夠和諧。這就是疏密程度的統一性,一定要把握住節奏感,否則就會不舒服。

    間距統一

    這個點一般用在斷線圖標上,也就是你開口大小的統一性,比如一個開很大,一個開很小:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    那就證明細節沒有做到位。

    比例統一

    比例可以分很多種,比如顏色比例,像下面這個原作的顏色比例就沒有太統一:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    在小 y 優化臨摹之后,達到了顏色比例的平衡:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    再比如之前說的一個案例,粗細線條的比例:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    • 第一個圖標,粗線與細線的比例:95:5
    • 第二個圖標,粗線與細線的比例:70:30
    • 第三個圖標,粗線與細線的比例:100:0

    在這樣不統一的情況下,圖標是一定不會精致的。這些都是比例統一問題出現的實際場景。

    正負形統一

    正負形也是沒那么容易看出來的,舉個例子,下面這組周楠做的圖標,乍一看沒什么問題,但是仔細一觀察,其實我們會發現,白色面積的重量其實是不統一的,那個消息上面的“#”會偏重一點:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    當優化之后,我們再看:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    整體就會比之前統一精致很多。

    角度統一

    角度,也是增加圖標統一感的因素之一,最常見的角度統一方式就是按照一定的倍數來制定規范,比如 30 度的倍數:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    再舉一個角度其他方面的例子,在做下面這組圖標的時候,最初沒有考慮斷線的規律:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    所以看久了會覺得有些凌亂,于是我將斷線處定為右下角 45 度,如遇到圓角拐角處,可挪動靠近拐角處進行斷線:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    這樣我們就會看到所有的圖標斷線位置都大致出現在右下角的地方,最終效果如下:

    圖標統一性不強?來看騰訊設計師總結的這9個自檢要素表

    很大程度上提高了圖標的統一性,并且在延展執行的時候節省了大量的思考時間(思考在哪里斷)。

    但是對于斷線的位置是否一定要規定其出現的角度,我覺得不一定,也可以從其他角度考慮,但最終的目的還是讓整體統一和諧,且延展性高。

    總結

    以上就是目前總結的 9 個需要統一的點,只要能把所有的統一性做好,精致一定是沒問題的。






    文章來源:優設網     作者:菜心設計鋪



    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 亚洲精品国自产拍在线观看| 国产亚洲色婷婷久久99精品| 亚洲精品一品区二品区三品区| 免费视频精品一区二区三区| 人妻精品久久久久中文字幕69| 久久久久人妻一区精品| 久久精品国产69国产精品亚洲 | 国产精品一久久香蕉国产线看 | 91久久精品91久久性色| 亚洲精品蜜桃久久久久久| 免费精品国自产拍在线播放| 99久久精品免费看国产一区二区三区| 国产精品美女久久久m| 亚洲国产精品无码专区在线观看| 欧美日韩国产中文精品字幕自在自线 | 97精品国产手机| 久久精品国产精品亚洲毛片| 亚洲国产精品无码一线岛国| 亚洲A∨午夜成人片精品网站| 国产亚洲曝欧美不卡精品| 国产精品伊人久久伊人电影| 国产成人精品一区二区三区| 777被窝午夜精品影院| 亚洲国产精品自在线一区二区 | 免费人成在线观看欧美精品 | 国产一区麻豆剧传媒果冻精品| 国产99久久久国产精品~~牛| 亚洲综合一区二区精品导航 | 久久精品国产半推半就| 国产精品电影网| 国产精品1区2区3区在线播放| 国产亚洲精品岁国产微拍精品| 少妇精品无码一区二区三区| 亚洲av无码精品网站| 无码国产精品一区二区免费16| 亚洲精品国产福利一二区| 亚洲欧美国产∧v精品综合网| 亚洲а∨天堂久久精品| 一本色道久久综合亚洲精品| 无码久久精品国产亚洲Av影片| 日本VA欧美VA欧美VA精品|