沒有聽錯(cuò)!10招搞定網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格秘籍
在創(chuàng)建網(wǎng)站過程中,我們需要保證設(shè)計(jì)前后一致,并符合業(yè)務(wù)目標(biāo),同時(shí)還要盡全力為用戶打造有趣的使用體驗(yàn)。
為了確保整個(gè)團(tuán)隊(duì)在設(shè)計(jì)網(wǎng)站各個(gè)組成部分或在改善開發(fā)人員設(shè)計(jì)成果時(shí)彼此之間能夠充分協(xié)調(diào)一致,你需要編寫一份設(shè)計(jì)文檔或web設(shè)計(jì)風(fēng)格指南作為指導(dǎo)。
風(fēng)格指南能夠保證不同的頁(yè)面共同擁有一套核心的體驗(yàn)效果。另外,其還有助于保證未來的開發(fā)或第三方創(chuàng)作工作不偏離最初的品牌路線,能夠與整體品牌保持一致。
圖趣網(wǎng)帶領(lǐng)大家深入地探討一下如何針對(duì)你的項(xiàng)目編寫一份有效的web設(shè)計(jì)風(fēng)格指南。
風(fēng)格指南是什么?
風(fēng)格指南是指一套相關(guān)預(yù)設(shè)計(jì)元素、圖形和規(guī)范的集合,其用途是保證負(fù)責(zé)網(wǎng)站不同部分工作的設(shè)計(jì)師或開發(fā)人員之間保持協(xié)調(diào)一致,并最終打造出核心化的體驗(yàn)。
Airbnb UI Toolkit – Web by Derek Bradley
重要意義何在?
當(dāng)多名設(shè)計(jì)師共同致力于同一大型網(wǎng)站或web應(yīng)用的工作時(shí),務(wù)必要保證他們不會(huì)過多根據(jù)個(gè)人的喜好對(duì)工作內(nèi)容進(jìn)行闡述或改變、調(diào)整風(fēng)格樣式。在開發(fā)階段,預(yù)先設(shè)定好的網(wǎng)站元素可以讓開發(fā)人員拿來直接并反復(fù)使用。另外,這樣還可以減輕工作量,因?yàn)樗麄兡苁虑翱吹叫枰帉懘a的元素,心里對(duì)最終成果的樣子有一定的預(yù)期。
為了讓開發(fā)人員的工作更輕松,設(shè)計(jì)師應(yīng)該負(fù)責(zé)設(shè)計(jì)所有可能要用到的交互內(nèi)容,例如鼠標(biāo)懸浮、單擊、訪問及其他按鈕、標(biāo)題和鏈接等的狀態(tài)。
編寫web設(shè)計(jì)風(fēng)格指南
1. 研究品牌
首先,你需要對(duì)品牌展開研究,理解其含義,了解品牌背后的意義,與公司團(tuán)隊(duì)進(jìn)行溝通,并了解公司的愿景、使命和價(jià)值觀。為了保證你所編寫的風(fēng)格指南能夠在視覺和情感上正確彰顯出公司形象,一定要深入挖掘品牌。
作為一名設(shè)計(jì)師,如果你不會(huì)寫代碼,那么可以打開Photoshop,給文檔擬定一個(gè)標(biāo)題,并對(duì)文檔的性質(zhì)和用途進(jìn)行一下簡(jiǎn)短的說明。
如果你會(huì)寫代碼,那么最好使用預(yù)編程的資源創(chuàng)建一個(gè)html文檔,以便在后期直接使用。
2. 限定字體
根據(jù)Oliver Reichenstein的理論,web設(shè)計(jì)中95%的工作量都集中在字體上。
字體的重要意義在于其是訪客和網(wǎng)站之間最為關(guān)鍵的溝通工具之一。
確定層級(jí)次序并提供對(duì)應(yīng)的說明。首先是標(biāo)題樣式:h1、h2、h3、h4、h5和h6。然后是正文文案:粗體和斜體等變化。考慮一下需要用于小型鏈接、簡(jiǎn)介文字等內(nèi)容的自定義文案。提供字體系列、粗細(xì)和顏色等。
by Zech Nelson
3. 調(diào)色板
人類能夠感知不同的顏色并將色調(diào)與自己所熟知的品牌相互聯(lián)系起來,神奇吧!舉例來說,一提到可口可樂,你一定會(huì)首先想到紅色。
首先在風(fēng)格指南中設(shè)定網(wǎng)站內(nèi)使用最多的主色調(diào),主色應(yīng)該包含不多于三種陰影。但是在有的情況下,你可能還需要使用二級(jí)甚至三級(jí)顏色來呈現(xiàn)用戶界面,因此不要忘了對(duì)這些顏色進(jìn)行設(shè)定。另外還需要加入白色、灰色和黑色等中性顏色以便讓主品牌顏色更加突出。
Guest Center color palette by Chloe Park
4. 語(yǔ)言
這里所說的語(yǔ)言實(shí)際上就是指文案。如前所述,在開始編寫風(fēng)格指南之前你已經(jīng)對(duì)品牌進(jìn)行了研究,而且發(fā)現(xiàn)目標(biāo)品牌的風(fēng)格是年輕、潮流。那么如果沒有現(xiàn)成的文案語(yǔ)言方向,你就需要進(jìn)行設(shè)定。在這方面,你可以提供一個(gè)示例來表現(xiàn)語(yǔ)言必須既專業(yè)又有趣,同時(shí)還要熱情。例如,你可以說“貌似你碰到了網(wǎng)上廣為流傳的404錯(cuò)誤”來取代死氣沉沉的“出現(xiàn)404錯(cuò)誤”。這樣的語(yǔ)言能表現(xiàn)出網(wǎng)站并不具有太強(qiáng)的商業(yè)氣息。有時(shí)候亮點(diǎn)就隱藏于細(xì)微之處。
5. 圖標(biāo)
圖形標(biāo)記已有幾千年的歷史,在文字和語(yǔ)言出現(xiàn)之前就已經(jīng)存在。在項(xiàng)目中善用圖標(biāo)能夠讓訪客一眼就明白當(dāng)前的情況以及下面將要出現(xiàn)什么情況。另外,恰當(dāng)?shù)膱D標(biāo)相比色調(diào)、文案和圖形更能夠體現(xiàn)出目標(biāo)內(nèi)容的背景。在使用圖標(biāo)時(shí),要想想目標(biāo)受眾是誰(shuí),他們的宗教和背景情況如何,切勿造成他們的誤解。還要說的是,仔細(xì)思考品牌及其所代表的價(jià)值,千萬(wàn)別犯在大型銀行網(wǎng)站上使用手繪風(fēng)格圖標(biāo)這種錯(cuò)誤。
Iconfinder 是幫助你尋找圖標(biāo)的最佳工具
NounProject 使用圖標(biāo)打造出了通俗易懂的視覺語(yǔ)言
6. 圖片
圖片比千言萬(wàn)語(yǔ)更有說服力。你所使用的圖片一定要能夠代表網(wǎng)站的風(fēng)格和方向。再?gòu)?qiáng)調(diào)一遍,一定要仔細(xì)考慮品牌的價(jià)值和公司的使命。例如,某個(gè)有關(guān)水源慈善的網(wǎng)站使用極具沖擊力且情感強(qiáng)烈的慈善類圖片呼吁人們思考擁有水、食物、電力和教育等生活必需品是多么幸運(yùn)。
可以免費(fèi)獲取圖片的不錯(cuò)網(wǎng)站:16個(gè)尋找最佳免費(fèi)圖片素材的好地方
7. 表單
表單是網(wǎng)站或web應(yīng)用表現(xiàn)其交互和動(dòng)態(tài)性,并讓用戶能夠輸入數(shù)據(jù)以便你后期處理并開展相關(guān)工作的關(guān)鍵所在。
務(wù)必要構(gòu)建起一套層級(jí)體系并收納一切可能來自表單的反饋——主動(dòng)反饋、鼠標(biāo)懸浮反饋并加入錯(cuò)誤、警告和成功提示(包括密碼強(qiáng)度太弱、郵件地址無(wú)效或簡(jiǎn)單的“郵件已發(fā)送”消息)。
8. 按鈕
按鈕是顏色、表單和語(yǔ)言的組合。你可以依靠上面介紹的且已經(jīng)創(chuàng)建好的資源,使用不同的設(shè)計(jì)方案打造外觀統(tǒng)一的功能性按鈕。
9. 空間調(diào)整
空間調(diào)整為什么也要收錄在風(fēng)格指南里?實(shí)際上空間調(diào)整是風(fēng)格指南當(dāng)中非常重要的一個(gè)部分。在對(duì)空間調(diào)整方式進(jìn)行界定時(shí),可以采用規(guī)定網(wǎng)格布局的方式,也可以對(duì)標(biāo)題、按鈕、圖片、表單等元素之間的空間距離進(jìn)行分門別類的規(guī)定。
空間調(diào)整的重要意義在于其能夠給各個(gè)元素提供更多的表現(xiàn)空間,空間使用的協(xié)調(diào)一致能夠讓網(wǎng)站看起來更加整齊、專業(yè)。
10. 注意事項(xiàng)
最后要說的是:把注意事項(xiàng)這一節(jié)做成常見問題解答的形式,展現(xiàn)出最常見的錯(cuò)誤類型,并給出預(yù)期結(jié)果作為參考示例。
Twitter brand assets and guidelines
示例
下面是一些優(yōu)秀的風(fēng)格指南示例,希望能夠在你打造自己的指南時(shí)帶來靈感。但要注意,這些指南與目標(biāo)公司的架構(gòu)、愿景、使命和價(jià)值觀緊密相聯(lián),其中某些選擇可能與你的工作沒有關(guān)系,所以不要盲目照抄。
Spotify – 合作伙伴品牌指南(PDF)
Dropbox 品牌及Logo
Kickstarter 風(fēng)格指南
Lonely Planet設(shè)計(jì)指南
Find指南–尋找品牌資源的最快捷方式
結(jié)束語(yǔ)
研究編寫風(fēng)格指南的目標(biāo)品牌是重中之重,一定要正確理解設(shè)計(jì)中的不同部分,保證風(fēng)格指南前后一致,并且要考慮到把設(shè)計(jì)轉(zhuǎn)變?yōu)閷?shí)際成品過程中可能出現(xiàn)的全部情況。
本文地址:http://m.likemindfilms.com/tutorial/di2395.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏