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

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

相关推荐

  • 为什么你读了1000篇有关如何改变的文章却从未改变?

    发布者: EVEN 此文是 Eric Barker 的文章。 大多数人其实并没有失败—不做就不会失败。 知道不等于执行。 我写了很多有关让事情变得更好的东西。常见的回应是“我懂。”好吧,如果你看 Jeopardy(智力知识竞赛节目)的…

    2015-03-21
  • 设计总结|基于大屏设计的QQiPad主题

    主题一直是QQiPad比较薄弱的一块,在用户的强烈呼声下,项目组决定在6.5版本上线新的主题,为此做了大量的尝试和思考。基于大屏设计的QQiPad主题有何特点?应该如何设计?在此分享本次主题设计总结。

    2017-05-09
  • 为网页设计师 Web 设计编写的简要历史

    编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计 发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

    2014-12-30
  • 数据可视化:如何为数据寻找适合的配色

    虽然如今好的配色方案已经唾手可得,但为数据可视化找到合适的配色方案,却仍是一项巨大挑战。

    2017-05-31
  • iOS和Android规范解析——标签导航和分段控件

    从今天开始,将介绍iOS和Android设计规范中关于导航的部分。今天要介绍的两个控件,经常容易混淆以至于用错。请各位读者仔细阅读,防止以后用错。

    2017-08-04
  • Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03
  • 分享两个交互设计作品

    今天跟大家分享的是二两童靴的两个交互设计作品,第一个是平安保险产品配置后台交互设计,第二个是台州银行客户经理移动办公App交互设计,希望大家多多交流。如果你也有好的作品想在我是UE网上展示,可以加学习群15…

    2015-07-02
  • 作为UX设计师,你需要知道的52个专业术语

    “注意用户做什么,而不是他们说什么。”
    ——雅各布 尼尔森“令你反感的客户是你最大的学习动力来源。”
    ——Bill Gates“想成长为设计师?花大部分时间考虑它的运作方式,而不是看起来如何。”
    ——乔希·帕克特

    2017-05-01
  • 动画进度指示器的最佳实践:好的交互设计会提供反馈

    系统状态的可见性是用户交互设计最重要的原则之一。在使用系统时,用户想要感觉一切都在掌控之中,这意味着在任何特定时间下,他们想要知道并了解他们当前的处境,尤其是在系统正处于繁忙状态时。当系统在处理或者加载进程时,一个等待动画进度指示器是向用户展示系统状态最为常见的形式。

    2017-05-03
  • 交互设计自我发展三部曲——“器、势、人”

    数十万互联网从业者的共同关注!作者: 集创堂-纯色个人微信号:jichuangtang作者授权早读课发表,转载请联系原作者欢迎投稿到早读课,投稿邮箱:mm@zaodula.com交互设计师(或者称UI设计师)发展的三部曲——器、势…

    2017-08-01