網(wǎng)站建設(shè)中如何創(chuàng)建網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格指南發(fā)布者:本站 時(shí)間:2022-04-01 09:04:16
創(chuàng)建網(wǎng)站變得越來越復(fù)雜,通常不是一個(gè)人的工作。確保設(shè)計(jì)的一致性和優(yōu)化以滿足業(yè)務(wù)目標(biāo)并為用戶創(chuàng)造愉快的體驗(yàn)非常重要。
在設(shè)計(jì)網(wǎng)站的單獨(dú)部分或保存開發(fā)人員的設(shè)計(jì)時(shí),確保團(tuán)隊(duì)在同一頁(yè)面上的方法之一是創(chuàng)建設(shè)計(jì)文檔或網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格指南。
有一個(gè)風(fēng)格指南是有益的,以便在不同的頁(yè)面之間創(chuàng)造一種有凝聚力的體驗(yàn)。它還有助于確保未來的開發(fā)或第三方生產(chǎn)將遵循品牌指南,并將被視為整個(gè)品牌的一部分。
使用樣式指南作為您在網(wǎng)頁(yè)設(shè)計(jì)中的第一步的表面,想更深入地了解如何為您的項(xiàng)目創(chuàng)建可用的網(wǎng)頁(yè)設(shè)計(jì)樣式指南。
什么是風(fēng)格指南?
它為什么如此重要?
創(chuàng)建網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格指南
1.研究品牌
2.定義排版
3.調(diào)色板
4.語(yǔ)音
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)多個(gè)設(shè)計(jì)師在一個(gè)大型網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序上工作時(shí),確保他們不會(huì)解釋太多并且不會(huì)根據(jù)個(gè)人喜好改變或調(diào)整樣式是非常重要的。在開發(fā)過程中,定義網(wǎng)站的元素使開發(fā)人員可以輕松地重用這些元素。此外,它可以更容易,因?yàn)樗麄儗@得他們必須編碼的元素,并從一開始就確切地看到他們需要如何看待。
為了讓開發(fā)人員的生活更輕松,設(shè)計(jì)師的職責(zé)是包含所有可能的交互,例如懸停、單擊、訪問和按鈕、標(biāo)題、鏈接等的其他狀態(tài)。
創(chuàng)建網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格指南
1.研究品牌
首先,您需要研究品牌,以便了解它的含義。了解品牌背后的故事,觀察團(tuán)隊(duì),了解公司的愿景、使命和價(jià)值觀。深入挖掘品牌非常重要,這樣您制作的風(fēng)格指南將在視覺和情感上代表組織。
如果您是不會(huì)編碼的設(shè)計(jì)師,只需打開Photoshop并為您的文檔命名,并簡(jiǎn)要說明文檔的用途和用途。
如果您可以編碼,最好使用預(yù)編碼的資產(chǎn)創(chuàng)建一個(gè)html文檔,以便可以輕松地重用它們。
2.定義排版
您必須正確排版,因?yàn)樗窃L問者與您的網(wǎng)站之間最重要的溝通工具之一。
設(shè)置層次結(jié)構(gòu)并識(shí)別它。有標(biāo)題類型:h1、h2、h3、h4、h5和h6。然后是正文,粗體和斜體的變化。考慮將用于較小鏈接、介紹文本等的自定義副本。提供字體系列、粗細(xì)和顏色。
3.調(diào)色板
令人難以置信的是,人類如何感知顏色并將色調(diào)與知名品牌聯(lián)系起來。想想可口可樂,我敢打賭你現(xiàn)在看到那個(gè)紅色了。
首先為您的網(wǎng)站設(shè)置主要顏色,主要顏色應(yīng)包含不超過三種色調(diào)。然而,在某些情況下,您將需要輔助顏色甚至三次顏色來說明您的用戶界面,請(qǐng)確保您也定義了它們。還包括白色、灰色和黑色等中性色,以使主要品牌顏色脫穎而出。
4.語(yǔ)音
我指的聲音是實(shí)際的副本。在開始風(fēng)格指南之前,您已經(jīng)研究了品牌,發(fā)現(xiàn)品牌年輕且時(shí)尚。如果副本的聲音沒有方向,則必須對(duì)其進(jìn)行定義。這可以是一個(gè)簡(jiǎn)單的例子,因?yàn)樗砻髀曇舯仨毷菍I(yè)的、有趣的和受歡迎的。與其說“你遇到404錯(cuò)誤”,不如說“哦,孩子,你破壞了互聯(lián)網(wǎng)。404錯(cuò)誤?!比绻曇舾髽I(yè)化,你就不會(huì)那樣做。
5.圖像學(xué)
圖標(biāo)已經(jīng)存在了數(shù)千年,比文字和文字還要古老。利用在您的項(xiàng)目中使用圖標(biāo)的優(yōu)勢(shì),因?yàn)樗鼈儠?huì)讓訪問者立即了解正在發(fā)生的事情以及接下來會(huì)發(fā)生什么。選擇正確的圖標(biāo)將為內(nèi)容提供比調(diào)色板、副本或圖形更多的上下文。使用圖標(biāo)時(shí),請(qǐng)務(wù)必考慮目標(biāo)受眾、宗教、歷史,以免產(chǎn)生誤解和誤解。還要提到一件事,考慮品牌及其價(jià)值,這樣您就不會(huì)在大型銀行網(wǎng)站上使用手繪圖標(biāo)。
6.意象
圖片能說千言萬語(yǔ)。確保包含定義網(wǎng)站應(yīng)使用的圖片樣式和方向的圖像。再次思考品牌的價(jià)值及其使命。例如,一家水慈善機(jī)構(gòu)使用具有強(qiáng)烈情感、良好事業(yè)和呼吁人類情感的醒目圖像,讓他們有幸擁有水、食物、電力和教育等基本生活商品。
7.表格
表單使您的網(wǎng)站或Web應(yīng)用程序具有交互性和動(dòng)態(tài)性,因此用戶可以輸入數(shù)據(jù),然后您可以對(duì)其進(jìn)行操作并完成工作。
確保建立層次結(jié)構(gòu)并包括來自表單的可能反饋——活動(dòng)、懸停、添加錯(cuò)誤、警告和成功消息,包括密碼太弱、電子郵件無效或簡(jiǎn)單的成功消息,例如“電子郵件已發(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)品時(shí)的所有可能場(chǎng)景。
選擇我們,優(yōu)質(zhì)服務(wù),不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話:021-58370032
關(guān)鍵詞標(biāo)簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)