2011-12-17

    【转】【客座文】Windows Phone Review一个台湾UI设计师兼果粉眼中的wp7 - [Sankey喜欢的杂项]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/sankey-logs/182080673.html

    這篇文章很長,先去買杯咖啡吧。

    上官借了我一支 Windows Phone 手機,裡面裝了最新的 Windows Phone 7.5 代號 Mango(哪種怪公司會把 OS 的名稱叫做 Windows Phone?),我用了兩個禮拜,感覺很不錯。

    整體而言,Mango 是個相當優秀的作業系統,它有獨特的設計風格與操作方式,並有清楚的操作邏輯貫穿整個系統,只要玩過幾次後,就能輕鬆的使用它。

    而且 Mango 完全不會 lag。

    若要我推薦手機給家人或朋友,除了 iPhone 外,我也會推薦 Windows Phone。

    HTC 硬體

    這次搭配的是 HTC Surround 什麼的,是個硬要「差異化」做出來附有喇叭的垃圾。

    預載軟體

    Windows Phone 基本上跟 iOS 環境類似,是個封閉且受微軟掌控的架構,不但有需審核的 Market Place,手機螢幕大小與實體按鍵也都有規定,這是很好的事,唯一和 Apple 不同的大概是「預載軟體」這件事。

    我拿到的手機裡面也已經裝了一些 HTC 軟體,非常顯眼,因為就是 HTC 的東西顏色跟人家不一樣,而且長得很詭異。我一拿到就馬上把跟 HTC 有關的東西都刪了。

    各廠牌的 Windows Phone 也會搭配對應的預載軟體。

    同事 Richard 的 Nokia Lumia 800 裡預載了 Nokia 自己做的地圖與導航軟體,據說品質很不錯;而我用的那隻 HTC 裡的預載軟體都是沒什麼用垃圾軟體。

    主畫面

    Mango 上用的是微軟的 Metro UI。這套介面的設計概念很簡單:「所有的 app 用色塊表示,而所有內容用純文字或圖片表示。」1

    Mango 的底層分兩個部分,一左一右,你可以用手指左右滑動來切換兩個畫面。

    左邊是一堆色塊(Tile)構成的主畫面,排的很整齊,而且有清楚的圖示;主畫面右邊則是所有 app 的列表。

    就這麼簡單。

    主畫面是可以完全自訂的,你可以把喜歡的 app 釘(Pin)到主畫面裡,隨著 app 的不同,主畫面裡顯示的圖案會有對應的變化,通常是非常可愛且讓人驚喜的。

    例如把「Messages」釘到主畫面,就會有一個表情符號的笑臉圖示「 ;-)」出現,當有新訊息出現時,會有數字從笑臉旁邊冒出來,提示你有新的訊息;我還記得有一次還看到笑臉變成哭臉「:-(」,但是忘記是怎麼發生的。

    在主畫面裡,Caendar 會顯示今天的日期以及預定的行程;Pictures 會輪播照片。其他如 Email、電話、Facebook 等都有類似的設計。不過在使用的時候,最希望看到的是天氣 app 能在主畫面裡顯示溫度與晴雨狀況,但很可惜的微軟官方的天氣 app 並沒有這樣的功能。

    統一的外觀與用法

    要是談到一致的介面,Mango 更勝 iOS,因為它的操作介面是純文字、是抽象的,比起 iOS 類比式的設計風格,Mango 在各 App 間更加有整體感,這是它最大的優點、也是最大的缺點,稍後會提。

    在 Windows Phone 裡,每個 app 上方會有很大的字體標明 app 的內容分區。操作方式和主畫面相同,只要用手指左右滑動,就可以切換不同的分區,作用相當於 iOS app 裡的 Tab Bar。

    App 下方會視情況顯示工具列,擺放一些圓形按鈕,而就我觀察到 app 裡,沒有一個工具列裡有四個按鈕以上的。要是有超過四個按鈕,它會在工具列右方顯示三個小點「…」,按下那三個小點後,工具列會往上浮起顯示更多次要功能。

    純文字介面

    Metro UI 是由色塊(Tiles)和文字構成的操作介面,主要的操作方式大致上限定在「左右滑動」、「上下滑動」、「手指點擊」這三種動作上。

    • 左右滑動統一用來切換分區。
    • 上下滑動則是用來捲動內容。
    • 點擊則是用在按鈕或內容上。

    App 的內部結構非常清楚,基本上照內建的樣式做的話,只會有單純上下階層式的資訊結構,單純地不可能在 app 裡迷路。

    除資訊結構簡單外,再加上純文字本身即是說明,所以使用者只要習慣一個 app,就相當於習慣所有的 app。對使用者來說,Windows Phone 如果沒有比 iPhone 好學,至少也是一樣好學的。

    由於這種純文字介面的特性,開發者也很難搞砸一個 app。

    畢竟在 iOS 裡,app 下方可能是 Tab bar,也可能是 Toolbar,上方還有 Navaigation Bar 或是其他額外的按鈕,但是在 Mango 裡,一定只有上方的分區、中間的內容、下方的工具列,這三種元素而已。你不會因為圖畫太醜把整體質感搞壞,因為 app 裡根本沒用到圖;你不可能規劃了亂七八糟會讓人迷路的流程,因為你只有上一層、下一層這樣的資訊結構可以用。

    只會用到純文字和兩三種顏色的介面,還能怎麼搞爛?

    整體而言,Metro UI 的概念比起 iOS 更加單純,但它有三個先天的缺陷。

    1. 你需要不斷的閱讀。
    2. 純文字會增加使用的難度。
    3. 小朋友和貓不會想用 Windows Phone。

    需要不斷的閱讀

    第一點很好理解:文字比圖像難吸收。

    我使用 Windows Phone 兩個禮拜後再換回 iPhone 時,有種如釋重負的感覺,一切都變得好輕鬆,因為 iOS 的介面按鈕與元素都是圖形優先,一旦我記住了圖形所代表的意義,我以後就只會認那個圖形,文字不重要了。

    這種設計理念明顯的表現在 iOS 的 Tab Bar 上。

    每一個分類裡都是由上方大圖示和下方小文字構成,小文字是給第一次使用的人看的,是給你「學習」的,所以它們可以很小;圖示是每次都要看的,所以要夠大、夠清楚。

    當使用者學會之後,你甚至可以跟 Twittie / Twitter 3.0 做一樣的事:把文字拿掉。

    反之,在 Metro UI 裡,除了下方的工具列有小圖案代表外,其他都是文字,無形中會造成使用時的負擔,而這負擔是不管有多熟悉介面都無法減輕的,因為文字就是比圖形難吸收:你的腦袋就是這樣運作的。

    純文字會增加使用的難度

    請看下方兩個按鈕。

    不管怎麼看,右邊的按鈕就是比左邊的按鈕來得好點。

    即使他們擁有同樣的感應範圍,沒有人會覺得左邊按鈕比較好點,因為他們外觀上可以點擊的範圍差距實在太大。

    因此你在點擊純文字時,會下意識想要「點準」一點。

    除此之外,Metro UI 裡只會用到白色與灰色文字,有些字看起來很小像是內文,但其實可以點;介面上偶爾也會有些看起來只是裝飾或輔助用的 icon 與圖片,也一樣可以點!

    由於 Metro UI 並不會標示出什麼可以點,什麼不能點,你通常會需要去試試看才知道,因此使用起來會有種不確定感。

    點擊範圍小、再加上不確定感,這兩者讓使用的心理負擔加重。

    在 Mango 裡的某些 app,其實已經有圖示加文字的配合樣式出現,這類的 app 看起來與用起來就比純文字 app 輕鬆許多,這應該會是未來進化的方向之一。

    小朋友和貓是不會想 Windows Phone

    雖說 Windows Phone 是一個經過設計的產品,但是使用純文字為介面,無形中已經築起一個陡峭的學習曲線。

    iOS 和 Android 這種圖形優先的介面會比 Windows Phone 好學。

    • iOS 一下子就能學會,這是必然的,因為它擁有最少的按鈕,最直接的邏輯 —— 它最像電燈開關了。
    • Android 看起來一下子就能學會,但事實上你永遠學不會。
    • Windows Phone 很難學,一開始用會很不習慣,但你會慢慢喜歡它。

    放置游標與選字

    打字打到一半時,如果想要重新放置游標,你只要按住文字不放,就會有一個跟 Windows 上長得一樣的游標在上方出現,讓你可以精確的把游標放到文字中間。

    至於選字的方式,它也像 iOS 一樣是操作左右兩個小指標來限定選取範圍,但是它不像 iOS 上有放大鏡可以用,所以你的手指要點的非常準才能控制選取範圍。事實上,在使用 Windows Phone 的兩個禮拜內,我從未成功地選取任何文字,也因為無法選取部分文字,我只好全部刪除再重打一次,還一度認為 Windows Phone 沒有這個功能;後來是寫這篇文章時,很努力的去點它,才知道文字確實是可以選擇的。

    複製與貼上

    複製與貼上的行為也設計的相當巧妙。

    當你選擇一段文字時,會有「複製」的小圖示出現,點了它,在鍵盤左上方就會出現「貼上」的按鈕,再點一下它就可以貼上。

    iOS 裡的「貼上」功能是出現在黑色的小泡泡裡,每次出現的位置視文字位置而定,但 Windows Phone 裡的「貼上」按鈕必定會出現在鍵盤的左上角,位置可以預期,所以用起來比 iOS 方便。

    另一個有趣的地方:當「貼上」按鈕被按過一次後,它會跑到螢幕邊緣躲起來,只露出一半的臉,如果想再貼一次,你必須要用手指把按鈕拉出來再點一次。

    瀏覽器

    這裡的 IE 版本據說是 IE10,但是誰在乎?我只知道它可以正確的顯示 iCook 愛料理 。而那網頁只有幫 iPhone 做過最佳化而已。從這點來看,滿分。

    喔它不會 lag,順的很。

    音樂和影片

    為了要把音樂擺進來,要裝一個叫 Zune 的怪軟體,很麻煩、很難用。

    地圖

    內建的 Bing 地圖在台灣爛的很徹底,完全無法使用,要是在迷路的時候打開它,只會越迷越大而已,我試過了。

    鍵盤與中文輸入法棒呆了

    我用過英文、中文注音、中文手寫這三種,都很棒,而且輸入時有可愛的音效。

    英文鍵盤很棒,打英文的時候在鍵盤的上方會出現你可能要打的候選字,點一下即可輸入完成。

    中文注音則是用全尺寸的注音鍵盤,我已經忘記用起來是什麼感覺,因為幾乎跟在電腦上打一樣順暢。

    中文手寫更是讚。

    在 iOS 上寫字會 lag 不說,你還得照某種固定筆劃順序才寫的出來,在 Mango 裡完全沒有這種狀況,我隨便亂寫它都認的出來。寫字的時候,所有多餘的介面都會隱藏,也就是在寫字動作進行的期間,你是在一個灰色的大方塊中移動手指,大 方塊裡除了你寫的字之外,什麼都沒有,非常清爽。

    除了中文辨識能力強之外,真正讓 Mango 手寫輸入好用的原因,是在寫完字的一瞬間它安排的流程:

    1. 手離開螢幕的一瞬間,鍵盤上方顯示候選字。
    2. 同時間,清空原來的手寫輸入。
    3. 同時間,在游標位置插入你剛剛寫的字。

    接下來你可能會做這三個動作:

    1. 看到輸入的字是正確的,接著繼續寫下一個字。
    2. 看到輸入的字是錯誤的,從上方的候選字裡,挑一個正確的字按下,接著繼續寫下一個字。
    3. 看到輸入的字是錯誤的,上方的候選字裡也沒有正確的,所以重寫一遍。

    用過 Mango 後,我才了解 iOS 的繁體中文輸入是多麼可悲。

    Mango 的中文輸入邏輯是:

    寫字時我不會要你確認正確與否,有錯了你告訴我就好,沒錯的話,你可以一直寫下去不必停止。

    iOS 的中文手寫邏輯是:

    啊這個字對嗎?啊這個字對嗎?啊這個字對嗎?啊這個字對嗎?啊這個字對嗎?…

    另外、手寫辨識時完全不會 lag。

    三個硬體按鈕:Back、Home、Search

    Windows Phone 和 Android 手機一樣,在螢幕下方都有硬體按鈕,但是 Windows Phone 對於這三個按鈕是有規定的,只會有三顆,而且由左到右依序是:Back、Home、Search。不論哪個廠牌都一樣。

    這三顆按鈕使用方式明確,並不會造成使用上的困擾,但我還是偏好單一 Home 鍵的設計,因為它在概念上是最單純、最直接的。Back 和 Search 的這兩個硬體按鈕可以很簡單被軟體按鈕取代,他們沒有強烈的存在意義,有時甚至是多餘的東西,例如下圖這個情況:

    當手機擺橫了,本來的向左的 Back 實體按鍵會變成「向下」的。

    但是螢幕內 app 的畫面全都調整為水平的模式。接下來就會發生要「回上一頁」時,是要按「向下」的箭頭這種怪異的時刻發生。

    當然你將手機轉往另一個方向,那麼 Back 又會指向上面。

    只要試過一兩次,你就再也不會把 Windows Phone 擺橫來用 —— 實在太彆扭了。

    這對大多數人也許不重要,這只會讓他們直著用 Windows Phone。

    但這樣的設計其實代表著 iOS 和 Windows Phone 的一個根本差異 — Windows Phone 沒有把橫著使用這件事放在心上。

    另一個證據:

    為何 iPhone 螢幕距離手機上方和下方的距離均等?而 Lumia 800 不相等?

    因為 Apple 想讓 iPhone 在任何角度都可以使用,因此 iPhone 必須要是一個上下左右都對稱的四方形,而且 Home 按鍵必須是「下凹」而非「上凸」,因為下凹的按鈕在打橫時才不會不小心按到。

    Apple 設計 iPhone 時,是以螢幕裡顯示的 app 為尊,當你用的那一個 app,整支手機就會變成那個 app,iPhone 這硬體只不過是那個 app 的邊框而已。

    這樣的理念在 Windows Phone 上是看不到的。

    除了「全方向操作 v.s. 單一方向操作」外, iOS 和 Windows Phone 還存在更大的差異。

    就是那個 Back 按鈕。

    設計思維的分水嶺

    介面的流程與設計是一連串的邏輯思考,最終固定的介面會有一套內定的規則,它本身就是一個整體,當你更動某個介面元素,代表的不僅僅是換個位置,而是所有相關操作過程的重新思考與微調。

    Windows Phone 把 Back 當做硬體按鈕放在左下角,不能只把它解讀為「按鈕位置不同」,因為介面設計是牽一髮而動全身的,這個 Back 按鈕是 Windows Phone 和 iOS 差異的根源。

    Back 作為一個硬體按鈕,並固定在手機螢幕左下角代表:

    不管在哪一個 app 裡,使用者都能回去上一個畫面。

    例如,你從主畫面進入 Twitter.app,按了 Back,會回到主畫面;如果你從主畫面進入 Twitter.app 再進入 IE 瀏覽器裡,那麼按了 Back 會把你帶回 Twitter.app,再按一次會把你帶回主畫面。

    現在考慮以下狀況:

    主畫面 → Twitter → 主畫面 → Facebook

    你如果連續點擊 Back,你覺得會產生什麼狀況?

    這樣子嗎?

    Facebook → 主畫面 → Twitter → 主畫面

    不對,其實是這樣子:

    Facebook → Twitter → 主畫面

    再考慮另一個狀況:

    主畫面 → Twitter → 主畫面 → Facebook → 主畫面

    連續點擊 Back 則會有這個結果:

    主畫面 → Facebook → Twitter → 主畫面

    也就是說:

    1. 要是 Back 的過程中包含「主畫面」,那它會被拿掉。
    2. 在主畫面,但點了 Back 可能什麼事都沒有,也可能帶你回到別的 app。

    Back 除了用在跨 app 間的瀏覽行為之外,還有另一個用途,就是用在 app 間的瀏覽,例如在 IE 瀏覽器裡,要回到上一頁,只能按 Back,你還不能按太多次,要是按太多次,它還會把你帶離 IE,跳到上一個你用的 app 去,天知道那是什麼。

    有時候 Back 還會用在收回鍵盤,取消對話框這類的行為上。

    Back 的行為是無法預期的。

    Back 按鈕的好處

    儘管 Back 按鈕讓人無法捉摸,但是它的確起到一個作用:打破 app 間的分區。

    在使用 Twitter 或 Facebook 時,要是點了內文裡的連結,你會被帶到 IE 瀏覽器裡,要是在瀏覽器裡點了 Email 連結,你會被帶到 Email.app 裡,而你可以輕鬆回到上一個 app 繼續瀏覽。

    你會覺得整支手機就好像一個功能超多的 app。

    而它切換場景的動畫也是左翻、右翻的效果,對使用者做出暗示:你不是「app」間移動,只是在不同「頁面」間移動而已。

    由於這個特性,Windows Phone 的 Facebook 和 Twitter 不需要在他們的 app 裡包一個內建的瀏覽器,所有的瀏覽相關工作交給 IE 就好了。相較之下,在 iOS 上的每一個 Twitter app 都需要內建自己的瀏覽器,還要附上 Open in Safari 的按鈕。

    兩者都可以解決問題,但是 Apple 的概念比較簡單,用到的按鈕也比較少,且完全可以預期。

    結論

    不論從介面的外觀、使用方式、或手機硬體上來看,Windows Phone 都是一個原創的產品,有獨特的個性與它自己的固定邏輯。

    Windows Phone 用起來算是令人愉快的,尤其是整體運作的效率,我不知提過幾次了,Windows Phone 他媽的就是不 lag,也許是純文字介面的好處吧?這點硬是把 iOS 比下去了。

    它尚有一些未成熟的地方以及易用性上的問題,例如:

    1. 怎麼處理令人困惑的 Back 行為?
    2. 怎麼處理橫向使用的情境?
    3. 怎麼減輕純文字介面對使用者的心理負擔?

    我認為 Windows Phone 在未來一兩年內可以成為大人用的基本款手機(Feature Phone)。

    「你需要一支手機,又不在乎它是什麼廠牌嗎?用 Windows Phone 吧!」

    …差不多是這種感覺。

    而進階版的手機當然就是 iPhone 了。2


    1. Metro 是個以手指操作為基礎而發展出來的作業系統,並不適用於以游標操作的桌上型電腦,我希望微軟不要硬把它搬到桌面電腦上來,這會毀了使用經驗。 
    2. Android?什麼 Andoird?

    原文链接

    分享到:
    Tag:
    引用地址: