주변 클릭: 원형 마우스 커서 사용

게시 됨: 2020-04-01

최근에 우리는 외롭지만 눈길을 끄는 효과의 12가지 예를 탐색하면서 마우스 커서의 작은 추세에 대해 논의했습니다. 오늘은 또 다른 흥미로운 아이디어로 다시 주목을 받았습니다.

웹 디자이너는 화면을 가로질러 이동하는 우리의 유일한 장치를 가지고 노는 데 특별한 성향이 있는 것 같습니다. 의심할 여지 없이, 커서는 요즘 인기를 얻고 있습니다. 그 이유는 다양할 수 있습니다. 평범한 모든 것에서 벗어나고자 하는 단순한 열망에서 시작하여 웹을 더 나은 곳으로 만들고자 하는 불타는 열망으로 끝납니다.

우리는 인터랙티브 인터페이스의 시대에 들어서고 있습니다. 마우스 커서는 모든 장대한 솔루션의 필수적인 부분입니다. 현재 요구 사항을 충족하고 원활한 경험을 제공하기 위해 약간의 변경을 겪는다는 것은 논리적입니다.

지루한 화살을 버리고 원과 같이 더 우아하고 세련된 것을 선택하여 모양을 실험할 때가 된 것 같습니다. 둥근 모양은 대화형 캔버스 및 애니메이션을 통해 현대적인 인터페이스와 이상적으로 조화를 이룹니다. 자연스럽고 우아한 느낌이 듭니다. 그리고 항상 주변에 어렴풋이 나타나서 눈에 거슬리지 않게 주의를 끌고 있습니다.

라스트 아트 프로젝트 / 마라카

이 작은 추세를 유리하게 활용하는 팀의 Last Art Projects와 Maraka를 살펴보겠습니다.

Last Art Projects는 선 스타일 일러스트레이션과 속이 빈 장식으로 채워진 아름다운 투톤 테마를 가지고 있습니다. 여기서 커서는 개념과 완벽하게 일치합니다. 2개의 원으로 구성되어 있습니다. 앞면의 링은 커서이고 뒷면의 진한 원은 꼬리입니다. 그들은 함께 화면에 자연스럽게 관심을 집중시키는 대상처럼 보입니다.

마지막 예술 프로젝트

Maraka는 커서 모양을 변경했지만 단지 장식용이 아닙니다. 여기에서는 온라인 방문자를 위한 시각적 신호로 사용됩니다. 따라서 슬라이드를 순환하고 싶을 때 왼쪽 또는 오른쪽 화살표를 표시합니다. 링크, 캡션 또는 탐색과 같은 대상 영역에 도달하면 일반 실선 원(상대적으로 크고 반투명한 보조 원 포함)으로 바뀝니다.

마라카

두 가지 예는 단순한 원형이 어떻게 놀라운 일을 할 수 있는지 보여줍니다. 그것은 행동 면에서 너무 자연스럽고 우아하여 현대의 모든 사치품에 이상적인 파트너처럼 느껴집니다. 다른 환상적인 예도 고려해 보겠습니다.

곽인막

Kwok Yin Mak은 전통적인 흑백 색상과 세로 리듬으로 넓은 디자인을 가지고 있습니다. 일본 캐릭터는 여기서 쇼를 훔칩니다. 분위기는 세련되고 정통합니다. 여기에서 기본 화살표 모양이 원시적으로 보일 수 있지만 원형 모양은 다른 문제라는 것을 인정해야 합니다. 모든 세부 사항과 잘 어울려 집처럼 느껴집니다.

곽인막

프라임 파크 ​​세션

Prime Park Sessions의 디자인은 아름다운 기하학적 미학이 특징입니다. 복잡한 다각형 코끼리, 측면에 위치한 수직 탐색 및 수많은 공백. 여기에 커서의 작은 검은 점이 장갑처럼 딱 맞아 주제에 능숙합니다.

프라임 파크 ​​세션

데카르트

장엄한 물결 모양은 Cartesiam의 톤을 설정합니다. 영웅 영역에는 밝고 흐르는 아름다운 추상 애니메이션이 있습니다. 여기에서 마우스 커서는 중간 수준의 투명도를 가진 비교적 큰 원입니다. 신성한 곡선과 부드러운 동작 덕분에 자연스럽게 시선을 사로잡으면서 동시에 멋진 수행원과 완벽하게 어울립니다.

데카르트

음 레이

음레이의 포트폴리오는 일정 수준의 개성을 가지고 있습니다. 예술가는 내면의 천재성을 보여주고 싶어합니다. 따라서 여기의 모든 것이 잘 생각되어 있다는 것은 놀라운 일이 아닙니다. 마우스 커서도 속이 빈 스타일과 원형으로 군중 속에서 눈에 띕니다.

음 레이

운동장

이 경향은 또한 우선 순위를 식별하는 데 사용되어 중요한 세부 사항에 시각적 가중치를 추가합니다. 플레이그라운드를 살펴보세요.

Playground 뒤에 있는 팀은 두 개의 서클을 사용합니다. 작은 원이 커서로 사용되는 반면 큰 원이 "추종자"로 사용됩니다. 함께 화면 전체의 움직임을 더욱 두드러지게 만듭니다. 그리고 그게 다가 아닙니다. 포인터에는 두 가지 유형의 동작이 있습니다. 커서가 슬라이더, 햄버거 버튼 또는 링크에 닿으면 커서가 커져 이러한 요소의 중요성을 암시합니다. 해당 영역을 벗어나면 일반 크기로 다시 축소되어 방문자가 큰 번거로움 없이 인터페이스를 탐색할 수 있습니다.

운동장

타페체리아 노베센토

Tappezzeria Novecento에는 큰 이미지와 많은 콘텐츠가 있는 콘텐츠 중심의 영웅 영역이 있습니다. 디자인 뒤에 있는 팀이 커서를 더 눈에 띄게 만들기로 결정한 것은 당연합니다. Playground의 경우와 마찬가지로 두 개의 원이 있습니다. 하나는 커서 자체이고 다른 하나는 꼬리입니다. 또한 유사한 색상을 가지고 있어 완벽한 마무리 터치가 됩니다.

타페체리아 노베센토

청둥오리와 클라렛

Mallard와 Claret은 원형 마우스 커서가 가장 일반적인 유형의 웹 사이트에서도 제자리를 찾을 수 있음을 증명합니다. 실제로 두 개의 둥근 모양을 찾을 수 있습니다. 첫 번째는 바닥글 섹션에 대한 링크로, 일종의 로고 타입이기도 합니다. 그리고 다른 하나는 마우스 커서입니다. 작고 활발합니다. 이것은 이 블로그의 사용자 경험을 평소보다 조금 더 즐겁게 만듭니다.

청둥오리와 클라렛

구찌의 선물

여기에는 큰 이름이 있지만 불행히도 따라야 할 좋은 예는 아닙니다. Gucci의 Gift에는 원형 마우스 커서도 있습니다. 확실히 여기에 매력이 더해지고 다이내믹한 캔버스와의 상호 작용이 더 자연스럽게 느껴집니다. 그러나 배경과 전경 간의 대비가 좋지 않으면 사용자 경험이 손상됩니다. 황금색 원은 분홍색 배경에서 거의 알아볼 수 없습니다. 오 저런 불쌍해 라.

구찌의 선물

보너스 도구: Cursomizer

일반적인 화살표 모양의 커서를 버릴 준비가 되었다면 확인해야 할 흥미로운 프로젝트가 하나 있습니다. 커소마이저라고 합니다. 커서를 사용자 정의할 수 있습니다. 커서의 크기, 색상, 호버 효과 및 클릭 효과를 설정하고 라이브 미리 보기에서 최종 모양과 동작을 즐길 수 있는 작은 놀이터입니다. 매우 편리합니다.

커소마이저

서클에는 뭔가가 있습니다.

우리가 때때로 적절하게 인정하지 않는 사소한 일들이 두 번째 바람을 받는 것을 보는 것은 항상 대접입니다.

물론 우리는 많은 사용자 정의 커서를 보았습니다. 그러나 원형 포인터에는 신성한 것이 있습니다. 화면 전체를 날아다니며 부드럽게 움직이는 것처럼 느껴집니다. 또 다른 작은 트렌드인 원형 마우스 트레일과 함께 더욱 정교해 보입니다.