# Elaine Kits - Button按钮篇

By [Elaine](https://paragraph.com/@elaine) · 2022-05-12

---

如约来更新Button按钮篇，今天用一个NFT产品设计来讲讲不同的button，我将buttons分为4类：

*   Text button，低强调属性，例如：NFT详情页面，都会放智能合约地址，点击地址，跳转到区块浏览器。
    
*   Outlined button，中等强调属性
    
*   Contained button，高强调属性
    
*   Icon button，例如：很多“like”的功能都用♥️来表示
    

![](https://storage.googleapis.com/papyrus_images/3f285426f363a5c278e66bcc5cc1644d80820f72ae403f8c09a46c5afcf28401.png)

### Hierarchy - 按钮等级

Hierarchy是描述按钮重要性等级的，一般Text button < Outlined button < Contained button，在我眼里这是非常重要的规则！！！UI设计中，一个页面往往需要呈现很多信息，那么如何让用户一眼见到最关心（or 我们最想让用户看到）的信息，Hierarchy等级就显得非常重要。

例如在NFT详情页面中，出价一定是最重要的信息，所以按钮我们用Contained button，而NFT的链上信息属于次要功能，所以可以用Text button来表示。

另外我们也可以借助其他因子来表现不同按钮的hierarchy，字体大小、颜色、Stoke、Effects都可以帮助我们给元素进行分级。

![](https://storage.googleapis.com/papyrus_images/0737de4aef23336507bcb428151fb15fa982aec20d16f6cce9800978284babfd.png)

### Case - NFT详情页面介绍

下面我就用一个NFT交易详情页面来表现上述介绍的四类buttons。

![](https://storage.googleapis.com/papyrus_images/825d0b373c00d9227c46bb3c3cc52f015051c176637a4d4e925e4ab251245e31.png)

*   设计稿里展现了三种buttons，分别是Text button：The Wander Series，这是NFT系列的名称，点击可以跳转到系列页面。
    
*   Contained button：Place a Bid，出价，用户想对这幅NFT进行出价购买。这是NFT产品最核心的功能，所以用等级最高的Contained button来展现。
    
*   Icon button：❤️，like，用户喜欢这幅NFT，这是很弱的功能。
    

下面用户点击了Place a Bid，进行出价。

![](https://storage.googleapis.com/papyrus_images/bf9bf4c1998cc272a237dde59c618a82df3d277083131f09d06dc1a4017925d7.png)

*   两张页面展示了三种button，分别是：Text button、Outlined button、Contained button
    
*   Text button：Cancel，取消购买操作，我们不希望用户取消，所以用Text button降低它在的影响度
    
*   Outlined button：Confirm，确定购买，因为用户没有输入价格，按钮不可点击
    
*   Contained button：Confirm，用户输入了价格，按钮可以点击，我们强烈希望用户购买，用等级最高的Contained button来表示
    

### 最后

Hierarchy对我而言，是非常重要的设计规则，不仅是buttons，其他组件也可以用到。例如像NFT详情页面，我们往往需要展示NFT作者信息（链下信息）、链上信息、链上活动信息（也可以叫做交易信息），对于区块链去中心化产品来说，链上信息肯定大于链下信息，而NFT交易市场产品，交易肯定又是大于链上基本信息的。

所以在设计时，就需要用不同的等级组件来展现信息强弱度。👋👋 加油

---

*Originally published on [Elaine](https://paragraph.com/@elaine/elaine-kits-button)*