28Nov, 2023
Language blog :
Thai
Share blog : 
28 November, 2023
Thai

วิธีการเลือก Device และขนาดหน้าจอ ในการออกแบบสำหรับ Software Development

By

4 mins read
วิธีการเลือก Device และขนาดหน้าจอ ในการออกแบบสำหรับ Software Development

ในการออกแบบ Software ต่าง ๆ นั้น หากเป็นการออกแบบที่เจาะจงในเฉพาะ Device (อุปกรณ์) หรือเฉพาะทางมาก ๆ นั้น การออกแบบจะต้องอ้างอิงจากขนาดหน้าจอของ Device ที่ผู้ใช้งานส่วนใหญ่ใช้จริง ๆ ตามหน้างานหรือเฉพาะธุรกิจและอุตสาหกรรมนั้น

แต่เนื่องจากปัจจุบันนี้การใช้งานของผู้คนทั่วไปนั้น จะใช้ Device ที่แตกต่างและหลากหลายขนาด การออกแบบหน้าจอการใช้งานแบบ Responsive Design จึงเป็นทางออกที่นิยมนำมาใช้ เพื่อปรับแก้ปัญหาความแตกต่างของหน้าจอในปัจจุบันให้มีศักยภาพในการใช้งานมากขึ้น

 

Responsive Design คืออะไร

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

 

ความแตกต่างของ Responsive กับ Adaptive Design

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

https://www.altamira.ai/wp-content/uploads/2022/05/responsive-vs-adaptive-800x424.png.webp

ข้อดีและข้อเสียของการออกแบบระหว่าง 2 รูปแบบนี้คือ Responsive Design นั้นจะใช้ต้นทุนและเวลาในการพัฒนาน้อยกว่า Adaptive Design เนื่องจากเป็นการออกแบบและพัฒนาเพียงครั้งเดียวเพื่อตอบสนองการแสดงผลที่แตกต่างกัน

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

แต่ด้วยปัจจุบันผู้ใช้งานใช้ Device ที่แตกต่างกันมาก แม้แต่โทรศัพท์มือถือก็ยังมีขนาดที่แตกต่างกัน หลากหลายรูปแบบตามที่วางขายกันในท้องตลาดปัจจุบัน ดังนั้นการออกแบบ Responsive Design จึงเป็นที่นิยมมากกว่าที่จะใช้แบบ Adaptive Design แต่ก็ไม่ได้หมายความว่า จะไม่มีใครที่พัฒนาระบบด้วย Adaptive Design เลย ทั้งนี้ทั้งนั้นก็ขึ้นอยู่กับความคุ้มค่ากับผลที่จะได้มาจากการพัฒนาระบบออกมานั่นเอง

 

ขนาดหน้าจอใช้งานทั่วไปในปัจจุบัน

ขนาดของหน้าจอปัจจุบันนั้นจะแบ่งได้ตาม Device หลัก ๆ 3 รูปแบบ ที่ผู้ใช้ทั่วไปใช้งาน คือ Desktop, Tablet และ Mobile ซึ่งมีข้อมูลการสรุปขนาดหน้าจอต่าง ๆ ได้ดังนี้ 


 

จากสถิติเบื้องต้นจะเห็นว่าการเข้าใช้งานด้วย Mobile มีจำนวนมากที่สุด ตามมาด้วย Desktop และน้อยสุดที่ Tablet  ซึ่งแต่ละ Device ก็จะมีความแตกต่างของขนาดหน้าจอกันไปอีกหลายขนาด

 

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

 

 

ในตัวอย่างจะเห็นว่าการวาง Space ในการออกแบบไว้ที่ 340px จะสามารถรองรับการแสดงผลของหน้าจอ Mobile ที่ขนาดเล็กและใหญ่ได้ทั้งหมด ซึ่งทั้งนี้เราสามารถเลือกขนาด Canvas ในการออกแบบหน้าจอได้ตามที่เราต้องการ ขึ้นอยู่กับว่าธุรกิจหรือกลุ่มผู้ใช้งานของเรานั้นใช้ขนาดหน้าจอเท่าไรมากที่สุด

 

 

โดยการออกแบบ Desktop นั้นก็เช่นกันโดยเราสามารถออกแบบ Space ให้สามารถแสดงผลได้ในหน้าจอทุกขนาด โดยในตัวอย่างจะใช้ความกว้างที่ 1060px ซึ่งสามารถรองรับหน้าจอเล็กได้ถึง 1280px  

 

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

 

 

แน่นอนว่าการออกแบบหน้าจอที่มากขึ้นหลายขนาดนั้นจะเพิ่มงานให้ผู้ออกแบบ แต่หากเราคำนึงถึง Device อื่น ๆ ในระหว่างการออกแบบนั้น Layout ที่เราออกแบบมาจะสามารถนำไปประยุกต์ใช้กับทุก Device ได้ และในการพัฒนาระบบขึ้นมานั้นจะใช้ต้นทุนน้อยกว่าการออกแบบแบบ Adaptive Design แน่นอน

 

แนวทางที่ดีที่สุดในการเลือกขนาดหน้าจอในการออกแบบ

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

 

เข้าใจรูปแบบการใช้งานบนหน้าจอ

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

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

 

ออกแบบ Padding เผื่อหน้าจอที่เล็กกว่า 1 ไซซ์

ส่วนมากเวลาที่นักออกแบบทำการออกแบบนั้นจะเลือกออกแบบ Device ละ 1 ไซซ์ เช่น Desktop 1 แบบ, Mobile 1 แบบ และ Tablet 1 แบบ โดยมีการออกแบบให้มี Padding ระยะขอบซ้ายขวาตามสัดส่วนหน้าจอต่าง ๆ ทั้งนี้บางครั้งการวาง Padding ให้กว้าง และลด Space ตรงกลางลงมาเล็กน้อยเพื่อให้หน้าจอที่เล็กกว่าการออกแบบ สามารถแสดงผลได้ด้วยจึงเป็นทางเลือกอีก 1 วิธีที่สามารถนำมาใช้ได้

 

ความคุ้มค่าในการพัฒนา

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

 

References:

 https://www.altamira.ai/blog/common-screen-sizes-for-responsive-web-design/

Written by
Ya Piya
Ya Piya

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

24
June, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
24 June, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
24
June, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
24 June, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
24
June, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
24 June, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.