1.間距是多少？

　　間距是指界面元素之間的距離，可以是文本本身、圖片、組件、模塊之間的間距，也可以是界面兩邊的安全距離(比如網(wǎng)頁寬度為1920px，內(nèi)容區(qū)域?yàn)?400px，那么兩邊的安全距離為260px)。

　　作為UI設(shè)計(jì)師，設(shè)計(jì)界面中的每一個(gè)元素都需要兼顧上、下、左、右、相鄰元素的屬性來合理調(diào)整間距，利用間距的規(guī)則來組織界面內(nèi)容，從而保證信息的節(jié)奏，給用戶一種輕松、矜持的瀏覽體驗(yàn)。

　　2.間距的實(shí)際功能

　　間距可以使界面信息更有節(jié)奏感，提高內(nèi)容的可讀性，并通過不同的密度說明元素之間的關(guān)系，吸引用戶的注意力。所以在控制接口間距的時(shí)候，一定要有“更真實(shí)”的心態(tài)。任何改變和調(diào)整首先要考慮清楚為什么，能給產(chǎn)品和用戶帶來什么。做好間距，不能只停留在視覺層面，還要多方面思考。

　　設(shè)計(jì)師層面:以標(biāo)準(zhǔn)的方式定義間距，不必每個(gè)元素都考慮間距的大小，有效減少決策和思考時(shí)間，提高效率。

　　開發(fā)級別:開發(fā)可以根據(jù)基本間距定義變量。從長遠(yuǎn)來看，雖然不能細(xì)化到像素眼，但間距的倍數(shù)只能通過視覺看到。例如，基礎(chǔ)間距增加8px。當(dāng)8px，16px，24px，32px，48px等。均采用，基礎(chǔ)間距x1，x2，x3等。都是直接用于開發(fā)的，等等。在發(fā)展的眼里，肉眼一定看不出1px的區(qū)別，但卻能分辨出8px的區(qū)別。不需要每次都測量，也可以減少誤差，高度還原設(shè)計(jì)效果。

　　用戶層面:有節(jié)奏、一致的界面效果，信息的有效傳遞變得更加容易，用戶體驗(yàn)可以得到很大的提升。

　　3.間距的統(tǒng)一

　　設(shè)計(jì)的目的是提高設(shè)計(jì)師的工作效率，團(tuán)隊(duì)之間的高效溝通，保持設(shè)計(jì)風(fēng)格的高度統(tǒng)一。同樣，間距也是設(shè)計(jì)規(guī)范中非常重要的一部分。作為規(guī)范中最小的單元，如果不遵循統(tǒng)一，將直接影響界面的整體布局和版面，信息密度嚴(yán)重影響用戶瀏覽。不僅僅是設(shè)計(jì)師，還有每次面對同一個(gè)模塊都需要定義不同距離的開發(fā)者。也是破了，沒有規(guī)律可循。

　　均勻的間距可以讓界面的視覺效果更有節(jié)奏感。設(shè)計(jì)人員在設(shè)計(jì)一些類似的模塊時(shí)，可以直接重用組件。即使多人合作完成同一個(gè)項(xiàng)目或者更換成員，間距不均的問題也不會造成整個(gè)APP的風(fēng)格混亂。

　　對于開發(fā)來說，如果知道間距的使用規(guī)則，即使有小錯(cuò)誤，也可以自己改正。例如，使用8px增量，8，16，24...以此類推按照倍數(shù)的規(guī)律。如果有9的間距，開發(fā)會修正到8，15，它會修正到16，你可以自己多補(bǔ)少補(bǔ)。雖然設(shè)計(jì)師需要小心謹(jǐn)慎，盡量不要做出如此小的出入，但沒有什么是絕對的。