ハードウェアの制約があるデバイス用に高品質のグラフィカルユーザーインターフェイス(GUI)を設計するのは難しい場合があります。 ただし、この記事では、設計効率を最大化して簡単にする方法をいくつか示します。 より効率的なGUIは、可動部品やアニメーションを処理するときに使用するメモリ、CPU、GPUの電力を減らし、ハードウェアの制約を気にすることなく、設計者がデザインを工夫できるようにします。
共通の要素を使用した設計
以下の例は、いくつかの一般的な要素を含む単純なメニュー画面を示しています。
- 各ICON_Xは、GUIを異なる色の画面に変更するボタンです。
- HOMEボタンはGUIをホーム画面に戻します。
- HOURS:MINUTES:SECONDS要素は、すべての画面の右上隅に残ります。
- ICON_XボタンとHOMEボタンは、選択したICON_Xボタンに関係なく同じ場所に残ります。
GUI開発者が、このGUIの各画面の「TimeAndIconBanner」要素(上部のバーにHOURS:MINUTES:SECONDSを表示し、下部のバーにアイコンボタンを表示)をコピーして貼り付けることでメニューレイアウトを設計した場合、結果はGUIモデル内のいくつかの重複オブジェクトです。 下の画像では、「IconScreens」を構成するデッキオブジェクトの各カードに同じTimeAndIconBanner要素が含まれています。
TimeAndIconBanner要素はIconScreensの下の個々の画面の一部であり、TimeAndIconBannerの複数のインスタンスでは、画面が変更されるたびにその要素を再描画する必要があるため、RAMとCPUの使用量が不要になります。
このデザインやその他のデザインを最適化するには、以下に示すように、設計者は共通の要素(この場合はTimeAndIconBanner)を分離し、それらをXNUMXつ上のレベルの単一インスタンスに移動する必要があります。
XNUMXつのTimeAndIconBanner要素のみがIconScreensと同じレベルに存在するようになりました。 この階層は、デザインコンポーネントの最も効率的な配置を示しており、Altia Design内のこれらのグループのzオーダーに対応する変更があります。つまり、最高レベルのTimeAndIconBannerグループがディスプレイの下部のIconScreensグループの上に表示されます。
可動部品を使用した設計
アニメーションのスピードメーターを考えてみましょう。 針だけでなく画面全体が再描画されるようにGUIが設計されている場合、このGUIにはより多くのメモリが必要になります。 静的な背景画像を維持し、上部の針だけをアニメーション化すると、最も効率的でメモリを節約するデザインが作成されます。 余分なパフォーマンスを引き出すためのもうXNUMXつの場所は、fpsを減らすことです。 一部のアニメーションでは、十分な滑らかさを実現するためにハードウェアの最大フレームレートを必要としない場合があります。また、Altia Designを使用すると、簡単に実験して、デザインで機能するより低いfpsを見つけることができます。
AltiaがGUIを最適化して、最小限のメモリと電力で最高のパフォーマンスを実現する方法について詳しく知りたい場合は、 デモを予約する 今日はエキスパートGUIチームのメンバーと一緒に。