不止是划条线!移动端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

相关推荐

  • 计算机交互设计简史,从穿孔纸带到人工智能

    点击上方“想当然”,选择“置顶公众号优质文章,第一时间送达不管是有意识的还是无意识的,谈到交互设计,人人心中都有一个或清晰或模糊的理解。这些形形色色的理解都各有各的道理,但往往又有不尽然的地方。何为交互?交互(inter-action),从字面上理解,就是交流和互动。说得学术一点,就是两个对象之间的一系列响应。举个简单的例子,早上你出门遛狗时,隔壁老王正在跑步,你冲他一笑,说句:“早上好呀。”老王点头、微笑,说“早啊” —— 这就是一个...

    2018-04-07
  • 新项目丨青岛东海凤凰:宽建筑[UCD]挑战中国第一仿生建筑

    *文章已由原作者授权发布▲凤凰中心效果图作者:王宽方案设计方:宽建筑 [北京城建] KUAN architects [UCD]项目名称:青岛市西海岸新区文化活动中心地址:中国,青岛,金沙滩设计团队:王宽,周媛,李鹏,梁文杰等结构咨询:中冶京诚工程技术有限公司  卢理杰数字模型&BIM咨询:北京华茂云信息科技有限责任公司施工方:北京城建集团(建筑部)、北京城建集团十六公司、城建精工钢构公司面积:31,313平方米状态:主体结构已封顶预计建...

    2018-03-13
  • 如何编辑交互设计说明书

    当你搜索并查阅了很多网上资料后,仍可能不会编辑交互设计说明书。那么究竟该怎么编辑交互设计说明书呢?在编辑的过程中又有哪些要点和注意事项呢?

    2016-08-05
  • 数据交互的常见方式及案例

    交互设计师作为整个项目贯穿始终的一根线,除了有自身对需求的理解把控以及对页面布局的拿捏以外,充分吸取各种不同的思维方式,才能让我们在打怪升级的路上越走越远。

    2017-05-07
  • Axure学习笔记 | 初识Axure

    本文结构:辰安笔记—01—说点题外话唠叨之语:这个是我在B站上看学习视频自己整理的笔记。话说我的学习笔记基本上是从视频上扒下来,然后加入一些自己的思考。我在规划做分享Axure的时候也想过,网上资源那么多,我做这个有必要吗?有用吗?思考一番,做这件事情虽然艰苦,费力不讨好,但是有收益。我现在就是把自己当作一个产品来打造。通过这些事情有以下收益:1.对自己来说,知识更加系统,当然也可能会让我更加僵化,这个我会注意;2.对招聘者来说,TA可...

    2018-04-29
  • 交互设计规范

    交互设计规范+iPhone界面尺寸:320*480、640*960、640*1136iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。如果是我来做的话,我会使用...

    2018-03-21
  • 《用户体验要素》读书笔记:要理解为何这样做产品

    《用户体验要素》是一本实用类书,试图回答如何以用户体验为中心进行产品设计。作者通过构建自下而上的五层模型:战略层,范围层,结构层,框架层,表现层;来将以用户体验用户需求为中心的设计方式层次清晰的表达出来。并指出;一开始对战略层的深思熟虑,会帮助我们在整个产品设计中节约大量的时间。作者这本书写于pc时代,大多案例都是网站的建设。但是整个思考产品的思路,直到今天;都没有过时。一、 以用户体验为中心设计产品用户体验是指产品如何与外界发生接触,...

    2018-04-08
  • apple watch 中文手册:Apple Watch 整体架构

    整体功能预览 总体而言,WatchKit第一版SDK提供的功能远远超出了我的期望。因为我原本以为第一版WatchKit可能侧重于对iOS Today Extension功能的延伸,而不是真正开发Watch App。所以当知道真相后,我即惊讶又感到…

    2015-06-15
  • 带给你视觉 2015 Web 设计色彩流行趋势

    前几天分享的2015年春夏流行色人气很高,今天直接放干货,@AnyForWeb_UDC 的同学根据2015年的色彩大致趋势走向,结合相关的设计经验,作出了以下网页配色 预测分析,来看看有哪些亮点吧。

    2014-12-28
  • 当用户操作错误时,如何在不影响用户体验的情况下快速处理好

    在很多界面中,错误的产生不可避免。一旦发生错误,要帮助用户快速轻松地处理好。

    2017-05-23