首页

用超多案例,总结了 10 个让登录体验更好的小技巧!

资深UI设计者

看似简单的登录框,暗藏了多少值得推敲的用户体验?这10个细节,就是你和设计高手的区别。

技巧1:更明显

你不应该让你的用户到处寻找登录区域。他们找的时间越长,就会越沮丧。他们越沮丧,最终登录的可能性就越小。

一个很好的例子就是 Gmail 的登录页面。

你可以确切地知道你需要在何处登录,以及要在输入区域输入什么内容,上面的例子,如果你没有 Gmail 帐户,它允许你通过单击「创建帐户」来轻松地创建一个帐户。

好的用户体验是使你的登录区域明显,使你的用户尽可能容易地进行登录操作。

技巧2:使用第三方登录

第三方登录正迅速成为用户登录账户的方式,理由很充分。为不同的产品创建多个账户既耗时又令人困惑。很难记住一堆不同的密码和用户名。

通过允许用户使用用户的第三方账户中的信息来创建一个账户,可以解决所有关于这些问题。

让我们来看看下面的石墨文档和MONO登录时的选择方式:

甚至还有更方便的注册登录方式,手机短信验证码在注册的同时登录:

一些产品在用户点击第三方注册登录时还需要用手机号进行短信登录,从用户的角度看,这很明显是一个不好的体验,但是产品的角度去思考就不一样了,产品为了获取用户更多的信息,则需要这样来设计流程。

这种设计流程该不该用,这需要在产品和用户之间进行权衡,第三方与手机短信验证码登录,在提高用户体验的同时,可以提高用户的效率,使界面更加直观。

技巧3:更简单

因为环境不同,在中国很多网页端的网站,第三方登录很的产品很少。

例如,如果你的 QQ 没有在电脑端登录,因为即使选择第三方 QQ 登录,你也要拿出手机—打开 QQ —打开扫一扫,进行扫码登录等一些列的操作。

又或者,当你想要登录 behance,只要浏览器有记录之前的第三登录,点击第三方登录即可直接进入该网站,甚至不用注册。

可以看下面的腾讯网与 behance 的网页登录:

好的登录体验应该只有账号、密码两个输入字段,或者手机号码、短信验证码两个字段,以及使用第三方登录的选项。在简单、的同时,并为用户提供了很好的体验。

技巧4:区分注册与登录

如果一个用户来到你的网站进行注册,或者想他们返回登录界面,这就需要让用户清楚的知道他在何处,下一步应该去哪里。

我们通过使用登录字段与注册字段的区别来帮助他们,让我们看看下面的 dribbble 注册界面:

创建账户的按钮已 dribbble 的主题能很快突出在用户面前。新用户可以直接在页面上注册,而返回的用户可以使用最上面右上角的登录两字。看到上面「sign in 」字段了吗?

dribbble 使用了不同的颜色、布局去区分注册按钮与登录的入口,这样更加清晰明了。

同时可以看看 dribbble 的主页面,他们会把 sign in 与 sign up 的进行区分,在 sign up 加上微边框,让用户能更快区分两者的不同。

技巧5:跳过用户名

让用户用他们的用户名来进行登录真的不是一和很明智的做法,为用户省去记录你产品的用户名的麻烦,应该让他们使用他们的电子邮件地址或电话号码注册来进行代替用户名。

ins 让用户有机会用他们的电话号码或电子邮件地址登录。

反例:

尽可能让用户同时用手机号码或邮件地址来登录,因为用户可能会忘记他们用来登录你的产品的电子邮件地址,所以这时,用户能使用手机号码进行登录。

技巧6:密码可显示

给用户提供可显示密码的按钮,减少用户输错密码的操作,当输错的同时,可进行对错的字段进行纠正,不用全部删掉重新来。

让我们来下面的脉脉和片刻:

技巧7:记住用户信息

还有什么比再次到你之前登录的网站或 app,却发现你需要再次输入账户密码登录更令人沮丧的事情吗?

当你的用户返回到你的网站时,请确保他们已经登录了,或者为了方便登录,提前为他们预先填充账户和密码等字段。

谷歌在这方面做得很棒。每当用户需要重新登录到 YouTube、Gmail 或任何其他谷歌品牌时,他们的登录信息都会被记住,使登录过程更加简单。

盟友银行允许用户勾选 「保存用户名」 复选框,允许网站在用户到达网站时默认记住用户名。这是记住用户信息的另一个好方法,展示形式可以多样化,可根据自己产品与用户需求来进行把控。

技巧8:轻松恢复密码

有时你的用户会忘记他们的登录信息。当这种情况发生时,尽量让恢复过程尽可能的轻松。

公众号的账户密码输入栏有记住密码复选框,以防用户忘记他们的用户名和密码,不用每次进来都输入账户密码进行登录。

印象笔记对他们的密码做了一些巧妙的处理,让用户知道他们多久以前更改了密码。

这个小小的提示可以唤起用户的记忆,帮助他们记起密码。

如果用户忘记了他们的登录信息,要让他们清楚应该去哪里。如果你将使令人沮丧的情况变得不那么令人沮丧,你的用户将因此会喜欢上你的产品。

技巧9:让用户知道大写锁定已开启

我们都有过这样的经历:令人沮丧地输入和重新输入你的密码都无济于事,结果却发现你一直开着大写锁定键。

可以通过警告你的用户,防止这种情况发生。微软的 Edge 浏览器还使用户可以选择在键入时打开大写锁定时打开通知。

技巧10:无密码登录

让你的移动用户使用无密码登录,现在很多特别是金融类 app,都可以让用户进行指纹登录,因为不像其他 app 一样可以一直保持用户已登录状态,在保障安全的同时能更便捷。

以上的设计技巧与案例希望能帮助各位读者提高产品的用户体验。

欢迎关注作者的微信公众号:「设计探」

双11大屏——情绪的超级机器

资深UI设计者

双11所带来的巨大能量与共振,需要一块巨大的屏幕来承载这份共情——这并不是一条统计数据,抑或一张图表就可以完成的。

数据大屏的设计有什么不同?

数据大屏的设计,并非是传统意义上的设计师或产品经理就能完成的。它需要将艺术家、科学家与企业家的能力集于一身,需要拥有对动态数据的把握能力、对产业经济与供应链的结构方法、对社会议题的捕捉与构造,以及宏观的视野和细致入微的匠人用心。可视化让冰冷的数据产生温度。


1.双11为什么需要数据大屏?


数据大屏是一个凝聚情绪的超级机器。

数据大屏不讲述传奇,它就是传奇本身。



在这块巨幕上,数据是公开透明的,它的变化在实时的体现着每一笔消费的数字。每个人都能看到,也会被传递到全世界每个角落。双11所带来的巨大能量与共振,我们需要一块巨大的屏幕来承载这份共情——这并不是一则新闻播报、一条统计数据,抑或一张图表就可以完成的。在这样一个狂欢的日子里,手机、个人电脑、电视机这些面向个人的设备,全都需要融入到这个巨型的超级情绪机器之中。


2.导演、故事与设计


从宣传与商业作战的角度讲,数据大屏需要兼顾故事性和震撼性两重特点。通过故事脚本与内容框架的设计,让观众层层抽丝拨茧,从表层的情绪,看到内核的战略。


1. 内容规划:故事与脚本设计

2019数据大屏的内容框架大致分为三个层次。


情绪层:GMV的节节攀升满足了媒体不断推升的情绪高潮。在日益萧条的国际环境中,中国的经济仍能屡创新高,每一位在双11买买买的中国人背后是一种爱国主义与中国信心的体现。


业务层:阿里的自我表达。阿里经济体在城市中继续深化的服务我们的消费者,数据成为城市可持续发展的新资源;而商业操作系统随着数字经济时代的到来,开始系统的服务我们的品牌与商家,在新的时代续写“让天下没有难做的生意”。


战略层:企业与国家发展同行。阿里的改变,反射了社会关系和社会结构。点击购物车就能买到全世界的东西,而对于国内市场,精准的人群定位、产业带的建设都让拉动内需变成一个大众都能参与的事情。


2. 情绪规划:情绪链路与镜头设计

依据数据表现,双11当天的情绪高潮会集中0点和24点前后。24小时内,情绪的跌宕起伏,媒体向世界专递着这种情绪。现场,根据数据和情绪的变化,我们开始导演数据大屏在不同的时间段出现的镜头:GMV的弯道超车紧张窒息,晚饭过后是观看城市夜经济的最佳时机,还有“买遍全球的购物车”、“小镇青年”等进20个镜头。


3. 核心理念:新商业文明是中国的弯道超车

为什么是弯道超车?

大航海时代是贸易全球化的开端,也是当代中国继续扩大开放,用一带一路、进博会等等新模式,承接人类当今世界发展的新格局所在。互联网与移动互联时代的到来,让中国得以弯道超车占据世界领先地位,而随之到来的数字经济时代正式开始了人类历史上的新商业文明。马老师说:打造新商业文明的时机已经到来。数字时代是我们面临的最大机遇,这个新时代最大的风险就是错失机会。



我们将这个核心理念融入GMV大屏的设计,正如逍遥子所说的那样“消费不是商业的终点,通过消费者来提升生产端生产契机,优化生产决策。”为此,我们导演了新商业文明的数据大戏:GMV屏中的赛道,3个镜头穿越了大航海时代、互联网时代,数字经济时代弯道超车的新商业文明,快进了商业文明的发展。

11.11当天的数据也被融入其中,赛道上奔跑着饿了么、盒马配送线和菜鸟的物流线,空中飘散的气泡是实时产生的交易热力。


△2019双11数据大屏-GMV弯道超车&3个视角切换


3.双11数据大屏设计概览


1. GMV:11剁手铸就中国信心

2019年,即使是在国际经济大环境衰退的今天,阿里的双11仍旧创造了新的商业奇迹:2684亿人民币的GMV的背后,是中国人为了家庭与自己而欢乐剁手,也是中国消费者面对全球大环境下对中国的强大信心。从2009年的电商大促,到11年后的全球狂欢节,阿里伴随着中国经济海洋的形成而不断掀起巨浪。李克强总理就曾经用双11的销售数据,来解答那些对中国经济感到不解的人们,让他们瞬间懂得中国经济是汪洋大海。


△2019双11数据大屏-历年GMV增速


2. 全球化:买遍全球的购物车

中国经济与中国消费者的贡献,是对全球经济的贡献。消费者购物车里藏着美好生活的愿景,打开了世界消费的新空间。天猫国际把来自全球78个国家和地区的品牌和商品带进中国,满足消费者的品质消费需求。买遍全球的购物车,更为世界经济增长贡献拉动力。越来越多国际品牌青睐中国市场,通过天猫国际满足中国消费者的需求。


△2019双11数据大屏-全球化


3. 服务夜生活点亮城市夜经济地图

随着政策的推动,全国经济进入夜生活消费时代,大量的城市开始准备成为一座座不夜城。在这个新的消费增长领域,新商品、新商机、新消费模式、新空间与新玩法都层出不穷。在未来,理解夜晚的中国,或许比理解白天的中国更为重要。


△2019双11数据大屏-杭州经济体服务网络


△2019双11数据大屏-天猫商超网络


△2019双11数据大屏-杭州城市夜生活


4. 相信不起眼的改变:小镇青年与那些你不知道的族群

14亿的中国人口、巨大的地域差异与文化差异意味着,每一种类型的消费人群都是海量的,都拥有现有经济理论所无法囊括的巨大潜力。小镇青年、银发一族、95后作为新消费崛起的代表族群,正悄悄改变着社会的消费结构。通过数据我们清晰看到:族群的喜好千差万别,数字化的新消费使得商家能针对消费者需求创造新供给。


△2019双11数据大屏-新人群,新消费


5. 品牌榜:千里江山图

天猫创造的价值是真正支持品牌的数字化转型,不仅仅赢得今天的业务,更在于决胜未来。国潮席卷而来,智能商业魅力无限,全球供应链在动荡与智能化中全面转身。全方位重构产品创新、品牌建设,强化天猫与品牌之间的合作,这便是我们想在双11这天展现的万里品牌江山画卷。


△2019双11数据大屏-品牌榜


4.结束语


当GMV越来越逼近2684亿人民币时,炸裂感给每个人的冲击是:中国又诞生了一个新的奇迹!即使在全球经济放缓的今天,中国人民对于天猫双11全球狂欢节的热情丝毫不减。在这背后,是数字经济时代下的阿里巴巴,向新商业文明迈进了一大步。

文章来源:站酷

「手势交互」的知识点

资深UI设计者

业内有很多人觉得手势交互没必要拿出来深究,觉得用户使用产品的过程中,自然而然就会去使用拇指,进行手势操作。但这种说法,就跟「用户心理模型」类似。当然,对于用户来说没必要深究手势交互,但作为设计师,如果不了解其背后的逻辑,那么就无法解决产品设计背后的一些问题。

所以我们今天,好好聊一聊手势交互这件事。你会发现,原来你以往观察或以为的设计问题,都是手势交互在作祟。

手势的意义

我们以前经常听到「以用户为中心做产品设计」这句话,意思是产品需依附于目标用户的真实场景来设计。与此同时,其实还有一句话在提醒着交互设计师如何做产品设计,就是「以触摸屏为中心做产品设计」。

为什么呢?因为用户从始至终都是在跟触摸屏做接触,不管换了什么设备,他们都是要通过屏幕与产品进行交互的。

我们可以在这里思考一下手势的意义。

手势的出现改变了什么?可以回想一下 iPhone 4 发布的时候,当看到这样一台屏幕上没有任何按键的设备,是不是会觉得不可思议?键盘,电话接听按键等都消失不见了。

人们在使用 iPhone 这样的产品时,不再需要去强行记忆任何固体按键。触摸屏与手势的结合,帮助我们隐藏不必要的元素,帮助用户聚焦于内容,在有限的物理空间获得更多的信息。

所以用户通过触摸屏与产品进行交互,跟通过键盘按键与屏幕进行交互是完全不同的。手势交互更自然且更。

手势操作对我们来说如此自然和直观的主要原因是因为它们类似于与真实对象进行直接交互。譬如你用遥控器控制电视上的按键,需要通过上下左右这样的操作来定位指示器,而触摸屏直接就可以通过手指点击内容进行操作。这是完全不同的概念。

综上所述,我们能知道,手势的三个要素:简洁、易用、直观。

所以我们通过一些常见的手势行为,就可以在产品界面上很轻松的完成任务。

常见的手势行为:

  • 点击:单指短暂触摸表面;
  • 双击:单指快速两次触摸表面(通常是缩放);
  • 拖动:沿表面移动而不会破坏接触;
  • 捏/展开:用两根手指触摸表面以移入(捏合)或移出(展开);
  • 按下:单指触摸表面并按住;
  • 滑动:快速手势,不需要触摸目标。

当然,我们经常也会遇到一些背离手势交互的产品设计,虽然也是点击、拖动等等,但操作起来总是不那么顺心。这里面有一个关键点就是,手势直观性。

有数据表明,苹果的 3D Touch 使用率非常低,就是因为直观性太差,用户不知道通过这个操作能带来什么结果,且使用它需要长按,经常会同时呼出「卸载」,那么效率也就会降低。久而久之,用户就不去使用了。

正面例子如下图,滑动与文案结合。

这样一看,用户马上就能知道这个操作行为如何触发,紧接着就产生行动,然后会反馈结果。

这也是手势交互的核心:触发,行动,反馈。

对比 3D Touch,触发没有提示,行动后时常有两种反馈结果,相比起来就不那么友好了。

除了上面聊的这些,手势交互还能从另一方面来提升效率,就是拇指操作区域。

拇指驱动设计

我们都知道,现在手机屏幕越来越大,甚至比最早屏幕大了一倍以上。但是很多设计师并没有转换思维,跟进这个趋势的变化。

这里给大家普及一个知识:大部分人误以为,手指在屏幕上的热区是永恒不变的,但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了,所以拇指操控屏幕的范围也就变小了。如下图。

结果是,手机屏幕变大,双手持机的用户变多,但依然还有 75% 的用户是使用拇指来触摸屏幕的。因此,术语「拇指驱动设计」应运而生。

我们上面说到,在使用一些产品的时候,经常会遇到使用起来不顺心的情况,然后说了「手势直观性」的概念。但这里,还有个更重要的原因,就是「拇指操作区域」。

拇指操作区域被分为三块内容,分别是:易于触达,难以触达,以及介于两者之间的区域。

看下图。

所以在设计界面时,要注意界面的主要操作元素是否处于用户易于触达的范围之内。

如果你仔细观察并思考过,也会发现,iOS 的产品界面中,「返回」按钮就位于「难以触达」的区域。原因是产品人员本身也不想用户返回或退出,而是让用户聚焦于当前页面,想要返回,那就需要付出一点成本,什么成本?操作成本。

有人会说,由于 iOS 可以从手机的左边缘向右侧轻扫以获得返回效果,因此在大多数 iOS 产品中,返回都不需要太大的操作成本。但是,并不是所有 iPhone 用户都知道这一点,也不是所有产品都支持这一特性的。而且手势交互的进化本来也就是为了提升用户操作的效率,所以本质上他们并不矛盾,只是相比以前,我们现在的操作更快了。并且「右滑」返回,本身在手势操作中相比「点击」也是更具操作成本的。

当了解了手势的一些意义,以及拇指操作区域对于产品设计的重要性之后,我们就可以通过一些案例来做一个全局分析了。

1. 内容在上,操作在下

许多人设计 App,但是没人研究过 App 为什么要这么设计。

比如,为什么起初要把标签栏放底下呢?关于这个问题,当初我也是问了许多人,而基本都只是说这是官方设计规范。这相当于是一句废话。

通过翻阅多方资料,我发现在工业设计领域有一条重要的基本设计原则:内容在上,操作在下。

比如在使用电脑的时候,操作在下意味着使用者在操作过程中,手指始终处于界面下方,而内容在上面,就不会出现手指遮挡内容的情况。

如下图的键盘操作提示:

基于此,相信你也知道为什么标签栏在下方了吧?

另外,为什么 iOS 设计规范建议将「编辑」按钮放置在界面右/左上方的位置呢?

界面右/左上角的位置对拇指来说显然是不友好的。然而,这样做的原因也是显而易见的:编辑功能会让数据发生变化。将这类控件放在难以操作的位置上(与左上角的返回是一个道理),就是一种防御性的设计策略,可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。

通过这一小段之前聊过的内容,你们会发现,手势与拇指操作其实在驱动着产品设计。下面我们来聊个大的案例。

汉堡包菜单的消失解析

汉堡包菜单,也就是侧边栏导航,Facebook 早期测试显示侧边栏导航让用户使用率降低了一半。

我们一起来看看市面上给出的三类说法。

1. 可见性太低

默认状态下,用户是看不见侧边栏的,除非点击了侧边栏的弹出按钮。所以这种情况下,里面的功能都是用户脑袋里已知的,但很可能都想不起来。比如,现在你回想一下知乎底部 5 个标签分别是什么?或者微信右上角「+」里面有哪些功能?是不是要想一会儿,才能记起来?甚至还是想不起来。

之前我在文章里写过,用户对于功能的使用一定是「所见即所得」,而不是「心向往之」。用户只会注意自己看到的信息,而不是凭借记忆或想象来使用产品。

底部标签栏就很好的解决了汉堡包菜单的「可见性」问题。

2. 效率较低

效率较低主要在于操作频率,大家看下面两组图的对比。

第一张图,当用户从首页进入到个人信息页面,只需要两步;而第二张图,则要三步。

这里多一步看起来似乎影响不大,但如果现在要从个人信息页面到「标签 3」的话,第一张图也只需要两步,第二张图还是需要三步,当频繁去使用这样的产品后,用户的整体效率就会下降,体验也会随之降低。

3. 与平台模式冲突

大家应该知道,在 iOS 的操作页面中,通过手势可对 tab 进行左右切换,而侧边栏除了通过点击菜单按钮展开之外,也可以通过右滑弹出。这里面有什么冲突呢?看下图。

当页面聚焦在「标签 2」时,右滑除了能回到「标签 1」,同样也很可能会切出侧边导航栏。

这样的手势冲突,导致页面层级与功能导航的优先级混乱了。

无论是导航还是控件,当它们组成一个页面后,它们的操作就会有优先级。比如下面这个例子。

如果你对标红的分段控件比较熟悉,就知道,它是可通过屏幕滑动进行切换的。但是在「短信」里,它是不能通过滑动屏幕进行切换的,因为用户可对单条信息进行左滑做删除或其他操作。所以当页面操作模式存在矛盾时,我们会将子层级操作优先于父层级操作。

譬如你进入朋友圈,是不能马上回到首页的,这时候页面层级较深,产品人员要将用户聚焦于页面本身,如果直接能返回到首页,页面层级和产品架构就会混乱。

类似的例子还有很多,我这里就不继续列举了。

所以从「短信」的例子可以看出,当控件与控件之间的手势发生冲突时,我们要考虑优先级,将内容优先于页面来处理。那么回到上面的例子,分段控件与汉堡包菜单的手势发生冲突时,很明显我们要优先分段控件的操作,而禁止掉汉堡包菜单的右滑手势。结果就是,效率又低了。

4. 小结

这三类,如果你认真思考里面的关系,其实就会发现,它们的共通点就是与拇指的联系过于被动或直接被切断了。

  • 第一个「可见性太低」的例子,菜单被隐藏,拇指不能直接与菜单产生关系,并且距离过远,拇指难以触达。
  • 第二个「效率太低」的例子,用户需要通过拇指来回操作,导致效率降低,这就跟使用遥控器控制电视机一样,用户无法直接触达内容。
  • 第三个「手势冲突」的例子,其实就很清晰了,就是说标签栏的优先级可能会被页面的其它控件所取代,那么拇指就无法直接对其产生作用,从而禁止当前页面的手势交互行为。

它们的核心点就是拇指与触摸屏的关系。

如果你现在还不能深刻理解汉堡包菜单的劣势,那就想一下去看一下现在的产品,其中「我的」、「个人中心」或「更多」其实都是变相的汉堡包菜单。

在「我」这个标签页里,这一系列功能列表,无非就是另一种模式的汉堡包菜单,只是这里呈现的都是不重要的功能,并不影响用户使用这个产品。回想一下,你是不是很少,甚至从来没用过这里的某几个功能?再跟手势结合,就会发现,「我」所处区域并不是容易点击的区域,这就是它效率低下的原因了。现在能懂了么?

弹框的操作路径

当传统的确认弹窗逐渐被手势操作取代,大家就应该察觉到:以往从电脑迁移到移动设备上的交互行为已逐渐被改善。

我曾经写过一篇文章,叫「取消按钮的设计逻辑」,讲了「左取消,右行进」这个原理。意思就是当我们在设计弹框的时候,用户已经习惯这样的操作路径,所以不要轻易更换位置以混淆用户的认知。再从手势的角度来说,就是右边更容易点击。

后来有同学说到,但是有些特殊场景,譬如删除资料,而产品人员不希望用户删除,于是把删除放在左边,取消放在右边。毕竟右边更容易点击,所以位置换了会比较合理。

这是错的!

我们不能通过改变用户使用产品的常识来将产品人员的想法置于用户之上。当用户已经形成「左取消,右行进」的认知之后,违反这样的一致性,去换位置是很危险的。所以出现了 action sheet,来解决一些产品关于 alert 无法解决的问题。

如图。

大家要记住的是,当页面逻辑与手势操作产生逻辑冲突时,我们不是去否定以前已经被验证且正确的内容,而是通过创新,来解决这个冲突。这就是拇指驱动设计的一种方式。

包括我们以前在移动设备上选择删除某项数据,都会弹出警告框,询问我们是否确认删除。这种方式会打断我们的操作行为,久而久之,用户已经对此交互方式习以为常,或者说免疫了,但这种弹框的方式始终被认为是不好的一种交互手段。所以侧滑删除,已经被更多产品功能用来取代没必要弹框的操作。

也许很多人没思考过底层原因,或者仅仅只是觉得其相比弹框显得更友好。其实这个行为是基于手势交互做了相应的优化,让用户操作起来更加方便。

Banner

到了这里,我再举个所有人都熟悉的例子,就是轮播图了。

轮播图最早出现于网页端,后来被大量商家模仿,以至于到移动端还备受各产品设计人员的欢迎。但其实很多人对轮播图的使用方法都是错误的。

下面来看轮播图与手势的关系。

试想:你的轮播图有 6 张 Banner,你要翻到第 4 张,无论是往前翻还是往后翻都要产生 3 次交互行为。而大部分产品的用户在界面停留的时间不会这么久,更不会看完你 Banner 的内容。以至于有研究表明,大部分产品里,除了第一张 Banner 的点击率能达到 83% 之外,其余的点击率都非常低。

有人说可以点击下面的原点指示器做跳转,这么小的点,你觉得点击它现实么?所以手势交互与轮播图是相互矛盾的一种设计方式。

所以当运营策划了一个活动,而你就往顶部的轮播图里塞,这个行为就已经注定这个活动的用户参与度是很低的了。除了个别电商产品,他们以卖广告位给商家作为盈利点,但即便如此,我相信这个广告位除了第一张图的点击量稍高外,其他图片的点击量相对于产品本身的用户体量比较而言还是很低的。这也是为什么部分产品把轮播图规则改为用户进入首页随机展示轮播图页面,而不是强制指定于显示第一张的原因。

毕竟轮播图在顶部,用户需要通过拇指长时间的在「延伸区域」进行操作,那么使用率自然就降低了。

如果你的产品有很多活动是在同时期进行的,那么我给部分产品的建议是放一个活动主题入口,如下图。(当然,这要视情况而定,并不是通用的。)

搜索框的变化

我们现在看到的搜索框基本都是放在屏幕顶部。

为什么呢?

市面上对这个问题的解释是这样的:用户已经被现在的产品训练得在界面的顶部必须看到一个搜索框,设计师打破这个常规就要承担风险。

看完这篇文章,你就已经知道,对于用户来说,由于屏幕顶部离拇指很远,处于难以触达的区域,在体验上很不好。所以搜索框成了认知上应该在顶部,但操作体验上又不应该在顶部的一个设计。

但是回想一下,会发现大多数 App 的主要内容都是位于易于触达的区域。所以当看到高德地图把搜索框移动到下面来之后,就能知道,拇指驱动设计的概念被越来越多的人认识到其重要性。

地图类产品把搜索框移到下面来的首创应用不是高德,应该是 Lyft。

瞧,拇指驱动设计,多酷~

总结

《上瘾》里有句话:当人们不由自由地做出下一个举动时,新的习惯就会成为他们日常生活的一部分。

当手势充分地发挥了作用,辅助用户操作或实现功能,它就成了用户不可分割的一部分。

今天通过对手势意义的解读,以及拇指驱动设计的解析,再加上这些案例的拆解,我相信你能更好地理解为什么手势交互这么重要了。

交互设计师对于「触摸屏」,必须有深刻的认识,才能理解设计背后的逻辑。

如果这篇文章对你有帮助,记得点个赞,后面我好持续输出。

文章来源:优设

互联网生活的底层逻辑:连接、赋能、破界

资深UI设计者

互联网的底层逻辑就是以一种更的形式来满足了我们的需要,让我们的生活和生产更加的智能和。

底层逻辑是什么?如果给它一个释义的话,那应该是:最初的意图或做一件事情原始的出发点。

互联网的底层逻辑

我们生活在一个网络时代。可以利用网络,购物,打车,叫外卖,娱乐,办证,学习等需要。可是在没有网络的年代里,做任何事情都是需要跑腿和亲力亲为。

我们对比没有网络年代。互联网给我们生活带来了极高的便利和效率。

我认为互联网的底层逻辑是:用一种更的形式来满足我们生活生产而产生的需要。

我们拿买衣服,购买外套举例。

  • 进店购买:询问导购–找到外套–挑选–决定买不买
  • 网上购买:搜索外套–屏幕展示外套–挑选–决定买不买。

经过对比发现:

进店购买和网络购买最初的意图都是满足穿衣服。两种形式的心理活动逻辑一样。都是店铺找到外套,然后作出购买决定。只是两种方法的获取形式和途径是不一样的。

  1. 实体店询问导购,变成了我们线上自主搜索。
  2. 口头说出外套变成输入关键词“外套”。
  3. 获取到的结果由导购带到引导变成外套信息数据展示

互联网技术的让购物,让买衣服多了一种途径,多了一种形式并且有别于我们传统的购买方式。

再如直播卖货,直播卖货在网络上火了一把。口红一哥李佳琦直播卖货,1分钟售罄14000支唇膏、打破“30秒涂口红”吉尼斯记录、5个半小时带货353万……最高时段3000万人在线围观。

现在我们要聊的并不是网络红人的伟大数据。而是网络直播这个事。想一下,网络直播是否在真实生活情景有原型。

看到上面的情景,是不是觉得熟悉了。

  • “瞧一瞧,看一看”
  • “厂家做活动,回馈消费者,不要1999,不要1599,只要999”
  • “走过路过不要错过”
  • …..

我们暂时称这些情景为现场直播,现场叫卖。由于互联网技术的成熟,直播平台的成熟。将现场直播搬到了网络直播。网络直播底层逻辑就是现场叫卖的另一种形式。

我们可以发现,互联网很多项目其实都是可以从现实生活中找到原型:

  • 购物–电商
  • 线下地推–网络直播
  • 电话叫餐–外卖
  • 培训–网课
  • 阅览馆–电子书
  • 办证跑腿提交纸质资料–网上提交电子档资料
  • ……

互联网如何让生活生产变得更为?

1. 连接,跨空间,跨地域连接人

假如没有网络,我们人与人之间的生产活动大多只存在于本地圈子。例如:

  • 在当地文化圈学习,与当地同龄人成为同学。
  • 信息和话题交流闭塞,对外界信息获取滞后。
  • 和当地人做生意,把货品卖给当地的消费者。

有了网络:

  • 在抖音快手,我们可以看到其他城市的面貌,了解更多的人文民俗。
  • 在网络课程上学习平时接触不到的知识。比如:理财,摄影,写程序,做会计。
  • 还可以通过电商将生意做到全国各地。

网络连接能突破界限,跨地域、跨空间,将不同省份,不同城市的人,通过互联网联系起来。然后将我们的信息,个人技能,社会信息放大到更多地方。

2. 赋能,释放能量,价值最大化

以前有种现象。那就是信息不平衡,需求与被满足不平衡。

比如:A想采购一批水果加工仪器,但当地农业为主,别说售卖水果加工仪器,即便是询问他人也鲜有人知道。

但在网络时代,我们只要百度或者阿里巴巴搜索。总会得到我们想要的线索或者结果,总能找到加工仪器供应商的信息。

再如:十八线县城要学习IT编程语言,一般来说要去大城市培训机构学习。有了网络,直接在一些课程平台上购买课程就可以了。

上面的例子想说明的就是互联网可以放大社会资源的利用率,将价值更大化,让更多人参与参与到社会资源的共享当中。消除局限和阻隔,将知识课程提供千千万万的人可以学习使用。

滴滴平台一方面解决了人们打车难的问题,另一方面也将闲赋私家车全部利用起来,给打车这和私家车车主同时满足需求和创造价值。

几年前我们看着小卡片的菜单和电话叫外卖,现在我店家再也不用通过发传单来招揽生意了,只要用户有需要打开app就可以实现足不出户享受用餐。

互联网将社会资源效率更大化。无论是外卖平台,学习平台,电商平台都是将原来局限在小范围的服务放大到全国各地的人群使用。这些都是互联网技术赋予的能量。

3. 破界,突破界限,让不可能成为可能

在那个守着电视机,听广播看报纸,用着纸币的年代。怎么也不会想到今天我们可以拿着手机看新闻,追剧,刷抖音;用手机乘公交,乘地铁;手机当钱包,网纱购物,线下消费。所以很多老人好像有点不能理解年轻人的生活方式。

所以技术可以让满足我们需求的方式发生改变,甚至是颠覆的。

从前我们看的也并不是电视本身,而是看声情并茂的画面;报纸也不是报纸而是信息;使用纸币是为了完成交易。电视,报纸,纸币这是一个时代的载体。

互联网技术的发展让这些载体发生了变化,打破了刻板印象。让我们知道了很多东西其实只是个物体,这些物体帮助实现我们内心产生的需要。

今天只是这些物体被新的物体替代了,就好比手机替代了一部分看电视的需求。在十几年前我们怎么也不会想到今天那么多东西都被改变和替代。也许我们现在不切实际的想法,在将来的某一天也终将会被替代和成为现实。

互联网把我们每一个人连接在一起。放大了市场,提升了效率,突破了界限。用一种新的形式满足人们日新月异的需求升级。

互联网继续,5G来袭,展望未来。

互联网已经渗透到了各行各业。大到与我们生活息息相关,也可以小到陌生领域。人们都说互联网的发展已经到了瓶颈,我更愿意相信是互联网是暂时进入到了它的发展周期。

技术只会不断的向前,不断的用新的更好的方式来突破替代的旧的形式。随着5G网络的到来,肯定会有新一轮的技术革命到来。

第5代移动通信网络比4G网络的传输速度要快10倍以上,一部1G的电影可在8秒之内下载完成,我相信这绝对又是一个新的起点,很期待5G时代给我们带来的惊喜。

4G时代连接人与人,是服务业的升级

不难发现,4G网络应用大多数属于服务范畴。像电商,外卖,打车,餐饮其实都是服务员行业。4G时代提高了服务效率,实现了跨距离,跨空间服务。

视频聊天可以穿越见面时空对话;电商可以让你在一个地方买遍全国甚至全球;新零售可以实现不出门买菜做饭。4G网络连接人与人,大大提高了人与人之间服务的效率和数量。

5G时代连接人与物,交互体验升级

随着5G网络的到来及速度效率的提升,我们可以实现更加多元化的连接。

5G可以做到4G想做但有无法实现的事情,例如扩展到人与物之间的连接;也可以在4G基础上实现更加精准的计算,又如精密的医疗,更加精准和快速的大数据。

5G网络将继续升级改变我们生活,它将继续改变娱乐,交通,医疗,智能家居等等领域。我们可以试着猜想:

  • VR技术,让看电影能够有更佳的3D体验。
  • 网上购物不在需要看图片。而是有更好的体验,身临其境在虚拟的店铺中。可以对商品有触摸和移动等虚拟的互动体验。
  • 无人驾驶技术
  • 智能家居。不在家或者在外地对家居进行操作,比如:关窗,开空调,扫地等。
  • 智能医疗。如;远程手术。由于5G网络有着更加精准的效率。支持医生运用机器跨医院操作手术等。

技术的进步会给我们的生活带来改变,我们期待新的形式来满足我们的需求,期待我们的生活和生产更加的智能和。

 文章来源:人人都是产品经理

如何把产品的痒点变成爽点?

资深UI设计者

新康众用户体验设计部 – 伊格:在细节(体验)决定「成败」的今天,设计该如何寻找支点撬动产品体验,甚至于是行业体验?

2007年1月9日,史蒂夫·乔布斯在 MacWorld 大会上正式推出了第一代 iPhone,至今已过去近 13 年了。为了带来更好的用户体验,第一代 iphone 在硬件的设计上,摒弃了以往的物理键盘,开发了「虚拟键盘」结合手势交互用于信息输入,无疑是当时智能手机行业内的一大颠覆式改革。

我们聚焦于「虚拟键盘」本身来分析,「虚拟键盘」在日常生活的输入场景中已经做得足够的「好用」、「」,甚至于近乎完美。在「体验经济」愈演愈烈的今天,各行各业为了打造更好的输入体验,都围绕着「虚拟键盘」并结合行业特性做着一些个性化的设计尝试,比如我们今天要讲的「汽车行业」。

行业聚焦

说到了「汽车行业」,我们首先从「汽车」本身开始说起,目前汽车共拥有两个「身份信息」,一个是车架号(VIN码)、一个是车牌号,在日常生活中我们最常接触的就是车牌号,其次才是车架号。

从互联网兴起至今,各行各业为了营造更好的服务体验,都走上了「互联网+」/「移动互联网+」的战略路线,当然「汽车行业」也不例外。围绕汽车本身衍生出了众多对 B 端以及对 C 端客户的汽车服务,如常见的「智慧停车、违章缴费、维修、保养、保险、车联网等」一系列汽车服务,均可以在线上场景中体验到。

我们在线上体验汽车服务的同时,首先需聚焦于汽车本身,其核心要素之一就是「汽车身份信息」,在体验流程中首先需要将车牌信息录入系统,才能便于我们后续更好的对服务进行体验(如:线上停车缴费、违章缴费、维保预约、保险理赔等众多与汽车相关的场景)。

那么在「汽车行业场景」中使用「系统键盘」输入车牌信息是否依旧能达到「好用」及「」的体验呢?经过测试后得出了结论:在使用「系统键盘」输入车牌信息时,虽然能够完成输入任务,但相较于日常生活中的输入体验,使用「系统键盘」输入车牌信息就显得不是那么的「好用」及「」了。

痛点解析

我们回到车牌本身来分析一下,使用「系统键盘」输入车牌信息,从输入体验的角度来衡量,在「行业场景」下,「系统键盘」为何只被评定为「能用」?

基于上述问题我们先从车牌开始说起,路面上常见的车是「私家车」和「警车」,从「国家车牌行业标准文件」中分析得出,常见的标准车牌是由「省份、城市、序号」三者组合而成的,其中具体信息又是由「汉字、英文、数字」构成的。

在「行业场景」下使用「系统键盘」输入车牌信息,不够好用、的两个主要原因如下。

痛点一:输入操作繁琐

使用「系统键盘」在进行车牌信息输入时,需要在汉字、英文、数字三者之间来回切换才能完成车牌信息的输入任务。

痛点二:无法达到标准化输入

使用「系统键盘」输入的车牌信息是否有效、是否符合国家标准最终还需要在输入任务完成后,依靠系统的校验机制来验证其有效性。

上面所述的问题,虽然还称不上是「痛点」,但是对于那些每天与车打交道的用户而言也算是一个「不痛不痒」的问题,在细节(体验)决定成败的今天,细微的体验问题我们也应当尽可能的让其变得「完美」。

设计策略

基于上述问题,通过洞察分析我们发现了「设计机会点/发力点」,以「虚拟键盘」为抓手,明确了设计策略,开始着手设计符合行业特性的「专用输入组件 」。 在「行业场景」下通过「专用输入组件」输入车牌信息,围绕「」(提高输入效率)、「防错」(定义防错机制使得输入的信息符合国家标准)两个目标进行设计,从而使其在「行业输入场景」下达到「好用」及「」的体验。

目标与方法

基于上述的设计策略,我们明确了本次设计的核心目标 :解决输入效率(提效)、解决输入出错(防错机制)。那么接下来我们分析一下国家对于汽车行业车牌标准的相关政策与规则,从中挖掘达到设计目标的方法。

1. 认识车牌

在做分析之前我们需要对其关键因素(车牌)有一定的认知,下面所展示的车牌基本涵盖了目前我国所有的车牌类型。其中包括常见的如「普通蓝牌」、「普通黄牌」、「新能源车牌」、「教练车牌」、「警用牌」等。

2. 车牌分类

为了使车牌信息变得更具条理性,我们对其进行一次分类,分类的依据「是基于他们相互之间的组合规则与共性特征而决定的」。我们将其分为四大类:「普通车牌」、「特种车牌」、「新能源车牌」、「特殊类车牌」。

具体分类细则如下:

  • 普通车牌:由 「省份/城市/序号」 组成的,其序号是由 「数字/字母」 构成的,这类车牌属于 7 位数牌照。
  • 特种车牌:由 「省份/城市/序号」 组成的,其序号是由 「数字/字母/汉字」 构成的,并且序号中 「汉字必须是车牌号的最后一位」 ,这类车牌属于 7 位数牌照。
  • 新能源车牌:由 「省份/城市/序号」 组成的,其序号是由 「数字/字母」 构成的,这类车牌属于 8 位数牌照。
  • 特殊类车牌:这类车牌因无共性规则,我们将其定义为特殊类。(这类国家特殊单位的车在我们的日常生活中/汽车行业内的工作中接触到的机会也不会很多)。

3. 定义设计范围

分类完毕后,我们定义一个设计范围,因为在设计时我们往往很难通过一套设计方案来满足所有车牌的输入场景,所以在设计时我们会围绕那些有规则的、有共性特征的车牌进行组件的设计,从而满足大部分的输入场景。

根据车牌的分类规则,我们将「普通车牌」、「特种车牌」、「新能源车牌」三大类,定义在行业输入组件的设计覆盖范围内。特殊类车牌虽然在日常生活中接触到的概率较少,但是我们也应当尽可能的满足其输入场景,通过自定义车牌号的方式,调用「系统键盘」来完成其输入任务。

4. 共性&差异

在明确了分类细节与设计范围后我们对范围内的三类车牌做一次共性与差异化的具体分析,以便于在组件设计时根据规则定义一些防错机制。(为了便于理解,防错机制将会在Demo阶段展示)

普通牌 & 特种牌:共性特征(组合规则一致、二者都属于7位数牌照)差异(特种牌的序号中多了一个「汉字序号」,并且汉字序号必须是车牌号的最后一位)。

特种牌 & 能源牌:

  • 共性特征:组合规则一致;
  • 差异:特种牌属于 7 位数牌照,且存在汉字序号;能源牌属于 8 位数牌照,且不存在汉字序号。

能源牌 & 普通牌:

  • 共性特征:组合规则一致;
  • 差异:能源牌属于 8 位数牌照,普通牌属于 7 位数牌照。

5. 分析总结

通过上述的几步分析,我们对国内的车牌有了一定的了解,并为其进行了归纳细分,定义了设计范围,分析了范围内各类车牌的共性以及差异,最后我们结合「国家车牌行业标准文档」与上述几步的分析结果,得出以下结论:

  • 常见的标准车牌号是由「省份、城市、序号」组成的,省份位的字符必须是汉字(各省、自治区、直辖市简称),城市位的字符必须是英文(发牌机关代号:A~Z),序号位的字符必须是数字/字母组合(A~Z / 0~9),特殊序号位的字符必须是汉字(港、澳、挂、学、警)且汉字序号必须是车牌号的最后一位。
  • 行业输入组件定义为两种:省份输入组件(因国内省份较多所以将其作为一个独立的组件)、车牌号输入组件(该组件由英文、数字、汉字序号组成)。
  • 特殊类车牌:这类车牌虽无共性规则,但需要满足其输入场景,通过自定义车牌号的方式,调用系统键盘来完成其输入任务。

具体方案 – 省份输入组件

省份输入组件的结构分为两部分。

第一部分是文字按钮,点击后调用「系统键盘」输入自定义车牌信息。

  • 满足特殊类车牌号的输入场景;
  • 满足一些自定义信息的输入场景。例如我们通过调研了解到,汽车维修行业他们有时候不单单会录入车牌信息,偶尔还会录入一些特殊的车牌代号,比如洒水车001、警车003等。

第二部分是车牌号的省份简称(各省、自治区、直辖市简称)。简称部分采用了国家地理行政区的划分原则,对各区域内省份依次排序(排名不分先后)。

下面说明一下按照行政区划分原则做为省份排序的好处。

以华东区为例,该区域包含了山东、江苏、安徽、浙江、福建、上海这几个城市,在同一个行政区内必然会有一/多个经济体系相对发达城市。城市一发达,附近省份的外来车辆就会相对较多,例如在江苏地区总会看到安徽地区的车辆一样 。

现在的软件基本都使用了定位技术,我们在外省进行车牌信息的录入时,系统是会自动获取并填写当前所在地区的省份简称,以降低用户使用键盘的输入次数。如果我们是外地牌照车辆则需要将当前省份简称删除,再修改为车牌的实际省份简称。

按照行政区作为省份排序的好处:在修改省份简称时,相邻的省份在排序上会比较接近,这样用户在查找、选择对应省份时比起按首字母排序/其他方式的排序,查找效率会相对更快。

具体方案 – 车牌号输入组件

车牌号输入组件分为三部分,第一部分是自定义车牌号的文字按钮 + 完成操作按钮;第二部分是汉字序号 + 数字序号的按键;第三部分是英文序号以及删除按键。

其中英文字母按键是由 25 个字母组成,缺少了字母 i ,因为大写字母 i 与数字 1 的字体设计及其相似,导致两者很难辨别,所以在「行业标准文件」中明确指出,字母 i 不可用于组成车牌信息。

当然「行业标准文件」中还指出了另一个字母,也不可用于组成车牌信息,他就是字母 O ,原因与字母 i 一样,大写的字母 O 与 0 及其相似,导致两者很难辨别。

那么为什么我们的组件中还要包含字母 O 呢?因为在过去字母 O 是作为公务车专用代号,存在于车牌号的第二位(城市代号位)俗称「O牌特权车」。随着 O 牌泛滥,特权肆意,有的省份就将 O 牌由公务专用改为了普通民用,还有的省份直接取消了 O 牌,当然还有部分省份保留着 O 牌作为公务用车专用代号,所以我们在组件设计中保留了字母 O。

DEMO – 演示

为了更好的展示设计方案,以及便于大家理解其中的设计细节,下面我们通过 DEMO 的方式,定性的模拟几种输入场景,通过「专用输入组件」并结合防错机制进行车牌号的录入。

场景一:车牌号省份简称修改

基于地理定位技术,进入信息填写页面系统会默认获取到当前地区的车牌省份简称,此时如果是外省车辆,则需要对省份简称做修改变更。其实车牌号第二位也能通过定位技术获取到,但是目前我国存在一个城市拥有多个发牌代号的场景,例如苏州市发牌机关代号「苏E」、「苏U」,包括一些直辖市也存在这种情况,所以这也是城市代号不默认获取的直接原因。通过定位技术获取信息本身是一种提效的策略,但是基于上述场景反而可能会适得其反,

场景二:输入第2~5位车牌号

车牌号的第二位必须是英文,此时数字序号按键与特殊汉字序号按键为禁用状态。当第二位车牌号输入完毕时,数字序号按键变为可用状态,此时无论输入的第二位车牌号是否为字母 O 都必须将其禁用,因为字母O只会存在于车牌号的第二位。

场景三:输入第6~7位车牌号 – 完成普通车牌的输入场景

当第 6 位车牌号输入完毕时,激活特殊汉字序号。当第 7 位车牌号输入了英文/数字时,禁用特殊汉字序号,至此普通车牌号输入完毕。

场景四:输入第6~7位车牌号 – 完成特种车牌的输入场景

当第 6 位车牌号输入完毕时,激活特殊汉字序号,因为特殊汉字序号只会存在于车牌号的第 7 位。当汉字序号输入完毕后,删除按键以外的其余按键全部禁用,因为标准的特种车牌只有 7 位,至此特种车牌号输入完毕。

场景五:输入第6~8位车牌号 – 完成新能源车牌的输入场景

当第 6 位车牌号输入完毕时,激活特殊汉字序号。当第 7 位车牌号输入了英文/数字时,禁用特殊汉字序号。当第 8 位车牌号输入了英文/数字时,删除按键以外的其余按键全部禁用,因为标准的新能源车牌只有8位,至此新能源车牌号输入完毕。

场景六:演示特殊类车牌号的输入方法

特殊车辆在我们的日常生活中/汽车行业相关业务中接触到的概率较少,但我们也应当尽可能的满足其输入场景。点击自定义按钮后,弹出系统默认键盘,此时车牌号输入框中内容清空,文案变为「请输入自定义内容」,用户将信息输入完成后系统不做强制校验。

最后,我们又通过定性的方式,基于两个输入场景对组件的输入效率进行了模拟预估,得出结论:使用「专用组件」输入车牌信息,相比较于使用「系统键盘」输入效率均大幅度得到了提升。

总结

俗话说「艺术产生情绪,设计解决问题」。设计是需要基于一定的规则体系之内,倘若设计脱离了商业/行业规则,缺少了解决问题的能力,那么其结果就可能变成了一个耐人寻味的艺术品。

在细节(体验)决定成败的今天,如何将「痒点」变为「爽点」,如何通过细微的设计优化改良产品的用户体验甚至于影响到整个行业的体验,这正是我们作为产品人、体验设计师该深耕发力的地方。

文章来源:优设

交互设计师如何梳理业务需求?

资深UI设计者

需求整理的现状

写这篇文章的初衷,是在实际工作中遇到 PRD & DRD 文档,对于一些交互设计图,会产生不理解,或者说在实际落地画图的时候会发现一些前后不一致的问题,解释过于冗余,不清晰。在接触新的业务时,很难把新理解的内容从上至下的消化完整。所以希望通过这篇文章帮助刚接触交互的同学更好地开展交互设计工作。

在传统瀑布式需求分析流程中,我们设计师往往拿到的是已成型的信息架构图&产品结构图&关键业务流程图,只是了解一下大概是什么类型的产品,很难发现企业产品中真正关键的流程价值点在哪里,或者说也不清楚后续发展的走向,只能卯足了劲去做图做说明,整理完整。时间紧迫压力大,又要照顾整个项目。往往决定产品成功与否的,是产品 20% 的主要功能(二八原则)。所以在面临初期产品设计中,应该将主要精力放在重要功能流程中。

目前,在互联网产品中,敏捷开发是所有产品设计者最推崇的。原因在于,能够对业务、设计、开发更有前瞻性&敏捷性。

理解业务需求,是做好交互的首要条件

产品交互的成功一定是建立在业务需求提炼清晰的基础上。业务需求的价值提炼,也是设计师需要参与完成的。业务需求是一个比较大的任务,来源可能是老板的要求,可能是产品提出的,也可能是用户的反馈。通过业务需求,我们要分析出相关的业务目标。有个偶然的机会,了解到彩色 UML 的设计方法,在具体实践中,感觉这个方法能够快速适应任何业务流程,简单方便,易懂,并能快速发现业务流程中的问题,加以修正完善。

彩色UML建模

有幸认识王海鹏老师,他推荐了早年他翻译的彩色 UML 建模一书,作者 Peter Coad,是将彩色和企业组件集成到建模技术之中的第一本书的主要作者,是世界上经验丰富的建模人员之一,他所创建的模型几乎涉及到所有行业。

此书是第一本介绍用彩色来表达软件设计的著作。作者用 4 种颜色来代表 4 种架构型,给定一种颜色,你就知道这个类可能具有哪些属性、链接、方法和交互。得到的彩色构建块能创建更好的模型,并获得应有的认可。彩色和架构型仅仅是开始。作者更进一步将这些架构型发展为 12 个类的领域无关组件。作者在过去 10 年中创建的每个模型,都遵循这个组件所表达的基本形状和职责。

笔者利用彩色 UML 建模的设计方法,用于业务梳理工作,达到了意想不到的效果。以下为彩色 UML 建模基本概念(截取彩色 UML 建模书中的介绍)。

△ 《彩色UML建模书》第9页

△ 《彩色UML建模书》第10页

△ 事例会员注册

交互设计中常用图

1. 实体关系图(又称ER图)

定义:ER 图是用来描述现实世界中的实体关系模型,所谓实体是指客观上或者逻辑上存在并且可以区分的人事物。

作用:促使你以最适合技术理解实现的方法,来规范的描述功能模块的核心要素,其实就是数据库的物理结构。而这种描述是无二义的,最清晰传达 PM 的设计思想。

2. 功能结构图

功能结构图就是按照功能的从属关系画成的图表,在该图表中的每一个框都称为一个功能模块。功能模块可以根据具体情况分得大一点或小一点,分解得最小功能模块可以是一个程序中的每个处理过程,而较大的功能模块则可能是完成某一个任务的一组程序。用通俗的话来说,功能结构图就是以功能模块为类别,介绍模块下各功能组成的图表。

作用

  • 梳理需求,以鸟瞰的方式对整个产品页面中的功能结构形成一个直观的认识。
  • 思考并明确产品的功能模块及其功能组成。
3. 信息结构图

信息架构属于用户体验的结构层,是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代,否则不会大改。

作用

  • 帮助 PM 梳理复杂内容的信息组成,避免信息内容在展示过程中出现遗漏、混乱、重复;
  • 作为开发工程师建立数据库的参考依据。

信息结构图构成要素

  • 导航:网页访问者的访问途径。
  • 频道:某一个同性质的功能或内容的共同载体,也可称为功能或内容的类别。
  • 子频道:某频道下细分的另一类别。
  • 页面:单个或附属某个频道或分类下的界面。
  • 模块:页面中多个元素组成的一个区域内容,可以有一个或多个,也可以循环出现,如:文章列表。
  • 模块元素:模块中的元素内容,以文章列表举例,文章标题、文章摘要、文章发布时间,这些都是元素,都是组成模块的内容,同时他们也是可以循环出现的。元素的类型可以是:文字、图片、链接等等。
4. 产品结构图

定义:产品结构图是综合展示产品信息和功能逻辑的图表,简单说产品结构图就是产品原型的简化表达。

作用:它能够在前期的需求评审中或其他类似场景中作为产品原型的替代,因为产品结构图相较于产品原型,其实现成本低,能够快速对产品功能结构进行增、删、改操作,减少 PM 在这个过程中的实现成本。

5. 业务流程图(泳道图)

业务流程图,不是操作流程图也不是页面流程图。它是产品的整体业务流程,直接和业务挂钩,可以说是产品的核心流程。

作用

通过业务流程图,钻研关键事件的流程,分析为什么要这么做,探索出更深层次的问题,从而对现有不合理的业务流程进行重组优化,进而制定优化方案,改进现有流程;阐述在项目中各个角色是如何产生相关联系的。

绘制规范/建议

  • 让涉众参与,不要闭门造车:与业务流程图包含的各个参与角色代表适时确认事情的原本流程。
  • 恰当的层次分解,不要将所有的环节都铺到一张图上。
  • 逐渐深入,先抓枝干:切忌一开始就陷入细节。
  • 流程一定有开始和结束:切忌交出来的流程图,让读者问:流程的开始点是什么?用清晰的代表开始和结束的符号来完成第一步和最后一 步。
  • 流程图符号绘制排列顺序:由上至下,由左至右。
  • 同一流程图符号大小宜相对一致。
  • 编号:这是让沟通效率更高的优化措施。当你有了编号系统,相当于对你的流程图都赋予了唯一识别身份证号。负责流程规则审核和优化的部门能够清楚在邮件里传达 H5.1 流程优化,大家就更明确指的是什么。
  • 路径符号应避免互相交叉。
6. 任务流程图

任务流程图就是通过图形化的表达形式,阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时,会产生的一系列操作和反馈的图标。

作用:基于业务流程,进行任务流程梳理,阐述角色和程序发生交互的流程,你如何进行操作,系统如何进行反馈。

任务流程与需求文档中的业务流程并不一样。虽然它们都是流程图,但业务流程更偏向于业务限制、后台逻辑等,并不过分注重用户的操作逻辑。而任务流程则需要关注用户如何操作、界面如何反馈等,从而引导用户完成用户目标。

7. 页面流程图

定义:指电子产品具体所呈现的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。

作用:

  • 交互设计/原型设计的底子,基本依据。
  • 站在用户视角,代表用户所有可能的操作过程,页面流程能快速发现体验问题。
  • 突出页面元素与逻辑关系,提升原型设计的效率。

8. 线框图/原型图

定义:页面的模块、元素、人机交互的形式,利用线框描述的方法,将产品脱离皮肤状态下更加具体跟生动的进行表达。

作用:用例阐释者,用来了解用例的用户界面;系统分析员,用来了解用户界面如何影响系统分析;设计员,用来了解用户界面如何施加影响及它对系统「内部」的要求;类测试人员,用来制定测试计划活动。

构成要素

  • 页面标题:即每一个页面的对应标题,一般就是导航栏标题。
  • 页面内容:以黑白为主,保证信息规整易读。
  • 交互说明:用标签将其对应起来,包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则等等。
  • 主流程线:只需要画出主流程线即可,千万不可太多太杂,时刻考虑读者的感受。
9. 线框图/原型图交互说明的几种类型

限制

包含范围值、极限值等。

范围值主要指数据的取值范围。比如,当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时,你必须标注清楚它们的选择范围,否则开发人员就不清楚该如何设定,如图所示。

极限值主要指数据的显示限制。比如,最多应该显示多少字数,过时如何显示,是否折行等,如图所示。

状态

包含默认状态、常见状态、特殊状态等。

「默认状态」主要指默认显示的文字、数据、选项等。这些内容需要注明,否则开发人员可能难以意识到这是用户填完的效果,还是默认就有的。

「常见状态」主要指针对某一个模块,经常遇到的一些状态。这些状态都需要在原型上表述出来。比如一个普通的积分模块,一般会出现 3 种状态:未登录状态、登录后未签到状态、登录后已签到状态,如图所示。

「特殊状态」一般指非正常情况下的样式、文案、说明等,如图所示:

操作

包含常见操作、特殊操作、误操作、手势操作等。

「常见操作」主要指正常操作时得到的反馈状态。比如一个普通的翻页控件,在经过不同操作后会立即出现如下的状态。

「特殊操作」主要指一些极端情况下的操作。一般,用户不会这么操作,但是一旦遇到极端情况,还是要想好应对措施,因为对于开发人员来说,不管是正常的还是极端的操作情况,他们都要去编写对应的代码。如下图,是填写用户信息的例子,当不写交互说明时,开放往往会遇到很多问题:如果已经勾选了 2 个人,再勾选第 3 个人,怎么办?如果勾选了「张XX」,下面区块中会相应地出现张XX的信息,那么这时候允许修改张XX的身份证信息吗?假如允许的话,修改后「张XX」还保持勾选状态吗?表单提交后要新增一个被保险人信息吗?若修改的是除身份证号码以外的信息,「张XX」 还保持勾选状态吗?提交表单时是覆盖原存储信息吗?若修改后出生日期、性别与身份证号码不吻合怎么办?等等。

面对各种复杂的情况,一方面要和开发人员积极探讨,看看有没有其他的解决方法可以简化各种逻辑判断;另一方面,在得出结论后,要把交互说明写清楚,避免出现让开发人员感到棘手的情况。

「误操作」主要指当用户操作错误时的情况。不过我们在设计时要尽量避免有用户犯错的机会。如图所示,提示中已告诉用户「库存5件」,如果这个时候用户在「数量」一栏中输入「6」会怎么样呢?系统会自动帮用户将其改为「5」省去用户手动修正的操作。

「手势操作」主要指用户使用移动产品时的操作方式。常见的有点击双击、长按、捏、伸、滑动等等。

反馈

用户操作后得到的反馈动作,包含提示、跳转、动画等。

「提示」主要指操作后,系统反馈给用户的文字说明等,如图所示。

「跳转」主要指点击某个链接后,页面跳转到哪里。设计师需要在原型上注明跳转时是「原页面刷新」还是「新页面打开」。如果是做手机应用的话,需要注明跳转时的转场方式,如图所示。

「动画」主要指用户操作后,系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强,是非常常见的一种反馈形式。比如删除某条信息,该信息以渐变消失的形式告诉用户:这条信息已经被删除了。在移动应用中,动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式,必要时可以制作 domo 动画演示效果给开发人员。

文章来源:站酷

认知与UI设计

资深UI设计者


引子问题:

从眼睛进入的视觉信息,占大脑皮层中形成视觉的视觉信息的百分之多少?

这个是视觉通路的说明图,是认知心理学的一个知识。外界信息从眼睛到LGN之后,会往两个方向走,一个形成腹侧通路另一个形成背侧通路。也就是一个形成“你看到是什么”,另一个形成“这个东西离你有多远”。

这是的研究,就是主视觉皮层那块区域并不像我们想象的一样,是一个简单的、从下往上的一个回馈。它真正来自LGN的信息输入只占到10%,LGN从眼睛获得信息也不超过10%。你可以想一下眼睛到LGN,到大脑皮层形成视觉的过程。大脑皮层中的视觉信息90%是它自己产生的,只有10%是来自LGN。LGN当中视觉信息的90%由大脑皮层自己产生的,只有10%来自眼睛。

做一下乘法,你就会发现,即使是眼睛看到的数据信息完全进入大脑皮层,它至多只能占到10%,如果他不是至多10%的话,有可能眼睛实际进入大脑皮层的数据信息只有1%。也就是说大脑主要是在生产信息,而不是在接受信息。所以你应该把你的精力用于研究那90%左右的信息是怎么产生的、它是什么样的规律。

 

1. 《UI设计与认知心理学》一书的主要内容和结构

本书的结构第一从设计实现角度来讲比例构图、构建页面的具体结构、栅格系统、组织原则等等。

第二部分是主要的部分,从第八章一直到十六章是从认知智能的角度,就是你怎么处理信息的角度去做这个交互设计。第十章这里头有一个叫模因论,模因论就是把模因类比成基因。

第十三章和第十六章写的就更抽象一些,第十三章主要是讲人工智能的基础,第十四章是讲应用,第十五章就是和今天话题有相关的地方,就是VR、5G这些,第十六章是我研究生毕业论文,我个人认为没写完,又写了一遍,是从心理学角度去阐述,为什么我们设计和国外的设计是不一样的。

 

2. 举例认知与UI设计

我们先有一个感性认识,认知与UI设计有什么关系?这其中有两点。

第一个就是古腾堡定律与内隐记忆。古腾堡定律,大家都听过吧,(注:该法则描述了一个理论:人的眼球移动规律趋向于从上到下,从左到右,在视觉区域中,左上角通常为视觉起始点,右下角为视觉终点,而右上和左下是视觉落盲点。)也就是F形阅读。这是尼尔森·诺曼在2006年产出的一个结论,即人浏览页面的方式会形成一个F型的路径。

但是有个公司叫EyeQuant,他们是做一些眼动仪及其研究的。他们统计了大概是15万张前六秒人的注意力的热区图,它形成了大概这个结果。

EyeQuant就说尼尔森·诺曼的结论可能不太对,它不是F型的,他给出了很多结果。

你会发现这个图很多时候是居中或者是中间等等。于是EyeQuant公司的研究结论就是:有太多因素影响眼球运动,不用把F型法则当做金科玉律。他们在官网上发了一个帖子,这是他们这结论,底下是论文的网址,大家也可以自己看一下文章,判断一下EyeQuant说的对不对。

我们来了解一下古腾堡定律,如果大家不了解,我先来解释一下。古腾堡是一个德国人,他发明了独立印刷术,他认为人的阅览浏览页面的规律是从左上到右下的。左上是第一注意区,然后是右下,另外两个区域是最容易被人忽略掉的。

上方是热力图,大家可以看一下,这两个图其实是有关联的,热力图和古城堡定律大家注意看,最关键的点都是左边。比如当你做web导航的时候,你一般会把导航放到左上角,很少有人放在右上角。跟我们阅读习惯是相关的。读书写字都是从左开始的,所以热力图表现出来并不是彻底的居中或者是在右下,左边还是一个很重要的位置。第二点是2006年的互联网产品形态和现在互联网产品形态是不同的,过了十几年了,拿现在的数据说以前的事情,有效性是有限的。

另外,有几个反例它是没法解释的。大家有没有关注过阿拉伯语的网站,你会发现它的导航是倒过来的。我看了之后我以为是有个镜子,它其实是正确的,因为阿拉伯文是从右向左书写的。通过以上,我们可以认识到古腾堡定律其实还是起作用的,它是根据你的书写的方向形成的。

有关网页布局的规律,应该是:同时受到古腾堡定律以及产品自身因素的影响。那么EyeQuant公司做的那个研究有没有价值呢?是有价值的,它确实是往中间偏了,但是这是和产品的特性有关,因为06年之后越来越多电商的页面,包括纯展示的东西越来越多了,居中构图的情况也越来越多,很多吸引注意的图片放到中心位置了,所以它会影响整个观感。

古腾堡定律在认知心理学里实际就是内隐记忆。内隐记忆就是:无法通过有意识的过程而接触的知识。举个例子,骑自行车大家都会吧。如果我跟你说有本书教骑自行车,你看完了就能学会,这不可能对吧,你需要自己练习骑。你学会了之后,当你要教别人,你也没办法通过语言告诉他,你只能说你必须得练,这个就是内隐记忆。

生活当中有一个体验,我相信所有人都会有,就是不管是用是安卓还是iOS都会有一个问题,就是比如你把A左边的应用删了,iOS系统会让后面的应用自动补位,它会把A应用推到第一个位置,结果就是你每一次想要打开A应用时候很容易点错。这也是内隐记忆在起作用。

这是内隐记忆的分类,有四种。骑自行车与古腾堡定律和第一种程序性记忆比较相关。第二种是知觉表征系统,大家听说过无意识设计吧,这就和知觉启动是相关的。条件反射就不用说了,巴甫洛夫的狗玩摇铃它就流口水。非联想学习中的习惯化和敏感化是什么意思呢?就是比如说你家里有一个空气净化器,打开的时候你会感觉它发出的噪音很明显,但是过一段时间你又不太注意它的噪音了,就是习惯化。

敏感化是什么呢?烟尘和污染的空气非常刺激呼吸道,所以一旦雾霾 ,呼吸道不好的人就会非常敏感,非常难受。比如说北京的雾霾,一开始可能不太注意到它,但是在北京待十年的结果是只要看天,我就能估算出这个pm2.5是多少值,正负不超过50,非常精准。比如一看今天这个天气情况,我猜污染指数有150,一查手机大概130左右。这就是敏感化,你对这个刺激的信息处理会变得更快。

画表情的秘诀,这个是其中一个例子,它涉及到一块脑区叫梭状回面孔区。大家可以看一下,这些表情有一个什么样的共同点。

大多数的表情是没鼻子的,或者鼻子特别小。再看一下这两张图片,有什么明显差异么?

这两个照片差异非常明显,这个叫撒切尔效应。这时候你感觉还行,两个人可能眼睛不太一样,但是当把照片导过来的时候,反差就特别大,你就感觉右边那不是个人,对吧?

这叫面孔倒立效应,只有正立的时候,才能有效识别面孔。就是必须得形成倒三角你才能有效识别一张面孔。鼻子并不参与三角区的方向判定。

你会发现插座也会被当成表情,面孔倒立效应的基础是部分神经的特异化,部分神经元是专门用来处理面部信息的,识别人的情绪对人的认知是很有作用的。快速地判断一个人的情绪,对社会化动物来说非常关键。有一块脑区专门处理人脸识别,识别情绪。

以上大家可以形成一个大概印象,就是认知心理学可能会和你的设计相关联,也说明了认知科学对UI的指导性,这是我的一个观点。右边是它的逻辑事实,书中尽量去证明这个观点。

 

3. 认知科学对UI设计的指导性

第一,广义的设计概念。想证明认知科学对UI设计的指导性,得先说清广义设计概念。我对它的定义是解决问题的目的与恰当方式的综合。

你想解决这个问题是吧?方式的综合前面还有一个恰当,我强调这个恰当。

第一个先说他目的性,比如说你设计一个汽车、设计一个界面、设计一个流程,是有目的的,不是无目的的。第二是设计是解决问题的恰当手段,设计是你要找一个恰当的解决方法。比如你累了怎么办,你可以造个沙发、设计个躺椅。还有各种各样的方式,哪一种方式是最恰当的方式,是设计出来的。这都是各种各样能解决你累了的一个手段,但是你一定要找到那个最合适的。

这个之后我们还要定义一下UI的概念,这也是我个人的观点和定义。就是解决虚拟界面信息传输问题的目的与恰当方式的综合。

我是交互设计师,我没有用比如说交互或者视觉这个概念,因为我认为这个概念有些窄,并不是说我区分不了视觉设计师和交互设计师。别人问你如何区分交互设计师和UI设计的时候,你就用一句话就能区分:你和界面之间有没有一次以上的信息互动?如果有,那就是交互要介入,如果没有一次就够了,基本就是视觉的活。

传统设计的目的、主题和体验公式。首先传统设计处在两个过程的中间,第一个是“人-自然“中间,也就是人造物,就是你要通过你设计的工具去改造自然。种个地、开个矿等,你设计这个东西是在告诉别人怎么用。比如说不能把门把手放到转轴的内侧,他一定放到转轴的外侧,这个门把手就是在提示我们怎么去操作这门,怎么推这个门。这是基于材料及其加工工艺的造型理论。

另一个就是设计处在“人-人造物-他人“的认知过程中间。它所具有的特性是示能性与自我定位。比如说我穿衣服,你会发现我没有一个红色和绿色的衣服,我喜欢穿蓝色,黑色等,这实际是对自己身份认识的一种构建,向别人传达出一种信息的设计物。传统设计都会包含这些信息,你住什么地方,穿什么衣服,看什么书,都会有这两个作用。

这是史上特别著名的穿丝袜的潮男叫路易十四。你会发现这个东西就是在两方面表达出传统设计的作用,第一个就是示能性。高跟鞋的形状一定是后边开口前面是收口的,因为你要把脚放进去。高跟提高你的身高。这个执杖宽头的地方是用来放手的,窄头的地方是用来杵地的。传统设计的主题是基于材料及其加工工艺的造型理论与设计实践,这是我的观点。我本科是学工业设计的,读研究生的时候也是学工业设计的,我发现我做的所有的事情都是围绕造型和工艺的造型理论。

举几个例子,轮胎演化过程、手机演化过程,你会发现材料的变化,造型的变化。

再来看一个深刻的例子。

这是一个著名的女设计师设计的,她为什么能做成这个东西?是因为她做这个东西的时候,出现了新的数学工具来帮助建筑造型,很多原有的建筑学派不愿意用这套东西,但是她非常激进,要用的数学工具来处理这个造型,才能做成这个建筑。

包括大家现在坐的车,你会发现曲面的车越来越多,车越来越漂亮,是因为数字化之后,加工的工艺更好了,能做出特别漂亮的曲面。原来为什么红旗特别贵?因为那是老师傅用锤子敲出来的,不是像现在数控技术就把它弄出来的。劳斯莱斯也都是敲出来的,所以很贵,想做很好看的曲面成本极高,但现在就成了很容易的一个事情。

传统设计的体验公式就是E=e*n,e是衰减的。e就是每一次使用的体验,比如说手机,你拿到手机的时候是一个体验,是一个e,用了多少次,n就是几。比如说我做一个椅子,用一次是e,用了多少回,它的乘积是整个体验。n是不会变的, e是唯一的关键,而且他每一次都一样。所以传统设计里对它的造型会非常看重,到底表现出什么东西,好不好用,会特别关键。

我再说一下UI设计的目的、主题和体验公式,UI设计的目的和传统设计不一样的地方是,它示能性更主要,自我定位更次要。我举一个例子,马云想用支付宝,不好意思,他也得跟我们用的一样。不管多有钱的人都好,还是只能用Facebook不太可能为这个人单独设计出一款来。也就是说UI设计是绝对平等的,只能说买个皮肤,你可以花钱,但大多数情况下,它的主体功能是不区分消费能力的,所有人用的支付宝都是一样。不管这个人多穷、多有钱。

所以UI设计更主要的是通过界面来告诉你这个东西怎么用,是比自我定位更重要的。所以我们主要考虑的是界面能不能告诉用户是干嘛用的,怎么用,这是最关键的。这和传统设计不一样,传统设计因为有材料成本的问题,一定会涉及到选择和自我定位的关系的问题。

UI的设计体验公式就是E=a*b*c*…*n。这里为什么用乘法而没用加法呢?大家知道有一个叫迷失度的一个概念,它是形容网页体验中,如果a是零的话,后面做再好也没有用。比如说用户找不到入口,到界面这卡在这了,这界面如果是0.1,那后边所有的转化率就全是0.1乘以这个系数。所以它并不要求每一个页面达到百分之百,但是它强调整体乘积一定是一个高值,比如说这个页面的转化率提高了,提高3%,下一页面降低5%,它是一个乘积的关系,每个页面都很重要,它是一个拉长的一个体验公式。最后乘以一个使用次数。

我们再回到认知心理学,我家有三本到四本心理学的书,来看看他们每个人是怎么定义认知心理学的。

斯腾伯格所著的是一本卖得比较好的书,大家可以看一下,认知心理学规定了研究范畴是什么,这是斯滕伯格写的,他认为认知心理学就是研究人如何觉知,学习、记忆和思考问题的。

下面这本书是三个人合著的,他们压根没有给认知心理学一个明确的定义,只是提到这是有关于思考者的心智的科学。但是他说的不是很具体,而是写了一堆研究对象,你把它抽象一下,会发现关键词实际和斯坦伯格的是一样,觉知、学习、思考、语言。

再来看第三个,艾森克和基恩干脆就没定义认知心理学是什么东西,他说现在这个东西是一个特别广泛的研究领域。

这三本书里头有两本书的第二章叫认知神经学,有一本是在第一章的第三部分叫认知神经学。我原本为我的书取名叫《认知与UI设计》,就是这个原因。很难把认知心理学和认知神经学切得特别开,它们的联系实际是很广泛的。

UI设计围绕觉知、注意、记忆与识别会有一些简单的例子。

视觉组织原则,这个是格式塔闭合原则,这是从神经学层面解释格式塔的闭合原则。就是有一个未封闭的图形,大家可以看到左边,你知道他是未封闭的,包括有那种特别的那种三角,有两个半圆,三个半圆,我们会把它脑补成一个闭合的图形,这个是有神经学基础的。

有个叫赫布定律,这个是什么意思呢?两个神经元如果彼此之间互相刺激,他的神经的突触就会变多,它表现在除了突触增多还有髓鞘增厚,都会使神经之间的联系变得更紧。

细胞集合的定义就是,人对信息整个识别过程是这样的,过去你接受过原始刺激,你会记住它,比如说右边这个完整的圆,你第一次看到这个圆,会形成刺激,再看这个圆又形成刺激,它会形成一个完整的赫布集合。等你再看到左边这个不完整的圆的时候,就是一个不完整的刺激,它会激活原来形成的赫布集合,让你产生错觉认为它是原来的完整的状态。识别和记忆是一体的。记得越少,识别越快。

意识和注意的模型与用户体验是相关联的。真正进入到意识的信息是少之又少的。因为人的视觉能看到的只是可见光。在一个很长的光谱中,视觉信息只占这么一点。人对视频信息的感知还有个体偏向,人对红黄蓝的敏感程度是不一样的,它只对部分色彩更敏感一些,更窄。

信息有一部分是无意识的,比如说心跳的声音,在环境特别安静的时候,你能听见心跳的声音,但是当你注意力在别的地方时,你会过滤掉它,心跳声就不进入你的意识了,但它实际是一直在发生的。

你要建立一个概念,就是用户能注意到的事情,是整个界面里头很小的一部分,大部分他什么都记不住,因为他没空。短时记忆的容量是非常少的,比如说让你记电话号码,一般大家都是以443或者344地记,会把它切割成几个块,这样会更容易记一些。

下面这是《艺术与视知觉》这本书里的一个实验。左上角的图案是他们用来做实验的图。你会发现这个图是一个特别拧巴的形状,首先它是不闭合的,不是完整对称的,设计师看到会非常不舒服。这个图是怎么做实验的呢?就是把这个图给你闪一下,就给你0.2秒或者0.3秒。看完之后让你回忆,回忆这个图是怎么构成的?右边这七种是大家回忆的,它有一个共同的特征,就是把它规律化。这个不是有意进行的,是你与生俱来的能力。把一个不规则的东西记成一个规则东西,是你本来的能力。

我们再看一下,我们把这个时间拉长,你会发现很有趣,第一个是字母A的演化。这原来是头牛,公元前1800年恐怖谷铭文里的文字,长得像左上角第一个。后边的人画牛很费劲,识别它、记忆它很费劲。就把它简化,简化,最后就变成拉丁字母。每一次他都在丢失视觉信息,每次都在不停的丢失识别,使它更规整。26个字母基本都是按照这种原理出现的,只不过它是一个特别长时间,跨度上千年,变成这种结果。

第二个是中国的鱼纹,这是李泽厚的书《美的历程》里的截图。你可以发现鱼纹的演化过程也这样,开始鱼纹真的是条鱼,后来这个鱼变成对称性了,上下对称的。到最后它已经不是鱼了,花了几百年时间变成这个样子。

谷歌的logo也是一样的规律。不停地进行简化,不停地进行识别。识别和记忆是一体的。每次记忆时一定会丢失信息,不管记什么东西一定会丢信息。记忆的东西比看的东西更少,当再识别的时候是拿剩下的东西来识别。这也是和人的认知相关的。

 

4. 科学研究的范式。

要想研究一个东西,得有一个合理的思维的过程,才能产生正确的思维的结果。思维能力和思维形式会决定思维产出。

我们看一下概念和命题,这是柏拉图的三段论。我举个例子,大前提是希腊人是勇敢的人。小前提是雅典人是希腊人,结论是雅典人是勇敢的人!这是一个特别标准的三段论推理,大前提小前提,不停地缩小集合的范围,得到这个结论。

但是问题是什么?这个语境里头我没有解释这几个概念:雅典人的概念是什么?如果你注意土耳其的地图,你会发现爱琴海那一块靠近土耳其大陆的很多岛是希腊的,特洛伊现在应该是更靠近土耳其一些。雅典人的概念就是伯罗奔尼撒半岛上一个地区的人叫雅典人,但整个希腊实际是一个特别宽泛的概念,它并不是原来的半岛,而是把周边很多岛屿,甚至靠近罗马的岛都扩到希腊地域里,所以这是一个问题。希腊人的概念又是什么?我也没说。我尽管做了推理,我没说勇敢的人的概念是啥。有个坏人在行凶,你用声音制止了还是用行动,能不能作为判断这个人是否勇敢的标准?在你说出一个推理命题的概念的一刹那,实际上已经把这个东西表达出来,但是在这个命题里是没有说的。

我说得有点绕,其实我想表达的意思是:做推理的时候,推理里的概念,你是不可能在这个推理里头说出来的。你想把这个概念进行规定的时候,还得通过其他语言和其他概念来说这个概念。比如说我们学的数学几何,是基于欧几里得的五大公理,五大公设。有了这个东西,才有推理和判断的基础,它是先于命题存在的。如果不对UI进行定义,如果不对设计进行定义的话,我写这本书就是一个很扯的一个事情,因为并没有形成自己的观点和基础。只有形成观点和基础了,才能围绕这个东西进行推理,哪些是合理的哪些是不合理的。先有概念和命题,才有后边理论和假说。

要判断一个理论靠不靠谱,需要符合逻辑三恰。

第一个要逻辑自洽,就是你不能自己打自己的脸,你需要自圆其说。事实与逻辑相符,就是一个观点在你的学说里是兼容的,不能出现逻辑矛盾。

逻辑它恰是什么呢?你提出这个理论和其他理论不能产生矛盾,除非你能证明理论错了,或者在某些条件不适用,这个理论才是靠谱的,你不能和原来既有的公理产生冲突。

逻辑续洽是什么?就是新的场景、新的案例用这个理论还能解释的通满足这三条才是好理论,缺一条都不行。

 

5. 视角

这一章是从逻辑的视角去看一看,这套理论对不对。从认知的角度考虑设计对不对。认知角度本身对不对。

第一个叫逻辑自洽,在认知理论内部没有矛盾。

我举一个案例。这里有两个图,大家第一眼看上去它是怎么构成的?我用等式表示出来。会有人第一眼看上去认为它是最上方的方式或者是最下方的方式构成的吗?没有人会说这个图形是用这两个更复杂的方式构成的。但是你想没想过,为什么你第一眼看上去就是按中间这两个等式的方式构成的。因为这样理解认知成本,如果把一个你没见过的东西或者一个复杂的东西展示给你看,一定是按照你的记忆,还原成你接触过的最简单的一个构成。它会降低你认知的成本,如果记成奇怪的形状,一定会使你记忆成本更高。

第二,认知一定是要符合演化论。

人们对演化论的误解之一,就是认为越快越强越好,其实不是,而是适应。可能你更强、更聪明、更快,但是适应不了环境。

比如说为什么色盲基因还存在?

男性里头大概有7%-10%,女的还少一点。按理来说我们应该认识更多色彩,为什么色盲还存在?外界信息变成视觉信息主要是靠视锥细胞,它比较密,是在中凹附近。眼动追踪的时候,也主要靠中凹移动来看东西。视感细胞对色彩并不敏感,但是对明暗敏感。色盲在夜间视力很好,比如说晚上要偷袭猎物,或者是偷袭敌人,有色盲的部落会派出这些人,这些人夜间视力更好,会给种群带来生存优势。所以色盲基因没有消失是有意义的。非洲有一种镰刀形红细胞贫血病也是一个案例,拥有这个基因的人不容易得疟疾。但是如果没有疟疾情况下,他容易贫血、容易患各种各样的病。

现实视角的逻辑续洽,第一个就是能预测新的设计趋势,第二是解释新的实验现象。

第一个是扁平化是趋势而不是潮流。这个用左上角的一个图一下就能解释清楚。鸡尾酒的杯子一定是透明的。我们做的界面很多时候就是那鸡尾酒的杯子,大家能理解扁平化是什么原因了吧?因为网速越来越快了,各种各样酷炫的东西越来越多,信息量越来越大,就相当于鸡尾酒里有颜色的酒,颜色越来越多。如果用一个不透明的杯子,或者透明度不够好的杯子,看不出里头的颜色。所以扁平化是一个趋势,不是潮流。

这是我前两天看到的一个帖, 2019年发的一个论文,叫图标样式对可用性的影响。大家可以自己去翻这个论文,很有意思。

测试结果是:最不易识别的是最右边这组。中间是识别度比较高的,这个解释特别简单:过度简化导致识别困难。意思是简化信息的时候,不是一减到底就是好。比如说前面的例子从牛到A的过程,你不能上来就给埃及人拿了一个A,他不认识。Instagram改版为什么受到热议?因为它突然之间扁平了,没有渐进过程,咣叽就变成一个特别扁平的图标,它的纹理和它的图形都发生了变化,所以识别上会特别不舒服。我举过一个例子,比如说你慈祥的老母亲整成了张柏芝或者是高圆圆,你一定不会认为这是一件好事,你会感觉很难接受。

第二个测试结果是这次识别度高的是右边的,中间的识别度是低的。测试结果是多数面型icon识别比线型icon更容易识别。这个是格式塔的描述方式,有阴影的图形只在内部成立,外部行成不了轮廓。线性图形则正好相反,是两向轮廓。

比如说我们看苹果图标,你不管它是从第一版还是到最后一版,他都是面性图标。

因为苹果是个球,它是个实体,这个轮廓在苹果内部成立,就类似于这种感觉。后边是有阴影的,有外部的,因为你要聚焦,后边东西会虚化掉。它只在内部成立。

面形图标普遍比线性图标识别要快,只有三个反例,只有三个反例需要解释。

第一个图,咱先不看虚拟的,你会发现这两个图标线性识别度高,原因是因为它表面有条纹,这两个图中圾桶和钥匙都有条纹,所以用线性来表达的时候,效果更好。其他图标的实体都是曲面,不是条纹。没有参差不齐的边缘,而是曲面,是单向轮廓形成的。因此线型图标更容易辨认。

感受野是人的视锥细胞和神经节细胞的一个联系,不管刺激中心区域、刺激整体、刺激边缘都会有反应。和感受野关联的是神经节细胞,人类眼睛有很多神经节细胞,但这些细胞不是完全均等的点,而是一组点围绕一个中心形成一个组合一样的结构,外边一圈组合,中间有几个组合。

下图的这个就类似视网膜上的结构,神经节也是类似这种结构。当环境同时变亮的时候,刺激比较弱。同时变黑的时候,刺激也比较弱。只有在交界点的时候,反应最强烈。想象一下,当我们看到一个物体的轮廓的时候,细胞对它的反应最大,就形成一条边。这个实际上就是卷积核,人工智能卷积核就是模拟感受野形成的一个原理。

内积就是矩阵内的数字一个一个互相乘,乘完之后形成一个结果。卷积核模拟感受野的原理是:数字矩阵就相当于一个卷积核从最左边一直扫到最后一排,会形成不同的数值。比如说这个是我们要看的图像,比如说黑的会计算成1,白的会计算成0。用卷积核扫一遍就相当于在模拟人眼睛看到的东西,黑白区域之间就会形成一条边,就是我们所看见的轮廓。

这就是我们眼睛看到东西的原理,比如说我们现在做视觉识别,也是用这种特别简单的技术。卷积核实际是模拟人的感受野。

关键点是神经学是怎么解释面形图标和线性图标的不同的。当你看到全亮的东西和全暗东西的时候是有差异的。卷积核扫一圈之后,计算机会认为这个里头的东西和外头东西是一样的。对它刺激是一样的。所以只对边缘有认识。但人的神经比较特殊,它自带一个数值,它能识别出暗和亮。所以当你看一个面形图标的时候,你对轮廓里面黑色部分的认知和对轮廓外白色认知是不一样的,这叫单侧型的轮廓,而不是双侧型的。当你看到线性图标的时候,类似于计算机的感觉,但是你看到面形图标的时候,是人的感觉。

   

文章来源:UXren

如何做儿童类APP?来看英语流利说的实战经验总结!

资深UI设计者

流利说®少儿英语是流利说®为 3-8 岁儿童定制的一款英语启蒙类产品,本次邀请到 UI 设计师 kelly,从视觉设计与输出的角度,详细地介绍该产品游戏题型的设计过程。

流利说®少儿英语,目标是帮助该年龄段的用户建立发音自信,并且能对英语学习产生持续的兴趣。基于儿童贪玩的天性,自然而然我们会想到使用游戏化的设计,将枯燥的英语学习过程变得更有趣。

△ 收集糖果

△ 警察抓小偷

△ 切水果

△ 消灭细菌

视觉设计

游戏为辅,教育为主。

对于视觉设计而言,游戏题型设计的主要有以下 2 个难点:

  • 把握题型趣味性与教学目标之间的平衡;
  • 为教学内容找到最适合的游戏展示形式。

接下来我将从视觉表达、视觉层级、反馈这三点分享我的一些思考和经验。

1. 明确的视觉表达

在开始设计前,我们对 3-8 岁儿童进行了调研,发现处于该年龄段的用户,大多有以下特性:

  • 不识字,且不能进行复杂逻辑操作;
  • 易被色彩鲜艳且有动效的对象吸引,并且会主动点击;
  • 仅能理解自己生活中接触过的事物(比如玩具,食物,游乐园等等);
  • 趣味性是调动他们持续学习的重要动力。

基于以上几点,我们便总结出以下几点设计方法。

视觉形式即题型玩法

以拼图题为例,此题的目标是检测孩子拼写单词的能力。如果仅将单词挖空再让用户选择,那么孩子会觉得这道题既不会玩,也不好玩。但如果在视觉表现上采用孩子比较熟悉的拼图,就可以方便孩子更好的理解题目的意思,进而引导孩子的操作。

场景故事要有视觉连贯性

「游戏」(此处的「游戏」代指游戏题型)结束后有一个和故事设定相关的结束画面,承接前面的操作,让整个「游戏」过程能呈现出相对比较完整的体验,以增强小朋友在「游戏」过程中的沉浸感。

△ 游戏操作:切水果

△ 游戏结尾:切水果榨果汁

2. 清晰的视觉层级

由于儿童缺乏成年人所具备的视觉筛选能力,他们往往很难分辨出界面中的重要元素和次要元素。尤其是 3-5 岁的孩子,他们会习惯性地去点击界面上所有吸引他们的东西。因此我们需要为不同层级的元素设置强烈的视觉区分,明确告诉他们哪些元素是可以点击的,需要被关注的,哪些元素是不可互动的。

提高教学内容易识别性

游戏题型的设计方法通常是使用游戏的形式去包装常规的教学题型,让小朋友感觉是在玩游戏,而不是在做题。因此我们需要设计恰到好处的游戏容器去承载教学内容,使其兼具教学内容的识别性又不会影响「游戏」体验。此处我们尝试去拉开游戏元素和教学内容的视觉差距──在画面中的视觉焦点处摆放教学内容,而游戏元素仅作为背景或者容器,用于衬托教学内容,并且尽量选取不易和教学内容发生冲突的形式。此外,为兼顾游戏画面的丰富性和多样性,容器的设计需要有一定的适配性。

△ 适配文字

△ 适配图片

△ 适配文字和图片

对于看文本读单词的题型,游戏容器则以烘托文字为主要目标。在该场景下,游戏容器的视觉设计重点在于外形的刻画,简化内部细节,以此将孩子的视觉重点聚焦在文本,而非容器本身。此外,为平衡字符段不同所带来的显示差异,我们对文字的大小也进行了适配。

△ 1-12 个字符──文字大小 88

△ 13-25 个字符──文字大小 76

△ 26-45 个字符──文字大小 62

背景画面的层级感

在游戏题型中,有不少故事性强,空间延续性高的设定。为加强画面的运动感和空间感,视觉输出时,我们额外增加了前景层,利用前景图片打造视差效果,以增强整个背景的层次感。

前景图片的设置,同时也能解决适配不同屏幕尺寸时,背景区域显示差异所带来的视觉问题。

纵向运动的情况下,两侧的图形如果设置在背景里,当适配到短屏幕的时候就无法呈现出来。

而单独设置成前景图,则可以灵活地适配不同屏幕比例的机型。

克制地使用过于明亮的色彩

用研时,我们发现孩子们容易被颜色醒目的东西所吸引,但如果一个页面上过度使用明亮的色彩,则会大大分散孩子们的注意力,颜色过载所导致的视觉信息复杂性会增加孩子们的使用难度。

3. 合理的反馈

合理的反馈包括符合交互逻辑的及时反馈和适当的正负反馈。在游戏设计中,设计师大多会通过酷炫的动效来做重要操作的点击反馈,以增加游戏爽感。这套法则,在儿童世界也同样适用。

及时反馈制造小惊喜

我们在产品的反馈设计中适时地增加一些有趣的微动画,给孩子们制造一些小彩蛋。这些小惊喜,不仅能及时地拉回小朋友的注意力,给他们带来趣味性的同时,对他们而言也是一种鼓励。

例如:当用户点击拼图题选项时,会出现 IP 相关的卡通元素,这些元素既能加强趣味性,又能加强用户对品牌的认知。

适当的正负反馈

大约从 4 岁开始,孩子们就会有输赢的概念,会因为赢而喜悦,因为输而感到焦虑。──《数字时代儿童设计》

对孩子的正向反馈宜欢呼、表扬性的动画为主,整个画面氛围可处理得热闹一点,这对孩子来说是一个很好的刺激点,能让孩子有继续玩下去的欲望。

△ 正向反馈1:IP 形象高兴地跳出

△ 正向反馈2:IP 形象高兴地跳出 + 打分星星

△ 正向反馈3:IP 形象鼓掌

考虑到孩子们会因为输而感到焦虑,因而在处理负面反馈的时候,需要考虑他们此刻的心态,动效设计应拉开与正向反馈的差别且不能过于消极,消极的反馈容易打击孩子的积极性,产生挫败感,鼓励性的反馈为宜。

△ 负面反馈:IP 形象配合鼓励性语音做加油的姿势

反馈动画的设置也需要考虑用户的可接受程度,慎用具有攻击性动效。如下图,错误反馈时 IP 形象会受到攻击而感冒,上线后发现孩子们对这种反馈表现出了害怕的心理。

以上 IP 动画由流利说®少儿英语设计团队倾情制作。

视觉输出

不会写代码的设计也是好开发。

视觉稿如果不能被很好的实现落地,那再好的设计稿也只能是概念,而不是一份有效的方案。在如何更好的把控视觉实现程度这一问题上,我们也走过不少弯路,和开发经过几轮的探索,最终形成了一份适合我们团队的输出模式。

在整个开发环节,设计师主要承担一部分的动画开发工作。在和开发对接的过程中,我们主要使用的软件是:

  • CocosCreator:游戏开发软件,内含动画编辑器。
  • SourceTree:向开发提交动画代码。

△ CocosCreator

△ SourceTree

开发搭建完框架后,设计在 CocosCreator上,完成部分元素的动画,再用 SourceTree 向开发提交动画代码。开发最后通过代码将每个动画串联起来形成一个完整的动画。

△ CocosCreator 动画编辑器界面截图

题型动画连贯且细节多,单靠视频 demo 是无法协助开发精准实现设计效果的。为了解决这个问题,我们建立了对设计落地具有指导性意义的文档──适配标注文档和动画标注文档。

1. 适配标注文档

用户机型调查结果显示,使用 0.462、16:9、4:3 这三类屏幕比例的用户占比最大。为保证不同屏幕比例上的展示效果,我们根据上述三种主流尺寸,分别输出大小为 780×360,640×360,480×360 的设计稿,并规定以 780×360 为设计基准,对另外两个尺寸进行适配。

标注内容为三个主屏幕尺寸下的缩放比例、大小位置、特定动画的起始点或终止点位置等细节调整标注,方便开发在做适配的时候能准确还原设计稿的布局。

2. 动画标注文档

该文档主要是对动画和音效的详细说明。每个题型的动画会被拆分,以最小可拆分动画为一个标注对象,对其标注时长、具体的动画效果以及运动曲线数值等,方便开发地还原 demo 的设计效果。详细的标注文档不仅方便了开发,更为后续测试和视觉走查降低了不少沟通成本。

总结

游戏化题型的设计,需要更多的从用户的角度出发去思考和权衡游戏与教学的平衡性。对于儿童产品而言,设计服务于教育,愉悦和多变的体验是设计的方向,教学才是最根本的设计目标。

文章来源:优设

底部导航设计的黄金法则

资深UI设计者

导航模式是提高可用性的捷径。当你查看近年来最成功的交互导航设计时,显而易见的赢家是那些完美执行基本原则的人。虽然跳出条条框框思考是一个非常好思维方式,但有些规则是你不能打破的。以下是创建出色的移动导航的四个重要原则:


简单

首先,最重要的是,导航系统必须简单。良好的导航应该感觉像一只无形的手,引导用户。一种方法是根据移动用户最有可能执行的任务来确定移动应用程序的内容和导航的优先级。


可见

正如雅各布·尼尔森( Jakob Nielsen)所说,识别物体比记忆更容易。这意味着你应该通过使操作和选项可见来最小化用户的记忆负担。导航应该始终可用,而不仅仅是在我们预期用户需要导航的时候。


明确

导航功能必须是不言而喻的。你需要以简洁明了的方式传递信息。在没有任何外部指导的情况下用户应该一目了然的知道如何从A点转到B点。试想一下购物车图标,它作为一个标签或查看项目的标识符。用户无需考虑如何导航才能进行购买;此元素将指导他们执行适当的操作。


一致性

所有视图的导航系统应相同。不要将导航控件放在不同页面上的新位置。不要欺骗你的用户,要始终保持言行一致。你的导航应该使用“最不意外的原则”。导航应该激励用户参与并与你所提供的内容互动。


大拇指设计法则

史蒂文·霍伯在对移动设备使用情况的研究中发现,49%的人依靠一个拇指在手机上完成任务。在下面的图中,手机屏幕上的图表是近似可达图,其中颜色表示用户可以触及的屏幕区域,并与拇指交互。绿色表示用户可以轻松到达的区域;黄色表示需要伸展的区域;红色表示需要用户改变握住设备的方式的区域。



在设计时,要考虑到你的应用程序将在多种环境中使用;即使是喜欢使用双手握手机的人也不一定总是使用多个手指,更不用说双手与你的用户界面交互了。将最高层级且常用的操作放在屏幕底部非常重要。这样,通过单手和拇指的交互即可轻松达到目标。


另一个重点是底部导航应该用于具有相同重要性的最高层级目标。是需要从应用程序中的任何位置都可以直接访问的。


最后,也是很重要的一点,要注意点击目标区域的大小。Microsoft 建议 你将触摸目标区域大小设置为9平方毫米或更大(135 ppi显示器上的48×48像素,缩放比例为1.0倍)。避免使用小于7平方毫米的触摸目标区域。



触摸目标区域不应小于44像素到48像素(或11毫米到13毫米),包括填充。



标签栏

许多应用程序使用标签栏来显示应用程序最重要的功能。facebook只需轻触一下就可以提供核心功能的主要部分,允许在功能之间快速切换。



底部导航设计的三个关键因素

导航通常是将用户带到他们想要去的地方的工具。对于具有相似重要性的指定目的地,这些目的地需要从应用程序中的任何位置直接访问。好的底部导航设计应该遵循以下三个原则。


1.仅显示最重要的目的地

避免在底部导航中使用五个以上的访问标签,因为TAP目标之间的距离太近。在标签栏中放太多标签会使人们很难点击他们想要的标签。而且,随着每个额外的选项卡显示,就会增加了应用程序的复杂性。


避免使用五个以上的目的地。



避免滚动内容

对于小屏幕来说,部分隐藏的导航似乎是一个非常好的解决方案,因为你不必担心有限的屏幕空间,只需将导航选项放入一个可滚动的选项卡即可。但是,可滚动的内容效率较低,因为用户必须先滚动才能看到所需的选项,因此最好尽可能避免。


该避免在选项卡栏中放置太多项目,以防止用户滚动,然后才能单击所需的选项。



2.明确当前位置

应用程序菜单上最常见的一个错误是没有明确用户的当前位置。“我在哪里?“是用户遇到的基本问题之一。用户应该第一眼就知道如何从A点转到B点,而不需要任何外部引导。你应该适当的使用视觉提示(图标、标签和颜色),这样导航就不需要任何解释。


图标

底部导航应该与图标的内容进行适当的结合。尽管有一些用户熟悉的通用图标,但大多数图标代表的功能包括搜索,电子邮件,打印等。


在适用于Android的先前版本的Bloom.fm应用程序中,很难理解用户的当前位置。


颜色

避免在底部选项卡栏中使用不同颜色的图标和文本标签。相反,遵循这个简单的规则,用应用程序的主颜色为当前的底部导航(包括图标和任何显示的文本标签)着色。


左:不同颜色的图标使你的应用看起来像一棵圣诞树。右:只使用一种原色。



这是iOS的Twitter应用程序中的底部栏菜单。消息视图处于选中状态。


如果底部导航栏是彩色的,请确保对当前位置的图标和文本标签使用黑色或白色。


左:避免将彩色图标与彩色底部导航栏配对。右:使用黑色或白色图标。


文本标签

文本标签应为导航图标提供简短且有意义的定义。避免使用长文本标签,因为它们不会截断或自动换行。


避免换行,截断和缩小文本标签。


菜单元素应易于理解。用户应该能够理解点击元素时会发生什么。


目标尺寸

使目标区域足够大,以使其易于点击或单击。要计算每个底部导航动作的宽度,请将视图的宽度除以动作数量。或者,将所有底部导航动作设置为最大动作的宽度。Android建议移动设备底部导航栏的尺寸如下。


显示了移动设备上的固定底部导航栏,单位为密度独立像素(dp)


标签上的微标

你可以在标签栏图标上显示微标,以表明存在与该视图或模式相关的新信息。


考虑对标签栏图标加微标以保持通俗易懂。


3.使导航不言而喻

良好的导航感觉就像是一只看不见的手,可以引导用户前进。毕竟,如果人们找不到它,即使是最酷的功能或最引人注目的内容也没有用。


行为

每个底部导航图标必须指向目标目的地,并且不应打开菜单或其他弹出窗口。点击底部的导航图标可以引导用户直接进入相关的视图,或者刷新当前活动的视图。不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件。如果需要提供控件,请改用工具栏。


每个底部导航图标必须通向目标目的地。


上面的控件是工具栏而不是底部导航。


保持一致性

尽可能在各个页面上显示相同的选项卡。最好是你能给用户一种视觉稳定性的感觉。

当选项卡的功能不可用时,不要删除它。如果在某些情况下删除了某个选项卡,但在其他情况下没有,替换使应用程序的UI无法预测。最好的解决方案是确保所有选项卡都已启用,但要说明为什么选项卡的内容不可用。例如,如果用户没有本地文件,则Dropbox应用中的“本地”选项卡将显示一个页面,说明如何获取文件。


Dropbox应用的空状态页面


滚动时隐藏标签栏

如果屏幕是滚动的,则当人们滚动查找新内容时,标签栏可以隐藏,而当他们开始回到顶部时,标签栏可以显示。


标签导航可以在滚动时动态消失。



视觉愉悦

避免使用横向运动在视图之间转换。活动视图和非活动视图之间的过渡应使用淡入淡出动画。


图形图标:创意导航

屏幕尺寸是将你的观点传达给用户的主要挑战。使用图形图标作为菜单元素是解决移动端屏幕空间有限问题的最有效的方法之一。图标的图形说明了点击它后将会进入什么页面,这种导航模式更加节省屏幕空间。


Google Material Design,浮动操作按钮


Google Material Design 对这种类型的导航使用术语“浮动擦操作按钮”。它们的区别在于浮动在UI上方的带有圆圈的图标,并具有运动行为。

像Evernote这样的应用程序通过对最重要的用户操作使用浮动操作按钮简化了操作流程。



Tumblr具有漂亮的图形图标以及适当的标签。当你在应用程序中滑动屏幕时,这些图标也很方便地消失。



然而,这种模式有一个明显的缺点-浮动操作按钮隐藏内容。从用户体验的角度来看,不便于用户频繁点击操作

而且,许多研究人员表明,图标难以记忆,而且效率极低。只有普遍理解的图标才能被很好的记忆(例如,打印,关闭,播放/暂停,回复等)。这就是为什么使图标清晰直观*,并在图标旁边引入文本标签的*重要原因。


结论

导航通常是将用户带到他们想要去的地方的一种媒介。在使用应用程序时,要始终考虑用户角色以及他们的目标。然后,定制导航以帮助他们实现这些目标。为用户设计。一个产品对他们来说越容易使用,他们使用它的可能性就越大。

wen'z


页面转场:容易被设计师忽略的那些事

资深UI设计者

不知各位产品经理、UE/UI设计师在设计产品时,除了考虑交互说明、功能状态、页面逻辑等之外,是否会关注 页面跳转间的“转场效果”???


可能有人会觉得:“不就普通的界面左移和右移,需要讲这个吗?”  但是如果我问:“为什么要有页面转场?有哪些转场类型?要注意哪些细节?” 你能一五一十地回答出来么?



毕竟页面间的转场过渡,是用户体验我们产品最直接的感知形式,也是人机交互中最重要的传达要素。另外市面上还没有系统性介绍'页面转场'的文章,所以今天就写下这方面的干货,希望能给你带来一些收获。



Part1:页面转场的作用


页面转场最基础的作用,无疑是拉通页面与页面间的使用流程,使产品的信息内容、功能交互等有一个承接点。但除了这个打底作用外,页面转场还可以体现出多个方面的作用:


加深用户印象


一些新奇独特、区别于竞品的转场效果,完全可以加深用户对自己产品的印象,留下特定的产品记忆点。如《红板报》的‘折页’效果就很让人记忆尤新,进一步提升了产品的竞争力。



更有仪式感、增加代入感


就如《每日故宫》在查看文物时,会缓慢放大封面、退出局部元素。营造一种‘神秘感、即将探索’的氛围,很符合该产品独有的特色。另外一些日志产品,会利用“翻书”的转场效果来加强用户的代入感、趣味性。



突出重点用户


产品里的重点用户(如vip用户、平台作家)都是需要特别照顾的对象。界面设计时除了在背景色、视觉元素不同于普通用户外,特殊的页面转场也能给带来一种‘专门定制’的感知。


像《人人都是产品经理》APP,在打开普通页面和专栏作家的文章时,前者是普通的‘左移’,后者则‘上下开启’,给读者一种‘开启知识宝库’的进场感受。




Part2:页面转场类型


说完页面转场的作用后,下面就是你可能感兴趣的内容:页面转场到底有哪些类型?(以移动端页面转场为例,PC端亦可复用该类型)


翻书/页、折叠


翻书/页:指模仿现实生活中书本和纸张的切换效果,是一种拟物化的转场方式。常用于杂志、小说、日记等产品中。



折叠:根据水平或者垂直线为中心点,将页面的另一部分进行翻折。适合各种带有“日历”功能的转场。



3D翻转、立体旋转


3D翻转:将二维的页面以3D形式(类似魔方)进行切换。适合体现产品功能的“空间感”。



立体旋转:根据水平或者垂直线为中心点,将整个页面进行立体旋转。适合体现另一个“页面空间”的效果,用于容纳更多的信息内容。


拉伸、上下合并


拉伸:根据水平或者垂直线为中心点,将页面进行拉长消失处理,可分为’内拉‘与’外拉‘两种方式。


上下合并:将即将进场的页面分为上下两部分进场,使页面更有层次感。适合给用户营造一种“打开新世界/新天地”的交互认知。


扭曲、页面融合


扭曲:根据水平或者垂直线为中心点,将整个页面进行旋转、压缩等处理,适合给用户传达一种’异次元、空间传送‘的效果。



页面融合:根据页面的某个视觉元素,通过变形、变色、缩放、位移等方式过渡到另外一个页面中去。这种转场是最能体现两个页面之间的‘关联性’,也是过渡效果最和谐的方式之一。



弹出、缩放


弹出:根据页面的某个视觉元素,将其弹入到下一个页面中去。适合突出某视觉元素,将其重点弹出展示。



缩放:将整个页面自大而小或者自小而大进行缩放过渡,很适合大封面的转场。


移入、淡化


这是我们最常见、最普通的转场方式了,大部分的产品使用这两种转场方式。移入有’上下左右‘4个进入方向,而一直使用’左移进入、右移退出‘的转场,最能体现产品功能的使用流程。




Part3:转场时应该考虑的细节


各种效果只是提供一种选择而已,根据自己的产品特性、想要传达的交互理念等选择合适的方式即可。而在一些转场过程中的细节点,是交互设计师不能忽略的事项。


页面间的关联性


页面之间都是通过’入口信息‘和’页面标题‘建立关联的,为了增加用户转场后的代入感、避免产生认知错误(觉得进错页面),可以考虑用相同的背景色、视觉元素等加强页面间的关联。


比如之前QQ游戏中心,将前页的背景图沿用到后页中,让后页的游戏描述更有代入感,用户第一时间就觉得'来对地方了~'



进退方向


页面的进入和退出尽量是成反方向的,即页面从右加载边移入,退出时则从左边移出。否则混乱无序地进退方向,会使用户的操作流和视觉流感到不适。




返回逻辑的不同


用户习以为常的页面返回习惯,一是点击左上角‘返回/关闭’图标、二是屏幕扣边(叫法不同,即按住屏幕最左边位置向右滑到,iOS与Android均可实现该方式)。因“返回/关闭”图标在视觉上带有明确的指向性,用户知道点击后到底是“返回”还是“关闭”。


但不同页面类型的屏幕抠边,对应的含义和逻辑却是各不相同的:


原生页面:屏幕抠边是返回上一级页面

就如朋友朋友圈一样,原生页面在屏幕抠边后是可以回到退出前的页面位置、状态,亦可以重新加载页面。


H5页面:屏幕抠边是关闭整个链接

无论在H5里操作了多少内容/页面,屏幕抠边都会关闭整个H5链接,再次进入时只能重新加载页面,操作记录都会被清空。



更的返回方式


除了点击“返回/关闭”图标、屏幕抠边外,可以根据自己产品的页面形态,考虑是否有更的退出形式。比如《下厨房》的食物详情页里,采取“下滑“的形式返回上级页面。



原因在于:该详情页是以大图+文字的结构描述食物,而大图的展示区域很接近于手指的“黄金操作区”。相对于将手指移动到屏幕左上角点击返回、或者移到最左边抠边返回,“下滑”可以在最短距离内、最快速地让用户返回首页浏览其他内容。



是否保存/清除用户操作


页面间的跳转和退出,势必会对当前页面内容和状态产生影响。当用户想要离开时,不同的产品都会选择不同的退出策略。举个特别典型的例子:微信朋友圈。


当退出朋友圈再重新进入时,是会停留在退出前的页面位置,方便继续浏览好友内容。


而退出朋友圈后,入口处提示有好友新动态时,再次进入朋友圈则回到顶部初始位置,以保证可以第一时间获取好友动态,满足用户日常的社交需求。



每日故宫在这一方面的处理也很用心:无论用户在详情页里进行了什么操作(屏幕伸缩或滑动位置),退出页面时都会清除用户的操作痕迹,还原到文物的初始状态,给人带来一种“保护文物、细心严谨”的心理感受。



- 结尾 -


好了,关于’页面转场‘的话题就先写到这,各位根据自己的产品特性、想要传达的交互理念等选择合适的方式即可。下面是总结笔记:


文章来源:UI中国

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档