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

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了水族寵物的垂直社交網(wǎng)站設(shè)計范文，希望能給你帶來靈感和參考，敬請閱讀。

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

關(guān)鍵詞：社交網(wǎng)站；水族寵物；Azure；.NET；響應(yīng)式設(shè)計

我國有很多的人養(yǎng)殖水族寵物，如觀賞魚、觀賞蝦、龜及其他水生物種等［1］。這些人有著相同或相似的興趣愛好，但由于缺少交流平臺，有時很難對共同感興趣的事物進(jìn)行交流、分享。垂直社交網(wǎng)站是以用戶共同的特點(diǎn)如興趣愛好、職業(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.2相關(guān)設(shè)計技術(shù)

本文實(shí)現(xiàn)水族寵物垂直社交網(wǎng)站主要采用的技術(shù)包括MicrosoftAzure、Bootstrap、jQuery、WinJS、ADO等技術(shù)。MicrosoftAzure是由微軟提供的互聯(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的MarkOtto和JacobThornton基于CSS開發(fā)的用于開發(fā)響應(yīng)式布局的Web項(xiàng)目的HTML、CSS和JS框架。jQuery是一套JavaScript腳本庫，能夠完成編碼邏輯，實(shí)現(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)站的特點(diǎn)，以水族箱為主題，以滿足普通水族愛好者基本的社交需求，社交體驗(yàn)貼近人們習(xí)慣的方式，且具備移動特性為目標(biāo)。通過對國內(nèi)水族網(wǎng)站的調(diào)查和水族愛好者的訪談?wù){(diào)查，對水族愛好者在其他社交媒介中分享的水族類信息進(jìn)行整理歸納。將網(wǎng)站分為首頁、個人主頁、水族箱頁面、水族箱計算器、注冊/登錄5個部分。首頁主要實(shí)現(xiàn)用戶水族箱信息的匯總展示；個人主頁是用戶發(fā)表動態(tài)和了解其他用戶動態(tài)的窗口；水族箱頁面是水族箱相關(guān)內(nèi)容的展示；水族箱計算器是方便用戶獲取開缸所需數(shù)據(jù)的計算工具；注冊/登錄是用戶加入網(wǎng)站使用社交功能的基礎(chǔ)，

2.2各部分功能

①網(wǎng)站首頁：網(wǎng)站首頁主要向?yàn)g覽網(wǎng)站的用戶介紹網(wǎng)站，展示網(wǎng)站內(nèi)容，吸引用戶注冊。②登錄/注冊：實(shí)現(xiàn)用戶注冊、登錄等功能，用戶注冊并登錄后才能修改自身的數(shù)據(jù)和水族箱內(nèi)容，通過用戶注冊/登錄/注銷功能來保證用戶數(shù)據(jù)信息的安全。③個人主頁：個人主頁是用戶個人信息的匯集和信息展示的主要場所，默認(rèn)顯示最近動態(tài)，只有注冊用戶才可擁有個人主頁。④水族箱頁面：是用戶水族箱詳細(xì)信息的展示，包括水族箱參數(shù)信息展示和水族箱日志等。⑤水族箱計算器：是為用戶提供的方便計算開缸所需數(shù)據(jù)的專業(yè)計算工具，可以計算新創(chuàng)建的水族箱的相關(guān)信息。

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

為了使不同顯示尺寸設(shè)備的用戶都能獲得良好的體驗(yàn)，本文采用響應(yīng)式設(shè)計，主要使用Bootstrap進(jìn)行實(shí)現(xiàn)。運(yùn)用Bootstrap的流式柵格系統(tǒng)來創(chuàng)建大多數(shù)的頁面布局，并使用Bootstrap的CSS樣式和組件，完成頁面內(nèi)容設(shè)計與實(shí)現(xiàn)。水族箱計算器頁面因其包含較多用戶輸入和輸出的操作，主要使用WinJS來實(shí)現(xiàn)。對于已經(jīng)注冊的用戶登錄后，Users控制器獲取參數(shù)UserID，并實(shí)例化UserModel，通過Us⁃erModel里Aquariums中的GetDataSourceByUser方取與此用戶相關(guān)水族箱的數(shù)據(jù)。再通過Sections中的GetSectionListViewModelByUserID方法來獲取與此用戶相關(guān)的動態(tài)信息數(shù)據(jù)，然后返回用戶視圖。通過用戶視圖，調(diào)用與之相關(guān)的視圖片段，遍歷Model中返回的數(shù)據(jù)，呈現(xiàn)出完整的界面。

3運(yùn)行效果

按照上述設(shè)計實(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)驗(yàn)的手冊和最近訪客記錄。在大屏幕上顯示所有內(nèi)容，左中右三列的橫向占比為3∶6∶3；在中等屏幕和小屏幕上，以8∶4的比例顯示中間和右邊兩列；在超小屏幕上只顯示中間一列。

4結(jié)語

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

參考文獻(xiàn)：

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

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

［3］錢思偉，肖狄虎.淺析垂直社交產(chǎn)品的特點(diǎn)與設(shè)計要點(diǎn)［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.

作者:張澤今 單位:鄭州市第四中學(xué)