- 相關(guān)推薦
網(wǎng)站界面的功能介紹及UI設(shè)計(jì)
經(jīng)過近些年的發(fā)展，很多公司已經(jīng)開始明確UI設(shè)計(jì)的重要性，以下是小編整理推薦的一篇探究網(wǎng)站界面功能及設(shè)計(jì)的論文范文，歡迎閱讀查看。
引言
當(dāng)今社會(huì)是信息社會(huì)，互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，給人們的生活方式帶來了巨大的改變。網(wǎng)絡(luò)已成為人們獲取信息的主要途徑，網(wǎng)絡(luò)信息傳播的載體是網(wǎng)站，網(wǎng)站類型多種多樣，展示，但是他們都有一個(gè)共同的特點(diǎn)，就是通過網(wǎng)站內(nèi)部模塊、圖文信息、服務(wù)方式等將信息傳達(dá)給人們，如此多種類型的網(wǎng)站，究竟什么樣的網(wǎng)站才更適合人們獲取準(zhǔn)確、清晰的信息，這就關(guān)乎到網(wǎng)站界面的UI設(shè)計(jì)。
1、網(wǎng)站界面UI設(shè)計(jì)的定義
(1)網(wǎng)站：網(wǎng)站是一種展現(xiàn)現(xiàn)代科技網(wǎng)絡(luò)技術(shù)的新式工具,它可以由多個(gè)網(wǎng)頁集成在一起構(gòu)成一個(gè)站點(diǎn)，在站點(diǎn)上可以放置一些有用的或是需要讓用戶瀏覽的信息。
(2)網(wǎng)站界面：網(wǎng)站界面是網(wǎng)站呈現(xiàn)給人們的非常直觀的一種版面，界面的內(nèi)部設(shè)有許多信息模塊，模塊包含有圖片、文字、音像等等內(nèi)容，人們就是通過這些信息模塊來獲取信息，從而將信息應(yīng)用到人們的各種生活活動(dòng)當(dāng)中。
(3)UI設(shè)計(jì)：UI是用戶界面UserInterface的英文縮寫,UI設(shè)計(jì)是指在設(shè)計(jì)上實(shí)現(xiàn)軟件界面與人的交互操作，并且將其效果實(shí)現(xiàn)的更加合理、更加人性化，從而滿足人們?cè)隗w驗(yàn)操作界面上的心理需求。
2、網(wǎng)站界面的功能介紹
當(dāng)我們打開一個(gè)網(wǎng)站(一個(gè)網(wǎng)站包含著許多個(gè)網(wǎng)頁)的時(shí)候，就會(huì)看到有圖片、文字、音頻、動(dòng)畫等許多模塊組成的版面，稱之為網(wǎng)站中網(wǎng)頁的界面。不同的模塊包含著不同的信息內(nèi)容或服務(wù)，這是一種傳遞信息的方式。當(dāng)然，一個(gè)網(wǎng)站又不止一個(gè)網(wǎng)頁集合而成，每個(gè)網(wǎng)頁上又有許多鏈接可以進(jìn)入不同的網(wǎng)站或是本網(wǎng)站的一個(gè)子網(wǎng)頁，不同的鏈接又可以進(jìn)入不同的功能界面，感受不同的操作體驗(yàn)。
一個(gè)完整的網(wǎng)站包含著網(wǎng)站整體結(jié)構(gòu)的布局、網(wǎng)站展示的背景色調(diào)、網(wǎng)站的LOGO、導(dǎo)航條、廣告、圖文信息、圖文鏈接、子網(wǎng)頁、后臺(tái)管理、公司或企業(yè)注冊(cè)信息、網(wǎng)站版權(quán)等內(nèi)容。
2.1網(wǎng)站的結(jié)構(gòu)布局與視覺感受
網(wǎng)站的結(jié)構(gòu)布局與視覺感受對(duì)一個(gè)網(wǎng)站是否被關(guān)注起著至關(guān)重要的作用。例如一個(gè)網(wǎng)站的首頁如果結(jié)構(gòu)布局凌亂不堪，視覺感官令人厭煩，那么將會(huì)造成瀏覽者對(duì)其關(guān)注的吸引力下降，甚至根本就不會(huì)接著瀏覽該網(wǎng)站所展示的信息，這不僅將會(huì)使公司或企業(yè)損失一位客戶，并且還會(huì)造成極大的負(fù)面影響，給公司或企業(yè)的形象帶來損害。因此，結(jié)構(gòu)布局的合理性，視覺感官的舒適性必將是一個(gè)網(wǎng)站成功與否的關(guān)鍵，這就關(guān)乎到網(wǎng)站界面UI設(shè)計(jì)的技術(shù)性與結(jié)構(gòu)布局的邏輯合理性。
2.2網(wǎng)站的logo
網(wǎng)站的logo是網(wǎng)站的標(biāo)志，網(wǎng)站logo的設(shè)計(jì)也要符合一定的要求，比如易識(shí)別性、與公司的關(guān)聯(lián)性、美觀性等條件。它好比人的面貌氣質(zhì)，透漏著一個(gè)網(wǎng)站的整體信息與形象，因此logo的設(shè)計(jì)同樣重要;界面導(dǎo)航條好比生活中城市街道的指路標(biāo)，導(dǎo)航條內(nèi)容的清晰度、準(zhǔn)確性、操作簡(jiǎn)單易用性同樣關(guān)乎著一個(gè)網(wǎng)站的整體質(zhì)量，是每一個(gè)網(wǎng)站都不可缺少的重要結(jié)構(gòu)之一。
2.3廣告
每個(gè)網(wǎng)站的頁面都會(huì)呈現(xiàn)企業(yè)或公司的宣傳廣告或是公司理念，特別是商業(yè)性質(zhì)的網(wǎng)站會(huì)有關(guān)于產(chǎn)品或服務(wù)的廣告，這些廣告給人以一種直觀、易懂的畫面，從整體上網(wǎng)站頁面的動(dòng)感，從而吸引瀏覽者對(duì)網(wǎng)站的關(guān)注;網(wǎng)站內(nèi)部的圖文信息也起著非常重要的作用。
3、網(wǎng)站界面UI設(shè)計(jì)
包括各類設(shè)計(jì)元素：顏色、布局、菜單、圖標(biāo)以及各種鼠標(biāo)動(dòng)作等。它是技術(shù)與藝術(shù)的結(jié)合。由前期設(shè)計(jì)師把網(wǎng)站界面設(shè)計(jì)后，再由后臺(tái)程序員通過代碼、數(shù)據(jù)庫等技術(shù)輔助實(shí)現(xiàn)的效果。
3.1網(wǎng)站界面UI設(shè)計(jì)應(yīng)具備的條件
3.1.1前后結(jié)合設(shè)計(jì)師：熟悉設(shè)計(jì)軟件，有一定的藝術(shù)設(shè)計(jì)和切圖能力程序員：熟悉CSS\JAVA等程序語言，能夠準(zhǔn)確的將設(shè)計(jì)師的設(shè)計(jì)稿100%還原為HTML文件。
3.1.2色彩運(yùn)用色彩在網(wǎng)頁布局與設(shè)計(jì)方面所表現(xiàn)出的重要性也不可忽視，它能夠使網(wǎng)頁更具活力，更能體現(xiàn)出網(wǎng)頁精彩的一面，能使人感到愉悅舒適，并能烘托出網(wǎng)頁主要信息的整體與協(xié)調(diào)性。色彩布局合理，整個(gè)網(wǎng)頁表現(xiàn)的才更加完整。關(guān)于色彩對(duì)網(wǎng)頁的重要性有許多方面，不同的顏色有不同的含義，也象征著不同的意義，對(duì)于不同的網(wǎng)站又要有不同的色調(diào)，色調(diào)搭配合理，布局設(shè)計(jì)感強(qiáng)，才能將整個(gè)網(wǎng)站表達(dá)的更為成功。
3.1.3軟件應(yīng)用網(wǎng)站界面UI設(shè)計(jì)所需軟件如下表1所示。
3.2網(wǎng)站界面UI設(shè)計(jì)的流程
3.2.1確定網(wǎng)站主題和目標(biāo)用戶需要瀏覽大量的網(wǎng)站和素材來做這項(xiàng)工作。確定網(wǎng)站的類型和準(zhǔn)確的定位，比如屬于什么行業(yè)的網(wǎng)站，規(guī)模有多大，類似的網(wǎng)站有哪些，都有什么特點(diǎn)，而我們要設(shè)計(jì)的網(wǎng)站又有什么和它類似和不同的地方。做一份詳盡的市場(chǎng)調(diào)查，明確該網(wǎng)站的目標(biāo)用戶群的各項(xiàng)特點(diǎn)，年齡、收入、使用習(xí)慣和心理需求等。
3.2.2網(wǎng)站初期規(guī)劃制定待目標(biāo)明確，客戶確定，資料詳細(xì)，用戶調(diào)查統(tǒng)計(jì)完畢，就開始進(jìn)行網(wǎng)站的設(shè)計(jì)，設(shè)計(jì)也要定制不同的方案，以便日后調(diào)整擇優(yōu)，選出最佳方案。
3.2.3進(jìn)行用戶反饋與設(shè)計(jì)定稿設(shè)計(jì)完成后，需要進(jìn)行用戶反饋，根據(jù)用戶反饋的信息來決定設(shè)計(jì)的成功與否，如若不成功則進(jìn)行重新的規(guī)劃設(shè)計(jì)，如若成功就要著手設(shè)計(jì)效果的實(shí)現(xiàn)，并將網(wǎng)站測(cè)試上傳。
3.3網(wǎng)站界面UI設(shè)計(jì)的原則
3.3.1簡(jiǎn)潔性簡(jiǎn)潔給人們的感覺就是整體界面簡(jiǎn)潔清爽，操作起來干脆利落，這樣就會(huì)使人們?cè)诓僮鬟^程中得到更好地體驗(yàn)。
3.3.2數(shù)據(jù)傳達(dá)直觀化界面的設(shè)計(jì)就是為了方便人們迅速獲取有價(jià)值的信息，只有將界面設(shè)計(jì)制作的更加簡(jiǎn)單易懂、清晰易查，才更夠使瀏覽者或是用戶在最短的時(shí)間內(nèi)獲取想要知道的信息，減輕用戶在記憶上的遺忘性。
3.3.3安全性界面的設(shè)計(jì)不能讓用戶感覺到自己不敢操作或是帶有個(gè)人利益的損失等不安全因素。
3.3.4人性化人性化就是指更夠給用戶帶來高效率的操作，使用戶在體驗(yàn)上更加滿意，更加符合用戶想要操作的要求。
3.3.5美觀與協(xié)調(diào)性這就要求設(shè)計(jì)的界面美觀性要與網(wǎng)頁主題內(nèi)容協(xié)調(diào)一致，和諧統(tǒng)一。
4、用戶體驗(yàn)
用戶體驗(yàn)是指“產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用的”,也就是人們?nèi)绾?ldquo;接觸”和“使用”它。網(wǎng)站的用戶體驗(yàn)比任何其它產(chǎn)品都重要。因?yàn)樗且粋�(gè)“自助式”的產(chǎn)品。沒有事先閱讀的說明書，沒有任何操作培訓(xùn)或討論會(huì)，也沒有客戶服務(wù)代表來幫助用戶了解這個(gè)網(wǎng)站。
4.1用戶體驗(yàn)的原則
創(chuàng)建吸引人的、高效的用戶體驗(yàn)的方法被稱為以用戶為中心的設(shè)計(jì)。其思想在于：在開發(fā)產(chǎn)品的每一個(gè)步驟中，都要把用戶列入考慮范圍。
4.2用戶體驗(yàn)的要素
4.2.2表現(xiàn)層表現(xiàn)層是最直觀的。打開一個(gè)APP,你看到的所有形狀、文字、色彩都屬于這一層面。表現(xiàn)層決定了用戶的第一印象，同時(shí)可以通過形狀大小、字體大小、顏色深淺等因素來影響用戶感知，已達(dá)到設(shè)計(jì)目的。
4.2.3框架層在表現(xiàn)層之下，框架層體現(xiàn)了頁面的結(jié)構(gòu)和布局，例如banner的位置、按鈕的位置。好的設(shè)計(jì)就是當(dāng)用戶需要的時(shí)候他恰巧就在那里。
頁面布局要符合用戶習(xí)慣，比如將重要信息放在最佳視域(當(dāng)眼睛偏離視中心時(shí)，在偏離距離相等的情況下，人眼對(duì)左上的觀察最優(yōu)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為“最佳視域”)。舉一個(gè)經(jīng)典例子：一個(gè)新的小區(qū)剛剛建成，小區(qū)外面有一大片草坪，設(shè)計(jì)師沒有急著修路，而是等待。過了一陣子，草坪被踩出了一條條路，設(shè)計(jì)師根據(jù)這些路為基礎(chǔ)進(jìn)行修路。這個(gè)例子也充分體現(xiàn)了“以用戶為中心”的思想。
4.2.4結(jié)構(gòu)層結(jié)構(gòu)層相對(duì)于框架層較為抽象，我們可以將他理解為“聯(lián)接”.框架層是針對(duì)于單頁面的結(jié)構(gòu)設(shè)計(jì)，而結(jié)構(gòu)層則是將單頁面連接在一起，從而形成了系統(tǒng)。拿APP舉例，框架層決定了你點(diǎn)擊頁面icon或按鈕后頁面跳轉(zhuǎn)到了哪一頁。通過刪除、組織、隱藏和轉(zhuǎn)移，將復(fù)雜的結(jié)構(gòu)變的簡(jiǎn)單化，也是提高用戶體驗(yàn)的重要手段。
4.2.5范圍層范圍層可以理解為產(chǎn)品的功能及特性。比如微信可以聊天、查看朋友圈、發(fā)紅包等。范圍層一般是由需求決定，需求則是從用戶中分析提煉而來。試想一個(gè)毫無用處的產(chǎn)品，有人會(huì)去下載嗎?所以，如何分析提取用戶需求，將需求轉(zhuǎn)化為功能，也變得至關(guān)重要。
4.2.6戰(zhàn)略層成功的用戶體驗(yàn)，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”.知道企業(yè)與用戶雙方對(duì)產(chǎn)品的期許和目標(biāo)，有助于確立用戶體驗(yàn)各方面戰(zhàn)略的制定。例如微信的定位是熟人社交，而陌陌則是陌生人社交，兩個(gè)不同的定位解決了用戶不同的需求。
在一個(gè)實(shí)際的產(chǎn)品開發(fā)中，戰(zhàn)略層及范圍層主要由產(chǎn)品經(jīng)理負(fù)責(zé)，而結(jié)構(gòu)層和框架層則由交互設(shè)計(jì)師來完成，表現(xiàn)層由視覺設(shè)計(jì)師完成。特別注意的是，五個(gè)層次并不是相互獨(dú)立的，每個(gè)層次都會(huì)向上或向下輻射，相互影響和完善，工作亦是如此。比如在交互設(shè)計(jì)階段前期，交互設(shè)計(jì)師需要協(xié)助產(chǎn)品經(jīng)理完善場(chǎng)景劇本，從場(chǎng)景中提取功能，確定優(yōu)先級(jí)。
5、總結(jié)
經(jīng)過近些年的發(fā)展，很多公司已經(jīng)開始明確UI設(shè)計(jì)的重要性，UI設(shè)計(jì)也從只重技術(shù)不重設(shè)計(jì)轉(zhuǎn)變?yōu)槎呒骖�。一個(gè)網(wǎng)站，在能夠準(zhǔn)確表達(dá)它要傳達(dá)的意思的同時(shí)，需要給使用者良好的視覺感受和用戶體驗(yàn)。因此，只有將技術(shù)和設(shè)計(jì)、良好的互動(dòng)體驗(yàn)效果結(jié)合起來才能達(dá)到更好的效果，實(shí)現(xiàn)更合理的人機(jī)交互。一款舒適美觀的界面，能給使用者帶來舒適的視覺感受與用戶體驗(yàn)，是科學(xué)技術(shù)與藝術(shù)設(shè)計(jì)相結(jié)合的產(chǎn)物。一個(gè)網(wǎng)站設(shè)計(jì)是否成功，不外乎是最終用戶的使用感受，而UI設(shè)計(jì)就是為了實(shí)現(xiàn)這些易用、直觀、和諧、美觀的目的而服務(wù)的，目的就是設(shè)計(jì)出更加合理的人機(jī)交互界面，從而UI設(shè)計(jì)的價(jià)值。因此，UI設(shè)計(jì)不僅是一種創(chuàng)意，更是一種科學(xué)性的藝術(shù)。
【參考文獻(xiàn)】
[1][英]GilesColborne.交互設(shè)計(jì)四策略[M].北京。人民郵電出版社，2011,7.
[2]彭鋒.美學(xué)與藝術(shù)[M].北京：北京大學(xué)出版社，2005,11.
[3]加瑞特.用戶體驗(yàn)要素[M].北京。機(jī)械工業(yè)出版社，2011,7.
【網(wǎng)站界面的功能介紹及UI設(shè)計(jì)】相關(guān)文章：
出租車多功能計(jì)費(fèi)器的設(shè)計(jì)05-28
提高網(wǎng)站在Google中的排名-面向搜索引擎的網(wǎng)站設(shè)計(jì)05-28
制度的功能06-06
談功能與形態(tài)和諧美的藝術(shù)設(shè)計(jì)理念05-28
在線課程網(wǎng)站設(shè)計(jì)開題報(bào)告（通用8篇）12-22
城市旅游網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)論文（精選6篇）05-07
結(jié)構(gòu)方面的毛病05-08
腸道黏膜SIgA的功能及調(diào)節(jié)08-15
詩人“插隊(duì)”美術(shù)界05-13