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

在設(shè)計網(wǎng)站的不同部分或從開發(fā)人員那里節(jié)省設(shè)計時，確保團隊在同一頁面上的方法之一是創(chuàng)建設(shè)計文檔或web設(shè)計風(fēng)格指南。

為了在不同的頁面之間創(chuàng)建一個連貫的體驗，有一個風(fēng)格指南是有益的。此外，它還有助于確保未來的開發(fā)或第三方生產(chǎn)將遵循品牌指導(dǎo)方針，并將被視為整體品牌的一部分。

Luke Clum已經(jīng)觸及了使用風(fēng)格指南的表面，這是您去年web設(shè)計的第一步，我想更深入地了解一下如何為您的項目創(chuàng)建一個可用的web設(shè)計風(fēng)格指南。

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

風(fēng)格指南是預(yù)先設(shè)計的元素的集合，圖形和規(guī)則設(shè)計者或開發(fā)人員應(yīng)該遵循，以確保獨立的網(wǎng)站片段將是一致的，并將在最后創(chuàng)造一個連貫的體驗。

airbnb風(fēng)格指南

Airbnb UI工具包- Web by Derek Bradley。

它為什么重要?

當(dāng)多個設(shè)計師在一個大的網(wǎng)站或網(wǎng)頁應(yīng)用程序上工作時，確保他們不會過多的解釋，也不會根據(jù)個人喜好改變或調(diào)整風(fēng)格，這是非常重要的。在開發(fā)中，定義了網(wǎng)站的元素使得開發(fā)人員可以很容易地重用這些元素。而且，它可以使它變得更容易，因為他們將獲得他們必須編碼的元素，并將從一開始就看到他們需要什么樣子。



為了使開發(fā)人員的生活更輕松，設(shè)計者的職責(zé)是包括所有可能的交互，如鼠標(biāo)懸停、點擊、訪問等，以及按鈕、標(biāo)題、鏈接等。

創(chuàng)建Web設(shè)計風(fēng)格指南。

1。研究品牌

首先，你需要研究這個品牌，讓你明白它代表什么。了解品牌背后的故事，觀察團隊，了解公司的愿景、使命和價值觀。深入挖掘品牌是很重要的，這樣你的風(fēng)格導(dǎo)向就會在視覺上和情感上代表公司。

如果你是一個不能編程的設(shè)計師，只需打開Photoshop，給你的文檔一個標(biāo)題和一個簡短的說明文檔的內(nèi)容和內(nèi)容。

如果您可以編寫代碼，那么最好使用預(yù)編碼的資產(chǎn)創(chuàng)建一個html文檔，這樣就可以方便地重用它們。

2。定義字體

根據(jù)Oliver Reichenstein的說法，印刷術(shù)是95%的網(wǎng)頁設(shè)計。

因為它是訪問者和網(wǎng)站之間最重要的溝通工具之一，所以你必須正確地進行排版。

設(shè)置層次結(jié)構(gòu)并識別它。標(biāo)題類型有:h1、h2、h3、h4、h5和h6。然后是正文，粗體和斜體?？紤]自定義復(fù)制，它將被用于更小的鏈接，內(nèi)含子文本等等。提供字體系列，重量和顏色。

風(fēng)格指南

Zech Nelson的風(fēng)格指南。



3所示。調(diào)色板

令人難以置信的是，人類是如何感知顏色和與已知品牌聯(lián)系在一起的。想想可口可樂，我敢打賭你現(xiàn)在看到了紅色。

首先為你的風(fēng)格指南設(shè)置主色調(diào)，這將主導(dǎo)你的網(wǎng)站，主導(dǎo)色彩應(yīng)該包括不超過三種顏色。但是，在某些情況下，您需要使用次要的甚至是第三種顏色來說明您的用戶界面，確保您也定義了它們。也包括中性的顏色，如白色，灰色和黑色的主要品牌顏色突出。

調(diào)色板

客人中心調(diào)色板由科洛伊帕克。

4所示。的聲音

我所指的聲音是真實的。你在開始時尚指南之前就已經(jīng)研究過這個品牌，并且發(fā)現(xiàn)這個品牌是年輕和流行的。如果沒有語音的方向，你就必須定義它。它可以是一個簡單的例子，說明聲音必須是專業(yè)的，但有趣和歡迎。而不是說“你有404錯誤”，你可以說“噢，孩子，你破壞了網(wǎng)絡(luò)。”404錯誤。如果聲音更大一些，你就不會那么做了。智慧隱藏在小事情中。

5。圖解

圖標(biāo)已經(jīng)存在了數(shù)千年，比文字和文字還要古老。利用在你的項目中使用圖標(biāo)，因為他們會給訪問者一個即時的想法，告訴他們接下來會發(fā)生什么，以及接下來會發(fā)生什么。選擇正確的圖標(biāo)將提供比顏色調(diào)色板、復(fù)制或圖形更多的內(nèi)容上下文。使用圖標(biāo)時，一定要考慮目標(biāo)受眾、宗教、歷史，避免誤解和誤解。還有一件事要提，想想這個品牌和它的價值，這樣你就不用在大型銀行網(wǎng)站上使用手繪的圖標(biāo)了。

iconfinder

Iconfinder是一個很好的工具，可以為你的項目找到很棒的圖標(biāo)。

圖標(biāo)

“名詞項目”正在構(gòu)建一種任何人都能理解的圖標(biāo)的視覺語言。

6。圖像

圖片能講幾千個單詞。確保包括ima。 本文來源：杰云網(wǎng)絡(luò)，轉(zhuǎn)載請注明出處！如果需要 營銷型網(wǎng)站建設(shè)、 微商城、 小程序商城、 多端小程序 請聯(lián)系我們！