# Elaine Kits - Button按钮篇

**Published by:** [Elaine](https://paragraph.com/@elaine/)
**Published on:** 2022-05-12
**URL:** https://paragraph.com/@elaine/elaine-kits-button

## Content

如约来更新Button按钮篇，今天用一个NFT产品设计来讲讲不同的button，我将buttons分为4类：Text button，低强调属性，例如：NFT详情页面，都会放智能合约地址，点击地址，跳转到区块浏览器。Outlined button，中等强调属性Contained button，高强调属性Icon button，例如：很多“like”的功能都用♥️来表示Hierarchy - 按钮等级Hierarchy是描述按钮重要性等级的，一般Text button < Outlined button < Contained button，在我眼里这是非常重要的规则！！！UI设计中，一个页面往往需要呈现很多信息，那么如何让用户一眼见到最关心（or 我们最想让用户看到）的信息，Hierarchy等级就显得非常重要。 例如在NFT详情页面中，出价一定是最重要的信息，所以按钮我们用Contained button，而NFT的链上信息属于次要功能，所以可以用Text button来表示。 另外我们也可以借助其他因子来表现不同按钮的hierarchy，字体大小、颜色、Stoke、Effects都可以帮助我们给元素进行分级。Case - NFT详情页面介绍下面我就用一个NFT交易详情页面来表现上述介绍的四类buttons。设计稿里展现了三种buttons，分别是Text button：The Wander Series，这是NFT系列的名称，点击可以跳转到系列页面。Contained button：Place a Bid，出价，用户想对这幅NFT进行出价购买。这是NFT产品最核心的功能，所以用等级最高的Contained button来展现。Icon button：❤️，like，用户喜欢这幅NFT，这是很弱的功能。下面用户点击了Place a Bid，进行出价。两张页面展示了三种button，分别是：Text button、Outlined button、Contained buttonText button：Cancel，取消购买操作，我们不希望用户取消，所以用Text button降低它在的影响度Outlined button：Confirm，确定购买，因为用户没有输入价格，按钮不可点击Contained button：Confirm，用户输入了价格，按钮可以点击，我们强烈希望用户购买，用等级最高的Contained button来表示最后Hierarchy对我而言，是非常重要的设计规则，不仅是buttons，其他组件也可以用到。例如像NFT详情页面，我们往往需要展示NFT作者信息（链下信息）、链上信息、链上活动信息（也可以叫做交易信息），对于区块链去中心化产品来说，链上信息肯定大于链下信息，而NFT交易市场产品，交易肯定又是大于链上基本信息的。 所以在设计时，就需要用不同的等级组件来展现信息强弱度。👋👋 加油

## Publication Information

- [Elaine](https://paragraph.com/@elaine/): Publication homepage
- [All Posts](https://paragraph.com/@elaine/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@elaine): Subscribe to updates
- [Twitter](https://twitter.com/HuElaine3): Follow on Twitter