預(yù)計(jì)閱讀時(shí)長：13m 34s（4050 字；13 圖）
配圖制作工具：Figma、XMind
一. 現(xiàn)狀出發(fā)，定義問題
在體驗(yàn)有車以后 APP 的過程中，我們發(fā)現(xiàn)，應(yīng)用中存在著大量各種類型的列表頁，例如資訊列表、帖子列表、口碑列表、評論列表等等，而這些列表頁都給我們同一個(gè)感覺：亂，密密麻麻都是字兒。我們將這些界面拿給其他同事體驗(yàn)后得到的反饋是：看上去很亂，不知道看哪里。
通過將這句話轉(zhuǎn)化成設(shè)計(jì)上的語言，我們可以發(fā)現(xiàn)，這些界面存在的最大問題是，信息層級混亂，沒有形成良好的視覺流。
而這樣的界面現(xiàn)狀給用戶造成的影響是，無法定位界面的第一視覺焦點(diǎn)，瀏覽過程比較費(fèi)力，關(guān)鍵信息及內(nèi)容的獲取效率低下，理解起來比較困難。
二. 細(xì)化問題，尋求優(yōu)化方案
我們再進(jìn)一步思考，是現(xiàn)有的哪些設(shè)計(jì)細(xì)節(jié)導(dǎo)致了這樣的問題，從而產(chǎn)生了相應(yīng)的體驗(yàn)問題。同時(shí)，找到相應(yīng)的優(yōu)化方案。
問題：界面中視覺焦點(diǎn)較多，沒有清晰的視覺流向路徑，視線移動(dòng)的過程很隨機(jī)，不利于信息的快速獲取。
優(yōu)化：突出重點(diǎn)信息，弱化輔助信息，提升視覺焦點(diǎn)。（對比原則）-
問題：元素之間的間距不合理，無法體現(xiàn)出親疏關(guān)系。
例如，口碑列表頁面，模塊之間的間距與同一模塊內(nèi)元素之間的間距非常相近。例如，資訊列表頁面，上一篇文章的「熱評」看起來更像是屬于下一篇文章的，在滾動(dòng)瀏覽的過程中極易產(chǎn)生混淆。
優(yōu)化：調(diào)整元素間距，彼此相關(guān)的元素應(yīng)當(dāng)更靠近，從而成為一個(gè)視覺單元。（親密性原則 / 鄰近性原則）
此外，在當(dāng)前版本的設(shè)計(jì)中，資訊列表頁的文章標(biāo)題統(tǒng)一占用 3 行的固定空間。但是我們通過瀏覽線上 APP 的資訊列表或通過后臺數(shù)據(jù)都可以發(fā)現(xiàn)，絕大部分文章的標(biāo)題字?jǐn)?shù)為 25~30 個(gè)字，按照我們的設(shè)計(jì)，在大部分手機(jī)上顯示為 2 行，超出 2 行的較少。
因此，我們可以將標(biāo)題的顯示規(guī)則調(diào)整為：最多顯示 2 行，超出 2 行時(shí)截?cái)囡@示，提高屏幕利用率，同時(shí)有利于控制同一視覺單元內(nèi)元素的間距。順便一提，這里還運(yùn)用到了「同域原則」。同域原則指的是，如果多個(gè)元素處于同一個(gè)具有明確邊界的區(qū)域內(nèi)，那么用戶就會(huì)傾向于將它們視為一組。并且，這種傾向要強(qiáng)于上面提到的鄰近性原則。資訊列表中，使用分割線將內(nèi)容分組，這就是同域原則的應(yīng)用。
這樣一來，毫無疑問，「熱評」應(yīng)該屬于兩個(gè)分割線中間那一組，為什么還是可能出現(xiàn)混淆呢？
在這里，我是這么理解的?！高吔纭褂蟹指罹€、封閉邊框、背景色、卡片等形式。分割線是視覺上非常弱的邊界，且在這里是不封閉的，而「熱評」使用了背景色，是比分割線更強(qiáng)的邊界。因此，在與上下元素間距相等的情況下，「熱評」很容易被視為單獨(dú)一組，滾動(dòng)瀏覽的過程中就容易產(chǎn)生「不知道哪條熱評屬于哪篇資訊」的困惑，也容易讓界面變得散亂。
問題：界面元素凌亂，缺乏秩序感。我們把界面中的主要元素抽象成一個(gè)個(gè)矩形后，可以看出這些元素左右相互穿插，信息呈現(xiàn)的方式比較雜亂。
優(yōu)化：調(diào)整元素的位置和對齊方式，使界面看起來整齊有序。（對齊原則）-
問題：頁面留白率較低，導(dǎo)致信息密度較大，從而影響用戶的閱讀欲望，甚至降低閱讀效率。例如，口碑列表頁。
優(yōu)化：適當(dāng)增加留白，降低信息密度。（留白）此外，當(dāng)前版本的設(shè)計(jì)中，口碑列表中「優(yōu)點(diǎn)」與「缺點(diǎn)」這兩項(xiàng)內(nèi)容的摘要是顯示 3 行，而實(shí)際上，我覺得 2 行摘要就足以幫助用戶判斷是否要點(diǎn)擊進(jìn)入口碑詳情頁查看更多信息了。因此，這里可以將摘要顯示規(guī)則調(diào)整為：最多顯示 2 行，超出 2 行時(shí)截?cái)囡@示。
除此之外，對于帶有縮略圖的列表頁，除了圖片所占的面積，圖片的內(nèi)容（包括顏色、主體的大小等等）也會(huì)影響元素的視覺層級。例如，一般情況下，圖片中的主體越大越能吸引人眼的注意力，我們會(huì)感覺它 ”更近“。但如果將主體放大到極細(xì)節(jié)，導(dǎo)致人們無法理解其表達(dá)的信息，反而就無法引人注意了。
因此，除了在界面設(shè)計(jì)時(shí)進(jìn)行優(yōu)化，還需要跟內(nèi)容運(yùn)營的同事進(jìn)行溝通，共同制定配圖的選取、設(shè)計(jì)規(guī)則。個(gè)別列表頁中會(huì)穿插其他的內(nèi)容呈現(xiàn)樣式，這里暫不討論，僅針對以上常規(guī)列表形式進(jìn)行細(xì)節(jié)優(yōu)化。
以上主要是從視覺表現(xiàn)手法的角度，去思考界面中存在的細(xì)節(jié)問題及相應(yīng)的優(yōu)化方案。例如，通過元素的大小、色彩、位置、距離等方法對視覺元素進(jìn)行組織，為用戶提供清晰的視覺信息結(jié)構(gòu)。
但在此之前，更重要的是，我們需要對界面中的信息進(jìn)行歸納組織，明確信息層級。否則，有可能導(dǎo)致無法準(zhǔn)確傳達(dá)信息。下面，我們就以資訊列表為例，梳理頁面信息層級，輸出優(yōu)化方案。
三. 以資訊列表為例，輸出優(yōu)化方案
1. 明確頁面信息層級
用戶在資訊列表頁的核心行為是「瀏覽」，發(fā)現(xiàn)感興趣的內(nèi)容，之后才產(chǎn)生下一步行為（進(jìn)入詳情頁查看文章，或跳轉(zhuǎn)至相關(guān)資訊欄目）。我們的體驗(yàn)?zāi)繕?biāo)是幫助用戶快速獲取和理解有用、感興趣的信息。
頁面中的信息比較簡單，我們從「是否必須」和「重要程度」兩個(gè)維度進(jìn)行逐一分析。我們需要思考每個(gè)信息的展示目的是什么，起什么作用，能不能去掉，去掉會(huì)造成什么影響，影響有多大等等，以此進(jìn)行衡量和評判。
標(biāo)題
必須，最重要。用戶得知道這篇資訊在講啥，我感不感興趣，對我來說有沒有價(jià)值。文章來源
必須，次要。它提供了資訊原創(chuàng)欄目的跳轉(zhuǎn)入口，且有助于用戶理解文章標(biāo)題，例如，這篇文章講的是「導(dǎo)購」、「實(shí)測」等等。文章封面
非必須，比較重要。根據(jù)《移動(dòng)端的列表設(shè)計(jì)中，是否添加縮略圖，縮略圖放左邊還是右邊？》中的分析，對于新聞資訊列表，用戶更關(guān)注標(biāo)題，圖片一般質(zhì)量不高，無法清晰傳達(dá)內(nèi)容，是相對次要的輔助信息。因此，封面應(yīng)放在右邊，且尺寸不宜過大，保證用戶在瀏覽信息時(shí)不受圖像的干擾，獲取信息的效率不受影響。
但是，新車、導(dǎo)購、實(shí)測等類型的汽車資訊列表中，封面圖通常為相應(yīng)車型的圖片，既有助于用戶理解標(biāo)題，同時(shí)圖片質(zhì)量也都較高。若封面圖尺寸過小，則很難識別出相應(yīng)車型，失去了縮略圖在列表中的作用。因此，這里的封面圖尺寸不宜過小。
發(fā)布日期
非必須，且次要。由于資訊的時(shí)效性，用戶可能需要根據(jù)發(fā)布時(shí)間（新鮮度）來篩選所要瀏覽的內(nèi)容。因此，在列表頁顯示發(fā)布時(shí)間，可避免出現(xiàn)進(jìn)入詳情頁后發(fā)現(xiàn)內(nèi)容已過期的情況。尤其是在搜索結(jié)果頁，發(fā)布時(shí)間也是用戶的重要判斷因素之一。
但汽車資訊屬于中時(shí)效性內(nèi)容，且資訊列表按時(shí)間順序排序，一般不需要特別留意發(fā)布時(shí)間，所以僅顯示發(fā)布日期即可，也不需要特別引人注目。-
閱讀數(shù)和評論數(shù)
這兩者都是非必須的，評論數(shù)比閱讀數(shù)更重要。
對于內(nèi)容消費(fèi)者，互動(dòng)數(shù)據(jù)量會(huì)影響他們對內(nèi)容的價(jià)值感知，從而導(dǎo)致不同的用戶行為，“大家都在看的就是好的 / 大家都在看的我也要看” 是一種社會(huì)認(rèn)同現(xiàn)象；對于內(nèi)容生產(chǎn)者，展示用戶互動(dòng)量可體現(xiàn)內(nèi)容熱度，是激勵(lì)他們持續(xù)創(chuàng)作的有效反饋形式；對于平臺，展示互動(dòng)量可體現(xiàn)產(chǎn)品的內(nèi)容影響力和用戶活躍度，吸引內(nèi)容消費(fèi)者和內(nèi)容生產(chǎn)者，同時(shí)收獲好口碑，吸引廣告商等等。資訊列表頁常見的互動(dòng)數(shù)據(jù)有，閱讀數(shù)、收藏?cái)?shù)、評論數(shù)等。
1）閱讀數(shù)：不同平臺可能有不同的統(tǒng)計(jì)方法，一般情況下，按用戶點(diǎn)擊進(jìn)入資訊詳情頁的次數(shù)進(jìn)行統(tǒng)計(jì)。這其實(shí)并不能代表用戶真的瀏覽了資訊并與之產(chǎn)生了互動(dòng)，因此，嚴(yán)格地說，閱讀數(shù)體現(xiàn)的是單向的點(diǎn)擊行為，而不是互動(dòng)。
2）收藏?cái)?shù)：用戶對這篇資訊有了大致了解，對其感興趣，但暫時(shí)不方便或不想繼續(xù)瀏覽，所以進(jìn)行收藏；或者，已經(jīng)瀏覽完畢，覺得有用，可能會(huì)再次查看，所以進(jìn)行收藏以便下次查找。
3）評論數(shù)：用戶對這篇資訊的內(nèi)容有了大致的了解，或已瀏覽完畢，對內(nèi)容有自己的理解，或被評論吸引產(chǎn)生共鳴，從而進(jìn)行評論，滿足自己的表達(dá)需求。因此，從內(nèi)容影響力和用戶參與度來看，評論數(shù)代表的意義大于收藏?cái)?shù)和閱讀數(shù)。
1）收藏的場景較特殊化，一般只展示評論數(shù)和閱讀數(shù)。
2）若產(chǎn)品用戶量及用戶活躍度不夠，整體評論量較低，可展示閱讀數(shù)，以體現(xiàn)熱度。
3）從前兩年的 “刷量案” 到視頻網(wǎng)站關(guān)閉前臺播放量顯示到數(shù)據(jù)機(jī)構(gòu)開始構(gòu)建更多元的數(shù)據(jù)評估體系，也可以看出， 播放量、閱讀數(shù)一類的數(shù)據(jù)指標(biāo)不但容易導(dǎo)致虛假刷量，也很難反映真正的內(nèi)容價(jià)值和用戶需求。更注重互動(dòng)效果，不斷優(yōu)化內(nèi)容選擇，才能將更多的優(yōu)質(zhì)內(nèi)容推薦給用戶。 熱評
非必須，但較重要。在首頁顯示熱評有利于提高評論的曝光度與使用頻率。此外，我覺得可以在熱評處增加發(fā)表該評論的用戶昵稱，更明確地傳達(dá)出「此評論來自某個(gè)真實(shí)用戶」的信息，同時(shí)滿足用戶的愛現(xiàn)心理，從而激勵(lì)更多用戶發(fā)表更優(yōu)質(zhì)的評論。但在這里，熱評的信息層級不能高過資訊本身。
2. 優(yōu)化思路總結(jié)
綜合以上所有分析，我們可以得出以下幾點(diǎn)優(yōu)化思路。
- 突出標(biāo)題，稍微降低熱評的視覺吸引力。
- 調(diào)整元素間距，使熱評與同組內(nèi)的其他元素更靠近。
- 隱藏閱讀數(shù)；將相對比較獨(dú)立的評論數(shù)單獨(dú)放在左邊，這樣也可其更顯眼更易被識別；發(fā)布日期和資訊來源較次要，可并排放在右邊。
- 在熱評前方，增加顯示用戶昵稱；熱評最多顯示 2 行，超出時(shí)截?cái)囡@示；另外，點(diǎn)擊熱評區(qū)域，進(jìn)入資訊詳情，并直接定位到該評論的位置。
- 增大文章來源的點(diǎn)擊熱區(qū)，線上版本的入口經(jīng)常點(diǎn)不到；統(tǒng)一「原創(chuàng)」的樣式，相同交互方式的元素若采用不同的視覺樣式，會(huì)令用戶產(chǎn)生困惑。
- 頂部導(dǎo)航欄的交互改為：向上滑動(dòng)頁面時(shí)自動(dòng)隱藏，再次向下滑動(dòng)時(shí)顯示。這樣可增大信息顯示量，高效利用屏幕空間。
導(dǎo)航欄上的信息和功能包括產(chǎn)品 logo、搜索入口和簽到入口。當(dāng)用戶向上滑動(dòng)時(shí)，說明他們正在瀏覽列表內(nèi)容，這些功能信息對他們來說并不重要，暫時(shí)不會(huì)用到；當(dāng)用戶再次向下滑動(dòng)，可能是在找剛剛不小心滑過去的資訊，或者找不到感興趣的內(nèi)容，需要進(jìn)行搜索。
3. 輸出視覺效果圖
在效果圖上，我將熱評的「火」和背景結(jié)合起來，背景框左上角既是「火」的形狀，代表熱評，同時(shí)也指向評論數(shù)，加強(qiáng)其與評論數(shù)的邏輯聯(lián)系。但是，由于顏色是灰色，元素尺寸過小，整體效果不太好，需要調(diào)整優(yōu)化。
以下效果圖并非最終版設(shè)計(jì)，僅供參考。
4. 優(yōu)化前后對比
四. 結(jié)語
此次頁面信息層級的優(yōu)化嘗試還是遵循以往的思路，先了解現(xiàn)狀，發(fā)現(xiàn)問題，然后找到相應(yīng)優(yōu)化方案。在具體的頁面里，則是先明確頁面定位和設(shè)計(jì)目標(biāo)，梳理信息層級，總結(jié)優(yōu)化點(diǎn)，最后輸出視覺效果圖。
以往我們在進(jìn)行界面的設(shè)計(jì)優(yōu)化時(shí)，總是以「體驗(yàn)不好」為由，以「界面改版」為解決方案，然后吭哧吭哧就開始設(shè)計(jì)視覺效果圖。這次嘗試把「體驗(yàn)不好」拆解成各個(gè)體驗(yàn)細(xì)節(jié)，總結(jié)出一些經(jīng)驗(yàn)、方法，希望可以在之后的設(shè)計(jì)中得以應(yīng)用，并不斷優(yōu)化、進(jìn)步。
- 本文主要是以資訊列表頁為例記錄、總結(jié)界面信息層級優(yōu)化的思路，其中的視覺效果圖并非最終完整版設(shè)計(jì)。
- 文中內(nèi)容均為個(gè)人思考。如有錯(cuò)誤，歡迎指正啊，非常感謝～
- 此次優(yōu)化的探索過程中，我在網(wǎng)上查閱及參考了以下文章，非常感謝這些作者～
設(shè)計(jì)反復(fù)修改？可能是你的信息層級沒有梳理好（作者：張林林；來源：知乎）
交互小細(xì)節(jié)——信息層級展示規(guī)則（作者：Esther；來源：人人都是產(chǎn)品經(jīng)理）
UX 系列第十、十一篇 | 同域原則 Law of Common Region、米勒定律 Miller’s Law（作者： 酸梅干超人；來源：超人的電話亭公眾號）
移動(dòng)端的列表設(shè)計(jì)中，是否添加縮略圖，縮略圖放左邊還是右邊？（作者：我自己哈哈；來源：簡書）
