JP2011232861A - ユーザインタフェース設計装置 - Google Patents
ユーザインタフェース設計装置 Download PDFInfo
- Publication number
- JP2011232861A JP2011232861A JP2010100869A JP2010100869A JP2011232861A JP 2011232861 A JP2011232861 A JP 2011232861A JP 2010100869 A JP2010100869 A JP 2010100869A JP 2010100869 A JP2010100869 A JP 2010100869A JP 2011232861 A JP2011232861 A JP 2011232861A
- Authority
- JP
- Japan
- Prior art keywords
- component
- effect
- attribute
- display
- editing
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
【解決手段】設計対象装置のUIを構成する部品の表示要素を示す表示属性、及び当該部品の配置属性を有する表示部品データ101と、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、部品関連属性に登録された部品の表示属性又は配置属性を時間経過に伴って変更して得られる表示上の効果を定義した効果属性、及び、効果部品の配置属性を有する効果部品データ102とを有し、部品関連属性設定部107が、効果部品を配置した画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する。
【選択図】図1
Description
また、ユーザインタフェース設計者は、例えば、タイムラインエディタ等の表示効果編集部を使用して、ユーザインタフェース部品に表示効果を付与する。タイムラインエディタでは、ユーザインタフェース部品が持つ各種属性値について、時間に沿った変化を定義することで表示効果を付与する。
タイムラインオブジェクトは、テンプレートとして用意されており、オブジェクト間の継承を行うことで、回転しながら移動するといった複合的な運動を3次元オブジェクトに与えることができる。
このような編集方式では、ユーザインタフェース設計者が頭の中で思い描く動きを、時刻とその時刻での属性値という2次元空間に、頭の中や手作業等で分解し、手作業にて定義していく必要がある。
このため、バネの動きや重力を模擬した動き等の複雑な表示効果を定義するには、特殊なスキルが必要である上、スキルを持っていても、その作業は煩雑であるという問題があった。
ユーザから右ボタンの入力があれば右方向にバネ状の動きをしながら当該ユーザインタフェース部品が移動し、上ボタンの入力があれば上方向にバネ状の動きをしながら当該ユーザインタフェース部品が移動し、他の方向に対しても類似な動きをするユーザインタフェースを例に挙げる。このようなユーザインタフェースでは、それぞれの入力イベントのイベントハンドラごとにそれぞれの方向に応じたバネ状の動きを個別に定義していく必要がある。
また、この工数の問題は、画面内に登場するユーザインタフェース部品の個数が増える程に顕著になる。
図1は、この発明の実施の形態1によるユーザインタフェース設計装置の構成を示すブロック図である。図1において、実施の形態1によるユーザインタフェース(以下、UIと呼ぶ)設計装置は、表示部品101及び効果部品102を格納するUI部品格納部103、配置属性編集部104、効果属性編集部105、表示属性編集部106及び部品関連属性設定部107を備える。
上書きしない属性の値は、型の値を継承する。また、型の属性値は、配置属性編集部104によって編集することができる。なお、型の属性値を変更すると、その値は、その型を継承する全ての実体の属性にも反映される。
上書きしない属性の値は、型の値を継承する。また、型の属性値は、配置属性編集部104又は効果属性編集部105によって編集することができる。なお、型の属性値を変更すると、その値は、その型を継承する全ての実体の属性にも反映される。
例えば、配置属性編集部104が、表示部品101又は効果部品102の型を一覧する部品パレットと、左上隅を原点とする座標系を持ったレイアウト部分とを有する、GUI(Graphical User Interface)を提供する。ここで、上記レイアウト部分には、UI部品格納部103から読み出されたUI部品が、その配置属性に従って視覚化される。
この場合、UI設計者が、部品パレットからレイアウト部分に部品の型をマウス操作でドラッグしてドロップすると、これを受けて、配置属性編集部104が、UI部品を実体化させる。このUI部品は、UI部品格納部103に追加することができる。
また、このようにしてUI部品格納部103追加したUI部品を、ユーザがマウス操作でレイアウト部分上で移動させたり、広げたりすることで、当該UI部品の配置属性を視覚的に編集することができる。
また、効果属性編集部105は、入力装置を用いて、予め定義された効果属性の値からリストボックスの形式で選択するGUIを提供することにより、選択した効果属性の値を効果部品102の効果属性として設定するようにしてもよい。
さらに、プログラミング言語で効果属性を記述する場合のために、テキストエディタを装備してもよい。
また、効果属性編集部105は、入力装置を用いて、表示部品101の表示属性を編集するGUIを提供することにより、ラベル部品であれば、表示文字列を編集でき、画像部品であれば、表示画像のファイル名を編集することができる。
例えば、部品関連属性設定部107は、UIの実行時に適切なタイミングで、繰り返しUI部品格納部103に格納されている全ての各表示部品101及び効果部品102の配置属性を読み出す。その都度、任意の各効果部品102を配置する画面上の領域が、表示部品101又は別の効果部品102が配置される画面上の領域を包含する場合には、任意の効果部品102の部品関連属性として、上述の表示部品101又は別の効果部品102を登録する。
具体的には、表示部品101が、効果部品102の座標・幅・高さからなる領域の内側に存在し、かつその領域の外にはみ出さずに存在しており、さらにZ値を比較して効果部品102の上にあるかどうかを検査する。これらの条件を満たせば、当該効果部品102が当該表示部品101を領域的に包含していると判断し、当該効果部品102の部品関連属性として、領域的に包含している表示部品101を登録する。
同様にして、効果部品が別の効果部品を領域的に包含しているかどうかについても、上記と同様に検査を行い、一方が他方を領域的に包含している場合には、包含している側の部品関連属性として、領域的に包含されている効果部品を登録する。
また、部品関連属性に登録するUI部品が複数個あるときは、リスト形式で登録する。
また、表示部品101及び効果部品102を格納するUI部品格納部103は、上述のコンピュータが備える記憶装置(例えば、ハードディスク装置や外部記憶メディア等)あるいは上記コンピュータと通信接続可能な他のコンピュータの記憶装置に構築することができる。
図2は、表示部品のデータ内容の一例を示す図である。図2では、表示部品201で規定されるUI部品の名前が「画像1」であり、UI部品の型が「画像部品」である。また、配置属性として、配置座標(10,10)と幅20、高さ20が設定されており、表示属性として、表示要素となる画像部品のファイル名“/tmp/sample.bmp”が定義されている。
図3では、効果定義がプログラム形式で定義してあり、1〜2行目では、setLocationイベントの引数である座標を取得し、X座標の値をtargetXという変数に、Y座標の値をtargetYという変数にコピーしていることを示している。
また、3〜4行目では、部品関連属性に登録されているUI部品を1つ取得して、そのUI部品の現在の座標を、変数x,yにコピーしていることを示している。$partsとは、部品関連属性に登録されているUI部品の1つへの参照を示している。
5〜6行目では、現在の位置から移動先の位置までの距離の1/6だけ近づいた座標を算出し、7〜8行目で、再びUI部品にセットしている。
これにより、$partsで参照するUI部品が、最終到達座標に少しだけ近づく。
この処理を部品関連属性に登録されている全てのUI部品に対して繰り返し、さらに、これらの処理を適切なタイミングで繰り返すことで、部品関連属性に登録されているUI部品に対して最終到達座標に向かって徐々に近づいていくという表示効果を付与することができる。
図4は、部品関連属性設定部による処理の流れを示すフローチャートである。
先ず、実施の形態1によるUI設計装置が起動すると、部品関連属性設定部107が起動して、ステップST401の処理に進む。
続いて、部品関連属性設定部107は、ステップST401で読み出した効果部品102における部品関連属性の登録内容を全て取り除く(ステップST402)。
部品関連属性設定部107は、ステップST401でUI部品格納部103から読み出した効果部品102が、当該表示部品101を領域的に包含しているか否かを判定する(ステップST404)。各表示部品が、効果部品102の幅・高さからなる領域の内側に存在し、かつその領域の外にははみ出さずに存在し、さらに効果部品102の上にあるかどうかを検査する。これらの条件を全て満たしていれば、YESと判定する。そうでなければ、NOと判定する。これは、双方の配置属性から既存の方式を用いて容易に判定することができる。
また、未処理の効果部品102がなければ(ステップST407;NO)、ステップST401からステップST407までのループを終了する。
効果部品503は、setLocationイベントとその引数である最終到達座標を受け取ったのを契機として、部品関連属性に登録された部品に対して、回転しながら終着点に近づいていく、という効果属性が定義されている。
また、効果部品503は、画像部品502を領域的に包含しているため、効果部品503の部品関連属性には、画像部品502が登録されている。
一方、画像部品504は、どの効果部品にも領域的に包含されていないため、どの効果部品の部品関連属性にも登録されていない。
このように、従来では、表示部品における属性として付与していた表示効果を効果属性として分離し、この効果属性及び表示部品と同様の配置属性を有する効果部品を設けたので、効果部品の配置される領域の内側で、かつはみ出さずに、当該効果部品上に部品を配置するだけで、この効果部品に規定される表示効果を当該部品に付与することができる。
これにより、バネの動きや重力を模擬した動き等の複雑な動きの表示効果であっても、容易に、且つ、複数の部品に一括して表示効果を付与したUIを設計できる。
また、表示効果の付与対象のUI部品が多数であっても効果部品の配置領域に包含するだけで、一括して効果を付与することができる。
さらに、効果部品に重畳することで表示効果の付与を視覚的に認知できるため、効果部品の重畳し忘れを防ぐことができる。
図10は、この発明の実施の形態2によるUI設計装置の構成を示すブロック図である。図10において、図1と同一符号を付した構成部は同一又はこれに相当する機能を有するので説明を省略する。実施の形態2によるUI設計装置は、上記実施の形態1で図1を用いて説明した構成における部品関連属性設定部107の代わりに部品関連属性編集部1001を備える。
部品関連属性編集部1001は、効果部品102と表示部品101との間、効果部品間あるいは表示部品101間に論理的な親子関係を定義し、親となるUI部品の部品関連属性として子となるUI部品を登録する構成部である。
このように、部品関連属性編集部1001によって親子関係を定義するだけで、任意のUI部品を効果部品の部品関連属性に登録することができるため、効果部品102の画面上の領域に制限されることなく、当該効果部品102の効果付与の対象とすることができ、効果を付与する際の編集作業の自由度を飛躍的に高めることができる。
また、複数の表示効果を重畳する場合であっても、効果部品102を実際に重畳させる必要はなく、効果部品間の親子関係を結ぶだけで、子の効果部品には親の効果部品の効果が付与される。
従って、さらにその子のUI部品は、両方の効果部品の効果が重畳して付与されることから、重畳した効果を付与する自由度をさらに高めることができる。
これらによって、表示効果が付与されたUIを容易に実現でき、開発工数を抑制できるという、顕著な効果を奏するものである。
図11は、この発明の実施の形態3によるUI設計装置の構成を示すブロック図である。図11において、図1と同一符号を付した構成部は同一又はこれに相当する機能を有するので説明を省略する。実施の形態3によるUI設計装置は、上記実施の形態1で図1を用いて説明した構成に加えて、実行部1101を備える。
先ず、実行部1101が起動すると、視覚化部1103は、UI部品格納部103から表示部品101を配置属性のZ値の小さい方から順に読み出して、表示属性の内容と配置属性の値とを取得する。
例えば、視覚化部1103は、取得した表示属性の内容が画像ファイルであり、配置属性が座標(0,0)であると、当該画像ファイルをUI部品格納部103から読み出してビットマップに変換し、ビットマップの内容を表示装置1103aの画面上の座標(0,0)を示すメモリに転送することで、視覚化を行う。
また、イベント生成部1104は、別の装置からメッセージを受信した場合、そのメッセージ内容を引数とするシステムイベントを生成する。
さらに、イベント生成部1104は、タイマが発火した場合には、タイマイベントを生成する。また、UI部品がイベントの発生を指示した場合、内部イベントを生成する。
なお、アクションがプログラミング言語で記述されている場合、イベントディスパッチ部1105が、アクションを示すプログラミング言語を解釈して実行してもよい。
従って、効果部品の部品関連属性に登録されたそれぞれのUI部品に対して、効果が付与される。また、イベントディスパッチ部1105は、効果の付与完了後、終了条件を満たしていなければ、再び効果定義の処理を実行する。
なお、イベントディスパッチ部1105は、イベント発生時の処理を実行する上で、必要に応じてUI部品格納部103に格納した各UI部品の属性値を更新する。
実行部1101では、上述の処理が繰り返される。
Claims (3)
- 設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び前記設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、前記部品関連属性に登録された前記部品の前記表示属性又は前記配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、前記設計対象装置の画面上の前記効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを格納するUI部品格納部と、
前記表示部品データ及び前記効果部品データの配置属性を編集する配置属性編集部と、
前記効果部品データの効果属性を編集する効果属性編集部と、
前記表示部品データの表示属性を編集する表示属性編集部と、
前記配置属性編集部による配置属性の編集で、前記効果部品を配置した前記画面上の領域の内側で、かつはみ出さずに、当該効果部品上に他の部品が配置されると、当該部品を当該効果部品の部品関連属性に登録する部品関連属性設定部とを備えたユーザインタフェース設計装置。 - 設計対象装置のユーザインタフェースを構成する部品の表示要素を示す表示属性、及び前記設計対象装置の画面上の当該部品の配置座標及び大きさを示す配置属性を有する表示部品データと、表示効果を他の部品に与える効果部品と関連性のある部品が登録される部品関連属性、前記部品関連属性に登録された前記部品の前記表示属性又は前記配置属性を時間経過に伴って変更して得られる表示効果を定義した効果属性、及び、前記設計対象装置の画面上の前記効果部品の配置座標及び大きさを示す配置属性を有する効果部品データとを格納するUI部品格納部と、
前記表示部品データ及び前記効果部品データの配置属性を編集する配置属性編集部と、
前記効果部品データの効果属性を編集する効果属性編集部と、
前記表示部品データの表示属性を編集する表示属性編集部と、
前記効果部品を親とし、前記他の部品を子とする親子関係を定義して、当該部品関連属性の内容を編集する部品関連属性編集部とを備えたユーザインタフェース設計装置。 - 請求項1または請求項2記載のユーザインタフェース設計対象装置で設計したユーザインタフェースを実行する実行部を備えたユーザインタフェース設計装置。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2010100869A JP2011232861A (ja) | 2010-04-26 | 2010-04-26 | ユーザインタフェース設計装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2010100869A JP2011232861A (ja) | 2010-04-26 | 2010-04-26 | ユーザインタフェース設計装置 |
Related Child Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
JP2013233760A Division JP5772928B2 (ja) | 2013-11-12 | 2013-11-12 | ユーザインタフェース設計装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
JP2011232861A true JP2011232861A (ja) | 2011-11-17 |
Family
ID=45322134
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
JP2010100869A Pending JP2011232861A (ja) | 2010-04-26 | 2010-04-26 | ユーザインタフェース設計装置 |
Country Status (1)
Country | Link |
---|---|
JP (1) | JP2011232861A (ja) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2019244279A1 (ja) * | 2018-06-20 | 2019-12-26 | 三菱電機株式会社 | ユーザインタフェース装置、ユーザインタフェース設計装置、ユーザインタフェース装置の制御方法、およびユーザインタフェース装置の画面設計方法 |
US11687169B2 (en) | 2011-11-30 | 2023-06-27 | Ricoh Company, Ltd. | Image display control device, image display system, and computer program product |
Citations (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JPH0981769A (ja) * | 1995-09-14 | 1997-03-28 | Hitachi Ltd | アニメーション作成システム |
-
2010
- 2010-04-26 JP JP2010100869A patent/JP2011232861A/ja active Pending
Patent Citations (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JPH0981769A (ja) * | 1995-09-14 | 1997-03-28 | Hitachi Ltd | アニメーション作成システム |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US11687169B2 (en) | 2011-11-30 | 2023-06-27 | Ricoh Company, Ltd. | Image display control device, image display system, and computer program product |
WO2019244279A1 (ja) * | 2018-06-20 | 2019-12-26 | 三菱電機株式会社 | ユーザインタフェース装置、ユーザインタフェース設計装置、ユーザインタフェース装置の制御方法、およびユーザインタフェース装置の画面設計方法 |
JPWO2019244279A1 (ja) * | 2018-06-20 | 2020-12-17 | 三菱電機株式会社 | ユーザインタフェース装置、ユーザインタフェース設計装置、ユーザインタフェース装置の制御方法、およびユーザインタフェース装置の画面設計方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10255044B2 (en) | Method and system for modifying deployed applications | |
Ahmed et al. | Model-based user interface engineering with design patterns | |
US7590680B2 (en) | Extensible robotic framework and robot modeling | |
US20170286068A1 (en) | Development support system | |
Nancel et al. | Causality: A conceptual model of interaction history | |
Dörner et al. | Content creation and authoring challenges for virtual environments: from user interfaces to autonomous virtual characters | |
US9753620B2 (en) | Method, system and computer program product for facilitating the prototyping and previewing of dynamic interactive graphical design widget state transitions in an interactive documentation environment | |
Eng | Qt5 C++ GUI programming cookbook | |
JP2013058201A (ja) | コンピュータ支援設計のシステム内でオブジェクトのアセンブリを設計するための方法およびシステム | |
Bernaschina et al. | Online model editing, simulation and code generation for web and mobile applications | |
Victoria et al. | liteITD a MATLAB Graphical User Interface (GUI) program for topology design of continuum structures | |
Eng | Qt5 C++ GUI Programming Cookbook: Practical recipes for building cross-platform GUI applications, widgets, and animations with Qt 5 | |
Collignon et al. | Model-driven engineering of multi-target plastic user interfaces | |
Dixon et al. | Pixel-based methods for widget state and style in a runtime implementation of sliding widgets | |
JP2011232861A (ja) | ユーザインタフェース設計装置 | |
JP5772928B2 (ja) | ユーザインタフェース設計装置 | |
Iulia-Maria et al. | Best practices in iPhone programming: Model-view-controller architecture—Carousel component development | |
CN106445539A (zh) | 一种基于IFML的Android开发建模方法 | |
JP2004062435A (ja) | 機構モデルシミュレータ、プログラム | |
US20110307224A1 (en) | System and Method for Machine Engine Modeling | |
CN106126213A (zh) | 一种基于IFML的Android开发建模方法 | |
Gill | Using React Native for mobile software development | |
Twigg-Smith et al. | Dynamic Toolchains: Software Infrastructure for Digital Fabrication Workflows | |
Chatty | Supporting multidisciplinary software composition for interactive applications | |
Morgan et al. | Modelling the semantics for model-driven interactive visualizations |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A621 | Written request for application examination |
Free format text: JAPANESE INTERMEDIATE CODE: A621 Effective date: 20120927 |
|
A131 | Notification of reasons for refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A131 Effective date: 20130521 |
|
A977 | Report on retrieval |
Free format text: JAPANESE INTERMEDIATE CODE: A971007 Effective date: 20130522 |
|
A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20130716 |
|
A02 | Decision of refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A02 Effective date: 20130903 |