如何设计几乎所有的 UI 元素。精选 58 篇文章。

你好呀！

最近我在 Twitter 上发布了一个包含 58 个与不同 UI 元素相关的链接的列表。事实证明，这条推文非常有用，但以主题帖的形式阅读这些链接不太方便。

所以我想在 dev.to 上以单个列表的形式分享它们。

按钮

按钮设计的7条基本规则

按钮设计——UI组件系列

UI 速查表：按钮

文本字段

UI 速查表：文本字段

文本字段和表单设计——UI 组件系列

输入字段的剖析

复选框和切换按钮

复选框与拨动开关

拨动开关指南

拨动开关设计：全面贯彻

38个复选框设计

单选按钮

选择控件 — UI 组件系列

单选按钮用户体验设计

单选按钮设计：轻松选择和决策

表格

设计更好的数据表

数据表设计终极指南

为企业用户体验设计更好的数据表

日期选择器

如何设计一个完美的日期选择器控件？

日期选择器设计最佳实践

寻找完美的日期选择器 UI

滑块

设计完美的滑块

滑块设计 UI 模式和示例

滑块设计：经验法则

标签

网页设计中的模块标签：最佳实践和解决方案

12 个标签页设计指南

下拉菜单

UI 备忘单：下拉字段

下拉菜单：设计指南

下拉列表设计：完整指南

分页

分页、滚动和无限滚动

用户体验：无限滚动 vs. 分页

用户的分页偏好和“查看全部”

搜索输入

搜索输入的最佳用户体验实践

设计完美的搜索框

站点搜索建议

面包屑

面包屑导航：桌面和移动设备的 11 条设计指南

面包屑对于用户体验来说还新鲜吗？

面包屑导航示例，助您灵感迸发

旋转木马

轮播/滑块设计最佳实践（附示例）

轮播可用性：为内容过载的网站设计有效的用户界面

设计一个用户友好的主页轮播

情态动词

设计 UI 覆盖层的最佳实践

大胆的用户体验——使用模态窗口来提升应用内用户参与度

模态对话框和非模态对话框：何时使用（以及何时不使用）

模态对话框

牌

卡片式 UI 设计：基础知识与示例

制作更好的 UI 卡片的简单设计技巧

设计卡片

工具提示

工具提示指南

为移动用户界面设计更好的工具提示

工具提示：提升功能发现的秘密武器

导航

导航设计：你需要知道的一切

导航菜单的用户体验设计

最快的三级菜单导航布局

装载机

进度指示器让缓慢的系统不再那么让人难以忍受

别再用加载旋转器了，有更好的选择

动画进度指示器的最佳实践

表格

设计更好的表单

表单设计：13 个经验支持的最佳实践

设计更好的表单背后的用户体验

就是这样。希望它对 Web 开发者有用。如果你愿意，可以在 Twitter 上关注我，我在那里发布了很多关于 UI/UX 的内容。