Clever Geek Handbook

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













組み込みシステムと産業システムは、設計開発における私のお気に入りのトピックです。 レーザーまたはヨットのソフトウェアインターフェイスを作成するとき、これは純粋な話題と創造性です。

先週、UI開発者としてexpoelectronicaとembeddeddayを訪れました。 目標は、新製品を実際に見て、感じ、経験を積むことでした。

その結果、さまざまなシステムの100を超えるGUIを調べましたが、一連の経験に問題がありました...







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







注意！ たくさんの写真！







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







設計全般について



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







産業システムに「ささいなものと宝石」は必要ないという読者の反応を予測して、私は答えます：

UIデザインは単なる美しい画像ではなく、ユーザーに情報を提示し、それと対話する方法です。 この記事のトピックも、1日8時間以上のセッションです。

デザインは、標準のシステムGUIに基づいて、アニメーションなしでモダンではないが、利便性、速度、使いやすさの点で優れています。

また、逆に、高価な暗い色で美しい画面を描くことができ、素人の目を楽しませることができますが、実際には不便であり、ナビゲーションの見当がつかず、情報価値がありません。 多くの場合、これには視覚部分の遅い操作も伴います。 鉄の開発者は、原則として、そのような問題についてほとんど経験がありません。







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







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



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

これは、このタイプの露出されたデバイスの数であり、2ダース以上です。



















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







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



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



















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









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







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







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



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







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





















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

これが良い例です：





















ロゴについて



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































複製は必要ありません。 最も目立つ場所にはすでに優れたバッジがあり、ユーザーはシステムの電源を入れる前でもそれを見ました。

ログイン画面またはスクリーンセーバーのロゴ-はい、動作モードで-貴重なスペースの軽率な使用。









開発を使用する















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







<申し訳ありませんが、私は今、レーザーをscるでしょう、私は黙っておくことができません>

誰がそれを設計したのかわかりませんが、彼は明らかに彼の「工業用」コンピューターで彼の車輪を動かしませんでした。









</レーザーのoldり方>







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

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













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









, .









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







画面設定を考慮する



物理的な画面サイズと解像度、ユーザーの目からの距離、作業角度が重要です。

通常、これらのパラメーターは事前にわかっています。 そうでない場合は、特にタッチインターフェイスを大きくする必要があります。







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









,









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

このシンプルなテクニックは、設計の初期段階でサイズエラーを回避するのに役立ちます。







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



















スペースの合理的な使用















モニターが小さいほど、UI要素の物理的寸法に注意を払う必要があります。

最初に目を引くのは、テストの結果である碑文PASSです（合格、すべて正常です）。







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







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







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



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







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



















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







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









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







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







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







ダークVSライトGUI



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









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

また、明るいUIは、e-inkディスプレイで暗くなります。







ユーザーを見る



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



















出展者が上部ツールバーを配置し、画面の3分の1を取り、垂直ツールバーに変えていることに注目してください。

使用する方が便利なため、水平面に沿ったパラメーターの無秩序な広がりよりも有益です。

開発者は、このパネルを通常の形式でのみユーザーに作成できます。







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



さまざまなエディターの開発者は、互換性のないものを結合することを好みます。

アプリケーションでナビゲーションを設計するとき、ウィンドウのナビゲーション構造の選択は、家の基礎の選択に匹敵します。













リボンを使用する場合、リボンはツールのユニバーサルグループであるため、1ダースのサイドパネルを使用しないでください。

ドッキングウィンドウが必要な場合は、TabControlではなくドッキングを行います。

別のTabControlをTabControlに挿入し、さらにそのすぐ下に挿入する場合-これは、ナビゲーションに問題がある最初の兆候です。







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



















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







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







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





















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







スキームと図面















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







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







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







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







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









WPF. 10-









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


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





制御盤 原子炉 エッチング







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

写真を見るときの重要なポイント：









アイコンについて



アイコンをダウンロードして使用することはできません。 あなたは著作権を侵害しています。

真剣に、単位あたり数万から数百万ルーブルの鉄を売って、1000ルーブルを使います。 標準のアイコンセット（デザイナーがいない場合）は、非常に合理的です。









,









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







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









, . UI .









スタイルの統一















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







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









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







More articles:


All Articles