如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

常見(jiàn)的APP 圖文布局有哪些？不同按鈕有哪些用法？今天這篇總結(jié)幫新手認(rèn)識(shí)基礎(chǔ)知識(shí)，趕緊來(lái)收！

一、圖文布局

用戶(hù)所關(guān)注的內(nèi)容以及不同的業(yè)務(wù)訴求決定信息的優(yōu)先級(jí)排布，所以沒(méi)有通用的布局，只有適合的布局。

1. 上圖下文

上圖下文更強(qiáng)調(diào)了圖片的重要性，以「見(jiàn)」這個(gè)屬性為優(yōu)先，上圖下文需要注意的是圖片高度過(guò)高會(huì)嚴(yán)重影響版面效率，而一個(gè)具有商業(yè)化目的的產(chǎn)品對(duì)首頁(yè)的版面效率異?？粗?，同樣對(duì)圖片的質(zhì)量要求也甚高。通常這樣的 feed流布局更抓人眼球。

如果確實(shí)需要以大圖+文的上下方式來(lái)布局，盡量找到版面的平衡點(diǎn)，考慮圖片與文字之間想要給用戶(hù)傳達(dá)的關(guān)系和優(yōu)先級(jí)圖片的使用盡量使用黃金比例做展示，例如4:3，2:1，16:9等。

宮格排列式的上圖下文能夠極大的提升版面效率，一般更多用于電商平臺(tái)，在首頁(yè)將某個(gè)模塊的優(yōu)質(zhì)商品進(jìn)行透出，提高轉(zhuǎn)化和流量。缺點(diǎn)是缺乏信息完整度，在布局時(shí)需要考慮更多因設(shè)備、極限值帶來(lái)的不同狀況的問(wèn)題。

可以看出，嚴(yán)選將金額跟在標(biāo)題后面，而非固定位置，這樣做的好處是將標(biāo)題和金額關(guān)聯(lián)度更高，形成一致性，缺點(diǎn)是布局上顯得層次不齊影響閱讀效率。通常這樣的排版會(huì)根據(jù)業(yè)務(wù)需要來(lái)選擇展示一行或多行文字極限。但由于版面效率它不得不只給了兩行的極限高度。

2. 左圖右文

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

菜鳥(niǎo)裹裹其實(shí)將標(biāo)題的優(yōu)先級(jí)又提升到了和圖片一樣的層次。圖片本身給人的視覺(jué)沖擊會(huì)更強(qiáng)所以即便圖片放在標(biāo)題下面，也不會(huì)弱。

方形縮略圖是最常用的形式，不至于太窄也不至于太寬，對(duì)于右側(cè)信息的布局也顯得更游刃有余。橫形的圖片會(huì)讓右側(cè)的文字顯示空間壓縮的厲害，通常在視頻縮略圖會(huì)用到，但圖片對(duì)整個(gè)頁(yè)面的氛圍感會(huì)更好。豎形的圖片讓右側(cè)信息有更多的發(fā)揮空間，同時(shí)版面的留白也更大，但是如果右側(cè)信息過(guò)少，則會(huì)讓頁(yè)面有些單調(diào)和不完整。

左文右圖就不再贅述，現(xiàn)在大多數(shù)左文右圖在咨詢(xún)和旅游產(chǎn)品中使用的更多，因?yàn)橛脩?hù)在瀏覽這樣的列表信息時(shí)圖片無(wú)法在第一眼被識(shí)別出具體內(nèi)容，而對(duì)于這樣的產(chǎn)品來(lái)說(shuō)無(wú)疑是低效的。當(dāng)然很多時(shí)候沒(méi)有那么多時(shí)間去驗(yàn)證如此設(shè)計(jì)對(duì)于用戶(hù)來(lái)說(shuō)是否真的能提高瀏覽效率，提升了多少滿(mǎn)意度。我們可以簡(jiǎn)單的理解，如果說(shuō)的是一件事，那么文字比圖片更重要。如果說(shuō)的是一樣物品、人，那么左邊放圖更合適，體會(huì)一下。

3. 圖文混排

為了使信息傳達(dá)的更一致，通常如果沒(méi)有大量的文字信息則我們會(huì)選擇文字與圖片混排的形式，為了適應(yīng)多變的圖片，我們會(huì)在文字底部加一層黑色半透明蒙層或者給文字加一些無(wú)傷大雅的陰影。前提是文字信息不會(huì)太多而干擾到圖片內(nèi)容的展示和傳達(dá)。

二、按鈕解析

其實(shí)嚴(yán)格意義上來(lái)說(shuō)，能通過(guò)點(diǎn)擊觸發(fā)交互動(dòng)作的控件我們都能將它定義為按鈕，但是如果這樣定義那就沒(méi)的玩了，所以我們將移動(dòng)端的按鈕定義為具有引導(dǎo)性并且可點(diǎn)擊的控件。

例如京東金融查看歷史支取利率后的箭頭，其實(shí)這才是這一行的引導(dǎo)按鈕，但是為了更好的觸發(fā)點(diǎn)擊通常會(huì)將整一行都作為點(diǎn)擊熱區(qū)。

所以為了區(qū)分不同的按鈕的用法，我這邊將按鈕進(jìn)行了一個(gè)分類(lèi)：主線(xiàn)場(chǎng)景、支線(xiàn)場(chǎng)景、異常場(chǎng)景。

主線(xiàn)場(chǎng)景下的按鈕通常會(huì)使用的比較大，為了強(qiáng)化和引導(dǎo)核心的任務(wù)流程，所以該按鈕應(yīng)該是最醒目的。

樣式通常會(huì)分為通欄和非通欄，而通欄則是從 MD 設(shè)計(jì)中衍生出來(lái)的一種形式。

1. 主線(xiàn)場(chǎng)景

要注意的是，通欄和非通欄按鈕我們到底該如何選擇，首先我們需要知道這樣的按鈕都是放在頁(yè)面的底部固定顯示，不會(huì)隨著內(nèi)容滾動(dòng)，如果選擇通欄按鈕，則更適合可滾動(dòng)的頁(yè)面容器，也就是說(shuō)一頁(yè)中內(nèi)容較多在一屏幕中無(wú)法顯示全的頁(yè)面，優(yōu)點(diǎn)是按鈕的優(yōu)先級(jí)會(huì)很高，但是在 iphone X 這樣的設(shè)備中，適配會(huì)糾結(jié)一些。

而如果選擇不通欄的按鈕，我們要考慮的是頁(yè)面內(nèi)容是否很長(zhǎng)，如果很長(zhǎng)需要在按鈕底部加一層白色背景，盡量不要讓內(nèi)容穿過(guò)按鈕，因?yàn)榈撞科鋵?shí)并不是內(nèi)容最好的顯示區(qū)域。同樣非通欄的置底按鈕相較于通欄按鈕層級(jí)就顯得沒(méi)那么高。

所以我們會(huì)發(fā)現(xiàn)考拉和淘寶雖然有樣式區(qū)別，但實(shí)際上都相當(dāng)于在底部有一層內(nèi)容遮蓋的部分。

2. 支線(xiàn)場(chǎng)景

再來(lái)看支線(xiàn)場(chǎng)景的按鈕，支線(xiàn)場(chǎng)景的按鈕一般能夠分為：圖標(biāo)、文字、圖標(biāo)+文字、框+圖文字+圖標(biāo)這樣幾種類(lèi)型。

圖標(biāo)就不用說(shuō)了本身就具有可操作的屬性，也有修飾的屬性，關(guān)鍵看他的場(chǎng)景和布局位置。例如淘寶的 tab 標(biāo)簽上的定位圖標(biāo)，就是一種修飾型的圖標(biāo)，為了更好理解這里的定位是一種樓層定位，隨著頁(yè)面滑動(dòng)到不同的業(yè)務(wù)模塊而會(huì)跳動(dòng)，這里并不是一個(gè) tab 的功能，不能算是切換頁(yè)面。

如果把定位按鈕單獨(dú)拿出來(lái)放在導(dǎo)航欄，或者頁(yè)面右側(cè)的空白處，我們就會(huì)覺(jué)得他是一個(gè)可點(diǎn)擊并能夠進(jìn)行跳轉(zhuǎn)的按鈕。

包括「查看全部」這樣的文字，即便不加箭頭我們也會(huì)嘗試去點(diǎn)擊，高亮顯示就更加明顯，用戶(hù)已經(jīng)形成這樣的意識(shí)，但是像上面的規(guī)格和參數(shù)如果不加箭頭會(huì)讓用戶(hù)覺(jué)得這里并沒(méi)有可操作的東西就不去點(diǎn)擊了。所以我們總結(jié)一下就是支線(xiàn)按鈕的使用場(chǎng)景較為復(fù)雜，需要通過(guò)參考上下文的情景來(lái)做不同樣式的選擇。

不過(guò)支線(xiàn)流程畢竟是支線(xiàn)流程，為了不打擾主線(xiàn)流程，盡量不要將支線(xiàn)流程的按鈕做的過(guò)分明顯。例如淘寶詳情頁(yè)中的進(jìn)店逛逛，其實(shí)這個(gè)按鈕用了實(shí)心的色塊做了強(qiáng)引導(dǎo)，目的是為了提高客單價(jià)，同樣只要是對(duì)最終目標(biāo)有幫助，并不能算是跳失，說(shuō)不定回來(lái)的時(shí)候買(mǎi)了更多更貴的東西。

3. 異常場(chǎng)景

異常場(chǎng)景下的按鈕不需要做的過(guò)于醒目，一般會(huì)采用幽靈按鈕或者和背景近似的顏色。該場(chǎng)景下按鈕大多數(shù)情況是希望用戶(hù)點(diǎn)擊將頁(yè)面恢復(fù)正常狀態(tài)，并不是一種強(qiáng)烈的引導(dǎo)。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。