10 ฟรี CSS & JavaScript Onboarding User Interfaces

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

และด้วย UI การเริ่มต้นใช้งาน CSS และ JavaScript ฟรีเหล่านี้ คุณจะมีแนวคิดมากมายที่นำเสนอทั้งแรงบันดาลใจและข้อมูลโค้ดเพื่อช่วยคุณในการเริ่มต้น

1. สไลด์ม้าหมุน

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

ลองดูการสาธิตสไลด์แบบหมุนที่สร้างโดย Nick Wanninger เพื่อดูว่าฉันหมายถึงอะไร

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

2. โต้ตอบ UI รายวัน

Jack Oliver ได้ออกแบบปากกา React Daily UI ขึ้นมาใหม่ตั้งแต่ต้น และเป็นหนึ่งในประสบการณ์การเริ่มต้นใช้งานที่เก๋ไก๋ที่สุดที่ฉันเคยเห็น

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

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

3. หน้าจอออนบอร์ด

ปากกานี้ไม่เพียงแต่มีอินเทอร์เฟซที่น่าทึ่งสำหรับการออนบอร์ด แต่ยังมีแอนิเมชั่นแบบกำหนดเองให้บูตอีกด้วย

นักพัฒนาซอฟต์แวร์ Jeff Ham รู้วิธีการของเขาในอินเทอร์เฟซและสร้างหน้าจอการเริ่มต้นใช้งานที่ไร้ที่ตินี้ มันอาศัย JavaScript เพื่อสร้างแอนิเมชั่น "หน้าจอถัดไป" และเหตุการณ์สลับสำหรับการคลิก/แตะของผู้ใช้

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

4. Boardal

ข้อมูลโค้ด Boardal นี้ค่อนข้างพิเศษเนื่องจากไม่ใช่สิ่งที่คุณมักจะเห็น

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

โปรดทราบว่าวิธีนี้ใช้ได้ผลดีที่สุดบนเดสก์ท็อปเพราะใช้เอฟเฟกต์โมดอล (ไม่เหมาะสำหรับหน้าจอขนาดเล็ก)

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

5. ไกด์ทัวร์

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

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

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

โดยรวมแล้ว นี่เป็นวิธีการเริ่มต้นที่ฉันชอบ แม้ว่าจะต้องใช้ความพยายามอีกเล็กน้อยในการตั้งค่า แต่การสาธิตนี้อย่างน้อยก็ให้เทมเพลตแก่คุณในการเริ่มต้น

6. ทัวร์วัสดุ

วิธีการทัวร์ชมทางเลือกหนึ่งคือการทัวร์ชมแบบก้าวหน้าอัตโนมัติที่เน้นคุณลักษณะเฉพาะ

ตัวอย่างที่ดีที่สุดที่ฉันพบคือปากกานี้สร้างโดย Gregor Adams โดยอิงตามหลักเกณฑ์ด้านเนื้อหาและใช้แวดวงที่ไฮไลต์เพื่อแสดงส่วนต่างๆ ของหน้า เทคนิคนี้สมบูรณ์แบบถ้าคุณมีอินเทอร์เฟซที่ซับซ้อน มาก พร้อมคุณสมบัติมากมาย

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

ฉันรู้ว่าวิธีนี้ไม่เหมาะกับทุกเว็บไซต์ แต่ถ้าคุณชอบอินเทอร์เฟซ ฉันขอแนะนำให้ลองใช้เป็นอย่างยิ่ง

7. การเริ่มต้นใช้งานแอพ Android

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

คู่มือการเริ่มต้นใช้งานนี้โดย Mat Swainson เป็นตัวอย่างเล็กๆ น้อยๆ ทว่าเปี่ยมด้วยคารมคมคายของสิ่งที่สามารถทำได้สำหรับแอปสมาร์ทโฟน

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

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

8. อิออนอินโทร

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

นักพัฒนาซอฟต์แวร์ Clifford Fajardo ได้สร้างอินโทร Ionic ออนบอร์ดที่ทำงานบนเฟรมเวิร์ก JavaScript เท่านั้น รองรับการโต้ตอบบนมือถือทั้งหมด เช่น การแตะ การปัด และแม้กระทั่งรองรับตัวเลือกสำหรับการแตะสองครั้งหากคุณต้องการคุณสมบัตินั้น

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

9. แบบฟอร์มแนวตั้ง

ด้วยแอนิเมชั่น UI ของเยลลี่เล็กน้อยและการออกแบบที่เรียบง่ายอย่างแท้จริง รูปทรงแนวตั้งนี้จึงมีเอกลักษณ์เฉพาะตัว

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

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

10. คำแนะนำเครื่องมือทัวร์

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

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

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