[[按钮 Button画布.canvas]] ## 简介 按钮（Button） ，原子元素，最常见的控件之一。 Salesforce 介绍：[[Lightning Design System#^dcfbe0]] 按钮是用于执行动作的可点击项 ## 信息层级 在产品 [[Stripe]] 中，我们可以看到从右到左，按钮的视觉层级从高到低，这也是行业内比较认可的视觉设计手法。  ## 类型 ### 主按钮 主色彩填充的按钮，设计系统中一般称 Primary，优先级最高的按钮。 用来强调任最重要的行动。不要在一个区域或屏幕上使用超过一个主要按钮，以免让人不知所措。 #### Salesforce 介绍： [[Lightning Design System#^f39da4]] - 品牌按钮一般应该只使用一次，每个组件屏幕在任何时候。当有一个行动显然比其他行动更重要，你需要引起注意时，它就会被用到。一个例子是当你有一个“保存”和“取消”按钮。“保存”是主要的行动。 - 并不是所有的功能都需要有主要的动作，有时候动作是次要的，并且都是同等重要的。 #### Shopify 介绍： [[Polaris Design System#^7efa54]] 用来强调任最重要的行动。不要在一个区域或屏幕上使用超过一个主要按钮，以免让人不知所措。 ## 尺寸 - 设置最小宽度 - 超过最小宽度，自适应 ## 链接和按钮？ ### 设计系统 C 译版 Heydon Pickering 在其 Inclusive Design Patterns 一书当中所进行的描述是我所见过的最为简单有效的。他认为真正的区别存在于链接与行为召唤之间，而非链接与“按钮”之间。一个重要的功能行为可以通过“按钮”的形式来体现，无论其在实际代码中究竟是“链接”还是“按钮”；而我们更需要关注的是这个元素是否具备行为召唤的特质，还是在于将用户带离当前页面。  关于"行为召唤按钮"、"行为召唤链接"和"链接"的分级定义。细节中的样式差异也体现出了"行为召唤按钮"与"行为召唤链接"在交互方式上的区别。 如果行为作用于当前页面，则使用"行为召唤按钮"；如果行为会将用户带离当前页面，则使用"行为召唤链接"。而普通链接可以承载更多的上下文信息，通常会嵌入在标题、正文内容或图片当中。 如此精准的定义方式还有助于在保持行为召唤呈现力度的同时保持代码的精简可读。 ### 其他设计系统的说法 - [[Lightning Design System#^9a2389|Lightning DS]] - [[Polaris Design System#^8e1622|Polaris DS]] ## 资源 ### 灵感 - [buttons.cool](https://www.buttons.cool/)  - [CSSFX - Beautifully simple click-to-copy CSS effects](https://cssfx.netlify.app/) 也有一部分 - [CSS Buttons](https://css-buttons.web.app/) 各种酷炫的动效 button 合集，100 例，但是这个网站太卡了，带不动啊。 - [CSS Buttons, checkboxes, and more! Copy paste CSS & HTML](https://uiverse.io/) 各种酷炫的按钮，源代码也给了。 - [Hover.css - A collection of CSS3 powered hover effects (ianlunn.github.io)](http://ianlunn.github.io/Hover/#effects) 各种 hover 特效源代码 - [84 Beautiful CSS buttons examples - CSS Scan (getcssscan.com)](https://getcssscan.com/css-buttons-examples?ref=beautifulboxshadow-bottom) 都是线上知名产品的按钮合集  - [Button UI design – Comprehensive tutorial on UX, styles and usability](https://setproduct.com/blog/button-ui-design) 比较全面的文章。20230123  ### 教程 - [Button UX 设计：最佳实践、类型和状态|作者：尼克·巴比奇 |用户体验星球 (uxplanet.org)](https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6)