web-dev-qa-db-ja.com

この写真の何が問題になっていますか?

コンテキスト

私は描画アプリに取り組んでいる開発者(デザイナーではありません)であり、UI/UXデザインについてはほとんど無知です。機能はありますが、メニューバーの外観に本当に問題があります。それは恐ろしいです。どんな考え、親愛なるインターネット?

直感的ですが見苦しいです。どうすれば修正できますか?


更新1:アイコンに関するいくつかの情報

  • 画像アイコンは、画面への画像の追加を制御します
  • 色は描画色を設定します
  • サムネイルで「ページ」を切り替えることができます
  • プラスアイコンはページを追加します
  • 記録ボタンは、記録の開始と停止を制御します

アップデート2:新しいユーザーインターフェイス

その他の簡単な情報:私はフィードバックに驚きました!これは信じられないほどのコミュニティです。このページのメモをできるだけ多く組み込んだ。このアプリを使用すると、ユーザーはiPadで短い説明用のビデオを作成できます。私は、コーディングする方法を学びながら、過去6か月間それを構築してきました。すべての変更(ペンの色、線の太さ、消しゴム、別の画面、新しい画面、記録など)を1タップで行うことが重要でした。現在、このテストに失敗したのは、「画像を追加」ボタンだけです。

新しい外観の評決は何ですか?

サム

録音していないときのホワイトボード

The whiteboard before recording

録音中のホワイトボード

The whiteboard while recording.

アプリ内の多くのフォームの1つ

One of Many Forms In The App

ランディングページ

The Landing Page

4つのサムネイルすべてを使用した場合の外観

What It Looks Like When All Four Thumbnails Are Used

11
Sam Ballantyne

私はいくつかのスタイリングの改善を行うことができると思います。

インターフェースにはフォーマルなスタイルとインフォーマルなスタイルが混在しているようです。アイコンは抽象的で角度がありすぎて、正式なムードを生み出しています。このスタイルはあまりにも公式であり、おそらくあなたの場合には最良の選択ではありません。

湾曲したコントロールは、より大ざっぱでユーザーフレンドリーに見えます。ベニー・スコグバーグはバルサミコのスタイルを見せた。本物のスケッチムードがあります。
enter image description here

[〜#〜]更新[〜#〜]
素敵でシンプルなデザイン!

それでも、インターフェースを改善できます:

  1. 削除ボタンを元に戻すボタンに置​​き換えます。取り消しは、エラーをできるだけ迅速に修正することが重要な場合に、ティーチングおよび記録モードで重要です。元に戻すは消去よりもはるかに高速です。 KhanAcademyも同じ方法でこれを行います。
  2. [削除]ボタンをページ管理領域の近くに移動します。この領域では、ユーザーがページを追加、開いたり、削除したりできます。
  3. ページで再生が可能かどうかを表示します。ページの下部にある赤い点を確認してください。
    enter image description here
  4. 次の図のように、画像の追加には非公式で大ざっぱなアイコンを使用します。
    enter image description here
8

組織的には雑然としていると思います。関連アイテムをグループ化するとかなり役立ちます。ユーザーの正確なニーズがわからないので、ここにいくつかのオプションを考えました。ちょうどあなたにいくつかのアイデアを与えるかもしれません...

  1. 右上にアクションを配置(書き込みアシスタント、画像の追加、記録)
  2. 下部の描画動作に影響するツール(線の太さと色)
  3. 左上がナビゲーションになります。常にすばやく図面を切り替えることがそれほど重要でない場合は、親メニューに図面を非表示にすることを検討してください。

drawing app

4
kwahn

見えるのは、モックアップを作成するためのスケッチツールです。一般的な考え方が異なるため、他のアプリケーションのようには見えません。スケッチツールは、エンタープライズリソースプランニングシステムやVisual Studioなどの開発ツールとは大きく異なります。

なぜ不思議に思うかもしれませんか?一般的なアイデアは、スケッチやモックアップを描くことも、未完成の作品のように見えることです。お客様がスケッチを見ると、簡単に変更できることがわかります。業界では、Photoshopでデザインされたものを変更してもスケッチングアプリの結果を変更することに違いはないと言えるでしょう。しかし、顧客はその非常に明確な違いをもたらします。まだデザインが完成していないので、お客様が何を望んでいるかを伝えるためにあります。

そのため、ツールバーは他のツールバーと非常に異なって見えます。これは非常に異なる目的を持つ非常に異なるアプリであることを区別してください。

投稿を編集すると、画像追加アイコンの右側にスケッチアイコンが表示されます。クリックすると、同じ目的のために設計された同様のUIを持つ別のアプリケーションが表示されます-スケッチ

enter image description here

enter image description here

2
Benny Skogberg

IPad用に開発しているようです。その場合、個々の色や線の太さに当たるほど指が小さいユーザーは見当たりません。

理想的なUXの世界では、クリック数が少ないほど良いです。タッチスクリーンに関しては、マウスよりも指で狙うのが少し難しいです(一度タッチすると、クリックしてしまったため、狙って発射できるマウスとは異なります)。そのため、メニューをアクティブにするアイコンに色を移動して、ユーザーが色を選択できるようにします。ストロークの太さも同じです。

サムネイルに関しては、一度に3ページしか持てない場合を除いて、そのデザインはスケーラブルではありません(ページを追加するための「プラス記号」があるため、おそらくそうではありません)。 6ページあるとどうなりますか?

それ以上に、アイコンの選択は直感的であり、アレクセイコルチェンコはいくつかの良い点を作ったと思います。

実際の解決策よりも「考えるべきこと」を多くお伝えして申し訳ありません。 UXデザインは通常、反復を必要とします。

1
avi

ここでいくつかの実用的な建設的な批判を見てみましょう。設計の推奨事項のいくつかは素晴らしいですが、行動を起こすのは困難です。

少なくとも、さまざまなタイプのボタンをセグメント化する必要があります。色はボックス化する必要があります(または、Kwahnのモックアップと同様の操作を行います)。

上部のバー(時間/バッテリー/その他のバー)に溶け込む灰色の背景はかなり悪く見えます。トップバーの色を変え、ツールボックスに灰色を使用しないことを検討してください。

ツールボックスは「厚い」と感じます。高さを低くして、すべてのツールで同じ高さを使用するようにしてください。無駄な醜いスペースの感触を減らします。

右上の赤いボタンのものはひどく見えます。それはあなたの現在の色の選択を示していますか?そして、それはなぜパレットの赤い色が他のものよりも大きいのですか? 2つを組み合わせて、パレットで使用されている現在の色を囲み、右ボタンのものを完全に削除します。また、赤を大きく見えるようにすると、一貫性がなくなります。国境は十分なはずです。

ボーダーといえば、あなたが使っている黒はとても強いです。いくつかの色合いを軽くして、「黒」の感触を失わないようにできると思います。

これがあなたにとって良い出発点であることを願っています!

1
Andrw

このアプリは何ですか?どうするの?それらのトリプル画像とは何ですか?あれは何でしょう + ために ?赤い丸は警告または通知ですか?または、サインアウトボタンですか?

はっきりしないのは、それが主な問題です。クリエイティブなことはいい考えだと思いますが、ユーザーが今までに経験したこととはまったく異なるアプリケーションを作成することは、非常に費用のかかる取引です。

1
Omid

ふりだしに戻る...

しかし、最初に自問してみてください。

  • すでにたくさんのスケッチツールがありますが、私のuspは何ですか?言い換えると:
  • 私のアプリは正確にどの問題を修正することになっていますか?
  • 誰のため?
  • 他の人が同じ問題を修正しようとしましたか?はいの場合:方法は?
  • なぜメニューバーを上にしたのですか?なぜ左、右、下、
    フローティングまたは非表示?
  • メニューバーはデバイスのステータスバーと同じように見える必要がありますか?
  • さらに言えば、なぜメニューバーを灰色にしたのですか。
  • それらのボタンとアイコンはこの順序である必要がありますか?
  • アイコンの意味が明確かどうか確認しましたか?
  • ユーザーは元に戻すボタンを必要としませんか?
1
Igor Asselbergs