小屏幕，大影响：被遗忘的功能手机Web应用开发艺术

为什么为功能手机开发应用？

普遍存在一个误解，认为使用功能手机的用户不想要应用。实际上，许多首次接触互联网的用户渴望发现新内容和服务。虽然这个市场不如苹果App Store利润丰厚，但有以下几个原因值得为功能手机开发应用。

自然增长

你无需付费获取功能手机用户。与Android或iOS平均每次安装成本（CPI）约2.5-3.3美元不同，功能手机应用能产生大量自然下载量。

品牌引入

当功能手机用户最终升级到智能手机时，他们会搜索已经熟悉的应用。这反过来会在Google Play Store（以及较小程度上在Apple App Store）产生更多安装量。

低竞争

KaiOS约有1700个应用，Cloud Phone小部件更少。相比之下，Google Play有超过155万个Android应用可供选择。在千分之一中脱颖而出比在百万分之一中容易得多。

技术基础

功能手机并非一直能运行应用。直到2009年Ovi Store（后更名为“Nokia Store”）推出，功能手机才获得可安装的第三方应用。当时，应用是为碎片化的Java 2 Mobile Edition（J2ME）运行时编写的，仅适用于特定诺基亚型号，并且通常需要与文档不全的专有包（如Nokia UI API）集成。

如今，功能手机平台已放弃原生运行时，转而采用标准Web技术，以降低入门门槛并吸引更广泛的软件开发人员。在现代功能手机上运行的应用主要使用许多开发人员熟悉的语言——HTML、CSS和JavaScript——以及一系列权衡和考虑。

硬件

功能手机价格实惠，因为它们使用低端且通常过时的硬件。低端是预算手机，运行实时操作系统（RTOS），芯片如Unisoc T107，RAM低至16MB。这些手机通常支持Opera Mini和Cloud Phone。高端是最近发布的TCL Flip 4，运行在高通骁龙4s上的KaiOS 4.0，配备1GB RAM。

虽然很难准确比较如此不同的硬件，但苹果最新的iPhone 16 Pro内存是低端功能手机的500倍（8GB RAM），下载速度支持高达1000倍更快（4G LTE CAT-1）。

性能

你可能认为功能手机应用很容易受到预算硬件稀缺资源的限制。KaiOS就是这种情况，因为应用在设备上执行。代码需要压缩，缩略图需要缩小，并在一系列真实设备上评估性能。你不能简单地在桌面上用小视口测试。

然而，作为远程浏览器，Cloud Phone和Opera Mini都通过将计算密集的渲染卸载到服务器来克服硬件限制。这意味着性能通常与现代桌面相当，但可能导致一些古怪且有时不直观的特性。

例如，如果你的应用获取1MB文件来显示数据表，这不会消耗用户1MB的移动数据。只有屏幕内容的更改会流式传输给用户，消耗带宽。另一方面，复杂动画和页面转换会消耗数据，因为每一帧至少是部分屏幕刷新。尽管有这种怪癖，Opera Mini估计与传统浏览器相比节省高达90%的数据。

安全

不要在浏览器存储中存储敏感数据。这适用于功能手机，其安全关切与传统Web浏览器类似。虽然应用通常无法访问其他应用的数据，但KaiOS不加密客户端数据。远程浏览器的影响不同。

Opera Mini根本不支持客户端存储，而Cloud Phone将数据加密存储在其数据中心，而不是用户手机上。

为现代功能手机设计

简化，不要缩小以适应

尽管这些设备持久存在，但几乎每个Web开发框架和库都忽略了它们。流行的前端Web框架如Bootstrap v5将所有低于576px的屏幕归类为超小。另一个流行选择Tailwind将最小的CSS断点——布局更改以适应不同设备最佳观看体验的特定宽度——设置得更高，为40em（640px）。像Norman Nielsen这样的设计行业专家建议最小的断点“适用于移动设备，通常高达500px”。像这样的标准提倡在小屏幕上采用一刀切的方法，但一些小的设计更改可以对新互联网用户产生重大影响。

小屏幕在尺寸、分辨率、对比度和亮度上差异很大。

小屏幕可用性需要独特的设计考虑——不是缩小以适应模型。虽然所有这些设备的屏幕宽度都小于最小常见断点，但平等对待它们将是错误的。

“缩小效果差：A List Apart、Chrome for Developers和MDN Web Docs在Cloud Phone上的截图。（大预览）缩小效果好：Rest of World、BBC News和TED Talks在Cloud Phone上的截图。（大预览）

大多数网站在功能手机上渲染过大。它们使用过大的字体、过于详细的图形以及占据屏幕四分之一的粘性标题。更糟糕的是，许多网站通过隐藏水平溢出的内容来禁用水平滚动。这在触摸屏上允许平滑滚动，但也使得在功能手机上无法阅读超出视口的文本。

下表包括物理显示尺寸、分辨率和示例，以更好地了解功能手机和预算智能手机小屏幕的多样性。

分辨率	显示尺寸	像素大小	示例
QQVGA	1.8”	128×160	Viettel Sumo 4G V1
QVGA	2.4”	240×320	Nokia 235 4G
QVGA (Square)	2.4”	240×240	Frog Pocket2
HVGA (480p)	2.8-3.5”	320×480	BlackBerry 9720
VGA	2.8-3.5”	480×640	Cat S22
WVGA	2.8-3.5”	480×800	HP Pre 3
FWVGA+	5”	480×960	Alcatel 1

注意：功能手机的小屏幕通常在1.8”–2.8”之间，分辨率为240x320（QVGA）或128x160（QQVGA）。相比之下，Apple Watch Series 10有一个1.8”屏幕，分辨率为416x496。按现代标准，功能手机显示屏小，分辨率、像素密度、对比度和亮度低。

为小屏幕开发

向框架的默认值添加自定义命名断点，而不是手动使用媒体查询覆盖类定义的布局尺寸。

Bootstrap v5

Bootstrap在_variables.scss Sass文件中定义了一个映射$grid-breakpoints，包含从SM（576px）到XXL（1400px）的默认断点。使用map-merge()函数扩展默认值并添加自己的断点。

1
2


@import "node_modules/bootstrap/scss/functions";
$grid-breakpoints: map-merge($grid-breakpoints, ("xs": 320px));

Tailwind v4

Tailwind允许你在tailwind.config.js配置文件中扩展默认主题。使用extend键定义新断点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    extend: {
      screens: {
        "xs": "320px",
       ...defaultTheme.screens,
         },
    },
  },
};

成功的关键（键盘）

成功的功能手机应用支持使用方向键（D-pad）进行键盘导航。这与电视遥控器的导航模式相同：四个箭头键（上、下、左、右）和中央按钮。要构建一个优秀的功能手机优化应用，提供一个导航方案，用户可以通过这些有限控件快速学习如何导航你的应用。确保用户可以导航到屏幕上的所有可见控件。

使用d-pad导航PodLP（左）和虚拟光标（右）。

尽管一些功能手机平台支持使用模拟光标进行空间导航，但这并非普遍可用，并且创建了更差的用户体验。此外，虽然支持键盘导航的应用可以使用模拟光标工作，但反之则不一定成立。Opera Mini Native仅提供虚拟光标，Cloud Phone仅提供空间导航，而KaiOS支持两者。

如果你在开发时考虑键盘可访问性，支持功能手机导航很容易。作为一般准则，永远不要移除焦点轮廓。相反，覆盖默认样式并使用框阴影以匹配应用的颜色方案，同时适当适应。自动聚焦在序列中的第一个项目——列表或网格——但要小心避免键盘陷阱。最后，确保列表将新聚焦的项目完全滚动到视图中。

不要让用户打字

如果你曾经在智能手机上输入长消息时感到沮丧，结果不小心被擦除，现在想象一下在功能手机上使用T9输入消息时的沮丧。尽管预测输入有所进步，但用仅九个键填写表格甚至撰写一条180字符的推文都是一件苦差事。

无论你做什么，不要让功能手机用户打字！

幸运的是，很容易调整设计以减少打字。尽可能偏好数字。允许用户使用电话号码（易于输入）注册，发送仅包含数字的PIN码或一次性密码（OTPs），并从邮政编码查找地址详细信息。这些每一项都节省大量时间，并避免通常导致用户流失的沮丧。

或者，与单点登录（SSO）提供商集成以“使用Google登录”，这样用户就不必重新输入安全团队要求至少八个字符长并包含字母、数字和符号的密码。只需记住，许多新互联网用户没有电子邮件地址。他们可能不知道如何访问它，或者他们的手机可能无法访问电子邮件。

最后，在可用时允许用户通过语音搜索。尽管使用T9输入英语很困难，但输入像泰米尔语这样的语言要困难得多，该语言在南印度和斯里兰卡有超过9000万使用者。尽管有几十年的进步，但自动完成和预测输入等技术很少适用于此类语言。虽然不完美，但有一些AI模型如Whisper Tamil可以执行语音到文本，这要归功于像IIT Madras语音实验室这样的大学的研究人员。

功能手机浏览器和操作系统

为功能手机开发Web应用的另一个挑战是其碎片化生态系统。各种公司使用不同的方法允许网站和应用在有限的硬件上运行。至少有三个主要的基于Web的平台，它们都以不同的方式运行：

Cloud Phone是最新的解决方案，于2023年12月推出，使用基于现代Puffin（Chromium）的远程浏览器，作为应用商店。
KaiOS于2016年推出，使用Firefox OS作为基础，是一个移动操作系统，整个系统是一个Web浏览器。
Opera Mini Native是迄今为止最古老的，于2005年推出作为一个广告支持的远程浏览器，仍然使用十年前已停止的Presto引擎。

尽管两个平台都是远程浏览器，但Cloud Phone和Opera Mini之间存在显著差异，这些差异并不立即明显。

从左到右：诺基亚6300 4G（KaiOS）、Viettel Sumo 4G V1S（Cloud Phone）和Itel Neo R60+（Opera Mini）。（大预览）

平台	缺点	优点
Cloud Phone	缺少WebPush等功能无离线支持不提供货币化	现代Chromium v128+引擎丰富的多媒体支持无需优化积极开发 2024年推出100+型号
KaiOS	过时的Gecko引擎硬件受限 2024年发布型号少	KaiAds集成两个应用商店完全离线支持低级集成API 应用可打包或托管
Opera Mini Native	已停止的Presto引擎 ~2.5秒异步执行限制有限ES5支持无多媒体支持无应用商店最后更新于2020年	预装在数亿手机上部分离线支持稳定，跨平台

功能手机已经走了很长的路，但每个平台支持不同的功能。你可能需要根据支持的内容移除或缩减功能。最好针对应用程序可行的最低共同标准。

对于信息丰富的新闻网站、维基或博客，Opera Mini的过时技术足够好用。对于视频流服务，Cloud Phone和KaiOS都工作良好。相反，像Opera Mini和Cloud Phone这样的远程浏览器无法处理高帧率，因此只有KaiOS适用于实时交互游戏。就像设计一样，功能手机开发没有一刀切的方法。尽管所有平台都是基于Web的，但它们需要不同的权衡。