"콜백 요청" 버튼을 만드는 방법. 머티리얼 디자인: 플로팅 액션 버튼이 UX 디자인에서 모범 사례가 아닌 이유
이제 Android 플랫폼에서 애플리케이션을 작업하고 사용자 인터페이스를 디자인하는 사람들에게는 새로운 사실이 되었습니다. 몇 년 전에 Google에서 소개했습니다. 머티리얼 디자인의 목표는 고전적인 디자인의 원칙과 혁신을 결합하는 시각적 언어를 만드는 것이었습니다.
그 아이디어는 매우 유망하고 유망해 보입니다. 머티리얼 디자인은 사용자 경험(UX)을 편안하면서도 효율적으로 만들기 위한 최신 시도입니다. Google은 이 분야에서 환상적인 작업을 수행했습니다. 최소한의 디자인 요소를 사용하고 고유한 구성 요소, 밝은 색상, 애니메이션을 사용하고 사용자 친화적인 환경을 조성했습니다.
동시에 디자이너들은 소위 플로팅 액션 버튼(FAB)을 연습합니다. 안드로이드 사용자들에게 잘 알려진 모양의 둥근 버튼입니다. 이는 머티리얼 디자인의 또 다른 특징적인 요소입니다. FAB는 애플리케이션 인터페이스 상단에 나타나 사용자가 특정 목표 조치를 취하도록 동기를 부여합니다.
기본적으로 FAB의 목적은 사람이 특정 콘텐츠를 다운로드하거나 업로드하도록 설득하는 것입니다. 부동 대상 작업 버튼은 일반적으로 화면 오른쪽 모서리에 배치됩니다. 밝고 매력적인 디자인으로 눈에 띄지 않는 것이 매우 어렵습니다. FAB는 사용자가 애플리케이션에서 가장 인기 있는 작업을 수행하도록 동기를 부여합니다. 그러나 이러한 버튼을 사용할 때 몇 가지 문제가 있습니다.
플로팅 타겟 액션 버튼에 어떤 문제가 있나요?FAB는 놓치기 어렵기 때문에 사용자가 조치를 취하도록 동기를 부여하는 현명한 접근 방식입니다. 그러나 이는 사용자 경험 디자인 전체에 있어서 잘못된 솔루션이 될 수 있습니다. 다음은 플로팅 작업 버튼이 UX에 부정적인 영향을 미칠 수 있는 몇 가지 이유입니다.
FAB는 사용자를 방해할 수 있습니다.위에서 언급했듯이 플로팅 타겟 작업 버튼은 일반적으로 화면 오른쪽 하단에 배치됩니다. 대부분의 경우 애플리케이션 콘텐츠 상단에 위치하며 일부를 포함합니다.
물론 FAB는 크기가 매우 작기 때문에 사용자의 눈에서 콘텐츠의 작은 부분만 숨깁니다. 하지만 플로팅 타겟 버튼이 사진의 상당 부분을 차지하는 Google 포토 앱(아래 스크린샷)을 살펴보세요.
버튼 아래에 무엇이 숨겨져 있는지 보려면 사용자는 페이지를 아래로 스크롤해야 합니다. 하지만 이미 페이지 맨 아래에 있으면 어떻게 될까요? 그러면 스크롤이 불가능해지며 사용자는 사진의 숨겨진 부분을 볼 수 있도록 일부 콘텐츠를 추가해야 합니다.
플로팅 타겟 작업 버튼은 작은 크기에도 불구하고 사람의 눈에서 애플리케이션 콘텐츠의 일부를 숨길 수 있다는 사실을 인식하는 것이 매우 중요합니다. 이는 사용자 경험에 부정적인 결과를 초래할 수 있습니다.
그들의 디자인은 완전한 몰입을 방지합니다.플로팅 타겟 작업 버튼은 일반 배경에 비해 눈에 띄게 돋보입니다. 많은 경우 이는 사용자 경험의 가장 중요한 특성, 즉 애플리케이션 분위기에 완전히 몰입하는 데 장애가 됩니다.
다시 한 번 예로 Google의 포토 앱을 들 수 있습니다. 사람이 그것을 열면, 그는 단순히 사진을 볼 수 있는 사용자 갤러리로 이동하게 됩니다. 이런 상황에서는 FAB에서 제공하는 검색 기능이 유용할 수 있지만 우선순위는 아닙니다.
떠다니는 타겟 버튼은 화면의 공간을 차지하고 이미지의 일부를 가려서 사진을 보는 데 집중하는 데 방해가 됩니다. 이러한 경우 버튼이 너무 눈에 띄지 않아야 합니다.
쓸모가 없을 수도 있다Google 전문가가 직접 설명했듯이 플로팅 버튼은 사용자가 타겟 작업을 수행하도록 유도합니다. 그러나 개발자는 애플리케이션을 사용하는 동안 사람이 이 작업을 얼마나 자주 수행하는지 잊어버리는 경우가 있습니다.
사용자 경험 디자인의 황금률은 꼭 필요하고 자주 사용되는 요소는 눈에 띄게 만들고, 거의 사용되지 않는 요소는 거의 보이지 않게 만드는 것입니다. 그러나 Gmail 애플리케이션의 예(위 스크린샷)에서 볼 수 있듯이 개발자는 이 규칙을 고려하지 않았습니다.
응용 프로그램 화면에는 사용자가 빠르게 이메일 작성을 진행할 수 있는 버튼이 있습니다. 그러나 최근 조사에 따르면 사용자 중 약 절반이 모바일 장치를 통해서만 이메일을 봅니다. 즉 스마트폰이나 태블릿을 이용해 편지를 쓰는 경우가 많지 않다는 것이다.
고객은 이러한 기능을 활성화하고 싶지 않았습니다. 그에게는 버튼이 필요했는데, 버튼을 클릭하면 주문 양식이 있는 모달 창이 나타납니다. 콜백 버튼은 매우 유용한 기능입니다. 덕분에 사람은 돈을 쓰지 않고도 자신에게 전화를 주문할 수 있는데 이는 우리 국민에게 중요합니다. :). 실제로 이러한 버튼은 페이지 상단으로 돌아가거나 도움말 버튼 등을 만들 수 있습니다. 여기서 주요 요소는 애니메이션, 즉 맥동 효과입니다.
2016년 9월 9일 새 버튼이 추가되었습니다. 새 Chrome에서는 이전 버튼에서 파급 효과가 작동하지 않았습니다.
웹사이트에 애니메이션 버튼을 설치하는 것은 매우 쉽습니다. 모든 애니메이션은 추가 스크립트와 플러그인을 연결하지 않고 CSS를 사용하여 수행됩니다. 코드는 많지만 모든 것이 매우 간단합니다.
친애하는 주인님! 양심을 가지고 이 버튼을 사용한다면 최소한 전화 수화기 사진을 호스팅에 업로드하고 내 사이트에 대한 링크를 어리석게 복사하지 마십시오. 나는 그러한 장인과 그들의 사이트를 인터넷을 통해 영광스럽게 할 것입니다 :)
먼저 HTML 마크업을 추가해야 합니다. 우리에게는 이것이 일반 링크가 될 것입니다. 웹사이트의 올바른 위치인 머리글이나 바닥글에 다음 줄을 삽입하세요.
이 버튼은 다른 기사의 모달 창을 연결하도록 설계되었습니다. 타사 링크를 연결하면 버튼 자체의 HTML 코드에 이벤트가 포함됩니다.
Onclick="거짓 반환;"
이제 CSS 스타일 자체를 스타일 파일에 추가해야 합니다.
#popup__toggle(하단:25px;오른쪽:10px;위치:고정;z-색인:999;).img-circle(배경 색상:#29AEE3;상자 크기:콘텐츠 상자;-webkit-상자 크기:콘텐츠 -box;) .circlephone(box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px; 위치:절대;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;불투명도: .5;-webkit-animation: Circle-anim 2.4s 무한 이지인 -out !important;-moz-animation: Circle-anim 2.4s 무한 EAS !important;-ms-animation: Circle-anim 2.4s 무한 EAS !important;-o-animation: Circle- anim 2.4s 무한 이지인아웃 !important;animation: Circle-anim 2.4s 무한 이지인아웃 !important;-webkit-transition: 모든 .5s;-moz-transition: 모든 .5s;-o-transition : 모두 .5초;전환: 모두 0.5초;) .circle-fill(box-sizing:content-box;-webkit-box-sizing:content-box; background-color:#29AEE3;width:100px;height:100px ;하단:0px;오른쪽:35px;위치:절대;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation : Circle-fill-anim 2.3s 무한 이지아웃;-moz-animation: Circle-fill-anim 2.3s 무한 이지아웃;-ms-animation: Circle-fill-anim 2.3s 무한 이지인 -out;-o-animation: Circle-fill-anim 2.3s 무한 EAS;애니메이션: Circle-fill-anim 2.3s 무한 EAS;-webkit-transition: 모두 .5s;-moz- 전환: 모두 .5초;-o-전환: 모두 .5초;전환: 모두 0.5초;) .img-circle(box-sizing:content-box;-webkit-box-sizing:content-box;width:72px; 높이:72px;하단: 14px;오른쪽: 49px;위치:절대;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid 투명;불투명도 : .7;) .img-circleblock(box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px; background-image:url(images/mini.png); 배경 위치: 중앙 중앙;배경 반복:반복 없음;애니메이션 이름: 던지기;-webkit-애니메이션-이름: 던지기;애니메이션 기간: 1.5초;-webkit-애니메이션-기간: 1.5초;애니메이션 반복 -카운트: 무한;-webkit-animation-iteration-count: 무한;).img-circle:hover(불투명도: 1;) @keyframes 펄스 (0% (변환: 배율(0.9); 불투명도: 1;) 50% (변환: scale(1); 불투명도: 1; ) 100%(변환: 배율(0.9);불투명도: 1;)) @-webkit-keyframes 펄스(0%(-webkit-transform: 배율(0.95);불투명도: 1;) 50%(-webkit-transform: scale(1);불투명도: 1;) 100% (-webkit-transform: scale(0.95);불투명도: 1;)) @keyframes tossing ( 0% (변형: 회전(-8deg);) 50% (변형: 회전(8deg);) 100% (변환: 회전(-8deg);)) @-webkit-keyframes 던지기 ( 0% (-webkit-transform: 회전(-8deg);) 50% (-webkit-transform: 회전 (8deg);) 100% (-webkit-transform: 회전(-8deg);)) @-moz-keyframes Circle-anim ( 0% (-moz-transform: 회전(0deg) scale(0. 5) 기울이기(1deg);불투명도: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;) 30% (-moz-transform: 회전(0deg) 배율 (0.7) 기울이기(1deg);불투명도: .5;-moz-불투명도: .5;-webkit-불투명도: .5;-o-불투명도: .5;) 100% (-moz-transform: 회전(0deg) scale(1) 기울이기(1deg);불투명도: .6;-moz-불투명도: .6;-webkit-불투명도: .6;-o-불투명도: .1;)) @-webkit-keyframes Circle-anim ( 0 % (-webkit-transform: 회전(0deg) 스케일(0.5) 스큐(1deg);-webkit-opacity: .1;) 30% (-webkit-transform: 회전(0deg) 스케일(0.7) 스큐(1deg); -webkit-opacity: .5;) 100% (-webkit-transform: 회전(0deg) scale(1) 기울이기(1deg);-webkit-opacity: .1;)) @-o-keyframes Circle-anim ( 0 % (-o-transform: 회전(0deg) kscale(0.5) 기울이기(1deg);-o-불투명도: .1;) 30% (-o-transform: 회전(0deg) scale(0.7) 기울이기(1deg); -o-불투명도: .5;) 100% (-o-transform: 회전(0deg) scale(1) 기울이기(1deg);-o-불투명도: .1;)) @keyframes Circle-anim ( 0% (변형 : 회전(0deg) 배율(0.5) 기울이기(1deg);불투명도: .1;) 30%(변형: 회전(0deg) 배율(0.7) 기울이기(1deg);불투명도: .5;) 100%(변형: 회전 (0deg) scale(1) 스큐(1deg); 불투명도: .1;)) @-moz-keyframes Circle-fill-anim ( 0% (-moz-transform: 회전(0deg) 스케일(0.7) 기울이기(1deg);불투명도: .2;) 50% (-moz -변형: 회전(0deg) -moz-scale(1) 기울이기(1deg);불투명도: .2;) 100% (-moz-transform: 회전(0deg) 스케일(0.7) 기울이기(1deg);불투명도: .2 ;)) @-webkit-keyframes Circle-fill-anim ( 0% (-webkit-transform: 회전(0deg) 크기(0.7) 기울이기(1deg);불투명도: .2; ) 50% (-webkit-transform: 회전 (0deg) scale(1) 기울이기(1deg);불투명도: .2; ) 100% (-webkit-transform: 회전(0deg) scale(0.7) 기울이기(1deg);불투명도: .2;)) @-o- 키프레임 원형 채우기 애니메이션( 0% (-o-transform: 회전(0deg) 스케일(0.7) 기울이기(1deg); 불투명도: .2;) 50% (-o-transform: 회전(0deg) 스케일(1) 기울이기(1deg);불투명도: .2;) 100% (-o-transform: 회전(0deg) 스케일(0.7) 기울이기(1deg);불투명도: .2;)) @keyframes 원 채우기 애니메이션( 0% ( 변형: 회전(0deg) 배율(0.7) 기울이기(1deg);불투명도: .2;) 50%(변환: 회전(0deg) 배율(1) 기울이기(1deg);불투명도: .2;) 100%(변형: 회전(0deg) 축척(0.7) 기울이기(1deg);불투명도: .2;))
처음 7줄은 버튼의 모양을 담당하고 그 다음은 애니메이션을 담당합니다. 첫 번째 줄에서는 버튼의 위치를 구성할 수 있으며, 여섯 번째 줄에서는 background-image:url(mini.png) 매개변수에 이미지 경로를 지정합니다.
이것이 그러한 버튼을 설치하는 데 필요한 전부입니다. CSS를 이해하면 버튼을 사용자 정의할 수 있으며, 필요한 경우 필요와 사이트 스타일에 맞게 버튼을 완전히 변경할 수 있습니다.
이 버튼에 모달 창을 연결하려면 이 기사가 도움이 될 것입니다. 지침에 따라 모든 작업을 수행하면 아무런 문제가 없습니다.
그게 다입니다. 관심을 가져주셔서 감사합니다. 🙂
추신
저는 문제 없이 원하는 결과를 얻는 데 도움이 되는 플러그인을 만들기로 결정했습니다. 가서 볼 수 있습니다:
플로팅 버튼은 사이트 디자인을 변경하지 않고도 설문조사, 광고 또는 기타 추가 콘텐츠를 추가할 수 있는 새로운 방법입니다. 이 모든 기능은 사이트의 플로팅 버튼 형태로 구현되며, 버튼을 클릭하면 필요한 콘텐츠가 포함된 추가 모달 창이 열립니다. 유용성을 향상시키기 위해 관리 패널, 설정 및 탐색 옵션은 물론 통계 기록 및 분석 수행을 위한 일부 데이터를 사용할 수 있습니다.
플로팅 버튼이라는 워드프레스 버튼 플러그인은 이러한 플로팅 버튼을 사이트에 추가합니다.
플러그인은 다른 플러그인과 마찬가지로 설치됩니다. "플러그인" 섹션 - "새로 추가"로 이동하세요. 그런 다음 검색창에 플로팅 버튼을 입력하고 설치하세요.
설정설치 후 WordPress 사이트 관리 콘솔 오른쪽에 추가 플로팅 버튼 탭이 나타납니다.
그것을 클릭하고 플로팅 버튼 설정을 시작하십시오.
1. 버튼 상태 - 버튼 표시를 켜고 끕니다.
2. 설정 소스 - 이 설정은 플러그인의 추가 기능을 담당합니다. "로컬 설정"을 선택하면 기능이 매우 제한되므로 두 번째 옵션인 "probtn.com의 설정"을 선택하는 것이 좋습니다.
3. 이제 플러그인 개발자 웹사이트에 등록해야 합니다. 시간이 많이 걸리지는 않지만 WordPress 버튼의 기능이 크게 확장됩니다.
개발자 웹사이트에 등록https://admin.probtn.com/login/new 페이지로 이동하여 이메일 주소, 이름, 비밀번호를 입력하고 "만들기" 버튼을 클릭하세요.
이 등록이 완료되면 플러그인의 추가 구성으로 이동하지만 방금 등록한 사이트에서 직접 진행됩니다.
사이트에 등록하고 로그인하면 다음 페이지가 표시됩니다.
아래 두 개의 버튼은 플로팅 버튼을 생성하는 역할을 하며, 두 번째 버튼은 플로팅 버튼을 클릭할 때 나타나는 설문조사를 생성하는 역할을 합니다.
생성부터 시작하겠습니다. "플로팅 버튼 생성"을 클릭하세요. 먼저 버튼의 이름을 나타냅니다.
컴퓨터에서 아이콘을 선택하거나 이미지에 대한 링크를 제공할 수 있습니다. 아름다움을 위해서는 작고 투명한 배경의 사진을 사용하는 것이 좋습니다.
다음 단계에서는 버튼을 표시할 플랫폼을 선택합니다. 사이트에 플러그인을 설치했으므로 지정하는 도메인에서 표시 옵션을 선택하겠습니다.
"제출" 버튼을 클릭하면 초기 설정이 완료됩니다.
작업을 지정한 다음 플로팅 버튼을 클릭하고 플러그인 구성을 계속하세요.생성 후 버튼이 왼쪽 콘솔에 표시됩니다.
도구 섹션에는 버튼을 클릭한 후 팝업 창에 열리는 주소가 표시됩니다.
또는 "설문조사 만들기" 링크를 클릭하여 만들 수 있는 설문조사를 표시합니다.
우리는 모든 단계에서 이루어진 모든 변경 사항을 저장합니다. 웹사이트에 설치된 플로팅 버튼은 다음과 같습니다:
그리고 클릭하면 아래와 같은 팝업창이 뜹니다.
WordPress용 이 플러그인을 사용하는 데는 다양한 옵션이 있습니다. 광고, 설문 조사 또는 사이트 디자인에 포함될 수 없는 정보를 배치할 별도의 페이지를 만들 수 있습니다. 일반적으로 무엇이든!
추신. 설정이나 설치에 도움이 필요하면 댓글에 질문을 적어주세요. 도움은 무료입니다!
안녕하세요, 방문객 여러분!
나는 계속해서 기술 기사를 출판하고 있습니다.
그리고 오늘은 사이트 페이지 상단의 스크롤 버튼에 대해 논의할 흥미로운 주제를 다루겠습니다. 우리는 이 버튼의 중요성에 대해 이야기할 것인데, 제가 즐겨 사용하는 방식입니다. 또한 이 기능의 가장 흥미롭고 효과적인 구현을 보여 드리겠습니다.
그게 필요 할까거의 모든 리소스에 웹사이트가 어떻게 보이는지 보여주는 것은 가치가 없다고 생각합니다. 이것은 클릭하면 사이트의 맨 위 영역으로 빠르게 이동하는 위쪽 화살표 또는 단어가 있는 간단한 버튼입니다.
이 기능은 경우에 따라 사이트의 유용성을 향상시키는 요소입니다. 이것이 우리가 이제 귀하와 논의할 사례입니다.
위로 버튼이 필요한 첫 번째로 가장 중요하고 어쩌면 유일한 경우는 페이지에 엄청난 양의 콘텐츠가 있을 때입니다. 페이지가 길면 맨 위로 스크롤하기가 매우 어렵습니다.
소수의 사람들이 사용하는 스크롤 막대를 사용해야 합니다. 적어도 나는 그것을 전혀 사용하지 않습니다. 추가 마우스 움직임이고 그다지 편리하지 않기 때문입니다. 아니면 마우스로 비디오를 회전시켜야 하는데, 이는 매우 오랜 시간이 걸리고 시간이 지나면서 짜증이 납니다.
따라서 사이트에 아주 큰 글이 있는 경우 버튼을 설치할 수 있지만 클릭하기 쉽도록 만들어야 하며 동영상을 회전시키거나 브라우저. 그렇지 않고 표준 행동과 동등하다면 무슨 소용이 있겠습니까?
이를 바탕으로 실제로 효과적으로 작동하는 가장 일반적이고 효과적인 스크롤 업 버튼이 있습니다. 이러한 옵션 중 하나는 VKontakte 소셜 네트워크에서와 같이 위로 버튼입니다. 이 방법을 구현해 보겠습니다.
VKontakte와 같은 위쪽 버튼이 버튼의 특징은 사용하기 쉽다는 것입니다. 리소스의 전체 높이를 차지하는 사이트 왼쪽의 스크롤 막대처럼 보입니다.
이 옵션은 소셜 미디어에서 이 옵션을 사용하지 않는 사용자가 거의 없기 때문에 이미 입증되었습니다. VKontakte 네트워크. 이 구현은 어떤 버튼에도 마우스 커서를 댈 필요가 없기 때문에 편리합니다. 사이트의 왼쪽 영역을 클릭하면 페이지가 맨 위로 스크롤됩니다. 커서를 볼 필요도 없습니다. 마우스를 화면 가장자리로 이동하고 한 번만 클릭하면 됩니다.
VKontakte와 완전히 동일한 구현을 만드는 것은 불가능하지만 대략적인 버전은 쉽습니다.
이를 구현하려면 사이트에 스크립트를 배치하기만 하면 됩니다.
스크립트를 로드하려면 코드 자체를 footer.php 파일의 태그 사이나 닫는 태그 앞에 배치하면 됩니다. 또는 스크립트가 포함된 파일을 호스팅에 업로드한 다음 해당 파일을 사이트에 업로드하기만 하면 됩니다.
스크립트를 배치하고 로드에 대해 걱정할 필요가 없다면 스크립트 코드 자체를 제공하겠습니다.
자바스크립트
$(document).ready(function() ( $("body").append("^ 맨 위로 이동"); $ (window).scroll (function () ( if ($ (this).scrollTop () > 300) ( $ (".button-up").fadeIn(); ) else ( $ (".button-up").fadeOut(); ) )) $(".button-up").click( function( )( $("body,html").animate(( scrollTop: 0 ), 100); return false; )) $(".button-up").hover(function() ( $(this) .animate (( "불투명도":"1", )).css(("배경색":"#E1E7ED","색상":"#45688E")), function())( $(this). 애니메이션화(( "불투명도":"0.7" )).css(("배경":"없음","색상":"#45688E"); ));
$(문서). 준비(함수()( $("본문"). Append("^맨 위로 돌아가기"); $(창). 스크롤(함수()( if ($(this).scrollTop() > 300)( $(".버튼업"). 점점 뚜렷해지다(); ) 또 다른 ( $(".버튼업"). 사라지다(); } ) ; $(".버튼업"). 클릭(함수()( $("본문,html") . 애니메이션 (( 스크롤탑: 0 } , 100 ) ; 거짓을 반환 ; } ) ; $(".버튼업"). hover(함수()( $(이것). 애니메이션 (( "불투명도": "1" , ) ) . CSS(( "배경색" : "#E1E7ED" , "색상" : "#45688E" ) ) ; ) , 기능 () ( $(이것). 애니메이션 (( "불투명도": "0.7" ) ) . CSS(( "배경" : "없음" , "색상" : "#45688E" ) ) ; ; } ) ; } ) ;
|
이 코드에서는 필요에 맞게 일부 매개변수를 변경할 수 있습니다.
- 4번째 줄은 페이지 스크롤 영역 자체를 표시하는 역할을 담당합니다. 여기에는 버튼을 표시하기 위한 기본 스타일이 포함되어 있습니다. 원칙적으로 이러한 매개변수는 거의 모든 사람에게 적합해야 합니다. 하지만 자신에게 맞게 편집해야 할 수도 있습니다.
- 괄호 안의 7행에는 버튼이 나타나는 순간을 담당하는 숫자 300이 있습니다. 즉, 버튼은 300픽셀 아래로 스크롤한 후에만 나타납니다. 메인 사이트 메뉴나 탐색의 다른 중요한 요소가 보기에서 사라질 때만 스크롤이 가능하도록 여기에서 값을 선택하는 것이 좋습니다.
- 17행에서 값 100은 스크롤 속도입니다. 값이 낮을수록 페이지 상단으로 돌아가는 속도가 빨라집니다.
이 코드는 사이트 상단의 태그 사이에 삽입할 수 있습니다. 사이트가 WordPress에 있는 경우 이 영역은 header.php 템플릿 파일에 있습니다. 사이트 맨 아래에 있는 닫는 태그(footer.php 파일) 앞에 배치할 수도 있습니다. 사이트 로딩 속도가 빨라지므로 마지막 옵션을 권장합니다. 다음과 같이 보일 것입니다.
훨씬 더 효율적인 옵션은 별도의 파일에서 이 스크립트를 로드하는 것입니다. 아래 버튼을 통해 파일을 다운로드 받으실 수 있습니다. 아카이브 내부에 있습니다.
그런 다음 이 파일을 호스팅에 업로드하세요. 테마 폴더나 사이트 루트에 업로드할 수 있습니다. 저는 전통에 따라 템플릿 폴더에서 이 작업을 수행합니다. 그런 다음 이 파일을 동일한 위치에 로드하는 코드를 작성해야 합니다. 이렇게 하려면 다음 줄을 사용하십시오.
자바스크립트
|
여기에서 두 번째 줄에 있는 파일의 전체 경로를 사용자의 경로로 바꿔야 합니다. 그런 다음 아래와 같이 닫는 태그 앞의 동일한 영역에 이 코드를 붙여넣습니다.
파일 편집 후, 컴퓨터에서 했다면 호스팅에 업로드해서 원본 파일을 교체합니다. 그 후에는 사이트의 간단한 위로 버튼이 작동합니다.
이 파일의 매개변수를 편집하려면 메모장 편집기를 사용하여 파일을 열어야 합니다.
이 옵션은 작동 및 현장 설치가 단순하기 때문에 매우 좋습니다. 더 고급 옵션은 위로 스크롤하는 것 외에도 스크롤했던 위치로 돌아갈 수 있는 경우입니다. 이것이 바로 소셜 미디어에서 구현되는 옵션입니다. VKontakte 네트워크. 방법은 아래를 참조하세요.
VKontakte에서 버튼을 누르는 두 번째 방법이 방법을 사용하여 자세한 비디오 튜토리얼을 녹화했습니다.
이 옵션은 이제 내 블로그에 있습니다. 아직 그 유용성을 분석할 수는 없습니다. 그러나 그것이 Runet의 거인 중 하나에 있다면 우리는 그것이 어느 정도 유용하다고 안전하게 가정할 수 있습니다. 물론, 그런 규모에서는 생각할 필요도 없습니다. 그러나 작은 리소스에서는 설치하기 전에 신중하게 생각할 수 있습니다. 하지만 저는 미래를 생각하기 때문에 이런 결정을 내렸습니다.
두 번째 방법의 구현은 조금 더 복잡하지만 리소스에 대해 다른 기술적인 문제를 수행한 경우 프로세스가 이미 익숙할 것입니다.
3단계로 구성됩니다:
먼저, 페이지가 아래로 스크롤되는 거리에 따라 영역 자체와 부엉이의 색상 "To Top" 모두에서 스크롤을 부드럽게 하고 마우스를 가져갈 때 색상이 부드럽게 변경되도록 하는 스크립트를 배치해야 합니다.
첫 번째 경우와 같이 두 가지 방법으로 갈 수 있습니다. 스크립트 자체를 원하는 영역(위 항목 참조)에 배치하거나 파일을 통해 스크립트를 업로드하십시오. 다음으로 두 번째 방법을 통해 모든 작업을 수행하여 효과적입니다.
아래 버튼을 사용하여 스크립트 파일을 다운로드하세요.
파일을 호스팅에 올려놓고 이전과 마찬가지로 사이트 맨 아래 코드를 통해 파일을 업로드합니다. 파일 이름은 방법 1과 정확히 동일하므로 동일한 코드 줄을 출력용으로 사용할 수 있습니다.
⇓ 뒤로 ⇑ 위로
< div class = "leftbar-wrap" > < a href = "#0" id = "scroll-back" > < span class = "active-area" > < span class = "bar-desc-niz" >⇓뒤로< / span > < / span > < / a > < a href = "#" class = "left-controlbar" > < span class = "active-area" > < span class = "bar-desc-top" >⇑맨 위< / span > < / span > < / a > |
사이트 맨 아래, footer.php 파일의 닫는 태그 앞에 배치할 수 있습니다.
그런 다음 스타일 파일(style.css)에 디자인 스타일을 작성하고 변경된 모든 파일을 호스팅에 업로드합니다. 스타일 자체는 다음과 같습니다.
/* 컨테이너 설명 */.leftbar-wrap ( position:fixed; height: 100%; top: 0; width: 99px !important; left: 0; ) /* "Top" 버튼에 대한 설명 */.left -controlbar ( 높이 : 100%; 디스플레이: 블록; 텍스트 장식: 없음; ) /* "뒤로" 버튼 설명 */#scroll-back ( 디스플레이: 블록; 높이: 100%; 상단: 0; 디스플레이: none; text-align: center; ) /* 두 버튼의 배경색 열에 대한 설명 */.active-area ( width: 100px; height: 100%; display: block; text-align: center; ) /* 설정 활성 영역 페이지 위로 마우스를 가져갈 때 배경색의 투명도 */.leftbar-wrap:hover .active-area ( background: #E1E7ED !important; opacity:0.7 !important; ) /* 마우스를 가져갈 때 하이라이트를 조금 더 밝게 만듭니다. 비문 위에 */.leftbar-wrap .active-area:hover ( ) /* 버튼 라벨을 중앙에 배치 */.bar-desc-niz ( top: 26% !important; position:relative; display: inline-block; ) .bar-desc-top ( 상단: 10% !important; 위치: 상대; 표시: 인라인 블록;
/* 컨테이너 설명 */ 왼쪽 막대 랩( 위치: 고정; 높이: 100%; 상단: 0; 너비: 99px !중요; 왼쪽: 0; /* “Up” 버튼에 대한 설명 */ 왼쪽 컨트롤바( 높이: 100%; 디스플레이: 블록; 텍스트 장식: 없음; /* 뒤로가기 버튼 설명 */ #뒤로 스크롤( 디스플레이: 블록; 높이: 100%; 상단: 0; 디스플레이: 없음; 텍스트 정렬: 가운데; /* 두 버튼의 배경색 열에 대한 설명 */ 활성 영역( 너비: 100px; 높이: 100%; 디스플레이: 블록; 텍스트 정렬: 가운데; /* 페이지의 활성 영역 위로 마우스를 가져갈 때 배경색의 투명도 설정 */ 왼쪽 막대 감싸기:hover.active-area( 배경 : #E1E7ED !중요 ; 불투명도: 0.7 !중요; /* 비문 위로 마우스를 가져가면 하이라이트가 조금 더 밝아집니다 */ 왼쪽 막대 감싸기 .active-area:hover ( /* 라벨을 버튼 중앙에 배치 */ Bar-desc-niz( 상단: 26% !중요 ; 위치: 상대; 디스플레이: 인라인 블록; 바데스크탑( 상단: 10% !중요 ; 위치: 상대; 디스플레이: 인라인 블록; |
리소스의 디자인과 구조에 따라 이러한 스타일의 일부 매개변수를 약간 변경해야 합니다. 예를 들어, 47행과 53행에서 페이지 맨 위에서 각각 "Back" 및 "Top"이라는 단어에 대한 들여쓰기 매개변수를 변경합니다.
모든 파일을 편집한 후 안전하게 호스팅에 업로드할 수 있으며 이 방법이 작동합니다. 내 블로그에서 구현을 볼 수 있습니다. 건강을 위해 그렇게 하세요.
다음 방법으로 넘어갑니다. 이 옵션에는 이미 화면 오른쪽 하단에 간단한 버튼이 포함되어 있으며, 클릭하면 페이지 상단으로 이동합니다.
플러그인 없이 맨 위로 돌아가기 버튼을 만드는 세 번째 방법버튼 구현도 매우 간단하며 WordPress 사이트에서 100% 작동합니다. HTML 사이트나 다른 엔진에 대해서는 아무 말도 할 수 없습니다. 테스트해보세요.
사이트 맨 아래의 닫는 태그 앞에 / 스크립트가 포함된 다음 코드를 복사해야 합니다.
자바스크립트
$(document).ready(function())( $("#back-top").hide(); $(function () ( $(window).scroll(function () ( if ($(this). scrollTop () > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top").fadeOut(); ) )).click(function () ( $("body,html").animate(( scrollTop: 0 ), 400) return false );< p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p > |
머티리얼 디자인(Material Design)은 1년 전 Google이 도입한 디자인 언어로, 모든 기기와 플랫폼에서 통합된 사용자 경험을 창출하려는 회사의 대담한 시도를 나타냅니다. 대담한 색상, UI 레이어를 나타내는 자유로우면서도 원칙적인 그림자 사용, Android(및 iOS의 일부 Google 앱)에서 꽤 좋은 사용자 경험을 제공하는 유동적인 애니메이션으로 표시됩니다.
하지만 머티리얼 디자인에는 작년에 소개된 이후 나를 괴롭히던 한 가지가 있습니다. 바로 플로팅 액션 버튼입니다.
Google에 따르면 FAB(플로팅 액션 버튼)는 UI 위에 떠 있는 둥근 버튼이며 "액션을 촉진하는 데 사용됩니다." 사용자가 해당 화면에서 가장 자주 수행하는 작업을 수행하도록 설계된 클릭 유도 버튼 역할을 합니다.
그리고 머티리얼 디자인의 대담한 시각적 스타일 때문에 FAB는 무시하기가 매우 어렵습니다. 그리고 거기에 문제가 있습니다. 실제로 이상적인 조건에서는 FAB가 좋은 UX를 제공하는 것처럼 보이지만 FAB를 과도하게 사용하면 애플리케이션의 전체 UX에 해로울 수 있습니다. 여기에는 몇 가지 이유가 있습니다.
몰입은 경험에서 나온다
FAB는 시각적으로 눈에 띕니다. 말 그대로 화면의 모든 UI 요소 위에 있습니다. 또한 FAB를 추가하면 몰입도가 떨어지는 UX가 자동으로 발생하며 특히 대화형 경험을 제공하는 것이 목적인 앱(또는 화면)에 영향을 미칩니다.
한 가지 예는 Google의 새로운 사진 앱입니다.
사진 앱은 플로팅 검색 버튼이 있는 갤러리로 열립니다. 하지만 문제는 제가 사진 앱을 열 때 단지... 내 사진을 보고 싶다는 것입니다. 따라서 플로팅 검색 버튼은 사용자가 애플리케이션의 주요 목적인 사진 탐색에 몰두하는 것을 방해합니다. 스마트 검색은 Google 포토 앱의 고유한 기능입니다. 그러나 이는 신청서에 최고 수준의 영구 FAB가 부여되어야 함을 의미합니까? (내 생각엔 아니라고 생각한다.)
이상하게도 Google은 내 의견에 동의합니다. FAB의 머티리얼 디자인 페이지에서 Google은 "모든 화면에 플로팅 명령 버튼이 필요한 것은 아닙니다"라고 설명합니다.
그리고 그는 “주요 작업은 갤러리의 이미지를 터치하는 것이며, 이 경우 버튼은 필요하지 않습니다.
이것은 동전의 반대편처럼 보일 수 있지만 FAB의 유용성을 방해하는 또 다른 더 중요한 기능이 있습니다. FAB는 화면의 공간을 차지함으로써 콘텐츠를 효과적으로 차단합니다.
음, 좋아요, FAB는 그냥 작은 둥근 버튼이죠, 그렇죠? 얼마나 많은 콘텐츠를 차단할 수 있나요?
사진 앱의 스크린샷을 보면 검색 FAB가 썸네일 이미지의 약 50%를 차단하고 있음을 알 수 있습니다. 확실히 두어 명의 얼굴을 가릴 수 있을 만큼 충분합니다. 이로 인해 기본적으로 화면 마지막 행의 네 번째 축소판마다 하나의 추가 스크롤이 필요하게 됩니다. 그리고 그것은 최악의 부분이 아닙니다.
FAB는 "즐겨찾기" 버튼과 날짜를 차단합니다. 사용자 Dumazy는 FAB가 앱 화면의 시간과 "즐겨찾기" 별을 차단했을 때 발생한 문제에 대해 Graphic Design Stack Exchange에 게시했습니다. 이는 모든 목록 보기 앱의 문제를 보여주며, 목록의 마지막 항목이 더 이상 위로 스크롤할 수 없을 때 특히 문제가 됩니다. 이는 적절한 화면 사용성을 제공하려면 전체 열을 희생해야 함(별표 위치 변경 등)을 의미합니다.
결과적으로 FAB는 크기가 제시하는 것보다 훨씬 더 많은 화면 공간을 차지합니다.
촉진 조치는 그다지 자주 사용되지 않을 것입니다.UX를 디자인할 때 사용자는 80%의 시간 동안 20%의 기능을 사용한다는 80/20 규칙을 기억해야 합니다. 즉, 사용자가 대부분의 시간을 사용할 소수의 요소를 디자인하는 데 대부분의 노력을 기울여야 합니다.
FAB는 이론적으로 실제로 이 작업을 수행합니다. 하지만 프로모션 액션이 자주 사용되지 않으면 어떻게 될까요?
Google의 Gmail 앱을 예로 들어 보겠습니다.
Gmail 앱의 FAB는 사용자의 기본 작업이 이메일 작성이라고 가정하는 작성 버튼입니다.
하지만 그렇습니까?
여러 연구에 따르면 이메일의 최소 50%가 모바일 장치에서 읽혀지며 이메일 작성에 대해 언급하는 사람은 거의 없습니다. 즉, 우리의 일상 경험에서 확인할 수 있듯이 대부분의 모바일 장치 사용자는 이메일 앱을 사용하여 이메일을 읽는 경향이 있습니다.
이메일에 응답하기 위해 모바일 장치를 사용하는 사람들이 많을 수 있지만 이는 이메일이 열린 후에만 발생합니다(이는 FAB를 우회한다는 것을 의미합니다). 가상 키보드 및 자동 교체의 다소 불완전한 입력 메커니즘으로 인해 발생할 수 있는 이러한 사용자 행동은 사용자가 수행하는 주요 활동이 새 이메일을 작성하는 것이 아니라 이메일을 읽고 응답하는 것임을 의미합니다.
그렇다면 FAB "이메일 작성" 버튼의 기능은 무엇입니까? 드문 경우지만, 이 애플리케이션을 사용하여 편지를 작성하려는 사용자에게 즐거움을 선사합니다. 그러나 나머지 시간에는 화면의 공간만 차지하고 "별"과 시간을 차단하며 밝은 빨간색으로 끊임없이 주의를 산만하게 합니다.
우리는 FAB를 원하나요? 이전 항목을 지우십시오. 전혀 필요합니까?물론 모든 FAB 사용이 Material 앱 사용 경험을 저하시키는 것은 아닙니다. 합리적이고 이러한 앱의 UX를 개선하는 몇 가지 훌륭한 FAB 사례가 있습니다.
Google 지도는 FAB가 올바르게 수행된 훌륭한 예입니다. 사용자가 지도에서 수행하는 주요 작업은 길 찾기이므로 FAB를 이러한 목적으로 사용하는 것이 매우 적합합니다.
하지만 지도는 콘텐츠 사용자가 거의 항상 화면 중앙(파란색 점이 위치를 표시하는 위치)으로 이동하는 데 관심이 있는 다소 특별한 경우라는 점을 명심하세요. 그러나 대부분의 애플리케이션에서 그리드 또는 목록 보기는 사용자가 일반적으로 FAB가 있는 위치를 포함하여 화면의 모든 위치에 있는 콘텐츠와 상호 작용한다는 것을 의미합니다.
또한 위의 스크린샷은 내용의 일부일 뿐이라는 점에 유의하세요. 실제 사용에서는 사용자가 스크롤하는 동안에도(대부분의 경우) FAB가 제자리에 유지됩니다. Google이 머티리얼 디자인에서 여러 번 강조했듯이 모션 디자인은 UI 디자인만큼 중요합니다.
움직이는 콘텐츠의 맥락에서 움직임이 부족하여 화면 공간이 강조되므로 스크린샷에서는 표시할 수 없는 더 높은 수준의 주의가 산만해집니다.
따라서 좋은 FAB 구현의 예가 거의 없기 때문에 질문이 생깁니다. FAB가 필요한가요?
앱에 FAB가 있을 때의 단점을 살펴보면 사용자는 앱에서 작업을 수행할 뿐만 아니라 콘텐츠도 소비한다는 간단한 이해로 요약할 수 있습니다.
머티리얼 디자인의 FAB 디자인은 사용자가 특정 작업을 수행하는 데 대부분의 시간을 소비한다는 전제를 기반으로 합니다. 따라서 기본 상위 버튼 형태로 높은 상태를 부여해야 합니다. 그러나 많은 앱에서 사용자는 콘텐츠 소비에도 중점을 둡니다. 사진 앱에서 사용자는 사진을 보고 싶어합니다. Gmail 앱에서 사용자는 이메일을 읽고 싶어합니다. Facebook 앱에서 사용자는 친구의 메시지를 읽고 싶어합니다.
따라서 FAB는 콘텐츠의 최적 소비를 행동 수행에 종속시키는 디자인 철학(또는 적어도 디자인 선택)입니다. 그리고 우리는 자문해 보아야 합니다. 그러한 타협이 필요한가? 우리는 그런 타협을 하고 싶나요?
FAB로 인해 대부분 열악한 UX가 발생하는 경우, 앱 내에서 가장 많이 사용되는 단일 작업을 파악하기 어려운 경우, 우회적인 방법(스크롤 시 FAB가 사라지거나 스와이프할 때 다른 요소와 겹치는 경우)을 찾아야 하는 경우, 나는 대답이 '아니요'라고 말하고 싶습니다.
Google의 Material Design은 꽤 훌륭하고 통일된 원칙에 입각한 디자인 언어이지만 FAB는 그에 대한 최선의 언어는 아닙니다.