旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計(jì) > UI設(shè)計(jì)中設(shè)計(jì)文章列表左右的思考

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

時(shí)間:2020-10-09來源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-10-09點(diǎn)擊量:作者:Gella

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

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

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

  一、左文右圖
 

  左文右圖我們看到大多數(shù)新聞?lì)怉PP都是這樣做的。下面我就以今日頭條和網(wǎng)易新聞為例,來分析左文右圖的優(yōu)缺點(diǎn):

 

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

 

  1. 優(yōu)勢:
 

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

 

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

 

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

 

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

 

  2. 缺點(diǎn):
 

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

 

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

 

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

  二、左圖右文
 

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

 

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

 

  1. 優(yōu)勢:
 

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

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

 

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

 

  2. 缺點(diǎn):
 

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

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

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

  三、總結(jié)
 

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

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

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

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



 

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖