A végső felhasználói felület tervezési útmutató

Tartalom

• 01. Válassza ki a tipográfiát
• 02. Válassza ki a megfelelő palettát
• 03. Stílus linkek és gombok
• 04. Készítse el az összetevőket
• 05. Dokumentáljon és működjön együtt

Mi a felhasználói felület kialakítása? Jobb kérdés lenne, hogy valójában mi kerül bele a felhasználói felület tervezésébe? Esztétika? Használhatóság? Megközelíthetőség? Mindegyikük? Hogyan egyesülnek ezek a tényezők az optimális felhasználói élmény érdekében, és melyeknek kellene elsőnek lenniük?

A hozzáférhetőségnek mindig az első helyen kell lennie, megalapozva az optimális használhatóságot (a legjobb weboldal-készítő használata itt segít). És amikor egy felhasználói felület egyszerre hozzáférhető és használható, esztétikai szempontból már meglehetősen tisztességesnek kell lennie (a felhasználói felület tervezési eszközei itt segítenek). Ezután annak biztosítása érdekében, hogy a tervezés minden szinten működjön, alaposan tesztelnie kell, amit megtehet a legjobb felhasználói tesztelő eszközök kiválasztásával. Vizsgáljuk meg közelebbről a legtöbb terv alapelemeit, és mit lehet tenni a vizuális konzisztencia biztosítása érdekében.

01. Válassza ki a tipográfiát

A nagy tipográfia (mint a tervezés számos aspektusa) az akadálymentességet eredményezi. A vizuális tervezés minden bizonnyal növeli a felhasználó általános élményét, de a nap végén a felhasználók interakcióba lépnek a felhasználói felülettel, nem pedig művészetként tekintenek rá. Az olvasható betűk világosságot eredményeznek, és az olvasható szavak segítik a felhasználókat a tartalom hatékony emésztésében. Mindkettő fontosabb, mint bármilyen vizuális esztétika.

A jól megtervezett tipográfia azonban továbbra is esztétikai szempontból kielégítő lehet. A fekete-fehér Helvetica (vagy hasonló betűtípus) csak néhány egyszerű tipográfiai fejlesztés után szépség lehet. A továbbfejlesztések alatt a betűméret, a vonalmagasság, a betűköz és így tovább csípését értjük - nem a betűtípust vagy a szöveg színét.

A ’szép’ tipográfia valójában csúnya, ha nem olvasható, mert a frusztráció mindig megdönti az esztétikát. A nagyszerű dizájn kiegyensúlyozott és harmonikus.

A felhasználói felület tervezésének számos aspektusához hasonlóan a látvány finomhangolása az elérhetőség és az esztétika egyensúlyának megteremtése érdekében nem jelent kihívást. A kihívás az egységesség megőrzése a teljes tervezés során. A következetesség világos hierarchiát hoz létre a változó fontosságú elemek között, ami viszont segíti a felhasználókat a felhasználói felület gyorsabb megértésében, és még a tartalom hatékonyabb emésztésében is.

Ami az olvashatóságot és olvashatóságot illeti, a WCAG 2.0 webtartalom-akadálymentességi irányelvek által meghatározott minimális elfogadható betűméret 18pt (vagy 14pt félkövér). A legjobb betűméret nagyban függ magától a betűtípustól, de fontos szem előtt tartani a vizuális hierarchiát és azt, hogy ez az alapméret hogyan különbözteti meg az összefoglalóktól és a címsoroktól (azaz h1>, h2>, h3>).

A választott felhasználói felület-tervező eszközével (az InVision Stúdiót fogjuk használni) hozzon létre egy sor szövegréteget (T), majd állítsa be az összes méretet, hogy megfeleljen a következő sablonnak:

• h1>: 44px
• h2>: 33 képpont
• h3>: 22 képpont
• p>: 18px

Az InVision Studio (és az összes többi felhasználói felület-tervező eszköz) segítségével a stílusok beállításával a jobb oldali Inspector panel segítségével végezhető el.

Ezután válassza ki a betűtípust, de vigyázzon, mert amit néhány betűtípusnál észrevehet, az 18px p> és 22px h3> nem tűnik annyira másnak. Kétféle lehetőségünk van: módosítsuk a betűméreteket, vagy vegyünk figyelembe egy másik betűtípust a címsorokhoz. Menjen az utóbbival, ha arra számít, hogy a terv szövege nehéz lesz.

Tartsd észben, hogy:

• A vizuális felhasználói felület kialakítása gyakran bélérzékeny megközelítés
• Semmi sem dől el; minden változhat

Vonal magassága

Az optimális sormagasság biztosítja, hogy a szövegsorok kellő távolságban legyenek a megfelelő olvashatóság elérése érdekében. Ezt egyre inkább „szabványnak” ismerik el; A Google Lighthouse Audit eszköze még manuális ellenőrzésként is javasolja (vagy akár megjelölést is, ha a szöveg olyan linkeket tartalmaz, amelyek túl optimális vonalmagasság miatt túl közel lehetnek egymáshoz).

Ismét a WCAG segít nekünk ebben, kijelentve, hogy a vonal magasságának 1,5x-nek kell lennie a betűméretnél. Tehát a kezelőfelület-tervező eszközében a „Vonal” (vagy hasonló) alatt egyszerűen megszorozza a betűméretet - legalább - 1,5-gyel. Például, ha a törzsszöveg 18 képpont, akkor a vonal magassága 27 képpont lenne (18 * 1,5 - a matematikai műveletet közvetlenül az Ellenőrben is végrehajthatja). Ismét légy figyelmes - ha az 1,6x jobban érzi magát, használjon 1,6x-ot. Ne feledje, hogy a különböző betűtípusok különböző eredményeket adnak ki.

Túl korai lenne a valós adatok felhasználására gondolni a tervezés során, de legalább kissé reális adatokat kell használnunk (még a lorem ipsumot is). Az InVision Studio natív valós adatalkalmazással rendelkezik, amely segít meglátni, milyen is lehet a tipográfiánk.

Bekezdésköz

A bekezdések közötti távolság nem az a stílus, amelyet az InVision Studio Inspector-jával deklarálhatunk. Ehelyett manuálisan kell igazítanunk a rétegeket az Intelligens útmutatók (⌥) használatával. Hasonlóan a vonal magasságához, a varázsszorzó is kétszerese (kétszerese a betűméretnek). Például, ha a betűméret 18 képpont, akkor a következő szövegblokkba vezetés előtt legalább 36 képpont méretűnek kell lennie. A levélköznek legalább 0,12-nek kell lennie.

Emiatt azonban nem kell aggódnunk, amíg el nem kezdjük az összetevők létrehozását.

Megosztott stílusok

Ha a kezelőfelület-tervező eszköze támogatja (az InVision Studio még nem), fontolja meg, hogy ezeket a tipográfiai stílusokat „megosztott stílusokká” változtassa, hogy gyorsan újrafelhasználhatóvá váljanak, miközben biztosítják a vizuális konzisztenciát. Ezt általában az ellenőr útján hajtják végre.

02. Válassza ki a megfelelő palettát

A tökéletes színek kiválasztása a tervezéséhez túlmutat az esztétikán: tájékoztathatja webhelyének teljes hierarchiáját.

A felhasználói felület tervezésével kapcsolatban a szín általában az első olyan dolog, amellyel élvezzük a csobbanást, de azt tanítják nekünk, hogy az egyenesen a látványtervbe merülés rossz dolog. Ez minden bizonnyal igaz, a vizuális konzisztencia tekintetében azonban a színnek elsődleges szempontnak kell lennie, mert más szerepet játszik.

A szín a felhasználói felület kialakításában nagyon hatékony lehet, de mivel egyes felhasználók (sokan, valójában) különféle látássérültektől szenvednek, nem mindig megbízható. Ennek ellenére nem feltétlenül a használt színről van szó, hanem a szín típusáról. Ez nem biztos, hogy a márkaépítésről van szó, mivel a színt ebben a tekintetben érzelmi hatásokra használják, de az UI tervezésében a színt a szándék, a jelentés és természetesen a vizuális hierarchia kommunikációjára is használják.

01. Erős
A Stark plugin kompatibilis a Sketch és az Adobe XD szolgáltatásokkal, és segít a színkontraszt ellenőrzésében és a színvakság szimulálásában közvetlenül a vászonról. Hamarosan megjelenik a Figma és az InVision Studio támogatása.
02.Színek
A Színek egy 90 színkombinációból álló készlet, amelyek megfelelő mennyiségű színkontrasztdal rendelkeznek, hogy megfeleljenek a WCAG 2.0 irányelveknek - némelyiküknek még az AAA szabványnak is megfelel.
03. A11y projekt
Az A11y Project egy hatalmas központ a hozzáférhetőséggel kapcsolatos minden dolog számára. Erőforrásokat, eszközöket, tippeket, oktatóanyagokat tartalmaz, és a Stark plugin készítője készítette, és az InVision-től kap támogatást.

A háromféle szín

A színek jelentéstartalommal bírnak, ezért fontos, hogy ne legyen túl sok. A túl sok jelentés több olyan dolgot eredményez, amelyet a felhasználónak meg kell értenie és emlékeznie - nem beszélve több színkombinációról, amelyek miatt aggódnunk kell. Általánosságban elmondható, hogy ez lenne az ajánlott formátum:

• Cselekvésre ösztönző szín (a márka fő színe is)
• Semleges sötét szín (jobb felhasználói felület vagy sötét mód esetén)
• A fentiek mindegyikénél valamivel világosabb és sötétebb variáció

Ez lehetővé teszi a következőket:

• A sötét mód könnyen elérhető lesz
• CTA színünk soha nem ütközik más színekkel
• Bármely forgatókönyv esetén képesek leszünk hangsúlyozni és csökkenteni a hangsúlyt

Állítsa be a palettát

A választott felhasználói felület-tervező eszközével hozzon létre egy meglehetősen nagy rajztáblát (érintse meg az A-t) minden színhez (neve „Márka”, „Semleges / Világos” és „Semleges / Sötét”). Ezután minden rajztáblán hozzon létre további kisebb téglalapokat, amelyek a szín sötétebb és világosabb változatát, valamint a többi színt is megjelenítik.

Kicsit világosabbnak és sötétebbnek tartanánk, mivel 10% extra fehér és 10% extra fekete. Ha elkészült, jelenítse meg a tipográfiai stílusok másolatát az egyes rajztáblákon. Ezeknek a szövegrétegeknek színe legyen semleges, kivéve a semleges világos rajztáblát, ahol semlegesnek kell lenniük.

Kontraszt

Ezután ellenőriznünk kell a színeinket az optimális színkontraszt érdekében. Számos eszköz képes erre, például a Stark plugin a Sketch-hez és az Adobe XD vagy a Contrast a macOS-hoz - azonban egy olyan online megoldás, mint a Contrast Checker vagy a Color Contrast Checker, jól fog járni.

Ellenőrizze az egyes kombinációk színkontrasztját, és ennek megfelelően állítsa be a színeket. Ha nem biztos benne, milyen színeket használjon, próbálkozzon a Color Safe ajánlásaival.

03. Stílus linkek és gombok

Méret

A tipográfiához hasonlóan található gomboknak és linkeknek néhány változatot kell tartalmazniuk. Végül is nem minden cselekvésnek van egyforma fontossága, és mint korábban említettük, a szín nem megbízható kommunikációs módszer, ezért nem lehet a vizuális hierarchia befolyásolásának fő módszere. Mérettel kell játszanunk.

A vizuális megfizetési teszt egy használhatósági teszt, amelyet annak megállapítására használnak, hogy a csapok célzása kattinthatónak tűnik-e. A design szinkronizálása a Studio-tól a Freehand (⌘⇧F), küldje el a kapott URL-t a tesztelőknek, és kérje őket, hogy körözzék azokat az elemeket, amelyekre kattintásuk szerint vélhetőek.

A nem InVision Studio felhasználók a Freehand-et is használhatják, de az InVision Studio felhasználói zökkenőmentesen elindíthatják terveiket a Freehand-be az InVision Studio alkalmazásból, amely a felhasználók vizuális visszajelzésének megszerzésének leggyorsabb és leghatékonyabb módja.

Általában azt javasoljuk, hogy a gomb szövegét 18px-nek nyilvánítsák (ugyanaz, mint a törzsszöveg), de maguknak a gomboknak három méretváltozata van:

• Normál: 44 képpont magas (lekerekített sarkok: 5 kép)
• Nagy: 54 képpont magas (lekerekített sarkok: 10 képpont)
• Extra nagy: 64 képpont magas (lekerekített sarkok: 15 képpont)

Ez lehetővé teszi számunkra, hogy bizonyos gombok fontosabbnak tűnjenek, anélkül, hogy a színekre támaszkodnánk, és a gombokat is beágyazhatjuk (például használjunk egy gombot egy minimálisan kinéző űrlapmezőben).

Mélység

Függetlenül attól, hogy a koppintás cél-e gomb vagy űrlapmező, árnyékokat kell használni a mélység növelésére, ezért interaktivitásra utalnak. Az egyetlen árnyékstílus a gombok és az űrlapmezők minden változatához rendben van.

Interaktivitás

Minden gombtípusnak szüksége van egy variációra az egérmutató állapotának jelzéséhez. Ez egyértelművé teszi a felhasználó számára, hogy amit megpróbáltak megtenni, teljesen rendben van, és biztosítja, hogy késedelem nélkül folytassa.

Ez valójában a vizuális konzisztencia fenntartásának egyik bonyolultabb aspektusa, mert a szín gyakran az az előnyben részesített stílus, amelyet megváltoztatni kell, amikor állapotot kell létrehozni. Szerencsére ezek az állapotváltozások viszonylag finomak lehetnek, ezért rendben van, ha a színt kissé világosabb vagy sötétebb variációra változtatjuk - erre szolgálnak. Ez vonatkozik a linkekre is.

Ha ez ellen döntünk, akkor olyan színt fogunk használni, amelynek vagy már jelentős jelentése van, ami a felhasználók zavartságát eredményezi, vagy pedig úgy dönt, hogy más színnel áll elő. A másodlagos szín használata teljesen rendben van, de ezt el kell menteni a vizuális marketinghez, nem pedig a felhasználói felület elemeihez. A kevesebb több (és könnyebb).

Ne felejtse el megismételni ezt a lépést minden rajztáblánál. Ne helyezze a márkájú CTA gombokat a márka rajztáblájára - a későbbiekben kitérünk arra, hogy mi történik, ha bizonyos kombinációk nem működnek.

04. Készítse el az összetevőket

Az alkatrészek óriási időt takarítanak meg, és az összes felhasználói felület-tervező eszköz kínálja ezt a funkciót (pl. A Sketch-ben szimbólumoknak hívják őket). A Stúdióban összetevőket hozhatunk létre az összes réteg kiválasztásával, amelyből az összetevő származik, és a ⌘ használatávalK parancsikon.

Komponensek használata

A drótvázak nagyon hasznosak, nem csak a jól használható felhasználói felületek tervezésében, hanem abban is, hogy kiderüljön, mire lesz szükségünk hosszú távon. Ez olyan, mint a jövőbiztosítás.

Ez nem azt jelenti, hogy rengeteg alkatrészt kell megterveznünk, vagy készen kell állnunk bármilyen lehetséges forgatókönyvre, de azt jelenti, hogy „Mi lenne, ha?” Hozzáállást kell alkalmaznunk.

Például, ha drótvázunk 3x1-es összetevőt igényel, de tudjuk, hogy a tartalom nincs kőbe vésve, egy kis töprengés elgondolkodtathat bennünket: „Mi van, ha ez az alkatrész végül 4x1 lesz?”. A hüvelykujj-szabály: csak a már meglévő felhasználói igényeknek megfelelő tervezés, de próbáljon viszonylag rugalmas megoldásokat tenni. Ellenkező esetben a későbbiekben nagyon rendetlen "tervezési adóssággal" járunk.

Most újra felhasználhatjuk ezt az összetevőt úgy, hogy a bal oldalon lévő Könyvtárak> Dokumentum vászonra húzzuk, bár ne feledje, hogy ez a munkafolyamat a felhasználói felület eszköztől függően eltérő lehet.

Ez a stílusvezetési módszer (és végül maga a design elkészítése) különösen jól működik a moduláris / kártya alapú elrendezéseknél, bár a „közös területek”, például a fejlécek, láblécek és navigációk is kiváló jelöltek egy komponensre.

Ahogyan tipográfiai stílusainkkal, színeinkkel és gombjainkkal tettük, emlékeznünk kell arra, hogy gondosan elrendezzük az összetevőket.

Kihasználva a szabályainkat

Korábban megjegyeztük, hogy a márka színén felül nem használnak márkás CTA gombokat, mivel a márkás CTA gomboknak nyilvánvalóan ki kell tűnniük minden más között. Tehát hogyan folytathatjuk a márkás alkatrészek létrehozását, miközben továbbra is használhatjuk a márkás CTA gombot? Végül is, ha semleges sötét gombokat használunk, mondjuk navigációs gombokhoz vagy egyszerűen kevésbé fontos gombokhoz, akkor ez nem lenne opció, igaz?

Jobb. Tehát ez egy ideális lehetőség egy komponens - konkrétan egy fejléc + szöveg + gomb kombináció - létrehozására. Figyelje meg, hogyan hoztam létre a semleges fényű „kártya” hátteret a márkás gomb használatának engedélyezéséhez. Hasonlóképpen, a semleges világos formamező (az űrlapmezők általában fehérek, mivel a mentális modell történelmileg szinonimája a papírformáknak) nem tűnik csodálatosnak a semleges világos háttéren, így csak a semleges sötét háttéren használhatók - akár közvetlenül, akár azon belül semleges sötét komponens. Így tesszük rugalmasvá a tervezésünket, miközben betartjuk a szabályainkat és fenntartjuk az összhangot.

Stressz teszt

Ideális esetben a robusztus kialakítás gyorsabb és leghatékonyabb módja a stresszteszt. Ha egy tervet próbára teszünk, az azt jelenti, hogy kegyetlen. Tegyük fel, hogy van egy navigációnk X mennyiségű navigációs elemgel, mert ez volt a követelmény; A rugalmasság biztosítása érdekében próbálja meg megváltoztatni ezeket a követelményeket további navigációs elemek hozzáadásával, vagy, hogy valóban csavarkulcsot dobjon a munkálatokba, próbáljon meg hozzáadni egy navigációs elemet is, amely magasabb vizuális hierarchiával rendelkezik, mint a többi. Méretünk, tipográfiánk és színszabályaink megengednek-e ilyesmit? Vagy az optimális használhatóság érdekében szükségünk van egy másik szabályra?

Ne feledje, hogy különbség van a szabályok hozzáadása és a szabályok hajlítása között. A több éles eset kevesebb következetességet jelent, ezért a használhatóság érdekében jobb, ha egyszerűen átgondolja az alkatrészt.

05. Dokumentáljon és működjön együtt

Hogyan tegyük könnyebbé a tervfájljaink használatát mind saját magunk, mind más tervezők számára, akik használhatják a tervfájlunkat? Nos, megtudhatja, fontos, hogy biztonságosan tárolja őket megbízható, megosztott felhőalapú tárhelyen.

Színek

Az első lépés az összes szín mentése a „Document Colors” színmintába, ha ezt még nem tettük meg - ez megkönnyíti a hozzáférést, amikor alkalmaznunk kell őket a tervezésünkben.Ehhez nyissa meg a színválasztó modult az Ellenőrből, válassza a legördülő menü „Dokumentum színei” elemét, majd kattintson a + ikonra a szín hozzáadásához a színmintához. Ez ugyanúgy működik a legtöbb felhasználói felületen.

Megosztott könyvtárak

Ezután meg kell alakítanunk a dokumentumunkat - tipográfiai stílusokkal, színekkel, gombokkal, közös helyiségekkel és alapvető összetevőkkel kiegészítve - megosztott könyvtárakká.

Lényegében ez azt jelenti, hogy minden elemnek összetevőnek kell lennie, még akkor is, ha csak egy rétegből áll. Kattintson a + ‌ gombra a Könyvtárak bal oldali sávban, majd importálja ezt a dokumentumot egy új dokumentumba. Így van: dokumentumunk most könyvtár, és készen áll a felhasználói felület garantált konzisztenciájú tervezésére.

Az InVision Studio némileg korlátozott abban az értelemben, hogy még nem szinkronizálódik az InVision hivatalos Design System Manager eszközével, de elég könnyű elhelyezni a könyvtárat a Dropboxban, hogy más tervezők használhassák és frissíthessék őket idővel. A módosítás végrehajtásakor (lokálisan vagy távolról) minden, a könyvtárat használó Studio fájl (ismételten, lokálisan vagy távolról) megkérdezi, hogy frissíteni kívánja-e a színeket és az összetevőket. Így tartják karban a tervezési könyvtárakat a csapatok között.

Amikor vizuálisan konzisztens felhasználói felületeket tervezünk, használjunk fel mindent újra. Tervezzen gombokat, majd a gombokkal hozzon létre gombelemeket, majd használja
gombkomponensek más összetevők, például riasztások és párbeszédpanelek létrehozásához.

Csak ne hozzon létre olyan alkatrészeket, amelyekre nincs szükség. Ne feledje, hogy a könyvtár építése folyamatos, együttműködő erőfeszítés. Nem kell egyszerre kitölteni, egyedül kell kitölteni, vagy valaha is. Csak egy nyelvet kell közvetítenie.

Tervezés méretarányban

Ahogy a design kibővül, annak kezelése nehezebbé válik. Különféle beállításokat érdemes elvégeznünk annak érdekében, hogy hatékony és karbantartható legyen, főleg, hogy az InVision DSM-je még nem működik a Stúdióval.

Például szövegrétegekkel érdemes feljegyeznünk könyvtárunkat, hogy elmagyarázzuk a különféle elemek használati eseteit. A tipográfiai stílusok esetében akár a szöveget is leíróbbá tehetjük (pl. "H1> / 1.3 / 44px"). Ez azt mondja h1>s legyen 44px, és vonalmagassága 1,3 legyen.

Tervezés átadása

A tervezési kézbesítő eszközök megmutatják a tervezés minden elemének által használt különféle stílusokat, hogy a fejlesztők elkészíthessék az alkalmazást vagy a webhelyet. Ezek az eszközök tartalmazzák a stílusok áttekintését, valamint a ’dokumentum színei’ színminta másolatát. A fejlesztők ezeket a stílusokat akár kódként is átmásolhatják, ami kiváló, ha úgy döntött, hogy bármilyen írásos tervdokumentációt készít, és az összetevők kódrészlet-reprezentációit szeretné tartalmazni.

Ha aggódsz a hibaelhárítás és a webhely kezelése miatt, akkor annak biztosítása, hogy a megfelelő webtárhely-szolgáltatást kapd meg, segít, de a tervezési rendszered számára az InVision Design Handoff eszközét, az Inspect-et kell használni. Kihasználásához kattintson az InVision Studio ’Közzététel az InVision-be’ gombra / ikonjára, nyissa meg a kapott URL-t, majd érintse meg a gombot, hogy átváltson Ellenőrzési módba. Nagyon kényelmes.

Ez a tartalom eredetileg a net magazinban jelent meg.