精华内容
下载资源
问答
  • 值得收藏的8个Web端组件库 Ant Design 介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验。 组件库地址:...

    值得收藏的8个Web端组件库

     Ant Design

    介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验。

    组件库地址:https://ant.design/index-cn

    组件库来源:蚂蚁金服体验技术部

    值得收藏的8个Web端组件库

    Ant Design Pro

    介绍:Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

    组件库地址:https://pro.ant.design/index-cn

    组件库来源:蚂蚁金服体验技术部

    值得收藏的8个Web端组件库

    飞冰 Iceworks

    介绍:飞冰是一套基于 React 的中后台应用解决方案,在阿里巴巴内部,已经有 270 多个来自几乎所有 BU 的项目在使用。经过 2 年的发展,飞冰已经是中后台 2.0 体系,这个阶段中我们的目标是赋能企业、组织搭建自己的中后台体系。飞冰包含了一条从设计端到开发端的完整链路,帮助我们的用户快速搭建属于自己的中后台应用。

    组件库地址:https://alibaba.github.io/ice/

    组件库来源:阿里巴巴

    值得收藏的8个Web端组件库

    Element

    介绍:Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

    组件库地址:http://element-cn.eleme.io/#/zh-CN

    组件库来源:饿了么

    值得收藏的8个Web端组件库

    SUI

    介绍:SUI 是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面。

    组件库地址:http://sui.taobao.org/sui/docs/

    组件库来源:阿里巴巴共享业务事业部UED团队

    值得收藏的8个Web端组件库

    iView

    介绍:iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

    组件库地址:https://www.iviewui.com/

    组件库来源:TalkingData 成立于2011年,是国内领先的第三方数据智能服务商。

    值得收藏的8个Web端组件库

     Admui

    介绍:Admui 是一个基于最新 Web 技术的企业级通用管理系统快速开发框架,可以帮助企业极大的提高工作效率,节省开发成本,提升品牌形象。您可以 Admui 为基础,快速开发各种MIS系统,如CMS、OA、CRM、ERP、POS等。

    组件库地址:http://www.admui.com/?form=hplus

    组件库来源:上海畅控信息技术有限公司

    值得收藏的8个Web端组件库

    Zent

    介绍:Zent是有赞 PC 端 WebUI 规范的 React 实现,提供了一整套基础的 UI 组件以及一些常用的业务组件。

    组件库地址:https://www.youzanyun.com/zanui

     

    转载于:https://www.cnblogs.com/wjw1014/p/10423792.html

    展开全文
  • 内容丰富,真实有效内容丰富,
  • 原创:流粒子1、Ant Design...组件库地址:https://ant.design/index-cn组件库来源:蚂蚁金服体验技术部2、Ant Design Pro介绍:Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价...

    原创:流粒子

    设计师值得收藏的8个Web端组件库

    1、Ant Design

    介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验。

    组件库地址:https://ant.design/index-cn

    组件库来源:蚂蚁金服体验技术部

    设计师值得收藏的8个Web端组件库

    2、Ant Design Pro

    介绍:Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

    组件库地址:https://pro.ant.design/index-cn

    组件库来源:蚂蚁金服体验技术部

    设计师值得收藏的8个Web端组件库

    3、飞冰 Iceworks

    介绍:飞冰是一套基于 React 的中后台应用解决方案,在阿里巴巴内部,已经有 270 多个来自几乎所有 BU 的项目在使用。经过 2 年的发展,飞冰已经是中后台 2.0 体系,这个阶段中我们的目标是赋能企业、组织搭建自己的中后台体系。飞冰包含了一条从设计端到开发端的完整链路,帮助我们的用户快速搭建属于自己的中后台应用。

    组件库地址:https://alibaba.github.io/ice/

    组件库来源:阿里巴巴

    设计师值得收藏的8个Web端组件库

    4、Element

    介绍:Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

    组件库地址:http://element-cn.eleme.io/#/zh-CN

    组件库来源:饿了么

    设计师值得收藏的8个Web端组件库

    5、SUI

    介绍:SUI 是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面。

    组件库地址:http://sui.taobao.org/sui/docs/

    组件库来源:阿里巴巴共享业务事业部UED团队

    设计师值得收藏的8个Web端组件库

    6、 iView

    介绍:iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

    组件库地址:https://www.iviewui.com/

    组件库来源:TalkingData 成立于2011年,是国内领先的第三方数据智能服务商。

    设计师值得收藏的8个Web端组件库

    7、 Admui

    介绍:Admui 是一个基于最新 Web 技术的企业级通用管理系统快速开发框架,可以帮助企业极大的提高工作效率,节省开发成本,提升品牌形象。您可以 Admui 为基础,快速开发各种MIS系统,如CMS、OA、CRM、ERP、POS等。

    组件库地址:http://www.admui.com/?form=hplus

    组件库来源:上海畅控信息技术有限公司

    设计师值得收藏的8个Web端组件库

    8、Zent

    介绍:Zent是有赞 PC 端 WebUI 规范的 React 实现,提供了一整套基础的 UI 组件以及一些常用的业务组件。

    组件库地址:https://www.youzanyun.com/zanui

    组件库来源:有赞

    设计师值得收藏的8个Web端组件库

    以上都是自己在工作中的积累,在这里总结成文希望能够为正在做组件库工作的朋友们提供一些竞品参考,也非常欢迎各位留言补充更多更强大的组件库。

    https://www.jianshu.com/p/d34069292682
    展开全文
  • axure原型设计软件组件库,设计师必备,axure原型设计常用的组件库iPhone+iOS通用rplib库
  • AxureUX8 WEB端交互原型通用组件模板 丰富全面的Web端常用组件及界面模板:参考页面:http://demo.axureshop.com/?url=http://cloud.axureshop.com/5mor50&buyurl=https://www.axureshop.com/a/1762.html ...
  • 作为一名UI设计师,PC端设计也是我们的主要工作职责,尤其在中后台设计、官网设计、网站设计中,我们要熟知所有的web UI组件,今天给大家总结了关于web端UI组件,希望可以帮到你。一、什么是UI组件UI 设计组件(UI ...

    c0094b0fe0f215cfa6773da01952d874.png

    作为一名UI设计师,PC端设计也是我们的主要工作职责,尤其在中后台设计、官网设计、网站设计中,我们要熟知所有的web UI组件,今天给大家总结了关于web端UI组件,希望可以帮到你。一、什么是UI组件
    UI 设计组件(UI KIT),直译过来就是用户界面成套元件,是界面设计常用控件或元件,「组」是设计元素的组合方式,「件」由不同的元件组成。

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

    2、反馈用户 Feedback

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

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

    二、组件详解1、布局 Layout A. 顶部-侧边布局-通栏布局,多用于应用型的网站

    429ae85e2d7f4399facfd619356ddaca.png

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

    c5bb7a50c2bcd56cd5f9f2db002c0e1b.png

    2、导航菜单 NavMenu
    导航可以解决用户在访问页面时: 在哪里,去哪里,怎样去的问题。一般导航分为“侧边栏导航”和“顶部导航”2 种类型。
    选择合适的导航可以让用户在产品的使用过程中非常流畅,相反若是不合适就会引起用户操作不适(方向不明确),以下是「侧栏导航」和 「顶部导航」的区别。A. 侧边栏导航
    可将导航栏固定在左侧,提高导航可见性,方便页面之间切换;顶部可放置常用工具,如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

    26678a8e2561792d60f194068c441c2a.png

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

    d7e2b349eb6da091f70b1d6395d5cf68.png

    3、面包屑 Breadcrumb
    面包屑,显示当前页面在系统层级结构中的位置,并能向上返回,提供一个有层次的导航结构, 并标明当前位置。用法指南:
    A. 当系统拥有超过两级以上的层级结构时;B. 当需要告知用户『你在哪里』时;C. 当需要向上导航的功能时。

    0e8474e8d7c11150573cb6e839c72f5c.png

    0bd6fdacb68549e8540a129ee00f6337.png

    4、按钮 Button
    按钮用于开始一个即时操作。用法指南:
    标记了一个操作命令,响应用户点击行为,触发相应的业务逻辑。
    在设计中,基本有以下四种按钮类型:主要按钮:用于主行动点,一个操作区域只能有一个主按钮。默认按钮:用于没有主次之分的一组行动点。线性按钮:常用于添加操作。链接按钮:用于次要或外链的行动点。

    8a3f22c33395de087d05af71040edda9.png

    0c32ff6ff5621d19fb8831396581ef0f.png


    以及四种状态属性与上面配合使用。危险:删除/移动/修改权限等危险操作,一般需要二次确认。幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。禁用:行动点不可用的时候,一般需要文案解释。加载中:用于异步操作等待反馈的时候,也可以避免多次提交。

    5191ee3d37f652e9fc438a45a3954ead.png

    fb13987ed1794f39a10c68eaa9df81b0.png

    90f83205a07ac0a1a9e33de87e9f8582.png

    5、下拉菜单 Dropdown


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

    c11f0623af24b830bf73b405f4b495a6.png

    6、标签页 Tabs
    选项卡切换组件,常用于平级区域大块内容的的收纳和展现。基础样式

    3e3924a462d516eac48192b627f6c068.png

    选项卡样式

    1220af611e01afc8b03ea2719a2d8256.png

    卡片式

    15e8c3f9cea660b61e59666a0161eccc.png

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

    3a18a86f090f094ac80a3b15f208a7c6.png

    8、单选框 Radio
    在一组备选项中进行单选

    fffac8d4f0a774b77076e0e8bb8e3a72.png

    9、复选框 Checkbox
    一组备选项中进行多选

    f45c50b3d79e5dba089b9e32c4f87437.png

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

    014f57f3feca433b61d271fd2300011a.png

    e6213b7ee03d50210b9a5f99357827d0.png

    11、计数器/数字输入框 InputNumber
    通过鼠标或键盘,输入范围内的数值。

    94d846e7a9d646757fdeda8d84385f4d.png

    aabc620744448dd1abfbbc67155d1f18.png

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

    4d725ff78493cf1c3549767db8a5faa9.png

    13、级联选择器 Cascader


    当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。用法指南:
    A. 需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。B. 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。C. 比起 Select 组件,可以在同一个浮层中完成选择,有较好的体验。

    0d40d8df5464aecf3444062ff5f282ed.png

    14、日期选择器 DatePicker
    用于选择或输入日期

    a1a5e26a7bed0f82ea8075aeebfdbc99.png

    8f88d41f65be69b75feb6958c7ed2798.png

    15、时间选择器 TimePicker


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

    1d3ff90a5d7c4719a3835fe92f99dbc5.png

    16、日期时间选择器 DateTimePicker


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

    bc368208a68ea1713928712e31ff9208.png

    17、颜色选择器 ColorPicker


    用于颜色选择

    4086ddef29fceaf4ad794135795f13d6.png

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

    358ff6c2f65d80854e3cd8d4bea5cd60.png

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

    77b442ab7a49c026c925bcc855d052b1.png

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

    用法指南:
    A. 上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。
    B. 当需要上传一个或一些文件时。
    C. 当需要展现上传的进度时。
    D. 当需要使用拖拽交互时。

    330fb9f85e8744632fdf0fc44a96f58e.png

    21、评分 Rate
    评分组件

    42312d56f0327cfbde7e576d0a39e8f6.png

    22、穿梭框 Transfer


    双栏穿梭选择框。

    用法指南:
    A. 需要在多个可选项中进行多选时。B. 比起 Select 和 TreeSelect,穿梭框占据更大的空间,可以展示可选项的更多信息。
    穿梭选择框用直观的方式在两栏中移动元素,完成选择行为。

    a754fcf98ca1ce093cebbe192cd20ea6.png

    23、表单 Form
    由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据用法指南:
    A. 用于创建一个实体或收集信息。B. 需要对输入的数据类型进行校验时。

    bdb1bc6019559e3723aa0c14a4b631b5.png

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

    2f6be7ad483baf48c7deae1a26ab6305.png

    25、标签 Tag
    进行标记和分类

    126db0897ab3a58a1e6fc4bcaeec94dc.png

    26、进度条 Progress
    用于展示操作进度,告知用户当前状态和预期。用法指南:
    在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。

    55812a5133c02914bec823a99c7db8d1.png

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

    caa956f2ef245097c0ef5e15e6e9c85d.png

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

    599be54bd7118992c13058526944b379.png

    29、标记/徽标数 Badge
    出现在按钮、图标旁的数字或状态标记用法指南:
    一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。

    a898eb7f1442b5461e04b39e437f54d9.png

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

    b0c219231ef8efe4513f97b5e553aafb.png

    31、折叠面板 Collapse
    可以折叠/展开的内容区域。

    e48ae79b560e6e7f4dc31666bb9219b4.png

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

    69287815b9cbbd3669d835d39f29a4b5.png

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

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

    758ea70473b8650d32212b71fe29ff86.png

    34、加载 Loading
    加载数据时显示动效

    3f247e4c7d2b3aeb82fcef46f013d5d8.png

    35、加载中 Spin


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

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

    40d894cfc9c71c601d2c1f278bf48c0f.gif

    36、骨架图 Spin


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

    用法指南:
    A. 网络较慢,需要长时间等待加载处理的情况下。

    B. 图文信息内容较多的列表/卡片中。

    C. 只在第一次加载数据的时候使用。

    D. 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

    9067d71407635faf8fc8e3a016cc2ff2.png

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

    a3962d0a1e0fda85fb3de9608ca481d4.png

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

    204be04a78e5f5be0d5feb45ba8b1b0d.png

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

    c44601d1fbe33ee8f751b1c62c76898c.png

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

    fb30ee497593b8a41622b705797c5b5e.png

    41、文字提示 Tooltip
    常用于展示鼠标 hover 时的提示信息。

    a0e37dddfd68b5dadc9e72e35f62f6fb.png

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

    0aade70b57911a0a85e9c4eb539c84d6.gif

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

    f5011b3d2e7882d561d3236bd219b8ec.png

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

    624e4da9db802164c80af092eddd8fcc.png

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

    98daf4538f3f131aae8e26d36eb9bac2.gif

    c76c727a398a6b5483f72d2f4e266886.png

    46、时间轴 Timeline
    可视化地呈现时间流信息。

    10800a6090d61cd4fbb061a8f31a9b84.png

    47、分割线 Divider
    区隔内容的分割线

    975b42128549965b30b1f5b31cc1a577.png

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

    e6f91de1cc6a8446ac3910ae55acdbd2.png

    49、陈述列表 Descriptions
    成组展示多个只读字段。常见于详情页的信息展示。

    65a4697cea01ab56e8b0a9d5a99db160.png

    50、回到顶部 Backtop
    返回页面顶部的操作按钮用法指南:
    A. 当页面内容区域比较长时;
    B. 当用户需要频繁返回顶部查看相关内容时。

    27b242c7e4ec17955b6e26855ed05b27.png

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

    25d3969f37ea301dd02c9fbb1c799f75.png

    52、抽屉 Drawer
    屏幕边缘滑出的浮层面板。
    抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。

    a85c04fce32401b51356ce6210748f0f.png

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

    f400668658eff6b9e7a78606b3480fcf.png

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

    a7db84ac827fa4977906fc06e28a4fcf.png

    66844a7990e06302bbb637c5ae0a7f02.png

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

    UI严选——#越努力,越幸运#

    展开全文
  • 作为一名UI设计师,PC端设计也是我们的主要工作职责,尤其在中后台设计、官网设计、网站设计中,我们要熟知所有的web UI组件,今天给大家总结了关于web端UI组件,希望可以帮到你。一、什么是UI组件UI 设计组件(UI ...

    fc4e8b2068a4c4d83d5623d0b28b71e7.png

    作为一名UI设计师,PC端设计也是我们的主要工作职责,尤其在中后台设计、官网设计、网站设计中,我们要熟知所有的web UI组件,今天给大家总结了关于web端UI组件,希望可以帮到你。一、什么是UI组件
    UI 设计组件(UI KIT),直译过来就是用户界面成套元件,是界面设计常用控件或元件,「组」是设计元素的组合方式,「件」由不同的元件组成。

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

    2、反馈用户 Feedback

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

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

    二、组件详解1、布局 Layout A. 顶部-侧边布局-通栏布局,多用于应用型的网站

    40ddcf46d70afe2b5d2efcce7faf0d70.png

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

    6c72e21ed59b49e211929e6f267d9403.png

    2、导航菜单 NavMenu
    导航可以解决用户在访问页面时: 在哪里,去哪里,怎样去的问题。一般导航分为“侧边栏导航”和“顶部导航”2 种类型。
    选择合适的导航可以让用户在产品的使用过程中非常流畅,相反若是不合适就会引起用户操作不适(方向不明确),以下是「侧栏导航」和 「顶部导航」的区别。A. 侧边栏导航
    可将导航栏固定在左侧,提高导航可见性,方便页面之间切换;顶部可放置常用工具,如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

    392fdc1e38d45bc52350ad57bf7d5e7e.png

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

    b255b9e833a8c96c7b12ca5840ff9793.png

    3、面包屑 Breadcrumb
    面包屑,显示当前页面在系统层级结构中的位置,并能向上返回,提供一个有层次的导航结构, 并标明当前位置。用法指南:
    A. 当系统拥有超过两级以上的层级结构时;B. 当需要告知用户『你在哪里』时;C. 当需要向上导航的功能时。

    1cfe3f2ad60e2810233f0edb4520c68b.png

    5dac8551bb5e5d9a95f8ca7edb29807f.png

    4、按钮 Button
    按钮用于开始一个即时操作。用法指南:
    标记了一个操作命令,响应用户点击行为,触发相应的业务逻辑。
    在设计中,基本有以下四种按钮类型:主要按钮:用于主行动点,一个操作区域只能有一个主按钮。默认按钮:用于没有主次之分的一组行动点。线性按钮:常用于添加操作。链接按钮:用于次要或外链的行动点。

    5a1e6a714d4a7da667234401caee43cf.png

    4548bdac93466caf128147351989fd85.png


    以及四种状态属性与上面配合使用。危险:删除/移动/修改权限等危险操作,一般需要二次确认。幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。禁用:行动点不可用的时候,一般需要文案解释。加载中:用于异步操作等待反馈的时候,也可以避免多次提交。

    7eb894237c42df70e29a385fbdcf4163.png

    2e8c1211fff3fbb3b6e834dc52eba375.png

    a7a7efb593fb1147596866d85853c00a.png

    5、下拉菜单 Dropdown


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

    029213e5e8f0dc5bfec3bf1392c95fb8.png

    6、标签页 Tabs
    选项卡切换组件,常用于平级区域大块内容的的收纳和展现。基础样式

    030ec8a74acdde72e44846f15b1a414c.png

    选项卡样式

    2b1d3bd7410163018c0f994053ae94a3.png

    卡片式

    199ecec0236945fa0aecdbfb86fbe743.png

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

    70abbd023a4e5185bf09ec0b56605382.png

    8、单选框 Radio
    在一组备选项中进行单选

    93db98db92c78e00c1e68a02c1c4a09f.png

    9、复选框 Checkbox
    一组备选项中进行多选

    2c64dc861aca7147a02867ad0dfa017b.png

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

    0d4e0202927a3e8969d8db808876f338.png

    7c6fd71a4a2e89a96ee5c71f5f7d978d.png

    11、计数器/数字输入框 InputNumber
    通过鼠标或键盘,输入范围内的数值。

    d2ea98e90a01020afa7575b4eee77d60.png

    14c96835a1a252dd36b4e1c2369b2a9e.png

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

    1a38cac1336d4c900dfaa45153b013de.png

    13、级联选择器 Cascader


    当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。用法指南:
    A. 需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。B. 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。C. 比起 Select 组件,可以在同一个浮层中完成选择,有较好的体验。

    a13f75947bf1b9871c6bf07fefb8b9db.png

    14、日期选择器 DatePicker
    用于选择或输入日期

    088b69d20ca38093c5e0fc58a635c1e1.png

    4fadc551ef7f97b04b5ea15d5b41cafa.png

    15、时间选择器 TimePicker


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

    591a56784960ecd9915df1a5552c1c20.png

    16、日期时间选择器 DateTimePicker


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

    9513bc43a541bf6567126a031248ddfe.png

    17、颜色选择器 ColorPicker


    用于颜色选择

    b3d81cc89ff43a9afe833dfb5f40c204.png

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

    034fbe73330ded650fc4e3775e8e3913.png

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

    3f09ea5c709fca4314b57f8dd723547d.png

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

    用法指南:
    A. 上传是将信息(网页、文字、图片、视频等)通过网页或者上传工具发布到远程服务器上的过程。
    B. 当需要上传一个或一些文件时。
    C. 当需要展现上传的进度时。
    D. 当需要使用拖拽交互时。

    8c4ee6202e5b0a377e91598dbf3734ae.png

    21、评分 Rate
    评分组件

    d344aa37c07177a0f70d515ba56e5451.png

    22、穿梭框 Transfer


    双栏穿梭选择框。

    用法指南:
    A. 需要在多个可选项中进行多选时。B. 比起 Select 和 TreeSelect,穿梭框占据更大的空间,可以展示可选项的更多信息。
    穿梭选择框用直观的方式在两栏中移动元素,完成选择行为。

    c7653053506c526426beafae3a6d535b.png

    23、表单 Form
    由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据用法指南:
    A. 用于创建一个实体或收集信息。B. 需要对输入的数据类型进行校验时。

    d9c4b457d441a2899c79015c9afbba8b.png

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

    b0fb04a8a7439060994f10297d11f241.png

    25、标签 Tag
    进行标记和分类

    8e9931ea87da562f539d31eea1a59702.png

    26、进度条 Progress
    用于展示操作进度,告知用户当前状态和预期。用法指南:
    在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。

    1196fdede84ceb1302372a7a8b834f2f.png

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

    9a44dbc6a6bd40052a0e0e013d4552bc.png

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

    9279232abc12f4d293dd1eb1fe47b2ad.png

    29、标记/徽标数 Badge
    出现在按钮、图标旁的数字或状态标记用法指南:
    一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。

    b8706454a03dc14da67dbe46bd771ec0.png

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

    97bb4d5c7498a93e2666400448c3d9ca.png

    31、折叠面板 Collapse
    可以折叠/展开的内容区域。

    b3b35e5b5842559c851b27b99e38be36.png

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

    e0ff87fd5d8120e3143d996fdc177907.png

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

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

    77df6c4e5f9d0d2e1676c8718445b7ce.png

    34、加载 Loading
    加载数据时显示动效

    ad010ae61f2ed8d248451ef057515550.png

    35、加载中 Spin


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

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

    6341231ab15d6b19601f6a3ed1bf8866.png

    36、骨架图 Spin


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

    用法指南:
    A. 网络较慢,需要长时间等待加载处理的情况下。

    B. 图文信息内容较多的列表/卡片中。

    C. 只在第一次加载数据的时候使用。

    D. 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

    0468dac652e063e31d96a8b4f4c78998.png

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

    6349ac4b09f701373ef565a9829e583e.png

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

    e71dc704b6489bcade9e724db34d2452.png

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

    eb69e2040761c83f32f4f54f90980a90.png

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

    1c21ac394e5b66131a2a09afcae1abfe.png

    41、文字提示 Tooltip
    常用于展示鼠标 hover 时的提示信息。

    7733d876d1cef664dec717ae1a408ccf.png

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

    f184d1de3fb80a2c89cbf597e63cf627.gif

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

    4c140083e6fa2bc1679a99382a4e7d59.png

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

    c963f65f57faed10277560d09b90f170.png

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

    f709ebef15d6187f6449ed427f1b0515.png

    6c7a8ae323ae242af0311cb2d2600114.png

    46、时间轴 Timeline
    可视化地呈现时间流信息。

    e1e22fa6b25365abd89dbb194c6e993f.png

    47、分割线 Divider
    区隔内容的分割线

    4bec85beb648994430e5c78a892fa3fd.png

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

    a15cd843561cf0d0757b7aa198adbd0c.png

    49、陈述列表 Descriptions
    成组展示多个只读字段。常见于详情页的信息展示。

    0c3d674a6edbc7793c54afb98ceac4bd.png

    50、回到顶部 Backtop
    返回页面顶部的操作按钮用法指南:
    A. 当页面内容区域比较长时;
    B. 当用户需要频繁返回顶部查看相关内容时。

    393a27bde022ef60165607a4c2167af2.png

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

    a6deb75ba006dff53b25fa56e9b93bf1.png

    52、抽屉 Drawer
    屏幕边缘滑出的浮层面板。
    抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。

    3a929dc5a344c160485060467cf462d6.png

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

    2055ce6b4fdc921bb057b56fd1e18639.png

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

    974d1b021fbcc9beb399e94804a06d34.png

    8f043faba7ef2120bc2fd9ddac1cdaf6.png

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

    UI严选——#越努力,越幸运#

    展开全文
  • axure通用元件库 Web端原型图组件库高保真UI以及源文件,学习借鉴,提供了很多的基础元件库,再也不用为了基础元件而烦恼了,大家一起努力,改变未来中国产品经理的设计环节。
  • MobileUI组件库1、Ant Design Mobile组件介绍:一个基于 Preact / React / React Native 的 UI 组件库组件库地址:https://mobile.ant.design/index-cnAnt Design2、Frozen UI组件介绍:是一套基于移动端的UI库,...
  • 对学习和设计产品,绘制原型系统,产品经理设计产品原型,提供了很多的基础元件,再也不用为了基础元件而烦恼了,大家一起努力,改变未来中国产品经理的设计环节。
  • 【淘宝20元买的,免费分享】axure通用元件库 Pc、Web端原型图组件库高保真UI rp源文件,包含前端,后端,WEB,移动端,共59M。
  • MobileUI组件库1、Ant Design Mobile组件介绍:一个基于 Preact / React / React Native 的 UI 组件库组件库地址:https://mobile.ant.design/index-cnAnt Design2、Frozen UI组件介绍:是一套基于移动端的UI库,...
  • 1.web端Axure组件.rplib

    2020-04-26 16:20:27
    web端元件,包含颜色、字体、边框、图标、按钮、文字链接、单选框、多选框、输入框、计数器、选择器、级联选择器、开关、滑块、时间选择器、日期选择器、日期时间选择器、上传、评分、颜色选择器、穿梭框、表单、...
  • WEB端原型通用元件

    2020-05-27 09:42:59
    WEB前后交互原型通用元件,涵盖常用组件 Basic ,信息输出,输入,反馈,交互、动画效果等多种资源。
  • 作品介绍:web常用通用组件+Axure后台管理系统框架模板+大屏数据可视化元件+智慧社区管理系统大屏+图表组件+表单组合+智慧数据看板+通用大屏图表原件+电脑常用组件 原型演示及下载地址:...
  • Vue组件库实现按需加载功能

    千次阅读 2019-08-26 14:24:48
    文章目录简述示例原理babel-plugin-componentelement-ui按需引入babel-plugin-import组件分开打包以及全部...比如当前流行的web端组件库ElementUI,就有这个按需加载功能;一个系统的登录页,需要的组件是非常少的...
  • 一款基于Taro框架开发的多UI组件库 Taro UI 3目前仍在开发中, alpha版本可能会出现扩展和不保证功能完整可用,请谨慎使用。 特性 基于Taro开发UI组件 一套组件可以在微信小程序,支付宝小程序,百度小程序, H5多...
  • Auxre 组件库,精美、大气、简洁、实用。包含组件: 自用PC基础组件库 WEB设计组件库 WEB后台组件库 通用web组件库
  • 给大家推荐几款热门而又实用的开源组件库,供大家参考 Web端 AdminLTE AdminLTE 是一个开源的后台控制面板和仪表盘 ,它是基于bootstrap 的轻量级后台模板,它提供了一系列响应迅速、可重用和常用的组件 技术要求:...
  • 作品介绍:web常用通用组件+Axure后台管理系统框架模板+大屏数据可视化元件+智慧社区管理系统大屏+图表组件+表单组合+智慧数据看板+通用大屏图表原件+电脑常用组件 原型演示及下载地址:...
  • element+是开源的前端组件库,有众多开发者在应用,是业界主流的Web端组件库之一。它有多个高质量组件,覆盖前端各类场景。性能极佳。组件体积小,支持主题定制和国际化等常用功能。element+可以友好的支持Vue3.0。...
  • Web结构组件

    2014-06-25 00:31:00
    一、Web结构组件 1、代理  位于客户端和服务器之间的HTTP实体,接收客户端的所有HTTP请求,并将这些请求转发给HTTP服务器。 2、缓存  HTTP的仓库,使常用的页面的副本可以保存在离客户端更近地方 3、网关 ...
  • web端公司商城后台管理原型&连锁门店管理系统交互组件&点餐平台商家管理端后台&库存管理&财务管理&系统管理&接单管理 Axure版本:8.0制作(兼容9.0) Axure交互原型演示及下载地址请点击...
  • WEB前后交互原型通用元件,涵盖常用组件 Basic ,信息输出,输入,反馈,交互、动画效果等多种资源。
  • Axure Library组件库

    2020-07-17 18:22:03
    一个好用的Axure资源,集成了电子商务web端的很多原型效果,是产品经理必备哦!
  • AxureUX WEB前后交互原型通用元件 v2.0 可以完整运行 包含大量常用组件
  • 介绍NutUI是一套京东风格的移动端Vue组件库,开发和服务于移动Web界面的企业级前中后台产品。支持服务器渲染(SSR)。相关地址github:https://github.com/jdf2e/nutui官网: https://nutui.jd.com/#/index具备特性...
  • 软件介绍: axure通用元件库Pc、Web端原型图组件库高保真UI rp源文件,包含前端,后端,WEB,移动端,共38M。内附:Axure标准化组件库.rplibWEB端组件3.0.rplib移动端组件3.0.rplib
  • vue相关UI组件库及实用案例

    万次阅读 2019-10-18 09:28:05
    UI组件 element - 饿了么出品的Vue2的web UI工具套件 vant - vue的移动ui组件 vant-weapp - vue的微信小程序组件 ...iview - vue webUI组件(适用pc...Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 670
精华内容 268
热门标签
关键字:

web端组件库