UX Designer

感谢@WingWxy的热心指导。

在Web设计的实际流程中，处在设计这个工作线的人的职务主要有：

• 用户研究
• 用户体验师
• 交互设计师
• 视觉设计师

一般来说，学美术的童鞋在这些工作流程中主要承担的职位是交互设计师和视觉设计师，以下按照这两个职务来分类说说一个大致的学习流程。

交互设计师

需要的知识储备：

• 前端基础知识，了解HTML和CSS。
• 熟悉那些特效可以用HTML5和CSS3实现。
• 网页设计的大致原则（如表单设计，按钮设计，窗口切换设计等）
• 快速原型的设计工具的使用。
• 用户体验的一些基本原则（Don’t make me think）

建议的学习流程：

• 熟悉W3School网站，学些查阅W3School的资料。
• 熟悉HTML5和CSS3特性（表现效果方面）
• 了解响应式设计
• 了解以前两种前端框架（主要是框架的长相、交互风格）
• 看一些交互设计原则的书
• 表单设计和窗口切换是重点
• 学习一两种原型绘制的工具，如Pencil等。
• （*可选）学会写规范的交互文档

视觉设计师

需要的知识储备：

• 熟练使用PS（至少图片分层批量导出以及路径工具要熟）
• 看得懂交互设计师的原型图和交互文档
• 色彩和布局的相关知识
• 了解图标设计、按钮设计的工具和网站
• 大量收集素材（如网页底纹、按钮、图标的源文件等）
• （如果是移动设计师）熟悉Android和iOS的设计文档，背得出各种元素的分辨率。

一些工具/网站推荐

• Live Tools 是一个超棒的在线工具箱，帮助你在线设计不同的Web UI元素，包括：

  • 按钮制作
  • 表单制作
  • title 图标制作
  • 彩带制作

你可以免费自由下载生成的CSS3代码，并免费使用到你的在线应用或网站中。

• ringmark.io 是一个动态监测浏览器对HTML支持成都的工具，它将测试你当前的浏览器，将HTML5规格当中描述的功能的实现程度一一测试出来。
• 二十个在线工具推荐