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