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

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

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

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

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

它為什么如此重要？

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

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

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

1.研究品牌

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

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

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

2.定義排版

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

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

3.調(diào)色板

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

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

4.語音

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

5.圖像學(xué)

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

6.意象

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

7.表格

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

確保建立層次結(jié)構(gòu)并包括來自表單的可能反饋——活動、懸停、添加錯誤、警告和成功消息，包括密碼太弱、電子郵件無效或簡單的成功消息，例如“電子郵件已發(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)品時的所有可能場景。

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)榆林,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

標(biāo)題名稱：網(wǎng)站建設(shè)中如何創(chuàng)建網(wǎng)頁設(shè)計(jì)風(fēng)格指南
網(wǎng)址分享：http://jinyejixie.com/article24/egieje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站改版、網(wǎng)站策劃、微信小程序、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)