我重做了HN閱讀器，讓看不見(jiàn)的人也能順暢刷帖

用了七年 Hacker News 的網(wǎng)頁(yè)版，我一直沒(méi)找到一個(gè)讓我每天愿意打開(kāi)的 iOS 客戶端。要么評(píng)論層級(jí)一亂到底，鏈接點(diǎn)不開(kāi)是常態(tài)；要么根本沒(méi)有考慮旁白模式，色盲的朋友打開(kāi)就是滿屏無(wú)法辨認(rèn)的“彩色信號(hào)”。困惑越攢越多：為什么一個(gè)服務(wù)全球幾百萬(wàn)技術(shù)用戶的社區(qū)，手機(jī)端的閱讀體驗(yàn)?zāi)艽植诘竭@種程度？今年春天，我決定自己動(dòng)手，用最樸素的 SwiftUI 構(gòu)建了一款叫做 Ember 的應(yīng)用。它的起點(diǎn)不是“做一個(gè)更漂亮的 HN 前端”，而是“把一個(gè)信息產(chǎn)品做成誰(shuí)都真正能用的工具”。

Ember 是一款純粹為 iOS 構(gòu)建的 Hacker News 原生閱讀器，它首要的原則是平靜、快速，以及“為所有人而建”。平靜意味著沒(méi)有閃爍的廣告和雜亂的手勢(shì)，快速來(lái)自于無(wú)第三方依賴的原生渲染，而“為所有人”則是一整套被當(dāng)作核心功能來(lái)處理的無(wú)障礙設(shè)計(jì)——不是靠后的補(bǔ)丁，是從第一行代碼就開(kāi)始運(yùn)轉(zhuǎn)的機(jī)制。你不會(huì)在設(shè)置里發(fā)現(xiàn)一個(gè)“輔助功能”的開(kāi)關(guān)，因?yàn)樗椭黝}選擇、顏色強(qiáng)調(diào)、首頁(yè) feed 一起，在第一次打開(kāi) App 的引導(dǎo)流程里就生成了。

應(yīng)用被設(shè)計(jì)成一個(gè)固定的篩選欄，可以隨時(shí)在 Top、New、Best、Ask HN、Show HN 和 Jobs 六個(gè)分區(qū)之間橫劃切換。這六個(gè)信息流各自對(duì)應(yīng)著 Hacker News 上不同的內(nèi)容場(chǎng)景，從最新討論到展示作品，再到招聘信息，不需要再去屏幕頂部點(diǎn)回菜單翻頁(yè)。所有列表項(xiàng)共用同一個(gè)更新與緩存邏輯，不管切到哪一個(gè)分區(qū)，加載的速度都保持一致。

評(píng)論線程的重構(gòu)可能是整個(gè) App 里最花功夫的地方。Hacker News 的評(píng)論接口返回的依舊是 HTML 片段，但 Ember 沒(méi)有直接用網(wǎng)頁(yè)視圖去承載這些內(nèi)容。它會(huì)在拿到響應(yīng)的同一刻把整棵評(píng)論樹(shù)解析成原生文本：鏈接會(huì)在正文里保持可點(diǎn)狀態(tài)，斜體、引用塊、代碼塊按照系統(tǒng)字體渲染，不再出現(xiàn)網(wǎng)頁(yè)中字體大小突變或者對(duì)齊錯(cuò)位。每個(gè)子線程前都有一根深度指示線，點(diǎn)擊父級(jí)就會(huì)收起或展開(kāi)整條分支，而且所有評(píng)論層級(jí)只需要一次網(wǎng)絡(luò)請(qǐng)求，不會(huì)在展開(kāi)子評(píng)論時(shí)出現(xiàn)“加載更多”的延遲。這樣一來(lái)，你在翻一條有三四百條回帖的技術(shù)討論時(shí)，感受幾乎和在讀一封格式干凈的郵件一樣。

第一次啟動(dòng) Ember 的過(guò)程被設(shè)計(jì)成一場(chǎng)簡(jiǎn)短的對(duì)話。App 會(huì)讀取你設(shè)備的當(dāng)前外觀模式、文字大小、降低透明度和動(dòng)態(tài)效果等系統(tǒng)設(shè)置，然后提前把界面模式、強(qiáng)調(diào)色、主頁(yè)信息流等選項(xiàng)預(yù)選到與系統(tǒng)一致的檔位上。接下來(lái)一頁(yè)是一個(gè)實(shí)時(shí)預(yù)覽：你左右滑動(dòng)選主題，上下劃選強(qiáng)調(diào)色，底部的帖子列表也會(huì)同時(shí)變化。這個(gè)引導(dǎo)不是那種“先接受再說(shuō)”的跳過(guò)程序，它會(huì)在你選擇每一步時(shí)立刻把效果展示出來(lái)，讓你根據(jù)實(shí)際觀感來(lái)定調(diào)。最終完成設(shè)置后，所有參數(shù)就會(huì)被寫(xiě)入 UserDefaults 持久保存。

搜索功能支持對(duì)整個(gè) Hacker News 進(jìn)行全文檢索，并且可以用相關(guān)度或最近發(fā)布時(shí)間來(lái)排序。它不是簡(jiǎn)單的標(biāo)題匹配，而是直接去匹配文章和評(píng)論中的文本。找到一個(gè)討論時(shí)，點(diǎn)擊搜索結(jié)果可以直接跳到那條評(píng)論在原生線程中的位置，不用重新解析整個(gè)頁(yè)面。稍后閱讀功能則讓任何一篇帖子都可以被標(biāo)記保存，這些收藏列表以 JSON 文件的形式存儲(chǔ)在設(shè)備本地，就算沒(méi)有網(wǎng)絡(luò)也能打開(kāi)回味已經(jīng)保存的技術(shù)文章或者 Show HN 的演示鏈接。在讀過(guò)的帖子列表里，標(biāo)題和內(nèi)容區(qū)域會(huì)整體變暗，形成一個(gè)自然的閱讀進(jìn)度標(biāo)記，讓你總能在刷到一半被打斷后一眼找回上次看到的位置。

閱讀體驗(yàn)上，Ember 做了兩個(gè)并行的處理。點(diǎn)開(kāi)任何鏈接都會(huì)在應(yīng)用內(nèi)調(diào)起 Safari 視圖，這個(gè)內(nèi)嵌瀏覽器自帶了可選的“閱讀器模式”，用來(lái)剔除頁(yè)面上的無(wú)關(guān)元素，只看正文與圖片。如果你習(xí)慣用系統(tǒng)默認(rèn)瀏覽器，也可以在設(shè)置里關(guān)掉應(yīng)用內(nèi)打開(kāi)，直接移交到 Safari 或者你的第三方瀏覽器。這種雙模式?jīng)]有把用戶鎖在某個(gè)固定路徑里，與整個(gè)應(yīng)用“先適應(yīng)你，再請(qǐng)你調(diào)整”的思路是一致的。而查看用戶資料時(shí)，你可以看到任何人的聲望值、注冊(cè)日期、個(gè)人簡(jiǎn)介和最近的提交列表，這些信息都以卡片式原生化組件展開(kāi)，不會(huì)再用一個(gè)小彈窗展示網(wǎng)頁(yè)快照。

視覺(jué)細(xì)節(jié)方面，Ember 用的是一套經(jīng)過(guò)手工調(diào)試的暖色系統(tǒng)，完全支持淺色和深色模式的無(wú)縫切換，另附有六種強(qiáng)調(diào)色主題供選擇，包括對(duì)紅綠色覺(jué)異常友好的搭配。界面的交互動(dòng)效都帶有觸覺(jué)反饋，列表滾動(dòng)和按鈕按下的震動(dòng)經(jīng)過(guò)細(xì)微調(diào)整，讓玻璃屏幕上有一種帶著回彈的實(shí)體感。加載狀態(tài)用了一種隨著淡入淡出變化的光澤效果，在“降低動(dòng)態(tài)效果”開(kāi)啟時(shí)，這個(gè)光澤動(dòng)畫(huà)會(huì)被削弱到幾乎不可見(jiàn)。

無(wú)障礙設(shè)計(jì)并非疊加層，而是 Ember 基礎(chǔ)信息架構(gòu)的一部分。第一條鐵則是“絕不只依賴顏色傳達(dá)信息”。帖子的點(diǎn)贊數(shù)和評(píng)論數(shù)旁邊總是配著 SF 符號(hào)圖標(biāo)，數(shù)字和圖標(biāo)共同組成一個(gè)可辨識(shí)的單元；閱讀狀態(tài)不只用顏色變暗來(lái)表示，還會(huì)在標(biāo)題前加上一個(gè)勾選圖標(biāo)；選擇狀態(tài)則在名稱周?chē)褂脠A環(huán)和勾號(hào)來(lái)標(biāo)記。這些措施確保了即便完全無(wú)法區(qū)分色相的用戶，也能從形狀和文字里讀懂每一項(xiàng)信息的含義。

針對(duì)色覺(jué)異常的群體，App 內(nèi)置了一個(gè)“色盲友好提示”的獨(dú)立設(shè)置項(xiàng)。當(dāng)系統(tǒng)“不以顏色區(qū)分”的輔助功能打開(kāi)時(shí)，這個(gè)開(kāi)關(guān)會(huì)被自動(dòng)激活，然后在整個(gè)界面里加入額外的非顏色指示器——比如評(píng)論層級(jí)線、投票箭頭以及已讀標(biāo)記都會(huì)附上紋理或形狀的變化，讓顏色不再是區(qū)分元素的核心手段。旁白的使用者也得到了一整套完整的交互設(shè)計(jì)：故事列表里的每一行、每一條評(píng)論、每一個(gè)操作控件，都暴露了有意義的標(biāo)簽、提示、特性以及自定義操作。每條帖子被語(yǔ)音讀出來(lái)時(shí)是一個(gè)連貫的單元素，不會(huì)把標(biāo)題、作者、得分肢解成彼此割裂的碎片。

字體方面，Ember 完全跟隨系統(tǒng)“動(dòng)態(tài)文字”的設(shè)定。從正文到評(píng)論縮進(jìn)寬度，所有布局元素在輔助功能的大字號(hào)下都會(huì)自適應(yīng)重排，不會(huì)出現(xiàn)文字被截?cái)嗷蛑丿B。打開(kāi)“降低動(dòng)態(tài)效果”時(shí)，轉(zhuǎn)場(chǎng)動(dòng)畫(huà)和加載光澤會(huì)立刻縮減為簡(jiǎn)潔的漸隱過(guò)渡。評(píng)論里的鏈接可以強(qiáng)制加上下劃線，讓它們脫離顏色后仍然可被識(shí)別。所有這些自適應(yīng)并不是分散在設(shè)置深處，而是在你第一次啟動(dòng) Ember 時(shí)就被主動(dòng)檢測(cè)并自動(dòng)打開(kāi)了——它會(huì)識(shí)別旁白是否在運(yùn)行、降低動(dòng)態(tài)效果、不以顏色區(qū)分、粗體文字