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
