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

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

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

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

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

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

airbnb風(fēng)格指南

Airbnb UI工具包- Web by Derek Bradley。

它為什么重要?

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



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

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

1。研究品牌

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

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

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

2。定義字體

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

因?yàn)樗窃L問(wèn)者和網(wǎng)站之間*重要的溝通工具之一，所以你必須正確地進(jìn)行排版。

設(shè)置層次結(jié)構(gòu)并識(shí)別它。標(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)該包括不超過(guò)三種顏色。但是，在某些情況下，您需要使用次要的甚至是第三種顏色來(lái)說(shuō)明您的用戶界面，確保您也定義了它們。也包括中性的顏色，如白色，灰色和黑色的主要品牌顏色突出。

調(diào)色板

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

4所示。的聲音

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

5。圖解

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

iconfinder

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

圖標(biāo)

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

6。圖像

圖片能講幾千個(gè)單詞。確保包括ima。 本文來(lái)源：智通澤軟件，轉(zhuǎn)載請(qǐng)注明出處！如果需要泊頭網(wǎng)站建設(shè) 泊頭小程序開發(fā) 泊頭微信開發(fā) 泊頭APP開發(fā)請(qǐng)聯(lián)系封經(jīng)理，我們將提供上門服務(wù)！
聯(lián)系方式：手機(jī)：13393374114  座機(jī)：0317-8280288 QQ：958361464  或掃一掃下面二維碼加我微信：