形而上者谓之道，形而下者谓之器。匠者，器也。处身平凡的匠人不断追求向上的设计之道。本书没有华丽的辞藻和长篇大论的理论，作者是搜狐一线的设计团队，写作过程中他们尽力还原真实的工作场景，并总结出了一些实用的经验和方法。 本书共三部分，全面讲解了用户体验设计的流程和方法。第一部分为“交互设计”，阐述了从项目启动、解析需求到原型设计的过程，并且总结了交互设计的要点：大局观、操作流程简捷、形式新颖且统一、各种特殊情况等。第二部分为“视觉设计”，阐述了界面、颜色、图标、质感、动画、切图等具体方法，以及如何与开发/测试工程师们合作、寻找 平衡设计与技术的方法。第三部分为“他们眼中的优秀设计师”，通过产品经理、程序员、运营、市场经理的视角，阐述了如何成为一名优秀的设计师。 本书适合交互设计师、视觉设计师、用户体验从业人员参考阅读，亦可作为设计类专业学生的参考用书。

编者序 形而上者谓之道，形而下者谓之器。匠者，器也。处身平凡的匠人不断追求向上的设计之道。我们是搜狐普通的设计师，想和大家分享一些心得体会。谨以我们的流程和方法献给有志投身用户体验设计的同学们。 入行多年，投身搜狐新闻团队也已两年有余。与业界同侪相比，仍是新晋后辈。写在书中的是一线设计团队的集体经验和设计师个人的些许感受。点滴汇集，与前辈、后来者分享。言语不尽，仍待来者指点。 《庄子· 山木》篇讲到：“弟子问于庄子曰：‘昨日山中之木以不材得终其天年，今主人之雁以不材死，先生将何处？’庄子笑曰：‘周将处乎材与不材之间。’” 作寓言读，可以从多方面得到启示。出于职业习惯，我从中悟出一点个人关于UX 设计的一些感受，可能就如庄周所言，处乎材与不材之间。 全书在编写的过程中，我们的团队始终仅有五人。书籍耗尽了团队成员几乎全部的业余时间。过程中，我们经历了人员变动，有过意见相左、有过彷徨悱恻。但最终对于设计的热爱使我们坚持下来，使这本书得以面世。 感谢搜狐新闻客户端负责人岳建雄。 感谢主编成员：顾盼，邓敏，曹雨初，包巳砚，有他们才有这本书；感谢参与编辑的同学：李艳，马宁，刘廷奇，陶宇；实习生：王丽婷，刘春强，王子倩，欧阳磊。感谢内容运营中心总监缪贝颖，市场部总监张璞，服务端产品经理孙小雷，iOS 开发组长丛云旦加入的文字让成书更加丰满。感谢知友“农民骆逸”，我们引用了您在知乎的文字对“设计之下”进行了解读。感谢搜狐新闻客户端团队所有的成员。 ——设计师 董翔鹤 前言 我们每天都在面对着生活和工作中的各种问题，千头万绪中如何做到事事有序。 用户体验设计是什么？用户体验设计能做什么？简单地说，用户体验设计提供给人们一种适合的路径，以便轻松、愉悦、高效地解决问题。 解决问题的方式 早些年，人多聚会吃饭的时候，一个很现实的问题出现了，有的菜太远，夹不到，用餐者只能站起来去夹，让筷子变得“更长”，这样虽然解决了问题，但是方便了自己最终却造成了整个饭局的混乱。于是为了更好地解决这个问题转盘被安放到了桌子上。现在，我们再去餐馆吃饭，就很少会再遇到这样的问题了。 试想一下，如果我们把餐桌当成一个产品，那么使用餐桌吃饭的人就是这个产品的用户，餐桌上的很多菜，就是产品的内容，设计餐桌的人就是用户体验设计师，让吃饭的人能快捷、方便地夹到菜（获得内容），桌子能转动就是用户体验设计师设计的最好的解决问题的方式。 所以，在实际设计过程中，我们也要考虑到解决问题方式的多样性，尤其是在设计产品界面流程操作的时候，多问几个为什么，多找几个用户来谈谈，才能知道到底采用哪种方式才是最流畅、最有效的。 引导用户的路径 用户体验绝不是一个页面、一个icon、一个动效，而是由这些基本元素构成的一个系统的流程，可以说是用户的浏览路径。 宜家的购物路线设计可以说是一种典型的用户体验设计。 从这种路线图可以看出，只有一条主要路线，蜿蜒从入口到出口，贯穿“客厅”、“餐厅”等购物点，购物点之间有捷径打通，在不影响主路径的时候，有多种“捷径”可走。传统商场的购物点往往是散状分布的，即便有很多路径相连和功能划分，仍然容易迷路。宜家通过导视标志和墙壁的阻隔与划分形成了上面这种蜿蜒而接近唯一的浏览路径，这种设计方式巧妙地解决了顾客迷路的问题，并且保证顾客基本看到了其所提供的所有商品，从而最大限度地挖掘顾客的购买潜力。 在设计软件时，也要考虑用户的使用路径。从用户点击图标开始，他就进入了你的软件“商场”。你需要做的就是用最简单的方式引导，帮助他找到关注的内容和想使用的功能，快速地进行消费。 另外一个值得注意的细节是宜家的各个购物点不会只摆商品。你经常会看到各种“样板间”，比如一款杯子可能出现在“餐厅”区，还会出现在“客厅”、“厨房”等地点，宜家将搭配好的套餐出售给顾客。 宜家的做法给予了我们灵感。让商品之间产生联系，大部分消费者买了一只水杯后，会感觉其搭配的餐垫也不错，桌椅风格也相符，最后引导他买下整个餐厅的大部分装饰。 这是一种典型的场景化设计。从产品的角度来解释，样板间在整个购物流程中起到了流量的再分发作用，并且将模块和功能之间相互打通，是整个购物流程中的关键节点。比如，搜狐新闻客户端的订阅中心、新浪微博的广场，都是这种流量再分发在软件上的体现。 为了化繁为简 “如果所有人都忙于做所有的事，又有哪一个人能把每一件事做到完美。” 在2012 年12 月搜狐新闻进行了3.3 版本改版。我们对客户端UI 和交互进行了简化，阅读产品内容是核心，一切视觉元素为阅读服务，我们简化了一切质感让设计回归到本原，内容即UI。视觉上扁平不如让内容层级和交互逻辑扁平，所以我们将原有APP 分布式的功能按键全部集中在了ToolBar 上，让用户更方便地进行单手操作（图0-1）。 图0-1 搜狐新闻客户端2013年2月发布的3.3 版本截屏随着iOS 7 的发布，扁平化的视觉设计风格大行其道，与其让UI 扁平，不如让信息和内容扁平，设计的存在一定是为了更好地解决问题，用户体验设计提升了解决问题途中的精神感受。 对于用户体验设计可能每一个从业者心中的概念都不一样，但大家最终的目的却可能相同。本书以搜狐新闻客户端为案例与前辈和同学们分享我们的工作流程和方法。言语不尽，仍待来者指点。

交互设计 DESIGN FOR THE UNCONSCIOUS 第1章 项目启动 1.1 从想法到项目 5 1.2 什么是项目 5 1.3 项目启动会 6 第2章 解析需求 2.1 交互设计的“五要素” 14 2.2 阅读产品文档 15 2.3 交互模型 17 2.4 功能系统 23 2.5 信息架构 26 2.6 工具和方法 30 2.7 小结 31 第3章 原型设计 3.1 概念设计 35 3.2 低保真原型 36 3.3 高保真原型 48 第4章 交互设计师有话要说 4.1 大局观 66 4.2 操作流程简捷 68 4.3 交互形式新颖且统一 75 4.4 反馈提示 81 4.5 动画的重要引导作用 91 4.6 考虑到各种特殊情况 100 4.7 尊重平台特性 了解技术限制 106 视觉设计 BEAUTY IS ORDER 第1章 准备 1.1 工欲善其事 必先利其器 113 1.2 UI设计师的伴侣——Photoshop 115 1.3 开始前要做的功课 120 第2章 界面设计 2.1 风格 131 2.2 布局 134 2.3 被放大的标题 134 2.4 不同平台的特殊区分 135 2.5 同类之间的归纳 136 第3章 你的界面是什么颜色 3.1 颜色和情感 140 3.2 主色和辅助色 141 3.3 乱花渐欲迷人眼 142 3.4 那些微妙的渐变色 143 3.5 强调色的适当运用 145 3.6 界面上的特殊色 149 3.7 小结 151 第4章 优美的图标 4.1 哪些地方可以运用图标 154 4.2 风格鲜明的图标 159 4.3 表意 161 4.4 我们要做什么样的图标 167 4.5 实例 184 第5章 界面质感 5.1 拟物 194 5.2 扁平 198 5.3 质感 198 5.4 小结 199 第6章 锦上添花的UI 动画 6.1 辅助建立完整的层级关系 203 6.2 让操作变得更有趣 206 6.3 指示性的动效 208 6.4 画龙点睛 210 6.5 平台区别 212 6.6 小结 212 第7章 切图 7.1 平台的不同特性 214 7.2 寻找自己高效的切图方法 219 7.3 标注文件 227 7.4 小结 228 第8章 开发与测试工程师们的建议和看法 8.1 共同推动梦想的实现 230 8.2 确保实现品质 232 8.3 最终的取舍 233 第9章 给设计点灵魂 9.1 优雅的等待 236 9.2 隐藏的情怀 239 第10章 关于品牌的二三事 10.1 无形的价值 243 10.2 脚踏实地 243 10.3 实践出真知 252 10.4 小结 258 他们眼中的设计师 MAGICIAN 第1章 产品经理有话说 260 第2章 设计在上开发在下 264 第3章 运营眼中的UED 271 第4章 一个市场人的自白 274