วันอาทิตย์ที่ 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 . .

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


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