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