旅程計劃應(yīng)用（Wayfindit： Trip Planner App）

在大多數(shù)情況下，Wayfindit的應(yīng)用必須有很好的易用性。旅行是一件很復(fù)雜的事情，不管是商業(yè)旅行還是休假旅行，一個順利的旅程要求從家門到目的都沒有意外之憂。Wayfindit的應(yīng)用要能給旅行者提供所需信息，并且要快而準確。這意味著它需要一個最小的、直觀的、響應(yīng)式界面，能在前端提供有關(guān)內(nèi)容的重要信息——HTML5的地理感知和離線存儲特性實現(xiàn)。

一個完美的袖珍指南

它就裝在你的口袋里或者包里，即時提供信息。它擁有本地存儲和地理感知功能，只需要檢查下當(dāng)天時間，Wayfindit Trip Planner app就能顯示出你的日程表，并在你有時間剩余時給出建議，在你靠近一個美麗景點時給出提醒，以及一個智能地圖和方位指示。

Wayfindit Trip Planner app利用HTML5的特性給人們提供了一個方便的、隨時隨地提供服務(wù)的、智能的旅程伴侶。它具有很好的交互能力——視覺上清晰，性能優(yōu)異，能明白旅行者的需求和所處環(huán)境。它能讓假期更為愉快，使用起來也讓人倍覺樂趣。

到達服務(wù)

飛機剛剛降落？基于旅客的位置和最后一次訪問互聯(lián)網(wǎng)時的信息，Wayfindit Trip Planner app就能立即提供一輛出租車，以及附近的餐廳或活動信息，或到酒店的路徑（以及酒店距離此處的距離）。

所有這些信息的到達都以以毫秒為單位——這個應(yīng)用由內(nèi)而外都設(shè)計精巧，各部分功能都盡量壓縮，以確保它給人感覺迅速。

住房服務(wù)

旅行者這時候駕著租來的車駛向了旅館。應(yīng)用了解這一點，并會在隨后提供停車位數(shù)目。所有這些信息都是存儲在本地的——不管是否有網(wǎng)絡(luò)連接，這些信息都是即刻可用的。

多種選擇

Wayfindit Trip Planner App采用了HTML5和CSS的響應(yīng)式設(shè)計。在一個較大的屏幕上，比如筆記本或平板電腦，它能提供更多信息。除了酒店入住和出租車租賃信息，還會提供一些周邊信息，例如酒店和活動推薦。（在手機上也能看到相同信息，但是需要向下滾動頁面。）

酒店和活動推薦是基于旅行者的地點和當(dāng)日時間。

飯店服務(wù)

想要知道去飯店怎么走？Wayfindit的Trip Planner知道怎么到那兒——步行、打車或者使用公共交通（如果它知道那兒沒有可租用的車，就采用公共交通）。如果旅行者正在使用這個應(yīng)用，他只需要一次點擊就能呼叫正確的電話號碼找到交通工具。

由于這個應(yīng)用是可感知地理位置的，它能提供周邊的景點信息，這些信息存儲于本地數(shù)據(jù)庫，Wayfindit Trip Planner App能根據(jù)數(shù)據(jù)庫信息作出智能推薦。

總結(jié)功能

一日結(jié)束后的回顧總結(jié)能讓旅行者留下更深刻的旅行記憶，這同時也能提升Wayfindit Trip Planner App的明日推薦。Wayfindit Trip Planner App提供了一些漂亮的HTML5表單，讓用戶可以很方便地為當(dāng)天活動作出評級。

Khan學(xué)院（Khan Academy）

Khan Academy以視頻課堂的形式提供了豐富的教育資源，這些資源富于教育性，容易獲取，并且完全免費。Khan Academy還提供了一個“知識地圖”和一些統(tǒng)計數(shù)據(jù)，引導(dǎo)你學(xué)習(xí)課程，并且記錄你的進度。這對世界各地的學(xué)生而言都是非常好的資源，無論是在校內(nèi)還是校外，無論是出于教學(xué)目的還是僅僅出于興趣。它值得使用web上最好的展現(xiàn)技術(shù)，所以我們將Khan Academy作為一個例子，將其引入HTML5的時代。

焦點集中在教學(xué)內(nèi)容

Khan Academy的視頻內(nèi)容是其網(wǎng)站的焦點，我們做了重新設(shè)計，使視頻處于前端，免于干擾。視頻占滿屏幕，輔助信息在不需要的時候都消失了，以提供沉浸體驗。當(dāng)導(dǎo)航出現(xiàn)的時候，它也是最小化的——一切都是為了學(xué)生更好地學(xué)習(xí)。評論和提問部分都是最小化的，并且除非用戶需要，評論和提問部分的內(nèi)容是不會加載的，以節(jié)約加載時間。鍵盤上的一些快捷鍵讓導(dǎo)航更為容易。

界面本身遵循響應(yīng)式設(shè)計的思想，通過使用HTML5的meta viewport tag和CSS的媒體查詢功能，移動設(shè)備用戶在他們的設(shè)備上可以看到相同內(nèi)容，但這些內(nèi)容都是以最適于他們設(shè)備的布局呈現(xiàn)。

一個進度條（使用HTML5的《progress》元素）為學(xué)生的學(xué)習(xí)進度提供了一個直觀的視覺反饋。本地存儲的使用使得查詢學(xué)習(xí)進度十分方便——無需登錄存儲或者記錄數(shù)據(jù)，未來，這一應(yīng)用還將大幅度提升其性能。

學(xué)習(xí)樹

在“學(xué)習(xí)”標簽下，有一個內(nèi)容明細，Khan Academy的上千學(xué)習(xí)課程和聯(lián)系都分成目錄和子目錄，易于檢索。在這里也有一個進度條，提示學(xué)生各個標簽下課程的學(xué)習(xí)進度。

在目錄和子目錄之外，會提供一個課程清單，一門課程中的一組視頻是通過棧來指明的。和Khan Academy網(wǎng)站的已有組織不同，Khan Academy的HTML5應(yīng)用中的視頻課程和內(nèi)容是以相關(guān)度進行分組的，這樣相關(guān)內(nèi)容都可以在一個地方就可以訪問到。

Khan Academy web app使用了HTML5為學(xué)生提供了一個設(shè)計精良、永遠在線的資源，他們可以學(xué)習(xí)、練習(xí)、跟蹤所學(xué)內(nèi)容。鼓勵學(xué)生去學(xué)習(xí)可能是比較困難的，但是Khan Academy盡可能多地去除了障礙。它速度快，可以交互，并且提供了大量有著直觀導(dǎo)航的學(xué)習(xí)資源，所有資源都可以無干擾使用。

美圖（Picture Page）

Picture Page給了人們以一種全新的方式去看發(fā)生在世界上的事情。如果說一幅圖相當(dāng)于1000個詞，那么Picture Page比世界上大多數(shù)出版物提供的都多，情感和細節(jié)都得以展現(xiàn)。Picture Page上只是一系列圖片，附帶有很小的、簡單的不顯眼的標題，這個站點的強大之處正在這里——它讓圖片作為焦點，讓圖片去講述它們自己的故事。沒有彈框，沒有難以導(dǎo)航的幻燈片，沒有微縮圖。這個HTML5 Picture Page app給現(xiàn)有的很多圖片新聞網(wǎng)站提供了一個創(chuàng)新的方式，將它們帶入了一個全新的web app世界。

順其自然

Picture Page這個應(yīng)用名字本身就很好地描述了它——大的圖片是它成功的關(guān)鍵。Picture Page的HTML5的re-imagining功能讓圖片可以以更大方式展現(xiàn)。通過使用CSS的background-size性質(zhì)來自動縮放照片，照片可以占滿全屏，成為焦點。

響應(yīng)式設(shè)計使得移動設(shè)備用戶能看到大小合適的小版圖片；CSS3的媒體查詢語句使得圖片可以全屏展現(xiàn)而又不影響性能。它還能夠像native mobile app一樣檢測揮動和觸屏動作。Picture Page在任何設(shè)備上感覺都十分自然。

把用戶體驗放在第一位

Javascript讓用戶可以通過鍵盤快捷鍵對Picture Page.進行導(dǎo)航。使用左右箭頭或者自己約定的J\K鍵可以向前或向后翻動圖片，這樣就減少了用鼠標導(dǎo)航時尋找光標帶來的干擾。當(dāng)不需要的時候，箭頭是被隱藏的，這樣圖片就不會受到影響。

使用HTML5的《progress》 tag，可以展現(xiàn)相冊訪問者的進度。

Picture Page是應(yīng)用時代沒有使用背景構(gòu)建（ground-up reconstruction）的一個很好的例子。它優(yōu)雅，視覺效果好，備受喜愛。因此我們可以在合適的地方應(yīng)用HTML5提供的特性，將現(xiàn)有網(wǎng)站和新鮮的技術(shù)結(jié)合，展現(xiàn)出更好更大的圖片。

本文編譯自ling，原文地址。

譯文出處：webapptrend.com，轉(zhuǎn)載請注明出處鏈接。

延伸閱讀：

• Google Web App開發(fā)指南第二章：交互設(shè)計
• Google Web App開發(fā)指南第一章：什么是Web Apps？

標簽： Web-App App �发指�

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。