|
chinaui.com 獨家授權(quán) 請勿轉(zhuǎn)載
隨著移動通信類產(chǎn)品的發(fā)展，手機從以前的罕有用品快速發(fā)展到大眾消費類用品。手機所提供的服務(wù)內(nèi)容模式也在深刻地變化當(dāng)中，手機的人機交互界面也隨之不斷升級發(fā)展變化中。手機的GUI也漸漸形成了自己特有的不成文的標(biāo)準(zhǔn)和設(shè)計習(xí)慣。
手機GUI的二級菜單的設(shè)計是MMI過程當(dāng)中較為特殊的一個設(shè)計子項。二級的菜單的設(shè)計不同于主菜單和其它大副面的GUI設(shè)計一樣，它必需要嚴(yán)格考慮到MMI的可實現(xiàn)性、用戶的使用習(xí)慣，以及確保美觀實用。目前最為流行的解決方案是以列表式為基礎(chǔ)所恒生出來的菜單，這種方案的好處是保證用戶在使用上不會產(chǎn)生陌生感，也增強了二級菜單的內(nèi)容表現(xiàn)力。
下面就128*160的LCD顯示屏為例做一個二級菜單的設(shè)計。
首先我們要確定基本的整體布局框架，一般情況下，根據(jù)我們上面的分析，二級菜單應(yīng)該的大致框架應(yīng)該是：標(biāo)題欄（title bar）、列表內(nèi)容欄（list content）、功能鍵欄(soft key)。
框架結(jié)構(gòu)組合方式如下圖：
標(biāo)題欄（title bar） 用來顯示和說明當(dāng)前所處的二級菜單的功能與作用，流行的常用表達方式為小圖標(biāo)+文字說明+數(shù)字序列號。比如說電話本就是這種表達方式
二菜單要實現(xiàn)功能的選擇項，包含有背景、序列小圖標(biāo)、菜單文字。GUI設(shè)計部分一般有背景、序列小圖標(biāo)、選中狀態(tài)圖片、確定狀態(tài)圖片、滾動條等。
功能鍵欄(soft key) 用來定義手機鍵盤功能鍵的用法。大部分是使用：確定鍵、方向鍵、取消鍵的組合方式。GUI設(shè)計部分為：確定鍵按下狀態(tài)、方向鍵、取消鍵按下狀態(tài)。建議三個部件排列起來的寬度為128 pix 。
下面把一些要注意的數(shù)字參數(shù)的定義講一下。
功能鍵欄的區(qū)域大小為 128 pix * 20 pix
列表內(nèi)容欄 行高為20 pix
序列小圖標(biāo)大小為 18 pix * 18 pix 或 16 pix * 16 pix
滾動條 寬度為4 pix
二級菜單的設(shè)計更關(guān)鍵的部分應(yīng)該是如何把握標(biāo)題欄與列表內(nèi)容欄。功能鍵欄的長寬大小基本上是比較傳統(tǒng)的設(shè)計方法。標(biāo)題欄與列表內(nèi)容欄則可以提供創(chuàng)意設(shè)計更大的部分，標(biāo)題欄與列表內(nèi)容欄的框架搭配組合如何可以直接關(guān)系到美觀程度，也就是說，二級菜單的GUI美觀基本上是通過這兩個部分來表現(xiàn)出來的，當(dāng)然也包括功能鍵欄在內(nèi)的整體效果。
通常下，標(biāo)題欄與列表內(nèi)容欄的組合設(shè)計應(yīng)該是這樣子。
為了最大地顯示出二級菜單的列表內(nèi)容，目前主流都是顯示6行列表。列表內(nèi)容欄的高度定義在120 pix 。
標(biāo)題欄根據(jù)屏的分辯率就只能定義在20 pix
列表內(nèi)容欄應(yīng)該有背景、序列小圖標(biāo)、菜單文字、選中狀態(tài)圖片。
標(biāo)題欄給設(shè)計師留下來發(fā)揮的空間不是很大，但是我們可以用從列表內(nèi)容欄借空間的方案來彌補設(shè)計空間不足的問題，這樣可以促使設(shè)計師多從如何把標(biāo)題欄與列表內(nèi)容欄更好地融洽在一起這個方面去思考。
最后來說，其實在手機GUI的設(shè)計過程中，如何根據(jù)MMI的需求來更融洽、更適當(dāng)?shù)谋磉_出設(shè)計出的GUI，才是設(shè)計GUI的根本道理。
出處：中國UI設(shè)計網(wǎng)
責(zé)任編輯：moby
|
