小鼐：生活中很多人會調(diào)侃道：“每天手指在手機屏幕上滑動的距離比走路的距離還長！”隨著指尖上的瀏覽融入到生活的方方面面，如何讓用戶手指滑動的更有效率，在滑動手指的同時看到更多想看的內(nèi)容，而不白白滑動手指，是提升手機APP用戶體驗的重要方面。

為深入理解人們的APP瀏覽行為，我們使用專門用于追蹤移動設(shè)備注視行為的眼動儀對用戶瀏覽社交APP的習(xí)慣進行了研究，試圖更加直觀地展示人們?yōu)g覽APP的特點，以及由此引發(fā)的對于優(yōu)化APP瀏覽體驗設(shè)計的思考。

如果你有時間，并且想了解更多交互設(shè)計相關(guān)的知識，推薦閱讀以下幾篇優(yōu)秀的文章：
《高手之路：解讀眼動的12個誤區(qū)》
《推薦！交互設(shè)計那些事兒（一）》
《推薦！交互設(shè)計那些事兒（二）》

手機與PC瀏覽，區(qū)別在哪里？

我們曾先后針對QQ空間PC版和QQ空間手機版進行了眼動測試，讓用戶登錄自己的QQ空間自由瀏覽好友動態(tài)，對比兩次測試的結(jié)果（如下圖），可以發(fā)現(xiàn)，相比于使用電腦瀏覽好友動態(tài)，用戶在手機上瀏覽好友動態(tài)時手指滑動更頻繁，經(jīng)常是在滑動手指的同時瀏覽內(nèi)容。

在進行基于電腦網(wǎng)頁的眼動數(shù)據(jù)分析時，我們主要關(guān)注用戶的注視焦點和軌跡，但對于手機來說，只分析用戶看了什么和不看什么是不夠的，有必要兼顧眼睛注視和手指滑動，來分析用戶的瀏覽特征，并評估用戶的瀏覽效率。

在對QQ空間手機版進行眼動測試的過程中，我們發(fā)現(xiàn)，有時用戶明明對某一條動態(tài)感興趣，卻只是滑動屏幕而不看上面的內(nèi)容，直到把內(nèi)容調(diào)整到一定范圍內(nèi)的時候才開始看，這種情境顯然降低了用戶的瀏覽效率，增加了手指的滑動距離，卻沒有因此看到更多的內(nèi)容（如下圖）。在該研究中，我們將這種情景稱為“低效滑動”。

低效滑動的情景讓我們不禁思考：既然用戶不是自上而下將整個屏幕的內(nèi)容瀏覽完之后才向上滑動屏幕，那么，用戶的注視范圍究竟有多大？如何基于注視范圍來優(yōu)化設(shè)計以減少用戶的低效滑動？用戶的注視范圍能否改變？

指尖上的注視范圍有多大？

以QQ空間手機版為例，我們使用Tobii X120眼動儀對24名用戶進行了眼動測試，讓用戶使用手機登錄自己的QQ空間自由瀏覽好友動態(tài)，結(jié)果表明，注視范圍的長度占手機屏幕長度（不含頂bar和底bar）的比例約為75.0%（如下圖）。

說明：
1、每張圖均由參加相應(yīng)終端測試的6名用戶的注視熱點圖疊加而成，獨立版是指QQ空間的客戶端，結(jié)合版是指從QQ上的入口進入看到的QQ空間；
2、在熱點圖中，顏色越深，代表關(guān)注度越高。對于疊加而成的熱點圖，屏幕背景只是為了示意屏幕的大小，熱點覆蓋的區(qū)域代表注視的范圍，不代表實際看到的內(nèi)容；
3、標(biāo)注的紅框是為了凸顯注視范圍的邊界。

有限的注視范圍與圖文并茂的APP設(shè)計

在瀏覽一條感興趣的動態(tài)的過程中，當(dāng)用戶想看的內(nèi)容沒出現(xiàn)/沒完全出現(xiàn)在注視范圍內(nèi)時，會通過用手指滑動屏幕來調(diào)整這些內(nèi)容的位置，定位好之后才開始瀏覽。因此，把用戶想看的內(nèi)容顯示在其注視范圍內(nèi)，可以減少低效滑動的發(fā)生。
圖文并茂是社交APP內(nèi)容的主要呈現(xiàn)形式，其中，圖片占據(jù)了屏幕的較大面積，且扮演著重要的角色，無論是好友類動態(tài)中的生活見聞?wù)掌?，還是讓資訊類動態(tài)更加生動直觀的圖片，都是用戶用來判斷對動態(tài)是否感興趣的關(guān)鍵要素，也是瀏覽感興趣的動態(tài)時重點瀏覽的內(nèi)容。由于用戶的注視范圍有限，在對動態(tài)中文字和圖片的高度進行設(shè)計時，應(yīng)注意哪些問題呢？

第一，圖片為豎圖時高度控制在注視范圍內(nèi)。

在單條動態(tài)中，橫圖的高度通常不會超過注視范圍，用戶不需產(chǎn)生低效滑動就可以完整瀏覽文字和圖片。但對于豎圖，則高度不宜過長，應(yīng)控制在注視范圍內(nèi)。當(dāng)圖片沒有完全展示在注視范圍內(nèi)時，用戶看完文字就會上滑屏幕，其間不會注視圖片內(nèi)容，將圖片定位好后，通常是把圖片的頂部與屏幕最上方對齊，才開始瀏覽圖片，這不僅給用戶瀏覽圖片帶來了麻煩，而且當(dāng)用戶想再次看文字的時候，還要再次下滑屏幕才能看到文字。

第二，文字較長時展開部分文字，將文字和圖片的總高度控制在注視范圍內(nèi)。

對于文字較長的圖文并茂動態(tài)，用戶在手機上通常通過標(biāo)題、圖片來快速判斷自己對動態(tài)是否感興趣，而對大段文字摘要的關(guān)注度較低。有時用戶沒有被標(biāo)題吸引，滑動屏幕直接略過文字摘要，當(dāng)該條動態(tài)中的圖片出現(xiàn)在屏幕上后被圖片吸引，然后點擊詳情頁閱讀全文。因此，將較長的文字部分收起，把文字和圖片的高度控制在注視范圍內(nèi)，可減少用戶略過文字時產(chǎn)生的低效滑動。

思考：用戶的注視范圍是否可以改變？

通過上文分析用戶瀏覽社交APP內(nèi)容時的特點可知，用戶的注視范圍與圖文并茂類動態(tài)的設(shè)計有著密不可分的關(guān)系。那么，對于不同的社交APP，用戶的注視范圍是固定的嗎？

在對QQ空間手機版進行眼動測試的同時，我們也針對Facebook手機版用戶進行了眼動測試，讓6名用戶自由瀏覽Facebook，得到用戶使用Facebook時的注視范圍（如下圖）。

Facebook的注視范圍的長度占手機屏幕長度（不含頂bar和底bar）的比例為87%，長于QQ空間手機版注視范圍的長度。為了更好地分析注視范圍的形成，我們也對用戶瀏覽單條動態(tài)時的注視情況進行了研究。

Facebook的動態(tài)是卡片式設(shè)計，兩條動態(tài)之間的間隔較為明顯，用戶在瀏覽一條動態(tài)時，通常將其滑到屏幕頂端后開始瀏覽，加之文字和圖片的總高度在一屏之內(nèi)，用戶可以在一屏內(nèi)看到圖片的底邊，這使得用戶在瀏覽一條自己感興趣的動態(tài)的過程中，可以直接在一屏內(nèi)完整地瀏覽文字和圖片，很少發(fā)生看完文字便開始滑動屏幕來調(diào)整圖片位置的情況，因而使得注視范圍的長度增加。

由此，我們推斷，在使用社交APP時，用戶的注視范圍并不是固定的，通過設(shè)計上的改變可以擴大用戶的注視范圍，這不僅可以更好地利用了屏幕的大小，也可以減少用戶的低效滑動，提高瀏覽效率。當(dāng)然，這只是對比QQ空間手機版和Facebook手機版得到的推論，注視范圍受哪些設(shè)計元素的影響、設(shè)計上的改變對注視范圍的具體影響機制如何都是值得進一步深入研究的問題。

小結(jié)：

本文主要揭示了用戶瀏覽社交APP的特點，并試圖從瀏覽體驗的視角為APP的設(shè)計帶來一些啟發(fā)。

針對用戶的注視范圍和低效滑動問題，如何通過設(shè)計上的改變來擴大注視范圍、減少低效滑動，是設(shè)計社交APP中動態(tài)的呈現(xiàn)方式時值得思考的問題。

與此同時，對于其他類型的APP（如資訊類等），用戶的注視范圍具有什么特點？與社交APP注視范圍的異同在哪里？是否可以通過對比不同類型APP的注視范圍總結(jié)出一些完善APP瀏覽體驗設(shè)計的準(zhǔn)則？對于這些問題，我們將會持續(xù)地開展相關(guān)研究去尋找答案。

原文地址：isux.tencent
作者：小鼐
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：