作者：王铎
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
新印象——解构UI界面设计试读：
前言
在这些年的工作中，我积累了一些较成体系的行业知识。我热衷于分享，所以写了这本UI设计书。在日常工作中，我常做的是视觉设计与用户体验，因此这本书的内容也是围绕这两方面展开的。
UI设计到底是什么？学生经常问我这个问题。UI设计师不仅仅是做视觉设计，还要了解软件的人机交互、操作逻辑和界面视觉的整体设计。UI设计师，不是单纯的美工，UI设计也不只是画图标那么简单，我们要更多地去考虑产品和用户的需求，用自己的思维去判断用户想要什么。
我在2010年进入腾讯工作，算是较早进入UI设计行业的一批人。虽然当时的智能手机刚刚兴起，但是智能手机的UI操作让我兴奋不已，从此我便在UI设计这条道路上策马扬鞭，奋斗至今。在腾讯任职的那些年，我发现，原来一个设计师可以让上千万甚至上亿的用户看到自己的设计作品，这大大体现了设计师的价值。还有一点让我感触颇深，那就是设计与用户的交流可以让设计变得更具实用性和易用性，让产品的体验感更好，也就是说设计要一对一到用户，直接与用户产生亲密接触，那么设计就变得更符合人机的交互形式了。换句话来说，UI设计离不开人机交互，离不开用户体验。
2014年，我进入今日头条任职，这是一家非常有创新意识的公司。当时我做的是媒体资讯这一块，发现设计师应该将知识和技术分享出来，因此做了“MICU设计”这个公众号。在做公众号的这几年内，我总结出一套比较成体系的设计思路和方法，正好借出书这个机会，以书面的形式分享给大家。
我做了两年多的UI培训，带过2000多位学员，通过与这些学员的交流，我感受到了他们学习UI设计的迫切心理。我希望可以通过简洁的文字和具有针对性的实战案例，让更多的人更好地学习UI设计。如果大家想要了解更多的设计思路，或者想获取设计素材及更多的设计教程，可以关注我的公众号“MICU设计”。
祝大家在学习的道路上百尺竿头，更进一步！王铎2018年10月第1章界面类型1.1 闪屏页
每次打开App时第一眼看到的就是闪屏页（又称启动页），该页面承载了用户对这款App的第一印象，因此对设计的要求是很考究的。闪屏页给用户观看的时间很短，通常只有一秒的时间，因此，如何在这么短的时间内表达出产品的定位就是设计师需要重点考虑的问题。只有设计出定位明确且吸引人的闪屏页，才能加深用户对产品的认知度。闪屏页分为品牌宣传型、节假关怀型和活动推广型3种类型，不同类型的闪屏页承载的内容信息和表达方式也不一样。1.1.1 品牌宣传型
App的闪屏页是为了体现产品的品牌而设定的，主要组成部分是“产品名称+产品形象+产品广告语”，如图1-1所示。品牌宣传型的闪屏页是最为直白的闪屏页，设计较为精简，力求凸显品牌特点。图1-1 品牌宣传型闪屏页1.1.2 节假关怀型
当节假日来临，很多App会通过营造节假日的气氛来体现人文关怀。当眼前出现一幅朴实的节假日插图时，观者会从内心感受到软件带来的祝福，从而拥有美好的心情。QQ音乐在设计中，对品牌的Logo进行了延展设计，以凸显节假日的元素。这种设计不仅能够加强与用户的情感交流，还能加深用户的品牌的印象，如图1-2所示。图1-2 用Logo体现假日元素的闪屏页
另外，也可以用整个场景的插画来营造节假日的氛围，这也是非常讨喜的表现方式，如图1-3所示。图1-3 用插画体现节日气氛的闪屏页1.1.3 活动推广型
有时候产品在运营过程中会做一些活动或者广告，推广内容通常会显示在闪屏页上。活动推广型的闪屏页多以插画形式表现，要着重体现的是活动主题及时间节点，营造热闹的活动氛围。在设计时一定要抓住主次，避免因为烦琐的场景影响到主题的体现，如图1-4所示。图1-4 活动推广型闪屏页1.2 引导页
一个好的App引导页能够迅速抓住使用者的眼球，让他们快速了解App的价值和功能，起到很好的引导作用。有一句话是这么说的：“优秀的UI可以造就App的点击率”。在做引导页之前，我们首先要学会定位，了解App的目标用户群。简单来说，引导页分为功能介绍型、情感带入型和搞笑型3种类型。1.2.1 功能介绍型（基础型）
功能介绍型引导页是最基础的一种引导页。这种引导页要保证信息展示一针见血，切忌啰唆、表达不清。在这样一个网络化、碎片化的时代，用户停留在引导页上的时间越来越短，浏览时间通常不会超过3秒。在这宝贵的3秒钟内，设计师需要把简洁明了、通俗易懂的文案和界面呈现给用户，如图1-5所示。请记住这句话：“用户需求就是你的文案，功能介绍型的例子比比皆是。”图1-5 功能介绍型引导页
功能介绍型引导页分为带按钮的引导页和不带按钮的引导页两种类型。一般社交类的产品会强制引导用户去登录，所以会在引导页面中加入登录的入口，如图1-6所示。图1-6 引导页登录入口1.2.2 情感带入型（中级型）
情感带入型的引导页能通过文案和配图，把用户需求通过某种形式表现出来，引导用户去思考这个App的价值，如图1-7所示。这种类型的引导页要求设计形象化、生动化、立体化，能够增强产品的预热效果，同时给用户带来某种惊喜。.图1-7 情感带入型引导页1.2.3 搞笑型（高级型）
搞笑型引导页的阅读量一般都比较高，拼的是设计效果或动画效果，如图1-8所示。在一般情况下，这种类型的引导页对设计师的要求比较高，需要设计师学会扮角色和讲故事，综合运用拟人化和交互化的表达方式，根据目标用户的特点来进行设计，最终让用户身临其境，在页面上停留更长的时间。图1-8 搞笑型引导页1.3 浮层引导页
浮层引导页一般出现在功能操作提示中，是为了能够让用户在使用过程中更好地解决问题而提前设计的用户教育。这种引导页的浮层通常以手绘表现方式为主，会使用箭头和圆圈来进行设计，并用高亮的颜色来突出信息，同时采用蒙版方式来加强突出功能，如图1-9所示。图1-9 浮层引导页1.4 空白页
空白页分为首次进入型和错误提示型两种。简单来说，空白页就是由于网络问题造成的页面或者是没有内容的页面，例如页面中显示“没有信息”“列表为空”“错误”和“无网络”等内容的页面就属于空白页。在一般情况下，这种页面都会通过文字信息给用户提示。好的空白页面会花费不少设计时间，因为这种页面不仅是用于提示，还会引导用户进行实质性的操作，从而加强用户对产品的黏性。要注意，空白页的设计一定要简洁明了。1.4.1 首次进入型
在用户第一次打开应用的时候，App会利用空白页的提示引导用户进行操作，指引用户找到需要的内容，如图1-10所示。图1-10 首次进入型的空白页1.4.2 错误提示型
错误提示型的空白页不仅在网页中很常见，而且在App中也经常出现，例如显示“找不到页面”或者“网络中断”等，如图1-11所示。这种页面中一般会指引用户解决问题，例如点击“刷新页面”按钮可以刷新页面等。图1-11 错误提示型的空白页1.5 首页
不同功能的App有着不一样的首页模块，选择一种适合产品本身的首页展示方式非常重要。现在，App首页同质化现象越来越严重，页面基本都朝着一个方向去设计。作为设计师，一定要做到多看多用才能够找到更适合产品本身的展示方式。下面介绍一下首页最常见的4种表现形式，分别是列表型首页、图标型首页、卡片型首页和综合型首页，不同类型的首页布局承载着不同的内涵。1.5.1 列表型
列表型首页是指在一个页面上展示同一个级别的分类模块。模块由标题文案和图像组成，图像可以是照片，也可以是图标，如图1-12所示。列表型的首页更方便点击操作，上下滑动也可以查看更多的内容。图1-12 列表型首页1.5.2 图标型
当首页包含几个主要的功能时，可以采取图标的形式进行展示，如图1-13所示。图标型的首页最好是在第一屏展示完整，并将点击做到最简单。图1-13 图标型首页1.5.3 卡片型
在遇到操作按钮、头像和文字等信息比较复杂的情况时，可以选用卡片型首页方式。卡片型首页能让分类中的按钮和信息紧密联系在一起，让用户一目了然，同时能还有效地加强内容的点击性，如图1-14所示。图1-14 卡片型首页1.5.4 综合型
电商类产品模块的表现方式比较多，有图标形式也有卡片形式等。如何才能让多块内容在页面中显示得清晰易读，这是对设计师能力的考验。综合型的首页设计要特别注意分割线和背景颜色的区分不能太过明显，选择比较淡的分割线和背景色来区分模块即可，因为要保证页面模块的整体性，如图1-15所示。图1-15 综合型首页1.6 个人中心页
在App中，个人中心页又称为“我的”页面，通常设计在底部菜单栏的最右侧。社交应用中，个人中心有两种角色的划分，一个是自己的主页面，还有一个是他人的中心页面。自己的个人页面可以自己进行编辑，而他人的页面是供用户关注或进行私信交流的。所以，个人中心页与其他页面在功能上需要有场景区分。
个人中心页主要由头像、个人信息和内容模块组成，通常会采用头像居中对齐的方式进行设计，目的是为了体现当前页面的信息都与本人有关。头像一般会采用圆形，因为这样看起来更为协调，同时画面也会显得更为饱满，如图1-16所示。图1-16 居中对齐的个人中心页
还有一种设计是以头像居左对齐为主，通常在信息比较多的情况下会采用这种设计，不仅能节省空间，同时也能让内容在一屏上展示完整，如图1-17所示。图1-17 头像居左对齐的个人中心页
在社交应用中，更多的是要凸显人与人的关系，所以个人中心“关注”和“粉丝”的数量是两个非常重要的信息。设计时应该着重凸显数字，体现个人在群体中的价值，如图1-18所示。图1-18 社交应用需要凸显数字的价值1.7 列表页
在使用软件搜索或点击分类查找后会出现结果页面。结果页面通常会以列表的形式来体现，包括单行列表和双行列表两种，展示的内容为“图片+名称+介绍”。另外，还可以用时间轴和图库的形式来设计列表页。列表页的设计虽然简单，但却困扰着不少设计师。总体而言，设计列表页时，需要遵循这些原则：留白空间要张弛有度，且要有亲疏之分；对齐的方式要规整；粗细元素的组合要有节奏感；需要重点突出的元素的颜色要明亮；列表的层次感要分明；在用虚实方式进行结合设计时，要保证实的对象在前，虚的对象在后。1.7.1 单行列表
大多数消费类产品的结果页面都会以单行列表的形式进行展示，左边为图，右边为文字信息、评分和价格等，这样的展示方式易于用户阅读，如图1-19所示。图片能够诱导用户进行点击，文字则用来解释商品。图1-19 单行列表页1.7.2 双行列表
双行列表页的表现形式更加节省空间，每个卡片的排布方式为上面是图片下面是文字，可以让页面显得更为饱满，如图1-20所示。图1-20 双行列表页1.7.3 时间轴
为了加强内容的前后时间关系，通常会使用时间轴的方式来设计列表页，这样的表现形式能够更好地凸显每条信息之间的关系，让用户阅读起来更有条理性，如图1-21所示。时间轴列表页的展示方式为左边是时间轴上各节点，右边是与时间节点对应的内容。图1-21 时间轴列表页1.7.4 图库列表
图库列表页主要出现在相册或图片编辑类App中，其中相册的图库列表页有文档和图片平铺两种显示方式。为了让分布更为均匀规整，图片通常会采用正方形的形式进行排列，如图1-22所示。图1-22 图库列表页1.8 播放页面
播放页面包括音乐播放页、视频播放页和音频播放页。在音乐类App中，通常会将歌手或CD的大图居中对齐放在中上方，下方摆放可操作性的按钮，如图1-23所示。图1-23 音乐播放页
在视频播放页中，为了增强用户的易用性，通常会采用两种播放方式：一种是在信息流或详情页面中直接预览；另外一种是全屏预览视频，如图1-24所示。前者在内容页面中进行播放是为了加强界面的可操作性，例如选集、点评和分享等功能，而全屏播放视频的目的是让用户体验更舒服、更沉浸。图1-24 视频播放页1.9 详情页
详情页是整个App中产生消费的页面，页面中的内容比较丰富。在阅读类App中，详情页主要以图文信息为主，相对来说更加注重文字的可读性，所以会选择比较大的字号来突出标题和内容，如图1-25所示。图1-25 阅读类App的详情页
在电商类应用中，详情页的主要目的是引导用户去购买产品，所以购买的按钮会一直呈现在界面的顶部，方便用户购买商品，如图1-26所示。图1-26 电商类应用的详情页1.10 可输入页面
在社交软件中，注册登录页面是必不可少的，这类页面的设计务必要做到易用简便。注册登录页要考虑唤起键盘的时候文字信息会不会被遮挡，输入框的宽度是否易于操作，文字提示是不是达到最精简程度等。例如有些输入框显示的提示文字是“请您输入邮箱”，其实只需要提示“邮箱”两个字就足够了，所以注册登录页的设计在注重可操作性的同时一定要注意文字的表达是否言简意赅，如图1-27所示。图1-27 注册登录页面
在发布信息内容的时候会出现相关的内容填写页面，这种页面很注重类别的分组，例如将图片分为一组，货号和批发价分为一组，将内容有条理地进行分组等，可以减少用户的填写压力，如图1-28所示。在分类比较多的情况下，选用的背景和分割线的颜色不宜太重，否则会让页面显得琐碎不堪。图1-28 发布信息内容的填写页面1.11 实战：两步打造炫酷界面
我们经常可以在App中看到一些配色很炫酷，图形又很复杂的界面。这类界面中的图形大部分都有规律可循，只要掌握了规律，制作起来就比较简单了。1.11.1 绘制基础图形
01 启动Photoshop CC 2017，按【Ctrl+N】组合键新建一个文件，将【文档类型】设置为【画板】，将【画板大小】设置为【iPhone6（750，1334）】，如图1-29所示。
试读结束[说明：试读内容隐藏了图片]