基于水族寵物的垂直社交網站設計

張澤今

（鄭州市第四中學，河南 鄭州 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-），女，研究方向：軟件設計。