News

[Google I/O] Material Design แนวทางดีไซน์ใหม่ ทำทีเดียวครอบคลุมทุกแพลตฟอร์ม

ความเปลี่ยนแปลงที่ชัดเจนที่สุดใน Android L คงไม่พ้นเรื่องของหน้าตา UX/UI ที่จะเปลี่ยนแปลงไปอย่างมีนัยยะสำคัญ แต่ว่าอย่าเพิ่งเข้าใจผิดคิดไปว่ามันจะมีผลแค่เพียงกับโทรศัพท์รุ่น Nexus เท่านั้นนะ เพราะว่าการเปลี่ยนแปลงนี้เป็นการสร้าง Design Guideline ขึ้นมาใหม่ภายใต้ชื่อ “Material Design” เช่นเดียวกับตอนที่เปลี่ยน UI จาก Android 2.3 เป็น Halo UI บน Android 4.0 ซึ่งมีเรื่องน่าสนใจที่ผู้ใช้อย่างเราๆน่าอ่าน รู้เอาไว้สนุกๆ และ App Designer + Developer ทั่วไปต้องรู้

ความเปลี่ยนแปลงที่ชัดเจนที่สุดใน Android L คงไม่พ้นเรื่องของหน้าตา UX/UI ที่จะเปลี่ยนแปลงไปอย่างมีนัยยะสำคัญ แต่ว่าอย่าเพิ่งเข้าใจผิดคิดไปว่ามันจะมีผลแค่เพียงกับโทรศัพท์รุ่น Nexus เท่านั้นนะ เพราะว่าการเปลี่ยนแปลงนี้เป็นการสร้าง Design Guideline ขึ้นมาใหม่ภายใต้ชื่อ “Material Design” เช่นเดียวกับตอนที่เปลี่ยน UI จาก Android 2.3 เป็น Halo UI บน Android 4.0 ซึ่งมีเรื่องน่าสนใจที่ผู้ใช้อย่างเราๆน่าอ่าน รู้เอาไว้สนุกๆ และ App Designer + Developer ทั่วไปต้องรู้

เบื้องหลังที่มาที่ไปของ Material Design

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

ให้ลองจินตนาการว่า Pixel บนหน้าจอที่เราใช้มันไม่มีแต่เม็ดสีเพื่อแสดงภาพ แต่ว่ามันมีลักษณะเป็นเหมือนกระดาษที่มีความลึก มีพื้นผิว สามารถตอบสนองต่อการสัมผัสได้ และที่สำคัญมันสามารถเปลี่ยนขนาดให้เป็นไปตามที่เราต้องการ และนั่นหมายถึงว่าเรากำลังมองให้หน้าจอเป็นเหมือนวัตถุชิ้นนึงที่เราสามารถพลิกแพลงไปได้ตามจินตนาการ ซึ่งนั่นเป็นที่มาของชื่อ “Material Design”

การนำไปใช้งาน

สมองมนุษย์เราสามารถสร้างเชื่อมโยงความสัมพันธ์ของวัตถุที่อยู่ตรงหน้าเพียงแค่ได้เห็นรูปร่างและแสงเงา ก็พอที่จะระบุได้ทันทีว่าของชิ้นนี้ขยับได้ รวมถึงทิศทางที่ต้องขยับ ซึ่งดีไซน์ใหม่ของ Android ก็จะเพิ่มความสามารถให้เหล่านักพัฒนาออกแบบ UI ของแอพขึ้นมาได้เหมือนเป็นวัตถุชิ้นหนึ่งในหน้าจอ ไม่ว่าจะเป็นปุ่มกด พื้นหลัง หรือกล่องข้อความ เราจะสามารถสังเกตเห็นได้ถึงการเปลี่ยนแปลงของแสงเงาเมื่อมีการขยับหรือเปลี่ยนพื้นหลัง ตัวแอพสามารถกำหนดระดับความลึกตื้นของวัตถุแต่ละชิ้น และสร้างแสงเงาออกมาให้ดูสมจริงเสมือนเป็นวัตถุชิ้นหนึ่งที่ลอยอยู่

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

 

การออกแบบใช้งานข้ามแพลตฟอร์ม

Material Design ได้มีการดึงเอา Grid มาช่วยให้การออกแบบสำหรับใช้ข้ามแพลตฟอร์ม ตีเส้น สร้างขอบเขตของส่วนต่างๆให้มีจังหวะและนำ้หนักของดีไซน์ให้เป็นไปในทางเดียวกันในทุกๆอุปกรณ์ ซึ่งในงาน Keynote ได้มีการแสดงให้ดูถึงความเปลี่ยนแปลงเมื่อทำการปรับจากแนวการดีไซน์เก่า มาเป็น Material Design รวมถึงความง่ายในการประยุกต์ใช้ไปยังหน้าจออื่นๆให้ดูด้วย ลองเข้าไปดูวิดีโอในส่วนนี้กันในนาทีที่ 45 ครับ 😀

นอกจากนี้เจ้า Material Design นี่ยังสามารถทำงานร่วมกับ Polymer ซึ่งเป็น UI Library ที่เปิดตัวไปเมื่อ Google I/O ปีที่แล้ว ทำงานร่วมกันเพื่อสร้างกราฟฟิกและอนิเมชั่นที่สวยงาม เข้ากันได้ดีทั้งบนมือถือและเว็บ ดูลื่นไหลด้วยเฟรมเรตที่สูงถึง 60fps

สำหรับใครที่อ่านแล้วเริ่มสนใจ แนวทางการออกแบบที่จะสามารถใช้งานได้ข้ามแพลตฟอร์มนี้แล้วล่ะก็ สามารถเข้าไปศึกษาเพิ่มเติมในรายละเอียดได้ที่ google.com/design

ทิ้งท้ายด้วยวิดีโอคอนเซปท์ของ Material Design

19 Comments

  1. laruku

    laruku Post on June 27, 2014 at 1:27 am

    #853493

    comment นี้เอียงมาก…Android Material Design สวยกว่า iOS Flat Design มากก

    • dumposk129 Post on June 27, 2014 at 4:44 am

      #853530

      ช่วยทำระบบ tag หน่อยได้มั้ยอะครับ จะได้เข้าไปอ่านข่าวเก่าได้สะดวก เห็นหลายข่าวแล้วครับที่ไม่มีระบบแท็กเลยหาข่าวได้ยากมาก

    • tot_anusak

      tot_anusak Post on June 27, 2014 at 5:02 am

      #853539

      +1

    • Ponlawat

      Gimme Post on June 27, 2014 at 5:48 am

      #853544

      ทำอยู่ครับ แต่ยังไม่เสร็จ T__T

  2. yanyongyi Post on June 27, 2014 at 2:05 am

    #853496

    แอพพวกmulti resolution ต่อไปจะมีขนาดไฟล์ที่ใหญ่ขึ้นรึเปล่าคับ ถ้าไม่มีการบีบอัดหรือใช้โค๊ดดีๆ ผมกลัวพื้นที่จะไม่พอคับ

    • edskub Post on June 27, 2014 at 6:12 pm

      #853609

      ไม่แน่ครับ ถ้าใช้ linear ก็ไม่ได้ใหญ่ขึ้น
      แต่ถ้าเป็น JPG ล้วนก็คงอ้วก

  3. ninxxxxx

    ninxxxxx Post on June 27, 2014 at 2:37 am

    #853497

    โอ่ยยยยหลงรักครับบบบ อุส่าอยากจะใช้รอมศูนย์สักพัก แต่เจอ Material Design เข้าไป หารอม 4.4.4 มาเล่นเกือบไม่ทันน รอ Andoid L มาอย่างจริงจังครับบอยากสัมผัสสสส #สวยกว่าIOS จริงจังละครับบ Flat แบบดูมีเรื่ิองราวช๊อบบบชอบบบ ^^

  4. 255BB Post on June 27, 2014 at 3:21 am

    #853504

    รีบปล่อยของ nexus 4 ไวไวน้า

  5. puwadon

    puwadon Post on June 27, 2014 at 3:49 am

    #853512

    นั่งมอง iOS ตาปริบๆ -.-

  6. dumposk129 Post on June 27, 2014 at 4:52 am

    #853532

    ถามพวก Dev หน่อยครับ อยากรู้ว่า padding มันกว้างเกินไปมั้ยอะครับ เพราะที่ดูเมื่อวานส่วนบนรู้สึกจะใช้เนื้อที่เยอะนะ

  7. nessuchan Post on June 27, 2014 at 4:56 am

    #853535

    iPhone 5C ในมือ ถึงกับสั่น อ๊ะ ใครไลน์มา
    ดีนะเราถอย Nexus 5 มาให้แฟนใช้ละ อย่างน้อยก็ได้เล่นได้จับ

  8. lakza123 Post on June 27, 2014 at 5:01 am

    #853537

    สวยมากครับ ชอบดูมีมิติวูบวาบไปมาลื่นไหล

  9. nokhook

    nokhook Post on June 27, 2014 at 8:07 am

    #853558

    น่าใช้ดี ในมุมมอง user

    สำหรับมุมมองผม ถ้าต้องพัฒนาแอพแบบนี้ คำถามผมคงมองว่ามันจะยากไหมอ่ะ

    แล้ว container พวก linear layout, relative layout จะนำมาประยุกต์ได้อย่างไร?

  10. nutartworks

    nutartworks Post on June 27, 2014 at 3:28 pm

    #853575

    เวลาใช้งานจริง จะลื่นไหลเหมือนในคลิบรึเปล่าน่ะสิ เพราะถ้าหน่วงๆ กระตุก มันก็เสียอารมณ์นะ

  11. martinjol

    martinjol Post on June 27, 2014 at 8:20 pm

    #853646

    ผมมองว่าไอคอนบางตัวเข้าใจยากกว่าแต่ก่อน
    สำหรับผู้ใช้ใหม่ๆโดยเฉพาะที่ย้ายมาจาก ios
    ปุ่มสามเหลี่ยม วงกลม สี่เหลี่ยม หมายถึงอะไร
    แฟนใช้ iphone อยู่ เคยยืม Note3 ของผมไปใช้ บอกใช้ยาก
    แต่ผมใช้ iphone ของแฟนได้ง่ายมาก ไม่ชินที่ไม่มีปุ่ม Back อย่างเดียว

  12. mayinlove

    mayinlove Post on September 18, 2014 at 5:15 am

    #869004

    รอ Nexus 6 เมื่อไหร่จะมาน้า

  13. mayinlove

    mayinlove Post on September 18, 2014 at 5:16 am

    #869008

    ชอบปุ่ม Back นะ ง่ายสำหรับนิ้วโป้งมาก

  14. mayinlove

    mayinlove Post on September 18, 2014 at 5:23 am

    #869012

    ไหนๆ ก็จะทำ Material Design อย่าลืมทำให้ปุ่ม Navi ด้วยนะครับ

  15. wonghotbit01 Post on February 15, 2015 at 7:53 pm

    #898962

    ชอบที่สุดเลย Design นี้ เหมาะกับการมาของ Android Lolipop จริงๆ ^^

Leave a Reply

To Top