设计之下!第一本讲述移动App设计全过程的书籍

优秀设计师是如何炼成的?第一本讲述单个App成功案例设计全流程的分享书,来自搜狐新闻客户端UED团队,看搜狐如何做设计。

全面介绍国内一线互联网公司中,UED团队在需求、设计、开发、测试、推广各个阶段中的工作内容和方式,包括信息架构、原型、交互、视觉、动画、Icon、品牌等全流程,以及与相关人员的合作细节。内容真挚朴实,值得品读!

设计之下!第一本讲述移动App设计全过程的书籍

亚马逊图书购买地址:

http://www.amazon.cn/gp/product/B00HUA52T2/

推荐理由:

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

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

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

设计之下!第一本讲述移动App设计全过程的书籍

专家评论

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

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

第一本详细讲述单个App成功案例设计全流程的分享书,全面介绍信息架构、原型、交互、视觉、动画、Icon、品牌的具体设计方法以及与相关人员的合作细节。搜狐新闻UED团队的分享精神和及时总结做法值得从业者学习,相信这会成为设计师案前一本极好的参考书。
——国际体验设计协会(IXDC)秘书长 胡晓

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

设计之下!第一本讲述移动App设计全过程的书籍

作者简介

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

设计之下!第一本讲述移动App设计全过程的书籍

设计背后的故事——作者专访

1、 你们是一个怎样的团队?
答(包巳砚):搜狐新闻客户端UED团队是一个活力的大家庭。
活力——每一个团队成员都是热爱生活、热爱设计的好少年。对待生活和设计总是精力充沛,对待用户体验和互联网行业充满了痴痴的信仰和追求。
大家庭——我们无话不说,好像从来没有生过各自的气。即使有了不同的想法,大家都会直接说出来,商量怎么解决问题。也从不会吝啬分享自己对生活和工作的新发现,例如看见一篇好文章或一个好作品,总是第一时间就转发给大家。每次过年过节后,从家乡回到工作岗位时,互相分享特产是十分欢乐的时刻,大家总是对我带来的海产品赞不绝口。

2、 你们是怎样想到要写一本书的?这本书最初的初衷是什么?
答(顾盼):我在团队负责招聘的初步甄选工作,每天都可以收到很多简历和作品集。其中不乏应届生和初学者,他们大多对用户体验十分有热情,也很有自己的见解。可是,体现在作品上的却往往忽略了一些用户体验的本质,也不是企业所需要的。比如拥有十分精湛的写实图标能力,却忽视了界面设计的训练,对布局、颜色、架构这些基本的设计要素也缺乏关注。
高校教学和企业实际工作的对接一直困惑各个学科。作为企业,有责任为行业新人搭建桥梁和平台。那我想最直接的做法便是朴素地说一说我们平时在工作中是怎么做设计的,工作流程是怎么样的,细节要达到什么程度,和其他同事又是怎么合作的。

3、 在写作的过程中你们都遇到了哪些困难,其中最大的困难是什么,你们是如何解决的呢?
答(曹雨初):写作和设计的思维不同,有一个好点子的时候我可以立刻画出来。图标、界面或是插画,简单的勾勒一下。但在写书的过程中,却常常有"文思如泉涌,下笔挤牙膏"的苦恼。
另一方面,搜狐新闻客户端团队也一直在高速前行中,我们UED组无时无刻不再为了更好的体验而努力,于是写作无不增加了大家工作和生活的压力。
对于第一个问题,书中的每一段和每一句我们都尽心尽力地反复斟酌。团队成员会定时互相交流,互相阅读各自的章节,发现不明白的地方便提出来,及时优化。而第二个问题,每一位同事都为此加班加点,虽然很累,但每完成一部分后,都很有成就感。

4、 你对这个行业有没有什么感想和大家分享一下?
答(包巳砚):用户体验设计是一个正在逐渐被大家熟悉和重视的领域。它不像市场或渠道等创造的价值是即时可见的,而是潜移默化地提升产品并影响人们生活的方式。当技术越来越普及,用户体验的价值便会越来越大。正在从事或准备从事的用户体验的朋友应该坚持自己所信仰的事业,同时提高自己的设计能力。正确理解用户体验的本质——表面看我们是在绘制界面、图标、插画,是在设计架构、操作、动效,实际我们需要关注的领域很多。在实践的过程中勤于思考,提高自己的设计能力,争取为自己所服务的产品、公司、社会创造更大的价值。

5、 写作是吃苦不讨好的事,你写作中最大的动力是什么?写作中能够获得什么?
答(董翔鹤):第一本讲述单个移动App设计全过程的书籍,也第一本介绍国内一线UED团队工作方式的书籍,最大的动力就是把这些"秘密"分享给大家。写这本书的目的并不是告诉大家我们的工作方式和流程是好的或者对的,而是想拿出来一起交流,以探讨更好的或是更适合自己团队的做法。互联网行业发展的很快,用户体验领域还很新,所以共同推动它的发展是我们每一个从业者的义务。

6、 讲讲你在写作中发生的好玩的或者感人的让你印象很深刻的事吧?
答(顾盼):写书的过程也是对这几年在搜狐新闻客户端团队工作的总结,面对厚厚的一叠A4纸和记事本,思绪万千。这里面有会议记录、产品信息架构、纸质交互原型、被圈点过的需求文档、无数最终没能上线的方案等。通过这些不同的字迹,回忆也渐渐清晰起来。我喜欢及时写下自己的想法和疑问,在文档上圈圈点点,所以可以清楚的看见曾经的思考方式,那么现在有没有变化呢?从这个过程中,我看到了搜狐新闻客户端和自己的发展轨迹,原来我们已经一起走过这么多路。

7、 你们认为自己写的这本书有哪些优点和缺点?
答(曹雨初):全面介绍了国内一线互联网公司中,UED团队在需求、设计、开发、测试、推广各个阶段中的工作内容、流程和方式,以及与相关人员的合作细节。这就像一部工作的纪录片,语言十分朴实,通俗易懂。即使仅仅是对互联网公司大楼每日灯火通明感到好奇的人,也能从中找到些许答案。
不过在完成这本书籍后,我们发现在写作的时候想说的很多,也经常处在埋头疾书的状态。所以忽视了文章的整体架构,在内容的轻重缓急上还可以再斟酌。

8、 对读者说点什么吧?或者最希望通过这本书读者能收获些什么?
答(董翔鹤):希望通过本书,大家可以对互联网行业和用户体验工作有更全面的了解。用户体验并不"高深",但想要做好也不容易。它是一个交叉性很强的学科,需要关注的方面很多。 希望热爱用户体验的朋友,坚持自己的事业。用户体验群体并不"孤单",正有越来越多的人参与,在社会和企业中也发挥着越来越大的作用,并确实为生活的方方面面带来更多的便捷。
移动互联网行业发展的很快,产品日新月异,搜狐新闻客户端和我们UED团队也在不断的进步中。关注"搜狐新闻客户端UED"的媒体,"追踪"我们的最新动态。

设计之下!第一本讲述移动App设计全过程的书籍

内容提要

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

编者序

形而上者谓之道,形而下者谓之器。匠者,器也。处身平凡的匠人不断追求向上的设计之道。我们是搜狐普通的设计师,想和大家分享一些心得体会。谨以我们的流程和方法献给有志投身用户体验设计的同学们。
入行多年,投身搜狐新闻团队也已两年有余。与业界同侪相比,仍是新晋后辈。写在书中的是一线设计团队的集体经验和设计师个人的些许感受。点滴汇集,与前辈、后来者分享。
言语不尽,仍待来者指点。
《庄子 •山木》篇讲到:"弟子问于庄子曰:'昨日山中之木以不材得终其天年,今主人之雁以不材死,先生将何处?'庄子笑曰:'周将处乎材与不材之间。'"
作寓言读,可以从多方面得到启示。出于职业习惯,我从中悟出一点个人关于 UX设计的一些感受,可能就如庄周所言,处乎材与不材之间。
全书在编写的过程中,我们的团队始终仅有五人。书籍耗尽了团队成员几乎全部的业余时间。过程中,我们经历了人员变动,有过意见相左、有过彷徨悱恻。但最终对于设计的热爱使我们坚持下来,使这本书得以面世。
感谢搜狐新闻客户端负责人岳建雄。

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

设计之下!第一本讲述移动App设计全过程的书籍

前言

我们每天都在面对着生活和工作中的各种问题,千头万绪中如何做到事事有序。
用户体验设计是什么?用户体验设计能做什么?简单地说,用户体验设计提供给人们一种适合的路径,以便轻松、愉悦、高效地解决问题。
解决问题的方式

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

试想一下,如果我们把餐桌当成一个产品,那么使用餐桌吃饭的人就是这个产品的用户,餐桌上的很多菜,就是产品的内容,设计餐桌的人就是用户体验设计师,让吃饭的人能快捷、方便地夹到菜(获得内容),桌子能转动就是用户体验设计师设计的最好的解决问题的方式。
所以,在实际设计过程中,我们也要考虑到解决问题方式的多样性,尤其是在设计产品界面流程操作的时候,多问几个为什么,多找几个用户来谈谈,才能知道到底采用哪种方式才是最流畅、最有效的。

引导用户的路径
用户体验绝不是一个页面、一个 icon、一个动效,而是由这些基本元素构成的一个系统的流程,可以说是用户的浏览路径。
宜家的购物路线设计可以说是一种典型的用户体验设计。

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

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

另外一个值得注意的细节是宜家的各个购物点不会只摆商品。你经常会看到各种"样板间",比如一款杯子可能出现在"餐厅"区,还会出现在"客厅"、"厨房"等地点,宜家将搭配好的套餐出售给顾客。
宜家的做法给予了我们灵感。让商品之间产生联系,大部分消费者买了一只水杯后,会感觉其搭配的餐垫也不错,桌椅风格也相符,最后引导他买下整个餐厅的大部分装饰。

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

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

随着 iOS 7的发布,扁平化的视觉设计风格大行其道,与其让 UI扁平,不如让信息和内容扁平,设计的存在一定是为了更好地解决问题,用户体验设计提升了解决问题途中的精神感受。
对于用户体验设计可能每一个从业者心中的概念都不一样,但大家最终的目的却可能相同。本书以搜狐新闻客户端为案例与前辈和同学们分享我们的工作流程和方法。言语不尽,仍待来者指点。

设计之下!第一本讲述移动App设计全过程的书籍

目录

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

精彩节摘

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

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

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

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

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

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

2. 围绕用户的目的和行为来设计
………………
从上面的例子我们可以看出,当用户的目的和行为不同时,所适合的操作流程是不同的,对"简单快捷"的考量标准也不同。在对操作流程本身进行埋头钻研前,不如先从试图理解用户出发,设身处地来思考用户的所想、所需,透过用户的视线来审视和观察、来判断操作流程是否真的简捷。
3. 少点一下就更方便了吗
4. 将常用功能提前
5. 不妨遵循已经成型的用户习惯

亚马逊图书购买地址:

http://www.amazon.cn/gp/product/B00HUA52T2/

【优设网 原创文章 投稿邮箱:2650232288@qq.com】
 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量63万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

设计之下!第一本讲述移动App设计全过程的书籍
 

收藏 7
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。