Optymalizacja plików szkicu: wnioski wyciągnięte z tworzenia aplikacji Reduce (studium przypadku)

Sketch wprowadził zupełnie nowe standardy rozmiarów plików. Nie widzisz już 10 GB plików Photoshopa w każdym miejscu. Niemniej jednak istnieją ogromne pliki Sketch, które spowalniają Sketch. W rezultacie spada również Twoja produktywność.

Bądźmy szczerzy: to nie pliki projektowe powiększają się za pomocą magii. To projektanci wypełniają swoje pliki nieużywanymi, niezoptymalizowanymi i ukrytymi elementami, które zajmują niepotrzebną przestrzeń.

Z tym problemem zmierzyliśmy się w naszym startupie Flawless App. Mamy tendencję do posiadania osobnego pliku szkicu dla każdego produktu. Przez „produkt” rozumiem naszą podstawową aplikację z paskiem menu, stronę internetową, materiały społecznościowe, materiały prasowe, ilustracje do artykułów na naszym blogu Medium i tak dalej. Pliki te z czasem bardzo się rozrosły z powodu ciągłych iteracji i testowania różnych decyzji projektowych. W rezultacie Sketchowi coraz trudniej było nimi zarządzać z odpowiednią wydajnością.

Jak zrobiliby inni inżynierowie, zdecydowaliśmy się napisać mały skrypt, który automatycznie czyści i optymalizuje pliki Sketch.

Skrypty są świetne — to znaczy, jeśli mówisz tym samym językiem co Terminal. Ostatecznie zdecydowaliśmy, że potrzebujemy bardziej ludzkiego podejścia, aby umożliwić korzystanie z niego większej liczbie osób z zespołu. Chcieliśmy również, aby był on później darmowy i publicznie dostępny.

Pierwszy prototyp

Zanim narysowałem jakikolwiek interfejs, miałem na myśli pewne abstrakcyjne koncepcje. Głównym celem było stworzenie czegoś, co będzie żyć cały czas na wyciągnięcie ręki i umożliwi nam jak najszybszą optymalizację plików. Aplikacja paska menu była oczywistym wyborem:

1. Mieliśmy już wewnętrzną strukturę dla aplikacji paska menu, z wieloma zaimplementowanymi niestandardowymi funkcjami. Aby dać ci pewne informacje: nasz podstawowy produkt, Flawless App, to aplikacja z paskiem menu, która w czasie rzeczywistym porównuje oczekiwany projekt z implementacją dewelopera. Ta wewnętrzna struktura została zbudowana dla naszego podstawowego produktu.
2. Z aplikacji paska menu można korzystać nawet wtedy, gdy aplikacja Sketch nie jest otwarta.
3. Tworzenie natywnej aplikacji macOS było dla nas znacznie szybsze niż wtyczki Sketch z CocoaScript (ze względu na nasze wcześniejsze doświadczenia).

Istotne było również umożliwienie użytkownikowi przełączania różnych opcji optymalizacji dla różnych plików.

Oto pierwszy szkielet narysowany na staromodnym papierze, bez wymyślnych narzędzi do prototypowania.

Wyciągnięta lekcja nr 1

Zanim zrobisz jakikolwiek interfejs użytkownika, prototypy w wymyślnych narzędziach, a nawet makiety na papierze, zastanów się, jakie cele musisz osiągnąć za pomocą projektu. Kto by z niej korzystał i jak wszedłby w interakcję użytkownika z aplikacją.

Paleta kolorów i typografia

W rozmowie z zespołem nie znaleźliśmy żadnych krytycznych problemów z UX w makietach. Zacząłem od stworzenia palety kolorów i wybrania schematu czcionki.

Chciałem, aby aplikacja była lekka i wizualnie różniła się od naszego podstawowego produktu, aplikacji Flawless. Tak więc wymyśliłem następujące palety:

Pierwszy wiersz to kolory tekstu (plus jasne tło na początku). Drugi rząd to kolory akcentujące. Wszystkie kolory zostały wyprowadzone z jednego podstawowego koloru akcentującego, stosując proste zasady dla systemu kolorów HSB (H oznacza odcień, S oznacza nasycenie, a B oznacza jasność).

Powiedzmy, że mamy kolor bazowy #4A90E2 (niebieski), czyli (212, 67, 89) w HSB. Aby uzyskać nieco ciemniejszy kolor, musimy zmniejszyć jasność, zwiększyć nasycenie i nieco przesunąć odcień. Tak więc otrzymalibyśmy #2477C9, czyli (210, 82, 79) w HSB. Użyłem tego samego podejścia do wszystkich innych kolorów.

Ostatecznie wybrałem pierwszą paletę kolorów (pomarańczowy). Pliki szkicu i logo Sketch są również pomarańczowe, więc nasza aplikacja wyglądałaby z nimi bardziej naturalnie.

Wyciągnięta lekcja nr 2

Kolory zawsze były dla mnie trudne. Zwykle spędzam dużo czasu na szukaniu odpowiedniego koloru. Oto kilka zasobów, z których korzystam prawie codziennie, aby pomóc mi odkrywać kolory:

• Adobe Kuler może pomóc w znalezieniu kolorowego towarzysza dla dowolnego koloru.
• Khroma to oparte na sztucznej inteligencji narzędzie do generowania palet kolorów na podstawie Twoich preferencji.
• Artykuł Erika Kennedy'ego „Color in UI Design: A (Practical) Framework” to czysta perełka. Przeczytałem to jakieś osiem miesięcy temu i od tego czasu używam systemu kolorów HSB znacznie częściej niż RGB w Sketchu.

Jeśli chodzi o typografię, w większości przypadków użycie domyślnej czcionki dla natywnej aplikacji macOS jest najlepsze, chyba że tworzysz coś bardzo niestandardowego. Czas renderowania jest szybszy i łatwiej go wdrożyć podczas programowania. Ale byłem tak zachwycony, że wypróbowałem Montserrat w natywnej aplikacji macOS, że nie mogłem się oprzeć.

Wyciągnięta lekcja nr 3

Istnieje wiele świetnych zasobów do odkrywania czcionek. Niemniej jednak używam staroświeckich czcionek Google, aby poznać konkretną czcionkę.

Pierwsza iteracja projektu

Zacząłem dokładnie od tego, co narysowałem w początkowym makiecie. Oto ogólny przepływ użytkowników w aplikacji:

1. Przeciągnij i upuść plik szkicu.
2. Wybierz opcje optymalizacji.
3. Zmniejsz wybrany plik.
4. Zapisz to.

Projektowałem w Sketchu i byłem całkowicie zadowolony z ogólnego interfejsu użytkownika. Ponieważ wcześniej projektowałem aplikacje paska menu, rozmiar tekstu i marginesy były dla mnie dość standardowe. Niemniej jednak pojawiły się pewne zauważalne problemy z pierwszą iteracją, które opiszę później.

Wyciągnięta lekcja nr 4

Jeśli nigdy wcześniej nie projektowałeś niczego dla systemu macOS, koniecznie wypróbuj zestaw Facebook Desktop Design Kit. Znajdziesz tam wszystkie typowe elementy interfejsu macOS. I da ci poczucie rozmiarów i przesunięć elementów interfejsu użytkownika. W przypadku aplikacji paska menu systemu macOS rozmiar czcionki od 12 do 14 punktów jest całkowicie normalny.

Kwestia nr 1: Pominięty stan

Wszystko było super poza tym, że zapomniałem zbudować stan w środku, kiedy aplikacja będzie przetwarzać plik Sketch. Jak wiem z doświadczenia, pominięty stan na etapie projektowania to ból głowy na etapie rozwoju.

Jak często programiści narzekają, że projektanci projektują w próżni? Wiesz, mówią o tych problemach z brakującymi stanami w środku, pustymi stanami, używaniem doskonałych zbiorów danych i tak dalej.

Wyciągnięta lekcja nr 5

Zanim wyślesz swój projekt do programistów, upewnij się, że niczego nie zapomniałeś. Upewnij się, że określiłeś wszystkie stany, aby programiści nie pytali Cię później: „Jak to powinno wyglądać w [pewnym specjalnym warunku]?” Dobrym sposobem na znalezienie tego rodzaju pominiętych stanów jest użycie narzędzia do prototypowania. Jak dotąd wtyczka Craft do Sketch (stworzona przez Invision) z funkcją prototypowania jest najszybszym sposobem przeprowadzenia takich testów.

Problem nr 2: zbyt wiele elementów niestandardowych

Prawie zawsze będziesz projektować dla konkretnej platformy. W naszym przypadku był to macOS. A macOS ma już nieco standardowe elementy. Jeśli więc Twój produkt nie będzie działał bez niestandardowego rozwiązania, użyj standardowych elementów tam, gdzie ma to sens. Deweloperzy również Ci podziękują.

Mając to na uwadze, usunąłem niestandardowe pola wyboru i zastąpiłem je domyślnymi. Uprościłem również okno postępu, usuwając wszystkie niepotrzebne niestandardowe wskaźniki.

Wyciągnięta lekcja #6

Aby zapoznać się z domyślnymi elementami dla każdej platformy, proponuję zapoznać się z następującymi materiałami:

• iOS: zasoby projektowe Apple UI dostępne dla programów Sketch, Photoshop i Adobe XD
• Android: zestaw do projektowania materiałów
• macOS: zestaw pulpitu Facebook

Kwestia #3: Za mało nacisku na koniec

Po kilku sesjach zbierania opinii z zespołem stało się jasne, że końcowy ekran jest przeciążony. Nic nie wskazywało na to, jak bardzo zmienił się rozmiar pliku w wyniku optymalizacji. Zrobiłem więc osobny ekran z ładną ilustracją skompresowanego pliku i etykietą z informacją o rozmiarze pliku.

Wyciągnięta lekcja #7

Używamy Slacka jako głównego miejsca komunikacji. Send to Slack to mała wtyczka, która udostępnia obszar roboczy ze Sketch bezpośrednio do kanału Slack. To było bardzo przydatne podczas sesji zbierania opinii o zespole. Udostępniaj więcej, udostępniaj często.

Zagadnienie 4: Duże małe szczegóły

Poniższe problemy zostały znalezione podczas opracowywania. Ale i tak umieszczę je tutaj, aby zachować spójność struktury artykułu.

Zacząłem realizować projekt. Zaraz po pierwszym uruchomieniu zdałem sobie sprawę, że użytkownik nie ma możliwości zamknięcia aplikacji.

Chcieliśmy również dystrybuować naszą aplikację za pośrednictwem naszych własnych kanałów, zamiast Mac App Store. Dlatego bardzo ważne było dla nas dodanie do aplikacji systemu automatycznej aktualizacji. A użytkownik powinien mieć możliwość zobaczenia aktualnej wersji i sprawdzenia dostępności aktualizacji. Skończyło się na menu, które prezentuje te informacje i drugorzędne działania w jednym miejscu.

Ostatnim pominiętym szczegółem była funkcja zamykania zoptymalizowanego pliku i powrotu do ekranu głównego bez zapisywania. Dodałem ten sam przycisk „zamknij”, który pojawia się w oknie „Lista optymalizacji” w prawym górnym rogu.

Wyciągnięta lekcja nr 8

Ścisła współpraca z programistami zawsze daje satysfakcję. Nawet w moim przypadku, gdy ta sama osoba zajmuje się projektowaniem i rozwojem, trudno jest od razu zobaczyć wszystkie problemy. Musiałem właściwie zacząć budować, aby zobaczyć te funkcjonalne problemy. W każdym razie postaraj się jak najszybciej zaangażować programistów. Możesz uzyskać wiele cennych informacji na temat rzeczy funkcjonalnych.

Przygotuj projekt do rozwoju

Ostatecznie iteracje projektowe dobiegły końca. Cóż, technicznie rzecz biorąc, iteracje projektowe nigdy się nie kończą. Powiedzmy, że osiągnęliśmy wystarczająco dobry stan, w którym mogliśmy przejść do rozwoju.

Przed wdrożeniem projektu poprawiłem odstępy między elementami, upewniając się, że wszystkie elementy są wyrównane do 4-pikselowych prowadnic. Ten sposób myślenia oparty na przewodnikach opłaci się na etapie rozwoju.

Wyciągnięta lekcja nr 9

Gdy wszystkie elementy zostaną odpowiednio ułożone, czas tworzenia się znacznie się skróci. Ponieważ byłem również odpowiedzialny za rozwój, wszystkie właściwości otrzymałem bezpośrednio od Sketch. Ale zdecydowanie ma sens upewnienie się, że wszystkie elementy znajdują się we właściwych miejscach, wszystkie kolory pochodzą z tej samej palety i że zasoby są gotowe do wielu rozdzielczości.

Logo i nazwa

Wreszcie nazwa naszej aplikacji pojawiła się dość szybko. Przyszły mi do głowy dwa słowa: „zmniejszyć” i „zmniejszyć”. Sprawdziłem Product Hunt i „zmniejszenie” było już w użyciu, więc zdecydowaliśmy się na „redukuj”.

Logo było dla mnie prawdziwą walką. Ponieważ jest to aplikacja paska menu, najpierw musiałem utworzyć ikonę dla paska menu.

Ponieważ ikona paska menu musi mieć wymiary 16 × 16 pikseli, lepiej nie używać żadnych drobnych elementów. Ikona powinna być jednocześnie charakterystyczna i czytelna.

Po kilku dniach walki z prostymi kształtami zrezygnowałem i otworzyłem sekcję „Polecane” w Google Fonts. Szukałem ładnej, zakrzywionej czcionki, która dobrze pasowałaby do logo (jak również do ikony paska menu). W końcu pojawiła się czcionka Pacifico, która była idealna dla naszych celów.

Wyciągnięta lekcja #10

Pamiętaj, że w systemie macOS istnieją dwie wersje paska menu: ciemna i jasna. Przygotuj ikonę paska menu dla obu. Przetestuj również, jak twoja ikona działa z domyślnym tłem zaznaczenia. Domyślnie, gdy użytkownik naciśnie ikonę paska menu, macOS podświetli ją dowolnym kolorem wybranym przez użytkownika w ustawieniach ogólnych. (Apple ma świetny przewodnik po kolorach w systemie MacOS.) Aby to przetestować, stworzyłem symbole dla wszystkich domyślnych kolorów, aby móc przełączać się między nimi i zobaczyć, jak ikona wygląda z różnymi tłami.

Używając kolorów akcentujących z początkowej palety kolorów, umieściłem „R” w kółku z małą zakrzywioną krawędzią. W tamtym momencie logo było dla mnie wystarczająco dobre.

Wniosek

Jest jeszcze wiele do zrobienia. Jak wspomniałem, iteracja projektowania nigdy się nie kończy. Ale jeśli będziesz powtarzać w nieskończoność, produkt na zawsze pozostanie makietą. Szybka wysyłka jest lepsza. Krótkie iteracje oznaczają szybszą informację zwrotną, a szybszą informację zwrotną oznacza lepszy produkt. Aplikacja Reduce powstała w półtora tygodnia, ponieważ naszym głównym celem było sprawienie, aby była szybka i użyteczna.

Otrzymaliśmy wiele pozytywnych opinii od naszego zespołu. Okazuje się, że aplikacja paska menu jest znacznie szybsza i bardziej zrozumiała w obsłudze niż skrypt Terminala. Ponadto, podczas naszej publicznej premiery, społeczność dała nam wiele pomysłów na funkcje, które moglibyśmy zaimplementować w następnej kolejności i jak możemy ulepszyć aplikację.

Oto podsumowanie rzeczy, których nauczyliśmy się podczas tworzenia aplikacji Reduce:

• Pomyśl o celach produktu i przypadkach użycia przed wykonaniem jakichkolwiek makiety lub prototypów.
• Użyj narzędzia takiego jak Adobe Color i Khroma, aby szybciej wybrać odpowiednią paletę kolorów. Pomocna będzie również podstawowa znajomość systemu kolorów HSB.
• Nie bój się eksperymentować z niestandardowymi czcionkami.
• Każda platforma ma swój własny zestaw standardów. Naucz się ich przed projektowaniem.
• Użyj narzędzia do tworzenia prototypów, aby poznać cały przepływ.
• Nie przytłaczaj swojego projektu niestandardowymi elementami. Czasami lepiej trzymać się domyślnych kontrolek dla danej platformy.
• Uzyskaj opinię na temat swojego projektu tak wcześnie, jak to możliwe.
• Zaangażuj programistów jak najwcześniej. Możesz uzyskać wiele cennych informacji na temat elementów funkcjonalnych i tego, ile czasu zajęłoby wdrożenie „małego przycisku gradientu z animacją spirali”.
• Użyj standardowej siatki platformy, aby wyrównać wszystkie elementy. Twórcy podziękują Ci za to później.
• Przetestuj swój projekt pod kątem różnych zastosowań (takich jak jasny i ciemny pasek menu) przed sfinalizowaniem interfejsu użytkownika.

Jeśli uważasz, że aplikacja Reduce może również uprościć Twoje życie (i pliki Sketch), możesz ją pobrać za darmo. I przekaż nam swoją opinię. Wierzymy, że jest to najcenniejsza rzecz, jaką można uzyskać od użytkowników.