首页

UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

涛涛

交互和体验设计师在实际工作中可能会借鉴外来的理论,比如米勒法则。但是你知道吗,其实你们运用这一法则的时候也是有误区的。今天我们就来看看米勒法则到底是干什么的,我们应该怎么样运用它才能使我们的工作进展下去。


说到「米勒法则」(Miller’s law),你可能不太熟悉,因为它更多是被称作「7±2法则」,还有一个有趣的叫法——神奇数字7±2(The Magical Number Seven, Plus or Minus Two)。

这个法则阐述的是:人类的大脑短期记忆存在上限,最多可以记忆大约7±2,即5~9个信息团。

说起来这个法则还算简单,但我看见网络上许多讲解关于「米勒法则」在UI设计中用法的文章,都是在反复例举类似以下案例:

网页的导航菜单往往不会多余9项;金刚区往往一行只会有5个等案例。

这着实有点硬生生在套理论的味道。

UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

因为「米勒法则」研究的是人类大脑的短期记忆量,而导航菜单、金刚区这些场景,是侧重用户识别,而不是侧重用户记忆。

试想你作为用户的时候,你会去记导航菜单的名称吗,哪怕是短暂地记下来(就像我们记短信中的验证码,然后到另一个应用中输入的场景一样,短暂地记住)?

我想大部分的人在这些场景中,应该都是所见所得、过眼云烟的吧。

并且“导航菜单的设计旨在用户识别而不是用户记忆”这个观点,在UX研究咨询公司 Nielsen Norman Group(NN/g 尼尔森诺曼集团)的“web可用性”一文中也有指出。

UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

所以以上导航菜单、金刚区的案例,产品可能确实也是有在控制菜单项目的数量,但更多应该是出于对「希克定律」的考量,而不是「米勒法则」。

我之前也有在《交互四策略实现希克定律》一文中说过:

用户的决策能力会跟随选项数量的增长而降低,给用户非常多的选择,约等于没给用户选择。

这些案例完全是强行反推,给套了个「米勒法则」的结论,实属不妥。

那我就来谈谈,我对「米勒法则」的理解以及它在产品设计中的用途。

一、「米勒定律」在研究什么

米勒在1956年《心理学评论》刊中的《神奇的数字7±2:我们处理信息能力的一些限制(The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information)》一文中,首次提出「米勒定律」。

但该文只算是一篇阐述学术观点的文章,不算严格意义上的论文。

UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

米勒在文中引用了实验者记忆变化音调的实验,发现人们在短时间内可以很好地记忆并复述5~6位的信息,随着收到的信息位数增多,记忆出错的概率也在不断增加。

但因为实验者存在个体差异,最终的信息记忆量基本都能在该基础上再浮动2~3位。

所以得出了“人的大脑在短期记忆中最多可以记住大约7±2个信息团”的结论。

但因为该实验与文章不属于正式的科研研究和论文,所以后来的科研学者又对“人类短期记忆上限”进行了更多的实验研究,最后形成了很多种学说。

有坚持7±2的守旧派;有认为最佳短期记忆信息团为4±1的创新派;也有认为“人类的最佳短期记忆不应该被束缚于一个固定数值区间”的不站队派。

确实 NN/g 尼尔森诺曼集团也说过,用户的短期记忆能力存在较大的个体差异,前25%的人群比尾部25%的人群会好大约2.4倍。

但不论怎么说,这些实验都明确表明了:人的短期记忆存在上限,只是对具体能记住的信息团数量存在分歧。

基于这个结论,我们在设计产品时,该如何加以运用呢?

二、在人机交互中的运用

NN/g 尼尔森诺曼集团基于「米勒法则」,提出了以下几则设计指南参考:

① 响应时间必须足够快,以便用户在等待下一页加载时不会忘记他们正在做什么(体验侧)。

② 更改访问链接的颜色,以便用户不会忘记他们已经单击过哪里(UI+交互侧)。

不要让用户去记优惠券代码,而是该将优惠信息置入短信或邮件中的链接,通过链接自动将优惠券转移到用户的购物车中。

这样可以让计算机承担记住晦涩代码的负担(交互侧)。

③ 在用户可能需要帮助的场景显示“用户帮助”功能,这样他们就不必前往单独的帮助功能区去记步骤,然后再回来解决手头的问题。(交互侧)

你会发现,实际上专业团队对「米勒法则」的理解,基本都在于如何解决“人的短期记忆上限”问题,并没有去纠结,到底是7±2,还是4±1?

并且我在 NN/g 团队每一条设计指南的后面都标注了该条指南作用的侧重向,发现大多都体现在交互侧。

因为「米勒法则」研究的是人的短期记忆极限,在视觉表现层其实很少会运用到。

视觉更多强调的是“从识别到操作”,这并不是「米勒法则」的研究内容。

举一些切实的例子吧,基于「米勒法则」而诞生的产品交互中,我们最常接触到的就是移动设备自动获取短信验证码,方便用户一键填充。

通过图像识别用户的银行卡号,减轻用户记忆负担。

UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

这一类有关用户短时记忆的场景,为减轻用户记忆负担而诞生的交互形式,才是真正的基于「米勒法则」。

现在你明白了吗?因为「米勒法则」中提到了短时记忆极限量为7±2个信息团,让许多人都去关注数字了,而忽略了「米勒法则」到底在研究什么。

然而这个数值,迄今为止,在科研领域依然还存在着分歧。

三、关于「米勒定律」的拓展与延伸

1. 拆解与再组合

米勒在他发表的文章中也提到了:

虽然短时记忆存在上限,但是人们的大脑也总是在努力寻找其他方式拓宽这个极限,例如拆解与再组合。

在前面米勒让实验者记忆变化音调的实验中,就有人通过自主拆解、再组合信息形成信息团的形式,来增加自己最终记住的单位信息数。

基于此,前面图像识别用户的银行卡号的示例,如果因为技术受限而无法实现,我们也可以通过拆解卡号为“4位一个信息团”的方式,来方便用户记忆、输入与校验。这样在体验方面也是一种弥补。

UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

2. 让用户放弃记忆

要将用户的记忆负担减轻到极限,那就干脆让用户放弃记忆。

例如苹果基于自己的云管理与密钥技术,在识别到用户在创建密码时,会自动填充强密码,强密码复杂混乱到很难被人脑记忆。

UI&UE实用方法论 | 一直被错用的米勒法则(7±2)

一方面加强了密码的安全性;另一方面,搭载其他技术手段来减轻用户的记忆负担,不再纠结于用户究竟能记住多少个、多少位的密码。

直接将用户需要记忆的内容减轻至0,这也许才是真正基于「米勒定律」而创造出来的产品设计吧。

四、写在最后

其实这篇文章我认为更多是写给交互和体验设计师看的。

如果你着手的功能有涉及到用户记忆的场景,不防可以参考一下这些减轻用户记忆负担的案例,还有NN/g的设计指南。

但好像现在「米勒定律」被很多UI设计师用成套路了。

然而你发现了吗,文中「米勒定律」的案例,与视觉、与“7±2”很少存在关联。

如果文章开头导航菜单、金刚区的例子,你硬要说是参考了神奇数字7±2,我认为勉强也算行吧(嗯…勉强算)。

因为虽然我认为其设计理论更多是建立于「希克定律」之上的,但「希克定律」告诉我们要减少展示给用户的选项数量,却并没有给出一个建议值。

如果你希望在某些场合给你的设计一些立足点(大家懂的),你如果说结合了「希克定律」与神奇数字7±2,我认为比直接说基于「米勒定律」要更内行一些。

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

文章来源:人人都是产品经理   作者:UCD耍家

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


验证码,设计真的那么简单吗?

涛涛

编辑导读:自手机诞生至今,手机验证码的设计形式越来越多,图标的、语序点选的、空间推理的等等样式,让用户感觉新意的同时,也给设计者提出了难题:验证码的设计,到底应该怎么做才能更好的便利使用者呢?一起看看这篇文章吧,也许你会有新思路、新方向。

验证码“作为人机交互界面经常出现的元素,其本质是为了防止用户利用机器人程序自动注册、登录、恶意投票、发送垃圾邮件、恶意尝试密码等登陆尝试,保证网络安全。”

我们平时在使用互联网产品时会发现,对于企业来说,如何防止黑产恶意抓取企业数据资产,用户隐私,和恶意攻击等,网络安全问题重中之重。

对于用户来说,希望是极致用户体验,不打扰,能快速完成任务。

因此需要在两者间取得相对平衡,既兼顾企业网络安全,又能给用户极致体验。

本文是我在项目设计中总结几种常用到验证码。

我们如何在产品设计中恰当的运用验证码,让用户体验产品起来超级棒却又能保证产品的安全。

希望能为设计师伙伴们提供一些启发或帮助。

一、验证方式的分类

进入移动互联网时代以来,验证码的运用场景越来越广。

其验证方式可以大致归为以下几类:

1. 图标/图片点选验证

图标/图片行为验证可以保证非中文语言地区的用户可以轻松识别。

高安全级别,用户只需按照顺序点击图中图标/图片,即可完成安全验证。

但是如果选择图标/图片质量不高或者只显示一部分,就会无限增加用户识别能力,体验就超级不好。

比如12306火车票网站图片点选验证就被人唾骂。但是好处也多,那就是打击了囤票的抢票软件。

  • 防御能力:4星;
  • 用户体验:2星。

2. 文字点选验证

和图标/图片点选验证方式不同,文字点选验证在保证人的可识别性同时让机器的识别难度呈指数型增长。

安全性比图标/图片点选验证更高,用户只需按照顺序点击图中文字,即可完成安全验证。

对人比较友好,对机器不太友好。

  • 防御能力:4星;
  • 用户体验:3星。

3. 语序点选验证

和文字点选验证方式不同,语序点选验证在保证人能识别范围内,并要求用户按照正确的自然语义排序完成点选操作,让机器的识别难度呈指数型增长。

也无形中给用户增加认知成本,比如文盲,对文字理解弱的人。

  • 防御能力:4.5星;
  • 用户体验:2.5星。

4. 空间推理验证

和其他验证方式不同,空间推理验证同时需要用户根据图片的问题提示点选相应的物体。

逻辑解题能力结合3D立体元素识别能力,对用户来说认知成本更高。

由于图片空间形态的多样性和复杂的问题,可以显著的降低机器识别的概率,适用于高安全场景。

  • 防御能力:4.5星;
  • 用户体验:2星。

5. 滑动拼图验证

滑动拼图验证的过程中会收集用户拖动滑块的行为轨迹和用户设备信息等多维度信息,实时分析这些信息来进行人机识别。

对于用户来说,流畅优质的用户体验,仅需轻轻滑动完成拼图,即可完成安全验证。

还有重要一点,拼图验证区域可以作为广告宣传或者其他用途,可增加收入。

  • 防御能力:3星;
  • 用户体验:4星。

6. 智能组合验证

可根据用户行为轨迹以及其他安全策略,判别用户的风险程度,给用户智能呈现对应的验证形式。

可疑用户根据疑似程度弹出不同难度的验证码进行二次验证,也有概率直接通过。

极致用户体验,多维度收集环境信息,安全用户只需轻点即可通过验证。但是风险也很大,需要非常高大数据支持。

  • 防御能力:2星;
  • 用户体验:5星。

7. 输入型验证

像纯数字,纯字母,数字加字母的静态或动态验证,由于此类的验证码过于内容简单,对计算器程序来说,学习成本不高,很容易被破解,现在几乎不用这种验证方式了。

现在部分还在使用是升级版输入型验证,主要是扭曲变形的数字加字母的验证码,这提高了难度,难以直接辨认。

但是对于用户体验来说,用户体验度一般。

  • 防御能力:1星;
  • 用户体验:3星,

8. 短信验证

对于短信验证,其实也可以归类为输入型验证,为什么会单独分一类,主要是它跟输入型还是有很大不同。

短信验证成本相对输入型验证高,因为需要购买短信,但安全型却是指数型增长的,用户体验来说非常不错。

  • 防御能力:4星;
  • 用户体验:4星。

9. 指纹或刷脸验证

对于以上验证方式来说,指纹或刷脸验证成本会更高,因为需要相应的硬件软件支持,投入大限制也高。

但是安全性也是最高的,极致用户体验,只需要按下手指或者刷下脸就可以验证通过。

  • 防御能力:5星;
  • 用户体验:5星。

上面列举的这几种验证方式,只是目前使用最广泛和最常用的验证方式。

随着科技发展,会出现越来越多不同的验证方式,给用户带来更加极致的用户体验。

二、运用场景的分类

随着互联网开启,验证码运用场景也随之而来。

其运用场景可以大致归为以下几类:

1. 登录注册

验证码适用于 App、Web 及小程序等用户注册场景,可以抵御自动机恶意注册(如利用注册机批量注册小号)。

同时可以有效阻止撞库攻击,从源头进行防护,保障正常用户的注册、登录。

2. 活动秒杀

羊毛党频繁刷取奖励,导致真实用户无法获取奖励,业务方运营活动效果下降、经济利益受损。

验证码适用于抢购、秒杀、优惠券等活动场景,有效抵御爬虫、自动机刷取福利券,有效拦截刷单操作,让羊毛党空手而归。

3. 点赞发帖

恶意用户用小号在 UGC 社区恶意发帖、刷票,使运营方无法获得真实用户反馈,影响活动开展。

验证码适用于论坛、投票等场景,有效抵御自动机刷赞和水军刷帖,解决广告屠版、恶意灌水、刷票问题。

4. 数据保护

恶意爬虫可爬取网站的内容、数据,导致网页的核心资源、机密信息被盗用和复制。

验证码适用于公告栏、论坛等内容网站,有效抵御爬虫爬取网站内容信息,防止自动机、爬虫盗取网页内容和数据。

除了以上常见的运用场景,未来验证运用的场景也会越来越多,也会越来越完善,既兼顾网络安全,又有极致用户体验。

三、显示方式(交互方式)的分类

对于不同产品或者不同场景,其显示方式(交互方式)可以大致归为以下几类:

1. 触发式显示

触发式显示就是鼠标移入验证条后显示验证拼图,轻松接入,不影响网页原有的排版和美观。

特别是对于手机端寸土寸金的显示内容区域来说,这就显得尤为重要,可以节省很多空间。

适用端:电脑端和手机端。

2. 嵌入式显示

何为嵌入式显示,就是点选验证区域直接完整嵌入网页,清晰直观,便于用户使用和广告宣传,特别对于网站品牌宣传,可以从验证码下手。

但是对于手机端来说,因为需要完整显示验证区,这就尤为很占用空间,手机端不是很推荐使用这种显示方式。

适用端:电脑端。

3. 弹出式显示

弹出式的显示,跟触发式显示有点像,但是弹出式显示是绑定自有验证按钮效果,与自有业务样式完美融合。

而且会根据情况来是否需要验证弹窗,体验相对来说会更加友好,适用场景也更广泛。

适用端:电脑端和手机端。

四、总结

① 涉及到产品的安全性,目前验证码是最小成本来实现产品安全的手段之一;

② 在实际运用中需要注意辨别产品安全跟验证码之间关系,应该根据产品的安全以及场景是否需要来选择恰当的“验证码”;

③ 验证码未来无论怎么变化多端,其目的都是为了网络安全,其次才是用户体验。在安全和体验上,这就需要我们设计师来找到他们平衡点。

下面是汇总的验证码验证方式对比图,希望能为设计师伙伴们在使用验证码时提供一些启发或帮助。


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

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

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



元宇宙,互联网创新版“水变油”

涛涛

今年年初,世界上最大的多人在线创作沙盒游戏平台Roblox携元宇宙概念在纽交所上市,再加上《失控玩家》的热映,这个听上去极为虚幻的、不着边际的概念成了资本的香饽饽。本文作者对此进行了分析,与你分享。

上个世纪八十年代,为了尽快改变国内发展现状,国内掀起了一场崇尚知识、尊重人才的运动,追求科学知识成了所有人的共识,就在全国人民都对新科学新技术翘首以盼的时候,“水变油”横空出世,引发整个科技圈震动,举国沸腾。

一旦这一技术成真,所有人都明白,这对当时的中国和国内科技界,意味着什么。而事实上,这不过是一场惊天闹剧。水变油就算可能有朝一日会成真,但那属于未来,并不是当时所处的时代所能实现的。

如今,这一幕在科技互联网领域似乎又在上演。创新匮乏,风口难现,资本畏缩的局面之下,整个科创领域急需要一个新的概念振作整个市场。

于是,元宇宙概念堂而皇之的登上了风口。

今年年初,世界上最大的多人在线创作沙盒游戏平台Roblox携元宇宙概念在纽交所上市,首日市值突破 400 亿美元,相较去年约 40 亿美元的估值飙升10 倍。这个月,字节跳动收购Pico更是把元宇宙的热度推向高潮,再加上《失控玩家》上映,元宇宙概念股爆发,这个听上去极为虚幻的、不着边际的概念成了资本的香饽饽。

然而,从互联网风口的发展脉络来看,元宇宙的爆火,更像是互联网创新的一次“水变油”闹剧。

一、臆想出来的“救命药”

元宇宙这个概念可能跟水变油一样久远了,现在无非是新瓶装旧酒,被资本和巨头们重新包装了新概念。

搞笑的是,元宇宙的概念重新火到现在,被刷屏、被科普、被讨论,但实际上很多人仍然没有弄懂这个概念,而这种似懂非懂云里雾里的概念,对于科技巨头和资本来说,最有腾挪的空间。

事实上,在1992年出版的科幻作品《雪崩》中,作者构建了一个平行于现实世界的虚拟世界,人们可以在里面拥有一个自己的虚拟替身,这个世界叫作“Metaverse”,也就是类似现在爆火的元宇宙。

元宇宙所代表的世界,自由度极高,换句话说,你在现实中能做的事情,在元宇宙也能做,而现实中不能做的事情,可能会在元宇宙中实现。

就像《失控玩家》中的开放世界游戏,玩家在游戏中可以杀人、放火、抢银行,对不带墨镜的非玩家角色们做任何事情。它和普通游戏的区别在于,元宇宙中的这些行为都建立在高度的沉浸式体验中,当你杀人、放火、抢银行时,感觉像真的在实施暴力和犯罪。

当然,元宇宙的想象空间不是像电影中偏向满足用户的暴力需求,而是延展到现有互联网生活无法触及的领域,接近于把整个现实世界平移到虚拟中。

但现在看来这未免太过虚幻。广义被认同的元宇宙有六大支撑技术,分别为区块链技术、交互技术、电子游戏技术、人工智能技术、网络及运算技术以及物联网技术,而单看任何一项,都处于一种技术水平和落地应用跟不上外界期待的状态。追根究底,当初区块链、人工智能等概念炒作多火爆,现在就有多尴尬,这和现在的元宇宙如出一辙。

可为什么就是这样一个概念,引起了资本和巨头的竞相争夺呢?其实他们未必真的认为元宇宙会掀起下一代互联网社交和娱乐模式的变革,更现实的是他们恰好需要元宇宙这个让人摸不着头脑的新“风口”。

进入2021年以后,互联网经济整体进入了一个动荡、难熬的时期。一方面,互联网用户增长缓慢,已然到达了一个极限,越发困扰着互联网公司。

根据中国互联网络信息中心(CNNIC)最新发布的《中国互联网络发展状况统计报告》显示,截至2021年6月,我国网民规模达10.11亿,较2020年12月增长2175万,互联网普及率达71.6%。其中,即时通信用户规模达9.83亿,较2020年12月增长仅218万,短视频用户规模高达8.88亿,较2020年12月增长1440万。

另一方面,监管成为今年影响互联网公司最重要的外部因素,从教育到游戏,从社区团购到共享民宿,从影视圈到饭圈…那些曾经引得资本追逐和热捧的风口及风口上的公司,在野蛮生长的过程中,乱象丛生,现在无一例外地触动了红线。

从这个角度出发,元宇宙这样一个没有落地的、虚幻的又能刺激大众兴奋点的概念,在监管时代下似乎安全许多。互联网巨头和资本,就如同古代帝王迟暮之后,一味追求长生,生生臆想出来了长生不老药。

二、互联网创新的“大溃败”

近期,苹果秋季发布会举行,每年的这个时候,围绕苹果新机都会掀起一波又一波讨论的热潮。然而,不得不承认,苹果秋季发布会带给用户的惊喜已经越来越少,舆论热潮过后,讨论点总会落在苹果创新乏力、库克才能不足上。

苹果的创新困境,只是整个互联网经济创新越来越泯然于众的一个缩影,在贴有创新乏力标签的互联网公司名单中,恐怕要加入很多巨头的名字。

2016年,谷歌也举行了一次发布会,在会上一口气发布了一大堆的硬件产品,这个东拼西凑的硬件全家桶,因为装的都是“过时”的产品,而被媒体狠狠地嘲讽了一次。由此,作为美国硅谷技术创新风向标的企业,人们开始质疑谷歌是不是“黔驴技穷”,一位在谷歌任职13年的老工程师公开批评谷歌发布的产品分别抄袭了亚马逊Echo、WhatsApp和微信。

硅谷的活力丧失,已然成为一种共识。

而国内呢?我国互联网经济的模式或产品创新,曾一度改变了原本互联网公司从硅谷复制、借鉴现有模式的习惯,渐趋成为全球互联网创新的另一个中心。然而,在共享经济的高潮过后,国内互联网新事物的诞生和发展套路基本就沦落成找准一个行业进行线上化,继而融资烧钱、规模扩张、相互争夺流量。成则剩者为王,败则一地鸡毛。

这其实不是创新,以往互联网创新的本质在于变革行业,衍生出一种比现有商业业态更有优势的新生模式,但现在互联网的风口中,我们看到的不是对行业的升级,而是干扰甚至破坏。

比如社区团购,社区团购通过融资,以补贴吸引用户白嫖,将原有菜摊菜贩为主导的商业业态快速破坏,实际上它为商业社会创造的价值却寥寥无几。新消费投资热也是如此,眼见没什么新赛道了,资本瞄准了我们的餐桌。

原以为社区团购和新消费已然是国内互联网创新的一次大倒退,直至元宇宙爆火,这场由概念炒作掀起的虚火从硅谷烧到国内,更像是一场席卷全球互联网经济的倒退,以掩盖整个互联网创新乏力的事实。

换句话说,我们正在拿未来数十年都未必能实现的科技幻想,来弥补现在的创新枯竭。

尤其是外界对元宇宙的畅想,目前来看过于超前了。一方面,作为能够超过智能手机和个人电脑的下一代主流计算平台和元宇宙的重要入口,AR/VR还停留在视觉阶段,交互很差,用户根本没有沉浸式体验;

另一方面,一个全新的世界,需要包括游戏、影视视频音乐内容、办公与会议体系、虚拟消费品、虚拟房地产、虚拟经济体系等等,而这些要素在现有的互联网世界都未必成熟。

三、“明日之水”救“今日之火”

元宇宙的刺激作用已然在互联网商业中显现。Roblox在美国纳斯达克上市,顶着“元宇宙第一股”的光环,Roblox现在的市值高达500亿美元。

无独有偶,9月8日,元宇宙概念股集体爆发,股价飙升,最高涨幅达到了44%。其中,中青宝连续两日涨停,连带着歌尔股份也收获了10cm涨停,市值逼近1800亿元。字节跳动更是因为高价收购国内VR行业头部厂商PICO,被推上舆论的风口浪尖。

游戏公司们也极为兴奋。游戏公司是元宇宙重要的参与者,甚至不排除未来一个开放世界的游戏就是一个元宇宙,由此,备受政策风险左右的游戏公司们似乎找到了一个天然适合炒作、拉动股价的营销点。像完美世界、世纪华通等,都在向外界透露自己积极探索和融入元宇宙相关元素的信息。

但元宇宙拯救不了国内游戏公司,同样也拯救不了国内互联网。

近期,A股游戏公司先后披露了半年度业绩报告。数据显示,2021年上半年,A股31家游戏公司中,16家出现了营收同比下滑,17家公司归母净利润同比下滑,其中7家企业出现亏损。三七互娱、完美世界、昆仑万维等头部游戏公司出现营收、净利双降。

游戏公司业绩下滑,主要是因为去年同期的业绩太过优秀,疫情后便恢复了正常水平。不过可以预测的是,下半年游戏公司的业绩不容乐观。新未成年人防沉迷游戏禁令出台后,游戏公司都要面临用户活跃度降低、游戏流水下降的问题,这在游戏用户数日益减少的背景下,又增添了营收的压力。

参与元宇宙炒作的不只是游戏公司,互联网巨头们也在蜂拥而上。比如腾讯,据天风证券梳理,无论是打造虚拟世界需要的引擎工具的缔造者Epic,还是AR组件领导者Snap,以及自由表情工具Bitmoji、摄像头Kit、社交软件Discord等,都有腾讯投资的身影。

腾讯和字节跳动正在争夺和押宝下一场互联网变革的风口,对后者来讲,元宇宙可能涵盖了下一代社交网络体系,成为干掉腾讯这一社交巨头的绝佳机会。可是,无论是腾讯还是字节跳动,追捧和投资元宇宙似乎都不能解决当下互联网公司面临的最大困境,外部不确定性因素或将持续对他们的核心业务产生冲击。

对于创投圈,我们看到,元宇宙其实很难成为创投圈的一剂“兴奋剂”,缓解创投人士的焦虑。因为放眼望去,除了一些蹭元宇宙热度的游戏公司,创投圈投无可投,VR创业公司虽然重新得到关注,但过去VR元年的惨痛经历还历历在目,而跟风的游戏公司,他们的行为仅限于炒作概念。想要落地,可能还很久远。

从互联网诞生之初,消费、娱乐、信息获取等模式的创新,丰富了用户的生活,到现在互联网公司围着一个过度超前的概念,靠想象获得刺激和高潮,这种演变未免有些悲哀。

毕竟,元宇宙理论上即使是成立的,但是它也和水变油一样,并不是这个时代的事情,可以研究,但应该做好长期投入的准备,而不是现在就开始进行概念炒作和收割。

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

文章来源:人人都是产品经理   作者:道总有理

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


如何有效进行竞品分析

涛涛

这篇小文,将从四个模块讲述如何有效竞品分析。



01 认识竞品分析


竞品分析顾名思义,是对竞争对手的产品进行比较分析。


不同的角色做分析的方向是不同的,UX设计师做产品体验分析,从视觉和感觉两个方面去分析;产品经理做竞品分析从功能、框架、技术、战略等,分析产品背后的部分,比如竞品为什么这么做?是如何做到的?下一步会怎么做……这里作者主要是分析产品层面的竞品分析。



02 竞品分析的意义


竞品分析的意义根据产品发展阶段不同,可归纳为以下四点:


1. 了解产品

通过竞品分析,可以快速了解这个行业、市场、竞争对手的产品以及自己的产品。


2. 决策支持

从产品战略层面来说,可以为企业制定战略、布局规划提供依据;可以通过MVP来测试产品是否符合市场预期,找准产品定位。


3. 预警避险

做竞品分析会让我们时刻关注竞争对手,关注环境的变化,关注政策的变化等,有效的竞品分析可以预警避险。

4. 全局判断

定方向、定目标、定策略,包括竞品分析、用户研究、需求分析、产品规划、产品设计等。


03 竞品分析流程


输出一份完整的竞品分析,需要完成六个核心流程:



明确目标:明确为什么要做、想解决什么问题、竞品分析的目标是什么

选择竞品:选择要分析的竞品、直接竞品、间接竞品、参照品

确定分析维度:根据竞品分析目标,确定要从哪些维度分析竞品

收集竞品信息:从各种渠道收集竞品信息

信息整理与分析:对收集到的竞品信息进行整理与分析

总结报告:得到竞品分析的结论,输出竞品分析报告


明确目标

在第一部分全面认识竞品分析中有提到竞品分析的意义,也是竞品分析的目标所在,概括的可以分为四类:决策支持、学习借鉴、市场预警、机会探索。


根据产品生命周期不同,竞品分析的目标和侧重点不同。所以在竞品分析之前一定要了解当前产品处于什么阶段,需要分析的目标是什么。



选择竞品

竞品的选择,首先要了解竞品的分类:直接竞品、间接竞品、替代品、参照品。然后根据目标针对性的选择产品。


直接竞品

是指产品形式和目标用户群是完全相同的产品。比如生活中最鲜明的例子:可口可乐 VS 百事可乐。

间接竞品

是指产品形式不同,目标用户群类似的产品。比如:可口可乐 VS 元气森林,都是饮品。

替代品

是指产品形式不同、品类不同,目标用户群类似,能满足用户相同需求的产品。比如:公交车 VS 滴滴打车。

参照品

是指有参考价值的产品,可能是跨界的各种产品,开放式的产品类别。



竞品的选择不是数量越多越好,而是要选择合适的,做深度分析,分析出有价值的信息。


确定分析维度

分析维度是指从哪些方面、哪些角度去分析,在这个阶段要确定产品分析的广度和深度。可以从产品视角和用户视角两个不同的视角去确定分析维度。


产品视角:从产品本身的信息量上去选择要分析的维度。以功能、框架、技术、体验、用户……等维度进行分析;


用户视角:从用户最关注的信息上去选择要分析的维度。以$APPEALS(客户需求分析)框架作为分析框架。


$APPEALS方法是IBM在IPD总结和分析出来的客户需求分析的一种方法。它从8个方面对产品进行客户需求定义和产品定位。具体如下:

  1. $-产品价格(Price);

  2. A-可获得性(Availability);

  3. P-包装(Packaging);

  4. P-性能(Performance);

  5. E-易用性(Easy to use);

  6. A-保证程度(Assurances);

  7. L-生命周期成本(Life cycle ofcost);

  8. S-社会接受程度(Social acceptance)。



收集竞品信息

收集竞品信息的渠道总结为三种:官方渠道公开资料、第三方竞品分析平台获取、打入产品自行体验或与用户接触调研出来的等。


在之前公众号文章里曾分享过有关用户分析、产品分析等数据分析平台的汇总表。



信息整理与分析

信息收集完成后,并不是所有信息都是可用的,需要对其进行筛选、分类、剔除、评级等,得到有效信息,针对有效信息进行分析。


这里也是竞品分析重要的一个环节,不同的目标,需要选择不同的分析方法,汇总一下竞品分析的方法有:比较法、矩阵分析法、竞品跟踪矩阵、功能拆解、探索需求、PEST分析、波特五力模型、SWOT分析……(下一部分会具体讲解)


总结报告

所有的分析步骤都完成之后,需要对分析结果进行总结,从中挑选出有价值的信息,形成一份分析报告,报告的格式可根据展示场景输出选择适当的格式。


04 竞品分析方法


比较法

与竞品做横向比较,深入了解竞品,并通过分析得出优势、劣势。


打勾比较法:有无某功能,如果产品功能复杂,要拆解成2级功能等再横向比较
评分比较法:应用于用户体验设计评估和$APPEALS要素评估
描述比较法:通常会用“界面截屏+文字描述”的形式



矩阵分析法

以二维矩阵的方式分析产品与竞品的定位、特色或优势。


竞品跟踪矩阵

跟踪竞品的版本更新,找到竞品各版本的发展规律,以推测竞品下一步的行动计划。竞品跟踪矩阵包括几个要素:时间、版本号、版本变化要点(新增、优化、删除)以及外部环境变化。


功能拆解

把竞品分解成1级功能、2级功能、3级功能,甚至4级功能,以便更全面地了解竞品的构成,避免遗漏。



探索需求

挖掘竞品功能所满足的深层次的需求,以便找到更好的解决方案,提升产品的竞争力。


PEST分析

PEST分析法是对宏观环境进行分析,以便找到机会,认清威胁与挑战。


所谓PEST ,P是政治(Politics),E是经济(Economy),S是社会(Society),T是技术(Technology)。



波特五力模型

对行业环境进行分析,评估某一行业的吸引力、利润率。


SWOT分析

PEST分析和波特五力模型可归纳出SWOT分析中的机会和威胁,通过SWOT分析找出产品的优势、劣势、机会、威胁,以便制定竞争策略。



加减乘除

产品越发展难免会进入同质化的竞争,与其更好,不如寻找更好的机会点。在竞品的基础上做“加减乘除”,以便进行差异化创新。


05 竞品分析工具


借助精益画布、竞品画布、战略画布这三个工具可以提升竞品分析的效率。


精益画布

精益画布是关于产品商业模式分析的一种很实用的工具,可以用来做产品商业模式规划和分析。精益画布可以帮助产品更全面的思考、决策,从系统、商业的角度来规划产品、分析产品,建立产品的全局观。



精益画布在日常工作中的使用场景包含:编写PRD、项目立项、商业计划书……


知己   用精益画布--规划自己的产品

知彼   用竞品画布--规划竞争对手的产品


竞品画布

竞品画布是前面提到的竞品分析的一种方式,是把竞品分析的六个步骤固化到一张表上,作为一个规范性的模板,引导大家更规范的做竞品分析。


竞品画布相当于竞品分析报告的MVP(最小可用产品),用来低成本快速验证分析的思路是正确的,避免返工。



很多人在刚接触一个新产品时,很容易盲目的去分析,找不到方向,此时借助竞品画布这个标准化的模板,一步步的去分析产品,可以很快地了解一个产品。


战略画布

战略画布是做产品差异化竞争的有效工具,是通过价值曲线的方式,在某一时间段内寻找到有用户价值的战略方向。


价值曲线

价值曲线是以图形的方式描绘出一个产品在各个竞争元素上表现得相对强弱程度,由此可以看出一个产品的战略轮廓。


横坐标显示产品的竞争元素、价值点(用户在意点)等,通过用户的评价就可以了解到对于用户来说他们最在意的是什么,他们使用产品的原因是产品给他们带来了什么,这就是要寻找的竞争元素的来源。


纵坐标显示相对水平。



通过价值曲线的方式,可以清晰的看到产品与竞品间的差异点,战略画布是做产品差异化创新的有效工具。


最后,利用思维导图结构化的方式,整合了竞品分析核心知识点,分享给看到的你:



06 总结


看似这些竞品分析的方法论是在做一些与设计无关的事情,但很多方法论是通用的,可以应用到视觉、交互的竞品分析当中;作为设计师不能给自己设限,要多去学习跨界的知识,了解这些竞品分析的方法论后,以后再接触新项目,便可以借助文中的规范尝试做竞品分析,助力自己快速了解业务、行业等。

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

文章来源:站酷   作者:做设计的小仙草

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

B端设计规范指南:导航栏

涛涛

B端导航栏的认识

B 端导航栏,是 B 端项目最重要的模块(没有之一)。一个优秀的 B 端导航栏,可以清晰地连接项目的所有功能、模块,让访问者高效的在模块间穿梭。

通常,在进行具体页面设计的时候,我们第一个设计的模块也是导航。在主流的页面框架中,导航分为两种,顶部导航和侧边导航。

超详细!总监出品的B端设计规范指南(六):导航栏

有很多 B 端产品官网使用的顶部导航,并不能作为管理系统导航,仅仅是一般网站导航。比如阿里云或腾讯云官网上方的导航。

超详细!总监出品的B端设计规范指南(六):导航栏

这类导航主要应用在企业官网中,通过比较密集的信息密度,将提供的产品或服务全部罗列出来。

超详细!总监出品的B端设计规范指南(六):导航栏

而侧边栏虽然可以做不少花哨的样式,但信息密度显然无法和顶部导航栏相提并论。

超详细!总监出品的B端设计规范指南(六):导航栏

顶部导航的特征需要鼠标悬浮展开分类面板,通过收纳大量下级菜单,来提升用户的 “检索” 效率。而用户在这些菜单间跳转切换的频率不会太高。

侧边栏导航的特征则是更直接,包含的菜单数量不会太多,用来提升用户的 “跳转” 效率。满足用户高频的模块跳转切换需求。

侧边栏的设计也包含两种形式,细栏和宽栏。

超详细!总监出品的B端设计规范指南(六):导航栏

细栏主要突出图标,应用在模块数量不多的情况,也为内容区域腾更多控件出来。比如 Teambition、百度云等产品。

宽栏则是比较安全的设计形式,兼容性较好,不管是模块数量多还少都能用。但相应的,它会一定程度上占用控件减少内容区域面积。

在一般项目中,只要用好侧边栏的设计即可。顶部导航在管理界面中的应用多为混合场景,用来切换比侧边栏更高级的分类页面。比如腾讯云内部页面中,切换业务模块使用顶部导航的展开面板,业务下级模块则在侧边栏。

超详细!总监出品的B端设计规范指南(六):导航栏

B端导航的规划

导航栏设计,必然要满足 “导航” 这个核心目标。组件的样式、交互必须为功能服务,但很多新手只考虑样式。

通常情况下,导航是反映项目功能模块的入口,产品中包含多少模块、子模块,就会有序的布置到导航里面。那么问题来了,项目到底包含了多少模块和子模块?哪些是要放进导航里的?

在之前思维导图应用的分享中,有一个非常重要的产品输出类型,叫 —— 功能结构地图。解释了不同功能层级的结构和从属关系,以及项目中总共包含了哪些页面。

超详细!总监出品的B端设计规范指南(六):导航栏

它是制定导航内容的主要依据,但并不代表里面出现的每一个节点页面都要放进导航中。

设计师展开导航设计前,也需要使用思维导图工具,再把需要展示出来的内容和结构梳理一遍。否则,面对模块数量较多,层级超过两级的导航就必然手忙脚乱。

比如腾讯云直播和短书的侧边栏层级结构:

超详细!总监出品的B端设计规范指南(六):导航栏

这么看起来很清晰对吧?但留给设计的坑是,并不是每个层级,它们都可以点击,都具备跳转功能。我们来看看实际的实现的效果。

超详细!总监出品的B端设计规范指南(六):导航栏

也就是说,在导航栏的导航选项中,并不是所有的选项都是用来跳转的,它们是用来辅助区分内容和用来展开的。

所以,我们要在思维导图阶段,根据实际场景的需要,对每一个导航信息点进行标注,明确它们在后续设计中包含的作用。

超详细!总监出品的B端设计规范指南(六):导航栏

同时,还有一个需要注意的事情,就是是否为导航栏增加响应式适配。即窄屏的情况下,通常是将导航栏缩短,只保留图标的方案。

把这些内容定好,就可以进入我们具体的设计环节了。

导航栏的设计落地

整理好上方的内容层级,到具体设计步骤里,首先要做的,就是制定出一个能满足层级显示和操作的交互结构出来。

再整理一遍,侧边栏的内容包含:

  • 不可点击的分类标题
  • 可以展开的一级分类
  • 可以实现跳转的一级分类
  • 可以点击的二级分类

而可交互的元素,显然是有对应交互状态的,那么对应的交互状态就包括:

  • 鼠标悬浮一级菜单样式
  • 鼠标悬浮二级菜单样式
  • 选中一级分类,一级分类高亮
  • 展开一级并选中二级分类,二级分类高亮

那么,先用原型做个示意,它的状态包含了默认、选中一级、选中二级三种情况:

超详细!总监出品的B端设计规范指南(六):导航栏

在实际设计环节里,最难受的事情就是一级菜单有的用来展开,有的可以选中,怎么区分?而一二级菜单悬浮、选中是否要统一样式?怎么保证一致性?

如果要统一一二级菜单的选中样式,那么设计过程中,就要保证一二级菜单实际占用空间区域是一致的,间距也进行统一,才能合理添加悬浮和选中效果。

超详细!总监出品的B端设计规范指南(六):导航栏

如果不对一二级菜单统一悬浮和显示样式,区分展示,可以不统一菜单的实际区域和高度。但是,这样的导航要设计好更困难一点。如果不统一交互效果,那么就尽量保证其中一级悬浮和选中采取背景填充,另一级仅仅是文字样式变更。

超详细!总监出品的B端设计规范指南(六):导航栏

把要使用哪种方案确定下来,然后再去优化细节,添加对应的图标内容和优化字体、分割线等等。

超详细!总监出品的B端设计规范指南(六):导航栏

我们在上面用的案例,逻辑层级是 3 级,但是有的项目中,包含的可能有 4 级、5 级,那么必然会呈现出更复杂的交互体系。

常见的做法,就是将侧边栏做成两列,一列是顶级菜单,一列是其它次级菜单,类似有赞的这种做法。层级越多带来的挑战也就越大。

超详细!总监出品的B端设计规范指南(六):导航栏

导航的设计,对细节调节并不仅仅是为了好看,而是提供更直观的交互和一致性。仅仅完成样式依旧是不够的,具体使用上还可能会碰到什么问题我们要尽可能多进行思考。

比如:

  • 原设计中展开 1 级分类只能展开一个,开启第二个就会关闭第一个,如果我们改成展开不关闭会又什么区别呢?
  • 点击页面跳转以后,除了选中的二级菜单前面展开的还展开吗?
  • 高度超出一屏高以后怎么显示,如果滚动的话跳转后显示在哪里?

这样的问题,就留给大家自己思考了。

结尾

导航的设计细节是很次要的因素(虽然对整体样式很重要),重点是给出合理的信息展示和交互方法。如果导航不能帮助用户快速、简洁的进行页面的选择和跳转,即使做的再好看也是一个失败的导航。


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

文章来源:优设   作者:超人的电话亭

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


设计师如何让讲故事成为辅助利器!

涛涛

在日常的生活中,我们总是容易被一个故事吸引,而且更愿意倾听故事,对故事内容也更容易理解。讲故事,是一种比较自然的沟通方式。

作为一个用户体验设计师,你是否有想过,利用人类对故事天然的 “亲近感”,辅助我们在日常的设计工作中解决问题?

在本期的思考中,我试图从一个好故事所具备的特质中,找到我们日常设计工作中可以借鉴的方法。

本期提纲:

  • 为什么会思考 “体验设计师可以从讲故事中学到什么?”
  • 梳理故事要素,全面了解用户
  • 参考故事结构,引导完成任务
  • 明确主线支线,辅助聚焦目标
  • 结语

为什么会思考

“体验设计师可以从讲故事中学到什么?”

这要从 B 站那些的知识区 UP 主说起。

最近,在不知觉中,我养成了在 B 站追更知识区 UP 主的习惯。比如 “法外狂徒” 罗翔老师,常以 “张三” 为主角,将严肃枯燥的法律知识点,串联成一个个普法故事,妙趣横生。这些视频内容,都很擅长使用最简单的故事讲述复杂的专业问题,能够让没有专业背景的普通人听得懂,看进去,学习到知识。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

故事在复杂的知识和观众之间架起了一座沟通的桥梁。

因此,我开始思考,将故事中一些引人入胜的技巧和方法,用到体验设计中帮助用户理解信息、参与互动。

梳理故事要素,全面了解用户

以下哪段描述更吸引你呢?

  • “凯文到了理发店,在理发店等了一个小时,最后理了发。”
  • “上了一周班的凯文周末想剪头发。天气很热,走到时凯文已满头大汗。开门瞬间他心一沉,顾客挤满了理发店,他在旁无聊的等了一个小时,最后总算理了一个满意的发型。”

这两段描述其实讲的是一个事情,但是后者包含了讲故事最重要的六个要素:

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

因此,将这两段描述一起比较,前者是简陋生硬的流水账,后者则是完整生动的故事。从生动的故事中,我们更能体会到人物的所有行动以及情绪。

通过六个要素塑造一个人物角色的故事,让我们能快速在脑海构建一个立体的角色形象。在日常的设计工作中,每个产品需求对应的目标人群各有差异,设计师同样可以使用故事的六个要素,帮助快速了解我们的用户。

首先,在调研中,可以按照故事六要素设计的访谈问题,这样可以帮助了解到相对全面的用户信息。其次,调研后整理信息时,可以根据故事六要素,将素材加工成具体且有代表性的故事,能够帮助我们不被繁杂的原始信息束缚。

下面看看故事的六要素方法在微信记账本的改版方案中的实践。

这次改版的目的是为了解决记账本的流失问题。方案前期,我们根据故事的六个要素设计了访谈提纲,然后招募用户,进行了面对面的调研访谈。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

随后,由于访谈提纲与故事六个要素对应,因此按照这个对应关系,我们从原始的访谈资料中,整理出一个具有代表性的用户故事。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

通过这个故事,我对目标用户的身份、行为、习惯有了清晰直观的了解。同时,根据故事中情节描述,再对照记账本中的交互体验,可以看出,用户流失的核心问题主要在于,自身的记账习惯与记账本提供的体验不匹配,导致用起来有阻碍,用得不习惯。

用户的习惯是按日看账,但是记账本没有聚焦在每日的统计上。因此,方案中我将明细页按日分块区隔,不仅每日的信息更聚焦,而且方便用户进行日间的对比。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

同时,用户大部分时间都在关注当日的账,只在月底、月初等阶段性的时间节点,才会复盘整月的记账情况。因此,我设计了 Tab 页面结构,区分了用户的高低频行为。用户进入记账本时,会优先呈现明细,通过 Tab 页面切换,在需要时也可以看到该月的记账统计。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

这个方案在后续的用户调研中,得到了不少用户正向的反馈。由此可见,利用故事六要素设计,能帮助设计师了解用户,能从混乱的信息中抽丝剥茧,找到清晰方向。

参考故事结构引导完成任务

积木虽然只有几个形状,但是通过排列组合,能有无数种结果。这跟体验设计的工作的很像。日常工作中我们大部分时间不是在创造一个从未见过的事物,而是将已有的信息进行组织,让用户顺利的完成一段符合期待的旅程。

故事的结构就是一种组织信息的方式,可以串联起用户在页面、流程中的行动,让用户更容易朝着一个目标移动。

最常见的故事结构就是经典的三段式结构,开头铺垫情节,中间描述冲突,结尾给出解决方案或行动。这种方式符合人类的认识规律,也被无数荧幕经典验证过。

让我们再来跟随朋友会员的方案,感受如何用三段式的故事结构,构建起一个顺畅的任务流程。

为满足中小商家吸引顾客消费的需要,小账本提供了会员优惠活动的功能。但是我们的中小商家群体一般都缺少专业的运营经验,为了让他们顺利完成设置活动的目标,我参考故事中的三段式结构去呈现页面信息,帮助理解活动、完成设置。

  • 开头,对设置会员活动有什么好处进行了铺垫,说服商家的参与。
  • 中间,给商家提供会员活动,洞察商家可能会遇到选择活动的问题。
  • 结尾,提供活动建议,根据商家的建议进行活动推荐,解决问题。

在故事中,冲突和起伏是人为创造出来,甚至需要戏剧性的夸大表现。体验流程中,冲突是用户使用功能中可能会遇到的问题,我们要提出解决方案,避免冲突,让任务流程顺畅。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

当然讲故事的结构不止一种,故事结构的本质是为了将零碎的情节串联成一个自然的流程,方便用户和理解。

明确主线支线,辅助聚焦目标

在故事中,一般围绕着主角去展开故事。试想一下,西游记中如果将诸天神佛、各路妖怪的都安排成主角,那将是多么盘杂的信息量。因此故事才以师徒五人西行取经为线索展开。后面随着一路上斩妖除魔,整个奇幻诡谲的神话世界跃然纸上。因此,故事中,用区分主线为主、支线为辅的处理,避免用户的注意力被分散。

回到我们用户的旅程中也是一样,无关紧要的操作将会将用户分散用户的注意力,让用户脱离原本的目标。因此在实际的设计工作中,要根据用户的目标,区分清楚主线、支线。

想要区分主线支线,就必须取舍。将跟用户目标强相关的重要信息放在主线,可以让用户的操作更聚焦;同时,将次要的信息放在支线,辅助充实主线。用户有更深入的需求时,也能够有地方获取。

以顾客抽奖中让商家顺利完成一个抽奖活动的设置为例。如果要设置一个抽奖活动,需要设置奖品、活动周期以及开奖时间。这三项操作,我们如果让商家自行操作,他们的操作门槛会非常高。他们甚至会因为复杂的操作而放弃使用。

因此,根据与商家的交谈,我们将用户更重视的奖品信息设为整个活动的主线。按照商家会持续进行其他会员活动的习惯,默认设定了定期开奖,持续活动的通用规则。同时将只有部分用户需要的修改活动形式和开奖时间的高阶操作,收拢到支线中。保证主线通畅,用户能轻松开启活动。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

如果一些支线无法很好辅助主线,甚至影响主线信息的传递,我们也可以舍弃。

以朋友会员中为商家生成一张传播优惠信息的宣传海报为例。在过程中我们在针对为海报的设计了自定义宣传语编辑、海报主题选择等功能,后面发现用户在编辑宣传语、选择海报主题等支线任务上付出了不少时间。因此,最近的方案中,我们去掉了这个支线任务,虽然也是牺牲掉了一些自定义编辑的能力,但是对于复杂规则理解困难的商家而言,生成海报的路径变得简单清晰了。

用微信的实战案例,聊聊设计师如何让讲故事成为辅助利器!

主线支线本质上就是一种明确任务优先级的方法,主线支线的安排要从达成的目标出发去取舍。

结语

以上就是讲故事的一些具体的方法在设计流程中的作用。总结一下:

  • 梳理故事要素,全面了解用户
  • 参考故事结构,引导完成任务
  • 明确主线支线,辅助聚焦目标

当然,因为时间的关系,以上的思考只是冰山一角,故事在设计中发挥的作用不止于此。比如讲故事还可以用在日常的合作沟通中,帮助快速达成共识;故事也能用在产品宣传中,让用户留下深刻的印象,等等。

故事在日常的设计工作中无处不在,如果你是一位用户体验设计师,说不定,你在平时的工作中就不知觉的就用到了讲故事的能力。斯蒂夫.乔布斯曾经说过:“世界上最有权利的人,是讲故事的人。他们设定了未来世界的场景、价值和流程”。


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

文章来源:优设   作者:We-Design

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



「设计系统」的完整框架

涛涛

很多年前刚听到这个概念的时候,一直觉得设计系统是个非常高大上和牛逼哄哄的事情,当时 Material Design 刚刚出来没多久,苹果的人机设计指南在设计圈称王称霸,虽然自己主要做的都是安卓系统,还是认真拜读了 IOS 的 Human Interface Guidelines。

然后,其实也没有什么然后了……

你怎么看待设计系统这件事呢?

关于设计系统,有的人会觉得类似于一种玄学,有的人认为它好是好,但容易被束之高阁,放着落灰,有的人认为它对于设计师是一种束缚……另外,还有很多和它相关的概念也经常被混淆:设计语言、设计原则、设计规范、设计风格、设计组件……

从3个方面,帮你快速掌握「设计系统」的完整框架

图 1: 设计系统词云图

为了理清设计系统到底是什么,我把上面的这些和设计系统经常出现的词语进行了分类。我认为,它们指出的,应该是基于不同角度对设计系统的解释。在这些词语里,有的解释了设计系统存在的原因:追求效率,保持一致性、避免重复劳动,有助于数字产品形成整体性等。有的解释了它的组成或者相关联的内容:设计规范、设计语言、设计原则、设计规范、设计风格、设计组件等。有的解释了设计系统容易出现的问题:玄学、束缚、高大上,理想化等。

存在原因

存在原因,也就是建设设计系统的目的,正是由于设计系统是为了帮助我们的工作工作更加有效率的一个整体工具,也就注定了设计系统的样式、组成和运作方式不会一层不变,每个公司都需要自己找出适合自己团队设计与开发之间最顺畅的那个系统。

要知道,虽然设计系统听起来很酷,但创建一个好的设计系统其实是非常消耗精力的。所以,设计系统的目的一定要清晰并且符合现状需要。

为什么还要去创建设计系统呢?

我认为,只有对于下面这几条,你或团队有强烈的需求,才是生成一个设计系统的好时机。

  • 以往的设计内容总是需要被快速重复使用
  • 需要释放设计资源,让人力更专注于更加复杂和有价值的问题。
  • 需要在多个团队或多个产品之间保持一致性
  • 需要帮助初级设计师的产出迅速达到更高级的要求

没有被需要的设计系统,就是未来束之高阁,等着落灰的一套“玄学”。

组成内容

系统这个词,是指由相互联系的要素构成的有特定结构和功能的有机整体。设计系统,自然也是一个整体性的有机集合。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 2:设计系统的组成内容

1. 设计原则

设计原则是引导设计系统建设的指导思想和战略方向,基于大量实际经验提炼的高度理论化概括。

设计原则这个概念并不是为了设计系统才出现的,从完形心理学流派运用过来的格式塔理论所包括的临近性、相似性、封闭性、连续性等设计原则,还有以“如非必要,勿增实体”为核心的简约设计原则,来自唐纳德诺曼的概念模式、反馈、限制范围、可感知的预设用途四条设计原则等等。

为了对抽象的设计原则有更具像化的体会,我们再来看看几个比较有名的设计系统的原则。

  • 苹果公司:美学整体,一致性,直接的操作性,反馈,隐喻,用户可控
  • 微软公司:自然而然的,符合直觉和有力的,引人入胜且沉浸
  • 谷歌公司:材料是一种隐喻,明显、图形化和有目的性的,有意义的动效

从3个方面,帮你快速掌握「设计系统」的完整框架

图 3: 三大设计系统的原则

突然发现就苹果公司没给自己的设计系统专门取一个名字啊~

可以发现,虽然三家公司的设计原则各有不同,但几乎都是从通用的设计原则中提炼优化的。

建设一个设计系统一定需要设定自己的设计原则吗?

我认为它不是必须的。

虽然设计原则很重要,但在设计系统初期的时候,遵循现有基础和通用的设计原则来指导建设整个系统也是可以的。总好过随随便便从基础通用的设计原则中拿出一些词语润色一下,简单的堆砌一些高大上的词语,空泛的放在那里,等着它们逐渐变成别人口中的“玄学”吧?

正因为原则是设计系统高度抽象化的结晶,所以它需要基于大量实际设计经验再去生成,不然,很难起到指导设计系统达到增加效率的目的。

2. 设计风格和规范

设计风格,是这个设计系统给人形成的一种代表性的图形印象。设计规范,是用于协调统一性的规则和范式。在 60 年代的《美孚品牌手册》和 70 年代的 《NASA 图形使用规范》中,就已经包含“颜色、字体、图形、用法和示例”等内容。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 4: 设计规范

有了设计风格和设计规范并不一定就能让使用这个设计系统的产品建立统一的品牌调性,只有当设计系统具有了一定辨识性的设计风格,并在设计规范指导下进行长期的设计产出后,才能够让使用这个设计系统的产品形成统一的品牌调性。

3. 设计组件和模式

对于设计系统里,我们最熟悉和常用的应该就是设计组件了,也就是 UI kits,包括输入框、按钮、文字、链接、下拉菜单等等。是组成界面的最小元素和这些元素的常用集合体。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 5: UI kits

设计模式,比元素更复杂一些,是完成任务所使用的一些基础的、常用的交互方式,是可以解决问题的小型设计方案。比如 Material design 里的 Confirmation and acknowledgement,它提供的就是为机器在执行操作之前向用户确认的一系列设计方案。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 6: 设计模式

简单点来说,设计组件就是一些元素,主要给设计师用的,设计模式就是一些交互方式,主要给研发工程师看的。由于两者很相似,如今更多的会把两者合起来看。

2013 年,前端工程师 Brad Forst 将原子理论运用在界面设计中,形成一套设计系统后,设计组件得到进一步扩展,可以形成比原来最初出现设计模式这个概念时更高层次的集合体,例如,大到几个完整的页面及其包含的交互方式,也可以成为某个设计系统的其中一个组件。

当然,由于各个产品的需求、场景和定位等不同,越大的合成组件将会越复杂。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 7: 原子设计理论

4. 内容资产

在某些设计系统的定义里,可能会把内容资产作为设计规范的一部分,但我这里想强调的是其作为资源的一部分。

由于设计系统是一个有机的整体,在它不断的服务于各产品线的同时,也一定会需要不断填充不同的内容,比如应用里使用的图标、字体、插画、模型等等,这些内容积累下来,也应该成为这个设计系统的一部分,如果有其他的应用或产品需要,就可以直接取用,从而提高整体的工作效率。

内容资产比较常见的有图标库、字体库和音效库,分别提供了多种图标、多种字体和多种音效可以给不同的产品或应用使用。随着插画风格、三维风格的留下,未来必然还会出现隶属于某个设计系统的插画库、模型库,以及在产品里经常使用的文案集合。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 8: 内容资产

5. 工具、流程

这两块主要是针对设计系统适用的具体环境,在协同性要求下我认为需要纳入设计系统的内容。简单的举例来说,就是如果使用蓝湖做自动化标注,就团队统一使用蓝湖,而不是有的人使用蓝湖,有的人使用摹客。

6. 设计语言和设计方针(guidelines)

还有两个经常提到,但我刚才画的设计系统图示里没有提到的概念。

设计语言:语言,是一个能够达到相互交流的符号系统。人类学家索绪尔认为,语言能反映出多变言语活动背后的稳定规律。所以,我认为这里的设计语言,应该等同于设计规范,是设计规范另一种表述。

设计指导方针(Design Guidelines):按照中文翻译理解,我认为它是说明、介绍设计系的文档,没有包含在设计系统内。

常见问题

最后,设计系统的词云图里出现的玄学、理论化、落灰、空中楼阁……这些都是创建设计系统时很容易遇到的一些问题,尤其是实用性最高的设计组件,更是首当其冲。之前我组织我们团队的设计师做复盘性质的workshop,单就设计系统的设计组件部分,大家就提出了20多条问题。

从3个方面,帮你快速掌握「设计系统」的完整框架

图 9: 设计组件复盘 workshop

综合来说,设计系统常见的问题有三类:

1. 定义性问题

设计系统从大的框架性定义到具体设计组件的定义都不是件一蹴而就的事情,它从 0 开始,每一次的更新和迭代,对于当前的团队来说都需要是既关键又有效的。关键是指设计系统当前定义下来的内容是后面的产品线经常性使用的,有效是指这些定义确定下来的内容是可以使用现有的资源去完成的,即以现有团队的能力、时间和设备是可以完成并达成其效果的。

2. 使用性问题

目录不清晰,文档说明不全,包含资源不完整,这些都是使用时的问题。如果把设计系统看作一个产品,让用户(设计师或研发人员)觉得好用,才是它不会被束之高阁的解决方法。

3. 协作性问题

不知道有更新,收不到反馈,不了解使用者的情况……协作性的问题催生了市面上诸如蓝湖、摹客、墨刀、Codesign以及很多设计软件的云服务功能等。

虽然现在市面上有非常多优秀的设计系统可以参考,但正如在存在原因中提到的,由于它是为了帮助我们自己所在的团队更有效率的工作,终究还是需要靠自己基于实际情况去做变化。


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

文章来源:优设   作者:林影落 



分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



国外大佬总结的这20条B端图表设计原则,简直太实用了!

涛涛

最近几年以来,大家能看到B端设计趋势已经越来越火热,在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计,让设计出来的图表高大上,符合业务需求,让业务方和总监对你赞不绝口,本文就必须看完和收藏了,因为实在是太实用!

彩云之前也在我的公众号上分享过一篇关于数据可视化的干货,《如何做好数据可视化设计,国外大神给出了十条实用建议》,今天的这篇算是更加系统和完善了。


应用设计越来越依赖数据驱动,对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表,但我们其实可以通过遵循一些简单的规则来改变这个情况。


1. 选择一个正确的图表可视化类型


选择错误的图表类型,或默认为最常见的数据可视化类型,可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容,可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。 


2. 根据正负值使用正确的绘图方向


当使用水平条时,在基线的左侧绘制负值,在右侧绘制正值。不要在基线的同一侧绘制负值和正值。 


3. 条形图总是以0基线开始


删数据起点会导致曲解。在下面的例子中,看左边的图表可以很快的得出结论,值B比D大3倍多,而实际上,两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。


4. 折线图应该要清晰体现y轴上的趋势变化


对于折线图,总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势,因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。 


5. 使用折线图时要考虑时间连贯性


折线图是由线连接的“标记”组成,通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的,并且对于较短的时间间隔非常有效,但当数据更新不频繁时,这可能会导致混淆。 

例如: 使用折线图来代表年度收入,如果数据是每月更新的,则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值,而在特定时间实际的收入数字是未知的,所以可能会产生误会。在这种情况下,使用垂直条形图可能是一个更好的选择。 


6. 不把折线图强行”平滑“


平滑的折线图可能在视觉上很好看,但它们错误地反映了背后的实际数据,而且过粗的线会模糊真正的“标记”位置。 


7. 避免使用比例不同的双轴折线图


通常,为了节省可视化空间,当有两个具有相同度量但大小不同的数据系列时,可能倾向于使用双轴图。但这些图表不仅难以阅读,而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例,只是浏览图表,然后就得出了错误的结论。 


8. 限制饼图中显示的切片数量


饼状图是最流行的也是经常被误用的图表之一。在大多数情况下,条形图是更好的选择。但如果你决定做一个饼状图,有2个比较好的建议:

1)不要超过5-7片,保持简单

2)可以将额外的最小段分组到“其他”切片 


9. 在图表上直接标注


如果没有适当的标签,无论你的图表有多好,它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。 


10. 不要在切片上贴数据


将数据放在切片上可能会导致多个问题,在可读性问题上和窄切片上都会有挑战。相反,添加黑色标签能清晰的链接到每个部分。 


11. 保持饼图切片秩序以提升阅读效率


在确定饼片秩序时,有几种常用的方法:

1)将最大的切片放在12点的位置,然后将下一片切片顺时针降序排列

2)把最大的切片放在12点的位置,第二大的放在顺时针相邻位置,第三大的放在11点的位置,其余的切片按顺时针降序排列 


12. 避免随机排列


同样的建议也适用于其他许多图表。不要默认采用字母排序,将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图),以确保最重要的数值占据最突出的空间,减少眼球运动和阅读图表所需的时间。 


13. 窄的饼图是难阅读的


饼图通常不是最容易阅读的图,因为比较相似的值非常困难。当我们把中间部分去掉,创建一个圆圈图表时,我们腾出了空间来显示额外的信息,但这样牺牲了清晰度,极端情况下,图表就会变得毫无用处。 


14. 视觉效果不要抢了数据风头


不必要的造型不仅会分散注意力,还可能导致对数据的误解和用户的错误印象。你应该避免:

1)3D元素,明暗面

2)阴影、渐变和其他扭曲的多彩色

3)斑马图案,过多的网格线

4)过度装饰,斜体,粗体或衬线字体 


15. 选择与数据性质相匹配的调色板


颜色是有效的数据可视化的组成部分,在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性,所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合,可以创建一个连续的颜色集。

发散调色板是两个连续调色板的组合,中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。 

看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3,它可以帮助你生成各种调色板。 


16. 设计的可访问性


根据美国国家眼科研究所(National Eye Institute)的数据,大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。

1)在调色板中使用不同的饱和度和亮度

2)把现有配色去色然后检查对比度和可读性。 


17. 关注易读性


确保排版能够准确传达信息,帮助用户专注于数据,而不是分散用户的注意力。

1)选择易读的字体,避免衬线和装饰过度的字体

2)避免使用斜体、粗体和全部大写

3)确保与背景有高对比度

4)不要旋转文字

 

18. 使用水平条形图代替旋转标签


这个简单的技巧将确保用户能够更有效地阅读图表,而不会扭伤他们的脖子。 


19. 事先选择合适的图表库


如果你的任务是在web和移动项目中添加交互式图表,你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现,并能提供大量交互想法。 


20. 做成动态图表


帮助用户通过改变参数,可视化数据进行探索。然后得出结论,最大化价值和洞察力。在下面的示例中,你可以看到IOS Health应用使用了各种数据表示的组合。 



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

文章来源:ui中国   作者:彩云Sky 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




设计分割,你用对了吗?

涛涛

今天和大家聊聊设计中的分割,很多人新人做设计时,会经常纠结页面分割用什么方式处理,是用线还是留白,还是用投影?今天我们来系统的研究下,分割的类型以及设计时候我们如何去运用。

更多设计文章,设计交流,欢迎添加 | 微信ddm7212

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。

一、分割线的作用

分割顾名思义就是做设计时候,分割页面的设计手法,它的目的是让我们的设计更加有序,不同内容在页面中呈现的方式更加让用户容易理解。是帮助内容组织的很重要方式。当然分割有很多种形式,色彩,线,间距,投影,图标,图文等等,今天我们来系统的研究下分割在设计中到底如何使用的,以及什么时候使用什么样的分割最合理,希望大家通过这一篇文章学会和掌握。

很多人提到页面分割,可能脑海第一个想到,就是分割线,或者是色块,其实不然,分割有很多种类型,不同类型在页面中效果也不太一样。那接下来,我们一起来看看页面分割到底有几种类型。

二、用线进行分隔

▲使用水平的分割线来区分页面内容,除了分割内容外,还做到分组的效果。如上图阿迪的app和电商app都是通过类似的方式来处理。常用在表单中,能使界面浏览效率更高,更快速去检索内容;是页面分割中最为常见的。

▲比如在airbnb的案例中,分割线就是用来分割内容,起到分组的作用,让页面阅读起来更加有节奏。

▲在dropbox的设计中,分割线也可以搭配icon来使用,让页面看起来视觉层次更强,同时分类更加明确。

▲分割线可以说是我们每天都在运用的,无论今天的内容设计,还是像dropbox这样的工具产品都离不开分割线。但是分割线运用时候,需要注意分割线颜色不要太深,否则会有山寨感。

▲线太深会让页面不够精致,显得山寨,所以常用的分割线一般是#CCCCCC,#EEEEEE,或者黑色的10%透明度

三、用色块分割

▲除了线以外,色块分割也是比较常用的,一般在页面中用灰色色块来分割,这个色块高度一般20px左右,常用于分割上下两组的内容为主。

▲华尔街新闻app设计中,大量运用色块对页面进行分割,页面模块更加清晰。

▲谷歌浏览器的设计中,运用了色块的分割,模块更加明确。如果你们的产品需要很明确的划分组和组的关系,可以运用这种方式。

▲在很多电商设计中,这种风格目前还是主流,对于页面内容比较复杂的页面,需要这种分割明显的样式去区分模块和功能。

缺点是风格陈旧

用色块分割,需要考虑产品整体的风格规则,这种分割方式一个最大弊端就是风格会有些陈旧,在当今留白,轻量化设计当道今天,太多色块割裂感强,会显得陈旧,所以使用的时候需要根据产品整体风格去把握。

四、用图标进行分割

▲除了线,色块还会通过一些插入式的图形进行分割,如上图,整个都是列表的信息流,在列表的前面适当加一些图标来锚定整个页面,会让页面看起来有更大的空间,浏览起来也更顺畅。

▲谷歌浏览器的设计,也是通过图形来锚定页面节奏,让设计看起来更加合理和秩序感。

▲谷歌新闻的列表设计,表单前面通过数字来锚定整个页面的节奏和空间,让大段文字看起来没那么累。

▲谷歌的产品系列中,表单前面增加图形或者文字会比较多,也成为他风格统一的非常重要的一个DNA。在表单前面加图标或者其他视觉元素能让页面呼吸和留白更加的通透。

五、用留白进行分隔

常用的的线,灰色色块,图标分割这些都比较传统,且对于页面来说一个最大缺点是占据了很多空间,本身移动端屏幕就很有限,线,色块,图标,无形增加了用户认知负担,所以随着设计趋势的发展,用户也更加关注内容本身,所以慢慢的设计开始尝试用空白去分割页面,同时还能消除了页面多余的视觉噪音。

留白在页面中是设计师没有放任何视觉元素,使得混乱的页面看起来有了喘息的空间,空白的原则创建了空间,通过格式塔的运用,用户自动在视线上形成了分割,同时空白为页面增加了很多呼吸空间,并且让设计看起来更加简洁,在当下也是越来越流行。

▲国外知名社交电影软件MUST整个页面都是采用的空白分割运用在它设计中,通过内容去区分页面模块信息。

▲有序的留白,从始至终贯穿着整个页面设计,这种风格也不需要任何线条就能将页面层次很好的传递出来。

▲知名艺术电商网站Artsy就是运用空白分割,页面干净富有艺术气息。空白来分割越来越成为一种主流设计手法。

六、用色彩进行分割

色彩也同样可以用来分割内容,将色彩运用的好,不仅能吸引用户将关注力停留在页面上,更主要是能让用户更方便的注意到你想表达信息内容。

▲Headspace整体页面大多是通过这样的色彩进行分割,色彩本身就是和其他内容有隔离关系,恰到好处的构图,加上色块的运用,很好的将内容和模块区别开来。

▲在他的产品中到处可见这样的设计,不仅让页面非常的年轻活泼,同时这样的配色也会让整体设计让人印象深刻。但是需要注意是不能色彩太花了,图形存在是为了内容做烘托的,最要还是让用户关注内容本身。

▲Stadium live这款直播产品,将色彩玩到了极致,整体页面就通过色彩来区分内容,非常符合娱乐化产品定位。

▲在它页面很多地方都随处可见色彩的大胆运用,这个对于设计师配色功底要求较高。

▲这款APP也是我非常喜欢的一款产品,大家感兴趣可以去下载体验。也是用色彩做分割非常成熟的一款产品。

七、用投影做分割

阴影在设计中是非常重要的一个设计元素,除了能给页面带来设计层次,同时也能很好的区分内容,业内最出名的莫过于的google的材料设计语言,其中就是大量运用投影来营造页面氛围。

▲在google系统产品中,运用投影来做页面分割非常多,投影除了能拉开页面的空间感,同时在视觉上能更加突出。google日历案例中,导航和核心操作加号按钮都加深了投影。

▲google新闻页面中同样如此,除了导航区域,在卡片上也通过投影方式来分割内容,增强层次。

▲在苹果新闻的产品上,同样看见了类似设计手法,通过按钮或图片的投影,增强页面深度的运用,不同于google的是苹果的投影更加柔和。

▲Instacart产品也是如此,通过投影来区分内容,他们的卡片外面都增加了投影加强页面深度。总之,投影是非常好的一种增强页面层次和细节的一种手法,大家运用时候定好场景和规则。

八、行业趋势

以上7种分割方法,基本覆盖了所有视觉的分割手法,虽然没有放品牌和网页的案例,但是大体都是相同的,今天无论我们选择哪种分割手法,本质都是没有错的,关键是要和整体的设计语言调性匹配起来,如果选择一种就运用一种,切忌多种混搭,这样就不会出现页面错乱的感觉。从整体移动端设计趋势来说,曲线、留白和投影来分割是一个大的方向趋势,值得我们多多关注。

最后

今天这篇文章只是一个设计中的基础,它在于帮助我们梳理设计的内容细节,别看一个小点的知识,当你掌握的这些小点知识多了后,你的知识体系就会形成面,最终帮你带来质的提升,今天这篇文章是让你打开系统的思考,希望大家在使用时候,根据自己场景去定义。设计没有一个绝对正确的标准答案,试了才知道。


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

文章来源:ui中国   作者:skys 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



全球化企业常用的Design Sprint

涛涛

本文要义:通过Design Sprint敏捷开发的设计方法,快速优化产品并验证,以成本和风险最小化,打造用户真正需要的产品。


关键词:敏捷设计方法, 产品优化,用户体验/交互改进,不止理论/提供真实而具体的操作方法



正文:


一.什么是Design Sprint?


1.  Design Thinking(设计思维)


介绍Design Sprint前,先介绍下Design Thinking。


Design Thinking(设计思维)是一个以人为本的解决问题的方法论,从人的需求出发,寻求创新解决方案。

Image Source: Nielsen Norman Group


通俗来说,设计思维是一种通过用户的角度来设计创新产品或服务的方法。通过改变角度,来重新观察事物和对待存在的问题。设计思维可以帮助每个人来发掘其创造潜力,进而孕育出创新的产品。


2. Design Sprint设计冲刺

Design Sprint(设计冲刺)是Design Thinking(设计思维)的实践版本。

 

Design sprint 起源于斯坦福大学实验室,由Google Ventures(谷歌风投)推广并内部实践,且广受欢迎。它是一个为期5天,结合设计思维和敏捷开发的设计方法。



二.Design Sprint的优势


传统产品迭代过程中,通常会有这些问题:用户需求缺乏有效论证,迭代/创新效率低下等。 我们努力去想解决方案,希望能够快速的获取解决方案,并且能够验证我们的方案是否符合用户需求。

 

Design Sprint能够在工作中快速解决问题并提高创造力。目标是以最快的速度和最低的成本,最大化打造用户真正需要的产品。使用“Design Sprint”,仅5天,一个小团队也能为用户提供一个极具可行性方案的目标。



Day 1 - Understand 理解

Day 2 - Diverge 分散思维

Day 3 - Decide 决定

Day 4 - Prototype 原型制作

Day 5 - Validate 验证




Design Sprint和“典型设计过程”的区别:


典型的设计过程:1创意-2开发测试-3上线-4验证。如图灰线。

存在的问题:耗时耗力,用户反馈慢,成本大,风险大。

 

Design Sprint的设计过程: 1创意-4验证,如图蓝线。

优势:跳过”2开发测试”和”3上线”的过程,用“创意”直接“验证”。降低成本和风险,快速验证方案可行性。



三.怎么进行Design Sprint?


以下通过真实产品实例来说明Design Sprint,方便大家理解。

不单讲理论,同步附上各种实际操作方法和细节,另同步附上用户体验/交互(UE/UX)改进实例。


关于产品:

背景:产品是TO B的信息数据库。

用户:企业用户

用户使用产品的目的:浏览专业信息,帮助企业在各种事务中做出正确的决策。

(注:由于公司产品为企业级付费产品,不方便对外,仅以wireframe框架图说明,主要用于说明Design Sprint流程和用户体验UX改进,请忽略颜值和细节。)





(一) Day 1-理解 (Understand)


目标:将工作信息全面传递给整个团队,选择并定义要解决的问题。范围要小而精,不用太大。



那理解什么呢?需要理解,用户需求是什么?相应的,我们的战略是什么?


我们从多个备选方案中,选择了一个“行业分类信息”的页面。该页面为一个根据行业分类来浏览相关信息的页面。


原始布局如下:



页面功能分区如下:



客户痛点 (Customer Pain Points):

1)    用户需要从大量列表信息中,找到自己想要的资料,再提取出关键信息,自己再整理出一份研究报告。费时费力。

2)    希望行业分类可以多选,因为有些用户会同时关注多个行业信息。但是目前只能单选。

3)    行业分类信息对用户很重要,但是用户在一级导航条中找不到。

 

我们选择这个页面改进的原因:

1)     用户痛点比较明确,能够快速定义要解决的问题。

2)     页面范围小,能够在Design Sprint的5天中实现敏捷设计。

3)    页面范围虽小,但是可改进的种类丰富,能够充分应用Design Sprint实现目标。





(二) Day 2-分散思维 (Diverge)


目标:团队一起头脑风暴,想出各种解决方案。



具体操作方法:


1.    用四象限图,分析想出的解决方案的确定性和风险性。

针对确定的主题,根据用户的痛点,提出我们自己的解决方案。然后把各种思路/点子/解决方案贴到下方的四象限图中,分析这些解决方案的确定性和风险性,并找出最终的解决方案。


通常来说,在“低风险”*“确定的”这个象限(如图中-右下方区块)中的解决方案,是最值得操作的解决方案。



2.  制作“假设测试卡片”


可以认为这是一个针对本次优化的度量衡标准。


每张卡片围绕一个解决方案/功能点,卡片中主要列出以下几项:

1) 标题

2) 负责人

3) Step 1: 假设。列出一个用户需求。

4) Step 2:测试。列出,为了验证这一个需求,我们需要做什么准备工作。比如,对用户调研;分析目前页面存在什么问题。

5) Step 3: 措施。针对这一个需求,我们需要提供什么功能。

6) Step 4: 判断标准。列出,有多少用户对于这个功能有需求,我们就认为这个功能是市场的。比如60%的用户认为需要这个功能,我们就认为这个功能改进是成功的,最后是值得去开发上线的。





(三) Day 3-决定 (Decide)


目标:团队达成一致并选取出Day1提出的问题的最佳解决方案(一个或多个)。


在这里,关于“团队达成一致”是比较难界定的,如果没有一套衡量标准,达成一致就比较难实现。那么我们在Day2中的四象限图就是很棒的工作方法了。


根据我们的实际情况,在Day2中低风险”*“确定的”这个象限中的解决方案,就是最优解决方案了。那么接下来就可以着手拆解,细化这些功能点了。


可以使用草图/手绘方式,拆解这些要改进的细节,如下图所示:







(四) Day 4-原型制作(Prototype)


目标:制作高保真原型来呈现给用户,可以采用静态页面或可交互式的形式。




以下重点介绍新原型上的用户体验/交互的改进


新原型如下:


旧界面 VS 新原型:



1.    关于第1个痛点的解决方案


用户痛点:用户需要从大量列表信息中,找到自己想要的资料,再提取出关键信息,自己再整理出一份研究报告。费时费力。


旧界面的问题:只有信息列表,需逐条浏览信息


新原型的解决方案:

1) 大数据可视化。利用大数据分析,整合数据库中所有信息,以图表形式(柱状图/气泡图/线型图等)提炼出关键信息,风险程度,排名等。用户可以一目了然的了解目前行业存在的问题,帮助自身企业规避风险。极大提高用户的工作效率。

2) 提供表格。如果用户需要了解细节,可以通过表格浏览具体信息。

3) 提供下载功能。针对图表和表格,提供下载,用户可以得到一份完整的报告,自己使用,也可以用于对领导的工作汇报。


优化目的:

直击用户痛点,提升我司产品的商业价值,为产品盈利带来可能性。


旧界面 VS 新原型:


旧:

新:



2.  关于第2个痛点的解决方案


用户痛点:希望行业分类可以多选,因为有些用户会同时关注多个行业信息。但是目前只能单选。


旧界面的问题:

1) 每次用户只能单选1个行业分类查看相关信息。

2) 行业分类一共有30个左右,按一列展示。在1366*768px分辨率(usage显示为用户常用分辨率)下,只能看到9个左右,每次用户切换其他的行业分类,都得上下滚屏,来回找,非常麻烦。

3) 行业分类信息页面,会默认显示上次选择的行业分类的相关信息。对于当前已选择的行业,该分类仅在左边列中红色高亮显示。如果已选的行业分类没有排在第一屏,用户初次进入该页面,都不知道当前的信息是关于哪个行业的,会造成用户的困惑。


新原型的解决方案:

1) 把行业分类从左边一列显示,转变为在页面顶部一行内显示。用户可以直接在第一屏就看到定制的行业分类了。

2) 在这一行行业分类菜单中,提供最多3个定制的行业分类的tab,供用户切换查看相关信息。(据调研,我司用户中,通常最多关注3个行业的信息。)

3) 如果用户需要定制其他行业,可以通过“行业分类定制”的下拉框中,选择其他行业分类。该下拉框也能保证在1366*768px分辨率的第一屏中完整显示。


优化目的:

用户体验改进。


旧界面 VS 新原型:


旧:(灰色部分为第二屏,用户在如图白色的第一屏,在左边行业列表中,是看不到上次已选择的红色高亮的行业的。相应的,用户在看右边信息列表页的时候也是懵圈的,会不知道这些是哪个行业的信息。用户体验很差)


新1:(行业分类在顶部一行内显示,默认显示3个定制行业的tab)


新2:(提供行业分类的多选下拉框)



3.    关于第3个痛点的解决方案


用户痛点:行业分类信息对用户很重要,但是用户在一级导航条中找不到。


旧界面的问题:行业分类信息没有在一级导航条中显示。


新原型的解决方案:把“行业分类信息”的菜单,加到一级导航条中,用户一目了然。


优化目的:

1) 用户体验改进

2) 把这个相对重要的行业分类信息可视化界面,曝光到一级导航条中,便于用户发现并了解该功能,发现其价值。为产品盈利带来可能性。



旧界面 VS 新原型:


旧:



新:





(五) Day 5-验证(Validate)


目标:收集用户反馈,验证解决方案是否可行,然后为下一步工作做一决定。



具体操作方法:CDI用户访谈


1.    CDI用户访谈的目的:

1)验证本次优化是否满足用户的需要

2)验证本次优化对于自己公司是否有潜在盈利能力。

毕竟做得再好的产品,用户不愿意付钱买,那都是在做慈善事业了。一款解决用户实际需求的产品,公司也能赚钱,继续可持续发展,那才是双赢(Win-Win)

(注:To B产品本身就是企业级付费产品。和To C的情况是不一样的, To C只要有大量流量,赚钱方法很多,此处不作讨论)


2.    CDI用户访谈的具体操作方法:

1)对3个不同类型的企业用户进行用户访谈(当然时间够的情况下,采访的用户,即样本量越多越好,验证结果会更有价值。自己控制数量即可)

2)展示高保真原型

3)询问一系列问题,包括用户对此的大致评价,打分(最低1分-最高5分),是否有意愿购买,能否接受的价格其他建议等等。

4)每个访谈会议控制在30分钟左右。



# 每个客户访谈记录可制表如下:



收集到所有用户的访谈信息后,综合分析,确定Design Sprint的解决方案是否有价值。




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

文章来源:站酷   作者:Lu倾倾 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

个人资料

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

存档