Android Design in Action: Fitness Apps and Modern UIs

로마 누리 크 : 안녕하세요 "Android Design in Action "언제나 그렇듯이, 나는 당신의 호스트 인 Roman Nurik입니다

안녕 얘들 아담 코흐 NICK BUTCHER : 그리고 런던의 Nick Butcher 로마 누리 크 : 그리고 오늘, 우리는 이야기 할 것입니다 – 우리가 뭘 얘기 할거야? 우리는 피트니스 앱에 대해 이야기 할 것입니다 개인 피트니스 애플 리케이션 사실 이것은 닉이 가장 좋아하는 카테고리 중 하나이기 때문에 Endomondo에 대해 오늘 많이 이야기하고 있습니다

그것은 우리가 오늘 강조 할 훌륭한 앱입니다 그리고 우리가 피트니스 앱을 다룬 후에 구체적으로 실제로 피트니스에 대한 일부 태블릿 정보 애플 리케이션, 우리는 현대적인 UI로, 그리고 더 구체적으로, 무엇보다 현대적인 UI를 구성하는 일부 패턴 디자인 가이드에서 보았습니다 그래서 Endomondo로 뛰어 들자 그래서 저는 그것을 바로 넘겨 줄 것입니다 – 오, 우리는 약간의 깜박임이 계속 발생했습니다 우리가해야 할 일은

? 우리가 방금이 플러그를 뽑을 수 있는지 보자 다시 연결하십시오 NICK BUTCHER : 당신은 "The App Clinic "지난 주부터? 네

아직도 일어나고있어 ADAM KOCH : Y-Cast가 다시 시작됩니다 그래, 다시 시작해야 할까? 승인 다시 시작합시다 잠시 후에 다시 연락 드리겠습니다

좋아, 그래서 우리는 돌아 왔다고 생각해 그리고 희망적으로 깜박임이 멈췄습니다 내 생각에 그것은 데모 신의 작은 부분 일 뿐이라고 생각합니다 오랫동안 앱 클리닉에서 그들의 약의 맛 하지만 어쨌든, Endomondo와 함께, 나는 우리가 Nick, Nick 이후로,이 앱이 가장 좋아하는 앱입니다

엔도 몬도에서 얘기하고 싶니? NICK BUTCHER : 네, 이것은 제가 가장 자주 사용하는 것 중 하나입니다 애플 리케이션, 나는 말할 것이다 나는 여가 시간에 트라이 애슬론을 조금한다 멀리 안드로이드 개발에서 그래서이 훈련을 추적하기 위해이 응용 프로그램을 사용합니다

그리고 저는 그것에 대해 약간의 통계가 있습니다 따라서 피트니스 앱을 사용했다면 일반적인 앱을 제공합니다 TPS를 사용하여 운동 추적 기능, 로깅, 등등 하지만 내가 좋아하는 측면 중 하나는 그들이 정말로 Android UI 가이드 라인을 따르고 또한 연락처 배지와 같은 재미있는 것들을 통합하는 등 Android UI와 깊이 통합됩니다 여기서 우리가보고있는 스크린 샷은 다음과 같습니다

예를 들어, 활동 피드와 당신이 한 운동 그리고 나는 당신이 볼 수 있다고 생각합니다 그들은 꽤 괜찮은 것을했습니다 UI 지침을 따르는 일 여기서 볼 수 있습니다 – 너를 방해하려는거야, 닉 이것은 매우 가련한 역사의 버전입니다

나는 실제로 달리기, 자전거 타기, 또는 아무것도하지 않습니다 그게 바로 Nick의 작업 라인입니다 그러나 이것은 볼 수있는 것의 한 예일뿐입니다 이벤트를 캡처 한 후, 어떻게 생겼는지 그러나 실제 시나리오에서는 분명히 사물의 목록

미안, 어서, 닉 NICK BUTCHER : 매우 희소한 목록입니다 탭에 대해 의견을 말 했나요? 우리가 여기서보고있는 패턴을 리프레쉬할까요? ADAM KOCH : 예, 그렇습니다 실제로 그것을 버리고 싶습니다 너희들에게, 너 같은 종류에 대한 너의 생각은 뭐니? 패턴을 새로 고침하거나 새로 고침하여 새로 고침 하시겠습니까? 개인적으로 실제로는 새로 고침 아이콘이 액션 바는 불확정 스피너에 끝나며, 새로 고침이 진행되는 동안, 그러나 나는 모른다

너희들은 어떻게 생각하니? NICK BUTCHER : 패턴을 그대로 설명해주세요 그것은 스크린 샷에서 명확하지 않다 이것은 Pull to Refresh 패턴의 변형입니다 그래서 오른쪽에, 당신은 Roman의 활동을 당신이 그것을 아래로 당길 때까지 꼭대기에 실제로 내뿜어 라 그런 다음 Tap to Refresh 옵션이 추가로 나타납니다

그래서 제 의견으로는, 이것은 대단히 잘 작동하지 않습니다 왜냐하면 새로 고침하려면 당연히 편리합니다 단지 하나의 제스처 반면에 이것은 제스처와 같은 것입니다 따라서 새로 고침 버튼 만 있으면됩니다

나를 위해, 나는 당신이 말했듯이, Adam, Refresh 버튼 액션 바에서 불확실한 진전 – 대부분 안드로이드에서 목록은 탄력성이 없기 때문입니다 나는 이것이 iOS에서 Tweety의 패턴이라는 것을 알 수있다 그리고 그 플랫폼에서 잘 작동합니다 목록에는 이런 종류의 탄력적 인 특징이 있습니다 그래서 그것을 과장하기 위해 정말 잘 작동합니다

어떤 종류의 일을하는 것 안드로이드는 그렇지 않지만, 당신은 그렇게하지 않습니다 기대는 어떤 종류의 힘 필드를 가지고있는 것입니다 당신이 목록의 끝에 도달했다는 표시 따라서 추가 옵션을 공개하는 것은 정신 [? 모델?] 나를 위해

네, 확실히 동의합니다 제 생각에 탭을 새로 고침하는 것과 같은 것을 사용하면, 또는 나는 추측한다, 당겨서 새로 고침한다, 정말로, 우리 권고는 가지고있다 만약 당신이 그것을 사용한다면, 무언가와 함께 그것을 사용하십시오 액션 바의 새로 고침 버튼과 같이, 심지어 오버플로에서 새로 고침이 자동 또는 사용자 인 경우 정말로 항상 사용하지 않을 것입니다 오버플로는 완전히 허용됩니다

아담 코치 : 네, 제 생각에는이 경우에는 거기에 실제 액션 아이템을 보여주는 방 때로는 불가능할 수도 있습니다 오버플로 메뉴에 넣어야합니다 어쩌면 새로 고침하기 (Pull to Refresh)가 사용자에게 더욱 분명하게 드러날 수 있습니다 그렇다면, 나는 추측한다

하지만이 경우 나는 개인적으로 그것이 좋은 추가라고 생각할 것이다 니키 버셔 : 좋아, 그럼 우리가 계속해야하지? 그래서이 두 화면은 그 역사와 종류입니다 활동 스트림 및 뉴스 피드 우리가 다음으로 나아가면, 멋진 기능 중 일부가 있습니다

내가 정말로 좋아하는 것은 경로를 찾는 능력 – 그래서 다른 사용자가 만든 경로는 정말 멋지 네요 네가 여행 중이라면 캘리포니아에 와서 마운틴 뷰를 방문하면 모선,이 기능을 사용하여 달리기를 찾았습니다 환상적인 낯선 지역의 경로 코치 : 닉, 거기에 뿌리 나 루트를 의미합니까? 닉 바쳐 : [LAUGH] 나는 "뿌리"를 의미한다고 확신한다

코닥 : [LAUGH] 알았어, 그냥 확인해 NICK BUTCHER : 네, 그리고 경로를 보는 것뿐입니다 그 자체로, 당신은 챔피언이라는 개념을 가질 수 있습니다 시도하고 누군가의 시간을 이길, 또는 그런 종류의 물건, 모든 재미있는 물건 그래서 이것들은 우리가 강조하고 강조하고자하는 재미있는 기능입니다

전화 앱에서 로마가 말했듯이, 나는 앱을 많이 사용한다 하루에 몇 번, 정상적으로 그래서 응용 프로그램을 사용하여 꽤 행복했습니다 그러나 내가 정말로 느끼고있는 것이 부족한 것 일부 타블렛 기능입니다 따라서 우리가 어떤 기능을 응용 프로그램 웹 사이트에 제공, 실제로 일부 정말 유용하고 유용한 기능입니다

타블렛 응용 프로그램을 실행하기에 완벽 할 것입니다 여기 예를 들어 기본 운동 화면이 있습니다 운동을 추적하는 데 사용할 수 있습니다 네가 얻을 수 있기 때문에 나는 이것이 정말로 동기 부여가되는 것을 발견했다 이번 달보기에는 작은 아바타가 당신이 한 활동들

그리고 나를 위해, 이것은 나를 계속 지켜주는 것들 중 하나입니다 다시, 그리고 응용 프로그램을 사용하여 나를 유지합니다 내가 며칠을 놓치면 너는 아무 것도 없어 다시 와서 그 사각형을 채울 수 있습니다 다시 찾아보고 완전히 채워진 것을 볼 때 나는 그것을 좋아한다 귀하의 훈련이 얼마나 일관성이 있었는지보십시오 닉, 넌 운동이 아니야

이걸보고 내 말은, 하루에 한 가지 이상의 운동 항목이 있다는 의미입니다 인상적이다 NICK BUTCHER : 음, 내 자전거를 타기 위해 통근하곤 했어 아마 속이는거야

우리는 거기에 갈 그래, 이거 정말 중요한 부분이라고 생각해 내가 생각하기에 매우 유용한 정보 당신이 타블렛에 앉는 더 큰 부동산에 그리고 다음 화면으로 넘어 가면 다른 우리가 얘기하고 싶었던 점은 너는 끌 수있어 내가 말했듯이, 나는 약간의 통계 괴상한 사람이다

그래서 나는 사랑한다 내 운동을 부어 볼 수 있고, 알다시피, 나는 개선, 더 많은 마일리지를 수행했는지, 더 빨리 수행했는지 평균 시간, 모든 것들 그래서 몇 가지를 꺼낼 실제 기회가있는 것처럼 느껴집니다 더 많은 공간이있을 때이 정보를 우리가 태블릿에 관해 이야기 할 때, 아무도 당신이 네 팔에 묶인 넥서스 10으로 달려 가라 또는 뒷 주머니에

말도 안돼 ADAM KOCH : 넥서스 7 일 수도 있습니다 Nickus BUTCHER : 넥서스 7조차 [알아들을 수 없는] 좋은 점을 뽑아 냈습니다 실제로, 나는 정말로 체육관에 앉아서, 운동 용 자전거에 앉아서, 예를 들면

태블릿을 사용하여 영화를 보거나 따라 잡기 위해 YouTube의 최신 Android 개발 하지만 너는에 넘기고 싶을지도 모른다 캡쳐 할 운동 앱의 태블릿에 최적화 된 인터페이스 그 멋진 운동을 방금했습니다 하지만 나에게있어 내가하고 싶은 가장 큰 일은 할 수있는 일은 뉴스 피드를 소비하는 것입니다 하고, 내 통계를 쏟아 부어보고, 앞으로도 계획을 세우십시오 사용할 수있는 다른 경로

이것이 우리가 시도한 주요 측면입니다 다시 상상할 수있는 신청 NANIK : 그리고 제가 지적하고자하는 한 가지는 – 이 웹 사이트의 아주 작은 부분이 있습니다 옆에있는 창유리들 중 하나는 당신에게 보여줍니다 당신이 한 운동의 개인적인 유형뿐만 아니라 이번 달에 당신이 얼마나 오래 있었는지, 얼마나 많은 당신이 태운 칼로리

그리고 그 종류의 요약 정보가 공정하게 느껴집니다 한 달에 한 번씩 보는 것이 재미 있습니다 그렇게 쉽게 이용할 수있게되면 태블릿이나 큰 화면 UI NICK BUTCHER : 멋지다 ROMAN NURIK : 한 명 더 있다고 생각합니다

오 우리는하지 않습니다 그래서 우리는 엔도 몬도 (Endomondo)를 살펴 보았습니다 실제로, 저는 Nick에게 그가 앱을 어떻게 사용하고 그가 무엇을 할 것인지 이야기했습니다 태블릿 경험을 원한다

그리고 태블릿에서 어떻게 보일 수 있는지 살펴 보았습니다 특히, 더 많은 소비 경험, 더 많은 소비 흐름을 제공합니다 당신은 소파에 앉아 있고, 무엇을해야할지 계획하고 있습니다 나머지 일주일 동안 – 너는 너의 현재 통계가 뭔지보고 싶을 뿐이야 뿐만 아니라, 닉이 말했듯이, 당신이 도착하면 모선을 방문하는 마운틴 뷰

주변 경로 및 찾아보기 방법 아주 시각적 인 방법? 그래서 우리는 이런 것들을 가져 갔고 우리는 정말 멋진 대시 보드와 같은 것을 만드십시오 그리고 대시 보드가 아니라는 의미에서 대시 보드가 아닙니다 대시 보드와 같은 탐색 옵션을 보여줍니다 패턴으로 4 ~ 6 개의 아이콘을 볼 수 있습니다 새로운 콘텐츠를 보여줍니다

이것은 정말로 콘텐츠 전달 대시 보드와 같습니다 앱의 다양한 측면을 보여주는 다양한 측면을 보여줍니다 서비스를 한 화면에 모두 표시합니다 그래서 여기에 정보 계층이 집중되어 있습니다 진짜 좋아해– 현재 운동

여기가 기본 창입니다 그것은 중앙 창입니다 그리고 두 번째로 중요한 아이템이 화면은 누군가가 논평한지 여부에 관계없이 사회적 활동입니다 당신의 사건 중 하나, 누군가가 너 근처에있는 길 근처에서 도망 갔다 너 근처에 "뿌리"가있을거야

당신은 멋지고 사용하기 쉬운 이러한 것들을보고 싶습니다 오른쪽에 피드 우리가 한 일은 기본적으로 기존의 해당 핸드셋 화면에서 피드를 얻고 개별 콘텐츠 항목을 풍부하게합니다 각 콘텐츠는 여기에 표시됩니다 텍스트 한 조각

시간이 있습니다 그것은 클릭 할 수있는 객체를 가지고 있습니다 Han에 대한 세부 사항보기, Han의 전체 프로필 페이지 그리고 당신이 관심을 가질만한 경로라면, 어쩌면 이런 종류의 토큰 또는 콘텐츠 확장이 있습니다 내가 지적하고 싶었던 또 다른 점은 액션, 핸드셋의 현재 앱에서 뭔가에 대해 논평 할 수 있습니다

각 목록 항목 옆에는 이런 종류의 설명 버튼이 있습니다 그러나 무엇이든을 좋아할 방법이 없습니다 나는 좋아하는 것 또는 + 1-ing 또는 그런 것, 일종의 가벼운 길이라고 생각한다 상호 작용하기 – 말, 오, 그래, 이건 축하해 의견을 말하면서 댓글을 달았습니다

NICK BUTCHER : 앱에 그 앱이 있다고 생각합니다 오, 알겠습니다 NICK BUTCHER : UI에서 완전히 명확하지 않습니다 UI는 단순한 플럽이며 일반적인 거품이기 때문에 그것을 클릭하면 주석을 달 수있는 옵션이 제공됩니다 알았어

그래서 우리가 여기서 한 것은, 대신에 다른 어 포지션, 기본적으로 오버 플로우 자산 나타냅니다, 어이, 행동이 있습니다, 여러 이 작업을 수행 할 수 있습니다 그리고 분명히, 당신은 길게 눌러 선택할 수 있어야합니다 행동을 취하는 것 – 여러 게시물을 좋아하세요 하지만 여기에서는 하나의 항목에 대해 조치를 취할 수 있습니다 길게 누르면 상황 별 액션 바가 표시됩니다

이 오버플로를 터치하여 여러 항목이 있음을 보여주고, 또는 여러 작업이 있습니다 이는 Google Now가하는 것과 매우 유사합니다 따라서 Google Now에는 여러 장의 카드가 있습니다 카드 설정을 보거나 카드에 조치를 취하려면, 하단의 작업 버튼과 함께 실제로 각 카드 옆에이 오버 플로우가 표시됩니다 그리고 마지막으로 우리는 이런 종류의 독특한 작업을 수행했습니다

인근 노선 제시 이 앱이 상단에 대한 정보를 가지고 있다고 가정 해 봅시다 당신 근처에 3 ~ 4 개의 루트가 있습니다 별표를 쓰거나 즐겨 찾지 않았습니다 이것은 내용을 버블 링하는 방법입니다

그것은 끊임없는 발견 메커니즘입니다 그러면 왼쪽과 오른쪽 사이를 스 와이프 할 수 있습니다 몇 가지 데이터를 보여주는 다른 주변 경로 얼마나 오래되었는지, 어떤 비율의 사용자를 좋아하는지, 그 때 가장 좋은 시간은 무엇입니까? 이것은 앱에서 이미 액세스 할 수있는 모든 데이터입니다 내가 아는 한 그래서 이것은 10 인치의 풍경입니다

사실, 내가 놓친 것이 하나있다 여기 왼쪽에는이 종류의 요약이 있습니다 정보, 이번 달처럼, 이것들은 활동들입니다 너는 해냈어 너는 얼마나 많은 칼로리를 태웠다

당신이 운동하는 데 얼마나 많은 시간을 소비했는지 니가 추가하고 싶었던 다른 것, 닉? NICK BUTCHER : 대담하고 가벼운 논란의 여지가있는 사용 그 사랑이나 싫어하는 조금의 패턴 새로운 42 잠금 화면 ROMAN NURIK : 사실, 응축 된 여기 응축 된 그리고 빛, 나는 믿는다 대담하고 가벼우 며 응축 된 버전의 Roboto가 있습니다

그래서이 모든 것들에 걸쳐 타이포그래피가 많이 있습니다 [? 머그잔 ?] NICK BUTCHER : 나의 일반적인 느낌은 사랑해 마찬가지로, 나는 세 가지 주요 섹션을 정말 좋아한다 그걸로 부서졌습니다

따라서 10 인치 UI가있는 경우 공간이있는 10 인치 태블릿 이걸 보여주기에 충분합니다 그래서 당신은 무슨 일이 일어나고 있는지 즉시 볼 수 있습니다 내가 관심이있는이 세 가지 주요 주제 처음부터 살펴 보았습니다 나는 이들 중 일부를 활용할 수 있기를 바랍니다 왼쪽의 통계를 볼 수 있습니다

웹 사이트에서 사용할 수있는 그래프는 장치에서도 사용할 수 있습니다 멋질 것입니다 하지만 네가 너를 버블 링하는 멋진 일을했다고 생각해 내가 정말로 신경 쓰는 것 ROMAN NURIK :이 점에 유의해야합니다

대시 보드는 매우 대화 형입니다 콘텐츠 지향적이며 콘텐츠는 조작 가능합니다 그래서 스노우 보드를 만져보고 싶으면 이 달 동안 당신의 스노 보드를위한 다른 통계, 당신은 그것을 할 수 있습니다 당신은 그걸 만질 수 있어야합니다 내가 언급 할 다른 것은이 앱이 이 세 부분 만

제가 여기서 한 것은 액션 바를 제안했습니다 회 전자는 앱의 다른 부분을 보여줍니다 예를 들어, 다른 섹션으로 건너 뛰고 싶다면 – 액션에 있어야하기 때문에 설정이 아닙니다 오버플로 -하지만 어쩌면 나도 몰라, 네가 실제로 태블릿에서 데이터 캡처를 시작하고 싶습니다 당신이 스피너에서 할 수 있어야하는 것

NICK BUTCHER : 그래, 내 생각에 스트레스가, 우리가 지금까지했던 것과 똑같은 전화로 봤어 나는 완전히 다른 것을 가지고 있어도 괜찮다고 생각한다 대시 보드, 완전히 다른 홈 화면, 언제 당신은 완전히 다른 맥락에서 달리고 있습니다 그것은 우리가 제시 할 정보와 동일합니다 응용 프로그램

그것은 완전히 다른 시각 치료 또는 우선 순위 ROMAN NURIK : 그래서 시간의 이익을 위해 건너 뛰자 이 몇 가지 다른 화면을 통해 그래서 이것은 기본적으로 초상화입니다 우리가 한 일은 우리가 실제로 생각한 것입니다 이 화면은 여러 방향으로 표시됩니다

여러 크기의 경우? 단지 10 인치 풍경이 아닙니다 밖에 태블릿 세계 세로 장치가 있고 7 인치 장치가 있습니다 그들은 아마도 크기와 화면 해상도가 다를 것입니다 그래서 이것은 10 인치 초상화의 예일뿐입니다

목업은 같이 보일 수 있습니다 우리가 기본적으로 한 것은 선형 접근법을 취했습니다 이 콘텐츠를 레이아웃하는 것 따라서 계층 구조는 여전히 유지됩니다 맨 위에있는 항목이 가장 많습니다

중요한 것, 당신의 달력 두 번째 항목 인 화면의 두 번째 행은 다음과 같습니다 수평으로 pannable 사회 피드 그리고 여기에 프리젠 테이션이 있습니다 정말 세련된

확실히 여기서해야 할 일이 많이 있지만, 당신이 이것에 대해 생각하기 시작할 수있는 한 가지 방법 일뿐입니다 그런 다음 주변 경로 섹션이 바닥이 아직있다 그래서 같은 종류의 공간을 차지합니다 일반적으로 그러나 다시 말하지만,이 섹션들은 모두 매우 유연합니다

사실, 그 얘기 좀 해봅시다 7 인치 레이아웃을 살펴 보겠습니다 그리고이 부분에서 나는 그 맨 위에있는 섹션, 그 달력은 유연합니다 잠재적으로 다른 일 행을 하단 또는 상단 이 경우 2 월에 다른 행이 표시됩니다

그리고 나서 위아래로 스크롤하여 변경할 수 있어야합니다 당월 그런 다음 왼쪽에서 오른쪽으로 콘텐츠를 재정렬 할 수 있습니다 하단,이 요약 섹션 스크린의 가장 중요한 부분은, 7 인치 UI에서 모든 기능을 갖춘 것은 아닙니다 10 인치 UI에서와 마찬가지로 그래서 당신이 할 수있는 것들 중 하나 대시 보드 유형 화면은 탭으로 전환하는 것입니다

그리고 그들은 수평으로 스 와이프 할 수 있어야합니다 그래서 실제 수평 적 상호 작용이 없기 때문에, 허용하는 것이 아주 간단해야합니다 전체 화면 내용을 스 와이프하여 운동, 뉴스 피드 및 경로 그리고 그것들은 모두 수직으로 배치되어야합니다 NICK BUTCHER : 나는 그저 전화를 걸고 싶다

이 여백 지점을 사용하려면 절대적으로 괜찮습니다 네가 7 인치에서 한 것처럼 정말 좋아 풍경, 예를 들면 어떤 사람들은 당신이 모든 인치를 절대적으로 채워야 만하는 것처럼 느낍니다 화면 공간

그리고 그것은 사실이 아닙니다 내 말은, 네가이 달력을 그렇게 늘릴 수 없다면 훨씬 더 넓어 – 잘못 생각하기 시작할 것입니다 종횡비 그것은 꼴 사나게 느낄 것입니다

여기에 여백 포인트를 도입하는 것은 절대적으로 좋습니다 그리고 호흡하기에 충분한 공간을 제공하십시오 ROMAN NURIK : 맞아 그리고 확실히 조금 더 편안하고, 많은 태블릿 UI에서 추가로 사용할 수 있습니다

양쪽에 호흡 방 나는 누가 이것을 언급했는지 잊었다 이에 대해 언급 한 위대한 소식이있었습니다 특히 타이포그래피를 둘러싼 것입니다 특히 타입을 배치 할 때, 그것은 단지 측정 값, 라인 당 단어의 양 또는 귀하의 줄당 문자 수를 늘리지 만 실제로는 네가 많이 가지고있을 때 멋지고 관대 한 패딩을 가진 눈 무거운 내용, 특히 텍스트

너무 많은 공간을 두려워하지 마십시오 너무 적은 공간에 대해 더 걱정하십시오 너무 적은 공간이 더 위험하다고 생각합니다 ADAM KOCH : 네, 그리고 또한 공간이 화면에 있습니다 너는 바깥 가장자리에 물건을 갖고 싶지 않아

화면, 일부 목록보기처럼 자동으로 전화 UI에서 스트레치 아웃 네, 당신은 분명히 훌륭한 배포판 화면에서 뒤로 물러서서 볼 수 있습니다 콘텐츠의 멋진 모자이크 – 왼쪽 가장자리에 던져지는 물건 뿐만이 아닙니다 NICK BUTCHER : 네

콘텐츠의 무게가 있습니다 그래서 나는 그게 – 오, 신경 쓰지 마라, 우리는 닉으로부터 잠금 장치 화면을 가지고있다

닉, 너 얘기하고 싶어? 자물쇠 화면 모형? NICK BUTCHER : 네, 제 번호 요청입니다 Endomondo 얘들 아, 이걸 만들어라 나는이 응용 프로그램을 사랑하지만,이 필요합니다 잠금 화면 위젯이 마침내 여기에 있습니다 그것을위한 완벽한 사용 사례입니다

그래서 우리는 그저 볼 수있는 것을 조롱했습니다 그래서 나는 여기에있다 도망 가고, 바로 거기, 내 땀 투성이의 손, 나는 단지 장치를 잠금 해제 할 필요가 없다 내가 얼마나 빨리 가는지, 얼마나 멀리 갔는지 여행을하거나 행동을 취할 수 있습니다 그래서 저는 여기서 조롱했습니다

접힌 상태 일 때 주요 정보 잠금 화면 위젯의보기 그것은 나의 거리, 페이스, 그리고 총 시간을 말하고 있습니다 그런 다음 자물쇠를 펼치려면 아래로 스 와이프해야합니다 화면 위젯을 사용하면 다음보기를 얻을 수 있습니다 [알아들을 수 없는] 행동을 취하십시오

따라서 이미 중지했다면 일시 중지, 중지 또는 재개 할 수 있습니다 운동을 여기서 일시 중지했습니다 그래서 당신은 너 숨을 쉬고있어, 너는 빨리 그걸 막으려 고하고있어 당신이 당신의 PV 또는 무엇이든을 놓치지 않도록 시간 그래서 이것이 정말 재미있는 사용 사례라고 생각합니다 잠금 화면 위젯 용 지적하고 싶은 것은, 네가 한 일이 정말 마음에 든다

여기 니크, 흰색을 사용 했어 여기서 모든 것이 흰색이거나 흰색 음영 또는 흰색 투명 음 완전히 투명하다 우리가이 일을 할 수있는 이유는 화면 잠금, 항상 배경을 어둡게합니다 따라서 배경이 순수한 흰색이라해도 디밍은 실제로 흰 텍스트 나 도형을 화면을 여전히 아주 잘 읽을 수 있습니다 그래서 당신은 확실히 싱글을 사용할 기회가 있습니다

컬러, 흑백 아이콘 및 UI 요소를이 화면에 표시합니다 그리고 Play를 사용하면서 한 일이 정말 마음에 듭니다 앱에서 버튼을 중지합니다 앱을 보면, 그들은 실제로 녹색이며 양식화되었습니다 그리고 그것을 취하여 그것을 잠금 화면에 적용하십시오

보이는 것처럼 보이는데 실제로는 흰색이 투명합니다 NICK BUTCHER : 예, 당신처럼 디자이너로서 무서울 수 있습니다 이것들에 대한 어떤 통제도하지 마라 분명히 벽지가 있습니다 그래서 당신은 배경을 모른다

그래, 맞아, 나는 미치광이가되고 싶지 않았다 색상 충돌 – 녹색 버튼이있는 경우, 그것은 실제로 작동하지 않을 것입니다 그래서 나는 정말로 깨끗한 흰색을 찾으러 갔다 내 생각에 너의 위에 45 % 불투명 한 검은 색이 있다고 생각해 벽지,이 효과를 얻으려면 희미 해지기

ROMAN NURIK : 굉장해 좋아요 마지막 화면은 다음과 같을 것입니다 당신은 실제로 일시 중지 상태 또는 일시 중지 상태 일 것입니다 [알아들을 수 없는]

아, 재개 국가 예 따라서 일시 중지 할 수있는 옵션이 제공됩니다 좋아요 그래서 그걸로 들어가 봅시다 우리는 약 7 분 남았습니다

불행히도, 잘, 아마 다행히도 또는 불행히도, 우리는 실제로 디자인이 많지 않거나 0이 아닙니다 오늘 뉴스 그래서 우리는 단지 UI 패턴에 대해서 이야기 할 것입니다 디자인 가이드에서 보았던 것뿐입니다 그래서 우리는 액션 바 (Action bars)에 대해 이야기 해 왔고 반응 형 디자인, 타이포 그라피 사용하기

그래서 너희들은 아마 이것들에 꽤 잘 노출되었을거야 UI 패턴 유형, 특히 수평 스 와이프, 스 와이프하여 기각합니다 우리는 몇 주 전에 그 모형을 만들었습니다 UI 패턴이 포함되었습니다 그래서 덜 일반적으로 알려진 패턴 중 일부를 살펴 보겠습니다

그리고 이것이 반드시 공식적인 패턴은 아닙니다 그들은 단지 커뮤니티 패턴입니다 커뮤니티가 사용하고 있으며 현대 UI가 그것이 의미가 있다면 확실히 활용하십시오 NICK BUTCHER : 그리고 지역 사회에 따라, 우리는 엄청나게 생산적 인 누릭 (Nurik) 씨가 이들 대부분을 만들었습니다 너는 매우 겸손하지만, 고마워, 로마

아담 코치 : 독신자 공동체 ROMAN NURIK : 이것들 뒤에 숨겨진 코드, 방법을 보여줄 수있는 코드 스 니펫을 작성했습니다 이것을 구현하지만, 실제로 안드로이드 애플 리케이션의 디자인 사례, 처음부터 파티 앱, 시스템 앱, 커뮤니티에서 가져올 수 있습니다 그러나 예, 우리는 이들 모두에 대한 코드 샘플을 가지고 있습니다 따라서 실제로 어떻게해야하는지에 대해 질문이있는 경우 이것을 구현 한 다음 쇼 후에 알려주십시오

먼저, 끝내고 버리는 것에 대해 이야기 해 봅시다 우리는 과거에 이것을 특색으로 삼았습니다 기본적으로 액션 바를 완전히 제거하고 그것을 매우 비슷하게 보이는 것으로 대체합니다 폐기 표시 줄 그래서 정말 간단한 화면에서 간단한 정보를 작성하거나 연락처에 대한 일부 변경 사항 (예 : 저장, 취소, 위로, 뒤로

그러나 대안 중 하나는 실제로 이것을 보여주기위한 것입니다 매우 간단하고 직선적 인 상태입니다 Done and Discard, Done and 상단의 바를 취소하십시오 나는 이것에 대해 다른 의견이 있으십니까? 우리는 과거에 그것에 관해 이야기했습니다 NICK BUTCHER : 예, 우리는 그것에 대해 이야기했습니다

나는 그것이 몹시 좋아한다 무슨 일이 일어날 지 액션 바가 제공하는 것은 사실이지만 이 시각적 치료는 일어날 것이다 ROMAN NURIK : 그래, 그리고 Done 버튼이 왼쪽 상단에 표시되고 삭제됩니다 액션 오버플로와 같은 것입니다

그리고 그것은 당신이 다른 행동을 취한다면 더 유용합니다 그냥 완료 외에도 표시하고 싶습니다 취소하거나 완료하고 취소하십시오 또는 정말로 기대하지 않거나하지 않는 경우 사람들이 취소하기를 원한다 연락처를 저장하는 경우와 마찬가지로 변화를 만들 것입니다

NICK BUTCHER : 예, 좋은 지적입니다 예를 들어,이 시스템에서 사람들을 보아라 [? 찾고 있습니까?] 편집 또는 연락처 만들기, 그리고 나는 생각을 만들 수도 있습니다 캘린더 일정, 맞죠? 그리고 그들은 당신에게 이것을 보여줄 것입니다 ADAM KOCH : 그래, 나는 그 다른 형식의 종류는 더 명확하게, 말하자면, 뒤로 버튼이 할 수 있습니다

이 경우 내용을 분명히 저장합니다 ROMAN NURIK : OK, Done and Discard, 이렇게 권장합니다 다시 한번, 간단한 편집 양식 – 화면을 정말로 편집하고있는 화면 콘텐츠가 아니라 몹시 복잡한 콘텐츠입니다 핀과 진행 그리고 이것은 제가 아주 간략하게 다루는 것입니다

사용 빈도가 적기 때문입니다 이상적으로 모든 것을 기기에 저장합니다 모든 것을 캐시하고 기회 주의적으로 캐시합니다 하지만 영화 나 대용량 파일이있는 경우 캐싱 또는 저장 작업이 장치가 꽤 무거운 무게, 당신은 사용자에게 줄 수 있습니다 클라우드에서 콘텐츠를 저장하거나 고정하는 명시적인 방법 귀하의 장치에 그리고 이것은 기본적으로 약간의 UI 요소입니다

핀 단추, 일종의 체크 상자와 같습니다 확인한 다음 고정해야합니다 그런 다음 백그라운드에서 피닝 진행 300 메가 다운로드와 같은 앱이라면 200 메가를 다운로드 한 다음이 원형 차트는 어딘가에 있어야합니다 가득 찬 길의 약 2/3

아주 간단한 UI 위젯을 사용할 수 있습니다 매우 무거운 것을 다루는 경우 앱 전반에 걸쳐 클라우드에서 끌어온 콘텐츠 NICK BUTCHER : 정말이 요소가 마음에 들었습니다 어떤 사람들은 정말 명백한 경로를 따라 내려갑니다 오프라인 모드에서 나는 온라인 모드에있다 스트리밍 또는 핀으로 연결 하시겠습니까? 그리고 그것이 잘못된 길이라고 생각합니다

난 당신이 정말로 하나의 UI를 가지고 있어야한다고 생각하고 그냥 힌트 오프라인으로 사용할 수 있는지 여부를 사용자에게 알려줍니다 Play 스토어에서 얻은 단서를 따라 가면서, 대부분의 기기에서 제공되는 음악 앱 [? 보기?] 그것을 대표하는 좋은 방법이 될 것입니다 좋아요 그래서 약 2 분 남았습니다 다른 이들 중 일부를 통해 비행합시다

아무도 얘기를하고 싶지 않은가? 막대 또는 인라인 취소? 누가 그것을하지 않았습니까? 아담 ADAM KOCH : Nick이 좋아하는 것, 특히 인라인 하나 NICK BUTCHER : 멋진 섹션이 있습니다 확인을 촉구하는 지침과 언제 제안을 취소 할 것인가 그래서 저는 그 흐름도를 통해 작업 하겠지만, 본질은 다음과 같습니다

모든 것에 대한 확인을 촉구하는 것은 도로 블록 같은 종류 당신은 정말로 많은 행동을 매우 빠르게 수행 할 수 없습니다 그래서 우선적으로, 당신이 회복 할 수있는 방법이 있다면, 이런 종류의 실행 취소 동작을 제공합니다 그래, 그 이름에서 알 수 있듯이, 이것은 복구 할 수있는 방법을 제공합니다 방금 한 작업에서 보관 및 이메일

이 기능을 사용하여 실행 취소하면 다시 복원하여받은 편지함으로 복원 할 수 있습니다 그리고 아담이 말했듯이,이 작품은 정말로, 정말로 잘 느낍니다 Swipe to Dismiss 패턴과 함께, 언제, 언제 목록에서 항목을 스 와이프하여 바꿉니다 당신이 그것을 다시 가져올 수있는 인라인 취소 버튼이 있습니다 옆에서

나는 그것이 정말로 멋지게 작동한다고 생각한다 에 대한 최신 버전의 Gmail 앱을 안드로이드 42 예를 들어 ADAM KOCH : 그래, 누군가가 실제로 이것들, 당신은 안도의 한숨을 쉬게합니다 마찬가지로, 나는 뭔가를 삭제했다, 나는 그것이 어디로 갔는지 모른다

그런 다음 Undo를 입력하면 신속하게 다시 가져올 수 있습니다 경험 OK, 다음 패턴으로가 봅시다 그리고 이것은 하나의 패턴입니다 아마도 우리는 – 닉과 나 자신 -이 빠른 리턴이라고 불렀습니다

그것에 대한 실제적이고 공식적인 이름은 없습니다 그러나 그 생각은 – Google Now입니다 Google Now의 스크린 샷입니다 이것은 당신이 뭔가를 갖고 싶다는 생각입니다 영구, 항상 사용할 수 있습니다

Google Now 검색 창과 같습니다 그러나 당신은 반드시 그 중 일부를 차지하고 싶지는 않습니다 귀중한 수직 부동산 그래서 당신이 할 수있는 것은, 막대는 스크롤을 시작하면 화면이 나타납니다

그러나 사용자가 스크롤을 시작하면 약간, 그 막대기, 당신이 스크롤 영역에있을 수있는 곳마다, 그 막대기가 천천히 뒤로 젖혀지기 시작합니다 그리고 나서, 당신이 좀 더 스크롤을 시작하면, 바 완전히 보입니다 그리고 거의 떠 다니는 느낌을줍니다 나머지 콘텐츠 위, 그림자 사용 여부 또는 무엇이든 그것은 실제적으로 최상위에 실제로 고정되어 있습니다

항상 화면에 표시됩니다 따라서 쉽게 사용할 수 있지만 항상 표시되는 것은 아닙니다 거기에 좋은 이원성이 있습니다 다른 UI 패턴으로 넘어 갑시다 토큰 화 된 텍스트 필드입니다

그리고 우리는 조금 시간이 조금 지나고 있다는 것을 알기 때문에 우리는 이것을 통해 날아 가야 해 아이디어는 이메일을 타이핑하기보다는 주소와 많은 자유 형식 텍스트 다루기 그것에 대해 똑똑하다 그리고 당신이 부유 한 내용의 조각 인 무언가를 보는 경우에, 실제로 어떤 객체로 해석하는 것처럼 사용자가 텍스트 필드와 상호 작용할 수 있도록 텍스트 필드 텍스트의 성격뿐만 아니라 실제 물건 Nick Butcher : 나는 가야 해 얘들 아

쫓겨났다 쫓겨나고있어? 알았어 너를 보게, 닉 나는 그것이 마지막이었다고 생각한다 – 오오 아니오, 우리는 하나 더 가지고있다 마지막 것은 베젤 슬쩍입니다

이것은 Nick이 가장 좋아하는 UI 패턴입니다 기본적으로 수평 스크롤 가능 또는 화면의 핵심 레이아웃에있는 대화 형 컨텐츠, 당신은 분명히 그것들을 탭 또는 측면과 같은 것들을 노출 [? 항아리?] 또는 항법 [? 항아리?] 그래서 여기에있는 아이디어는 가장 왼쪽의 베젤을 사용하는 것입니다 가장 오른쪽 약 16 dps의 화면이 표시됩니다 거기서부터 슬쩍 시작하세요

베젤 슬쩍으로 처리됩니다 따라서 가장자리에서 콘텐츠를 끌어 오는 것과 거의 비슷합니다 Chrome이하는 일이 바로 Chrome입니다 ADAM KOCH : 좋은 예입니다 예

ROMAN NURIK : 사실, 이것은 새로운 것입니다 잠금 화면은 내가 아는 한도 마찬가지입니다 그래, 그래서 이것은 항상 훌륭한 또 다른 패턴이다 스 와이프를 사용하여 가로 콘텐츠에 액세스 할 수있게 만들었지 만 또한 수평을 가지고있다 상호 작용 나는 그것이 마지막 것 같아요

그래서 우리는 시간이 지남에 있습니다 하지만 우리와 함께 해 주셔서 다시 한번 감사드립니다 Android 디자인 실천 늘 그렇듯이 나는 로마인이다 ADAM KOCH : 아담 코흐 (Adam Koch), 닉 부처 (Nick Butcher) 런던에서 우리를 방금 떠났습니다

네, 그래서 다음 주엔 안 볼거야하지만 아마 몇 주 후에 그래서 너희들을 만나고, 큰 휴식을 취하십시오 [음악 재생]