Что случилось с этой картиной?

Контекст

Я разработчик (а не дизайнер), работающий над графическим приложением, и я немного не разбираюсь в дизайне ui /ux. Функциональность есть, но что-то действительно не так с внешним видом панели меню. Это ужасно. Любые мысли, дорогой интернет?

Я думаю, что это интуитивно, но уродливо. Как это исправить?


Обновление 1: некоторая информация о значках

  • значок изображения управляет добавлением изображения на экран.
  • цвета задают цвет чертежа
  • миниатюры позволяют переключаться между страницами
  • значок плюс добавляет страницу
  • кнопка записи управляет началом и остановкой записи

Обновление 2: Новый пользовательский интерфейс

Дополнительная информация: Я был поражен отзывами! Это в невероятном сообществе. Я включил столько примечаний с этой страницы, сколько мог. Приложение позволяет пользователям делать короткие, обучающие видео на своем iPad: я занимаюсь этим за последние 6 месяцев, когда я научил себя кодировать. Для меня было важно, чтобы все изменения (цвет пера, ширина линии, ластик, другой экран, новый экран, запись и т. Д.) Были всего лишь одним нажатием. Прямо сейчас единственное, что терпит неудачу, - это кнопка «добавить изображение».

Каков вердикт нового взгляда?

Сэм

Белая доска, пока не записывается

Доски перед записью

Белая доска во время записи

Белая доска во время записи.

Одна из многих форм в приложении

Одна из многих форм в приложении

Целевая страница

Целевая страница

Что это значит, когда используются все четыре эскиза

Что это значит, когда используются все четыре миниатюры

11 голосов | спросил Sam Ballantyne 26 ThuEurope/Moscow2013-12-26T00:51:32+04:00Europe/Moscow12bEurope/MoscowThu, 26 Dec 2013 00:51:32 +0400 2013, 00:51:32

7 ответов


8

Я думаю, что некоторые улучшения стиля могут быть сделаны.

Похоже, в интерфейсе есть смешанные формальные и неформальные стили. Иконки слишком абстрактны и угловаты, что создает формальное настроение. Этот стиль является слишком официальным и, вероятно, не лучшим выбором в вашем случае.

Кривые элементы управления выглядят более отрывочными и удобными для пользователя. Бенни Скогберг показал стиль Бальзамика. У этого есть реальное наброски настроения.
введите описание изображения здесь

UPDATE
Красивый и простой дизайн!

Тем не менее, вы можете улучшить интерфейс:

  1. Заменить кнопку удаления с помощью отмены. Отмена важна в режиме обучения и записи, когда важно как можно быстрее исправить ошибку. Отменить намного быстрее, чем стереть. KhanAcademy делает то же самое.
  2. Кнопка «Переместить удаление» находится рядом с областью управления страницами, где пользователь может добавлять, открывать и удалять страницу.
  3. Отобразить, доступно ли воспроизведение для страницы, см. красную точку в нижней части страницы.
     введите описание изображения здесь
  4. Используйте неформальный, отрывочный значок для добавления изображения, например: введите описание изображения здесь>>
</li>
</ol></body></html>
ответил Alexey Kolchenko 26 ThuEurope/Moscow2013-12-26T13:20:46+04:00Europe/Moscow12bEurope/MoscowThu, 26 Dec 2013 13:20:46 +0400 2013, 13:20:46
4

Я думаю, что организационно, это слишком захламлено. Группировка связанных элементов поможет совсем немного. Не зная точных потребностей ваших пользователей, вот несколько вариантов, которые я придумал. Просто может дать вам некоторые идеи ...

  1. Поместите действия в верхнем правом углу (Помощник по написанию, добавьте изображение и запись)
  2. Инструменты, влияющие на поведение рисунка внизу (толщина строки и цвет)
  3. Верхние левые будут навигацией. Подумайте о том, чтобы скрывать чертежи в родительском меню, если не очень важно быстро переключаться с рисунками.

приложение для рисования

ответил kwahn 27 FriEurope/Moscow2013-12-27T02:22:22+04:00Europe/Moscow12bEurope/MoscowFri, 27 Dec 2013 02:22:22 +0400 2013, 02:22:22
2

Что вы видите, это инструмент для создания макетов. Это не выглядит как другие приложения, поскольку общая идея отличается. Инструмент эскиза сильно отличается от системы планирования ресурсов предприятия или инструмента разработчика, такого как Visual Studio.

Почему можно задаться вопросом? Общая идея состоит в том, чтобы нарисовать эскизы, а макеты тоже выглядят как незавершенная работа. Если клиент видит эскиз, который они знают, его можно легко изменить. Мы в отрасли можем сказать, что нет никакой разницы в изменении результата создания эскиза с изменением чего-то, разработанного в Photoshop. Но клиент очень сильно отличается. Он должен заставить клиента сказать, чего они хотят, так как дизайн еще не закончен.

Вот почему панель инструментов отличается от любой другой панели инструментов. Сделайте различие, что это совсем другое приложение с совершенно другой целью.

Если вы отредактируете сообщение, вы увидите значок эскиза справа от значка добавления изображения. Щелкните по нему и посмотрите другое приложение с аналогичным пользовательским интерфейсом, разработанным для той же цели - наброски

введите описание изображения здесь>> </p>

<p> <img src =

ответил 4rchit3ct 26 ThuEurope/Moscow2013-12-26T01:38:12+04:00Europe/Moscow12bEurope/MoscowThu, 26 Dec 2013 01:38:12 +0400 2013, 01:38:12
1

Вернуться к чертежной доске ...

Но сначала спросите себя:

  • Есть уже много инструментов для создания эскизов, что такое мой usp? В других слова:
  • Какая проблема заключается в том, что мое приложение должно исправлять, точно?
  • Для кого?
  • Другие пытались решить ту же проблему. Если да: как?
  • Почему я положил панель меню сверху? Почему не левый, правый, нижний,
    плавающий или скрытый?
  • Должна ли строка меню выглядеть так же, как строка состояния устройства?
  • В этом отношении: почему я сделал серию меню серым?
  • Должны ли эти кнопки и значки быть в таком порядке?
  • Я проверил, ясно ли значение значков?
  • Вам не нужна кнопка отмены?
ответил Igor Asselbergs 26 ThuEurope/Moscow2013-12-26T12:01:37+04:00Europe/Moscow12bEurope/MoscowThu, 26 Dec 2013 12:01:37 +0400 2013, 12:01:37
1

что это за приложение? Что он собирается делать? Каковы эти тройные изображения? Что это за + для? Является ли красный круг предупреждением или уведомлением? Или, может быть, кнопка выхода? !!

Это основная проблема, чтобы быть неясным. Я думаю, что это хорошая идея быть творческой, но сделать совсем другое приложение с тем, что пользователи испытали до сих пор, это очень дорогостоящая сделка.

ответил Omid 26 ThuEurope/Moscow2013-12-26T01:51:09+04:00Europe/Moscow12bEurope/MoscowThu, 26 Dec 2013 01:51:09 +0400 2013, 01:51:09
1

Я заметил, что вы разрабатываете это для iPad. Если это так, я не вижу, чтобы пользователи имели достаточно маленькие пальцы, чтобы поразить эти отдельные цвета или тяжелые веса.

В идеальном мире UX меньше кликов. Когда дело доходит до сенсорных экранов, немного сложнее прицелиться пальцем, чем с помощью мыши (потому что, как только вы касаетесь его, вы щелкнули его, в отличие от мыши, где вы можете прицелиться, а затем стрелять). По этой причине я переместил цвета в значок, который активирует меню, чтобы пользователь мог выбрать свой цвет. То же самое для весов штрихов.

В терминах эскизов этот дизайн не масштабируется, если только у них не может быть только три страницы за раз (что, вероятно, не так, потому что у вас есть «Plus Sign», чтобы добавить больше страниц). Что произойдет, когда будет 6 страниц?

Кроме того, я думаю, что выбор иконок интуитивно понятен, и я думаю, что Алексей Колченко сделал несколько хороших моментов.

Я сожалею, что дал вам больше «вещей, о которых нужно думать», чем фактическое решение. Дизайн UX обычно принимает итерации.

ответил avi 27 FriEurope/Moscow2013-12-27T22:53:38+04:00Europe/Moscow12bEurope/MoscowFri, 27 Dec 2013 22:53:38 +0400 2013, 22:53:38
1

Давайте рассмотрим здесь конструктивную критику. Некоторые рекомендации по дизайну отличные, но их трудно принять.

По крайней мере, вы должны сегментировать различные типы кнопок. Цвета должны быть помещены в коробку (или сделать что-то похожее на макет Kwahn).

Серый фон, который объединяется в верхнюю панель (время /батарея /бар), выглядит довольно плохо. Подумайте о том, чтобы сделать верхний бар по-разному окрашенным и не использовать серый для панели инструментов.

Инструментарий чувствует себя «толстым». Попробуйте уменьшить его высоту и сделать все инструменты одинаковой высоты. Уменьшает ощущение потерянного, уродливого пространства.

Красная кнопка в правом верхнем углу выглядит ужасно. Это указывает на текущий выбор цвета? И почему красный цвет на палитре больше других? Давайте объединим два и обведите текущий цвет, используемый на палитре, и полностью удалим предмет правой кнопки. Кроме того, делая красные большие взгляды ... непоследовательными. На границе должно быть много.

Говоря о границе, черный, который вы используете, очень силен. Я думаю, вы могли бы сделать несколько оттенков светлее и не потерять «черное» чувство.

Надеюсь, что это хорошая отправная точка для вас!

ответил Andrw 28 SatEurope/Moscow2013-12-28T05:07:10+04:00Europe/Moscow12bEurope/MoscowSat, 28 Dec 2013 05:07:10 +0400 2013, 05:07:10

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132