让您的应用程序感觉更好：面向初级/中级开发人员的 10 个 UI 技巧

作为初学者或中级开发人员，您可能已经非常专注于使您的应用程序正常运行。但是你有没有考虑过使用的感觉呢？在这篇文章中，我们将探讨 UI 设计中 9 个经常被忽视的方面，这些方面可以显着改善应用的用户体验。

注意：这些示例以 ReactJS 和 TailwindCSS 为例，但这些原则可以应用于任何地方。

1. 注意你的边距和填充

不均匀的边距和填充是一个致命的赠品，表明某人仍在掌握设计的窍门。一致的间距使一切看起来更干净、更专业。

快速修复：

对于边距和填充，请坚持使用 4 的倍数（想想 4px、8px、12px、16px）。它为您的布局提供了很好的节奏，并且看起来更加精致。

.container {
  padding: 16px;
}

.button {
  padding: 8px 12px;
}

只需保持平稳，它就会立即看起来更好。

2. 像 Boss 一样处理空状态

是否曾打开应用程序并遇到空白屏幕？是的，当开发人员忘记为 empty state 进行设计时，就会发生这种情况。当没有要显示的数据时，不要让用户挂起。

专业提示：

添加有用的消息或行动号召 （CTA） 按钮，以指导用户下一步做什么。

function TodoList({ todos }) {
  if (todos.length === 0) {
    return (
      <div className="flex h-44 flex-col items-center justify-center rounded border bg-white shadow-sm">
        <p className="mb-2 text-gray-600">Nothing here yet! Why not add your first task?</p>
        <Button className="mt-2 bg-green-500 hover:bg-green-600">
          <Plus className="mr-2 h-4 w-4" />
          Add Todo
        </Button>
      </div>
    );
  }

  // Render todo list
}

将空白屏幕变成吸引用户的机会！

3. 始终显示加载状态

如果您的应用程序在后台执行某些操作，请告知您的用户。没有什么比想知道按钮点击是否有效或应用程序是否崩溃更糟糕的了。

专业提示：

使用延迟加载微调器进行快速操作，这样它就不会闪烁得太快。下面是添加延迟的小技巧：

function useDelayedLoading(isLoading, delay = 200) {
  const [showLoading, setShowLoading] = useState(false);

  useEffect(() => {
    if (isLoading) {
      const timer = setTimeout(() => setShowLoading(true), delay);
      return () => clearTimeout(timer);
    }
    setShowLoading(false);
  }, [isLoading, delay]);

  return showLoading;
}

// Usage
const showLoading = useDelayedLoading(isLoading);

4. 保持清晰的视觉层次结构

并非屏幕上的所有内容都具有相同的重要性，对吧？确保您的 UI 反映了这一点。使用不同的字体大小、颜色和粗细来引导用户浏览内容。

专业提示：

主要内容坚持使用 2-3 种字体大小，并谨慎使用颜色来强调关键点。

.primary-text {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.secondary-text {
  font-size: 16px;
  color: #666;
}

.tertiary-text {
  font-size: 14px;
  color: #999;
}

不要让事情过于复杂 – 只需确保用户第一眼就知道什么是重要的。

5. 拥抱空白，不要害怕

您不必用某些东西填满屏幕的每一英寸。空格（又名负空格）是你的朋友！它可以帮助您的应用程序呼吸，并使用户更容易集中注意力。

专业提示：

增加不相关元素之间的间距，减少相关元素之间的间距。这一切都与平衡有关。

.section {
  margin-bottom: 32px; /* Big gap between sections */
}

.section-title {
  margin-bottom: 16px; /* Smaller gap within a section */
}

.list-item {
  margin-bottom: 8px; /* Tight gap between list items */
}

6. 优雅地处理错误

没有人喜欢错误，但错误会发生。当他们这样做时，要乐于助人。与其只说“错误 404”，不如为用户提供上下文并提供修复它或重试的方法。

专业提示：

使您的错误消息友好、清晰且可操作。

function ErrorMessage() {
  return (
    <div className="rounded border bg-neutral-10 p-6">
      <h3 className="text-neutral-8900 mb-2 text-xl font-bold">Oops! Page Not Found</h3>
      <p className="mb-4 text-neutral-700">
        We couldn&apos;t find the page you&apos;re looking for.
      </p>
      <div className="flex flex-row-reverse justify-start gap-2">
        <Button className="rounded" variant="default">
          Retry
        </Button>
        <Button className="rounded" variant="ghost">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Go Back
        </Button>
      </div>
    </div>
  );
}

7. 为长文本和禁用状态添加工具提示

有没有尝试过阅读应用程序中被截断的内容或尝试与禁用的按钮交互，却只留下猜测为什么？这可能会让用户感到沮丧，而且很容易避免。为长文本或禁用的元素添加工具提示 （ attribute） 以提供更多上下文。

专业提示：

当文本被截断或按钮被禁用时，工具提示可以为用户提供其他信息，例如全文是什么或按钮为何处于非活动状态。这样可以保持体验顺畅且信息丰富。

// Long text tooltip example
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger asChild>
        <p
          className="w-48 truncate"
          title="This is a very long text that gets cut off but has a helpful tooltip"
        >
          This is a very long text that gets cut off but has a helpful tooltip
        </p>
      </TooltipTrigger>
      <TooltipContent>
        <p>This is a very long text that gets cut off but has a helpful tooltip</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
// Disabled button tooltip example
<button disabled title="You need to complete the form before submitting">
  Submit
</button>

8. 使用上下文颜色进行反馈

颜色在引导用户浏览您的应用方面起着至关重要的作用。在正确的情况下使用正确的颜色会使界面更直观、更易于理解。例如，红色调表示错误，绿色表示成功，黄色表示警告，蓝色表示信息性消息。

专业提示：

请遵循既定的颜色约定，以避免混淆您的用户。大多数人认为红色是错误或危险的指标，而绿色是成功的标志，所以要利用它！

// Example of contextual colors in action
              <div className="flex items-center rounded-md border border-red-200 bg-red-100/75 p-3">
                <AlertCircle className="mr-2 text-red-700" />
                <p className="text-red-800">Error: Something went wrong!</p>
              </div>
              <div className="flex items-center rounded-md border border-green-400 bg-green-100/75 p-3">
                <CheckCircle className="mr-2 text-green-700" />
                <p className="text-green-800">Success: Operation completed!</p>
              </div>

通过遵循这些颜色约定，您可以让用户更轻松地快速了解应用程序中发生的情况，而无需过度解释。

这个小细节不仅有助于使您的 UI 更加直观，还可以通过将颜色与操作和结果联系起来来增强视觉层次结构。

9. 图标应该增强，而不是分散注意力

不要为了图标而使 UI 过载。每个图标都应该有明确的用途并增强用户体验。

专业提示：

保持图标简单易辨，并确保它们与它们所代表的操作相匹配。

<Icon name="trash" onClick={deleteItem} />
<Icon name="edit" onClick={editItem} />

10. 不要重新发明轮子 — 使用可靠的 UI 库

很容易陷入认为必须从头开始编写所有内容的陷阱。但你猜怎么着？你不需要！有很棒的 UI 库，如 Ant Design、Shadcn UI、Material UI 和 Chakra UI，可以为您节省大量时间和精力。这些库提供了经过充分测试、可访问且一致的组件，因此您可以专注于使应用程序独一无二的原因，而不是重做基本操作。

专业提示：

如果您想快速行动或正在处理截止日期紧迫的项目，请利用这些库。但是，如果你纯粹是为了学习而构建的东西，请随意深入研究细节并构建你自己的组件。

import { Button } from 'antd';

function MyApp() {
  return <Button type="primary">Click Me</Button>;
}

使用这些库有助于确保您的应用程序看起来精美、运行良好并保持一致，同时节省您的时间。您以后可以随时自定义内容，但从坚实的基础开始可以帮助您更快地行动。

无需从头开始编写按钮，因为您已经有一个样式精美、响应迅速的按钮，您可以直接放入其中！

结论

出色 UI 的关键是注重细节。这些小的调整 — 一致的间距、清晰的层次结构、深思熟虑的空 / 加载 / 错误状态以及空格的平衡使用 — 产生了天壤之别。无论您是在开发您的第一个应用程序还是第 50 个应用程序，请花时间完善这些区域，您的用户会感谢您。