雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

優(yōu)秀ui界面設(shè)計(jì)的標(biāo)準(zhǔn)有哪些,學(xué)會(huì)能提高ui設(shè)計(jì)水平

Time: 2020-12-28

ui界面設(shè)計(jì)關(guān)系到用戶的體驗(yàn)感、舒適感,因此ui界面設(shè)計(jì)要更多地考慮用戶的習(xí)慣、喜好。那怎么才能設(shè)計(jì)好的ui作品,今天就讓小編為大家介紹優(yōu)秀ui界面設(shè)計(jì)的標(biāo)準(zhǔn)有哪些吧。

  優(yōu)秀ui界面設(shè)計(jì)的標(biāo)準(zhǔn)有哪些

  一、軸

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

  1、對(duì)齊

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

  2、強(qiáng)化

  雖然軸是一條假想的線,但是如果周?chē)脑氐倪吘壙刂频米銐蛘R,這跳線會(huì)在視覺(jué)中變得更加“明顯”的。最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸,如果一邊有建筑一邊沒(méi)有,那么這種軸線的感覺(jué)不會(huì)那么強(qiáng)烈。

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

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

優(yōu)秀ui界面設(shè)計(jì)

優(yōu)秀ui界面設(shè)計(jì)(圖片來(lái)自網(wǎng)絡(luò))


  4、連續(xù)性

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

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

  二、對(duì)稱

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

  1、平衡

  對(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ì)令人非常舒適,這是平衡給人的感受。

  2、不對(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ì)被眼睛捕捉到,而這樣的差異讓用戶無(wú)法準(zhǔn)確地左右順序閱讀,不對(duì)稱設(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ò)去。

  2、形狀

  如果一個(gè)控件在形狀和形態(tài)上同其他的不一樣,也可以讓它獨(dú)立出一個(gè)層級(jí),不規(guī)則的設(shè)計(jì)同樣會(huì)令人側(cè)目,建筑物的正面擁有五個(gè)相同的窗戶和一閃大門(mén),你會(huì)立刻注意到門(mén)的獨(dú)特之處。

  3、位置

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

優(yōu)秀ui界面設(shè)計(jì)

優(yōu)秀ui界面設(shè)計(jì)(圖片來(lái)自網(wǎng)絡(luò))


  四、韻律

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

  1、模式

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

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

  2、間斷

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

  什么是UI設(shè)計(jì)

  UI設(shè)計(jì)(或稱界面設(shè)計(jì))是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI,互聯(lián)網(wǎng)常用的UI設(shè)計(jì)是虛擬UI,UI即User Interface(用戶界面)的簡(jiǎn)稱。

  好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位,還要讓軟件的操作變得舒適簡(jiǎn)單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。

  以上就是小編為大家介紹的關(guān)于優(yōu)秀ui界面設(shè)計(jì)的相關(guān)內(nèi)容。學(xué)會(huì)ui設(shè)計(jì)并不代表你能設(shè)計(jì)出優(yōu)秀的ui作品,但是了解優(yōu)秀的ui設(shè)計(jì)標(biāo)準(zhǔn)有助于你更好地進(jìn)行ui設(shè)計(jì)。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開(kāi)