《UI设计项目教程（AI助创 微课版）》课件 项目二 UI设计基础

项目2UI设计基础UI设计项目教程（AI助创微课版）高等院校艺术设计精品系列教材CONTENTS2.1UI设计中的文字2.2UI设计中的色彩2.3UI设计中的图片2.4UI设计中的界面布局2.5UI设计中的原型图2.6实践训练2.1.1常用字体类型选择合适的字体不但能使信息的传达更加高效，也能方便用户浏览内容。常用的字体类型有黑体、宋体、手写体、艺术体和书法体，每种类型的字体都有各自的特点，设计师应根据实际需要和设计风格进行选择。2.1.2常用文字颜色另外，纯黑色（#000000）与纯白色（#FFFFFF）会产生极高的对比度，这种强烈的反差会刺激眼睛，尤其是在长时间阅读时，容易导致视觉疲劳，因此UI设计中的文字经常使用深灰色或浅灰色，可以降低对比度，让光线更柔和，从而提升阅读的舒适度。使用不同程度的灰色可以建立清晰的视觉层次，让用户一眼就能区分信息的主次关系。界面中文字的颜色不宜过多，可选择一种颜色作为主色，在主色的基础上调整颜色的透明度，让界面更富质感，主色调更协调，整体设计更统一，同时要注意区分文字颜色与界面背景颜色，保证文字内容清晰易读。2.1.3界面文字规范1．系统默认字体规范大部分界面都直接使用系统的默认字体，因此设计师需要对系统默认字体规范有深入的了解，以确保设计稿在不同平台和设备上都能保持兼容性与可用性。iOS默认中文字体为“苹方”，英文字体为“SanFrancisco”，这两种字体纤细、饱满，便于阅读；Android默认中文字体为“思源黑体”，英文字体为“Roboto”，这两种字体的笔画粗细适中，端正大方；Windows操作系统默认中文字体为“微软雅黑”，英文字体为“SegoeUI”，这两种字体字形饱满、易于识别；macOS与iOS默认字体一致。2.1.3界面文字规范2．常用的字号规范在iOS的移动端App界面设计中，App界面中使用的字号一般为10pt～28pt，10pt是App界面中可显示的最小字号。在Android的移动端App界面设计中，App界面中使用的字号一般为12sp～24sp。App界面的常用字号01软件界面中的文字需要使用偶数字号。在中文应用系统中标题字号一般为16px～32px；导航和栏目标题字号一般为18px；正文字号为14px；提示性内容字号为12px，需醒目标注时加粗显示。软件界面的常用字号03网页界面中的字号并没有明确规定，但常用的字号为12px～30px。其中，12px适用于非突出性的日期、版权等注释性内容；14px适用于非突出性的普通正文内容；16px、18px、20px、22px、24px、28px、26px及30px适用于突出性的导航、标题等内容。网页界面的常用字号02CONTENTS2.1UI设计中的文字2.2UI设计中的色彩2.3UI设计中的图片2.4UI设计中的界面布局2.5UI设计中的原型图2.6实践训练2.2.1色彩基础知识色彩是人们通过眼睛、脑和自身生活经验所产生的对光的视觉效应，也是人的视觉机能对外界事物的感知结果。色彩可以分成有彩色系和无彩色系两种类型。有彩色系具有3个基本属性，分别为色相、明度和纯度，也称为色彩的三属性；而无彩色系只有明度一个属性。2.2.2常用色彩搭配按照色彩的色相数量，色彩搭配方法可分为单色配色法、双色配色法、三色配色法和四色配色法，使用难度随着色相数量的增加而增加，设计师可先使用单色配色法，然后逐渐在配色方案中融入其他色相的色彩。2.2.3色彩运用规范一个界面中往往不止一种颜色，一般来说，界面中的色彩主要由主色、辅助色和中性色组成。其中，主色用于确定界面风格，以及强化品牌识别和引导核心操作；辅助色用于丰富视觉层次，通常与主色形成协调或对比，起到点缀、补充的作用；中性色在界面中占比较大，是构成界面骨架的主要颜色，也被称为背景色，常用于背景、文字、边框和分隔线等，可以保持视觉平衡。CONTENTS2.1UI设计中的文字2.2UI设计中的色彩2.3UI设计中的图片2.4UI设计中的界面布局2.5UI设计中的原型图2.6实践训练2.3.1位图和矢量图通过相机、手机等设备拍摄的图像属于位图，也叫点阵图，是由单个像素点组成的。位图能真实地显示物体的光影和色彩，是界面的主要构成要素。●

位图矢量图又称向量图，是指计算机图形学中用点、直线或多边形等基于数学方程的几何图元表示的图像。构成矢量图的点和线可被称为对象，每个对象都是单独的个体，具有大小、方向、轮廓、颜色和位置等属性。●

矢量图2.3.2图片比例规范011∶1正方形比例，这种比例的图片的长度和宽度相同，构图非常简单，可以有效突出主体，常用于用户头像、品牌Logo（标志）、图标、电商产品主图等展示场景。0316∶9或9∶1616∶9是标准的宽银幕比例，符合大多数计算机、电视屏幕，带有电影感、叙事感和高级感，视觉冲击力强，给用户一种视野非常开阔的感觉，常用于视频播放界面、网站首页横幅等展示场景。9∶16是目前移动端App界面中常见的图片比例，针对智能手机竖屏持握方式设计，可以为用户提供全屏沉浸式体验。024∶3或3∶43∶4的图片非常适合展示竖版内容，更契合手机屏幕的阅读动线，空间利用率高，在移动端App界面布局中能形成舒适的垂直滚动节奏。4：3的图片提供了更宽的视野，能容纳较多的视觉信息，常用于在有限空间内展示更多横向内容，如企业官网中的列表图。2.3.3图片格式规范JPEG格式是常用的图像文件格式之一，主要用于图像预览和网页制作。使用JPEG格式保存的图像会被压缩，图像文件会变小，但会丢失部分不易察觉的色彩。JPEGPNG格式是一种采用无损压缩算法的图像文件格式，用于在互联网上进行无损压缩和显示图像，支持透明背景且没有锯齿边缘。PNGSVG格式是一种基于XML的图像文件格式，用于描述二维矢量图。由于其基于矢量的特性，SVG格式的图像可以在任何尺寸下保持高质量的显示效果，而不会在放大时出现像素化的问题。SVGCONTENTS2.1UI设计中的文字2.2UI设计中的色彩2.3UI设计中的图片2.4UI设计中的界面布局2.5UI设计中的原型图2.6实践训练2.4.1界面版率界面版率是指版面的利用率，即界面内容占界面的比例，不同的界面版率呈现出的视觉效果有所差异，界面版率高，视觉效果丰富；界面版率低，则会给用户带来宁静、典雅的视觉感受。2.4.2界面的视觉层次常用的区分界面视觉层次的方法有以下5种。利用人的视觉规律来规划界面内容，如根据从左到右、从上到下观看内容的视觉顺序，可以将重要内容放置在第一眼视线落点。●

视线规划区分04把需传达的内容放置在界面中心，可以迅速将内容传达给用户。●

中心引导区分050102040305通过重点内容占有面积大于次要内容占有面积或重点元素的尺寸大于次要元素的尺寸的对比，突出重点。●

大小对比区分01可以采用暖色和冷色来区分界面背景和凸显重点内容。●

冷暖色区分02根据明暗程度可以区分当前内容的可操作性和不可操作性。●

明暗对比区分032.4.3界面的留白与对齐1．留白留白也称为“负空间”，指的是设计元素之间的空白区域。在界面中的不同区域运用留白可以达到不同的效果，例如，在段落与段落、行与行、字与字之间增加留白，可以极大地降低阅读的认知负荷，让用户更轻松地理解和接收信息；在可点击元素周围提供足够的留白，可以降低误触率，让交互变得更轻松、精准；在重要元素，将不相关的元素分开，可以自动在视觉上形成分组，建立清晰的视觉层次与组织关系。2.4.3界面的留白与对齐2．对齐齐头齐尾指让内容在界面的两端进行对齐，给人一种理性、大方的感觉，多用于文字较多的界面。●

齐头齐尾。齐头散尾指让内容在界面的一端对齐，如左对齐、右对齐等，相对齐头齐尾来说更加自由、灵活，更有韵律感，且松弛有度，能够区分主次内容，常用展示列表信息的界面。●

齐头散尾居中指让内容在界面中居中对齐，适用于排版较短的内容，可以很好地平衡界面布局。●

居中2.4.4界面的常见构图方式构图是指在有限的空间里，合理地布局所需的各种元素，使它们产生较好的视觉效果。不同的构图方式所带来的视觉效果有所不同。2.4.4界面的常见构图方式CONTENTS2.1UI设计中的文字2.2UI设计中的色彩2.3UI设计中的图片2.4UI设计中的界面布局2.5UI设计中的原型图2.6实践训练原型图是UI产品落地之前的可视化框架，它通过简化的图形、线条和文字等元素，模拟出产品最终的布局、结构、交互流程和功能逻辑。要设计出符合需求的原型图，首先需要充分掌握原型图的基础知识。2.5.1原型图的分类低保真原型图又称线框图，通常用于早期的概念阶段，可以通过纸笔手绘，也能借助计算机工具以简单的方式呈现界面布局和交互逻辑。高保真原型图可以被视为产品的Demo，它在低保真原型图的基础上，模拟或使用真实的数据、图片、图标，增加了更多的视觉细节和交互效果，如配色、按钮的点击效果、界面的转场动画、数据的动态加载效果等，为后续视觉阶段的工作提供参考依据。●

低保真原型图●

高保真原型图2.5.2原型图的命名规范为原型图建立统一的命名规范是团队协作的基石，它能极大地提升文件查找、版本管理和沟通的效率。原型图的命名规范需遵循统一性、可读性、扩展性等原则，并按照功能结构拓扑或任务关系拓扑制定，使用“编号+名称”的形式，例如在新闻类App原型图中将某界面命名为“A-1-1-新闻列表”，其中，A表示界面或模块名称，1-1表示层级，各部分使用“-”连接。2.5.3原型图的设计规范原型图的设计规范是一套指导原型图设计的准则和标准，目的在于确保UI设计的一致性和可用性，增强界面的专业感和提高用户的信任度。原型图的设计规范主要包含尺寸、视觉风格、色彩和字体等内容，以便设计师和开发人员能够更好地理解并实施设计，减少设计和开发过程中的返工，提高工作效率，从而节约时间和成本。2.5.3信息架构梳理与流程图设计确定界面的整体布局和网格系统，通常基于栅格系统进行设计，并定义统一的间距，以确保布局的秩序感和响应式适配的一致性。布局与网格系统选择适合界面的字体和排版样式，确保内容的易读性和可理解性，规定标题、正文、超链接等内容的字体、样式、字号、行高和颜色等。字体与排版制定配色方案，包括主色、辅助色、中性色等，确保色彩搭配合理、与品牌形象一致，并考虑色彩的对比度和可访问性，避免随意使用颜色。色彩方案原型图的尺寸是需要明确规范的，以Phone16为例，

其尺寸应为393px×852px。尺寸规范规定产品中常用元素的使用规范，包括图片的格式、比例、质量等，图标的风格、大小、描边粗细等，以及按钮、表单、列表、文本框、通知栏、提示框、对话框、弹窗等元素的样式和尺寸。元素规范对于无法通过视觉直接传达的信息，设计师可以在原型图中进行标注。标注与说明规定原型图的交互效果，以确保用户能够识别可交互元素及其功能状态，并顺畅操作来完成流程，获得即时反馈。交互效果AIGC赋能设计

使用PixsoAI生成设计规范PixsoAI是Pixso推出的集成AI功能的在线设计工具，具备文生图、图标生成、AI生成设计稿、设计规范生成等功能。使用PixsoAI生成设计规范的操作方法为：进入Pixso官方网站并登录，单击右上角的进入工作台按钮，进入Pixso的工作区，在界面中间选择“新建设计文件”选项，进入操作页面，在界面左侧单击“AI”选项卡，然后在“更多AI工具”选项中单击设计规范按钮，在打开的对话框中输入设计规范的主题和设计规范主色，然后单击

按钮，稍等片刻即可生成设计规范。AIGC赋能设计

使用PixsoAI生成设计规范生成设计规范后，单击生成静态文档按钮，Pixso会自动在画板上新建一个页面，并将生成的设计规范以文件的形式插入画布，整齐地呈现生成的所有元素，便于设计师细化和调整生成的设计规范，如增加或删除样式等，以满足高质量设计规范的需求；单击在当前文件新建样式按钮，可将PixsoAI生成的设计规范中的颜色样式、文本样式、效果样式直接应用到当前设计文件中，并自动创建相应的样式。CONTENTS2.1UI设计中的文字2.2UI设计中的色彩2.3UI设计中的图片2.4UI设计中的界面布局2.5UI设计中的原型图2.6实践训练使用Figma制作App原型图1．任务背景某团队正在构思一款名为“灵感汇”的创意社区类App，其核心功能是帮助设计师、摄影师、插画师等创意工作者寻找灵感。在进行视觉设计和开发之前，需要确认主要页面的信息布局、功能结构和用户流程是否合理。现要求使用Figma为该App设计注册登录流程的低保真原型图，目标是清晰表示流程衔接、功能布局和交互逻辑，但要避免过早陷入视觉细节讨论，为后续的视觉设计和开发打下坚实基