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

简介: 手机淘宝5.3.1(哆啦a梦版)手机淘宝5.3.1手机淘宝的首页,信息量非常的大,展现的数据各不相同,所以要处理的逻辑非常多,所以,一直想分析它的设计,目前也找不能相关的资料,下面就是我自己要瞎说,不喜欢就走,禁喷!使用的控件整个首页,不是用UICollectionView,就是UIScrollView构造的,至于实际用那种,简主也不知道。
img_bb75a95753b3138ab408aa9bfde8b3a9.png
手机淘宝5.3.1(哆啦a梦版)
img_e7743c0a661c0c0daef13546a29adf19.png
手机淘宝5.3.1

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

使用的控件

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

细节图

img_fd9c4c8dbb1b81529ee051998a6a076e.png
首页图
  • 分隔线


    img_667dbdb90e7224d2d9f49fb37147087f.png
    细节1
img_9bbc25761e5d7d1f9f553811d02ec35c.png
分隔线不是单色的
img_041135e59579c87c9d626cb1e6cc6aa9.png
分隔线有白色条

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

  • 底部栏


    img_e01ccf9069d77ea0d23af749e0b64b97.png
    底部栏
img_741c01bc918f472aea052ab4f770c8dd.png
分隔线有空隙
img_f7e654413a410b13c55660d470ceb66d.png
用系统自带的tabbar
img_3bc634eaa7b89c163e6cc618d9f43ead.png
系统自带的黑线

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

  • 层次


    img_58b2eb3b4f050982258a9b302713ad99.png
    竖线
img_3bcaca8163b90ffa91f5ce250be7409e.png
竖线不是同一条线
img_02a206ae9a3c110b5bafa2ab333ecd45.png
横线和图片不是整体
img_36873541f721f9daae9446299d91da14.png
横线和图片不是整体,放大后颜色有区别

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

img_77a6f99da29926a9aff1b75c257408d4.jpe
6p/5s对比

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

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

img_a564e8683c170c020c3fe3106142924c.png
不同区,还可能是全图

技术考虑

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

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

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

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


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

目录
相关文章
|
12天前
|
安全 Android开发 数据安全/隐私保护
深入探讨iOS与Android系统安全性对比分析
在移动操作系统领域,iOS和Android无疑是两大巨头。本文从技术角度出发,对这两个系统的架构、安全机制以及用户隐私保护等方面进行了详细的比较分析。通过深入探讨,我们旨在揭示两个系统在安全性方面的差异,并为用户提供一些实用的安全建议。
|
1月前
|
数据采集 数据挖掘 UED
电商平台手机销售数据采集与分析
随着科技的进步,尤其是手机的普及,国民生活变得更加便捷。现今,手机销售已从传统的实体店模式转向电商平台,这一转变加剧了市场竞争,给手机厂商带来了新的挑战。为了应对挑战,电商平台越来越重视手机销售情况与用户体验,利用数据分析成为了解市场趋势的关键手段。本章节聚焦于某电商平台的手机销售及售后数据收集,通过深入分析商品销售状况与用户反馈,旨在探索有效的营销策略,助力电商平台与手机行业的共同进步。
66 1
|
2月前
|
开发工具 Android开发 Swift
安卓与iOS开发环境对比分析
在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统无疑是主角。它们各自拥有独特的特点和优势,为开发者提供了不同的开发环境和工具。本文将深入浅出地探讨安卓和iOS开发环境的主要差异,包括开发工具、编程语言、用户界面设计、性能优化以及市场覆盖等方面,旨在帮助初学者更好地理解两大平台的开发特点,并为他们选择合适的开发路径提供参考。通过比较分析,我们将揭示不同环境下的开发实践,以及如何根据项目需求和目标受众来选择最合适的开发平台。
51 2
|
20天前
|
安全 搜索推荐 Android开发
Android vs. iOS:解锁智能手机操作系统的奥秘####
【10月更文挑战第21天】 在当今这个数字化时代,智能手机已成为我们生活中不可或缺的伙伴。本文旨在深入浅出地探讨两大主流操作系统——Android与iOS的核心差异、优势及未来趋势,帮助读者更好地理解这两个平台背后的技术哲学和用户体验设计。通过对比分析,揭示它们如何塑造了我们的数字生活方式,并展望未来可能的发展路径。无论您是技术爱好者还是普通用户,这篇文章都将带您走进一个充满创新与可能性的移动世界。 ####
33 3
|
1月前
|
SQL 存储 数据可视化
手机短信SQL分析技巧与方法
在手机短信应用中,SQL分析扮演着至关重要的角色
|
23天前
|
Android开发 iOS开发 UED
安卓与iOS的较量:谁才是智能手机市场的王者?
本文将深入探讨安卓和iOS两大智能手机操作系统之间的竞争关系,分析它们各自的优势和劣势。通过对比两者在市场份额、用户体验、应用生态等方面的表现,我们将揭示出谁才是真正的市场领导者。无论你是安卓粉丝还是iOS忠实用户,这篇文章都将为你提供一些有趣的观点和见解。
|
2月前
|
安全 Android开发 数据安全/隐私保护
探索安卓与iOS的安全性差异:技术深度分析与实践建议
本文旨在深入探讨并比较Android和iOS两大移动操作系统在安全性方面的不同之处。通过详细的技术分析,揭示两者在架构设计、权限管理、应用生态及更新机制等方面的安全特性。同时,针对这些差异提出针对性的实践建议,旨在为开发者和用户提供增强移动设备安全性的参考。
136 3
|
1月前
|
开发工具 Android开发 Swift
安卓与iOS开发环境的差异性分析
【10月更文挑战第8天】 本文旨在探讨Android和iOS两大移动操作系统在开发环境上的不同,包括开发语言、工具、平台特性等方面。通过对这些差异性的分析,帮助开发者更好地理解两大平台,以便在项目开发中做出更合适的技术选择。
|
2月前
|
安全 Linux Android开发
探索安卓与iOS的安全性差异:技术深度分析
本文深入探讨了安卓(Android)和iOS两个主流操作系统平台在安全性方面的不同之处。通过比较它们在架构设计、系统更新机制、应用程序生态和隐私保护策略等方面的差异,揭示了每个平台独特的安全优势及潜在风险。此外,文章还讨论了用户在使用这些设备时可以采取的一些最佳实践,以增强个人数据的安全。
|
3月前
|
Java 开发工具 Android开发
安卓与iOS开发环境对比分析
【8月更文挑战第20天】在移动应用开发的广阔天地中,Android和iOS两大平台各自占据着重要的位置。本文将深入探讨这两种操作系统的开发环境,从编程语言到开发工具,从用户界面设计到性能优化,以及市场趋势对开发者选择的影响。我们旨在为读者提供一个全面的比较视角,帮助理解不同平台的优势与挑战,并为那些站在选择十字路口的开发者提供有价值的参考信息。