Adapt

Кога да се използва

/impeccable adapt е за вземане на дизайн, създаден за един контекст, и адаптирането му за друг. Мобилен от десктоп, таблет от мобилен, печат от уеб, вграден от самостоятелен, имейл от табло. Използвайте го когато първоизточникът е стабилен, но се разпада при други breakpoints, при докосване или в различен контейнер.

Не е за изграждане на адаптивен дизайн от нулата. За това започнете с /impeccable и оформете layout-а с приоритет към адаптивността. Adapt е за случайте “не сме мислили за мобилен”.

Как работи

Умението работи през четири измерения на контекстуална съвместимост:

1. Breakpoints и fluid layout: свиване на многоколонен към едноколонен, коригиране на clamp диапазоните, въвеждане на нови breakpoints там, където дизайнът реално се чупи.
2. Зони за докосване: минимални 44px области за натискане, достатъчно разстояние между съседни цели, по-големи зони за докосване от визуалните граници, когато е необходимо.
3. Навигационни модели: десктоп страничните панели стават мобилна долна навигация или плъзгащи се менюта, плътните ленти с инструменти се свиват в менюта, състоянията при посочване получават еквиваленти за докосване.
4. Приоритет на съдържанието: решете какво трябва да е видимо, какво може да се свие в скрити секции, какво може да бъде премахнато изцяло за този контекст.

Неподлежащото на договаряне правило: адаптирайте, не ампутирайте. Критичната функционалност не може да изчезне на мобилен само защото е неудобна. Намерете начин да я поберете, преработете взаимодействието или преосмислете дали наистина е била критична на десктоп.

Пробвайте

/impeccable adapt the settings page for mobile

Очаквани промени:

• Триколонната решетка става едноколонна със заглавки на секциите като лепки разделители
• Страничната навигация се премества в хоризонтален скролер над съдържанието
• Превключвателите получават 8px вертикален padding, за да покрият 44px цели за докосване
• Вграденият помощен текст преминава към натискане-за-разкриване, а не посочване
• Секцията “Зона на опасност” се разширява напълно на мобилен вместо да се свива, тъй като съдържа необратими действия и искаме потребителите да ги виждат ясно

Клопки

• Ампутиране на функции. Ако мобилната версия скрие неща, които десктопната може да прави, това е регресия, не адаптация. Бори се за функцията.
• Третиране на мобилния като “по-малък десктоп”. Мобилният е различен контекст: палци, прекъсвания, кратки сесии. Адаптирайте се към контекста, не към ширината на viewport-а.
• Пропускане на /impeccable harden след това. Адаптивните layout-и разкриват гранични случаи. Изпълнете закаляване след adapt, за да хванете тези, които се появяват само на 320px.