交互设计方法和思考过程
摘自http://www.zhangyq.com
1.接需求
这个阶段主要是接到产品经理等拿来的需求，比如FRD文档。和产品经理讨论需求，了解重点。
2.需求分析——>翻译成界面语言
俗话说，Think first，Design next. 对于接到的需求，第一件要做的事情就是仔细分析和讨论下需求的逻辑、内容和目的，而不是马上风风火火的开工。这个阶段的重点在于梳理用户逻辑+特殊需求，最好能高度概括成几点。
忍不住引用臭鱼博客的一个灰常贴切的案例：
一个需求文档。里面描述了页面需要承载的信息。
第一步. 概括信息
第二步. 排序
1. 您选择了回邮方式办卡，概括解释这个办卡方式。
2. 接下来您应该 下载申请表
3. 回邮办卡的全过程是这样的…
4. 一系列注意事项。
第三步. 翻译为界面语言
对于单一的页面（并非整站，没有操作逻辑）的产品来说，需求分析完，交付物出线框图，后面视觉和开发静态页面足够了。
3.结构框架
实际产品往往复杂很多，在需求分析的时候要对产品结构进行梳理，表达出网站的层级结构。做出类似的站点地图（site maps）。这个除了可以把公司所提供的内容层梳理清晰，为全站导航也奠定基础。
4.流程图（flow charts）：表达用户或系统对某项任务执行的流程。流程图的重要性在于从用户的使用逻辑来分析交互逻辑是否合理，走得通。
其实流程图分为单个用户流程图和多用户流程图。它不仅是提高可用性的利器，也是信息架构的好工具。具体详情可以看：利用任务角色来做信息架构
举一个购物网站的例子：使用者主要包括购买者、买礼物的人、通过EDM(email营销)进来的人和退货者。
先画出“购物者”的流程图
再画出其他角色的流程图
继续画出“买礼物的人”的业务流程。如果这家B2C网站增加了“买礼物”的需求，增设了“我的愿望清单”用来记录、显示我想购买的商品或者公开、指定给好友。
你会发现不同用户角色可以复用相同的页面。比如：购物车、搜索结果list页、送货地址、确认页面等等。
画出所有用户角色的流程图，整体看一遍
通过梳理不同用户的行为路径，可以更好地梳理复杂问题。你不仅可以从开始紧盯用户来网站的目的和需求，还可以避免遗漏页面和页面上关键性的操作。
- 所谓避免遗漏页面就是查看整站是否缺失了某些页面，首页、类目集合list页、list页、detail页，以及操作后的结果页。个人觉得在这个阶段项目估时最靠谱。
这些表现页面
- 每个页面展示要素页面上关键性的操作对于接下去的视觉设计也可以起到参考的作用。
相关箭头越多，页面承载的信息量也越多。还有一些重要操作（如上图红框）在视觉上应该突出表现（比如button颜色醒目色、高亮度等）。各个要素在页面中的级别其实是不同的。比如：
“接受” 更加醒目的引导用户。这里也会对一些企业战略的特殊需求引导。
还有，操作逻辑紧密的按钮要接近。
保存宝贝后，要么结算要么关闭。虽然右上角有关闭按钮，但由于两个操作紧密，应该放在视觉上比较接近的位置。
5.线框图（wireframes）：更像最终产品呈现的毛胚。简单来说，就是抛去配色、字体样式、图片等的原型设计。这个阶段包含具体操作细节。
线框图这个阶段，除了把上一阶段流程图需要的要素包含好，最重要的要考虑如何在页面中排布这些信息，积极具体的操作细节、状态说明。
交互体验的一些参照原则：操作前，结果可预知。 操作时，操作有反馈，可停止。 操作后，操作可撤销。
交付物中对交互细节和跳转页面的说明
具体交互细节的说明，包括focus状态，变化反馈条件等等。
6.检查check
这个阶段就是再次对线框图进行可用性的分析。第一时间，设计师可以把已有的可用性原则拿出来参照，是否出现问题。
《Don’t make me think》里有些说明，外加偶个人总结的常见排查点：
- 这是个神马网站？（站点名称、logo、适当的说明）
- 我在哪？（文章或page title）
- 主要栏目有神马？（导航、分类…）
- 我在导航的哪个位置？（导航反白、面包屑）
- 能回去么？（Home和返回或撤销）
- 需要搜索吗？（搜索框满足询问型用户，而不是浏览型用户的需求）
- 两个重要状态有吗？（第一次进来的新手引导，参见here+出错状态提示）
- 相同功能和文案的统一、一致表达。
回头看看，这几个阶段的交付物涵盖了交互设计的内容：信息架构和操作细节。当然，具体思考过程不会那么界限分明。可能兼顾两者，比如在流程图中既有细节又有架构。
交互设计其实让机器“模仿”人和人沟通对话。交互和视觉最终要的是清晰表达信息。
浙公网安备 33010602011771号