Embed Size (px)
DESCRIPTION
UX관련 일본어 슬라이드중 가장 조회수가 높은 슬라이드를 한글로 번역했습니다.
Citation preview
http://www.slideshare.net/ao_bascule/uiux-ui-ux
UI ＆ UX중요한 건、매일 접해도 좋은 UI/UX!
Bascule GO! - 大塚晃 ( 오츠카 아키라 )
UI 에 대해서
UI 의 기초적인 것부터 시작합니다
１．콘텐츠＞ UI
(○) 콘텐츠가 보고싶다(×)UI 가 보고싶다콘텐츠와 서비스를 따라 전체적으로 디자인해야합니다 .
콘텐츠를 버튼에 바로 반응시켜 소화해 버리도록 하고 ,불필요한 파트는 삭제합니다。
네비게이션으로 화면을 절반이나 사용해버리는 UI가 종종 보이는데、당연히 사용하기 어렵습니다 .
２． TPO 중시
・ ON 과 OFF 로 신축성을 부여하세요。・어플내에 있어도 TPO 가 달라지는 것은 전부 별개로 디자인하는게 좋습니다。・혼합하면 위험합니다。느낌이 달라지는 것은 함께 나열하지 말고반드시 화면을 쪼개세요。
OFF→ON OFF→ON
( 역자주 : Time, Place, Occasion 의 약자로 , 때와 장소와 경우를 뜻합니다 .)
４．６만색 컬러로 톤 점프
・ 미묘한 그라데이션과 색감을 사용할 때는 보기엔 지저분해 보이는 경우가있습니다。이럴때는 ,→ 도트 수작업으로 타일링→Photoshop 의 오차확산법으로도 대용가능→PC 모니터로 재현하고 싶은 경우에는、모니터의 설정에서 HighColor(16 비트 ) 를 선택합니다
↓ 톤 점프↓ 이쁜 그라데이션 ↓ 실제로 보면 이쁜 그라데이션이 된다
걸으면서 보는 상황과의자에 앉아서 보는 상황은가독성이 전혀 다릅니다가장 작은 문자는Gmail 등을 참고하면 ○
５．폰트사이즈를 크게
△
×
×
○
○
○
○
○
６．야외의 경우
Contrast 를 높게실내에서 보는 경우보다 몇 배나 화면이 보기 어렵기 때문에 Contrast 를 높게합니다。또、복잡한 레이아웃과 연출은 삼가하고 심플하게。
Action 은 한손 조작・ 짐을 들고 있거나 , 손잡이를 잡고 있거나 ,
중요한 조작이 한 손으로 가능한가를 실제로 넣어보고 확인합니다。
실제로 넣어서 들고 걸어다녀 보고통근시에 체크해보는 것이 좋습니다
７．전환
무한루프・친구리스트에서 친구의 프로필로、친구의 친구리스트에서 자기의 프로필로 ・・・와 같은 무한전환을 만드는 것이 가능하지만 , 전환할 때에 메모리를 소비합니다。스마트폰의 메모리는 부족하기에 루프를 돌지 않도록 정리와 구성이 필요합니다。
Cancel 전환・진행방향만 설계하고、역방향 전환은 생각하지 않는 경우가 많습니다。다이얼로그를 표시하고、다이얼로그로부터 다른 화면을 호출할 때 Cancel 버튼을 누르면、뭐가 표시되는가 ？등。여러가지 상황가정을 하고 설계할 필요가 있습니다。
８． iPhone ⇔ Android 디자인의 호환성
디바이스가 바뀌면 UI 도 바뀌고、같은 UI 설계로는 대응할 수 없습니다。
양쪽의 UI 가이드라인을 읽고특징을 알아둘 필요가 있습니다。
단、서비스와 콘텐츠를 이해하고 있지 않으면、각각의 가이드 라인에휘말려 전혀 다른 어플이 되는 경우도있습니다。
９． Action （＝메뉴）의 차이iPhone 에는 back 버튼과 menu 버튼이 없기 때문에Action 을 위하여 화면이 좁아집니다 .
Android 는 Action 이 메뉴에 들어가있기 때문에메인화면을 넓게 쓸 수 있습니다（메뉴버튼으로 호출）
Android 의 메뉴버튼은iPhone 의 Action 버튼（ ）
Back 버튼Menu 버튼
１０．안이하게 하면 실패하는 UI
２중 탭、２중 다이얼로그 : 자신이 지금 무슨 화면을 조작하고 있는지 알 수 없게 됩니다。
탭의 좌우 스크롤 : 버튼이 움직이면 조작하기어렵습니다。
아코디언 UI :편리하게 보이지만、작은화면에서 버튼이 움직이면오히려 조작이 어렵습니다。
한 화면 안에서 전부할 수 있도록 하는 것보다、기능을 정리하여 화면을 나누거나 삭제하는 편이 결과적으로 쓰기 쉬워집니다 .
기초적인 것들：정리
버튼이 커서모두가 기쁘다면그렇게 해야죠
「쓰기쉬움」이라는 것은 어디까지나 수단。그것보단 정말로 하고 싶은 것을 하세요。
UserXperience 라는 것은
실행을 위한 UX
UserXperience 라는 것은
자유로운 복잡계
UserXperience 라는 것은
UX 를 기반으로 UI 라는 큰 몸을 만드는데복잡한 개념을 사용해봐야 아무 소용 없습니다。UX 의 이해와 목적의 이해는 UI 의 필수조건。
좋은 UI 에、좋은 혼이 깃듭니다！！
Context사정・배경
Value생활・일・놀이
Mind바램・기분
UX 의 독자지표
스마트폰어플 UX 의 MVC
Context사정・배경
Value생활・일・놀이
UX 의독자지표
Mind바램・기분
Trigger
TPO발견
자발적 행동
UX 의 복잡한 일반지표는 결국 이 화살표의 요소들입니다 .
Context가 없으면
Value가 없고
UX 의독자지표
Mind가 없고
유저에게 닿지 않습니다
위의 그림을 사용하여 설명하도록하겠습니다
Context사정・배경
Value생활・일・놀이
UX 의독자지표
Mind바램・기분
Trigger
TPO발견
자발적 행동
UX 의 핵심은 Accessibility 와 Usability 보다이 화살표의 질과 양이 올라가도록 생각하는 것
Context사정・배경
Value생활・일・놀이
UX 의독자지표
Mind바램・기분
２．어플사양１．서비스요건
UX 도 UI 도、어떤 사람을 노리는가가 핵심、UX 보다 한 걸음 먼저 닿는 것이 UI
UX UI
설계의 흐름
MVC 를 실제 예시를 보며설명해보겠습니다 .
AQUA Social Drive
AQUA Social Drive
드라이브하면서 트위터하는 어플
AQUA Social Drive
YouTubehttp://www.youtube.com/watch?v=MmeWeKI8kZs
역자 주 : 일반 GPS 내비기능에 더해 차에서 운전하면서 켜 놓으면 일정 장소를 지날 때 , “남대문을 지나고 있습니다 . 트윗하시겠습니까” 라고 음성으로 물어보고 , “ 네”라고 대답하면 “지금 남대문을 지나고 있습니다 .” 란 트윗을 날려주는 어플입니다 .
1.먼저 （ Context ）
AQUA Social Drive
드라이브중에는 운전에 집중하고 있고 ,
화면조작은 물론 불가능합니다 .
앞을 보고있기 때문에、화면표시는 무의미합니다。
화면을 볼 수도 없고 터치할 수 없는 어플은어떻게 생겨야할까요？
TPO
AQUA Social Drive
２ . 어프로치・미터수 ( 거리 ) 와 교통표지와 같은 상황을 간결하게 알려줄 것。
・스크린세이버같은 반응
・오디오와 라디오처럼 귀를 즐겁게 해줄 것
・ 최소구성・１ M 떨어져서도 읽을 수 있는 문자의 크기→ 실제의 환경을 체험하세요 . PC 화면을 보고 있어도 실제로 구동시켜보지 않으면 모릅니다。
AQUA Social Drive
・ 노이즈 ( 오류 ) 가 되지 않도록 그 공간에 있는 것과씽크를 맞춘다。→신호와 교통표식
AQUA Social Drive
【안전을 위한 배려】메인화면을 만지려고 하면 경고방치해두면 바로 해제되고 원래로 돌아감
AQUA Social Drive
가이드라인에 따라 경고창을 띄우면 ,운전자는 조그만【 OK】버튼을 누르려합니다。위험할 뿐만 아니라 운전도 못하게 됩니다。
가이드라인보다 우선해야하는 것도 있음！
안전을 위해 운전중엔 화면을 조작하지 말아주세요
목적지에 도착
Cancel
AQUA Social Drive
３ . 설계부터 개발을 생각한 준비설계단계에서는 예상치 못한 문제가 생깁니다。UI 설계에서 준비할 수 있는 것은？
AQUA Social Drive
Sequence 단위로 UI패턴을 도출모든 UI 를 시퀀스로 분할해、생각할 수 있는 패턴의 검증을 끝내둔다※UI 는 시퀀스 단위로 재이용이 가능하기에、독자 라이브러리 정도의 느낌으로 작업하면 코스트는 그다지 많이 들지 않습니다。ex. Social Drive 의 UI 에는 pelo ( 저자의 다른 어플 ) 의 것이 많이 쓰이고 있습니다 .
이렇게 하면 ,
・최적의 UI 를 선택할 수 있고、뛰어난 UI 를 발견할 수 있습니다。・자신의 머리도 클리어해、클라이언트와 멤버에의 전개가 스무스・개발과 서비스부터의 변칙적인 요구에도 대응할 수 있습니다。
AQUA Social Drive
시퀀스의 대량생산１시퀀스단위로 나열하여 UI 를 작성해두면패턴도출과 체크등을 하기쉽습니다。
로그인 /커넥트 프로필
드라이브의개시 ~ 종료
종료후의 Action
AQUA Social Drive
시퀀스의 대량생산２대량의 UI 를 간단하게 실제확인하거나、빠르게쉐어하기 위해Web툴을 제작。
PSD 와 도큐먼트를드래그 앤 드롭
AQUA Social Drive
Mockup( 프로토타입 ) 으로 검증・ 개발의리스크：어플의완성에는 시간이 필요、
실제로 써보고부터 알게되면고치는 것이 어렵습니다
・ 설계의리스크：머리속에 완성되어 있어도 놓치고 있는 포인트가 있습니다。
・ 관계자 전부가 실제로 체험을 제공할 수 있기에 조정이 빨라진다。전원의 이해가 깊어져 프로젝트가 불타오른다
프로젝트에 관계된 사람이 많을수록 효과적
AQUA Social Drive
Mock 은 UI 디자인을 토대로 Flash 와 Air 로 제작
・대충의 조작을 쫓는 Full Mock 、・서버사이드와의 연계정리목적으로 사용하는 시퀀스 Mock・주요한 조작을 흐름으로 설명할 수 있는 최소한의 프레젠테이션 Mock
등의 종류가 있습니다。무엇을 검증하기 위한 Mockup 인가를 정의해두지 않으면기대한 효과가 나오지 않는 경우도 있습니다。
[PR] 자사서비스
Cotto사진을 귀엽게꾸며서 놀수있는여성용 어플
Pelo산보기분의체크인어플외출 로그
AndroidiPhone
Pelo's PUZZLE
Newers
www.newers.net
Newers
Twitter과거의 일은 아무도 기억하지 못한다「뉴스의 update및 지난 기록의 휘발성에 의한 최신정보의 집합」
에 특화된 미디어자신 주변의 정보가 모인다。
RSSReader비슷한 뉴스투성이에 질려서、곧 사용되지 않게된다。「뉴스의 집적」에 특화된 관리툴
Newers자신의 주변에서 화제가 되고 있는 뉴스를 읽을 수 있는Interest형 뉴스리더
UX
필터링기능 RSS 의뮤트와록기능톱
Newers
Value 를어떻게컨트롤시킬까。。
모든 행이Value
Newers
WebApp 은 UX 와 UI 를 가장빨리할 수 있다이렇게 되면 좋을텐데라는 아이디어는 누구나 가지고 있습니다。스마트폰용으로 스케일링하면 비교적 간단하게할 수 있습니다
jQuery 로만든 Mock 을 공개하는 이미지실제로 체험해보지않으면 그것이의도했던바를 알수없습니다언어화가 어려운것의 실체를 만들어봅니다。
개발자는２명＋자발적인 지원자
UI 용라이브러리도 만들어보고 싶다는 가벼운기분
click → fn.apply(target, arguments)touchstart → bind(“touchmove touchend”)
touchmove → unbind(“touchmove touchend”)touchend → target=e.target
click → fn
Newers
Android 에서는 탭 거동이 미묘
iPhone 의 Click 구현
Android 의 Click 구현var target
Newers
마지막으로：
UX 는 영상과 드라마 같은 것이고UI 는 그 중 한 프레임과 같다는 생각입니다
연속한 프레임의 위에서씬・무드・전개를 가다듬은 다음에
밖에 나가서 로케이션 헌팅을 한다면재미있는 스마트폰 UI 가 만들어질 겁니다
Thank you.
저희도 어플이 이제 곧 나오는데 , 이걸 먼저 읽어봤더라면 좀 더 잘 만들 수
있었을 거 같기도 한데 , 아쉽네요 . 곧 나오니 나오면 많이 다운 받아주세요 !
기획팀장 이창훈 작성
http://beta.menple.comhttp://menple.tistory.com/https://twitter.com/menple_info
