教您如何選擇網(wǎng)站視覺風(fēng)格？

時間：2024-05-13 07:30:01 | 來源：建站知識

時間：2024-05-13 07:30:01 來源：建站知識

我們近來遇到許多客戶，想重做網(wǎng)站，卻常常無法給出明確的方向。因此，今天的這篇文章，就是要寫每個為網(wǎng)站設(shè)計迷茫的網(wǎng)站主們，一篇集結(jié)形容網(wǎng)站會用到的一些關(guān)鍵字，以及他們的實際案例，開門見山地寫的一篇視覺設(shè)計選擇指南！

首先聲明，一個網(wǎng)站的視覺組成，除了以下將提及的風(fēng)格、素材、色系、感受之外，還有很多很多需要注意的小細節(jié)，例如插畫風(fēng)、動畫形式、菜單形式等等，本文志在幫助你找到大方向，跨出第一步。

廢話不多說，讓我們從風(fēng)格開始吧！

一、風(fēng)格



網(wǎng)站設(shè)計中，用以形容網(wǎng)頁的種形容詞，使用平率最高的大概是「大眾化」與「獨特」了吧。

這邊所謂的大眾化并不是貶義，而是指大眾較常見的設(shè)計。

例如dev.startear.com/steak/，落地頁是商品照片加上黑色透明遮罩，再壓上品牌Logo，這樣的畫面，你的腦海中是否瞬間就能聯(lián)想到類似的設(shè)計呢？

此種設(shè)計，通常因為網(wǎng)站與網(wǎng)站之間相似度高，且已在網(wǎng)路上運行多年，按鈕位置、網(wǎng)站架構(gòu)等都比較符合主流的使用習(xí)慣，讓大眾一看就懂，熟悉的操作方式對最味！

獨特，大部分指的是開發(fā)型網(wǎng)站，網(wǎng)頁設(shè)計公司與客戶負責(zé)人會從了解商品開始，為其量身定制網(wǎng)站企劃，因此在此類網(wǎng)站中，較常出現(xiàn)一些獨特且有趣的功能或動畫。

以www.liquor-nce.com為案例，透過如鋪克牌一般的線條，勾勒出如威士忌口感般的高貴、典雅的氣質(zhì)，而此網(wǎng)站中的插畫是經(jīng)過設(shè)計師與客戶數(shù)次的構(gòu)思與討論，甚至連照片，都是由網(wǎng)頁公司操刀，專為皮爾斯威士忌所訂制。

二、素材



網(wǎng)頁設(shè)計中的素材指的是網(wǎng)站中的照片、圖片、圖案甚至是按鍵，營造網(wǎng)站氛圍感不可或缺的物件。

在販?zhǔn)鄯?wù)的網(wǎng)站、教育機構(gòu)的網(wǎng)站中，與「人」打交道居多，因此希望網(wǎng)站的設(shè)計，能讓使用者感到親切，所以此類網(wǎng)站多選擇使用真人圖片為素材。

這邊的范例是www.tse.nthu.edu.tw，不只利用實景照片使氣氛更悠閑，還啟用了學(xué)生攝影師，呈現(xiàn)出校園最真實的樣子。

金融商品中，多數(shù)以插畫或真人圖片結(jié)合插畫的方式呈現(xiàn)網(wǎng)站，例如bank.sinopac.com/sinopacBT/webevents/USStock/index.html#industry，美國股市一頁式網(wǎng)站選擇了美式插畫來搭配，切合主題，達到錦上添花的效果。

素材的選擇，除了受到商品性質(zhì)影響，也會受到目標(biāo)客群的影響，例如https://saiyo.sme.co.jp/graduate/23/，因面向初出茅廬的應(yīng)屆畢業(yè)生進行征才，所以選擇利用繽紛的3D人物，打造出輕松、適合年輕族群的征才網(wǎng)頁。

三、色系



化妝有分冷、黃皮膚，攝影有色溫，網(wǎng)頁設(shè)計也有分暖色、中性色、冷色等。

通常而言，冷色調(diào)的網(wǎng)頁設(shè)計會較適合高科技、技術(shù)相關(guān)產(chǎn)業(yè)，因為冷色調(diào)比較容易呈現(xiàn)出「科技感」。這邊的案例是ventureforamerica.org，Venture for America是一個培育大學(xué)畢業(yè)生成為領(lǐng)導(dǎo)者的機構(gòu)，他們以不同程度的藍色貫穿整個網(wǎng)站，使網(wǎng)站散發(fā)出高冷的氛圍。

中性色相對適合適合調(diào)性中立的單位，教育、政府機關(guān)等等，例如energypark.org.tw，網(wǎng)站色調(diào)以綠色與藍紫色組成，不會偏冷或偏暖，搭配吉祥物北極熊，俏皮又有趣。

暖色調(diào)容易營造出舒適感，因此較適合生活選物店、女性消費為主的商店，像是牧毛町www.stoov.com，網(wǎng)站背景是淡淡的膚色，按鍵顏色則是橘色、圓角，配色像極了你夢想中的溫暖豪宅。

除了暖、中性、冷等調(diào)性，也有一種網(wǎng)頁設(shè)計，是以品牌本身的代表色作為網(wǎng)站主色調(diào)，例如牧毛町（shop.lyrasoft.net）。此種設(shè)計可以快速搭建出網(wǎng)站整體感，是業(yè)界相當(dāng)常見的一種做法。

如果你不知道該選什么色調(diào)，選擇與品牌色相同的顏色來制作網(wǎng)站，絕對是您最安全且有效率的選擇。



｜注意｜

顏色的判斷非常的主觀，暖色也可以做出科技感，以上案例僅展示較常見的做法。

四、感受



感受的這個部分，純粹是你的網(wǎng)站呈現(xiàn)給使用者的「氛圍」。

棉樂悅事（dhartimata.com/zh/about/story），意為尼泊爾文及梵文中的「大地之母」。

網(wǎng)站主要販?zhǔn)勰岵礌柵砸宰匀辉鲜止ご蛟斓挠览m(xù)性商品，以及分享尼泊爾當(dāng)?shù)氐呐墓适?。因此，咨詢時即表達網(wǎng)站要給人溫馨的感覺，最終的成品以暖色調(diào)為網(wǎng)站主色調(diào)，搭配手繪感插畫，讓網(wǎng)站充滿親切又溫暖的感覺。

Datavedio國際官網(wǎng)（www.datavideo.com），國際化科技公司，業(yè)務(wù)為制造及租用導(dǎo)播機相關(guān)產(chǎn)品，版圖擴及全球，因商品外觀、使用者環(huán)境多為黑色，品牌色為深藍色，兩者相結(jié)合做出的科技感、高冷感恰好非常符合品牌調(diào)性。

你的品牌給予造訪者什么樣的感受、使用什么顏色、放上何種素材，完全取決于你的故事，高冷科技業(yè)或是溫暖的女性力量亦或是嚴(yán)肅的教育機構(gòu)，這個故事會將網(wǎng)站分向完全不同的結(jié)果。