学习目标：掌握设计的基本方法
作为独立开发者，除了要会写代码，还要懂 UI 设计。尽管我们更擅长把功能实现，但是良好的 UI 设计能大大提升产品的用户体验。好在现在在 AI、以及 UI 组件库等利器的加持下，开发者上手 UI 设计的成本逐步降低。本文为作者在独立开发过程中的一些方法、工具总结，以及在没有专业设计师协助下，解决设计问题的一些心得。同时作者也在不断学习和补充设计知识，因此欢迎大家有更好的工具推荐给作者。
优秀的 UI 设计遵循“简约至上”的原则。简洁的设计可以减少用户的认知负担，让他们更快地理解界面，找到所需功能。
在 UI 设计中，颜色的选择至关重要，它不仅影响视觉效果，还影响用户的情感体验和可读性。以下是关于颜色的一些基本原则：
如果有品牌颜色，主色通常是该品牌的标志性色彩，传递品牌的核心情感和识别度。不同的颜色能传递不同的情感，例如蓝色代表信任，红色代表能量，绿色代表健康和平静等。
确保背景色与前景内容（如文本、图标）之间有足够的对比度，尤其是为了保证在浅色背景上使用深色字体，深色背景上使用浅色字体。你可以使用 WCAG（Web Content Accessibility Guidelines）中的对比度建议，一般推荐的对比度至少为 4.5:1。
Colour contrast checker（ https://colourcontrast.cc）：用于测试前景和背景色的对比度是否符合 WCAG 标准。类似的工具很多，可以选择适合自己的。
避免强烈的纯色，纯色（如纯红、纯蓝）通常会让用户感到刺眼或疲劳，尤其在大面积使用时。可以选择稍微柔和一些的色调，如淡蓝色、浅灰色等。中性色如灰色、米色、浅蓝色等中性色常常作为通用的背景色，它们不会抢走内容的注意力，也容易与其他颜色搭配。
浅色模式：大多数用户使用的默认模式，白色或浅灰色常见为背景色。适合白天或光线较强的环境。
深色模式：越来越多的用户喜欢在晚上或光线较弱的环境下使用深色模式。深灰色、黑色等背景色可以减轻眼睛疲劳。
Ant Design 主题蓝色 https://ant.design/docs/spec/colors-cn
在 UI 设计中，选择 Primary Color（主色）、Secondary Color（次色）和 Tertiary Color（辅助色）是确保界面视觉一致性和美观度的关键步骤。这些颜色通常会影响品牌的呈现、用户的情感体验以及整体的视觉层次。下面详细介绍这些颜色的选择原则和方法：
主色是品牌或界面的主要颜色，通常是整个设计的视觉基调，视觉上最突出的颜色。最常用于按钮、链接、导航栏等重要元素。主色应反映项目的核心情感。
次色是用来辅助主色的颜色，它通常用于次要操作或需要引导用户关注的区域。次色应与主色形成适度对比，同时保持整体设计的一致性。过强的对比可能会让用户分心，而过弱的对比则可能让界面显得平淡。次色应能适应不同的场景，例如可以用在次要按钮、标签等地方。
辅助色是第三层次的颜色，通常用来为界面添加细节和深度。可以用于提示信息、图标、边框、背景等非核心元素，增加设计的丰富性。辅助色不应抢夺主色和次色的视觉注意力，但仍需要有足够的辨识度，帮助用户区分界面中的不同区域。
表面颜色通常用作界面背景的基础色或主要表面。它是用户界面中最常见的颜色，用于页面的主要区域、卡片的背景或内容的承载区域。通常比较中性或淡雅，以便其他元素能够清晰地显示在其上。Surface 颜色是设计中各个组件的基础层次，为其他元素提供了背景。
表面容器颜色用于容纳内容的组件，如卡片、对话框或弹出窗口的背景。它为这些容器提供了与基础表面不同的颜色，以便这些组件能够从背景中凸显出来。通常比 Surface 颜色更深或更浅，以提供足够的对比度，但不会过于鲜艳。它的目的是将内容从页面的主要表面中区分开，同时保持整体的一致性。
在设计领域，字体大小规范是确保文本在不同屏幕上具有一致性和可读性的重要部分。常见的字体大小规范涉及标题、正文、辅助文字等。以下是字体大小规范的常见标准，适用于网页设计和移动应用设计。
导航栏中的字体通常需要更高的可见度和区分度，字重（font weight）在这里起着重要作用：
Medium 到 Bold）Regular 到 Medium）Bold），特别是品牌名称或标识。Regular 到 Medium）我们可以选择合适的前端组件库，这些组件库都是有一定的设计规范以及设计原色的。如 Material Design、Ant Design、Element UI、Chakra UI 等。
Make your ideas look awesome, without relying on a designer： https://www.refactoringui.com
书籍：写给大家看的设计书
减少选择，将设计系统化。面对数百万种颜色和数千种字体，选择的自由可能反而成为一种负担，使人浪费大量时间在细微决策上。为了避免这种困境，应预先制定设计系统。通过限制选项，比如选择8-10种预先确定的颜色，或定义一组固定的字体比例，设计过程可以更加快速和一致。这样一来，无需每次都去挑选颜色或微调字体大小，从而减少重复决策的时间。系统化不仅能提高工作效率，还能增强设计一致性，避免反复权衡带来的不确定感。例如我们在开发之前先把颜色系统设定好，所有的颜色都从以下颜色中选取，这样不仅能使我们的页面统一，同时减少我们在设计上的思考成本，快速将产品落地。
理解 UI 设计的基本原则并在开发中应用，可以极大地提升产品的用户体验。希望这篇内容能够为你在开发中提供一些实用的设计思路和工具，帮助你创建更优秀的用户界面。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。