無(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)理的故事.
期待分享和交流~
