아름다운 검색 창 UI 디자인의 쇼케이스

인터넷에서 흔히 볼 수있는 것입니다. 우리가 웹 사이트에서 찾고있는 것을 얻지 못하면 검색에 의존합니다. 검색 창은 항상 웹 사이트의 필수 부분이었습니다. 콘텐츠 집약적 인 웹 사이트를 운영하는 경우 더욱 어려워집니다. 일반적으로 머리글, 위쪽 탐색 메뉴 또는 세로 막대 (위쪽 겹침) 영역에 배치됩니다. 때로는 사용자에게 더 편리한 검색을 위해 다른 꼬리말을 넣을 수도 있습니다..

우리는 Web 1.0 이후로 먼 길을왔다. 웹 검색은 더 이상 키워드 입력 및 조회 검색. 개발자는 더 많은 기능을 개편하고 추가하여 방문자에게 더 나은 경험을 제공하기 위해 검색 필터링을 사용하여 더 많은 검색 결과를 얻고 입력시 검색 키워드 또는 검색 기록을 제공합니다..

오늘의 글에서는 유망한 기능을 갖춘 아름다운 검색 창을 소개합니다. 웹 사이트를 개선하거나 더 나은 검색 창에 대한 영감을 얻으려는 경우이 게시물은 귀하를위한 것입니다. 점프 후 전체 목록!

PlaylistNow

"I am"이라는 접두어로 시작하는이 검색 모듈은 사용자가 입력하는 동안 쿼리와 일치하는 결과를 지능적으로 일치시키고 나열하려고 시도합니다.

스크롤 검색 모듈

디자이너 Nico Nuzzaci가 제안한이 창의적 검색 창을 사용하면 알파벳 패널을 입력하거나 스크롤하여 검색 할 수 있습니다.

텍스트 박스 목록

이 검색 모듈은 몇 가지 기능의 조합을 가지고 있습니다 : 태그 형식으로 검색 쿼리를 래핑하고 특정 검색 태그를 삭제할 수 있습니다. 또한 자동 완성 기능도 제공됩니다. 친숙한가요? Facebook 태깅 모듈과 유사합니다.!

Remember The Milk

YouTube 검색과 마찬가지로 검색 창은 결과와 일치하는 항목이 있는지 즉시 알려줍니다. 자동 제안 기능의 또 다른 지적인 예.

정통 채용 정보

나는 Authentic Jobs가 이미 Google보다 먼저 검색 결과를 즉시 실행했다고 생각합니다..

콘탱

Kontain의 검색 창을 사용하면 일반 검색을 수행하거나 검색 결과를 "업데이트"또는 "사용자"로만 필터링 할 수 있습니다..

뉴욕 매거진

Kontain과 유사하게, NY Magazine의 검색은 더 깊은 필터링을 허용합니다.

ThemeForest

방문자가 최소한의 시간 내에 원하는 것을 얻을 수 있도록 검색 모듈에서 필터링하는 또 다른 예.

검색, 정렬 및 필터

Brian의 검색 창은 고급 검색 모듈처럼 보이지만 멋진 방식으로 이루어집니다. 검색 버튼을 누르기 전에 어떻게 결과를 표시할지 사용자 정의합니다..

텀블러

사이드 바에있는 미묘하고 작은 검색 모듈 - 깔끔함!

메뉴 페이지

완전한 검색 모듈을 찾고 있지만 공간이 제약 사항이라면이 방법이 유용 할 수 있습니다.

Quotezuki

로고 바로 뒤의 검색 모듈, 놓치기가 정말 어렵습니다..

C Spire Wireless

검색 탭을 가리키면 나타나는 큰 뚱뚱한 검색 상자. 우주를 이용하는 또 하나의 좋은 방법.

Spokeo

아름답게 필터링 된 선택 검색.

바우처 코드

비즈니스 성격을 살펴보면 검색 창 상단 부분을 맞히고 센터에서 바로 잡는 것이 가장 좋은 방법 일 것입니다.

iStockPhoto

다른 사이트와 마찬가지로 iStockPhoto는 독자들에게 엄청난 양의 리소스를 제공하므로 검색을 필터링하는 것이 필수적입니다..

TasteBook

심플하면서도 멋진 검색 창.

Grooveshark

Grooveshark를 사용하면 온라인으로 음악을 듣고 공유 할 수 있습니다. 첫 번째 페이지는 원하는 음악을 검색 할 수있는 검색 상자로 구성됩니다. 완전히 이해가된다..

일자리를 가진 게이머

Google 맞춤 검색의 맞춤 작성 방법에 대한 좋은 예.

데이비드 토론 델

사이트 디자인과 잘 어울리는 멋진 검색 창.

더

• 흔들리는 CSS3 검색 창 만들기 (홍 키아트)
• 성스러운 검색 창 디자인 : 사례 및 모범 사례 (Smashing Magazine)
• 아름다운 CSS3 검색 양식 자습서 (웹 디자이너 벽)