手機GUI二級選單設計說明

2021-09-08 05:48:59 字數 1374 閱讀 3016

隨著移動通訊類產品的發展,手機從以前的罕有用品快速發展到大眾消費類用品。手機所提供的服務內容模式也在深刻地變化當中,手機的人機互動介面也隨之不斷公升級發展變化中。手機的gui也漸漸形成了自己特有的不成文的標準和設計習慣。

手機gui的二級選單的設計是mmi過程當中較為特殊的乙個設計子項。二級的選單的設計不同於主選單和其它大副面的gui設計一樣,它必需要嚴格考慮到mmi的可實現性、使用者的使用習慣,以及確保美觀實用。目前最為流行的解決方案是以列表式為基礎所恆生出來的選單,這種方案的好處是保證使用者在使用上不會產生陌生感,也增強了二級選單的內容表現力。

下面就128*160的lcd顯示屏為例做乙個二級選單的設計。

首先我們要確定基本的整體布局框架,一般情況下,根據我們上面的分析,二級選單應該的大致框架應該是:標題欄(title bar)、列表內容欄(list content)、功能鍵欄(soft key)。

框架結構組合方式如下圖:

標題欄(title bar) 用來顯示和說明當前所處的二級選單的功能與作用,流行的常用表達方式為小圖示+文字說明+數字串行號。比如說**本就是這種表達方式

二選單要實現功能的選擇項,包含有背景、序列小圖示、選單文字。gui設計部分一般有背景、序列小圖示、選中狀態、確定狀態、滾動條等。

功能鍵欄(soft key)  用來定義手機鍵盤功能鍵的用法。大部分是使用:確定鍵、方向鍵、取消鍵的組合方式。gui設計部分為:確定鍵按下狀態、方向鍵、取消鍵按下狀態。建議三個部件排列起來的寬度為128 pix 。

下面把一些要注意的數字引數的定義講一下。

功能鍵欄的區域大小為 128 pix * 20 pix

列表內容欄 行高為20 pix

序列小圖示大小為 18 pix * 18 pix 或 16 pix * 16 pix

滾動條 寬度為4  pix

二級選單的設計更關鍵的部分應該是如何把握標題欄與列表內容欄。功能鍵欄的長寬大小基本上是比較傳統的設計方法。標題欄與列表內容欄則可以提供創意設計更大的部分,標題欄與列表內容欄的框架搭配組合如何可以直接關係到美觀程度,也就是說,二級選單的gui美觀基本上是通過這兩個部分來表現出來的,當然也包括功能鍵欄在內的整體效果。

通常下,標題欄與列表內容欄的組合設計應該是這樣子。

為了最大地顯示出二級選單的列表內容,目前主流都是顯示6行列表。列表內容欄的高度定義在120 pix 。

標題欄根據屏的分辯率就只能定義在20 pix

列表內容欄應該有背景、序列小圖示、選單文字、選中狀態。

標題欄給設計師留下來發揮的空間不是很大,但是我們可以用從列表內容欄借空間的方案來彌補設計空間不足的問題,這樣可以促使設計師多從如何把標題欄與列表內容欄更好地融洽在一起這個方面去思考。

最後來說,其實在手機gui的設計過程中,如何根據mmi的需求來更融洽、更適當的表達出設計出的gui,才是設計gui的根本道理。

CSS二級選單

最近的 要求使用二級選單,本著 能用別人的就用別人的,不能用別人的就用自己的 的原則,在網上找到乙個經典的使用css製作的二級選單,感覺不錯,先記錄下來,以備它用。經典的二級選單如下圖所示 其實,所謂的二級選單都差不多,無非就是為二級選單定義乙個層,當滑鼠放在一級選單上的時候顯示這個層,而將滑鼠從一...

二級選單級聯

好久沒總結了。先總結下這倆個月,看了點.net後台,看了點c 但不是很多,這倆天看了點php.總結總結下.net遇到的問題吧。第乙個其實就是乙個二級選單的級聯問題。用乙個簡單的例子說明一下。例子是乙個省份和城市的級聯,資料都從乙個資料庫的一張表裡取。前台 倆個dropdownlist控制項,這裡注意...

CSS二級選單

0.需求 當滑鼠hover到按鈕上時,出現下拉列表導航條。1.問題拆解 1 html應該如何組織比較方便合理 因為題中要求下拉列表位於按鈕的正下方,可以使用列表中巢狀無序列表 1 首先重置預設的,標籤樣式 li,li a 2 設定按鈕的邊框等,此時我設定的是外層標籤中標籤的樣式,此時將內層標籤設定成...