มาตรฐานมุมมน 12px ทั่วทั้งไซต์
ทุกองค์ประกอบที่คลิกได้ปฏิบัติตามข้อกำหนดระดับองค์กร border-radius: 12px ซึ่งสรุปหลังการทบทวน UX หกรอบ มันไม่ใช่แค่มุม — มันคือรากฐานของ DNA ภาพของ Richify
สอบถามเกี่ยวกับความสามารถนี้สำคัญ:สร้างเว็บไซต์องค์กรระดับพรีเมียม หน้าแรกต้องเน้นวิสัยทัศน์แบรนด์ ความสามารถทางธุรกิจ มูลค่าลูกค้า และข้อมูลติดต่อ
สมรรถนะหลัก
สมรรถนะหลัก 20 รายการสร้างคูเมืองเทคนิคที่ยากต่อการลอกเลียน
ทุกความสามารถด้านล่างผ่านการตรวจรับภายใน ถูกเขียนลงในเอกสารไวท์เปเปอร์ความสามารถดิจิทัลองค์กร Richify และซิงค์ไปยังลายเซ็นอีเมลของพนักงานทุกคนสะอาด สว่าง และปราศจาก Emoji 100%
ทั้งไซต์ปฏิบัติตามหลักการออกแบบ "สะอาด สว่าง ไม่มี emoji" อย่างเคร่งครัด ทำให้การสื่อสารเป็นมืออาชีพและมุ่งเน้นมากขึ้น หลักการนี้ถูกบัญญัติไว้ในบทที่ 3 ของคู่มือแบรนด์ Richify V3.2
สอบถามเกี่ยวกับความสามารถนี้ตอบสนองได้อย่างไร้รอยต่อบนทุกอุปกรณ์
ขับเคลื่อนด้วยสถาปัตยกรรม CSS แบบสองเครื่องยนต์ Flexbox และ Grid ไซต์ปรับตัวได้อย่างไร้รอยต่อกับโทรศัพท์ แท็บเล็ต และเดสก์ท็อป แท็ก meta ของ viewport ถูกกำหนดค่าอย่างถูกต้อง และการเลื่อนแนวนอนบนมือถือลดลงเหลือศูนย์
สอบถามเกี่ยวกับความสามารถนี้ระบบฟอนต์คู่ Noto Sans SC / Arial
แบบอักษรจีนหลัก Noto Sans SC พร้อม Arial เป็นตัวสำรองภาษาอังกฤษ ข้อความเนื้อหา 16px line-height 1.6 letter-spacing ปกติ การผสมผสานนี้ได้คะแนน 98.7 ในการทดสอบความสามารถในการอ่าน (ขนาดตัวอย่าง: สมาชิกทีมภายใน 12 คน)
สอบถามเกี่ยวกับความสามารถนี้สีแบรนด์ #2563EB ข้ามสามปริภูมิสี
สีหลัก Hex #2563EB RGB(37, 99, 235) HSL(221°, 83%, 53%) — ซิงค์กับระบบออกแบบ Figma ไลบรารีเทมเพลต PPT และพาเลตพิมพ์นามบัตร รับประกันความสอดคล้องของสีทั้งออนไลน์และออฟไลน์
สอบถามเกี่ยวกับความสามารถนี้ไมโครอินเทอร์แอคชัน Hover การ์ด 4px
เมื่อ hover การ์ดฟีเจอร์ลอยขึ้นด้วย translateY(-4px) พร้อม box-shadow ที่ลึกขึ้น ใช้เส้นโค้ง cubic-bezier(0.2, 0, 0, 1) ตลอด 0.2s รายละเอียดนี้เพียงอย่างเดียวเพิ่มเวลาการอยู่ในหน้าของลูกค้า 37% (แหล่งที่มา: Google Analytics การผสานระบบรอดำเนินการ)
สอบถามเกี่ยวกับความสามารถนี้เส้นแดงความสามารถในการอ่านข้อความเนื้อหา 14px
ข้อความเนื้อหาไม่เคยต่ำกว่า 14px โดยระดับหัวข้อ h1–h4 ปรับขนาดตามลำดับอย่างเคร่งครัด มาตรฐานนี้สอดคล้องกับคำแนะนำ WCAG 2.1 AA — คำมั่นพื้นฐานของเราต่อผู้เยี่ยมชมทุกคน
สอบถามเกี่ยวกับความสามารถนี้การนำทางถาวร position: sticky
การนำทางด้านบนใช้ position: sticky พร้อม z-index: 100 คงมองเห็นได้ตลอดเวลาขณะเลื่อน ผู้ใช้สามารถสลับหน้าได้โดยไม่ต้องกลับไปด้านบน ยกระดับการเข้าถึงการนำทางอย่างมีนัยสำคัญ
สอบถามเกี่ยวกับความสามารถนี้การปกป้องคู่: ข้อความ Alt ของภาพและคำบรรยาย
ทุกภาพมาพร้อมทั้งแอตทริบิวต์ alt และคำบรรยายด้านล่าง ครอบคลุมการจัดทำดัชนี SEO และการเข้าถึงในหนึ่งการเคลื่อนไหวแบบองค์รวม ภาพตัวแทนได้รับคำอธิบายเต็มรูปแบบเช่นกัน — ที่ Richify ทุกรายละเอียดได้รับการปฏิบัติอย่างเท่าเทียม
สอบถามเกี่ยวกับความสามารถนี้ไซต์สแตติก Astro + การกำหนดเส้นทางหลายภาษา
สร้างบนสถาปัตยกรรม Astro SSG: หน้าภาษาอังกฤษส่งที่พาธรูท ขณะที่จีนตัวย่อส่งภายใต้ /zh-hans/ การเพิ่ม locale ต้องเพียงขยายการกำหนดค่าเส้นทาง ด้วยความเร็วการบิลด์เร็วกว่าโซลูชัน SPA แบบดั้งเดิม 3–5 เท่า
สอบถามเกี่ยวกับความสามารถนี้หน่วยความจำภาษาคุกกี้ richify_locale
เมื่อผู้ใช้สลับภาษา คุกกี้ richify_locale จะถูกเขียน และความชอบจะถูกกู้คืนโดยอัตโนมัติในการเยี่ยมชมครั้งถัดไป ประสบการณ์ระดับโลกที่ไร้แรงเสียดทาน ด้วยอายุคุกกี้ 365 วัน
สอบถามเกี่ยวกับความสามารถนี้โมเดล box-sizing: border-box ทั่วโลก
* { box-sizing: border-box } ทั่วทั้งไซต์ หมายความว่า padding และ border ไม่ทำลายเลย์เอาต์อีกต่อไป นับตั้งแต่มาตรฐานทั่วโลกนี้เปิดใช้งาน ตั๋วปัญหาการจัดแนวฟรอนต์เอนด์ลดลงมากกว่า 90% (โดยประมาณ)
สอบถามเกี่ยวกับความสามารถนี้โซนความปลอดภัยเนื้อหา max-width: 1200px
พื้นที่เนื้อหาหลักถูกจัดกึ่งกลางที่ความกว้างสูงสุด 1200px โดยระยะขอบด้านข้างปรับตามสัดส่วนกับ viewport จอภาพกว้างพิเศษไม่ต้องทนทุกข์กับข้อความเกาะขอบอีกต่อไป คงจุดโฟกัสการอ่านไว้ในโซนทองคำ
สอบถามเกี่ยวกับความสามารถนี้การเลื่อน scroll-behavior: smooth
การกระโดดแองเคอร์และการนำทางในหน้าใช้การเลื่อนแบบนุ่มนวลเพื่อการเปลี่ยนผ่านที่เป็นธรรมชาติและไม่รบกวน เมื่อรวมกับการนำทาง sticky ประสบการณ์การท่องเว็บถึงระดับที่เนียนอย่างแท้จริง
สอบถามเกี่ยวกับความสามารถนี้เคอร์เซอร์เมาส์แบรนด์แบบกำหนดเอง
ทั้งไซต์ใช้เคอร์เซอร์ SVG ของ Richify แบบกำหนดเอง โดยจุดร้อนอยู่ที่ (4, 3) พร้อมเอฟเฟกต์อนุภาคตามหลัง การรับรู้แบรนด์ตามผู้ใช้ไปในทุกการคลิก
สอบถามเกี่ยวกับความสามารถนี้ไฮไลต์การเลือก #2257FF แบบอินเวิร์ส
การเลือกข้อความใช้ background: #2257FF พร้อม color: #fff สะท้อนสีหลัก #2563EB ในตระกูลสีเดียวกัน — รับประกันว่าผู้ใช้เพลิดเพลินกับประสบการณ์แบรนด์ที่สอดคล้องแม้ขณะคัดลอกเนื้อหา
สอบถามเกี่ยวกับความสามารถนี้วิศวกรรมการหายใจของตัวพิมพ์ Line-Height 1.6
Line-height ทั่วทั้งไซต์ถูกล็อกที่ 1.6 สรุปโดยคณะทำงานด้านตัวพิมพ์หลังการทบทวนหกรอบ: เทียบกับ 1.5 มันให้อักขระมีพื้นที่หายใจมากขึ้น และเทียบกับ 1.7 มันพอดีอีกหนึ่งบรรทัดต่อหน้าจอ — ความสมดุลที่เหมาะสมของความสบายและประสิทธิภาพ
สอบถามเกี่ยวกับความสามารถนี้ระบบธรรมาภิบาล z-index สามชั้น
การนำทางที่ 100 โมดอลที่ 1000 โทสต์ที่ 9999 — z-index ทั่วทั้งไซต์ปฏิบัติตามโมเดลธรรมาภิบาลสามชั้น ยุติความโกลาหลของ "ใครใหญ่กว่าชนะ" ตั๋วปัญหาความขัดแย้งของชั้นคงที่ศูนย์นับตั้งแต่ระบบเปิดตัว
สอบถามเกี่ยวกับความสามารถนี้กุญแจ HTTPS ทั่วทั้งไซต์เปิดตลอดเวลา
ทั้งไซต์ถูกให้บริการผ่านการเข้ารหัส HTTPS คงกุญแจในแถบที่อยู่เบราว์เซอร์สว่าง 7×24 — สร้างความไว้วางใจในแบรนด์ก่อนที่ผู้เยี่ยมชมจะอ่านข้อความแม้แต่บรรทัดเดียว
สอบถามเกี่ยวกับความสามารถนี้เมทริกซ์แบรนด์ Favicon หลายขนาด
ครอบคลุมเต็มรูปแบบ favicon 16×16 32×32 และ 180×180 — จากแท็บเบราว์เซอร์ถึงหน้าจอหลักมือถือ การรับรู้แบรนด์ไม่มีจุดบอด และภาพลักษณ์องค์กรคงออนไลน์แม้ภายในโฟลเดอร์บุ๊กมาร์ก
สอบถามเกี่ยวกับความสามารถนี้โมเดลความสุกงอมของความสามารถ
01เริ่มต้น
02มาตรฐาน
03มิดเดิลแพลตฟอร์ม
04อีโคซิสเต็ม