Подарунок — це папір і стрічка. Це речення, на якому ми зійшлися на початку вересня, і є всім дизайном нинішнього Gift Buddy. Раніше застосунок складався зі звичних деталей: градієнтів, плаваючих карток і перевантаженої палітри, тож виглядав як усі інші. Ця стаття про те, як ми замінили це трьома матеріалами і які правила встановили для них.
Три матеріали і більше нічого
Дизайн складається рівно з трьох речей.
Папір — це основа. Це теплий, трохи нерівний майже білий у світлій темі й глибокий коричнево-чорний у темній, не чисто білий і не чисто чорний. Кожна картка — аркуш, вирізаний із того самого паперу, що й тло, а не панель, підвішена над ним.
Чорнило — це текст та іконки. Один щільний темний тон у світлій темі, один теплий світлий у темній і два тихіші відтінки для другорядного тексту. Заголовки набрано шрифтом Literata, антиквою, створеною для читання з екрана; решта — простий гротеск. Чорнило ніколи не буває кольоровим.
Стрічка — єдиний носій кольору. Вона з'являється вузькою смугою вгорі картки, підкресленням під заголовком, обгорткою навколо статусу, кільцем навколо аватара. Фірмова стрічка фіолетова (violet). Є ще чотири: мох (moss), глина (clay), марена (madder) і сланець (slate), і в кожної своя роль. Мох означає те, що вдалося, глина те, що в процесі, марена попередження й видалення, сланець тихе проміжне.
Усе, що малює застосунок, зроблено з одного з трьох матеріалів; виняток лише ваші фото. Якщо новий компонент не вписується, це знак переробити компонент, а не додавати четвертий матеріал.
Правило п'яти відсотків кольору
Правило, що вплинуло на найбільше рішень, формулюється просто: насичений колір займає щонайбільше п'ять відсотків екрана.
Більшість застосунків порушують його вже на першому екрані. Кольорова шапка, три кольорові кнопки, підфарбовані картки — і паперу вже нічого сказати. Колір у вузькій стрічці дає два ефекти. Те, що пофарбоване, набуває значення, бо фіолетова смуга тепер виняток на сторінці. А відділяти одне від іншого починає сам папір.
Саме це співвідношення відрізняє журнальну сторінку чи добре набраний лист від шаблону. Ми хотіли, щоб застосунок був із першої категорії.
Папір ріжуть, а не округлюють
У справжнього паперу є кути. У попередньому дизайні було двадцять два різні радіуси заокруглення, що трапляється, коли кожен компонент обирає свій. У новому їх чотири: невеликий зріз для вкладок усередині аркуша, трохи більший для аркушів, «таблетка» для чипів і один справді круглий кут для аркуша, що піднімається знизу екрана.
Глибина працює так само. Картки не відкидають тіней: від паперу під ними картку відділяє тонка лінія по кромці, а коли щось має виділитись, другий аркуш лежить на кілька пунктів позаду першого, зміщений, як стос паперу на столі. Це виглядає фізично, без штучного сяйва тіні. Тінь у всьому застосунку відкидають лише дві речі: елемент, що підіймається під пальцем, і шторка, що виїжджає знизу екрана.
Зерно і де йому не місце
Якщо придивитися до тла, воно зернисте. Це одна невелика текстура, накладена на папір із прозорістю близько семи відсотків у світлій темі й дев'яти в темній: досить, щоб поверхня читалась як папір, а не пласкою заливкою, і замало, щоб помітити візерунок.
Найбільше ми сперечалися про те, де зерна немає. Його ніколи немає на кнопці, полі введення, перемикачі чи чипі. Елементи керування пласкі й чисті, бо зерно на тому, що натискаєш, робить його схожим на оздобу, а не на кнопку. Папір має текстуру, а те, що надруковано на ньому, ні.
Темна тема — це темний папір
Темна тема не стала інверсією кольорів. Чорний екран із білим текстом — це термінал, а не папір. Темна тема має коричнево-чорну основу, аркуші на крок світліші, тепле світле чорнило й стрічки, освітлені так, щоб та сама роль зберігала контраст. Зерно трохи сильніше, бо темному паперу потрібно трохи більше текстури, щоб узагалі читатися як папір.
Тож перемикання тем нагадує перехід від столу біля вікна до того самого столу вночі, а не до іншого застосунку.
«Крафт» і «Льон»
Коли папір став дизайном, другий сорт паперу став очевидною нагородою. Два додаткові сорти відкриваються на 7 рівні Карми, як описано в Gift Karma: бали, рівні й серії. Крафт — теплий коричневий папір поштової посилки. Льон — прохолодний, ледь сіруватий папір із дрібнішим зерном.
Кожен сорт змінює лише папір: основу, аркуші, кромки й прозорість зерна. Чорнило та стрічки лишаються точно тими самими, тож позначка статусу чи значок рівня виглядають однаково на всіх трьох паперах, а контраст основного тексту з папером на кожному сорті не нижчий за 11:1 у світлій темі й 14:1 у темній. Вибирається це в Налаштуваннях: «Стандартний», «Крафт» або «Льон».
Стрічка, що зав'язується
Єдине місце, де матеріали стають рухом, — збереження подарунка. Ви утримуєте кнопку, і навколо неї зав'язується стрічка. Відпустите раніше, і нічого не збережеться. Ми додали це, щоб недописані бажання не потрапляли у списки випадково, і лишили, бо звичайне збереження форми перетворилося на запечатування конверта.
Решта рухається мало. Аркуш нового рівня виїжджає, полум'я серії мерехтить, легендарні печатки повільно ловлять світло. Усе це зупиняється, коли пристрій просить зменшити рух, і застосунок читається так само й без нього.
Що не змінилося
Під папером застосунок працює як і раніше. Статуси досі «Новий», «В процесі» та «Виконано», тепер намальовані як обгортки зі стрічки, а не кольорові таблетки. У категорій лишилися їхні іконки. Стрічка, списки, резервування й групові подарунки не зачеплені, а гід по всіх екранах описує їх, жодного разу не згадуючи, якого вони кольору. Редизайн, який змінює те, як річ працює, — це вже інший продукт. Цей змінив лише матеріал, із якого продукт зроблено.
Подивіться на власному списку
Найшвидший спосіб оцінити матеріал — потримати його в руках. Додайте один подарунок, подивіться, як зав'язується стрічка, і раз перемкніть світлу та темну теми. Якщо папір вам до вподоби, «Крафт» і «Льон» чекають на 7 рівні, а план розвитку показує, що ще з'явиться на поверхні застосунку.
Gift Buddy безкоштовний на старті, для iPhone. Версія для Android зараз у тестуванні.
