網(wǎng)站界面UI設(shè)計(jì)

2014屆本科畢業(yè)論文網(wǎng)站界面UI設(shè)計(jì)名：系別：計(jì)算機(jī)與信息技術(shù)學(xué)院專業(yè)：信息管理與信息系統(tǒng)學(xué)號(hào)： 指導(dǎo)教師： 2014年4月13日TOC\o"1-5"\h\z\o"CurrentDocument"1網(wǎng)站網(wǎng)站界面UI設(shè)計(jì)的定義 1\o"CurrentDocument"1.1網(wǎng)站 1\o"CurrentDocument"1.2網(wǎng)站界面 1\o"CurrentDocument"UI設(shè)計(jì) 1\o"CurrentDocument"2網(wǎng)站的類型與作用 1\o"CurrentDocument"2.1資訊門戶類網(wǎng)站 1\o"CurrentDocument"2.2企業(yè)品牌類網(wǎng)站 1\o"CurrentDocument"2.3交易類網(wǎng)站 1\o"CurrentDocument"2.4社區(qū)類網(wǎng)站 1\o"CurrentDocument"2.5政府機(jī)構(gòu)類網(wǎng)站 1\o"CurrentDocument"3網(wǎng)站界面的功能介紹 2\o"CurrentDocument"3.1網(wǎng)站的結(jié)構(gòu)布局與視覺感受 2\o"CurrentDocument"3.2網(wǎng)站的LOGO 2\o"CurrentDocument"3.3廣告 2\o"CurrentDocument"4網(wǎng)站界面UI設(shè)計(jì) 2\o"CurrentDocument"4.1網(wǎng)站界面UI設(shè)計(jì)應(yīng)具備的條件 24.1.1熟悉網(wǎng)站知識(shí)，并能獨(dú)立完成項(xiàng)目開發(fā)，網(wǎng)頁(yè)設(shè)計(jì)等相關(guān)操作 24.1.2要有一定的色彩運(yùn)用知識(shí) 34.1.3要具備較強(qiáng)的軟件使用操作能力 34.1.4要具備一定的專業(yè)素質(zhì)與職業(yè)道德 4\o"CurrentDocument"4.2網(wǎng)站界面UI設(shè)計(jì)的流程 44.2.1確定網(wǎng)站主題和目標(biāo)用戶 44.2.2搜集有關(guān)主題的各種信息及進(jìn)行用戶調(diào)查 44.2.3網(wǎng)站初期規(guī)劃制定 44.2.4進(jìn)行用戶反饋與設(shè)計(jì)定稿 4\o"CurrentDocument"4.3網(wǎng)站界面UI設(shè)計(jì)的原則 44.3.1簡(jiǎn)易性 44.3.2記憶負(fù)擔(dān)最小化 44.3.3安全性 44.3.4人性化 44.3.5美觀與協(xié)調(diào)性原則 4\o"CurrentDocument"4.4網(wǎng)站界面UI設(shè)計(jì)的意義 5\o"CurrentDocument"5網(wǎng)站界面UI設(shè)計(jì)的走向 5\o"CurrentDocument"5.1固定頭部 5\o"CurrentDocument"5.2大背景圖片 5\o"CurrentDocument"CSS透明 5\o"CurrentDocument"5.4社交媒體標(biāo)記 5\o"CurrentDocument"5.5滑動(dòng)的網(wǎng)頁(yè)面板 5\o"CurrentDocument"5.6CSS動(dòng)畫 5\o"CurrentDocument"總結(jié) 5\o"CurrentDocument"參考文獻(xiàn) 6致謝 7網(wǎng)站界面UI設(shè)計(jì)摘要ui的本意就是用戶界面，而用戶界面是人與機(jī)的交互，要使人機(jī)交互和諧、溝通順暢，就必須設(shè)計(jì)出符合人機(jī)操作的簡(jiǎn)易性、合理性，來拉近人與機(jī)之間的距離。在發(fā)展迅速的互聯(lián)網(wǎng)科技信息時(shí)代，知識(shí)在不斷更新，科技越來越發(fā)達(dá)，界面的設(shè)計(jì)工作漸漸地被重視起來。一個(gè)網(wǎng)站擁有美觀的界面會(huì)給人們帶來舒適的視覺享受與操作體驗(yàn)，是建立在科學(xué)技術(shù)性上的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)既不是某個(gè)項(xiàng)目開發(fā)組領(lǐng)導(dǎo)的意見也不是項(xiàng)目成員投票的結(jié)果，更不是設(shè)計(jì)師的個(gè)人意愿，而是終端用戶的感受，ui設(shè)計(jì)就是為了實(shí)現(xiàn)這些和諧、舒適、協(xié)調(diào)、美觀而產(chǎn)生的，目的就是設(shè)計(jì)出更加合理的人機(jī)交互界面，實(shí)現(xiàn)人機(jī)交互的合理性，實(shí)現(xiàn)ui設(shè)計(jì)的價(jià)值意義。本文的主要內(nèi)容就是針對(duì)網(wǎng)站界面的ui設(shè)計(jì)進(jìn)行了相關(guān)的闡述，來進(jìn)一步探究皿設(shè)計(jì)的重要性。關(guān)鍵詞網(wǎng)站；網(wǎng)頁(yè)設(shè)計(jì)；UI設(shè)計(jì)；交互界面WebinterfacedesignofUIAbstractUIwastheoriginalpurposeoftheuserinterface,andtheuserinterfaceistheinteractionbetweenpeopleandmachines,tomakethehuman-computerinteractionandharmonious,smoothcommunication,itisnecessarytodesigntheman-machineoperationsimplicity,rationality,topullclosethedistancebetweenthemachine.WiththerapiddevelopmentofInternettechnology,knowledgeontheincrease,technologyfurtherdeveloped,interfacedesignofalittlebitofattention.Awebsitewithgoodinterfacewillbringcomfortablevisionforpeopletoenjoyandoperatingexperience,theartisticdesignisbasedonthescienceandtechnologyofthestandardtest,aninterfaceisnotaprojectgroupleader'sopinionnorprojectmembersvotingresults,moreisnotthedesigner'spersonalwishes,buttheterminalthefeelingoftheusers,theUIisdesignedtorealizetheharmonious,comfortable,harmonious,beautifulandproduces,thepurposeistodesignamorereasonableman-machineinterface,realizetherationalityofhuman-computerinteraction,therealizationofthevalueofthesignificanceofUIdesign.ThemaincontentofthispaperisaimedatthewebinterfacedesignofUIisdiscussedindetails,tofurtherexploretheimportanceofUIdesign.KeywordsWebsite；WebpageDesign；UserInterfaceDesign；InteractionInterface引言21世紀(jì)的今天，科技、經(jīng)濟(jì)、人們的生活方式較以往發(fā)生了巨大的改變，是人類的進(jìn)步推動(dòng)了社會(huì)的發(fā)展。互聯(lián)網(wǎng)的發(fā)明給人們的生活方式帶來了新的改變，互聯(lián)網(wǎng)代表著一種嶄新的信息交流方式，它使信息的交流與傳播打破了地域上的限制，擴(kuò)大了信息交流與傳播的范圍，提高了速度與效率。當(dāng)今是科技的時(shí)代，更是信息發(fā)達(dá)的時(shí)代，信息的作用在社會(huì)發(fā)展中占有舉足輕重的地位，而目前互聯(lián)網(wǎng)的信息傳播方式大都展現(xiàn)在網(wǎng)站上，而網(wǎng)站的類型又是多種多樣的，不同的類型給人們傳達(dá)的信息方式也是不一樣的，但是他們都有一個(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)站網(wǎng)站界面UI設(shè)計(jì)的定義1.1網(wǎng)站網(wǎng)站：網(wǎng)站是一種展現(xiàn)現(xiàn)代科技網(wǎng)絡(luò)技術(shù)的新式工具，它可以將多個(gè)網(wǎng)頁(yè)集成在一起構(gòu)成一個(gè)站點(diǎn)，在站點(diǎn)上可以放置一些有用的或是需要讓用戶瀏覽的信息。1.2網(wǎng)站界面網(wǎng)站界面是網(wǎng)站呈現(xiàn)給人們的非常直觀的一種版面，界面的內(nèi)部設(shè)有許多信息模塊，模塊包含有圖片、文字、音像等等內(nèi)容，人們就是通過這些信息模塊來獲取信息，從而將信息應(yīng)用到人們的各種生活活動(dòng)當(dāng)中。1.3UI設(shè)計(jì)UI設(shè)計(jì)：UI的英文全稱為UserInterface，指的是用戶界面的意思，那么UI設(shè)計(jì)就是指在設(shè)計(jì)上實(shí)現(xiàn)軟件界面與人的交互操作，并且將其效果實(shí)現(xiàn)的更加合理、更加人性化，從而滿足人們?cè)隗w驗(yàn)操作界面上的心理需求。2網(wǎng)站的類型與作用網(wǎng)站有各種各樣的類型，也有各種各樣的作用，大致可分為以下幾種：2.1資訊門戶類網(wǎng)站這類網(wǎng)站以提供信息資訊為主要目的。它是目前最流行的網(wǎng)站形式之一，此類網(wǎng)站雖然所涉及的功能比較簡(jiǎn)單，但所包含的工作類型卻很多，信息擁有量大，訪問對(duì)象廣，它的功能一般包含查找、討論、留言，另外還有少數(shù)設(shè)置了瀏覽權(quán)限的控制。比如很多企業(yè)網(wǎng)站中設(shè)立只對(duì)代理商設(shè)計(jì)的欄目或是頻道，如新浪、搜狐、新華網(wǎng)。2.2企業(yè)品牌類網(wǎng)站企業(yè)品牌類網(wǎng)站非常重視在設(shè)計(jì)上的創(chuàng)意，對(duì)于優(yōu)化設(shè)計(jì)方面要求相當(dāng)嚴(yán)格，優(yōu)美的flash動(dòng)畫是這類網(wǎng)站常用的表現(xiàn)形式之一。比如：聯(lián)想IBM。2.3交易類網(wǎng)站這類網(wǎng)站的目的是實(shí)現(xiàn)溝通商議的達(dá)成，以客戶所下的訂單為中心，其重點(diǎn)在于業(yè)務(wù)模型的質(zhì)量好壞。比如：淘寶、易趣、拍拍。2.4社區(qū)類網(wǎng)站社區(qū)網(wǎng)站是指分了很多類的，有很多注冊(cè)用戶的大型網(wǎng)站，和BBS具有相似的功能。比如:貓撲、天涯。2.5政府機(jī)構(gòu)類網(wǎng)站政府機(jī)構(gòu)類網(wǎng)站一般指政府機(jī)關(guān)所設(shè)立的網(wǎng)站。比如：稅務(wù)局類網(wǎng)站、政府網(wǎng)站。3網(wǎng)站界面的功能介紹當(dāng)我們打開一個(gè)網(wǎng)站（一個(gè)網(wǎng)站包含著許多個(gè)網(wǎng)頁(yè)）的時(shí)候，就會(huì)看到有圖片、文字、音頻、動(dòng)畫等許多模塊組成的版面，我們稱之為網(wǎng)站中網(wǎng)頁(yè)的界面。不同的模塊包含著不同的信息內(nèi)容或服務(wù)，這是一種傳遞信息的方式。當(dāng)然，一個(gè)網(wǎng)站又不止一個(gè)網(wǎng)頁(yè)集合而成，每個(gè)網(wǎng)頁(yè)上又有許多鏈接可以進(jìn)入不同的網(wǎng)站或是本網(wǎng)站的一個(gè)子網(wǎng)頁(yè)，不同的鏈接又可以進(jìn)入不同的功能界面，感受不同的操作體驗(yàn)。一個(gè)完整的網(wǎng)站包含著網(wǎng)站整體結(jié)構(gòu)的布局、網(wǎng)站展示的背景色調(diào)、網(wǎng)站的LOGO、導(dǎo)航條、廣告、圖文信息、圖文鏈接、子網(wǎng)頁(yè)、后臺(tái)管理、公司或企業(yè)注冊(cè)信息、網(wǎng)站版權(quán)等內(nèi)容。3.1網(wǎng)站的結(jié)構(gòu)布局與視覺感受網(wǎng)站的結(jié)構(gòu)布局與視覺感受對(duì)一個(gè)網(wǎng)站是否被關(guān)注起著至關(guān)重要的作用。例如一個(gè)網(wǎng)站的首頁(yè)如果結(jié)構(gòu)布局凌亂不堪，視覺感官令人厭煩，那么將會(huì)造成瀏覽者對(duì)其關(guān)注的吸引力下降，甚至根本就不會(huì)接著瀏覽該網(wǎng)站所展示的信息，這不僅將會(huì)使公司或企業(yè)損失一位客戶，并且還會(huì)造成極大的負(fù)面影響，給公司或企業(yè)的形象帶來?yè)p害。因此，結(jié)構(gòu)布局的合理性，視覺感官的舒適性必將是一個(gè)網(wǎng)站成功與否的關(guān)鍵，這就關(guān)乎到網(wǎng)站界面UI設(shè)計(jì)的技術(shù)性與結(jié)構(gòu)布局的邏輯合理性。3.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)之一。3.3廣告每個(gè)網(wǎng)站的頁(yè)面都會(huì)呈現(xiàn)企業(yè)或公司的宣傳廣告或是公司理念，特別是商業(yè)性質(zhì)的網(wǎng)站會(huì)有關(guān)于產(chǎn)品或服務(wù)的廣告，這些廣告給人以一種直觀、易懂的畫面，從整體上網(wǎng)站頁(yè)面的動(dòng)感，從而吸引瀏覽者對(duì)網(wǎng)站的關(guān)注；網(wǎng)站內(nèi)部的圖文信息也起著非常重要的作用，圖文信息表現(xiàn)出了一個(gè)網(wǎng)站的服務(wù)內(nèi)容，圖文信息的合理性、簡(jiǎn)潔性、易懂性、吸引性也關(guān)乎著一個(gè)網(wǎng)站整體的質(zhì)量，若圖文信息過于雜亂，過于繁瑣，必將引起瀏覽者獲取信息的不滿，因此在編排上，內(nèi)容上，信息準(zhǔn)確易懂，內(nèi)容精簡(jiǎn)易讀上都要有合理的布局，以將圖文信息表達(dá)的更合乎情理，更準(zhǔn)確高效。以上這些內(nèi)容都是一個(gè)網(wǎng)站所必備的重要內(nèi)容，關(guān)系著整個(gè)網(wǎng)站的好與壞，甚至成敗。而這些成敗的關(guān)鍵因素還在于UI設(shè)計(jì)的合理性，因?yàn)榫W(wǎng)站中所展示出來的所有內(nèi)容都是一種UI設(shè)計(jì)，而UI設(shè)計(jì)與用戶的體驗(yàn)是分不開的，UI設(shè)計(jì)的好就說明用戶體驗(yàn)好，用戶體驗(yàn)差就說明UI設(shè)計(jì)的差，因此一個(gè)網(wǎng)站的UI設(shè)計(jì)是相當(dāng)?shù)闹匾瑢?duì)于網(wǎng)站將來的成功起著決定作用。4網(wǎng)站界面UI設(shè)計(jì)4.1網(wǎng)站界面UI設(shè)計(jì)應(yīng)具備的條件4.1.1熟悉網(wǎng)站知識(shí)，并能獨(dú)立完成項(xiàng)目開發(fā)，網(wǎng)頁(yè)設(shè)計(jì)等相關(guān)操作要想從事網(wǎng)站界面的UI設(shè)計(jì)，必須要懂得網(wǎng)站知識(shí)。例如網(wǎng)站的制作流程，網(wǎng)頁(yè)整體的頁(yè)面布局，以及相關(guān)網(wǎng)站性質(zhì)的知識(shí)，并能夠把控網(wǎng)站的整體統(tǒng)一性。設(shè)計(jì)一個(gè)網(wǎng)站不僅僅是將圖文信息、音像等信息擺放到頁(yè)面那么簡(jiǎn)單，而是要從用戶實(shí)用性入手，清楚明了所要設(shè)計(jì)的網(wǎng)站的性質(zhì)，看是什么類型的網(wǎng)站，政府機(jī)構(gòu)的還是商業(yè)用途的，不同的性質(zhì)有不同的設(shè)計(jì)風(fēng)格，例如政府機(jī)構(gòu)的網(wǎng)站是一種與社會(huì)人民相互溝通、公告信息、發(fā)布條文類的網(wǎng)站，主要是為了公眾能夠獲知一些政府的重要舉措，重要下達(dá)文件，及倡導(dǎo)社會(huì)民風(fēng)，道德規(guī)范等等。有了對(duì)網(wǎng)站整體系統(tǒng)的了解，才能設(shè)計(jì)出更加合乎情理的網(wǎng)站頁(yè)面。那么何為合乎情理呢？這就要從網(wǎng)頁(yè)設(shè)計(jì)的目的來說，設(shè)計(jì)一個(gè)網(wǎng)頁(yè)就是要突出該網(wǎng)頁(yè)所要呈現(xiàn)出來的主要信息，讓瀏覽者一眼就能看出重點(diǎn)信息，如若網(wǎng)頁(yè)信息過于繁多，又突出不了主要信息，看不出信息等級(jí)的差別或是層次，那么瀏覽者就會(huì)費(fèi)力去查看這些信息給他們的獲取帶來不便。如果瀏覽者沒有一定的耐心，就可能不會(huì)繼續(xù)瀏覽網(wǎng)頁(yè)，甚至產(chǎn)生厭惡，結(jié)果就是一個(gè)客戶的丟失，網(wǎng)站形象的倒塌，因此主題信息需要明確突出，這一點(diǎn)是很關(guān)鍵的。有了主題信息就要圍繞主題進(jìn)行設(shè)計(jì)，包括其它板塊的設(shè)計(jì)都離不開主題所要表達(dá)的內(nèi)容信息，而這些承載內(nèi)容信息的其他版塊又要有一個(gè)合理的規(guī)劃，包括文字信息的精煉簡(jiǎn)潔，擺放位置的合理易查等。綜合上述就可以對(duì)整個(gè)網(wǎng)頁(yè)進(jìn)行一個(gè)合理的布局設(shè)計(jì)了，這個(gè)環(huán)節(jié)相當(dāng)重要，因?yàn)槊總€(gè)網(wǎng)站頁(yè)面的所有板塊都不是隨意擺放的，他們擺放的位置是經(jīng)過仔細(xì)定位認(rèn)真考慮、邏輯感官所布局的。比如人們的視覺感官或是圖文呈現(xiàn)的視覺沖擊力，就一些圖片模塊而言，要有一種視覺集中顯現(xiàn)的布局，包括圖片的角度，視覺聚焦的范圍，這都要求有一定的設(shè)計(jì)感和布局順序性，這只是描述布局方面的一個(gè)局部，關(guān)于網(wǎng)頁(yè)的布局還有很多，但都脫離不了主題的最終傳達(dá)與整個(gè)版面的主旨信息，這樣就可組織不同的模塊信息進(jìn)行對(duì)網(wǎng)頁(yè)的布局了。4.1.2要有一定的色彩運(yùn)用知識(shí)色彩在網(wǎng)頁(yè)布局與設(shè)計(jì)方面所表現(xiàn)出的重要性也不可忽視，它能夠使網(wǎng)頁(yè)更具活力，更能體現(xiàn)出網(wǎng)頁(yè)精彩的一面，能使人感到愉悅舒適，并能烘托出網(wǎng)頁(yè)主要信息的整體與協(xié)調(diào)性。色彩布局合理，整個(gè)網(wǎng)頁(yè)表現(xiàn)的才更加完整。關(guān)于色彩對(duì)網(wǎng)頁(yè)的重要性有許多方面，比如冷暖色調(diào)的搭配，不同顏色所代表的意義，好比紅色代表著激情、火力、歡樂、正能量；藍(lán)色代表著理智、淡定、穩(wěn)重;綠色代表著年輕、希望、成長(zhǎng)；黃色代表著智慧、正氣、樂觀等。不同的顏色有不同的含義，也象征著不同的意義，對(duì)于不同的網(wǎng)站又要有不同的色調(diào)，色調(diào)搭配合理，布局設(shè)計(jì)感強(qiáng)，才能將整個(gè)網(wǎng)站表達(dá)的更為成功，否則就會(huì)適得其反，得不到想要表達(dá)的主旨意義。就好比一個(gè)婚慶網(wǎng)站用灰色或是藍(lán)色來作為主題色調(diào)，那么即使網(wǎng)站布局的再漂亮，內(nèi)容設(shè)計(jì)的再優(yōu)美，廣告設(shè)計(jì)的再精彩，在客戶看來這都不會(huì)使他們感覺到那種帶著歡樂與幸福的氣氛，婚慶網(wǎng)站要突出的主題是獲得美滿的婚姻，有一個(gè)幸福快樂的家庭的誕生，可是灰色、藍(lán)色給人的感覺并不是這樣的，這就說明了色彩在制作網(wǎng)頁(yè)時(shí)的重要性。所以說色彩的運(yùn)用在網(wǎng)頁(yè)設(shè)計(jì)上是必不可少的，占有一定的地位。4.1.3要具備較強(qiáng)的軟件使用操作能力對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的布局和色彩的運(yùn)用及相關(guān)網(wǎng)頁(yè)知識(shí)有個(gè)整體的了解才能設(shè)計(jì)出一個(gè)成功的網(wǎng)頁(yè)版面，但是只會(huì)描繪出這種成功的版面是遠(yuǎn)遠(yuǎn)不夠的，因?yàn)榘婷嬉尸F(xiàn)給人們就要將其設(shè)計(jì)出來，而設(shè)計(jì)出來還需要借助處理軟件將其效果實(shí)現(xiàn)出來，若沒有這種處理軟件的運(yùn)用能力，就不能將其效果實(shí)現(xiàn)出來，從而展示不了給人們，那么再好的頁(yè)面，再成功的設(shè)計(jì)也算是沒有價(jià)值了。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)必須掌握以下軟件的應(yīng)用操作：Photoshop：AdobePhotoshop，簡(jiǎn)稱“PS”它主要用來處理編輯以像素為單位構(gòu)成的圖像，在矢量圖形上也具有編輯功能，但是只是做一些簡(jiǎn)單地操作。它也是網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中使用的最多的軟件之一。Illustrator：AdobeIllustrator簡(jiǎn)稱“AI”是一種專業(yè)繪制矢量圖形的軟件，還具有排版、設(shè)計(jì)等功能，能夠與PS軟件結(jié)合使用。CorelDraw:它與AI類似，也具有PS的一些功能，是PS軟件比較好的搭檔，利用他們之間的結(jié)合會(huì)設(shè)計(jì)出更加美觀的圖像。Fireworks：是一種網(wǎng)頁(yè)設(shè)計(jì)作圖軟件，用來使Web設(shè)計(jì)與制作更加順利，同時(shí)也有制作動(dòng)畫的功能，與Flash相似。Dreamweaver:是用來專門制作網(wǎng)站的軟件，可以結(jié)合Fireworks、Photoshop等軟件在網(wǎng)頁(yè)上進(jìn)行使用。Flash：經(jīng)常用于網(wǎng)頁(yè)和軟件程序中，它能夠制作各種各樣的應(yīng)用程序，比如MV、聲音、圖形和動(dòng)畫等，在這方面具有非常強(qiáng)悍的功能。以上這些軟件中，Photoshop、Fireworks或Flash、Dreamweaver被稱為“網(wǎng)頁(yè)三劍客”它們都是網(wǎng)頁(yè)設(shè)計(jì)中必備的設(shè)計(jì)軟件。4.1.4要具備一定的專業(yè)素質(zhì)與職業(yè)道德不論是做什么樣的工作，從事什么樣的職業(yè)，一定要有對(duì)工作的熱忱，對(duì)任務(wù)的負(fù)責(zé)以及一定的職業(yè)道德，這是對(duì)工作的負(fù)責(zé)也是對(duì)設(shè)計(jì)行業(yè)的負(fù)責(zé)，這不僅是一種責(zé)任更是一種義務(wù)。設(shè)計(jì)就是一種思想的表達(dá)，在設(shè)計(jì)的過程中，也許會(huì)有很多設(shè)計(jì)以供參考，但是絕對(duì)不能抄襲他人的設(shè)計(jì)思想，只能借鑒或是從中獲得一些靈感創(chuàng)意，否則，則是對(duì)其他設(shè)計(jì)的不尊重與侵權(quán)，這不僅敗壞個(gè)人品德，而且還會(huì)擾亂設(shè)計(jì)行業(yè)秩序，給社會(huì)帶來不必要的麻煩，因此專業(yè)素質(zhì)與職業(yè)素養(yǎng)對(duì)于一個(gè)設(shè)計(jì)師必須具備。4.2網(wǎng)站界面UI設(shè)計(jì)的流程4.2.1確定網(wǎng)站主題和目標(biāo)用戶有了網(wǎng)站主題，就可以根據(jù)主題內(nèi)容來定位目標(biāo)用戶，從而為網(wǎng)站整體的設(shè)計(jì)確定方向，比如游戲類網(wǎng)站，它們的目標(biāo)用戶就是游戲界的人群，那么就要設(shè)計(jì)出具有吸引力，游戲動(dòng)感渲染強(qiáng)的網(wǎng)站版面氛圍，能給游戲者帶來刺激、新鮮、好奇等感受，同時(shí)從這種畫面當(dāng)中傳遞游戲技能、道具、活動(dòng)、賽事等相關(guān)信息。如果不定位這些目標(biāo)客戶群，了解不了他們的需求，那么就可能設(shè)計(jì)不出有價(jià)值的網(wǎng)頁(yè)，失去網(wǎng)站設(shè)計(jì)的意義。因此，確定目標(biāo)，定位準(zhǔn)確相當(dāng)重要。4.2.2搜集有關(guān)主題的各種信息及進(jìn)行用戶調(diào)查要想使一個(gè)網(wǎng)頁(yè)充分地體現(xiàn)它的價(jià)值，就必須將主題表現(xiàn)的淋漓盡致，因此搜集相關(guān)主題的詳細(xì)信息非常有必要。比如一個(gè)銷售儀器的商業(yè)網(wǎng)站，那么網(wǎng)站里面就必須有產(chǎn)品的成品圖片信息、功能介紹、與其它同類產(chǎn)品的優(yōu)勢(shì)比較等相關(guān)信息，只有對(duì)其有了詳細(xì)的描述，用戶才能更加了解產(chǎn)品，從而產(chǎn)生購(gòu)買訂購(gòu)欲望，促成交易的達(dá)成。另外，對(duì)于用戶的調(diào)查還可以給廠家?guī)懋a(chǎn)品的定位，時(shí)代變了，市場(chǎng)模式也跟著變了，以前的市場(chǎng)上是廠家生產(chǎn)什么，消費(fèi)者就購(gòu)買什么，沒有什么接受與不接受，只有用還是不用，是市場(chǎng)決定消費(fèi)者的形勢(shì)。當(dāng)今社會(huì)，是消費(fèi)者決定市場(chǎng)的時(shí)代，一切都以消費(fèi)者為中心，消費(fèi)者喜歡什么，樂意接受什么樣的產(chǎn)品，廠家或生產(chǎn)商就生產(chǎn)什么，銷售什么。因此用戶調(diào)查必不可少。4.2.3網(wǎng)站初期規(guī)劃制定待目標(biāo)明確，客戶確定，資料詳細(xì)，用戶調(diào)查統(tǒng)計(jì)完畢，就開始進(jìn)行網(wǎng)站的設(shè)計(jì)，設(shè)計(jì)也要定制不同的方案，以便日后調(diào)整擇優(yōu)，選出最佳方案。4.2.4進(jìn)行用戶反饋與設(shè)計(jì)定稿設(shè)計(jì)完成后，需要進(jìn)行用戶反饋，根據(jù)用戶反饋的信息來決定設(shè)計(jì)的成功與否，如若不成功則進(jìn)行重新的規(guī)劃設(shè)計(jì)，如若成功就要著手設(shè)計(jì)效果的實(shí)現(xiàn)，并將網(wǎng)站測(cè)試上傳。4.3網(wǎng)站界面UI設(shè)計(jì)的原則4.3.1簡(jiǎn)易性簡(jiǎn)易性給人們的感覺就是整體界面簡(jiǎn)潔清爽，操作起來干脆利落，這樣就會(huì)使人們?cè)诓僮鬟^程中得到更好地體驗(yàn)。4.3.2記憶負(fù)擔(dān)最小化界面的設(shè)計(jì)就是為了方便人們迅速獲取有價(jià)值的信息，只有將界面設(shè)計(jì)制作的更加簡(jiǎn)單易懂、清晰易查，才更夠使瀏覽者或是用戶在最短的時(shí)間內(nèi)獲取想要知道的信息，減輕用戶在記憶上的遺忘性。4.3.3安全性界面的設(shè)計(jì)不能讓用戶感覺到自己不敢操作或是帶有個(gè)人利益的損失等不安全因素。4.3.4人性化人性化就是指更夠給用戶帶來高效率的操作，使用戶在體驗(yàn)上更加滿意，更加符合用戶想要操作的要求。4.3.5美觀與協(xié)調(diào)性原則這就要求設(shè)計(jì)的界面美觀性要與網(wǎng)頁(yè)主題內(nèi)容協(xié)調(diào)一致，和諧統(tǒng)一。4.4網(wǎng)站界面UI設(shè)計(jì)的意義UI的本意就是用戶界面，而用戶界面是人與機(jī)的交互，要使人機(jī)交互和諧，溝通順暢，就必須設(shè)計(jì)出符合人機(jī)操作的簡(jiǎn)易性、合理性，來拉近人與機(jī)之間的距離。在發(fā)展迅速的互聯(lián)網(wǎng)科技時(shí)代，知識(shí)在不斷更新，科技在進(jìn)一步發(fā)達(dá)，界面的設(shè)計(jì)工作越來越受到人們的重視，其實(shí)界面設(shè)計(jì)就好比產(chǎn)品漂亮的外觀一樣，是人們關(guān)注的焦點(diǎn)之一。一個(gè)網(wǎng)站若是能呈現(xiàn)出美觀的界面將會(huì)給人們帶來舒適的視覺享受與操作體驗(yàn)，從而實(shí)現(xiàn)人機(jī)交互操作的最優(yōu)化。檢驗(yàn)一個(gè)操作界面標(biāo)準(zhǔn)的好壞不是設(shè)計(jì)開發(fā)者自己的意見或認(rèn)知，也不是他人發(fā)表的意見，更不是領(lǐng)導(dǎo)的個(gè)人意愿，而是終端用戶的感受，UI設(shè)計(jì)就是為了實(shí)現(xiàn)這些和諧、舒適、協(xié)調(diào)、美觀而產(chǎn)生的，目的就是設(shè)計(jì)出更加合理的人機(jī)交互界面，實(shí)現(xiàn)人機(jī)交互的合理性，實(shí)現(xiàn)UI設(shè)計(jì)的價(jià)值意義。5網(wǎng)站界面UI設(shè)計(jì)的走向網(wǎng)站界面的設(shè)計(jì)是基于瀏覽者的審美、文化、修養(yǎng)，以及信息傳播的一般方式，還有網(wǎng)頁(yè)的開發(fā)技術(shù)。對(duì)于絕大部分的網(wǎng)站來說，沒有足夠的力量去研究用戶新的習(xí)慣與需求，也不可能研究出新的技術(shù)性功能，僅在某些大的網(wǎng)站中才能夠看到一些設(shè)計(jì)趨勢(shì)。對(duì)于如何能夠使網(wǎng)站具有符合用戶的使用需求，讓網(wǎng)站變得更強(qiáng)大、具有更好的用戶體驗(yàn)，只有大膽、大步的嘗試新的網(wǎng)站類型的開發(fā)。從有關(guān)網(wǎng)頁(yè)設(shè)計(jì)方面的資料中可以總結(jié)以下幾種發(fā)展的趨勢(shì)。5.1固定頭部使用CSS中position：fixed屬性來使網(wǎng)站的頭部固定在網(wǎng)頁(yè)中的最合適的位置。有兩種方法：絕對(duì)定位和相對(duì)定位。兩者還可以相互結(jié)合使用，利用父級(jí)子級(jí)的關(guān)系進(jìn)行調(diào)整。這是一種非常流行的設(shè)計(jì)，并且看上去布局很搭配。但從美學(xué)角度看，這中固定的條目減小了操作網(wǎng)站的距離感是一種特別用戶體驗(yàn)。5.2大背景圖片大背景圖片也是一種非常流行而且高端大氣的發(fā)展趨勢(shì)，許多攝影師或攝影愛好者都喜歡這種設(shè)計(jì)方式，它要求設(shè)計(jì)者要有很好的審美觀，能選出高品質(zhì)且極具吸引力的圖片，如果再加上一些動(dòng)態(tài)效果，使圖片自動(dòng)切換，那么效果將會(huì)更好。把較大圖片設(shè)計(jì)成背景能夠在最短的時(shí)間內(nèi)吸引到用戶的關(guān)注，如果這種效果能使用戶感到特別的肯定，就可以使用戶迅速的被網(wǎng)站吸引，從而喜歡該網(wǎng)站，使網(wǎng)站在用戶看來更專業(yè)、更大氣。5.3CSS透明CSS3的新屬性已經(jīng)允許編輯網(wǎng)頁(yè)上任何元素的不透明，這就意味著界面設(shè)計(jì)師們能夠在不使用Ps的情況下，在現(xiàn)代瀏覽器中實(shí)現(xiàn)透明。操作透明CSS的設(shè)計(jì)技巧是通過RGB（顏色語(yǔ)法），在進(jìn)行CSS編輯時(shí)指定具體的R，G，B以及透明度，這是一種設(shè)計(jì)趨勢(shì)。5.4社交媒體標(biāo)記網(wǎng)絡(luò)營(yíng)銷已經(jīng)成為決定網(wǎng)站成功或失敗的重要因素。社交化媒體和滲透式營(yíng)銷在很多類型的網(wǎng)站中逐漸流行起來。5.5滑動(dòng)的網(wǎng)頁(yè)面板滑動(dòng)的網(wǎng)頁(yè)版面較靜態(tài)的網(wǎng)頁(yè)版面具有靈活、美觀等優(yōu)勢(shì)，更給人們帶來不一樣的操作感受，更體現(xiàn)了人性化、合理化。5.6CSS動(dòng)畫CSS的出現(xiàn)可以讓設(shè)計(jì)師利用不同的CSS屬性來實(shí)現(xiàn)動(dòng)畫效果。比如：hover過渡效果，這是一種偽類代碼?？偨Y(jié)網(wǎng)站界面的設(shè)計(jì)從以前的只重技術(shù)不重