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

相关推荐

  • 用通俗的方式告诉你什么是「交互设计」

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-11
  • O2O/商场权限管理系统设计方案

    一、管理权限分级概览 二、管理账号管理逻辑 三、账号权限定义 管理账号预设角色分为四种:超级管理员、商场管理员(独立收银)、商场管理员(统一收银)、店铺管理员; 超级管理员: 具有商场后台所有功能的权限,…

    2017-12-28
  • 产品经理神器 Axure 安装、激活和汉化教程

    摘要:Axure 是产品经理必会的一个工具,本文详细讲解 Axure 的下载、安装、激活和汉化等流程,方便大家学习 Axure 。作为一个合格的产品经理,几乎没有人不会使用 Axure 的,事实上,熟练使用 Axure 也成为了一个产品经理的基本功。为方便新手产品经理部署 Axure 环境,方便学习和使用,下面我来详细说明涉及部署 Axure 软件的各个步骤。下载关于 Axure 软件的下载,这里不多说,建议大家去官方网站进行下载,不要...

    2018-04-25
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • 搜狐交互设计师:我常用的一套交互设计工具

    刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物。这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍。

    2017-05-25
  • 通过减少认知超载,提升用户体验(上)

    “怎样才能改善用户体验设计?这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章太长,会分成两次推送,欢迎期待~“通常,飞速行驶的货车不可能轻松地停下来。因为它需要花费很多努力,运用更多的动能去改变运动状态。与其强迫人们从他们的主任务上转移注意力,不如直接带他们去他们想去的地方。”
    ——Luke Wroblewski,谷歌产品总监

    2017-05-07
  • 手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇…

    2017-08-03
  • 为什么产品与交互你都要懂?

    今天老大给交互设计师和部分视觉设计师上了一堂产品经理的培训课,从实际的项目需求出发,十分受益匪浅,确实有些事情值得去考虑。 老大先抛出了一个问题(据说的某厂的一道面试题):一辆卡车载着货物过桥洞,货物…

    2016-02-29
  • Axure绘制专题页原型

    专题策划对于SEM至关重要,如果策划及文案都搞定了,接下来如何与设计进行沟通呢,这篇文章我们一起聊聊专题页原型绘制的话题。一、Axure界面介绍Axure的使用极其简单,只需要几个拖拽动作就可以基本搞定。接下来我们实际上手用学历教育的例子,带大家一起来看看。绘制这个原型可以分为两步,首先是手机的绘制,然后是文案内容的绘制。左侧面板(快捷键:Ctrl+Shift+[),主要是元件库,将需要用到的元件,直接拖拽就可以。右侧面板(快捷键:Ct...

    2018-03-04
  • 【交互实战】数据产品设计实战-小屏幕下的大数据

    摘要: 大数据的概念如今对于很多人来说并不陌生,成功的数据分析,不但可以反映企业的经营状况,更可以帮助企业优化经营方式。但数据分析类产品使用起来会花费一定学习成本,面向的客户群体也不像to c用户那么广,…

    2017-04-28