[譯]《iOS Human Interface Guidelines》——Case Study:From Desktop to iOS

案例學習:從桌面到iOS

iPad端的Keynote

桌面端的Keynote是一款強大的、靈活的創造世界級幻燈片的app。人們因Keynote很好地結合易于使用與無數細節打造的細粒度控制而喜愛它,比如動畫和文本屬性。

image

iPad端的Keynote把握了桌面端Keynote的精華,并通過創造如下的用戶體驗使其在iPad上賓至如歸:

  • 專注于用戶的內容

  • 降低復雜性而不減少功能

  • 提供快捷方式

  • 改編桌面端體驗上熟悉的內容

  • 通過生動的動畫提供反饋和交流

由于通過使用iPad原生的模式來提供期待的功能,Keynonte用戶能夠很快明白如何在iPad上使用app。新用戶也能很容易地學會如何在iPad上使用Keynote,因為他們可以通過簡單、自然的方式直接操控他們的內容。

Keynote從桌面端到iPad端的轉變是基于無數從細微到深入的修改和重設計的。這里是一些最明顯的適應性改編:

一個精簡的工具欄。工具欄上只有少量的元素,但它們使用戶能夠始終獲取他們創造內容所需要的功能和工具。

image

一個簡化的、主次排列的檢查器來響應用戶的關注。iPad端的Keynote檢查器會自動包含人們在修改所選中的物體的時候需要的工具和屬性?;旧先藗兛梢栽跈z查器的第一頁獲取他們需要的所有內容。如果他們需要修改一些較少改變的屬性,他們可以繼續到別的檢查器界面獲取。

image

很多的預置風格集合。人們可以通過預置的風格來簡單地改變物體的外觀和感覺,例如圖標和表格。除了顏色方案,每種集合都包括了對應風格的屬性,比如表頭和坐標軸標識,它們被設計成與所有主題相協調。

image

直接操控內容,并且配有合乎意義的動畫。在iPad端的Keynote上,用戶拖動幻燈片使其到新的位置,扭轉物體使其旋轉,以及點擊圖片來選中它。直接操控的印象為iPad端的Keynote執行的響應動畫所加強。比如說,當用戶移動幻燈片時,它會輕輕地震動一下,當他們將幻燈片放置到一個新的位置時,周圍的幻燈片會像波紋一下向外擴展來給它提供空間。

iPhone端的郵件

在OS X系統中郵件是最高可見的、好用的以及受贊譽的app之一。它也是一個非常強大的創建、接收、排序、存儲郵件;追蹤行動項目和活動;創建備注和請帖的程序。桌面端的郵件使用了很多的視窗來呈現這些強大的功能。

image

iPhone端的郵件專注于桌面端郵件的核心功能,幫助人們接收、創建、發送和管理他們的郵件。iPhone端的郵件使用了如下為移動端體驗定制的UI來提供這些濃縮的功能:

  • 流線型的外觀使人們的內容前置居中

  • 為不同的任務設計不同的視圖

  • 可以輕松縮放的直覺性的信息結構

  • 在需要的時候提供強大的編輯和管理工具

  • 使用精妙而有表現力的動畫來與動作交互并提供反饋

要認識到iPhone端的郵件并不是一個比桌面端郵件更好的app,而是一個重新為移動端用戶設計的郵件app。通過集中精力與桌面端的部分特性并使用愈加迷人的UI展示它們,當他們使用移動端的時候,iPhone端的郵件給予了人們郵件的核心體驗。

為了使郵件的體驗符合移動端的環境,iPhone端的郵件使用了很多關鍵的方式創新UI。

清晰的、高關注度的屏幕。每個屏幕都展示了郵件體驗的一部分:賬戶列表、郵箱列表、郵件列表、郵件視圖以及新建郵件視圖。在一個屏幕上,用戶可以滑動查看所有內容。

image

簡單、可預測的導航。點擊每一個屏幕,人們會從一般界面(賬戶列表)進入到特殊界面(郵件視圖)。每個屏幕都展示了一個標題來告訴人們他們在哪,以及一個返回按鈕使人們可以簡單地回到之前的步驟。

簡單、可點擊的控件會在需要的時候顯示。因為創建一封新郵件以及檢查新郵件是人們也許會在任何環境下都想要的基本功能,iPhone端的郵件使它們在很多屏幕上均可獲取。當人們查看一封郵件時,諸如回復、移動和刪除功能都是可獲取的,因為他門正在操作一封郵件。

不同的任務有不同類型的反饋。當人們刪除一封郵件時,它會有進入刪除按鈕的動畫。當人們發送一封郵件時,他們可以看到這個過程;當發送結束時,他們可以聽到一聲有特色的聲音。通過查看郵件列表工具欄的精細文本時,人們可以瞥一眼就知道他們的郵箱上一次更新是什么時候。

iOS端的Web內容

iOS端的Safari提供了iOS設備中杰出的移動Web瀏覽體驗。人們欣賞其簡明的文字、銳利的圖片以及通過旋轉設備或點擊屏幕來調整他們的界面的能力。

標準的網頁能在iOS設備上良好地顯示。特別是那些識別設備并且不使用插入式的網頁可以在iPhone和iPad上都顯示得很棒,即使需要調整也只是一點點。

除此之外,最成功的網頁有以下特性:

  • 如果網頁的寬度需要匹配設備的寬度的話,為設備設置合適的窗口

  • 不要使用CSS固定定位,這樣當用戶調整視圖的時候內容就不會移出屏幕

  • 使用不依賴于點交互的基于觸摸的UI

有時候,其他的修改也會合適。比如說,網頁程序總是設置適當的窗口寬度并隱藏iOS端Safari的UI。查看Safari Web Content Guide中的Configuting the Viewport和Configuring Web Applications學習如何做這些修改。

網頁也可以使用其他方式來使桌面Web體驗適應iOS端的Safari:

協調iOS端Safari中的鍵盤。當鍵盤和格式助手可見的時候,iPhone中的Safari會在URL文本內容以下、鍵盤和格式助手以上的區域顯示你的網頁。

協調iOS端Safari中的彈出菜單控件。在桌面端的Safari中,包含大量內容的彈出菜單會像在OS X的app中一樣顯示;也就是說,菜單會打開來顯示所有的內容,如果必須的話甚至會超出窗口的邊界。而對于iOS端的Safari,彈出菜單是使用原生的元素顯示的,因而提供了一個更好的體驗。比如說,在iPhone上,彈出菜單通過一個選取器(一個用戶可選的內容組成的列表)來顯示。(查看Picker學習更多關于選取器控件的內容)。

本文翻譯自蘋果官方開發文檔

查看完整合集


查看作者首頁

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,578評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,701評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,691評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,974評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,694評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,026評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,015評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,193評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,719評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,442評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,668評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,151評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,846評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,255評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,592評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,394評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380

推薦閱讀更多精彩內容