UI/UX 设计实例

最前

在本站博文「¡HolaH! CMS Blog」MOC 的致谢清单一节中，特别鸣谢了 Cali Castle 个人博客为本站提供的灵感和可靠借鉴，

其中该站点的 UI 设计是让吾辈特别印象深刻的：开发作者 Cali 用心且细微入里的 UI 设计，表现方面包括有：按钮、弹窗面板的 UI 风格清爽简洁，但不是朴素（简陋）的白底黑字，但具体风格类别吾辈目前尚不能准确定义，只能说有类 IOS 系统（背景高斯模糊 + 动效）的感觉。

本文结合几个具体的可交互元素，简要回顾开发者 Cali 的具体 UI 设计，以作备忘。

另，本文样式使用 tailwind 原子类名作为示例（基本不会有阅读障碍，其大部分类名能很直观的对应上原生 CSS 语句）；

另，代码展示中，删去了基本的如内外边距、宽高尺寸的样式设置，聚焦实现核心 UI 效果的 CSS 语句（而完整样式可在 F12 控制台查看）

背景精调

实例

(说明：为了效果的更好展示，这里将按钮调节到偏大尺寸)
(说明2：滚动该区域以查看细调 UI 带来的视觉提升)

简单样式（白底黑字）

添加 UI 细节（渐变背景）

更多 UI 细节（阴影、背景模糊）

代码片段

<Button
  className={cxSm("bg-gradient-to-b from-zinc-50/50 to-white/90", {
    ["shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:from-zinc-900/50 dark:to-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"]: true,
  })}
>
  click
</Button>

细节说明

总的来说，为了达到类 IOS 系统的按钮或者面板效果，有以下几个必要设置：

对背景设置了方向从上到下的渐变背景（由半透到微透全白的颜色过渡）
阴影（轮廓）效果设置（shadow ring）
模糊效果设置（backdrop-blur

以上几处设置，完成了按钮（或面板）类 IOS 风格的设置

实例 2

同样的设置细节，略作修改，用在更大的菜单面板上，见实例 2，也能获得不错的 UI 效果

(说明2：滚动该区域以查看细调 UI 带来的视觉提升)

更多 UI 细节（阴影、背景模糊）

简单样式（白底黑字）

Panel

item1
item2
item3
item4

添加 UI 细节（渐变背景）

Panel

item1
item2
item3
item4

弹窗进入退出的细节处理

更多 UI 细节(弹窗面板本身半透效果，底部遮罩将背景模糊)

无额外动画效果不推荐的进入退出动画效果推荐的进入退出动画效果 ✌🏻

headlessUI 组件暴露的 API 友好易读，这里用来作为示例代码片段，展示核心动效实现细节

import { Popover, Transition } from "@headlessui/react";

<Transition.Child
  as={React.Fragment}
  enter="duration-150 ease-out"
  enterFrom="opacity-0 scale-95"
  enterTo="opacity-100 scale-100"
  leave="duration-150 ease-in"
  leaveFrom="opacity-100 scale-100"
  leaveTo="opacity-0 scale-95"
>
  <Popover.Panel>{/* ... */}</Popover.Panel>
</Transition.Child>;

api 值具有很好的语义化，这里不再过多解释。