来自 Apple、Google 和 Starbucks 等热门公司的 10 个数字设计和风格指南插图

已发表: 2022-03-21

如果您曾经想知道 Apple 的设计师在最终构建 iOS 时是如何定义 iOS 的每一个小方面的,那么您可能是在合适的位置。

随着技术创新的不断发展,网页设计继续变得更加正式。 全球网页设计人员和开发人员需要编写能够从笔记本电脑无缝转换到手机产品的代码,使网站导航易于理解,并创新其他网站功能——这些都是企业在数字设计指南中标准化的因素。

电子设计指南对品牌在网络上的总体形象和记忆力变得更加实用,因为它们为公司网络显示屏建立了预期和基准。 它们对于必须提供一流用户考验的网站和产品特别重要。

在这篇文章中,我们将深入探讨数字类型指南的详细内容,并向您展示一些来自知名企业的令人印象深刻的插图,这些插图已经正确完成。

使用此免费指南了解如何重新设计您的网站。

这种风格的时尚信息将作为一本手册来处理,为公司的数字存在设定风格和设计标准。 其主要意图是为品牌名称生成通用样式类型,并在所有渠道和媒体、您建立品牌的地点、调色板、排版、图像建议等方面保持一定的规律性。

与封装公司徽标、使命主张、购买者角色和语气的制造商时尚指南不同,网页设计设计和风格指南以 UX/UI 等数字演示为中心。

但是,作为一名用户体验设计师,我一直很好奇,你能在苹果、谷歌和星巴克等有影响力的供应商的数字时尚指南中找到什么?

不管你有没有感觉,很多供应商都让这些细节可以公开获得——他们只是真的很难找到它。 因此,每次我偶然发现一个单曲时,我都会将其加入书签。 以下是我发现的一些最好的。

出色的数字风格指南示例

1.苹果iOS

Apple 的设计和风格指南特别令人兴奋,因为它涉及如何设计一个完整的功能方法。 Monterey 是 Apple OS X 的最新版本之一,它的用户界面比其前身 Yosemite 更加简化。 苹果公司通过非常好的图形比较展示了这种微妙而明显的区别,然后继续讨论为运行系统布局的每个单独方面提供动力的基本原理。 它为您提供了了解设计师思想的窗口。

web style guide examples: Apple iOS

2.谷歌:材料布局

谷歌开创了一种被称为产品结构的设计和风格时尚,它存在于拟物化设计和风格(渐变、纹理、温和元素)和平面风格(简单、多彩、几何)之间的混合体。在实现这一目标时,他们融合了积极的与每一个设计和风格设计相关的方面,尽管避免了负面影响。

因为谷歌几十年来一直致力于产品风格,你现在可能已经在每天的基础上与它进行了交互——谷歌日历应用程序,任何人? 这本设计和风格手册详细说明了材料设计是什么以及 Google 如何使用它。 我不得不说,它是我在任何时候都遇到过的最好的类型指南之一。

web style guide examples: Google Material Design

3. 星巴克

这只是我看过的最简约的设计和风格指南之一——但是,它包含了大量的实际事实。 它非常强调代码,您可以解释它是由建设者为建设者构建的。 它缺乏与品牌名称相关的元素,因此它介于网站设计手册和代码库之间。

web style guide examples: starbucks

4. 阿特拉斯

Atlassian 为其建模的商品套件是巨大的——因此,自然而然地,他们有一个巨大的时尚指南。 从基础的东西(如调色板和排版)到组件(如表格和工具提示)再到成熟的模式库,这本指南几乎包含了您从这种尺寸的产品中所依赖的所有东西。

最重要的是,驱动完整类型手册的基本原理总结为住宅网页上的 3 个看似简单的条件。

web style guide examples: atlassian

5. Mozilla

本电子设计教程主要关注品牌和传播。 但随着 Mozilla 最近获得“隐私和开放的万维网”策略,看到他们如何在设计中复制这一点令人惊讶。

Mozilla 的主页在概述其 UX/UI 应该如何被视觉障碍或残疾的男性和女性访问方面也做得非常出色——一件具有包容性和重要的事情将变得更具革命性。

web style guide examples: mozilla

6. 缓冲

Buffer 的类型指南小而简洁,可能从网格通过模态全部在一个位置。 这是一个令人愉快的提醒,如果您的电子时尚教程传达了所有理想点,它就不必华而不实。 寻找起点的公司可以考虑 Buffer 的简单设计指南因素中的注释,并从那里构建他们的产品。

web style guide examples: buffer

7. 叫喊

如果您正在寻找可靠的互联网网站设计和风格指南实例,Yelp 已经获得了包括在内的内容。 它不仅完整,而且将其原子设计程序解释为一本食谱,并将网站组件划分为构成菜肴的物质。

这个细节应有尽有:排版、布局、品种、容器、导航和每一块的代码片段。 他们很好地解释了每个元素是什么,真正应该在哪里使用,以及应该如何执行。

web style guide examples: yelp

8. GOV.不列颠群岛

英格兰的政府解决方案网站通常被认为是优质 UX 的主要实例。 为什么? 因为它具有简单易用的风格和设计,可以容纳过多的信息和事实。

如果您对什么可以构成一个干净而强大的布局感兴趣(提示:它通常从纯色使用、排版和间距开始),那么 GOV.UK 的字体手册值得一瞥。 非常像互联网站点,它非常简单但非常有启发性。

web style guide examples: gov.uk

9. DeviantArt

新的 DeviantArt 风格信息是独家的,因为它真的不仅仅是一种信息——它是一种知识。 它讲述了一个故事,并利用大胆的全幅视觉效果让人们沉浸在 DeviantArt 品牌的情感体验中。 也就是说,它严格来说是一本品牌模型指南,所以只有颜色和排版这样的产品才会被涂上。

web style guide examples: DeviantArt

10. Disqus

颜色、图标、排版和徽标...... Disqus 将这些信息保留得更短更甜美。 但这一切都可以以一种非常愉快、有条理的方式提供。 这本指南可以作为“开始的地方”的绝佳实例,因为它触及了所有基本面。

web style guide examples: disqus

经验影响制作您自己的手册?

现在它可以成为您的开关。 通过利用企业中的电子类型教程,您可以将品牌的设计语言传达给内部设计师、组织、营销伙伴甚至客户。

从标准的基础因素(阴影、排版、徽标、图像)开始,结合一些使用建议(“做而你不应该做”),甚至在需要时加入一些网络部分(模块、模板、代码片段。使用其他提供商的示例向最好的学习。您的员工将很快制定出常规模式。

出色的主页、博客和登录页面设计示例