移動端UI設計中視覺分隔技巧

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

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

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

1、全出血位分隔線

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

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

2、內嵌分隔線

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

分隔線的替代方案

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

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

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

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

1、留白

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

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

2、色彩對比

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

3、陰影和高度

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

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

4、圖片內容無需單獨的分隔控件

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

文章標題：移動端UI設計中視覺分隔技巧
網站URL：http://www.muchs.cn/news39/161739.html

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

廣告

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