
众妙之门——网站UI设计之道(修订版)
网站UI设计之道 (修订版)
作品简介
《众妙之门:网站UI设计之道(修订版)》是知名设计网站Smashing Magazine上线以来的精华总结,来自全球的知名设计师无私地分享了他们多年积累的宝贵经验。全书共分10章,前8章讨论了和网站UI设计相关的八个不同的领域,覆盖面非常广,具有很强的操作性和专业性,全书逻辑严密、言简意赅,设计人员可以快速地找到自己想要的东西。第9章以访谈的形式介绍了多位专家对一系列重要问题的看法,入木三分,极富启发性。第10章以讲故事的方式,把Smashing Magazine的创办和发展过程娓娓道来,同时毫不保留地分享了两位创始人的成功秘诀和价值观,让人受益匪浅。
《众妙之门:网站UI设计之道(修订版)》最大的价值在于它在传授具体经验的同时,也对设计思想和设计理念进行了深入的探讨,在“授人以鱼”的同时,不忘“授人以渔”。相信广大读者读完这本《众妙之门:网站UI设计之道(修订版)》,一定会有一种相识恨晚的感觉。
Smashing 传媒公司是一家专业面向网络开发及网站设计人员的企业,总部坐落在风景如画的黑森林中的弗莱堡市。公司成立于2009年2月份,创始人是斯温·雷纳兹(Sven Lennartz)和维塔利·弗里德曼(Vitaly Friedman)。作为一家年轻的,充满活力和不断成长的公司,Smashing通过专业的文章,电子图书,应用、软件以及组织专业会议等方式为从事网络事业的人提供网页开发设计领域最新的发展趋势和应用技术,促进网络设计行业创造力及专业水平的发展。
公司目前有23名员工以及部分合作编辑和超过900名的专业作者群,门户网站月访问次数超过五百六十万次,月点击浏览量达到八百七十八万次。网站新闻固定订阅用户将近15万,还拥有70万推特(Twitter)及十三万脸书(Facebook)关注者以及6万多名网站注册用户。在网站注册用户中,目前已知的中国用户有152名。2012年,Smashing的营业额达到一百三十七万欧。公司旗下最大的刊物Smashing杂志创刊于2007年9月,自杂志成立以来,已经在专业领域获得良好的信誉,是Web行业享有高度知名度和影响力的刊物,Smashing杂志每年刊发文章约400篇。
作品目录
众妙之门——网站UI 设计之道(修订版)
内容提要
序言
第1章 现代网络应用中的用户界面设计
1.1 什么是用户界面(UI)?
1.2 可视界面设计的工具箱
1.2.1 布局和定位
1.2.2 形状和尺寸
1.2.3 颜色
1.2.4 对比
1.2.5 材质
1.3 制作有效用户界面的实用技巧
1.3.1 使用空白来构建联系
1.3.2 使用圆角来定义边界
1.3.3 用颜色来表达含义
1.3.4 引导用户的注意力
1.3.5 使用阴影
1.3.6 强调核心的动作
1.3.7 使用块状链接提高效率
1.3.8 用动词作标签
1.3.9 输入时自动/ 重新聚焦
1.3.10 使用悬浮控件进行简化和解构
1.3.11 动态扩展表单
1.3.12 输入框中的标签
1.3.13 上下文敏感的界面元素
1.3.14 图标
1.3.15 使用加载指示器
1.3.16 使用按钮状态提高响应性
1.3.17 帮助性的空白状态
1.3.18 宣传应用的特点
1.3.19 撤消操作
1.3.20 还原操作
1.3.21 确认对话框
1.4 结论
第2章 CSS 布局的艺术和科学
2.1 固定宽度布局
2.2 自适应布局
2.3 动态网格布局
2.4 自适应的流式布局
2.5 弹性布局
2.6 混合布局
2.7 哪种布局最适合您的网站?
第3章 排版:原则、方针和常见错误
3.1 传统排版和网站排版
3.2 基本的排版术语
3.3 相对和绝对的字体尺寸单位
3.4 空白是最好的空间
3.5 排版和网格
3.6 垂直节奏
3.7 分级(Hierarchy)和分度(scale)
3.8 段落样式
3.9 通过字体设定版式
3.10 CSS 字体库(CSS Font Stacks)
3.11 文本替换技术
3.12 @font-face 属性
3.13 选择正确的字体
3.14 不要穿舞鞋登山
3.15 尺寸很重要
3.16 OpenType、TrueType 还是PostScript Type ?
3.16.1 你在追求什么:家常便饭还是美味大餐?
3.16.2 衬线还是无衬线? …… 或者monospace 或cursive ?
3.16.3 美丽的字体就是它想要的东西
3.16.4 互补将令你无所不能
3.17 注意细节
3.18 对齐和连字符
3.18.1 突出
3.18.2 标点外伸
3.18.3 有格式的和号(&)
3.18.4 不要用连字符代替em 破折号(em dash)
3.18.5 不要错误使用引号
3.18.6 句子之间不要使用两倍的空格
3.18.7 必要时使用重音符
3.18.8 把文本当做一种用户界面
3.18.9 引文
3.18.10 连字符和特殊符号
3.18.11 硬连字符用来在单词中换行并连接单词
3.19 总结
第4章 现代网站的可用性原则
4.1 用户如何思考?
4.2 使用整洁连贯的视觉设计
4.3 固定元素属于固定位置
4.4 搜索是简单的
4.5 链接要像链接
4.6 仅在必要的时候使用下拉菜单
4.7 使注册表单尽量简洁
4.8 考虑添加“返回页首”链接
4.9 尽可能地避免使用Splash 页面
4.10 链接应该在同一窗口打开
4.11 你需要注意以下可用性检查点
4.12 传达你的网站的组织结构
4.13 使用标记来构建上下文
4.14 建立良好的导航
4.14.1 全局导航( Global Navigation):在整个网站中我都能去哪儿?
4.14.2 本地导航(Local Navigation):在这个部分我能去哪?
4.14.3 上下文导航(Contextual Navigation):在这个页面我能去哪儿?
4.14.4 补充导航
4.15 重要的易用性法则和原则
4.15.1 7±2 原则
4.15.2 两秒钟法则
4.15.3 3次点击法则
4.15.4 帕累托法则
4.15.6 费茨定律
4.15.7 倒金字塔法则
4.16 给用户一个5 万英尺的视角来看你的程序
4.17 心理模式和象征物
4.18 组织网站的内容
4.19 提供站点地图
4.20 使用帮助
4.20.1 白板
4.20.2 产品介绍和内嵌帮助
4.21 建立信任
4.22 不要让用户毁掉自己的用户体验
4.23 及早测试、经常测试
4.24 总结
第5章 网站设计、可用性和用户体验中超炫色彩终极使用指南
5.1 色彩学理论
5.2 色彩和易用性
5.3 色彩与注意力集中
5.4 色彩与体验
5.5 灵感
第6章 网站优化
6.1 你将会用到的工具
6.2 在IMG 标签中表明正确的图片尺寸
6.3 减小图像的尺寸
6.4 服务器和内容分发网络
6.5 合并CSS 和JavaScript
6.6 CSS 放在顶部,而JavaScript 放在底部
6.7 压缩CSS 和JavaScript
6.8 使用外部CSS 和JavaScript 文件
6.9 选择一个文档类型
6.10 验证页面
6.11 不要使用CSS 表达式
6.12 服务器部分
6.13 Apache :如何设置过期时间
6.14 YSlow 中可以查看缺少expires header 的报警
6.15 Lighttpd :如何设置过期头Lighttpd 或者Lighty 并不读取.htaccess 文件,所以我们必须把设置写在它的配置文件中。切换到root 用户进入/etc/lighttpd/conf-available。
6.16 Apache :如何配置ETags
6.17 Lighttpd:如何配置ETags
6.18 为PHP 安装eAccelerator
6.19 MySQL Tuning Primer
6.20 启用透明压缩
6.20.1 启用Apache 的压缩功能
6.20.2 激活Lighttpd 的压缩
6.20.3 打开PHP 的压缩选项
6.20.4 检查压缩效果
6.21 尽可能避免重定向
6.22 如何探测长时间跳转链?
6.23 完整的链接
6.24 避免死链接
第7章 为销售而设计—提高访客转化率
7.1 如何销售?
7.2 AIDA(注意力、兴趣、期望、行动)
7.3 展示产品
7.4 使用视频展示产品
7.5 可以浏览的功能列表
7.6 馈赠让客户想回报
7.7 从众心理
7.8 隐性的建议
7.9 永远提供下一步操作
7.10 使用稀缺性来促进需求
7.11 退款保障,消除客户的后顾之忧
7.12 鼓励用户试用
7.13 别让邮寄费用吓跑了顾客
7.14 消除选择麻痹
7.15 古腾堡法则
7.16 脚注
7.17 简化注册
7.18 总结
第8章 把网站变成非凡的品牌
8.1 建立独一无二的设计
8.2 了不起的视觉设计
8.2.1 注重普遍的设计原则
8.2.2 创造一些从来没有出现到过的东西
8.2.3 提供有趣又有用的内容
8.2.4 解释新概念
8.3 成为社区的一部分
8.3.1 拥抱社会化媒体和人际互动
8.3.2 表现得友好和亲近
8.3.3 做施与者,而不是掠夺者
8.4 进入人们的头脑中
8.4.1 广告无所不在
8.4.2 成为话题人物
8.4.3 创建“病毒”或者诱饵式内容
第9章 向专家学习——名家访谈与真知灼见
认识一下我们的专家组成员
9.1 设计和开发
9.1.1 关于网站设计开发最常见的曲解或误解是什么?
9.1.2 你们发现其他设计者常犯的可用性错误是什么?在设计网站时,可用性的哪些重要特点是必须考虑但却常被遗忘的?
9.1.3 你们怎么看CSS 框架?你们是否认为设计师或开发者应该使用一个现成的框架,或者用他们自己的框架,或者完全不用任何框架?
9.1.4 你们认为设计者和开发者在搜索引擎优化中的职责是什么?
9.2 设计过程
9.2.1 当为某个客户开发一个项目时,你们第一步将做什么?
9.2.2 在你们把草图或原型转化成一个实际的网站时,遇到的主要挑战是什么,你们如何克服它们?
9.2.3 “如何确保一个网站能够真正抓住某个企业的精髓?
9.2.4 对于某个特定项目,你如何确定哪一个内容管理系统(CMS)更适用?
9.2.5 你们如何选择配色方案?
9.2.6 你们在每个项目中字体版式的通用原则是什么?
9.2.7 你们怎样才知道一个设计做完了?
9.3 自我提高和技巧积累
9.3.1 你们是否认为设计者和开发者应该接受正规的教育和培训,而不是靠自学?
9.3.2 作为设计师你们是如何应对不断的改进和进化带来的挑战?
9.3.3 是什么把一个优秀的设计师和杰出的设计师区分开?
9.4 发展事业和做自由职业者
9.4.1 你们对那些开始单干或开始创业的设计师的建议是什么?
9.4.2 在你们设计展示网站时,主要遵循的原则是什么?
第10章 幕后故事
10.1 一切是如何开始的
10.2 我们是如何走到今天的
10.3 我们成功故事的关键因素
10.4 幕后在发生着什么?
10.5 感谢你,设计社区