首页

UX TRENDS | 注重隐私的用户体验设计

ui设计分享达人

用户隐私安全在产品设计中是很重要的一个环节,本文从用户体验角度切入,从匿名模式、减少永久性和减少公开性三个方面展开分析。



我们先看⼀组来⾃⽪优的2019年6⽉的调研数据:70%的美国⼈认为,与5年前相⽐个⼈信息变得更不安全。尤其是⾼学历⾼收⼊群体。由此可⻅⽤户对个⼈信息数据的隐私担忧⽐以往更甚。



⽤户隐私安全很重要,涉及的范围和⻆度也很多。本次的分析从⽤户体验⻆度切⼊,涉及如下三个⽅⾯:

  1. Incognito Mode匿名模式;

  2. Reducing Permanence减少永久性;

  3. Reducing Publicity减少公开性。



01 匿名模式


下图是Google系App(Google AppChromeYouTubeandGoogle Map)匿名模式切换,从交互体验上来说有如下⼏个特点:

  1. 统⼀在右上⻆;

  2. 可以便捷切换⾄匿名模式,反过来也很容易切回登陆状态;

  3. 匿名模式的状态提示,例如YouTube 在匿名模式下在界⾯底部有⼩字提示“您 当前处于匿名模式”。


匿名模式不是最近才流⾏的功能,最早提供隐匿模式的是苹果safari浏览器,早在 2005年就⽀持了匿名模式。Chrome浏览器在2008年就开始⽀持此模式。虽然由来已久,为什么到了2020年,匿名模式依然是国外互联⽹⼀⼤趋势呢?


我们看⼀组数据:

这是来⾃DuckDuckGo 2019年9⽉的调研(DuckDuckGo是美国的⼀款不记录⽤户⾏为保护⽤户隐私的搜索引擎)。样本来⾃美国、英国、德国和澳⼤利亚的成年⼈⽤户,共计3,411⼈的调研得出。各国⽤户对使⽤搜索引擎的个⼈隐私安全⾮常在意(是否搜集个⼈的数据和记录搜索⾏为)。

2020年5⽉DuckDuckGo⽇均搜索次数为6200万。对⽐看2019年11⽉底⽇均搜索次数4900万,2018年10⽉是2900万。

最近⼏年的持续活跃度⾼幅增⻓证明了不记录个⼈隐私的搜素引擎越来越受到⽤户的⻘睐。

国内,头条、UC浏览器在搜索框输⼊状态也提供了“⽆痕浏览”⼊⼝。

不仅是搜索引擎领域,保护⽤户隐私也成为Facebook最重要的战略⽅向之⼀。Facebook CEO Mark Zuckerberg在2019年 F8开发者⼤会上喊出“THE FUTURE IS PRIVATE”。2019年3⽉Mark Zuckerberg发⽂,主题就是《聚焦于保护隐私的社交⽹络》。



02 减少永久性


我们先看国外社交媒体Stories(⼩故事)产品形态的流⾏。

⼈们总是对于所分享的内容永远记录在⽹上感到担忧。Stories24⼩时消失缓解了⼈们的隐私顾虑,这让⽤户更安⼼地⾃然分享。

Stories由Snapchat⾸创,由 Facebook发扬光⼤。早在2019年4⽉,Facebook+Messenger Stories, Instagram Stories⽇活⽤户数就突破5亿。 2020年2-3⽉LinkedIn,Twitter也先后宣布将上线类似功能。



03 减少公开性


来⾃⽪优的调研报告:41%的美国⼈经历过⽹络骚扰,最常⻅的就是在社交媒体上。23%的⽤户最近经历的⽹络骚扰来⾃评论区的评论内容。27%的⽤户经历⽹络骚扰后决定不再发布任何内容。

我们以限定评论互动的公开性为例:

2020年5⽉Twitter上线了新的评论功能,可以限定谁可以回复帖⼦的功能,提供了三种选项:谁都可以评论,只有被关注者可以评论,只有被提及者可以评论三种公开度的限定。

Instagram也在测试“评论限制”新功能,批量屏蔽/限制评论。⽬前已经上线的⼀个例⼦:⽤户(评论发布者)如果发布的评论含有攻击性敏感词,发布前伴有提示,提醒评论含有攻击性敏感词是否真的要发布。


注重隐私提供仅好友可⻅/仅⾃⼰可⻅/仅作者可⻅/等多重维度的隐私设定有助于⽤户更安⼼地参与互动。

另外⼀个例⼦是付费频道会员:付费频道会员-限定频道的公开性让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊,也能得到来⾃会员、会费的收⼊,形成“忠实粉丝”社区,有助于内容⽣态的社区化建设。

我们主要看YouTube的频道会员案例:

YouTube有两种会员模式。⼀种是YouTube整个平台的付费会员,去⼴告,看原创美剧影视,消费⾳乐,可下载内容的模式。第⼆种模式是Youtuber个⼈频道付费会员,吸引忠实粉丝加⼊。我想说的就是第⼆种。


为什么⼤V⽹红有意愿开通频道会员?


除了获得忠实粉丝收⼊变现的商业价值以及付费频道会员可以为忠实粉丝提供各种专属功能,背后也和⽹红⼤V对个⼈隐私顾虑有关。

⽹红⼤V在完全公开的社交⽹络上需要始终保持⾜够克制谨慎,避免引起争议。但在忠实粉丝付费频道专属会员群中,⽹红⼤V会减轻隐私顾虑,更加回归⾃我。

⽐如在频道会员中发布更多与个⼈⽣活相关的内容,表达更多不便在完全公开的社交⽹络中的想法和感受等,因为忠实粉丝通常更具包容度,更不容易引起争议。


YouTube频道会员费⽤可以从三种会费(按⽉)区间选择,⽀持多选:

  1. 低阶 Low Levels $0.99~3.99;

  2. 中阶 Medium Levels $4.99~14.99;

  3. ⾼阶 High Levels $19.99~49.99;

频道会员功能在2018年开始测试,⾯向粉丝数过10万的YouTuber开放。



以上综述,我们可以说:


1.匿名模式:

虽然匿名模式由来已久,但仍然是当前的⼀⼤基本⽤户体验设计趋势,尤其是匿名模式的切换便捷性⾮常重要。


2.减少永久性:

Stories⼩故事24⼩时消失缓解了⼈们的隐私顾虑,这让⽤户更安⼼地⾃然分享,已经成为国外社交媒体平台的必备功能,Facebook, Instagram平台的最主要、最具影响⼒的功能之⼀。


3.减少公开性:

⽤户总是对在社交媒体平台发表评论有所顾忌,限定评论的公开性能够有助于促进⽤户发帖表达,其他⽤户也可以更安⼼地参与互动。


付费频道会员可以限定频道的公开性,让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊,也能得到来⾃会员会费的收⼊,形成“忠实粉丝”社区,有助于内容⽣态的社区化建设。


从UE⻆度,我们可以为频道会员提供专属身份设计例如专属徽章,专属表情等。

THE FUTURE IS PRIVATE, 注重⽤户隐私的体验设计越来越重要!

文章来源:站酷    作者:百度MEUX

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



汽车交互手势,这样设计才有趣

资深UI设计者

随着车内屏幕越来越多,越来越大,驾驶者在开车过程中因操作屏幕而分心机率逐渐升高。众多汽车制造商均希望探索出一种降低或避免「驾驶员分心」的安全性技术。

手势,是指人手、手和手臂结合产生的动作,作为解决「驾驶者分神」这个痛点的解决方案之一,正在全世界的汽车制造商中掀起「热浪」。

你只需要随意的挥一挥手,就能挂断电话;将手指向顺时针或者逆时针方向移动,就能调整音量大小。

互联网基因:屏内手势交互

汽车手势的出现,源于对车内屏幕的操作。而这些操作均来自于移动端的设计标准,比如苹果IOS设计规范中的标准手势或者谷歌Mertiral Design中的标准手势。

汽车交互手势,这样设计才有趣

△ 移动端常见交互手势

常见的手势如上图,分别为

  • 点击:激活控件或选择一个项目
  • 滑动:上下滑动,或者左右滑动来连续移动需要查看的内容
  • 按住并拖动:在屏幕上左右或者上下移动某个元素
  • 双击:放大或缩小内容或图像,并使之居中
  • 捏:外捏时放大,内捏时缩小
  • 长按:进入文本或内容编辑状态

为了满足手机屏幕外观改变,屏内显示内容越来越多元化的需求,设计师们也在探索屏内手势的新玩法。

汽车交互手势,这样设计才有趣

△ android底部导航栏按键从左至右分别为:返回上一级、返回主页、多任务

2017年iPhoneX的发布,正式开启了全面屏时代。为了替代Home键及android底部导航栏,各大手机厂商相继开始拥抱「全面屏手势交互」。

在车机系统中,部分汽车制造商也在积极迎接变化,比如理想one采用「三指下滑」的手势交互替代「返回主页」的图标按键。

汽车交互手势,这样设计才有趣

△ 「 三指下滑」表示返回主页

2019年的Google I/O大会上,新版本Android Q选择与IOS采用一样的手势操作逻辑,即在屏幕下方提供一个指示条,用户在左侧页面边缘右滑代表「返回上一级」、提示条区域上滑代表「返回主页」、提示条区域上滑并悬停代表「多任务」。

汽车交互手势,这样设计才有趣

△ android系统中的三种全面屏手势

随着全面屏手势在手机端的操作交互上达成一致,相信在不久的将来,也将越来越频繁的在车机端看到全面屏手势的「身影」。

车机新玩法:多屏联动交互

当汽车与数字屏幕相遇,如何让屏幕与内饰结合的更加完美,又能突显品牌特性,似乎给内饰设计师带来了许多挑战与机遇,「一字屏」、「T字屏」、「7字屏」、「旋转屏」应运而生。

汽车交互手势,这样设计才有趣

△ 拜腾M-Byte 一字屏

汽车交互手势,这样设计才有趣

△ 理想one的T字屏

汽车交互手势,这样设计才有趣

△ 合创007的7字屏

汽车交互手势,这样设计才有趣

△ 比亚迪王朝系列的旋转屏

与此同时,因为成本及技术的限制,汽车制造商的量产车型不得不在屏幕上做出妥协。理想one的妥协方案是利用3块屏幕组合,在视觉上形成「大长屏」的既视感。

汽车交互手势,这样设计才有趣

要让3块屏幕「变」成一块屏幕,仅仅在视觉上做足功夫显然还不够,多屏联动手势交互也不能「缺席」。

事实上,多屏联动手势交互依旧来源于IOS及android系统中的标准手势,它将不同的手势进行组合,并与页面联动显示,形成了多屏联动手势。

理想one在停车模式下,用户长按并向左滑动,即可将副驾娱乐屏上的信息「甩动」至中控屏。

汽车交互手势,这样设计才有趣

天际ME7不仅有3块屏幕组合而成的前排「一字屏」,还有2块后排乘客娱乐屏,5屏联动的手势交互,天际采用「手势+屏幕显示」来解决。

汽车交互手势,这样设计才有趣

在中控屏、副驾娱乐屏和后排娱乐屏上采用五指抓取手势进入多屏互动页面,比如想把中控屏上的内容分享给副驾娱乐屏,第一步是单击选中副驾娱乐屏,第二步按住并拖动中控屏至副驾娱乐屏位置,第三步在副驾娱乐屏中点击确认。

视频版交互演示:https://v.qq.com/x/page/w08791lhqus.html

未来已来:隔空手势交互

通过隔空手势接听或者挂断电话,这似乎是科幻电影中才有的情节。但正如开篇所说,车内屏幕数量增多,尺寸加大的同时「驾驶者分心」的机率也增加了,盲操手势与隔空手势的出现,是解决这个痛点的一种尝试。

目前量产的汽车中,盲操手势主要是通过标准手势与声音反馈的组合来实现。

比如在理想one中,用户在空调屏上左右滑动可以调节风量,上下滑动调节温度,且系统通过声音反馈告知用户操作成功与否。

与盲操手势相比,隔空手势似乎科技感十足,备受汽车制造商的青睐,我们不仅可以在各种概念车上窥见它的踪影,在君马SEEK上,也可以实际操作一番。

君马SEEK提供8种隔空手势。

汽车交互手势,这样设计才有趣

△ 左图:接听电话 右图:挂断电话

汽车交互手势,这样设计才有趣

△ 左图:上一曲 右图:下一曲

汽车交互手势,这样设计才有趣

△ 左图:音量升高 右图:音量降低

汽车交互手势,这样设计才有趣

△ 左图:音乐播放/暂停 右图:玫瑰花

与君马SEEK相同,宝马提供「向左」手势代表上一曲、「向右」手势代表下一曲,「yeah」手势代表播放或暂停。

但在许多其他操作上,宝马与君马的手势操作则各有特色。

君马SEEK使用手掌的正面与反面来区分不同的操作,正面表示接听电话·/音量增加,反面表示拒听/音量降低。

宝马则选择向屏幕方向点击代表接听电话,手掌向右挥动代表拒听电话,手指顺时针画圈代表音量增加,手指逆时针画圈代表音量降低。

在倒车影像中,手指向右挥动代表调整视角。

汽车交互手势,这样设计才有趣

△ 图片来源于「汽车界的扛把子」的短视频《宝马手势控制详细演示》

在手势交互上,拜腾也交出了自己的「成绩单」。

拜腾的手势识别共五种,手掌向下激活手势识别,手掌向上启动主页面,手指移动代表移动光标,ok手势代表确定,五指捏合可拖拽内容。

汽车交互手势,这样设计才有趣

△ 图片来源于太平洋汽车网《拜腾Concept手势感应系统操作演示》

这些高大上的技术看起来令人兴奋,但在实际使用的过程中,依旧存在识别范围有限、识别精度不灵敏、识别后的响应速度慢等等问题,而各个厂家的手势识别没有形成统一的标准,且没有大规模在在用户中进行推广,必然会增加用户的学习成本。

手势识别对用户来说是「真香」还是「鸡肋」,相信时间会给出答案。

参考文献:

写在最后

汽车内手势的交互设计,是一个有趣又好玩的课题,但如何让这个课题在好玩但同时易用、好用,恐怕只有设计师不断思考,并不断采用一些用户测试的方法进行验证才能获得答案。

文章来源:优设    作者:点滴DESIGN

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

2020-2021 设计趋势报告:用户体验篇

资深UI设计者

前言

身为用户体验设计师,无时无刻不被世界上的新事物冲刷着认知——互联网红利下降带来变化莫测的商业动向、循着摩尔定律野蛮生长日新月异的新技术、各类亚文化群体催生出多元复杂的圈层文化、脑洞口味越来越独特的年轻人,甚至眼下席卷全球的黑天鹅事件……

任何一个新事物的悄悄冒头,都有可能在未知的将来影响着用户体验设计师。我们能做的是,在起初感受到微微震幅时,便沿着震感逐步寻找源头,并思考未来的发展走向。赶在变化降临前先拥抱变化。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

本文通过研究近一两年科技、社会文化以及自身用户体验领域的变化,从用户体验领域关键的用户、媒介(设备与应用)、交互行为、信息与场景的五个角度出发,探索用户体验设计未来的趋势,希望能带来启发。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

更智能的服务提供方式

随着人工时代到来,过去机械的单向交互方式逐渐被打破,机器渐渐演化成了会主动「观察」真实场景,「感受」用户情感,预判用户意图并自动完成任务的贴心小棉袄。机器如何为人们提供更智能便捷的服务,未来还有非常大的想象空间。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

1. 基于真实场景推理用户意图

随着AI技术的发展,智能设备可以越来越无缝地将数字世界和物理世界嫁接起来,主动感知用户所处情境并智能提供相应服务。

在2019的 Google I/O 大会上,Google Lens 展示的AR点菜功能可以智能识别用户扫描的菜单并将美食网站上的相关推荐直接呈现在屏幕上。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

当用 Google Lens 识别到小票信息时,可快速提取小票上的金额,且可自动弹起计算器快速帮助用户计算人均消费,节省人工计算的时间成本。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

随着信息入口从数字空间延伸到周围的物理空间中,未来万物皆可为用户体验的媒介,设计师未来在设计的时候需要注意:

寻找适合的打通真实世界的切入点:在陌生语言、信息复杂或者难以处理等苛刻的环境下,充分发挥智能设备对信息智能读取、批量识别与翻译等强大能力,帮助用户完成任务;

将用户旅程的上下游串联:根据生活常识和经验预判用户行为目的,前置推荐服务;

更加系统细心地考量干扰因素:真实场景是动态变化的,需要更全方位考虑光线的强弱、多源的噪音、实体的可视性、人员和事件的打断等因素。

2. 任务自动化,简化用户旅程

为了完成一项任务,用户往往需要借助多个应用来回切换配合,使用起来琐碎麻烦。如今应用越做越强大也越复杂,过去仅仅解决单一场景的解决方案不再适应于用户对于完成任务的诉求。

Google Assistant 的新能力 Duplex on the web 可以通过自动跨应用任务处理来简化用户旅程。只需要用户发出语音指令「预定一辆去某地的车」,助手便可自动跨邮件、日历、付款等应用调取信息、自动根据使用习惯做选择,并自动填写信息,而用户全程需要的只是在关键节点轻敲「确认」即可。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

2019年随着 iOS 13 的更新,「快捷指令」推出了「自动化」能力,用户通过「if…then…」语法便可为自己的App设计一套程序,实现如:「当我回到公司时提醒我打卡」、「每天早上10点给我的女朋友发送一条表白短信」等能力,将不相关的场景动作串联字一起自动化执行,大大节省人工操作成本。

提升使用效率是用户体验设计孜孜不倦努力的方向之一。在利用新技术进一步简化用户旅程时,设计师可以充分利用以下因素:

借助语音输入:比起界面触控操作,语音交互的直达性可以「穿透」复杂界面,让设备第一时间明确用户目标;

基于用户行为形成习惯记忆:对用户长期重复的行为做分析处理,构建用户习惯模型并主动提供服务;

适当考虑专家级用户:随着部分用户的智能设备使用水平越来越高,可以考虑为专家用户提供自定义操作脚本,满足其自身的独特需求。

3. 基于情感感知,主动理解用户需求

随着人脸识别、表情识别、肢体跟踪等技术的提升,机器逐渐学会感性语言,主动感知用户内在情感和心理需求。

2019年1月的CES展上起亚亮相的互动式「情感驾驶空间」技术,可通过传感器读取用户的面部表情、心率等反应,调整驾驶空间内的灯光、影片类型、音乐风格等,舒缓舱内乘客心情,由此提供更人性化的出行体验。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

用户总是会期待更贴心的服务,设计师未来对同理心的情感嗅觉更加敏锐:

利用感性线索定位用户情绪:需要通过面部表情、特殊时间节点或者识别到的关键词,对用户情绪进行理解和定位,判断用户情感理解用户内心诉求是自由探索、趣味娱乐、或者静谧修行并提供符合用户当下心境的服务。

综合使用感性元素进行设计:通过使用线条、色彩、声音和动作等传达并唤起相对应的情感,提供更加人性化的体验。

4. 小结

更智能的服务提供方式会让人们生活拥有更多可能性,但一旦火候把握不得当,可能就会造成对人们生活的野蛮入侵。关于如何让科技更好造福于人们,早在上个世纪,施乐帕克研究中心提出了宁静技术(Calm Technology)的愿景,认为影响最深远的技术应该是隐匿不见的,它们如纤维般融入日常生活,丝丝入扣,直至不可分辨。

随着科技的发展,设计师对新技术不应是不加克制地应用,而应该润物细无声般地提供服务,帮助人们从繁杂喧嚣的数字世界中解脱出来,将宝贵的注意力资源投放在让生活更美好的事物上。

更自然丰富的交互方式

回顾人类和机器的交流语言,从命令行界面、图形用户界面到自然用户界面,人机交互方式越来越贴合人与人之间更自然的交流方式,其背后是心智模型与实现模型的高度拟合的趋势。

在自然用户界面中,为满足新形态智能硬件对新接口的需求,以及人们对更丰富强大的交互方式的自然诉求,越来越多的自然用户界面被开发出来。语音交互和隔空手势交互便是近几年迅速发展并落地的两种交互方式。

1. 隔空手势交互:更自由、更灵动

为了让机器更好地读懂用户的身体语言,能够感知深度信息的摄像头走进了日常手机。2019年国内外手机厂商的发布大会上,LG 手机 G8 ThinQ 以及华为发布 Mate 30 系列推出的隔空手势,可实现一些简单的诸如滑动、切歌、截屏等效果。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

除此以外,隔空手势支持更加细微的手势,如旋转、揉搓等,可以更直观、更灵活的方式操控界面,让用户获得一种像魔术师用意念控制事物运作的快感。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

对于隔空手势操作网上的言论褒贬不一,其中争议性最大的就是隔空手势宛如「杀鸡用牛刀」,明明可以用更加精准的手势触控,为什么还要用看似很酷炫其实精准度更低的隔空手势操作?

隔空手势并不是要替代触控手势成为主流的人机交互方式,更多是对情境式障碍场景的补充。在某些场景下,用户使用设备的条件可能是充满干扰的。想想看当你边看手机食谱边炒菜的时候、边煲剧边剥小龙虾的时候、疫情期间出门佩戴橡胶手套无法正常触控手机屏幕时…..隔空手势是不是特别好用?

每个人在特殊的场景下都有可能面临感官障碍,未来的设计也应该更多地考虑情境式障碍的场景,让用户无论身处何时何地依旧能一如既往无障碍地使用设备。

2. 语音交互:更精准、更好玩

语音交互作为更趋近于人与人之间最自然的交流方式,近些年有许多发展的突破点。

在发展主线上,语音交互趋向更自然、更人性化、更个性化。过去反人类的一些沟通方式慢慢被「调教」。此外,多人会话场景下的技术方案日渐增多。

2019的 Google I/O 大会展示了一个视频片段,视频中的两位嘉宾相继吐槽,经常出现针锋相对难以听清的时候,这时用户可以调节音源音量选择性增强自己关注的人物声音,让另一个人「静音」。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

△ 滑动选择音源

此外,语音交互除了在智能音箱领域广泛应用以外,也逐渐应用在广告等更多的传播媒介中,刷新人们日常使用体验。2020年2月索尼提交了一项广告播放新专利。当用户在观看电视节目时,如果出现广告,只要站起来大喊广告中对应品牌的名字,便可直接跳过这个广告。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

设计师在语音交互场景下,需要留意以下几个比较容易被忽视的因素:

用户语音交互习惯培养:如今还处于培养用户语音交互使用习惯阶段,设计师需要更多地考虑应用的语音交互规则如何才能更趋近于人们日常的沟通习惯,并进一步为人们的社会习俗所接纳。

真实场景下的多人音源:在现实情境中, 在多人对话场景下将面临音源不清、穿插停顿、噪音过多等影响体验的情况,由于计算机听觉分析能力开始从单人音源拓宽到了多人音源,多人对话解决方案上还有很大想象空间。

改变传统的视听体验:在使用场景上,语音交互接口也将逐渐运用到更多的媒介上,更全面地刷新用户体验。

3. 小结

人类拥有双手、眼睛、耳朵和发声的嘴巴,但是并不总是在每个使用场景下都能自如地使用:在安静的自习室下声音收到限制,在驾驶场景下注意力受到限制,在双手拎着东西场景下双手受到限制……但目前许多产品设计都建立在用户能完整使用感官功能这一理想化的基础上。

未来的发展趋势倾向于将视、听、触、嗅等多通道信息完美整合起来,综合使用多种输入通道和输出通道,根据用户使用场景用最恰当的方式传递服务,满足用户多方位的需求。

硬件形态带来新的挑战

尽管乔布斯曾断言3.5英寸是手机的黄金尺寸,但作为人们日常内容消费与娱乐的窗口,手机屏幕毫无疑问地变得越来越大,甚至超出传统物理限制。人们对大屏享受的追求与设备携带便捷性之间的矛盾由来已久,硬件形态的变化对旧有的用户体验设计思路带来的新的挑战。

1. 大屏幕:单手持握新挑战

屏幕横纵比越来越大,而人类的手部具有先天限制,曾经惯用的界面布局方式在高横纵比的屏幕上可能无法被大拇指无障碍全覆盖,使得越来越多的设计更加重视利用移动屏幕下半部分。

操作与信息进一步下移:

高德地图、苹果地图的搜索框下移,方便单手操作用户快速激活输入框;

影视资讯平台IMDB强化底部标签栏功能,双击「搜索」tab即可激活输入框,无须艰难地触摸顶部。

即时战斗类手游皇室战争的说明卡片主要展示在下半部分,方便用户进行卡片上的相关操作。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

底部导航被赋予更多能力:

Pocket的底部标签栏现在兼任汉堡菜单功能,在激活状态下再次点击主页icon可选择主页上须展示的内容。

利用下滑手势代替点击:

Snapchat的许多表示前后进退关系的页面都不是」返回「按钮,而是向下箭头,用户可下滑退出当前页面。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

2. 折叠屏:新形态的交互方式

为了解决设备形态和人类手部先天限制之间的矛盾,折叠屏诞生浏览并颠覆旧有的界面设计方式。

更灵活的信息布局

过去在单屏设计下,考虑到用户注意力由上到下纵向衰减,因此信息布局更多是按照优先级从上往下排序。而折叠屏中,屏幕展开后便可以开辟出更大的可利用空间,将次级页面或者较为重要的内容曝光在第二屏,对信息的布局将带来全新的变化。设计师为保证大小屏下顺畅的阅读体验,需要对信息模块在不同空间布局下的流动性有更强的把控能力。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

更便捷的多任务操作

在过去的单屏体验中,用户只能将注意力完全集中在当前的界面中,一次只做一件事。但在实际生活中,用户面临的情景往往是主线任务和支线任务的频繁交错,并且根据会任务不同的性质自由调动自己的注意力重心,如边看视频边聊天、边看直播边逛街等等。在折叠屏中,设计师可以探索更多主线和支线交错进行的场景,利用折叠屏带来的更大的屏幕空间,可以让用户在不离开主线场景的基础上进行支线任务的处理,大大节约了在不同App上来回切换的操作成本。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

更直观的拖拽交互

此外,随着多任务处理越来越广泛使用,拖拽交互将成为重要的交互模式之一。文本、表情包、图片、视频等交互对象,不再需要经过复杂的分享转发流程才能在不同App中流转,通过拖拽的方式可以更直观地进行交互。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

双面屏互动玩法

外折叠屏在折叠状态下可转为双面屏,等于是给用户增加多一个观看视角。例如华为 Mate X 的镜像拍摄可以让被拍摄者即时获知自己的镜头影像是否满意,这一拍女友神器有望成为直男拍摄终结者。在未来更多的多人观看和互动玩法将被开拓出来。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

△ 华为Mate X 的镜像拍摄

未来随着5G通讯技术的成长,越来越多的设备可以同时加入物联网,人们的生活将被各种智能设备围绕,设计师需要参与更多屏幕外的设计,让不同设备串联在一起协同合作,让用户能更加自在地享受科技的便利。

疫情催生新的线上体验

席卷全球的新冠疫情让数十亿用户乖乖待在家里。过去需要花费大量精力去教育的用户使用习惯因为疫情纷纷转变。云购物、云蹦迪、云赏樱、云监工……人们足不出户便可还原许多线下场景。随着用户线上和线下生活的界限进一步模糊,用户对于应用的效率和情感诉求也发生了变化。

1. 更关注效率导向

疫情让远程办公学习需求剧增,多人协作场景越来越频繁,许多企业随之升级了电话、视频会议、文档制作等多人协作效率软件。过去仅仅考虑少人场景协作的方式不适用,设计师需要比以往更多地考虑多人协作场景下,如何对海量密集的信息进行分析处理和展示。

在学习方式上,由于线下学习转移至线上,学生群体对于娱乐向软件也有了效率诉求。为了顺应用户诉求变化,2020年5月QQ推出学习模式,屏蔽娱乐性的内容推送,让学生更专注在学习上。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

2. 更注重缓解社交疏离感

除了效率诉求急剧提升以外,随着长时间的线上学习与办公所产生社交疏离感和缺失感,人们对于线上学习工作的情感化诉求也进一步增强。

2020年推出的plagi远程办公软件支持设置每个人的avartar形象,让大家在远程办公时依旧能时刻感受到彼此的存在。在完成任务时还可以放鞭炮庆祝,让员工能感受到亲密无间的线上办公体验。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

设计师需要更加关注如何让线上生活进一步与现实生活圈和时间线接轨,通过拓展真实社交下的更多伴生行为让线上也能还原线下的真实场景细节和互动体验,以弥补用户对真实社交的缺失感。

3. 加速人和信息的强连接

疫情的发生加速了人与信息之间的连接。人们越来越习惯将自身的身体资料、心情状态等信息沉淀在智能设备上。

为了做好广大市民群众的健康监测服务,辅助疫情防控工作,微信和支付宝在2020年年初都上线了健康码服务,不同颜色的健康码代表人们不同的健康情况,市民出入特定场所都需初始健康码。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

随着人的数据化越来越深入,个人身份信息的线上化在各平台上将成为更加通用的能力。设计师需要考虑如何更自然更低成本地将线下动态变化的资料信息线上化,更有效地对用户信息进行加工处理,以及记忆用户的使用习惯和行为,以便帮助用户更地完成任务。

疫情的出现加速了线下生活线上化,短短时间内我们看到日常习以为常的应用为响应疫情下的特殊需求纷纷出现改造,钉钉、QQ群被改造成上网课、批改作业的地方,医疗卫生公众号开辟了实时疫情播报与辟谣通道,无接触设计和服务需求异常突出……这也启发了设计师需要保持对突发事件的敏感力以及应急能力,在日常生活中留心思考,为日后突发事件提供充足的场景支撑。

关注以人为本

在汹涌的资本语境下,互联网设计师裹挟在商业驱动的结果导向中狂奔,对设计的伦理和责任鲜有发声,但伴随着互联网红利退潮,发展放缓,狂奔之下的人本问题也逐渐浮出水面。在大趋势下,UX设计师需要培养自身设计对伦理和责任的敏感度,在满足商业目的外,重拾节操,为多群体,为大社会设计,更加注重「以人为本」。

1. 更包容性的设计

包容性设计师指在做设计产品的时候,考虑到各类用户的诉求,输出具有包容性的设计方案。包容性设计依旧是2020年设计主题之一,伴随着互联网产品全球化,在通用性和包容性上也提出了新的要求。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

为身障人士设计

三星在2019年针对东南亚市场推出了一款让聋盲人士和健全人实时交流的app:Good Vibes,盲聋人轻击屏幕输入摩斯电码,预先连线好的另一台手机就会显示从盲聋人发来的短信。健全人用普通的文字输入回复,在盲聋人这一端就会翻译成摩斯电码、以手机振动的方式读出短信内容。

GOOD VIBES宣传视频:https://v.qq.com/x/page/g3108sr8qc9.html

饿了么:在饿了么送货骑手中,约8%受色盲色弱的困扰(全国男性群体中红绿色盲色弱占比达8%-9%,饿了么骑手男性占比90%),为此饿了么设计团队在2019年对app的进行了重新设计,包括使用WCAG无障碍色彩对比度,以及无障碍色盘,以及调整字阶,使用辅助图形等设计手段来解决部分骑手在送货途中使用APP的痛点问题。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

△ 饿了么UED:《为骑士创造平等 — 配送 App 的包容性设计》

跨年龄段设计

谷歌助手礼貌功能 ( Google Pretty Please ) :开启谷歌助手礼貌功能后,如果使用者在下达指令的语句中包括「Please」,谷歌助手会对礼貌的请求表示感谢,以此培养孩子的礼貌言行。

Google Pretty Please功能宣传:https://v.qq.com/x/page/e3108ue3e2t.html

Swift Playground:当10后小学生VITA君的编程课被「可敬的发量」刷满弹幕时,Swift playgrounds功不可没,这款为儿童新手学习编程的软件,用趣味的游戏方式为4岁以上低龄用户提供了一个学习编程的低门槛平台。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

为性别平等而设计

苹果emoji:回看历年苹果emoji的更新,从肤色平等,到性别、性向平等,再到为残疾人设计,2020年再为跨性别者增加新表情,性别平等依旧是包容性设计中重要一环。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

Airbnb插画:爱彼迎在插画系统中,也为不同肤色,不同职业,不同性别,以及身障人士进行了人物的绘制。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

2. 关注用户隐私

2019是互联网科技隐私问题沉浮的一年,国外有Facebook因泄露隐私收到史上最大罚单,国内则打响了「人脸识别第一案」。笼罩在隐私信任危机下,个人信息和数据立法突飞猛进,美国推动《加州消费者隐私法案》,国内也将在2020年出台《个人信息保护法》和《数据安全法》。

MIUI12推出隐匿面具功能

Android开放生态导致的权限隐私问题一直被用户所诟病,某些APP存在用户不授权就无法使用情况,针对这一情况,MIUI12推出了隐匿面具功能。当用户在开启某些APP要求授权权限时,可以选择空白通行证进行授权,从而保护用户真实信息。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

在MIUI12的更新中,还推出了照明弹、拦截网两项隐私保护功能

iOS 14剪贴板提醒

在iOS 14的更新中,保护用户隐私方面进一步升级。

其中剪贴板提醒设计很贴心,当用户打开应用,如果该应用读取了你剪贴板的内容,会在系统顶部弹出提示,用户能在第一时间意识到剪贴板内容被读取,帮助用户更好的保护自己的隐私内容。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

3. 健康的数码生活方式

科技的发展是一把双刃剑,互联网产品的发展给用户带来便捷和沉浸体验的同时,也使得用户沉溺于科技所带来的惰性和投食之下,逐渐丧失了对真实生活的把控权,被科技绑架。

数字福祉(digital wellbeing)近年被频频提起,指科技产品需要权衡好数码产品和真实生活之间的平衡,防止数码产品过渡分散用户的注意力而影响生活质量。

Android Q 专注模式 Google Android Q Focus Mode

Android Q的更新加入了专注模式,用户在专注模式下,可以在系统层面快捷地关闭使你分心的应用,让你聚焦于更重要的事情。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

防沉迷系统升级

推荐技术的进步,产品体验的升级,给用户带来了更合胃口的菜式和沉浸体验,但同时也被冠上了「电子海洛因」的称号。游戏或者内容产品的防沉迷系统依旧会是数字福祉下不可避免的趋势。

王者荣耀在2020年升级防沉迷系统,对青少年的娱乐时间和点券充值的限制进行了进一步升级。承接话。B站在2019年推出青少年模式,在该模式下,使用时长和内容推荐等做了定制化处理。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

2020年的UI设计趋势,一方面是对往年风格的衍变和细化,另一方面,在扁平克制的界面风格盛行后,设计师们向往更自由、更突破的视觉表达。

UI的继承和创新

1. 深色模式

2019年iOS 13深色模式姗姗来迟,紧接着大厂APP相继推出此功能。在2020年,深色模式会继续普及外,也会在可视性和实现成本方面有更多细节打磨和研究。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

2. 新拟态

设计趋势的发展是螺旋式上升的,在扁平化设计流行之后,对物体的拟真再一次回归设计圈,新拟态以一种对旧拟物风格的再创新,重新流行起来。

新拟物风格(Neumorphism)缘起于设计师Alexander Plyuto发布在dribbble的一组作品,以投影重新对扁平界面进行了塑造,模仿出类似浮雕的视觉效果,感受耳目一新,引起大量设计师相尽模仿。

新拟态的实用性和可落地性有待商榷,但是作为一种新的风格受到设计师拥趸,也不失为下一波风潮到来前的灵感缪斯。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

WWDC2020对mac OS的更新也重新定义了新拟态设计语言,在mac OS新系统Big Sur中,图标的设计增添了轻微的渐变、投影、高光,以此来营造图标内元素之间的纵深关系。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

3. 多彩配色

在扁平简洁UI风格盛行之后,丰富的色彩依旧是设计趋势之一,大面积色块,碰撞配色,带来更具冲击感的视觉体验。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

4. 字体装饰化

UI界面逐渐扁平,色块图标弱化,为突出页面重心和内容,iOS 11在界面标题上使用更大的字号,更粗的字重。近年在大标题的风格衍变下,文字在传达信息外,也开始有了装饰性作用,采用超大字体,成为页面排版美化的一部分。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

5. 更大圆角

大圆角的风格会继续延续,相较以往,卡片的处理圆角会更大,随之带来的是多的留白处理,结合大字号,带来更透气通透的视觉感受。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

Mac OS Big Sur的界面相对旧版本采用了更大的圆角;系统图标的设计统一成圆角矩形。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

6. 更丰富的插图

UI插图的丰富体现在样式和内容上,样式上开始3D化,内容上更注重插图叙事的表达。

7. 3D插图

3D图形往年更多运用在动态影像或运营类设计中,随着3D的普及运用,UI插图也会迎来3D化,给用户带来更立体,更新鲜的视觉感受。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

8. 讲求叙事表意

相较于往年追求形式的UI插图,新趋势下的插图更讲求功能性,每一副插图都承载一定的作用——传达功能信息或透传品牌情感;同时插图更讲求画面表意和情节,给用户叙事性的视觉体验,增进用户和产品之间的情感联系。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

9. 插图组件化

插画的流行,随之而来的是成本的水涨船高——一套系列插图为保持风格统一,往往由唯一设计师绘制,同时为兼容各类场景,设计师往往要绘制多张。

为解决插图的成本和效率,插图开始以组件化的方式进行绘制——插图设计师将插画进行拆分绘制——不同人物,不同场景,不同物件等,再通过组件化的拼接合成,使用组件的设计师可以根据需求场景自由组合,也避免了风格不统一问题。

设计师Pablo Stanley将日常绘制的插画制成一套矢量插图组件库,将人物分为:半身、全身和坐姿3大类。通过不同表情、发型和服装可自由搭配出近60万种组合。

Pablo Stanley人物插画系统:https://v.qq.com/x/page/s3108yeyhmt.html

10. 多维度动画表现

新趋势下,动画一方面回溯复古线描手绘风格,另一方面追求更三维的体验,同时帧率进一步提升,追求更流畅的视觉感受。

11. 手绘动画

手绘插图是往年的热门,其随性自然的笔触,能给用户带来亲切的感受,在新的趋势下,动画的加入赋予手绘插图一份灵性和趣味。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

12. 3D运动

Google Material Design通过卡片投影层级和二维动画规律,赋予扁平界面Z轴的纵深感。随着3D的普及流行,新趋势下的界面,界面的运动从二维走向三维,表现出3D场景下透视感。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

13. 高帧率动画

高帧率影视从线下电影院移步到线上流媒体,手机高帧率屏幕从90Hz到120Hz逐步升级,用户对画面流畅的定义一再刷新,UI动画的帧率升级也会是新的一轮趋势。

Telegram的表情采用了高帧率动画,给用户更流畅的视觉感受。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

更的涉及协作方式

体验的持续升级,产品的高速迭代,对UX设计师的设计师效率提出了更高的要求。的设计方式是一个永恒的趋势。

1. 从本地文件到云端协作

传统的文件交接方式效率低下,导致设计师之间信息不对称,最终影响产品的一致性体验。近些年在线设计协同工具发展迅速,从UI设计、 设计交付以及组件协同等环节上给设计师提供更加实时的协作体验,获得大量UX设计师的簇拥。在2019 uxtool的设计工具调研中,在线设计协同工具佼佼者figma以其协作和性能优势,大有追赶sketch之势。

随着团队对设计效率要求的提高,设计文档从本地走向云端协作是不可逆趋势。不过设计工具的迭代是需要成本的,尤其在大型设计团队,设计工具需要渡过阵痛期来完成迭代,进而提升设计效率和体验一致性。

2. 科学有效的设计系统

UX的发展,从早期的静态规范到当下的动态设计系统,是为解决产品迭代增速后带来的设计效率和产品体验问题。商业驱动下的产品迭代速度有增无减,设计系统依旧会是未来几年的设计趋势之一。

这里说的设计系统不是广义上的设计系统,而是在互联网设计的发展中,对组件化设计逐步迭代升华的一套设计协作方法:

「设计系统(Design systems)是一组为了共同目标而服务的内在相互联系的设计模式和多人协同执行的方法。」(引自《Design systems》,Alla Kholmatova,C7210翻译)。

3. 设计系统历程衍变

组件化的发展历经规范文档到UI组件,再到设计系统,形态从最初对设计一致性的指导规范,到对产品研发流程的规范,以及产品设计价值观的输出,当下的设计系统以集大成者形式影响整个产品的设计形态。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

设计系统的结构见下图:

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

4. 设计系统的求同存异

设计系统并非一成不变的,他是一个动态进化的系统,会根据团队性质、产品特性在内容上有所区分——比如大团队更应该大而全,小团队更倾向小而精;成熟产品的设计系统更倾向于打造完整闭环的合作流程机制,新产品的设计系统应该以小为始,快速迭代……

随着产品的垂直化,细分化,设计系统的趋势会是在趋势大同之下找到适合产品和团队自身的形态和节奏。

Material Design是一个包含了指导规范、组件,以及设计开发工具的自适应性设计系统。

它作为平台型性设计系统,更为大而全的规范了整个生态系统的设计风格,以及提供工具让研发者能快速产出符合规范的产品。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

△ Google生态庞大繁杂,Material Design更为全面

Ant Design作为一个为to B产品提供解决方案的平台,更多从设计可用性和完整性考虑设计系统的搭建。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

△ Ant Design通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验

QQ作为一款面向95后的2C社交产品,其设计系统Q语言从风格调性上对设计进行规范,同时给予设计师一定的自由度;也考虑到QQ内兼顾多个产品,以及界面主题样式,对基础组件的使用场景和代码进行了规范,方便设计和开发敏捷开发。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

Q语言,给予产品的自由调性之外,也针对主题和基础组件进行了规范。

每个产品和团队都有自身的特征,设计系统的建设也应该有的放矢,没有可照搬的标准答案,在大方向下找到适合自身的解决方案才是的可行之道,将效率最大化。

5. 科学有效的优化迭代

组件是设计系统中的重要组成部分,但是以往静态的、孤立的协作方式使得组件的更新迭代滞后和阻塞。随着设计系统的发展,设计师组件化思维的普及,组件的更新需要更科学的方式进行管理。

Figma在2019年推出的Design System Analytics功能,组件设计师可以借此查看组件的使用情况,包括引用次数,解组次数等,并可以生成组件使用情况的曲线趋势图,以数据的形式,科学地推动组件的优化迭代。

腾讯万字干货!2020-2021 设计趋势报告:用户体验篇

选择分析的时间段;组件使用的次数曲线图;团队使用情况;所有组件使用情况

后记

未来的用户体验会出现什么新趋势?人工智能等算法的发展、5G技术普及、新的智能设备形态、新的信息处理技术、新一代用户的喜好和口味……这些往后或将影响用户体验发展的走向。未来用户对体验的要求只会越来越高。

用户体验设计师需要了解更多的技术动向,但安身立命之本还是让用户真正受益:立足于用户真实使用场景,在理性价值层面上,打造可用、易用、的设计;在感性需求层上赋予情感上的愉悦性,在反思层面赋予意义价值。

文章来源:优设    作者:腾讯ISUX

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

资深UI设计者

近年来暗黑模式的设计趋势开始一点点明显,Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索,接下来就让我们一起来看下 Ant Design 这一针对企业级的设计体系是如何设计暗黑模式的。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

什么是暗黑模式

暗黑模式是指把所有 UI 换成黑色或者深色的一个模式。

需要说明的是,暗黑模式不只夜间模式:

暗黑模式更多的目的是希望使用者更加专注自己的操作任务,所以对于信息内容的表达会更注重视觉性;

而夜间模式则更多是出于在夜间或暗光环境使用下的健康角度考虑,避免在黑暗环境中长时间注视高亮光源带来的视觉刺激,所以在保证可读性的前提下,会采用更弱的对比来减少屏幕光对眼睛的刺激。

同时,从使用场景上来说,暗黑模式既可以在黑暗环境,也可以在亮光环境下使用,可以理解为是对浅色主题的一种场景化补充,而夜间模式只建议在黑暗环境下使用,在亮光环境使用时很可能并不保证信息可读性。

为什么 Ant Design 要做暗黑模式

1. 更加专注内容

试想一下,我们在电影院看电影时,为什么要全场关灯?甚至有些 APP,在影片的下方也会又一个模拟关灯效果的操作,来让整个手机屏幕变黑,只剩下视屏画面的部分,这都帮助我们可以更专注、更沉浸在当前的内容下。

色彩具有层级关系,深色会在视觉感官上自动后退,浅色部分则会向前延展,这样对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作;尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进作用。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

2. 在暗光环境下更加适用

如今社会我们身处黑夜使用手机、电脑、iPad等设备的次数越来越多,环境光与屏幕亮度的明暗差距在夜间会被放大 ,亮度对比带来视觉刺激也更加明显,使用暗色模式可以缩小屏幕显示内容与环境光强度的差距,同时也可以为设备的续航带来积极影响,可以保证使用者在暗光环境下使用 OLED 设备的舒适度。

3. 大众喜爱

黑色一直以来就可以给人以高级、神秘的语义象征,相比于浅色模式,暗色模式藏着更多可能性。

设计原则

在这次暗黑模式的设计中主要遵循以下两大设计原则

1. 内容的舒适性

不论是颜色还是文字或是组件本身,在暗色环境下的使用感受应当是舒适的,而不是十分费力的,如果一个颜色在浅色下使用正常,在暗色下却亮的刺眼或根本看不见,那必然不够舒适也不可读;所以在颜色的处理上不建议直接使用,这样会让界面变得到处都是「亮点」,让眼睛不适的同时,也会带来许多误操作。

2. 信息的一致性

暗黑模式下的信息内容需要和浅色模式保持一致性,不应该打破原有的层级关系。举个例子,在浅色模式下越深的颜色,与界面背景色对比度越大,也就越容易被人注意,视觉层级越高,比如 tooltip;在暗黑模式下我们同样需要遵循这一规律,所以对应所使用的颜色也就越浅,反之则会越深。

如何设计

1. 界面层级

在大量的企业级产品界面中,我们通常用只用一个白色背景结合分割线就可以搞定所有界面的板块层级,因为在浅色模式下有投影可以借助,然而暗黑模式中投影将不足以起到如此功效,我们需要通过颜色来区分层级关系。

在经过对蚂蚁企业级页面的典型布局结构评估后,我们在中性色中增加了三个梯度,将中性色扩展至 13 个

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

并定义出通用情况下页面中的框架层次,主要分为三大块:

  • 应用框架:也就是我们平时定义的导航栏,也是在大结构中最上层的一部分
  • 内容组件:指页面中的具体内容,通常情况下以区块的形式存在,作为第二层级
  • 页面容器:顾名思义,指页面级别的容器盒子,可容纳页面中的所有内容,可以理解为是一个背景板,也就是最末层

在目前的暗黑体系下,我们分别为这三大块从浅到深定义了#1F1F1F、#141414、#000000 三个颜色,在实际应用中,你也可以根据自身业务的需求,从中性色板中直接选用或是依据透明度的思路自定义出合适的中性色彩。当定义出较为明确的框架层次和颜色后,也对后续系统中组件的颜色配置有着重要的指导意义。我们需要考虑组件出现在不同颜色背景下的可能性及其表现,尽量保持一致性。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

2. 色彩

众所周知,暗黑模式与浅色模式最大的不同就在色彩的处理上,在暗黑模式中,我们并不想打破浅色模式下基础色板的配置规律及色值,当一个应用或站点深浅模式并存时,希望在色彩上有一定延续和关联,而不是毫不相关的两套色板,这样一是避免开发及后续的维护成本,二是实际切换和使用时,可以保证一致性,这意味着需要借助一定规则。

这里分享一下我们的处理思路:

基于 Ant Design 自然的设计价值观,我们先从自然界中寻找灵感,如果说浅色模式如同初升时的朝阳,那暗黑模式就是落日下的晚霞,各有各的韵味,同一片天,唯一不同的是,受光线亮度的影响,晚霞整体会暗一些。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

所以我们大体的设计思路也是基于浅色的基础色板,通过结合透明度的转换,去得到一套暗黑模式下的色彩。这样的好处是,深浅模式下的色彩根基是同一个,在这样的基础上经过透明度的变换得到的结果也会相对和谐,同时也符合我们一致性的原则。

这里我们借助下面这两个概念对透明度进行转换:

对比度极性

对比度极性分为正极性和负极性。

  • 对比度正极性:指在电子文本中文本为深色,背景色为浅色
  • 对比度负极性:指在电子文本中文本为浅色,背景色为深色

这里可以给大家分享对比度查阅的一个工具:WebAIM,只要输入色值就可以看到具体的值,十分方便。

正负极性差值

顾名思义便是正负两者的差值,这里取的是绝对值。

根据一致性原则,我们尝试通过对比一套颜色的正负极性变化趋势来找到转换规律。

首先可以看下,如果一个颜色在不做任何修改的前提下直接使用,它的正负极性趋势以及差值趋势的走势和关系是怎么样的,我们尝试描绘出这样的曲线,他们的变化规律也将作为我们规则转换的参考标准。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

经过对比,可以发现一些变化规律:

首先来说下「差值趋势」,横向对比可以发现,不同颜色的正负极性走势是很不一样的,可以看到在黄绿色段差值曲线达到一个变化峰值,这是由于黄绿色本身由于明度、饱和度值相比其他颜色偏高,所以总是有种刺眼的感觉,生活中也会用它来作为警示、提醒的作用,所以在深浅背景下的对比度有一个比较大的差异,可以说这个变化是正常的。

这点也可以从「正负对比度极性趋势」两者间的相对关系反应出来,从红色到洋红,绿线一开始从逐渐在蓝线的上方一点,开始逐渐上移,最后在峰值处开始慢慢下移,在「极客蓝」这个色相中接近重叠,在洋红处又慢慢下移,说明浅色下越深的颜色,在深色中越亮,反之则越暗。

纵向比对单个色板,可以发现,其斜率变化主要受颜色的明度、饱和度影响,可以反应一个颜色的不同梯度在黑白背景下的变化规律。

有了这个大的变化规律,我们便可做到心中有数。首先以 Ant Design 的品牌色「破晓蓝」为例,经过在多个业务、场景中不断尝试与调整,我们得到一个透明度转换规则:

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

并将这个规则应用在其他 11 套色板中,验证其可用性。这个过程确实没有什么快捷通道,唯一的办法就是不断尝试。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

最后,我们将经过规则转换的实色与常规颜色的变化趋势做对比:

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

可以看到在大趋势走向上左右两侧图基本一致,这代表两个色板在变化规律接近一致,基本可以证明规则的合理性。区别在于,对比度负极性和差值相对于右侧未经处理的值明显有所下降。这是由于透明度的处理让暗色下的颜色在明度、饱和度上有所下降导致。

再仔细观察可以发现,在左侧的常规颜色中,从破晓蓝-洋红这段偏冷色系几个颜色中,差值趋势变化最平缓的是「极客蓝」这颜色,这说明该颜色在深浅背景下的表现较为稳定,起伏不大,当基于一个统一的透明度规则前提下,会让它在暗色下的对比度减弱,所以反而会导致差值趋势变大,所以我们会发现差值趋势变化较小的颜色转移到了「破晓蓝」、「洋红」中,也是一个正常现象。

最后可以看到颜色在调整过后实际应用的效果

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

在官网中点击「切换」即可预览:

如果上述 12 个色板不满足你的业务需求,你也可以在官网上自己选择颜色,我们会根据规则帮你生成一个暗色色板。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

另外,如果在实际应用过程中,你选了色相在 225~325 间的深冷色系作为主色或强调色使用,建议适当提高透明度的值,避免在暗色界面上引起阅读障碍。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

3. 文字

暗黑模式中,文字的使用与浅色模式基本一致,依旧从 85%-65%-45%,唯一不同的地方在 disable 的状态,其透明度值提升为 30%,避免颜色过淡真的「不可见」。另外,对于 #FFFFFF 的纯白色文字,尽量避免大面积使用,尤其对于表格、列表这类偏阅读浏览的场景,如有需要,做小范围强调即可。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

4. 阴影

暗黑模式中的阴影规则与浅色模式基本保持一致,但由于本身的界面背景较深,在阴影色值上也有所加深,帮助层次更好的体现,整体将色值扩大到原先的 4 倍,但在阴影的位移、扩展上均保持不变。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

5. 分割线

分割线在暗黑模式中建议根据界面中常用的背景色,通过透明度换算成实色使用,Ant Design 中分割线主要有 #434343 和 #303030 两种颜色,分别对应浅色模式下的 #D9D9D 和 #F0F0F0,这样做的目的主要是为了避免带来额外的交错叠加,尤其对于表格类以及很多带有 border 属性的组件,实色会更为稳妥便于记忆。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

适应性

适应性方面,Ant Design 的暗黑模式可以与海兔及可视化资产进行无缝衔接,使用时可以任意组合拖拽,你可以下载 Kitchen 插件,获取海量资产。

大厂如何做好暗黑模式设计?来看 Ant Design 的规范文档

结语

暗黑模式最近越来越受到人们的关注,与某一特定产品的暗黑设计不同,Ant Design 的暗黑模式更多以设计体系的角度考虑企业级这个大场景下的内容,在易用性、扩展度、复用度等方面还有许多需要完善和继续研究探索的地方,我们会在未来的迭代中逐步进行,先完成再完善。希望上述内容能对大家在暗黑模式的设计上有所帮助。

文章来源:优设    作者:AlibabaDesign

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

看似简单的线框图设计,这7个要点必须知道!

资深UI设计者

在这里,我们将研究设计中最简单、因而常常被低估的活动之一,即线框图的设计。了解什么是线框图,为什么需要设计它们以及如何充分利用线框图。

什么是线框图?

线框图,也称为页面示意图或屏幕蓝图,是展示网站或产品框架的视觉指南:

  • 设计:线框图常用在考虑用户需求的情况下在页面上布置内容和功能。
  • 开发:添加视觉设计和内容之前,在开发过程早期使用线框来建立页面的基本结构。

线框图的主要目标是向团队和利益相关者展示产品将包含的页面和组件,以及这些元素之间的相互作用。

为什么需要设计线框图?

1. 帮助团队评估和完善工作范围

线框图允许设计师快速创建产品的视觉表现,方便后期修改;

帮助设计师向团队展示应用程序具有的页面元素和控件,以及所有元素如何进行交互。

2. 让团队所有成员参与产品设计

线框图的使用允许设计师和开发人员在早期阶段共同参与讨论设计,在开始进行视觉设计之前就提供反馈和更改建议。

这样有助于使设计过程快速迭代,避免不必要的浪费。

3. 方便快速演示

从客户和利益相关者那里获得快速反馈是设计过程的重要组成部分。

设计过程中,经常会遇到需求的来回变化。有了线框图,可以使这个过程更有效,修改原型比修改线框图需要更多的时间和精力。

4. 进行用户测试

线框图可以帮助设计师从潜在用户那里获得有用价值的反馈。同时浏览线框比读取规范要快得多,还有助于减小与预期效果的差异。

线框图实际应用

为了获得最好的结果,为下一步的 UI 打下坚实的基础,需要遵循几个简单的规则:

1. 颜色的使用

如果在线框图中使用丰富的配色,可能会分散观者的注意力,并使更新变得更困难。

但在某些情况下,使用颜色突出显示特定组件是合理的。例如,可以将红色用于错误状态,将蓝色用于注释等。

2. 使用简单的组件

线框图并不包含全面设计和详细说明的组件。相反它们应该设计的相对简单,让团队成员更容易识别。

为组件添加细致的阴影、粗细描边将花费大量的时间和精力,却不是很实用。

3. 保持一致性

在所有线框图中,类似的组件必须看起来相同。如果相同的组件看起来不同,开发人员可能会质疑它们的功能是否相同,甚至会因为设计不同而增加估算时间。

在处理线框图时,记住一个简单的规则:保持一致,避免造成混淆。

4. 使用真实内容

我们会常看到UI/UX设计师没有在线框图上添加真正的内容,而是重复使用同一些文本。这是很少有设计师意识到的普遍错误。

内容真实与否会影响接下来的设计。如果使用不真实的内容,UI设计中文本的数量多少和排布方式都要再调整。

真实内容能给线框图增加价值,更好地解释上下文。

5. 使用注释

设计中可能会遇到某些解决方案无法直观地加以说明的情况,例如某些控件背后的逻辑,因此开发人员可能会对它们有疑问。

在这种情况下,可以提供注释来解释其背后的逻辑。这样,你的团队就会理解你的解决方案,你就不需要花时间再讨论它们。

6. 线框图程度

线框图应该选择低保真还是高保真,没有严格的规定,取决于项目的具体要求。

硅谷知名作家埃里克·莱斯认为,如果不能带来价值就不需要做额外的工作,从基础做起,然后根据需要添加细节。

7. 将线框图延伸到交互原型中

在使用不同产品时,有一些简单而通用的交互,也有一些交互相当复杂。

在线框图不足以说明复杂性的情况下,可以将线框图扩展到交互原型中,而不必写冗长的注释并花大量时间进行解释。

总结

将线框图结合到设计过程中,为我们所用:

  • 帮助团队获得更的项目估算;
  • 让所有团队成员参与设计流程,避免影响开发过程的错误;
  • 提前向客户、利益相关者进行演示,以尽快获得反馈,节省开发不良解决方案的时间。

     文章来源:优设    作者:Clip设计夹

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


2020年越来越火的车载交互该怎么设计?来看前辈的经验总结!

资深UI设计者

这次我们不聊视觉,也不畅想未来,只说说当下 HMI 产品设计与交互体验。

本文内容会涉及一些专业的汽车知识名词,因为篇幅有限,如有些知识名词不太明白可以百度一下。

别看错了,不是HDMI!

说到 HMI 大多数设计师应该是既熟悉又陌生,HMI 是 Human Machine Interface 的缩写,「人机接口」,也叫人机界面,人机界面(又称用户界面或使用者界面)是系统和用户之间进行交互和信息交换的媒介, 它实现信息的内部形式与人类可以接受形式之间的转换,凡参与人机信息交流的领域都存在着人机界面。

听起来是不是觉得这不就是 UI 吗?有什么区别吗?似乎差不多,几乎是没有区别的,只不过是在某些场合和设备上管他叫 UI,比如移动端设备,而在另外某些场所和设备上管他就叫 HMI,比如汽车车机和数控机床。所以这个概念也不用去特别较真,HMI 就权当作是汽车上的 UI 界面吧。毕竟汽车是高科技与工业结合的完美产物,「HMI」念出这个词时候就感觉是蛮专业的!很般配!

HMI前世与今生?

刚才说 HMI 最早更应用于工业上,比如常见的各种机床、制造装备。

或者说让时间再向前推进一点!

而这里通常意义的 HMI 则更加聚焦点,基本特指汽车车机或者车载多媒体设备。

说到这里还是要从车载仪表盘说起,从德国人卡尔·本茨发明世界第一辆汽车,距今已经 100 多年的时间了,在那些还没有 HMI 这个名词的年代,那么他是以什么形态出现的?那就不得不提「仪表盘」了。

当然写这篇文章并不是去评测谁家 HMI 更优秀,而是希望通过一些假设、实验和推断,和大家一起来探讨一下如何更有效地设计 HMI。

屏幕越大越好?车内到底需要几块屏幕?

我们先从屏幕开始。

说到屏幕,设计师都是比较敏感的,因为我们最终的设计交互创意都是需要都是在屏幕上显示展示出来的,HMI 当然也不例外。现在在车载屏幕上你能看到最大尺寸多大?

拿特斯拉为例,Model S 和 Model X 车型都是 17英寸,Model 3 为 15 英尺。

当然他肯定不是最大的,熟悉汽车朋友你应该知道我想说谁了,没错就是他!拥有 48 寸可多段升降屏幕的 BYTON 新能源概念车 M-Byte!48 寸的确很夸张,难道屏幕越来越大就是未来 HMI 的方向吗?

当然这个问题肯定是否定的,为什么?那就要从车载屏幕的作用来说起。

首先我是作为一个曾经就职于汽车公司的设计师,并且是一名地道的汽车发烧友,凭借对汽车还算熟悉和热爱做出一些产品交互分析,以下如有不妥之处还望海涵。

汽车内屏幕的作用

按照功能场景总体可分为三类:主行驶状态信息、附设备状态信息、多媒体 & 外设

不可缺少还需要与使用者、场景结合,我们先来做一个大概的用户画像。

对应这些需求,汽车需要有仪表台(屏)控制和显示的区域有五个。

五个区域分别是:

  • 主驾驶仪表屏
  • 中控台控制(屏)
  • 后排娱乐屏
  • 副驾驶信息屏
  • 扶手控制台(屏)

其中前三个是主流配置,后两个比较少见。

关于汽车设备这块我们不做深入展开了,毕竟这篇文章主要讨论的还是设计,直接看结果!

题外音:屏幕安全性的考量

汽车是比较特殊的设备,基于安全性考虑,汽车内屏幕尺寸不宜太大与太多。

屏幕总体为玻璃材质,但与车窗挡风玻璃的材质不同,当汽车遭遇碰撞的时候,车内屏幕极易破损并形成尖锐物,极大可能会乘坐人员造成二次伤害,所以车内屏幕不易太多,更不易太大。虽然车载屏幕变大变多已不可逆转,而且随着屏幕技术的提升,柔性 OLED 的应用也将会在一定范围解决安全问题。但也需要汽车相关设计者多在安全方面进行考虑,任何产品体验应该建立在安全基础之上的,特别是交通工具。

物理实体按钮过时了?

为什么大屏幕操控成为了当前的 HMI 主流了呢?那不得不去提一下另外一个我们熟悉的设备——手机!

同样一个有限的区域,如果用物理按键那么这个区域只能是固定的功能,而屏幕就可以无限扩展。特别是在汽车中控屏上集成内容会很多,体现就更加突出。

但是在汽车上的全部使用屏幕真的是最佳选择吗?显然这是有待商榷的。

不可否认屏幕的确有很强的扩展性,但是缺点也是明显的:1.触控反馈缺乏 2.交互效率不高

对于这样的判断,我们可以通过两个实验来进行验证。

将类似于 Surface Dial 这种智能按钮交互装置引入汽车的屏幕控制中,每个按钮可以根据情景进行自定义,并且吸附到汽车屏幕的任何位置进行交互操作,相信这一定是一种全新的使用体验。当然这一定是需要解决比如吸附力、安全性等一系列问题。

屏幕触控反馈

虽然目前的屏幕还无法做到完美触控反馈,但已经出现了一些新的硬件技术来试图解决这些问题,比如 Tanvas Touch,其定义为 「手指与触摸界面之间的电子压力控制」。简单来说他们的产品就 「皮肤的磁铁」 一样,能够更加精准地感应手指的动作,最后结果就是比 Apple 的 3D Touch 更加具有压感的触摸操作表现。

原理是利用手指尖触摸显示屏时产生的静电引力来模拟触感,通过电磁脉冲把更的反馈发送到用户的指尖。

Tanvas 也正在与汽车制造商们合作把这项技术嵌入到汽车或屏幕上,让人们更容易感触受到不同物体的表面。

也许在未来我们真的会遇到他。

文章来源:优设    作者:残酷de乐章

交互设计师常用的设计理论与心理学

ui设计分享达人

掌握好常用的设计理论与心理学知识,能帮助我们对用户的人性特征的拿捏,帮助我们较大的影响用户底层决策,以产品实现业务目标。

一、尼尔森10大可用性原则


1、状态可见原则

不局限于:用户的当前状态、知道当前任务要做什么、任务进度等。

2、环境贴切原则

设计要复合目标用户的认知,符合用户的心智模型,于是熟悉的事物越容易被用户所接受。

3、撤销重做原则

操作前可预知,操作中有反馈、操作后可撤销。

4、一致性原则

不局限于:业内产品的一致性、产品内的一致性、版本迭代间的一致性

5、防错原则

错误行动发生前,引导用户向正确的方向前进;用户触碰到危险操作时给予提示;危险操作发生之后,提供撤回的入口。

6、易取原则

通过使用对象、动作和选项的可视化表达,最大限度地减轻用户的记忆负担。

记住用户的操作记录、一个流程对应一个操作目标、提供适量的信息、选择而不是输入。

7、灵活原则

好的产品需要同时兼顾新用户和资深用户的需求。对新用户来说,需要功能明确、清晰,对于老用户需要快捷使用高频功能。不可迎合某一种用户,把不必要的信息占据重要部分。

8、易扫(读)原则

不要包含不相关或低频次的信息/操作。页面中的每个额外信息都会降低主要内容的相对可见性。

产品设计的四大基本原则:亲密性、对齐、重复、对比。

9、容错原则

错误信息应该用通俗易懂的语言表达,较准确地指出问题,并且提出解决方案。避免通过代码等用户难以理解的形式

即:提供解决方案、帮助用户从错误中恢复

10、人性化帮助

如果系统能让用户不需要阅读文档就会使用那是最好的,但通常情况下还是需要帮助文档的。任何信息应该容易被搜索,且专注于用户的目标任务,并列出具体的步骤来告知用户。


二、费茨定律

翻译成人话就是:

1. 按钮做大点(W大点)更易于点击

2. 将按钮放置在离开始点较近的地方

3. 相关按钮之间距离近点(D小点)更易于点击

4. 屏幕的四角与四边是「无限可选中」位置(非移动端)

5. 通过费茨定律的反向使用,可以降低按钮被点击的可能


三、米勒定律


米勒定律预测人的工作记忆能够记住的项为7(±2)个。1956年认知心理学家乔治·米勒发表了一篇论文,他讨论了短期记忆和记忆跨度的极限。

不要乱用 “神奇的7” 为设计进行不必要的限制;

将内容整理为较小的单元,以便用户轻松地处理、理解和记忆。


比如电话号码的显示方式、银行卡的显示方式等


四、接近法则


观察者看到彼此邻近(空间或时间)的物体时,会将它们视为一个整体。

在界面设计中,对信息的组织已经离不开这个法则了,他在界面中所体现的就是把相关的信息块组合在一起,不太相关的分离开,增强与区分元素之间的关联性,所强调的是空间和位置。

接近法则产生于群组,它可以减少信息设计的复杂性,对引导用户的视觉流、便于用户对界面的解读起到至关重要的作用。


五、席克定律


希克定律是一种心理物理学定律。用户所面临的选择数量越多,做出选择所花费的时间就越长,在人机交互的界面中选项越多,意味着用户做出决策的时间越长。


六、泰斯勒定律(复杂性守恒定律)


泰斯勒定律又称复杂性守恒定律,该定律认为每一个过程都有其固有的复杂性,这个复杂性存在一个临界点,超过了这个点就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。


七、奥卡姆剃刀原理


奥卡姆剃刀原理的核心思想为:“切勿浪费较多东西去做用较少东西同样可以做好的事——如无必要,勿增实体,即简单有效原理”。


八、防错原则


操作前有提示,操作中有反馈、操作后可撤销。


九、损失厌恶


损失厌恶是指人们面对同样数量的收益和损失时,认为损失更加令他们难以忍受。同量的损失带来的负效用为同量收益的正效用的2.5倍。损失厌恶反映了人们的风险偏好并不是一致的,当涉及的是收益时,人们表现为风险厌恶;当涉及的是损失时,人们则表现为风险寻求。


十、安慰剂效应


“安慰剂效应”指的是,对于某种无效的疗法或干预手段,仅仅是“相信它有效”,就能改善健康,并能改变认知


十一、多尔蒂门槛


研究结果表明,计算机的响应速度直接影响了使用者做出下一个决定所要花费的时间(这个时间被称为用户响应时间),换句话说,计算机相应的时间越长,用户就要花费越多的时间来思考和决定下一步的操作。


合理的操作响应时长、方式有助于用户保持专注和提率。

软件操作的过度动画时间不宜太短或太长,最常见于 400ms 左右。

如果无法避免操作中较长读取、等待时间,那么就用其他更有趣的动画、页面来减少用户的焦虑感。


十二、马斯洛需求层次理论


马斯洛需求层次理论是人本主义科学的理论之一,由美国心理学家亚伯拉罕•马斯洛在1943年在《人类动机理论》论文中所提出。书中将人类需求像阶梯一样从低到高按层次分为五种,从低到高依次是:生理需求、安全需求、社交需求、尊重需求和自我实现需求。

但最终马斯洛添加求知需求和审美需求,自此马斯洛需求层次理论最终定型为8层。

十三、格式塔心理学


格式塔原则描述了当某些条款和条件被应用时,人类大脑如何感知视觉成分。它帮助大脑创造视觉的意象。因此,格式塔原则基于六个主要类别:

位置和位置;

接近;

对称与秩序;

类似;

关闭;

连续性。


十四、自我参照效应


第一种是精细加工说:在记忆过程中,这些事物在头脑中被进行了精细加工,与头脑中的已有知识之间建立了更多的联系,因此回忆时的提示线索更多,回忆效果更好。

第二种是组织加工说:于自我的知识是头脑中存在的一种结构良好的组织体系,它对与自己相关的事物有更好的固着作用;同时,由于自我知识常常被激活,因此与之相关的信息也更容易被相应地激活起来,这样回忆起来也就更容易。

第三种是双过程说:即自我参照任务能提高记忆的机制既包括精细加工因素,也有组织作用的参与

广告商会挖空心思的建立商品和你的关联,告知我们如果你购买了我的商品,你就会获得怎样的好处。而自媒体人则在标题上尽量简明扼要的说明,我要说的事情和你密切相关,不看就亏了。所以,稍微有深度的文章在快餐式的自媒体平台中反而阅读量不高,这是因为文章标题所涵盖的内容可能只和少部分人有关。


十五、上瘾模型


1、触发:提醒人们采取下一步行动


触发分为外部触发与内部触发

外部触发又分为:

付费型触发、回馈型触发、人际型触发、自主型触发。

内部触发

内部触发通过用户记忆存储中的各种关联来提醒他们采取下一步行动。

比如饿了的时候想起饿了么,想健身的时候想起keep


2、行动:人们在期待酬赏时的直接反应


福格行为模型可以用公式来呈现,即B=MAT。B代表行为,M代表动机,A代表能力,T代表触发。要想使人们完成特定的行为,动机、能力、触发这三样缺一不可。 否则,人们将无法跨过“行动线”,也就是说,不会实施某种行为。

比如说中午十一点你饿了想到饿了么订餐但是由于你的手机没电了定不了餐,中午要吃饭是动机,订餐想到叫饿了么外卖是触发,能够用手机订餐是能力,但是因为手机没有电 你就缺乏了相应的能力所以这个行为就没法完成。(当然你也能用朋友的手机订餐,这里只是举个例子)


福格总结了简洁性所包含的6个元素 ,即影响任务难易程度的6个要素,它们是:


  • 时间——完成这项活动所需的时间。

  • 金钱——从事这项活动所需的经济投入。

  • 体力——完成这项活动所需消耗的体力。

  • 脑力——从事这项活动所需消耗的脑力。

  • 社会偏差——他人对该项活动的接受度。

  • 非常规性——按照福格的定义,“该项活动与常规活动之间的匹配程度或矛盾程度”。


四种非常规的效应刺激动机:


  • 稀缺效应:(限量1000件)

  • 环境效应:(同一款啤酒在便利店和高档就把价格不一,但人们愿意为价格买单)

  • 锚定效应:(瑞幸咖啡定价24元的拿铁对标星巴克的32元拿铁)

  • 赠券效应:(利益进度吸引用户动机)


3多变的酬赏:满足用户的需求,激发使用欲


多变性会使大脑中的伏隔核更加活跃,并且会提升神经传递素多巴胺的含量,促使我们对酬赏产生迫切的渴望。 研究测试表明,当赌博者赢了钱,或是异性恋男性看到美女的图片时,大脑伏隔核中的多巴胺含量会上升。

多变的酬赏主要表现为三种形式:社交酬赏、猎物酬赏、自我酬赏。那些让我们欲罢不能的习惯养成类产品或多或少都利用了这几类酬赏。


社交酬赏

所谓社交酬赏,是指人们从产品中通过与他人的互动而获取的人际奖励。比如微信的点赞评论、站酷的推荐,用户能够获得社交的认同。


猎物酬赏

猎物酬赏,是指人们从产品中获得的具体资源或信息。


自我酬赏

所谓自我酬赏,是指人们从产品中体验到的操控感、成就感和终结感。


4、投入:通过用户对产品的投入,培养忠实用户


要想让用户产生心理联想并自动采取行动,首先必须让他们对产品有所投入。


用户对某件产品或某项服务投入的时间和精力越多,对该产品或服务就越重视。事实上,有充分证据表明,用户投入的多寡与其热爱某项事物的程度成正比。


1、文饰效应心理


(1)我们总是高估自己的劳动成果。

(2)我们总是尽力和过去保持行为一致。

(3)我们总是避免认知失调。


2、点滴投入


(1)储存价值

(2)内容

(3)数据资料

(4)关注者

(5)信誉

(6)技能


3、加载下一个触发


用户投入的同时也可以通过加载下一个触发的令自己重新开始上瘾循环,从而增加了进入上瘾循环的可能性。


十六、雅各布定律


雅各布定律(简称雅各布互联网用户体验法则),它指出如果用户已将大部分时间花费在某个网站上,那么他们会希望你的网站可以与那些他们已熟悉的网站一样拥有相似的使用模式。


我们在与新事物互动的过程中,用户使用的是以往的经验


对设计师来说,我们可以匹配用户的心智模型来改善体验。因此,用户可以轻松地将已有经验从一种产品或体验转移到另一种上,无需额外了解新系统的工作原理。

当设计师与用户的心智模型一致时,良好的用户体验就得以实现。


十七、KANO模型


KANO模型大家可以看看这个童鞋的总结很详细

https://www.zcool.com.cn/article/ZMTAyMjQ3Mg==.html


十八、古藤堡表图表法


人们在浏览页面或布局时视线趋于从左上角移动到右下角

古腾堡图表法说明我们观看页面的视线并不是镜面对称的,我们需要在设计中避免出现此类错误但绝不是墨守成规,将页面的 Logo放置在左上角而主体向右下角延伸,左下和右上作为视觉的盲点可以添加辅助元素


十九、尼尔森F型视觉模型


尼尔森F型视觉模型由 Jakob Nielsen于2006年提出

他指出,我们在第一次观看页面时,视线会呈 F的形状关注页面。
1.先从顶部开始从左到右水平移动。
2.目光再下移开始从左到右观察但是长度会相对短些。
3.以较短的长度向下扫视,形成一个 F形状,此时我们的阅读速度较慢,更为系统和条理性。


二十、序列效应


1.在列举信息时,排在最前和最后的元素,比排在中间的更容易让人记住。

2.对排在开头的信息产生加强的回想效果,称为:初始效应,人们有时候会把最前面的信息储存在长期记忆中。排在结尾的信息产生加强的回想效果,称为:时近效应。时近效应适用于听觉刺激。初始效应适用于视觉刺激。

3.在列举信息元素时,如果列举信息属于视觉性,那么把重要的信息放在最前面;如果是听觉性,就放在最后面。如果是用户必须做决定,并且是最后一项出现后马上做决定,那么就将想要用户做决定的信息放置最后,以便增加获选概率,否则放在最前面。

4. 应用例子:比如在很多app产品设计时,个人账户与设置基本放在页面的最前面和最后面,这体现着产品信息的序列关系,重要次序,所以在进行设计时,可以在信息排序上遵循序列效应。 当然还有一些产品想对用户进行引导操作,也可以利用这个法则,将信息放置最前或最后。

转自:站酷-YELLOW_J 

用户不信任你做的产品/界面?不如试试这5招

ui设计分享达人




前言:


什么是产品的信任感??


指:基于产品为用户提供‘可靠服务、价值依赖’的一种情感体验。


这种体验不仅影响着用户黏性的强弱、业务目标的实现,也影响着不同生命周期下给产品给来的价值。如图:



而在产品与用户间建立信任感的过程中,我惊奇地发现有3个因素贯穿始终:理念 > 内容 > 表现。


‘基于什么样的理念,向用户传递什么内容,并且怎么表现。’



所以,未来3篇文章主要围绕‘信任感的打造’,希望能系统性地认识它,挖掘更多工作上可实用的小技巧。


今天先分享第一篇:信任感的理念层



信任的本质:是让人觉得真诚、可靠、放心等。换句话说,它就是一种‘为用户着想,建立产品温度’的理念/方向,从而引导后续的内容都围绕该理念而进行。


那么,如何才能为用户着想,慢慢建立起对产品的信任感呢??


既然为用户着想,那么可以试着从‘减少用户的投入成本’切入。



Part1:减少健康投入


健康投入,指用户使用我们的产品,可能会对身体上带来直接或潜在的负担/影响。比如视频看久了,眼睛就会感到酸痛。


针对这些负担与影响进行的一些关怀提示,可以用户提前消除、减轻这些痛苦,拉进与用户间的距离。


不同产品类型拥有专有的关怀点,所以比较通用的主要有5个:使用时长、使用姿势、夜间休息、夜间护眼、音量大小。



a.使用时长提示:


除纯工具类产品之外,大部分用户在产品上都有一定的使用时长(尤其是内容消费类产品),对于‘连续使用N分钟、或者满足特定时长’的用户,可针对该时长进行休息提示。


如有道精品课,在用户观看课程满40分钟 时有个时长提醒:




b.夜深关怀提示:


深夜本身是一个休息的时间,但还是有大量的‘夜猫子’根本停不下来。不管是主动性的娱乐消费,还是被动性的信息/工作处理,都将手机‘进行到底’。


此时对于‘深夜忙碌’中的用户,夜间的关怀就是一个切入点:比如企业微信,会在深夜启动页上展示 ‘夜深了,xxx’的文案提示。



虽然只是简单的一句话,但还是能感受到鹅厂对员工的关怀。


而且不管是C端还是B端,只要有用户在深夜使用产品的可能,都可针对性地给予关怀设计,体现产品的‘人性’。




c.夜间护眼提示:


夜晚周围的光线会变得幽暗,部分手机屏幕会自动变亮。时间一长会严重刺激用户双眼,并造成视觉疲劳(尤其是小学生群体)。


此时对用户进行护眼提示,不失为一个用户关怀点。


再如有道精品课:




d.使用姿势提示:


我们日常都会将手机横过来看视频、看八卦。而且相信各位都有过这样的经历:



当手机长期处于某个屏幕状态+重力倾向时,用户难免会出现手酸脖痛的情况。


此时进行使用姿势的纠正提醒,亦能起到关心用户的效果,从而建立良好的产品印象。


还是以有道精品课为例:



e.音量提示:


这个大伙都知道,过大的音量会影响耳朵听力。一般出现在各种音频、视频的产品与功能中。





Part2:减少金钱投入


没有人不会在意自己的钱包(除非你是对钱不感兴趣...),金钱上的收入与支出很大程度上会影响 人们对某事物的看法。


产品也是如此,若能帮用户减少金钱上的支出,或者带来真实收入。不仅能极大提升用户对你的信任度与黏性,还能增加产品的竞争力。


比如高德地图的打车功能,能显示所有车型的价格预览,帮助用户选择所需价格的车型。



无论是商品优惠券,还是返利。



只要能帮助用户钱包上的‘节源’或‘开流’,都能引发用户的信任感,从而信赖产品。




Part3:减少情感投入


情感投入,是指用户基于内心活动和情绪感受,对某事物所表现出来的一种想法。


这种想法制约着 用户是否接受我们的产品服务。一般体现在:安全性、性价比、真实性 3个方面。


a.安全性 - 放不放心:


人们面对某事物 可能会带来的伤害/损失时,都会有一种本能的“警惕感”


就拿此次疫情来说,对于有‘出差住房’诉求的用户来说,‘住的安全’是重中之重。因此寻找一家‘无感染、每日消毒、卫生干净’的安全酒店,可以减低用户选择我们的警惕感。



而在酒店列表中,带有‘严格消毒’、‘健康守护’等安全标签的酒店,会给人带来一种安全、放心、信赖的心理效应,从而提升该酒店的转化率。




b.性价比 - 值不值得


性价比是人们衡量‘付出成本与回报价值’间的一种决策依据,没有谁会喜欢付出小于回报的事物。


而为了让用户降低这种决策依据,除了自我服务/实力的展示外,往往需要一种“参照物”来凸显性价比。


如美团上的‘满减神器’,通过不同的食物/价钱间的对比,让用户买到最具性价比的食物。



而“参照物” 的形式多种多样,不管是竞品数据。



老版本也属于一种竞品


还是是各种优惠信息、额外礼物/礼包、售后服务等等。



目的都是通过该参照物,向用户传递一种‘划算’、‘值得’的心理效应。



c.真实性 - 真不真实:


光是性价比高还只是片面依据,至于内容是否属实,成为了我们与用户建立信任感 中最重要的影响因素。因为没有人喜欢被骗、喜欢虚假事物。


而真实性的建立,在‘电商领域’应该被运用得最多。如大牌背书、证书授权、专家介绍、明星代言、官方保证、销量成绩、用户反馈...等等。




展示自己的真实、最具实力的一面即可,别过度吹嘘与包装,用户又不傻。




Part4:减少脑力投入


人们一向不喜欢复杂的东西,除了不易理解外,更担心因为自己的理解错误,会给带来意外的损失。


帮助用户减少记忆负荷、顺畅完成操作目标,是每个产品必不可少的设计点。


如微信转账,输入数字时会检测对应的数额,减去用户边输入 边计算“这是多少钱”的脑力投入。



而且对比支付宝的转账,微信这点确实做到了‘洞察用户需求’。



再如账号注册,提供‘剩余步骤’能让用户了解 当前处于哪一步、预测完成整个操作还需多久。





Part5:减少体力投入


除了记忆负荷,‘操作负荷’的减少也是一种‘为用户着想‘的方式。我们身边也存在太多这方面的例子:


如手机上,如淘宝的快链弹窗、支付宝的转账提示,都是前置用户的目标,缩短操作流程



如电脑上,如Mac会保存耳机音量。


下次插入耳机时,会将扬声时的音量,自动调整至上次耳机插入时 所记录的音量。这样就免去了重新调整音量的操作。


以网易云音乐为例:注意 扬声时和耳机插入后 的音量变化.



这些都是帮助用户快速使用,从而减少体力操作的方式。除了前置用户目标、保存记录 外,常见的还有:给予默认值、自动选择/处理、多选与批量等等。



总结:


以上就是关于理念篇的内容,让今后的内容设计有了明确的方向。下面是走查表,平时设计功能、制作界面的时候可以看看,增加产品的温度。领取方式:公众号回复【信任1】


转自:ui中国-

语音交互中的“等待体验”研究

ui设计分享达人

语音交互是最自然的人机交互方式,它极大地降低了人们与机器交互时的学习成本,已成为非常重要的人机交互方式。


回顾人机交互发展史,人类先后经历了基于命令行的CLI 时代,基于鼠标键盘的GUI时代,基于触摸的初级NUI时代。后面每一个阶段比前一个阶段更自然,学习成本更低,综合效率更高。

 


进入AI时代,人工智能给机器带来三种能力:感知能力、认知能力、自然语言输出能力。感知能力使机器能听得懂人类语言,认知能力使机器能思考如何回答人类问题,自然语言输出能力使机器可以像人类一样表达——三种能力的综合运用将人机交互带入语音交互阶段。语音交互是最自然的人机交互方式,它极大地降低了人们与机器交互时的学习成本,将人机交互综合效率带上新的台阶,已成为非常重要的人机交互方式。

“等待体验”——语音交互体验的三分之一

生活中人与人的对话场景,对话是由“向对方说出一句话”、“等待对方回复”、“对方给出回复”三个阶段不断循环构成。其中“等待对方回复”是对话体验的“三分之一”,会对回复的满意度造成直接影响。在等待回复阶段,如果对方处于认真思考的状态,会让我们觉得被重视;然而,如果在等待过程中对方的注意力不在对话本身,即便对方给出的回复再好,我们也会心存疑虑。



对应到人机语音交互中的三个部分——“输入体验”、“等待体验”、“回复体验”,“等待体验”同样处于整个体验循环链的中间环节,在语音交互体验中起到了承上启下的重要作用。但是,关于语音交互中的“等待体验”在行业尚未被系统的研究,依旧处于模糊状态。

 

1. 响应时间一定是越短越好吗?

数字性能管理平台Dynatrace对用户浏览网页的行为进行了研究,发现当网页加载速度提升0.5秒,可促进用户在网站的行为转化核心数据提升10%。因此,在网页设计和App设计中,尽量缩短等待时间是产品设计的不懈追求。

 

不同于基于视觉的交互,语音交互天然附带情感属性。然而,情感的体验是复杂的,它不只受效率这个单一变量的控制。大多数情况下,在生活中人与人对话时,一个过快的回答会给用户带来轻浮感和抢话感,而一个过慢的回答会给用户带来迟缓感和愚钝感。


那么,在语音交互中,究竟什么样的响应时间能有最佳的体验呢?响应时间的体验趋势是怎样的呢?

 

2. 等待体验受哪些变量的影响?
在视觉设计领域,当设计页面的loading态时,为降低用户的跳出率,设计师时常会通过给出进度条,或采用趣味性的情感化设计来消除用户的不安情绪。

 

但是在语音交互领域,语音的承载体是无形的,或不确定形态的,我们甚至没有承载loading态的界面。在这种情况下等待体验又受哪些变量影响呢?影响的程度怎样呢?

 

综上,可以说在语音交互领域,等待体验虽然重要,但目前仍是“一团迷雾”。鉴于此,我们以目前语音交互的主要载体——智能音箱产品为例,对AI产品中的等待体验问题进行专题研究。

 

二、智能音箱的等待体验研究

目前的智能音箱,主要采用先语音唤醒后输入指令的语音交互流程。鉴于此,我们可以将智能音箱的使用过程分为两个主要阶段:

1)唤醒阶段:用户通过指定的唤醒词将音箱从等待态转换为就绪态,音箱被唤醒后才可以接收用户的语音指令。

2)用户请求及反馈阶段:用户给出语音指令内容以及智能音箱反馈结果满足用户的需求。

 


针对这两个阶段,我们先后通过以下三个实验进行研究。

实验一:唤醒阶段的响应时间对等待体验的影响;

实验二:用户请求及反馈阶段的响应时间对等待体验的影响;

实验三:视觉、声音等不同反馈方式对等待体验的影响。

下面我们对每个实验的结论进行逐一详述:

实验一:唤醒阶段的响应时间对等待体验的影响

为了全面考察唤醒阶段各种因素对等待体验的影响,在实验中,我们为用户提供了不同唤醒响应时间和不同唤醒反馈方式的智能音箱。用户完成实验任务后,需要对音箱的唤醒响应速度进行评价(5点量表:太快了,接受不了;有点快,能够接受;刚刚好;有点慢,能够接受;太慢了,接受不了)。



实验一的结果表明最佳的唤醒响应时间与唤醒反馈方式有关,不同唤醒反馈方式下,最佳响应时间不同:

1)当唤醒反馈为"灯光"反馈时,唤醒响应速度越快越好,在200ms时,用户响应舒适度最高(对响应时间评价为刚刚好的用户比例),73%的用户对速度满意。

2)当唤醒反馈为"灯光+音效"时,唤醒响应速度的舒适时间为300ms左右,76%的用户对速度满意。

3)当唤醒反馈为"灯光+人声"时,唤醒响应速度的舒适时间为500ms左右,74%的用户对速度满意。

(注意:本次实验设置了市面上主流的三种唤醒反馈方式:灯光、灯光+音效、灯光+人声,以给不同反馈情况的响应时间感受作参考,但对最优反馈方式,除了响应时间还受其他因素影响,将另着篇章探讨。)



实验二:用户请求及反馈阶段响应时间对等待体验的影响

 

由于用户请求及反馈阶段的响应在技术实现和用户预期上,与唤醒阶段的响应存在差异,因此我们通过第二个实验对用户请求及反馈阶段的最佳响应时间范围进行研究。在实验中,我们为用户提供了不同响应时间设置的智能音箱。



实验二的主要研究发现:

1)1250ms以内是用户认为响应速度较优的区间,其中650ms为最佳体验值。在450ms时,少量用户觉得响应速度太快了,用户会感觉到紧迫感和压力,难以接受。

2)在1450ms时,有53%的用户开始感觉响应有延时,但仍能够接受。

3)从2150ms开始,有20%的用户认为音箱响应太慢,不能够接受。我们认为20%的用户不满意,已经不足以被称为一个优秀的产品。



实验三:视觉、声音等不同反馈方式对等待体验的影响

由于目前市场上的智能音箱在请求反馈阶段的响应时间普遍在1.5秒以上,并没有达到实验二研究的理想响应区间。因此,我们通过实验三进一步研究反馈方式设计对用户响应速度感知的影响,我们为用户提供了五组具有不同反馈方式设计的方案。



在实验三的五组方案中,每组方案分别进行了不同响应时间设置。



实验三的主要研究发现,不同反馈方式设计会影响人们对音箱响应速度的感知



1)1250ms以内,方案D感受较差,人声反馈会产生抢话的感受,部分用户认为音箱响应太快。



2)1350ms到2150ms,方案D、E感知舒适的用户比例较高,加入人声/音效后,如方案D的语音应答“好的”,有助于缓解用户延迟感受,提升速度感知体验。



3)在3150ms及以上的响应时间,响应方式设计对缓解延时的作用已经不明显,应该尽量避免此类情况发生。


此外,实验三还发现响应速度预期与用户性别、任务类型有关。与男性相比,女性用户对响应时间容忍度更低,她们最长在音箱无反馈时可以容忍的平均响应时间长度低于男性,即她们希望在更短的时间内得到音箱的响应反馈。



与音乐类、问答类等任务相比,用户对控制类任务的响应时间容忍度更低,用户希望在控制类任务中有更加及时的响应反馈。



三、小结

本文针对语音交互中的等待体验进行了讨论,并以智能音箱为例,重点对唤醒阶段和请求反馈阶段的响应时间和反馈方式进行了人类工效学实验研究。由于实验设定的条件和样本数量等限制因素,实验研究结论可能不能代表所有智能音箱用户在家居环境的全部感受,但希望通过我们的研究和探索,可以指导人工智能语音对话产品响应时间和反馈方式的设计,帮助打造自然和的语音对话体验。

 转自:站酷-DUBEST

设计师要懂的“产品导流”背后知识点。

ui设计分享达人

设计师不仅要低头画图,也要了解“图”背后的逻辑和需求本质 。嗯,下面用直白的语言跟大家聊一波相关知识点。




说到产品导流,大家都不陌生。



身为设计师,应该经常听到产品同学提需求:“在这里给XX功能加个入口吧”,“这个宣传新产品的banner可以再大一些吗”,“这个场景可以宣传下我们的新功能诶”…


很多设计师在不了解背景的情况下往往内心是排斥的,心想怎么老是在犄角旮旯里加这么多小广告啊,都不关心用户体验的嘛,balabala...



但是有谁在吐槽时,深究其背后的原因呢,举起小爪子让大牙康康。比如:什么是产品导流?为什么需要产品导流?它有哪些的形式?如何做效果好又能兼顾产品体验呢?



最近正好在搞相关的事情,所以撸一篇文章,分享一波相关思考。





什么是产品导流? 



“产品导流”指的是:一款产品采用某种形式,增加对另一款产品/功能的曝光,使自己的用户群体(流量)去使用或探索另一款产品/功能。



眉头一紧,感觉上面的描述有点拗口,善良的牙尝试着用大白话,把导流和被导流的关系,分为两种形式解释下:1.父子关系;2.兄弟关系。

1.父子关系


画风是:“爸爸,大腿借我一抱吧”,比如:“抖音”里增加“多闪”入口,“微信”里增加“微视”入口,通过自家体量大的产品(爸爸)给自己导流。



2.兄弟关系


画风是:“外面环境恶劣,是好兄弟,就互导一下吧”,比如:京东的会员可以享受爱奇艺的会员福利,同辈之间互相导流。



所以,这么说就好理解什么是产品导流,和它们之间的关系了吧。






产品为什么需要导流? 


产品之间导流的目的,大致分为两种:1.获得新增;2.企业生态。




1.获得新增



试想你费劲巴拉的搞了个新产品,没人知道,也没人来用,就算你产品做的再妖娆,是不是也白搭,更不用说后续的商业变现之类的。


所以,这个时候如果你有一个相对成熟的产品(爸爸)大腿,让它给你导流,实现一波冷启动,是顺利迈过第一个坎儿的手段。


当然,在目前激烈的竞争环境下,不仅是新产品需要导流,扩大规模和获得新增流量,是每一个互联网企业里产品或运营同学OKR中必不可少且另他们头秃的一项指标。



所以,不管是新产品,还是相对成熟的产品,都需要通过导流的手段,来获得新增用户。





2.企业生态


“产品导流”除了为了获得新增,还有就是为了企业生态的体验闭环。


做成一款产品的公司很牛逼,但是如果能够持续做出一系列牛逼产品的公司,一定有成功的基因,或者有一套做事儿的逻辑。


比如:亚马逊的飞轮效应,要想形成飞轮,打造自己的生态,业务上就得有自己的闭环,并且闭环上的每一个步骤都可以为其它步骤助力,其次就是以第一个飞轮作为根据地,拉动周边其它业务,形成第二个或者更大的飞轮。


这个时候,就需要各个业务线之间的互通及联动(互相导流)了。






比如,阿里也是在打造自己的生态,产品之间相互赋能和联动,一旦建立起来这些基础设施后,壁垒和护城河就非常坚固。



整体来看,“产品导流”不仅有助于新产品获得冷启动,还有助于相对成熟的产品扩大规模,同时从整个企业生态来看,矩阵产品的互相导流,协同发挥优势,也有利于打造体验闭环,建立企业壁垒。





产品导流的形式有哪些? 



目前,市面上导流形式大致有以下几种:1.场景化导流;2.会员制捆绑;3.固定入口扶持;4.广告位推荐。


1.场景化导流


场景化导流,翻译成大白话就是,让导流的过程更加无缝衔接。


这种做法,能兼顾用户体验,同时对导流量也更有利,一般用于“功能”层面的互通。比如,用户正好需要XX产品或功能,你见缝插针的增加导流入口,同时功能和设计元素也跟母产品保持一致,这样用户不会觉得干扰或反感。


类似这种做法的产品比如:QQ&微云,抖音&剪映;视频号&公众号...


QQ&微云


我们用QQ聊天时,好友之间总会有一些分享文件的行为,有“分享”就有“接收”,有“接收”就有“保存”的诉求,在这种场景下,QQ聊天页面里用户长按当前“文件”,就可以将文件保存到“微云”上。






除此之外,QQ首页点击左上角的侧边栏,能看到一列与“我”相关的功能入口,其中有一项是“我的文件”,点击进去后就能看到“我”在QQ里消费过的历史文件。


同时还有“微云”小程序的入口,点击直接跳转至微云小程序(做的很服帖,跟自体脂肪填充似的,导流过程不会让用户感到突兀)。




除此之外,微云作为基础的云存储能力,也在跟腾讯系的QQ音乐互通,满足用户将下载的歌曲保存到“微云”。





这么做,不仅满足了QQ音乐用户的存储诉求,还提升了QQ音乐的登录率(用户想要使用音乐网盘,必须先登录),同时增加了QQ音乐用户粘性(用户一旦在一款产品上存下自己的东西,就会存在迁移成本),最后还为微云带来了新增用户(更多QQ的用户使用微云进行存储),扩大其规模。


这样的互通/导流手段,就实现了产品间1+1大于2的效果。





抖音&剪映


刷抖音的兄弟们应该经常见很多视频下面有一个小标签,叫“剪映-抖音出品”(意味着博主的那条短视频是用剪映做的)。


很多人看到好玩好看新奇的短视频,都会觉得真香我也要剪同款,因此抖音就是这种恰到好处的投喂给你,点击标签,直接跳转到下载页,如果已经安装了的用户,可以直接进行剪同款。




抖音不仅送你出去,还负责接你回来,一条龙服务给你安排(导)的明明白白的。


比如,当你剪辑完成后,就引导你回抖音里分享,毕竟他们不希望你剪完之后保存到本地然后美滋滋去竞品(快手之类的)分享吧。





他们的目的就是,不管你怎么折腾,也逃不出我大字节的手掌。


包括,最近的视频号,发完视频号还能附带公众号的链接,高频带低频,通过公域流量,帮助作者往私域导流(顺便做个广告,快去关注我的视频号:大牙兄,哈哈哈)。





所以微信现在的导流方式是:视频号能够链公众号,公众号能够挂小程序,小程序又能开直播,直播又能去变现。


整体来看,场景化的进行导流,更适合“功能”层面的互通,满足用户和企业的诉求,还平衡了产品体验,相对更加丝滑。





2.会员制捆绑


会员制捆绑,已经成为互联网常见导流+变现的方式了,指的就是用户在你这买了会员,在别的合作产品里也享有它们的特权福利。利用用户“爱占小便宜”的心理,产品间互相导流。


比如我们常见的方式有:88会员、联合会员...

88会员


开过88会员的同学举个爪!好,放下吧,反正我也看不到。


88会员算是阿里生态体系的重要布局了,也就是你开通了88会员,阿里系的很多产品你可以劈着叉去用,而且很划算。


比如,饿了么会员每年108元,虾米每年128元,优酷每年也差不多180元,还不算其它的,这些价格在用户心中已经是锚定价格,加到一起怎么着也大1000了吧,跟88元一比,稳赚不赔啊!






我们来看看88会员里包含什么,各种阿里系的七大姑八大姨的产品都包含进去了,从吃饭、购物、娱乐、旅行再到看病,生活里的方方面面都包含了。





所以,我身边的人开了88会员后,画风是这样的:明明想用QQ音乐听歌呢,不!我是88会员!我要去用虾米!明明想用美团点个外卖呢,不!我要去饿了么!明明我想去爱奇艺看看视频呢,不!我要去优酷看!(不过他们如果想看“淡黄色长裙蓬松的头发”还是得去爱奇艺)。


可以看出,阿里用这套会员体系,把用户死死的框在(导流)自己的产品矩阵中了,产品群们被自己爸爸carry的明明白白的。





联合会员


联合会员跟上面说的88会员有点类似了,只是88是自己企业内产品的互相导流,而很多联合会员是跨公司,跨界整合资源。 

比如,京东的PLUS京典卡,就是跨公司跟别人合作,有和腾讯视频、酷狗音乐、喜马拉雅、携程、爱奇艺的联合会员。 





其实也能看出,京东和其它产品这么搞,也是对阿里系的反击,没有爸爸,只能兄弟之间互相导流,抱团取暖,一致对外了。



3.固定入口扶持


固定入口扶持,一般出现在规模较大的平台级产品上,它们利用自己的流量优势,在固定位置给自己的子孙/兄弟产品们导流。


扶持下一代,努力做到子又生孙,孙又生子,子子孙孙无穷尽也。



比如:淘宝、支付宝、美团,在首页金刚位给自己企业相关产品导流,同时也补足/丰富自己产品的其它场景。






比如,各家的小程序,也是相对固定的入口给自己的产品或第三方产品进行导流,完善自己的产品生态。






4.广告位推荐


广告位推荐的导流方式应该是大家非常熟悉的了,它区别于上面的导流方式的核心点在于一般是产品/活动的介绍,引导安装之类的,形式大致分为:闪屏、 banner、角标、feed流...




闪屏

闪屏指的是用户在使用产品时,打开的第一个启动页。


用它进行导流的优点就是全屏沉浸展示,用户的目光就聚焦到这里了,但缺点是:时间短,如果在短时间内传达不清晰的话,很容易一闪而过,钱就白花了。



所以,闪屏的导流,最好找重叠用户较高的产品,比如,在汽车之家闪屏投个刮胡刀啊,在亲宝宝闪屏投奶粉啊之类的,用户在短时间内好接受好理解。


投放越精准,对产品体验和对广告主的导流效果越好。





角标

角标导流这种形式,在电商类平台搞活动的时候经常见,各种小角标纷纷出来拉客,角标的着陆页一般都是活动H5类型的居多。




这种形式的优点在于能够一直常驻,不像闪屏,闪一下就没了,它只要用户不手动关闭就一直在这杵着。


但对于设计师的挑战就是,如何在小小的区域里,把被导流的产品/活动核心利益点传递清楚,吸引用户点击。

而且,这种形式也要谨慎使用,如果乱八七糟的飚小角标也挺伤害体验的。





Banner


Banner位的导流大家更常见了,一般都是自己家产品/业务,夹杂着第三方广告推广,无限轮播着进行导流,大家都太熟悉了,我就不啰嗦的说了。





Feed流


一般资讯类或者社区类产品,喜欢用这种方式进行导流,因为用户在其产品上的核心操作就是撸Feed。


所以,撸着撸着给用户投喂一个通过算法推荐的广告,然后再把广告包装成跟Feed内容很相近的设计,吸引(pian)用户点进去,从而进行导流。


比如: 知乎、最右、百度、头条 ...




不得不说第二张“最右”的推荐内容,让我不禁抚摸了下自己的胡子。

不过除了最右给我推“大胸妹子”,百度给我推“游戏”,头条给我推“汽车”,难道在他们的算法中,我是个油腻中年男???


看来他们的人工还不够智能,机器还得再学习学习,大牙对你萌hin失望。





总结  


总的来说,“产品导流”不仅有助于新产品获得冷启动,还有助于相对成熟的产品扩大规模,同时从整个企业生态来看,矩阵产品的互相导流,协同发挥优势,也有利于打造体验闭环,建立企业壁垒。


形式大致分为:1.场景化导流,无缝衔接式的体验,让用户在产品功能间丝滑的流转;2.会员制捆绑,低价获得跨产品福利,利用用户占小便宜的心理跨界导流;3.固定入口扶持,平台型产品常用手段,丰富自己产品场景又能给自己小弟带流量;4.广告位推荐,灵活可配形式多变的导流方式(闪屏、 banner、角标、feed流)但搞不好很伤用户体验。



但是,不管什么导流形式,导进来的用户,只有看到满足他们诉求和预期的着陆页才是最关键的,不然就算给你再大的流量入口,用户搞不明白该走还是会走。


同时,也不能为了导流而不分场景的尬导,这样很容易伤害原有产品的用户体验,捡了芝麻,丢了西瓜。

转自:站酷-苏大牙


日历

链接

个人资料

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

存档