創(chuàng)新互聯(lián)指出：許多app應(yīng)用程序并不復(fù)雜的布局，那么一看的話,覺得還可以設(shè)計(jì)的,但是當(dāng)你真正開始設(shè)計(jì)一個(gè)原型應(yīng)用程序,會(huì)發(fā)現(xiàn)它并不那么簡(jiǎn)單?？磩e人已經(jīng)完成設(shè)計(jì)可能會(huì)覺得很容易,但當(dāng)自己動(dòng)手特定元素的選擇和設(shè)計(jì)是很容易落入陷阱,這時(shí)間來理解它的難度不在于多少工作量,設(shè)計(jì)師常常陷入細(xì)節(jié)建造監(jiān)獄,這是它的難度。即使是元素和元素之間的分離,不能隨隨便便用一整篇文章來討論。

傳統(tǒng)的分隔方式

在UI中,線是較為傳統(tǒng)的和非常普遍的分離方法,在視覺上和內(nèi)容上的內(nèi)容需要區(qū)分辨別與橫線或豎線,它幫助用戶了解頁面的層次結(jié)構(gòu),給組織的頁面內(nèi)容。

1、全出血位分隔線

全出血位本來是一個(gè)在印刷中的概念，在此用在移動(dòng)端視覺分割設(shè)計(jì)上，一般來說是用來顯示和強(qiáng)調(diào)不同的內(nèi)容和塊像不同的郵件將使用分離的細(xì)線來劃分整個(gè)屏幕。在Android Gmail的用戶界面,使用分界線充滿流血分配器。分離線給人以“停止”的感覺,讓用戶知道線路清晰。

全出血位分割線將每一個(gè)部分都分隔開來。

2、內(nèi)嵌分隔線

內(nèi)聯(lián)分離線和全出血位分割線是不同的,它一般是用來區(qū)分相關(guān)要展現(xiàn)的內(nèi)容,如不同信聯(lián)系人列表的一部分,通常用作視覺線索,為了方便用戶瀏覽大量相關(guān)內(nèi)容,當(dāng)用戶瀏覽時(shí),他們將作為路標(biāo),方便用戶快速翻頁瀏覽。視覺上,全出血分界線是不同的,他們通常是有點(diǎn)短,并將留一些空間用來區(qū)別其他的元素,如在聯(lián)系人列表的第一個(gè)字母。

分隔線的替代方案

傳統(tǒng)的分隔線在桌面端的UI設(shè)計(jì)上有著悠久的歷史和不錯(cuò)的效果，但是它們?cè)谝苿?dòng)端UI上有著致命的缺陷：占用空間。的確，一條線能有多占空間呢?但是實(shí)際上，往往一屏需要分隔的內(nèi)容會(huì)很多，分隔線一點(diǎn)也不少。如果參考傳統(tǒng)的用法，一個(gè)界面元素較多的移動(dòng)端頁面上可能會(huì)充滿了分隔線構(gòu)成的視覺噪音。值得注意的是，現(xiàn)在用戶越來越傾向于簡(jiǎn)約的界面，這也使得如今的UI設(shè)計(jì)會(huì)盡可能多的剝離次要元素，而僅保留基本元素。這種轉(zhuǎn)變背后真正的重點(diǎn)，是設(shè)計(jì)重心向著內(nèi)容和功能轉(zhuǎn)移，這樣的設(shè)計(jì)自然而然地會(huì)讓界面看起來更加簡(jiǎn)潔。

傳統(tǒng)的分界線在桌面的UI設(shè)計(jì)中有著長(zhǎng)遠(yuǎn)的歷史，設(shè)計(jì)的最終所展示的效果也是不錯(cuò)的,但是它們?cè)谝苿?dòng)端用戶界面有一個(gè)致命缺陷:占用空間。確實(shí),一條線可以占空間?但事實(shí)上,很多內(nèi)容往往需要一個(gè)屏幕空間,分界線往往是不能夠少的。如果參考傳統(tǒng)用法,移動(dòng)終端界面元素更多頁面可能充滿了視覺噪聲成分的分界線。需要注意的是,現(xiàn)在用戶越來越傾向于簡(jiǎn)單的界面,它也將使今天的UI設(shè)計(jì)盡可能分離僅次于首要的元素,和僅保留最基本的元素。

這一個(gè)設(shè)計(jì)轉(zhuǎn)變的過渡實(shí)際上，在它的背后是內(nèi)容和功能轉(zhuǎn)移，所以整個(gè)界面看起來比較簡(jiǎn)潔

通過這種方式,使用空白界面元素也就是所謂的留白更合適,而不是分界線。分界線較少的使用讓整個(gè)界面看起來更清爽,更現(xiàn)代化,在視覺上富有沖擊力。

1、留白

過多的留白可以讓原本雜亂無章的界面看起來簡(jiǎn)單的和有吸引力的，因此不會(huì)放置任何與頁面相關(guān)的視覺元素——讓界面元素是空出來,讓這些元素更加引人注目,脫穎而出。留白讓界面看起來更充滿氣息的感覺,也更簡(jiǎn)潔。

留白如果能夠使用的恰當(dāng)，用在對(duì)的界面上，就可以讓界面以親和有力的方式來區(qū)分不同的區(qū)域和元素。

2、色彩對(duì)比

色彩對(duì)比是最強(qiáng)大的設(shè)計(jì)手法之一,如果使用,它可以為你帶來一個(gè)聰明和英俊帥氣的設(shè)計(jì)。創(chuàng)造性使用色差來區(qū)分不同的內(nèi)容,關(guān)鍵是要控制兩種顏色對(duì)比。不僅在視覺上很容易區(qū)分,但不能讓人感覺突然覺得戲劇感。如果色彩對(duì)比控制好,應(yīng)該能夠讓用戶更快速和方便地訪問信息。

3、陰影和高度

陰影和高度可以創(chuàng)建UI界面所謂的深度,那么讓元素產(chǎn)生的不同是在三維坐標(biāo)Z軸的高度。最典型的材料移動(dòng)端設(shè)計(jì)是谷歌日歷的設(shè)計(jì)顯示了如何借助影子和空間,非強(qiáng)制性區(qū)域分為不同的部分。

另一個(gè)功能是用來區(qū)分的影子重疊內(nèi)容“高度差”,介紹了關(guān)系,他們的一部分來吸引用戶的注意力。

4、圖片內(nèi)容無需單獨(dú)的分隔控件

使用網(wǎng)格顯示的圖像內(nèi)容,它是沒有專線或其他東西分開,因?yàn)榫W(wǎng)格本身視覺區(qū)別已經(jīng)發(fā)揮了重要作用。在下面的示例中,圖片和字幕都扮演一個(gè)角色之間的留白。

文章標(biāo)題：移動(dòng)端UI設(shè)計(jì)中視覺分隔技巧
網(wǎng)站URL：http://www.rwnh.cn/news39/161739.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、App開發(fā)、自適應(yīng)網(wǎng)站、微信小程序、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)