2015年1月30日金曜日

SAP Fiori (UI5) ガイドラインとプロタイピングKIT(PPT)の配布


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を配布しているとう点、これは是非活用したい。