熱血健身房網頁頁面設計研究和應用

江偉銘 張蕙

摘? 要：健身已經日趨成為談論的話題，健身中心也日益增多，而一般好的健身房都是采取會員制的管理系統，因此需要顧客親自到健身中心實地注冊，這對許多想要了解這個行業的潛在消費者造成了很大不利，從而影響了健身房的發展。因此，一個健身俱樂部在這個信息化時代要想吸引到足夠的消費者，勢必需要一個具有吸引力的網站進行宣傳，因此這次課題旨在通過分析最合適的網頁界面來對健身房網頁頁面進行相關的設計與研究。

關鍵詞：網頁設計;健身管理;網絡營銷;PS設計

中圖分類號：TP393.092;TP37? ? ? 文獻標識碼：A 文章編號：2096-4706（2019）01-0088-03

Research and Application of Web Design for Red Blooded Gymnasium

JIANG Weiming，ZHANG Hui

（Jincheng College of Sichuan University，Chengdu? 611731，China）

Abstract：Fitness has become a topic of discussion and fitness centers are becoming more and more popular. Generally good gymnasiums adopt membership management system. Therefore，customers need to register in the fitness center in person，which causes great disadvantage to many potential consumers who want to know about the industry. This has affected the development of the gymnasium. Therefore，if a fitness club wants to attract enough consumers in this information age，it must have an attractive website to publicize. Therefore，this topic aims to analyze the most appropriate web interface to design and research the fitness club Web pages.

Keywords：web design;fitness management;network marketing;PS design

1? 緒論

1.1? 課題的背景

隨著信息化時代的全面發展，越來越多的人過上了足不出戶的生活，這種現象對許多實體行業造成了很大的困擾，許多行業紛紛選擇在網絡上建立自己的商業渠道。同時，隨著國家經濟的飛速發展，居民的生活質量日益改善，越來越多的人開始注重自身的身體健康，全國性的健身熱潮隨之到來，除去戶外健身活動，健身房也非常火爆，甚至成為許多人鍛煉身體的主要場所。健身房在網絡上建立屬于自己的網站，既可以方便自己管理會員與活動事務，也可以給顧客帶來便利，消費者可以直接通過網站對健身房進行直觀的了解，節省了到實地考察的時間，同時也能在感到滿意的情況下直接進行會員注冊。而且網站也方便對新老會員進行登記與管理，同時可以實時在網上更新活動，課程等信息，靈活性好、運行穩定。因此，建立屬于自己的健身網站是如今健身房發展的一個必要并且有利無害的手段。

1.2? 項目簡介

本課題主要是為了解決健身房行業在日常生活中不好宣傳的問題，以及運用網頁設計對健身系統達到管理（會員注冊，課程安排，活動介紹等）以及宣傳的目的。

2? 界面設計需求分析及功能點的確定

健身房網站主要是通過對企業自身的全面介紹來吸引消費者，并且是通過后臺對健身房進行有效管理的網絡手段。因此通過該網站，需要達到以下幾個基本點：

（1）擁有健身房全面的介紹，方便宣傳;

（2）能夠有不同身份的登錄口，方便消費者和教練使用;

（3）有對健身器材的整理;

（4）能實時更新課程安排，方便會員的選擇，并且能對會員與教練的資料進行管理;

（5）能及時更新健身房的活動，吸引新客戶，留住老客戶。

功能點主要表現在界面的設計上，用戶可以通過頁面的精心布局從而實現對該網站的輕松操作。

3? 總體設計

3.1? 總體設計原理

利用Photoshop與CorelDRAW完成對頁面的布局制作。

3.2? 用戶研究

用戶操作習慣：登陸成功后，通常會瀏覽一遍主頁，了解大致的功能后，點擊自己想要進入的子頁面進行進一步的瀏覽。

用戶關注點：主頁面的排版外觀，主頁面進入子菜單的按鈕是否明顯，各頁面與用戶的交互效果如何，方便使用否。

3.3? 界面設計方案

界面設計原則總的來說可以概括成界面在用戶的掌控之中、保持界面的一致性和減少用戶記憶的負擔這三大點，而此次健身管理系統的頁面設計堅持秉承了重在人機交互性的特點，旨在做出簡約大氣，讓用戶有良好的體驗的界面。

事實上，消費者一般只對網站的某些內容感興趣，而且這種興趣會延續一段時間。這對于Web界面設計尤其重要。更有吸引力的是能夠根據不同用戶的喜好顯示定制頁面，又能突出用戶感興趣的內容，這將節省用戶大量的檢索時間。

除了頁面布局等因素外，網頁的色彩也尤為重要，這是一個網站的靈魂，一個好的網站完全可以通過其色彩構成突出主題并吸引住用戶。那么什么樣的色彩是合理的呢？第一點，網頁設計的顏色必須是溫和的，盡量避免太亮或太暗，給用戶舒適的觀看體驗。第二點，網頁色彩旨在滿足設計的需求，盡可能根據網頁內容的主題提供相應的顏色配置。第三點，盡量設計互補和諧的顏色，這樣既不會讓用戶感到視覺疲勞又可以很好的通過顏色的轉換進行網頁內容的過渡。

4? 系統詳細設計及實現

4.1? 界面基調的確定

4.1.1? 頁面布局設計

根據上述的界面設計原則，下面將就熱血健身房來設計3套網頁方案，希望能為健身房經營者提供一種思路。

為了提供更加全面的分析，三套界面的頁面布局分別采用了三種不同的排版，分別為很多張單圖少字共同構成;類似于游戲網站中心大圖四周多字;一個頁面一張圖，整個網站由多圖構成。三種都遵循了人機交互的設計準則，同時各級按鈕設計分明，能夠讓用戶快速發現，方便使用。

4.1.2? 頁面配色介紹

因為設計對象是熱血健身房，因此為了突出主旨，色彩不宜選用過于鮮艷的顏色。目前主流的健身網站均采用整體白色或黑色輔以少量其他顏色的設計原則。因此后兩套界面整體采用暗色調，第一套采用暖色調，并且全局色彩沒有突兀的變化，讓用戶能夠很好地接受，不會產生凌亂感，同時，又在各級頁面用了不同的圖片來讓用戶在瀏覽時不會感到色彩的單調乏味。

4.1.3? 頁面跳轉關系

頁面的跳轉，應該采用了在每個頁面都有一個跳轉欄來方便用戶的操作，同時在主頁面用圖片按鈕的形式設計了很多跳轉到相應界面的按鈕，能夠在方便用戶操作的同時完成頁面與頁面之間的跳轉。

4.1.4  交互形式設計

本次制作的界面主要使用的交互方式如下：

（1）輸入框：用于用戶的登錄，注冊;

（2）下拉菜單：用于用戶快捷查找目標頁面;

（3）圖片式的按鈕：簡單明了，能夠一眼看見并且知道它代表的意思，方便用戶;

（4）快速進入目標頁面的同時增加了頁面的美觀度;

（5）符號按鈕：通過向上箭頭的設計，能夠讓用戶知道這是一個快速回到頁面頂端的按鈕，方便了用戶的瀏覽;

（6）大量的文字鏈接：最為直觀的指向下一級頁面的按鈕，用戶操作方便，瀏覽簡單。

4.2? 界面實現情況

第一套方案整體采用了長局的布局，用戶可以通過下拉滾輪查看到俱樂部的最新活動，課程安排，教練，榮譽資質，運動小貼士等信息，主頁面正上方可以選取一張健身的圖片配以適當文字制作一個Banner，通過對文字的排版讓整張圖片既多樣化的同時，又不會顯得凌亂或者具有違和感，大圖與文字的結合放在一個主頁的開頭就目前主流審美來看是最為合適的，即美觀了界面，避免畫面整體的空洞單調，也讓用戶看著很舒服，突出了網站的宗旨。每個頁面最下方可以適當的加入一句勵志語讓界面更加多樣化，頁面右側設置的小按鈕可以方便用戶點擊回到頁面頂端，同時圖片與文字相輔形成了多個直觀的子頁面鏈接，讓用戶能夠很輕松就知道這個俱樂部有哪些業務，并且快速的進入目標頁面。子頁面則用文字加圖片來進行內容的介紹，使內容明了于用戶眼中。

第二套方案的排版較為密集，在首頁上既能通過圖片鏈接到相應的子頁面，也可以通過大量的文字鏈接通往相應的子頁面，并且通過大量的文字讓用戶僅在主頁面就可以得到很多想知道的信息。而子頁面的設計可以采用頁面整體布局不變，只在頁面中心部分以及右上角變換內容，這樣可以讓用戶最好的適應界面，不用因為進入一個新的頁面重新尋找各級按鈕而浪費時間，同時頁面可以在下端添加評價系統，使得人機交互性更為突出。教練詳情頁的設計推薦在頁面中央安排一個視頻的播放窗口，此窗口能夠讓用戶通過觀看俱樂部教練們的介紹視頻對各個教練有個更為清晰的了解。

第三套方案采用不太常見的一張圖片一個頁面的設計（具體設計為使用一些健身相關的美圖，可以是人物，可以是器材作為網頁的背景圖片，再在該圖上按照健身模塊安排適當的圖片或符號類的介紹并鏈接到指定頁面），通過很多張這樣的圖片共同構成了網站界面，大圖配少量文字可以給人一種簡約大氣的美感，視覺上要比其他類型的界面要好很多，并且多張健身圖片也突出了網站的性質，同時這樣的設計也不會影響用戶的使用，通過右側的選擇可以隨時在任一界面實現跳躍。具體實現情況如圖1，僅供參考。

5? 結? 論

第一套：中規中矩，沒有什么大問題，不過也不夠出彩，特點不明顯，目前較多主流網站均采用這種布局設計;

第二套：總的來說很不錯，排版色彩都很合適，整體看著很協調，唯一缺點就是可能過多的文字顯得內容有點擁擠;

第三套：色彩搭配很好，設計很有創意，總體沒有什么毛病。

通過上述對健身房網頁頁面設計的闡述，希望可以為讀者提供一種思路，制作出能夠吸引消費者的網站，將健身事業的網絡化發揚光大。

本次的界面設計完成后，通過用戶的評價讓我知道了本次設計的可取之處以及欠缺的地方，并且懂得了如何做出讓用戶滿意，人機交互性更好的界面，希望以后的設計，能夠做得更好。

參考文獻：

[1] 張蕙.淺談網頁界面設計思路與實現 [J].軟件，2013，34（1）：102-103.

[2] 徐東.色彩學導論 [J].遼寧大學學報（自然科學版），2006，33（1）：93-96.

[3] 胡艷華.論色彩構成在美術教學中的重要性 [J].遼寧師專學報（社會科學版），2006（1）：91-92.

[4] 呂威偉.色彩調和的一般原理與方法 [J].麗水學院學報，2006（1）：70-71+83.

[5] 古大詒.色彩與圖形視覺原理 [M].北京：科學出版社，2000.

[6] 鐘蜀衍.色彩構成 [M].杭州：中國美術學院出版社，1994.

[7] 張帆，羅琦，宮曉東.網頁界面設計藝術教程 [M].北京：人民郵電出版社，2002.