产品体验设计与实操

, ,

一、基础界面

1、启动页

  • 纯色背影

    Logo靠下 、吉祥物、SOLGON

  • 大片拍摄、气质第一（美食、旅行、电商、影院）

    微信：设计简单、寓意深远

    容易采坑（选图不适、版权）

    自如：风景城市名片

  • 故事渲染、直戳人心（大爱题材）

    场景故事渲染，引起共鸣，吸引用户目光

  • 引领趋势、打破常规（时尚、动漫、视频、游戏）

    创新和突破，打破用户的审美疲劳。

    3D建模：闲鱼、百度、天猫

    二次元：BILIBILI

    短视频：难度大成本高 效率低

2、启动页实例（适合的才是最好的）

操作流程

  • 排列方式
  • 设计形式
  • 规范格式：不同分辨率来投放

3、首页入口留住用户

  • 解决功能层级的分组问题

    • 让用户在无意识状态下
    • 格式塔理论的接近原则

  • 直观呈现信息

    • 找到功能入口 不是目的
    • 主要是为了找到具体的内容

  • 设计技法

    • 图标风格分功能
    • 色彩区块更直接
    • 卡分分割显气质
    • 文字和线做对比
    • 标签留白齐参与

4、首页三种设计类型

  • 功能入口型、信息列表型、即时体验型

  • 信息列表型和即时体验型的表象

    • 发现其信息列表要突出的重心，围绕这个重心选择适合的排列方式 上下排列 左右排列

    • 第一，提升即时体验场景的准确度，比如地图的定位准确才能找到目的地，不至于走冤枉路；

      第二，注重引导用户的操作体验，比如导航，箭头显示引导用户一直向前，无须用户判断东南西北；

      第三，即时反馈的交互，比如“游戏开黑”场景中放了个大招，结果出现延迟，被对方翻盘了，这体验玩家得多郁闷。

  • 怎么融合三种首页设计类型

    • 1.明确设计需求、分组功能层级

    • 2.选择适合的设计技法

      • 图标风格分功能

        颜色区块更直接

        卡片分割显气质

        文字和线做对比

        标签、留白齐参与

    • 3.信息列表的融合、提升内容转化

    • 4.即时体验型设计

5、实用性强的图标设计

特征

  • 高辨识度，无须注释
  • 美观大方，吸引用户
  • 凸显功能，体现特征 : 帮助用户快速识别产品功能
  • 国际范儿，通用性强

怎么设计

  • 找到品牌符号 : 品牌色、VI 形象的延展、吉祥物的延展、公司文化、Slogan、行业特征
  • 找准表达图标的方式 :
    • 拟物化表达
    • 比喻的手法
    • 将字做主体
    • 模拟出场景

二、细节设计

1、优化弹框

1.选择好出现的时机

2.避开阻断性影响

3.体现独立性，降低跳出感

4.交互方式上实现统一

  • Toast （提示框）： 一般用来显示操作结果，作为提醒或消息反馈来用，这是对用户操作影响最小的弹窗，所以在产品中被用得也最多。比如下图 1 新闻发现新消息之后提示用户。

  • Dialog（对话框）： 主要用于一些比较重要的操作，必须用户做出反馈，多以阻断性的弹窗出现，按理说是对用户的困扰最大，但其涉及的操作往往也比较重要，比如下图 2 需要用户确认，可以有效防止用户误操作。

  • ActionBar（功能框）： 可以看成是 Dialog 的一种延伸设计，但增加了更多的功能选择，同样也需要用户必须做出操作，但基本上自带取消按钮。比如下图 3 所示，更多的选项供用户选择。

  • Snackbar（提示对话框）： 是安卓系统的特色弹窗之一，不会打断用户正常的操作流程，用户可以点击功能按钮进行回应也可以忽略。如下图所示，弹窗一闪而过，还可以操作。

一致性

  • 弹窗出来方式和停留的位置： 提示框、对话框、功能框、提示功能框都可以从页面底部弹出，也可以都停留在底部，这样远比居中显示对用户的困扰要小得多，用户对弹窗的出现也会有一定的心理预期。

  • 退出弹窗方式可控： 弹窗带有关闭按钮，但关闭的位置却哪里都有，从用户可控热区来说，关闭放置在弹窗下面更容易被用户触碰到；带有取消按钮的弹窗也尽量靠下放置在用户可触碰区域，用户可以轻松关闭不需要的弹窗，这样远比不知道怎么关闭的困扰要小得多。

  • 弹窗设计上的统一： 弹窗上可操作区域和重点信息应该被着重设计，最先被用户 get 到。设计上尽量简洁，突出信息层级的主次。比如下图中，简洁的界面设计清晰地呈现出弹窗上的关键信息和可操作区域，右图还显示安装的进度，给用户的清晰的反馈，降低用户在等待中的困扰。

2、状态

1.提示引导用户操作的状态

2.体验中的即时响应提高用户的效率

3.体验完成结果反馈提示用户结束状态

怎么设计状态才能让用户实时感知？

1.设计要容易理解且醒目

2.动效要引人入胜

3.要注重情感化的表达

3、表单

  • 切断用户的后顾之忧： 抓住用户痛点去想解决方案，比如信息填到一半网络中断未保存。

  • 改变表单展现的形式： 减少用户因填写信息过多而产生的焦虑感，你要从交互体验层面去创新，比如填写信息的方式由输入型变为选择型。

  • 新技术带来的全新交互形式： 了解前沿技术很重要，因为新技术能带来体验的革新。比如我们可以用 OCR 技术，通过扫描提取到图片的文字信息，节省输入信息的操作成本。

4、签到页

好处

  • 促进日活： 这是签到页最直接的作用，也是产品运营的基本诉求，比如资讯产品会用实时推送的通知来带动日活。对签到页来讲，设计醒目的福利展示，无疑是最能调动用户进行签到的方式了。比如图 1 展示了签到积分可兑换的礼品，会促使用户签到。

  • 稳定留存： 留存就是要留住用户。我们经常用留存来反推产品的体验设计好不好，产品能帮用户解决问题，体验设计做得也好，留存自然会提高。而在签到页设计中稳定留存最好的办法就是设计好签到的周期，让用户坚持打卡，打卡时还要让用户轻松点击一下就能领取福利。这样一来，福利吸引到用户，体验也很轻，用户很容易坚持。比如图 2 中每天浇浇水就能开宝箱，连续完成几次还有别的奖励，这些都能吸引用户持续签到。

  • 带动拉新： 产品发展到一定阶段会面临增长瓶颈，因为用户的圈层和基数有限，所以产品运营会不断扩大推广的圈层，但这不是靠几个人的力量就能完成的。签到页中有邀请好友、成就展示、好友排名等功能展示，都能通过分享带来裂变拉新。比如图 3 中邀请好友助力领水，当日邀请 6 个人还有更丰厚的奖励。

  • 扩大营收： 营收是任何产品都无法回避的现实，在签到设计中也不能错过营收环节，不过根据产品类型的不同，追求的营收指标是不一样的。比如资讯类产品任务是增加文章阅读量来扩大营收，而电商产品任务是引导用户下单来扩大营收，下图中去拼单就能获得化肥奖励，领取奖励后，弹窗还会提醒你继续去拼单，还添加了任务失效时间节点，制造了一些紧迫感。

上隐模型

触发（设计带入）> 行动（签到体验）> 多变的筹赏（签到周期）> 投入（持续签到）。

HOW

  • 通过设计增强代入感
  • 签到体验暴露隐性设计的魅力
  • 签到的周期增强用户黏性
  • 领取福利要贴近实际

5、缺省页

  • 1.传达品牌形象，体现品牌温度
  • 2.趣味性的表达，触动用户情感
  • 3.提供新任务的引导，带来转化

三、全链路思维篇

1、体验不等于视觉

1.按界面的功能区分视觉表现
2.选择适合的视觉方法
视觉对体验的影响主要表现在视觉设计所呈现出来的结果上，比如改变用户体验的视觉层级，这样用户的聚焦点、触发点都可能会发生变化，由此可能触发一些错误的操作。我们归纳一下视觉设计呈现出这些结果所用的方法，主要有比例、平衡、对比、重心等。

  • 比例： 视觉占据的比例大了，用户视线都转移到了视觉上，势必对体验产生影响。比如图1中开启通知的设计，“引导用户立即开启”的设计比例很大，暂不开启比例很小被弱化，视觉和体验上引导用户正确操作，表达很到位。

  • 平衡： 视觉元素中对称、径向、呼应等关系维系着整个画面的平衡，如果做不到这一点就会使得画面失衡，从而影响用户对体验的判断。比如图2的设计，两个按钮之间明显不平衡，画面比例明显失调。

  • 对比： 视觉设计中经常用对比来表现体验顺序，可这个对比设计用不好，就可能会让用户错误操作。比如图3中的设计，两个按钮虽然对称，而且立即开启的设计对比明显强过暂不开启的设计，可用户的操作却落在了暂不开启的操作上，因为手指的操作热区更容易触碰到。

  • 重心： 视觉设计改变了体验中的功能层级，影响用户的视觉重心发生了转移，用户的体验自然随重心偏移而发生转变。比如图4的设计，虽然两者的视觉层级等同，但却区分不出两个功能按钮的主次了，很可能引导用户点击了暂不开启。

  • 保持“克制”的设计理念：保持“克制”的设计理念，就是要在视觉表现力上的适度原则，不要用力过猛。

2、深色模式

打造沉浸式体验的设计方式

沉浸式体验需要尽可能地调动五感（形、声、闻、味、触），长时间吸引用户的注意力，尽可能排除其他的干扰。

  • 高度沉浸：注意力高度集中，完全沉浸在正在做的事情中。
  • 体验惊喜：在探索的过程中会不断地收获到意外的惊喜。
  • 内心通透：清晰地知道自己在做什么、需要达到什么目标。
  • 有胜任感：知道这件事有难度，但依然是自己能胜任。
  • 内心宁静：丧失自我察觉，甚至忘记基本生理需求，例如废寝忘食。
  • 忘记时间：全身心投入后，时间在不知不觉中流逝。
  • 找到内在动机：你觉得自己在做的事情源于内心的渴望和对目标的认同。

而这些心流特点表现在体验设计中，就是在营造一种“代入感”引人入胜，然后通过体验、情境、视觉等吸引用户全身心投入，我将这种“代入感”在设计中表现形式总结为如下四种：

  • 场景化的表达；
  • 抓眼球的视觉；
  • 故事化的情境；
  • 情感化的感染。

3、数据可视化

数据可视化设计不是为了炫酷，而是为了将数据化繁为简，更好地传达给用户。 我从用户对数据的理解层面出发，总结了数据可视化里的 4 个设计要点：

  • 数据中的视觉色彩

  • 数据比对的关联性

  • 数据中的图形释义

  • 数据结果的直观性

4、设计中台

这跟企业复用平台一样，只不过针对的是设计层面，是设计规范产品化思路的一种体现，我们从所有的业务设计中梳理出可形成统一规范、可复用的设计样式，将这些样式设计成灵活的通用组件。这里包括交互、视觉、UI、GUI、产品原型、设计流程、规范、品牌形象等设计，可以在很大程度上提高设计师的工作效率。

  • 选择适合的平台；

  • 建立设计项目；

  • 建立设计规范；

  • 建立设计情绪板。