样式牌:所有你需要知道

职业Foundry博客撰稿人John shang

i设计师开始熟悉行业, 你可能听到了很多 关于创建和展示风格牌的话题

但也很有可能你无法确切知道什么是样式牌 时间和方式使用

完全理解样式牌及其应用是关键部分学习UI设计并会给你更多信心 你在一个好地方 开始你的职业生涯

自然地,学习样式瓦的最佳方式是获取亲手创建和解释经验,随着职业增长,这将有机地实现。

同时,我们写下博客, 给你们全面概述样式瓦子, 为何它们重要, 以及如何及何时使用这些瓦子并分享例子参考

可点击菜单跳过任意段 :

  1. 样式瓦是什么
  2. 时尚牌局里有什么
  3. 何时使用样式瓦
  4. 5步中如何使用样式瓦
  5. 密钥外送

开工样式瓦是什么

样式牌可交付设计集样式和资产-颜色、字体-界面元素使用UI设计

样式瓦快速有效通信视觉品牌核心

理解上下文设计全景, 你可以视之为中位有效点, 当情绪棋盘太模糊和计算太字面耗时无法创建时 。

Figma社区例子显示拼色、字体和基本界面元素如何用简单有效样式拼接

Figma社区样式牌示例

源码 :GoStopFigma社区

struitil.es内建设计师使用类似工具比较样式瓦, 指出这些工具与画芯片相似 内建设计师设计房间前得到许可

和内部设计师不设计三个不同房间 客户开场会议 UI设计师不创建三个完全UI模型取而代之的是样式牌向客户展示视觉品牌的精髓

通过这样做,它可以成为UI设计师和客户或所涉任何其他利害相关方之间需要存在的常见视觉语言基础风格牌可帮助点播客户和利害相关者偏好和目标对话,并随着对话进度迭代

除此以外,它们还可以超实用化,作为向UI设计者转工的一种方式,并知道它们能够创建与全局牌相容的设计

现在,我们已经查看什么样式瓦 和什么目的可以服务, 我们将快速查看什么 实际在样式瓦

二叉时尚牌局里有什么

时尚牌局中究竟能写出什么谈点关键元素吧

颜色调色板

调色板是样式牌中最基本元素无论是使用UI元素或单色,都务必粘贴主色调

通常不需要强调显示黑色的所有窗帘,例如UI使用, 但如果你真想显示这些窗帘, 找简洁方式显示它们

字型制作

记住包括重要字体权重并显示大小不要低估字体大小对设计个性的影响-正确调适至关紧要

Jaye Hannah's初创者写字指南极佳起始地

CTA和/或按钮样式

显示按钮和链式示例两三个例子常足够,因为UI中所有交互元素通常都具有一致性样式。

形状布局

不需要用样式牌清晰解释单元布局取而代之,通过将网格布局策略整合到样式牌中并显示元素如何在总体设计中间或对齐

Photography/Illustration

图像在定义你品牌个性方面起巨大作用-别低估这一点决定是否使用摄影图解或混合并相应展示

图标绘制

图标从品牌到品牌大相径庭如果您的牌子有它自己的独有图标设计,请务必将之写进样式牌内外加强触控 令你名牌与众不同

例子来自荷兰设计机构ABNAMRO银行短短几秒内它能传递品牌特征并给你感知网站的外观:

样式牌实例摘自荷兰设计代理层次

源码 :层次博客:为什么制作风格牌子是我们设计过程的一部分

现在你知道什么可以去样式牌, 我们会看什么时候你应该使用样式牌

3级何时使用样式瓦

CourtneyPester在UX集体优异博客表示样式瓦概述创建样式瓦的主要目的是“视觉探索独有美学后先跳头跳进设计一吨高联想模型。”

样式瓦是早期设计探索的极好工具,因为它们允许你试探不同颜色、打字和视觉元素,而不承诺完全设计

向客户或利害相关方显示样式瓦表示在跳入详细工作前可以得到反馈并商定视觉方向

常建建前文中常用视觉语言的起始点

样式瓦不单用于设计探索的初级阶段下五样东西你可能发现 极有用

  • 标识和视觉特征开发

样式瓦对打牌至关重要可使用这些语言帮助建立一致性视觉语言,反映品牌个性与价值向客户和利害相关方介绍不同风格、颜色和打字方式,为您提供平台协同工作,从定义最佳视觉方向

  • 协作通信

因为他们创建平台和共享理解,样式瓦更容易协作和通信视觉引用 人人都能理解并反馈帮助你,像UI设计师一样 向所有人介绍整体美学设计方向

  • 响应自适应设计

样式瓦是一个游戏变换器项目 聚焦响应设计通过创建样式牌不同屏幕尺寸,很容易显示客户端和利害相关方设计适应方式拥有这些能真正聚焦并精简设计过程

  • 设计系统组件库

样式瓦往往是建构设计系统 和组件库的起始点可使用它们开始建立基础视觉元素,这些元素将在不同UI组件中持续使用可定义颜色、排版、按钮样式、图标和更多可重复重复使用

  • 客户端演示和迭代

样式瓦对客户端陈述和迭代既理想又重要而不是压倒客户全模型,你风格瓦将给他们集中表示设计方向加速反馈过程并节省每个人的时间

现在,我们已经理解你需要创建使用样式, 是时候更仔细地研究你应如何使用这些样式了。

4级5步中如何使用样式瓦

创建样式瓦是一个交互设计过程,最有效时与客户或利害相关方有清晰、诚实和定期通信

下方我们概述一些关键步骤 您创建并使用样式瓦时应该经历

记住这些步骤不一定线性-常时,你不得不回跳并重复一或二步-有时不止一次

或超出你范围, 记住你总可以请求管理者或高级同事支持或指导, 或,如果有导师或导师支持或指导。

步骤1:监听

不跳入你的假设制造空间和时间倾听客户或利害相关者,与他们建立关系并理解他们的观点和偏好似乎没有必要,但从长远看会报答: 他们持有有价值的信息 来构造设计方法

步骤2:开关会议和资料收集

召集大家开场会议 帮助大家指向同方向会议也将作为宝贵的信息收集会议请求客户和利害相关方事先填写关键设计方面量身定制调查可帮助你保持工作轨迹并产生丰硕成果

或,您可以在会议中一起处理问题,但选择使用此选项意味着对时钟保持密切监视。

步骤3:解析客户反馈

给自己充裕时间解析所有反馈并汇总形容词下一步,你可识别常见主题模式可将这些主题转换成设计原理,如平衡和聚焦并同时创建视觉提示镜映射理想主题熟悉更多设计原理,退房视觉层次在UX中是什么

步骤4:定义视觉语言

即它实践之地,因为你编织样式牌受主题和视觉元素指导离项目足够近点 信任你的本能 和所收集的信息高级管理者或高级管理者先请求反馈,再与客户端或其他利害相关者分享反馈,如果需要支持的话。

第五步:迭代

最终步骤发生时,样式修改不受布局约束通过展示多样式瓦片,你可以得到极值反馈,这些反馈将决定这些瓦片的进化方式。记住人自然组合选项组合式样式瓦片以精细视觉设计,同时保持对步骤3目标的正确性

既然你已经看到样式瓦 时间和方式使用, let's包装几把钥匙

5级密钥外送

身为UI设计师,样式瓦是你的朋友

并同时提供小作弊表 创建这些表对视觉设计有帮助 帮助理解颜色和形状 与UI元素和其他资产交互

样式瓦是其他设计师、客户和利害相关方的可靠参考点

不仅帮助创建通用视觉语言 推进设计 而且还催化协作和关键设计讨论 并尽快展开比直播网站更容易重置风格牌局

了解如何创建样式牌帮助构建强健品牌,期望你成为UI设计师上方概述的五步进程 帮助你把事物保留在可控可实现块

如果你想多了解UI试一下免费UI短期课程.

如果你喜欢这篇文章,你可能会发现这些趣味

即刻应做

  1. 直接介绍UI设计设计并设计首个带A自由自序UI设计短程.

  2. 加入我们FREEUI实时设计事件同业界专家并阅读 关于UI研究生Florian职业变换面向产品设计

  3. 进化合格UI设计师4-9个月完成工作保证.

  4. 本月,我们提供头100名学生减学费价值达1 425美元脱机-所有职业变换程序书籍应用调用并保护你今天的位置

职业Foundry是什么

职业Foundry网际学校面向面向技术生涯选择程序 并配专家导师教程 并成为准备工作设计师 开发师 分析师

深入了解程序
blog-footer-image