網(wǎng)站界面的功能介紹及UI設計發(fā)布者：本站     時(shí)間：2020-05-05 13:05:05

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

1 網(wǎng)站界面UI設計的定義

（1）網(wǎng)站：網(wǎng)站是一種展現現代科技網(wǎng)絡(luò )技術(shù)的新式工具 ,它可以由多個(gè)網(wǎng)頁(yè)集成在一起構成一個(gè)站點(diǎn)，在站點(diǎn)上可以放置一些有用的或是需要讓用戶(hù)瀏覽的信息。

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

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

2 網(wǎng)站界面的功能介紹

當我們打開(kāi)一個(gè)網(wǎng)站（一個(gè)網(wǎng)站包含著(zhù)許多個(gè)網(wǎng)頁(yè)）的時(shí)候，就會(huì )看到有圖片、文字、音頻、動(dòng)畫(huà)等許多模塊組成的版面，稱(chēng)之為網(wǎng)站中網(wǎng)頁(yè)的界面。 不同的模塊包含著(zhù)不同的信息內容或服務(wù)，這是一種傳遞信息的方式。當然，一個(gè)網(wǎng)站又不止一個(gè)網(wǎng)頁(yè)集合而成，每個(gè)網(wǎng)頁(yè)上又有許多鏈接可以進(jìn)入不同的網(wǎng)站或是本網(wǎng)站的一個(gè)子網(wǎng)頁(yè)，不同的鏈接又可以進(jìn)入不同的功能界面，感受不同的操作體驗。

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

2.1 網(wǎng)站的結構布局與視覺(jué)感受

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

2.2 網(wǎng)站的 logo

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

2.3 廣告

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

3 網(wǎng)站界面UI設計

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

3.1 網(wǎng)站界面 UI 設計應具備的條件

3.1.1 前后結合設計師：熟悉設計軟件，有一定的藝術(shù)設計和切圖能力程序員：熟悉 CSS\JAVA 等程序語(yǔ)言，能夠準確的將設計師的設計稿 100%還原為 HTML 文件。

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

3.1.3 軟件應用網(wǎng)站界面 UI 設計所需軟件如下表 1 所示。

3.2 網(wǎng)站界面 UI 設計的流程

3.2.1 確定網(wǎng)站主題和目標用戶(hù)需要瀏覽大量的網(wǎng)站和素材來(lái)做這項工作。確定網(wǎng)站的類(lèi)型和準確的定位，比如屬于什么行業(yè)的網(wǎng)站，規模有多大，類(lèi)似的網(wǎng)站有哪些，都有什么特點(diǎn)，而我們要設計的網(wǎng)站又有什么和它類(lèi)似和不同的地方。做一份詳盡的市場(chǎng)調查， 明確該網(wǎng)站的目標用戶(hù)群的各項特點(diǎn)，年齡、收入、使用習慣和心理需求等。

3.2.2 網(wǎng)站初期規劃制定待目標明確，客戶(hù)確定，資料詳細，用戶(hù)調查統計完畢，就開(kāi)始進(jìn)行網(wǎng)站的設計，設計也要定制不同的方案，以便日后調整擇優(yōu)，選出最佳方案。

3.2.3 進(jìn)行用戶(hù)反饋與設計定稿設計完成后，需要進(jìn)行用戶(hù)反饋，根據用戶(hù)反饋的信息來(lái)決定設計的成功與否，如若不成功則進(jìn)行重新的規劃設計，如若成功就要著(zhù)手設計效果的實(shí)現，并將網(wǎng)站測試上傳。

3.3 網(wǎng)站界面 UI 設計的原則

3.3.1 簡(jiǎn)潔性簡(jiǎn)潔給人們的感覺(jué)就是整體界面簡(jiǎn)潔清爽， 操作起來(lái)干脆利落，這樣就會(huì )使人們在操作過(guò)程中得到更好地體驗。

3.3.2 數據傳達直觀(guān)化界面的設計就是為了方便人們迅速獲取有價(jià)值的信息，只有將界面設計制作的更加簡(jiǎn)單易懂、清晰易查，才更夠使瀏覽者或是用戶(hù)在最短的時(shí)間內獲取想要知道的信息，減輕用戶(hù)在記憶上的遺忘性。

3.3.3 安全性界面的設計不能讓用戶(hù)感覺(jué)到自己不敢操作或是帶有個(gè)人利益的損失等不安全因素。

3.3.4 人性化人性化就是指更夠給用戶(hù)帶來(lái)高效率的操作，使用戶(hù)在體驗上更加滿(mǎn)意，更加符合用戶(hù)想要操作的要求。

3.3.5 美觀(guān)與協(xié)調性這就要求設計的界面美觀(guān)性要與網(wǎng)頁(yè)主題內容協(xié)調一致，和諧統一。

4 用戶(hù)體驗

用戶(hù)體驗是指“產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用的”,也就是人們如何“接觸”和“使用”它。 網(wǎng)站的用戶(hù)體驗比任何其它產(chǎn)品都重要。 因為它是一個(gè)“自助式”的產(chǎn)品。 沒(méi)有事先閱讀的說(shuō)明書(shū)，沒(méi)有任何操作培訓或討論會(huì )，也沒(méi)有客戶(hù)服務(wù)代表來(lái)幫助用戶(hù)了解這個(gè)網(wǎng)站。

4.1 用戶(hù)體驗的原則

創(chuàng )建吸引人的、高效的用戶(hù)體驗的方法被稱(chēng)為以用戶(hù)為中心的設計。其思想在于：在開(kāi)發(fā)產(chǎn)品的每一個(gè)步驟中，都要把用戶(hù)列入考慮范圍。

4.2 用戶(hù)體驗的要素

4.2.2 表現層表現層是最直觀(guān)的。 打開(kāi)一個(gè) APP,你看到的所有形狀、文字、色彩都屬于這一層面。 表現層決定了用戶(hù)的第一印象，同時(shí)可以通過(guò)形狀大小、字體大小、顏色深淺等因素來(lái)影響用戶(hù)感知，已達到設計目的。

4.2.3 框架層在表現層之下，框架層體現了頁(yè)面的結構和布局，例如 banner 的位置、按鈕的位置。好的設計就是當用戶(hù)需要的時(shí)候他恰巧就在那里。

頁(yè)面布局要符合用戶(hù)習慣，比如將重要信息放在最佳視域（當眼睛偏離視中心時(shí)，在偏離距離相等的情況下，人眼對左上的觀(guān)察最優(yōu)，依次為右上，左下，而右下最差。 因此，左上部和上中部被稱(chēng)為“最佳視域”）。舉一個(gè)經(jīng)典例子：一個(gè)新的小區剛剛建成，小區外面有一大片草坪，設計師沒(méi)有急著(zhù)修路，而是等待。 過(guò)了一陣子，草坪被踩出了一條條路，設計師根據這些路為基礎進(jìn)行修路。這個(gè)例子也充分體現了“以用戶(hù)為中心”的思想。

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

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

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

在一個(gè)實(shí)際的產(chǎn)品開(kāi)發(fā)中， 戰略層及范圍層主要由產(chǎn)品經(jīng)理負責，而結構層和框架層則由交互設計師來(lái)完成，表現層由視覺(jué)設計師完成。特別注意的是，五個(gè)層次并不是相互獨立的，每個(gè)層次都會(huì )向上或向下輻射，相互影響和完善，工作亦是如此。比如在交互設計階段前期，交互設計師需要協(xié)助產(chǎn)品經(jīng)理完善場(chǎng)景劇本，從場(chǎng)景中提取功能，確定優(yōu)先級。

5 總結

經(jīng)過(guò)近些年的發(fā)展，很多公司已經(jīng)開(kāi)始明確 UI 設計的重要性，UI設計也從只重技術(shù)不重設計轉變?yōu)槎呒骖櫋?一個(gè)網(wǎng)站，在能夠準確表達它要傳達的意思的同時(shí)，需要給使用者良好的視覺(jué)感受和用戶(hù)體驗。因此，只有將技術(shù)和設計、良好的互動(dòng)體驗效果結合起來(lái)才能達到更好的效果，實(shí)現更合理的人機交互。一款舒適美觀(guān)的界面，能給使用者帶來(lái)舒適的視覺(jué)感受與用戶(hù)體驗，是科學(xué)技術(shù)與藝術(shù)設計相結合的產(chǎn)物。 一個(gè)網(wǎng)站設計是否成功，不外乎是最終用戶(hù)的使用感受，而 UI設計就是為了實(shí)現這些易用、直觀(guān)、和諧、美觀(guān)的目的而服務(wù)的，目的就是設計出更加合理的人機交互界面，從而 UI 設計的價(jià)值。 因此，UI設計不僅是一種創(chuàng )意，更是一種科學(xué)性的藝術(shù)。