你用过的所有应用都有这个功能,你知道吗?

2019 年 11 月 21 日

你用过的所有应用都有这个功能,你知道吗?

你可能从没听说过它的名字,甚至没有注意过它,但它实实在在地影响了移动应用的崛起与成功。



图源:Jamie Street/Unsplash


我睁开惺忪的睡眼,轻敲我的手机,阻止它继续发出嗡嗡的震动声。我的闹铃是我以前喜欢的一首歌,但我早就对它没兴趣了,因为听到它就能想起被打扰的美梦。反正也拿起了手机,我就划开屏幕,开始查看 Twitter、电子邮件、消息、Instagram、Reddit、Medium 等网站。总之,这些页面我可以无休止地划下去。整整一天时间,就算在我下床补充咖啡因的时候,我也会划来划去。我的拇指点开了几十款应用,还有数百甚至数千页的内容。


估计,一般人每天用拇指划动的距离超过一英里,可能比我们每天走的路都长,这要归功于我们一坐不起的生活方式。


在所有平台上,由这些价值数十亿美元的硅谷独角兽构建的应用都有一个共同点——它们都使用了同一种基本组件构建:那就是 table,也就是表格组件。我几乎可以直截了当地下结论:就这么一个用户界面组件,可能已经成为了当代西方社会的基础。


在 Android 中,它被称为 TableLayout;在 iOS 中,它被称为 UITableView。只要你用过 iPhone 或 Android 设备,肯定会非常熟悉它:



UITableView 的柏拉图式理想的映射。左边是苹果设置屏幕,右边是 WhatsApp 设置屏幕。


这种风格的页面不仅出现在苹果的官方应用中,还出现在第三方应用中,与苹果竞争的公司甚至也在使用这种外观。在后台,iOS 应用使用一个框架来创建名为 CocoaTouch 的 TableView。在默认情况下,无论应用来自哪家公司,其外观都是一样的。看一下上面列出的应用,左边是来自苹果公司的应用,右边的页面由 Facebook 构建,但它们并没有多大区别。


当然这些只是设置页面。由于 TableView 的灵活性,它如今已为数百万个应用提供了支持。



Twitter 的 iOS 版本(左); Medium 和一些厚脸皮的自我宣传(中); iOS 上的 Message(右)


从本质上讲,UITableView 或 TableLayout 会在页面上显示一个列表。这就是它的全部。


表格中的每一行被称为一个单元格(Cell),一般分为四个部分:


  • 左侧的一张图像;

  • 一行标题;

  • 一行较小的字幕;

  • 右侧的一个符号。



又是一张表格!TableViews 无处不在。你可以用 TableViews 做一本儿童读物。截图:苹果 iOS


就算不写任何代码,你也可以在这些部分添加或删除内容,以更改界面的外观。



TableViews 的样式说明(来自苹果开发者文档


从 Airbnb 到 Zipcar,所有 iOS 应用都是用 Xcode 构建的,这是从苹果免费下载的 macOS 应用。无论应用有多大,或由哪家公司开发,开发人员都要使用这个工具,你可以自行下载并立即使用。在 Xcode 中,只需拖放组合一些界面,无需编程经验就可以做出只有 TableViews 的应用。如果你将一些 TableView 单元格放到 Xcode 中,并在上面放上一些图标,那么你的应用实际上不会做任何事情,但看起来和感觉上都很像是那么回事,并且你会用到和其他所有 iOS 应用都一样的基本代码。


创建 TableView 后,开发人员将在此基础上进行构建。他们会创建自定义单元,进而打造出 Uber、Gmail、Snapchat 或 Venmo 等你所熟知的应用。


现在了解了这些知识后,你会发现 TableView 无处不在。我打赌你根本找不到哪款热门应用是没有 TableView 的。Apple News、YouTube、Netflix、Amazon、Tinder、Uber、Monzo、JustEat——随便找一款 Peter Thiel(Paypal 创始人,著名投资家)投资的应用,肯定包含 TableView。就连 Medium 应用也主要是 TableViews 构建的——如果你是在移动应用上阅读这篇文章,就已经点了一个 TableView 单元格。


TableView 广泛流行并大获成功绝非偶然。首先,它带来了至关重要的 feed。这是现代应用设计的基础内容——feed 本质上是无限滚动的内容列表。Twitter、Instagram 或 Facebook 的主页都是 feed 流,显示所有最新的内容。它牢牢抓住了我们的眼球,连眨眼偷懒的功夫都没有,就像是一大罐数字版的爆米花一样:只要开始划动就停不下来。我们啃炸土豆零食还有个头,袋子空了也就没辙了,可是划动是没有尽头的。我们可能会说:“再刷新一次,一次就够了。”


TableView 提供了一种可以容纳内容的结构。企业会设计定制的单元格,人们上传或添加适合放进这些单元格的内容。这些限制(如 Twitter 的 280 个字符、Instagram 的方形照片……)似乎还在上传作品的创作者中培养了创造力,而格式的可预测性绑住了用户。我们知道在划动时会出现什么:照片或文本和图像的混合内容;轻点一下就会展开一系列评论,一条接着一条。从根本上讲,TableView 将内容组织成了可预测的模式。


TableView 似乎正好符合人们阅读页面的“F 形”方式。研究表明,当人们在计算机上查看文档时会以特定的模式扫描。他们的目光从左向右滑动,然后从左侧滑下,当某些东西引起他们的兴趣时又会向右滑动。这种目光扫描的模式看起来像大写的"F"。


一般来说,人们会泛读、快速扫描,而不会仔细看每个单词。对于内容较长的文章而言,这不是什么好消息。但另一方面,TableView 非常适合这种阅读模式。不管是什么内容,它都鼓励 F 形阅读。每个单元格中的内容顺序是从左到右的,众多单元格在页面上按从上至下的顺序排列下去。我们可以一眼扫过各个单元格,如果哪里的内容吸引了我们,我们就可以停下来仔细观摩一番。如果没有任何内容能勾起我们的兴趣,那也没问题,只要再划一下页面,就能刷出一组新的单元格,也许这次就会有一些有趣的内容了。


TableView 在纵向屏幕上可谓如鱼得水。多亏了智能手机的兴起,默认的屏幕形状现在变成了纵向的。即使在横向的台式机或笔记本电脑显示器上,页面的高度通常也比宽度要大,并且两边都有空白。这使我们能够浏览和滚动列表,轻松扫过大片内容,当然这也很容易上瘾。我们已经开始在桌面版网站和之前从没想过的许多地方创建 TableView 了。


与所有发明一样,人们很容易认为 TableView 是必然的产物,但我更愿意将它视为某种小小的奇迹,无形中让我们的世界更加美好。表格在 TableView 之前就存在于互联网,但它们是用小方格来展示信息的,就像 Excel 那样。它们并没有像 TableView 那样为页面本身提供结构。相反,它们是添加到页面上的组件。实际上,开发人员曾被明确告知不要使用表格来布局。虽说你可以在网页上放置重复的内容块,但正是 TableView 规范了这个想法,并将其延伸到我们每天使用的所有应用中。


科技巨头主导着我们的经济。马克·扎克伯格和杰夫·贝佐斯都是家喻户晓的名字。他们制作的应用不仅在经济层面,而且在文化层面影响着我们的社会。而这一切的背后,则是鲜为人知的TableView。


与应用相比,标准的网页在很大程度上是非结构化的。当你在应用中滚动浏览 TableView 时,你知道下面会发生什么(更多的 TableView 单元格)。但即使在移动设备上滚动浏览网页时,你也不知道接下来会发生什么。可能会有视频、更多文本、表格,或者需要填写的表单,什么都有可能。TableView 改变了这一切。它承诺了一组参数,内容会根据这组参数来呈现。


毋庸置疑,TableView 成为了在移动设备上呈现内容的主流方式。而它的表亲(更准确地说是其父级)CollectionView 是所有智能手机用户都熟悉的另一种模式。



iPad 主屏幕(左)、日历(中)和 iOS 照片库(右)的 CollectionView。


TableView 是列表,而 CollectionView 是网格。你无法像使用 TableView 一样扫描 CollectionView,因为你的目光必须一路穿过内容,然后再绕回来查看每个项目。Twitter 不会使用 CollectionView。而 Instagram 虽然在用户个人资料页面上用了 CollectionView,但在主 feed 上还是用了 TableView。


我是 TableView 的忠实爱好者,从开发人员和沉迷其中的用户角度来说都很热爱它。它是应用的基础构建块。再夸张一点来说,我会断言过去 10 年来应用的爆炸式增长都归功于 TableView。当初人们发明锡罐后,工厂可以制作和储存的新食品数量大大增加了。TableView 对应用而言也是如此。没有它提供的设计和使用框架,我们的应用将成为一堆乱糟糟的不同模式的混杂物——就像今天的许多网站一样。每个应用都会从一张白纸开始,从头发明一切轮子。TableView 是许多应用背后的无声英雄,无形地推动车轮向前滚动。


有时,当我在玩一个应用时,我会停下来看看他们如何设计和实现 TableView 单元格——包括他们使用的图标风格、内容的放置方式、应用的间距、颜色和阴影等等。每次我都会赞叹不已,因为这种组件可以让体验如此亲切熟悉,同时使每种实现都显得新鲜而独特。


在我看来,移动应用崛起和成功的故事,就是 TableView 成功的传奇。


作者介绍:


Simon Pitt 是媒体技术人员、开发人员、产品经理、软件人员和 Web 工作者。 他是英国广播公司(BBC)的企业数字部门负责人,有着独到的见解。更多内容可访问 pittster.co.uk。


原文链接:


https://onezero.medium.com/every-mobile-app-youve-ever-used-has-this-one-feature-f10a38671730


2019 年 11 月 21 日 17:201627
用户头像
王文婧 InfoQ编辑

发布了 126 篇内容, 共 59.7 次阅读, 收获喜欢 250 次。

关注

评论 1 条评论

发布
暂无评论
发现更多内容

Go:gsignal,信号大师

陈思敏捷

go golang signal gsignal os.Signal

架构师培训营第四周总结

王锟

架构第四周 - 学习总结

J.Spring

极客大学架构师训练营

关于编码的一点“思考”

damnever

golang 思考 抽象 分层架构 编码

第4周总结

andy

【源码系列】Spring Cloud Eureka

Alex🐒

源码 Spring Cloud Eureka

ARTS打卡 第5周

引花眠

ARTS 打卡计划

第四周作业

andy

架构师训练营 - 第四课作业 -20200701- 架构演化

👑👑merlan

极客大学架构师训练营

ARTS|Week 5 有效的括号、API和地图

Puran

LeetCode ARTS 打卡计划

信息的表示与存储-浮点数的运算

引花眠

计算机基础

大型互联网公司技术方案与手段浅析

俊俊哥

分布式 高可用 大型软件 高并发 解决方案

一文搞懂 Redis高性能之IO多路复用

flyer0126

redis io 多路复用 高性能

架构师面试题(3)

满山李子

架构师训练营 - 第 4 课总结 -20200627- 互联网架构设计

👑👑merlan

架构设计 互联网架构

Week4 学习总结

wyzwlj

极客大学架构师训练营

阿里巴巴的发展史(组织变革+技术变革)

王锟

阿里巴巴

架构师课程第四周 作业

杉松壁

极客时间 - 架构师培训 - 4 期作业

Damon

SQL运行内幕:从执行原理看调优的本质

arthinking

MySQL 数据库

架构师训练营 -- 第四周作业

stardust20

清华百万年薪架构师,精心编写多线程与高并发实战PDF

互联网架构师小马

Java 程序员 多线程 架构师 多线程与高并发

消息队列(二)如何保证消息队列的高可用?

奈何花开

Java MQ 消息队列

分布式系统设计 - 第四周作业

孙志平

架构师训练营 - Lesson Week 4

brave heart

极客大学架构师训练营

使用数据卷管理数据 | Docker 系列

AlwaysBeta

Docker 容器 数据 容器技术

每周学习总结 - 架构师培训 4 期

Damon

架构师训练营 -week4 命题作业

J.Spring

极客大学架构师训练营

LeetCode | 6. Valid Parentheses 有效的括号

Puran

算法 LeetCode

通过Python来获取北京市乡镇、街道行政区划数据

Puran

Python GIS geopandas QGIS 天地图

架构师训练营 - 第四周 - 学习总结

stardust20

你用过的所有应用都有这个功能,你知道吗?-InfoQ