Rozdíl mezi designem UI / UX Koncepty rozšíření vodičů, prototyp a maketa (Aktualizováno)

prototyp maketa telframe

Jaký je rozdíl mezi drátem, maketou a prototypem? Zkušený designér definoval podmínky pro návrháře UI / UX.

Rozdíly mezi dráty, prototypy a maketami jsou mnohými designéry vždy matoucí, přestože jsem byl zkušeným návrhářem, viděl jsem, jak se mnoho lidí ptá Quory a Reddita na tyto podmínky, takže co to sakra je? pochopit. Řeší mnoho problémů a šetří energii pro designéry.

Co je drátový model?

Toto je grafická struktura webu nebo aplikace, která obsahuje obsah a prvky. Stejně jako v případě návrhu budovy, i práce mrakodrapu vyžaduje hodně práce a účastníků. Podobně dráty vypadají jednoduše a musí být provedeny návrháři UX, UI, IxD. Jednoduše řečeno, telframe je jednoduchý návrh rozložení, který má 3 jednoduché, ale přímé cíle:

  • Obsahuje základní informace
  • Nakreslete strukturu a rozvržení
  • Vizualizovat uživatelské rozhraní

Vizuální vlastnosti drátového drátu

Z optického hlediska má kabelová náhlavní souprava velmi jasná vizuální omezení, protože k jejímu dokončení jsou zapotřebí pouze jednoduché čáry, rámečky a šedá (různé šedé barvy).

Kabelová obrazovka má velmi jasná vizuální omezení. Obecně by designéři měli používat pouze čáry, krabice a šedé v provedení (různé šedé úrovně znamenají různé úrovně).

2. Jednoduché vektorové dráty

Simple Symphrams zahrnují obrázky, videa a text

3. Výhody elektrického kabelu

Konstrukce drátu je rychlá a levná.

Obzvláště pokud používáte papír, tužky a drátěné stěrače, jako je Balsamiq. Tyto návrhové nástroje byste samozřejmě měli použít, abyste mohli ihned začít.

Ve srovnání s úplným a podrobným telframe s vysokým rozlišením je mnohem snazší a důležitější shromažďovat myšlenky prostřednictvím špičkového symfonu. Proč ne? Důvodem je to, že lidé kladou větší důraz na výkon softwaru, informační architekturu, uživatelský zážitek, harmonogramy a využití uživatelských interakcí, než aby brali v úvahu estetické vlastnosti těchto prvků. V tomto případě však můžete snadno změnit podle potřeby, ale nemusíte konfigurovat kódování a grafické úpravy.

4. Interaktivní Symphram

Designéři občas upřednostňují zlepšení spolehlivosti vodičů, aby v některých ohledech zvýšili důležitost uživatelského rozhraní a demonstrovali logiku rychlého testování a interakce mezi vizuálními prvky. Pro správné vyřešení těchto problémů používá program interaktivní symfam, známý také jako tištěný telframe.

Pokud chcete vytvořit takový složitý drát, budete potřebovat UXPin, což je nástroj pro instalaci a prototypování vodičů. Vytvoření interaktivního prototypu může být nejlepší prezentací pro vývojový tým a klienty. Ptáte se: „Co se stane, když stisknu toto tlačítko?“ Pokud máte problém, stačí kliknout a ukázat zákazníkům, jak komunikovat s interaktivním prototypem. Ve skutečnosti je působivý a přímý.

5. Opatrně nasměrujte drát

Pokud mu musíte dát telfram, musíte si dát pozor na chlapa, který je absolutně hoden. Může to být váš klient i váš netechnický manažer. Neví však, že by se drát a konečný produkt mohly zdát propojené. Nemusí tedy rozumět vnitřní komunikaci a pracovnímu režimu mezi nimi. Musíte tedy předložit a jak učinit správné rozhodnutí.

Kabelové konstrukční nástroje

Papír a tužka

Papír a tužka jsou nejjednoduššími nástroji pro drátěný design. Nakreslete náhodný proužek papírem, jedná se o jednoduchý drát s jednoduchými čarami a boxy. S jeho pomocí mohou designéři intuitivně prezentovat nápady pomocí podrobnějšího textu nebo slovní komunikace se zákazníky a vedoucími pracovníky. To se však v oficiálním projektu nepoužívá pro velké společnosti.

Balsamic

Designéři občas upřednostňují zlepšení spolehlivosti vodičů, aby v některých ohledech zvýšili důležitost uživatelského rozhraní a demonstrovali logiku rychlého testování a interakce mezi vizuálními prvky. Balsamiq představuje sadu prvků pro statické telframy dvěma různými způsoby. Jeho ručně tažené styl pomáhá soustředit se na rozvržení, funkční design, všechny barvy jsou bílé a černé. Takže nebudete slyšet stížnost na nastavení barev a vizuální efekt.

Co je to prototyp?

Poptávka prototypu je vyšší než poptávka po telframu. Rozdíl je v tom, že prototyp by měl být interaktivní a pokud možno prototyp s vysokým rozlišením, který bude odpovídat rozhraní koncového uživatele. Zároveň poskytuje testerům kompletní zkušenost simulací skutečného rozhraní produktu a funkční interakce.

1. Výhoda prototypu

„Vytvoření prototypu vstřícného k týmu pomáhá zvýšit propojení mezi návrháři a vývojáři.“

Proč je to tak důležité? Prototyp je obvykle používán uživateli pro testování produktu. Testování prototypu může ve velmi rané fázi ušetřit náklady a čas. Architektura produktu se tak nezmění kvůli nepřiměřenému interaktivnímu rozhraní. Prototyp je tedy dokonalým úspěchem pro návrháře a vývojáře k testování produktu.

Poskytování prototypů uživatelům k získání zpětné vazby je navíc výhodou, která vás seznámí se všemi detaily vašeho produktu a inspiruje celý tým. Většina prototypovacích nástrojů dokáže rychle a efektivně vytvářet prototypy, ale nemusí být kódována.

Účel prototypu je jasný: co nejvíce zjednodušit interakci uživatele a rozhraní. Po stisknutí tlačítka musí být provedena příslušná operace a objeví se příslušné stránky, které se snaží napodobit celý zážitek z produktu. Ptáte se: „Co se stane, když stisknu toto tlačítko?“ Pokud máte problém, stačí kliknout a ukázat zákazníkům, jak komunikovat s interaktivním prototypem. Ve skutečnosti je působivý a přímý.

2. Vizuální rysy prototypu

Je zřejmé, že prototyp musí mít estetické vlastnosti produktu a pokusit se vyhovět nejnovější verzi. V zásadě jde o vzhled produktu, který nemá HTML / CSS / JS, a nemusíte procházet server a databázi.

3. Prototypový test

Testování prototypů je důležitým krokem v procesu návrhu prototypu, což je důležitý krok v celém procesu. Jak provést ověřovací test, je zde velké téma. Jednoduchý test může trvat až hodinu a testovat lze 5 nebo 6 klíčových událostí. Níže uvádíme několik často kladených otázek:

  • Jak může uživatel začít? (Vyhledat nebo zobrazit?)
  • Co dělá uživatel jako první? a další?
  • Jak učiní konečné rozhodnutí?
  • Rozumí účelu návrhu? Existují nějaké problémy?

Vytvoření prototypu produktu je nepřetržitý proces, který vyžaduje iteraci a zlepšení.

Prototypovací nástroje

Mockplus

Mockplus je komplexní prototypovací nástroj pro rychlý šum, rychlý design a rychlé prohlížení. Umožňuje vytvářet makety pro mobilní (Android a iOS), stolní (PC a Mac) a webové aplikace. Mockplus 3.2 přidal režim návrhu toku uživatelského rozhraní, opakovací hardware, ukázkové projekty a šablony a import náčrtu. Další funkce, jako je například režim návrhu mapy mysli, budou k dispozici ve verzích po verzi Mockplus 3.2.

https://www.mockplus.com

iDoc

Spolupracujte s iDoc jako nástrojem pro odesílání návrhů, poskytujícím zdroje pro návrh a také jako prototyp světla. Kontinuální proces umožňuje návrhářům uživatelského rozhraní načítat vizuální skripty z pluginů Photoshop, Adobe XD a Sketch.

Je velmi snadné a přímé navázat interaktivní spojení přidáním kontaktního místa pro výrobu prototypů během několika sekund. Se 7 gesty a 13 animacemi můžete získat interaktivní prototyp, který lze snadno vytisknout. Pro odkaz, domovskou stránku a externí odkaz existují 3 nastavení. Zjistěte více, překvapí vás to ještě více!

UXPin

UXPin vytvořil přes 900 různých prvků uživatelského rozhraní, takže můžete vytvářet dráty a prototypy. Jeho citlivý breakpoint funkce umožňuje uživatelům vytvářet citlivé prototypy a sim karty, které pracují na různých zařízeních a rozlišení.

Co je to maketa?

Maketa je „vizuální skript“ používaný k zobrazení vizuálního designu produktu. Má bohatší vizuální prvek než řetězové dráty, včetně grafiky, rozvržení, barev a dalších podrobných vizuálních prezentací. Do jisté míry se jedná o konečný design produktu.

Podobně jako kabelový drát je maketa statická a nefunguje. Zaměřuje se na vzhled produktu přidáním mnoha vizuálních prvků k dosažení větší přesnosti. Často se používá v diskusích o vizuálním designu ke zlepšení vizuálního designu produktu.

Návrhový tok

Jakmile se seznámíte s podstatou designu, rozdílem mezi telefonními jmény, maketami, prototypy, jste v popředí světa designu uživatelských zkušeností.

Pokud z řady návrhů produktů můžete udělat jasný a efektivní pracovní postup, stane se úžasné.

Tipy

  • Při výrobě drátu zkuste použít upravitelné a znovu použitelné prvky. V tomto případě budete pokračovat v mazání prvků pro provádění prototypů založených na jednoduchých vodičích.
  • Při instalaci vodičů se pokuste shromáždit nápady a nápady od svého týmu a zákazníků a pokuste se je promítnout do symfonického designu.
  • Použijte svůj nejpohodlnější nástroj

Také se zajímám o:

Nejlepší nástroje a aplikace pro návrh makety a telefonování pro návrháře UI / UX 2017

UX vs UI vs IA vs IxD: 4 Smíchání podmínek digitálního designu

Nejlepší UI / UX návrhové knihy a zdroje pro designéry

Původně zveřejněno na www.mockplus.com.