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

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

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

　　中图分类号：TP393文献标识码：A文章编号：1003-5168（2017）11-0047-03

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

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

　　1.1社交网站的现状

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

　　1.2相关设计技术

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

　　2垂直社交网站的设计

　　2.1系统构成

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

　　2.2各部分功能

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

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

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

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

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

　　2.3响应式设计

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

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

　　3运行效果

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

　　4结语

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

　　作者：张泽今