Абстрахиране на процеса на проектиране на Microsoft Outlook

Как абстрактът подобри организацията на файловете и сътрудничеството в нашия дизайнерски екип

Описание на изображението: Избор на UI компоненти от нашата система за проектиране.

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

Разработчиците са имали системи за контрол на версии като Git от известно време, но подобни механизми за дизайнерите не са били налични - досега.

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

Преди няколко години Майлс и Виктор започнаха да използват абстракт в екипа на Outlook и оттогава той е приет в дизайнерските екипи в Microsoft. В тази публикация ще обсъдим как използваме Абстракт и ще споделим с вас нашата файлова структура, процес на сливане, практики за поддръжка на файлове и някои области от нашия процес, които смятаме, че могат да бъдат подобрени. Този процес работи за голям екип, но все още го измисляме и ще се радваме да чуем начини да подобрим това.

Проектиране на файлова структура на проекта

Нашите проекти са разделени по платформа - Android, iOS, Mac, Web и Universal (Поща и Календар в Windows 10). Вътре в тези проекти нашите файлове са разделени на различни раздели от нашето приложение. По-долу е даден пример за нашата iOS файлова структура вътре в Abstract, където разделяме нашите файлове в секции като „iOS UI-Kit“, „Mail“ и „Calendar“, за да поддържаме бързото функциониране на файловете.

Първо, Start Here е файл за нови дизайнери и външни партньори. Тя съдържа информация за нашите принципи на дизайн, как да използвате Абстракт, експортиране на активи и няколко съвета и трикове за използване на приставки за Sketch.

Стартирайте файла тук

На следващо място, UI-Kit е библиотеката на Sketch, която съдържа всички наши компоненти, типография, икони и цвят. Всички екрани в дизайнерските файлове използват свързани символи от тази библиотека.

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

Файлът на iOS UI-Kit съдържа както лист със стикери, така и самите символи

Останалите файлове представляват различни части на приложението - Onboarding, Mail, Calendar, Search, Settings и др. Разделянето на всяка категория ни помага да избегнем бавни файлове и изоставане, докато работим. Това е предимство и при обединяването на дизайни, защото когато създаваме нови функции, често трябва само да докосваме определени части от приложението, което в замяна означава по-малко конфликти

Преминаване през процеса на проектиране

Първата стъпка е да създадете клон, който поема всички файлове на Sketch в главния и създава реплика. Мислете за това като дублиране на папка. За да идентифицираме клона, ние присвояваме прост етикет на парчето, върху което работим, като добавяме съответното заглавие след етикета. Обикновено използваме етикети като „Функция“, „Комплект“ или „Проучване“, за да опишем проекта. В Outlook се насърчаваме да изпробваме нови идеи и да променим всичко, което смятаме, че може да бъде подобрено - тогава използваме маркер като „Проучване“. Тези етикети дават на другите членове на екипа някакъв контекст и им помагат да намерят и разберат какво сме работи върху. Създаването на клон е огромно предимство, защото означава, че множество дизайнери могат да работят върху едни и същи файлове и по-късно да ги обединят обратно в главния.

Пример за етикетиране на клони

В новия клон създавам нов файл от Abstract. Назовавам файла нещо като „Работещо“, което помага на другите да разберат къде са най-новите повторения. Тогава мога да копирам дънни платки от други файлове в този - това помага да се визуализира поток или да се промени съществуващ екран.

Създайте „работещ“ файл

Файл Sketch, отворен от Анотация, съдържа малък плаващ диалог с опция за преглед и ангажиране. Това спестява работа на сървъра и позволява на другите в екипа да виждат всякакви промени. Ангажирането не засяга главния, той просто актуализира клона. В моя екип обичаме да следваме общото правило за ангажиране на работа веднъж на ден. Преди да извърша промени, добавям описателна бележка, която очертава направените от мен промени. Винаги имам достъп до всяка промяна, така че ако е необходимо, мога да върна промяна или да прегледам предишните версии на файл.

Поемайте ежедневно

След като дизайнът завърши, е време да подредите слоевете и да обедините дизайна с главните файлове. Уверете се, че имената на слоевете са точни и редът следва това, което виждате на екрана (отгоре надолу). Това трябва да се повтори за всеки екран. Мога или да създам друг нов клон с етикет [Kit] и да копирам в новите екрани в съответния файл, или мога да създам отново тези екрани от нулата, използвайки най-новите компоненти на библиотеката. Причината да стартирам нов файл е да въведа само основните екрани към главния. Винаги мога да прегледам стария клон в архива на Абстракт. Това отнема малко време и ни обезкуражава да обединяваме функции по-редовно. Ще се радваме да чуем от всеки, който има предложения за подобряване на процеса на сливане.

По-долу е демонстрация как можем да създадем клон и да използваме UI компонентите от библиотеката за проектиране на екрани в нашето приложение. Именно тази комбинация от Абстракт и нашата библиотека с компоненти ни позволява да работим бързо и ефективно, като същевременно даваме пълна прозрачност и видимост на екипа. Работим от едни и същи файлове, а новите ни файлове са достъпни за всички.

Описание на изображението: Изграждане на екрани на Outlook с помощта на нашите компоненти на потребителския интерфейс.

Преди да избера бутона за сливане, мога да поискам преглед от всеки от екипа. Ние търсим свързани слоеве символи, правилно именуване, дублиращи се символи и промени в библиотеката. Обикновено рецензърите оставят обратна връзка в секцията за коментари на „Абстрактен“ или на конкретни платки, като поддържат всичко на едно и също място. След като прегледите приключат, ние обединяваме дизайна и архивираме стария клон.

Най-добри практики за поддръжка

Моят екип споделя отговорността да актуализирам комплекта с техните функции и аз водя да работя за поддържане на здравословните файлове на Sketch и непрекъснато подобряване и актуализиране на комплекта - особено за отчитане на актуализации на операционната система или за основен ремонт на дизайна.

Дизайнерите могат да дават обратна връзка за комплектите по всяко време, повдигайки проблеми или инициирайки разговори за потенциални подобрения. Ние проследяваме тази обратна връзка в издание на GitHub, позволявайки на всеки, който навреме да даде своя принос. По-долу е даден пример за видовете обратна връзка, която проследихме за UI-Kit, включително премахване на дублиращи се икони и добавяне на цветни отмени на всички икони.

Проблем с Github за проследяване на проблеми с потребителския интерфейс

Нашият процес и UI-комплект бяха обхванати от дизайнерски екипи в Microsoft, докато ние проектираме с по-отворен и съвместен подход. Тъй като Fluent Design се развива на мобилни устройства, ще видим общи елементи чрез продуктите на Microsoft.

Все още учим и непрекъснато търсим начини да подобрим нашия процес. Ще се радваме да чуем как другите екипи използват абстракт в процеса на проектиране и предложения за това как да подобрим нашия.

Чувствайте се свободни да споделяте идеите си в коментарите .

За да останете в течение с Microsoft Design, следвайте ни в Dribbble, Twitter и Facebook или се присъединете към нашата програма за Windows Insider. И ако се интересувате от присъединяването към нашия екип, преминете към aka.ms/DesignCareers.

Написано с и помощта на Майлс Фицджералд и екипа на Outlook.