x
 
Николай Грецкий
8 июля 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Насколько оправдана ширина кнопки «Войти»? Продолжение


Время пока­яться. Мой преды­ду­щий совет ока­зался не совсем кор­рект­ным, и Артём Гор­бу­нов попро­сил допол­нить его сле­ду­ю­щей мыслью.

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

Фраг­мент гайд­лай­нов Эпла
При­ло­же­ние «Эпл Стор»

Веб‑сер­висы, кото­рые ведут себя таким же обра­зом, выгля­дят более при­вычно и предсказуемо:

А в настоль­ных опе­ра­ци­он­ных систе­мах кнопки нао­бо­рот имеют огра­ни­чен­ную ширину:

Вытя­ну­тая по ширине окна кнопка выгля­дит дико, неуместно и неузнаваемо:

Таким обра­зом, в Скайпе на настоль­ном ком­пью­тере более пра­вильно было бы сде­лать так:

Заодно появи­лось хоро­шее место для вывода ошибок.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Сергей Плохотнюк
12 июля 2020

Не понимаю, как после рассуждений о ширине десктопных и мобильных программ, пришли к такому результату. Появилась дыра, из-за того, что кнопка стала короче и болтается слева. Блок уже не такой крепкий. К тому же теперь придётся ещё и по горизонтали курсор двигать, чтобы попасть в кнопку.

Виктория Пащенко
6 августа 2020

Skype — кроссплатформенное браузерное и мобильное приложение, где UI так или иначе наследуется на всех платформах с некоторыми особенностями под каждую из систем, а мы его сравниваем с целой операционной системой со своим подходом к проектированию как UX, так и UI. Я думаю, идея была в том, что кнопка тянется относительно контента, а не относительно всего окна, — поэтому идея растянуть её на все окно и выглядит так «дико, неуместно и неузнаваемо». И, с другой стороны, сжатие кнопки по правилам MacOS также ломает весь макет.

Виктория Пащенко
6 августа 2020

Дополнение к комментарию выше. Вот так могли бы выглядеть оба подхода в контексте операционной системы Apple.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

5 4 4