大巧不工：web前端开发修炼总结

前不久读了《大巧不工：web前端设计修炼之道》有感而写的笔记。

                                              把交互理念，视觉属性及UI设计准则应用于界面林林总总的内容中，
                                              内容为导航，按钮和动作呈现，图表和表单，图标，标题，正文

                                                                                                                                         ------------记

一，前端开发的总体内容一览
调研：用户角色  目标  情景剧本
设计：1.信息架构（流程图）
          2.交互设计（可用性设计 原型设计）
          3.视觉设计（UI设计：主题和视觉隐喻，布局，色彩，材质，字体，图片）
编码（html+css+js）
优化：性能优化

二，需要掌握的技术

1.交互设计：可用性设计和测试，原型设计

2.视觉设计（UI设计）：主题和视觉隐喻，布局，色彩，材质，字体，图片

3.编辑语言：html, css , js

4.兼容性技术

5.开放API

6.SEO

7.性能：优化和安全

8.基本素质：合作，沟通

三，常用工具

1.设计类：Photoshop,Fireworks,Dreamweaver

2.原型类：Axure

3.调试类：Firebug,Yslow

4.辅助类：css压缩工具，js压缩工具，取色截图软件FastStone Capture,配色软件Adobe kuler

四，可用性设计

可用性五大属性：有效，效率，可记忆，容错，易学

可用性原则：

         1.别让我思考：一目了然，链接要像链接，按钮像按钮，加入手型

         2.停止你的假设：用户喜欢扫描而不是阅读，用户喜欢尝试性选择，用户喜欢勉强应对

         3.针对扫描而设计：层次清晰，尊重用户使用习惯，明确能点击元素，降低视觉噪音

         4.巧妙应对错误：提前预防错误信息，设计有用的反馈

         5.人性化操作

         6.一致性设计

具体应用说明：

         1.导航之道：页面要包含完整的导航元素，要提供搜素，要有页面名称，面包屑导航指示在什么地方

         2.链接不平等：要按一定顺序排序，如云标签

         3.表单设计：内容简介，有提示反馈

        4.文字方面：要简化，说明要很简洁

可用性测试：邀请用户进行场景测试，即完成一个目标

五，原型设计

那么原型工具学习计划可以这样制定：

　　1. 先把Axure各个控件（Widgets）了解清楚，知道每个控件最基本的功能都是哪些；

　　2. 掌握控件对应的常用交互命令及组合使用方法；

　　比较经典的案例如锚点效果制作、Tab切换效果制作。

　　最好是从单个效果开始，不要一开始就去追求涉及变量或过于复杂的交互。

　　3. 找一个喜欢的网站，模仿一个出来！

　　这个过程中不需要追求极致，可以从浅入深，先从简单的网站开始，比如邮箱注册，尝试一下自己能否用Axure制作一个从登录到使用具体应用的Demo；

　　这个阶段往往是收获最大的，也是实际应用的开始。

　　4、最后就可以自己创新了，可以自己寻找某个需求来实现它。

　　比如：做一个网上订餐，自己开店的作品。那么你就不仅是一般的交互设计师了，可以完成一些产品经理、需求分析师的活了。即使你不想做绝对也能更有效率的与他们沟通了。

 

六，视觉设计

色彩和配色：色彩三要素，单一色配色，相似色配色，互补色配色，三原色配色

经典设计：

          1.多种导航设计：主导航，标签导航，面包屑导航

           2.搜索框

          3.分页设计

          4.日期选择

          5.滑门应用

          6.有效的帮助，提供操作步骤，表单提示

七，编码设计

前端分三个层次：结构（html），表现（css），行为（JS）

布局之道：固定宽度布局，流动弹性布局

css设计：采用标准格式：进行缩进，添加注释，一律简写，图像合并，hack技术

css使用技巧：

         1.圆角的实现

         2.文字用图像替换

         3.列表的应用，应用于横式菜单等

         4.表单设计

设计理念： png图片应用，大展开式菜单，tab选项卡，模态窗口，

八，性能测试

相信很多人都听过优化网站性能的14条规则。更多的信息可见

1. 尽可能的减少 HTTP 的请求数 [content]

2. 使用 CDN（Content Delivery Network） [server]

3. 添加 Expires 头(或者 Cache-control ) [server]

4. Gzip 组件 [server]

5. 将 CSS 样式放在页面的上方 [css]

6. 将脚本移动到底部（包括内联的） [javascript]

7. 避免使用 CSS 中的 Expressions [css]

8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css]

9. 减少 DNS 查询 [content]

10. 压缩 JavaScript 和 CSS (包括内联的) [javascript] [css]

11. 避免重定向 [server]

12. 移除重复的脚本 [javascript]

13. 配置实体标签（ETags） [css]

14. 使 AJAX 缓存 

在firefox下有一个插件yslow，集成在firebug中，你可以用它很方便地来看看自己的网站在这几个方面的表现。