---
title: Intuitive and simple
---

<style>
.doc-cutline-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}
.doc-cutline{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-bottom:42px;padding:20px;background:#F9FAFB;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:320px}
.doc-cutline:after{position:absolute;bottom:-32px;left:0;font-size:12px;font-weight:500}
.doc-cutline.do{margin-right:40px;border-bottom:solid 4px #2F86F6}
.doc-cutline.do:after{content:"Do";color:#2F86F6}
.doc-cutline.donot{border-bottom:solid 4px #FF5257}
.doc-cutline.donot:after{content:"Don't";color:#FF5257}
.doc-cutline-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.doc-cutline-item.horizon img{width:100%}
.doc-cutline-item.vertical img{width:auto;height:100%}
@media (max-width:750px){.doc-cutline-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.doc-cutline.do{margin-right:0}
}
</style>

#### WYSIWYG

For the scanning and identification function of the bank card, driving license and other documents, the recognition result and the corresponding certificate photo are displayed in comparison, and the identification is correct or not, which is very straightforward and clear at a glance.

<div class="doc-cutline-wrapper">
  <div class="doc-cutline do">
    <div class="doc-cutline-item">
      <img src="https://pt-starimg.didistatic.com/static/starimg/img/FfSJRAtAsN1545826131586.jpg">
    </div>
  </div>
  <div class="doc-cutline donot">
    <div class="doc-cutline-item">
      <img src="https://pt-starimg.didistatic.com/static/starimg/img/P1V5PxTfZJ1545826131541.jpg">
    </div>
  </div>
</div>

#### Focus on single task

A page focuses on only one core task and provides a single action button; if multiple operations are possible, it is also necessary to distinguish between primary and secondary, avoiding multiple action buttons.

<div class="doc-cutline-wrapper">
  <div class="doc-cutline do" style="flex:1;">
    <div class="doc-cutline-item vertical" style="height:400px;">
      <img src="https://pt-starimg.didistatic.com/static/starimg/img/aPbV47UGQ81545827158431.jpg">
    </div>
  </div>
  <div class="doc-cutline donot" style="flex:1;">
    <div class="doc-cutline-item vertical" style="height:400px;">
      <img src="https://pt-starimg.didistatic.com/static/starimg/img/qkOeavUGxm1545827158470.jpg">
    </div>
  </div>
</div>

#### Simplify multi-level

Need to layer the complex information, try to show only the first level of information to the user by default, and the rest of the level is hidden.

<div class="doc-cutline-wrapper">
  <div class="doc-cutline do" style="flex:1;">
    <div class="doc-cutline-item" style="max-width:350px;">
      <img src="https://pt-starimg.didistatic.com/static/starimg/img/kearq8f13L1545827158629.png">
    </div>
  </div>
  <div class="doc-cutline donot" style="flex:1;">
    <div class="doc-cutline-item" style="max-width:350px;">
      <img src="https://pt-starimg.didistatic.com/static/starimg/img/2tvMzqd5Xz1545827158791.png">
    </div>
  </div>
</div>