01 - 09
UXPin-ээс эхэлж хэрхэн өөрийгөө авах вэ
Хөдөлгөөнт дизайн, програмын дизайн, хариу үйлдэлийн дизайн руу шилжих үед UX (Хэрэглэгчдийн туршлага) болон интерфэйс , интерактив протокол болон утсан холболтууд дээр анхаарал төвлөрч байна. Тэнд олон тонн хэрэгсэл байдаг бөгөөд энэ нь нарийн төвөгтэй, онцлог ачааны шуугианаас сийрэг, бараг ашиг тустай бүрэн бүрэн эмх замбараа ажиллуулж байна. Нүдэндээ татсан багажуудын нэг нь UXPin юм. Энэ нь дизайнеруудын дизайнерууд боловсруулсан юм.
Бид урагшлахын өмнө ... анхааруулга. Хэрэв та програмыг эзэмшихийг илүүд үздэг байгууллага бол UXPin таных биш юм. Энэ апп-д хийгдсэн бүх ажил нь хөтөч дээр хийгдсэн бөгөөд таны хадгалсан төслүүд таны дансанд хадгалагдана.
UXPin-ыг эхлүүлэхийн тулд хөтөчийг эхлүүлж UXPin руу оруулна уу. Эндээс та үнэгүй Шүүхэд бүртгүүлэх эсвэл таны хэрэгцээтэй уялдуулан сар бүр төлөвлөх боломжтой. Бүртгүүлэх процесс нь маш хялбар бөгөөд та өөрийн Хэрэглэгчийн нэр болон Нууц үгийг тохируулсны дараа таныг эхлэхэд бэлэн боллоо.
09 сарын 02
UXPin дахь төслийг хэрхэн эхлүүлэх вэ
Та нэвтэрч ороход та Хяналтын самбар дээр ирэх бөгөөд эндээс шинэ wireframe, шинэ гар утасны төсөл эсвэл Responsive Web Design төслийг бий болгох шийдвэр гаргаж болно. UXPin-ийн хувьд танд Photoshop эсвэл Sketch projects-д оруулах боломжтой болно. Үүнийг би яаж зарим текст ашиглан баннер үүсгэх гэж байгаа бөгөөд сурталчилгаа руу имэйл товчийг нэмнэ үү. Үүнийг хийхийн тулд би Create new wireframe-г сонгов.
03 - 09
UXPin интерфэйсийг хэрхэн ашиглах талаар
Дизайн гадар нь дөрвөн хэсэгт хуваагдсан. Зүүн талд байгаа хар бүсэд танд хяналтын самбар руу буцах боломжийг олгодог хэд хэдэн арга хэрэгслийг ашигладаг, элементүүдийг нээж, Smart Elements самбарыг нээ, элементүүдийг хайж, хуудасны тэмдэглэл нэмж, багийн гишүүдийг нэмнэ. Доод талд нь богино хэмжээний зааварчилгаа нээгддэг, өөрөөр хэлбэл та өөрийн данс руугаа хандах, FAQ-руу хандах өөр нэг асуултанд хариулах, асууж асуулт асууж, санал хүсэлтийг нь өгдөг.
Дээд тал нь цэнхэр өнгийн талбайд хэд хэдэн багаж хэрэгсэл, шинж чанарууд байдаг. Баруун талд байгаа бараан товчлуурууд нь дизайныг давтах, төслийн тохиргоог тохируулах, хуудсыг хуваалцах, хуудсын браузерын загварчлал хийх боломжтой.
Элементүүдийн самбар нь дизайны гадаргуугийн хувьд хэсэг хэсгүүдийг шүүрэн авч, таны төслийг нэрлээд хуудсыг нэмж эсвэл устга.
Элементүүд нь UX-ийн дизайнеруудын хувьд гайхалтай санагддаг. Энэ поп доош нь iOS-оос эхлээд anon 30 сангаас сонгох боломжийг олгодог. Android Lolipop Мөн Bootstrap болон Foundation элементүүд Font Awesome icons, Mobile Gesture icons болон Social Widgets-ийн цуглуулгатай танилцах боломжтой.
04-р сарын 09
UXPin хуудсанд элемент нэмэх
Эхлүүлэхийн тулд Шигтгээ элементийг дизайн гадаргуу дээр чирч, хулганыг суллахдаа Properties самбар нээгдэнэ. Properties товч нь таныг элемент гэж нэрлээд элементийн өргөний өндөр болон байршлын утгыг тохируулна. Та мөн элемент рүү дэвсэхийг нэмэх, булангуудыг тойрч, түүний харанхуй байдлыг тохируулах боломжтой. Background Color товчийг дарж RGBA өнгө сонгогчийг нээнэ.
Та мөн сонгосон элементтэй фонт, хил, загварыг оноож болно. Lightning Болт нь сонгосон элементтэй харилцан үйлчлэлцэх боломжийг танд олгодог.
05-р сарын 09
UXPin-д хэрхэн текст нэмэх болон нэмэх талаар
Текст нэмэхийн тулд текст элементийг дизайн гадаргуу дээр чирээд текстээ оруулна уу. Текст үл хөдлөх хөрөнгийн товчлуур дээр дарж Фонтын шинж чанарыг нээж, текстээ форматлах Хэрэв та демми текстийн блок хэрэгтэй бол текст элемент нэмж, Фонтын шинж чанарт GENERATE LOREM IPSUM товчийг дарна уу.
06-р сарын 09
UXPin хуудас руу зураг нэмэх
Энэ ажлыг хийх хэд хэдэн аргууд байдаг. Та toolbar дахь Image Хэрэгсэлийг ашиглаж болно, Номын сангийн элементийг нэмэх эсвэл дээрээс үзүүлсэн шиг дизайн гадаргуу дээрх элемент рүү директороос зураг татан авч хаях боломжтой.
09-р сарын 07
UXPin хуудас руу яаж нэмэх вэ
Хэдийгээр Button элемент байдаг ч, Хайлтын хэсэгт " Товчлол " оруулснаар дээр дурьдсанчлан бүх номын сан дахь бүх товчлууруудыг нээнэ. Дизайны гадаргуу дээр ажиллаж буй нэгийг чирч, Properties-ийг өнгө, үсгийн маяг, мөн хил хязгаарыг өөрчлөх хэрэгтэй. Текст доторх текстийг өөрчлөхийн тулд нэг удаа дарж шинэ текст оруулах.
08-ийн 08
UXPin хуудсанд интерактив нэмэх
Энэ нь эхлээд гарч болох тул тийм ч төвөгтэй биш юм. Имэйл оролтын хувьд би оролтын элементийг нэмсэн, үүнийг өөрчилсөн, текст оруулсан, текстийг өөрчилсөн. Оруулах элемент сонгогдсоны дараа Properties товчийг дарахад Элементийн шинж чанар харагдаж байгаа үед Visibility товчийг дарна уу.
Товчлуураа сонгоод, Интерактив товчийг дарна уу - Lightning Bolt- шинж чанарууд. Харилцааны самбар нээгдэх үед Шинэ Харилцаа сонго. Trigger дээр дарж сонгоно уу. Үйл ажиллагааны хэсэгт Шоу Элементийг сонгоно уу. Та аль элементийг харуулахыг асууна. Зөвхөн нэг цэг дээр дараад Input элемент дээр дарна уу. Элементийг таньснаар элементийг идэвхжүүлэх эсэхээ шийдэж болно. Энэ тохиолдолд би Input хайрцагыг хялбараар харуулахаар шийдсэн бөгөөд 300мм-ийн үргэлжлэх хугацаатай анхдагч утгыг үзүүлэв.
Би бас товчлуурыг дарах үед баруун талдаа 65 пиксел товч шилжихийг хүсч байна. Би товчлуурыг сонгож, Харилцан Panel болон Шинэ Харилцан холболтыг нээсэн. Би эдгээр тохиргоонуудыг ашигласан:
- Trigger : Дарна уу
- Үйлдэл: шилжих замаар
- Зөөх чиглэл : Х тэнхлэг дээр 65 px
- Animation : Шугаман
- Хугацаа: 300 ms
Харилцааг арилгахын тулд элементийг сонгоод Interaction самбарыг нээнэ үү. Уг самбар доторх харилцан үйлчлэлийг сонгон, устгахын тулд Trash Can дээр дарна уу.
09-р сарын 09
UXPin дахь өөрийн хуудсыг хэрхэн шалгах вэ
Та хөтөч дээр ажиллаж байгаа учраас туршилтын тест маш энгийн. Simulate Design товчийг дарна уу. Хуудас нь хөтөч дээр нээгдэж, тест хийх боломжтой. Олон хуудас, Usability Testing, Live Хуваалцах, Засварлах, Хянах Самбар руу буцах тохиолдолд сэтгэгдэл бичих, хуудасны зүүн талд нэмэх самбар нэмнэ.
Хуудасны доод талд Интерактив элементүүдийг харуулах, харуулах, эсвэл тайлбарыг нээж, төслийн холбоосыг бусадтай хуваалцах өөр нэг жижиг самбар юм.