
이렇게 만들어진 버튼들은 시각 계층에 따른 우선 순위에 맞춰 사용하게 되는데요.
우선 순위에 따라 버튼을 구분하고 사용하는 것은 시각적인 안정감으로 오류를 줄여주게 됩니다. (Sally's 꿀팁!!)
더불어 앞서 말한 것처럼 사용자가 어떤 행동을 해야 하는지에 대한 가이드를 제공해줄 수 있어요..예를 들면 쇼핑몰의 상세페이지에는 장바구니 추가, 공유하기, 즐겨찾기, 구매하기 등 다양한 버튼이 있지만 여기서 앱 제공자가 가장 바라는 유도 버튼은 '구매하기'겠죠?!
따라서 장바구니, 즐겨찾기 등과 같은 부가적인 기능에는 눈에 덜 띄는 버튼을 사용해주고 구매하기에서는 주요 버튼을 사용해주는 것이 좋습니다!!
안녕하세요!
앱 개발 외주 업체 Sally 샐리 마케터 Jennifer입니다٩(๑❛ᴗ❛๑)۶♡
오늘은 많은 분들이 관심을 가져주시는 어도비 XD 강좌에 관련한 강좌 포스팅을 가져왔어요!!
어도비 XD로 만드는 '로그인 페이지 제작'에 대해 소개 드리려고 합니다(*^ω^*)
서비스 개발을 염두에 두시는 예비 대표님들께도 유용할 버튼의 이론이 상세하게 적혀있으니 따라와주세요~
Follow Sally !
버튼 디자인만 바뀌어도 구매율이 올라간다니?!
글자만 봐도 두근두근 설레죠?
여기에 오늘의 포인트가 숨어있습니다♥
더욱 누르고 싶게 만들어지는 '구매하기' 버튼 !!
버튼의 모양에는 솔리드 버튼, 텍스트 버튼, 아이콘 버튼 등 다양한 형태가 있지만 이들의 공통점은 바로 버튼처럼 생겼다는 것 !!!
Q. 버튼처럼 생긴 것이란? 사용자가 누르고 싶게 생긴 것을 말한답니다 :)
아래 이미지를 확인해주시면 좀 더 정확한 이해가 되실거예요
버튼은 버튼처럼 생겨야 사용자가 누르고 싶어지거든요
(왕중요..)
버튼이 버튼인지도 모르게 생겼다면 유저가 가야 할 방향을 잃고..
방향성을 잃으면 어플리케이션에 금방 실증을 내고 앱을 종료하게 되겠죠..?
아래의 버튼의 시각 계층 이미지를 확인해주세요!
이렇게 만들어진 버튼들은 시각 계층에 따른 우선 순위에 맞춰 사용하게 되는데요.
우선 순위에 따라 버튼을 구분하고 사용하는 것은 시각적인 안정감으로 오류를 줄여주게 됩니다. (Sally's 꿀팁!!)
더불어 앞서 말한 것처럼 사용자가 어떤 행동을 해야 하는지에 대한 가이드를 제공해줄 수 있어요..예를 들면 쇼핑몰의 상세페이지에는 장바구니 추가, 공유하기, 즐겨찾기, 구매하기 등 다양한 버튼이 있지만 여기서 앱 제공자가 가장 바라는 유도 버튼은 '구매하기'겠죠?!
따라서 장바구니, 즐겨찾기 등과 같은 부가적인 기능에는 눈에 덜 띄는 버튼을 사용해주고 구매하기에서는 주요 버튼을 사용해주는 것이 좋습니다!!
위의 이미지처럼 텍스트 필드 버튼 역시 누르면 해당하는 상태값이 변화하면서 상호작용하는 느낌의 전달이 필요합니다.
Default : 기본 상태, "나 버튼이야!!"라는 것을 사용자에게 알려줍니다 ^^
Pressed : 버튼을 눌렸을 때 버튼이 눌려졌다는 느낌의 컬러를 통해서 사용자에게 알려줍니다.
Disable : 비활성화 상태(Ex. 품절/매진)로 버튼이 눌리지 않는 상태입니다.
이 역시 비슷한 컬러를 통해서 사용자에게 버튼이 기능하지 않는다는 것을 알려줍니다.
사용자의 입장에서 대수롭지 않게 보고 지나쳤던 '버튼'들이 얼마나 중요하게 작용하는지에 대해 충분히 이해하셨나요?!
그렇다면 지금부터는 Sally의 Adobe 강좌를 시작하겠습니다(*ꈍ꒳ꈍ*)
*네이버 블로그로 이동하시면 아래의 이미지 캡쳐화면을 보다 쉬운 영상물로 확인하실 수 있습니다!
=> https://blog.naver.com/sally_company/222160780123
위와 이미지와 같은 세가지의 버튼을 동영상을 통해 따라 만들어볼 예정이에요
(동영상 아래의 설명과 동영상을 함께 확인해주시면 됩니다!)
첫번째, 솔리드 버튼 만들기
: 솔리드 버튼은 가장 기본적인 형태로 메인 컬러를 채워서 쓰기 때문에 시각 계층이 높아 눈에 가장 잘 들어오는 버튼이에요.
1. 왼쪽 패널의 사각 툴을 선택하여 335*60 사이즈의 사각형을 드래그해서 그려줍니다.
2. 선택 툴로 방금 만든 사각형을 선택한 상태에서 오른쪽 패널의 채우기와 테두리 색상 변경을 사용해줍니다.
3. 이번에는 왼쪽 패널에서 텍스트 툴을 선택하고 '버튼명'을 입력해줍니다.
4. 선택툴로 텍스트 툴을 선택한 상태에서 오른쪽 패널의 폰트와 사이즈와 컬러를 지정해줍니다.
5. 만들어둔 사각형과 텍스트를 동시에 선택한 후 가운데 정렬을 진행해줍니다.
두번째, 아웃라인 버튼 만들기
: 버튼에 라인을 적용한 형태로 만드는 방식은 동일하고 컬러 값만 다르게 적용합니다.
1. 방금 만든 솔리드 버튼을 Ctrl + C / Ctrl + V 로 복사 붙여넣기를 진행해줍니다.
2. 복사한 솔리드 버튼의 사각형만 선택한 상태에서 오른쪽 패널의 채우기와 테두리 값을 변경해줍니다.
세번째, 텍스트 버튼 만들기
: 텍스트 버튼은 감싸는 사각형(컨테이너) 없이 텍스트만 사용하는 형태입니다.
1. 텍스트 툴을 선택하고 버튼명을 입력합니다.
2. 텍스트 속성을 오른쪽 패널에서 조절합니다.
3. 간격 측정을 해가면서 적절한 배치를 해줍니다.
*Mac 단축키 / Option(오브젝트를 선택한 상태)을 누른 상태에서 다른 오브젝트에 마우스 가져다대기
*Window 단축키 / Option(오브젝트를 선택한 상태)을 누른 상태에서 다른 오브젝트에 마우스 가져다대기
짠!! 잘 따라오셨나요?!
여기까지 !! 너무 너무 간단하게 완성되었죠 ?!
버튼의 중요도와 함께 Adobe XD로 만드는 누르고 싶어지게 만드는 버튼 실전편 알려드렸습니다(ό‿ὸ)ノ !!
앱 디자인 / 모바일 앱 개발 회사 Sally는 앞으로도 유용한 정보로 샐친 여러분들을 찾아올 예정이랍니다.
Adobe XD에 관해 혹은 서비스(어플) 개발에 관하여 궁금한 점이 있으신 분들은 언제나 편하게 문의 주시면 샐리가 답변 드리러 달려갑니다~٩(๑˃̵ᴗ˂̵)و