让你的应用感觉更好：给初级/中级开发人员的 10 个 UI 技巧

2025-06-07

让你的应用感觉更好：给初级/中级开发人员的 10 个 UI 技巧

嘿，开发者们！👋

作为初级或中级开发者，你可能非常注重应用的功能性。但你考虑过它的使用体验吗？在本文中，我们将探讨 UI 设计中 9 个经常被忽视的方面，它们可以显著提升应用的用户体验。

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

1. 注意边距和填充

不均匀的边距和填充很容易让人觉得设计者还在摸索阶段。一致的间距能让一切看起来更简洁、更专业。

快速修复：

保持边距和内边距为 4 的倍数（例如 4px、8px、12px、16px）。这样布局才会有节奏感，看起来也更精致。



.container {
  padding: 16px;
}

.button {
  padding: 8px 12px;
}
Enter fullscreen mode Exit fullscreen mode

您不需要重新发明轮子——只要保持平衡，它就会立即看起来更好。

提示 #1

2. 像老板一样处理空状态

您是否曾经打开应用时遇到空白屏幕？没错，这就是开发者忘记设计空白状态时会遇到的情况。当没有数据可显示时，不要让用户感到茫然。

专业提示：

添加有用的消息或号召性用语 (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
}
Enter fullscreen mode Exit fullscreen mode

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

提示 #2

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);
Enter fullscreen mode Exit fullscreen mode

这样，用户就不会看到超快速任务的旋转器，但他们会在需要时得到反馈。

提示#3

4.保持清晰的视觉层次

屏幕上的所有内容并非都同等重要，对吧？确保你的用户界面能够体现这一点。使用不同的字体大小、颜色和粗细来引导用户浏览内容。

专业提示：

主要内容坚持使用 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;
}
Enter fullscreen mode Exit fullscreen mode

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

提示#4

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 */
}
Enter fullscreen mode Exit fullscreen mode

空白不是浪费的空间——它是设计的一部分！

提示 #5

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

帮助用户在出现问题时感觉自己不会陷入困境。

提示#6

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

您是否曾经尝试在应用中阅读内容时遇到断点，或者尝试与禁用的按钮进行交互，却只能猜测原因？这会让用户感到沮丧，但其实很容易避免。title为长文本或禁用元素添加工具提示（属性），以提供更多上下文。

专业提示：

当文本被截断或按钮被禁用时，工具提示可以为用户提供更多信息，例如完整文本内容或按钮处于非活动状态的原因。这确保了流畅且信息丰富的体验。



// 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>
Enter fullscreen mode Exit fullscreen mode

添加这些工具提示，让您的应用显得更加周到和精致。这样的小细节体现了您对用户体验的重视。

提示 #7

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>
Enter fullscreen mode Exit fullscreen mode

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

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

提示#8

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

不要为了图标而让 UI 变得过于繁琐。每个图标都应该有明确的用途，并提升用户体验。

专业提示：

保持图标简单、可识别，并确保它们与其所代表的操作相匹配。



<Icon name="trash" onClick={deleteItem} />
<Icon name="edit" onClick={editItem} />
Enter fullscreen mode Exit fullscreen mode

使用图标来明确操作，而不是使用户界面变得混乱。

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

人们很容易陷入这样的误区：认为所有代码都必须从头开始。但你猜怎么着？其实根本不需要！市面上有很多优秀的 UI 库，例如 Ant Design、Shadcn UI、Material UI 和 Chakra UI，可以帮你节省大量时间和精力。这些库提供了经过充分测试、易于访问且一致的组件，让你可以专注于打造应用的独特之处，而无需重新构建基础功能。

专业提示：

如果您需要快速完成项目，或者项目期限紧迫，不妨利用这些库。但如果您纯粹是为了学习而构建，请尽情探索细节，构建您自己的组件。



import { Button } from 'antd';

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

提示 #10

使用这些库有助于确保您的应用外观精美、功能良好且保持一致，同时还能节省您的时间。您可以随时进行自定义，但从坚实的基础开始可以帮助您更快地完成开发。

当您已经有一个样式精美、响应迅速的按钮可供您直接使用时，无需从头开始编写按钮代码！

结论

打造出色 UI 的关键在于对细节的关注。这些细微的调整——一致的间距、清晰的层级结构、周到的空白/加载/错误状态，以及均衡的留白——会带来显著的改变。无论您是开发第一个应用，还是第五十个应用，都请花时间完善这些方面，您的用户一定会感谢您。

有任何想法或疑问吗？欢迎告诉我，我很乐意进一步探讨这些话题或进行更多交流。祝您编程愉快，愿您的应用始终精彩纷呈！✨

文章来源：https://dev.to/harimanok/make-your-app-feel-better-11-ui-tips-for-beginnermid-level-developers-1e1n
Devto 翻译
PREV
我希望我曾经有过的服务器介绍
NEXT
25 个超棒 Python 脚本合集（迷你项目）- PDF 下载