휴대전화풀

휴대폰 UX 의 디자인이 점점 성숙해지고 있다. 그것을 측정하는 한 가지 방법은 우리가 사용할 수 있는 도구를 보는 것이다. Balsamiq, Axure, Fireworks 와 같은 프로토타입 도구를 사용하여 와이어프레임을 구축하고 더미를 클릭하면 특정 UX 를 설명할 수 있습니다. PhoneGap, Zurb Foundation, jQuery Mobile 과 같은 브라우저 프레임워크를 통해 HTML, CSS, JavaScript 와 같은 웹 자연어로 프로토타입을 만들 수 있습니다.

우리는 곧 디자인 경험의 새로운 높이에 도달할 수 있을 것 같다. 그러나 이러한 도구에는 숨겨진 비용이 수반됩니다. 즉, 잘 설계된 제품을 만드는 데 필요한 키를 건너뛰도록 유도하는 데 많은 시간이 소요됩니다.

그래서 내가 먼저 스케치를 그려 문제를 이해하고, 자신이 좋아하는 도구를 걱정하고, 개념을 제시하는 것이 좋습니다.

자, 당신은 다음 상황 중 하나를 생각할 수 있습니다

이런 반대 의견들을 나는 여러 번 들었을 뿐만 아니라, 스스로에게 여러 번 말했다.

스케치는 우리에게 문제를 탐구할 수 있는 공간을 주면서 동시에 해결책을 건립한다. 그것은 문제에 대한 우리의 이해를 확립하고 우리가 가능한 해결책을 찾는 데 도움을 주었다.

우리가 우리의 생각을 그릴 때, 새로운 영감이 나타난다. 모호하고 부주의한 스케치는 영감을 낳을 수 있다. 여기서 모호함은 좋은 일이다. 왜냐하면 우리는 머리 속의 모든 공백을 메울 것이기 때문이다. 이거 보뇌죠? ) 을 참조하십시오. 이것이 바로 스케치의' 파생력' 이다. 그것은 우리의 기존 생각을 사로잡고 새로운 생각을 불러일으킨다. 빌 벡스턴이 "사용자 경험 묘사" 에서 말했듯이,

다양한 솔루션을 그려봄으로써, 우리는 납품하지 않고 그것들을 탐색할 수 있다. 이것은 우리에게 새로운 시각을 주었고, 또한 새로운 문제를 제기했다. 스케치는 본질적으로 일종의 브레인스토밍 연습이다.

일을 잊는 가장 빠른 방법은 펜 한 자루와 종이 한 장을 가지고 빨리 그리는 것이다. 프로토타입 도구에서 같은 일을 하는 데 더 많은 시간이 걸립니다. 먼저 새 프로젝트를 만든 다음 적절한 라이브러리를 선택합니다. 캔버스에 사각형을 그리고 화살표를 그려 사각형을 연결합니다. 모든 것을 조정하여 더 좋게 보이게하십시오. 그리고 ... 그리고 30 분, 심지어 더 긴 시간이 지났다.

만약 네가 종이에 그린 것을 좋아하지 않는다면, 너는 그것을 쓰레기통에 던져서 한 장 더 그릴 수 있다. 프로토타입 도구를 사용하면 좋은 영감이 아니더라도 모든 것이 어려워진다. 그 위에 쓴 시간과 정력 때문이다. (윌리엄 셰익스피어, 템페스트, 원어민, 원어민, 원어민, 원어민, 원어민, 원어민) 다시 시작하는 것이 더 어렵다. 반대로, 종이 스케치는 더 싸고, 속도가 더 빠르다.

스케치는 이해 관계자가 설계 프로세스에 참여하는 강력한 도구입니다. 다음' 닭이 먼저냐, 알이 먼저냐' 는 질문은 전형적인 문제다. 이해 관계자들은 솔루션의 시각화 사례를 볼 때까지 완전한 수요를 계획할 수 없다. 그러나 디자이너는 요구 사항을 정의하기 전에 솔루션을 개발하기를 원하지 않습니다. 추가 작업으로 이어질 수 있으므로 수정을 피하기 위해 최선을 다합니다.

이런 곤경에서 벗어나는 방법은 디자인 스튜디오와 같은 협력적인 스튜디오에서 가능한 방안의 초안을 그리는 것이다 (윌 에번스의 문장' 디자인 스튜디오 방법론 소개' 참조). Dell 은 Dell 의 개념 (옵션 포함) 을 살펴보고 요구 사항의 설계 효과를 설명할 수 있습니다.

스케치 입문 문턱이 낮아 비전문가가 참여할 수 있다. 이해 관계자에게 만년필을 나눠줄지 여부는 개인의 취향과 논란이 되는 문제다. 너는 너의 생각을 정리해야 한다. ) 을 참조하십시오

스케치가 비교적 거칠고 완성되지 않았기 때문에 피드백이 비교적 쉽다. 어떤 사람들은 모든 일이 반드시 완료되어야 한다고 생각하기 때문에 아름답고 고도로 완성된 버전을 보기 전에 보류한다. 하이파이 비전은 사람들의 주의를 산만하게 한다. 그들은 비주얼 디자인이나 디테일을 더 중시한다. 스케치는 그들로 하여금 핵심 개념에 집중하게 했다.

극복해야 할 것은 다른 사람에게 거친 작품을 보여주고 싶지 않다는 것이다.

사람들은 일반적으로 스케치가 반드시 예뻐야 한다는 오해를 하지만, 상호 작용 디자인은 미술 수업이 아니다. 너의 스케치는 예쁘지 않아도 된다. 그들은 단지 당신의 생각을 운반 해야 합니다. 그들은 토론을 자극하고 아이디어를 형성할 수 있어야 합니다. 벽에 매달릴 가능성은 거의 없습니다. 직사각형, 화살표, 원, 간단한 획만 그리면 충분합니다. 조슈아 브루어가 "스케치, 스케치, 스케치" 에서 말했듯이,

스케치 방법을 배우는 것은 이 글의 범위를 벗어났지만, 아래의 전시, 문장, 서적은 모두 상당히 기초적이다.

나는 스케치가 이미 너의 작업 과정의 일부가 되었다고 믿는다. 휴대폰 프로젝트를 어떻게 그려야 하는지 말씀드리겠습니다.

처음에는 모바일 애플리케이션 (또는 웹 사이트) 에 대한 다양한 아이디어를 수집할 수 있습니다. 응용 프로그램 페이지 (또는 부분) 의 다양한 버전을 그리기 시작합니다. 너는 두 가지 목표가 있다: 많은 생각을 형성하고 동시에 탐구하고 평가하는 것이다. 너의 생각이 많을수록 너의 선택은 많아진다. 이 과정을 흔히 발산 스케치라고 합니다.

이러한 유형의 스케치에는 다중 시트 템플릿이라는 매우 유용한 도구가 있습니다. 동일한 페이지에 6 개의 버전을 그릴 수 있는 충분한 공간을 제공하며 화면에 몇 가지 지침을 제공합니다. 다른 아이디어를 보여줌으로써 향후 비교와 토론을 용이하게 한다.

인터넷에는 기성품 템플릿이 많이 있습니다 (보통 Erik Loehfelm 을 사용합니다). 자기가 좋아하는 것을 고르면 된다.

위의 스크린 샷은 메인 메뉴를 적용하는 6 가지 아이디어를 보여줍니다 (내 스케치가 좋지 않다는 것을 생생하게 증명합니다). 나는 보통 여섯 가지 버전을 제시하지 않지만, 나는 적어도 세 가지 버전을 만들 것이다. 이것은 브레인스토밍이기 때문에, 당신은 더 많은 선택을 원하고, 수량은 당신이 원하는 것이다. (알버트 아인슈타인, 생각명언)

창의성이 부족할 경우 일부 휴대폰 UI 의 갤러리에서 영감을 찾을 수 있습니다 (예: 영감 UI, PTT RNS, 귀여운 UI, UIParade). 주 메뉴 및 대화상자와 같은 제목 및 기능별로 솔루션을 표시합니다. 자신이 좋아하는 것을 흡수하여 자신의 생각에 녹아들다.

스케치에 제목을 붙이는 습관을 기르다. 이 제품은 그것들을 더 잘 구분하고 다시 찾을 수 있게 해준다. 스케치와 그 뒤의 사고 과정 (장점, 열세, 다른 개념과의 균형, 문제, 새로운 특징 등) 을 설명하기 위해 주석을 추가하겠습니다. ). 라벨과 일정 또한 관행입니다.

여러 가지 다른 버전의 스케치가 있을 때 가장 좋은 것을 선택하세요. 불행히도, 단 하나의 스케치만으로는 모든 상황을 대표하기 어렵다. 대부분의 경우 아이디어 나 아이디어를 승리의 개념으로 통합해야합니다. 더 많은 세부 사항을 추가하여 더 자세히 탐색해야 합니다. 공백에 메시지를 남겨 주세요. 모든 문제, 생각, 중요하고 불명확한 곳, 토론할 모든 문제를 적어라. 이것은 다른 사람들이 당신의 사고 과정을 더 잘 이해할 수 있게 해준다. 이 링크는 흔히' 수렴 스케치' 라고 불린다.

발산 스케치와 수렴 스케치에 대한 자세한 내용은 Failcon 20 10 의 Leah Buley 프레젠테이션 "더 빠르고 좋은 디자인" 과 Brandon Shauer 의 문장 "스케치 보드: 더 좋고 빠른 UX 솔루션 발견" 을 참조하십시오.

당신의 생각을 핵심 인터페이스 세트로 요약한 후, 다음 단계는 그것들이 어떻게 관련되어 있는지를 탐구하는 것이다. (존 F. 케네디, 생각명언) 사용자가 솔루션을 사용하여 작업을 수행하는 방법을 보여 주는 일련의 키프레임인 일부 UI 스트림을 생성합니다. UI 순서도는 인터페이스에서 사용된 요소 (예: 어떤 버튼을 눌렀는지, 어떤 제스처를 사용했는지) 와 시스템 피드백 (예: 애니메이션, 전환, 팝업 대화 상자 또는 새 인터페이스) 을 식별합니다. 또한 주요 인터페이스의 다양한 상태도 표시됩니다 (예: 시작은 비어 있고 나중에 내용이 채워짐).

UI 순서도를 사용하지 않고 다른 결과 (예: 검색 결과 목록 및 빈 목록) 를 상상할 수 있습니다. 순서도는 더 이상 선형이 아닙니다. 분기마다 결과가 다를 수 있습니다. 그러나 순서도의 분기 수를 가능한 한 제한하십시오. 각 분기는 복잡성을 증가시키지만 순서도는 이해하기가 더 어렵습니다. 설명하기가 더 어렵습니다.

모든 사용 사례의 초안을 그릴 필요는 없습니다. 평소에 중요한 것을 골라 그리다. 파레토의 법칙은 좋은 방법을 제시했다: 20% 의 함수를 그리면 80% 의 상황을 처리할 수 있다.

나는 보통 중요한 용례로 시작하여 그것의 해결책을 찾으려고 노력한다. 인터페이스에서 상호 작용을 인식하고 화살표로 연결하겠습니다. 나는 모든 단계와 라벨을 설명하고, 보통 미친 듯이 논평한다.

아래 문장 내용을 보시면 휴대폰 인터페이스와 UI 순서도를 어떻게 그려야 하는지에 대해 더 깊은 인상을 받으실 수 있을 겁니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 스포츠명언) 지젤 무러의 문장' 고무적인 UI 와이어프레임 스케치' 입니다. Moobileframes-휴대폰 스케치 와이어프레임을 보여주는 블로그; 와이어프레임 제이콥 리노스키의 웹사이트입니다. 순서도에서 Jakub 의 인터랙티브 스케치 기호 (PDF) 를 사용할 수도 있습니다.

위의 세 단계가 어떻게 서로 관련되어 있는지 알려주는 장면이 있습니다. 다음은 몇 가지 일반적인 스케치 단계입니다.

당신은 많은 "왜?" 를 볼 수 있습니다. 문제. 스케치는 문제를 이해하려고 노력하면서 동시에 문제를 해결하기 때문이다. 이 스케치들이 직면한 문제들을 옆에 써서, 이번에 정확한 개념을 얻을 수 있도록 안내해 드리겠습니다.

주요 인터페이스와 주요 사용 사례를 그린 후에는 휴대 전화에 개념을 적용하고 싶을 수 있습니다. Pop, Protosketch 등의 응용프로그램을 사용하면 스케치를 가져온 다음 원형을 만들 수 있습니다. 이것은 빠르고, 저렴하고, 진실된 방식으로 전체 개념 상호 작용을 직관적으로 느낄 수 있게 해 주며, 프로토타입 상호 작용을 더욱 사실적으로 만들 수 있다. (윌리엄 셰익스피어, 템플릿, 과학명언)

또는 Axure 와 같은 더 많은 기능을 갖춘 도구로 인터페이스를 가져와서 프로토타입을 만들 수도 있습니다.

네가 어떤 방법을 사용하든지 간에. 당신의 목표는 실제 핸드폰에서 당신의 개념과 효과를 빠르게 테스트하는 것입니다.

스케치는 당신이 해결하려는 문제를 더 잘 이해하고 가능한 해결책을 상상할 수 있도록 도와준다. (조지 버나드 쇼, 자기관리명언) 배달하기 전에 브레인스토밍을 하고 많은 UI 아이디어를 테스트하는 빠르고 저렴한 방법입니다. Sketch 는 개념 생성을 가속화하고 인터페이스를 반복하여 피드백을 더 빠르고 쉽게 변경할 수 있도록 합니다.

다음 스케치에서는 다음 원칙을 기억하십시오. 그들은 당신을 정상 궤도에 올려놓을 것입니다.

소품을 감상하다!