激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢(xún)電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

建立UI設(shè)計(jì)系統(tǒng)的規(guī)范有多重要，以及如何建立?

發(fā)布時(shí)間：2024-03-12 11:09:54 瀏覽量：175次

要想使界面看起來(lái)整潔漂亮，系統(tǒng)性的規(guī)范是非常重要的，而且程序員們也喜歡這樣的設(shè)計(jì)稿，因?yàn)橛袟l理的設(shè)計(jì)數(shù)值開(kāi)發(fā)起來(lái)也會(huì)更方便。

初學(xué)者往往會(huì)出現(xiàn)這樣的情況，在設(shè)計(jì)了某一個(gè)元素的尺寸后，又反復(fù)地修改，為了避免這種情況，需要就需要建立一個(gè)基本的規(guī)范，即“8像素網(wǎng)格”。

為了使整個(gè)頁(yè)面開(kāi)啟了整潔規(guī)范，首先要確定一個(gè)基本的數(shù)值，雖然取多少數(shù)值可以按自己的感覺(jué)來(lái)，但最好還是選一個(gè)公認(rèn)的最合適的數(shù)值，這里就是推薦“8像素網(wǎng)格”。


那么為什么是8像素而不是別的尺寸

這是因?yàn)?像素是最小的適合一切元素的尺寸單位，而且可以被4和2整除，如果是10，那么整除之后，就會(huì)得到5像素，2.5像素，眾所周知，在做ui設(shè)計(jì)時(shí)，需要盡量避免帶有小數(shù)點(diǎn)的像素單位。


使用8像素網(wǎng)格有什么好處

1，可以使工作更快更高效的完成。

2，在和開(kāi)發(fā)人員配合時(shí)，可以做出快速的調(diào)整，并且可以確保界面的一致性。

3，也是最重要的一點(diǎn)，可以使用戶(hù)更容易對(duì)產(chǎn)品產(chǎn)生好感。

使用網(wǎng)格可以將所有的元素放置在精確的位置上，網(wǎng)格系統(tǒng)構(gòu)成了整個(gè)頁(yè)面的骨架，框定了每個(gè)板塊之間的界限，這樣可以使整個(gè)頁(yè)面更加一致。

至于創(chuàng)建網(wǎng)格的數(shù)量和大小則是沒(méi)有具體規(guī)定的，只取決于你的需求，你的設(shè)計(jì)w越細(xì)致，則網(wǎng)格需要的列數(shù)越多。

還有一點(diǎn)就是要使用前面強(qiáng)調(diào)的8像素或者8的倍數(shù)的像素?cái)?shù)值，來(lái)定義元素或者文本的邊界與范圍。

如果你經(jīng)常欣賞一些好的設(shè)計(jì)作品就會(huì)發(fā)現(xiàn)，他們的字體大小是有統(tǒng)一性的，在我們做設(shè)計(jì)的時(shí)候也要注意這一點(diǎn)，同樣的文本屬性下，千萬(wàn)不要一會(huì)兒用31，一會(huì)兒用30，一會(huì)兒32，最好統(tǒng)一為30。


標(biāo)準(zhǔn)字體帶來(lái)的兩個(gè)好處

1，設(shè)計(jì)將更加一致

2，加快設(shè)計(jì)進(jìn)度，提高效率。


字體排版

關(guān)于文字排版，與網(wǎng)格不同，它是有經(jīng)過(guò)大量驗(yàn)證，得出的相對(duì)固定的尺寸，分別是12、14、16、18、20、24、30、36、48、60和72像素。

文字行高

定義了字體大小后，還要注意字體的行距和間距，一般來(lái)說(shuō)，文字的行距比例為4像素，比如16像素的字體，行距可以設(shè)置為24，字體20，則行距32。

眾所周知，在所有的顏色中，可以有很多種色彩組合，但是關(guān)于界面中顏色的搭配卻不能隨意的按照色彩理論搭配，以免造成頁(yè)面中配色的混亂，在ui設(shè)計(jì)中，一般在確定了兩到三種主副色之后，還需給每個(gè)顏色提取不同明度的色值，以便用于不同的頁(yè)面元素或場(chǎng)景。

然后以選定的顏色為基礎(chǔ)色，向左側(cè)或右側(cè)選擇需要使用的顏色，并且不一定只能用選定的基礎(chǔ)色作為實(shí)際主色，可以根據(jù)實(shí)際情況做出選擇。

在進(jìn)行設(shè)計(jì)時(shí)，通常將使用無(wú)數(shù)個(gè)圖標(biāo)，按鈕和其他組件，在用戶(hù)不同的操作中，通常一個(gè)元素會(huì)有多種狀態(tài)的變化，所以也要預(yù)先準(zhǔn)備幾種尺寸和樣式，但是數(shù)量不宜過(guò)多。在設(shè)計(jì)過(guò)程中，不要突然加入其他尺寸，也盡量不要調(diào)整任何組件的尺寸。相反，只需使用您已經(jīng)定義的設(shè)計(jì)，整個(gè)設(shè)計(jì)就會(huì)一致和整潔完美了。

讓我們以按鈕為例。首先要定義它們的主次關(guān)系。所以要設(shè)定一個(gè)主要按鈕，一個(gè)次要按鈕。并且為每個(gè)按鈕指定其狀態(tài)（有效，無(wú)效）和顏色變體。當(dāng)然，和上面說(shuō)的一樣，最好數(shù)量盡可能少。

例如ui設(shè)計(jì)師在設(shè)計(jì)工作中經(jīng)常會(huì)使用陰影。但是，對(duì)于經(jīng)驗(yàn)不足的設(shè)計(jì)師來(lái)說(shuō)，陰影有時(shí)會(huì)很難弄。創(chuàng)建陰影時(shí)，必須設(shè)置陰影沿x軸和y軸的距離，還有模糊半徑，顏色和透明度。需要花費(fèi)很多時(shí)間進(jìn)行微調(diào)，所以要在設(shè)計(jì)之前先準(zhǔn)備好這些，準(zhǔn)備一組陰影（使用與顏色相同的方法），然后在整個(gè)設(shè)計(jì)過(guò)程中直接應(yīng)用，其他元素的屬性亦同此理。

公眾號(hào)：知圖設(shè)計(jì)院

每天分享一篇國(guó)外優(yōu)質(zhì)設(shè)計(jì)翻譯文章，歡迎關(guān)注。

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定