标签栏设计的心理暗示:高亮与视觉纵深的心理模型

UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型。
注:本文面向入门级设计师,大神请飘过~


UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型。

注:本文面向入门级设计师,大神请飘过~

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

标签栏设计基本上是每位设计师在项目设计中都会遇到的事情,之所以写这篇文章是因为笔者在做项目的时候也曾遇到过这样的疑惑:标签栏的作用和意义是什么?当前栏为什么要高亮?其目的是什么?标签栏的设计是否有比较合理的设计原则?等等。估计很多刚入门的童鞋也会遇到同样的问题,所以特意将自己的一些研究心得分享出来。当然,以下观点仅代表个人,如有不对,很欢迎指正。

先来看一下如下两个设计。有些设计师为了显示其他标签的可点击性,引导点击切换,其他标签栏会被设计成高亮,如图1:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

也有些设计师为了突出当前标签,设计成如图2:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

咋一看图1和图2的两个设计方案并没有什么问题,起码都很清晰地指明了当前标签是哪一个标签。

可是突然有一天,产品经理说我们的标签栏只留两个标签,于是,按照原来的设计,图1和图2的标签栏设计变成这样:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

和这样:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

于是图1中原本“信息”栏为当前标签,视觉感知上却变成了“发现”栏为当前标签。图2之前多个标签可以清晰辩认的设计现在变得模棱两可,分不清哪个是当前标签,哪个是可点击标签。由此看来,单纯运用对比来突出当前标签,这种做法并不可取。

那具体应该怎样去设计呢?为此笔者物意翻查了一下《iOS人机交互准则》中的设计要求。iOS设计规范中指明:当前标签应当要高亮。如图3:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

看上去的确是合理很多,而且就算只剩下两个可切换的标签,也还是很容易感知当前标签,看来,按照《iOS人机交互准则》来做设计总归是没有错的。

但为什么当前标签应当高亮?

首先,先来分析一下标签栏的作用。

关于我们在大多数交互界面所使用的标签栏,提供了页面的切换、功能入口以及界面导航的功能。其目的意义在于指示当前页面所处的位置。也就是说,标签栏在视觉设计上要着重解决“我在哪儿”的问题,所以前面的为了显示其他标签是可点击性的标签栏设计(如图一)的设计方案就可以抛弃了。

人类使用视觉纵深去感知自己在空间里所处的位置。

想像一下,你在上班打瞌睡,在梦中神游。突然脑袋被敲了一记,你睁开眼睛,看到眼前的显示器,键盘,桌面上的笔记本和钱包手机,远处是办公室里在工作的同事,于是你知道了自己正在自己的办公桌边上着班,而不是正在神游。

人从睁开眼睛第一时间获得视觉信息,做的第一件事是从获得是视觉信息里感知视觉里的不同物体的远近,并根据距离自己最近的物体(标志)判断自己所处的位置。事实辨别上视觉纵深是大多数动物以生倶来的视觉能力,婴儿从出生三个月就能判断远近高低,并确定自己是否处于一个安全的区域。

人类在无意识的视觉纵深的感知中,判断出离自己最近的物体,就知道自己所处的位置。因此,在标签栏的设计中,要清晰地指明当前页面所处的位置,当前标签在视觉设计上必须与“我”的距离最近。

也就是说,在标签栏设计中,当前页面标签要与其他标签拉开视觉上的层次关系。

所以在很多常见的APP里,当前标签通常要高亮,其他标签则适当弱化。设计上类似于这样:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

然后,为了进一步拉开层次关系,当前标签可以稍微改变一下样式,如这样:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

最后,加入情感化设计,可以适当添加APP的主色调,如这样:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

根据以上原理做出来的设计方案也是最为大众所接受的,例如微信:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

例如支付宝:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

上面的双标签设计可以仅凭拉开层次关系显示当前标签:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

或这样:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

另外,深色的背景栏标签设计也依然遵循拉视觉纵深的心理暗示拉开层次关系,如这样:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

和这样:

标签栏设计的心理暗示:高亮与视觉纵深的心理模型

结尾:

UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型,也有很多设计师根据格式塔心理学设计出交互性很好的心理模型,以后我们有机会继续探讨。

笔者渣渣设计师一枚,以上仅为个人观点的经验之谈,不同观点,欢迎共同探讨,共同进步~

 

本文由 @偶不是芒果 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-18 10:40
下一篇 2017-05-18 12:57

相关推荐

  • Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片

    Microsoft将向合作伙伴开放 Windows Holographic,以下为官方放出的宣传片,巨硬爸爸一出手果然不同凡响。 【微软向合作伙伴开放 Windows Holographic,打造混合现实新时代】魔术师妙手生花,孙悟空腾云日行万里,…

    2016-06-03
  • 什么样的文字聊天,才是一种好的阅读体验?

    本文不是要讨论IM产品的体验设计,而是聊天内容本身的阅读体验。××(我的姓名)

    手机号:186××××××××

    身份证:360103××××××××××××××(我的姓名)

    手机号:186 ×××× ××××

    身份证:360 103 ×××× ×××× ××××姓名:××手机号:186××××××××身份证:360103××××××××××××在UI需要手绘?不会手绘不行吗投简历没有回应 是不是 经验不够ui规范有那些啊 ios andriod都要看啊在吗在吗、没有作品怎么办啊?“滚滚长江东逝水……”“说人话!”“大河向东流哇!”

    2017-05-13
  • 新知 | 在打造用户体验上,连雷军都要向这家企业学习

    在我们之前发布过的一篇文章《小米八周年:雷军揭秘四大成功之道》中提到过,雷军在创建小米时受到了美国零售连锁超市好市多(Costco)的启发,从价值体系上来看,小米与好市多相同,都是希望用户能以可承受得起的价格享用更好的产品。好市多以优质、低价出名,在全球拥有700多个分店。从2006年到2016年,好市多的市值增长了五倍,如今的市值约为670亿美元。好市多亚洲区总裁张嗣汉在2018零售业年会上分享了好市多的运营模式、会员制度,以及管理层...

    2018-05-04
  • 为了更好的用户体验,谷歌拿出了“大棒”与“胡萝卜”

    点击关注36氪,置顶公众号专业的行业新闻及深度报道,不容错过━━━━━━这是著名分析师Ben Thompson对谷歌近期宣布的一组数据的评论,原标题为“THE AGGREGATOR PARADOX”以下为谷歌宣布的这组数据:现在共有3100万个网站加入了加速移动页面(AMP)计划,自去年10月以来增长了25%。在2月的第1周,谷歌向出版商发送了4.66亿个页面浏览量——比2017年1月增加了近40%。我们希望通过这样一篇文章,来带你了解...

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

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

    2018-04-07
  • 【交互基础】你认为交互设计是什么?它是否有一个完整的定义?它的上升空间如何?交互设计又是如何应用的?

    交互学堂 微信号 IxDSchool 功能介绍: 从零开始学交互!国内最专业的交互设计学习内容资源。如需访问网站请百度搜索:交互学堂。 [alert_success]很多人问:你认为交互设计是什么?它是否有一个完整的定义?它的上…

    2016-02-19
  • 用户体验设计必须知道的产品9种状态

    作者:Yjjj @ UI设计狮联盟   之前在脉脉上有看见过有人提到的这12种状态,但是明确的说应该是用户在使用产品时的状态,但是细想之后觉得有几个状态应该修改一下,那么我们重新定义为9种状态吧: 等待 初始 寻找 无…

    交互专题 2017-08-07
  • 如何平衡用户体验和商业变现

    互联网公司往往会面对怎样平衡用户体验和商业变现的问题。其中最常见也是最典型的代表就是,作为互联网公司商业模式之一的广告,某种程度上会影响用户体验。比如广告数量过多、与用户需求根本不相关等,这都会引起用户的反感。而在Facebook看来,这并非是一个无解的问题。在1月21日举办的2018极客公园创新大会上,Facebook工程总监范鹏分享了Facebook平衡用户体验与商业变现问题的4个原则。范鹏认为,用户体验与商业变现之间产生的问题其实...

    2018-02-10
  • 阿里巴巴UED的设计团队究竟为双11贡献了什么?

    在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然、纯粹,不过是一场轻松的购物。只能说你Too young,Too simple。你的一举一动已经被一个神秘的组织所引导,它让你下单时够快、够准、够狠,并且你毫...

    2018-02-01
  • 回归设计,iPhone 6是一个好产品吗?

    很有意思的是,几乎每一代新 iPhone 出来后网上总会骂声一片,许多人抱怨它的样子难看、没什么改变……这次发布的大屏 iPhone 6 也不例外,普遍大家抨击的焦点都在后置凸出的摄像头以及后壳两条突出的天线设计上。 有…

    2014-10-28