当前位置:   article > 正文

掌握Element UI:加速你的网页设计过程!_element ui设计

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 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。icon-default.png?t=N7T8https://js.design/community?category=detail&type=resource&id=622ee3a3f7f4d247c1fb2311&source=csdn&plan=yb6032

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/823718
推荐阅读
相关标签
  

闽ICP备14008679号