Fioriデザイン
SAPのUI/UX標準のひとつである「Fiori」にガイドライン(ベータ版)があるのでメモ。5原則
①ロールベース(働きやすく)②レスポンシブ(いつどこでどんな働き方をしても)
③シンプル(わかりやすい)
④首尾一貫(シームレスな流れ)
⑤楽しく快適な
UI概要
2つの基本的なテンプレートが用意されている。
①Master/Detail テンプレート
②Full Screen テンプレート
グリッドレイアウト
Fioriは「rem」と呼ばれる16pixelsのUnit単位でUI設計するようになっている。理由はレスポンシブなデザイン開発、だけでなくその後のメンテナンス容易性も考えられている。また3x3remは人間の指でタッチパネルをたたく自然な大きさとなっている。また、グリッドのみならず「リスト」形式による一覧表示などの「縦幅」も「3rem」とすることで、同じ効果を生み出す。
ナビゲーション(バー)
Fioriの上部にある「ナビゲーション」、およびその更に丈夫に「ホームボタン」や「検索バー」を設けるデザインを基本としている。
アニメーション
Fioriは2種類のアニメーションによる画面繊維機能を持っている
①トランジション
②ワーディング
テーマ設定
デザイン、カラーは基本的にCSSで調整する。お客様や自社ブランドカラーに統一。
プロトタイピングキット(Prototyping Kit)
アプリを考え始めるとき、まず簡単なプロトタイプの作成も重要である。まず、プロトタイプ作成からはじめるべきである。「look and feel」を早急な段階で評価する必要があるからである。プロトタイプ時点でユーザーにどんどん見せて、フィードバッグをもらい、反映し、新たなプロトタイプを再度評価する、というプロセスが価値に繋がる。
モックアップをさっと作成するには、MSのPowerpointを使ったUI部品もある。プロトタイピングキットを使うことによって、簡単なモックアップの生成が可能である。Fioriデザイン原則をきちんと把握しながら、そしてそれは、「ロールベース」で「レスポンシブル」で、「シンプル」、「首尾一貫」とした「楽しみ」が得られるアプリにすることが大事です。
プロトタイピングキットのダウンロードはこちら。
Launchpad
ローンチパッドはいわゆる「ホーム画面」である。ここから数百ものSAP機能やエントリー画面やログイン画面、検索画面として利用するホームページ画面となっている。
UI5
UI5はHTML5とJavascriptによるプログラミングで生成された、SAPデータへのアクセスに最適化されたクライアントサイド(ユーザー)になる。その概要は、
- 全てのデバイス対応する操作性
- 全てのプラットフォームに対応したアプリ
- タイムレスソフトウェアを実現するためのODataプロトコル採用
- 拡張や設定思想による将来性
- フラットデザインのような近代的なコンセプト
- オープンソース化とWeb標準対応
- Webアプリ開発者をターゲット(HTML/CSS/JS)
UI5による恩恵は莫大である。SAP UI5の詳細はこちらから。
全てを説明はしていないにせよ、基本的なガイドラインと背景については記載がされていたので、参考になるかもしれない。興味深かったのは、PPTファイルで、プロトタイピングKITを配布しているとう点、これは是非活用したい。