«Поглощающие детали» [devouringdetails]

Devouring Details — это интерактивное справочное руководство для дизайнеров, интересующихся взаимодействием, содержащее 20 глав с 20 загружаемыми компонентами React. Здравствуйте, меня зовут Рауно. Я работаю штатным инженером-дизайнером в Vercel над нашей платформой, системой дизайна, маркетинговыми страницами и инструментами разработки Next.js. Ранее я работал в The Browser Company, где занимался проектированием и созданием браузера Arc. Я написал известные эссе о дизайне, такие как «Невидимые детали интерактивного дизайна» , и выпустил программное обеспечение с открытым исходным кодом, такое как cmdk , которое загружается миллионы раз в неделю и используется в интерфейсах командных меню самых современных приложений для повышения продуктивности в Интернете. Платформа Прежде чем приступить к работе над этим проектом, я подумал: «А чему я научился сам?» Я пытаюсь воплотить идею и понимаю, что на практике она никуда не годится. После достаточного количества итераций, а иногда и случайно, я дохожу до того момента, когда мне становится по-настоящему хорошо и я вдруг начинаю понимать, почему это никуда не годится. «Поглощающие детали» — это ваш кратчайший путь к моментам, когда вы чему-то учитесь. Это не курс в том смысле, что он не предполагает линейного прогресса. Вы не будете решать задачи по программированию, отвечать на вопросы тестов или следовать пошаговым инструкциям. Вместо этого вы будете взаимодействовать с прототипами на специальной платформе и узнавать подробности, на которые я обращаю внимание. Каждая глава легко усваивается благодаря возможности прокрутки, которая не требует от вас слишком многого. Я сам использую его в качестве справочного руководства, к которому периодически возвращаюсь при разработке. Я часто возвращался к нему, чтобы скопировать какой-нибудь код или лучше понять концепцию. Для кого? Для дизайнеров и инженеров. Приведено множество примеров кода. Вы можете скачать многие интерактивные компоненты, созданные с помощью React, Tailwind и Motion React (предыдущее название. Framer Motion). Примеры кода предполагают наличие некоторых знаний о веб-экосистеме, React и Motion React. Тем не менее, если вы не знакомы с этими инструментами, содержание не покажется вам непонятным. Концепции и примеры кода могут быть применены на другом языке или платформе, например Vue, SwiftUI, UIKit, из-за сжатого характера декларативной модели программирования.Черт возьми, в наши дни вы, вероятно, могли бы даже применить полученные знания в инструментах без кода, таких как Figma Make, фреймерные сайты или оригами. Я предлагаю примеры кода на React, потому что это инструмент, в котором я разбираюсь лучше всего, так что в конечном итоге кто-то, разбирающийся в React и интересующийся дизайном, получит от этого максимальную отдачу. Как это использовать? По моему опыту, никто не сможет развить ваши навыки за вас. Я советую вам использовать DD в качестве справочного руководства, к которому вы будете периодически обращаться, а также скачивать код для того, что вам нравится, и изменять значения или удалять строки, чтобы посмотреть, что произойдёт. Например, я иногда возвращаюсь сюда, чтобы скопировать компонент или поделиться ранее сформулированной проблемой, связанной с взаимодействием. Какой формат? На платформе вы найдёте макет с тремя колонками, который включает в себя боковую панель навигации, серию прокручиваемых слайдов, на каждом из которых представлен отдельный прототип, скриншот или видео. Для интерактивных прототипов вы можете просмотреть код, а также скачать сжатую ZIP-папку со всем исходным кодом для конкретного примера. Можно ли использовать на телефоне? В некотором роде. Лучше всего просматривать на компьютере, потому что на экране мобильного устройства недостаточно места, чтобы уменьшить многие прототипы с отладочными аннотациями до удобного для просмотра размера.Однако вы можете прочитать весь текст на мобильном устройстве и просмотреть все видео, но некоторые интерактивные элементы будут работать только на компьютере. Структура «Поглощающие детали» разделено на 3 части: Принципы, Прототипы и Ресурсы. Принципы подробно рассматривают концепцию дизайна на различных примерах пользовательских интерфейсов и готовых приложений. Вывод о намерении Метафоры взаимодействия Эргономические взаимодействия Имитирующая физика Хореография движения Адаптивные интерфейсы Сдержанные жесты Черпая вдохновение Прототипы — это подробное описание одного компонента со ссылками на Принципы и Ресурсы. Всё, что вы здесь видите, доступно для скачивания в виде исходного кода. Линейная Миникарта Полоса прокрутки Радиальная Временная шкала Трансформировать Поверхность Линейный график Next.js Инструменты разработки Бесплатно Карусель Логотипов Ресурсы содержат полезные фрагменты кода, информацию о моём подходе к дизайну, личные закладки, загружаемую библиотеку компонентов и многое другое. За кулисами Бесплатно Фрагменты кода Рабочий процесс проектирования Библиотека компонентов Общедоступные закладки Часто задаваемые вопросы Философия дизайна Руководство по React В настоящее время регистрация закрыта и возобновится в сентябре. А пока вы можете присоединиться к списку ожидания и получать уведомления, когда регистрация снова откроется. Оригинальное описание Platform Structure Register FAQ Login Have you ever noticed that some animation sequences can be improved with just a touch of delay? Or that some interactions just feel better without any motion at all? Devouring Details is an interactive reference manual for interaction-curious designers, containing 23 chapters with 23 downloadable React components. All footage is recorded of React components Hello, my name is Rauno. I work as a Staff Design Engineer at Vercel on our platform, design system, marketing pages, and Next.js Dev Tools. Previously, I was at The Browser Company designing and building the Arc browser. I have written acclaimed design essays like Invisible Details of Interaction Design and shipped open source software like cmdk that is downloaded millions of times per week to power command menu interfaces for the most modern productivity apps on the web. Selection of work from my portfolio Platform Before working on this I thought to myself: “how have I learned myself?” By trying to build an idea and realising it sucks in practice. With enough iterations and sometimes by accident I’ll get to a place where it feels really good and I'll suddenly be able to reason why it sucked. Devouring Details is your shortcut to those learning moments. This is not a course in the sense that it is not linearly progressive. You won’t solve code challenges, answer quizzes, or follow step-by-step tutorials. Instead, you’ll interact with prototypes on a custom platform and be exposed to details that I pay attention to. Two column layouts offer better navigation through long-form content Each chapter is digestible with bite-sized efforts through a scrollable experience that doesn't ask for too much at once. I myself use this as a reference manual that I periodically revisit while designing. I would often return to copy some code or to reinforce my understanding of a concept. Structure Devouring Details is split into 3 units—Principles, Prototypes, and Resources. Principles explores a design concept in depth with different examples from custom interfaces and production apps. Inferring intent Interaction metaphors Ergonomic interactions Simulating physics Motion choreography Responsive interfaces Contained gestures Drawing inspiration Prototypes are deep dives into a single component with references to Principles and Resources. Everything you see here includes downloadable source code. Line Minimap Scroll Strip Radial Timeline Morph Surface Line Graph Next.js Dev Tools FREE Logos Carousel Motion React Blur Reveal Time Machine Resources contains useful code snippets, insights into my design process, private bookmarks, a downloadable component library, and more. Behind scenes FREE Code snippets Design workflow Component library Public bookmarks Frequent questions Design philosophies The registration is open until September 16 after which it will temporarily close until the next release. Upon registering, you'll receive immediate access to: