• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 让客户更投入!产品设计中的「心流」状态营造思考

让客户更投入!产品设计中的「心流」状态营造思考

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含产品设计,心流,用户体验设计等相关知识,希望在学习及工作中可以帮助到您

鸿影:心流,指的是人们全身心投入某事的一种心理状态,心流产生时会有高度的兴奋及充实感,在「心流」状态下,人们精力集中、全神贯注,这也往往意味着可以有持续、高质量的学习或产出。

而在产品设计中,让用户进入「心流」状态,也可以带来各种各样的好处。以我目前在推动优化的一个业务场景为例,它涉及到对用户的培训(学习掌握完成任务需要的背景知识和要求)、考试(检验用户培训后是否达到要求)以及用户达到要求后的任务分发执行,如果能激发用户的「心流」状态,对于培训效率、考试通过率以及最终任务执行的结果质量,都可以起到积极促进作用。

那么,怎么通过产品设计的手段帮用户进入「心流」状态呢?《消费者行为学》中提到,「心流」体验具有以下特征:乐趣的感觉;控制的感觉;专心致志与高度集中的注意力;由于活动本身而得到的精神享受;扭曲的时间感;所面对的挑战与个人技能间的匹配。而对于乐趣感、控制感、注意力,有许多熟悉的设计方法都可以帮我们达到目的。

乐趣感:游戏化包装 & 情感化细节

玩游戏的过程被视为最典型的心流体验,而游戏化的包装手段,可以将原本枯燥的事物变得更加有趣,吸引用户主动持续地参与。Walkup 就是这方面的典型案例,将简单的走路变成环游世界解锁各种美景成就的故事。

一个叫 Memrise 的背单词应用也用了类似的手段,将简单的背单词任务列表包装成了一段太空冒险的经历。

实际的游戏化设计手段非常丰富,以上说的只是冰山一角。而有趣的情感化细节融入,可以对用户情绪进行更好地管理,好的状态可以受到激励和保持,遇到障碍时则能被有效安抚,比如以下有道口语大师的案例:

控制感:符合直觉 & 位置感知

「控制感」指的是个体对能够控制自身的个人意愿的觉知,能清楚地预知和掌控接下来发生的事情。而在产品设计中,我们应该做的则是尊重用户的直觉/心智模型,提升功能可供性(Affordance)。移动场景下常见的滑动、捏合缩放、旋转等自然触控手势交互就是符合直觉、不需要太多学习成本的典型案例,不少 GTD 产品里都有出色的经典运用。

除了功能操作本身之外,也要关注用户对当前所在位置的感知,比如涉及大量信息浏览的场景,平铺直叙会让人感到过于冗长、易失去耐心,而结构化的信息呈现方式 + 清晰的进度外化,则可以加强用户浏览过程的控制感、提升浏览完成的信心。

注意力:强化内容 & 避免中断 & 音效

高度集中的注意力,意味着对当前内容/操作本身的关注,而不受到其他无关元素的干扰。在内容呈现方式上,可以通过精简不必要的信息、沉浸式浏览、设计风格轻量留白等手段,引导用户将注意力集中在内容本身;在操作路径上,则需保证尽可能的顺畅,集中在当前主要操作上,即使有提醒也使用更轻量的方式,而不是用粗暴的模态弹框等方式干扰中断。

除此之外,我觉得音效也是提升注意力的手段之一,就像我们工作中会通过听歌来帮助自己进入状态一样,合适的背景音乐也可以帮助用户沉浸在当前场景中,效率类应用 Sway 就是一个不错的案例。

当然,以上只是不完全的总结,我相信还有很多方法和案例是有助于实现「心流」特征(乐趣的感觉;控制的感觉;专心致志与高度集中的注意力;由于活动本身而得到的精神享受;扭曲的时间感;所面对的挑战与个人技能间的匹配)的,欢迎交流补充啦~

欢迎关注阿里CCOUX团队的微信公众号:

37.2qr

「如何做出打动人心的设计」

  1. 《进阶好文!如何从3个层面做出打动人心的设计?》
  2. 《如何做出让竞争对手难以复制的设计创新方案?》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 网站产品设计参考的几条原则
  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 怎么做私单才能又快又赚钱?来看老司机的私藏流程!
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 为什么不要再问用户「你们到底想要什么」?
  • 这10个不好用的微信设计,有哪些深层次的产品逻辑?
  • 基础小科普!浅谈「列表视图」与「网格视图」的用法

相关文章

  • 2018-08-23腾讯工作坊总结!如何构建智能空间的方法与应用?
  • 2018-08-23系列三部曲!中国式草根设计师的自我提升(完结篇)
  • 2018-08-23谷歌产品设计的秘诀:2017年你最应该掌握的设计方法
  • 2018-08-23网易资深设计师:提高工作效率的全方位实战指南
  • 2018-08-23最全最好用的动效落地方法,都帮你总结好了(下)
  • 2018-08-23通过这5个AR APP,帮你一窥现实增强技术的应用
  • 2018-08-23想为iPhone X设计UI?给你这11个设计小贴士
  • 2018-08-23618前夕,来看京东设计师是如何用场景化让你买买买的
  • 2018-08-23想更好地掌控设计,你还需要懂得形状心理学
  • 2018-08-23免费高效!用 Paddy 让你的 Sketch 学会自动排版!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css浮动(float,clear)通俗讲解经验分享
    • 实测图片的HTTP请求
    • 配色高手系列!聊聊“黑色”在电商设计里的常用搭配技巧!
    • 如何界定借鉴和抄袭?高手用一个插画案例让你轻松看懂!
    • 如何在网站中插入天气预报
    • 轻松看懂规范!详解组件控件结构体系之操作类
    • 618 如何让用户买买买?来看腾讯设计师的总结!
    • 免费下载!谷歌携手Adobe推出超好看的的思源宋体(7种字重)
    • 5个步骤实现响应式Web设计方法 与瀑布模式说”再见”(图文教程)
    • 热爱写写画画的你,可以用子弹日记激发全部创意

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有