作者：李刚
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
用户至上——移动UI设计实战指南试读：
前言
本书适合什么人
这是一本讲解用户体验设计的书，能够给基础薄弱和在设计时遇到瓶颈的UI设计师提供一套系统和完整的学习方法，帮助他们提升用户体验设计方面的能力。书中的内容结合了笔者多年的工作经验和设计技巧，非常适合UI设计师阅读和学习。
对于很多的UI设计师来说，无论是想“跳槽”，还是想加薪，用人单位都会强调设计师一定要懂得用户体验。大多数UI设计师对用户体验的认识不是很深刻，当被问到自己的作品的设计思路时，除了介绍下作品的配色和版式之外，就只能抛出“因为用户体验更好”这句话了。希望本书能够为大家解答用户体验方面的疑惑。
为什么本书重点介绍用户体验
这是一本设计类的书，重点讨论用户体验方面的内容。讲用户体验方面的内容的原因有两个。一是对于现在的设计师来讲，他们的差距已经不在设计能力上了，而在对用户体验的理解和把握上。例如，只要在Dribbble或Behance网站上出现了比较有创意的设计稿，大家就能很快地模仿并做出比它更好的设计稿，然而也仅限于模仿页面，很难理解原作者为何要这么设计。二是现在用人单位很重视设计师对用户体验的理解，对设计师的要求已经不再是把页面做得好看就行，而是需要设计师能更好地从用户角度出发，做出让用户觉得好用的页面。
本书从用户体验的角度出发，向设计师传达UI设计的两个目的：推动用户行为和传递产品理念。一般来说，用户使用App的流程：产生一个动机——在一定的场景下——在页面上进行操作——页面反馈一个结果。这整个过程中，设计师需要弄清楚目标用户是谁，用户使用的页面功能是怎么样的，以及用户是否能顺利地得到想要的结果。设计师可以通过UI设计将用户引导到正确的使用路径上，同时把产品理念传递给用户，让用户和产品建立起情感，提升用户对产品的忠诚度。
2013年，苹果公司发布的iOS 7系统推翻了其之前的拟物化设计风格，采用全新的扁平化设计风格，这件事既有一部分人叫好，也有一部分人反对。叫好是因为设计师们终于不用为了适配不同的Android手机而做多套设计稿了，也不用为了适配Android手机需要切“点九图”而折腾很久。反对的这部分人有些不是UI设计师，其中有一部分人是用户体验设计师和产品经理，他们觉得对于用户来说拟物化设计风格更容易被理解。例如，页面上的按钮是凸出来的，看起来就像是墙上的电灯开关，用户一看就知道如何操作。而扁平化设计风格的系统UI的引导性就没那么好，页面上的控件看起来很平，大家担心用户使用起来不方便，又或者用户需要花大量时间去学习和接受这些控件样式的变化。但经过一段时间发现，用户并没有反感，反而还很喜欢这种简洁干净的页面。因为与拟物化设计风格相比，扁平化设计风格给人最直接的感受是页面上的信息更清晰。拟物化时代的设计师拥有的优势瞬间消失，之前能使用的那些技巧现在用不上了，此时的设计师面临的最大的挑战是怎么安排控件的位置、大小，以及页面中元素与元素之间的距离。在2013年之前，手机屏幕的尺寸很小，设计师要保证在这么小的屏幕上既能让元素有较高的可读性，又能让操作热区有效，因此用户体验设计渐渐受到重视。后来的iOS 11系统又重新定义了UI设计，除了其页面上的标题文字变大了以外，还做了其他一些小的改变。当真的去深入研究之后，可能你会发现，现在的UI设计更重视结构规划。在苹果的应用商店中，除了下载量排在前列的几个App以外，对于大家费尽心血做出来的其他的App，用户可能只会在其上停留1~2分钟。对设计师来说，如何在这么短的时间内把主要的信息传递给用户才是真的挑战。
美观是设计的目标，但设计师更要重视的是用户体验设计。首先，UI设计师在用户体验设计方面的造诣能够直接体现在自己的作品中。设计出来的产品是否受欢迎，这是衡量设计师设计的产品是否有价值的指标之一。其次，UI设计师重视用户体验设计能让自己的能力得到提升。老实说，现在很多的App页面都大同小异，甚至有些页面已经有标准的设计模板，如手机号注册页面、购物车页面和订单管理页面等。设计师如果还停留在只会画页面这个层次，那么他对其所在公司来说已经没有太大的价值了。能在画页面的同时，还能讲出每个页面上信息安排的原理，这才是设计师应追求的状态。以设计注册页面为例，设计师可以将这些观点阐述出来：一是讲出注册的主要目的；二是将引导文案进行精简，并突出输入框和“下一步”按钮；三是根据运营给出的用户转化率数据衡量这个设计方案是否有效，然后找出问题并更新设计方案。如果能做到这些，那么这类设计师必定是公司重点挽留的人才。
接下来的几年，设计师面对的挑战不光是理解用户体验设计，还要学会应对技术革新带来的变化。例如，VR技术与全息投影不仅要求设计师做好页面和体验，还需要设计师对材料和实现方式进行深入了解。这里也向大家强调一点：做设计，只有不停地学习和努力，才能做出更好的作品。
最后，感谢人民邮电出版社数字艺术出版分社对笔者的支持，该社出版过很多相关行业的优质书籍，对这些行业从业者的帮助非常大。特别感谢笔者太太曹馨这么多年对笔者的工作和事业的支持。本书献给笔者的儿子李锦恒，希望他成为一个有梦想的人。
版权声明
本书引用了大量市场上的App截图，以解释用户体验设计是怎样在UI设计中起到实际的作用，在此特别感谢这些页面的原作者和相关机构为本书提供了很好的参考。如果本书在引用的内容上对原作者和相关机构造成了困扰，欢迎及时联系笔者，笔者会在下一版中及时补充或更正。芒果道长第1章 定义UI设计1.1 如何设计出具有“寄生性”的应用
当目标用户或潜在用户进入一个应用程序（Application，App）的页面时，他们会先做一个简单的判断：这个App的页面会提供什么样的内容或服务。例如，用户第一次打开一个社交App时就能初步了解这个App的主流用户群体，如页面上呈现的内容是时尚可爱的女性或是轮廓精致的男性等。接下来，用户会进行深层次的思考，为这个App打上一个分类标签。至于用户是喜欢这个产品（App）而继续使用，还是感到厌烦而离开，取决于设计师在设计时是否从用户目标、品牌目标和业务目标这3个方向去考虑。1.1.1 用户目标——合乎情理的设计让产品更受欢迎
什么样的设计才算是合乎情理的呢？其实，用户和产品之间是一个持续输入和输出的关系。用户每一次接触产品的目的都是寻找他们所遇到的问题的解决方案。而产品要解决的问题就是如何把解决方案告知用户。所以UI设计是一个始终伴随着“问题”的过程，不是拿出一个自认为好看的页面让用户自己去思考怎么用。其他领域笔者不敢妄自定论，但大多数互联网公司经常会用一句话来掩饰自己设计方案时的懒惰——“用户又不笨，他们比你聪明多了”。其实，设计师应该更多地关注用户进入产品时，页面会提供什么样的“导航方式”和“交互方式”，让用户在打开页面时，能立刻明白产品提供的服务和交互方式。
片刻App（文艺青年聚集社区，里面有音乐、电台和文章）是一个很文艺的社区，其页面顶部导航条的左上角有一个用于切换夜间模式的操作按钮。如果App当前的模式是夜间模式，用户点击切换模式按钮后会出现右图（左侧）所示的效果：太阳从山的那边升起，其透明度逐渐降低，同时整个天空变白，黑色的山慢慢变成了绿色的。整个变化过程很快，但用户能很明显地感知到页面由夜间模式转换为了白天模式。同样，将页面从白天模式切换为夜间模式时，太阳落下，天空变黑，伴随着流星划过，月光把黑暗的山谷照亮了，如右图（右侧）所示。退出该页面时，将回到用户发起切换模式时所停留的页面。片刻App 5.2.2版本夜间模式切换页面
UI设计解决的最终问题是如何让应用页面信息与用户认知相匹配。用户接触到产品后，大脑的第一反应是将所接触的东西和自己积累的信息进行匹配。在这个过程中，设计师需要关注用户能否将所看见的东西和认知里的东西快速地对应起来。如用户对白天和黑夜的认知是太阳的升降和月亮的有无，片刻App正是将这种认知应用到了设计中，设计师可以借鉴这种方法进行设计。假如要做一个简单的开关效果，在设计夜间模式时，App的整个页面不是瞬间变黑，而是模拟白天到夜晚慢慢变黑。这样，用户可以很好地接受页面模式的转变。
其实，以上讲到的逐渐改变状态的处理方法在其他非UI设计中的应用也比较多。例如，用户在退出音乐播放器时，正在播放的音乐是慢慢消失的，不会突然就停止。日常生活中，有些质量比较好的灯在开启和关闭时也会有一个慢慢变亮和慢慢变暗的过程。好的水龙头也是一样，在打开开关时，使用者会感受到水流量是逐渐变大的。通过这些非UI设计的例子我们可以得出一个结论，即人的头脑中运行着两套系统：一套是潜意识系统，这套系统会对触碰和操作进行简单分辨；另一套是对第一套系统得到的结果进行分析、加工，然后深化到情感里面，在下一次接触到类似的事物时，对相同的行为进行修正的系统。
所以，合乎情理的设计是指产品或设计不能给用户带来伤害，不能给用户带来认知上的困惑和生理上的痛苦的一种设计。
常常听身边的人说现在找对象真难，可是现在的通信技术已经很发达了，不管距离多远，用户打开App发消息或者看朋友圈的动态就能知道别人最近在干什么。这也表明如果真的喜欢某个人，想了解对方的喜好或日常生活会比以往方便很多。因此，从理论上讲，人与人之间的沟通效率更高了，找对象应该更容易，但事实却并非如此。抛开社会压力和价值观念的变化，在设计App的时候能否尝试去解决这个问题呢？
Tinder是一款交友类的App，由系统匹配推荐的社交对象，用户是看不见其他用户的资料信息的。用户向左滑动卡片表示对当前卡片上的用户不感兴趣，向右滑表示喜欢，如果双方都表示出对对方感兴趣则可以建立联系。这样的设计方案可能会导致大家将虚假照片或过度美化的照片放在社交App上面。单从用户做决策的基本诉求来看，用户想跟他人建立联系时，最基本的诉求是双方能有共同的喜好或审美等，如果最基本的诉求都满足不了，双方可能不会建立起联系。
所以，合乎情理的设计应该能够有效地帮助用户建立人与人之间的关系，降低社交关系的张力且促进平等交流。Tinder App 8.3.1版本页面
在音乐类App的社区里，我们总会看到有些歌曲下面的评论说这首歌会让人想起自己的大学时光，或者想起和某人在校园的小路上走路的场景。有心理学研究指出，人的长期记忆大部分是不可靠的，人们总会把记忆加工成自己想要的样子。碰见某些东西，想起某些经历，而这些记忆会影响人们现在做的一些决策。诺曼博士（唐纳德·A·诺曼，Donald Arthur Norman）在他的作品《设计心理学3》中明确指出，人的认知和情感可分为3个层次。下面介绍这3个层次对应的设计是什么样的，以及设计在这3个层次里是怎么起作用的。
本能层次的设计：关注外观；
行为层次的设计：关注使用的愉悦感和效用；
反思层次的设计：关注自我形象、个人的满足和记忆等。
前两个层次的设计比较好理解。本能层次的设计是指我们在拿到一个东西时先看其外观是什么样的，行为层次的设计是指在实际使用这个东西的过程中所有的操作是否顺利。那反思层次的设计是什么呢？下面为大家分析一个例子。
哔哩哔哩（bilibili）是一个以视频弹幕为特色的网站，也有App。仔细观察其用户登录页面：当输入焦点在输入手机号的地方时，两个卡通人物的眼睛是睁开的；当输入焦点切换到密码输入框时，两个卡通人物的眼睛蒙上了。用户在操作的时候，除了会感觉这个设计方案很可爱以外，潜意识里会产生另一种感受——没有人会观察输入密码的过程，可以放心地输入。一般来说，用户不会经常用到登录和注册的功能，但哔哩哔哩（bilibili）App这样的设计方案会在反思层次给用户留下很深的印象。用户以后不论使用哪个App的登录页面输入密码，都会想起哔哩哔哩（bilibili）App的登录页面。这种设计方案就在用户的反思层次起到了作用。
所以，合乎情理的设计可以增进页面与用户的沟通。哔哩哔哩（bilibili） App 5.9.1版本登录页面1.1.2 品牌目标——系统性设计给产品加分
设计师在设计UI的时候，强调品牌是因为品牌与用户忠诚度相关性较高，也是因为品牌是用户长期使用产品或服务后产生的结果。用户使用某个产品的功能或享受某个产品提供的业务，最后在用户心里形成的就是品牌。但要让用户能够很好地记住某个品牌，不仅是简单地让用户多使用这个产品就行。大众所熟知的各类企业都在不停地做广告宣传，每年投入大量的金钱把自己的品牌名字和理念讲给消费者听，其目的是让产品给用户留下深刻的印象。除了各种营销策略以外，更重要的是把品牌元素融入产品中，反复讲给用户听。比较典型的是脑白金和王老吉等品牌。脑白金用广告反复告诉用户“今年收礼只收脑白金”，王老吉用广告反复告诉用户“怕上火就喝王老吉”。
在品牌宣传的过程中，一些研究广告的人指出：相对于图形而言，人们更容易记住的是描述产品的广告词。回到脑白金的例子，电视上播出这个广告的时候，用户不会记两个卡通老人是顺时针旋转还是逆时针旋转，但“今年过节不收礼，收礼只收脑白金”这句广告词用户却能很容易记住。再回到移动端App的设计上。首先，移动端的信息是“碎片化”的，本身用户的注意力就稀缺，不能指望用户能认真阅读每一句文案。其次，脑白金和王老吉是有场景和语音支撑的，不仅能通过视觉向用户传递品牌信息，还能通过听觉对品牌信息进行补充或重塑。但设计师在设计App的UI时，只能通过视觉向用户传递品牌信息。那么想要在整体设计中突出品牌，就可以从文案、形状和色彩这3个方向着手。其中色彩能起到的作用相对较弱，它的主要作用是进一步解释产品的基调。在设计App的UI时，重点是通过文案和形状去突出品牌，我们看下面的例子。
闲鱼App是阿里巴巴旗下的闲置物交易平台。品牌在文案上的体现主要是栏目名称，这里的社区被称为“鱼塘”，创建鱼塘的人就是“鱼塘主”；品牌在图形上的体现主要是缺省页和提示信息。例如，下图（中）是用户售卖区域为空时出现的一个空鱼缸的图像，下图（右）则是没有留言时一个红着脸的鱼正斜眼看着用户的图像。闲鱼App 6.0.3版本
斗鱼直播App（游戏和生活类直播平台）的品牌形象在文案上的体现更多。下图（中）显示的是斗鱼直播App的社区论坛“鱼吧”，其下面还有子论坛“鱼塘”。鱼吧的背景则是一个卡通形象的女生顶着一条鱼，该形象也应用于缺省、刷新等场景下的页面。斗鱼的虚拟货币叫“鱼翅”，在斗鱼这个应用中，鱼翅的叫法比金币更能将品牌情感化，用户需要充值鱼翅才能购买道具或享有特权。用户在直播页面上可以看到给主播送礼物时弹出的窗口，每个礼物上都有标明需要多少鱼翅才可以购买。斗鱼直播App 3.6.1版本
品牌目标需要通过系统性的设计来实现，闲鱼App和斗鱼直播App这两个案例仅能解释系统性设计的一小部分内容在App设计上是怎么体现的。想让品牌被人记住，必须让品牌在用户心里留下深刻的印象，因此文案是比较有力量的。例如，支付宝有一个阶段的产品理念是“因为信任，所以简单”，向用户传递的是支付宝是一个能建立安全环境的产品。当前支付宝已经从支付工具变成金融平台，它旗下的应用几乎涵盖了人们的衣食住行。支付宝的产品宣传语也变得更坚定有力——“支付就用支付宝”。1.1.3 业务目标——设计方案影响业务能力
页面上的同一个按钮，用红色作为底色时带来的用户转化率比用蓝色作为底色时带来的用户转化率高。这个结论虽然受产品的使用场景的影响，但是从这个结论中可以提炼出一个核心信息：设计方案会影响业务结果。公司在制定关键绩效指标（Key Performance Indicator，KPI）的时候，对设计师不需要了解营收增长数据或用户增长数据，而是要为其制定一些非硬性的指标，如初稿的通过率、稿子修改的次数等。有一点需要设计师关注，设计稿的KPI数据和评审过后交付开发环节并不代表设计的结束，这只是设计的开始。至少对能力强的设计师来说，一个设计作品要在产品正式上线后，与上一个版本相比，能为用户带来更好的体验、能为公司带来更好的回报，这个作品的设计才算结束。设计是感性的，衡量一个设计方案是否比上一个版本好，可以从好感值、回访意愿值和口碑这3个方向去进行验证。◎好感值
用户第一次使用某个App时，关心的是这个App能否解决自己遇到的问题。例如，用户想买东西，在买东西的过程中，随着使用产品其他的功能或跳转到其他的页面，会慢慢对这个产品产生好感。用户体验设计师会比较关注用户在使用产品过程中的心理变化。用户对产品好感的形成过程并不复杂。心理学有大量的研究指出，人在进行一系列思考时，往往很难去关注或指出进行这样思考的动机是什么。一个心智模型的成型时间很短，接收信息、发起动作、得出结论、动作执行和神经加强记忆，这样一个简单的步骤就能形成一个心智模型。用户在使用产品时，页面整体的美感、内容的易读性、页面功能控件的操作流畅程度会让用户形成一个对产品的心智模型，并形成好感值。
好感值可以以用户在页面上的停留时长作为参考。当产品的新版本上线后，统计某一段时间内新版本和旧版本用户停留的时长即可。某产品的用户停留时长数据
使用用户停留时长数据作为参考时要注意一个问题，即选定产品的主流用户所在的维度。拿某一个页面举例，主流用户的停留时长是31~60秒，若新版本上线后的停留时长是上升的，那就说明用户对新版本设计方案比上一版设计方案的好感值高。如果新版本的数据是下降的，设计师就需要和产品经理一起找到其下降原因。如确认其他埋点的数据是否有遗漏等，再检验设计方案是否有问题。
通过对比分析用户停留时长来检验用户对设计方案的好感值，会存在一定的风险。因为统计结果会受到推广活动的影响。将产品进行对外推广活动时，用户停留的时长一般会变长，所以需要挑选没有推广活动的时间段的数据进行统计。此外，页面上的实际内容和服务的改变也会影响统计结果，因为很难去除拿到的数据的噪点。
功能类App数据的噪点较少，内容类App数据的噪点较多，而市面上的App绝大多数都是以内容为主的。设计师如果是为视频类App设计UI，接到的任务是优化搜索流程的几个页面，待项目上线后去查看该功能的统计数据时，可能会出现这3种情况：一是用户使用搜索功能的总次数多了；二是用户在搜索结果页面停留的时间更长了；三是用户进入搜索页面，没有进行任何搜索就直接退出该页面的情况减少了。以上情况，设计师无法判断是不是设计方案起到了作用，或许是刚好该公司谈好了视频网站或电视剧的版权，吸引了用户进行搜索。当设计师拿到用户停留时长提升了的数据时，需要先思考这样的结果是否是设计方案起的作用。
相反，如果设计师所在的公司失去了部分热门优质视频内容的版权，就算设计方案的搜索页面优化得再好，好感值对应的数据也会下降。此时，设计师除了可以凭借经验进行判断外，还可以继续对比回访意愿值。◎回访意愿值
回访意愿值指检验用户使用完产品后再次使用产品的意愿情况。针对这一点，设计师可以在做方案时就想好自己需要验证的关键数据，自己推演后再跟产品经理核对验证。回访意愿值主要看“7日留存”和“30日留存”的数据，如果这两个时间段的数据没有下降，那证明新版本产品的功能没有问题。设计师也可以从这些数据入手去统计自己页面的功能点，协同前面提到的停留时长来判断新的设计方案的效果。另外，回访意愿值还体现在业务上，如电商类App的页面在改版时，都会有页面访问数（Page View，PV）、用户访问数（User View，UV）、用户跳出率和用户转化率等数据。设计师可以重点关注点击次数和点击进入二级页面的次数。
设计方案的作用是引导用户的行为，如商品详情页面上的“立即购买”按钮，其设计目的是引导用户购买产品。而影响用户是否会点击该按钮的因素主要有两个：一是点击进入购买页面后发现价格、运费和优惠力度等不足以吸引用户做出购买的决策；二是详情页面上的信息做得不够完善，用户对该商品信任度不高。设计师光靠经验或猜测无法得出准确的修正方向时，可通过统计数据查看用户在该页面是否还点击了其他按钮，分析这些数据并找出完善第一版方案的方法。设计师也可通过修改按钮的颜色、大小和位置来验证设计方案效果。所以在提高用户回访意愿值的方法上，明确的行为引导设计很重要。◎口碑
口碑维度的数据就很难获取了。首先，产品或功能口碑的建立需要比较长的时间。例如，用户使用的是电商类App，用户对App的口碑需要通过购买一定数量的产品之后才能建立。其次，用户需要有对比才能得出结论，用户拿A产品和B产品对比后才能总结出哪个体验更好。另外，口碑不仅来自产品页面的美观程度，更多的还是来自App提供的整体体验。例如，同样买一件商品，某专营家电平台的配送速度快，早上下单，下午或者最迟第二天早上就送到；而另一家大型平台的配送速度没那么快，或许要三四天才能送到。所以从这样的体验对比上来看，该产品的口碑主要受服务快慢的影响，跟UI设计方案是否美观和体验是否流畅的关系不是很大。一款App从开始进入市场到最后退出市场，都会经历投入期、成长期、成熟期和衰退期4个阶段，这4个阶段加起来被称为产品的“生命周期”。在产品生命周期往后移动的过程中，产品的服务和内容会趋同。如LifeVC、良仓、有货和NOTHING等App都有同类的产品；再如京东、天猫和苏宁等，提供的内容也都趋同了。这个时候的设计重点是产品的设计体验、页面美观程度和使用流程上的交互体验。评价口碑的好坏除了可以参考前面提到的数据外，比较常用的参考是苹果的应用程序商店（App Store）等各大应用市场的用户评论。另外，官方微博、官方贴吧等地方的用户评论也尤为重要，这些评论也可以作为参考。还有一个比较常用的判断方法，那就是向目标用户发放问卷，从问卷调查中得出App当前的版本和竞争对手产品相比存在什么优劣势，让问卷调查结果指导设计师进行方案的优化。
下面介绍虾米音乐App和网易云音乐App的播放页面。有人喜欢虾米音乐App的播放页面，其页面的上方是歌曲的封面，下方是功能和评论，整个页面干净舒服。也有人更喜欢网易云音乐App的播放页面，认为这个大的、滚动着的黑胶唱机的设计方案非常吸引人。笔者和身边很多人聊过使用这两个音乐App的感受，年轻人更喜欢网易云音乐App，这一点可能跟产品的整体风格有关，而大部分的“80后”更喜欢虾米音乐App，因为他们最初使用的就是虾米音乐App，也会主动向别人推荐虾米音乐App。这样的口碑是在用户长期使用产品的过程中形成的。虾米音乐App 6.0.6版本播放页面网易云音乐App 4.3.4版本播放页面
设计师需要在产品口碑的形成过程中为用户提供体验好的UI设计。体验好意味着用户愿意一直使用这款产品。在这个过程中，设计师需要关注用户的行为并通过一些设计方案去引导用户的行为。
支付宝App的会员升级页面，首先告诉用户当前的等级，然后用进度条显示用户当前等级对应的积分和到下一等级需要累积的积分，其次在页面的下半部分把升级赚积分的方法列出来，引导用户去消费，让用户用消费额度来兑换积分。唯品会App中也有等级进度条的显示，这个进度条比较明显地告诉用户当前的等级和对应的积分，以及到达下一个等级的积分是多少。不仅是用户等级会有这样的设计方法，在其他App中也可能存在。如运动类App中的勋章体系和任务系统的进度设计等，都会用到这种进度条的设计方法。这种设计方法具有引导用户行为的作用，其原理是“目标趋近效应”。这个心理学现象揭示的是“当人们越接近目标时，越有动力去完成目标”，所以在设计方案上要把用户接下来的目标和还差多久就能达到这个目标的信息都一一列出来。支付宝App 10.1.0版本会员升级页面唯品会App 6.7.2版本会员等级页面
设计方案不管是应用在产品生命周期中的哪一个阶段，都会影响产品的业务能力。设计师需要清楚每个阶段UI设计所起的作用，有针对性地去做设计方案并且验证设计方案是否有效。通过收集每一次设计方案的用户好感值、回访意愿值和口碑来优化设计方案，从而提升产品的业务能力。1.2 设计师的使命
大部分设计师在介绍自己的作品时，都很难详细地阐述自己作品的真正含义。在评审团队或老板询问设计师时，如果设计以红色系为主，设计师就会阐述“红色代表热情，能从情感上引导用户”的观点。在这个过程中，设计师避重就轻地去讲设计的色彩，甚至牵强地把设计方案讲得很符合用户需求。但是设计师根本没有向评审团队或老板讲清楚该设计方案是怎样解决用户问题的，以及在解决这些问题时会出现什么样的场景等。
笔者最喜欢的、对设计具有指导意义的一句话是乔布斯说的“Design is not just what it looks like and feels like，Design is how it works.”。这句话直接翻译过来是“设计不只是让人看起来怎么样或感觉怎么样，而是它怎么样工作。”后半句其实翻译为“怎么样有效”更好，要明确区分“好”不是“工作”，而是“有效”。
设计师做设计无非是给需求套上一个外壳，虽不能让用户触摸到服务，但能给用户提供一个做决策的参考。大部分设计师在做设计时，关于对“准确提供参考依据”这个层面的思考是很少的。例如，某电商商品的详情页设计得很好看，但买家拿到商品实物后发现有色差，甚至商品的形状或其他基本属性与图片上面描述的完全不一致。这里不能说完全是设计师的责任，因为设计输出物的效果是需要上级批准后才能上线的。但不得不说，设计师可能会在做设计的过程中加入个人的喜好，没有过多地考虑该商品的使用场景。设计最基本的目的是准确传达信息，降低用户做决策的门槛。
设计不该只停留在好看或酷炫的层面上。原研哉（Kenya Hara）先生有一个对设计师很有启发的观点，他认为对一个东西的理解不仅是停留在描述它或定义它的层面上，而应该把这个已经知道的东西变成未知的，然后让设计师去重新理解设计的意义。一开始笔者不是很理解他说的这句话，设计师在做设计的时候，不就是先去理解需要做什么吗，为什么要把这种理解变为未知的呢？这样不仅对设计效率没有帮助，而且设计出来的作品也不一定能让用户满意。直到有一天笔者带长辈去买手机，笔者给长辈推荐了现在流行的很多款手机，但都被长辈拒绝了，长辈自己选择了一款字体大并且有按键的手机。笔者恍然大悟，明白了好的设计不仅是要美观或符合审美的标准，而是要更多地关注商品使用场景和做这个设计的目的，如果忽略掉这两个关键点，那么页面做得再好看，这个设计也不能很好地服务于用户。1.2.1 为使用场景做设计
设计师是无法将全部用户的使用场景都列举出来的。设计师无法确定目标用户是在晃动的车辆上，还是在匆忙赶路中，又或是在排队吃饭。移动端用户的行为是碎片化的，从App能统计到的数据能大概看出哪个时间段的用户最多，用户会停留多少时间，以及用户在哪个页面上停留的时间最长。既然无法确定用户什么时候使用App和使用App时的场景，那设计师应如何做好设计呢？这时可以从用户做决策、得到结果和对结果满意程度这几个方面去思考，如下图所示。用户做决策的4个环节
上图显示了用户做决策的4个环节，设计师可以这样理解：在什么样的环境里面，用户在页面上通过什么样的行动来达成什么样的结果。下面从用户、行动和结果这3个方面阐述设计师在设计时需要关注的问题。◎用户是什么样的
设计师每天会接到大量的设计任务，交稿的时间也很紧，所以整天都在不停地赶稿。尽管设计师对自己公司的业务和自己作品的服务对象都很熟悉，但却很少真正地去理解目标用户是什么样的人群。例如，一些设计师为某个电商类App做UI设计，却没在自己设计的App上买过东西，这样的设计师无法体会用户在自己的设计方案上操作时会发生什么样的状况。设计师需要去了解自己服务的用户是谁，最重要的是要理解用户的使用能力如何。也就是用户在使用某产品时，他们会不会因为自身水平的限制而无法理解该产品。以电商类App为例，卖基金的App的UI设计方案和卖母婴用品的App的UI设计方案是不一样的，虽然二者的用户群体会有交集，但主流用户群体特征不一样，因此二者的UI设计方案也会不一样。
设计师可以通过公司的商务拓展（Business Development，BD）人员去了解自己服务的对象是什么，服务对象在使用移动端产品时个人能力如何，以及他们所在的企业服务移动端产品的能力又如何。另外，设计师也可以通过产品经理建立的用户画像将用户使用产品的能力、喜好和用户的基本物理属性都列出来，方便在设计的时候参考。◎在页面上做了什么动作
用户在页面上做出的动作是可预知的。UI主要体现的是两大内容，即数据组件和页面功能。例如，在一个商城的支付页面中，其数据组件有收件信息、待支付的商品信息和支付金额，其页面功能有订单管理和发起支付的按钮。所以用户的行为是可预知的，要么退出支付流程回到上一个页面，要么重新编辑或按照默认列表进入支付环节并跳转到下一个页面。设计师需要对用户的行为进行引导，并把控好按钮的大小和颜色、页面的反应速度、信息的可读性或易读性等。◎得到什么样的反馈结果
用户得到什么样的结果，即用户在页面上做出动作后页面给出的反馈。如果用户按照预先设定好的产品逻辑和正常流程操作就会得到相应的结果。例如，用户在购物App的支付页面上点击“立即支付”按钮时，一定会跳转到支付确认页面或是跳转到支付失败页面；如果不按照正常的流程操作则会退出支付环节，用户也会有另外的子目标要完成，如用户不想买了，或者想重新购买其他东西。◎环境不同，结果不同
以上的用户、行动和结果对设计师来说都是可预知的，并且设计师可以在每个环节通过为页面赋能以获得期望的效果，但环境是不可预知的。设计师在考虑环境这一影响因素时，需要预估用户在使用产品时的实际感受，通过选用合适的设计方案让用户持续产生好的感受。接下来看滴滴出行App的抢单页面。滴滴出行App出租车司机端抢单页面滴滴出行App私家车司机端抢单页面
上页中的左图是出租车司机端的抢单页面，右图是私家车司机端的抢单页面，它们都是同一产品的抢单功能页面，但设计方案却不一样。因此，设计师在设计时还需考虑以下3点。
第1点：使用环境。设计师要考虑使用环境。出租车司机需要不停地移动，注意力需要放在行驶的过程中，出租车司机是在行驶的过程中去获取信息和做决策的。而私家车司机在抢单时，使用的场景更多是固定的环境，有顺路的乘客才会抢单。先不考虑使用功能频率和使用功能背后的动力，单从使用环境就可以提炼出环境对用户的影响。
第2点：利己点。从出租车司机的角度出发，决定是否要抢某一个单时，距离是影响司机做决策的关键因素之一。距离过长，费用不划算，还会存在叫车用户跳单的风险，所以距离的远近是出租车司机考虑的利己点。私家车司机的利己点在于时间能否接受。滴滴出行等叫车软件在路线设计上是合理的，例如司机的目标路线是从A到B，分配的订单不会是从A到C。但时间是个问题，叫车用户用车的时间过早或过晚，就会与车主出发的时间不一致。所以，在私家车司机端抢单的页面上，出发时间是利己点。
第3点：设计方案。设计师应从用户的利己点出发设计页面。如出租车司机关心的是距离，所以在UI设计方案上，显示距离的数字要设计得更突出。而私家车司机的利己点是时间，所以显示时间的数字就需要设计得更突出。可能有人会质疑，出租车司机在抢单时会有语音提醒，就算数字不大，语音提醒对抢单信息也做了补充。针对这一点，设计师还需要考虑语音传达信息是否需要外部环境的支持，例如扬声器的声音是否能盖掉噪声，同时会不会给司机带来嘈杂的困扰。
两个页面上“抢单”按钮都做得很大，考核设计方案是否成功的要素不仅有准确传达信息，还有用户使用该功能时是否提升了效率。设计师将按钮的操作区域设计得大一些，这样即使用户在忙乱的环境中也能方便快速地点击按钮，进而提升抢单的效率。1.2.2 为特定的目的做设计
在特质心理学的理论中，人的天性被分为3类，即生物天性、社会天性和特质天性。生物天性和社会天性不难理解，这里主要讲特质天性。特质是指决定一个人独特性的东西。设计师在设计作品时，往往会犯错的地方在于特质。设计师有时为了把页面设计得更加有特点或为了表现自己的高超技艺，会做出很多不符合产品目标的设计方案。例如，一个以销售为目的的设计，原本应该在设计时采用大红色的价格数字以体现价格优势，但设计师为了让页面整体更和谐，最终让价格数字融入页面整体的风格里去了。这次设计的目的是凸显价格优势，激起用户和潜在用户购买的欲望，让消费者做出消费的决策，但设计出来的方案却与最初的设计目的背道而驰了。
贡布里希评论艺术家和艺术时说：“所谓的艺术家，从前是用有色土在洞窟的石壁上大略画个野牛形状，现在是购买颜料，为招贴板设计广告画。”不管是过去，还是现在，艺术家所做的事情和艺术所代表的事物都不会有很大的不同。所以设计师不管做什么样的设计，都应该牢记的一点是不要忘记设计的目的。艺术家创造艺术的目的在于表达作者对当时社会的看法，而设计的目的在于向用户传达一些信息。这里要注意区分：艺术的目的在于“自我表达”，而设计的目的则在于“信息传达”。所以设计师要始终记得自己的设计作品是服务于“信息传达”的。
看下面两个例子，分析这样的页面是如何关注设计目的的。◎滴滴出行App的“敬老出租”
滴滴出行App普通模式的页面很简洁，当切换到“敬老出租”模块时，页面会发生变化：输入区域变大了，字体变大了，提醒输入的背景色也变得更醒目。由此可以看出，一个有效的设计至少要具备以下3点。滴滴出行App 4.2.6版“敬老出租”页面
第1点：了解用户特征。用户在使用滴滴出行App叫车时，为了能够达成叫车目的，需要向软件发起的操作有定位当前所在位置、输入要通往的目的地和发起叫车请求。用户在进行这3种操作时需用眼睛去确认输入的信息和结果，还要用手指去点击输入框并输入文字。而老年用户的身体机能和器官会随着年纪的增长而衰退，所以老年用户的特征是阅读信息困难和输入信息的灵活度不高。
第2点：以目标受众的使用能力为出发点，提供高效的功能设计方案。观察“敬老出租”页面设计方案，在用户接受信息和输入信息后，点击区域变大了。页面中起点位置和目的地输入框的点击区域都变得很大，两个区域的面积加起来超过屏幕面积的50%，老年用户的手指灵敏度就算不高，也能方便地点击到该区域。另外，还要考虑用户的视力问题，所以设计师把字体变大加粗，即老年用户在视力不佳的情况下，也能看得清页面呈现的内容。另外一点属于产品经理负责的范畴，那就是在选择目的地的时候，考虑到老年用户的输入能力有限，滴滴出行还提供了语音输入目的地的功能。用户点击进入语音输入页面后，系统会根据用户输入的语音匹配出目的地列表，用户在列表里面选择自己的目的地即可。所以设计师需要考虑用户的实际使用能力，提供方便用户完成任务的方案。
第3点：为用户下一步操作提供明确的引导。输入出发点后，老年用户操作不会那么连贯，为了提醒老人继续输入目的地，页面上用了显眼的橙色作为背景色，通过该方法来引导老年用户去完成下一步的操作。
设计师做设计时更多需要考虑设计的目的，不管是以用户为中心的设计，还是以商业目的为出发点的设计，都不应该忽视设计的真正目的。◎“有损服务”设计
将“有损服务”的概念用在设计上是很常见的。特别是在设计电商类App的页面时，为了避免用户使用某些功能，设计师会故意设计一些不好看的页面。或许用户很难注意到这样的设计，但它是为了解决特定问题而故意设计的。
做过电商的人应该知道，平台或公司比较痛恨的是“羊毛党”（指有选择地参与营销活动以低成本甚至零成本换取奖励的人）。如某公司在做一个抽奖或送券的活动时，奖品大多会被这类人领走。而推广活动的目标用户却什么也得不到，这样会产生一些问题。一是运营预算花出去了，实际推广活动吸引到的用户却很少，导致整个拉新成本变得很高。例如，运营预算花10元拉10个新用户，活动的内容是给10个用户每人发一张1元优惠券，如果领到优惠券的用户里面有5个是“羊毛党”用户，就意味着平台花了10元，只推广给了5个用户，那推广成本就从每个用户1元上升到了每个用户2元。二是造成用户对平台不信任的问题。活动在预热期间的宣传做得很好，保证用户都能参与到活动中，结果好处却被其他人拿走了，而真正的目标用户什么都拿不到。用户可能会觉得活动有“内幕”，从而对平台和品牌失去信心。
针对以上的问题，设计师能做些什么呢？答案是“有损服务”的设计。之前笔者在服务于某个平台期间，发现每次推广发放的优惠券都被相同的一群人领走了，并且这群人用这些优惠券大量购买平台的商品，然后用同一商品不同角度的照片来恶意索赔。这就意味着商品卖得越多，就亏得越多，毕竟平台的优惠券是实际补贴出去了。笔者团队采用的第1个方案是在后台将该类用户标记出来，当他们提交订单时，系统会检测收件信息中的手机号或收件地址是否在“黑名单”中，如果在“黑名单”中，则提示用户由于信誉过低不能下单。单从数据上来看，这样做确实杜绝了该类问题的发生，但带来的另一个问题是该类用户去别的论坛和购物群大肆宣扬笔者服务的平台不好，造成平台口碑的下降。经过反复思考后，笔者团队决定提供“有损服务”的设计方案，去掉了第1个方案里面的提示信誉过低的文案和流程，对结算的UI设计方案做了改动。
当程序检测到该类用户在支付时，会默认跳转到右图所示页面，该类用户找客服时，客服的处理话术都是软件预先设定好的“对不起，宝宝，系统故障，正在解决当中，请稍后重试”。采用这个方案后，笔者团队发现购物群里说平台差的人变少了，也达到了笔者团队的设计目的。
通过以上的例子可以看出，设计师在为特定的目的做设计时，重点在于解决问题。做出好看的作品是对设计师的基本要求，但最重要的一点是设计师要考虑设计的目的。有损服务的支付环节指定跳转页面1.3 设计师需要懂得的3个心理学知识
有一个关于按钮颜色影响转化率的例子，表明红色按钮比蓝色按钮的转化率高21%。当然，这个数字笔者无法考证，也不知道是不是在相同的环境下做的实验，但设计师们可以参考前人留下的经验。例如，在设计打折商品价格时，一定会增加一个被删除线划掉的“原价”，这就是抓住了用户的心理需求的设计。设计师会去追随一些流行的设计并将其运用到自己的作品中，但很少追问自己为什么这么做。接下来看一下最基本的3个心理学知识在设计中是如何应用的。1.3.1 用户不喜欢使用令人有压力的产品
笔者个人对数字不是特别敏感，记得以前给父母转账时至少要核对5遍银行卡账号，有这种行为的主要原因是笔者害怕输错银行卡账号，造成经济损失。用户在使用某个产品功能时，也会因为操作不顺畅或操作结果不符合预期而产生压力。设计师在设计的过程中要根据设计目的去合理规避或利用这些压力。◎因可能会带来财产损失而产生压力
用户在一个页面上绑定自己的银行卡账号，输入长长的数字后，显示的结果如果没有按照银行卡上面每4位隔开的方式显示，用户就会产生心理负担，需要重新核对几次数字。用户担心自己使用该功能后会给自己带来财产损失。支付宝App 10.1.15版本转账到银行卡页面
通过以上的例子可以看出，设计师在进行UI设计时，可以多思考做这些功能的原因，以及用户是否因这些功能提高了使用效率。例如，用户在使用支付宝转账到银行卡的这个功能时，卡号输入框内的数字会以每4个一组的方式隔开，刚好与银行卡上面的格式对应。这样用户就很容易知道已经输入的是哪些数字，没有输入的是哪些数字。不管是操作过程，还是操作结果，都和用户的心理预期同步。另外，从产品业务上来讲，这种设计也是有一定帮助的。
支付宝转账到银行卡的页面还有另一种交互方式：当用户把输入焦点放在转账金额时，页面会自动根据卡号把银行名称匹配出来，这个功能给用户带来的最直观感受是信赖。这个功能为用户的心理预期做了双重验证，首先是银行卡数字分组让用户更容易校验卡号，其次是在即将转账时把卡号对应的银行名称显示出来了。从用户的角度看，这个产品准确、安全；从产品的角度看，该设计增加了用户做转账这个决策时的动力。◎因使用过程不顺畅而产生压力
下面通过实际的案例来分析因使用过程不顺畅而产生的压力有哪些。
案例1
页面上有一个“×”的图标，如果该图标的语义是关闭当前页面或关闭弹出框，根据弹出框设计的目的不同在页面的表现上会有所不同。如果弹出框的设计目的是提醒用户弹出框内的内容或进行轻度的操作，设计师会将“×”图标设计得突出一点；如果需要用户进行接下来的操作，设计师会将“×”图标弱化一些。
看下面两张图，网易云音乐App的版本更新提示弹出框页面上也有“×”图标，但在不同位置，该图标所承载的功能是不一样的。左图中“×”图标的功能是关闭弹出框，而右图的播放歌曲列表页面中“×”图标的功能是移除歌曲。网易云音乐App 4.3.4版本更新提示页面网易云音乐App播放歌曲页面的歌曲列表
下面对网易云音乐App的播放歌曲列表页面进行分析。当用户播放一个歌单的歌曲时会出现以下3种情况。
第1种情况：用户不想将歌单里面的某些歌曲列入这次播放列表时，可以点击右边的“×”图标把不想听的歌曲从播放列表中移除。
第2种情况：正在播放的歌曲的左边还有一个该歌曲是来自哪个歌单的入口，用户点击这个入口后，如果歌曲是“本地”的，则跳转到“本地列表”，如果歌曲是网易云歌单里的，则会跳转到其所在的歌单。
第3种情况：如果用户想要切换到不相邻的歌曲，点击歌曲名字即可。
所以，对同一列信息就有3种不同的操作方式，用户在操作时，会感到压力。当用户想要移除歌曲时，可能会担心点击到别的地方，所以每次使用时都特别小心。但网易云音乐App的页面处理得很好，那就是将操作热区都做得很大。如果操作热区不够大，会造成使用不流畅的问题，用户会在使用该功能时产生压力。
案例2
UI设计需要考虑用户的使用场景。例如，用户在单手操作的情况下，右手持握手机并在页面上操作时会产生哪些问题；左手持握手机并在页面上进行操作时，会不会因为左手的大拇指盖住了解释功能的文案而导致操作结果和预期有出入等。某阅读类App调整字体和亮度时的操作页面
笔者一直强调设计的目的是解决问题，以上页面的设计方案是针对用户觉得屏幕明暗程度不合适，或者当前的文字大小不适合阅读而做的调整。这里笔者单独针对设置文字大小的设计方案提几个问题。
问题1：用户在什么场景下需要使用调整文字大小的功能？
用户把文字调小的原因是能够在一屏内看见更多的内容，此时用户所处的环境应该是安静、舒适的。用户把文字调大的原因是提高阅读的准确性。例如，用户在公交车或地铁这样不平稳的环境中，因为小文字的准确性没有大文字的准确性高，所以需要把文字调大。那么回到以上的UI设计方案中，除了蒙版背景后面能让用户看见文字调整
试读结束[说明：试读内容隐藏了图片]