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

相关推荐

  • 网易资深设计师:ToB产品的6条交互设计经验

    网易UEDC –李东岳:本文希望能够总结一些B端产品的设计经验,帮助大家更好的进行ToB产品的交互设计 工作。

    2017-09-26
  • 谈谈用户体验与风控的平衡性

    先翻翻旧文从反反鸡汤谈过犹不及从受众目标,再谈过犹不及其实今天是这两篇的引申。之前我说过很多创业者容易犯的错误,过度理想主义,把用户当作好人,我说过一个关键词,不能说坏用户一定很多,可能坏用户真的只有1%,但很可能一个坏用户的破坏,可以抵销一百个好用户的创造,这是很常见的创业的困境,因为很小的疏忽,导致极大的损失。所以,一些毫无经验的创业者,要有这方面的意识,至少思想上要有风控这个概念,要知道如何规避和防范坏的事情,不要过于理想主义。但...

    微信热点 2018-05-04
  • 思路总结:从体验设计角度做有效竞品分析

    本文作者总结了自己在实践中学习和应用过的竞品分析思路,一起来看看~

    2017-05-05
  • 交互设计文档怎么写? | 设计基础05

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员…

    2017-08-04
  • 国内11个HTML5平台的星级评测

    本文以HTML5工具专业性为主要指标,不以名气论高低,内容多以企业网站介绍为依据,辅以使用体验。四个指标,功能是H5工具使用的基础,模板属于工具适用性的象征,定制服务能体现平台的生态性,易用度则是用户友好范畴。

    2017-05-30
  • 让视觉设计变得高效+有说服力的4个步骤

    确定情感关键词 -> 情绪版 -> 脑爆概念设计 -> 用户验证

    2017-05-26
  • 设计师个人品牌的建立

    个人品牌是人们将自己和事业作为一个品牌推广出去。如今,空有一门好手艺已经不够了,独特和真实可信方可过关,但前提是人们得知道你。正如Michael Simmons所写道,在数字时代,真实才是关键。强有力的个人品牌可以创造大量机会,获得充分认可。

    2016-02-21
  • 结合实际案例,一篇看懂用户体验五个层次

    ♝点击上方“交互设计学堂”关注我们,送电子书看过了很多描述用户体验五个层次的文章,但感觉很多都浅尝而止,今天我特地结合了十来个案例对用户体验进行了一次相对全面的阐述,希望大家在阅读时也能够同样寻找相关产品进行比照和论证,想必会更有收获。概要用户体验设计就是“以用户为中心的设计”,即创造“每件事都按照正确的方式在工作”的用户体验,让用户宾至如归,就像《Don’t make me think》里提到的“这会让用户觉得自己更聪明,更能把握全局...

    2018-04-10
  • 别整标题党! 这是一份阿里的设计师分享的编写交互设计师的启迪思路的文章

    鸿影:一份设计文档的 结构大概可以分成Background项目背景、Schedule排期、History版本历史记录、Information Architecture信息架构分析(包括Site Map、Experience Map、Flow等)、Framework框架设计、Wireframe…

    交互设计 2015-08-26
  • 做设计不得不讲究的一个点:平衡

    做设计,最难的不是搞清楚解决问题的最佳答案是什么。而是,站在全局去平衡问题与问题之间的关系,做当下资源条件下相对正确的设计决策。

    2017-05-05