(19)【発行国】日本国特許庁(JP)
(12)【公報種別】公開特許公報(A)
(11)【公開番号】P2022182124
(43)【公開日】2022-12-08
(54)【発明の名称】操作画面設計方法、操作画面設計装置および操作画面設計プログラム
(51)【国際特許分類】
G06F 3/0481 20220101AFI20221201BHJP
G06F 8/38 20180101ALI20221201BHJP
G06F 9/451 20180101ALI20221201BHJP
【FI】
G06F3/0481
G06F8/38
G06F9/451
【審査請求】未請求
【請求項の数】14
【出願形態】OL
(21)【出願番号】P 2021089470
(22)【出願日】2021-05-27
(71)【出願人】
【識別番号】000003997
【氏名又は名称】日産自動車株式会社
(74)【代理人】
【識別番号】100103850
【弁理士】
【氏名又は名称】田中 秀▲てつ▼
(74)【代理人】
【識別番号】100114177
【弁理士】
【氏名又は名称】小林 龍
(74)【代理人】
【識別番号】100066980
【弁理士】
【氏名又は名称】森 哲也
(72)【発明者】
【氏名】増田 哲郎
【テーマコード(参考)】
5B376
5E555
【Fターム(参考)】
5B376BC21
5B376BC43
5E555AA04
5E555BA01
5E555BB01
5E555BC01
5E555BC19
5E555CC19
5E555CC23
5E555DA01
5E555DB41
5E555DC19
5E555DC21
5E555DC25
5E555DC31
5E555DD02
5E555FA00
(57)【要約】
【課題】UIの操作画面設計において、テキストが挿入されるオブジェクトを操作画面に配置する際の操作を省力化する。
【解決手段】操作画面設計方法では、操作画面41に表示すべき第1オブジェクト45aを、操作画面上に配置する操作を受け付ける処理(S10)と、第1オブジェクトよりも先に操作画面上に配置されている第2オブジェクト45bと第1オブジェクトとの間、又は操作画面の端と第1オブジェクトとの間の間隔が第1の制約条件を満たすように、第1オブジェクトの配置位置を修正する処理(S16)と、第1オブジェクト内に表示されるテキストの入力を受け付ける処理と、テキストに応じて第1オブジェクトの大きさを調整する処理(S5)と、をコンピュータに実行させる。
【選択図】
図3
【特許請求の範囲】
【請求項1】
操作画面に表示すべき第1オブジェクトを、前記操作画面上に配置する操作を受け付ける処理と、
前記第1オブジェクトよりも先に前記操作画面上に配置されている第2オブジェクトと前記第1オブジェクトとの間、又は前記操作画面の端と前記第1オブジェクトとの間の間隔が第1の制約条件を満たすように、前記第1オブジェクトの配置位置を修正する処理と、
前記第1オブジェクト内に表示されるテキストの入力を受け付ける処理と、
前記テキストに応じて前記第1オブジェクトの大きさを調整する処理と、
をコンピュータに実行させることを特徴とする操作画面設計方法。
【請求項2】
前記第1オブジェクトの大きさを調整する処理の後に前記第1の制約条件を満たすように、前記第1オブジェクトの配置位置を修正する処理を、前記コンピュータに実行させることを特徴とする請求項1に記載の操作画面設計方法。
【請求項3】
前記第1の制約条件を満たさない場合のみ、前記第1オブジェクトの配置位置を修正する処理を前記コンピュータに実行させることを特徴とする請求項1又は2に記載の操作画面設計方法。
【請求項4】
前記第1の制約条件を満たさない場合、前記第1オブジェクトを強調表示する処理を前記コンピュータに実行させることを特徴とする請求項1~3のいずれか一項に記載の操作画面設計方法。
【請求項5】
前記テキストのフォントサイズ、及び前記第1オブジェクトの境界と前記テキストとの間の余白が、第2の制約条件を満たすように前記第1オブジェクトの大きさを調整することを特徴とする請求項1~4いずれか一項に記載の操作画面設計方法。
【請求項6】
前記第2の制約条件を満たすように前記テキストのフォントサイズを調整する処理を前記コンピュータに実行させることを特徴とする請求項5に記載の操作画面設計方法。
【請求項7】
前記第2の制約条件を満たさない場合のみ、前記テキストのフォントサイズを調整する処理を前記コンピュータに実行させることを特徴とする請求項5又は6に記載の操作画面設計方法。
【請求項8】
前記第2の制約条件を満たさない場合、前記テキスト又は前記第1オブジェクトを強調表示する処理を前記コンピュータに実行させることを特徴とする請求項6又は7に記載の操作画面設計方法。
【請求項9】
前記テキストの言語を変更した場合に、変更後の前記テキストのフォントサイズ及び前記第1オブジェクトの境界と前記変更後のテキストとの間の余白が、前記第2の制約条件を満たすように、前記第1オブジェクトの大きさ、又は前記テキストのフォントサイズを調整することを特徴とする請求項6~8のいずれか一項に記載の操作画面設計方法。
【請求項10】
前記テキストの言語を変更した場合に、変更後の前記テキストのフォントサイズ及び前記第1オブジェクトの境界と前記変更後のテキストとの間の余白が、前記第2の制約条件を満たすように、前記テキストを同義語に変更して字数を減少又は増加させることを特徴とする請求項6~8のいずれか一項に記載の操作画面設計方法。
【請求項11】
前記第1オブジェクトの大きさを調整した場合に、前記第1オブジェクトの大きさを手動で再調整することをユーザに促す通知を表示する処理を前記コンピュータに実行させることを特徴とする請求項1~10のいずれか一項に記載の操作画面設計方法。
【請求項12】
前記第1オブジェクトの位置を、前記操作画面上に設定された基準点に対して左右に反転させた場合に、前記第1の制約条件を満たすか否かを判定する処理を、前記コンピュータに実行させることを特徴とする請求項1~11のいずれか一項に記載の操作画面設計方法。
【請求項13】
操作画面に表示すべき第1オブジェクトを、前記操作画面上に配置する操作を受け付ける処理と、
前記第1オブジェクトよりも先に前記操作画面上に配置されている第2オブジェクトと前記第1オブジェクトとの間、又は前記操作画面の端と前記第1オブジェクトとの間の間隔が第1の制約条件を満たすように、前記第1オブジェクトの配置位置を修正する処理と、
前記第1オブジェクト内に表示されるテキストの入力を受け付ける処理と、
前記テキストに応じて前記第1オブジェクトの大きさを調整する処理と、
を実行するコンピュータを備えることを特徴とする操作画面設計装置。
【請求項14】
操作画面に表示すべき第1オブジェクトを、前記操作画面上に配置する操作を受け付ける処理と、
前記第1オブジェクトよりも先に前記操作画面上に配置されている第2オブジェクトと前記第1オブジェクトとの間、又は前記操作画面の端と前記第1オブジェクトとの間の間隔が第1の制約条件を満たすように、前記第1オブジェクトの配置位置を修正する処理と、
前記第1オブジェクト内に表示されるテキストの入力を受け付ける処理と、
前記テキストに応じて前記第1オブジェクトの大きさを調整する処理と、
をコンピュータに実行させることを特徴とする操作画面設計プログラム。
【発明の詳細な説明】
【技術分野】
【0001】
本発明は、操作画面設計方法、操作画面設計装置および操作画面設計プログラムに関する。
【背景技術】
【0002】
特許文献1には、UI(ユーザインタフェース:User Interface)の操作画面の設計を支援する操作画面設計支援装置が記載されている。この操作画面設計支援装置では、UI使用作成者は、部品一覧から設定した部品(オブジェクト)を画面レイアウトにドラッグ&ドロップして配置することにより操作画面を生成する。
【先行技術文献】
【特許文献】
【0003】
【発明の概要】
【発明が解決しようとする課題】
【0004】
このように操作画面にオブジェクト(部品)を配置する場合、配置されるオブジェクト数が増えると操作画面に配置されるオブジェクト同士が干渉し易くなる。このため、オブジェクト間の干渉を避けるように配置する操作が煩雑になる。また、オブジェクト内にテキストが挿入される場合には、テキストの長さによってオブジェクトとの余白が過小又は過大となり、これらを調整する操作が煩雑になる。
本発明は、このような事情に鑑みてなされたものであり、UIの操作画面設計において、テキストが挿入されるオブジェクトを操作画面に配置する際の操作を省力化することを目的とする。
【課題を解決するための手段】
【0005】
本発明の一態様の操作画面設計方法では、操作画面に表示すべき第1オブジェクトを、操作画面上に配置する操作を受け付ける処理と、第1オブジェクトよりも先に操作画面上に配置されている第2オブジェクトと第1オブジェクトとの間、又は操作画面の端と第1オブジェクトとの間の間隔が第1の制約条件を満たすように、第1オブジェクトの配置位置を修正する処理と、第1オブジェクト内に表示されるテキストの入力を受け付ける処理と、テキストに応じて第1オブジェクトの大きさを調整する処理と、をコンピュータに実行させる。
【発明の効果】
【0006】
本発明によれば、UIの操作画面設計において、テキストが挿入されるオブジェクトを操作画面に配置する際の操作を省力化できる。
【図面の簡単な説明】
【0007】
【
図1】実施形態の操作画面設計装置の一例の概略構成図である。
【
図2】操作画面上のオブジェクトの配置を編集する編集画面の一例を示す図である。
【
図3】操作画面設計装置の制御部による処理の一例のフローチャートである。
【
図4】オブジェクト配置処理の一例のフローチャートである。
【
図5】(a)及び(b)は、オブジェクトの配置位置の調整の一例の説明図である。
【
図6】オブジェクトの配置位置の調整の他の一例の説明図である。
【
図7】オブジェクトサイズ設定処理の一例のフローチャートである。
【
図8】オブジェクトに挿入されるテキスト及びアイコンの一例を示す図である。
【
図9】(a)はオブジェクトとテキスト又はアイコンの関連付けるリンク情報の一例を示すテーブルであり、(b)はアイコン情報の一例を示すテーブルであり、(c)はテキスト情報の一例を示すテーブルである。
【
図10】(a)及び(b)は、オブジェクトの大きさの調整の一例の説明図である。
【
図11】(a)~(c)は、オブジェクトの大きさの調整の他の一例の説明図である。
【発明を実施するための形態】
【0008】
以下、本発明の実施形態について、図面を参照しつつ説明する。図面の記載において、同一又は類似の部分には同一又は類似の符号を付し、重複する説明を省略する。各図面は模式的なものであり、現実のものとは異なる場合が含まれる。以下に示す実施形態は、本発明の技術的思想を具体化するための装置や方法を例示するものであって、本発明の技術的思想は、下記の実施形態に例示した装置や方法に特定するものでない。本発明の技術的思想は、特許請求の範囲に記載された技術的範囲内において、種々の変更を加えることができる。
【0009】
(構成)
図1は、実施形態の操作画面設計装置の一例の概略構成図である。操作画面設計装置1は、ディスプレイ装置上に表示されるGUI(Graphical User Interface)の操作画面の設計を支援する装置である。例えば操作画面設計装置1は、車載装置の操作画面(すなわち車両に搭載されて乗員に操作される車載装置の操作画面)の設計を支援する装置であってよい。例えば操作画面設計装置1は、車両に搭載されずに執務室に配置され、執務室にて車載装置の操作画面の設計を支援するために用いられるコンピュータ(例えばパーソナルコンピュータ)であってもよい。また、操作画面設計装置1は、車両に搭載された車載装置に接続されて、車載装置のディスプレイでGUIを確認しながら設計を支援するために使用されるコンピュータであってもよい。
操作画面設計装置1は、例えばIVI(In-Vehicle Infotainment)装置の操作画面の設計を支援する装置であってよい。
【0010】
操作画面設計装置1は、例えばコンピュータにより実現され、入力部10、表示部11、出力部12、制御部20及び記憶部30を備える。
入力部10は、キーボード、マウス、タッチパッド、タッチパネル等のユーザインタフェースであり、UIの設計者に操作されてデータ入力等に用いられる。入力部10は、制御部20に接続され、設計者の操作を操作信号に変換して制御部20に出力する。
【0011】
表示部11は、液晶ディスプレイ、有機EL(Electro Luminescence)ディスプレイ、CRT(Cathode Ray Tube)ディスプレイ等のディスプレイ装置であり、制御部20と接続され、操作画面上のオブジェクトの配置を編集する編集画面を表示するために使用される。
図2は、操作画面上のオブジェクトの配置を編集する編集画面の一例を示す図である。例えば、編集画面40には、設計対象の操作画面41の画面レイアウトを表示するキャンバス領域と、操作画面上に配置することができるUI部品であるオブジェクト43a、43b、43c、43d、…の一覧を表示するパレット領域42が表示される。
【0012】
例えば、オブジェクト43aは、操作画面上に表示される四角形の図形である四角形オブジェクトであり、オブジェクト43bは、操作画面上に表示される円形の図形である円形オブジェクトである。
また、オブジェクト43cは、テキストオブジェクトであり、オブジェクト43dは、操作画面の利用者がGUIのボタンとして操作できるボタンオブジェクトである。ボタンオブジェクト43dには、ボタン上に表示されるテキストを付与できる。
【0013】
UIの設計者は、パレット領域42内のオブジェクト43a~43dの中から、操作画面上に配置すべきオブジェクトを選択する。例えば、マウス、タッチパッド、タッチパネル等によりクリックすることによりオブジェクトを選択する。
そして、選択したオブジェクトを操作画面41内の所望の位置へ配置することにより、操作画面上にオブジェクトを配置する。例えば、矢印44に示すようにドラッグして操作画面41へ移動させ、操作画面41内の所望の位置にドロップすることにより、ドロップされた位置にオブジェクトを配置する。参照符号45a及び45bは、操作画面上に配置済みのボタンオブジェクトとテキストオブジェクトである。
【0014】
図1を参照する。制御部20は、実施形態の操作画面設計方法を実行する制御回路であり、例えば、CPU(Central Processing Unit)やMPU(Micro-Processing Unit)等のプロセッサと、コンピュータプログラム及び所要データを格納するための半導体記憶装置、磁気記憶装置及び光学記憶装置等の記憶媒体を備える。
制御部20は、記憶媒体に記憶されたコンピュータプログラムをプロセッサが実行することにより、操作受付部21、オブジェクト配置部22、オブジェクト調整部23、テキスト挿入部24、テキスト調整部25、表示制御部26及び通知部27として機能する。
【0015】
設計者が入力部10を用いて入力操作を行うと、操作受付部21は、入力部10から入力操作を受け付ける。例えば操作受付部21は、上記のようにパレット領域42にあるオブジェクトを操作画面41に配置する操作を受け付ける。
また例えば、操作画面41に配置されたオブジェクトの大きさ(すなわち幅及び高さ)を変更する操作を受け付けてもよい。この際に設計者は、例えばオブジェクトの枠をドラッグ&ドロップすることによりオブジェクトの大きさを変更してよい。
【0016】
また例えば、操作受付部21は、オブジェクトに挿入するテキストを入力する操作を受け付けてもよい。テキストを入力する際に設計者は、例えば入力部10であるキーボード、マウス、タッチパッド、タッチパネルから、テキストに含まれる文字情報を入力してよい。
また例えば、操作受付部21は、オブジェクトにアイコンを挿入する操作を受け付けてもよい。
【0017】
オブジェクト配置部22は、オブジェクトを操作画面41内に配置する操作を操作受付部21が受け付けると、指定された配置位置にオブジェクトを配置する処理を行う。例えばオブジェクト配置部22は、ドラッグ&ドロップ操作によってドロップされた位置にオブジェクトを配置する。
また、オブジェクト配置部22は、オブジェクトの大きさを変更する操作を操作受付部21が受け付けると、操作に応じてオブジェクトの大きさを変更する。
【0018】
オブジェクト調整部23は、オブジェクトの位置及び大きさを調整する。例えば、操作画面41には、所定のピクセル間隔(例えば8ピクセル間隔)のグリッドを設定してよい。オブジェクト配置部22がオブジェクトを配置すると、オブジェクト調整部23は、オブジェクトがグリッドに合って配置されるように(すなわちグリッドにスナップされるように)オブジェクトの位置を調整してよい。
【0019】
なお、「オブジェクトがグリッドに合っている」とは、例えばオブジェクトの4隅の位置がグリッド位置に一致していることをいう。例えば、四角形オブジェクト43aやボタンオブジェクト43dの場合、四角形やボタンの4隅の位置がグリッド位置に一致していることであってよい。また円形オブジェクト43bやテキストオブジェクト43cの場合、円形やテキストに外接する四角形の4隅の位置がグリッド位置に一致していることであってよい。
【0020】
また、オブジェクト調整部23は、操作画面に配置されたオブジェクトが、操作画面の設計上の所定の制約条件を満足するように、オブジェクトの位置を調整する。
操作画面の設計上の制約条件は、例えば以下の条件(1)~(6)であってよい。
(1)操作画面の端とオブジェクトとの間の間隔の最小値
(2)隣接するオブジェクト間の間隔の最小値
(3)オブジェクトの大きさの最小値
(4)テキストのフォントサイズの最小値
(5)テキストの文字間隔の最小値
(6)オブジェクトの境界(すなわちオブジェクトの縁)と、オブジェクト内に挿入されたテキストやアイコンと間の余白の最小値及び最大値
これらの値は、例えばピクセル数として指定してもよく、操作画面上の実際の表示サイズとして指定してもよい。
【0021】
これらの制約条件のうち条件(4)~(6)はテキストに関する条件であり、操作画面が使用される地域(仕向地)で使用される言語によって好適な条件が異なる。例えば、これらの制約条件(4)~(6)は、使用される言語に応じて以下の観点に基づいて設定してよい。
(A)複数行のテキストを右揃え、左揃えのいずれで表示するか
(B)文字の上下中心位置が異なる文字があるか(例えば「g」)
(C)文字幅は一定か(例えば「I」、「M」のように変化するか)
(D)複数行の考え方(ハイフン、分節)
これらの観点に基づいて制約条件を設定する場合、例えば、仕向地の優先順位を設定し、優先順位の高い仕向地から順に制約条件を満たすことができるように、上記観点(A)~(D)に基づいて制約条件(4)~(6)を設定してよい。
【0022】
これらの制約条件は操作画面の予め設定されて、設定データ31として記憶部30に記憶される。
また、設定データ31として、操作画面の設定情報を設定してもよい。操作画面の設定情報として、例えば操作画面の幅方向及び高さ方向のピクセル数や画面密度[dpi]を設定してよい。また、設定データ31としてオブジェクト43a~43dのデフォルトの大きさや、テキストのデフォルトのフォントサイズ、アイコンのデフォルトの大きさを設定してよい。
【0023】
また、設計対象の操作画面が車載装置の操作画面である場合、操作画面に配置されるオブジェクトについて、車両が右ハンドル車であるか左ハンドル車であるかに応じて、当該オブジェクトの配置位置を左右で反転させる必要があるか否かを、設定データ31として設定してもよい。
また、テキストの言語に応じて、複数行のテキストを右揃えで表示するのか左揃えで表示するのかを設定データ31として設定してもよい。
【0024】
オブジェクト調整部23は、オブジェクト配置部22によってオブジェクトの大きさが変更されると、所定ピクセル数(例えば8ピクセル)の整数倍となるようにオブジェクトの大きさを調整してもよい。また、上記の制約条件を満足するようにオブジェクトの大きさを調整してもよい。
さらに、オブジェクトにテキストが挿入された場合には、挿入されたテキストとオブジェクトとが上記の制約条件を満足するように、オブジェクトの大きさを調整してもよい。
操作画面41に配置されたオブジェクトの配置位置や、大きさ、表示色の情報は、オブジェクトデータ32として記憶部30に記憶される。
【0025】
オブジェクトに挿入するテキストを入力する操作を操作受付部21が受け付けると、テキスト挿入部24は、オブジェクトにテキストを挿入する。
図2の例では、操作画面上に配置されたボタンオブジェクト45aやテキストオブジェクト45bに、テキストを挿入する。
また、テキスト挿入部24は、オブジェクトに挿入するアイコンを入力する操作を操作受付部21が受け付けた場合にオブジェクトにアイコンを挿入する。
挿入されるテキストやアイコンの情報は、テキストアイコンデータ33として、記憶部30に記憶される。
【0026】
同一のオブジェクトに挿入するテキストとして、複数のテキストを設定され、これらの複数のテキストの中から何れかを選択してオブジェクトに挿入してもよい。例えば、設計対象の操作画面を表示する製品の仕向地に応じて異なる言語の同義語のテキストを設定してよい。また例えば、オブジェクトの操作状態に応じてこのオブジェクト内に表示するテキストが変化する場合、操作状態に応じて表示する異なるテキストを設定してもよい。以下の説明では、仕向地に応じて異なる言語の同義語のテキストを設定する場合の例について説明する。
また、テキストアイコンデータ33に、同一のオブジェクトに挿入される複数の異なるアイコンを設定してもよい。例えば、オブジェクトの操作状態に応じてこのオブジェクト内に表示するアイコンが変化する場合、操作状態に応じて表示する異なるアイコンを設定してもよい。
【0027】
テキスト調整部25は、オブジェクトにテキストが挿入された場合に、挿入されたテキストとオブジェクトとが上記の制約条件を満足するようにテキストのフォントサイズを調整してもよい。
表示制御部26は、操作画面41に配置されたオブジェクトや、オブジェクトに挿入されたテキスト、アイコンを表示部11に表示する処理を行う。
これら操作受付部21、オブジェクト配置部22、オブジェクト調整部23、テキスト挿入部24、テキスト調整部25、表示制御部26及び通知部27の処理の詳細は、さらに後述する。
【0028】
通知部27は、操作画面設計装置1から設計者に提示される警報やメッセージを出力する。例えば、通知部27は、視覚的な警報やメッセージを表示部11に表示してもよく、聴覚的な警報やメッセージを出力部12から出力してもよい。
出力部12は、制御部20からの各種情報を出力するインタフェース装置である。出力部12は、例えばDVD(Digital Versatile Disc)ドライブ、USB(Universal Serial Bus)インタフェース、ネットワークインターフェース等を備えてよい。出力部12は、記憶部30に記憶されたオブジェクトデータ32及びテキストアイコンデータ33を、操作画面の設定データとして外部に出力してよい。出力部12は、制御部20からの聴覚的な警報やメッセージを出力するためのスピーカやブザーを備えてもよい。
【0029】
(制御部20による処理)
次に、制御部20の操作受付部21、オブジェクト配置部22、オブジェクト調整部23、テキスト挿入部24、テキスト調整部25、表示制御部26及び通知部27による処理の詳細を説明する。
図3は、制御部20による処理の一例のフローチャートである。
ステップS1では、設計対象の操作画面の初期設定を行う。この初期設定において上記の操作画面の設定情報、設計上の制約条件、オブジェクトのデフォルトの大きさ、テキストのデフォルトのフォントサイズ、アイコンのデフォルトの大きさを設定して、設定データ31として記憶部30に記憶する。また、設計対象の操作画面が車載装置の操作画面である場合、車両が右ハンドル車であるか左ハンドル車であるかに応じて、配置位置を左右反転させるオブジェクトであるか否かを設定してもよい。
【0030】
ステップS2においてオブジェクト配置部22とオブジェクト調整部23は、オブジェクト配置処理を行う。オブジェクト配置処理の一例のフローチャートを
図4に示す。
ステップS10において、設計者がパレット領域42にあるオブジェクト43a~43dのうち所望のオブジェクトを選択してドラッグすると、オブジェクト配置部22は、オブジェクトの配置位置の候補である配置位置候補を推奨する。
例えばオブジェクト配置部22は、選択されたオブジェクトが上記の制約条件(1)及び(2)を満たし、かつオブジェクトがグリッドに合って配置される1以上の配置位置候補を決定する。なお、パレット領域42から選択された直後のオブジェクトの大きさは、予め設定されたデフォルト値に設定されている。表示制御部26は、決定された配置位置候補を表示部11に表示する。
【0031】
ステップS11においてオブジェクト配置部22は、設計者がオブジェクトを操作画面41内にドロップした位置が、配置位置候補であるか否かを判定する。ドロップした位置が配置位置候補である場合(ステップS11:Y)に、処理はステップS12へ進む。この場合にはステップS12において、操作画面41内でドロップした位置にオブジェクトが配置されてオブジェクト配置処理が終了する。
一方で、ドロップした位置が配置位置候補でない場合(ステップS11:N)に処理はステップS13に進む。
【0032】
ステップS13においてオブジェクト調整部23は、ドロップされたオブジェクトがグリッドに合っているか否かを判定する。オブジェクトがグリッドに合っている場合(ステップS13:Y)に処理はステップS15へ進む。オブジェクトがグリッドに合っていない場合(ステップS13:N)に処理はステップS14に進む。
ステップS14においてオブジェクト調整部23は、オブジェクトが最寄りのグリッドに合うようにオブジェクトの配置位置を調整する。その後に処理はステップS15へ進む。なお、グリッドが設定されていない場合はステップS13及びS14を省略してもよい。
【0033】
ステップS15においてオブジェクト調整部23は、オブジェクトが上記の制約条件(1)及び(2)を満たしているか否かを判定する。オブジェクトが上記の制約条件(1)及び(2)を満たしている場合(ステップS15:Y)には、処理はステップS12へ進む。この場合には、ドロップした位置にオブジェクトが配置される(ステップS13で「Y」の場合)。または、ステップS14で調整された位置にオブジェクトが配置される(ステップS13で「N」の場合)。その後にオブジェクト配置処理が終了する。
【0034】
オブジェクトが上記の制約条件(1)及び(2)を満たしていない場合(ステップS15:N)に処理はステップS16に進む。ステップS16においてオブジェクト調整部23は、オブジェクトが制約条件(1)及び(2)を満たし、かつオブジェクトがグリッドに合って配置されるような最寄りの位置に、オブジェクトの位置を調整する。
その後に処理はステップS12へ進む。ステップS12ではステップS16で調整された位置にオブジェクトが配置される。その後にオブジェクト配置処理が終了する。
なお、制約条件(1)及び(2)を満たすようにオブジェクトの位置を調整した場合に、通知部27は、調整したオブジェクトの位置を、手動で再調整することを設計者に促す警報又はメッセージを出力してもよい。自動で調整されたオブジェクトの位置は、必ずしも設計者の意図に沿っているとは限らないためである。
【0035】
以下、
図5(a)及び
図5(b)を参照して、ステップS15及びS16におけるオブジェクト調整部23の処理を説明する。
図5(a)は、テキストオブジェクト45bが操作画面41に既に配置されている状態で、更にボタンオブジェクト45aがドロップされた状態を示している。ボタンオブジェクト45aがドロップされると、オブジェクト調整部23は、ボタンオブジェクト45aと操作画面41との間隔Sp1が、制約条件(1)の最小値以上であるか否かを判定する。また、ボタンオブジェクト45aとテキストオブジェクト45bとの間隔Sp2が、制約条件(2)の最小値以上であるか否かを判定する。
【0036】
間隔Sp1、Sp2が、制約条件(1)、(2)の最小値以上である場合には、オブジェクトが制約条件(1)及び(2)を満たすと判定する。この場合、オブジェクト調整部23は、ボタンオブジェクト45aの位置を調整しない。
間隔Sp1、Sp2が、制約条件(1)、(2)の最小値未満である場合には、オブジェクト調整部23は、
図5(b)に示すようにオブジェクトの位置を調整する。
例えばオブジェクト調整部23は、ボタンオブジェクト45aと操作画面41との間隔Sp3と、ボタンオブジェクト45aとテキストオブジェクト45bとの間隔Sp4が、制約条件(1)、(2)の最小値以上となり、かつオブジェクトがグリッドに合うようにボタンオブジェクト45aの位置を調整する。
【0037】
なお、ステップS16においてオブジェクトの位置を調整する代わりに、通知部27は、オブジェクトが制約条件(1)及び(2)を満たしていないことを通知する警報やメッセージを出力してもよい。例えば、制約条件(1)及び(2)を満たしていないオブジェクトを強調表示することにより配置位置の調整を設計者に促してもよい。例えば、オブジェクトの色、線の太さなどの表示態様を変更することによりオブジェクトを強調表示してよい。
また例えば、通知部27によりオブジェクトが制約条件(1)及び(2)を満たしていないことを通知する警報やメッセージを出力するとともに、制約条件(1)及び(2)を満たしていないオブジェクトをオブジェクト調整部23が削除してもよい。
【0038】
図6を参照する。設計対象が車載装置の操作画面41である場合、車両が右ハンドル車であるか左ハンドル車であるかに応じて、オブジェクトの配置位置を左右反転させることがある。
例えば右ハンドル車である場合には、ハンドルの左側に配置される操作画面41においてボタンオブジェクトを操作し易いように、参照符号46bの位置にボタンオブジェクトを配置し、左ハンドル車である場合には、ハンドルの右側に配置される操作画面41においてボタンオブジェクトを操作し易いように、参照符号45aの位置にボタンオブジェクトを配置する。
【0039】
このようなオブジェクトを操作画面41に配置する場合には、当該オブジェクトは右ハンドル車であるか左ハンドル車であるかに応じて配置位置を左右反転させること、及び左右反転する際の対称中心点46aを設定データ31として設定する。なお対称中心点46aは、必ずしも操作画面41の左右中心の位置になくてもよい。
このような右ハンドル車であるか左ハンドル車であるかに応じて、オブジェクトの位置を反転させると、右ハンドル車又は左ハンドル車の一方である場合には制約条件(1)及び(2)を満たしても、他方である場合には満たさない場合がある。
【0040】
図6の例では、右ハンドル車であっても左ハンドル車であっても位置が反転しないオブジェクト46cが配置されている。そのため、参照符号45aの位置にオブジェクトが配置された場合には制約条件(1)及び(2)を満たすが、参照符号46bの位置に配置された場合には、オブジェクト46cとの間隔Sp5が制約条件(2)を満たさないことがある。
このため、右ハンドル車であるか左ハンドル車であるかに応じて配置位置を左右反転させるオブジェクトを配置する場合、オブジェクト調整部23は、ステップS15及びS16において、対称中心点46aに対して左右反転させた両方の位置において制約条件(1)及び(2)を満たすか否かを判定し、左右反転させても制約条件(1)及び(2)を満たすようにオブジェクトの配置位置を調整してよい。または、制約条件(1)及び(2)を満たさない場合に、通知部27が警報又はメッセージを出力してよい。
【0041】
図3を参照する。ステップS3においてオブジェクト配置部22とオブジェクト調整部23は、オブジェクトサイズ設定処理を行う。オブジェクトサイズ設定処理の一例のフローチャートを
図7に示す。
上記の通り、オブジェクトを操作画面41に配置した直後では、オブジェクトの大きさは、設定データ31に設定されたデフォルト値に設定される。設計者は、配置したオブジェクトの枠をドラッグすることによりオブジェクトの大きさを変更できる。
【0042】
ステップS20においてオブジェクトの大きさの変更を開始すると、オブジェクト配置部22は、オブジェクトの大きさの候補であるサイズ候補を推奨する。例えば、オブジェクト配置部22は、この大きさを変更した後のオブジェクトが、上記の制約条件(1)及び(2)を満たし、所定ピクセル数(例えば8ピクセル)の整数倍となるようにサイズ候補を決定する。表示制御部26は、決定されたサイズ候補を示す枠線を表示部11に表示する。
【0043】
ステップS21においてオブジェクト配置部22は、設計者がオブジェクトの枠をドロップした位置が、推奨された位置であるか否か(すなわち設計者が指定した大きさがサイズ候補と等しいか否か)を判定する。ドロップした位置が推奨された位置である場合(ステップS21:Y)に処理はステップS22へ進む。この場合にはステップS22において、設計者が指定した大きさにオブジェクトの大きさを設定して、オブジェクトサイズ設定処理が終了する。
ドロップした位置が推奨された位置でない場合(ステップS21:N)に処理はステップS23に進む。
【0044】
ステップS23においてオブジェクト調整部23は、指定されたオブジェクトの大きさが所定ピクセル数(例えば8ピクセル)の整数倍であるか否か(すなわち、ドロップした枠の位置がグリッドに合っているか否か)を判定する。また、オブジェクト調整部23は、指定されたオブジェクトの大きさが上記の制約条件(3)の最小値以上であるか否かを判定する。
オブジェクトの大きさが所定ピクセル数の整数倍であり、且つ制約条件(3)の最小値以上である場合(ステップS23:Y)に処理はステップS25へ進む。オブジェクトの大きさが所定ピクセル数の整数倍でないか、制約条件(3)の最小値未満の場合(ステップS23:N)に処理はステップS24に進む。
【0045】
ステップS24においてオブジェクト調整部23は、オブジェクトの大きさを、所定ピクセル数の整数倍となり、且つ制約条件(3)の最小値以上の値となるように調整する。その後に処理はステップS25に進む。
ステップS25においてオブジェクト調整部23は、オブジェクトが上記の制約条件(1)及び(2)を満たしているか否かを判定する。オブジェクトが上記の制約条件(1)及び(2)を満たしている場合(ステップS25:Y)には、処理はステップS22へ進む。この場合、設計者が指定した大きさにオブジェクトの大きさを設定する(ステップS23で「Y」の場合)。または、ステップS24で調整された大きさに設定される(ステップS23で「N」の場合)。その後にオブジェクトサイズ設定処理が終了する。
【0046】
オブジェクトが上記の制約条件(1)及び(2)を満たしていない場合(ステップS25:N)に処理はステップS26に進む。ステップS26においてオブジェクト調整部23は、オブジェクトが制約条件(1)及び(2)を満たし、かつ所定ピクセル数の整数倍となるようにオブジェクトの大きさを調整する。
その後に処理はステップS22へ進む。ステップS22では、ステップS26で調整された大きさにオブジェクトを調整する。その後にオブジェクトサイズ設定処理が終了する。
【0047】
なお、制約条件(1)及び(2)を満たすようにオブジェクトの大きさを調整した場合に、通知部27は、調整したオブジェクトの大きさを手動で再調整することを設計者に促す警報又はメッセージを出力してもよい。自動で調整されたオブジェクトの大きさは、必ずしも設計者の意図に沿っているとは限らないためである。
また、ステップS26においてオブジェクトの大きさを調整する代わりに、通知部27は、オブジェクトが制約条件(1)及び(2)を満たしていないことを通知する警報やメッセージを出力してもよい。例えば、制約条件(1)及び(2)を満たしていないオブジェクトを強調表示することにより配置位置の調整を設計者に促してもよい。例えば、オブジェクトの色、線の太さなどの表示態様を変更することによりオブジェクトを強調表示してよい。
また例えば、通知部27によりオブジェクトが制約条件(1)及び(2)を満たしていないことを通知する警報やメッセージを出力するとともに、制約条件(1)及び(2)を満たしていないオブジェクトをオブジェクト調整部23が削除してもよい。
【0048】
図3を参照する。ステップS4において操作受付部21がテキストやアイコンをオブジェクトに挿入する操作を受け付けると、テキスト挿入部24は、オブジェクトにテキストやアイコンを挿入する。
図8は、操作画面41上のオブジェクトに挿入されるテキスト及びアイコンの一例を示す図である。
図8の例では、操作画面41には、ボタンオブジェクト45a、45g、テキストオブジェクト45b、45c、円形オブジェクト45d~45fが配置されている。
【0049】
そして、ボタンオブジェクト45a、45gにはテキスト「Back」、「Play List」が挿入される。
また、テキストオブジェクト45bのテキストとして「Audio」が入力され、テキストオブジェクト45cのテキストには変数(Track Name)の値が入力される。
円形オブジェクト45d~45fには、早戻し操作、再生操作、早送り操作を示すアイコン47d~47fがそれぞれ配置されている。
【0050】
操作受付部21が、テキストやアイコンをオブジェクトに挿入する操作を受け付けると、テキスト挿入部24は、オブジェクトに挿入されたテキストやアイコンと、テキストやアイコンが挿入されたオブジェクトとを、示すテキストアイコンデータ33を生成する。
例えばテキストアイコンデータ33は、
図9(a)に示すリンク情報と、
図9(b)に示すアイコン情報と、
図9(c)に示すテキスト情報とを備えてよい。テキストアイコンデータ33は、リンク情報、アイコン情報及びテキスト情報に加えて、挿入されたアイコンの位置及び大きさ、挿入されたテキストの位置及びフォントサイズの情報を有している。テキストアイコンデータ33を生成した直後は、テキストのフォントサイズ、アイコンの大きさは、設定データ31に設定されたデフォルト値に設定される。
【0051】
リンク情報は、オブジェクトに挿入されたテキストやアイコンと、テキストやアイコンが挿入されたオブジェクトとを関連付ける情報である。例えばリンク情報は、オブジェクトのオブジェクトIDと、テキストのテキストID又はアイコンのアイコンIDを関連付けるテーブルであってよい。
図9(a)の例では、オブジェクト45a~45gのオブジェクトIDはそれぞれ「ID_B0001」~「ID_B0007」であり、テキスト「Play List」、「Audio」及び「Back」のテキストIDはそれぞれ「ID_T0001」、「ID_T0029」及び「ID_T0034」であり、アイコン47d~47fのアイコンIDはそれぞれ「ID_I0026」、「ID_I0027」及び「ID_I0029」である。
そして、「ID_B0001」に「ID_T0034」が、「ID_B0002」に「ID_T0029」が、「ID_B0004」に「ID_I0026」が、「ID_B0005」に「ID_I0027」が、「ID_B0006」に「ID_I0029」が、「ID_B0007」に「ID_T0001」がそれぞれ対応付けられている。
【0052】
上記のとおり、同一のオブジェクトに挿入されるテキストとして複数の異なるテキストを設定してもよい。このため、テキスト情報は、同一のオブジェクトに挿入される複数の異なるテキストを含んでいてもよい。
図9(c)の例では、異なる言語(例えば英語と日本語)の同義語のテキストが設定されている。日本語テキスト「プレイリスト」、「音楽」、「戻る」は、英語テキスト「Play List」、「Audio」及び「Back」の同義語であり、「プレイリスト」と「Play List」に同一ID「ID_T0001」が割り当てられている。同様に「音楽」と「Audio」には同一ID「ID_T0029」が割り当てられ、「戻る」と「Back」には同一ID「ID_T0034」が割り当てられている。
【0053】
同一のオブジェクトに挿入されるアイコンとして、複数の異なるアイコンを設定してもよい。このため、アイコン情報は、同一のオブジェクトに挿入される複数の異なるアイコンを含んでいてもよい。
図9(b)のアイコン情報の例では、円形オブジェクト45d~45fが操作されていないデフォルト時を示す白抜きのアイコンと、押下時を示す黒塗りのアイコンが設定されている。
【0054】
図3を参照する。ステップS5においてオブジェクト調整部23は、テキストが挿入されたオブジェクトの大きさを、挿入されたテキストに応じて調整する。
具体的には、オブジェクト調整部23は、オブジェクトとテキストが、上記の制約条件(6)を満たし、所定ピクセル数(例えば8ピクセル)の整数倍となるようにオブジェクトの大きさを決定する。
図10(a)及び
図10(b)を参照してテキストに応じたオブジェクトの大きさの調整を説明する。
【0055】
例えば、オブジェクト調整部23は、テキスト「Back」が挿入されたボタンオブジェクト45aの境界と、テキスト「Back」との間の余白Ma1が、制約条件(6)の最小値以上かつ最大値以下であるか否かを判定する。余白Ma1が、制約条件(6)の最小値以上かつ最大値以下である場合には、ボタンオブジェクト45aとテキスト「Back」が制約条件(6)を満たすと判定する。この場合にはオブジェクト調整部23は、オブジェクト45aの大きさを調整しない。
【0056】
一方で、余白Ma1が、制約条件(6)の最小値未満である場合には、
図10(b)に示すように、ボタンオブジェクト45aの境界とテキスト「Back」との間の余白Ma2が制約条件(6)の最小値以上となり、オブジェクトの大きさが所定ピクセル数(例えば8ピクセル)の整数倍となるようにオブジェクトを拡大する。
但し、オブジェクトを拡大することにより、制約条件(1)、(2)が満たされなくなる場合には、オブジェクト調整部23は、制約条件(1)、(2)を満たすようにオブジェクトの配置位置を修正する。制約条件(1)、(2)を満たすようにオブジェクトの配置位置を修正できない場合には、オブジェクト調整部23はオブジェクトの大きさを調整しなくてよい。
【0057】
同様に、余白Ma1が、制約条件(6)の最大値より大きい場合には、ボタンオブジェクト45aの境界とテキスト「Back」との間の余白が制約条件(6)の最大値以下となり、オブジェクトの大きさが所定ピクセル数(例えば8ピクセル)の整数倍となるようにオブジェクトを縮小する。
但し、オブジェクトを縮小することにより、制約条件(3)が満たされなくなる場合には、オブジェクトの大きさを調整しない。
【0058】
同一のオブジェクトに挿入するテキストとして、複数の異なる言語の同義語のテキストが設定され、これらの複数のテキストの中から仕向地に応じて何れかを選択してオブジェクトに挿入する場合には、オブジェクト調整部23は、これら複数のテキストのいずれを挿入しても、上記の制約条件(6)を満たすようにオブジェクトの大きさを調整する。
すなわち、オブジェクト調整部23は、オブジェクトに挿入されるテキストの言語を変更した場合に、変更後のテキストとオブジェクトが上記の制約条件(6)を満たすようにオブジェクトの大きさを調整してよい。
【0059】
このような、テキストの言語変更に伴うオブジェクトの大きさの調整の一例を以下に説明する。
まず、オブジェクト調整部23は、
図11(a)に示すように英語テキスト「Play List」を挿入した場合に、ボタンオブジェクト45gの境界と英語テキスト「Play List」との間の余白Ma3が、制約条件(6)を満たすか否かを判定する。
【0060】
同様に、
図11(b)に示すようにボタンオブジェクト45gに挿入するテキストを日本語の「プレイリスト」をした場合に、ボタンオブジェクト45gの境界と日本語テキスト「プレイリスト」との間の余白が、制約条件(6)を満たすか否かを判定する。
ここでは、英語テキスト「Play List」の場合の余白Ma3は制約条件(6)を満たしているが、日本語テキスト「プレイリスト」の場合の余白は制約条件(6)を満たさない場合を想定する。
この場合、オブジェクト調整部23は、
図11(c)に示すようにボタンオブジェクト45gの境界と日本語テキスト「プレイリスト」との間の余白Ma4が制約条件(6)を満たし、かつボタンオブジェクト45gの大きさが所定ピクセル数(例えば8ピクセル)の整数倍となるように拡大する。
【0061】
なお、ステップS5においてオブジェクトの大きさを調整した場合に、通知部27は、調整したオブジェクトの大きさを手動で再調整することを設計者に促す警報又はメッセージを出力してもよい。自動で調整されたオブジェクトの大きさは、必ずしも設計者の意図に沿っているとは限らないためである。
また、ステップS5においてオブジェクトの大きさを調整する代わりに、通知部27は、オブジェクトとテキストが制約条件(6)を満たしていないことを通知する警報やメッセージを出力してもよい。例えば、制約条件(6)を満たしていないオブジェクトやテキストを強調表示することにより配置位置の調整を設計者に促してもよい。例えば、オブジェクトやテキストの色、線の太さなどの表示態様を変更することにより強調表示してよい。
また例えば、通知部27によりオブジェクトとテキストが制約条件(6)を満たしていないことを通知する警報やメッセージを出力するとともに、制約条件(6)を満たしていないオブジェクトをオブジェクト調整部23が削除してもよい。
【0062】
図3を参照する。オブジェクトの大きさを調整することによって、オブジェクトとテキストやアイコンとの制約条件(6)を満たすことができない場合には、ステップS6においてテキスト調整部25は、オブジェクトに挿入されたテキストを調整する。
例えば、テキスト調整部25は、制約条件(4)及び(6)を満足するようにテキストのフォントサイズを縮小又は拡大してよい。
また例えば、テキスト調整部25は、テキストを同義語に変更することにより制約条件(6)を満足するようにテキストの字数を減少又は増加させてもよい。
これらの調整に優先順位を設けてもよい。例えば、テキスト調整部25は、まずフォントサイズの変更を試み、フォントサイズの変更では制約条件(6)を満たすことができない場合にテキストを同義語に変更してよい。
【0063】
同一のオブジェクトに挿入するテキストとして、複数の異なる言語の同義語のテキストが設定され、これらの複数のテキストの中から仕向地に応じて何れかを選択してオブジェクトに挿入する場合には、テキスト調整部25は、これら複数のテキストのいずれを挿入しても、上記の制約条件(6)を満たすようにテキストを調整する。
すなわち、テキスト調整部25は、オブジェクトに挿入されるテキストの言語を変更した場合に、変更後のテキストとオブジェクトが上記の制約条件(6)を満たすようにテキストを調整してよい。
【0064】
なお、ステップS6においてテキストを調整した場合に、通知部27は、調整したテキストを手動で再調整することを設計者に促す警報又はメッセージを出力してもよい。自動で調整されたテキストは、必ずしも設計者の意図に沿っているとは限らないためである。
また、ステップS6においてテキストを調整する代わりに、通知部27は、オブジェクトとテキストが制約条件(6)を満たしていないことを通知する警報やメッセージを出力してもよい。例えば、制約条件(6)を満たしていないオブジェクトやテキストを強調表示することにより配置位置の調整を設計者に促してもよい。例えば、オブジェクトやテキストの色、線の太さなどの表示態様を変更することにより強調表示してよい。
【0065】
また例えば、通知部27によりオブジェクトとテキストが制約条件(6)を満たしていないことを通知する警報やメッセージを出力するとともに、制約条件(6)を満たしていないテキストをテキスト調整部25が削除してもよい。
ステップS6におけるテキスト調整部25によるテキストの調整が終わると、その後に処理は終了する。
【0066】
(実施形態の効果)
(1)コンピュータは、操作画面に表示すべき第1オブジェクトを、操作画面上に配置する操作を受け付ける処理と、第1オブジェクトよりも先に操作画面上に配置されている第2オブジェクトと第1オブジェクトとの間、又は操作画面の端と第1オブジェクトとの間の間隔が第1の制約条件を満たすように、第1オブジェクトの配置位置を修正する処理と、第1オブジェクト内に表示されるテキストの入力を受け付ける処理と、テキストに応じて第1オブジェクトの大きさを調整する処理と、を実行する。
これにより、UIの操作画面設計において、テキストが挿入されるオブジェクトを操作画面に配置する際の操作を省力化できる。
【0067】
(2)コンピュータは、第1オブジェクトの大きさを調整する処理の後に第1の制約条件を満たすように、第1オブジェクトの配置位置を修正する処理を実行してもよい。このとき、第1の制約条件を満たさない場合のみ、第1オブジェクトの配置位置を修正する処理を実行してもよい。これにより、テキスト挿入に伴うオブジェクトの修正作業を省力化できる。
(3)コンピュータは、第1の制約条件を満たさない場合、第1オブジェクトを強調表示する処理を実行してもよい。これにより、設計者は制約条件を満たさないオブジェクトに気づきやすくなる。
【0068】
(4)コンピュータは、テキストのフォントサイズ、及び第1オブジェクトの境界とテキストとの間の余白が、第2の制約条件を満たすように第1オブジェクトの大きさを調整してもよい。これにより、テキスト挿入に伴うオブジェクトの修正作業を省力化できる。
(5)コンピュータは、第2の制約条件を満たすようにテキストのフォントサイズを調整する処理を実行してもよい。このとき、第2の制約条件を満たさない場合のみ、テキストのフォントサイズを調整してもよい。これにより、テキストの修正作業を省力化できる。
【0069】
(6)コンピュータは、第2の制約条件を満たさない場合、テキスト又は第1オブジェクトを強調表示する処理を実行してもよい。これにより、設計者は制約条件を満たさないテキストに気づきやすくなる。
(7)コンピュータは、テキストの言語を変更した場合に、変更後のテキストのフォントサイズ及び第1オブジェクトの境界と変更後のテキストとの間の余白が、第2の制約条件を満たすように、第1オブジェクトの大きさ、又はテキストのフォントサイズを調整してもよい。又はテキストを同義語に変更して字数を減少又は増加させてもよい。
これにより、操作画面を複数の言語に対応させる修正作業を省力化できる。
【0070】
(8)コンピュータは、第1オブジェクトの大きさを調整した場合に、第1オブジェクトの大きさを手動で再調整することをユーザに促す通知を表示する処理を実行してもよい。これにより、設計者は、コンピュータにより自動で調整された結果に満足しない場合に再調整し易くなる。
(9)コンピュータは、第1オブジェクトの位置を、操作画面上に設定された基準点に対して左右に反転させた場合に、第1の制約条件を満たすか否かを判定する処理を、実行してもよい。これにより、設計対象が車載装置の操作画面である場合に、右ハンドル車であるか左ハンドル車であるかに応じた修正作業を省力化できる。
【符号の説明】
【0071】
1…操作画面設計装置、10…入力部、11…表示部、12…出力部、20…制御部、21…操作受付部、22…オブジェクト配置部、23…オブジェクト調整部、24…テキスト挿入部、25…テキスト調整部、26…表示制御部、27…通知部、30…記憶部、31…設定データ、32…オブジェクトデータ、33…テキストアイコンデータ