热血健身房网页页面设计研究和应用

江伟铭 张蕙

摘  要：健身已经日趋成为谈论的话题，健身中心也日益增多，而一般好的健身房都是采取会员制的管理系统，因此需要顾客亲自到健身中心实地注册，这对许多想要了解这个行业的潜在消费者造成了很大不利，从而影响了健身房的发展。因此，一个健身俱乐部在这个信息化时代要想吸引到足够的消费者，势必需要一个具有吸引力的网站进行宣传，因此这次课题旨在通过分析最合适的网页界面来对健身房网页页面进行相关的设计与研究。

关键词：网页设计;健身管理;网络营销;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.