วันพฤหัสบดีที่ 23 เมษายน พ.ศ. 2558

Final Project Graphical user interface


Final Project Graphical user interface

- Icon app
- Splash page
- Page 1
- Page 2
- Page 3
- Page 4   ขนาดหน้าจอ iPhone 6 ระบบ ios 8.3 จอภาพ Retina HD จอภาพ Multi-Touch แบบ LED-backlit ไวด์สกรีน ขนาด 4.7 นิ้ว (แนวทแยง) พร้อมเทคโนโลยี IPS ความละเอียด 1334 x 750 พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)

แนวคิดการออกแบบ

          เนื่องจากประเทศไทยเป็นประเทศที่มีอากาศร้อน จึงมีความคิดว่า ขายไอครีมเพื่อคลายความร้อน จึงสร้างแอพพลิเคชั่นเพื่อสำหรับสั่งสินค้าในร้านขึ้นสำหรับร้าน กิน ติม ให้ลูกค้าที่เข้าไปใช้บริการร้าน กิน ติม ได้มีความสะดวกสบาย ในการสั่งไอครีมในร้านโดยเลือกซื้อผ่านทาง แอพพลิเคชั่น kin Tin ซึ่งแอพพลิเคชั่นนี้ใช้งานง่าย ไม่ซับซ้อน และทางร้านเองก็ยังได้ลดค่าใช้จ่ายในการจ้างพนักงานลงด้วย

สีที่ใช้ในการออกแบบ

          สีชมพู ความหมาย: อบอุ่น, มีพลัง, ความสมดุล, กระตือรือร้น, มีชีวิตชีวา
          สีน้ำตาล ความหมาย: มิตรภาพ, เทศกาลพิเศษ, พื้นดิน, วัตถุนิยม, ความจริง, สะดวกสบาย, ทนทาน, มั่นคง, เรียบง่าย, อายุยืน
          สีขาว ความหมาย: เทวดา, สันติภาพ, บริสุทธิ์, สาวบริสุทธิ์, ความเรียบง่าย, ความสะอาด, ไร้เดียงสา, หนุ่มสาว, การเกิด, หน้าหนาว, หิมะ, ความดี, ปลอดเชื้อ, หนาวเย็น, ชัดเจน, สมบูรณ์แบบ, ยุติธรรม, ความปลอดภัย

          จึงนำทั้ง 3 สี ที่กล่าวมาข้างต้น มาใช้ในการออกแบบ และนำภาพจริงมาประกอบเป็น ภาพบนแอพพลิเคชั่นด้วย เพื่อให้สอดคล้องกับไอครีมที่มีรสชาติหวานเย็น ในช่วงฤดูร้อนๆ อย่างประเทศไทย
Sketch



icon App Kin Tim


KIN TIM
          ไอคอนมีลักษณะวงกลม สร้างจุดเด่นโดยตัวอักษร KIN TIM สีขาว เพื่อสร้างความน่าสนใจ มีสีชมพูเพื่อเพิ่มความน่ารับประทานของไอครีม มีสีน้ำตาลเพื่อเพิ่มความหวาน


Page 1 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
นำ icon application Kin  Tim มาวางกับ icon อื่นๆ
ที่มา : นางสาวศิรินันท์  สะอาด,2558


Page 2 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
หน้า Loading เพื่อจะเข้าไปในหน้า Splash page


Page 3 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
หน้า  Splash page เป็นหน้าหลักที่จะคลิ๊กเข้าไปดูหน้าต่างๆของ page


Page 4 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
หน้าต่อมาเป็นหน้า ที่จะให้ลูกค้าเลือกภาชนะที่จะใส่ไอครีม มีให้เลือก 3 แบบ มีเป็น โคน ถ้วยแก้ว ถ้วย และ ขนมปัง  ภาชนะนี้ก็จะมีขนาดให้เลือกตามที่ลูกค้าต้องการ ถ้าเลือกเป็น ถ้วยแก้วก็จะ เลือกขนาดของไอครีมที่จะซื้อมากน้อยเพียงใด โดยที่ไม่คิดเงินเพิ่ม  ส่วนโคนกับขนมปังก็บวกเงินเพิ่มตามขนาดที่ลูกค้าเลือก 


Page 5 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
สำหรับหน้านี้ หลังจากที่ได้ภาชนะใส่ไอครีมแล้ว ก็มาเลือก รสชาติของไอครีม แล้วกด OK 


Page 6 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
เมื่อเรากด OK แล้ว หน้าต่อมาคือ หน้า ที่จะให้เลือก popping แล้วกด  OK


Page 7 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
เมื่อเราเลือกทั้งหมดที่เราจะรับประทาน app ก็จะประมวล ทั้งหมดที่เลือก ออกมาแล้วคิดเป็นราคาให้เราทราบ  แล้วกด OK


Page 8 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
เมื่อเรากด OK app ก็จะประมวลผลเป็นหน้าตาของไอครีมที่เราเลือก  ออกมาให้ดู แล้วก็บอกเวลาว่า 15 นาที ถึงจะได้กินไอครีมที่สั่ง 


Page 9 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
เมื่อเรารับกินเสร็จ ไม่ต้องไปเรียกพนักงาน แค่ คลิกที่ collection ก็จะพบหน้า ยอดเงินที่ต้องชำระ แล้วพนักงานจะมาเก็บเงินเอง


Page 10 : iPhone capture screen whit  KIN  TIM Icon 
iPhone 6 : 750 x 1334  พิกเซลที่ 326 ppi อัตราส่วนคอนทราสต์ 1400:1 (ทั่วไป)
หน้าสุดท้ายจะเป็นการติชมของลูกค้าที่เข้ามาใช้บริการ ให้คลิกไปที่หน้า comments แล้ว กด save จบการทำงาน
https://popapp.in/w/projects/5538e3517941a39c496f7e00/preview/5538e3517941a39c496f7e03
ตัวอย่าง application Kin Tim

การนำไปใช้ในโทรศัพท์มือถือในระบบ iPhone 6   ios 8.3


">                     

ไม่มีความคิดเห็น:

แสดงความคิดเห็น