2015-6-30 用心設計
藍藍設計( m.axecq.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每一個扁平化界面設計,都是我們的心靈碰撞致力于最棒的 metro ui 設計
智能腕表上的應用程序應該更多依靠手勢操作而不是導視元素,應該優先考慮最重要的信息傳達,支持越區切換操作,創建為用戶量制并且獨立的內容。
去年,我在一篇關于“智能腕表就是未來-三星Galaxy Gear正行駛在路途中”的文章里分析了三星Galaxy Gear腕表。如今,蘋果腕表的問世再次燃起人們的滿腔熱情,但是盡管許多科技網站對蘋果腕表都已有很多評論和報道,不得不指出蘋果腕表的用戶界面并沒有向未來的發展方向靠攏的趨勢。以下是筆者對蘋果腕表的一些觀察和建議,希望能給予設計師相應的啟發。
人類的指觸輸入比鼠標輸入需要更大的觸及區域已經不是什么新鮮的話題了。無論個人喜好,人們的手指比鼠標的屏幕光標要寬大很多。一般成功穩妥的指觸輸入需要的區域大小是:1cmx1cm(1平方厘米,大約一個指甲蓋的面積),從蘋果腕
表來看,似乎蘋果已經接受這種微小的指觸輸入的方式。當你在解鎖腕表屏幕的時候,你需要在一個很迷你的數字屏上輸入你的密碼。并且,蘋果通過若干個中心聚
集向外擴散的小圓來表示應用程序,這就使得啟動應用程序其實是一次冒險和挑戰,因為即便位于最中心的那個看似最大的圓對我們最小的手指來說也還是太小。而
且辨認這些圖標還需要很好的眼力,以及愿意通過滾動使它們成功對焦的意志力。此外,如果你想刪掉某個應用程序同樣需要很好的運氣才行,因為位于圖標左上角
的小圓x只適合嬰兒的手指!(雖然人們可以通過觸摸整個圖標來刪除程序,但事實上大多數用戶還是會嘗試去觸及那個小圓x,因為用戶已經習慣于點擊含有x的
小格子來關閉或刪除程序了。盡管蘋果試圖通過填補一些可觸的區域來減小用戶誤觸率,但還是無法真正解決人們“胖胖的手指”問題,因為從我們的測試中得知用
戶會嘗試在可視的觸及區域內觸摸屏幕。)
「解鎖腕表需要在迷你的數字鍵盤上用指觸輸入密碼,每一個按鍵大概6mmx4mm(僅僅0.24平方厘米,而上文中建議的輸入區域是1平方厘米)」
「蘋果通過若干個中心聚集向外擴散的小圓來可視化應用程序,但是即便位于最中心的那個看似最大的圓對用戶用手指來開啟程序這一任務來說也還是太小。此外,用于刪除應用程序的小x圖標只有2mm的直徑。」
你可能會問:在一個如此小的屏幕上(蘋果腕表較小的版本發布的屏幕官方尺寸是38mmx38mm,實際屏幕尺寸更小一點-僅大約32mmx35mm),除了能設計被
包含在小屏幕中的小圖標外,我們還能夠做什么呢?這是一個很好的問題。此處答案有兩個:聲音和手勢。當用戶想要瀏覽應用程序,設備,和輸入信息的時候,聲
音和手勢這兩種方式都可以替代用戶界面上的元素(這里的元素指Chrome,而Chrome被定義為一種用來為用戶提供操作信息的視覺設計元素,而不是
Google的網頁瀏覽器)以節省屏幕。
目前為止,觸屏的應用程序正努力完善手勢操作,使其能被合理合法地使用。然而手勢的啟示作用很弱,學習起來有一定難度。在用戶測試中,那些需要手勢
完成的應用程序在常規用戶中的響應情況不佳,因為它們往往需要用戶付出耐心,心甘情愿地去學習。因此在手機和平板電腦上,為了減緩過多手勢操作,設計師往往會選擇其他途徑,如冗余的界面,以及上文提及的可視化的Chrome(被定義為一種用來為用戶提供操作信息的視覺設計元素,而不是Google的網頁瀏覽器),而不是依靠手勢作為成功操作任務的唯一方式。
但是手勢操作在智能腕表上卻成為了不二之選。一個滑動的手勢在腕表上要比點按(目前最簡單的人機交互方式)更容易被用戶接受。因此,腕表的應用程序使用大量的滑動手勢來移動一個卡片組中的不同元素(請看下圖),大多數右滑都表示返回命令。
「字典:輕擊Word of the Day可以顯示當前頁上的入口,用戶然后可以通過輕擊頁面頂部的WotD(雖然有些難度,但是視覺上可以清楚看見)或者向右的滑動手勢(不可見,但是比較簡便)。」
在Apple腕表中引入的一個新手勢是Force Touch ( Force Touch是一項Apple 用于 Apple
Watch、全新MacBook 以及全新 MacBook Pro 的觸摸傳感技術。通過 Force
Touch,設備可以感知輕壓以及重壓的力度,并調出不同的對應功能。Apple 也表示 Force Touch 是研發 Multi-Touch
以來,最重要的全新感應功能。),這個功能和Android的長按功能很相似,在Android的長按功能的初始版本中,Force
Touch可以用于表示與當前頁面相關的菜單(類似于Windows桌面的鼠標右鍵功能)。值得一提的是,Force
Touch是基于整個屏幕的,而不是局限于用戶界面上的某個特定元素。因此,用戶可以通過觸摸屏幕任何一處開啟傳感功能,這樣上文中提及的「胖胖的手指」
問題也可以被解決。
「天氣:通過觸摸傳感技術來改變屏幕中天氣信息視覺呈現的方式」
除了硬件的創新,Force
Touch技術和滑動返回作為手勢操作的兩股核心力量在Apple腕表上的表現也很出色。雖然目前將手勢標準化普及的可能性還不大,很多用戶還不熟悉(因
為返回按鍵在Safari瀏覽器中是很明確的,用戶會更熟悉這樣可觸及的按鍵——作為一個上述界面冗余的例子之一)但是滑動返回已然成為Apple腕表手
勢語言中不可或缺的一部分。如果Apple使用戶逐漸依賴習慣與這種滑動返回的操作手勢,那么這一手勢將逐漸流行于手機和平板電腦,也會逐漸標準化。但
是,滑動返回這一功能在腕表上也可以通過Back/up按鍵被復制(如上圖中Dictionary
App的層級圖示),因為按鍵圖標的可視性會使得它獲得更多用戶青睞,即便這種方式在小屏幕中的操作難度很大。
Force
Touch是一個沒有視覺感知符號引導的手勢操作,對于iPhone用戶來說,這個手勢操作是相對陌生的(因為在iOS系統中很少用到長按手勢)。如果這
種手勢被持續應用在app中,它將會被用戶熟知并且可以廣泛應用于其他的觸摸屏上。然而,經驗告訴我們這種沒有視覺符號引導的手勢操作要被用戶接納要經歷
漫長的時間。
微小的目標觸點對設計具有重要的啟發作用。由于按鍵、鏈接這樣的方式往往令人感到冗長沉悶,事實上,在腕表上最佳的呈現方法是卡片式。
「NYTimes app:卡片模式可以使用戶橫向瀏覽不同的信息」
「CNN通過一個列表使所有信息顯示在同一頁上,一個接一個,然后用戶可以輕觸其中的任何一條以獲取更多信息。」
卡片式的展示模式可以追溯到至少20年前,通常情況下,它可以清晰地為用戶展示具有連續性的信息流或是由一些少量元素組成的信息列表而替代用戶直接
訪問具體的網頁內容。在腕表上,卡片式比豎列式更出彩,是因為豎列的信息排列形式還需要前進和后退來查看信息的具體內容(a form of pogo
sticking),這就促使了多步導航。而卡片式,用戶可以很容易地在每一個卡片信息上點開上下文菜單(例如,做一些保存信息,稍后在手機上繼續瀏覽等
操作)。在豎列式視圖中,用戶就需要導航到具體內容去調試對應于該項目上下文菜單。
「NYTimes:用戶在卡片上可以通過Force Touch來保存信息以稍后查看」
當然,如果當你的信息有100條時(或者只是大于20條)卡片模式也會顯得冗長。事實上,用戶不會在腕表上瀏覽10-12條卡片信息,此時,用戶應該已經取出手機來繼續查看信息了。
「股票:如圖中,豎列模式會比卡片式更難使用。用戶通過輕觸一條股票數據來看到具體內容,但當進入了具體內容視圖中,我們可以發現頂部的返回導航欄
事實上是累贅,僅起到用以提示用戶可以返回上級視圖的作用,從某種程度上說,它浪費了屏幕的空間(如圖中的Stocks和AAPL部分)。」
豎列示圖的另一個缺點是通常情況下容易引發用戶在上下滑動時候的誤觸。
越區切換是一項允許用戶從腕表轉移到手機而繼續原先腕表上任務的操作。這曾是三星Galaxy
Gear的優勢之一,然而在Apple腕表上,越區切換的表現似乎令人苦惱,主要表現在以下兩點:第一,不是所有的應用程序都能讓用戶在手機上繼續任務,
更重要的是,第二,繼續項目的交互成本頗高。與三星Galaxy
Gear不同的是,當腕表靠近iPhone時,iPhone不能自動解鎖。如果用戶需要在手機上繼續瀏覽腕表信息,用戶需要向上滑動(而不是點觸)鎖屏左
下角一個很小的圖標,然后才能解鎖手機以繼續瀏覽,這是一個很古怪的交互設計。
「在手機上要閱讀一篇NYTimes的文章,用戶需要向上滑動手機解鎖屏左下角的圖標,然后密碼解鎖才能看到文章。」
通過越區切換,這一強大的功能,用戶不僅可以獲得未能在腕表屏幕上顯示的內容信息,還可以完成無法在腕表上完成的任務。設計師應
該尤其注意要幫助用戶減少誤操作以更順暢地使用越區切換。以Keynote為例(Keynote是應用于Apple OS
X操作系統的演示幻燈片的應用軟件,現與Pages、Numbers組成工具軟件套裝iWork),在切換到手機app前,Keynote會提示用戶需要
轉移到手機上繼續操作,而不是用越區切換來幫助用戶完成這一操作。理想的情況應該是應用程序會自動從腕表程序同步切換到手機上,而不應該由用戶自己在手機
上打開程序。
「左圖中的Keynote和右圖中的Buzzfeed都沒有用越區切換功能來幫助用戶修復錯誤或啟用通知。用戶仍需要單獨地解鎖手機,自行啟動apps和修復錯誤。」
可以借鑒一下Starbucks的做法:腕表上的程序告知用戶要登錄用戶,通過越區切換 功能,用戶在手機上直接可以進入到Starbucks的登錄界面。
「Starbucks會在腕表上告知用戶登錄,然后通過越區切換把用戶直接帶入手機上的Starbucks登錄界面。」
不能僅僅因為腕表的屏幕小而截斷信息。盡管越區切換作為一種信息平臺的轉換工具應該被支持,然而腕表上內容也應該被視作一塊可以自己獨立的信息片
段。由于從腕表到手機的信息轉移成本頗高,因此不應該追求最快速的交互。在此,可以學一學BBC的做法,自從有圖文電視開始,BBC就一直將內容提要安排
在34個字以內。
「USA Today的故事提要被截斷,而且整條信息是不完整的。」
圖中,Buzzfeed在其應用中安排了一個投票,但是具體的投票選項卻是不完整的。初始頁面和慢速的加載(一些圖片加載時間頗長,這也會帶來混亂),使我們無法判斷我們是被邀請投票的對象,還是這已經是一個搜集好的投票結果。
「在Buzzfeed中的投票選項被截斷了。」
有時候,為了應用程序中信息排列的合理化,一些重要信息會因迎合小屏幕而被削減。例如,當我們初次打開天氣的app,屏幕上顯示當下溫度是5攝氏度
(41華氏度),然而這個溫度對于加利福尼亞州森尼維爾市(Sunnyvale)來說,即便是晚上9:48,也是罕見的低溫。那為什么會這樣呢?打開我手
機上天氣app中的方位列表,第一位置我設置的是太浩市(Tahoe City),而此時太浩市就是5攝氏度,因此可以推斷,
「Weather Channel應用程序沒有顯示天氣所對應的地點,圖中所示的溫度對應方位與當前地點不同。」
不是因為每一個人都有一個腕表app所以你才也需要有一個。如Fandango用于展示電影經典對白的app,還有上述的BuzzFeed
app也是很無用,尤其在現實狀態中。一款腕表的應用程序不應該是作為用于模仿iPhone app的嘗試,因為屏幕太小而無法像iPhone
手機屏幕那樣提供相同數量的信息。
歷史告訴我們:
「Fandango應用程序有一個單獨頁用來呈現電影中的經典對白。」
用戶與一款應用程序在手機上的平均交互時間大約是70秒,這個時長幾近電腦上網頁會話的一半。因此在腕表上,我們可以預期用戶與其平均每次交互時間實際上會更短。想一想什么樣的信息是人們所關注的,并且希望能夠在短短幾秒的時間內輕易獲知?那就是需要呈現在腕表上的信息。
腕表的小屏幕需要設計師努力思考的是:1.用戶在他們的應用程序中最關心什么;2.如何壓縮這些信息使其適合如此小的屏幕。一切復雜的交互方式并不適合腕表:記住用戶可以隨時去手機上繼續搜索如果他們認為有必要的話。
允許用戶在腕表上像在手機上操作有時候是沒有必要的,如蘋果的Stock app。如果我很熱衷于股票信息,并且在我的手機上有我自己的股票列表,我可能在腕表上也只需要知道股市變化,而不需要最近6個月的。
「在股票應用程序中,人們可以看到股市在不同時段的變化:1天,1周,1月或是6
同樣的,下圖中是一款房地產應用程序,可以提供房價和地圖,但是從這張空中俯瞰視圖中誰能分辨具體的位置在哪里?72英尺這個標題也是含糊不清的:
是距離我有72英尺?那么是哪一個方向呢?這是離我最近的正在銷售的房子嗎?那么僅僅是最近的房子,還是距離我72英尺任意的房子?在地圖上的哪里?如果
我碰巧滑動了屏幕,我可以看到具體的地址,但是地圖在這樣的圖示中真的很無用。
「Zillow中顯示了距離當前位置較近的房價信息,但是如果用戶不向下滑動菜單,想看到具體地址是不可能的。空中俯視地圖并沒有對此頁有任何作用。」
如果您正在構思一個腕表上的應用程序,請首先好好思考一下,因為您意向的應用程序可能不適合這個平臺。如果您想為腕表用戶創造價值,以下幾點建議可能對您有所幫助:
微小的目標觸點
手勢
卡片式是最佳方法
越區切換(handoff)
獨立的內容
腕表上顯示的是我在手機上所設置的第一位置,而不是當前位置,因為腕表上沒有具體位置顯示,因此會誤導用戶。
關注最主要的
從1997-1999年,我們知道網站并不是屏幕版的小手冊,亦不是電視節目。
從2007-2009年,我們知道移動手機并不是小型的電腦。
也許第三次,我們可以大聲說:腕表并不應該是一款更小的手機!
個月。這些多余的信息可以為小屏幕節約16%的有效像素用于更重要信息分配。」
寫給設計師的一些建議
?提取人們最感興趣以及最重要的信息,并把它們盡可能壓縮以適應于腕表的小屏幕。
?盡可能避免按鍵和復雜的導航,如果一定需要,那么按鍵必須精簡而且要大。
?使用越區切換來解決用戶獲取更多信息時多余的交互操作。
?創建獨立的,易讀的,并可以明確傳達內容主旨的文本信息。