Како користити решетке при креирању прототипова страница

Овај чланак ће бити користан ако направите прототипове сајтова како бисте своје идеје довели до веб дизајнера и програмера. Туториал ће вас научити како прототипирати мрежу.

Одрицање: ако направите прототип без решетке, ништа страшно се неће догодити. Професионални дизајнер или веб девелопер ће додати решетку за вас. Али ако научите како да радите са решеткама, квалитет прототипова ће се драматично повећати, а на страницама сајтова ћете гледати на другачији начин.

Шта је мрежа и зашто је користити

Решетка је систем вертикалних или вертикалних и хоризонталних линија које деле страницу на колоне или ћелије. Креирана помоћу колоне мреже или ћелије формира структуру или костур странице, са којом дизајнери организују садржај.

То јест, помоћу решетки направите оквир на којем носите све елементе странице: лого, мени, клизач, форму, слику и тако даље. Захваљујући скелету, елементи странице се могу складно позиционирати, одабрати релативну и апсолутну димензију, поставити визуални ритам.

Важна ствар: решетке пружају флексибилност дизајна, која је потребна за прилагођавање распореда различитим величинама екрана. То јест, употреба оквира - корак за креирање одговарајуће странице.

На завршеној страници, решетке обично нису видљиве. Али они се могу видети на прототиповима и распоредима.

Шта су решетке

Ако се не бавите дизајном и веб развојем професионално, довољно је да знате о постојању два типа решетки: колоне и модула.

Решетка колоне је систем вертикалних линија које дијеле страницу на ступце и алинеје.

Тамне и широке површине на слици су колоне, лагане и уске су удубљења.

Модуларна мрежа је систем вертикалних и хоризонталних линија које дијеле страницу на модуле.

У овом случају, модули су правоугаоници од 20 к 20 пиксела, означени дебљим линијама.

Ако нисте професионални веб дизајнер и програмер, користите решетку колона да бисте креирали прототипове. Постоје барем два разлога за то. Прво: решетке колона су веома популарне на вебу. Они граде популарне оквире, на пример, Боотстрап, Булма, Скелетон, који веб програмери користе за распоред страница.

Други разлог: за прототип странице довољно је користити мрежу ступаца. Ако је потребно, професионални веб дизајнер ће додати модуларну мрежу када вашу скицу претвори у пуноправни изглед.

Како користити мреже током израде прототипа

Ово је практичан одељак који учи како да се користе мреже приликом креирања прототипа.

Где цртати решетке

Одговор зависи од алата које користите за израду прототипова. Решетке се могу нацртати ручно ако је прототип на листу папира. Ако је скица креирана помоћу специјалних програма и услуга, пређите на подешавања. Алати најпопуларнијег софтвера за израду прототипова имају решетке. Примери испод.

Да бисте омогућили мрежу у Мокупс-у, кликните на икону Воркспаце и означите опцију Схов грид грид. Ако вам је потребна модуларна мрежа, означите опцију Схов папер грид.

Да бисте омогућили решетке у Прото.ио, изаберите мени Подешавања - Мрежа.

Означите опцију Прикажи распоред. Изаберите број колона, њихову ширину и ширину удубљења између колона и дуж ивица странице. Ове поставке ће бити размотрене у наставку.

Ако вам је потребна модуларна мрежа, означите опцију Прикажи мрежу и одредите поставке.

Ако користите Јустинминд Прототипе, у едитору, изаберите картицу Темплатес и користите једну од шаблона: 12 или 16 колона.

Ако користите други софтвер за израду прототипова, пронађите мреже.

Како изградити мрежу

Изградите решетку - изаберите број колона, њихову ширину, као и ширину удубљења између колона и дуж ивица странице.

Питање: колико колона треба да буде у колони? Кратак одговор је 12. Поента није чак ни у томе што је већина ЦСС оквира које веб програмери користе изграђена на решеткама са 12 колона. Ако је потребно, подразумевана подешавања оквира се мењају.

Број 12 је скоро магичан: подељен је на 6, 4, 3 и 2. То значи да се на страници са мрежом од 12 колона у једном реду складно може распоредити шест, четири, три или два елемента. Пошто је број увек дељив сам по себи и по један, можете поставити 12 или један елемент у низу.

Штавише, ако не обратите пажњу на екстремне колоне, решетка од 12 колона омогућава вам да се хармонично сместите у ред од пет или десет елемената.

Мреже са различитим бројем колона не пружају такву флексибилност. На пример, 16 је подељено на 8, 4 и 2. Да би се хармонично поставили три или шест елемената у низу, можете испустити две спољашње колоне.

Али да бисте ставили ред од пет или десет елемената, морате испустити три екстремне колоне. То није баш згодно.

Када бирате број колона у мрежи, одложите садржај који планирате да ставите на страницу. На пример, ако направите страницу са садржајем без бочне траке, довољна је једна колона или широки правоугаони простор у центру странице. А ако направите портфолио страницу или галерију фотографија, биће вам потребна комплексна модуларна мрежа.

Међутим, да би се направио прототип у 99 случајева од 100, погодно је радити са мрежом од 12 колона. Професионални дизајнер или веб девелопер, захваљујући решетки колона, претвориће ваш прототип у неколико распореда за различите величине екрана.

Приликом прављења решетке, потребно је да изаберете ширину алата на ивицама странице, ширину удубљења између колона и ширину самих колона. Углавном, током израде прототипа, није неопходно одредити ове вредности са тачношћу пиксела. Касније, дизајнер и веб девелопер ће се побринути за то. Али за практичност, користите следеће препоруке:

  • У изабраном програму за израду прототипова, радите са страницом шаблона за радну површину. Ширина странице треба да буде најмање 960 пиксела. Оставите приступ мобилних првих професионалаца.
  • Маргине треба да буду најмање двоструко веће од ширине удубљења између колона (олука). Чини се да ова техника усмерава поглед посетиоца унутар странице.
  • Што је простор између колона шири, то је више на "ваздушној" страници или слободном простору.

Пример решетке са којом се може радити може се видети на илустрацији.

Како флексибилно користити решетку колоне приликом планирања изгледа странице

Решетка колона - основа изгледа странице. Ово се може илустровати типичним распоредом из чланка "Како креирати прототип странице" (види фотографију).

У овом случају, заглавље и подножје заузимају свих 12 колона. Главна јединица и бочна трака могу заузимати 9 и 3 или 10 и 2 колоне.

Уз помоћ решетке колона могуће је изградити сложеније распореде, на пример, са расподелом колона 5–5–2, 3–6–3, и тако даље.

То јест, користећи решетку са 12 колона, могуће је конструисати распореде који се састоје од блокова различитих ширина. Може бити неколико блокова у низу.

Када бирате број и ширину блокова, водите се садржајем који планирате да објавите на страници. Прави примери ће вам помоћи да схватите ово.

На страници "Повезано" налази се навигациони мени и категорије картица.

Такав распоред може бити представљен у облику четири блока у три колоне у ширини.

Још један пример са сајта "Свиазнои": директоријум телефона једног произвођача са навигационим менијем и четири картице производа заредом.

Изглед ове странице се може урадити на мрежи са 16 колона. Мени за навигацију има четири колоне, а картице производа - по три колоне.

Практични пример у наставку помоћи ће да боље разумемо принципе рада са решетком колона.

Коришћење решетке: пример странице прототипа

Да бих направио прототип странице, користио сам решетку са 12 колона. Укључена и папирна решетка, да би се олакшало распоређивање елемената у вертикалном правцу.

У заглавље додам лого, дугме за конверзију и мени за навигацију. Обратите пажњу на поравнање решетке: елементи заузимају 4, 4 и 9 колона.

Под заглављем додајте велики клизач. Заузима 10 централних звучника.

Под клизачем додам три картице производа, које се састоје од фотографије, текста и навигацијског гумба. Картице заузимају четири ступца.

Под картицом страница је подељена на два вертикална блока: главни и бочни. Они заузимају 8 и 4 колоне.

У подножју додајте информације о сервису. Прототип странице се може прегледати помоћу дугмета Превиев у горњем десном углу екрана.

У режиму прегледа мрежа се не приказује. То нам омогућава да проценимо прототип без визуелних сметњи и, ако је потребно, вратимо се на уређивање. На пример, у режиму прегледа, клизач је изгледао преуско.

Повећавам ширину клизача на 12 колона или уклањам контролере из слика у најудаљеније колоне мреже. Сећам се да је поред менија за навигацију остављен простор за форму за претрагу.

Прототип је спреман.

Једноставан и моћан алат

Ово је коначна карактеристика решетке. Уз помоћ овог алата, сваки стручњак без техничке обуке добија флексибилан оквир на којем је погодно за израду прототипова странице. Можете користити решетку на листу папира или у популарним програмима за израду прототипова. У будућности, дизајнер и програмер ће моћи да претворе мрежу колона у прототип ниског нивоа у комплетну структуру и прилагодљиву страницу.

Погледајте видео: Matična rešetka i pregradna daska Prilog 71. (Март 2020).

Loading...

Оставите Коментар