Prototype
-
Terms and Conditions Button - Axure Deep Dive #6Prototype/Axure Deep Dive 2021. 5. 23. 14:19
Terms and Conditions Button 회원가입시 이용약관 페이지를 제작하였습니다. 해당부분에서 중점적인 사항으로는 다음으로 넘어가기 위한 필수적인 버튼과 그렇지 않은 버튼이 있다는 점을 고려하여, 엑슈어 작업을 하는데 어려움이 있었습니다. 해당 사항을 좀 더 간편하게 작업이 가능할 수 있지 않을까 고민이 좀 더 필요한 작업이였습니다. 현재는 각 케이스별 너무 많은 상황을 하나씩 함수를 적용하여, 작업 시간이 조금 걸렸던 기억이 있습니다. 급하신 분들은 각 부분만 복사하여 활용하실 수 있을 것 같아 공유합니다. 프로토타이핑: https://imxn7m.axshare.com Untitled Document imxn7m.axshare.com rp file:
-
Tab Slider - Axure Deep Dive #5Prototype/Axure Deep Dive 2021. 5. 23. 14:18
Tab Slider 효과적으로 이벤트를 노출시키기 위해서, 배너 상단에 조그만한 탭 슬라이더를 작업하게 되었습니다. 기존의 텍스트 문구만 있던것에 비해, 이벤트들이 효과적으로 눈에 더 잘띄고 GA로 확인결과 클릭율 및 이벤트 전환율이 높아지게 되었습니다. 해당 영역 기획을 하면서 놓친 부분 기록 상단의 영역 공부서점 주간 베스트 셀러부터 총 8개이 이벤트를 버튼을 통해서 노출시킬 수 있습니다. 현재 작업은 6개 이벤트가 있다고 가정한 상황이고, 첫 기획에서 놓친 부분이 있어서 기록하고자 합니다. 놓친 부분 > 버튼을 클릭 한 후에 6번째의 이벤트 탭을 클릭 하여 화면이 이동해도 탭스라이드 영역은 이동된 화면에서도 5번째 위치에 정확히 있어야 합니다. 이와 비슷한 기획 고민을 하시는 분들께 도움..
-
Scroll indicator - Axure Deep Dive #4Prototype/Axure Deep Dive 2021. 5. 23. 14:18
Scroll indicator AXURE DEEP DIVE 4번째 작업물은 스크롤 인디케이터입니다. 스크롤 인디케이터, 프로그레스바는 유저가 스크롤을 진행하면 상단에 스티키 탑 메뉴가 따라 해당 페이지의 스크롤이 얼마나 남았는지 시각적으로 표현해주는 UI입니다. 해당 기능을 통해 독자들은 전체 분량을 한눈에 파악할 수 있습니다. 요새 publy 라는 유료 콘텐츠 서비스를 이용하고 있습니다. 해당 서비스에도 스크롤 인디케이터가 붙는다면 좀 더 나은 유저 경험을 줄 수 있을 거라 생각합니다. 프로토타이핑:https://kyo6c1.axshare.com Untitled Document kyo6c1.axshare.com rp file:
-
Shopping Cart - Axure Deep Dive #3Prototype/Axure Deep Dive 2021. 5. 23. 14:18
Shopping Cart 엑슈어에서 가장 강력한 기능 중 하나인 리피터를 활용하여 쇼핑카트를 제작하였습니다. 리피터를 활용, 모달방식을 통해 보다 간편하게 구현할 수 있는 점이 장점입니다. 구현 방법이 궁금하신 분들은 댓글 또는 rp file 예제를 올려드렸으니 참고하시면 좋을 것 같습니다. 프로토타입: https://1ba0nk.axshare.com Untitled Document 1ba0nk.axshare.com rp file:
-
Top button - Axure Deep Dive #2Prototype/Axure Deep Dive 2021. 5. 23. 14:17
웹페이지가 점차 길어짐에 따라 사용자 편의성을 위해 탑버튼이 꼭 필요해졌습니다. 오늘은 엑슈어를 활용하여 탑버튼을 만들어 보도록 하겠습니다. 탑버튼을 구현하기위해서든, 탑버튼에서의 인터랙션과 아무것도 클릭하지 않은 상태에서 스크롤 다운, 업의 인터랫션이 필요합니다. 차근차근 따라오시면 쉽게 구현하실 수 있습니다. Step. 1 TOP BUTTON을 생성하고, 다이내믹 패널을 설정해준 뒤 이름을 top button 이라 지정해줍니다. top button을 선택 후 숨김 처리 하시고, pin to browser 에서 right, bottom 을 선택하시고, 마진은 원하는 만큼 설정해줍니다. Step. 2 top button 위젯을 히든 처리하고, 아무것도 클릭하지 않은 상태에서 인터랙션에서 윈도우 스크롤 다..
-
lnline frame - Axure Deep Dive #1Prototype/Axure Deep Dive 2021. 5. 23. 14:17
lnline frame 활용 웹사이트나 앱을 탐색하다보면 페이지 내에 유튜브 영상이나 구글 지도가 첨부되어 있는 화면을 보신적이 있으실겁니다. 이러한 작업을 엑슈어에서도 가능한지 궁금하시나요? 바로 lnline frame을 활용하면 엑슈어에서 프로토타이핑으로 구현이 가능합니다. 그럼 바로 lnline frame을 활용하여 유튜브 영상, 구글 지도를 넣어보는 작업을 해보도록 하겠습니다. 1번을 드래그하여 바탕영역에 드롭하면 2번과 같이 lnline frame 이 생성됩니다. 생성된 lnline frame을 더블 클릭하면 팝업이 생성되는데 저희는 외부 링크를 삽입할 것이므로 4번 영역 link to an external url or file을 클릭 후 링크를 삽입해 주시면 됩니다. *주의할점은 링크 삽입 시..
-
왓섭#1Prototype/BenchMarking 2021. 1. 5. 13:20
최근에 '신개념 내 돈관리'를 슬로건으로 신규 서비스인 왓섭이 런칭하였습니다. 신규 서비스 가입과정에서 괜찮은 UX가 보여 AXURE로 작업해 보았습니다. 모바일 회원가입시 작은화면에 많은 인풋필드가 있으면 유저의 이탈확률이 높아지게됩니다. 따라서 최근에 간편가입이나 필수로 받아야하는 경우 한 화면에 하나의 인풋필드만 물어보는 경우가 있습니다. 한 화면에 하나의 인풋필드의 경우 화면을 여러번 넘겨야 하는 문제점이 있는데, 이런 부분을 보완한 UX라고 생각합니다. 프로토타이핑 주소 : zg0gge.axshare.com Axure로 구현시 가장 문제가 되었던 부분은 전화번호 입력시 자동으로 " - " 가 생성되는 부분입니다. 기능상으로 show/hide로 인풋필드를 조작해야하는데, 매끄럽지 않았고 input..
-
토스#2Prototype/BenchMarking 2020. 12. 25. 16:43
토스 앱 서비스의 주요 기능들을 하나씩 엑슈어로 벤치마킹을 하여, 엑슈어의 기능성에 대해 공유하고자 합니다. 두번째로 토스 앱의 첫 화면하단에 있는 홈 편집 금액 숨기기 기능을 살펴보고자 합니다. 구현해야할 기능 list - 홈 편집 금액 숨기기 기능 클릭 시, 생체 정보 인증 팝업 생성 - 각 list 별 드래그 & 드롭 기능 - 드래그 & 드롭 완료 시 하단 바텀 enable - 저장 버튼 클릭 시 위치 값 저장 후 메인 위치 값 변경 - 저장 버튼 클릭 시 로딩 바 구현 * 프로토타입 특성상 첫번째 List 만 구현한 점 참고 바랍니다. * 위치가 변동된 후 다시 편집 진행 시 변경된 위치로 가는 것은 구현하지 않았습니다. 프로토 타이핑 주소 : sf6l5u.axshare.com