<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 圖標(biāo)設(shè)計(jì)九大統(tǒng)一性

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

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

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

    image.png

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

    image.png

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

     

    日歷

    鏈接

    個(gè)人資料

    存檔

    主站蜘蛛池模板: 人妻少妇精品中文字幕av蜜桃| 久久99久久99精品免视看动漫| 人人妻人人澡人人爽人人精品电影| 久久国产乱子伦精品免费强| 99久久99这里只有免费的精品| 97热久久免费频精品99| 久久精品水蜜桃av综合天堂| 国产精品无码免费播放| 九色精品视频在线观看| 日本午夜精品理论片A级APP发布 | 亚洲精品夜夜夜妓女网| 亚洲中文久久精品无码| 久久精品人成免费| 鲸鱼传媒绿头鱼实验室之炮机测评日韩精品一级毛 | 国产精品自产拍在线18禁| 国产高清在线精品二区一| 久久精品国产精品亚洲精品| 98精品国产自产在线XXXX| 久久精品国产精品亚洲| 婷婷久久精品国产| 国产精品青青在线观看爽香蕉| 无码精品第一页| 黑人无码精品又粗又大又长| 夜夜爽一区二区三区精品| 国产精品亚洲欧美大片在线看| 精品一区二区三区免费| 久久精品欧美日韩精品| 午夜精品久久久久久久| 国产精品欧美日韩| 精品无码AV无码免费专区| 性欧洲精品videos| 亚洲AV永久无码精品网站在线观看| 亚洲精品欧美二区三区中文字幕| 国产99视频精品免视看7| 欧美精品v欧洲精品| 日韩人妻无码精品一专区| 亚洲2022国产成人精品无码区| 亚洲情侣偷拍精品| 亚洲精品V欧洲精品V日韩精品| 亚洲精品午夜无码电影网| 亚洲精品无码国产|