แนวคิด สำหรับคนจะออกแบบในแนว metro ui ของ windows 8

แนวคิด สำหรับคนจะออกแบบในแนว metro ui ของ windows 8

เนื้อหานี้ ผมจะอ้างอิง แนวคิดการออกแบบ application ในแนวทาง metro ui สำหรับ application ที่จะนำไปใช้บน windows 8 โดยจะอ้างอิงมาเกือบทั้งหมด เพื่อทำความเข้าใจ ว่าเพราะอะไรเค้าถึงได้คิดออกแบบ แบบนั้น

สำหรับใครที่เคยเห็นหน้าตา metro ui ของ windows 8 มาบ้างแล้ว ถ้าหากพิจารณาดีๆแล้ว มันคือการทำกล่อง เทสี ในเนื้อหา แค่นั้นเอง ซึ่งมันเป็นการ design ที่ง่ายมากๆ เรียกได้ว่า มันเกิดมาเพื่อ programmer เลยก็ว่าได้ 555 (เพราะว่า programmer ส่วนใหญ่จะไม่มีหัวด้าน design เลย)
windows 8 metro ui

แต่จริงๆแล้ว metro ui เค้ามีแนวคิด มีแนวทางที่มากกว่าเป็น design สำหรับ programmer เพราะว่าเค้าไม่ได้ตั้งต้นว่า "ฉันจะทำ metro ui เพื่อให้ programmer ออกแบบได้ง่าย" แต่เค้าคิดว่า "design แบบนี้ล่ะ ที่เหมาะสำหรับคนใช้งานมากที่สุด" ต่างหาก

เนื้อหา คือสิ่งที่สำคัญที่สุด

ในการออกแบบ แนว metro ui นั้น การแสดงเนื้อหา เป็นหัวใจสำคัญที่สุด ก่อนการออกแบบ หรือว่าตกแต่งสิ่งใดๆลงไป เพราะเราต้องคำนึงถึง ผู้ใช้ ที่เค้าจะเสพ content ของเรา ไม่ใช่ graphic ของเรา (ถ้า content ของเราคือ ภาพ นั่นก็คือ content ไม่ใช่ graphic ตกแต่งจุดต่างๆ)

ตั้งใจแสดงเนื้อหา

การออกแบบ ให้แสดงเนื้อหา และเข้าถึงเนื้อหาได้โดยง่ายที่สุด โดยให้คิดถึง ผู้ใช้ ที่ใช้งานไม่เป็น หรือไม่เคยใช้เอาไว้เสมอ

สะอาด จัดเรียงแบบเปิดโล่ง

  • ต้องลด graphic วับแวมๆ หรือภาพที่ดึงดูดความสนใจที่ไม่เกี่ยวข้องออกทั้งหมด หรือ ให้เหลือน้อยทีสุด โดยพยายามให้ ผู้ใช้ สนใจแต่เพียง content ที่เราต้องการนำเสนอเท่านั้น
  • เปิดพื้นที่ให้แสดง content ได้ชัดๆ โดยการลบเส้น ลบกล่องครอบ หรือว่าภาพประกอบ หรือ effect เช่น ภาพเบลอ ไล่สี ให้ใช้การจัดวางแบบเปิดโล่ง อย่าพยายามตีกรอบให้เนื้อหา
  • จำกัดจำนวนของ navigator ที่แสดงผลเนื้อหาต่างๆ เช่น tab โดยพยายามทำให้สนใจแต่เนื้อหาที่เราต้องการแสดงเท่านั้น อย่าให้เกิดความรำคาญในการใช้งาน navigator เด็ดขาด

จัดโครงสร้างของข้อมูลให้ชัดเจน

Microsoft เค้าบอกว่า เค้าค้นพบว่า ความสะอาด, ตัวหนังสือที่สวยงาม จะช่วยให้ ผู้ใช้ เข้าใจโครงสร้างของข้อมูลที่เราต้องการนำเสนอได้ แนะนำให้ใช้ ตัวหนังสือ กับเส้น และ กล่อง เพื่อเชื่อมโยงโครงสร้างและลำดับชั้นอย่างถูกต้อง

    การโต้ตอบกับ ผู้ใช้แบบตรงไปตรงมา

    เป็นธรรมชาติของผู้ใช้ ที่จะพยายามกระทำกับวัตถุที่มองเห็นนั้นทันที แบบตรงไปตรงมา โดยไม่ต้องใช้ตัวช่วยใดๆ

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

    รวดเร็วและลื่นไหล

    ควรมีการตอบสนองให้รวดเร็วที่สุด

    ใช้ animation ให้เป็นประโยชน์

    การเคลื่อนไหว เป็นส่วนหลักของการออกแบบโปรแกรมของ Microsoft การออกแบบ animation ที่ดีจะช่วยให้งานที่ได้นั้นมีความสวยงามมากขึ้น

    • ใช้ animation เพื่อบ่งบอก ถึง story ของ content นั้นๆ ทุกสิ่งอย่าง ควรมีที่มาจากที่ไหน อย่างลื่นไหล
    • ใช้ชุดของ animation เพื่อสร้างเรื่องราวอย่างมีระบบ โครงสร้าง จะช่วยให้ ผู้ใช้ เข้าใจเนื้อหาเราได้ดีมากขึ้น
    • เมื่อใช้ animation เพื่อสื่อสารเนื้อหาที่สำคัญ ต้องมั่นใจว่า มีทางเลือกอื่นที่เข้าถึงเนื้อหานั้นด้วย

    ออกแบบเพื่อรองรับการ touch

    ทุกสิ่งอย่างออกแบบมาเพื่อให้ใช้งานแบบสัมผัสก่อนเสมอ เพราะว่าการใช้มือ หรือนิ้วจะเป็นสิ่งที่ง่ายกว่า และเป็นธรรมชาติกว่าการใช้ตัวช่วยอื่นๆ

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

    ย่อขยายขนาดตามขนาดหน้าจอ

    จะต้องคิดถึงคนที่ใช้งานในหลักหลายร้อยล้านคน ที่จะมีขนาดหน้าจอของอุปกรณ์ที่แตกต่างกัน ไล่ตั้งแต่น้อยกว่า 10 นิ้ว จนใหญ่มากกว่า 27 นิ้ว

    • พยายามออกแบบให้เป็นแบบ fluid layout เพื่อให้สามารถใช้ตัวควบคุมกำหนดขนาดการแสดงผลในหน้าจอขนาดต่างๆได้
    • ให้คิดถึงขนาดของหน้าจอ และความละเอียดของหน้าจอ เพราะจะต้องใช้รายละเอียดที่แตกต่างกัน

    ใส่ใจในการออกแบบ กระเบื้อง (ช่องสี่เหลี่ยม ที่เป็นเหมือน shortcut เพื่อกดเข้าไปดูข้างใน)

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

    • แสดงเนื้อหาบางส่วน ใน tile และพยายาม update ให้ใหม่ที่สุด
    • อ้างอิงเนื้อหาที่แสดงใน tile เข้าไปยังภายใน เพื่อให้ผู้ใช้เจอสิ่งที่ตัวเองต้องการในทันที

    ทำให้รู้สึกว่า เชื่อมต่ออยู่ตลอดและสดใหม่เสมอ

    แสดงเนื้อหาที่สดใหม่ รวมทั้งการเตือนต่างๆเพื่อให้ผู้ใช้รู้สึกว่า ยังเชื่อมต่ออยู่ตลอดเวลา

    หลักการออกแบบของ Microsoft

    แสดงฝีมือการออกแบบอย่างเต็มที่

    • ทุ่มเทเวลา และพลังทั้งหมด เพื่อสิ่งเล็กๆ ที่จะมีคนจำนวนมากได้ใช้งานมัน
    • ใช้ทักษะ และประสบการณ์ในการขัดเกลา ปรับปรุงในทุกๆขั้นตอน

    ทำน้อยๆแต่ให้ได้มากๆ

    • แก้ปัญหาเรื่องการแสดงผลที่ซับซ้อน, การเข้าถึงได้ยาก เพื่อให้ผู้ใช้หมกมุ่นในสิ่งที่ผู้ใช้ชอบ
    • ทำให้สะอาด และมีแบบแผน โดยการเหลือเอาไว้แต่เพียงสิ่งที่ ผู้ใช้ ต้องการเท่านั้น

    เร็วและลื่นไหล

    • ให้ผู้ใช้กระทำกับเนื้อหาโดยตรง และมีการตอบสนองที่ทันทีเมื่อผู้ใช้กระทำกับระบบ
    • พยายามสร้างประสบการณ์ที่ดีให้ผู้ใช้ และใช้ animation อย่างมีเป้าหมาย เพื่อการเล่าเรื่องได้

    ทำให้เป็น digital จริงๆ

    • พยายามสื่อถึงความเป็น digital ให้มากที่สุด โดยการเอาอะไรที่เป็นสิ่งของจริงที่มีในโลกเราออกไป เพื่อจะช่วยให้ลดความเป็นจริงลดน้อยลงมากทีสุด
    • ออกแบบให้กลมกลืนกับ pixel บนหน้าจอที่สุด โดยใช้ตัวหนา ชัดเจน ขอบคม สี ภาพ ที่ไม่สามารถมีจริงบนโลกนี้

    ทั้งหมดนี้คือสิ่งที่ Microsoft บอกเล่า เพือเป็นแนวทางในการออกแบบ ซึ่งเราจะเห็นได้ว่าแนวทางของ Microsoft นั้นเน้นเพียงสองอย่าง คือเรื่องของ content กับ ผู้ใช้ เท่านั้น นอกเหนือจากนั้นพยายามตัดออกไปเกือบหมดเลย ซึ่งเป็นแนวทางที่แตกต่างจากที่เคยทำมาโดยตลอดเลย หรือแม้กระทั่งคู่แข่งเองอย่าง android , mac os ก็แตกต่างอย่างมากเหมือนกัน ถึงกับขนาดว่า Microsoft ตั้งชื่อให้ว่า The Metro Design Language เลยทีเดียว และได้เอาไปจดสิทธิบัตร การแสดงผล และการตอบสนอง เอาไว้เป็นที่เรียบร้อยแล้วด้วย

    จริงๆหลายคนน่าจะเคยเห็นว่า การ design แนวทางของ simplify นั้น เริ่มมีมาสักระยะแล้ว เพียงแต่ว่ายังไม่มีใครออกมากำหนด หรือชี้ชัดๆ รวมทั้งวิเคราะห์ วิจัยเท่ากับ Microsoft เลย การมาของ windows 8 ก็น่าจะเป็นการเปลี่ยนโฉมแนวทางการ design ไปได้อย่างมาก โดย programmer ก็จะทำงานได้ง่ายขึ้น เพราะจะเห็นได้ว่า การ design นั้นลดน้อยลงไปมากเลย แต่ designer เองก็ยังไม่ตกงานซะทีเดียว เพราะว่าหลายงานก็ยังจำเป็นต้องใช้ designer อยู่

    ถึงจุดนี้ ผมว่า หมดยุคของการ design แบบ element เยอะๆแบบเมื่อก่อนแล้ว แทบจะ 100% ดังนั้นใครกำลังเริ่มต้น ก็เริ่มต้นด้วยความเรียบง่ายนะครับ ยึดแนวทางของ Microsoft เป็นหลักได้เลยครับ

    Create: Modify : 2012-11-21 07:47:16 Read : 6728 URL :