恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

最全 Web端 UI设计组件详解

原创文章 分类: 规范/资料 版权: 举报
1787 68 26 1
2020-03-24
16.4
作为一名UI设计师,PC端设计也是我们的主要工作职责,尤其在中后台设计、官网设计、网站设计中,我们要熟知所有的web UI组件,今天给大家总结了关于web端UI组件,希望可以帮到你。


一、什么是UI组件


UI 设计组件(UI KIT),直译过来就是用户界面成套元件,是界面设计常用控件或元件,「组」是设计元素的组合方式,「件」由不同的元件组成。


二、组件的优势


1、保证一致性 Consistency

与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

2、反馈用户 Feedback

控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。

3、提高效率,减少成本 Efficiency

简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

二、组件详解


1、布局 Layout 


A. 顶部-侧边布局-通栏布局,多用于应用型的网站


B. 侧边栏布局,采用侧边栏的页面,多用于展示类网站


2、导航菜单 NavMenu

导航可以解决用户在访问页面时:在哪里,去哪里,怎样去的问题。一般导航分为“侧边栏导航”和“顶部导航”2 种类型。

选择合适的导航可以让用户在产品的使用过程中非常流畅,相反若是不合适就会引起用户操作不适(方向不明确),以下是「侧栏导航」和 「顶部导航」的区别。

A. 侧边栏导航

可将导航栏固定在左侧,提高导航可见性,方便页面之间切换;顶部可放置常用工具,如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

B. 顶部导航

顺应了从上至下的正常浏览顺序,方便浏览信息;顶部宽度限制了导航的数量和文本长度。


3、面包屑 Breadcrumb

面包屑,显示当前页面在系统层级结构中的位置,并能向上返回,提供一个有层次的导航结构, 并标明当前位置。

用法指南:

A. 当系统拥有超过两级以上的层级结构时;
B. 当需要告知用户『你在哪里』时;
C. 当需要向上导航的功能时。



4、按钮 Button

按钮用于开始一个即时操作。
用法指南:

标记了一个操作命令,响应用户点击行为,触发相应的业务逻辑。

在设计中,基本有以下四种按钮类型:
主要按钮:用于主行动点,一个操作区域只能有一个主按钮。
默认按钮:用于没有主次之分的一组行动点。
线性按钮:常用于添加操作。
链接按钮:用于次要或外链的行动点。

以及四种状态属性与上面配合使用。

危险:删除/移动/修改权限等危险操作,一般需要二次确认。

幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。

禁用:行动点不可用的时候,一般需要文案解释。

加载中:用于异步操作等待反馈的时候,也可以避免多次提交。



5、下拉菜单 Dropdown

将动作或菜单折叠到下拉菜单中。


用法指南:

当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。



6、标签页  Tabs


选项卡切换组件,常用于平级区域大块内容的的收纳和展现。


基础样式

选项卡样式

卡片式


7、分页 Pagination


当数据量过多时,使用分页分解数据。

8、单选框  Radio


在一组备选项中进行单选

9、复选框 Checkbox


一组备选项中进行多选


10、输入框


通过鼠标或键盘输入内容,是最基础的表单域的包装。


11、计数器/数字输入框  InputNumber

通过鼠标或键盘,输入范围内的数值。


12、选择器  Select

当选项过多时,使用下拉菜单展示并选择内容。


13、级联选择器  Cascader

当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。


用法指南:

A. 需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。
B. 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。
C. 比起 Select 组件,可以在同一个浮层中完成选择,有较好的体验。

14、日期选择器  DatePicker

用于选择或输入日期

15、时间选择器  TimePicker


输入或选择日期的控件,当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。


16、日期时间选择器  DateTimePicker

在同一个选择器里选择日期和时间


17、颜色选择器  ColorPicker

用于颜色选择


18、开关 Switch


表示两种相互对立的状态间的切换,多用于触发「开/关」。


19、滑块  Slider


通过拖动滑块在一个固定区间内进行选择


20、上传  Upload


通过点击或者拖拽上传文件


用法指南:

A. 上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。

B. 当需要上传一个或一些文件时。

C. 当需要展现上传的进度时。

D. 当需要使用拖拽交互时。


21、评分 Rate


评分组件


22、穿梭框  Transfer


双栏穿梭选择框。

用法指南:

A. 需要在多个可选项中进行多选时。
B. 比起 Select 和 TreeSelect,穿梭框占据更大的空间,可以展示可选项的更多信息。

穿梭选择框用直观的方式在两栏中移动元素,完成选择行为。


23、表单 Form


由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据

用法指南:

A. 用于创建一个实体或收集信息。
B. 需要对输入的数据类型进行校验时。


24、表格 Table


用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。


25、标签 Tag

进行标记和分类


26、进度条 Progress


用于展示操作进度,告知用户当前状态和预期。

用法指南:

在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。


27、树选择 TreeSelect


树型选择控件,用清晰的层级结构展示信息,可展开或折叠。


28、页头 PageHeader


页头位于页容器中,页容器顶部,起到了内容概览和引导页级操作的作用,包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。


29、标记/徽标数  Badge

出现在按钮、图标旁的数字或状态标记


用法指南:

一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。


30、头像 Avatar


用图标、图片或者字符的形式展示用户或事物信息。


31、折叠面板  Collapse

可以折叠/展开的内容区域。


32、步骤条 Steps

引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。


33、警告提示 Alert


警告提示,展现需要关注的信息。

用法指南:

A. 当某个页面需要向用户显示警告的信息时。
B. 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。

34、加载 Loading


加载数据时显示动效

35、加载中  Spin

用于页面和区块的加载中状态。

用法指南:

页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。


36、骨架图  Spin

在需要等待加载内容的位置提供一个占位图形组合。

用法指南:

A. 网络较慢,需要长时间等待加载处理的情况下。
B. 图文信息内容较多的列表/卡片中。
C. 只在第一次加载数据的时候使用。
D. 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。


37、消息提示  Message


常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。


38、弹框  Messagebox


模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。


39、通知  Notification

悬浮出现在页面角落,显示全局的通知提醒消息。


40、对话框  Dialog


在保留当前页面状态的情况下,告知用户并承载相关操作。

41、文字提示 Tooltip

常用于展示鼠标 hover 时的提示信息。


42、气泡卡片/弹出框  Popver


点击/鼠标移入元素,弹出气泡式的卡片浮层。


43、气泡确认框 Popconfirm

点击元素,弹出气泡式的确认框。


44、卡片 Card

将信息聚合在卡片容器中展示。


45、走马灯  Carousel


在有限空间内,循环播放同一类型的图片、文字等内容


46、时间轴  Timeline

可视化地呈现时间流信息。


47、分割线 Divider


区隔内容的分割线


48、日历  Calendar


按照日历形式展示数据的容器。

49、陈述列表  Descriptions


成组展示多个只读字段。常见于详情页的信息展示。


50、回到顶部  Backtop

返回页面顶部的操作按钮


用法指南:

A. 当页面内容区域比较长时;

B. 当用户需要频繁返回顶部查看相关内容时。

51、结果  Result


用于反馈一系列操作任务的处理结果。


52、抽屉 Drawer

屏幕边缘滑出的浮层面板。


抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。


53、空状态  Empty


空状态时的展示占位图,当目前没有数据时,用于显式的用户提示。


54、列表  list


最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面


写在最后


欲善其事,必先利其器,充分了解每个组件所具备的功能和设计用法,能让你的设计效率提升,看完这篇文章,希望你可以在设计网站、中后台界面时,不会再被各种各样错综繁杂的组件弄得晕头转向,可以帮助你更好的选择所需要的组件。

Powered by Froala Editor

微信公众号:UI严选

小小方方

微信公众号:UI严选

6673粉丝/19关注

身经百战人气明星助人为乐分享帝lv.1砖家
最全面的移动端 UI组件设计详解:下篇C4D 动效设计作品01

你确定要举报最全 Web端 UI设计组件详解

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年03月24日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录
//

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN