Discuz! Board

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 214|回复: 0

创建 UI 风格指南(+Figma 模板)

[复制链接]

1

主题

1

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2024-3-7 16:36:56 | 显示全部楼层 |阅读模式
UI 中的风格指南是什么? 样式指南是记录设计的所有基本元素的文档:颜色的选择、字体(粗细和样式)、排版、按钮类型等等。风格指南可能会很快变得复杂,并在您注意到之前就变成设计系统。 设计系统与风格指南不同。它要复杂得多,包括组件、表和各种类型的状态。我们的重点将放在我之前提到的基本构建块上。让我们详细了解一下。 风格指南的目的是什么? 以目的为导向的决策可以帮助我们确定风格选择背后的原因。它为我们如何向客户展示产品铺平了道路。在开始工作之前,鹰眼观察是必不可少的。





您的目标将激励和启发您寻找各种创造性的方法来使产品的 UI 变得美观。 您公司的愿景、使命和期望也可以帮助您  加拿大电话号码列表 做出以目的为导向的决策。一旦目标驱使您,下一步就是开始工作并构建 UI 风格指南。 如何建立和维护风格指南? 当您开始使用样式指南时,打开一个新的 Figma 文件。开始考虑品牌或企业与您共享的颜色、字体和其他 UI 元素。当您将它们分解并仔细记录在风格指南中时,您将反思许多其他方面,例如图标、按钮和所有基本构建块。 让我们从颜色开始,逐步了解四个基本元素 - 希望通过这些信息,您将能够构建样式指南并根据您的需求进行自定义。 颜色 考虑您的颜色,在指南中使用它们,并确保它们易于使用。至此,您的团队可能已经决定所提供的哪种颜色适合产品的主题。 如果您还没有这样做:任务是选择两种颜色:主色和次要颜色。这两种颜色将成为您产品的主要颜色。这些颜色应该是互补的。











现在您可能会想,不同的颜色怎么样?您将在公司拥有的任何说明性、图形和数据表示目的中使用这些内容。以下是创建调色板并在风格指南中展示它们的步骤。 添加您的主色 在 Figma 文件中,创建一个形状并用主颜色填充它。您可以使用任何您想要的样式: 默认蓝色主色 概述设计状态的颜色 基于此颜色,如果您的团队还没有创建一些基本状态,则您将需要创建一些基本状态:悬停、按下/点击以及可用于其他交互元素(例如搜索栏、切换按钮等)的浅色阴影。一旦你概述了这些,它就会看起来像这样: 分配给设计状态的颜色 对辅助色重复此过程 对辅助颜色也重复此过程,这应该提供对比度和视觉趣味: 分配给状态的辅助颜色 记录文字颜色 在此步骤中,您还将考虑文本颜色。这些也将包括您的暗模式文本。如下所示,您将在黑色背景上使用白色正文和白色副文本。文本颜色通常包括正文、任何副文本、成功颜色和错误状态颜色: 分配给状态的文本颜色 边框、卡片、线条 在此步骤中,您将考虑所有背景、卡片、线条和分隔符颜色。这些通常由多种色调组成,可以以多种方式使用。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|DiscuzX

GMT+8, 2024-11-24 02:13 , Processed in 0.032355 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表