3.屏幕的大小
在考慮手機屏幕大小時,一定要區(qū)分物理尺寸與分辨率的關(guān)系。物理尺寸的大小和分辨率并非一一對應(yīng),例如對于HTC的S1 2.8 英寸,分辨率為320*240;Nokia n81 2.4 英寸,但是分辨率也是320*240。因此,對于相同分辨率大小的圖標(biāo),在 S1 中看起來就要更大些,但是圖標(biāo)可能就沒有那么細(xì)膩了。
在視覺設(shè)計時,需要首先考慮這個問題,在首次設(shè)計時,應(yīng)該更勤于導(dǎo)入設(shè)計視覺圖片到目標(biāo)屏幕中去檢驗,看看設(shè)計是否合適,別到都完成了視覺設(shè)計,才發(fā)現(xiàn)設(shè)計的圖標(biāo)太小或者不夠精致。
對于2.8 英寸 及320 * 240 (含)以下的屏幕,在現(xiàn)在來說都是小屏幕界面,在這個檔次上,應(yīng)該是鍵盤機占主導(dǎo)地位。在鍵盤機的設(shè)計上應(yīng)該更多地去參考Nokia的規(guī)范(對于可用性,Nokia的設(shè)計還是無可挑剔的)。
對于3.0 英寸 及 480*320 以上的屏幕,可以認(rèn)為是大屏幕,并且是以觸屏機為主的!倦S著屏幕技術(shù)的發(fā)展,屏幕的密度已經(jīng)越來越大,這樣的值也只是一個參考值!
1)屏幕信息布局
小屏幕和大屏幕在客戶端信息內(nèi)容的布局上會存在較大的差異。屏幕大時,除了考慮信息架構(gòu)外,需要考慮在界面上放哪些信息和操作;屏幕小時,更需要考慮信息架構(gòu),對信息更好地分屏,信息之間的聯(lián)系等。
2)不同屏幕設(shè)計特點
a) 大屏幕的設(shè)計特點:
- 在界面中,展示更多的信息;包括界面內(nèi)容、導(dǎo)航和操作按鈕;
- 大屏幕以觸摸屏為主,更多地以手指來直接操作;
- 在屏幕上,顯示的信息不宜過多;信息密碼過高,不利于信息的搜索。
b) 小屏幕的設(shè)計特點:
- 在界面上先展示客戶端的功能及結(jié)構(gòu);
- 以鍵盤機為主,操作方式;
- 先導(dǎo)航,后顯示內(nèi)容,內(nèi)容的分屏合理,符合用戶的期望。
對于手機的屏幕大小適配,會在未來的博文中再詳細(xì)贅述。
二、手機客戶端的設(shè)計原則及適配步驟
1. 客戶端的設(shè)計原則
1) 手機本身的物理特性受限引起的指南:
a) 客戶端的文字輸入,必須要降到最低:由于手機在輸入上的低效性,在設(shè)計的過程中,應(yīng)盡量減少用戶的輸入,如果有可能可以設(shè)置默認(rèn)值,或者讓用戶選擇目標(biāo)值。
b) 客戶端的信息結(jié)構(gòu)好,屏與屏之間的邏輯關(guān)系清晰:由于手機屏幕都普遍較小,即使有4吋屏,那也只能展示較少的信息量,因此,在手機設(shè)計上,更需要有清晰的信息架構(gòu),用戶知道當(dāng)前在哪兒,并能返回到哪兒。
c) 客戶端的操作、功能不要隱藏太深,重要功能都需要在界面中有適當(dāng)?shù)奶崾荆河捎谑謾C屏幕較小,不能展示所有的信息。因此,對重要的、使用頻率高的功能或信息放在最重要的位置,并在首頁上展示或指示。
2) 手機的移動特性引起的指南:
a) 客戶端的最主要的功能操作,用單手可以完成:手機的使用情景多樣性,在很多情景下,用戶都只能單手來操作手機,因此,在客戶端的設(shè)計過程中,需要考慮最重要的核心功能,能否單手操作完成。
b) 客戶端的界面必須簡潔、操作簡單,操作步驟少:由于用戶操作情景復(fù)雜,在使用客戶端的過程可能有額外的認(rèn)知負(fù)荷,因此,在設(shè)計客戶端的過程中,邏輯必須簡單,操作步驟也要減少。
c) 客戶端的界面層次不要太深,最好不要超過3級:
d) 客戶端的提示包括界面、聲音、振動多種形式:用戶在操作手機時,往往不會一直盯著手機屏幕看,因此,很多手機狀態(tài)頁面的切換,脫離了用戶的視線,這時,必須要提供視覺之外的其他感覺通道的信息(如聽覺、觸覺等),來對用戶做提示。
3)其他原則
a) 客戶端UI的適配不必恪守所有的平臺都保持一致,只要一些品牌的關(guān)鍵元素能體現(xiàn)即可:
b) 客戶端的主要操作方式(框架、導(dǎo)航、按鍵功能及軟鍵對應(yīng)方式等)應(yīng)與所承載的手機操作系統(tǒng)保持一致:客戶端都承載在某款具體的手機平臺中,而用戶會對當(dāng)前的手機平臺很熟悉,因此,在設(shè)計的過程中,需要更好地理解當(dāng)前的手機平臺,并使客戶端的設(shè)計與手機系統(tǒng)的設(shè)計邏輯保持一致。
2. 手機客戶端設(shè)計適配的步驟:
個人認(rèn)為,客戶端的適配要以一個平臺為起始,但是要著眼于多個平臺。
1) 根據(jù)公司的戰(zhàn)略,選擇一個最先切入的平臺;
2) 了解該平臺的UI 設(shè)計規(guī)范,可用的UI 控件及交互原則;
3) 確定切入的屏幕大小,以此來設(shè)計第一個客戶端,但是要考慮適配其他屏幕的可能性,是自適應(yīng)來擴展或者縮;
4) 根據(jù)平臺及屏幕大小,來選擇一款最典型的手機,開始客戶端的交互設(shè)計。
5) 確定客戶端的核心目的。如為娛樂為主的,應(yīng)在設(shè)計方式更娛樂性;功能性完成目的為主的,以更易用性為主;
6) 根據(jù)客戶端的功能和內(nèi)容,來設(shè)計客戶端的信息架構(gòu);
7) 根據(jù)UCD的原則,來完成客戶端的交互原型;
在交互原型的過程中,需要考慮手機適配的三因素(平臺、屏幕、觸摸/非觸摸),以便將來的適配。
原文:http://ued.taobao.com/blog/2011/01/30/mobile-app-design-methods-for-milti-platform/
本文鏈接:http://www.95time.cn/design/doc/2011/8304.asp
出處:Taobao.com UED Team
責(zé)任編輯:bluehearts
上一頁 手機客戶端交互適配設(shè)計之我見 [2] 下一頁
|