優れた UX を備えたモバイル アプリケーションを開発するための 5 つのヒント

メインコンテンツへスキップ

優れた UX を備えたモバイル アプリケーションを開発するための 5 つのヒント

UI ブログ投稿の背景画像

日時 モバイルアプリケーションの開発 Mendix多くの顧客は、まずWeb用のアプリケーションを構築し、その後、モバイルアプリケーションからアクセスできるサブセットに全体の機能を縮小します。このアプローチは、モバイルデバイスからアプリケーションとインターフェイスする方法が必要であるという要件を持つアプリケーションに適しています。Webアプリケーション用にすでに開発されているロジックとUIコンポーネントのほとんどは、 再利用 モバイル アプリケーションの開発は、既存の機能の一部を再編成する作業に近くなります。

しかし、もし要件が完全にモバイルアプリケーションであればどうなるでしょうか?別のアプローチを取るべきでしょうか? Mendix 開発ですか?もしそうなら、どのようにですか?

最近のブログで、同僚のエリック・ティニバーは、モバイル開発は後回しにすべきではないと説明し、 マルチチャネル戦略を最初から実装するためのベストプラクティスこのブログでは、モバイル開発時に留意すべき重要な点と、 Mendix あなたが始めるのに役立つ。

経験が第一

モバイルアプリケーションを開発する際に心に留めておくべき最も重要なことは、 Mendix アプリの普及と成功を左右するのは、機能性ではなくユーザーエクスペリエンスです。応答に時間がかかりすぎたり、操作がぎこちなかったり、UIにちょっとした不具合があったりしてユーザーが不満を抱くと、すぐにアプリから離れてしまいます。今日では、美しく機能豊富なアプリが豊富に存在するため、質の低いアプリに対する許容度はかつてないほど低くなっています。アプリは見た目、操作感、そして動作がエレガントである必要があります。そして、それはユーザーインターフェースから始まります。

アニメーションがあり、複数のジェスチャーに反応できるアプリは、より洗練されたインターフェースを備えているとよく考えられます。携帯電話のお気に入りのアプリを考えてみてください。おそらく、明るい色、洗練された書体、そして楽しいアニメーションが使われているでしょう。問題は、最高のモバイル エクスペリエンスをどのように設計し、開発できるかということです。

モバイルアプリケーション開発を成功させるための5つのヒント Mendix

1.ウィジェットを使用する

App Store には、モバイル アプリケーション向けに特別に設計されたウィジェットが多数あります。

Mendix Appストアのスクリーンショット

ここで最も重要なウィジェットは、 Mendix モバイルアプリは モバイル機能. もしこれを使用していない場合は Mendix モバイルアプリを今すぐインストールしましょう。このウィジェットを使えば、アプリのページ遷移、ネイティブダイアログ、読み込みスピナーなど、様々なアニメーション効果をアプリに付加できます。

モバイル機能に加えて、美しいモバイル ページの構築に役立つその他のウィジェットは次のとおりです。

Mendix アプリケーション電話の例

ここでは、アプリストアのウィジェットを使用して、ユーザーが銀行口座の2つの異なるビューを切り替えることができるスワイプ可能なアニメーションタブを作成します。

メールボックススタイルのスワイプの例

利用可能なウィジェットをもっとたくさん見てみましょう .

2. ページテンプレートを使用してモバイルページを簡単にカスタマイズする

Mendix あらゆるサイズと向きの画面やデバイスに対応した、すぐに使える豊富なデフォルトページテンプレートが用意されています。モバイルページテンプレートは、美しいモバイルページをデザインするための優れた出発点となります。各ページを全幅のレイアウトグリッドで囲むことで、テキストが画面の端からパディングされ、読みやすくなります。モバイルテンプレートでは、ナビゲーションボタンと主要な操作ボタンが、モバイルで想定される位置であるビューポートの上部に配置されます。

ページテンプレートの使用例

ここでは、Phone_TopBottom テンプレートの例を示します。このテンプレートは、上部にプライマリ ボタン用のプレースホルダーを提供します (サインアウト and 設定)と下部の主要セクションのナビゲーション

コンテンツがリスト ビュー内で適切に配置されていることを確認するなどのことも、非常に重要になります。なぜなら、表示する情報が多すぎることと情報が足りないことのバランスを見つけることが常に念頭に置かなければならないからです。

適切な配置の例のスクリーンショット

リストビューウィジェットは特定のアカウントの取引に関する情報を表示します

モバイル アプリはデスクトップ アプリよりも表現力が豊かである傾向があるため、この整然とレイアウトされたホーム画面のように、コンテンツの表示方法を変えると効果的です。

モバイルアプリケーションで明確に整理されたデータ

このホーム画面には、アカウントの概要が表示され、アカウントに関するさまざまな重要な詳細を示すさまざまな視覚的レンダリングが表示されます。

3. 再利用しやすいようにスニペットを使用する

モバイルアプリケーションではデザインが非常に重要な要素であるため、スニペット/ビルディングブロックを(多用して)使用して、 再利用の重要性モバイル アプリケーションには、一般的に、再利用しやすい「型にはまった」画面が多くあるため、これを活用します。 後でアプリのデスクトップ/Web バージョンを構築するときに、ここでスニペットをそのバージョンでも使用できる場合は、ボーナス ポイントになります。

4. CSSはあなたの味方

アプリケーションの外観と操作性を活用してユーザーを魅了します。flex、transition、box-shadow、明るい色やグラデーションなどの CSS プロパティは、アプリを目立たせるのに役立ちます。

5. ボタンは控えめに使い、多様化させる

ウェブでは、ポイントとクリックは自然な動作です。これは、数十年前の最初のグラフィカル オペレーティング システム以来、ユーザーが画面を操作する主な方法です。モバイルでは、タッチは操作方法の 1 つにすぎません。タッチ、スワイプ、位置情報、デバイスの詳細、カメラなど、ユーザーがアプリで実行できるさまざまな操作を最大限に活用してください。貴重な画面領域を主要な操作にのみ割り当て、ジェスチャまたはアクション メニューを使用します。

モバイルアプリケーションに対するインタラクションや期待はウェブ上のアプリケーションとは大きく異なるため、開発アプローチはまず体験に重点を置く必要があります。 Mendix プラットフォームを使用すると、さまざまなモバイル ウィジェット、モバイル用のすぐに使用できるページ テンプレート、コードを整理するための再利用可能なスニペット、CSS と高度なインタラクション コントロールによるアプリケーションの外観と操作性の完全な制御などにより、Android と iOS の両方のデバイスでネイティブ アプリケーションのように動作するアプリケーションを簡単に設計および構築できます。

言語を選択してください