element-plus/assets/en-US_guide_design.md.f3275a5a.js
2022-03-29 14:52:56 +00:00

2 lines
2.6 KiB
JavaScript

import{_ as t,c as n,a as s,b as e,d as a,e as r,r as o,o as l}from"./app.e5926f2b.js";const k='{"title":"Design","description":"","frontmatter":{"title":"Design","lang":"en-US"},"headers":[{"level":2,"title":"Consistency","slug":"consistency"},{"level":2,"title":"Feedback","slug":"feedback"},{"level":2,"title":"Efficiency","slug":"efficiency"},{"level":2,"title":"Controllability","slug":"controllability"}],"relativePath":"en-US/guide/design.md","lastUpdated":1648565394000}',c={},d=e("h1",{id:"design-disciplines",tabindex:"-1"},[a("Design Disciplines "),e("a",{class:"header-anchor",href:"#design-disciplines","aria-hidden":"true"},"#")],-1),h=r('<h2 id="consistency" tabindex="-1">Consistency <a class="header-anchor" href="#consistency" aria-hidden="true">#</a></h2><ul><li><p><strong>Consistent with real life:</strong> in line with the process and logic of real life, and comply with languages and habits that the users are used to.</p></li><li><p><strong>Consistent within interface:</strong> all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</p></li></ul><h2 id="feedback" tabindex="-1">Feedback <a class="header-anchor" href="#feedback" aria-hidden="true">#</a></h2><ul><li><p><strong>Operation feedback:</strong> enable the users to clearly perceive their operations by style updates and interactive effects.</p></li><li><p><strong>Visual feedback:</strong> reflect current state by updating or rearranging elements of the page.</p></li></ul><h2 id="efficiency" tabindex="-1">Efficiency <a class="header-anchor" href="#efficiency" aria-hidden="true">#</a></h2><ul><li><p><strong>Simplify the process:</strong> keep operating process simple and intuitive.</p></li><li><p><strong>Definite and clear:</strong> enunciate your intentions clearly so that the users can quickly understand and make decisions.</p></li><li><p><strong>Easy to identify:</strong> the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</p></li></ul><h2 id="controllability" tabindex="-1">Controllability <a class="header-anchor" href="#controllability" aria-hidden="true">#</a></h2><ul><li><p><strong>Decision making:</strong> giving advice about operations is acceptable, but do not make decisions for the users.</p></li><li><p><strong>Controlled consequences:</strong> users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</p></li></ul>',8);function g(p,u,f,_,b,y){const i=o("design-guide");return l(),n("div",null,[d,s(i),h])}var v=t(c,[["render",g]]);export{k as __pageData,v as default};