Энэхүү нийтлэлээрээ UX design Foundation Course- оос олж авсан онолын мэдлэг болон Figma дээр хийсэн зарим хэрэгтэй, ажил болон цагыг хөнгөвчилж өгдөг үйлдлүүдийг хураангуйлан орууллаа.
Хэсэг 1
Онолын UX design:
1.1 Дизайн гэж юу вэ?
Дизайн бол зөвхөн яаж харагдаж байгаа, ямар мэдрэмж төрүүлж байгаа тухай асуудал биш юм. Дизайн бол тухайн зүйл хэрхэн ажиллаж байгаа тухай ойлголт юм. Дизайн гаргах нь оновчтой шийдэл боловсруулахаас гадна асуудлаа оновчтой тодорхойлох тухай юм. Тиймээс ч сайн дизайн хүнтэй сайн харилцаж чаддаг.
1.2 User experience гэж юу вэ?
Хэрэглэгчийг олж мэдрэх бүх туршлага гэж хэлж болно.
-
сонгох, хэрэглэх
-
апп бол татаж суулгах,
-
худалдаж авах,
-
ашиглаж сурах,
-
засах, засварлуулах,
-
шинэчлэх, сайжруулах,
Сайн UX design-ы жишээ:
-
хэрэг болж чаддаг,
-
сайхан мэдрэмж төрүүлдэг,
-
хэрэгтэй үед, хэрэгтэй газар
-
сэтгэл ханамж өгдөг гэх мэт байдаг. Харин
Муу UX design-ы жишээ:
-
стрессдүүлдэг,
-
ойлгомжгүй,
-
хүслээ тулгасан, хэрэглэгчийг бодоогүй,
-
хэт их хүчин чармайлт шаарддаг,
-
нэг үйлдлээ олон давтуулдаг,
-
царай муутай гэх мэт байдаг.
Бүтээгдэхүүний хандлага бол тасралтгүй сайжруулалт, мэдээлэлд суурилсан шийдвэр гаргалтууд болон хэрэглэгчийн таашаалд нийцүүлж тэрэнд үнэ цэнэ тасралтгүй өгсөөр байх тухай цогцоор нь авч үзэх тухай ойлголт юм.
-
Туршалтын загвар бэлтгэж, турших энэ үйлдлийг дахин давтах,
-
user-centered дизайны аргачлалуудыг хэрэгжүүлэх,
-
хүний зан төлвийг судалж ойлгох,
-
өөрийн зөн билгийг ашиглах,
UX design-ы үндсэн үүрэг:
-
Define,
-
design,
-
prototype,
-
test.
1.4 UX загварчлах процесс:
-
асуудлыг оновчтой тодорхойлох,
-
боломжит шийдлүүдийг дэвшүүлэх,
-
шийдлийг биежүүлэх,
-
үнэлж сайжруулах,
Энэхүү процессыг ангилж харвал асуудлыг оновчтой тодорхойлох болон үнэлж сайжруулах 2 нь илүү UX research талдаа, харин боломжит шийдлүүд дэвшүүлэх болон тухайн шийдлүүдээ биежүүлэх нь UX design хэсэг нь гэсэн үг юм.
UX design бүтээх 3н дэлгэрсэн аргачлал байдаг. Доор харагдаж байгаагаар Agile UX. Lean UX. Design sprint гэж ангилдаг. Agile бол илүү санаа болон хөгжүүлэлт 2 дээр төвлөрч бүтээдэг аргачлал бол design sprint нь санаа болон суралцах буюу богино хугацаанд гялс туршиж үзээд суралцаад гэх мэт циклээр явдаг аргачлал байдаг. Харин Lean UX нь бусад 2оосоо ялгаатай нь санаа, хөгжүүлэх, нэвтрүүлэх, суралцах гэсэн 4н алхам 4үүлэнг нь хийж үздэг аргачлал ба Agile арга дээр суурилсан байдаг.
1.5 Яаж загварчлах вэ?
Дизайнаа загварчлахдаа энэхүү дизайн маань хэрэглэгчдэд үнэ цэнэ өгч байна уу, ашиглахад хялбар байна уу, хүртээмжтэй байдал нь хир байна вэ, сонирхол татхаар байна уу гэх мэтчилэн асуух хэрэгтэй.
1.6 Хар зураглал/Sketching
Хар зураглал нь дизайны хамгийн үндсэн нэгж бөгөөд хямд төсөр, хурдан аргаар санаагаа биежүүлэх боломжийг олгодог. Bill Buxton хэлэхдээ хар зураг гаргах нь дизайны дайвар бүтээгдэхүүн биш. Гэхдээ хар зураглал гаргах тэр процесс нь хар зурагтай болохоос ч илүү зүйл гэсэн байдаг. Хар зураглал гаргахдаа эхлээд асуудлыг буюу хэн нэгэн нүүр тулж байгаа асуудлыг зураглах, дараагаар нь шийдлийг буюу тэр асуудал хэрхэн шийдэгдэж байгааг дээрээс нь тэрхүү шийдэл хэрхэн ажиллах байгааг дүрслэх хэрэгтэй. Хэрэв хар зураглал хийж байх үед тархи гацах юм бол гацаж болохгүй. Литерал сэтгэлгээний зарим техникүүд болох brainstorming, matrix зэргийг хийж турших хэрэгтэй. Тархи гацсан байлаа ч хамгийн муу, бүтэлгүй шийдлийг зураглах л хэрэгтэй. Хамгийн гол нь энэ хар зураглал нь бидэнд аливааг олон өнцгөөс бодох боломжийг түргэн хугацаанд хямдаар олгож байгаа юм.
1.7 Туршилтын загвар:
Туршалтын загвар гэдэг нь сүүлийн шийдлийг гаргаж авахаас өмнөх бүхий л бодитжуулсан дизайны дүрслэлүүд юм. Бүтээгдэхүүнээ бодитжуулах, бүрэн бүтэн ойлгохын тулд туршилтын загварыг хийдэг. Дотроо low,middle,high fidelity гэж ангилдаг ба хар зураглал болон туршилтын загварын гол ялгаа нь, хар зураглал эхлэх цэгээс хувилбаруудыг туурвиж санаануудаар нүдэж байхад туршилтын загвар төгсөх цэг дээр санаануудыг шүүн авч явах санаануудыг сонгодог.
1.8 Тестлэх:
Яг жинхэнэ хэрэглэгчээрээ тестлүүлж тэдний туршлага, үнэлгээ болон санал хүсэлт дээр сайжруулалтаа хийж явах нь UX designer хүний хамгийн чухал эзэмших чадваруудын нэг байдаг ба эцсийн хэрэглэгчээр туршуулах нь бүтээгдэхүүн бэлэн болохоос өмнө туршилтын загвар дээрээ санал хүсэлтийг нь авч тусгах хэрэгтэй байдаг.
Хэсэг 2
Figma дээрх хийгддэг цагыг хэмнэсэн үйлдлүүд:
2.1 Plugins
-
Figma.com/community - ээс plugin цэсээс нь UI faces, Image tracer, Unsplash, Rename it, isometric plugin, remote BG plugin, figma chat зэргийг install хийнэ.
-
Зүүн дээд хэсгээс plug in ийг сонгоод manage plug ins хэсэг рүү орохоор татсан суулгасан plugins үүд харагдана. Plugins ээс UI faces ээ сонгохоор зургын эх сурвалж, нас, хүйс, сэтгэл зүйн байдал, үсний өнгө мэтчилэн сонголтуудыг санал болгодог. Then click apply avatars, сонгосон дүрс layer үүд дээр сонголтын дагуух зургуудыг шууд буулгаад ирнээ гэсэн үг.
-
Plugins ээс image tracer ээ сонгохоор дурын зураг маань идэвхжиж вектор зураг болж өөрчлөгдөнө. Олдохгүй байгаа зураг болон icon ийг энэ plugins аар ашиглан хувиргаж өөрийн хүссэнээр өөрчилж болох юм.
-
Unsplash plugin цэсээс хүссэн зургаа төрлөөр болон өөрөө search хэсгээс хайж олоод хүссэн layer дээрээ гаргах боломжтой.
-
Rename it plugin нь үүсгэсэн олон frame үүдээ нийтээр нь нэрлэх боломжийг олгодог ба түлхүүр үгээр сонголт хийж болдог.
-
Wireframe plugin дээр web, mobile, tablet, kits гэх мэт сонголтуудыг санал болгох ба яг хүссэн хэсгийнхээ wireframe ийг сонгож аваад ажилаа хөнгөвчлөөд цагаа хэмнэх боломжтой.
-
Зураг хялбар оруулахдаа зургаа сонгоод copy доод дүрсэн дээрээ paste хийхээр зураг нь дүрснийхээ хэмжээний дагуу өөрөө тохироод ороод ирдэг.
-
Сүүлийн үйлдлийг давтахдаа alt+caps lock оо зэрэг дараад чирэхээр дахин хуулбарлагдаж цаашдаа duplicate хийгээд явахад үйлдэлтэйгээ хамт хуулбарлагдаад явна.
-
Isometric plugin нь постерийг маш хурдан хугацаанд хийхэд тусалдаг бөгөөд, plugin цэсээр ороод тухайн сонгосон зураг, frame ийнхээ өнцөгийг өөрчилж болдог.
-
Remote BG plugin нь аливаа зурагны арын background ийг арилгадаг.
-
Figma chat plugin нь дизайн хийж байх явцдаа хоорондоо харилцдаг.
2.2 Figjam
Уулзалтуудад зориулсан. Дизайнтай холбоотой уулзалтуудаа багийнхантайгаа хамт хийгээд, brainstorming болон prototype хийгээд явах боломжтой. Process flow буюу үе шат зурагалыг бас хийж болдог. Ажиллах зарчмын хувьд Miro той төстэй бөгөөд stickers болон shapes - ийг ашиглах note үлдээх гэх мэт олон олон боломжуудтай. Цаг өгч хянах боломжтой. Тиймээс design sprint үүдийг Figjam дээрээ хийгээд явбал илүү дүртэй.
2.3 Export
Figma дээр байгаа аливаа зураглалыг татахдаа design цэсийн export дээр дараад png, jpg, svg, pdf гэх мэт сонголтуудаас сонгож татах боломжтой.
2.4 Component үүсгэх
Component болгох хэсгүүдээ сонгож байгаад figma-ийн голын дээд хэсэгт байрлах component icon ийг дарж үүсгэнэ. Component үүсгэсэнээр эх component - оо яаж ч өөрчилсөн бусад нь бас дагаж өөрчлөгдөх юм. Ингэснээр олон давтагдаж буй үйлдлийг үйлдэл болгон дээр хийхгүйгээр үндсэн нэг дээр хийгээд түүнийгээ component болгосны дараа аливаа өөрчлөлт орох үед хамтдаа шинэчлэгдээд явна гэсэн үг юм.
2.5 Clip content
Frame - ээсээ давсан layer үүдийг clip content оор дотор нь оруулж цэвэрхэн харагдуулна.
2.6 Icon оруулах
Icon ийг эхлээд татаж эхлэхдээ л анхаарах зүйл бол png, svg аль нэг хэлбэрээр нь татах юм. Svg нь вектор хэлбэрээр татаж байна гэсэн үг ба дараа нь хүссэнээрээ өнгө загварыг нь өөрчлөх гэх мэт үйлдлүүдийг хийж болдог. Icon -ийг татахдаа дүүргэлттэй болон дүүргэлтгүй гэсэн 2 байдлаар татвал дараа нь идэвхижсэн идэвхижээгүй хэсэг дээр нь тавихад амар байдаг.
2.7 Figma.com/community
Component уудын нэгдсэн сан. Эндээс template, plugins, icons гэх мэтчилэн хэрэгтэй зүйлсээ duplicate болон install хийж өөрийн хийж буй зүйл дээрээ нэмж ашиглан хийж болно.
2.8 Constraints
Frame ийн хэмжээг өөрчлөн томсгож, жижигсгэх үед доторх component үүдийг бас тухайн хэмжээнийх нь дагуу өөрчилөхийг хүсвэл баруун цэсний constraints хэсгийн left and right хэсгийг дарж өгнө.
