编程技术

Document

网站开发的流程

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

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

网站开发的流程

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

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

3、可行性分析

4、系统设计（功能设计、框架设计）

  • UML 图、时序图等

5、原型设计（草图、线框图）

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

6、交互设计

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

7、视觉设计

  • 可以用 Photoshop、Fireworks、Sketch.app

8、程序开发

9、测试

10、功能预演

11、内测

12、灰度发布

13、正式发布

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

它的好处是：

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

以表单提交为例

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