FeatherFan是Monolith項目的一個獨創性桌面,傳統的桌面大多爲九宮格佈局的快捷圖標,FeatherFan是風格簡潔的扇形菜單,其特色在於用戶可以通過單個手指的滑動來選擇菜單,非常適合於單手大拇指操作。Android是目前最流行的智能手機開發平臺,本文將探討FeatherFan在Android平臺上的實現。
1.FeatherFan的基本規格
FeatherFan的詳細UI/UX設計可以參考資料1,這篇文檔給出了具體的設計規格和需求。扇形菜單本質上還是菜單,目的是讓讓用戶可以選擇想要打開的程序和特定的功能(譬如,撥打電話或播放音樂)。基於該UI/UX設計,本文給出細化的設計規格。
fdssdf sdfsfd sdfsdf
typedef struct _wavefmt { u_short formattag; /* should be 1 for PCM-code ; others means compression*/ u_short channels; /* 1 Mono, 2 Stereo */ u_long rate; /* frequence of sample */ u_long byte_p_sec; u_short byte_p_spl; /* samplesize; 1 or 2 bytes */ u_short bits; /* 8, 12 or 16 bit */ } alp_wave_fmt; typedef struct _wave_datachunk { u_long data_chunk; /* 'data' */ u_long data_length; /* samplecount */ } alp_wave_datachunk;
sdfsdf
FeatherFan基本佈局
FeatherFan共有3級菜單。在Idle狀態將停留在第一級狀態,在用戶進行點擊,滑動操作後,進入二、三級菜單。與傳統的規則菜單不同,FeatherFan的每個菜單就是一個小扇區。扇區的基本佈局關係見(圖一):
1. 扇區對應的圓心(m,n)在屏幕以外區域,圓心及半徑R的選取與屏幕的寬高(W,H)有一定關係,以美觀爲原則。
2. 扇區的上邊界和下邊界的夾角不超過90度,一級菜單大扇區可取90度角,對於2,3級菜單,爲了顯示儘可能多的內容,大扇區的角度應小於90度。
3. 三級菜單扇區共用圓心(m,n),菜單級數越大,R值也會越大
4. 射線邊界點(x,y)可以利用圓方程和直線方程的關係進行求解
我的測試標題
士大夫士大夫山東省地方雙方的大夫士大夫山東省地方雙方的大夫士大夫山東省地方雙方的大夫士大夫山東省地方雙方的大夫士大夫山東省地方雙方的大夫士大夫山東省地方雙方的大夫士大夫山東省地方雙方的大夫士大夫山東省地方雙方的
士大夫
FeatherFan三級菜單的基本顯示式樣見(圖二),第三級菜單在顯示的時候,與一二級有一定的區別,它包含兩部分內容:應用名稱,以及應用的細節內容。如果是“已撥電話”應用,則第三級菜單除了顯示“已撥電話”菜單主項外,還將顯示出已撥電話的列表。從圖二可看出,三級菜單的主項和子項顯示的風格是不一樣的。
FeatherFan工作方式
用戶通過手指的點擊滑動和FeatherFan進行交互。用戶操作可以識別爲以下事件:
事件名稱 |
說明 |
PRESS |
手指觸摸屏幕一段時間(0.5s)不離開 |
SCROLL |
手指觸摸屏幕後,在同一級菜單上圍繞扇區圓心,在不同的菜單項上滑動 |
PUSH |
手指觸摸屏幕,在某個菜單扇區內,沿遠離圓心的方向滑動手指超過一定的距離 |
PULL |
手指觸摸屏幕,在某個菜單扇區內,沿指向圓心的方向滑動手指超過一定的距離 |
SELECT |
手指在某個菜單項上離開屏幕。該菜單項將被觸發 |
UP |
手指離開屏幕,如果此時觸點是菜單項目的有效區域,即SELECT事件,否則返回第一級菜單 |
一級菜單:
在Idle狀態,第一級菜單將被顯示。一級菜單隻響應 PRESS 和 UP事件。在上圖的一級菜單上,有黑點表示的點擊區域,只有PRESS事件發生在黑點區域附近時,才視爲有效事件。有效PRESS事件後,將進入二級菜單。在Idle狀態,一級菜單將顯示扇環自動旋轉動畫。
二級菜單:
二級菜單響應SCROLL,PUSH,SELECT,UP事件,不響應PULL事件。SCROLL將選則二級的子菜單,PUSH將進入第三級菜單。當二級菜單項被選中後,該菜單扇區域將高亮顯示。如果該菜單有三級菜單,將顯示沿徑向向外擴散的水波動畫;否則僅高亮顯示。二級菜單的扇環不再自動旋轉,而是隨SCROLL動作而變化。
三級菜單:
三級菜單響應SCROLL,PULL,SELECT,UP事件,不響應PUSH事件。SCROLL將選中三級的子菜單,PUSH將返回二級菜單。當三級菜單項被選中後,該菜單扇區將高亮顯示。三級菜單顯示的扇環比一二級簡單,僅隨SCROLL動作而變化。三級扇區的顯示,以用戶徑向PUSH的方向爲基準,如果PUSH的方向偏下,扇區將向屏幕上方顯示。否則,扇區將向屏幕下方顯示。因第三級有很多類似List的內容,屏幕菜單區域可能顯示不完,這就要求在扇區的邊界顯示爲More的狀態。當手指向More邊界滑動且接觸到More區域的時候,整個三級扇區能向上或向下滾動,以把扇區顯示在屏幕的中心區域,從而能儘可能多地顯示菜單項。當然,扇區的最大顯示範圍不超過90度角。即使這樣,很多時候,菜單內容並不能完全顯示完。譬如Contacts應用,會有很多的記錄,遠遠超過菜單扇區能顯示的數量(不超過20條)。對於這樣的三級菜單,我們就要利用More邊界來顯示,支持用戶瀏覽更多的記錄。
FeatherFan動畫及特效
爲了提高用戶的體驗,FeatherFan在每級菜單都加了動畫特效。根據前面的描述,每一級的策略是不一樣的。這裏把FeatherFan涉及到的動畫和特效加以總結:
特效名稱 |
說明 |
光效射線 |
一級菜單的扇區邊界線,有光亮漸變效果 |
扇環旋轉 |
一級菜單,自動旋轉;二三級菜單,隨手指滑動而轉動 |
扇區水波 |
二級菜單,手指滑動到某一菜單扇區後,用於指示是否有三級菜單 |
扇區高亮小縮放 |
二三級菜單,在手指滑動到該區域後,菜單扇區高亮並適當放大 |
扇區高亮大縮放 |
菜單被選中後,該區域將自動放大,並準備進入相應的應用 |
扇區整體旋轉居中 |
三級菜單,當扇區偏離顯示中心,且有More邊界,手指向More邊界滑動時,扇區自動旋轉並居中顯示 |
扇區More邊界 |
三級菜單,在待菜單項數超過實際顯示扇區個數時,顯示More邊界 |