• <table id="zigek"></table>
  • <acronym id="zigek"></acronym>
    <big id="zigek"></big>
    <tr id="zigek"><s id="zigek"></s></tr>

    學術堂首頁 | 文獻求助論文范文 | 論文題目 | 參考文獻 | 開題報告 | 論文格式 | 摘要提綱 | 論文致謝 | 論文查重 | 論文答辯 | 論文發表 | 期刊雜志 | 論文寫作 | 論文PPT
    學術堂專業論文學習平臺您當前的位置:學術堂 > 計算機論文 > 網頁設計論文

    速游網網頁需求分析和UI設計探討

    時間:2020-01-07 來源:電子技術與軟件工程 作者:曹玉科 本文字數:3161字

      摘    要: 本文的主要內容將以速游網網站頁面的UI設計和實現來對此進行闡述,進一步探究網頁UI設計的意義。

      關鍵詞: UI設計; 網頁設計; 交互設計;

      隨著互聯網的高速發展,人們的生活與互聯網的聯系愈發緊密,互聯網開始在衣食住行等各個方面影響著人們的生活。因此,為了能更好更廣泛的宣傳,各個企業開始著手于互聯網上的宣傳,那么想從數不勝數的網站中脫穎而出,就需要在網站的頁面UI設計上大做文章。網頁UI設計唯有能夠提供給用戶舒適的視覺享受和操作體驗才能稱之為是成功的。本文就將以速游網為例來詳細講述網頁UI的設計和實現。

      1、 網頁UI設計

      UI既用戶界面(User Interface)的簡稱,網頁UI設計就是對網頁的人機交互、操作邏輯、界面美觀的整體設計。一個好的網頁UI設計不僅僅要美觀,更要在第一時間能夠展示出網站的功能,突出網站的特色,要能做到在第一時間抓住使用者的眼球,同時也要提供給使用者簡單舒適的操作、提升用戶體驗。

      2、 需求分析

      想要做出成功的網頁UI設計,需求分析是必不可少的一步。在這一部分,首先是要通過對本身企業的產品、企業文化、以及企業特色做出分析,明確出企業自身的需求。然后要通過對面向的用戶的年齡、職業、喜好等等內容做用戶調研以此確定用戶的需求。從而做出總結提出網頁的UI設計理念及設計方案。

      普適性網站UI設計需求分析:

      網站UI設計普適性需求分析,需要遵循5W1H原則,5個“W”(WHO,WHAT,WHEN,WHERE,WHY)和1個“H”(HOW)開頭的結構問句。

      (1)誰(WHO)目標用戶是誰?他們的年齡、喜好、特點是什么?

      (2)什么(WHAT)目標用戶會做些什么?用戶瀏覽網頁的目的是什么?用戶希望獲得或者完成什么?

      (3)何時(WHEN)目標用戶會在什么時間使用網頁或者什么時候會使用網頁上的技術或者產品,總結出用戶的普遍使用規律。

      (4)何地(WHERE)目標用戶會在什么地點使用到網頁上的功能或者產品。其中包括了常用場景和潛在場景。

      (5)為何(WHY)目標用戶在本網頁上的產生的行為的根本原因是什么?

      (6)如何(HOW)用戶想達成目標所需的步驟的細節。
     

    速游網網頁需求分析和UI設計探討
     

      3、 網頁UI設計

      3.1 、網頁配色

      據多項調查研究表明,人類的五種感官在接受外界信息的作用上主要以視覺為主,而色彩在視覺系統的重要性遠大于形狀、面積、位置等。在網頁設計中,色彩給瀏覽者帶來的視覺沖擊力也遠大于版式等組成元素,色彩的表現直接影響到了頁面形式是否統一和美觀。因此,在網頁設計中,色彩搭配的重要性不言而喻。

      在色彩的設計中,最主要的是要規定出主色調、輔助色、裝飾色,以此統一色彩。在本文的案例網站速游網中,我們采用白色為主色調,黑色為輔助色,暗紅、紅色、灰色為裝飾色。黑白色的搭配一直是設計界的寵兒,相比較于單純的黑色和白色,黑白的搭配顯得更為成熟,不會像純白那么空洞,也不會像純黑那么深沉,灰色的使用則可以使得黑白的搭配更為融合,黑白之間的過度更為平緩,紅色則用于突出重點,如在推薦欄以紅色展示游戲的游戲名,在按鈕處以紅色為字體顏色,同時也可以作為輔助提示出現,例如文章題目前以紅色小豎線作為輔助提示,避免使用過多紅色造成使用者視覺疲勞。logo的配色上選用了紅色為主色黑色為輔色的搭配,紅色在心理學上被認為能夠吸引人的注意力并且可以提高觀看者的興奮度,用來作為logo再合適不過,而黑色作為一種極好的襯托色,可以更好地的襯托出紅色的光感和色感并且營造出一種高級感與神秘感。

      3.2 、整體布局

      首頁采用大圖Banner搭配簡單的柵格布局,這種布局簡潔、明快且有較強的視覺表現力。在上部分用大圖Banner能在第一時間給瀏覽者留下深刻的印象,使瀏覽者感受到強大的視覺沖擊,從而獲得感官上的享受。同時,直接使用游戲圖作為Banner更便于宣傳游戲而且可以直接點明網站類型。在頁面的頂部,采取了經典的網頁布局既logo搭配導航欄的布置,將網站logo放在上部的正中央最顯眼的位置以此起一個宣傳的作用,在logo的下方采用多級導航欄且二級導航欄采用了圖片搭配文字的導航而不是一般的純文字導航。再向下,是主頁的內容展示,主要是推薦欄以及一些有關游戲的文章和新聞的推送。

      子頁面依舊采取頂部的大圖展示,并且在圖的中間寫上本頁的主題,以主機游戲的頁面為例,大圖正中打上主機兩個字。在大圖下方的第一部分,展示的是當季最受歡迎的主機游戲,第二部分是視頻,用于展示各種游戲的宣傳片、視頻攻略等,第三部分也是游戲展示,不同于第一部分的,這部分主要是一個大范圍的展示,不僅限于當季,而是按照網站用戶的下載量進行排名將名列前茅的游戲拿出來進行展示。最后一部分是自動輪播圖,將眾多游戲的宣傳圖在下方自動輪轉,加深用戶的印象,刺激用戶的購買欲。

      3.3 、文字選擇

      在網頁UI設計中,字體設計也是重要的一部分,一方面不同的字體設計能顯示出不同網站的特色與公司的品味,另一方面,在網頁的不同部分用不同的字體也可以間接的分出各個部分。同時,字體的顏色與字號也可以幫助用戶分出主次。

      本文的案例網站速游網作為銷售類的網站,在文字的選擇上,主體的部分盡量選擇平實的字體,避免過分個性的字體喧賓奪主,因此主體部分的字體選用常見的“微軟雅黑”字體。而題目的部分可以選擇一些稍有個性的字體以此區別,因此題目中的英文選用“agency fb”字體,中文部分則多用“serif”,對比起“微軟雅黑”這兩種字體變化不大,但這一點點的變化,足夠讓頁面分出層次,不會因為全部是同一種字體而顯得過于平緩,從而讓用戶產生視覺疲勞。

      在UI設計里,字體字號的選擇中是有一定的規定的,如最小字號一般選用12號而最大字號一般不超過42號。同時,因為單數的字號在顯示時容易產生毛邊,所以在設計中選用雙數號的字體。通過不同的字號大小也可以用以區別內容的不同,如在導航欄的文字部分選取的是12號字體,而在頁面主體的各部分的題目則使用的比較大的40號字體。

      在字體的顏色選擇上,為了使得頁面更加和諧,因此我們選擇與背景顏色相襯的無彩色系如黑、白、灰。只在重點部分使用紅色來標識,同時也運用明度、純度等對比來突出重要的部分,如在圖片浮現出的部分游戲信息中采用黑色的背景色搭配白色的字體顏色來體現內容。

      3.4、 交互設計

      交互設計(Interaction Design),是定義、設計人造系統的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關系,以"在充滿社會復雜性的物質世界中嵌入信息技術"為中心。在交互設計中,一方面要設計得符合用戶的操作,另一方面也要符合大眾的瀏覽習慣,從而能更好的引導用戶去瀏覽頁面上的內容。同時,在設計時要遵循以人為本的原則,在實用、方便、趣味的基礎上進行設計,從而提升用戶體驗,使得用戶有更好的參與性。

      在本文的示例網頁中,設置了鼠標點擊事件,在鼠標點擊后會浮現出游戲的名字然后漸變消失,同時,在各部分之間插入各個平臺的logo圖并設置成鏈接以此豐富頁面并且使得頁面的趣味性增加。設置了當鼠標移動到游戲宣傳圖片上時,會浮現出游戲的某些信息,如適用的游戲平臺、開發游戲的公司、用戶的評分以及游戲的售價之類的信息,使得用戶不需要點開下一級頁面也可以簡單的了解游戲從而決定是否要詳細了解,以此來增強用戶的使用體驗。

      4 、總結

      通過對速游網網頁的分析可以得出結論,網頁界面的設計是為了給用戶提供交流平臺,為用戶提供服務。因此,在網頁制作的過程中,制作人員需要秉持以用戶為中心的理念,運用多種藝術手法和設計方法才能制作出既具有網站特色又符合用戶需求和審美的實用、便捷、有趣味的網頁。

      參考文獻

      [1]鄧蘊.文化創意類網站UI設計與實現[J].北京工業職業技術學院學報,2018(04):30-35.
      [2]宋秀賢,馮本慧,陳青青.色彩對網頁界面設計的影響探究[J].西部廣播電視,2015(16):94.
      [3]陳春雨,王福成,解國梁,梁宇.佳愛家居網站設計與實現[J].內燃機與配件,2017(12):155-157.

      論文來源參考:曹玉科.網頁界面設計與實現——以速游網為例[J].電子技術與軟件工程,2019(23):3-4.
      相近分類:
      • 成都網絡警察報警平臺
      • 公共信息安全網絡監察
      • 經營性網站備案信息
      • 不良信息舉報中心
      • 中國文明網傳播文明
      • 學術堂_誠信網站
      159彩票{{转码主词}官网{{转码主词}网址