ส่วนหัวและโลโก้ที่ตอบสนองต่อ - เคล็ดลับและข้อผิดพลาด

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

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

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

ทินเนอร์ Navbars

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

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

ยกตัวอย่างเช่นเค้าโครงการ์ตูนชงบนหน้าจอขนาดเต็มและบนอุปกรณ์มือถือ.

ที่จุดพัก 600px การนำทางจะลดความสูงลงเกือบครึ่งบนหน้า สิ่งนี้ทำให้ทั้งโลโก้และเมนูการนำทางที่คลิกได้มีขนาดเล็กลง สัดส่วนมากขึ้น ไปที่พื้นที่หน้าจอสัมพัทธ์.

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

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

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

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

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

Iconify โลโก้

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

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

ลองดูโลโก้สำหรับ Web Designer News และดูว่ามันเปลี่ยนไปอย่างไรเมื่อคุณปรับขนาดเบราว์เซอร์.

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

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

คุณไม่จำเป็นต้องพึ่งพากราฟิกสำหรับเทคนิคโลโก้แบบย่อนี้ ส่วนหัวของ Young And Hungry ใช้ข้อความสีเขียวสดใสสำหรับโลโก้ซึ่งในที่สุดควบแน่นกับข้อความ "Y&H".

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

การจัดการพื้นหลังแบบเต็มหน้าจอ

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

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

Cap Radio Raffle ใช้เทคนิคนี้ในหน้าแรกของพวกเขา ภาพพื้นหลัง เก็บจุดโฟกัสในมุมมอง ตลอดเวลาไม่ว่าจะปรับขนาดหน้าจอเป็นเท่าใด.

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

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

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

ลดความซับซ้อนของการนำทาง

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

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

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

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

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

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

สร้างของคุณเอง

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

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

• สร้างเมนูนำทาง CSS มือถือแบบตอบสนองขั้นพื้นฐาน (teamtreehouse.com)
• แนวทางปฏิบัติที่ดีที่สุดสำหรับส่วนหัวของเว็บไซต์ที่ตอบสนองต่อ (ux.stackexchange.com)
• ฉันจะทำให้ภาพส่วนหัวของฉันตอบสนองได้อย่างถูกต้อง? (stackoverflow.com)