Windows 10、モバイルもOK！
最新OSガイドラインに適合したUI/UX構築
第35回 エンバカデロ・デベロッパーキャンプ

エンバカデロ・テクノロジーズ
セールスコンサルタント 毛利春幸本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

はじめに iOS/Android レイアウトやWindows 10に関し大きくUI/UXのルールが異なります。
いったいどう違うのか？
 さまざまなデバイスの要素・対話型などを例に大きく設計思想をシフトさせましょう

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

過去のさまざまなデバイス デザイン
 複数ウィンドウやMDIですか？
 AndroidもiOSも共通レイアウトですか？

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

3

マルチデバイス デザイン
 Windows 10、iOS、Androidそれぞれデザインに関してのガイドラインが異なります すべてのOSで共通画面• 他のアプリと動きが違うので利用者がとまどいますOSそれぞれのデザインガイドラインがあります。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

4

iOS Human Interface Guidelines Clarity• テキストはあらゆるサイズでみやすい・アイコンは明瞭・適切な装飾・機能性に鋭い焦点 Deference• 流体の動きと鮮明で美しいインターフェイス、対話形式、多くのヒント• ベゼル、グラデーション、およびドロップシャドウの使用は最小限

 Depth• 理解しやすい階層レイヤー• コンテンツをナビゲートする際の奥行き
ざっくりでイメージしにくい
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

5

Android マテリアルデザイン
 Android は紙とインクからヒントを得たデザイン メタファーを使って、ユーザーが安心できる使用感
 Material is the metaphor• 紙とインクと光と影 Bold, graphic, intentional• 利用者に没入した体験させる Motion provides meaning• 意味を連想させるモーション

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

6Windows 10
 Windows 10になって動作環境が大きく広がりました…
• 高解像度モニタ• タッチスクリーン• キーボード着脱式PC• タブレット： UWP• UI/UXに関するガイドライン

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

7

メッセージBOX デバイス単位で違いがよくわかる
VCL(Win10 スタイル)

FireMonkey(Win)TDialogService.MessageDialog()

macOS

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Ext JS(Win)Ext.Msg.confirm()

Ext JS(macOS)
Ext.Msg.confirm()

8Android/iOS Alert メッセージBOX(Alert)
Android
TDialogService.MessageDialog()

iPhoneUIAlertController

iPhoneAction Sheets

iOSはネガティブな情報は左に配置する
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

9タブレイアウトの違い
 Windowsではナビゲーションエレメント
 Androidではタブレイアウト
 iOSタブバー

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

10

VCL Windows 10 TToolBarを使ったナビゲーションエレメント
 TToolBarを使いナビゲーションエレメントを再現

TStackPanel

ナビゲーションエレメント
TToolBar

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

メニューの可視エントリ ポイント
ツール バー右端のプライマリ アクションの隣に配置
ドロップダウンメニュー

11

FMX Windows 10 ナビゲーションエレメント
 TTabControl を使ったWindows 10ナビゲーションエレメント
FireMonkeyの場合スタイルのカスタマイズで対応できます。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

12

Android タブレイアウト
 タブレイアウト位置は上部
TTabControl
A
B
C

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

13

iOS タブバー
 iOS TTabControlを利用
iPhone Xは812pt × 375ptですが、Delphi/C++Builderで利用できるのは縦768です。
上部44ptはStatusバー

32pt浮かす本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

14

バーガーメニュー Windows 10やAndroidのバーガーメニュー• ドロアー展開方法の違い• ナビゲーションウィンドウ iOSでバーガーメニューは無いほうがよい• バーガーメニューついてるアプリは多いです。
• タブバーを利用しiPhoneの場合3-5タブで完結できるデザインがよい

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

15

VCL Windows 10 TSplitView ナビゲーションウィンドウ バーガーボタンからTSplitViewを開閉

TSplitView
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

16

Android App Bar バーガーボタンはApp Barに配置します
5672

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

17

Android Navigation View バーガーボタンからナビゲーションビューを表示します
TMultiViewで再現可能です
ドロアーオープン時ステータスバーは被せれないので注意が必要です

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

18

ナビゲーションバー
 iOSナビゲーションバー• 左から右へ流れるイメージ

 Android ナビゲーションバー• 標準についている黒い戻るボタン△(戻る)

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

○(ホーム)□(タスク - アプリ履歴)19Android ナビゲーションバーの[戻る] ナビゲーションバーの△[戻る]の動きに注意が必要です• Android慣れている人はナビゲーションバーを押す癖があります△(戻る)○(ホーム)□(タスク - アプリ履歴)

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

20

iOS ナビゲーション 情報は左から右に流れる

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

21

ツールバー Windows 10 コマンドエレメント• ファンクションボタンのような扱い

 iOS Safariの下側に表示されているバー

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

22

Android Bottom Navigation
 下部ナビゲーションバーです。
 ワンタッチでトップレベルのコンテンツビューを簡単に切り替えることができます。
 このパターンは、3〜5つのトップレベルの目的地がある場合に使用できます。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

23

VCL Windows 10 TGridPanelコマンドエレメント
 TGridPanelで平均的にボタンを配置する
ナビゲーション

コンテンツ
コマンドエレメントはすべてのパンで共通にするのか？
設計時の判断が必要
コマンドエレメント

TGridPanel
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

24

Windows 10 ハブコントロール
 ハブのコンテンツはパンする堅牢なビューに表示でき、新しい情報、入手可能な項目、関連する項目がひとめでわかります。
VCLでの例

TGridPanelやTStackPanel

全体はTStackPanel

TPageScrollerやTScrollBox

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

25

Windows 10/iOS/Androidでのタッチ操作
 タッチ操作時のコントロールが簡単に利用できます 常に指で操作されることを考慮してUI設計を行う• 操作部品の大きさや配置• (VCLでは「標準ジェスチャ(30種類以上)」と「カスタムジェスチャ」でタッチ操作を扱える)

TControl.Touch.GestureManagerへ

OnGestureは継承元がTControlだとついている本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

26

Windows 10 操作を完了までに 2秒
 重い処理 / ダウンロード / サーバーからのレスポンス• ユーザーの操作をブロックするモーダルな確定的でないタスクでは、進行状況不定バー TActivityIndicator

10秒より長い時間がかかる 場合は、操作を取り消す方法を用意

 重い処理での(応答なし)もThread化

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

27

Windows 10 通知
 メッセージボックスやダイヤログによる通知を
TNotificationCenter コンポーネントを利用する

iOS/AndroidにもTNotificationCenterは付いています
スマホ操作タイミングによっては迷惑なメッセージになる

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

28

まとめ• Windows 10/iOS/Androidそれぞれのレイアウト文化があります• アニメーション動作には理由があります FireMonkey標準機能だけで実現できます
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

29

THANKS!
www.embarcadero.com/jp
第35回 エンバカデロ・デベロッパーキャンプ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。