web-dev-qa-db-ja.com

1ページに一連のボタンを表示する

現在UWPでアプリを開発しており、ページにいくつかのボタンを表示する必要があります。これらのボタンはすべて必須であり、シリアルポートを介して接続されたデバイスのメンテナンス/デバッグ用であるため、同じページに配置したいと考えています。

だから基本的に私はどういうわけか表示する必要があるボタンの束を持っています。しかし、見栄えがよく、ユーザーフレンドリーでもないので、それらを隣り合わせにしたくありません。

それらをユーザーフレンドリーな方法で表示するための可能な方法はありますか?

ダニエル、こんにちは

編集:

ボタンは現在2つの異なるページにあります。私は最初にボタンの機能に焦点を当てましたが、それらが完了したので、少し順序/デザインを取り入れる必要があります。

私はデザイナーでもクリエイティブな人でもありません。私は通常、コードを書くだけです...

ページ1: - enter image description here

ページ2: - enter image description here

5
Daniel

これらのボタンを並べ替える方法についていくつかの概念を説明する前に、私はあなたにコメントしたいと思います「私はデザイナーでもクリエイティブな人でもありません。通常、コードを書くだけです...」言い訳。話題から外れたため、箱の中に。

あなたのソフトウェアをこのように考えてください-あなたは人々にそれを使ってもらいたいですよね?次に、「ソフトウェアは機能しますが、UIはひどい」または「不親切なUIを使用できなかったため、ソフトウェアかどうかわからない」というコメントを聞きたくないので、UIを魅力的にする必要があります。便利です。」一部の人々は、あなたのマインドフロー(提案されたUIで表現される)を発見する忍耐力を持っているかもしれません。私を信じて、私はそこに行ったことがあります。私はそれをしたので、二度と戻ってくることはありません。このサイトは、ユーザーフレンドリーなアプリの設計に関する洞察を得るのに最適な場所です。

元の質問に戻ります。コメントで述べたように、ボタンをグループ化できます。最初のページには、RequestsConnectionの2つのグループがあります。一般的なCancel all tasksボタンもあると思います。 DRY(繰り返さないでください))ルールを使用して、ボタンにいくつかの依存関係を追加しenabledステータスを次のように表示します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

現在、ステータス情報はデバイスが接続されているかどうかを示し、ボタン(2つではなく1つ)がConnectDisconnectステータスによって異なります。

現時点で機能がないボタンはすべて無効(グレー表示)にする必要があります。つまり、デバイスが切断されている場合、Namesマージンなど(私があなたのデバイスのロジックを正しく仮定している場合)。同じことがすべてのタスクをキャンセルにも当てはまります。保留中のタスクがない場合は、ボタンを無効にする必要があります。

これにより、ソフトウェアのステータスに関する追加のフィードバックがユーザーに提供されます。 「なぜ最初に一般的なデバイスステータスが報告されるのですか?」 -このステータスはソフトウェアの動作にとって非常に重要であると思います。そのため、最初に報告する必要があります。

そして、2番目のページについても、Life testStop life testのように、互いに矛盾するボタンを組み合わせることができますデバイスの状態に応じてラベルを変更するものに。残りは、たとえば次のように論理的にグループ化できます。

mockup

bmmlソースをダウンロード

今回はDRYルールに理由があって少しルールを廃止しました-各ボタンに「設定」をドロップする設定のWordは、それらをいくらか明確にするでしょう- userまたはReset to userは誤解を招く可能性があります。

おそらく、ボタンを繰り返すためのアイデア(プロトコル1と2を要求する)-今後プロトコルが増える場合は、コンボボックス(ドロップダウン)を使用して、要求するプロトコルを選択してみませんか?

また、すべてのプロトコルを削除するなど、元に戻せない変更を行うボタンには明示的に名前を付けて、ユーザーが何をしているのかをユーザーに知らせる必要があります。


プロジェクトを進めるだけでなく、開発の目に見える部分にどのようにアプローチするかについてのアイデアが得られることを願っています。

11
Mike