原文作者:Nick Babich
原文地址:https://uxplanet.org/visual-dividers-in-mobile-ui-design-53208de5426f
第一眼看上去,设计app是一件很简单的事情。但是,当你真正开始构建它的时候,事情就变得复杂起来。一开始看起来很简单的事情,但你意识到,如何设计一个确定的元素并不是一个轻松的选择的时候,就变得复杂了。即使是一个简单且普遍的不同内容区块之间的视觉分隔也变得复杂了。
传统分隔线
你可以使用水平(或者竖直)的线来分隔两个相连的内容区块。它们能够帮用户明白内容是以一种固定的节奏和等级来组织的。
通栏的分割线
通栏分割线强调了分割的内容区域,以及需要突出视觉差异的区块。他们在列表和页面布局中分别分隔不同的内容部分(例如,个人信息与联系人信息)或不同的内容元素(例如电子邮件列表)。
内插的分割线
内插分割线区分的是有关联的内容,比如联系人列表的不同部分。内插的分割线能够帮助用户舒畅的浏览条目,并能够以相关联集合的形式呈现出来:整个条目列表成为一个连续的流,引导用户滑动页面。利用短的分割线还可以给重要的信息、标识、或是排序元素(比如字母排序)留下更多的空间。
分割线的替代方式
传统的分割方式能够很好的在电脑屏幕上分割内容,但是在移动应用上会有一个非常大的缺陷——它们在手机屏幕上占据了太多有价值的空间。过多的使用分割还会导致视觉噪声和内容过密,在界面上挤在一起。由于用户倾向于更简洁的界面,让UI回归基本的,必要的元素是成功的关键。这一变化背后的真正意义在于,它将重点转移到内容和功能上,同时消除了多余的元素。
因此,尝试除以元素和间距,而不是分割线区分内容。较少的分隔线将始终为您的界面提供更清洁,更现代和更具功能性的感觉。
留白
留白就是留出空白不放任何元素。好的留白能够让混乱的界面看起来简洁和引人入胜——留白在元素周边创造空间以将它们凸显出来。留白创造了必要的呼吸空间,也让UI看上去不再混乱。
色彩对比
色彩对比是你最有利的设计武器之一,技巧性的运用它你将得到吸引眼球的设计。通过灵活的使用颜色创造性的分割内容。一般来说,你所需要做的就是发现两种合适的对比色,流行的颜色将用户的注意力吸引到屏幕的特定区域,而不是刺眼的笨拙的送到用户面前。从而使得用户更加快速和简单的获得信息。
阴影
阴影和色值能够在UI上创造深度并从视觉上区分不同内容。如何通过使用阴影,而不是通过过于显眼的分割线来区分不同的区块,google的Calendar App是一个很好的例子。
以图片为基础的内容不需要分隔
网格列表中基于图像的内容不需要分隔。因为网格本身会创建视觉区别,网格列表也不需要分隔来将子标题与内容分开。在这种情况下,空格和小标题将这些部分充分分开。
结论
尽管最终目标是简化我们的界面,使它们更具功能性和可用性,但我们应该在分离内容和分隔线时思考两次。开发更清洁的UI设计也意味着删除任何不必要的元素,并且可以做很多事情来改进移动UX,而不添加只占用空间的线元素。