<listing id="vtn9t"><thead id="vtn9t"><ruby id="vtn9t"></ruby></thead></listing>
<progress id="vtn9t"></progress>
<address id="vtn9t"><cite id="vtn9t"><video id="vtn9t"></video></cite></address>
<var id="vtn9t"><dl id="vtn9t"></dl></var>
<var id="vtn9t"><dl id="vtn9t"><address id="vtn9t"></address></dl></var><progress id="vtn9t"><i id="vtn9t"></i></progress>
成都網站制作
當前位置: 首頁 >新聞資訊 > 網站建設 > 移動端設計:圖文布局和按鈕解析
2018-09-10 17:12:45

移動端設計:圖文布局和按鈕解析

給大家解析一些UI設計過程中的視覺布局方法,只有合適的布局沒有對錯的布局。 

   圖文布局   


用戶所關注的內容以及不同的業務訴求決定信息的優先級排布,所以沒有通用的布局,只有適合的布局。 

1. 上圖下文 



上圖下文更強調了圖片的重要性,以“見”這個屬性為優先,上圖下文需要注意的是圖片高度過高會嚴重影響版面效率,而一個具有商業化目的的產品對首頁的版面效率異常看中,同樣對圖片的質量要求也甚高。通常這樣的feed流布局更抓人眼球。 



如果確實需要以大圖+文的上下方式來布局,盡量找到版面的平衡點,考慮圖片與文字之間想要給用戶傳達的關系和優先級圖片的使用盡量使用黃金比例做展示,例如:4:3,2:1,16: 9 等。



宮格排列式的上圖下文能夠極大的提升版面效率,一般更多用于電商平臺,在首頁將某個模塊的優質商品進行透出,提高轉化和流量。缺點是缺乏信息完整度,在布局時需要考慮更多因設備、極限值帶來的不同狀況的考慮。

可以看出:嚴選將金額跟在標題后面,而非固定位置,這樣做的好處是將標題和金額關聯度更高,形成一致性。缺點是布局上顯得層次不齊影響閱讀效率。通常這樣的排版會根據業務需要,來選擇展示一行或多行文字極限,但由于版面效率它不得不只給了兩行的極限高度。


2. 左圖右文 



左圖右文形式的排版應該也算是用的非常多了,其實大家會經常把它和左文右邊圖進行對比,但無論是左圖還是右圖,在這樣的布局中我們首先就要做好圖和文的占比。顯示在外面的圖片通常是選取了詳情中的圖片來進行展示,否則就浪費了比較多的人力資源去重新配圖了得不償失。同樣和圖片搭配的信息字段此時就顯得極為重要。

菜鳥裹裹其實將標題的優先級又提升到了和圖片一樣的層次,圖片本身給人的視覺沖擊會更強所以即便圖片放在標題下面,也不會弱。 



方形縮略圖是最常用的形式,不至于太窄也不至于太寬,對于右側信息的布局也顯得更游刃有余。橫形的圖片會讓右側的文字顯示空間壓縮的厲害,通常在視頻縮略圖會用到,但圖片對整個頁面的氛圍感會更好。

豎形的圖片讓右側信息有更多的發揮空間,同時版面的留白也更大,但是如果右側信息過少,則會讓頁面有些單調和不完整。

左文右圖就不再贅述,現在大多數左文右圖在咨詢和旅游產品中使用的更多,因為用戶在瀏覽這樣的列表信息時圖片無法在第一眼被識別出具體內容,而對于這樣的產品來說無疑是低效的。

當然很多時候,沒有那么多時間去驗證如此設計對于用戶來說是否真的能提高瀏覽效率,提升了多少滿意度。我們可以簡單的理解,如果說的是一件事,那么文字比圖片更重要。如果說的是一樣物品、人,那么左邊放圖更合適,體會一下。 
返回 BACK
?
服務項目
網站建設
互聯網開發
微應用(微信)
微信小程序
APP定制開發
400電話
主機租用
域名注冊
聯系我們

地址:成都市府青路二段 • 首匯觀筑1棟28樓

郵箱:[email protected]

熱線:18980803640 / 18190984800

座機:028-61382296

微信公眾號 二維碼
盛世长城广告公司
<listing id="vtn9t"><thead id="vtn9t"><ruby id="vtn9t"></ruby></thead></listing>
<progress id="vtn9t"></progress>
<address id="vtn9t"><cite id="vtn9t"><video id="vtn9t"></video></cite></address>
<var id="vtn9t"><dl id="vtn9t"></dl></var>
<var id="vtn9t"><dl id="vtn9t"><address id="vtn9t"></address></dl></var><progress id="vtn9t"><i id="vtn9t"></i></progress>
<listing id="vtn9t"><thead id="vtn9t"><ruby id="vtn9t"></ruby></thead></listing>
<progress id="vtn9t"></progress>
<address id="vtn9t"><cite id="vtn9t"><video id="vtn9t"></video></cite></address>
<var id="vtn9t"><dl id="vtn9t"></dl></var>
<var id="vtn9t"><dl id="vtn9t"><address id="vtn9t"></address></dl></var><progress id="vtn9t"><i id="vtn9t"></i></progress>