25學(xué)堂跟大家講app界面設(shè)計也有不少時日啦，也介紹了很多APP設(shè)計技巧和布局。比如APP設(shè)計的跳轉(zhuǎn)效果。自從Facebook和Path的的APP的面世，側(cè)滑菜單或是側(cè)邊欄菜單設(shè)計以及受到APPui設(shè)計師的喜愛或者追逐了。特別在小米手機(jī)或是小米的移動app產(chǎn)品上這個效果很常見！哈哈

今天，繼續(xù)跟大家小議側(cè)邊欄菜單設(shè)計要點。

真正做過APP切圖的設(shè)計師，肯定知道側(cè)邊欄菜單在iOS 6下面是很完美展示，因為狀態(tài)欄存在于20pt高且與app其他部分隔離的區(qū)域。在iOS 7中，狀態(tài)欄被覆蓋在屏幕之下。

也就是說，app和狀態(tài)欄不再是兩個獨(dú)立的區(qū)域。這回是不是讓app開發(fā)者遇到困難呢？我想不必?fù)?dān)憂。因為從iOS 6到iOS 7，狀態(tài)欄的這個改變運(yùn)用了更多屏幕空間，但在適用側(cè)滑菜單方面出現(xiàn)看了一個有趣的問題。由于狀態(tài)欄的改變，設(shè)計師們不得不向想出其他不切割狀態(tài)欄的方法看來展示頂層導(dǎo)航菜單。

想要解決這些問題，可以采用?分層和模糊 兩種方式?；蛘吣阋部梢钥纯雌渌恍?a href="http://itlnk.cn/2091.html" target="_blank">APP菜單設(shè)計。

如下圖5個APP側(cè)邊欄菜單設(shè)計：

看了上面這些優(yōu)秀的APP側(cè)邊欄菜單設(shè)計，肯定你想知道具體怎么去實現(xiàn)？

下面是實現(xiàn)的原理：在一個Activity的布局中需要有兩部分，一個是菜單(menu)的布局，一個是內(nèi)容(content)的布局。兩個布局橫向排列，菜單布局在左，內(nèi)容布局在右。初始化的時候?qū)⒉藛尾季窒蜃笃?，以至于能夠完全隱藏，這樣內(nèi)容布局就會完全顯示在Activity中。然后通過監(jiān)聽手指滑動事件，來改變菜單布局的左偏移距離，從而控制菜單布局的顯示和隱藏。

了解APP側(cè)邊欄菜單實現(xiàn)原理，以便于我們更好發(fā)揮我們的設(shè)計思路，你們說呢？

更詳細(xì)的APP側(cè)邊欄菜單設(shè)計知識擴(kuò)展：https://github.com/romaonthego/RESideMenu