在 Windows 8 和 iOS 平板電腦上為 Office Web Apps 新增觸控編輯功能

英文原文已於 2012 年 8 月 20 日星期一發佈

我們在幾週前推出新的 Office Web Apps (可能為英文網頁)。我們已加入新的功能，提升我們應用程式的效能，並持續讓您到處在各個受歡迎的瀏覽器中存取文件。

 

 

 

今天我們很高興能向您介紹一個輸入的全新方式，那就是觸控操作，在 Office Web Apps 中，它可為支援觸控功能的平板電腦和瀏覽器帶來成熟的檢視及編輯功能，這些平台包括 Windows 8 上的 IE 和 iOS 上的行動 Safari。

 在針對觸控功能設計 Office Web Apps 時，我們著眼於達成下列目標而展開計劃：

• 使用者必須能立即開啟並執行具觸控功能的 Office Web Apps
• 使用者無需學習如何瀏覽新的使用者介面
• 使用者可輕鬆在觸控和滑鼠/鍵盤操作功能之間來回移動
• 在平板電腦和觸控監視器等觸控裝置上，必須能夠啟用 Office Web Apps 的完整功能集，包括編輯工具。

建立可觸控及對觸控輸入具回應的使用者介面，是一項有意思的設計挑戰。在本文中，我會說明我們如何加以達成。

針對觸控功能開發架構

我們參照我們支援的平台並遵循 Microsoft Office 桌面應用程式、Windows 8 和 iOS 適用的「觸控互動」指導方針，開發了一個整合架構。我們也考量使用者在使用特定觸控裝置時所期待擁有的體驗和觸控功能，來為該架構進行平衡調整。

我們秉持下列原則來建立跨平台的使用者體驗：

• 僅使用觸控輸入就能提供絕佳的端對端體驗
  • 專注於觸控裝置上的實例和體驗
  • 確保使用者可信心地以觸控功能操作使用者介面
  • 建立簡易及直覺式的觸控操作
  • 善用瀏覽器功能
• 使用觸控、滑鼠和鍵盤組合，確保完善的端對端體驗
  • 使用者可在觸控或滑鼠和鍵盤操作間輕鬆地來回切換，以便與應用程式互動
  • 應用程式會回應輸入。

讓我們對這些原則一一探索：

觸控功能的實例和體驗最佳化

我花費數日時間撰寫本文，也修訂了好幾次。正如你們大多數人一樣，我並非總是坐在辦公桌前，也並未把筆電帶至我孩子的劍術課中工作。我是在辦公室的桌上型電腦上開始撰寫本文的，由於文件上傳到 Skydrive 後到處皆可取用，我便繼續在平板電腦上加以編輯。

透過對使用者進行研究所找出的用法和行為上的趨勢和模式，讓我們得以將目標鎖定在兩個實例上：

1.        閱讀和使用文件內容及檢視簡報和試算表將是個快速、有趣、精彩的體驗。

• 在平板電腦上，閱讀和使用資訊是大多數人最喜愛的活動。
• 使用者瀏覽文件和簡報，並對同事和朋友的共用內容進行評論。
• 另外一部分人士則想將所有購車資訊的研究結果彙整到 OneNote Web App，以便在進行車款議價時使用平板電腦上的資訊。

 2.        在使用者新增、修改和修訂文件時，少量編輯功能將無比實用。

• 像我這樣的媽媽會想要在試算表中快速進行登記，以安排帶點心到我孩子學校親師生會所舉辦的同樂餐會中。

• 學生想要快速編輯他們正在撰寫的報告，並針對他們需要潤飾的簡報進行共同作業。

值得信賴的觸控功能

在使用者介面上使用觸控操作時，沒有比非預期的操控結果更令人沮喪的事件。當您可放心操作您要的觸控功能或使用者介面的一部分，使用應用程式時的信心就會提升。

在與使用者介面進行精確、控制良好的互動時，滑鼠是一項工具。若搭配實體鍵盤來使用，在精確放置插入點、進行選取、點擊按鈕和叫用內容功能表、下拉式清單和其他 UI 時，滑鼠可帶給使用者信心。

人類的手指形狀和大小各有不同。在放置插入點這點上，對手指並非易事，而在控制與使用者介面的互動時又顯得缺乏精確度。

我們的目標是讓使用者能放心觸控使用者介面，並取得預期結果，讓情況彷彿使用滑鼠一般。

要讓物件易於觸控需取決於目標物的大小。功能區控制項和內容功能表等許多使用者介面元素的大小，遠遠低於 Windows 8 和 Microsoft Office 定義的「可觸控」大小下限。

新的 Office Web Apps 讓所有這些元素易於觸控。我們高度關注功能的調和，不但增加 UI 實際大小，也儘可能呈現實際文件內容的真正外觀。

 

 

近距離觀看這些更大、更易觸控的按鍵和控制項間所具有的舒適空間：

 

 Excel Web App 的 [首頁] (Home) 索引標籤：

PowerPoint Web App 的 [插入] (Insert) 索引標籤：

OneNote Web App 的 [首頁] (Home) 索引標籤：

Word Web App 的色彩選擇器：

使用簡易且直覺式的觸控操作

我們的核心目標之一，就是讓使用者以簡易且直覺的觸控操作在平板電腦上立即使用 Office Web Apps，而無需利用需要記憶及學習的複雜手勢。

只要五個動作即可開始使用：

 

讓我們看看您如何能在 Office Web Apps 中使用這些動作：

捲動並瀏覽文件

當您需要快速檢視文件時，可以使用快速捲動動作進行撥動/輕拂。文件內容會快速平順地加速捲動，只要輕點一下即可中斷捲動。

在 Word Web App 中，我們在 [閱讀和編輯] 檢視時使用原生的瀏覽器功能進行加速捲動。

在 PowerPoint Web App 中，您可以使用相同的撥動動作變換投影片。

放大和縮小：

藉由將兩根手指張開或併攏，即可在使用者介面上進行放大和縮小。

打字：

在 Office Web Apps 的 [編輯] 檢視中輕點一下，即可放置插入點並顯示鍵盤開始打字。

 

Word Web App 中的插入點：

 

注意插入點的外觀會和您使用滑鼠和鍵盤時所看到的不一樣。插入點隨附的圓形「移駐夾」可讓您輕鬆抓住，並拖曳以進行選取。

打字是編輯的基礎，所以一項核心的支援實例即是確保能有良好的使用體驗。

放置插入點

因為手指非一項精確的輸入工具，所以我們必須找出可靠方式，讓使用者在想要的地方放置插入點。

大多數使用者不是修改單字的開頭，就是結尾。

所以我們在放置插入點時使用「書夾」方法：

在現有單字上輕點一下，估算最近的一端 (單字開頭或單字結尾) 並將插入點放置於該處。在相同單字上再輕點一下，將插入點精準地放置在觸控動作標記的確切位置。

選取範圍

您可在文字和物件的選取範圍上進行操作、套用格式或執行其他動作。使用者可使用滑鼠和鍵盤上的控制鍵和 Shift 鍵，有效率地執行這些作業，因為它們可提供精確的目標鎖定功能。

在觸控的環境中，插入點上的「移駐夾」可作為抓取的把手，可用於拖曳和建立新的選取範圍。您也可以使用移駐夾的各端點來縮小或放大選取區域，以修改現有的選取範圍。

在 Word Web App 中拖曳移駐夾以選取文字：

 

  拖曳以選取插入表格的尺寸：

 

在內容中套用動作：

在特定情況中套用動作時，內容功能表可提供快速簡便的方式。您可能已熟悉在 Office Web Apps 中利用滑鼠使用內容功能表。要顯示內容功能表只要按一下滑鼠右鍵。

在 Word Web App [編輯] 檢視中按一下滑鼠右鍵出現內容功能表：

 

我們為您簡化取得內容功能表的過程，您僅需輕點一下選取範圍就可加以顯示。在內容功能表以外的地方輕點一下可加以關閉。

 

輕點一下選取範圍可顯示內容功能表：

 

 

注意看，內容功能表上控制項間有著為觸控操作設想的舒適空間。

在插入點的位置，您可以迅速向下移動手指來顯示內容功能表：

 

在 Word Web App [閱讀] 檢視中，輕點一下可選取一整列。在選取範圍上輕點一下可顯示內容功能表。

 

Word Web App Viewer 中的 [選取範圍和內容] 功能表：

 

結合觸控、滑鼠和鍵盤的使用，確保完善的端對端體驗

平板電腦可搭配觸控、滑鼠和鍵盤輸入加以使用。

在 Windows 8 上，可以觸控或滑鼠及鍵盤，或這兩者的結合來使用 Office Web Apps。在 iOS 中，使用觸控輸入可讓 Office Web Apps 的運作最為順暢。

觸控模式

在 Office Web Apps 中。使用者介面可區分為下列：

• 固定的使用者介面

此使用者介面永遠存在並顯示於應用程式中。

例如：OneNote Web App 功能窗格、功能區

• 關聯式使用者介面

此使用者介面會視需要顯示或消失。

例如：內容功能表

當您使用觸控裝置時，Office Web Apps 預設會在觸控模式中顯示固定使用者介面。您可以切換 [觸控模式] 按鈕來變更此模式，以使用透過滑鼠操作的使用者介面。

[觸控模式] 按鈕會顯示在 Office Web Apps 左上方的 [快速存取工具列] 中，可讓您在觸控和精確/滑鼠模式間進行切換。

觸控模式按鈕：(切換為開啟) 顯示可觸控的使用者介面：

 

觸控模式按鈕特寫：

 

無論使用觸控或滑鼠操作，內容功能表、功能區飛出視窗和功能表僅會視需要顯示，以及在叫用它們的輸入法中顯示。

摘要：

我建議您使用 Windows 8 觸控裝置和 iPad 上的 iOS，在 skydrive.com (可能為英文網頁) 或 Office 365 (可能為英文網頁) 試試新的 Office Web Apps Preview。

我們期待聽到您的使用體驗，所以我鼓勵您給予我們寶貴意見。「給予意見反應」的選項位於應用程式右上角和 [檔案] 功能表中。

我們會持續提升並改善使用體驗，並積極聽取您的喜惡建議。

 Renu Devi

專案經理，Office Web Apps

 

這是翻譯後的部落格文章。英文原文請參閱 Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets