JP6854785B2 - ユーザインターフェース設計装置 - Google Patents

Description

本発明は、ユーザインターフェース（ＵＩ）の設計に用いられるユーザインターフェース設計装置に関する。

ＵＩ設計装置は、ＵＩの設計の対象の機器に表示される複数の画面を設計するために用いられる。

ＵＩ設計装置を用いて機器に表示される複数の画面が設計される場合は、表示される画面の切り替えの内容を表す状態遷移図を用いて機器に表示される複数の画面における画面遷移が設計されることが多い。状態遷移図は、画面遷移図とも呼ばれる。

状態遷移図を用いて画面遷移が設計される場合は、状態遷移図に表された各状態と各状態において表示される画面とを直感的に関連付けることができることが望まれる。このため、状態遷移図を用いて画面遷移が設計される場合には、状態遷移図に表された各状態と各状態において表示される画面の内容を表す画面レイアウトとをグラフィカルに関連付けることが望まれる。特許文献１に記載された技術は、その一例である。

特許文献１に記載された状態遷移作成装置においては、メイン画面に遷移状態図表示領域及びノード編集領域が設けられ、全てのノードが遷移関係とともに遷移状態図表示領域に縮小表示され、ユーザにより指定されたノードがノード編集領域に表示される（段落００３３及び００３４）。ノードは、ＧＵＩに使用される各画面である（段落００２３）。

特開２００７−１３３８１５号公報

上記の技術においては、各状態とひとつの画面レイアウトとが関連付けられるため、各状態とひとつの画面レイアウトとを関連付けることによっては表すことができないＵＩをグラフィカルに設計できなかった。例えば、ひとつの画面レイアウトにおける表示領域を切り替えることにより表示される画面を切り替えるＵＩをグラフィカルに設計できなかった。

本発明は、この問題を解決するためになされる。本発明が解決しようとする課題は、ひとつの画面レイアウトにおける表示領域を切り替えることにより表示される画面を切り替えるＵＩをグラフィカルに設計できるＵＩ設計装置を提供することである。

本発明は、ユーザインターフェース（ＵＩ）設計装置に向けられる。

ＵＩ設計装置においては、レイアウト編集部が、画面レイアウトを編集する。レイアウト編集部が編集を行うことにより作成された画面レイアウトは、レイアウト格納部に格納される。また、状態遷移図編集部が、状態遷移図を編集する。状態遷移図編集部が編集を行うことにより作成された状態遷移図は、状態遷移図格納部に格納される。

状態遷移図は、複数の状態をそれぞれ表す複数のオブジェクト、及び遷移元状態から遷移先状態への画面遷移を表す遷移線を含む。

状態遷移図編集部においては、状態配置部が、複数のオブジェクトを配置する。また、状態遷移接続部が、遷移元状態を表すオブジェクトと遷移先状態を表すオブジェクトとを遷移線により接続する。また、重畳レイアウト指定部が、レイアウト格納部に格納されている画面レイアウトの中から重畳画面レイアウトを指定する。また、表示枠設定部が、複数の状態において表示される表示領域をそれぞれ指定する複数の表示枠を重畳画面レイアウトに設定する。レイアウト重畳部は、状態遷移図を重畳画面レイアウトに重畳させて表示する。その際には、複数のオブジェクトがそれぞれ複数の表示枠とともに状態遷移図の設計要素として重畳表示される。

本発明によれば、複数の状態をそれぞれ表す複数のオブジェクト、及び遷移元状態から遷移先状態への画面遷移を表す遷移線を含む状態遷移図が作成され、複数の状態において表示される表示領域をそれぞれ指定する複数の表示枠が画面レイアウトに設定される。また、複数のオブジェクトがそれぞれ複数の表示枠とともに状態遷移図の設計要素として画面レイアウトに重畳して表示される。このため、画面レイアウトにおいて表示領域を切り替えることにより表示される画面を切り替えるＵＩをグラフィカルに設計できる。

この発明の目的、特徴、局面、及び利点は、以下の詳細な説明と添付図面とによって、より明白となる。

実施の形態１のユーザインターフェース（ＵＩ）設計装置を用いて作成される画面レイアウトの例を図示する模式図である。 実施の形態１のＵＩ設計装置を用いて設計されるＵＩに含まれるAudioメニュー画面、Radioメニュー画面及びSettingメニュー画面の例を図示する模式図である。 実施の形態１のＵＩ設計装置のハードウェア構成を図示するブロック図である。 実施の形態１のＵＩ設計装置を図示するブロック図である。 実施の形態１のＵＩ設計装置に表示される画面レイアウトの編集画面の例を図示する模式図である。 実施の形態１のＵＩ設計装置に表示される状態遷移図の編集画面の例を図示する模式図である。 実施の形態１のＵＩ設計装置に表示される状態遷移図の編集画面の例を図示する模式図である。 実施の形態２のＵＩ設計装置を図示するブロック図である。 実施の形態３のＵＩ設計装置を図示するブロック図である。 実施の形態３のＵＩ設計装置に表示される状態遷移図の編集画面の例を図示する模式図である。 実施の形態４のＵＩ設計装置を図示するブロック図である。 実施の形態４のＵＩ設計装置に表示される状態遷移図の編集画面の例を図示する模式図である。 実施の形態４のＵＩ設計装置を用いて設計されるＵＩに含まれるAudioメニュー画面及びRadioメニュー画面の例を図示する模式図である。

１ 実施の形態１
１．１ 設計されるユーザインターフェース（ＵＩ）
図１は、実施の形態１のＵＩ設計装置を用いて作成される画面レイアウトの例を図示する模式図である。図２は、実施の形態１のＵＩ設計装置を用いて設計されるＵＩに含まれるAudioメニュー画面、Radioメニュー画面及びSettingメニュー画面の例を図示する模式図である。

図１に図示される画面レイアウト１０００は、設計されるＵＩに内在する表示概念を表し、背景画像１０２０、Audioメニュー１０２１、Radioメニュー１０２２及びSettingメニュー１０２３を含む。背景画像１０２０は、海及び空を含む風景の画像である。Audioメニュー１０２１、Radioメニュー１０２２及びSettingメニュー１０２３の各メニューは、複数のメニュー項目を含む。

背景画像１０２０は、画面レイアウト１０００の全体に広がる。Audioメニュー１０２１は、背景画像１０２０に含まれる空に重ねて配置され、当該空に含まれる雲の周辺に配置される。Radioメニュー１０２２は、背景画像１０２０に含まれる空に重ねて配置され、当該空に含まれる太陽の周辺に配置される。Settingメニュー１０２３は、背景画像１０２０に含まれる海に重ねて配置される。Audioメニュー１０２１、Radioメニュー１０２２及びSettingメニュー１０２３は、分散して配置される。

図２（ａ）に図示されるAudioメニュー画面１１００は、雲を含む特徴的な部分１１２０、及びAudioメニュー１０２１を含む。Audioメニュー画面１１００は、これらを画面レイアウト１０００から切り出すことにより得られる。図２（ｂ）に図示されるRadioメニュー画面１１０１は、太陽を含む特徴的な部分１１２１、及びRadioメニュー１０２２を含む。Radioメニュー画面１１０１は、これらを画面レイアウト１０００から切り出すことにより得られる。図２（ｃ）に図示されるSettingメニュー画面１１０２は、海を含む特徴的な部分１１２２、及びSettingメニュー１０２３を含む。Settingメニュー画面１１０２は、これらを画面レイアウト１０００から切り出すことにより得られる。

実施の形態１のＵＩ設計装置を用いて設計されるＵＩは、Audioメニュー画面１１００、Radioメニュー画面１１０１及びSettingメニュー画面１１０２を含む。また、当該ＵＩは、Audioメニュー画面１１００、Radioメニュー画面１１０１及びSettingメニュー画面１１０２からなる画面群に含まれる一の画面から当該画面群に含まれる他の画面への画面遷移を含む。画面レイアウト１０００の全体は、Audioメニュー画面１１００、Radioメニュー画面１１０１及びSettingメニュー画面１１０２の各画面より大きい。当該各画面は、画面レイアウト１０００の全体ではなく画面レイアウト１０００の一部である。このため、一の画面から他の画面への画面遷移は、画面レイアウト１０００において表示領域の位置を切り替えることにより行われる。

背景画像１０２０が他の背景画像に置き換えられてもよい。Audioメニュー１０２１、Radioメニュー１０２２及びSettingメニュー１０２３からなるメニュー群が他のメニュー群に置き換えられてもよく、Audioメニュー画面１１００、Radioメニュー画面１１０１及びSettingメニュー画面１１０２からなるメニュー画面群が他のメニュー画面群に置き換えられてもよい。特徴的な部分１１２０，１１２１及び１１２２が他の特徴的な部分に置き換えられてもよい。

１．２ ＵＩ設計装置のハードウェア構成
図３は、実施の形態１のＵＩ設計装置のハードウェア構成を図示するブロック図である。

ＵＩ設計装置１２００は、パーソナルコンピュータ（ＰＣ）であり、図３に図示されるように、ＰＣ本体１２２０、モニタ１２２１、ポインティングデバイス１２２２及びキーボード１２２３を備える。ＰＣ本体１２２０は、処理装置１２４０及び記憶装置１２４１を備える。ポインティングデバイス１２２２は、マウス等を備える。処理装置１２４０は、中央処理装置（ＣＰＵ）、グラフィック処理装置（ＧＰＵ）等を備える。記憶装置１２４１は、ランダムアクセスメモリ（ＲＡＭ）、ハードディスクドライブ等を備える。ＵＩ設計装置１２００がこれらの構成要素以外の構成要素を備えてもよい。

処理装置１２４０は、記憶装置１２４１に記憶されたプログラムを実行する。これにより、ＰＣがＵＩ設計装置１２００として動作する。

ＵＩ設計装置１２００は、ポインティングデバイス１２２２及びキーボード１２２３に対して行われた操作に応じた処理を行い、モニタ１２２１に画面を表示する処理を行う。

ポインティングデバイス１２２２及びキーボード１２２３からなる入力装置が他の入力装置に置き換えられてもよい。モニタ１２２１からなる表示装置が他の表示装置に置き換えられてもよい。

１．３ ＵＩ設計装置の概略
図４は、実施の形態１のＵＩ設計装置を図示するブロック図である。

ＵＩ設計装置１２００は、図４に図示されるように、レイアウト編集部１３００、レイアウト格納部１３０１、状態遷移図編集部１３０２及び状態遷移図格納部１３０３を備える。ＵＩ設計装置１２００がこれらの構成要素以外の構成要素を備えてもよい。

レイアウト編集部１３００及び状態遷移図編集部１３０２は、記憶装置１２４１に記憶されたプログラムを処理装置１２４０が実行することにより実現される。レイアウト編集部１３００及び状態遷移図編集部１３０２の一部又は全部がプログラムを実行しないハードウェアにより実現されてもよい。レイアウト格納部１３０１及び状態遷移図格納部１３０３は、記憶装置１２４１により実現される。

レイアウト編集部１３００は、画面レイアウトの編集画面をモニタ１２２１に表示し、ポインティングデバイス１２２２及びキーボード１２２３に対して行われた編集操作に従って画面レイアウトを編集する。画面レイアウトの編集画面には、編集中の画面レイアウトが表示される。したがって、ＵＩ設計装置１２００の操作者は、モニタ１２２１に表示された画面レイアウトの編集画面を見ながらポインティングデバイス１２２２及びキーボード１２２３に対して編集操作を行うことにより、画面レイアウトを編集することができる。レイアウト編集部１３００が編集を行うことにより作成された画面レイアウトは、レイアウト格納部１３０１に格納される。

状態遷移図編集部１３０２は、状態遷移図の編集画面をモニタ１２２１に表示し、ポインティングデバイス１２２２及びキーボード１２２３に対して行われた編集操作に従って状態遷移図を編集する。状態遷移図は、画面遷移図とも呼ばれ、機器に表示される画面の切り替えの内容を図示する。状態遷移図の編集画面には、編集中の状態遷移図が表示される。したがって、ＵＩ設計装置１２００の操作者は、モニタ１２２１に表示された状態遷移図の編集画面を見ながらポインティングデバイス１２２２及びキーボード１２２３に対して編集操作を行うことにより、状態遷移図を編集することができる。状態遷移図編集部１３０２が編集を行うことにより作成された状態遷移図は、状態遷移図格納部１３０３に格納される。

また、状態遷移図の編集画面においては、編集中の状態遷移図が画面レイアウトに重畳して表示される。これにより、画面レイアウト及び編集中の状態遷移図がグラフィカルに関連付けられ、ＵＩ設計装置１２００の操作者が画面レイアウト及び編集中の状態遷移図を同時に参照できる。編集中の状態遷移図が画面レイアウトに重畳して表示された状態においては、編集中の状態遷移図を視認可能である。

１．４ 画面レイアウトの編集の詳細
レイアウト編集部１３００は、図４に図示されるように、部品配置部１３２０を備える。

部品配置部１３２０は、記憶装置１２４１に記憶されたプログラムを処理装置１２４０が実行することにより実現される。

部品配置部１３２０は、ポインティングデバイス１２２２及びキーボード１２２３に対して行われた配置操作に従って画面レイアウト内にＵＩ部品を配置する。したがって、ＵＩ設計装置１２００の操作者は、画面レイアウトの編集の際に、モニタ１２２１に表示された画面レイアウトの編集画面を見ながらポインティングデバイス１２２２及びキーボード１２２３に対して配置操作を行うことにより、画面レイアウト内にＵＩ部品を配置できる。

１．５ 画面レイアウトの編集画面
図５は、実施の形態１のＵＩ設計装置に表示される画面レイアウトの編集画面の例を図示する模式図である。

図５に図示される画面レイアウトの編集画面１４００は、領域１４２０及び１４２１を含む。

領域１４２０は、編集画面１４００の右側に表示され、編集ウインドウとなっている。領域１４２０には、編集中の画面レイアウト１４４０が表示される。編集中の画面レイアウト１４４０は、既に配置されたＵＩ部品１４６０，１４６１及び１４６２を含む。

領域１４２１は、編集画面１４００の左側に表示される。領域１４２１には、ＵＩ部品１４８０，１４８１，１４８２及び１４８３が表示される。領域１４２１へのＵＩ部品１４８０，１４８１，１４８２及び１４８３の表示は、部品配置部１３２０により行われる。

部品配置部１３２０は、ＵＩ部品１５００を選択し、選択したＵＩ部品１５００を領域１４２０内の領域内位置に配置する配置操作がポインティングデバイス１２２２及びキーボード１２２３に対して行われた場合に、選択されたＵＩ部品１５００を当該領域内位置に配置する。当該配置操作は、領域１４２１に表示されたＵＩ部品１４８０，１４８１，１４８２及び１４８３からＵＩ部品１５００を選択し、選択したＵＩ部品１５００を領域１４２１から領域１４２０内の領域内位置までドラッグ・アンド・ドロップする配置操作である。当該配置操作が他の配置操作に置き換えられてもよい。例えば、当該配置操作が、領域１４２１に表示されたＵＩ部品１４８０，１４８１，１４８２及び１４８３からＵＩ部品１５００を選択し、領域１４２０内の領域内位置をクリックする配置操作に置き換えられてもよいし、領域１４２０内の領域内位置を右クリックし、ＵＩ部品１５００を選択する配置操作に置き換えられてよい。後者の配置操作が採用された場合は、領域１４２１は不要である。

１．６ 状態遷移図の編集の詳細
状態遷移図編集部１３０２は、図４に図示されるように、状態配置部１３４０、状態遷移接続部１３４１、状態編集部１３４２及びレイアウト重畳部１３４３を備える。状態編集部１３４２は、表示枠設定部１３６０を備える。レイアウト重畳部１３４３は、重畳レイアウト指定部１３８０を備える。

状態配置部１３４０、状態遷移接続部１３４１、状態編集部１３４２、レイアウト重畳部１３４３、表示枠設定部１３６０及び重畳レイアウト指定部１３８０は、記憶装置１２４１に記憶されたプログラムを処理装置１２４０が実行することにより実現される。

状態遷移図編集部１３０２により編集される状態遷移図は、複数のオブジェクト及び遷移線を含む。複数のオブジェクトは、それぞれ複数の状態を表す。遷移線は、遷移元状態から遷移先状態への画面遷移を表す。遷移元状態及び遷移先状態は、複数の状態に含まれる。その具体例は、下述する。

状態配置部１３４０は、ポインティングデバイス１２２２及びキーボード１２２３に対して行われた配置操作に従って複数のオブジェクトを配置する。

状態遷移接続部１３４１は、ポインティングデバイス１２２２及びキーボード１２２３に対して行われた接続操作に従って遷移元状態を表すオブジェクトと遷移先状態を表すオブジェクトとを遷移線により接続する。

状態編集部１３４２は、ポインティングデバイス１２２２及びキーボード１２２３に対して行われた編集操作に従って複数のオブジェクトを編集し複数の状態の属性を編集する。

表示枠設定部１３６０は、ポインティングデバイス１２２２及びキーボード１２２３に対して行われた設定操作に従って複数の状態において表示される表示領域をそれぞれ指定する複数の表示枠を下述の重畳画面レイアウトに設定する。表示枠の位置は、重畳画面レイアウトから表示領域を切り取る位置を示す。複数の表示枠のサイズは、機器に表示される画面のサイズと同じサイズに固定されている。設定された複数の表示枠の位置は、状態遷移図格納部１３０３に格納される。したがって、状態遷移図格納部１３０３は、設定された複数の表示枠の位置を示すデータを記憶する。

重畳レイアウト指定部１３８０は、ポインティングデバイス１２２２及びキーボード１２２３に対して行われた指定操作に従ってレイアウト格納部１３０１に格納されている画面レイアウトの中から重畳画面レイアウトを指定する。

レイアウト重畳部１３４３は、編集中の状態遷移図を、指定された重畳画面レイアウトに重畳させて表示する。このとき、複数のオブジェクトがそれぞれ複数の表示枠の位置に配置された状態で重畳表示が行われる。

１．７ 状態遷移図の編集画面
図６及び図７は、実施の形態１のＵＩ設計装置に表示される状態遷移図の編集画面の例を図示する模式図である。図７は、図６の第２のオブジェクトの付近を拡大して図示している。

図６及び図７に図示される状態遷移図の編集画面１６００は、領域１６２０及び１６２１を含む。

領域１６２０は、状態遷移図の編集画面１６００の右側に配置され、編集ウインドウとなっている。領域１６２０には、編集中の状態遷移図１６４０及び重畳画面レイアウト１６４１が表示される。編集中の状態遷移図１６４０は、重畳画面レイアウト１６４１に重ね合わせて表示される。重畳画面レイアウト１６４１は、背景に表示される。編集中の状態遷移図１６４０は、その手前に表示される。

状態遷移図１６４０は、第１のオブジェクト１６６０、第２のオブジェクト１６６１及び遷移線１６６２を含む。第１のオブジェクト１６６０及び第２のオブジェクト１６６１は、それぞれ状態１及び状態２を表す。遷移線１６６２は、状態１から状態２への画面遷移を表し、第１のオブジェクト１６６０と第２のオブジェクト１６６１とを接続する。

第１のオブジェクト１６６０及び第２のオブジェクト１６６１は、それぞれ第１の表示枠１６８０及び第２の表示枠１６８１を含み、それぞれ第１の表示枠１６８０及び第２の表示枠１６８１の位置に配置される。

領域１６２１には、オブジェクト１７００が表示される。領域１６２１へのオブジェクト１７００の表示は、状態配置部１３４０により行われる。

重畳レイアウト指定部１３８０は、レイアウト格納部１３０１に格納されている画面レイアウトの中から重畳画面レイアウト１６４１を指定する指定操作がポインティングデバイス１２２２及びキーボード１２２３に対して行われた場合に、重畳画面レイアウト１６４１を指定する。レイアウト重畳部１３４３は、指定された重畳画面レイアウト１６４１を領域１６２０の背景に設定する。

状態配置部１３４０は、オブジェクト１７２０を選択し、選択したオブジェクト１７２０を領域１６２０の領域内位置に配置する配置操作がポインティングデバイス１２２２及びキーボード１２２３に対して行われた場合に、選択されたオブジェクト１７２０を当該領域内位置に配置する。当該配置操作は、領域１６２１に表示されたオブジェクト１７００からオブジェクト１７２０を選択し、選択したオブジェクト１７２０を領域１６２１から領域１６２０の領域内位置までドラッグ・アンド・ドロップする配置操作である。上述のＵＩ部品１５００の配置操作が他の配置操作に置き換えられてもよいのと同様に、当該オブジェクト１７２０の配置操作が他の配置操作に置き換えられてもよい。

状態遷移接続部１３４１は、第１のオブジェクト１６６０と第２のオブジェクト１６６１とを接続する操作がポインティングデバイス１２２２及びキーボード１２２３に対して行われた場合に、第１のオブジェクト１６６０と第２のオブジェクト１６６１とを遷移線１６６２により接続する。当該接続操作は、第１のオブジェクト１６６０を選択し、ＵＩ設計装置１２００を遷移線接続モードに設定し、ＵＩ設計装置１２００が遷移線接続モードに設定されている間に第１のオブジェクト１６６０を第２のオブジェクト１６６１上までドラッグ・アンド・ドロップする接続操作である。ＵＩ設計装置１２００を遷移線接続モードに設定するためには、キーボード１２２３に設けられた特定のキーが押下される。当該接続操作が他の接続操作に置き換えられてもよい。例えば、当該接続操作が、第１のオブジェクト１６６０の周辺に表示された遷移線１６６２を表すシンボルを選択し、選択したシンボルを第２のオブジェクト１６６１上までドラッグ・アンド・ドロップする接続操作に置き換えられてもよい。キーボード１２２３に設けられた特定のキーが押下された場合にＵＩ設計装置１２００が遷移線接続モードに設定されるのではなく、「遷移線で接続」というメニュー項目が選択された場合にＵＩ設計装置１２００が遷移線接続モードに設定されてもよい。

表示枠設定部１３６０は、第１の表示枠１６８０及び第２の表示枠１６８１を設定する操作がポインティングデバイス１２２２及びキーボード１２２３に対して行われた場合に、それぞれ第１の表示枠１６８０及び第２の表示枠１６８１を設定し、それぞれ第１の表示枠１６８０及び第２の表示枠１６８１を領域１６２０に表示する。第１の表示枠１６８０及び第２の表示枠１６８１は、矩形状であり、それぞれ第１のオブジェクト１６６０及び第２のオブジェクト１６６１の内部に配置される。第１の表示枠１６８０及び第２の表示枠１６８１は、それぞれ状態１において表示される表示領域１７４０及び状態２において表示される表示領域１７４１を囲み、それぞれ表示領域１７４０及び１７４１を明示する。第１の表示枠１６８０及び第２の表示枠１６８１の位置は、状態遷移図格納部１３０３に格納される。

１．８ 画面レイアウトの編集と状態遷移図の編集との分離
ＵＩ設計装置１２００においては、作成された画面レイアウトがレイアウト格納部１３０１に格納され、作成された状態遷移図が状態遷移図格納部１３０３に格納される。したがって、画面レイアウト及び状態遷移図は、互いに独立して保存され、互いに独立して編集することができる。

また、ＵＩ設計装置１２００においては、重畳レイアウト指定部１３８０は、レイアウト格納部１３０１に格納されている画面レイアウトの中から重畳画面レイアウトを指定するにすぎず、レイアウト格納部１３０１に格納されている画面レイアウトのコピーを取り込んで状態遷移図格納部１３０３に重畳画面レイアウトとして格納することはしない。

これらにより、画面レイアウト及び画面遷移を並行して開発することができ、ＵＩの設計に要する工期を短縮することができる。例えば、以下のような開発の流れを採用することにより、ＵＩの設計に要する工期を短縮することができる。

まず、画面レイアウトの開発設計者が、画面内のオブジェクトの配置を実施する。

続いて、画面レイアウトの開発設計者及び画面遷移の開発担当者が、画面内のオブジェクトの配置を用いて、それぞれ画面レイアウトの開発及び画面遷移の開発を並行して実施する。すなわち、画面レイアウトの開発設計者が、画面内の表示内容の充実化及び表示ロジック設計を実施し、画面遷移の開発担当者が、それと並行して、画面遷移のロジック設計を実施する。

これにより、画面レイアウトの開発設計者と画面遷移の開発担当者とを互いに分離して並行開発を実施することができる。

これに対し、特許文献１に記載された技術においては、状態遷移図を用いた画面遷移の記述、及び状態に対応する画面レイアウトの記述が、同一のエディタ上で編集される。また、保存されたデータにおいても、画面遷移に関する要素、及び画面レイアウトに関する要素が統合される。このため、画面レイアウトの開発担当者と画面遷移の開発担当者とを互いに分離して並行開発を実施することができない。

１．９ 実施の形態１のＵＩ設計装置の利点
特許文献１に記載された技術に代表される、複数の状態の各状態とひとつの画面レイアウトとが対応付けられる技術によれば、各状態に対して画面の全体を示す画面レイアウトしか設定することができない。このため、表示される画面のサイズより大きいサイズを有する画面レイアウトにおいて表示領域を切り替えることにより表示される画面を切り替えるＵＩを、状態遷移図を用いて設計することができない。

これに対して、ＵＩ設計装置１２００によれば、複数の状態をそれぞれ表す複数のオブジェクト、及び遷移元状態から遷移先状態への画面遷移を表す遷移線を含む状態遷移図が作成され、複数の状態において表示される表示領域をそれぞれ指定する複数の表示枠が画面レイアウト設定される。また、複数のオブジェクトがそれぞれ複数の表示枠の位置に配置された状態で状態遷移図が画面レイアウトに重畳して表示される。このため、表示される画面のサイズより大きいサイズを有する画面レイアウトにおいて表示領域を切り替えることにより表示される画面を切り替えるＵＩを、状態遷移図を用いてグラフィカルに設計することができる。

また、ＵＩ設計装置１２００によれば、状態遷移図に含まれる設計要素であるオブジェクトを単なる概念ではなく画面遷移が実行される際の表示制御にも利用することができる。このため、ＵＩを効率的に設計することができる。

２ 実施の形態２
図８は、実施の形態２のＵＩ設計装置を図示するブロック図である。

図８に図示される実施の形態２のＵＩ設計装置２２００は、図４に図示される実施の形態１のＵＩ設計装置１２００と同じく、レイアウト編集部１３００、レイアウト格納部１３０１、状態遷移図編集部１３０２、状態遷移図格納部１３０３、部品配置部１３２０、状態配置部１３４０、状態遷移接続部１３４１、状態編集部１３４２、レイアウト重畳部１３４３、表示枠設定部１３６０及び重畳レイアウト指定部１３８０を備える。ＵＩ設計装置２２００に設けられたこれらの構成要素の各々は、ＵＩ設計装置１２００に設けられた同名の構成要素と同様に動作しうる。

ただし、ＵＩ設計装置２２００においては、ＵＩ設計装置１２００と異なり、状態遷移図編集部１３０２が、遷移動作変換部２３４４をさらに備える。

遷移動作変換部２３４４は、遷移元状態から遷移先状態への画面遷移を表す遷移線により遷移元状態を表すオブジェクトと遷移先状態を表すオブジェクトとが接続されている場合に、遷移線を、画面遷移が実行される場合の動作を規定する第１の情報に変換する。変換により得られた第１の情報は、状態遷移図格納部１３０３に格納される。したがって、状態遷移図格納部１３０３は、第１の情報を示すデータを記憶する。

第１の情報は、遷移元状態において表示される表示領域の位置を示す遷移元座標、及び遷移先状態において表示される表示領域の位置を示す遷移先座標を含む。遷移元座標及び遷移先座標は、画面レイアウトにおける座標であり、それぞれ遷移線の始点及び終点の位置を反映する。遷移元座標及び遷移先座標は、ＵＩ設計装置２２００を用いて設計されたＵＩにおいて画面遷移が実行される場合に遷移元座標により示される位置から遷移先座標により示される位置へ向かって表示領域が動くアニメーションを実現するために用いることができる。

遷移元座標及び遷移先座標としては、それぞれ遷移元状態及び遷移先状態において表示される表示領域を囲む表示枠の左上の座標が用いられる。表示枠の左上の座標が他の座標に置き換えられてもよい。例えば、表示枠の左上の座標が表示枠の中心の座標に置き換えられてもよい。

ＵＩ設計装置２２００は、ＵＩ設計装置１２００の利点と同じ利点を有する。

加えて、ＵＩ設計装置２２００によれば、状態遷移図に含まれる設計要素である遷移線を単なる概念ではなく画面遷移が実行される際のアニメーションの表示制御にも利用することができる。このため、ＵＩを効率的に設計することができる。

３ 実施の形態３
図９は、実施の形態３のＵＩ設計装置を図示するブロック図である。

図９に図示される実施の形態３のＵＩ設計装置３２００は、図４に図示される実施の形態１のＵＩ設計装置１２００と同じく、レイアウト編集部１３００、レイアウト格納部１３０１、状態遷移図編集部１３０２、状態遷移図格納部１３０３、部品配置部１３２０、状態配置部１３４０、状態編集部１３４２、レイアウト重畳部１３４３、表示枠設定部１３６０及び重畳レイアウト指定部１３８０を備える。ＵＩ設計装置３２００に設けられたこれらの構成要素の各々は、ＵＩ設計装置１２００に設けられた同名の構成要素と同様に動作しうる。

また、ＵＩ設計装置３２００は、図８に図示される実施の形態２のＵＩ設計装置２２００と同じく、遷移動作変換部２３４４を備える。ＵＩ設計装置３２００に設けられた遷移動作変換部２３４４は、ＵＩ設計装置２２００に設けられた遷移動作変換部２３４４と同様に動作しうる。

ただし、ＵＩ設計装置３２００は、ＵＩ設計装置１２００及び２２００と異なり、状態遷移接続部１３４１に代えて拡張状態遷移接続部３３４１を備える。また、ＵＩ設計装置３２００においては、ＵＩ設計装置１２００及び２２００と異なり、状態遷移図編集部１３０２が遷移軌跡設定部３３４５をさらに備える。

ＵＩ設計装置３２００に設けられた拡張状態遷移接続部３３４１は、ＵＩ設計装置１２００に設けられた状態遷移接続部１３４１の機能を拡張した状態遷移接続部であり、状態遷移接続部１３４１と同様に動作しうるとともに、遷移線の形状を可変に設定可能である。設定される遷移線の形状は、任意であり、直線状でなくてもよく、折れ線状、曲線状であってもよい。

遷移軌跡設定部３３４５は、遷移元状態から遷移先状態への画面遷移を表す遷移線により遷移元状態を表すオブジェクトと遷移先状態を表すオブジェクトとが接続されている場合に、遷移線の形状を、画面遷移が実行される場合の動作を規定する第２の情報に変換する。変換により得られた第２の情報は、状態遷移図格納部１３０３に格納される。したがって、状態遷移図格納部１３０３は、第２の情報を示すデータを記憶する。

遷移線は、画面遷移が実行される際の表示領域の位置の軌跡を示す。第２の情報は、遷移元状態と遷移先状態との間の過渡状態において表示される表示領域の位置を示す過渡状態時座標を含む。過渡状態時座標は、遷移線の始点及び終点以外の中間点の位置を反映する。過渡状態時座標は、ＵＩ設計装置３２００を用いて設計されたＵＩにおいて画面遷移が実行される場合に過渡状態時座標により示される位置を経由して表示領域が動くアニメーションを実現するために用いることができる。過渡状態時座標により表される第２の情報が、過渡状態時座標以外により表される第２の情報に置き換えられてもよい。例えば、過渡状態時座標により表される第２の情報が、過渡状態時座標を算出する数式に置き換えられてもよい。当該数式は、遷移線の形状を示す。

過渡状態時座標としては、過渡状態において表示される表示領域を囲む表示枠の左上の座標が用いられる。表示枠の左上の座標が他の座標に置き換えられてもよい。例えば、表示枠の左上の座標が表示枠の中心の座標に置き換えられてもよい。

続いて、設定された遷移線の形状ごとに第２の情報の例を説明する。

設定された遷移線の形状が折れ線状である場合は、第２の情報は、遷移線の各頂点の位置を反映する過渡状態時座標を含む。これにより、遷移線の始点の位置を反映する位置から遷移線の頂点の位置を反映する位置を順次に経由して遷移線の終点の位置を反映する位置まで表示領域が動くアニメーションを実現することができる。

設定された遷移線の形状が曲線状である場合は、第２の情報は、遷移線の形状を表す数式を含む。これにより、アニメーションの開始からの経過時間に対応する過渡状態時座標が数式から計算され、遷移線の始点の位置を反映する位置から遷移線上の中間点に対応する位置を順次に経由して遷移線の終点の位置を反映する位置まで表示領域が動くアニメーションを実現することができる。

図１０は、実施の形態３のＵＩ設計装置に表示される状態遷移図の編集画面の例を図示する模式図である。

図１０に図示される状態遷移図の編集画面３６００の領域３６２０には、第１のオブジェクト３６６０、第２のオブジェクト３６６１及び遷移線３６６２を含む状態遷移図３６４０が表示されている。

拡張状態遷移接続部３３４１は、第１のオブジェクト３６６０と第２のオブジェクト３６６１とを領域３６２０内の領域内位置を経由して接続する接続操作がポインティングデバイス１２２２及びキーボード１２２３に対して行われた場合に、第１のオブジェクト３６６０と第２のオブジェクト３６６１とを領域内位置を経由する遷移線３６６２により接続する。当該接続操作は、第１のオブジェクト３６６０を選択し、ＵＩ設計装置３２００を遷移線接続モードに設定し、ＵＩ設計装置３２００が遷移線接続モードに設定されている間に領域３６２０内の領域内位置をクリックし、第２のオブジェクト３６６１をダブルクリックする接続操作である。ＵＩ設計装置３２００を遷移線接続モードに設定するためには、キーボード１２２３に設けられた特定のキーが押下される。遷移線３６６２の作成は、領域内位置がクリックされるごとに進められる。ＵＩ設計装置１２００と同様に、当該接続操作が他の接続操作に置き換えられてもよい。例えば、「遷移線で接続」というメニュー項目が選択された場合にＵＩ設計装置３２００が遷移線接続モードに設定されてもよい。

第１のオブジェクト３６６０と第２のオブジェクト３６６１とが遷移線３６６２により接続された場合は、画面遷移が実行される際に、空に含まれる雲の周辺から、海、及び空に含まれる鳥の周辺を順次に経由して、空に含まれる太陽の周辺まで表示領域が移動するアニメーションを表示して画面の切り替えを行うことができる。

ＵＩ設計装置３２００は、ＵＩ設計装置１２００の利点と同じ利点を有する。

加えて、ＵＩ設計装置３２００によれば、状態遷移図を構成する設計要素である遷移線を単なる概念ではなく画面遷移が実行される際のアニメーションの表示制御にも利用することができる。このため、ＵＩを効率的に設計することができる。

４ 実施の形態４
図１１は、実施の形態４のＵＩ設計装置を図示するブロック図である。

図１１に図示される実施の形態４のＵＩ設計装置４２００は、図４に図示される実施の形態１のＵＩ設計装置１２００と同じく、レイアウト編集部１３００、レイアウト格納部１３０１、状態遷移図編集部１３０２、状態遷移図格納部１３０３、部品配置部１３２０、状態配置部１３４０、状態遷移接続部１３４１、状態編集部１３４２、レイアウト重畳部１３４３及び重畳レイアウト指定部１３８０を備える。ＵＩ設計装置４２００に設けられたこれらの構成要素の各々は、ＵＩ設計装置１２００に設けられた同名の構成要素と同様に動作しうる。

ただし、ＵＩ設計装置４２００においては、ＵＩ設計装置１２００と異なり、状態遷移図編集部１３０２が表示枠設定部１３６０に代えて拡張表示枠設定部４３６０を備える。

ＵＩ設計装置４２００に設けられた拡張表示枠設定部４３６０は、ＵＩ設計装置１２００に設けられた表示枠設定部１３６０の機能を拡張した表示枠設定部であり、表示枠設定部１３６０と同様に動作しうるとともに、複数の表示枠のサイズを可変に設定可能である。設定された複数の表示枠の位置及びサイズは、状態遷移図格納部１３０３に格納される。したがって、状態遷移図格納部１３０３は、設定された複数の表示枠の位置及びサイズを示すデータを記憶する。

ＵＩ設計装置１２００においては、表示枠のサイズが固定されていたため、表示枠の位置のみが状態遷移図編集部１３０２に格納されるが、ＵＩ設計装置４２００においては、表示枠のサイズが固定されていないため、表示枠の位置及びサイズが状態遷移図編集部１３０２に格納される。

各表示枠のサイズは、機器に表示される画面のサイズから独立して設定することができる。このため、各表示枠のサイズは、表示したい範囲が表示枠に囲まれるように設定される。一方で、機器に表示される画面のサイズは、一定である。したがって、設定された各表示枠のサイズは、機器に表示される画面のサイズより大きい場合もあるし、機器に表示される画面のサイズと同じである場合もあるし、機器に表示される画面のサイズより小さい場合もある。表示枠のサイズが機器に表示される画面のサイズより大きい場合は、表示枠に囲まれる表示領域が縮小されてから機器に表示される。表示枠のサイズが機器に表示される画面のサイズと同じである場合は、表示枠に囲まれる表示領域が拡大又は縮小されることなく機器に表示される。表示枠のサイズが機器に表示されるサイズより小さい場合は、表示枠に囲まれる表示領域が拡大されてから機器に表示される。

図１２は、実施の形態４のＵＩ設計装置に表示される状態遷移図の編集画面の例を図示する模式図である。図１３は、実施の形態４のＵＩ設計装置を用いて設計されるＵＩに含まれるAudioメニュー画面及びRadioメニュー画面の例を図示する模式図である。

図１２に図示される状態遷移図の編集画面４６００の領域４６２０には、第１のオブジェクト４６６０、第２のオブジェクト４６６１及び遷移線４６６２を含む状態遷移図４６４０が表示されている。

第１のオブジェクト４６６０に含まれる第１の表示枠４６８０のサイズは、機器に表示される画面のサイズと同じである。第２のオブジェクト４６６１に含まれる第２の表示枠４６８１のサイズは、機器に表示される画面のサイズより大きい。第２の表示枠４６８１のサイズのこのような設定には、状態２において広い範囲を表示したいという操作者の意図が反映されている。

図１３（ａ）に図示されるAudioメニュー画面４４００には、第１の表示枠４６８０に囲まれる表示領域４７４０が拡大又は縮小されることなく表示される。

図１３（ｂ）に図示されるRadioメニュー画面４４０１には、第２の表示枠４６８１に囲まれる表示領域４７４１が縮小されてから表示される。

このような縮小の有無の違いにより、図１２に図示される状態遷移図の編集画面４６００に表示されるAudioメニュー４０２１のサイズは、図１２に図示される状態遷移図の編集画面４６００に表示されるRadioメニュー４０２２のサイズと同じであるが、図１３（ａ）に図示されるAudioメニュー画面４４００に表示されるAudioメニュー４０２１のサイズは、図１３（ｂ）に図示されるRadioメニュー画面４４０１に表示されるRadioメニュー４０２２のサイズより大きくなっている。

ＵＩ設計装置４２００は、ＵＩ設計装置１２００の利点と同じ利点を有する。

加えて、ＵＩ設計装置４２００によれば、画面レイアウトにおいて表示領域の位置及びサイズを切り替えることにより表示される画面を切り替えるＵＩを、状態遷移図を用いて設計することができる。

また、ＵＩ設計装置４２００によれば、状態遷移図を構成する設計要素である表示枠を単なる概念ではなく画面遷移が実行される際の表示制御にも利用することができる。このため、ＵＩを効率的に設計することができる。

なお、本発明は、その発明の範囲内において、各実施の形態を自由に組み合わせたり、各実施の形態を適宜、変形、省略することが可能である。

この発明は詳細に説明されたが、上記した説明は、すべての局面において、例示であって、この発明がそれに限定されるものではない。例示されていない無数の変形例が、この発明の範囲から外れることなく想定され得るものと解される。

１０００ 画面レイアウト、１１００，４４００ Audioメニュー画面、１１０１，４４０１ Radioメニュー画面、１１０２ Settingメニュー画面、１２００，２２００，３２００，４２００ ユーザインターフェース（ＵＩ）設計装置、１３００ レイアウト編集部、１３０１ レイアウト格納部、１３０２ 状態遷移図編集部、１３０３ 状態遷移図格納部、１３２０ 部品配置部、１３４０ 状態配置部、１３４１ 状態遷移接続部、１３４２ 状態編集部、１３４３ レイアウト重畳部、１３６０ 表示枠設定部、１３８０ 重畳レイアウト指定部、１４００ 画面レイアウトの編集画面、１６００，３６００，４６００ 状態遷移図の編集画面、１６４０，３６４０ 状態遷移図、１６４１ 重畳画面レイアウト、１６６０，３６６０ 第１のオブジェクト、１６６１，３６６１ 第２のオブジェクト、１６６２，３６６２ 遷移線、１６８０，４６８０ 第１の表示枠、１６８１，４６８１ 第２の表示枠、２３４４ 遷移動作変換部、３３４１ 拡張状態遷移接続部、４３６０ 拡張表示枠設定部。

Claims (7)

1. 画面レイアウトを編集するレイアウト編集部と、
   前記レイアウト編集部が編集を行うことにより作成された画面レイアウトを格納するレイアウト格納部と、
   複数の状態をそれぞれ表す複数のオブジェクト、及び遷移元状態から遷移先状態への画面遷移を表す遷移線を含む状態遷移図を編集する状態遷移図編集部と、
   前記状態遷移図編集部が編集を行うことにより作成された状態遷移図を格納する状態遷移図格納部と、
   を備え、
   前記状態遷移図編集部は、
   前記複数のオブジェクトを配置する状態配置部と、
   前記遷移元状態を表すオブジェクトと前記遷移先状態を表すオブジェクトとを前記遷移線により接続する状態遷移接続部と、
   前記レイアウト格納部に格納されている画面レイアウトの中から重畳画面レイアウトを指定する重畳レイアウト指定部と、
   前記複数の状態において表示される表示領域をそれぞれ指定する複数の表示枠を前記重畳画面レイアウトに設定する表示枠設定部と、
   前記複数のオブジェクトがそれぞれ前記複数の表示枠とともに前記状態遷移図の設計要素として前記重畳画面レイアウトに重畳して表示されるレイアウト重畳部と、
   を備える
   ユーザインターフェース設計装置。
2. 前記状態遷移図編集部は、前記遷移線を、前記画面遷移が実行される場合の動作を規定する第１の情報に変換する遷移動作変換部をさらに備え、
   前記状態遷移図格納部は、前記第１の情報をさらに格納する
   請求項１のユーザインターフェース設計装置。
3. 前記第１の情報は、前記遷移元状態において表示される表示領域の位置を示す遷移元座標、及び前記遷移先状態において表示される表示領域の位置を示す遷移先座標を含む
   請求項２のユーザインターフェース設計装置。
4. 前記状態遷移接続部は、前記遷移線の形状を可変に設定可能な拡張状態遷移接続部であり、
   前記状態遷移図編集部は、前記形状を、前記画面遷移が実行される場合の動作を規定する第２の情報に変換する遷移軌跡設定部をさらに備え、
   前記状態遷移図格納部は、前記第２の情報をさらに格納する
   請求項２又は３のユーザインターフェース設計装置。
5. 前記第２の情報は、前記遷移元状態と前記遷移先状態との間の過渡状態において表示される表示領域の位置を示す過渡状態時座標、又は前記過渡状態時座標を算出する数式を含む
   請求項４のユーザインターフェース設計装置。
6. 前記表示枠設定部は、前記複数の表示枠のサイズを可変に設定可能な拡張表示枠設定部である
   請求項１から５までのいずれかのユーザインターフェース設計装置。
7. 前記レイアウト編集部は、編集中の画面レイアウト内にユーザインターフェース部品を配置する部品配置部を備える
   請求項１から６までのいずれかのユーザインターフェース設計装置。

Images