用微信時,你是否遇到這樣的情況。你正刷著朋友圈,享受著各種雞湯,這時候,你收到一條微信,一看是女王大人,不得不回。你誠懇的回了一條,等了二十秒不見有什么回應,于是就退了出來,進入朋友圈找到那篇沒看完的文章,沒看兩行字,那邊就回復你了,于是你又乖乖地回過去,來來回回,很麻煩!那,為什么聊天和朋友圈間不能有一種更快捷的切換方式呢? 前言實際上不只是“朋友圈”和“聊天”頁面間的切換,看訂閱號的文章、逛商城、使用微信里面的O2O服務時都存在這樣的問題。簡潔是微信的設計原則,微信的整個架構十分清晰,四個Tab欄選項,加上“搜索”和“+”構成微信的第一層級。 微信信息架構
微信的架構是一種典型的樹狀結構,簡潔有條理的分布,除了“搜索”和“+”被至于特殊位置外,其功能按相似性歸類。這種架構是最常見的形式,成為主流當然也是因為確實有很多優(yōu)點。 樹狀結構的信息架構
事物都有兩面性,對于微信的架構也不列外,特殊功能可以很方便的進入,而普通的功能只能按照架構的流程來,所以,會有很多“點進”和“返回”操作,比如下圖這種情況。 平行功能的切換路徑
當然,對于上圖這種不常用的功能,沒必要建立快捷導航或入口。而常用功能間就有必要了,特別是微信聊天這種有即時和間歇特點的功能。微信所有的常用功能可以分為兩種:聊天和其它。聊天是微信最重要的單一實用功能。除聊天外的大多數(shù)功能,在一個時間段里只能做一件事,但聊天不同,可以和其它功能穿插著進行,你不能邊刷朋友圈邊逛商城,但你可以邊刷朋友圈邊聊天,也可以邊逛商城邊聊天。所以接下來問題變成了微信聊天與跳轉前的其它功能頁面間特殊導航方式的探索。 微信聊天與其它常用頁面快速切換
定義問題設計一種微信聊天與跳轉前其它功能頁面的特殊導航方式;具體來講,實現(xiàn)聊天頁面與跳轉之前的頁面間快速、便捷的切換。 分析問題| 聊天頁和其它頁間的相互切換的關系可以建立包含A、B、X三個因素的簡單模型模型。 AB功能切換模型
其中A代表微信聊天頁,B代表微信其它功能頁,X代表實現(xiàn)A和B快速、便捷切換的操作或交互方式。
| 接下來先研究一下現(xiàn)有的切換模式 B到A的切換模式分析 現(xiàn)有方式做的很棒了,只需要2步。微信會作為手機系統(tǒng)媒體信息出現(xiàn)在手機通知欄,你只需要下拉通知欄,然后點進去就可以。特殊情況就是多條信息的回復,這個也很簡單,點擊一個回復后,點返回再點另一個未回復的聊天就可以了,也只要2個步驟。 向聊天的切換步驟
A到B的切換模式分析 這個過程相對復雜,因B的不同,就會有不同的路徑,總的來講都是先退出聊天頁,再根據(jù)架構的流程逐步點擊到剛才的那個頁面。但微信就是微信,即使需要這樣逐步點,微信還是能夠把它控制在3-5步左右,除了微信的架構比較淺外,微信還做了一些針對性的設計。(說明微信對這個問題早有考慮) 第一個是,對于朋友圈,還有訂閱號里面的文章,用戶第二次進入會直接跳轉到上一次的瀏覽的位置。(這一做法讓朋友圈刷新變得麻煩一點,不過這種設計還是比較正確的,畢竟作為私人空間的朋友圈更新內(nèi)容沒那么多,頻率也沒有那么快。) 跳轉到上次閱讀位置
另一種,把訂閱號的文章、外界入口、網(wǎng)頁鏈接等頁面的左上角設計為“關閉”而不是“返回”,這讓微信的淺架構得以保留,頁面間的切換步驟就不會太多。(這里也有一個不足之處就是:這種外界入口的網(wǎng)頁不能像朋友圈那樣再次點進就回到之前的位置。) 外界網(wǎng)頁左上角為關閉
微信做的很好,卻還有進步的空間。從朋友圈到聊天頁只要2步,從微信聊天頁到朋友圈要3-4步,到訂閱號的文章則要3-6步,而從微信聊天頁切換到其它正在用的app頁只要2-3步。2步和4步在體驗上還是有一些區(qū)別的。所以,接下來我們要重點研究一下怎么從微信聊天頁快速切換到跳轉之前的微信頁面。 | 我們不妨先來分析一下聊天頁面的功能分布和操作特點。以安卓的微信群聊為例(不要為為什么),其它類似,一共可以分為三類,共14種操作,與手指間的交互動作共有5種。 微信聊天頁操作分解
解決方案|定義好問題、了解好現(xiàn)狀后,我做了改善的嘗試,下面將有可行度的一些方案與大家交流一下。 提案一:搖一搖 推薦指數(shù):☆☆ 提案一:搖一搖
好吧!這個沒有什么好講的,瑤一搖幾乎就是微信的代名詞了。這種方式不好之處就在于執(zhí)行成本太高,搖一搖在多人互動中很好用,對于切換一個頁面,顯得似乎有點太小題大作。 提案二:從右到左滑動 推薦指數(shù):☆☆☆ 提案二:向左滑
左右滑的功能一時能想到的就是tab和導航的切換,網(wǎng)頁前進后退,打開側邊欄,圖片切換,音樂電影快進后退,一些常用的設置等。感覺滑動的操作手感比點擊來的舒服,不知道為什么微信幾乎不用到,也就IOS可以用來退后。這種方式學習成本比較高,但是一旦用戶知道這個操作后,用起來還是比較簡便快捷的。 提案三:具有“返回網(wǎng)頁”功能的懸浮按鈕 推薦指數(shù):☆☆ 提案三:懸浮返回按鈕
簡單粗暴的放置一個“返回網(wǎng)頁”的按鈕,在識別到用戶是跳轉到聊天頁時才出現(xiàn)。用戶跳轉后,之前刷新的網(wǎng)頁需要緩存,在聊天頁中點擊“返回網(wǎng)頁”即可跳轉,在快速跳轉的同時,還能節(jié)約流量。在有鍵盤時緊挨著鍵盤(方便操作),沒鍵盤時在右側中間(防誤觸)。優(yōu)點是學習成本低,操作簡單;缺點是似乎和微信簡潔的路線不搭,破壞了微信頁面的協(xié)調性。 提案四:更多功能表里加“返回網(wǎng)頁”功能 推薦指數(shù):☆☆☆☆ 提案四:聊天面板中加返回功能
這是提案三的優(yōu)化,將“返回頁面”放在“+”里邊,作為一個下屬功能?!鞍l(fā)圖片”和“返回網(wǎng)頁”的功能優(yōu)先級誰更高高未嘗可知,雖然會有兩步操作,但覺得它放到這里面更加合適。 提案五:彈窗式聊天頁 推薦指數(shù):☆☆ 提案五:彈窗式聊天頁
從另外一個角度去思考問題,我們從朋友圈跳轉到聊天頁的目的是為了回復信息,如果可以直接在這個頁面恢復那就沒有跳轉的必要了。 當你正在使用微信時(聊天狀態(tài)和第一層級的頁面除外),信息從底部彈出并輪播,持續(xù)三秒后消失(不在使用微信時,信息出現(xiàn)在手機系統(tǒng)通知欄里面);點擊“信息條”進入“彈窗聊天模式”;長按“信息條”進入常規(guī)的“聊天頁”;點擊“不再顯示”后“信息條”消失且這個好友或群聊的信息不再出現(xiàn)(避免騷擾)?!霸趶棿啊绷奶祉摃r,點擊“關閉”回到當前頁;按住往上滑動進入常規(guī)“聊天頁”。常規(guī)“聊天頁”和“當前網(wǎng)頁”間的切換采用提案四的方式。 這種方式的優(yōu)點是瀏覽網(wǎng)頁時,聊天變成一種插曲,不需要跳轉頁面;缺點是很大程度的改變了操作方式,風險比較大,同一時刻收到多條信息時還是要進入常規(guī)“聊天頁”。 提案六:多窗口運行 推薦指數(shù):☆ 提案六:多窗口
這個方案比較偏概念,在前面分析中知道,微信聊天頁到其它正在運行的APP之間切換只要兩步,那為什么不可以借鑒一下這種方式呢。將手機系統(tǒng)的當前運行APP設計為多個窗口,不僅可以包含當前運行窗口,還有其它窗口,如最近網(wǎng)頁,常用網(wǎng)頁,手機系統(tǒng)給第三方開發(fā)公司自行設定窗口功能的權利就可以了。好吧,這種方式只能想想而已,可實現(xiàn)性太低。 小結在微信中,跳轉后的聊天頁和跳轉前網(wǎng)頁間的快速切換具有一定設計價值和意義,我的推薦方案是:在聊天面板的“+”中加入一個“返回網(wǎng)頁”的快捷功能。這個方案在對微信改變最小的前提下,實現(xiàn)了一個常用步驟的快速切換,相信能給用戶帶來體驗上的提升。 |
|
來自: jnstyle > 《產(chǎn)品設計》