iOS 7侧边栏菜单解决方案

最新推荐文章于 2022-01-29 20:48:45 发布

u010944926

最新推荐文章于 2022-01-29 20:48:45 发布

阅读量1.5k

点赞数

分类专栏： ios

ios 专栏收录该内容

101 篇文章 0 订阅

订阅专栏

http://www.cocoachina.com/applenews/devnews/2013/1226/7612.html

虽然Facebook和Path在国内用户当中使用率并不是很高，但这两款应用对菜单的革新性设计已经被很多开发者和设计师采用。当用户点击“ Hamburger”图标打开侧边栏目，主屏幕页面会滑向屏幕的右侧（有些应用会使用向左侧滑）来展示下首屏下面的页面。

很多设计师习惯于把Facebook和Path的菜单成为侧滑菜单或者侧边栏菜单，这一设计在iOS 6和以前的系统版本中非常适用，状态栏存在于20pt高且与app其他部分隔离的区域。在iOS 7中，状态栏被覆盖在屏幕之下。换句话说，app和状态栏不再是两个独立的区域。从iOS 6到iOS 7，状态栏的这个改变运用了更多屏幕空间，但在适用侧滑菜单方面出现看了一个有趣的问题。由于状态栏的改变，设计师们不得不向想出其他不切割状态栏的方法看来展示顶层导航菜单。

我们 Two Toasters的设计师在帮客户端应用 Luvocracy针对iOS 7进行设计的时候遇到了这个挑战。我们大部分针对iOS 6的设计决策可以很容易地适用于 iOS 7的设计准则。但是侧滑菜单在iOS 7中仍是一个值得探索的领域，没有明确的对或者错。

尽管没有确定的解决方案，但我们已经找到了解决侧滑菜单的方法。在Luvocracy上实践时，我们将工作回归至绘图板，并从设计团队和苹果iOS 7原生的UI元素中收集灵感。

灵感

首先我们到 Dribbble寻找灵感。

在iOS公开发布前，Dribble上的设计师已经有了侧滑菜单的执行思路。我们的设计师偶然发现几个感觉不错并且充分利用了iOS 7属性的设计，比如分层和模糊。这些项目包括Creativedash的 iOS 7 style inspired menu，以及Jayson Lane的 Side Menu概念--展示分层和透明的设计。

虽然苹果并没有直接演示过如何执行iOS的侧边菜单，但我们从苹果原生的UI中捕捉到一些提示，并最终把它纳入我们的设计中，也就是侧边菜单的缩放过渡。

我们的解决方案

基于提到的灵感以及多方面的思考，我们通过Objective-C library创建了一个名为 TWTSideMenuViewController的项目设计方案（已经在Github上开源）。我们通过从状态栏移动和缩小主视图解决了侧边菜单栏动画问题。通过对同一视觉平面上菜单和主视图进行思考，还改进了按比例缩小问题。换句话说，在视图进行放大或者缩小时，我们改变了用户对不同区域的关注。

其他解决方案

虽然我们不能代表其他解决方案背后的灵感，但我们可以分享一些其他值得关注的可选的解决办法，比如American Airlines、Foursquare、Mailbox、Kindle以及Vesper......

American Airlines

American Airlines app和Luvocracy app使用了相当类似的模式，但是不同之处是它的动画效果和Luvocracy app略有不同，并且动画速度也不同。Luvocracy的动画效果更像从一个照相机的角度进进出出，而American Airlines app的效果更像是一个收索退缩的动画。