移動(dòng)端UI設(shè)計(jì)中視覺(jué)分隔技巧

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

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

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

1、全出血位分隔線(xiàn)

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

全出血位分割線(xiàn)將每一個(gè)部分都分隔開(kāi)來(lái)。

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

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

分隔線(xiàn)的替代方案

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

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

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

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

1、留白

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

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

2、色彩對(duì)比

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

3、陰影和高度

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

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

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

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

網(wǎng)站名稱(chēng)：移動(dòng)端UI設(shè)計(jì)中視覺(jué)分隔技巧
網(wǎng)頁(yè)地址：http://muchs.cn/news/161739.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、做網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站排名、面包屑導(dǎo)航

廣告

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