Alamin kung paano gamitin ang simpleng Wireframes upang simulan ang iyong mga disenyo
Isang wireframe sa Web ay isang simpleng visual guide upang ipakita sa iyo kung anong hitsura ng isang Web page . Nagpapahiwatig ito ng istraktura ng isang pahina , nang hindi gumagamit ng anumang mga graphics o teksto. Ang isang wireframe ng website ay magpapakita ng buong istraktura ng site - kabilang ang kung ano ang mga pahina na link sa kung saan.
Ang Web wireframes ay isang mahusay na paraan upang simulan ang iyong disenyo ng trabaho. At habang posible na lumikha ng kumplikadong mga wireframe na may malaking halaga ng detalye, ang iyong pagpaplano ay maaaring magsimula sa isang panyo at isang panulat. Ang susi sa paggawa ng magandang wireframes ay upang iwanan ang lahat ng mga visual na elemento. Gumamit ng mga kahon at linya upang katawanin ang mga larawan at teksto.
Mga bagay na dapat isama sa wireframe ng Web page:
- mga kahon para sa pangunahing mga elemento ng graphical
- paglalagay ng mga headline at sub-head
- isang simpleng istraktura ng layout
- tawag sa pagkilos
- mga bloke ng teksto
Paano Gumawa ng Simple Web Wireframe
Gumawa ng Web page wireframe gamit ang anumang scrap ng papel na mayroon kang madaling gamiting. Narito kung paano ko ginagawa ito:
- Gumuhit ng isang malaking rektanggulo - maaaring ito ay kumakatawan sa alinman sa buong pahina o lamang sa nakikitang bahagi. Karaniwan kong sinimulan ang nakikitang bahagi, at pagkatapos ay palawakin ito upang isama ang mga elemento na mas mababa sa fold.
- Sketch ang layout - ito ba 2-haligi, 3-haligi?
- Idagdag sa isang kahon para sa isang graphic header - Gumuhit sa iyong mga haligi kung nais mo itong maging isang solong header sa itaas ng mga haligi, o idagdag lamang ito kung saan mo nais ito.
- Isulat ang "Headline" kung saan mo nais ang iyong H1 headline.
- Isulat ang "Sub-Head" kung saan mo gusto ang H2 at mas mababang mga headline. Nakatutulong ito kung gagawin mo ang mga ito proporsyonal - h2 mas maliit kaysa sa h1, h3 mas maliit kaysa sa h2, atbp.
- Magdagdag ng mga kahon para sa iba pang mga larawan
- Idagdag sa nabigasyon. Kung nagpaplano ka ng mga tab, gumuhit lamang ng mga kahon, at isulat ang "nabigasyon" sa ibabaw. O ilagay ang mga bulleted na listahan sa mga haligi kung saan mo nais ang pag-navigate. Huwag isulat ang nilalaman. Isulat lang ang "nabigasyon" o gumamit ng isang linya upang kumatawan sa teksto.
- Magdagdag ng mga karagdagang elemento sa pahina - tukuyin kung ano ang mga ito sa teksto, ngunit huwag gamitin ang aktwal na teksto ng nilalaman. Halimbawa, kung nais mo ang pindutan ng pagkilos sa kanang ibaba, ilagay ang isang kahon doon, at lagyan ng label itong "tumawag sa pagkilos". Huwag sumulat ng "Buy Now!" sa kahon na iyon.
Kapag nakuha mo na ang iyong simpleng wireframe nakasulat, at hindi ito dapat magdadala sa iyo ng higit sa 15 minuto upang gumuhit ng plano isa up, ipakita ito sa ibang tao. Tanungin sila kung may nawawalang bagay at para sa iba pang puna. Batay sa kung ano ang sinasabi nila maaari kang magsulat ng isa pang wireframe o panatilihin ang isa na mayroon ka.
Bakit ang Wireframes ng Papel ay Pinakamahusay para sa Unang Mga Draft
Bagaman posible na lumikha ng mga wireframe gamit ang mga program tulad ng Visio, para sa iyong mga sesyon ng pagbukas ng kurso, dapat kang manatili sa papel. Ang papel ay hindi tila bilang permanenteng, at maraming mga tao ay ipinapalagay na itinapon mo ito nang magkasama sa loob ng 5 minuto at sa gayon ay hindi mag-atubiling magbigay sa iyo ng magandang feedback. Ngunit kapag gumamit ka ng isang programa upang lumikha ng magarbong wireframes na may perpektong mga parisukat at mga kulay, pinatatakbo mo ang panganib ng pagkuha ng nahuli up sa programa mismo at paggastos oras pagperpekto ng isang bagay na hindi kailanman ay pagpunta sa mabuhay.
Madaling gamitin ang papel wireframes. At kung hindi mo gusto ito, ikaw lamang ang malagay sa papel, itapon ito sa recycling at kunin ang isang bagong sheet.