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