设计篇：独立开发设计入门

十月指南

已于 2024-11-14 21:34:39 修改

阅读量1k

点赞数 21

分类专栏： Next.js 全栈独立开发指南文章标签：前端

于 2024-10-26 22:11:47 首次发布

本文链接：https://blog.csdn.net/JAVA_YPP/article/details/143260550

版权

Next.js 全栈独立开发指南专栏收录该内容

3 篇文章

订阅专栏

难度等级： ⭐⭐

学习目标：掌握设计的基本方法

本文是 Next.js 全栈独立开发指南 系列教程的第二篇，完整教程请点击 https://xiaobot.net/p/indieguide

作为独立开发者，除了要会写代码，还有懂 UI 设计。尽管我们更擅长把功能实现，但是良好的 UI 设计能大大提升产品的用户体验。好在现在在 AI、以及 UI 组件库等利器的加持下，开发者上手 UI 设计的成本逐步降低。本文为作者在独立开发过程中的一些方法、工具总结，以及在没有专业设计师协助下，解决设计问题的一些心得。同时作者也在不断学习和补充设计知识，因此欢迎大家有更好的工具推荐给作者。

总体原则-简约至上

优秀的 UI 设计遵循“简约至上”的原则。简洁的设计可以减少用户的认知负担，让他们更快地理解界面，找到所需功能。

确保功能明确：每个界面元素应该具有明确的功能，不要让用户猜测每个按钮的作用。使用简洁的文字、标签和图标来传达信息。
使用留白：它能帮助界面保持整洁和有序。适当的留白能引导用户视线，突出重要信息。在按钮、输入框等交互元素周围留出足够的空间，可以让用户更轻松地进行点击或输入操作。
减少不必要的元素：如果某个元素不能为用户提供实际帮助，可以考虑移除。
不要使用过多的颜色和字体：在设计中尽量保持颜色和字体的简洁，通常2-3种颜色和字体足够。
建立层次结构：使用不同深浅的颜色来突出内容的层次结构。浅色可以作为背景，深色用来强调重要的文字或按钮。

色彩规范

在 UI 设计中，颜色的选择至关重要，它不仅影响视觉效果，还影响用户的情感体验和可读性。以下是关于颜色的一些基本原则：

主色与品牌风格一致

如果有品牌颜色，主色通常是该品牌的标志性色彩，传递品牌的核心情感和识别度。不同的颜色能传递不同的情感，例如蓝色代表信任，红色代表能量，绿色代表健康和平静等。

可读性和对比度

确保背景色与前景内容（如文本、图标）之间有足够的对比度，尤其是为了保证在浅色背景上使用深色字体，深色背景上使用浅色字体。你可以使用 WCAG（Web Content Accessibility Guidelines）中的对比度建议，一般推荐的对比度至少为 4.5:1。

Colour contrast checker（https://colourcontrast.cc）：用于测试前景和背景色的对比度是否符合 WCAG 标准。类似的工具很多，可以选择适合自己的。

选择柔和的、中性色调

避免强烈的纯色，纯色（如纯红、纯蓝）通常会让用户感到刺眼或疲劳，尤其在大面积使用时。可以选择稍微柔和一些的色调，如淡蓝色、浅灰色等。中性色如灰色、米色、浅蓝色等中性色常常作为通用的背景色，它们不会抢走内容的注意力，也容易与其他颜色搭配。

考虑用户模式（深色模式 vs. 浅色模式）

浅色模式：大多数用户使用的默认模式，白色或浅灰色常见为背景色。适合白天或光线较强的环境。

深色模式：越来越多的用户喜欢在晚上或光线较弱的环境下使用深色模式。深灰色、黑色等背景色可以减轻眼睛疲劳。

https://tailwindcss.com/

利用色彩心理学

蓝色：令人平静和信任，适合金融、健康等行业。
绿色：与自然、环保相关，适合健康或生态类设计。
黄色：有警示或引人注意的效果，但大面积使用时需谨慎。
红色：代表紧急、热情、能量，但大面积使用时需谨慎。
中性色（灰色、米色等）：通常作为背景色或辅助色，提供稳定的视觉基础。

Ant Design 主题蓝色 https://ant.design/docs/spec/colors-cn

在 UI 设计中，选择 Primary Color（主色）、Secondary Color（次色）和 Tertiary Color（辅助色）是确保界面视觉一致性和美观度的关键步骤。这些颜色通常会影响品牌的呈现、用户的情感体验以及整体的视觉层次。下面详细介绍这些颜色的选择原则和方法：

Primary Color（主色）

主色是品牌或界面的主要颜色，通常是整个设计的视觉基调，视觉上最突出的颜色。最常用于按钮、链接、导航栏等重要元素。主色应反映项目的核心情感。

Secondary Color（次色）

次色是用来辅助主色的颜色，它通常用于次要操作或需要引导用户关注的区域。次色应与主色形成适度对比，同时保持整体设计的一致性。过强的对比可能会让用户分心，而过弱的对比则可能让界面显得平淡。次色应能适应不同的场景，例如可以用在次要按钮、标签等地方。

Tertiary Color（辅助色）

辅助色是第三层次的颜色，通常用来为界面添加细节和深度。可以用于提示信息、图标、边框、背景等非核心元素，增加设计的丰富性。辅助色不应抢夺主色和次色的视觉注意力，但仍需要有足够的辨识度，帮助用户区分界面中的不同区域。

Surface (表面颜色)

表面颜色通常用作界面背景的基础色或主要表面。它是用户界面中最常见的颜色，用于页面的主要区域、卡片的背景或内容的承载区域。通常比较中性或淡雅，以便其他元素能够清晰地显示在其上。Surface 颜色是设计中各个组件的基础层次，为其他元素提供了背景。

Surface Container (表面容器颜色)

表面容器颜色用于容纳内容的组件，如卡片、对话框或弹出窗口的背景。它为这些容器提供了与基础表面不同的颜色，以便这些组件能够从背景中凸显出来。通常比 Surface 颜色更深或更浅，以提供足够的对比度，但不会过于鲜艳。它的目的是将内容从页面的主要表面中区分开，同时保持整体的一致性。

字体规范

在设计领域，字体大小规范是确保文本在不同屏幕上具有一致性和可读性的重要部分。常见的字体大小规范涉及标题、正文、辅助文字等。以下是字体大小规范的常见标准，适用于网页设计和移动应用设计。

常用字体层级

标题字体大小规范：

H1: 32px - 48px（主要用于页面主标题，通常是最大字体）
H2: 24px - 32px（用于二级标题，页面重要分节）
H3: 20px - 24px（用于三级标题或分节的标题）
H4: 18px - 20px（小节标题或子标题）
H5: 16px - 18px（次要标题，较小分节）
H6: 14px - 16px（最小标题，用于细分或副标题）

正文和辅助文字规范：

正文 (Body text): 16px - 18px（适合大部分设备的主要文本内容，通常为用户最常阅读的部分）
副标题 (Subtitle): 14px - 16px（可以用于正文的解释或补充说明）
次要文本 (Secondary text): 12px - 14px（用于提示、注释、次要信息等）
小注释/标签 (Caption/Label): 10px - 12px（用于提示、辅助说明、图片说明等）
按钮文本 (Button text): 14px - 16px（根据按钮重要性可适当调整）
主导航项: 16px - 18px
次导航项: 14px - 16px（如二级下拉菜单中的子项）
徽标文字 (Logo Text): 18px - 24px（如果徽标是文本）
辅助文本/标签: 12px - 14px（例如通知标志、说明等）

字重（Font Weight）

导航栏中的字体通常需要更高的可见度和区分度，字重（font weight）在这里起着重要作用：

主导航项: 500 - 700（Medium 到 Bold）
次导航项: 400 - 500（Regular 到 Medium）
徽标文字: 700（Bold），特别是品牌名称或标识。
辅助文本/标签: 400 - 500（Regular 到 Medium）

UI 组件库

我们可以选择合适的前端组件库，这些组件库都是有一定的设计规范以及设计原色的。如 Material Design、Ant Design、Element UI、Chakra UI 等。

设计工具推荐

设计工具

Figma（https://www.figma.com）：一款功能强大的协同设计工具，支持实时多人协作，非常适合UI设计和原型制作。
Adobe XD：Adobe旗下的设计工具，支持UI/UX设计和原型制作，适合设计与开发团队的协同工作。
Material Design（https://m3.material.io）：Google 提供的 UI 设计系统，内含丰富的组件库和设计原则，适用于Web和移动端。
Dribbble（https://dribbble.com）：一个创意设计社区，设计师们可以展示作品、寻找灵感，并与同行交流合作的平台。

配色工具

Color Hunt（https://colorhunt.co）：提供大量社区生成的配色方案，可以根据主题、情感、趋势选择配色。

图标资源

Iconfont（https://www.iconfont.cn）：是一款由阿里巴巴推出的图标管理和矢量图标库平台，开发者可以通过它方便地生成和管理网页或移动端项目所需的图标字体文件。
Noun Project（https://thenounproject.com）：拥有海量的免费和付费图标资源，支持 SVG 和 PNG 格式，适合在设计中快速获取标准化的图标。
Iconify（https://icon-sets.iconify.design）：支持多种开源图标库（包括 Material Icons、Font Awesome 等），可以作为图标的一站式解决方案。

字体管理和排版工具

Google Fonts（https://fonts.google.com）：一个免费的字体资源库，提供了多种适用于 Web 和 UI 设计的免费字体。

动效设计工具

LottieFiles（https://lottiefiles.com）：专门用来设计和使用 Lottie 动效的工具，支持将动效导入到 Web 和移动应用中。
Haiku Animator：一个用来创建交互式 UI 动画的工具，支持实时导出代码到 React、Vue 等前端框架。

资源推荐

Make your ideas look awesome, without relying on a designer：https://www.refactoringui.com

书籍：写给大家看的设计书

最佳实践-配色方案

减少选择，将设计系统化。面对数百万种颜色和数千种字体，选择的自由可能反而成为一种负担，使人浪费大量时间在细微决策上。为了避免这种困境，应预先制定设计系统。通过限制选项，比如选择8-10种预先确定的颜色，或定义一组固定的字体比例，设计过程可以更加快速和一致。这样一来，无需每次都去挑选颜色或微调字体大小，从而减少重复决策的时间。系统化不仅能提高工作效率，还能增强设计一致性，避免反复权衡带来的不确定感。例如我们在开发之前先把颜色系统设定好，所有的颜色都从以下颜色中选取，这样不仅能是我们的页面统一，同时减少我们在设计上的思考成本，快速将产品落地。