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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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