Microsoft design languageは、レガシーアプリケーションの時代からアプリケーションをとりまく環境が大きく変わったことに対応してきました。Metroでは「非同期処理によるUIのインタラクティブの変化」や「親指操作を主とするスモールスクリーンのUI操作の変化」、「ペンやタッチといった入力の変化」です。これらはバルマーが言うところの「Many screens and a cloud」に対応した大きなパラダイムシフトでした。GUIというコンテキストがUXに拡張された理由は、アプリケーションにこれらの環境の変化を取り込む必要があったからです。 そして、Build 2017でサティアが「Intelligent cloud and Intelligent edge」という大きなパラダイムシフトに対応することをデベロッパーに望んでいます。Metroが必要だったように、Modernアプリケーションのエクスペリエンスデザインには、HoloLensを含むiOSやAndroid、スクリーンレスなデバイスがAIやコグニティブをサービスとして利用できる環境に対応できるパターン&プラクティスや広汎なDesign principleが必要で、Microsoft design languageはそのひとつの解であると考えます。 […]
Metroをご存知の方は、当時のGUIというコンテキストがUXに拡張され、ユーザー体験を含むソフトウェアとの関わりという意味に変化したことを記憶していると思います。クラウドやIoTなどのファシリティが一通り揃った今、MicrosoftはいよいよHoloLensを含むiOSやAndroidなどのマルチデバイスに向けたUXのパターン&プラクティスを提唱しようとしています。これは、3Dデザインやゲームにまで及びAdobe社を巻き込んだ広汎なDesign principle (原則)になると予想できます。ここでは、このメトロデザイン第二弾について外観をご紹介します。 Metroを振り返る そもそも、なんで今デザインの話をしなきゃいけないのかというところから解説します。過去にレガシーアプリケーションが持つUIがスマートフォンや大きなスクリーンに対応するのが困難になってきた時期がありました。その際、Modern UIのパラダイムとしてMicrosoftがコードネームMetroを発表しました(これが今のProject Neonに引き継がれます)。この際にMicrosoft design languageは広く認知されるようになりました。このような理由で、Microsoft Fluent Designは「Microsoft Design Language 2」、「metro2」と呼ばれることがあります。 まずはMetroの復習です。1分強のビデオです。 https://www.youtube.com/watch?v=aebfjzdLxJA […]
In previous article, I described that a Flyout control composed by a TextBox control and a […]
When you provide any list, it’s items would not enough for user, not always. Accordingly, a […]
「タイルとバッジのライフサイクル実装(Azure)編」で、Microsoft Azure Notifications Hubの通知を受けとる方法を解説しました。ここでは、Microsoft Azure Mobile Serviceを使って認証を行う方法を解説します。この認証により、クライアントがタグを登録してチャンネルを開いた後、タグをMicrosoft Azure Mobile Service側で管理することができます。タグをMicrosoft Azure Notifications Hubでチャンネル単位で管理するのでなく、Microsoft Azure Mobile Serviceでユーザー単位で管理するための準備です。Microsoft […]
Windows 8.1からタイルの種類も増え、アプリケーションの独自性や機能などを表現しやすくなったので、ユーザー環境のスクリーンサイズやタイルサイズを考慮したデザインの自由度が向上しました。しかしながら、タイルやバッジの設置は、アプリケーション作成時に1度しか作業しない為おろそかになりがちな作業です。バッジとタイルのこれらの設定は、工数やフローの複雑さに大きく関係するため、開発者はMicrosoft Azure Notification Hubsを含めた設計に関わる必要があります。 ・通知内容と通知先アプリケーションの目的や機能と通知内容、通知先、ライフサイクルの関係 バッジを含むタイルのUIデザインを設計する際は、通知のライフサイクルを考慮することが重要です。さまざまな検討要素が依存関係を持つからです。 検討要素はいくつかありますが、「ロゴとアプリケーション名のタイルへの配置」「ライブ・タイル、セカンダリ・タイル、サイズ」「バッジの必要性」「 通知内容と通知先、ライフサイクル」「アプリケーションの目的と機能」は依存関係にあることに注意してください。 そのため、まず「アプリケーションの目的と機能」が明確化されている必要があります。業務アプリケーションであっても要求仕様が明確化されていないケースが多々あり、要件定義が機能の羅列になっているケースすらあります。要求仕様は、要求仕様書のような大げさなものである必要はありません。まずは「バッジが必要かどうか」を検討できる範囲の要求仕様が明確化されていればいいわけです。要求が明確化されていてれば、続いて「セカンダリ・タイルが必要かどうか」を検討できますし、「ライブ・タイルを使うべきかどうか」「どのタイル・サイズが適切か」が明確化されていきます。そうすることで「バッジ・タイルの設計、ロゴの配置」ができるようになるので、検討の順番が重要だということを理解してください。 通知の必要性:そのアプリケーションには個別通知や全体通知が必要ですか? アプリケーションに認証機能がある&パーソナライズが目的である → 個別通知が必要 アプリケーションの機能拡張やデータの追加・更新など → […]
「タイルとバッジのライフサイクル実装(クライアント)編」で、セカンダリ・タイルをアプリケーションバーの[ピン止め]ボタンから作成する処理の解説を行いました。ここでは、Microsoft Azureからの通知を受け取る方法を解説します。サンプルを動かすためには、ここでの解説に則って、Micorosoft Azure上で各種定義を行う必要があります。公式サンプルやドキュメント「Azure Notification Hubs によるユーザーへの通知」、「通知ハブの使用」も併せて参考にしてください。 サンプル・ソリューション ・開発環境 サンプル・ソリューションはユニバーサル・アプリで作成してあります。ただし、ここでの解説の内容は非ユニバーサル・アプリにも応用ができる解説を行っています。 Windows Store account Azure account (get free […]
タイルとバッジのライフサイクル設計編での設計に従って、アプリケーションにセカンダリ・タイルやバッジが必要と判断された場合は、それらのガイドラインに則って「ロゴとアプリケーション名のタイルへの配置」を実装していきます。バッジの実装についてはタイルとバッジのライフサイクル運用(タグの管理)編で解説しています。 サンプル・ソリューション ・タイルとバッジのガイドライン バッジが必要なアプリケーションは、ライブタイルが必要なアプリケーションである可能性があります。バッジのみで更新情報を伝えられる場合はライブタイルを使用する必要はありませんが、情報の更新頻度が高くユーザーがひとつひとつの通知を確認する可能性よりも、一定の間隔の複数の通知を確認する可能性が高いような場合などは、MSDNのタイルとバッジのガイドラインに則って、ライブタイルの使用を検討します。 ◆ライブ・タイルのアンチパターン ×コンテンツ提供が目的でない機能提供中心のアプリ(電卓など) ×最新の状態以外の通知が無いアプリ ×広告やスパムを通知する ×ブランド名やロゴをアニメーションのアイテムのひとつに指定する ライブ・タイルは、複数の通知を連続して表示します。たとえば、ユーザーがYoutubeの複数のチャンネルの更新情報に関心がある場合は、それぞれのチャンネルの更新情報を連続して表示します。このケースで、特定のチャンネルを別途スタートメニューに表示したい場合はセカンダリ・タイルを使います。前述のタイルとバッジのライフサイクル設計編での設計がしっかりなされている場合、ライブ・タイルのサイズ設計は、セカンダリ・タイルのサイズ設計と同じになります。セカンダリ・タイルのガイドラインのサイズ設計をチェックしてください。 ◆ワイドまたは大サイズのタイルやロゴを使う場合の目安 ✔通知を使う ✔要約通知のみではない ✔詳細情報をタイルに表示する ✔週に1回以上の通知が見込まれる ✔タイルの通知表示が複数ある […]
There is should be considered that Windows Store app is used in touch devices and mobile […]
Using Office 365 authentication in Windows 8 store apps Office 365 の認証を利用したストア・アプリケーション SharePointの認証の基礎から学びたい SharePoint 2013 の認証の学習ロードマップAuthentication […]