摘要：第五名中國中國在我們的網上應用店里一直評分較高，排名較前。中國手機網頁端的滑動體驗和閱讀體驗都非常優秀，究其原因，我認為是十分用心的體驗設計，與優化過的請求，和它對于加速的應用。值得一提的是，中國是基于最近大熱的開發的。

優秀的前端工程師戴著腳銬跳舞，究竟能把 HTML5 的體驗推進到什么程度？

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

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

注意：

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

時間范圍為在 2015 年上線，或者在 2015 年 HTML5 端正式上線的產品；

均為國內的 Web apps，或者主要面向國內市場的 Web apps；

其實本來標題是「2015 年十佳 Web apps」。

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

為什么「720 云」在我心目中只能排到第十名呢？因為他們的列表頁對移動端實在太不友好，給了一個「十分隨意」的響應式設計就了事了。當然全景頁的體驗很重要，列表頁的也是很重要的，這種程度的響應式簡直就和 bug 一樣。

?

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

?

「動漫之家」擁有大量優秀的原創漫畫，其手機網頁端設計十分清爽，閱讀體驗也十分良好，基本符合移動端用戶的使用模式，美中不足的是，沒有實現 SPA，也沒有足夠且有意義的動效。

?

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

?

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

?

「Flipboard 中國」在我們的網上應用店里一直評分較高，排名較前。除了其中的資訊內容，和它優秀的體驗也是分不開的。「Flipboard 中國」手機網頁端的滑動體驗和閱讀體驗都非常優秀，究其原因，我認為是十分用心的體驗設計，CDN 與優化過的 HTTP 請求，和它對于 GPU 加速的應用。值得一提的是，「Flipboard 中國」是基于最近大熱的 React 開發的。

?

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

?

「石墨」的 slogan 是「最優美的在線協作文檔」，介紹為「支持多人同時對文檔編輯和評論，讓你與他人輕松完成協作撰稿、方案討論、會議記錄和資料共享等工作」。「石墨」的功能十分強大，通過 WebSocket 實現實時的協作，并且在網頁端也能和其他所有客戶端互相同步。雖然目前在手機網頁端能做的事情有限，但是最核心的功能「協作編輯」與「邀請協作者」使用完全沒有問題。

?

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

?

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

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

2015 年，移動端 Web 依然非常弱勢，依然缺乏足夠的本地 API，缺乏足夠的性能；大量的公司依然只是把 Web app 當做一個從微信里或者從 PC 網頁端給自家 app 導用戶的工具，提供服務只是順便。但是我們在運營網上應用店的過程中，仍然每天都能發現大量的優秀 Web apps，這十個只是冰山一角。這也證明了「你的 Web 體驗太差是因為糟糕的前端工程師，糟糕的設計師，糟糕的決策者和糟糕的瀏覽器，而不是因為 Web」。

文章可以轉載，但請署名作者：「云集瀏覽器」團隊。