每一位企業(yè)主,肯定都希望擁有令人一眼就被吸引的網(wǎng)站面貌吧。那么如何做出漂亮的網(wǎng)頁(yè)呢?早晨設(shè)計(jì)作為專(zhuān)業(yè)的建站服務(wù)商,最常聽(tīng)到的建議就是:「上網(wǎng)找素材、找高檔次的網(wǎng)站當(dāng)作模板?!?/p>
的確,觀察別人的網(wǎng)站、看這些好看又實(shí)用的頁(yè)面是怎么運(yùn)作設(shè)計(jì)的,是我們的基本功。但是,有時(shí)大量搜集了各式各樣的模板網(wǎng)站當(dāng)素材,是否讓你眼花撩亂、越看越模糊沒(méi)有頭緒呢?今天來(lái)談?wù)劊赫业搅死硐氲哪0逯蟆⒁绾畏治鱿?,?dāng)理解了別人為什么要這樣設(shè)計(jì)、才能把思考模式轉(zhuǎn)換成自己的知識(shí)庫(kù),幫助你找到建立自己網(wǎng)站的最佳組合應(yīng)用。
架設(shè)網(wǎng)站有不同的目的,今天我們首先以「商業(yè)用途」的網(wǎng)站做分析介紹取經(jīng):
網(wǎng)站構(gòu)架目的: 1.建立企業(yè)形象 2.推廣主力產(chǎn)品,得到訂單或合作機(jī)會(huì) 3.提供專(zhuān)業(yè)資質(zhì)、知識(shí)為產(chǎn)品/企業(yè)技術(shù)背書(shū) 4.提供產(chǎn)品相關(guān)QA,拉近與客戶(hù)之間距離
【訂立視覺(jué)目標(biāo)】
進(jìn)入首頁(yè),就像第一眼的大門(mén),傳達(dá)給觀者「我是誰(shuí)」的意象。這里使用精修的產(chǎn)品首圖,以想讓人聯(lián)想到什么關(guān)鍵字/感覺(jué)為主,因此Mablaser是「激光切割、高品質(zhì)的、安心的」。
還有,由于銷(xiāo)售的對(duì)象是「機(jī)器設(shè)備」,受眾目標(biāo)是「使用機(jī)器設(shè)備的人」,因此在建立形象時(shí),除了「我是專(zhuān)業(yè)制造商」之外,還要營(yíng)造出品牌的形象和實(shí)力,讓客戶(hù)產(chǎn)生信賴(lài)感。
建立客戶(hù)的「安心、信賴(lài)感」,讓人在視覺(jué)舒服的狀態(tài)下,得到找尋的信息。
對(duì)于顏色選用,呈現(xiàn)干凈,只選擇一種貼合logo的主色(棕)、一到兩種副色就夠了,避免眼花撩亂、模糊企業(yè)形象。當(dāng)然,使用繽紛熱鬧的視覺(jué)做設(shè)計(jì)的優(yōu)秀網(wǎng)站也有許多,但因?yàn)檫@個(gè)品牌聚焦在「激光切割機(jī)」這個(gè)主軸上,不同的網(wǎng)站、品牌必定會(huì)有不同的視覺(jué)目標(biāo)要呈現(xiàn),后面我們會(huì)再舉例做比較。
最上方的目錄區(qū),一般會(huì)讓目錄菜單一整排清楚地展開(kāi)、中間不被其他元素打斷(例如故意將LOGO置中、選項(xiàng)分散等),使選項(xiàng)彼此之間有「屬于同一層級(jí)」的連接感;其中第二、三、五項(xiàng)旁邊標(biāo)志的小箭頭,讓觀者直覺(jué)會(huì)知道「這里有許多子目錄可以點(diǎn)」,光標(biāo)滑過(guò)去時(shí)會(huì)特別停頓留意。
這些設(shè)計(jì)小細(xì)節(jié),都是需要經(jīng)驗(yàn)時(shí)間累積,且知識(shí)永遠(yuǎn)在更新變動(dòng),因此不需要求自己一步到位、持續(xù)不斷優(yōu)化才是重點(diǎn)。隨時(shí)多多觀摩、咨詢(xún)前輩專(zhuān)家的實(shí)戰(zhàn)經(jīng)驗(yàn)、也可以站在巨人的肩膀上。
【搭配使用顏色、字體、字幅的變化目的】
選擇一個(gè)適合的主色會(huì)連接到你的品牌印象,因此許多品牌會(huì)從LOGO設(shè)計(jì)中挑選網(wǎng)站主色。
繼續(xù)把首頁(yè)往下滾動(dòng),可以發(fā)現(xiàn)顏色配置、字體、字幅對(duì)網(wǎng)站的作用,劃分出內(nèi)容文字的層次、強(qiáng)調(diào)按鈕、引導(dǎo)觀者視線移動(dòng)方向等,透過(guò)以上三者變化,觀者可以一眼的知此畫(huà)面的標(biāo)題是什么、摘要重點(diǎn)、詳細(xì)信息連接按鈕在哪里;此外,把按鈕加框線,光標(biāo)滑過(guò)時(shí)變色,也是非常實(shí)用的方法,告訴大家「這里有東西,點(diǎn)進(jìn)來(lái)!」。
【滾動(dòng)頁(yè)面信息】
滾動(dòng)往下,是從網(wǎng)頁(yè)頂端選項(xiàng)中,各種重要內(nèi)容挑出幾篇,搭配圖片設(shè)計(jì),讓觀者在還沒(méi)花心力去了解你的網(wǎng)站時(shí),先喂給他們一些信息引子。這些信息要記得時(shí)常更新,展現(xiàn)出你的網(wǎng)站內(nèi)容十分豐富,吸引大家深入挖掘。
制作這些滾動(dòng)信息,就像在做簡(jiǎn)報(bào),一張簡(jiǎn)報(bào)的大小以不超過(guò)一個(gè)電腦/手機(jī)屏幕的頁(yè)面長(zhǎng)寬為佳;超過(guò),觀者需要一直滑來(lái)滑去看信息,影響閱覽。
這個(gè)網(wǎng)站中,不同張「簡(jiǎn)報(bào)」的底色不同,優(yōu)點(diǎn)是可以讓人不看字也清楚知道:「這里」和「這里」在說(shuō)不一樣的事情;缺點(diǎn)是畫(huà)面的整體性、干凈度會(huì)減弱許多,設(shè)計(jì)自己的網(wǎng)站時(shí),我們可以從中思考權(quán)衡。
一般滾動(dòng)至網(wǎng)頁(yè)底,我們會(huì)再度發(fā)現(xiàn)目錄菜單(網(wǎng)站位置稱(chēng)為Footer),這里的菜單安排與頁(yè)首不同:頁(yè)首的菜單,主要針對(duì)客人/潛在客群,把他們最需要先知道、吸引人的項(xiàng)目放上去。
Footer:1.重復(fù)一遍頁(yè)首的項(xiàng)目,供觀者滑到底時(shí)方便再跳去其他頁(yè)面;
2.放上商業(yè)重要性次高的連接/子項(xiàng)目,例如:人才招募、服務(wù)法規(guī)等,一般人有需要時(shí)才會(huì)特地去查詢(xún)的東西。
最后,首頁(yè)頁(yè)面信息中,別忘了加入「完整聯(lián)絡(luò)信息」和「社交平臺(tái)連接」、建立「意見(jiàn)信箱」也是很好的,打開(kāi)大門(mén)、提供更多觀者與你建立交流的管道。
簡(jiǎn)單、清楚的分工:把網(wǎng)頁(yè)需要的目錄、標(biāo)題、內(nèi)容內(nèi)存塊等用不刺眼的純色塊、輪廓線、空白等,制造視覺(jué)區(qū)分;左側(cè)目錄區(qū)也一目了然、不需要額外下拉或點(diǎn)擊。一切以傳達(dá)網(wǎng)頁(yè)內(nèi)容信息為最主要目的。帶給觀者利落、簡(jiǎn)單大方的感受,建立網(wǎng)頁(yè)、更新編輯也最容易。
插入圖片,可以使用slide模板,設(shè)定每張圖的停留時(shí)間做輪播;也可以設(shè)定為使用者點(diǎn)擊時(shí)、撥放下一張。
文字方塊加入層次感,搭配降低透明度;看起來(lái)背景圖不會(huì)完全被擋住,讓網(wǎng)頁(yè)看起來(lái)更豐富和諧,不會(huì)有「內(nèi)存塊壁壘分明」的感覺(jué)。使用這樣的設(shè)計(jì),建議背景圖簡(jiǎn)單大方、避免使用零亂、顏色太多、甚至?xí)?dòng)的圖,讓觀者失焦喔!
頁(yè)首和側(cè)邊菜單,使用利落、清楚的目錄呈現(xiàn),讓人最快找到信息、不浪費(fèi)耐心。那內(nèi)文中,這些產(chǎn)品區(qū)、專(zhuān)題文章區(qū)就可以多加變化了,瀏覽賞心悅目、觀者被吸引點(diǎn)入內(nèi)文的機(jī)率也增加,同時(shí)因?yàn)閷儆趦?nèi)文區(qū),這樣的編排不影響觀者搜尋要看的項(xiàng)目。
另外,使用的照片(首圖)建議使用能切入該篇點(diǎn)進(jìn)去的內(nèi)文重點(diǎn)、并且每張首圖畫(huà)面風(fēng)格能達(dá)成一致的照片。
以上,就是早晨設(shè)計(jì)這次的分享,希望能幫助大家在欣賞各種大神級(jí)網(wǎng)站時(shí),更容易讀懂「啊!原來(lái)這個(gè)網(wǎng)站的巧思在這里」。
如果還想知道更多架站技巧、網(wǎng)頁(yè)優(yōu)化技巧等,就來(lái)看看早晨設(shè)計(jì)的網(wǎng)頁(yè)設(shè)計(jì)知識(shí)區(qū),滿(mǎn)滿(mǎn)的寶藏就等你挖掘、實(shí)際運(yùn)用!也隨時(shí)歡迎咨早晨設(shè)計(jì)團(tuán)隊(duì),讓設(shè)計(jì)師親自告訴你,他們高深莫測(cè)的腦袋在想什么吧!
而且在2021疫情后,人際交流、實(shí)體商店需求被網(wǎng)絡(luò)取代,越來(lái)越多商業(yè)品牌和一般大眾都投注心力于網(wǎng)站系統(tǒng)建置和網(wǎng)頁(yè)設(shè)計(jì),選擇早晨設(shè)計(jì)讓您在疫情期間,事業(yè)逆勢(shì)成長(zhǎng)。