社交(SNS)網(wǎng)站的完整設計思路

1、精品文檔社交（ SNS）網(wǎng)站的完整設計思路一、前言看到下面一些網(wǎng)站的名字， 單身的你或許還是比較興奮。 沒錯，以下這些都是比較成熟的交友網(wǎng)站。排名不分先后：世紀佳緣、愛情公寓、城市達人、百合網(wǎng)、珍愛網(wǎng)、嫁我網(wǎng)、 51 個人空間、億友網(wǎng)、賽我網(wǎng)、聚友網(wǎng)、 360 圈、 愛的根源、江南情緣、 QQ交友中心、速配網(wǎng)、知己交友網(wǎng)、人和網(wǎng)、 同樓網(wǎng) 、圈網(wǎng)先看下面一組數(shù)據(jù)：。1歡迎下載精品文檔其實網(wǎng)絡交友市場由來已久，從 02 年 03 年到現(xiàn)在，大大小小的交友網(wǎng)站林林總總，這塊市場確實是很大的。 隨著交友市場的成熟， 幾大交友網(wǎng)站的格局也逐漸形成。窺其幾年的發(fā)展軌跡，我還是看得出： 交友網(wǎng)站的特點：1

2、、注冊用戶數(shù)多；2、用戶群體年輕3、用戶活躍度高；4、用戶粘性較強；5、用戶需求強烈； 交友網(wǎng)站的趨勢：1、交友方式豐富化；走直接交友到線下交友（電視相親、活動相親）交友的方式越來越多。同樣交友方式的豐富化也為網(wǎng)友市場的價值挖掘和盈利探索提供了摸索和實踐的機會。2、交友載體多元化；交友載體不僅僅是 PC，現(xiàn)在有越來的載體如手機、移動網(wǎng)絡等?？赡艿阶詈髮崿F(xiàn)多網(wǎng)合一，交友的便利體現(xiàn)的淋漓盡致。3、用戶溝通社區(qū)化；用戶溝通由橫向并行到縱向交叉， 社區(qū)化的交友方式越來深的用戶青睞。 白來世紀機緣、珍愛等幾家網(wǎng)站獨領風騷，現(xiàn)在愛情公寓、開心、校內(nèi)、 139 等等慢慢搶占市場。4、市場競爭差異化；伴隨市場

3、的準入門檻和實力對抗， 差異化競爭越趨明顯如： 心理學匹配、 嚴肅交友、白領交友、電視紅娘不管是想通過網(wǎng)絡交友認識異性，作為擇偶對象、人生朋友、性伴侶，還是在網(wǎng)上尋找滿足感、歸宿感、情感心理依托 也不管交友站么打著多么號召力的番號，其規(guī)則還是換湯不換藥的路線。還單身么？想泡與被泡么？想相識異性么？ 那就來吧！作為平臺運營方來說，我們做的事很明確，就是： “怎么樣把找與愿與被找到的聯(lián)系起來。 ”。2歡迎下載精品文檔1）畫圖玩為什么要畫圖呢， 圖體驗思路， 圖可以組織邏輯， 如果你的邏輯還不錯可以直接在腦子里進行抽象思維，那我還是建議你把想法畫出來。接下來我打開 ROSE畫個圖，至于大家可選用的工

4、具多了，此處不做說明?！緢D 1】=【圖 2】=說明：很明白，通過圖 1、 2 大體說明了這個社區(qū)的要去設計一些功能。以及這些功能的主次層級關(guān)系。在大的 TEAM，這些 SNS的社區(qū)需求可以分解為幾個產(chǎn)品經(jīng)理去做。 可光有這個圖， 還不夠，至于具體的這個 SNS社區(qū)到底是通過怎么樣一種機制去實現(xiàn)的呢，我覺得有必要接著畫第二張圖。3歡迎下載精品文檔第二步：畫一下SNS社區(qū)的協(xié)作機制 如下 ：【圖 3】=【圖 4】=說明：在完成圖3、 4 后產(chǎn)品經(jīng)理不僅清楚或明確了要做什么，具體要實現(xiàn)哪些功能的問題， 而且從深層意思上明白了，整個 SNS社區(qū)的協(xié)作機制。 從淺入深的。4歡迎下載精品文檔理解這個龐大的

5、社區(qū)系統(tǒng)， 怎么樣去根據(jù)它的所謂體貌特征更好合適的設計整個系統(tǒng)的構(gòu)架和交互。在完成了對社區(qū)的整體理解后，第一步就是圍繞 ID, 也就是社區(qū)用戶的問題，用戶怎么來？通過那幾種方式來， 通過哪幾種途徑來？社區(qū)有了用戶以后， 怎么樣行為最初的好友關(guān)系， 以及后面圍繞 “ID ”（在社區(qū)里體現(xiàn)為好友） 怎么樣挖掘更多的好友價值？也是產(chǎn)品經(jīng)理在寫需求的時候需要重點考慮的問題。第三步：畫一下SNS社區(qū)最簡單的注冊以及邀請注冊 如下 ：【圖 5】=。5歡迎下載精品文檔【圖 6】=說明：其實注冊用戶，成為好友，邀請用戶注冊是個通常的做法，所以這快的畫（邏輯）也是比較簡單， SNS社區(qū)通過不斷的邀請注冊成為幾何

6、倍數(shù)的增長。當然產(chǎn)品經(jīng)理在具體的邀請模塊中必須要把系統(tǒng)默認的組名關(guān)系要規(guī)定好， 到底你的初始數(shù)據(jù)需要擺哪些組，舉開心（ kaixinoo1 為例，它里面就把常用的同學、同事等作為默認的組。 因為它和邀請類型是相對應的。 可能大家在寫需求寫到后面發(fā)現(xiàn)，社區(qū)個人資料的字段設置也是和組精密相關(guān)的。第四步：？剛才的 1、2、3 步驟說白了，是組合邏輯的一個過程， 那接下來第四步要畫什么，那就根據(jù)您寫 SNS社區(qū)需求的需要了， 是要寫： “ 社區(qū)個人動態(tài)處理邏輯 ”，還是 “個人主頁訪問權(quán)限處理邏輯 ”，還是說 “圈子、 群組 ”實現(xiàn)邏輯， 從邏輯的角度來綜合的來考慮一下， 我這塊的社區(qū)到底哪些地方的流

7、程、 邏輯需要約束和定制，很簡單的功能是允許程序員按照通過的實現(xiàn)方式去做的， 所以把握好主次、側(cè)重為后期的需求完善也是鋪個良好的前奏。接下來，我再分享幾個常用的 SNS社區(qū)，需求的邏輯，我畫的貌似都是 ROSE的激活圖，可能也是時間有限，難免有不規(guī)范和不完整之處，僅供大家參考?！緢D 7】=。6歡迎下載精品文檔【圖 8】=【圖 9】=。7歡迎下載精品文檔【圖 10】=這一章節(jié)的教程就此結(jié)束， 此時此刻，設計社區(qū)需求的產(chǎn)品經(jīng)理應該腦子里很清晰的印著一道道網(wǎng)絡，看過越獄的朋友應該更有體會，其實這玩意值錢，做產(chǎn)品做到后面不是說做哪一類的產(chǎn)品，而是說我有了一定的功夫，做什么都 OK，原理是相通的。我也希

8、望 PM們一定要做到心中有樹，這樣開展原型設計的時候才能更快更好。社交（ SNS）網(wǎng)站的完整設計思路之2。8歡迎下載精品文檔(2010-01-02 21:26:39)轉(zhuǎn)載標簽：it2）定目錄 我個人的理解為： “邏輯條理化 ”，很多人說，你這么干繁瑣不繁瑣啊。我認為這個過程是必要的， 且不可缺少的。 究其原因是因為你有了一個推過反復推敲的可行的目錄，才能更合適的展開或變更需求。要不很多情況下，寫，寫了一半斷電了。 這種情況應該說是很多的， 其實很簡單的養(yǎng)個一個好的習慣就可以避免了。明確有哪些模塊，每個模塊有哪些功能。9歡迎下載精品文檔喜歡腦爆的朋友們可以先通過 Mind_manager畫好，我

9、省略了這一步，直接在AXURE上把目錄定下來。接下來我為大家寫一個 SNS社區(qū)的目錄出來，看看是不是很直觀?！緢D 11】=作為經(jīng)驗之談，我一般先在 axure 里面就 SNS社區(qū)把目錄可能涉及的所有交互頁面，都先初步命名好，然后建一個全局導航，作為 axure 模板，這樣導航效果一做好，加上各個的鏈接， 這樣整體線框就出來了。 很大程序上提高了寫需求的效率。不信你也可以試試?！緢D 12】=。10歡迎下載精品文檔說明：基本上整個目錄結(jié)構(gòu)什么都 OK以后接下來就開始寫原型需求了，寫原型設計的時候通常注意 2 點：1、盡可能的出線框圖，產(chǎn)品經(jīng)理們不要把太多的時間花在頁面風格或頁面原型表現(xiàn)的細節(jié)上。

10、這樣很容易浪費時間， 等你的頁面交互都弄好后， 可以根據(jù)討論好的風格讓設計師進行設計；2、頁面布局的時候一定要合理， 線性統(tǒng)一。剛?cè)腴T的產(chǎn)品經(jīng)理想到哪就寫到哪，策劃到哪，到最后交付的時候就會發(fā)現(xiàn) 100 個頁面 60 個不太一樣，這樣也造成了美工設計人員很不好執(zhí)行。所以產(chǎn)品經(jīng)理在寫 PRD需求的時候，一定要理解，哪些模塊是通用的， 通用模塊都適用于哪些功能； 哪些模塊是不同的， 整個頁面結(jié)構(gòu)的劃分為什么要這樣。【圖 13】=3）分解安排需求 模塊這么多，預估得一個月， 到底要怎么合理的安排優(yōu)先級呢？我們可以把系統(tǒng)功能拆分來， 例如下圖所示的：將優(yōu)先級分為：核心功能和擴展功能， 以及核心功能對應

11、的延展功能， 以及擴展功能對應的延展功能。打個比方， SNS社區(qū)一般會先做基本社區(qū)框架，如：會員系統(tǒng)的設計、好友的約定劃分功能解為核心功能，。11歡迎下載精品文檔【圖 14】=反過來也就說，先把系統(tǒng)底層的功能框架設計好，然后慢慢的加上邀請、積分、積分兌換功能，然后再加上 APP組件（如：一句話大冒險啊、新同居時代、好友買賣什么的。）【圖 15】=OK接下來我們就開始從注冊、邀請注冊開始讓大家的焦點回到頁面上來。注冊我們考慮的會員的準入問題。 1）注冊進來是必須要通過邀請，還是說也同時允許自然注冊。 2）默認注冊進來最基本的字段應該有哪些。12歡迎下載精品文檔【圖 16、17】=說明：字段的組合

12、并不是簡單的拼湊， 也不是說別人社區(qū)有哪些字段， 我們就應有哪些字段。真正的要考慮到現(xiàn)在自己社區(qū)的實際情況。 1）有多少字段，就可以通過這些字段的匹配組合找到很多關(guān)系的人， 這一點作用是用在 “查找好友 ” 過程中的； 2）字段的合理劃分，是與 “權(quán)限訪問設置 ”密切相關(guān)的，做過權(quán)限系統(tǒng)的大家都情況， 我們可以把權(quán)限組合成 “權(quán)限組 ” 、“權(quán)限 ”，一個合適的產(chǎn)品設計，在很大程度上影響了需求的可行性?！敬蠹铱聪旅娴乃阉骱糜训囊粋€頁面交互，比較一下，是不是這樣的道理。】。13歡迎下載精品文檔【圖 18】=4）寫模塊需求接下來我就拿 SNS社區(qū)的 “圈子 ”模塊為例子， 給大家做一下示范。 圈子

13、，即為群組很多地方稱呼不一，其實質(zhì)是一樣的。 139、開心、 5G貌似交互輸出都不太一樣，首先我們先研究一下，這 3 個的大體 UI 和功能。14歡迎下載精品文檔【圖 19、20、21】=最早做 BBS的朋友，做這塊應該是輕車熟路，更況 WEB2.0時代，內(nèi)容都用用戶產(chǎn)生，只要稍微的把功能平臺搭建好、話題引導好接下來問題就不大了。1）從圈子用戶角度，在做圈子 / 群組過程中，應該著重從：瀏覽、查找、申請、瀏覽、回復、等角度出發(fā)。2）從圈子管理者角度，能很方便的完成、主題的精華、置頂、編輯、刪除，用戶申請的處理，圈子信息的維護， T 人等操作，那就基本上滿足了這個角色的需求。3）從圈子的創(chuàng)建者角

14、度，完成圈子的提交、維護，和其它對管理員的管理等就可以了。15歡迎下載精品文檔同比 139 也好，還是 5G、開心也好，產(chǎn)品設計者真正的站在使用者的角度這是很大程序上符合用戶體驗的一個好的做法。 使用者和研發(fā)者想的不一樣， 像我們研發(fā)設計人員想的過多的是，一個表單的提交，需要不需要審核，審核先展示，還是審核后展示， 信息匯集到列表， 是什么樣的一個表現(xiàn)形式，對于圈子里不同的角色的形成和權(quán)限怎么劃分和處理。而真正好的研發(fā)設計人員， PM們在基本這些基本的實現(xiàn)邏輯、實現(xiàn)方式處理好后，要從使用者的角度進行交互設計。如：用戶關(guān)心的是，我加入了哪些群，哪些群的申請我還在審核中，我加入的群中，我分別是哪些

15、角色？是一般成員，還是管理員，還是我就是創(chuàng)建者；我想很快捷的找到一個特定的群，我怎么找，等等在手把手教你設計 SNS社區(qū)【 2】中我已經(jīng)把社區(qū)圈子的一個基本的行為用例分享過了，大家可以去看。那就剛才說的真正的權(quán)限這塊，想必大家也很是關(guān)心，我就再帖出來，供大家參考。16歡迎下載精品文檔【圖 22】=流程是對邏輯的具體化補充， 光有一個基本的業(yè)務邏輯或行為邏輯是不行的， 一定要功能流程化。我們分析一下圈子的主體： 1） ID、圈子 ID 的集合； 2）圈子的主題； 3）圈子的照片； 4）其它圈子的管理等。17歡迎下載精品文檔。18歡迎下載精品文檔。19歡迎下載精品文檔【圖 23、24、25】=寫到

16、這就要畫原型頁面了， 對于上面所涉及到權(quán)限這塊，開發(fā)的時候， 最好還是用 excel 畫好權(quán)限表，流程化的東西，字段、權(quán)限量化。 （解釋一下，教程中很多東西，我都是為了配合教程的講解現(xiàn)畫的。 具體的情況視你和團隊的融洽度定。一般我出需求現(xiàn)在就只要出邏輯、流程、交互頁面 +字段就成。5）畫頁面原型（技巧介紹）畫頁面原型，出前臺界面表現(xiàn)。深有感概的是，感謝 AXURE這個軟件，讓我們的工作全面提速。 大家對 AXURE應該很了解吧， 網(wǎng)上還有 AXURE的交流群。我打英文版以來用了近 3 年了，常用的就是哪些功能。 基于 onmouse/onclick/onfous 以及 onload 一些交互。

17、要是做些 TAG或菜單動態(tài)樣式，就可以郵件又以下它的輪換樣式就好了。說到這，我就一些畫頁面的軟件技巧略帶講解一下?！緢D 26】=。20歡迎下載精品文檔【圖 27】=【圖 28】=。21歡迎下載精品文檔【圖 29】=【圖 30】=AXURE可能還會用到模擬 “ 圖片替換效果 ”、對于外調(diào)的交互效果，直接可以用 inframe 鏈接。補充一點， axure 在畫線框圖的效果中， 1）一定要注意把一些共同的元素作為 “ 組件 ”或 “模板 ”用，這樣保存的文件會比較少； 2）對一些原型效果微調(diào)的時候， 可以組合多層形狀， 可以具體到 “top= ？、left=? ” 這樣打開出來的頁面不會因為絕對位

18、置不一樣， 在演示的時候形成錯位感。 這里不一一說明。22歡迎下載精品文檔我們根據(jù)最早的目錄， 開始進行圈子具體交互頁面的拼魔方運動。 大家也一起跟著試一下，如果給你 3 個小時，你能很高質(zhì)的完成么？其實畫的過程可以查漏補缺，對整個需求的用戶體驗設計起到一定的思考。5）畫頁面原型， 整理文檔 這兩天在做一個廣告監(jiān)控系統(tǒng)， 所以就耽誤了幾天寫 SNS教程的時間。 就剛剛看到的現(xiàn)狀， 順便也總結(jié)了一下， 產(chǎn)品人員不要滿足于用工具， 很多人真的很無聊， 老是在網(wǎng)上一個勁的研究工具怎么用，工具用會了又怎么樣。 姑且把產(chǎn)品經(jīng)理錯誤的劃分為， “小成 ”和 “大成 ”，掌握了一定的工具那也不算不成， 我教

19、產(chǎn)品新人的時候我也先讓他們了解做產(chǎn)品需要哪些技能， 掌握哪些工具， 往往他們在一段時間喜洋洋后， 我們會他們吃棗后打一棒子。就教程【 6】中講到的， axure 畫交互頁面原型只是占需求中很小的一部分，綜合的分析一下， 業(yè)務邏輯 系統(tǒng)實現(xiàn)邏輯 功能實現(xiàn)邏輯 頁面表現(xiàn)邏輯，（頁面表現(xiàn)只是作為數(shù)據(jù)輸出，和用戶行為交互必不可少的界面而已。）【圖 31】。23歡迎下載精品文檔=【圖 32】=【圖 33】=頁面不再一一舉例， 以下是我畫圈子頁面的次序安排， 拋磚引玉， 給大家提供參考。1、創(chuàng)建圈子提及表單頁2、圈子申請、申請?zhí)幚眄撋暾堫愋停河脩羯暾埥换?、管理員交互申請交互（對應用戶申請?zhí)幚斫换ィ芾韱T申請?zhí)幚斫换?。）?4歡迎下載精品文檔3、圈子管理頁管理類型：基本信息管理、訪問權(quán)限管理、成員管理、圈子公告4、圈子列表頁類型：全部圈子 +熱門圈子、好友圈子、我的圈子（角色：我是創(chuàng)建者、我是管理員、我是成員、正在申請）5、具體圈子首頁布局：圈子介紹 +圈子公告、latest話題 +latest圖片、