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

2022-05-31 分類：網站建設

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

傳統的分隔方式

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

1、全出血位分隔線

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

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

2、內嵌分隔線

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

分隔線的替代方案

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

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

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

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

1、留白

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