手機軟件交互設計經驗分享:硬件、系統平臺和設計規范的影響

0 評論 6276 瀏覽 3 收藏 19 分鐘

Iphone和Android系統手機風靡全球的同時,移動互聯網的發展也掀起了一股熱潮。最近發現身邊一些朋友紛紛在做手機上的第3方應用,或多或少碰到了些困惑,也許對于做慣了基于瀏覽器的產品的設計師來說,有一些比較典型的要點容易被忽略,這就容易引發出:找不到手機軟件的感覺、布局經常改變、設計和優化時找不到明確的立足點等等一系列令人困惑的問題。本人有過一段手機交互設計的時光,將在這里羅列一些總結或感想,帶一些建議,供看官們斟酌和評判。????? 拋開定位、使用環境這樣的用戶研究體系的大頭,專注于說明手機交互設計的特點,其難點在于如何有效的結合硬件、軟件平臺和設計規范。

以硬件區分手機類型:

  • 僅以物理硬鍵控制操作的機型(后文簡稱按鍵機)
  • 主要以觸摸方式操作的機型(通常包含主頁、掛機等物理鍵)
  • 物理硬鍵齊全,但支持觸摸操作的機型(外形和按鍵機型一樣)

主流的可安裝第3方應用的軟件平臺:

  • 塞班s60(第3和第5版)
  • Windows?Mobile?for?PPC
  • Android
  • Iphone?OS
  • Java(目前有非常巨大的智能和非智能機型群是包含java平臺的)
  • 其他還有很多,諸如plam?os、UIQ等

交互設計規范:

一個有經驗的設計開發團隊,在項目初期會率先著手建立或檢查相應平臺的設計規范。和web控件規范一樣,手機交互設計規范定義了一些常用控件、組件等的布局和響應方式,提煉設計中的公共部分,減少設計和開發的重復思考,并確保整個設計體系的一致性。不同的是,手機交互設計規范不僅有著限定作用,它同時還是一個信息架構的體現、一個創新的過程、并且它還對后續的交互設計起到一定指導作用。我們了解到的iphone的無菜單的風格、各種操作手勢、彈出框、標題欄和返回按鈕,都是在這個階段就需要定義好的,而不是具體到某個功能中才任由設計師發揮(所以說創新應該作為一個系統工程,而不是在某幾個細節上靈光閃現)。

從設計第三方應用的角度看,大致可以濃縮成以下幾個版本的設計規范:

  • S60第3版—有一套比較經典和嚴謹的規范?。另外S60第5版雖然是觸摸屏機型,但是對于交互設計師的工作來說兩者區別并不巨大,只是把OK鍵替換換成了點擊,以及零碎的一些變化。
  • Java版—事實上由于左右物理控制鍵和方向鍵、OK鍵是按鍵機型的普遍配置,S60第3版規范的適用?范圍是非常廣泛的,稍微修改一點就可以適用于Java平臺。區別在于手機的“刪除”和“返回”兩個物理硬鍵的配置不太一致,所以需要統一將右下角的命令默認為“返回”,在編輯文本時,臨時變為“刪除”。這樣犧牲了某些機型的某些操作的效率,保證了這個整體的機型都可使用。
  • Iphone?OS—Iphone的出現一舉打破了之前若干平臺固有的設計定勢,硬鍵和操作模式都精簡了許多。?不過其缺少固定的menu模式,這對第三方軟件的設計來說是個巨大的挑戰,要么需要很大程度上脫離iphone自身的設計規范體系,要么就極端精簡功能。
  • Android—跟從了一些iphone中的經典手勢,操作和頁面布局風格上相對保守一點,保留了menu和back兩個硬鍵,雖然不夠獨樹一幟,但是在功能和設計之間做的了一個不錯的平衡,對于第三方應用來說,這是一個可以有寬廣發揮空間的平臺。

根據上文所述,接下來我就主要以S60第3版、Android、Iphone?OS為代表,通過抽取手機交互設計規范中的部分,來說明他們的特性和區別,順帶展開一些個人經驗的敘述。

大家請看以下截圖:

上面幾幅圖并沒有刻意選擇同一類型的界面來對比,我們不妨先僅關注硬鍵/全局功能鍵,會發現他們之間的顯著不同,實際上反映到設計過程中,這樣的區別對界面設計造成的影響要來的更大。

下面以摘取手機交互設計規范的形式來陳述:

1.硬鍵和手勢控制

S60第3版

Android

Iphone:

以上硬鍵和手勢對于操作的控制,需要我們在設計前有個十分清晰的認識,并且整個團隊達成一致,如有精力則需要專門寫到設計規范文檔中。硬鍵控制是沒有什么改動余地的,兩款觸摸機型可以對手勢適當進行取舍,畢竟有些應用用不到所有的手勢,能精簡操作最好。

(從下面開始,會有一些功能界面,請允許我偷懶一下,用線框代替實際界面截圖)

2.菜單

S60第3版的菜單是由左軟鍵或OK鍵調出,需要定義以下幾點:

(注:聚焦到某一條目上時,通常按OK鍵是打開,但有一些內容包含幾種看起來級別相當的操作,此時會彈出菜單選擇)

  • 如何收回
  • 背景是否霧化
  • 每屏最多顯示多少條
  • 有無二級菜單,如果有,怎樣調出和收回,和一級菜單的位置關系,焦點條的區別
  • 菜單項文字靠左
  • 數字標號,如果整個軟件能保證菜單項目均在10位以內,建議加上,這樣可以與數字鍵盤對應
  • 對聚焦項或當前頁面不適用的菜單項,是不顯示還是文字變灰處理。
  • OK鍵菜單只包含針對聚焦內容的操作項,需控制在一屏之內,避免二級項
  • 菜單項的排序規則:針對聚焦項的在上,其他的在下,這兩部分中分別按照使用頻率從上至下排列

Android

Android傳統的菜單是由menu硬鍵調出,比較多的是2-3行,每行2-3項,看起來像是一些按鈕,所以里面的圖標和文字都居中。作為第3方應用,如果菜單項稍多,做成一縱列的文字項從操作上來看也未嘗不可,畢竟用戶刻意記住其默認的菜單形式也沒有什么好處。只是仍然需要注意控制一下數量,如果需要二級,可以考慮做成彈出的,比如在一級項中選擇“排序”,之后彈出選擇框來選擇

Android還有一種長按菜單,按住某個項目達到一定時間后,會彈出在觸點附近的位置

Iphone

Iphone并沒有一個明確和固定的菜單模式,較保守一點可以說是沒有。一些類似菜單的操作通常是通過彈出選擇,或者是拆分成幾層,一次次點擊進入更深層的頁面去尋找按鈕的形式來達成。所以要做Iphone平臺的第3方應用的同學應當提前做好準備,從產品策劃開始就著手考慮這個問題。最有效的辦法是首先盡可能的縮減功能,其次盡可能的縮減操作方式。否則會發現為了一些細枝末節的操作,還需要設定好幾層頁面。當然,也可以加入一條操作欄來作為輔助,只是整體風格和操作就不Iphone了。

說到這里,不得不結合前兩點延伸一下,對導航系統進行說明:

眾所周知,導航系統主要擔負著幾個任務:展示內容架構、表明當前位置/狀態、表明可以去哪里。在網頁上的典型形式為全局導航條。在手機上,導航系統同樣重要,但是受限于屏幕尺寸,一般沒有足夠的空間放置這樣的組件,但手機有著自己的體系:

我們可以看到各平臺對導航系統的規劃:

  • 標題–顯示當前位置,可以是文字、圖標+文字、也可以是一系列tab
  • 菜單–顯示可以做些什么,通常包含兩種類型的選項:a只針對選中項/只針對當前頁,b全局功能如設置和幫助,也就是說菜單大多數作用是發起針對當前頁的操作,或者轉到和當前頁面沒直接關系的頁面
  • 返回–這個比較復雜一些,也是最需要設計師注意的。鑒于第2條對于菜單形式的描述,如果再加入關聯頁面的選項,項目數量和類型會使菜單不堪重負。并且頁面標題通常無法準確表達出相應頁面的內容,即使放入菜單,也需要用戶花時間去理解和回憶。所以“返回”很重要:一個固定的位置,簡單機械的一個動作,一按—一看—一按—一看,不需要刻意尋找和思考。在一個沒有全局導航的環境里,一步步后退到自己瀏覽過的頁面,從而了解當前的頁面體系,或者重新發起一系列操作,是個能保證用戶找到位置的簡單高效的模式。

在做第3方應用時,需要盡可能嚴格保持以上幾點的規范化

3.焦點

焦點更大的意義是在按鍵機型上,用一個帶底色的條框襯托出當前選中的項。

對焦點的設定和控制應當盡可能的簡單,需要定義默認聚焦的位置、是否允許上下左右循環

在按鍵機型上,4個方向鍵控制焦點向4個方向移動。 通常一個方向只限一種移動方式,如上左圖:上下鍵控制列表區的焦點在列表項間移動,左右鍵控制標題欄的tab左右切換。 如果列表區也分左右的話,處理起來就復雜了,應極力避免。如上右圖:需要先向上移動焦點到標題欄,然后才能按左右鍵切換tab?但如果當前焦點所在的項處于第2屏,第3屏,或者更靠下呢?是否需要一直按住“上”,直到上邊的內容滾好幾屏后才聚焦到tab上?

在一些情況下,焦點容易被遺忘,其中某些對觸摸屏機型同樣適用:

如上圖,頁面中包含了一些可操作的元素:人名、圖片、網址,這里也會隱藏著一些典型操作,例如對網址可能有“打開”“復制”“保存為書簽”等操作,此時聚焦并按OK鍵或者點擊則需要出現彈出菜單。

另外還需要注意上文提到的橫向和縱向切換焦點的問題,正文中同一行如果有兩個名字可以聚焦,但是左右方向鍵已經被標題欄占用,那么切換人名的優先級應降低,改用別的形式,即使是按上下方向鍵來左右切換人名也是可以的。

4.彈出框

除了菜單功能的以外,彈出框一般出現在屏幕底端,同時其他屏幕其他部分背景霧化,這有利于用戶的視線從密密麻麻的小屏幕中快速找到關鍵:

彈出框有很多種類型,除了“確定”“取消”等元件的基本布局以外,幾個平臺區別不是很大,大致可以分成幾個類型和對應的處理方式,以下是我歸納和建議的一些處理方式,只列最適用于S60第3版的:

5.列表

列表項的呈現可以集中定義幾種模式:常態、編輯/被調用:

常態:

編輯/被調用:

6.還有一些方面可以事先定義:

  • 搜索邏輯
  • 事件處理:無信號、低電量提示的形式和時機、來電、來短信、鬧鐘時間到、緩存已滿、發現新版本等
  • 文本輸入:光標的移動、刪除和復制粘貼、選中地址/人名等
  • 復雜邏輯的返回路徑:有時候會出現操作路徑中斷并跳轉的情況。比如正在寫短信時,彈出提示收到新短信,用戶此時通過彈出框直接轉到了查看短信的界面,此時“返回”是返回到查看短信的上一層,還是回到編輯短信的界面,這些情況想要集中處理,是比較令人頭疼的問題。不久前我大概歸納過一套返回邏輯,大意是:a路徑默認是從操作步驟向前一步一步返回,或者逐層向上返回;b如果遇到路徑跨頁面體系轉移,先按照a的方式返回,到達跨頁面跳轉的界面時,允許跨一次跳轉,之后按a的方式返回。

以上羅列了一些我的歸納和心得,開始新項目的時候基本可以按此思路先把這些方面統一規范,提及都是習慣用法,追求穩妥的項目可以直接套用,追求創新的項目也可作為一個評判依據。

最后,用一個簡單的例子提及一下:設計與系統規范盡量保持一致的重要性。

假如我們把mac系統的軟件風格直接搬到windows中,那么在切換不同軟件的時候,最小化、關閉等按鈕的忽左忽右,會使我們經常默認就把鼠標移動到了相反的方向。

每1個第3方應用在手機中都不可能一個程序在戰斗,手機中會自帶很多系統應用,例如電話本、短消息、設置、瀏覽器等,他們都遵循著一樣的規范,用戶每天也會在這些程序中切換若干次。如果一個第3方應用和他們的基本操作方式不同,每次都會使用戶經歷仔細觀察、出錯等過程,想象一下每切換一次軟件就要轉換一套思維的痛苦吧。當然,規范是可以打破的,如果我們找到了簡單高效并且操作方式和習慣用法沒有沖突的方式,可以嘗試一下。例如以前觸摸屏的列表項點擊一次是聚焦,再次點擊為打開,后來普遍改為點擊一次就打開

————————————————————————————————————————————

下期可能的內容:手機交互設計的表達

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!