<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 圖標(biāo)設(shè)計九大統(tǒng)一性

          2024-10-21    藍(lán)藍(lán)小助手

          大家有沒有被說過:“UI設(shè)計不夠精致?”
           
          拿圖標(biāo)舉例,不精致的原因大概率是統(tǒng)一性沒做好!
           
          總說做圖標(biāo)要統(tǒng)一,但是到底要統(tǒng)一哪些要素?有沒有一個完整的自檢表呢?
           
          最初我總結(jié)了5到6個要統(tǒng)一的要素,在最近觀察大家的練習(xí)之后,擴增到了9個,今天就以線形圖標(biāo)為例,看看我們需要統(tǒng)一哪9個要素!
           
          大綱如下:
          1、大小統(tǒng)一
          2、圓角統(tǒng)一
          3、語言統(tǒng)一
          4、粗細(xì)統(tǒng)一
          5、疏密統(tǒng)一
          6、間距統(tǒng)一
          7、比例統(tǒng)一
          8、正負(fù)形統(tǒng)一
          9、角度統(tǒng)一
           
           
          1、大小統(tǒng)一
           
          這個很容易理解,就是一組圖標(biāo)看起來大小是一致的。但是最近發(fā)現(xiàn)了一個比較容易出現(xiàn)的問題,就是很多同學(xué)做一組練習(xí),相鄰的圖標(biāo)都差不太多,但是隔的比較遠(yuǎn)的圖標(biāo)放在一起就差很多了,比如下面這幾個圖標(biāo),就是逐漸變大的:
           
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
           
          所以對于大小統(tǒng)一,我們必須要做到,一組圖標(biāo)里,任意兩個圖標(biāo)拿出來都是大小統(tǒng)一的,否則就是不及格。
           
           
          2、圓角統(tǒng)一
           
          圓角統(tǒng)一也比較好理解,無非就是圓角大小,像下面這兩個圖標(biāo):
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          如果圓角差很多,就很容易發(fā)現(xiàn),因為都是差不多大小的矩形,但是我們很容易忽略一些細(xì)節(jié),比如下面第一個圖標(biāo)的三角形,和旁邊的日歷相比,過于尖銳:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          這是圖標(biāo)設(shè)計里,很容易被忽視的小細(xì)節(jié),大家一定要重視。
           
           
          3、語言統(tǒng)一
           
          語言統(tǒng)一可以理解為設(shè)計風(fēng)格統(tǒng)一,如果一組圖標(biāo)出現(xiàn)了多種風(fēng)格,那會顯得非常不專業(yè)。
           
          比如下面這組練習(xí):
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          大體看似好像是一種語言,但仔細(xì)觀察,有很多細(xì)節(jié)不統(tǒng)一,比如外輪廓上面有的有白色、有的沒有,白色還分帶描邊和不帶描邊的:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          這就是設(shè)計語言不統(tǒng)一的案例,在做練習(xí)的時候,一定要想清楚你的設(shè)計語言是什么。
           
           
          4、粗細(xì)統(tǒng)一
           
          粗細(xì)統(tǒng)一就不用說了,基本就是用在線性圖標(biāo),像這種比較明顯的粗細(xì)不一致,就不應(yīng)該出現(xiàn)了:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
           
          這都是最基礎(chǔ)的問題,一般在活動里打卡超過5次還出現(xiàn)這種問題,那就實屬不該了!
           
           
          5、疏密統(tǒng)一
           
          疏密統(tǒng)一其實是很多新人朋友容易犯的錯,比如下面這一組圖標(biāo):
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          大部分地方是比較透氣疏松的,但是只有第二個比較密集,這樣就會讓人感覺比較突兀,整體不夠和諧。
           
          這就是疏密程度的統(tǒng)一性,一定要把握住節(jié)奏感,否則就會不舒服。
           
           
          6、間距統(tǒng)一
           
          這個點一般用在斷線圖標(biāo)上,也就是你開口大小的統(tǒng)一性,比如一個開很大,一個開很小:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          這也屬于細(xì)節(jié)沒有做到位。
           
           
          7、比例統(tǒng)一
           
          比例可以分很多種,比如顏色比例,像下面這個原作的顏色比例就沒有太統(tǒng)一:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          在小y優(yōu)化臨摹之后,達(dá)到了顏色比例的平衡:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          再比如之前說的一個案例,粗細(xì)線條的比例:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          第一個圖標(biāo),粗線與細(xì)線的比例:95:5
          第二個圖標(biāo),粗線與細(xì)線的比例:70:30
          第三個圖標(biāo),粗線與細(xì)線的比例:100:0
           
          在這樣不統(tǒng)一的情況下,圖標(biāo)是一定不會精致的。
           
          以上這些都是比例統(tǒng)一問題出現(xiàn)的實際場景。
           
           
          8、正負(fù)形統(tǒng)一
           
          正負(fù)形屬于沒那么容易察覺出來的。舉個例子,下面這組圖標(biāo),乍一看沒什么問題,但是仔細(xì)觀察,我們會發(fā)現(xiàn),白色面積的重量是不統(tǒng)一的,那個消息上面的“#”會偏重一點:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          當(dāng)優(yōu)化之后,我們再看:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          整體就會比之前統(tǒng)一精致很多。
           
           
          9、角度統(tǒng)一
           
          角度,也是增加圖標(biāo)統(tǒng)一感的重要因素之一,最常見的角度統(tǒng)一方式就是按照一定的倍數(shù)來制定規(guī)范,比如30度的倍數(shù):
           
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          再舉一個角度其他方面的例子,在做下面這組圖標(biāo)的時候,最初沒有考慮斷線的規(guī)律:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          看久了會覺得有些凌亂,我將斷線處定為右下角45度,如遇到圓角拐角處,可挪動靠近拐角處進行斷線:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          這樣我們就會看到所有的圖標(biāo)斷線位置都大致出現(xiàn)在右下角的地方,最終效果如下:
          圖標(biāo)設(shè)計九大統(tǒng)一性
           
           
          很大程度上提高了圖標(biāo)的統(tǒng)一性,并且在延展執(zhí)行的時候節(jié)省了大量的思考時間(思考在哪里斷)。
           
          但是對于斷線的位置是否一定要規(guī)定其出現(xiàn)的角度,我覺得不一定,也可以從其他角度考慮,但最終的目的還是讓整體統(tǒng)一和諧,且延展性高。
           
           
           
          總結(jié)
           
          以上就是目前總結(jié)的9個需要統(tǒng)一的點,只要能把所有的統(tǒng)一性做好,精致一定是沒問題的。
           
           

          作者:小腦府設(shè)計團隊
          鏈接:https://www.zcool.com.cn/article/ZMTYzMDE5Ng==.html
          來源:站酷
          著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
           
           

          image.png

          藍(lán)藍(lán)設(shè)計(m.sdgs6788.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計桌面端界面設(shè)計APP界面設(shè)計圖標(biāo)定制用戶體驗設(shè)計交互設(shè)計UI咨詢高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍(lán)小助微信ben_lanlan。

          image.png

          關(guān)鍵詞:UI咨詢UI設(shè)計服務(wù)公司軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司UI交互設(shè)計公司數(shù)據(jù)可視化設(shè)計公司用戶體驗公司高端網(wǎng)站設(shè)計公司銀行金融軟件UI界面設(shè)計能源及監(jiān)控軟件UI界面設(shè)計氣象行業(yè)UI界面設(shè)計軌道交通界面設(shè)計地理信息系統(tǒng)GIS UI界面設(shè)計航天軍工軟件UI界面設(shè)計醫(yī)療行業(yè)軟件UI界面設(shè)計教育行業(yè)軟件UI界面設(shè)計企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)軟件wpf開發(fā)軟件vue開發(fā)

           

          日歷

          鏈接

          個人資料

          存檔

          中文精品99久久国产 | 人妻精品久久久久中文字幕69 | 狠狠色婷婷久久一区二区| 国产精品99久久久久久宅男| 久久国产乱子伦精品免费强| 国产V亚洲V天堂无码久久久| 97热久久免费频精品99| 99久久99这里只有免费的精品| 久久久国产乱子伦精品作者| 久久久无码精品亚洲日韩按摩| 午夜久久久久久禁播电影| 久久偷看各类wc女厕嘘嘘| 九九精品99久久久香蕉| 国产精品美女久久久久久2018| 久久久久久九九99精品| 久久99热精品| 亚洲精品国产综合久久一线| 精产国品久久一二三产区区别 | 无码人妻精品一区二区三区久久久| 久久99精品国产麻豆宅宅| 国产精品一区二区久久国产| 99久久精品免费看国产免费| 欧美粉嫩小泬久久久久久久 | 久久青青草原精品国产| 91久久婷婷国产综合精品青草| 99久久国产综合精品成人影院| 久久精品无码一区二区三区免费 | a级成人毛片久久| 久久久精品久久久久久 | 久久亚洲精品国产精品婷婷| A级毛片无码久久精品免费| 久久精品国产亚洲欧美| 色综合合久久天天给综看| 久久久一本精品99久久精品66 | 久久精品国产欧美日韩99热| 国产成人无码久久久精品一| 四虎国产精品成人免费久久| 东京热TOKYO综合久久精品| 亚洲第一永久AV网站久久精品男人的天堂AV | 久久99久久99小草精品免视看| 2021最新久久久视精品爱|