前不久读了《大巧不工: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中,你可以用它很方便地来看看自己的网站在这几个方面的表现。