基于水族寵物的垂直社交網(wǎng)站設(shè)計

張澤今

（鄭州市第四中學(xué)，河南 鄭州 450052）

基于水族寵物的垂直社交網(wǎng)站設(shè)計

張澤今

（鄭州市第四中學(xué)，河南 鄭州 450052）

針對大多數(shù)人都喜愛的養(yǎng)殖水族寵物這一現(xiàn)象，設(shè)計了一款基于水族寵物的社交網(wǎng)站，讓具有共同愛好的人群通過本網(wǎng)站可以進(jìn)行經(jīng)驗交流。本文以人們對水族領(lǐng)域水族箱造景的興趣和愛好為主線，采用.NET框架和MVC（Model-View-Controller）模式在微軟Azure云平臺上部署Web APP，使用Bootstrap、WinJS等技術(shù)進(jìn)行響應(yīng)式界面設(shè)計，使網(wǎng)站同時具備移動特性，為水族愛好者開拓新的水族社交領(lǐng)域。

社交網(wǎng)站；水族寵物；Azure；.NET；響應(yīng)式設(shè)計

我國有很多的人養(yǎng)殖水族寵物，如觀賞魚、觀賞蝦、龜及其他水生物種等［1］。這些人有著相同或相似的興趣愛好，但由于缺少交流平臺，有時很難對共同感興趣的事物進(jìn)行交流、分享。垂直社交網(wǎng)站是以用戶共同的特點如興趣愛好、職業(yè)專業(yè)等為社交主題所建立的社交網(wǎng)站。在垂直社交網(wǎng)站中，用戶擁有共同的話題，且話題資源多，也更有深度，能夠使用戶快捷地獲取所需信息，有效減少用戶篩選信息的成本，提高效率［2-3］。商家也會有針對性地投放廣告和信息，滿足用戶對某個方面的需求。也就是說，垂直社交具有商業(yè)價值。目前，國內(nèi)水族寵物的社交媒介有博客、貼吧、論壇等，經(jīng)過一段時間的發(fā)展，也積累和培養(yǎng)了一大批水族愛好者，但這些媒介通常是綜合性網(wǎng)站的一部分，增加了人們篩選有效信息的時間成本和交流難度。對此，本文設(shè)計一款專門針對水族寵物愛好者的社交網(wǎng)站。

1 垂直社交網(wǎng)站及相關(guān)設(shè)計技術(shù)

1.1 社交網(wǎng)站的現(xiàn)狀

在互聯(lián)時代，社交網(wǎng)絡(luò)更加低成本、廣連接、高效率，人們社交范圍不斷擴(kuò)大。在社交需求日新月異的今天，社交新品不斷涌現(xiàn)。目前，全球互聯(lián)網(wǎng)活躍的社交網(wǎng)站有Facebook、Twitter、Pinterest、LinkedIn等，F(xiàn)acebook是面向所有用戶的綜合性社交網(wǎng)站，Twitter是以微博客的形式進(jìn)行社交的綜合性社交網(wǎng)站，Pinterest是世界上最大的圖片社交分享網(wǎng)站，LinkedIn是基于職業(yè)和商務(wù)關(guān)系垂直細(xì)分的社交網(wǎng)站［4］。國內(nèi)也有與之相類似的社交產(chǎn)品，如人人、微博、花瓣、天際等。根據(jù)社交行為和活動的基礎(chǔ)，社交產(chǎn)品大概可分為：基于關(guān)系圖譜的社交、基于興趣圖譜的社交、基于地理位置的社交等。中國社交網(wǎng)絡(luò)的發(fā)展歷程主要分4個階段：早期社交網(wǎng)絡(luò)雛形BBS時代、娛樂化社交網(wǎng)絡(luò)時代、微信息社交網(wǎng)絡(luò)時代、垂直社交網(wǎng)絡(luò)應(yīng)用時代［5］。

表1 網(wǎng)站首頁功能列表

1.2 相關(guān)設(shè)計技術(shù)

本文實現(xiàn)水族寵物垂直社交網(wǎng)站主要采用的技術(shù)包括Microsoft Azure、Bootstrap、jQuery、WinJS、ADO等技術(shù)。Microsoft Azure是由微軟提供的互聯(lián)網(wǎng)級的云計算服務(wù)平臺，可提供計算、網(wǎng)絡(luò)、數(shù)據(jù)、應(yīng)用程序等服務(wù)。由這些基礎(chǔ)服務(wù)可以組合出基礎(chǔ)結(jié)構(gòu)、數(shù)據(jù)管理、Web應(yīng)用程序、開放和測試、存儲備份和恢復(fù)等多種解決方案。Bootstrap是由Twitter的Mark Otto和Jacob Thornton基于CSS開發(fā)的用于開發(fā)響應(yīng)式布局的Web項目的HTML、CSS和JS框架。jQuery是一套JavaScript腳本庫，能夠完成編碼邏輯，實現(xiàn)業(yè)務(wù)功能，使用jQuery將極大地提高編寫Javascript代碼的效率。WinJS是一個開源的JavaScript框架，包含微軟提供的所有JavaScript庫，用于幫助開發(fā)者創(chuàng)建HTML/CSS/JS應(yīng)用。ADO是微軟的一個面向?qū)ο蟮臄?shù)據(jù)庫編程接口，與編程語言無關(guān)，它提供了統(tǒng)一數(shù)據(jù)訪問方式，用于訪問數(shù)據(jù)庫中的數(shù)據(jù)。

2 垂直社交網(wǎng)站的設(shè)計

2.1 系統(tǒng)構(gòu)成

針對水族寵物垂直社交網(wǎng)站的特點，以水族箱為主題，以滿足普通水族愛好者基本的社交需求，社交體驗貼近人們習(xí)慣的方式，且具備移動特性為目標(biāo)。通過對國內(nèi)水族網(wǎng)站的調(diào)查和水族愛好者的訪談?wù){(diào)查，對水族愛好者在其他社交媒介中分享的水族類信息進(jìn)行整理歸納。將網(wǎng)站分為首頁、個人主頁、水族箱頁面、水族箱計算器、注冊/登錄5個部分。首頁主要實現(xiàn)用戶水族箱信息的匯總展示；個人主頁是用戶發(fā)表動態(tài)和了解其他用戶動態(tài)的窗口；水族箱頁面是水族箱相關(guān)內(nèi)容的展示；水族箱計算器是方便用戶獲取開缸所需數(shù)據(jù)的計算工具；注冊/登錄是用戶加入網(wǎng)站使用社交功能的基礎(chǔ)，系統(tǒng)構(gòu)成如圖1所示。

圖1 水族寵物垂直社交網(wǎng)站系統(tǒng)構(gòu)成

2.2 各部分功能

①網(wǎng)站首頁：網(wǎng)站首頁主要向瀏覽網(wǎng)站的用戶介紹網(wǎng)站，展示網(wǎng)站內(nèi)容，吸引用戶注冊。

②登錄/注冊：實現(xiàn)用戶注冊、登錄等功能，用戶注冊并登錄后才能修改自身的數(shù)據(jù)和水族箱內(nèi)容，通過用戶注冊/登錄/注銷功能來保證用戶數(shù)據(jù)信息的安全。

③個人主頁：個人主頁是用戶個人信息的匯集和信息展示的主要場所，默認(rèn)顯示最近動態(tài)，只有注冊用戶才可擁有個人主頁。

④水族箱頁面：是用戶水族箱詳細(xì)信息的展示，包括水族箱參數(shù)信息展示和水族箱日志等。

⑤水族箱計算器：是為用戶提供的方便計算開缸所需數(shù)據(jù)的專業(yè)計算工具，可以計算新創(chuàng)建的水族箱的相關(guān)信息。各部分功能如表1所示。

2.3 響應(yīng)式設(shè)計

為了使不同顯示尺寸設(shè)備的用戶都能獲得良好的體驗，本文采用響應(yīng)式設(shè)計，主要使用Bootstrap進(jìn)行實現(xiàn)。運用Bootstrap的流式柵格系統(tǒng)來創(chuàng)建大多數(shù)的頁面布局，并使用Bootstrap的CSS樣式和組件，完成頁面內(nèi)容設(shè)計與實現(xiàn)。水族箱計算器頁面因其包含較多用戶輸入和輸出的操作，主要使用WinJS來實現(xiàn)。圖2是個人主頁的響應(yīng)式設(shè)計的流程圖。

圖2 個人主頁設(shè)計程序流程圖

圖3 個人主頁不同尺寸上的響應(yīng)式顯示

從流程圖看出，對于已經(jīng)注冊的用戶登錄后，Users控制器獲取參數(shù)UserID，并實例化User Model，通過Us?er Model里Aquariums中的Get Data Source By User方法獲取與此用戶相關(guān)水族箱的數(shù)據(jù)。再通過Sections中的GetSectionListViewModelByUserID方法來獲取與此用戶相關(guān)的動態(tài)信息數(shù)據(jù)，然后返回用戶視圖。通過用戶視圖，調(diào)用與之相關(guān)的視圖片段，遍歷Model中返回的數(shù)據(jù)，呈現(xiàn)出完整的界面。

3 運行效果

按照上述設(shè)計實現(xiàn)的個人主頁包括用戶頭像、昵稱以及“最近動態(tài)”和“喜歡”的水族箱、“關(guān)注”的人、“粉絲”的統(tǒng)計，位于頁面的上部狀態(tài)條。下面的內(nèi)容使用Boot?strap的柵格系統(tǒng)分為三列，中間是發(fā)表新動態(tài)和所關(guān)注的用戶動態(tài)展示模塊；左邊顯示我的水族箱，并預(yù)留了個人公告板；右側(cè)放置了開缸按鈕并預(yù)留了可用于向用戶提供技巧經(jīng)驗的手冊和最近訪客記錄。在大屏幕上顯示所有內(nèi)容，左中右三列的橫向占比為3∶6∶3；在中等屏幕和小屏幕上，以8∶4的比例顯示中間和右邊兩列；在超小屏幕上只顯示中間一列。顯示結(jié)果如圖3所示。

4 結(jié)語

從圖3顯示的結(jié)果可以看出，本文實現(xiàn)的水族寵物的垂直社交網(wǎng)站不僅方便用戶進(jìn)行自我展示，而且有利于具有水族寵物愛好的人相互交流，并且網(wǎng)站使用響應(yīng)式的設(shè)計思路讓不同設(shè)備上的用戶都能有很好的用戶體驗。

［1］ 宋遷紅，趙永鋒.觀賞魚產(chǎn)業(yè)現(xiàn)狀介紹［J］.科學(xué)養(yǎng)魚，2013（5）：12-17.

［2］ 劉志丹，張曉穎，范水香.垂直社交網(wǎng)站的興起與特征:基于用戶使用體驗的分析［J］.信息資源管理學(xué)報，2011（2）：107-112.

［3］ 錢思偉，肖狄虎.淺析垂直社交產(chǎn)品的特點與設(shè)計要點［J］.藝術(shù)與設(shè)計，2014（5）：103-105.

［4］ 張完碩，劉麗珺.垂直社交產(chǎn)品的內(nèi)容選擇研究［J］.設(shè)計藝術(shù)研究，2016（2）：47-52.

［5］ 劉珊.移動垂直社交產(chǎn)品發(fā)展現(xiàn)狀探究--基于用戶使用行為和傳播學(xué)視角［D］.濟(jì)南：山東大學(xué)，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-），女，研究方向：軟件設(shè)計。