UI設(shè)計中設(shè)計文章列表左右的思考

　　當(dāng)我們仔細(xì)看APP的文章列表時我們會發(fā)現(xiàn)：有些采用的是左文右圖;有些采用的則是左圖右文。這個時候我們有沒有進一步思考過，這兩種方式有什么區(qū)別呢?各自的優(yōu)缺點又是什么呢?
 

　　在對比各大APP時，我們會發(fā)現(xiàn)文章列表的排版方式有些是左文右圖，有些是左圖右文。
 

　　左文右圖你可能知道就是文字比較重要，但是同樣是新聞類的App你也會看到這兩種情況都存在，因此還不單單是文字重要的原因，下面AAA教育郭老師就分別從左文右圖和左圖右文分別來說。
 

　　一、左文右圖
 

　　左文右圖我們看到大多數(shù)新聞類APP都是這樣做的。下面我就以今日頭條和網(wǎng)易新聞為例，來分析左文右圖的優(yōu)缺點：

 

　　1. 優(yōu)勢：
 

　　1. 人的閱讀習(xí)慣：從左至右，從上至下。采用左文右圖的布局，可以提高用戶閱讀的流暢性;

 

　　2. 發(fā)布者有第三方，圖片質(zhì)量不能保證：今日頭條、網(wǎng)易新聞其發(fā)布者有些不是專業(yè)的媒體人，文章質(zhì)量高低不齊，同時有可能出現(xiàn)沒有圖片的情況。因此為了界面統(tǒng)一，圖片放在右側(cè)是不錯的選擇。

 

　　2. 缺點：
 

　　由于人的視線往往先關(guān)注圖片，因此當(dāng)用戶看到感興趣的內(nèi)容時，閱讀的順序先是圖片然后文字，因此在閱讀上也會有一定的阻礙。

 

　　因此，左文右圖的文章結(jié)構(gòu)在使用時需要根據(jù)產(chǎn)品具體屬性來分析，比如今日頭條，其內(nèi)容主要來自一些不專業(yè)的用戶，同時其產(chǎn)品屬性又多以文字為主，因此他在使用時就采用左文右圖的結(jié)構(gòu)。
 

　　二、左圖右文
 

　　左圖右文，往往從產(chǎn)品屬性來說以圖片為主，我們常見的電商類產(chǎn)品多以該結(jié)構(gòu)為主。不過在新聞類APP中，我們也經(jīng)常會看到該結(jié)構(gòu)，下面以搜狐新聞和澎湃新聞為例，來分析左圖右文有缺點：

 

　　1. 優(yōu)勢：
 

　　1. 文章內(nèi)容往往由專業(yè)人士發(fā)布，因此相對于今日頭條和網(wǎng)易新聞，其圖片質(zhì)量有所保證，同時不會出現(xiàn)有些有圖，有些沒用圖的情況;
 

　　2. 可以用圖片內(nèi)容引發(fā)用戶興趣，作為營銷的手段提高轉(zhuǎn)化率，比如，當(dāng)你看到特朗普的照片，你是不是大概就能夠猜到新聞內(nèi)容，從而進一步了解新聞內(nèi)容。

 

　　2. 缺點：
 

　　1. 如果圖片與內(nèi)容沒啥關(guān)系，就會增加礙眼的污染信息，影響用戶的閱讀速度;
 

　　2. 如果圖片主要是以營銷為目的的，久而久之用戶就會下意識自動過濾左側(cè)的圖片，圖片就成了無用的障礙信息。
 

　　因此，左圖右文的文章結(jié)構(gòu)在使用時需要根據(jù)產(chǎn)品具體屬性來分析，比如搜狐，其內(nèi)容主要來自一些專業(yè)的用戶發(fā)布，圖片在左邊可以有效的引導(dǎo)用戶閱讀，同時它不存在沒有圖片的情況，因此采用左圖右文的結(jié)構(gòu)比較好。
 

　　三、總結(jié)
 

　　了解了左文右圖和左圖右文，那么在具體操作時就能夠更好、更快的確定使用哪種結(jié)構(gòu)了，下面再來回顧下：
 

　　左文右圖：適合用戶量較大，其內(nèi)容主要來自一些不專業(yè)的用戶，同時其產(chǎn)品屬性又多以文字為主;
 

　　左圖右文：適合于細(xì)分類APP，其內(nèi)容質(zhì)量高，主要由一些專業(yè)人士編輯的APP。
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。