《UI设计项目教程（AI助创 微课版）》课件 项目三 UI控件与组件设计

项目3UI控件与组件设计UI设计项目教程（AI助创微课版）高等院校艺术设计精品系列教材CONTENTS3.1UI控件设计3.2UI组件设计3.3实践训练3.1.1

UI控件的概念在UI设计中，控件是指可与用户交互的基本界面元素，如按钮、文本框、列表框、复选框、单选按钮等，其核心是“控制”，即用户可以通过控件向程序发出指令或输入信息，与界面交互。控件是构建组件和界面的基本单位，具有可操作、可控制的特性。3.1.2按钮设计在UI设计中，按钮一般用于触发某种交互行为，如提交、注册、确定等。按钮的类型多样，设计时应根据具体需求选择，并遵循一定的设计要点和设计规范。1．按钮的类型按照形状可以将按钮分为直角按钮、圆角按钮两类。按照样式可以将按钮分为填充按钮、边框按钮、文字按钮3类。按照功能可以将按钮分为主要操作按钮和次要操作按钮两类。3.1.2按钮设计2．按钮的设计要点按钮文案准确、简洁。视觉层次清晰。图标和动画辅助。统一设计规范3.1.2按钮设计3．按钮的尺寸规范在设计按钮时，应考虑用户单击或点击时的灵敏性和误触等问题，确保最小可点击区域的尺寸足够大，按钮的大小则根据实际情况而定，需要适应不同尺寸的屏幕。需要注意的是，按钮的大小可以小于最小可点击区域，但其可点击热区必须大于或等于最小可点击区域。3.1.3滑块设计2．滑块设计要点1．滑块构成滑动轨迹是指滑块移动的路径，定义了滑块可以移动的范围和方向。滑动轨迹滑动条通常与滑动轨迹结合使用，用于显示滑动块当前的位置和状态。滑滑动条滑动块是用户可以直接操作的部分，通常是一个可移动的图形元素，如圆、矩形或条形，且采用高辨识度的颜色，以便用户清晰识别。滑动块适应性滑块应考虑对不同设备屏幕尺寸的适应性，确保在各种情况下都能提供良好的用户体验。05直观性滑动条的方向应与调整的属性、用户习惯相符合，如从左到右调整音量滑块应表示音量的增加。美观性滑动块和滑动条的设计应与整体的UI风格协调，且视觉效果美观。0304易用性确保滑动块的大小适中，以便用户能够轻松地选中和移动滑动块。可视性使用高对比度的颜色来区分滑动条和滑动轨迹，以提高可视性。01023.1.4开关设计开关是UI设计中用于控制二元状态的常用控件，用于启动或关闭某项功能或服务。常见的开关形式是水平拨动开关，其由手柄和轨道组成，手柄在轨道上水平滑动，通过手柄位置和轨道颜色变化表示状态，效果非常直观。0201开关操作之“关”手柄滑向另一侧，轨道以灰色填充或未填充。开关操作之“开”手柄滑向一侧，轨道常以强调色填充。3.1.4开关设计设计开关时，需要抓住以下设计要点。这是开关设计的首要原则，用户必须能一眼看清当前状态是开还是关。设计开关时可以通过颜色对比、手柄位置和轨道填充的组合来强化状态区别。状态明确开关只表示状态，设计时需要使用标签来告知用户开关控制的对象。标签通常位于开关的左侧或上方，其文案可使用简短、描述性的名词或名词短语，用于说明开关控制的对象。标签清晰开关的控制必须提供即时、可见的反馈。在设计开关动效时，应有一个流畅、快速的过渡动画，如手柄滑动、颜色填充等，但要避免时间过长或花哨的动画，这会降低操作效率。反馈即时【案例】设计活动弹窗按钮1．案例背景“优选购物”App为提升用户每日活跃度和黏性，计划上线一个“每日签到赢现金”的营销活动。用户打开App后，会弹出一个活动弹窗，提醒用户进行签到。现需要在该活动弹窗中设计一个主要操作按钮，引导用户完成签到操作。2．设计思路设计按钮时首先需要明确按钮的视觉层次，本案例需要设计的按钮为主要操作按钮，可使用填充按钮的样式，视觉感更强，形状上可采用大圆角，呈现友好的“胶囊”形状，更具亲和力和趣味性，按钮颜色采用红色渐变色，与“现金”“奖励”建立视觉关联，华丽且吸引注意力。按钮文案为“立即签到”，直接表明功能，并采用白色、加粗的字体，确保与背景的高对比度，清晰易读。【案例】设计活动弹窗按钮3．操作提示（1）新建文件。（2）绘制基本形状。（3）塑造内部结构。（4）添加内阴影。（5）添加内发光和投影。（6）添加高光。（7）添加反光。（8）添加边缘高光。（9）添加文字并查看最终效果。CONTENTS3.1UI控件设计3.2UI组件设计3.3实践训练3.2.1

UI组件的概念UI组件是UI中可复用的设计元素，由图片、图形、图标、文字、控件等多种元素组成，具有灵活使用、便于复用的特点，导航栏、表单、标签栏、弹窗、提示框等都是常见的组件。在进行UI设计时，设计师通常会预先设计好一套组件模板，方便快速搭建界面，提高设计效率，并保持设计的一致性。与控件不同的是，组件不仅仅包含交互元素，还包含用于布局、展示和反馈的元素。简单来说，控件是具有UI功能的组件，组件是成组的控件。3.2.2状态栏设计状态栏是位于移动端App界面顶部的系统组件，用于显示设备的当前状态信息，如时间、网络信号、Wi-Fi状态、电池电量等。在设计状态栏时需要注意以下要点。●

内容可见性在亮色模式下，状态栏中的文字和图标应设置为深色；在深色模式下，状态栏中的文字和图标应设置为浅色。●

风格统一状态栏的背景色与相邻的导航栏尽量保持一致，使移动端的小屏空间实现视觉上的最大化，增强沉浸感。3.2.3导航栏设计App界面中的导航栏通常位于界面顶部，常见于二级界面或简单的一级界面中，主要由操作图标与标题组成。二级界面中的导航栏左侧主要提供返回上一级界面的操作图标；中间通常展示当前界面的导航标题；右侧放置1～2个重要的操作图标，操作图标的数量不宜过多，避免拥挤和误操作。1．App界面导航栏设计3.2.3导航栏设计网页和软件界面中的导航栏用于放置软件图标或Logo，以及导航类别。常见的导航栏样式有顶部导航栏和左侧导航栏两种，顶部导航栏用于显示同一级别的页面，一般用于有5个或更少同样重要的导航类别的情况；若有5~10个同样重要的导航类别，可以使用左侧导航栏，即导航类别位于界面的左侧。2．网页和软件界面导航栏设计导航栏的核心目标是引导用户，因此设计时应使其清晰易读、易于点击，避免使用过小的字号或过于密集的排列。3.2.3导航栏设计网页界面中的导航栏是网站的“大门”，通常其左侧或中间为

Logo和主导航菜单，右侧为次要操作按钮，如“登录/注册”“搜索框”“语言切换”等。设计网页界面的顶部导航栏时，通常设置为满屏宽度，但其核心内容通常会被约束在一个固定的宽度内，高度通常为56px~80px。软件界面中的导航栏与操作系统深度整合，提供全面、层级化的功能入口，其通常位于软件界面的顶部。功能繁多且复杂的专业软件的导航栏通常由一系列菜单组成，每个菜单包含大量的功能选项，导航栏右侧通常包含窗口控制按钮，如最小化、最大化、关闭。3.2.4标签栏设计标签栏通常位于App界面底部，用于快速切换App的主要功能模块，它提供了一种平级的导航方式，让用户能够轻松使用应用的核心功能。Android中的标签栏没有统一的标准高度，但是系统默认的标签栏的高度为56dp；iOS中标签栏高度通常为49pt。在设计标签栏时需注意以下要点。数量控制表意准确选中状态强调重点标签项的数量通常为3～5个，过多会导致每个标签项的可点击区域变小，容易误操作，视觉上也会显得拥挤。每个标签项应由一个表意明确的图标和一段简短的文字组成，字数控制在2～4字。必须为标签项设计“选中”“未选中”2个状态，且需为当前选中的标签项提供清晰、醒目的视觉差异，如改变图标颜色、填充图标、加粗文字或使用底部小横条指示。为了突出某一核心功能，可以对该功能对应的标签项进行视觉上的强调，提升用户操作优先级，但需要将突出显示的标签项放在居中的位置，因此该类标签项的数量必须是奇数。3.2.5搜索栏设计搜索栏是用户主动查找内容的关键入口，它允许用户通过输入关键词来快速筛选和定位大量信息，是UI设计中必不可少的组件之一。在内容丰富的界面中，搜索栏应放置在界面顶部的醒目位置，有时为了节省空间，也可以用一个搜索图标代替，点击该图标后可以展开完整的搜索框。搜索框内部为占位符文本，以提示用户。搜索框外部通常设计为圆角矩形，模拟输入框的形态，暗示可输入文本，搜索框内部右侧通常有一个搜索按钮或图标。【案例】设计品牌官网中的导航栏1．案例背景“芮禾映社”是一个专注于影视制作的品牌，近期正准备升级品牌官网，需要设计一个兼具品牌辨识度、视觉吸引力的导航栏，要求使用已有的品牌Logo进行设计，包含首页、产品服务、品牌介绍、团队介绍、新闻动态、联系我们6个主要板块，清晰呈现网站结构，并强化“芮禾映社”的品牌形象。2．设计思路根据“芮禾映社”提供的品牌Logo可知品牌色为红色和紫色，可考虑将导航栏背景设计为红紫渐变，传递时尚、创意、数字化的联想。采用经典的水平导航栏布局，其符合大多数用户的使用习惯，且结构清晰。在导航栏左侧可以放置品牌Logo，中部集中展示6个主要菜单，确保用户能快速定位和切换板块，右侧可以作为功能入口区。为确保在红紫渐变背景中的高可读性，导航文字可以使用纯白色。另外，用户所在页面对应的导航项可以使用白色遮罩和红色文字标识。【案例】设计品牌官网中的导航栏3．操作提示（1）规划版面。（2）绘制图形。（3）添加Logo。（4）添加图标。（5）添加导航文字并完成制作。【案例】设计鲜花配送App中的标签栏1．案例背景为一款专注于提供便捷、优质鲜花订购与配送服务的鲜花配送App设计标签栏，引导用户在不同核心模块间无缝切换，提升整体用户体验和操作效率。要求标签栏必须包含4个核心功能入口：首页、发现、购物车、我的。品牌主色为粉色，设计风格需与温馨、浪漫、愉悦的品牌调性保持高度一致。2．设计思路设计时，可以将“花”作为基本设计元素，根据每个标签项的功能，进行定制化的融合设计，从而在统一中寻求变化。设计可从以下方面进行构思。图标主体是一个小房子，花被设计为房子的中心，寓意“花之家”。首页图标主体为3个花瓣，其中插入一朵花，仿佛被聚焦发现，传递“探索美好花艺”的思想。发现图标主体是一个购物车，而花被巧妙地放置在车内，作为车中的商品，直观表明购物的内容就是鲜花。购物车图标主体是一个用户上半身轮廓，而花则放置在胸口位置，体现个性化与归属感。我的【案例】设计鲜花配送App中的标签栏3．操作提示（1）规划版面。（2）下载主页图标。（3）下载其他图标。（4）修改主页图标。（5）修改其他图标并添加图标文字。（6）制作未选中状态标签栏AIGC赋能设计使用墨刀AI生成组件墨刀AI是墨刀推出的AI产品原型设计助手，提供原型基础组件设计、方案优化、页面布局建议及原型页面设计等功能。在UI设计中，保持组件的一致性至关重要。墨刀AI的“生成组件”功能能够智能生成导航栏等常用UI组件，帮助设计师快速统一设计风格，提升原型搭建效率，并更好地维护设计系统。使用墨刀AI生成组件的操作方法为：CONTENTS3.1UI控件设计3.2UI组件设计3.3实践训练设计旅游记录App中的控件和组件1．任务背景“旅途笔记”是一款专注于帮助用户轻松记录旅游经历的App，其核心功能包括：创建图文并茂的旅游笔记、在地图上标记足迹、管理旅游账单以及收藏地点。近期，该App的核心交互界面要进行升级，现需要重点设计规范的UI控件与组件。该App品牌色为珊瑚橙。2．设计思路●控件。控件包括按钮和开