在進行介面設計時，常常會遇到圖文清單的頁面，這個頁面元件的特徵就是每一段文字標題，都會跟一張圖片，這是一種很常見的設計樣式（design pattern），而設計師最常見的問題就是：「到底是文字標題放前面還是圖片？」，這個問題蠻值得思考的，但答案絕對不是「我覺得這樣比較好看」就可以說明的。
介面設計的每個元素，都有其設計意義與目的，圖片的預設用途是什麼？那文字的預設用途又是什麼？如果一起使用又代表什麼、能達成什麼目的？這些都是設計問題，很少元素代表的只是一種裝飾，通常我們不會這樣使用它，就如同我之前文章中所提到的：「介面設計是一種引導。」，它是用來告訴用戶該注意什麼、該那裡走或是我能有那些行動的引導，就好比你到了機場，透過機場的導視系統引導你完成登機的一切流程。
回到圖文清單的問題，我們要思考的是，圖片的預設用途是什麼？文字的預設用途又是什麼？這個答案很直觀，圖片與文字的相同預設用途在於「說明」，而差異在於，圖片較容易吸引用戶的注意，但承載的訊息有限，而文字較能詳細的說明，但無法吸引用戶的注意，因此如果我們一起使用，就是為了互補兩者的用途；而就單一圖片跟文字的組合，是蠻常見的一種設計元件，而清單（List ），則是呈現大量重複類別資訊的一種設計樣式，由於清單重複的特性，用戶可以快速的掃視資料，在這樣的設計樣式下，設計目標就是要在有限的空間裡，讓獲取足夠的資訊來進行下一個行動。
此外，還要考慮到用戶的閱讀行為，通常有分兩種：1．隨意的瀏覽、2．目標明確的查找。如果是隨意的瀏覽，代表用戶來到這個畫面，想隨便看看，沒什麼特別的目的，所以圖片或是有趣的標題可能相對容易吸引用戶的注意，但如果是明確的查找，用戶在查找前，對於圖片或文字會有一定程度既有印象，此時如果能夠快速的提供特徵的資訊給用戶，那或許就能降低用戶的查找時間。
接著，我們可以來比較一下，在圖文列表的設計樣式下，資訊該如何配置？是圖先還是文先，可以從幾個大家比較熟悉的app來了解，這兩種設計樣式下的差異。
先圖再文的清單
思考一下圖先的理由，圖先代表圖片比文字來的重要，且容易辨識，文字只是輔助，也代表圖本身必需要有明確且充足的資訊及特徵，如果圖片夠清楚直白，用戶就能快速完成他瀏覽頁面的任務。另外如果圖片的尺寸夠大，為了讓用戶更快速理解內容，也會將文字壓在圖片上面來降低用戶的掃視的時間。
先文再圖的清單
大家可以回想一下，一般在閱讀平面報紙或雜誌時，我們是習慣先看文字標題還是先看圖片？標題似乎比較容易與內文有關聯性，圖片提供的資訊量反而有限，有時候圖片甚至跟內容沒什麼關係，因此在資訊的配置上，標題在左圖片在右閱讀體驗上會比較好，如果一直將無用的圖片訊息放視覺的起點，閱讀體驗反而會比較差一點，所以先標題再圖片設計通常會出現在媒體或是以內容為主的app上，文字標題為主，而圖片為輔。
另外還可以再思考的是，雖然媒體型的app比較容易採先文再圖的設計，但也並非每種文章類型的閱讀習慣都會一樣，像如果是「美妝、時尚」相關的主題，圖片或許就比文字來的更有吸引力，所以針對不同主題，設計不同閱讀動線，或許會是不錯的設計方案。
垂直的圖文排列
除了水平式的圖文清單，還有單欄或雙欄式的垂直式圖文清單，另外也可以運用水平捲軸的方式來放入更多的橫向清單項目；資訊的排列上，常見的都是圖上文下的方式組合，如果圖片的品質很好，且對用戶具有吸引性，通常會以單欄滿版的方式排列，老闆期待的「圖愈大愈好」，這時候就派的上用場。但如果是想要有效的運用空間，雙欄垂直清單或是單欄橫向捲軸的方式會是很好的選擇。此外，混合式的排列也是一個好的設計方案，可以解決視覺上的閱讀疲勞，也可以讓內容看起更豐富一些。
真實世界的行為
其實在設計介面時，也可以從真實世界的行為來推敲產品動線，想像一下，當你去書局，假設沒有特定想要買的書，你的瀏覽動線是什麼？什麼原因讓你停下腳步決定要翻閱的書籍？是因為封面很漂亮，還是因為正在特價或是剛好有人正在閱讀？透過真實世界的觀察，也可以慢慢的推敲出產品介面的動線，其實這個推敲的過程就是「概念模型」。那又如果，你今天有明確想要買的書，除了問櫃檯服務人員（search bar）外，你的查找動線（navigation bar）又是如何？那介面上又該怎麼設計查找的動線呢？思考這些問題，或許在介面設計上就會有不錯的靈感。
結論
圖文清單是一個常見的設計樣式，也是新手設計師常常遇到的問題，這篇文章的重點，是在提供一個思考方式，如何運用知識與經驗，推敲出一個合理的產品閱讀體驗，如果只是要解決如何決定圖先或文先的問題，可以參考NN/g文章，會有明確的判斷方式。
但你也會發現，從生活經驗中的觀察，也是會得到相差不遠的結果。當然設計不是一成不變，答案或經驗可能會限制了產品跟行為操作的想像，可以換個方式從生活中的體驗去觀察與想像，切莫只遵從規則，堅持好的設計，好的設計絕不無聊。
