グラフィカル インターフェイスとその開発用ツール。 Qt を使用したグラフィカル インターフェイスの作成

30.07.2019 その他

ヤドブ 2014年1月14日09時10分

グラフィカル ユーザー インターフェイスの設計

  • インターフェース

導入

現代世界何十億ものコンピューティングデバイス。 彼らのためのさらに多くのプログラム。 そして、それぞれに独自のインターフェースがあり、それがユーザーとマシンコード間の対話の「レバー」となります。 それは驚くべきことではありません より良いインターフェース、インタラクションがより効果的になります。

ただし、すべての開発者やデザイナーさえも、便利でわかりやすいグラフィカル ユーザー インターフェイスの作成を考えているわけではありません。

私自身としては、次のような質問をすることから始めました。 一般原理、 どれの インターフェース要素 (EI)どのようなデザインにするか、どこに正しく配置するか、どのように動作するかを作成します。
以下では、これらの質問に答えていきたいと思います。

一般原理


どのような EI を作成すればよいですか?


EI設計はどうあるべきか?

実際、EI 設計については別の記事で取り上げています。 ここでは、色、形、比率から認知心理学に至るまで、すべてを考慮する必要があります。 ただし、注目に値する原則がいくつかあります。

EI を画面上に正しく配置するにはどうすればよいですか?


EI はどのように行動すべきでしょうか?


拘留されて

この記事は最も優れているとは主張しません 完全なガイドインターフェース設計の原則。 グラフィカル ユーザー インターフェイスは、心理学と密接に絡み合っている広大なテーマであり、科学者の頭の中を占め、数百ページにわたる書籍や研究書にも及びます。 このような小さな形式では、提起されたトピックの内容を完全に表現する方法はありません。 ただし、基本原則に従うことで、よりユーザーフレンドリーなインターフェイスを構築でき、設計プロセス自体も簡素化できます。
ご清聴ありがとうございました。

文学

ジェフ・ラスキン、「インターフェイス: コンピューター システム設計の新しい方向性」
アラン・クーパー, 『インターフェースについて。 インタラクションデザインの基礎』
アラン・クーパー, 「精神病院は患者の手の中に」

Saleem Gul および Tomas Pavek による寄稿

この中で トレーニングコースシンプルなグラフィカル ユーザー インターフェイスを作成し、それにシンプルなサーバー機能を追加することを検討します。 特に、Swing フォーム上のボタンとフィールドの動作を定義するコードを見ていきます。

GUI のレイアウトと構造を確認し、いくつかのボタンとテキスト フィールドを追加します。 テキスト フィールドは、ユーザーが入力した情報を受け取り、プログラムの結果を表示するように設計されています。 このボタンは、プログラムのクライアント部分に組み込まれた機能の操作を開始します。 作成中のアプリケーションシンプルですが多機能な電卓です。

もっと 詳細なガイド GUI デザイナーの開発機能 (ビデオ デモンストレーションを含む) について さまざまな機能開発については、セクションを参照してください。

推定所要時間: 20 分

演習 1: プロジェクトの作成

最初のステップは、開発しているアプリケーション用の IDE プロジェクトを作成することです。 プロジェクトに NumberAddition という名前を付けます。

  1. 「ファイル」>「新規プロジェクト」を選択します。 IDE ツールバーの「新規プロジェクト」アイコンをクリックすることもできます。
  2. 「カテゴリ」領域で、Java ノードを選択します。 「プロジェクト」領域で「Java アプリケーション」を選択します。 「次へ」をクリックします。
  3. 「プロジェクト名」フィールドに「NumberAddition」と入力し、プロジェクトの場所としてホーム ディレクトリなどのパスを指定します。
  4. 「使用する」にチェックを入れます 別のフォルダーライブラリを保存するには」を選択し、ライブラリ フォルダーの場所を指定します (オプション)。 追加情報ドキュメント内で他のユーザーとライブラリを共有するという記事を参照してください。 NetBeans IDE を使用したアプリケーションの開発.
  5. 「メインクラスの作成」チェックボックスがオンになっている場合は、オフにします。
  6. 「完了」ボタンをクリックします。

演習 2: フロントエンドの作成

インターフェイス作成プロセスを続行するには、他の必要な GUI 要素が配置される Java コンテナを作成する必要があります。 このアクティビティでは、JFrame 要素を使用してコンテナが作成されます。 コンテナは次の場所に置かれます 新しいパッケージ、「ソースパッケージ」ノードに表示されます。

JFrameコンテナの作成

  1. 「プロジェクト」ウィンドウで、 をクリックします。 右クリック NumberAddition ノードの上にマウスを置き、「新規」>「その他」を選択します。
  2. 「ファイルの作成」ダイアログ・ボックスで、「Swing GUI Forms」カテゴリーと「JFrame Form」ファイル・タイプを選択します。 「次へ」をクリックします。
  3. クラス名として「NumberAdditionUI」と入力します。
  4. my.numberaddition パッケージを選択します。
  5. 「完了」ボタンをクリックします。

IDE は、NumberAddition アプリケーションに NumberAdditionUI フォームと NumberAdditionUI クラスを作成し、GUI ビルダーで NumberAdditionUI フォームを開きます。 my.NumberAddition パッケージはデフォルトのパッケージを置き換えます。

要素の追加: フロントエンドの作成

次に「パレット」ウィンドウを使って、 フロントエンドアプリケーションには JPanel が組み込まれています。 この後、3 つの JLabel 要素 (テキスト ラベル)、3 つの JTextField 要素 (テキスト フィールド)、および 3 つの JButton 要素 (ボタン) が追加されます。 これまで GUI デザイナーを使用したことがない場合、コンポーネントの配置については、「NetBeans IDE での Swing GUI の設計」を参照してください。

上記の要素をドラッグして配置すると、JFrame 要素は下の画像のようになります。

右の場合 トップコーナー IDE にパレット ウィンドウがない場合は、[ウィンドウ] > [パレット] を選択します。

  1. まず、パレットの「Swing Containers」カテゴリからパネルを選択し、それを JFrame にドラッグします。
  2. JPanel が強調表示されます。 [プロパティ] ウィンドウに移動し、[境界線] フィールドの横にある省略記号ボタン (...) をクリックして境界線のスタイルを選択します。
  3. 「境界線」ダイアログ・ボックスで、リストから「TitledBorder」を選択し、「タイトル」フィールドに「番号の追加」と入力します。 [OK] をクリックして変更を保存し、ダイアログ ボックスを閉じます。
  4. 画像に示すように、画面には「Number Addition」というタイトルの空の「JFrame」要素が表示されます。 図のように、3 つの JLabel、3 つの JTextField、および 3 つの JButton を追加します。

要素の名前変更

このステップでは、JFrame 要素に追加された要素の名前を変更します。

  1. jLabel1 をダブルクリックし、ntrcn (「テキスト」プロパティ) を最初の番号に変更します。
  2. jLabel2 をダブルクリックし、テキストを Second Number に変更します。
  3. jLabel3 をダブルクリックし、テキストを Result に変更します。
  4. 取り除く 標準テキスト jTextField1 から。 表示されたテキストを編集可能なテキストに変換できます。 これを行うには、テキストフィールドを右クリックし、ポップアップメニューから「テキストの編集」を選択します。 これには、jTextField1 を元のサイズに復元する必要がある場合があります。 jTextField2 フィールドと jTextField3 フィールドに対してこの手順を繰り返します。
  5. jButton1 の表示テキストを Clear に変更します。 (ボタンのテキストを変更するには、ボタンを右クリックして [テキストの編集] を選択します。または、ボタンをクリックして一時停止し、再度クリックすることもできます。)
  6. jButton2 の表示テキストを Add に変更します。
  7. jButton3 の表示テキストを Exit に変更します。

完成した GUI は以下の画像のようになります。

演習 3: 機能を追加する

この演習では、必要な機能を [追加]、[クリア]、および [終了] ボタンに追加します。 フィールド jTextField1 および jTextField2 はユーザー入力に使用され、jTextField3 はプログラムの結果を表示するために使用されます。 作成したプログラム簡単な計算機です。 それでは始めましょう!

「終了」ボタンに機能を追加する

ボタンが機能するには、各ボタンにイベントへの応答を担当するイベント ハンドラーを割り当てる必要があります。 私たちの場合、マウスをクリックするかキーボードを使用することによって、ボタンのクリック イベントを識別する必要があります。 したがって、「ActionListener」インターフェースは「ActionEvent」イベントの処理に使用されます。

  1. 「終了」ボタンを右クリックします。 ポップアップ メニューから、[イベント] > [アクション] > [アクションの実行] を選択します。 メニューには、プログラムが応答できる他の多くのイベントが含まれていることに注意してください。 actionPerformed イベントを選択すると、IDE は自動的に ActionListener を Exit ボタンに追加し、actionPerformed リスナー メソッドを処理するハンドラー メソッドを作成します。
  2. IDE によってソース コード ウィンドウが自動的に開き、ボタンをクリックしたときに (マウスまたはキーボードで) 実行するアクションを挿入する場所が表示されます。 「ソースコード」ウィンドウには次の内容が含まれている必要があります。 次の行: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( // ここに処理コードを追加します: )
  3. 次に、「終了」ボタンが実行するアクションのコードを追加しましょう。 TODO 行を System.exit(0) に置き換えます。 。 レディコード「終了」ボタンは次のようになります: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) (System.exit(0); )

「クリア」ボタンに機能を追加

  1. 「クリア」ボタン(jButton1)を右クリックします。 表示されるメニューから「イベント > アクション > actionPerformed」を選択します。
  2. 「クリア」ボタンをクリックすると、すべての「jTextField」テキスト フィールドからすべてのテキストが削除されます。 これを行うには、上記と同様のコードを追加します。 完成したソース コードは次のようになります: private void jButton1ActionPerformed(java.awt.event.ActionEvent evt)( jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText(""); )

このコードは、3 つの JTextField すべてからテキストを削除し、空のままにします。

「追加」ボタンに機能を追加する

「追加」ボタンは 3 つのことを行う必要があります。

  1. まず、jTextField1 フィールドと jTextField2 フィールドでユーザーの入力を取得し、それらを「String」タイプから「Float」タイプに変換します。
  2. 次に、2 つの数値の加算が実行されます。
  3. 最後に、合計を次のように変換します。 文字列型それを jTextField3 に配置します。
さぁ、始めよう!
  1. 上部の「デザイン」タブをクリックします ワークスペースをクリックしてフォームデザイン画面に戻ります。
  2. 「追加」ボタン(jButton2)を右クリックします。 ポップアップ メニューから、[イベント] > [アクション] > [アクションの実行] を選択します。
  3. 「追加」ボタンが実行するアクションのコードを追加します。 完成したソース コードは次のようになります: private void jButton2ActionPerformed(java.awt.event.ActionEvent evt)( // まず float 変数を定義します。 float num1, num2, result; // テキストを float 型に解析する必要があります。 . num1 = Float.parseFloat(jTextField1.getText()); num2 = Float.parseFloat(jTextField2.getText()); // 同時に、 = num1+num2 の結果を実行できます。 // 結果の値を float から string に変更します。 jTextField3.setText(String.valueOf(result));

これでプログラムの準備が完了したので、アセンブルと実行を開始できます。

演習 4: プログラムの実行

IDE でプログラムを実行するには、次の手順に従います。

  1. [実行] > [メイン プロジェクトの実行] を選択します (または、F6 キーを押します)。

    注記。 Project NumberAddition にメイン クラスが指定されていないことを示すウィンドウを開いた場合は、同じウィンドウでメイン クラスとして my.NumberAddition.NumberAdditionUI を選択し、[OK] をクリックする必要があります。

IDE の外部でプログラムを実行するには、次の手順に従います。

数秒後、アプリケーションが起動します。

注記。もし、 ダブルクリック JAR ファイルではアプリケーションは起動しません。オペレーティング システムでの JAR ファイルの関連付けの設定の詳細については、「 」を参照してください。

コマンドラインからアプリケーションを実行することもできます。

コマンドラインからアプリケーションを実行するには、次の手順に従います。

  1. コマンド プロンプトまたはターミナル ウィンドウを開きます。
  2. コマンドライン現在のディレクトリを NumberAddition/dist ディレクトリに変更します。
  3. コマンド プロンプトで、次のステートメントを入力します: java -jar NumberAddition.jar

    注記。アプリケーションを実行する前に、my.NumberAddition.NumberAdditionUI がメイン クラスとして設定されていることを確認してください。 これを確認するには、「プロジェクト」パネルで「NumberAddition」プロジェクト ノードを右クリックし、ポップアップ メニューから「プロパティ」を選択し、「プロジェクト プロパティ」ダイアログ ボックスで「実行」カテゴリを選択します。 Main Class フィールドには my.numberaddition.NumberAdditionUI が表示されます。

イベント処理エンジン

このチュートリアルでは、単純なボタンのクリック イベントへの応答について説明しました。 アプリケーションが応答できるイベントは数多くあります。 IDE では、次のように GUI 要素によって処理できる利用可能なイベントのリストを表示できます。

  1. エディターの NumberAdditionUI.java ファイルに戻ります。 「デザイン」タブをクリックして、GUI ビルダーで GUI 構造を表示します。
  2. 任意の GUI 要素を右クリックし、表示されるメニューから「イベント」を選択します。 項目を選択せず​​に、メニューの内容を簡単に探索できるようになりました。
  3. または、「ウィンドウ」メニューから「プロパティ」を選択することもできます。 「プロパティ」ウィンドウで、「イベント」タブをクリックします。 「イベント」タブでは、現在アクティブな GUI 要素に関連付けられたイベント ハンドラーを表示および変更できます。
  4. アプリケーションは、キーの押下、シングル、ダブル、トリプルのクリック、マウス ポインターの移動、ウィンドウのサイズ変更、および入力フォーカスの移動にも応答できます。 「イベント」メニューを使用すると、これらすべてのイベントのイベント ハンドラーを自動的に作成できます。 これらの中で最も一般的なのは「アクション」イベントです。 (入手のため 追加情報イベント処理に関する実践的なアドバイスについては、「Sun Java Events チュートリアル」を参照してください。)

イベントはどのように処理されますか? イベント メニューからイベントを選択すると、IDE はイベント リスナーと呼ばれるものを自動的に作成し、それを開発者コンポーネントに関連付けます。 多くのための 詳細な情報イベント処理プロセスを使用して次のことを実行します。

  1. エディターの NumberAdditionUI.java ファイルに戻ります。 「ソース」タブをクリックして、GUI ソース コードを表示します。
  2. 下にスクロールして、実装された jButton1ActionPerformed() 、 jButton2ActionPerformed() 、および jButton3ActionPerformed() メソッドを確認します。 これらのメソッドはイベント ハンドラーと呼ばれます。
  3. 次に、initComponents() メソッドに進みます。 このメソッドが見つからない場合は、「生成されたコード」行を見つけて、その行の横にある + 記号をクリックして表示します。 隠しメソッド initComponents() 。
  4. initComponents() メソッドを囲む青いブロックに注目してください。 このコードは自動的に生成されました IDEユーザーが変更することはできません。
  5. ここで、initComponents() メソッド自体を見てみましょう。 とりわけ、GUI 要素を初期化し、フォーム上に配置するコードが含まれています。 このコードは、デザイン モードで要素を配置および変更すると、自動的に生成および更新されます。
  6. initComponents() メソッドで、次のスニペットを見つけます。 jButton3.setText("Exit"); jButton3.addActionListener(new java.awt.event.ActionListener() ( public void actionPerformed(java.awt.event.ActionEvent evt) ( jButton3ActionPerformed(evt); ) ));

    この時点で GUI 要素に移動します。 この場合 jButton3 に、「ActionListener」イベント リスナー オブジェクトが追加されます。 「ActionListener」インターフェースには「ActionEvent」オブジェクトの「actionPerformed」メソッドがあり、これは jButton3ActionPerformed イベント ハンドラーを呼び出すだけで実装されます。 このボタンはアクション イベントに応答するようになりました。 ボタンがクリックされるたびに、「ActionEvent」が生成され、イベント リスナー インターフェイスの「actionPerformed」メソッドに渡され、開発者がイベント ハンドラーでそのイベントに対して提供したコードが実行されます。

  7. Java GUI アプリケーション学習カード

ルール2:ユーザーの負担を軽減する

ルール 3: インターフェースに互換性を持たせる

ガイドライン

Tidy スタート メニュー プログラム

結論

文学

導入

「デザインの黄金律は、「他人があなたにしたことを決してしてはいけない」ということです。自分が使用しているソフトウェアの気に入らない点を思い出し、自分が取り組んでいるプログラムでも同じことをしないでください。 」

トレイシー・レナード

ユーザー インターフェイス設計の原則に従う必要があるのはなぜですか?

ソフトウェアはユーザーの要件と希望を考慮して開発する必要があり、システムはユーザーに適応する必要があります。 これが、設計原則が非常に重要である理由です。

コンピュータ ユーザーは、コンピュータを使って作業するときに自分の能力に自信を持ち、高い自尊心を育む成功体験を得ることができます。 彼らのコンピュータを使った行動は、「成功が成功を生む」と特徴付けることができます。 プログラムでのそれぞれの肯定的な経験により、ユーザーはソフトウェアに対する知識を深め、能力のレベルを高めることができます。 優れた教師や教科書と同様に、適切に設計されたインターフェイスは、ユーザーとコンピュータ間の実りある対話を保証します。 優れたインターフェイスは、人がいつも使用しているプログラムの輪から抜け出して新しいプログラムを発見し、インターフェイスとコンピュータがどのように機能するかについての理解を深めます。

インターフェイス設計の原則は、設計に使用できる高レベルの概念とビューです。 ソフトウェア。 どの原則がシステムにとって最も重要で許容できるかを判断する必要があります。

設計を開始するときは、妥協点を探す際に決定的となる最も重要な原則を強調する必要があります。 すべての設計原則に従おうとすると、状況によっては効果が得られず、最終結果に悪影響を及ぼす可能性があります。 原則は行動への指針です。

ユーザー インターフェイス設計の 3 つの原則は次のように定式化されます。

1) インターフェースのユーザー制御。

2) ユーザーのメモリ負荷を軽減します。

3) ユーザーインターフェイスの一貫性。

ユーザー インターフェイスの設計原則を見つける場所

ハンセンは、設計原則の最初のリストを提示しました。 原則は次のとおりです。

1) ユーザーを知る。

2)暗記を減らす。

3) 運用を最適化する。

4) エラーを排除します。

多くの 大手メーカーオペレーティング システムを開発し、新製品を市場にリリースし、関連するマニュアルや説明書を発行します。 これらの出版物は、インターフェイス設計へのアプローチの原則を明らかにします。 マニュアルは Apple Computer, Inc. によって作成されました。 (1992)、IBM コーポレーション (1992)、 マイクロソフト(1995) および UNIX OSF/Motif (1993)。

読者はこれらの出版物を教材として使用できます。 インターフェイスの用語はマニュアルによって異なる場合がありますが、内容の焦点、複雑さのレベル、説明されているユーザー インターフェイスの原則はすべての書籍で同じです。

原則に従うことの重要性

「インターフェイスの非互換性により、大企業は生産性の低下とコストの増加で数百万ドルの損失を被る可能性があります。 テクニカルサポート「 - ジェシー・ブリースト。

これらの原則は、あらゆるタイプとスタイルのインターフェイスのすべてのソフトウェアとハ​​ードウェアに適用されます。 かなり長い時間をかけて開発され、現場で研究が行われました。 ソフトウェアインターフェース、開発が行われ、多くのユーザーが コンピュータプラットフォーム、Macintosh および PC を含みます。

これらの原則は時の試練と新しい原則の出現に耐えてきました。 コンピューターテクノロジー。 ヤコブ・ニールセン氏は、「たとえプログラムが入力、モーション認識、ライブビデオ画像用のDataGloveを備えた未来的な3Dデザインを持っていたとしても、原則は基本的なものであり続けるでしょう。なぜならそれらは、マシンとの対話の基本的な考え方を表現しているからです。」命令します。」

これらの原則の解釈は以下によって異なります。 ハードウェア, オペレーティング·システム、ユーザー インターフェイスのコンポーネントとそのタスク。 多くの場合、ビジネス上の決定により、設計者の原則の使用が無効になります。 ユーザー モデルとデザイナー モデルも異なり、原則がどのように適用されるかに影響を与えます。 プロジェクト開発の重要な段階で、「次に何が起こるの?」という疑問が生じることがあります。 答えは「ユーザーが望むものなら何でも!」となるはずです。

インターフェイスを構築するための最適な原則を選択する決定は、設計チームのメンバー全員が共同で行う必要があります。 これらのソリューションは、ソフトウェア製品の購入性と開発の向上に役立つはずです。

ユーザーインターフェイスの設計ルール

「よりシンプルにしますが、より原始的になるのは避けてください。」

アルバート・アインシュタイン

ルール 1: ユーザーに制御を与える

経験豊富なデザイナーにより、ユーザーは独自の判断でいくつかの問題を解決できます。 建築家は、複雑な建物が完成したら、それらの間に歩行者用の通路を敷設しなければなりません。 人々がどこでサイトを通過するのかはまだ正確にはわかっていません。 したがって、建物の建設と同時に通路が敷設されることはありません。 家々の間には「芝生の上を歩いてください」と書かれた看板が立てられている。 しばらくして、建設業者が戻ってきて、住民の「意志」に従って、踏み固められた道をアスファルトで埋めます。

ユーザーがシステムを制御できるようにするための原則:

1) モードを賢く使用します。

2) ユーザーに選択の機会を提供します: マウス、キーボード、または両方の組み合わせを使用して作業する。

3) ユーザーが注意を集中できるようにします。

4) 彼の仕事に役立つメッセージを示します。

5) 即時および可逆的なアクションとフィードバックのための条件を作成します。

6) 適切な経路と出口を提供する。

7) さまざまなレベルのトレーニングを受けたユーザーにシステムを適応させます。

8)する ユーザーインターフェースより分かりやすい。

9) ユーザーにインターフェースを好みに合わせてカスタマイズする機会を与えます。

10) ユーザーがインターフェイス オブジェクトを直接操作できるようにします。

モードを賢く使用する

モードは必ずしも悪いわけではありません。 人が必要なモードを選択できるようにする必要があります。 インターフェイスは、ユーザーが快適に操作できるように自然なものである必要があります。 ユーザーは、作業中に挿入モードに切り替えたり上書きしたりすることを考えません。 ワードプロセッサ- これは完全に合理的で自然なことです。

ユーザーにマウスとキーボードの使用を許可する

マウスの代わりにキーボードを使用して作業できる機能。 これは、ユーザーがそれを使用できないか、またはそれを持っていないだけで、作業が容易になることを意味します。 ツールバーは、マウスを使用する際の作業を高速化するように設計されています。 ただし、キーボードで作業している場合は、それらにアクセスできません。そのような場合のために、「ドロップダウン」メニューが提供されています。

ユーザーが注意を切り替えることができるようにする

開始された一連のアクションを終了するようユーザーに強制しないでください。 キャンセルするかデータを保存して中断したところに戻るかの選択肢を与えます。 ユーザーがプログラムでの作業プロセスを制御できるようにします。

説明メッセージとテキストを表示する

インターフェイス全体でユーザーフレンドリーな用語を使用してください。 ビットやバイトについて知る必要はありません。

メッセージや招待状では適切なトーンを選択する必要があります。 問題やエラーに対して自分自身を保証することも同様に重要です。 用語が不適切であったり、口調が間違っていたりすると、ユーザーは発生したエラーについて自分を責めることになります。

即座に元に戻せるアクションとフィードバックを提供する

各ソフトウェア製品には UNDO および REDO 機能が含まれている必要があります。 ユーザーには次のことを通知する必要があります この行動キャンセルはできませんので、可能であれば許可してください 代替アクション。 現時点で何が起こっているかを常に人に知らせてください。

明確な道と出口を提供する

ユーザーは、どのインターフェイスでも楽しく作業できるはずです。 ソフトウェア製品。 業界で使用されているインターフェイスであっても、ユーザーがボタンを押したり、別の画面に移動したりすることを恐れてはいけません。 インターネットの侵入は、ナビゲーションがインターネット上の主要なインタラクティブ技術であることを示しました。 ユーザーがログイン方法を理解している場合 希望のページ WWW の場合、80% の確率でインターフェイスを理解できます。 人々はブラウザのテクニックを非常に早く習得します。

さまざまなスキルレベルのユーザーに対応する

「犠牲」をしないでください 経験豊富なユーザー一般人の利益のために。 私たちは彼らを養わなければなりません 高速アクセス機能をプログラムするために。 1 つのマクロ コマンドの使用に慣れている場合は、アクションを実行するための複数の手順に退屈させないでください。

ユーザーインターフェースを「透明」にする

ユーザー インターフェイスは、ソフトウェア製品の「神話的な」部分です。 優れたプロジェクトでは、ユーザーはその「存在」すら感じません。 設計が悪いと、ユーザーは多大な労力を費やす必要があります。 有効活用ソフトウェア製品。 インターフェイスの目的は、ユーザーがコンピューターの「内部」にいるかのように感じて、オブジェクトを自由に操作して作業できるようにすることです。 これは「透過的」インターフェイスと呼ばれます。

ユーザー インターフェイスに対する従来のグラフィカルなアプローチは、Sutherland、Newman らの研究に関連しており、そこでの対話は、再生を備えたグラフィカル ディスプレイとライト ペンの使用に基づいています。 グラフィック ダイアログのさらなる発展は、インタラクティブ コンピュータ グラフィックス システムの分野の進歩と関連しており、それが国際標準の形での規制につながりました。
GKS は、最初の国際グラフィックス標準です。 「ワークステーション」の概念と論理入力デバイス (キーボード、選択、ロケーター、バリュエーター、ポインター、一連の座標の入力) が初めて導入されました。 残念ながら、ベクトル描画パラダイムが優位にあった時代に考案されました。 したがって、対話サポートの弱点は、新しいデバイスを入力したり、画面上のデバイス画像を変更したりすることができないことです。 アプリケーションプログラム(グラフィックス パッケージのユーザー) そのため、ダイアログを構成するときに主にシンボリック入力を使用する必要があります。 GKS でのダイアログの実装はアプリケーション プログラムの特権であり、個別に設計することはできません。
グラフィックスの第二の方向性 - ラスターグラフィックスその後のすべてのインタラクティブ システム開発に非常に大きな影響を与えました。 最新のワークステーションのユーザー インターフェイスの主な機能はすべて、Xerox PARC の成果であるウィンドウ管理から派生しています。

  • 使用法 グラフィックシンボル(「アイコン」) オブジェクトを表すための
  • 直接操作と呼ばれるインタラクションのスタイル
  • 画面位置決めデバイスとしてのマウスの人気
  • オブジェクト指向プログラミング スタイル。
それ以来、ユーザー インターフェイスを作成および管理するツールの分類システムは、次の 3 つのレベルで考慮されてきました。
  1. ウィンドウ管理システム (WMS - ウィンドウ マネージャー システム);
  2. 特殊なツール。
    • 通常 (MacIntosh、SunView...)
    • オブジェクト指向 (Smalltalk-80、Andrew、InterView)
  3. ユーザーインターフェイス管理システム。
以下のセクションでは、 簡単な特徴、これらの各レベルのステータスと機能の説明。

ウィンドウ管理システム (WMS)

マルチウィンドウ技術により、ユーザーは 1 つの画面でアクセスできるよりも多くの情報にアクセスできます。 Windows では、複数の情報ソースへのアクセスが可能です。 ユーザーは、複数のソースからの情報を組み合わせて、次の情報を探索できます。 さまざまなレベル詳細を説明します。 マルチプログラム モードでは、複数の並列タスクを管理できます。 各タスクの入力と出力は次のように表示されます。 さまざまなウィンドウ、ユーザーは必要に応じて各タスクに集中できます。
WMS、 動作環境ウィンドウ関連の管理リソースは以下をサポートします。

  • 重なり合うウィンドウ (画面の長方形の領域)。
  • さまざまな入力デバイス (デジタルおよびアナログ)。
  • カーソル;
  • フォント。
オペレータとアプリケーション プログラム側のインターフェイスには、ウィンドウの作成/破棄、ウィンドウのサイズと位置の変更、ウィンドウの最上部への移動、ウィンドウのアイコンへの圧縮、およびウィンドウの復元のためのコマンドが含まれています。 含まれています グラフィックスライブラリ出力 (基本プリミティブのみ) とイベント ハンドラー。 したがって、ユーザー インターフェイスを実装するためのメカニズムがいくつかあります。
可能な WMS 実装には次の 2 種類があります。 基本システム(カーネル システム) は 1 台のマシン上で実行され、ネットワーク (ネットワーク指向) はクライアント/サーバー モデルに基づいて実装されます。

ユーザーインターフェイス作成ツールキット