天天看點

淺議手機用戶端設計

淺議手機用戶端設計

(一) 用戶端安裝

一、前言

從2004年Nokia N-Gage QD剛發行入手N-Gage QD入手開始,到現在為止使用了N-Gage QD、E60、N73、E71四部手機,平均下來每部手機的使用時間隻在一年多一些,盆地也算是有些敗家了。

近一兩年随着公司業務的開展和工作方向的變化,盆地也從一個純粹的使用者逐漸過渡到了設計者的角色,在這個過程中陸陸續續的也有一些感悟,整理以作積累和留念。

注:由于個人使用經驗集中于symbian系統的手機用戶端,文章描述将基于symbian系統

二、手機用戶端安裝

1.手機用戶端的安裝包盡可能的要小

要安裝手機用戶端至少需要安裝程式先在手機上,目前手機用戶端軟體放入手機一般有幾個途徑:

a. 通過各種方式下載下傳到電腦,通過藍牙、紅外、資料線、讀卡器等方式拷貝到手機; 這裡額外提一句,廣東移動有一款名為手機快車的軟體,支援在沒有上述方式的情況下直接通過網絡發送到手機,前提需要其手機安裝用戶端,這一部分流量目前是免費,走的是cmnet、cmwap之外的專用apn: gdmob.gd。

b.通過短信方式下發下載下傳位址,使用者通路連結直接在手機上下載下傳

c.提供wap網址,使用者通路wap網站後選擇合适版本下載下傳

較小的安裝包,可以加快下載下傳、安裝速度,并在采用手機進行下載下傳時有效減少使用者的流量費,在目前中國手機流量費并不便宜的今日,這點優化還是有一定價值的。

2.安裝過程可以适度提示

symbian系統在軟體安裝時是可以彈出提示文字的,在這裡可以将一些用戶端最主要的用途、特别注意事項、最吸引使用者的要點等用文字展示出來,便于使用者在使用前會有一些印象。

這個提示有兩點要注意:第一不能過多,一般有一次就夠了,因為這些提示都是需要使用者确認的,屢次打斷使用者的安裝可能會導緻使用者中斷安裝;第二對于追求裝機量的用戶端,可能沒有更合适,多了一步操作還是會降低使用者裝機的成功率。

3.如果條件允許則進行正式簽名

s60第三版開始引入了簽名機制,一方面一定程度上增加了安全機制,另外一方面,其實也是一種盈利手段。每次正式簽名需要200美元,而如果不是正式簽名則會提示安全資訊。這一步提示帶有警示性,也會進一步降低使用者的安裝比例。

4.根據實際情況設定安裝後自啟動

symbian系統是可以做到安裝後自啟動的,比如google map、手機大頭等都是采用安裝後自啟動的方式。這些方式的好處是安裝後首次不需要使用者尋找到安裝位置而直接進入,避免因為使用者尋找産品未果而造成的客戶流失。

但安裝後自啟動的方式在部分使用者來說會有流氓行徑的感覺,特别是安裝後自動聯網并占用使用者流量等情況。如果相信自己産品的吸引力能夠足夠抵消這些反感帶來的負面影響,則安裝後自啟動不失為一種較好的選擇。

(二)用戶端啟動

一、前言

用戶端啟動沒有太多的元素,基本上是三種場景的組合:

1. 啟動界面 2. 提示資訊 3. 主界面

下面根據自己的一些知識談一些個人的看法,盆地平時忙于具體的事物而較少做總結,随着時間的推移,有些曾經的經驗教訓可能也就逐漸遺忘,付諸于文字是有效保留這些收獲的手段。

二、啟動界面

在一些較為簡單或啟動較快的手機用戶端中,可能會省略掉啟動界面,但作為使用者使用手機用戶端已經被培養形成習慣的第一個界面,一般還是會使用啟動界面的。

注: 即使處于啟動界面,也應該給使用者提供退出的選擇,即所謂的逃生出口,避免因為啟動出現異常導緻使用者一直停留在此界面無法處理。

在symbian系統上,一般情況下會采用設定在啟動時右軟鍵為退出按鈕的方法,但為了美觀一般退出或取消的文字提示不會顯示在啟動界面中。

1. 使用場景

啟動界面一般會在如下幾類情況下使用:

a.資訊擷取和資料互動 啟動過程中進行登入、認證、網絡資料擷取、大量本地資訊讀取等需要較多時間,為避免使用者被動等待,提供對使用者有一定價值的啟動界面,以降低使用者對時間流逝和等待的在意程度。

b.介紹和幫助 啟動過程中向使用者顯示值得使用者注意的資訊,比如顯示symbian認證資訊提升使用者信任感、顯示手機用戶端關鍵功能在使用者使用前形成初始印象、顯示幫助資訊等。

顯示symbian認證資訊的好處是對于了解的使用者會增加信任感和認同感,不過由于相當多使用者并不了解什麼是s60、什麼是認證以及認證有什麼好處,是以盆地個人還是認為在非必要時可以不顯示此資訊,避免造成在啟動時即讓使用者有一個疑惑。

當使用者在使用産品時連續幾次遇到未知時,使用者會産生明顯的挫折感,一般情況下繼續探索和使用的興趣将會大幅降低。

注:如果盆地所擷取的資訊無誤,啟動時顯示下圖代表經過symbian認證,相對來說具備可信性,并且一般情況下會提示此程式将會使用使用者哪些資源,比如提示使用電話功能、短信功能等資訊。

c.營銷和推廣 由于啟動界面是大部分手機用戶端中使用者使用時必經的階段,在此界面中加入的營銷和推廣資訊理論上會獲得相當高的曝光率和到達率;當然,由于這裡是啟動界面,是以适合做一些純展示而非互動類的營銷和推廣資訊,如果是互動類,則适合在其他場合而非啟動界面中進行。

d.節日、特殊日期提醒 此種使用方法在手機qq中較為常見;這種方法屬于使用者體驗的細節,實作上需要動态擷取資料,由于啟動是常見手機用戶端使用的第一個界面,是以一般需要提前下載下傳,或下載下傳後下次啟動使用;

如果采用此種方法,可以考慮學習手機qq制作帶有品牌特色的節日、特殊節日的啟動界面,以加強品牌潛在影響力和強化品牌效應。

e.版權和品牌強調 有相當一部分手機用戶端會在啟動時專門提供界面強調版權和品牌,以起到宣傳和影響使用者潛意識的目的。

2. 常見元素

a.Logo 基本上是必不可少的元素,便于向使用者強調品牌和加深使用者對logo的熟悉程度,同時如果有多項産品,使用者看到logo即知道是什麼公司或什麼人的出品。

b.進度條 凡是涉及較多資訊擷取的啟動界面基本上都會出現進度條,進度條是一種使用者所熟知的并可以降低使用者等待時焦慮程度的非常有效的方案。

進度條的選擇應該以使用者所熟知的一些進度條為基準,避免出現自由發揮的不像進度條但用來表達進度條含義的情況。

進度條的選擇,盆地個人有如下建議:

1.難以估計進度或無法估計進度的loading條,可以采用循環進度條的形式進行,但滾動速度應加快,較快的滾動速度會使使用者一定程度上形成錯覺,認為産品啟動很快或産品很快。

下面是一個簡單示例(photoshop水準有限,不要求美觀,隻要求說明清楚),可以考慮采用此種方式或其他循環性質的進度條,滾動速度建議較快。

2.可以估計進度的loading條,包括可以精确估計的進度條(此種情況比較困難),建議采用先快後面的展示形式。

比如前百分之六十或七十是以較快速度完成的情況,使用者會形成一種錯覺認為啟動進度較快同時因為進度很快超過一半以上,因為使用者已經花了一些代價且離成功不遠,進而更願意等待。

c.版本資訊、平台資訊、廠家資訊等

d.幫助資訊、營銷資訊、推廣資訊、認證資訊、介紹資訊等

e.節日資訊、版權資訊、公司資訊、品牌等

三、提示資訊

提示資訊一樣屬于手機用戶端啟動的可選步驟,一般情況下會在如下場景中出現:

1.登入、注冊、擷取資訊等其他情況出現異常時

在啟動過程中,如果由于某些原因未能成功進入主界面,則應該彈出相應的提示資訊,這些提示資訊應該絕對清晰的告知使用者異常,并相對清晰的告知使用者可能原因和提供解決建議。

2.有新版本時的提示

有不少手機用戶端會在啟動時檢測新版本,并設定在有新版本時提示使用者。版本檢測和提示是否都放在啟動時進行可根據實際情況調整。

需要注意一般情況下更新會有強制性更新(即不更新無法繼續使用)和非強制性更新(不更新可以使用,但可能有功能缺失或其他缺陷)兩種。

3.權限确認

此種情況較常見于kjava手機用戶端,由于受虛拟機和系統限制,在使用某些功能例如網絡通路能力等時會彈出提示詢問是否允許。

這裡關于kjava的權限确認有一個值得注意的細節,由于在登入時可能僅用到網絡通路權限,但在使用中又會用到其他權限:比如讀取使用者資料等,此時就會有兩種做法:

第一種是在用到時提示使用者确認,第二種是在啟動時即使當時沒有用到也提前提示使用者确認,避免後續使用者需要多處确認。

這裡較好的處理方法是根據是否可以在一次确認中完成多種權限的确認,如果可以則在啟動時一次确認,如果不行則後續使用到具體權限時确認。

原則是盡可能降低使用者确認的次數,進而避免對使用者操作的打斷。

四、主界面

在手機用戶端啟動這個環節談到主界面,是因為有一些手機用戶端會越過啟動界面、提示資訊直接進入主界面。

一種是進入主界面後所有功能立刻可用,比如上面提到的一些純本地程式且需資訊較少或速度較快,這種屬于正常行為。

另外一種是先越過啟動界面、提示資訊進入界面後先讓使用者看到主界面的外觀,同時顯式或隐式的進行登入、注冊、認證、資料擷取等操作。如果記憶沒有出錯的話,手機大頭應該是一個相對比較典型的例子。

這種方案會讓使用者感覺啟動很快,但如果進入主界面後在能使用前需要等待較久時間則會帶來較差的使用者體驗。盆地個人認為比較适合進入後是向導式的手機用戶端,這種情況下即可立刻顯示使用者可控制的界面,又可以多步向導過程中給類似登入、注冊、認證等留出隐式處理時間。

如何采用,還需要根據實際情況來;盆地個人認為是否采用需要慎重;适度的優化有利于改善體驗,但過度的優化可能會帶來複雜度的大幅增加,當對使用者體驗的改善非必須且相對于成本遠不合算的時候,則此類優化屬于優先級較低或可摒棄的優化。

注: 本篇内容相對來說文字較多,且屬于個人的看法而非對每個人都适用的結論,如果你耐心看到這裡,說明本文還有一些可取之處,不妨談談自己的看法以作交流。

(三)CS模式和BS模式

一、前言

關于CS(Client-Server)模式和BS(Browser-Server)模式的水很深,盆地自己也認為對此了解不夠透徹,但作為手機用戶端設計,如果不對CS、BS做一定程度的了解,是很容易出現一些方向性的錯誤、走一些彎路抑或在實作成本效益上付出過多代價。

本文偏向于基礎知識,産品人員很多情況下不僅僅要了解表現、互動,還需要一定程度上了解可實作性、實作代價、實作形式、實作限制等。

二、CS模式産品

CS(Client-Server)模式:顧名思義為用戶端-伺服器的意思,對比的話類似我們pc上面除浏覽器外和伺服器有互動的軟體,例如qq、防毒軟體等等都是CS模式;如果和伺服器沒有互動,則可以認為是一個純用戶端。用戶端和伺服器互動的方式可以通過自定義協定、公共協定(ftp、http)等各種方式進行。

在手機上面的用戶端例如Gmail用戶端、搜狗輸入法、來電通都屬于CS模式的産品.

CS模式最大的好處就是可以相對靈活實作各種預期的功能和特效,所受的限制為系統提供的底層功能或開發工具的限制。

CS模式最大的缺點就是大部分功能新增、界面調整、邏輯變更需要更新用戶端來實作。當然,通過良好的設計可以一定程度上實作不更新用戶端來實作新功能、邏輯變更等,但相對來說在不更新用戶端的情況下對架構設計要求較高。

三、BS模式産品

BS(Browser-Server)模式:顧名思義為浏覽器-伺服器的意思,對比的話類似我們PC上面浏覽器使用的産品即為BS模式産品,例如google doc、各類網站等。

浏覽器就盆地看來可以認為是Client的一種,隻不過實作了和Browser有關的協定(http等)和标記集(wml、html等)。

在手機上純粹的BS産品可以認為是我們常見的手機通路的網站。在手機用戶端中常用的浏覽器(UCweb、opera mini、opera mobile、qq浏覽器等)屬于這些産品的承載體。

為了增加功能,一般會自行開發浏覽器,例如ucweb、qq浏覽器中除浏覽功能外,還預設内置了網站導航、曆史浏覽記錄、各類頻道等,即屬于浏覽器非協定實作和表現外的新增功能。

BS模式産品最大的好處就是可以靈活實作邏輯變更、内容動态變更、界面布局調整等。

BS模式産品的不足是受限于實作的浏覽器标記集和浏覽器能力,許多特殊效果無法通過浏覽器實作。雖然可以一定程度上通過自定義開發來實作功能新增,但此種方法卻喪失了BS的靈活性,而偏向于CS模式的用戶端。

目前絕大部分的手機用戶端浏覽器基本上停留在支援html、wml的階段,受限于手機性能和pc表現差異等方面,基本上不支援或僅少量支援css和JavaScript。

四、CS模式和BS模式結合産品

綜合考慮靈活性、實作效果等,不少手機用戶端産品會選擇CS模式和BS模式結合的産品,至于其中CS和BS所占的比重則更多根據所需要實作的功能、表現形式等來決定。

例如手機QQ中,涉及到IM部分均為CS模式(這一塊難以通過BS模式支援的協定來表現),而其他的頻道例如資訊、音樂、書城、股票等則通過BS方式來表現。 手機msn也和手機qq類似,在IM功能實作上采用CS,而資訊類采用BS方式。手機QQ音樂中除音樂門戶是BS模式外,其他都是CS模式實作。

五、一些注意要點

受限于BS模式的承載協定和支援标簽集(目前和PC上的實作還有較大差距),如果不支援或難以支援的方式則主要考慮CS模式實作,而在可以實作的情況下是否實作也需要根據實際情況來。

1. 如果希望有較絢麗的效果,基本上可以不用考慮BS。

2. BS模式的産品中,左右軟鍵選項菜單的内容基本是固定的,除了部分情況下會變化外,大部分情況下都表現的一緻,這類似于浏覽器中菜單的内容基本上不會根據浏覽網站不同而變化是一緻的。

3. 想實作通過選項菜單來控制主界面中元素的功能(例如通過選項菜單選中主界面中某個元素), 最好考慮CS模式。

4. 無法在承載協定上支援的例如音樂播放、視訊播放等,則要采用CS模式。

5.希望動态加載資料,CS模式和BS模式都可以支援

6.如果希望動态排版變化,則最好采用BS模式

7.如果要在BS模式調用非标準本地能力,則需要自定義标記集

六、适配

如果采用CS模式,則基本上不同分辨率、不同系統的用戶端基本都需要進行适配,即提供不同安裝包,每次變更适配工作量巨大。同時不同分辨率的适配基本上都需要相應的UI配合設計和切圖等。

如果采用BS模式,則在标準的浏覽器标記集支援範圍内,則隻需要更改伺服器以及根據ua不同展示不同頁面。如果為自開發浏覽器核心,則由于系統、平台、開發語言等不同,進行不同的适配,但由于業務邏輯和功能基本上在伺服器實作,适配工作也大大減少。浏覽器本身可以開發自适應的功能,在界面不包含絢麗效果的情況下,很多情況可以實作自适應。

根據業界某曆史相對較舊的用戶端開發公司介紹,其公司采用的為BS加自定義标記的模式,BS模式中如果需要調用不支援能力的時候,則通過自定義标記集支援,針對同一個标記集在不同平台中根據實際情況做不同解析,通過此種方式降低背景适配工作的工作量,以及保障用戶端支援的功能。

七、小結

本文較為零散,很難起到循序漸進了解的效果,受限于盆地個人了解深度和表達能力的限制,估計本文對有一定手機用戶端設計經驗的人可能會有幫助,如果實際經驗沒有涉及到相關方面的話,此文幫助程度恐有限。

(四)用戶端導航設計

一、前言

之前關于手機用戶端導航曾經羅列一些常見的到導航設計,見下面兩篇,當時本來想寫第三篇的,由于手頭事情耽擱下來了,現在繼續此話題繼續扯一下。

1. 淺議手機用戶端軟體導航設計(1) 2. 淺議手機用戶端軟體導航設計(2)

二、導航如何選擇

就盆地個人的看法,可以從如下幾個方面去考慮導航的選擇:

1.遵從使用者習慣

遵從使用者習慣是指導航的操作、排列、切換等形式盡量和使用者的常用軟體、操作形式保持一緻。比如上下鍵在界面上展現的就應該是控制上下焦點的移動,在播放器中一般中鍵就是暫停和播放的等等。

之前文章中給出的UCWEB(6.3beta)的頻道切換時采用右軟鍵來切換(後來的版本已經改為迎合使用者習慣的标簽形式),這一點是和使用者的習慣相違背的。

Nokia的維信,雖然說理念非常不錯,但在操作上更多是讓人感覺新奇,使用者友好性和在手機的操作便利性上不敢恭維,還好可以在電腦上配合進行一部分操作。

2.提示明顯,操作響應及時

提示明顯指使用者可以根據固有習慣或提示知道如何操作;操作響應及時指兩個方面,一方面指操作要有響應,另外一方面響應需要及時和明顯。

比如魔橙的左右軟鍵提示被隐藏,使用者不試驗就不知道可以操作左右軟鍵,下方的方塊其實是代表一個個頻道,這個甚至會讓使用者猜測不出來。為了界面的"美觀"犧牲了使用者的體驗,盆地個人認為是得不償失的。

3.參考平台常見界面

在Symbian平台中最常見的是三類:清單、九宮格、标簽三種導航方式,采用這幾種方式或類似的方式設計的導航使用者的學習成本會比較低。

在windows mobile平台常見的有九宮格、頻道在下方的标簽等形式。

這幾種單獨采用或者組合采用是最常見的導航形式,而有些産品的标新立異大幅增加了使用者的學習成本,導緻使用難度增加。

比如手機msn采用的兩級導航,其中第二級導航是需要"#"激活二級導航,然後左右鍵選擇後中鍵确認才能進入相應到相應頻道,使用非常不便。

盆地在項目中也曾經參考過手機msn進行過導航設計,雖然對二級導航做了一點優化設計,調整為"#"直接切換二級導航的形式,但即使這樣,使用起來還是非常不便。

而維信的導航如果脫離了PC端的排版和整理,在使用者使用上則可用性就更差,盆地個人也認為是一個不成功的導航設計。

類似之前文章中提到的飛信3.0、MIMO等更多參考了windows Mobile平台的一些界面。

4.同産品和營銷配套

導航的選擇也應該和産品的類型、功能以及采用的營銷政策等相配合,比如産品是一個非常純粹的功能類似搜狗輸入法、來電通、列車時刻表等,則沒有必要設定九宮格、标簽等比較複雜的導航方式,清單是一個很合适的選擇,使用者也非常熟悉和容易接受。

如果産品功能很清晰分為幾塊,且這幾塊使用者都比較清楚,則可以采用九宮格方式。不過九宮格方式由于一開始進去就看到一個個塊,适合功能性産品。

标簽的方式更适合内容類的,可以一進去就可以看到具體的内容,不像九宮格進去隻能看到一個個的宮格,進而隻能對功能而非内容有直接的了解。

如果是一個需要引導使用的産品,則初次使用可以采用引導式,引導使用者一步步完成。

如果是有營銷需要,界面中還需要配套營銷資訊,包括在導航中如何排版和哪一步出現等。

5.别太急進

在手機設計和手機用戶端設計發展這麼多年的時間,除了這裡提到的一些導航方式外,還是有很多沒有提到的導航方式。

不少做設計的朋友們可能更希望在設計時達到驚豔、颠覆傳統等目标,不過要知道,雖然我們可能是天才,但是别人也不是蠢材,這麼多年的沉澱還是有道理的。

初期最好别太急進,也别太貪新奇,先參考現有的東西踏實做一個第一版出來,後續在小衆範圍内去進行新的版本的測試,根據回報來做調整,這種方法是一種比較穩妥的選擇,畢竟實踐是檢驗真理的最佳方法。

三、小結

這裡提到的一些方法、經驗相信不少人早就知道;作為設計者和規劃者,追求更好、更有效、更優秀的導航設計是屬于産品完善和才智發揮的,不過别忘了,我們的目标是為了使用,而不是為了讓别人驚歎。

盡量從好用、友善、簡單的角度出發,實用的是最好的,好看的、新奇的不一定是好的。

(五)非觸摸屏頁面和元素操作設計

一、前言

想了好久沒有想到合适的标題,目前這個标題第一眼看到恐怕很難了解是什麼意思。簡單解釋一下,本篇文章介紹的是針對非觸摸屏的手機(即鍵盤操作的手機)中,同一螢幕中針對頁面有多個操作、或針對頁面中元素有多個操作時設計的處理方法和一些思考。

雖然觸摸屏和非觸摸屏的手機這麼多年一直在并行發展,但以nokia為首的symbian平台卻是最近才在觸摸屏上投入的更多精力,且目前市場上symbian平台還是鍵盤操作的手機為主。

這點和dos下無滑鼠的情況有些類似,和目前絕大多數基于滑鼠操作的web設計也有不同,本文謹從盆地自身的了解對此情況下的頁面操作和元素操作設計進行一些介紹。

二、頁面操作設計

頁面操作設計在本文的意思是指在頁面中不是針對某個元素而是針對頁面或者某些功能的操作。先看下下面的三個操作示例圖

這三個操作示例,不知道讀者您認為哪一個較好?盆地從自己了解談一下看法:

頁面操作示例1:

優點: 把常用的操作放在最上方,把使用度不高或需要到頁面下方才使用的功能放在下方,相對來說設計較為合理。

缺點:下方的操作必須鍵盤多次移動到最下方才能使用,操作步驟過多。

頁面操作示例2:

優點:把操作放在最上方,可以友善使用各種操作。

缺點:檢視具體内容時,如果左右鍵被定義(比如定義為為上方的标簽頁切換),則每次檢視具體内容焦點均需要經過操作,需要無謂操作。

頁面操作示例3:

優點:通過選項菜單的方式進行操作,頁面比較整潔,操作比較清晰

缺點:由于選項菜單需要通過左軟鍵或其他方式激活,使用者可能第一時間會優先界面尋找而不是在選項才打中尋找,即選項菜單的内容容易被使用者忽略。

就盆地個人的選擇,在這些操作取舍中,建議如下:

1.保留選項菜單中必要的操作,為使用者保留此入口,供希望使用選項菜單或其他地方遇到挫折的使用者可以在此處擷取解決方案。

2.如果左右鍵已被定義,最好選用示例1結合示例3的形式,避免無謂操作

3.如果左右鍵可以被定義為頁面的左右焦點移動,最好選用示例2結合示例3的形式,避免無謂操作

這裡提到的僅為建議,具體哪些應該保留在頁面、哪些保留在菜單,頁面中放置在上方還是下方需要根據具體的操作和是否必須等綜合判斷和設計。

三、元素操作設計

元素操作在這裡是指針對頁面中某個元素有多種操作,比如針對音樂可能有播放、下載下傳、設為鈴聲、設為彩鈴、收藏、評分等多種操作,我們也先看下面的4個示例。

這四個操作示例,不知道讀者您認為哪一個較好?盆地從自己了解談一下看法:

元素操作示例-1:

優點:直覺

缺點:操作過于繁瑣,對每一個歌曲的操作都需要多次鍵盤移動,進而失去可用性

元素操作示例-2:

優點: 通過選項菜單的方式進行操作,頁面比較整潔,操作比較清晰

缺點:由于選項菜單需要通過左軟鍵或其他方式激活,使用者可能第一時間會優先界面尋找而不是在選項才打中尋找,即選項菜單的内容容易被使用者忽略。

元素操作示例-3:

優點:和元素操作示例-1的操作對比有了大幅改進,中鍵預設彈出菜單使用者門檻較低

缺點:中鍵沒有預設操作,使用者必須在菜單中選擇

元素操作示例-4:

優點: 提供詳情頁面,在詳情頁面中操作,使用者門檻較低

缺點: 不夠直覺,使用者必須進入下一級菜單才能進行操作,對使用者的引導不足,也比較繁瑣。

就盆地個人的選擇,在這些操作取舍中,建議根據實際情況優先考慮采用示例3或示例4的方式,綜合使用者門檻和使用習慣,會更加适合一些。

其中如果有對多個元素進行多選、全選等操作,則示例2、示例3會更适合一些。

四、小結

用戶端設計這個話題太大,這些所謂的設計經驗最主要的用途是用來做參考;在具體的産品設計中,經驗的使用可以少走彎路,也可以加快進度,但更重要的是經驗和實際的結合。

沒有永恒的經驗,隻有永恒的人性。

(六)設計流程和設計分工

一、前言

就盆地個人的了解,從手機用戶端設計流程來說,和網際網路産品、軟體産品的設計流程并沒有太大的差別,盆地個人所經曆的手機用戶端偏向于項目,是以這裡的描述也會有所偏向,同時不同公司、一個公司的不同時期、不同市場環境、不同人員配置等都會引起設計流程的一些差異,但萬變不離其宗,基本的流向和關鍵點是不會有太大差別的。

至于分工,由于手機用戶端的設計尚處于方興未艾的階段,雖然逐漸被人們重視,但其分工合理性、技術支援度、平台統一性、從業人員數量和品質等都處于逐漸發展的階段,和網際網路産品和軟體産品的設計還是有一些不同的。

二、設計流程

下面謹根據盆地的了解粗略談一下設計流程,此流程保證可行性,但不保證完全準确和正确,具體如何參考取決于讀者。

1.需求提出

一個産品至少需要有第一個推動者或推動力,要麼是上司的一個想法、要麼是現有産品的派生或者是一份合同等。

2.需求收集

在這個階段中主要采用各種需求收集的方法從客戶、使用者收集需求,如果是偏項目性,則更多從客戶。需求收集雖然是一個産品設計流程的初始階段就出現的,但基本會貫穿整個産品的生命周期,根據不同階段和不同來源有些情況會由客服、售前、售後、銷售等作為直接需求收集員。

3.需求整理

在這個階段中根據不同公司的風格采用不同的方法和工具進行需求的整理,例如盆地所經曆的産品基本上是通過如下幾個輸出物來進行整理,如果想要了解更标準的需求整理流程,可以參見《使用者體驗的要素》這本書:

功能清單: 基本上采用excel的形式進行整理,分作一級、二級功能(某些時候可能會進一步細化)來列出産品所需要具備的功能。

産品線框圖(低保真):客戶或者使用者的需求很多時候受限于表達工具和技能,更多是通過口頭、郵件、文字等方式表達,而一副畫勝過千言萬語,一張線框圖可以大部分的表達在配色、美觀之外的使用者的意圖。産品人員通過熟練工具制作線框圖相對來說所需時間較短,可以作為需求确認和需求溝通的有效工具。

如果采用類似Axure RP之類包含互動設計的産品線框圖,也可以作為和後續開發、測試溝通的有效輸出物。

産品需求規格說明書:針對産品按照功能性、非功能性進行分類,随後對相關需求進行較長的描述。iamsujie的産品設計中給出了一個具體的描述。

這份文檔一般是一份重量級的文檔,一般在時間要求較為緊張的項目中,此文檔基本上都會在後期才能完成,很多時候前期是通過其他文檔來完成溝通的。

這裡順便提一下盆地個人的看法,對于不是很大的公司來說,如果追求每個環節盡善盡美、每個崗位配置齊全,基本上産品就變成了無底洞,變成了屬于不可完成的任務。

産品設計過程中大部分輸出物的目标除了存檔外,最主要的目标是溝通清楚,非大型公司的産品由于人員規模較小,異地溝通、跨産品線溝通、多方資源協調的情況不會太多,這種情況下更應該注意以有效的推進産品為目标,而不應該一味的追求流程的标準型和文檔的完善性。

而大型公司很多由于分工較細、存在較多跨部門溝通、異地溝通、多資源協調、跨産品線溝通等,如果沒有相對明确的輸出物,在上述方面是較難推動産品的,是以一般會在輸出物的規範性上要求更高一些,但其目的也是為了有效的推進産品。

有一個情況是明确存在的,即一個環節從思想到文字(語言),再從文字(語言)還原為思想,都會有不同程度的失真(受限于人類的溝通方式),其中文字的失真是高于語言的,是以溝通環節越多,溝通成本越高,溝通失真的可能性就越高。

每個公司需要根據自己的公司規模、人員配置、産品特性等去尋找适合自己公司的流程。

産品效果圖(高保真): 根據産品人員配合線框圖等和UI人員的溝通後,UI人員形成的效果圖。此輸出物是進行進一步需求确認和需求溝通的有效工具,同時也是便于和後續開發、測試等溝通的有效輸出物。

不過,如果産品需求變化過于頻繁,很可能出現産品效果圖跟不上産品需求變化的情況,在盆地所經曆的某些産品中,會在産品效果圖未跟上時仍然采用産品線框圖作為溝通的工具。

4.需求講解

通過需求整理階段的輸出物向開發、測試、UI等進行講解,使産品相關人員對産品的需求有一個清晰的了解。在需求材料明确、完善的情況下需要如此,畢竟從文字到思想要丢失太多,在需求材料不明确、不完善的情況下更要進行講解和溝通。

5.産品開發

UI/開發配合進行産品開發,UI提供配色、效果等設計和切圖(前端代碼編寫這一步在用戶端開發中很多情況下是不存在的),開發人員根據相關需求文檔進行産品的開發,測試人員編寫測試案例。其中針對不明确的地方随時保持和産品人員的溝通。

6.産品測試

如果采用靈活開發或某些開發模式,則5和6會在産品開發過程中循環出現,産生不同的疊代版本,産品的需求會放置在不同的疊代中予以實作。

7.産品上線

8.産品完善、更新

三、設計分工

這裡謹針對盆地經曆和了解的網際網路産品和手機用戶端産品設計分工予以簡單描述,受限于經驗,以及産品類型、行業、公司、規模等存在差異,同樣的請讀者謹慎參考。

1. 産品人員

需求收集

需求整理

功能設計

使用者體驗設計

互動設計

需求溝通和回報

需求文檔編寫

産品上線

産品完善

營銷配合

……

2.UI人員

使用者界面設計

切圖,包含多規格适配圖

圖示

配色值

設計規範

目前web設計中常見的産品前端開發(html、CSS、JS、互動效果),在手機用戶端設計中由于目前技術上對css、js的支援基本屬于忽略不計的階段,是以此工作内容基本上并未正式作為UI人員的必備技能,而大部分由開發人員完成。

四、小結

在實際的産品設計中,即有一個人包辦産品從設計、開發、測試、上線、營銷的所有角色的流程和分工形态,也有每一個環節的每一個階段都配備有相應人員或團隊的流程和分工形态;

這裡盆地套用句老話,最适合你的流程和分工是才最好的流程和分工。其他人的經驗是用來參考的,大部分情況下是不适合直接套用的。如果實在不知道什麼是最好的,在理論上分析具備可行性後,實踐是檢驗的最佳方法。

(七)談談快捷鍵

一、前言

快捷鍵基本是PC軟體中必備的一項功能,在Web設計中随着Google系(Gmail、Google Reader等)軟體對快捷鍵的推行,也逐漸開始興起。

在手機用戶端設計中,受限于手機本身操作途徑有限、螢幕有限、互動方式有限等,且整體性質更加類似于PC軟體,是以快捷鍵也是由來已久,本文盆地權且從自己的了解談一下手機用戶端設計中的快捷鍵設計。

二、快捷鍵的設計思考

1.快捷鍵的定位

從盆地個人的角度出發,快捷鍵應該定位為輔助操作功能,即快捷鍵可以進行的操作應該同時提供其他形式的操作路徑。

快捷鍵是需要使用者記憶的。每個手機用戶端軟體都可能有自己的設計,而在手機用戶端上暫時并沒有類似PC上的通用快捷鍵,例如Alt + 字母選中相應菜單,Ctrl+S儲存等等,使用者也沒有形成固有的快捷鍵記憶。

使用者在打開你的軟體使用時,可能還沒有從其他軟體使用的慣性中回神過來,此時可能會造成連續的操作錯誤,如果使用者遭遇到連續操作錯誤且沒有其他解決方案,會對使用者造成嚴重的挫敗感。

其他操作路徑為使用者提供了另外一種解決道路,而且這種操作路徑應該是使用者熟悉的、慣用的操作。

舉兩個例子:

UCWEB: UCWeb中切換視窗快捷鍵為3,但是如果使用者不記得,可以移動焦點到最上方,然後左右切換,第二個出路是使用者慣性操作和學習成本最低或者可以認為沒有學習成本的操作。

手機QQ: 手機QQ中預設檢視消息是5,但是同時消息發送人的頭像會閃爍,使用者可以焦點移動到閃爍頭像上,中鍵既可檢視消息,這也是基本不存在學習成本和慣性的操作。

這裡還有一個反例:

手機msn的#鍵切換菜單焦點的功能,如果盆地沒有記錯的話,是沒有其他替代方案的。這時候#鍵就不能叫快捷鍵,而應該叫功能鍵。

2.快捷鍵的使用場景

快捷鍵,顧名思義是快捷的使用按鍵,即用在其他途徑操作比較繁瑣時的快捷替代方式。是以,如果快捷鍵的操作繁瑣程度甚至超出了其他途徑的繁瑣程度,那麼盆地個人認為這個快捷鍵是一個失敗的快捷鍵。而如果正常操作本身就不複雜且符合使用者習慣,也沒有必要一定要設定快捷鍵,需要根據實際場景來确定是否設定快捷鍵。

另外,盆地認為并不是所有繁瑣操作都需要設定快捷鍵;一來使用者記憶力有限,二來非全鍵盤的話按鍵更加有限,三來不常用的操作,即使略為繁瑣也不會較大影響使用者體驗。

即快捷鍵應用在常用的繁瑣操作上。

還以手機QQ為例,檢視系統消息、好友消息,如果不用快捷鍵,需要焦點移動到閃爍頭像,然後中鍵打開檢視。由于檢視消息基本是手機QQ最常用的操作,是以此處的快捷鍵讓使用者基本感受不到操作的繁瑣,是典型的快捷鍵使用正面案例。

還有一點雖然是常識,還是提一下,即快捷鍵适用于有鍵盤的手機,且快捷鍵需要根據是否有鍵盤、是全鍵盤、普通鍵盤、特殊鍵盤等予以考慮。

3.快捷鍵的選擇

現在大部分的手機都是五維導航鍵或四維導航鍵,使用者最常使用的按鍵也是導航鍵,是以盆地個人認為,最常用的操作應該綁定在五維導航鍵上。

君不見大部分的音樂播放器的最常用操作都是通過五維導航鍵來進行的,比如Nokia自帶的音樂播放器、Last.FM的手機用戶端Mobbler(參見《S60上的Last.FM用戶端Mobbler》,最新版本有所更新)、酷狗音樂播放器、天天動聽音樂播放器等。

在UCWeb中左右鍵配置設定給了最常用的翻頁操作。

導航鍵如果使用恰當,可以使使用者最快的熟悉産品的常用操作,進而形成良好的第一印象。

至于其他鍵或組合鍵作為快捷鍵,使用效率會差很多,畢竟使用者的使用習慣并未形成。

針對非導航鍵之外的快捷鍵,最好在選項菜單、使用場景中或者頁面相應的滾動幫助區域提供幫助,以協助使用者熟悉快捷鍵的使用。

比如在Symbian軟體常見的在選項菜單中有快捷鍵的菜單後标明快捷鍵,QQ音樂、手機msn在固定位置長期提示使用者快捷鍵,手機qq來消息時提示的按5鍵等。

4.快捷鍵的其他注意事項

a. 盡量保持軟體内快捷鍵的一緻,避免在同一用戶端不同界面的快捷鍵含義不同,這會對使用者造成困擾。

b. 快捷鍵應盡量符合使用者習慣或有一定含義,比如音量調節保持和界面圖示一緻,如果界面上為上下音量圖示,則最好用上下鍵調節音量,或2、5(2、8)調節音量。如果全鍵盤,則可以以快捷鍵代表含義的首字母作為快捷鍵的選擇,這點和PC上的快捷鍵有類似之處。

c. 快捷鍵提示直接放置在界面可能影響美觀,需綜合使用者體驗、操作、實作考慮,比如qq音樂目前版本已經把下面截圖版本的界面數字提示去掉了,可能更多考慮了美觀。

d. 在使用時提示不失為一個好的辦法,不過針對不可預知或無觸發的操作,此方法不具可行性,使用範圍有限。

e. 上、下的狀态欄是一個良好的幫助資訊(包括快捷鍵)提示位置,需要盡量利用起來。啟動界面也是一個良好的幫助場景。

f. 還是老話,沒有一成不變的設計,隻有不變的人性。如果前人走過的路和前人總結的經驗和要做的産品一緻,不妨參考一下,可能會起到少走彎路的作用。如果走别人沒有走過的路,那麼就要從原則出發,考慮最适合自己的設計。

三、小結

本來盆地又想通篇文字的完成本文,雖然有PhoneScreen的配合可以适當減輕截圖工作量,但畢竟截取使用界面還是比較麻煩的,還好找到了一些之前截的圖,是以适當放上幾張,減輕一下枯燥感。這也是常說的可用性和友好性是需要代價的實證。

很多時候設計人員和開發人員會在使用者體驗改善上有争執,作為産品人員,需要綜合考慮成本效益。如果為了非明顯的、緻命性的使用者體驗改善而花費緻命性的開發時間,那也是會得不償失的。妥協,有些時候并不是可恥的。

(八)機型覆寫的一些知識

一、前言

轉眼間這個系列已經寫到第八篇了,一些盆地想總結的内容也總結七七八八了,後續此系列的更新速度可能會放緩,盆地自認是手機用戶端行業中的一個新兵,這個系列也是盆地在結束上一份工作後進行的總結,今後的路怎麼走,盆地還在思考中。

關于手機用戶端,盆地也表明一下自己的态度,盆地個人認為手機用戶端行業如果作為某個公司的非主營業務,在有其他收入支撐的情況下,還是有發展前景的。而如果作為主營業務的話,鑒于目前手機用戶端行業中有盈利和有商務模式者寥寥無幾,個人還是非常不看好這個行業近幾年的發展的。

也許有人馬上又會開始談Apple的AppStore,并指出國内有某某或某某公司掙錢了,但是,相信大家也看到AppStore後來的進入者收入越來越少,産品均價越來越低,免費軟體越來越多,又在逐漸走上網際網路服務的道路,這一點恐怕不容樂觀。

而中國移動即将推出的MobileMarket被自稱為夢網的二次創業,但盆地個人還是不太看好,不排除如飛信一樣在投入大量的資金下被硬推了起來,也有人在這個環節中獲益,但是純靠資金推動的東西很難成長為一個真正受使用者歡迎的産品,看看盆地在《飛信的使用者是這麼來的?》中的遭遇也許會更能了解飛信的使用者數。

在3G普及已久和正版意識較強的國外,也隻有Apple帶來了一股創新的空氣和業界的轟動,為什麼呢?因為太缺乏收入模式了,是以AppStore長唱不衰,但是很多東西照搬是不行的。

跑題了,開始進入本篇的正文環節……

二、手機作業系統有哪些

目前常見的有如下一些手機作業系統:

a. Symbiain作業系統

其中包括了Symbian UIQ、S40、S60 2nd、S60 3nd 、s60 5nd、S80 、S90,其中S40是Nokia專用的非智能機的系統,由于Nokia的覆寫率過高,是以也經常會被列出來。UIQ系統現在已經停止開發了,而S80、S90也隻用在之前的少數機型上面,比如之前高端的9系列,7710等手機上,現在也很久不見蹤迹。

目前市面上主要常見的或者說開發手機用戶端主要覆寫的S60系統,包括第二版和第三版,這些版本還會有FP1、FP2等,其中FP是Feature Pack的意思。

采用了Symbian系統的手機目前比較常見的是Nokia、三星、西門子、SonyErrison(UIQ的系統)等。

b.Windows Mobile作業系統

如果我沒有沒有了解錯誤的話,Windows Mobile的前身是劃分較為淩亂的PocketPC、SmartPhone等系列,現在統一成為Windows Mobile。

這個系列也有不同的版本,不過和windows一樣,基本上是向下相容的,不像Nokia的作業系統,不同版本之間有較大差别。

c.Windows CE作業系統

國内的酷派、魅族的M8 等都是采用的Windows CE的系統,Windows CE的系統相對來說有更大的定制性,但是目前市場覆寫面較小。

d.Iphone OS作業系統

近幾年很火的Iphone的作業系統是Apple根據在PC作業系統Mac OS X的經驗針對Iphone開發的,目前獨此一家,别無分号。

其核心采用的是Linux系統。

e.BlackBerry 作業系統

黑莓使用的作業系統,在國内相關機型似乎隻由中國移動引入了一款,其他都是水貨,水貨成本效益很高。

f.Palm作業系統

一度非常受歡迎的Plam系統,現在越來越沒落了,不過随着去年宣布推出的Plam Pre,似乎最近也開始火起來了,不過采用的是另外一款作業系統,即Plam Web OS

g.Palm Web OS作業系統

随Plam Pre發售搭載的系統,之前引發了人們的無數遐想,現在根據初步評測似乎比較讓人失望。

h.Linux 系統

其實有不少作業系統采用了Linux的系統,比如Motorola的e6、e680等型号,以及Nokia的n770、n800、n810等。酷派也有手機采用了Linux的系統。

i.Android系統

google主導的手機作業系統,其實也是基于Linux。

j.MTK系統

這個系統其實應該叫平台,其開發的産品需要在前期置入手機而不是後期安裝的。

k.展訊的手機系統

同上,其實也是個平台,屬于手機解決方案

i.kjava

這個應該算是一個環境,很多系統除了本身提供開發環境外,也提供java的環境,可以開發應用。很多非智能機也提供了java環境從此可以安裝軟體。

……………

三、分辨率

針對不同的手機,又有不同的分辨率,比如盆地相對比較熟悉的Symbian系統的分辨率就有如下一些類型。

176 x 208、176 x 220、240 x 320、320 x 240、352 x 416 、360 x 640等

即一旦要做覆寫,不僅僅要考慮手機作業系統的不同,還要考慮分辨率的不同。

更多的分辨率,還請自行查找相關的機型資訊。

四、常見覆寫的作業系統和分辨率

一般來說,常見的用戶端會覆寫Symbiain、Windows Mobile、Kjava,而近幾年随着Iphone的火爆,還會考慮Iphone的覆寫。

其他的一些有些由于系統的不開放性,有些由于用于群較小,一般就被排除在外了。

關于分辨率,windows mobile的大部分為240×320的,一些新的機型開始采用VGA的分辨率,即640×480的分辨率。

針對symbian的系統,第三版大部分為240 x 320和320 x 240的分辨率,第二版則主要為176 x 208的分辨率,第三版也有少數幾個分辨率為352 x 416的分辨率(176 x 208的2倍),比如盆地之前用過的e70,以及n80、e71等幾款機器。而360×640的s60第五版目前是5800 mx和n95的分辨率。

至于kjava則根據覆寫來處理,一般覆寫會包括Nokia s40系列和Sony Errision系列,這兩個系列閱聽人較廣。

五、kjava的限制

做手機用戶端如果有kjava覆寫的話,需要适當了解kjava系統的限制。

kjava比較适合來做遊戲類的産品,而針對其他需要聯網、調用本地資源、檔案管理等操作一般都需要權限确認甚至無法操作。

很多情況下,你會發現做kjava會很郁悶,有很多東西需要産品人員根據實際實作限制去妥協。

六、簽名和認證

關于簽名和認證的細節,盆地所知不多,是以不做細節描述,僅作簡單介紹。

就盆地個人看法,簽名和認證主要為了或的更多的權限或減少提示,目前主要是symbian和kjava需要簽名和認證,不然會無法安裝或過多提示,而windows mobile雖然也有簽名機制,但似乎不簽名問題也不大。

目前大部分的認證機構都在國外,但國内一般都有代理機構。且一般簽名和認證時會有相應機構對産品進行一些測試,保障可用性、無害性等,當然,這些一般也是要收費的。

如果需要了解更多關于簽名和認證的内容,請向專業人士咨詢,或在網際網路上尋找更多介紹。

六、結語

這一篇盆地給出了一些很基礎的知識,這些描述基于盆地個人了解,其中不排除存在一些錯誤,如有發現還請指出。

任何一件事情如果有太多的細節、太多内容要考慮,很容易會變成一個龐大的工程,相信有不少做手機用戶端的從業人員對機型覆寫這個事情非常頭疼。

Iphone在成功的某一方面來說,也和其沒有曆史包袱,機型單一,作業系統單一有一定關系,這些很多情況下是無法複制的,其他廠商也很難擺脫曆史的因素輕裝上陣。

關于機型覆寫的事情,恐怕至少在相當長的一段時間内是手機用戶端從業人員無法回避的一個問題,既然無法回避,還是應該多加了解和熟悉,這些對于産品的設計和能力的提升都是有用的。

繼續閱讀