วิธีการวางแผนการจัดเรียงเนื้อหาสำหรับการออกแบบที่ตอบสนอง

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

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

จัดเรียงกริดในรายการ

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

ตัวอย่างที่ 1: สภาเมืองเวลลิงตัน

ลองดูที่เว็บไซต์ของสภาเทศบาลเมืองเวลลิงตันซึ่งใช้เป็นจำนวนมาก ส่วนสไตล์กริด ในหน้าแรก.

มีสไลด์โชว์เล็ก ๆ ของลิงค์สี่เหลี่ยมที่ ช่วยลด ในขณะที่หน้าต่างเบราว์เซอร์ปรับขนาด ส่วนท้ายยัง เล็กลง, และในที่สุด แปลงเป็นรายการลิงก์แนวตั้ง.

ในโทรศัพท์ขนาดเล็กมากที่มีความกว้าง 320px คุณต้องออกแบบสำหรับขนาดอุปกรณ์ ในกรณีของ iPhone อุปกรณ์จะสูงกว่ากว้างกว่าดังนั้นจึงเหมาะสมที่จะจัดเรียงเนื้อหาในแบบนั้น.

ตัวอย่างที่ 2: Mooyah Burgers

ลองดูที่โฮมเพจของ Mooyah แล้วลองปรับขนาดเค้าโครง มีพื้นที่สไลด์โชว์เล็ก ๆ ที่มีสามรายการบนหน้าจอเดสก์ท็อป แต่สิ่งนี้ หดตัวลง เพื่อแสดงรายการเดียวบนมือถือ (เพิ่มสไลด์ที่ซ่อนอยู่ในวิดเจ็ต).

กล่องโปรโมชั่นสองกล่องที่โฆษณาแอพ & เมนู Mooyah คงที่อยู่เคียงข้างกัน จนกว่าหน้าจอจะเล็กพอ เพื่อจัดเรียงใหม่ในแนวตั้ง.

“เชื่อมต่อกับเรา!” ส่วนยังจัดเรียงเนื้อหาใหม่เพื่อให้แต่ละโพสต์โซเชียล รับพื้นที่มากที่สุด. โดยทั่วไปแล้วหน้าจอไวด์สกรีนนั้นกว้างที่สุดและหน้าจอสมาร์ทโฟนสูงที่สุด.

ตัวอย่างที่ 3: ตลาดธีม

เมื่อออกแบบเค้าโครงด้วยกริดคุณควรพิจารณา รูปแบบเค้าโครงทั้งแบบกว้างและสูง ก่อนเขียนรหัสบรรทัดเดียว วิธีนี้คุณจะต้องเตรียมพร้อมที่จะ สร้างเบรกพอยต์ที่เหมาะสม.

หน้าเว็บที่มีเค้าโครงตารางแบบเต็มควร ลดขนาดของกล่อง ก่อนที่จะแบ่งเป็นบรรทัดใหม่ ตัวอย่างเช่นตลาดธีมมี ความกว้างสูงสุดคงที่ จาก 1240 และตารางประกอบด้วย สี่บล็อกต่อแถว.

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

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

ซ่อนหรือลบคอลัมน์

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

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

1. วางไว้ใต้เนื้อหาหลัก
2. ซ่อนพวกเขาทั้งหมด

ตัวอย่างที่ 1: กดหยุด

ดูเว็บไซต์ Stop Press มันมี สี่คอลัมน์แนวตั้ง บนหน้าจอเดสก์ทอปของฉัน.

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

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

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

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

ในทางกลับกันบล็อกจำนวนมาก อย่าย้ายแถบข้างใต้เนื้อหาหลัก เช่นเดียวกับ Concept Art Empire ซึ่งมีการโพสต์ที่เกี่ยวข้องในแถบด้านข้างในที่สุด วางด้านล่างเนื้อหา.

ตัวอย่างที่ 2: บล็อก Wishpond

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

ฉันชอบที่จะติดตาม วิธีไฮบริด ที่ฉันย้ายแถบข้างใต้เนื้อหา แต่ยังซ่อนบางรายการในแถบด้านข้างผ่านจุดพัก.

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

ตัวอย่างที่ 3: Madame Gautier

ฉันชอบที่ Madame Gautier ใช้มันอย่างไร “ข่าวล่าสุด” แถบด้านข้างในหน้าแรก มันในที่สุด ลดลงด้านล่างเนื้อหา, และ รับตำแหน่งมุมมองแบบเต็ม บนหน้า.

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

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

ปรับ & บีบระยะขอบ

จะมีจุดที่เสมอ ไม่สามารถบีบเนื้อหาได้ เพิ่มเติมใด ๆ และส่วนหนึ่งจำเป็นต้อง วางด้านล่างอื่น ๆ.

โดย ปรับระยะขอบ ก่อนที่จะลดเนื้อหาลงบนหน้าเว็บคุณให้ผู้อ่านมีเนื้อหาที่กว้างขึ้นเพื่อเลือก.

ตัวอย่างที่ 1: One World

ส่วนท้ายของ One World เป็นตัวอย่างที่ดี มันมี ลิงก์ส่วนท้ายของไซต์แบบลอย ถูกต้องกับ แบบฟอร์มสมัครอีเมล์ ทางซ้าย.

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

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

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

ตัวอย่างที่ 2: เกาะทอง

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

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

Flow Flow แนวตั้งบนหน้าจอที่เล็กกว่า

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

ตัวอย่างที่ 1: BodyBuilding.com โพสต์เดียว

ยกตัวอย่างเช่นการเพาะกายการโพสต์ที่ ใช้กล่องเล็ก ๆ เพื่ออวดการออกกำลังกายที่แตกต่างกัน.

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

CSS ที่ตอบสนองของคุณควรคำนึงถึงสิ่งเล็ก ๆ น้อย ๆ นี้ในทุกหน้าของเว็บไซต์ด้วย.

ตัวอย่างที่ 2: Vanity Fair

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

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

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

การปิดความคิด

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

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