Sekrety do efektywnego projektowania opartego na kartach
Czy chcesz mieć modny trend dzięki interfejsowi w stylu karty? To prawdopodobnie świetny pomysł; Karty są popularną i przyjazną dla użytkownika opcją dla wszystkich typów cyfrowych projektów na różnych rozmiarach urządzeń.
Kluczem do projektu karty jest tworzenie czegoś, co użytkownicy chcą kliknąć. (To jest klucz do świetnej karty). Karta powinna służyć jako pojemnik dla określonego fragmentu treści - link do treści, rejestracja, odtwarzacz wideo itd. - z którymi użytkownicy chcą wchodzić w interakcje.
Oto jak to zaprojektujesz ...
Zacznij od czarno-białego konturu
Brzmi to dość prosto: zacznij od czarno-białej krawędziowej konstrukcji. Zastanów się, jaka jest intencja karty i jakie jej części będą klikane lub tappable. (Cała karta może służyć jako link.)
Zaplanuj elementy takie jak odstępy, obrazy i typografia, aby karta była widoczna bez koloru lub ozdoby. Pomyśl o tym jako o fazie "karty do gry" w projekcie. Wszystkie elementy karty tam są. Czy wydaje się to ramą łatwą do zrozumienia?
Zastanów się, jak możesz z niego skorzystać na tym etapie. Gdzie klikniesz akcję? Czy wzór i wynik są jasne? Jak wrócić lub awansować? Odpowiedzi na te pytania powinny być istotne bez wskazówek, takich jak czerwony przycisk "kliknij tutaj" migający na ekranie.
Podobnie jak w przypadku każdego innego projektu, jeśli kontur nie działa w czerni i bieli, ostateczny projekt prawdopodobnie również nie będzie.
Użyj przesadzonego odstępu
Największym wyzwaniem, jeśli chodzi o karty jest tworzenie zwartej konstrukcji, która nie wydaje się być zagracona. Tutaj pojawia się spacja. A na pewno będziesz chciał jej użyć więcej niż na początku.
Dodanie białych znaków da elementom więcej przestrzeni do oddychania, dzięki czemu ogólna karta wydaje się bardziej przestronna i zwiększa czytelność.
Zasadniczo możesz zacząć od dwukrotnego odstępu, który normalnie możesz rozważyć między elementami. Rynny powinny być wyjątkowo szerokie, a odstęp między liniami może również wykorzystywać dodatkowy pokój. Dodatkowa przestrzeń pomoże ci stworzyć otwarty projekt i uporządkować treść w bardziej przejrzysty sposób. Karta ma dość ograniczone płótno i powinna zmieścić się na jednym ekranie telefonu oraz podobnej wielkości część ekranu na większych urządzeniach, takich jak tablety lub komputery stacjonarne. Karty mogą również konkurować z innymi kartami o uwagę na większych ekranach. Dodane spacje pozwolą, aby cały projekt był bardziej otwarty i łatwy do nurkowania.
Dodaj naturalny kolor i cieniowanie
Teraz jesteś gotowy, aby pomyśleć o kolorze i cieniowaniu dla projektu. Zachowaj naturalny wygląd i naśladuj rzeczywistość w cieniach i stylach projektu.
Nie, nie mówimy tutaj o skomuomorfizmie, mówimy o tworzeniu kolorów z naturalnymi konturami i cieniami. Zastanów się, jak karta zostanie wyświetlona. Użytkownik powinien poczuć to samo uczucie, jakby rzeczywiście go trzymał.
Użyj kilku podstawowych zasad fizyki, aby wyobrazić sobie (i zaprojektować) każdą kartę, jaka miałaby miejsce:
- Oświetlenie powinno rzucać cień na tył i spód.
- Najciemniejsza część projektu jest prawdopodobnie na dole dzięki warunkom oświetlenia, które zwykle pochodzą z góry.
- Unikaj zawartości w obszarach, które są wymagane do przechowywania karty.
- Punkty styczności (i powiązane wezwania do działania) powinny być punktami ogniskowymi i łatwo z nimi współdziałać. (Tak jak twarz karty do gry znajduje się w centrum projektu).
- Jedna karta równa się jednemu bitowi informacji.
Twórz proste warstwy
Teraz, gdy myślisz o fizyce, przenieś ją na wyższy poziom dzięki prostemu nakładaniu warstw, aby stworzyć jednolity styl karty dla całego interfejsu. Nie wiesz od czego zacząć? Google Wytyczne dotyczące projektowania materiałów to świetny punkt wyjścia.
"W projektowaniu materiałów fizyczne właściwości papieru są tłumaczone na ekran. Tło aplikacji przypomina płaską, nieprzejrzystą teksturę kartki papieru.
Zachowanie aplikacji naśladuje zdolność papieru do zmiany rozmiaru, tasowania i powiązania w wielu arkuszach. Elementy, które znajdują się poza aplikacjami, takie jak pasek stanu lub paski systemowe, otrzymują inne traktowanie. Są one oddzielone od zawartości aplikacji znajdującej się pod nimi i nie przenoszą fizycznych właściwości papieru.
Złam to i wróci do tego, aby cyfrowy obiekt wyglądał fizycznie. A jeśli użytkownicy chcą go dotknąć, będą chcieli go kliknąć. Ta koncepcja jest prosta.
Trzymaj się prostych krojów
Jeśli chodzi o typografię, często odpowiedzią jest prosty sans serif. Unikaj super cienkich lub skondensowanych opcji, ponieważ mogą być nieco twardsze dla oczu.
Większość kart działa najlepiej z dwiema opcjami kroju pisma (nawet jeśli pochodzą z tej samej rodziny) - coś dla głównego ciała i inne dla nagłówka lub wezwania do działania. Najważniejszym czynnikiem wpływającym na typografię jest pamiętanie o dużym kontraście, aby elementy tekstowe były łatwe do odczytania. Pamiętaj, aby uwzględnić kontrast między krojami i kontrast między tłem a elementami tekstowymi dla każdej karty.
Ogranicz elementy interfejsu użytkownika
Powtarzaj za mną: jedna karta równa się jednej akcji.
Prawdopodobnie oznacza to, że nie trzeba dołączać do projektu elementów interfejsu użytkownika, takich jak przyciski.
Możesz nawet nie potrzebować przycisku w stylu karty.
Ale jeśli uważasz, że użytkownicy potrzebują wizualnego wskaźnika, wystarczy jeden przycisk. Zachowaj prostotę kształtu i designu - ponownie podejście Material Design jest dobrą opcją - i trzymaj się tylko jednego przycisku.
Przycisk to prawdopodobnie jedyny element interfejsu, którego potrzebujesz. To jest twój cel projektowy.
Wniosek
Nie ma magicznej formuły dla idealnej karty, ale istnieje kilka opcji, które możesz zrobić, aby zachęcić każdego użytkownika do kliknięcia (lub dotknięcia). Zachowaj swój styl skupiony w rzeczywistości, podążaj minimalistycznym podejściem z dużą ilością miejsca i kontrastu, kładź nacisk na prostą typografię i stwórz pojedynczą akcję dla każdej karty.
Poniższy schemat pomoże Ci w lepszym wyobrażeniu sobie i konceptualizacji projektów w stylu kart, z którymi użytkownicy chcą wchodzić w interakcje. Połącz te pomysły z teorią projektowania i swoimi szalonymi umiejętnościami, aby stworzyć świetny projekt, który będzie zabawny dla użytkowników i estetycznie modny.