3.4 组件设计-网页交互组件设计特征-备课笔记

编号10-01【web产品交互设计开发制作】编号10-01学习任务四、组件设计-网页交互组件设计特征一、课程说明与要求1.课程说明UI设计组件就是用户界面成套元件，是界面设计常用控件或元件。组件是具有标准规范和可复用场景的基本模块。从字面上理解：“组”：设计元素的组合方式，“件”由不同的元件组成。本质上，组件化设计就是将UI界面合理地划分为更小的，更易于管理的单元，并予以命名。只要是几个元素的组合，都可以称之为组件。卡片，头像，导航栏都是经典的组件。但是，组件并非一定要视觉上看起来是成块的。每种组件都有其特定的用法，根据场景和信息内容优先级来判断如何使用才是正确的设计方法。下面我们可以在组件详解中去了解组件的使用场景。在交互设计实践方面，培养学生使用Ps工具绘制web产品交互设计中的一些常用组件。二、学情分析与课程导入1.学情分析本课程授课内容需要学生有一定的Ps软件使用基础，作为一门实践性较强的课程，本节课针对学生对交互设计方面的知识普遍认知不强，或者碎片化、不系统，强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，对所选择的专业感兴趣，获取知识的主动性较强。2.课程导入我们学习UI组件设计的特征，那么什么是UI组件设计，组件都有哪些分类，在日常生活中我们通常见到的网站中的搜索、导航栏、都是交互组件设计的应用。下面我们针对组件的分类对其做一个详细的讲解三、理论知识讲解（一）什么是UI设计组件UI即（UserInterface），用户界面的简称；组件可以理解为是一个组合功能的控件；UI设计组件就是用户界面成套元件。（二）组件规范的作用1.一致性与现实生活一致在界面中一致2.反馈用户控制反馈编号10-02页面反馈编号10-023.提高效率，减少成本简化流程清晰明确帮助用户识别4.组件设计的优势首先，可以统一交互设计规则，减少用户操作的迷惑感，提升产品的体验。其次，减少制作组件控件的时间，不需要对组件重新下定义，提升设计效率，可将更多时间放在流程体验和设计推动上。第三，可以有延续性，团队即使有成员离开或者加入，通过设计规范和组件库可以快速地接手和进行正常工作。【课后思考：第一，什么是UI设计组件；第二，规范组件的作用】（三）组件使用详解……………………【难点】Web端设计组件根据用途，可以分为六大类反馈feedback：各种提示、提醒框等，如;toast（吐司）提示、对话框、气泡提示等表单form：如：输入框input、级联选择器、单选框、复选框等基础basic：如：按钮button、布局layout数据：包括：徽标数、上传、进度条、加载导航：包括：导航菜单、面包屑、标签页、分页、步骤条、下拉菜单、其他：包括：表格、列表、卡片等。1.反馈类feedback反馈类feedback：反馈就是用户做了某项操作之后，系统给用户的一个响应。（1）Toast提示用户产生操作，出现toast提示；toast的消息提示分类一共有三种类型：成功、失类、常规。（2）Alert警告提示当用户进行某些操作时，网站会出现对应的警告信息提示用户。使用场景：当某个页面需要向用户显示警告的信息时。编号10-03编号10-03（3）dialog对话框用于提示用户当前操作，或是完成某个任务时需要的一些其他额外的信息。使用场景：用户在进行重要操作时，需要进行二次确认；用于重要的反馈提示，让用户知道信息提示；弹出式，减少页面的跳转。（4）Notification通知提醒框使用场景：较为复杂的通知内容；带有交互的通知，给出用户下一步的行动点；系统主动推送。（5）tooltip气泡提示使用场景：鼠标移入则立即显示提示，移出则立即消失；展示鼠标hover（悬停）时的提示信息。编号10-04编号10-042.表单form表单在网页中主要负责数据采集功能（1）input输入框用于用户文本输入使用场景：用户需要通过鼠标键盘输入内容；输入的文本通常置于输入框（2）选择器（框）Select当选项过多时，使用下拉菜单展示并选择内容。使用场景：弹出一个下拉选项给用户选择操作（3）日期选择器DatePicker使用场景：当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择编号10-05编号10-05（4）时间选择器

TimePicker使用场景：输入或选择日期的控件，当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。（5）Cascader级联选择使用场景：1、需要从一组相关联的数据集合进行选择2、从一组数据集合中进行选择时，用多级分类进行分隔，方便选择。3、比起Select组件，可以在同一个浮层中完成选择，有较好的体验。（6）计数器/数字输入框

InputNumber使用场景：当需要获取标准数值时。（7）单选框

Radio使用场景：用于在多个备选项中选中单个状态。编号10-06（8）复选框

Checkbox编号10-06使用场景：在一组可选项中进行多项选择时（9）Switch开关使用场景：表示两种相互对立的状态间的切换，通常用在触发「开/关」。树选择

TreeSelect使用场景：可选择的数据结构是一个树形结构时，可以使用TreeSelect。3.基础basic（1）Button按钮使用场景：标记了一个操作命令，响应用户点击行为，触发相应的业务逻辑。（2）布局

Layout

使用场景：顶部-侧边布局-通栏布局，多用于应用型的网站编号10-07侧边栏布局，采用侧边栏的页面，多用于展示类网站编号10-074.数据data（1）标记/徽标数

Badge使用场景：一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。（2）上传

Upload使用场景：当需要上传一个或一些文件时；当需要展现上传的进度时；当需要使用拖拽交互时；（3）进度条

Progress使用场景：在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。（4）加载

Loading使用场景：加载数据时显示动效编号10-08编号10-085.导航navigation（1）导航菜单NavMenu使用场景：一般分为顶部导航和侧边导航；顶部导航提供全局性的菜单分类和功能，方便浏览信息；顶部宽度限制了导航的数量和文本长度。侧边导航提供多级结构来收纳和排列网站架构，可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；（2）面包屑

Breadcrumb

使用场景：1、当系统拥有超过两级以上的层级结构时；2、当需要告知用户“你在哪里”时；3、当需要向上导航的功能时。（3）标签页

Tabs使用场景：卡片式的页签，提供可关闭的样式，常用于容器顶部。标准线条式页签，用于容器内部的主功能切换，这是最常用的Tabs。编号10-09（4）分页

Pagination编号10-09使用场景：当数据量过多时，使用分页分解数据。当加载/渲染所有数据将花费很多时间时；可切换页码浏览数据。（5）步骤条

Steps使用场景：当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。（6）下拉菜单

Dropdown使用场景：当页面上的操作命令过多时，点击或移入触点，会出现一个下拉菜单；可在列表中进行选择，并执行相应的命令。6.其他other（1）表格

Table使用场景：展示多条结构类似的数据；当有大量结构化的数据需要展现时；当需要对数据进行排序、搜索、分页等复杂行为时。编号10-10编号10-10（2）列表

list

使用场景：最基础的列表展示，可承载文字、列表、图片、段落；常用于后台数据展示页面

（3）卡片

Card使用场景：最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。（四）了解Photoshop文件如何存储web格式……………【重点】1.保存web所用格式web格式是专门用于网页浏览的一种图片格式，体积比普通图片要更小，为了确保图片无卡顿地清晰显现，考虑它的品质和大小是很必要的。2.如何用Photoshop保存网页格式PS拥有非常好的方法来为网页优化图片，在ps中，选择文件>存储为web格式或者使用快捷键ctrl+alt+shift+s；“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式，包括图像质量、图像分辨率、浏览器兼容性和文件大小。编号10-11而“另存为”对话框则不具有这么多优化的选择，并且往往会保存成较大的图像。编号10-11四、实践技能训练（一）布置训练任务任务1：从web产品中找出交互设计组件任务2：尝试使用PS制作交互组件（二）实战项目案例运用所学的UI交互设计组件的应用场景，尝试使用PS制作常用交互设计组件基础类中的按钮及几种常用状态（即：默认状态、鼠标悬停状态、点击状态、不可点击状态）的制作或设计。………【思政融入（感受中国风元素的魅力，弘扬文化自信）】………【难点】中国风致力于弘扬中国传统文化和国学，古风以民族风为源，我们以国风元素为主导，来制作按钮组件，中国风图片和中国风素材广泛应用于文化领地，为平面设计、网页、建筑、摄影等赋予新的灵魂，并为产品带来新的生命力。教师重点指导：软件的基本操作及按钮组件使用状态的区别。【实训指导：学生初次接触UI设计组件并进行设计制作实践，教师应多引导，帮助学生分析交互设计体验，指导学生完成组件设计的初稿绘制】五、课堂总结今天，我们主要学习了什么是UI是设计组件、组件规范的作用以及组件的分类和详解，并了解了如何存储为网页格式等相关理论，也结合交互设计案例相关理论做了一些练习，想必同学们通过练习对UI设计组件有了一定的了解和掌握。希望同学们课后继续对大家所接触到的相关作品或产品，用专业的眼光，分析UI设计组件在交互设计中的应用，这样有助于你们对知识点的更深入的理解。六、课后思考编号10-12前面我们讲到了设计组件的作用和优势，