Веб-сайтты иштеп чыгуу технологиясы өтө көп кырдуу процесс. Бирок, дагы эле, анын бардык этаптары эки негизги компонентке бөлүүгө болот - иш жана тышкы кабык. Же, веб-мастерлер арасында адаттагыдай эле, тиешелүүлүгүнө жараша, бэк-аягы жана алдыңкы. Веб-иштеп чыгуу студияларынан веб-сайттарына буйрутма берген адамдар көбүнчө функцияга гана көңүл бурууга арзырлык деп эсептешет жана бул туура чечим болот. Бирок бул өтө сейрек учурларда, адатта бета тестирлөө этабында стартап долбоорлору үчүн туура. Болбосо, графикалык дизайн жана колдонуучу интерфейси жөн гана веб иштеп чыгуу стандарттарына жана ыңгайлуу болушу үчүн талап кылынат.
Интерфейс дизайнеринин же дизайнердин биринчи бурчу ташы бул сайттын макетинин туурасы. Анткени, ал үчүн интерфейстерди тартуу керек. Таза интуитивдик түрдө эки ыкма пайда болот - же ар бир популярдуу экран токтому үчүн өзүнчө макеттерди түзүңүз же бардык дисплейлер үчүн сайттын бир версиясын түзүңүз. Жана эки вариант тең туура эмес болот, бирок биринчи кезекте.
Стандарттуу вебсайттын туурасы пиксел мененRunet үчүн
Адаптивдүү макет иштелип чыкканга чейин, туурасы миң пикселдик сайттын өнүгүшү массалык көрүнүш болгон. Бул көрсөткүч бир жөнөкөй себеп менен тандалып алынган - сайт каалаган экранга туура келет. Мунун өзүнүн логикасы бар, бирок адамдын иш тактасында дагы эле жок дегенде HD монитору бар деп коёлу. Бул учурда, сиздин макет экрандын ортосунда кичинекей тилке сыяктуу көрүнөт, анда баары бир үймөктө жабышып, капталдарында чоң пайдаланылбаган мейкиндик бар. Эми адам сиздин веб-сайтыңызга 800px кең экраны бар планшеттен кирди жана жөндөөлөрдөн "Веб-сайтты толук көрсөтүү" деген белги коюлган деп коёлу. Бул учурда, сиздин сайтыңыз да туура эмес көрсөтүлөт, анткени ал жөн эле экранга туура келбейт.
Бул ой-пикирлерден, биз макет үчүн белгиленген туурасы, албетте, бизге ылайыктуу эмес жана башка жол издөө керек деген тыянак чыгарууга болот. Ар бир экрандын туурасы үчүн өзүнчө макет идеясын талдап көрөлү.
Бардык учурлар үчүн макеттер
Эгер сиз рынокто экрандын бардык өлчөмдөрү үчүн макеттерди түзүү стратегиясын тандасаңыз, анда сиздин сайт бүтүндөй Интернетте эң уникалдуу болуп калат. Анткени, бүгүнкү күндө ар бир вариантка тактоо үчүн аракет кылып, аппараттардын бардык спектрин камтуу мүмкүн эмес. Бирок сиз мониторлордун жана түзмөктөрдүн экрандарынын эң популярдуу резолюцияларына көңүл бурсаңыз, анда идея жаман эмес. Анын бир гана кемчилиги каржылык чыгымдар болуп саналат. Анткени, интерфейс дизайнери, дизайнер жана кодер бир эле ишти 5 же 6 жолу аткарууга мажбур болгондо, долбоор кымбаттайт.баштапкы бюджеттик баадан пропорционалдуу түрдө жогору.
Ошондуктан, бир гана беттик сайттар ар кандай экрандар үчүн версиялардын көптүгү менен мактана алат, анын максаты бир продуктту сатуу жана аны жакшы аткаруу. Эгер сизде мындай десанттардын бири эмес, көп барактуу сайт болсо, андан ары ойлонушуңуз керек.
Эң популярдуу сайт өлчөмдөрү
Эки экстремалдын ортосундагы компромисс үч же төрт экран өлчөмүн түзүү болуп саналат. Алардын арасында, бири мобилдик түзмөктөр үчүн макет болушу керек. Калгандары чакан, орто жана чоң рабочий экрандарга ылайыкташтырылышы керек. Сайттын туурасын кантип тандоо керек? Төмөндө биз 2017-жылдын май айындагы HotLog кызматынын статистикасын сунуштайбыз, ал бизге түзмөктүн экранынын ар кандай токтомдорунун популярдуулугун бөлүштүрүүнү, ошондой эле бул көрсөткүчтүн динамикасын көрсөтөт.
Таблицадан сиз колдонгуңуз келген сайттын өлчөмүн кантип аныктоону биле аласыз. Кошумчалай кетсек, бүгүнкү күндө эң кеңири таралган формат 1366 х 768 пикселдик экран деп жыйынтык чыгарсак болот. Мындай экрандар бюджеттик ноутбуктарга орнотулган, ошондуктан алардын популярдуулугу табигый нерсе. Кийинки эң популярдуу - бул Full HD монитор, ал видеолор, оюндар үчүн, демек, веб-сайттын макеттерин түзүү үчүн алтын стандарт болуп саналат. Андан ары таблицада биз мобилдик түзүлүштөрдүн 360х640 пикселдик чечмелдиктерин, ошондой эле андан кийинки рабочий жана мобилдик экрандардын ар кандай варианттарын көрөбүз.
Макетин долбоорлоо
ОшентипСтатистиканы талдап чыккандан кийин, сайттын оптималдуу туурасынын 4 варианты бар деген тыянак чыгарсак болот:
- 1366px туурасы менен ноутбуктун версиясы.
- Толук HD версия.
- Кичинекей рабочий мониторлордо көрсөтүү үчүн 800px кең макети.
- Сайттын мобилдик версиясы - туурасы 360 пиксель.
Сайт үчүн түзүлгөн булак үчүн кандай өлчөмдө колдонууну чечтик дейли. Бирок мындай долбоор дагы деле кымбатка турмак. Келгиле, бул жолу белгиленген туураны колдонбостон, көбүрөөк опцияларды карап көрөлү.
Макетин ийкемдүү кылуу
Экрандын минималдуу өлчөмүнө гана ыңгайлашууга арзырлык болгон альтернативалуу ыкма бар, ал эми сайттын өлчөмдөрүнүн өзү пайыздар менен белгиленет. Ошол эле учурда, менюлар, баскычтар жана логотип сыяктуу интерфейс элементтери пикселдер менен экрандын туурасынын минималдуу өлчөмүнө басым жасоо менен абсолюттук маанилерде орнотулушу мүмкүн. Мазмуну бар блоктор, тескерисинче, экрандын аянтынын туурасынын көрсөтүлгөн пайызына жараша созулат. Бул ыкма сайттардын көлөмүн дизайнер үчүн чектөө катары кабыл алууну токтотуп, бул нюансты чеберчилик менен жеңүүгө мүмкүндүк берет.
Алтын катыш деген эмне жана аны веб-баракчасынын калыбына кантип колдонсо болот?
Кайра жаралуу доорунда да көптөгөн архитекторлор жана сүрөтчүлөр өз чыгармаларына идеалдуу форманы жана пропорцияны берүүгө аракет кылышкан. Мындай пропорциянын баалуулуктары тууралуу суроолорго жооп алуу үчүн алар бардык илимдердин ханышасына - математикага кайрылышкан.
Байыркы замандан бери көзүбүз эң табигый жана жарашыктуу деп кабыл алынган пропорция ойлоп табылган.анткени ал жаратылышта бардык жерде кездешет. Мындай катыштын формуласын ачкан Фидий деген таланттуу байыркы грек архитектору болгон. Ал эсептеп чыккан, эгерде пропорциянын чоңу кичинесине тиешелүү болсо, бүтүндөй чоңу менен байланыштуу болсо, анда мындай пропорция эң жакшы көрүнөт. Бирок, эгерде сиз объектти асимметриялуу бөлгүңүз келсе, ушундай болот. Бул пропорция кийинчерээк алтын бөлүм деп аталып, дүйнөлүк маданияттын тарыхы үчүн анын маанисин дагы деле ашыра баалабайт.
Веб дизайнга кайтуу
Бул абдан жөнөкөй - алтын катышты колдонуп, мүмкүн болушунча адамдын көзүнө жагымдуу болгон баракчаларды түзө аласыз. Алтын катыш формуласынын аныктамасы боюнча эсептеп, биз иррационалдык 1 санын алабыз, 6180339887 …, бирок ыңгайлуулук үчүн 1, 62 тегеректелген маанини колдонсок болот. Бул биздин баракчанын блоктору 62 болушу керек дегенди билдирет. % жана 38%, сиз колдонуп жаткан сайт үчүн түзүлгөн булак кандай өлчөмдө болбосун. Бул диаграммада мисалды көрө аласыз:
Жаңы технологияларды колдонуңуз
Заманбап веб-сайттарды жайгаштыруу технологиялары пландоочунун жана дизайнердин идеясын так жеткирүүгө мүмкүндүк берет, андыктан эми сиз Интернет-технологиялар пайда болгон учурга караганда батыл идеяларды ишке ашырууга мүмкүнчүлүк берет. Мындан ары сайттын көлөмү кандай болушу керектиги жөнүндө катуу ойлонуунун кереги жок. Блоктун ыңгайлашуучу макети, мазмунду жана шрифттерди динамикалык жүктөө сыяктуу нерселердин пайда болушу менен веб-сайтты иштеп чыгуу алда канча жагымдуу болуп калды. Анткени, бул технологияларазыраак чектөөлөр, бирок алар дагы эле бар. Бирок өзүңөр билгендей, чексиз искусство болбойт. Биз сизге бир чыныгы креативдүү дизайн ыкмасын колдонууну сунуштайбыз - алтын катыш. Анын жардамы менен сиз шаблондоруңузда кандай сайттын өлчөмдөрүн койгонуңузга карабастан, иш мейкиндигин эффективдүү жана кооз толтура аласыз.
Сайттын иштөө мейкиндигин кантип көбөйтүү керек
Бардык UI элементтерин кичинекей калыпка батырууга орун жетишсиз болуп калышы мүмкүн. Мындай учурда сизге чыгармачылык менен же мурункудан да чыгармачылык менен ойлонуп башташыңыз керек болот.
Калкып чыкма менюда навигацияны жашыруу менен сайттан максималдуу орун бошотуңуз. Бул ыкманы мобилдик түзмөктөрдө гана эмес, иш такталарында да колдонуу логикалык. Анткени, колдонуучу сиздин сайтта кандай рубрикалар бар экенин дайыма карап отура бербейт - ал мазмун үчүн келди. Ал эми колдонуучунун каалоосун урматтоо керек.
Менюну жашыруунун жакшы ыкмасына төмөнкү макет (төмөндөгү сүрөт) мисал боло алат.
Кызыл аймактын жогорку бурчунда крестти көрө аласыз, аны чыкылдатуу менен меню кичинекей сөлөкөткө жашырылып, колдонуучуну веб-сайттын мазмуну менен жалгыз калтырат.
Бирок, бул милдеттүү эмес, сиз ар дайым көрүнүп турган навигациядан чыксаңыз болот. Бирок сиз аны сайттагы популярдуу шилтемелердин тизмеси эмес, кооз дизайн элементи кыла аласыз. Тексттик шилтемелерге кошумча же алардын ордуна интуитивдик иконаларды колдонуңуз. ошол элесайтыңызга колдонуучунун түзмөгүндөгү экран мейкиндигин натыйжалуураак пайдаланууга мүмкүндүк берет.
Мыкты вебсайт жооп берет
Эгер сиз сайт үчүн кайсы макетти тандоону билбей жатсаңыз, анда сиз үчүн баары жөнөкөй. Иштеп чыгууга кеткен чыгымдарды үнөмдөө жана ошол эле учурда кээ бир түзмөктөрдүн туура эмес жайгашуусунан улам аудиторияңызды жоготпоо үчүн жооп берүүчү дизайнды колдонуңуз.
Тартуу дизайн – бул ар кандай түзмөктөрдө бирдей жакшы көрүнгөн дизайн. Бул ыкма сиздин сайтыңыздын ноутбукта да, планшетте да, смартфондо да түшүнүктүү жана ыңгайлуу болушуна мүмкүндүк берет. Бул эффект автоматтык түрдө экрандын жумушчу аянтынын туурасын өзгөртүү аркылуу ишке ашат. Сайтыңыз үчүн жооп берүүчү стилдик таблицаларды колдонуу менен сиз эң жакшы чечимди кабыл алып жатасыз.
Сезимдуу дизайн менен вебсайттын версияларынын ортосунда кандай айырма бар
Responsive дизайн сайттын мобилдик версиясынан айырмаланат, анткени акыркы учурда колдонуучу иш тактасынан айырмаланган html кодун алат. Бул сервердин иштөөсүн оптималдаштыруу, ошондой эле издөө системасын оптималдаштыруу жагынан кемчилик. Мындан тышкары, сайттын ар кандай версиялары үчүн статистиканы эсептөө кыйын болуп калат. Адаптивдүү ыкманын мындай кемчиликтери жок.
Түрдүү түзүлүштөр үчүн жооп берүү туурасынын белгиленген пайызы менен макет аркылуу же блокторду жеткиликтүү мейкиндикке өткөрүү аркылуу жетишилет (смартфондогу вертикалдык тегиздиктегоризонталдуу) же ар кандай экрандар үчүн жеке макеттерди түзүңүз.
Биздин окуу куралдарыбыздан жооп берүүчү дизайн жана иштеп чыгуу жөнүндө көбүрөөк билип алыңыз.
