element-plus/docs/en-US/guide/design.md
2021-12-21 09:34:25 +08:00

98 lines
2.5 KiB
Markdown

---
title: Design
lang: en-US
---
<style scoped lang="scss">
.guide__design {
margin-top: 1rem;
}
.el-col {
padding: 0 7px;
}
.card {
background: #fbfcfd;
height: 204px;
text-align: center;
img {
margin: 40px auto 25px;
width: 5rem;
height: 5rem;
}
}
@media screen and (max-width: 767px) {
.el-col {
padding-bottom: 8px;
}
}
</style>
# Design Disciplines
<div class="guide__design">
<div class="el-row cards" style="margin-left: -7px; margin-right: -7px;">
<div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
<div class="card">
<img src="/images/consistency.png" alt="Consistency">
<p>Consistency</p>
</div>
</div>
<div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
<div class="card">
<img src="/images/feedback.png" alt="Feedback">
<p>Feedback</p>
</div>
</div>
<div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
<div class="card">
<img src="/images/efficiency.png" alt="Efficiency">
<p>Efficiency</p>
</div>
</div>
<div class="el-col el-col-24 el-col-xs-12 el-col-sm-6 is-guttered">
<div class="card">
<img src="/images/controllability.png" alt="Controllability">
<p>Controllability</p>
</div>
</div>
</div>
</div>
## Consistency
- **Consistent with real life:** in line with the process and logic of real life,
and comply with languages and habits that the users are used to.
- **Consistent within interface:** all elements should be consistent, such as:
design style, icons and texts, position of elements, etc.
## Feedback
- **Operation feedback:** enable the users to clearly perceive their operations
by style updates and interactive effects.
- **Visual feedback:** reflect current state by updating or
rearranging elements of the page.
## Efficiency
- **Simplify the process:** keep operating process simple and intuitive.
- **Definite and clear:** enunciate your intentions clearly so
that the users can quickly understand and make decisions.
- **Easy to identify:** the interface should be straightforward,
which helps the users to identify and frees them from memorizing and recalling.
## Controllability
- **Decision making:** giving advice about operations is acceptable, but do not
make decisions for the users.
- **Controlled consequences:** users should be granted the freedom to operate,
including canceling, aborting or terminating current operation.