Wprowadzenie do Proportion

Proporcja ma długą historię definiowania piękna w sztuce i projektowaniu. Starożytni Egipcjanie używali systemu siatki dla swojej sztuki ściennej, pomagając w ustaleniu skali, proporcji i ilustrując hierarchię. Starożytni Grecy byli zafascynowani proporcjami ludzkiego ciała. Złoty stosunek został wykorzystany do stworzenia „idealnych” proporcji dla Biblii Gutenberga. Nie brakuje przykładów, w których proporcje są uważnie rozpatrywane.

Dzisiaj proporcja żyje jako potężna zasada projektowania, która pomaga tworzyć spójność, hierarchię, rytm i ogólne piękno w projektowaniu. W tej lekcji omówimy, jak używać proporcji w projektowaniu UI.

Rozmiar vs Skala vs Proporcja

Aby skorzystać z proporcji w projektowaniu UI, musimy najpierw zrozumieć różnice między rozmiarem, skalą i proporcją. Wszystkie trzy z tych terminów są powiązane, ale istnieją pewne wyraźne rozróżnienia, które należy rozważyć.

Rozmiar to rzeczywiste wymiary elementu, często mierzone w px, pt, em, rem itp.

Na przykład, rozmiar tego logo to 75px wysokości i 275px szerokości.

Skala to względne wymiary elementu, często mierzone w procentach lub wielokrotnościach.

Na przykład, element może być skalowany tak, aby był większy lub mniejszy niż jego oryginalny rozmiar.

Proporcja to harmonijny związek między dwoma lub więcej elementami skali.

Na przykład, jeśli jeden element zwiększa swój rozmiar, pozostałe elementy powinny również zwiększać się w tym samym tempie, aby pozostać proporcjonalne.

Proporcja w UI Design

Porównanie proporcjonalnego i nieproporcjonalnego logo to jedno, ale prawdopodobnie zastanawiasz się „Jak to działa w UI Design?”. W końcu, przy różnych rozmiarach ekranów i urządzeń, nie jest możliwe zachowanie proporcjonalnego UI, prawda? Odpowiedź na to pytanie brzmi „Tak i nie.”

UI zazwyczaj zawierają kombinację elementów statycznych i płynnych.

  • Statyczne elementy pozostają tego samego rozmiaru, niezależnie od tego jak duży lub mały jest ekran.
  • Płynne elementy skalują się do określonego procentu swojego kontenera.

Z definicji, porównywanie elementów statycznych z elementami płynnymi nigdy nie dałoby proporcjonalnego projektu, ponieważ nie skalują się one w tym samym tempie. Jednak użytkownicy zazwyczaj nie zmieniają urządzeń podczas korzystania z UI.

Mając to na uwadze, możliwe jest użycie proporcji w projektowaniu UI. Jednakże, może to po prostu nie być sposób, którego byś oczekiwał.

Jednostki miary w projektowaniu UI

Prawdopodobnie słyszałeś termin „piksel” używany najczęściej jako jednostka miary dla produktów cyfrowych. Było to ogólnie akceptowalne do 2010 roku, kiedy Apple wprowadziło wyświetlacz Retina.

Wyświetlacz Retina zmienił sposób, w jaki myślimy o „rozmiarze”, pakując dwa razy więcej pikseli na cal kwadratowy wyświetlacza. Podczas gdy rozmiar elementu pomiędzy Retina i nie-Retina wydają się być takie same, całkowita liczba pikseli, które tworzą ten element jest zupełnie inna. Na przykład, przycisk, który ma 48px wysokości na zwykłym wyświetlaczu będzie teraz miał 96px wysokości na wyświetlaczu Retina Display z powodu gęstości pikseli.

Od tego czasu, wiele różnych ekranów High Pixel Density (HPD) stało się dostępnych w wielu różnych markach i urządzeniach. Na szczęście, ekrany HPD są zazwyczaj definiowane przez to, ile więcej pikseli mieści się na cal kwadratowy niż standardowy wyświetlacz o gęstości 1X pikseli.

Na przykład, większość ekranów można opisać jako posiadające 1X, 2X lub 3X gęstość pikseli.

Termin „piksel” jest nadal powszechnie akceptowany do opisywania rozmiaru elementu. Jednak, aby uniknąć zamieszania, wielu projektantów woli używać terminu „punkt” lub „pt”, który opisuje rozmiar, niezależnie od gęstości pikseli na ekranie.

W pozostałej części tej lekcji będziemy używać terminów „pt” i „px” zamiennie jako jednostki miary do opisania relacji między elementami w naszym projekcie.

System siatki 8pt

Podczas pracy z oprogramowaniem do projektowania, takim jak Illustrator, Photoshop, Sketch, XD, Figma itp. bardzo często projektanci używają siatek lub kolumn, aby wspomóc swoje wysiłki projektowe. Wiele z zasad projektowania omawianych w tym kursie można osiągnąć za pomocą siatek lub kolumn, więc nie jest niespodzianką, że są one popularnym narzędziem w skrzynce narzędziowej projektanta.

Jednakże istnieje jedna szczególna strategia, która działa wyjątkowo dobrze dla proporcji. Strategia ta znana jest jako 8pt Grid System.

System 8pt Grid został po raz pierwszy wprowadzony przez Google w specyfikacji Material Design. Na szczęście jest on dość łatwy do zrozumienia. Zasadniczo chcesz użyć siatki, która składa się z kwadratów 8 x 8 punktów. Podczas projektowania na wierzchu tej siatki, będziesz chciał się upewnić, że wszystkie elementy przyciągają się do siatki.

Wynikiem tego są elementy o wymiarach, które są zawsze podzielne przez 8. Projektując w ten sposób, łatwo jest zachować proporcjonalność elementów, tworząc jednocześnie poczucie pionowego rytmu w całym projekcie.

Dlaczego 8 punktów?

System 8 punktów jest najpowszechniej stosowany z dwóch podstawowych powodów:

  • Najczęstsze wymiary ekranu są podzielne przez 8, dzięki czemu Twoje projekty są bardzo wyraźne na większości urządzeń (brak podzielonych pikseli).
  • Zalecany podstawowy rozmiar czcionki w sieci to 16px. To pozwala programistom skalować elementy na stronie internetowej w jednostkach REM, pozostając wiernym systemowi siatki.

Ogółem, jest więcej korzyści z używania 8 punktów w przeciwieństwie do jakiejkolwiek innej liczby dla siatki. Możesz jednak użyć liczby takiej jak 10pt lub 12pt, jeśli bardziej Ci to odpowiada.

Why Not 4 Points?

Specyfikacja Google Material Design DOES zaleca użycie 4pt dla „Mniejszych komponentów, takich jak ikonografia i typografia.” Jednak większość elementów UI nadal może być obsługiwana przez system 8pt, więc jest on bardziej popularny na początek.

Złote proporcje

System siatki 8pt ma swoje wyraźne zalety w projektowaniu UI, ale jeśli zrobisz szybkie wyszukiwanie w Google dla „Proportion in UI Design”, spotkasz się z pierwszą stroną pełną wyników dotyczących złotej proporcji.

Złota proporcja wynosi 1:1.618 i uważa się, że jest to przecięcie matematyki i estetycznego piękna. Wielu projektantów ignoruje systemy siatki całkowicie na rzecz tworzenia proporcji z Golden Ratio zamiast.

Jest mnóstwo przykładów, jak Golden Ratio został użyty do wszystkiego, od Biblii Gutenberga do współczesnego projektowania logo do zjawisk w przyrodzie. Jednakże, są tacy, którzy wierzą, że piękno Złotej Proporcji jest po prostu mitem.

Niezależnie od tego, nie można zaprzeczyć, że wielu jest zauroczonych Złotą Proporcją, więc z pewnością warto o niej wspomnieć w tej lekcji.

Używanie Złotej Proporcji w projektowaniu UI

W lekcji 4 tego kursu dyskutowaliśmy, że projekt nie powinien mieć więcej niż 3 do 4 poziomów hierarchii w konkretnej sekcji UI. Pamiętając o tym, możesz zastosować Złotą Proporcję w swoim projekcie, wykonując następujące proste kroki:

Zdefiniuj wysokość prostokąta i pomnóż tę liczbę przez 1,618, aby znaleźć szerokość. To tworzy „Złoty Prostokąt.”

W powyższym przykładzie, nasza liczba początkowa to 350pt, ale możesz użyć dowolnej liczby, którą chcesz.

Podziel swój Złoty Prostokąt na idealne kwadraty. Każdy doskonały kwadrat spowoduje powstanie nowego, mniejszego Złotego Prostokąta.

Kontynuuj dzielenie Złotego Prostokąta, aż będziesz miał 3-4 różne doskonałe kwadraty o różnych rozmiarach.

Użyj rozmiaru każdego kwadratu jako „placeholder”, aby pomóc rozbić układ i przekazać hierarchię w projekcie.

Ogółem, rezultatem jest estetyczny i proporcjonalny projekt. Spójrz na ten przykład z Prototypr.io.

Starting With Constraints

Teraz, gdy omówiliśmy kilka metod ustalania proporcji w UI Design, omówmy kilka świetnych punktów wyjścia. Zaczynając od ograniczeń, łatwiej jest zbudować interfejs użytkownika wokół tych ograniczeń.

Mobile First Design

Fraza „Mobile First” została ukuta przez Luke’a Wroblewskiego w jego książce o tym samym tytule. Termin ten zyskał popularność wśród projektantów jako sposób walki z chęcią upchania większej ilości rzeczy w interfejsie użytkownika tylko dlatego, że jest na to dużo miejsca.

Skupiając się najpierw na projektowaniu mobilnym, projektanci muszą pracować wokół ograniczeń urządzeń mobilnych i skupić się na tym, co naprawdę ważne. W rezultacie, doświadczenie użytkownika pozostaje spójne pomiędzy urządzeniami, ponieważ główny cel UI pozostaje w centrum uwagi.

Rozmiar czcionki

Jak wcześniej wspomniano, domyślny rozmiar czcionki dla tekstu w sieci wynosi 16px dla większości głównych przeglądarek. Każdy mniejszy rozmiar może wywołać nieoczekiwane zachowanie powiększania na urządzeniach mobilnych Apple. W rezultacie, generalnie zaleca się pozostawienie 16px jako bazowego rozmiaru czcionki i określenie pozostałych rozmiarów czcionek (nagłówki, mały tekst, podpisy, etykiety, itp.) odpowiednio.

Możemy zdefiniować te rozmiary czcionek mając na uwadze proporcje, podążając za Google Material’s Design spec i wybierając rozmiary z przyrostem 4pt, takie jak Bootstrap’s style guide dla rozmiaru czcionki.

Uwaga: inkrementacja rozmiaru czcionki za pomocą złotego współczynnika nie jest zalecana, ponieważ różnice między każdym rozmiarem czcionki byłyby zbyt duże. Na przykład, zaczynając od bazowego rozmiaru czcionki 16 i mnożąc każdy poziom nagłówka przez 1.618, otrzymamy nagłówek H1 o rozmiarze 177.4 pts, co będzie bardzo trudne do odczytania.

Rozmiar przycisku

Innym czynnikiem ograniczającym, który należy rozważyć, jest precyzja metody wprowadzania danych, która jest używana w projekcie. W tym konkretnym przypadku odnosimy się do palców, kciuków, kursorów i piór rysikowych.

Palce i kciuki są znacznie szersze i mniej precyzyjne niż kursory lub rysiki. Mając to na uwadze, ważne jest, aby upewnić się, że rozmiary przycisków, elementów wejściowych, ikon lub innych punktów dotykowych są starannie dobrane, aby uwzględnić te ograniczenia.

Material Design firmy Google zaleca, aby punkty dotykowe na urządzeniach mobilnych miały nie mniej niż 48pt wysokości i 48pt szerokości oraz nie mniej niż 8pt odstępu między nimi.

Szerokość treści

Treść jest płynna, co oznacza, że wypełnia tyle przestrzeni poziomej i pionowej, ile jest w stanie. Pomimo tej cechy, dobrą praktyką jest określenie minimalnej i maksymalnej szerokości dla treści.

Minimalna szerokość treści może być określona przez minimalną szerokość ekranu, którą Twój projekt będzie obsługiwał. Najmniejsza rozdzielczość ekranu, którą obsługuje większość projektantów to 320px (czyli przy 1X) szerokości. Jednakże, powinieneś wybrać swoją minimalną szerokość w oparciu o rzeczywiste dane użytkowników, jeśli jesteś w stanie je uzyskać. Google Analytics jest dobrym miejscem do szukania tego typu danych.

Podczas gdy szerokość treści może wypełnić tyle ekranu, ile jest podane, generalnie nie jest zalecane, aby pozwolić treści rozciągać się na więcej niż 52 znaki na linię. To sugerowałoby, że maksymalna szerokość treści może być określona przez użycie rzeczywistego tekstu ciała przy normalnym rozmiarze czcionki i znalezienie wygodnej szerokości treści, która pasuje do tego zakresu.

Wniosek

W podsumowaniu, proporcja jest użyteczną zasadą projektowania. Pomimo kombinacji statycznych i płynnych elementów, proporcjonalny UI może być osiągnięty poprzez użycie 8pt Grid System, złotej proporcji, lub innej metody. Kiedy zaczynasz definiować wymiary elementów, powszechną praktyką jest rozpoczęcie od ograniczeń, takich jak urządzenie, rozmiar czcionki, rozmiar przycisku i szerokość treści. Po zdefiniowaniu podstawowych rozmiarów, o wiele łatwiej jest odpowiednio skalować elementy.

Następna lekcja
Zasady projektowania: White Space

Previous Lesson
Principles of Design: Emphasis

Feedback

Jak można ulepszyć tę lekcję? Proszę zostawić swoją opinię poniżej!

.