首页 - SNS > 来自苹果、谷歌和星巴克等知名公司的 10 个数字风格指南

来自苹果、谷歌和星巴克等知名公司的 10 个数字风格指南

发布于:2022-09-14 作者:中文财经 阅读:378

如果您想知道 Apple 的设计师在构建 iOS 时如何定义 iOS 中的每一个小元素,那么您来对地方了。

随着技术的不断发展,网页设计继续变得更加正式。Web 设计人员和开发人员需要创建可以从 PC 无缝转换到移动设备的代码,使网站导航易于理解,并创新其他网站功能——这些都是公司在数字风格指南中标准化的元素。

数字风格指南对于品牌在网络上的整体形象和记忆力变得更加有用,因为它们为公司网络展示设定了期望和标准。它们对于需要提供一流用户体验的网站和产品尤其重要。

在这篇文章中,我们将深入探讨数字风格指南的详细内容,并向您展示一些来自知名公司的出色示例。


这种类型的风格指南将被视为为公司的数字存在设定设计标准的手册。其主要目的是为品牌创建通用设计风格,并确保所有渠道和媒体的一致性,您可以在其中建立徽标、调色板、排版、图像指南等。

包含公司徽标、使命宣言、买家角色和语气的品牌风格指南不同,网页设计风格指南以数字呈现为中心,如UX / UI

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

信不信由你,很多公司都公开了这些信息——他们只是不容易找到。所以,每次我偶然发现一个,我都会把它加入书签。这是迄今为止我发现的一些最好的。

真棒数字风格指南的例子

1.苹果iOS

Apple 的风格指南特别有趣,因为它详细说明了如何设计整个操作系统。Monterey 是 Apple OS X 的最新版本之一,其用户界面比其前身 Yosemite 更加简化。苹果通过非常漂亮的图形比较展示了这种微妙而明显的区别,然后继续讨论操作系统设计每个方面背后的基本原理。它为您提供了了解设计师思想的窗口。

网页风格指南示例:Apple iOS

2.谷歌:材料设计

谷歌开创了一种名为 Material Design 的设计风格,它是 Skeuomorphic Design(渐变、纹理、轻元素)和 Flat Design(简单、多彩、几何)之间的混合体。在这样做的过程中,他们结合了与每种设计风格相关的好处,在规避弊端的同时。

因为谷歌已经实践 Material Design 几年了,你可能已经每天都在与它进行交互——谷歌日历应用程序,有人吗?本样式指南详细说明了 Material Design 是什么以及 Google 如何使用它。我不得不说,到目前为止,它是我遇到过的最好的风格指南之一。

网页风格指南示例:Google Material Design

3.星巴克

这是我见过的最简约的风格指南之一——然而,它包含了大量有用的信息。它非常强调代码,你可以看出它是由开发人员为开发人员构建的。它缺乏与品牌相关的元素,因此它在网站样式指南和代码库之间徘徊。

网页风格指南示例:星巴克

4.阿特拉斯

Atlassian 为其设计的产品套件非常庞大——因此,自然而然,他们拥有庞大的风格指南。从基础元素(如调色板和排版)到组件(如表格和工具提示)再到成熟的模式库,本指南几乎包含您对这种尺寸产品的所有期望。

也许最重要的是,整个风格指南背后的基本原理在主页上用三个看似简单的术语进行了总结。

网页风格指南示例:atlassian

5. Mozilla

这个数字风格指南主要关注品牌和传播。但是随着 Mozilla 最近采用“隐私和开放网络”的方法,很高兴看到他们如何在设计中反映这一点。

Mozilla 的主页还很好地概述了它的 UX/UI 应该如何被视觉障碍或残疾的人访问——随着技术变得更具创新性,这是具有包容性和必要性的。

网页风格指南示例:Mozilla

6.缓冲

Buffer 的风格指南小而简洁,从网格到模态都集中在一个地方。这是一个友好的提醒,如果你的数字风格指南传达了所有正确的观点,它就不必华而不实。寻找起点的公司可以从 Buffer 的简单样式指南组件中记下笔记,并从那里构建自己的。

网页风格指南示例:缓冲区

7.叫喊

如果您正在寻找网站样式指南的可靠示例,Yelp 已经涵盖了这一点。它不仅详尽,而且将其原子设计系统解释为一本食谱,并将站点元素划分为有助于菜肴的成分。

这一切都有:排版、布局、表单、容器、导航和每个部分的代码片段。他们很好地解释了每个元素是什么,应该在哪里使用它,以及应该如何实现它。

网页风格指南示例:yelp

8. GOV.UK

英格兰的政府服务网站被广泛认为是高质量用户体验的典范。为什么?因为它拥有一个简单易用的设计,可以容纳大量的信息。

如果您对真正干净有效的设计的组成部分感兴趣(提示:它通常从强烈的色彩使用、排版和间距开始),那么 GOV.UK 的风格指南值得仔细研究。就像网站一样,它非常简单但信息量很大。

网页风格指南示例:gov.uk

9. DeviantArt

新的 DeviantArt 风格指南是独一无二的,因为它不仅仅是一个指南——它是一种体验。它讲述了一个故事,并利用大胆的全幅视觉效果让用户沉浸在 DeviantArt 品牌的情感体验中。话虽如此,它严格来说是一个品牌风格指南,所以只涵盖了颜色和排版等项目。

网页风格指南示例:DeviantArt

10. Disqus

颜色、图标、排版和徽标... Disqus 通过本指南使其简短而甜美。但这一切都以一种非常好的、有组织的方式呈现。在创建自己的风格指南时,本指南可以用作“从哪里开始”的一个很好的例子,因为它触及了所有的基础。

网页风格指南示例:disqus

有灵感制作自己的指南吗?

现在轮到你了。通过利用公司中的数字风格指南,您可以将品牌的设计语言传达给内部设计师、代理商、广告合作伙伴甚至客户。

从基本的基础元素(颜色、排版、徽标、图像)开始,添加一些使用指南(“做与不做”),甚至在需要时加入一些 Web 组件(模块、模板、代码片段。使用示例从其他公司向最优秀的公司学习。您的团队将很快推出一致的设计。


二维码

扫一扫关注我们

版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容,欢迎发送邮件至 78616260@qq.com举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

相关文章

  • 你跟上了吗?这是 35-44 岁人群的平均收入

    你跟上了吗?这是 35-44 岁人群的平均收入

    家庭收入和财富随着年龄的增长而发生显着变化。美联储消费者金融调查的数据显示,家庭的收入和资产通常会在中年时增加。对于35-44岁的家庭来说,这是建立财务实力的关...

    2025-11-08

  • 2025年《美国梦》现耗资超过500万美元

    2025年《美国梦》现耗资超过500万美元

    实现美国梦现在的成本刚刚超过 500 万美元。这是 Investopedia 为经典美国中产阶级愿望的八大支柱计算的终生家庭价格标签,从拥有住房和退休,到婚礼、...

    2025-11-08

  • 消费者信心跌至 3 年低点,因为美国人担心停工对经济的影响

    消费者信心跌至 3 年低点,因为美国人担心停工对经济的影响

    对失业和持续价格压力的担忧正在加剧焦虑。密歇根州消费者调查 10 月份对当前经济信心的衡量降至 2022 年 8 月以来的最低水平,当时通胀急剧上升打击了消费者...

    2025-11-07

  • AMD:你快要被压垮了

    AMD:你快要被压垮了

    Advanced Micro Devices, Inc.(纳斯达克股票代码:AMD)在本月早些时候宣布与 OpenAI (OPENAI) 建立大规模多...

    2025-10-27

  • 美股券商入金各方式优缺点之wise(综述版)

    美股券商入金各方式优缺点之wise(综述版)

    最近收到部分没有港卡的宝子想要交易美股入金嘉信或其他美股券商,但是不知道如何入金。其实港美股券商入金方式有很多,每种方式各有优缺点。下面起来总结市面的主流入金方...

    2025-10-26

  • 嘉信账户入金疑问汇总(渔版)含各币种入金

    嘉信账户入金疑问汇总(渔版)含各币种入金

    之前两篇入金大家有很多问题,我有看到的也都有逐个解答,另外有些好心的网友也有补充解答,相信大家对嘉信入金有了一定的了解。受人以鱼不如授人以渔,把问的多的问题汇总...

    2025-10-26

Q:78616260

电话咨询
V:tjgg100