美文网首页
01.Element UI初识

01.Element UI初识

作者: stillpeng | 来源:发表于2019-08-27 14:12 被阅读0次

一、什么是?

    |--Element UI:一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。

二、设计原则

    |--一致性:consistency

        |--与现实生活一致:生活中的流程、逻辑保持一致,遵循用户习惯。

        |--在界面中一致:所有的元素和结果保持一致,比如:设计样式、图标、文本、元素位置等。

    |--反馈:feedback

        |--控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作。

        |--页面反馈:操作后,通过页面元素的变化清晰的展现自己当前的状态。

    |--效率:efficiency

        |--简化流程:设计简洁直观的操作流程。

        |--清晰明确:语言表达清晰且表一明确,让用户快速理解进而做出决策。

        |--帮助用户识别:界面简洁直白,让用户快速识别而非回忆,减少用户记忆负担。

    |--可控:controllability

        |--用户决策:根据场景给予用户操作建议和安全提示,但是不能代替用户进行决策。

        |--结果可控:用户可以自由的进行操作,包括撤销、回退、终止的操作。

三、Element UI之导航

    |--导航:解决用户在访问页面时,在哪里?去哪里?怎样去?的问题。一般分为两种侧栏导航和      顶部导航。

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

        |--一级类目:适用于结构简单的网站,只有一级页面时,不需要使用面包屑。

        

        |--二级类目:侧栏最多可以显示两级导航,当使用二级导航,建议使用面包屑,方便用户定位          自己的位置和快速返回。

        

        |--三级类目:使用复杂的工具型后台,左侧为一级导航,中间栏可显示其对应的二级导航,也          可以放置其他的工具型选项。

        

    |--顶部导航:顺应了从上到下的正常浏览顺序,方便浏览信息,顶部宽度显示了导航的数量和文      本的长度。适用导航较少,页面篇幅较长的网站。

    

相关文章

  • 01.Element UI初识

    一、什么是? |--Element UI:一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。...

  • Swagger UI初识

    新项目使用Swagger UI自动生成接口文档,不需要频繁更新接口文档,保证接口文档与代码的一致,值得学习。本文记...

  • Flutter学习笔记 (一)

    (一)初识Flutter 1.Flutter是什么 Flutter is Google's UI toolkit ...

  • 初识Material-UI

    简介 Material-UI是一组实现了谷歌Material Design设计原则的React组件集合,江湖传言使...

  • swiftUI初识

    swiftUI初识 swiftUI是描述型的UI组合方式,只需要描述UI的样子,而不是自己去拼接组件 所有的Vie...

  • UI入门

    初识UI storyboard 认识 storyboard文件的作用 用于描述软件界面 认识箭头的作用 用于指定默...

  • shiny-初识

    shiny 初识 shiny是一个R包,能够以网页交互式显示图表。需要两个文件ui.R,server.R。其中ui...

  • RN的大体认识

    初识React Native 我们都知道React是一套开源JavaScript 库(也可以称为前端 UI 框架)...

  • ch01 UI初识

    了解UI&未来发展 2017UI趋势 设计师如何发展 注:有些搜索的东西可以从一些设计比赛中 多了解,学会英文搜索...

  • 二、Flutter(UI)-组件初识

    文档1[https://flutter.cn/docs/reference/widgets]文档2[https:/...

网友评论

      本文标题:01.Element UI初识

      本文链接:https://www.haomeiwen.com/subject/sqheectx.html