摘要：第五名中國中國在我們的網(wǎng)上應(yīng)用店里一直評分較高，排名較前。中國手機(jī)網(wǎng)頁端的滑動(dòng)體驗(yàn)和閱讀體驗(yàn)都非常優(yōu)秀，究其原因，我認(rèn)為是十分用心的體驗(yàn)設(shè)計(jì)，與優(yōu)化過的請求，和它對于加速的應(yīng)用。值得一提的是，中國是基于最近大熱的開發(fā)的。

優(yōu)秀的前端工程師戴著腳銬跳舞，究竟能把 HTML5 的體驗(yàn)推進(jìn)到什么程度？

這些 Web apps 是我們運(yùn)營云集瀏覽器的網(wǎng)上應(yīng)用店一年來，我選出的十佳 Web apps。其中參考了同事們的意見，但也帶有強(qiáng)烈的主觀傾向，反映了我個(gè)人對于一個(gè)「Web application」設(shè)計(jì)、實(shí)現(xiàn)與價(jià)值的一些取向。當(dāng)然，你也可以認(rèn)為這是我作為一個(gè)自認(rèn)為挑剔的產(chǎn)品經(jīng)理，謹(jǐn)代表「云集瀏覽器」頒給這些優(yōu)秀 Web 應(yīng)用的開發(fā)者或團(tuán)隊(duì)的嘉獎(jiǎng)。如果你還在思考 Web 的體驗(yàn)究竟能不能和原生媲美（這件事情在 PC 上很久之前就已經(jīng)發(fā)生了），看看這些體驗(yàn)優(yōu)良的 Web apps，也許會(huì)給你更多來自現(xiàn)實(shí)世界的參考。

下面我將分別介紹這些 Web apps，解釋為什么它是這個(gè)名次，并附上一個(gè)截圖。在文章的末尾，我會(huì)附上一個(gè)由我同事制作的視頻，通過實(shí)際操作來演示這些 Web apps，所有演示均在云集瀏覽器 iOS 版內(nèi)進(jìn)行。

注意：

這篇文章的所有觀點(diǎn)、看法與評論，均發(fā)表于 2016 年 1 月 4 日，要知道，Web 是隨時(shí)可以更新的，我下面提到的這些 Web apps，你看到的可能已經(jīng)和我看到的不一樣了；

時(shí)間范圍為在 2015 年上線，或者在 2015 年 HTML5 端正式上線的產(chǎn)品；

均為國內(nèi)的 Web apps，或者主要面向國內(nèi)市場的 Web apps；

其實(shí)本來標(biāo)題是「2015 年十佳 Web apps」。

剛看到「720 云」的時(shí)候我是很震撼的，它在瀏覽器里就帶給了我全景與 VR 的體驗(yàn)。直到最近才有 Mozilla 的 AFrame 框架能讓普通開發(fā)者也快速開發(fā)出 VR 場景，可以說「720 云」在技術(shù)上也是領(lǐng)先的。

為什么「720 云」在我心目中只能排到第十名呢？因?yàn)樗麄兊牧斜眄搶σ苿?dòng)端實(shí)在太不友好，給了一個(gè)「十分隨意」的響應(yīng)式設(shè)計(jì)就了事了。當(dāng)然全景頁的體驗(yàn)很重要，列表頁的也是很重要的，這種程度的響應(yīng)式簡直就和 bug 一樣。

?

「Yummy」是一個(gè)定位于新時(shí)代年輕女性的女性社區(qū)，截止今日，社區(qū)板塊劃分為「推薦」、「直播」、「OO」、「玩具」。對我來說，這個(gè)社區(qū)是一個(gè)「直男癌疫苗」，經(jīng)常食用可以預(yù)防直男癌。除了產(chǎn)品的定位和功能之外，其主色調(diào)為黑色和暗玫瑰，給人一種隱秘的安全感。它基于 Angular 開發(fā)，滾動(dòng)看起來是純 JS 實(shí)現(xiàn)，擁有 pull to refresh 和 infinite scroll，但是這個(gè)純 JS 實(shí)現(xiàn)的滾動(dòng)，性能并不是十分理想。我個(gè)人一直比較反對使用純 JS 滾動(dòng)方案，事實(shí)上「Yummy」已經(jīng)做得十分不錯(cuò)了。之所以給到第九名，還是因?yàn)橐粋€(gè) bug，有需要登錄的地方，會(huì)直接跳到登錄框，而登錄框之前是一個(gè)重定向，回到上一頁的時(shí)候會(huì)陷入重定向循環(huán)，導(dǎo)致無法回到需要登錄之前的頁面。似乎他們已經(jīng)修復(fù)了這個(gè) bug。

?

「動(dòng)漫之家」擁有大量優(yōu)秀的原創(chuàng)漫畫，其手機(jī)網(wǎng)頁端設(shè)計(jì)十分清爽，閱讀體驗(yàn)也十分良好，基本符合移動(dòng)端用戶的使用模式，美中不足的是，沒有實(shí)現(xiàn) SPA，也沒有足夠且有意義的動(dòng)效。

?

「BusyWeek!」是一個(gè)獨(dú)立開發(fā)者的作品，開源在了 GitHub，作者是非計(jì)算機(jī)科班出生的@Huxpro。除了基本的「Todo list」功能外，它的體驗(yàn)十分像一個(gè)原生應(yīng)用，通過其源碼可以看到這是一個(gè) Vue 的項(xiàng)目，通過 LeanCloud 實(shí)現(xiàn)了無后端開發(fā)（只有一個(gè)用于渲染前端代碼的 server.js）。有想要進(jìn)一步了解的開發(fā)者朋友可以閱讀這個(gè)項(xiàng)目的源碼?！窧usyWeek!」的缺點(diǎn)在于「navigation drawer」的使用十分不規(guī)范：一會(huì)兒是登錄框，一會(huì)兒是同步框，一會(huì)兒又是 filter。要知道「navigation drawer」作為一個(gè)容器組件，承擔(dān)的主要責(zé)任是切換中間部分的界面，而不是彈框，或者更新界面狀態(tài)。當(dāng)然你可以教育我「規(guī)范是死的，場景是活的」，但是我認(rèn)為規(guī)范雖然可以去突破，但是不能百分之百的違背，否則之前已經(jīng)習(xí)慣這一規(guī)范的用戶會(huì)感到很奇怪。

?

「氧氣」是一個(gè)專注于女性內(nèi)衣推薦的 app，其網(wǎng)頁端的體驗(yàn)也十分優(yōu)秀，基本上延續(xù)了他家 native app 的設(shè)計(jì)語言，并且可以直接在網(wǎng)頁上完成購買。缺點(diǎn)和「動(dòng)漫之家」差不多，沒有實(shí)現(xiàn) SPA。這個(gè)問題的本質(zhì)其實(shí)是「究竟是服務(wù)器端渲染還是客戶端渲染，或者到底哪些部分該服務(wù)器端渲染哪些部分該客戶端渲染，以后有機(jī)會(huì)的話，希望能多帶帶寫一篇文章討論」。

?

「Flipboard 中國」在我們的網(wǎng)上應(yīng)用店里一直評分較高，排名較前。除了其中的資訊內(nèi)容，和它優(yōu)秀的體驗(yàn)也是分不開的?！窮lipboard 中國」手機(jī)網(wǎng)頁端的滑動(dòng)體驗(yàn)和閱讀體驗(yàn)都非常優(yōu)秀，究其原因，我認(rèn)為是十分用心的體驗(yàn)設(shè)計(jì)，CDN 與優(yōu)化過的 HTTP 請求，和它對于 GPU 加速的應(yīng)用。值得一提的是，「Flipboard 中國」是基于最近大熱的 React 開發(fā)的。

?

「Anitama」是一個(gè)二次元?jiǎng)勇襟w，其網(wǎng)頁端品質(zhì)上乘。剛打開的時(shí)候會(huì)給你展示一個(gè)有趣的「黃歷」，「周刊」和「日刊」之間可以滑動(dòng)切換。點(diǎn)擊底欄 Tab bar 的時(shí)候，有一個(gè)類似于 Material Design 的水波紋反饋。除此之外，他家的和標(biāo)簽異常得齊全，對移動(dòng)端的友好程度可以說是頂級的，不僅有常見的viewport、apple-touch-icon、mobile-web-app-capable，還有兼容 Google Chrome 的manifest、theme-color，兼容 Edge 的msapplication-TileColor等，可以說是「移動(dòng)端 HTML5 應(yīng)用的應(yīng)該怎么寫」的教科書。

?

「石墨」的 slogan 是「最優(yōu)美的在線協(xié)作文檔」，介紹為「支持多人同時(shí)對文檔編輯和評論，讓你與他人輕松完成協(xié)作撰稿、方案討論、會(huì)議記錄和資料共享等工作」?！甘沟墓δ苁謴?qiáng)大，通過 WebSocket 實(shí)現(xiàn)實(shí)時(shí)的協(xié)作，并且在網(wǎng)頁端也能和其他所有客戶端互相同步。雖然目前在手機(jī)網(wǎng)頁端能做的事情有限，但是最核心的功能「協(xié)作編輯」與「邀請協(xié)作者」使用完全沒有問題。

?

作為一個(gè)資訊閱讀類 Web app，「一點(diǎn)資訊」幾乎挑不出任何毛病。所有的新聞排版是爬蟲索引后再二次處理過的，所有的界面切換均無卡頓（或者設(shè)計(jì)得讓你感覺不出有卡頓），布局清晰，符合規(guī)范的同時(shí)又有自己思考。

?

「Muzzik」是一個(gè)音樂分享社區(qū)。如果我沒猜錯(cuò)的話，它的讀音和「music」是一樣的，其 slogan 為「最好時(shí)代的音樂故事，最壞時(shí)代的安慰劑」?！窶uzzik」通過響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)了一套 PC 與手機(jī)端通用的界面。整體的設(shè)計(jì)方案透露著一股強(qiáng)烈的個(gè)性，那應(yīng)該就是他們設(shè)計(jì)師所相信的他們用戶群體所擁有的個(gè)性。音樂播放方案使用了移動(dòng)端瀏覽器廣泛支持的new Audio()方案，即在內(nèi)存里創(chuàng)建HTMLAudioElement但是不掛載到 DOM 上。開發(fā)者朋友可能比較關(guān)心本次評選的冠軍使用的是哪套 MV* 方案，答案是 Angular。

http://v.youku.com/v_show/id_XMTQzODM0NjQzNg==.html

2015 年，移動(dòng)端 Web 依然非常弱勢，依然缺乏足夠的本地 API，缺乏足夠的性能；大量的公司依然只是把 Web app 當(dāng)做一個(gè)從微信里或者從 PC 網(wǎng)頁端給自家 app 導(dǎo)用戶的工具，提供服務(wù)只是順便。但是我們在運(yùn)營網(wǎng)上應(yīng)用店的過程中，仍然每天都能發(fā)現(xiàn)大量的優(yōu)秀 Web apps，這十個(gè)只是冰山一角。這也證明了「你的 Web 體驗(yàn)太差是因?yàn)樵愀獾那岸斯こ處?，糟糕的設(shè)計(jì)師，糟糕的決策者和糟糕的瀏覽器，而不是因?yàn)?Web」。

文章可以轉(zhuǎn)載，但請署名作者：「云集瀏覽器」團(tuán)隊(duì)。