來自 Apple、Google 和 Starbucks 等熱門公司的 10 個數字設計和風格指南插圖

如果您曾經想知道 Apple 的設計師在最終構建 iOS 時是如何定義 iOS 的每一個小方面的，那麼您可能是在合適的位置。

隨著技術創新的不斷發展，網頁設計繼續變得更加正式。 全球網頁設計人員和開發人員需要編寫能夠從筆記本電腦無縫轉換到手機產品的代碼，使網站導航易於理解，並創新其他網站功能——這些都是企業在數字設計指南中標準化的因素。

電子設計指南對品牌在網絡上的總體形象和記憶力變得更加實用，因為它們為公司網絡顯示屏建立了預期和基準。 它們對於必須提供一流用戶考驗的網站和產品特別重要。

在這篇文章中，我們將深入探討數字類型指南的詳細內容，並向您展示一些來自知名企業的令人印象深刻的插圖，這些插圖已經正確完成。

這種風格的時尚信息將作為一本手冊來處理，為公司的數字存在設定風格和設計標準。 其主要意圖是為品牌名稱生成通用樣式類型，並在所有渠道和媒體、您建立品牌的地點、調色板、排版、圖像建議等方面保持一定的規律性。

與封裝公司徽標、使命主張、購買者角色和語氣的製造商時尚指南不同，網頁設計設計和風格指南以數字呈現為中心，如 UX/UI。

但是，作為一名用戶體驗設計師，我一直很好奇，你能在蘋果、谷歌和星巴克等有影響力的供應商的數字時尚指南中找到什麼？

不管你有沒有感覺，很多供應商都讓這些細節可以公開獲得——他們只是真的很難找到它。 因此，每次我偶然發現一個單曲時，我都會將其加入書籤。 以下是我發現的一些最好的。

出色的數字風格指南示例

1.蘋果iOS

Apple 的設計和風格指南特別令人興奮，因為它涉及如何設計一個完整的功能方法。 Monterey 是 Apple OS X 的最新版本之一，它的用戶界面比其前身 Yosemite 更加簡化。 蘋果公司通過非常好的圖形比較展示了這種微妙而明顯的區別，然後繼續討論為運行系統佈局的每個單獨方面提供動力的基本原理。 它為您提供了了解設計師思想的窗口。

2.谷歌：材料佈局

谷歌開創了一種被稱為產品結構的設計和風格時尚，它存在於擬物化設計和風格（漸變、紋理、溫和元素）和平面風格（簡單、多彩、幾何）之間的混合體。在實現這一目標時，他們融合了積極的與每一個設計和風格設計相關的方面，儘管避免了負面影響。

因為谷歌幾十年來一直致力於產品風格，你現在可能已經在每天的基礎上與它進行交互——谷歌日曆應用程序，任何人？ 這本設計和風格手冊詳細說明了材料設計是什麼以及 Google 如何使用它。 我不得不說，它是我在任何時候都遇到過的最好的類型指南之一。

3. 星巴克

這只是我看過的最簡約的設計和風格指南之一——但是，它包含了大量的實際事實。 它非常強調代碼，​​您可以解釋它是由建設者為建設者構建的。 它缺乏與品牌名稱相關的元素，因此它介於網站設計手冊和代碼庫之間。

4. 阿特拉斯

Atlassian 為其建模的商品套件是巨大的——因此，自然而然地，他們有一個巨大的時尚指南。 從基礎的東西（如調色板和排版）到組件（如表格和工具提示）再到成熟的模式庫，這本指南幾乎包含了您從這種尺寸的產品中所依賴的所有東西。

最重要的是，驅動完整類型手冊的基本原理總結為住宅網頁上的 3 個看似簡單的條件。

5. Mozilla

本電子設計教程主要關注品牌和傳播。 但隨著 Mozilla 最近獲得“隱私和開放的萬維網”策略，看到他們如何在設計中復制這一點令人驚訝。

Mozilla 的主頁在概述其 UX/UI 應該如何被視覺障礙或殘疾的男性和女性訪問方面也做得非常出色——一件具有包容性和重要的事情將變得更具革命性。

6. 緩衝

Buffer 的類型指南小而簡潔，可能從網格通過模態全部在一個位置。 這是一個令人愉快的提醒，如果您的電子時尚教程傳達了所有理想點，它就不必華而不實。 尋找起點的公司可以考慮 Buffer 的簡單設計指南因素中的註釋，並從那裡構建他們的產品。

7. 叫喊

如果您正在尋找可靠的互聯網網站設計和風格指南實例，Yelp 已經獲得了包括在內的內容。 它不僅完整，而且將其原子設計程序解釋為一本食譜，並將網站組件劃分為構成菜餚的物質。

這個細節應有盡有：排版、佈局、品種、容器、導航和每一塊的代碼片段。 他們很好地解釋了每個元素是什麼，真正應該在哪裡使用，以及應該如何執行。

8. GOV.不列顛群島

英格蘭的政府解決方案網站通常被認為是優質 UX 的主要實例。 為什麼？ 因為它具有簡單易用的風格和設計，可以容納過多的信息和事實。

如果您對什麼可以構成一個乾淨而強大的佈局感興趣（提示：它通常從純色使用、排版和間距開始），那麼 GOV.UK 的字體手冊值得一瞥。 非常像互聯網站點，它非常簡單但非常有啟發性。

9. DeviantArt

新的 DeviantArt 風格信息是獨家的，因為它真的不僅僅是一種信息——它是一種知識。 它講述了一個故事，並利用大膽的全幅視覺效果讓人們沉浸在 DeviantArt 品牌的情感體驗中。 也就是說，它嚴格來說是一本品牌模型指南，所以只有顏色和排版這樣的產品才會被塗上。

10. Disqus

顏色、圖標、排版和徽標...... Disqus 將這些信息保留得更短更甜美。 但這一切都可以以一種非常愉快、有條理的方式提供。 這本指南可以作為“開始的地方”的絕佳實例，因為它觸及了所有基本面。

經驗影響製作您自己的手冊？

現在它可以成為您的開關。 通過利用企業中的電子類型教程，您可以將品牌的設計語言傳達給內部設計師、組織、營銷夥伴甚至客戶。

從標準的基礎因素（陰影、排版、徽標、圖像）開始，結合一些使用建議（“做而你不應該做”），甚至在需要時加入一些網絡部分（模塊、模板、代碼片段。使用其他提供商的示例向最好的學習。您的員工將很快制定出常規模式。