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

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

時(shí)間:2019-01-04來源:m.lb577.com點(diǎn)擊量:作者:AAA小助手
時(shí)間:2019-01-04點(diǎn)擊量:作者:AAA小助手
設(shè)計(jì)最有趣的地方在于它的通用性,不論是音樂、建筑還是工業(yè),設(shè)計(jì)的規(guī)則大同小異。UI設(shè)計(jì)也是如此。從某種方面來說,設(shè)計(jì)也開始趨于全能+方向的發(fā)展了。
今天AAA小編轉(zhuǎn)載一紐約妹子Melissa做的分享:總結(jié)了從建筑到產(chǎn)品UI的四個(gè)設(shè)計(jì)的基本原則。

一:軸
軸在UI設(shè)計(jì)中是最基本、最常用的概念,也是用來組織界面結(jié)構(gòu)的重要核心。簡單來說,軸是在設(shè)計(jì)的時(shí)候組織一系列元素的假象線,在下面的設(shè)計(jì)圖中,軸以虛線的方式被標(biāo)注出來。

1.對齊

軸最常見于對稱元素的使用,當(dāng)元素被布置成軸對稱的布局的時(shí)候,會給人有序感。就像生活中絕大多數(shù)的事情一樣,我們更傾向于享受有序的的東西,它們令人感覺平穩(wěn)、舒適、平易近人。最簡單的一個(gè)例子就是iTunes 程序中的專輯列表的設(shè)計(jì),所有的專輯列表在界面的左側(cè)保持對齊,圍繞虛線軸軸對稱。

2.強(qiáng)化

雖然軸是一條假想的線,但是如果周圍的元素的邊緣控制得足夠整齊,這跳線會在視覺中變得更加“明顯”的。最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸,如果一邊有建筑一邊沒有,那么這種軸線的感覺不會那么強(qiáng)烈。從產(chǎn)品設(shè)計(jì)的角度上來看,Twitter 的時(shí)間線設(shè)計(jì)就是一個(gè)很好的案例,左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺。

3.運(yùn)動(dòng)

當(dāng)我們碰到某先線條的時(shí)候,視覺會很自然地沿著這些方向運(yùn)動(dòng),就如同我們站在街上,會自覺地沿著街道的兩頭走動(dòng)。兩個(gè)端點(diǎn)決定了線,界定了開始和結(jié)束的地方,線,或者說軸線的存在會引導(dǎo)和提示運(yùn)動(dòng)的方向。
SoundCloud中,音軌沿著一條既定的水平軸線運(yùn)動(dòng),隨著音樂的播放,音軌自然地自左向右勻速運(yùn)動(dòng)。


4.連續(xù)性

如果終點(diǎn)是不確定的,那么你通常會沿著軸線的方向?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ì)手法。
Pinterest的APP中就是這樣做的,持續(xù)不斷的圖片沿著中軸線的防線持續(xù)不斷的滾動(dòng)下去,只要你有興趣一直觀看下去。

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

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

預(yù)約申請免費(fèi)試聽課

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

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

老師想和你聊一聊

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

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

網(wǎng)站地圖