CH2. Design strategies(03)——Case Study:From Desktop to iOS

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 ViewportConfiguring 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)資料名段,參考選擇器)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末泣懊,一起剝皮案震驚了整個濱河市伸辟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌馍刮,老刑警劉巖信夫,帶你破解...
    沈念sama閱讀 218,682評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡静稻,警方通過查閱死者的電腦和手機(jī)警没,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來振湾,“玉大人杀迹,你說我怎么就攤上這事⊙禾拢” “怎么了树酪?”我有些...
    開封第一講書人閱讀 165,083評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長嵌言。 經(jīng)常有香客問我嗅回,道長,這世上最難降的妖魔是什么摧茴? 我笑而不...
    開封第一講書人閱讀 58,763評論 1 295
  • 正文 為了忘掉前任绵载,我火速辦了婚禮,結(jié)果婚禮上苛白,老公的妹妹穿的比我還像新娘娃豹。我一直安慰自己,他們只是感情好购裙,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評論 6 392
  • 文/花漫 我一把揭開白布懂版。 她就那樣靜靜地躺著,像睡著了一般躏率。 火紅的嫁衣襯著肌膚如雪躯畴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,624評論 1 305
  • 那天薇芝,我揣著相機(jī)與錄音蓬抄,去河邊找鬼。 笑死夯到,一個胖子當(dāng)著我的面吹牛嚷缭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播耍贾,決...
    沈念sama閱讀 40,358評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼阅爽,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了荐开?” 一聲冷哼從身側(cè)響起付翁,我...
    開封第一講書人閱讀 39,261評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎晃听,沒想到半個月后胆敞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體着帽,經(jīng)...
    沈念sama閱讀 45,722評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年移层,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赫粥。...
    茶點(diǎn)故事閱讀 40,030評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡观话,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出越平,到底是詐尸還是另有隱情频蛔,我是刑警寧澤,帶...
    沈念sama閱讀 35,737評論 5 346
  • 正文 年R本政府宣布秦叛,位于F島的核電站晦溪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏挣跋。R本人自食惡果不足惜三圆,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望避咆。 院中可真熱鬧舟肉,春花似錦、人聲如沸查库。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽樊销。三九已至整慎,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間围苫,已是汗流浹背裤园。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留够吩,地道東北人比然。 一個月前我還...
    沈念sama閱讀 48,237評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像周循,于是被迫代替她去往敵國和親强法。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評論 2 355

推薦閱讀更多精彩內(nèi)容