移动端UI中常见的视觉分隔规划技巧

责任编辑NO。许安怡0216 2019-11-10 13:01:54浏览次数:5315  

乍一看许多APP的布局并不杂乱,感觉换成自己也能规划出来,可是当你真的开端着手规划这么一个APP的原型的时分,就会发现工作并不是那么简略。

看着他人现已规划完结的规划或许觉得不难,可是当自己着手的时分,在特定的元素的选取和规划上很简单堕入困局。

这样一个时间段才理解它的难点并不在于工作量的多少,规划者常常深陷于细节构建的囹圄,这才是它的困难之处。

即使是元素与元素之间的分隔方法,都能马马虎虎用一整篇文章来进行讨论。

传统的分隔方法

在UI界面中,最传统也是最常见的分隔方法用的是线,将视觉上或许内容上需求区别的内容用横向或许纵向的细线区别开来,它协助用户了解页面的层次结构,赋予页面内容以组织性。

1、全出血位分隔线

全出血位本来是一个平面印刷中的概念,这儿所说的全出血位分隔线一般用来凸显和着重不同的内容与区块,就像电子邮件中不同邮件之间就会用一条横贯整个屏幕的细线来进行分隔。

鄙人面的Android 的Gmail邮箱的UI傍边,用的分隔线都算是全出血位分割线。这些分隔线给人以“中止”的感觉,让用户明晰地知道边界在哪里。

全出血位分割线将每一个部分都分隔开来。

2、内嵌分隔线

内嵌分隔线和前者不同,它一般用来区别相关的内容,比方联络人列表中不同字母最初的部分,它常常用来作为视觉头绪,便于用户来阅读许多相关的内容,当用户来阅读的时分,它们会作为路标而存在,便于用户快速的翻页阅读。

视觉上,和全出血位分隔线不同,它们一般会更短一点,并且会留下必定的空间给其他的区别元素,比方联络人列表中分隔处的首字母。

分隔线的代替计划

传统的分隔线在桌面端的UI规划上有着悠长的前史和不错的效果,可是它们在移动端UI上有着丧命的缺点:占用空间。

确实,一条线能有多占空间呢?可是实际上,往往一屏需求分隔的内容会许多,分隔线一点也不少。

假如参阅传统的用法,一个界面元素较多的移动端页面上或许会充满了分隔线构成的视觉噪音。

有必要留意一下的是,现在用户越来越倾向于精约的界面,这也使得现在的UI规划会尽或许多的剥离非必须元素,而仅保存根本元素。

这种改变背面实在的要点,是规划重心向着内容和功用搬运,这样的规划自然而然地会让界面看起来愈加简练。

这样一来,分隔界面元素的时分用留白比用分隔线愈加适宜。更少运用的线让界面看起来更洁净,更现代,视觉上也更赋有张力。

1、留白

界面中的留白的区域一般不会放置任何视觉元素。

许多的留白可以让本来杂乱的界面看起来精约而招引人——它让界面元素周围都空出来,让这些元素愈加夺目,锋芒毕露。留白让界面显得愈加富于呼吸感,也愈加简练。

用好留白,你能让界面以非侵略性的方法来区别不同的区域和元素。

2、颜色比照

颜色比照是最强壮的规划方法之一,假如用的好,它能给你带来夺目而英俊的规划。

创造性地运用颜色的差异来区别不同的内容,这傍边的关键是是要操控两种颜色的比照度。

不只要可以在视觉上简单区别,并且不能让人觉得突兀发生出戏感。假如颜色比照操控得好,应该能让用户愈加快速快捷地获取信息。

3、暗影和高度

暗影和高度都能在UI界面上创造出“深度”,适当所以让元素在Z轴高度上发生差异。

最典型的便是Material Design 的规划,谷歌日历的规划很好地展示了怎么凭借暗影和空间,非强制性地区别不同的部分。

暗影的别的一个效果是用来区别堆叠内容的“高度差”,出现相互关系,让其间的某个部分招引用户的留意力。

4、图片内容无需独自的分隔控件

图片内容运用网格来出现的时分,其实是无需专门的线或许其他东西来分隔的,由于网格自身就现已起到了视觉区别的效果了。

鄙人面的事例中,图片之间的留白和副标题都起到区别的效果。

结语

考虑到咱们终究仍是要简化界面,在分隔方法的选取上仍是需求三思而后行的。

在消除不必要的元素之后,在界面的规划上咱们能做的工作还有许多,可是要保证移动端运用者实在的体会的优异,细节的把控就要愈加用心了。

文章来历:UI规划派

原文作者:UI妹儿

IXDC深圳站现已完美闭幕

让咱们咱们一同等待下一个十年!

2020.07.16—07.19

北京·国家会议中心

一同探究更多新或许

将对规划的酷爱连续,咱们下个十年见!

想要了解更多可联络客服

“如果发现本网站发布的资讯影响到您的版权,可以联系本站!同时欢迎来本站投稿!

精彩阅读

阅读排行