로그인 / 등록 양식 아이디어 및 아름다운 예

현대 웹 전반에 걸쳐 사용자 입력을위한 장소가 점점 늘어나고 있습니다. 여기에는 장바구니, 양방향 웹 게임 및 웹 사이트 등록 양식이 포함됩니다. 디자이너가 페이지 디자인에 집중해야 할뿐만 아니라 양식 미학도 마찬가지로 중요한 역할을하는 것처럼 보입니다..

인터넷 역사를 통해 작성한 양식의 수를 고려하십시오. 포럼, 게시판, 블로그 등 수많은 예제가 있습니다. 이 기사에서는 인 페이지 양식을 디자인하는 몇 가지 중요한 트릭을 살펴볼 것입니다..

객관적인 관점에서 여기의 항목 중 일부를 고려하는 것이 좋습니다. 많은 로그인 및 등록 양식이 한 가지 유형의 사이트에서 잘 작동하지만 최종 검토 결정은 없습니다. “베스트” 해결책. 디자인의 직감을 이용하여 원하는 모양의 조각과 조각을 적용하십시오..

여러 입력 고려

일을 시작하려면 Foundation Six Web Design의 작은 연락 양식을 고려하십시오. 예, 로그인 양식이 아니므로 약간의 주제를 조정할 수 있습니다. 그러나 그들의 페이지 디자인은 매우 인상적이며 약간의 창의력이 달성 할 수있는 것을 보여줍니다.

각 입력 필드는 이름, 전자 메일 등의 개인 연락처 정보를 입력 할 수있는 공간을 제공합니다. 스타일은 일반적인 것보다 훨씬 뛰어나며 필기 필기 유형의 사용자 입력을 제공합니다. 이러한 유형의 서식을 사용하면 사용자가 궁금증에 빠지게되고 훨씬 더 높은 디자인 표준을 달성 할 수 있습니다..

모든 로그인 페이지와 비슷한 스타일을 구현하고 싶을 것입니다. 필자는 같은 스타일의 입력 텍스트 및 옵션 / 선택 메뉴를 사용하는 것을 권장하지 않습니다. 두뇌를 조깅하여 창의력을 발휘할 때 각 요소를 레이아웃하는 방법을 고려하십시오. 레이어 사이에 충분한 공간, 읽기 쉬운 큰 텍스트, 직접 전자 메일 라인에 대한 사이드 바 링크.

jQuery 로그인 상자

이것은 과거 수많은 웹 사이트에서 사용되어 왔으며 반드시 뉴 에이지 디자인에서 볼 수 있습니다. 오랫동안 표준 관행이 로그인 프로세스의 각 단계마다 사용자를 새로운 페이지로 가져 오는 날이있었습니다. 일반적으로 이는 데이터를 입력하는 페이지와 로그인 정보를 처리하기위한 새 페이지를 의미합니다..

Pixel2Life는 새로운 데이터 입력 필드에 대한 환상적인 통찰력을 제공합니다. 홈페이지에서 로그인 링크를 클릭하여 동적 jQuery 기반 로그인 상자를 열 수 있습니다. 이 양식에는 로그인 정보의 자격 증명을 검사하는 외부 PHP 스크립트에 대한 Ajax 호출이 포함되어 있으며 일단 처리되면 액세스를 허용하거나 거부합니다.

또 한 걸음 더 나아가서 기민성은 로그인 상자 바로 아래에 등록 링크가 있음을 알 수 있습니다. 이것은 웹 사이트에 등록하려고하지만 등록 링크를 찾을 수없는 사람들을 위해 훨씬 더 부드러운 사용자 경험을 제공합니다.

사용자가 계정을 갖고 있지 않지만 계정을 만들고 싶으면 버그 페이지가없는 상태에서 등록 페이지로 이동합니다. 로그인 상자는 여전히 자신의 계정에 액세스 할 수있는 실행 가능한 옵션이지만,이 옵션을 사용하면 새로운 등록자의 높은 수익과 더 많은 양을 얻을 수 있습니다.

간단한 한 페이지 등록

우리가 볼 수있는 또 다른 변화 패러다임은 새로운 계정 등록에 대한 세부 사항이 부족하다는 것입니다. 사용자가 데이터를 채우기 위해 조급해지고 있다고 가정 할 때 이것이 반드시 나쁜 통계는 아닙니다. 사실 숫자는 짧은 등록 페이지를 가진 웹 사이트를 제안합니다. 무거운 매일 새로운 사용자 목록.

Sikbox는 방문자가 웹 사이트에 대한 자체 검색 창을 만들 수있는 간단한 옵션을 제공합니다. 유일한 요구 사항은 검색 결과를 제공하는 사용자 정의 도메인입니다. 입력 필드가 크고 텍스트는 읽기가 쉽고 전혀 광고가 없다. 사용자가 검색 양식을 작성하는 작업을 방해합니다.!

이제는 포럼이나 블로그 아카이브에 대한 등록 페이지를 만들 때 가장 좋은 양식이 아닙니다. 이것들은 표준 정의에 따라 최소한 전자 메일 주소 / 사용자 이름 조합과 암호 유형을 요구합니다. 일부 신세대 웹 응용 프로그램은 등록 프로세스를보다 빠르게 만들기 위해 사용자에게 동적 암호를 생성합니다.

물론, 여기서의 절충은 많은 사람들이 익숙한 자신의 암호를 생성하기 위해 사용자의 통제력이 부족합니다..

번쩍 거리는 효과 만들기

내가 가진 최고의 가입 경험 중 하나는 첫 번째 Tumblr 계정을 만드는 것입니다. 사이트의 홈 페이지는 새로운 CSS3 하이라이트 / 페이드 효과로 서로 직접적으로 배치되는 로그인 양식과 가입 양식을 제공합니다.

이 체계적인 접근 방식은 Pixel2Life의 jQuery 로그인 영역과 유사합니다. 그러나 Tumblr과의 차이점은 네트워크가 블로그가없는 사용자에게는 콘텐츠를 제공 할 수 없다는 것입니다 (다른 사용자의 계정은 제외). tumblr의 진정한 혜택은 블로그를 만들고 다른 사람들을 따르는 것입니다. 따라서 첫 페이지의 주요 목표는 계정을 만들거나 로그인하는 것입니다..

이 시스템에는 몇 가지 버그가 있습니다. 특히 IE6 / IE7에서는 이러한 새로운 CSS 속성을 지원하지 않습니다. 또한 홈 페이지에는 라벨 요소를 양식 입력 값에 추가하는 시스템이 사용됩니다. 기본적으로 “태만” 이메일 / 비밀번호 상자에 사용되는 문자.