it-swarm-eu.dev

Výhody / nevýhody maket PSD vs. maket HTML

Nedávno jsem četl několik článků ( tento a tento ), které otevírají mé oči HTML maketám, na rozdíl od obvyklých maket PSD.

V článku citují určité klady:

  • Změny jsou mnohem rychlejší (včetně změn barev a do jisté míry i písem).
  • Když stránku rozložíte jako HTML, ukazujete klientovi něco mnohem blíže tomu, jak bude vypadat konečný produkt.
  • Změny velikosti okna mohou vidět účinky rozvržení kapaliny.

Nevýhody:

  • Ne všichni vizuální návrháři mohou vytvořit maketu v HTML. Bude to muset být úkol pro dvě osoby. Osoba HTML a osoba Photoshopu.

Co vidíte kluci jako výhody/nevýhody obou přístupů?

24
milesmeow

Pokud stavíte web nebo aplikaci, jsou makety HTML mnohem lepší, protože maketa navrhujete ve formátu co nejblíže finálnímu produktu. To vám umožní mnohem snadněji stanovit očekávání, omezuje vás na to, co je v konečném produktu možné, a poskytuje mnohem větší flexibilitu.

Tato konvence se postupně stává známou jako „design v prohlížeči“. Navrhování v prohlížeči obchází metodu vodopádu svou podstatou. Makety Photoshopu představují překážku mezi vizuálním návrhářem a návrhářem interakce/UX: osoba pracující ve Photoshopu může být umístěna daleko, zcela přemýšlet z hlediska vizuální věrnosti, aniž by brala v úvahu konečný produkt a doprovodná omezení prohlížeče. Jakmile je maketa photoshopu připravena, dostane se tým „Uss“ do týmu UX, aby se dostal do další fáze. To nepodporuje iterativní proces orientovaný na zpětnou vazbu.

Napsal jsem blogový příspěvek před pár měsíci o této filozofii, kterou jsme používali při stavbě našeho prototypovacího nástroje. Zde jsou některé články, na které jsem zde odkazoval, které mohou být užitečné (včetně článku Megan Fishera, s nímž jste propojeni):

Ostatní návrháři a vývojáři s ním souhlasí:

  • 37signals ' Proč přeskočíme Photoshop vysvětluje jejich postup: Makety Photoshopu nejsou interaktivní; nedávají vám cit pro tok aplikace; povzbuzují vás, abyste se zaměřili na podrobnosti příliš brzy.
  • Článek Meagan Fisher's 24ways.org Make Your Mockup in Markup hovoří více o Clarkových principech a vysvětluje, jak začít se strukturou HTML umožňuje návrhářům rychle iterovat přes více rozvržení stránek.
  • Tyto 12 tipů pro návrh v prohlížeči více než v Design Shacku nabízejí také několik dobrých poznatků.
18
Rahul

Je to věrnost.

Úlovek spočívá v tom, že jeden dokument může být vyšší věrnost než druhý v závislosti na tom, na co se zaměřujete.

Prototyp HTML je ve skutečnosti jediným způsobem, jak skutečně zesměšnit jakoukoli interakci, i když s mírnou složitostí. Jednoduše neexistuje způsob, jak plně dokumentovat návrh interakce v souboru PSD.

A naopak, pokud jste v prostředí, ve kterém se vizuální design neustále vylepšuje/vylepšuje/opakuje, může být PSD lepším „dokumentem záznamu“ pro zpracování vizuálních návrhových prvků.

Nakonec si nemyslím, že jde o PSD vs. HTML. Potřebujete oba v různých částkách v závislosti na specifikách vašich potřeb na základě projektu a člena týmu.

13
DA01

Jednou z možných nevýhod používání maket HTML je, že si klient mohl myslet, že jste aplikaci dokončili - i když jste jim řekli, co to je.

Vážně jsem znám lidi - klienty i manažery - kteří, kteří viděli maketu pomocí nástrojů, které normálně používáte k sestavení skutečného produktu, si myslí, že jste odvedli většinu práce a jsou překvapeni, když řeknete, že to bude trvat dalších 6 týdny (nebo jakkoli dlouhé), aby skutečně provedli práci.

Pokud budou makety odstraněny o jeden krok, může to rozptýlit toto nedorozumění.

Nicméně, jak již bylo řečeno, dynamický maketa vám a klientovi umožní lépe porozumět tomu, jak systém funguje a jak se v aplikaci pohybujete.

7
ChrisF

Interaktivní makety není úkolem vizuálního návrháře, ale spíše úkolem návrháře UI/UX. Pravda - často jsou stejná, hlavně z rozpočtových důvodů, ale jejich práce jsou velmi odlišné.

Vaše otázka by ve skutečnosti mohla být přeformulována jako statické vs. dynamické makety.

Podle mého názoru jsou dynamické makety téměř vždy lepší než statické:

Hlavním důvodem je podle mého názoru, že mohou být použity k přesnému testování použitelnosti - představa, že něco děláte, je velmi odlišná od toho, jak to vlastně děláte, uvědomuje si čas, který potřebuje, množství kliknutí, pohyb atd. Poskytuje tedy skutečný pocit toku v systému.

Nic však není bez ceny - vytvoření dynamického maketa obvykle vyžaduje mnohem více času. Navíc to vytváří vyšší očekávání u zákazníka - pokud stisknete jedno tlačítko a v systému něco uděláte, očekávali byste, že všechna tlačítka budou fungovat stejně (a některá by mohla být pro hlavní scénář méně relevantní).

Při statickém modelování může být také jednodušší vést zákazníky a vývojáři skrze případy použití - jednoduše zobrazujete obrazovky jeden po druhém ve správném pořadí a ujistěte se, že jsou pokryty všechny případy použití jak jste zamýšleli. Když používáte dynamický, mohlo by to uživatelům poskytnout „příliš mnoho“ svobody, nechat je chybět případy použití klíčů atd.

BTW - k vytváření maket html nemusíte být programátor. Existuje spousta nástrojů (například Axure, Balsamic, Flair Builder a mnoho dalších), které umožňují vytváření takových maket neprogramátory.

5
Dan Barak

S rostoucí popularitou responzivního designu je dokonce více smysl používat dynamický model (předpokládaný HTML). Při navrhování počátečního hrubého rozvržení se mi neustále mění velikost prohlížeče, abych viděl, jak rozvržení funguje na mnoha šířkách.

Pokoušet se určit responzivní design se statickým obrázkem není možné a vyjádřit ho pomocí více statických obrázků je časově náročné a příliš složité.

2
obelia

Neoficiální odpověď

Nedávno jsem pracoval na webu, kde byla hlavní šablona navržena ve Photoshopu (na který se budu dále odkazovat jako na „PS“), ale jednotlivé části webu je stále třeba navrhnout. Pracoval jsem na několika sekcích s některými nestandardními požadavky na uživatelské rozhraní a musel jsem se rozhodnout, zda je budu zesměšňovat ve Photoshopu, nebo jen pomocí HTML/CSS. Vybral jsem si ten druhý a byl VELMI vděčný za to.

Vlastně jsem začal označováním obsahu stránky a navigačních prvků v HTML. Jakmile jsem to měl, začal jsem si hrát s CSS a viděl jsem, co funguje. Byl jsem schopen velmi rychle vytvořit několik zcela odlišných rozvržení a okamžitě je otestovat v prohlížeči. Bylo několik možností, o kterých jsem věděl, že nebudou fungovat téměř okamžitě, a byl jsem schopen je rychle opustit (kde bych normálně dokončil návrh v PS). Také jsem byl schopen přidat interaktivní (ukázat/skrýt/atd.) Prvky, které by ve Photoshopu nebyly možné.

Některé věci prostě jdou cesta rychleji v HTML vs. PS, například v tabulkách. Vizuální návrh tabulek v PS s proměnlivým obsahem textu uvnitř buněk a záhlaví vyžaduje určitou snahu. Je to velmi rychlé v HTML a vy skutečně vidíte, jak to bude vypadat.

To vás samozřejmě dostane jen tak daleko, protože s CSS nemůžete dělat vše. Občas bych se vrátil do Photoshopu a vytvořil takový a takový obraz pro určitou část, ale z větší části jsem byl překvapen, jak moc mohu dělat jen s CSS.

Můj pohled

Stále to budu brát případ od případu. Ale v budoucnu se určitě opírám o makety HTML.

2
jessegavin

Pokud mám pravdu, domnívám se, že VB byl původně napsán jako způsob, jak rychle srazit nějaké makety ... S ohledem na to bych řekl, že „správná“ odpověď je pravděpodobně jít po silnici makety HTML.

Nicméně, já jsem v procesu vytváření maket pro nový produkt, když píšu, a upřímně řečeno, nevěřím, že úsilí spojené s vytvářením html maket, které vypadají stejně dobře jako ve formátu PSD, stojí za to. Dostat trochu textu nebo obrázku, atd., Aby se objevilo přesně tam, kde ho chcete, se složitým návrhem rozvržení zabere webový vývojář déle, než by to byl umělec photoshopu s podobnou úrovní dovedností.

Také, pokud se chystáte dělat více než text a základní návrhy, pravděpodobně budete používat Photoshop (nebo podobné grafické balíčky) k provedení této práce - proč se obtěžovat komplikovat záležitost?

Je pravda, že pokud existuje reálné opodstatnění pro použití interaktivních maket (například velká skupina uživatelů, která demonstruje, jak si myslíte, že některé konkrétní interaktivní zobrazení bude fungovat), pak stojí za to navíc.

Ale pokud právě ukazujete klientovi, jak si myslíte, že by měla vypadat několik oken aplikace, nemyslím si, že je zde důvod pro další úsilí?

1
Sk93