网页设计创意与精品赏析PDF电子书下载

第1章 开发过程概述 1

目录 1

1.1 时间、金钱和才能 2

1.1.1 时间 2

1.1.2 金钱和才能 2

1.1.3 实例讲评 3

1.2.1 明确问题 4

1.2.2 选择适当的发布方法 4

1.2 通信的挑战 4

1.2.3 实例讲评 5

1.3 明确观众 7

1.3.1 你所需要的人口统计学 7

1.3.2 上哪儿获取信息 7

1.3.3 实例讲评 8

1.4 制定解决方案 9

1.4.1 设计交互环境 9

1.4.3 实例讲评 10

1.4.2 制作和维护 10

1.5 内容的确定 12

1.5.1 信息的组织 12

1.5.2 其他形式的内容 12

1.5.3 技术不等于内容 12

1.5.4 实例讲评 13

1.6 选用合适的技术 14

1.6.1 技术的作用 14

1.6.2 对不同的观众选用不同的技术 14

1.6.3 实例讲评 15

1.7 建立统一的比喻、个性和风格 17

1.7.1 选择比喻 17

1.7.2 个性 17

1.7.3 风格 20

1.7.4 实例讲评 20

1.8.3 让访问者在单击前知道要去向何处 22

1.8.2 最佳路径 22

1.8.1 “深”、“浅”的选择 22

1.8 规划好结构和导航 22

1.8.4 实例讲评 23

1.9 用故事板来模拟交互动态过程 24

1.9.1 编排故事板 25

1.9.2 不断优化 25

1.9.3 实例讲评 25

1.10 创建原型 26

1.10.1 把原型变成现实 26

1.10.2 安全操作 27

1.10.3 实例讲评 27

1.11 收集素材和制定标准 28

1.11.1 整理素材 28

1.11.2 制定和实现标准 28

1.11.3 实例讲评 29

1.12.3 存档 30

1.12.2 综合 30

1.12 处理、综合和存档 30

1.12.1 处理 30

1.12.4 实例讲评 31

1.13 装配、编码和编程 31

1.13.1 牢记目标 32

1.13.2 灵活使用技术 32

1.13.3 实例讲评 32

1.14.2 第二回合 34

1.14.3 第三回合 34

1.14.1 第一回合 34

1.14 测试、优化和再测试 34

1.14.4 实例讲评 35

1.15 如何让别人知道你的站点 36

1.15.1 注册 36

1.15.2 交换链接 37

1.15.3 寻找网站评选站点 37

1.15.4 使用在线或离线的广告 37

1.15.5 开始忙碌 37

1.16 佳作欣赏 38

1.15.6 实例讲评 38

第2章 界面清单 42

2.1 界面风格和比喻 42

2.1.1 媒体和信息 42

2.1.2 2维、21/2维或3维界面的设计 42

2.1.3 实例讲评 43

2.2.3 实例讲评 47

2.2.2 技术与艺术 47

2.2.1 背景基础 47

2.2 背景和纹理 47

2.3 按钮和控件 49

2.3.1 是否使用斜面按钮 49

2.3.2 按钮机制 49

2.3.3 实例讲评 50

2.4 内容和目录 51

2.4.1 无法超越书本 51

2.4.3 实例讲评 52

2.4.2 主题和副题 52

2.5 启动、设置和帮助 53

2.5.1 第一印象 53

2.5.2 随手可得的帮助 54

2.5.3 实例讲评 54

2.6 窗口、面板和框架 55

2.6.1 框架 56

2.6.2 分组 56

2.6.3 实例讲评 56

2.7 版面 58

2.7.1 文本：精益求精 58

2.7.2 不同的笔划：显示字型 58

2.7.3 实例讲评 59

2.8 图片 61

2.8.1 你说“西红柿” 61

2.8.2 图片的来源 61

2.9.3 选择合适的技术 63

2.9.2 着手工作之前 63

2.9 动画 63

2.9.1 为什么要使用动画 63

2.9.4 实例讲评 64

2.10 视频 65

2.10.1 摄制成小屏幕 65

2.10.2 画蛇添足 65

2.10.3 实例讲评 66

2.11 音乐、语音和音效 67

2.11.1 声音的作用 67

2.11.2 使声音好听 67

2.11.3 实例讲评 68

2.12 虚拟现实 69

2.12.1 电脑空间，最后的处女地 70

2.12.2 速度、灵活性和现实主义 70

2.12.3 实例讲评 70

2.13.1 我做了什么？ 72

2.13.2 我在何处？我曾去过何处？ 72

2.13 反馈和响应 72

2.13.3 实例讲评 73

2.14 输入 74

2.14.1 双向的交互过程 74

2.14.2 除了利用按钮之外 75

2.14.3 实例讲评 75

2.15 分层信息和嵌套导航 76

2.15.1 只在必要时出现 76

2.15.3 实例讲评 77

2.15.2 有指导的行程 77

2.16 佳作欣赏 79

2.16.1 giantrobot.com站点 79

2.16.2 vfs.com站点 80

第3章 五个有关设计的提示 82

3.1 交互的透明性 82

3.1.1 你的要点是什么 82

3.1.2 三个成功的机会 83

3.1.3 使用通用的语法 83

3.1.4 先思而后行 83

3.1.5 实例讲评 84

3.2 保持视觉上、概念上及版面上的一致性 86

3.2.1 保持一致性的作用 87

3.2.2 导航和信息获取 87

3.2.3 统一风格 87

3.2.4 实例讲评 88

3.3 利用对比 90

3.3.1 公路勇士 90

3.3.4 实例讲评 91

3.3.3 对比媒体类型 91

3.3.2 对比视觉类型 91

3.4 保持条理清楚 95

3.4.1 信息已经足够 95

3.4.2 扩充光标的能力 95

3.4.3 瑞士军刀方案 95

3.4.4 显示访问轨迹 95

3.4.5 使信息分层 95

3.4.8 实例讲评 96

3.4.6 过滤和聚焦 96

3.4.7 当负变成正时 96

3.5 采用故事编排的电影原则 100

3.5.1 围着营火听故事 100

3.5.2 音乐之声 100

3.5.3 复活节彩蛋 100

3.5.4 双向交互过程 101

3.5.5 实例讲评 101

3.6 佳作欣赏 104

3.6.1 sbg.com网站 104

3.6.2 cooktek.com网站 105

第4章 市场学 107

4.1 整体设计 107

4.1.1 支持创造性的交互过程 108

4.1.2 提供结构及组织 108

4.1.3 排版 108

4.1.6 设计赏析 109

4.1.5 包括所有基础技术 109

4.1.4 颜色 109

4.2 扩展品牌价值 112

4.2.1 建立网上知名度 112

4.2.2 界面与包装相联系 112

4.2.3 采用个人方法 112

4.2.4 直观的线性导航 113

4.2.5 图片处理 113

4.2.7 设计赏析 114

4.2.6 交叉商标链接 114

4.3 在信息高速公路上旅行 116

4.3.1 公司业务 116

4.3.2 实现可视化的联系 116

4.3.3 排版 117

4.3.4 创作图片 117

4.3.5 设计赏析 118

4.4 向全世界做广告 120

4.4.2 开拓眼界 121

4.4.1 作用：与世界各地的分公司联系 121

4.4.3 创造差异性 122

4.4.4 提供两个版本 122

4.5 在世界各地都存在 125

4.5.1 瞄准目标 125

4.5.2 展示他们的能力 125

4.5.3 屏幕布局 125

4.5.4 招聘信息 126

4.5.5 跟踪对站点的访问 126

4.5.6 改编字体 126

4.5.7 设计赏析 127

4.6 高于网络低于普通标准 129

4.6.1 高尔夫球员的站点 130

4.6.2 设计界面 130

4.6.3 宣传站点 131

4.7 交互式陈列室 134

4.7.1 直观的导航 134

4.7.3 改变调色板 135

4.7.2 估计磁盘空间 135

4.7.4 交互式驾驶测试 136

4.7.5 设计赏析 136

4.8 San Diego Gas and Electric的插件程序 139

4.8.1 听取观众的意见 139

4.8.2 响应顾客的请求 139

4.8.3 确定界面 140

4.8.4 促进站点访问 140

4.8.5 高效率的设计 140

4.8.6 保持联系 141

4.9 www.lights.camera.action 143

4.9.1 任务 144

4.9.2 界面比喻 144

4.9.3 排版集锦 145

4.9.4 即时设计 145

4.10.1 发布网站 148

4.10.2 在站点上巡游 148

4.10 ＠Toyota网站 148

4.10.3 实现统一性 149

4.10.4 图片 149

4.10.5 图片泡 149

4.11 佳作欣赏 152

4.11.1 designory.com网站 152

4.11.2 hallmark.com网站 153

第5章 娱乐 155

5.1 一套生物服装、一些生物芯片和玩家的助手亚瑟 155

5.1.3 确定哪个元素最重要 156

5.1.1 主要角色介绍 156

5.1.2 生物衣服的内部设计 156

5.1.4 导航控制 157

5.1.5 生物芯片 158

5.1.6 亚瑟会帮助你 158

5.1.7 最后的润色 158

5.2 用经验指导设计 159

5.2.5 灵活的结构 160

5.2.4 高效的设计 160

5.2.2 设定目标 160

5.2.3 简化导航 160

5.2.1 补充电视频道 160

5.2.6 团队合作 161

5.3 交互性增加了电视节目的价值 164

5.3.1 构想 165

5.3.2 界面 165

5.3.3 旋转的地球仪 165

5.3.4 获得帮助 166

5.3.5 对齐方式和清晰度 166

5.3.6 与各种数据库集成 166

5.3.7 设计赏析 166

5.4 在电视上玩探险游戏 170

5.4.1 从计算机屏幕到电视屏幕 170

5.4.2 低屏幕分辨率的挑战 170

5.4.3 使用人工智能 170

5.4.5 NTSC安全颜色 171

5.4.4 界面内的界面 171

5.4.6 导航控制 172

5.4.7 设计赏析 172

5.5 随Dogstar乐队上路 174

5.5.1 增强音乐CD 174

5.5.2 制作界面 175

5.5.3 创作线索 175

5.5.5 设计赏析 176

5.5.4 没日没夜的设计 176

5.6 探索Peter Gabriel的隐秘世界 179

5.6.1 设定目标 180

5.6.2 组织内容 180

5.6.3 组织屏幕 181

5.6.4 增强游历效果 181

5.6.5 设计赏析 181

5.7 佳作欣赏 185

5.7.1 The Dominion网站 185

5.7.2 在线的高尔夫球频道 187

6.1 一个CD-ROM、一个小册子和一个网站 188

第6章 工具与应用程序 188

6.1.1 作用：补充的媒体 189

6.1.2 界面 189

6.1.3 含蓄谦和 189

6.1.4 设计赏析 190

6.2 改造界面 193

6.2.1 欣赏和感觉 193

6.2.2 隐藏复杂性 194

6.2.3 选项板的排放顺序 194

6.2.4 功能强大并具有娱乐性 194

6.2.5 处于控制之中 195

6.2.6 帮助文本 195

6.2.7 设计赏析 195

6.3 下拉的抽屉 197

6.3.3 选择工具 198

6.3.4 分层信息 198

6.3.1 通俗易懂 198

6.3.2 界面工具和控制的组织方式：按抽屉分组 198

6.3.5 统一各种图片 199

6.3.6 特殊功能 199

6.3.7 设计赏析 199

6.4 利用CyberMom的帮助计划你的未来 201

6.4.1 CD-ROM和相应的网站 202

6.4.2 使比喻个性化 202

6.4.3 界面风格 202

6.4.4 日常技巧 203

6.4.5 设计赏析 203

6.5 一个500频道的节目预报 207

6.5.1 迎接挑战 207

6.5.6 颜色编码 208

6.5.5 添加格栅结构 208

6.5.7 采用合适的可视化比喻 208

6.5.4 使信息更清楚 208

6.5.3 设计一个熟悉的布局 208

6.5.2 面对技术限制 208

6.5.8 选择字体 209

6.5.9 设计赏析 209

6.6 无论是外观还是感觉都像一台Mac 211

6.6.4 建立标识 212

6.6.3 用颜色交互 212

6.6.2 设置标准 212

6.6.1 超出书本 212

6.6.5 设计赏析 213

6.7 佳作欣赏 216

6.7.1 surfcheck.com网站 216

6.7.2 Dockers.com网站 218

第7章 教育和培训 220

7.1 技巧和技术 220

7.1.4 教学电影 221

7.1.3 导航按钮 221

7.1.2 界面的作用 221

7.1.1 格式 221

7.1.5 设计赏析 222

7.2 没有墙壁的博物馆 225

7.2.1 虚拟博物馆 225

7.2.2 程序的结构 225

7.2.3 设计开发 226

7.2.4 最终感觉 226

7.2.5 未来计划 226

7.2.6 设计赏析 227

7.3 改造一个350页的连环画 230

7.3.1 对现存文本和美术的扩充 230

7.3.2 会见教授 230

7.3.3 应用产品设计概念 230

7.3.4 给页面做记号 231

7.3.5 调色板 231

7.3.6 音频的作用 231

7.3.7 设计赏析 232

7.4 探索森林的奥秘 234

7.4.2 创造一种气氛 235

7.4.1 达成共识 235

7.4.3 使界面元素变柔和 236

7.4.4 规划站点 236

7.4.5 控制窗口参数 236

7.4.6 绘制图画 236

7.4.7 增加真实感 236

7.4.8 设计赏析 237

7.5.1 搜寻和探索 239

7.5 逼真的实验室 239

7.5.2 精心设计的界面 240

7.5.3 有效地使用媒体 240

7.5.4 既能工作，又能娱乐 240

7.5.5 设计赏析 241

7.6 与真蛇一样大的眼镜蛇图片 244

7.6.1 作用：与电视节目互补 244

7.6.2 准备眼镜王蛇的图片 244

7.6.4 坚持指导方针 245

7.6.3 设置场景 245

7.6.5 动作仿真 246

7.6.6 设计赏析 246

7.7 模拟一个小组讨论 248

7.7.1 取消先前的想法 248

7.7.2 如何运行 249

7.7.3 录像 249

7.7.4 图标 250

7.7.5 投射到组员身上的聚光灯 250

7.7.6 设计赏析 250

7.8 家庭般的舒适感受 253

7.8.1 开发构想 253

7.8.2 使之直观 253

7.8.3 组织内容 254

7.8.4 导航 254

7.8.5 设计赏析 254

7.9.1 使之趣味横生并易于使用 257

7.9.2 四处浏览也很容易 257

7.9 用于学习的交互式游戏 257

7.9.3 游戏中的物体 258

7.9.4 提高放映质量 258

7.9.5 制作拼图屏幕 258

7.9.6 组装各类文件 258

7.9.7 设计赏析 259

7.10 动画游戏Monster Lab 262

7.10.1 大胆构想 262

7.10.3 屏幕布局 263

7.10.2 游戏内容 263

7.10.4 大量的动画 264

7.10.5 设计赏析 264

7.11 使Internet易于被教师和学生使用 267

7.11.1 主要目标：帮助教师 267

7.11.2 附加价值：帮助学生 267

7.11.3 研制并设计内容 268

7.11.4 设计赏析 268

7.12.1 fontsite.com网站 271

7.12 佳作欣赏 271

7.12.2 Xpeditions Web网站 273

第8章 出版 275

8.1 搜索信息 275

8.1.1 挖掘信息 276

8.1.2 清晰的组织和便捷的导航 276

8.1.3 颜色增加了界面的清晰度 277

8.1.4 对用户反馈信息的控制 277

8.1.5 设计赏析 277

8.2.2 使指导思想与设计相协调 281

8.2 绝妙的感觉 281

8.2.1 网站介绍 281

8.2.3 由Puget Sound沙滩启发出的设计思想 282

8.2.4 对访问者的考虑 282

8.2.5 设计赏析 283

8.3 两个站点合二为一 285

8.3.1 并列的内容 285

8.3.3 天天维护更新 286

8.3.4 创造气氛 286

8.3.2 相似但却不同的页面设计 286

8.3.5 从中间开始的页面构建方式 287

8.3.6 一个结识朋友的地方 287

8.3.7 设计赏析 287

8.4 设计界面 289

8.4.1 美国设计中心和它的期刊 290

8.4.2 设计难点 290

8.4.5 Interact徽标 291

8.4.4 为内容导航 291

8.4.3 整理内容 291

8.4.6 设计赏析 292

8.5 交互式的期刊 294

8.5.1 最初想法 294

8.5.2 有效地使用媒体 294

8.5.3 用视觉比喻来支持某个概念 295

8.5.4 如果需要帮助，可转动Quebe 295

8.5.5 设计赏析 296

8.6.3 界面 299

8.6.2 内容 299

8.6 一个爱滋病患者的纪念物 299

8.6.1 讲述他们的故事 299

8.6.4 排版 300

8.6.5 准备照片 300

8.6.6 颜色与灰度 301

8.6.7 符合时间要求 301

8.6.8 设计赏析 301

8.7 一个极好的站点 303

8.7.1 把握冲浪世界的脉博 304

8.7.2 理解客户的目的 304

8.7.3 新鲜的能作出响应的界面 304

8.7.4 三个页框的格式 305

8.7.5 一个想法的产生 305

8.7.6 从照片到JPEG图片 305

8.7.7 设计赏析 305

8.8.2 信息的层次 308

8.8 把艺术杂志转变成多媒体 308

8.8.1 交互难点 308

8.8.3 页面形状的控制元素 309

8.8.4 四处浏览 309

8.8.5 揭示秘密 309

8.9 佳作欣赏 313

8.9.1 altasmagzine.com网站 313

8.9.2 allstarmag.com网站 314

第9章 文件夹与媒体展示 316

9.1 智能 316

9.1.1 形象的比喻 317

9.1.2 将比喻形象化 317

9.1.3 调色板 317

9.1.4 选择字体 318

9.1.5 制作导航图标 318

9.1.6 设计赏析 318

9.2.2 好的设计与幽默相结合 322

9.2.1 很棒的名字——神圣的鲭鱼 322

9.2 不会脱离的方法 322

9.2.3 界面上的东西都有用 323

9.2.4 历史演变 323

9.2.5 逐位计算文件大小 323

9.2.6 设计赏析 324

9.3 从HyperCard到SuperCard到Internet 327

9.3.1 补充角色 327

9.3.4 主页 328

9.3.5 气泡的吸引力 328

9.3.3 网页导航 328

9.3.2 整体结构 328

9.3.6 设计赏析 329

9.4 很酷的工具 331

9.4.1 建立标记 331

9.4.2 设计结构 332

9.4.3 尺寸和景深线索 332

9.4.5 建立结构 333

9.4.6 设计赏析 333

9.4.4 颜色显示了你的位置 333

9.5 夹子的能力 336

9.5.1 戏剧性和战略性 336

9.5.2 对过去的回忆 336

9.5.3 数字化的背景 337

9.5.4 后台制作过程 337

9.6.3 塑造界面 340

9.6.2 研制一个比喻 340

9.6.1 探索新媒体的新方法 340

9.6 设计深空间 340

9.6.4 协作和效率 341

9.6.5 设计赏析 342

9.7 奇思妙想 346

9.7.1 好的想法通常是不期而至的 346

9.7.2 启动页的动画 346

9.7.3 设计目标 346

9.7.4 颜色、图案和排印 347

9.7.5 保持简单 347

9.7.6 设计赏析 348

9.8.1 在线展示摄影师风采 351

9.8 大师风采 351

9.8.2 从一个页面到下一个页面 352

9.8.3 保持照片的完整性 352

9.8.4 设计过程 352

9.9 设计赏析 353

第10章 销售 359

10.1 充满插图的罐头 359

10.1.4 在Line Art中滚动搜寻 360

10.1.5 更近的观察 360

10.1.1 档案抽样 360

10.1.3 提高使用价值 360

10.1.2 设定基调 360

10.1.6 设计赏析 361

10.2 包装产品与制作网站 364

10.2.1 需求评估 364

10.2.2 围绕软件包装的设计 364

10.2.4 总体布局方案 365

10.2.3 改编包装设计并应用到界面上 365

10.2.5 设计赏析 366

10.3 浏览或购买：剪贴画、照片和字体 368

10.3.1 网站完善了印刷目录 368

10.3.2 为顾客考虑 369

10.3.3 界面 369

10.3.4 展示适量的信息 369

10.3.5 电子销售 370

10.3.6 设计赏析 371

10.4.2 增加灵活性 373

10.4 从网上冲浪到网上购物 373

10.4.1 上网 373

10.4.3 内部链接 374

10.4.4 命名和标识 375

10.4.5 设计赏析 375

10.5 灵活运用格栅 377

10.5.1 推销字体 377

10.5.5 决定发行磁盘版 378

10.5.4 颜色也扮演重要角色 378

10.5.3 对比产生视觉层次 378

10.5.2 一往直前 378

10.5.6 制作艺术作品 379

10.5.7 设计赏析 379

10.6 开始在线旅行 381

10.6.1 提供服务 382

10.6.2 使顾客感到舒适 382

10.6.3 明确服务 382

10.6.4 图片的价值 382

10.6.5 保持最新 383

10.6.6 设计赏析 383

10.7 佳作欣赏 387

10.7.1 Digital Stock网站的原型 387

10.7.2 Iomega网站 389

10.7.3 Joe Boxer网站 390

附录A 插图提供者 391

附录B 软件供应商 395