|
Log In | Not a Member? |
Contact ADC
|
基本的なウィジェットの組み立て方法を理解している方は、自分のウィジェットに追加したい、より高度な機能について検討し始めることができます。先に進む前に、ウィジェットをユーザにどのように見せるかを考える必要があります。
一般的にいえば、ウィジェットのインターフェイスデザインには、CocoaやCarbonアプリケーションのように、Appleのヒューマンインターフェイスガイドラインの制約がありません。このような自由はありますが、従うべき基本的なソフトウェアデザインの原則はあります。本章では、ウィジェットの作成時に考慮すべきいくつかのガイドラインを示します。
注: 効果的なユーザインターフェイスのデザインの詳細については、『Apple Human Interface Guidelines』の「Human Interface Design Principles」をお読みください。
メインインターフェイスのデザインガイドライン
ウィジェットの裏面のデザインガイドライン
ウィジェットバーアイコン
その他のヒント
ウィジェットの表の面が、ウィジェットの主要な顔となります（ウィジェットは、その裏面に環境設定が表示されます）。ウィジェットの表の面は、ユーザが認識し、最も多くやり取りをする面です。
ウィジェットの表面をデザインするときには、次のガイドラインに従う必要があります：
ウィジェットのデザインは、ウィジェットの主要な目的がすぐに伝わることを主眼とする。
スペースを有効に使用する。役立つ情報のみを表示することを目指す。
情報を即座に表示する。Dashboardの表示／非表示の切り替えは速いので、コンテンツが表示されるまでユーザを待たせるのは、ユーザから見れば煩わしく、時間の無駄です。
ウィジェットが1つの独立した機能を持つようにデザインする。説明や設定を必要とするべきではありません。3つのことを行うウィジェットを作成するのではなく、それぞれが1つのことを行う3つのウィジェットを作成してください。これにより、個々のタスクが独立し、ユーザはそれぞれ自分に役立つものを選ぶことができます。
小さな画面用にウィジェットをデザインする。iBookの画面の解像度は1024×768ピクセルです。このため、善良な市民となって、他のウィジェットのためにスペースを残しておく必要があります。ユーザは一度に複数のウィジェットを開くので、画面スペースを独占してはなりません。さもなければ、サイズが実用的ではないという理由で、そのウィジェットは使われなくなります。
スクロールバーは慎重に使用する。ウィジェットが表示するデフォルトの情報は、最小限に抑え、スクロールが不要でなければなりません。しかし、ウィジェットの機能が多くの情報を提供する場合（たとえば辞書など）は、ウィジェット全体を小さくするために、スクロールバーを使用するのが賢明です。スクロールバーを必要としない、シンプルな表示のための環境設定を提供することを検討してください。
ウィジェットを区別できるような色を使用する。独自の配色にすることで、ユーザが使用したいときにウィジェットを素早く認識できることが保証されます。
派手な配色は避ける。対照的な色の使用は、ユーザに不快感を与えることがあります。1つのインターフェイスに赤、緑、紫の組み合わせではなく、同系色を使用するようにします。場合によっては、さまざまな目立つ色を取り入れることが適していることもありますが、ほとんどの場合は、単一の色空間の色に保つと、目に快適なウィジェットにすることができます。
はっきりとした読みやすいフォントを使用する。ユーザはウィジェットから素早く情報が得られることを期待しています。特別な外観を得るために読みやすさを犠牲するのは避けてください。代わりに、輪郭やコントロールにそのウィジェットの特徴を組み込むようにします。ラベルやコントロールには、Helvetica Neueのようなボールドのサンセリフ系フォントを使うよう心がけてください。
メインインターフェイスでのAquaコントロールの使用を避ける。Aquaコントロールは、ウィジェットの裏面にのみ使用するべきです。ウィジェットのメインインターフェイスには、Aquaコントロールを使用するのではなく、カスタムコントロールをデザインします。コントロールは、それが表現している対象と同様の外観と動作になるようにしてください。それがAquaコントロールではなくても、チェックボックスはチェックボックスのように見える必要があり、ボタンはクリック可能に見える必要があります （自分のデザインにメニューを追加する方法については、“調和したメニュー”を参照してください）。
ウィジェットの表面に宣伝を入れない。自分のウィジェットにブランドを表示するのは許容できることであり、重要でもありますが、宣伝はウィジェットの貴重なスペースを奪います。ユーザのDashboardに存在することが名誉なのです。ブランド情報、使用許諾情報、著作権表示など、ウィジェットの目的に不可欠でない情報には、ウィジェットの裏面を使用してください。
Info.plistキーのCloseBoxInsetXとCloseBoxInsetYを使って、ウィジェットのアートワークの左上に閉じるボタンを配置する。多くのウィジェットは縁の周辺が透明であるため、閉じるボタンのデフォルトの位置は、ウィジェットから外れて浮いているように見えることがあります。このため閉じるボタンがウィジェット上に位置するように移動する必要があります。これにより閉じるボタンとウィジェットの関係が分かります。
可能な場合にはペーストボード操作をサポートする。多くのユーザは、アプリケーション間で要素のコピーとペーストができるものと期待し、ウィジェットにも同じことを期待します。
必要に応じてドラッグアンドドロップをサポートする。ユーザは、ファイルなどのドラッグした項目をウィジェットにドロップできることを期待している場合があります。
可能な限り、標準的なグラフィックとコントロールを使用する。/System/Library/WidgetResources/ に、標準的なコントロールがいくつか提供されています：
情報ボタン（“裏面の表示”を参照）
ボタン（“Apple Glass Buttonサブクラス”を参照）
リサイズコントロール（“ライブリサイズ”を参照）
注: ウィジェットの裏面でのコントロールと要素の配置に関する指標については、『Apple Human Interface Guidelines』の「Layout Examples」を参照してください。
ウィジェットが設定を必要とする場合は、ウィジェットの裏面に環境設定を表示することができます。以下に、ウィジェットの裏面のデザインについてのヒントをいくつか示します：
環境設定や情報の表示にウィジェットの裏面を使っていることを示すには、情報ボタンのグラフィックを使用する。情報ボタンは “i” の文字と、カーソルが上にあると表示される円で構成されています。情報ボタンをクリックすると、反転のアニメーションが起動します。情報ボタンは、すべてのウィジェットで使用される標準であるため、ユーザはこのボタンが何を表し、これをクリックすると何が起きるかすぐに分かります。
情報ボタンは、可能な限り、ウィジェットの右下角に配置する。他の角でも問題ありませんが、ほとんどのユーザは、このボタンは右下角にあるものと想定しています。
反転のアニメーションは、ウィジェットの裏面を表示する場合にのみ使用する。裏面は、環境設定やユーザが関心を持つような重要な情報を表示するために使用します。アニメーションを使い過ぎると、ウィジェットはプロフェッショナルが作ったようには見えなくなってしまいます。
環境設定を表示するときにはAquaの要素を使用する。小型版のAquaスタイルのコントロールを使用するのが望ましいです。メインインターフェイスとは異なり、環境設定には標準のAquaコントロールを使用するべきです。Aquaコントロールは、ユーザになじみ深い標準的な外観と動作を提供します。ユーザはこれらを頻繁に扱うわけではなく、即座に使用できる必要があるため、これは有用な特色であるといえます。
「完了」（Done）ボタンを提供する。環境設定を完了したユーザが「完了」（Done）ボタンをクリックしてウィジェットを表面に戻せるようにします。ウィジェットの裏面のボタンにはすべて、/System/Library/WidgetResources/にあるボタン用グラフィックを使用してください。
ウィジェットの裏面には、より暗い、または地味な背景色を使用する。メインインターフェイスの背景色を再利用すると、どちらの面がメインインターフェイスなのか分かりにくくなるためお勧めしません。
必要であれば、ウィジェットの裏面には、使用許諾情報、ロゴ、最小限のヘルプ情報を表示する。メインインターフェイスの場合と同様に、ここに宣伝を配置するのは避けてください。
可能な限り、/System/Library/WidgetResources/にあるような標準的なグラフィックとコントロールを使用する。
ウィジェットは、ウィジェットバーにはアイコンとして表示されます。以下の寸法は、ウィジェットバーアイコンの標準的なサイズとシャドウを定義したものです：
本体：75ピクセル×75ピクセル
ドロップシャドウ：
不透明度は50%
水平方向からの角度は90度
オフセットは3ピクセル（ソースからの距離）
サイズは3ピクセル、ガウスブラー使用
ウィジェットのデザインと実装を行う際に、次のヒントを参考にしてください。
可能な限りJavaScriptを使用する。アニメーションとウィジェットのロジックはJavaScriptを使って実現できます。JavaScriptを使う方が実行速度が速く、メモリの使用量も少なくなります。
カスタムウィジェットとWeb Kitプラグインは慎重に使用する。プラグインを使用するとウィジェットは極端に複雑になるため、JavaScriptではタスクを実現できない場合に限りプラグインを使用するようにします。
Javaアプレット、Flashアニメーション、QuickTimeムービーの使用は避ける。これらは重く、かなりの量のメモリを占有します。
ウィジェットの背景はドロップシャドウを特徴にする傾向があります。以下の寸法は、ウィジェットの標準的なドロップシャドウを定義したものです：
不透明度は50%
水平方向からの角度は90度
オフセットは4ピクセル（ソースからの距離）
サイズは10ピクセル、ガウスブラー使用
先に述べたとおり、標準のAquaコントロールを使うのではなく、自分のウィジェットのデザイン全体にうまく溶け込む、固有のカスタムコントロールをデザインする必要があります。この文脈において、メニューを表示するのは一般的なことであり、やや特殊ですが難しい作業ではない実装を扱っています。
まず、Voicesサンプルコードにあるような、ポップアップメニューに似たカスタムコントロールをデザインする必要があります。
Aquaのポップアップメニューとここで使われているカスタムコントロールに共通の特徴に注目してください。すなわち、矢印アイコン、左揃えのテキスト、コントロールの境界を示す明確なアウトラインです。また、色の変化とウィジェットの背景との対比にも注目してください。これらが、自分自身のカスタムメニューコントロールを作成するときに考慮する必要のある項目です。
次の3つの要素（1つはここには示されていません）がこのメニューを機能させています。すなわち、ポップアップメニューを表す画像、現在のメニューオプションを示す1行のテキスト、そしてここには示されていませんが、オプションの選択に使われる実際のメニューを提供する、隠されている<select>ポップアップメニュー要素です。
ポップアップメニューをデザインしたら、次の3つの要素をHTMLで用意する必要があります。すなわち、デザインしたポップアップ画像、現在選択されているメニューオプションを示すテキスト要素、および実際のメニューを保持する<select>要素です。
<img class="popupMenuImage" src="Images/Menu.png" /> |
<div id="popupMenuText">Available Voices</div> |
<select id='popupMenu' onchange='popupChanged(this);'> |
<option value="One">One</option> |
<option value="Two">Two</option> |
</select> |
要素が整ったので、次にCSSを使ってこれらを配置します。最初に、メニュー画像とその上のテキストが配置されます。固定ピンは<select>要素であり、クリックされたときにメニューを提示します。これはテキストと画像の上に配置されますが、不透明度はゼロに設定されます。
.popupMenuImage { |
position:absolute; |
left: 28px; |
top: 169px; |
z-index: 18; |
} |
#popupMenuText { |
font: 13px "Helvetica Neue"; |
font-weight: Bold; |
color: white; |
text-shadow: black 0px 1px 0px; |
position:absolute; |
left: 44px; |
top: 176px; |
z-index: 19; |
} |
#popupMenu { |
position:absolute; |
top: 169px; |
left: 28px; |
width: 163px; |
height: 30px; |
opacity: 0.0; |
z-index: 20; |
} |
このようにすることで、カスタム画像はクリックされているコントロールのように見えますが、実際は、<select>がクリックを受け取り、そのメニューを表示させています。ポップアップメニュー自体は透明ですが、示されるメニューは不透明であるため問題ありません。
最後のコードでは、ユーザがメニュー内のオプションを選んだときに、カスタムポップアップメニューのテキストを変更しています。HTMLで、ポップアップの選択内容が変わると呼び出される関数が設定されています。この関数は、新しい選択内容を反映するようにメニューテキストを変更します。
function popupChanged(elem) |
{ |
var chosenOption = elem.options[elem.selectedIndex].value; |
document.getElementById("popupMenuText").innerText = chosenOption; |
// メニューの選択内容の変化を処理するほかのコード |
} |
多くのウィジェットには、そのウィジェットが表示しているコンテンツをユーザが検索できる、検索フィールドの機能があります。Web Kitは、ウィジェット用に標準的な検索フィールドの外見と動作を提供する、searchという<input>型の新しい型を提供しています。
<input type="search"> |
<input>要素のsearch型に加えて、この型が使われるときには次の属性を使用できます。
placeholder検索フィールドのプレースホルダテキストを指定できます。このテキストは検索フィールドにキーフォーカスがないときにフィールド内に表示され、フィールドが想定している入力の種類を示すラベル表示となる必要があります。
results保存される結果数を指定できます。保存された検索語は、検索フィールドの虫眼鏡をクリックしたときに表示されるメニュー上に現れます。
onsearchEnterキーまたはReturnキーを押したときに呼び出されるハンドラを指定できます。
incrementalこの属性を含めると、検索フィールドに1文字入力されるたびに、onsearchハンドラを呼び出すという意味になります。
onkeypress任意のキーを押したときに呼び出されるハンドラを指定できます。
多くのアプリケーションは、ユーザがある要素の上にカーソルを置いたときに表示されるヘルプタグを持っています。ウィジェットは、詳細説明が役立つと考えられるコントロールやそれ以外の要素へのヘルプタグを表示するべきです。要素のヘルプタグを指定するには、title属性を使います。
<div id="helloText" title="This is a helpful explanation of this element">Hello, World!</div> |
Mac OS X v.10.4、すなわち"Tiger"には、VoiceOverという新しい機能が追加されています。VoiceOverはシステム全体を対象とする画面読み上げ機能であり、視覚障害を持つユーザのために、現在のウインドウを音声で説明します。
VoiceOverで自分のウィジェットが正しく説明されるようにするには、作成時に次の2つのことを考慮する必要があります。
HTMLで、要素を論理的に構成する。ウィジェットに上下の向きがある場合は、対応するHTML要素は、必ずその向きを反映した順番になければなりません。同様に、ウィジェットが左から右へ情報を表示する場合は、左端の要素がHTML上で最初にあり、次の部分がファイル構造内でその後に続くようにします。
画像の説明にはalt属性を使う。VoiceOverは、ウィジェット内で画像を認識すると、これらを音声で読み上げます。
<img src="sun.png" alt="Sunny"> |
Last updated: 2006-08-07
 |
||
|
|
|
|
| ||
Get information on Apple products.
Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. | Terms of use | Privacy Notice |