ว่าด้วยเรื่อง Size และ Density ของหน้าจอ

        กลับมาเรื่องของดีไซน์กันต่อบ้าง คราวนี้ก็เป็นเรื่องทฤษฎีเป็นหลักเหมือนเดิม คราวนี้ก็ขอเจาะลึกในเรื่องของหน้าจอที่เป็นปัญหาระดับชาติของแอนดรอยด์ เนื่องจากการที่อุปกรณ์แอนดรอยด์มีการ Fragment มากเกินไป หรือก็คือความแตกต่างของตัวเครื่องที่มีเยอะมากมาย โดยเฉพาะขนาดหน้าจอจะเห็นว่าขนาดหน้าจอบนแอนดรอยด์มีเยอะมาก ความละเอียดก็ด้วย อย่างเช่นขนาดหน้าจอ 1920 x 1080 บนหน้าจอขนาด 4.7 นิ้วกับ 5 นิ้ว

        มีหลายๆคนบอกกับเจ้าของบล็อกว่า แอนดรอยด์ออกแบบตัวระบบมาในเรื่องนี้ไม่ดี เพราะบน Windows ยังไม่เห็นจะมีปัญหาแบบนี้เลย โปรแกรมมันก็รองรับได้

        อาจจะดูเหมือนใช่ แต่จริงๆแล้ว Windows ไม่ได้รองรับเรื่องนี้เลย พวกโปรแกรมทั้งหมด สร้างมาที่ขนาดตายตัว ถ้าจอเล็กก็จะมีแถบเลื่อนให้ ถ้าใหญ่ก็แค่ขยาย ซึ่งไม่ใช่การทำงานแบบ Full Screen จริงๆเลย ถ้าการทำงานแบบ Full Screen จริงๆ ให้นึกถึงพวกเกม เปิดทีเต็มทั้งหน้าจอ แต่ถึงกระนั้นตัวเกมบน Windows ก็ไม่ได้รองรับกับหน้าจอทุกขนาดเสมอไป เพราะบางเกมปรับความละเอียดได้ไม่ครบทุกขนาด มีแต่ที่ผู้ทำกำหนดเท่านั้น และอีกอย่างหนึ่งก็คือให้ลองสังเกตุเครื่องที่จอเล็กประมาณ 13 นิ้ว แต่ใช้ความละเอียด 1920 x 1080 ได้ ถ้าใครเคยเล่น จะเห็นว่า UI ต่างๆบนจอ จะมีขนาดเล็กตามไปด้วย เนื่องมาจากการที่จอเล็กแต่ความละเอียดสูงนั่นเอง

        แต่สำหรับบนแอนดรอยด์ต่อให้ความละเอียดสูง แล้วจอขนาดเท่าไรก็ตาม ก็จะไม่เกิดปัญหา UI บนจอมีขนาดเล็กเลย เพราะการออกแบบตัวระบบนี่ล่ะ ดังนั้นการออกแบบหน้า UI ของแอนดรอยด์ จึงต้องมีเรื่องนี้เพิ่มเข้ามา

ขนาดของหน้าจอ (Size)

        อาจจะรู้กันแล้วว่าระบบของแอนดรอยด์ได้มีการแบ่งขนาดหน้าจอ 4 ขนาด คือ small, normal, large และ xlarge ซึ่งแบ่งตามขนาดจอฝั่งที่สั้นที่สุดในหน่วย dp โดยมีวิธีในการคำนวณ dp จากบทความนี้เลย ลองอ่านดูเพื่อเพิ่มความเข้าใจ [Android Design] แท้จริงแล้วหน่วย dp คืออะไร?

                • small จะมีขนาดจออย่างน้อย 426 x 320 dp

                • normal จะมีขนาดจออย่างน้อย 470 x 320 dp

                • large จะมีขนาดจออย่างน้อย 640 x 480 dp

                • xlarge จะมีขนาดจออย่างน้อย 960 x 720 dp

        เมื่อพิจารณาขนาดดังกล่าว จะเห็นว่า Tablet และ Phone บางรุ่น ไปซ้อนทับกันในขนาด large แต่นั่นก็ไม่ใช่ปัญหาอะไรมากนัก จะเห็นว่าขนาด small, normal และ large จะเป็นขนาดสำหรับ Phone และขนาด large จะเป็นสำหรับ Tablet ที่มีขนาดเล็ก และขนาด xlarge จะเป็นสำหรับ Tablet ขนาดใหญ่ (ขอแยก Tablet เป็นสองขนาดนะ เพราะมีผลต่ออย่างอื่นด้วย)

ความหนาแน่นของหน้าจอ (Density)

        เจ้าของบล็อกรู้สึกแปลกๆเล็กน้อยที่จะใช้คำว่าความหนาแน่นแฮะ แต่เอาจริงๆมันก็คือความหนาแน่นของเม็กพิกเซลที่อยู่บนจอนั่นแหละ มีหน่วยเป็น dpi หรือ Dot Per Inch ซึ่งก็คือจำนวนพิกเซลต่อ 1 นิ้ว

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

        สำหรับความหนาแน่นของหน้าจอก็จะแบ่งออกเป็น 4 แบบ คือ ldpi, mdpi, hdpi และ xhdpi โดยจะแบ่งออกตามค่า dpi

                • ldpi : น้อยกว่า 140 ลงมา (ไม่รวม 140 นะ ต้องน้อยกว่า)

                • mdpi : มากกว่าหรือเท่ากับ 140 และน้อยกว่า 200

                • hdpi : มากกว่าหรือเท่ากับ 200 และน้อยกว่า 280

                • xhdpi : มากกว่าหรือเท่ากับ 280 ขึ้นไป

        ผู้ที่หลงเข้ามาอ่านอาจจะรู้มาบ้างแล้วว่ามี 4 แบบ แต่จริงๆแล้ว นี่คือ Density แบบเก่า ที่ตอนนี้ได้เปลี่ยนไปแล้ว ในล่าสุดนี้จะแบ่งค่าความหนาแน่นของจอออกเป็น 6 แบบ คือ ldpi, mdpi, tvdpi, hdpi, xhdpi และ xxxhdpi เพิ่มมาอีกสามขนาด

        สำหรับ tvdpi เกิดมาจากช่องว่างระหว่าง mdpi กับ hdpi มากเกิน และมี Tablet ที่มีหน้าจอ 1280 x 720 หรือ 1280 x 800 มี DPI ประมาณ 210 ซึ่งจะเกิดปัญหาในการออกแบบหน้าจอของ Tablet ขนาด 7 นิ้ว ดังนั้น Tablet ขนาด Large จะไม่มีตัวไหนที่เป็น hdpi เลย มีแต่ mdpi และ tvdpi หรือไม่ก็ข้ามไปเป็น xhdpi ทันที

        สำหรับ xxhdpi เกิดมาจากการที่ผู้ผลิตพัฒนาจอความละเอียดมากขึ้น ระบบแอนดรอยด์ก็เลยเตรียมค่าสำหรับ xxhdpi ไว้ก่อนหน้าแล้ว เพื่อรองรับกับพวก Phone ที่มีความละเอียดจอเป็น Full HD

        สำหรับในตอนนี้ยังไม่มี Tablet ที่มี Density เป็น xxhdpi นะ เพราะ Nexus 10 ที่มีความละเอียดสูงสุด 2560 x 1600 ยังแค่ xhdpi ต้องเป็น Tablet 10 นิ้ว ที่ความละเอียด 3840 x 2160 ขึ้นไป หรือ Tablet 7 นิ้ว ที่ความละเอียด 2560 x 1440 ขึ้นไป ถึงเป็น xxhdpi

        โดย tvdpi จะถูกนำเข้ามาใช้ตั้งแต่ Android 3.2 ขึ้นไป ส่วน xxhdpi จะมีเข้ามาใน Android 4.1 หรือ Jelly Bean (จริงๆแล้ว xhdpi ก็เริ่มนำเข้ามาใช้ใน Android 2.3 เอง )

        ส่วน xxxhdpi มาพร้อมกับ Android 4.4 ซึ่งทาง Android ได้ทำเตรียมพร้อมไว้ เพราะในตอนนี้มือถือที่มี Density ระดับ xxhdpi เป็นเรื่องปกติแล้ว (แม้แต่ Nexus 5 ก็เช่นกัน) และเมื่อมีการแข่งขันทางเทคโนโลยีมือถือในรุ่นใหม่ๆมากขึ้นเรื่อยๆ จึงไม่แปลกเลยที่จะมีมือถือที่มีหน้าจอความละเอียดสูงกว่า 1920x1080 จึงทำให้ xxxhdpi ถูกกำเนิดขึ้นมาเพื่อรับมือกับความละเอียดระดับนี้

        เมื่อมีการเปลี่ยนแปลงและเพิ่มขนาดเข้าไป Density แบบใหม่ก็จะได้ดังนี้

                • ldpi : น้อยกว่า 140 ลงมา (ไม่รวม 140 นะ ต้องน้อยกว่า)

                • mdpi : มากกว่าหรือเท่ากับ 140 และน้อยกว่า 186.5

                • tvdpi : มากกว่าหรือเท่ากับ 186.5 และน้อยกว่า 227

                • hdpi : มากกว่าหรือเท่ากับ 227 และน้อยกว่า 280

                • xhdpi : มากกว่าหรือเท่ากับ 280 และน้อยกว่า 400

                • xxhdpi : มากกว่าหรือเท่ากับ 400 และน้อยกว่า 560

                • xxxhdpi : มากกว่า 560 ขึ้นไป

Size และ Density กับการออกแบบ

        ทีนี้เวลาจะออกแบบ UI ก็ต้องพิจารณาถึง Size และ Density ด้วย เมื่อหาความเป็นไปได้ของ Size และ Density จะได้ 4 x 7 = 35 แบบ

        small-ldpi, small-mdpi, small-tvdpi, small-hdpi, small-xhdpi, small-xxhdpi, small-xxxhdpi

        normal-ldpi, normal-mdpi, normal-tvdpi, normal-hdpi, normal-xhdpi, normal-xxhdpi, normal-xxxhdpi

        large-ldpi, large-mdpi, large-tvdpi, large-hdpi, large-xhdpi, large-xxhdpi, large-xxxhdpi

        xlarge-ldpi, xlarge-mdpi, xlarge-tvdpi, xlarge-hdpi, xlarge-xhdpi, xlarge-xxhdpi, xlarge-xxxhdpi

        ผู้ที่หลงเข้ามาอ่านอาจจะอึ่งว่าต้องมานั่งทำทั้ง 35 รูปแบบเลยหรือ? ซึ่งในความเป็นจริงแล้ว บางอันก็สามารถตัดออกไปได้เหมือนกัน เพราะไม่มีผู้ผลิตรายไหนบ้าจี้ทำมือถือที่มีขนาดจอ 3 นิ้ว มีความละเอียด 800 x 480 (small-xhdpi) อยู่แล้ว จอมันเล็กเกิน จึงไม่มีความจำเป็นต้องทำความละเอียดให้สูงขนาดนั้น และ large-small จะเป็นสำหรับ Tablet รุ่นเก่าๆ 7 นิ้ว 800 x 480 ถ้าไม่ซีเรียสว่าแอปฯ ต้องรองรับเครื่องเก่าๆพวกนี้ก็ตัดออกได้

        เพราะงั้นก็ตัดอันที่ไม่จำเป็นออกก็ได้เช่นกัน ก็จะเหลือแค่นี้

        ถึงแม้ว่าจะตัดอันที่ไม่จำเป็นออกแล้ว แต่ว่าก็ยังเยอะอยู่ดี ซึ่งจริงๆแล้วเจ้าของบล็อกมีวิธีที่ไม่ต้องทำให้ครบทุกขนาด แต่เจ้าของบล็อกยังไม่อธิบายนะ ไว้คราวหน้า เดี๋ยวเยอะ เพียงแค่อยากจะให้รู้ถึงขนาดหน้าจอที่เป็นไปได้ทั้งหมด เพื่อให้เข้าใจก่อนว่าหน้าจอมีการแบ่งออกเป็นแบบนี้

        ขอยกตัวอย่างจากเครื่องจริงๆบ้างว่ามี Size และ Density เป็นยังไง เพื่อให้ผู้ที่หลงเข้ามาอ่านเข้าใจวิธีการดู Size และ Density มากขึ้น เวลาดูก็ให้เทียบจากตาราง Size และ Density ที่อธิบายข้างบนนะ ส่วนวิธีการหาค่า Density ก็ให้ใช้เว็ปนี้ช่วยคำนวน DPI Calculator วิธีคิด dpi จริงๆก็มีนะ แต่ขี้เกียจอธิบาย เดี๋ยวบทความจะยาว

        สำหรับ Samsung Galaxy Y จะเห็นว่ามีขนาดหน้าจอแค่ 3 นิ้ว คำนวณ Density ของจอออกมาจะได้เป็น 133.33 dpi ก็จะเป็น ldpi สำหรับขนาดหน้าจอ 320 x 240 px เมื่อคำนวณเป็น dp จะได้เป็น 426.67 x 320 dp จึงเป็น small สรุปคือเป็นเครื่องขนาด small-ldpi

        สำหรับ LG Nexus 4 จะเห็นว่าขนาดหน้าจอเป็น 4.7 นิ้ว คำนวณ Density ได้เป็น 317.60 dpi ก็จะคือ xhdpi สำหรับขนาดหน้าจอ 1280 x 768 px เมื่อคำนวณเป็น dp จะได้ 640 x 384 dp จึงเป็น normal ดังนั้นก็สรุปได้ว่าเป็น normal-xhdpi

        สำหรับ Galaxy Note 10.1 มีขนาดหน้าจอ 10.1 นิ้ว พอคำนวณ Density ได้แค่ 149.45 dpi จะได้เป็น mdpi และมีขนาดหน้าจอ 1280 x 800 px เมื่อคำนวณเป็นหน่วย dp จะได้เป็น 1280 x 800 dp จึงมีขนาดเป็น xlarge ดังนั้นสรุปได้ว่าเป็น xlarge-mdpi

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

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

        สำหรับบทความนี้จะมีเรื่องต่ออีกเรื่องหนึ่งด้วยนะ [Android Design] แท้จริงแล้วหน่วย dp คืออะไร? จะได้เข้าใจในเรื่องการออกแบบแอปฯ มากขึ้น