element-plus/docs/en-US/guide/design.md

---
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.