編輯導(dǎo)語：在進行交互設(shè)計時，常常需要考慮用戶查看信息的便捷性。本文作者復(fù)盤了自己在做平板頁面交互時所設(shè)計的幾套方案，以及設(shè)計過程中遇到的問題和困惑點，希望對你有所幫助。

由于目前項目組沒有交互設(shè)計師，所以在這一年參與大大小小的需求設(shè)計中，自己也承擔(dān)著交互設(shè)計師的工作。

深知自己這種半路出家的人做交互，不管是專業(yè)知識還是能力上都有一定局限性，為了避免后續(xù)在同一個問題上踩了多次的坑，決定對自己做過的每一個項目都進行深度復(fù)盤。

前言

最近在做語文作文批改需求設(shè)計過程中【關(guān)于tab的切換】存在一些困擾的地方。

針對輸出方案在評審中大家也有不同的看法，因此想在這里進行系統(tǒng)地梳理一遍。

為更全面了解各種操作的優(yōu)劣勢，本文主要會從以下4個方向展開：

1. 現(xiàn)狀描述
2. 優(yōu)化思路設(shè)想
3. 困惑點及主流tab切換梳理
4. 方案總結(jié)

一、現(xiàn)狀描述

1. 原平板線上版本英文作文批改結(jié)果頁呈現(xiàn)

頁面信息有6個：

①作文得分

②整體分析

③詞匯分析

④句子分析

⑤作文詳情

⑥修改建議

2. 優(yōu)劣勢分析

（1）優(yōu)勢

修改建議呈現(xiàn)很直觀，有問題可以直接比對原作文內(nèi)容進行查看。

（2）劣勢

①上下兼左右布局，頁面空間利用率較低（需頁面整體上拉才能漏出更多信息）。

②該頁面主要承載的頁面信息有：作文文本、文本分析（整體分析、詞匯分析、句子分析）、及修改建議。本質(zhì)上可以總結(jié)為2類信息，一類是作文文本，另一類是針對作文的分析及改進，目前的結(jié)構(gòu)呈現(xiàn)感覺較散。

二、優(yōu)化思路設(shè)想

優(yōu)化進階一

思路：采用線上版本結(jié)構(gòu)整合信息內(nèi)容。

（1）優(yōu)勢
對修改建議進行合并到上半部分的作文分析模塊，整體呈現(xiàn)上下結(jié)構(gòu)：

• 上部分是作文的分析與建議
• 下半部分為文本內(nèi)容本身，結(jié)構(gòu)區(qū)分較清晰

（2）劣勢

平板頁面利用率較低的問題仍未得到解決

優(yōu)化進階二

思路：充分利用大屏終端的屬性，調(diào)整為左右結(jié)構(gòu)。

（1）優(yōu)勢

①調(diào)整為左右結(jié)構(gòu)，左邊為文本詳情，右邊為文本的批改評價及建議；

②解決了頁面利用率較低的問題。

（2）劣勢

由于目前的技術(shù)限制，作文批改整體分析、詞匯分析、句子分析評語內(nèi)容都相對較為空洞，沒有太多對用戶有價值的實質(zhì)性建議。修改建議是這4個字段中稍微比較有價值的內(nèi)容，相比線上版本，需操作點擊多次才能看到修改建議，殘忍至極。

優(yōu)化進階三

思路：左右結(jié)構(gòu)+并列布局，減少tab切換的形式。

（1）優(yōu)勢

①變成左右結(jié)構(gòu)，左邊為文本詳情，右邊為文本的批改評價及建議；

②解決了頁面利用率較低的問題；

③一屏滑動即可查看完整內(nèi)容。

（2）劣勢

當(dāng)前面整體分析、詞匯分析、句子分析內(nèi)容較長的時候，需向下滑動多次才能看到修改建議的內(nèi)容。

優(yōu)化進階四

思路：上下滑動+tab結(jié)合切換的形式。

優(yōu)勢：tab切換快速定位到對應(yīng)字段的內(nèi)容，解決需向下滑動多次才能看到修改建議的內(nèi)容。

劣勢：漏出信息多且雜。

優(yōu)化進階五

思路：對信息進行了分類整合，對不重要的內(nèi)容收起。

（1）優(yōu)勢

①針對作文文本的評分用雷達圖直觀呈現(xiàn)（由于評語內(nèi)容價值不高，所以收起?！?gt;用戶點擊后可查看評語內(nèi)容）；

②修改建議露出。

（2）劣勢

當(dāng)評語內(nèi)容信息量比較大的時候，修改建議內(nèi)容也沒有辦法在首屏露出。

三、困惑點及主流tab切換梳理

困惑點：在優(yōu)化思路2-3-4中，市面上會存在這3種tab切換的形式（市面產(chǎn)品以主流的支付寶和微信為例）。到底哪種場景下應(yīng)該采用哪種tab切換，用戶體驗更佳？

1. 對應(yīng)優(yōu)化思路二

橫向分布，點擊tab時切換對應(yīng)的內(nèi)容。

優(yōu)勢：信息層級較清晰。

劣勢：tab數(shù)量>3個，信息量較大，記不住頁面的信息內(nèi)容；需要點擊多次才能看到不同模塊各自的內(nèi)容。

對應(yīng)優(yōu)化思路三

tab豎向并列分布，向下滑動查看更多內(nèi)容。

優(yōu)勢：內(nèi)容首屏直觀展示，無需多次操作點擊。

劣勢：模塊信息過多時，容易在滑動的時候迷失。

所以在滑動過程中支付寶提供了【快速回到主屏的功能】具有一定的操作便捷性

對應(yīng)優(yōu)化思路四：

tab內(nèi)容豎向并列分布，但也可以通過橫向快速定位該模塊內(nèi)容。

優(yōu)勢：橫向tab聯(lián)動豎向內(nèi)容，在同一個頁面可以快速定位到想要查看的信息內(nèi)容；

劣勢：適用場景？目前更多在web端看到該交互。

四、總結(jié)

頁面信息的展示，在考慮設(shè)備終端屬性的同時，更要注重提高用戶查看信息的便捷性。

基于用戶使用手機屏幕尺寸越來越大的現(xiàn)實情況，頁面tab操作下移至左、右手操作熱區(qū)范圍較為友好——>pick高德地圖的展示。

基于平板的設(shè)備終端屬性——大屏，采用左右結(jié)構(gòu)會更充分利用屏幕的尺寸。

而在tab切換的展示上，盡量控制為2左右，即可保持信息的輕簡性，和簡易操作性。

最終采用方案：

由于批改得分的客觀性存疑（而且避免家長拿成績?nèi)フ倚?nèi)老師求證），所以不展示批改總分，而是按照得分把成績分了5個等級做激勵。

鑒于HWL返回的整體點評字數(shù)過長，用戶可能無法直觀看到【修改建議】部分內(nèi)容的情況，所以選擇了上下滑動+2個tab切換的形式。

作者：茶茶，一個平凡普通的95后產(chǎn)品新人，不想改變世界，也不想被世界改變，只希望能按照自己喜歡的方式度過此生。公眾號：一只偽女學(xué)霸

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

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