手機(jī)界面設(shè)計(jì)教程

手機(jī)軟界面設(shè)計(jì)一一基礎(chǔ)篇TOC\o"1-5"\h\z一、 界面設(shè)計(jì)的原則 1二、 定制界面版式 11界面層級(jí) 1\o"CurrentDocument"2界面構(gòu)成的基本單位 2\o"CurrentDocument"1） 狀態(tài)區(qū)： 2\o"CurrentDocument"2） 標(biāo)題區(qū)： 2\o"CurrentDocument"3） 功能操作區(qū)： 2\o"CurrentDocument"4） 公共導(dǎo)航區(qū)： 2\o"CurrentDocument"3界面元素的分解與組合 3\o"CurrentDocument"1） 界面三個(gè)信息區(qū)的圖形切片 3\o"CurrentDocument"2） 提供相關(guān)bgcolor的16進(jìn)制色值及配色方案 3\o"CurrentDocument"3） 提供數(shù)據(jù)準(zhǔn)確的界面版式分割圖及關(guān)鍵切片的坐標(biāo)位置圖示 3\o"CurrentDocument"三、 視覺(jué)效果 3\o"CurrentDocument"1簡(jiǎn)約明快型 3\o"CurrentDocument"2趣味與獨(dú)創(chuàng)型 4\o"CurrentDocument"3高貴華麗型 4四、 視覺(jué)元素的設(shè)計(jì) 51圖形元素設(shè)計(jì)原則： 5\o"CurrentDocument"2圖形元素設(shè)計(jì)流程： 5\o"CurrentDocument"1） 確定風(fēng)格： 5\o"CurrentDocument"2） 確定圖標(biāo)功能： 5\o"CurrentDocument"3） 確定圖標(biāo)的造型： 6\o"CurrentDocument"4） 進(jìn)行界面設(shè)計(jì)制作： 63設(shè)計(jì)注意事項(xiàng) 71） 色彩問(wèn)題： 7\o"CurrentDocument"2） 可實(shí)現(xiàn)性問(wèn)題： 7一、界面設(shè)計(jì)的原則手機(jī)軟界面是置身于手機(jī)操作系統(tǒng)中的人機(jī)交互的窗口，設(shè)計(jì)界面必須基于手機(jī)的物理特性和軟件的應(yīng)用特性進(jìn)行合理的設(shè)計(jì)，界面設(shè)計(jì)師首先應(yīng)對(duì)手機(jī)的系統(tǒng)性能有所了解，例如：手機(jī)所支持的最多色彩數(shù)量、手機(jī)所支持的圖像格式，其次應(yīng)該對(duì)軟件的功能詳細(xì)了解熟悉每個(gè)模塊的應(yīng)用模式。從而做到最大限度的利用現(xiàn)有資源進(jìn)行用戶(hù)界面的開(kāi)發(fā)。二、定制界面版式1界面層級(jí)idle（待機(jī)界面）--mainmenu（主菜單）--submenu（二級(jí)菜單）--thirdlevelmenu（三級(jí)菜單）

MvArsis?31.5S/D3paOptions=■>NbxITrackMvArsis?31.5S/D3paOptions=■>NbxITrack2界面構(gòu)成的基本單位主要界面的構(gòu)成被分為幾個(gè)標(biāo)準(zhǔn)的信息區(qū)域（主要針對(duì)于按鍵手機(jī)，觸屏手機(jī)相對(duì)靈活）：狀態(tài)區(qū)、標(biāo)題區(qū)、功能操作區(qū)、公共導(dǎo)航區(qū)狀態(tài)區(qū)標(biāo)題區(qū)功能操作區(qū)公共導(dǎo)航區(qū)狀態(tài)區(qū)標(biāo)題區(qū)功能操作區(qū)公共導(dǎo)航區(qū)SonyEricsson1）狀態(tài)區(qū):標(biāo)示手機(jī)目前運(yùn)行狀態(tài)及事件的區(qū)域，可以包含電池電量、信號(hào)強(qiáng)度、運(yùn)營(yíng)商名稱(chēng)、未處理事件icon及數(shù)量、時(shí)間等。狀態(tài)區(qū)域并不是必須存在，可依照交互需求進(jìn)行取舍。2） 標(biāo)題區(qū)：主要是LOGO、名稱(chēng)、版本以及相關(guān)圖文信息。3） 功能操作區(qū)：它是軟件的核心部分，也是版面上面積最寬的部分。包含有列表（list）、焦點(diǎn)（highlight）、滾動(dòng)條（scroalbar）、圖標(biāo)（icon）等很多不同的元素。不同層級(jí)的界面包含的元素是不同的，需要依據(jù)具體情況合理搭配運(yùn)用。4） 公共導(dǎo)航區(qū)：也稱(chēng)之為軟鍵盤(pán)區(qū)域，它是對(duì)軟件操作進(jìn)行宏觀操控的區(qū)域，隨時(shí)可見(jiàn)，在這里它可以保存當(dāng)前操作結(jié)果、切換當(dāng)前操作模塊、退出軟件系統(tǒng)，實(shí)現(xiàn)對(duì)軟件的靈活操控。針對(duì)于嵌入式軟件，界面版式的設(shè)定，在很大程度上需要借鑒相關(guān)手機(jī)系統(tǒng)界面的版式，以確保樣式的相對(duì)統(tǒng)一，利于系統(tǒng)與軟件的整合。當(dāng)然也要考慮軟件本身的應(yīng)用特性，結(jié)合操作的可用性和可實(shí)施性，對(duì)版式進(jìn)行合理的調(diào)整，使呈現(xiàn)信息的區(qū)域與區(qū)域之間協(xié)調(diào)統(tǒng)一，主次得當(dāng)。確保用戶(hù)可以方便快捷地進(jìn)行功能操作。對(duì)于整個(gè)手機(jī)的操作系統(tǒng)界面，需要根據(jù)不同的設(shè)計(jì)需求進(jìn)行成體系的風(fēng)格設(shè)計(jì)。3界面元素的分解與組合界面的版式構(gòu)成依賴(lài)于界面的點(diǎn)線面的構(gòu)成，手機(jī)軟件由于自身運(yùn)行環(huán)境小，那就決定了必須控制自身的大小。因此我們的界面圖形必須根據(jù)需要進(jìn)行切分，能夠用程序?qū)崿F(xiàn)的效果盡量用程序?qū)崿F(xiàn)，如單色的線和面。復(fù)雜的圖標(biāo)就保留用圖片方式來(lái)呈現(xiàn)，因此我們?cè)诮缑姘媸降脑O(shè)計(jì)稿完成后，必須和程序員進(jìn)行密切的溝通，對(duì)需要分解的圖形元素進(jìn)行分解后優(yōu)化，然后交付程序員進(jìn)行版式的第二次組合。嚴(yán)格來(lái)說(shuō)我們需要提交幾個(gè)部分的東西：1） 界面三個(gè)信息區(qū)的圖形切片標(biāo)題區(qū)：命名為T(mén)itle01>Title02、…主信息操作區(qū):其命名可根據(jù)不同欄目（應(yīng)用）主信息區(qū)為標(biāo)準(zhǔn)，如：電子地圖主信息操作區(qū)，map_main01、map_main02…公共導(dǎo)航區(qū)：mapbar01、mapbar02…2） 提供相關(guān)bgcolor的16進(jìn)制色值及配色方案在photoshop軟件中提取16進(jìn)制色值：#C0C0C0。3）提供數(shù)據(jù)準(zhǔn)確的界面版式分割圖及關(guān)鍵切片的坐標(biāo)位置圖示根據(jù)程序員提供的坐標(biāo)定位規(guī)則來(lái)確定圖形切片的位置，一般都是以界面的左上角的頂點(diǎn)為原點(diǎn)來(lái)標(biāo)示相對(duì)坐標(biāo)。三、視覺(jué)效果手機(jī)界面的視覺(jué)效果，應(yīng)該遵循給用戶(hù)舒適、生機(jī)與活力的原則，通過(guò)視覺(jué)感官的刺激，增加用戶(hù)的親和力，適應(yīng)不同用戶(hù)的不同心理特征。1簡(jiǎn)約明快型（適合色彩支持?jǐn)?shù)量較少的彩屏手機(jī)）基于大塊顏色和線條組合的構(gòu)成方式，不乏大氣、簡(jiǎn)約且精到、精彩。點(diǎn)線面基本元素的形狀構(gòu)成結(jié)合色彩的純凈搭配，干凈利落，給用戶(hù)的操作帶來(lái)輕松的感受。

在設(shè)計(jì)的過(guò)程中基于上述風(fēng)格設(shè)計(jì)的思路，在視覺(jué)效果的設(shè)計(jì)上需要參考如下方法：a、 結(jié)合界面圖形設(shè)計(jì)的隱喻性，圖標(biāo)圖形盡量使用簡(jiǎn)潔的平面圖形，盡量使用像素化的表現(xiàn)形式。b、 展現(xiàn)圖形界面的精到之處，合理的使用線條和色彩漸變，以確保細(xì)節(jié)的完美體現(xiàn)。c、 把握界面整體色調(diào)的同時(shí)注意在圖標(biāo)和線條的色彩配置上下功夫，以活躍整個(gè)畫(huà)面，避免整個(gè)界面色彩單一，黯淡無(wú)光.2趣味與獨(dú)創(chuàng)型手機(jī)界面設(shè)計(jì)中的趣味性，主要是指形式的情趣。這是一種活潑性的版面視覺(jué)語(yǔ)言。如果版面本無(wú)多少精彩的內(nèi)容，就要靠制造趣味取勝，這也是在構(gòu)思中調(diào)動(dòng)了藝術(shù)手段所起的作用。版面充滿(mǎn)趣味性，使傳媒信息如虎添翼，起到了畫(huà)龍點(diǎn)睛的傳神功力從而更吸引人，打動(dòng)人。在手機(jī)界面設(shè)計(jì)中，可以考慮使用個(gè)性的圖標(biāo)或者有趣味性的版面造型等手法去表現(xiàn)界面的趣味性。獨(dú)創(chuàng)性原則實(shí)質(zhì)上是突出個(gè)性化特征的原則。鮮明的個(gè)性，是排版設(shè)計(jì)的創(chuàng)意靈魂。試想，一個(gè)版面多是單一化與概念化的大同小異，人云亦云，可想而知，它的記憶度有多少？更談不上出奇制勝。因此，要敢于思考，敢于別出心裁，敢于獨(dú)樹(shù)一幟，在排版設(shè)計(jì)中多一點(diǎn)個(gè)性而少一些共性，多一點(diǎn)獨(dú)創(chuàng)性而少一點(diǎn)一般性，才能羸得用戶(hù)的青睞。3高貴華麗型（適合支持色彩數(shù)量較多的彩屏手機(jī)，最好支持帶8位Alpha通道的png透明圖）基于飽和的色彩和華麗的質(zhì)感，塑造超酷、超眩的視覺(jué)感受，利用羽化了的像素對(duì)圖形圖像進(jìn)行仿真設(shè)計(jì)，不僅塑造界面色彩、形狀，還進(jìn)一步在元素的質(zhì)感和體積感上下功夫。給用戶(hù)一種高貴華麗的視覺(jué)享受。在設(shè)計(jì)的過(guò)程中基于上述風(fēng)格設(shè)計(jì)的思路，在視覺(jué)效果的設(shè)計(jì)上需要參考如下方法：a、 塑造界面的體積感和質(zhì)感，根據(jù)需要表現(xiàn)誘明、半誘明、粗燥、光滑等不同的視覺(jué)效果。b、 圖標(biāo)的制作中盡量避免生硬的邊緣輪廓，提倡漸變、羽化加強(qiáng)圖形的仿真性能，使設(shè)計(jì)更加趨于人性化。c、 考慮界面的整體色調(diào)，最好使用鄰近色或同類(lèi)色進(jìn)行色彩構(gòu)成，采用色彩的弱對(duì)比，因?yàn)榻缑鎴D形本身就結(jié)合了體積感和質(zhì)感的塑造，如果整體色調(diào)對(duì)比太強(qiáng)，很容易給用戶(hù)造成眼睛疲勞。四、視覺(jué)元素的設(shè)計(jì)1圖形元素設(shè)計(jì)原則：風(fēng)格統(tǒng)一、簡(jiǎn)潔、直觀、隱喻、2圖形元素設(shè)計(jì)流程：確定風(fēng)格一確定圖標(biāo)的功能一確定圖標(biāo)的造型一進(jìn)行制作1） 確定風(fēng)格：就是根據(jù)界面的總體風(fēng)格的策劃思路，結(jié)合界面其他元素的需要，對(duì)圖標(biāo)的整體風(fēng)格進(jìn)行考慮，以保證圖標(biāo)和整體效果的融合。明確意義的圖標(biāo)，風(fēng)格鮮明的版面設(shè)計(jì)是手機(jī)界面設(shè)計(jì)的重要工作，目前較為流行的是以MOTOROLA，NOKIA等為代表的歐洲簡(jiǎn)單風(fēng)格，以及韓國(guó)以Samsung，lg為代表的時(shí)尚絢麗的風(fēng)格，日本的shapp手機(jī)也很有特色，iphone則是無(wú)數(shù)手機(jī)廠商跟風(fēng)和膜拜的對(duì)象掀起了tuch狂潮。在更新穎的交互操作和與手機(jī)ID設(shè)計(jì)的整體結(jié)合上，韓系手機(jī)比較突出（samsungf488），而在可用性和體驗(yàn)難度上，歐系手機(jī)則比較優(yōu)秀（nokia）。2） 確定圖標(biāo)功能：在設(shè)計(jì)圖形之前這一點(diǎn)顯得特別重要，我們?cè)O(shè)計(jì)圖標(biāo)的目的是實(shí)用又美觀，也就是說(shuō)要考慮圖標(biāo)的隱喻性，他代表的意思必須是用戶(hù)可知的、熟知的。所以圖標(biāo)的功能是我們進(jìn)行圖標(biāo)造型設(shè)計(jì)的標(biāo)準(zhǔn)和依托。3）確定圖標(biāo)的造型：確定造型的方法多種多樣，只要不違背圖標(biāo)表達(dá)的主題。圖標(biāo)的造型設(shè)計(jì)我們提倡原創(chuàng)，先用illustrator進(jìn)行繪制，然后photoshop做圖標(biāo)設(shè)計(jì)的后期效果姓理。所有界面上同級(jí)、同類(lèi)的圖標(biāo)我們還要保證表現(xiàn)形式的統(tǒng)一，避免用戶(hù)視覺(jué)上的紊亂。[“trtN新成死拓:&偵*］成用雍衣uplO型弟[“trtN新成死拓:&偵*］成用雍衣uplO型弟巨新C17>最新應(yīng)用列表目翰陣★★+★10RMB*I.M下戟返回打開(kāi)退出4）進(jìn)行界面設(shè)計(jì)制作：利用photoshop中最好多采用路徑工具講行繪制界面圖形元素（以方便后期的版本定制），根據(jù)總體風(fēng)格對(duì)圖標(biāo)和界面細(xì)節(jié)進(jìn)行細(xì)節(jié)美化。轉(zhuǎn)換成程序所需要的相應(yīng)格式。ixr+ij.jbtcj.i t±rail-ixr+ij.jbtcj.i t±rail-1 rwj.i也BO心44JW>ji」，1口章口；』IZJ3口QL新- ［林志：&?:-際％#/弟3設(shè)計(jì)注意事項(xiàng)1） 色彩問(wèn)題：由于手機(jī)LCD本身的限制，在色彩的還原程度上沒(méi)有PC如此完善，因此在選用色彩時(shí)要根據(jù)使用的屏幕進(jìn)行調(diào)節(jié)，方法就是將設(shè)計(jì)好的效果圖導(dǎo)入相應(yīng)的手機(jī)中，用該手機(jī)自帶的圖片瀏覽.軟件進(jìn)行全屏效果杳看或者請(qǐng)求開(kāi)發(fā)人員幫助。2） 可實(shí)現(xiàn)性問(wèn)題：受到硬件運(yùn)算速度和內(nèi)存的影響，以及不可預(yù)計(jì)的后臺(tái)程序開(kāi)發(fā)難度，過(guò)于復(fù)雜的效果將很難進(jìn)行實(shí)現(xiàn)，與程序工程師和UI工程師，硬件工程師的溝通顯得尤為重要。手機(jī)軟件界面設(shè)計(jì)在界面設(shè)計(jì)領(lǐng)域是一項(xiàng)新興的