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

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

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

“นิเมชั่น”

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

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

“เกล็ดขนมปัง”

ประเภทการนำทาง ที่แจ้งผู้ใช้เกี่ยวกับตน สถานที่ปัจจุบัน บนเว็บไซต์.

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

“ถ่วง”

ความผิดพลาดในการออกแบบเว็บตัวบ่งชี้ของ หน้าที่ออกแบบมาไม่ดี.

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

“แบบแผนชุดสี”

คอลเลกชันของสีที่กลมกลืนกัน ใช้สำหรับการสร้าง เอกลักษณ์ของแบรนด์ที่เป็นที่รู้จัก.

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

“ความแตกต่าง”

เทคนิคการออกแบบเพื่อ เน้นความแตกต่าง ระหว่างองค์ประกอบที่มีบทบาทหรือความหมายแตกต่างกัน.

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

“รัฐว่างเปล่า”

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

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

“เค้าโครงคงที่”

ประเภทรูปแบบ ไซต์และองค์ประกอบของไซต์ ใช้ความกว้างเท่ากัน ในทุกความละเอียด, กำหนดไว้ในค่าคงที่ (ปกติพิกเซล).

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

“การออกแบบแบน”

UI ภาษาการออกแบบ เน้นสไตล์ที่สะอาดตาและเรียบง่าย, และลบพื้นผิวรูปแบบการไล่ระดับสีและเอฟเฟกต์แฟนซีอื่น ๆ เพื่อช่วยผู้ใช้ มุ่งเน้นไปที่เนื้อหาที่ดีขึ้น.

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

“เค้าโครงของไหล”

ประเภทรูปแบบ ที่ ใช้หน่วยที่เกี่ยวข้อง เพื่อกำหนดความกว้างของไซต์และองค์ประกอบ.

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

“พับ”

ด้านล่างของส่วนที่มองเห็นได้ของหน้าจอ.

ระยะเวลา “เหนือพับ” หมายถึงส่วนของหน้าเว็บที่ผู้เข้าชมสามารถดูได้ โดยไม่ต้องดำเนินการใด ๆ, ในขณะที่ “ด้านล่างพับ” อ้างถึงส่วนที่เหลือของหน้าเว็บที่ผู้ใช้สามารถทำได้ เข้าถึงได้โดยการโต้ตอบกับไซต์เท่านั้น - มักจะโดยการเลื่อนหรือรูด (บนมือถือ).

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

“การย่อยสลายที่สง่างาม”

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

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

“ภาพฮีโร่”

ขนาดใหญ่ แบนเนอร์ภาพ วางไว้ เหนือพับ.

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

“หน้า Landing”

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

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

“ขี้เกียจโหลด”

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

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

“Media Query”

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

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

“การเพิ่มความก้าวหน้า”

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

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

“การออกแบบที่ตอบสนอง”

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

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

“Skeuomorphism”

ภาษาการออกแบบ UI ที่ใช้ประโยชน์จาก หลักการของความคุ้นเคย, และมุ่งเน้นไปที่การสร้างองค์ประกอบการออกแบบที่ มีลักษณะใกล้เคียงกับโลกแห่งความจริง.

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

“การเปลี่ยนแปลง”

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

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

“พื้นที่สีขาว”

ที่ว่าง ระหว่างองค์ประกอบการออกแบบที่อยู่ติดกัน เรียกอีกอย่างว่า พื้นที่เชิงลบ.

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