手機(jī)客戶端交互適配設(shè)計(jì)之我見(jiàn)
2011-08-26 文章來(lái)源: 深達(dá)設(shè)計(jì)
Tags:
手機(jī),客戶端,交互,適配,設(shè)計(jì)
手機(jī)客戶端軟件雖只是手機(jī)中一個(gè)功能，但它卻要比設(shè)計(jì)單款手機(jī)更為復(fù)雜。在設(shè)計(jì)單款、單系列手機(jī)時(shí)，需要考慮這款手機(jī)的軟、硬件優(yōu)勢(shì)及不足，考慮其特性、其UI Style Guideline ，確定這些內(nèi)容后，整個(gè)平臺(tái)的UI也找到基礎(chǔ)了。說(shuō)起來(lái)，這至多是考慮某個(gè)系統(tǒng)、某個(gè)屏幕的特性而已，而不同功能的所有設(shè)計(jì)基礎(chǔ)都是一致的。
但是對(duì)于客戶端，咋一看，好像很簡(jiǎn)單，就是設(shè)計(jì)一個(gè)應(yīng)用。實(shí)則不然，客戶端重在適配，客戶端不僅僅會(huì)用在一個(gè)型號(hào)的手機(jī)中。這樣問(wèn)題隨之而來(lái)，如何能適配不同的手機(jī)呢，手機(jī)千變?nèi)f化，我總不能只針對(duì)一款手機(jī)，一個(gè)平臺(tái)吧？當(dāng)然也有些客戶端確實(shí)是這樣的，只能使用Windows Mobile、Symbian、iOS、Android、Java(非系統(tǒng))等的某個(gè)平臺(tái)。但是即使對(duì)同一個(gè)平臺(tái)，問(wèn)題還是很多，是要在觸摸屏中來(lái)用，還是在鍵盤(pán)機(jī)中使用？是在大屏幕中，還是小屏幕中等等。如何處理？？？有待大家討論，這里只是拋磚引玉…
客戶端在不同的平臺(tái)中，界面展示和特性各不相同
所以，本文中，我想簡(jiǎn)單的總結(jié)一下手機(jī)客戶端的交互適配方法，希望能更好地來(lái)指導(dǎo)當(dāng)前移動(dòng)應(yīng)用的設(shè)計(jì)需求。
一、 手機(jī)客戶端的適配分析
對(duì)于手機(jī)客戶端的適配，我想首先需要做的就是如何適配，我要在什么樣的手機(jī)上使用？在設(shè)計(jì)上，我會(huì)從平臺(tái)、鍵盤(pán)機(jī)與觸屏機(jī)、屏幕大小三個(gè)維度進(jìn)行分析：
1. 平臺(tái)：
不同的平臺(tái)手機(jī)的設(shè)計(jì)風(fēng)格、操作方式、硬件配置都存在很大的差異。當(dāng)前的主流平臺(tái)主要包括 iOS、Android、Symbian、Blackberry、Win Phone7、Web OS等。
每個(gè)平臺(tái)都有各自的設(shè)計(jì)指南（UI Style），其對(duì)應(yīng)的手機(jī)的硬件也有各自的特點(diǎn)，如iPhone的home鍵，Android 的back鍵，blackberry的滾輪等等。特別提一下Palm，Palm的web OS真的值得手機(jī)交互設(shè)計(jì)師研究一下（手機(jī) Palm pre）。因此，在設(shè)計(jì)上，不僅要了解平臺(tái)的設(shè)計(jì)指南，同時(shí)需要考慮平臺(tái)的硬件特征，使自己設(shè)計(jì)的應(yīng)用不僅符合平臺(tái)的交互特性，并能兼容平臺(tái)上硬件使用習(xí)慣，提高應(yīng)用的可用性。
Win phone 7 系統(tǒng)的幾個(gè)特點(diǎn)
iOS系統(tǒng)的幾個(gè)特點(diǎn)
Android 系統(tǒng)的幾個(gè)特點(diǎn)
由上圖可知，幾個(gè)最新的平臺(tái)也存在較大的不同。對(duì)于手機(jī)的平臺(tái)特性，會(huì)在未來(lái)的博文中再詳細(xì)贅述。
2. 觸屏機(jī)和鍵盤(pán)機(jī)
鍵盤(pán)機(jī)和觸屏機(jī)在操作方式上很不同。
下面簡(jiǎn)單總結(jié)一下鍵盤(pán)機(jī)和觸屏機(jī)的特點(diǎn)。
鍵盤(pán)機(jī)：
- 鍵盤(pán)機(jī)的操作方式采用Soft Key 與屏幕軟鍵標(biāo)簽一一映射（左右軟鍵、對(duì)話框的按鈕等都需要與鍵盤(pán)的標(biāo)簽一一對(duì)應(yīng)），對(duì)所有的屏幕元素，都需要用五向鍵（滾輪）導(dǎo)航；需要用光標(biāo)來(lái)操控屏幕上的所有元素。
- 一般左右軟鍵上有一個(gè)【返回】鍵。用戶可以通過(guò)軟鍵快速的返回。
- 由于用鍵盤(pán)操作時(shí)，每次選擇項(xiàng)目都需要從上到下依次瀏覽項(xiàng)目，因此重要性高、使用頻率高的元素應(yīng)放在屏幕的最前面。
- 按鍵可以根據(jù)數(shù)字鍵來(lái)設(shè)置一些快捷的操作；通過(guò)長(zhǎng)按來(lái)設(shè)置快速翻頁(yè)。
- 除了網(wǎng)頁(yè)的形式，絕大多數(shù)的操作都是在菜單里完成。
- 文字輸入的方式，通過(guò)鍵盤(pán)來(lái)輸入，全鍵盤(pán)和數(shù)字鍵又有不同。
觸屏機(jī)（屏幕尺寸會(huì)略大）：
觸摸屏手機(jī)最主要的特點(diǎn)是直接操作屏幕對(duì)象。對(duì)用戶來(lái)說(shuō)，不需要進(jìn)行映射的轉(zhuǎn)換，因此易學(xué)性更強(qiáng)。但是由于手機(jī)的使用場(chǎng)景很特殊，或站著，或在行走，或只能騰出一只手等等，在這些時(shí)候要精確指點(diǎn)操作也有一定的難度。
觸屏手機(jī)也有兩種操作形式，用手指直接操作或者用筆操作。但是當(dāng)前的屏幕發(fā)展及推出的機(jī)型來(lái)看，主要會(huì)針對(duì)用手指直接來(lái)操作。如果用戶操作后，有屏幕的力反饋，則效果會(huì)更好。
1）操作對(duì)象的大小符合手指的操作，按鍵的大小設(shè)置規(guī)范：
- 食指點(diǎn)擊的間距 約為7*7 mm， 1mm間距，
- 拇指點(diǎn)擊8*8 mm，2mm間距。當(dāng)前推薦的值為9mm 大小，最小應(yīng)不小于7mm。
- 當(dāng)然一些重要操作，或者頻繁點(diǎn)擊的區(qū)域可以設(shè)置的略微更大一些。
2）由于單手操作時(shí)，只能使用拇指操作，因此，使用最頻繁的按鈕大小必須根據(jù)拇指的大小來(lái)設(shè)置；拇指輻射的范圍主要在屏幕的底部，因此需要把這些操作放在稍微靠下面的位置更好。
3）信息顯示：大屏幕可以顯示更多的內(nèi)容，但是避免信息顯示過(guò)于擁擠。
4）手勢(shì)的定義：當(dāng)前手機(jī)上我們可以看到一些基本的手勢(shì)操作，如撥動(dòng)、拖拽、雙指放大/縮小、雙擊等最常用的操作。其實(shí)還有很多其他的手勢(shì)形式，如畫(huà)圈，打勾，打叉，雙指點(diǎn)擊，雙指滑動(dòng)等等，這些需要根據(jù)手機(jī)本身的配置來(lái)使用，不建議隨便使用特殊的手勢(shì)來(lái)定義常見(jiàn)的操作行為。
5）輸入的方式：輸入時(shí)會(huì)起一個(gè)虛擬鍵盤(pán)，鍵盤(pán)的顯示與隱藏都需要考慮，同時(shí)，可以根據(jù)當(dāng)前輸入的目的，直接做操作的按鈕。
3．屏幕的大小
在考慮手機(jī)屏幕大小時(shí)，一定要區(qū)分物理尺寸與分辨率的關(guān)系。物理尺寸的大小和分辨率并非一一對(duì)應(yīng)，例如對(duì)于HTC的S1 2.8 英寸，分辨率為320*240；Nokia n81 2.4 英寸，但是分辨率也是320*240。因此，對(duì)于相同分辨率大小的圖標(biāo)，在 S1 中看起來(lái)就要更大些，但是圖標(biāo)可能就沒(méi)有那么細(xì)膩了。
在視覺(jué)設(shè)計(jì)時(shí)，需要首先考慮這個(gè)問(wèn)題，在首次設(shè)計(jì)時(shí)，應(yīng)該更勤于導(dǎo)入設(shè)計(jì)視覺(jué)圖片到目標(biāo)屏幕中去檢驗(yàn)，看看設(shè)計(jì)是否合適，別到都完成了視覺(jué)設(shè)計(jì)，才發(fā)現(xiàn)設(shè)計(jì)的圖標(biāo)太小或者不夠精致。
對(duì)于2.8 英寸 及320 * 240 （含）以下的屏幕，在現(xiàn)在來(lái)說(shuō)都是小屏幕界面，在這個(gè)檔次上，應(yīng)該是鍵盤(pán)機(jī)占主導(dǎo)地位。在鍵盤(pán)機(jī)的設(shè)計(jì)上應(yīng)該更多地去參考Nokia的規(guī)范（對(duì)于可用性，Nokia的設(shè)計(jì)還是無(wú)可挑剔的）。
對(duì)于3.0 英寸 及 480*320 以上的屏幕，可以認(rèn)為是大屏幕，并且是以觸屏機(jī)為主的。【隨著屏幕技術(shù)的發(fā)展，屏幕的密度已經(jīng)越來(lái)越大，這樣的值也只是一個(gè)參考值?！?/span>
1）屏幕信息布局
小屏幕和大屏幕在客戶端信息內(nèi)容的布局上會(huì)存在較大的差異。屏幕大時(shí)，除了考慮信息架構(gòu)外，需要考慮在界面上放哪些信息和操作；屏幕小時(shí)，更需要考慮信息架構(gòu)，對(duì)信息更好地分屏，信息之間的聯(lián)系等。
2）不同屏幕設(shè)計(jì)特點(diǎn)
a) 大屏幕的設(shè)計(jì)特點(diǎn)：
- 在界面中，展示更多的信息；包括界面內(nèi)容、導(dǎo)航和操作按鈕；
- 大屏幕以觸摸屏為主，更多地以手指來(lái)直接操作；
- 在屏幕上，顯示的信息不宜過(guò)多；信息密碼過(guò)高，不利于信息的搜索。
b) 小屏幕的設(shè)計(jì)特點(diǎn)：
- 在界面上先展示客戶端的功能及結(jié)構(gòu)；
- 以鍵盤(pán)機(jī)為主，操作方式；
- 先導(dǎo)航，后顯示內(nèi)容，內(nèi)容的分屏合理，符合用戶的期望。
對(duì)于手機(jī)的屏幕大小適配，會(huì)在未來(lái)的博文中再詳細(xì)贅述。
二、手機(jī)客戶端的設(shè)計(jì)原則及適配步驟
1. 客戶端的設(shè)計(jì)原則
1） 手機(jī)本身的物理特性受限引起的指南：
a) 客戶端的文字輸入，必須要降到最低：由于手機(jī)在輸入上的低效性，在設(shè)計(jì)的過(guò)程中，應(yīng)盡量減少用戶的輸入，如果有可能可以設(shè)置默認(rèn)值，或者讓用戶選擇目標(biāo)值。
b) 客戶端的信息結(jié)構(gòu)好，屏與屏之間的邏輯關(guān)系清晰：由于手機(jī)屏幕都普遍較小，即使有4吋屏，那也只能展示較少的信息量，因此，在手機(jī)設(shè)計(jì)上，更需要有清晰的信息架構(gòu)，用戶知道當(dāng)前在哪兒，并能返回到哪兒。
c) 客戶端的操作、功能不要隱藏太深，重要功能都需要在界面中有適當(dāng)?shù)奶崾荆河捎谑謾C(jī)屏幕較小，不能展示所有的信息。因此，對(duì)重要的、使用頻率高的功能或信息放在最重要的位置，并在首頁(yè)上展示或指示。
2） 手機(jī)的移動(dòng)特性引起的指南：
a) 客戶端的最主要的功能操作，用單手可以完成：手機(jī)的使用情景多樣性，在很多情景下，用戶都只能單手來(lái)操作手機(jī)，因此，在客戶端的設(shè)計(jì)過(guò)程中，需要考慮最重要的核心功能，能否單手操作完成。
b) 客戶端的界面必須簡(jiǎn)潔、操作簡(jiǎn)單，操作步驟少：由于用戶操作情景復(fù)雜，在使用客戶端的過(guò)程可能有額外的認(rèn)知負(fù)荷，因此，在設(shè)計(jì)客戶端的過(guò)程中，邏輯必須簡(jiǎn)單，操作步驟也要減少。
c) 客戶端的界面層次不要太深，最好不要超過(guò)3級(jí)：
d) 客戶端的提示包括界面、聲音、振動(dòng)多種形式：用戶在操作手機(jī)時(shí)，往往不會(huì)一直盯著手機(jī)屏幕看，因此，很多手機(jī)狀態(tài)頁(yè)面的切換，脫離了用戶的視線，這時(shí)，必須要提供視覺(jué)之外的其他感覺(jué)通道的信息（如聽(tīng)覺(jué)、觸覺(jué)等），來(lái)對(duì)用戶做提示。
3）其他原則
a) 客戶端UI的適配不必恪守所有的平臺(tái)都保持一致，只要一些品牌的關(guān)鍵元素能體現(xiàn)即可：
b) 客戶端的主要操作方式（框架、導(dǎo)航、按鍵功能及軟鍵對(duì)應(yīng)方式等）應(yīng)與所承載的手機(jī)操作系統(tǒng)保持一致：客戶端都承載在某款具體的手機(jī)平臺(tái)中，而用戶會(huì)對(duì)當(dāng)前的手機(jī)平臺(tái)很熟悉，因此，在設(shè)計(jì)的過(guò)程中，需要更好地理解當(dāng)前的手機(jī)平臺(tái)，并使客戶端的設(shè)計(jì)與手機(jī)系統(tǒng)的設(shè)計(jì)邏輯保持一致。
2. 手機(jī)客戶端設(shè)計(jì)適配的步驟：
個(gè)人認(rèn)為，客戶端的適配要以一個(gè)平臺(tái)為起始，但是要著眼于多個(gè)平臺(tái)。
1) 根據(jù)公司的戰(zhàn)略，選擇一個(gè)最先切入的平臺(tái)；
2) 了解該平臺(tái)的UI 設(shè)計(jì)規(guī)范，可用的UI 控件及交互原則；
3) 確定切入的屏幕大小，以此來(lái)設(shè)計(jì)第一個(gè)客戶端，但是要考慮適配其他屏幕的可能性，是自適應(yīng)來(lái)擴(kuò)展或者縮??；
4) 根據(jù)平臺(tái)及屏幕大小，來(lái)選擇一款最典型的手機(jī)，開(kāi)始客戶端的交互設(shè)計(jì)。
5) 確定客戶端的核心目的。如為娛樂(lè)為主的，應(yīng)在設(shè)計(jì)方式更娛樂(lè)性；功能性完成目的為主的，以更易用性為主；
6) 根據(jù)客戶端的功能和內(nèi)容，來(lái)設(shè)計(jì)客戶端的信息架構(gòu)；
7) 根據(jù)UCD的原則，來(lái)完成客戶端的交互原型；
在交互原型的過(guò)程中，需要考慮手機(jī)適配的三因素（平臺(tái)、屏幕、觸摸/非觸摸），以便將來(lái)的適配。
深圳網(wǎng)站建設(shè)設(shè)計(jì)公司－深達(dá)設(shè)計(jì)(khalije-fars.com)，擁有專(zhuān)業(yè)設(shè)計(jì)團(tuán)隊(duì)為企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),網(wǎng)站制作,FLASH網(wǎng)站建設(shè)設(shè)計(jì),Flash互動(dòng)設(shè)計(jì),網(wǎng)頁(yè)制作,品牌設(shè)計(jì).
