设计之下——搜狐新闻客户端的用户体验设计（全彩）

设计之下——搜狐新闻客户端的用户体验设计（全彩）

宣传语：以真实工作场景讲交互设计、视觉设计流程与方法，及设计师要懂的产品、开发、运营、市场，解决设计师遇到的问题

搜狐新闻客户端UED团队 编著  

ISBN 978-7-121-22099-9

2014年1月出版

定价：69.00元

284页

16开

 

编辑推荐

1、《设计之下》以产品为核心，系统全面地介绍了设计流程和方法。写在书中的是搜狐新闻客户端UED团队一线经验的总结，不仅有很多实实在在的案例，更有对用户体验设计的思考和感悟，以及设计人员与产品、开发、运营及市场人员沟通的方法和技巧。

2、《设计之下》由2012苹果年度最佳应用《中国古典家具》设计师董翔鹤带领搜狐新闻客户端UED团队精心打造，其工作内容围绕移动平台，包括视 觉体验、交互设计、渠道运营、PC官网及自媒体后台支持。他们的生存面貌、发展方式体现了当下多数从业者的生存状态，所以《设计之下》对设计师有很高的参 考价值。

3、好的设计简单地说就是又要好看又要好用，《设计之下》没有花哨的语言，华丽的外衣，只是将实实在在的流程与方法裸裎给大家，点滴汇聚，与前辈、后来者分享。

内容提要

形而上者谓之道，形而下者谓之器。匠者，器也。处身平凡的匠人不断追求向上的设计之道。本书没有华丽的辞藻和长篇大论的理论，作者是搜狐一线的设计团队，写作过程中他们尽力还原真实的工作场景，并总结出了一些实用的经验和方法。

《设计之下》共三部分，全面讲解了用户体验设计的流程和方法。第一部分为“交互设计”，阐述了从项目启动、解析需求到原型设计的过程，并且总结了交 互设计的要点：大局观、操作流程简捷、形式新颖且统一、各种特殊情况等。第二部分为“视觉设计”，阐述了界面、颜色、图标、质感、动画、切图等具体方法， 以及如何与开发/测试工程师们合作、寻找平衡设计与技术的方法。第三部分为“他们眼中的优秀设计师”，通过产品经理、程序员、运营、市场经理的视角，阐述 了如何成为一名优秀的设计师。

《设计之下》适合交互设计师、视觉设计师、用户体验从业人员参考阅读，亦可作为设计类专业学生的参考用书。

 

目录

第一部分 交互设计  DESIGNFOR 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

第二部分 视觉设计  BEAUTYIS 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 章 运营眼中的 UED271

第 4 章 一个市场人的自白274

 

精彩节摘

4.2操作流程简捷

从小到大看的电视剧可以大致分为两类，一类是某时期各台都播，但基本只会播一遍，之后就被淡忘。第二类则是首播便吸引了不少粉丝，引发了大量的讨 论。之后也常常重播，每次播出都有不错的收视率。是什么原因造成这两类电视剧间的差距呢？是演员、画面还是制作呢？或许和这几个因素都有关，但最主要的还 是剧情。观众或许一开始会被演员阵容和画面吸引，但如果最后发现剧情不吸引人甚至不连贯不合理，越看越无趣也难免控制不住转台，不可能得到长期的好收视 率。

产品也是一样，视觉设计可以赋予产品迷人的外表，但实际用起来的感受和交互设计也是分不开的。如果交互设计就像编剧，交互文档就是剧本。交互文档展 现了产品的所有功能，每个功能都由一个个单独的画面通过指示性的箭头互相连接而成，这相连的方式便是操作流程。操作流程就像是剧情，但这剧情追求的恰恰与 电视剧相反。电视剧追求的是悬念不断、跌宕起伏，太平淡了就抓不住观众。而产品的操作流程追求的恰恰相反，流畅和平顺是基本需求，用起来越轻松越抓得住用 户的心。

何为“简捷的操作”大约不必多说，每个人在刚开始使用某个电子产品或应用的时候心里都会有一面明镜，不依赖经验、自然形成的感受就是最好的判断标准。接下来我们通过一些例子来探讨一下如何设计出简捷的操作流程吧。

1. 使用自然思维而不是程序思维

作为设计师多年来都接触着各种电子产品和应用程序，早已成为了专家级用户。我们对很多功能和设计都已熟悉，新安装的应用稍微研究一下便知道怎么使 用。我们已有能力在面对电子世界时从容不迫，但这同时也容易让我们觉得“理所当然”。我们理解各种页面和层级的结构，就以为用户也能够理解；我们能很顺畅 地使用各种功能，就以为用户也会使用。运用如此程序思维设计出的交互也许没有大问题，但纵使再简化的操作流程，也无法在人性化的层面上前进一小步。

最经典的例子莫过于iOS和Android系统上对于删除应用的设计。iOS在删除应用时只需在屏幕上长按，待图标们开始抖动并且出现小X时，点击 要删除的应用图标上的X即可，图标没有了意味着程序不在了，与在现实世界中扔掉物品差不多。（图1-4-3）而在Android的原生系统上，长按应用图 标只能用于添加快捷方式，像是沿袭了PC上的逻辑。要删除应用要进入“设置”→“应用程序”→在列表中找到并点击要删除的程序→新打开的页面上展示了一堆 应用程序信息的页面，终于能点“卸载”按钮了。有不少极客觉得iOS设备过于简单就像玩具一样，但正是玩具一般的、孩子和老人都能无障碍使用的才是最贴近 人自然思维的设计，才能真正做到简捷好用。（图1-4-4）

类似的例子还有“进入编辑模式”。进入另一种模式其实是非常程序化的思维，自然中并没有另一种模式这回事，有的只是直接对目标物体进行操作，所以不 如就让用户对对象直接进行操作吧。想想Clear快速划去一条条便签时的畅快感，如果加上个编辑按钮，先进入编辑模式再一一勾选要删的便签该是多么扫兴。 （图1-4-5）

2. 围绕用户的目的和行为来设计

………………

从上面的例子我们可以看出，当用户的目的和行为不同时，所适合的操作流程是不同的，对“简单快捷”的考量标准也不同。在对操作流程本身进行埋头钻研前，不如先从试图理解用户出发，设身处地来思考用户的所想、所需，透过用户的视线来审视和观察、来判断操作流程是否真的简捷。

3. 少点一下就更方便了吗

4. 将常用功能提前

5. 不妨遵循已经成型的用户习惯

 

作者简介

搜狐新闻客户端UED团队隶属于搜狐新媒体中心，成立于2012年，专门负责搜狐新闻客户端产品的体验设计。工作内容围绕移动平台，包括视觉体验、 交互设计、渠道运营、PC官网及自媒体后台支持。团队始终致力于提升搜狐新闻客户端的用户体验，改善阅读及获取资讯的方式。六人团队小而弥坚，个人与团队 共同成长。我们的生存面貌、发展方式体现了当下多数从业者的生存状态，希望通过这本书能和您分享一些案例思考和感悟。

 

媒体评论

搜狐新闻客户端的UED团队有自己的小宇宙，他们特别在乎自己的作品，特别热爱自己的作品，他们把用户满意看得比金子还宝贵，我从来没有干预过他们的视觉和交互，我不需要这么做。

——搜狐副总裁  方刚

设计师应时刻心存社会责任感，着眼于用户和生活，致力于创造确实有用、好用的产品。本书作者结合从学习到工作的经历，详细讲述了搜狐新闻客户端的设计全过程。不仅有很多实实在在的设计案例，更有对用户体验设计的思考和感悟。 

——清华美院院长  鲁晓波

一本实在的书，没有太多花哨的言语，是以产品为核心，系统全面介绍其设计流程和方法的书籍。你可以把它当做参考书，也可 以作为流程管理的范本。里面介绍了产品设计过程中运用了哪些方法、技巧，有很好的学习借鉴作用。另外值得一提的是，书中将产品，开发以及运营对UED部门 的看法也专门拿出很大的比重来写。这对于团队沟通和产品塑造有着很重要的作用。

——Iconfans创始人 董景博

 

前言

编者序

形而上者谓之道，形而下者谓之器。匠者，器也。处身平凡的匠人不断追求向上的设计之道。我们是搜狐普通的设计师，想和大家分享一些心得体会。谨以我们的流程和方法献给有志投身用户体验设计的同学们。

入行多年，投身搜狐新闻团队也已两年有余。与业界同侪相比，仍是新晋后辈。写在书中的是一线设计团队的集体经验和设计师个人的些许感受。点滴汇集，与前辈、后来者分享。言语不尽，仍待来者指点。

《庄子·山木》篇讲到：“弟子问于庄子曰：‘昨日山中之木以不材得终其天年，今主人之雁以不材死，先生将何处？’庄子笑曰：‘周将处乎材与不材之间。’”

作寓言读，可以从多方面得到启示。出于职业习惯，我从中悟出一点个人关于 UX设计的一些感受，可能就如庄周所言，处乎材与不材之间。

全书在编写的过程中，我们的团队始终仅有五人。书籍耗尽了团队成员几乎全部的业余时间。过程中，我们经历了人员变动，有过意见相左、有过彷徨悱恻。但最终对于设计的热爱使我们坚持下来，使这本书得以面世。

感谢搜狐新闻客户端负责人岳建雄。

感谢主编成员：顾盼，邓敏，曹雨初，包巳砚，有他们才有这本书；感谢参与编辑的同学：李艳，马宁，刘廷奇，陶宇；实习生：王丽婷，刘春强，王子倩， 欧阳磊。感谢内容运营中心总监缪贝颖，市场部总监张璞，服务端产品经理孙小雷， iOS开发组长丛云旦加入的文字让成书更加丰满。感谢知友“农民骆逸”，我们引用了您在知乎的文字对“设计之下”进行了解读。感谢搜狐新闻客户端团队所有 的成员。

——设计师董翔鹤

前言

我们每天都在面对着生活和工作中的各种问题，千头万绪中如何做到事事有序。

用户体验设计是什么？用户体验设计能做什么？简单地说，用户体验设计提供给人们一种适合的路径，以便轻松、愉悦、高效地解决问题。

解决问题的方式

早些年，人多聚会吃饭的时候，一个很现实的问题出现了，有的菜太远，夹不到，用餐者只能站起来去夹，让筷子变得“更长”，这样虽然解决了问题，但是 方便了自己最终却造成了整个饭局的混乱。于是为了更好地解决这个问题转盘被安放到了桌子上。现在，我们再去餐馆吃饭，就很少会再遇到这样的问题了。

试想一下，如果我们把餐桌当成一个产品，那么使用餐桌吃饭的人就是这个产品的用户，餐桌上的很多菜，就是产品的内容，设计餐桌的人就是用户体验设计师，让吃饭的人能快捷、方便地夹到菜（获得内容），桌子能转动就是用户体验设计师设计的最好的解决问题的方式。

所以，在实际设计过程中，我们也要考虑到解决问题方式的多样性，尤其是在设计产品界面流程操作的时候，多问几个为什么，多找几个用户来谈谈，才能知道到底采用哪种方式才是最流畅、最有效的。

引导用户的路径

用户体验绝不是一个页面、一个 icon、一个动效，而是由这些基本元素构成的一个系统的流程，可以说是用户的浏览路径。

宜家的购物路线设计可以说是一种典型的用户体验设计。

从这种路线图可以看出，只有一条主要路线，蜿蜒从入口到出口，贯穿“客厅”、“餐厅”等购物点，购物点之间有捷径打通，在不影响主路径的时候，有多 种“捷径”可走。传统商场的购物点往往是散状分布的，即便有很多路径相连和功能划分，仍然容易迷路。宜家通过导视标志和墙壁的阻隔与划分形成了上面这种蜿 蜒而接近唯一的浏览路径，这种设计方式巧妙地解决了顾客迷路的问题，并且保证顾客基本看到了其所提供的所有商品，从而最大限度地挖掘顾客的购买潜力。

在设计软件时，也要考虑用户的使用路径。从用户点击图标开始，他就进入了你的软件“商场”。你需要做的就是用最简单的方式引导，帮助他找到关注的内容和想使用的功能，快速地进行消费。

另外一个值得注意的细节是宜家的各个购物点不会只摆商品。你经常会看到各种“样板间”，比如一款杯子可能出现在“餐厅”区，还会出现在“客厅”、“厨房”等地点，宜家将搭配好的套餐出售给顾客。

宜家的做法给予了我们灵感。让商品之间产生联系，大部分消费者买了一只水杯后，会感觉其搭配的餐垫也不错，桌椅风格也相符，最后引导他买下整个餐厅的大部分装饰。

这是一种典型的场景化设计。从产品的角度来解释，样板间在整个购物流程中起到了流量的再分发作用，并且将模块和功能之间相互打通，是整个购物流程中的关键节点。比如，搜狐新闻客户端的订阅中心、新浪微博的广场，都是这种流量再分发在软件上的体现。

为了化繁为简

“如果所有人都忙于做所有的事，又有哪一个人能把每一件事做到完美。”

在 2012年 12月搜狐新闻进行了 3.3版本改版。我们对客户端 UI和交互进行了简化，阅读产品内容是核心，一切视觉元素为阅读服务，我们简化了一切质感让设计回归到本原，内容即 UI。视觉上扁平不如让内容层级和交互逻辑扁平，所以我们将原有 APP分布式的功能按键全部集中在了 ToolBar上，让用户更方便地进行单手操作（图 0-1）。

随着 iOS 7的发布，扁平化的视觉设计风格大行其道，与其让UI扁平，不如让信息和内容扁平，设计的存在一定是为了更好地解决问题，用户体验设计提升了解决问题途中的精神感受。

对于用户体验设计可能每一个从业者心中的概念都不一样，但大家最终的目的却可能相同。本书以搜狐新闻客户端为案例与前辈和同学们分享我们的工作流程和方法。言语不尽，仍待来者指点。