網(wǎng)站建設中如何創(chuàng )建網(wǎng)頁(yè)設計風(fēng)格指南發(fā)布者：本站     時(shí)間：2022-04-01 09:04:16

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

 

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

 

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

 

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

 

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

它為什么如此重要？

 

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

1.研究品牌

2.定義排版

3.調色板

4.語(yǔ)音

5.圖像學(xué)

6.意象

7.表格

8.按鈕

9.間距

 

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

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

 



 

它為什么如此重要？

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

 

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

 

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

 

1.研究品牌

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

 

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

 

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

 

2.定義排版

您必須正確排版，因為它是訪(fǎng)問(wèn)者與您的網(wǎng)站之間最重要的溝通工具之一。

 

設置層次結構并識別它。有標題類(lèi)型：h1、h2、h3、h4、h5和h6。然后是正文，粗體和斜體的變化?？紤]將用于較小鏈接、介紹文本等的自定義副本。提供字體系列、粗細和顏色。



3.調色板

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

 

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

 



 

4.語(yǔ)音

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

 

5.圖像學(xué)

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

 



 

6.意象

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

 

7.表格

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

 

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

 

8.按鈕

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

 

9.間距

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

 

獲得正確的間距很重要，因為它為元素提供了更多的呼吸空間，并且一致的使用使您的工作看起來(lái)有條理和專(zhuān)業(yè)。

 

結論

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