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

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

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