วิธีการใช้ Visual ลำดับชั้นการสร้างชัดเจนและง่ายต่อการอ่านหน้าเว็บ

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

A+ A-

Image of a cave-like basement with perspective facing wall, with stairs descending into the frame from the left and a door wide open in the middle

ลองนึกภาพคุณได้ป้อนถ้ำ

ดวงตาของคุณอย่างช้า ๆ ปรับตัวเข้ากับสภาพแวดล้อมของคุณและเริ่มที่จะทำออกมารูปทรงและรูปแบบรอบ ๆ ตัวคุณ

คุณจะเห็นสามประตู: พวกเขากำลังเท่าเทียมกันในขนาดและทุกระยะทางเดียวกันจากการที่คุณยืน คุณจะเลือกที่จะไปก่อน?

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

ตอนนี้คิดว่าคุณได้ป้อนถ้ำสอง

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

ไปอีกด้านหนึ่งมีประตูหน้าต่างขนาดเล็กที่มีอยู่ในนั้นว่า "ต​​ั๋ว" ด้านบนมัน ถัดไปเป็นประตูอึมครึมที่บอกว่า "พนักงานเท่านั้น."

ในถ้ำนี้คุณรู้ว่าสิ่งที่จะทำ

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

เว็บไซต์ของคุณเป็นเช่นถ้ำมืด

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

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

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

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

นำพวกเขาไปรอบ ๆ หน้าของคุณด้วยภาพลำดับชั้น

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

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

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

1. เรียงลำดับข้อมูลของคุณไว้เป็นหมวดหมู่

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

สำคัญที่สุด

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

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

รองหรือสนับสนุน

ข้อมูลนี้จะสร้างข้อมูลที่สำคัญที่สุด

มัน fleshes ออกหุ้นรายละเอียดและรวมถึงการ เรียกร้องให้ดำเนิน

ที่สำคัญน้อยที่สุด

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

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

2. ประเภทของคุณชัดเจนผ่านทางเลือกการออกแบบ

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

ปฏิบัติตามเคล็ดลับเหล่านี้สำหรับแต่ละส่วน:

สำคัญที่สุด

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

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

  • วางตำแหน่งไว้ที่ด้านบนของหน้า
  • ทำให้มันมีขนาดใหญ่
  • ใช้สีสว่างไป (ถ้ามันเป็นภาพที่ทำให้มันโดดเด่นทางสายตา)
  • เพิ่มพื้นที่สีขาวมากขึ้นรอบ ๆ

รองหรือสนับสนุน

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

ใช้เคล็ดลับเหล่านี้จะทำให้มันชัดเจนและง่ายต่อการเรียด:

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

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

ที่สำคัญน้อยที่สุด

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

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

เพื่อให้บรรลุนี้สายตาข้อมูลที่สำคัญอย่างน้อยคุณควรจะ:

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

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

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

3. ขั้นตอนที่ออกไปและกลับมาทำในสิ่งที่คุณเห็น?

เราทุกคนต้องทนทุกข์ทรมานจากสิ่งที่ผมเรียกว่า "การออกแบบตาบอด" ซึ่งคล้ายกับตาบอดบรรณาธิการ

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

การแก้ไขสำหรับการออกแบบตาบอด? ก้าวออกไปจากหน้าเว็บของคุณ

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

ถามตัวเอง:

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

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

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

ถ้าเขาไม่แน่ใจว่าจะทำอย่างไรเมื่อเขาฮิตหน้าเว็บของคุณคุณจะรู้ว่าคุณยังคงมีงานที่ต้องทำ

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

ภาพลำดับชั้น: เครื่องมือที่มีประสิทธิภาพที่ลึกซึ้ง

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

เมื่อหน้าของคุณใช้อำนาจของตนจึงเป็นเรื่องง่ายที่จะอ่านและทำความเข้าใจและแนะนำผู้เข้าชมได้อย่างง่ายดายผ่านข้อมูลของคุณ

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

พร้อมที่จะใช้ลำดับชั้นของภาพ?

เข้าร่วม การอภิปรายใน Google+ และเชื่อมต่อกับฉัน บนทวิตเตอร์

Ads

หุ้น

เมื่อเร็ว ๆ นี้

ทางเลือกที่ดีที่สุดอูบุนตูที่มองหาถ้าคุณเป็นคนรักของลินุกซ์

ขอเริ่มต้นโดยได้รับคุ้นเคยกับบางสิ่งบางอย่าง; พื้นฐาน แต่บิ...

วิธีการเพิ่มลายเซ็นใน Gmail กล่องขาเข้า - เพิ่มลายเซ็นของ Google ใน Gmail

กล่องขาเข้าโดย Google เป็นหนึ่งในสิ่งที่ดีที่สุดของ Google ...

Weekly Tech News: Nokia, Google และนินเทน

สวัสดีครับทุกคนก็ศุกร์ 3 มีนาคมและเช่นเดียวเสมอเรากลับมาพร้...

โครงการ Pi ราสเบอร์รี่สำหรับมือใหม่ - คุณสามารถทำอะไรกับราสเบอร์รี่ Pi

ราสเบอร์รี่ Pi เป็นชุดของพลังงานต่ำคอมพิวเตอร์บอร์ดเดียวที่...

VPN ที่ดีที่สุดสำหรับ Android 2017 - วิธีการใช้ VPN ใน Android

ไปเป็นวันเมื่อ VPNs เพียงสำหรับเทคโนโลยี savvies และแฮกเกอร...

ความคิดเห็น