当一个页面有多个按钮时,我们很容易认为这些按钮是并列关系,然后把它们设计得很相似。语义逻辑固然重要,但我们不能忘记视觉层级。 大多数页面只会有1个一级操作,同时会有几个二级和三级操作。 <ul class="dotted" data-apple-notes-indent-amount="0"><li>一级操作应该足够明显。适合用强对比的样式。</li><li>二级操作应该足够清晰但不过于突出。线框或浅背景按钮都挺好。</li><li>三级操作应该很弱,但它也能被轻易找到。常用文字链接的样式。</li></ul> 以“视觉层级”优先的设计方法能让页面看起来干净而清晰。 <img src="https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_A04678E4-1D97-4D8C-85A5-9438A2331B44/public" style="background-color:initial;max-width:min(100%,360px);max-height:min(162px);;background-image:url(https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_A04678E4-1D97-4D8C-85A5-9438A2331B44/public);height:auto;width:100%;object-fit:cover;background-size:cover;display:block;" width="360" height="162"> <img src="https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_6B1510D8-8B2D-40DD-AD07-DD8FF5B90103/public" style="background-color:initial;max-width:min(100%,360px);max-height:min(162px);;background-image:url(https://imagedelivery.net/phxEHgsq3j8gSnfNAJVJSQ/NODE2_6B1510D8-8B2D-40DD-AD07-DD8FF5B90103/public);height:auto;width:100%;object-fit:cover;background-size:cover;display:block;" width="360" height="162">