基于水族宠物的垂直社交网站设计

张泽今

（郑州市第四中学，河南 郑州 450052）

基于水族宠物的垂直社交网站设计

张泽今

（郑州市第四中学，河南 郑州 450052）

针对大多数人都喜爱的养殖水族宠物这一现象，设计了一款基于水族宠物的社交网站，让具有共同爱好的人群通过本网站可以进行经验交流。本文以人们对水族领域水族箱造景的兴趣和爱好为主线，采用.NET框架和MVC（Model-View-Controller）模式在微软Azure云平台上部署Web APP，使用Bootstrap、WinJS等技术进行响应式界面设计，使网站同时具备移动特性，为水族爱好者开拓新的水族社交领域。

社交网站；水族宠物；Azure；.NET；响应式设计

我国有很多的人养殖水族宠物，如观赏鱼、观赏虾、龟及其他水生物种等［1］。这些人有着相同或相似的兴趣爱好，但由于缺少交流平台，有时很难对共同感兴趣的事物进行交流、分享。垂直社交网站是以用户共同的特点如兴趣爱好、职业专业等为社交主题所建立的社交网站。在垂直社交网站中，用户拥有共同的话题，且话题资源多，也更有深度，能够使用户快捷地获取所需信息，有效减少用户筛选信息的成本，提高效率［2-3］。商家也会有针对性地投放广告和信息，满足用户对某个方面的需求。也就是说，垂直社交具有商业价值。目前，国内水族宠物的社交媒介有博客、贴吧、论坛等，经过一段时间的发展，也积累和培养了一大批水族爱好者，但这些媒介通常是综合性网站的一部分，增加了人们筛选有效信息的时间成本和交流难度。对此，本文设计一款专门针对水族宠物爱好者的社交网站。

1 垂直社交网站及相关设计技术

1.1 社交网站的现状

在互联时代，社交网络更加低成本、广连接、高效率，人们社交范围不断扩大。在社交需求日新月异的今天，社交新品不断涌现。目前，全球互联网活跃的社交网站有Facebook、Twitter、Pinterest、LinkedIn等，Facebook是面向所有用户的综合性社交网站，Twitter是以微博客的形式进行社交的综合性社交网站，Pinterest是世界上最大的图片社交分享网站，LinkedIn是基于职业和商务关系垂直细分的社交网站［4］。国内也有与之相类似的社交产品，如人人、微博、花瓣、天际等。根据社交行为和活动的基础，社交产品大概可分为：基于关系图谱的社交、基于兴趣图谱的社交、基于地理位置的社交等。中国社交网络的发展历程主要分4个阶段：早期社交网络雏形BBS时代、娱乐化社交网络时代、微信息社交网络时代、垂直社交网络应用时代［5］。

表1 网站首页功能列表

1.2 相关设计技术

本文实现水族宠物垂直社交网站主要采用的技术包括Microsoft Azure、Bootstrap、jQuery、WinJS、ADO等技术。Microsoft Azure是由微软提供的互联网级的云计算服务平台，可提供计算、网络、数据、应用程序等服务。由这些基础服务可以组合出基础结构、数据管理、Web应用程序、开放和测试、存储备份和恢复等多种解决方案。Bootstrap是由Twitter的Mark Otto和Jacob Thornton基于CSS开发的用于开发响应式布局的Web项目的HTML、CSS和JS框架。jQuery是一套JavaScript脚本库，能够完成编码逻辑，实现业务功能，使用jQuery将极大地提高编写Javascript代码的效率。WinJS是一个开源的JavaScript框架，包含微软提供的所有JavaScript库，用于帮助开发者创建HTML/CSS/JS应用。ADO是微软的一个面向对象的数据库编程接口，与编程语言无关，它提供了统一数据访问方式，用于访问数据库中的数据。

2 垂直社交网站的设计

2.1 系统构成

针对水族宠物垂直社交网站的特点，以水族箱为主题，以满足普通水族爱好者基本的社交需求，社交体验贴近人们习惯的方式，且具备移动特性为目标。通过对国内水族网站的调查和水族爱好者的访谈调查，对水族爱好者在其他社交媒介中分享的水族类信息进行整理归纳。将网站分为首页、个人主页、水族箱页面、水族箱计算器、注册/登录5个部分。首页主要实现用户水族箱信息的汇总展示；个人主页是用户发表动态和了解其他用户动态的窗口；水族箱页面是水族箱相关内容的展示；水族箱计算器是方便用户获取开缸所需数据的计算工具；注册/登录是用户加入网站使用社交功能的基础，系统构成如图1所示。

图1 水族宠物垂直社交网站系统构成

2.2 各部分功能

①网站首页：网站首页主要向浏览网站的用户介绍网站，展示网站内容，吸引用户注册。

②登录/注册：实现用户注册、登录等功能，用户注册并登录后才能修改自身的数据和水族箱内容，通过用户注册/登录/注销功能来保证用户数据信息的安全。

③个人主页：个人主页是用户个人信息的汇集和信息展示的主要场所，默认显示最近动态，只有注册用户才可拥有个人主页。

④水族箱页面：是用户水族箱详细信息的展示，包括水族箱参数信息展示和水族箱日志等。

⑤水族箱计算器：是为用户提供的方便计算开缸所需数据的专业计算工具，可以计算新创建的水族箱的相关信息。各部分功能如表1所示。

2.3 响应式设计

为了使不同显示尺寸设备的用户都能获得良好的体验，本文采用响应式设计，主要使用Bootstrap进行实现。运用Bootstrap的流式栅格系统来创建大多数的页面布局，并使用Bootstrap的CSS样式和组件，完成页面内容设计与实现。水族箱计算器页面因其包含较多用户输入和输出的操作，主要使用WinJS来实现。图2是个人主页的响应式设计的流程图。

图2 个人主页设计程序流程图

图3 个人主页不同尺寸上的响应式显示

从流程图看出，对于已经注册的用户登录后，Users控制器获取参数UserID，并实例化User Model，通过Us⁃er Model里Aquariums中的Get Data Source By User方法获取与此用户相关水族箱的数据。再通过Sections中的GetSectionListViewModelByUserID方法来获取与此用户相关的动态信息数据，然后返回用户视图。通过用户视图，调用与之相关的视图片段，遍历Model中返回的数据，呈现出完整的界面。

3 运行效果

按照上述设计实现的个人主页包括用户头像、昵称以及“最近动态”和“喜欢”的水族箱、“关注”的人、“粉丝”的统计，位于页面的上部状态条。下面的内容使用Boot⁃strap的栅格系统分为三列，中间是发表新动态和所关注的用户动态展示模块；左边显示我的水族箱，并预留了个人公告板；右侧放置了开缸按钮并预留了可用于向用户提供技巧经验的手册和最近访客记录。在大屏幕上显示所有内容，左中右三列的横向占比为3∶6∶3；在中等屏幕和小屏幕上，以8∶4的比例显示中间和右边两列；在超小屏幕上只显示中间一列。显示结果如图3所示。

4 结语

从图3显示的结果可以看出，本文实现的水族宠物的垂直社交网站不仅方便用户进行自我展示，而且有利于具有水族宠物爱好的人相互交流，并且网站使用响应式的设计思路让不同设备上的用户都能有很好的用户体验。

［1］ 宋迁红，赵永锋.观赏鱼产业现状介绍［J］.科学养鱼，2013（5）：12-17.

［2］ 刘志丹，张晓颖，范水香.垂直社交网站的兴起与特征:基于用户使用体验的分析［J］.信息资源管理学报，2011（2）：107-112.

［3］ 钱思伟，肖狄虎.浅析垂直社交产品的特点与设计要点［J］.艺术与设计，2014（5）：103-105.

［4］ 张完硕，刘丽珺.垂直社交产品的内容选择研究［J］.设计艺术研究，2016（2）：47-52.

［5］ 刘珊.移动垂直社交产品发展现状探究--基于用户使用行为和传播学视角［D］.济南：山东大学，2016.

Designof aVertical Social Networking Site Based on Aqua pets

Zhang Zejin
（Zhengzhou NO.4 Middle School，Zhengzhou Henan 450000）

According to the phenomenon of most people love the aquarium pets,the design of a social net⁃working sites based on pets,so that people with a common interest through this site can be the exchange of experience.The.NET framework and MVC(Model-View-Controller)model is used to deploy Web AP⁃Pon the Microsoft Azure cloud platform,using Bootstrap,WinJS and other technologies to respond to the main line of people's interest and interest in aquarium construction,so that the site also has mobile fea⁃tures for aquarium enthusiasts to develop a new aquarium social experience.

verticalsocial networking sites；aqua pets；azure；.NET；responsivedesign

TP393

A

1003-5168（2017）11-0047-03

2017-10-02

张泽今（2000-），女，研究方向：软件设计。