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

手机淘宝5.3.1(哆啦a梦版)

手机淘宝5.3.1

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

使用的控件

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

细节图

首页图

• 分隔线

  
  
  

  细节1

分隔线不是单色的

分隔线有白色条

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

• 底部栏

  
  
  

  底部栏

分隔线有空隙

用系统自带的tabbar

系统自带的黑线

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

• 层次

  
  
  

  竖线

竖线不是同一条线

横线和图片不是整体

横线和图片不是整体，放大后颜色有区别

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

6p/5s对比

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

每一个区展示的样式还不太一样

不同区，还可能是全图

技术考虑

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

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

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

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

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