วันอาทิตย์ที่ 16 กุมภาพันธ์ พ.ศ. 2557

' Application Design . . ~ *


" MADONNA "

เป็นการออกแบบแอพฯ ของเกมส์แต่งตัวตุ๊กตา " Madonna " ที่จะใช้งานบน iPhone 4s
โดยแอพฯ นี้ ออกแบบมาเพื่อความบันเทิงและผ่อนคลายของผู้ใช้บริการ 
เน้นสีสันที่สดใส สไตล์ของรูปภาพ นางแบบ และเครื่องแต่งกายที่น่ารัก เพื่อดึงดูดความสนใจ 
มีปุ่มกดเพื่อเปลี่ยนไปยังหน้าต่างๆที่ชัดเจน เมื่อแต่งตัวเสร็จจะมีเกณฑ์การให้คะแนน 
การถ่ายภาพเพื่อเก็บไว้เป็นที่ระลึก และสามารถแชร์ภาพไปยัง Socail Network ต่างๆได้ . .


By : Saowalak Singwongsa


ส่วนที่ 1 :: Icon App { Size : 512 x 512 Pixel / 72 ppi }


By : Saowalak Singwongsa


ไอคอนเป็นตัวหลักที่จะสามารถดึงดูดผู้ใช้บริการได้เป็นอย่างดี เรียกได้ว่า . .
เป็นหน้าตาของแอพฯ นั้นๆเลยก็ว่าได้ ไอคอนต้องมีความชัดเจน น่าสนใจ เข้าใจง่าย
จึงออกแบบโดยการใช้หน้าของนางแบบที่อยู่ในเกมส์


ส่วนที่ 2 :: หน้า Loading... { Size : 960 x 640 Pixel / Resolution : 300 dpi }


By : Saowalak Singwongsa

หน้า Loading... เป็นหน้าโหลดของแอพฯ เพื่อรอระบบทำการเข้าเกมส์
ออกแบบโดยใช้ชื่อเกมส์อยู่ที่ด้านบนสุด ถัดมาคือตัวโหลด จะใช้ไอคอนเสื้อผ้า
เป็น % ในการโหลด และมีตัวบ่งบอกระยะ % ในการโหลดอยู่ที่ด้านล่างสุด


ส่วนที่ 3 :: Splash Page { Size : 960 x 640 Pixel / Resolution : 300 dpi }

          ✡ Main Menu . .


By : Saowalak Singwongsa

เป็นหน้าเมนูหลักเพื่อเลือกเข้าสู่เกมส์
Start : เข้าสู่หน้าเกมส์
Best Point : เข้าดูสถิติคะแนนของการเล่นเกมส์
Photo : รูปถ่ายที่ทำการบันทึกในแต่ละครั้งของการเล่นเกมส์แต่งตัว


          ✡ Menu 1 . .


By : Saowalak Singwongsa

หน้าเกมส์การแต่งตัว จะมีเสื้อผ้าให้เลือกดีไซน์ใส่ให้เหมาะกับนางแบบ
สามารถเลือกแต่งได้ตามใจชอบและต้องการ 
ด้านซ้ายจะมีปุ่ม Back เพื่อกลับไปยังหน้า Main Menu
ด้านขวาจะมีปุ่ม Next เพื่อไปยังหน้าต่อไป


          ✡ Menu 2 . .


By : Saowalak Singwongsa

หน้าการให้คะแนน เมื่อแต่งตัวให้นางแบบเสร็จจะมีการบอกคะแนนเพื่อเก็บไว้เป็นสถิติ
ด้านซ้ายจะมีปุ่ม Back เพื่อกลับไปยังหน้าเกมส์การแต่งตัว
ด้านขวาจะมีปุ่ม  Next เพื่อไปยังหน้าต่อไป


          ✡ Menu 3 . .


By : Saowalak Singwongsa

หน้าการถ่ายรูปเพื่อเซฟเก็บไว้ ด้านซ้ายจะมีปุ่ม ทั้งหมด 3 ปุ่ม . .
Try Again : เพื่อกลับไปยังหน้าเกมส์การแต่งตัว
Shared : สามารถแชร์ไปยัง Socail Network ต่างๆได้
กล้องถ่ายรูป : เพื่อเซฟรูปภาพเก็บไว้






-----------------------------------------------------------

' การออกแบบ Graphical User Interface . . *


การออกแบบ Graphical User Interface . .

          ▲ ออกแบบเพื่อผู้ใช้ทุกระดับ 
          ▲ สิ่งที่ผู้ใช้ทุกคนต้องการ :: การเข้าถึงส่วนที่ต้องการได้อย่างสะดวกรวดเร็ว
              โดยผ่านระบบการนำทางที่สื่อความหมาย และมีประสิทธิภาพ ดังนั้น ในแอพฯ
              หนึ่งควรจะรองรับผู้ใช้ทุกระดับ ตั้งแต่ผู้เริ่มต้น ผู้มีประสบการณ์ และผู้เชี่ยวชาญ
              ด้วยการคำนึงถึงผู้ใช้ทุกกลุ่มอยู่เสมอ ซึ่งต้องสร้างสมดุลระหว่างสิ่งที่ชี้แนะมือใหม่
              และความรวดเร็วของผู้มีประสบการณ์ วิธีที่ดีที่สุด คือ การหาเวลาพูดคุยกับพวกเขา
              รับฟังความคิดเห็นและคำวิจารณ์ของผู้ใช้

ข้อมูลหลักที่มีอยู่ใน Application . .

          ▲ ข้อมูลที่เกี่ยวกับบริษัท ( About Us )
          ▲ รายละเอียดของผลิตภัณฑ์ ( Contents , Information )
          ▲ ข่าวความคืบหน้าและข่าวจากสื่อมวลชน ( News , Update... )
          ▲ คำถามยอดนิยม ( FQA )
          ▲ ข้อมูลในการติดต่อ ( Contact Us )

กำหนดกลุ่มผู้ใช้ : เป้าหมาย . .

          ▲ กำหนดกลุ่มเป้าหมายอย่างเฉพาะเจาะจง
          ▲ นึกถึงผู้ใช้เป้าหมายหลายกลุ่ม
          ▲ เรียนรู้ผู้ใช้
          ▲ เข้าใจประสบการณ์ของผู้ใช้
          ▲ จำลองสถานการณ์

สร้างตัวอย่างจากผู้ใช้ . .

          ▲ ผู้ใช้คนแรก
          ▲ ผู้ใช้คนที่สอง
          ▲ สร้างสถานการณ์

หน้าแรกของ Application . .

          ▲ ไอคอน Application บนหน้าจอ Home Screen
          ▲ หน้า Loading - Splash

ภาพประกอบ . . 

          ▲ ความเหมาะสมของภาพกับเนื้อหา
          ▲ ขนาดของไฟล์
          ▲ ลิขสิทธิ์ภาพ

โปรแกรมที่ใช้ในการออกแบบ . .



.. Adobe Photoshop ..



.. Adobe Illustrator ..

Sketch . .

          ▲ สิ่งที่สำคัญที่สุดในการเริ่มต้นการออกแบบ
          ▲ " ร่าง " ( Sketch ) แบบของงาน ก่อนทำ " โครงร่าง " ( Wireframe )

Sketch : Wireframe . .

          ▲ ยึดหลักการออกแบบจากข้อมูลภายใน Application

ไฟล์ที่ใช้บน Application . .

          ▲ .JPG : ปรับจำนวนสีได้หลายขนาด ไม่มีพื้นที่เจาะทะลุพื้นหลัง
          ▲ .PNG : ขอบภาพโปร่งใส เจาะทะลุพื้นหลังได้ คมชัด
          ▲ .SVG : สามารถย่อขนาดภาพบน Application ได้ ภาพไม่แตก เจาะทะลุพื้นหลังได้
                        คมชัด ความละเอียดเป็นแบบ Vector แก้ไขภาพได้

สิ่งที่ผู้ใช้ต้องการจาก Application . .

          ▲ ข้อมูลและการใช้งานที่เป็นประโยชน์
          ▲ ข่าว
          ▲ การตอบสนองต่อผู้ใช้
          ▲ ความบันเทิง
          ▲ ของฟรี


-------------------------------------------