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

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

一個(gè)完美的袖珍指南

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

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

到達(dá)服務(wù)

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

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

住房服務(wù)

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

多種選擇

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

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

飯店服務(wù)

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

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

總結(jié)功能

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

Khan學(xué)院（Khan Academy）

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

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

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

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

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

學(xué)習(xí)樹

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

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

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

美圖（Picture Page）

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

順其自然

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

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

把用戶體驗(yàn)放在第一位

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

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

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

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

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

延伸閱讀：

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

標(biāo)簽： Web-App App �发指�

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