手機界面設(shè)計

手機界面設(shè)計第1頁/共76頁一、界面設(shè)計的原則手機軟界面是置身于手機操作系統(tǒng)中的人機交互的窗口，設(shè)計界面必須基于手機的物理特性和軟件的應(yīng)用特性進行合理的設(shè)計，界面設(shè)計師首先應(yīng)對手機的系統(tǒng)性能有所了解，例如：手機所支持的最多色彩數(shù)量、手機所支持的圖像格式，其次應(yīng)該對軟件的功能詳細了解熟悉每個模塊的應(yīng)用模式。從而做到最大限度的利用現(xiàn)有資源進行用戶界面的開發(fā)。

牛牛文庫文檔分享第2頁/共76頁二、定制界面版式1界面層級

idle（待機界面）--mainmenu（主菜單）--submenu（二級菜單）--thirdlevelmenu（三級菜單）

牛牛文庫文檔分享第3頁/共76頁

牛牛文庫文檔分享第4頁/共76頁2界面構(gòu)成的基本單位

主要界面的構(gòu)成被分為幾個標準的信息區(qū)域（主要針對于按鍵手機，觸屏手機相對靈活）：狀態(tài)區(qū)、標題區(qū)、功能操作區(qū)、公共導(dǎo)航區(qū)

牛牛文庫文檔分享第5頁/共76頁

牛牛文庫文檔分享第6頁/共76頁1）狀態(tài)區(qū)：標示手機目前運行狀態(tài)及事件的區(qū)域，可以包含電池電量、信號強度、運營商名稱、未處理事件icon及數(shù)量、時間等。狀態(tài)區(qū)域并不是必須存在，可依照交互需求進行取舍。2）標題區(qū)：主要是LOGO、名稱、版本以及相關(guān)圖文信息。3）功能操作區(qū)：它是軟件的核心部分，也是版面上面積最寬的部分。包含有列表（list）、焦點（highlight）、滾動條（scroalbar）、圖標（icon）等很多不同的元素。不同層級的界面包含的元素是不同的，需要依據(jù)具體情況合理搭配運用。

牛牛文庫文檔分享第7頁/共76頁4）公共導(dǎo)航區(qū)：也稱之為軟鍵盤區(qū)域，它是對軟件操作進行宏觀操控的區(qū)域，隨時可見，在這里它可以保存當前操作結(jié)果、切換當前操作模塊、退出軟件系統(tǒng)，實現(xiàn)對軟件的靈活操控。針對于嵌入式軟件，界面版式的設(shè)定，在很大程度上需要借鑒相關(guān)手機系統(tǒng)界面的版式，以確保樣式的相對統(tǒng)一，利于系統(tǒng)與軟件的整合。當然也要考慮軟件本身的應(yīng)用特性，結(jié)合操作的可用性和可實施性，對版式進行合理的調(diào)整，使呈現(xiàn)信息的區(qū)域與區(qū)域之間協(xié)調(diào)統(tǒng)一，主次得當。確保用戶可以方便快捷地進行功能操作。

牛牛文庫文檔分享第8頁/共76頁對于整個手機的操作系統(tǒng)界面，需要根據(jù)不同的設(shè)計需求進行成體系的風(fēng)格設(shè)計。

牛牛文庫文檔分享第9頁/共76頁3界面元素的分解與組合界面的版式構(gòu)成依賴于界面的點線面的構(gòu)成，手機軟件由于自身運行環(huán)境小，那就決定了必須控制自身的大小。因此我們的界面圖形必須根據(jù)需要進行切分，能夠用程序?qū)崿F(xiàn)的效果盡量用程序?qū)崿F(xiàn)，如單色的線和面。復(fù)雜的圖標就保留用圖片方式來呈現(xiàn)，因此我們在界面版式的設(shè)計稿完成后，必須和程序員進行密切的溝通，對需要分解的圖形元素進行分解后優(yōu)化，然后交付程序員進行版式的第二次組合。

牛牛文庫文檔分享第10頁/共76頁嚴格來說我們需要提交幾個部分的東西：1）界面三個信息區(qū)的圖形切片標題區(qū)：命名為Title01、Title02、…主信息操作區(qū):其命名可根據(jù)不同欄目（應(yīng)用）主信息區(qū)為標準，如：電子地圖主信息操作區(qū)，map_main01、map_main02…公共導(dǎo)航區(qū)：mapbar01、mapbar02…

牛牛文庫文檔分享第11頁/共76頁2）提供相關(guān)bgcolor的16進制色值及配色方案

在photoshop軟件中提取16進制色值：#c0c0c0。

牛牛文庫文檔分享第12頁/共76頁3）提供數(shù)據(jù)準確的界面版式分割圖及關(guān)鍵切片的坐標位置圖示根據(jù)程序員提供的坐標定位規(guī)則來確定圖形切片的位置，一般都是以界面的左上角的頂點為原點來標示相對坐標。

牛牛文庫文檔分享第13頁/共76頁三、視覺效果手機界面的視覺效果，應(yīng)該遵循給用戶舒適、生機與活力的原則，通過視覺感官的刺激，增加用戶的親和力，適應(yīng)不同用戶的不同心理特征。

牛牛文庫文檔分享第14頁/共76頁1簡約明快型（適合色彩支持數(shù)量較少的彩屏手機）基于大塊顏色和線條組合的構(gòu)成方式，不乏大氣、簡約且精到、精彩。點線面基本元素的形狀構(gòu)成結(jié)合色彩的純凈搭配，干凈利落，給用戶的操作帶來輕松的感受。

牛牛文庫文檔分享第15頁/共76頁

牛牛文庫文檔分享第16頁/共76頁

牛牛文庫文檔分享第17頁/共76頁在設(shè)計的過程中基于上述風(fēng)格設(shè)計的思路，在視覺效果的設(shè)計上需要參考如下方法：a、結(jié)合界面圖形設(shè)計的隱喻性，圖標圖形盡量使用簡潔的平面圖形，盡量使用像素化的表現(xiàn)形式。b、展現(xiàn)圖形界面的精到之處，合理的使用線條和色彩漸變,以確保細節(jié)的完美體現(xiàn)。c、把握界面整體色調(diào)的同時注意在圖標和線條的色彩配置上下功夫，以活躍整個畫面，避免整個界面色彩單一，黯淡無光.

牛牛文庫文檔分享第18頁/共76頁2趣味與獨創(chuàng)型手機界面設(shè)計中的趣味性，主要是指形式的情趣。這是一種活潑性的版面視覺語言。如果版面本無多少精彩的內(nèi)容，就要靠制造趣味取勝，這也是在構(gòu)思中調(diào)動了藝術(shù)手段所起的作用。版面充滿趣味性，使傳媒信息如虎添翼，起到了畫龍點睛的傳神功力,從而更吸引人，打動人。在手機界面設(shè)計中，可以考慮使用個性的圖標或者有趣味性的版面造型等手法去表現(xiàn)界面的趣味性。獨創(chuàng)性原則實質(zhì)上是突出個性化特征的原則。鮮明的個性，是排版設(shè)計的創(chuàng)意靈魂。試想，一個版面多是單一化與概念化的大同小異，人云亦云，可想而知，它的記憶度有多少？更談不上出奇制勝。因此，要敢于思考，敢于別出心裁，敢于獨樹一幟，在排版設(shè)計中多一點個性而少一些共性，多一點獨創(chuàng)性而少一點一般性，才能羸得用戶的青睞。

牛牛文庫文檔分享第19頁/共76頁

牛牛文庫文檔分享第20頁/共76頁

牛牛文庫文檔分享第21頁/共76頁3高貴華麗型（適合支持色彩數(shù)量較多的彩屏手機，最好支持帶8位Alpha通道的png透明圖）

牛牛文庫文檔分享第22頁/共76頁

牛牛文庫文檔分享第23頁/共76頁

牛牛文庫文檔分享第24頁/共76頁

基于飽和的色彩和華麗的質(zhì)感，塑造超酷、超眩的視覺感受，利用羽化了的像素對圖形圖像進行仿真設(shè)計，不僅塑造界面色彩、形狀，還進一步在元素的質(zhì)感和體積感上下功夫。給用戶一種高貴華麗的視覺享受。

牛牛文庫文檔分享第25頁/共76頁在設(shè)計的過程中基于上述風(fēng)格設(shè)計的思路，在視覺效果的設(shè)計上需要參考如下方法：a、塑造界面的體積感和質(zhì)感，根據(jù)需要表現(xiàn)透明、半透明、粗燥、光滑等不同的視覺效果。b、圖標的制作中盡量避免生硬的邊緣輪廓，提倡漸變、羽化加強圖形的仿真性能，使設(shè)計更加趨于人性化。c、考慮界面的整體色調(diào)，最好使用鄰近色或同類色進行色彩構(gòu)成，采用色彩的弱對比，因為界面圖形本身就結(jié)合了體積感和質(zhì)感的塑造，如果整體色調(diào)對比太強，很容易給用戶造成眼睛疲勞。

牛牛文庫文檔分享第26頁/共76頁四、視覺元素的設(shè)計1圖形元素設(shè)計原則：風(fēng)格統(tǒng)一、簡潔、直觀、隱喻、2圖形元素設(shè)計流程：確定風(fēng)格——確定圖標的功能——確定圖標的造型——進行制作

牛牛文庫文檔分享第27頁/共76頁1)確定風(fēng)格：就是根據(jù)界面的總體風(fēng)格的策劃思路，結(jié)合界面其他元素的需要，對圖標的整體風(fēng)格進行考慮，以保證圖標和整體效果的融合。明確意義的圖標，風(fēng)格鮮明的版面設(shè)計是手機界面設(shè)計的重要工作，目前較為流行的是以MOTOROLA，NOKIA等為代表的歐洲簡單風(fēng)格，以及韓國以samsung，lg為代表的時尚絢麗的風(fēng)格，日本的shapp手機也很有特色，iphone則是無數(shù)手機廠商跟風(fēng)和膜拜的對象掀起了tuch狂潮。

牛牛文庫文檔分享第28頁/共76頁在更新穎的交互操作和與手機ID設(shè)計的整體結(jié)合上，韓系手機比較突出（samsungf488），而在可用性和體驗難度上，歐系手機則比較優(yōu)秀（nokia）。

牛牛文庫文檔分享第29頁/共76頁

牛牛文庫文檔分享第30頁/共76頁2)確定圖標功能：在設(shè)計圖形之前這一點顯得特別重要，我們設(shè)計圖標的目的是實用又美觀，也就是說要考慮圖標的隱喻性，他代表的意思必須是用戶可知的、熟知的。所以圖標的功能是我們進行圖標造型設(shè)計的標準和依托。

牛牛文庫文檔分享第31頁/共76頁

牛牛文庫文檔分享第32頁/共76頁3)確定圖標的造型：確定造型的方法多種多樣，只要不違背圖標表達的主題。圖標的造型設(shè)計我們提倡原創(chuàng)，先用illustrator進行繪制，然后photoshop做圖標設(shè)計的后期效果處理。所有界面上同級、同類的圖標我們還要保證表現(xiàn)形式的統(tǒng)一，避免用戶視覺上的紊亂。

牛牛文庫文檔分享第33頁/共76頁

牛牛文庫文檔分享第34頁/共76頁4)進行界面設(shè)計制作：利用photoshop中最好多采用路徑工具進行繪制界面圖形元素（以方便后期的版本定制），根據(jù)總體風(fēng)格對圖標和界面細節(jié)進行細節(jié)美化。轉(zhuǎn)換成程序所需要的相應(yīng)格式。

牛牛文庫文檔分享第35頁/共76頁

牛牛文庫文檔分享第36頁/共76頁3設(shè)計注意事項1）色彩問題：由于手機LCD本身的限制，在色彩的還原程度上沒有PC如此完善，因此在選用色彩時要根據(jù)使用的屏幕進行調(diào)節(jié)，方法就是將設(shè)計好的效果圖導(dǎo)入相應(yīng)的手機中，用該手機自帶的圖片瀏覽軟件進行全屏效果查看或者請求開發(fā)人員幫助。

牛牛文庫文檔分享第37頁/共76頁2）可實現(xiàn)性問題：受到硬件運算速度和內(nèi)存的影響，以及不可預(yù)計的后臺程序開發(fā)難度，過于復(fù)雜的效果將很難進行實現(xiàn)，與程序工程師和UI工程師，硬件工程師的溝通顯得尤為重要。手機軟件界面設(shè)計在界面設(shè)計領(lǐng)域是一項新興的設(shè)計領(lǐng)地，在相對狹小的版面我們要設(shè)計出精美實用的界面，需要我們界面設(shè)計人員在象素化的圖形世界需找更多的細節(jié)表現(xiàn)。在制作過程中更需要我們深入了解手機及其相關(guān)軟件，密切地和程序員溝通、交流共同打造這片新土地。

牛牛文庫文檔分享第38頁/共76頁在遵循手機軟件界面設(shè)計規(guī)范的基礎(chǔ)上，符合用戶操作習(xí)慣的基礎(chǔ)上，增加界面設(shè)計的趣味性十分重要。目前國內(nèi)手機界面設(shè)計的趣味性不強。感覺大多數(shù)手機界面設(shè)計師做的大多數(shù)界面過于程式化，圖標也缺乏原創(chuàng)和新意。希望我們的ui設(shè)計團隊能夠獨樹一幟，出類拔萃。

牛牛文庫文檔分享第39頁/共76頁A.手機基本類別：

國際上，通常將目前的手機分為三個基本類別

頂級手機（High-endphonesorsmarterphones）,或稱為智能手機，擁有一個多家硬件生產(chǎn)商認可的“開放”的操作系統(tǒng)（Symbian,PalmOS,Microsoft，等）。

?單手操作高端手機（single-handoperated）：比如N7650

?手寫輸入手機（pen-based）:SonyEricssonP800,Dopda

?鍵盤輸入高端手機(keyboardentry):Nokia9210c

功能手機(Featurephones)

?在核心功能（芯片）的基礎(chǔ)上，加入附加功能（芯片）：FM,MP3,攝像頭,數(shù)據(jù)存貯卡，數(shù)碼錄音，可視電話，K-JAVA、小額賬戶銀行業(yè)務(wù)，網(wǎng)絡(luò)游戲，定位等等等各樣的功能。

低端手機(valuephone/vanillavoice）

?只具有基本的通話和數(shù)據(jù)功能（短信），沒有MMS，MP3，F(xiàn)M，和弦，Java,Brew，數(shù)碼相機等功能。隨著市場的發(fā)展，可以包含彩屏。

?單芯片

牛牛文庫文檔分享第40頁/共76頁B.根據(jù)當前手機功能：

基本功能

1.彩屏

2.和弦鈴音

3.彩信／彩ｅ

4.中文輸入：T9輸入；連筆手寫輸入

5.中文短信、短信群發(fā)

6.通訊錄

7.通話記錄

8.鬧鐘

9.計算器

10.錄音

11.多方通話

12.語音識別

牛牛文庫文檔分享第41頁/共76頁13.來電防火墻

14.IP撥號

15.電子名片

16.電話簿快速查詢

17.屏幕背光

18.鍵盤背光

19.鍵盤按鍵音

20.免提接聽

21.來電指示

22.語音撥號

23.內(nèi)置IP

牛牛文庫文檔分享第42頁/共76頁娛樂類

1.FM收音機

2.MP3播放

3.數(shù)碼照相

4.數(shù)碼錄像

5.數(shù)碼錄音（類似于錄音筆）

6.JAVA

7.內(nèi)置小型手持游戲機功能

8.動畫屏保

9.移動QQ

10.七彩來電指示

11.來電大頭貼

12.幻彩墻紙

牛牛文庫文檔分享第43頁/共76頁13.戒指耳機

14.可旋轉(zhuǎn)攝像頭

15.一鍵開功能

16.星座配對

17.幸運數(shù)字

18.會跳舞的手機

19.語音短信

20.卡拉OK點唱機

21.超長短信

22.來電的圖片顯示

23.和弦鈴聲下載、編輯

24.鈴聲下載、編輯

25.圖片電話簿

牛牛文庫文檔分享第44頁/共76頁科技工作類

1.藍牙

2.無線局域網(wǎng)

3.無線下載

4.紅外接口

5.數(shù)據(jù)線接口

6.數(shù)據(jù)交換(可以將PC和手機上的email、日歷和日程安排等個人信息相互傳送)

7.數(shù)據(jù)交換(可以將PC和手機上的MP3,圖片和鈴音等相互傳送)

8.數(shù)據(jù)存儲卡（如SD卡，它可以使你在手機、PC機之間相互存儲傳輸文件）

9.動態(tài)內(nèi)存

10.BREW

牛牛文庫文檔分享第45頁/共76頁11.PDA

12.Linux操作系統(tǒng)

13.GPRS、WAP

14.UTK增值業(yè)務(wù)

15.一鍵上網(wǎng)

16.支持三頻

17.手寫輸入

牛牛文庫文檔分享第46頁/共76頁生活類

1.GPS（全球定位系統(tǒng)）

2.外屏?xí)r鐘

3.自動開、關(guān)機

4.世界時鐘

5.貨幣換算

6.陰陽歷轉(zhuǎn)換

7.STK服務(wù)（證券服務(wù)系統(tǒng)）

8.區(qū)號查詢

9.萬年歷

10.日程表

11.記事本

12.單位換算

13.周歷

14.來電中文地名顯示（固話）

牛牛文庫文檔分享第47頁/共76頁性別類

1.內(nèi)置生理時鐘、體脂肪、卡路里計算可供女性族群使用

2.待機的鏡面設(shè)計

3.手機飾牌，鑲鉆設(shè)計

牛牛文庫文檔分享第48頁/共76頁學(xué)習(xí)類

1.電子詞典（四、六級、TOFEL、GRE英語詞典）

2.電子圖書

3.閱讀、編輯文檔

牛牛文庫文檔分享第49頁/共76頁C.圖標格式：

1．手機圖標支持位圖格式分為不透明和透明兩種：

不透明：*.bmp

*.jpg

*.gif(動態(tài)和非動態(tài))

*.mjpg

透明：*.ico

*.png

2．手機圖標支持矢量圖格式：*.svg（ScalableVectorGraphics）

牛牛文庫文檔分享第50頁/共76頁D.圖標大?。?/p>

10x10，14x14，16x16，32x32，64x64，128x128

（手機圖標的大小要求不如軟件圖標那樣要求嚴格，主要因為手機圖標的格式較多）

牛牛文庫文檔分享第51頁/共76頁E.色彩級別

256色(即8位色)

4096色(即12位色)

65536色(即16位色)

262144色(即18位色)

16777216色(即24位色)