掌握Element UI：加速你的网页设计过程！

Element UI 是一套为开发者、UI/UX设计师和产品经理准备的采用Vue 2.0作为基础框架实现的组件库，提供配套的设计资源，可以帮助设计快速成型。即时设计也内置Element UI Kit资源，但有些小伙伴还是对此不太了解，接下来本文会详细带你了解。

一、Element UI 设计原则

在使用组件库之前，按照惯例还是要先了解组件的设计原则。Element UI组件的设计原则是一致性、反馈性、效率和可控性。

• 一致性：与现实生活的过程和逻辑一致，遵循用户习惯的语言和概念；界面中的所有元素和结构应保持一致，如设计风格、图标、文本、元素位置等。
• 反馈性：通过界面样式和交互效果，用户可以清楚地感知自己的操作；操作后，通过页面元素的变化清晰地显示当前状态。
• 效率性：设计简单直观的操作流程；界面简单直观，语言表达清晰，表达清晰，使用户能够快速理解和识别，减轻用户记忆的负担。
• 可控性：根据场景给出用户操作建议或安全提示，但不能取代用户决策；用户可以自由操作，包括撤销、退货和终止当前操作。

二、Element UI 组件

Element UI的另一个重要方面是有丰富的组件类型。即时设计资源社区中的Element UI组件库分为颜色、渐变、字体、按钮、输入框、进度条等11类，共有60多个基本组件，可以很好地满足大多数设计和开发的需要。

2.1 颜色

为避免视觉传达的差异，Element UI组件使用一套特定的调色板来规定颜色，为您构建的产品提供一致的外观视觉体验。

• 主色：Element 主要品牌颜色为鲜艳友好的蓝色(色值为:#409EFF)。
• 辅助色：除主色外的场景色，需要在不同的场景中使用（如危险色#F56C6C表示危险操作）。
• 中性色：用于文本、背景和边框颜色。通过使用不同的中性色来表达层次结构。
• 边框：一级#DCDFFE6 ——二级#E4E7ED ——三级#EBEF5-四级#F2FFF6FC
• 文字：主要文字#303133-常规文字#606266-次要文字 #909399占位文字#COC4CC

2.2 布局

Element通过基础 24 分栏，可快速简单地创建布局。

• 基础布局：利用单栏创建基础格栅布局。
• 分栏间隔：分栏间隔。
• 混合布局：通过基础的1/24栏任意扩展组合，形成较为复杂的混合布局。
• 分栏偏移：支持偏移制定的栏数。
• 对齐方式：通过flex布局对栏进行灵活对齐。
• 响应式布局：参考 Bootstrap 预设五个响应尺寸的响应式设计：xs、sm、md、lg、xl。

2.3 字体

Element 在UI中，mac用户熟悉PingFang SC、Microsoft用户熟悉Microsoft YaHei和Hiragino Sans GB、San Francisco UI等字体。

• 在字号方面，Element UI定义了 6 字体的大小，其中最小的是最大的是12px 20px。
• 在行高方面，遇到多行文字时，设置不同的文字 line-height 会有不同的渲染效果，一般设置至少为 1.5。常用规则为+6，即文本12px，行间距为18px，依次类推。此外，您还可以使用文本大小乘以1.5，以获得整个旅行间距。

2.4 按钮

Element UI的按钮功能相对全面，主要区分颜色，提供简单按钮、圆角按钮、圆按钮等选择，需要注意的是，圆按钮一般只放一个图标。对于同一按钮，有正常、焦点、悬挂等状态，以确保不同的交互效果有一些反馈。

2.5 输入框

输入框用于输入用户名、密码等信息，Element提供了功能和风格丰富的输入框。Element UI输入框的交互状态包括默认、输入结果、提示错误、禁用和获取焦点。输入框的尺寸应设置为8倍，如大按钮40px、中按钮36px、小按钮32px。

2.6 下拉菜单

Element UI下拉菜单的组件有三种:默认尺寸、中等尺寸和小尺寸，可以在不同的场景中选择合适的尺寸。选择器分为常规、禁用、悬浮、点击、禁用、清空等状态。

2.7 标签

Element UI的标签组件用于标记和选择。尺寸方面，有默认标签、中等标签、小标签和超小标签，可以在不同场景下选择合适的按钮尺寸。提供dark/ligh/tplain有三个不同的主题。用法包括基本标签、可移除标签和动态编辑标签（点击标签关闭按钮后触发的事件可以实现动态编辑标签）。

2.8 分页

当数据量过多时，Element UI使用分页组件分解数据。基本用法是简单的数字显示，也可以设置最大的页码按钮数。根据场景需要，可以添加显示总数、调整每页显示条数、直接访问和完整功能等功能的分页模块。当总页数超过此值时，页码按钮的数量将被折叠（大于或等于） 5 且小于等于 21 的奇数。

2.9 通知

Element UI的通知组件悬浮在页面角落，显示全球通知提醒信息。

基本用法：适用性广的通知栏。

有倾向性：有 icon，常用来显示「成功、警告、新闻、错误」类系统新闻。

2.10 表格

Element UI的表格组件用于显示多个结构相似的数据，可以对数据进行排序、筛选、比较或其他自定义操作。有基本表格、斑马图案表格、边框表格和状态表格（表格内容可以 highlight 显示，便于区分「成功、信息、警告、危险」等内容）。

• 格式：当纵向内容过多时，可选择固定表头。当横向内容过多时，可选择固定列。
• 流体高度：当数据量动态变化时，可以是 Table 设置最大高度。
• 多级表头:当数据结构复杂时，可以使用多级表头来显示数据的层次关系。
• 单选/多选:选择单行数据时使用色块表示。选择多行数据时使用复选框。

2.11 进度条和步骤条

Element UI的进度组件用于显示操作进度，并告知用户当前的状态和预期。有线性进度条、百分比内显示进度条、环形进度条和仪表盘进度条。

Element UI步骤组件用于引导用户按流程分步完成任务，步骤可根据实际应用场景设置，步骤不少于 2 步骤。有基本步骤条、包含状态步骤条、描述步骤条、中间步骤条、图标步骤条和垂直步骤条，步骤条状态等待 / 处理 / 完成 / 错误 / 成功。

三、如何免费使用Element UI Kit

即时设计资源社区内置大量国内外大厂的设计系统和组件库，包括TDesign、Arco Design、Ant Design、Material design等优秀的设计规范，所有大厂组件库资源都可以一键调用，可以学习最新的设计规范，统一项目的视觉效果。颜色、文本样式和图层样式不仅可以一键保存为资源，还可以重复添加为组件资源，与团队共享，实现快速再利用。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/community?category=detail&type=resource&id=622ee3a3f7f4d247c1fb2311&source=csdn&plan=yb6032

在进行UI设计时，许多设计师都梦想在更短的时间内完成项目，同时又不牺牲可用性或创造力，Element UI Kit凭借高复用性和一致性，可帮助设计师实现这一目标。在即时设计使用Element UI Kit非常方便快捷，工欲善其事必先利其器，我们一定要学会利用好工具，将即时设计的组件库功能发挥到最大，赶快打开即时设计工作台来试试吧！