速游網(wǎng)網(wǎng)頁需求分析和UI設(shè)計探討,網(wǎng)頁設(shè)計論文摘要：本文的主要內(nèi)容將以速游網(wǎng)網(wǎng)站頁面的UI設(shè)計和實現(xiàn)來對此進行闡述,進一步探究網(wǎng)頁UI設(shè)計的意義。本文關(guān)鍵詞語：UI設(shè)計;網(wǎng)頁設(shè)計;交互設(shè)計;隨著互聯(lián)網(wǎng)的高速發(fā)展，人們的生活與互聯(lián)網(wǎng)的聯(lián)絡(luò)愈發(fā)嚴(yán)密，互聯(lián)網(wǎng)開場在衣食住行等各個方面影響著人們的生活。因而，為了能更好更廣泛的宣傳，各個企業(yè)開場著手于互聯(lián)網(wǎng)上的宣傳，那么想從數(shù)不勝數(shù)的網(wǎng)站中脫穎而出，就需要在網(wǎng)站的頁面UI設(shè)計上大做文章。網(wǎng)頁UI設(shè)計唯有能夠提供應(yīng)用戶舒適的視覺享受和操作體驗才能稱之為是成功的。本文就將以速游網(wǎng)為例來具體講述網(wǎng)頁UI的設(shè)計和實現(xiàn)。1、網(wǎng)頁UI設(shè)計UI既用戶界面〔UserInterface〕的簡稱，網(wǎng)頁UI設(shè)計就是對網(wǎng)頁的人機交互、操作邏輯、界面美觀的整體設(shè)計。一個好的網(wǎng)頁UI設(shè)計不僅僅要美觀，更要在第一時間能夠展示出網(wǎng)站的功能，突出網(wǎng)站的特色，要能做到在第一時間捉住使用者的眼球，同時也要提供應(yīng)使用者簡單舒適的操作、提升用戶體驗。2、需求分析想要做出成功的網(wǎng)頁UI設(shè)計，需求分析是必不可少的一步。在這一部分，首先是要通過對本身企業(yè)的產(chǎn)品、企業(yè)文化、以及企業(yè)特色做出分析，明確出企業(yè)本身的需求。然后要通過對面向的用戶的年齡、職業(yè)、愛好等等內(nèi)容做用戶調(diào)研以此確定用戶的需求。進而做出總結(jié)提出網(wǎng)頁的UI設(shè)計理念及設(shè)計方案。普適性網(wǎng)站UI設(shè)計需求分析：網(wǎng)站UI設(shè)計普適性需求分析，需要遵循5W1H原則，5個W(WHO,WHAT,WHEN,WHERE,WHY〕和1個H(HOW〕開始的構(gòu)造問句。(1〕誰〔WHO〕目的用戶是誰?他們的年齡、愛好、特點是什么?(2〕什么〔WHAT〕目的用戶會做些什么?用戶閱讀網(wǎng)頁的目的是什么?用戶希望獲得或者完成什么?(3〕何時〔WHEN〕目的用戶會在什么時間使用網(wǎng)頁或者什么時候會使用網(wǎng)頁上的技術(shù)或者產(chǎn)品，總結(jié)出用戶的普遍使用規(guī)律。(4〕何地〔WHERE〕目的用戶會在什么地點使用到網(wǎng)頁上的功能或者產(chǎn)品。華而不實包括了常用場景和潛在場景。(5〕為何〔WHY〕目的用戶在本網(wǎng)頁上的產(chǎn)生的行為的根本原因是什么?(6〕怎樣〔HOW〕用戶想達成目的所需的步驟的細節(jié)。3、網(wǎng)頁UI設(shè)計3.1、網(wǎng)頁配色據(jù)多項調(diào)查研究表示清楚，人類的五種感官在接受外界信息的作用上主要以視覺為主，而色彩在視覺系統(tǒng)的重要性遠大于形狀、面積、位置等。在網(wǎng)頁設(shè)計中，色彩給閱讀者帶來的視覺沖擊力也遠大于版式等組成元素，色彩的表現(xiàn)直接影響到了頁面形式能否統(tǒng)一和美觀。因而，在網(wǎng)頁設(shè)計中，色彩搭配的重要性不言而喻。在色彩的設(shè)計中，最主要的是要規(guī)定出主色調(diào)、輔助色、裝飾色，以此統(tǒng)一色彩。在本文的案例網(wǎng)站速游網(wǎng)中，我們采用白色為主色調(diào)，黑色為輔助色，暗紅、紅色、灰色為裝飾色。黑白色的搭配一直是設(shè)計界的寵兒，相比擬于單純的黑色和白色，黑白的搭配顯得更為成熟，不會像純白那么空洞，也不會像純黑那么深沉，灰色的使用則能夠使得黑白的搭配更為融合，黑白之間的過度更為平緩，紅色則用于突出重點，如在推薦欄以紅色展示游戲的游戲名，在按鈕處以紅色為字體顏色，同時可以以作為輔助提示出現(xiàn)，例如文章題當(dāng)前以紅色小豎線作為輔助提示，避免使用太多紅色造成使用者視覺疲憊。logo的配色上選用了紅色為主色黑色為輔色的搭配，紅色在心理學(xué)上被以為能夠吸引人的注意力并且能夠提高觀看者的興奮度，用來作為logo再適宜不過，而黑色作為一種極好的襯托色，能夠更好地的襯托出紅色的光感和色感并且營造出一種高級感與神秘感。3.2、整體布局首頁采用大圖Banner搭配簡單的柵格布局，這種布局簡潔、明快且有較強的視覺表現(xiàn)力。在上部分用大圖Banner能在第一時間給閱讀者留下深入的印象，使閱讀者感遭到強大的視覺沖擊，進而獲得感官上的享受。同時，直接使用游戲圖作為Banner更便于宣傳游戲而且能夠直接點明網(wǎng)站類型。在頁面的頂部，采取了經(jīng)典的網(wǎng)頁布局既logo搭配導(dǎo)航欄的布置，將網(wǎng)站logo放在上部的正最顯眼的位置以此起一個宣傳的作用，在logo的下方采用多級導(dǎo)航欄且二級導(dǎo)航欄采用了圖片搭配文字的導(dǎo)航而不是一般的純文字導(dǎo)航。再向下，是主頁的內(nèi)容展示，主要是推薦欄以及一些有關(guān)游戲的文章和新聞的推送。子頁面還是那樣采取頂部的大圖展示，并且在圖的中間寫上本頁的主題，以主機游戲的頁面為例，大圖正中打上主機兩個字。在大圖下方的第一部分，展示的是當(dāng)季最受歡迎的主機游戲，第二部分是視頻，用于展示各種游戲的宣傳片、視頻攻略等，第三部分也是游戲展示，不同于第一部分的，這部分主要是一個大范圍的展示，不僅限于當(dāng)季，而是根據(jù)網(wǎng)站用戶的下載量進行排名將名列前茅的游戲拿出來進行展示。最后一部分是自動輪播圖，將諸多游戲的宣傳圖在下方自動輪轉(zhuǎn)，加深用戶的印象，刺激用戶的購買欲。3.3、文字選擇在網(wǎng)頁UI設(shè)計中，字體設(shè)計也是重要的一部分，一方面不同的字體設(shè)計能顯示出不同網(wǎng)站的特色與公司的品味，另一方面，在網(wǎng)頁的不同部分用不同的字體可以以間接的分出各個部分。同時，字體的顏色與字號可以以幫助用戶分出主次。本文的案例網(wǎng)站速游網(wǎng)作為銷售類的網(wǎng)站，在文字的選擇上，主體的部分盡量選擇平實的字體，避免過分個性的字體喧賓奪主，因而主體部分的字體選用常見的微軟雅黑字體。而題目的部分能夠選擇一些稍有個性的字體以此區(qū)別，因而題目中的英文選用agencyfb字體，中文部分則多用serif，比照起微軟雅黑這兩種字體變化不大，但這一點點的變化，足夠讓頁面分出層次，不會由于全部是同一種字體而顯得過于平緩，進而讓用戶產(chǎn)生視覺疲憊。在UI設(shè)計里，字體字號的選擇中是有一定的規(guī)定的，如最小字號一般選用12號而最大字號一般不超過42號。同時，由于單數(shù)的字號在顯示時容易產(chǎn)生毛邊，所以在設(shè)計中選用雙數(shù)號的字體。通過不同的字號大小可以以用以區(qū)別內(nèi)容的不同，如在導(dǎo)航欄的文字部分選取的是12號字體，而在頁面主體的各部分的題目則使用的比擬大的40號字體。在字體的顏色選擇上，為了使得頁面愈加和諧，因而我們選擇與背景顏色相襯的無彩色系如黑、白、灰。只在重點部分使用紅色來標(biāo)識，同時也運用明度、純度等比照來突出重要的部分，如在圖片浮現(xiàn)出的部分游戲信息中采用黑色的背景色搭配白色的字體顏色來具體表現(xiàn)出內(nèi)容。3.4、交互設(shè)計交互設(shè)計〔InteractionDesign〕，是定義、設(shè)計人造系統(tǒng)的行為的設(shè)計領(lǐng)域，它定義了兩個或多個互動的個體之間溝通的內(nèi)容和構(gòu)造，使之相互配合，共同達成某種目的。交互設(shè)計努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，以在充滿社會復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)為中心。在交互設(shè)計中，一方面要設(shè)計得符合用戶的操作，另一方面也要符合群眾的閱讀習(xí)慣，進而能更好的引導(dǎo)用戶去閱讀頁面上的內(nèi)容。同時，在設(shè)計時要遵循以人為本的原則，在實用、方便、趣味的基礎(chǔ)上進行設(shè)計，進而提升用戶體驗，使得用戶有更好的介入性。在本文的示例網(wǎng)頁中，設(shè)置了鼠標(biāo)點擊事件，在鼠標(biāo)點擊后會浮現(xiàn)出游戲的名字然后漸變消失，同時，在各部分之間插入各個平臺的logo圖并設(shè)置成鏈接以此豐富頁面并且使得頁面的趣味性增加。設(shè)置了當(dāng)鼠標(biāo)移動到游戲宣傳圖片上時，會浮現(xiàn)出游戲的某些信息，如適用的游戲平臺、開發(fā)游戲的公司、用戶的評分以及游戲的售價之類的信息，使得用戶不需重點開下一級頁面可以以簡單的了解游戲進而決定能否要具體了解，以此來加強用戶的使用體驗。4、總結(jié)通過對速游網(wǎng)網(wǎng)頁的分析能夠得出結(jié)論，網(wǎng)頁界面的設(shè)計是為了給用戶提供溝通平臺，為用戶提供服務(wù)。因而，在網(wǎng)頁制作的經(jīng)過中，制作人員需要秉持以用戶為中心的理念，運用多種藝術(shù)手法和設(shè)計方式方法才能制作出既具有網(wǎng)站特色又符合用戶需求和審美的實用、便捷、有趣味的網(wǎng)頁。以下為參考文獻