---
title: 重点突出，流程明确
header: design
nav: principle
sidebar: keynote
---

<notice>设计界面信息时，重点突出主要信息和操作</notice>
 
<div class="m-doc-custom-examples"><div class="m-doc-custom-examples-correct"><img src="../../../img/1-1-1-1.png"><p class="m-doc-custom-examples-title">正确</p><p class="m-doc-custom-examples-text">信息主次层次分明</p></div><div class="m-doc-custom-examples-error "><img src="../../../img/1-1-1-2.png"><p class="m-doc-custom-examples-title">错误</p><p class="m-doc-custom-examples-text">字号颜色均一样，没有主次</p></div></div>

<div class="m-doc-custom-examples"><div class="m-doc-custom-examples-correct"><img src="../../../img/1-1-1-3.png"><p class="m-doc-custom-examples-title">正确</p><p class="m-doc-custom-examples-text">操作有主次重点</p></div><div class="m-doc-custom-examples-error "><img src="../../../img/1-1-1-4.png"><p class="m-doc-custom-examples-title">错误</p><p class="m-doc-custom-examples-text">多平行操作，用户难以选择</p></div></div>

<notice>设计任务流程时，一次只做一件事情</notice>

移动设备使用场景复杂，用户注意力易分散。设计智能小程序时，为了帮助用户聚焦当前任务并且快速顺利完成，设计智能小程序的任务流程时，应明确当前主要任务操作，并且避免出现任务路径外的内容打断用户流程。

<div class="m-doc-custom-examples"><div class="m-doc-custom-examples-error "><img src="../../../img/1-1-2-1.png"><p class="m-doc-custom-examples-title">错误</p><p class="m-doc-custom-examples-text">弹窗打断了用户原充值流程</p></div></div>