网站开发的流程

在当前网页开发过程中,对用户体验(User Experience)把握的好坏,是衡量一个前端工程师的重要标准。特此推荐一本书 《用户体验的要素》,该书系统的讲述了用户的体验,值得每位前端阅读。
很多时候你会感觉一个网站不好用,但是你不知道哪里出现了问题。

有的时候一个网站很难看,但是你觉得很好用。
用的时候一个网站很好看,但是你觉得很难用。
这就是「可用性」、「易用性」和「美观」的区别了。
我们应该优先考虑「可用性」,再考虑「易用性」和「美观」。

网站开发的流程

简单的罗列一下在实际开发过程中的流程
1、立项 - 确定要做,确定人员,确定预算等

2、需求 - 需求收集和分析
- 收集比分析更难,有的时候用户也不知道自己的需求
- 亨利·福特曾说过,「如果我最初是问消费者他们想要什么,他们应该是会告诉我,要一匹更快的马!」
- 可以用「用例图」来分析需求

3、可行性分析

4、系统设计(功能设计、框架设计)

  • UML 图、时序图等

5、原型设计(草图、线框图)

  • 草图用纸和笔画
  • 线框图可以用 Balsamiq

6、交互设计

  • 可以用 Axure RP、墨刀、Sketch.app

7、视觉设计

  • 可以用 PhotoshopFireworksSketch.app

8、程序开发

9、测试

10、功能预演

11、内测

12、灰度发布

13、正式发布

安利一款设计软件
Sketch.appmacOS 专有的一款软件,目前 BAT 等大公司的网页设计师基本都在用 Sketch

它的好处是:

  • 功能少(相比与 PhotoShop),所以更好掌握
  • 操作方便
  • 贴近前端(可导出 CSS、矢量图、可复用、插件多)
    在前端开发过程中交互设计相当重要 总结几个要素 对未来的开发过程中的用户体验有很大提升。
要点
  • 有反馈
  • 一致性(可学习)
  • 可预测

以表单提交为例

1.用户按 tab 要有反馈,用户按回车要有反馈
2.用户点击提交,提交按钮要变成disabledloading
3.如果确定放在左边,取消放在右边,那么就要一直坚持这个习惯
4.用户提交后如果出错,那么已经填写的内容不能消失