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

目录
打赏
0
0
0
0
845
分享
相关文章
安卓与iOS开发环境对比分析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据半壁江山。本文深入探讨了这两个平台的开发环境,从编程语言、开发工具到用户界面设计等多个角度进行比较。通过实际案例分析和代码示例,我们旨在为开发者提供一个清晰的指南,帮助他们根据项目需求和个人偏好做出明智的选择。无论你是初涉移动开发领域的新手,还是寻求跨平台解决方案的资深开发者,这篇文章都将为你提供宝贵的信息和启示。
59 8
深入探索Android与iOS系统安全性的对比分析
在当今数字化时代,移动操作系统的安全已成为用户和开发者共同关注的重点。本文旨在通过比较Android与iOS两大主流操作系统在安全性方面的差异,揭示两者在设计理念、权限管理、应用审核机制等方面的不同之处。我们将探讨这些差异如何影响用户的安全体验以及可能带来的风险。
141 21
Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势
本文深入探讨了 Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势。这对于实现高效的跨平台移动应用开发具有重要指导意义。
468 4
深入探讨iOS与Android系统安全性对比分析
在移动操作系统领域,iOS和Android无疑是两大巨头。本文从技术角度出发,对这两个系统的架构、安全机制以及用户隐私保护等方面进行了详细的比较分析。通过深入探讨,我们旨在揭示两个系统在安全性方面的差异,并为用户提供一些实用的安全建议。
Android vs. iOS:解锁智能手机操作系统的奥秘####
【10月更文挑战第21天】 在当今这个数字化时代,智能手机已成为我们生活中不可或缺的伙伴。本文旨在深入浅出地探讨两大主流操作系统——Android与iOS的核心差异、优势及未来趋势,帮助读者更好地理解这两个平台背后的技术哲学和用户体验设计。通过对比分析,揭示它们如何塑造了我们的数字生活方式,并展望未来可能的发展路径。无论您是技术爱好者还是普通用户,这篇文章都将带您走进一个充满创新与可能性的移动世界。 ####
167 3
安卓与iOS的较量:谁才是智能手机市场的王者?
本文将深入探讨安卓和iOS两大智能手机操作系统之间的竞争关系,分析它们各自的优势和劣势。通过对比两者在市场份额、用户体验、应用生态等方面的表现,我们将揭示出谁才是真正的市场领导者。无论你是安卓粉丝还是iOS忠实用户,这篇文章都将为你提供一些有趣的观点和见解。
安卓与iOS开发环境的差异性分析
【10月更文挑战第8天】 本文旨在探讨Android和iOS两大移动操作系统在开发环境上的不同,包括开发语言、工具、平台特性等方面。通过对这些差异性的分析,帮助开发者更好地理解两大平台,以便在项目开发中做出更合适的技术选择。
手机短信SQL分析技巧与方法
在手机短信应用中,SQL分析扮演着至关重要的角色
电商平台手机销售数据采集与分析
随着科技的进步,尤其是手机的普及,国民生活变得更加便捷。现今,手机销售已从传统的实体店模式转向电商平台,这一转变加剧了市场竞争,给手机厂商带来了新的挑战。为了应对挑战,电商平台越来越重视手机销售情况与用户体验,利用数据分析成为了解市场趋势的关键手段。本章节聚焦于某电商平台的手机销售及售后数据收集,通过深入分析商品销售状况与用户反馈,旨在探索有效的营销策略,助力电商平台与手机行业的共同进步。
166 1
探索安卓与iOS的安全性差异:技术深度分析与实践建议
本文旨在深入探讨并比较Android和iOS两大移动操作系统在安全性方面的不同之处。通过详细的技术分析,揭示两者在架构设计、权限管理、应用生态及更新机制等方面的安全特性。同时,针对这些差异提出针对性的实践建议,旨在为开发者和用户提供增强移动设备安全性的参考。
248 3

热门文章

最新文章

  • 1
    【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    14
  • 2
    美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
    21
  • 3
    【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    10
  • 4
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    9
  • 5
    算法系统协同优化,vivo与港中文推出BlueLM-V-3B,手机秒变多模态AI专家
    7
  • 6
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    10
  • 7
    iOS|解决 setBrightness 调节屏幕亮度不生效的问题
    7
  • 8
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    14
  • 9
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 10
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    5
  • 1
    uniapp云打包ios应用证书的获取方法,生成指南
    27
  • 2
    iOS|解决 setBrightness 调节屏幕亮度不生效的问题
    117
  • 3
    iOS|记一名 iOS 开发新手的前两次 App 审核经历
    20
  • 4
    iOS各个证书生成细节
    36
  • 5
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    161
  • 6
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    55
  • 7
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    73
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    54
  • 9
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    65
  • 10
    uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
    172