Apple Engine

Apple, iPhone, iOS, その周辺のことについて

Touch Bar について

今回発表された MacBook Pro の一部機種で搭載される Touch Bar。
新しいデバイスというよりはキーボードの延長という形。

www.youtube.com

www.youtube.com

どちらかというと、従来のアプリというよりも、
フルスクリーンのアプリでの使用を想定したものだと思われる。

タッチ操作のないラップトップでフルスクリーンにした際、
画面を操作してナビゲーションを出すしかなくなる。
そう考えるとキーボード側に可変の UI を表示して、
画面上にコントローラーやナビゲーションを表示しない方がスマートだろう。

また、macOS アプリの UI の都合上、上部にメニューバーやツールバーがあり、カーソルの移動量が多い。
それを軽減するための新しい UI だとも考えられるのではないかと思われる。

 

開発

macOS Human Interface Guidelines によると、開発者作成できる部分が決められている。
画像でいうと、App region と呼ばれるところがアプリの領域である。

f:id:x67x6fx74x6f:20161028171540p:plain

設計する際には以下を守れとのこと。

  • メインの画面に対応するコンテキストで Touch Bar の機能を作成すること。 アプリがどのようなレベルで使われるか検討市実装すること。
  • キーボードとトラックパッドの延長としてタッチバーを使用すること。セカンダリディスプレイとしては使わず、ユーザーの注意を疎外させないこと。
  • 可能な限り大きさや色など物理キーボードと外観を同じようにすること。
  • Touch Bar でのみ使用できる機能を公開しない。すべての人が Touch Bar を使用できるわけではない
  • すぐに結果を出す制御の機能を提供すること。複数のステップを行うものも Popovers などを使用し最小限に抑える
  • ユーザーインタラクションに即に対応させる。メイン画面のコンテンツが何らかの動作で更新状態でも、タッチバーはユーザーのタッチに応答する必要がある。
  • 可能であれば Touch Bar で動作開始したものは、Touch Bar の操作内で完了してもよい。タッチバーよりも複雑な UI のコントロールを必要としない場合、キーボードやトラックパッドを使用するように切り替える必要はない。
  • よく知られているキーボードショートカットの動作をタッチバーを使用しない。すべて選択、選択解除、コピー、切り取り、貼り付け、アンドゥ、リドゥー、新規、保存、閉じる、プリント、終了など。また、ページアップ、ページダウンなどのキーボードナビゲーションを Touch Bar のコントロールを含めるべきではない。
  • メイン画面上にあるコントロールを Touch Bar にある場合は両方同じ状態にさせる。メイン画面で無効になっている場合は Touch Bar でも無効にさせる。
  • Touch Bar の動作をメイン画面にミラーリングさせない。Touch Bar のボタンをタップし、オプションのリストが表示されても、メイン画面では表示させない。

 

アクセシビリティ

目や耳に障害がある方、他の障害を持つユーザーのための広範なアクセシビリティ機能を提供する。Voice Over を使用した代替ラベルなど。

 

カスタマイズ

固有のニーズを満たすため、必要であれば Touch Bar コントロールの追加、削除、および並べ替えなどカスタマイズできるようにする。

 

フルスクリーンアプリ

Touch Bar の機能はメイン画面と同じようにするべきだが、フルスクリーン表示で隠れてしまう関連機能は Touch Bar のみに機能が表示されてもよい。

 

ジェスチャーで使用できるもの
  • タップ
  • タッチ&ホールド
  • スワイプ(横方向のみ)
  • マルチタッチ

iPhone 等と同様。
マルチタッチはピンチなどに使用できるとのこと。

 

アニメーション

アニメーションは避ける。キーボードの延長なのでボタンに注目させて作業を阻害させない。

 

上品かつ最小限の色を使用する。
Touch Bar は物理キーボードに外観が類似しているべきで、
着色するなら単色の色が最適。

P3 の色空間をサポートし、デフォルトでは肯定的な表現として青、否定的な表現として赤が割り当てられている。

f:id:x67x6fx74x6f:20161028171907p:plain

文字ベースだと分かりづらいので、アイコンも使用可能とのこと。
NSImageNameTouchBarAddTemplate で「+」マークなど、システムアイコンも用意されている。

 

レイアウト

Touch Bar 表示領域は 幅 2170px、高さ 60px。 Retina なので、本来のサイズは半分の 1085px × 30px。

f:id:x67x6fx74x6f:20161028171925p:plain

基本は 1370px が開発者の使用できる場所で配置するフォントは San Francisco か macOS のシステムフォントを使う。

ボタンレイアウト割愛

 

アイコン

当然ながらアイコンも Retina。 Touch Bar の高さの表示領域限界の 60px で作ることもできるが、44px の正方形に入るようにする。
44px が領域となっているが 36px 内に収まるようにして、残りはマージンとして用意されている。

画像のような時計やメール、新規作成など。

f:id:x67x6fx74x6f:20161028171948p:plain

 

2px。状況によっては 3px も試す。
角丸半径は線に対して 1px 足す。(訳間違っているかも?)

 

標準 UI
  • ボタン
  • トグルボタン
  • 候補リスト(予測変換など)
  • 文字ピッカー(絵文字など)
  • カラーピッカー
  • ポップバー(ボタンを押すとさらにコントロールが表示される)
  • スクラバー(日付や写真の選択)
  • セグメントコントロール
  • シェアボタン
  • スライダ

実機を見た方が早いので詳細は割愛。