建立Windows Mobile上相容性好的UI 程式

回複 | 引用 | 編輯 | Top 

    看看上面這個Emulator的吧，有WM 2003se、5.0、6.0的，有pocket PC、smartphone、classic、professional的，有英文的，也有中文的，解析度、DPI都各有區別。在這麼多眼花繚亂的WM平台上開發應用程式，UI的設計，特別是compatible的UI策略，是很重要的。之前的Docking and Anchoring Controls on Windows Mobile也是其中一點。在MSDN上看到了這個方面比較有指導意義的文章Create Compatible User Interfaces，覺得有必要和大家共同探討一下。

1.通用UI策略

l 不要在編寫代碼的時候將螢幕資訊設定死，取而代之的是使用GetSystemMetricsorGetClientRect來擷取螢幕當前的size。同樣，在Managed 程式碼中，使用Form的Width、Height屬性。

l 處理Resize事件。在裝置載入程式、動態載入介面或者改變螢幕方向的時候，我們要考Form的寬度與高度等資訊。

l 使用單獨的控制項。如果有可能的話，盡量使用單獨的控制項來覆蓋整個螢幕，例如ListView或者TreeView。

l 控制項重新布局。螢幕從portrait模式改變到landscape模式，或者從landscape模式改變到portrait模式時，我們要考慮改變控制項的布局。當然，最簡單的方法就是使用Anchor and Dock屬性。1就展示了這個微妙的差別：

圖1：控制項使用Anchor and Dock屬性的差別

如果我們進行native code開發，就可以參考MSDN上的Introducing Screenlib來完成。

l 測試的時候，盡量使用較多的Emulator，並且要在portrait模式和landscape模式間切換，來考驗我們寫的應用程式效能。

2.字型和字型大小

使用SHGetUIMetrics函數來檢測使用者選擇的字型大小，並且在應用程式中使用相同的字型，以使使用者獲得一致的體驗。應用程式可以監聽SH_UIMETRIC_CHANGE訊息來獲得使用者改變預設設定的事件。

3.使用者介面的顏色

所有的Form控制項都會適應當前的主題(Theme)，當然，如果我們使用GDI來重繪的話，最好得到當前系統使用的主題資訊，然後對控制項使用一致的策略。

4. Soft Key策略

    一般來說，左邊的Soft Key是執行單條常用的命令，而非彈出一個菜單。右邊的Soft Key一般是快顯功能表，並且將最常用的選項放在第一行，進行高亮顯示。同時，避免使用多於兩級的子功能表。

5.程式表徵圖

    和PC的應用程式不同，Windows Mobile使用不同大小的Icon。一般說來，我們在資源中包含不同解析度下的程式表徵圖，並且在程式啟動並執行時候來檢測，然後決定附加元件。可以參考windows mobile blog:Which icon sizes should I use in my application?。Fox23的Blog上也說明了這點。

6.避免使用位元影像

    由於windows mobile裝置的螢幕大小、解析度和形狀等各不相同，所以會導致映像顯示效果的不同。同一張位元影像在“96 DPI, 320x240”和“192 DPI, 480x480”的機子上，顯示效果如2所示：

圖2：同一張位元影像在不同解析度螢幕上的效果

    可以看到，在高解析度下，同一張位元影像並不適合螢幕。

 

參考文獻:Create Compatible User Interfaces/Introducing Screenlib/ Which icon sizes should I use in my application?。