Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Стварэнне набору карыстацкага інтэрфейсу для вэб-прыкладанняў у Adobe Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Final product image
What You'll Be Creating

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

Матэрыялы урока

Для таго, каб працягнуць, вам спатрэбяцца наступныя (бясплатныя) матэрыялы:

Падрыхтоўка дакумента Photoshop

Крок 1

Адкрыйце Photoshop і стварыце новы дакумент (File >  New...) выкарыстоўваючы налады, паказаныя ніжэй. Вы можаце выкарыстоўваць палатно любых памераў, якому вы аддаеце перавагу - у рэшце рэшт, інтэрнэт не мае памераў.

Крок 2

Давайце зададзiм некалькі правілаў, каб наш інтэрфейс быў арганізаваны і прыгожы. Я не заўсёды выкарыстоўваю сетку, але ўстаноўка некаторых абмежаванняў забяспечыць акуратнасць і ўзгодненасць. Перайдзіце ў меню View > New Guide... і вызначыце некаторыя правілы. Звычайна я выбіраю памер 1000px як пачатковую шырыню вэб-сайта, таму давайце захаваем наш набор з гэтымі памерамі.

Заўвага: Навадныя лініі, якія выкарыстоўваюцца ў нашым ўроку: па вертыкалі 100 пікселяў, 600 пікселяў і 1100 пікселяў.

Савет: Вы таксама можаце выкарыстоўваць убудова GuideGuide для Photoshop, каб зрабіць гэты працэс яшчэ хутчэй.

Крок 3

Прытрымліваючыся правілаў для Photoshop, мы будзем арганізоўваць матэрыялы для таго, каб лёгка арыентавацца і рэдагаваць. У рабочай асяроддзі нам спатрэбіцца гэты набор UI, які будзе выкарыстоўвацца шмат разоў у якасці арыентыру і рэсурсу для распрацоўкі, таму вам трэба яго арганізаваць (распрацоўшчыкі будуць вам за гэта ўдзячныя). Давайце створым шэсць груп слаёў з імем Typography, Buttons, Forms, Avatars, Images і Colors.

Каб стварыць групы, перайдзіце ў Layer > New > Group... і пакажыце для кожнай з іх назва. Для хуткага стварэння групы проста пстрыкніце на значок.

Вызначэнне друкарні

Як сказаў Олівер Райхенштейн, «вэб-дызайн - гэта 95% друкарні», гэта трэба запомніць. Перш за ўсё, нам трэба стварыць ідэальную сераду для нашай друкарні; Фон, які з'яўляецца нейтральным і лёгкім для ўспрымання. Фон і друкарня павінны мець тыпова ўзровень антраснасці для чытання. Для гэтага ўрока давайце выкарыстоўваць тонкі светла-шэры - гэта нейтральны колер, але дастаткова моцны, каб надаць вашаму з дадаткам індывідуальнасць. Я усталяваў колер пярэдняга плана на #e9eeef і націснуў Alt+Backspace для ўстаноўкі фону.

Крок 1

Адкрыйце групу Typography, абярыце прыладу Horizontal Type Tool(T) і абярыце шрыфт Open Sans. Open Sans - гэта сучасны шрыфт, які мае мноства розных варыянтаў таўшчыні і мае прафесійны, але ветлы выгляд. Ён досыць стыльны для загалоўкаў, але і таксама досыць практычны ў якасці асноўнага тэксту ў Інтэрнэце.

Open Sans мае мноства варыянтаў, але для нашага UI я буду выкарыстоўваць толькі адзін шрыфт. Майце на ўвазе, што вы павінны быць асцярожныя пры выкарыстанні больш за два шрыфтоў для вашых праектаў,паколькі можна хутка заблытацца.

Я усталяваў колер пярэдняга плана на чорны #000000, затым з дапамогай інструмента Horizontal Type Tool(T) і раней згаданага шрыфта Open Sans з параметрам Light і памерам 55px ўпісаў загаловак падзелу. Мы будзем выкарыстоўваць той жа памер і стыль для будучых загалоўкаў, каб захаваць ўзгодненасць. Мы будзем выкарыстоўваць той жа памер і стыль для будучых загалоўкаў, каб захаваць ўзгодненасць.

Крок 2

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

HTML (HyperText Markup Language) мае мноства розных тэгаў, якія дапамагаюць браўзэрам інтэрпрэтаваць змесціва старонкі. Многія з гэтых тэгаў спецыяльна выкарыстоўваюцца для вэб-друкарні, такіх як <h1>, <h2>, <h3> і т. д. Яны апісваюць загалоўкі, <h1> з'яўляюцца найбольш важнымі. Пасля гэтага выкарыстоўваецца тэг <p>, які выкарыстоўваецца для абзацаў. Не ўдаючыся ў падрабязнасці аб HTML, мы вызначым знешні выгляд гэтых элементаў.

Выкарыстоўваючы інструмент Horizontal Type Tool (T), увядзіце тры загалоўка. Я выкарыстаў Open Sans (Light) 55px для h1, 44px для h2 і 32px для h3, пакідаючы прамежак у 30px паміж імі. Прамежак паміж сімваламі - яшчэ адна важная рэч, пра якую трэба памятаць. Пакідайце досыць месцы, каб ваш шрыфт быў лёгка чытаным і выглядаў збалансаваным.

Заўвага: Я выкарыстаў таўшчыню Regular для h3. Па меры памяншэння шрыфта больш тонкі варыянт Light можа стаць менш разборлівым.

Крок 3

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

Для асноўнага колеру я абраў шэры #838383, для загалоўка - чорны #000000 і сіні #006ee3 для колеру ссылок.

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

Примечание: Усталюйце шрыфт загалоўку і спасылкі на  таўшчыню Semibold, каб яны выглядалі больш і значимее.

Робим кнопки

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

Крок 1

Сверните групу Typography, пстрыкнуўшы маленькую стрэлку побач з назвай групы і адкрыйце групу Buttons. Пасля гэтага стварыце некалькі новых вертыкальных навадных ліній, каб падзяліць нашу вобласць змесціва на тры роўныя вобласці з прамежкамі 35 пікселяў. Перайдзіце ў меню View > New Guide... і ўсталюйце наступныя вертыкальныя лініі: 410px, 445px, 755px і 790px. Тут мы будзем размяшчаць нашы кнопкі так, каб усе яны былі аднолькавымі.

Крок 2

Перейдите назад у групу Typography, знайдзіце пласт загалоўка раздзела і прадублюйце яго, націснуўшы CMD+ J, затым перамесціце яго ў групу Buttons і зменіце яго імя на «Buttons».

Пасля гэтага увядзіце тры назвы станаў кнопак: Normal, Hover і Active. Размясціце іх злева ад нашых трох роўных секцый, захоўваючы прамежак 35px паміж першай, другой і трэцяй абласцямі.

Крок 3

Зараз усталюеце колер пярэдняга плана на раней які выкарыстоўваецца сіні #006ee3 і стварыце новую групу пад назвай Primary Normal. Затым вазьміце Rounded Rectangle Tool (U), усталюйце Radius на 3px і намалюйце прастакутную форму прамавугольніка памерам 310x44 пікселяў. Змесціце яго паміж першымі двума накіроўвалымі ў загалоўку «Normal». Завяршаючы стварэнне кнопкі, напішыце на ёй тэкст белым колерам #ffffff, каб ён быў лёгка чытаным.

Крок 4

Зараз прадублюйце групу Primary Button, націснуўшы CMD+J і пераназавіце гэтыя групы ў Primary Hover і Primary Active. Пасля гэтага размесціце іх пад двума часткамі, якія мы стварылі раней.

Вы можаце спытаць, што значыць hover і active? Hover апісвае стан кнопкі, як толькі вы наводзіце на яе курсор мышы, таму нам трэба праілюстраваць рэакцыю кнопкі. Калі вы націснеце на яго, актывуецца спасылка.

Для стылізацыі станаў навядзення і націску на кнопку мы іх проста прыцьміць. Стварыце новы пласт над формай кнопкі і запоўніце яго чорным #000000. Пасля гэтага утрымліваючы націснутай клавішу Alt і перамяшчайце мышку над пластом, пакуль не ўбачыце значок са стрэлкай ўніз. Адпусціце яго, каб стварыць обтравочную маску. Нарэшце паменшыце празрыстасць пласта да 10%.

Заўвага: для актыўнага стану кнопкі павялічце празрыстасць чорнага пласта да 20%.

Крок 5

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

Оформляем формы

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

Крок 1

Сверните групу Buttons і адкрыйце групу Forms. Зноў прадублюйце загаловак раздзела з папярэдняй групы і пераназавіце яго ў «Формы». Мы створым некаторыя палі ўводу, уключаючы тэкставае поле, поле пароля, які расчыняецца спіс або поле выбару і поле адпраўкі (простая кнопка). 

Пры распрацоўцы формаў яснасць і пазнавальнасць з'яўляюцца ключавымі фактарамі. Не спрабуйце вынаходзіць ровар. Стварыце новую групу і назавіце яе Name. Затым абярыце Horizontal Type Tool (T) і ўвядзіце пазнаку для поля ўводу, у маім выпадку гэта «Імя», выкарыстоўваючы той жа чорны шрыфт 18px чорнага колеру #000000 Open Sans (Regular).

Now duplicate one of the button shape layers and move it into the Name group. Пасля гэтага зменіце колер фону на белы #ffffff і дадайце 1px шэрую #d5d5d5 ўнутраную абводку. Нарэшце, змесціце прыклад тэксту ўнутры белага закругленымі прамавугольніка. Для майго прыкладу я выкарыстаў 16px Open Sans (Regular) і колер шэры #838383, які раней выкарыстоўваўся для асноўнага тэксту.

Крок 2

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

Прадублюйце націскам CMD+J адну з груп кнопак, перамесціце яе ў групу Forms і змесціце яе пад нядаўна створаныя поля. Яшчэ раз нагадаю, што важна заставацца паслядоўным і паўторна выкарыстоўваць раней створаныя элементы.

Крок 3

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

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

Крок 4

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

Прадублюйце нядаўна створаную групу з выпадальным спісам. Выкарыстоўваючы Direct Selection Tool (A), націсніце на кут фігуры, каб убачыць межавыя кропкі, затым, утрымліваючы Shift, абярыце чатыры ніжніх кропкі і некалькі разоў націсніце іх, каб пашырыць форму. Гэты спосаб захавае вектар вашай формы і ўтрымае куты некранутымі.

Пасля гэтага прадублюйце магчымыя варыянты і змесціце астатнія ніжэй першага. Выкарыстоўвайце Line Tool (U) 1px у вышыню для стварэння простых падзельнікаў і, нарэшце, зменіце колер стрэлкі на той, які выкарыстоўваецца для кнопак. Гэта дапаможа паказаць, што поле актыўна.

Крок 5

Вы створыце просты сцэнар паведамленняў пра памылкі, напрыклад, калі хто-то ўвёў занадта слабы пароль.

Прадублюйце націснуўшы CMD+J раней створанае поле пароля і змесціце яго ніжэй выпадаючыя поля. Пасля гэтага зменіце мяжу поля на тонкі чырвоны (я выкарыстаў #eb8686) і фон да шэрага чырвонага #e9dde3. Нарэшце, абярыце больш моцны чырвоны #b63131 і ўвядзіце простае паведамленне пра памылку.

Гэта ўся праца з нашымі формамі! Я распавёў асновы, але гэтага дастаткова, каб прыступіць да распрацоўкі больш складаных формаў.

Аватары

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

Крок 1

Сверните непатрэбныя групы і адкрыйце групу Avatars. Абярыце прыладу Ellipse Tool (U) і, утрымліваючы Shift, намалюйце круг 80x80px. Перайдзіце на сайт uifaces.com і абярыце малюнак. А затым устаўце яго ў нядаўна створаны круг. Ўтрымлівайце Alt і навядзіце паказальнік мышы на мініяцюру малюнка, пакуль не ўбачыце невялікую стрэлку, затым адпусціце мыш, каб стварыць обтравочную маску.

Крок 2

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

Проста дублюйце аватар і памяншайце яго націснуўшы CMD+T, утрымліваючы клавішу Shift, каб захаваць прапорцыі.

Малюнки

Мне сапраўды трэба стварыць ўзор таго, як малююнкі будуць адлюстроўвацца ў нашым дадатку. Я пастаўлю толькі адзін малюнак ўнутры закругленымі прамавугольніка, каб паказаць, што малююнкі павінны мець закругленыя куты.

Крок 1

Выберыце Rounded Rectangle Tool (U) і намалюйце прастакутную форму паміж вертыкальнымі накіроўвалымі лініямі ніжэй групы Avatars. Пасля гэтага абярыце малюнак, я выкарыстаў адно з сайта unsplash.com, зменіце памер, калі трэба, з дапамогай спалучэння клавіш CMD+T і стварыце обтравочную маску.

Определяем каляры

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

Крок 1

Откройте групу Colors і абярыце адзін з кветак, які вы выкарыстоўвалі для асабовага боку кнопак. Пасля гэтага, выкарыстоўваючы Rounded Rectangle Tool (U), намалюйце прастакутнік. Затым абярыце прыладу Horizontal Type Tool (T) і запішыце назву колеру, або тое, для чаго ён будзе выкарыстоўвацца, напрыклад. Primary Color і пакажыце каляровыя коды ў HEX, RGB або любым іншым фармаце. Стварыце новую групу, дайце ёй імя і змесціце ў яго ўсё пласты.

Крок 2

Зараз прадублюйце з дапамогай CMD+J групу кветак і зрабіце столькі узораў, колькі вам трэба. Звычайна лепш абмежавацца чатырма ці пяццю кветкамі, так як больш кветак можа быць занадта наляписто. Паглядзіце на сайт Kuler і COLOURlovers ёсць цудоўныя палітры.

Для гэтага ўроку, як вы бачыце, я выкарыстаў колеру Primary і Secondary, адзін колер для асноўнага тэксту і адзін для загалоўкаў, таксама белы для фону палёў ўводу. Усё гэта паказана ніжэй.

Віншуем! Вы гэта зрабілі!

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.