分析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,如若转载,请注明来源。

目录
相关文章
|
1月前
|
搜索推荐 Android开发 iOS开发
安卓与iOS系统的用户界面设计对比分析
本文通过对安卓和iOS两大操作系统的用户界面设计进行对比分析,探讨它们在设计理念、交互方式、视觉风格等方面的差异及各自特点,旨在帮助读者更好地理解和评估不同系统的用户体验。
22 1
|
2月前
|
Android开发 数据安全/隐私保护 iOS开发
安卓与iOS系统的发展趋势与比较分析
【2月更文挑战第6天】 在移动互联网时代,安卓和iOS系统作为两大主流移动操作系统,各自呈现出不同的发展趋势。本文将从技术角度出发,对安卓和iOS系统的发展方向、特点及未来趋势进行比较分析,以期为读者提供更深入的了解和思考。
38 4
|
3月前
|
存储 监控 iOS开发
iOS应用崩溃了,如何通过崩溃手机连接电脑查找日志方法
在iOS应用开发过程中,调试日志和奔溃日志是开发者必不可少的工具。当iOS手机崩溃时,我们可以连接电脑并使用Xcode Console等工具来查看日志。然而,这种方式可能不够方便,并且处理奔溃日志也相当繁琐。克魔助手的出现为开发者带来了极大的便利,本文将详细介绍其功能和使用方法。 克魔助手会提供两种日志,一种是实时的,一种的是崩溃的。(由于崩溃日志的环境很麻烦,目前只展示实时日志操作步骤)
|
1月前
|
前端开发 JavaScript 关系型数据库
手机商城网站的分析与设计(论文+源码)_kaic
手机商城网站的分析与设计(论文+源码)_kaic
|
2月前
|
Web App开发 Go iOS开发
【IOS】教你如何在手机端轻松安装 ipa 文件 -(安装器已失效 21.10)|社区征文
【IOS】教你如何在手机端轻松安装 ipa 文件 -(安装器已失效 21.10)|社区征文
|
3月前
|
JSON 前端开发 数据安全/隐私保护
【教程】iOS 手机抓包工具介绍及教程
📱 最近又发现APP Store一款宝藏软件,克魔助手抓包工具,app刚上架,功能不断迭代中,目前18软妹币实惠价可享受终身版!现在是下手的最好时机。
|
3月前
|
Web App开发 Go iOS开发
【IOS】教你如何在手机端轻松安装 ipa 文件 -(安装器已失效 21.10)
【IOS】教你如何在手机端轻松安装 ipa 文件 -(安装器已失效 21.10)
|
4月前
|
文字识别 安全 API
iOS Crash 治理:淘宝VisionKitCore 问题修复(下)
iOS Crash 治理:淘宝VisionKitCore 问题修复(下)
|
1月前
|
Web App开发 前端开发 网络安全
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
58 1
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
|
2月前
|
安全 搜索推荐 Android开发
Android 与 iOS 的比较分析
【2月更文挑战第5天】 Android 和 iOS 是目前市场上两种最流行的移动操作系统,它们都拥有自己的特点和优势。本文将会分别从操作系统设计、应用生态、安全性等方面对这两种操作系统进行比较和分析,希望能够帮助读者更好地选择适合自己的移动设备。