論網站UI設計與用戶體驗

劉寧

（中國商飛上海航空工業〈集團〉有限公司，中國 上海 201210）

0 引言

當今社會是信息社會，互聯網技術的飛速發展，給人們的生活方式帶來了巨大的改變。網絡已成為人們獲取信息的主要途徑，網絡信息傳播的載體是網站，網站類型多種多樣，展示，但是他們都有一個共同的特點，就是通過網站內部模塊、圖文信息、服務方式等將信息傳達給人們，如此多種類型的網站，究竟什么樣的網站才更適合人們獲取準確、清晰的信息，這就關乎到網站界面的UI設計。

1 網站界面UI設計的定義

（1）網站：網站是一種展現現代科技網絡技術的新式工具，它可以由多個網頁集成在一起構成一個站點，在站點上可以放置一些有用的或是需要讓用戶瀏覽的信息。

（2）網站界面：網站界面是網站呈現給人們的非常直觀的一種版面，界面的內部設有許多信息模塊，模塊包含有圖片、文字、音像等等內容，人們就是通過這些信息模塊來獲取信息，從而將信息應用到人們的各種生活活動當中。

（3）UI設計：UI是用戶界面User Interface的英文縮寫，UI設計是指在設計上實現軟件界面與人的交互操作，并且將其效果實現的更加合理、更加人性化，從而滿足人們在體驗操作界面上的心理需求。

2 網站界面的功能介紹

當我們打開一個網站（一個網站包含著許多個網頁）的時候，就會看到有圖片、文字、音頻、動畫等許多模塊組成的版面，稱之為網站中網頁的界面。不同的模塊包含著不同的信息內容或服務，這是一種傳遞信息的方式。當然，一個網站又不止一個網頁集合而成，每個網頁上又有許多鏈接可以進入不同的網站或是本網站的一個子網頁，不同的鏈接又可以進入不同的功能界面，感受不同的操作體驗。

一個完整的網站包含著網站整體結構的布局、網站展示的背景色調、網站的LOGO、導航條、廣告、圖文信息、圖文鏈接、子網頁、后臺管理、公司或企業注冊信息、網站版權等內容。

2.1 網站的結構布局與視覺感受

網站的結構布局與視覺感受對一個網站是否被關注起著至關重要的作用。例如一個網站的首頁如果結構布局凌亂不堪，視覺感官令人厭煩，那么將會造成瀏覽者對其關注的吸引力下降，甚至根本就不會接著瀏覽該網站所展示的信息，這不僅將會使公司或企業損失一位客戶，并且還會造成極大的負面影響，給公司或企業的形象帶來損害。因此，結構布局的合理性，視覺感官的舒適性必將是一個網站成功與否的關鍵，這就關乎到網站界面UI設計的技術性與結構布局的邏輯合理性。

2.2 網站的logo

網站的logo是網站的標志，網站logo的設計也要符合一定的要求，比如易識別性、與公司的關聯性、美觀性等條件。它好比人的面貌氣質，透漏著一個網站的整體信息與形象，因此logo的設計同樣重要；界面導航條好比生活中城市街道的指路標，導航條內容的清晰度、準確性、操作簡單易用性同樣關乎著一個網站的整體質量，是每一個網站都不可缺少的重要結構之一。

2.3 廣告

每個網站的頁面都會呈現企業或公司的宣傳廣告或是公司理念，特別是商業性質的網站會有關于產品或服務的廣告，這些廣告給人以一種直觀、易懂的畫面，從整體上網站頁面的動感，從而吸引瀏覽者對網站的關注；網站內部的圖文信息也起著非常重要的作用。

3 網站界面UI設計

包括各類設計元素：顏色、布局、菜單、圖標以及各種鼠標動作等。它是技術與藝術的結合。由前期設計師把網站界面設計后，再由后臺程序員通過代碼、數據庫等技術輔助實現的效果。

3.1 網站界面UI設計應具備的條件

3.1.1 前后結合

設計師：熟悉設計軟件，有一定的藝術設計和切圖能力

程序員：熟悉CSSJAVA等程序語言，能夠準確的將設計師的設計稿100%還原為HTML文件。

3.1.2 色彩運用

色彩在網頁布局與設計方面所表現出的重要性也不可忽視，它能夠使網頁更具活力，更能體現出網頁精彩的一面，能使人感到愉悅舒適，并能烘托出網頁主要信息的整體與協調性。色彩布局合理，整個網頁表現的才更加完整。關于色彩對網頁的重要性有許多方面，不同的顏色有不同的含義，也象征著不同的意義，對于不同的網站又要有不同的色調，色調搭配合理，布局設計感強，才能將整個網站表達的更為成功。

3.1.3 軟件應用

網站界面UI設計所需軟件如下表1所示：

表1

3.2 網站界面UI設計的流程

3.2.1 確定網站主題和目標用戶

需要瀏覽大量的網站和素材來做這項工作。確定網站的類型和準確的定位，比如屬于什么行業的網站，規模有多大，類似的網站有哪些，都有什么特點，而我們要設計的網站又有什么和它類似和不同的地方。

做一份詳盡的市場調查，明確該網站的目標用戶群的各項特點，年齡、收入、使用習慣和心理需求等。

3.2.2 網站初期規劃制定

待目標明確，客戶確定，資料詳細，用戶調查統計完畢，就開始進行網站的設計，設計也要定制不同的方案，以便日后調整擇優，選出最佳方案。

3.2.3 進行用戶反饋與設計定稿

設計完成后，需要進行用戶反饋，根據用戶反饋的信息來決定設計的成功與否，如若不成功則進行重新的規劃設計，如若成功就要著手設計效果的實現，并將網站測試上傳。

3.3 網站界面UI設計的原則

3.3.1 簡潔性

簡潔給人們的感覺就是整體界面簡潔清爽，操作起來干脆利落，這樣就會使人們在操作過程中得到更好地體驗。

3.3.2 數據傳達直觀化

界面的設計就是為了方便人們迅速獲取有價值的信息，只有將界面設計制作的更加簡單易懂、清晰易查，才更夠使瀏覽者或是用戶在最短的時間內獲取想要知道的信息，減輕用戶在記憶上的遺忘性。

3.3.3 安全性

界面的設計不能讓用戶感覺到自己不敢操作或是帶有個人利益的損失等不安全因素。

3.3.4 人性化

人性化就是指更夠給用戶帶來高效率的操作，使用戶在體驗上更加滿意，更加符合用戶想要操作的要求。3.3.5 美觀與協調性

這就要求設計的界面美觀性要與網頁主題內容協調一致，和諧統一。

4 用戶體驗

用戶體驗是指“產品如何與外界發生聯系并發揮作用的”，也就是人們如何“接觸”和“使用”它。網站的用戶體驗比任何其它產品都重要。因為它是一個“自助式”的產品。沒有事先閱讀的說明書，沒有任何操作培訓或討論會，也沒有客戶服務代表來幫助用戶了解這個網站。

4.1 用戶體驗的原則

創建吸引人的、高效的用戶體驗的方法被稱為以用戶為中心的設計。其思想在于：在開發產品的每一個步驟中，都要把用戶列入考慮范圍。

4.2 用戶體驗的要素

4.2.2 表現層

表現層是最直觀的。打開一個APP，你看到的所有形狀、文字、色彩都屬于這一層面。表現層決定了用戶的第一印象，同時可以通過形狀大小、字體大小、顏色深淺等因素來影響用戶感知，已達到設計目的。

4.2.3 框架層

在表現層之下，框架層體現了頁面的結構和布局，例如banner的位置、按鈕的位置。好的設計就是當用戶需要的時候他恰巧就在那里。頁面布局要符合用戶習慣，比如將重要信息放在最佳視域（當眼睛偏離視中心時，在偏離距離相等的情況下，人眼對左上的觀察最優，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為“最佳視域”）。舉一個經典例子：一個新的小區剛剛建成，小區外面有一大片草坪，設計師沒有急著修路，而是等待。過了一陣子，草坪被踩出了一條條路，設計師根據這些路為基礎進行修路。這個例子也充分體現了“以用戶為中心”的思想。

4.2.4 結構層

結構層相對于框架層較為抽象，我們可以將他理解為“聯接”。框架層是針對于單頁面的結構設計，而結構層則是將單頁面連接在一起，從而形成了系統。拿APP舉例，框架層決定了你點擊頁面icon或按鈕后頁面跳轉到了哪一頁。通過刪除、組織、隱藏和轉移，將復雜的結構變的簡單化，也是提高用戶體驗的重要手段。

4.2.5 范圍層

范圍層可以理解為產品的功能及特性。比如微信可以聊天、查看朋友圈、發紅包等。范圍層一般是由需求決定，需求則是從用戶中分析提煉而來。試想一個毫無用處的產品，有人會去下載嗎？所以，如何分析提取用戶需求，將需求轉化為功能，也變得至關重要。

4.2.6 戰略層

成功的用戶體驗，其基礎是一個被明確表達的“戰略”。知道企業與用戶雙方對產品的期許和目標，有助于確立用戶體驗各方面戰略的制定。例如微信的定位是熟人社交，而陌陌則是陌生人社交，兩個不同的定位解決了用戶不同的需求。

在一個實際的產品開發中，戰略層及范圍層主要由產品經理負責，而結構層和框架層則由交互設計師來完成，表現層由視覺設計師完成。特別注意的是，五個層次并不是相互獨立的，每個層次都會向上或向下輻射，相互影響和完善，工作亦是如此。比如在交互設計階段前期，交互設計師需要協助產品經理完善場景劇本，從場景中提取功能，確定優先級。

5 總結

經過近些年的發展，很多公司已經開始明確UI設計的重要性，UI設計也從只重技術不重設計轉變為二者兼顧。一個網站，在能夠準確表達它要傳達的意思的同時，需要給使用者良好的視覺感受和用戶體驗。因此，只有將技術和設計、良好的互動體驗效果結合起來才能達到更好的效果，實現更合理的人機交互。一款舒適美觀的界面，能給使用者帶來舒適的視覺感受與用戶體驗，是科學技術與藝術設計相結合的產物。一個網站設計是否成功，不外乎是最終用戶的使用感受，而UI設計就是為了實現這些易用、直觀、和諧、美觀的目的而服務的，目的就是設計出更加合理的人機交互界面，從而UI設計的價值。因此，UI設計不僅是一種創意，更是一種科學性的藝術。

［1］[英]Giles Colborne.交互設計四策略[M].北京.人民郵電出版社，2011,7.

［2］彭鋒.美學與藝術[M].北京：北京大學出版社，2005,11.

［3］加瑞特.用戶體驗要素[M].北京.機械工業出版社，2011,7.