剩下就只剩白色區(qū)域了，其實(shí)嚴(yán)格來(lái)說(shuō)是透明區(qū)域，這部分內(nèi)容是控件內(nèi)部的間距: 

　　如果還不懂，我們下面來(lái)舉個(gè)例子。   

　　 3.舉個(gè)例子 

    我們就來(lái)看下面這個(gè)區(qū)域怎么實(shí)現(xiàn)的： 

　　這樣，一條內(nèi)容的布局就完成，之后就往相應(yīng)的地方里面放東西就行了！ 

　　4.注意事項(xiàng) 

　　說(shuō)個(gè)注意事項(xiàng)吧，我們工作中經(jīng)常遇到的一個(gè)問(wèn)題，看下圖： 

　　兩排文字之間是有間距的（紅色部分高度12像素），但是當(dāng)我們看開(kāi)發(fā)布局的時(shí)候： 

　　 兩個(gè)文字控件之間是沒(méi)有間距的。 

　　 也就是說(shuō)，其實(shí)字體控件本身上下是帶有一定間距的，如果這時(shí)候我們還標(biāo)注間距為12像素，那實(shí)現(xiàn)出來(lái)的行間距就會(huì)比設(shè)計(jì)稿要大，所以在做效果圖標(biāo)注的時(shí)候一定考慮好，后期實(shí)現(xiàn)出來(lái)難免會(huì)有微調(diào)的情況。 

　　5.總結(jié) 

　　沒(méi)事的時(shí)候可以多看看開(kāi)發(fā)的布局情況，讓自己對(duì)頁(yè)面的實(shí)現(xiàn)有更深的了解。 

轉(zhuǎn)載于：交互設(shè)計(jì)學(xué)堂

編輯：雷蕾蕾