ハードウェアの制約があるデバイス用に高品質のグラフィカルユーザーインターフェイス(GUI)を設計するのは難しい場合があります。 ただし、この記事では、設計効率を最大化して簡単にする方法をいくつか示します。 より効率的なGUIは、可動部品やアニメーションを処理するときに使用するメモリ、CPU、GPUの電力を減らし、ハードウェアの制約を気にすることなく、設計者がデザインを工夫できるようにします。

共通の要素を使用した設計

以下の例は、いくつかの一般的な要素を含む単純なメニュー画面を示しています。

  • 各ICON_Xは、GUIを異なる色の画面に変更するボタンです。
  • HOMEボタンはGUIをホーム画面に戻します。
  • HOURS:MINUTES:SECONDS要素は、すべての画面の右上隅に残ります。
  • ICON_XボタンとHOMEボタンは、選択したICON_Xボタンに関係なく同じ場所に残ります。

開発者ブログseries_1

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チームのメンバーと一緒に。