พื้นที่สีขาวจะปรับปรุงไซต์เมื่อแยกเนื้อหาออกจากกันอย่างชัดเจน จัดลําดับความสําคัญของข้อมูล และปล่อยให้ทุกการกระทําหายใจไม่ออก เหล่านี้ไม่จําเป็นต้องเป็นพื้นที่สีขาว: คําหมายถึงพื้นที่ว่างใด ๆ โดยไม่คํานึงถึงสีของมัน ปริมาณที่ดีมันทําให้การอ่านง่ายขึ้นและนําทางดวงตา ปริมาณที่ไม่ดีมันสามารถในทางตรงกันข้ามให้ความประทับใจของความว่างเปล่าหรือบังคับให้คุณเลื่อนโดยไม่จําเป็น
วิธีการที่ถูกต้องคือเริ่มจากลําดับความสําคัญของเนื้อหาแล้วใช้มาตราส่วนระยะห่างที่สอดคล้องกันระหว่างข้อความ แผนที่ รูปภาพ ส่วนและปุ่ม เป้าหมายไม่ใช่เพื่อ "เพิ่มความว่างเปล่า" แต่เพื่อให้เข้าใจหน้าได้ง่ายขึ้น
ไซต์ของคุณดูยุ่งหรือยากต่อการนําทางหรือไม่?
มุมมองภายนอกช่วยให้คุณสามารถระบุพื้นที่ที่จะระบายอากาศได้โดยไม่ต้องลบข้อมูลที่เป็นประโยชน์
เราเรียก "พื้นที่สีขาว" ในการออกแบบเว็บไซต์ว่าอะไร?
ช่องว่างสีขาวหรือพื้นที่เชิงลบเป็นพื้นที่ที่เหลือฟรีรอบองค์ประกอบ มันอาจจะเป็นสีขาว, สีกรมท่า, สีเบจหรือใช้สีพื้นหลังของเว็บไซต์ มันมีอยู่ในสองรูปแบบเสริม
ไมโครสเปซ
มันแยกบรรทัดของข้อความไอคอนของถ้อยคําเนื้อหาของขอบของแผนที่หรือสองฟิลด์ของแบบฟอร์ม การเบี่ยงเบนเล็ก ๆ เหล่านี้ส่งผลโดยตรงต่อความสามารถในการอ่าน
มาโครสเปซ
มันแยกกลุ่มใหญ่: แบนเนอร์และการเลือกผลิตภัณฑ์สองส่วนหรืออาร์กิวเมนต์และการเรียกร้องให้ดําเนินการ มันจัดโครงสร้างจังหวะทั่วไปของหน้า
เหตุใดพื้นที่สีขาวจึงปรับปรุงไซต์?
พวกเขาให้เกณฑ์มาตรฐานผู้เข้าชม ชื่อที่แยกได้จากส่วนก่อนหน้าแต่ใกล้เคียงกับย่อหน้าที่แนะนําจะเข้าใจได้ทันทีว่าเป็นจุดเริ่มต้นของบล็อกใหม่ ปุ่มที่ล้อมรอบด้วยพื้นที่ออกมาโดยไม่จําเป็นต้องทําให้มันใหญ่โต
- การอ่าน: บรรทัด ย่อหน้า และรายการต่างๆ นําทางได้ง่ายกว่า
- ลําดับชั้น: เนื้อหาที่สําคัญแตกต่างจากข้อมูลรอง
- ความเข้าใจ: องค์ประกอบที่เชื่อมโยงจะปรากฏใกล้เคียงกัน หัวข้อต่างๆ จะถูกแยกออกจากกัน
- ความสะดวกสบายมือถือ: โซนสัมผัสแน่นน้อยลงและข้อผิดพลาดในการคลิกลดลง
- การรับรู้: โดยทั่วไปการเรียบเรียงเพลงปกติดูเหมือนมีการควบคุมและเป็นมืออาชีพมากกว่า
ตัวอย่างที่เป็นรูปธรรมสามประการของการใช้พื้นที่สีขาว
การสาธิตแผนผังเหล่านี้แสดงให้เห็นว่าระยะห่างเปลี่ยนการรับรู้ของหน้าอย่างไรโดยไม่ต้องเปลี่ยนเนื้อหา พวกเขาไม่ได้เป็นตัวแทนของโครงการของลูกค้าจริง
ตัวอย่างที่ 1: แผ่นผลิตภัณฑ์ที่ง่ายต่อการนําทาง
ชื่อเรื่อง ราคา ข่าวสาร และหุ้น แข่งขันกันเอง
องค์ประกอบที่เกี่ยวข้องอยู่ใกล้กัน ในขณะที่ปุ่มจะได้ประโยชน์จากการหายใจที่ชัดเจน
ตัวอย่างที่ 2: แยกส่วนของหน้าได้ดีขึ้น
ดูเหมือนว่ากลุ่มจะอยู่ในบล็อกเดียวกันและลําดับชั้นจะเบลอ
ช่องว่างระหว่างส่วนต่างๆ มากกว่าช่องว่างภายใน: โครงสร้างสามารถเข้าใจได้ทันที
ตัวอย่างที่ 3: ปรับปรุงความสะดวกสบายบนมือถือ
เนื้อหาเกือบจะแตะขอบและการกระทําผสมผสานกับข้อความ
ขอบด้านข้าง ช่วงเวลา และพื้นที่ปุ่มทําให้เส้นทางชัดเจนยิ่งขึ้น
วิธีการใช้พื้นที่สีขาวใน 7 ขั้นตอน?
- จําแนกข้อมูล ตัดสินใจว่าผู้เยี่ยมชมควรเห็น เข้าใจ แล้วทําอะไร
- จัดกลุ่มสิ่งที่ไปด้วยกัน ปุ่มราคาและซื้อควรปรากฏเป็นชุดเดียวกัน เงื่อนไขการคืนสินค้าสามารถสร้างบล็อกรองได้
- แยกกลุ่มต่างๆ ใช้ช่องว่างระหว่างสองส่วนมากกว่าระหว่างชื่อเรื่องและข้อความ
- เลือกเครื่องชั่งแบบง่ายๆ ตัวอย่างเช่น 8, 16, 24, 32, 48 และ 64 พิกเซลเป็นจุดเริ่มต้น เพื่อปรับให้เข้ากับธีมและตัวพิมพ์
- ดูแลภายในส่วนประกอบ การ์ดจะต้องรักษาระยะขอบปกติระหว่างขอบ ชื่อ รูปภาพ และปุ่ม
- ควบคุมจังหวะแนวตั้ง สลับลําดับขนาดกะทัดรัดและลมหายใจที่คมชัดแทนที่จะใช้พื้นที่ขนาดใหญ่เดียวกันทุกที่
- ทดสอบบนหน้าจอจริง ตรวจสอบทั้งหน้าบนคอมพิวเตอร์และโทรศัพท์ ไม่ใช่แค่ส่วนที่แยกออกมาในตัวแก้ไข
ควรจัดให้มีช่องว่างใดบ้างขึ้นอยู่กับประเภทของหน้า?
| หน้า | ให้มีการระบายอากาศเป็นสําคัญ | จุดเฝ้าระวัง |
|---|---|---|
| บ้าน | คําสัญญา ภาพ ประโยชน์ และการคัดเลือก | หลีกเลี่ยงส่วนที่สูงเกินไปและทําให้การเข้าถึงผลิตภัณฑ์ล่าช้า |
| คอลเลคชั่น | ชื่อเรื่อง ตัวกรอง ตาราง และการ์ดผลิตภัณฑ์ | เก็บผลิตภัณฑ์ที่มองเห็นได้เพียงพอโดยไม่ต้องบรรจุการ์ด |
| แผ่นผลิตภัณฑ์ | แกลเลอรี่ ราคา รูปแบบ การซื้อและการประกันภัยต่อ | เก็บข้อมูลเด็ดขาดไว้ใกล้กับปุ่ม |
| ตะกร้า | ผลิตภัณฑ์ ยอดรวม การส่งมอบ และการตรวจสอบความถูกต้อง | อย่าเลื่อนปุ่มหลักออกไปพร้อมกับบล็อกรอง |
| บทความ | ย่อหน้า หัวข้อ รายการ และภาพ | จํากัดความกว้างของข้อความที่เป็นบรรทัดยาว |
วิธีการจัดการพื้นที่สีขาวบนมือถือ?
มือถือไม่ควรเป็นรุ่นบีบอัดที่เรียบง่ายของคอมพิวเตอร์ ความกว้างหายไปแต่ความสูงยังคงมีอยู่: บล็อกโดยทั่วไปผ่านคอลัมน์และระยะห่างแนวตั้งกลายเป็นสิ่งจําเป็น
- ลดระยะขอบด้านข้างโดยไม่ติดข้อความไว้ที่ขอบหน้าจอ
- ลดพื้นที่ตกแต่งขนาดใหญ่มากที่ทําให้หน้ายาวขึ้นโดยไม่จําเป็น
- รักษาการแยกที่ชัดเจนระหว่างปุ่มฟิลด์และลิงค์สัมผัส
- เปลี่ยนโต๊ะขนาดใหญ่ให้เป็นการ์ดแนวตั้งที่อ่านง่าย
- ตรวจสอบชื่อเรื่องยาว เนื่องจากต้องใช้หลายบรรทัดอย่างรวดเร็ว
ลําดับความสําคัญคือความต่อเนื่องของเส้นทาง คู่มือของเราทุ่มเทให้กับ ประสบการณ์มือถือบน Shopify รายละเอียดเช็คที่มีประโยชน์อื่นๆ
ข้อผิดพลาดในการเว้นวรรคที่พบบ่อยที่สุด
พื้นที่น้อยเกินไป
- ข้อความที่ติดอยู่ที่ขอบ
- การ์ดและปุ่มต่างๆ แยกแยะได้ยาก
- ส่วนที่ไม่มีการแตกหักที่มองเห็นได้
- ข้อมูลการประกันภัยต่อกองพะเนินเทินทึก
พื้นที่มากเกินไป
- พื้นที่ว่างขนาดใหญ่ที่ไม่มีเจตนา
- ข้อมูลที่เกี่ยวข้องกับรีโมท
- การเลื่อนมากเกินไป
- การพิมพ์หน้าที่ยังไม่เสร็จ
คุณควรเลือกบริการใดเพื่อปรับปรุงระยะห่าง?
การวินิจฉัยที่รวดเร็ว
เลือกมัน ฟรีมินิออดิชั่น หากคุณต้องการมองเห็นปัญหาหลักที่มองเห็นได้ก่อนและกําหนดลําดับความสําคัญ
ร้านค้าที่มีอยู่ที่ต้องได้รับการตรวจสอบ
ลา การออกแบบ shopify ใหม่ เหมาะเมื่อระยะห่างเป็นส่วนหนึ่งของปัญหาโครงสร้าง รูปภาพ หรือเส้นทางที่ใหญ่ขึ้น
โครงการใหม่
ลา การสร้างร้านค้า shopify ช่วยให้สามารถบูรณาการลําดับชั้นและระบบระยะห่างตามการออกแบบได้
เว็บไซต์ภายนอก Shopify
สําหรับงานแสดงหรือโครงการเว็บอื่น โปรดปรึกษาบริการของ การสร้างเว็บไซต์ระดับมืออาชีพ.
ขอบเขต กําหนดเวลา และราคาขึ้นอยู่กับบริการและเพจที่เกี่ยวข้อง SiteQuiVend นําเสนอสูตรที่เผยแพร่ในหน้าบริการและยืนยันกรอบการทํางานที่เหมาะสมก่อนเริ่ม
ต้องการเค้าโครงที่ชัดเจนกว่านี้หรือไม่?
นําเสนอไซต์และเพจของคุณเพื่อปรับปรุงเพื่อมุ่งสู่บริการที่เหมาะสม
รายการตรวจสอบสําหรับการตรวจสอบช่องว่างสีขาว
- แต่ละส่วนมีวัตถุประสงค์ที่สามารถระบุตัวตนได้
- องค์ประกอบที่เกี่ยวข้องจะถูกจัดกลุ่มเข้าด้วยกันด้วยสายตา
- ส่วนที่แยกจากกันมีการแยกที่แข็งแกร่งกว่า
- ระยะขอบภายในของไพ่เป็นปกติ
- ย่อหน้าไม่ก่อให้เกิดบล็อกหนาแน่นเกินไป
- ปุ่มหลักมีโซนหายใจ
- ขอบด้านข้างยังคงสบายบนมือถือ
- ไม่มีช่องว่างขนาดใหญ่ตัดข้อมูลจากการกระทําของมัน
- หน้ายังคงเป็นจังหวะตลอดความยาว
- ตรวจสอบการเรนเดอร์ที่ความกว้าง 375 พิกเซล
คําถามที่พบบ่อยเกี่ยวกับพื้นที่สีขาวของเว็บไซต์
พื้นที่สีขาวต้องเป็นสีขาวหรือไม่?
ไม่ นี่เป็นพื้นที่ว่างรอบ ๆ หรือระหว่างเนื้อหา มันสามารถใช้สีพื้นหลังใด ๆ ที่สอดคล้องกับเอกลักษณ์ของภาพ
พื้นที่สีขาวเปลืองพื้นที่หรือไม่?
พวกเขาใช้พื้นที่ผิว แต่ให้เกณฑ์มาตรฐาน พวกเขาจะกลายเป็นปัญหาเฉพาะเมื่อพวกเขาย้ายออกจากองค์ประกอบที่เกี่ยวข้องหรือขยายหน้าโดยไม่ได้รับประโยชน์
ฉันควรใช้มาร์จิ้นใดระหว่างสองส่วน?
ไม่มีค่าสากล มาตราส่วนที่สอดคล้องกันซึ่งปรับให้เข้ากับตัวอักษรและธีมมีความสําคัญมากกว่าตัวเลขที่แยกได้ ช่องว่างระหว่างส่วนต้องมากกว่าส่วนที่เชื่อมโยงชื่อเรื่องกับข้อความ
เราควรใส่พื้นที่บนมือถือมากหรือน้อย?
โดยทั่วไประยะขอบด้านข้างจะเล็กกว่า ในขณะที่ระยะห่างแนวตั้งควรเพียงพอที่จะแยกเนื้อหาและอํานวยความสะดวกในการโต้ตอบเมื่อสัมผัส
จะรู้ได้อย่างไรว่าเพจนั้นโปร่งเกินไป?
หากผู้เยี่ยมชมต้องเลื่อนจํานวนมากเพื่อเชื่อมโยงข้อมูลไปยังปุ่มของตน หากบล็อกที่เกี่ยวข้องปรากฏเป็นอิสระ หรือหากพื้นที่ว่างไม่มีฟังก์ชัน ระยะห่างอาจมากเกินไป
วิธีการออกอากาศหน้าโดยไม่ต้องลบเนื้อหา?
จัดกลุ่มข้อมูลตามธีม ย่อย่อหน้า ใช้รายการ สร้างการ์ดที่สอดคล้องกัน และเปิดเผยข้อมูลรองในหีบเพลงเมื่อยังคงเป็นธรรมชาติ
พื้นที่สีขาวช่วยเพิ่มยอดขายโดยอัตโนมัติหรือไม่?
ไม่ พวกเขาสามารถทําให้การเดินทางชัดเจนขึ้น แต่ยอดขายยังขึ้นอยู่กับอุปทาน การจราจร ราคา ความไว้วางใจ เนื้อหา และประสบการณ์การช็อปปิ้ง
เราสามารถปรับปรุงระยะห่างของธีม Shopify ได้หรือไม่?
ใช่สําหรับการปรับเปลี่ยนตามเป้าหมาย แต่การยกเครื่องที่กว้างขึ้นจะดีกว่าหากโครงสร้าง เทมเพลตหน้า หรือเส้นทางมีปัญหาเช่นกัน
สร้างพื้นที่เพื่อเป็นแนวทางที่ดีขึ้น
ระยะห่างที่ดีทําให้โครงสร้างชัดเจนโดยไม่ต้องดึงความสนใจมาที่ตัวเอง เริ่มต้นด้วยการจัดกลุ่มเนื้อหาที่เกี่ยวข้องแยกขั้นตอนอย่างชัดเจนระหว่างทางและใช้มาตราส่วนปกติ จากนั้นตรวจสอบทุกอย่างบนคอมพิวเตอร์และมือถือ
หากเพจยังคงโหลดอยู่แม้จะมีการปรับเปลี่ยนเหล่านี้ปัญหาอาจอยู่ที่ลําดับชั้นหรือปริมาณของข้อมูล SiteQuiVend สามารถช่วยคุณพิจารณาว่าจําเป็นต้องมีการแก้ไขเป้าหมายการออกแบบ Shopify ใหม่หรือการออกแบบใหม่หรือไม่
