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图。

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

  1. iOS 7: iPhone/iPad应用开发技术详解

    iOS 7: iPhone/iPad应用开发技术详解 作者:刘一道 出版社:机械工业出版社 出版年:2013-11 页数:507 定价:79.00元 ISBN:9787111440512 样章下载:h ...

  2. FPGA串口(UART)通信协议制定与设计思路详解示例

    串口(UART)通信协议制定与设计思路详解 1 概述 本文用于描述规定的串口通信协议,以及传输内容. 2 项目关于串口的要求 a) 支持BIT自检,1路UART上报BIT信息: b) 1路UART接口 ...

  3. mysql 点赞数据库设计_基于redis实现的点赞功能设计思路详解

    点赞其实是一个很有意思的功能.基本的设计思路有大致两种, 一种自然是用mysql等 数据库直接落地存储, 另外一种就是利用点赞的业务特征来扔到redis(或memcache)中, 然后离线刷回mysq ...

  4. iOS开发支付篇——内购(IAP)详解

    iOS开发支付篇--内购(IAP)详解 苹果客户端购买虚拟商品是需要走内购 先看gif图 具体步骤: 协议.税务和银行业务 信息填写 内购商品的添加 添加沙盒测试账号 内购代码的具体实现 内购的注意事 ...

  5. 网页设计中的默认字体样式详解

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  6. iOS 内购(In-App Purchase)详解

    iOS 内购(In-App Purchase)详解 概述 IAP 全称:In-App Purchase,是指苹果 App Store 的应用内购买,是苹果为 App 内购买虚拟商品或服务提供的一套交易 ...

  7. ubuntu20.0.4更新至中文环境 | 具体步骤 + 图文详解

    ubuntu20.0.4更新至中文环境 | 具体步骤 + 图文详解 1.找到 Settings 即设置 2.找到Language and Region:点击下方的 Manage installed L ...

  8. php sprintf 后面补0,PHP数字前补0的自带函数sprintf 和number_format的用法(详解)

    下面小编就为大家带来一篇PHP数字前补0的自带函数sprintf 和number_format的用法(详解).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 很多时候我们 ...

  9. iOS 7 iPhone iPad应用开发技术详解

    2019独角兽企业重金招聘Python工程师标准>>> iOS 7 iPhone iPad应用开发技术详解 本书内容全面,从 Objective-C语法知识.iOS功能特 性,到高级 ...

最新文章

  1. 错误:Error #2032解决方案
  2. python四十五:归一化继承
  3. Quartz快速入门
  4. 在linux查看内存的大小
  5. 前端面试题vue-element汇总
  6. mysql修改数据存放位置_Mysql 修改数据库存放位置
  7. 聊一聊Kaggle比赛
  8. BZOJ-2768: [JLOI2010]冠军调查(超级裸的最小割)
  9. 软件 规则引擎_如何设计软件规则引擎
  10. 微信小程序安卓和ios时间格式问题
  11. 数据分析|模糊综合评价法
  12. AutoJs学习-图灵QQ自动聊天机器人
  13. oracle归档切换,oracle 切换归档方式
  14. rails 创建_使用Rails和Icecast创建在线流媒体广播
  15. python求股票收益率_python – 有没有办法自动获取许多股票的一般信息,如市盈率,收益率等等?...
  16. 阿里巴巴1688诚信通通过市场全面分析选品策略
  17. PTA实验题:6-2 Tree类的构造函数和成员函数 (10 分)
  18. CMOS与TTL电平的区别
  19. JM(264)基础知识整理
  20. 中英文输入法的自动切换

热门文章

  1. Jenkins 用标签构建配置完后。 标签不显示
  2. 2020年8月Android手机性能榜,安卓中端手机性能排行榜-2020年8月发布
  3. c++小游戏之文字版MC
  4. 存储技术现在的困境以及未来的发展
  5. 每日一学-006 手机端rem适配(未完成)
  6. pool win10提示bad_Win10系统电脑蓝屏提示bad pool header怎么办
  7. 树莓派3 基于Ubuntu mate 16.04的调用中文输入法
  8. 福迪分享:网站建设流程(只需7步)
  9. 涂鸦智能季报图解:营收7500万美元同比增19% 增速明显放缓
  10. 百度云盘不限速下载工具(附带开源源码)