Pinterest 3.0 for iOS设计过程——升级iOS7设计思路详解
Pinterest 3.0 for iOS设计过程——升级iOS7设计思路详解
在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对象来运行过渡动画。
- - (id )navigationController:(UINavigationController *)navigationController
- animationControllerForOperation:(UINavigationControllerOperation)operation
- fromViewController:(UIViewController *)fromVC
- toViewController:(UIViewController *)toVC {
- if (operation == UINavigationControllerOperationPush && [toVC isKindOfClass:[CBLPinViewController class ]]) {
- return [[CBLPinViewTransition alloc] init];
- } else if (operation == UINavigationControllerOperationPop && [fromVC isKindOfClass:[CBLPinViewController class ]]) {
- return [[CBLGridViewTransition alloc] init];
- }
- return nil;
- }
在iOS6上,我们则采用默认的UINavigationController的滑动过渡。
我们还采用了iOS7的新的后台多任务模式来加载新的内容,通过这种方法,用户就不需要手动刷新他们的主页feed了。iOS7的后台多任务有两种模式,一种可以让app抓取新内容,另一种可以通过静音通知来通知用户。我们采用了抓取新内容的后台模式。
苹果官方说当OS允许app下载新内容的时候,它会在后台运行app,然后给app很短的一段时间来完成工作。这个时候,系统会调用UIApplicationDelegate的performFetchWithCompletion。我们把fetching logic(提取逻辑)用于我们的 rootViewController,然后,它使用UIBackgroundFetchResultNewData, UIBackgroundFetchResultNoData 或是 UIBackgroundFetchResultFailed来调用完整的模块。
- - ( void )application:(UIApplication *)application performFetchWithCompletionHandler:( void (^)(UIBackgroundFetchResult))completionHandler
- {
- [self.rootViewController performBackgroundFetchWithCompletion:completionHandler];
- }
如果有新的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设计思路详解相关推荐
- iOS 7: iPhone/iPad应用开发技术详解
iOS 7: iPhone/iPad应用开发技术详解 作者:刘一道 出版社:机械工业出版社 出版年:2013-11 页数:507 定价:79.00元 ISBN:9787111440512 样章下载:h ...
- FPGA串口(UART)通信协议制定与设计思路详解示例
串口(UART)通信协议制定与设计思路详解 1 概述 本文用于描述规定的串口通信协议,以及传输内容. 2 项目关于串口的要求 a) 支持BIT自检,1路UART上报BIT信息: b) 1路UART接口 ...
- mysql 点赞数据库设计_基于redis实现的点赞功能设计思路详解
点赞其实是一个很有意思的功能.基本的设计思路有大致两种, 一种自然是用mysql等 数据库直接落地存储, 另外一种就是利用点赞的业务特征来扔到redis(或memcache)中, 然后离线刷回mysq ...
- iOS开发支付篇——内购(IAP)详解
iOS开发支付篇--内购(IAP)详解 苹果客户端购买虚拟商品是需要走内购 先看gif图 具体步骤: 协议.税务和银行业务 信息填写 内购商品的添加 添加沙盒测试账号 内购代码的具体实现 内购的注意事 ...
- 网页设计中的默认字体样式详解
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
- iOS 内购(In-App Purchase)详解
iOS 内购(In-App Purchase)详解 概述 IAP 全称:In-App Purchase,是指苹果 App Store 的应用内购买,是苹果为 App 内购买虚拟商品或服务提供的一套交易 ...
- ubuntu20.0.4更新至中文环境 | 具体步骤 + 图文详解
ubuntu20.0.4更新至中文环境 | 具体步骤 + 图文详解 1.找到 Settings 即设置 2.找到Language and Region:点击下方的 Manage installed L ...
- php sprintf 后面补0,PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
下面小编就为大家带来一篇PHP数字前补0的自带函数sprintf 和number_format的用法(详解).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 很多时候我们 ...
- iOS 7 iPhone iPad应用开发技术详解
2019独角兽企业重金招聘Python工程师标准>>> iOS 7 iPhone iPad应用开发技术详解 本书内容全面,从 Objective-C语法知识.iOS功能特 性,到高级 ...
最新文章
- 错误:Error #2032解决方案
- python四十五:归一化继承
- Quartz快速入门
- 在linux查看内存的大小
- 前端面试题vue-element汇总
- mysql修改数据存放位置_Mysql 修改数据库存放位置
- 聊一聊Kaggle比赛
- BZOJ-2768: [JLOI2010]冠军调查(超级裸的最小割)
- 软件 规则引擎_如何设计软件规则引擎
- 微信小程序安卓和ios时间格式问题
- 数据分析|模糊综合评价法
- AutoJs学习-图灵QQ自动聊天机器人
- oracle归档切换,oracle 切换归档方式
- rails 创建_使用Rails和Icecast创建在线流媒体广播
- python求股票收益率_python – 有没有办法自动获取许多股票的一般信息,如市盈率,收益率等等?...
- 阿里巴巴1688诚信通通过市场全面分析选品策略
- PTA实验题:6-2 Tree类的构造函数和成员函数 (10 分)
- CMOS与TTL电平的区别
- JM(264)基础知识整理
- 中英文输入法的自动切换
热门文章
- Jenkins 用标签构建配置完后。 标签不显示
- 2020年8月Android手机性能榜,安卓中端手机性能排行榜-2020年8月发布
- c++小游戏之文字版MC
- 存储技术现在的困境以及未来的发展
- 每日一学-006 手机端rem适配(未完成)
- pool win10提示bad_Win10系统电脑蓝屏提示bad pool header怎么办
- 树莓派3 基于Ubuntu mate 16.04的调用中文输入法
- 福迪分享:网站建设流程(只需7步)
- 涂鸦智能季报图解:营收7500万美元同比增19% 增速明显放缓
- 百度云盘不限速下载工具(附带开源源码)