iPhone 4.1 产品设计⽂档 1.0 ⽂档更新记录: 时间
版本号
状态
撰写⼈
修改记录
2013/10/18
0.1
Draft
庞博
撰写iPhone 4.1产品设计;
2013/10/21
0.2
ForReview
庞博
补充修改;
2013/10/23
0.3
ForReview
庞博
补充修改;
2013/10/26
0.4
ForReview
庞博
按照优先级删除部分需求; 另补充需求:增加外链⼴告需 求;
2013/10/29
0.5
ForReview
庞博
补充修复; 根据最新UI补充修改交互;
2013/10/30
0.6
Verified
庞博
删除第9个章节;
2013/10/30
0.7
Verified
庞博
修改错误;
2013/11/1
0.8
Verified
庞博
补充: 左抽屉编辑状态部分; 数据过期时,分享的显⽰; 补充刷新逻辑; 补充穿⾐助⼿形象⽂案;
2013/11/4
0.9
Verified
庞博
新⼿教程; 补充部分细节;
IPHONE 4.1 产品设计⽂档 1.0 ...............................................................................................1 1补充客户端绑定和登陆关系 ..................................................................................................5 2补充腾讯微博登陆的账号昵称显⽰ ......................................................................................5 2.1客户端上传取数据...........................................................................................................5 2.2腾讯微博的⽤户昵称显⽰...............................................................................................6 3版本合并 ..................................................................................................................................6 3.1天⽓主页...........................................................................................................................6 3.1.1国际版调整 ...............................................................................................................6 3.1.2国内版调整 ...............................................................................................................7 3.1.3天⽓主页其他调整 ...................................................................................................8 3.2左抽屉...............................................................................................................................9 3.2.1国际版左抽屉修改⽅案 ...........................................................................................9 3.3单张照⽚页⾯更多、分享按钮布局.............................................................................10 4增加新的穿⾐助⼿形象 ........................................................................................................10 4.1风风 .................................................................................................................................11 4.2穿⾐助⼿形象⽂案介绍 .................................................................................................11 5全⾯适配IOS 7 ...................................................................................................................... 12 5.1增加左右滑动以及返回⼿势.........................................................................................13 6天⽓数据更新逻辑优化以及预警提醒与显⽰ ....................................................................14 6.1修改天⽓刷新的逻辑.....................................................................................................14 7优化 ........................................................................................................................................15 7.1左抽屉增加编辑按钮.....................................................................................................15 7.2空⽓重度污染导致限⾏尾号变更.................................................................................16 7.3尾号限⾏,不限⾏时的显⽰.........................................................................................16 7.4⼆级SPLASH改为服务器控制 ........................................................................................16 7.5新浪/腾讯微博后缀修改................................................................................................16 7.6应⽤程序内权限提醒补全.............................................................................................16 7.7操作教程修改.................................................................................................................17 7.8淘宝⼊⼜修改.................................................................................................................17 7.9天⽓页⾯指数新UI ........................................................................................................18 7.10 CDN切换机制及客户端请求逻辑 .............................................................................19 7.11添加城市页⾯输⼊框内⽆内容时的状态 ...................................................................19 7.12状态栏点击效果 ...........................................................................................................19 7.13穿⾐助⼿选择页⾯的分享按钮位置调整 ...................................................................19 7.14数据过期时天⽓分享⽂案 ...........................................................................................20 8⼴告需求 ................................................................................................................................20 9活动需求 ................................................................................................................................22
10拍摄时景补充经纬度定位需求 ..........................................................................................27 11修复 ...................................................................................................................................... 27 12右滑返回上⼀页⾯总结 ...................................................................................................... 28 13新功能介绍 ..........................................................................................................................29 14统计 ...................................................................................................................................... 29 15附录 ...................................................................................................................................... 30 15.1客户端天⽓请求逻辑 ...................................................................................................30 需求背景 .........................................................................................................................30 概要设计 .........................................................................................................................30 详细设计 .........................................................................................................................31 URL列表⾥的权值 ..........................................................................................................31 权值的作⽤ .....................................................................................................................31 权值的含义 .....................................................................................................................31 权值由什么因素决定 .....................................................................................................31 服务端部署的URL列表 ..................................................................................................31 客户端对URL列表的维护 .............................................................................................32 获取URL列表 ..................................................................................................................32 更新URL列表 ..................................................................................................................32 持久化 .............................................................................................................................32 请求逻辑 .........................................................................................................................33 流程图(缺超时逻辑) .................................................................................................33 逻辑应⽤范围 .................................................................................................................34 名词解释 .........................................................................................................................34 15.2活动相关需求 ...............................................................................................................35 ⼊⼜显⽰ .........................................................................................................................35 活动介绍页⾯ .................................................................................................................36 15.3 IPHONE国际版/4.1图⽚定位地址补充需求V0.2 ........................................................41 适⽤范围.............................................................................................................................. 41 现象概述.............................................................................................................................. 41 客户端调研结果 ..................................................................................................................41 客户端取得经纬度,地址串,城市名流程...................................................................... 42 定位流程.............................................................................................................................. 43 涉及客户端原有需求修改 ..................................................................................................44 客户端上传的定位信息要包含:...................................................................................... 44 拍照页⾯定位开启提⽰语优化:...................................................................................... 44 在发布页⾯,正在定位的提⽰ ..........................................................................................44 服务端增加经纬度判断...................................................................................................... 44 WINPHONE V1.2分析概况 ...................................................................................................46 1.1现有版本统计概述.........................................................................................................46
2 内测版所需主要解决的问题总结 .......................................................................................46
1补充客户端绑定和登陆关系
如果使⽤已经绑定的新浪微博/腾讯微博登陆,解绑时此账号时,需要提⽰⽤户,如果 ⽤户解除绑定则退出登陆状态 判断流程如下:
! 退出后返回之前页⾯。
2补充腾讯微博登陆的账号昵称显⽰
凡是使⽤腾讯微博的⽤户的⽤户名均采⽤链接加昵称的形式,例如:mojichina(⼩墨) 「链接(昵称)」。分享时,@链接(昵称)。
2.1 腾讯微博登陆后,需取⽤户的短链和昵称。 即⽤户的昵称是:腾讯短链(昵称)。
2.2 ⽤户昵称显⽰短链(昵称)。 ⽐如: 程倩的短链是“woopo”,昵称是“vsd”,在我们客户端显⽰昵称为woopop(vsd)。
3版本合并
国际版MoWeather与国内版墨迹天⽓合并,实现共⽤⼀套代码。 产品组需要输出的是: • 整理共有数据以及功能; • 国内版国际版出⼀套尽量⼀致的UI; • 同时UI上进⾏全⾯并且合适的iOS 7化;
3.1 国内天⽓源与Accu共同的数据: • 实况温度; • 实况天⽓; • 温度范围; • 湿度; • ⽇出⽇落; • 风向风⼒ • 时区+时间 • 城市名 3.1.1国际版调整 天⽓主页的改动: • 增加天⽓信息发布时间:Issued xx minutes ago; • 增加⽇期显⽰,例:10/17; • 湿度与体感温度位置互换; • 每⽇详情页⾯加⼊湿度信息; • 天⽓、时景切换tab按钮统⼀改为⽂字 改动后的页⾯如下图1.1.1,需要UI设计:
! 图1.1.1:国际版天⽓页⾯ 注: • 原型中趋势图为⽰意,国际版趋势图改为⼀屏显⽰6天; • 加⼊晚上天⽓图标(以效果图为准); • 点击趋势要有按下效果; • ⽇出⽇落信息可放在最后显⽰; 3.1.2国内版调整 天⽓主页的改动: • 添加⽇出⽇落的信息(排版⾄趋势图下⾯); • 加⼊晚上天⽓图标; • 修改指数UI; 改动后的页⾯如下图1.1.2,需要UI设计:
! 图1.1.2:国内版天⽓页⾯ 注: • 最⼤的不同为添加了⽇出⽇落的信息; • 另,国内版的天⽓页⾯的指数详情样式排版重新设计,以最后UI效果为准(仅修 • •
改界⾯); ⽇出⽇落信息,可放在最后显⽰; 设计UI时需要考虑⼀屏将趋势图显⽰完整;
3.1.3天⽓主页其他调整
该页⾯其他不同处: • 共有分享项为短信分享、微信好友以及朋友圈,其他项维持⽬前各⾃的分享平台; • • • •
国际版暂不加⼊语⾳播报; 国际版不加⼊限⾏尾号以及指数页⾯; 国内版和国际版天⽓数据均为⼀屏显⽰6天,国际版滑到趋势图时要有⼀个从右向 左滑的动画效果; 每⽇详情页⾯的宽度和内容布局不同;
3.2 左抽屉标签栏改动:左抽屉统⼀统⼀标签右上⾓增加编辑(注:改为⽂字显⽰“编辑” ⾮图标)按钮,如图1.2-1所⽰。 ! 图1.2-1:左抽屉标签栏 编辑按钮的位置以及title名称的位置或需要调整,以最后效果图为准。 修改后的交互流程: • 未点击编辑按钮时, ■ 编辑拖动的操作及流程不变,但是不再显⽰拖动编辑【按钮】; ■ 滑动删除由原来的右滑出现删除按钮(效果参考iOS 7系统的相簿【相簿页⾯ 更准确】页⾯),改为左滑出现删除按钮; •
点击编辑按钮后,按钮‘! ’变为‘! ’; 此时,按住城市即可拖动(⽆需长按); ■ ■ ■
每个城市左边出现删除标识’ ! ’,点击后右边出现删除按钮(与左滑时出现 的删除按钮相同); 注,在编辑状态下出现可排序的标识,点击标识进⾏拖动的操作。进⼊其他 页⾯后回到左抽屉页⾯(如添加城市页⾯)或点击确定按钮‘! 状态回到正常状态显⽰“编辑”;
’,从编辑
补充点击编辑按钮进⼊编辑状态的动画效果: • 天⽓页⾯滑出屏幕(城市列表内容向右扩展⾄整屏); • ⼯具栏以及⼯具栏下的项⽬向下滑出当前屏幕,并且带渐隐效果; • 退出编辑状态时,效果相反; 3.2.1国际版左抽屉修改⽅案 增加Tools标签(由原来国际版固定在左抽屉下的‘Settings’改为同国内版⼀致,提出部 分选项): • 将Draft Box提出来,放在⾸位; • 增加Share Settings(分享账号管理),放在第⼆位; • 将原来的Settings替换为Preference,放在第三位; • 将Send Feedback提出来,放在第四位; • 将Rate This App提出来,放在第五位; 另,在设置页⾯(Preference)增加Profile(账号设置)选项。
3.3
单张照⽚页⾯将右上⾓的“更多”按钮,修改为iOS 7最新的按钮“!
”,点击该按钮
(原更多按钮),弹出分享选项以及举报、保存以及删除功能如下图(以最终效果图 为准):
! 图1.3-1:单张照⽚“输出”按钮
4增加新的穿⾐助⼿形象
在穿⾐助⼿选择页⾯,新增穿⾐助⼿形象: • ⼈物风风; • 需要⼈物性格的描述以及展⽰(待补充,需要UI设计展⽰的地⽅); • 麦麦和风风定义为80后的⼩夫妻; • ⼩墨定位为穿越的屌丝男; • ⼩墨妹定位为清新时尚单⾝⼥; • 穿⾐助⼿详情弹窗,需要可以显⽰更多内容(⽂字内容可上下滑动,见Path); • 详细的⾐服配置需求待补充,需要等素材; • ⼈物性格及特点,可考虑放在外⾯(设计时需注意) UI在设计该页⾯时候,需要重新为⼈物排序,另外注意: • 新增的穿⾐助⼿右上⾓要有“New”等之类的标识,以达到区分的效果;
! 图2-1:穿⾐助⼿选择页⾯ •
新上线的穿⾐助⼿,带有NEW的标识,点击⼈物打开穿⾐助⼿弹窗后,NEW的
•
标识消失; 穿⾐助⼿有NEW的标识时,左抽屉的穿⾐助⼿选项,需要带上红点(穿⾐助⼿⽆ NEW标识后,左抽屉的红点标记同时消失);
4.1 风风的素材使⽤规则与麦麦相同(待后续补充),素材更换规则请见算法的excel附件 “风风素材编号”,素材请见打包的“风风素材”。 另,4个穿⾐助⼿的性格介绍⽂案需要确定后补充。
4.2 ⼩墨妹 我是⼩墨妹,看天⽓不如看穿搭,时刻与你述说天⽓的故事!看云卷云舒,听花开花 落,我有⾃⼰的清新范⼉!
关键词:清新、感性、单⾝贵族 麦麦 我是麦麦,爱⼲净爱笑爱时尚,更爱臭美!⽆论刮风下⾬还是风和⽇丽,我都要穿出 ⾃⼰的风格! 关键词:时尚、蛇精质、80后⼩媳妇 风风 我是风风,麦麦的⽼公,每天回家都要应付⽼婆的折腾。我收⼊不⾼,但是依然在为 麦麦的理想⽽奋⽃! 关键词:坚强、好男⼈、80后⼩⽼公 ⼩墨 我是时尚达⼈⼩墨,我可以预报天⽓!⽆论阴晴冷暖,我都有我的时尚搭配哟! 关键词:屌丝、复古、可爱
5全⾯适配iOS 7
合并版本需要全⾯适配iOS7,产品组负责输出所有页⾯(重新设计),iOS组需要将国 际版以及国内版的UI全部更换。 IOS 7适配: • IOS 7、iOS 6上使⽤⼀套UI,但是状态通知的形式不⼀样(iOS 6上为左上⾓, •
iOS 7上为下滑出现通知); 单张照⽚页⾯,评论按钮的出现⽅式改为点击出现冒泡(现在是点击滑动出现按 钮),如图:
! ■
改变1:出现形式改变,出现规则不变;改变2:出现⽓泡选项后,点击其他
■
评论,⽓泡消失,但是不出现新的⽓泡(现在的逻辑是,点击其他评论,其 他评论的按钮出现); 另外注意:⽓泡默认显⽰在评论的上⽅并指向该条评论,但是上⽅空间不够
• • •
显⽰不⾜时,显⽰在该条评论的下⽅并指向评论; 增加显⽰回复按钮; ■ 所有页⾯的返回按钮,采⽤箭头的样式; icon/按钮全部更换为iOS 7风格; 分享按钮,以及分享弹框(仅单张照⽚页⾯)需要设计新的UI;
5.1 在如下页⾯增加左右滑动切换图⽚的功能: • 时景瀑布流单张照⽚; • 专题详情页⾯; • 热图瀑布流单张照⽚; • 个⼈/他⼈主页单张照⽚; • 活动的单张照⽚; 左右切换在如上所列4个情境下的上⼀张以及下⼀张照⽚,在第⼀张照⽚/专题右滑时 toast提⽰“已经是第⼀张照⽚”或“已经是第⼀个专题”,最后⼀张照⽚/专题左滑时, toast提⽰“已经是最后⼀张照⽚”或“已经是最后⼀个专题”。 增加右滑返回的⼿势: • 单张照⽚页⾯需要从屏幕边缘开始滑动才能响应,其他页⾯只要右滑即可相应返 回的⼿势; • Title bar 上的⽂字与按钮以及上层页⾯的阴影效果,需要有渐变以及滑动的效果 (跟随⼿动); 在如下页⾯响应右滑关闭: • 设置页⾯的⼦页⾯; • 预警页⾯; • 空指页⾯; • 时景页⾯商圈页⾯; • 时景页⾯单张照⽚以及单张中的任意下⼀级页⾯(如,赞列表、举报页⾯以及点 击⽤户头像后的所有层级页⾯【重要,如点击头像后进⼊个⼈主页,再点击照 ⽚,再点击头像…】); • 热图页⾯; • 热图中的单张页⾯以及单张中的任意下⼀级页⾯(同时景中的单张页⾯); • 专题页⾯以及某个专题详情页⾯; • 消息页⾯点击进⼊的单张页⾯以及单张中的任意下⼀级页⾯(同时景中的单张页 ⾯); • 个⼈主页; • 个⼈信息页⾯; • 个⼈主页单张照⽚页⾯以及单张中的任意下⼀级页⾯(同时景中的单张页⾯); • 活动页⾯、活动详情页⾯⼦页⾯;
6天⽓数据更新逻辑优化以及预警提醒与显⽰
6.1 为加快当前城市更新速度,需要当前城市优先显⽰。 ⽅案:先发当前城市请求,数据显⽰出来之后,再发其他城市请求。 切换城市,实际是当前城市的改变。当前城市在刷新时,显⽰下拉刷新条表⽰刷新状 态。例如:在当前城市刷新天⽓,刷新完毕,刷新条消失,后台继续刷新其他城市的 天⽓。此时⽤户如果切换到其他城市,该城市如果正在刷新(刷新状态未结束),则 需要显⽰下拉刷新条表⽰正在刷新(⽆法下拉)。 下拉⼿势,触发刷新请求:
! 图6.1:触发刷新条件
7优化
这⼀章节列出需要在合并版本上优化以及⼩的需求。
7.1 左抽屉增加编辑按钮,增加编辑按钮后的交互与流程请参见章节1.2(左抽屉)。
7.2 服务器会根据北京新的空⽓重度污染发布,⽽紧急⼿动修改限⾏尾号。 IOS客户端需要在天⽓页⾯的限⾏尾号显⽰,需要⽀持特殊的限⾏尾号显⽰,如下: • 限⾏尾号:1、3、5、7、9; • 限⾏尾号:2、4、6、8、0及⼆OO⼆式号牌; 服务器新增添“200数据接⼜”,客户端根据属性“hptn”来判断是否显⽰特殊的限⾏尾 号。
7.3 • •
7.4
当前,客户端在尾号不限⾏的情况下,⽆“限⾏尾号”指数项的显⽰; 修改为,在尾号不限⾏的情况下,依然需要显⽰“限⾏尾号”的指数项,此时指数 项内容显⽰“今⽇尾号不限⾏”;
Splash
⼆级Splash需要显⽰的时间更长,由当前的2.4s修改为4s(修改时需要找确认时长是否 合适); 另外,⼆级Splash需要新增⼀个操作,Splash需要响应⽤户上滑的操作(跟随⼿滑 动),⼆级Splash在⽤户上滑操作后消失,并且当天不再有⼆级Splash。
7.5
/
所有分享⾄新浪/腾讯微博的分享内容的后缀统⼀由“@墨迹天⽓”修改为“#墨迹天⽓ #”。分享项包括:天⽓、预警、空指、每⽇详情、时景单张以及穿⾐助⼿分享。
7.6 定位权限关闭时: 在发布时景页⾯,“处理中”的toast消失后,弹出框提⽰“您的定位服务未启⽤,如需开 启,请设置⼿机“隐私->定位服务””,“Please allow MoWeather to use your location services in “Privacy -> Location Services””; 拍照权限关闭时:
在⾸页/个⼈主页点击拍照按钮后,在拍照页⾯弹出框提⽰“拍照服务未启⽤,如需开 启,请设置⼿机“隐私->拍照””,“Please allow MoWeather to use your Camera in “Privacy -> Camera””; 照⽚权限: • 在时景单张页⾯,⽤户保存照⽚时,提⽰⽆权限,请设置⼿机“照⽚服务未启⽤, 请设置“隐私->照⽚””,“Please allow MoWeather to use your photos in “Privacy -> •
Photos””; ⽤户拍照正常流程⾃动为其保存照⽚,但是如果⽤户未开启权限,则给弹出框提 ⽰(只在第⼀次提⽰,并只提⽰⼀次,):“照⽚服务未启⽤,请设置“隐私->照 ⽚””,“Please allow MoWeather to use your photos in “Privacy -> Photos””;
7.7 操作教程出现逻辑:正常逻辑应该是升级⽤户不出现,新增⽤户出现操作教程。 但本次4.1版本由于情况特殊需要所有⽤户都出现⼀次操作教程; 操作教程修改: • 趋势图出现的操作教程,在第⼆条趋势图处镂空,需要⽤户点击该镂空处(⽂案 为:亲,点⼀下这⾥吧!),操作教程才能消失;同时,打开每⽇详情页; • 左抽屉页⾯的新⼿教程,改为提⽰编辑与添加城市两个按钮; • 新增单张照⽚页⾯操作教程,打开单张照⽚页⾯后,出现左右滑动下⼀张上⼀张 的提⽰;
7.8 淘宝⼊⼜需要修改采⽤下图中最后⼀幅的字样:
! 图5.6:淘宝⼊⼜
同时需要将带”NEW”淘宝⼊⼜图⽚集成完全。 ⼴告服务器空指应显⽰new时,要正常显⽰如图状态。 注:修复淘宝⼊⼜,出现⽆法点击的情况。
7.9
UI
天⽓页⾯指数UI布局修改,产品组需要输出新的天⽓指数UI。显⽰数据不做修改,在 排版布局上做调整。调整后如下(实际效果以最后UI为准):
!
交互: • 点击指数项需要有点击效果; • 点击后,详情页弹出,点击效果保持;
•
详情页关闭后,点击效果消失;
7.10 CDN 为解决CDN数据问题,采取的⽅案(其中蓝⾊为服务器⼯作): • 数据超时(⼀个半⼩时),请求默认URL; • 当请求回来的数据延时反⽽更⼤时,不更新数据; • 客户端反馈服务器所需信息,由CDN⼈⼯解决服务器数据失效的问题; • 需要校验数据的有效性,以及能不能获取到CDN结点; • 客户端需要加请求到原站以及每个URL的统计; • 服务器需要跟进需要什么数据,让客户端给反馈信息; 客户端的切换逻辑以及技术实现,请参看附录1(刘超写的⽂档)。
7.11 添加城市页⾯修改⼀个状态,即光标锁定在输⼊框后,如果将输⼊内容清空,键盘会 收回失去锁定。修改为:光标锁定在输⼊框后,如果将内容清空,键盘不收回光标继 续锁定在输⼊框。
7.12 开发所有页⾯顶部状态栏的点击效果,点击状态栏页⾯回到顶部(初始位置)。
7.13 穿⾐助⼿的详情弹框,将分享按钮改为使⽤按钮,并在该页⾯添加新的分享按钮(以 UI效果图为准)。 变动为,穿⾐助⼿详情页⾯,有分享与使⽤按钮。如下图(分享按钮的位置以最后的 UI效果图为准):
! 交互: • 点击穿⾐助⼿形象后,出现穿⾐助⼿详情弹框; • 点击使⽤按钮,弹框消失,穿⾐助⼿选择页⾯“使⽤”按钮变为“使⽤中”(其他穿 ⾐助⼿均显⽰“使⽤”按钮); ⽤户点击分享,弹出分享弹框,详情页不⽤消失;
7.14 数据出现过期时,即趋势图第⼆条柱状图不是今天,⽂案修改如下: 三天预报、实况天⽓以及五天预报的⽂案,城市名前⾯的时间(例如“今夜”)替换成 星期显⽰(例如“周五”);
8⼴告需求
配合销售部的⼴告投放需求: • 开机Splash定向时间展⽰; ■ 在服务器端控制开机Splash会出现的时间;
•
•
•
穿⾐助⼿相关(服务器控制): 穿⾐助⼿的⾐服、道具可根据特定城市展⽰; ■ 穿⾐助⼿的⾐服、道具可根据特定时间展⽰; ■ 穿⾐助⼿三句话⽂案可根据特定城市展⽰; ■ 天⽓页⾯的⽂案分享(服务器控制---后缀内容不⼀样): ■ 需要根据不同的的穿⾐助⼿展⽰特定的⽂案内容; ■ 需要根据不同的的城市展⽰特定的⽂案内容; 空指页⾯的⽂案分享(服务器控制---后缀内容不⼀样): 需要根据不同的的穿⾐助⼿展⽰特定的⽂案内容; ■ 需要根据不同的的城市展⽰特定的⽂案内容; ■
添加外链需求: • 天⽓详情位置增加图⽚外链与⽂字外链;
! •
指数频道位置增加⽂字外链;
! •
空⽓指数位置增加⽂字外链;
! 指数详情页的图⽚: 指数详情页的图⽚修改为从服务器获取。 另,注意中国天⽓⽹,最新的关于“穿⾐指数”的数据如下,需要更新数据库ID对应指 数:1炎热 、2热 、3舒适、 4较舒适、 5较冷、 6冷、 7寒冷。
9活动需求
增加活动⼊⼜,活动banner出现在当前的⼴告banner位置,出现活动时不出现⼴告。
活动页⾯需要⼀张默认图,如果活动页⾯没有图⽚,则显⽰默认图。 活动页⾯⼊⼜上的标题显⽰限制为6个字,超过则显⽰5个字及省略号:
! 活动时间段由服务器控制,不在活动时间段内,则活动不展⽰(时景页⾯刷新成功后 消失)。 活动介绍页⾯,见Android 2.43版本的需求(附录2): 点击进⼊后,
! 最热最新的定义:
最热:由“赞”最多的放在第⼀个。以赞的数量依次递减。 实时:最新的图⽚显⽰在第⼀个,以时间顺序新的排在上⾯。 活动图⽚默认为瀑布流审核通过的图⽚。 显⽰ Title bar: 左上⾓-返回按钮 中间显⽰活动名称 实时/热门切换按钮。默认进⼊时显⽰最新。 活动展⽰banner: 参与活动按钮 活动⽂字介绍:⽂字展⽰限制长度为100字。(超过100字显⽰…,中⽂字算⼀个字) 点击⽂字框,可进⼊下级页⾯—活动详情页⾯。
!
! 如果是有奖活动:在⽂字框中显⽰“奖”字样。(请UI设计⼀下) 如果不是有奖活动:不显⽰“奖”。 “奖”的控制由发布后台控制。 Banner是⼀直显⽰在顶部。 活动时景展⽰: 图⽚
赞按钮 拍摄地点 活动详情页⾯: 活动介绍内容 注意:活动介绍内容需⽀持,加粗,换⾏,链接,表情的格式。 交互: 切换:点击右上⾓切换按钮,可切换为实时/热门 ●
实时/热门切换时的显⽰: 切换时,给个刷新toast提⽰,刷新提⽰的样式⽤正⽅形的⼩框,⼩框放在屏幕中
间。 ● 实时/热门切换后的显⽰: 实时的展⽰样式:最新的放在最上⾯ 热门的展⽰样式:最热的放在最上⾯ 特殊情况:如果⽤户向下滑动后,再点击右上⾓的按钮切换,则切换的页⾯需调回顶 部。如果切回来,需要跳回⽤户之前滑动到的位置。 赞:点“赞”同热图“赞”的交互 下拉:刷新该页⾯ 下拉刷新的交互:
! 下拉刷新,title bar 下⽅提⽰正在刷新。 往上滑动取消刷新。 如果刷新后没有新的图⽚,收起刷新,不提⽰。 如果刷新不成功,弹出toast:⽹络连接失败,请稍后再试。 刷新成功的显⽰: ● 实时页⾯:按照时间倒排序 ● 热门页⾯:按照赞的个数倒排序 点击: 点击时景图⽚可查看⼤图 点击个⼈头像可进⼊个⼈主页 更新失败的显⽰:
! 墨迹LOGO 提⽰⽂字:请下拉刷新 Toast提⽰:⽹络连接失败,请稍后再试 要求: 1、参与活动的图⽚也要在城市瀑布流显⽰。 2、在活动页⾯,图⽚在屏幕上展⽰后,浏览次数+1。 3、有时进⼊了活动页⾯,没有看到这张图⽚,浏览次数不+1
10拍摄时景补充经纬度定位需求
在iPhone 4.1合并版本加⼊此补充需求,请见附录3(“iPhone国际版/4.1图⽚定位地址
”
补充需求v0.2 )。
11修复
修复现版本存在的问题如下: • 在iOS 7上,专题的间距有问题; • iOS7上,单张照⽚页⾯底⾊有问题;(ShenGe) •
个⼈主页的登陆页⾯,进⼊⼆级页⾯后⽆法返回;
• • • •
登陆页⾯,出现键盘弹出后⽆法收回的状态; 注册页⾯,键盘弹出后,需要将按钮也顶上去;XiuShan
•
允许重复举报,提⽰语为“举报成功” – “Reported successfully”;(LiuNing) 去掉iOS 6上应⽤图标的⾼光显⽰;
• • • • •
当前版本出现天⽓时景的tab和刷新状态共同存在的情况; 账号绑定页⾯,显⽰绑定的⽤户名;(LiuNing)
删除全部城市后,再次进来先添加城市,再显⽰⼆级Splash; 逐六⼩时天⽓预报,图标没有居中对齐;(ShenGe) 每⽇详情页⾯打开时,向左滑动出现卡顿;(ShenGe) 分享页⾯,⽂字以及iCon对齐;(LiuNing)
•
在时景页⾯,切换城市,背景出现⽆关⽂字;(GuoQiang) 夜晚晴的字体(⽉亮)需要变⼤,现在该字体太⼩;(GuoQiang)
• • •
使⽤两种toast, ⾃动定位城市,时景瀑布流会刷出其他城市的照⽚; 优化iPhone 4/4s,修复在 4/4s上的流畅度以及易崩溃的问题;(Peter)
•
发送⽇活跃统计数据(Peter)
•
12右滑返回上⼀页⾯总结
在如下页⾯响应右滑关闭: • 设置页⾯的⼦页⾯; • 预警页⾯; • 空指页⾯; • 时景页⾯商圈页⾯; • 时景页⾯单张照⽚以及单张中的任意下⼀级页⾯(如,赞列表、举报页⾯以及点 击⽤户头像后的所有层级页⾯【重要,如点击头像后进⼊个⼈主页,再点击照 ⽚,再点击头像…】); • 热图页⾯; • 热图中的单张页⾯以及单张中的任意下⼀级页⾯(同时景中的单张页⾯); • 专题页⾯以及某个专题详情页⾯; • 消息页⾯点击进⼊的单张页⾯以及单张中的任意下⼀级页⾯(同时景中的单张页 • • • •
⾯); 个⼈主页; 个⼈信息页⾯; 活动页⾯; 活动页⾯、活动详情页⾯等⼦页⾯;
13新功能介绍
新⼿教程页⾯,如下所⽰(⼀共四张新⼿教程):
图11-1:新⼿教程 其中最后⼀页,需要有“使⽤穿⾐助⼿”的勾选框并且展⽰穿⾐助⼿形象。勾选“使⽤穿 ⾐助⼿”以及选择穿⾐助⼿形象的逻辑与当前版本⼀致。 新⼿教程为竖滑,使⽤现在的滑动⽅式。
14统计
国内版友盟统计: • 左抽屉点击编辑按钮的次数; • 单张时景页⾯,左滑切换照⽚的次数; • 单张时景页⾯,右滑切换照⽚的次数; • 任意页⾯通过右滑返回上⼀页⾯的次数; • 点击预警提⽰⽓泡的次数; • 点击预警提⽰⽓泡右上⾓关闭按钮的次数; • 左抽屉,有预警提⽰时,点击清空该城市提⽰的次数; • 上滑⼆级Splash的次数; • 活动⼊⼜点击的次数; • 活动详情页,点击照⽚的次数; • 活动详情页,点击参与活动的次数; • 活动详情页,点击热门的次数; • 活动详情页,点击详情的次数; 国际版flurry统计: • 从天⽓左滑进⼊时景的次数; • 从时景左滑进⼊右抽屉的次数; • 从时景右滑进⼊天⽓的次数; • 在时景页⾯点击头像进⼊右抽屉的次数; • 在天⽓页⾯点击拍照按钮的次数; • 在时景页⾯点击拍照按钮的次数; • 右抽屉页⾯点击个⼈主页的次数; • 右抽屉页⾯点击消息的次数;
• • • • • • • • • •
时景页⾯下拉刷新的次数; 消息页⾯下拉刷新的次数; 个⼈主页点击头像的次数; 个⼈主页点击照⽚的次数; 左抽屉点击编辑按钮的次数; 左抽屉点击编辑按钮的次数; 单张时景页⾯,左滑切换照⽚的次数; 单张时景页⾯,右滑切换照⽚的次数; 任意页⾯通过右滑返回上⼀页⾯的次数; 上滑⼆级Splash的次数;
15附录
15.1 需求背景
⽬前天⽓请求是从CDN⽹络获取,使⽤过程中遇到⼀些问题: • ⼀家CDN覆盖的区域⽆法做到很全⾯,导致⼀些地点的⽤户请求失 败,⽆法更新天⽓ • CDN的主动数据同步经常失效,导致⼀些节点上的数据是历史值, ⽤户⽆法获取最新的天⽓数据 因此,我们希望能够使⽤多家CDN来互补⽹络结构上的不⾜,当⼀家的⽹ 络⽆法访问的时候去尝试访问另⼀家;当访问到的数据过旧时,可以继续 尝试请求⼀些更新的数据。 概要设计
由服务端维护⼀个URL的list,客户端使⽤list中的URL进⾏天⽓数据请求, 如果请求失败就继续请求list中其它的URL,直到对list轮询完毕或者请求数 据成功,考虑到某地⽤户可能对该list中的特定URL访问成功率较⾼,所以 我们对每个URL增加权值的属性,便于⽤户优先访问他更易连通的URL。 另外需要考虑该⽤户访问所有CDN均失败的情形,此时需要给他提供⼀个 更易连通的机房URL,这个URL访问起来虽然很稳定,但是由于成本较 ⾼,不适合⼤量访问,所以我们不让这个URL具备权值的属性,即永远只 是在list中的URL访问都失败的情况下才对它进⾏访问,将这种URL命名为 “兜底URL”。
这⾥对请求失败的定义不仅是指⽹络出错或服务器返回业务错误,还包括 天⽓数据过旧,当天⽓数据过旧的时候,我们会继续访问list中的其它URL 和兜底URL,直⾄访问到正常的天⽓数据或所有URL访问完毕。如果所有 URL都轮询完毕仍没有正常的数据,则持久化该请求事务中更新时间最近 的⼀份数据,并展⽰给⽤户,本地原有的数据也参与这个更新时间的排序 操作。 详细设计 URL列表⾥的权值 权值的作⽤
我们会对URL列表中每个URL设置权值,如:1、2、3, 权值的⾼低决定 了天⽓请求时访问的顺序,优先使⽤权值⾼的URL进⾏请求。 权值的含义
⼀个URL的权值的⾼低代表者这个URL在这台设备上的历史请求成功 率。 权值由什么因素决定
• •
服务器的可以统⼀下达设置权值的指令,详见下⽂ 请求的成功或失败会影响权值,请求失败时权值减1,请求成功 时权值加1,最⼩值为0,最⾼值为3。
服务端部署的URL列表
在global setting请求的返回信息⾥增加weatherDomains 节点: <weatherDomains lastUpdateTime="1365759784403"> <domain value="cdn.moji001.com" recommend="true" /> <domain value="cdncc.moji001.com" /> <defaultDomain value="117.135.138.140" /> </weatherDomains> • 这⾥list⾥URL的个数是不固定的。 • lastUpdateTime是域名序列更新时间,如果本次更新时间⽐上次 更新时间晚,那么才会去更新本地保存的域名数组。
• •
•
recommend 为推荐标志位,如果为true,那么对应的域名的优 先级为最⾼3.其余域名的优先级为0。 defaultDomain为兜底域名,每次请求都是有当domain节点代表 的域名序列中的所有域名都请求失败的时候,才使⽤兜底域名, 并且兜底域名不参与权值的加减。 域名优先级分为4个级别:0、1、2、3。3为优先级最⾼。
客户端对URL列表的维护 获取URL列表
程序初始化时会先尝试从本地读取URL列表数据,当本地没有可⽤的 数据时,程序会把⼀个固定域名http://cdn.moji001.com加⼊到空的URL 列表⾥,供天⽓请求使⽤。 程序每天会⽤global setting 请求的返回值去更新本地的URL列表, 更新URL列表
从global setting请求成功后,判断是否需要更新的逻辑如下: • 如果本次服务器更新时间⽐上⼀次更新(已本地化)时间晚,⽽ 且本地有之前的域名信息数组,则将其按照预设的规则对本地 域名信息数组进⾏更新 • 如果更新时间相同,则不对本地域名数组进⾏任何处理 更新逻辑如下: (把服务器下发的域名列表表⽰成A,本地历史域名列表表⽰ 成B) • 把服务器下发的域名列表做为新的本地URL队列,然后对该队 列的权值进⾏维护:该队列中属于A却不属于B的URL,给予权 值0,该队列中属于A又属于B的URL,按B的权值进⾏赋值。 • 检查该队列中是否有推荐域名,如果没有,则权值不发⽣变化, 该队列就作为最新的URL队列进⾏使⽤。如果有,则把该推荐 域名的权值设置为最⾼值3,再将其他域名的权值减1。 • 兜底域名的更新则是直接替换原来的就可以 持久化
遵循NSCoding协议,持久化到⽬录: / Documents/cdnDomainArray.dat
请求逻辑
•
• • •
当城市A进⾏天⽓请求事务时,先对当前的URL列表和兜底URL做⼀ 个快照,然后从快照中选取URL发起请求,请求成功则请求事务以 成功结束,请求失败就继续使⽤快照中其它未使⽤的URL进⾏请 求。从快照中选取 URL的先后顺序: 先根据权值从⾼到低使⽤URL列 表中的URL,当URL列表遍历完毕后使⽤兜底URL。 事务中单个请求成功的条件:正确收到服务器应答 和 解析出的数据 是正确的 和 且数据的更新时间(serverts字段)是在1个⼩时内。 事务中单个请求失败的条件: 请求⽆应答 或 请求返回的数据⽆效 或 数据的更新时间(serverts字段)超过1个⼩时 快照内的URL因失败轮询完毕后需要做的业务处理:如果事务中存 在因数据超期⽽被判定为失败的单个请求,就把这些数据加⼊到⼀ 个列表⾥,同时把本地数据(如果有的话)加⼊到这个列表⾥,按 更新时间排序,展⽰给⽤户更新时间最近的数据。
流程图(缺超时逻辑)
逻辑应⽤范围
• •
请求固定ID城市的天⽓数据 请求⾃动定位城市的天⽓数据
名词解释
上次更新时间: 指最近⼀次从global setting应答⾥成功更新 URL列表 时,lastUpdateTime字段的值。 • URL列表:URL列表中的URL参与权值的运算,具体对应返回信息的这 ⾥: <domain value="cdn.moji001.com" recommend="true" /> • 兜底URL: 所有cdn域名数组请求都失败了之后才会去使⽤的域名,是最 可靠的域名,保底的天⽓请求⽅案。兜底域名没有权值的概念,不参与 权值的加减。具体对应返回信息的这⾥ : <defaultDomain value="117.135.138.140" /> 数据的更新时间: 服务器从数据源⽹站获取数据后⽣成xml数据的时间 •
15.2 ⼊⼜显⽰
!
⼊⼜在时景页⾯:
!
! 显⽰: 活动标题:图⽚上的⽂字限制为5个字,第六个字显⽰为… 活动时间段 特殊情况:如果有⼴告和活动同时存在的时候,⼴告的banner显⽰在活动的上 ⽅
! 活动显⽰规则: 服务器活动发布后台,会提前设置好活动时间,如果在活动时间内,活动⼊⼜ 就会展⽰,如果不在活动时间内,活动⼊⼜就不再进⾏展⽰。 活动介绍页⾯
点击进⼊后,
! 最热最新的定义: 最热:由“赞”最多的放在第⼀个。以赞的数量依次递减。 实时:最新的图⽚显⽰在第⼀个,以时间顺序新的排在上⾯。 活动图⽚默认为瀑布流审核通过的图⽚。
显⽰ Title bar: 左上⾓-返回按钮 中间显⽰活动名称 实时/热门切换按钮。默认进⼊时显⽰最新。 活动展⽰banner: 参与活动按钮 活动⽂字介绍:⽂字展⽰限制长度为100字。(超过100字显⽰…,中⽂字算⼀
个字) 点击⽂字框,可进⼊下级页⾯—活动详情页⾯。
!
! 如果是有奖活动:在⽂字框中显⽰“奖”字样。(请UI设计⼀下) 如果不是有奖活动:不显⽰“奖”。 “奖”的控制由发布后台控制。 Banner是⼀直显⽰在顶部。 活动时景展⽰: 图⽚ 赞按钮 拍摄地点 活动详情页⾯: 活动介绍内容 注意:活动介绍内容需⽀持,加粗,换⾏,链接,表情的格式。 交互: 切换:点击右上⾓切换按钮,可切换为实时/热门 ● 实时/热门切换时的显⽰:
切换时,给个刷新toast提⽰,刷新提⽰的样式⽤正⽅形的⼩框,⼩框放在 屏幕中间。 ● 实时/热门切换后的显⽰: 实时的展⽰样式:最新的放在最上⾯ 热门的展⽰样式:最热的放在最上⾯ 特殊情况:如果⽤户向下滑动后,再点击右上⾓的按钮切换,则切换的页⾯需 调回顶部。如果切回来,需要跳回⽤户之前滑动到的位置。 赞:点“赞”同热图“赞”的交互 下拉:刷新该页⾯ 下拉刷新的交互:
! 下拉刷新,title bar 下⽅提⽰正在刷新。 往上滑动取消刷新。 如果刷新后没有新的图⽚,收起刷新,不提⽰。
如果刷新不成功,弹出toast:⽹络连接失败,请稍后再试。 刷新成功的显⽰: ● 实时页⾯:按照时间倒排序 ● 热门页⾯:按照赞的个数倒排序 点击: 点击时景图⽚可查看⼤图 点击个⼈头像可进⼊个⼈主页 更新失败的显⽰:
! 墨迹LOGO 提⽰⽂字:请下拉刷新 Toast提⽰:⽹络连接失败,请稍后再试 要求: 1、参与活动的图⽚也要在城市瀑布流显⽰。 2、在活动页⾯,图⽚在屏幕上展⽰后,浏览次数+1。 有时进⼊了活动页⾯,没有看到这张图⽚,浏览次数不+1 活动页⾯后台控制需求,见附件“服务器后台需求”部分
15.3 iPhone
/4.1
v0.2
iPhone国际版,iPhone国内版
墨迹天⽓在没有⽹络信号条件下,拍完时景以后没有地址,草稿箱上传也没有地址; 所以就算⽹络没有信号,在传时景的时候,要把GPS信号提出来,然后再转化成地址 存进去。 但是苹果⼿机只要开了GPS拍摄的照⽚,就可以在电脑上取到地址的。 所以这个地⽅可以做优化。
iPhone开GPS权限时,客户端即可以取得经纬度。 飞⾏模式关,有⽹络连接,可以取得经纬度并通过经纬度取得地址串; 飞⾏模式关,没有⽹络连接,可以取得经纬度,不能取得地址串; iPhone不开GPS权限,客户端不能取得经纬度
! 客户端取得定位信息的情况: 1. 如果GPS未开启,则什么都取不到; 2. 如果GPS开启,取经纬度并保存在客户端 3. 如果⽹络连接成功,取地址串并保存在客户端
! 发布时,定位信息的三种情况: 1. 如果能取到地址串,则保存地址串,发布时直接上传地址串; 2. 如果能取到经纬度,则保存经纬度; 草稿箱上传时,使⽤经纬度取得地址串。 3. 如果没有经纬度,则只存⽤户拍照时的所选城市,发布时直接上传所选城市。 下⼀版:此时⽤户可以点击选择⼀个城市
地址串(可以为空) 经纬度(可以为空) 城市名(不能为空)
提⽰“您没有开启GPS定位权限,如不开启您拍摄的照⽚将可能不能发送到正确的 城市。开启⽅法……”(省略号是原来写的开启⽅案)
如果在定位中,或者正在⽤经纬度取得地址串提⽰⽤户“正在定位”, 如果此时⽤户点击“发布”按钮,提⽰“正在定位拍照地址,请稍后发送”。 定位失败或者成功后,可以正常发送。
服务器增加经纬度判断流程:
! 增加了经纬度的流程
WinPhone v1.2分析概况 1.1现有版本统计概述 现有版本Winphone v1.2.0.1于11⽉发版 WinPhone v1.2.0.1新增⽤户统计
1.
过去30天的新增⽤户量在1600上下 最⾼量为12⽉15⽇的1921。
最低位12⽉24⽇的1309。 基本趋势相对⽐较平稳。 最近今天成上升趋势,主要是由于全国有降温预警,已经北⽅⼤部分有雾霾预警。
2.
过去30天的⽤户活跃度在6W上下 最⾼量为12⽉7⽇的66833。
最低位12⽉31⽇的46094。 基本趋势和android与ios相符 最近今天成上升趋势,主要是由于全国有降温预警,已经北⽅⼤部分有雾霾预警。
2 内测版所需主要解决的问题总结 [1]: 版权信息修改成2014 [2]: 修复了后台⽆法⾃动更新. [测试⽅法 拼接磁贴 数量为3个. 并设置锁屏 半个⼩时内 不要打开应⽤ 半⼩时后看磁贴和锁屏时间点来判断是否更新] [3]: 修复进⼊设置页⾯卡顿 不流畅 问题. [4]: 修复了后台天⽓数据温度的格式. 当设置界⾯设置温度为华⽒度. 后台更新过来数据也 随着配置温度格式改变.
[5]: 重写⾃动定位. 增加了⾃动重连机制. 请测试⾃动定位是否能够在4s 成功获取数据. ⽤ 户反馈徐州⼀直⽆法定位成功. [6]: 磁贴更新时间去掉了年份. [7]: 磁贴上风⼒ 中⽂磁贴对应的单位是风⼒ 英⽂对应的KMPH [8]: 国际版磁贴天⽓字符串太长 盖住了后⾯风⼒数据. [9]: 中磁铁和⼤磁铁背⾯ 污染字数为三位数 显⽰位置不居中 [10]: 中磁铁和⼤磁铁背⾯ 在没有指数时 显⽰⽆天⽓数据. [11]: ⾃动定位 更新天⽓数据时崩溃. [12]: ⾃动定位磁贴 ⽆法通过后台更新 [13]: 锁屏设置页⾯ 对应英⽂版本 原来的3day 改成5day.