Вероятно сте чували израза „перфектен дизайн на пиксели“ безброй пъти, без дори да помислите какво означава това или какво трябва да означава. През последните няколко месеца има шанс да сте чували за упадъка на идеалната за пиксели концепция за дизайн, но има лек проблем с тези твърдения, особено що се отнася до дизайна на потребителския интерфейс на iOS.

А именно, дефиницията за перфектен дизайн на пиксела не е поставена в камък, както повечето насоки на потребителския интерфейс на iOS. Хората го интерпретират по различен начин, откъдето идва и проблемът: Съвършенството на пикселите може да изглежда неприемливо за някои, но други ще продължат да използват принципа през следващите години, макар и под друго име. Това е предимно проблем на номенклатурата.

Какво е перфектен за пикселите дизайн на потребителския интерфейс?

Тъй като няма ясна дефиниция за съвършенство на пикселите, моето разбиране на концепцията за перфектен дизайн на пиксела е, че всичко се прави, за да се максимизира рязкостта и точността. След като дизайнът е приложен, той изглежда идентичен на всеки екран на iPhone без никакви артефакти или проблеми от какъвто и да е вид.

Създаването на перфектен потребителски интерфейс за iOS на приложението означава, че създавате дизайн с мисъл за пиксели и прилагате абсолютно същия дизайн на екрана, до всеки пиксел в референтния дизайн, като същевременно гарантира, че се адаптира адаптивно към други устройства.

Но защо перфектният дизайн на Pixel?

Дизайнерите на потребителския интерфейс те се стараят да създават интерфейси, които са лесни за възприемане и взаимодействие. Професионалното задължение на разработчика е да уважава работата на дизайнера и да прилага интерфейса точно както е доставен.

С приложенията, които не са перфектни с пиксели, потребителите вероятно няма да изпитват големи проблеми, които им пречат да използват и да се наслаждават на приложението, но приложенията с перфектни пиксели определено изглеждат по-остри, по-чисти и по-последователни.

Поради силно конкурентния характер на Apple App Store, всички детайли, които подобряват цялостния външен вид и потребителското изживяване, са добре дошли. Тя може да помогне да разграничите вашето приложение и да го направите по-видимо и следователно по-изгодно.

Това кратко ръководство за дизайн на потребителския интерфейс на iOS ще ви преведе през процеса от основния етап на проектиране до изпълнението, от гледна точка на дизайнера и разработчика.

Създаване на UI дизайн за iOS

Нека започнем. Приложенията с перфектни пиксели очевидно започват като перфектни пикселни дизайни и всички знаем откъде идват в наши дни.

Основни инструменти за дизайн на iOS

Мисля, че съм прав с това твърдение Скица се превърна в де факто стандарта за уеб и мобилни UI / UX дизайнери. Докато Adobe XD е обещаваща алтернатива , изостава от популярността на Sketch.

След това ще изберем размера на монтажната плоча. Днес имаме iOS устройства с различни размери и пропорции на екрана и ние трябва да изберем размер, за да създадем нашия дизайн. Благодарение на Auto Layout, той лесно ще се адаптира към други размери на екрана. Ако е необходимо, можете да създадете различни варианти на дизайна за различни Класове по размер .

какво е ux изследовател

Единственият истински въпрос тук е: Как дизайнерът трябва да споделя информация за адаптиране на оформления за различни екрани с разработчика?

За щастие не е необходимо да се записват спецификациите за всеки един, тъй като Приставка за автоматичен дизайн за скица ще се погрижи за това. Просто дизайнерът трябва да зададе желаното автоматично оформление, да експортира до различни размери на екрана с едно щракване и разработчикът ще разбере как да постави ограничения на оформлението и да се увери, че всичко изглежда добре, независимо дали е на iPhone X или стар iPhone 5.

Забележка: От версия 44, екипът на Sketch е подобрил драстично контролите за преоразмеряване, давайки на потребителите повече сила и контрол върху това как трябва да се държат слоевете, когато родителите им преоразмеряват.

Настройване на вашия дизайн

Това звучи чудесно, но все още не сме избрали размера, който ще използваме, за да създадем своя дизайн. Според Статистика за iOS на Дейвид Смит , 57% от всички потребители на iPhone разчитат на 4.7-инчови екрани, въведени в iPhone 6 / 6s и използвани по-късно в iPhone 7 и дори наскоро пуснатия iPhone 8.

Сигурен съм, че вече сте запознати с 4,7-инчовите дисплеи на Apple, но в случай, че не сте цифров човек, говорим за 750x1334-пикселни дисплеи с 326 пиксела на инч (PPI). Това е стандартният дисплей на Retina и в кода ще имаме половината резолюция. Затова ви предлагам да започнете с 375x667 пиксели.

След това трябва да се уверим, че нашето оформление на потребителския интерфейс на iOS увеличава рязкостта. За да постигнете тази цел, трябва да активирате монтаж на пиксели :

кои от следните техники за прогнозиране на продажбите могат да имат пристрастия към оптимизъм?

Ето пример за прост правоъгълник със и без щракване на пиксели:

Използва Кръгла: пълни пиксели при редактиране на векторни обекти:

Това очевидно са само основите и за да разгледате по-отблизо перфектните за пиксели елементи на потребителския интерфейс на iOS в Sketch, трябва да проверете официалния урок .

Чувствайте се свободни да използвате сложни векторни анимации, защото разработчикът може лесно да играе с помощта на лоти библиотека . Можете да възпроизвеждате анимации на Adobe After Effects на мобилно устройство, без да изпитвате мащабиращи артефакти. Просто предоставете JSON файла на разработчика и сте готови.

Използвайте sRGB цветния профил колкото е възможно повече. Ако sRGB не е достатъчен на дисплеи с широка гама, ще трябва да предоставите цветове или графични елементи (един sRGB и един с вграден цветен профил). Подробна информация за цветните профили е достъпна на Насоките на Apple за HID ако имате нужда.

Персонализиран код за Pixel Perfect Results

Страхотен! Вече знаем достатъчно, за да създадем пикселно перфектно оформление. Как да го споделим с разработчика? Очевидно трябва да стигнем до нашата кутия с инструменти.

Изборът на правилните инструменти

Има невероятно полезни инструменти за споделяне на работата на дизайнера с разработчици: Цеплин . Просто го използвайте и разработчикът ще разполага с почти цялата информация, от която се нуждае, за да гарантира, че дизайнът на вашия потребителски интерфейс работи: графични активи, шрифтове и цветове, използвани в дизайна, текст и много други. Единственото нещо, което дизайнерът може да се наложи да предостави на този етап, са файлове с шрифтове, в случай че използват шрифтове, които не са включени в iOS.

Друг страхотен инструмент е PaintCode , който може да генерира код от векторни изображения. PaintCode използва вашите SVG пътеки и цветни данни, за да генерира Swift или ObjC класове. С PaintCode можете да използвате изрази, променливи и т.н. за създаване на пасивни / активни състояния на вашите бутони, състояния нагоре / надолу, динамичен текст, променлива анимация и много други.

Очевидно ще трябва да разчитате на Xcode и някои стандартни инструменти за разработка на iOS, но ще стигнем до това по-късно.

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

Добре, разработчикът най-накрая има всичко необходимо, така че как да реализираме перфектно оформлението на пикселите (извинете за играта на думи)?

Конфигуриране и синхронизиране на вашите инструменти

С Zeplin трябва да получите почти всичко, от което се нуждаете, при условие че дизайнерът е настроил всичко правилно. Ако нещо е пренебрегнато или неясно, Zeplin предлага ефективна функция за обратна връзка, която позволява на дизайнера и разработчика бързо да идентифицират и разрешат потенциални проблеми. Дори ако всичко е направено правилно, коментарите могат да се използват за коментари и малки подобрения.

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

За да направите това правилно, трябва да синхронизирате инструментите си:

• Задайте цветовия си профил на екрана на sRGB: отидете на Системни предпочитания - Дисплеи - Цвят и изберете sRGB IEC61966-2.1 .

  опасения за сигурността на интернет на нещата

• В Цифров измервател на цвета или друг инструмент за избор на цвят, изберете Show In sRGB .

• Проверете дали цветният профил в цветовата палитра Xcode е зададен на Устройство RGB.

Забележка: _ Изображенията могат да имат вграден цветен профил. Ако случаят е такъв, ще трябва да адаптирате инструментите си към този профил, ако искате да получите правилния цвят от това изображение. За щастие това трябва да бъде изключение и не бива да се случвате подобни случаи твърде често.

В Xcode 9 не забравяйте Запазване на векторни данни когато е необходимо. Въпреки че ще увеличи размера на приложението, това също ще ви позволи да използвате изображението му за всякакъв размер на екрана. Въпреки това, в iOS 10 и по-ранни версии на мобилната операционна система на Apple, изображенията _ няма да бъдат уголемени_, използвайки допълнителните векторни данни.

Вместо това по-старите версии на операционната система ще използват старите механизми за мащабиране и ще ви оставят размазано изображение, когато се мащабират над оригиналния размер. Можете да се консултирате с официалната документация на Apple за допълнителна информация относно тази конкретна тема .

И накрая, разработчикът ще трябва да гарантира, че размерите и разстоянията съответстват на оригиналния дизайн възможно най-близо. Ако в Zeplin има съмнителна информация, можете да измерите разстоянията между различните компоненти на потребителския интерфейс на iOS с вариации в екрана на линийките. Един от тях е xScope , екранна линийка с много практически функции.

Оживяване на вашия дизайн на потребителския интерфейс на iOS

Що се отнася до внедряването на дизайна на потребителския интерфейс на iOS, има няколко подхода за избор: Storyboard, XIB и персонализиран код .

• Storyboard - Преглеждайте екраните и навигацията между тях, но няма опции за наследяване на оформление от един контролер на друг.

• XIB - Преглед на екран или част от него, лесна за наследяване. Преди Xcode 9 нямаше възможност да се използват ръководства за оформление отгоре / отдолу, докато в Xcode 9 можем да използваме Безопасна зона .

• Код - Далеч най-гъвкавата опция, но не осигурява незабавно гледане.

За разкадровките ще трябва да разделите оформлението си на потоци, например LoginFlow.storyboard, SettingsFlow.storyboard или NewsFeedFlow.storyboard. По този начин ще запазите светлинните си разкадровки.

Групира елементи на потребителския интерфейс в блокове. Това опростява поддръжката за всички ограничения. Не бъдете мързеливи и подреждайте именуваните изгледи, докато се появяват на екрана отгоре надолу. Имайте предвид, че дъното ще се покаже отгоре. Това ще ви помогне да намерите по-бързо различни изгледи.

javascript преобразува датата във времева марка

Вижте следния пример за групирани и негрупирани елементи:

Ако имате няколко обекта, подравнени наляво / надясно, не ги подравнявайте с отместващия ръб. Най-добрият подход е да се приведе в съответствие с предишния елемент или да се приложи специален изглед ffset с ограничение на ширината. Ако трябва да промените отместването в даден момент в бъдеще, това ще го направи малко по-лесно.

За да използвате цветове в IB, можете да подготвите палитра в долната част на инструмента за избор на цвят Xcode.

Забележка: Ако минималната версия на вашето приложение за iOS е 11, можете да използвате опцията „Наименовани цветове“ в Каталога на артикулите.

До края

Това е. Сега просто трябва да изпратим резултата на екипа за контрол на качеството, да проверим дали всичко е наред и да провалим! Нашето перфектно приложение за пиксели е готово.

Целта на тази статия беше да предостави прост, линеен пример за перфектен за пикселите дизайн на потребителския интерфейс на iOS, като получи най-добрите резултати за възможно най-кратко време. Сътрудничеството между дизайнери и разработчици на потребителски интерфейс не винаги е толкова просто и без триене, но това е проблем за друга статия.