บทความ IT เจ๋งๆ

5 เทคนิคออกแบบ UI ด้วย CSS ที่จะทำให้ Users ประทับใจตั้งแต่แรกเห็น

23-พ.ค.-25

คัมภีร์เทพ IT

มันไม่ง่ายเลยที่จะสร้างงานออกแบบที่โดดเด่น ท่ามกลาง Trends ที่เปลี่ยนแปลงอย่างรวดเร็วและความคาดหวังของ Users ในปัจจุบัน คุณอาจจะเป็น Developer ที่เคยใช้เวลานานกับ Tutorials และ Websites ต่าง ๆ เพื่อหาค้นหาไอเดียการออกแบบที่น่ารักและน่าทึ่ง ซึ่งบทความนี้จะมาแนะนำ 5 เทคนิคออกแบบ UI ด้วย CSS ที่จะทำให้ Users ประทับใจตั้งแต่แรกเห็น

1. Custom Cursor – Cursor แบบกำหนดเอง

นี่เป็น Feature ที่เท่มาก ซึ่งพวกเรามักจะได้เห็นในเกมต่าง ๆ และมันไม่ได้ช่วยแค่ในเรื่องของ User Experience ในเกมเท่านั้น แต่ยังใช้กับ Website ได้อีกด้วย

และนี่ก็คือตัวอย่างวิธีเปลี่ยน Default Cursor ของระบบปฏิบัติการให้เป็นรูปแบบที่กำหนดเอง:

เคล็ดลับ: อันที่จริง PNG ก็สามารถใช้งานได้ แต่ SVG จะให้ความคมชัดมากกว่า และควรใช้ขนาดไม่เกิน 32x32 พิกเซล มิฉะนั้นอาจเกิดอาการกระตุกได้

ตอนนี้เราได้ Static Custom Cursor แล้ว แต่อย่างที่คุณคิด เราน่าจะเพิ่มลูกเล่นให้มันได้อีก

วิธีการก็คือ สร้าง HTML Element ที่เคลื่อนไหวตามการเคลื่อนที่ของ Mouse (ซึ่งเราซ่อนไว้) แล้วปรับแต่งรูปลักษณ์เองได้ตามต้องการ

เพิ่ม CSS แบบนี้เข้าไป:

และเพื่อให้มันเคลื่อนไหวตาม Mouse ให้เพิ่ม JavaScript Code แบบด้านล่างนี้เข้าไป:

แต่เดี๋ยวก่อน อันที่จริงเรายังสามารถพัฒนาให้ดียิ่งขึ้นไปกว่านี้อีก

อย่างเช่น คุณสามารถให้ Cursor ขยายขึ้นเมื่อเอา Mouse ไป Hover:

หรือสร้าง Magnetic Cursor Effect (Parallax Style):

และสุดท้ายแต่ไม่ท้ายสุด คือ Click Animations:

และตอนนี้ คุณก็สามารถปรับแต่งพฤติกรรมของ Cursor ใน CSS ได้แล้ว:

เชื่อว่า คุณคงสนุกกับ Cursor กันมาพอสมควรแล้ว เราไปดูเทคนิคถัดไปกันเลย

2. Hover-Reveal Text Masking – แสดง Effect ของข้อความตามการ Hover

อยากให้คุณลองดูสิว่า มันดูเจ๋งขนาดไหน:

นี่คือวิธีการทำ:

คุณยังสามารถใช้กับ Headlines, Links หรือสิ่งอื่น ๆ ที่คุณสามารถเอา Mouse ไป Hover ได้

3. CSS Scroll-Driven Animations – Animations ที่ทำงานตามการ Scroll หน้าจอ

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

นี่คือตัวอย่างวิธีทำแบบง่าย ๆ:

เราจะใช้ animation-timeline: view() และ animation-range เพื่อให้ Animation ทำงานตามการ Scroll หน้าจอ

ข้อควรระวังเรื่อง Browser ที่รองรับ:

  • Chrome 115 ขึ้นไป
  • Edge 115 ขึ้นไป
  • Safari Tech Preview
  • ยังไม่รองรับใน Firefox

4. Cyberpunk UI – Interface สุดล้ำสไตล์โลกอนาคต

คุณมี Website หรือ App ที่เกี่ยวกับสินค้าเทคโนโลยีใช่ไหม? ถ้าใช่ก็ถือว่าเหมาะมากสำหรับคุณ

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

นี่คือ วิธีการทำ:

5. Self-Drawing SVG-Shapes – Animation วาดเส้น SVG ด้วยตัวเอง

คุณสามารถใช้เทคนิคนี้ใน Website โดยให้ Logo มีการเคลื่อนไหว หลังจาก Load Page เสร็จแล้ว

มันดูเจ๋งใช่ไหม ต่อไปเรามาดูกันเลยว่าจะทำยังไง

ขั้นแรก เราต้องมี SVG Path เพื่อที่จะสร้างภาพเคลื่อนไหวได้ โดยต้องใช้ SVG แบบ Inline ซึ่งฝังอยู่ใน HTML เท่านั้น จึงจะสามารถทำ Animation นี้ได้

เมื่อคุณมี Path แล้ว ก็มาสร้าง Animation ด้วย CSS กัน:

และนี่คือผลลัพธ์ที่ได้:

แล้วมันทำงานอย่างไร:

  • stroke-dasharray: กำหนดความยาวของเส้นและช่องว่างในเส้น
  • stroke-dashoffset: เลื่อนจุดเริ่มต้นของเส้น เมื่อตั้งค่าเป็นความยาวทั้งหมดของเส้นทาง เส้นทั้งหมดจะถูกซ่อน
  • เมื่อทำการ Animate stroke-dashoffset: 400 → 0 เส้นจะค่อย ๆ ปรากฏจากต้นจนจบ

สรุป

และนี่ก็เป็น 5 เทคนิคออกแบบ UI ด้วย CSS ที่จะทำให้ Users ประทับใจตั้งแต่แรกเห็น ซึ่งเป็นเทคนิคที่น่าสนใจที่จะช่วยให้ Website ของคุณดูโปรขึ้น ตั้งแต่ Cursor สุดเจ๋ง ไปจนถึง Animation ที่น่าสนใจ ลองนำไปประยุกต์ใช้กันได้เลย

ที่มา: https://medium.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ