Ý tưởng đăng nhập / mẫu đăng ký và ví dụ đẹp

Tất cả trên web hiện đại, chúng tôi đang thấy số lượng ngày càng tăng cho đầu vào của người dùng. Chúng bao gồm giỏ mua hàng, trò chơi web tương tác và các hình thức đăng ký trang web chắc chắn nhất. Dường như các nhà thiết kế không chỉ nên tập trung vào thiết kế trang, mà hình thức thẩm mỹ cũng đóng vai trò quan trọng không kém.

Xem xét có bao nhiêu hình thức bạn có thể đã điền trong quá trình lịch sử Internet của bạn. Có vô số ví dụ về những điều này từ các diễn đàn, bảng tin, blog, và nhiều hơn nữa. Trong bài viết này, chúng tôi sẽ xem xét một số thủ thuật tuyệt vời để thiết kế các biểu mẫu trong trang của bạn.

Sẽ là khôn ngoan khi xem xét một số mặt hàng ở đây từ góc độ khách quan. Mặc dù nhiều biểu mẫu đăng nhập và đăng ký hoạt động tốt với một loại trang web, nhưng không có phán quyết cuối cùng về những gì “tốt” dung dịch. Sử dụng trực giác thiết kế của bạn để áp dụng các bit và miếng từ các hình thức bạn mong muốn.

Xem xét nhiều đầu vào

Để bắt đầu mọi thứ, hãy xem xét một hình thức liên lạc nhỏ từ Thiết kế web Foundation Six. Có, đây không phải là một hình thức đăng nhập để nó có thể lèo lái một chút chủ đề. Tuy nhiên, thiết kế trang của họ rất ấn tượng và nó cho bạn thấy những gì một chút sáng tạo có thể đạt được.

Mỗi trường nhập liệu cung cấp chỗ cho bạn nhập thông tin liên hệ cá nhân - tên, e-mail, v.v ... Các kiểu vượt xa thông thường, cung cấp đầu vào của người dùng trong một loại thư pháp viết tay. Kiểu định dạng này sẽ giữ cho người dùng của bạn luôn ở trạng thái tuyệt vời và đạt được mục tiêu về tiêu chuẩn thiết kế cao hơn nhiều.

Bạn sẽ muốn triển khai các kiểu như thế này tương tự như tất cả các trang đăng nhập của bạn. Tôi chắc chắn sẽ không khuyên bạn nên sử dụng cùng một kiểu văn bản đầu vào và các menu tùy chọn / chọn. Khi vận hành trí não của bạn để sáng tạo, hãy xem xét cách sắp xếp từng yếu tố: nhiều khoảng trống giữa các lớp, văn bản lớn dễ đọc và thậm chí liên kết thanh bên với dòng e-mail trực tiếp của chúng.

Các hộp đăng nhập jQuery

Điều này đã được sử dụng trên vô số trang web trong quá khứ và chắc chắn sẽ được nhìn thấy trong các thiết kế thời đại mới. Lâu rồi là những ngày mà các thông lệ tiêu chuẩn sẽ đưa người dùng lên một trang mới cho mỗi bước của quy trình đăng nhập. Thông thường, điều này có nghĩa là một trang để nhập dữ liệu của bạn và cũng là một trang mới để xử lý thông tin đăng nhập.

Pixel2Life cung cấp một số cái nhìn sâu sắc tuyệt vời về một lĩnh vực nhập dữ liệu mới. Từ trang chủ của họ, bạn có thể nhấp vào liên kết đăng nhập và hiển thị hộp đăng nhập do jQuery cung cấp. Biểu mẫu này chứa lệnh gọi Ajax tới tập lệnh PHP bên ngoài để kiểm tra thông tin đăng nhập của thông tin đăng nhập của bạn và sau khi được xử lý, sẽ cấp hoặc từ chối quyền truy cập.

Đi thêm một bước nữa, sắc sảo có thể nhận thấy một liên kết đăng ký ngay bên dưới hộp đăng nhập. Điều này mang lại trải nghiệm người dùng mượt mà hơn nhiều cho những người muốn đăng ký trang web nhưng không thể tìm thấy liên kết đăng ký.

Nếu người dùng không có tài khoản nhưng muốn tạo một tài khoản, điều này sẽ đưa họ lên trang đăng ký mà không có bất kỳ lỗi nào xảy ra. Hộp đăng nhập vẫn sẽ là một tùy chọn khả thi để truy cập vào tài khoản của bạn, tuy nhiên, cho phép tùy chọn này nhường chỗ cho lợi nhuận lớn hơn và số lượng người đăng ký mới cao hơn.

Đăng ký một trang đơn giản

Một mô hình thay đổi khác mà chúng ta thấy là thiếu chi tiết như vậy cho đăng ký tài khoản mới. Đây không hẳn là một thống kê tồi khi cho rằng người dùng đang thiếu kiên nhẫn trong việc điền dữ liệu. Những con số thực sự gợi ý các trang web có trang đăng ký ngắn hơn garner nặng hơn danh sách người dùng mới hàng ngày.

Sikbox cung cấp một tùy chọn gọn nhẹ cho khách truy cập để tạo hộp tìm kiếm của riêng họ cho một trang web. Yêu cầu duy nhất là miền tùy chỉnh của riêng bạn để cung cấp kết quả tìm kiếm. Các trường đầu vào lớn, văn bản rất đơn giản để đọc và có hoàn toàn không có quảng cáo để đánh lạc hướng người dùng khỏi nhiệm vụ xây dựng mẫu tìm kiếm của họ!

Bây giờ đây không phải là hình thức tốt nhất để xây dựng khi tạo trang đăng ký của riêng bạn cho một kho lưu trữ diễn đàn hoặc blog. Theo định nghĩa tiêu chuẩn, chúng sẽ yêu cầu một số loại kết hợp địa chỉ email / tên người dùng cùng với mật khẩu. Một số ứng dụng web thời đại mới sẽ tạo mật khẩu động cho người dùng chỉ để làm cho quá trình đăng ký nhanh hơn.

Tất nhiên, sự đánh đổi ở đây là thiếu sự kiểm soát đối với phần cuối của người dùng để tạo mật khẩu của riêng họ mà nhiều người đã quen với.

Tạo hiệu ứng hào nhoáng

Một trong những trải nghiệm đăng ký tuyệt vời nhất tôi từng có là tạo tài khoản Tumblr đầu tiên của mình. Trang chủ của trang web của họ cung cấp cả hình thức đăng nhập và đăng ký được đặt trực tiếp bên dưới nhau với các hiệu ứng làm nổi bật / mờ CSS3 mới.

Cách tiếp cận có hệ thống này tương tự đối với khu vực đăng nhập jQuery của Pixel2Life. Tuy nhiên, điểm khác biệt với Tumblr là mạng không thể cung cấp bất kỳ nội dung nào cho những người không có blog (ngoài việc duyệt các tài khoản khác). Lợi ích thực sự từ tumblr là tạo blog của riêng bạn và theo dõi những người khác - do đó, mục tiêu chính của bạn trên trang đầu là để tạo tài khoản hoặc đăng nhập.

Có một số lỗi với hệ thống này. Đáng chú ý nhất là trong IE6 / IE7 không hỗ trợ các thuộc tính CSS mới này. Cũng được sử dụng trên trang chủ là một hệ thống để thêm các thành phần nhãn vào các giá trị đầu vào của biểu mẫu - về cơ bản ghi đè “mặc định” ký tự được sử dụng cho hộp thư điện tử / email.

Các nhãn này giảm dần sự tập trung trong các trình duyệt hiện đại như Chrome / Firefox. Nhưng không may mắn như vậy với các trình duyệt không dùng nữa, như bạn có thể tưởng tượng, khá khó chịu khi cố đọc lại dữ liệu đầu vào của chính bạn!

Hơn 20 ví dụ về thiết kế mẫu đẹp

Dưới đây là một bộ sưu tập nhanh chóng của một số thiết kế mẫu đăng nhập tuyệt vời. Chúng được chọn từ khắp nơi trên web và bao gồm nhiều dạng ứng dụng web. Nếu bạn có đề xuất cho các trang web khác, vui lòng chia sẻ chúng trong phần bình luận bên dưới!

Tin tức snoggle