欢迎界面:

appIcon(自己用sketch画的) 程序启动后,json成功加载前,小绿点闪烁表示加载;成功加载json初始数据后,绿点扩大消失,并加载首页

menu按钮:

全局存在的menu按钮

menu按钮是一个存在于所有controller的按钮(包括首页与详情页)

为此将按钮进行了封装设计:

menu按钮,作为一个uiview,当任意controller将它作为subview添加进来时,controller就拥有了通过对menuButton的点击,拖拽,展示背后的menuController的能力;

背后的menuController 为appDelegate所持有,全局只存在一个,它的view被放在App的keyWindow之上,在rootViewController之下,当用户在操作界面点击menuButton或拖拽时候,将rootViewController下移,便露出了底下的menuController

关于动画实现: 当用户拖拽界面上的menuButton时,封装起来的menuButton将会对手势进行处理:计算手势移动的百分比,并通知menuController将动画展示到相应位置.在拖拽手势速度较快时,便打开或者关闭menuController.

browseRecord浏览记录界面:右侧的界面记录着用户最近浏览的20件商品(下文有展开)

menu界面的设计亮点:

为拥有沉浸式体验的app提供了一个便捷的入口,用户在任何情况下都可以便捷的打开进入(即使当导航条隐藏时,仍有边缘拖拽手势可以进入menu).

menu代替了tabBar,也拥有了更丰富的扩展性,各个模块的切换,用户详情页,包括个人认为最常用到的搜索按钮,都存在于此界面中.

沉浸式的体验使menuButton成为用户目所能及的唯一可扩展入口,所以也不用担心用户原本的用户习惯会找不到搜索按钮等功能.

宝贝详情页面

同样带有小绿点缓冲行为,获取到json后动画展开界面

BrowseRecordView(宝贝浏览记录)

存在于menuController中的宝贝浏览记录条

BrowseRecord记录了用户浏览的近20件商品,在menuView中展示.

当商品详情页被成功加载(也就是用户成功浏览了此商品后),以menuButton作为媒介,传递到menucontroller进行更新并展示记录(去重),并将记录进行存档,下次打开时,记录仍存在.

当用户点击menuController的浏览记录:menuController选择将新的界面push到navigationController中,并将自己收起.

小细节

拖拽页面时,表头始终与页面顶部对齐,既能让用户能把目光聚焦于表头,且不会露出底下的底色影响沉浸式体验 顶部navigationBar渐变显示出来,当用户向上向下滑动的比较快时,选择隐藏或展示顶部的栏,从而全屏展示商品信息