Нөлдік блок: Жауап беру дизайны
Гидтің екінші бөлімі жауапты веб-дизайнмен байланысты неғұрлым күрделі параметрлерге баса назар аударады. Бірінші бөлімде Zero Block редакторының негізгі, негізгі, параметрлер және функциялары қамтылды.
Негізгі мүмкіндіктерге шолу мақаласы
Жұмысты жылдамдату үшін барлық комбинациялардың тізімі
Негізгі анимация анықтамасы: мұздату, параллакс және анимацияны көрсету
Күрделі қадамдық анимация туралы мақала: негізгі принциптер, параметрлер және мысалдар
Күрделі триггер анимациясының анықтамасы: орнату және мысалдар
Орналасуды Figma-дан Нөлдік блокқа автоматты түрде импорттау әдісі
Біз дизайнның негізгі құрылымын анықтаймыз және макетпен жұмысты тездетеміз
«Контейнер» ұғымы
Нөлдік блокта екі жұмыс кеңістігі немесе екі «контейнер» бар. Тор аймағы туралы - Тор контейнері және Терезе Контейнері - браузер экранының шекараларының символы .
Тор контейнері және оның X орны
Тор контейнері негізгі жұмыс аймағы болып табылады. Тор контейнері Tilda сияқты торды, 12 бағанды (1200 пиксель) пайдаланады. Егер элементтерді тор контейнерінің ішіне орналастырсақ, онда экран өлшеміне қарамастан, олар 12 бағанды тордың ішінде болады.
x осінде Тор контейнері әрқашан орталықта орналасады.
x осінде Тор контейнері әрқашан орталықта орналасады.
Әртүрлі құрылғыларға арналған нұсқалармен бірдей жағдай орын алады: экрандар арасында ауысқан кезде Тор контейнерінің ені 980, 640, 480, 320 пиксельге айналады, ол өзгеріссіз қалады және әрқашан орталықта болады.
Тор контейнерінің биіктігін жұмыс тақтасының параметрлерінде немесе тінтуірдің көмегімен контейнерді жоғары/төмен сүйреу арқылы орнатуға болады. Оны әрбір рұқсат үшін орнатуға болады. Тор контейнерінің биіктігі блоктың биіктігі болып табылады.
Тор контейнерінің биіктігін жұмыс тақтасының параметрлерінде немесе тінтуірдің көмегімен контейнерді жоғары/төмен сүйреу арқылы орнатуға болады. Оны әрбір рұқсат үшін орнатуға болады. Тор контейнерінің биіктігі блоктың биіктігі болып табылады.
Ы осі бойынша контейнерлердің бір-біріне қатысты орналасуы
Блок әрқашан экран биіктігінің 100% алып тұруын қаласаңыз, терезе контейнерінің биіктігін тор контейнерінің биіктігінен басқаша етіп орнатуыңыз керек. Сәйкесінше, жұмыс тақтасының параметрлерінде Терезе контейнері үшін 100% биіктікті көрсету керек.
Содан кейін тор контейнерінің экранға қатысты туралануын анықтаңыз : жоғарғы, орталық немесе төменгі. Әдепкі параметр орталыққа туралау болып табылады.
Элемент үшін контейнер мен бастапқы деректемені өзгерту
Контейнерді ауыстыру
Әдепкі бойынша, барлық элементтер Тор контейнеріне байланыстырылады және бастапқы нүкте жоғарғы сол жақ бұрышта болады.
Бірақ кейде элементті торға емес, экранға байланыстыру керек. Мысалы, логотиптің әрқашан кез келген экранның жоғарғы сол жақ бұрышында болуын қалайсыз.
Ол үшін элемент параметрлерін ашыңыз және контейнер түрін Терезе Контейнеріне өзгертіңіз. Бастапқы нүкте Терезе контейнерінің жоғарғы сол жақ бұрышына жылжиды.
Ол үшін элемент параметрлерін ашыңыз және контейнер түрін Терезе Контейнеріне өзгертіңіз. Бастапқы нүкте Терезе контейнерінің жоғарғы сол жақ бұрышына жылжиды.
Енді кез келген экранда логотип сол жақ жоғарғы бұрышта болады.
Егер біз элементті байланыстырғымыз келсе, мысалы, жоғарғы оң жақ бұрышқа , онда логика бірдей болады: біз контейнерді орнатамыз: Терезе Контейнер және бастапқы: X осі дұрыс, Y осі жоғарғы.
Элемент координаталары
Жұмыс кеңістігіндегі әрбір элементте координаталар бар - X осі бойындағы және Y осі бойындағы координаталар басына қатысты орын.
Объектіні таңдаңыз, параметрлер тақтасын ашыңыз (қойынды пернесі) және ең жоғарғы жағында нысанның координаттарын көресіз.
Объектіні таңдаңыз, параметрлер тақтасын ашыңыз (қойынды пернесі) және ең жоғарғы жағында нысанның координаттарын көресіз.
Барлық элементтердің әдепкі бастапқы нүктесі Тор контейнерінің сол жақ жоғарғы бұрышында. Бірақ ол қозғала алады және тіктөртбұрыштың тоғыз нүктесінің бірінде орналасуы мүмкін: жоғарғы оң жақта, төменгі сол жақта және т.б.
Бастапқы нүктенің орнын өзгерту үшін +Container мәзірін ашыңыз (ол әдепкі бойынша жиырылады).
Бастапқы нүктені Орталық орталыққа орнатсаңыз, ол әртүрлі экрандар үшін жауап беретін нұсқада жұмыс істеуді жеңілдетеді.
«Резеңке» элементтерін жасау
Біз элементтердің өлшемін пайызбен де орнатуға болатынын қамтамасыз еттік. Осылайша, браузер терезесіне байланысты өлшемін өзгертетін «резеңке» элементтер алынады.
Мысалы, экранның жартысы әрқашан сары болуын қалаймыз. Кескінді қосып, элемент параметрлерінде контейнерді орнатамыз - Терезе контейнері , ал ені мен биіктігі үшін пиксельдердің орнына өлшем бірліктерін пайыздық мөлшерлемеге ауыстырамыз және экран енінің 50% және биіктігінің 100% орнатамыз. Сондай-ақ, осьтердің мәндерін пайызбен орнатуға болады - егер элемент әрқашан экранның оң жақ жартысын алуын қаласаңыз, X осінің мәнін 50% етіп орнатыңыз.
Мысалы, экранның жартысы әрқашан сары болуын қалаймыз. Кескінді қосып, элемент параметрлерінде контейнерді орнатамыз - Терезе контейнері , ал ені мен биіктігі үшін пиксельдердің орнына өлшем бірліктерін пайыздық мөлшерлемеге ауыстырамыз және экран енінің 50% және биіктігінің 100% орнатамыз. Сондай-ақ, осьтердің мәндерін пайызбен орнатуға болады - егер элемент әрқашан экранның оң жақ жартысын алуын қаласаңыз, X осінің мәнін 50% етіп орнатыңыз.
Бейне блоктың оң жағы әрқашан экранның жартысын толтыратынын көрсетеді.
Сары тіктөртбұрыштың параметрлері: Контейнер – Терезе, ені – 50%, биіктігі – 100%, Х осі бойынша ығысу – 50%.
Мысал: Толық экран мұқабасын жасау
Келесі параметрлері бар мұқабаны жасаудың мысалын қарастырайық:
- фондық кескін экранның бүкіл аумағын алады
- тақырып, субтитр және түйме әрқашан экранның ортасында болады
- төмен көрсеткі әрқашан экранның төменгі жағында болады
- фондық кескін экранның бүкіл аумағын алады
- тақырып, субтитр және түйме әрқашан экранның ортасында болады
- төмен көрсеткі әрқашан экранның төменгі жағында болады
1
Artboard параметрлерінде фондық суретті қосып, оның параметрін орнатыңыз: Терезе контейнерінің биіктігі - 100%.
2
Тақырып, субтитр және түйме үшін координаттардың бастапқы орнын анықтаңыз - Орталық / Орталық және қажет болса, Y осі бойымен ығысуды орнатыңыз.
3
Көрсеткі үшін Терезе контейнерін тағайындаңыз, шығу тегі: Ортаға / Төменге және оны 70 пиксельге жоғары жылжытыңыз. Бұл түйме әрқашан браузер терезесінің төменгі жиегінен 70 пиксель жоғары болады дегенді білдіреді.
Не болғанын көрейік: фондық кескін экранның бүкіл аумағын толтырады, тақырып, мәтін және түйме ортасында орналасқан, ал көрсеткі төменгі жағында.
Тікелей мысалды қараңыз http://help.tilda.ws/zero-block-example
Элементтерді экран еніне сәйкестендіру үшін масштабтаңыз
Әдепкі бойынша, барлық элементтер жұмыс үстеліндегі ені 1200 пиксель болатын, әрқашан экранның ортасында орналасқан және монитор өлшеміне қарамастан бірдей өлшемді болатын Grid контейнеріне байланыстырылады.
Автоматты масштабтау функциясын пайдаланып, Тор контейнеріне жататын барлық элементтерді экранның немесе шолғыштың еніне пропорционалды масштабтауға болады. Тор контейнері бекітілген 1200 пиксель енін алмайды, бірақ экранның толық еніне дейін созылады. Барлық қосылған элементтер бүкіл экранды толтыру үшін пропорционалды түрде үлкейтіледі.
Автоматты масштабтауды қосу үшін жұмыс тақтасының параметрлерін ашып, Тор контейнерін масштабтау опциясын табыңыз. Терезе еніне автоматты масштабтау опциясын таңдап, өзгертулерді сақтаңыз.
Автоматты масштабтау функциясын пайдаланып, Тор контейнеріне жататын барлық элементтерді экранның немесе шолғыштың еніне пропорционалды масштабтауға болады. Тор контейнері бекітілген 1200 пиксель енін алмайды, бірақ экранның толық еніне дейін созылады. Барлық қосылған элементтер бүкіл экранды толтыру үшін пропорционалды түрде үлкейтіледі.
Автоматты масштабтауды қосу үшін жұмыс тақтасының параметрлерін ашып, Тор контейнерін масштабтау опциясын табыңыз. Терезе еніне автоматты масштабтау опциясын таңдап, өзгертулерді сақтаңыз.
Бұл параметр сайт дизайнына кез келген ажыратымдылыққа, соның ішінде HD экрандарына бейімделуге мүмкіндік береді. Параметр жоғары ажыратымдылықтағы экрандарда қажетсіз бос орынды болдырмауға көмектеседі, сонымен қатар дизайнердің жұмысын тездетеді - резеңке орналасуға уақытты ысырап етудің қажеті жоқ.
Қажет болса, параметрді тек белгілі бір экран енінің ауқымында орнату арқылы барлық экран түрлері үшін немесе, мысалы, тек мобильді құрылғылар үшін автоматты масштабтауды орнатуға болады. Жұмыс үстелі нұсқасының контейнері 1200 пиксельден 1920, 4K немесе тіпті 6K дейін өседі. Мобильді нұсқада өлшем 320 пиксельден артады.
Блоктың биіктігі динамикалық болады: блокты масштабтау кезінде ол еніне пропорционалды түрде өзгереді.
Қажет болса, параметрді тек белгілі бір экран енінің ауқымында орнату арқылы барлық экран түрлері үшін немесе, мысалы, тек мобильді құрылғылар үшін автоматты масштабтауды орнатуға болады. Жұмыс үстелі нұсқасының контейнері 1200 пиксельден 1920, 4K немесе тіпті 6K дейін өседі. Мобильді нұсқада өлшем 320 пиксельден артады.
Блоктың биіктігі динамикалық болады: блокты масштабтау кезінде ол еніне пропорционалды түрде өзгереді.
Маңызды:Бұл параметр тек Тор контейнеріне байланыстырылған элементтер үшін жұмыс істейді және Терезеге байланыстырылған элементтерге әсер етпейді.
Масштабтаумен жұмыс істеу ерекшеліктері
Түймені браузер терезесінің шекарасынан дұрыс қашықтықта ұстау үшін, бірақ әртүрлі ажыратымдылықта масштабтамаңыз, Терезе контейнерінде оның координаттарын орнатыңыз. Бір блоктағы кейбір элементтерді масштабтау үшін әртүрлі контейнерлерге қыстыруды пайдаланыңыз және кейбіреулерін браузердің шеттерінен белгілі бір қашықтықта қалдырыңыз, бірақ өлшемін өзгертпей.
Суреттерді жүктеп салу кезінде абай болыңыз: үлкен экрандарға масштабтау кезінде сапаны жоғалтпау үшін олар дұрыс өлшемде болуы керек.
Белгішелер үшін svg пішіміндегі векторлық кескіндерді пайдаланыңыз және фондық суреттер мен фотосуреттерді жомарт жүктеп салыңыз. Tilda-да үлкен суретті жүктеп салу кезінде ол әдепкі бойынша 1680 пиксельге дейін кішірейеді, бірақ жүктеп салу кезінде беріліс белгішесін бассаңыз, үлкенірек жағына 1920 пиксель өлшемі бар суретті жүктеп салуға болады. «1920 пиксельге дейін жүктеп салуға рұқсат беру» ауыстырып қосқышын ауыстырып, содан кейін файлдарды жүктеп салыңыз. 1920 пиксельден үлкен кескіндерді жүктеу мүмкін емес, себебі бұл өлшем браузер өнімділігіне және сайтты жүктеу жылдамдығына әсер етеді.
Суреттерді жүктеп салу кезінде абай болыңыз: үлкен экрандарға масштабтау кезінде сапаны жоғалтпау үшін олар дұрыс өлшемде болуы керек.
Белгішелер үшін svg пішіміндегі векторлық кескіндерді пайдаланыңыз және фондық суреттер мен фотосуреттерді жомарт жүктеп салыңыз. Tilda-да үлкен суретті жүктеп салу кезінде ол әдепкі бойынша 1680 пиксельге дейін кішірейеді, бірақ жүктеп салу кезінде беріліс белгішесін бассаңыз, үлкенірек жағына 1920 пиксель өлшемі бар суретті жүктеп салуға болады. «1920 пиксельге дейін жүктеп салуға рұқсат беру» ауыстырып қосқышын ауыстырып, содан кейін файлдарды жүктеп салыңыз. 1920 пиксельден үлкен кескіндерді жүктеу мүмкін емес, себебі бұл өлшем браузер өнімділігіне және сайтты жүктеу жылдамдығына әсер етеді.
