Комментарии 34
Очень приятно выглядит «википедия».
Рекомендую расширение wikiwand. Вот для примера страница: www.wikiwand.com/en/Martinique
Понятно, что концепция и готовый дизайн не одно и то же. Но я растянул на 1920 на 23-дюймовом мониторе, показалось, что ширины вполне достаточно: как раз угол на который движутся глаза вполне комфортный, ширина основного текста получилась чуть менее 20 см, убраны боковая цветная зона, в пикселах — чуть больше 700.
Тут сложно спорить, конечно, это не самый популярный размер (всего второй по полуярности :). 13% действительно мало, но и картинка, которую мы обсуждаем — просто эскиз, а не готовый сайт. Мне кажется, что на данный момент ширину сайта можно ограничить на 1200px — почти всегда этого достаточно, и почти у всех столько есть.
Приятно и в большинстве своем правильно. Отличная статья.
Хочется добавить, что тапая на кнопку видно, что она нажимается. Из под пальца видны углы нажатой кнопки.
В плоском дизайне часто любят делать просто глиф, и при нажатии, когда глиф подсвечен, под пальцем не видно нажалось или нет.
В плоском дизайне часто любят делать просто глиф, и при нажатии, когда глиф подсвечен, под пальцем не видно нажалось или нет.
Очень годно. От себя бы добавил — постоянно штудировать информацию по сабжу, о трендах, подходах в проектировании интерфейсов. Тот же UXPin читать.
Нынче в тренде делать дизайн сайтов и программ с парой строк текста и километровыми отступами: получается либо катастрофически мало полезного контента, либо сидишь и скроллишь по полчаса «слайды» с одним заголовком или слоганом. За такое нужно пальцы болгаркой отрезать на глазах у семьи.
Ну да, точно. И совсем не передрала визуальную составляющую metro от Microsoft, забыв остальные концепции, благодаря которым как раз и делается уклон в сторону содержания вместо дизайна.
iOS 7 наделала много шума благодаря своему «плоскому дизайну».
Ну да, точно. И совсем не передрала визуальную составляющую metro от Microsoft, забыв остальные концепции, благодаря которым как раз и делается уклон в сторону содержания вместо дизайна.
Спасибо!
Скорее всего, в ближайшем будущем мы увидим полу-плоские интерфейсы… с небольшими тенями, подсказывающими, что можно нажать или кликнуть.
Не согласен, и вот почему. Отказ от скевоморфизма, а в дальнейшем и от псевдо-3д — закономерность. Пользователи давно привыкли что почти всё что выделяется — кликабельно. Так же как ранее считалось ссылкой всё что подчеркнуто (что теперь тоже не обязательно). Как привыкли понимать/исследовать такие абстрактные иконки, как на картинке. Тут даже иллюстрация непоследовательна: кнопки имеют тень чтобы выглядеть нажимабельными, в то время как в левом меню ничего кликабельным не выглядит (нет теней/подчеркиваний). Так и есть, пользователи и так догадываются, что почти все слова там кликабельны, а Favorites и Devices — нет. То же и с красным/желтым/зеленым флажками — если они есть, то скорее всего что-то делают — времена нефункциональной бутафории остались в 90х.
Т.е. не вижу причин для ретроспекций в интерфейсах будущего. Через 10 лет будет всем давно известно что «тапабельным» являются все прямоугольники с глаголом и/или иконкой. Незнакомые иконки будут следовать правилу «двойного нажатия» (второй клик отменяет действие первого), либо же будут вести туда, где всегда будет иконка "<", т.е. возможность вернуться назад. Всё для того чтобы пользователь не боялся получать опыт через метод обратимых проб.
Сверх того, новомодный свайп-жест уже сделал рудиментом кнопки влево/вправо в галлереях. Он же скрыл ранее повторяющиеся кнопки управления элементами в списках (писем, чего угодно). Так что ни тени, ни кнопки порой не будет, что не помешает людям дискаверить их «по аналогии».
А может доведут до ума экраны с изменяющейся поверхностью и кнопки станут кнопками? Придется размечать тени с помощью дополнительных css-аттрибутов, позволяющих регулировать выступаемость элементов над поверхностью экрана? Кто знает…
Да, кто знает. Может и наоборот, всё станет плоским, зато прозрачным ;)
Пользователи давно привыкли что почти всё что выделяется — кликабельно.
Это интересная мысль. И по поводу ссылок тоже согласна.
Все правильно автор написал — мода подобна колебаниям биржевых индексов, где за резким поворотом тренда всегда сделает коррекция, частично откатывающая рынок обратно.
Скевоморфизм в iOS6 действительно был сильно перетяжелен, но вот так резко менять его на диаметрально-противоположное… Многие мысли были правильны, но многое и раздражает. Уже скоро наиграются и трехмерность обратно вернется, только в гораздо более легком виде. Собственно, первые росточки этого уже сейчас видно по продуктам самих же яблочников.
Скевоморфизм в iOS6 действительно был сильно перетяжелен, но вот так резко менять его на диаметрально-противоположное… Многие мысли были правильны, но многое и раздражает. Уже скоро наиграются и трехмерность обратно вернется, только в гораздо более легком виде. Собственно, первые росточки этого уже сейчас видно по продуктам самих же яблочников.
Ссылка на оригинал medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
Там же уже есть вторая часть.
Там же уже есть вторая часть.
Если вы когда-нибудь писали HTML-страницу с нуля, то скорее всего знакомы с тем, как HTML выглядит по умолчанию.
…
С точки зрения эстетики, это выглядит ужасно
Вот пусть привели бы пример дизайна просто текста, который бы выглядел не ужасно и был функционален. Работал и на 800px и на 1600px.
Работал и на 800px и на 1600px.
Полагаю что речь про ширину. В чем проблема, сверстать c max-width?
«функциональный вид» в контексте текста это читабельный? Не пахнет челленджем тоже :)
Хм, ну вот пожалуйста, пусть авторы предъявят свой вариант, чтобы лучше чем у Apple получилось и работало везде :-)
«Здесь Родос, здесь прыгай!» www.otrezal.ru/catch-words/150.html
Они там много чего написали, а лучше варианта просто для html не предложили.
«Здесь Родос, здесь прыгай!» www.otrezal.ru/catch-words/150.html
Они там много чего написали, а лучше варианта просто для html не предложили.
Не понимаю о чем вы. Цитировали про картинку с HTML оформленным CSS по-умолчанию. Автор заявляет что несложно улучшить дефолтный рендеринг добавив как минимум паддингов/отступов. Я бы еще ограничил макимальную ширину (боди по центру) и поменял шрифт/интерлиньяж. 15 минут для начинающего в CSS.
Вспоминается http://motherfuckingwebsite.com
Да, как-то так :-) Открыл кстати motherfuckingwebsite.com сначала на стареньком Блэкберри и ниче — прекрасно читается, йопты!
Увеличьте белое пространство.
Добавьте белое пространство между линиями.
Добавьте белое пространство между элементами.
Добавьте белое пространство между группами элементов.
А оно обязательно «Белое», или можно заменить на «фоновый цвет из темы»?
Я, например, терпеть не могу белый фон, поскольку часто сижу в полумраке или в темноте и всегда использую тёмную тему. С сайтами-то ещё ничего, решается собственными css, а вот с приложениями тяжко.
Я думаю, здесь имеется в виду просто отступ, не обязательно «белое» пространство.
Перевод некорректен. Whitespace в данном контексте — это «отступы», «свободное пространство».
Whitespace
In computer science, whitespace is any character or series of whitespace characters that represent horizontal or vertical space in typography. When rendered, a whitespace character does not correspond to a visible mark, but typically does occupy an area on a page.
en.wikipedia.org/wiki/Whitespace_character
en.wikipedia.org/wiki/Whitespace_character
Основная задача аудиоплеера — большую часть времени находиться под плинтусом в свёрнутом состоянии и играть музыку. А ещё быть удобным в навигации и позволять быстро находить нужную композицию, и удобно упорядочивать плейлисты. Сортировка по жанрам — самое бесполезное, что можно сделать в плеере.
Остальное в оформлении — от лукавого.
Остальное в оформлении — от лукавого.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
7 правил создания красивых интерфейсов