起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識交互設計篇（1）-應用tab切換規則
編輯導語：在進行交互設計時，常常需要考慮用戶查看信息的便捷性。本文作者復盤了自己在做平板頁面交互時所設計的幾套方案，以及設計過程中遇到的問題和困惑點，希望對你有所幫助。
由于目前項目組沒有交互設計師，所以在這一年參與大大小小的需求設計中，自己也承擔著交互設計師的工作。
深知自己這種半路出家的人做交互，不管是專業知識還是能力上都有一定局限性，為了避免后續在同一個問題上踩了多次的坑，決定對自己做過的每一個項目都進行深度復盤。
前言
最近在做語文作文批改需求設計過程中【關于tab的切換】存在一些困擾的地方。
針對輸出方案在評審中大家也有不同的看法，因此想在這里進行系統地梳理一遍。
為更全面了解各種操作的優劣勢，本文主要會從以下4個方向展開：
- 現狀描述
- 優化思路設想
- 困惑點及主流tab切換梳理
- 方案總結
一、現狀描述
1. 原平板線上版本英文作文批改結果頁呈現
頁面信息有6個：
①作文得分
②整體分析
③詞匯分析
④句子分析
⑤作文詳情
⑥修改建議
2. 優劣勢分析
（1）優勢
修改建議呈現很直觀，有問題可以直接比對原作文內容進行查看。
（2）劣勢
①上下兼左右布局，頁面空間利用率較低（需頁面整體上拉才能漏出更多信息）。
②該頁面主要承載的頁面信息有：作文文本、文本分析（整體分析、詞匯分析、句子分析）、及修改建議。本質上可以總結為2類信息，一類是作文文本，另一類是針對作文的分析及改進，目前的結構呈現感覺較散。
二、優化思路設想
優化進階一
思路：采用線上版本結構整合信息內容。
（1）優勢
對修改建議進行合并到上半部分的作文分析模塊，整體呈現上下結構：
- 上部分是作文的分析與建議
- 下半部分為文本內容本身，結構區分較清晰
（2）劣勢
平板頁面利用率較低的問題仍未得到解決
優化進階二
思路：充分利用大屏終端的屬性，調整為左右結構。
（1）優勢
①調整為左右結構，左邊為文本詳情，右邊為文本的批改評價及建議；
②解決了頁面利用率較低的問題。
（2）劣勢
由于目前的技術限制，作文批改整體分析、詞匯分析、句子分析評語內容都相對較為空洞，沒有太多對用戶有價值的實質性建議。修改建議是這4個字段中稍微比較有價值的內容，相比線上版本，需操作點擊多次才能看到修改建議，殘忍至極。
優化進階三
思路：左右結構+并列布局，減少tab切換的形式。
（1）優勢
①變成左右結構，左邊為文本詳情，右邊為文本的批改評價及建議；
②解決了頁面利用率較低的問題；
③一屏滑動即可查看完整內容。
（2）劣勢
當前面整體分析、詞匯分析、句子分析內容較長的時候，需向下滑動多次才能看到修改建議的內容。
優化進階四
思路：上下滑動+tab結合切換的形式。
優勢：tab切換快速定位到對應字段的內容，解決需向下滑動多次才能看到修改建議的內容。
劣勢：漏出信息多且雜。
優化進階五
思路：對信息進行了分類整合，對不重要的內容收起。
（1）優勢
①針對作文文本的評分用雷達圖直觀呈現（由于評語內容價值不高，所以收起?！?gt;用戶點擊后可查看評語內容）；
②修改建議露出。
（2）劣勢
當評語內容信息量比較大的時候，修改建議內容也沒有辦法在首屏露出。
三、困惑點及主流tab切換梳理
困惑點：在優化思路2-3-4中，市面上會存在這3種tab切換的形式（市面產品以主流的支付寶和微信為例）。到底哪種場景下應該采用哪種tab切換，用戶體驗更佳？
1. 對應優化思路二
橫向分布，點擊tab時切換對應的內容。
優勢：信息層級較清晰。
劣勢：tab數量>3個，信息量較大，記不住頁面的信息內容；需要點擊多次才能看到不同模塊各自的內容。
對應優化思路三
tab豎向并列分布，向下滑動查看更多內容。
優勢：內容首屏直觀展示，無需多次操作點擊。
劣勢：模塊信息過多時，容易在滑動的時候迷失。
所以在滑動過程中支付寶提供了【快速回到主屏的功能】具有一定的操作便捷性
對應優化思路四：
tab內容豎向并列分布，但也可以通過橫向快速定位該模塊內容。
優勢：橫向tab聯動豎向內容，在同一個頁面可以快速定位到想要查看的信息內容；
劣勢：適用場景？目前更多在web端看到該交互。
四、總結
頁面信息的展示，在考慮設備終端屬性的同時，更要注重提高用戶查看信息的便捷性。
基于用戶使用手機屏幕尺寸越來越大的現實情況，頁面tab操作下移至左、右手操作熱區范圍較為友好——>pick高德地圖的展示。
基于平板的設備終端屬性——大屏，采用左右結構會更充分利用屏幕的尺寸。
而在tab切換的展示上，盡量控制為2左右，即可保持信息的輕簡性，和簡易操作性。
最終采用方案：
由于批改得分的客觀性存疑（而且避免家長拿成績去找校內老師求證），所以不展示批改總分，而是按照得分把成績分了5個等級做激勵。
鑒于HWL返回的整體點評字數過長，用戶可能無法直觀看到【修改建議】部分內容的情況，所以選擇了上下滑動+2個tab切換的形式。
作者：茶茶，一個平凡普通的95后產品新人，不想改變世界，也不想被世界改變，只希望能按照自己喜歡的方式度過此生。公眾號：一只偽女學霸
本文由 @茶茶 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Pexels，基于CC0協議。
反對法
大佬，帶帶我
有興趣交流的可以關注我公眾號哈：一只偽女學霸