본문 바로가기

[UX] Mobile

모바일 화면설계 시 도움될만한 모바일 인터랙션 패턴 라이브러리 모바일 화면 설계를 하면서 항상 고민하게 되는 트랜지션, 애니메이션에 대한 사이트모음 공유합니다.모바일 UI 패턴 라이브러리 외에 인터랙션 관련 아카이빙 페이지 입니다. :) 발표 자료로 미리 만들어 놓았어서 발표자료와 함께 올릴까 했는데 미리 참고하실 수 있도록 공유해봅니다. 트랜지션, 애니메이션에 대한 자료 역시 조만간 함께 링크걸어놓도록 하겠습니다. UI 애니메이션 아카이빙http://capptivate.co/http://useyourinterface.com/https://dribbble.com/shots?list=animatedhttp://ui-animations.tumblr.com/http://sixux.com/http://giphy.com/ UI 애니메이션/트랜지션 구현http://codepe.. 더보기
모든 검색창이 고민했으면 하는 7가지 원글: http://insideintercom.io/7-things-wish-every-search-did/ 모든 검색창이 기본적으로 지켜야 하는 기본적인 7가지 원칙에 대한 이야기입니다. 검색이 중요한 이유는 너무나도 잘 아실텐데요, 점점 복잡해지고 발전되어가는 다양한 서비스들, 특히나 작은 화면을 가진 모바일 서비스에서 특정 콘텐츠를 찾는 것은 매우 어려운일이 되어가고 있습니다. 좋은 검색경험은 스피드와 타당성에 대한것이 매우 중요합니다. 이 글에서는 아래 최소한의 노력으로 올바른 결과를 제시할 수 있게끔 도와주는 7가지 방법을 소개합니다. 1. 첫번째 키워드입력부터 서제스트 제공하기 이는 결과가 아닌 서제스트일 뿐이지만 사용자에게 옳은 결과로 쉽게 갈 수 있게 해주는 지름길 역할을 해줍니다. 첫번째.. 더보기
미래를 위해 디자인하는 방법, Z-Axis 디자인하기. the z-axis: Designing for the Future원문: http://alistapart.com/article/the-z-axis-designing-for-the-future 우리는 그동안 대부분 웹페이지에서 평면적인 2차원에서의 UI의 고민을 해왔습니다.하지만 모바일에서도 다양한 사이즈의 디바이스가 출시되면서 지속적으로 이를 위한 다양한 디자인을 하게 됩되고 이런 환경에서 모바일이라는 작은 스크린에서 해볼 수 있는 새로운 디자인 방법이 있을까 하는 고민에서 정리된 글이라는 생각이 드네요. 이 글에서는 디자인 문제를 해결하기 위해 Z축을 활용하는 2가지 방법을 제시를 하고 있습니다. 첫번째는 레이어.레이어는 필요할 때 노출, 또 필요없을 때 사라지게 할 수 있는 좋은 UI라고 할 수 있으며.. 더보기
[Tablet] iPad를 위한 디자인 가이드 출처: https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UEBestPractices/UEBestPractices.html#//apple_ref/doc/uid/TP40006556-CH20-SW4 아래는 발번역.. For iPad: 1. Enhance Interactivity (Don't Just Add Features) 인터랙티비티를 향상시켜라 (단순히 기능만 추가하지 말 것) 최고의 아이패드 앱은 사람들에게 컨텐츠와 교류할 수 있는 이상적인 방법을 제공한다. 그러면서 사용자들을 명확하게 한정된 태스크를 수행하게 된다. 기능을 추가하고픈 유혹에서 벗어나야 한다. 이는 주요 태스크와 직접적으로 .. 더보기
안드로이드 UI: 내비게이션(백 & 업) http://developer.android.com/design/patterns/navigation.html Navigation with Back and Up 전체 사용자 경험에서 일관성있는 내비게이션은 필수적인 요소이다.생각지도 못했던 방법의 내비나 일관성 없이 동작하는 내비 보다 사람들을 혼란스럽게 하는건 없다.안드로이드 3.0은 글로벌 내비게이션에 중요한 변화를 소개하였다.사려깊게도 이 가이드라인(Back and Up)은 앱의 내비게이션을 사용자들을 위해 신뢰할 수 있고 명확하게 생각하게 할 수 있을 것이다. 안드로이드 2.3, 그리고 그 이전 버전은 앱 내부에서 내비게이션을 지원하기 위해 시스템 백버튼에 의지하였다.앱아이콘과 Left-point 기호로 이루어진 것 = Up버튼 Up vs. Back.. 더보기
안드로이드 UI: 구글 액션바 http://developer.android.com/design/patterns/actionbar.html Action Bar 액션바는 안드로이드앱에서 틀림없이 가장 중요한 구조상의 요소이다.이는 각 화면의 상단에서 부여된 영역이며 앱을 통해서 지속적으로 보여지는 영역이다. 액션바의 주 목적1. 중요한 액션(검색 등)을 인지가능한 범위내에서 잘 보이도록 접근가능하도록 만들어준다.2. 일관성있는 내비를 지원하고 앱 내에서 전환을 볼 수 있다.3. 거의 사용되지 않는 액션을 위해 필요없는 요소들을 줄여준다.4. 당신의 앱에 아이덴티티를 주기위해 할당된 공간을 제공한다. 만일 안드로이드앱을 처음쓰는 사람이라면 액션바는 사람들이 사용할 수 있는 중요한 디자인 요소중에 하나임을 인지해야한다.여기있는 가이드라인을 .. 더보기
모바일 UX를 위한 10가지 트렌드 http://whitespace.umeshgopinath.com/2012/07/10-trends-for-mobile-user-experience.html 모바일 UX를 위한 10가지 트렌드(발번역) 요약하면 1. 모바일/웹은 이제 하나로 고려해서 디자인해야 할 때. - 위로 스크롤하는 기능에 대한 고려 - 플로팅 헤더 고려 - 반응형 웹 고려 - 레티나 디스플레이에 대한 고려 (고해상도 이미지) 2. 모바일만의 특화된 기능 고려 - 좌측 메뉴 숨기기 기능 고려 - 하이브리드앱에 대한 고려 3. 모든 규칙들을 깰 수 있는 새로운 UX에 대한 고민 필요! 1. 위로 스크롤 기능 고려 (Go Up is back)페이징 컨셉은 웹에서 사라지고 있다.스크롤 다운함으로써 컨텐츠를 느리게 로딩하는 건 페이지를 너무 .. 더보기
T-mobile Angry Bird Live T모바일에서 앵그리 버드 실사 게임 이벤트를 진행했네요. :) 나오는 새들 뿐만 아니라 나오는 음악도 Live! 그리고 아래 영상은 Angry Bird Live Behind the Scene 영상. 더보기