如何創(chuàng)建網(wǎng)頁設(shè)計風(fēng)格指南?

　　如果您的網(wǎng)站需要經(jīng)常更新，或者很多人都需要維護或更新，那么最好使用網(wǎng)頁設(shè)計風(fēng)格指南。這有助于確保與您的網(wǎng)站打交道的每個人都在同一標(biāo)準(zhǔn)下，并了解如何使所有內(nèi)容保持一致。但是，到底什么是網(wǎng)頁設(shè)計風(fēng)格指南?這意味著什么?以及如何為自己創(chuàng)建一個?這些是我們旨在在此處回答的問題。

　　什么是網(wǎng)頁設(shè)計風(fēng)格指南?

　　在詳細(xì)介紹如何創(chuàng)建樣式指南之前，讓我們花一些時間來探索它們的實際含義。一個網(wǎng)站的設(shè)計風(fēng)格指南是在您的網(wǎng)站一個頁面，列出了進入創(chuàng)建一個新的頁面或文章對您的網(wǎng)站的其余部分的一切。這包括商標(biāo)圖形，徽標(biāo)，字體和字體大小，文本和背景色，以及與網(wǎng)站更新和內(nèi)容創(chuàng)建有關(guān)的任何其他內(nèi)容。

　　當(dāng)您的網(wǎng)站建設(shè)團隊有多個設(shè)計師或開發(fā)人員時，這一點尤其重要。這樣可以確保每個人都在同一規(guī)范下工作。另外，它實際上可以簡化開發(fā)，因為您可以參考此樣式指南，以更快，更高效地創(chuàng)建新頁面。

　　如何創(chuàng)建網(wǎng)頁設(shè)計風(fēng)格指南

　　以下是您為自己創(chuàng)建網(wǎng)頁設(shè)計樣式指南所需采取的步驟：

　　1.熟悉品牌

　　無論您是為自己的網(wǎng)站還是為其他網(wǎng)站創(chuàng)建樣式指南，相同的原則仍然適用：您需要花一些時間來評估品牌的含義。這意味著，了解您的目標(biāo)受眾，了解公司的價值，并對如何形象地表示具有扎實的想法。如果公司過去曾經(jīng)對某些設(shè)計進行過A / B測試，那么現(xiàn)在是時候利用該信息來創(chuàng)建更強大，更有效的樣式指南。

　　2.選擇顏色

　　在評估品牌時，您需要考慮顏色。如果公司已經(jīng)有了調(diào)色板，那么他們可以與之合作—完美。在樣式指南中添加顏色的十六進制代碼。確保將此信息細(xì)分為文本，鏈接，懸停鏈接，背景，按鈕等類別。明確應(yīng)在何處使用哪種顏色。

　　3.選擇并識別版式

　　除了顏色之外，您還需要弄清楚應(yīng)使用的字體(以及應(yīng)在何處使用)。在您的網(wǎng)頁設(shè)計風(fēng)格指南中，清楚地標(biāo)識字體名稱，大小和行高。這使將來的設(shè)計師可以非常輕松地重新創(chuàng)建網(wǎng)站的外觀。更好的是，創(chuàng)建一個Photoshop模板，其中將這些元素設(shè)置為預(yù)設(shè)或標(biāo)識為文件本身內(nèi)的注釋。

　　您應(yīng)盡一切努力消除此處的猜測。

　　4.建立內(nèi)容網(wǎng)格

　　您應(yīng)該添加到網(wǎng)頁設(shè)計樣式指南中的另一件事是創(chuàng)建內(nèi)容網(wǎng)格。這是確定頁面和博客文章的布局方式的理想方法。展示圖片和圖形應(yīng)放置在文本中的位置。您確實需要這樣做，以了解如何分隔內(nèi)容。

　　現(xiàn)在，博客和頁面模板可以解決其中一些問題。即使這樣，將這些信息包括在樣式指南中仍然是一個好主意。

　　5.設(shè)置照片規(guī)格

　　您可以做的另一件事是設(shè)置照片規(guī)格。例如，許多網(wǎng)站會將過濾器或效果應(yīng)用于博客文章中包含的圖像。因此，如果您想確保管理網(wǎng)站內(nèi)容的人都知道如何使所有內(nèi)容保持一致，則需要在網(wǎng)頁設(shè)計風(fēng)格指南中注明這些細(xì)節(jié)。

　　確定每個圖像應(yīng)遵循的規(guī)格，包括圖像高度，寬度，濾色器，不透明度以及是否應(yīng)添加文本。如果您希望在圖形中包含文本，請確保也標(biāo)注出字體，樣式，大小和顏色規(guī)格(如上所述)。

　　6.標(biāo)志規(guī)格

　　我們在這里討論的最后一件事，您的指南中絕對必須包含有關(guān)徽標(biāo)的信息?；諛?biāo)也許是您的品牌和網(wǎng)站中最可識別的部分，因此在此處進行討論非常重要。

　　徽標(biāo)規(guī)范要求包括最小尺寸以及各種不同的徽標(biāo)樣式。對于小空間，您應(yīng)該有一個文本選項和一個圖形選項。對于較大尺寸的選項，帶有標(biāo)語的徽標(biāo)可能也是一個好主意。

　　您還應(yīng)提供具有不同背景的徽標(biāo)，包括透明徽標(biāo)。這樣，無論背景是什么，您的徽標(biāo)都將看起來很棒。這些徽標(biāo)選項中的每一個都應(yīng)包含在樣式指南頁面本身中，以便可以快速訪問和引用它們。

　　8個很棒的網(wǎng)頁設(shè)計風(fēng)格指南示例

　　既然我們已經(jīng)介紹了您的網(wǎng)頁設(shè)計樣式指南中應(yīng)該包含的內(nèi)容，下面讓我們看一些在展示這些指南的外觀和樣式方面確實非常出色的示例。

　　Material.io

　　Material.io樣式指南很全面。它分解了網(wǎng)站外觀的各個方面。它包含有關(guān)主題，圖標(biāo)，調(diào)色板，版式，形狀甚至聲音的信息。

　　MailChimp

　　MailChimp樣式指南非常簡單明了，這正是您應(yīng)該追求的。它包括屏幕左側(cè)的菜單選項，您可以選擇這些菜單選項，包括顏色，數(shù)據(jù)可視化，網(wǎng)格，類型，按鈕，對話框等。

　　Lonely Planet

　　Lonely Planet提供了另一個很棒的網(wǎng)頁設(shè)計風(fēng)格指南以供參考。它的主要功能是調(diào)色板，圖標(biāo)，UI組件，JS組件，小部件和CSS實用程序。

　　Yelp風(fēng)格指南

　　Yelp風(fēng)格指南甚至更重要。它提供清晰的字體信息，顏色，布局信息，鏈接，按鈕，導(dǎo)航選項等，使使用Yelp的人們更容易制作頁面和更新內(nèi)容。

　　A11Y Style Guide

　　您可能要參考的另一種樣式指南是A11Y編寫的指南。該指南包括有關(guān)如何格式化名片，表格，媒體，導(dǎo)航的信息，并且還提供了一些其他資源。

　　Barnard Levit驗光師

　　Barnard Levit驗光師提供了一個超簡單的網(wǎng)頁設(shè)計樣式指南，可以幫助您完成工作。它提供了完整的排版詳細(xì)信息，包括標(biāo)題，列和項目符號，以及有關(guān)如何格式化表格，表單和按鈕的信息。此外，它涵蓋了如何處理圖像，視頻以及網(wǎng)站的許多其他方面。

　　Ben Brignell風(fēng)格指南

　　Ben Brignell的風(fēng)格指南在美學(xué)上非常令人愉悅。它提供有關(guān)公司顏色(帶有十六進制代碼)，版式，塊引用，項目符號，按鈕，鏈接，視頻，圖像等的信息。

　　Beeline設(shè)計系統(tǒng)

　　Beeline設(shè)計系統(tǒng)網(wǎng)站上的樣式指南是另一個可供參考的好例子。它包括此處列出的所有其他樣式指南涵蓋的所有內(nèi)容，但增加了模式，通知和選項卡，以進行額外的衡量。

　　總結(jié)

　　到目前為止，您已經(jīng)知道什么是網(wǎng)頁設(shè)計風(fēng)格指南。您知道為什么需要一個。您已經(jīng)學(xué)會了如何將它們組合在一起，并且已經(jīng)看到了一些目前網(wǎng)絡(luò)上最好的例子?，F(xiàn)在輪到該信息變成實際的東西。如果您的網(wǎng)站缺少樣式指南，那么現(xiàn)在是時候?qū)⑺鼈兘M合在一起了。