2015 年十佳 HTML5 應用

時間 2019-11-06

標籤十佳 html5 html 應用欄目 HTML5 简体版

原文原文鏈接

前言

優秀的前端工程師戴着腳銬跳舞，究竟能把 HTML5 的體驗推動到什麼程度？html

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

下面我將分別介紹這些 Web apps，解釋爲何它是這個名次，並附上一個截圖。在文章的末尾，我會附上一個由我同事製做的視頻，經過實際操做來演示這些 Web apps，全部演示均在雲集瀏覽器 iOS 版內進行。git

注意：github

這篇文章的全部觀點、見解與評論，均發表於 2016 年 1 月 4 日，要知道，Web 是隨時能夠更新的，我下面提到的這些 Web apps，你看到的可能已經和我看到的不同了；web
時間範圍爲在 2015 年上線，或者在 2015 年 HTML5 端正式上線的產品；後端
均爲國內的 Web apps，或者主要面向國內市場的 Web apps；瀏覽器
其實原本標題是「2015 年十佳 Web apps」。安全

正文

第十名「720 雲」

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

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

第九名「Yummy」

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

第八名「動漫之家」

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

第七名「BusyWeek!」

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

第六名「氧氣」

「氧氣」是一個專一於女性內衣推薦的 app，其網頁端的體驗也十分優秀，基本上延續了他家 native app 的設計語言，而且能夠直接在網頁上完成購買。缺點和「動漫之家」差很少，沒有實現 SPA。這個問題的本質實際上是「到底是服務器端渲染仍是客戶端渲染，或者到底哪些部分該服務器端渲染哪些部分該客戶端渲染，之後有機會的話，但願能單獨寫一篇文章討論」。

第五名「Flipboard 中國」

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

第四名「Anitama」

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

第三名「石墨」

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

第二名「一點資訊」

做爲一個資訊閱讀類 Web app，「一點資訊」幾乎挑不出任何毛病。全部的新聞排版是爬蟲索引後再二次處理過的，全部的界面切換均無卡頓（或者設計得讓你感受不出有卡頓），佈局清晰，符合規範的同時又有本身思考。

第一名「Muzzik」

「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」。

文章能夠轉載，但請署名做者：「雲集瀏覽器」團隊。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。