設計大師淺談如何理解用戶(hù)的眼發(fā)布者：本站     時(shí)間：2021-12-24 11:12:55

生活中很多人會(huì )調侃道：“每天手指在手機屏幕上滑動(dòng)的距離比走路的距離還長(cháng)!”隨著(zhù)指尖上的瀏覽融入到生活的方方面面，如何讓用戶(hù)手指滑動(dòng)的更有效率，在滑動(dòng)手指的同時(shí)看到更多想看的內容，而不白白滑動(dòng)手指，是提升手機APP用戶(hù)體驗的重要方面。

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

如果你有時(shí)間，并且想了解更多交互設計相關(guān)的知識

手機與PC瀏覽，區別在哪里?

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

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

設計大師淺談如何理解用戶(hù)的眼,PS教程,

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

設計大師淺談如何理解用戶(hù)的眼,PS教程,

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

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

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

設計大師淺談如何理解用戶(hù)的眼,PS教程,

說(shuō)明：

1、每張圖均由參加相應終端測試的6名用戶(hù)的注視熱點(diǎn)圖疊加而成，獨立版是指QQ空間的客戶(hù)端，結合版是指從QQ上的入口進(jìn)入看到的QQ空間;

2、在熱點(diǎn)圖中，顏色越深，代表關(guān)注度越高。對于疊加而成的熱點(diǎn)圖，屏幕背景只是為了示意屏幕的大小，熱點(diǎn)覆蓋的區域代表注視的范圍，不代表實(shí)際看到的內容;

3、標注的紅框是為了凸顯注視范圍的邊界。

有限的注視范圍與圖文并茂的APP設計

在瀏覽一條感興趣的動(dòng)態(tài)的過(guò)程中，當用戶(hù)想看的內容沒(méi)出現/沒(méi)完全出現在注視范圍內時(shí)，會(huì )通過(guò)用手指滑動(dòng)屏幕來(lái)調整這些內容的位置，定位好之后才開(kāi)始瀏覽。因此，把用戶(hù)想看的內容顯示在其注視范圍內，可以減少低效滑動(dòng)的發(fā)生。

圖文并茂是社交APP內容的主要呈現形式，其中，圖片占據了屏幕的較大面積，且扮演著(zhù)重要的角色，無(wú)論是好友類(lèi)動(dòng)態(tài)中的生活見(jiàn)聞?wù)掌?，還是讓資訊類(lèi)動(dòng)態(tài)更加生動(dòng)直觀(guān)的圖片，都是用戶(hù)用來(lái)判斷對動(dòng)態(tài)是否感興趣的關(guān)鍵要素，也是瀏覽感興趣的動(dòng)態(tài)時(shí)重點(diǎn)瀏覽的內容。由于用戶(hù)的注視范圍有限，在對動(dòng)態(tài)中文字和圖片的高度進(jìn)行設計時(shí)，應注意哪些問(wèn)題呢?

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

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

設計大師淺談如何理解用戶(hù)的眼,PS教程,

第二，文字較長(cháng)時(shí)展開(kāi)部分文字，將文字和圖片的總高度控制在注視范圍內。

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