美文网首页GJ专题
分析iOS手机淘宝首页的设计

分析iOS手机淘宝首页的设计

作者: iHTCboy | 来源:发表于2015-07-26 22:39 被阅读4046次
手机淘宝5.3.1(哆啦a梦版) 手机淘宝5.3.1

手机淘宝的首页,信息量非常的大,展现的数据各不相同,所以要处理的逻辑非常多,所以,一直想分析它的设计,目前也找不能相关的资料,下面就是我自己要瞎说,不喜欢就走,禁喷!

使用的控件

  • 整个首页,不是用UICollectionView,就是UIScrollView构造的,至于实际用那种,简主也不知道。

细节图

首页图
  • 分隔线


    细节1
分隔线不是单色的 分隔线有白色条

根据这些图,分隔线又不是单色,应该是图片,但分隔线有小白条,我也不知道是怎么搞的了

  • 底部栏


    底部栏
分隔线有空隙 用系统自带的tabbar 系统自带的黑线

系统自带的黑线,放大后,可以看到是半透明的黑色,苹果的细节做的也是很好的。最后结论,也就是淘宝是自定义的UITabBar。

  • 层次


    竖线
竖线不是同一条线 横线和图片不是整体 横线和图片不是整体,放大后颜色有区别

可以分析出来,淘宝的每一个栏目分区里,都是一个一个堆起来的,至于是怎么样做逻辑的处理?
也就是说,每一个图片,应该跳转到那个业务,是不是写死的,还是后台可以动态设置?

6p/5s对比

在6p和5s下,对应的图片,会等比的放大。

每一个区展示的样式还不太一样
不同区,还可能是全图

技术考虑

其实,这里面我认为最难的是,快速滚动时的流畅度:

  • 如果是利用重用的cell,但因为每个区内容样式不一样,每次重用时,又要删除,会导致多区时出现一卡一卡的。
  • 如果不重用的视图,那么视图太长了,占用内存太大,不可行啊。

最后,简主也不知道淘宝如何实现的,今天就到这,等以后明白了,在回来更新~

  • 如果有什么疑问,可以在评论区一起讨论;
  • 如果有什么不正确的地方,欢迎指导!

注:本文首发于 iHTCboy's blog,如若转载,请注明来源。

相关文章

网友评论

  • 9838fe5c4fa4:分析的可以
  • 708f86098a7e: 现在 可有好的思路?求分享
    无夜之星辰:@iHTCboy 还有淘宝首页后面的collectionView是瀑布流的,这种局部瀑布流如何实现?
    无夜之星辰:@iHTCboy 想请教一下具体怎么清内存
    iHTCboy:@烂裤衩儿 目前没有好的思路。我认识滑动不卡,就是不重用这样视图就行了,然后优化内存,内存不足时清一下内存。
  • _wxx:想要用户滑动不卡,可以用runloop改变模式
    ALO羗子:@_wxx 您好,runloop模式的话能不能实现淘宝首页滑动不卡顿?
  • huluo666:淘宝首页不是h5吗
    ALO羗子:@iHTCboy 我觉得首页不是h5,点击首页里面的话应该是h5,现在有没有好的方法?
    iHTCboy:@4109243691be 我对比对了一下,苹果和安桌在细节上还是有区别,首页应该不是网页实现。里面的详细活动页面是H5

本文标题:分析iOS手机淘宝首页的设计

本文链接:https://www.haomeiwen.com/subject/mbjmqttx.html