首页

产品设计细节剖析

ui设计分享达人

前言


在设计领域,相较于平淡无奇毫无重点的界面设计,其具有良好视觉层次结构的设计更受用户青睐。在设计过程中可能会纠结于各种可能性,比如是让文字变大还是变小,或者增加(或减少)元素周围的留白,颜色是该深一点还是浅一点等。其实不管何种呈现方式,设计出美观、高效和可用的UI界面需花费很长的时间,需经过反复的修改,最终才能打磨出令用户满意的产品,在满足公司战略及功能需求的情况下,其修改和优化还可以从细节上入手。





2021 | 第03篇分享目录(031~045


031.「支付宝」避免超额消费的花呗闹钟

032.「滴滴出行」关怀模式-老年人的出行福利

033.「爱奇艺」搜索分类-让结果更精准

034.「美团」突出折扣金额-引起用户贪便宜心理

035.「饿了么」订单备注提示-为防疫工作贡献一份力量

036.「快手」不打断视频播放的评论功能

037.「微博」行为预判-有效提高评论的完成效率

038.「淘宝」搜索结果-你试过长按商品卡片吗?

039.「boss直聘」双重toast弹窗-快速感知页面类型/内容

040.「饿了么」店铺营销文案-看“我”就把“我”吃掉

041.「微信」你使用过图片备注吗?

042.「即刻」排版设置-帮你缓解视觉疲劳

043.「拼多多」通过搜索关键词建立情感链接

044.「微信读书」替身书架-帮你瞒天过海

045.「网易云音乐」视频歌单-边听边看更便捷





031.「支付宝」避免超额消费的花呗闹钟


产品体验:

在支付宝花呗的消费闹钟功能里,可设置每个月的消费限额,当花呗支付使用超额后,会收到对应的消息提醒。

设计思考:

随着互联网的迅速发展,人们生活水平提高的同时、消费水平也越来越高。各种消费信贷产品如雨后春笋一样冒出来。花呗自出现后就深受人们的喜爱,首先是便捷的支付方式;其次花呗的申请门槛比较低,不论是学生,还是无业游民或其他没有稳定收入的,只要芝麻信用分达到650分以上就能开通,在拥有额度后,就可以在支持花呗支付的平台提前预支消费,到次月再还款,因此花呗的便利性就完全体现出来了。但总是有一部分用户在每月出账单需要还款时才发现,消费的额度远远高于自己的收入,甚至无力偿还。

花呗新推出的消费闹钟功能,对于花钱没节制的用户来说,真的特别好用。在消费闹钟里设置提醒金额,点击确定设置即可,当使用金额超过用户设置的金额,将会收到提醒消息。此功能既可以减少用户超额花费的可能性,也能有效避免用户因无力偿还账单而给平台带来的经济损失,可谓是一举两得。





032.「滴滴出行」关怀模式-老年人的出行福利


产品体验:

在滴滴出行的设置中开启关怀模式,系统会将字体放大且展示功能极简的打车模式页面,方便老年人使用;

设计思考:

滴滴出行主要面对的是年轻用户群体,因涉及到支付宝、地图等线上线下功能的结合,操作流程复杂且使用起来学习成本较高。在当前移动互联网时代下,老年人如何能真切感受到现代智能科技所带来的便捷、人文关怀和尊重,是如今的移动平台所要解决的问题。

滴滴出行的关怀模式,就是专为方便老年人出行而推出的。老年用户在APP设置中心开启后,可快速进行一键下单操作流程。关怀模式支持大号字体显示,能提前设置五个常用地址,方便在下单时进行一键操作,简化了下单流程及删减了部分页面内容。不管是大号字体还是精简流程,都便于视力不好的老年用户叫车出行,不仅有效降低了在线叫车操作的复杂程度,也能缓解老年用户在叫车过程中出现的不确定性和焦虑感,提升了出行效率。





033.「爱奇艺」搜索分类-让结果更精准


产品体验:

在爱奇艺使用搜索时,展开搜索框前面的类型,可选择全网、图搜剧和词搜剧,以更精确的匹配搜索结果。

设计思考:

很多设计师认为搜索很简单,设计一个搜索框加搜索图标放在主页顶部就搞定 了,然而并非如此,需要站在用户的角度考虑搜索前、搜索中、搜索后各个阶段的用户体验。搜索作为一个功能入口,除了简单的呈现及引导方式之外,搜索结果也是也是非常重要的,用户的搜索操作不是目的,结果的精准度及视觉传达才是重点。大部分搜索的呈现就是提供搜索框,用户一上场就开始码字,然后在海量的搜索结果中去找到自己想要的内容。然而用户并没有什么耐心,不管是花大把的时间查找结果还是不停的更换关键词重来,都有可以让其失去耐性,转而扭头就走,导致平台的用户流失。

爱奇艺APP在搜索功能中进行了分类,比起常见的全局搜索其结果更加精准,通过全网、图搜或词搜类型改变搜索范围,便于用户在最短的时间内找到自己想要的结果。可以想象,当我们在百度查找需要的内容时,面对几万乃至几十万的结果匹配时,翻过几页后,要么放弃、要么换掉关键词。爱奇艺的分类型搜索缩小了查找范围,降低用户的时间成本,还能提高对用户的信任度,以增加其使用粘性。





034.「美团」突出折扣金额-引起用户贪便宜心理


产品体验:

在美团的酒店列表价格区域,除了有划掉的原价和优惠之后的价格外,还特别突出展示了优惠的实际金额,非常显眼,以彰显其优惠的力度。

设计思考:

商家们都知道,定价策略是营销中一个十分关键的组成部分,是影响交易成败的关键因素,但也难以确定,既要考虑成本的补偿,又要考虑消费者对价格的接受能力。纵然如此,当商家们把最低的价格摆在消费者面前时,才发现“理想很丰满,现实却骨感”,总是有那么一群人在感性的消费,即使碰到折扣后的价格依然过高,但只要优惠力度够大,就感觉够刺激,常规剁手。

一路走来才发现,唯有套路得人心,例如:拼多多的砍价,砍到手后低价购买,算是平台补偿的免费宣传费;美团的高额满减,是在提高原价数倍之后才有的折扣;线下商家撤离前的亏本清货,可能是被选剩下的瑕疵产品......。在这些案例中,如果商家直接把折扣后的实际价格摆在那里,部分用户根本不屑一顾。

美团的酒店列表,在价格区域除了常规的原价、现价之外,还突出展示已减金额,抛开现价不说,如果优惠的金额给力,足以引起用户的注意。这是企业惯用的利益引诱手段,屡试不爽, 通过下单就让利的方式来促进商品的转化,引起用户的贪便宜心理,只要优惠的数值够高,就能引起用户的注意力和消费欲望,将用户的思维转换至优惠力度方面,而忽略市场价格及性价比,会误以为商家优惠的金额即自己赚到的错觉,促使用户下单完成转化。





035.「饿了么」订单备注提示-为防疫工作贡献一份力量


产品体验:

在饿了么确认订单页面,为了有效的控制疫情传播,顶部会提示“为了减少接触,降低风险,请修改下方备注”,进入备注页面,输入框的占位符和快捷输入都优先展示避免接触取餐的方法参考。

设计思考:

疫情爆发期间可谓是人心惶惶,经过所有人长时间的有效配合及预防,终于得到了缓解。疫情控制之后,人们对病毒的防范意识有所增加,通过自律做到尽量减少与他人的接触,但在忙到的生活和工作下,很多情况总是不可避免,比如病毒防范意识降低而造成无意识的接触、工作中的外卖取餐和寄收快递,都会造成额外的接触。

在饿了么APP上订餐下单时,系统会给予明显的免接触防疫提醒,在订单的备注中优先展示免接触取餐方式参考,如挂门把手、放门口等,给病毒防范意识降低的用户敲响了警钟,提醒用户尽量使用无接触方式取餐,不仅能降低病毒在人与人之间的相互传播,还为防疫工作贡献了一份力量。





036.「快手」不打断视频播放的评论功能


产品体验:

在快手观看短视频,打开评论,页面从底部弹出,视频继续以播放状态等比例缩小置顶,编辑评论不影响播放。

设计思考:

当我们在线上看到一件事物,有互动需求和强烈的表达需求时,此时评论功能不仅能满足用户需求,还能增加参与感,对增加用户黏性大有作用。评论作为一个重要级的功能存在,在需要时会打断用户的当前浏览或操作,通过跳转页面或弹窗来帮助用户解决互动需求,跟原本的页面是一个上下级的关系。

在快手APP看短视频,无论是编辑还是浏览评论都可以齐头并进。触发评论后,页面从底部向上弹出,视频的页面占比范围会以播放状态等比例缩小并置顶,类似我们在看电影时的横屏和竖屏,视频观看及评论两不误。这种交互方式在满足用户下一个需求时,并不中断上一步的需求,避免原本看视频的思路被打断,有助于用户跟随视频播放的思路即兴发挥评论,这也是一个容易设计师被忽视的好功能。





037.「微博」行为预判-有效提高评论的完成效率


产品体验:

当我们在微博列表中的某条信息处停留5秒并无任何操作时,此条微博下方会自动弹出评论框,系统通过行为预判感知用户对该内容感兴趣,引导用户去发表自己的想法。

设计思考:

评论在很多应用中都有着举足轻重的作用,尤其像微博这样的大型并开放式的信息平台,更有着弘扬先进的思想和精神,揭露和抨击腐败现象及不正之风,对各种不良现象形成强大的舆论压力,实现有效的监督。即便是网络水军、键盘侠(恶意重伤除外,毕竟大部分用户还是理性的“喷子”),当风声一边倒时,都会逐渐走向真理化。在我们所接触的应用中,评论操作的方式都是通过用户的手动触发。

微博编辑评论除了用户手动触发之外,其还有一种非常人性化的系统感知触发。当用户在列表中的停留5秒且没有任何操作时,系统通过行为预判感知用户可能对这条信息感兴趣,即自动弹出评论框,引导用户操作,能增加产品跟用户之间的交流互动。微博的行为预判是引导用户、缩短用户行为路径的有效设计手段,在用户没有作出行动触发的情况下进行理解用户可能会出现的操作行为,减少冗余步骤,简化操作流程,运用最少的路径和行为来达成用户目标,有效提高评论的完成效率。





038.「淘宝」搜索结果-你试过长按商品卡片吗?


产品体验:

在淘宝的商品搜索结果里列表,长按某个商品卡片区域,会弹出该商品多种类型的tab,有相似、同款、同品牌和同店,便于用户更精准快速找到自己需要的商品。

设计思考:

对于有目标需求但不是特别明确的用户来说,关键词搜索无疑是最好用的一个功能,当面对海量的搜索结果,可能会眼花缭乱,找到喜欢的商品时,要么销售量太低、要么价格过高,反正总有有那么一方面自己不满意,不得已,只能把当前商品的精准关键词经过搜索框再来一遍。

在淘宝APP就无需这么麻烦。商品的搜索结果列表有个隐藏的功能,只需长按商品卡片区域,就会弹出相似款、同款、同品牌、同店铺的类型tab栏,方便用户能够快速根据自身需求筛选比价,可免去不必要的麻烦操作,节省大量时间,如果你还未使用过此隐藏的交互功能,就赶紧试一试吧。





039.「boss直聘」双重toast弹窗-快速感知页面类型/内容


产品体验:

boss直聘顶部的职位tab在切换成功后,除了除了有职位更新toast提示外,屏幕中间还会通过toast弹窗提示当前页面职位类型,并突出显示。

设计思考:

关于toast弹窗样式及出现的场景,犹如市场上的大白菜,所见过多的不能再多了。例如某个步骤操作成功、tab切换页面、下拉刷新等,是一种轻量级的反馈,以小弹框的形式出现,一般出现1到2秒会自动消失,且可以出现在屏幕上中下任意位置。对于设计师来说,在页面上增加toast的作用,就是将操作的结果直接反馈给用户。

Boss直聘APP在tab栏成功切换页面后,除了有清晰反馈操作结果“推荐职位已更新”之外,还在屏幕中间用另一个更加显眼的toast弹出明确职位信息。其实用户在切换tab栏时,此操作行为不仅仅是切换页面,所对应的类型才是首当其冲,当明确类型无误后才会将思维转向内容,职位弹窗在屏幕中心提示,占据有利地形,除了让用户清楚当前页面交互状态之外,还能快速感知类型是否为自己所需。另外还有防错作用,避免用户操作失误后,在自己还不清楚的情况下去浏览内容而浪费大量的时间。





040.「饿了么」店铺营销文案-看“我”就把“我”吃掉


产品体验:

饿了么的外卖店铺列表及推荐商品下方都有极具诱惑性的广告文案,一句话概括味道、服务、优质推荐等。

设计思考:

今天吃什么?随便;那吃肯德基吧?不好,太油腻了;那到底吃什么?随便......。这应该是最标准的选择性困难综合症晚期,尤其是给女朋友点外卖,你会发现原来“随便”就是天大的谎言,表面上看似什么都可以,实则什么都不可以。

饿了么每个店铺下方都使用了一句简短的文案概括菜品的味道、店铺服务或招牌推荐等,在文案中结合用户较为关心的利益点抓住眼球,引导目标进入店铺,从而浏览店铺的内容。店铺广告是商家可以进行内容营销的重要场所之一,可充分利用文案向用户进行宣导,让其感受到店铺的用心之处,增强用户体验,优质的文案不仅能带给用户惊喜,还有一种神秘色彩,用户可能会抱着试一次心理想法,从而形成转化。

另外对于吃什么、难以选择的用户,平台可以通过文案的吸引,增强用户的占有欲望,让其快速做出决策,避免在选择的时候难以抉择,即便做出决定后仍然疑虑其它的选择是不是更好,从而导致时间的浪费,精神上的焦虑。





041.「微信」你使用过图片备注吗?


产品体验:

微信好友昵称除文字备注外,还可以使用图片备注,保存成功后即可在设置备注页面描述区域看到此前备注的图片,好友信息也增加了描述入口。

设计思考:

当我们的微信好友过多或因好友随时改变昵称的原因,而经常找不到,我们就会随手备注一个昵称或标签,以便需要时方便查找,但针对当面即时添加的好友,就算使用的昵称备注,可依然没有印象怎么办?

其实微信的备注功能比我们想象的要强大,除了昵称备注外,还可以使用图片备注。当我们因工作接触的人较多需要添加好友时,短时间是没有办法把所有好友的个人信息都记熟,这时候图片备注就能助我们一臂之力了,另外还可以直接把客户的名片作为图片备注,将单个好友的信息集合,实现一功能多用。对于记性不好或短时间内添加好友较多的用户非常实用。





042.「即刻」排版设置-帮你缓解视觉疲劳


产品体验:

在即刻APP的排版设置里,开启“中文标点挤压”和“段间距”,文本内容会自动减小中文符号后面的间距,且段与段之间也会增加留白,提高视觉舒适度。

设计思考:

我们在看文章或电子书时,都有过这样感觉,当篇幅较大时,到了一定时间,就会产生视觉疲劳或专注度减弱的情况。视觉疲劳的强弱程度,用户除了自行调整外,平台还能通过设计手段提升用户体验来缓解,常见的网络文章会在不同位置穿插图片来减轻用户的视觉压力,其电子书也会通过短篇幅的翻页来缓解视觉疲劳。

在即刻APP的系统设置中,可通过排版设置提升浏览体验。开启中文标点挤压,文本将自动减小中文标点符号后的空白区域,避免间隔太大造成脱节,去掉不必要的空白,还能为内容节省空间,毕竟内容才是产品最重要的部分,所以不要没理由的去掉特地为它预留空间,“挤挤总还是有的”;其次开启段间距,即段与段之间视觉更加明显,第一反应就能感觉出这是两段内容(段落的结尾如果跟上一样最后平齐,傻傻分不清是衔接上一段还是新的一段),让用户浏览文本内容的思维更清晰且减少思考,提升节奏和视觉平衡感。





043.「拼多多」通过搜索关键词建立情感链接


产品体验:

在拼多多搜索“生日蛋糕”时,商品搜索结果呈现的同时,会有满屏的蛋糕表情落下,以示祝福。

设计思考:

商品搜索框,顾名思义就是搜索商品使用,用户需要查找某个商品时,输入关键词,系统通过后台数据对关键词进行匹配,然后按照特定是顺序呈现出来,旨在满足用户的搜索需求而生。

拼多多搜索功能除了满足用户的基本需求外,还增加了一个小细节,搜索部分特定的关键词,结果页会使用趣味化的微动效。比如,在搜索“生日蛋糕”后,会有满屏的蛋糕表情落下,给予用户生日祝福,通过营造情感氛围,获得用户的认可,跟用户建立情感链接以鼓励继续下一步操作。同时平台用趣味的微动效生日祝福通过情感、人性化的交互方式更受人用户青睐,可以让用户感到心情愉悦,进一步增加用户的信任度及粘性。





044.「微信读书」替身书架-帮你瞒天过海


产品体验:

使用微信读书,如果自己所看的书籍不想别其他人知道,或者想假装自己在看某个领域的书籍,可在隐私设置中开启替身书架,既可以保护隐私,还可以满足面子心理。

设计思考:

有人说,线上看书的效果没有看纸质书籍的效果好,其实并非全部如此,主要因人而异,比如线上看书可以有效利用碎片化时间、不分场景等,不管是线上还是线下,都没有明确的界定,只要能坚持就好,坚持是一件很不容易的事情,比如很多用户喜欢把自己在看书这件事告诉所有的朋友,利用营造人设以追求自己的面子心理,通过好友的夸赞转化为自己坚持下去的动力。

微信的替身书架就可以满足用户的多种需求,通过隐私可以设置一个“分身”来代替真实书架,开启后,替身书架将代替真实书架显示在个人资料中,除了隐藏自己真正阅读的书籍,保护阅读隐私,让自己不被“视奸”外,还可以满足用户的面子(装X)需求,满足用户想要被看到的一面,利用替身书架经营自己人设的需求,比如最近在读的书籍类型、领域等,通过“造假”的方式满足自己的虚荣心,来获得他人的认同感。替身书架一定程度上可以通过裂变手段把获取的新增用户转化为活跃用户,同时满足了用户保护隐私和营造人设的需求,一举两得。





045.「网易云音乐」视频歌单-边听边看更便捷


产品体验:

在网易云音乐听听歌时,如果遇到喜欢的视频,也可以收藏到视频歌单了,从我的-收藏和赞入口进去就能看到。

设计思考:

一直以来,歌单是网易云音乐的核心功能,网易云音乐也是唯一一个将歌单作为核心架构的音乐产品,当我们碰到一首非常喜欢曲时,可能也会钟情于该歌曲的MV,边看边听似乎能更好的融入歌曲的“灵魂”中,如果我们需要再次播放该MV,就要从这首歌曲处找到相应的入口。

网易云音乐8.0版本最新推出了视频歌单功能,延续了用户喜欢的“歌单”模式,根据自己喜欢的歌单主题,将MV,视频、mlog内容聚合在一起,做出一个好听、好看,好玩的视频歌单,让音乐动起来,省去了以往每次找视频的一系列繁琐操作,优化路径,让边听边唱的体验更加便捷。





结语:


设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来,加强自己的记忆,不仅能提升自己的语言组织和总结能力,也为日后输出优秀的作品当铺垫,对自己的能力提升以及未来的职业发展带来便利。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:大漠飞鹰CYSJ

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




智能产品深度解析—交互动效篇

资深UI设计者

智能产品的设计过程中,常常用到动效设计,那么动效设计用在哪些地方及对提升智能设备体验带来什么帮助,是这篇文章要讲的。



undefined



1、流畅的操控感

通过大小、位置和透明度的变化,使得界面与界面之间、界面上元素的出现和消失都有关联,让用户和产品的交互过程更流畅,给用户更好的体验。请看以下案例:


1-1 Nest温控器控制界面

Nest温控器从时钟转变到温控调节界面的过程中,时钟的指针向圆心收缩,周围的时间刻度生长并一起向中心收缩,指针收缩动效对应温控调节界面温度值的显现,时间刻度的生长收缩动效对应温度刻度的显现,由于元素之间进行有关联的变化,操控过程中会有丝滑流畅感。


1-2 Gira窗帘设备

当用户调节行程时,中间的控制点跟随手指实时运动,而进度条会有延时拖拽效果。为什么会是这样呢?原因是:用户在控制面板上的操作是需要由面板向窗帘设备发送指令的,也就是说面板上控制窗帘到窗帘设备运行中间会有一小段时间间隔,用户会有延迟感,所以Gira在控制窗帘行程的过程中,进度条为了与窗帘设备运行同步,加入延时效果,让用户感觉操控响应快的错觉。


1-3 Nest新款温控器

用户在滑动切换功能时,功能icon会按照先后顺序由大到小变化,由于连续性运动,每个元素运动都有衔接,会有流畅操控感受。


1-4 Nest智能锁

用户输入密码后至锁打开这段时间,数字依次向下消失,锁icon逐渐出现并且打开,体现出柔缓的感觉;实际上动效有时候可以弥补设备执行缓慢的不足,当设备需要长时间才能执行时,这段时间加入动效,动效运行时间和设备实际执行时间一致,用户就会觉得很顺畅;也可以让动效运行时间小于设备执行时间,这时用户会觉得操控反应更快。



2.直观明确,降低用户学习成本

通过动效能够帮助用户使用功能,对功能的方向、位置、唤出操作、路径等进行暗示和指导,方便用户在最短的时间内来学会操作产品的一些功能。请看以下案例:


2-1 Nest温控器安装界面

大多数智能设备买回家后,需要用户自己安装,有的甚至牵扯到线路问题,Nest温控器安装界面采用与实物一致的模型元素,让用户有参照依据;通过零部件的运动告诉用户安装顺序;通过放大细节,告诉用户应该选哪一个部件及如何链接。好的操作引导动效可以让用户有更好的参与感、成就感,还可以降低公司的人力安装成本、客服成本。


2-2 Google Nest Hub App端语音设置说明

通过生动形象的Mg动画,用户很快就知道接下来要做什么,省去了看文字的枯燥感,提升了操作效率、趣味性。


2-3 Amazon Echo 

用户第一次设置好监控后,通过放射动效提示用户双击屏幕,通过上下扩张的箭头动效提示用户可以通过手指来就行监控画面的放大缩小。


2-4 Lenovo Smart Clock 

当设备第一次配好网重新开启后,通过遮罩、圆点大小位置运动搭配文字告诉用户长按屏幕可以控制什么功能。


顶部弧形的上下变化,告知用户下拉可以控制什么功能。通过简单的元素既能起到提升用户的作用,还不打扰用户。



3、强调内容

通过动效给用户展示用户需要的内容及产品侧想让用户了解的内容,让用户更乐意更易于理解,强化功能感知。请看以下案例:


3-1 Nest温控器设置界面

用户App第一次链接好温控器后,为了告诉用户温控器的主打功能有日程安排节能、根据时间自动设置温度,用几何元素围绕日程icon放大缩小运动、太阳月亮旋转切换直观的强调这些功能,让用户加深对产品核心功能的认识。


3-2 Lenovo Smart Clock 移动端音乐服务设置

音乐服务类型列表选中状态使用翻转选中效果,列表这里为什么需要动效?

原因有可能是:1、列表中的内容为了很好的作出区分,以彩色的形式展现,层级较高,选中状态如果不加入动效,用户就不容易快速感知自己选择了哪一个;2、其次列表中加入动效,在枯燥的操作中增添了趣味性,增强操作愉悦感。


3-3 B&O触控音箱

双击音乐标题,进度条从左向右生长出现、操控点放大出现,既强调了进度条这个隐藏功能,还暗示用户可以拖动操控点从左向右拖动操作。


3-4 Google Nest Hub 调光灯界面

用户从列表进入调光灯界面时,调光条灰底从左向右弧度生长,随后当前亮度条生长出现、亮度值出现,先暗示了用户可以从左向右弧度操作,后强调了当前设备状态。


3-5 Google Nest Hub 睡眠质量检测界面

用户查看睡眠质量数据时,睡眠质量标题信息渐隐渐现,睡眠数据条、数字生长,让数据展示有主次之分,强调了用户想要看的内容据,更人性。



4、提升用户掌控感,让用户心中有数

在产品设计里面有一个非常重要的原则:让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示,还有一种方式是让用户知道当前产品运行的状态,是正在等待还是正在加载,还是正在下载或变化,那这种状态的告知也是增强用户操纵感的方式之一。请看以下案例:


4-1 LG智能洗衣机

当用户往洗衣机里加入衣物后,出现量杯倒入洗衣液的动画,告知用户当前洗衣机正在进行哪一个环节,我们分析一下这里加入动效的用意,首先,一般的洗衣机没有屏幕,有的话也就显示当前的功能选项,LG的这款洗衣机是液晶屏,那么它的定位就是高端人群,通过融入动效,打造差异化,提升使用体验,加深用户对LG品牌的印象。


4-2 Lenovo Smart Clock 起床闹钟功能

用户设置好起床时间后,系统会根据时间段自动进行背景颜色的过度,来模拟天色的变化,直观的告知用户当前的时间是白天还是晚上或是黄昏。


4-3 Orvibo 除湿界面

设备进行除湿的过程中,面板上圆形元素进行旋转,伴随粒子扩散效果,模拟水分子消失的过程,直观形象的告诉用户现在正在做什么。


4-4 Lenovo Smart Clock 猫眼通话界面

用户接通猫眼后,通话icon进行电播扩散动效,模拟声波扩散效果,准确的向用户告知当前通话中的状态。


4-5 Google Nest Hub 语音唤起

当用户说话唤起语音控制时,原先的全屏画面收缩,响应用户的指令,四周留白,为通话内容提供展示空间,然后彩色点元素起伏变化,通话内容出现,告知用户已接收到指令;随后彩色点元素旋转加载,体现正在执行中。在语音控制的每一个环节都加入动效反馈,会让用户觉得他不是在和一个冰冷的机器讲话,富有人情味。


4-6 Orvibo 窗帘控制界面

运用轻拟物效果和与实物一致的运动方式,用户可以直观的看到窗帘的行程位置与开合状况,大大的提升了产品易用性。



5、明确层级关系,提升用户理解效率

面对一款新的智能产品时,用户可能不知道怎么操作它,通过动效向用户交待页面内容之间的关系,让用户清楚的知道从哪里来,到哪里去,更易于理解从而可以快速上手使用。请看以下案例:


5-1 Nest温控器设置界面

温控器的设置模块通过左右滚动以便在有限的屏幕中展现,那么模块的下一级页面跳转做成像App那样左滑切入是无法明确层级内容的,此时需要一个与左右滑动不一样的动效来区分模块的切换,Nest运用翻转效果,强化了层级感,清楚交待了页面翻转后面的内容与页面前的关系。


5-2 Google Nest Hub 设备控制界面

用户从顶部导航中进入设备列表过程中,设备列表页面从右向左进入,暗示用户“当你想返回上一级,可以左滑离开哦”,用户上下滑动设备列表时,屏幕左边滑动条出现,更加明确了“左滑返回上一页”的功能;


当用户通过列表进入操控界面以及切换功能页时使用淡入淡出的效果,弱化它们之间的跳出感,来强调它们是一个层级的内容,从细微处可见Google的设计师在动效的使用、选择上非常克制,值得我们学习。


5-3 Google Nest Hub 日程提醒界面

用户发出查看日程安排的命令时,日历界面从左到右进入,告诉用户这是一个新的页面,接着日期数字21进行大小位移变化,月份不做变化,为了强调这是21号的日程,2条日程信息按照时间先后从下向上运动,交代了日程处理的优先级。Google设计师将信息展现的每一步都让用户看的清楚明白。



6.减少用户焦虑

用户在操控设备执行一项指令时,会需要一段时间的加载或传输过程,期间使用动效来引起用户的注意,从而减少用户在等待过程中的焦虑感,实际上在这个等待的过程中,品牌方还可以利用这个宝贵的时机与用户建立情感连接,向用户透传其品牌调性,达到加深品牌记忆的目的。详见下一段“07 品牌调性透传”。


6-1 Lenovo Smart Clock Wi-Fi连接操作

用户在移动端与设备连接时,会有一个连接等待过程,此时移动端与设备界面中同时出现几何元素在绘有Wi-Fi的灰色图层中运动的动效,形象的传达了正在运行的具体事项,我们在做加载动画时,不光要让加载动起来,还要贴合当前的内容,做到生动有趣。



7、品牌调性透传

在可用性良好的前提下,通过一致性、趣味性的动效设计和创新的交互方式为产品增加亮点,带来更惊喜的体验,传达产品的气质与态度。请看以下案例:


7-1 Google多端运行动效

在品牌塑造上,Google已被证明做得极为成功,而且在视觉表现层面,Google系产品具备着“一致性”和“连贯性”,这让Google获得了品牌识别上的利益。在不同设备的动效设计中,Google都统一使用代表品牌的红、黄、蓝、绿颜色和几何图形,遵循化繁为简的设计准则,通过简洁贴近真实的运动方式,让产品更有人情味,让用户更加专注于内容。


7-2 Apple AirTag搜寻界面

用户在搜寻AirTag过程中,手机屏幕粒子循环运动,随后粒子组成了一个转动的箭头指向一个圆点,随着用户离得AirTag越来越近,箭头逐渐放大消失,圆点随后演变成了一个旋转的AirTag。交互方式新颖,搜寻结果又充满惊喜,对于Apple这款新产品,无疑让用户加深了印象,感受到了Apple的科技创新态度。


7-3 智能圆镜

用户在靠近圆镜设备时,镜面中心人脸识别icon缩放,周围点元素波动扩散,吸引用户的同时,传达出科技感。


7-4 Apple HomePod 命令反馈界面

当HomePod在执行一项指令时,顶部的屏幕会出现彩球融合翻转动画,多变朦胧的色彩可以唤起用户情绪,球体间的融合过程让产品生动有趣,让用户感受到品牌的人情味。


7-5 Apple Watch 洗手提示界面

Apple Watch洗手功能开启后,会有一个20秒的倒计时,倒计时以肥皂泡沫消失扩散的形式展现,很贴合当前洗手的情景,让原本一个普通的倒计时变得生动且有趣味性,用户更加乐意使用,强化了用户对品牌的感知。


7-6 智能温控器

这款温控器已经有一定年代了,当时那个年代,能用到温控器,那就很有科技感了,智能温控器还将流动的线条动效运用至透明背景上,向用户传达了超前的科技感,只要见了就会记住这款产品。



8、下面为大家整理了一份动效在产品中的应用场景以及设计思路



总结:

实际上智能产品中的动效设计,并不是要向用户炫技,也不是做的越炫酷越好。动效是以解决问题为目的的一种手段。我们要去观察现有好产品的动效设计落地点及分析他们的小心思,从而运用至自己产品中,提升产品使用体验。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:木土君

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




设计师要懂的用户注意力

资深UI设计者

随着信息碎片化趋势的加强,用户的注意力也呈碎片化趋势,本文主要分析了用户注意力的类型以及如何合理吸引用户注意力。



产品都希望吸引用户的注意力


在界面设计中,我们常常能看到许多产品以各种形式抢夺用户注意力,比如弹窗、通知提示等,亦或者通过色彩、大小等设计方式。大部分情况下,这些抢夺注意力的方式简单粗暴,如果不能在适合的场景采用相应的设计手法,不仅达不到期望的目标,反而影响浏览体验。 


在信息量极其庞大的当下,信息被割裂得更加碎片化,现在可以满足用户诉求的产品太多了,许多产品的拉新成本高得离谱,关键是拉新后,留存也是令人头秃的问题。


每个企业都希望自己的产品可以获取更多用户流量、提升用户活跃,自然就需要想方设法吸引用户注意力。这是一个酒香也怕巷子深的时代,产品能满足用户需求、有着极致优秀的体验还不够,还需要让用户知道你的好,让自身产品吸引更多目标用户,是每个产品的愿望。



用户注意力日渐走低


用户的注意力也呈碎片化趋势,很容易受到外界的影响,并且这种注意力分散的趋势会越来越明显。可能用户上一秒在看公众号,下一秒就打开了抖音,然后看到微信消息,点进去回两句...一天过去了,最后发现好像什么事都没有干成。


这就是矛盾的地方,一方面产品希望留住用户,另一方面用户在各产品间反复横跳,就是不在你的产品里面待着。


研究表明,用户的注意力只能维持在 10 分钟左右,大脑在短暂休息后可以再次集中注意力 7-10 分钟,7-10 分钟差不多是人对任何任务保持专注的时间上限。


用户容易受到各种信息的影响这不假,但是如果采用错误的设计方式吸引用户,非但不能如愿以偿,反而可能引起反感。


作为交互设计师,我们要了解用户的注意力是如何被吸引的、如何通过设计在不阻碍用户的基础上适当吸引用户注意力、哪些场景不该干扰用户注意力,这些都是我们需要面对的问题。



用户接收信息的方式


现阶段,由于体验设备的限制,大家大部分情况下还只是与手机、电脑等设备进行交互,此时我们接收信息的方式主要包含:视觉、听觉、触觉。我们借助这些感官与世界和设备交流,下面会介绍设计师该用什么方式合理获取用户注意力。


界面设计的组成部分主要是控件、图标、文字信息、色彩等组成,而要想获取用户注意力,设计师必须清楚哪些信息应当突出,哪些应当弱化,如果所有信息都想突出,那就相当于没突出。



大脑的注意力机制


大脑有两种处理信息的注意力机制。


一种是通过视觉、听觉、触觉等感官获取信息,这种机制是“自外而内”(自下而上)的,即我们从外界感知的,此时的影响因素是外界刺激而非内心驱动,甚至人们自身在这个过程中都没有发现被吸引了注意力。


另一种是来自我们自身的,如记忆、想法等,是由我们的主观能动性进行驱动,比如你在专注思考今晚吃什么(这真的是一件纠结的事),这是“自内而外”(自上而下)的,没有这种注意力,就没法专注起来。

                

这两种注意力并没有孰好孰坏之分,都在我们生活中起到至关重要的作用。区分这两种处理信息的机制并不难,问题主要出现在我们了解这个有什么作用?


那当然是有用的,举个简单的例子:


马蜂窝的首页是内容信息推荐,用户在这个场景中,如果是浏览首页的旅游地点信息流,没有携带特别明确的目的,就会更容易受到信息流推荐的影响,比如有吸引的图片、标题、按钮等,都很容易吸引用户,此时的注意力属于“自外而内”的。


此时设计形式以图片为主,文字在界面中的占比相对较小,起辅助作用,在这种场景下,图片相比于文字更容易吸引用户。


而如果你想去成都旅游,于是你搜索了成都,想看看成都相关的游记,这时情况就不同了,因为你在搜索时具备了比较明确的目的。


你会关注搜索的内容哪些是和成都相关并且你感兴趣的,此时你注意力可能在搜索结果是不是能满足需求,这时注意力属于“自内而外”的。


因此,页面设计的关键就不是整些花里胡哨的操作,而是让用户便于高效搜寻,比如把你的搜索关键词高亮突出,信息采用高效的列表排列。


说到这里,我们了解到了注意力的“自下而上”是被动的(外界的刺激),“自上而下”是主动的(个人意愿),而且针对这两种不同的注意力机制,有不同的设计方式。


这次我们主要讲的是:外界刺激下的“自下而上”的注意力类型,讨论哪些设计可以更快、更直接、更合理地获得人们注意力。



设计“显著线索”


人们每天醒来就要与外界进行各种“沟通”,只要一走出门,就是面对外界的各种变化和信息,触觉的、视觉的、嗅觉的...所以人们不可能注意到所有事物,比如马路上的车在跑,你可能只会关注到法拉利。


一般来说,人们更倾向于关注事物的显著特征,比如颜色和大小,心理学家称之为“显著线索”(salient cue)。人们的注意力有限,所以大脑会关注比较重要的、差异化的信息。


人们不擅长区分细节信息,因为在大多数情况下,显著线索已经足以帮助信息之间的差异。不信,你看看下面哪个是小米的新 logo,拿来检测视力,用的都说好!


所以,不要指望用户一定会关注你界面中设计的关键信息,你所认为的“显著线索”对用户来说未必很明显。如果你担心人们会过滤某些信息,可以尝试用以下的方式吸引他们的注意力。


大脑有自身的信息处理注意机制,我们需要了解其基本运作规律,在设计中更好突出我们的重点信息,弱化次要信息,在合理吸引用户注意力的同时,尽可能降低对用户的干扰。



视觉


视觉是一切感觉之首,大脑的大量资源都用于接收和解析眼睛见到的信息,上文讲到,差异化的信息更容易吸引注意力。在设计中,有许多种方式可以达到这种效果,从视觉的角度看,有颜色对比、大小对比、形状对比、清晰度对比、阴影对比、运用图片、动态信息等方式。


1、颜色对比


如果设计师想吸引用户进行某个操作,颜色一定是最常用的手法,但这里的关键在于,加强颜色的对比,而非整个界面都用重点色突出。没有对比,就没有伤害,颜色也一样,没有对比,就没有突出。


下图中,美团外卖“我的”界面,尽管“我的功能”、“我的服务”、“更多推荐”都是采用黄色高亮色,但由于缺少对比,所以在这几个模块中,并没有哪个功能显得更为突出。其次,一屏之内,出现了 8 个小红点,看起来更像是在玩消消乐,用户看了,也不知道先点哪个后点哪个,那么干脆就不点了吧,如此一来,反而达不到预期的效果。


反观懂车帝的界面,突出高亮显示的功能,只有“发布”、“任务中心”,界面相比起美团更清爽,减少了许多视觉压力,此时用户更容易聚焦到对应的功能。


2、文字大小、粗细对比


我们常能看到网上的鄙视甲方的话,甲方说标题一定要大!要粗!但实际上,一般情况下,加强元素的大小、粗细对比,能够丰富设计的层次,人们的视觉总是更容易受到更大视觉面积的影响,因此文字大小、粗细对比确实能够让用户的视觉有非常清晰的聚焦点。


在大厂的设计中,我们能看到非常多设计都是遵循这种理念,比如 Apple、小米等。


apple 官网


小米官网


3、形状、结构对比


看看下面的图片,你会注意到什么元素?


是的,我们的注意力会很自然地聚焦在差异性的图形上,而忽略相同的视觉信息。形状结构差异性,在引导用户视觉浏览动线上,也是常用的手法。


以知乎为例,在知乎会员页中,列表整体上均以左图右文的形式展示,在这种相同结构下,用户浏览动线相对比较统一,而界面中间配置了 banner 图片,在结构上形成了差异化,则更容易在视觉上形成突出效果。所以,就算这张图片换成小图,或者其他的结构形式,也同样可以达到区分的效果。


4、清晰/模糊对比


当清晰的物体和模糊的物体放在一起时,人们会先注意到轮廓清晰的物体,而模糊的信息则容易形成背景。


iOS 是模糊效果运用最多也是效果最好的系统,这种效果不仅使界面整体更沉浸,减少页面层级变化的视觉割裂感,还能将边缘轮廓清晰的内容凸显出来。


5、阴影对比


阴影效果可以让元素在原有界面的 Z 轴方向上进行突出,可以与界面其他未添加阴影效果的元素有明显区分,在视觉层级上更高。


在 Material design 上,阴影被用来体现元素层级高度,阴影大小反映 Z 轴的卡片高度。感知上距离界面越高,阴影越大。


以美团会员页为例,顶部的会员卡片由于加上阴影效果,信息层级上显得更高。


6、图片的表现力更强


毋庸置疑,图片信息相比于文字信息,更能吸引用户的注意力,因为人们对于图像识别能力几乎是与生俱来的,有时候图片传递信息会比文字更快速、更直接。许多信息(比如情绪、氛围感)很难靠文字传递,恰巧这些正是图片最轻松传达的。


以 App Store 为例,当图片与文字放置在一起的时候,图片的吸睛效果会比文字更强。尽管图片并非在页面最上方,用户未必会第一时间知道这是一张什么内容的图片,但知道视觉有一张图片,视觉吸引到该处的概率会更大。


此外,人们对于图片中人脸的识别更为突出,据研究,在大脑有一处特殊区域,专门用来识别人脸,称为梭形脸部区,可以让人脸识别绕过通常的视觉解析渠道,从而得到快速识别。


7、动态信息


视觉对运动物体有一种特殊的处理机制,当视线中出现了运动物体,眼睛就会不由自主地转向运动物体,视觉焦点中心也随之移至运动物体,这是反射性注意。在设计中,合理地使用动态设计效果,能够很轻松地引导用户注意力。


以下面优酷信息流为例,界面中的动态图片更容易获取用户的视觉注意力。


视频也是动态信息的一种呈现形式,在视觉媒介中,按照吸引用户注意力的程度排序,分别是:视频、图片、纯文字,视频由于本身的动态特性,在对静态信息的对比中,吸引注意力的效果尤为明显。


在手机上,许多产品都会采用视频作为宣传的形式,视频能够承载较大的信息量,同时传达的效果又直截了当。



听觉


听觉在设备中的运用也很频繁,常见有提示音、闹钟等,比如支付宝、微信在收款时,也有收钱的提示音。


特别是在手机上使用声音作为交互的某种反馈时,需要注意选择恰当的声音,避免引起用户反感,在声音的使用上要谨慎。


固定的声音(如铃声)对于用户而言可以形成条件反射,下课铃声响了,你会意识到是下课了;闹钟响了,你会意识到今天又是元气满满的一天。需要注意的是,倘若声音的出现与用户没有存在关联,久而久之,这种声音就容易被用户忽略。


对于视障人士而言,声音还是接收信息的主要渠道,比如 iPhone 的旁白功能,此时用户操作的注意力会集中在对声音的感知。



触觉


与触觉相关的接收信息方式主要是振动,在与设备交互功能中,人们对于振动反馈的要求越来越高。在手机设备领域,许多厂商开始有意识地采用更好的振动马达,目前就是提升振动反馈。


振动也是在关键节点吸引用户注意力,当用户操作成功、失误的时候,给予轻微的振动反馈,能够加强用户对当前状态的感知。



内容信息


1、信息专注性


一次只做一件事,尽管许多人认为自己可以一脑多用,同时处理多件事,但是研究表明,人们在大部分情况下,很难同时完成多个任务。大家在一定有时会遇到很烦躁的情况,比如一下子要做设计,一下子又要开会,时间被分散,注意力无法集中。同样是,当用户面对复杂的界面时,也会出现这种情况。


在设计界面时,倘若界面有太多干扰项,就会增加用户的认知成本,无法快速辨别该执行什么操作。


以 App Store 和潮汐为例,下面这两个页面都可以看出信息的专注性,App Store 以卡片形式清晰呈现每一个专注或应用;潮汐首页只突出了底部的四个操作。这些都让用户尽可能减少无谓的信息干扰,专注于当前界面的操作。


你以为我讲了 App store 和潮汐的例子就完了吗?上面的 App 由于定位和商业化程度的不同,才有了这种简约的设计形式,大多数设计师面对的界面是产品极力要求把所有信息都在一屏之内塞得满满当当。


面对商业化,许多设计师可能会认为毫无有心无力,但是日常处理复杂的信息量才是许多设计师的常态,大部分业务由于商业化等原因,都会往界面塞进更多内容。


交互设计师除了了解产品功能,还需要考虑如何组织、转移这些复杂的信息,如果信息组织得当,也可以强化重点功能模块,合理引导用户的注意力。


以猫眼为例,首页承载着功能入口和电影资源推荐等功能,但是通过合理的信息布局,仍然可以使界面结构变得清晰。


2、信息精简性


Krug 可用性第三定律提到:去掉每个页面上一半的文字,然后把剩下的文字再去掉一半。


尽管上述提到的定律有点夸张,但是,繁杂、多余的信息文案,确实会让用户花费更多时间理解,当用户无法快速了解内容信息时,注意力就容易漂移。在设计时,设计师尤其要记住,在保证信息完整性的前提下,尽可能让文案更加简短,做到让用户快速领会到设计所表达的意思。


信息易读性,是获取注意力的基本,用户是懒惰的,不要期待用户会在如何了解你的产品这种事情上花费太多时间。


以下图为例,左边文案“你必须先登录才能提交订单”明显就不如“登录并提交”来得直观,在交互文案中,要格外注意信息表达的精简性,当然不能以牺牲表达的信息完整性为代价。


3、信息相关性


内容相关性,即推荐的内容与用户相关,许多内容型产品,通过算法等方式,根据用户的偏好进行内容推荐。


抖音视频推荐、头条资讯推荐、网易云歌单推荐、淘宝商品推荐...你会发现,我们生活在一个所有资讯信息与我们相关性极高的世界,因为他们推荐算法,很大程度上就是基于我们历史行为而推荐的,如果是不相关的信息,我们可能压根就不会看,我们被这些信息吸引注意力,这些信息确实帮助我们降低了筛选的成本。尽管另外一方面,这些信息也可能限制了我们发现更多其他的信息。



结语


本文介绍了注意力的主要类型:“自外而内”、“自内而外”,并且就“自下而上”的注意力类型进行了分析。


在设计中,无论是无法让用户集中注意力,还是到处都在抢占注意力,都不算是好设计。作为设计师,我们需要了解如何合理吸引用户注意力,以兼顾用户体验和商业化。人们大多通过视觉、听觉、触觉与设备进行交互,同时从信息设计的角度也进行了分析。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:热风_

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




深度解析B端数据可视化-信息图表篇

资深UI设计者


在如今的工作中(尤其是B端)越来越多的会开始出现数据可视化的身影,对于一部分小伙伴来说这个概念是较为陌生的,面对这道无形之中提升的“门槛”我们常常会表现的手足无措。所以,为了让大家对于数据可视化不再那么束手无措,我希望能通过这篇文章和大家一起交流学习,解决一些属于我们共同的问题


那么我们还是老规矩,想要了解一个事物首先需要知道的是它的定义







1.1 数据可视化的定义


较为笼统的来说数据可视化是一种由图形、图像、数字等元素组成的语言用于解释、呈现目标数据之间的关系。从这个定义上来看,数据可视化从外观层面来说是与图形、图像这些视觉元素密不可分,这也是数据可视化最为明显的特征


而结合我们实际的生活与工作来说,数据可视化是一种以图形符号为主要表现形式,将不可见的、抽象的、复杂的、枯燥的、专业的、不直观的数据内容,有趣的、浅显的传递给用户的有效手段。用户可以通过这样的手段在数据完成自己的目标(例如对选定范围内的数据进行分析发现数据的周期与规律、迅速找到自己目标节点中的关键数值、对比几组数据以了解当下研究对象的情况等)这也是数据可视化最为明显的价值



1.2 可视化发展简史


关于可视化的发展史上可追溯至1950年,当时人们利用计算机创建出了首批图形图表,可以说是数据可视化图表最为早期的雏形,而在50-60年代的可视化中又以查尔斯·约瑟夫·米纳德的《1812-1813对俄战争中法军人力持续损失示意图》为代表



该图描绘了拿破仑的军队自离开波兰到俄罗斯边界后军力损失的状况,也是后世分析拿破仑对俄战争的重要数据分析资料,后来这种带状图被称为“桑基图”用来解释能量的流动


而可视化真正被提到一个应用理论的高度是到了1987年布鲁斯·麦考梅克和马克沁·布朗所编写的美国国家科学基金会报告《Visualization in Scientific Computing》(科学计算之中的可视化),其意在强调了基于计算机的可视化技术方法的必要性,此时的概念已经与现在我们所接触的工作中的数据可视化是非常接近


到了90年代初人们发起了一个称为“信息可视化”的研究领域旨在为许多应用领域(科学、商业、行政、财务、数字媒体)之中对于抽象的异质性数据集的分析工作提供支持,与前面提到的“科学可视化”交叉形成了现在耳熟能详的“数据可视化”,此时这个词汇才慢慢的被更多的专业领域的人所接受,并在之后互联网的不断发展中扩充着自己的分支



1.3 为什么会使用数据可视化



目前大量开始使用视觉可视化的原因其实非常简单大致的原因可以分为需要处理的数据量太大了和人脑不够用了


据不完全统计IBM公司每天有2.5亿字节数据的吞吐量,麻省理工学院的研究科学家Andrew McAfee和Erik Brynjolfsson教授指出,如今在互联网上传递的数据量比过去20年的总和还多,而且根据IDC预测,到2025年将有163万亿GB的数据


这是非常惊人的,而这么多需求的数据量单凭人脑的计算能力和处理能力来说是完全无法与之匹配的,研究表明人脑很难同时处理5组以上的抽象数据,所以这种单线程的处理方式就决定了需要借助外力


而对于用户尤其是决策层的用户来说在现实的工作场景中经常需要同时处理超过5组以上的数据并需要对其建立精准的分析模型以便于做出最准确的决策所以基于这样的需求,数据可视化设计氤氲而生


1.4 数据可视化的优势



基于数据可视化的需求来看,数据可视化的优势是显而易见的,可以概括为两点认知减负和传递赋能


认知减负是使用者在使用数据可视化工具时候的最直观感受,当所面对的庞大的、复杂的枯燥海量数据集变成了图像化、通俗化、形象化的视觉符号时我们会本能的放下对于面对再面对冰冷数据时候的抗拒和戒备,这是因为人对于一目了然更加接近自己熟悉的有趣事物的时候会更为亲切和愿意去主动理解


而且被处理过、规划过的简洁直观表现形式能更为直接的让使用者看到数据与数据之间的关联,进而分析出其潜在关系,在人对数据的认知这个环节上降低了识别成本和分析成本


传递赋能上图像传递更接近人类最本能的获ju取信息的方式,比起文字来说图像更像是一个解密的步骤,通过解开文字描述这重“密码”将最本质的信息进行呈现,而且对比文字,图像所能够承载的信息其实更为广泛,而且人类读图的效率要远远高于阅读文字

无论是一个约定俗成的语义符号形象还是符合语境的配色都能够起到比文字直白表述更为强烈的深入人心效果,并且图解的形式并不受限于语言的障碍,极大的降低了沟通成本


1.5 使用目标



基于用户的使用目标来说,使用数据可视化其实就像是一个侦探用“蛛网图”辅助自己梳理思绪进行破案的过程:将一些有关的,但是较为零散信息数据用一根根线索线穿插起来,形成体系化的联系,方便使用者迅速把握各个节点之间的关系进行推导


所以说我们在设计数据可视化的时候并不是对我们拿到的数据的无脑映射,而是要基于用户的目标经过一定的处理和优化后才能进行呈现,随时记住我们是给用户在打辅助,所以我们每一步的设计一定要基于用户的思考



用户的期望是能够高效、清晰、简洁地完成数据的对比、关键节点的查询、每组数据之间的分析等一系列交互,提升自己的工作效率,降低自己的学习和使用成本


1.6 应用场景



数据可视化的应用领域较为广泛涉及医疗、统计、管理、金融、娱乐、人工智能等一系列领域,在UI的设计中我们最常接触到的包括:PC后台的数据概览、数据可视化大屏、游戏UI、后台实时监控等





当我们大致了解了数据可视化的历史、使用原因、优势、用户目标、应用领域后下面就要切入我们设计师最为关心的话题:我们在设计中的任务


2.1 设计难点


数据可视化作为一门跨领域的学科,本身对于从业者而言就有着一定的综合素质要求,但由于国内教育并没有垂直教学学科所以在现在的阶段从业人员一部分由纯视觉设计专业的同学组成另一部分由纯工科类型的专业的同学组成


于是这就导致了非视觉设计师在进行设计时,会将全副精力放在强数据的准确性、合理性上,从而让视觉的易读性上有一定的损失,表现形式也较为单一枯燥,视觉感官较差,反观视觉设计师通常会将数据可视化在视觉表现形式上过度用力,虽然营造了很好的视觉体验,但是从其实用度、可用性上来说会大打折扣


于是设计的难点很多时候就会集中在平衡视觉与实用之间的关系


2.2 设计目标



通过以上分析,不难看出设计的主要目标,而面对这句较为抽象的“把握设计与实用之间的平衡”其实无外乎也就是拆解到功能和视觉这两个方面


从功能上来说,我的目标是提升用户的数据阅读效率、让用户能够迅速Touch到目标信息,提升交互效率,一切都是以结果为导向,以解决用户问题为导向,一定记住人们不愿意接受未处理过的数据



而从视觉上来说,我们的目标是处理好在视觉上各个模块之间的统一、透气关系,同时将数据进行可视化的同时尽量提升感官上的审美体验与传达上的有趣


以上会作为后文中我们每一步设计的指导和检验和理性的方式,从实际操作的维度上来说二者也并不是五十比五十的分配,遵循的原则是:体验一定要让位于功能,所以在视觉的层面发挥的空间其实需要比较克制





了解了数据可视化的设计难点,明确了数据可视化的设计目标,那么我下面进入我们最重点的环节:可视化页面案例制作,由于数据可视化的形式较多,这次我们以工作中经常接触得到的PC页面数据概览页为例


3.1 明确性质


同样的细化到数据概览这个分支项目我们同样需要明确了解其基础定义和性质,严格意义上来说数据概览部分属于Dashboard design(仪表盘设计)的一种,其主要的目的和功能可分为分析和操作两块




所以从综合的角度来说数据概览部分可以理解为:1.其他模块的摘要视图,并显示来自应用程序各个部分的关键信息,从这点上来说建议此模块可以在其余模块设计完后再进行设计,如此有利于设计师从一个全局的视角切入进行设计,理解上也会更加透彻,否则很可能会陷入在你设计其他模块的时候不断地返回对其进行修改的怪圈


2.他也是核心功能、常用功能的快速操作助手和快捷页面跳转(有点类似于导航),交互功能的排布和关键信息的显示其共同的要求点是显而易见的,即明确各个模块之间的层级,做好顺序、优先级排布这就需要你对业务目标有一定的了解,记住对业务目标不了解你的设计将毫无意义


你可以通过查询一些内部资料、报告、也可以询问产品经理等相关负责人,还可以通过用户调研得出,这里不展开说,具体可以去参考我的另一篇关于用户画像的文章,在动手之前你需要搞清楚:各模块之间优先级如何、你需要在一张单独的图表内展示多少变量、想展示一段时间内的值还是项目和项目之间嗨是组与组之间、每段变量中有多少关键数据需要展示等问题


3.2 定义模块优先级



如上图所示,在工作中我们经常接到需求的时候是面对一堆冗杂的数据集,组成了若干个模块,但是正如上文所说我们并不能对其进行无脑的可视化映射,所以首先要做的就是要对各个模块进行优先级的梳理排序



明确了各个模块的优先级排布之后我们开始对每一个单独模块进行可视化转化,即哪一个部分分别用什么类型的可视化形式表现,这一步非常类似于土地使用规划,当你在将土地划分完后,为每一块土地定义其使用类型


3.3 明确图表选择


想准确的将图表与所要表现的数据进行对应现需要了解图表本身所包含的基本元素



在这些元素中正常情况下一定在图表中的有:标题、时间范围、图形主体,经常出现的有:坐标系、图例、提示信息,有时候会有的有:切换选项和值域


知道了这些重要的基础信息了,那么在面对这么多图表的时候我们该如何正确的选择来进行使用呢




其实和之前说的一样:基于目的来进行思考,所谓的基于目的来进行思考也就是要明确你所确立的数据指标需要分析的维度,而日常使用的数据需要分析的维度无外乎:比较、构成、分布联系


3.3.1 比较类图表



比较类图表应该是大家最为熟悉的范畴,第一时间能够想到的就是柱状图,这也是运用最为广泛的图表之一,经常出现在PC端之中,用于描述分类数据之间的对比,描述的数据可以是地区、品类甚至一个时间周期,但由于其扩展能力有限,所以一般不建议项目超过12条



条形图与柱状图类似,看上去只是交换了X轴与Y轴,功能和承载数据种类较为类似,但不同的是,条形所能承载的项目数量相对于柱状图而言更多,由于其优良的纵向延展性一般用于手机端较多,而且从上到下的阅读方式符合人眼阅读习惯,所以也会经常用于排行榜的设计中



分组条形图是条形图的衍生之一用于比较多个变量在不同区域之间的数量关系,比如当想比较同样一款衣服和鞋子在四个门店中的一个季度的营业额时就可以使用分组条形图



双向条形图表适合比较两组以上的分类数据比较,和分组条形图较为类似,但是由于自身外观特征更适合用于比较两组意义相反的数据,也正是如此,双向条形图的组内二级分类数量一般不要超过3条最好



折线图与前者最大的不同就在于在坐标轴中加入了连续类别这个概念,数据基于时间等因素变得动态了起来,注重变化趋势的展现



面积图是折线图的延伸,除了表示变化趋势之外还能比较所选范围内积累的值



玫瑰图应该算是可视化图表中的“网红”,因为我们从小学的课本中就知道它还有一个别称叫“南丁格尔玫瑰图”它是一种圆形的直方图,使用半径长短表示数值大小,其特点就在于因为其独特的外观可以将数值之间的差距在视觉层面进行放大,和将坐标轴范围缩小来提升视觉上数值的碾压是一个道理,发布会吹水最爱,但是要注意的是这不是一个表示占比构成的图,因为玫瑰图的每一份角度是一样的,一定要和饼状图等图区分开来,它用来表示的还是数值与数值之间的大小



雷达图经常用于分析一些多维的性能数据、评分数据,经常打游戏的朋友应该不陌生,有多少五边形选手可以扣个1,每一项指标越接近圆心说明状态越差,越向外说明越佳



子弹图用于比较当前数值与目标之间的关系,比如看当前业绩是否达标,也可以通过标记划分区域来进行更好的评估



漏斗图适用于业务流程比较规范、周期长、环节多的单流程单项分析,一定要有清晰的环节,比如监控买家从浏览到最后下单的数量统计以求得转化率,不适合无逻辑、无流程的分类对比


3.3.2 构成类图表


构成类图表整体上来说主要用于观察部分和整体的占比关系,最经典的莫过于饼状图,这个不用多说,通过每一份半圆角度所占整个圆的大小来表示部分和整体的关系,但是由于其所占面积较大,经常会让视觉过于集中,影响注意力



相对于饼状图而言,环状图十分有效的避免的干扰视觉的问题,其本质是将饼图中间掏空,功能与饼图基本一致,但是视觉上做到了轻量化,目前在日常设计中较为常用



旭日图相当于前面二者的结合,适用于展示多层级数据的占比关系,距离圆心越近代表层级越高,下一层级的总和构成上一层级,存在一定的父子层级关系



堆叠面积图出了可以表达趋势外,其优势在于能够表达总量和分量的构成关系,堆叠面积图上的最大的面积代表了所有的数据量的总和,是一个整体。各个叠起来的面积表示各个数据量的大小



堆叠柱状图的优势在于它既可以表达一级分类的比较,同时还能看出二级分类在各其一级分类中的占比,但是缺点在于二级分类并不是按照同一基准线对齐的,相比于堆叠面积图更为常用



瀑布图用表达两个数值之间的变化过程,过程值为正的时候,向上加,过程值为负的时候向下减


3.3.3 分布联系类图表




分布联系类地图在这两年在国人的心中其实已经非常熟悉了,因为疫情今年的地图可视化的应用经常出现在我们的生活中,地图可以结合不同的表达方式:


可以结合散点、可以结合动画、还可以结合引导线以及热力图的方式,图的形式使用视具体的业务需求来定



最后就是气泡图,这是在查看分布关系中最为经典的视觉模型,用气泡的面积大小表示数量,结合辅助线可以更好地观察分布情况


3.4 匹配图表 重构布局



当我们对每种图表的功能和使用范围有了一个较为明确的认知之后,下面我们就可以对我们之前所规划好的优先级的模块进行可视化形式(图表)的匹配了


进行匹配过后,我们将对布局进行重构,整体重构需要遵循的原则是

1.布局层级明确,首屏尽量曝光更多内容

2.统一透气,具有呼吸感


3.4.1 布局层级明确,首屏尽量曝光更多内容


从首屏曝光更多内容来说主要是因为基于分析类的数据概览工作场景和Analytical dashboard自身特征决定的,用户希望能够通过仅仅一屏的的大小进行对各类信息的情况有基本的把控达到一眼全局的目的,其主要注意力都会放在首屏,所以我们需要尽可能的在首屏安排更多的信息




当然首屏内容也并不是越多越好,一般建议也尽量不要超过7组模块,而在层级明确这块儿主要是根据人眼阅读习惯所产生的优先级排布:正常情况下都是左上为优先级最高,而右下优先级较低,这是无数经典的眼动测试和设计总结产生的最常用结论,就不展开叙述了,所以当我们按照优先级、首屏曝光更多内容的原则进行处理后会得到如上图的布局


3.4.2 统一透气 具有呼吸感



这主要是视觉层面的问题,统一透气的要求在首页概览中可以依靠栅格系统来来解决,它可以有效的帮助页面布局的对其保持页面布局一致性,为页面建立基础布局框架,将页面中的所有元素都捆绑在一个体系之中,同时还能有效解决适配问题


3.5 模块拆解


完成了大规划之后,下面我们开始对一个一个的模块进行拆解同样的以目标指导设计,边设计边验证


3.5.1 层级明确 突出重点



和大规划一样,单独到每一个图表同样要时刻注意层级的梳理,销售渠道部分很明确应该是运用一个折线图的形式,由于业务目标上来说更关注销售额而不是销售额和订单数的比较,所以我们选用了一个带有切换选项的折线图形式


但是我们会很容易发现的在读图时会出现较大的视觉干扰,并没有能够很好地突出重点信息,视觉层级不清晰、混乱


于是我们对没有重点的视觉层级进行梳理,像之前划分模块那样,对视觉元素进行高、中、低的P0、P1、P2的设定,提升易读性




P0:层级最高的自然是重点信息突出部分,所以我们需要在其之上做加法,给予内容异形悬停样式进行具体强调,配合投影加强视觉效果,有效传递用户,拉开与别的元素的层级,同时数据部分用特殊字体并适当加大字号进行设计,方便用户第一时间能够看到所要强调的数据具体值


P1: 其次就是主体图形部分,这是用户需要看到的重要部分,在使用场景中会长时间盯视,所以采用更低的明度与更高的饱和色颜色确保易读性,但是也不致于会让用户太晃眼产生视觉疲劳,最后考虑到该模块所处位置属于页面中较为核心的地带,给予一定的颜色透明度渐变装饰,在强化主体图形的同时不致于太显单薄


P2:前两者都是一定程度的做加法,那么层级最低的元素比那需要开始做减法,此时轴线、刻度、切换选项等元素需要弱化视觉层级,降低透明度,尤其是背后的刻度线与背景的明度对比大概控制在1.6:1上较为合适



销售总额、订单数、渠道数同属于一个数据统计的范畴,最忌讳的就是把以上提供的三个信息给做平,让用户抓不住重点,面对这样的情况还是一样,确立需要突出的重点信息给予特殊文字和大小的设计,选择合适的主体图形



但在这里需要注意的是由于在这个模块中P0是金额数、订单数、渠道数这些重要值,所以可视化图形需要适当为其让步,不要放在阅读中心位置,按照P1来进行处理,而订单数、转换率这样的标题就成了P2需要适当降低透明度和文字大小,不干扰主要信息的表达


3.5.2 统一营造


说到统一,最先想到的一定是色彩,无非也就是需要处理好对立统一关系,而这其中统一的比例又要大于对立,配色上尽量选用同类色系,不宜太过花哨,尤其是对于B端而言,建议在可能的情况下不要超过5种,而且主色、辅助色,对比色的比例建议控制在6:3:1的比例(但不绝对),既能做到有所区别又不致于过于绚丽干扰视觉



你的主色不一定要迁就你的品牌色,但是一定要是如上文说的尽量低明度高饱和,以适应于长时间的注视



颜色过后就是字体,字体字体的使用需要极为谨慎,如果可以尽量只出现一种字体(但不要超过三种),并且只采用基础字体,正常情况下都是将其作为一个需要被降噪了的视觉元素来对待(比如降低透明度),在PC端中尽量也不要出现较多不同的字号,字重,造成没有必要的视觉干扰



除了字体之外,在统一感的营造上卡片的布局结构也需要尽量保持一致,这是为了提升易用性,同一个产品内,相同布局会给予用户相同交互、相同功能的暗示,也更容易培养用户习惯,提升操作效率


3.5.3 呼吸适中


呼吸感是留白的艺术,很考验设计师的排版能力,在单独的模块内,元素与元素之间尽量不要用实线进行间隔,可以的话利用亲密性原则通过元素间距的远近进行布局



而柱状图的设计上,柱与柱之间的间距最好大于柱宽的1.5倍,这样才显得视觉上较为透气,不致于太臃肿



最后就是模块中的边距留白部分,这点一定要重视,不然不仅你的版心会变散,还会严重影响你的页面呼吸感


3.5.4 细节处理



细节上首先要说的就是横纵坐标轴上的文字,上面的文字一定不要过长,最好的方式是将文字进行精简。然后横、竖排对齐处理,如果实在不能精简那么再进行斜排的方式



第二点就是横纵坐标轴有的时候会因为需要展示的数据过多而过于密集影响阅读,这个时候可以采用适当增加一个值域的划定的方式来进行坐标间距的缩放



第三点就是,在排行榜等模块可以适当增加一些小设计,比如金、银、铜的设计,提升情感化元素的融入



第四点就是,尽量不要选用一些3D的酷炫效果来做可视化,因为这种效果很容易对数据进行遮挡和扭曲,不是非常适用于高效阅读,也不适合PC页面上的交互,而且也不利于开发,比较得不偿失

3.6 组装自检


当所有的模块设计完成后,像拼高达一样进行组装,组装完成后适当调整其过于干扰视觉的地方,然后进行自检


自检不只是从检查你的视觉、你的模块间的布局,更重要的是带入使用角色来进行检查,你可以模用户使用中的各种需求场景,对已经制作好的页面进行交互和阅读,看是否能够快速高效地完成使用目标


当然除了自己之外,你还能在有条件的情况下找专家用户进行使用,即使记录使用中存在的问题并及时进行调整,当初步使用大致无问题后便可以交付





了解了图表在PC页面的布局使用之后,最后想和大家聊一点拓展性的话题:数据可视化大屏,目前在B端领域可视化大屏已经是一个越来越热的研究课题,同样也是承载信息图表的重要载体之一,但由于篇幅限制本篇并不展开讨论


4.1 数据可视化大屏的基本信息


同样从定义上来说,数据可视化大屏就是以大屏为主要展示载体的数据可视化设计,听着和PC端的数据概览相比似乎只有载体的区别,但是两者的差异却不止于此



首先是尺寸上来说,数据可视化大屏要远远大于PC数据概览,我们在市面经常看到的大屏硬件有一整块巨型的P3屏幕,也有用若干台液晶电视拼接而成的大屏,而且不像是PC有一些固定尺寸的长宽约束,大屏的尺寸更自由




其次大屏的配色更为炫酷、科幻具有一种未来感,哪怕不是设计师朋友看过数据可视化大屏的朋友一定会感觉一种扑面而来的科技感、前卫感,这主要是因为大屏的配色多半是以蓝黑等深沉的颜色为背景色主基调,然后在数据可视化展示部分以一些高明度、高饱和的色彩进行呈现,给人会不由自主营造一种赛博朋克的味道


这并不是一开始就制定的配色准则,而是大屏本身需要向其面向的用户营造一种实力、科技、质感的氛围,所以慢慢大家不约而同的选择了这样的调性,还有就是考虑到大屏本身的体积问题,如果以明度较高的颜色作为背景色,很容易造成人眼的视觉疲劳和光污染,所以这也是为什么我们很少会看到可视化大屏用白色作为底色的原因



再次就是内容上,可视化大屏比PC页面信息承载的更多,但是页面切换、交互操作更少,这是因为可视化大屏主要目标是对相关信息的全局展示,基本不存在PC页面那样的首屏、二屏的概念,用户更多的使用场景是通过大屏的数据实时反馈来进行决策,所以也很少会进行页面的跳转、对某一个区域进行编辑这样的操作


最后就是在使用的时长上相对来说要比数据概览页面更长,这个也很好理解,尤其是在一些监测、预防的重要部门中(如气象监测),很多时候都是24小时轮班来盯大屏的实时数据的,而很多PC页面的数据概览部分,用户可能就是每天打开大致看一看然后就切换至别的页面进行其他工作了


4.2 可视化大屏分类


从应用场景的角度切入,可视化大屏的分类可以分为三种:

1.参观视察类

2.展示宣传类

3.办公决策类



参观视察类,其主要应用场景是在企业内部展厅,面对的用户主要是领导、客户、上级单位等

,这类大屏一般是不需要进行交互的,其目的主要是尽可能完整清晰的,展示流程、业绩、能力



展示宣传类与参观视察类其实比较类似,只是相对于参观视察类更多的会在发布会、展台展会等应用场景出现,面向的的用户主要是一些潜在客户、媒体、同行等,像我们很熟悉的天猫双十一展示大屏就属于展示宣传类大屏


其目的主要是用于展示公司、产品的品牌、价值、能力等属性


以上两者更多的偏向于一种纯粹的对结果的呈现



相对于前两者而言办公决策类大屏的实现成本更高,使用的时效更长,定制化更深,工具属性感更强

应用场景上多用于交通指挥系统、天气监测预报系统,面向的用户包括单位指战领导、一线人员等,这样的角色就决定了其具有较强的决策辅助价值


其目的主要用于让用户能够通过使用大屏达到快速的指挥、调度、监控、决策


4.3 可视化工具推荐


最后给大家推荐一些数据可视化方面的工具,来助力我们平时的工作



以上是一些能够更快速生成各种数据可视化图表的工具,类型和样式都十分丰富



以上是一些能够在线生成可视化大屏模版的一些工具,有助于在日常工作中涉及数据可视化大屏的时候进行参考





好了以上就是在B端设计中对于数据可视化尤其是PC端数据概览的设计探讨,当然其实关于数据可视化的范围还远远不止于此,感谢你能够耐心看到最后,如果这对于你的工作有一点帮助那么备感荣幸




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:核糖bro

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




如何设计视频类产品?

资深UI设计者

无论是在生活场景、工作场景还是学习场景中,视频播放的普及度都已经非常之高,为我们的多元化场景带来便利。视频功能在产品中的体现也已经成为基础功能,在设计层面的不断优化对于产品设计师来说至关重要。

本文特意结合目前比较热门的产品,为大家梳理了涉及到视频功能的产品在设计上面的解决方案。希望这些优秀的设计思考可以带给产品设计师更多的灵感,不断探索和发现优秀的设计解决方案。

如何设计视频类产品?我总结了这15个体验超棒的细节!

特殊场景下的后台播放

影视类产品在不断优化用户体验的时候,为了满足用户在一些特殊场景下的使用体验,推出了后台播放的附加功能。比如用户在步行中、骑行中,或者处于不便于观看视频的场景中,可以采用后台播放。视频将会以音频的形式后台播放,让用户从视听体验转为音频体验,也是一种变相的解决方案。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:考虑到用户的多场景需求,而不只是底层的需求。

人性化的定时关闭设置

很多用户在睡觉前都会习惯刷一下视频,有时候经常会忘记关闭视频就入睡了,第二天起来发现手机没电啦!定时关闭功能的出现解决了用户这一痛点,可以根据自己入睡的大致时间评估,设置定时关闭的时间段。人性化的功能设置在细微之处考虑到了用户痛点,图标设计也是结合场景化表现,提高用户对于产品的操作体验。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:帮助用户培养习惯和解决用户可能会出现的失误,以情感化的方式拉近与用户之间的亲和力。

特殊人群的色觉障碍优化

为了考虑到特殊人群的使用体验,让视频播放的效果符合不同用户的视觉感知,色觉障碍优化的功能设置人性化的呈现了解决方案。该功能针对色觉障碍用户的临床表现,优化视频色彩来提高画面辨识度。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:考虑到特殊人群的使用体验,才能把产品的体验延伸到更多的场景。

短视频的横屏观看体验升级

随着短视频的盛行,利用空余时间刷视频成为用户消磨时间的方式之一。对于视频上传用户来说,根据视频拍摄的题材会选择适合的比例,有些题材适合横屏比例。

抖音作为短视频平台积累了庞大的用户量,视频的种类和播放比例也是丰富多样。为了满足用户的播放需求,设计了“全屏观看”的切换按钮,方便用户观看宽屏视频的需求。观看体验的升级带给用户人性化的体验,也方便更多比例视频的完美呈现。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:为用户提供匹配当前内容的方式,而不要局限在内容创造本身的匹配度上。

刚刚看过的视频快速定位

在刷短视频的时候,刷到自己感兴趣的内容想要继续看完续集,以往的做法是进入作者主页挨个寻找,视频多了找起来很慢,用户体验很差。短视频平台提供了“刚刚看过”的快速定位操作,点击之后会直接定位到刚刚看过的视频位置,方便用户观看续集。人性化的功能设置节省了用户的操作成本,方便一些持续更新的视频内容更好的进行观看体验。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:节省用户的时间就是提高自己的认可度,培养用户的依赖度。

直观的预览增加点击欲望

在观看一些儿歌、短片视频合集的时候,右侧的视频目录区采用名称和视频截图预览呈现,直观的预览效果增加点击观看的欲望。小朋友在刷儿歌视频的时候,降低了学习成本,切换视频也更加便利。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:降低用户的理解成本,才能获得用户的青睐。

暂停播放的应景设计

情感化的设计可以拉进与用户之间的亲和力,体现产品人性化的一面。在特定的节假日或者特殊时间内,为了增强氛围,视频播放暂停的设计上面设计师也投入了很多小心思。比如在跨年期间,双击屏幕暂停时会出现绽放的烟花效果和 2021 年的绚丽文字,氛围的营造带动了跨年的氛围,带给用户更加温馨的感官体验。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:提高用户体验的设计,就存在于细微之处的变化中。

画中画,边看边浏览视频

有时候我们没有明确的观影目标,打开一个视频后还想继续寻找更好的影片,又怕当前影片有看点。“画中画”功能解决了这个痛点,观看视频时点击“画中画”当前播放视频缩小窗口显示在侧边,用户还可以继续浏览新的内容,筛选更多可能性。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:在用户没有明确目标的时候,带给用户多种选择性。

投屏观影双向体验

将影片投到电视观看是家庭观影的最佳选择,让观影体验不局限于方寸之间的设备上,还能与家人朋友一起观看影片。如果家里有小孩子需要看动画片之类的,除了投屏电视给他们观看以外,自己还能继续在 App 上观看别的影片,双向选择提高了用户的多场景需求体验。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:特殊场景下不仅需要满足用户的需求,也要考虑用户可能会出现的周边困境。

手势交互曝光作者更多作品

各种手势的研究是产品设计师探索的方向,在刷短视频的时候,向左滑动除了进入作者主页以外,也有产品选择曝光作者更多视频作品。更多视频的曝光不仅方便用户观看续集,还能通过更多视频的观看建立对作者的好感度,让用户充分的判断是否需要关注作者。该交互形式给用户提供了更多的判断权,也提高了作者更多视频作品的曝光度。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:通过交互形式的改变给用户带来便利,也给作者带来曝光度,平台也提高了使用体验,这是最稳固的体验三角形。

单手操作的手势交互

在视频播放中的手势交互为用户的操作提供了便利,短视频中的单击暂停/播放、双击点赞、长按浮层、左右滑动也有对应的内容变化。目前运用比较多的是单手操作的手势,同样的手势在不同的产品中也激活不一样的功能操作,比如影视 App 中通常是双击暂停/播放。作为产品设计师我们在交互设计的时候,手势的变化在视频功能中的运用可以深入探索。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:手势交互的运用可以在原本的基础上实现更多可能性。

短视频 GIF 一键生成

在很多自媒体上大家经常会看到很多影视片段的 GIF 动画,不仅增加了趣味性,也间接的传播了视频内容。很多视频类产品为了给用户提供自动生成短视频和 GIF 动画的便利,提供了一键生成的操作,不仅可以选择内容区间,还可以自由控制时间。便利的操作降低了用户的学习成本,还增加了用户分享的趣味性。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:帮助用户降低在外部平台上分享内容的制作成本,也是提高自身内容被分享的概率。

视频快照分享更便利

截图属于手机系统自带的功能,通过交互路径操作或者设备按键快捷操作完成。而视频播放器自带的快照功能更便利,一键操作随时定格画面,还能快捷分享或者制作表情,非常的便利。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:只有把操作的时间和难度降低到临界值,才能让用户逐渐形成依赖。

个性化追求的片段观影

在观看影片的时候,针对一些故事情节比较长的影片,我们可以选择观看指定角色的片段,或者选择倍速播放等来实现个性化的观影选择。忙碌的生活让我们少了一些观影耐心,这也是短视频备受喜欢的因素之一,片段的播放需求满足了这部分用户的需求。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:个性化的功能服务可以培养用户对产品的忠诚度,这是形成种子用户的关键。

方寸之间的分屏设计

由于移动端设备的大小限制,如何在有限的屏幕内进行延展设计,是产品设计师探索的方向。分屏设计是在保持当前视频播放的前提下将屏幕划分为更多模块,不影响内容进展的情况下进行更多功能操作。

比如爱奇艺观看视频时的夸夸功能操作,在操作功能的同时不影响用户的观影体验,增加用户观影时的互动性。

如何设计视频类产品?我总结了这15个体验超棒的细节!

思考:有限空间内的更多可能性设计,是设计师不断探索的过程,尽显方寸之间的设计能力。

还有更多关于视频功能在 UI 场景中的运用案例,这里仅抛砖引玉的列举了部分设计分析,更多分析我们下期继续。

小结

针对单一功能的体验总结,是分析和积累同一功能不同设计解决方案的形式,辅助增加设计需求中的效率发挥。产品体验日记总结的不同维度带来不同的深度思考,希望这个维度的总结起到抛砖引玉的作用,带给大家更多的思考方向和总结思路。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:黑马青年

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


设计师的数据分析与场景化设计

资深UI设计者

       随着互联网的发展,近这几年设计圈子里大家都在讨论UGD(User Growth Design),要向UGD转型等等,以用户为中心,以增长为导向,这个概念本身并没有问题,而且是对UED的一种非常棒的进化和升级,要求设计团队需要具备更综合的专业能力与视野。本着对团队的升级优化,我也以UGD的思路对团队有了新的更高的要求,然而在这个过程中却发现在很多问题。

       

       随着各种社交平台的传播普及,什么闭环、串联、颗粒度等等这些互联网黑语,满大街飞来飞去,设计师们的PPT、汇报资料是越来越丰富多彩,但项目效果却并不明显。数据、增长的概念确实是铺开了,但却成了PPT里的装饰,并没有真正落地生根。


       经过很长时间的摸索,我们终于有了一套适合团队自己的UGD思路,也一步一步的在不断的优化提升,下面以我们做过的一个项目(用户投资路径优化)为例来说说我们对UGD的思考,以及设计师对数据分析以及场景化设计的思路。


1. U user

       以用户为中心,就是关注用户的行为,串联数据,从点线面结合场景分析,提出问题所在。

 

       作为设计师,最常关注的用户数据就是转化率、点击率、停留时长、跳转路径等等,从单一数据来看,都是一些常见的简单的数据,但要真正能够分析用户,还需要结合实际场景来分析。


案例:

       我们在分析交易线的数据时发现了一些问题,并对数据做了对比分析。



项目列表页 ] 

用户的点击主要集中在前十个投资项目,占据整个页面点击的80%。



项目详情页 ] 

用户通过列表页进入到详情页,详情页的浏览率较高,但转化却很低,另外优惠券的点击率十分高,超过85%,意味着进入到详情页的用户,基本上都进入过优惠券页面,而最终促成成交却很低。


       以上是整个交易环节最初始的两个页面,也是最核心的页面,从单个页面的数据(点)来看都属于正常漏斗数据表现,接下来我们从用户路径(线)的角度来继续分析。

       


       我们从用户当中,抽取了部分最终完成了交易的用户,对整个交易路径的进行分析,结果发现用户在列表页——详情页——优惠券这三个步骤之间反复切换。

 

       不难看出,用户在列表页、详情页、优惠券选择页来回切换,即使最终产生交易,但整个路径耗时长,反复操作,跳转不合理,导致大量流失,这是目前数据所呈现出来的情况,也是问题的核心所在。


2. G growth

       以增长为导向,以数据为依据发现或提出问题所在,确定最终需要增长(优化)的数据指标,并以此为目标展开思考,提出解决思路。

案例:

这是最典型的购物交易场景,通过上面的分析,我们再结合场景化的思路进一步整理思考用户的操作行为目的。

以投资理财的角度,换位思考,其实就是:想投资——挑选——看看优惠——挑挑其他的——再看看优惠——再看看其他的——还看优惠。


       用户为何反复的从列表页进入详情,又跳转回列表页再进入详情页?这就是突破口了,想清楚这一点,解决思路也就清晰了

我们举一个现实生活中的购物场景来帮助思考分析(灵感来源于生活)。

购物路径1:想买东西-找到对应的货架-使用优惠券并买单;


购物路径2:有优惠券-到超市看看有没有想买的-使用优惠券并买单;



       在现实生活中,除了”有想买的东西”这一主观需求外,对交易产生一定决策作用的,就是优惠。

结合前面对投资用户路径的分析来看,用户交易路径如此反复,实际上就是在同样的资金投入的前提下,对比不同的项目、不同的优惠,如何搭配才能利益最大化,这就是用户的最核心需求。


       如何帮助用户快速完成相关数据的对比,缩短操作路径,降低交易耗时,从而减少流失提升成交率,这就是解决思路,也是我们需要增长(优化)的数据指标。


       基于场景化的分析明确用户的核心需求,确定需要增长(优化)的数据指标,我们提出来了两个解决方向。



[ A方案——详情页的快速切换(优化) ]

       ,在原有的路径上,保持用户的操作习惯,新增详情页左右滑动切换的功能,用户学习成本低,开发成本低,可快速上线,但对于路径优化、数据对比不够直接,治标不治本;



[ B方案—— 设计新的快速路径(创新)]

       结合前面分析的两种现实生活中的购物场景,在原有的路径上,针对平台老客对平台项目的规则详情已经清楚了解的特点,设置多一条快速通道,减少干扰,对比直接,加快老客的决策速度,但用户学习成本高,开发成本高,虽然治本但风险也大。



3. D design

       到此为止,我们就可以进入具体的解决方案的尝试了,设计师的方案,自然就是设计稿了。


案例:

       A方案直接开发上线即可,上线后就可以收集数据进行分析了,经过两周的时间,从数据表现来看,交易总时长稍有所下降但并不明显,约下降了2%,而交易率基本持平。


[ B方案最终UI稿 ]

       在此期间B方案完成设计开发后,协调产品运营推广等业务方,选择确定部分渠道进行ABtest,经过一个多月,持续收集数据反馈优化方案,多轮ABtest后,从数据反馈来看,B方案数据提升明显,有效的降低了用户的决策时长(降低了近20%) ,提升交易成功率(老客转化提升1%),说明方案的可行性强,随即全量更新。


       从随后的数据表现来看(总转化提升0.3%,总时长降低15%),整体方案对平台的整体效益产生了积极推动作用,说证明了设计团队对于产品与企业的价值(我们不是美工)。

       在后续工作过程中,持续根据数据表现,分析,发现并提出问题,提出解决方案,测试验证,不断的循环重复,持续提升用户体验,以数据为依据,以增长(优化)为目标,这就是我们对于UGD的一些思考跟尝试。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:包大佬

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



按钮的最佳尺寸到底是多少?

资深UI设计者

很多设计师包括我在内对按钮尺寸有着颇多困惑。为什么很多产品甚至苹果本身并没有遵循 44pt 的标准规范?为什么有些场景下的 CTA 按钮那么小?按钮的最佳尺寸到底是多少?按钮规范背后到底是什么样的科学依据?这些依据可否量化?

emmmm,如果你和我一样有着这些困惑,本篇文章应该可以给你很多启发。

按钮尺寸对点击行为的影响

按钮的尺寸具体影响到的依旧是视觉和交互的两种能力。

视觉能力上很好理解。当一个元素尺寸越大,人眼就越容易抓捕到这个元素。所以那些越重要的东西,往往会给予更大的尺寸来强制用户注意到它,这也可以解释为什么甲方总喜欢不停地在背后指指点点嫌弃元素太小,就是因为这些元素对他们来说非常重要,只是他们没有我们那么专业,知道强调一个东西的手法不仅仅是放大一种策略。

因此,相对较大的按钮尺寸从视觉上,可以迅速捕获用户的注意力,对点击行为是有益的。

而在交互能力上,涉及到的依然是前篇提到的菲茨定律——目标尺寸越大,移动至目标所花费的时间就越短。所以,较大的按钮尺寸可以降低用户交互的交互成本,使得目标更加”易点“,对点击行为同样是有益的。

但是,按钮尺寸并非越大越好,一方面是避免视觉上的失衡,另一方面也会受到界面空间限制、以及场景差异等因素的影响。

规范中的定义

我们先来看下 iOS 的。苹果规定的最小点击区域是 44pt,这意味着一旦点击区域低于 44pt,将可能会出现点击失准的情况。当然,一些控件(标签栏图标、文字链)可以在视觉表现上只有 24pt*24pt,但是会在周围加入额外的填充使其达到 44pt。

但是,在实际的 iOS 原生产品界面中,很多按钮并未严格执行 44pt 这个数值。小于 44pt 的按钮比比皆是,比如信息页的发送、App Store 的获取、购买浮层的确认、添加 siri、导航类右上角的工具型按钮,它们的点击区域为按钮本身,但是均未达到 44pt。况且其中有一些还是非常典型的 CTA 按钮,比如 App Store 产品详情页中的获取按钮,它的高度仅仅是 27pt。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

而 Android 中的按钮建议尺寸是 56dp,但是和 iOS 一样存在着大量低于这个尺寸的情况。其中不乏那些 CTA 按钮。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

这些情况的发生其实也很好理解,每个按钮所对应的用户场景、业务诉求不同,因此并不能一招鲜用一个尺寸吃遍所有场景。但是,有没有一些科学的依据来可量化地解释按钮尺寸对点击的影响?

从 Apple Music 说起

著名产品设计师斯科特·赫尔夫就曾在他的文章《Using science to make truly tappable user interfaces》中提过,iOS9 的 Apple Music 在锁屏界面下的按钮过小,经常会发生无法准确点击的情况,他需要集中精力精确得点击才能完成任务。

不过苹果在 iOS10 之后,锁屏界面下的三个按钮、乃至进度、音量的控制球全部被显著地增大。这使得歌曲点击操作的错误率明显下降,不论是在什么场景下(你懂得,跑步、挤地铁这些不可控的场景下总是会有听歌的需求)都可以轻松地点击。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

而他为了解释按钮尺寸所带来的变化,引入了历史上著名的两个实验。

第一次实验

2006 年,芬兰 Oulu 大学,Maryland 大学和 Parck 学院的研究人员组成一个研究小组。他们的研究目标是,确定在触摸屏幕上单手使用最容易的按钮尺寸。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

他们进行了两组不同场景的实验。第一组让受试者执行一次性的任务,点击一个 CTA 按钮、复选框或者多选框;第二组让受试者执行多次连续的任务,比如输入电话号码。并且在实验期间,研究人员测试了每一种场景下按钮的尺寸。最终的实验结果表明,单个任务下,按钮尺寸小于 9.2mm 后错误率显著增加,而多次连续任务下,按钮尺寸小于 9.6mm 后的错误率显著增加。

特别的是,对于多次连续任务,9.6mm 到 11.5mm 之间的错误率基本不变。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

看到这,来稍微总结一下,9.2mm 和 9.6mm 是两个关键的尺寸节点。在单次任务和多次连续任务下,按钮尺寸分别小于 9.2mm 和 9.6mm 会导致错误率的攀升。这个结果和 MIT Touch Lab 研究得出的最佳热区尺寸 10mm 很接近。

第二次实验

当然,这还不算完。5 年后,德国两所大学的研究人员又进行了一项类似的研究,目的是确定触摸屏幕按钮的最佳大小。

他们的实验方法相对就很潮了。他们专门开发了一款安卓游戏,游戏玩法也很无脑:玩家必须要精准地点击到屏幕中任何地方飘动的任意尺寸的圆圈,游戏才能继续。并且速度越快,得分也就越高。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

这款游戏在上线之后被下载了 10w 次,并且悄咪咪得暗中记录了用户所有的点击行为,记录总量约为 1.2 亿次。

最后根据统计分析,得出了错误率和圆圈尺寸的图表关系。你可以看到,和 5 年前的实验同样,呈现类似的指数关系。研究人员根据图表发现:

在圆圈尺寸小于 12mm 后,错误率开始逐步提升。在尺寸小于 8mm 之后,错误率高达 40%以上。并且研究还发现,在圆圈尺寸超过 12mm 之后,玩家的正确率并没有得到显著的提升。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

结论

由上述的两个实验,我们可以概括出一些有用的结论。

  • 根据各自的实验,在目标尺寸分别小于 9.2mm、9.6mm 或者 12mm 后,均会导致错误率的攀升;
  • 当目标尺寸增加到一定程度之后,正确率基本保持不变。

那么,按钮的最佳尺寸到底是多少呢?

斯科特将实验得出的关键尺寸与苹果、谷歌和微软三大规范进行结合,发现了一些有意思的现象——

  • iOS 的 44pt 对应到实际尺寸为 6.9mm,约 7mm;
  • Android 的 56pt 对应到实际尺寸为 8.8mm,约 9mm;
  • 而微软的 9mm+两边 2mm 的热区,对应的实际尺寸为 13mm。

可以看到 Android 和微软的尺寸,基本对应到了这两项实验得出的关键尺寸。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

最后,再来看下开头 iTunes 的锁屏界面的按钮。可以看到从 iOS9 到 iOS10,苹果将按钮可点范围由 7mm(44pt)扩大至 12mm(82pt),结果也正好符合了微软的规范。看到这里,你肯定更困惑了——按钮的最佳尺寸到底是多少?

其实,并不存在什么按钮的最佳尺寸。

不论是 iOS 的 44pt,Android 的 56dp,还是微软的 82pt,都需要具体情况具体分析。界面布局、用户场景、业务诉求等等,都属于按钮尺寸的影响因素。

比如下面这些 iOS 端产品的 CTA 按钮,它们的尺寸最小到 26pt,最大到 87pt,而且每个产品内部的 CTA 按钮也存在差异。你能说出这些按钮哪一个是最佳尺寸吗?

按钮的最佳尺寸到底是多少?这篇给你权威答案!

当然,我们起码可以去界定一些相对可控的范围。

这里我简单根据斯科特文章中的结论,结合市面主流产品的情况划分出按钮的几类尺寸:

1. 常规场景、局部模块

比如 App Store 的产品详情页的获取,知乎中个人主页的关注,都属于当前页的局部模块,点击之后通常是状态的变化或者出现新的弹层。这些按钮的尺寸我建议控制在 28pt~40pt 之间。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

2. 常规场景、全局模块、强业务属性

比如微信个人页的添加好友、各大电商商品详情页的加购、登录注册页的登录注册等等。这些页面的 CTA 按钮隶属于页面全局,所以可以给它极高的权重、甚至全局吸底展示(如详情页),以更快地促进点击。通常,这类按钮在常规场景下具备了最大尺寸。我个人的建议是保持在 40pt~60pt 之间。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

3. 不可控场景

不可控场景的意思就是,用户点击按钮时所处的场景可能比较特殊,并且这种特殊的场景很可能给用户带来一系列无法掌控的风险。

比如 keep 在跑步场景下的按钮,就需要充分考虑到跑步时不稳定的状态,如果按钮和常规场景一样,那很容易发生无法准确点击的情况,增加意外事故发生的概率;包括来电场景、地图导航场景、快递取件场景等等,都属于不可控的场景。各位可以自己代入脑补一下,这些场景中无法准确点击时容易产生什么样的后果。

所以这些场景中的按钮就得够大,以尽可能覆盖到那些极端的不可控情况。我个人的建议保持在 60pt~90pt 之间。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

当然,这仅仅是很粗略的参考区间值,如何结合现有业务诉求、用户场景需求等因素去合理地界定才是重中之重。如果为了追求最佳效果或者尺寸的一致性,反而有些舍本逐末的意思。

其实从知乎去年 10 周年的大改版可以看到一些有意思的细节。很多按钮的高度比以往更高了。比如盐选会员的续费按钮,由之前的 36pt 提升到了 40pt。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

个人主页的关注按钮也由 28pt 提升到了 32pt,你仔细看的话,按钮的宽度也发生了变化,从之前的 90pt 提升到了 100pt。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

邀请回答界面中的写回答按钮,也由原本的文字链,提升到了实心按钮,高度则直接复用了关注按钮的尺寸——32pt。哦,不好意思,这应该是按钮设计形式上的改变。

按钮的最佳尺寸到底是多少?这篇给你权威答案!

总之一句话,知乎这次的改版,CTA 按钮的尺寸更大了。我们从尺寸对点击行为的影响可以推导出,这次改版背后更为明确的业务目标——促进UGC内容生产、促进关系链沉淀(一旦沉淀了复杂的关系链,用户也就更难以离开平台)以及会员付费转化。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设   作者:转行人的设计笔记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




用户错了吗? 防错与容错

资深UI设计者

据说只要可能犯错,就一定会有人犯错,用户犯错的可能性比我们想象中要大得多得多得多
做好防错与容错,可以让用户更顺畅...




据说只要可能犯错,就一定会有人犯错,用户犯错的可能性比我们想象中要大得多得多得多得多。

做好防错与容错,可以让用户更顺畅的达成自己的目标。


恩,用户总是那么不可理喻对吧

都做得那么明显了,还犯错。该提醒的也提醒了...诶~

打住,打住,当用户犯错时,别急着怪他,我们需要先判断清楚。


一、用户真的错了吗?

用户委屈的说:“来来来,我就想下载一个资源,大家都是讲道理的设计师,来评评理,我错在哪里?”

这,这... 每一步的确都好像没问题,那,问题究竟在哪?

作为设计师的你是不是已经敏锐的察觉到了什么?

对,关键点在 ' 67bh ' 这里。都是空格惹的祸!

那好,你准备好方案救用户了吗?......(这里理论上应该停顿30s以上吧)。

当然,现在不会公布答案,方式有好多种。留着你看完文章中间部分再跟大家一起找方案吧。

这一部分的重点不是方案,而是思维。


很多时候,用户并没有错,作为一个有担当的设计师,我们可不能甩锅。

有了这个前提,我们就可以去掉心中的那些烦躁和埋怨...开始愿意伸出援手,去拯救用户了。


二、如何避免用户“犯错”

对,这个疑问就已经包含了解决方案了。

真的感叹中文的博大精深,避 (防错)、免 (容错)。

为了让大家能更好的理解什么是防错和容错,我特意举一个例子哈~

(什么,防错容错你都懂?你怎么知道我讲的跟你想的一样呢,既然这么厉害赶紧做下面这道题。)

对,就是图片里那个拿滑板的家伙,估计是第一次来这片海滩,有鲨鱼都不知道,还使劲忘海里冲...


从避(防错)的角度来看,你有什么方法帮他呢?(先不考虑哪种方法更好也不要考虑成本哈,能达到目的的都行。)

友情提示:防错的目的是让用户在操作之前,尽量减少用户出错的可能性。


看看的你脑袋是不是真的转得飞起...

我这边有几个想法,看看我们有没有缘,想到一块儿去了:

  • 大声告诉他,这位拿滑板的大哥,海里有鲨鱼,别忘海里冲了...

  • 警告这位大哥,嘿兄弟,这里只允许坐轮船和直升机去海岛那边。

  • 在通往海岛的路线全程搭起防鲨网。

恩,目前就想到这些了,还有方案的同学可以在评论区炸沙发哈。


这些方式,我们试着抽象一下:

  • 【提前做好引导和提示】大声告诉他,这位拿滑板的大哥,海里有鲨鱼,别忘海里冲了...

  • 【优先选择减少输入】警告这位大哥,嘿兄弟,这里只允许坐轮船和直升机去海岛那边。

  • 【限制原操作范围】在通往海岛的路线全程搭起防鲨网。

大家应该都发现了,这种方式虽然能达到让用户安全的目的,但是用户会有挫败感,同时也会有被限制的感觉。

我只要说到USB插头,大家应该就开始脑补画面了吧“为什么我插的进去的第一次永远是错的方向,OMG!”

那,容错呢?


还是这位拿着滑板的大哥,想要去海上的小岛,从免(容错)的角度来看,你有什么方法帮他呢?

友情提示:容错的目的是在用户操作之后,自动纠正/化解错误或提供挽回的方法。


我有几个奇怪的方法,来跟大家分享一下:

  • 呃...驯化/杀死鲨鱼。

  • 派一直专业驱鲨救援队跟随这位大哥(滑板大哥:我何德何能,太感动了)。


同样,我们继续抽象一下:

  • 【让原本的错误不影响用户行为和结果】呃...驯化/杀死鲨鱼。

  • 【出现错误可挽回】派一直专业驱鲨救援队跟随这位大哥,出现鲨鱼就杀鱼。


诶,成本好像非常高哈,但是用户感觉良好哦~

因为他甚至都感知不到这片海还有过危险,按自己喜欢的方式行动就行。

我提一提微信消息的撤销功能,大家可能就会舒缓一口气了。

不知道挽回了多少个尴尬的瞬间,是吧~

可是...我只是一个有无缚鸡之力的设计师,我肝不过鲨鱼怎么办?

来来来,前面那个喊救命的大哥又来了,大家赶紧想想办法吧~


三、试用一下以上方法

(第一步和第四步就是单纯点击,就先删掉了)

前面讲的方法也列在右侧了,看看你们是不是可以针对每种方法找到对应方案了呢?

看看是不是可以这样?


方案一:使用方法-提前做好引导和提示


方案二:使用方法-优先选择减少输入


方案三:使用方法-限制操作范围


方案四:使用方法-出现错误可挽回


方案五:使用方法-让错误不影响结果


在这个案例中,大家觉得那个方案更好呢?

好吧,这个问题的确很蠢。当然是 方案二 + 方案五 结合使用了。因为是两个平台的交互,而对于各自平台而言,一个控制好输出,一个控制好输入。对平台自身的容错性有很大的帮助。

通过上面的案例,相信大家都已经熟练掌握好防错和容错的方法了。

什么,还没掌握?那你滚回去,(望着你正在慢慢蜷缩的身体)不.........不是你滚,是你的鼠标往回滚!

那,我们先不管那几个往回滚的同学,开始进行强化学习啦~


四、带着思考学习

找了一些生活中经常用到的产品,让大家感受一下防错容错的魅力。

如果你根本无法从图中发现什么,那我只能说... 你还是需要经常用银杏叶擦擦眼睛了(因为擦了之后你就更容易发现(人性)。

案例先到这里,大家一定以为要结束了吧~不,不,前面这些都不是最重要的。

方法总会越来越多,靠“别人”总结的方法也就能应个急。

来来来,放空~~~~抛弃你的职业相关认知、抛弃你的设计师的身份,你再看我们的设计。

你像孩子一样,好奇又“无知”。

你会发现,为什么会有这么多奇怪的看不见的规则,为什么我这么难完成我的任务。


五、提前预知错误风险(重点)

如果当客户遇到问题,你能用合适的方法去解决,那你已经是个不错的设计师了,但离优秀还很远,因为优秀的设计师必须具有敏锐的嗅觉,要在产品团队的前面,感知并规避风险。

所以,更重要的还是,我们必须学会变身。

好了,这一次真的需要大家独立思考了,并且没有标准答案,大家可以交流交流。


在以下场景中,可能会出现什么“错误”,如何有效处理用户“犯错”?

在生活中,其实会有很多很多“让用户犯错”的产品/场景,多参与其中,去发现问题,去思考解决方案,慢慢的,你就会具备非常好的问题发现能力和解决能力了。

说了这么多,可能有一部分同学会想说:

“用户出错的情况应该很少吧,你花这么长的篇幅”

“你一定低估了用户的智商”

我告诉你,出来玩玩,谁带智商做事啊~

不信你看。


六、那些你可能想象不到的用户错误

百度一下,你会发现用户犯错的可能性大大超出你的预期。

只是,你以为与你“无关”而已。


七、防止用户犯错的设计可能比你想象中更难,更重要

要防止用户犯错,你需要不断的模拟用户的操作行为,去捕获那些可能存在的问题,然后将它一一化解;这个过程很难,因为你要抛开自己以往的经验和认知,去感受用户的视角。


想想,用户体验的改进不就是让产品越来越符合用户认知,从而减少用户“犯错”吗?

只是有些错误,我们只作为围观者,将它推向了用户。

从现在起,将“错误”留给自己。




 蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:得勿

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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






移动端导航设计

资深UI设计者

合理的移动导航设计能够尽可能地减少摩擦,引导用户去他们要去的地方。

这篇文章汇总了移动端导航设计最常见的样式、要注意的设计准则以及优秀的案例分析,一起来系统性地掌握这些知识~

什么是移动端导航?

简单来说,导航是用户从 A 点到 B 点的方式,是他们发现设计点并与产品交互的过程。

可能很多用户认为导航的目标是“在尽可能短的时间内让用户从 A 到 B”,但时间短只属于操作结果,这个结果需要依靠合理且简单的设计才能实现。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 一个页面中可以存在多种导航。例如在油管首页,有顶部导航栏、筛选器导航和底部导航,这些导航相互搭配为产品助力。

移动端导航常见的设计样式

1. 汉堡菜单

围绕汉堡菜单有很多争论,但存在即合理,在合适的场景下汉堡菜单也能发挥大的作用。

来看一下汉堡菜单具备的优势:

  • 视觉空间:节省屏幕空间,包含有价值的信息;
  • 心智模型:大多数用户熟悉这种设计样式并知道如何操作;
  • 使用经验:调节学习曲线,改善使用体验。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 使用用户熟悉的设计可以事半功倍。例如美团和饿了么两个产品有着完全不同的主题色,但外卖点餐流程却是一样的,仍然是用户熟悉的操作,并没有因为产品的不同而改变点餐流程。

2. 底部导航

底部导航栏通常包含产品中最主要的导航链接,用户只需要简单的点击就能直观地在不同页面间切换。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 几乎每款产品都缺少不了底部导航栏,它方便用户单手操作,不需要太费力就能快速访问产品页面,提高可用性。

3. 顶部导航

关于顶部导航,可以看之前分享的文章,里面详细介绍了顶部导航的设计方法。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 顶部导航通常包含页面中最重要的信息,与其他辅助导航结合使用。

4. 卡片式导航

卡片式是一种出色的设计样式,支持改变各种形状和大小,并且能展示文本、链接或照片等各种元素。

随着网络上的内容越来越碎片化和个性化,卡片是在页面中聚合单个信息的好方式。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 为了改进体验,卡片可以个性化显示不同的内容。另外卡片很容易适应不同的屏幕尺寸,配合响应性设计。

5. 标签

标签往往是在一个大主题下同时支持多个选项,每个选项都转到不同的界面。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 标签通常用于在同一页面中的几个视图之间切换,展示内容上的差异性。而顶部导航栏有主页、搜索、收藏夹等多个图标,代表不同的功能。

6. 基于手势的导航

基于手势的导航可以让用户在所需方向上快速滑动,来完成特定的操作。

这种样式的优点在于,即使最没有经验的用户也很容易掌握,因为手势通常是直观的。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 国外大火的约会产品Tinder以及国内的探探,都使用了基于手势的导航样式,为用户带来滑动的乐趣。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 基于手势的导航并不是Tinder发明的,但这款产品无疑将这种流行带给了大众。经典的向左或向右滑动模式保持了事物的动态性、简单性和娱乐性。

7. 全屏导航

全屏导航是指将大部分屏幕用于导航操作,能够很好地将用户的注意力聚焦到具体的产品细节上。这是一种以连贯的方式提供大量导航的方法,可以立即帮助用户了解产品的功能。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 点击图片可以跳转到全屏大图导航中,能够更清晰地查看商品的外观状态。

8. 3D touch

最初是由苹果公司提供给用户的,这是一种创建导航快捷方式的方法,可以显示选定的 APP 的一些关键操作。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 苹果为手机创造了一种全新的快捷方式,同时提供了强大的可用性。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 3D touch另一个用途是内容预览,在处理内容选项时例如收件箱或文章列表时,这是给用户提供预览的好方法。

移动端导航设计准则

1. 导航需要直观明显

对所有类型的导航来说都是如此。在移动端中由于屏幕空间的缩小和交互成本的增加,导航体验的好坏会对产品产生很大的影响。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 从可用性角度来看,直观的导航对目标用户来说至关重要。这意味着需要进行严格的测试和大量的研究,可以使用卡片分类或树状图等方法来验证导航的可用性。

2. 考虑手指的位置

这点对于移动应用来说至关重要,没有用户想反复点击图标却没有反应。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 链接和按钮的尺寸需要足够大,以便大多数用户在第一次点击时就能成功点击。页面中按钮的尺寸最小通常保持在10mm。

3. 建立视觉层级避免混乱

小屏幕意味着更容易陷入混乱。即使页面中有少量的元素,如果元素没有平衡,用户仍然会有混乱的感觉。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 极简主义是UI设计的一种特定风格,通过必备的顶部导航栏、留白以及由大小、版式、颜色划分的视觉层级来规划页面内容。

移动端导航示例分析

1. Facebook

Facebook 的导航构成比较复杂,融合了多种不同样式的导航。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ Facebook主页包括汉堡菜单、顶部导航栏和底部导航栏。通过这种方式,这家社交媒体巨头明确的将主要内容与次要内容分隔开。

2. Spotify

Spotif 作为音乐流媒体业务的巨头,即使对于新用户来说,页面的设计也容易理解和探索。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 以高度视觉化的形式突出每张卡片背后的关键内容,另外底部导航也可以完成繁重的任务指引。

3. App Store

App Store 是使用标签进行导航的好例证,每个标签代表了同一内容的不同方面。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 在排行榜中,用户可以浏览付费、免费和热门的标签页,从而快速建立一致性和对其他页面的感知。

4. Telegram

Telegram 可以供任何人使用,汉堡菜单提供了用户可能需要的所有关键导航选项。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 每个用户都能立即找出汉堡菜单,非常容易使用和理解,而且几乎不占用界面中的宝贵空间。

5. Yelp

yelp 在创建全屏导航体验时采用了一种稍微不同的方法。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ Yelp将屏幕划分为两个不同的区域,实际上并没有将整个屏幕专门用于导航选项,而是将顶部用于导航选项,并在底部留下更多的负空间。

6. Trello

页面中的卡片是拉长的矩形,整齐有序地填满屏幕空间而不会让用户不知所措。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ 卡片系统很好地代表了Trello简化复杂工作流程的能力,为用户带来整洁和方便。

7. Twitter

同样使用了多种导航混合的设计样式。

你了解移动端导航设计吗?收下这篇系统性的总结!

△ Twitter将导航重点放在底部栏上,涵盖了整个平台中四个主要的方面。

最后

没有高速公路,我们很难便利地在城市间穿梭。同理,如果没有导航,一款 APP 的使用也会遇到很多麻烦。导航就像高速,不断在为用户提供必要的指引!




 蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:Clip设计夹

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



QQ音视频产品,是如何做好体验设计的?

资深UI设计者

面对国内外竞品崛起,QQ 音视频如何寻求突破,制定对用户有价值的策略,赢得数据增长和用户口碑。

现状分析

要突破用户增长停滞的困境,需从全局角度思考,对问题所处的系统进行分析与洞察,找出拓展应用场景的机会点,提供技术或价值创新的功能与服务。

1. SWOT 分析

首先,针对 QQ 音视频所处行业的竞争态势进行全面、系统的分析,包括内部优劣势,以及外部机会和威胁,以此制定相应的策略与计划。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

2. 用户洞察

关注竞争对手,更要研究用户,通过用户调研洞察用户需求,找出 QQ 音视频应持续巩固优化,以及需考虑突破的使用场景。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

3. 行业趋势

综观音视频的行业发展与科技趋势,有三个主要的发展方向:

超高清视频

5G 高带宽、低时延将开拓更多玩法和业务场景,超高清视频通话将带来更豐富的感官體驗,犹如面对面沟通。

应用场景多元化

从使用场景来看,音视频已走出会议室,从单纯的沟通交流,扩展至丰富的应用场景,广泛服务于人们的日常生活。

智能终端+音视频云服务

未来智能终端将具备联网连接的能力,搭配音视频服务提供商的云服务,使得通话无所不在,可随时通过智能终端进行音视频通话。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

愿景规划

综合前述分析,提出 QQ 音视频的用户体验愿景(UX Vision)和价值主张(Value Proposition)。

1. 用户体验愿景

QQ 音视频的本质在于沟通,其声影重现的独特优势,消弭了空间距离。未来随着通信技术的演进,高画质、低时延、实时互动的感官体验,将实现远距临场(Telepresence)的终极目标,使用户感受到近乎面对面交流的体验,就像在眼前〝一起做〞某些事。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

2. 价值主张

综上所述,提出 QQ 音视频为用户传递的价值——社交临场感(Social Presence)。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

临场感相关理论与研究,源自 Short、Williams 和 Christie 等三位学者于 1976 年所提出的社会临场感理论(Social Presence Theory),指的是双方通过传播媒介进行沟通的过程中,所能感受到对方真实存在的程度。QQ 音视频凭借高度的媒介丰富性,提供实时响应、语言/非语言线索交互,使用户能轻易地在社交互动中感知对方真实存在,进而在心理上获得归属感与认同感。

根据过往文献与媒介特性,将 QQ 音视频的社交临场感分为四个层次:

界面质量(Interface Quality)

界面可用性与视觉设计不会干扰操作,能让用户专注于音视频沟通。

真实感(Realness)

音视频的声画体验及与人交流的方式,能贴近于真实世界。

互动性(Interactivity)

用户之间的互动交流越强,越能感受到对方的存在。

情感传达(Affective Expression)

通过情绪表达、环境氛围的营造与对方建立连接,在心理上感到彼此的存在。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

策略制定

围绕社交临场感的价值主张,制定突破当前困境的目标与设计策略。音视频产品除了广泛应用在通讯场景,正逐渐赋能更多创新场景。基于 Q 群生态和调研结果,聚焦于生活、办公、娱乐等场景进行探索。

1. 设计目标

两个主要的设计目标:

重塑体验

回归通讯本质、夯实基础体验,对通话界面进行改版设计,让用户专注于音视频沟通。

场景探索

开拓应用场景,通过社交临场感赋能生活、办公、娱乐等场景需求,为用户创造价值。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

2. 设计策略

针对 QQ 音视频的应用场景,制定相应的设计策略。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

通讯本质——专注沟通更无碍

过亿人使用的QQ音视频产品,是如何做好体验设计的?

界面质量是影响社交临场感的关键要素,然而调研结果显示,QQ 音视频的通话质量和体验落后竞品,包括主界面功能复杂、通话流程痛点多、核心能力落后竞品等体验问题。

针对上述问题,提出 QQ 音视频改版的设计思路:

  • 化繁为简,回归本质
  • 链路排查,解决痛点
  • 补齐短板,超越竞品

过亿人使用的QQ音视频产品,是如何做好体验设计的?

1. 化繁为简,回归本质

分析不同通话类型的用户习惯,以及各个功能的使用数据,区分功能优先级,分为核心功能、辅助功能、高级功能等三个层次,重新定义功能架构与布局。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

  • 主界面:少就是多,收折非常用功能,确保核心通话体验。
  • 更多面板:主界面功能越少,更多功能入口越能起到引导作用,从右上角找到进阶功能。
  • 快捷手势:通过新手引导、红点引导、快捷手势,满足高级用户的需求。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

2. 链路排查,解决痛点

运用认知走查(Cognitive Walkthrough)快速排查通话过程存在的用户痛点,并将缺失的功能与信息补齐,最终解决超过 16 个以上的可用性问题。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

3. 补齐短板,超越竞品

对于视频画面的思考:

QQ 采用 1 大 N 小的画中画模式,适合 1 人主讲、他人观看的场景,主客位明显,缺少一种与他人共在的感觉;反观微信是 9 路宫格画面,视频画面仅聚集在上半部,有利于节省流量,但同时也限制了屏幕利用率。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

兼合上述两者的优点,设计了 16 人视频通话的功能:

  • 100%屏幕利用率,让内容展示更完整。
  • 力求面画均等分割,最多支持 16 路视频。
  • 手势快速切换宫格与画中画

过亿人使用的QQ音视频产品,是如何做好体验设计的?

16 人视频通话也延伸了不同的创意玩法,例如祝朋友生日快乐、拼字表白或求婚。

生活场景——与你陪伴更有感

过亿人使用的QQ音视频产品,是如何做好体验设计的?

QQ 视频通话重度用户的通话对象,主要来自恋人伴侣,这类用户最希望获得〝在一起〞的陪伴感,而社交临场感的〝真实感〞是营造音视频陪伴感的关键因素——彷佛对方就在眼前,两个人一起聊天、一起做某些事。

1. 让他 ‧ 她看到最好的你

声影的真实感,是让对方感受到你就在眼前的必要条件。真实感包括流畅度与清晰度,通过用户行为分析,发现在不同场景下,用户对视频清晰度与流畅度有不同偏好 。

为此,QQ 音视频开创了的高清 / 流畅模式,用户能根据自身需求做选择,切换自动、流畅 480P、高清 720P 三种模式,针对不同模式定制码表,匹配不同的帧率和码率。除此之外,QQ 音视频也与手机厂商合作,开发 QQ 5G 1080P 超高清视频通话,提前布局 5G 应用。

2. 记录〝在一起〞的时刻

创造情感连接,有助于拉近彼此距离,营造陪伴感。有什么是情侣、闺蜜平时会做的事,因为分隔两地不能一起做了?

循着这个思路,设计了全新的双人合拍模式。距离遥远的两人,通过 QQ 音视频实现留影合拍,让彼此的情感得以沉淀。另外,为了增添合拍时的乐趣,该模式结合了 P 图资源与人脸识别的能力,让用户可选用场景模版与挂件,创造属于两人的高光时刻。

3. 〝一起做〞某些事

情绪之间的感染,更能强化陪伴感与互动感,据此设计了第一款支持视频聊天的一起看应用 ——视频包厢。有别于Q群一起看的广播形式,视频包厢诉求更亲密、1v1的陪伴感,彷佛对方坐在身边,一边看剧、一边聊天。视频包厢的价值,除了提升QQ音视频的互动性,也为关系链活跃拓展应用场景。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

办公场景——群体沟通更高效

过亿人使用的QQ音视频产品,是如何做好体验设计的?

线上会议是办公用户主要的使用场景,一方面将聚焦用户核心需求,思考办公场景的功能设计,另一方面增强用户之间的互动性,让会议更具社交临场感,就像面对面沟通一样高效。

1. 沟通更多元

为什么需要文字聊天?当主持人开启全员静音,此时无法回应讲者;多人通话时,最多同时听到 6 个人的声音;不方便开麦或摄像头,又想参与互动。

为了解决痛点、完善沟通形式,QQ 音视频新增了文字聊天的功能,可通过手势快速展开 / 收起聊天界面,并支持发送表情和文字消息;这些消息只会在通话界面沉淀,不影响未参与会议的群成员,避免不必要的打扰。

2. 轻松会议管理

对办公用户而言,线上会议需要完善的管理机制。QQ 音视频尝试结合 Q 群管家机器人,小成本实现通话预定。用户能设置通话主题、开始时间、会议提醒,并支持分享会议链接到微信、QQ 空间等其他渠道;获取链接的用户,能快速拉起 QQ 加入会议。

3. 以我所⻅为你呈现

面对面分享是信息共享最有效率的方式,分享者能够当面指出要点,有效地表达与沟通。QQ 音视频借助系统镜像投屏,实现边通话、边共享的能力。在商务会议中,将手机中的信息与操作,实时同步给其他参会成员,例如文件、照片、邮件内容等,并支持同步画面、设备声音。另外,诸如游戏分享、作业辅导、操作协助等场景,都能通过屏幕共享满足需求,为用户带来实质性的效益。手机端最后一块拼图完成后,QQ 多端皆可实现屏幕共享,现已成为 QQ 音视频的口碑能力。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

娱乐场景——线上聚会更好玩

过亿人使用的QQ音视频产品,是如何做好体验设计的?

疫情期间,线下聚会被迫停止,线上娱乐应运而生。在此契机之下,借助音视频实时互动、声影重现的特性,开启了新的娱乐形态——QQ一起派对。

QQ 一起派对是基于音视频展开的实时社交游戏,旨在打造真实聚会游戏体验,让游戏过程更贴近线下真实场景,就像面对面一起玩聚会游戏,能与好友边玩游戏、边聊天。通过环境氛围的营造,包括场景具象化、增强代入感等方法,实时感知好友的情感变化,从而获得社交临场感,在心理上感到彼此的存在。

此外,有别于竞品需通过点击按钮作答,QQ 一起派对利用实时语音识别,让用户通过更自然的人机交互方式,在游戏过程中进行语音抢答,彷佛置身于真实世界中与好友互动。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

成果:深挖场景,用户为口碑功能点赞

QQ 音视频经过一系列的体验重塑,获得不错的成果。基于生活、办公、娱乐等场景深挖需求,新增许多实用功能和创新玩法,为用户体验和价值创新奠定良好的基础,且归功于这些积累,以致于在疫情期间,QQ 音视频能不畏竞品的挑战。除此之外,多项新增能力,例如屏幕共享、视频包厢、QQ 一起派对,获得用户广泛好评;调研显示,用户乐于将 QQ 一起派对推荐给其他人,足见该功能获得不错的用户口碑。

过亿人使用的QQ音视频产品,是如何做好体验设计的?

结语

对于音视频行业来说,疫情迎来的爆发式增长,无法保持高速成长态势,会有一定程度的回落,但能提高大众接受度和习惯养成,认识到音视频能在一定程度上替代线下沟通,不仅限于通讯功能,音视频应用拥有更多的可能性,正逐渐赋能更多创新场景。为此,QQ 音视频基于社交临场感,探索并赋能生活、办公、娱乐等应用场景,提供技术或价值创新的功能与服务,为用户创造独特的价值。

面对市场上同类竞品的崛起,作为一个 UX 设计师,除了因应产品思维设定目标,亦应思考如何以价值驱动解决问题:对于如何解决问题、迈向未来愿景,提出最适切、有效的方法。换言之,要关注的不只是当前面临的问题,更重要的是擘画用户体验愿景,提出该产品的价值主张,并制定相应的设计策略。


 蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



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

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

个人资料

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

存档