Prototype/Axure Deep Dive
-
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을 클릭 후 링크를 삽입해 주시면 됩니다. *주의할점은 링크 삽입 시..