>
學(xué)校機(jī)構(gòu) >
交互時(shí)代UI實(shí)訓(xùn)基地 >
學(xué)習(xí)資訊>
交互時(shí)代教你使用線以外的分割方式
交互時(shí)代教你使用線以外的分割方式
140 2017-06-01
在交互時(shí)代的獨(dú)創(chuàng)課程中,有許多實(shí)訓(xùn)的部分,這些實(shí)訓(xùn)內(nèi)容中有web網(wǎng)頁(yè)的UI設(shè)計(jì),有移動(dòng)端APP的UI設(shè)計(jì),還有移動(dòng)端網(wǎng)頁(yè)的UI設(shè)計(jì)等等。而做這些UI設(shè)計(jì),無(wú)疑都會(huì)涉及到一個(gè)內(nèi)容,即是區(qū)域的分割,當(dāng)然,這也是交互時(shí)代的課程中的一個(gè)重點(diǎn),大部分的分割方式都用線的形式,做出各種區(qū)域,這是一種傳統(tǒng)的區(qū)域分割方式,而今天交互時(shí)代給大家?guī)?lái)的,是非傳統(tǒng)的,接下來(lái),就開(kāi)始我們的正文吧。
傳統(tǒng)的線條分割方式在以往的界面設(shè)計(jì)中都起到了不錯(cuò)的效果,不過(guò)在移動(dòng)端的UI設(shè)計(jì)上卻不適用,因?yàn)樗麄冋加每臻g?;蛟S大家都會(huì)想,不就一條線嗎?還能占多大的空間?但其實(shí),我們的一個(gè)頁(yè)面需要隔開(kāi)的內(nèi)容有很多,分割線可少不了。因此如果使用傳統(tǒng)的分割方式,必然是浪費(fèi)空間的。
這樣一來(lái),分隔界面元素的時(shí)候用留白比用分隔線更加合適。更少使用的線讓界面看起來(lái)更干凈,更現(xiàn)代,視覺(jué)上也更富有張力。
留白
在一份UI設(shè)計(jì)中,既然是留白區(qū)域,那么里面肯定是不會(huì)有任何設(shè)計(jì)元素的。而留白能夠讓整個(gè)UI設(shè)計(jì)看起來(lái)很簡(jiǎn)單,并且,利用留白還可以凸顯設(shè)計(jì)元素,讓整個(gè)UI設(shè)計(jì)看上去更簡(jiǎn)潔,也更好看。
用好留白,你能讓界面以非侵略性的方式來(lái)區(qū)分不同的區(qū)域和元素。
色彩對(duì)比
色彩對(duì)比也是分隔的方式之一,可以說(shuō)是一種強(qiáng)大的設(shè)計(jì)手法,運(yùn)用的好,我們的UI設(shè)計(jì)能夠相當(dāng)吸引用戶眼球。利用色彩之間的差異來(lái)區(qū)分不同的內(nèi)容,而這就要看我們隊(duì)色彩使用的程度了,要如何讓兩種色對(duì)更易區(qū)分而又不產(chǎn)生突兀的感覺(jué),是很難的,但是運(yùn)用的好,就可以讓用戶更快速的達(dá)成自己的目的,從而獲得良好的用戶體驗(yàn)。
陰影和高度
陰影和高度都能在UI界面上創(chuàng)造出“深度”,相當(dāng)于是讓元素在Z軸高度上產(chǎn)生差異。最典型的就是MaterialDesign的設(shè)計(jì),谷歌日歷的設(shè)計(jì)很好地展現(xiàn)了如何借助陰影和空間,非強(qiáng)制性地區(qū)分不同的部分。
陰影的另外一個(gè)作用是用來(lái)區(qū)分重疊內(nèi)容的“高度差”,呈現(xiàn)相互關(guān)系,讓其中的某個(gè)部分吸引用戶的注意力。
以上,就是交互時(shí)代關(guān)于分隔方式的一點(diǎn)粗淺見(jiàn)解,當(dāng)然,在UI設(shè)計(jì)中可不僅僅這幾種分隔方式,但是如果你想要了解更多關(guān)于UI設(shè)計(jì)方面的知識(shí),就多多關(guān)注交互時(shí)代官網(wǎng)吧。
請(qǐng)聯(lián)系網(wǎng)站客服,了解詳細(xì)的優(yōu)惠課程信息~
優(yōu)質(zhì)、權(quán)威、便捷、省心
掃一掃
獲取更多福利
獵學(xué)網(wǎng)企業(yè)微信
獵學(xué)網(wǎng)訂閱號(hào)
獵學(xué)網(wǎng)服務(wù)號(hào)