旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
北京市海淀區(qū)漫動(dòng)者職業(yè)技能培訓(xùn)學(xué)校 全國(guó)統(tǒng)一咨詢(xún)熱線:010-5367 2995
首頁(yè) > 今日必讀 > UI設(shè)計(jì)有哪些規(guī)范?(二)

UI設(shè)計(jì)有哪些規(guī)范?(二)

時(shí)間:2019-01-04來(lái)源:m.lb577.com點(diǎn)擊量:作者:AAA小助手
時(shí)間:2019-01-04點(diǎn)擊量:作者:AAA小助手
除了軸以外,還有對(duì)稱(chēng)和層級(jí)。以下AAA小編再來(lái)分享一下UI設(shè)計(jì)當(dāng)中的這兩個(gè)相關(guān)概念。全能+的人才,也是從不同的事物中找相似處。從而提高自己的思考能力。

二:對(duì)稱(chēng)

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

1.平衡

對(duì)稱(chēng)令整個(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ì)令人非常舒適,這是平衡給人的感受。
Rdio的APP設(shè)計(jì)就遵循著這樣的設(shè)計(jì)規(guī)則,屏幕兩側(cè)的控件是相同的規(guī)格,這類(lèi)布局很適宜閱讀,用戶會(huì)自覺(jué)地自上到下,從左向右查看。

2.不對(duì)稱(chēng)


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

三:層級(jí)

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

1.尺寸

如果一個(gè)設(shè)計(jì)元素在尺寸上比其他的控件更大,就會(huì)區(qū)分出層級(jí)。毫無(wú)疑問(wèn),我們查看某個(gè)設(shè)計(jì)的時(shí)候,通常會(huì)被最大的元素吸引到。如果一個(gè)建筑物有5個(gè)出窗戶,其中一個(gè)是其他四個(gè)的兩倍大,我們的注意力自然而然會(huì)被吸引過(guò)去。
通過(guò)尺寸來(lái)區(qū)分文章列表層級(jí)的典型就是稍后讀應(yīng)用Pocket。頂部的輪播文章?lián)碛懈蟮膱D片,它的位置和尺寸會(huì)令我們一眼注意到。

2.形狀

如果一個(gè)控件在形狀和形態(tài)上同其他的不一樣,也可以讓它獨(dú)立出一個(gè)層級(jí)。不規(guī)則的設(shè)計(jì)同樣會(huì)令人側(cè)目。建筑物的正面擁有五個(gè)相同的窗戶和一閃大門(mén),你會(huì)立刻注意到門(mén)的獨(dú)特之處。
在Instagram的個(gè)人信息頁(yè)中,圓形的個(gè)人頭像在方形的圖片中別具一格,非常抓人眼球。它會(huì)讓人意識(shí)到,這個(gè)獨(dú)特的東西,更為重要。

3.位置


位置的存在同樣能彰顯層級(jí)的不一樣。在圓圈之內(nèi),中心位置的東西比邊緣部分的看起來(lái)更重要。位于軸線頂端的控件會(huì)顯得比其他部分的優(yōu)先級(jí)更高。
以設(shè)計(jì)應(yīng)用Path的設(shè)計(jì)為例,時(shí)間軸頂點(diǎn)處的用戶頭像就明顯比時(shí)間軸上的其他部分更重要,而這個(gè)地方正好展示的也是用戶頭像。


文章內(nèi)容轉(zhuǎn)自:紐約設(shè)計(jì)師教你UI設(shè)計(jì)的四個(gè)基本原則。

AAA教育,每天發(fā)布UI設(shè)計(jì)資訊,陪你成長(zhǎng)為“全能+”人才。

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

老師想和你聊一聊

?2007-2022/ m.lb577.com 北京漫動(dòng)者教育科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖