Windows Phone アプリ(&Win8アプリ)を作っていただいている開発者の皆様へ伝えたい、よりよいアプリにするための8のUIに関する提案(我流)

#wpdev_jp #win8dev_jp まぁ、じつは Advent Calendar ネタに考えてた話ですが、自分の中の整理がまとめきれず別のネタにしましたが、ひとまず今段階での思いを本年中に出しちゃいます。 from 2014 to 2015 いよいよ Windows 10 がリリースされると、Windows Phone を取り巻く環境も一変します。それぞれのストアやアプリの距離は今のUniversal Application よりも、より近いものになるでしょうし、そうなれば多くのアプリが自分のまあ割りに現れてくるはず。長く使ってもらえるアプリケーションとして高い品質を実現するために、改めてチェックしてほしいところを並べてみました。 尚、これはあくまでも高橋の個人的な持論です。間違っているかもしれません。そして時にアプリ開発者には自分のアプリを否定されて嫌な思いをされるかもしれません。そのあたりはご了承ください。 ー 【UX】背景が黒のうちはβ版 まずこの話、ゲームは除きます。といってもゲームほど背景にこだわるものもないのでずっと全部意味もなくまっ黒というのはむしろないでしょう。 背景黒のいいアプリってありますか(あったらごめんなさい、ぜひ教えてください)? Facebook, Twitter, LINE, Amazon, メジャーなアプリで背景が黒いもの(暗いもの)はありません。特に文字を中心としたコンテンツを表示するものは。特にコンテンツを読ませるようなアプリについてはほぼ背景城といっていいのではないかと思います。Windows のモダン(フラット)デザインは境界線さえも排除するスタイル。暗い背景に明るい線は必要以上に太さを与えます。これはモダンデザインと対極にある方向。 じゃぁ、標準アプリはどうなの?というと確かにカレンダーアプリやMusic/Video アプリは背景黒ですね。というかテーマに合わせて変わるようになっています。ただ、その中でもコンテンツを読ませるようなものの代表格であるメールアプリでは、ちゃんと最後にメールを読む画面では背景が白になっていることがわかります。 もちろん背景が黒でも良いと思うものもあります。それはメディアを大きく表示するもの。黒背景はほとんど少しだけの余白になるので。グラフィックツールも一般向けなら黒でない方がいい。それに合わせてアイコンの色も決まっています。   ではなぜ?Visual Studio の標準テンプレートは背景が黒なのか?考えたことがありました。そして自分なりの結論。黒で作っている間はそのアプリケーションはまだ完成品ではないんです。プロジェクトと作ってちゃちゃっとテストする間は黒でもいいんです。むしろ正式版出ないから黒でいいんです。そして本格的に開発を始めたらちゃんと背景を考えてつけるのです。だからむしろVisual Studio の標準テンプレートは黒背景でいいんだろうなー。って。    ー  【UX】情報を面で切る これもデザインなところですが、必然的にどういったものにするのか決まれば決まってくるは無し。 例えば、LINEの会話は吹き出しのような形で区切られています。これは基本的に面でコンテンツを区切っています。Facebook もグレーの背景に白い線やブルーのメニューなど面で区切ります。メールアプリも各ペインは面で区切ります。色をほとんど使わない、そんなときだけ線で区切るデザインになると思いますが、そのときも許されるのは極細の線だけ。 場合によっては線で切らずに空間を使って分ける場合もあります。 強すぎる線は、やっぱりバランスを崩しやすい。黒い背景だとどうしてもそれが出やすい。なので、使うときも注意が必要。そして大事なことは、それをアプリ全体でちゃんと徹底すること。画面によって変わってしまうので意図がない限り不安にさせてしまいます。 ー 【UX】コントロールを使ってたらスタイルを作る SDKにはたくさんの標準コントロールがあって、勿論ゲームでもなければ標準コントロールを全く使わない、なんてことはないでしょう。もちろん、ほぼ画面全部が古スクラッチで描画していてコントロールはリトライの時だけ、なんてゲームみたいなパターンは除いて、標準コントロールを使っていてスタイルを定義していないのはナンセンス。(リンクボタンとかしか使っていないのものぞく)   スタイルを定義していないってことは標準コントロールのデザインをそのまま使っているということ。ダメですよ、それ。リストを使えばリストの定義でスタイル(テンプレートを使うと自動的にスタイルが定義されてテンプレートが組み込まれます)テキストボックスだって、ボタンだってちゃんと画面デザインをすればそれぞれのデザインが決まります。それをちゃんと統一するにはスタイルの定義は必須。 そのまえに基本的にちゃんと基本的な色を決めたらそれを定義したほうがいいんですよね。そういう意味ではスタイルとリソースの定義も必要です。 ー 【UX】アニメーションの使いどころ アニメーションを使うところ難しいと思っている人は意外に多いです。そんな人はシンプルにこう覚えればいいです。…

0

9:16 x 3 ≒ 15:9 ≒ 16:9

#win8dev_jp 基本的に最近の Windows 8 の画面の縦横比は 16:9 が多い。 1366×768 しかり、1600×900 はもちろん、1920x1080もそう。Windows 8 というよりも、タブレットやPC,スマフォが基本この比率が多くなっている。 横方向1画面を縦で表示した場合 さて、Windows 8 は基本横で使うことが多いのでこうなる。 ではこれをそのま縦で使った時はどうなるか? たいていの場合、縦が画面に合わせられて横が長くなることになる。 縦方向1画面を横方向に表示した場合 逆に縦前提で考えてみるとこうなるわけですが、 これを横画面で表示するとこうなります。 縦方向に縮尺されて並べるとだいたい3枚分くらいになるんですよね。 けいさんするとこういう感じ 9:16 x 3 ≒ 15:9。 そんなわけで、初めからこんなイメージで画面設計をして、縦でも横でもうまく最適な表示を検討するのもありですね。 なので実はハブが便利だったりする そんなわけで横長の画面に縦長のページ的な概念にすると、縦横両対応の画面が作りやすいわけでそういう意味で Windows 8.1 から登場したハブコントロールはうまく使うと便利なパネルとなる。 悩みは尽きない とはいえ、Windows 8.1 だとこんなことも考えないといけないわけですがw これもハブパネルだったらひとまず大丈夫だったりする。

0

【Blen道】あれはどうやって作ってるのか?

#win8dev_jp #wpdev_jp 今週はいろいろ忙しそうな予感だけはしている高橋です。 実際のアプリはどうやってレイアウトしているのか?実はパネルの特徴、コントロールの特徴を知っているとある程度は推測できる。多分慣れている人は、アプリを見るとたいがいどう作れば推測できるものである。 そんなわけで、あくまで私の想像で分析してみた。 Finance 美しい標準アプリの代表格がFinanace である。たぶん、8.1からハブコントロールの可能性もあるが。 この手の多くは全体を StackPanel でスタックさせ、それを ScrollViewer で1画面に収めているパターン。 いちばん左はImageを固定サイズで表示している。ただし、Gridを間に挟んでいる。なぜなら文字を「重ねて」表示させるため。 2番目のアイテムはGridでしょう。拡大図のように上下の文字やボタンの入った領域は固定長で、画面サイズに合わせてグラフのサイズが変わる。下のボタンや右上の情報表示は「等幅」なのでおそらくGrid。タイトル下の数字表示は左寄せStackPanelでしょう。 3つ目と右から2つ目は提携のListViewで動的にアイテムを増やしやすい形になっている。 右から3つ目はおそらくUserControl を2つ並べている。アイテム1つずつはまとめて1つのオブジェクトとしてクリックできる形で、解像度に合わせて表示項目が変わるがスクロールはしない。おそらくUserControl でStackPanel かもしれない。 Facebook 新しく、Windows 8.1 で公開されたFacebook 公式アプリ。これをひも解いてみる。 典型的な3ペインタイプ。横幅は固定なので、Gridで全体を構成しているでしょう。 タイトル部でGridを切り、左右のペインも固定幅でグリッドを切る。軽量化のために固定幅にすることは大事。 各ペインの中は、StackPanel を ScrollViewer でくるむ形になっている。 各項目はすべてListView でやっているだろう。記事もすべてその中で管理していると思われる。 中央のボタンはとうはばなのでおそらくGrid化と。 どう見る? つまり3つのプロセスがあることがわかる。 画面内に何の情報を配置するのか考える 画面のどこにどのように配するのか考える 適切なパネルやコントロールを選択する。 オブジェクトの選択には、アイテムの数、動的に変化するか、重ねるのか重ならないのか、等幅か左右寄せか、で必然と決まってくる。 またBlend  出てないよ!てへ♪

0

【Blen道】ListViewと StackPanel

#win8dev_jp #wpdev_jp 週末はちょっと調子よくなくてまだ引っ張ってる高橋です。 モダンスタイルアプリケーションをBlendで作り上げてく(テク)Blen道。 さて、Grid の続きを書こうかと思ったのですが、会社帰りにいろいろ思案してると、パネルとしてのStackPanel をFeature すべきかな?とひらめく。で、使う場面を考えたときに、時々ListViewにしようかStackPanelにしようか?なんて考えたことがあったことを思い出した。 StackPanel とリスト 【Blen道】パネルを知る で書いたようにStackPanel は縦、ないし横にアイテムを並べくれるパネル。 これ、縦に並べて中に入れるものを横長にするとまるでリストのようになる。 ListViewかStackPanelか   さてどっちを使うか。見てわかるし誰でもわかるが、 データを表示するならListViewしかない。 いろんなスタイルのコンテンツを表示するならStackだ。 コンテンツの中身の一部をクリックしたりするならStackだ ListViewは1レコードで1つのアイテムとして扱ってしまう まぁ、見せるアイテムなのか、選ぶアイテムなのか? 型が一緒か・様々か、で選び方が変わる。   ListView StackPanel データソースとの連携 ◎ × 決まったフォーム ◎ × アイテムのクリック ◎ 反応なし 縦横切り替え △ ◎ さまざまなアイテム △ ◎ アイテムの入れ替え ◎ △ 考えた割には当たり前すぎる結果でした。   では問題 では、このUIはどっちを使う? 表示されているアイテムはほとんど同じ型ですが、一部ちょっと違う。そしてアイテムとしてセレクトできるものもあれば、できないものもある。 もしかしたら、これは StackPanel と ListViewの組み合わせとしてやってるかも。 赤い部分がStackPanel で、緑の部分がListView。こうすれば思い通りのUIが作れると思う。…

0

【Blen道】Gird に置く(管理をする)

#win8dev_jp #wpdev_jp 今日は上層部のミーティングで話して緊張してそのあと抜け殻な高橋です。 モダンスタイルアプリケーションをBlendで作り上げてく(テク)Blen道。 今回はGridをきっちり押さえます。 とは言ってもGridなんでできることなんて限られているんですけどね。 ■ Gridは実はシンプル 装飾系はシンプルで背景色(テクスチャ)の設定しかないです。枠も設定できないので、枠をつけたいときはBorderの力を借りるなどしないといけません。 Grid は自身の設定よりも、Gridの中におかれたもの設定が大事なんですよね。 ■ VerticalAlignment / HorizontalAlignment の設定 Grid での一設定は水平方向であれば、この4つの設定があります。プロパティで言うとことの Left:左から n ドット Center:センタリング Right:右から n ドット Stretch:左から n ドット&右から n ドット それがプロパティのレイアウトパネル:   ■ デザイン画面での設定 ちなみに、この設定は画面上のクリップでも設定できます。左のクリップをクリックすることに、連結が切れたりつながったりします。 この連結の状態で配置の設定を切り替えることもできますね。   右(下)クリップ=接続 右(下)クリップ=切断 左(上)クリップ=接続 Stretch Left(Top) 左(上)クリップ=切断 Right(Bottom) Center ちなみに、右クリップをON/OFF すると、左が連動して ON/OFF してしまいます。これは、Shift ないし Ctrl を押しながらで個別設定できます。 ちなみに、Stretch の場合、オブジェクトの幅/高さ が設定されるときにはそちらが優先され、挙動は…

0

Spotlight で使える?

#win8dev_jp 背景変えればいろいろ使えるホワイトボードアプリ。こんな背景どうですか?(ご自由にお使いください) たとえば黒板。 この場合はペンの色を白にするといいですね。 方眼紙   テニスコートとバスケットコート 何かを記入するもの なんとなくクラウディアさん

0

Go Metro ! 始動

#wp7jp #wddjp Zune、Windows Phone、XBOX、そして Windows。あらゆるプラットフォームに横断的に登場してきたこの UX フレームワークともいえる Metro。我々はこれを個々製品出は分けずに、横断的なエクスペリエンスを提供するためのプラットフォームとして、皆さんにご紹介をしていきたいと考えています。 ■ いうなればエクスペリエンスカットで日本から情報発信 そのためのポータルページが Facebook に開設された Go Metro ページです。 ■ Go Metro の役割 Metroにかかわる、様々な製品やイベント情報についてこの Go Metro ページを最優先に情報を公開していきます。勿論 Windows Phone の最新情報も Go Metroのページに乗せていきますよ。ってかイベントとかキャンペーンもこちらに載せていけばいいんだよね>うちのチーム All。 あえて Facebook のページを取ったのは情報更新の速さと、ユーザーの方の見やすさ(クライアントの多様性)、そして何よりも今後いろいろなところで皆さんからの意見なども取り入れていければと考えています。 ■ まずはご参加を まずは、皆さんのご参加をお待ちしています。 Let’s go Metro !

0

Silverlight 5

Silverlight 5についてのアナウンスが入った。 http://www.microsoft.com/silverlight/future/ ハードウェアデコード トリックプレイ(再生速度の変更) パワーマネージメント(バッテリーの状態がわかる) リモートコントロール データバインディングのデバッグなどの強化 WCF&RIA サービスの強化 3DモデルのサポートとGPUによるアクセレレーション ブラウザ外実行でのマルチウィンドウのサポート(子ウィンドウの生成が可能に) ブラウザ外実行でのP/Invokeのサポート 自動UIテスト プロファイル機能の向上 起動の高速化、IE9での高速化 64bitランタイム Silverlight 5 は2011年春にベータをリリースする予定。

0

UX は必ずしもリッチではない

UX:User Experience というとどうしてもリッチな画面、派手な画面、アニメーションや3Dといったイメージがある。 そしてそれらを前提として、業務アプリでは不要、といった論議がされている。 個人的にはこれは違うと思っている。UIを通じて作業が効率化したり、楽しかったりして、何らかのExperience を享受すればいいのではないかと思っている。それでUXかと。 もちろんそのためにUIがリッチになるというアプローチもあるが、リッチであることが大事ではなくて、ほしいところでほしい情報が入手できることや、いい意味で予想を裏切るフィードバックが得られること、が大事であると思っている。 パッと簡単に情報を見る方法としてグラフなどが使われているが、時にはエクセルのように数字に一覧のほうがいい場面もある。すべてをアニメーションのグラフにすればいいというものではない。ただケースバイケースでどちらの表記方法も選ぶならリッチな表現もできる技術が必要となる。 リッチなUIはUXの結果であることはあるが、UXの目的ではないと思う。そしてそこには必ずユーザーが主役として存在することを忘れてはならない。

2

Microsoft の Future Visition Montage ビデオ

これを見ていると Minority Reporty を始めて見た時のわくわく感があります。 1:54 楽しんでみてください♪ 過去に公開されたビデオのコラージュですけどね。

3