Case Study:From Desktop to iOS
1. Keynote on iPad(iPad版Keynote)
桌面Keynote功能強(qiáng)大靈活易用册舞,是世界頂級的幻燈片制作軟件。用戶喜愛Keynote障般,因?yàn)樗粌H容易使用而且對大量細(xì)節(jié)擁有精準(zhǔn)的控制调鲸,比如動畫和文本屬性。
iPad版Keynote具備桌面版的基本功能挽荡,另外通過創(chuàng)造以下用戶體驗(yàn)使它可以輕松使用:
- 重點(diǎn)關(guān)注用戶的內(nèi)容
- 降低復(fù)雜度而不削弱功能
- 提供功能強(qiáng)大令用戶開心的快捷方式
- 調(diào)整桌面版用戶熟悉的特性
- 通過逼真的動畫提供交流和反饋
Keynote用戶可以迅速明白如何在iPad上使用藐石,因?yàn)槔迷膇Pad模式向用戶傳遞預(yù)期的功能。新用戶亦可輕松學(xué)習(xí)如何在iPad上使用Keynote定拟,因?yàn)樗麄兛梢宰匀挥谖ⅰ⑤p易地直接操控他們的內(nèi)容。
Keynote從桌面版向iPad版的轉(zhuǎn)變基于大量由淺入深的修改和重新設(shè)計(jì)青自。以下是一些最容易被發(fā)現(xiàn)的調(diào)整:
簡潔的工具欄角雷。工具欄上只保留少量元素,但是給用戶提供了一致的入口性穿,用戶可以調(diào)用創(chuàng)建內(nèi)容所需的所有功能。
簡潔有序的檢查器雷滚,及時響應(yīng)用戶的焦點(diǎn)需曾。iPad版Keynote檢查器自動包含了對用戶所選元素進(jìn)行修改的工具和屬性。通常祈远,在第一個檢查器視圖中用戶即可找到他們需要的所有改動功能呆万。如果他們需要修改不常用的屬性,可以去其它視圖中探尋车份。
大量的預(yù)制樣式集合谋减。利用預(yù)制樣式,用戶可以輕松改變諸如圖表和表格等元素的外觀扫沼。除了配色方案出爹,每個集合還包括預(yù)設(shè)樣式屬性庄吼,它們設(shè)計(jì)得與全局主題相協(xié)調(diào),比如表格標(biāo)題严就。
對內(nèi)容的直接操控总寻,并用有意味的動畫作修飾。在iPad版Keynote中梢为,用戶可以將幻燈片拖拽到新位置渐行,捻搓物體使之旋轉(zhuǎn),點(diǎn)擊圖片以選中它铸董。iPad版keynote用響應(yīng)動畫來加強(qiáng)這種直接操控的印象祟印。比如,當(dāng)用戶移動幻燈片時它會輕微地搏動粟害,當(dāng)用戶將幻燈片移動到新位置時蕴忆,周圍的幻燈片會泛起漣漪為其騰出空間。
2. Mail on iPhone(IPhone中的郵件)
郵件是OS X系統(tǒng)中最為矚目我磁、最好用孽文、最受用戶喜愛的應(yīng)用之一。它也是一款功能強(qiáng)大的軟件夺艰,用戶可以用它創(chuàng)建芋哭、接收、排序以及存儲郵件郁副,追蹤行動項(xiàng)目和事件减牺,還可以創(chuàng)建便簽和邀請。桌面版郵件應(yīng)用用一組窗口提供這些強(qiáng)大的功能存谎。
iPhone中的郵件著重關(guān)注桌面版郵件的核心功能拔疚,幫助用戶接收、創(chuàng)建既荚、發(fā)送以及組織他們的消息稚失,并且以一種專門為移動體驗(yàn)定制的用戶交互界面提供以上精煉功能,這些移動體驗(yàn)包括:
- 簡潔的外觀恰聘,將用戶關(guān)心的內(nèi)容置于前面且中心的位置
- 為完成不同的任務(wù)設(shè)計(jì)不一樣的視圖
- 符合直覺的信息結(jié)構(gòu)句各,讓用戶免于思索
- 當(dāng)用戶需要時,提供強(qiáng)大的編輯和歸類工具
- 精妙且傳神的動畫晴叨,為用戶傳達(dá)動作提供反饋
iPhone中的郵件并不是一個比桌面版郵件更好的應(yīng)用凿宾,而是一個專門為移動用戶重新設(shè)計(jì)的郵件,明白這一點(diǎn)非常重要兼蕊。通過專注于桌面版郵件的一部分特性并以一種令人著迷的簡潔用戶交互界面呈現(xiàn)出來初厚,iPhone版郵件應(yīng)用為使用移動終端的用戶提供了郵件的核心體驗(yàn)。
為了調(diào)整郵件應(yīng)用的用戶體驗(yàn)以適應(yīng)移動場景孙技,iPhone中的郵件在以下幾個關(guān)鍵途徑創(chuàng)新了用戶界面产禾。
清晰且高度集中的屏幕排作。每個屏幕顯示郵件功能的一個方面:賬戶列表诽嘉,郵箱列表斩祭,消息列表,消息視圖婉宰,以及編輯視圖势似。在屏幕內(nèi)拌夏,用戶可以滾動頁面看到所有內(nèi)容。
簡易且可預(yù)料的導(dǎo)航履因。每個頁面輕點(diǎn)一下障簿,用戶就可以從概要(賬戶列表)跳轉(zhuǎn)到特定內(nèi)容(一條消息)。每個頁面顯示一個標(biāo)題栅迄,告訴用戶他們在哪里站故,以及一個返回按鈕使用戶可以輕松原路返回。
簡單且可以點(diǎn)擊的控件毅舆,當(dāng)用戶需要時可用西篓。由于編輯信息也查收新郵件是用戶在任何場景中都可能會進(jìn)行的基本行動,iPhone版郵件讓這些操作在多個屏幕中都可用憋活。當(dāng)用戶閱讀消息時岂津,要保持諸如回復(fù)、移動和刪除等功能可用悦即,因?yàn)橛脩魰υ撓⑦M(jìn)行這些操作吮成。
為不同的操作設(shè)置不同類型的反饋效果。當(dāng)用戶刪除一封郵件時辜梳,它會生動地進(jìn)入垃圾桶圖標(biāo)內(nèi)粱甫。當(dāng)用戶發(fā)送郵件時,他們可以看到發(fā)送進(jìn)度作瞄;當(dāng)發(fā)送完畢茶宵,用戶可以聽到一個清晰的提示音。通過觀察消息列表的工具欄中那些微妙的文字宗挥,用戶可以瞬間發(fā)現(xiàn)他們的郵箱更新节预。
3. Web Content in iOS(iOS中的網(wǎng)頁內(nèi)容)
iOS版Safari為iOS設(shè)備提供了卓越的網(wǎng)頁瀏覽體驗(yàn)。用戶喜愛清爽的文本和銳利的圖片属韧,以及通過旋轉(zhuǎn)設(shè)備或點(diǎn)擊和縮放屏幕來調(diào)整顯示的能力。
符合標(biāo)準(zhǔn)的網(wǎng)站在iOS設(shè)備上有良好的顯示效果蛤吓。尤其是那些會檢測設(shè)備并且沒有插件的網(wǎng)站宵喂,在iPhone和iPad上看起來非常好,不需要或者僅需要一點(diǎn)點(diǎn)修改会傲。
此外锅棕,成功的網(wǎng)站通常:
- 如果網(wǎng)頁頁面寬度需要適配設(shè)備屏幕寬度拙泽,要為設(shè)備設(shè)置合適的視區(qū)。
- 避免在CSS中使用絕對定位裸燎,這樣一來當(dāng)用戶縮放頁面時顾瞻,內(nèi)容不會移出屏幕。
- 使用基于觸摸的UI德绿,不要依賴基于指針的交互荷荤。
有時,其它的調(diào)整是合適的移稳。例如蕴纳,網(wǎng)頁應(yīng)用總是要設(shè)置合適的視區(qū)寬度,而且要經(jīng)常把iOS中Safari的界面隱藏个粱。學(xué)習(xí)更多相關(guān)調(diào)整古毛,在Safari Web Content Guide參考Configuring the Viewport和Configuring Web Applications.
網(wǎng)站也可以從以下途徑對iOS版Safari進(jìn)行桌面網(wǎng)頁體驗(yàn)遷移:
適配iOS版Safari的鍵盤。當(dāng)鍵盤和表格助手出現(xiàn)時都许,iPhone版的Safari應(yīng)該把網(wǎng)頁顯示在URL文本區(qū)下方以及鍵盤和表格助手上方的區(qū)域稻薇。
適配iOS版Safari中的彈出式菜單控件。在桌面版Safari中胶征,像其它OS X應(yīng)用一樣塞椎,彈出式菜單包含大量項(xiàng)目;也就是說弧烤,菜單展開后應(yīng)該顯示出所有的項(xiàng)目忱屑,必要時可以超出屏幕邊界。在iOS版Safari中暇昂,彈出式菜單使用原生元素顯示莺戒,提供了更好的用戶體驗(yàn)。比如急波,在iPhone中从铲,彈出式菜單以選擇器的形式出現(xiàn),為用戶提供一系列的選擇供用戶挑選澄暮。(學(xué)習(xí)更多選擇器控件的相關(guān)資料名段,參考選擇器)。