社交網(wǎng)站的完整設(shè)計(jì)思路

1、一、前言看到下面一些網(wǎng)站的名字，單身的你或許還是比較興奮。 沒錯(cuò)，以下這些都是比 較成熟的交友網(wǎng)站。排名不分先后：世紀(jì)佳緣、愛情公寓、城市達(dá)人、百合網(wǎng)、珍愛網(wǎng)、嫁我網(wǎng)、51個(gè)人空間、億友網(wǎng)、賽我網(wǎng)、聚友網(wǎng)、360圈、愛的根源、 江南情緣、QQ交友中心、速配網(wǎng)、知己交友網(wǎng)、人和網(wǎng)、 同樓網(wǎng)、圈網(wǎng)先看下面一組數(shù)據(jù)：其實(shí)網(wǎng)絡(luò)交友市場(chǎng)由來已久，從 02年03年到現(xiàn)在，大大小小的交友網(wǎng)站林林 總總，這塊市場(chǎng)確實(shí)是很大的。隨著交友市場(chǎng)的成熟，幾大交友網(wǎng)站的格局也逐 漸形成。窺其幾年的發(fā)展軌跡，我還是看得出：交友網(wǎng)站的特點(diǎn)：1、注冊(cè)用戶數(shù)多；2、用戶群體年輕3、用戶活躍度高；4、用戶粘性較強(qiáng)；5、用戶需求強(qiáng)

2、烈；交友網(wǎng)站的趨勢(shì)：1、交友方式豐富化；走直接交友到線下交友（電視相親、活動(dòng)相親）交友的方式越來越多。同樣交友方式的豐富化也為網(wǎng)友市場(chǎng)的價(jià)值挖掘和盈利探索提供了摸索和實(shí)踐的機(jī)會(huì)。2、交友載體多元化；交友載體不僅僅是PG現(xiàn)在有越來的載體如手機(jī)、移動(dòng)網(wǎng)絡(luò)等。可能到最后實(shí) 現(xiàn)多網(wǎng)合一，交友的便利體現(xiàn)的淋漓盡致。3、用戶溝通社區(qū)化；用戶溝通由橫向并行到縱向交叉，社區(qū)化的交友方式越來深的用戶青睞。 白來世 紀(jì)機(jī)緣、珍愛等幾家網(wǎng)站獨(dú)領(lǐng)風(fēng)騷，現(xiàn)在愛情公寓、開心、校內(nèi)、 139等等慢慢 搶占市場(chǎng)。4、市場(chǎng)競(jìng)爭(zhēng)差異化；伴隨市場(chǎng)的準(zhǔn)入門檻和實(shí)力對(duì)抗， 差異化競(jìng)爭(zhēng)越趨明顯如：心理學(xué)匹配、嚴(yán)肅交 友、白領(lǐng)交友、電視紅

3、娘不管是想通過網(wǎng)絡(luò)交友認(rèn)識(shí)異性，作為擇偶對(duì)象、人生朋友、性伴侶，還是在網(wǎng) 上尋找滿足感、歸宿感、情感心理依托也不管交友站么打著多么號(hào)召力的番號(hào)， 其規(guī)則還是換湯不換藥的路線。還單身么？想泡與被泡么？想相識(shí)異性么？一一那就來吧！作為平臺(tái)運(yùn)營方來 說，我們做的事很明確，就是：“怎么樣把找與愿與被找到的聯(lián)系起來?！?）畫圖玩為什么要畫圖呢，圖體驗(yàn)思路，圖可以組織邏輯，如果你的邏輯還不錯(cuò)可以直接 在腦子里進(jìn)行抽象思維，那我還是建議你把想法畫出來。接下來我打開ROSE0個(gè)圖，至于大家可選用的工具多了，此處不做說明?！緢D11【圖2】說明：很明白，通過圖1、2大體說明了這個(gè)社區(qū)的要去設(shè)計(jì)一些功能。以及這 些

4、功能的主次層級(jí)關(guān)系。在大的 TEAM這些SNS勺社區(qū)需求可以分解為幾個(gè)產(chǎn) 品經(jīng)理去做。可光有這個(gè)圖，還不夠，至于具體的這個(gè)SNStt區(qū)到底是通過怎么 樣一種機(jī)制去實(shí)現(xiàn)的呢，我覺得有必要接著畫第二張圖。第二步：畫一下SNStt區(qū)的協(xié)作機(jī)制如下:【圖3】【圖5】說明：在完成圖3、4后產(chǎn)品經(jīng)理不僅清楚或明確了要做什么，具體要實(shí)現(xiàn)哪些 功能的問題，而且從深層意思上明白了，整個(gè)SNStt區(qū)的協(xié)作機(jī)制。從淺入深的 理解這個(gè)龐大的社區(qū)系統(tǒng)，怎么樣去根據(jù)它的所謂體貌特征更好合適的設(shè)計(jì)整個(gè) 系統(tǒng)的構(gòu)架和交互。在完成了對(duì)社區(qū)的整體理解后，第一步就是圍繞 ID,也就是社區(qū)用戶的問題，用 戶怎么來？通過那幾種方式來，

5、通過哪幾種途徑來？社區(qū)有了用戶以后， 怎么樣 行為最初的好友關(guān)系，以及后面圍繞“ID” （在社區(qū)里體現(xiàn)為好友）怎么樣挖掘 更多的好友價(jià)值？也是產(chǎn)品經(jīng)理在寫需求的時(shí)候需要重點(diǎn)考慮的問題。第三步：畫一下SNStt區(qū)最簡(jiǎn)單的注冊(cè)以及邀請(qǐng)注冊(cè)如下:【圖5】【圖6】說明：其實(shí)注冊(cè)用戶，成為好友，邀請(qǐng)用戶注冊(cè)是個(gè)通常的做法，所以這快的畫 （邏輯）也是比較簡(jiǎn)單，SNStt區(qū)通過不斷的邀請(qǐng)注冊(cè)成為幾何倍數(shù)的增長(zhǎng)。當(dāng)然產(chǎn)品經(jīng)理在具體的邀請(qǐng)模塊中必須要把系統(tǒng)默認(rèn)的組名關(guān)系要規(guī)定好，到底你的初始數(shù)據(jù)需要擺哪些組，舉開心（kaixinool為例，它里面就把常用的同學(xué)、 同事等作為默認(rèn)的組。因?yàn)樗脱?qǐng)類型是相對(duì)應(yīng)的。

6、可能大家在寫需求寫到后 面發(fā)現(xiàn)，社區(qū)個(gè)人資料的字段設(shè)置也是和組精密相關(guān)的。第四步：？ ？ ？剛才的1、2、3步驟說白了，是組合邏輯的一個(gè)過程，那接下來第四步要畫什么， 那就根據(jù)您寫SNStt區(qū)需求的需要了，是要寫：“社區(qū)個(gè)人動(dòng)態(tài)處理邏輯”，還 是“個(gè)人主頁訪問權(quán)限處理邏輯”， 還是說“圈子、群組”實(shí)現(xiàn)邏輯，從邏輯的 角度來綜合的來考慮一下，我這塊的社區(qū)到底哪些地方的流程、邏輯需要約束和 定制，很簡(jiǎn)單的功能是允許程序員按照通過的實(shí)現(xiàn)方式去做的，所以把握好主次、側(cè)重為后期的需求完善也是鋪個(gè)良好的前奏。接下來，我再分享幾個(gè)常用的 SNStt區(qū)，需求的邏輯，我畫的貌似都是 ROSE勺 激活圖，可能也是

7、時(shí)間有限，難免有不規(guī)范和不完整之處，僅供大家參考?！緢D7】【圖8】【圖9】【圖10】這一章節(jié)的教程就此結(jié)束，此時(shí)此刻，設(shè)計(jì)社區(qū)需求 的產(chǎn)品經(jīng)理應(yīng)該腦子里很清 晰的印著一道道網(wǎng)絡(luò)，看過越獄的朋友應(yīng)該更有體會(huì)，其實(shí)這玩意值錢，做 產(chǎn)品做到后面不是說做哪一類的產(chǎn)品，而是說我有了一定的功夫，做什么都OK原理是相通的。我也希望PM們一定要做到心中有樹，這樣開展原型設(shè)計(jì)的時(shí)候 才能更快更好。社交(SNS網(wǎng)站的完整設(shè)計(jì)思路之2(2010-01-02 21:26:39)專載標(biāo)簽：it2)定目錄我個(gè)人的理解為：“邏輯條理化”，很多人說，你這么干繁瑣不繁瑣 啊。我認(rèn)為這個(gè)過程是必要的，且不可缺少的。究其原因是因?yàn)?/p>

8、你有了一個(gè)推過 反復(fù)推敲的可行的目錄，才能更合適的展開或變更需求。要不很多情況下，寫， 寫了一半斷電了。這種情況應(yīng)該說是很多的，其實(shí)很簡(jiǎn)單的養(yǎng)個(gè)一個(gè)好的習(xí)慣就 可以避免了。明確有哪些模塊，每個(gè)模塊有哪些功能。喜歡腦爆的朋友們可以先通過 Mind_manager畫好，我省略了這一步，直接在 AXUR氏把目錄定下來。接下來我為天家寫一個(gè) SNStt區(qū)的目錄出來，看看是不 是很直觀?！緢D11】作為經(jīng)驗(yàn)之談，我一般先在axure里面就SNStt區(qū)把目錄可能涉及的所有交互貢 面，都先初步命名好，然后建一個(gè)全局導(dǎo)航，作為 axure模板，這樣導(dǎo)航效果一 做好，加上各個(gè)的鏈接，這樣整體線框就出來了。很大程序

9、上提高了寫需求的效 率。不信你也可以試試?！緢D12】說明：基本上整個(gè)目錄結(jié)構(gòu)什么都 OK以后接下來就開始寫原型需求了，寫原型 設(shè)計(jì)的時(shí)候通常注意2點(diǎn)：1、盡可能的出線框圖，產(chǎn)品經(jīng)理們不要把太多的時(shí)間花在頁面風(fēng)格或頁面原型 表現(xiàn)的細(xì)節(jié)上。這樣很容易浪費(fèi)時(shí)間，等你的頁面交互都弄好后，可以根據(jù)討論 好的風(fēng)格讓設(shè)計(jì)師進(jìn)行設(shè)計(jì)；2、頁面布局的時(shí)候一定要合理，線性統(tǒng)一。剛?cè)腴T的產(chǎn)品經(jīng)理想到哪就寫到哪， 策劃到哪，到最后交付的時(shí)候就會(huì)發(fā)現(xiàn) 100個(gè)頁面60個(gè)不太一樣，這樣也造成 了美工設(shè)計(jì)人員很不好執(zhí)行。所以產(chǎn)品經(jīng)理在寫 PRDS求的時(shí)候，一定要理解， 哪些模塊是通用的，通用模塊都適用于哪些功能；哪些模塊是

10、不同的，整個(gè)頁面 結(jié)構(gòu)的劃分為什么要這樣?！緢D13】3）分解安排需求模塊這么多，預(yù)估得一個(gè)月，到底要怎么合理的安排優(yōu)先級(jí)呢？我們可以把系統(tǒng)功能拆分來， 例如下圖所示的：將優(yōu)先級(jí)分為: 核心功能和擴(kuò)展功能，以及核心功能對(duì)應(yīng)的延展功能，以及擴(kuò)展功能對(duì)應(yīng)的延展 功能。打個(gè)比方，SNStt區(qū)一般會(huì)先做基本社區(qū)框架，如：會(huì)員系統(tǒng)的設(shè)計(jì)、好 友的約定劃分功能解為核心功能，【圖15】反過來也就說，先把系統(tǒng)底層的功能框架設(shè)計(jì)好，然后慢慢的加上邀請(qǐng)、積分、積分兌換功能，然后再加上 APPA件（如：一句話大冒險(xiǎn)啊、新同居時(shí)代、好友 買賣什么的。）【圖15】O儂下來我們就開始從注冊(cè)、邀請(qǐng)注冊(cè)開始讓大家的焦點(diǎn)回到頁面

11、上來。注冊(cè) 我們考慮的會(huì)員的準(zhǔn)入問題。1）注冊(cè)進(jìn)來是必須要通過邀請(qǐng)，還是說也同時(shí)允 許自然注冊(cè)。2）默認(rèn)注冊(cè)進(jìn)來最基本的字段應(yīng)該有哪些【圖16、17說明：字段的組合并不是簡(jiǎn)單的拼湊，也不是說別人社區(qū)有哪些字段，我們就應(yīng) 有哪些字段。真正的要考慮到現(xiàn)在自己社區(qū)的實(shí)際情況。1）有多少字段，就可以通過這些字段的匹配組合找到很多關(guān)系的人，這一點(diǎn)作用是用在“查找好友” 過程中的；2）字段的合理劃分，是與“權(quán)限訪問設(shè)置”密切相關(guān)的，做過權(quán)限 系統(tǒng)的大家都情況，我們可以把權(quán)限組合成“權(quán)限組”、“權(quán)限”，一個(gè)合適的產(chǎn)品設(shè)計(jì)，在很大程度上影響了需求的可行性?！敬蠹铱聪旅娴乃阉骱糜训囊粋€(gè)頁面交互，比較一下，是不是

12、這樣的道理。】【圖18】4）寫模塊需求接下來我就拿SNStt區(qū)的“圈子”模塊為例子，給大家做一下示范。圈子，即為 群組很多地方稱呼不一，其實(shí)質(zhì)是一樣的。139、開心、5G貌似交互輸出都不太 一樣，首先我們先研究一下，這 3個(gè)的大體UI和功能?！緢D19、20、21最早做BBS的朋友，做這塊應(yīng)該是輕車熟路，更況時(shí)代，內(nèi)容都用用戶產(chǎn)生，只 要稍微的把功能平臺(tái)搭建好、話題引導(dǎo)好接下來問題就不大了。1）從圈子用戶角度，在做圈子/群組過程中，應(yīng)該著重從：瀏覽、查找、申請(qǐng)、 瀏覽、回復(fù)、等角度出發(fā)。2）從圈子管理者角度，能很方便的完成、主題的精華、置頂、編輯、刪除，用 戶申請(qǐng)的處理，圈子信息的維護(hù)，T人等操

13、作，那就基本上滿足了這個(gè)角色的需 求。3）從圈子的創(chuàng)建者角度，完成圈子的提交、維護(hù)，和其它對(duì)管理員的管理等就 可以了。同比139也好，還是5G開心也好，產(chǎn)品設(shè)計(jì)者真正的站在使用者的角度這是很大程序上符合用戶體驗(yàn)的一個(gè)好的做法。 使用者和研發(fā)者想的不一樣，像我們 研發(fā)設(shè)計(jì)人員想的過多的是，一個(gè)表單的提交，需要不需要審核，審核先展示， 還是審核后展示，信息匯集到列表，是什么樣的一個(gè)表現(xiàn)形式，對(duì)于圈子里不同 的角色的形成和權(quán)限怎么劃分和處理。而真正好的研發(fā)設(shè)計(jì)人員,PMf門在基本這些基本的實(shí)現(xiàn)邏輯、實(shí)現(xiàn)方式處理好后，要從使用者的角度進(jìn)行交互設(shè)計(jì)。如：用戶關(guān)心的是，我加入了哪些群，哪些群的申請(qǐng)我還在審

14、核中，我加入的群 中，我分別是哪些角色？是一般成員，還是管理員，還是我就是創(chuàng)建者；我想很 快捷的找到一個(gè)特定的群，我怎么找，等等 在手把手教你設(shè)計(jì)SNStt區(qū)【2】中我已經(jīng)把社區(qū)圈子的一個(gè)基本的行為用例分 享過了，大家可以去看。那就剛才說的真正的權(quán)限這塊，想必大家也很是關(guān)心， 我就冉帖出來，供大家參考。【圖22】流程是對(duì)邏輯的具體化補(bǔ)充，光有一個(gè)基本的業(yè)務(wù)邏輯或行為邏輯是不行的， 一 定要功能流程化。我們分析一下圈子的主體：1） ID、圈子ID的集合；2）圈子 的主題；3）圈子的照片；4）其它圈子的管理等?！緢D23、24、25寫到這就要畫原型頁面了，對(duì)于上面所涉及到權(quán)限這塊，開發(fā)的時(shí)候，最好還

15、是 用excel畫好權(quán)限表，流程化的東西，字段、權(quán)限量化。 （解釋一下，教程中很 多東西，我都是為了配合教程的講解現(xiàn)畫的。具體的情況視你和團(tuán)隊(duì)的融洽度定。一般我出需求現(xiàn)在就只要出邏輯、流程、交互頁面 十字段就成。5）畫頁面原型（技巧介紹）畫頁面原型，出前臺(tái)界面表現(xiàn)。深有感概的是，感謝 AXUR這個(gè)軟件，讓我們 的工作全面提速。大家對(duì)AXUR眩該很了解吧，網(wǎng)上還有AXURE勺交流群。我打 英文版以來用了近3年了，常用的就是哪些功能?；趏nmouse/onclick/onfous 以及onload 一些交互。要是做些TAG或菜單動(dòng)態(tài)樣式，就可以郵件又以下它的 輪換樣式就好了。說到這，我就一些畫頁

16、面的軟件技巧略帶講解一下。【圖26】【圖27】【圖28】【圖29】【圖30】AXUR回能還會(huì)用到模擬“圖片替換效果”、對(duì)于外調(diào)的交互效果，直接可以用 inframe鏈接。補(bǔ)充一點(diǎn)，axure在畫線框圖的效果中，1） 一定要注意把一些共 同的元素作為“組件”或“模板”用，這樣保存的文件會(huì)比較少；2）對(duì)一些原型效果微調(diào)的時(shí)候，可以組合多層形狀，可以具體到“ top= ?、left=? ”這樣打 開出來的頁面不會(huì)因?yàn)榻^對(duì)位置不一樣，在演示的時(shí)候形成錯(cuò)位感。這里不一一說明。我們根據(jù)最早的目錄，開始進(jìn)行圈子具體交互頁面的拼魔方運(yùn)動(dòng)。 大家也一起跟 著試一下，如果給你3個(gè)小時(shí)，你能很高質(zhì)的完成么？其實(shí)畫的

17、過程可以查漏補(bǔ) 缺，對(duì)整個(gè)需求的用戶體驗(yàn)設(shè)計(jì)起到一定的思考。5）畫頁面原型，整理文檔這兩天在做一個(gè)廣告監(jiān)控系統(tǒng)， 所以就耽誤了幾天寫SNSt程的時(shí)間。就剛剛看到的現(xiàn)狀，順便也總結(jié)了一下，產(chǎn)品 人員不要滿足于用工具，很多人真的很無聊，老是在網(wǎng)上一個(gè)勁的研究工具怎么 用，工具用會(huì)了又怎么樣。姑且把產(chǎn)品經(jīng)理錯(cuò)誤的劃分為，“小成”和“大成”， 掌握了一定的工具那也不算不成，我教產(chǎn)品新人的時(shí)候我也先讓他們了解做產(chǎn)品 需要哪些技能，掌握哪些工具，往往他們?cè)谝欢螘r(shí)間喜洋洋后， 我們會(huì)他們吃棗 后打一棒子。就教程【6】中講到的，axure畫交互頁面原型只是占需求中很小的一部分，綜 合的分析一下，業(yè)務(wù)邏輯-系統(tǒng)

18、實(shí)現(xiàn)邏輯功能實(shí)現(xiàn)邏輯-頁面表現(xiàn)邏 輯，（頁面表現(xiàn)只是作為數(shù)據(jù)輸出，和用戶行為交互必不可少的界面而已。）【圖31】【圖32】【圖33】=頁面不再一一舉例,以下是我畫圈子頁面的次序安排， 拋磚引玉,給大家提供參 考。1、創(chuàng)建圈子提及表單頁2、圈子申請(qǐng)、申請(qǐng)?zhí)幚眄撋暾?qǐng)類型：用戶申請(qǐng)交互、管理員交互申請(qǐng)交互（對(duì)應(yīng)用戶申請(qǐng)?zhí)幚斫换?，管?員申請(qǐng)?zhí)幚斫换ァ＃?、圈子管理頁管理類型：基本信息管理、訪問權(quán)限管理、成員管理、圈子公告4、圈子列表頁類型：全部圈子+熱門圈子、好友圈子、我的圈子（角色：我是創(chuàng)建者、我是管理員、我是成員、正在申請(qǐng)）5、具體圈子首頁布局：圈子介紹+圈子公告、latest話題+latest圖片、圈子管理員（角色:創(chuàng)建者+管理員）+最新加入成員+最新到訪成員6、圈子話題布局latest20 話題（字段：標(biāo)題+發(fā)布者+瀏覽/回復(fù)數(shù)）7、圈子話題最終貢8、發(fā)表表發(fā)話題頁9、圈子照片布局latest30 照片（說明：圈子需要也要分相冊(cè)，根據(jù)不同的情況定。）10、圈子照片最終頁11、上傳圈子照片12、以及其它的邀請(qǐng)好友加入圈子等頁面圖34】當(dāng)這個(gè)模塊所有的頁面完成以后，把各個(gè)按鈕、鏈接都加上，然后F5快捷鍵生成頁面，把自己當(dāng)用戶所有的頁面都流程化的過一遍， 看看哪快流程或頁面布局 不合理，再針對(duì)性