Дызайн вэб-інтэрфейсу што гэта такое - падрабязнае вызначэнне

Праслухаць гэты артыкул

Што такое дызайн вэб-інтэрфейсу?  Дызайн інтэрфейсу (гэта значыць дызайн карыстацкага інтэрфейсу) - гэта сродак для перадачы і абмену інфармацыяй паміж людзьмі і машынамі. Кажуць, што FaceUI уключае ў сябе апаратны інтэрфейс і праграмны інтэрфейс. Гэта скрыжаванне інфарматыкі і псіхалогіі, мастацтва дызайну, кагнітыўнай навукі і эрганомікі. У апошнія гады, з хуткім развіццём інфармацыйных і кампутарных тэхналогій, а таксама з хуткім развіццём сеткавых тэхналогій, праектаванне і распрацоўка чалавека-машыннага інтэрфейсу сталі найболей актыўным кірункам даследаванняў у міжнародных кампутарных і дызайнерскіх колах.

UI - гэта скарачэнне ад User InterfaceUI - гэта скарачэнне ад User Interface. Дызайн карыстацкага інтэрфейсу ставіцца да агульнага дызайну ўзаемадзеяння чалавека з кампутарам, логіцы працы і прыгожаму інтэрфейсу. Добры дызайн карыстацкага інтэрфейсу не толькі робіць праграмнае забеспячэнне індывідуальным і стыльным, але і робіць працу з праграмным забеспячэннем зручнай, простай і бясплатнай, цалкам адлюстроўваючы пазіцыянаванне і характарыстыкі праграмнага забеспячэння.

Шляхам класіфікацыі розных патрабаванняў да дызайну інтэрфейсу і ўплыву элементаў дызайну інтэрфейсу на паводзіны карыстальніка вывучаецца важнасць карыстальнікаў у дызайне інтэрфейсу.

Інтэрактыўнасць Інтэрактыўнасць стала мэтай дызайну вэб-інтэрфейсу. Каб дызайн адпавядаў патрабаванням выгоды выкарыстання, неабходна мець усебаковае ўяўленне пра характарыстыкі карыстача і разнастайныя патрабаванні. Для гэтага неабходна знайсці правільны спосаб дакументавання і рэалізацыі разнастайных патрабаванняў карыстальнікаў.

Інтэрфейс Інтэрфейс – гэта асяроддзе, праз якое ўзаемадзейнічаюць людзі і аб'екты, іншымі словамі, інтэрфейс – гэта новая асоба, якое дызайнеры надаюць аб'ектам.

Класіфікацыя дызайну вэб-інтэрфейсу

1. Дызайн інтэрфейсу на аснове рэалізацыі функцый

Самая асноўная характарыстыка інтэрфейсу дызайну узаемадзеяння - гэта функцыянальнасць і зручнасць выкарыстання. Дзякуючы дызайну інтэрфейсу карыстачы могуць зразумець функцыянальную працу, а інфармацыя аб самой працы можа быць больш плыўна перададзена карыстачу, гэта значыць карыстачу, які з'яўляецца асновай і каштоўнасцю існавання функцыянальнага інтэрфейсу, але паколькі ўзровень ведаў і культурны фон карыстальнікаў розныя, інтэрфейс павінен адлюстроўваць інфармацыю аб самой працы больш інтэрнацыянальным і аб'ектыўным чынам.

2. Дызайн інтэрфейсу з акцэнтам на эмацыйны выраз

Сапраўднае мастацкае зачараванне дызайну заключаецца ў перадачы эмоцыі карыстачу праз інтэрфейс. Пачуцці карыстальніка пры кантакце з творам прымушаюць людзей адчуваць эмацыйны рэзананс, а эмацыйны выраз выкарыстоўваецца для эфектыўнага адлюстравання эмацыйных адносін паміж творам і карыстальнікам. Безумоўна, існуе адзінства пэўнасці і няўпэўненасці ў перадачы эмацыйнай інфармацыі. Таму мы надаем больш увагі эмацыйным перажыванням карыстальнікаў, калі яны датыкаюцца з творамі.

3. Дызайн інтэрфейсу заснаваны на фактарах навакольнага асяроддзя

Ніякая інтэрактыўная дызайнерская праца не можа існаваць без асяроддзя, а навакольнае асяроддзе аказвае адмысловы ўплыў на перадачу інфармацыі праектнай працы. Уключаючы характарыстыкі ўласнай гісторыі, культуры, тэхналогій і шматлікіх іншых аспектаў, стварэнне асяроддзя для інтэрфейсу - гэта дызайнерская праца, якую нельга ігнараваць, па тым жа чынніку, па якой нам трэба выключаць святло пры праглядзе фільма.

Як навучыцца дызайну вэб-інтэрфейсу

Перш за ўсё, вывучыць неабходную для вэб-дызайну мову — мову html. Звярніце ўвагу, што мова html - гэта не мова праграмавання, а мова разметкі. Змест гэтай мовы адносна лёгка вывучыць, і існуе вэб-старонка, якая падтрымлівае анлайн-запуск HTML-кода.

Вывучыце HTML/CSS

Вэб-дызайн звычайна патрабуе спалучэння мовы HTML і css. Мова CSS - гэта мова стварэння вэб-сайтаў, незаменная ў вэб-дызайне. Тут я рэкамендую старонку пад назвай runoob, якая можа адладжваць і запускаць код на некалькіх мовах, што вельмі падыходзіць для пачаткоўцаў, такіх як я, для вывучэння.

Мова javascript - таксама будзе карысны

Каб палепшыць спецыяльныя эфекты на вэб-старонках, вам трэба вывучыць мову javascript. Мова javascript з'яўляецца мовай з дынамічнай тыпізацыяй, і зараз неабходна распрацоўваць розныя дынамічныя вэб-старонкі. Калі ў вас дастаткова навыкаў, вы таксама можаце вывучыць мову Java.

Вы павінны мець пэўныя мастацкія навыкі

Сапраўды добрыя карцінкі, як правіла, не генеруюцца кодам, таму вам трэба мець добрыя навыкі малявання. Вядома, вы можаце таксама папрасіць дапамогі ў сяброў, якія ўмеюць маляваць. Каб навучыцца выкарыстоўваць праграмнае забеспячэнне Photoshop, гэта неабходнае праграмнае забеспячэнне для графічнага дызайну. Гэта праграмнае забеспячэнне з'яўляецца найбольш часта выкарыстоўваным і самым простым у засваенні праграмным забеспячэннем для праектавання. Можна сказаць, што яно адносна даступна і проста ў выкарыстанні.

Калі вам сапраўды лянота распрацоўваць вэб-сайт самастойна, вы таксама можаце папрасіць іншых дапамагчы вам у яго распрацоўцы, але вам трэба папярэдне дамовіцца аб кошце, у рэшце рэшт, распрацоўка вэб-сайта - нялёгкая праца!

Якія навыкі неабходныя для вэб-дызайну карыстацкага інтэрфейсу

Многія людзі хочуць быць вэб-дызайнерам карыстацкага інтэрфейсу, таму яны хочуць ведаць некаторыя навыкі, якія неабходна асвоіць, таму далей я пазнаёмлю вас з тым, якія навыкі неабходныя для вэб-дызайну карыстацкага інтэрфейсу, давайце паглядзім.

1. HTML/CSS-код

HTML/CSS - гэта самая простая мова ў вэб-распрацоўцы, і вэб-дызайнерам важна разумець, як чытаць, рэдагаваць і вырашаць праблемы. У любым выпадку разуменне таго, як стылі і колеры кантралююцца і наладжваюцца з дапамогай кода, можа быць вельмі карысным у доўгатэрміновай перспектыве.

2. Напісанне загалоўкаў

Пры распрацоўцы вэб-старонак асноўныя раздзелы можна выкарыстоўваць у якасці запаўняльнікаў, але не ў якасці загалоўкаў. Пры канцэптуальным дызайне візуальная і змястоўная інфармацыя з'яўляецца злучным звяном загалоўка, і вы не можаце проста выкарыстоўваць адну прапанову.

3. Знакам з розным абсталяваннем

Як вэб-дызайнер, вы павінны ўмець карыстацца рознымі лічбавымі прыладамі для прагляду вэб-старонак. Розныя сістэмы і прылады маюць розныя спосабы прагляду, таму дызайнеры вэб-інтэрфейсаў павінны быць гатовыя адмовіцца ад электронных прылад, з якімі яны найболей знаёмыя, і эксперыментаваць з рознымі лічбавымі прыладамі.

4. Разумець тэндэнцыі

Як вэб-дызайнер карыстацкага інтэрфейсу, вам не трэба ведаць усе трэнды, але як мінімум тры папулярных. Умець растлумачыць візуальныя характарыстыкі гэтых тэндэнцый дызайну, чаму вы іх карыстаецеся, як яны працуюць, чаму яны вам падабаюцца ці не падабаюцца і т. д.

5. Растлумачце тэорыю дызайну

Колер, паток, баланс, прапорцыі, інтэрвалы - Гэтыя агульныя канцэпцыі дызайну таксама павінны разумець вэб-дызайнеры карыстацкага інтэрфейсу. Гэтыя канцэпцыі трэба разумець і прымяняць пры распрацоўцы праекта. Дызайн заключаецца не толькі ў тым, каб добра выглядаць, але і ў тым, што канцэпцыі і прынцыпы ў ім могуць расказаць карыстальнікам. Разуменне іх і ўменне іх інтэрпрэтаваць стварае збалансаваную прыгажосць.

Якія ёсць простыя і практычныя праграмы для вэб-дызайну?

Macromedia заўсёды была лідэрам у напрамку вэб-дызайну, і яе "Three Web Musketeers" маюць перавагу ў галіне вэб-дызайну. "Вэб-старонка Web Musketeers" – гэта тры шырока выкарыстоўваюцца праграмных інструмента ў працэсе вэб-дызайну, а менавіта Dreamweaver, Fireworks і Flash.

Праграмнае забеспячэнне для вэб-дызайну Dreamweaver

Dreamweaver - гэта магутная прылада для вэб-дызайну з зручнымі і практычнымі прыладамі і функцыямі набору тэксту WYSIWYG, інтэрфейс якога вельмі зручны і просты ў выкарыстанні. Вы можаце выкарыстоўваць яго магутныя функцыі для распрацоўкі прафесійных вэб-старонак без неабходнасці авалодваць мовай HTML.

Dreamweaver таксама з'яўляецца зручным інструментам праграмавання, можа лёгка пісаць код ASP, PHP, JSP, функцыя аўтаматычнага запаўнення праграмнага забеспячэння і функцыя афарбоўвання кода могуць эфектыўна дапамагчы карыстальнікам пісаць і адладжваць розныя коды. З дапамогай Dreamweaver можна хутка і лёгка распрацоўваць розныя дынамічныя ці статычныя вэб-сайты.

Dreamweaver можа лёгка стварыць вэб-сайт, і яго асноўныя функцыі заключаюцца ў наступным:

Праграмнае забеспячэнне для вэб-дызайну Flash

Flash - гэта стандарт інтэрактыўнай вектарнай графікі і вэб-анімацыі, прадстаўлены кампаніяй macromedia і набыты Adobe. Вэб-дызайнеры выкарыстоўваюць Flash для стварэння прыгожых навігацыйных інтэрфейсаў з змяняецца памерам і іншых мудрагелістых эфектаў. Папярэднікам Flash з'яўляецца Future Splash of Future Wave Company, першае ў свеце камерцыйнае праграмнае забеспячэнне для двухмернай вектарнай анімацыі для праектавання і рэдагавання дакументаў Flash.

Тры асноўныя функцыі дызайну Flash-анімацыі з'яўляюцца важнымі і базавымі ва ўсёй сістэме ведаў аб дызайне Flash-анімацыі, у тым ліку маляванне і рэдагаванне графікі, анімацыю руху і маскіраванне. Гэта тры цесна злучаныя лагічныя функцыі, і гэтыя тры функцыі існуюць з моманту стварэння Flash.

Магчымасці праграмы:

Некаторыя асаблівасці дызайну вэб-інтэрфейсу

1. Прынцып арыентацыі на карыстальніка

Пры распрацоўцы вэб-старонкі мы павінны спачатку вызначыць карыстальнікаў вэб-старонкі, а таксама разгледзець і распрацаваць дызайн з пункту гледжання ўзаемадзеяння з карыстальнікам. Для гэтага вы павінны мець зносіны з карыстальнікамі, каб зразумець іх патрэбы, мэты, чаканні і перавагі. Распрацоўнікі вэб-старонак павінны ведаць, што карыстачы розныя і іх магчымасці розныя.

1. Напрыклад, некаторыя карыстачы могуць мець слабы зрок (напрыклад, дальтонікі) і не адрозніваць шматлікія колеры;
2. У некаторых карыстальнікаў таксама могуць быць праблемы са слыхам, і яны павольна рэагуюць на галасавыя падказкі вэб-сайта;
3. У значнай колькасці карыстачоў кампутар досвед усё яшчэ вельмі зачаткавы, і ён будзе здавацца вельмі працаёмкім для складаных аперацый.

Акрамя таго, канфігурацыя кампутара, выкарыстоўваная карыстачамі, моцна адрозніваецца, напрыклад, відэакарта, гукавая карта, памяць, хуткасць сеткі, аперацыйная сістэма і браўзэр і т. д. будуць адрознівацца. Калі дызайнер праігнаруе гэтыя адрозненні, распрацаваная вэб-старонка выкліча блытаніну пры адлюстраванні на розных машынах.

2. Прынцып прастаты і зручнасці эксплуатацыі

Прастата і зручнасць у працы - найважнейшыя прынцыпы вэб-дызайну. Вэб-сайт у асноўным уяўляе сабой сеткавы сэрвіс для доступу да інфармацыі звычайных карыстальнікаў сеткі. Не трэба наладжваць занадта шмат аперацый на вэб-старонцы і нагрувашчваць мноства складаных і наварочаных малюнкаў. Патрабаванні гэтага прынцыпу наступныя:

3. Упраўленне макетам

З пункту гледжання макета вэб-старонкі, многія вэб-дызайнеры не надаюць яму належнай увагі, дызайн і макет вэб-інтэрфейсу занадта жорсткія і нават капіююць іншыя. Калі макет вэб-старонкі бязладны, простае нагрувашчванне вялікай колькасці інфармацыі на старонцы будзе перашкаджаць чытачу чытаць. Як правіла, прынцыпы, якім неабходна прытрымлівацца пры распрацоўцы макета вэб-інтэрфейсу, наступныя:

1. Формула Мілера 7±2

Згодна з даследаваннямі псіхолага Джорджа А. Мілера, колькасць інфармацыі, якую людзі могуць атрымаць за адзін раз, складае каля 7 біт. Падводзячы вынік формуле: колькасць інфармацыі, якую чалавек атрымлівае за раз, складае 7 ± 2 біта. Гэты прынцып шырока выкарыстоўваецца пры стварэнні вэб-сайтаў. Як правіла, лепшы выбар слупкоў на вэб-старонцы складае ад 5 да 9. Калі спасылкі на кантэнт, якія прадстаўляюцца вэб-сайтам для выбару гледачом, перавышаюць гэты дыяпазон, людзі будуць псіхалагічна раздражняцца. Гэта прымусіць людзей адчуваць, што інфармацыя занадта шчыльная, яе нельга ўбачыць, і гэта вельмі цяжка.

Напрыклад, налады слупкоў Aol.com: Main, MyAol, Mail, People, Search, Shop, Channels і Devices маюць усяго восем катэгорый. Налады слупка Msn.com: Галоўная старонка MSN, Мой MSN, Hotmail, Пошук, Пакупкі, Грошы і Людзі і чат, усяго сем. Аднак на шматлікіх айчынных вэб-сайтах ёсць слупкі, якія выходзяць далёка за рамкі гэтага дыяпазону.

2. Групавая апрацоўка

Як згадвалася вышэй, класіфікацыя інфармацыі або слупкоў не можа перавышаць 9. Але калі вашага кантэнту занадта шмат, больш за 9, вам трэба яго згрупаваць. Калі на вашай вэб-старонцы ёсць дзясяткі спасылак на артыкулы, вам трэба дадаць пусты радок або паралельны радок праз кожныя 7 артыкулаў, каб згрупаваць іх.

Калі змесціва вашага вэб-сайта змяшчае больш за 9 слупкоў, напрыклад вэб-сайт Tencent або некалькі іншых вядомых парталаў, слупкоў шмат і больш за 9. Каб не парушаць формулу Мілера 7 ± 2, больш рэпрэзентатыўныя катэгорыі выдзелены ў дызайне тоўстым шрыфтам, затым згрупаваны па характары і, нарэшце, падзелены на 6 вялікіх слупкоў.

4. Візуальны баланс

Пры распрацоўцы вэб-старонак розныя элементы (такія як графіка, тэкст, пустая прастора) павінны мець візуальны баланс. Згодна з візуальным прынцыпам візуальны эфект ад графікі большы, чым ад фрагмента тэксту.

Такім чынам, каб дасягнуць візуальнага балансу, вам трэба збалансаваць малюнак з вялікай колькасцю тэксту пры распрацоўцы вэб-старонкі. Напрыклад, большая частка вашага тэксту выраўнавана па левым краі.Align=left>, вам трэба дадаць некалькі малюнкаў або некалькі больш яркіх і якія прывабліваюць увага кветак у правай частцы вэб-старонкі.

Як правіла, кожная вэб-старонка будзе мець частку загалоўка і частка ніжняга калантытула. У частцы загалоўка звычайна размяшчаюцца рэкламныя банеры ці панэлі навігацыі і Лагатып вэб-сайта, а частка ніжняга калантытула звычайна змяшчае кантактную інфармацыю, інфармацыю аб аўтарскіх правах і г. д., сайт павінен быць распрацаваны з упорам на візуальны баланс.

Таксама нельга недаацэньваць значэнне пустой прасторы, інфармацыя, якая адлюстроўваецца на вэб-старонцы, вельмі шчыльная, што не толькі неспрыяльна для чытання чытачамі, але нават выклікае ў чытачоў агіду і псуе імідж вэб-сайта. У вэб-дызайне дадайце крыху пустой прасторы ў адпаведных месцах, каб палепшыць і сублімаваць малюнак і эстэтыку вашай вэб-старонкі, зрабіўшы яе лаканічнай.

У чым розніца паміж дызайнам карыстацкага інтэрфейсу і вэб-артам

Перш за ўсё, неабходна інтэрпрэтаваць адпаведныя абавязкі дызайну карыстацкага інтэрфейсу і вэб-арта:

Розніца паміж дызайнам карыстацкага інтэрфейсу і мастацтвам складаецца ў наступным:

1. Мастацтва, як вынікае з назвы, павінна ўпрыгожваць вонкавы выгляд вэб-сайта. Больш глыбокі ўзровень заключаецца ў тым, каб падкрэсліць канатацыю самога вэб-сайта. І сапраўдны сэнс пасады UI-дызайнера не ў мастацтве (і ні ў якім разе не ў простым выкананні працы па "ўпрыгожванні").

2. Каб быць дакладным, дызайнер карыстацкага інтэрфейсу адносіцца да карыстацкага інтэрфейсу, які спецыялізуецца на даследаванні і распрацоўцы прадуктаў. Мэта складаецца ў тым, каб аблегчыць карыстальнікам разуменне і працу з дапамогай разумнага дызайну графічнага інтэрфейсу ў адпаведнасці з перадумовай задавальнення функцыі, для таго, каб палепшыць прадукт у розумах карыстальнікаў.

3. Вэб-старонка два-тры гады таму больш клапацілася пра знешні выгляд інтэрфейсу, таму людзей, якія рабілі статычны інтэрфейс, называлі мастакамі. У асноўным структуру старонкі не трэба было ўлічваць, усё было фіксавана, і замоўца жадаў проста зрабіць яе стыльна. За апошнія два гады інтэрактыўная эфектыўнасць патрабаванняў вэб-старонкі станавілася ўсё мацней і мацней, а таксама звярталася ўвага на карыстацкі досвед. У дызайне дызайнеры павінны арганізаваць дызайн з пункта гледжання выкарыстання карыстачамі.

4. Няма сумневаў у тым, што карыстацкі інтэрфейс з'яўляецца часткай ІТ, і гэта прадукт, які з'явіцца толькі тады, калі ІТ разаўецца да вызначанай ступені.

1. Развіццё ІТ прайшло шлях ад рэалізацыі функцый да імкнення да прыгажосці і гуманізацыі;
2. У той жа час, гэта таксама частка катэгорыі мастацтва, таму што гэта працэс супастаўлення дзеянняў карыстальніка на аснове эстэтыкі.

Такім чынам, ІТ-прадукты, якія могуць толькі рэалізоўваць функцыі, ужо не могуць задавальняць запатрабаванні карыстачоў, а разгляд толькі з пункта гледжання мастацтва таксама прывядзе да грэбавання выгодай працэсу выкарыстання карыстачом.

5. Такім чынам, у цэлым розніца паміж карыстацкім інтэрфейсам і графічнай выявай складаецца ў тым, што карыстацкі інтэрфейс у асноўным факусуецца на карыстацкім досведзе працы, а графічнае афармленне - гэта эфекты старонкі, якія факусуюцца на большай колькасці ведаў пра старонку.

Дзякуй, што чытаеш Nicola Top