第1章　认识UI设计及UED设计部门 在系统学习UI设计之前，需要先详细了解UI设计的基本概念及相关的基础知识。本章 内容包括UI设计概念、UED设计团队的组成、UI设计师职业发展规划、UI设计师收入和UI 设计入门10条提示。 1.1UI设计概念 UI 即 User Interface（用户界面）的简称。 UI 设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI 设计不 仅让软件变得有个性、有品位，还让软件或者智能硬件的操作变得舒适、简单、自由，并充 分体现软件的定位和特点，互联网产品研发的UI设计岗位及相关工作内容与流程，如图1-1 所示。 图 1-1 UI互联网产品相关岗位及工作内容与流程 其中PM为产品经理，UX为用户体验设计师，IXD为交互设计师，RD为研发工程师， TES为测试工程师，OM为运营管理。 UI 主要分为三大块：UI视觉设计、UI交互设计和UI用户体验设计。 如果把一款软件产品比作一个美女的话，视觉就是一个美女的化妆和打扮，交互就是一 个美女的五官位置及骨骼体态，用户体验就是美女是否善解人意、贴心、易于沟通交流等。 UI视觉设计，又被称为图形用户界面（Graphical User Interface，简称GUI，又称图形用 1第 章 认识UI设计及UED设计部门 1.1UI设计概念 UI 即 User Interface（用户界面）的简称。 UI 设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI 设计不 仅让软件变得有个性、有品位，还让软件或者智能硬件的操作变得舒适、简单、自由，并充 分体现软件的定位和特点，互联网产品研发的UI设计岗位及相关工作内容与流程，如图1-1 所示。 图 1-1 UI互联网产品相关岗位及工作内容与流程 其中PM为产品经理，UX为用户体验设计师，IXD为交互设计师，RD为研发工程师， TES为测试工程师，OM为运营管理。 UI 主要分为三大块：UI视觉设计、UI交互设计和UI用户体验设计。 如果把一款软件产品比作一个美女的话，视觉就是一个美女的化妆和打扮，交互就是一 个美女的五官位置及骨骼体态，用户体验就是美女是否善解人意、贴心、易于沟通交流等。 UI视觉设计，又被称为图形用户界面（Graphical User Interface，简称GUI，又称图形用 1第 章 认识UI设计及UED设计部门 002 UI 设计精品必修课（第2版） 户接口），主要解决应用与软件产品的风格，如商务风、科技风、女性化等，对图标及元素进 行尺寸及风格上的美化，在产品的功能辨识性及控件统一性、美观性上进行设计。 UI交互设计，又被称为IXD（Interaction Design 的缩写），是定义、设计人造系统的行为 的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同 达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在 充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用 性”和“用户体验”两个层面上进行分析，关注以人为本的用户需求。 UI用户体验设计，通常被称为UED（User Experience Design）或者UXD（User Experience Designer），简称UX，是贯穿于整个设计流程，以调研挖掘用户真实需求，认识用户真实期 望和内在心理及行为逻辑的一套方法。用户体验设计是使用数据建模测试等手段来辅助提升 软件产品的易用性、用户黏性和用户好感度的一种综合工作方法。 1.2UED设计团队的组成 互联网公司的 UED 团队组成成员如下。 UI设计师：英文全称为User Interface Designer，主要负责UI设计的相关设计。 交互设计师：英文全称为Interaction Designer，主要负责产品的交互设计。 视觉设计师：英文全称为Visual Designer，主要负责产品的UI视觉设计。 用户研究员：英文全称为User Researcher，主要负责产品的用户研究。 用户体验设计师：英文全称为User Experience Designer，主要负责产品的体验设计。 产品经理：英文全称为Product Manager，主要负责产品的研发。 项目经理：英文全称为Program Manager，全面负责产品的整体运营。 前端工程师：英文全称为Front End Developer，主要负责产品的UI页面的技术实现。 原型架构师：英文全称为UI Prototyper，主要负责产品前期的原型与架构。 内容设计师：英文全称为Content Designer，主要负责产品的内容版块。 运营设计师：英文全称为Operations Designer，主要负责产品运营方面的设计。 客户/老板：主要提出产品的需求与结果。 图 1-2 所示为公司UED 团队主要组成成员的示意图。 图 1-2 公司UED团队主要组成成员 1.3UI设计师职业发展规划 UI设计师的职业发展规划分成两种路线，第一种是视觉设计做到底的垂直发展UI 设计 师，第二种是横向发展的设计师，比如转产品经理、项目经理。两种设计师的技能要求与发 展模式是不一样的，根据每个人的性格及志向，两种设计师在行业中都十分受欢迎，下面是 UI设计师职业发展的常见路径。 1. 新手 UI 设计师 熟悉操作基本的UI绘制软件，如Photoshop、Illustrator、After Effects、Sketch、Adobe UI 设计精品必修课（第2版） 户接口），主要解决应用与软件产品的风格，如商务风、科技风、女性化等，对图标及元素进 行尺寸及风格上的美化，在产品的功能辨识性及控件统一性、美观性上进行设计。 UI交互设计，又被称为IXD（Interaction Design 的缩写），是定义、设计人造系统的行为 的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同 达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在 充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用 性”和“用户体验”两个层面上进行分析，关注以人为本的用户需求。 UI用户体验设计，通常被称为UED（User Experience Design）或者UXD（User Experience Designer），简称UX，是贯穿于整个设计流程，以调研挖掘用户真实需求，认识用户真实期 望和内在心理及行为逻辑的一套方法。用户体验设计是使用数据建模测试等手段来辅助提升 软件产品的易用性、用户黏性和用户好感度的一种综合工作方法。 1.2UED设计团队的组成 互联网公司的 UED 团队组成成员如下。 UI设计师：英文全称为User Interface Designer，主要负责UI设计的相关设计。 交互设计师：英文全称为Interaction Designer，主要负责产品的交互设计。 视觉设计师：英文全称为Visual Designer，主要负责产品的UI视觉设计。 用户研究员：英文全称为User Researcher，主要负责产品的用户研究。 用户体验设计师：英文全称为User Experience Designer，主要负责产品的体验设计。 产品经理：英文全称为Product Manager，主要负责产品的研发。 项目经理：英文全称为Program Manager，全面负责产品的整体运营。 前端工程师：英文全称为Front End Developer，主要负责产品的UI页面的技术实现。 原型架构师：英文全称为UI Prototyper，主要负责产品前期的原型与架构。 内容设计师：英文全称为Content Designer，主要负责产品的内容版块。 运营设计师：英文全称为Operations Designer，主要负责产品运营方面的设计。 客户/老板：主要提出产品的需求与结果。 图 1-2 所示为公司UED 团队主要组成成员的示意图。 图 1-2 公司UED团队主要组成成员 1.3UI设计师职业发展规划 UI设计师的职业发展规划分成两种路线，第一种是视觉设计做到底的垂直发展UI 设计 师，第二种是横向发展的设计师，比如转产品经理、项目经理。两种设计师的技能要求与发 展模式是不一样的，根据每个人的性格及志向，两种设计师在行业中都十分受欢迎，下面是 UI设计师职业发展的常见路径。 1. 新手 UI 设计师 熟悉操作基本的UI绘制软件，如Photoshop、Illustrator、After Effects、Sketch、Adobe 第 1章　认识 UI设计及 UED设计部门 XD 、Figma、C4D、Blender等，其中 Sketch、Adobe XD 、Figma只要掌握一款即可，当然目 前 Figma是主流的 UI设计软件；能按照产品交互提供的线框图绘制 UI视觉；能按照功能绘 制相对应的图标，知道图标的尺寸规范、配色统一性等，能很好地诠释图标的功能与寓意； 能按照每个平台绘制适合这个平台的 UI控件，能准确地交付带有切图、标注坐标及字号的文 件与输出，能按产品定义绘制界面风格、元素图标，着重软件及视觉表现，辅助资深设计师 做一些简单的界面设计。 2. 进阶 UI 设计师 在新手 UI设计师的基础上，有一定的沟通能力及项目经验，知道如何凸显界面上的信 息层级，做出来的界面比较成熟、层级清晰、有节奏感、赏心悦目；能较好地把握设计流行 趋势，擅长多种风格表达，有一定的自我设计认知及设计偏好；开始研究产品定义及用户体 验对界面的影响，能保质保量地完成部分模块的界面设计和切图交付；开始着手于更多的软 件，如交互动效类、交互线框原型类软件的探索及使用。 3. 高级 UI 设计师 能够独立完成并落地一个软件产品的整体设计，设计出符合此产品的风格，且兼顾当下 UI流行趋势的设计；经历过 App、小程序、网站、运营、PC端应用软件、B端应用程序、平 面视觉等多种项目，能独立完成产品从 0到 1的线框原型，熟悉各种 UI设计规范；其本身除 了视觉设计，还有交互动效、C4D或者 Blender的 3D表现、运营插画、HTML5、CSS3等各 种附加技能。并对 UI设计有横向发展、融会贯通的能力，比如数据大屏 UI、硬件 HMI、汽 车 HMI设计等。 4. 资深 UI 设计师 除了能很好地完成软件的整体设计，还能很好地与客户及产品经理、总监、程序员沟 通，理解产品需求，对软件整体框架、交互操作流程有整体认识，而不仅仅以好看或不好看 作为一个产品 UI设计的评判标准；会按公司能力和项目时间，合理地调配设计时间、资源并 输出方案；会竞品分析，会运用多种用户体验调研手法来佐证自己的设计，会加入自己项目 的后续上线测试及迭代中，懂得使用数据及调研驱动设计升级，熟悉程序开发框架。 5. 首席 UI 设计师 把握公司产品的整体设计方向，深入了解公司业务流程，设定设计标准及规范，主要是 视觉建议、UI规范文档，做出公司产品强有力传播价值的设计风格；积极参加 UX、UI方面 的展会论坛，实现公司设计价值输出。 6. UI 设计总监 对接客户及公司高层，协调公司的设计资源，管理项目资源，建设设计团队，积极推动 项目进展，以及向高层及客户总结汇报。 垂直发展的 UI 设计师技能如下。 1）UI视觉设计。 2）产品交互架构。 3）用户体验方法。 4）产品项目管理。 5）代码框架设计。 6）运营插画设计。 7）动效表现。 8）3D等风格表现。 9）数据调研分析。 10）B端产品 UI设计。 11）智能硬件 UI、汽车 HMI设计。 多管齐下提升以上 11个技能，甚至可以在将来跨专业，直接转型成为产品经理、创业公 004 UI 设计精品必修课（第2版） 司合伙人、数据分析师等。图1-3 所示为UI设计师技能分析图，UI设计师最终发展成为具备 产品经理能力级别的UI设计总监。 图 1-3 UI 设计师技能分析图 1.4UI设计师收入 根据某招聘平台提供的调研数据，一、二线城市UI设计师的普遍收入如下。 1 ～ 2 年的初级UI设计师，基本收入在 6 ～ 8千元，优秀的可以超过 8千元。 2 ～ 3 年的中级UI设计师，基本收入在 8 ～ 12千元，优秀的可以超过 12千元。 3 ～ 5 年的高级UI设计师，基本收入在 12 ～ 15千元，优秀的可以超过 15千元。 5 年以上的资深UI设计师，基本收入在 15 ～ 30千元，优秀的可以超过 30千元。 首席设计师与UI设计总监，基本收入在 20 ～ 50千元，优秀的可以超过 50千元。 图 1-4 所示为UI设计师收入。 图 1-4 UI 设计师收入 1.5UI设计经典入门 10条提示 下面是视觉客整理的有关UI设计师入门的10条提示与问答。 1. 什么人适合学习UI设计？ 在校大学生与应届毕业生。需要技术作为进入互联网行业的敲门砖，学校里学到的知识 UI 设计精品必修课（第2版） 司合伙人、数据分析师等。图1-3 所示为UI设计师技能分析图，UI设计师最终发展成为具备 产品经理能力级别的UI设计总监。 图 1-3 UI 设计师技能分析图 1.4UI设计师收入 根据某招聘平台提供的调研数据，一、二线城市UI设计师的普遍收入如下。 1 ～ 2 年的初级UI设计师，基本收入在 6 ～ 8千元，优秀的可以超过 8千元。 2 ～ 3 年的中级UI设计师，基本收入在 8 ～ 12千元，优秀的可以超过 12千元。 3 ～ 5 年的高级UI设计师，基本收入在 12 ～ 15千元，优秀的可以超过 15千元。 5 年以上的资深UI设计师，基本收入在 15 ～ 30千元，优秀的可以超过 30千元。 首席设计师与UI设计总监，基本收入在 20 ～ 50千元，优秀的可以超过 50千元。 图 1-4 所示为UI设计师收入。 图 1-4 UI 设计师收入 1.5UI设计经典入门 10条提示 下面是视觉客整理的有关UI设计师入门的10条提示与问答。 1. 什么人适合学习UI设计？ 在校大学生与应届毕业生。需要技术作为进入互联网行业的敲门砖，学校里学到的知识 第 1章　认识 UI设计及 UED设计部门 不足，难以找工作，可以尝试往互联网 UI设计师方向发展。 对设计感兴趣的爱好者，已经有一份工作的朋友，但是想多一项专业技能，为以后做准备。 不是互联网行业的想跨界转行，想转行却又苦于缺少经验、信息、技能，希望学习后能 快速转入新行业， UI设计相对来说更容易入行。 正在从事相关工作的初级 UI设计师，因为行业需求不断变化，想提升职业发展空间，想 在 UI设计专业上得心应手。 正在大学攻读工业设计、产品设计、视觉传达、环境艺术、建筑学、心理学、计算机技 术、多媒体制作等相关专业的学生。 2. 零基础是否适合学习 UI设计？ 零基础学习 UI设计，要先从软件学起，再系统学习 UI设计的理论知识，再到 UI设 计的大厂规范，最后需要进行实战磨炼，强化技能，了解 UI工作流程，在职场上有一个精准 定位。 3. UI设计要学习哪些软件？ 首先是 UI 视觉设计软件，如 Photoshop、 Illustrator、 Figma、 Sketch 和 Adobe XD 等， 这些是主流的 UI 设计软件，还有 C4D、 Blender、 AfterEffects三维与动效软件， Axure、 Xmind、 Keynote、蓝湖和墨刀也是需要系统掌握的。 4. UI设计需要掌握哪些技能？ UI设计师需要掌握的技能，除了软件技能，还需要拓展以下内容。 1）熟练使用相关设计工具输出线框图、任务流程、产品原型。 2）规划产品交互设计方案，输出交互设计原型（交互说明文档）。 3）了解用户体验，掌握一定的用户调研、数据分析能力。 4）对产品进行可用性测试和评估，提出改进方案，持续优化。 5）文档撰写能力。 6）具备清晰的逻辑能力。 7）具备敏锐的产品洞察力。 8）心理学。 9）交互设计原则、不同平台的规范。 10）产品视觉感。 11）沟通能力。 12）保持良好的学习力。 5. UI行业的一线城市的薪资情况 以北上广深为例，具体如图 1-5所示。 图 1-5 一线城市的 UI设计师薪资情况 图 1-5 一线城市的 UI设计师薪资情况（续） 6. 互联网行业需要怎样的设计师？ 互联网行业需要的设计师应该至少具备以下 3个基本素质。 1）品牌意识，提升品牌能力。 2）业务场景意识，保证产品可用性，为产品创造更多价值。 3）用户体验意识，保持产品持久力。 7. 阅读本书有哪些优势？ 适合从事 UI视觉设计、GUI设计、平面设计、交互设计、用户体验等专业的读者阅读， 也可以作为高等院校平面设计、网站设计、艺术设计、工业设计、游戏设计等相关专业的教 辅图书及相关培训机构的参考图书，对汽车 HMI设计感兴趣的同学也可以阅读。 8. UI设计师在工作中的具体工作流程 明确产品设计 5个阶段，分别如下。 第一，立项阶段。 一个项目在召开正式立项之后，就代表正式启动。 参与人员：项目经理、产品经理、设计师、开发、测试等项目组各环节关键成员。 第二，需求阶段。 主要梳理用户需求、商业需求、客户需求。 参与人员：产品经理、用户研究、交互设计师。 第三，设计阶段。 主要包含交互、视觉方案详细设计。 参与人员：交互设计师、视觉设计师。 第四，开发阶段。 实现产品的开发方案。 参与人员：开发技术人员、产品经理、项目经理。 第五，验证阶段。 检验产品质量，设计师进行设计走查，测试人员进行测试。 参与人员：测试人员、产品经理、设计师。 项目组各成员必须完全理解各阶段的目标，以及自身在各阶段的主要职责目标。 9. UI设计师需要怎样的计算机配置，一定要使用苹果计算机吗？ UI设计对计算机要求不是很严格，中端水平的 PC配置即可。有人问为什么有的公司使 用苹果计算机来设计 UI，主要问题是 Sketch这款软件只能在苹果上使用。现在 Figma成为主 第 1章　认识 UI设计及 UED设计部门 流的 UI设计工具，而且有网页版，就不再强烈要求使用苹果计算机，当然苹果计算机的显示 还是很专业的。 10. UI设计师的求职简历需要哪些内容？ UI设计师的简历需要具备新颖、潮流、逻辑好、产品属性、视觉美、学习力强等特点。 第一，要以用户体验为中心而设计。 事实上，用户体验设计包含了太多层面，如人机交互、视觉设计、版式设计、功能结构 设计、页面切换设计等。 第二，有思维和设计逻辑能力。 设计也是一种逻辑，优秀的设计师可以通过设计思维正面影响别人。经调查研究， UI设 计师需要具备以下两种逻辑能力。 思维逻辑能力：决定了设计师工作沟通中的效率。无论是平面设计师还是视觉设计师， 在面对用户各方面的需求时都要仔细分析，运用逻辑思维和语言能力，交出一份满意的“答 卷”，这个说服过程便是思维逻辑能力。 设计逻辑能力：决定了作品的新意和灵性。简而言之，就是设计过程中的布局安排，如 何让呈现的意图和内容能获取到更高的转化率，如何巧妙地结合用户的需求，这个表达的过 程就是设计逻辑能力的体现。 第三，不断地学习和进步。 在不断变化的设计领域，唯有不断学习才能“吸取”最新技术的“养分”，不断成长才 能保持自我和行业的竞争力。在简历和作品集上要突出一些新技术、新方向的内容，比如 B 端 UI设计、数据可视化 UI设计、汽车 HMI设计，以及一些类似 Bledner、 C4D、 Unity 3D、 Unreal Engine 的软件技术。 互联网与智能硬件的发展决定了UI的发展，毕竟UI设计是指人机交互的一种设计。本章 主要讲解UI的风格演变、应用领域、5G和人工智能带来的机遇，以及UI设计师的能力模型。 2.1UI设计的风格演变 因计算机和移动终端的性能、屏幕适配设计成本及大众审美的变迁，GUI视觉风格也经 过了多次变迁。 以计算机为载体的UI设计变迁如下。 第1阶段：1975—1985年，风格偏黑白像素。 第2阶段：1985—1995年，风格偏彩色像素。 第3阶段：1995—2008年，风格偏水晶拟物。 第4阶段：2008—2013年，风格偏3D立体水晶。 第5阶段：2013年至今，风格偏扁平微质感，流畅的交互动效。 未来：以3D空间的UI设计为导向，全息立体与VR/AR（虚拟现实/现实增强）应用领 域的视觉呈现。 图 2-1 所示为以计算机为载体的UI设计发展史图例。 1975—1985年 风格偏黑白像素 2008—2013年 风格偏3D立体水晶 1985—1995年 风格偏彩色像素 2013年一至今 风格偏扁平微质感，流 畅的交互动效 1995—2008年 风格偏水晶拟物 以3D空间UI为导向， 全息立体VR、AR虚 拟现实，现实增强 图 2-1 以计算机为载体的UI设计发展史图例 2第 章 UI设计发展史及未来 2.1UI设计的风格演变 因计算机和移动终端的性能、屏幕适配设计成本及大众审美的变迁，GUI视觉风格也经 过了多次变迁。 以计算机为载体的UI设计变迁如下。 第1阶段：1975—1985年，风格偏黑白像素。 第2阶段：1985—1995年，风格偏彩色像素。 第3阶段：1995—2008年，风格偏水晶拟物。 第4阶段：2008—2013年，风格偏3D立体水晶。 第5阶段：2013年至今，风格偏扁平微质感，流畅的交互动效。 未来：以3D空间的UI设计为导向，全息立体与VR/AR（虚拟现实/现实增强）应用领 域的视觉呈现。 图 2-1 所示为以计算机为载体的UI设计发展史图例。 1975—1985年 风格偏黑白像素 2008—2013年 风格偏3D立体水晶 1985—1995年 风格偏彩色像素 2013年一至今 风格偏扁平微质感，流 畅的交互动效 1995—2008年 风格偏水晶拟物 以3D空间UI为导向， 全息立体VR、AR虚 拟现实，现实增强 图 2-1 以计算机为载体的UI设计发展史图例 2第 章 UI设计发展史及未来 第 2章　UI设计发展史及未来 以手机为载体的 UI设计变迁如下。 第 1阶段：1976—1998年，风格偏黑白像素。 第 2阶段：1998—2003年，风格偏彩色像素。 第 3阶段：2003—2007年，风格偏 3D立体水晶。 第 4阶段：2008—2013年，风格偏拟物质感。 第 5阶段：2013—2017年，风格偏扁平微质感，流畅的交互动效。 第 6阶段：2017至今，风格偏流体渐变风格。 未来：以 3D 空间 UI 为导向的，全息立体与 VR/AR（虚拟现实 /现实增强）应用领域的 视觉呈现。 图 2-2 所示为以手机为载体的 UI设计发展史图例。 1976—1998年1998—2003年2003—2007年 风格偏黑白像素 风格偏彩色像素 风格偏 3D立体水晶 2008—2013年2013—2017年以 3D空间 UI为导向， 风格偏拟物质感 风格偏扁平微质感，流全息立体 VR、AR虚 畅的交互动效 拟现实，现实增强 图 2-2 以手机为载体的 UI设计发展史图例 2.2UI设计应用领域 UI设计的应用领域非常广泛，包括但不限于以下几种。 软件开发行业：UI设计师可以为各种软件应用程序、网站、游戏等进行设计，从而提升 用户体验。 广告行业：UI设计师可以为广告制作公司设计广告，包括横幅广告、海报、电子邮件广 告等。 媒体行业：UI设计师可以为各种媒体公司设计数字媒体，包括电子书、数字报纸和杂 志、视频、音频等。 零售行业：UI设计师可以为各种在线零售商设计电子商务网站，提升购物体验。 金融行业：UI设计师可以为金融机构设计各种移动应用、网站和其他数字产品，以便客 户更轻松地管理其账户和交易。 医疗行业：UI设计师可以为医疗机构设计数字产品，如健康管理应用程序和电子健康档 案，以便为患者更好地管理和跟踪他们的健康状况。 总之，UI设计可以应用于各种行业的数字产品和服务，以提高用户体验，提高销售和客 户忠诚度，提高效率和方便性。 010 UI 设计精品必修课（第2版） 可穿戴设备的UI设计，如图 2-3所示。 智能家居显示屏的 UI 设计，如图2-4所示。 图 2-3 可穿戴设备的 UI 应用领域图 2-4 智能家居显示屏的 UI 应用领域 手机App的UI设计，如图 2-5所示。 医疗器械的UI设计，如图2-6所示。 图 2-5 手机App的UI应用领域图 2-6 医疗器械的UI应用领域 PC端软件的UI设计，如图2-7所示。 网页 Web的UI设计，如图2-8所示。 图 2-7 PC端软件的UI应用领域图 2-8 网页Web的应用领域 除了以上应用领域，还有游戏的 UI 设计、嵌入式设备的 UI 设计、虚拟现实设备的UI 设 计、增强现实设备的UI 设计，交互式触摸的UI设计，各种家用电器的UI设计，飞机、轮 船、汽车HMI设计，以及科技产品的UI设计。 2.3UI的未来— —5G和人工智能带来的机遇 5G/6G通信时代和AI人工智能会给以下产业方向带来机遇。 UI 设计精品必修课（第2版） 可穿戴设备的UI设计，如图 2-3所示。 智能家居显示屏的 UI 设计，如图2-4所示。 图 2-3 可穿戴设备的 UI 应用领域图 2-4 智能家居显示屏的 UI 应用领域 手机App的UI设计，如图 2-5所示。 医疗器械的UI设计，如图2-6所示。 图 2-5 手机App的UI应用领域图 2-6 医疗器械的UI应用领域 PC端软件的UI设计，如图2-7所示。 网页 Web的UI设计，如图2-8所示。 图 2-7 PC端软件的UI应用领域图 2-8 网页Web的应用领域 除了以上应用领域，还有游戏的 UI 设计、嵌入式设备的 UI 设计、虚拟现实设备的UI 设 计、增强现实设备的UI 设计，交互式触摸的UI设计，各种家用电器的UI设计，飞机、轮 船、汽车HMI设计，以及科技产品的UI设计。 2.3UI的未来— —5G和人工智能带来的机遇 5G/6G通信时代和AI人工智能会给以下产业方向带来机遇。 第 2章　UI设计发展史及未来 移动硬盘、云盘、高清电视、8K屏，高清视频内容提供方、VR/AR类视频应用的 UI， 如图 2-9所示。 VR/AR购物和物联网，如图 2-10所示。 图 2-9 VR/AR类视频应用的 UI 图 2-10 VR/AR购物和物联网的 UI 语音控制家居、居家机器人、家庭娱乐系统的 UI，如图 2-11所示。 随着通信基站、迷你微基站、手机硬件、芯片和电池、系统优化、柔性屏、云计算技术 的发展，各种 UI形态都会出现，汽车 HMI设计的 UI如图 2-12所示。无人驾驶、无人送货、 运输机器人、送货上门 App、仓储、营销、供应链等模式下也会有新的 UI出现。 图 2-11 智能家居的 UI 图 2-12 汽车 HMI设计的 UI 工业互联网、云端制造、自动化机器人、3D 打印定制等情形下会有更多的 UI新形势， 如人脸识别的 UI设计。 智能气象预测及 AR表现的 UI设计，如图 2-13所示。 医药研发、基因排查、智能看护、远程问诊形态下的人工器官 UI设计，如图 2-14所示。 图 2-13 智能气象预测及 AR表现的 UI设计图 2-14 远程问诊的 UI设计 智能农业、无人机洒农药、立体农场；智能虚拟货币、区块链、版权申报、自动金融系 统、投资风险分析、会计出纳；人工智能机器人、同声翻译棒、生活辅助系统（如盲人识图 系统）等都需要新的 UI设计。 2.4设计师能力模型 很多初级 UI设计师一直对能力模型陷入死胡同，所以需要详细说明。 多数设计师对于高级设计师的 “幻想”都是在能力模型中可以达到满分或者基本满分的 水平，比如图 2-15所示的这种情况。UI设计师的能力包括商业插画、移动端设计、管理界面 设计、网页设计、产品思维、交互思维、项目管理、沟通协作、规范认识、审美品位、动效 设计和运营视觉。 图 2-15 感性的 UI设计师能力模型 客观地讲，全能 UI设计师是不存在的，如果有谁在能力模型中都得到满分，那只有一种 可能，就是把能力标准上限设置得太低。 术业有专攻，即使是在 UI 设计领域，也有不同的方向可以垂直发展。在初级阶段时，所 处的小团队或者创业公司需要职员具备的能力维度较广，身兼数职，导致他们对职业发展的 认识就是觉得需要全面化发展，才能迎合市场需要。这是所有没有在一线大公司工作过的设 计师面临的最大问题，被低端工作环境中释放的错位信号所误导。 为了更好地让大家定位自己的能力级别，可以参考普通设计师的能力说明，如图 2-16 所示。 图 2-16 普通设计师能力说明 第 2章　UI设计发展史及未来 高级设计师能力说明，如图 2-17所示。 图 2-17 高级设计师能力说明 专家级设计师能力说明，如图 2-18所示。 图 2-18 专家设计师能力说明 这时再来看一线大公司或优秀团队对中高级设计师的要求模型，会发现它们呈现出非常 剧烈的高低起伏，而不是平均化，甚至不少能力的要求约等于无。图 2-19所示为一线大公司 对于设计师的需求。 图 2-19 一线大公司对于 UI设计师的需求 015 第2章　UI设计发展史及未来 高级岗位所需的能力，需要花费足够的时间去学习和沉淀，即能力的成长曲线增长会越 来越缓慢，所以一定要集中精力抓住主要能力。 图 2-20所示为字节跳动的 UI 设计师岗位需求。 图 2-20 字节跳动的UI设计师岗位要求 对于UI设计师，可以肯定的是现在的UI设计师需求主要关注B端产品设计及交互、用 户研究等技能，这在一线大公司的岗位中是非常普遍的，于是我们可以画出符合它的能力模 型图，如图 2-21所示。 图 2-21 理性的UI设计师能力模型图 第2章　UI设计发展史及未来 高级岗位所需的能力，需要花费足够的时间去学习和沉淀，即能力的成长曲线增长会越 来越缓慢，所以一定要集中精力抓住主要能力。 图 2-20所示为字节跳动的 UI 设计师岗位需求。 图 2-20 字节跳动的UI设计师岗位要求 对于UI设计师，可以肯定的是现在的UI设计师需求主要关注B端产品设计及交互、用 户研究等技能，这在一线大公司的岗位中是非常普遍的，于是我们可以画出符合它的能力模 型图，如图 2-21所示。 图 2-21 理性的UI设计师能力模型图 在UI设计领域，有许多优秀的软件可供选择。其中对于优秀的UI设计来说，必须掌握 的软件包括Photoshop、Illustrator、Figma、After Effects、Blender或者C4D、蓝湖。当然， MasterGo、即时设计、Pixso、Sketch、Adobe XD、Axure RP、MinderManager等工具也是必 须掌握和了解的。 本章主要讲解UI设计软件Photoshop、Illustrator、Figma的学习捷径和UI项目流程。 3.1Photoshop学习捷径 可以扫码学习Photoshop在UI设计中的应用。UI设计师要学习的Photoshop内容基本上 包括以下几点。 1. 初识Photoshop Photoshop主要处理以像素构成的数字图像。使用其众多的编辑与绘图工具，可以有效地 进行图片编辑工作。Photoshop有很多功能，在图像、图形、文字、视频、出版等各方面都有 涉及。 2. 认识主界面与新建文件 包括Photoshop界面构成、快捷键、工作区的设置、面板功能等。 3. 文件的打开和存储 Photoshop文件的打开与保存功能等。 4. 图层功能 Photoshop图层的使用，在图层处右击可进行删除选中图层、新建、复制选中图层等操 作等。 5. 面板功能 面板是Photoshop的主要功能之一。如果平常对Illustrator比较熟悉的话，那么可能知道怎么 利用面板来改善设计操作。对于庞大的设计管理和输出多种文件，面板可以说是很有用的工具。 6. 移动工具 初学Photoshop的读者往往会忽略移动工具的强大功能。其实，移动工具不仅可以移动图 层，还可以很方便地快速选定图层，调整图片大小、旋转图片等。 3第 章 UI设计软件及项目流程 3.1Photoshop学习捷径 可以扫码学习Photoshop在UI设计中的应用。UI设计师要学习的Photoshop内容基本上 包括以下几点。 1. 初识Photoshop Photoshop主要处理以像素构成的数字图像。使用其众多的编辑与绘图工具，可以有效地 进行图片编辑工作。Photoshop有很多功能，在图像、图形、文字、视频、出版等各方面都有 涉及。 2. 认识主界面与新建文件 包括Photoshop界面构成、快捷键、工作区的设置、面板功能等。 3. 文件的打开和存储 Photoshop文件的打开与保存功能等。 4. 图层功能 Photoshop图层的使用，在图层处右击可进行删除选中图层、新建、复制选中图层等操 作等。 5. 面板功能 面板是Photoshop的主要功能之一。如果平常对Illustrator比较熟悉的话，那么可能知道怎么 利用面板来改善设计操作。对于庞大的设计管理和输出多种文件，面板可以说是很有用的工具。 6. 移动工具 初学Photoshop的读者往往会忽略移动工具的强大功能。其实，移动工具不仅可以移动图 层，还可以很方便地快速选定图层，调整图片大小、旋转图片等。 3第 章 UI设计软件及项目流程 第 3章　UI设计软件及项目流程 7. 选区与剪切 对于 Photoshop软件来说，其实就是选择的艺术，选区的应用始终贯穿在设计之中。所谓 剪切，就是在当前图层建立好选区范围后，从该图层中剪掉选区中的元素。 8. 画笔工具 画笔工具，顾名思义就是用来绘制图画的工具。画笔工具是手绘时最常用的工具，它可 以用来上色、画线等。画笔工具画出的线条边缘比较柔和流畅，也可以用画笔工具绘制出各 种漂亮的图案。 9. 钢笔工具 绘制直线、曲线、转折曲线，以及删除某段或者整个路径的操作，都是用钢笔工具来完 成。想要用好钢笔工具并不难，主要是多练习。 10. 图层样式 那么什么是样式呢？可以说是图层风格。图层样式是一系列能够为图层添加各种各样特 殊效果的样式，如浮雕、描边、内发光、渐变叠加、外发光、投影之类的效果。 11. 布尔运算 布尔运算在 Photoshop作图方面是非常重要的，布尔运算实质上就是路径的操作，包括 4 种方式，分别是相加、相减、相交、反向相交。 12. 剪切蒙版 有时经常想要将漂亮的图片放进各种各样好看的不规则形状里，显得生动活泼、不呆 板，排版时更是多用，其实用 Photoshop的剪切蒙版来实现十分简单。 13. 图层蒙版 图层蒙版是在当前图层上面覆盖一层玻璃片，这种玻璃片有透明的、半透明的、完全不 透明的，图层蒙版是 Photoshop中一项十分重要的功能。 14. 文字工具 文字工具是最常使用的一个工具。 15. 变换工具 使用 Photoshop中的自由变换工具，可以轻松调整图像的大小，变换图形的透视。 16. 色彩基础 认识 Photoshop里基础的色彩知识、简介及色彩的产生，因为有光，所以见色，色彩是人 对光线的感知信号。光源光有太阳、电灯等，反射光有月亮等。色彩模式主要有 RGB模式、 CMYK模式等。 17. 图像调整 Photoshop之所以是图像处理大师，就是因为它有强大的图像调整功能，包括色彩调整、 滤镜特效调整等。 18. 智能滤镜 Photoshop中的智能滤镜是一种应用于智能对象的滤镜，如果当前图层为智能对象，可直 接对其应用滤镜，而不必将其转换为智能滤镜。 19. 绘制 UI拟物图标 在 Photoshop中绘制的 UI拟物图标案例，如图 3-1所示。 20. 绘制 UI轻质感图标 在 Photoshop中绘制的 UI轻质感图标案例，如图 3-2所示。 图 3-1 在 Photoshop中绘制 UI拟物图标 图 3-2 在 Photoshop中绘制 UI轻质感图标 3.2Illustrator学习捷径 可以扫码学习 Illustrator在 UI设计中的应用。UI设计师要学习的 Illustrator内容基本上包 括以下几点。 1. 初识 Illustrator Illustrator主要处理以矢量所构成的数字图像。使用其众多的编修与绘图工具，可以有效 地进行图片编辑工作。Illustrator有很多功能，在图像、图形、文字、视频、出版等各方面都 有涉及。 第 3章　UI设计软件及项目流程 2. 认识主界面与新建文件 包括 Illustrator界面构成、快捷键、工作区的设置、画板功能等。 3. 选择工具、直线工具和图层 在 Illustrator中，选择工具、直线工具和图层都是非常重要的工具和概念。 选择工具：快捷键 V，用于选择单个或多个图层或对象。可以通过单击或拖动来选择多 个图层或对象。在选择工具的选项栏中，可以选择“新选区”“添加到选区”或“从选区中减 去”来调整选择的范围。 直线工具：快捷键 \，用于绘制直线。在直线工具的选项栏中，可以选择直线的起点和终 点，以及直线的颜色和粗细。 图层：在 Illustrator中，图层是用于组织和管理图形元素的层次结构。每个图层都包含一 个或多个对象，并且可以独立地移动、锁定、隐藏或合并。使用图层可以使图形更加易于编 辑和组织。 4. 形状工具的使用 Illustrator是一款广泛应用于平面设计、插画、排版等领域的软件。它提供了丰富的形状工 具，可以让用户轻松地创建各种形状和图形。下面是一些关于 Illustrator形状工具的使用方法。 矩形工具：矩形工具可以用来创建矩形和正方形。直接拖曳鼠标即可创建一个矩形，按 住 Shift键拖曳则可以创建一个正方形。 椭圆工具：椭圆工具可以用来创建椭圆形和圆形。直接拖曳鼠标即可创建一个椭圆形， 按住 Shift键拖曳则可以创建一个圆形。 多边形工具：多边形工具可以用来创建多边形。在工具栏中选择多边形工具后，在画布上单 击并拖曳鼠标，即可创建一个多边形。可以在多边形工具的属性栏中设置多边形的边数。 星形工具：星形工具可以用来创建星形。在工具栏中选择星形工具后，在画布上点单并 拖曳鼠标，即可创建一个星形。可以在星形工具的属性栏中设置星形的边数和大小。 光晕工具：光晕工具可以用来创建光晕效果。在工具栏中选择光晕工具后，在画布上单 击并拖曳鼠标，即可创建一个光晕。可以在光晕工具的属性栏中设置光晕的大小、模糊度、 透明度等参数。 路径查找器：路径查找器是 Adobe Illustrator中的一个重要功能，它可以用来对形状进行各种 操作，如合并、减去、交叉等。在菜单栏中选择“路径查找器”，即可打开“路径查找器” 面板。 5. 钢笔工具 Illustrator的钢笔工具是一个非常强大的工具，它允许用户通过单击和拖动鼠标来绘制各 种形状和路径。以下是使用 Illustrator钢笔工具的一些基本步骤。 1）打开 Illustrator并创建一个新的文档。 2）在工具栏中选择“钢笔工具”（快捷键 P）。 3）在画布上单击以创建起点。 4）继续单击并拖动鼠标以创建曲线或直线。 5）释放鼠标以完成路径。 6）要创建闭合形状，只需将起点与终点对齐并单击鼠标。 7）创建完成后，可以调整锚点以更改路径的形状。 8）在画布上绘制完成后，可以保存路径并在其他文档中使用。 除了基本的钢笔工具， Illustrator还提供了其他一些有用的工具，如“形状生成器工具” （快捷键 M）和“路径查找器工具”（快捷键 F6），这些工具可以帮助用户编辑和优化路径。 在使用钢笔工具时，有一些技巧可以帮助用户更好地控制路径的形状和线条。例如，在 创建曲线时，可以使用方向线来调整曲线的弯曲程度和方向。此外，还可以使用锚点来控制 路径的形状和方向。 总之， Illustrator的钢笔工具是一个非常强大的工具，它可以帮助用户创建各种形状和路 径。通过掌握一些基本的技巧和工具，可以轻松地使用钢笔工具来创建出高质量的图形作品。 6. 文字工具 在 Illustrator中，有几种不同的文字工具可供使用。以下是关于 Illustrator中文字工具的一 些信息。 文字工具：最基本的文字工具，用于创建和编辑单行或单列文本。可以在画布上单击并 输入文本，也可以通过拖动来创建多个字符的文本。 直排文字工具：用于创建竖排文本的工具。可以在画布上单击并输入竖排文本，也可以 通过拖动来创建多个字符的竖排文本。 路径文字工具：用于在路径上创建文本的工具。首先，需要使用 “钢笔工具 ”或“形状 工具”创建一个路径。然后，选择路径文字工具并放在路径上，当出现“路径”二字时单击 鼠标，可以在路径上输入文本。 在使用这些工具时，还可以通过选择“文字”菜单中的其他选项来编辑和格式化文本。 例如，可以使用 “字符 ”面板来更改字体、大小、颜色等属性，使用 “段落 ”面板来更改文 本的行距、段距等属性。 此外，还可以使用“对象”菜单中的“文本绕排”功能将文本环绕在其他图形元素周围。 7. 线弧线网格、雷达与描边属性 在 Illustrator中，线弧线网格、雷达与描边属性是重要的绘图和编辑工具。以下是对这些 属性的简要介绍。 线弧线网格：在 Illustrator中，可以使用线弧线网格绘制复杂的形状和曲线。它允许用 户通过创建线段和弧线来构建复杂的图形。可以调整线段和弧线的长度、角度、弯曲度等属 性，以满足设计需求。 雷达： Illustrator中的一个工具，用于创建具有相似形状的多个对象。它可以根据选择的 第一个对象自动复制并调整其形状，以创建多个相似的对象。可以调整雷达工具中的各种参 数，以控制复制对象的形状、大小和间距等属性。 描边属性：描边属性是 Illustrator中用于设置图形边缘的属性。可以更改描边的颜色、宽 度、样式等属性，以使图形更加生动和有吸引力。可以对单个对象或图层应用描边属性，也 可以在画板上的多个对象上应用统一的描边属性。 总之，线弧线网格、雷达和描边属性都是 Illustrator中强大的工具，可以帮助用户创建出 更加精美和专业的图形作品。 8. 画笔工具 Illustrator的画笔工具是用于创建和编辑矢量图形的强大工具。以下是关于如何使用 Illustrator的画笔工具的一些基本步骤。 1）打开 Illustrator并创建一个新的文档。 2）在顶部菜单栏中选择“画笔工具”（快捷键 B）。 3）在画笔工具的选项栏中，可以选择不同的画笔类型，包括线条、形状、艺术等。 4）在画布上单击并拖曳鼠标，以创建所需的形状或线条。 5）如果想更改画笔的颜色、大小或其他属性，可以在画笔工具的选项栏中进行调整。 6）如果想编辑已经创建的路径，可以使用直接选择工具（快捷键 A）选中路径，然后进 行编辑。 7）如果想更改整个图形的颜色或样式，可以使用“对象”菜单中的“图层”命令来更改 图层的颜色或样式。 8）完成绘制后，可以选择“文件”菜单中的“保存”命令来保存作品。 以上是使用 Illustrator的画笔工具的基本步骤。当然，还有很多高级技巧和功能可以探 索，如使用不同的画笔库、创建自定义画笔等。 第 3章　UI设计软件及项目流程 9. 橡皮擦、美工刀、剪刀工具 在 Illustrator中，橡皮擦、美工刀和剪刀是常用的工具，用于编辑和处理矢量图形。 橡皮擦工具：用于擦除图形的一部分。选择橡皮擦工具后，将鼠标光标移到图形上，单 击并拖动鼠标，即可擦除鼠标光标经过的路径部分。注意，橡皮擦工具只会影响路径的轮廓 线，而不会影响填充色。 美工刀工具：用于切割路径。选择美工刀工具后，将鼠标光标移到路径上，单击并拖动 鼠标，即可将路径切割成两部分。切割后的路径会自动变为闭合状态。 剪刀工具：用于剪切路径。选择剪刀工具后，将鼠标光标移到路径上，单击并拖动鼠 标，即可将路径剪开。剪刀工具只能剪开直线或曲线路径的一部分，而不能完全剪断路径。 10. 旋转、比例、镜像和斜切 在 Illustrator中，可以轻松地执行旋转、缩放、镜像和斜切操作。以下是具体的操作步骤。 旋转：选择想要旋转的对象；执行“对象 /变换 /旋转”命令；在弹出的“旋转”对话框 中可以设置旋转的中心点、角度和次数；如果想要围绕特定的参考点旋转，按住 Alt键然后在 画布上单击想要的参考点。 比例：选择想要缩放的对象；执行“对象 /变换 /缩放”命令；在弹出的“缩放”对话框 中可以设置缩放的比例因子；还可以通过拖动对象的控制点来直接缩放，当选中对象并拖动 其控制点时，按住 Shift键可以约束对象在宽度和高度上的缩放比例。 镜像：选择想要镜像的对象；执行“对象 /变换 /镜像”命令；在弹出的“镜像”对话框 中可以选择镜像的轴（水平或垂直）；如果想要以对象的中心点为轴进行镜像，请选择“中心 点”选项。 斜切：选择想要斜切的对象；执行“编辑 /自由变换”命令；在自由变换工具中，将光标 放到对象的边上，当出现十字形箭头时，按住鼠标并拖曳以实现斜切效果；如果要保持原高 度不变，拖曳时按住 Shift键即可。 11. 宽度与异性类变形 在 Illustrator中，可以使用“宽度工具”和“变形工具”对形状进行变形和调整。 “宽度工具”允许调整直线或形状的宽度。要使用此工具，请选择“宽度工具”，然后将 鼠标光标移入直线的路径，调整出想要的宽度后，扩展成为形状。 “变形工具”则允许对形状进行各种变形操作。例如，可以画一个矩形，然后选中变形工 具，去蹭矩形的边缘，可向内或向外。此外，执行“效果 /变形”命令，其中包含很多特殊的 变形效果，如矩形的变形、圆形的变形等。 12. 自由变换、操控变形 在 Illustrator中，自由变换和操控变形是两个常用的工具，用于对图稿进行变形和变换操作。 自由变换工具允许用户自由地扭曲、旋转、缩放和倾斜图稿。要使用自由变换工具，首 先选择要变换的图稿，然后按 Ctrl+T组合键进入自由变换模式。在自由变换模式下，可以通 过拖动定界框的角和边来对图稿进行变形。 操控变形工具则提供了更多的控制选项，能够更精确地控制图稿的变形。通过操控变形 工具，可以添加、移动和旋转图钉，以便无缝地将图稿变换为各种变体。要使用操控变形工 具，首先选择要变形的图稿，然后在工具栏中选择“操控变形”工具。默认情况下， Illustrator 可找出其中适合变换图稿的区域并自动添加图钉。可以通过单击图稿来添加更多图钉，并通 过拖动图钉来变换内容。相邻的图钉使附近的区域保持不变。 总的来说，自由变换和操控变形都是非常强大的工具，能够帮助用户对图稿进行各种变 形操作。 13. 形状生成 在 Illustrator中，形状生成器工具可以帮助用户将多个形状组合成一个新的形状。以下是 使用形状生成器工具的一些基本步骤。 1）打开 Illustrator，并打开想要编辑的文件。 2）在工具箱中选择“形状生成器工具”，或者按 Shift+M组合键。 3）在画布上选择想要合并的多个形状。可以通过单击并拖动鼠标来选择多个形状。 4）释放鼠标，形状生成器工具自动将选择的形状合并成一个新的形状。 在合并形状时，可以选择 “相加 ”或“相减 ”选项。如果选择了 “相减 ”选项，则选择 的形状将被减去。 14. 网格工具 Illustrator中的网格工具可以帮助用户在创建和编辑图形时提供辅助线，以帮助对齐和定 位对象。 15. 渐变与透明度 在 Illustrator中，可以使用渐变和透明度来创建各种视觉效果。以下是一些关于如何在 Illustrator中使用渐变和透明度的基本步骤。 创建渐变：选择想要填充的对象；单击具栏中的“渐变”工具，或者按 G键选择渐变 工具；在画板上单击并拖动以创建渐变；可以在两个不同的位置单击以定义渐变的起点和终 点；调整渐变滑块以改变颜色和透明度；可以添加更多的滑块来创建更复杂的渐变效果。 应用透明度：选择想要应用透明度的对象；在右侧的 “透明度”面板中，可以看到一个 “不透明度”滑块，可以通过移动滑块来改变对象的透明度；如果想要创建一个带有渐变透 明度的对象，可以在“透明度”面板中选择“渐变”选项，然后调整渐变滑块以定义透明度 和不透明度。 创建透明蒙版：选择想要创建透明蒙版的对象；单击“透明度”面板右边的三角形，选 择“建立不透明蒙版”；这将创建一个新的对象，该对象的形状与原始对象相同，但颜色和透 明度可以独立调整。 调整透明蒙版：选择透明蒙版对象；在“透明度”面板中，可以通过调整不透明度滑块 来改变蒙版的透明度；还可以使用渐变工具来创建渐变蒙版，以在蒙版上应用渐变效果。 保存和导出带有透明度的文件：当在 Illustrator中创建带有透明度的文件时，记得保存 文件为 PNG或 SVG格式，因为这些格式支持透明度；如果想要将文件导出为其他格式（如 JPEG或 TIFF），需要确保透明度区域不会被填充为白色或其他颜色。可以通过执行“文件 / 导出”命令，在弹出的对话框中选择“透明”选项来导出带有透明度的文件。 16. 混合工具 Illustrator中的混合工具允许将两个或多个对象混合在一起，以创建一种平滑的过渡效 果。混合工具可以应用于颜色、效果、填色和描边等外观属性。 要使用混合工具，请按照以下步骤操作。 1）选择需要混合的对象。可以通过单击并拖动鼠标来选择一个或多个对象。 2）在左侧工具栏中，找到混合工具（ Blend Tool），它通常位于工具栏的底部。 3）双击混合工具调出属性栏。在属性栏中，可以选择设置混合的方式，如平滑颜色、指 定步数或指定距离。 4）选择平滑颜色选项，将自动计算混合的步骤数。 5）或者选择指定步数或指定距离选项，在相应的设置栏中调整所需的数值。 6）确定后，将在画布中看到两个对象之间的混合效果。 混合轴连接着混合对象间的路径，可以通过相关路径工具进行编辑。还可以绘制新路径 替换混合轴。框选对象和路径，然后执行“对象 /混合 /替换混合轴”命令即可。 此外，还可以使用混合工具来制作文字的混合效果。选择两个文字对象，然后按 Ctrl+ Alt+B组合键进行混合。在弹出的混合选项菜单中，可以选择不同的间距设置来调整混合效果。 17. 喷枪工具 在 Illustrator中，喷枪工具是一种用于创建柔和、模糊边缘的画笔工具。它模拟了喷枪的 第 3章　UI设计软件及项目流程 效果，可以产生柔和的渐变效果和柔和的边缘。 18. 画板和吸管 在 Illustrator中，画板和吸管工具是两个非常有用的功能。 画板是一个用于绘制和编辑图形的区域。可以在画板上创建多个画板，以便在同一个文 档中组织和编辑多个图形。吸管工具允许从现有图形中吸取颜色、描边和渐变等属性。 19. 布尔运算 Illustrator的布尔运算是一种将两个或多个形状组合在一起，创造出新形状的技术。它通 过一系列的逻辑操作，包括并集、交集、差集和排除，将不同的形状组合在一起，创造出更 加复杂的形状和图案。这种技术可以在各种设计中使用，如标志、图标、海报、包装等。 20. 图层样式 在 Illustrator中，图层样式是用于增强和装饰图层的一个重要工具。它们可以应用于各种 对象，如文本、形状和图像，以增加深度、视觉效果和吸引力。 以下是使用 Illustrator图层样式的一些基本步骤。 1）打开 Illustrator并创建一个新文档。 2）在新文档中选择要应用图层样式的对象，可以是文本、形状或图像等。 3）在菜单栏中选择“效果”菜单。 4）在“效果”子菜单中选择“风格化”命令。 5）在“风格化”子菜单中可以选择不同的图层样式。例如，“投影”是一种可以为对象 添加阴影效果的样式，“内发光”可以让对象内部发光，“外发光”可以让对象外部发光等。 6）选择一个图层样式后，会弹出一个相应的设置面板，在这个面板中可以调整各种参 数，以控制该图层样式的外观和效果。 7）调整完参数后，单击“确定”按钮应用图层样式。 如果想隐藏或取消样式，可以在“窗口”菜单中选择“外观”命令，打开“外观”窗 口。在这个窗口中，可以找到样式名称（如“投影”），前面的眼睛代表隐藏 /显示，右下角 的垃圾桶图标代表删除。双击投影还可以再次打开设置面板进行调整。 21. 标准化 LOGO图标制作 下面是在 Illustrator中绘制的 LOGO图标案例，如图 3-3所示。 图 3-3 在 Illustrator中绘制标准 LOGO图标 22. 3D立体字制作 下面是在 Illustrator中绘制的 3D立体字制作案例，如图 3-4所示。 图 3-4 在 Illustrator中进行 3D立体字制作 23. UI质感图标制作 下面是在 Illustrator中完成的 UI质感图标制作案例，如图 3-5所示。 图 3-5 在 Illustrator中完成的 UI质感图标制作案例 24. 海报制作 下面是在 Illustrator中完成的海报制作案例，如图 3-6所示。 第 3章　UI设计软件及项目流程 图 3-6 在 Illustrator中完成的海报制作案例 3.3Figma学习捷径 UI设计师要学习的 Figma内容基本上包括以下几点。 1. Figma基础操作 包括了解 Figma的基本概念和界面布局，如何创建和保存文件，如何使用不同的面板和 图层，如何使用基本的形状工具和线条工具，如何 调整形状的属性（如颜色、描边、透明度等）和组 织图层，以及如何使用参考线和网格来对齐元素。 2. Figma高级技巧 包括如何使用 Figma的布尔运算（如合并、减 去、交叉等）来创建复杂的形状，如何使用路径和 锚点来编辑形状，如何使用渐变、纹理和图案来填 充形状，如何使用 Figma的插件生态（包括如何安 装、使用和管理插件），如何与其他用户实时协作及 如何管理团队和项目。 3. Figma完成一个页面设计 下面是在 Figma中完成的 UI页面设计，如图 3-7所示。 如果需要更多有关 UI设计软件的教学，可以联 系售后。 3.4UI项目资源管理 对于较大的 UI设计项目，特别是上百个页面、 上千个页面的 UI设计项目，就需要可续的 UI项 目资管理。 UI项目资源管理流程如图 3-8和图 3-9 所示。 图 3-7 在 Figma中完成的 UI页面设计 图 3-8 UI 项目资源管理 1 图 3-9 UI 项目资源管理 2 目前，所有的 UI设计师的内容都会上传到第三方服务平台上，如蓝湖 https://lanhuapp. com。 3.5产品开发项目流程 正常的互联网产品研发分为 5 个阶段，如图 3-10～图 3-14所示。 图 3-10 互联网产品调研阶段图 3-11 互联网产品数据分析阶段 图 3-12 互联网产品设计阶段图 3-13 互联网产品开发阶段 1）产品调研阶段。 2）数据分析阶段。 3）产品设计阶段。 4）产品开发阶段。 5）上线运营阶段。 图 3-14 互联网产品上线运营阶段 027 第4章　UI设计的20个通用原则 本章主要讲解UI设计的20个通用原则，UI 设计的通用原则总结下来有以下20条。 1. 明确用户群 在UI设计中，明确用户群是非常重要的。不同阶层、不同年龄的用户在使用不同产品时 都有相对的风格偏好，所以必须有针对性地进行设计。 可以通过用户调研来了解用户群体的特点，包括用户画像、用户体验地图、故事板等， 这些都可以作为设计时的参考和依据。 2. 界面要清晰，简洁明了 清晰度是界面设计中的第一步，也是最重要的工作，要让用户第一眼就能识别出图标和 控件的功能。让用户使用它时，能预料到将发生什么，并与之交互完成自己的操作任务。另 外，界面中使用的图片也要清晰不变形，背景元素不要干扰阻挡功能。 一个清晰、简洁明了的UI界面对于用户体验来说非常重要。以下是一些设计原则，可以 帮助读者创建这样的界面。 保持一致性：在设计UI时，保持一致的风格和设计语言，以便用户能够轻松地理解和 操作。 简化界面：尽量减少界面上的元素和复杂性，突出最重要的信息。使用图标、标签和颜 色来传达信息，但不要过度使用。 清晰的布局：使用网格或模块化布局来组织界面，使其具有层次感，易于阅读。 字体和颜色：选择易于阅读的字体和对比度高的颜色，以确保信息清晰易读。 明确的操作流程：通过使用明确的操作流程和导航菜单，使用户能够轻松地完成任务或 找到所需的信息。 响应式设计：确保UI在不同的设备和屏幕尺寸上都能良好地呈现和使用。 情感化设计：使用符合用户期望和品牌形象的色彩、图标和插图来增强用户体验。 反馈和提示：提供必要的反馈和提示，以帮助用户更好地理解和完成任务。 适应性和个性化：根据用户的需求和偏好提供适应性和个性化功能，以提高用户体验。 测试和优化：在UI开发过程中定期进行测试和优化，以确保界面在各种情况下都能良好 地运行和工作。 通过遵循这些原则，可以创建一个清晰、简洁明了的UI界面，提高用户体验并增强品牌 形象。 3. 交互性 人机交互就是指人与机器的交流与互动。优秀的界面能够让用户高效地完成操作和任 4第 章 UI设计的20个通用原则 第4章　UI设计的20个通用原则 本章主要讲解UI设计的20个通用原则，UI 设计的通用原则总结下来有以下20条。 1. 明确用户群 在UI设计中，明确用户群是非常重要的。不同阶层、不同年龄的用户在使用不同产品时 都有相对的风格偏好，所以必须有针对性地进行设计。 可以通过用户调研来了解用户群体的特点，包括用户画像、用户体验地图、故事板等， 这些都可以作为设计时的参考和依据。 2. 界面要清晰，简洁明了 清晰度是界面设计中的第一步，也是最重要的工作，要让用户第一眼就能识别出图标和 控件的功能。让用户使用它时，能预料到将发生什么，并与之交互完成自己的操作任务。另 外，界面中使用的图片也要清晰不变形，背景元素不要干扰阻挡功能。 一个清晰、简洁明了的UI界面对于用户体验来说非常重要。以下是一些设计原则，可以 帮助读者创建这样的界面。 保持一致性：在设计UI时，保持一致的风格和设计语言，以便用户能够轻松地理解和 操作。 简化界面：尽量减少界面上的元素和复杂性，突出最重要的信息。使用图标、标签和颜 色来传达信息，但不要过度使用。 清晰的布局：使用网格或模块化布局来组织界面，使其具有层次感，易于阅读。 字体和颜色：选择易于阅读的字体和对比度高的颜色，以确保信息清晰易读。 明确的操作流程：通过使用明确的操作流程和导航菜单，使用户能够轻松地完成任务或 找到所需的信息。 响应式设计：确保UI在不同的设备和屏幕尺寸上都能良好地呈现和使用。 情感化设计：使用符合用户期望和品牌形象的色彩、图标和插图来增强用户体验。 反馈和提示：提供必要的反馈和提示，以帮助用户更好地理解和完成任务。 适应性和个性化：根据用户的需求和偏好提供适应性和个性化功能，以提高用户体验。 测试和优化：在UI开发过程中定期进行测试和优化，以确保界面在各种情况下都能良好 地运行和工作。 通过遵循这些原则，可以创建一个清晰、简洁明了的UI界面，提高用户体验并增强品牌 形象。 3. 交互性 人机交互就是指人与机器的交流与互动。优秀的界面能够让用户高效地完成操作和任 4第 章 UI设计的20个通用原则 务，减少出错率，增加易用性。优秀的界面应符合人类的现实世界的操作逻辑，以减少用户 的学习成本。UI交互性是指用户与界面之间的互动和交流，以及用户对界面操作的效率和舒 适度。UI交互性包括以下几个方面。 易用性：界面应该易于使用，避免复杂和烦琐的操作，减少用户的学习成本和操作 难度。 反馈性：界面应该提供及时、准确、有用的反馈，让用户知道自己的操作是否成功，以 及如何进行下一步操作。 一致性：界面应该保持一致性，避免用户在不同页面或不同功能之间反复适应不同的操 作方式或规则。 容错性：界面应该具备容错性，避免用户因误操作而无法完成目标操作。 交互效果：界面应该具备一定的交互效果，如动画效果、音效等，以提高用户的操作体 验和趣味性。 在 UI设计中，交互性的实现需要考虑用户的需求和习惯，以及产品的功能和特点，以提 高产品的易用性和用户体验。 4. 保持用户的注意力 在进行界面设计时，能够吸引用户的注意力是很关键的，因此千万不要将重要功能的周 围设计得乱七八糟，分散用户的注意力。谨记屏幕整洁能够吸引注意力的重要性。 在 UI设计中，保持用户的注意力非常重要。以下是一些设计策略，可以吸引并保持用户 的注意力。 明确设计目标：首先，需要明确设计目标。想要用户做什么？了解这一点以后可以更好 地组织设计元素，并使重点更加突出。 使用吸引人的色彩：色彩可以有效地吸引用户的注意力。使用鲜艳、对比强烈的颜色可 以突出重要的元素。不过，也要注意不要过度使用，以免过于混乱。 利用对比：对比可以增加视觉冲击力。可以通过字体大小、颜色、形状、位置等来制造 对比。 引导用户的视线：通过使用箭头、线条、形状等来引导用户的视线。这样可以帮助他们 更好地理解信息层次结构。 保持一致性：一致性的设计可以让用户感到舒适，并更容易理解信息。包括颜色、字 体、形状、布局等的一致性。 提供清晰的层次结构：在设计时，要确保信息的层次结构清晰。最重要的信息应该最显 眼，次要的信息应该稍微隐蔽一些。 使用动画和过渡：适当的动画和过渡效果可以使设计更加生动和有趣。但是，注意不要 过度使用，以免分散用户的注意力。 优化移动端体验：随着移动设备使用的普及，优化移动端的 UI设计变得非常重要。确保 自己的设计在各种设备上都能正常工作，并保持一致性。 测试和迭代：最后，不断地测试你的设计，并根据反馈进行迭代。这样可以更好地理解 用户的需求，并优化设计。 通过以上策略，可以创建一个吸引人且易于使用的 UI设计，从而保持用户的注意力。 5.让用户掌控界面 保证界面处在用户的掌控之中，让用户自己决定系统状态，功能区分合理，适当提示引 导，在进行破坏性操作前给予用户提示，让用户可以随意地在可操作范围内前进或返回，并 随时告知用户所在位置。 UI设计，即用户界面设计，旨在创造一个用户友好的界面，让用户能够轻松、愉快地使 用产品或服务。在 UI设计中，让用户掌控界面是一个重要的原则。下面将探讨如何通过以下 几个方面实现这一原则。 第 4章　UI设计的 20个通用原则 （1）明确用户需求 首先，要了解用户的需求和习惯。通过市场调研、用户访谈和数据分析等方法，收集关 于用户的信息，从而确定用户对界面设计的需求和期望。这样，设计师可以更好地从用户的 角度出发，设计出符合用户习惯和喜好的界面。 （2）简化操作流程 在设计界面时，尽量简化操作流程，避免冗余的步骤。每个界面都应清晰明了，让用户 一目了然。设计师可以通过对操作流程的优化和精简，降低用户的使用门槛，提高用户的使 用效率。 （3）提供明确的反馈 界面设计应提供及时的反馈，让用户明确了解自己的操作结果。例如，当用户单击一个 按钮时，界面应给出相应的反馈，如弹出一个对话框或显示一个新的页面。这样可以增强用 户的掌控感，提高用户体验。 （4）适应不同设备 随着移动设备的普及，设计师需要考虑在不同设备上的用户体验。针对不同设备，可以 设计不同的界面布局和交互方式，以满足用户在各种场景下的需求。 （5）持续优化迭代 UI设计是一个持续优化迭代的过程。设计师需要关注用户的反馈，根据用户的意见和建 议对界面进行改进。只有不断地优化和改进，才能让用户对界面更加满意，从而提高产品的 使用率和满意度。 总之，让用户掌控界面是 UI设计的重要原则。设计师需要通过明确用户需求、简化操作 流程、提供明确的反馈、适应不同设备和持续优化迭代等来实现这一原则，从而提高用户体 验和产品的竞争力。 6. 每个屏幕需要一个主题 我们设计的每一个画面都应该有一个重要的主题，这样不仅能够让用户使用到它真正的 价值，上手也很容易，使用起来也更方便。如果一个页面上非要有多个焦点，可以使用激活 焦点、屏蔽其他焦点的方法。 在 UI设计中，为每个屏幕设置一个主题是一个很好的做法，可以提高用户体验的一致 性和连贯性。通过为每个屏幕或页面设置一个明确的主题，可以确保用户在浏览不同的屏幕 时，能够清楚地了解它们所在的位置及所访问的内容的相关性。 设置主题可以涉及以下几个方面。 色彩搭配：每个主题都可以使用特定的色彩搭配，以在视觉上区分不同的屏幕。确保色 彩搭配符合品牌形象或设计风格，并在整个应用程序中保持一致。 图标和图形：使用与主题相关的图标和图形可以增加视觉效果并提高用户识别。包括与 屏幕内容相关的插图、图标或照片。 布局和排版：考虑每个屏幕的布局和排版，使其与整体设计风格相一致。确保屏幕元素 （如按钮、表单和导航栏）的位置和样式在整个应用程序中保持一致，以帮助用户更好地导 航和理解内容。 背景和主题色：选择一个与主题相关的背景颜色或图片，以增强视觉效果。主题色可以 用于强调特定元素或提供视觉线索，帮助用户更好地理解屏幕内容。 响应式设计：确保 UI设计在不同的设备和屏幕尺寸上是响应式的。这意味着屏幕布局应 适应不同的屏幕尺寸和设备类型，以确保最佳的用户体验。 文字内容：确保与每个主题相关的文本内容与整体设计风格相协调。文本内容可以包括 标题、描述和提示信息，应简洁明了，易于理解。 品牌一致性：确保 UI设计在色彩、风格和语言方面与品牌形象保持一致。这将有助于强 化品牌形象，并提供一致的用户体验。 总之，为每个屏幕设置一个明确的主题是 UI设计中一个很重要的方面。通过仔细考虑色 彩搭配、图形、布局和排版等因素，可以创建一致、吸引人的用户体验，并提高用户对整体 品牌的认知度。 7. 区分元素及事件和动作的主次 使用尺寸、距离、颜色、表现形式、对比等手法，区分界面元素的信息层级，让主要元 素醒目。用适当的图形语言提示可操作激发的事件，在完成主要动作后，再激发后续的次要 动作流程。 在 UI设计中，区分元素及事件和动作的主次是非常重要的。主次关系可以帮助用户 更好地理解和操作界面，同时也能提升用户体验。以下是一些区分元素及事件和动作主次 的方法。 视觉层次结构：通过调整元素的大小、颜色、字体、位置等视觉属性来区分它们的主次 关系。重要的元素应该更大、更显眼，而次要的元素应该更小、更低调。 操作优先级：用户通常需要完成一系列的操作才能完成某项任务，因此应该根据操作优 先级来安排 UI元素。重要的操作应该更容易被用户发现并使用，而次要的操作应该更隐蔽或 者只有在特定情况下才会出现。 交互设计：通过设计交互方式来区分元素及事件和动作的主次。例如，在移动应用中， 通过单击一个按钮来执行一个动作，那么这个按钮就是主要元素，而其他的 UI元素则是次要 元素。 信息层级结构：在 UI设计中，信息层级结构是表达元素及事件和动作的主次关系的重要 方式之一。主要信息应该更突出、更醒目，而次要信息应该更隐蔽、更平淡。 引导用户注意力：通过引导用户的注意力来区分元素及事件和动作的主次。例如，通过 突出显示某个元素或者使用不同的颜色和字体来引导用户关注某个重要信息。 总之，在 UI设计中区分元素及事件和动作的主次需要综合考虑视觉、操作、交互、信息 层级结构和用户注意力等因素，从而设计出符合用户需求和期望的优秀的用户体验界面。 8. 自然过渡及跳转 界面的切换交互都是环环相扣的，所以在进行设计时，页面之间的互相跳转要自然合 理、有趣味，符合用户的心理认知；对还未操作完毕的流程，需要提示进度、完成度、等待 动画提示等，不要让用户不知所措，给其自然而然继续下去的方法，以达成操作任务目标。 在 UI设计中，自然过渡及跳转是用户体验中一个非常重要的部分。以下是一些关于如何 实现自然过渡及跳转的建议。 （1）自然过渡 结合透明度的淡入淡出：这是一个非常有效的动效原则。例如，当从界面当前屏过渡到 下一个屏时，可以通过淡出不相关的 UI元素，并让下一屏元素淡入，来提供简洁且清晰的呈 现效果。 缩放效果：缩放可以为界面增加活力。例如，当用户进行操作时，可以使用缩放效果来 突出显示某个元素或信息。 保持方向的一致性：在设计界面时，保持方向的一致性可以让用户更容易理解并预测界 面的行为。例如，如果用户在界面上向左滑动来翻页，那么下一页应该出现在左边。 平衡动效速度：动效速度应该平衡且流畅，既不能过于缓慢也不能过于快速。适当的动 效速度可以提供更好的用户体验。 （2）跳转 确定优先级顺序和分组：在设计跳转流程时，应该确定每个步骤的优先级顺序，并将相 关的步骤分组在一起。这样可以帮助用户更好地理解操作流程。 建立空间关系属性：在跳转过程中，可以通过建立空间关系属性来帮助用户更好地理解 界面的层次结构和跳转关系。例如，可以通过使用叠加效果来显示不同屏幕之间的关系。 第 4章　UI设计的 20个通用原则 提供操作反馈：在跳转过程中，应该提供操作反馈，例如，通过加载动画或声音效果， 来告知用户操作是否成功。 优化加载速度：为了实现更自然的跳转，应该优化加载速度，减少等待时间，让用户无 须长时间等待就能获得结果。 总之，通过合理地运用这些原则，可以在 UI设计中实现更自然、更流畅的过渡和跳转效 果，提高用户体验。 9. 符合用户期望 人总是对符合期望的行为感到舒适，因此在用户操作后应当给予其相应的反馈。在设计 时也应该遵循用户认知去设计元素，比如它看起来像个按钮，就要具有按钮的功能。需要等 待的界面，也需要提供进度和 Loading，而不是没有反馈。 UI设计需要符合用户的期望，以便用户能够轻松地使用应用程序或网站。以下是几个建 议，以帮助您设计符合用户期望的 UI。 用户研究：在开始设计之前，了解目标用户的需求、偏好和行为是非常重要的。通过用 户研究，可以确定用户的需求和期望，并为设计提供指导。 明确的布局：使用清晰的布局来组织页面和元素，并确保信息层次结构正确。使用易于 理解的、直观的导航和菜单结构，使用户可以轻松地找到所需的功能和信息。 直观的视觉元素：使用颜色、字体、图标、图像等视觉元素来吸引用户的注意力并传达 信息。确保视觉元素与内容相关且易于理解，以帮助用户更好地理解界面。 简单的交互：设计简单直观的交互方式，使用户可以轻松地完成任务或操作。避免使用 过于复杂或混乱的交互设计，以确保用户能够轻松地使用应用程序或网站。 反馈和提示：提供必要的反馈和提示，以帮助用户更好地理解界面和操作。例如，当用 户进行操作时，显示确认消息或提示，以向用户确认操作的结果。 适应性和响应式设计：确保 UI在不同的设备和屏幕尺寸上表现良好。设计和实施响应式 布局，以适应不同的屏幕尺寸和设备类型，并提供一致的用户体验。 测试和迭代：在设计和开发过程中，定期进行用户测试和评估，以了解用户对 UI的反馈 和满意度。根据测试结果进行迭代和改进，以确保 UI符合用户的期望并提供良好的用户体验。 通过遵循这些建议，可以设计出符合用户期望的 UI，并提供出色的用户体验。 10. 强烈的视觉层次感 如果要让屏幕的视觉元素具有清晰的浏览次序，那么应该通过强烈的视觉层次感来实 现。明确视觉层级，考虑每一个元素的视觉重量，比如重要的信息文字需要放大、清晰、高 亮显示，不重要的元素需要缩小、弱化显示。视觉层次感不明显的话，用户不知道哪里才是 目光应当停留的重点，页面显得没有逻辑，用户不知道阅读界面的顺序。 在 UI设计中，强烈的视觉层次感是非常重要的，它能够使界面更加有秩序，更能吸引用 户的注意力，并引导用户的视线。以下是一些创建强烈视觉层次感的方法。 利用色彩：色彩可以有效地创建视觉层次结构。通常，深色或暗色会被视为比亮色或浅 色更重要，因此可以使用色彩来突出显示界面中的重要元素。 字体和文字排版：字体和文字排版也可以帮助创建视觉层次感。大字体和粗体字通常会 比小字体和斜体字更重要。此外，文字的行距、大小和颜色也可以用来区分重要性和层次。 图像和图标：图像和图标通常会比文本更重要。因此，可以使用图像和图标来突出显示 界面中的关键信息。 空白和负空间：空白和负空间可以用来分隔元素，并使它们更加突出。通过控制元素之 间的空白，可以强调某些元素并使它们看起来更重要。 对比度：对比度可以用来突出显示两个元素之间的差异。通过使用高对比度的颜色或字 体，可以将用户的注意力集中在特定的元素上。 动画和过渡：动画和过渡可以用来增强视觉效果，并突出显示界面的关键元素。例如， 可以使用渐变效果、缩放或旋转来吸引用户的注意力。 品牌识别：品牌识别元素，如公司标志或特定的颜色方案，可以在界面中创建强烈的视 觉层次感。这些元素可以用来突出显示品牌身份，并帮助用户更好地识别和记住品牌。 总之，通过仔细考虑色彩、字体、图像、空白、对比度、动画和品牌识别等因素，可 以在 UI设计中创建强烈的视觉层次感。这将有助于提高用户体验，使用户更容易理解和使 用界面。 11. 减轻用户的认知压力 恰当地处理视觉元素能够化繁为简，帮助用户更加快速、简单地理解界面功能。使用方 位、间距和功能相似性分组来组织界面功能元素，使用户可以通过联想和识别来确定功能， 减轻用户认知记忆负担，不用多琢磨元素间的关系。 UI设计可以通过以下几种方式来减轻用户的认知压力。 简化界面元素：减少界面上的元素数量，使界面看起来更加简洁明了。去除不必要的元 素，可以减少用户的认知负荷，让他们更容易专注于重要的信息。 明晰的视觉层次结构：通过合理的布局和排列，建立清晰的视觉层次结构。将信息按照 重要性进行排序，让用户在第一时间就能获取到关键信息。 直观的图标和符号：使用直观的图标和符号来代替文字，可以加速用户对界面的理解。 图标和符号通常更容易识别，能够直接传达信息，减少用户的认知负担。 一致性设计：在整个应用或网站中保持一致的设计风格和色彩搭配，让用户在切换不同 页面时能够轻松适应。一致性设计有助于用户更好地理解和记忆界面元素。 适应性和个性化：根据用户的需求和偏好进行适应性设计和个性化定制，可以提高界面 的易用性。例如，为不同的用户角色提供不同的操作流程和功能模块，让用户感受到界面的 友好性。 减少操作步骤：优化交互流程，减少不必要的操作步骤，可以降低用户的认知负荷。通 过智能化的设计，让应用或网站能够自动适应用户的操作习惯和需求。 清晰的文字说明：在界面上添加简明扼要的文字说明，可以辅助用户理解界面功能和操 作步骤。文字说明应该简洁明了，避免使用过于复杂的词汇和表述方式。 色彩心理学：合理运用色彩心理学原理，选择适合的颜色搭配来表达不同的信息和功 能。色彩可以影响用户的情绪和认知，利用色彩心理学可以让界面更具吸引力。 引导用户注意：通过突出显示关键信息和操作按钮，引导用户将注意力集中在重要的元 素上。通过合理的排版和布局，让用户更容易注意到重要的信息。 提供反馈和提示：在用户操作过程中提供及时的反馈和提示，如声音、震动、动画效果 等。这些反馈可以帮助用户确认他们的操作是否成功，同时提供引导和提示信息。 通过运用以上这些方法，UI设计可以帮助减轻用户的认知压力，提高用户体验的满 意度。 12. 使用合适的色彩 色彩很容易受环境影响而发生改变，要考虑到界面的长时间阅读，或者重要提示用醒目 色彩作为引导。但不要只用色彩区别，例如用绿色和红色分别表示对和错，红绿色盲就分辨 不了，还需要配合√和 ×的符号造型一起来设计。背景色要与文字及前景元素进行区分，使 用色彩弱化调和不重要的元素。 在 UI设计中，使用合适的色彩非常重要，因为它们能够传达品牌信息、提供情感和引起 用户的注意。以下是一些建议，以帮助选择适合应用程序的色彩。 确定主题和目标受众：在选择色彩之前，需要确定 UI设计的主题和目标受众。考虑品牌 形象、应用程序的功能和目标，以及用户群体。例如，如果应用程序是一个儿童教育应用程 序，那么可能会选择鲜艳、活泼的色彩，以吸引孩子们的注意力。 使用色彩心理学：不同的色彩会引发不同的情感和反应。例如，红色通常被视为一种引 第 4章　UI设计的 20个通用原则 人注目的颜色，可以传达热情、活力和紧迫感，而蓝色则被视为一种平静、专业和信任的颜 色。考虑使用色彩心理学来选择适合主题和目标受众的色彩。 使用一种或两种主色：在 UI设计中，使用一种或两种主色可以保持设计的整体协调性 和一致性。主色应该是一种引人注目的颜色，可以用于应用程序的主要组件和元素，如导航 栏、按钮、图标等。其他颜色可以作为辅助色，用于突出主色或提供对比度。 保持色彩平衡：在 UI设计中，使用太多的颜色会使设计看起来杂乱无章。因此，需要保 持色彩平衡，以确保设计中的颜色不会过于拥挤或混乱。可以通过使用类似的颜色、添加一 些黑色或白色的元素来帮助实现这种平衡。 考虑对比度：对比度对于 UI设计而言非常重要，因为它可以帮助用户更容易地阅读 文本、找到按钮和其他交互元素。确保设计具有足够的对比度，以便用户可以轻松地阅读 和交互。 测试设计：最后，测试设计是一个非常重要的步骤。在完成设计后，应该在不同设备和 屏幕大小上测试设计，以确保它在所有设备上都看起来很好并可用。 13. 恰当的展现 由于每屏的尺寸有限，因此只展现必需的内容，其他内容可以放到下一屏，或者隐藏折 叠。在首屏适当提示，让用户可以按照你设计的步骤去查看信息，使界面交互逻辑更清晰。 UI 展示应该根据具体的设计和用户需求来决定。以下是一些建议，可以帮助您恰当地 展示 UI。 简洁明了：尽量保持 UI 的简洁和清晰，避免使用过多的元素和复杂的布局。使用易于阅 读的字体和字号，确保信息层次分明，重点突出。 直观易懂：UI 设计应该直观易懂，让用户能够迅速理解并轻松操作。使用符合用户习惯 的图标、按钮和布局，避免使用过于抽象或难以理解的元素。 一致性：保持 UI 的一致性有助于用户快速适应并记住您的设计。使用相同的视觉风格、 色彩搭配和交互方式，以减少用户的认知负荷。 适应性和响应式：UI 设计应该适应不同的屏幕尺寸和设备类型，以确保在不同设备上的 用户体验一致。同时，UI 应该响应用户的行为和操作，提供及时的反馈和引导。 用户测试：在 UI 开发过程中，定期进行用户测试可以帮助您了解用户的需求和反馈，及 时调整设计并优化用户体验。 文档说明：为了方便开发者和用户理解和使用 UI，提供详细的文档说明是必要的。包括 UI 元素的含义、用途、操作方式及样式规范等。 A/B 测试：通过 A/B 测试来比较不同设计的用户体验和转化率，以便了解哪种设计方案 更符合用户需求和业务目标。 设计规范：制定设计规范，规定 UI 元素的尺寸、间距、颜色等细节，以确保 UI 在细节 上保持一致性。 品牌形象：确保 UI 与品牌形象保持一致，以增强品牌认知度和用户忠诚度。 可访问性：确保 UI 符合可访问性标准，方便残障人士使用您的产品或服务。遵循无障碍 设计原则，提供可读性强的文本、足够的对比度、清晰的导航等。 通过考虑以上建议，可以创建出恰当且富有吸引力的 UI 展示，提高用户体验并促进用户 参与。 14. 提供“帮助”选项 对初次使用界面的用户，提供帮助及下一步等新手提示。在有困惑的位置，恰当地出现 提示，确保用户能顺利地使用界面，并且在操作中受到指导并学会操作。 在 UI设计中，提供帮助选项是很有价值的，因为它可以帮助用户更好地理解和使用产品 或应用程序。以下是一些在 UI设计中提供有效帮助选项的建议。 用户手册和帮助文档：提供用户手册和详细的帮助文档，以帮助用户了解产品或应用程 序的功能、操作方法和常见问题解答。这些文档可以以电子文件或打印版本的形式提供。 在线支持：通过在线聊天、邮件或电话等方式提供实时支持，帮助用户解决具体问题。 这种支持可以由人工或 AI提供。 帮助中心：在网站或应用程序中提供一个帮助中心，汇总所有帮助信息和常见问题解 答。用户可以通过搜索或浏览找到他们需要的答案。 在线教程和视频：提供在线教程和视频，展示如何使用产品或应用程序的特定功能。这 些内容可以由用户主动查找，也可以在用户遇到问题时提供。 反馈和评价系统：允许用户提供反馈和评价，这可以帮助您了解用户的需求和问题，并 不断改进产品或应用程序。 自助支持：提供自助支持选项，如知识库、论坛或社区，让用户能够互相帮助和支持。 个性化帮助：根据用户的角色、使用经验和问题类型，提供个性化的帮助选项。这可以 提高用户满意度和效率。 及时更新：随着产品或应用程序的更新和改进，及时更新帮助选项，确保用户能够获取 最新的支持和信息。 综合考虑上述建议，选择适合产品和用户需求的帮助选项，以提高用户满意度和使用 体验。 15. 预先提示 在发生不可逆操作，或者破坏性操作之前，需要提示用户，让用户确认后再执行不可逆 操作。在破坏性操作发生后，如用户想反悔，如有必要，提供用户反悔渠道，如后台服务渠 道取回等。 在 UI设计中，预先提示是一种很好的实践，它可以帮助用户更快地理解和使用界面。以 下是一些建议，可以创建有效的预先提示。 明确性和一致性：确保预先提示的文本清晰明了，并且与界面的其他元素保持一致。使 用简洁的语言，避免使用过于专业的术语或复杂的句子结构。 突出显示：使用颜色、大小、字体等来突出显示预先提示，使其在界面中更容易被注 意到。 位置和布局：将预先提示放置在界面中显眼的位置，例如在界面顶部或与相关元素相 邻。确保它们的布局和设计与其他元素协调一致。 交互性：允许用户与预先提示进行交互，例如通过单击或触摸来获取更多信息或关闭 提示。 适应性：根据不同的设备和屏幕尺寸，调整预先提示的大小和布局，以确保它们在不同 设备上的可读性和可访问性。 更新和维护：定期更新预先提示，以反映界面和其他相关元素的更改。如果需要，删除 或添加新的预先提示以确保它们始终与界面相关联。 测试和反馈：在界面开发过程中，测试预先提示的功能和可用性，并收集用户反馈以改 进它们的设计和内容。 通过遵循这些建议，可以创建出有效且易于理解的预先提示，帮助用户更快速地了解和 使用 UI界面。 16. 功能符合业务逻辑 如果把线下业务功能搬到线上来，应该观察现有的行为和设计，提炼相应的功能和设 计，合理地搬到软件中去，解决现存的问题。 UI设计应该符合业务逻辑，这意味着设计师应该根据应用程序或网站的业务需求和目标 来设计用户界面。以下是一些方法可以帮助你在 UI设计中符合业务逻辑。 了解业务需求和目标：在开始设计之前，了解业务需求和目标是非常重要的。与业务团 队进行交流，了解他们的目标和用户需求，以确保您的设计能够满足这些需求。 第 4章　UI设计的 20个通用原则 设计一致性：在设计 UI时，确保整个应用程序或网站的设计风格和元素一致。这有助于 用户更好地理解并使用你的产品，同时提高用户体验。 使用常见的用户界面元素：使用常见的用户界面元素，如按钮、表单、导航菜单等，可 以帮助用户更快地适应您的界面。这些元素通常遵循通用的设计原则，因此用户可以轻松地 理解并使用它们。 简化设计：避免在界面中添加过多的元素和功能，以免使用户感到困惑和不知所措。简 化设计可以帮助用户更快地找到所需的功能和信息。 提供清晰的导航：确保用户可以通过导航菜单轻松地浏览应用程序或网站。提供清晰的 导航路径可以帮助用户更快地找到所需的信息和功能。 测试和迭代：在完成设计后，进行测试并收集用户反馈，以便了解用户对界面的反应。 根据反馈进行迭代并改进设计，以确保它符合业务逻辑和用户需求。 总之，UI设计应该与业务逻辑保持一致，以满足用户需求并提高用户体验。通过了解业 务需求、使用常见的用户界面元素、简化设计、提供清晰的导航、测试和迭代等方法，可以 在 UI设计中更好地符合业务逻辑。 17. 多涉猎设计之外的知识 视觉、平面设计、排版、文案、信息结构，以及可视化、用户体验手法、调研手法、交 互动效、运营设计、插画设计、3D 表现、代码框架等，设计师对这些知识都应该有所涉猎或 者比较擅长，要从中学习有价值的知识，以此来提高综合工作能力。 18. 实用性 在设计领域，界面设计不仅仅是一件精美的艺术品，它仅仅能够满足其设计者炫技的虚 荣心是不够的，首先必须要实用，能切实地解决用户使用这款软件所要达到的目的，顺利高 效地完成操作任务。 UI设计的实用性体现在以下几个方面。 首先，UI设计可以提高产品的用户体验，使产品更容易被用户接受。良好的 UI设计可以 清晰地传达产品信息，使用户能够轻松掌握产品的功能，从而更容易操作和使用。这不仅可 以提高用户对产品的满意度，还可以增加产品的市场价值，提高企业的竞争力。 其次，UI设计可以帮助企业提升品牌形象。一个美观、易用的界面可以给用户留下深刻 的印象，从而提升品牌形象，获得更多客户的认可和信任。 此外，UI设计还具有广泛的应用领域。无论是移动应用、网页设计、智能家居还是车载 系统等各个领域，都需要优秀的 UI设计师来提升产品的用户体验。因此，UI设计具有广阔的 就业前景和发展空间。 总的来说，UI设计的实用性体现在提升产品的用户体验、提高产品的市场价值、帮助企 业提升品牌形象、具有广泛的应用领域等方面。因此，对于设计师和用户来说，UI设计都具 有重要的意义和价值。 19. 检查错误 设计师要尽可能协助程序员和测试人员检查和清除程序中的错误，测试各个控件的状 态，事件是否准确触发，文字是否可识别，图标和细节是否准确还原设计稿，操作流程是否 能成功准确地完成，参与 Beta 版本的测试是消减错误的最好方法。 20. 简约设计 简约设计不仅仅是一种流行趋势，从用户体验上看，简约的界面可以摒弃很多无关的干 扰信息，使 UI 更具易用性。好的 UI 设计应该具备强大的功能，但是画面要简约，做到疏密 有度。拥挤的界面不论功能多么强大，都会给用户带来不适感。 UI设计的简约设计是一种追求简洁、干净、美观的设计风格，其目的是让用户能够更好 地聚焦于内容本身，而不是被过多的视觉元素所干扰。在 UI设计中，简约设计通常包括以下 几个特点。 色彩简洁：简约设计通常使用单一或少量的色彩，以避免过多的色彩混杂和干扰用户的 视觉。常用的色彩包括白色、灰色、黑色等，以及一些淡雅的色彩，如淡蓝、淡灰等。 布局简洁：简约设计的布局通常非常简洁，没有任何多余的元素，每个元素都有其存在 的必要性。这使得用户能够更轻松地找到自己需要的信息和操作按钮。 字体简洁：简约设计通常使用简洁的字体，避免使用过多的字体样式和大小，以确保文 字的可读性和清晰度。同时，字体颜色的选择也会考虑到与背景的对比度，以确保用户能够 轻松地阅读文字。 图形简洁：简约设计中的图形元素通常非常简洁，没有任何多余的修饰。这使得图形元 素更加突出，同时也能够更好地与内容相结合，提高整体的美感。 留白简洁：在简约设计中，留白也是一种非常重要的元素。通过合理的留白，可以让界 面更加透气和舒适，同时也能让用户更好地聚焦于内容本身。 总之，UI设计的简约设计是一种追求简洁、干净美观的设计风格，通过色彩、布局、字 体、图形和留白等元素的简洁化处理，使用户能够更好地聚焦于内容本身，提高整体的用户 体验。 第5章　图标设计 UI图标设计是用户界面设计中的重要元素之一，它们在应用程序、网站、硬件的视觉体 验中扮演着关键角色。以下是一些关于UI图标设计的建议。 保持一致性：确保图标设计与整体UI设计风格一致，包括颜色、字体、形状和布局等方 面的一致性。 简单明了：UI图标应该简单易懂，避免使用过于复杂的图形。使用简单的图形元素，以 最小的细节去传达意义。 易于识别：图标应该容易识别，避免使用模糊不清的图形或过于抽象的符号，确保图标 能够快速传达其含义。 保持统一标准：确保所有图标都遵循相同的标准，如大小、形状、颜色和样式。这有助 于保持整体的一致性并提高用户体验。 适应不同设备：考虑到不同的设备和屏幕大小，确保图标在不同设备上都能够清晰地显 示和使用。 符号化：尽可能使用常见的符号和图形来传达意义，如保存、删除和编辑等。这有助于 用户快速理解图标的含义。 提供反馈：在用户与图标交互时提供反馈，如鼠标光标悬停时改变颜色或形状，或单击 时显示更多信息。 测试和优化：对UI图标进行测试和优化，以确保它们在各种情况下都能够有效地传达意 义并提高用户体验。 总之，UI图标设计需要考虑到易用性、一致性、简单明了和符号化等方面，以确保用户 能够快速理解和使用它们，并提高整体的用户体验。 5.1图标的概念及优点 图标是ICON的缩写形式，简称ICO。ICO是一种图标格式，用于系统图标、软件图标 等，这种图标的扩展名为*.icon、*.ico。常见的软件或Windows桌面上的那些图标一般都是 ICON格式的。icon元素包括两个可选的子元素：small-icon子元素large-icon子元素。文件名 是Web应用归档文件的根的相对路径。 图标的本质是一种符号，它采用对这个世界的隐喻来指代功能、含义和用途等，如图5-1 所示。 5第 章 图标设计 5.1图标的概念及优点 图标是ICON的缩写形式，简称ICO。ICO是一种图标格式，用于系统图标、软件图标 等，这种图标的扩展名为*.icon、*.ico。常见的软件或Windows桌面上的那些图标一般都是 ICON格式的。icon元素包括两个可选的子元素：small-icon子元素large-icon子元素。文件名 是Web应用归档文件的根的相对路径。 图标的本质是一种符号，它采用对这个世界的隐喻来指代功能、含义和用途等，如图5-1 所示。 5第 章 图标设计 038 UI 设计精品必修课（第2版） 图5-1 图标设计 使用图标的优点如下。 易于被快速识别：便于记忆，图形直观性产生国际通用性，如男女洗手间符号。 信息量大：图标具有形、意、色等多种刺激，传递的信息量大，抗干扰能力强。 图标大小可调：表示视觉和空间概念，便于布局，美观。 5.2图标的设计规范 下面是图标设计的一些规范内容。 图标设计的标准：功能寓意的识别性、风格的统一性是一个图标设计好坏的重要标准。 图标的7个一致性：线宽一致，体积感留白一致，倒角圆角一致，角度一致，色彩一 致，复杂度一致，光影一致。 如果是导航图标，最好设计阴阳线型和对应的选中状态面性图标。图5-2所示为设计规范 的图标。 图5-2 设计规范的图标 图标的常见风格种类：像素图标、剪影图标、2.5D 图标、拟物图标、扁平图标、MEB风 格图标、线性图标、3D 图标、手机系统主题图标、默认缺省提示图标、运营节气皮肤图标、 微质感图标、快捷入口图标、运营入口图标、节日装饰性图标等，如图5-3所示。 图5-3 图标的常见风格种类 UI 设计精品必修课（第2版） 图5-1 图标设计 使用图标的优点如下。 易于被快速识别：便于记忆，图形直观性产生国际通用性，如男女洗手间符号。 信息量大：图标具有形、意、色等多种刺激，传递的信息量大，抗干扰能力强。 图标大小可调：表示视觉和空间概念，便于布局，美观。 5.2图标的设计规范 下面是图标设计的一些规范内容。 图标设计的标准：功能寓意的识别性、风格的统一性是一个图标设计好坏的重要标准。 图标的7个一致性：线宽一致，体积感留白一致，倒角圆角一致，角度一致，色彩一 致，复杂度一致，光影一致。 如果是导航图标，最好设计阴阳线型和对应的选中状态面性图标。图5-2所示为设计规范 的图标。 图5-2 设计规范的图标 图标的常见风格种类：像素图标、剪影图标、2.5D 图标、拟物图标、扁平图标、MEB风 格图标、线性图标、3D 图标、手机系统主题图标、默认缺省提示图标、运营节气皮肤图标、 微质感图标、快捷入口图标、运营入口图标、节日装饰性图标等，如图5-3所示。 图5-3 图标的常见风格种类 039 第5章　图标设计 图标结构、色彩、复杂性的定位：一般来说，如果页面上空间大、图标少的话，图标可 以设计得复杂且尺寸大一些，如全屏导航类或者缺省提示类；反之，如果在一个非常密集的 空间里，图标可以画得小一些、简洁一些，如个人中心、侧滑列表等。 一般情况下，一类图标的尺寸是一致的，以像素或者自定义尺寸为1个单位的话，可以 把图标分成N个格子，为了让方形、圆形、竖形或者不规则图形的体积感相等，一般会在留 白区域内框定一个适合于图标表现的区域，尽可能以这个区域为图标的设计主体，如图5-4 所示。 图5-4 图标网格 尺规绘图：图形设计尽可能以圆和直线来设计，保持图形的饱满规则性，如图5-5 所示。 图5-5 尺规绘图 图5-6～图5-11所示为图标的细节规范。 图 5-6 图标的细节规范1 第5章　图标设计 图标结构、色彩、复杂性的定位：一般来说，如果页面上空间大、图标少的话，图标可 以设计得复杂且尺寸大一些，如全屏导航类或者缺省提示类；反之，如果在一个非常密集的 空间里，图标可以画得小一些、简洁一些，如个人中心、侧滑列表等。 一般情况下，一类图标的尺寸是一致的，以像素或者自定义尺寸为1个单位的话，可以 把图标分成N个格子，为了让方形、圆形、竖形或者不规则图形的体积感相等，一般会在留 白区域内框定一个适合于图标表现的区域，尽可能以这个区域为图标的设计主体，如图5-4 所示。 图5-4 图标网格 尺规绘图：图形设计尽可能以圆和直线来设计，保持图形的饱满规则性，如图5-5 所示。 图5-5 尺规绘图 图5-6～图5-11所示为图标的细节规范。 图 5-6 图标的细节规范1 040 UI 设计精品必修课（第2版） 图5-7 图标的细节规范2 图5-8 图标的细节规范3 图5-9 图标的细节规范4 图5-10 图标的细节规范5 图5-11 图标的细节规范6 评价一套图标的好坏的标准如下。 1）整体统一性。 2）图标识别性。 UI 设计精品必修课（第2版） 图5-7 图标的细节规范2 图5-8 图标的细节规范3 图5-9 图标的细节规范4 图5-10 图标的细节规范5 图5-11 图标的细节规范6 评价一套图标的好坏的标准如下。 1）整体统一性。 2）图标识别性。 第 5章　图标设计 3）颜色舒适度。 4）创意新颖性。 5）质量完稿度。 6）符合产品调性。 5.3安卓手机系统及 App图标设计规范 一套手机系统主题图标包括拨号、短信、浏览器、日历、时钟、邮件、计算器、联系 人、音乐、视频、图库、相机、文档、下载、应用中心、设置、天气、个性化中心、游戏中 心、录音、地图、便签、画板、安全中心、阅读和系统升级等功能，如图 5-12所示。 图 5-12 小米手机安卓系统主题图标设计 因为安卓手机系统有不同的平台，每个平台和型号的图标尺寸不同，所以如果没有确定 平台的话，可以先制作尺寸为 256px×256px的图标。图 5-13所示为安卓手机系统尺寸。 图 5-13 安卓手机系统尺寸 即便是官方的 Android 扁平风格的图标，每个版本也是会有变化的，从最初的不规则扁平图 标到折痕扁平图标，再到长投影扁平图标，所以即使在设计扁平图标时，也需要考虑到微小的质 感变化，以及色彩细节尺寸的统一与创新。图 5-14所示为 Android 扁平风格的图标。 图 5-14 Android 扁平风格的图标 042 UI 设计精品必修课（第2版） Google 建议的图标规范如下。 图标的造型尽量以圆和直线的尺规绘图标准去布尔生成造型，造型以体正饱满、识别性 强、体积感一致为佳，随意的、不规则的、粗细不一的图标设计为差，如图5-15所示。 图5-15 图标的造型 图标的光影尽量方向一致、风格一致、阴影羽化度一致，如图 5-16 所示。 图5-16 图标的光影 图标的角度一致和透视，如图5-17所示。 图5-17 图标的角度、透视 UI 设计精品必修课（第2版） Google 建议的图标规范如下。 图标的造型尽量以圆和直线的尺规绘图标准去布尔生成造型，造型以体正饱满、识别性 强、体积感一致为佳，随意的、不规则的、粗细不一的图标设计为差，如图5-15所示。 图5-15 图标的造型 图标的光影尽量方向一致、风格一致、阴影羽化度一致，如图 5-16 所示。 图5-16 图标的光影 图标的角度一致和透视，如图5-17所示。 图5-17 图标的角度、透视 第 5章　图标设计 图标的配色方案一致，如图 5-18所示。 图 5-18 图标的配色方案 5.4iOS图标规范 iOS系统已经发展了很多代了，目前以苹果 App启动图标设计为主，如图 5-19所示。早 期的苹果图标以玻璃效果为主，背板的圆角也从小变大，圆角越圆越有亲和力。 iOS图标有一套栅格系统，共有 3个圈，建议主要图形不要超出最外圈，主要设计在靠 外的 2个圈中进行，核心圈可以做挖空或者核心造型设计，以便所有第三方 App放在主菜单 中，其大小、体积感、辨识度等与整体和谐。图 5-20和图 5-21所示为 iOS图标栅格系统。 图 5-19 苹果 App启动图标图 5-20 iOS 图标栅格系统 1 044 UI 设计精品必修课（第2版） 图 5-21 iOS 图标栅格系统2 iOS 的图标尺寸模板，如图5-22所示。 图5-22 iOS 的图标尺寸模板 一套启动图标通常有6类表现形式，如图5-23所示。 图 5-21 iOS 图标栅格系统 2 iOS 的图标尺寸模板，如图 5-22所示。 图 5-22 iOS 的图标尺寸模板 一套启动图标通常有 6类表现形式，如图 5-23所示。 第 5章　图标设计 图 5-23 6类视觉配色表现形式 常见的图标表现形式和效果，如图 5-24～图 5-26所示。 图 5-24 彩色图标 图 5-25 双色线面结合 图 5-26 线性 UI 设计精品必修课（第2版） 互联网产品是指基于互联网技术，提供满足用户特定需求的服务或功能的产品形态。 互联网产品定位是一个关键的过程，它涉及确定产品的目标用户、市场定位，以及产品 功能和特性的设计。以下是一些主要步骤。 了解市场分布：包括对当前市场中的竞争对手进行深入研究，了解他们的产品特性、目 标用户和市场定位。通过绘制市场战略地图，可以识别市场的空白或理想的用户群体。 明确用户需求：运用用户洞察的方法，深入了解用户的核心诉求，包括他们的痛点、需 求和期望。通过绘制用户画像，可以生成具有代表性且生动的形象，作为产品开发的参照。 确立市场定位：根据核心用户的需求，结合市场产品的分布状况，确定产品的市场定 位。涉及确定产品的独特卖点，以及与竞争对手的差异化。 设计产品功能与特性：根据用户的核心诉求，设计产品解决方案。明确用户价值点，将 产品特性和功能聚焦于解决用户的痛点上。 完成以上步骤后，可以对互联网产品进行定位，并制定相应的营销策略和推广计划。 竞品分析则是对市场上同类竞争产品进行深入比较和分析的过程，旨在发现自身产品的 优势和不足，以及竞品的优劣势，从而为产品设计和改进提供参考。 在进行竞品分析时，需要选择具有代表性的竞品进行深入研究和分析，通过对比自身产 品和竞品的功能、性能、用户体验、市场占有率等方面的指标，发现自身的不足之处，并制 定相应的改进方案。同时，竞品分析还可以帮助企业了解市场趋势和用户需求，为产品研发 和市场营销提供指导。 竞品分析的方法包括但不限于以下几种。 功能对比法：对同类产品的核心功能进行对比分析，以明确自身产品在功能方面的优劣 势和差距，并发现自身产品的盲区、独特之处，制定改进方案。 用户调研法：通过用户访谈、问卷调研等方式收集用户对竞品的评价和反馈，了解用户 对竞品的认知和需求，从而发现自身产品的不足之处，并制定相应的改进方案。 网站分析法：以网站流量、来源、转化等相应数据分析为基础，通过对比分析竞品网站 流量、访客来源，用户的行为流程等，找到自身网站的问题，改进自己的网站。 SWOT分析法：根据自己的产品和竞品产品的特点、市场优劣势、获得的威胁和机会等 因素进行SWOT分析，确定自己的产品在市场中的地位和可持续性。 总之，竞品分析是互联网产品开发过程中的重要环节，有助于企业了解市场趋势和用户 需求，为产品设计和改进提供参考，提高产品的竞争力和市场占有率。 下面以App为例来详细讲解互联网产品的定义与竞品分析。 6第 章 互联网产品定义及竞品分析 6第 章 互联网产品定义及竞品分析 互联网产品是指基于互联网技术，提供满足用户特定需求的服务或功能的产品形态。 互联网产品定位是一个关键的过程，它涉及确定产品的目标用户、市场定位，以及产品 功能和特性的设计。以下是一些主要步骤。 了解市场分布：包括对当前市场中的竞争对手进行深入研究，了解他们的产品特性、目 标用户和市场定位。通过绘制市场战略地图，可以识别市场的空白或理想的用户群体。 明确用户需求：运用用户洞察的方法，深入了解用户的核心诉求，包括他们的痛点、需 求和期望。通过绘制用户画像，可以生成具有代表性且生动的形象，作为产品开发的参照。 确立市场定位：根据核心用户的需求，结合市场产品的分布状况，确定产品的市场定 位。涉及确定产品的独特卖点，以及与竞争对手的差异化。 设计产品功能与特性：根据用户的核心诉求，设计产品解决方案。明确用户价值点，将 产品特性和功能聚焦于解决用户的痛点上。 完成以上步骤后，可以对互联网产品进行定位，并制定相应的营销策略和推广计划。 竞品分析则是对市场上同类竞争产品进行深入比较和分析的过程，旨在发现自身产品的 优势和不足，以及竞品的优劣势，从而为产品设计和改进提供参考。 在进行竞品分析时，需要选择具有代表性的竞品进行深入研究和分析，通过对比自身产 品和竞品的功能、性能、用户体验、市场占有率等方面的指标，发现自身的不足之处，并制 定相应的改进方案。同时，竞品分析还可以帮助企业了解市场趋势和用户需求，为产品研发 和市场营销提供指导。 竞品分析的方法包括但不限于以下几种。 功能对比法：对同类产品的核心功能进行对比分析，以明确自身产品在功能方面的优劣 势和差距，并发现自身产品的盲区、独特之处，制定改进方案。 用户调研法：通过用户访谈、问卷调研等方式收集用户对竞品的评价和反馈，了解用户 对竞品的认知和需求，从而发现自身产品的不足之处，并制定相应的改进方案。 网站分析法：以网站流量、来源、转化等相应数据分析为基础，通过对比分析竞品网站 流量、访客来源，用户的行为流程等，找到自身网站的问题，改进自己的网站。 SWOT分析法：根据自己的产品和竞品产品的特点、市场优劣势、获得的威胁和机会等 因素进行 SWOT分析，确定自己的产品在市场中的地位和可持续性。 总之，竞品分析是互联网产品开发过程中的重要环节，有助于企业了解市场趋势和用户 需求，为产品设计和改进提供参考，提高产品的竞争力和市场占有率。 下面以 App为例来详细讲解互联网产品的定义与竞品分析。 第 6章　互联网产品定义及竞品分析 6.1App的概念 App现在泛指安装在智能手机上的应用软件，App UI 就是按照不同的 App 应用功能和产 品目的，以及目标用户群的偏好去设计的。目前主流的两个手机平台是苹果公司的 iOS 系统 和 Google 公司的 Android（安卓）系统。图 6-1 所示为 App Store。 图 6-1 App Store 这里推荐一个网站，专门收集 iOS 上最好看的 App图标，https://www.iosicongallery.com。 6.2App的分类 常见的 App一般分成 21个类别，UI 学习也可以按这 21 个类别进行风格练习设计。大 家在寻找参考竞品时，尽可能都找 App商城中这个类别前 3的 App 作为竞品去参考，因为太 小众的 App功能不全，参考价值一般，偶尔有少量出彩功能，也由于范围层太小、功能太单 一，界面排版不容易出效果。 App可以按照不同的标准进行分类。以下是一些常见的分类方式。 按照功能用途分类：例如，社交类 App、新闻类 App、购物类 App、娱乐类 App、金融类 App、生活类 App、工具类 App等。 按照使用场景分类：例如，办公类 App、通信类 App、学习类 App、健康类 App、旅游类 App等。 按照开发公司分类：例如，微信、支付宝、滴滴出行、美团外卖等。 按照使用人群分类：例如，儿童类 App、学生类 App、成人类 App、老年类 App等。 按照平台类型分类：例如，iOS平台 App、Android平台 App、Windows平台 App等。 需要注意的是，以上分类方式并不是绝对的，不同的 App可能属于不同的分类，也有一 些 App可以同时属于多个分类。 图 6-2 所示为 App Store里的 App分类占比。 Books（阅读） Games（游戏） Entertainment（娱乐 Education（教育） Lifestyle（生活） Travel（旅行） Utilities（水电费等） Music（音乐） Reference（效率） Sports（运动） Business（商业） News（新闻） Productivity（制作） Health & Fit（健康） Navigation（导航） Photography（摄影） Social Net（社交） Finance（金融） Medical（影音） Weather（天气） Arcade（游乐） 图 6-2 App Store里的 App分类占比 6.3互联网产品定位 在进行产品定位（ Product positioning）时通常采用五步法。 五步法又称之为 4W1H法，即 Who：谁用？谁需要为谁服务？ What：满足这个用户哪方 面的需求？ Why：市场目前的成熟情况如何？用户对你的品牌产品的感知如何？ Where：你 的商品的核心价值点是什么？与别的产品的不同及优势是什么？最后是 How；用户如何获得 你的产品？如何运营你的产品？图 6-3 所示为 4W1H 产品定义法解决的问题。 图 6-3 4W1H产品定义法解决的问题 1）目标市场定位（ Who），即明白为谁服务，满足谁的需要？ 目标市场定位策略如下。 y无视差异，对整个市场仅提供一种产品。 y重视差异，为每一个细分的子市场提供不同的产品。 y仅选择一个细分后的子市场，提供相应的产品。 2）产品需求定位（ What），即满足谁的什么需要？ 产品的价值由产品功能组合实现，不同的顾客对产品有着不同的价值诉求。这一环节需 要调研，获得这些需求可以指导新产品的开发和产品的改进。 3）考察消费者对产品概念的理解、偏好，为什么（ Why）可以接受产品？ 这一环节的测试需要从用户的心理层面到行为层面来深入研究，以获得用户对产品的接 受情况。 y考察产品概念的可解释性与传播性。 y同类产品的市场开发度分析。 y产品属性定位与消费者需求的关联分析。 y对消费者的选择购买意向分析。 4）产品差异化价值点定位（ Where），做定位之前，第一步工作就是分析竞品，研究它们 的价值点在哪里？ 通过分析竞品的价值点，就有可能发现一些有市场需求的价值。比如可口可乐的定位是 “传统的、经典的、历史最悠久的”价值定位，百事可乐就把自己定位于“年轻的、专属于 年轻人的”价值定位。 y产品独特价值特色定位。 y从产品解决问题特色定位。 y从产品使用场合时机定位。 y从消费者类型定位。 y从竞争品牌对比定位。 y从产品类别的游离定位、综合定位等。 5）营销组合定位，用户如何获得产品（ How）？ 049 第6章　互联网产品定义及竞品分析 营销组合定位即如何满足需要，它是进行营销组合定位的过程。即产品（Product）、价格 （Price）、渠道（Place）、宣传（Promotion），再加上策略（Strategy），所以简称为“4P1S” 营销理论。 y产品价格。 y渠道策略。 y推广策略。 y促销策略。 y展示策略。 6.4产品需求 PRD简化模板 PRD（Product-Requirement-Document，产品需求文档）按产品复杂度，其篇幅从二三十 页到上百页不等，内容如下。 第一部分：文档头，包括封面、撰写人、撰写时间、修订记录页、目录等。 第二部分：产品概述、名词说明、产品目标、项目周期阶段和时间节点、产品风险等。 第三部分：使用者需求、目标用户、场景描述、功能优先级等。 第四部分：业务模块、功能总览表、详细功能、产品主要模块的流程图等。 第五部分：功能线框、BETA测试需求、用例编写、非功能需求等。 第六部分：运营计划、推广和开发经费人员预估、上线下线标准等。图6-4 所示为PRD 产品需求文档需要内容。 图 6-4 PRD 产品需求文档需要内容 6.5竞品分析 所谓SWOT分析，即基于内外部竞争环境和竞争条件下的态势分析，就是将与研究对象 密切相关的各种主要内部优势、劣势，以及外部的机会和威胁等，通过调查列举出来，并依 照矩阵形式排列，然后用系统分析的思想，把各种因素相互匹配起来加以分析，从中得出一 系列相应的结论，而结论通常带有一定的决策性。 运用这种方法，可以对研究对象所处的情景进行全面、系统、准确的研究，从而根 据研究结果制定相应的发展战略、计划及对策等。通常采用“SWOT”法则来分析，即S（Strengths，优势）、W（Weaknesses，劣势）、O（Opportunities，机会）和T（Threats， 威胁）。 按照企业竞争战略的完整概念，战略应是一个企业“能够做的”（即组织的强项和弱项） 和“可能做的”（即环境的机会和威胁）之间的有机组合。图 6-5 所示为 SWOT分析法。 竞品分析可以从战略层、范围层、结构层、框架层及表现层5个面去分析。图 6-6 所示为 用户体验的5个层面。 第6章　互联网产品定义及竞品分析 营销组合定位即如何满足需要，它是进行营销组合定位的过程。即产品（Product）、价格 （Price）、渠道（Place）、宣传（Promotion），再加上策略（Strategy），所以简称为“4P1S” 营销理论。 y产品价格。 y渠道策略。 y推广策略。 y促销策略。 y展示策略。 6.4产品需求 PRD简化模板 PRD（Product-Requirement-Document，产品需求文档）按产品复杂度，其篇幅从二三十 页到上百页不等，内容如下。 第一部分：文档头，包括封面、撰写人、撰写时间、修订记录页、目录等。 第二部分：产品概述、名词说明、产品目标、项目周期阶段和时间节点、产品风险等。 第三部分：使用者需求、目标用户、场景描述、功能优先级等。 第四部分：业务模块、功能总览表、详细功能、产品主要模块的流程图等。 第五部分：功能线框、BETA测试需求、用例编写、非功能需求等。 第六部分：运营计划、推广和开发经费人员预估、上线下线标准等。图6-4 所示为PRD 产品需求文档需要内容。 图 6-4 PRD 产品需求文档需要内容 6.5竞品分析 所谓SWOT分析，即基于内外部竞争环境和竞争条件下的态势分析，就是将与研究对象 密切相关的各种主要内部优势、劣势，以及外部的机会和威胁等，通过调查列举出来，并依 照矩阵形式排列，然后用系统分析的思想，把各种因素相互匹配起来加以分析，从中得出一 系列相应的结论，而结论通常带有一定的决策性。 运用这种方法，可以对研究对象所处的情景进行全面、系统、准确的研究，从而根 据研究结果制定相应的发展战略、计划及对策等。通常采用“SWOT”法则来分析，即S（Strengths，优势）、W（Weaknesses，劣势）、O（Opportunities，机会）和T（Threats， 威胁）。 按照企业竞争战略的完整概念，战略应是一个企业“能够做的”（即组织的强项和弱项） 和“可能做的”（即环境的机会和威胁）之间的有机组合。图 6-5 所示为 SWOT分析法。 竞品分析可以从战略层、范围层、结构层、框架层及表现层5个面去分析。图 6-6 所示为 用户体验的5个层面。 图 6-5 SWOT分析法 图 6-6 用户体验 5个层面 一般用 XMind 、MinderManager等思维导图软件来分析 App的结构层。图 6-7和图 6-8 所示为春雨医生结构层分析，图 6-9 所示为平安好医生结构层分析。 图 6-7 春雨医生结构层分析 1 051 第6章　互联网产品定义及竞品分析 图 6-8 春雨医生结构层分析2 图 6-9 平安好医生结构层分析 6.6用户画像 一般来说，根据具体的业务内容会有不同的数据，不同的业务目标也会使用不同的 数据。 在互联网领域，用户画像数据可以包括以下内容，如图6-10所示。 用户属性：包括性别、年龄等人的基本信息。 兴趣特征：浏览内容、收藏内容、阅读咨询、购买物品偏好等。 第6章　互联网产品定义及竞品分析 图 6-8 春雨医生结构层分析2 图 6-9 平安好医生结构层分析 6.6用户画像 一般来说，根据具体的业务内容会有不同的数据，不同的业务目标也会使用不同的 数据。 在互联网领域，用户画像数据可以包括以下内容，如图6-10所示。 用户属性：包括性别、年龄等人的基本信息。 兴趣特征：浏览内容、收藏内容、阅读咨询、购买物品偏好等。 消费特征：与消费相关的特征。 位置特征：用户所处城市、所处居住区域、用户移动轨迹等。 设备属性：使用的终端特征等。 行为数据：访问时间、浏览路径等用户在网站的行为日志数据。 社交数据：用户社交相关数据。 图 6-10 用户画像 现在基于大数据进行的 AI 算法，推送内容的 App 越来越多，因为要为用户画像做标签， 分为固有属性、推导属性、行为属性、态度属性和测试属性。 6.7用户需求 可以通过以下方式获得用户需求。 公开信息：包括新闻（百度新闻、科技媒体、微信搜索）、大众评论（微博、微信、知 乎）、相关领域的网站和论坛、各种互联网分析网站（如艾瑞咨询、企鹅智酷等）。 用户调查：在线问卷（问卷星等）、线下问卷，还可以委托代理公司等。 用户访谈：找到目标用户中质量较高的人员进行跟踪访谈。高质量的定义一般是在领域 内资深、对产品体验要求高、有话语权，以及擅于表达的行业专家、同类产品从业者。与他 们访谈可以获得更落地、更真实、更深入的信息。 产品本身的反馈渠道：比如种子用户群，投诉邮件，以及 App 开发博客下的评论及商店的 评论。 用友盟手机助手等数据软件埋点产品内部，获取用户的使用行为数据后，分析用户的喜 好和偏重。 分析竞品及公司战略目标获取，比如竞品是否有没满足用户的地方，或者最近的产品趋 势等。 KANO 模型由东京理工大学教授狩野纪昭提出，用于用户需求的分类和优先级排序，如 图 6-11 所示。图 6-12 所示为马斯洛 7 层需求层次理论。 根据 KANO 模型， 5 个评价指标如下。 魅力属性：让用户感到惊喜的属性，如果不提供此属性，不会降低用户的满意度，一旦 提供魅力属性，用户满意度会大幅提升。 期望属性：如果提供该功能，客户满意度提高；如果不提供该功能，客户满意度会随之 下降。 第 6章　互联网产品定义及竞品分析 必备属性：这是产品的基本要求，如果不满足该需求，用户满意度会大幅降低。但是无 论必备属性如何提升，客户都会有满意度的上限。 无差异属性：无论提供或不提供此功能，用户满意度不会改变，用户根本不在意有没有 这个功能。这种费力不讨好的属性是需要尽力避免的。 反向属性：用户根本没有此需求，提供后用户满意度反而会下降。 图 6-11 KANO 模型 图 6-12 马斯洛 7 层需求层次理论 6.8　用卡片分类法确定 App 功能分类 卡片分类法主要用于了解用户对网站、App导 航和架构的心理模型，如图 6-13所示。卡片分类法 的一般形式分为两种：开放式和封闭式。 开放式卡片分类：为测试用户提供带有 App功 能及内容但未经过分类的卡片，让它们自由组合并 图 6-13 卡片分类法 054 UI 设计精品必修课（第2版） 且描述出摆放的原因。开放式卡片分类能为新的或已经存有的网站和产品提供合适的基本信 息架构。 封闭式卡片分类：为测试用户提供App建立时已经存有的分组，然后要求将卡片放入这 些已经设定好的分组中。封闭式卡片分类主要用于在现有的结构中添加新的内容或在开放式 卡片分类完成后获得额外的反馈。例如，飞机、公共汽车、火车、草地、青蛙、叶子。 封闭式分类法提供自然和机械两个分类，让用户把内容归入分类下，如图 6-14所示。 图 6-14 封闭式卡片分类法 开放式分类法让用户自觉去分类，最后得到绿色的东西和车辆两个分类，如图 6-15所示。 图 6-15 开放式卡片分类法 6.9开发版本的功能优先级 早期在调研环节，会出现大量的功能需求，但是需要做一下功能的优先级分类。可以用 以下几个指标来分析功能是否需要优先在当前版本开发。 功能开发成本：难易度，包括时间成本及技术成本、人员成本、服务器成本。 用户数量：有多少人需要这个功能，如果只是 2% 的用户，这个功能可以靠后。 用户感知度：这个功能修改后，用户是否能及时发现，不容易感知的功能可以靠后。 功能使用频率：如果是使用频率很高的常用功能，可以提高优先级。 功能的独特性：如果这个功能非常有核心竞争价值、技术壁垒及垄断性，可以提高优先级。 UI 设计精品必修课（第2版） 且描述出摆放的原因。开放式卡片分类能为新的或已经存有的网站和产品提供合适的基本信 息架构。 封闭式卡片分类：为测试用户提供App建立时已经存有的分组，然后要求将卡片放入这 些已经设定好的分组中。封闭式卡片分类主要用于在现有的结构中添加新的内容或在开放式 卡片分类完成后获得额外的反馈。例如，飞机、公共汽车、火车、草地、青蛙、叶子。 封闭式分类法提供自然和机械两个分类，让用户把内容归入分类下，如图 6-14所示。 图 6-14 封闭式卡片分类法 开放式分类法让用户自觉去分类，最后得到绿色的东西和车辆两个分类，如图 6-15所示。 图 6-15 开放式卡片分类法 6.9开发版本的功能优先级 早期在调研环节，会出现大量的功能需求，但是需要做一下功能的优先级分类。可以用 以下几个指标来分析功能是否需要优先在当前版本开发。 功能开发成本：难易度，包括时间成本及技术成本、人员成本、服务器成本。 用户数量：有多少人需要这个功能，如果只是 2% 的用户，这个功能可以靠后。 用户感知度：这个功能修改后，用户是否能及时发现，不容易感知的功能可以靠后。 功能使用频率：如果是使用频率很高的常用功能，可以提高优先级。 功能的独特性：如果这个功能非常有核心竞争价值、技术壁垒及垄断性，可以提高优先级。 第 6章　互联网产品定义及竞品分析 竞品是否具备：竞品如果具备，可以提高优先级。 功能需求急迫程度：紧急的功能可以提高优先级，比如数据安全漏洞、赶热点等。 用户兴奋性需求：这个功能增加以后，对用户非常具有吸引力，或者变现转化力。 用以上 8 个方面给悬而未决的功能排 1 ～ 10 等级的优先级，然后逐一打分，最后总结得 分，就可以排出功能优先级。优先级靠后的功能可以放到后期的版本再开发，一个阶段一个 阶段地完成当前版本目标。图 6-16 所示为 App 产品生命周期。 图 6-16 App 产品生命周期 本章主要讲解色彩的基本原理和UI配色的基本方法，适合App、小程序、网页、B端后 台、数据可视化、硬件HMI等UI设计。 色彩原理是所有设计的基础，这是因为色彩在设计中起着至关重要的作用。色彩能够影 响人们的情绪、感知和反应，因此在设计中正确使用色彩是非常重要的。 色彩可以影响人们的情绪。不同的色彩可以引发不同的情感反应，例如，红色通常被视 为充满活力和激情的色彩，而蓝色则通常被视为平静和冷静的色彩。因此，在设计作品时， 选择适当的色彩可以影响观众的情绪，从而增强作品的表现力和吸引力。 色彩可以影响人们的感知。不同的色彩具有不同的明度、饱和度和色调，这些属性可以 影响人们对作品的感知。例如，较亮的色彩可以更加引人注目，而较暗的色彩则可以更加隐 蔽。因此，在设计作品时，选择适当的色彩可以影响观众的感知，从而增强作品的可读性和 可辨识性。 综上所述，色彩原理是所有设计的基础。设计师需要了解色彩的基本原理和属性，掌握 正确的色彩搭配和运用技巧，从而在设计中创造出更加优秀、更加引人注目的作品。 7.1色彩的概念 人们肉眼所见的颜色分为无彩色和有彩色两种，红外线、紫外线及其他有色光不在讨论 范畴内。 无彩色：即通常所说的黑白灰。 有彩色：即通常所说的除了黑白灰，赤、橙、黄、绿、青、蓝、紫等各种深浅不一的色 彩，或者混合的彩色。 色彩的几个术语如下。 色相（Hue）：即各类色彩的相貌称谓。 色彩饱和度（Saturation）/色度（Chroma）：颜色的整体强度或者亮度。 明度（Value）：色彩的明暗程度。 色调（Tone）：纯色和灰色组合产生的颜色，也可以说是一幅画中画面色彩的总体倾向。 色度（Shade）：纯色和不同比例的黑色混合产生的颜色，即色彩的纯度。 色彩（Tint）：纯色和白色混合产生的颜色。一种色相（Hue）通过加入不同比例的白色能 够产生不同的颜色。 ７第 章 基础色彩原理和UI的配色 7.1色彩的概念 人们肉眼所见的颜色分为无彩色和有彩色两种，红外线、紫外线及其他有色光不在讨论 范畴内。 无彩色：即通常所说的黑白灰。 有彩色：即通常所说的除了黑白灰，赤、橙、黄、绿、青、蓝、紫等各种深浅不一的色 彩，或者混合的彩色。 色彩的几个术语如下。 色相（Hue）：即各类色彩的相貌称谓。 色彩饱和度（Saturation）/色度（Chroma）：颜色的整体强度或者亮度。 明度（Value）：色彩的明暗程度。 色调（Tone）：纯色和灰色组合产生的颜色，也可以说是一幅画中画面色彩的总体倾向。 色度（Shade）：纯色和不同比例的黑色混合产生的颜色，即色彩的纯度。 色彩（Tint）：纯色和白色混合产生的颜色。一种色相（Hue）通过加入不同比例的白色能 够产生不同的颜色。 ７第 章 基础色彩原理和UI的配色 第７章　基础色彩原理和 UI的配色 颜色的三要素由色相、明度和饱和度（彩度）组成。 色相是指色彩的相貌，色相被用来区分颜色。根据光的不同波长，色彩具有红色、黄色 或绿色等性质，这被称为色相。具体参考色相环及其他色彩模型，如图 7-1 所示。 图 7-1 色相环及色值 明度是色彩从亮到暗的明暗程度。黑色的绝对明度被定义为 0（理想黑），而白色的绝对 明度被定义为 100（理想白），其他灰色系列则介于两者之间。 色调：把颜色从白到黑等分为 9 等分或者 N 个层级，高明度的 1/3 称为亮调或高调，中 明度的 1/3 称为中调，低明度的 1/3 称为暗调或低调。 长调和短调：把跨度大于等于 50%的配色称为长调，跨度小于等于 30%的配色称为 短调。 不同的色调组合可以体现不同的画面情绪。 图 7-2 所示为明度及调子。图 7-3 所示为长短调视觉情感。 （ a） 图 7-2 明度及调子 （b） 图 7-2 明度及调子（续） 图 7-3 长短调视觉情感 纯度通常是指色彩的鲜艳度。从科学的角度看，一种颜色的鲜艳度取决于这一色相发射 光的单一程度。色彩的纯度强弱是指色相感觉明确或含糊、鲜艳或混浊的程度。图 7-4 所示为 彩度饱和度模型。 高纯度色相加白或黑，可以提高或减弱其明度，但都会降低它们的纯度。如果加入中性 灰色，也会降低色相纯度。根据色环的色彩排列，相邻色相混合，纯度基本不变，如红黄相 混合所得的橙色。对比色相混合，最易降低纯度，以至成为灰暗色彩。色彩的纯度变化可以 产生丰富的强弱不同的色相，而且使色彩产生韵味与美感。 三原色，即红、蓝、黄；二次衍生色，即橙、绿、紫；三次衍生色，红橙、黄橙、黄 绿、蓝绿、蓝紫、红紫。图 7-5 所示为原色和衍生色。 图 7-6 所示为单色和多色配色 App。 第７章　基础色彩原理和 UI的配色 图 7-4 彩度饱和度模型 图 7-5 原色和衍生色 图 7-6 单色和多色配色 App 图 7-7 所示为复色。 图 7-7 复色 4种配色方案如图 7-8所示。 同类色：占色环 30o。 邻近色：占色环 60o。 对比色：占色环 120o。 互补色：占色环 180o。 更多的配色方案如图 7-9 所示。 图 7-8 4种配色方案图 7-9 更多的配色方案 关于色彩的情感和冷暖，大家需要注意的一点是，不同地区的人对颜色有不同的理解， 在中国，红色表示喜庆，如发红包。而在西方红色代表危险，如流血。在国外，股票涨是绿 色，跌是红色。所以，大家在做设计时，最好了解目标用户对色彩的理解和喜好。图 7-10 所 示为冷暖色模型。 第７章　基础色彩原理和 UI的配色 图 7-10 冷暖色模型 图 7-11 所示为色彩情感模型。 图 7-11 色彩情感模型 062 UI 设计精品必修课（第2版） 图 7-12 所示为不同国家的人对色彩的喜好。 图 7-12 不同国家的人对色彩的喜好 7.2App 配色概念 App配色是指为App设计选择和调整色彩方案的过程。一个好的配色方案可以提高App 的用户体验和品牌形象。以下是一些关于App配色的建议。 确定主题色：选择一个与品牌或App主题相关的颜色作为主色调，以此为基础进行配色。 考虑用户群体：针对目标用户群体的喜好和心理特征，选择适合他们的色彩方案。 保持一致性：在App的整个界面设计中，保持色彩的一致性和协调性。 利用色彩对比：利用不同颜色之间的对比度来突出重点和层次感。 考虑可读性：在文字和背景之间选择合适的颜色搭配，以提高文字的可读性。 避免过度装饰：避免使用过多的颜色和装饰元素，以免干扰用户对App主要内容的关注。 测试和调整：在App开发过程中不断测试和调整配色方案，以确保其在实际使用中的效果。 总之，App配色需要考虑到品牌形象、用户体验和可读性等多个方面，通过合理的色彩 搭配来提高App的用户友好性和易用性。 7.2.1 App 基础色彩构成 App 所用的配色方案为自发光的 RGB 色系，如图 7-13 所示。 UI 设计精品必修课（第2版） 图 7-12 所示为不同国家的人对色彩的喜好。 图 7-12 不同国家的人对色彩的喜好 7.2App 配色概念 App配色是指为App设计选择和调整色彩方案的过程。一个好的配色方案可以提高App 的用户体验和品牌形象。以下是一些关于App配色的建议。 确定主题色：选择一个与品牌或App主题相关的颜色作为主色调，以此为基础进行配色。 考虑用户群体：针对目标用户群体的喜好和心理特征，选择适合他们的色彩方案。 保持一致性：在App的整个界面设计中，保持色彩的一致性和协调性。 利用色彩对比：利用不同颜色之间的对比度来突出重点和层次感。 考虑可读性：在文字和背景之间选择合适的颜色搭配，以提高文字的可读性。 避免过度装饰：避免使用过多的颜色和装饰元素，以免干扰用户对App主要内容的关注。 测试和调整：在App开发过程中不断测试和调整配色方案，以确保其在实际使用中的效果。 总之，App配色需要考虑到品牌形象、用户体验和可读性等多个方面，通过合理的色彩 搭配来提高App的用户友好性和易用性。 7.2.1 App 基础色彩构成 App 所用的配色方案为自发光的 RGB 色系，如图 7-13 所示。 第７章　基础色彩原理和 UI的配色 图 7-13 RGB与 CMYK颜色模型 一套 App 配色基本由背景色、主题色、辅助色、点睛色 4种色调组成。 背景色：分为浅色基地（白基）、深色基地（黑基）和彩色基地（灰基）。 主题色：主题色是由除了基地背景色外占最多体积的色调组成的，主色调也可由几个颜 色混合的渐变色组成。 辅助色：辅助主色，使画面细节更丰富，辅助色也可由呼应主色调内容的图片辅助。 点睛色：引导阅读，装饰页面，让页面的元素信息层级井然有序。 图 7-14 所示为白底和彩底及黑底配色的 App。 图 7-14 白底和彩底及黑底配色的 App 7.2.2 前进色和后退色元素的色彩信息层级 前进色和后退色如图 7-15 所示。 图 7-16 所示为 App 中的元素色彩信息层级。比如机场和机票这两个页面，地图为暗色背 景色，而路线就是亮蓝色，为前景色、点睛色。下方弹窗白色压在地图上为前景色区域，按 钮亮蓝色为点睛引导区域。在机票页面中，红色为背景色，白色为前景卡片区域，两个城市 MUC 和 SFO 为重要功能色，时间和座位登机口为点睛色，按钮和二维码为点睛色。 图 7-15 前进色和后退色图 7-16 App 中的元素色彩信息层级 一个优秀的 UI 界面，每个页面上的功能和内容都会分主次信息层级，凸显重要的内容， 弱化不重要的内容，好的 App页面应该在第一时间让用户看到自己想看到的内容，节约用户 时间。在用户使用过程中，用色彩和图标及元素摆放位置，很好地引导用户实现在这个软件 上想要实现的操作任务和目的。 7.2.3 凸显 App页面 UI元素和文字的多种方法 要凸显 App页面上的 UI元素和文字，可以考虑以下几种方法。 调整颜色：通过改变 UI元素和文字的颜色，可以使它们在页面上更加突出。例如，可以 将 UI元素的颜色设置为与背景色不同的颜色，或者将文字的颜色设置为与背景色对比鲜明的 颜色。 增加阴影：为 UI元素和文字添加阴影效果，可以使它们在页面上更加立体，从而更加突 出。 调整大小：通过调整 UI元素和文字的大小，可以使其在页面上更加明显。例如，可以将 重要的 UI元素或文字放大，或者将次要的 UI元素或文字缩小。 使用动画效果：通过添加动画效果，可以使 UI元素和文字更加生动有趣，从而吸引用户 的注意力。 添加背景图：通过添加背景图，可以增强页面的视觉效果，使 UI元素和文字更加突出。 使用标签或提示：通过添加标签或提示，可以告诉用户 UI元素或文字的重要性或功能， 从而吸引用户的注意力。 总之，要凸显 App页面上的 UI元素和文字，可以从颜色、阴影、大小、动画效果、背景 图和标签或提示等方面入手。 图 7-17 所示为文字信息层级高低的表现技法。 图 7-17 文字信息层级高低的表现技法 第７章　基础色彩原理和 UI的配色 文字可以用颜色、粗细、深浅、大小等方法来区分谁更重要，甚至还可以在色彩前面加 上图标、色块，底下加下画线或者删除线来使文字相对其他文字更加明显或者减弱。图 7-18 所示为区分元素优先级和功能分类的手法。 图 7-18 区分元素优先级和功能分类的手法 可以使用格式塔理论来设计元素之间的对比关系和从属分类关系，将尺寸一致、拥有类 似功能的图标靠得更近等，也可以用相反的手法凸显这些 UI 元素。 接下来讲解格式塔原则。 格式塔原则是心理学中的一种理论，它强调整体和部分之间的关系，以及整体大于部分 之和的原则。格式塔原则在许多领域都有应用，包括设计、艺术、文学和心理学等。 在设计中，格式塔原则可以帮助设计师理解如何将不同的元素组合在一起，以形成一个 有意义的整体。例如，接近性原则是指在视觉上相近的元素会被视为一个整体。因此，在设 计版式时，将相关的元素放在一起，可以使读者更容易理解信息的结构和关系。 此外，格式塔原则还可以帮助设计师创造更好的用户体验。例如，通过了解用户的认知 过程和感知规律，设计师可以创造出更易于理解和使用的界面和交互方式。 总之，格式塔原则是一种有用的工具，可以帮助设计师更好地理解和解决设计问题。 利用格式塔原则进行设计的 4种方法包括以下几个。 接近性原则：相互靠近的物体会被认为是一个整体。 相似性原则：人们会把相似或者相同的元素看作一个整体。 连续性原则：连续性是指人们视觉上倾向于感知物体是不间断的形式，即使有时候有重 叠。这个原则常常暗示元素的连续性。比如卡片露出一部分，人们在感知上就会认为右边还 隐藏了部分内容，而且具有方向性。比较典型如模块滚动、导航、滑动条等。 共同命运原则：共同命运是指当人们感知到一组元素时，他们会将这些元素视为一个整 体，而不是单独的个体。这是因为这些元素在空间或时间上具有共同的变化或运动。例如， 当一组元素同时移动或变化时，人们会将这些元素视为一个整体，而不是单独的个体。对称 的元素会被视为一体。 这些原则在设计中被广泛应用，可以帮助设计师更好地组织和理解设计元素，从而创造 出更具吸引力和有效性的设计。 接近性（ Proximity）：物体间距影响我们对它们关系的感知，距离较近的物体看起来组成 了一个整体，距离较远的则不是。 相似性（ Similarity）：如果不同元素在形状、颜色、阴影或其他特征上彼此相似，那么这 些相似的元素看起来就自然组合为一组。图 7-19 所示为格式塔接近性和相似性。 图 7-19 格式塔接近性和相似性 连续性（ Continuation）：格式塔心理学上所说的连续性，是指对线条的一种特殊知觉， 人们在知觉过程中往往倾向于使知觉对象的直线继续成为直线，曲线继续成为曲线，持续 延伸。 共同命运（ Common fate）：之前介绍的格式塔原理都是针对静态图形，而共同命运这一 原理则涉及运动的物体，一起运动的物体会被感知为属于一个整体或者彼此相关。图 7-20 所 示为格式塔连续性和共同命运。 图 7-20 格式塔连续性和共同命运 在格式塔原则中，连续性和共同命运都是重要的原则，通过它们可以更好地理解和解释 人类视觉感知的某些方面。 7.2.4 四类渐变配色方案 4类常见的渐变配色方案为单色渐变、双色渐变、浅色渐变和深色渐变。 这几年流行的 UI 配色为糖果色及彩虹流体渐变；而双色渐变又分为艳色系、浅色系及深 色系 3种，前几年为纯扁平配色。在进行 UI设计时，需要按照 App的企业色、产品风格、目 标用户群喜好去配色。一般 UI设计出方案的时候，会多出几套配色供客户及上级挑选，因为 一个 App的配色不是单单由 UI设计师的喜好决定的，其关系到整个公司这条产品线的成败。 所以，尽可能在配色完毕后，用投票方法获取得票率最高的方案，或者由公司的决策者来决 定。图 7-21 ～图 7-24 为 4类渐变配色方案。 图 7-21 单色渐变图 7-22 双色渐变 图 7-23 浅色渐变图 7-24 深色渐变 更多的 App 渐变配色方案举例如下。 一般电商类 App 多以橘色、红色、粉色等暖色为主要配色，因为用户群大部分为女性，又 需要激发人们的购买欲。但是高端购物 App 也有很多黑金、黑白冷淡系配色，不能一概而论。 一般医疗、科技、旅游类产品以绿色、蓝色为主要配色，但是也有一部分医疗美容产品用粉 色，旅游类产品用柠檬黄，如蚂蜂窝和飞猪旅行，还有一些民宿类 App 比如爱彼迎是红色的。 一般音乐类 App 多以绚紫、紫红为主要配色，也有小部分文艺类的以红白、绿白、黑金 为配色。 第７章　基础色彩原理和 UI的配色 一般理财类 App 多以橘色、紫蓝、土豪金、红色或者黑底为主要配色，尽可能不要用绿 色，感觉会跌。 一般美食类 App 多以米黄色、咖啡色、粉红色等烘焙色为主，当然也有一些高端的会用 黑金，绿色食品冷链会走蓝绿色路线。 当然例子还有很多，大家可以多分析竞品，自己总结各类 App 的配色，就不在此赘述了。 当页面上的颜色太多时，可以用大面积的白色和黑色（深色）来和谐统一颜色，如 图 7-25所示。 图 7-25 白色和多彩色页面 图 7-26 和图 7-27 所示为更多 App 单色渐变与双色渐变配色。 图 7-26 更多 App 单色渐变配色 图 7-27 更多 App双色渐变配色 第8章　UI交互线框布局设计 本章主要讲解UI交互线框的布局设计。 UI交互线框布局设计是创建用户界面的重要步骤之一。它使用线框图或原型来模拟用户 与界面之间的交互，帮助设计师和开发人员规划和设计用户界面的布局和交互流程。 以下是UI交互线框布局设计的一些关键步骤。 1. 确定目标和用户 首先需要确定应用程序的目标和目标用户。了解用户的需求、行为和偏好，以便为不同 的用户群体设计不同的界面和交互方式。 2. 确定布局和导航 根据应用程序的目标和用户需求，确定界面的布局和导航方式，包括确定屏幕尺寸、分 辨率和屏幕上的元素，如按钮、文本框、图像等。 3. 确定交互方式 确定用户与界面之间的交互方式，如鼠标、键盘、触摸等。在设计交互方式时，需要考 虑用户的习惯和效率，以便让用户更容易地使用应用程序。 4. 创建线框图或原型 使用绘图工具或原型工具创建线框图或原型，以模拟用户与界面之间的交互。在创建线 框图或原型时，需要考虑布局、导航和交互的细节，以确保用户可以轻松地使用应用程序。 5. 测试和修改 在完成线框图或原型后，需要进行测试和修改以确保其可用性和易用性。测试可以包括 用户测试、可用性测试和A/B测试等，以便了解用户对界面的反应和满意度。根据测试结果 进行必要的修改和优化，以提高用户体验。 6. 完成设计 完成线框图或原型的修改后，可以将其转化为最终的UI设计。在完成设计时，需要考虑 色彩、字体、图片等视觉元素，以使界面更加美观和吸引人。 总之，UI交互线框布局设计是创建用户界面的关键步骤之一，它可以帮助设计师和开发 人员规划和设计用户界面的布局和交互流程，提高用户体验和满意度。 8.1流程图设计 流程图（Flow Chart）是指用图示的方式反映特定主体为了满足特定需求，而进行的有特 8第 章 UI交互线框布局设计 8.1流程图设计 流程图（Flow Chart）是指用图示的方式反映特定主体为了满足特定需求，而进行的有特 8第 章 UI交互线框布局设计 定逻辑关系的一系列操作过程。 流程图的 4种基本结构为顺序结构、条件结构（又称选择结构）、循环结构和分支结构。 8.1.1 流程图的常用符号意义 流程图的常用符号意义如图 8-1 所示。 图 8-1 流程图的常用符号意义 8.1.2 软件业务流程图设计 一般在写产品需求文档时，都需要设计流程图，一个 PRD 会由几个大的主流程图和个子 模块的流程图构成。主流程图不需要很详细，只要描述大概的通用操作流程。而在具体业务 模块下，再去设计详细的角色操作流程图。流程图设计完后，先切分业务模块，然后绘制线 框图。图 8-2 所示为一个注册页面的通用流程图。 作为制定一项交互设计工作计划的开端，可以从探寻以下几个问题开始。 业务目的：为什么要做这个功能？ 业务目标：产品期望得到怎样的成果？ 目标用户：谁来使用这个功能？ 用户需求、体验目标：他们为什么要使用这个功能？ 行为设计：如何让他们都来使用这个功能？ 在了解这几个问题的基础上，逐步展开一系列的动作，有序落实交互设计的前期工作 计划，主要包括：分析业务需求→分析用户需求→分解关键因素→归纳设计需求，明确设计 策略。 第 8章　UI交互线框布局设计 图 8-2 一个注册页面的通用流程图 8.2手绘线框图 UI手绘线框图是一种用于设计用户界面的草图或蓝图，它使用简单的图形和线条来描绘界 面元素和布局。这种线框图通常不包含颜色、纹理和细节，而是专注于界面结构和功能布局。 手绘线框图是一种非常有用的工具，可以帮助设计师和开发人员可视化并讨论界面的布 局和功能。它允许团队成员在开发过程中的早期进行规划和讨论，并就界面的整体外观和感 觉达成一致。 在制作 UI手绘线框图时，通常使用简单的绘图工具，如铅笔、纸和尺子。也可以使用在 线工具或软件，如 Sketch、 Figma或 Adobe XD等来创建数字线框图。 在设计过程中，手绘线框图可以用于以下几个方面。 规划和讨论：在开始设计之前，使用手绘线框图来规划和讨论界面的布局和功能。这有 助于团队成员就界面的整体结构和元素达成一致。 沟通和交流：手绘线框图是一种易于理解和沟通的工具，可以用于向团队成员或客户展 示设计想法和概念。 草拟和原型制作：手绘线框图可以用于草拟界面的早期版本，并用于制作原型以进行测 试和反馈。 记录和文档：手绘线框图可以用于记录设计决策和想法，并在项目文档中提供视觉 参考。 总之， UI手绘线框图是一种强大的工具，可以帮助设计师和开发人员可视化、讨论和规 划用户界面的设计和布局。 8.2.1 页面功能模块的划分 根据产品需求确定模块划分和页面内容，为视觉和研发提供设计和开发标准。线框图设 计要素包括界面内容、元素布局、优先顺序和关联分组。 线框图要做到以下几点。 结构：将产品的各个页面放到一起。 内容：页面显示的内容是什么？ 信息层次：如何组织和展示这些信息？ 布局功能：页面如何工作？如何完成任务？ 视觉顺序行为：与用户如何交互？它是如 何运转的？ 线框图设计步骤：明确该页面功能和任 务，确定设计页面所需的信息内容，对页面信 息内容进行布局，调整页面元素细节（尺寸、 定位等）。 经过这些操作之后，可以将页面功能模块 进行很好的划分。 8.2.2 手绘线框的方法 可以买专门的手绘线框本和铁皮的手绘线 框原型钢板尺，如图 8-3所示。 图 8-4 和图 8-5 所示为原型工作小组和手绘 原型。 一般在产品功能需求文档做完，功能拓扑图及重要流程设计完毕，然后开始把功能分配 到各个页面上时，使用手绘线框。 有一些敏捷式开发时，会让设计师一边讨论，一边绘制手绘线框。手绘线框图的优势 是，可以用最小的成本探讨设计可行性等问题。所以，设计师平时应该多使用 App 竞品，使 自己对各类 App 版式非常熟悉。 App 中比较重要的页面有注册、登录、首页、个人中心、设 图 8-3 原型钢板尺 第 8章　UI交互线框布局设计 置、导航分类、播放器、各种列表、社交、购物车、照片库、侧滑、搜索、地图、社区、对 话框、精品推荐等。 图 8-4 原型工作小组图 8-5 手绘原型 12类常见的 App 页面导航如图 8-6 所示。 图 8-6 12类常见的 App 页面导航 1）下导航：采用文字加图标的方式展现。一般有 3 ～ 5 个标签，大部分 App 选用这种导 航，优点是可以不迷路地在各个模块中切换，缺点是会分割页面内容，占用一定的底部 空间。 2）上导航：优点是用于较多的分类卡片，可以左右滑动，隐藏更多功能，缺点是需要双 手操作。 3）舵式导航：优点是可以把常用功能或者重要功能居中醒目显示，缺点是图标数量只能 是单数。 4）瓦片式导航：优点是简约而不简陋，导航清晰、明显，缺点是进入模块后，要退出才 能回到菜单。 5）列表式：优点是可以对内容非常多的数据进行不断加载滑动，缺点是单调，容易引 起疲劳。 6）弹出菜单：优点是形式新颖、节省空间，缺点是需要猜测和记忆内部功能。 7）瀑布流：优点是图片展示类可以一直下滑，视觉效果好，缺点是要找到之前滑过去 的图片，需要上下翻很久。 8）卡片翻转：优点是视觉效果好，动感强，缺点是损耗系统资源。 9）侧滑式：抽屉导航是指一些功能菜单按钮隐藏在当前页面后，单击入口或侧滑即可像 拉抽屉一样拉出菜单。这种导航设计比较适合于不需要频繁切换的次要功能，例如对设置、 关于、会员、皮肤设置等功能的隐藏。缺点是需要猜测和记忆被隐藏的功能。 10）时间轴：优点是适合时间线发帖打卡性质的页面，缺点是页面记录信息有限，需要 点入后查看。 11）数据可视化：优点是适合各种数据图表展示，缺点是耗费空间，并且开发烦琐。 12）自由添加模块：优点是可以让客户自由定义功能模块，缺点是开发麻烦，客户有学 习成本。 8.2.3 低保真原型设计 线框图一般分为低保真、中保真和高保真。 低保真：一般文字加简单的色块线框，标示出大概布局和功能即可，手绘或者 Axure自 带功能即可。 中保真：基本加上了图标的形态，尺寸也比较精确，一些隐藏页面和操作提示会在旁边 写明，拥有了简单的逻辑跳转。 高保真：基本和开发出来的上线版本 80% ～ 90% 类似，有细腻的跳转动效，或者交互操 作反馈，基本上是没有连接数据库的版本。图 8-7 所示为页面之间的跳转原型交互线框。 图 8-7 页面之间的跳转原型交互线框 8.2.4 常见的交互跳转手势 交互手势是指用户与界面之间通过特定的手势进行交互。这些手势通常是基于用户在操 作设备时常用的手势习惯而设计的，以便提高用户的操作效率和体验。 在许多应用程序和操作系统中，交互手势被广泛使用。例如，滑动、拖动、单击、双 第 8章　UI交互线框布局设计 击、长按等都是常见的交互手势。通过这些手势，用户可以方便地进行页面导航、选择、编 辑和删除等操作。 为了满足用户的需求和提高用户体验，许多应用程序和操作系统都在不断优化和改进交 互手势的设计。同时，一些新兴的交互方式也在不断涌现，如虚拟现实和增强现实中的手势 识别和动作捕捉技术，使得用户可以通过更加自然和直观的方式与界面进行交互。 总之，交互手势是现代人机交互的重要组成部分，它使得用户可以更加方便、高效地与 界面进行交互，提高了用户的操作体验和效率。 常见的手势交互跳转包括以下几种。 点击：用户通过点击屏幕上的某个对象或按钮，实现跳转。例如，点击一个链接或按 钮，可以打开一个新的页面或功能。 滑动：用户通过在屏幕上滑动，实现内容的滚动或页面的切换。例如，在浏览长列表或 滚动页面时，用户可以通过滑动来查看更多的内容。 长按：用户通过长按屏幕上的某个对象或区域，实现特定的功能或操作。例如，在某些 应用中，长按一个图片或文本，可以弹出菜单或进行复制、粘贴等操作。 双击：用户通过在屏幕上双击某个对象或按钮，实现特定的功能或操作。例如，在某些 应用中，双击一个按钮可以放大或缩小图片。 拖动：用户通过按住某个对象或按钮并拖动，实现特定的功能或操作。例如，在某些应 用中，拖动一个文件或图片到另一个位置可以实现移动或复制。 这些手势交互可以与各种 UI元素（如按钮、链接、列表、图片等）结合使用，以提供更 加直观、自然、高效的用户体验。同时，设计师和开发人员需要根据具体的场景和需求，选 择合适的手势交互方式。 常见 App的交互手势如图 8-8所示。 图 8-8 常见 App 的交互跳转手势 图 8-9～图 8-12为视觉客 UEGOOD学员 App线框作业展示。做线框要注意合理性，在 保证顶部标题栏、状态栏和底部导航栏尽量保持官方系统 App的尺寸的情况下，可点击区域 不要小于 44dpi，也就是手指点击尽量不要按到另一个控件，出现误操作。同类功能和图标控 件使用一致的尺寸设计将同类控件集中在一起，不同的功能用不同的间距隔开，颜色尽量使 用 5～ 7个色阶区分功能块。同类的页面多去收集一些版式，在手绘线框时，仔细推敲，尽 量让页面视觉效果好看，交互操作方便合理。 图 8-9 健身 App 线框 第 8章　UI交互线框布局设计 图 8-10　金融 App 线框 图 8-11 运动 App 线框 图 8-12 金融 App 线框 第9章　UI规范及切图适配 本章主要讲解UI规范及切图适配。 UI设计规范包括以下几个方面。 1）界面直观、简洁，操作方便快捷，用户接触软件后对界面上对应的功能一目了然，不 需要太多培训就可以方便使用本应用系统。 2）保持字体及颜色一致，避免一套主题出现多个字体，不可修改的字段统一用灰色文字 显示。 3）保持页面内元素对齐方式的一致，如果没有特殊情况，应避免同一页面出现多种数 据对齐方式。 4）在包含必须与选填的页面中，必须在必填项旁边给出醒目标识（*）；各类型数据的输 入需要限制文本类型并进行格式校验，如电话号码输入只允许输入数字、邮箱地址需要包含 “@”等，在用户输入有误时给出明确提示。 5）可单击的按钮、链接需要切换鼠标手势至手形。 6）保持功能及内容描述一致，避免同一功能描述使用多个词汇，如编辑和修改、新增和 增加、删除和清除混用等。 7）显示有意义的出错信息，而不是单纯的程序错误代码。 此外，UI设计规范还包括对图标、按钮、表单、对话框等具体元素的设计要求。例如， 按钮应该具有清晰的标签和良好的可点击性；表单应该具有明确的提示和帮助文本；对话框 应该提供明确的操作选项和信息提示等。同时，UI设计规范还强调用户体验和用户测试的 重要性，要求设计师在设计过程中充分考虑用户的需求和习惯，并进行反复的用户测试和反 馈，以确保设计的可用性和可访问性。 9.1UI 规范 在讲解UI规范之前，先了解一下 dp、px、pt的关系。 px 全称为 pixel，即通常所说的像素，可以这样理解： 1）px是屏幕上用来显示内容的最基本的点。 2）px不是自然界的长度单位，一个px可以很小，也可以很大，是一种相对长度。 3）屏幕横向、纵向分布px的数量，称为分辨率。比如1920×1080分辨率的实际含义 是：显示器面板横向分布了1920个px，纵向分布了1080个px。 9第 章 UI规范及切图适配 9.1UI 规范 在讲解UI规范之前，先了解一下 dp、px、pt的关系。 px 全称为 pixel，即通常所说的像素，可以这样理解： 1）px是屏幕上用来显示内容的最基本的点。 2）px不是自然界的长度单位，一个px可以很小，也可以很大，是一种相对长度。 3）屏幕横向、纵向分布px的数量，称为分辨率。比如1920×1080分辨率的实际含义 是：显示器面板横向分布了1920个px，纵向分布了1080个px。 9第 章 UI规范及切图适配 pt是 point 的简写形式，是专用的印刷单位，使用 Photoshop 做海报时的字体单位就是 pt。pt 是一个自然界标准的长度单位，可以被丈量，是一种绝对长度，1pt的大小为 1/72 英 寸，1 英寸为 2.54 厘米，所以 1pt 约为 0.35 毫米。 dp全称为 density-independent pixel，可以理解为是一种独立于 px之外的设计单位，是 Android 系统用来给设计师做基础设计使用的，也可以根据公式变换成 px。 dp同 pt一样，1dp 在任何设备上的大小都应该是一样的。dp和 px的转换方式是：dp = ppi/160 px。 另外，Android 常见的分辨率单位有 mdpi、hdpi 、xhdpi、xxhdpi。 App UI 规范一般头部写明 App名字，适配图片尺寸，一般以 1倍 dp或者 2倍 px来做规 范，如图 9-1所示。 图 9-1 App UI 规范案例 第 9章　UI规范及切图适配 1.标准色信息层级 标准色信息层级如图 9-2所示。 图 9-2 标准色信息层级 2.标准字信息层级 标准字信息层级如图 9-3和图 9-4所示。 图 9-3 标准字信息层级 1 图 9-4 标准字信息层级 2 第 9章　UI规范及切图适配 图 9-4 标准字信息层级 2（续） 3. 图标尺寸信息层级和功能图标分类 图标尺寸信息层级和功能图标分类如图 9-5所示。 图 9-5 图标尺寸信息层级和功能图标分类 4.控件尺寸和控件状态 控件尺寸和控件状态规范如图 9-6所示。 图 9-6 控制尺寸和控件状态规范 5.页面尺寸 页面尺寸规范如图 9-7～图 9-10所示。 商城商品栏：设计尺寸 375×812dp。 第 9章　UI规范及切图适配 图 9-7 商城商品栏页面尺寸 分类栏快速入口：设计尺寸 375×812dp。 图 9-8 分类栏快速入口页面尺寸 搜索栏：设计尺寸 375×812dp。 图 9-9 搜索栏页面尺寸 图 9-10 布局页面尺寸 众所周知，一套完整的 App通常有很多张切图， iPhone 需要 1x、 2x、 3x 图片文件， Android 需要至少 3 种： hdpi、 xhdpi、 xxhdpi。所以，制定一套非常有效而方便的 App切图命 名范非常有用。 iOS 需要给到的程序员切片资源常见为 2 套： 2x 切图（以 750px 为宽度尺寸基准切 图）、 3x 切图（以 1242px 为宽度尺寸基准切图）坐标标注图，一般 UI 的标注以 750px 2 倍图 为坐标标注图（以 750px 为宽度尺寸基准标注）。 图 9-11所示为苹果 iOS 屏幕适配表。图 9-12所示为 iOS 平台常见的 UI 画布尺寸。 第 9章　UI规范及切图适配 图 9-11 苹果 iOS 屏幕适配表图 9-12 iOS 平台常见的 UI 画布尺寸 图 9-13所示为单位换算表。 图 9-13 单位换算表：左边是苹果 iOS 系统，右边是 Android 系统 pt和 dp系统是程序员把资源进行换算后，只用一套代码比例来管理 3个尺寸的素材的 一种换算方法。在 1倍图的情况下，1dp=1pt=1px；在 2倍图的情况下，1dp=1pt=2px；在 3 倍图的情况下，1dp=1pt=3px。在换算 px和 dp 之间的比例，以及与程序员沟通尺寸和坐标 时，需要说明这个切片是在几倍图下的。图 9-14 所示为双平台多分辨率适配优先级方案。 图 9-14 双平台多分辨率适配优先级方案 一套图适配 2个平台多套分辨率。如果 iOS 和 Android 都要适配的话，一般先做 iOS 750×1334px 版，再使用切图工具 CUTTERMAN（这是免费软件，官网上有下载和教程）切 2 倍图和 3倍图。再缩放源文件到 720×1280px，再切 3套 Android：1.5倍、2 倍和 3倍图。 iPhone X的尺寸因为用户少，有些公司不制作这个分辨率。 图 9-15和图 9-16所示分别为苹果 UI界面和 UI图标尺寸规范。 图 9-15　苹果 UI界面尺寸规范 图 9-16 苹果 UI 图标尺寸规范 第 9章　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-17所示为 iOS 苹果图标规范示例。 图 9-17 iOS 苹果图标规范示例 苹果启动图标设计 1024×1024px，.png格式，常见的 2倍图标为 120×120px，3倍图标 为 180×180px，透明的部分补白色。苹果的字体一般是苹方，尺寸如图 9-18 所示。 图 9-18 iOS 苹果字体规范 切片的命名规则为：模块 _ 类别 _ 功能 _ 状态 .png，如 nav_button_search_ normal.png。 切片命名规范如图 9-19 所示。 图 9-19 切片命名规范 9.2UI适配 UI设计适配主要是指在设计界面时，采用一种或多种技术，使得 UI能够根据不同尺寸和 分辨率的屏幕大小自动调整布局、比例和字体大小等，从而在各种不同设备上都能够呈现出 完美的显示效果。 在具体的适配过程中，设计师需要考虑不同设备的屏幕尺寸、比例及分辨率等因素，以 确保 UI在不同的设备上都能够得到良好的展示效果。例如，对于不同尺寸的屏幕，设计师可 以通过调整布局、缩放和间距等参数来实现适配；对于不同分辨率的屏幕，设计师可以调整 字体大小和图片的清晰度等参数来实现适配。 此外，UI设计适配还需要考虑用户的使用习惯和体验。设计师应该尽可能地满足用户的 需求，让用户在使用不同设备时都能够方便地使用 UI界面。同时，设计师还需要关注 UI的 可读性、一致性和美观性等方面，以确保用户能够轻松阅读和理解界面内容，并享受到相似 的使用体验。 为了实现 UI设计适配，设计师可以使用一些技术和工具。例如，媒体查询是一种 CSS技 术，用于基于屏幕大小设置页面元素的样式。通过查询媒体，可以针对不同大小的屏幕使用 不同的样式，从而实现自适应布局。此外，设计师还可以使用响应式布局和流式布局等技术 来实现 UI的适配。 总之，UI设计适配是确保用户体验的重要环节之一。设计师需要综合考虑不同设备的屏 幕尺寸、比例和分辨率等因素，以及用户的使用习惯和体验，来设计和调整 UI界面，以实现 良好的适配效果。 对于 Android，目前基本以 720px的 2倍图为基础坐标标注图，也有一些公司开始直接做 1080px的 3倍资源了。 首先在 720×1280px下进行切图，可以完全适配 720×1280px的机型。 分别适配 1.5倍 480×800px、2倍 720×1280px 和 3倍 1080×1092px的图标。 图 9-20 所示为 Android 屏幕适配尺寸。 图 9-20 Android 屏幕适配尺寸 第10章　7种常见App实例讲解 本章主要讲解7种常见的不同功能类型的App设计。 常见的App与小程序类型包括以下几种。 1）桌面软件，如Office、QQ客户端等。 2）Web软件，如淘宝、网易云音乐网站等。 3）移动App，如微信、网易云音乐App等。 4）小程序，如“饿了么”小程序等。 5）物联网设备，如智能手环、智能手表、充电桩等。 此外，还有一些其他类型的软件系统，如微信小程序、字节跳动小程序、支付宝小程 序、百度智能小程序、京东小程序和快应用等。这些小程序可以实现在微信、字节跳动、支 付宝等平台上的功能，如支付、定位等。同时，百度智能小程序可以在百度旗下的部分App 中打开，如百度地图、百度等。 1. 运动健身类App 一般使用酷炫的配色，图标比较时尚，以动效为主。 视觉客UEGOOD实训基地学员作品节选，如图 10-1 所示。 图 10-1 运动健身类App 10第 章 7种常见App实例讲解 第10章　7种常见App实例讲解 本章主要讲解7种常见的不同功能类型的App设计。 常见的App与小程序类型包括以下几种。 1）桌面软件，如Office、QQ客户端等。 2）Web软件，如淘宝、网易云音乐网站等。 3）移动App，如微信、网易云音乐App等。 4）小程序，如“饿了么”小程序等。 5）物联网设备，如智能手环、智能手表、充电桩等。 此外，还有一些其他类型的软件系统，如微信小程序、字节跳动小程序、支付宝小程 序、百度智能小程序、京东小程序和快应用等。这些小程序可以实现在微信、字节跳动、支 付宝等平台上的功能，如支付、定位等。同时，百度智能小程序可以在百度旗下的部分App 中打开，如百度地图、百度等。 1. 运动健身类App 一般使用酷炫的配色，图标比较时尚，以动效为主。 视觉客UEGOOD实训基地学员作品节选，如图 10-1 所示。 图 10-1 运动健身类App 10第 章 7种常见App实例讲解 图 10-1 运动健身类 App（续） 2. 医疗类 App 以蓝白或者绿白为主，排版要清爽。 视觉客 UEGOOD实训基地学员作品节选，如图 10-2 所示。 图 10-2 医疗类 App 第 10章　7种常见 App实例讲解 图 10-2 医疗类 App（续） 图 10-2 医疗类 App（续） 3. 金融类 App 一般以红色、橙色、蓝色、紫色和土豪金为主。 视觉客 UEGOOD实训基地学员作品节选，如图 10-3 所示。 图 10-3 金融类 App 第 10章　7种常见 App实例讲解 图 10-3 金融类 App（续） 4. 音乐类 App 一般以马卡龙或者其他炫酷的配色为主。 视觉客 UEGOOD实训基地学员作品节选，如图 10-4和图 10-5所示。 图 10-4 音乐类 App 1 第 10章　7种常见 App实例讲解 图 10-5 音乐类 App 2 图 10-5 音乐类 App 2（续） 5. 美食类 App 一般以嫩黄色、嫩绿色、烘焙色或者粉红色为主。 视觉客 UEGOOD实训基地学员作品节选，如图 10-6所示。 图 10-6 美食类 App 6. 购物类 App 以红色、橙色或者黑白为主。 视觉客 UEGOOD实训基地学员作品节选，如图 10-7所示。 第 10章　7种常见 App实例讲解 图 10-7 购物类 App 图 10-7 购物类 App（续） 7. 旅游类 App 以绿色、蓝色为主。 视觉客 UEGOOD实训基地学员作品节选，如图 10-8所示。 图 10-8 旅游类 App 第 10章　7种常见 App实例讲解 图 10-8 旅游类 App（续） 本章主要讲解网站UI设计及通用模块的版式。 网站UI设计是指用户界面设计，主要关注网站的用户体验和美观程度。以下是网站UI 设计的一些基本原则和技巧。 1）简洁明了：设计时应该尽量简洁，避免过多的信息和元素，使用户能够快速找到所需 的信息和功能。 2）易于操作：设计应该易于操作，用户能够轻松地完成各种任务，如浏览、搜索、 购买等。 3）一致性：设计应该保持一致性，使用相同的布局、颜色、字体等，使用户能够快速适 应并理解网站。 4）美观大方：设计应该美观大方，能够吸引用户的注意力并提高用户的满意度。 5）交互性强：设计应该具有交互性，使用户能够与网站进行互动，如填写表单、提交意 见等。 6）响应式设计：设计应该能够适应不同的设备和屏幕尺寸，使用户能够在任何设备上方 便地访问网站。 7）符合用户习惯：设计应该符合用户的习惯和需求，如使用下拉菜单、点击按钮等。 8）突出重点：设计应该突出重点，使用户能够快速找到网站的核心内容和重要信息。 9）可定制性：设计应该可定制，根据不同的需求和品牌形象进行定制化设计。 10）测试和优化：设计应该经过测试和优化，确保其在实际使用中的可靠性和稳定性。 11.1常见的网站种类 网站的种类有很多，可以从不同角度进行分类。以下是常见的几种分类方法。 1）大型门户类网站：主要提供资讯类内容，包括综合性门户网站，如搜狐、新浪等，以 及垂直性门户网站，如服务于特定行业的网站、医药门户等。 2）展示型网站：主要展示公司的形象、品牌等，如知名大公司的官网。 3）营销型网站：主要目的是引导顾客关注、发起反馈的说服性网站，如常见的美容整形 类网站。适合于多数企业或个人，尤其是中小企业。 4）交易型网站：主要为提供在线交易的网站，如淘宝、天猫、华为商城等。大多数电商 网站是这种类型。 11第 章 网站UI设计及通用模块版式 11.1常见的网站种类 网站的种类有很多，可以从不同角度进行分类。以下是常见的几种分类方法。 1）大型门户类网站：主要提供资讯类内容，包括综合性门户网站，如搜狐、新浪等，以 及垂直性门户网站，如服务于特定行业的网站、医药门户等。 2）展示型网站：主要展示公司的形象、品牌等，如知名大公司的官网。 3）营销型网站：主要目的是引导顾客关注、发起反馈的说服性网站，如常见的美容整形 类网站。适合于多数企业或个人，尤其是中小企业。 4）交易型网站：主要为提供在线交易的网站，如淘宝、天猫、华为商城等。大多数电商 网站是这种类型。 11第 章 网站UI设计及通用模块版式 第 11章　网站 UI设计及通用模块版式 5）服务型网站：提供服务查询等，主要以政务类网站为主。 此外，根据网站所服务的对象和目的，还可以分为企业网站、电子商务网站、地方门户 网站、资讯类网站、娱乐类网站等。不同类型的网站在建站要素、功能特点和服务内容等方 面也存在差异。 下面分别对几种常见的网站类型进行说明和介绍。 1. 大型门户网站 国内知名的新浪、搜狐、网易、腾讯等都属于大型门户网站。大型门户网站类型的特点 是网站信息量非常大——海量信息，同时网站以咨询、新闻等内容为主。网站内容比较全面， 包括很多分支模块和信息，如房产、经济、科技、旅游等。大型门户网站通常访问量非常 大，每天有数千万甚至上亿的访问量，是互联网最重要的组成部分。 2. 展示型的企业官网 企业官网是一家企业在网上的虚拟门面，体现企业本身的优势和个性，用企业 VI 色、 LOGO 及整体设计，来提升企业对外的品牌建设。一个优秀的企业网站是企业的一张名片， 好的企业网站可以提高企业的知名度，有利于业务的直接转化，提高业务转化率。网站关键 词排名，尤其是关键业务排名，再加上优秀的营销型落地页，可以为企业直接带来订单。企 业几乎可以把任何想让客户及公众知道的内容都放入网站中，如产品服务、企业历史、企业 文化、联系方式、团队介绍、企业优势和新闻动态等。 这需要设计者具有良好的设计基础和审美能力，能够努力挖掘企业深层的内涵，展示企 业文化。这种类型的首页在设计过程中一定要明确，以设计为主导，通过色彩和布局给访问 者留下深刻的印象。 3. 交易型的电子商务网站（B2B、B2C、O2O） 电子商务网站是基于浏览器 /服务器应用方式，买卖双方不谋面而进行的各种商贸活动， 实现消费者的网上购物、商户之间的网上交易和在线电子支付，以及各种商务活动、交易活 动、金融活动和相关的综合服务活动的一种新型的商业运营模式。企业建立电子商务网站 后，可以实现广告宣传、业务咨询、网上订购、网上支付、建立电子账户、售后服务、意见 征询和交易管理等。交易类网站按业务可分为 B2B、B2C、C2C 等类型。 4. 营销型的运营活动网站 即按照不同的活动推广目的，设计对应主题和活动的页面，并满足重要性、可行性、时 效性等因素。 比如旅游网站的时效性旅游线路，电商网站的“双十一”“ 6·18”等活动，或者邀请新 人、发放优惠券、团购优惠等页面，内容包括活动时间、地点、参加的人员、主办单位、承 办单位、活动规则、兑奖方式、推广产品、优惠方式、合作伙伴和媒体宣传等。其目的包括 但不限于促销、拉新、召回、留存和转化等。 5. 服务型的 PC 软件或 Web 后台控制页 后台界面设计一般是指对软件的数据进行管理和运营的后台页面，如电商数据后台、OA 系统、客户管理系统、物流系统、广告投放系统、网站及 App 运营内容管理系统等。按照企 业的业务，有各种各样目的的后台，目的是数据的展示统计，增、删、查、改，对数据可视 化要求高，公共控件多，按钮状态及图标要寓意明确，偏功能性。 11.2网页通用各模块版式 网站模块是构成网站的基本组成部分，通常包括前台模块和后台模块。 前台模块通常包括以下几种功能。 1）用户注册和登录：用户可以在网站上注册账户并登录，以便在网站上执行操作。 2）网站内容浏览：用户可以在网站上浏览各种类型的内容，如文本、图片、视频等。 3）信息发布：网站管理员可以在网站上发布各种类型的信息，如新闻、产品、招聘 信息等。 4）用户反馈：用户可以在网站上提交反馈或投诉，以便网站管理员了解用户需求并改进 网站。 后台模块通常包括以下几种功能。 1）网站管理：网站管理员可以在后台模块中管理整个网站，如添加、编辑、删除 内容等。 2）用户管理：网站管理员可以在后台模块中管理用户账户，如创建、编辑、删除 用户等。 3）数据分析：网站管理员可以在后台模块中查看网站的数据分析结果，如访问量、用户 行为等。 4）安全控制：网站管理员可以在后台模块中设置安全控制措施，如密码重置、异常 登录等。 除此之外，一些网站还可能包含其他特定的模块，如电子商务模块、社交模块等。这些 模块通常是为了满足特定网站的需求而开发的。 下面将对网站的前台模块中的导航栏、BANNER、内容、底栏的页面布局展开讲解。 常见的网页导航条布局如图 11-1所示。 图 11-1 常见的网页导航条布局 第 11章　网站 UI设计及通用模块版式 常见的网页 BANNER布局如图 11-2所示。 图 11-2 常见的网页 BANNER布局 常见的网页内容结构布局如图 11-3所示。 图 11-3 常见的网页内容结构布局 第 11章　网站 UI设计及通用模块版式 图 11-3 常见的网页内容结构布局（续） 常见的网页底部布局如图 11-4所示。 图 11-4 常见的网页底部布局 在页面底部需要有网站的版权信息区，其中包含版权声明、工信部网站备案号等。 第12章　网站设计流行风格与UI规范 本章讲解网站的8种常见风格及网页UI设计规范。 网站设计风格是指网站在视觉和感官上的表现形式，它可以反映网站的特点、个性和品 位。下面讲解一些常见的网站设计风格。 极简风格：以简洁明了为主，注重布局和元素的精简，以清晰明了的视觉效果呈现信 息，让用户能够快速找到所需信息。 扁平化风格：追求简约、现代和干净的设计风格，通过简单的线条和图形表现形式，强 调信息传达的直观性和清晰度。 立体风格：利用透视和阴影等手法营造出三维效果，增强网站的层次感和空间感，提升 网站的视觉冲击力。 手绘风格：采用手绘或手写字体等手法表现，呈现出一种自然、随性、富有情感的设计 风格，给人一种亲切感和个性化体验。 科技风格：以冷色调为主，注重线条和图形的简洁、流畅和现代感，营造出一种未来感 和科技感，适合科技类网站的定位。 企业风格：注重规范、统一和严谨的设计风格，以稳重的色彩和图形表现形式呈现企业 的形象和实力，营造出一种专业感和信赖感。 可爱风格：采用柔和、温馨的色彩和可爱的图形表现形式，呈现出一种亲和力强、温馨 可爱的设计风格，适合女性用品或儿童用品等网站的定位。 复古风格：追求古典、优雅和精致的设计风格，通过复古的元素和色调表现历史感和文 化底蕴，给人一种高贵、典雅的视觉感受。 以上仅是一些常见的网站设计风格，设计风格的选择应根据网站的定位、目标用户和品 牌形象等因素综合考虑。接下来讲目前比较流行的网站设计风格。 12.18种常见的网页设计风格 1.蓝白科技设计风格 多用于官网及科技类企业网站，如图 12-1所示。 12第 章 网站设计流行风格与UI规范 12.18种常见的网页设计风格 1.蓝白科技设计风格 多用于官网及科技类企业网站，如图 12-1所示。 12第 章 网站设计流行风格与UI规范 图 12-1 蓝白科技设计风格 2.女性柔美设计风格 多用于女性类服饰化妆品等网页，如图 12-2所示。 图 12-2 女性柔美设计风格 第 12章　网站设计流行风格与 UI规范 图 12-2 女性柔美设计风格（续） 3.高端黑金设计风格 多用于高端奢侈品及盛典聚会类网页，如图 12-3所示。 图 12-3 高端黑金设计风格 图 12-3 高端黑金设计风格（续） 4.中国风设计风格 多用于传统文化元素相关产品网页，如图 12-4所示。 图 12-4 中国风设计风格 第 12章　网站设计流行风格与 UI规范 图 12-4 中国风设计风格（续） 5.欧美大色块风格 多用于时尚概念产品相关产品网页，如图 12-5所示。 图 12-5 欧美大色块风格 图 12-5 欧美大色块风格（续） 6.日韩小清新风格 马卡龙色系或者绿植系网站适合轻松愉快的产品或者无印良品风格，如图 12-6所示。 图 12-6 日韩小清新风格 第 12章　网站设计流行风格与 UI规范 图 12-6 日韩小清新风格（续） 7.北欧风格 (极简风 ) 适合高端或者小众追求自我个性表达的产品设计，如图 12-7所示。 图 12-7 北欧风格 图 12-7 北欧风格（续） 8.彩虹炫彩风格 适合个性强烈时尚的产品设计，如图 12-8所示。 图 12-8 彩虹炫彩风格 第 12章　网站设计流行风格与 UI规范 图 12-8 彩虹炫彩风格（续） 12.2网站 UI规范建立 整体来讲，网站 UI规范是指在网站设计中约定俗成的标准和规则，包括布局、色彩、字 体、图标等方面。 建立视觉规范的意义如下。 1）统一识别：规范能使页面相同属性单元识别统一，防止混乱，甚至出现严重错误，避 免用户在浏览时理解困难。 2）节约资源：除活动推广等个性页面，设计其他页面使用本规范标准能极大地减少设计 时间，达到节约资源的目的。 3）重复利用：相同属性单元、页面新建时可执行此标准重复利用，减少无关信息，即减 少对主体信息传达的干扰，利于阅读与信息传递。 4）上手简单：在招收、加入新设计师或前端时，查看标准能使工作上手更快，减少 出错。 以下是网站 UI规范的一些基本内容。 布局：采用清晰、简洁的布局，避免过于复杂的设计元素，以突出网站的内容和信息。 色彩：使用和谐、对比度适中的色彩搭配，以提升网站的视觉效果和用户体验。 字体：选择易于阅读、专业且与网站主题相符的字体，以增强网站的可读性和品牌 形象。 图标：使用简洁、易于理解的图标，以方便用户快速找到所需的信息。 响应式设计：根据不同设备的屏幕尺寸和分辨率，采用响应式布局，以适应各种设备， 提高用户体验。 页面元素：保持页面元素的一致性，如按钮、表单、图像等，以提高用户对网站的熟悉 度和信任感。 导航：设计清晰的导航结构，使用户能够快速找到所需的信息，提高网站的可访问性和 易用性。 信息层次结构：合理安排信息的层次结构，使用户能够快速了解网站的内容和结构。 图片使用：使用高质量的图片，以提升网站的视觉效果和用户体验。 交互设计：考虑用户的交互需求，设计易于操作的界面和交互方式，以提高用户对网站 的满意度。 以上是网站 UI规范的一些基本内容，当然，具体的规范还要根据不同的网站需求和目标 受众进行调整和完善。接下来阐述几个比较重要的网站设计规范事项。 1）字体和排版方案，包括每个部分的字体类型、尺寸、字重以及具体用法。 例如，网页常用的 9种字体，中文：思源体、黑体、等线体、苹方体、宋体；英文： Arial、Tahoma、Helvetica、Georgia。 2）配色方案，包括每种色彩的具体参数，以及其他可接受的色调，包括背景色、主题 色等。 3）网站 LOGO，包括它的样式、变体、尺寸及位置的说明。 4）网站文案、关键词的选择和文案的风格。 5）网站按钮的各个状态和尺寸、社交媒体图片的尺寸等。 6）网站图片使用规范，包括尺寸色彩、裁剪规则和视觉表现方面的标准。 7）网站 SEO信息，如可选的标签和关键词。 8）网站栅格标准，主要用作网页排版和响应式适配。 9）网站空间与留白方面的说明，以及设计的松紧度等。 10）网站隐藏状态说明，设计开发中会有疑问的点。 第 13章　网站公共控件及交互事件 13第 章 网站公共控件及交互事件 本章讲解网站的公共控件及交互事件，主要包括网站地图与模块设计、网页常见的控件 类型和网页常见的交互事件。 13.1网站地图与模块设计 网站地图又名 Site Map，网站地图呈树状结构，以主页为树的根节点。网站地图采用树结 构的优点是，可以让人们对产品的整体模块和不同栏目、功能单元有一个清晰的认识。网站 地图有扁平化模块的，也有纵向深入型和复杂深度型。 网站地图一般分为两种，一种是给搜索引擎看的，一种是给用户看的，前者帮助搜索引 擎更好地收录你的网站，后者帮助用户更好地了解你的网站整体结构，更快地找到他们想要 找的内容。 图 13-1 所示为 Web 端设计组件分类。 图 13-1 Web 端设计组件分类 13.2网页常见的控件类型 网站的公共控件包括以下几个。 Button（按钮）：可以控制按钮的可用性和显示状态。 CheckBox（复选框）和 CheckListBox（复选框组）：用于多选操作。 ComboBox（下拉框）：可以添加数据并设置选中的选项。 DateTimePicker（日期时间选择器）：用于选择日期和时间。 Label（标签）：用于显示文本信息。 LinkLabel（链接标签）：用于显示超链接。 ListBox（列表框）：用于显示选项列表，并可以设置多选或单选模式。 这些公共控件可以方便地用于网页设计和开发中，从而提高网页的用户体验和交互性。 1. 常见控件 常见的网页 UI 控件包括： Label（标签）、 ScrollView（滚动视图）、 ScrollBar（滚动 条）、 Mask（遮罩）、 Button（按钮）、 ProgressBar（进度条）、 EditBox（输入框）、 CheckBox（复选框）、 Image（图片）、 List（列表）、 Menu（菜单）、 Navigation （导航）、 Tab（标 签）、 Toast（提示）、 Alert（警示提示）、 Dialog（对话框）、 Divider（分割线）、 Timepicker（时间选择器）等。 各类网页 UI 控件还会自带样式，可以为同样的功能设计多种样式，如时间选择器。 2. 页面操作触发事件 按钮属性用于设置当按钮处在普通（ Normal）、按下（ Pressed）、悬停（ Hover）和禁用 （ Disabled） 4种状态时的状态。 Toast（提示框）的消息提示分类共有 3种类型：成功类、失败类和常规类。 3. 网页端表单的 5种操作状态 网页端表单的 5种操作状态为：标签→输入框→反馈→动作→帮助。 标签：提示当前表单是做什么的。 输入框：用来输入信息。 反馈：用户做了动作之后，界面回馈用户的信息。 动作：表单中的按钮，帮助人机操作的按键。 帮助：辅助用户了解用户功能的信息。 4. 反馈信息的类型 Push 是指系统的通知，从下到上弹出。 Toast 自己出现，自己消失，时间只有 1 秒，文字简短，只有一行。 Tips 是 App内部或者网站内部由顶部往下而来的通知。 Tips可以系统关闭， Push 一般不 能关闭。 下拉菜单和边栏一般采取递进形式，每个层级只有一个关键字段信息。 Disable 状态的提示，可单击状态，用颜色的灰度来提示 UI 设计人员或者研发人员是不 可用的。 13.3网页常见的事件 网站交互事件是指用户与网站页面进行交互时发生的行为或操作。这些交互事件包括以 下几种。 鼠标事件：如点击、悬停、移动、拖曳等。 键盘事件：如按下、释放、输入等。 第 13章　网站公共控件及交互事件 触摸事件：如在触摸屏设备上的滑动、点击等。 表单事件：如输入、选择、提交等。 页面事件：如加载、滚动、关闭等。 这些交互事件可以通过 JavaScript等前端技术进行处理和响应，以便实现各种交互效果和 功能。例如，当用户单击一个按钮时，可以触发一个鼠标事件，然后通过 JavaScript代码来处 理这个事件，并执行相应的操作。 1. UI 事件：当用户与页面上的元素交互时触发 焦点事件：当元素获得或失去焦点时触发。 鼠标事件：当用户通过鼠标在页面上执行操作时触发。 滚轮事件：当使用鼠标滚轮时触发。 文本事件：当在文档中输入文本时触发。 键盘事件：当用户通过键盘在页面上执行操作时触发。 2. 变动事件：当底层 DOM 结构发生变化时触发 load：当页面完全加载后在 window 上面触发；当所有框架都加载完毕时在框架集上面 触发；当图像加载完毕时在 上面触发；或者当嵌入的内容加载完毕时在 元素 上面触发。 unload：当页面完全卸载后在 window 上面触发；当所有框架卸载后在框架集上面触发； 或者当嵌入的内容卸载完毕后在 元素上面触发。 abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在 元素上 触发。 error：当发生 JavaScript 错误时在 window 上触发，当无法加载图像时在 元素上触 发，当无法加载嵌入内容时在 内容上触发。 select：当用户选择文本框（ 或