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

เอกสารตรวจรับ

เอกสารตรวจรับ

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

01คงสไตล์ภาพรวมให้สว่างและสะอาด

02ปุ่มหลักต้องมีสถานะที่คลิกได้ชัดเจน

03หน้าแรกคงองค์ประกอบภาพที่เน้นเทคโนโลยี

04โมดูลเนื้อหาถูกบรรจุด้วยการ์ด

05ข้อความหลักต้องครอบคลุมความสามารถ สถานการณ์ และมูลค่า

06ตัวเลขสำคัญใช้เพื่อเน้นจังหวะของหน้า

07หน้าหลักคงจุดเรียกสู่การกระทำที่ชัดเจน

08ข้อความเนื้อหาไม่เล็กกว่า 14px

09แถบนำทางตรึงไว้ด้านบนของหน้า

10ทุกภาพต้องมีคำบรรยายด้านล่าง

11Line-height รวมศูนย์ที่ 1.6

12Favicon ครอบคลุมทุกขนาดทั่วไป

implementation_notes.txt

01ภาพฮีโร่ต้องนำเสนอทีม อินเทอร์เฟซผลิตภัณฑ์ และโดเมนแบรนด์พร้อมกัน

02สไตล์ปุ่มคงเป็นเอกภาพทั่วทั้งไซต์ ด้วยรัศมีมุม 12px

03ใช้โมชันเพื่อเสริมลำดับชั้นโดยไม่กระทบการอ่านพื้นฐาน

04ส่วนเรื่องราวลูกค้าคงช่องแสดงผลลัพธ์ไว้

05เลย์เอาต์มือถือจัดลำดับความสำคัญความสามารถในการอ่านข้อความ 14px

06แถบนำทางใช้ position: sticky และตรึงไว้ขณะเลื่อน

07แอตทริบิวต์ alt ของภาพและคำบรรยายด้านล่างภาพต้องไม่ถูกละเว้น

บันทึกการออกแบบ

บันทึกเอฟเฟกต์ภาพและการโต้ตอบหลัก

ต่อไปนี้บันทึกเจตนาการออกแบบและการปรับใช้ปัจจุบันของเอฟเฟกต์ภาพและการโต้ตอบหลัก เพื่อการทบทวนการออกแบบและการอ้างอิงการวนซ้ำในอนาคต
01

ฟองความพึงพอใจของลูกค้าในฮีโร่

พื้นที่ภาพฮีโร่ต้องการแท็กเมตริกธุรกิจแบบเรียลไทม์เพื่อเสริมข้อมูลมูลค่าลูกค้า

ฟองเมตริกความพึงพอใจ ROI และอื่น ๆ โผล่วนซ้ำพร้อมแอนิเมชันออก
02

ข้อความแกรเดียนต์สายรุ้งเมื่อ Hover

หัวข้อและลิงก์ต้องการฟีดแบ็กภาพที่ชัดเจนในสถานะ hover

แกรเดียนต์สายรุ้ง + ไฮไลต์กวาด + การหมุน hue + เรืองแสง
03

แอนิเมชันภาพ CTA แยกจากพื้นที่คลิก

ปุ่มต้องการฟีดแบ็กไดนามิกที่แข็งแกร่งขึ้นเมื่อ hover/คลิก ขณะคงพื้นที่คลิกให้เสถียร

ชั้นภาพเคลื่อนไหวด้วย translateY ขณะพื้นที่คลิกอยู่กับที่
04

แถบนำทางสไตล์กระจกเหลว

การนำทางด้านบนต้องการความรู้สึกวัสดุโปร่งแสงพร้อมความลึกแบบชั้น

พื้นหลังกระจก backdrop-filter + ไฮไลต์กวาด + แอนิเมชันลอยเบา ๆ
05

โหมดสปอตไลต์ปิดไฟ

มอบโหมดการอ่านที่มุ่งเน้นซึ่งลดสิ่งรบกวนทางสายตา

หน้ากากเต็มจอ + รัศมีสปอตไลต์ตามเคอร์เซอร์ควบคุมพื้นที่ที่มองเห็น
06

เคอร์เซอร์เมาส์แบรนด์ Richify แบบกำหนดเอง

ขยายการรับรู้แบรนด์เพื่อให้การเคลื่อนไหวของเคอร์เซอร์สอดคล้องกับสไตล์ภาพของหน้า

เคอร์เซอร์ SVG แบรนด์ + เอฟเฟกต์อนุภาคตามหลัง
07

แกลเลอรี 3D WebGL บนหน้าเรื่องราวลูกค้า

หน้าเรื่องราวลูกค้าต้องการพื้นที่แสดงผล 3D แบบดื่มด่ำ

เมทริกซ์อนุภาค WebGL + การโต้ตอบด้วยเมาส์ + แผงไดนามิก
08

เพชร 3D ท้ายหน้าและมาร์คีแบรนด์

ด้านล่างของหน้าต้องการพื้นที่ปิดท้ายแบรนด์ที่มองเห็นได้อย่างต่อเนื่อง

เพชรหมุน 3D + มาร์คีแบรนด์ + สีไดนามิก
09

ภาพทีมฮีโร่พร้อมโลโก้แบรนด์ฝังตัว

ภาพฮีโร่ต้องนำเสนอฉากทีมและแบรนด์ richify.net พร้อมกัน

เครื่องหมายแบรนด์ richify.net ถูกฝังในพื้นที่หน้าจอแล็ปท็อป