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

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

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

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

　　當(dāng)您的網(wǎng)站建設(shè)團(tuán)隊(duì)有多個(gè)設(shè)計(jì)師或開發(fā)人員時(shí)，這一點(diǎn)尤其重要。這樣可以確保每個(gè)人都在同一規(guī)范下工作。另外，它實(shí)際上可以簡化開發(fā)，因?yàn)槟梢詤⒖即藰邮街改?，以更快，更高效地?chuàng)建新頁面。

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

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

　　1.熟悉品牌

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

　　2.選擇顏色

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

　　3.選擇并識(shí)別版式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　Material.io

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

　　MailChimp

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

　　Lonely Planet

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

　　Yelp風(fēng)格指南

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

　　A11Y Style Guide

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

　　Barnard Levit驗(yàn)光師

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

　　Ben Brignell風(fēng)格指南

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

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

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

　　總結(jié)

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