คู่มือการออกแบบพื้นหลังฉบับสมบูรณ์ในปี 2024

หากคุณสมัครใช้บริการจากลิงก์ในหน้านี้ Reeves and Sons Limited อาจได้รับค่าคอมมิชชั่น ดูของเรา คำสั่งจริยธรรม.

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

ทุกวันนี้ การสร้างพื้นหลังอย่างเหมาะสมนั้นยากกว่าที่เคยเป็นมา และนำเสนอความท้าทายใหม่ๆ ในขณะเดียวกันก็จำกัดศักยภาพบางอย่างที่ภูมิหลังอื่นๆwise ควรจะมี.

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

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

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

ภูมิหลังสำคัญหรือไม่ เพื่อตรวจสอบเราได้ตรวจสอบเว็บไซต์ที่ติดอันดับ 30 อันดับแรก (ไม่รวมเว็บไซต์ซ้ำ) และผลลัพธ์นั้นน่าสนใจมาก

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

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

ในเว็บไซต์ 30 อันดับแรกของปี 2017 มีเพียงเว็บไซต์ที่มีภูมิหลังที่เหมาะสมเท่านั้น:

  • Twitterด้วยพื้นหลังการถ่ายภาพ (อันดับที่ 10)
  • Live (Outlook) พร้อมพื้นหลังสีทึบ (อันดับที่ 12)
  • NetFlix โดยมีพื้นหลังเป็นภาพตัดปะ (อันดับที่ 21)
  • WordPress พร้อมพื้นหลังสีทึบ (อันดับที่ 26th)
  • Bing พร้อมพื้นหลังการถ่ายภาพ (อันดับที่ 29th)
  • Tumblr ที่มีพื้นหลังการถ่ายภาพ (อันดับ 30th)

ดังนั้นมีเพียง 20 เปอร์เซ็นต์ของ 30 เว็บไซต์อันดับแรกที่มีภูมิหลังและเว็บไซต์ที่ไม่ติดอยู่ในรายการ

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

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

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

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

ควรมีพื้นหลัง

เนื้อหาต้องอยู่บนเลเยอร์เหนือพื้นหลังของเพจเสมอ หากคุณไม่แยกองค์ประกอบของหน้าออกเป็นเลเยอร์ต่างๆ ก็อาจสร้างปัญหาให้คุณเมื่อจำเป็นต้องเปลี่ยนแปลงบางอย่าง

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

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

ภาพนี้แสดงโครงสร้างที่เหมาะสำหรับเทมเพลตการออกแบบพื้นหลัง:

ภายในแต่ละชั้น (ยกเว้นชั้นฐาน) มีขอบเขตในการสร้างชั้นเพิ่มเติมสำหรับระดับการแยกที่ยิ่งใหญ่กว่าหากคุณต้องการ

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

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

กรอบ

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

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

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

ประเด็นของ“ ความสมบูรณ์ในการออกแบบ” นี้ก็หมายความว่าการออกแบบจะมีลักษณะเหมือนกันเสมอไม่ว่าจะดูบนหน้าจอแบบใดก็ตาม ตรงกันข้ามคือเนื้อหามักจะมีลักษณะ (มากหรือน้อย) เหมือนกันไม่ว่าจะดูบนหน้าจอแบบใดก็ตาม

ใช้มาตราส่วนสำหรับ responsiveNess

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

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

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

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

และภูมิทัศน์

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

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

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

ใช้การซ่อนและเปิดเผยแบบค่อยเป็นค่อยไป responsiveNess

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

นี่คือตัวอย่างความแตกต่างเมื่อใช้วิธีนี้ เราจะใช้อุปกรณ์และทิศทางเดียวกันเพื่ออธิบาย อันดับแรกคือภาพบุคคลของ Samsung Galaxy S5

ภูมิทัศน์ Samsung Galaxy S5

แนวตั้งของ iPad

ภูมิทัศน์ของ iPad

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

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

แนวคิดที่ดีที่สุดสำหรับการออกแบบพื้นหลัง (ตามลำดับ)

1. สีทึบ (หรือไม่มีสี)

2. ถ่ายภาพ (ยืด)

3. กระเบื้องขนาดเล็ก (ไร้รอยต่อที่สมบูรณ์แบบ)

4. กระเบื้องขนาดใหญ่ (ไร้รอยต่อที่สมบูรณ์แบบ)

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

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

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

มารยาทภาพส่วนหัวของ

บ็อกดานแรนเซีย

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

ความคิดเห็น 0 คำตอบ

เขียนความเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

อันดับ *

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