編輯導(dǎo)語：如何做出正確的設(shè)計(jì)決策？這要求設(shè)計(jì)師站在用戶的角度，基于用戶場(chǎng)景和用戶需求進(jìn)行抉擇，給出相對(duì)更合理的、更有效解決問題的設(shè)計(jì)方案。本篇文章里，作者結(jié)合實(shí)際案例，聊了聊他對(duì)設(shè)計(jì)決策的思考，不妨來看一下。

同一個(gè)需求，設(shè)計(jì)師可以提出各種設(shè)計(jì)方案，如何才能做好設(shè)計(jì)決策呢？

一方面要做好前期的設(shè)計(jì)研究、競(jìng)品分析、數(shù)據(jù)分析等，另一方面也要基于設(shè)計(jì)經(jīng)驗(yàn)，從設(shè)計(jì)本身出發(fā)尋找到更加理想的設(shè)計(jì)方案。今天就結(jié)合一個(gè)案例聊聊我個(gè)人的思考。

一、案例背景

最近在產(chǎn)品測(cè)試時(shí)，有同事提出”查看詳情”跳轉(zhuǎn)到新的頁面，返回時(shí)不是跳回當(dāng)前的列表頁碼，而是返回到列表首頁。用戶必須要再次切換到之前的瀏覽頁，才能在選擇下一條信息繼續(xù)查看詳情。使用起來非常不方便，有些“反人類”。

聽了他的說法后，我實(shí)際操作了一下，確實(shí)是存在這個(gè)問題。內(nèi)心不禁感嘆“竟然漏了這個(gè)細(xì)節(jié)”，但是仔細(xì)思考了一下，總覺得這個(gè)需求有些不妥。

所以按照設(shè)計(jì)的常規(guī)流程，進(jìn)行了一些競(jìng)品調(diào)研和場(chǎng)景分析。

二、競(jìng)品調(diào)研

首先查看了一些后臺(tái)管理類產(chǎn)品，發(fā)現(xiàn)大部場(chǎng)景“返回”都是回到列表首頁，個(gè)別是回到當(dāng)前頁面的。這說明技術(shù)上不存在問題，那為什么會(huì)有不同的設(shè)計(jì)呢？

這就需要回歸用戶場(chǎng)景，刨根問底了。

三、場(chǎng)景分析

對(duì)于B端產(chǎn)品，用戶面對(duì)的可能是海量的數(shù)據(jù)，主流的數(shù)據(jù)呈現(xiàn)形式就是表格。為了提高用戶效率，搜索也就成為了標(biāo)配功能。用戶可能只會(huì)有耐心看完前2頁的數(shù)據(jù)內(nèi)容，如果不滿足用戶的需要，則會(huì)選擇搜索查找。

所以B端產(chǎn)品可以看作是“重搜索”的場(chǎng)景，基于這樣的分析，我們認(rèn)為用戶不會(huì)不停地翻頁尋找自己的操作目標(biāo)。

另外B端用戶主要目標(biāo)是為了完成業(yè)務(wù)工作，如果是非職責(zé)所在，不會(huì)像C端用戶，主動(dòng)去“閑逛”查看頁面內(nèi)容。所以我們首先要保證用戶能夠快速定位目標(biāo)數(shù)據(jù)，完成詳情查看。

而測(cè)試場(chǎng)景下的用戶行為和真實(shí)用戶是有區(qū)別的，兩者的操作目標(biāo)也不相同。最終我們決定這個(gè)需求降級(jí)處理，暫不修改，還是將返回功能跳轉(zhuǎn)回表格首頁。后續(xù)根據(jù)用戶的實(shí)際反饋再做處理。

四、交互的深度思考

后來我又做了進(jìn)一步思考，發(fā)現(xiàn)“返回第幾頁”只是表象問題。這個(gè)問題的本質(zhì)在于用戶需要什么樣的信息，如何獲取所需的信息，信息該如何呈現(xiàn)給用戶。轉(zhuǎn)化為設(shè)計(jì)需求，主要是以下幾個(gè)問題：

• 詳情信息可以通過什么其他方法，更好的呈現(xiàn)給用戶，避免頁面刷新？
• 有沒有可能將用戶想要的信息展示在表格首頁?
• 設(shè)計(jì)側(cè)能否給出更好的解決方案，減少用戶返回，實(shí)現(xiàn)連續(xù)操作？

我們可以將以上問題歸集到用戶體驗(yàn)五要素中去尋找答案。

1. 框架層

1）頁面跳轉(zhuǎn)的方式

通常B端產(chǎn)品頁面跳轉(zhuǎn)是路徑下鉆式的，也就是說表格頁面和詳情頁面是不共存的。而傳統(tǒng)的網(wǎng)頁瀏覽都是新開瀏覽器標(biāo)簽頁的形式，實(shí)現(xiàn)內(nèi)容的并行獨(dú)立展示，從而避免跳轉(zhuǎn)和返回的問題。例如電商平臺(tái)的詳情頁面展示，通過新開瀏覽器標(biāo)簽的方式，允許用戶多條詳情的并行查看。

這種新開頁面的形式在管理系統(tǒng)中應(yīng)用較少，主要用于跨產(chǎn)品的頁面跳轉(zhuǎn)或者訂單購買頁面。例如阿里云、騰訊云產(chǎn)品功能之間的相互跳轉(zhuǎn)，都是采用新開標(biāo)簽頁的形式，可以保證用戶并行操作，方便信息間的對(duì)比、參考等。

▲瀏覽器標(biāo)簽頁

2）系統(tǒng)內(nèi)標(biāo)簽頁

系統(tǒng)內(nèi)標(biāo)簽頁同樣是相互獨(dú)立的，互不干涉，多窗口自由切換，并且信息保留在系統(tǒng)內(nèi)部，用戶的視覺動(dòng)線相對(duì)集中，交互操作成本更低。當(dāng)然標(biāo)簽頁欄屬于框架層級(jí)，始終都會(huì)占據(jù)頁面位置，會(huì)進(jìn)一步壓縮屏幕縱向有效空間。

▲系統(tǒng)內(nèi)標(biāo)簽頁

框架層屬于頂層設(shè)計(jì)，決定了產(chǎn)品的信息架構(gòu)和交互邏輯，考慮的更多是一致性，需要綜合考慮確定。不能因?yàn)橐粋€(gè)頁面的交互形式就隨意做出更改，否則會(huì)帶來較高的開發(fā)成本。

2. 結(jié)構(gòu)層

結(jié)構(gòu)層更多的是信息的組織形式，特別是信息量較大的表格，除了搜索功能外，還需要通過拆解、篩選、過濾、排序等功能，讓用戶可以更加方便的縮小信息范圍，結(jié)合列表的基礎(chǔ)信息，準(zhǔn)確定位所需的信息，做出查看決策，從而減少錯(cuò)誤判斷帶來的非必要操作。

例如電商平臺(tái)的商家后臺(tái)訂單管理中，將訂單根據(jù)不同的狀態(tài)拆分為不同的表格，并且通過關(guān)鍵字過濾、排序策略等，幫助用戶篩選出目標(biāo)內(nèi)容。

▲搜索篩選精準(zhǔn)定位內(nèi)容

3. 表現(xiàn)層

1）浮層組件

頁面來回跳轉(zhuǎn)確實(shí)會(huì)造成用戶效率下降，如果頁面內(nèi)容不多，可以采用彈窗和抽屜替代。這兩種方式都是在當(dāng)前頁面出現(xiàn)的浮層組件，可以避免返回帶來的頁面刷新問題。

▲抽屜組件避免返回操作

2）連續(xù)查看信息

對(duì)于用戶日常高頻操作信息，可以在詳情頁面增加連續(xù)操作按鈕，讓用戶不必返回即可完成信息查看。例如郵箱內(nèi)容詳情頁，用戶可以通過“上一條、下一條”功能，在固定頁面逐條查看郵件，用戶效率更高。

▲郵箱上一封，下一封切換功能

五、寫在最后

以上就是關(guān)于頁面跳轉(zhuǎn)的一些個(gè)人思考?？偟膩碚f，設(shè)計(jì)形式和交互邏輯可以多種多樣，但是設(shè)計(jì)必須要圍繞用戶需求和業(yè)務(wù)場(chǎng)景展開，只有抓住根本性問題，才能做出正確的設(shè)計(jì)決策。

#專欄作家#

子牧先生。公眾號(hào)：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，擅長(zhǎng)體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議