不止是划条线!移动端UI中常见的视觉分隔设计技巧

即使是元素与元素之间的分隔方式,都能随随便便用一整篇文章来进行探讨。


即使是元素与元素之间的分隔方式,都能随随便便用一整篇文章来进行探讨。

不止是划条线!移动端UI中常见的视觉分隔设计技巧

乍一看许多APP的布局并不复杂,感觉换成自己也能设计出来,但是当你真的开始着手设计这么一个APP的原型的时候,会发现事情并不是那么简单。看着别人已经设计完成的设计可能觉得不难,可是当自己动手的时候,在特定的元素的选取和设计上很容易陷入困局;这个时候才明白它的难点并不在于工作量的多少,设计者常常深陷于细节构建的囹圄,这才是它的困难之处。

传统的分隔方式

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

不止是划条线!移动端UI中常见的视觉分隔设计技巧

1、全出血位分隔线

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

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

不止是划条线!移动端UI中常见的视觉分隔设计技巧

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

2、内嵌分隔线

内嵌分隔线和前者不同,它通常用来区分相关的内容,诸如联系人列表中不同字母开头的部分,它常常用来作为视觉线索,便于用户来浏览大量相关的内容,当用户来浏览的时候,它们会作为路标而存在,便于用户快速的翻页浏览。视觉上,和全出血位分隔线不同,它们通常会更短一点,并且会留下一定的空间给其他的区分元素,比如联系人列表中分隔处的首字母。

不止是划条线!移动端UI中常见的视觉分隔设计技巧

分隔线的替代方案

传统的分隔线在桌面端的UI设计上有着悠久的历史和不错的效果,但是它们在移动端UI上有着致命的缺陷:占用空间。的确,一条线能有多占空间呢?但是实际上,往往一屏需要分隔的内容会很多,分隔线一点也不少。如果参考传统的用法,一个界面元素较多的移动端页面上可能会充满了分隔线构成的视觉噪音。值得注意的是,现在用户越来越倾向于简约的界面,这也使得如今的UI设计会尽可能多的剥离次要元素,而仅保留基本元素。这种转变背后真正的重点,是设计重心向着内容和功能转移,这样的设计自然而然地会让界面看起来更加简洁。

这样一来,分隔界面元素的时候用留白比用分隔线更加合适。更少使用的线让界面看起来更干净,更现代,视觉上也更富有张力。

1、留白

界面中的留白的区域通常不会放置任何视觉元素。大量的留白能够让原本凌乱的界面看起来简约而吸引人——它让界面元素周围都空出来,让这些元素更加醒目,脱颖而出。留白让界面显得更加富于呼吸感,也更加简洁。

不止是划条线!移动端UI中常见的视觉分隔设计技巧

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

2、色彩对比

色彩对比是最强大的设计手法之一,如果用的好,它能给你带来醒目而帅气的设计。创造性地使用色彩的差异来区分不同的内容,这当中的关键是是要控制两种色彩的对比度。不仅要能够在视觉上容易区分,而且不能让人觉得突兀产生出戏感。如果色彩对比控制得好,应该能让用户更加快速便捷地获取信息。

不止是划条线!移动端UI中常见的视觉分隔设计技巧

3、阴影和高度

阴影和高度都能在UI界面上创造出“深度”,相当于是让元素在Z轴高度上产生差异。最典型的就是Material Design 的设计,谷歌日历的设计很好地展现了如何借助阴影和空间,非强制性地区分不同的部分。

不止是划条线!移动端UI中常见的视觉分隔设计技巧

阴影的另外一个作用是用来区分重叠内容的“高度差”,呈现相互关系,让其中的某个部分吸引用户的注意力。

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

图片内容使用网格来呈现的时候,其实是无需专门的线或者其他东西来分隔的,因为网格本身就已经起到了视觉区分的作用了。在下面的案例中,图片之间的留白和副标题都起到区分的作用。

不止是划条线!移动端UI中常见的视觉分隔设计技巧

结语

考虑到我们最终还是要简化界面,在分隔方式的选取上还是需要三思而后行的。在消除不必要的元素之后,在界面的设计上我们能做的事情还有很多,但是要确保移动端用户体验的优异,细节的把控就要更加用心了。

 

译文来自:优设

译者:@陈子木

原文地址:uxplanet

原文作者:Nick Babich

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27563/

(0)
CatherineCatherine
上一篇 2017-05-18 04:29
下一篇 2017-05-18 07:49

相关推荐

  • 交互进阶指南:如何扫除交互设计路上的3大障碍?

    目前网上基本没有对做交互设计师的难点进行系统的归纳和总结。基于这个原因我总结交互设计师的三大障碍以及如何扫除交互设计师路上的3大障碍。

    2017-04-29
  • 2个方向4个维度,探索电商运营活动中的交互设计

    设计是为了达成一定的商业目标服务的,设计本身是我们的表达手段,在达成业务及用户目标的过程中需要一定的设计指导准则以达到优秀的使用体验。本文作者将针对电商运营活动的交互设计,讨论了交互设计师需要如何思考?

    2017-05-06
  • 一道交互设计笔试题的思考

    又到了一年两度的招聘季时节,这个时间肯定有一大堆人都在海投面试。恰好最近又做了一份笔试题,顺便就来聊一聊交互设计笔试题要怎么做吧。 我碰到过的交互设计笔试题有两种,一种就是两三个小时内给你三四道题,然…

    2016-04-13
  • 【原译】迪士尼中的UX(下篇)

    上次有简单介绍迪士尼十二原则的基本概念,这篇文章则是韩国pxd设计小组与迪士尼设计大师Glen Keane先生的一次更加深入的访谈与讨论。 在正式开始这篇文章之前,先给大家稍微展示动画《Duet》中的一个小片段。《Due…

    2015-10-27
  • 【交互体验】让你事半功倍的交互体验自查清单

    点击上方“蓝字”可以订阅哦!小编推荐:刚画完的原型自我感觉良好,当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景,那么这篇文章对你绝对有用。事不宜迟,请看下文。体验清单起因去年底看朋友出国前用‘穷游清单’给自己列清单,她说列的清单可以帮她在出行前检查一下是否有遗漏东西,避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生,是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。在平时设计...

    2018-01-30
  • 【优秀作业展示】交互设计基础(二)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第二期申婉彤产品设计15101高铁购票界面设计地点选择日期选择车次车座选择身份认证界面支付界面支付宝支付银行卡支付01Te...

    2018-04-22
  • 【案例】LOFTER 信息框架改版(iOS版)

    对于一款APP的信息框架改版,可以分为以下几个步骤 竞品的信息框架分析 目的:找出差异点和共同点 作用:差异点可以根据产品的定位,做特色设计,成为产品特征;共同点是指同类产品的框架/布局共同点,可以用来寻…

    2016-07-01
  • 对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • APPLE WATCH 中文手册:通知--自定义通知界面

    自定义通知界面含有两个独立的界面:一个静态界面,一个动态界面。动态界面显示了完整的自定义通知内容样式,并且它可以包含由 WatchKit 扩展提供的定制内容和图形。静态界面是一个简单的界面,它仅仅只含有通知的…

    2015-06-15
  • 完美界面设计秘诀:界面设计的八大黄金法则

    只要你的设计涉及到人与界面之间的交互,这八大规则在设计过程中至关重要。“这个功能减轻了焦虑,因为用户知道即便操作失误,之前的操作也可以被撤销,鼓励用户去大胆放手探索。”

    2017-08-04