AIGC创意：移动UI设计（微课版）-课件 第1-3章 移动UI设计概述- 色彩设计

移动UI设计概述第1章移动UI设计就是智能手机、平板电脑和智能家电等移动终端中软件的人机交互、操作逻辑、界面美观的整体设计。好的移动UI设计不仅可以让软件变得更加独特和精致，还可以让软件的操作变得更加舒适、简单和灵活，充分体现软件的定位和特点。本章将对移动UI设计中的基础知识进行讲解，帮助读者快速了解移动UI设计的基础知识。UI是UserInterface的缩写，也就是用户界面的简称。可以说所有有屏幕的工业产品上的界面都算UI设计，比如手机APP，电脑端的网页，智能电视的界面，智能家居的屏幕等。传统的平面设计基本上只有看的功能，而UI设计不仅仅是让用户看，更多的还是要方便用户与互联网设备进行交互操作，所以说UI设计是在对用户的使用习惯，操作逻辑等进行深入研究过后对界面的交互和视觉进行的全方位设计。1.1UI设计基础概念设计师按照UI设计规范中的四大设计原则制作移动App界面，可以设计出更加舒适、简单及体现产品定位和特点的App界面。1.2移动UI的设计原则遵循风格一致性原则设计出的App界面直观、简洁，操作方便、快捷，界面中的功能也一目了然，用户不需要研究太久就可以顺畅地使用该App。整个UI设计中保持一致的语言、布局和设计规律能够让用户对于应用程序的设计模式更快认知、熟悉，并且在此基础上快速适应整体的体验。1.2.1风格一致性原则

元素准确性是所有UI界面应具备的基本属性。保持清晰的UI界面设计并不难，首先要保证按钮和操作的标签文字指向性要明确，保持清晰的信息传递，让用户能够快速弄明白交互的指向性。在设计与制作移动App界面时，需要使用相同的标记、缩写和颜色，使显示信息的含义明确且清晰，方便设计者和开发者查阅与使用。下面是元素准确性原则的一些归纳和总结，设计师在设计与制作移动App时可以参考借鉴。对错误信息的提示进行有意义的设计，避免单纯的程序错误提示带给用户的混乱感。避免使用文本输入框样式来放置不可编辑的文字内容。使用缩进和文字信息辅助用户理解界面内容。尽量使用用户词汇语言展示信息内容，避免专业计算机术语带给用户的距离感。高效地利用App显示空间，同时也要避免空间过于拥挤。保持语言的一致性，例如“确定”对应“取消”，“是”对应“否”等。1.2.2元素准确性原则

设计师在进行移动UI设计时，需要充分考虑布局的合理化问题，也就是说，需要满足用户从上而下及自左向右的浏览和操作习惯，同时也应该避免常用功能排列分散的问题。这样做的目的是提高App界面的友好性。在设计与制作移动App界面时，多做“减法”运算，将不常用的功能区块隐藏，保持界面的整洁和干净，使用户专注于主要业务操作流程，这样有利于提高App的易用性及可用性。1.2.3界面布局合理化原则

UI界面响应牵涉到体验的方方面面。当用户点击界面元素的时候，用户希望知道他们的操作是否成功，而这个时候，合理而快速的界面反馈就显得很重要了。系统响应时间应该适中，响应时间过长，用户就会感到不安和烦躁；而响应时间过短，则会影响到用户的操作节奏，同时可能导致用户出现操作失误。因此，设计师在制作移动App界面动效时，应在响应时间上坚持下面的3个原则。处理信息提示的时间最好在2~5秒，避免用户误以为没响应而进行重复操作。如果处理信息提示需要5秒或者更长的时间，设计师需为这部分内容设计进度条，避免用户因为长时间的等待而关闭界面。当长时间处理完成时，应给予用户操作成功的提示信息，及时的反馈可以安抚用户情绪。1.2.4响应时间原则

UI是UserInterface的缩写，也就是用户界面的简称。可以说所有有屏幕的工业产品上的界面都算UI设计，比如手机APP，电脑端的网页，智能电视的界面，智能家居的屏幕等。传统的平面设计基本上只有看的功能，而UI设计不仅仅是让用户看，更多的还是要方便用户与互联网设备进行交互操作，所以说UI设计是在对用户的使用习惯，操作逻辑等进行深入研究过后对界面的交互和视觉进行的全方位设计。1.3移动UI的设计流程在移动产品UI的设计中，UI设计师需要进行市场和用户调查分析：市场定位(用户定位、产品定位、技术定位)、市场需求分析(目标客户群分析、竞争对手分析)。在之前的产品需求分析会上，UI设计和技术工程师都会参加。在这个过程中，UI设计师要对用户定位、产品定位、竞争对手分析有清晰的认识，为后期的素材收集和风格控制做好准备。1.3.1需求分析

需求调研完成后，UI设计进入设计制作阶段。设计包括界面设计、交互设计。设计制作阶段要形成一套完整的设计方案。界面设计要以美观为主，简洁、易用的界面才能让自己的产品在同类产品中脱颖而出。交互设计要分析产品必需的功能、内容没通过原型工具来规划布局和流程。我们可以多设计几种不同风格的方案备选。1.3.2设计制作

将设计方案提交给客户后，我们需要与客户进行沟通，根据客户的需求来修改设计方案，但也要考虑客户需要的功能或技术能否实现。有些客户的修改意见在规定时间内难以完成的，可以将其留待产品改版或升级时实现。1.3.3方案修改

设计方案交付并通过以后，我们就可以将产品推向市场。但此时设计工作并没有结束，我们还需要跟踪了解用户的使用反馈，为以后的产品升级搜集资料、数据。1.3.4测试改进

近些年，AI绘画的兴起与互联网行业的快速发展和技术进步密不可分。随着智能算法和计算机处理能力的不断提高，AI绘画技术逐渐被应用于各种领域，比如游戏开发、电影动画、虚拟现实、建筑设计、产品设计等。它可以大幅提高设计效率，为设计师提供更多的灵感和创造空间。1.4AI绘画在UI设计中的探索前期调研在设计过程中非常重要，因为它可以帮助设计师了解客户和市场的需求和趋势，从而为设计方向和策略提供指导。设计师进行前期调研时需要输入大量的分析资料。例如，用户画像，用户人群划分、剖析用户真实需求、提取用户审美偏好，在设计时进行充分融入，从而做到“用户体验”、“视觉调性”的精细细化设计升级，达到“好数据转化”的最终目标，如图1-4所示。ChatGPT等辅助工具可供设计师获取丰富的文字信息，从而帮助他们快速定位设计方向，并辅助他们学习解决问题的方法。1.4.1利用AI进行设计调研

作为设计师，创意和效率是非常重要的，而AI绘画正是能够帮助我们提高这两个方面的技术。它能够在短时间内提供多种方案，不断地输出高质量的设计图，能够快速解决我们的问题。另外，利用垫图的方式，AI绘画还能够提高画质和效果，从而事半功倍。1.4.2AI绘画在UI设计工作中的应用

AI绘画是对设计团队的巨大帮助。从以下几个方面来看：辅助创意：AI绘画可以通过智能算法帮助设计师快速生成多样化的元素和图案，激发设计师的创意灵感，让创意无限延展。提升效率：AI绘画可以通过自动化处理、批量操作、快速修图等方式，为设计团队省去大量重复繁琐的工作，提高生产效率。丰富素材：AI绘画可以通过人工智能智能化技术生成基础素材、辅助绘画效果，从而有助于提高设计团队的素材库的质量和数量。精简内容制作流程：AI绘画可以通过智能化的方式协助设计团队进行色彩、构图和设计细节等的优化，优化后能够减少内容制作流程中的缺陷和错误。沉淀方法论：AI绘画可以通过智能算法分析和学习历史设计作品的生成规则和工作流程，让设计团队在工作实践中形成更加深入的设计思考和理论体系。综上所述，AI绘画不仅为设计团队提供了强有力的支持，同时也激发了人类设计的创新潜能，让设计作品更具有创意性和艺术性，推动了设计领域的不断创新发展。1.4.3AI绘画对设计团队的帮助

UI是UserInterface的缩写，也就是用户界面的简称。可以说所有有屏幕的工业产品上的界面都算UI设计，比如手机APP，电脑端的网页，智能电视的界面，智能家居的屏幕等。传统的平面设计基本上只有看的功能，而UI设计不仅仅是让用户看，更多的还是要方便用户与互联网设备进行交互操作，所以说UI设计是在对用户的使用习惯，操作逻辑等进行深入研究过后对界面的交互和视觉进行的全方位设计。1.5主流操作平台苹果iOS系统是由苹果公司专门为其硬件创建和开发的移动操作系统，也是苹果公司后续推出的其他三个操作系统(即iPadOS、tvOS和watchOS)的基础。iOS的主要版本每年发布一次。自2007年第一代iPhone推出以来，它是许多苹果移动设备(包括iPhone、iPodTouch)的操作系统。以iOS为基础的许多苹果产品，以其使用流畅、应用丰富等特点受到了很多用户的青睐。1.5.1iOS系统

Android系统是一个基于Linux内核和其他开源软件的修改版移动操作系统，主要为智能手机、平板电脑等触摸屏移动终端设备而设计。Android系统于2007年被正式推出，谷歌公司于2008年9月推出了首款商用Android手机。Android的发展也得到了开源社区的大力支持，如作为Android系统核心的Linux内核。Android移动操作系统是免费的开源软件，除了用于传统智能手机终端，也被用于其他电子设备上，例如游戏机、数码相机、PC等。1.5.2Android系统

大多数iOS应用都是由UIKit中的组件构建的。UIKit是一种定义通用界面元素的编程框架，这个框架不仅让App在视觉外观上保持一致，同时也为个性化设计留有很大空间。UIKit提供的界面组件有三类：栏(Bars)，视图(Views)，控件(Controls)。栏（Bars）可以告诉用户在App中当前在所在的位置、能提供导航，还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种：导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。视图（Views）包含用户在App中看到的基本内容，例如：文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。控件（Controls）控件，是用于触发操作并传达信息的。例如：按钮、开关、文本框和进度条，都属于典型的控件。1.6移动界面三大要素项目策划与原型设计第2章本章主要讲解如何将客户提出的抽象化描述转换为具象化的移动UI策划和原型设计，转换过程中使用的方法及常用软件也将一一为读者进行详细介绍，帮助读者更好地完成每一款移动UI产品的策划与原型设计。项目立项后的第一阶段是需求分析阶段，当我们拿到一个新的需求时，首先要了解的就是项目的需求是什么，了解市场背景、产品定位、概念，客户的需求是什么。2.1项目设计规划在原型设计之前，首先需要进行用户调研。通过与目标用户进行深入交流，可以了解他们的需求、行为和偏好，有助于确定产品的关键功能和目标用户群体，为原型设计提供有力的基础。用户调研的方式可以采用面对面交流，用户调查问卷，用户群体讨论会，构建用户旅程图，数据分析和用户行为追踪。经过调研，我们可以形成用户画像。用户画像分为显性画像和隐性画像。显性画像：即用户群体的可视化的特征描述。如目标用户的年龄、性别、职业、地域、兴趣爱好等特征。隐性画像：用户内在的深层次的特征描述。包含了用户的产品使用目的、用户偏好、用户需求、产品的使用场景、产品的使用频次等。2.1.1主要目标用户分析

除了用户调研，在进行原型设计前还需要对产品的信息架构进行规划。信息架构涉及确定产品的内容组织方式、导航结构和功能布局等，可以清晰地定义产品的层次结构和用户流程，确保原型设计符合用户期望。常见的信息架构方式包含创建信息架构图和创建流程图。2.1.2功能层级梳理

思维导图是一种表达发散性思维的有效图形思维工具，也叫心智导图或心智图。它通过运用图文并重的技巧，把各级主题的关系用相互隶属与相关的层级图表现出来，把主题关键词与图像、颜色等建立记忆链接。思维导图充分运用左右脑的机能，利用记忆、阅读、思维的规律，协助人们在科学与艺术、逻辑与想象之间平衡发展，从而开启人类大脑的无限潜能。2.2利用思维导图梳理项目内容大量研究证实，思维导图对记忆、理解、信息管理、思维激发和思维整理都有不同程度的作用，思维导图也逐渐呈现出来越来越多的运用方式。今天，在我们学习、生活和工作的各个环节中，思维导图都在展现着它无穷无尽的生命力。在开发移动App项目时，可以通过整理与提炼关键词绘制思维导图，用思维导图精准表达项目的核心内容。App项目团队也可以通过思维导图细化商业模式、支付、营销和运营等环节，还可以通过思维导图梳理、构建App界面蓝图。优化大脑，提高沟通效率防止记忆或沟通的遗漏让自己的思路变得有条理2.2.1思维导图的好处

目前流行的思维导图软件有很多，比较知名的有MindMeister、MindManager和XMind，下面分别介绍这3款软件。2.2.2常用软件

在移动App项目创建的初期，根据设计团队前期的项目策划，相关人员可以使用思维导图将产品的操作流程、页面、控件或用户需求表达出来。2.2.3绘制移动UI思维导图

思维导图是一种流行的信息组织呈现形式，任何人都可以通过可视化方式组织想法、思维和概念，以进行头脑风暴和灵感记录。随着AI技术的加持，思维导入变得更加强大和有效，AI技术驱动的思维导图工具可以帮助用户比以往更高效地创建、组织和分享想法，提高生产力和创造力。TreeMind树图是一个基于人工智能技术的新一代思维导图平台，该软件允许用户输入需求后，可以自动生成思维导图，提高学习和工作效率。Boardmix是一个由AI驱动的智能流程图软件，它不仅具备了各种专业的流程图模板，而且还支持使用AI来智能绘制流程图，只需输入流程图名称或主题，就可以快速生成想要的流程图。2.2.4利用AI完成思维导图

在正式开发移动App项目之前，通过对项目策划书的研究获得App产品相关信息后，就可以开始设计与制作产品原型。原型用于产品经理、设计师和客户之间的沟通与讨论，这样便于随时对项目进行补充和修改，确认最终内容后再进入App开发环节。制作App原型既能够节约开发成本，又能够节省大量时间，避免反复修改。2.3利用原型设计表达项目诉求产品原型是用线条、图形描绘出产品的框架。原型设计是综合考虑产品目标、功能需求场景和用户体验等因素，对产品的各模块、界面和元素进行合理性排序的过程。对移动UI行业来说，原型设计就是将界面模块、各种元素进行排版和布局，获得一个界面的草图。为了使效果更加具体、形象和生动，设计师还会加入一些交互性的元素来模拟界面的交互效果。2.3.1原型设计的概念

原型设计是产品设计开发中的一个重要的工具和方法，它可以帮助设计团队验证概念、减少风险、提高用户体验并加速产品开发进程。那原型设计具有哪些好处呢？总结起来，其重要性主要体现在以下几个方面。验证和改进产品概念：通过创建一个初步版本或模型，原型设计可以帮助设计团队验证产品的概念和想法，更好地理解产品的外观、功能和交互方式，以及产品是否能够满足用户需求。此外，通过测试原型，可以及早发现问题并进行改进，从而确保最终产品的质量和可行性。减少开发成本和风险：在原型阶段发现和解决问题，可以避免在产品制造和市场推出之后发现昂贵的错误或需要进行大规模修改的情况，因此在产品开发的早期阶段就进行原型设计可以帮助降低开发成本和风险。原型设计使团队能够在投入大量资源之前对产品进行测试和优化，从而减少后期的修复和调整成本。提高用户体验：原型设计使设计团队能够更好地体验和关注用户体验，尤其是通过创建可交互的原型，可以模拟用户与产品的互动过程，有利于收集用户反馈和行为数据，进而助于优化产品的界面、功能和流程。沟通和反馈：原型设计为设计团队、客户和利益相关者提供了一个可视化的产品参考物。通过原型设计，产品团队可以清楚地表达设计意图和想法，而客户可以更好地理解和评估产品的概念和功能。2.3.2原型设计的重要性

在移动App项目开发过程中，选择一款优质的原型制作软件能够节省大量的时间和其他成本，常见的原型制作软件有AxureRP和AdobeXD两种。2.3.3绘制原型的常用软件

原型设计是产品开发过程中的一个关键环节，通常在产品设计阶段的早期进行，原型设计的目的是验证产品的概念、功能和用户体验，以便在进一步的开发和生产中进行改进。通过原型设计，产品经理可以准确地向设计师以及开发人员传达产品定位、目标、功能、构架、流程等信息，还可以与客户、投资者和利益相关者进行沟通和反馈，从而改进产品设计并增加其市场竞争力。目前最常见的原型设计方式是通过原型设计工具创建原型图。原型图具有产品界面展示、交互效果以及产品架构等信息，它是一款产品在正式发布之前的一种模型，能够直观地呈现产品的所有功能细节以及逻辑关系。根据不同的项目需求，原型图的细节和重点也不尽相同，有些侧重概念表达，有些注重交互设计，因而产品原型的呈现形式其实是多种多样的。草图低保真原型中保真原型图高保真原型2.3.4原型绘制的表现手法

移动UI界面布局主要分为主导航和次导航2大类。是UI设计时需要重点考虑的部分。一款App的导航可以被设计成多种形式的，导航设计的合理与否,直接关系到用户能否根据自己过去的生活习惯和直觉，不假思索地去使用App，并且完成用户想要完成的任务。一款产品从初期架构到上线会经历无数次的改版。有可能是因为商业模式的改变，也可能是产品本身的架构不能满足业务需求，产品的迭代和更新。每进行一次结构上的调整，成本都是巨大的。所以，在设计之初，我们就要慎重考虑App的布局设计。2.4移动UI设计的布局主导航就是放在界面一屏，App的栏目或主要内容的导入链接。一般情况下，导航上的栏目或内容，是App最主的内容。主导航布局可大致分为列表式、陈列馆式、九宫格式、选项卡式、旋转木马式、行为扩展式、多面板式和图表式。2.4.1主导航布局

次导航是相对于主导航而言的。次导航的作用是对主导航的补充，一般是链接到一些栏目，或者放置一些不适合放置在主导航的锚文本。次导航布局主要分为抽屉式、超级菜单式、弹出式和图片轮盘式。2.4.2次导航布局

好的布局设计能让App界面看起来整齐且有层次，也能让用户在使用是更快地找到重点信息，提高页面的转化率。2.5优化布局策略设计界面布局时，因为内容和页面都比较多，为了保证页面与页面的统一性，首先需要设定页面内容四周的边距，就是我们俗称的“留白”。设定完页面的边距后，相应的内容、图像等都可以依次确定。这样的顺序可以使调整出来的页面条理清晰。根据页面的内容和功能的不同，适当调整界面的留白非常重要。在界面四周增加留白，可以将用户视线集中到中心的内容上，这样更容易突出重点。反之，减少留白或不留白，页面会显得更丰富，更充满张力。2.5.1界面布局的留白

在界面设计中，最常用的对齐方式主要有3种：齐行、居左和居中。齐行：在阅读文本的界面中最为常见，适用于较长的文本，呈现左右两边对齐的效果。居左：这种对齐方式比较常见，常用在一些信息列表的展示页中。这种方式比较容易阅读，可以很好地区分文本的主次关系。居中：主要运用在信息流动的文本中。由于文本较短，使用居中对齐可以让页面平衡感增强。在页面中，除了文字部分需对齐外，图标元素等也需要对齐。图标元素和文字之间基于中心线对齐，可以有效地加强二者之间的联系，文字和图标可以一一对应。2.5.2界面内容的对齐方式

利用间距可以有效区分页面的层次关系，加强阅读性。在iOS和Android系统的界面间距设计中，一般会以10px为单位进行设计，这样便于统计和规范。以文字为主的阅读类App一般会设定页面的左右间距为30px。保持四周间距的一致性，可以让界面看起来更加规整。同时，利用间距将相同类别的文字或图像被划分在一个区域中，还能直接划分内容的层级。2.5.3界面内容的间距

界面的层次是指界面元素的前后关系。当页面中的信息量较大时，就需要在设计页面时区分层次，让用户找到感兴趣的部分，从而留住用户。增强信息的层次关系，可以从大小对比、冷暖对比、明暗对比、视线规则和中心引导线等方面实现。大小对比：在设计元素时，面积越大的元素越应该放在前面为主要信息。冷暖对比：当需要通过冷暖对比突出主要元素时，暖色的元素靠前，冷色元素在后。暖色可以用在主视觉和按钮上，次要的信息和元素使用冷色。明暗对比：当页面出现一些弹窗时，弹窗颜色鲜亮显示，而底部背景页面灰暗显示。通过亮度上的对比可以快速区分可操作性和不可操作的区域，如图2-88所示。视线规则：用户在阅读信息时，一般都是按照从左到右或从上到下的顺序进行阅读的。按照这个规律，在设计页面时，一般会将图标放在左侧，描述性文字放在右侧，而排列顺序则是从上到下，如图2-89所示。另外，中心线的位置也是用户最容易注意到的位置。将重要元素放在页面中心线位置，可以快速向用户传递信息。2.5.4界面内容的层次

色彩设计第3章在移动UI设计中，除了需要对交互空间建、字体等进行规范设置外，还应对界面配色进行规范、统一。建立统一的配色规范，才能够在UI设计中让信息结构的层次更加分明，功能更加分明，使App界面给人一种一目了然的印象。本章主要讲解如何构建符合设计主题的颜色系统，让移动UI的外观变得更加出彩，从而可以吸引更多的用户。当用户打开App后，第一时间看到的内容是界面的色彩，因此对于产品的定位以及颜色的把控是设计师工作的一大重点。优秀的色彩搭配可以使用户对App产生好感，为App增加流量和人气。3.1移动终端显示色彩基础知识颜色是通过眼、脑和人们的生活经验所产生的一种对光的视觉效应。人对颜色的感觉不仅仅有光的物理性质所决定，也会受到周围颜色的影响。颜色是App界面的基础，优秀的色彩搭配是一款App项目成功的第一步，所以正确地认识色彩和它的原理非常重要。3.1.1认识色彩

色彩通常包括色相、饱和度和明度三大属性。色相就是色彩的相貌，是色彩第一要素，是区别各种不同色彩的最准确的标准。饱和度又可称为纯度，是指色彩的鲜艳程度。、明度是指色彩的明暗程度。3.1.2色彩三大属性

每一种颜色带给用户的视觉感受都是不同的。在移动App项目中，界面通常由主色、辅色、点缀色(强调色)和文本色构成。如何搭配这些元素才能使App界面变得和谐和统一呢？读者可以尝试通过下面8种配色方法进行搭配。互补色配色对比色配色类似色配色邻近色配色改变色彩的纯度和明度学会运用渐变色增加中性色正确使用色彩面积3.1.3色彩的调和搭配

用户界面的构建过程中，最为耗时的事情是色彩的选择。真正