無(wú)論是網(wǎng)頁(yè)端，還是app端，還是其他產(chǎn)品形態(tài)，我們都嘗試在有限的頁(yè)面空間上盡可能并且簡(jiǎn)潔的增加頁(yè)面的內(nèi)容容量。但當(dāng)我們真正開(kāi)始去設(shè)計(jì)產(chǎn)品的時(shí)候，就要開(kāi)始考慮這種設(shè)計(jì)是否符合用戶場(chǎng)景，這種設(shè)計(jì)的交互在這種用戶場(chǎng)景下是否是最佳的。往單個(gè)頁(yè)面里增加內(nèi)容，最簡(jiǎn)單的做法就是兩欄式設(shè)計(jì)，左側(cè)菜單欄，右側(cè)展示內(nèi)容。
像收件箱這樣子的分欄式設(shè)計(jì)，在哪種用戶場(chǎng)景下更適用？
如上圖就是傳統(tǒng)的收件箱的設(shè)計(jì)，主體內(nèi)容模塊使用的是兩豎欄設(shè)計(jì)。
從用戶場(chǎng)景來(lái)說(shuō)起。在用戶收取郵件這個(gè)場(chǎng)景下，用戶收取到的郵件是有狀態(tài)區(qū)分的。比如未讀與有讀。在內(nèi)容有各類(lèi)型的狀態(tài)區(qū)分的情況下。來(lái)看一下傳統(tǒng)收件箱設(shè)計(jì)下用戶的操作軌跡。用戶點(diǎn)擊收件箱后，右側(cè)頁(yè)面跳出內(nèi)容列表。在內(nèi)容列表的上方有狀態(tài)的區(qū)分，點(diǎn)擊不同的狀態(tài)展示不一樣的內(nèi)容。點(diǎn)擊某個(gè)標(biāo)題，郵件詳細(xì)內(nèi)容頁(yè)面覆蓋右側(cè)的列表頁(yè)。
這里為什么把內(nèi)容狀態(tài)選取按鈕放到第二欄？直接放到收件箱的第二級(jí)，操作不是更扁平嗎？因?yàn)樵谶@個(gè)用戶場(chǎng)景下，紅旗郵件、代辦郵件的對(duì)于用戶來(lái)說(shuō)優(yōu)先級(jí)更高。而且與收件箱同級(jí)的菜單內(nèi)容也很多，所以收件箱這里把其他的較為次級(jí)的狀態(tài)放到第二欄。減小左側(cè)的菜單內(nèi)容，就能增加需要用戶關(guān)注的內(nèi)容模塊的點(diǎn)擊率。畢竟收件箱對(duì)于公司來(lái)說(shuō)不僅僅只是收件箱，他需要提供的內(nèi)容來(lái)幫助公司獲益，所以新聞中心，文件中心這些額外的、跟收件不相關(guān)的才入放到菜單模塊。這是從收益上對(duì)于產(chǎn)品的考慮。用戶場(chǎng)景和收益是做產(chǎn)品時(shí)需要平衡的。
但傳統(tǒng)的收件箱哪里做得還不好？我覺(jué)得是用戶回復(fù)郵件的操作非常不扁平。從上文的用戶的操作軌跡的分析，就可以看到傳統(tǒng)的收件箱點(diǎn)擊標(biāo)題彈出的內(nèi)容會(huì)覆蓋原先的列表頁(yè)。如果用戶一天在工作當(dāng)中有很多郵件要回復(fù)，那這個(gè)用戶就必須在回復(fù)郵件后再倒退到原先的列表頁(yè)，再次繼續(xù)原先的操作流程。這樣子的操作就非常不扁平，就非常不便捷。
為了讓用戶回復(fù)郵件場(chǎng)景的操作更加極致，我覺(jué)得如此設(shè)計(jì)是最好的。
三欄式的設(shè)計(jì)，把列表頁(yè)作為一個(gè)單獨(dú)的模塊，最右側(cè)的第三欄作為內(nèi)容回復(fù)區(qū)。這樣子，用戶處于回復(fù)郵件的場(chǎng)景時(shí)，操作就非常便利了。不用再重復(fù)點(diǎn)擊再后退再點(diǎn)擊的蛋疼過(guò)程，只有在第二欄的列表頁(yè)輕輕點(diǎn)擊，右側(cè)就能夠展示出回復(fù)的頁(yè)面。這酸爽，真任性。
如果想更全的展示內(nèi)容，還可以提供任意拉伸的功能，用戶可以把左側(cè)菜單縮小面積等等。
再來(lái)想想三欄式設(shè)計(jì)在滿足簡(jiǎn)潔的頁(yè)面效果的同時(shí)，還能夠做什么？
比如突出主要功能。
那雙欄式設(shè)計(jì)有什么優(yōu)點(diǎn)，在哪種場(chǎng)景比較適合使用？
我覺(jué)得雙欄式設(shè)計(jì)比較適合于操作簡(jiǎn)單的用戶場(chǎng)景，用戶在左側(cè)點(diǎn)擊，右側(cè)直接出現(xiàn)要展現(xiàn)的內(nèi)容。雙欄式設(shè)計(jì)的優(yōu)點(diǎn)就是突出主要展示的內(nèi)容。
而三欄式設(shè)計(jì)可以滿足一種平衡，當(dāng)操作較多時(shí)，三欄式設(shè)計(jì)能夠較好的平衡操作的扁平問(wèn)題和內(nèi)容的展現(xiàn)。
關(guān)于分欄式設(shè)計(jì)可應(yīng)用的場(chǎng)景應(yīng)該還有很多。分欄式設(shè)計(jì)是互聯(lián)網(wǎng)和移動(dòng)互聯(lián)網(wǎng)產(chǎn)品當(dāng)中基本元素。值得我們思考的東西還有很多，只能一步步來(lái)，隨著體驗(yàn)的產(chǎn)品增多，不斷總結(jié)，才會(huì)逐漸構(gòu)建起自己的方法論。
PS:允許非商業(yè)性轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明出處,謝謝.
=================================
這里只求真，沒(méi)有真理。
個(gè)人獨(dú)立博客：PMFuner.com
微信公眾號(hào)：PM范兒
記錄一個(gè)不懼撞南墻的野路子產(chǎn)品經(jīng)理的故事.
期待分享和交流~
