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

อ้างอิงจาก Statesman ปริมาณการใช้งานบนมือถือเป็นผู้รับผิดชอบ 52.64% ของการเข้าชมทั่วโลกในปี 2017 ซึ่งหมายความว่าเว็บไซต์ ไม่ เหมาะสำหรับอุปกรณ์มือถือคือ สูญเสียการจราจรไปประมาณครึ่งหนึ่ง . ภายในสิ้นปี 2018 คาดว่าจะมีส่วนแบ่งการเข้าชมทั่วโลกสำหรับอุปกรณ์เคลื่อนที่ จะเติบโตเป็น 79% ซึ่งเพิ่มขึ้นเป็นพิเศษ

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

คุณสามารถทำการทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่ของ Google ได้ ที่นี่ .

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

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

ในการออกแบบเว็บไซต์ที่สามารถแข่งขันบนอินเทอร์เน็ตในปัจจุบัน นักออกแบบเว็บไซต์ ต้อง เป็นผู้เชี่ยวชาญที่ การออกแบบเว็บที่ตอบสนอง (RWD) ควรเริ่มจากตรงไหน?

แนวทางแรกสำหรับมือถือในการออกแบบเว็บไซต์ที่ตอบสนอง

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

1. เว็บไซต์บนอุปกรณ์เคลื่อนที่มีข้อกังวลเกี่ยวกับการใช้งานมากขึ้น (ส่วนใหญ่เกิดจากการไม่มีหน้าจออสังหาริมทรัพย์) ดังนั้นจึงมีประโยชน์และมีประสิทธิภาพมากขึ้นสำหรับการมุ่งเน้นไปที่การออกแบบอุปกรณ์เคลื่อนที่เป็นหลัก
2. ง่ายกว่า ไต่ขึ้น เวอร์ชันมือถือมากกว่าที่เป็นอยู่ ลดขนาดลง เวอร์ชันเดสก์ท็อป (อีกครั้งเนื่องจากไม่มีพื้นที่บนเว็บไซต์บนอุปกรณ์เคลื่อนที่)
3. การออกแบบเว็บสำหรับอุปกรณ์เคลื่อนที่เป็นอันดับแรกช่วยในการประเมินสิ่งที่จำเป็นต่อการมองเห็นและใช้งานได้อีกครั้ง

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

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

เราจะมาดูตัวอย่างการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ในอีกสักครู่ สำหรับตอนนี้เรามาดูกันว่าอุปกรณ์ขนาดหน้าจอและเว็บเบราว์เซอร์ใดที่เกี่ยวข้องกันในปัจจุบัน

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

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

• 360x640 (มือถือขนาดเล็ก): 22.64%
• 1366x768 (แล็ปท็อปโดยเฉลี่ย): 11.98%
• 1920x1080 (เดสก์ท็อปขนาดใหญ่): 7.35%
• 375x667 (มือถือโดยเฉลี่ย): 5%
• 1440x900 (เดสก์ท็อปเฉลี่ย): 3.17%
• 720x1280 (มือถือขนาดใหญ่): 2.74%

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

ตัวอย่างเช่นความละเอียด 360x640 (ซึ่งส่วนใหญ่สอดคล้องกับอุปกรณ์ Samsung ที่ใช้ Android) เพิ่มขึ้น 5.43% ในปีที่แล้ว นักออกแบบสามารถใช้ข้อมูลเชิงลึกที่มีค่าเช่นนี้เพื่อตัดสินใจเกี่ยวกับจุดพักที่ตอบสนองหลักก่อนที่จะเริ่มออกแบบเว็บไซต์

เว็บเบราว์เซอร์ใดที่เป็นที่นิยมในปัจจุบัน

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

งบกระแสเงินสดจากงบดุลและงบกำไรขาดทุน

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

นี่คือรายละเอียดทั่วโลกของ ส่วนแบ่งการตลาดของเว็บเบราว์เซอร์ สำหรับมือถือและเดสก์ท็อป

• Chrome: 55.04%
• ซาฟารี: 14.86%
• UC เบราว์เซอร์: 8.69%
• Firefox: 5.72%
• โอเปร่า: 4.03%
• Internet Explorer: 3.35%

การออกแบบที่ตอบสนองไม่ได้เป็นเพียงแค่การ“ ทำให้ทุกอย่างลงตัว” เท่านั้น แต่ยังเกี่ยวกับการปรับให้เข้ากับความสามารถของฮาร์ดแวร์อุปกรณ์และเว็บเบราว์เซอร์ เช่นเดียวกับ ความละเอียดของอุปกรณ์ ตัวอย่างหนึ่งอาจเป็นได้ในขณะที่ Google Chrome รองรับคุณสมบัติ CSS overscroll-behavior: (ซึ่งกำหนดสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้เลื่อนไปที่ขอบวิวพอร์ตแรงเกินไป) นั่นคือ ไม่รองรับในเว็บเบราว์เซอร์อื่น ๆ .

แนวทางปฏิบัติที่ดีที่สุดในการออกแบบที่ตอบสนอง

ขจัดแรงเสียดทาน

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

เมื่อเราสร้างจนถึงเวอร์ชันแท็บเล็ต (และเวอร์ชันเดสก์ท็อปในภายหลัง) เราสามารถเริ่มคิดถึงวัตถุประสงค์รองและ microinteractions , กระแสของผู้ใช้ และ CTA (คำกระตุ้นการตัดสินใจ) ที่ทำให้วัตถุประสงค์ของผู้ใช้บรรลุได้ สิ่งที่สำคัญกว่าคือเรา มุ่งเน้นไปที่วัตถุประสงค์หลักของผู้ใช้ก่อน และ ขจัดแรงเสียดทานที่ไม่จำเป็น ที่ไม่ช่วยทั้งวัตถุประสงค์หลักหรือวัตถุประสงค์รอง

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

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

การออกแบบสำหรับ Thumbs

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

ลองดูตัวอย่างบางส่วน:

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

การอ่านที่แนะนำ: คู่มือพื้นฐานสำหรับการใช้งานมือถือ .

ใช้ประโยชน์จากฮาร์ดแวร์ดั้งเดิมของอุปกรณ์พกพา

ฮาร์ดแวร์มือถือ (เช่นกล้องของอุปกรณ์หรือบริการ GPS) ไม่ได้สงวนไว้สำหรับแอปที่มาพร้อมเครื่องโดยเฉพาะและดังที่ได้กล่าวไว้ก่อนหน้านี้การออกแบบเว็บที่ตอบสนองไม่ได้เป็นเพียงแค่“ การทำให้ทุกอย่างลงตัว” นอกจากนี้ยังเกี่ยวกับการปรับให้เข้ากับความสามารถของอุปกรณ์ ในกรณีของการออกแบบเว็บบนอุปกรณ์เคลื่อนที่เนื่องจากอุปกรณ์เคลื่อนที่มีกล้องที่ใช้งานง่ายการโต้ตอบบางอย่างเช่นการป้อนข้อมูลจะทำได้ง่ายกว่าบนหน้าจอขนาดเล็กตราบใดที่เว็บไซต์ใช้ประโยชน์จากฮาร์ดแวร์ที่มีอยู่

ลองดูตัวอย่างบางส่วน:

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

สร้าง Layouts Fluid / Adaptive ตามค่าเริ่มต้น

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

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

เรียนรู้วิธีเขียนโค้ดใน c

โปรดคำนึงถึงเคล็ดลับเหล่านี้เมื่อออกแบบเค้าโครงที่ลื่นไหล / ปรับเปลี่ยนได้:

• หน่วยเปอร์เซ็นต์จะช่วยให้องค์ประกอบเป็นของเหลว
• การตั้งค่าความกว้างต่ำสุดและสูงสุดสามารถเปิดใช้สถานการณ์ 'แต่อย่าให้เล็กลง / ใหญ่ไปกว่านี้'
• รูปแบบภาพ SVG สามารถปรับขนาดขึ้นและลงได้โดยไม่สูญเสียคุณภาพและไม่ขึ้นกับความละเอียด (ตรงข้ามกับ JPG และ PNG ซึ่งไม่ใช่)

อย่าลืมเกี่ยวกับการวางแนวนอน

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

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

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

จำไว้ว่าวิชาการพิมพ์สามารถตอบสนองได้เช่นกัน

ถึงแม้ว่า นักออกแบบ UX โดยทั่วไปจะใช้หน่วยพิกเซลในการออกแบบเว็บไซต์บนเว็บจริงจุดเดียวไม่จำเป็นต้องเท่ากับพิกเซลอีกต่อไปเนื่องจากอุปกรณ์ต่าง ๆ มีความละเอียดที่แตกต่างกัน ตัวอย่างเช่น iPhone X มี 458 PPI (Pixels Per Inch) ดังนั้นเมื่อขนาดพิกเซลเล็กลงเราจึงสามารถบรรลุกราฟิกที่คมชัดขึ้นในพื้นที่ทางกายภาพเดียวกัน (Apple เรียกเทคโนโลยีนี้ว่า“ Retina” ส่วน Android เรียกสิ่งนี้ว่า “ hDPI”)

ซึ่งหมายความว่าขนาดตัวอักษร 16px จะดูใหญ่ขึ้นหรือเล็กลงในบางอุปกรณ์ขึ้นอยู่กับความละเอียด โดยทั่วไปนักพัฒนาเว็บจะ ใช้หน่วย em เพื่อกำหนดขนาดตัวอักษร ซึ่งเป็นหน่วยตอบสนองประเภทหนึ่งที่ 1em เท่ากับ 1 พอยต์

ออกแบบเครื่องมือแฮนด์ออฟเช่น เซปลิน , Sympli , Marvel และ InVision สามารถช่วยนักออกแบบร่วมมือกับนักพัฒนาในเรื่องที่เป็นความรับผิดชอบร่วมกัน ในขณะที่นักออกแบบดำเนินการออกแบบและนักพัฒนาดำเนินการโค้ดโดยรวมแล้วเวิร์กโฟลว์การออกแบบผลิตภัณฑ์เป็นความพยายามของทีมที่ต้องการการสื่อสารที่มั่นคง

คำแนะนำในการเพิ่มประสิทธิภาพการออกแบบที่ตอบสนองและแนวทางปฏิบัติที่ดีที่สุด

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

ขี้เกียจโหลดรูปภาพและวิดีโอที่ไม่สำคัญ

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

การโหลดตามเงื่อนไข

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

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

ภาพที่ตอบสนอง

ดังที่ได้กล่าวไว้ก่อนหน้านี้อุปกรณ์บางอย่างจะแสดงพิกเซลต่อนิ้วมากขึ้นซึ่งอาจส่งผลให้ภาพเบลอได้หากไม่ได้ส่งออกด้วยความละเอียดที่ถูกต้อง ขึ้นอยู่กับความละเอียดของอุปกรณ์บางส่วนจะต้องใช้ภาพที่มีขนาดสองเท่า (@ 2x), สามเท่า (@ 3x) และขนาดสี่เท่า (@ 4x) ขณะนี้เว็บเบราว์เซอร์สนับสนุนองค์ประกอบซึ่งจะเลือกความละเอียดของภาพที่ถูกต้องขึ้นอยู่กับอุปกรณ์

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

สรุป

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

เครื่องมือออกแบบที่ทันสมัยเช่น Adobe XD , Marvel และ InVision ช่วยให้ทีมสามารถทดสอบต้นแบบบนอุปกรณ์จริงอภิปรายข้อเสนอแนะในบริบทและโดยทั่วไปทำงานร่วมกันเป็นทีมจนกว่าเค้าโครงจะทำงานได้ในทุกสถานการณ์

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

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

• eCommerce UX - ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อม Infographic)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานนักออกแบบ UX ที่ดีที่สุด - กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง

ทำความเข้าใจพื้นฐาน

เบรกพอยต์ในการออกแบบที่ตอบสนองคืออะไร

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

การเพิ่มประสิทธิภาพการสืบค้นในเซิร์ฟเวอร์ sql

การออกแบบเว็บที่ตอบสนองคืออะไร?

การออกแบบเว็บที่ตอบสนองต่อกระบวนการออกแบบเว็บไซต์ที่ปรับให้เข้ากับอุปกรณ์แพลตฟอร์มและขนาดหน้าจอทั้งหมดทั้งในรูปแบบและฟังก์ชัน

การเป็นมิตรกับอุปกรณ์เคลื่อนที่หมายความว่าอย่างไร

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