浅谈产品体验优化

1.产品体验

• 1.1 易懂(能用)
  • 场景化
  • 结构化
  • 易理解
• 1.2 易操作(易用)
  • 简约
  • 不干扰
  • 一致性
  • 常规化
• 1.3 超预期(好用)
  • 美感
  • 潮流

2.常见问题

• 2.1 企业应用复杂,功能重要,页面要怎么取舍
  • 场景化设计：面向场景，才能取舍
  • 沉浸于场景，才能感同身受
  • 对待用户，少即是多：不堆砌功能，功能服务于场景和整体体验
  • 好的解决方案都是优雅的，如果解决方案非常复杂，一定是问题错了
• 2.2 复杂功能和信息相似,又不同,怎么重用
  • 先做产品结构化,之后才是功能细节
  • 信息结构化:
  • 抽象概念模型，定义核心实体和关系，形成稳定信息架构； 信息要有条理的呈现给用户：要区分类型、重点、主次，分类的信息易接受；
  • 功能要结构化

  进行功能架构设计，定义功能间的关系，形成稳定的功能

• 2.3 企业用的东西专业性过强,文案可以说的明白吗
  • 注意产品中的提示文字,“产品中的文字是你和用户在说话”- 文字反应气质
  • 清晰易懂，表明你是一个逻辑清晰的人
  • 不要假定用户了解背景知识
  • 避免登录/登陆、帐号/账号不分
• 2.4 业务逻辑过于复杂怎么解决
  • 简化、简化、再简化，然后相信用户
  • 隐藏式设计：“ 让功能存在于无形之中”
  • 操作路径的简化：去掉非关键的确认，去掉不必要的过渡
  • 信息输入的简化：去掉需要用户思考/计算的信息录入项，或者自动化
• 2.5 让多设置的页面用户能一看就懂,该怎么做
  • 相同/相似功能避免不一致
  • 不同功能尽量一致性
  • 产品不是堆砌，一定是要经过精心雕琢的，把体验作为产品的生命线
• 2.6 怎么样才能让用户知道要做啥
  • 照顾用户日常已形成的行为习惯，不要盲目地试图改变用户
  • 避免画虎不成反类犬，避免生搬硬套
  • 关键信息置于用户视野焦点之内：别让我找，我视力不好
  • 操作、按钮保持相对固定位置：别让我思考，每个对话框都有一个明显的默认按钮
• 2.7 表单当真要明确哪些是必要信息,哪些是非必要信息
  • 尽量不要让哪些非必要选项干扰用户的填写,不要给用户看不完的东西

3.手机端常用优化

• 3.1 静态资源缓存 — 200 from cache
• 3.2 静态资源 localStorage 化
• 3.3 列表数据缓存
• 3.4 BEM 模块化命名 class
• 3.5 less模块化css

4.加载性能优化

• 4.1 压缩合并脚本文件
• 4.2 CDN部署
• 4.3 减少HTTP请求
• 4.4 正确配置资源缓存
• 4.5 尽可能避免302(因为访问问题而被重定向到另一个页面)
• 4.6 资源文件LocalStorage存储,节约304的时间(304对客户端有缓存的一种相应,不算是一种错误)
• 4.7 按需加载,不浪费资源
• 4.8 复杂的页面SPA化

SPA是一种 网络应用程序(WebApp)模型。在传统的网站中，不同的页面之间的切换都是直接从服务器加载一整个新的页面，而在SPA这个模型中，是通过动态地重写页面的部分与用户交互，而避免了过多的数据交换，响应速度自然相对更高。

• 4.9 尽量使用JS-SDK
• 4.10 主框架CSS代码内联
• 4.11 异步加载非马上需要的其他CSS文件和JS文件
• 4.12 复杂页面需要给出loading效果
• 4.13 首屏尽量简单,node直出
• 4.14 尽量减少CSS冗余代码,不要有太复杂的选择器
• 4.15 加载资源存储到localStorage中

5.前端基础库的选择

• 5.1 相比JQuery和Zepto,选择Zepto,两则基本相似,但是Zepto体积小很多,基本只有JQuery的三分之一
• 5.2 使用touch事件来代替click
  • 速度更快,click有300ms的延迟
  • 可以使用Zepto自带的tap事件
  • 可以使用第三方库,比如fastclick