成都網站製作
當前位置: 首頁 >新聞資訊 > 網站建設 > 移動端設計:圖文布局和按鈕解析
2018-09-10 17:12:45

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

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

   圖文布局   


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

1. 上圖下文 



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



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



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

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


2. 左圖右文 



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

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



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

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

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

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

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

郵箱:service@jikejun.com

熱線:18980803640 / 18190984800

座機:028-61382296

微信公眾號 二維碼