移動端UI設(shè)計中視覺分隔技巧

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

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

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

1、全出血位分隔線

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

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

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

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

分隔線的替代方案

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

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

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

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

1、留白

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

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

2、色彩對比

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

3、陰影和高度

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

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

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

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

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

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

廣告

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