一千柯橘

卡片是一种非常实用的 UI 元素，可以有效地提高信息组织效率、增强用户体验、提升视觉效果。在设计中，可以根据具体的需求灵活运用卡片，以达到最佳的效果。...

Popover 是一种弹出式提示框，可以提供额外的信息或功能。它通常用于： 显示辅助信息 & 提供操作选项...

其实，最早接触 Headless UI 是在去年，碰巧看到了一个非常前沿且优秀的组件库 ---- Chakra UI，这个组件库本身就是 Headless UI 的实践者，...

Popover A Popover can be used to display some content on top of another....

这个事其实一直存在脑子的。为啥呢？因为我们听到太多了，太多了，35岁是个坎。事实上，找工作也是如此，很多行业都是有年龄限制的。找不到自己原来的行业的工作了。那就只有转行了。...

Click up 在展示任务的时候会给予用户多种选择方式，虽然展示的方式是多样的，但是对任务的操作行为却是一致的，而 任务的内容太多，而操作行为太多的时加上页面内容空间有限...

常见展示任务的方式：看板、列表、时间线、甘特图、表格..., 各个展示的方式都有优点，通常为了满足用户不同的个性化选择，因此可以将系统的展示方式设计为多种，方便用户自行选择...

Breadcrumb 的作用： > 1. 让用户了解当前所处页面的位置，并且能够向上导航 > 2. 让用户快速跳转到当前页面之前的层级路由上（即快捷导航）...

参考设计截图 优点 首页第一屏简明扼要的展示了 Sundown Studio 的 icon 和 Work, Studio, Contact 菜单项，以及 Sundown 的...

参考网站页面截图 优点 首页动画效果拉满，让用户体验到了网站设计者的脑洞大开 首页第一屏左部分是 作者和地名，右边是一个简单的个人介绍，简洁明了 截图 2 的 嵌套相框根据...

前言 在前端面试的过程中，前端工程化一直是考察面试者能力的一个重点，而在我们常用的项目打包工具中，无论是webpack还是rollup，都具备一项很强大的能力——tree-...

这是国外程序员 Robin Wieruch 带有明显个人色彩的一份总结，每年都会更新。相比于 awesome 列表，我个人更喜欢这类总结，简短、实用，更容易让人抓到重点并能...

设计学习截图 hover 到 黑色的 card 效果图 优点 当同主题的内容太多而避免设计单一时，可以使用类似设计节约空间的同时却不失内容的完整性，还能提高用户于设计的交互...

- 首页的作用是突出重点的内容，如果内容太多可以使用链接供用户了解更多 - hover 的效果进行反转也是一个不错的设计！...

- 当某个模块的内容信息太多的时候，我们可以仅展示几个优秀的作品，然后通过扩展链接来将让用户自行选择，以用户为中心 - 有交互效果时，hover 时最好有提示性样式改变...

卡片能图文并茂的展示简洁的内容，但是当图片在 hover 的时候应该给用户展示出更多详细的信息，让用户能更详细也让用户能更了解当前的 item 内容...

标签导航：如果页面拥有多个标签页或分区，快速定位栏可以显示这些标签或分区的链接，使用户能够快速切换和定位到不同的内容区域。...

模块的背景颜色比整体的背景颜色深一些，突出模块，也突出描述重点 使用圆形进度条是为了保证页面看起来保持信息对等 虽然大多以卡片图文形式展示信息，但是根据卡片的大小进行了不同...

设计有一个原则：交互不能生硬，比如有一个链接，鼠标 hover 上去的时候不能只有 cusor 的变化，还应该有 text/background/color/opacity...

手风琴（一次只打开一个 tab）设计的好处： > 1. 提高专注能力：信息少了自然就能防止被其他 tab 分散注意力，让用户更关注于当前区域内容 > 2. 减少信息过载，提...