為具有硬件限制的設備設計高質量的圖形用戶界面 (GUI) 可能很困難。 但是這篇文章展示了一些方法來最大限度地提高設計效率,使其更容易。 更高效的 GUI 在處理移動部件和動畫時使用更少的內存、CPU 和 GPU 功率,並讓設計人員有更多的空間來進行設計,而不必擔心硬件限制。

具有共同元素的設計

下面的示例顯示了一個簡單的菜單屏幕,其中包含一些常見元素:

  • 每個 ICON_X 都是一個按鈕,可以將 GUI 更改為不同顏色的屏幕。
  • HOME 按鈕將 GUI 返回到主屏幕。
  • HOURS:MINUTES:SECONDS 元素保留在所有屏幕的右上角。
  • 無論選擇了哪個 ICON_X 按鈕,ICON_X 按鈕和 HOME 按鈕都保持在同一位置。

開發者博客系列_1

如果 GUI 開發人員要通過複製和粘貼此 GUI 中每個屏幕的“TimeAndIconBanner”元素(頂部欄顯示 HOURS:MINUTES:SECONDS,底部欄顯示圖標按鈕)來設計菜單佈局,則結果是 GUI 模型中的幾個重複對象。 在下圖中,構成“IconScreens”的 Deck 對像中的每張卡片都包含相同的 TimeAndIconBanner 元素。

TimeAndIconBanner 元素是 IconScreens 下每個單獨屏幕的一部分,TimeAndIconBanner 的多個實例需要在每次屏幕更改時重繪該元素,從而導致不必要的 RAM 和 CPU 使用。

為了優化這個設計和其他類似的設計,設計人員應該隔離公共元素,在這種情況下是 TimeAndIconBanner,並將它們移動到上一層的單個實例,如下所示。

現在只有一個 TimeAndIconBanner 元素與 IconScreens 處於同一級別。 此層次結構說明了設計組件的最有效排列,導致 Altia Design 中這些組的 z 順序發生相應變化,這意味著最高級別的 TimeAndIconBanner 組顯示在顯示屏上較低的 IconScreens 組上方。

帶有移動部件的設計

考慮一個動畫速度計。 如果 GUI 被設計成重新繪製整個屏幕,而不僅僅是針,則此 GUI 將需要更多內存。 保持靜態背景圖像並僅動畫頂部的針創建最有效和節省內存的設計。 擠出一些額外性能的另一個地方可能是降低你的 fps。 某些動畫可能不需要硬件的最大幀速率來獲得令人滿意的平滑度,並且使用 Altia Design 可以輕鬆進行實驗並找到適合您設計的較低 fps。

簡單的速度計

如果您想了解有關 Altia 如何幫助您優化 GUI 以使用最少的內存和功耗提供最佳性能的更多信息,我們邀請您 安排演示 今天與我們專家 GUI 團隊的成員一起。