Iphone手機在交互設計思路上面做了非常大的創(chuàng )新,打破了其他系統固有地交互方式,以令人賞心悅目的交互手法帶給用戶(hù)非常棒的體驗感。此款手機深受消費者的歡迎,市場(chǎng)銷(xiāo)售額也很驚人。
Iphone手機在交互設計思路上充分模擬了正常人操作物體的固有習慣和思維方式,用戶(hù)操作日常中的物體時(shí)一般都是采用推,拉,滾,扭,按壓,撥動(dòng)等基本動(dòng)作,這些操作方式已經(jīng)深深地印在用戶(hù)的腦海中。因此用戶(hù)一旦在其他系統中見(jiàn)到熟悉的操作方法后就很容易理解和學(xué)習,即使隔了很長(cháng)一段時(shí)間也不會(huì )忘記,而且還不會(huì )輕易出錯。我們在設計軟件時(shí)也要充分考慮用戶(hù)正常的操作方式和思維習慣,盡可能使得軟件的操作方式與用戶(hù)的心理模型保持一致。
在接下來(lái)的篇幅中我將從各個(gè)緯度針對此手機進(jìn)行詳細的交互分析,也歡迎大家提出自己的見(jiàn)解。
此手機布局沒(méi)有采用常見(jiàn)的九從宮(3*3)布局方式,而是把界面劃分成上下兩大區域;界面上區域顯示一些較常用的功能圖標(共十二個(gè),采用大圖標加文字的組合方式),在界面下區域顯示重要的四個(gè)功能。這兩個(gè)區域之間有明顯地距離間隔,便于用戶(hù)快速識別出下方重要的功能圖標。據科學(xué)分析得知用戶(hù)對圖形的識別能力要遠大于文字,因此如果圖標設計的很優(yōu)秀的話(huà),用戶(hù)可以降低視線(xiàn)搜索的時(shí)間,用戶(hù)的操作效率會(huì )得到相應提高。我們下一個(gè)超聲產(chǎn)品也會(huì )有液晶屏,可以考慮采用大圖標加文字的組合方式。蘋(píng)果操作系統采用的大圖標尺寸為128*128px;微軟操作系統工具欄上面的圖標尺寸為12*12px,桌面圖標尺寸為32*32px,新版的vista系統也仿照蘋(píng)果的做法增大了圖標的尺寸。

當選中某一個(gè)圖標后進(jìn)行點(diǎn)擊,則系統以全屏的顯示方式打開(kāi)此對應的功能界面。由于手機屏幕空間較小,所以一般窗體都是以全屏的方式打開(kāi)(以便于在窗體中放置更多的信息)。
在有些界面上系統充分利用了透明圖層疊加的設計方案,用透明圖層的好處就在于用戶(hù)可以看到圖層下面的內容,同時(shí)還可以看到當前圖層的信息,如下圖所示。

用戶(hù)可以從橫著(zhù)或者豎著(zhù)的角度查看手機,Iphone手機會(huì )自動(dòng)調整角度以滿(mǎn)足用戶(hù)此需求。此交互方式非常友好,體現了以人為本的思想。

當用戶(hù)進(jìn)行文體編輯時(shí),由于屏幕上面默認字體比較小,Iphone采用在旁邊顯示一個(gè)放大的字體效果,如同在上面使用了一個(gè)放大鏡的效果,極大地提高了用戶(hù)識別文字的能力,尤其是對于老年人或者視力比較差的用戶(hù)益處更大。此放大鏡是一個(gè)半透明效果。
從操作頻率上分析可以得知用戶(hù)會(huì )經(jīng)常使用空格鍵,因此在軟菜單中此空格鍵尺寸特別大,用戶(hù)很容易快速的發(fā)現并進(jìn)行點(diǎn)擊操作。界面上字母和空格鍵的顏色是一致的,其他按鍵設計成不同的顏色,這樣做的目的也是為了便于用戶(hù)快速的進(jìn)行相關(guān)信息瀏覽。

當用戶(hù)輸入字母的前幾個(gè)單詞時(shí),系統會(huì )自動(dòng)在輸入詞語(yǔ)下方出現符合相關(guān)要求的單詞,以協(xié)助用戶(hù)進(jìn)行輸入,不僅提高了輸入的效率同時(shí)也降低了出錯的可能性。

進(jìn)行號碼撥打操作時(shí),用戶(hù)可以通過(guò)點(diǎn)擊系統提供的軟鍵盤(pán),每當用戶(hù)選中一個(gè)數字時(shí),此文字的背景色被高亮顯示(純藍色效果,反饋性極強);界面中的[Call]按鈕也以一種很醒目的綠色來(lái)增強用戶(hù)的快速識別能力。上面顯示號碼的區域比較大且輸入的數字非常醒目(iphone在反饋性上面做得非常出色)。
當輸入接收人時(shí),一旦輸入前幾個(gè)字母,系統自動(dòng)在下方的區域中自動(dòng)顯示出符合此條件的收信人列表,可以可以直接在列表中選擇符合條件的記錄,不僅減少了用戶(hù)輸入的時(shí)間,同時(shí)也提高了操作效率。
進(jìn)行鬧鐘參數調節時(shí),系統采用轉輪的方式,用戶(hù)可以滾動(dòng)此轉輪進(jìn)行參數快速調節,此操作方式很特別,主要是模擬用戶(hù)在日常生活中擰動(dòng)物體的操作方式。用戶(hù)一旦熟悉此操作方式后就很難忘記,體驗感很棒。

進(jìn)行二選一選項時(shí)操作時(shí),系統采用推拉的操作方式,往前推動(dòng)則向前運動(dòng),向后拉則向后運動(dòng)。此操作方式主要也是模擬用戶(hù)在日常生活中拖拉物體的操作方式,完全吻合用戶(hù)正常的思維模型。

當進(jìn)行多選操作時(shí),用戶(hù)直接用手指點(diǎn)擊相應的選項(被選中項背景色以高亮底色顯示),系統自動(dòng)在被選中的選項后面打勾。Iphone系統中沒(méi)有下拉選擇框控件,主要也是基于用手指難以操作此控件的緣故。
按機器外面的按鍵進(jìn)行音量調節時(shí),界面上面出現了一個(gè)很醒目的音量圖標,同時(shí)在圖標下方出現相應的進(jìn)度圓點(diǎn),用戶(hù)可以很清晰的得知當前調整的效果。其他手機一般都是通過(guò)聲音大小的反饋方式,缺少此視覺(jué)反饋方式。
在界面中進(jìn)行明暗度調節時(shí),系統支持直接用手指橫向撥動(dòng)滑塊,系統立刻在界面上顯示相應的亮度調整效果。

當進(jìn)行短信發(fā)送操作時(shí),屏幕下方會(huì )出現一個(gè)動(dòng)態(tài)的進(jìn)度條,實(shí)時(shí)反饋出當前發(fā)送的狀態(tài)(同時(shí)在進(jìn)度條下方下方可以看到字母軟菜單)。在界面上方有一個(gè)[Cancel]按鈕,用戶(hù)可以取消當前的操作。
當進(jìn)行圖像尺寸調整時(shí),只需用兩個(gè)手指“捏住”圖片的兩個(gè)角,向外拉則表示放大圖片,向內拽則表示縮小圖片。此操作方式很特別,在網(wǎng)頁(yè)界面中也支持此交互方式。一般軟件進(jìn)行放大或縮小操作時(shí),都是通過(guò)點(diǎn)擊相關(guān)的放大或縮小按鈕,顯然操作效率遠沒(méi)有iphone高。

當選擇好相應的圖片并開(kāi)始設為墻紙時(shí),系統自動(dòng)出現一個(gè)無(wú)模態(tài)的進(jìn)度欄(此進(jìn)度欄區域在視覺(jué)上非常醒目),當操作完成時(shí),則出現一個(gè)打勾的圖標以告知用戶(hù)當前的結果信息。Iphone中的[Cancel]按鈕都是放置在其他按鈕的左邊,這一點(diǎn)恰恰與微軟操作系統的做法相反。目前業(yè)界還沒(méi)有對此得出一個(gè)確切的結論。

當點(diǎn)擊界面中的[View My Minutes]選項時(shí),當前頁(yè)面亮度降低同時(shí)在界面疊加出現一個(gè)動(dòng)畫(huà)圖標和一行等待文字。當任務(wù)完成時(shí),界面上出現多行的信息文字告訴用戶(hù)當前操作的結果。此交互方式也有一些不足:在程序運行過(guò)程中用戶(hù)不能執行取消操作,等待信息不夠友好使得用戶(hù)無(wú)法得知要等待的具體時(shí)間,同時(shí)也不清楚目前已經(jīng)完成的進(jìn)度情況。
進(jìn)行列表刪除操作時(shí),列表記錄旁邊默認沒(méi)有刪除按鈕。當用戶(hù)選中某條記錄并用手指進(jìn)行橫向滑動(dòng)時(shí),此時(shí)會(huì )在相應的列表記錄旁邊出現一個(gè)醒目的紅色刪除按鈕(系統中所有的刪除按鈕都是紅色效果),點(diǎn)擊此按鈕系統則自動(dòng)刪除此信息,且系統沒(méi)有彈出確認對話(huà)框(如果用戶(hù)想取消當前的操作,目前還不清楚此系統是怎么進(jìn)行處理的)。一般系統進(jìn)行刪除時(shí),都會(huì )彈出相應的確認對話(huà)框。在我們目前的2108新產(chǎn)品中我設計的新方案中就可以支持刪除過(guò)程中無(wú)對話(huà)框干擾且可以進(jìn)行刪除撤銷(xiāo)操作。

進(jìn)行相關(guān)圖標功能操作時(shí),系統采用手指選中此圖標然后直接拖動(dòng)到下方的功能圖標處(當選中此圖標時(shí)此圖標尺寸會(huì )變大且圖標呈半透明效果),在拖動(dòng)過(guò)程中用戶(hù)可以實(shí)時(shí)看到拖動(dòng)的狀態(tài),且原來(lái)圖標效果變暗,當完成操作時(shí)圖標恢復為原狀。

進(jìn)行圖標排序操作時(shí)也是采取拖動(dòng)的交互方式,用手指選中圖標移動(dòng)指定位置即可,此操作效率非常高。采用拖動(dòng)排序的可視性效果很強,用戶(hù)可以實(shí)時(shí)看到操作后的結果。

查看留言時(shí),只需點(diǎn)擊對應列表記錄前面的播放圖標,系統則會(huì )自動(dòng)播放相應的留言信息。在列表下方以一個(gè)進(jìn)度條的方式顯示當前播放的進(jìn)展情況(在進(jìn)度條兩端伴有相應的時(shí)間信息)。進(jìn)度條下方的[Call Back]和[Delete]按鈕比較醒目,[Delete]按鈕采用很醒目的紅色(在色彩學(xué)原理中紅色是代表警戒色含義)。當選中此條留言記錄后單擊下面的[Delete]按鈕時(shí),系統自動(dòng)刪除此條記錄且沒(méi)有彈出任何確認對話(huà)框。

當列表記錄較多不能在一屏進(jìn)行顯示時(shí),常見(jiàn)windows做法就是出現一個(gè)縱向的滑塊同時(shí)在滑槽兩端出現相應的向上和向下箭頭(鼠標的中鍵被賦予滾動(dòng)滑塊的功能)。而iphone的做法就比較特別,僅僅在記錄旁邊出現一個(gè)常常的滑塊,并沒(méi)有相應的上下箭頭,因為用手指點(diǎn)擊上下箭頭進(jìn)行操作的難度太大且效率也很低。

當界面中的記錄很多時(shí)系統采用字母的方式進(jìn)行排序。中文由于是筆畫(huà)結構,目前有一些軟件嘗試用拼音的方式進(jìn)行排序,不過(guò)結果還是不盡如人意,目前業(yè)界還沒(méi)有形成一個(gè)固定的對中文進(jìn)行排序的方式。字母排序方式僅適合于英文系統。

Iphone日歷控件中支持點(diǎn)擊左右箭頭進(jìn)行日期翻頁(yè),當前選中日期被高亮顯示。在界面下方顯示選中日期對應的事件信息,非當月的天數以灰色的效果顯示。此界面不支持對年份進(jìn)行快速調整。
界面左上角有一個(gè)[Today]按鈕以便于用戶(hù)快速選擇當前日期查看相關(guān)事件信息,系統支持點(diǎn)擊界面上面的左右箭頭進(jìn)行月份切換操作,同時(shí)系統支持用手指在屏幕中向下滑動(dòng)來(lái)選擇上一個(gè)月份的日期。

在List標簽頁(yè)面中顯示當月所有的事件,以日為單位進(jìn)行不同區域劃分(同時(shí)在每日對應的區域中顯示當天所有的事件),用戶(hù)可以用手指快速上下?lián)軇?dòng)屏幕以查看不同日期下的信息。

當界面信息過(guò)多需要翻頁(yè)時(shí),系統采用手指向下滑動(dòng)的交互方式,一般手機都是采用點(diǎn)擊翻頁(yè)圖標的交互方式,由于圖標一般尺寸較小,用戶(hù)需要把視線(xiàn)從屏幕信息中轉移到圖標上面以進(jìn)行翻頁(yè)操作,這種交互方式會(huì )打斷用戶(hù)正常的閱讀流程。而Iphone手機采用直接用手指在屏幕上滑動(dòng)的方式就可以避免此問(wèn)題,用戶(hù)可以專(zhuān)心的閱讀屏幕信息。

當選擇菜單選項進(jìn)入下一級目錄時(shí),系統采用橫向切換的方式,用戶(hù)直接點(diǎn)擊向右的箭頭,則系統動(dòng)態(tài)地從右向左顯示對應的下一級內容,點(diǎn)擊左上角的按鈕則可以返回上一層。蘋(píng)果操作系統也是采取同樣的交互方式。普通系統進(jìn)入下一層目錄時(shí)一般都是采用打開(kāi)新窗體的交互方式,從視覺(jué)上體現不出“進(jìn)入”的概念,而Iphone的這種交互方式就能體現出這種概念。

當需要查看屏幕其它區域信息時(shí), iphone則支持直接用手指向上或向下快速撥動(dòng)即可,系統會(huì )自動(dòng)根據手指撥動(dòng)的方向顯示對應的信息。一般系統都是采用拖動(dòng)滾動(dòng)條滑塊的交互方式,由于滑塊體積較小所以比較難選中并進(jìn)行相關(guān)的拖動(dòng)操作,而Iphone手機直接用手指在屏幕上滑動(dòng)的方式就比較容易且操作效率也較高。當然用手指翻頁(yè)也存在一定的缺陷,因為手指較大,很難進(jìn)行精細化的調整;而且手指在滑動(dòng)過(guò)程中會(huì )擋住一部分屏幕信息,這樣會(huì )對用戶(hù)的閱讀視線(xiàn)造成一定的干擾。

系統也支持左右撥動(dòng)屏幕,實(shí)際上就是替代了常見(jiàn)系統中的橫向滾動(dòng)條的效用。系統以動(dòng)態(tài)的視覺(jué)效果形象地表達了界面信息從右向左切換的過(guò)程。

Iphone支持上網(wǎng)功能,當在瀏覽器的地址欄中輸入相應的網(wǎng)址信息后,系統自動(dòng)在地址欄中顯示相應的進(jìn)度條提示信息,非常直觀(guān)和醒目。一般系統都是采用在界面的狀態(tài)欄顯示相應的打開(kāi)狀況,由于狀態(tài)欄在界面下方使得用戶(hù)不太容易發(fā)現此文本信息。iphone系統也支持點(diǎn)擊后面的刪除圖標清空當前輸入的網(wǎng)址信息。

由于手機屏幕空間較小,默認打開(kāi)的網(wǎng)頁(yè)信息文字較小,如果用戶(hù)想詳細查看某區域的內容,則可以用手指雙擊此區域文字,則此區域內容會(huì )放大顯示,再次雙擊則還原成初始狀態(tài)。
當點(diǎn)擊界面中的新增網(wǎng)頁(yè)按鈕時(shí),系統也以一個(gè)動(dòng)態(tài)的效果(從小變大的方式)打開(kāi)新的網(wǎng)頁(yè)窗體。

當選擇某項加入回車(chē)站時(shí),系統很形象地播放一小段絢麗的動(dòng)畫(huà)效果以表示打開(kāi)回收站圖標然后進(jìn)行刪除的交互過(guò)程。一般系統都是冷冰冰的以一個(gè)靜態(tài)刪除圖標來(lái)表達此概念,其友好性遠不如Iphone這種操作方式。
當點(diǎn)擊界面上的新增圖標時(shí),系統以一個(gè)動(dòng)態(tài)的效果從界面下方彈出一個(gè)浮動(dòng)圖層。圖層中的[Cancel]按鈕色彩效果其他兩按鈕不同,且在布局上也保持一定的間距。這樣做的目的是為了突出表明此按鈕與其它兩功能按鈕的差異性。

當打開(kāi)或者關(guān)閉窗體時(shí),系統著(zhù)重突出了空間的概念,以一個(gè)很強的視覺(jué)效果來(lái)表達窗體打開(kāi)或關(guān)閉的概念。

選中某按鈕進(jìn)行點(diǎn)擊時(shí),系統采用一個(gè)動(dòng)態(tài)的旋轉的方式打開(kāi)新的窗體,給人以很強的空間感。

當點(diǎn)擊下一頁(yè)圖標時(shí),系統以一個(gè)動(dòng)態(tài)的折疊效果關(guān)閉上一頁(yè),真實(shí)模擬了用戶(hù)在日常生活中用手指翻書(shū)的操作場(chǎng)景。

當用戶(hù)點(diǎn)擊編輯鬧鐘中的[Cancel]按鈕時(shí),系統以一個(gè)動(dòng)態(tài)的從上向下滑動(dòng)的方式關(guān)閉當前窗體,同時(shí)自動(dòng)打開(kāi)另一個(gè)窗體。

系統也支持以3維的方式同時(shí)在界面中顯示多個(gè)窗體,每個(gè)窗體以一定的角度顯示在屏幕中。用戶(hù)可以用手指快速的撥動(dòng)相應的窗體,系統支持用戶(hù)反復的進(jìn)行選擇。當選擇好某一個(gè)窗體后點(diǎn)擊即可以全屏的方式打開(kāi)當前的對話(huà)框。

目前我們的產(chǎn)品在設計方面很大程度上深受WINDOWS影響,沒(méi)有完全遵循用戶(hù)的心理模型,導致部分控件反饋不夠清晰,交互方式也不夠友好。還有很多操作需要非常復雜的操作坊法,無(wú)形之中給用戶(hù)帶來(lái)很大的壓力。我們需要努力打破這些條條框框的約束,Iphone這些創(chuàng )新的交互設計思路確實(shí)值得我們學(xué)習和借鑒。
我們需要在以下方面進(jìn)行改進(jìn):
如何更方便的協(xié)助用戶(hù)查看細微部位的詳細信息?
如何提高各種交互的反饋性?
如何提供用戶(hù)的操作效率,如:增大可點(diǎn)擊的區域,嘗試新的交互方式來(lái)替代目前的標準控件?
如何讓用戶(hù)使用機器時(shí)有一個(gè)比較愉悅的心情?
如何盡可能降低用戶(hù)出錯的機率?
如何更好的掌握用戶(hù)真實(shí)業(yè)務(wù)使用的場(chǎng)景?
如何更好的把握用戶(hù)正確的心理模型?
........
聯(lián)系客服