15 แบบฟอร์มการเข้าสู่ระบบที่น่าประทับใจสำหรับแรงบันดาลใจในการออกแบบ
เผยแพร่แล้ว: 2020-09-02แบบฟอร์มการเข้าสู่ระบบมีมาตั้งแต่เริ่มมีแนวคิดของเว็บไซต์ และเป็นส่วนสำคัญของเว็บไซต์ใดๆ ปฏิสัมพันธ์ของมนุษย์กับหน้าเข้าสู่ระบบมีการเปลี่ยนแปลงไปตามกาลเวลา ตอนแรกเราเคยใส่อีเมลหรือ ID และรหัสผ่านเพื่อเข้าสู่ระบบ ตอนนี้ เรามี Touch ID บนโทรศัพท์ สแกนใบหน้า และวิธีอื่นๆ ในการเข้าสู่ระบบ ด้วยมุมมองของการออกแบบ แบบฟอร์มการเข้าสู่ระบบมีการออกแบบที่ดูน่าเบื่อและแบนมาก แต่ในปัจจุบันนี้ เหล่าดีไซเนอร์ได้สร้างสรรค์งานออกแบบที่น่าประทับใจและแปลกใหม่ซึ่งเต็มไปด้วยสีสันที่สดใส
บล็อกนี้เน้นที่รูปแบบการเข้าสู่ระบบที่น่าประทับใจ ซึ่งคุณสามารถสำรวจหรือดึงแรงบันดาลใจจากการสร้างแบบฟอร์มการเข้าสู่ระบบของนักออกแบบ ในฐานะนักออกแบบ ให้เราตรวจสอบเว็บไซต์ที่มีแบบฟอร์มการเข้าสู่ระบบที่มีชีวิตชีวาและสวยงามพร้อมใช้งาน
1. หวาน:
Sweet เป็นเว็บไซต์ที่เกี่ยวข้องกับผู้มีอิทธิพลและศิลปิน คุณสามารถเป็นศิลปินหรือผู้มีอิทธิพลได้หากคุณใช้ไซต์ เว็บไซต์มีธีมสีที่ดูคล้ายกับลูกอมไอศกรีม นอกจากนี้โลโก้ของเว็บไซต์ยังมีขนมไอศกรีมอยู่ด้วย รูปแบบการเข้าสู่ระบบของเว็บไซต์นี้สวยงามมาก โดยธีมสีฟ้าจะค่อยๆ เปลี่ยนไปเป็นเฉดสีม่วงต่างๆ คุณสามารถเข้าสู่ระบบเว็บไซต์ด้วยชื่อผู้ใช้ หมายเลขโทรศัพท์ หรือที่อยู่อีเมล นอกจากนี้ยังให้คุณเข้าสู่ระบบผ่าน Facebook, Twitter และ Google หากโฟกัสอยู่ที่ช่องป้อนข้อมูลใด ๆ เฉดสีของขีดเส้นใต้จะเปลี่ยนเป็นสีน้ำเงิน
2. Zendesk:
Zendesk คือเว็บไซต์ที่จัดการการบริการลูกค้าและเป็นที่รู้จักว่าสามารถแก้ไขปัญหาของลูกค้าได้ บริษัทนี้ตั้งอยู่ในแคลิฟอร์เนีย สหรัฐอเมริกา หน้าเข้าสู่ระบบของพวกเขานั้นเรียบง่ายมากในการออกแบบ คุณสามารถดูเฉพาะช่องป้อนข้อมูลที่คุณต้องมีชื่อโดเมนย่อยของคุณ ไม่มีอะไรอื่นที่จะปล่อยให้ความสนใจของคุณหลงทางจากแบบฟอร์มการเข้าสู่ระบบ มีลิงค์อื่นๆ อยู่ใต้แบบฟอร์มการเข้าสู่ระบบ แต่ไม่มีลิงก์หรือรูปภาพส่วนหัวและส่วนท้ายบนเว็บไซต์ ซึ่งจะช่วยให้คุณโฟกัสไปที่การเข้าสู่ระบบเท่านั้นและเท่านั้น
3. สแควร์สเปซ:
Squarespace เป็นอีกเว็บไซต์หนึ่งที่จัดการการตลาดดิจิทัลและมีเทมเพลตการออกแบบที่พร้อมใช้งาน พวกเขามีโฮมเพจใหม่พร้อมการออกแบบที่ประณีต แต่หน้าเข้าสู่ระบบของพวกเขามีการออกแบบที่เรียบง่าย หน้าเข้าสู่ระบบนี้ยังไม่มีส่วนหัวและส่วนท้ายเพื่อเบี่ยงเบนความสนใจของผู้ใช้จากกระบวนการเข้าสู่ระบบ ช่องป้อนข้อมูลจะขอให้คุณป้อนที่อยู่อีเมลและรหัสผ่าน นอกจากนั้น คุณยังสามารถเข้าสู่ระบบโดยใช้บัญชี Google, Apple, Facebook และ Twitter CTA การเข้าสู่ระบบของพวกเขานั้นเรียบง่ายแต่มีประสิทธิภาพเช่นกัน
4. ความคืบหน้า:
Headway คือเว็บไซต์ที่ให้บริการบันทึกการเปลี่ยนแปลงเพื่อให้ลูกค้าทราบเกี่ยวกับบริการหรือผลิตภัณฑ์เฉพาะ เว็บไซต์ทั้งหมดของพวกเขาถูกทาสีในธีมสีขาวในการออกแบบที่ตรงไปตรงมาที่สุด พวกเขามีหน้าเข้าสู่ระบบที่เรียบง่ายยิ่งขึ้นซึ่งไม่มีรายละเอียดส่วนหัวหรือส่วนท้ายที่สามารถทำให้คุณเสียสมาธิ มีเพียงรูปภาพที่ขอบด้านซ้ายเท่านั้น พวกเขามีหน้าเข้าสู่ระบบซึ่งคุณสามารถกรอกที่อยู่อีเมลและรหัสผ่านของคุณ คุณยังได้รับอนุญาตให้เข้าสู่ระบบด้วยรายละเอียดบัญชี Google ของคุณ หน้าเข้าสู่ระบบนั้นเรียบง่าย โดยมีพื้นหลังสีขาวและไม่มีองค์ประกอบส่วนต่อประสานผู้ใช้ที่สวยงาม
5. VSCO:
VSCO เป็นแอปพลิเคชั่นแก้ไขรูปภาพที่มีเว็บไซต์ในชื่อเดียวกัน ไซต์มีการเลื่อนแบบพารัลแลกซ์และมีส่วนติดต่อผู้ใช้ใหม่ แต่แบบฟอร์มการเข้าสู่ระบบบนเว็บไซต์เป็นแบบฟอร์มสีขาวล้วนที่มีการออกแบบที่เรียบง่าย คุณสามารถเข้าสู่ระบบผ่านที่อยู่อีเมลหรือชื่อโปรไฟล์และรหัสผ่านของคุณ หน้านี้ยังให้คุณไปที่หน้าแรกของ VSCO, ฟีด, หน้าลงทะเบียน และหน้าเพื่อดาวน์โหลดแอปพลิเคชั่น VSCO มีเฉพาะโลโก้ที่แสดงถึงชุมชนที่ด้านบนของหน้าแบบฟอร์มการเข้าสู่ระบบ
6. หยด:
Drip เป็นเว็บไซต์ที่ออกแบบสิ่งต่าง ๆ จากแนวการ์ตูน ภาพยนตร์ วิดีโอ และเพลง เช่นเดียวกับ VSCO และ Squarespace แบบฟอร์มการเข้าสู่ระบบของเว็บไซต์นี้สร้างด้วยธีมสีขาว ที่ด้านบน คุณจะเห็นว่าพวกเขาเขียนว่า "เข้าสู่ระบบ Kickstarter" แต่ Drip เป็นส่วนหนึ่งของทีม Kickstarter คุณสามารถเข้าสู่ระบบเว็บไซต์โดยใช้ Kickstarter ID และรหัสผ่าน พวกเขายังมีลิงค์ลืมรหัสผ่านพร้อมกับรายละเอียดการเข้าสู่ระบบ คุณยังสามารถเข้าสู่ระบบโดยใช้รายละเอียดการเข้าสู่ระบบ Facebook เมื่อคุณเลื่อนไปที่ด้านล่างของหน้า คุณจะเห็นว่า Drip เป็นส่วนหนึ่งของตระกูล Kickstarter พวกเขาไม่มีลิงก์อื่นใดที่ย้อนกลับไปยังหน้าต่างๆ ของเว็บไซต์ หากคุณต้องการเยี่ยมชมเว็บไซต์ คุณเพียงแค่คลิกโลโก้ Drip ที่ด้านบนของแบบฟอร์มการเข้าสู่ระบบ
7. มองย้อนกลับ:
Lookback เป็นเว็บไซต์ที่ช่วยให้ผู้ใช้ทำงานต่างๆ ได้สำเร็จผ่านแอปพลิเคชันของตน พวกเขามีหน้าแบบฟอร์มการเข้าสู่ระบบที่ใช้งานได้จริงแต่ดูตรงไปตรงมา พวกเขาเขียนด้วยอักษรตัวใหญ่และหนาว่า “ยินดีที่ได้พบคุณอีกครั้ง!” ข้างใต้นั้น พวกเขาได้เขียนว่า "ลงชื่อเข้าใช้เพื่อไปต่อ" ด้วยตัวอักษรขนาดเล็ก คุณสามารถเข้าสู่เว็บไซต์ของพวกเขาผ่านที่อยู่อีเมลของคุณหรือชื่อผู้ใช้และรหัสผ่านที่ได้รับมอบหมาย พวกเขามีปุ่มลงชื่อเข้าใช้สีเขียวที่กำหนดปุ่ม CTA และสังเกตได้ง่ายว่าสิ่งแรกที่เมื่อคุณเปิดเพจ ส่วนท้ายของหน้ามีลิงก์บางส่วน แต่ส่วนหัวยังคงว่างเปล่า
8. พาย:
Paddle เป็นเว็บไซต์ที่ไม่อนุญาตให้คุณเข้าถึงส่วนอื่นๆ ของเว็บไซต์เหมือนกับที่เว็บไซต์อื่นๆ อนุญาต หน้าเข้าสู่ระบบของพวกเขามีโลโก้ของเว็บไซต์พร้อมกับข้อมูลการเข้าสู่ระบบ คุณสามารถลงชื่อเข้าใช้เว็บไซต์ของตนโดยใช้ที่อยู่อีเมลและรหัสผ่าน ปุ่มเข้าสู่ระบบสีน้ำเงินมีเฉดสีฟ้าที่เหมาะสม น่าสนใจพอที่จะดึงดูดความสนใจของผู้ใช้ นอกจากนี้ เฉดสีฟ้านี้ยังสามารถกำหนดปุ่มเรียกร้องให้ดำเนินการได้อย่างถูกต้อง คุณยังสามารถรีเซ็ตรหัสผ่านของคุณด้วยลิงก์ที่ให้ไว้ใต้แบบฟอร์มการเข้าสู่ระบบ
9. อูเบอร์:
Uber เป็นเว็บไซต์จองรถแท็กซี่ยอดนิยม และยังมีบริการในรูปแบบแอปพลิเคชันมือถืออีกด้วย ยักษ์ใหญ่ด้านบริการแท็กซี่จับผู้ฟังโดยพายุทันทีหลังจากเปิดตัว พวกเขาได้ออกแบบแบบฟอร์มการเข้าสู่ระบบที่แตกต่างกัน: แบบฟอร์มสำหรับคนขับและแบบฟอร์มอื่นๆ สำหรับผู้โดยสาร ให้เราดูที่แบบฟอร์มการเข้าสู่ระบบที่เว็บไซต์ให้ไว้สำหรับไดรเวอร์ ที่ด้านบนของแบบฟอร์มการเข้าสู่ระบบ คุณจะเห็นโลโก้ Uber เป็นสีดำ ในการลงชื่อเข้าใช้เว็บไซต์ คุณต้องระบุที่อยู่อีเมลที่ลงทะเบียนไว้ คุณสามารถให้รหัสผ่านในหน้าถัดไปหลังจากส่งที่อยู่อีเมลของคุณแล้วกดปุ่มถัดไป ลิงค์ลงทะเบียนจะอยู่ใต้แบบฟอร์มการเข้าสู่ระบบด้วย พวกเขาวางปุ่มถัดไปอย่างชาญฉลาดในสีเข้ม ซึ่งไม่ขาดตอนในการดึงดูดความสนใจเมื่อคุณเปิดหน้า และอย่างที่พวกเขาพูด CTA ควรมีสีที่ต่างออกไปเสมอ นอกจากนี้ CTA ควรเป็นคนแรกที่ปรากฏในระยะใกล้ที่มองเห็นของผู้ใช้
10. เนชั่นแนลจีโอกราฟฟิก:
National Geographic เป็นเว็บไซต์ที่จัดการเครือข่ายโทรทัศน์ของอเมริกา เป็นการร่วมทุนระหว่าง Walt Disney Company และ National Geographic Society หน้าเข้าสู่ระบบของพวกเขามีเอกลักษณ์เฉพาะตัวเหมือนกับการมีอยู่ของพวกเขา หน้าลงชื่อเข้าใช้จะขอที่อยู่อีเมลและรหัสผ่านของคุณ มีการออกแบบที่เรียบง่ายและไม่มีองค์ประกอบแฟนซีเพื่อดึงดูดความสนใจของคุณ แต่พวกเขาได้วางปุ่มลงชื่อเข้าใช้เป็นสีเหลืองอย่างมีกลยุทธ์ ซึ่งก็คือ CTA ของพวกเขาด้วย คุณสามารถลงทะเบียนเป็นผู้ใช้ใหม่ในหน้าเดียวกันโดยคลิกที่ปุ่มสีดำ ส่วนหัวของหน้าดูเหมือนว่าง แต่ส่วนท้ายมีลิงก์บางอย่างที่สามารถพาคุณไปยังบางส่วนของเว็บไซต์ได้
11. Medium.com:
Medium.com เป็นเว็บไซต์ยอดนิยมที่ให้บล็อกเกอร์อัปโหลดบล็อกของตนบนแพลตฟอร์ม เว็บไซต์ของพวกเขาพูดถึงบทความและบล็อกจากโดเมนและช่องต่างๆ แต่หน้าเข้าสู่ระบบของพวกเขาดูน่าสนใจมาก พวกเขาไม่ได้ใช้ CTA ที่น่าสนใจในหน้าเข้าสู่ระบบ แต่ดูเหมือนว่าหน้าจะมีการออกแบบที่เรียบง่าย คุณสามารถเข้าสู่ระบบเว็บไซต์โดยใช้ Google, Facebook, Apple, Twitter และที่อยู่อีเมลของคุณ ความเก่งกาจของการเข้าสู่ระบบบนเว็บไซต์เป็นส่วนที่ดีที่สุดของหน้าเข้าสู่ระบบ คุณสามารถลงทะเบียนกับเว็บไซต์ของพวกเขาได้โดยคลิกที่ลิงค์สร้างหนึ่งลิงค์ พวกเขาไม่มีลิงก์อื่นใดในส่วนหัวและส่วนท้ายของหน้า เฉพาะข้อกำหนดในการให้บริการและนโยบายความเป็นส่วนตัวของลิงก์เว็บไซต์เท่านั้นที่สามารถดูได้ใต้แบบฟอร์มการเข้าสู่ระบบ
12. เดอะวอชิงตันโพสต์:
เดอะวอชิงตันโพสต์เป็นหนังสือพิมพ์อเมริกันที่ตีพิมพ์เป็นประจำทุกวันในกรุงวอชิงตัน ดี.ซี. และพวกเขาได้ดำเนินการเว็บไซต์ภายใต้ชื่อเดียวกันคือ เดอะวอชิงตันโพสต์ เมื่อมาถึงหน้าเข้าสู่ระบบ พวกเขาได้ออกแบบแบบฟอร์มการเข้าสู่ระบบที่ตรงไปตรงมาด้วยพื้นหลังสีน้ำเงินเข้ม คุณสามารถลงชื่อเข้าใช้ด้วยที่อยู่อีเมลของคุณ หรือคุณสามารถเลือกลงชื่อเข้าใช้ผ่านลิงก์ที่ส่งไปยังที่อยู่อีเมลของคุณ นอกจากนี้ยังช่วยให้คุณสามารถเข้าสู่ระบบด้วย Amazon, Facebook, Google และ Apple ใต้แบบฟอร์มการเข้าสู่ระบบ คุณยังสามารถมองเห็นลิงก์สมัครใช้งาน ที่ส่วนท้ายของหน้าเข้าสู่ระบบ คุณจะพบลิงก์ไปยังนโยบายความเป็นส่วนตัว ความช่วยเหลือ และหน้าติดต่อ
13. Mailchimp:
MailChimp เป็น บริษัท อเมริกันที่ดูแลการตลาดผ่านอีเมลและบริการการตลาดอัตโนมัติตั้งแต่ปี 2544 อย่างที่คุณเห็นว่าเว็บไซต์สร้างด้วยพื้นหลังสีขาว ในทำนองเดียวกัน พวกเขาได้ออกแบบหน้าเข้าสู่ระบบด้วยพื้นหลังสีขาว และแบบฟอร์มการเข้าสู่ระบบจะวางไว้ทางด้านซ้ายของหน้าเว็บอย่างมีกลยุทธ์ ทางด้านขวา คุณจะเห็นข้อมูลเกี่ยวกับพอดแคสต์ล่าสุดของพวกเขา The Jump พวกเขาได้วาง CTA ไว้บนปุ่มเข้าสู่ระบบ คุณสามารถเข้าสู่ระบบเว็บไซต์โดยใช้ที่อยู่อีเมลและรหัสผ่านของคุณเท่านั้น ไม่อนุญาตให้เข้าสู่ระบบผ่านบัญชีโซเชียลมีเดียอื่น ๆ
14. เซโฟรา:
Sephora เป็นบริษัทข้ามชาติของฝรั่งเศสที่ทำธุรกิจเกี่ยวกับผู้ผลิตเครื่องสำอางระดับโลก มีเครื่องสำอางและความงามส่วนตัวประมาณ 3,000 แบรนด์จากทั่วทุกมุมโลก เว็บไซต์ของพวกเขาแสดงผลิตภัณฑ์ทั้งหมดของพวกเขา และเลย์เอาต์ของไซต์ได้รับการออกแบบด้วยองค์ประกอบการโต้ตอบกับผู้ใช้ขาวดำ ส่วนที่น่าตื่นเต้นที่สุดของเว็บไซต์คือหน้าเข้าสู่ระบบ พวกเขาไม่มีหน้าเข้าสู่ระบบส่วนบุคคล แต่พวกเขาได้ออกแบบกล่องป๊อปอัปที่โผล่ออกมาจากหน้าเมื่อคุณคลิกที่ปุ่มลงชื่อเข้าใช้ เช่นเดียวกับ MailChimp คุณต้องใช้ที่อยู่อีเมลของคุณเพื่อลงชื่อเข้าใช้เว็บไซต์ของตน คุณไม่สามารถลงชื่อเข้าใช้เว็บไซต์ของตนโดยใช้บัญชีโซเชียลมีเดีย เช่น Facebook, Amazon และอื่นๆ พวกเขาได้วาง CTA สองชุดในสีที่ตัดกันอย่างมีกลยุทธ์ ปุ่มลงชื่อเข้าใช้จะเป็นสีดำทั้งหมดในขณะที่ปุ่มสร้างบัญชีเป็นสีขาว CTA ทั้งสองเป็นคนแรกที่จะดึงดูดสายตาของคุณ
15. Diprella:
Diprella เป็นเว็บไซต์ชุมชนที่เชื่อมโยงนักออกแบบทั้งหมดจากทั่วโลก และให้พวกเขาแบ่งปันโครงการและแสดงการออกแบบของพวกเขาบนแพลตฟอร์ม เนื่องจากเป็นชุมชนของนักออกแบบ จึงต้องมีหน้าเข้าสู่ระบบที่สวยงาม พวกเขาได้สร้างหน้าเข้าสู่ระบบที่สร้างสรรค์มาก คุณจะเห็นสองหน้าจอเมื่อคุณเปิดหน้าเข้าสู่ระบบของเว็บไซต์ ทางด้านซ้าย คุณจะเห็นหน้าจอเข้าสู่ระบบซึ่งคุณสามารถเข้าสู่ระบบผ่าน ID อีเมลและรหัสผ่านหรือบัญชีโซเชียลมีเดียของคุณ เช่น Facebook แต่ถ้าคุณเป็นผู้ใช้ใหม่ คุณสามารถคลิกที่ปุ่มลงทะเบียนที่ด้านขวาของหน้า เมื่อคุณคลิกปุ่มลงทะเบียน หน้าเข้าสู่ระบบจะซ่อน และหน้าลงทะเบียนจะเลื่อนไปทางขวา พวกเขาอนุญาตให้สร้างบัญชีฟรีพร้อมรายละเอียดเฉพาะที่พวกเขาขอ ปุ่มสมัครใช้งานจะถูกปิดใช้งาน เว้นแต่และจนกว่าคุณจะกรอกรายละเอียดทั้งหมดในช่องป้อนข้อมูล คุณยังสามารถลงทะเบียนโดยใช้บัญชีโซเชียลเน็ตเวิร์ก
หน้าเข้าสู่ระบบเป็นส่วนสำคัญ นักออกแบบจำเป็นต้องออกแบบหน้าเว็บที่ดึงดูดผู้ใช้ที่เชี่ยวชาญด้านเทคโนโลยีในปัจจุบัน ในขั้นต้น เลย์เอาต์นั้นตรงไปตรงมาสำหรับหน้าล็อกอิน เนื่องจากเป็นหนึ่งในจุดสำคัญของการโต้ตอบของผู้ใช้กับเว็บไซต์ แต่ตอนนี้ กฎเกณฑ์ต่างๆ ได้เปลี่ยนไปในทางที่ดีขึ้น และง่ายต่อการมองเห็นการออกแบบที่น่าตื่นเต้นทั่วๆ ไป บล็อกนี้รวบรวมแบบฟอร์มการเข้าสู่ระบบที่มีการออกแบบที่น่าประทับใจ การออกแบบเหล่านี้สามารถใช้เป็นแนวคิดที่สร้างแรงบันดาลใจในการออกแบบแบบฟอร์มการเข้าสู่ระบบตั้งแต่เริ่มต้น ขณะออกแบบแบบฟอร์มการเข้าสู่ระบบ ควรใช้ความระมัดระวัง CTA ทั้งหมด และควรมีรูปลักษณ์ที่สวยงาม