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

手機(jī)軟界面設(shè)計一一基礎(chǔ)篇TOC\o"1-5"\h\z一、 界面設(shè)計的原則 1二、 定制界面版式 11界面層級 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） 界面三個信息區(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"三、 視覺效果 3\o"CurrentDocument"1簡約明快型 3\o"CurrentDocument"2趣味與獨(dú)創(chuàng)型 4\o"CurrentDocument"3高貴華麗型 4四、 視覺元素的設(shè)計 51圖形元素設(shè)計原則： 5\o"CurrentDocument"2圖形元素設(shè)計流程： 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è)計制作： 63設(shè)計注意事項 71） 色彩問題： 7\o"CurrentDocument"2） 可實現(xiàn)性問題： 7一、界面設(shè)計的原則手機(jī)軟界面是置身于手機(jī)操作系統(tǒng)中的人機(jī)交互的窗口，設(shè)計界面必須基于手機(jī)的物理特性和軟件的應(yīng)用特性進(jìn)行合理的設(shè)計，界面設(shè)計師首先應(yīng)對手機(jī)的系統(tǒng)性能有所了解，例如：手機(jī)所支持的最多色彩數(shù)量、手機(jī)所支持的圖像格式，其次應(yīng)該對軟件的功能詳細(xì)了解熟悉每個模塊的應(yīng)用模式。從而做到最大限度的利用現(xiàn)有資源進(jìn)行用戶界面的開發(fā)。二、定制界面版式1界面層級idle（待機(jī)界面）--mainmenu（主菜單）--submenu（二級菜單）--thirdlevelmenu（三級菜單）

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

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