Ең дұрыс нұсқау. Материалдық дизайн қолданбасының белгішесін қалай жасауға болады

Материалдық стиль қолданбасының белгішесін қалай жасауға болатынын білгіңіз келсе, сіз дұрыс жерге келдіңіз!

Бұл нұсқаулық белгішені жасаудың ең дәл нұсқауы болып табылады. андроид қолданбаларыМен желіден таба алған әртүрлі көздерден жиналған Материалдық дизайн стилінде.

Қолданба белгішесі жасалған графикалық редактор Adobe Illustrator CC. Нұсқаулар өте қысқа. Қайталау үшін редактордың білімі жеткіліксіз болса, төмендегі материалдардан бейнені қараңыз (3-бет).

Нұсқауларды жазу үшін келесі материалдар пайдаланылды

1. Google Material Design нұсқаулары: https://www.google.com/design/spec/style/icons.html
2. Материалдық дизайн иконографиясына арналған нұсқаулықтарда Google нені жіберіп алды: https://goo.gl/5SpsVn
3. Adobe Illustrator бағдарламасында материалды дизайн белгішесін қалай жасауға болады: https://youtu.be/GzXq6ouGTpE

Бастапқы файлдар

Әзірлеуге көмектесетін кейбір файлдарды жүктеп алу керек

1. Материалдық дизайн түстер палитрасы: https://goo.gl/EVxUSx - Material Palette.ase файлын мұрағаттан Adobe Illustrator палитралары каталогына көшіріңіз (C:\Program Files\Adobe\Adobe Illustrator CC 2015\Presets\en_US\Swatches )
2. Қаріптер: https://goo.gl/GQbKob - жүйеге қаріптерді орнатыңыз, сонымен қатар қаріп файлдарын C:\Program Files\Common Files\Adobe\Fonts және C:\Program Files (x86)\Common ішіне көшіріңіз. Файлдар\ қалталар Adobe\Fonts
3. үшін тор ыңғайлы жұмысбелгішелермен (Өнім белгішесі жапсырма парағы): https://goo.gl/CYE2jV - 4 қолданба белгішесі үлгісін қамтиды

Әрекетке дайындық

Түс палитрасы файлын Adobe Illustrator кітапханасына көшіріңіз, содан кейін алынған палитраны Swatches панеліндегі Swatch Libraries тізімінен таңдаңыз. Қаріптерді орнатыңыз және олардың Adobe Illustrator бағдарламасында бар-жоғын тексеріңіз. Roboto Regular қаріпі қол жетімді болмаса, қаріп файлдарын бастапқы файлдарда жоғарыда тізімделген каталогтарға көшіріңіз. Тор файлдарын ашыңыз және оларды Adobe Illustrator бағдарламасында ашыңыз. Сізге ең қолайлысын таңдаңыз, қалғанын жабыңыз. Бұл үлгілерде дұрыс көлеңкелер мен жарықтандырулар қазірдің өзінде ұйымдастырылған - олардың мәндерін негізге алуға болады. Бастайық.

Материалдық стильде белгішені құру

Бұл оқулықта біз оқулықта сипатталған геометриялық фигуралардың бірінің ең қарапайым белгішесін жасаймыз. Белгіше үлгісінің өлшемі 192×192 pt, ол өлшем мәндерін басқаруға өте ыңғайлы. Белгішенің геометриялық өлшемдері оның түріне байланысты келесідей:

• шаршы белгішесі: 152×152 pt
• төртбұрыш: 176×128 pt
• дөңгелек: ⌀ 176 пт

Шаршы және төртбұрышты белгішенің бұрыштарын дөңгелектеу: 12 пт

Шаршы белгішені жасау мысалын қарастырыңыз

Барлық манипуляциялардан кейін сіз келесідей нәрсені көруіңіз керек:

Келесі қадам - ​​фон үшін бөлектеу және көлеңке аймағын жасау.

Бұл фондық жұмысты аяқтайды.

Белгі белгішесін жасау

Процестің сипаттамасын жеңілдету үшін фонда «В» алфавитінің таңбасын орналастырамыз

Белгіге ұзын көлеңке жасау

• Қабаттарда белгішесі бар пішінді таңдаңыз (оң жақтағы қосқыш) және көшіріңіз (Ctrl + C) және алдына екі рет қойыңыз (Ctrl + F). Нәтижесінде сіз үш бірдей «Символ» пішінін алуыңыз керек. Біз жаңа екі фигурамен жұмысты жалғастырамыз
• Жоғарғы «Символ» пішініне ауысып, басып тұрыңыз Shift пернесіпішінді кенептің сыртына 45° оңға және төмен жылжытыңыз - бұл ұзын көлеңке қалыптастыруға арналған бос орын
  
  
• Нәтижесінде қабаттар тізіміндегі ортаңғы және төменгі пішін фонның ортасында болуы керек, ал жоғарғы бөлігі төменгі оң жақта кенептің сыртында болуы керек. Төменгі фигураға әлі қол тигізбейміз.
• Енді оң жақ қосқышпен екі «Символ» фигурасын таңдаңыз - жоғарғы және ортаңғы пішіндер, мәзірге Объект - Араластыру - Араластыру параметрлері, Көрсетілген қадамдар режимін қосыңыз, 200 қадамды көрсетіңіз және OK түймесін басыңыз, содан кейін мәзір командасын орындаңыз. Нысан - Араластыру - Жасау. Екі пішіннің негізінде біреуі екі ескінің арасындағы ағын түрінде жасалады.
  
• Алынған фигурадан таңдауды алып тастамай, мәзірдегі әрекетті орындаңыз Объект - Кеңейту ... және OK түймесін басыңыз - ағын жеке көпбұрыштарға бөлінеді
• Көпбұрышты біріктіруді орындау (біріктіру)
  
• Алынған пішіннің атын өзгерту «Ұзын көлеңкеде» болашақ көлеңкемен
• Енді маска жасайық. Фондық пішінді көшіріңіз (Ctrl+C) және Орында қою (Shift+Ctrl+V). Нәтижесінде өңі бар пішін қабаттағы барлық пішіндердің үстіне кірістіріледі.
• Оң жақ қосқышты таңдап, ең жоғарғы жағында орналасқан «Фон» және «Ұзын көлеңке» пішінін және кесуді кесіңіз. Нәтижесінде біз фигуралар тобын аламыз бірнеше пішінді қамтиды
• Барлық кескіндерді жою Көлеңкенің өзін қоспағанда - ол толығымен ақ және, ең алдымен, қалған бөлігінің үстінде орналасқан Скриншот топтан жойылуы керек пішінді көрсетеді
  
• Атын өзгерту «Ұзын көлеңкеге» енгізіп, оны «Таңба» кескінінің астына қойыңыз
  
• «Ұзын көлеңке» пішініне ауысыңыз, содан кейін Градиент тақтасында Сызықтық түрі, бұрышы -45°, басы мен соңы өңдік көлеңке үшін таңдалған түспен бірдей - біздің жағдайда бұл Индиго 900(Сілтемедегі "Реңк, реңк және көлеңке мәндері" кестесінен түсіңізді таңдаңыз: https://goo.gl/8Vkg33), сол жақтың бұлыңғырлығы 20%, сол жақтың бұлдырлығы 0% және ортаңғы нүктенің орны 33%
  
• Енді көлеңке пішінін Blanding (ағынды пішіндер) кезінде пайда болған «қадамдардан» тазалау керек. Ұзын көлеңке пішінін белсенді етіңіз және пішіннің жиегін бағалау үшін жеткілікті масштабтаңыз
  
• Lasso құралын таңдап, төменде көрсетілгендей төтенше нүктелерге қол тигізбеу үшін нүктелерді таңдаңыз
  
• Таңдалған бекіту нүктелерін жою құралы арқылы қосымша нүктелерді жойыңыз
  

Белгі үшін бөлектеу және көлеңке аймағын жасау

Бүкіл белгіше үшін бөлектеуді жасау

• «Фон» фон кескінін көшіріп, жаңа қабат жасаңыз және оған фон кескінін қойыңыз. Пішіннің толтырылуын өшіріңіз. Қабатты "Жарықтандыру" деп өзгерту
• Келесі параметрлері бар жаңа қабаттағы пішін үшін градиент толтыруын жасаңыз: радиалды түрі, градиенттің басы мен соңының түсі ақ, градиент басының мөлдірлігі 10%, градиенттің соңы 0% , ортаңғы нүктенің орны 33%
• Градиент құралын (G) пайдаланып фонның жоғарғы сол жақ бұрышынан төменгі оңға қарай градиент жасаңыз, содан кейін параметрлердегі градиент бұрышын -45° етіп өзгертіңіз.

Бүкіл белгіше үшін жалпы көлеңке жасау

Сіз веб-әзірлеуші ​​немесе веб-дизайнерсіз бе және заман ағымына ілесуді қалайсыз ба? Содан кейін тегін материалды жобалау белгішелері- бұл жай ғана міндетті нәрсе!

Материалдық дизайн дегеніміз не

материалдық дизайн- Бұл пайдаланушыларға ыңғайлы болу үшін оның барлық өнімдері мен қызметтерін бір әмбебап интерфейс астында біріктіруге арналған Google бағдарламалық жасақтамасы дизайны.

Материалдық дизайнның негізгі идеясы - пайдаланушыларға нақты физикалық нысандармен жұмыс істеудің интуитивті сезімін беру.

Материалдық дизайн белгішелері

Бүгін мен сізге 900-ден астам тегін Материалдық дизайн белгішелерін әкелемін, оларды сіз өз веб-сайттарыңызда еркін пайдалана аласыз.

Бұл белгішелер қарапайым, мейірімді және заманауи. Әрбір белгішені барлық пайдаланушы интерфейстерінде жиі қолданылатын әмбебап ұғымдарды қарапайым және минималды пішіндерде бейнелеу үшін Google дизайн нұсқауларын пайдаланып дизайнерлер жасайды.

Материалдық дизайн белгішелері барлық жалпы платформаларда және экран ажыратымдылықтарында барабар көрсету үшін оңтайландырылған үлкен және кіші өлшемдерде оңай оқылатындығы мен анықтығын қамтамасыз етеді.

Тегін Material Design белгішелері SVG және PNG пішімінде, сондай-ақ веб-қаріпте қол жетімді.

Материалдық дизайн белгішелерін пайдаланудың ең оңай жолы - Google серверінен қосылған қаріп түрінде. Мұны істеу өте оңай:

Материалдық дизайн белгішелерін қалай қосуға болады

Және ішінде css файлы.material-icon сыныбына сәйкес ережелер жинағын қосыңыз, олармен біз белгішелерді қолданамыз:

материалды белгішелер (
font-family: «Материалдық белгішелер»;
шрифт салмағы: қалыпты
шрифт стилі: қалыпты
шрифт өлшемі: 24px; /* Таңдаулы белгіше өлшемі */
дисплей: кірістірілген блок
сызық биіктігі: 1;
мәтінді түрлендіру: жоқ;
әріптер аралығы: қалыпты
сөз тіркесі: қалыпты;
ақ кеңістік: nowrap;
бағыт:ltr;
/* Барлық WebKit браузерлерін қолдау. */
-webkit-фонт-тегістеу: антиалиазирленген;
/* Safari және Chrome үшін қолдау. */
мәтінді көрсету: Оңтайлылық;
/* Firefox үшін қолдау. */
-moz-osx-шрифті тегістеу: сұр реңк;
/* IE үшін қолдау. */
шрифт-функция-параметрлері: «liga»;
}

Материалдық дизайн белгішелерін қалай пайдалануға болады

Белгішелерді пайдалану өте оңай. Беттің дұрыс жеріне келесі кодты қойыңыз:

бет

Мұндағы бет сөзі жиынтықтағы белгішенің атын білдіреді. Барлық атауларды осы бетте табуға болады. Дәл сол жерде, кез келген белгішені басқан кезде, төменде осы белгішені сайтыңызға қалай кірістіру керектігі туралы кеңес пайда болады.

Жоғарыдағы мысалда белгішелер жай ғана өз атын пайдаланады. Барлық браузерлер атауды белгішенің өзімен автоматты түрде ауыстыруды қолдамайды. Ескі браузерлердің белгішелерді тиісті түрде көрсетуін қаласаңыз, олардың сандық баламасын пайдаланыңыз. Оны жоғарыдағы бетте кез келген белгішені басып, Белгіше қаріпін таңдау арқылы табуға болады.



Сәндеу материалының дизайны белгішелері

Өзгеріс үшін сыртқы түріМатериалдық дизайн белгішелері үшін келесі CSS ережелерін пайдалануға болады:

/* Белгішенің өлшемін өзгерту ережелері. */
.material-icons.md-18 ( қаріп өлшемі: 18px; )
.material-icons.md-24 ( қаріп өлшемі: 24px; )
.material-icons.md-36 ( қаріп өлшемі: 36px; )
.material-icons.md-48 ( қаріп өлшемі: 48px; )
/* Ашық фонда белгішелерді қара түспен пайдалану ережелері. */
.material-icons.md-dark ( түсі: rgba(0, 0, 0, 0,54; )

/* Қараңғы фонда белгішелерді ақ түспен пайдалану ережелері. */

Барлық белгішелерді кез келген өлшемге орнатуға болатынына қарамастан, материалды жобалау және пайдалану принциптерін сақтау ұсынылады берілген өлшемдер 18, 24, 36 немесе 48px. Әдепкі бойынша, белгішелер 24px өлшемінде көрсетіледі.

Материалдық дизайн белгішелері үшін өзіңіздің түсіңізді қалай орнатуға болады

Материалдық дизайн нұсқауларын орындасаңыз, белгішелер үшін тек ақ-қара түстерді пайдалану керек. ақ түстиісінше 54% және 100% мөлдірлікпен. Белсенді емес белгішелер үшін - сәйкесінше 26% және 30%.

Material-icons.md-dark ( түсі: rgba(0, 0, 0, 0,54); )
.material-icons.md-dark.md-inactive ( түсі: rgba(0, 0, 0, 0,26); )
.material-icons.md-light ( түсі: rgba(255, 255, 255, 1); )
.material-icons.md-light.md-inactive ( түсі: rgba(255, 255, 255, 0.3); )

Дегенмен, белгішелер үшін өз түстеріңізді қолдануға ештеңе кедергі келтірмейді:

Материалдық дизайн белгішелерін тегін жүктеп алыңыз

Сондай-ақ, осы белгішелер жинағын өзіңізге жүктеп алып, оны дизайн макеттерінде немесе әртүрлі интерфейстерді жасау кезінде пайдалануға болады. Материалдық дизайн стиліндегі тегін белгішелерді жүктеп алуға болады (~ 60 МБ).

Жақында Google өзінің жаңа тұжырымдамасын ұсынды пайдаланушы интерфейстеріқұқығы бар. Бұл өте ауқымды идея, бұл туралы бір мақаланың аясында айту мүмкін емес. Біз шексіздікті қабылдауға тырыспаймыз, бірақ оны оның өте маңызды құрамдас бөлігі - графикалық объектілер, көбінесе қысқалық үшін және дәстүрлі түрде белгішелер деп аталатын тұрғысынан қарастыруға тырысамыз.

Google Material Design тұжырымдамасында олар веб-бет немесе жұмыс үстелі қолданбасы болсын, пайдаланушы тәжірибесінің ажырамас және өте маңызды бөлігі болып табылады. Бұл концепцияға сәйкес пайдаланушыда цифрлық ортада нақты физикалық нысандармен жұмыс істеудің интуитивті сезімі болуы керек. Салыстырмалы түрде кішігірім өлшемдермен олар анық және айқын болуы керек, үйлесімді түс схемасы болуы керек және сандар арасындағы белгілі бір тепе-теңдікті сақтау керек. бос орынжәне ұсақ бөлшектер. Сонымен қатар, веб бірдей тартымды көрінуі керек екенін есте ұстаған жөн әртүрлі құрылғыларжәне операциялық жүйелер.

Бүгін біз кейбір интерфейс элементтерін жасау саласында, біздің ойымызша, Материалдық дизайн тұжырымдамасын ұстанудың сәтті әрекеттерін қарастырамыз.

Веб-материал белгішелерінің дизайны

Стильдегі веб-студия қызметтерінің белгішелері

Хостинг провайдеріне арналған материалдық дизайн белгішелері

Бұрыштық материалды жобалау белгішелері

Материалдық дизайн стиліндегі изометриялық белгішелер