与 Element UI 一见如故

初见

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型。

设计原则

• 一致性
  与现实生活一致：与现实生活的流程，逻辑保持一致，并遵循用户习惯的语言和概念；
  在界面中一致：所有的元素和结构需保持一致，例如：设计样式，图标和文本，元素的位置等。
• 反馈
  控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
  页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
• 效率
  简化流程：设计简洁直观的操作流程；
  清晰明确：语言表达清晰且表意明确，让用户快速理解细长做出决定；
  帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
• 可控
  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
  结果可控：用户可以自由的进行操作，包括取消，回退和终止当前操作等。

导航

导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有“侧栏导航”和“顶部导航” 2种类型。选择合适的导航可以让用户在产品的使用过程中非常流畅，相反如果是恰当就会引起用户操作不适（方向不明确），以下是“侧栏导航”和“顶部导航”的区别。

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

• 一级类目：适用于结构简单的网站：只有一级页面时，不需要使用面包屑。

  
  

• 二级类目：侧面最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。

  
  

• 三级类目：适用于较复杂的工具类型后台，垂直栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具类型选项。

  
  

2. 顶部导航
   顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。适用于导航适当，页面篇幅预期的网站。