Pinterest 3.0 for iOS设计过程——升级iOS7设计思路详解

Pinterest 3.0 for iOS设计过程——升级iOS7设计思路详解

时间2013-12-11 11:39:31   苹果开发中文站  原文  http://www.cocoachina.com/macdev/uiue/2013/1211/7518.html

 

在6月的WWDC大会上，苹果发布了iOS7，iOS7重新定义了一种新的视觉设计效果，同时对UIKit做了一些改变，启用了一些新的API。4位Pinterest的开发工程师和设计组合作，重新来制作Pinterest的iOS app，让导航栏，过渡动画变得很简单，同时让用户可以通过相关的手势，比如说滑动来发现更多的pins图。

现在Pinterest 3/4的访问都是来自手机，所以3.0版本的升级很重要，需要考虑让用户可以更简单，更快速的访问到更多的Pin图，让用户体验得到一个整体的提高。我们的主要挑战就是重新构思Pinterest app，同时还要保持Pinterest品牌一直以来的美术风格。因此，我们着重考虑以下三个方面：

1.启用UICollectionView，放弃对iOS5的支持

2.采用新的iOS 7的API，包括UIViewController Transtions，Background Fetching以及UIKit Dynamics。

3.采用一个新的交互手势

启用UICollectionView

Pinterest app的核心是UICollectinView。还支持iOS5的时候，我们通过管理UIScrollView的子类来制作网格。它是模仿UITableView，并且处理了所有cell的复用以及布局。现在我们只支持iOS 6以上，所以我们现在采用UICollectionView，用它来作为app的主views。我们写了一个UICollectionViewLayout的子类来管理网格的布局，它支持多部分，头部和底部的view，以及浮动表头。

采用新的iOS7API

iOS7提供了一个新的功能强大的view controller过渡API。当用户点击一张Pin图的时候，会从网格的页面过渡到一个全屏的页面。如图：

我们希望提供一种过渡动画帮用户明白他们处于什么位置，并且增强用户的认知，告诉他们可以通过左右滑动来发现更多的Pin图。为了达到这个效果，我们使用了UINavigationControllerDelegate的animationControllerForOperation方法，提供一个UIViewControllerAnimatedTransitioning对象来运行过渡动画。

1. - (id )navigationController:(UINavigationController *)navigationController 
2.                                    animationControllerForOperation:(UINavigationControllerOperation)operation 
3.                                                 fromViewController:(UIViewController *)fromVC 
4.                                                   toViewController:(UIViewController *)toVC { 
5.      if (operation == UINavigationControllerOperationPush && [toVC isKindOfClass:[CBLPinViewController  class ]]) { 
6.          return  [[CBLPinViewTransition alloc] init]; 
7.     }  else   if (operation == UINavigationControllerOperationPop && [fromVC isKindOfClass:[CBLPinViewController  class ]]) { 
8.          return  [[CBLGridViewTransition alloc] init]; 
9.     } 
10.      return  nil; 
11. } 

在iOS6上，我们则采用默认的UINavigationController的滑动过渡。

我们还采用了iOS7的新的后台多任务模式来加载新的内容，通过这种方法，用户就不需要手动刷新他们的主页feed了。iOS7的后台多任务有两种模式，一种可以让app抓取新内容，另一种可以通过静音通知来通知用户。我们采用了抓取新内容的后台模式。

苹果官方说当OS允许app下载新内容的时候，它会在后台运行app，然后给app很短的一段时间来完成工作。这个时候，系统会调用UIApplicationDelegate的performFetchWithCompletion。我们把fetching logic（提取逻辑）用于我们的 rootViewController，然后，它使用UIBackgroundFetchResultNewData, UIBackgroundFetchResultNoData 或是 UIBackgroundFetchResultFailed来调用完整的模块。

1. - ( void )application:(UIApplication *)application performFetchWithCompletionHandler:( void  (^)(UIBackgroundFetchResult))completionHandler 
2. { 
3.     [self.rootViewController performBackgroundFetchWithCompletion:completionHandler]; 
4. } 

如果有新的Pin图，主页的feed view会升级提示有新的Pin图可以查看。由于iOS7允许可以在多任务view中更新app的截图，我们要抓住这个机会，让用户一打开app便吸引他们的注意力。

新的手势设计

随着3.0的发布，我们希望再次思考app中是使用手势的情况。年初的时候，我们给iOS的用户提供了一个动画的“Contextual”目录，长按住一幅Pin图的时候便可以快捷pin图，赞或是发送图片。我们希望以后可以将这个目录融入到app的交互中去。

这个目录的所有动画以及交互都是由CADisplayLink以及Core Animation驱动的。

我们希望可以告诉用户有新的更简单的手势交互。于是我们开始研究数据，希望可以更好的了解用户是如何使用app的。我们注意到了以下几件事:

1.用户花了很多时间来查看大图

2.用户进行了很多核心的操作，比如说是在查看大图的模式中pin图

3.通常他们会点击back按钮来回到网格的主界面，然后继续查看新的图片

因此我们决定让用户可以通过左右滑动来发现更多的pin图，这样可以减少用户的操作，让用户拥有一个更好的体验，如图。

这个view是使用一个水平的UICollectionView创建的，每个cell都使用了UIScrollViews。在scroll view中，有另一个UIColletionView来显示相关的pin图。