好的優(yōu)秀UI界面設(shè)計(jì)有哪些設(shè)計(jì)的標(biāo)準(zhǔn)和注意事項(xiàng)？

性關(guān)系到用戶的體驗(yàn)感、舒適感，因此ui界面設(shè)計(jì)要更多地考慮用戶的習(xí)慣和喜好，那怎么才能設(shè)計(jì)好的ui作品?優(yōu)秀ui界面設(shè)計(jì)的標(biāo)準(zhǔn)有哪些呢？

一、軸線

軸在UI設(shè)計(jì)中是最基本、最常見的概念，也是用來組織界面結(jié)構(gòu)的重要核心。簡單說來，軸線是在設(shè)計(jì)的時(shí)候組織一系列元素的假象的輔助線。

1.1、對(duì)齊

軸最常見于對(duì)稱元素的使用，當(dāng)元素被布置成軸對(duì)稱的布局的時(shí)候，會(huì)給人有序感。就像生活中絕大多數(shù)的事情一樣，我們更傾向于享受有序的的東西，它們令人感覺平穩(wěn)、舒適、平易近人。

1.2、運(yùn)動(dòng)

當(dāng)我們碰到某條線條的時(shí)候，視覺會(huì)很自然地沿著這些方向運(yùn)動(dòng)，就如同我們站在街上，會(huì)自覺地沿著街道的兩頭走動(dòng)。兩個(gè)端點(diǎn)決定了線，界定了開始和結(jié)束的地方，線或者說軸線的存在會(huì)引導(dǎo)和提示運(yùn)動(dòng)的方向。

1.3、強(qiáng)化

雖然軸是一條假想的線，但是如果周圍的元素的邊緣控制得足夠整齊，會(huì)在視覺中變得更加“明顯”的。最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸，如果一邊有建筑一邊沒有，那么這種軸線的感覺不會(huì)那么強(qiáng)烈。

1.4、連續(xù)性

如果終點(diǎn)是不確定的，那么你通常會(huì)沿著軸線的方向?yàn)g覽/運(yùn)動(dòng)，直到你找到感興趣的東西，或者感到厭倦并關(guān)閉應(yīng)用。

在建筑學(xué)中，未清楚界定的終點(diǎn)非常少見，因?yàn)榻ㄖ男藿ㄍǔ]法永遠(yuǎn)持續(xù)下去，但是UI設(shè)計(jì)則不一樣，無限地滾動(dòng)下去是無比受歡迎的設(shè)計(jì)手法。

二、對(duì)稱

當(dāng)元素被均勻地放置在軸線的兩側(cè)之時(shí)，他們構(gòu)成了對(duì)稱的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對(duì)應(yīng)之時(shí)，它們就形成了完美對(duì)稱。

2.1、不對(duì)稱

如果軸線兩側(cè)的控件布置不再是一一對(duì)應(yīng)尺寸相近，那就是不對(duì)稱的設(shè)計(jì)，不對(duì)稱的設(shè)計(jì)會(huì)給人明顯的失衡感，可能會(huì)令人不舒服，但是也能造就殘缺美，當(dāng)然這要看你具體怎么做。雖然Pinteret的APP設(shè)計(jì)在整體上是沿著中軸線對(duì)稱的(寬度一致)，但是兩邊的界面控件并非是對(duì)稱的，它們的高度并不一致，位置也是錯(cuò)落的，稍微一點(diǎn)的落差都會(huì)被眼睛捕捉到，而這樣的差異讓用戶無法準(zhǔn)確地左右順序閱讀，不對(duì)稱設(shè)計(jì)打破了設(shè)計(jì)的平衡性和舒適性，但是也可以緩解了規(guī)律性設(shè)計(jì)帶來的視覺疲勞。

2.2、平衡

對(duì)稱令整個(gè)設(shè)計(jì)更加平衡，當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時(shí)，會(huì)給人以協(xié)調(diào)和諧的設(shè)計(jì)感。當(dāng)我們?cè)谝?guī)劃街道兩側(cè)的房屋建設(shè)的時(shí)候，如果左右兩側(cè)都是5間大小一致的房子，當(dāng)你走在街上的時(shí)候這種平衡的設(shè)計(jì)會(huì)令人非常舒適，這是平衡給人的感受。

三、層級(jí)

當(dāng)某個(gè)元素出現(xiàn)在比其他元素更重要的位置的時(shí)候，層級(jí)就出現(xiàn)了。

3.1、位置

位置的存在同樣能彰顯層級(jí)的不一樣，在圓圈之內(nèi)，中心位置的東西比邊緣部分的看起來更重要，位于軸線頂端的控件會(huì)顯得比其他部分的優(yōu)先級(jí)更高。

3.2、尺寸

如果一個(gè)設(shè)計(jì)元素在尺寸上比其他的控件更大，就會(huì)區(qū)分出層級(jí)。毫無疑問，我們查看某個(gè)設(shè)計(jì)的時(shí)候，通常會(huì)被最大的元素吸引到，如果一個(gè)建筑物有5個(gè)窗戶，其中一個(gè)是其他四個(gè)的兩倍大，我們的注意力自然而然會(huì)被吸引過去。

3.3、形狀

如果一個(gè)設(shè)計(jì)控件在形狀和形態(tài)上與其他的不同，不規(guī)則的設(shè)計(jì)同樣會(huì)令人側(cè)目，建筑物的正面擁有五個(gè)相同的窗戶和一扇大門，你會(huì)立刻注意到門的獨(dú)特之處。

四、韻律

UI設(shè)計(jì)和建筑設(shè)計(jì)同樣有著韻律之美，重復(fù)的模式會(huì)營造出獨(dú)特的節(jié)奏之美。

4.1、間斷

當(dāng)節(jié)奏被間隔打斷的時(shí)候，會(huì)形成不同的層級(jí)，聽歌的時(shí)候，均勻的節(jié)奏被其他的音樂元素打斷的時(shí)候，你會(huì)意識(shí)到這是比較特別的部分。

4.2、模式

理解韻律最直接的方式就是聽歌，音樂擁有節(jié)奏感，絕大多數(shù)的音樂遵循著相同的節(jié)拍，節(jié)拍就是音樂模式的一部分。

這方面最典型的APP是Airbnb，APP列表中每一間房子都占據(jù)一個(gè)模塊，模塊中有著大小相同的圖片，價(jià)格、位置和房東信息和圖片的相對(duì)位置一定，且排版勻稱舒服，兩個(gè)模塊之間的間距也相同，當(dāng)你瀏覽的時(shí)候，熟悉的節(jié)奏會(huì)讓你清楚地看到關(guān)鍵信息。

小貼士：什么是UI設(shè)計(jì)

UI設(shè)計(jì)（或稱UI界面設(shè)計(jì)）是指對(duì)產(chǎn)品的一種人機(jī)交互、操作邏輯、界面美觀的系統(tǒng)而整體的設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)常用的UI設(shè)計(jì)就是虛擬UI，UI即UserInterface(用戶界面)的簡稱。