⌘ K
Filipino
Proseso ng disenyo

Paano humanap ng inspirasyon sa UI ng mobile app at gawin itong gabay sa disenyo

Praktikal na proseso sa pangangalap ng mga sanggunian sa UI ng mobile app, pag-aaral ng buong pagkakasunod-sunod ng mga screen, at pagbuo ng orihinal at masusubok na gabay sa disenyo mula sa mga biswal na obserbasyon.

Pangkat editoryal ng ScreenKits6 min basahin
Isang gallery ng mga konseptong mobile interface na may mga image card, mapa at dashboard.
Konseptwal na likhang sining ng editoryal; hindi isang nakunan na interface ng app.

Ang isang folder na puno ng mga kaakit-akit na screen ng app ay madaling kolektahin at mahirap gamitin. Nang walang tanong upang gabayan ang paghahanap, ang mga visual na sanggunian ay maaaring humila ng isang disenyo patungo sa imitasyon habang iniiwan ang aktwal na gawain ng user na hindi nalutas.

Gumamit ng mga screenshot bilang mga prompt para sa pagsisiyasat. Ang isang kapaki-pakinabang na daloy ng trabaho ay nagsisimula sa isang gawain, naghahambing ng mga kumpletong daloy, nagtatala ng mga desisyon sa likod ng mga visual, at ginagawa ang mga obserbasyon na iyon sa isang maikling maaari mong prototype at suriin.

Mga pangunahing punto

  • Tukuyin ang user, gawain, at kawalan ng katiyakan sa disenyo bago mangolekta ng mga sanggunian.
  • Pag-aralan ang pagkakasunod-sunod ng mga screen at mga estado ng interaksyon, hindi lamang ang hiwa-hiwalay na biswal na anyo.
  • Isulat ang mga naililipat na prinsipyo, pagkatapos ay gumawa ng mga orihinal na desisyon para sa iyong produkto at patunayan ang mga ito sa mga tao.
  • Suriin ang accessibility at platform fit habang ang brief ay flexible pa rin.

1. Magsimula sa isang tanong sa disenyo

Bago mag-browse, sumulat ng isang pangungusap tungkol sa tao at sa sandaling magdidisenyo ka. Halimbawa: "Kailangang pumili ng isang recipe para sa isang linggong gabi ang isang unang beses na lutuin sa bahay at maunawaan kung ano ang susunod na gagawin." Pagkatapos ay pangalanan ang kawalan ng katiyakan: ang mahirap bang bahagi sa pag-scan ng mga pagpipilian, pagtitiwala sa isang rekomendasyon, o pagsisimula ng isang multi-step na recipe?

Ang tanong na iyon ay nagbibigay ng mga hangganan sa paghahanap. Magpasya kung aling platform, lugar ng produkto, at gawain ang mahalaga. Kung nag-e-explore ka ng unang paggamit na karanasan, mag-browse ng mga halimbawa sa onboarding; kung ang problema ay pagpili ng plano, tingnan ang mga screen ng paywall; para sa pagpasok ng data, ihambing ang mga pattern ng form. Hinahayaan ka ng ScreenKits na mag-browse ng mga totoong screen ng app ayon sa kategorya. I-save ang mga kapaki-pakinabang na app bilang mga bookmark ng browser upang makabalik ka sa kanilang mga screen sa panahon ng synthesis.

  • Sino ang nilalayong tao, at ano ang sinisikap nilang magawa?
  • Anong pagpipilian sa disenyo ang hindi sigurado: hierarchy, sequence, navigation, content, o feedback?
  • Anong mga hadlang ang mahalaga, gaya ng platform, pagiging naa-access, laki ng device, o mga panuntunan sa negosyo?

2. Mangolekta ng isang maliit, may layunin na hanay ng sanggunian

Magtipon ng ilang mga halimbawa na tumutugon sa parehong gawain o isang malapit na nauugnay. Isama ang higit sa isang diskarte: isang direktang landas, isang gabay na landas, marahil isang bersyon na humahawak ng isang error o isang walang laman na estado. Para sa bawat kandidato, i-save ang app at tandaan ang screen o sandali na gusto mong bisitahing muli. Ang isang compact set ay ginagawang mas madali ang paghahambing kaysa sa isang hindi na-filter na inspiration board.

Tumingin sa mga kategorya kapag ibinahagi ang pinagbabatayan na problema. Maaaring kailanganin ng app sa pag-iiskedyul at grocery app na tulungan ang isang tao na pumili ng petsa at kumpirmahin ang pagbabago. Ang kapaki-pakinabang na koneksyon ay ang istraktura ng desisyon, hindi ang tema sa ibabaw. Iwasang ituring ang isang katulad na audience o industriya bilang patunay na nalulutas ng interface nito ang iyong partikular na problema.

  • Pumili ng mga sanggunian para sa isang dahilan na maaari mong sabihin, tulad ng "ipinapakita kung paano binabago ng napiling opsyon ang buod."
  • Isama ang iba't ibang solusyon upang ang unang pinakintab na halimbawa ay hindi maging default na sagot.
  • Gumamit ng mga bookmark ng browser upang panatilihing available ang mga napiling app para sa paghahambing habang isinusulat mo ang maikling.

3. Basahin ang daloy, hindi lamang ang screenshot

Ang isang nakahiwalay na screen ay nagpapakita ng pag-aayos, kulay, teksto, at mga kontrol sa isang sandali. Hindi nito ibinubunyag kung ano ang humantong doon, kung ano ang mangyayari pagkatapos ng isang tap, o kung ang isang gawain ay nagtagumpay. Hakbang sa bawat may-katuturang screen sa pagkakasunud-sunod. Tandaan ang entry point, desisyon, aksyon, feedback, at susunod na estado. Isama ang mga alternatibo tulad ng mga error sa pagpapatunay, mga dismissal, at pagbabalik upang i-edit ang isang pagpipilian kapag naaapektuhan ng mga estadong iyon ang gawain.

Ihiwalay ang pagmamasid sa interpretasyon. "Ang pangunahing aksyon ay nananatili malapit sa ibaba sa tatlong hakbang" ay isang obserbasyon; Ang "ito ay dapat na mas madaling gamitin" ay isang claim na hindi mo pa naitatag. Ang isang screenshot ay maaaring magbigay ng inspirasyon sa isang hypothesis, ngunit hindi ito patunay ng kakayahang magamit. Inilalarawan ng NN/g ang prototyping at pagsubok ng user bilang mga paraan upang matukoy ang mga potensyal na problema sa kakayahang magamit at matutunan kung paano nakikipag-ugnayan ang mga tao sa isang iminungkahing interface.

ItalaHalimbawa mula sa daloy ng pagpili ng recipe
Layunin ng userPumili ng recipe ng hapunan na akma ngayong gabi.
Naobserbahang patternLumilitaw ang mga filter ng oras at pandiyeta bago ang listahan ng recipe.
Posibleng prinsipyoIpakita ang mahahalagang pamantayan bago mag-browse ng mga resulta.
Bukas na tanongAlam ba ng mga tao kung aling mga filter ang opsyonal?
Desisyon ng produktoMagpakita ng dalawang mahahalagang filter, na may higit pang mga pagpipilian na available on demand.

4. Isalin ang mga obserbasyon sa isang orihinal na brief

Ang synthesis ay kung saan nagiging kapaki-pakinabang ang mga sanggunian. Kunin ang isang alituntunin na maaaring maglakbay, tulad ng "gawing nakikita ang resulta ng isang pagpili bago kumpirmahin." Pagkatapos ay magpasya kung paano dapat gumana ang prinsipyong iyon sa iyong produkto, batay sa gawain, nilalaman, at mga hadlang nito. Huwag kumopya ng may brand na ilustrasyon, eksaktong salita, o natatanging layout dahil lang ito sa isang nakakahimok na halimbawa.

Sa halimbawa ng recipe, maaaring magmungkahi ang mga sanggunian na ipakita agad ang tagal ng pagluluto at i-preview kung ano ang mababago ng napiling filter. Maaaring ilahad ng orihinal na brief ang maikling daloy sa pagpaplano ng hapunan, malinaw na limitasyon sa oras, malinaw na estado ng filter, at hakbang ng pagsusuri bago mag-save. Tinutugunan ng mga desisyong iyon ang layunin ng produkto; hindi nila ginagaya ang screen ng ibang app.

  • Audience at konteksto: sino ang nangangailangan nito, at saan o kailan nila ito gagamitin?
  • Layunin at tagumpay ng user: ano ang dapat nilang tapusin o maunawaan?
  • Daloy: ano ang mga pangunahing hakbang, desisyon, at mahahalagang alternatibong estado?
  • Mga prinsipyo ng disenyo: ano ang dapat gawing malinaw o madali ng interface?
  • Mga hadlang at bukas na tanong: ano ang dapat na totoo, at ano ang nangangailangan ng pananaliksik?
  • Plano ng pagsusuri: anong gawain ang ibibigay mo sa isang tao gamit ang prototype, at ano ang iyong oobserbahan?

5. Prototype, suriin ang pagiging naa-access, at pinuhin

Gawing payak na wireflow ang brief bago pakinisin ang biswal na estilo. Gumawa ng prototype ng pangunahing desisyon at feedback nito, saka hilingin sa kinatawan ng nilalayong audience na tapusin ang makatotohanang gawain. Obserbahan kung saan sila nag-aalangan, pumipili nang hindi inaasahan, o nagkakamali. Baguhin ang daloy at ulitin ang pagsusuri; itinuturing ng gabay sa pananaliksik ng NN/g ang umuulit na disenyo at pagsusuri ng prototype bilang bahagi ng pagkatuto, sa halip na ipagpalagay na maayos na ang unang draft.

Magpatakbo ng pagsusuri sa pagiging naa-access kasama ng gawaing iyon. Binibigyang-diin ng Mga Alituntunin ng Human Interface ng Apple ang nakikita, naaangkop na mga pakikipag-ugnayan at pagsasaalang-alang para sa iba't ibang paraan ng pag-input. Suriin ang pagbabago ng laki ng teksto, kaibahan, kontrolin ang laki at espasyo, malinaw na mga label, at kung ang kahulugan ay nakasalalay lamang sa kulay. Suriin din kung ang daloy ay umaangkop sa mas mahabang teksto at maaaring maunawaan gamit ang mga pantulong na teknolohiya. Ang gabay sa accessibility ng Material Design ay isang kapaki-pakinabang na kasama kapag ang iyong produkto ay sumusunod sa mga Android convention.

  • Magbigay ng isang prompt ng gawain, hindi isang paglilibot sa interface, at obserbahan kung ang mga tao ay maaaring magpatuloy.
  • Subukan ang isang maaga, mababang-detalye na bersyon habang madali pa rin ang mga pagbabago sa istruktura.
  • Suriin ang gabay sa platform na nauugnay sa device at system ng disenyo na sinusuportahan mo.
  • Bumalik sa mga sanggunian para lamang magsiyasat ng tanong; huwag hayaan ang visual na pagkakahawig na tumayo para sa ebidensya.

Checklist mula sanggunian hanggang gabay sa disenyo

Bago ipasa ang brief, tiyaking inilalarawan nito ang isang desisyon sa produkto, hindi lang mood board. Dapat maunawaan ng taong hindi nangalap ng mga sanggunian ang nilalayong gawain, iminungkahing daloy, mga tanong na hindi pa nasasagot, at kung paano aalamin ng team kung gumagana ang disenyo.

  • Ang orihinal na user at gawain ay tahasan.
  • Ang bawat reference ay may tala na nagpapaliwanag kung anong tanong o pattern ang tinutulungan nitong tuklasin.
  • Ang mga obserbasyon ay pinaghihiwalay mula sa mga pagpapalagay at usability claim.
  • Inilalarawan ng maikling ang isang orihinal na daloy at katwiran na partikular sa produkto.
  • Ang pagiging naa-access, pag-uugali ng platform, at mahahalagang alternatibong estado ay kasama.
  • Ang isang prototype na gawain at isang plano sa pagsusuri na nakabatay sa pagmamasid ay tinukoy.

Mga mapagkukunan at karagdagang pagbabasa

Gawing inspirasyon ang iyong susunod na daloy.

Mag-browse ng mga totoong screen, ihambing ang mga pattern, at tingnan kung paano magkasya ang mga piraso.

I-explore ang mga screen ng app