Задаволены
- Плюсы прататыпавання
- Прататыпаванне прыкладанняў
- 01. Дыўшот
- 02. Станкавы стан
- 03. UXPin
- Меркаванні па рабочым працэсе
- Прасцей, чым было
- Будучыня прататыпа
- Спадабалася гэта? Прачытайце гэтыя!
Паколькі большасць сайтаў цяпер рэагуе па змаўчанні, прататыпаванне з'яўляецца неабходнасцю. Мы распрацоўваем і будуем сайты, якія рэагуюць на
прылада, якая выкарыстоўваецца для іх прагляду. Праца ў асяроддзі, праз якую будуць распрацаваны нашы канструкцыі, альбо максімальна набліжаная да яе можа быць толькі для нас карысцю. Зрабіць гэта ўсё прасцей і прасцей, бо інструменты, якія мы маем у сваім распараджэнні, становяцца ўсё больш дасканалымі.
Безумоўна, самай складанай часткай працы дызайнера з'яўляецца адэкватнае тлумачэнне ідэй і намераў іншым. Дазволіць людзям выпрабаваць гэтыя ідэі - нашмат лепшы спосаб дапамагчы ім зразумець - мне падаецца фраза "паказваць, не расказваць" асабліва падыходзіць. На гэтым усё не спыняецца. Прататыпаванне вашага дызайну таксама дае магчымасць убачыць, дзе ён працуе, а не шляхам тэставання, наладкі і наладкі па ходзе.
Плюсы прататыпавання
Як часта вы бачылі, каб нешта было пабудавана так, як вы яго распрацавалі, каб выявіць, што гэта не тое, што вы сапраўды чакалі ці хацелі? На гэты момант ужо позна.
Я даўно лічу, што дызайнеры павінны займацца праграмаваннем. Больш глыбокае разуменне дызайну атрымліваецца, калі вы ведаеце, што адбываецца ўнізе. Гэта робіць вас лепшым дызайнерам і робіць больш строгі дызайн. Якая структура дакумента - дызайнерскае рашэнне.
Але мне нядаўна давялося паставіць пад сумнеў гэтае перакананне. Я пачаў бачыць прыкладання, якія прапануюць некаторыя перавагі прататыпаў HTML праз інтэрфейс перацягвання, што дазваляе вам перайсці ад ідэі да ўзаемадзеяння з гэтай ідэяй і прасоўваць яе наперад адносна хутка. Безумоўна, самая вялікая карысць, і тое, што прымусіла мяне паставіць пад сумнеў маё меркаванне, - гэта тое, што гэтыя прыкладанні робяць так лёгка ствараць прататыпы ў спагадным выглядзе.
Калі вы карыстаецеся мабільным тэлефонам, вы можаце змяніць памер экрана на працоўны стол і паглядзець, як змесціва перапрацоўваецца і змяняецца, калі гэта неабходна. Гэта значна спрашчае як працэс, так і меркаванні, якія мы павінны ўлічваць пры распрацоўцы адаптыўнага сайта. Але гэта пачатак і лепшы старт, чым шэраг карцін і візуальных малюнкаў розных памераў.
Прататыпаванне прыкладанняў
На працягу многіх гадоў я паспрабаваў мноства прыкладанняў у надзеі, што яны дапамогуць мне наблізіцца да жывой версіі таго, што я распрацоўваў у той час, не займаючы столькі часу, колькі трэба было б ручна праграмаваць прататып. Адказ быў заўсёды: цэтлікаў няма. Але цяпер, калі з'яўляюцца дадаткі, якія дапамагаюць распрацоўваць і прататыпаваць адаптыўны сайт, як яны могуць вам дапамагчы - і на які варта паглядзець больш уважліва?
Давайце разгледзім тры прыкладання, якія варта разгледзець, каб пазнаёміць з вашым працоўным працэсам: Divshot, Easel і UXPin. У цэлым усе тры робяць адно і тое ж: дапамагаюць стварыць старонку, перацягваючы шэраг стандартных элементаў.
Канструктар інтэрфейсаў перацягвання Divshot і інструмент вэб-дызайну ў браўзэры Станкавы станок выкарыстоўвае Bootstrap як аснову: разумны, улічваючы яго метэарытычнае прыняцце. Divshot таксама нядаўна ўключыў фонд ZURB. UX / каркасны інструмент UXPin - гэта не толькі прататыпаванне; вы можаце загрузіць персаналіі і іншыя артэфакты, каб дапамагчы распавесці гісторыю праекта.
01. Дыўшот
Перацягванне можа быць складаным з Divshot: ён дазваляе толькі ставіць элементы ў становішча, якое потым змяшчаецца ў DOM. Гэта можа быць абмежавальным, але вы атрымліваеце код вытворчага ўзроўню Bootstrap, які ляжыць у аснове дызайну. Вам трэба выкарыстоўваць Bootstrap і адпавядаць вашаму дызайну, што дазваляе дадаваць уласны CSS для налады візуальнага дызайну.
Выпрабоўваючы Divshot, я выявіў, што праводжу час ва ўбудаваным рэдактары кода, як толькі ўстанавіў пачатковую структуру старонкі. Але не трэба было доўга ўсталёўваць гэтую першапачатковую структуру, і я змог хутка зрабіць эскіз у інтэрфейсе. Адзін недахоп - адсутнасць магчымасці спасылак на старонкі для стварэння прататыпа, які можна націснуць - таму вам трэба будзе загрузіць прататып, а затым стварыць спасылкі паміж файламі ўручную. (Divshot плануе дадаць магчымасць спасылак на старонкі ў дадатку ў наступным выпуску.)
Ёсць яшчэ дзве прыкметныя асаблівасці. Элементы кіравання бачнасцю Divshot у інспектары ўжываюць клас да элементаў, дазваляючы лёгка паказваць або хаваць іх на адной з чатырох прылад, якія настроены для вас (тэлефон, планшэт, працоўны стол і HD).
Потым ёсць тэмы. Divshot падключыўся да Bootswatch, з дапамогай якога вы можаце хутка пераключыць тэму, якую вы выкарыстоўваеце, і нават выкарыстоўваць свае ўласныя тэмы. У дадзены момант гэтая тэма простая, але ўлічыце, якую моц яна можа вам даць, калі вы падключыце ўласную тэму для кліента. Divshot каштуе ад 30 да 300 долараў у месяц.
02. Станкавы стан
Станка таксама выкарыстоўвае Bootstrap. У адрозненне ад Divshot, вы можаце хутка "накідаць" у інтэрфейсе, не выкарыстоўваючы элементы макета. Вы таксама можаце хутка і лёгка звязаць старонкі ў прататып, які можна націснуць. Пасля таго, як вы гатовыя падзяліцца чымсьці са сваёй камандай альбо кліентам, вы можаце зрабіць гэта і атрымаць зваротную сувязь, выкарыстоўваючы рэжым каментарыяў.
Я б таксама разгледзеў магчымасць выкарыстання гэтага для запуску тэстаў юзабіліці на аснове lo-fi: магчымасць зваротнай сувязі такім чынам з'яўляецца адным з самых вялікіх пераваг прататыпавання. Станка таксама мае падтрымку каманд. Не прывязаць дызайн да канкрэтнага чалавека можа быць толькі добра.
Адзін недахоп станка - фіксаваны памер палатна для выгляду працоўнага стала, асабліва калі вы хочаце ўсталяваць дызайн цалкам плаўным. Я выявіў, што шырыня элементаў была зафіксавана па памеры палатна, а не ў даступнай прасторы ў браўзэры. Станкоўка каштуе ад 15 да 99 долараў у месяц.
03. UXPin
Інтэрфейс UXPin мае больш функцый, чым Divshot або Stafel, што робіць яго больш поўным і поўным дадаткам. Вы не прывязаныя да фреймворка CSS, таму маеце свабоду цалкам распрацоўваць дызайн без абмежаванняў, якія яны вам накладаюць. Вы можаце наладзіць сваю ўласную сетку і пераключацца паміж некалькімі памерамі экрана, дадаючы іншыя, калі вам трэба, каб вам было шмат гнуткасці.
Пасля таго, як вы стварылі свой прататып і падзяліліся ім з членамі каманды, яны могуць каментаваць, адказваць і вырашаць асобныя запыты. У адрозненне ад іншых прыкладанняў, вы можаце ствараць ітэрацыі, якія можна праглядаць і каментаваць. Мне падабаецца, як гэта выкрывае распрацоўку дызайну - дакументаванне элементаў, якія не працуюць, гэтак жа карысна, як і дакументаванне рэчаў, якія робяць. Занадта часта мы звяртаем увагу толькі на тое, што працуе, забываючы растлумачыць падарожжа.
UXPin сапраўды засяроджаны на тым, каб расказаць гісторыю праекта, забяспечваючы магчымасць загрузкі дадатковых аб'ектаў, не створаных у дадатку, такіх як персоны, стартавы праект альбо шаблон праекта. UXPin каштуе ад 12 да 89 долараў у месяц.
Меркаванні па рабочым працэсе
Усе тры праграмы маюць месца ў маім працоўным працэсе. Яны пакрываюць шмат зямлі, і я бачу, як яны набіраюць сілу. UXPin і Easel хутка разабраліся: калі вам трэба нешта дапамагчы вам хутка праверыць ідэі, то з іх можна было б пачаць.
Калі вы працуеце ў больш інтэграваным выглядзе, магчыма, побач з камандай распрацоўшчыкаў, і разважаеце, як кампаненты адначасова падыходзяць адзін аднаму, вы можаце аддаваць перавагу Divshot (асабліва, калі вы выкарыстоўваеце Bootstrap або Foundation). Я бачу, як інтэграваныя каманды атрымліваюць прабег з-за магчымасці спасылкі на ўласную тэму.
Там будуць распрацоўшчыкі, якія кажуць, што вы павінны будаваць уласную структуру. Але калі вы можаце ўзяць што-небудзь, што зрабілі прататыпам, выпрабавалі і перадалі камандзе распрацоўшчыкаў, якая з задавальненнем скарыстаецца гэтым, чаму б вам не зрабіць?
Прасцей, чым было
Гэтыя тры праграмы паказваюць, што прататыпаванне значна прасцейшае, чым было. Узровень, на які вы падыдзеце, - гэта пытанне выбару. Гэта будзе залежаць ад праекта, каманды і таго, колькі часу ў вас ёсць. Я ўсё яшчэ бачу выпадкі, калі мне ўсё яшчэ захочацца ўвайсці ў код, таму разглядайце гэтыя праграмы як цэтлік у пачатку працэсу.
Па меры сталення інструментаў, якія мы выкарыстоўваем, бар'еры для ўваходу будуць зніжацца. Адважуся сказаць, але прататыпаваць рэчы становіцца прасцей, цягнучы розныя элементы з сайтаў, такіх як jsFiddle і GitHub.
Будучыня прататыпа
Кожнае прыкладанне мае плюсы і мінусы. Адно, што мяне бянтэжыць у гэтых праграмах, гэта тое, што ўсе яны пачынаюцца з працоўнага стала па змаўчанні, а не пачынаюць з мабільнага.
Пры такім дызайне ўтрыманне з'яўляецца адной з найважнейшых рэчаў - і ніводнае з гэтых прыкладанняў не дазваляе лёгка атрымаць змесціва ў самым пачатку дызайну. Калі нашы праекты павінны ўвасабляць прынцыпы, па якіх мы пачынаем жыць, мы павінны ствараць інструменты, якія мы выкарыстоўваем, у аснове іх. Магчыма, стан старонкі па змаўчанні будзе жаданым дадаткам.
Тым не менш, прататыпаванне становіцца ўсё больш простым, гэта значыць вы можаце больш эфектыўна правяраць і тлумачыць свае ідэі - даючы вам час засяродзіцца на дызайне.
Гэвін Уай - старэйшы дызайнер карыстацкага досведу, у цяперашні час працуе ў Virgin Money.
Гэты артыкул першапачаткова з'явіўся ў нумары 245 часопіса net.
Спадабалася гэта? Прачытайце гэтыя!
- Даведайцеся, што чакае дапоўненая рэальнасць
- Памылкі CSS, якіх павінен пазбягаць кожны вэб-дызайнер
- Выдатныя прыклады навігацыі па вэб-сайце
