UI设计精品必修课
常丽 李才应
前言
用户体验（UX）设计师
真正的UI设计师，都要经历用户研究、竞品分析、产品定位、方案制订、原型制作，还有可用性测试这些过程，而不仅仅是单纯的界面设计。
技法是基础，但要继续提升还需要很多复合型的成长，包括对产品、交互、开发的理解，沟通、推动的能力，对数据的敏感性，对品牌、创意的认知，对用户研究方法的认知。
1.1 UI设计概念
[插图]图1-1 UI设计相关岗位及流程
视觉UI设计，又被称为图形用户界面（Graphical User Interface，简称GUI，又称图形用户接口），主要解决软件产品风格，例如商务风的、女性化的等，对图标及元素进行尺寸及风格上的美化，在产品的功能辨识性及控件统一性、美观性上进行设计。
交互UI设计，又被称为IxD（Interaction Design的缩写），是定义、设计人造系统的行为的设计领域，主要解决页面跳转逻辑、操作流程、信息架构、功能页面布局、事件反馈、控件状态等问题。
用户体验设计，又被称为UXD（User Experience Design），是贯穿于整个设计流程，以调研挖掘用户真实需求，认识用户真实期望和内在心理及行为逻辑的一套方法。用户体验设计是使用数据建模测试等手法来辅助提升软件产品的易用性、用户黏性和用户好感度的一种综合工作方法。
1.2 UED团队的组成
互联网公司的UED团队组成成员如下:
• UI设计师：User Interface Designer。
• 交互设计师：Interaction Designer。
• 视觉设计师：Visual Designer。
• 用户研究员：User Researcher。
• 用户体验设计师：User Experience Designer。
• 产品经理：Product Manager。
• 项目经理：Program Manager。
• 前端工程师：Front End Developer。
• 原型架构师：UI Prototyper。
• 内容设计师：Content Designer。
• 运营设计师：Operations Designer。
• UI设计师：User Interface Designer。
• 交互设计师：Interaction Designer。
• 视觉设计师：Visual Designer。
• 用户研究员：User Researcher。
• 用户体验设计师：User Experience Designer。
• 产品经理：Product Manager。
• 项目经理：Program Manager。
• 前端工程师：Front End Developer。
• 原型架构师：UI Prototyper。
• 内容设计师：Content Designer。
• 运营设计师：Operations Designer。
1.3 UI设计师职业发展规划
1. 新手UI设计师熟悉操作基本的UI绘制软件，如Photoshop、Adobe Illustrator、Sketch和AdobeXD等，能按照产品交互提供的线框图绘制UI视觉；能按照功能绘制相对的图标，知道图标的尺寸规范、配色统一性等，能很好地诠释图标的功能寓意；能按照每个平台绘制适合这个平台的UI控件，能准确地切图、标注坐标及字号，能按产品定义绘制界面风格、元素图标，着重软件及视觉表现，辅助资深设计师做一些简单的界面设计。2. 进阶UI设计师在新手UI的基础上，有一定的沟通能力及项目经验，知道如何凸显界面上的信息层级，做出来的界面成熟、层级清晰、有节奏感、赏心悦目；能较好地把握流行趋势，擅长多种风格表达，有一定的自我设计认知及设计偏好；开始研究产品定义及用户体验对界面的影响，能保质保量完成部分模块的界面设计和切图交付；开始着手于更多的软件，如交互动效类、交互线框原型类的软件的探索及使用。
3. 高级UI设计师能够独立完成落地一个软件产品的整体设计，设计出符合此产品风格，且兼顾当下UI流行趋势的设计；经历过App、网页、运营、PC、平面视觉等多种项目，能独立完成产品从0到1的线框原型，熟悉各种UI设计规范；其本身除了视觉设计，还有交互动效、3D表现、运营插画、HTML5、CSS3等各种附加技能。4. 资深UI设计师除了能很好地完成软件的整体设计外，还能很好地与客户及产品经理、总监、程序员沟通，理解产品需求，对软件整体框架、交互操作流程有整体认识，而不仅仅以好看不好看作为一个产品UI设计的评判标准；会按公司能力和项目时间，合理地调配设计时间、资源并输出方案；会竞品分析，会多种用户体验调研手法来佐证自己的设计，会加入自己项目的后续上线测试及迭代中，懂得使用数据及调研驱动设计升级，熟悉程序开发框架。
5. 首席UI设计师把握公司产品的整体设计方向，深入了解公司业务流程，订立设计标准及规范，主要是视觉建议UI规范文档，做出公司产品强有力传播价值的设计风格；参加UX、UI方面展会论坛，实现公司设计价值输出。6. UI设计总监对接客户及公司高层，协调公司的设计资源，管理项目资源，建设设计团队，积极推动项目进展，及总结报告向高层及客户汇报。
竖向发展的UI设计师技能如下。
1）UI视觉设计。
2）产品交互架构。
3）用户体验方法。
4）产品项目管理。
5）代码框架设计。
6）运营插画设计。
7）动效原型表现。
8）数据调研分析。
1）UI视觉设计。
2）产品交互架构。
3）用户体验方法。
4）产品项目管理。
5）代码框架设计。
6）运营插画设计。
7）动效原型表现。
8）数据调研分析。
[插图]图1-3 UI设计师技能
2.1 UI的风格演变
未来：以3D空间UI为导向的，全息立体VR、AR虚拟现实，现实增强。
3.1 UI设计使用的软件
首先是UI视觉设计软件，Photoshop、Illustrator、Sketch和Adobe XD等是主流的UI设计软
交互软件有Axure、Xmind、After Effect、Keynote和墨刀
[插图]图3-3 交互线框跳转设计软件
3.2 UI项目资源管理
[插图]图3-4 UI项目资源管理
3.3 产品开发项目流程
正常的互联网产品研发分为5个阶段。①产品调研阶段→②数据分析阶段→③产品设计阶段→④设计开发阶段→⑤上线运营阶段
[插图]图3-5 互联网产品研发的5个阶段[插图]图3-5 互联网产品研发的5个阶段（续）
第4章 UI设计的20个通用原则
UI设计的20个通用原则如下。1. 明确你的用户群首先要明确：谁是你的用户群？不同阶层、不同年龄的用户在使用不同的产品时都有相对的风格偏好，所以必须有针对性地设计。2. 界面要清晰
清晰度是界面设计中第一步，也是最重要的工作，要让用户第一眼就能识别出图标和控件的功能。让用户使用它时，能预料到将发生什么，并且与之交互完成自己的操作任务。另外，界面中使用的图片也要清晰不变形，背景元素不要干扰阻挡功能。
3. 交互性
优秀的界面能够让用户高效地完成操作和任务，减少出错率，增加易用性。优秀的界面应符合人类的现实世界的操作逻辑，以减少用户的学习成本。
4. 保持用户的注意力
谨记屏幕整洁能够吸引注意力的重要性。
5. 让用户掌控界面
保证界面处在用户的掌控之中，让用户自己决定系统状态，功能区分合理，适当提示引导，破坏性操作前进行用户提示，让用户可以随意地在可操作范围内前进或返回，并随时告知用户所在位置。
6. 每个屏幕需要一个主题
如果一个页面上非要有多个焦点，可以使用激活焦点、屏蔽其他焦点的方法。
7. 区分元素及事件和动作的主次
使用尺寸、距离、颜色、表现形式、对比等手法，区分界面元素的信息层级，让主要元素醒目。用适当的图形语言提示可操作激发的事件，在完成主要动作后，再激发后续的次要动作流程。
8. 自然过渡及跳转
对还未操作完毕的流程，需要提示进度、完成度、等待动画提示等，不要让用户不知所措，给其自然而然继续下去的方法，以达成操作任务目标。
9. 符合用户期望
人总是对符合期望的行为最感舒适，因此在用户操作后应当给予其相应的反馈。在设计的时候也应该遵循用户认知去设计元素，比如它看起来像个按钮，就要具有按钮的功能。需要等待的界面，也需要提供进度和LOADING，而不是没有反馈。
10. 强烈的视觉层次感
如果要让屏幕的视觉元素具有清晰的浏览次序，那么应该通过强烈的视觉层次感来实现。明确的视觉层级，考虑每一个元素的视觉重量，比如重要的信息文字，需要放大、清晰、高亮显示，不重要的元素需要缩小、弱化显示。视觉层次感不明显的话，用户不知道哪里才是目光应当停留的重点，显得页面没有逻辑，不知道阅读界面的顺序。
11. 减轻用户的认知压力
使用方位、间距和功能相似性分组来组织界面功能元素，使用户可以使用联想和识别来确定功能，减轻用户认知记忆负担，不用多琢磨元素间的关系。
12. 使用合适的色彩
色彩很容易受环境影响而发生改变，要考虑到界面的长时间阅读，或者重要提示用醒目色彩作为引导。但不要只用色彩区别，例如对和错的表示，红绿色盲就分辨不了，还需要配合√和×的造型一起来设计。背景色要和文字及前景元素进行区分，使用色彩弱化调和不重要的元素。
13. 恰当的展现
每屏的尺寸有限，只展现必需的内容，其他内容可以放到下一屏，或者隐藏折叠。在首屏适当提示，让用户可以按照你设计的步骤去查看信息，使你的界面交互逻辑更清晰。
14. 提供“帮助”选项
对初次使用界面的用户，提供帮助及下一步等新手提示。在有困惑的位置，恰当地出现提示，确保用户能顺利地使用界面，并且在操作中受到指导并学会操作。
15. 预先提示
在发生不可逆操作，或者破坏性操作之前，需要提示用户，让用户确认后再执行不可逆操作。在破坏性操作发生后，如用户想反悔，如有必要，提供用户反悔渠道，如后台服务渠道取回等。
16. 功能符合业务逻辑
如果把线下业务功能搬到线上来，我们应该观察现有的行为和设计，提炼相应的功能和设计，合理地搬到软件中去，解决现存的问题。
17. 多涉猎设计之外的知识
视觉、平面设计、排版、文案、信息结构以及可视化、用户体验手法、调研手法、交互动效、运营设计、插画设计、3D表现、代码框架等，设计师对这些知识都应该有所涉猎或者比较专长，要从中学习有价值的知识，以此来提高你的综合工作能力。
18. 实用性
19. 检查错误
设计师要尽可能协助程序员和测试人员检查和清除程序中的错误和BUG，测试各个控件的状态，事件是否准确触发，文字是否可识别，图标和细节是否准确还原设计稿，操作流程是否能成功准确地完成，参与Beta版本的测试是消减错误的最好方法。
20. 简约设计
简约设计不仅仅是一种流行趋势，从用户体验上看，简约的界面可以去掉很多无关的干扰信息，使UI更具易用性。
5.1 图标的概念及优点
使用图标的优点如下。1）易于被快速识别，便于记忆，图形直观性产生国际通用性，如男女厕所符号。2）信息量大，图标具有形、意、色等多种刺激，传递的信息量大，抗干扰能力强。3）图标大小可调，表示视觉和空间概念，便于布局，美观。
5.2 图标的设计规范
图标设计的标准：功能寓意的识别性、风格的统一性是一个图标设计好坏的重要标准。
图标的七个一致性：线宽一致，体积感留白一致，倒角圆角一致，角度一致，色彩一致，复杂度一致，光影一致。
图标的常见风格种类：像素图标、剪影图标、2.5D图标、拟物图标、扁平图标、MEB风格图标、线性图标、3D图标、手机系统主题图标、默认缺省提示图标、运营节气皮肤图标、微质感图标、快捷入口图标、运营入口图标、节日装饰性图标等
[插图]图5-3 图标的常见风格种类
图标结构色彩复杂性的定位：一般来说，页面上空间大、图标少的话，图标可以设计得复杂且尺寸大一些，如全屏导航类或者缺省提示类；反之，如果在一个非常密集的空间里，图标可以画得小一些，简洁一些，如个人中心、侧滑列表等。
评价一套图标的好坏的标准如下。
整体统一性。
图标识别性。
颜色舒适度。
创意新颖性。
质量完稿度。
符合产品调性。
整体统一性。
图标识别性。
颜色舒适度。
创意新颖性。
质量完稿度。
符合产品调性。
5.3 手机系统及App图标设计规范
手机系统主题图标一套，包括拨号、短信、浏览器、日历、时钟、邮件、计算器、联系人、音乐、视频、图库、相机、文档、下载、应用中心、设置、天气、个性化中心、游戏中心、录音、地图、便签、画板、安全中心、阅读和系统升级这些功能
因为安卓手机系统有不同的平台，每个平台和型号的图标尺寸不同，所以如果没有确定平台的话，可以先做尺寸256×256px的
[插图]图5-9 安卓手机系统尺寸
Google建议的图标规范如下。1）图标的造型尽量以圆和直线的尺规绘图标准去布尔生成造型，造型以体正饱满识别性强、体积感一致为佳，随意的、不规则的、粗细不一的图标设计为差，如图5-11所示。[插图]
2）图标的光影尽量方向一致、风格一致、阴影羽化度一致，如图5-12所示。[插图]
3）图标的角度一致、透视一致，如图5-13所示。[插图]
4）图标的配色方案一致，如图5-14所示。[插图]
5.4 iOS图标规范
iOS图标有一套栅格系统，一共有3个圈，建议主要图形不要超出最外圈，主要设计在靠外的2个圈中进行，核心圈可以做挖空或者核心造型设计，以便于所有第三方App放在主菜单中，其大小、体积感、辨识度等与整体和谐。
如图5-16所示为iOS图标栅格系统。[插图]图5-16 iOS图标栅格系统
[插图]
iOS的图标尺寸模板如图5-17所示。[插图]图5-17 iOS的图标尺寸模板
6.1 App的概念
https://www.iosicongallery.com/
6.3 App产品定位
产品定位（Product positioning）采用五步法。五步法又称之为4W1H法，即
Who：谁用？谁需要为谁服务？
What：满足这个用户哪方面的需求？
Why：市场目前的成熟情况？用户对你的品牌产品的感知？
Which：你的商品的核心价值点？与别的产品的不同及优势？
最后是How；用户如何获得你的产品？如何运营你的产品？
Who：谁用？谁需要为谁服务？
What：满足这个用户哪方面的需求？
Why：市场目前的成熟情况？用户对你的品牌产品的感知？
Which：你的商品的核心价值点？与别的产品的不同及优势？
最后是How；用户如何获得你的产品？如何运营你的产品？
[插图]图6-3 4W1H产品定义法解决的问题
1）目标市场定位（Who），即明白为谁服务，满足谁的需要？
目标市场定位策略： 无视差异，对整个市场仅提供一种产品；
重视差异，为每一个细分的子市场提供不同的产品； 仅选择一个细分后的子市场，提供相应的产品。
2）他们有些什么需要？产品需求定位（What），即满足谁的什么需要（What）？产品的价值由产品功能组合实现，不同的顾客对产品有着不同的价值诉求。这一环节需要调研，获得这些需求可以指导新产品的开发和产品的改进。
3）企业产品测试定位（IF），考察消费者对产品概念的理解、偏好、接受（Why）？
目标市场定位策略： 无视差异，对整个市场仅提供一种产品；
重视差异，为每一个细分的子市场提供不同的产品； 仅选择一个细分后的子市场，提供相应的产品。
2）他们有些什么需要？产品需求定位（What），即满足谁的什么需要（What）？产品的价值由产品功能组合实现，不同的顾客对产品有着不同的价值诉求。这一环节需要调研，获得这些需求可以指导新产品的开发和产品的改进。
3）企业产品测试定位（IF），考察消费者对产品概念的理解、偏好、接受（Why）？
这一环节的测试需要从用户的心理层面到行为层面来深入研究，以获得用户对产品的接受情况。 考察产品概念的可解释性与传播性； 同类产品的市场开发度分析； 产品属性定位与消费者需求的关联分析； 对消费者的选择购买意向分析。4）产品差异化价值点定位（Which），做定位之前，第一步工作就是分析竞品，研究它们的价值点在哪里。通过分析竞品的价值点，就有可能发现一些有市场需求的价值。比如可口可乐的定位是“传统的、经典的、历史最悠久的”价值定位，百事可乐就把自己定位于“年轻的、专属于年轻人的”价值定位。 产品独特价值特色定位； 从产品解决问题特色定位； 从产品使用场合时机定位； 从消费者类型定位； 从竞争品牌对比定位； 从产品类别的游离定位、综合定位等。5）营销组合定位（How）。
营销组合定位即如何满足需要（How），它是进行营销组合定位的过程。即产品（Product）、价格（Price）、渠道（Place）、宣传（Promotion），再加上策略（Strategy），所以简称为“4P’s”营销理论。 产品价格； 渠道策略； 推广策略； 促销策略； 展示策略。
6.4 App的产品需求PRD简化模板
PRD（Product-Requirement-Document，产品需求文档）按产品复杂度，从二三十页到上百页不等，内容如下。第一部分：文档头，包括封面、撰写人、撰写时间、修订记录页、目录等。第二部分：产品概述、名词说明、产品目标、项目周期阶段和时间节点、产品风险等。第三部分：使用者需求、目标用户、场景描述、功能优先级等。第四部分：业务模块、功能总览表、详细功能、产品主要模块的流程图等。第五部分：功能线框、BETA测试需求、UC用例编写、非功能需求等。第六部分：运营计划、推广和开发经费人员预估、上线下线标准等。
[插图]图6-4 PRD产品需求文档需要内容
6.5 竞品分析
所谓SWOT分析，即基于内外部竞争环境和竞争条件下的态势分析，就是将与研究对象密切相关的各种主要内部优势、劣势和外部的机会和威胁等，通过调查列举出来，并依照矩阵形式排列，然后用系统分析的思想，把各种因素相互匹配起来加以分析，从中得出一系列相应的结论，而结论通常带有一定的决策性。
S（Strengths）是优势，W（Weaknesses）是劣势，O（Opportunities）是机会，T（Threats）是威胁。
按照企业竞争战略的完整概念，战略应是一个企业“能够做的”（即组织的强项和弱项）和“可能做的”（即环境的机会和威胁）之间的有机组合。
[插图]图6-5 SWOT分析法
竞品分析可以从战略层、范围层、结构层、框架层及表现层五个层面去分析。
[插图]图6-6 用户体验五个层面
[插图]图6-8 平安好医生结构层分析
6.6 用户画像
在互联网领域，用户画像数据可以包括以下内容（图6-9）。
1）人口属性：包括性别、年龄等人的基本信息。
2）兴趣特征：浏览内容、收藏内容、阅读咨询、购买物品偏好等。
3）消费特征：与消费相关的特征。
4）位置特征：用户所处城市、所处居住区域、用户移动轨迹等。
5）设备属性：使用的终端特征等。
6）行为数据：访问时间、浏览路径等用户在网站的行为日志数据。
7）社交数据：用户社交相关数据。
1）人口属性：包括性别、年龄等人的基本信息。
2）兴趣特征：浏览内容、收藏内容、阅读咨询、购买物品偏好等。
3）消费特征：与消费相关的特征。
4）位置特征：用户所处城市、所处居住区域、用户移动轨迹等。
5）设备属性：使用的终端特征等。
6）行为数据：访问时间、浏览路径等用户在网站的行为日志数据。
7）社交数据：用户社交相关数据。
[插图]图6-9 用户画像
现在基于大数据进行的AI算法，推送内容的App越来越多，我们要为用户画像做标签，分为固有属性、推导属性、行为属性、态度属性、测试属性。
6.7 用户需求
可以通过以下方式获得用户需求。
1）公开信息：包括新闻（百度新闻、科技媒体、微信搜索）、大众评论（微博、微信、知乎）、相关领域的网站和论坛、各种互联网分析网站（如艾瑞咨询、企鹅智酷等）。
2）用户调查：在线问卷（问卷星等）、线下问卷，还可以委托代理公司等。
3）用户访谈：找到目标用户中较高质量的进行跟踪访谈。高质量的定义一般是在领域内资深、对产品体验要求高、有话语权，以及擅于表达的行业专家、同类产品从业者。与他们访谈可以获得更落地、更真实以及更深入的一些信息。
4）产品本身的反馈渠道：比如种子用户群，投诉邮件，App开发博客下的评论及商店的评论。
5）用友盟手机助手等数据软件埋点产品内部，获取用户的使用行为数据后，分析用户的喜好和偏重。
6）分析竞品及公司战略目标获取，比如竞品是否有没满足用户的地方，或者最近的产品趋势等。
1）公开信息：包括新闻（百度新闻、科技媒体、微信搜索）、大众评论（微博、微信、知乎）、相关领域的网站和论坛、各种互联网分析网站（如艾瑞咨询、企鹅智酷等）。
2）用户调查：在线问卷（问卷星等）、线下问卷，还可以委托代理公司等。
3）用户访谈：找到目标用户中较高质量的进行跟踪访谈。高质量的定义一般是在领域内资深、对产品体验要求高、有话语权，以及擅于表达的行业专家、同类产品从业者。与他们访谈可以获得更落地、更真实以及更深入的一些信息。
4）产品本身的反馈渠道：比如种子用户群，投诉邮件，App开发博客下的评论及商店的评论。
5）用友盟手机助手等数据软件埋点产品内部，获取用户的使用行为数据后，分析用户的喜好和偏重。
6）分析竞品及公司战略目标获取，比如竞品是否有没满足用户的地方，或者最近的产品趋势等。
[插图]图6-10 KANO模型
根据以上KANO模型，5个评价指标如下。
1）魅力属性：让用户感到惊喜的属性，如果不提供此属性，不会降低用户的满意度，一旦提供魅力属性，用户满意度会大幅提升。
2）期望属性：如果提供该功能，客户满意度提高；如果不提供该功能，客户满意度会随之下降。
1）魅力属性：让用户感到惊喜的属性，如果不提供此属性，不会降低用户的满意度，一旦提供魅力属性，用户满意度会大幅提升。
2）期望属性：如果提供该功能，客户满意度提高；如果不提供该功能，客户满意度会随之下降。
[插图]
3）必备属性：这是产品的基本要求，如果不满足该需求，用户满意度会大幅降低。但是无论必备属性如何提升，客户都会有满意度的上限。
4）无差异属性：无论提供或不提供此功能，用户满意度不会改变，用户根本不在意有没有这个功能。这种费力不讨好的属性是需要尽力避免的。
5）反向属性：用户根本都没有此需求，提供后用户满意度反而会下降。
4）无差异属性：无论提供或不提供此功能，用户满意度不会改变，用户根本不在意有没有这个功能。这种费力不讨好的属性是需要尽力避免的。
5）反向属性：用户根本都没有此需求，提供后用户满意度反而会下降。
6.8 卡片分类法确定App功能分类
卡片分类法主要是用于了解用户对于网站、App导航和架构的心理模型，如图6-12所示。一般形式分为两种：开放式和封闭式。
开放式卡片分类：为测试用户提供带有App功能及内容但未经过分类的卡片，让他们自由组合并且描述出摆放的原因。开放式卡片分类能为新的或已经存有的网站和产品提供合适的基本信息架构。封闭式卡片分类：为测试用户提供App建立时已经存有的分组，然后要求将卡片放入这些已经设定好的分组中。封闭式卡片分类主要用于在现有的结构中添加新的内容或在开放式卡片分类完成后获得额外的反馈。例如：飞机、公共汽车、火车、草地、青蛙、叶子。封闭式分类法：提供自然和机械两个分类，让用户把内容归入分类下
[插图]图6-13 封闭式卡片分类法
6.9 开发版本的功能优先级
我们可以用几个指标来分析功能是否需要优先在当前版本开发。
1）功能开发成本（难易度，包括时间成本及技术成本、人员成本、服务器成本）。
2）使用用户数量（有多少人需要这个功能，如果只是2％的用户，这个功能可以靠后）。
3）用户感知度（这个功能修改后，用户是否能及时发现，不容易感知的功能可以靠后）。
4）功能使用频率（如果是使用频率很高的常用功能，可以提高优先级）。
5）功能的独特性（如果这个功能非常有核心竞争价值，技术壁垒及垄断性可以提高优先级）。
6）竞品是否具备（竞品如果具备，可以提高优先级）。
7）功能需求急迫程度（紧急的功能可以提高优先级，比如数据安全漏洞、赶热点等）。
8）用户兴奋性需求（这个功能增加以后，对用户非常具有吸引力，或者变现转化力）。
1）功能开发成本（难易度，包括时间成本及技术成本、人员成本、服务器成本）。
2）使用用户数量（有多少人需要这个功能，如果只是2％的用户，这个功能可以靠后）。
3）用户感知度（这个功能修改后，用户是否能及时发现，不容易感知的功能可以靠后）。
4）功能使用频率（如果是使用频率很高的常用功能，可以提高优先级）。
5）功能的独特性（如果这个功能非常有核心竞争价值，技术壁垒及垄断性可以提高优先级）。
6）竞品是否具备（竞品如果具备，可以提高优先级）。
7）功能需求急迫程度（紧急的功能可以提高优先级，比如数据安全漏洞、赶热点等）。
8）用户兴奋性需求（这个功能增加以后，对用户非常具有吸引力，或者变现转化力）。
[插图]图6-15 App产品生命周期
7.1 色彩的概念
我们肉眼所见的颜色，分为无彩色和有彩色两种。红外线、紫外线、其他有色光不在讨论范畴内。无彩色：即我们通常所说的黑白灰。有彩色：即我们通常所说的除黑白灰外，赤、橙、黄、绿、青、蓝、紫等各种深浅不一，或者混合的彩色。
色彩的术语如下。 色相（Hue）：即各类色彩的相貌称谓。 色彩饱和度（Saturation）／色度（Chroma）：颜色的整体强度或者亮度。 明度（Value）：色彩的明暗程度。 色调（Tone）：是纯色和灰色组合产生的颜色，也可以说是一幅画中画面色彩的总体倾向。 色度（Shade）：是纯色和不同比例的黑色混合产生的颜色，即色彩的纯度。 色彩（Tint）：是纯色和白色混合产生的颜色。一种色相（Hue）通过加入不同比例的白色能够产生不同的颜色。颜色的三要素，由色相、明度和饱和度（彩度）组成。
色相是指色彩的相貌，色相被用来区分颜色。根据光的不同波长，色彩具有红色、黄色或绿色等性质，这被称之为色相。具体参考色相环及其他色彩模型，如图7-1所示。[插图]图7-1 色相环及色值
明度是色彩从亮到暗的明暗程度。黑色的绝对明度被定义为0（理想黑），而白色的绝对明度被定义为100（理想白），其他系列灰色则介于两者之间。色调：我们把颜色从白到黑等分为9等分或者N个层级，高明度的1／3称为亮调或高调，中明度的1／3称为中调，低明度的1／3称为暗调或低调。长调和短调：我们把跨度大于等于50％的配色称为长调，跨度小于等于30％的配色称为短调。不同的色彩调子组合可以体现不同的画面情绪。
[插图]
[插图]图7-3 长短调视觉情感
[插图]图7-4 彩度饱和度模型
高纯度色相加白或黑，可以提高或减弱其明度，但都会降低它们的纯度。如加入中性灰色，也会降低色相纯度。根据色环的色彩排列，相邻色相混合，纯度基本不变（如红黄相混合所得的橙色）。对比色相混合，最易降低纯度，以至成为灰暗色彩。色彩的纯度变化，可以产生丰富的强弱不同的色相，而且使色彩产生韵味与美感。
[插图]图7-5 原色和衍生色
[插图]图7-7 复色
[插图]图7-8 4种配色方案
同类色：30°；邻近色：60°；对比色：120°；互补色：180°。
[插图]图7-9 更多的配色方案
关于色彩的情感和冷暖，大家要注意的一点就是，不同地区的人对颜色有不同的理解，在中国，红色表示喜庆，如发红包。而在西方红色代表危险，如流血。在国外，股票涨是绿色，跌是红色。所以，大家在做设计的时候最好了解目标用户对色彩的理解和喜好。
[插图]
[插图]图7-11 色彩情感模型
[插图]图7-12 各个不同国家的人对色彩的喜好
7.2 App配色概念
[插图]图7-13 冷暖色模型
一套App配色基本由背景色、主题色、辅助色、点睛色4种色调组成。1）背景色：分为浅色基地（白基）、深色基地（黑基）、彩色基地（灰基）。2）主题色：主题色是由除了基地背景色外占最多体积的色调组成，主色调也可由几个颜色混合的渐变色组成。3）辅助色：辅助主色，使画面细节更丰富，辅助色也可由呼应主色调内容的图片辅助。4）点睛色：引导阅读，装饰页面，让页面的元素信息层级井然有序。
优秀的UI界面，每个页面上功能和内容都会分主次信息层级，凸显重要的内容，弱化不重要的内容，好的UI App页面应该在第一时间让用户看到自己想看到的内容，节约用户时间。在用户使用过程中，用色彩和图标及元素摆放位置，很好地引导用户实现在这个软件上想要实现的操作任务和目的。
[插图]图7-18 区分元素优先级和功能分类的手法
格式塔原则-接近性（Proximity）：物体间距影响我们对它们关系的感知，距离较近的物体看起来组成了一个整体，距离较远的则不是。格式塔原则-相似性（Similarity）：如果不同元素在形状、颜色、阴影或其他特征上彼此相似，那么这些相似的元素看起来就自然组合为一组。
格式塔原则-连续性（Continuation）：格式塔心理学上所指的连续性是指对线条的一种特殊知觉，人们在知觉过程中往往倾向于使知觉对象的直线继续成为直线，曲线继续成为曲线，持续延伸。
格式塔原则-共同命运（Common fate）：之前介绍的格式塔原理都是针对静态图形，而共同命运这一原理则涉及运动的物体，一起运动的物体会被感知为属于一个整体或者彼此相关。
一般UI出方案的时候，会多出几套配色供客户及上级挑选，因为一个App的配色不是单单由UI设计师喜好决定的，其关系到整个公司这条产品线的成败。所以，尽可能在配色完毕后，用投票方法获取得票率最高的方案，或者你们公司谁能拍板听谁的。
[插图]图7-21 单色渐变
[插图]图7-22 双色渐变
[插图]图7-23 浅色渐变
[插图]图7-24 深色渐变
一般电商类App多以橘色、红色、粉色等暖色为主要配色，因为用户群大部分为女性，又需要激发人们的购买欲。但是高端购物App也有很多黑金、黑白冷淡系配色，不是一概而论。一般医疗、科技、旅游类产品以绿色、蓝色为主要配色，但是也有一部分医疗美容产品用粉色，旅游类产品用柠檬黄如蚂蜂窝和飞猪旅行，还有一些民宿类App比如爱彼迎是红色的。
一般音乐类App多以绚紫、紫红为主要配色，也有小部分文艺类的为红白、绿白、黑金为配色。
一般理财类App多以橘色、紫蓝、土豪金、红色或者黑底为主要配色，尽可能不要用绿色，感觉会跌。
一般美食类App多以米黄色、咖啡色、粉红色等烘焙色为主，当然也有一些高端的会用黑金，绿色食品冷链会走蓝绿色路线。
[插图]
8.1 流程图设计
作为制定一项交互设计工作计划的开端，我们可以从探寻以下几个问题开始。1）为什么要做这个功能？（业务目的）2）产品期望得到怎样的成果？（业务目标）
3）谁来使用这个功能？（目标用户）4）他们为什么要使用这个功能？（用户需求、体验目标）5）如何让他们都来使用这个功能？（行为设计）
有序落实交互设计的前期工作计划，主要包括：①分析业务需求→②分析用户需求→③分解关键因素→④归纳设计需求，明确设计策略。
8.2 手绘线框图
App中比较重要的页面有注册、登录、首页、个人中心、设置、导航分类、播放器、各种列表、社交、购物车、照片库、侧滑、搜索、地图、社区、对话框、精品推荐等。
[插图]图8-6 12类常见App页面导航
1）下导航：采用文字加图标的方式展现。一般有3～5个标签，大部分App选用这种导航，优点是可以不迷路地在各个模块中切换，缺点是会分割页面内容，占用一定的底部空间。
2）上导航：优点是用于较多的分类卡片，可以左右滑动，隐藏更多功能，缺点是需要双手操作。
3）舵式导航：优点是可以把常用功能或者重要功能居中醒目显示，缺点是图标数量只能单数。
4）瓦片式导航：优点是简约而不简陋，导航清晰、明显，缺点是进入模块后，要退出才能回到菜单。
5）列表式：优点是可以对内容非常多的数据进行不断加载滑动，缺点是单调容易引起疲劳。
6）弹出菜单：优点是形式新颖、节省空间，缺点是需要猜测和记忆内部功能。
7）瀑布流：优点是图片展示类可以一直下滑，视觉效果好，缺点是要找之前滑过去的图片，需要上下翻很久。
8）卡片翻转：优点是视觉效果好，动感强，缺点是耗损系统资源。
9）侧滑式：抽屉导航指的是一些功能菜单按钮隐藏在当前页面后，单击入口或侧滑即可像拉抽屉一样拉出菜单。这种导航设计比较适合于不需要频繁切换的次要功能，例如对设置、关于、会员、皮肤设置等功能的隐藏。缺点是需要猜测和记忆被隐藏的功能。
2）上导航：优点是用于较多的分类卡片，可以左右滑动，隐藏更多功能，缺点是需要双手操作。
3）舵式导航：优点是可以把常用功能或者重要功能居中醒目显示，缺点是图标数量只能单数。
4）瓦片式导航：优点是简约而不简陋，导航清晰、明显，缺点是进入模块后，要退出才能回到菜单。
5）列表式：优点是可以对内容非常多的数据进行不断加载滑动，缺点是单调容易引起疲劳。
6）弹出菜单：优点是形式新颖、节省空间，缺点是需要猜测和记忆内部功能。
7）瀑布流：优点是图片展示类可以一直下滑，视觉效果好，缺点是要找之前滑过去的图片，需要上下翻很久。
8）卡片翻转：优点是视觉效果好，动感强，缺点是耗损系统资源。
9）侧滑式：抽屉导航指的是一些功能菜单按钮隐藏在当前页面后，单击入口或侧滑即可像拉抽屉一样拉出菜单。这种导航设计比较适合于不需要频繁切换的次要功能，例如对设置、关于、会员、皮肤设置等功能的隐藏。缺点是需要猜测和记忆被隐藏的功能。
10）时间轴：优点是适合时间线发帖打卡性质的页面，缺点是页面记录信息有限，需要点入后查看。
11）数据可视化：优点是适合各种数据图表展示，缺点是耗费空间，并且开发烦琐。
12）自由添加模块：优点是可以让客户自由定义功能模块，缺点是开发麻烦，客户有学习成本。
11）数据可视化：优点是适合各种数据图表展示，缺点是耗费空间，并且开发烦琐。
12）自由添加模块：优点是可以让客户自由定义功能模块，缺点是开发麻烦，客户有学习成本。
线框图一般分为低保真、中保真和高保真。低保真，一般文字加简单的色块线框，标示出大概布局和功能即可，手绘或者Axure自带功能即可。中保真，基本加上了图标的形态，尺寸也比较精确，一些隐藏页面和操作提示会在旁边写明，拥有了简单的逻辑跳转。高保真，基本和开发出来的上线版本80％～90％类似了，有细腻的跳转动效，或者交互操作反馈，基本就是没连数据库的ALPHA版。
[插图]图8-8 常见App交互跳转手势
9.1 App UI规范
App UI规范，一般头部写明App名字，适配图片尺寸，一般以1倍dp或者2倍px来做规范
1. 标准色信息层级（图9-2）[插图]
2. 标准字信息层级（图9-3）[插图]
[插图]
3. 图标尺寸信息层级和功能图标分类（图9-4）[插图]
4. 控件尺寸和控件状态（图9-5）[插图]
5. 页面尺寸（图9-6）[插图]
[插图]
9.2 苹果iOS系统App的切图适配
一套完整的App通常会有很多张切图，iPhone需要1x、2x、3x图档，Android需要至少3种——hdpi、xhdpi、xxhdpi。
iOS需要给到的程序员的切片资源常见为2套：2x切图（以750px为宽度尺寸基准切图）、3x切图（以1242px为宽度尺寸基准切图）
坐标标注图，一般UI的标注以750px 2倍图为坐标标注图（以750px为宽度尺寸基准标注）。
 图9-7 苹果iOS屏幕适配表
图9-8 iOS平台常见的UI画布尺寸 如图9-9所示为单位换算表。
 图9-9 单位换算表，左边是苹果iOS系统，右边是Android系统
和dp系统是程序员把资源进行换算后，他们只要用一套代码比例来管理3个尺寸的素材的一种换算方法。在1倍图的情况下，1dp=1pt=1px；在2倍图的情况下，1dp=1pt=2px；在3倍图的情况下，1dp=1pt=3px。这么换算像素和dp之间的比例，和程序员沟通尺寸和坐标的时候，需要说明这个切片是在几倍图下的。
 图9-10 双平台多分辨率适配优先级方案
一套图适配2个平台多套分辨率。如果iOS和Android都要适配的话，一般先做iOS 750×1334px版，再使用切图工具CUTTERMAN（这是免费软件，官网有下载和教程）切2倍和3倍图。再缩放源文件到720×1280px，再切3套Android，1.5倍、2倍和3倍图。
 图9-11 苹果UI界面尺寸规范  图9-12 苹果UI图标尺寸规范
在750px 2倍图的切片尽量为偶数，标注像素和间距尽量也为偶数，如果非要有奇数，请保证左边的像素为偶数，奇数放在右边。
图标和控件的切片的图片格式为24位带8位透明通道的png，少数BANNER类和运营类图片可以为png，动画尽可能用png序列帧，尽可能不要使用GIF。 iOS图片命名规范是，图片资源需要备有1倍图、2倍图、3倍图，3倍图命名规则为添加后缀@Nx；2倍图命名规则为添加后缀@2x。例如，1倍图：icon.png，2倍图则为icon@2x.png，3倍图则为icon@3x.png。 Android目前常见的有3种不同的dpi模式：hdpi、xhdpi和xxhdpi，分别为1.5倍、2倍和3倍。
 图9-13 iOS苹果图标规范示例
苹果启动图标设计1024×1024px、png格式，常见2倍是120×120px，3倍是180×180px，透明的部分补白色。 苹果的字体一般是苹方
[插图]
切片的命名规则为：模块_类别_功能_状态.png，如nav_button_search_normal.png。切片命名规范如图9-15所示。  图9-15 切片命名规范
9.3 Android屏幕适配
Android屏幕适配 1）采用720×1280px的分辨率来进行设计。（设计时，采用偶数值进行设计，方便dp和px的转换。） 2）对于Android，目前基本以720px 2倍图为基础坐标标注图，也有一些公司开始直接做1080px 3倍资源了。 3）首先在720×1280px下进行切图，可以完全适配720×1280px的机型。 4）分别适配1.5倍480×800px、2倍1080×1920px和3倍1080×1092px的图包。
 图9-16 Android屏幕适配尺寸
第10章 七种常见App实例讲解
1）运动健身类App，一般用酷炫的配色，图标比较时尚，以动效为主。
2）医疗类App，以蓝白或者绿白为主，排版要清爽。
3）金融类App，一般以红色、橙色、蓝色、紫色和土豪金为主。
4）音乐类App，一般以马卡龙或者其他炫酷的配色来做。
5）美食类App，一般以嫩黄色、嫩绿色、烘焙色或者粉红色为主。
6）购物类App，以红色、橙色或者黑白为主。
7）旅游类App，以绿色、蓝色为主。
12.1 八种常见的网页设计风格
1）蓝白科技设计风格——多用于官网及科技类企业站
2）女性柔美设计风格——多用于女性类服饰化妆品等网页
3）土豪黑金设计风格——多用于高端奢侈品及盛典聚会类网页
4）中国风设计风格——多用于传统文化元素相关产品网页
5）欧美大色块风格——多用于时尚概念产品相关产品网页
6）日韩小清新风格——马卡龙色系或者绿植系网站适合轻松愉快的产品或者无印良品风格
7）北欧风格——适合高端或者小众追求自我个性表达的产品设计
8）彩虹炫彩风格——适合个性强烈时尚的产品设计
12.2 网页UI规范建立
1）字体和排版方案，包括每个部分的字体类型、尺寸、字重以及具体用法。例如，网页常用8种字体。中文：微软雅黑、黑体、华文细黑、宋体。英文：Arial、Tahoma、Helvetica、Georgia。
2）配色方案，包括每种色彩的具体参数，以及其他可接受的色调，包括背景色、主题色。
3）LOGO，包括它的样式、变体、尺寸以及位置的说明。
4）拼写、关键词的选择、文案的风格。
5）按钮的各个状态和尺寸、社交媒体图片的尺寸等。
6）图片使用规范，包括尺寸色彩、裁剪规则和视觉表现方面的标准。
7）SEO信息，比如可选的标签和关键词。
8）栅格标准（主要用作网页排版和响应式适配）。
9）空间与留白方面的说明（设计的松紧度等）。
10）隐藏状态说明（设计开发中会有疑问的点）。
13.1 网站地图与模块设计
网站地图又名Site Map，网站地图呈现树结构，以主页为树的根节点。网站地图采用树结构的优点是，可以让我们对产品的整体模块和不同栏目、功能单元有一个清晰的认识。网站地图有扁平化模块的，也有纵向深入型和复杂深度型。
网站地图一般分两种，一种是给搜索引擎看的，一种是给用户看的，前者帮助搜索引擎更好地收录你的网站，后者帮助用户更好地了解你的网站整体结构，更快地找到他们想要找的内容。
[插图]图13-1 Web端设计组件分类
13.2 网页常见控件类型
Label（标签）、ScrollView（滚动视图）、ScrollBar（滚动条）、Mask（遮罩）、Button（按钮）、ProgressBar（进度条）、EditBox（输入框）、CheckBox（复选框）、Image（图片）、List（列表）、Menu（菜单）、Navigation（导航）、Tab（选项卡）、Toast（提示）、Alert（警示提示）、Dialog（对话框）、Divider（分割线）、Timepicker（时间选择器）等。各类网页UI控件还会自带样子，我们可以为同样的功能设计多种样式，如时间选择器。
2. 页面操作触发事件按钮属性用于设置当按钮处在普通（Normal）、按下（Pressed）、悬停（Hover）和禁用（Disabled）四种状态。Toast的消息提示分类一共有三种类型：成功类、失败类和常规类。3. 网页端表单的五种操作状态网页端表单的五种操作状态为：标签→输入框→反馈→动作→帮助。
1）标签：提示当前表单是做什么的。
2）输入框：用来输入信息。
3）反馈：用户做了动作之后，界面回馈用户的信息。
4）动作：表单中的按钮，帮助人机操作的按键。
5）帮助：辅助用户了解用户功能的信息。
1）标签：提示当前表单是做什么的。
2）输入框：用来输入信息。
3）反馈：用户做了动作之后，界面回馈用户的信息。
4）动作：表单中的按钮，帮助人机操作的按键。
5）帮助：辅助用户了解用户功能的信息。
4. 反馈信息的类型
1）Push指的是系统的通知，从下到上弹出。
2）Toast自己出现，自己消失，时间只有1秒，文字简短只有一行。
3）Tips是App内部或者网站内部，由顶部往下而来的通知。Tips可以系统关闭，Push一般不能。
4）下拉菜单和边栏，一般采取递进形式，每层级只有一个关键字段信息。
5）Disable状态的提示（可单击状态，用颜色的灰度告诉UI设计人员或者研发人员是不可用的）。
1）Push指的是系统的通知，从下到上弹出。
2）Toast自己出现，自己消失，时间只有1秒，文字简短只有一行。
3）Tips是App内部或者网站内部，由顶部往下而来的通知。Tips可以系统关闭，Push一般不能。
4）下拉菜单和边栏，一般采取递进形式，每层级只有一个关键字段信息。
5）Disable状态的提示（可单击状态，用颜色的灰度告诉UI设计人员或者研发人员是不可用的）。
13.3 网页常见事件
2. 变动事件：当底层DOM结构发生变化时触发
1）load：当页面完全加载后在window上面触发；当所有框架都加载完毕时在框架集上面触发；当图像加载完毕时在<img>上面触发；或者当嵌入的内容加载完毕时在<object>元素上面触发。
2）unload：当页面完全卸载后在window上面触发；当所有框架卸载后在框架集上面触发；或者当嵌入的内容卸载完毕后在<object>元素上面触发。
3）abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上触发。
4）error：当发生JavaScript错误时在window上触发，当无法加载图像时在<img>元素上触发，当无法加载嵌入内容时在<object>内容上触发。
5）select：当用户选择文本框（<input>或<textarea>）中的一个或多个字符时触发。
6）resize：当窗口或框架的大小变化时在window或框架上面触发。
7）scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。
8）当焦点从页面的一个元素移动到另一个元素时，会依次触发下列事件。
focusout：在失去焦点的元素上触发。
focusin：在获得焦点的元素上触发。
blur：在失去焦点的元素上触发。
focus：在获得焦点的元素上触发。
1）load：当页面完全加载后在window上面触发；当所有框架都加载完毕时在框架集上面触发；当图像加载完毕时在<img>上面触发；或者当嵌入的内容加载完毕时在<object>元素上面触发。
2）unload：当页面完全卸载后在window上面触发；当所有框架卸载后在框架集上面触发；或者当嵌入的内容卸载完毕后在<object>元素上面触发。
3）abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上触发。
4）error：当发生JavaScript错误时在window上触发，当无法加载图像时在<img>元素上触发，当无法加载嵌入内容时在<object>内容上触发。
5）select：当用户选择文本框（<input>或<textarea>）中的一个或多个字符时触发。
6）resize：当窗口或框架的大小变化时在window或框架上面触发。
7）scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。
8）当焦点从页面的一个元素移动到另一个元素时，会依次触发下列事件。
focusout：在失去焦点的元素上触发。
focusin：在获得焦点的元素上触发。
blur：在失去焦点的元素上触发。
focus：在获得焦点的元素上触发。
14.2 响应式网站的宽度尺寸
响应式网站的宽度没有固定的尺寸，按照不同的项目开发要求去定，一般是3～5的宽度，用来适配台式机、笔记本式计算机、平板电脑的横屏竖屏和手机的横屏竖屏。建议尺寸：宽度包括480px、600px、840px、960px、1280px、1440px、1600px、1920px
[插图]图14-3 对应的设备网页建议尺寸
http://mediaqueri.es/
14.3 响应式线框图绘制
一般来说，虽然比较优秀的响应式会画手机竖向、手机横向、PAD竖向、PAD横向和PC电脑5种宽度的线框。但是，基础一般是先画完手机和电脑2个版本，其他的在此基础上进行修改即可。
14.4 网页的栅格化设计
CSS Grid Layout是CSS为布局新增的一个模块。网格布局特性主要是针对Web应用程序的开发者，可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义它们的大小、位置以及层级。
[插图]图14-9 网页栅格算法
15.1 企业官网功能模块与布局
1. 企业站设计的常见功能模块 关于我们、公司新闻、门户资讯、服务项目、产品展示、我们的优势。 团队介绍、用户评价、客户案例、常见问题、公司报价、联系我们。 公司历程、新闻告示、通栏广告、商城、网页页脚、友情链接。企业站会由以上模块的5～8个组成。常见组成有LOGO、导航栏、关于我们／公司历程、产品／服务介绍、团队介绍、客户案例、友情链接等。
15.2 电商站常见功能模块与布局
电商站常见功能模块与布局1. 电商站的常见功能模块 LOGO店招、产品分类、优惠券、VIP俱乐部。 HOT热卖、NEW上新、产品优势、团购优惠。 节日运营、优惠促销、产品详情、BANNER。 产品展示、系列产品、我们的优势、联系我们。 售后服务、当季热卖、活动推广、原料工艺。
常见组成有LOGO店招、产品分类、优惠券、系列产品、当季热卖、NEW上新、售后服务、我们的优势、联系我们等。
15.3 活动页专题设计常见功能模块与布局
活动页专题设计常见功能模块与布局1. 活动页专题的常见功能模块活动页，顾名思义，是对产品及活动进行特定时间段的节庆促销、宣传推广、营销产品的专门页面。活动页常见模块有活动标题、活动入口、活动奖品／商品展示、活动参与人数、有效时间、获奖信息和活动规则。2. 如何做好活动页利益点描述：直接折扣、福利优惠、产品优点。文案和活动策划的新颖：用词和图文吸引眼球。用故事化的方式设计场景：让用户沉浸思考且愿意去体验。活动力度重折扣拼价格：利用人喜欢占便宜的心理。产品优点细节展示：证明质量打消购买者顾虑。从目标用户的消费力的角度：简朴的／平价的／高贵的／奢华的。活动页的排版一般比较活泼，元素具有明确的视觉流向指示，用来向下引导重要信息。元素的使用符合本次活动的主题设计，合理利用空间，对活动信息直观呈现。首屏尺寸最好在460～760px比较好，重要内容尽量点题设计，引起用户下拉的兴趣。
3. 活动页文案设计
1）时效性文案，抓热点和节日，如“双11，爱她，就为她清空这辆车！”
2）情感共鸣文案，抓用户痛点，如“所谓孤独就是，有的人无话可说，有的话无人可说。”
3）增加紧迫感，时间限制，如“5折狂欢，只限今日，再不护肤就老了，最后50个试用名额。”
4）产品的优势，突出产品和服务的效率、专业、省费用，如“边睡边掉肉。”
5）抛出问题引起思考，如“人民币一块钱在今天还能买点什么？”
6）凸现个性品位，如“与众不同的人”“我们的疯狂，是为了改变世界”“喜欢就表白，不喜欢就拉黑。”
7）不妥的文案，如“暴风雨之后，不仅没看到彩虹，还感冒了。”
8）扎心文案，如“别人在等伞，我在等雨停。”
1）时效性文案，抓热点和节日，如“双11，爱她，就为她清空这辆车！”
2）情感共鸣文案，抓用户痛点，如“所谓孤独就是，有的人无话可说，有的话无人可说。”
3）增加紧迫感，时间限制，如“5折狂欢，只限今日，再不护肤就老了，最后50个试用名额。”
4）产品的优势，突出产品和服务的效率、专业、省费用，如“边睡边掉肉。”
5）抛出问题引起思考，如“人民币一块钱在今天还能买点什么？”
6）凸现个性品位，如“与众不同的人”“我们的疯狂，是为了改变世界”“喜欢就表白，不喜欢就拉黑。”
7）不妥的文案，如“暴风雨之后，不仅没看到彩虹，还感冒了。”
8）扎心文案，如“别人在等伞，我在等雨停。”
15.4 PC后台设计活动页专题设计常见功能模块与布局
电子商务网站整个系统的后端管理，按功能划分为九大模块。
1. 后台主页后台主页是各类主要信息的概要统计，包括客户信息、订单信息、商品信息、库存信息、评论和最近反馈等。
2. 商品模块
1）商品管理：商品和商品包的添加、修改、删除、复制、批处理、商品计划上下架、SEO、商品多媒体上传等，可以定义商品是实体还是虚拟，可以定义是否预订、是否缺货销售等。
2）商品目录管理：树形的商品目录组织管理，并可以设置关联／商品推荐。
3）商品类型管理：定义商品的类型，设置自定义属性项、SKU项和商品评论项。
4）品牌管理：添加、修改、删除、上传品牌LOGO。
5）商品评论管理：回复、删除。
3. 销售模块
1）促销管理：分为目录促销、购物车促销和优惠券促销三类，可以随意定义不同的促销规则，满足日常促销活动，如购物折扣、购物赠送积分、购物赠送优惠券、购物免运输费、特价商品、特定会员购买特定商品、折上折、买二送一等。
2）礼券管理：添加、发送礼券。
3）关联／推荐管理：基于规则引擎，可以支持多种推荐类型，可手工添加或者自动评估商品。
1. 后台主页后台主页是各类主要信息的概要统计，包括客户信息、订单信息、商品信息、库存信息、评论和最近反馈等。
2. 商品模块
1）商品管理：商品和商品包的添加、修改、删除、复制、批处理、商品计划上下架、SEO、商品多媒体上传等，可以定义商品是实体还是虚拟，可以定义是否预订、是否缺货销售等。
2）商品目录管理：树形的商品目录组织管理，并可以设置关联／商品推荐。
3）商品类型管理：定义商品的类型，设置自定义属性项、SKU项和商品评论项。
4）品牌管理：添加、修改、删除、上传品牌LOGO。
5）商品评论管理：回复、删除。
3. 销售模块
1）促销管理：分为目录促销、购物车促销和优惠券促销三类，可以随意定义不同的促销规则，满足日常促销活动，如购物折扣、购物赠送积分、购物赠送优惠券、购物免运输费、特价商品、特定会员购买特定商品、折上折、买二送一等。
2）礼券管理：添加、发送礼券。
3）关联／推荐管理：基于规则引擎，可以支持多种推荐类型，可手工添加或者自动评估商品。
4. 订单模块
1）订单管理：可以编辑、解锁、取消订单、拆分订单、添加商品、移除商品、确认可备货等，也可对因促销规则发生变化引起的价格变化进行调整。订单处理完可发起退货、换货流程。
2）支付：常用于订单支付信息的查看和手工支付两种功能。手工支付订单常用于“款到发货”类型的订单，可理解为对款到发货这类订单的一种补登行为。
3）结算：提供商家与第三方物流公司的结算功能，通常是月结。同时，结算功能也是常用来对“货到付款”这一类型订单支付后的数据进行对账。
5. 库存模块
1）库存管理：引入库存的概念，不包括销售规则为永远可售的商品，一个SKU对应一个库存量。库存管理提供增加、减少等调整库存量的功能；另外，也可对具体的SKU设置商品的保留数量、小库存量、再进货数量。每条SKU商品的具体库存操作都会记录在库存明细记录里。
2）查看库存明细记录。
3）备货／发货：创建备货单、打印备货单、打印发货单、打印EMS快递单、完成发货等一系列物流配送的操作。
4）退／换货：对退／换货的订单进行收货流程的处理。
6. 内容模块
1）内容管理：包括内容管理以及内容目录管理。内容目录由树形结构组织管理，类似于商品目录的树形结构，可设置目录是否为链接目录。
2）无限制创建独立内容网页，如关于我们、联系我们。
3）广告管理：添加、修改、删除、上传广告， 定义广告有效时限。
4）可自由设置商城导航栏目以及栏目内容、栏目链接。
7. 客户模块
1）客户管理：添加、删除、修改、重设密码，发送邮件等。
2）反馈管理：删除、回复。
3）消息订阅管理：添加、删除、修改消息组和消息，分配消息组，查看订阅人。
4）会员资格：添加、删除、修改会员。
8. 系统模块
1）安全管理：管理员、角色权限分配和安全日志。
2）系统属性管理：用于管理自定义属性。可关联模块包括商品管理、商品目录管理、内容管理、客户管理。
3）运输与区域：运输公司、运输方式、运输地区。
4）支付管理：支付方式、支付历史。
5）包装管理：添加、修改、删除。
6）数据导入管理：商品目录导入、商品导入、会员资料导入。
7）邮件队列管理：监控邮件发送情况，删除发送异常邮件。
9. 报表模块缺省数个统计报表，支持时间段过滤，支持按不同状态过滤，支持HTML、PDF和Excel格式的导出和打印。
1）用户注册统计。
2）低库存汇总。
3）缺货订单。
4）订单汇总。
5）退换货。
1）订单管理：可以编辑、解锁、取消订单、拆分订单、添加商品、移除商品、确认可备货等，也可对因促销规则发生变化引起的价格变化进行调整。订单处理完可发起退货、换货流程。
2）支付：常用于订单支付信息的查看和手工支付两种功能。手工支付订单常用于“款到发货”类型的订单，可理解为对款到发货这类订单的一种补登行为。
3）结算：提供商家与第三方物流公司的结算功能，通常是月结。同时，结算功能也是常用来对“货到付款”这一类型订单支付后的数据进行对账。
5. 库存模块
1）库存管理：引入库存的概念，不包括销售规则为永远可售的商品，一个SKU对应一个库存量。库存管理提供增加、减少等调整库存量的功能；另外，也可对具体的SKU设置商品的保留数量、小库存量、再进货数量。每条SKU商品的具体库存操作都会记录在库存明细记录里。
2）查看库存明细记录。
3）备货／发货：创建备货单、打印备货单、打印发货单、打印EMS快递单、完成发货等一系列物流配送的操作。
4）退／换货：对退／换货的订单进行收货流程的处理。
6. 内容模块
1）内容管理：包括内容管理以及内容目录管理。内容目录由树形结构组织管理，类似于商品目录的树形结构，可设置目录是否为链接目录。
2）无限制创建独立内容网页，如关于我们、联系我们。
3）广告管理：添加、修改、删除、上传广告， 定义广告有效时限。
4）可自由设置商城导航栏目以及栏目内容、栏目链接。
7. 客户模块
1）客户管理：添加、删除、修改、重设密码，发送邮件等。
2）反馈管理：删除、回复。
3）消息订阅管理：添加、删除、修改消息组和消息，分配消息组，查看订阅人。
4）会员资格：添加、删除、修改会员。
8. 系统模块
1）安全管理：管理员、角色权限分配和安全日志。
2）系统属性管理：用于管理自定义属性。可关联模块包括商品管理、商品目录管理、内容管理、客户管理。
3）运输与区域：运输公司、运输方式、运输地区。
4）支付管理：支付方式、支付历史。
5）包装管理：添加、修改、删除。
6）数据导入管理：商品目录导入、商品导入、会员资料导入。
7）邮件队列管理：监控邮件发送情况，删除发送异常邮件。
9. 报表模块缺省数个统计报表，支持时间段过滤，支持按不同状态过滤，支持HTML、PDF和Excel格式的导出和打印。
1）用户注册统计。
2）低库存汇总。
3）缺货订单。
4）订单汇总。
5）退换货。
16.1 折页设计
1）宣传折页设计：三折页和宣传单已经成为线下推广品牌、宣传企业文化、推销产品的主要方式。一份精美的三折页会令消费者爱不释手，大大提高消费者对商品的认可。
2）宣传折页使用场景：展会展台边及沿路发放，公司前台及产品旁边。
3）宣传折页尺寸：宣传单三折页尺寸设计通常为285mm×210mm的尺寸。折页除了三折页，也有双折、四折、多折，以及不规则边缘类型，具体尺寸可与印刷店联系后咨询可实现工艺，一般在淘宝上即可联系到印刷三折页的公司，500～1000张起印。
4）宣传折页配色风格：一般三折页的配色分为单一同色系配色、经典黑白色系、多色系大色块、高清照片、几何图形分割、波浪圆形分割等。
5）宣传折页元素比例：标题字体可以选一些有张力的字体设计。正文的字体不要小于5mm，否则看不清，图片+几何大色块+留白+文案，这4个元素最好各占1／4，也可以按照展示内容及项目需求增减比例，适当加一些服务及优势解说小图标。
6）三折页版式规范：三折页分为外页（图16-1）和内页（图16-2），外页从右到左分为A\B\C（图16-3），内页从左到右分为D\E\F
[插图]图16-3 三折页外页ABC指示页外页具有品牌服务及企业文化联系功能。A面为封面页，上面有公司名或者本三折页宣传目的，如参展产品等，底图点题。B面为联系方式页面，一般上面还会有宣传口号、地点、电话、传真、网站、二维码等。C面为公司介绍、品牌历史、服务介绍，或我们的优势等。
[插图]图16-4 三折页内页DEF指示页内页具有产品目录、报价、细节、优势展示等功能。D面为产品大类介绍。E面为产品的展示及介绍。F面为品牌细节及使用场景。以上6个面可以按照不同的需求进行排布变化。
7）三折页常见折叠法有两种，一种是Z字形折叠，一种是包裹形折叠。8）排版风格：三折页花纹分为全通（即为跨三面）、两通（画面跨二面）和不通（单独的三个画面）。
设计的时候，先打好分割参考线，之后按外页一页、内页一页的顺序进行设计。目前比较普遍的三折页都是大度16开的，也就是210mm×285mm的尺寸折三折。纸张一般都选用157克的亚粉纸或者铜版纸。布局排版需要注意的是，不能超过出血位线标记的位置。排版完成后保存文件即可发到印刷店打样！
16.3 VI及LOGO设计
VI即Visual Identity，通译为视觉识别系统，是CIS系统最具传播力和感染力的部分。CIS是Corporate Identity System首字母缩写，意思是“企业形象识别系统”。CIS的具体组成部分：理念识别（MI）、行为识别（BI）、视觉识别（VI）。LOGO（logotype的简称）是一种标志设计的名称，商品、企业、网站等为自己主题或者活动识别性而做的标志设计
网站LOGO尺寸
（1）88cm×31cm，这是互联网上最普遍的LOGO规格。
（2）120cm×60cm，这种规格属于一般大小的LOGO。
（3）120cm×90cm，这种规格属于大型LOGO。
（1）88cm×31cm，这是互联网上最普遍的LOGO规格。
（2）120cm×60cm，这种规格属于一般大小的LOGO。
（3）120cm×90cm，这种规格属于大型LOGO。
LOGO设计原则
1）简洁、有创意、可扩展性、独特性。
2）在黑色、白色、多色底色下均能良好显示。
3）在小尺寸下能良好显示，识别性强。
4）在众多情况下能良好显示（如产品包装上、广告上等）。
5）通常要包含公司的名称。
6）可以通过LOGO联想到品牌的产品定位及推广意图。
7）LOGO有竖排版和横排版两种，最好有辅助格子来展示比例
1）简洁、有创意、可扩展性、独特性。
2）在黑色、白色、多色底色下均能良好显示。
3）在小尺寸下能良好显示，识别性强。
4）在众多情况下能良好显示（如产品包装上、广告上等）。
5）通常要包含公司的名称。
6）可以通过LOGO联想到品牌的产品定位及推广意图。
7）LOGO有竖排版和横排版两种，最好有辅助格子来展示比例
LOGO的设计手法主要有以下几种。
1）图形：阴阳组合、重复排列、缺省部分、部分替换、连贯打通、增加透视。
1）图形：阴阳组合、重复排列、缺省部分、部分替换、连贯打通、增加透视。
2）字体：笔画相连、简化笔画、附加元素、底图镶嵌、元素象征、柔美卷曲、刚直碎裂、正负空间、书法印章、透视立体。
LOGO设计流行趋势：随着品牌的成长，LOGO也会升级。
LOGO配色以蓝色和红色为主，这两个颜色深浅合适，红色为企业成功色，蓝色代表科技，黑色经典，绿色寓意健康自然，黄色代表能源太阳等，橙色为活力救援色，粉色代表化妆品等女性用品。
第17章 运营设计
UI分为产品型UI和运营型UI。负责App和Web等产品的UI设计的为产品型UI。负责产品上线后的内容更换，如BANNER、启动页、闪屏、HTML 5活动推广页、网页推广活动页、广告海报设计的UI设计为运营型UI。
一个运营BANNER或者活动页面设计得好不好，需要考虑到这个产品的受众群体的喜好和接受程度，还要考虑这个活动投放的平台、曝光率、点击率、转化率、留存率等。
PV：Page View，页面访问量，也就是曝光量。
UV：Unique Visitor，独立访客数，同一个访客多次访问也只算1个访客。通常情况下是依靠浏览器的cookies来确定访客是否是独立访客（之前是否访问过该页面）。在同一台电脑上使用不同的浏览器访问或清除浏览器缓存后重新访问相同的页面，也相当于不同的访客在访问，会导致UV量增加。
UIP：Unique IP，独立IP。和UV类似，正常情况下，同一个IP可能会有很多个UV，同一个UV只能有一个IP。
VV：Visit View，访问次数，是指统计时段内所有访客的PV总和。
CPC：Cost Per Click，每次点击费用，即点击单价。
CPM：Cost Per Mile，千次展示费用，即广告展示一千次需要支付的费用。
RPM：Revenue Per Mille，千次展示收入。和CPM类似，RPM是针对广告展示商（如Adsense商户）而言的。CTR：Click-through Rate，点击率，即点击次数占展示次数的百分比。
17.1 运营字体排版
常见BANNER字体设计手法：
①3D立体字；
②Q版可爱字；
③刚硬炸裂字；
④女性柔美字；
⑤笔画连接字；
⑥中国风毛笔字；
⑦笔画添加字；
⑧质感字体；
⑨底图凸显字；
⑩以上方法综合使用。
①3D立体字；
②Q版可爱字；
③刚硬炸裂字；
④女性柔美字；
⑤笔画连接字；
⑥中国风毛笔字；
⑦笔画添加字；
⑧质感字体；
⑨底图凸显字；
⑩以上方法综合使用。
17.2 BANNER版式设计
BANNER由5个重点元素组成，即背景氛围、主标题、二级辅标题（三级小标题，利益点）、外加主物体和点缀。
17.3 启动页设计
下载并安装完App后，或者更新版本后，打开产品，首先会出现一页或者滑屏多页图文并茂的页面（抑或只有文字和纯色背景搭配）。这些页面，有些是描述产品的主要功能，有些是传递产品的理念，也有些是产品的slogan。这些页面就叫作启动页。
为什么要启动页？原因如下。
1）平滑过渡：掩盖启动太慢的事实，若没启动页，首次登录后等待时间长。
2）传递产品理念，打造品牌价值，引起共鸣。
3）渲染图片，加载内容，提示App版本新功能，提示运营节气等。
4）情感故事产生共鸣：如UEGOOD—Let everyone has a good future！
1）平滑过渡：掩盖启动太慢的事实，若没启动页，首次登录后等待时间长。
2）传递产品理念，打造品牌价值，引起共鸣。
3）渲染图片，加载内容，提示App版本新功能，提示运营节气等。
4）情感故事产生共鸣：如UEGOOD—Let everyone has a good future！
启动页目前比较流行三种风格，一种是MBE风格的，一种是扁平渐变风格的，还有一种是2.5D风格的。2.5D又名等距图或者轴侧图，是一种边缘透视都是平行相等的伪透视风格。大家可以先搜集一些常见的2.5D小元素，然后按照引导页的文字说明，配以画面构图。图17-3、图17-4为2.5D启动页样例。[插图]图17-3 2.5D启动页样例1
[插图]图17-4 2.5D启动页样例2
春节活动回家（春运），祭祖，贴春联、福字、窗花，挂灯笼，年夜饭，拜年送礼，发压岁钱红包，穿新年服装，迎财神，舞龙舞狮子，放烟花鞭炮，孔明灯，猜灯谜，敲锣打鼓，堆雪人，看春晚，发微信红包，福袋，搓麻将，看戏，拜神，吃鸡。新年启动页画面常用元素吉祥物（十二生肖）、灯笼、福字、鞭炮烟花、花、剪纸、铜钱、金元宝、红包（钱包）、新装、舞狮舞龙、孔明灯、鱼、鼓、春联、祥云、花草、食物（馄饨、水果、鸡鸭鱼肉等）、扇子、吉祥结、发财树。
17.5 MG交互动效设计
UI中需要加动效的地方如下。
1）需要等待的场景。
2）页面转场的场景。
3）响应操作后有变化的点。
4）需提醒用户注意的点。
5）对操作流程有提示作用的点。
1）需要等待的场景。
2）页面转场的场景。
3）响应操作后有变化的点。
4）需提醒用户注意的点。
5）对操作流程有提示作用的点。
容易犯的问题：过多的不必要的动效，造成资源浪费和满屏在动，花里胡哨
[插图]图17-8 动效常见转场设计
[插图]图17-9 动效交付程序的TIME LINE
我们常做动画的类型：位移的变化、旋转的变化、颜色的变化、尺寸的变化、透明度的变化、生长和裁切、空间透视的变化、一些滤镜效果。交互动态特效可以做出的动画效果包括： 旋转缩放，入镜出镜； 压扁弹起，加速减速； 靠近离开，曲线运动； 透明度变化，移动停止； 跟随重叠，轮廓残影； 拉扯抵抗，抛物线运动； 模糊清晰和重力风力等。
17.6 吉祥物设计
吉祥物一般为卡通造型，一般为二头身或者三头身的卡通形象，注意如果有具体动物参考的需要画出动物的特征。设计的时候，最好设计三视图，即正视图、侧视图和后视图，以便于后期做成毛绒玩具等。
一般吉祥物表情，除了喜怒哀乐、惊讶、心心眼、瀑布汗等外，还有很多种，按照需求可以增加减少，也可以做成表情包用在App的发帖及社区功能中。吉祥物还可以用在App一些默认页404或者网络不通等设计上（图17-10）。
18.1 UI作品集制作
UI作品集制作
1）尺寸建议1280×720像素。作品集有封面、封底，封面上要写上UI DESIGN和作品集打包时间及设计师名字，还有联系方式，最好手机、邮箱、微信、QQ都写上，以便于用人单位用他们习惯的方式联系你，封底写上THANK YOU，可以再写一次联系方式，不用让他人翻到封面查找联系方式。
2）第二页一般是个人履历，最好有个人照片，否则会影响面试机会。个人履历包括基础信息、学校专业及工作经历，应把公司名称、工作时间和工作内容简要地写一下。
3）作品分类Icon Design图标设计，2～3套，如手机主题系统图标、拟物图标1～2个，MBE风格及其他运营风格的图标1～2套。App Design手机应用设计2～3套，带交互及视觉最好是不同方向不同风格的。Web Design网页设计，最好包括企业官网、电商站、PC后台、运营活动页。Graphic Design平面设计，包括VI、LOGO、宣传册、三折页、吉祥物等。Other Design其他设计，包括扁平天气插画、噪点插画、C4D作品等。
4）打包工具，可以用网上的PDF生成工具把排版好的图片打包成PDF。也可以用PPT或者Keynote等软件做成带动效版本的。最好压缩到10MB内，便于邮箱投递。页数建议50～100页之间。
1）尺寸建议1280×720像素。作品集有封面、封底，封面上要写上UI DESIGN和作品集打包时间及设计师名字，还有联系方式，最好手机、邮箱、微信、QQ都写上，以便于用人单位用他们习惯的方式联系你，封底写上THANK YOU，可以再写一次联系方式，不用让他人翻到封面查找联系方式。
2）第二页一般是个人履历，最好有个人照片，否则会影响面试机会。个人履历包括基础信息、学校专业及工作经历，应把公司名称、工作时间和工作内容简要地写一下。
3）作品分类Icon Design图标设计，2～3套，如手机主题系统图标、拟物图标1～2个，MBE风格及其他运营风格的图标1～2套。App Design手机应用设计2～3套，带交互及视觉最好是不同方向不同风格的。Web Design网页设计，最好包括企业官网、电商站、PC后台、运营活动页。Graphic Design平面设计，包括VI、LOGO、宣传册、三折页、吉祥物等。Other Design其他设计，包括扁平天气插画、噪点插画、C4D作品等。
4）打包工具，可以用网上的PDF生成工具把排版好的图片打包成PDF。也可以用PPT或者Keynote等软件做成带动效版本的。最好压缩到10MB内，便于邮箱投递。页数建议50～100页之间。
18.2 UI常见面试40题
UI常见面试40题
1）你为什么要做UI？你之前不是这个专业的，怎么想起来做UI的？
2）请介绍一下你自己？你是怎么知道我们公司的？你对我们公司有什么了解？
3）你平时一般上什么网站？你收集了多少素材？你平时是怎么整理素材的？你一般去哪里找素材？
4）你是怎么决定一个产品的配色的？
5）你平时都用一些什么软件？
6）你做设计用Windows还是MAC？
7）整套产品的设计流程是怎么样的？
8）App一般做几个尺寸？屏幕分别是什么像素？
9）切图标注一般用什么软件？切片命名规则是什么？一般出几套图？
10）PNG的原理是什么？
11）你离开上家公司的原因是什么？
12）你对加班怎么看？
13）你有没有已上线项目？
14）你平时用哪些App？
15）某款App在交互上有哪些优点？
16）你对用户体验的理解是什么？
17）你了解我们公司吗？
18）根据你自己最满意的一个作品，来说说你为什么这么设计？
19）如果你的设计程序员做不出来，让你大量改图怎么办？
20）你有没有参加过设计比赛？
21）你懂HTML5和CSS3吗？
22）你的职业发展目标是什么？你五年内的规划是什么样的？
23）iOS和Android的App设计区别是什么？
24）什么叫Web响应式设计？
25）你会平面排版吗？一款VI设计需要注意什么？
26）你接到一个项目后，设计思路是怎么样的？
27）你一般设计一个App要多少时间？
28）什么是暖色？什么是冷色？什么是色相环、对比色、同类色？
29）一个电商网站的配色应该是怎样的？
30）一个BANNER的设计要素是什么？
31）我们公司的这款产品要改版，如果让你改，你会怎么改？
32）App规范怎么做？App设计的时候需要注意什么？
33）如果公司培养你做产品经理你愿意吗？
34）你的手绘和AE动效好不好？
35）如果你的设计BOSS和客户不满意，你怎么办？
36）你对薪资期望值是怎么样的？
37）你工作的上家公司有多少人？公司主要经营什么业务？你做过些什么项目？
38）上家公司的设计部有多少人？你平时负责哪一块？
39）你不是设计专业的，你怎么才能保证你的设计比学院派的人好？
40）你觉得你自己的优势是什么？
1）你为什么要做UI？你之前不是这个专业的，怎么想起来做UI的？
2）请介绍一下你自己？你是怎么知道我们公司的？你对我们公司有什么了解？
3）你平时一般上什么网站？你收集了多少素材？你平时是怎么整理素材的？你一般去哪里找素材？
4）你是怎么决定一个产品的配色的？
5）你平时都用一些什么软件？
6）你做设计用Windows还是MAC？
7）整套产品的设计流程是怎么样的？
8）App一般做几个尺寸？屏幕分别是什么像素？
9）切图标注一般用什么软件？切片命名规则是什么？一般出几套图？
10）PNG的原理是什么？
11）你离开上家公司的原因是什么？
12）你对加班怎么看？
13）你有没有已上线项目？
14）你平时用哪些App？
15）某款App在交互上有哪些优点？
16）你对用户体验的理解是什么？
17）你了解我们公司吗？
18）根据你自己最满意的一个作品，来说说你为什么这么设计？
19）如果你的设计程序员做不出来，让你大量改图怎么办？
20）你有没有参加过设计比赛？
21）你懂HTML5和CSS3吗？
22）你的职业发展目标是什么？你五年内的规划是什么样的？
23）iOS和Android的App设计区别是什么？
24）什么叫Web响应式设计？
25）你会平面排版吗？一款VI设计需要注意什么？
26）你接到一个项目后，设计思路是怎么样的？
27）你一般设计一个App要多少时间？
28）什么是暖色？什么是冷色？什么是色相环、对比色、同类色？
29）一个电商网站的配色应该是怎样的？
30）一个BANNER的设计要素是什么？
31）我们公司的这款产品要改版，如果让你改，你会怎么改？
32）App规范怎么做？App设计的时候需要注意什么？
33）如果公司培养你做产品经理你愿意吗？
34）你的手绘和AE动效好不好？
35）如果你的设计BOSS和客户不满意，你怎么办？
36）你对薪资期望值是怎么样的？
37）你工作的上家公司有多少人？公司主要经营什么业务？你做过些什么项目？
38）上家公司的设计部有多少人？你平时负责哪一块？
39）你不是设计专业的，你怎么才能保证你的设计比学院派的人好？
40）你觉得你自己的优势是什么？