app頁(yè)面布局優(yōu)化建議

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于app頁(yè)面布局優(yōu)化建議的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫(xiě)出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁(yè)版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請(qǐng)撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

• 1、頁(yè)面布局方案

• 2、9種常見(jiàn)的移動(dòng)端產(chǎn)品信息布局方式

• 3、App中列表、卡片和雙欄卡片的布局思考

• 4、Android性能優(yōu)化總結(jié)

一、頁(yè)面布局方案

例如：對(duì)于DPR=2的Retina屏幕而言1個(gè)位圖像素對(duì)應(yīng)于4個(gè)物理像素，由于單一位圖像素不可再分割，所以只能就近取色，從而導(dǎo)致圖片模糊。所以對(duì)于圖片清晰度問(wèn)題，較好的方案是提供兩倍圖 @x2 。

像素密度表示設(shè)備屏幕能夠顯示的設(shè)備獨(dú)立像素DIP的數(shù)量，屏幕顯示的像素?cái)?shù)量越多畫(huà)面也就越精細(xì)，同時(shí)同樣屏幕區(qū)域能夠顯示的信息也就越多。

屏幕由像素點(diǎn)組成，每個(gè)像素點(diǎn)發(fā)出不同顏色的光，進(jìn)而構(gòu)成界面。而屏幕的物理尺寸與像素尺寸是不成比例的。不同尺寸的手機(jī)屏幕擁有不同的分辨率，分辨率實(shí)際上是手機(jī)像素的寬高尺寸。

像素密度（pixels per inch,PPI或DPI）表示每英寸長(zhǎng)度上排列的設(shè)備獨(dú)立像素點(diǎn)DIP的個(gè)數(shù)，1英寸等于2.53厘米。像素密度PPI越高則表示屏幕分辨率越高進(jìn)而屏幕顯示越精細(xì)。Retine屏幕比普通屏幕清晰的原因，是因?yàn)樗南袼孛芏仁瞧胀ㄆ聊坏臄?shù)倍。

例如：3.5英寸的iPhone手機(jī)屏幕

日常所說(shuō)的屏幕尺寸，實(shí)際是指屏幕對(duì)角線的長(zhǎng)度。計(jì)算像素密度首先需要計(jì)算設(shè)備屏幕對(duì)角線等效像素，然后除以對(duì)角線長(zhǎng)度。例如HTC G7分辨率為480x800，3.7英寸，計(jì)算出像素密度為252PPI。

像素密度PPI = 平方像素寬加平方像素高之和開(kāi)平方的結(jié)果，再除以屏幕對(duì)角線的英寸數(shù)。

密度決定比例

通過(guò)計(jì)算像素密度PPI可以得知設(shè)備屏幕屬于哪個(gè)密度區(qū)間，因?yàn)椴煌芏葏^(qū)間對(duì)應(yīng)著不同的默認(rèn)縮放比例。

通俗來(lái)說(shuō)視區(qū) Viewport 就是瀏覽器上用來(lái)顯示頁(yè)面的區(qū)域，也就是說(shuō)，瀏覽器的實(shí)際寬度和手機(jī)寬度不一樣，無(wú)論手機(jī)寬度是320px或640px，在手機(jī)瀏覽器內(nèi)部寬度始終會(huì)是瀏覽器本身的視區(qū)。

現(xiàn)代瀏覽器都會(huì)給自身的視區(qū)提供一個(gè)默認(rèn)值，大多會(huì)以980px或1024px為主。在移動(dòng)端視區(qū)默認(rèn)一般來(lái)說(shuō)是會(huì)大于手機(jī)屏幕的，所以當(dāng)在桌面瀏覽器正常顯示的頁(yè)面，會(huì)以960px設(shè)計(jì)主區(qū)域。放到移動(dòng)端就會(huì)出現(xiàn)橫向滾動(dòng)條，因此會(huì)專(zhuān)門(mén)會(huì)給瀏覽器設(shè)計(jì)移動(dòng)端的頁(yè)面。

移動(dòng)端瀏覽器會(huì)將頁(yè)面放在一個(gè)虛擬的窗口 viewport 中，通常這個(gè)虛擬的窗口會(huì)比屏幕寬，這樣就不用將每個(gè)頁(yè)面擠到很小的窗口中，以防止破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)布局，用戶可以通過(guò)平移或縮放來(lái)查看頁(yè)面中的不同部分。

頁(yè)面中視區(qū) viewport 是可繪制的區(qū)域，雖然視區(qū)的可視面積和屏幕尺寸相匹配，但視區(qū)頁(yè)由自己的尺寸，用來(lái)確定頁(yè)面中的像素?cái)?shù)量。

在 iPhone 和 Android 平臺(tái)中 WebKit 內(nèi)核的歷覽器使用980像素寬的視見(jiàn)區(qū)或邏輯尺寸，相當(dāng)于viewport中的width=980px。當(dāng)頁(yè)面加載后，頁(yè)面內(nèi)容通常被完全縮放以便整個(gè)頁(yè)面都可見(jiàn)，盡管內(nèi)容會(huì)被縮放的非常小且不可讀。

在Web頁(yè)面中，可通過(guò)JS動(dòng)態(tài)獲取相關(guān)參數(shù)。

根據(jù)目前市場(chǎng)主流移動(dòng)終端，統(tǒng)計(jì)設(shè)備獨(dú)立像素后，移動(dòng)端H5設(shè)計(jì)稿推薦尺寸為640 x 1136、750 x 1334。

除去瀏覽器全屏顯示，幾乎所有情況下均會(huì)存在頂部狀態(tài)欄和導(dǎo)航欄。根據(jù)iPhone標(biāo)準(zhǔn)，狀態(tài)欄和導(dǎo)航欄的獨(dú)立像素高度分別為40px和88px。Android平臺(tái)可以更改狀態(tài)和導(dǎo)航欄高度可取默認(rèn)值48px和100px為準(zhǔn)。在網(wǎng)頁(yè)中就會(huì)將頁(yè)面內(nèi)容向下擠入盲區(qū)，根據(jù)不同的布局方式可能會(huì)擠出視口，也就是可視區(qū)域之下。因此取兩個(gè)平臺(tái)的最大值148。因此設(shè)計(jì)稿要盡量保證單頁(yè)下沒(méi)有重要內(nèi)容。如果要在所有屏幕上將重要內(nèi)容顯示完全，需要注意市面上存在的小尺寸屏幕，絕對(duì)部分智能機(jī)分辨率在640 x 960之上，因此只要重要內(nèi)容放在盲區(qū)之上即可。計(jì)算出的最安全高度為812 = 960 - 148。

簡(jiǎn)單來(lái)說(shuō)視區(qū) Viewport 是嚴(yán)格等于瀏覽器的窗口，在桌面瀏覽器中視區(qū)就是瀏覽器窗口的寬高，但在移動(dòng)設(shè)備上由于視區(qū)太窄，為了更好的為 CSS 布局服務(wù)，所以提供了兩個(gè)視區(qū)，分別是可見(jiàn)視區(qū) Visual Viewport 和布局視區(qū) Layout Viewport 。

如果將移動(dòng)設(shè)備瀏覽器的可視區(qū)域設(shè)置為Viewport，某些網(wǎng)站會(huì)因?yàn)閂iewport太窄而顯示錯(cuò)亂，所以瀏覽器會(huì)默認(rèn)將Viewport設(shè)置為一個(gè)較寬的值，比如980px，使得為桌面瀏覽器設(shè)計(jì)的網(wǎng)站也能在移動(dòng)設(shè)備瀏覽器上正常顯示。這個(gè)瀏覽器默認(rèn)的Viewport也就是Layout Viewport布局視區(qū)。布局視區(qū)的寬度可以使用JavaScript的 document.documentElement.clientWidth 獲取。移動(dòng)設(shè)備中默認(rèn)的視區(qū)就是Layout Viewport。

布局視區(qū)的寬度是大于瀏覽器可視區(qū)域的寬度的，因此需要一個(gè)Viewport來(lái)表示瀏覽器可視區(qū)域大小，這個(gè)Viewport也就是可見(jiàn)視區(qū)Visual Viewport，可見(jiàn)視區(qū)可使用JavaScript的 document.documentElement.innerWidth 獲取。

Ideal Viewport是一個(gè)能完美適配移動(dòng)設(shè)備的Viewport，首先無(wú)需縮放和橫向滾動(dòng)條就能正常查看頁(yè)面所有內(nèi)容，其次顯示的文字、圖片大小合適。比如14px的文本不會(huì)因?yàn)橐粋€(gè)高密度像素的屏幕而顯示的太小或無(wú)法看清。無(wú)論在何種密度屏幕、何種分辨率下，顯示出來(lái)的大小都差不多，這個(gè)Viewport也就是Ideal Viewport。

Ideal Viewport并沒(méi)有一個(gè)固定的尺寸，不同的設(shè)備擁有不同的尺寸。比如在IPhone設(shè)備中Ideal Viewport寬度是320px，無(wú)論屏幕寬度是320還是640的。Ideal Viewport的意義在于，無(wú)論在何種分辨率下，針對(duì)Ideal Viewport而設(shè)計(jì)的頁(yè)面無(wú)需縮放和橫向滾動(dòng)條都可以完美地呈現(xiàn)給用戶。

移動(dòng)設(shè)備中默認(rèn)的視區(qū)是Layout Viewport，在進(jìn)行移動(dòng)設(shè)備頁(yè)面開(kāi)發(fā)時(shí)則需要Ideal Viewport。要得到完美視區(qū)，需設(shè)置 meta 標(biāo)簽。

該 meta 標(biāo)簽的作用是讓當(dāng)前視區(qū)寬度等于設(shè)備寬度，同時(shí)不允許用戶手動(dòng)縮放。 minimum-scale=1.0 與 maximum-scale=1.0 并不是必需的。但 width = device-width 則是必須的，以保證不會(huì)出現(xiàn)橫向滾動(dòng)條。

width 能夠控制默認(rèn)布局視區(qū)Layout Viewport的寬度，若不指定則默認(rèn)會(huì)是980px或1024px，這個(gè)值會(huì)由設(shè)備自身所決定。當(dāng)把布局視區(qū)寬度設(shè)置為移動(dòng)設(shè)備寬度 width = device-width 時(shí)，此時(shí)布局視區(qū)將會(huì)變成完美視區(qū)。

其實(shí)要將當(dāng)前視區(qū)寬度設(shè)置為完美視區(qū)寬度，既可以設(shè)置 width = device-width 也可以設(shè)置 initial-scale = 1.0 ，但是單單設(shè)置 width = device-width 會(huì)導(dǎo)致iPhone、iPad設(shè)備中橫豎屏不分，單單設(shè)置 initial-scale = 1.0 則會(huì)導(dǎo)致IE中橫豎屏不分。所以都以豎屏的完美視口寬度為標(biāo)準(zhǔn)，最完美的寫(xiě)法時(shí)兩則都寫(xiě)上去， width = device-width 解決iPhone、iPad缺陷， initial-scale = 1.0 則解決IE的缺陷。

CSS3新增視區(qū)單位vm和vh，在移動(dòng)端iOS8+和Android4.4+獲得支持。

設(shè)備像素比定義了物理像素與設(shè)備獨(dú)立像素之間的對(duì)應(yīng)關(guān)系，計(jì)算公式為：設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素。

在CSS中可通過(guò)以下方式進(jìn)行媒體查詢，針對(duì)不同DPR設(shè)備做出樣式適配。

在JavaScript中可通過(guò) window.devicePixelRatio 獲取當(dāng)前設(shè)備的DPR。

在Ratina高清設(shè)備屏幕中一個(gè)CSS像素對(duì)應(yīng)4個(gè)物理像素

Web頁(yè)面設(shè)置視口后，頁(yè)面與屏幕是1:1顯示，移動(dòng)設(shè)備都具有設(shè)備像素比 DPR ，當(dāng)DPR=2時(shí)移動(dòng)設(shè)備上的一個(gè)CSS像素由4個(gè)物理像素點(diǎn)組成。

安卓客戶端限制了 viewport 設(shè)置的縮放屬性，讓客戶端放開(kāi)限制就行，但是由于市場(chǎng)上的app版本還是不支持，所以需要做兼容性處理。

iPhone6 上有1px 的滾動(dòng)條，最后處理方案是通過(guò) viewport 中的 maximum-scale 的值加了0.1，由于設(shè)置了user-scalable=no，maximum-scale 的值加0.1并不會(huì)有什么影響。

通過(guò)JS動(dòng)態(tài)獲取移動(dòng)設(shè)備的設(shè)備像素比，通過(guò)設(shè)備像素比來(lái)計(jì)算并設(shè)備Web頁(yè)面中 html 標(biāo)簽的字體大小 font-size 以及縮放比例。

例如：動(dòng)態(tài)設(shè)置 html 的font-size, 同時(shí)根據(jù)設(shè)備DPR調(diào)整頁(yè)面的縮放值，進(jìn)而達(dá)到高清效果。

rem 全稱 font size of the root element 是指相對(duì)于根元素的字體大小的相對(duì)單位，計(jì)算規(guī)則依賴于根元素。

rem 是通過(guò)根元素進(jìn)行適配的，web中根元素是指 html ，所以通過(guò)設(shè)置 html 的字體大小即可控制 rem 的大小。

REM布局的核心是設(shè)置好根 html 元素的字體大小 font-size ，為了防止在高清屏下像素不夠用而導(dǎo)致模糊，當(dāng)拿到移動(dòng)設(shè)計(jì)稿時(shí)，移動(dòng)設(shè)計(jì)稿一般會(huì)以iPhone5設(shè)備寬320px或iPhone6設(shè)備寬375px為基準(zhǔn)，制作出兩倍寬的設(shè)計(jì)稿，即640px或750px。

例如：設(shè)置 html 標(biāo)簽的 font-size:10px ，6rem即6*10px。

rem 適用于WebApp，出于兼容性考慮，WebApp下使用 rem 更加能凸價(jià)值和功能。

使用CSS的媒體查詢控制

移動(dòng)UI設(shè)計(jì)稿會(huì)采用iPhone寬度作為標(biāo)準(zhǔn)

使用JS控制Web頁(yè)面文字大小使其自適應(yīng)屏幕

使用 rem 布局的本質(zhì)是等比縮放，一般是基于寬度。

將屏幕寬度均分100份，每一份的寬度使用x表示，即x=屏幕寬度/100，如果將x作為單位，x前面的數(shù)值代表屏幕寬度的百分比。想要屏幕元素隨著屏幕寬度等比縮放，只需要確定x單位，可通過(guò)CSS3中的 rem 來(lái)實(shí)現(xiàn)?？赏ㄟ^(guò)JS設(shè)置HTML字體大小等于屏幕寬度的百分之一。

若UE設(shè)計(jì)稿寬度尺寸為640px，設(shè)計(jì)稿中某元素寬度為100px，則可以計(jì)算出100 / 640px * 100px = 15.625。

最佳實(shí)踐：px2rem移動(dòng)端自適應(yīng)方案 https://github.com/imochen/hotcss

字體大小不能使用 rem ，因?yàn)樽煮w大小和字體寬度并不是線性關(guān)系，所以字體大小不能使用 rem 。由于設(shè)置根元素字體大小會(huì)影響所有沒(méi)有設(shè)置字體大小的元素，因?yàn)樽煮w大小是會(huì)繼承的，可以在 body 上做字體修正。

如何實(shí)現(xiàn)字體的響應(yīng)式，可通過(guò)修改 body 字體大小，同時(shí)設(shè)置字體大小使用 em 單位。

二、9種常見(jiàn)的移動(dòng)端產(chǎn)品信息布局方式

某天，經(jīng)理在工作討論組發(fā)了2張App的界面截圖，問(wèn)：“你們喜歡哪一種布局方式？”這兩個(gè)界面，一個(gè)是九宮格式，一個(gè)是普通列表式。

一時(shí)間，大家沒(méi)法快速下定論。視覺(jué)設(shè)計(jì)師發(fā)言，“得看具體場(chǎng)景和需求來(lái)判定?！?/p>

有程序員同事打趣說(shuō)，“哈哈，說(shuō)了跟沒(méi)說(shuō)一樣?！苯又懤m(xù)有人發(fā)表了自己看法，除了說(shuō)到這2種方式各自的優(yōu)劣，總結(jié)起來(lái)還是那句話——得看設(shè)計(jì)的目標(biāo)是什么，綜合多方面來(lái)考慮，沒(méi)有絕對(duì)的好與壞，只有相對(duì)的合適與否。

在看過(guò)已有的關(guān)于App界面信息布局方式的一些資料后，我自己調(diào)整了一下，重新總結(jié)一下。從視覺(jué)和交互表現(xiàn)來(lái)說(shuō)，常見(jiàn)的移動(dòng)端產(chǎn)品界面信息布局方式，大致有以下 9 種。

一、列表式

列表式為豎向排列，每個(gè)信息單元有相同的結(jié)構(gòu)。

優(yōu)點(diǎn)：

符合人們從上往下閱讀的習(xí)慣，順暢快捷，瀏覽體驗(yàn)比較好。

因?yàn)橛薪y(tǒng)一的信息單元格式，頁(yè)面整體比較整潔、清晰。

每個(gè)信息單元根據(jù)需要可放置標(biāo)題、摘要、圖片、標(biāo)簽等元素，供用戶預(yù)覽并預(yù)測(cè)詳細(xì)內(nèi)容。

缺點(diǎn)：

當(dāng)信息加載多了以后，容易讓人出現(xiàn)審美疲勞，降低閱覽興趣。

信息排序越往后，受到的關(guān)注度自然會(huì)下降。一般采用顏色不同、字號(hào)大小、區(qū)塊劃分等來(lái)區(qū)分重要級(jí)別，增強(qiáng)層次感。

類(lèi)似于列表式，有些演化出像卡片的排版，或者一個(gè)區(qū)塊劃分為左右2半（如下例子所示），成為2個(gè)入口，都是根據(jù)界面面積利用和設(shè)計(jì)目標(biāo)等方面來(lái)考慮的。

二、橫向排列式

與豎向排列相對(duì)應(yīng)，信息單元也可以是橫向排列。在交互操作上，這種方式需要左右滑動(dòng)來(lái)切換信息單元，又稱“旋轉(zhuǎn)木馬式”。

舉例：下圖中[新書(shū)搶鮮]模塊的布局方式

優(yōu)點(diǎn)：

縮小在高度上占據(jù)的空間，利于界面其他信息的展示。

當(dāng)信息單元占據(jù)的幅度較大時(shí)（例如圖片類(lèi)應(yīng)用），有利于用戶目光聚焦。

缺點(diǎn)：

左右滑動(dòng)的交互有時(shí)候不方便。

當(dāng)信息單元面積較大時(shí)，無(wú)法跳躍性定位到想看的信息單元，只能一個(gè)一個(gè)左右切換，直到切換到想看的那個(gè)為止。

因?yàn)椴僮鞑环奖?，可能有些?nèi)容會(huì)被遺漏，或者用戶沒(méi)興致去翻看。

三、九宮格式

嚴(yán)格意義上的九宮格是3行3列，如果列數(shù)或行數(shù)增加，我們暫且都泛稱為九宮格式（也有人將它們區(qū)分開(kāi)來(lái)，稱之為“陳列館式”或“網(wǎng)格式”）

優(yōu)點(diǎn)：

節(jié)省空間，一行可以放置多個(gè)入口。

清晰明朗、簡(jiǎn)潔。一般會(huì)突出icon圖標(biāo)，便于記憶和查找。

缺點(diǎn)：

因?yàn)榭臻g有限，不能放置太多次級(jí)預(yù)覽內(nèi)容。

當(dāng)入口過(guò)多時(shí)，也不利于辨識(shí)和查找。

四、選項(xiàng)卡式

也稱為“tab式”，通過(guò)對(duì)當(dāng)前界面的信息屬性進(jìn)行劃分歸類(lèi)，分為多個(gè)選項(xiàng)，用戶切換即可。App的主導(dǎo)航一般也是用tab的方式切換。

如下圖：消息頁(yè)面分為4個(gè)選項(xiàng)卡

優(yōu)點(diǎn)：

不用來(lái)回跳轉(zhuǎn)頁(yè)面層級(jí)，只需要在當(dāng)前頁(yè)面一鍵切換即可看到不同內(nèi)容，方便。

用戶清楚地知道自己當(dāng)前所在位置。

缺點(diǎn)：

選項(xiàng)卡數(shù)量超過(guò)5個(gè)就會(huì)顯得笨重，如果一行放置不下，需要左右滑動(dòng)才能顯示完所有選項(xiàng)卡，會(huì)降低操作便捷性。

五、多面板式

對(duì)于分類(lèi)比較多，每個(gè)類(lèi)別囊括的內(nèi)容也多的情況下，可用多個(gè)面板的形式來(lái)展示。

優(yōu)點(diǎn)：

可以清楚地知道當(dāng)前在哪個(gè)位置。

當(dāng)前界面容納多個(gè)入口，同級(jí)別之間切換，不需要在不同層級(jí)的頁(yè)面來(lái)回切換，比較方便。

缺點(diǎn)：

面板獨(dú)占一列空間，整個(gè)界面顯得比較擁擠。

六、手風(fēng)琴式

這種方式也有人稱為“行為擴(kuò)展式”。它是在當(dāng)前界面點(diǎn)擊一級(jí)信息，展開(kāi)二級(jí)信息的方式，點(diǎn)擊時(shí)再展開(kāi)，再點(diǎn)擊可縮回，有點(diǎn)類(lèi)似手風(fēng)琴縮展的動(dòng)作。

優(yōu)點(diǎn)：

只需要在當(dāng)前頁(yè)展開(kāi)二級(jí)信息，不需要跳轉(zhuǎn)頁(yè)面，操作比較方便，也有利于用戶認(rèn)知信息的架構(gòu)。

缺點(diǎn)：

當(dāng)信息分類(lèi)過(guò)多且需要手動(dòng)再點(diǎn)擊才能收回二級(jí)信息時(shí)，全部展開(kāi)后，不利于跨分類(lèi)跳轉(zhuǎn)。

七、圖表式

通過(guò)圖表和內(nèi)容的結(jié)合來(lái)展示。

優(yōu)點(diǎn)：

圖表比較直觀，表現(xiàn)力更強(qiáng)。

缺點(diǎn)：

占據(jù)面積較大，整體界面能承載的信息不夠多。

如果圖形和交互動(dòng)作結(jié)合，大多數(shù)用戶可能發(fā)現(xiàn)不了這些交互。

八、抽屜式

抽屜式適用于隱藏次要功能，讓產(chǎn)品突出核心功能。當(dāng)用戶需要查找某個(gè)功能入口時(shí)，通過(guò)點(diǎn)擊抽屜，在“抽屜”里面進(jìn)行查找。

優(yōu)點(diǎn)：

可幫助隱藏一些功能入口，讓產(chǎn)品更簡(jiǎn)約。

缺點(diǎn)：

用戶第一次使用時(shí)，因?yàn)榭梢?jiàn)性被減弱，有些功能用戶找不到，提高了他們的使用成本。

如果用戶常用的功能被放置在抽屜里，則增加了用戶操作的步驟。

九、標(biāo)簽式

標(biāo)簽式，顧名思義，就是通過(guò)標(biāo)簽設(shè)置的方法，把信息進(jìn)行分類(lèi)對(duì)應(yīng)為一個(gè)個(gè)標(biāo)簽，或者標(biāo)簽直接作為功能入口（如“熱門(mén)搜索”），便于用戶操作。

優(yōu)點(diǎn)：

清晰簡(jiǎn)潔，占據(jù)空間少。

便于切換查看對(duì)應(yīng)的內(nèi)容，用戶清楚自己在哪個(gè)分類(lèi)。

缺點(diǎn)：

標(biāo)簽不宜過(guò)多，不利于查找。

小結(jié)

移動(dòng)端的產(chǎn)品形式越來(lái)越多樣化，人們總是期望隨時(shí)隨地可以在移動(dòng)端快速獲取自己想要的信息，因?yàn)橛布?guī)格的限制，如何在有限的空間和用戶耐心中爭(zhēng)奪用戶的注意力，隱含了諸多產(chǎn)品設(shè)計(jì)的學(xué)問(wèn)。

以上9種常見(jiàn)移動(dòng)端信息布局方式，只是很淺層的總結(jié)，任何一種方式都沒(méi)有絕對(duì)的優(yōu)劣，不同方式可以互相組合、鑲嵌使用，在具體設(shè)計(jì)時(shí)，需要根據(jù)實(shí)際情況來(lái)思考，在不斷優(yōu)化中找到最合適最有效的方案。

三、App中列表、卡片和雙欄卡片的布局思考

各布局形式的特點(diǎn)

列表的布局常見(jiàn)于新聞?lì)怉pp。其布局形式的特點(diǎn)在于能夠在較小的屏幕中顯示多條信息，用戶通過(guò)上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。

卡片式布局常見(jiàn)于微博、Facebook等社交類(lèi)App，也出現(xiàn)于其他不同類(lèi)的App中，形式非常靈活。其特點(diǎn)在于，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨(dú)立存在的，其信息量可以相對(duì)列表更加豐富，而且可以讓用戶對(duì)其進(jìn)行評(píng)論、點(diǎn)贊等等操作、省去了跳轉(zhuǎn)到詳情頁(yè)面的步驟。但由于卡片的信息很多，在小屏幕上并不能顯示多個(gè)卡片，一屏內(nèi)卡片數(shù)很少會(huì)超過(guò)3個(gè)。

而雙欄卡片的布局形式，比較常見(jiàn)于以圖片信息為主導(dǎo)的App。例如Pinterest，一些商城的商品陳列頁(yè)面。這種形式與卡片式類(lèi)似，但它能在一屏里顯示更多的內(nèi)容，至少4張卡片。同時(shí)，由于分開(kāi)左右兩欄的顯示，用戶可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容。

布局背后的行為邏輯

然而，為什么新聞?lì)惖亩嗖捎昧斜恚缃活?lèi)多采用卡片，圖片類(lèi)多采用雙欄卡片？

我們回歸到用戶需求和行為模式來(lái)思考這個(gè)問(wèn)題。

當(dāng)我們?cè)跒g覽新聞的時(shí)候，我們的需求是什么？大部分人的需求都是，一方面想要知道最近發(fā)生的一些事情，這是量的需求；另一方面，想要深入了解這一事情是什么，這是深度閱讀的需求。而量的需求往往具有先行性，深度閱讀是在其后的?；谶@樣的需求，用戶在瀏覽新聞時(shí)候的行為模式大概如下：快速大量瀏覽→篩選→判斷→快速大量瀏覽，如下：

由上圖看出，用戶在瀏覽新聞時(shí)，需要快速地處理大量的信息，而且高頻地在極短時(shí)間內(nèi)進(jìn)行決策。因此，高效性就極為重要，假如在一屏中只顯示一兩條信息顯然是不合適的。除此之外，展示形式的高度一致性和對(duì)展示內(nèi)容的信息量進(jìn)行嚴(yán)格控制也及其重要。高度一致性可以讓用戶快速理解展示形式，從而能自主選擇自己想要的內(nèi)容，便于篩選和判斷?？刂菩畔⒘磕軠p少信息干擾，從而提高效率。由于這樣的限制，列表就成為了新聞?wù)故镜暮侠硇问健?/p>

同理，在用Pinterest時(shí)，我們究竟是想要什么？是找到最適合的圖片。最適合，就會(huì)存在唯一性，就會(huì)有對(duì)比，取舍，選擇。這也意味著，用戶不是一張張按順序?yàn)g覽，而是反復(fù)地對(duì)比瀏覽，如下圖：

基于這樣的行為模式，要求布局形式：1.在一屏能內(nèi)能展示足夠多的內(nèi)容；2.能讓用戶方便地對(duì)比內(nèi)容。同時(shí)，對(duì)內(nèi)容本身也有要求：1.內(nèi)容本身是能被快速理解。2.內(nèi)容本身具有可比性。

以廚房故事為例，這是一個(gè)款學(xué)習(xí)西餐的App，跟Pinterest毫無(wú)關(guān)聯(lián)，卻用著同樣的布局。除了視覺(jué)美觀這樣感性的解釋之外，我們可以從別的角度來(lái)理解。

假設(shè)這樣一個(gè)場(chǎng)景，飯點(diǎn)到了，今天我想吃吃西餐，所以打開(kāi)了每日廚房，挑其中一款來(lái)作為今晚的晚餐。因?yàn)?，可能我這周就做這么一頓西餐，所以這次的選擇必須精挑細(xì)選，既要好吃，還要顏值高，更要操作簡(jiǎn)單。在每日廚房的首屏中展示了各種成品的圖片，這很好，我可以通過(guò)比較顏值來(lái)挑選我想要的。還有每款菜的收藏?cái)?shù)，這大概能體現(xiàn)這款菜的綜合評(píng)價(jià)，這也幫助我降低了選擇的難度。很快，經(jīng)過(guò)幾番的對(duì)比，我最終選擇了肉醬意面作為今晚的晚餐...

由以上場(chǎng)景可以說(shuō)明，用戶在使用這款A(yù)pp時(shí)，由于只能選擇一次，所以他不得不對(duì)比內(nèi)容。同時(shí)，易于理解的圖片和數(shù)據(jù)促成了對(duì)比這一行為。所以，雙欄卡片這樣的布局是一個(gè)很好的承載方式。

以同樣的思路，當(dāng)我們?cè)谒⑽⒉┑臅r(shí)候，我們的需求又是什么？更加便捷地跟好友或者是關(guān)注的人進(jìn)行互動(dòng)。而進(jìn)行互動(dòng)的前提是，要對(duì)內(nèi)容進(jìn)行理解性地閱讀，而不是快速地跳讀。所以在瀏覽好友動(dòng)態(tài)時(shí)的行為模型應(yīng)該如下：

上圖說(shuō)明，在展示形式至少要滿足2個(gè)條件。第一，需要承載致少兩個(gè)緯度的信息，一是讓用戶理解的內(nèi)容信息，二是讓用戶互動(dòng)的操作信息；第二，在當(dāng)前頁(yè)用戶可以對(duì)內(nèi)容進(jìn)行操作，甚至能在當(dāng)前頁(yè)把操作完成。然而，這還不能完全說(shuō)明卡片式的布局是最合理的。這需要把微博內(nèi)容的易理解性，信息的復(fù)雜度等因素綜合考慮，卡片式的布局是一個(gè)比較好的解決方案。

由于卡片式的設(shè)計(jì)形式非常多樣和靈活，適用范圍也極為廣泛。且不在這里作深入的探討。

總結(jié)

結(jié)合各布局形式的特點(diǎn)和背后的行為邏輯，我們可以得出以下結(jié)論:

當(dāng)用戶的行為模式更傾向于高效，迅速地篩選信息，列表是一個(gè)非常好的選擇。

當(dāng)用戶的行為需要反復(fù)對(duì)比信息，或者需要在單屏內(nèi)獲得更多信息，可以嘗試用雙欄卡片式布局。

當(dāng)用戶不僅僅需要消費(fèi)所展示的內(nèi)容，更愿意地對(duì)其內(nèi)容進(jìn)行互動(dòng)，那么卡片式的布局可以優(yōu)先考慮。

最后反思

本文僅僅是通過(guò)個(gè)布局形式的特點(diǎn)和背后的行為邏輯去思考布局的適用范圍，顯然，這種單一維度的思考，在實(shí)際案例中是不合適的。除了用戶的行為模式意外，需要考慮到的因素可以有：

1.各布局形式視覺(jué)流特點(diǎn)（列表是自上而下的"I"型視覺(jué)流，雙欄卡片是上下左右跳動(dòng)的"z"型視覺(jué)流）

2.信息傳達(dá)的優(yōu)先性（列表更適用于文字傳達(dá)，卡片式更適合圖片傳達(dá)）

3.布局的可延展性

4.對(duì)品牌的塑造性

5.等等

而針對(duì)每個(gè)場(chǎng)景，每個(gè)App，每個(gè)頁(yè)面，每個(gè)考慮因素的比重也是不一樣的，這需要具體問(wèn)題問(wèn)題具體分析。但無(wú)論怎樣，設(shè)計(jì)的結(jié)果可以千變?nèi)f化，但設(shè)計(jì)背后的邏輯必須是可以追本溯源的。

四、Android性能優(yōu)化總結(jié)

常用的Android性能優(yōu)化方法：

一、布局優(yōu)化：

1）盡量減少布局文件的層級(jí)。

層級(jí)少了，繪制的工作量也就少了，性能自然提高。

2）布局重用 <include標(biāo)簽>

3）按需加載：使用ViewStub,它繼承自View,一種輕量級(jí)控件，本身不參與任何的布局和繪制過(guò)程。他的layout參數(shù)里添加一個(gè)替換的布局文件，當(dāng)它通過(guò)setVisibility或者inflate方法加載后，它就會(huì)被內(nèi)部布局替換掉。

二、繪制優(yōu)化：

基于onDraw會(huì)被調(diào)用多次，該方法內(nèi)要避免兩類(lèi)操作：

1）創(chuàng)建新的局部對(duì)象，導(dǎo)致大量垃圾對(duì)象的產(chǎn)生，從而導(dǎo)致頻繁的gc，降低程序的執(zhí)行效率。

2）不要做耗時(shí)操作，搶CPU時(shí)間片，造成繪制很卡不流暢。

三、內(nèi)存泄漏優(yōu)化：

1）靜態(tài)變量導(dǎo)致內(nèi)存泄漏   比較明顯

2）單例模式導(dǎo)致的內(nèi)存泄漏 單例無(wú)法被垃圾回收，它持有的任何對(duì)象的引用都會(huì)導(dǎo)致該對(duì)象不會(huì)被gc。

3）屬性動(dòng)畫(huà)導(dǎo)致內(nèi)存泄漏  無(wú)限循環(huán)動(dòng)畫(huà)，在activity中播放，但是onDestroy時(shí)沒(méi)有停止的話，動(dòng)畫(huà)會(huì)一直播放下去，view被動(dòng)畫(huà)持有，activity又被view持有，導(dǎo)致activity無(wú)法被回收。

四、響應(yīng)速度優(yōu)化：

1）避免在主線程做耗時(shí)操作 包括四大組件，因?yàn)樗拇蠼M件都是運(yùn)行在主線程的。

2）把一些創(chuàng)建大量對(duì)象等的初始化工作放在頁(yè)面回到前臺(tái)之后，而不應(yīng)該放到創(chuàng)建的時(shí)候。

五、ListView的優(yōu)化：

1）使用convertView，走listView子View回收的一套：RecycleBin 機(jī)制

主要是維護(hù)了兩個(gè)數(shù)組，一個(gè)是mActiveViews,當(dāng)前可見(jiàn)的view,一個(gè)是mScrapViews，當(dāng)前不可見(jiàn)的view。當(dāng)觸摸ListView并向上滑動(dòng)時(shí)，ListView上部的一些OnScreen的View位置上移，并移除了ListView的屏幕范圍，此時(shí)這些OnScreen的View就變得不可見(jiàn)了，不可見(jiàn)的View叫做OffScreen的View，即這些View已經(jīng)不在屏幕可見(jiàn)范圍內(nèi)了，也可以叫做ScrapView，Scrap表示廢棄的意思，ScrapView的意思是這些OffScreen的View不再處于可以交互的Active狀態(tài)了。ListView會(huì)把那些ScrapView（即OffScreen的View）刪除，這樣就不用繪制這些本來(lái)就不可見(jiàn)的View了，同時(shí)，ListView會(huì)把這些刪除的ScrapView放入到RecycleBin中存起來(lái)，就像把暫時(shí)無(wú)用的資源放到回收站一樣。

當(dāng)ListView的底部需要顯示新的View的時(shí)候，會(huì)從RecycleBin中取出一個(gè)ScrapView，將其作為convertView參數(shù)傳遞給Adapter的getView方法，從而達(dá)到View復(fù)用的目的，這樣就不必在Adapter的getView方法中執(zhí)行LayoutInflater.inflate()方法了。

RecycleBin中有兩個(gè)重要的View數(shù)組，分別是mActiveViews和mScrapViews。這兩個(gè)數(shù)組中所存儲(chǔ)的View都是用來(lái)復(fù)用的，只不過(guò)mActiveViews中存儲(chǔ)的是OnScreen的View，這些View很有可能被直接復(fù)用；而mScrapViews中存儲(chǔ)的是OffScreen的View，這些View主要是用來(lái)間接復(fù)用的。

2）使用ViewHolder避免重復(fù)地findViewById

3)快速滑動(dòng)不適合做大量異步任務(wù)，結(jié)合滑動(dòng)監(jiān)聽(tīng)，等滑動(dòng)結(jié)束之后加載當(dāng)前顯示在屏幕范圍的內(nèi)容。

4）getView中避免做耗時(shí)操作，主要針對(duì)圖片：ImageLoader來(lái)處理(原理：三級(jí)緩存)

5）對(duì)于一個(gè)列表，如果刷新數(shù)據(jù)只是某一個(gè)item的數(shù)據(jù)，可以使用局部刷新，在列表數(shù)據(jù)量比較大的情況下，節(jié)省不少性能開(kāi)銷(xiāo)。

六、Bitmap優(yōu)化：

1）減少內(nèi)存開(kāi)支：圖片過(guò)大，超過(guò)控件需要的大小的情況下，不要直接加載原圖，而是對(duì)圖片進(jìn)行尺寸壓縮，方式是BitmapFactroy.Options 采樣，inSampleSize 轉(zhuǎn)成需要的尺寸的圖片。

2）減少流量開(kāi)銷(xiāo)：對(duì)圖片進(jìn)行質(zhì)量壓縮，再上傳服務(wù)器。圖片有三種存在形式：硬盤(pán)上時(shí)是file，網(wǎng)絡(luò)傳輸時(shí)是stream，內(nèi)存中是stream或bitmap，所謂的質(zhì)量壓縮，它其實(shí)只能實(shí)現(xiàn)對(duì)file的影響，你可以把一個(gè)file轉(zhuǎn)成bitmap再轉(zhuǎn)成file，或者直接將一個(gè)bitmap轉(zhuǎn)成file時(shí)，這個(gè)最終的file是被壓縮過(guò)的，但是中間的bitmap并沒(méi)有被壓縮。bitmap.compress(Bitmap.CompressFormat.PNG,100,bos);

七、線程優(yōu)化：

使用線程池。為什么要用線程池？

1、從“為每個(gè)任務(wù)分配一個(gè)線程”轉(zhuǎn)換到“在線程池中執(zhí)行任務(wù)”

2、通過(guò)重用現(xiàn)有的線程而不是創(chuàng)建新線程，可以處理多個(gè)請(qǐng)求在創(chuàng)建銷(xiāo)毀過(guò)程中產(chǎn)生的巨大開(kāi)銷(xiāo)

3、當(dāng)使用線程池時(shí)，在請(qǐng)求到來(lái)時(shí)間 ，不用等待系統(tǒng)重新創(chuàng)建新的線程，而是直接復(fù)用線程池中的線程，這樣可以提高響應(yīng)性。

4、通過(guò)和適當(dāng)調(diào)整線程池的大小 ，可以創(chuàng)建足夠多的線程以使處理器能夠保持忙碌狀態(tài)，同時(shí)還可以防止過(guò)多線程相互競(jìng)爭(zhēng)資源而使應(yīng)用程序耗盡內(nèi)存或者失敗。

5、一個(gè)App里面所有的任務(wù)都放在線程池中執(zhí)行后，可以統(tǒng)一管理 ，當(dāng)應(yīng)用退出時(shí)，可以把程序中所有的線程統(tǒng)一關(guān)閉，避免了內(nèi)存和CPU的消耗。

6、如果這個(gè)任務(wù)是一個(gè)循環(huán)調(diào)度任務(wù)，你則必須在這個(gè)界面onDetach方法把這個(gè)任務(wù)給cancel掉，如果是一個(gè)普通任務(wù)則可cancel，可不cancel，但是最好cancel

7、整個(gè)APP的總開(kāi)關(guān)會(huì)在應(yīng)用退出的時(shí)間把整個(gè)線程池全部關(guān)閉。

八、一些性能優(yōu)化建議：

1）避免創(chuàng)建過(guò)多對(duì)象，造成頻繁的gc

2)不要過(guò)多使用枚舉，枚舉占用的空間比整型大很多

3）字符串的拼接使用StringBuffer、StringBuilder來(lái)替代直接使用String,因?yàn)槭褂肧tring會(huì)創(chuàng)建多個(gè)String對(duì)象，參考第一條。

4）適當(dāng)使用軟引用，（弱引用就不太推薦了）

5）使用內(nèi)存緩存和磁盤(pán)緩存。

以上就是關(guān)于app頁(yè)面布局優(yōu)化建議相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。

推薦閱讀：

okpay官網(wǎng)app下載（okpay支付平臺(tái)下載）

免費(fèi)提取視頻工具（免費(fèi)提取視頻工具app）

全網(wǎng)拓客app下載

小紅書(shū)怎么付費(fèi)推廣（小紅書(shū)推廣費(fèi)用一般多少）

杭州70歲以上老人100元補(bǔ)貼（杭州70歲以上老人100元補(bǔ)貼怎么領(lǐng)）