網頁UI與用戶體驗設計要素：感官體驗

關於網頁UI與用戶體驗設計中的感官體驗，一起來了解一下。

感官體驗： 是指產品呈現給用戶視覺和聽覺的體驗。感官體驗最重要的是帶給用戶舒適感，以促使用戶繼續瀏覽頁面。

影響感官體驗要素：設計風格、logo設計、頁面瀏覽速度、合理佈局頁面、頁面色彩搭配、動畫效果、頁面導航、正確的頁面尺寸、圖片展覽、選擇合適的圖標、廣告位和背景音樂等元素。

一、設計風格

一個人擁有自己獨特的風格、是一般人所沒有的，就會讓人注意到那個人的特別，若那個人的風格是正面的，就會引起別人的羨慕與註意，或是讚賞。就如同一個網站，擁有別的網站所沒有的風格，就會讓瀏覽者願意多停留些時間，細細品嚐該站的內容，甚至會得到多人對的鼓勵與註目。

網站的設計風格必須要符合目標客戶的審美習慣，並有一定的引導性。設計師需要注意的是，在對網站進行設計之前，必須明確該網站所針對的目標客戶群體，並針對目標客戶群體的審美喜好進行分析，從而確定網站的總體設計風格。

網站常見設計風格

1）超清晰

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

在該產品介紹的專題頁面設計中拋棄了以往的傳統表現風格，而是運用了超清晰的設計風格。使用不同色係不同明度的藍色調將整個頁面劃分為多個不同的內容區域，在每部分的內容區域中，又綜合運用運用圖文結合和色彩對比的手法，使得頁面結構層次非常清晰。

2）極簡

該網站頁面運用了極簡的設計風格，不僅設計簡潔，並且通過文字的排版方式以及局部背景圖像的運用，體現出現代傳統文化特色，非常直觀、大方。

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

3）照片

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

在該時尚運動服飾介紹頁面中同樣使用了產品照片作為滿屏背景，使瀏覽著彷彿身臨其境。需要注意的是，因為頁面中又較多的介紹內容，為了使信息內容清晰易讀，背景的風景照片使用了左屏的部分，從而不影響頁面內容的表現。

＊使用照片設計風格時，還有一個重要事項需要注意，如果背景圖片很複雜，那麼前景就需要設計得樸素一些，這樣是為了避免頁面過於凌亂，當然這樣也能夠更好地使頁面信息凸顯出來。

4）插畫

該少女服飾品牌頁面運用了插畫的設計風格，將時尚的少女人物與卡通手繪插畫結合，人物與插畫背景設計渾然天成，且運用恰到好處。

該網頁設計也運用了插畫設計風格，將產品圖片巧妙地融入到插畫當中，不但體現出年輕和可愛，並且每個頁面中安排的文字內容較少，使瀏覽者彷彿在一起看一幅幅連環畫，能給瀏覽者留下深刻而美好的印象。

5）三維

該遊戲界面採用了典型的三維設計風格，在我們心目中，人物肯定是要佔據空間的，因此網頁的背景就自然而然地被拉遠了。在該頁面中同時採用s型的美感構成，內容與背景形成空間對比，給人一種很強的視覺衝擊力。

該頁面設計，通過與頁面背景顏色相對比的色塊來突出重點信息和圖片，在頁面中為多個重要的元素都運用了強烈的陰影效果，頁面中的大字號主題文字、色塊以及圖片，有效地表現出頁面的空間感，彷彿內容躍然於背景之上。

6）以字體為主

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

該頁面的設計風格也可以稱為插畫風格，通過插畫來體現字體設計，內容形式很具創意感，給人一種情感化的傳達，大膽創新，個性鮮明的感覺。

7）純色

該網頁的整體設計採用的就是純色風格，運用色塊對頁面進行傾斜風割，不但清晰地劃分了頁面中不同的內容，而且能夠產生對比的效果，這種設計使網站看上去更加明快、整潔。

該網頁設計同樣採用了純色的設計風格，運用鮮豔的純色劃分頁面中不同功能和內容的區域，使得頁面內容的劃分非常清晰。

＊使用純色風格設計的網頁實現起來比較容易，並且使用這種設計風格的網站加載速度也會比較快，這種風格非常適合電子商務類的綜合網站以及移動端的網站使用。

8）扁平化

該網頁採用了典型的扁平化設計風格，頁面中各部分內容都採用了大面積的純色塊進行分割，使得頁面中各部分內容的劃分非常清晰、直觀，沒有過多的修飾，表現內容的方式更加直接。

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

＊網站頁面設計風格可以又很多，無論用戶採用何種風格進行設計，都要於網站本身內容相符，這樣才能將想要傳達的內容快速傳達給瀏覽者。否則一味地追求花哨的頁面效果，將使網站本身的核心內容被忽略掉。

設計風格在設計領域中變得越來越重要。設計風格通常不會有特定的相關元素，卻又因為它們不同的外觀而為人所認識。以上這些都是設計方法中的總體理論。舉一個例子，極簡主義設計風格可以禪釋特定設計是如何影響設計師的作品的，該風格定下了網站外觀和氣質的基調，但不會強制指定特定的圖像。而其他的風格，如照片風格、三維風格、扁平化風格等就更為具體化，會有一些明顯的模式以及明顯的外觀形式。確定網站的設計風格不是一件隨心所欲的事情，網站所表現出來的風格是很重要的，設計師應該認真考量，從而使網站風格起到展示網站品牌和傳達網站信息的作用。

二、尺寸

網頁設計的難點在於每個瀏覽者的使用環境不盡相同，網頁存在太多的變數，一般的設計並不能勝任，因此，能否有效地處理這種情況，直接影響到該頁面的用戶體驗。

對網頁尺寸產生重要影響的因素主要有3個，分別是： 操作系統、瀏覽器和系統分辨率。

關於尺寸對網頁感官的用戶體驗，經通過以下兩個方面分別進行講解。

影響網頁尺寸的主要因素
安全的網頁寬度與首屏高度

影響網頁尺寸的主要因素

1）操作系統

在操作系統的底部都會顯示系統任務欄，該部分會佔據一定的屏幕空間，windows xp系統中默認的任務欄高度為30px，windows7、windows8與windows10操作系統中默認的任務欄高度均為40px。

2）瀏覽器

不同的瀏覽者可能會使用不同的瀏覽器，在瀏覽器窗口中默認都會顯示狀態欄、菜單欄和滾動條，這些都會佔據網頁在瀏覽窗口中的顯示區域，這些因素也是設計師在設計網頁前需要考慮的。主流瀏覽器的界面參數如下－所示。

主流瀏覽器的界面參數

3）系統分辨率

不同的顯示器有著不同的分辨率設置，這就導致在瀏覽網頁時不同系統分辨率中的可視面積是不同的。根據調查機構對30萬以上的客戶端進行測試，得到如下的測試數據。

通過以上的系統分辨率調查數據結果可以得出適合大多數用戶進行瀏覽的安全分辨率為1336*768，可以建議大分辨率為1280*800。

安全大網頁寬度與首屏高度

根據以上對操作系統、瀏覽器和系統分辨率的分析，可以得出設計網頁的安全寬度為1002px，可建議的較大寬度為1258px。

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

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

三、關於LOGO

作為具有傳媒特性的網站logo，為了在最有效的空間內實現所有的視覺識別功能，一般是通過特定圖案及特定文字的組合，達到對被標識體的出示、說明、溝通和交流，從而激發瀏覽者的興趣，達到增強美譽、記憶等目的。

常見logo表現形式

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

1）特定圖案

兩個網站logo的設計均使用了特定行業的圖案。通過使用具有行業代表性的圖像作為logo圖形的設計，使用戶看到就知道該網站與什麼行業有關，搭配簡潔的文字，表現效果一目了然。

2）特定文字

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

所以特定文字一般作為特定圖案補充，選擇的字體應與整體風格一致，應該盡可能做全新的區別性創作。完整的logo設計，一般都應考慮至少又中英及單獨的圖案、中文、英文的組合形式。

這兩個網站logo的表現效果更加豐富，將logo文字進行藝術化的變形處理並且與具有代表性的logo圖形相結合，使得logo的整體表現效果更加直觀與具有藝術感，能夠給人留下深刻的印象。

3）合成文字

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

＊網站logo是網站特色與內涵的集中體現，它用於傳遞網站的定位和經營理念，同時便於人們識別。在網頁中應用logo是需要注意確保logo的保護空間，確保品牌的清晰展示，但頁不能過多地佔據網頁空間。

設計網站logo的一般流程

第一步：明確需求－我們的網站需要一個什麼樣的logo？

在開始設計logo前，要對該網站的相關資料進行充分了解。如網站的性質、網站的叢屬行業、網站的針對用戶、網站的競爭對手等。還要與網站ui設計人員溝通，保證與網站整體設計風格保持一致。例如，我們需啊喲設計的是一家互聯網的網站logo，作為一個互聯網公司，我們一定要緊跟互聯網潮流，同時希望能夠給用戶一種親切的感覺，並且要一眼能被人記住。經過詳細調研後，可以初步定義logo的表現形式、表現風格等。

第二步：思維導讀

使用鉛筆在白紙上繪製logo的思維導圖。思維導圖可以很好地幫助我們發散思維。除了使用紙、筆外，也可以使用一些專業的思維導圖軟件。

用戶可以從一個關鍵詞開始，逐步構建整個思維導圖。不要局限自己的思維，盡量發散，以獲的更多的可能性。

通過思維導圖，可以獲得幾個重要的關鍵詞。利用這些關鍵詞尋找設計靈感，把想法圖形化。接下來就開始繪製logo的草圖。

第三步：繪製草圖

我們不可能憑空去想像所有的東西，特別是當我們的思維被局限在某一點時，

可以在一些專業的設計網站中找到很多優秀的logo設計。看圖借鑒並不代表“抄襲”，在設計的時候不要去抵觸各種優秀的作品，重要的是從中獲得靈感和啟發，而不是一味的生搬硬套。

第四步：在軟件中精細繪製logo圖形

第五步：設計logo文字，來個完美組合

＊現代人對簡潔、明快、流暢、瞬間印象的訴求使得logo的設計越來越追求一種獨特的、高度的洗練。一些已在用戶群中產生了一定印象的公司為了強化受眾的區別性記憶及持續的品牌忠誠度，通過設計更獨特、更易理解的圖案來強化對既有理念的認同。

四、網站打開速度

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

提高網站頁面打開速度，改善用戶體驗

1）優化圖片

圖片是網頁中最基本的元素之一，圖文結合能夠簡明扼要地闡述主題，提高用戶閱讀興趣。對於圖片的處理及優化，可以將圖片進行自定義大小，能夠有效幫助減少頁面大小，設置圖片的質量，適當控制其容量大小，提高網頁圖片的加載速度。

2）選擇合適的圖片格式

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

3）圖片寬度和高度設置問題

4）合併優化

5）延遲顯示可見區域外的內容

6）精簡代碼

7）延遲加載和執行非必要腳本

8）減少網頁的響應次數

五、合理佈局

網頁佈局最重要的基礎原則是重點突出、主次分明、圖文並茂。網頁的佈局必須與企業的營銷目標相結合，將目標客戶最感興趣的，最具有銷售力的信息放置在最重要的位置。

關於網站頁面合理佈局的用戶體驗：

符合用戶的瀏覽習慣
網頁佈局的操作流程
常見的網頁佈局形式
網頁佈局的原則

常見的網頁佈局形式

一欄式佈局

兩欄式佈局 1）左窄右寬 2）左寬右窄

3）左右均等

三欄式佈局

網頁佈局的原則：協調、一致、流動、均衡、強調等，

另外，在進行網頁佈局設計時，需要考慮導網站頁面的醒目性、創造性、造型性、可讀性和明快性等因素。

六、色彩

色彩常識

色相
明度
純度

網頁等基本配色方法

單色

類似色

補色

鄰近補色

無彩色

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

七、動畫

網頁動畫的應用類型

頁面加載動畫
元素交互動畫
故事型頁面動畫
裝飾性動畫
廣告動畫

網頁動畫的用戶體驗原則

打開速度快，運動流暢
動畫節奏適中
從頁面中的細節元素著手
不能干擾主畫面內容

八、導航

導航在網頁中的佈局形式

佈局在網頁頂部
佈局在網頁底部
佈局在網頁左側
佈局在網頁右側
佈局在網頁中心
響應式導航

九、圖片展示

圖片展示形式

傳統的矩陣展示
大小不一的矩陣展示
瀑布流展示
下一張圖片預覽

圖片展示技巧

圖片與頁面整體協調
使用高質量的清晰圖片
圖片與網站內容的關聯性
大圖很受歡迎
攥取注意力

十、圖標

圖標的設計原則

易識別
風格統一
與網頁協調
富有創意

十一、廣告位

網站常見廣告形式

文字廣告
Banner廣告
對聯式浮動廣告
網頁漂浮廣告
彈出廣告

十二、聲音與視頻

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

在網站頁面中合理地應用與網站主題風格相統一的聲音或視頻元素，可以極大地豐富網站頁面的視聽效果，但還是要為用戶提供控制聲音或視頻的開關，將選擇權交給用戶，避免對用戶造成困擾。

本文由 @乘良－Leon 原創發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基於CC0協議