水族寵物的垂直社交網(wǎng)站設(shè)計(jì)
前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了水族寵物的垂直社交網(wǎng)站設(shè)計(jì)范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。
摘要：針對(duì)大多數(shù)人都喜愛(ài)的養(yǎng)殖水族寵物這一現(xiàn)象，設(shè)計(jì)了一款基于水族寵物的社交網(wǎng)站，讓具有共同愛(ài)好的人群通過(guò)本網(wǎng)站可以進(jìn)行經(jīng)驗(yàn)交流。本文以人們對(duì)水族領(lǐng)域水族箱造景的興趣和愛(ài)好為主線(xiàn)，采用.NET框架和MVC（Model-View-Controller）模式在微軟Azure云平臺(tái)上部署WebAPP，使用Bootstrap、WinJS等技術(shù)進(jìn)行響應(yīng)式界面設(shè)計(jì)，使網(wǎng)站同時(shí)具備移動(dòng)特性，為水族愛(ài)好者開(kāi)拓新的水族社交領(lǐng)域。
關(guān)鍵詞：社交網(wǎng)站；水族寵物；Azure；.NET；響應(yīng)式設(shè)計(jì)
我國(guó)有很多的人養(yǎng)殖水族寵物，如觀賞魚(yú)、觀賞蝦、龜及其他水生物種等［1］。這些人有著相同或相似的興趣愛(ài)好，但由于缺少交流平臺(tái)，有時(shí)很難對(duì)共同感興趣的事物進(jìn)行交流、分享。垂直社交網(wǎng)站是以用戶(hù)共同的特點(diǎn)如興趣愛(ài)好、職業(yè)專(zhuān)業(yè)等為社交主題所建立的社交網(wǎng)站。在垂直社交網(wǎng)站中，用戶(hù)擁有共同的話(huà)題，且話(huà)題資源多，也更有深度，能夠使用戶(hù)快捷地獲取所需信息，有效減少用戶(hù)篩選信息的成本，提高效率［2-3］。商家也會(huì)有針對(duì)性地投放廣告和信息，滿(mǎn)足用戶(hù)對(duì)某個(gè)方面的需求。也就是說(shuō)，垂直社交具有商業(yè)價(jià)值。目前，國(guó)內(nèi)水族寵物的社交媒介有博客、貼吧、論壇等，經(jīng)過(guò)一段時(shí)間的發(fā)展，也積累和培養(yǎng)了一大批水族愛(ài)好者，但這些媒介通常是綜合性網(wǎng)站的一部分，增加了人們篩選有效信息的時(shí)間成本和交流難度。對(duì)此，本文設(shè)計(jì)一款專(zhuān)門(mén)針對(duì)水族寵物愛(ài)好者的社交網(wǎng)站。
1垂直社交網(wǎng)站及相關(guān)設(shè)計(jì)技術(shù)
1.1社交網(wǎng)站的現(xiàn)狀
在互聯(lián)時(shí)代，社交網(wǎng)絡(luò)更加低成本、廣連接、高效率，人們社交范圍不斷擴(kuò)大。在社交需求日新月異的今天，社交新品不斷涌現(xiàn)。目前，全球互聯(lián)網(wǎng)活躍的社交網(wǎng)站有Facebook、Twitter、Pinterest、LinkedIn等，F(xiàn)acebook是面向所有用戶(hù)的綜合性社交網(wǎng)站，Twitter是以微博客的形式進(jìn)行社交的綜合性社交網(wǎng)站，Pinterest是世界上最大的圖片社交分享網(wǎng)站，LinkedIn是基于職業(yè)和商務(wù)關(guān)系垂直細(xì)分的社交網(wǎng)站［4］。國(guó)內(nèi)也有與之相類(lèi)似的社交產(chǎn)品，如人人、微博、花瓣、天際等。根據(jù)社交行為和活動(dòng)的基礎(chǔ)，社交產(chǎn)品大概可分為：基于關(guān)系圖譜的社交、基于興趣圖譜的社交、基于地理位置的社交等。中國(guó)社交網(wǎng)絡(luò)的發(fā)展歷程主要分4個(gè)階段：早期社交網(wǎng)絡(luò)雛形BBS時(shí)代、娛樂(lè)化社交網(wǎng)絡(luò)時(shí)代、微信息社交網(wǎng)絡(luò)時(shí)代、垂直社交網(wǎng)絡(luò)應(yīng)用時(shí)代［5］。
1.2相關(guān)設(shè)計(jì)技術(shù)
本文實(shí)現(xiàn)水族寵物垂直社交網(wǎng)站主要采用的技術(shù)包括MicrosoftAzure、Bootstrap、jQuery、WinJS、ADO等技術(shù)。MicrosoftAzure是由微軟提供的互聯(lián)網(wǎng)級(jí)的云計(jì)算服務(wù)平臺(tái)，可提供計(jì)算、網(wǎng)絡(luò)、數(shù)據(jù)、應(yīng)用程序等服務(wù)。由這些基礎(chǔ)服務(wù)可以組合出基礎(chǔ)結(jié)構(gòu)、數(shù)據(jù)管理、Web應(yīng)用程序、開(kāi)放和測(cè)試、存儲(chǔ)備份和恢復(fù)等多種解決方案。Bootstrap是由Twitter的MarkOtto和JacobThornton基于CSS開(kāi)發(fā)的用于開(kāi)發(fā)響應(yīng)式布局的Web項(xiàng)目的HTML、CSS和JS框架。jQuery是一套JavaScript腳本庫(kù)，能夠完成編碼邏輯，實(shí)現(xiàn)業(yè)務(wù)功能，使用jQuery將極大地提高編寫(xiě)Javascript代碼的效率。WinJS是一個(gè)開(kāi)源的JavaScript框架，包含微軟提供的所有JavaScript庫(kù)，用于幫助開(kāi)發(fā)者創(chuàng)建HTML/CSS/JS應(yīng)用。ADO是微軟的一個(gè)面向?qū)ο蟮臄?shù)據(jù)庫(kù)編程接口，與編程語(yǔ)言無(wú)關(guān)，它提供了統(tǒng)一數(shù)據(jù)訪(fǎng)問(wèn)方式，用于訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)中的數(shù)據(jù)。
2垂直社交網(wǎng)站的設(shè)計(jì)
2.1系統(tǒng)構(gòu)成
針對(duì)水族寵物垂直社交網(wǎng)站的特點(diǎn)，以水族箱為主題，以滿(mǎn)足普通水族愛(ài)好者基本的社交需求，社交體驗(yàn)貼近人們習(xí)慣的方式，且具備移動(dòng)特性為目標(biāo)。通過(guò)對(duì)國(guó)內(nèi)水族網(wǎng)站的調(diào)查和水族愛(ài)好者的訪(fǎng)談?wù){(diào)查，對(duì)水族愛(ài)好者在其他社交媒介中分享的水族類(lèi)信息進(jìn)行整理歸納。將網(wǎng)站分為首頁(yè)、個(gè)人主頁(yè)、水族箱頁(yè)面、水族箱計(jì)算器、注冊(cè)/登錄5個(gè)部分。首頁(yè)主要實(shí)現(xiàn)用戶(hù)水族箱信息的匯總展示；個(gè)人主頁(yè)是用戶(hù)發(fā)表動(dòng)態(tài)和了解其他用戶(hù)動(dòng)態(tài)的窗口；水族箱頁(yè)面是水族箱相關(guān)內(nèi)容的展示；水族箱計(jì)算器是方便用戶(hù)獲取開(kāi)缸所需數(shù)據(jù)的計(jì)算工具；注冊(cè)/登錄是用戶(hù)加入網(wǎng)站使用社交功能的基礎(chǔ)，
2.2各部分功能
①網(wǎng)站首頁(yè)：網(wǎng)站首頁(yè)主要向?yàn)g覽網(wǎng)站的用戶(hù)介紹網(wǎng)站，展示網(wǎng)站內(nèi)容，吸引用戶(hù)注冊(cè)。②登錄/注冊(cè)：實(shí)現(xiàn)用戶(hù)注冊(cè)、登錄等功能，用戶(hù)注冊(cè)并登錄后才能修改自身的數(shù)據(jù)和水族箱內(nèi)容，通過(guò)用戶(hù)注冊(cè)/登錄/注銷(xiāo)功能來(lái)保證用戶(hù)數(shù)據(jù)信息的安全。③個(gè)人主頁(yè)：個(gè)人主頁(yè)是用戶(hù)個(gè)人信息的匯集和信息展示的主要場(chǎng)所，默認(rèn)顯示最近動(dòng)態(tài)，只有注冊(cè)用戶(hù)才可擁有個(gè)人主頁(yè)。④水族箱頁(yè)面：是用戶(hù)水族箱詳細(xì)信息的展示，包括水族箱參數(shù)信息展示和水族箱日志等。⑤水族箱計(jì)算器：是為用戶(hù)提供的方便計(jì)算開(kāi)缸所需數(shù)據(jù)的專(zhuān)業(yè)計(jì)算工具，可以計(jì)算新創(chuàng)建的水族箱的相關(guān)信息。
2.3響應(yīng)式設(shè)計(jì)
為了使不同顯示尺寸設(shè)備的用戶(hù)都能獲得良好的體驗(yàn)，本文采用響應(yīng)式設(shè)計(jì)，主要使用Bootstrap進(jìn)行實(shí)現(xiàn)。運(yùn)用Bootstrap的流式柵格系統(tǒng)來(lái)創(chuàng)建大多數(shù)的頁(yè)面布局，并使用Bootstrap的CSS樣式和組件，完成頁(yè)面內(nèi)容設(shè)計(jì)與實(shí)現(xiàn)。水族箱計(jì)算器頁(yè)面因其包含較多用戶(hù)輸入和輸出的操作，主要使用WinJS來(lái)實(shí)現(xiàn)。對(duì)于已經(jīng)注冊(cè)的用戶(hù)登錄后，Users控制器獲取參數(shù)UserID，并實(shí)例化UserModel，通過(guò)Us⁃erModel里Aquariums中的GetDataSourceByUser方取與此用戶(hù)相關(guān)水族箱的數(shù)據(jù)。再通過(guò)Sections中的GetSectionListViewModelByUserID方法來(lái)獲取與此用戶(hù)相關(guān)的動(dòng)態(tài)信息數(shù)據(jù)，然后返回用戶(hù)視圖。通過(guò)用戶(hù)視圖，調(diào)用與之相關(guān)的視圖片段，遍歷Model中返回的數(shù)據(jù)，呈現(xiàn)出完整的界面。
3運(yùn)行效果
按照上述設(shè)計(jì)實(shí)現(xiàn)的個(gè)人主頁(yè)包括用戶(hù)頭像、昵稱(chēng)以及“最近動(dòng)態(tài)”和“喜歡”的水族箱、“關(guān)注”的人、“粉絲”的統(tǒng)計(jì)，位于頁(yè)面的上部狀態(tài)條。下面的內(nèi)容使用Boot⁃strap的柵格系統(tǒng)分為三列，中間是發(fā)表新動(dòng)態(tài)和所關(guān)注的用戶(hù)動(dòng)態(tài)展示模塊；左邊顯示我的水族箱，并預(yù)留了個(gè)人公告板；右側(cè)放置了開(kāi)缸按鈕并預(yù)留了可用于向用戶(hù)提供技巧經(jīng)驗(yàn)的手冊(cè)和最近訪(fǎng)客記錄。在大屏幕上顯示所有內(nèi)容，左中右三列的橫向占比為3∶6∶3；在中等屏幕和小屏幕上，以8∶4的比例顯示中間和右邊兩列；在超小屏幕上只顯示中間一列。
4結(jié)語(yǔ)
本文實(shí)現(xiàn)的水族寵物的垂直社交網(wǎng)站不僅方便用戶(hù)進(jìn)行自我展示，而且有利于具有水族寵物愛(ài)好的人相互交流，并且網(wǎng)站使用響應(yīng)式的設(shè)計(jì)思路讓不同設(shè)備上的用戶(hù)都能有很好的用戶(hù)體驗(yàn)。
參考文獻(xiàn)：
［1］宋遷紅，趙永鋒.觀賞魚(yú)產(chǎn)業(yè)現(xiàn)狀介紹［J］.科學(xué)養(yǎng)魚(yú)，2013（5）：12-17.
［2］劉志丹，張曉穎，范水香.垂直社交網(wǎng)站的興起與特征:基于用戶(hù)使用體驗(yàn)的分析［J］.信息資源管理學(xué)報(bào)，2011（2）：107-112.
［3］錢(qián)思偉，肖狄虎.淺析垂直社交產(chǎn)品的特點(diǎn)與設(shè)計(jì)要點(diǎn)［J］.藝術(shù)與設(shè)計(jì)，2014（5）：103-105.
［4］張完碩，劉麗珺.垂直社交產(chǎn)品的內(nèi)容選擇研究［J］.設(shè)計(jì)藝術(shù)研究，2016（2）：47-52.
［5］劉珊.移動(dòng)垂直社交產(chǎn)品發(fā)展現(xiàn)狀探究--基于用戶(hù)使用行為和傳播學(xué)視角［D］.濟(jì)南：山東大學(xué)，2016.
作者:張澤今 單位:鄭州市第四中學(xué)
