Направете своя собствена акрилна UI текстура, използвайки Sketch

Потопете се в акрилния материал на Fluent Design на Microsoft

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

Акрилът е готин елемент от обявената от Microsoft система на Fluent Design, използвана за създаване на частично прозрачна текстура. Можете да приложите акрил върху повърхностите на приложението, за да добавите дълбочина и да помогнете за установяване на визуална йерархия.

„Fluent Design използва концепции за физически текстури и пространствена дълбочина, за да разграничи UI елементите и да ги постави във визуална йерархия. Цялостният ефект е да се създаде по-достъпен и релаксиращ опит за потребителите. “

Няколко страхотни примера

от Гани Прадитаот DimasWibowoот Майк Суарес С.

Как да направите акрил с помощта на Sketch

Да си изцапаме ръцете и да направим нещо :) Вижте дали можете сами да направите това, но ако имате нужда, ето тук Sketch файла за справка.

  1. Основно изображение: Първото нещо, от което се нуждаете, е добра ol 'artboard в какъвто и размер да проектирате. За моя пример използвах платка с размери 1440 x 960, за да експериментирам. След това ще хвърлите фоновото изображение с висока разделителна способност на убиеца върху горната част на таблото, за да играе ролята на основен слой.
  2. Gaussian blur / background blur: За този следващ слой добавете нов правоъгълен слой отгоре на вашия фонов слой. Оставете непрозрачността на 100% и сместа при нормални настройки. След това в инспекторната лента поставете отметка в полето за размазване на фона от падащото меню. (Това е реда точно под Вътрешните сенки) и го задайте на 30 пиксела.
  3. Цветова смес за изгаряне / изключване: Създайте друг правоъгълник върху нов слой, използвайте същите размери като гаусов слой размазване. Оставете непрозрачността на 100%, но този път променете Blending в Изключване. В опцията Запълване направете своя цветен шестнадесетичен (FFFFFF), изберете нормално смесване и използвайте 10% непрозрачност. За повече информация за това какво всъщност представлява смесването на изключвания, този блог на Photoshop върши добра работа, обяснявайки го
  4. Цвят / нюанс на наслагване: Създайте нов правоъгълен слой със същите размери (или просто дублирайте последния слой и оправете настройките). Оставете непрозрачността на 100% и използвайте нормално Blending. Отново ще преминете към опцията Fills, можете да направите леко запълване (FFFFFF) или тъмно запълване (000000) ← нули, нормално смесване, при 80% непрозрачност. Можете също да играете с 70% или 60% непрозрачност в зависимост от визуалната йерархия или ако използвате персонализиран цвят за уникална марка.
  5. Текстура на шума: Създайте нов правоъгълен слой, същите размери като преди, 100% непрозрачност и нормално смесване. Сега отново отидете в опцията си запълване, като този път ще изберете различен тип запълване, щракнете върху правоъгълника „запълване“, сега изберете опцията „шум“, крайната дясна опция изглежда като статичен запълнен екран, изберете „type: original“ и го задайте на 4% интензитет и използвайте нормално смесване. По желание: включете „Вътрешна сянка“ за светлината, FFFFFF, (x: 1, y: 0, размазване: 2, разпространение: 0).

Et voila! Ако го направите правилно, той трябва да изглежда така:

Вълнуващо е да видите как Microsoft развива своята система за дизайн, включваща както 2D, така и 3D модели за уеб, мобилни устройства, HoloLens и техните слушалки Mixed Reality.

Насладете се и моля, уведомете ме за всички необходими въпроси или подобрения, които можете да видите! Развълнуван е да види какво създавате.