模塊化設(shè)計(jì)思路：用你的文檔提升用戶(hù)的閱讀體驗(yàn)

很多人對(duì)程序員的刻板印象都是邏輯性強(qiáng)、機(jī)械、封閉、死板；至于用戶(hù)體驗(yàn)這種事情，好像從來(lái)不是程序員擅長(zhǎng)的。

但是我想說(shuō)的是，其實(shí)很多產(chǎn)品經(jīng)理和交互設(shè)計(jì)師在易讀性、易用性這塊，其基本功不如一個(gè)程序員。

如果把我們工作中輸出的文檔當(dāng)做一個(gè)產(chǎn)品的話(huà)，那么文檔的讀者就是用戶(hù)，很多產(chǎn)品經(jīng)理或交互設(shè)計(jì)師使用Axure或其他工具做的原型，可讀性遠(yuǎn)不如程序員寫(xiě)的代碼。

我們來(lái)看看下圖，很多產(chǎn)品經(jīng)理或交互設(shè)計(jì)師的文檔就像這樣，我之前就有同事會(huì)輸出這種文檔。我們現(xiàn)在招聘看到的很多人的作品也是這種類(lèi)型的文檔。（與文檔內(nèi)容無(wú)關(guān)，不需要看清楚內(nèi)容，所以圖片已做模糊處理）

厲害吧？酷炫吧？我能夠在一張圖上面駕馭這么復(fù)雜的邏輯和流程，看看我多么專(zhuān)業(yè)。

我只能呵呵一句，互聯(lián)網(wǎng)這個(gè)處處考慮用戶(hù)，連你工作的上下游都是你文檔的用戶(hù)的行業(yè)，真是不太適合你。

這種毫無(wú)模塊化思路的文檔，會(huì)造成團(tuán)隊(duì)溝通上的困難，文檔難以維護(hù)，工作無(wú)法交接，而且會(huì)導(dǎo)致在做產(chǎn)品設(shè)計(jì)時(shí)思路混亂，漏洞百出。

如果你招聘時(shí)收到了這樣的作品文檔，請(qǐng)慎重。

模塊化的設(shè)計(jì)思路，如果你是一個(gè)邏輯性強(qiáng)且在乎讀者體驗(yàn)的人，那么你自己工作中完全有可能摸索出來(lái)模塊化設(shè)計(jì)思路。

但是這種思路被運(yùn)用得最成熟，被強(qiáng)制執(zhí)行得最透徹的，是程序設(shè)計(jì)領(lǐng)域。

惋惜 的是，產(chǎn)品經(jīng)理和交互設(shè)計(jì)師往往各種專(zhuān)業(yè)背景很雜，在一些基本功方面，沒(méi)有像程序設(shè)計(jì)那樣接受過(guò)系統(tǒng)的教育。

學(xué)過(guò)計(jì)算機(jī)課程的人應(yīng)該都知道，模塊化設(shè)計(jì)思路是程序設(shè)計(jì)的第二課（第一課可能都是hello world吧 ：））

因?yàn)槌绦蜷_(kāi)發(fā)是一個(gè)非常強(qiáng)調(diào)溝通協(xié)作的領(lǐng)域，所以程序代碼的易讀性是非常重要的。為了使程序易于理解，除了加注釋外，最重要的就是模塊化設(shè)計(jì)。

模塊化設(shè)計(jì)要求：

• 每段代碼長(zhǎng)度不能超過(guò)長(zhǎng) 200 行（不同團(tuán)隊(duì)限制有所不同），超過(guò)必須重構(gòu)。

• 盡可能將獨(dú)立的一段代碼封裝到獨(dú)立的模塊中去，然后再通過(guò)一行代碼調(diào)用此模塊。

• 模塊的含義要清楚明確，命名易于理解，模塊之間盡量減少關(guān)聯(lián)，低耦合。

程序設(shè)計(jì)對(duì)“用戶(hù)”體驗(yàn)的要求都如此之高，可能會(huì)令很多產(chǎn)品經(jīng)理和設(shè)計(jì)師汗顏。當(dāng)然，模塊化程序設(shè)計(jì)的作用不僅僅是閱讀者體驗(yàn)，在此不做討論。

很多程序員剛開(kāi)始的時(shí)候，非常不習(xí)慣模塊化，喜歡把東西一股腦鋪出來(lái)，而且還認(rèn)為代碼寫(xiě)的看起來(lái)越復(fù)雜越能體現(xiàn)自己的水平，正如上圖中有些人的產(chǎn)品設(shè)計(jì)文檔一樣。

毫無(wú)模塊化的思路和模塊化的思路對(duì)比

我們來(lái)通過(guò)一個(gè)偽代碼的例子看看這種模塊化設(shè)計(jì)思路：

下圖是一個(gè)描述買(mǎi)房的流程，沒(méi)有模塊化，讓你在一個(gè)頁(yè)面看到所有的細(xì)節(jié)，看起來(lái)會(huì)讓人非常懵。你細(xì)細(xì)看一下會(huì)發(fā)現(xiàn)很復(fù)雜且很難理解，就像上面那張產(chǎn)品設(shè)計(jì)圖一樣。

同樣的流程，下圖模塊化之后，更便于閱讀理解，也更便于流程設(shè)計(jì)者反思：

作為產(chǎn)品設(shè)計(jì)，我們應(yīng)該如何用模塊化設(shè)計(jì)思路來(lái)使文檔更易于閱讀

通過(guò)我的經(jīng)驗(yàn)積存 發(fā)現(xiàn)：再?gòu)?fù)雜的交互文檔，都可以通過(guò)模塊化來(lái)使其清楚 易懂。

• 學(xué)會(huì)拆分模塊；

• 考慮閱讀體驗(yàn)，不要讓文檔橫向拖動(dòng)；

• 一個(gè)模塊只描述一個(gè)主要的流程。

1. 學(xué)會(huì)拆分模塊

以Axure為例，做了一個(gè)簡(jiǎn)單的樣例。

如圖所示，我們不要試圖在當(dāng)前頁(yè)面中描述所有的內(nèi)容。對(duì)于一些單獨(dú)頁(yè)面或流程，可以放到子頁(yè)面里。但是需要注意的是，不是任何內(nèi)容都要放子頁(yè)面中，子頁(yè)面如果太多了，也會(huì)影響閱讀體驗(yàn)。比如一些彈窗確認(rèn)，彈窗浮層等等，直接在當(dāng)前頁(yè)面描述就可以了。

2. 考慮閱讀體驗(yàn)，不要讓文檔橫向拖動(dòng)

閱讀文檔的時(shí)候，如果需要橫向拖動(dòng)頁(yè)面，那么閱讀體驗(yàn)會(huì)非常糟糕。尤其是需要在橫縱兩個(gè)維度上閱讀時(shí)，思路非常容易被打斷，而且看文檔時(shí)還會(huì)很容易看漏內(nèi)容。

無(wú)論是手機(jī)還是PC機(jī)上，你的流程應(yīng)該是從上到下描述的，而不是從左向右。這樣使你的文檔只要滾動(dòng)鼠標(biāo)滾輪就能閱讀。而且右側(cè)還可以放注釋說(shuō)明，注釋說(shuō)明區(qū)域與界面原型不會(huì)“打架”。

操縱 你原型界面的寬度，有些產(chǎn)品設(shè)計(jì)人員喜歡把原型做的非常寬，導(dǎo)致注釋在屏幕之外，閱讀文檔很難受。其實(shí)你完全可以把原型等比例縮小，不一定要完全按照實(shí)際像素。

3. 一個(gè)模塊只描述一個(gè)主要的流程

比如說(shuō)，在拍攝視頻的子頁(yè)面中，只從上到下描述這個(gè)流程(UI flow)，如果流程中有界面或子流程在當(dāng)前頁(yè)面無(wú)法描述的，可以繼續(xù)建子頁(yè)面。

如下圖，簡(jiǎn)化的流程示意（原流程實(shí)際上有十幾個(gè)步驟）：

圖中選擇關(guān)聯(lián)好友實(shí)際上是一個(gè)相對(duì)獨(dú)立的流程，且流程比較麻煩，需要有篩選，查找好友等功能。該字段的描述不應(yīng)該打擾你整個(gè)流程的描述，應(yīng)該將其獨(dú)立為一個(gè)子模塊。這樣，你的流程描述就會(huì)非常清楚 明，主次分明。

用這種思路，就能讓你的文檔閱讀者有更好的體驗(yàn)。有些人可能擔(dān)心有些復(fù)雜的流程無(wú)法做到這種方式描述，但是實(shí)踐證明，所有的都可以，不用懷疑。就像再?gòu)?fù)雜的軟件程序代碼一樣，都可以拆解為易于理解的模塊。

總結(jié)

模塊化的思維，本質(zhì)上是邏輯思維的一種；不僅僅只是程序員，產(chǎn)品經(jīng)理和交互設(shè)計(jì)師也應(yīng)該具有這種思維。這種思維無(wú)論是你解決問(wèn)題，還是工作溝通協(xié)作，都是非常有用的。

如果你作為一個(gè)關(guān)注用戶(hù)體驗(yàn)的產(chǎn)品或設(shè)計(jì)人員，自己輸入的文檔卻都不能關(guān)注閱讀者的體驗(yàn)的話(huà)，那你如何能讓別人覺(jué)得你是有水平的呢？