Comments 27
Таких выверенных, сделанных по сетке интерфейсов почти нет, а если есть, то у прототипов без реальных задач. Хорошо заметно по концепту YouTube, что если бы они сейчас такое выкатили, то потеряли бы часть людей. Вот эта стерильность создает впечатление «И это все?».
В общем высекать из хаоса удобство, а не полировать работающее наверное лучший подход.
Так же вспоминается пример сервиса, который менял цвет ссылки некоторое время плавно, что бы не потерять конверсию (кажется Amazon).
В общем высекать из хаоса удобство, а не полировать работающее наверное лучший подход.
Так же вспоминается пример сервиса, который менял цвет ссылки некоторое время плавно, что бы не потерять конверсию (кажется Amazon).
-2
Немного не понял из эпилога,
как отступы и иконки решают проблемы пользователя?
Хочу сказать, что советы правильные, но не для проектировщика, а для UI-дизайнера (=технического дизайнера).
При проектировании вообще нужно забить на всё это и заниматься именно решением проблем людей, которые столкнуться с интерфейсом. А вот когда интерфейс спроектирован, при «раскраске» эти советы имеют смысл.
Я бы добавил ещё к советам кратность размеров шрифта (заголовки N уровней, основной текст и т.п. кратны какому-либо числу).
И не согласен с иконками — если иконка не отображается смысла подписи, то от неё можно избавиться, т.к. она только отвлекает внимание.
как отступы и иконки решают проблемы пользователя?
Хочу сказать, что советы правильные, но не для проектировщика, а для UI-дизайнера (=технического дизайнера).
При проектировании вообще нужно забить на всё это и заниматься именно решением проблем людей, которые столкнуться с интерфейсом. А вот когда интерфейс спроектирован, при «раскраске» эти советы имеют смысл.
Я бы добавил ещё к советам кратность размеров шрифта (заголовки N уровней, основной текст и т.п. кратны какому-либо числу).
И не согласен с иконками — если иконка не отображается смысла подписи, то от неё можно избавиться, т.к. она только отвлекает внимание.
+7
Спасибо! У меня всегда были проблемы с созданием хорошего UI. Попробую что-то сделать с учетом ваших рекомендаций.
0
Аля, материальный дизайн ;)
http://www.google.com/design/spec/layout/metrics-keylines.html
http://www.google.com/design/spec/layout/metrics-keylines.html
+1
Согласитесь: что бы кто бы не написал про интерфейсы, всегда есть где поправить или не согласиться.
Надеюсь вы оценили первую строчку? Я её долго придумывал, потому что дальше будет скучно, ибо:
Надеюсь вы оценили первую строчку? Я её долго придумывал, потому что дальше будет скучно, ибо:
- затенять иконки выводя текст на первое место неправильно, так как текст безусловно помогает в понимании иконки, но с возрастанием времени работы человека в интерфейсе эти тексты уже не будут играть первоочередной роли. На первое место будет выходить скорость работы человека в программе, а тут иконки играют важную роль, так как именно графика считывается человеком намного быстрее чем вникание в тексты. Наглядный пример www.outlook.com, попробуйте быстро найти там кнопку "Ответить" или "Переслать".
- "закрыть попап в той же области, которая вызвала его порождение", вот так вот автор походя призывает создавать модальность (режимы) в программах. Режимы, за которые юзабилисты горят на костре инквизиции.
- "плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка", и написано правильно и поддержать хочется, а когда смотришь на иллюстрирующую довод картинку появляется недоумение. На иллюстрации приложение созданное для тач-экрана. Это приложение создано под правую руку, так сказать. Вот и элементы управления все справа (простите левши).
В качестве эпилога, Дриблл тем и хорош, что оцениваются картинки, а настоящие программы оцениваются в непосредственной работе.
+14
С возрастанием времени работы начинает работать пространственная и мышечная память — человек просто тыкает в четвертую сверху кнопку или крайний справа табик.
0
Это если их 10, а не 30.
В старом добром интерфейсе MS Word, при открытии меню "Таблица" я искал нужный мне пункт по иконкам. Возможно если бы мне нужно было вызывать этот пункт каждые 30 минут, то я бы запомнил точное расположение кнопки на уровне мышечной памяти, но в других случаях, если точно знаешь как выглядит иконка, то ищешь именно её, а не текст.
В старом добром интерфейсе MS Word, при открытии меню "Таблица" я искал нужный мне пункт по иконкам. Возможно если бы мне нужно было вызывать этот пункт каждые 30 минут, то я бы запомнил точное расположение кнопки на уровне мышечной памяти, но в других случаях, если точно знаешь как выглядит иконка, то ищешь именно её, а не текст.
+2
Наглядный пример www.outlook.com, попробуйте быстро найти там кнопку «Ответить» или «Переслать».Там только кнопка «Вход»…
0
Соглашусь. Мое правило: нельзя абсолютизировать правило, отделяя его от контекста… OH SHI--
0
Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности.Отступы необязательно должны быть пропорциональными. Например, знаменитый типограф Ян Чихольд предлагал такие форматы книжной полосы:
![Van_de_Graaf_canon_in_book_design](https://habrastorage.org/getpro/habr/comment_images/d6e/0b9/ad4/d6e0b9ad4aeab0e3398118f807f00ef8.png)
![Golden_canon_of_page_construction](https://habrastorage.org/getpro/habr/comment_images/ddc/8bb/fd3/ddc8bbfd33595b30a373684974af6ec3.png)
![Tschichold_medieval_canon](https://habrastorage.org/getpro/habr/comment_images/2c8/9be/95a/2c89be95ae3bff34c0848554161aebe8.png)
![Golden_section_page_Tschichold](https://habrastorage.org/getpro/habr/comment_images/fed/c32/f04/fedc32f04fc9d6b5dfa8f8cb8eff6fe3.png)
Типографика подчиняется правилу внутреннего и внешнего, которое гласит, что внешние расстояния должны быть больше внутренних. Межсловный пробел должен быть больше разрядки букв, интерлиньяж должен быть больше межсловных пробелов, поля должны быть больше интерлиньжа и так далее. Вот что главное.
Текст кнопки всегда первичнее иконкиВсё ровно наоборот: люди лучше запоминают и распознают иконки, чем текст. Этот феномен называется эффектом превосходства образа. Однако, это не означает, что от подписей не следует отказываться: исследование показывает, что интерфейс, в котором к иконкам нет подписей, пользователи осваивают дольше.
Вы просто испытываете неприязнь к иконкам. Это ваше право, но если вы их заглушаете, они перестают быстро считываться и только создают визуальный шум. Лучше уж их убрать.
Это обусловлено тем, что зрительно человеку легче воспринимать табличный вид из-за структурированности данных. И мы при разработке интерфейса должны располагать элементы с некоторой табличной логикой.Сетка вредна. Она создаёт ложные отношения между элементами вёрстки, мешает выделять главное и заглушать второстепенное. Ненужный ритм следует разбивать.
Напоследок скажу, что и Dribbble, как и Behance, ориентирован не на принесение пользы, а как раз на создание красивых картинок, не имеющих ничего общего с дизайном. Неслучайно возникло слово «дрибблизация».
+8
UFO just landed and posted this here
Текст действительно важнее иконки, а ссылка на "эффект превосходства образа" — хороший пример некорректного применения результатов некого эксперимента в качестве якобы "доказательства".
Про сетку — Горбунов в целом правильно пишет, но при условии, что читатель имеет здравый смысл и не будет трактовать его слишком буквально. Сетки нужны и полезны. Вредно излишне формальное их применение.
Про сетку — Горбунов в целом правильно пишет, но при условии, что читатель имеет здравый смысл и не будет трактовать его слишком буквально. Сетки нужны и полезны. Вредно излишне формальное их применение.
0
Все верно написал
0
Спасибо за хорошие рекомендации.
Есть вопрос про
Часто бывает, что приложение не настолько отзывчиво, как предполагал дизайнер, и бывают ситуации, когда от нетерпения кликаешь еще раз на action-элемент, а попадаешь по крестику.
Не лучше ли наоборот, немного разнести такие элементы?
Есть вопрос про
Хороший пример, когда дизайнер предлагает закрыть попап в той же области, которая вызвала его порождение
Часто бывает, что приложение не настолько отзывчиво, как предполагал дизайнер, и бывают ситуации, когда от нетерпения кликаешь еще раз на action-элемент, а попадаешь по крестику.
Не лучше ли наоборот, немного разнести такие элементы?
0
Честно ваш дизайн ужасен. Может кому то и понравится, но даже цвета подобраны ужасно
-2
3 цвета, включая оттенки.
3 шрифта, включая размеры.
Затеняя иконки, вы лишаете объект целостности.
Размещая иконки закрытия в непредсказуемых местах, вы порождаете противоречия.
Ну и так далее.
А вобще, что есть "интуитивно-понятный"?
Вот например такой шедевр:
![image](https://habrastorage.org/r/w780q1/getpro/habr/comment_images/060/d91/dd8/060d91dd84498d6d7012b00100bf31e6.jpg)
Вам знаком?
Для меня он — интуитивно-понятен.
3 шрифта, включая размеры.
Затеняя иконки, вы лишаете объект целостности.
Размещая иконки закрытия в непредсказуемых местах, вы порождаете противоречия.
Ну и так далее.
А вобще, что есть "интуитивно-понятный"?
Вот например такой шедевр:
![image](https://habrastorage.org/getpro/habr/comment_images/060/d91/dd8/060d91dd84498d6d7012b00100bf31e6.jpg)
Вам знаком?
Для меня он — интуитивно-понятен.
+2
Главное, давайте возможность в мобильном приложении ставить темное оформление. Светлое бьет по глазам при таком расстоянии.
+1
Хороший пример, когда дизайнер предлагает закрыть попап в той же области
отказался от этого способа…
вы удивитесь узнав сколько людей жмут ссылки как ярлыки в windows (т.е два раза) видел как моё подобное решение отказалось работать у женщины которая открывала окошко редактировать список двойным кликом… первый открыл окно — второй клик моментально закрыл его…
Передвигать кнопку закрытия оказалось проще чем обучить персонал не жать кнопки в браузере 2 раза.
+2
Вы изложили своё видение интерфейсов. Я бы хотел изложить свое. В большей степени я разделяю Ваши предпочтения, кроме одного момента, а именно, для моего визуального восприятия на этой картинке акцента на нужный раздел больше, нежели на предложенном Вами:
![image](https://habrastorage.org/r/w780q1/getpro/habr/comment_images/3b6/b5d/50b/3b6b5d50ba2b50783bbc082e32031144.jpg)
![image](https://habrastorage.org/getpro/habr/comment_images/3b6/b5d/50b/3b6b5d50ba2b50783bbc082e32031144.jpg)
+1
Я придерживаюсь правил «Любой элемент дизайна или улучшает дизайн или ухудшает» и
«Простое лучше сложного».
Если есть текст, иконки нужно убрать. Если иконка понятна (например «принтер»), текст не нужен.
К обязательным элементам я бы добавил всплывающий текст
«Простое лучше сложного».
Если есть текст, иконки нужно убрать. Если иконка понятна (например «принтер»), текст не нужен.
К обязательным элементам я бы добавил всплывающий текст
+1
>Не все проектируемые интерфейсы обязаны быть интуитивно понятными.
Статья — прыгание по верхам. Цепляние за частности и свистоперделки без понимания базы.
Статья — прыгание по верхам. Цепляние за частности и свистоперделки без понимания базы.
0
Кстати, обошли стороной анимацию.
Это, конечно, ещё более сложная тема, но всё таки можно пару слов сказать.
Я собрал у себя несколько очень классных примеров — elikov.ru/best-ux-ui-animation.html
Это, конечно, ещё более сложная тема, но всё таки можно пару слов сказать.
Я собрал у себя несколько очень классных примеров — elikov.ru/best-ux-ui-animation.html
0
Sign up to leave a comment.
Мои правила дизайна хорошего интерфейса