การออกแบบ User interface

จันทร์ 17 กุมภาพันธ์ 2557
Design in App New iPad
Final Project  ออกแบบ  App บน ipad ผ่าน  Adobe Photoshop 

User interface Jaomaeew เป็นการออกแบบขึ้นมาเพื่อให้ผู้สนใจรักและชื่นชอบแมว เพราะภายใน App นี้เราบอกสิ่งที่ควรรู้เกี่ยวกับตัวแมวเช่น บนร่างกายของแมวตรงไหนจับได้ ตรงไหนไม่ควรจับ และหางในลักษณะไหนสื่ออารมณ์อะไร เราสามารถรู้แล้วศึกษาได้โดยผ่าน app Jaomaew
ลักษณะการเลือกใช้สีออกแบบ : เลือกใช้โทนสีสดใสเพื่อเพิ่มความจุดสนใจให้กับ app jaomaew 

เน้นโทนสีสดใสเป็นหลัก แต่ในส่วนเนื้อหาก็จะใช้สีขาวดำเป็นหลักเพื่อง่ายต่อการอ่าน
การจัดวางรูปแบบ App บน iPhone :  สัญลักษณ์เน้นไปอยู่ทางส่วนล่างของ iPhone ทั้งหมด
การจัดวางองค์ประกอบที่ใช้ง่ายเหมือนทั่วไป เพื่อให้ง่ายต่อการใช้สำหรับทุกคน

ภาพที่ 1 : Icon app Jaomaew size 512x512 pixel 72 ppi

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Icon :  การออกแบบต้องการให้เห็นสื่ออย่างชัดเจน โดยการนำแมวเป็นจุดเด่น

การเพิ่มชื่อ App ลงไปเพื่อให้เห็นชื่อ App ได้ชัดเจน 

ภาพที่ 2 :  Loading Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Loading :  การออกแบบหน้า Loading  สำหรับการดาวน์โหลดก่อนการเข้าไปสู่เมนู 

รูปแบบในการออกแบบ คือ ใช้รูปแมวกำลังกระโดด ใช้สีพื้นหลังเป็นเพลนสีชมพู เพื่อให้ดูสดใสมากขึ้น

ภาพที่ 3 : Menu Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Menu : ออกแบบเป็นภาพคนกำลังแบกแมวท่หนักมากแล้วก็มีตัวอักษรว่า Meawwwww....Ahh ประมาณว่าช่วยกดปุ่มนี้ทีฉันหนักมากกกก ! ออกแบบมาเพียงปุ่มเดียวเพื่อเข้าสู่หน้าถัดไปเลย ใช้สีสันสดใสอีกเช่นเคย

ภาพที่ 4 : Page 1 Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Page 1: เริ่มต้นเข้าสู่ตัว app สามารถอ่านและทำความเข้าใจในส่วนต่างๆ บนตัวแมวว่าตรงไหน ควรจับหรือตรงไหนไม่ควรจับ พร้อมทั้งสามารถ Back กลับไปหน้า Meun ได้ที่ปุ่มซ้ายมือล่างรูปเท้าแมว และสามารถกดที่หางเพื่อไปสู่ยังหน้าต่อไปที่อธิบายเกี่ยวกับหางของแมวที่สื่อหรือให้อารมณ์อะไร เมื่อแตะที่บริเวณนั้นๆก็จะมีเสียงตามอารมณ์ของแมว

โทนสีที่ใช้ในหน้านี้: จะเน้น Bg ขาวเพื่อให้เห็นรูปภาพและข้อความ ข้อมูลชัดเจนมากขึ้น

ภาพที่ 5 : Page 2 Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Page 2: เข้าสู่หน้าถัดมาหน้านี้จะอธิบายเกี่ยวกับหางสื่ออารมณ์ของแมว ปุ่มล่างสุดทั้ง 2 ปุ่มคือ ปุ่มซ้ายกดเพื่อกลับไปยังหน้าถัดมา ปุ่มขวากดเพื่อไปยังหน้าสุดท้ายของ App นี้

โทนสีที่ใช้ในหน้านี้: จะเน้น Bg ขาวเพื่อให้เห็นรูปภาพและข้อความ ข้อมูลชัดเจนมากขึ้น

ภาพที่ 6 : Page 3 Jaomaew

size 640 x 960 pixel  resolution 300

ที่มา : นางสาวขวัญกมล จิตต์ประเสริฐ,2557

Page 3: หน้านี้เป็นหน้าสุดท้ายของ App เป็นภาพมือแมวโบกไปมา Bye เป็นภาพถ่ายสีออก pastel มีข้อความว่า Bye....