小议APP侧边栏菜单设计要点以及优秀界面设计欣赏

html5模板网跟大家讲app界面设计也有不少时日啦,也介绍了很多APP设计技巧和布局。比如APP设计的跳转效果。自从Facebook和Path的的APP的面世,侧滑菜单或是侧边栏菜单设计

网站模版网(www.genban.org)跟大家讲app界面设计也有不少时日啦,也介绍了很多APP设计技巧和布局。比如APP设计的跳转效果。自从Facebook和Path的的APP的面世,侧滑菜单或是侧边栏菜单设计以及受到APPui设计师的喜爱或者追逐了。特别在小米手机或是小米的移动app产品上这个效果很常见!哈哈

今天,继续跟大家小议侧边栏菜单设计要点。

真正做过APP切图的设计师,肯定知道侧边栏菜单在iOS 6下面是很完美展示,因为状态栏存在于20pt高且与app其他部分隔离的区域。在iOS 7中,状态栏被覆盖在屏幕之下。

也就是说,app和状态栏不再是两个独立的区域。这回是不是让app开发者遇到困难呢?我想不必担忧。因为从iOS 6到iOS 7,状态栏的这个改变运用了更多屏幕空间,但在适用侧滑菜单方面出现看了一个有趣的问题。由于状态栏的改变,设计师们不得不向想出其他不切割状态栏的方法看来展示顶层导航菜单。

想要解决这些问题,可以采用分层模糊 两种方式。或者你也可以看看其他一些APP菜单设计

如下图5个APP侧边栏菜单设计:

4196_131226124652_1

4196_131226124710_1 4196_131226125201_1 4196_131226125212_14196_131226130735_1侧边栏设计

4196_130603171657_1 m_1382423151321

 

看了上面这些优秀的APP侧边栏菜单设计,肯定你想知道具体怎么去实现?

下面是实现的原理:在一个Activity的布局中需要有两部分,一个是菜单(menu)的布局,一个是内容(content)的布局。两个布局横向排列,菜单布局在左,内容布局在右。初始化的时候将菜单布局向左偏移,以至于能够完全隐藏,这样内容布局就会完全显示在Activity中。然后通过监听手指滑动事件,来改变菜单布局的左偏移距离,从而控制菜单布局的显示和隐藏。

了解APP侧边栏菜单实现原理,以便于我们更好发挥我们的设计思路,你们说呢?

更详细的APP侧边栏菜单设计知识扩展:https://github.com/romaonthego/RESideMenu

 

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

25学堂今天跟大家分享12张精美的移动模型素材分享,这12张素材你可以应用在你的移动APP项目当中或者是APP官网设计当中,顿时让你的作品高大上!下面的这12张移
如今再来看扁平化APP设计,还是那么的简洁漂亮!最重要的是扁平化的移动APPUI界面简单实用,对移动设计师来说,...最近,25学堂将会推出很多漂亮的移动APP应用模板(框
有创造性的APPUI设计往往可以大幅度提升用户体验的。那么好的移动APP设计干货和APP设计规范也是新手们的渴求的干粮。25学堂秉着分享和共同学习的原则,收集了
移动APP项目名称:易配货APP 2.0移动APP项目背景:易配货是传化物流产业集团为货主与司机打造的物流信息交易平台,基于诚信会员体系和移动互联技术,为会员
iOS切图神器,我想大家都不会很陌生啦,Cutterman也是目前移动端设计人员用的比较多的一款切图工具。还有25学堂之前推荐的在线切图工具和PS切图插件推荐等。
今天25学堂的小编跟大家分享一个国外优秀的图标字体酷站,也是一个在线编辑的SVG图标素材的酷站-SmartIcons.coSmartIcons 网站是一个提供了1500+个顶级图标和内建多种