本书特别邀请了数位国内知名GUI 设计师一起由浅至深地讲解GUI 设计案例，详细讲解各个案例中所遇到的问题和软件应用。本书分为以下四部分进行讲解：图形界面设计、图标设计、图标设计实例教程，以及图形设计与界面开发配合技巧。 本书在内容规划上专门设计了由浅入深的案例分析，能使阅读本书的设计师逐渐了解图形界面设计、图标设计等在具体项目中的操作经验、设计思路、软件使用等。相信这是急迫想转入GUI 设计行业的设计师们所期待的。

前言 经历过各种变迁，这本书终于来到大家的手中。这是一本专门针对界面设计初学 者的参考书，不是高大上，也不是小清新，而是实实在在的干货。 界面设计从2003年就开始逐步地被国人提起，进入大众的视线，而随着移动互联 网和移动应用突飞猛进，这个人类与科技之间的媒介——“界面”就变成了焦点中的 焦点。每个以软件产品为核心的公司都对其尤为重视，甚至是看作核心竞争力。界面 设计师这个职位也变得熟知和时髦，从事这个行业的人也越来越多。 一个优秀的界面设计不仅要有适合、美观的界面，也要有良好的交互体验。而前 者则是进入界面设计的第一道门槛。之所以说这是一本针对初学者的书，是因为在书 中的一些章节中都有详细的说明和举例。图形界面如何设计，如何用色？图标设计的 详细过程是怎么样的？如何思考图标创意？本书有很多实例带领大家完成不同风格的 界面或图标设计。 然而，界面并不独立存在，它最终将会与代码结合，设计师需要与开发者沟通配 合，才能最终在用户手中发挥它的价值。这就需要我们这些偏感性的设计师们，要有 理性规则的一面。例如，如何制作规整的切片，如何导出图标，如何能让你的界面设 计完美地展现在用户的设备上等。你想真正玩转界面设计，了解界面设计师在实际工 作中遇到的问题，这本书能够让你得到一些启发。 此外，图形界面设计既是一个充满创造的工作，同时也很辛苦。我们可以用很多 工作技巧来提高我们的工作效率。本书还介绍了十几种不同的PS小技巧，熟练掌握这 些，你就可以把更多时间留给思考和创造，提高你的工作效率。 说了这么多，你是不是已经迫不及待地想翻开本书了呢？容我在最后感谢iFinder 编辑组的每一位成员，是你们把各个知识点整理好。感谢每篇文章的作者，是你们无 私地将实践经验分享给大家。感谢电子工业出版社参与编辑和排版的所有人，是你们 将这本知识传递给每一位读者！ Iconfans 界面设计专业平台 介绍 iconfans.com界面设计垂直社区、中国人气极高的界面设计平台。是专业的界面 设计师、用户体验设计师相互交流设计经验及学习讨论的平台，主要面向有独立创作 能力的界面设计师来共同探讨该方面的设计方法。 iFinder 编辑小组 介绍 iFinder编辑小组隶属于iconfans界面设计平台，是一个爱发现的团队。创建于 2012年2月，由平台志愿者组建而成，专门负责搜罗平台内以及官方5个QQ大群的会 员讨论的精华内容，并以“周报”的形式定时为平台会员整理发布。目前核心成员有6 人，分别负责发现来自QQ群讨论、会员优秀作品、业内资讯、优秀作品欣赏以及源文 件分享。 iFinder建立的初衷是为特攻队（iconfans学习组织）的“童鞋们”服务，剪辑大 家的讨论，汇成知识周报，坚持每周一报，截稿至今已经有158期了。 如今的iFinder已经不仅仅分享着来自QQ群以及站内内容，它将会为整个在路上学 习UI设计的“童鞋们”传播更多的知识，以及建立属于我们自己的知识库。 我们喜欢和大家分享知识和技巧，喜欢探讨技术，如果有好的建议帮助iFinder改 善，欢迎投稿！ 小组板块：http://www.iconfans.org/forum-60-1.html Email：ifinder@iconfans.com 我们的微博：http://weibo.com/ifinder

第一部分　图形界面设计 01 拿在手中的界面——手机GUI 设计 VIII 先画个圈 1 让我们来做个项目 2 02 界面设计的拟物化 9 什么是界面设计的拟物化 10 界面设计为什么要拟物化 10 拟物化界面设计应用的实例 10 如何做一款拟物化的产品界面设计 12 总结 15 03 手机动态演示方案的制作 16 展现的形式 17 Flash演示的框架和制作步骤 18 Photoshop素材的制作 18 Other界面——便签 20 Mainmenu界面 21 Submenu界面 22 Aftereffect素材的制作 23 Flash动画的制作 32 总结 45 第二部分　图标设计 04 图标设计分享——从零到有的过程 46 设计前的闲谈 47 总结 53 05 简谈商业图标的设计 54 图标释义的提取 55 草图设计 58 成稿设计 61 图标的生成 64 06 图标从优秀到卓越 67 图标认识、识别 68 图标细节、优化 71 图标组合、比例 74 经验小结 75 07 浅谈游戏图标设计 76 理论基础 78 图标设计流程 79 图标绘制案例 81 游戏图标设计心得体会 86 08 预览移动应用的界面与图标 90 预览App界面设计 91 使用HTML预览iOS App图标 92 Android上的问题 95 第三部分　图标设计实例教程 09 Fireworks 大黄蜂图标制作 98 初识Fireworks 99 基础造型 99 质感造型 102 结尾 107 10 Illustrator 制作OSX 风格图标 108 绘制磁铁平面图形 109 建立磁铁3D模型 112 填充颜色 116 绘制照片 121 绘制沙子 125 案例小结 127 11 如何画一个48x48 大小的软件图标 128 引言 129 正文 129 小结 135 12 五分钟绘制质感按钮 136 作品欣赏 137 作品创建步骤 137 案例小结 145 第四部分　图形设计与界面开发配合技巧 13 PS 工作环境设置——工作区保存、参考线、系统参数 146 工作区保存 147 参考线 149 系统参数 151 案例小结 153 14 BIt PS 形状图层和对齐像素 154 细节选项的妙用 155 几种自定义形状示例 156 形状图层的新建方式 156 形状图层像素对齐 157 文章小结 159 15 探索提高效率的窍门——图层样式 160 使用图层样式的好处 160 实战——不同风格的按钮 161 案例小结 165 16 浅谈智能对象与智能滤镜 166 智能对象 167 智能滤镜 168 智能对象的应用实例 169 文章小结 173 17 图标设计的最后工序——使用切片工具导出图标 174 理解切片工具 174 制作规整的切片 177 导出图标 181 发布 183 18 常用Android 4.0 平台图标规格 184 图标设计指南 184 启动器图标的尺寸与格式 188 菜单图标 190 动作栏图标大小与格式 193 19 定制图标和图片指南 194 为 Retina 屏幕设计画作的技巧 196 程序图标 197 小图标 198 文档图标 199 iPad 制作文档图标 200 Web 快捷方式图标 202 导航栏、工具栏和 tab 栏上用的图标 202 附录 实用小技巧 204