도리스 블로그

네이버 스마트에디터 3.0 (Web ver.)접속 초기 화면에 레이어 팝업으로 주요 도움말을 보여준다. 스마트에디터 화면 내에 이 동영상(가이드)을 바로 열어볼 수 있는 조그만 장치가 있으면 좋을 듯하다. 카카오 브런치 Brunch (Web ver.)글쓰기 화면에 접속 시 글자편집에 관한 도움말을 애니메이션으로 보여준다. 그 후 사용자가 기능을 처음 사용할 때 그에 해당하는 도움말을 레이어 팝업으로 보여준다. 미디엄 Medium (Web ver.)처음 접속 시 화면 하단에 도움말을 보여준다. 좌우 화살표를 클릭해서 다음 내용을 볼 수 있다. 일부 도움말은 애니메이션을 통해 이해를 돕고 있다. 도움말 맨 마지막에는 이 도움말을 다시 보는 방법에 대한 도움말이 나온다. 끝.

노트정리, 할일목록, 메일 등 폴더 또는 카테고리 기능이 포함된 목록 관리 웹서비스의 사용자 도움말 표현 사례를 모았다. 도움말이 보여지는 시점 및 위치, 도움말로 설명할 내용의 범위에 대해 탐구가 필요하다. 노트정리 ‘에버노트 Evernote’할일목록 ‘원더리스트 Wunderlist’메일 ‘인박스 Inbox by Gmail’ 에버노트 웹서비스계정 생성 후 처음 만나게 되는 화면이다. 하단의 아이콘 옆에 툴팁이 계속 보여진다. 계정관련 내용이 있을 거라는 힌트를 준다. 목록은 비어있지 않다. 에버노트 측에서 사용법을 작성해 놓은 8개의 노트가 목록을 채우고 있다. +(새 노트)를 클릭하면 글쓰기 화면으로 전환된다.이때 화면 레이아웃이 바뀌는데 좌측에 보이던 것들이 사라져 혼란스러울 수 있는 사용자를 위해..

관련 글브런치 모바일앱 UI - Part 1 홈, 글목록, 글본문 브런치 모바일앱 글쓰기 글쓰기 화면은 3가지 항목으로 구성된다. 제목소제목내용 글보기 화면은 제목과 커버이미지를 담고 있는 상단과 하단의 내용으로 구분할 수 있는데 상단을 꾸미기 위해서는 글쓰기 화면의 ‘제목’을 이용하면 된다. 브런치 모바일앱에서 상단영역으로 만들 수 있는 유형은 다음과 같다.브런치 모바일앱 커버이미지 유형 배경배경이미지가 화면에 꽉 채워지도록배경이미지가 정사각틀에 맞춰 채워지고 아래에 내용의 일부가 보여지도록배경이미지 없이 제목만 표시 (배경색 선택 가능, 선택하지 않으면 흰색 배경) 제목 정렬왼쪽이나 가운데 중 선택할 수 있다.세로 정렬은 임의로 정할 수 없다. 배경이미지 세로 사이즈에 따라 정해진다. 커버이미지 만들..

브런치 모바일앱 UI - Part 1 홈, 글목록, 글본문 브런치 홈상하 스크롤로 컨텐츠 사이를 이동한다. 이전, 다음 전환 시 기존 화면의 크기가 축소되면서 사라진다. 배경이미지와 텍스트는 시간차를 두고 등장한다. 웹사이트의 패럴랙스 스크롤처럼. File drawer, Card index, iOS safari 글본문읽기 상태로 돌입하면 글 내용과 관련 없는 요소들은 화면에서 사라진다. 최상단의 상태바까지 생략되는 넓은 화면. 내용을 읽다가 위로 스크롤 하면 화면 상단에 툴바가 나타난다. 티스토리 앱 메뉴좌측에서 메뉴가 나타나면서 기존 화면의 크기가 축소되면서 어두워진다. 검색 매거진 글목록 시작 화면에 매거진 제목, 작성자, 관련태그, 구독신청, 인기도 표시(구독수, 공유수)가 있다. 매거진 느낌을 살..

모바일웹 쇼핑몰 상품소개 화면 - 탭 메뉴 화면 상단 고정 쇼핑몰 상품소개 화면에서 아래로 스크롤 시 앞단의 기본정보 다음에 상품관련 컨텐츠를 유형별로 구분해서 탭 메뉴 형태로 나누어 보여준다. 상품상세정보, 후기및평가, 질문답변, 판매자정보 등 3~4개 탭 메뉴로 구성된다. 대게 탭 메뉴는 첫 등장 지점부터 화면의 끝까지 상단에 고정으로 위치한다. 위로 스크롤 해서 탭 메뉴 시작 지점보다 더 위로 올라가게 되면 화면에서 사라진다. 스크롤 시 탭 메뉴 화면 상단 고정 사례스토어팜11번가인터파크G마켓옥션롯데닷컴 내비게이션 바와 탭 메뉴가 같이 고정되는 경우 cjmall 탭 메뉴 화면 상단 고정 애니메이션 gif 스토어팜 11번가 인터파크 G마켓 옥션 롯데닷컴 cjmall 내비게이션 바 화면 타이틀 표시 관..

스마트폰 화면에서 컨텐츠 영역 넓게 사용하기. 스마트폰의 작은 화면에서 컨텐츠 영역을 넓게 사용하기 위한 방법으로 화면 상하단의 영역을 숨겼다가 보여주는 식의 방법이 사용된다. 화면을 위로 밀면 상단 영역이 축소되거나 내비게이션 바로 변화되면서 최소화 되고, 주요 컨텐츠를 볼 수 있는 공간이 늘어난다. 다시 화면을 아래로 당겨 컨텐츠의 최상단으로 이동하면 최소화 되었던 상단 영역이 원래데로 돌아온다. 상단 컨텐츠 영역이 축소되는 사례 (iOS) 네이버 블로그 (mobile web) 유튜브 (mobile app) 상단 비쥬얼 영역이 내비게이션 바로 전환되는 사례 (iOS) 네이버 밴드 (mobile app) 벅스뮤직 (mobile app) 브라우저 자체적으로 상하단 축소, 숨김 사례 (iOS) 사파리 브라..

보호되어 있는 글입니다.

iPhone Screen Transition 아이폰 모바일앱 화면 전환 애니메이션 모음 01 1. Hostel World 호스텔 월드 버튼 탭과 스와이프 제스처 모두 부드럽게 반응한다. 2. Megabox 메가박스 메뉴 보기가 버튼 탭으로만 반응한다. 홈 화면의 포스터 스와이프 제스쳐와 구분되어야 해서 그런가? 3. 움직이는 기초영어 좌측 메뉴 펼치기와 우측 달성률 보기가 버튼 탭으로만 반응한다. 호스텔월드와 비교했을 때 움직임이 딱딱하다. 4. Voice Translator 모바일앱 버튼 탭, 스와이프 제스처 모두 반응한다. 하지만 좌측 언어선택 애니메이션이 진행중일 때는 홈 화면으로 전환은 안된다. 화면 전환을 할 때 좌우 스와이프 제스처가 확실해야 작동한다. 홈 화면이 대화창이라 세로방향 스크롤과 ..

팩스 수신, 발신을 스마트폰으로 해결한다! 엔팩스 enFax 모바일앱 탐구 최근에 보험사 고객센터에 개인정보변경 건으로 문의를 했더니 먼저 신청서를 팩스로 보내면 받아서 작성 후 다시 팩스로 보내서 접수해야 한다는 답변을 들었다. 팩시밀리가 없어서 이메일로 처리할 수 없느냐고 물었더니 방법이 없단다! 예전에 팩스 수신이 필요할 때 임시로 인터넷 팩스 서비스에 가입해서 사용한 후 해지했던 적이 있었다. 그런데 이번에는 굳이 인터넷 팩스를 이용할 필요성을 느끼지 못하고 일 처리를 하던 중이었다. 여러 기관에 변경 신청을 했는데 대부분 필요서류를 이메일 이나 문자메시지 전송으로 해결할 수 있었기 때문이다. 다른 한 보험사는 문자메시지로 서류를 전송하는 임시번호 같은 것을 보내주고 그리로 서류를 사진 찍어 보내..

보호되어 있는 글입니다.