iOS 7侧边栏菜单解决方案

虽然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的效果更像是一个收索退缩的动画。

Foursquare

Foursquare app从状态栏后边渐渐淡出,应用并没有添加新的东西,相反是强迫旧格式应用与iOS 7。

Mailbox

Mailbox完全移除了屏幕上的状态栏信息,这是一个比较有趣的解决方案,但可能不是最好的一个,它暂时移除了屏幕上所有的状态栏信息,这可能会让苹果有点不悦,因为它可能需要访问公开API中不可用的一部分。

Kindle

访问菜单,主屏幕上的侧边栏菜单会有一个类似苹果iOS 7控制中心和通知中心的半透明效果。



Vesper

Vesper app的侧边栏动画跟iOS 6中的差不多,app仍然在状态看的后面,并没有模糊状态栏上的信息,不过这个方法可能不是理想的解决方案。

iOS 7侧边栏菜单解决方案

时间: 2024-10-07 15:22:47

iOS 7侧边栏菜单解决方案的相关文章

IOS客户端公共WIFI解决方案

一.公共WIFI综述 现在很多公司都在做免费WIFI,车站.公交.地铁.餐厅,只要是人员密集流动的地方就有WIFI,免费WIFI从最初的网页认证方式也逐渐向客户端认证方式偏移.本文主要讨论IOS认证上网的解决方案.IOS端WIFI应用的相关开发,主要存在以下问题 1.IOS系统WIFI相关的接口很少,大部分接口都是私有接口 2.在设备连接上WIFI,没有通过路由器认证前,如果关闭IOS自动弹出的Portal页面,Iphone的WIFI会自动断开 3.如何禁止IOS系统自动弹Portal页面 4.

【iOS开发-71】解决方案:Attempting to badge the application icon but haven't received permission from the...

(1)原因 一切都是iOS8捣的鬼.您如果把模拟器换成iOS7.1或者更早的,就不会有这个问题.而现在在iOS8中要实现badge.alert和sound等都需要用户同意才能,因为这些都算做Notification"通知",为了防止有些应用动不动给用户发送"通知"骚扰用户,所以在iOS8时,要"通知"必须要用户同意才行. (2)解决思路:我们判断一下,如果系统版本大于等于8.0的话,我们就在用户打开应用的时候弹出一个框框提示说我们要发送通知给你,

IOS的滑动菜单(Sliding Menu)的详细写法(附代码)

滑动菜单是一个非常流行的IOS控件 先上效果图:        这里使用github的JTReveal框架来开发,链接是https://github.com/agassiyzh/JTRevealSidebarDemo/commit/ac03d9d7be4f1392020627e5fe8c22b972de4704 我们的ViewController要实现protocol JTRevealSidebarV2Delegate的两个optional方法 @optional - (UIView *)vie

iOS下拉菜单效果实现

原文链接: iOS下拉菜单效果实现 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158

【iOS开发-101】解决方案:The file * couldn't be opened because you don't have permission to view it

(1)无缘无故出现"The file * couldn't be opened because you don't have permission to view it"错误信息. 解决办法:Window -> Organizer -> 在下面框框左面选择你的项目名字 -> 在右面有一个delete,点击删除即可.不会影响你的文件,删除后相当于从0编译第一次速度会慢一点而已. (2)产生这个问题的原因有很多,如果以上办法不起作用,那么试着看看其他解决办法. 解决办法网

[转载]iOS中侧边栏的添加

原文地址:iOS中侧边栏的添加作者:伤心的小果冻 1.添加系统框架 2.添加三方类库 3.创建一个MenuViewController作为侧边滑动时候显示的视图 //  MenuViewController.h //  sideTableView // //  Created by Dong on 13-9-26. //  Copyright (c) 2013年 dong. All rights reserved. // #import <UIKit/UIKit.h> @interface M

CSS3超酷移动手机滑动隐藏侧边栏菜单特效

这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效.这四种效果分别是:默认的点击滑动侧边栏菜单效果.带3D transforms的滑动侧边栏效果.文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果. 每一个滑动侧边栏效果都带有从右到左淡入淡出的滑动过渡效果.菜单栏中的菜单项以一个接一个的方式显示,这种效果是通过为它们分别添加 transition-delay 来实现的.下面来看看默认的滑动侧边栏效果的制作方法. 插件中使用了font-awesome

关于wordpress主题侧边栏菜单

在做中文企业网站主题是,经常需要在侧边栏中显示菜单,菜单与之间存在母子关系. 目前我的做法是: 所有菜单中使用页面,设置好页面的父子关系: 在侧边栏中自动列出当前页面下的所有子页面名和链接,具体代码如下: <?php   if($post->post_parent)       $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");

【iOS开发-27】解决方案:An error was encountered while running(Domain=FBSOpenApplicationErrorDomain, Code=4)

iOS simulator出现问题,提示: An error was encountered while running (Domain = FBSOpenApplicationErrorDomain, Code = 4) 解决方案: [iOS Simulator] >>> [Rest Contents and Settings...] >>> [Reset] 参考:解决问题