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

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

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

關鍵詞：社交網(wǎng)站；水族寵物；Azure；.NET；響應式設計

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

1垂直社交網(wǎng)站及相關設計技術

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

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

1.2相關設計技術

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

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

2.1系統(tǒng)構成

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

2.2各部分功能

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

2.3響應式設計

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

3運行效果

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

4結語

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

參考文獻：

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

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

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

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

［5］劉珊.移動垂直社交產品發(fā)展現(xiàn)狀探究--基于用戶使用行為和傳播學視角［D］.濟南：山東大學，2016.

作者:張澤今 單位:鄭州市第四中學