2018-8-21 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
常見的APP 圖文布局有哪些？不同按鈕有哪些用法？今天這篇總結(jié)幫新手認(rèn)識基礎(chǔ)知識，趕緊來收！用戶所關(guān)注的內(nèi)容以及不同的業(yè)務(wù)訴求決定信息的優(yōu)先級排布，所以沒有通用的布局，只有適合的布局。
1. 上圖下文
上圖下文更強(qiáng)調(diào)了圖片的重要性，以「見」這個(gè)屬性為優(yōu)先，上圖下文需要注意的是圖片高度過高會(huì)嚴(yán)重影響版面效率，而一個(gè)具有商業(yè)化目的的產(chǎn)品對首頁的版面效率異?？粗?，同樣對圖片的質(zhì)量要求也甚高。通常這樣的 feed流布局更抓人眼球。
如果確實(shí)需要以大圖+文的上下方式來布局，盡量找到版面的平衡點(diǎn)，考慮圖片與文字之間想要給用戶傳達(dá)的關(guān)系和優(yōu)先級圖片的使用盡量使用黃金比例做展示，例如4:3，2:1，16:9等。
宮格排列式的上圖下文能夠極大的提升版面效率，一般更多用于電商平臺，在首頁將某個(gè)模塊的優(yōu)質(zhì)商品進(jìn)行透出，提高轉(zhuǎn)化和流量。缺點(diǎn)是缺乏信息完整度，在布局時(shí)需要考慮更多因設(shè)備、極限值帶來的不同狀況的問題。
可以看出，嚴(yán)選將金額跟在標(biāo)題后面，而非固定位置，這樣做的好處是將標(biāo)題和金額關(guān)聯(lián)度更高，形成一致性，缺點(diǎn)是布局上顯得層次不齊影響閱讀效率。通常這樣的排版會(huì)根據(jù)業(yè)務(wù)需要來選擇展示一行或多行文字極限。但由于版面效率它不得不只給了兩行的極限高度。
2. 左圖右文
左圖右文形式的排版應(yīng)該也算是用的非常多了。其實(shí)大家會(huì)經(jīng)常把它和左文右邊圖進(jìn)行對比。但無論是左圖還是右圖，在這樣的布局中我們首先就要做好圖和文的占比。顯示在外面的圖片通常是選取了詳情中的圖片來進(jìn)行展示，否則就浪費(fèi)了比較多的人力資源去重新配圖了得不償失。同樣和圖片搭配的信息字段此時(shí)就顯得極為重要。
菜鳥裹裹其實(shí)將標(biāo)題的優(yōu)先級又提升到了和圖片一樣的層次。圖片本身給人的視覺沖擊會(huì)更強(qiáng)所以即便圖片放在標(biāo)題下面，也不會(huì)弱。
方形縮略圖是最常用的形式，不至于太窄也不至于太寬，對于右側(cè)信息的布局也顯得更游刃有余。橫形的圖片會(huì)讓右側(cè)的文字顯示空間壓縮的厲害，通常在視頻縮略圖會(huì)用到，但圖片對整個(gè)頁面的氛圍感會(huì)更好。豎形的圖片讓右側(cè)信息有更多的發(fā)揮空間，同時(shí)版面的留白也更大，但是如果右側(cè)信息過少，則會(huì)讓頁面有些單調(diào)和不完整。
左文右圖就不再贅述，現(xiàn)在大多數(shù)左文右圖在咨詢和旅游產(chǎn)品中使用的更多，因?yàn)橛脩粼跒g覽這樣的列表信息時(shí)圖片無法在第一眼被識別出具體內(nèi)容，而對于這樣的產(chǎn)品來說無疑是低效的。當(dāng)然很多時(shí)候沒有那么多時(shí)間去驗(yàn)證如此設(shè)計(jì)對于用戶來說是否真的能提高瀏覽效率，提升了多少滿意度。我們可以簡單的理解，如果說的是一件事，那么文字比圖片更重要。如果說的是一樣物品、人，那么左邊放圖更合適，體會(huì)一下。
3. 圖文混排
為了使信息傳達(dá)的更一致，通常如果沒有大量的文字信息則我們會(huì)選擇文字與圖片混排的形式，為了適應(yīng)多變的圖片，我們會(huì)在文字底部加一層黑色半透明蒙層或者給文字加一些無傷大雅的陰影。前提是文字信息不會(huì)太多而干擾到圖片內(nèi)容的展示和傳達(dá)。
其實(shí)嚴(yán)格意義上來說，能通過點(diǎn)擊觸發(fā)交互動(dòng)作的控件我們都能將它定義為按鈕，但是如果這樣定義那就沒的玩了，所以我們將移動(dòng)端的按鈕定義為具有引導(dǎo)性并且可點(diǎn)擊的控件。
例如京東金融查看歷史支取利率后的箭頭，其實(shí)這才是這一行的引導(dǎo)按鈕，但是為了更好的觸發(fā)點(diǎn)擊通常會(huì)將整一行都作為點(diǎn)擊熱區(qū)。
所以為了區(qū)分不同的按鈕的用法，我這邊將按鈕進(jìn)行了一個(gè)分類：主線場景、支線場景、異常場景。
主線場景下的按鈕通常會(huì)使用的比較大，為了強(qiáng)化和引導(dǎo)核心的任務(wù)流程，所以該按鈕應(yīng)該是最醒目的。
樣式通常會(huì)分為通欄和非通欄，而通欄則是從 MD 設(shè)計(jì)中衍生出來的一種形式。
1. 主線場景
要注意的是，通欄和非通欄按鈕我們到底該如何選擇，首先我們需要知道這樣的按鈕都是放在頁面的底部固定顯示，不會(huì)隨著內(nèi)容滾動(dòng)，如果選擇通欄按鈕，則更適合可滾動(dòng)的頁面容器，也就是說一頁中內(nèi)容較多在一屏幕中無法顯示全的頁面，優(yōu)點(diǎn)是按鈕的優(yōu)先級會(huì)很高，但是在 iphone X 這樣的設(shè)備中，適配會(huì)糾結(jié)一些。
而如果選擇不通欄的按鈕，我們要考慮的是頁面內(nèi)容是否很長，如果很長需要在按鈕底部加一層白色背景，盡量不要讓內(nèi)容穿過按鈕，因?yàn)榈撞科鋵?shí)并不是內(nèi)容最好的顯示區(qū)域。同樣非通欄的置底按鈕相較于通欄按鈕層級就顯得沒那么高。
所以我們會(huì)發(fā)現(xiàn)考拉和淘寶雖然有樣式區(qū)別，但實(shí)際上都相當(dāng)于在底部有一層內(nèi)容遮蓋的部分。
2. 支線場景
再來看支線場景的按鈕，支線場景的按鈕一般能夠分為：圖標(biāo)、文字、圖標(biāo)+文字、框+圖文字+圖標(biāo)這樣幾種類型。
圖標(biāo)就不用說了本身就具有可操作的屬性，也有修飾的屬性，關(guān)鍵看他的場景和布局位置。例如淘寶的 tab 標(biāo)簽上的定位圖標(biāo)，就是一種修飾型的圖標(biāo)，為了更好理解這里的定位是一種樓層定位，隨著頁面滑動(dòng)到不同的業(yè)務(wù)模塊而會(huì)跳動(dòng)，這里并不是一個(gè) tab 的功能，不能算是切換頁面。
如果把定位按鈕單獨(dú)拿出來放在導(dǎo)航欄，或者頁面右側(cè)的空白處，我們就會(huì)覺得他是一個(gè)可點(diǎn)擊并能夠進(jìn)行跳轉(zhuǎn)的按鈕。
包括「查看全部」這樣的文字，即便不加箭頭我們也會(huì)嘗試去點(diǎn)擊，高亮顯示就更加明顯，用戶已經(jīng)形成這樣的意識，但是像上面的規(guī)格和參數(shù)如果不加箭頭會(huì)讓用戶覺得這里并沒有可操作的東西就不去點(diǎn)擊了。所以我們總結(jié)一下就是支線按鈕的使用場景較為復(fù)雜，需要通過參考上下文的情景來做不同樣式的選擇。
不過支線流程畢竟是支線流程，為了不打擾主線流程，盡量不要將支線流程的按鈕做的過分明顯。例如淘寶詳情頁中的進(jìn)店逛逛，其實(shí)這個(gè)按鈕用了實(shí)心的色塊做了強(qiáng)引導(dǎo)，目的是為了提高客單價(jià)，同樣只要是對最終目標(biāo)有幫助，并不能算是跳失，說不定回來的時(shí)候買了更多更貴的東西。
3. 異常場景
異常場景下的按鈕不需要做的過于醒目，一般會(huì)采用幽靈按鈕或者和背景近似的顏色。該場景下按鈕大多數(shù)情況是希望用戶點(diǎn)擊將頁面恢復(fù)正常狀態(tài)，并不是一種強(qiáng)烈的引導(dǎo)。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com