Tags:
Node Thumbnail

กูเกิลออก Material Design Lite (MDL) ชุดไลบรารีสำหรับสร้างเว็บแบบ Material Design ได้อย่างง่ายดาย

MDL สร้างขึ้นด้วยเทคโนโลยี Web Components โดยพัฒนาต่อจาก Polymer ของกูเกิลเอง สามารถใช้งานกับเบราว์เซอร์ยุคใหม่ได้ทุกตัว ทำงานแบบ responsive ได้บนทุกขนาดหน้าจอ มันถูกออกแบบมาให้เรียกใช้แบบดาวน์โหลดผ่าน CDN ด้วยขนาดที่เล็กเพียง 27KB เมื่อบีบอัดแล้ว (แต่ใครจะเอาไฟล์มาโฮสต์เองก็ได้เช่นกัน)

MDL ยังมีเทมเพลตมาตรฐานสำหรับเว็บแบบที่พบบ่อยๆ เช่น บล็อก, เว็บบริษัท, เว็บที่เน้นบทความยาวๆ ให้เลือกใช้กันอีกด้วย นักพัฒนาเว็บท่านใดที่สนใจก็ลองไปดาวน์โหลดมาทดสอบกันได้ครับ

ที่มา - Google Developers

No Description

No Description

Get latest news from Blognone

Comments

By: way_cs16
ContributorWindows PhoneAndroidBlackberry
on 7 July 2015 - 09:00 #825263
way_cs16's picture

คือดีงาม

By: maoIndie
Ubuntu
on 7 July 2015 - 09:23 #825277
maoIndie's picture

มันต้องลอง

By: ttong on 7 July 2015 - 10:03 #825291

ต้องลอง !

By: ultramanbank
iPhoneWindows PhoneWindowsIn Love
on 7 July 2015 - 10:49 #825303

bootstrap ตายเลยแบบนี้

By: crucifier
iPhoneAndroidUbuntu
on 7 July 2015 - 11:45 #825319 Reply to:825303

ไม่ตายนะ แค่เพิ่ม theme เข้ามาก็ใช้ได้แล้ว เดี๋ยวคงมีคนทำมาปล่อยเองแหละ

By: Warizz
Android
on 7 July 2015 - 11:49 #825322
Warizz's picture

เอามาใช้ร่วมกับ boostrap มันจะตีกันมั้ยเนี่ย

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 11:49 #825323

ผมขัดใจอย่างเดียว เวอร์ชั่น PC นี่จะเหลือพื้นที่ด้านข้างไว้ทำไม ผมเจอเว็บแบบนี้ทีไรกดซูมเข้าจนเต็มพื้นที่ตลอด

By: Consolez
Android
on 7 July 2015 - 11:56 #825328 Reply to:825323

ความชอบต่างกันครับ ส่วนตัวไม่ชอบแบบเต็มหน้านะ PC ดูมันรกๆเกินไป

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 12:12 #825333 Reply to:825328

ผมว่าก็ดูไม่รกนะครับ คุณ Consolez พอมีตัวอย่างที่คุณดูแล้วว่ามันเยอะไปถ้าใช้แบบเต็มไหมครับจะได้ดูเป็นแนวทาง
ส่วนตัวผมชอบเต็มๆ พื้นที่แบบนี้มากกว่า
http://inet03.blogspot.com/2012/12/microsoft-expression-studio.html

By: 17November
ContributoriPhoneAndroidWindows
on 7 July 2015 - 12:47 #825345 Reply to:825333
17November's picture

กวาดสายตายากมากครับกว่าจะอ่านจบ

นี่ผมจอแค่ 21" ถ้ามากกว่านี้คงเหนื่อย อ่านวิกิผมยังต้องย่อเบราเซอร์ลงเลย

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 12:55 #825348 Reply to:825345

ถ้าแบบนี้คงความชอบต่างกันจริงๆ แหละครับ ผมชอบแบบวิกิเวลาอ่านได้กวาดสายตาลูกตาจะได้ไม่แช่งนิ่งๆ อยู่ตำแหน่งเดียวนานๆ

By: luna777
AndroidWindows
on 7 July 2015 - 14:36 #825389 Reply to:825345

การทำหน้าเว็บใหญ่ๆมีข้อดีตรงทำให้แสดงรูปภาพได้ให้เกือบ fit to screen ไม่ต้องถูกย่อให้ fit to webpage ที่ออกแบบมาสำหรับจอ 740p
ส่วนเรื่องตัวหนังสืออ่านยากก็ซอยแบ่งตารางไปทางแนวนอนสิ 2, 3, 6 ช่องแบ่งไปให้เหมาะสมกับขนาดจอของแต่ละคน

By: nrml
ContributorIn Love
on 7 July 2015 - 13:17 #825360 Reply to:825333
nrml's picture

มันอ่านยากมากครับถ้าเป็นเลย์เอาต์แบบนี้ ความเคยชินในการอ่านของคนมันไม่ได้ถูกวางไว้ให้อ่านอะไรยาวๆ ต่อเนื่อง ต้องวางให้เห็นเป็นก้อนๆ มองแล้วสามารถสแกนเนื้อหารวมได้เร็วๆ ครับ

By: Fasndee
ContributorAndroidWindows
on 7 July 2015 - 14:13 #825382 Reply to:825333
Fasndee's picture

ผมว่ามันเป็นเลย์เอาท์ที่เก่า (ไม่ทันสมัย) และใช้งานได้ไม่สะดวกกับบางคน (คิดว่าน่าจะกับคนส่วนใหญ่)

กรณีผมนี่ เจอเว็บแบนี้จะเปิดไว้ก่อนแล้วดูข้อมูลทำนองเดียวกันของเว็บอื่นที่เลย์เอาท์อ่านง่ายกว่านี้ทันทีอ่ะครับ

มันลากสายตายาวเกินไป ทำให้ล้าเร็วนะครับ คนเล่นเกมจะรู้ (หรือไม่รู้ตัวว่าทำไมตัวเองเมื่อยคอ กับปวดตา หรือมีอาการเพลียกับปวดหัว ลองเปลี่ยนมาใช้จอเล็กลง กวาดสายตาลดลง จะทำให้อาการพวกนี้หาย หรือลดลง)


https://www.facebook.com/ovwwwwvo

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 15:17 #825394 Reply to:825382

เรื่องเกมส์นี่ผมว่าไม่น่าใช่นะครับ อย่างเช่นผมเล่น Planetside 2 ก็ต้องมองทั่วทั้งจอให้ดีๆ อาศัยการกวาดสายตา(ไม่ใช่การขยับศรีษะนะครับ ถ้าขยับหัวแบบนั้นเล่นไม่จบ alert แน่นอน alert หนึ่งประมาณ 2 ชั่วโมง)

ส่วนตัวผมไม่ได้เห็นว่า Layout แบบใหม่ไม่ดีนะครับ แต่มันควรจะปรับขนาดตาม display ไปด้วย ไม่ใช่ถูกล๊อคไว้ด้วย max-width อย่างสมัยก่อนรองรับกันแค่ 800 x 600 พอมาเจอ display ใหม่ๆ อย่าง 1280 x 720 ก็ต้องมานั่งแก้ไขกันอีกถ้าไม่แก้ไขก็จะเกิดพื้นที่เหลือด้านข้าง

ดังนี้ตัวอย่างที่ผมยกขึ้นมาอาจจะไม่ค่อยดีซักเท่าไหรแต่ผมอยากจะสื่อว่าไม่ว่าหน้าจอขนาดใดก็ควรรักษา layout ให้ได้เช่น ถ้าแบ่งด้านกว้างออกเป็น 10 ส่วน แบ่งให้เป็นเนื้อหา 6 ส่วน navigator 3 ส่วน ปล่อยว่างเพื่อความสวยงามสบายตาอีก 1 ส่วน เมื่อ display กว้างขึ้นอัตราส่วนก็ควรจะเป็นเท่าเดิมไม่ใช่กลายเป็น เนื้อหา 4 ส่วน navigator 2 ส่วน แต่ส่วนปล่อยว่ากลับกว้างขึ้นเป็น 4 ส่วนครับ

By: ttong on 9 July 2015 - 10:00 #825865 Reply to:825333

ผมรู้สึกว่าแบบนี้
อ่านไม่สะดวกนะครับ ต้องหมุนคอกลับไปมา

By: PandaBaka
iPhoneAndroidWindows
on 7 July 2015 - 12:21 #825336 Reply to:825323
PandaBaka's picture

ขืนทำแบบนัั้นไปเจอพวกเอาจอ 21:9 มาต่อก็จบเห่ = =*)

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 12:25 #825340 Reply to:825336

ส่วนตัวผมไม่เคยใช้ 3 จอแบบเหล่า Master race ขอถามนะครับว่าเวลาใช้งาน Browser นั้นภาพจะถูกขยายจนครบ 3 หน้าจอเลยหรือว่าแบ่งโซนเต็มแค่จอใดจอหนึ่งครับ

By: PandaBaka
iPhoneAndroidWindows
on 7 July 2015 - 13:06 #825354 Reply to:825340
PandaBaka's picture

มันลากข้ามจอได้นะ แต่ถ้าปุ่มขยายปรกติจะเต็มแค่กรอปจอ

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 13:11 #825357 Reply to:825354

ถ้าแบบนั้น 21:9 ก็ไม่น่ามีปัญหาอะไรนี่ครับ ?
ที่คุณ PandaBaka โพสครั้งแรกนั้นห่วงว่าจะมีปัญหาอะไรหรือครับ ?

By: PandaBaka
iPhoneAndroidWindows
on 7 July 2015 - 14:12 #825377 Reply to:825357
PandaBaka's picture

21:9 ไม่ได้หมายถึง 3 จอเสมอไป แบบจอเดี่ยวๆ ก็มีขายครับ ลองนึงสภาพเอาตัวนี้ไปเปิดเว็ปแบบที่ไม่ได้ใส่ max-width ไว้สิ http://www.digitaltrends.com/computing/widen-your-resolution-and-wallet-with-the-these-ultra-wide-219-monitors/

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 15:03 #825391 Reply to:825377

ก็จริงครับเป็นปัญหาดังว่าพอสมควร แต่การใช้ max-width เองก็สร้างพื้นที่เหลือไม่น้อยเช่นกัน อย่างเช่นถ้า max-width:1000px; ก็จะเหลือพื้นที่ด้านข้างรวมกันอย่างน้อยกว่า 2000px สำหรับ 3440x1440 ซึ่งกลายเป็นว่าซื้อจอใหญ่มาแต่ก็ไม่ต่างอะไรกับจอเล็กๆ

By: PandaBaka
iPhoneAndroidWindows
on 7 July 2015 - 15:34 #825404 Reply to:825391
PandaBaka's picture

ถ้าทำแบบนั้น content มันจะเกินระยะกวาดสายตาของมนุษย์ธรรมดาน่ะสิครับ

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 16:33 #825423 Reply to:825404

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

ส่วนตัวผมคิดว่าตอนออกแบบเรามีฐาน display ในการออกแบบไว้ขนาดหนึ่งพอขนาดที่ใช้จริงต่างจากที่ขนาดฐานที่เราออกแบบไว้มันเลยมีปัญหาตามมา Responsive ส่วนใหญ่เท่าที่ผมเห็นก็ยังเป็นแบบ switch case อยู่ไม่น้อย layout แบบที่ผมยกตัวอย่างมาหรือแบบใช้ max-width ล็อคขนาดเองก็ยังตอบโจทย์ในการทำ Responsive ได้ไม่ครอบคลุมนัก ในความเห็นผมคิดว่าแนวทางการจัดวาง layout แบบที่ MS ทำให้ Windows 8 UI นั้นค่อนข้างแก้ปัญหาเรื่องนี้ได้ดี แทนที่จะเลื่อนเพจลงกลายมาเป็นเลื่อนไปด้านข้างทำให้เมื่อ display กว้างขึ้นก็จะมีพื้นที่ในการแสดง content มากขึ้นเช่นกัน

By: PandaBaka
iPhoneAndroidWindows
on 7 July 2015 - 17:01 #825432 Reply to:825423
PandaBaka's picture

ใช้ได้บางงานแต่ใช้ไม่ได้ทุกงาน (เจอพวก IR นี่จบเห่)
แถม content มันไม่ได้เยอะขนาดนั้นทุกเว็ปนิครับ =__=)
ปล. Responsive ใช้เป็นแบบ switch case น่ะถูกต้องแล้ว
เพราะรูปมันไม่ใช่พวก vector แถมติดเรื่อง UX ที่ออกแบบแต่ละขนาดจออีกต่างหาก

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 18:48 #825446 Reply to:825432

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

เรื่อง UX สำหรับแต่ละขนาดหน้าจอนั้นผมเห็นว่าเป็นผลพวงจากการมุ่งใช้แต่แบบ switch case เพราะ Responsive นั้นควรจะเป็นการออกแบบเพียงแบบเดียวแต่แบบนั้นสามารถปรับให้เข้ากับขนาด display ต่างๆ ได้ ไม่งั้นจะต่างอะไรกับสมัยก่อนที่ต้องออกแบบแยกแต่ละ device แต่ละ display ยิ่งรองรับมากยิ่งต้องออกแบบมายิ่งขึ้นจนกลายเป็นภาระหนักซึ่งถึงได้มีการริเริ่มการออกแบบ Responsive ไม่ใช่หรือครับ ถ้าเราต้องกลับไปออกแบบแยกแต่ละ device เหมือนเดิมแล้วเราจะมี Responsive เพื่ออะไรกัน

By: nrml
ContributorIn Love
on 7 July 2015 - 19:05 #825451 Reply to:825446
nrml's picture

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

By: PandaBaka
iPhoneAndroidWindows
on 7 July 2015 - 19:45 #825454 Reply to:825451
PandaBaka's picture

555 ถูกต้องครับ เราไม่ควรยึดหลัก Developer Experience เพราะสุดท้ายแล้วไอ้สิ่งที่เราทำมันคือของที่ให้ลูกค้าใช้ครับ Dev เขียนง่ายสบายแต่ไม่มีคนใช้ก็จบ ส่วนกรณีที่ว่าให้ใช้ SVG... คือมันกิน CPU แบบไม่คุ้มกับพลังงานที่เสียไปมากๆ ใช้เยอะๆ เว็ปอืดกันพอดี ยิ่งบนมือถือไม่อยากจะคิดเปิดเว็ปทีเครื่องร้อนฉึ่ง = =*)

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 20:02 #825460 Reply to:825454

"ผมว่าคุณคงลืมความหมายของคำว่า UX ไปนะครับ UX คือ User Experience ไม่ใช่ Developer Experience ครับ"
ผมไม่ลืมหรอกครับ แต่ผมคิดว่าคุณหยิบเรื่องนี้มาเป็นประเด็นเพราะคุณไม่พอใจผมมากกว่าต้องการสนทนาแลกเปลี่ยนกัน

และคุณ PandaBaka ทีแรกผมคิดว่าจะข้ามความเห็นของคุณ nrml ไปแต่พอเห็นคุณเห็นดีเห็นงามด้วยแบบนี้ผมก็ไม่มีอะไรจะสนทนาต่อแล้วละครับ ขออภัยที่ไปแสดงความเห็นว่าการออกแบบ switch case นั้นไม่ดีอย่างนู้นไม่ดีอย่างนี้

By: nrml
ContributorIn Love
on 8 July 2015 - 00:19 #825522 Reply to:825460
nrml's picture

ไม่รู้ว่าตรงไหนที่ทำให้คุณรู้สึกว่าผมไม่พอใจนะครับ เพราะผมก็คอมเมนต์ตอบกลับไป ตามที่ผมเข้าใจเห็นคุณยกคำว่า UX ขึ้นมาผมก็เลยอธิบายออกไป เพราะเท่าที่อ่านคุณกำลังมองด้วยสายตาของ Developer ครับ ไม่ใช่มุมมองของ User ที่ไม่สนใจคุณเอาเทคโนโลยีอะไรมาใช้ (ในที่นี้เห็นกำลังถกกันถึงเรื่อง switch case, responsive) ผมเองก็พยายามคุยอยู่ในประเด็น ไม่ได้มีเจตนาจะหาเรื่องเฉพาะบุคคล หากทำให้คุณรู้สึกไม่สบายใจก็ขอโทษไว้ตรงนี้เลยแล้วกันครับ

By: revensoft
Windows PhoneWindows
on 8 July 2015 - 01:27 #825532 Reply to:825522
  1. ผมไม่ได้เป็นคนยกคำว่า UX ขึ้นมา คุณ PandaBaka เป็นคนโพสขึ้นมาก่อนใน #825432
  2. คงเป็นความเข้าใจผิดของผมเองว่าคุณ PandaBaka นั้นเป็น Dev ผมเลยคุยแบบ Dev คุยกันหลังเบรคถ้าคุยกับ User ผมไม่นั่งสาธยายแนวคิดและเรื่องทางเทคนิคให้เมื่อยละครับ
  3. สมมุติระหว่าง Dev 2 คนกำลังคุยกันเรื่อง CSS แล้ว Dev อีกคนโพล่งเข้ามาถามว่า "พูดๆ กันมานะรู้ไหม CSS คืออะไร แล้วคิดเหรอว่า User จะสนใจเรื่องหยุ่มหยิ๋มพวกนี้ ของเก่ามันยังใช้ได้ก็ใช้ๆ ไป"

ผมคงไม่สนทนาเรื่องนี้ต่อแล้วละครับเพราะผมไม่รู้ว่ากำลังคุยกับ User หรือ Dev ดังนี้ผมไม่คุยอะไรเกี่ยวกับเชิงเทคนิคและแนวคิดเยอะๆ จะดีกว่า

By: PathSNW
iPhoneAndroidSymbianWindows
on 7 July 2015 - 12:22 #825338 Reply to:825323
PathSNW's picture

เพราะจอเป็น 16:9+ หรือเปล่า เว็บประเภทนี้ถ้ามาเปิดบน 4:3 ก็เต็มจอพอดีหมดนะ

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 12:30 #825342 Reply to:825338

ถ้ากำหนด dimension เป็นเปอร์เซ็นไม่ว่าจอขนาดไหนก็น่าจะเปิดออกมาเต็มจอพอดีเหมือนกันหมดนี่ครับ ?

By: 17November
ContributoriPhoneAndroidWindows
on 7 July 2015 - 12:45 #825346 Reply to:825342
17November's picture

ผมว่าเขาจงใจนั่นแหละครับ

ประมาณว่า width:100%; max-width:900px; อะไรประมาณนั้น คือไม่ให้มันกว้างไปเพราะอ่านยาก

By: revensoft
Windows PhoneWindows
on 7 July 2015 - 13:05 #825353 Reply to:825346

ไม่น่าใช่ครับ เช่นจอ 1920x1080 กับ 1280x720 นั้นพื้นที่ต่างกันมาก ถ้าทำมาพอดี 720p คนใช้ 1080p ก็จะได้ตัวหนังสือเล็กๆ กระจุกกันอยู่กลางหน้าจอต้องซูมเข้าเพื่อให้อ่านง่ายอยู่ดี
ผมเข้าใจว่าตอนแรกนั้นออกแบบให้อ่านง่ายกันอยู่แล้ว แต่เมือขนาด display ขยายขึ้น ตัวเว็บกลับไม่สามารถรักษารูปแบบที่ออกแบบมาไว้ได้ทำให้ยิ่งจอใหญ่ยิ่งมีพื้นที่ด้านข้างเหลือมากยิ่งขึ้นและตัวอักษรยิ่งเล็กลงเรื่อยๆ จนอ่านได้ยากแม้จะปรับขนาดอักษรตามขนาดของ display แล้วแต่ถ้าพื้นที่แสดงนั้นยังจำกัดไว้แบบที่คุณ 17November ยกตัวอย่างมาหน้าจอขนาดใหญ่อย่าง 1080p ซึ่งไม่ได้อยู่ในฐานรองรับนั้นก็จะมีพื้นที่ในการแสดงที่น้อยเกินไปอยู่ดีครับ

By: nat3738
ContributorAndroidRed HatUbuntu
on 7 July 2015 - 21:52 #825490 Reply to:825323

ก็ถูกแล้วหรือเปล่าครับ? ถ้าคุณไม่ชอบให้มีที่เหลือ ก็ซูมเอา ถ้าชอบให้มีที่ว่าง (พวกจอใหญ่ๆ ความหนาแน่นพิกเซลต่ำๆ) ก็ไม่ต้องซูม ผมเข้าใจว่าซูมมันออกแบบมาเพื่ออย่างนี้อยู่แล้วนะ

แต่บางเว็บพวกซูมแล้วขยายแต่ฟอนต์ ไม่ขยายขนาดเลย์เอาท์ด้วยนี่ก็อีกเรื่อง

By: LuvStry
ContributorAndroid
on 7 July 2015 - 22:59 #825505 Reply to:825323
LuvStry's picture

max width 1200 ครับ 12 grid pad ข้างละ 15px ผมใช้แบบนี้ตลอด


Blognone = 138.1 news/w เยอะมากๆ

By: Zentana
iPhoneWindowsIn Love
on 7 July 2015 - 13:24 #825366

น่าลองใช้งาน

By: redeian on 8 July 2015 - 04:19 #825538

ผมว่า MDL ไม่น่าจะพัฒนาต่อจาก Polymer นะ เพราะ Polymer มี Paper Element อยู่แล้ว
MDL เป็นแค่ HTML, Javascript, CSS เฉยๆ แค่อาจใช้งานร่วมกับ Polymer project ได้มากกว่า