mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
98 lines
2.5 KiB
Markdown
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 advices 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.
|