關(guān)于網(wǎng)頁UI與用戶體驗(yàn)設(shè)計(jì)中的感官體驗(yàn)，一起來了解一下。

感官體驗(yàn)：是指產(chǎn)品呈現(xiàn)給用戶視覺和聽覺的體驗(yàn)。感官體驗(yàn)最重要的是帶給用戶舒適感，以促使用戶繼續(xù)瀏覽頁面。

影響感官體驗(yàn)要素：設(shè)計(jì)風(fēng)格、logo設(shè)計(jì)、頁面瀏覽速度、合理布局頁面、頁面色彩搭配、動畫效果、頁面導(dǎo)航、正確的頁面尺寸、圖片展覽、選擇合適的圖標(biāo)、廣告位和背景音樂等元素。

一、設(shè)計(jì)風(fēng)格

一個人擁有自己獨(dú)特的風(fēng)格、是一般人所沒有的，就會讓人注意到那個人的特別，若那個人的風(fēng)格是正面的，就會引起別人的羨慕與注意，或是贊賞。就如同一個網(wǎng)站，擁有別的網(wǎng)站所沒有的風(fēng)格，就會讓瀏覽者愿意多停留些時間，細(xì)細(xì)品嘗該站的內(nèi)容，甚至?xí)玫蕉嗳藢Φ墓膭钆c注目。

網(wǎng)站的設(shè)計(jì)風(fēng)格必須要符合目標(biāo)客戶的審美習(xí)慣，并有一定的引導(dǎo)性。設(shè)計(jì)師需要注意的是，在對網(wǎng)站進(jìn)行設(shè)計(jì)之前，必須明確該網(wǎng)站所針對的目標(biāo)客戶群體，并針對目標(biāo)客戶群體的審美喜好進(jìn)行分析，從而確定網(wǎng)站的總體設(shè)計(jì)風(fēng)格。

網(wǎng)站常見設(shè)計(jì)風(fēng)格

1）超清晰

在該設(shè)計(jì)公司的網(wǎng)站頁面設(shè)計(jì)中運(yùn)用了超清晰的設(shè)計(jì)風(fēng)，頁面中運(yùn)用通欄的宣傳圖像來分割頁面中不同部分的內(nèi)容，再加上有條理跳躍亮黃色點(diǎn)綴，使得頁面內(nèi)容表現(xiàn)得非常清晰、整齊。頁面中清晰的視覺指引和整齊有序的外觀都能夠給人良好的用戶體驗(yàn)。

在該產(chǎn)品介紹的專題頁面設(shè)計(jì)中拋棄了以往的傳統(tǒng)表現(xiàn)風(fēng)格，而是運(yùn)用了超清晰的設(shè)計(jì)風(fēng)格。使用不同色系不同明度的藍(lán)色調(diào)將整個頁面劃分為多個不同的內(nèi)容區(qū)域，在每部分的內(nèi)容區(qū)域中，又綜合運(yùn)用運(yùn)用圖文結(jié)合和色彩對比的手法，使得頁面結(jié)構(gòu)層次非常清晰。

2）極簡

該網(wǎng)站頁面運(yùn)用了極簡的設(shè)計(jì)風(fēng)格，不僅設(shè)計(jì)簡潔，并且通過文字的排版方式以及局部背景圖像的運(yùn)用，體現(xiàn)出現(xiàn)代傳統(tǒng)文化特色，非常直觀、大方。

極簡設(shè)計(jì)在移動端頁面設(shè)計(jì)中非常常見，并且能夠給人很好的視覺效果。在該移動端家具產(chǎn)品頁面中，僅僅使用簡潔的家具產(chǎn)品圖與文字介紹相結(jié)合，通過背景顏色的烘托而沒有使用其他任何裝飾性元素，給人一種精致、典雅的感受，并且能有效突出產(chǎn)品的表現(xiàn)。

3）照片

在該科技類品牌網(wǎng)站頁面中使用滿屏的大幅度產(chǎn)品照片作為頁面的整體背景，科技感撲面而來，在頁面局部排列少量的簡潔菜單文字，使背景圖像完全占據(jù)主導(dǎo)地位，網(wǎng)站信息被最小化了但同時制作精美。

在該時尚運(yùn)動服飾介紹頁面中同樣使用了產(chǎn)品照片作為滿屏背景，使瀏覽著仿佛身臨其境。需要注意的是，因?yàn)轫撁嬷杏州^多的介紹內(nèi)容，為了使信息內(nèi)容清晰易讀，背景的風(fēng)景照片使用了左屏的部分，從而不影響頁面內(nèi)容的表現(xiàn)。

＊使用照片設(shè)計(jì)風(fēng)格時，還有一個重要事項(xiàng)需要注意，如果背景圖片很復(fù)雜，那么前景就需要設(shè)計(jì)得樸素一些，這樣是為了避免頁面過于凌亂，當(dāng)然這樣也能夠更好地使頁面信息凸顯出來。

4）插畫

該少女服飾品牌頁面運(yùn)用了插畫的設(shè)計(jì)風(fēng)格，將時尚的少女人物與卡通手繪插畫結(jié)合，人物與插畫背景設(shè)計(jì)渾然天成，且運(yùn)用恰到好處。

該網(wǎng)頁設(shè)計(jì)也運(yùn)用了插畫設(shè)計(jì)風(fēng)格，將產(chǎn)品圖片巧妙地融入到插畫當(dāng)中，不但體現(xiàn)出年輕和可愛，并且每個頁面中安排的文字內(nèi)容較少，使瀏覽者仿佛在一起看一幅幅連環(huán)畫，能給瀏覽者留下深刻而美好的印象。

5）三維

該游戲界面采用了典型的三維設(shè)計(jì)風(fēng)格，在我們心目中，人物肯定是要占據(jù)空間的，因此網(wǎng)頁的背景就自然而然地被拉遠(yuǎn)了。在該頁面中同時采用s型的美感構(gòu)成，內(nèi)容與背景形成空間對比，給人一種很強(qiáng)的視覺沖擊力。

該頁面設(shè)計(jì)，通過與頁面背景顏色相對比的色塊來突出重點(diǎn)信息和圖片，在頁面中為多個重要的元素都運(yùn)用了強(qiáng)烈的陰影效果，頁面中的大字號主題文字、色塊以及圖片，有效地表現(xiàn)出頁面的空間感，仿佛內(nèi)容躍然于背景之上。

6）以字體為主

在該頁面設(shè)計(jì)中以字體作為主要的設(shè)計(jì)元素，通過隨性的手寫字體加上巧妙的布局，使頁面給人一種隨意而個性十足的感覺。

該頁面的設(shè)計(jì)風(fēng)格也可以稱為插畫風(fēng)格，通過插畫來體現(xiàn)字體設(shè)計(jì)，內(nèi)容形式很具創(chuàng)意感，給人一種情感化的傳達(dá)，大膽創(chuàng)新，個性鮮明的感覺。

7）純色

該網(wǎng)頁的整體設(shè)計(jì)采用的就是純色風(fēng)格，運(yùn)用色塊對頁面進(jìn)行傾斜風(fēng)割，不但清晰地劃分了頁面中不同的內(nèi)容，而且能夠產(chǎn)生對比的效果，這種設(shè)計(jì)使網(wǎng)站看上去更加明快、整潔。

該網(wǎng)頁設(shè)計(jì)同樣采用了純色的設(shè)計(jì)風(fēng)格，運(yùn)用鮮艷的純色劃分頁面中不同功能和內(nèi)容的區(qū)域，使得頁面內(nèi)容的劃分非常清晰。

＊使用純色風(fēng)格設(shè)計(jì)的網(wǎng)頁實(shí)現(xiàn)起來比較容易，并且使用這種設(shè)計(jì)風(fēng)格的網(wǎng)站加載速度也會比較快，這種風(fēng)格非常適合電子商務(wù)類的綜合網(wǎng)站以及移動端的網(wǎng)站使用。

8）扁平化

該網(wǎng)頁采用了典型的扁平化設(shè)計(jì)風(fēng)格，頁面中各部分內(nèi)容都采用了大面積的純色塊進(jìn)行分割，使得頁面中各部分內(nèi)容的劃分非常清晰、直觀，沒有過多的修飾，表現(xiàn)內(nèi)容的方式更加直接。

受到移動設(shè)備屏幕尺寸和操作方式的限制，移動端的頁面需要給瀏覽者提供更加直觀的信息和便捷的操作，所以在移動端的頁面設(shè)計(jì)中扁平化的設(shè)計(jì)風(fēng)格非常普遍。

＊網(wǎng)站頁面設(shè)計(jì)風(fēng)格可以又很多，無論用戶采用何種風(fēng)格進(jìn)行設(shè)計(jì)，都要于網(wǎng)站本身內(nèi)容相符，這樣才能將想要傳達(dá)的內(nèi)容快速傳達(dá)給瀏覽者。否則一味地追求花哨的頁面效果，將使網(wǎng)站本身的核心內(nèi)容被忽略掉。

設(shè)計(jì)風(fēng)格在設(shè)計(jì)領(lǐng)域中變得越來越重要。設(shè)計(jì)風(fēng)格通常不會有特定的相關(guān)元素，卻又因?yàn)樗鼈儾煌耐庥^而為人所認(rèn)識。以上這些都是設(shè)計(jì)方法中的總體理論。舉一個例子，極簡主義設(shè)計(jì)風(fēng)格可以禪釋特定設(shè)計(jì)是如何影響設(shè)計(jì)師的作品的，該風(fēng)格定下了網(wǎng)站外觀和氣質(zhì)的基調(diào)，但不會強(qiáng)制指定特定的圖像。而其他的風(fēng)格，如照片風(fēng)格、三維風(fēng)格、扁平化風(fēng)格等就更為具體化，會有一些明顯的模式以及明顯的外觀形式。確定網(wǎng)站的設(shè)計(jì)風(fēng)格不是一件隨心所欲的事情，網(wǎng)站所表現(xiàn)出來的風(fēng)格是很重要的，設(shè)計(jì)師應(yīng)該認(rèn)真考量，從而使網(wǎng)站風(fēng)格起到展示網(wǎng)站品牌和傳達(dá)網(wǎng)站信息的作用。

二、尺寸

網(wǎng)頁設(shè)計(jì)的難點(diǎn)在于每個瀏覽者的使用環(huán)境不盡相同，網(wǎng)頁存在太多的變數(shù)，一般的設(shè)計(jì)并不能勝任，因此，能否有效地處理這種情況，直接影響到該頁面的用戶體驗(yàn)。

對網(wǎng)頁尺寸產(chǎn)生重要影響的因素主要有3個，分別是：操作系統(tǒng)、瀏覽器和系統(tǒng)分辨率。

關(guān)于尺寸對網(wǎng)頁感官的用戶體驗(yàn)，經(jīng)通過以下兩個方面分別進(jìn)行講解。

1. 影響網(wǎng)頁尺寸的主要因素
2. 安全的網(wǎng)頁寬度與首屏高度

影響網(wǎng)頁尺寸的主要因素

1）操作系統(tǒng)

在操作系統(tǒng)的底部都會顯示系統(tǒng)任務(wù)欄，該部分會占據(jù)一定的屏幕空間，windows xp系統(tǒng)中默認(rèn)的任務(wù)欄高度為30px，windows7、windows8與windows10操作系統(tǒng)中默認(rèn)的任務(wù)欄高度均為40px。

2）瀏覽器

不同的瀏覽者可能會使用不同的瀏覽器，在瀏覽器窗口中默認(rèn)都會顯示狀態(tài)欄、菜單欄和滾動條，這些都會占據(jù)網(wǎng)頁在瀏覽窗口中的顯示區(qū)域，這些因素也是設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁前需要考慮的。主流瀏覽器的界面參數(shù)如下－所示。

主流瀏覽器的界面參數(shù)

3）系統(tǒng)分辨率

不同的顯示器有著不同的分辨率設(shè)置，這就導(dǎo)致在瀏覽網(wǎng)頁時不同系統(tǒng)分辨率中的可視面積是不同的。根據(jù)調(diào)查機(jī)構(gòu)對30萬以上的客戶端進(jìn)行測試，得到如下的測試數(shù)據(jù)。

通過以上的系統(tǒng)分辨率調(diào)查數(shù)據(jù)結(jié)果可以得出適合大多數(shù)用戶進(jìn)行瀏覽的安全分辨率為1336*768，可以建議大分辨率為1280*800。

安全大網(wǎng)頁寬度與首屏高度

根據(jù)以上對操作系統(tǒng)、瀏覽器和系統(tǒng)分辨率的分析，可以得出設(shè)計(jì)網(wǎng)頁的安全寬度為1002px，可建議的較大寬度為1258px。

在windows xp常見分辨率1024*768下，去除系統(tǒng)任務(wù)欄、瀏覽器窗口的菜單欄和狀態(tài)欄后得到的網(wǎng)頁首屏可視高度平均值為584px。

在windows7常見分辨率1440*900下，去除系統(tǒng)任務(wù)欄、瀏覽器窗口的菜單欄何狀態(tài)欄后得到的網(wǎng)頁首屏可視高度平均值為716px。

三、關(guān)于LOGO

作為具有傳媒特性的網(wǎng)站logo，為了在最有效的空間內(nèi)實(shí)現(xiàn)所有的視覺識別功能，一般是通過特定圖案及特定文字的組合，達(dá)到對被標(biāo)識體的出示、說明、溝通和交流，從而激發(fā)瀏覽者的興趣，達(dá)到增強(qiáng)美譽(yù)、記憶等目的。

常見logo表現(xiàn)形式

網(wǎng)站logo形式一般可以分為特定圖案、特定文字和合成字體。

1）特定圖案

兩個網(wǎng)站logo的設(shè)計(jì)均使用了特定行業(yè)的圖案。通過使用具有行業(yè)代表性的圖像作為logo圖形的設(shè)計(jì)，使用戶看到就知道該網(wǎng)站與什么行業(yè)有關(guān)，搭配簡潔的文字，表現(xiàn)效果一目了然。

2）特定文字

上面兩個logo均使用了對特定文字進(jìn)行藝術(shù)處理的方式來表現(xiàn)logo。使用文字來表現(xiàn)logo是一種做直觀的表現(xiàn)方式，通過對主體文字或字母進(jìn)行變形處理，使其具有很強(qiáng)的藝術(shù)表現(xiàn)效果。

所以特定文字一般作為特定圖案補(bǔ)充，選擇的字體應(yīng)與整體風(fēng)格一致，應(yīng)該盡可能做全新的區(qū)別性創(chuàng)作。完整的logo設(shè)計(jì)，一般都應(yīng)考慮至少又中英及單獨(dú)的圖案、中文、英文的組合形式。

這兩個網(wǎng)站logo的表現(xiàn)效果更加豐富，將logo文字進(jìn)行藝術(shù)化的變形處理并且與具有代表性的logo圖形相結(jié)合，使得logo的整體表現(xiàn)效果更加直觀與具有藝術(shù)感，能夠給人留下深刻的印象。

3）合成文字

將文字進(jìn)行變形處理與圖形相結(jié)合表現(xiàn)出意象的效果，同時具有文字的可識別性也兼具圖形的表現(xiàn)力，非常適合表現(xiàn)logo，能夠高人留下深刻的印象。

＊網(wǎng)站logo是網(wǎng)站特色與內(nèi)涵的集中體現(xiàn)，它用于傳遞網(wǎng)站的定位和經(jīng)營理念，同時便于人們識別。在網(wǎng)頁中應(yīng)用logo是需要注意確保logo的保護(hù)空間，確保品牌的清晰展示，但頁不能過多地占據(jù)網(wǎng)頁空間。

設(shè)計(jì)網(wǎng)站logo的一般流程

第一步：明確需求－我們的網(wǎng)站需要一個什么樣的logo？

在開始設(shè)計(jì)logo前，要對該網(wǎng)站的相關(guān)資料進(jìn)行充分了解。如網(wǎng)站的性質(zhì)、網(wǎng)站的叢屬行業(yè)、網(wǎng)站的針對用戶、網(wǎng)站的競爭對手等。還要與網(wǎng)站ui設(shè)計(jì)人員溝通，保證與網(wǎng)站整體設(shè)計(jì)風(fēng)格保持一致。例如，我們需啊喲設(shè)計(jì)的是一家互聯(lián)網(wǎng)的網(wǎng)站logo，作為一個互聯(lián)網(wǎng)公司，我們一定要緊跟互聯(lián)網(wǎng)潮流，同時希望能夠給用戶一種親切的感覺，并且要一眼能被人記住。經(jīng)過詳細(xì)調(diào)研后，可以初步定義logo的表現(xiàn)形式、表現(xiàn)風(fēng)格等。

第二步：思維導(dǎo)讀

使用鉛筆在白紙上繪制logo的思維導(dǎo)圖。思維導(dǎo)圖可以很好地幫助我們發(fā)散思維。除了使用紙、筆外，也可以使用一些專業(yè)的思維導(dǎo)圖軟件。

用戶可以從一個關(guān)鍵詞開始，逐步構(gòu)建整個思維導(dǎo)圖。不要局限自己的思維，盡量發(fā)散，以獲的更多的可能性。

通過思維導(dǎo)圖，可以獲得幾個重要的關(guān)鍵詞。利用這些關(guān)鍵詞尋找設(shè)計(jì)靈感，把想法圖形化。接下來就開始繪制logo的草圖。

第三步：繪制草圖

我們不可能憑空去想象所有的東西，特別是當(dāng)我們的思維被局限在某一點(diǎn)時，

可以在一些專業(yè)的設(shè)計(jì)網(wǎng)站中找到很多優(yōu)秀的logo設(shè)計(jì)?？磮D借鑒并不代表“抄襲”，在設(shè)計(jì)的時候不要去抵觸各種優(yōu)秀的作品，重要的是從中獲得靈感和啟發(fā)，而不是一味的生搬硬套。

第四步：在軟件中精細(xì)繪制logo圖形

第五步：設(shè)計(jì)logo文字，來個完美組合

＊現(xiàn)代人對簡潔、明快、流暢、瞬間印象的訴求使得logo的設(shè)計(jì)越來越追求一種獨(dú)特的、高度的洗練。一些已在用戶群中產(chǎn)生了一定印象的公司為了強(qiáng)化受眾的區(qū)別性記憶及持續(xù)的品牌忠誠度，通過設(shè)計(jì)更獨(dú)特、更易理解的圖案來強(qiáng)化對既有理念的認(rèn)同。

四、網(wǎng)站打開速度

許多研究表明，用戶最滿意的網(wǎng)頁打開時間是在2秒以下。用戶能夠忍受的最長等待時間的中位數(shù)在6至8秒之間。也就是說，8秒是一個臨界值，如果網(wǎng)站打開的速度在8秒以上，那么大部份瀏覽者最終都會離去。

提高網(wǎng)站頁面打開速度，改善用戶體驗(yàn)

1）優(yōu)化圖片

圖片是網(wǎng)頁中最基本的元素之一，圖文結(jié)合能夠簡明扼要地闡述主題，提高用戶閱讀興趣。對于圖片的處理及優(yōu)化，可以將圖片進(jìn)行自定義大小，能夠有效幫助減少頁面大小，設(shè)置圖片的質(zhì)量，適當(dāng)控制其容量大小，提高網(wǎng)頁圖片的加載速度。

2）選擇合適的圖片格式

正確的圖片格式可以讓圖片容量縮小數(shù)倍，如果保存為最佳格式，可以節(jié)省大量帶寬，減少處理時間，大大加快頁面加載速度。JPG格式常用于照片或真彩圖片，GIF格式用于平面色彩的圖片，一般用于按鈕或logo圖片，PNG格式和GIF非常相似，不過就是多支持一些色彩。

3）圖片寬度和高度設(shè)置問題

4）合并優(yōu)化

5）延遲顯示可見區(qū)域外的內(nèi)容

6）精簡代碼

7）延遲加載和執(zhí)行非必要腳本

8）減少網(wǎng)頁的響應(yīng)次數(shù)

五、合理布局

網(wǎng)頁布局最重要的基礎(chǔ)原則是重點(diǎn)突出、主次分明、圖文并茂。網(wǎng)頁的布局必須與企業(yè)的營銷目標(biāo)相結(jié)合，將目標(biāo)客戶最感興趣的，最具有銷售力的信息放置在最重要的位置。

關(guān)于網(wǎng)站頁面合理布局的用戶體驗(yàn)：

1. 符合用戶的瀏覽習(xí)慣
2. 網(wǎng)頁布局的操作流程
3. 常見的網(wǎng)頁布局形式
4. 網(wǎng)頁布局的原則
   

常見的網(wǎng)頁布局形式

一欄式布局

兩欄式布局??1）左窄右寬2）左寬右窄

3）左右均等

三欄式布局

網(wǎng)頁布局的原則：協(xié)調(diào)、一致、流動、均衡、強(qiáng)調(diào)等，

另外，在進(jìn)行網(wǎng)頁布局設(shè)計(jì)時，需要考慮導(dǎo)網(wǎng)站頁面的醒目性、創(chuàng)造性、造型性、可讀性和明快性等因素。

六、色彩

色彩常識

1. 色相
2. 明度
3. 純度

網(wǎng)頁等基本配色方法

單色

類似色

補(bǔ)色

鄰近補(bǔ)色

無彩色

＊在網(wǎng)頁進(jìn)行配色時，使用的顏色最好不要超過4種，使用過多的顏色會造成頁面繁雜，讓人覺得沒有側(cè)重點(diǎn)。一個網(wǎng)頁必須確定一種或兩種主題色，在對其他輔助色彩進(jìn)行選擇時，需要考慮其他配色與主題色的關(guān)系，這樣才能使網(wǎng)頁的色彩搭配更加和諧、美觀。

七、動畫

網(wǎng)頁動畫的應(yīng)用類型

1. 頁面加載動畫
2. 元素交互動畫
3. 故事型頁面動畫
4. 裝飾性動畫
5. 廣告動畫

網(wǎng)頁動畫的用戶體驗(yàn)原則

1. 打開速度快，運(yùn)動流暢
2. 動畫節(jié)奏適中
3. 從頁面中的細(xì)節(jié)元素著手
4. 不能干擾主畫面內(nèi)容

八、導(dǎo)航

導(dǎo)航在網(wǎng)頁中的布局形式

1. 布局在網(wǎng)頁頂部
2. 布局在網(wǎng)頁底部
3. 布局在網(wǎng)頁左側(cè)
4. 布局在網(wǎng)頁右側(cè)
5. 布局在網(wǎng)頁中心
6. 響應(yīng)式導(dǎo)航

九、圖片展示

圖片展示形式

1. 傳統(tǒng)的矩陣展示
2. 大小不一的矩陣展示
3. 瀑布流展示
4. 下一張圖片預(yù)覽

圖片展示技巧

1. 圖片與頁面整體協(xié)調(diào)
2. 使用高質(zhì)量的清晰圖片
3. 圖片與網(wǎng)站內(nèi)容的關(guān)聯(lián)性
4. 大圖很受歡迎
5. 攥取注意力

十、圖標(biāo)

圖標(biāo)的設(shè)計(jì)原則

1. 易識別
   
2. 風(fēng)格統(tǒng)一
3. 與網(wǎng)頁協(xié)調(diào)
4. 富有創(chuàng)意

十一、廣告位

網(wǎng)站常見廣告形式

1. 文字廣告
2. Banner廣告
3. 對聯(lián)式浮動廣告
4. 網(wǎng)頁漂浮廣告
5. 彈出廣告

十二、聲音與視頻

與傳統(tǒng)媒體不同，網(wǎng)頁界面中除了文字和圖像以外，還包含動畫、聲音和視頻等新興多媒體元素，更有由代碼語言編程實(shí)現(xiàn)等各種交互式效果，這極大地增加了網(wǎng)頁界面的生動性和復(fù)雜性。

在網(wǎng)站頁面中合理地應(yīng)用與網(wǎng)站主題風(fēng)格相統(tǒng)一的聲音或視頻元素，可以極大地豐富網(wǎng)站頁面的視聽效果，但還是要為用戶提供控制聲音或視頻的開關(guān)，將選擇權(quán)交給用戶，避免對用戶造成困擾。

本文由 @乘良－Leon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議