在進行介面設計時,常常會遇到圖文清單的頁面,這個頁面元件的特徵就是每一段文字標題,都會跟一張圖片,這是一種很常見的設計樣式(Design Pattern),而設計師最常見的問題就是:「到底是文字標題放前面還是圖片?」,這個問題蠻值得思考的,但答案絕對不是「我覺得這樣比較好看」就可以說明的。

介面設計的每個元素,都有其設計意義與目的,圖片的預設用途是什麼?那文字的預設用途又是什麼?如果一起使用又代表什麼、能達成什麼目的?這些都是設計問題,很少元素代表的只是一種裝飾,通常我們不會這樣使用它,就如同我之前文章中所提到的:介面設計是一種引導,它是用來告訴用戶該注意什麼、該那裡走或是我能有那些行動的引導,就好比你到了機場,透過機場的導視系統引導你完成登機的一切流程。

回到圖文清單的問題,我們要思考的是,圖片的預設用途是什麼?文字的預設用途又是什麼?這個答案很直觀,圖片與文字的相同預設用途在於「說明」,而差異在於,圖片較容易吸引用戶的注意,但承載的訊息有限,而文字較能詳細的說明,但無法吸引用戶的注意,因此如果我們一起使用,就是為了互補兩者的用途;而就單一圖片跟文字的組合,是蠻常見的一種設計元件,而清單(List),則是呈現大量重複類別資訊的一種設計樣式,由於清單重複的特性,用戶可以快速的掃視資料,在這樣的設計樣式下,設計目標就是要在有限的空間裡,讓獲取足夠的資訊來進行下一個行動。

此外,還要考慮到用戶的閱讀行為,通常有分兩種:1.隨意的瀏覽、2.目標明確的查找如果是隨意的瀏覽,代表用戶來到這個畫面,想隨便看看,沒什麼特別的目的,所以圖片或是有趣的標題可能相對容易吸引用戶的注意,但如果是明確的查找,用戶在查找前,對於圖片或文字會有一定程度既有印象,此時如果能夠快速的提供特徵的資訊給用戶,那或許就能降低用戶的查找時間。

接著,我們可以來比較一下,在圖文列表的設計樣式下,資訊該如何配置?是圖先還是文先,可以從幾個大家比較熟悉的 app 來了解,這兩種設計樣式下的差異。

先圖再文的清單

思考一下圖先的理由,圖先代表圖片比文字來的重要,且容易辨識,文字只是輔助,也代表圖本身必需要有明確且充足的資訊及特徵,如果圖片夠清楚直白,用戶就能快速完成他瀏覽頁面的任務。另外如果圖片的尺寸夠大,為了讓用戶更快速理解內容,也會將文字壓在圖片上面來降低用戶的掃視的時間。

Image for post
左圖是 Amazon的推薦清單,圖片是書的封面,提供足夠的資訊讓用戶能快辨視內容;右圖是youtube的播放清單,除了快取圖片外,創作者也會將影片加入文字作為封面,用戶在看播放清單時也可以快速的辨識內容。

先文再圖的清單

大家可以回想一下,一般在閱讀平面報紙或雜誌時,我們是習慣先看文字標題還是先看圖片?標題似乎比較容易與內文有關聯性,圖片提供的資訊量反而有限,有時候圖片甚至跟內容沒什麼關係,因此在資訊的配置上,標題在左圖片在右閱讀體驗上會比較好,如果一直將無用的圖片訊息放視覺的起點,閱讀體驗反而會比較差一點,所以先標題再圖片設計通常會出現在媒體或是以內容為主的app上,文字標題為主,而圖片為輔。

Image for post
左圖是 Medium 的 app,右圖是 NY Times 的 app,兩款產品都是媒體型的 app,資訊的呈現方式,都是以標題為主圖片為輔的方式設計。

另外還可以再思考的是,雖然媒體型的 app 比較容易採先文再圖的設計,但也並非每種文章類型的閱讀習慣都會一樣,像如果是「美妝、時尚」相關的主題,圖片或許就比文字來的更有吸引力,所以針對不同主題,設計不同閱讀動線,或許會是不錯的設計方案。

垂直的圖文排列

除了水平式的圖文清單,還有單欄或雙欄式的垂直式圖文清單,另外也可以運用水平捲軸的方式來放入更多的橫向清單項目;資訊的排列上,常見的都是圖上文下的方式組合,如果圖片的品質很好,且對用戶具有吸引性,通常會以單欄滿版的方式排列,老闆期待的「圖愈大愈好」,這時候就派的上用場。但如果是想要有效的運用空間,雙欄垂直清單或是單欄橫向捲軸的方式會是很好的選擇。此外,混合式的排列也是一個好的設計方案,可以解決視覺上的閱讀疲勞,也可以讓內容看起更豐富一些。

Image for post
左圖是 HBX,雙欄圖文垂直清單常用在電商類的 app,中間圖是 Airbnb,圖片以單欄橫向捲軸或是雙欄方式設計,右邊的圖則是雅虎新聞,採取的是少見的單欄文先圖後的設計方式。

真實世界的行為

其實在設計介面時,也可以從真實世界的行為來推敲產品動線,想像一下,當你去書局,假設沒有特定想要買的書,你的瀏覽動線是什麼?什麼原因讓你停下腳步決定要翻閱的書籍?是因為封面很漂亮,還是因為正在特價或是剛好有人正在閱讀?透過真實世界的觀察,也可以慢慢的推敲出產品介面的動線,其實這個推敲的過程就是「概念模型」。那又如果,你今天有明確想要買的書,除了問櫃檯服務人員(search bar)外,你的查找動線(navigation bar)又是如何?那介面上又該怎麼設計查找的動線呢?思考這些問題,或許在介面設計上就會有不錯的靈感。

結論

圖文清單是一個常見的設計樣式,也是新手設計師常常遇到的問題,這篇文章的重點,是在提供一個思考方式,如何運用知識與經驗,推敲出一個合理的產品閱讀體驗,如果只是要解決如何決定圖先或文先的問題,可以參考 NN/g 文章,會有明確的判斷方式。

https://www.nngroup.com/articles/mobile-list-thumbnail/?fbclid=IwAR3x5L9JQrBaPmw3Vr1Bzye3g46d4HsgpWskAs50NH0Xskjg5eUh27cS1xg

但你也會發現,從生活經驗中的觀察,也是會得到相差不遠的結果。當然設計不是一成不變,答案或經驗可能會限制了產品跟行為操作的想像,可以換個方式從生活中的體驗去觀察與想像,切莫只遵從規則,堅持好的設計,好的設計絕不無聊。

Posted by:Rei

介面設計師

留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s