創(chuàng)建網(wǎng)站變得越來越復(fù)雜，通常不是一個(gè)人的工作。確保設(shè)計(jì)的一致性和優(yōu)化以滿足業(yè)務(wù)目標(biāo)并為用戶創(chuàng)造愉快的體驗(yàn)非常重要。

在設(shè)計(jì)網(wǎng)站的單獨(dú)部分或保存開發(fā)人員的設(shè)計(jì)時(shí)，確保團(tuán)隊(duì)在同一頁(yè)面上的方法之一是創(chuàng)建設(shè)計(jì)文檔或網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格指南。

有一個(gè)風(fēng)格指南是有益的，以便在不同的頁(yè)面之間創(chuàng)造一種有凝聚力的體驗(yàn)。它還有助于確保未來的開發(fā)或第三方生產(chǎn)將遵循品牌指南，并將被視為整個(gè)品牌的一部分。

使用樣式指南作為您在網(wǎng)頁(yè)設(shè)計(jì)中的第一步的表面，想更深入地了解如何為您的項(xiàng)目創(chuàng)建可用的網(wǎng)頁(yè)設(shè)計(jì)樣式指南。

什么是風(fēng)格指南？

它為什么如此重要？

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

1.研究品牌

2.定義排版

3.調(diào)色板

4.語音

5.圖像學(xué)

6.意象

7.表格

8.按鈕

9.間距

什么是風(fēng)格指南？

樣式指南是設(shè)計(jì)人員或開發(fā)人員應(yīng)遵循的預(yù)先設(shè)計(jì)的元素、圖形和規(guī)則的集合，以確保單獨(dú)的網(wǎng)站部分保持一致并最終創(chuàng)造有凝聚力的體驗(yàn)。

它為什么如此重要？

設(shè)計(jì)認(rèn)為當(dāng)多個(gè)設(shè)計(jì)師在一個(gè)大型網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序上工作時(shí)，確保他們不會(huì)解釋太多并且不會(huì)根據(jù)個(gè)人喜好改變或調(diào)整樣式是非常重要的。在開發(fā)過程中，定義網(wǎng)站的元素使開發(fā)人員可以輕松地重用這些元素。此外，它可以更容易，因?yàn)樗麄儗@得他們必須編碼的元素，并從一開始就確切地看到他們需要如何看待。

為了讓開發(fā)人員的生活更輕松，設(shè)計(jì)師的職責(zé)是包含所有可能的交互，例如懸停、單擊、訪問和按鈕、標(biāo)題、鏈接等的其他狀態(tài)。

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

1.研究品牌

首先，您需要研究品牌，以便了解它的含義。了解品牌背后的故事，觀察團(tuán)隊(duì)，了解公司的愿景、使命和價(jià)值觀。深入挖掘品牌非常重要，這樣您制作的風(fēng)格指南將在視覺和情感上代表組織。

如果您是不會(huì)編碼的設(shè)計(jì)師，只需打開Photoshop并為您的文檔命名，并簡(jiǎn)要說明文檔的用途和用途。

如果您可以編碼，最好使用預(yù)編碼的資產(chǎn)創(chuàng)建一個(gè)html文檔，以便可以輕松地重用它們。

2.定義排版

您必須正確排版，因?yàn)樗窃L問者與您的網(wǎng)站之間最重要的溝通工具之一。

設(shè)置層次結(jié)構(gòu)并識(shí)別它。有標(biāo)題類型：h1、h2、h3、h4、h5和h6。然后是正文，粗體和斜體的變化。考慮將用于較小鏈接、介紹文本等的自定義副本。提供字體系列、粗細(xì)和顏色。

3.調(diào)色板

令人難以置信的是，人類如何感知顏色并將色調(diào)與知名品牌聯(lián)系起來。想想可口可樂，我敢打賭你現(xiàn)在看到那個(gè)紅色了。

首先為您的網(wǎng)站設(shè)置主要顏色，主要顏色應(yīng)包含不超過三種色調(diào)。然而，在某些情況下，您將需要輔助顏色甚至三次顏色來說明您的用戶界面，請(qǐng)確保您也定義了它們。還包括白色、灰色和黑色等中性色，以使主要品牌顏色脫穎而出。

4.語音

我指的聲音是實(shí)際的副本。在開始風(fēng)格指南之前，您已經(jīng)研究了品牌，發(fā)現(xiàn)品牌年輕且時(shí)尚。如果副本的聲音沒有方向，則必須對(duì)其進(jìn)行定義。這可以是一個(gè)簡(jiǎn)單的例子，因?yàn)樗砻髀曇舯仨毷菍I(yè)的、有趣的和受歡迎的。與其說“你遇到404錯(cuò)誤”，不如說“哦，孩子，你破壞了互聯(lián)網(wǎng)。404錯(cuò)誤?！比绻曇舾髽I(yè)化，你就不會(huì)那樣做。

5.圖像學(xué)

圖標(biāo)已經(jīng)存在了數(shù)千年，比文字和文字還要古老。利用在您的項(xiàng)目中使用圖標(biāo)的優(yōu)勢(shì)，因?yàn)樗鼈儠?huì)讓訪問者立即了解正在發(fā)生的事情以及接下來會(huì)發(fā)生什么。選擇正確的圖標(biāo)將為內(nèi)容提供比調(diào)色板、副本或圖形更多的上下文。使用圖標(biāo)時(shí)，請(qǐng)務(wù)必考慮目標(biāo)受眾、宗教、歷史，以免產(chǎn)生誤解和誤解。還要提到一件事，考慮品牌及其價(jià)值，這樣您就不會(huì)在大型銀行網(wǎng)站上使用手繪圖標(biāo)。

6.意象

圖片能說千言萬語。確保包含定義網(wǎng)站應(yīng)使用的圖片樣式和方向的圖像。再次思考品牌的價(jià)值及其使命。例如，一家水慈善機(jī)構(gòu)使用具有強(qiáng)烈情感、良好事業(yè)和呼吁人類情感的醒目圖像，讓他們有幸擁有水、食物、電力和教育等基本生活商品。

7.表格

表單使您的網(wǎng)站或Web應(yīng)用程序具有交互性和動(dòng)態(tài)性，因此用戶可以輸入數(shù)據(jù)，然后您可以對(duì)其進(jìn)行操作并完成工作。

確保建立層次結(jié)構(gòu)并包括來自表單的可能反饋——活動(dòng)、懸停、添加錯(cuò)誤、警告和成功消息，包括密碼太弱、電子郵件無效或簡(jiǎn)單的成功消息，例如“電子郵件已發(fā)送”。

8.按鈕

按鈕是調(diào)色板、表單和聲音的混合體。依靠這些先前創(chuàng)建的資產(chǎn)來創(chuàng)建具有不同規(guī)定設(shè)計(jì)的一致外觀和功能按鈕。

9.間距

間距如何在樣式指南中？提到間距是非常重要的。它可以是用于布局的網(wǎng)格形式；它可以是標(biāo)題、按鈕、圖像、表單和其他元素之間的間距。

獲得正確的間距很重要，因?yàn)樗鼮樵靥峁┝烁嗟暮粑臻g，并且一致的使用使您的工作看起來有條理和專業(yè)。

結(jié)論

你必須研究你正在為其創(chuàng)建風(fēng)格指南的品牌，確保設(shè)計(jì)的不同部分正確，并確保風(fēng)格指南是一致的，并包括將設(shè)計(jì)轉(zhuǎn)化為工作產(chǎn)品時(shí)的所有可能場(chǎng)景。