組み込みインターフェース設計

組み込みシステムと産業システムは、設計開発における私のお気に入りのトピックです。 レーザーまたはヨットのソフトウェアインターフェイスを作成するとき、これは純粋な話題と創造性です。
先週、UI開発者としてexpoelectronicaとembeddeddayを訪れました。 目標は、新製品を実際に見て、感じ、経験を積むことでした。
その結果、さまざまなシステムの100を超えるGUIを調べましたが、一連の経験に問題がありました...

どうにかして業界全体の発展を助けることができると考えて、2019年の展示会の特定の例を分析し、インターフェースのエラーを分析することにしました。 次に、特定のシステムの開発者だけでなく、他のシステムの開発者にも役立つ可能性のある推奨事項を示します。 すべてのロゴは、誰かを怒らせないように隠されています。

注意！ たくさんの写真！

いくつかの写真の品質には謝罪しますが、写真は会話とテストの過程で「自分のために」作られました。

設計全般について

展示会で発表されたシステムのほとんどは、インターフェース設計について考えている人がほとんどいなかった2000年代初期に見たものと違いはありません。

産業システムに「ささいなものと宝石」は必要ないという読者の反応を予測して、私は答えます：
UIデザインは単なる美しい画像ではなく、ユーザーに情報を提示し、それと対話する方法です。 この記事のトピックも、1日8時間以上のセッションです。

デザインは、標準のシステムGUIに基づいて、アニメーションなしでモダンではないが、利便性、速度、使いやすさの点で優れています。
また、逆に、高価な暗い色で美しい画面を描くことができ、素人の目を楽しませることができますが、実際には不便であり、ナビゲーションの見当がつかず、情報価値がありません。 多くの場合、これには視覚部分の遅い操作も伴います。 鉄の開発者は、原則として、そのような問題についてほとんど経験がありません。

美しさは相対的な概念ですが、経験から、優れたデザインは常に美しく、速く、便利です。

良い例を探してください-オシロスコープを見てください

ショーのすべてのオシロスコープは、デザインの点ですべてが得意でした。 私の同僚は、このタイプのデバイスが長い間市場に存在していることを示唆していました（1932年にCRTスクリーンを備えた最初のオシロスコープが導入されました）。
これは、このタイプの露出されたデバイスの数であり、2ダース以上です。

残念ながら、オシロスコープは私の喜びと美的喜びの感覚を喚起した唯一の展示です。

一般的なガイドラインを使用しない

（マテリアルデザイン、Windows Metroなど）

そのようなアプローチを間違いと呼ぶことはできません。それはむしろ推奨事項です。

• 経験によると、ガイドを使用できるのはデザイナーだけです（ただし、多くの場合、ガイドはまったく異なる方法で配置されます）
• ガイドラインは、特定のプラットフォーム（または製品）用に作成されます。 たとえば、QT、HTML、さらにはWPFのアプリケーションでWin 10のフラットスタイルを使用すると、視覚部分の品質の点でオリジナルに到達しない「偽物」を作成します（多くの人はそうではありません）。
• ベースプラットフォームの主要機能であるアニメーション、ナビゲーション、検証、通知などを使用することはできません。
• これらはすべて、自家製のアニメーションをスムーズに描画できないシンプルなアイアンによって補完されます（その実装は、開発者にとっては時間がかかりますが、ライブラリはGitHubから150 MBでダウンロードされます）。
• ここに、win10タブレットのような応答性のない産業用タッチスクリーンを追加します。
• さらに、このアプローチは、オリジナルを実際に使用する人々の期待を破壊します。

フラットスタイルMetroはUWPプラットフォームのみ、iOSはiOS専用、素材はAndroid / Flutter

そのような場合（本当に必要な場合）に最も合理的なのは、何らかのガイドに基づいてリモートでカスタムスタイルを作成することです。 最終的な見積もりにおけるこのようなアプローチは、たとえばWindowsのMaterial Designよりも安価です。

インターフェイスの設計は、鉄の設計と同じでなければなりません

ここでは、すべてが明確だと思います。

これは、会社の色が赤である場合、すべてを赤で着色する必要があるという意味ではありません。

• 製造元のWebサイトでは、会社の色は明るい赤です。 ほとんどの場合、独自のRGB値を使用していましたが、画面の輝度が低く、色が不正確であるため、トマトが汚れていました。 開発者がカラーマッチングに30分を費やした場合、見た目は悪くありませんが、少なくとも正しい色合いでは見えます。
• このUIは読みやすいブロック図ではありませんが、以下の図についてです。

インターフェイスが（特にATMのように画面の側面にある）「物理的な」ボタン、キーボード、トラックボール、ジョイスティックなどを使用する場合、これを考慮する必要があります。
これが良い例です：

• 一見、クリックする場所は明確ですが、押されたタブボタンのテキストは判読できません。

ロゴについて

最もよくある間違いの1つは、ソフトウェアヘッダーにあるメーカーのロゴですが、ロゴは既にデバイスに存在しています。 多くの場合、モニターフレームに直接配置されます。

複製は必要ありません。 最も目立つ場所にはすでに優れたバッジがあり、ユーザーはシステムの電源を入れる前でもそれを見ました。
ログイン画面またはスクリーンセーバーのロゴ-はい、動作モードで-貴重なスペースの軽率な使用。

• やはり読みにくいフローチャート。

開発を使用する

私はレーザーが大好きです。 レーザーはクールです。 しかし、この写真を見れば見るほど、そのようなレーザーは必要なくなります。 ファッショナブルな緑の箱の照明でさえ節約できません。

<申し訳ありませんが、私は今、レーザーをscるでしょう、私は黙っておくことができません>
誰がそれを設計したのかわかりませんが、彼は明らかに彼の「工業用」コンピューターで彼の車輪を動かしませんでした。

• おそらく非常に便利なインターフェイスがあるかもしれませんが、ユーザーはそれを感謝せず、塗装された金属の限られたスペースで安価なマウスを動かします。 また、体重の手。
• Numの電球とキーボードキャップの下の人を大切にした穴に感動しました。 これは最も一般的な（つまり、産業用ではない）キーボードで、1か月後に最も「台無しにしない」で泥の中になります。 立ち往生している「エスケープ」レーザーで作業するのはまったく面白くない。 キーボードをきれいにする唯一の方法は、重量のあるデザイン全体を分解することです。
• モニターコントロールボタン用のスロット...おそらくこれは非常に高精度のレーザーですが、「電源」ボタンが完全に収まるように5ミリメートル低くカットします-メーカーでも機能しませんでした。 はい、組み込みの画面ではなく、最も一般的なデスクトップモニターが内部に詰まっています。
• 緑のSTOPボタン。 このようなボタンがオレンジと赤でバックライトで照らされていることは確かです。 誰かが誤って緊急真菌を押したのだろうか？それは碑文のSTOPもはっきりしているので、明らかに目立つのですか？

</レーザーのoldり方>

これはUIデザインと何の関係がありますか？ 直接。 システムとのユーザーインタラクションは、I / Oデバイスから始まります。 問題のあるハードウェアにインストールされたソフトウェアはすべて失われます。

このレーザーのスタンドから10メートルは、工業用キーボードを備えたディスプレイケースでした。

さらに20メートル歩くと、近代的な工業用ボタンのあるスタンドが表示されます。

, .

実際、鉄はまったく必要ありません。 写真は、フルスクリーンモードがなくてもWindows7でプログラムが実行され、組み込み技術がないことを示しています。 ユーザーがこのソフトウェアを使用してお気に入りのラップトップをレーザーに直接接続できなかったのはなぜですか？ 展示会にはそのような解決策がいくつかありましたが、そのような接続には何の問題もありません。

画面設定を考慮する

物理的な画面サイズと解像度、ユーザーの目からの距離、作業角度が重要です。
通常、これらのパラメーターは事前にわかっています。 そうでない場合は、特にタッチインターフェイスを大きくする必要があります。

すべてが非常に浅い場合：

,

最初のレイアウトが描画された後-ダウンロードできない場合はデバイスに画像をロードします-段ボールからフルサイズの画面を切り取り、印刷されたインターフェイスを段ボールの下に置き、ガラスで上部を押します。 理想的には、デバイスの画面のくぼみを考慮してください。 この単純なアプローチにより、空間でUIを確認し、ボタン用に選択したサイズの正確性を評価し、強調するものと減らすものを理解することができます。 「作業」の角度からシステムを見て、将来のシステムを見て回ってください。 手が要素をクリックするのが便利かどうかを確認します。
このシンプルなテクニックは、設計の初期段階でサイズエラーを回避するのに役立ちます。

ソフトウェア設計は明らかに特定の画面用です。

スペースの合理的な使用

モニターが小さいほど、UI要素の物理的寸法に注意を払う必要があります。
最初に目を引くのは、テストの結果である碑文PASSです（合格、すべて正常です）。

小さな低解像度画面では、これは明らかに人間工学的ではありません。

おそらく、そのような巨人主義は何らかの方法で正当化されます。 碑文は20メートルからはっきりと見えます。 これらのデバイスの使用方法に関するビデオを少しグーグルで見て、私は、画面のこの四分の一を占有する必要はほとんどないという結論に達しました。

ディスプレイの色の制限を考慮する

デバイスへの画像の簡単なアップロードにより、色が失われているかどうか、背景のグラデーションの「はしご」がどれだけ悪いかを理解できます。

異なる「作業」角度を見るのを忘れないでください。 たとえば、「上」のスタイリッシュな濃い青の背景は、TNマトリックスでは次のようになります。

おそらく、このUIが誤って「ハイライト」付きの写真で出てきたのでしょう。 ライブカラーはより良く見えました。 遠くから、私も彼が好きだった。

このインターフェースをもう少し分析してみましょう。

• 明示的なグリッドの問題。 どこか近く、どこかで大きなギャップ。 左側がモニターフレームに対して押しすぎているため、そのアイコンは一般にゼロでインデントされています（ただし、右側のマージンは大きいです）
• デザイナーの一番下の行には十分なボタンがありませんでした。 システムフォームに残ります。
• トグルスイッチ要素。 背景をオン状態でペイントすることをお勧めします。そうしないと、スイッチの位置を理解する上で問題が発生します。 赤い「トグル」トグルを見てください。オンかオフですか？ またはその検証 設定に何か問題がありますか？
• 同じタイプの要素への署名は、同じにすることが望ましい。 どこかが大文字、どこかが小さく、異なるフォントとサイズ。
• 2スタートボタン、私は間違っている可能性がありますが、それらは異なる目的のためであるようで、簡単に混乱する可能性があります。
• シャットダウンボタンが見つかりません。

多くの場合、標準モニターのUI（特にデザイナーがAppleのSuper IPSを持っている場合）は、このデザインが作成されたディスプレイのUIとは異なって見えます。 物理学 冷酷なあなた... 産業用モニターの色特性は、プロとはほど遠いものです。

ネイティブ環境ですべてのテストを実施することをお勧めします。路上のタッチキオスクとショッピングセンターの敷地は2つの異なるものです。

上の写真を見て、別の重要な質問に答えます。

ダークVSライトGUI

実践では、次の点で暗闇の方が優れていることが示されています。

• 組み込みシステムのディスプレイは通常、安価な中国製または高価な工業用に使用されます。 演色性と明るさの点では、どちらも弱いため、白と黒に近い灰色のグラデーションに常に問題があります。 つまり コントラストを上げる必要があります。 2つのパネルを互いに分離するという暗いトピックの場合、背景のスペクトルの色を十分に大きくして（ディスプレイにはっきりと異なるように表示することができます）、明るいUIではさらに困難になります。 このアプローチでは、汚れた灰色になり、すべてが十分に明るく見えなくなります。
• そのようなディスプレイの頻繁な不均一な照明のために、背景に均一な明るい色合いを表示することは非常に難しく、コーナーで暗くなる可能性があります。 暗いUIにはこの欠点はありません。
• 黒の背景は、「信号」色の自由度を高めます。 組み込みシステムの場合、これは重要です。
  黒い背景に対して、ライトグリーン、ブルー、パープル、イエロー、オレンジの電球（LED）を簡単に表示し、エラーのために赤いバックライトを残しておくことができます。 わずかなぼかしは、単に「グロー」の効果を出すのに十分です。 すべての色は、遠くからでもユーザーにはっきりと見えます。 白い背景の黄色は、ぼやけていてもまったく目立ちません。
  実際、ライトインターフェイスで強調できるのは、青、赤、緑だけです。 たとえば、要素の原色として青を使用し、検証に赤を使用すると、緑だけで、おそらくオレンジ色の陰影があるだけで、明らかに十分ではないことがわかります。
• モニターは光源です。 8時間の営業日がある暗い部屋では、1年で明るいUIを使用すると、ユーザーの鼻にメガネがかかります。
• これはおしゃれです。 VKのダークテーマに関するソーシャルメディアでの今後のフラッシュモブの人気を見てください。 同じredditは、最近暗いスキームを作りました。 Dark VisualStudio、Photoshop、3Dパッケージなど。ユーザーは気に入っています。

明るいインターフェイスは、白い​​ケースでは見栄えがします。 デザイナーの適切なスキルがあれば、完全な「WOW」を作成できます。 しかし、良い明るいディスプレイと明るい部屋が必要です。
また、明るいUIは、e-inkディスプレイで暗くなります。

ユーザーを見る

車輪を再発明する必要はありません。ユーザー自身が好みを教えてくれます。

出展者が上部ツールバーを配置し、画面の3分の1を取り、垂直ツールバーに変えていることに注目してください。
使用する方が便利なため、水平面に沿ったパラメーターの無秩序な広がりよりも有益です。
開発者は、このパネルを通常の形式でのみユーザーに作成できます。

ドッキングウィンドウ+ MDIウィンドウ+リボン+タブコントロール

さまざまなエディターの開発者は、互換性のないものを結合することを好みます。
アプリケーションでナビゲーションを設計するとき、ウィンドウのナビゲーション構造の選択は、家の基礎の選択に匹敵します。

リボンを使用する場合、リボンはツールのユニバーサルグループであるため、1ダースのサイドパネルを使用しないでください。
ドッキングウィンドウが必要な場合は、TabControlではなくドッキングを行います。
別のTabControlをTabControlに挿入し、さらにそのすぐ下に挿入する場合-これは、ナビゲーションに問題がある最初の兆候です。

MDIウィンドウは、2003年に道徳的に廃止されたインターフェイスです。 現代の開発プラットフォームでは、コンポーネントでさえももはやそれではありませんが、多くの人々は古代の技術でプロジェクトを継続的に構築し続けています。

このようなアーキテクチャのサポートは毎年ますます複雑になっています。 これに関する最新のUIは、原則として不可能です。

しかし、これはあなたがうまくできないという意味ではありません。

ここでは、古い標準コンポーネントの優れたインターフェースがあります。

• MDI +ドッキング、しかし、私は欠陥を見つけることができません
• Delphiで行われていることと非常に似ています。 以前は、同様のレイアウトとこの形式のタブが大好きでした。
• MDIを正しく使用する（ドッキングのキャンバスと持ち帰りツールのみ）
• 優れた概略図
• ラコニックアイコンセット
• Win10を搭載

この質問のトピックは広すぎるので、おそらく私はやめます。

スキームと図面

このブロック図の見栄えを良くするには、汚れた灰色の背景を白に置き換え、ラベルを暗くするだけです。

これは、紙に描かれた色として認識され、目を痛めることはありません。

デザイナーがいない場合は、一般的に行ってください。

暗い背景にブロック図が必要な場合は、設計用にすべてのコンポーネントを個別に作成する必要があります（図面の下の「スキュー」は機能しません）。

結果は次のようになります。

WPF. 10-

システムに実際に多くのフローチャートがある場合、またはライン/機器/プロセスの構成が大きく異なり、特定のケースのUIデザインを描くことができない場合、フローチャートが必要です。

私はデザイナーです、そうですね

制御盤 原子炉 エッチング

これは展示会で見た中で最悪のUIです。 この記事で書いているすべての悪い点に焦点を当てました。 ソフトウェアの外観、優れた高価なハードウェアに対する利便性についての私の控えめな質問に、彼らはそれを振り払っただけで、「すでにデザイナーがいます」と言った。 まあ、彼らが言うように、味と色。
写真を見るときの重要なポイント：

• 従来のレイアウトパネルを鮮やかで派手な色で塗らないでください。
• そうでないものは表示しません（予備のボタンと明るい無効な要素）。
• インタラクティブなボタン要素を単純なヘッダーとパネルから明確に分離します。
• マウスまたはタッチインターフェイスを決定します。
• 生産システムで同時に10個のウィンドウを操作することは問題であり、機能ではありません。複数の参加者が展示会でプレゼンテーションを試み、可能な限り多くのウィンドウを開き、いくつかのケースでは2台のモニターで表示しようとしたためです。

アイコンについて

アイコンをダウンロードして使用することはできません。 あなたは著作権を侵害しています。
真剣に、単位あたり数万から数百万ルーブルの鉄を売って、1000ルーブルを使います。 標準のアイコンセット（デザイナーがいない場合）は、非常に合理的です。

,

すべてのアイコンが同じスタイルであることも重要です。 そして、すべてのアイコンが白であることではありません。 プレーンアイコンのファッションは一時的なものであり、デバイスは今後5〜20年間使用されます。

アイコンの主な目的は、説明的な碑文を読まずに情報を読むために、馴染みのある（または象徴的な）画像をユーザーの目を引くことです。 つまり -作業の速度を上げます。

, . UI .

スタイルの統一

同じタイプの要素を等しく作成することが重要です。

このインターフェイスを解析したい：

• この画面では、下の2つのグループ「起動」と「モード」にアイコン付きの上部グループのスタイルにするように求められます。
• インターフェースは散在しており、単一のグリッドとサイズはありません。 「オプション」ブロックのボタンは不当に小さいです。
• スライダーの「期間」の値は100分の1に丸められます。 スライダーを動かすことは、そのような正確さを見つけるのが非常に難しいです。 少なくとも「-0.01」ボタンと「+0.01」ボタンを追加する必要があります。
• 右側のパワースピナーの最大数は16.20です。 18.88の数字に合わせて、ボタン「<」と「>」をわずかに押す必要があります。
• , .

GUI, .

, , AR, — . . , , , ( ).

UI . . , . , , .

90% GUI Windows. , . - WPF ( ), .

: “ — 40, ". , , 40 , Nokia. , UI , 8 5 .

,

13 3 . Hakko Electronics. . , , , , , , — . , " " . , UI 8- ( 12-15 ).

. , . . , , . , MS-DOS Logitech 100 .

, , - «Enter» ?

– , - .

10 , . , .

– . , , . "" . , ( , , , .)

おわりに

この問題の主なことは、チェックマークと証明書用ではなく、パートナーのテスト用ではなく、テストモードでの部品の1回限りのレーザー切断用ではなく、Dribbleの写真（デザイナー用）ではなく、人々のために製品インターフェイスを作成していることを覚えておいてください1日8〜15時間ソフトウェアで動作します。

もっと見せて伝えたいです。これは展示会のすべての資料ではありませんが、記事は非常に膨大でした。さて、情報があなたにとって有用だったなら。

PS特定のアイロンの仕事のデバイスを理解していない場合、私は謝罪し、特定のシステムの機能について誤った意見を導きました。エラーを指摘していただければ嬉しいです。