Principles of mobile app design: Delight users and drive conversions – Google I/O 2016

JENNIFER GOVE : 안녕하세요 어떻게 모든이다? 관객 : 좋습니다

제니퍼 GOVE : 좋아 그런 멋진 군중 오늘 내 이야기에 모두와 주셔서 감사합니다 제 이름은 Jenny Gove이고 저는 User Experience Researcher입니다 여기 Google에서

나는 지금 Google에 10 년 동안 이달에 있었는데, 그게 우연이라고 들었는데 [클리핑] 고맙습니다 나는 그것이 우리가 몇 년의 시간과 일치한다고 들었다 I / O 컨퍼런스 개최 그래서 두 주년, 정말 재미 있습니다 그래서 오늘 오후에 우리는 이야기 할 것입니다

훌륭한 앱 개발 및 원칙 수립에 대해 귀하와 공유하고 싶은 모바일 앱 디자인, 그래서 당신은 당신의 사용자에게 훌륭한 경험을 할 수 있습니다 그리고 왜 이것이 중요한가? 글쎄, 중요한 이유는 죄송합니다 각 앱에는 150 만 개가 넘는 앱이 있습니다 우리가 알고있는 상점 거기에는 많은 경쟁이 있습니다

앱이 유용성 결함으로 고통 받기를 원하지는 않습니다 나는 유용성 결함과 사용자 경험 문제를 생각한다 일부 앱의 참여가 부족할 수 있습니다 예를 들어 25 %의 앱과 같은 것을 배웠습니다 때로는 두 번 이상 사용되지 않고 34 %의 앱 11 번 이상 열리지 않습니다

따라서 주변에 이러한 통계가 있습니다 앱 참여 및 재 참여와 관련하여 우리는 그 문제 자체에 대해 많은 연구를하고 있습니다 구글에서 우리가 가지고있는 특정 제품들 그러나 나는 그것이 정말로 우리에게 일하고 있다고 생각한다 우리의 사용자 경험과 우리의 애플 리케이션에서 사용성 문제

그래서 저는 여러분에게 세 가지에 대해 이야기 할 것입니다 남은 얘기들 나는 너에게 경험에 관한 이야기를 할 것이다 최근에 앱을 가지고 있었다 나는 너에게 한 연구에 대해 말할거야

정말 멋진 앱을 만드는 방법을 이해하기 위해 도망 쳤습니다 경험 그리고 저는 몇 가지 원칙을 다룰 것입니다 우리가 온라인으로 발행 한 내용으로 이해할 수 있습니다 앱을 만들기 위해 할 수있는 핵심 사항 더 나은 경험

그리고 그 원칙들 내에서, 나는 너를 위해 많은 자원이있어 뿐만 아니라 그 길을 따라 도울 수 있습니다 그래서 내 이야기 가족과 휴가를 보내고있는 동안 여기에 우리는 플로리다에서 멋진 시간을 보내고 있습니다 저와 저의 파트너이자 아이들입니다

그리고 우리가 휴가를 가기 전에 우리가 머물기 위해 일련의 호텔을 세웠다 그것은 스스로 운전하는 여행이었고 나는 이것들을 미리 예약했다 – 나는 그것을했다 내 노트북에 플로리다에 도착했을 때 많은 호텔이 발견되었습니다 새로운 기술 – 앱을 최대한 활용하기 시작했습니다

구체적으로 – 나에게주기 위해서 나의 여행 중에 정말로 매끄러운 약간의 경험 그들은 내가 체크인 할 수 있도록하는 일을 지금하고 있습니다 내가 도착하기 전에 – 비행기를 타듯이 – 그리고 내가 열 수 있도록 내 방으로 곧장 갈 수있게 해줘 문, 응용 프로그램과 함께

꽤 멋지다 나는이 새로운 것들로 꽤 날아 갔다 그들이 할 수 있었던 일 하지만 내가 휴가를 갔을 때 무슨 일이 있었는지, 체크인 통보가 왔어 내가 뭔가에 일렬로 서있는 동안 이렇게, 테마 파크의 롤러 코스터

그것은 나에게 물었다, 내가 체크인하고 싶어 했느냐? 그리고 나도 나에게 물었다, 나는 자기 자신의 방을 선택하고 싶어했다 또는 나는 그들이 나를 위해 선택할 수있게 했습니까? 음, 내가 예약했을 때 나는 기억한다 텍스트 필드가 있었는데, 나에게 물어 봤어 내가 요청을 받았 더라면 나는 바다가 보였습니다 왜냐하면 저는 다음 호텔에이 아름답고 깨끗한 해변이 있음을 알았습니다

나는 발코니가있는 방을 주문했다 저는이 멋진 경험을 정말로 원했고, 바다를 내려다 보면서 하지만 노트북에서의 경험이 이 앱의 경험으로 바꿀 것입니다 나는 지금 직면했다 나는 그것에 대해 약간 염려했다

그리고 나는 더 나은 기회를 가질 수있을 것이라고 생각했다 내 방을 선택하는 것보다는 그들은 나를 위해 선택합니다 항상 당신 손에 맡기는 것이 더 낫지 요? 그래서 나는 내 방을 선택하기로 결정했다 그들이 나에게 준 것은 휴대 기기에서 꽤 좋았습니다 실제로 효과가있었습니다

나는 그것이보기에 상당히 도전적 일 것 인 것처럼 보인다라는 것을 알고있다 부동산의, 그러나 그것은 아주 잘 작동했다 그들은 분명히 다른 방을 배치했다 그들은 방의 출입 여부를 명확하게 표시했다 하지만 단 한 가지 문제가있었습니다

그리고 그것은 호텔이 어떤 방향으로 향하고 있는지 전혀 몰랐습니다 바다 앞 그래서, 나는 줄을 서 있었고, 알아 내려고 노력했다 어떻게 해결할 수 있을까? 이제 실제로는하지 않은 몇 가지 해결 방법이 있습니다 그 때를 생각해보십시오

Google지도, 어쩌면 Google 이미지를 파악하거나 볼 수도 있습니다 이 경우 호텔은 다소 대칭입니다 그래서, 그것은 매우 까다로울 것입니다 나는 일종의 엄지 손가락 규칙을 사용하기로 결정했다 그리고 내가 생각하기에, 가장 많이 찍은 방을 가진 쪽 아마 바다를 마주하고 있었던 쪽이었다

그래서, 여기 730 방을 선택하기로 결정했습니다 그래서 우리는 호텔에 도착해서 모든 가방을 가져 갔고 너 무슨 일이 일어날 지 알지? 나는 이것 같이 조금 보인 전망을 얻었다 [웃음] 큰 실망 그럼 내가 뭘해야 해? 그런데 나는 다시 모든 길을 가야했다, 다시, 리셉션에 – 나는 내가 생각했다 우회로, 응용 프로그램을 사용하여 – 접수와 이야기

그들은 매우 도움이되었고, lovely 한 호텔이었고, 그것을 고쳤다 나를 위해, 그리고 결국, 우리는 위로 올라 갔다, 다른 마루, 호텔에 들어갔다 나는 전망을 얻었다 그것은 훨씬 더 같았습니다 아름답군, 응? 이것은 실제로 플로리다입니다

바하마처럼 보입니다 정말로, 정말로 멋졌다 그래서 인 – 게스트 서비스는 인간의 개입이 요구되었다 앱이 실제로 제공되지 않았기 때문에 내가 바라는 서비스 너무 잘 했어, 나는 정말로 내가 사용할 수있는이 새로운 기술로 찍은, 그러나 그것이 배달되지 않았기 때문에 그것은 짧아졌다

이 중요한 정보는 나를위한 것입니다 나는지도상의 정보가 필요했다 이 경우에는 바다의 전망이 필요했습니다 약간의 파도 방금 오리엔테이션이 필요했습니다

그래서 나를 위해, 그것은 매우 비판적이었다 이 아름다운 해변에 대한 내 견해, 이 주차장보다 그리고 그것은 훨씬 더 비판적이었을 수도 있습니다 내 휴가에 아주 친애하는 것보다 그것은 클라이언트를위한 이벤트 매니저 예약 일 수 있었지만, 아마 그것은 손님들을 위해 예약 된 사람들이었을 것입니다

결혼식이나 무언가를 위해서 한 가지 교훈은 분명합니다 우리는 개발자와 디자이너로서 전체 흐름을 이해할 필요가있다 우리 사용자가 겪고있는 그리고 그 부분은 부서집니다 이것은 정말로 시원하고 신기술이었습니다

그러나 나는 모든 것을 통해 백 트랙을 정렬해야했다 그 앱이 살 일걸요 날 구해줘 그래서 그 경험을 정말로 이해합니다 처음부터 끝까지

그리고 저는 모바일에서 생각한 것은 그 작은 것들입니다 우리는 우리가해야 할 것을 깨닫지 못한다 그래서 우리가 정말로 이해해야하는 이유입니다 사용자의 관점과 사용자의 경험 그래서, 제 이야기는 그런 것들에 관한 것입니다

그리고 우리가 그들을 어떻게 고칠 수 있는지 내가 너에게 약간의 역사를 알려줄 께 2 년 전, 우리는 많은 경험 특히 모바일 웹의 경우 문제가 많았습니다 사람들을 위해 그래서 우리는 대규모 연구를 수행했습니다

어떤 일이 일어나지 않았는지 이해하려고했습니다 모바일 웹 용으로 올바르게 구현, 우리가 더 잘할 수있는 곳, 우리는 모바일 웹을위한 25 가지 원칙을 발표했다 그것들은 정말로 잘 해냈습니다 사람들은 그것을 일종의 초기 단계로 사용했습니다 더 나은 사용자를 제공하기위한 좋은 방법 모바일 웹에서의 경험

하지만 그뿐 아니라 우리는 사람들이 우리에게 돌아와서 말했습니다 이것은 모바일 웹에 적합하지만 내 앱입니다 내 앱은 어떨까요? 내 앱에 대해 말해 줄 수 있습니까? 그래서 나는 다른 연구를하라는 부름을 많이 받았다 그리고 애플 리케이션에 대한 연구, 그래서 우리가 한 일 이죠 최근에는 연구에서 기본 앱을 살펴 보았습니다

오늘 내가 너에게 선물 할 원리들 그 일의 결과입니다 이 연구에서 우리는 특허를 이해할 수있었습니다 운 좋게 사용자 경험을하게하고, 운 좋게 행복하게 우리는 일부 회사가 더 나은 방법으로 구현 된 것들, 그 특허가 왜 더 잘 작동하는지 이해하십시오 그것들을 당신에게 가져 오십시오

그리고 이것을 잘 이해하는 것이 우리에게 중요합니다 그래서 우리는 원칙에 확신을 가질 수 있습니다 우리가 말하고있는 것, 그리고 너 자신의 제품에이를 구현하는 데 자신감을 가질 수 있습니다 그래서이 연구를하기 위해 우리는 회사와 파트너 관계를 맺었습니다 AnswerLab이라고합니다

그들은 사용자 경험 컨설팅 기반 샌프란시스코 그리고 우리는 그들과 협력하기 때문에 우리가 연구를 원했기 때문에 규모를 조정할 수있었습니다 꽤 큰 규모입니다 모바일에서 100 가지 앱에 대한 상호 작용을 연구했습니다 그래서 이들은 대형 소매점, 소규모 서비스 제공 업체를 통해 우리는 뉴스 앱을 보았고, 우리는 많은 다른 종류를 보았다

식료품 점과 같은 서비스, 여행 서비스, 소매업, 중소기업 우리는이 일환으로 게임을 보지 않았습니다 그것은 의도적으로 이루어졌습니다 왜냐하면 우리는 그것이 약화 될 것이라고 느꼈기 때문에, 또는 희석, 원리 우리는 게임이 아마도 완전히 다른 세트를 가지고 있다고 생각합니다 그걸 제외하고, 우리는 다양한 수직 계열을 조사했습니다

그리고 우리는 샌프란시스코, 시카고, 뉴욕시 이제이 연구에 참여한 103 명의 참가자가있었습니다 그래서 사용성 연구를 위해, 그것은 정말로 크다 그들은 개별적으로 실험실에 들어 왔고, 각각 90 분 동안 따라서 155 시간의 사용성 연구가 가능합니다

그래서, 만약 당신이 밤새도록 그리고 하루 종일 밤새 위로 머물렀다면, 그것은 거의 일주일이 될 것이고, 휴식을 취하지 않을 것이며, 실제로는, 그것은 일주일에 거의 4 주 정도가되었습니다 그래서, 실제로 큰 연구가 있습니다 그래서 우리는이 다른 수직을 커버 할 수있었습니다 그리고이 연구에서 우리는 무엇을 했습니까? 음, 사람들이 연구에 들어갔다 90 분 동안 그들은 정말 6 개의 앱을 사용할 수 있습니다

그것들 각각에 대해 좋은 일을하고 있습니다 그들은 그들과 함께 자신의 휴대폰을 가져 왔고, 그 이유는 우리가 그들을 원했기 때문입니다 전화에 정말 익숙합니다 그리고 우리는 어떤 문제도 원하지 않았습니다 다른 기기이거나 그렇지 않았습니다

뒤로 버튼 또는 그와 비슷한 것에 익숙합니다 그래서 Android는 약 50 %, iOS는 약 50 %를 차지했습니다 그리고 연구에 참여했을 때 우리는 무엇을 했습니까? 그래서, 우리는 다른 작업을하고 다른 시나리오를 설정했습니다 그들을 위해 우리는 그 일을 무언가로 만들기 위해 최선을 다했습니다

그들에게도, 그들이 할 수 없도록, 우리가 부르는 것을, 만족스러운 일을하는 것입니다 가능한 한 빨리 작업을 수행 할 수 있습니다 그들이 할 수있는 한 우리는 그들이 그 일에 관심을 갖길 원했습니다 그래서 우리는 그들이 관심을 갖는 것에 관해 종종 그들과 이야기했습니다

이 예에서 우리는 그들과 대화 할 수 있습니다 좋아하는 음식에 대해 이해하고 이해합니다 먼저 그들로부터 무엇인가, 그 전에 그들이 그것을 주문할 수 있는지를 물어보기 그날 저녁 저녁 그리고 우리는 그들이 큰소리로 말하게했습니다, 사용성 용어로 불리는 것이 무엇인지, 생각대로하는 프로토콜을 사용했고, 우리는 그렇게했습니다 그래서 우리는 그들이 고통의 포인트를 이해할 수 있었다

그들이 다른 업무를 수행 할 때 맞았다 그들이하고있는 일을 어디에서 물건이 원활하게 흘러 갔는지 이해하십시오 그렇게 해본 결과 우리는 데이터를 취했습니다 – 많은 데이터가있었습니다, 당신이 상상할 수 있듯이, 그 많은 유용성 자료 – 우리는 그것을 25 가지 원칙으로 정리했습니다 그래서 이것은 당신이 취할 수 있고 이해할 수있는 것입니다 자신의 앱에 적용 할 수 있습니다

우리는이 원칙들을 6 개의 챕터로 분류했습니다 하지만 내가 그들에게 들어가기 전에, 나는 우리가 실제로이 25 가지를 어떻게 얻었는지 설명합니다 그래서 그것을 25 가지 원칙으로 만들기 위해, 우리는 이것이 넓은 범위의 문제라는 것을 알아야했습니다 우리는 그것을 알아야만했다 상당히 일반적인 문제였습니다

우리는 25 가지 이상의 것들을 만났습니다 앱에서 문제가 있었지만 우리가 가장 큰 문제를 치고 있는지 확인하기 위해, 우리가 더 나은 방법을 구현 될 수있다 승인 그래서, 우리가 가지고있는 다른 장 앱 탐색 및 탐색, 앱 검색, 상거래 및 전환, 등록, 양식 입력 및 유용성 및 이해력 이제 우리는 25 가지 다른 원칙을 가지고 있습니다

하지만 여기서,이 이야기에서, 나는 단지 두 가지 원칙으로 갈 것입니다 각 챕터와 나머지 원칙들 온라인으로 사용할 수 있습니다 나는 또한 당신을위한 자원을 모아 봤다 일부 구현에 도움이되는 당신이 여기서 보는 것들 스크린을 찍을 좋은 시간이 될 것입니다

그것은 당신이 당신 자신의 시간에 들여다 볼 수있는 자원이기 때문에, 더 자세하게 이제 앱 탐색과 탐색부터 시작하겠습니다 따라서이 장은 실제로 사용자에게 내용을 안내하는 것에 관한 내용입니다 그들이 찾고있는, 빨리 그래서 우리는 일련의 핵심 원칙들을 모았습니다

효과적이고 유쾌한 앱 탐색을 만드는 데 도움이됩니다 이제 이들 중 두 가지를 살펴 보겠습니다 따라서 사용자에게 큰 도움이 될 수있는 기능 위치를 자동으로 감지하지만하지 않습니다 위치 기반 작업이 필연적으로 예외없이 현재 위치를 기반으로합니다 우리는 이것을 너무 자주 본 것 같아요

그래서 정말 대단한 일입니다 구현하고 도움을 줄 수있다 사용자가 무언가를 원할 때 끊김없는 경험 위치는 있지만 기본적으로 사람들을 활성화시키는 방법없이 과도하게 적용된 것을 보았습니다 해당 위치를 변경하십시오 그래서이 예에서 누군가 오늘 밤 호텔을 찾고 있습니다

그들이있는 곳 근처의 호텔을 찾고 있습니다 불행히도, 위치를 바꿀 수는 있지만, 그것을하는 유일한 방법은 아마도 설정을 통과하는 것입니다 우리는이 문제를 여행 앱뿐만 아니라, 소매 앱에서도 사용했습니다 우리는 무언가를 찾고 싶어하는 사람들의 유스 케이스를 보았습니다 상점에 있었지만 그 위치는 아마도 부모가 살고있는 곳 근처에서 그 가게 근처에 있었는지 알아 내고 싶었다

부모님 께 그 사실을 알릴 수 있도록 그래서 단지 이것을 제공하는 것입니다, 기본적으로 우리는 우리는 너무 많은 사용 사례를보고 있습니다 시나리오 밖이었습니다 여행에서 우리는 사람들이 나타날 곳을 보았습니다 그들의 교통 수단과 그들이 원했던 호텔 기차역의 다른 쪽 끝에 책을 썼다 라인, 그리고 그들은 지금 호텔을 예약 할 시간이 있었는데, 하지만 그들은 그들이있는 곳에 있지 않습니다

당시 호텔이 필요했습니다 훨씬 더 나은 시나리오는 여전히 사람들이 현재 위치를 사용할 수있게하고, 그러나 그들을 잘 변화시킬 수있는 자원을 제공해야합니다 근본적으로 위대하고 위대한 기술입니다 분명히 당신이 사용하도록 권장하지만, 그것은 과도하게 적용된 종류입니다, 화면의 일부를 사용하지 않고 부동산 사용자가 위치를 변경할 수 있도록합니다 그 자동 감지 위치를 사용하고 싶다면, Google Places API를 사용하면 현재 지원되는 위치를 알아 내려면 우리는 당신을위한 짧은 링크가 있어요

저 재료에 도착하기 위해서 앱 탐색 및 탐색의 또 다른 측면 우리가 애플 리케이션으로 공정한 비트를 본 것은 앱에서 모바일 웹으로 이동합니다 그리고 내가 작성한 방식으로 볼 수 있습니다 이것을하는 것에 문제가 있다는 원칙 그것은 app-to-web 전환이 필요한 곳에, 그래서 그들이 필요한 곳에 마찰이 가해지지 않도록하십시오

그래서 저는 여기 아이디어가 각각의 경우에 정말로 필요하다고 생각합니다 그것을 위해? Google은 여기 Google에서 기술을 만들기 위해 노력하고 있습니다 이 장면을 훨씬 더 부드럽게 만들기 위해 필요한 전환점 그것을하기 위해, 그러나 현재, 우리는 여전히 적어도 일종의 성능 저하를 봐라 그래서, 정말로 당신이 가지고 있는지 모바일 웹으로 사람들을 밀어 넣는다 그들이 지금 앱 경험에있을 때, 그런 다음 마찰이 없도록하십시오

따라서이 예에서 우리는 누군가 누가 비행기를 탑승하는지 이것은 아주 평범한 상황이 될 수 있습니다 사람들이 모바일 웹으로 이동합니다 그러나 우리가 자주 본 것은 단순히 여행 앱에있는 것이 아니라, 다른 시나리오에서도 우리는이 경험을 보았습니다 근본적으로 변한다

그래서 우리는 이런 것을 보았습니다 승인? 그리고 때로는 일어날 수 있다고 생각합니다 팀의 조직 구조 때문입니다 알다시피,이 앱 팀이 모바일 웹입니다 팀, 그리고 그들은 충분히 말하지 않았어, 그렇지? 그래서 저는 몇몇 회사들이 더 좋은 일을하고 있다고 생각합니다

이 팀은 함께 사용자를 계획 할 수있게합니다 경험, 모양과 느낌, 내용 배치 방법에 대해 설명합니다 그런 다음 실제 구현을 분리합니다 다른 플랫폼에서 따라서 더 나은 경험은 회사들은이 점에 대해 정말로 사려 깊다

그리고 그 모습과 느낌을 매우 매끄럽게 만들 수 있습니다 모바일 웹으로 바로 이동할 수 있습니다 안드로이드에서, 우리는 이것에 대해 약간의 연구를하고 있습니다 Chrome Custom이라고하는 몇 가지 기술이 있습니다 살펴 봐야 할 탭

그것은 당신을 활성화 시키는데 정말로 도움이됩니다 툴바 색상 변경, 종료하고 애니메이션을 입력하여 해당 앱에서 이동하는 전체 과정 모바일 웹에보다 원활하게 전달할 수 있습니다 두 번째 장으로 이동하십시오 따라서 앱 검색에서의 중요성 정말로 과소 평가 될 수 없습니다 이제 몇 가지 중요한 검색 구현에 대해 이야기 해 보겠습니다

따라서 검색 필드를 눈에 잘 띄게 표시합니다 우리는 모바일 웹 연구를했을 때 이걸 발견했습니다 검색의 중요성에 대해 따라서 가난한 사례에서 우리는 사람들이 그것을 찾을 것으로 기대하는 장소에서 검색, 그러나 텍스트를 찾기 위해 그것을 어떻게 기대할 것인가가 아닙니다 이리 우리가 본 연구에서 사람들은 수색을 위해 주위를 둘러보고있는 약간의 좌절을 가지고 있었다

때때로 그것은 메뉴 아래에 숨겨져 있었고, 가장 분명한 것 중 하나 인 것처럼 들리지만, 그러나 나는이 연구에서 내가 본 것에 대한 나의 요약이 무엇인지, 개발자와 디자이너가 구현하지 않았다는 것입니다 충분한 검색 필드 영구 검색 필드를 포함해야합니다 검색이 정말로 중요한 부분 일 때 앱에서의 내 경험에 대해 무슨 일이 일어나고 있는지 생각하는 사람들이 많이 있습니다 검색이 중요하다고 생각하지만 그렇지 않습니다

스크린 부동산을 바치는 것이 중요합니다 그러니 앱에서 확인해보세요 현재보다 현저하게 강조해야할까요? 아르? 그래서 우리는 이것에 대한 조언을 Material Design에두고 있습니다 그리고 우리는 지속적인 검색을하고 검색 필드에 넣고, 확장 검색도 있습니다 우리는 유리 모양의 아이콘을 가질 수 있습니다

물론 검색을 위해 확장되었습니다 앱에서 검색의 중요성에 대해 생각해보십시오 그리고 사람들이 얼마나 중요한지는 중요합니다 검색 유형에 대한 결정 구현해야합니다 그리고 구현 세부 사항을 위해, 검색 대화 상자와 검색 위젯이 있습니다

이 링크를 클릭하면 더 많은 정보를 얻을 수 있습니다 필터 및 정렬 옵션은 어떻게됩니까? 대단히 중요합니다 다시 한 번, 우리는 그들이 숨겨져 있거나 일종의 묻혀있는 것을 보았습니다 또는 더 아래로, 사람들은 그들에게 갈 수 없었다 그들이 필요로하는만큼

그것은 우리가 최근에 한 우리 연구가 보여준 것입니다 우리는 그것의 훌륭한 구현을 보았습니다 그러나 아직도해야 할 일이 더 있습니다 셔츠에 대한 결과 242 개, 필터링하거나 정렬 할 방법이 없습니다 따라서, 더 나은 구현은 정말 좋은 클리어 버튼

필터 사람들은 그것을 아주 분명하고 쉽게 볼 수 있습니다 그리고이 예는 의류에 대한 것입니다 이 패널을 모든 올바른 종류로 슬라이드했습니다 그 (것)들을위한 수색 선택권의

그래서 당신은 베스트 매치, 최신 콜렉션, 그런 종류의 것 내가 이런 필터를 보았을 때 한 가지는, 몇몇 회사들은 예를 들어 사이징을 실시하고 있었고, 재고가 없을 때, 그리고 그것은 사람들에게 문제를 일으켰습니다 그들은 그들이 이제까지 할 것인지 알지 못했기 때문에 재고가 그들의 크기가 그래서 여분의 작은 것을 빼앗긴다고 상상해보십시오 그냥 그것이 주식에 없었기 때문에, 사람들 그것이 다시 올지 모르겠다

그보다 나은 경험은 그들을 가능하게하는 것과 같습니다 아마 재고가 언제 돌아 왔는지 알아보기 위해 가입하십시오 그러나 확실히 그것을 보여주고, 그것을 안정된 상태로 보여준다 좋다 그래서 여기에 색과 가격 그리고 또 다른 한가지가 있습니다

나는이 디자인에 대해 좋아한다 필터를 지우거나 필터를 적용한 다음 패널을 닫으려면 맨 위의 별도 수표, 그래서 패널을 닫는 것에 대해 혼란스럽지 않습니다 않습니다 따라서이 주제에 대한 검색을 유지하면서, 사람들에게 검색을 돕는 다른 방법이 있습니다 그 중 하나는 사용자 정의 제안 추가입니다

이는 응용 프로그램의 데이터에서 만들 수 있습니다 그래서 그것은 사람들이 그들의 수색에 정말로 도움이 될 수 있습니다 또 다른 하나는 최근 질의 제안입니다 그래서 모든 기술과 시설 그 검색 경험을 향상시킬 수 있습니다 보다 깊이있는 검색 경험을 통해 생각해보십시오

좋은 주제입니다 상거래 및 전환 따라서 사용자는 앱이 정말 부드럽길 기대합니다 제품을 찾고, 학습하고, 구매하는 경험 그럼 몇 가지를 살펴 보겠습니다

이 연구에서 상거래 및 전환에 대한 정보가 공개되었으며, 전환 경험을하도록 돕습니다 따라서 비교 쇼핑 기능을 사용할 수 있습니다 이 예에서 왼쪽의 여기에 부동산 앱, 여기, 그리고 사람들에게 그냥 그들은 아래로 스크롤하여 볼 수 있습니다 다른 집에서 그들이 좋아하는 것, 그들은 기억에 의지해야하며, 사람들, 우리, 너와 나, 우리는 모두인지 주의자이다 우리는 우리의 두뇌를 그렇게 많이 사용하는 것을 좋아하지 않습니다 그리고 우리는 사용자가 자신의 뇌를 많이 사용하도록 만들고 있습니다

여기, 그들이 물건 등을 보았던 곳을 기억합니다 그러나 우리는 더 잘할 수 있고 그 중 일부는 할 수 있습니다 우리가 본 것은 사람들을 돕기 위해 이런 방식으로 우리는 사람들에게 북마크 아이템을 제공하게됩니다 그들은 그것을 보았습니다 그래서 그들은 그것을 비교할 수있었습니다

모바일에서이 작업을 수행하는 것은 여전히 ​​매우 어렵습니다 그러나 여전히 우리가 할 수있는 모든 일이 도움이됩니다 그래서 저는 여기서 당신을 보여 드리겠습니다 사람들이 비교할 수있게했다 그리고 나서, 당신은 그것이 꽤 제한되어 있음을 볼 수 있습니다, 전화의 크기와 함께,하지만 여전히, 당신은 그 정보를 모으는 것

그것은 그들이 다른 모든 가정을 무시할 수 있다는 것을 의미합니다 걱정하지 않고 침실을 비교할 수 있습니다 그들은 욕실을 비교할 수 있습니다, 가정의 비용, 기타 등등 우리는 이것이 필요하다는 것을 알고 있습니다 연구에서, 우리는 사람들이 이에 대한 대안을 취하는 것을 보았습니다

그래서 소매상에서 사람들이 장바구니에 품목을 추가하는 것을 보았습니다 단지 그들이 같은 장소에서 그들 모두를 볼 수 있도록 그리고 그 일을 생각하는 사용자가있었습니다 다른 사람들이 어려움을 겪었습니다 그래서 우리는 이것이 필요하다는 것을 압니다

비교 및 탐색 경험에 대해 생각해보십시오 앱 내에서 사람들이 필요로하는 것 그런 다음 결제 수단을 쉽게 추가하고 관리 할 수 ​​있습니다 나는 다른 날에이 사실에 대한 가난한 예를 실제로 발견했습니다 내가 물건을 사러 갔을 때였습니다

나는 다시 휴가를 가고 있었다 나는 휴가를 가기를 좋아한다 그리고 나는 예약을하고 있었다 임대 주택 그리고 카드를 업데이트해야 할 시점까지갔습니다

내 머리 속의 나의 모델은 음, 새 카드가 도착했다 이전과 같은 카드 일뿐입니다 그것에 날짜가 새겨졌습니다 내 마음 속에는 내 카드에 대한 내 정신 모델이 있습니다 그것은 같은 카드입니다

그냥 교체가 필요합니다 새로운 결제 수단이 아닙니다 그래서 기존 카드를 편집 할 수있을 것으로 기대했는데, 그러나 그것을 할 수있는 시설이 없었습니다 그래서 나는 개발자의 모델을 이해해야 만했다 새로운 결제 수단을 추가해야했습니다

이 예에서는 그 사람이 그들이 체크 아웃되고있는 지점까지, 하지만 카드를 편집하거나 새 카드를 추가 할 방법이 없습니다 그것은 다른 곳에서도 가능합니다 하지만 우리 대부분은 생각하지 않습니다 글쎄, 나는 아침에 일어나서 생각할 것입니다 해당 앱에서 결제 수단을 관리해야합니다

종류가 별개의 활동입니다 맞습니까? 우리는 필요할 때 그것을 생각하는 경향이 있습니다 우리가 돈을 낼 때 그래서, 여기에 문제가 있습니다 따라서이 예에서는 훨씬 좋습니다

기존 카드를 편집 할 수있는 옵션이 있습니다 새 결제 방법을 추가합니다 여기에 여러 가지 결제 수단을 제공하고 사람들을 유도합니다 매우 깨끗한 형태의 디자인으로, 여기, 사용자가 새로운 신용 카드를 추가하기로 선택한 경우, 원할 경우 카드를 스캔 할 수도 있습니다 그래서 그 경험을 멋지고 깨끗하게 만드십시오

이제 Google에서 제공하는 하나의 시설 Android Pay는 그 중 하나를 선택하는 방법입니다 지불 할 이 아이디어는 사용자에게 매우 간단합니다 사용자가 Android Pay를 통해 원활하게 결제 할 수 있으며, I / O에는 여기에 대한 이야기가 있다고 생각합니다 이 링크에서 더 많은 정보를 얻을 수 있습니다

그래서 등록 등록은 회사 및 개발자에게 매우 인기가 있으며, 그게 그렇게 보였으니까 우리가 사용자로부터 참여를 얻을 수있는 곳입니다 그것은 사용자가 우리에게 맡기는 곳입니다 우리는 오래 전부터 이러한 등록을 제공 한 사실을 알고있었습니다

장벽이 앞에있는 것은 사람들이 도달하기위한 커다란 장애물이 될 수 있습니다 먼저 뭔가를 제공하는 것이 낫습니다 그래서 그들은 그들의 편에서의 참여를 느낄 수 있습니다 회사에 다른 몇 가지가 있습니다

등록과 관련하여 오늘 이야기하고 싶습니다 그래서 우리는 사용자들이 로그인하고 가입하는 데 어려움을 겪고있는 것을 보았습니다 까다로운 일이지, 그렇지? 우리는 종종 사용자가 양식을 작성하는 것을 보았습니다 그들이 제공 되었다면 그들이 가입하기로되어있을 때 서명하고 있었고, 그 반대 아마 우리 모두에게 일어난 일입니다

그래서 우리는 더 나은 경험을 발견했습니다 사람들에게 로그인하거나 등록 할 수있는 옵션이 주어졌습니다 그 단어들은 매우 달랐고, 그것들을 구별 할 수 있었고, 우리는 그들을 올바른 길로 끌 수 있습니다 그래서 그들은 그 혼란에 빠지지 않았습니다 우리는 등록 및 신원에 대한 솔루션을 많이 보유하고 있습니다

Google에서 우리는 전체 ID 플랫폼을 가지고 있습니다 내가 너를 보라고 권하고 싶다 기본적으로 인증 시스템입니다 몇 가지 구성 요소와 다양한 선택 사항이 있습니다 만들다

그래서 이들 중 하나는 Android 용 로그인입니다 사용자가 동일한 자격 증명으로 로그인 할 수 있습니다 그들은 Google에서 사용합니다 전체적인 의도는 그 과정을 더 많이 만드는 것입니다 쉽고 간단합니다

그 이야기는 다른 방법이 있습니다 암호 인증을 마찰없는 경험으로 만드십시오 우리 모두는이 상황에 처해있었습니다 우리에게는 효과가 없으며 모바일에서는 상당히 고통 스럽습니다 비밀번호를 계속 입력하면 작동하지 않습니다

앱에서 더 악화 될 수 있습니다 이 곳이 사람들이 돌려 보내진 곳이라는 것을 알았습니다 모바일 웹에 연결 했지, 그렇지? 그럼, 당신은 다시 그 고리에있어, 그리고 그것은 더욱 악화되고 있습니다 그래서 우리는 하나의 솔루션에 대해 이야기했습니다 사람들이 로그인 할 수있게 해줍니다

우리가 보았던 또 다른 하나는 훨씬 더 대중적이되고 있습니다 지문 입력이고, 우리의 연구에서, 사람들은 이것에 대해 꽤 행복했습니다 그들은이 일을 아주 많이 좋아했습니다 그래서 나는 이것이 좋은 것으로 생각합니다 또한 구현 세부 정보가 더 있습니다

여기서 지원되는 장치에서 지문 스캔을 사용합니다 그리고 Smartlock은 우리의 정체성 시스템의 또 다른 부분입니다 그것은 당신이 자동으로 사용자에게 응용 프로그램에 로그인 할 수있게하고, 그들이 저장 한 자격 증명을 사용합니다 그것은 또 다른 좋은 것입니다 이 연합 신원 조항의 일부 그리고, 만약 당신이 사용자들과 멀리 떨어져 있지 않다면, Sign-in Hints도 있습니다

우리에게 자격 증명 API를 사용하십시오 로그인시 사용자에게 힌트를 줄 수 있으며, 사용자 이름과 이메일 주소 모든 것은 서명 허들과 같은 쉬운 일종의 방식으로 이루어집니다 그래서 폼 엔트리 양식 입력에 대해 디자인에서 이야기했습니다

년과 년 동안 우리는 데스크톱 양식 입력 작업을 많이했는데, 우리가 모바일 웹에 갔을 때, 우리는 다시 모든 것을 다시 배우어야했습니다 그 양식들이 실제로 정말로 작고, 양식을 작성하기 위해 확장해야합니다 항상 앱으로 조금 더 나아졌습니다 우리가 양식을 디자인했기 때문에 모바일 장치의 구매부터

그러나 나는 말하기를 기쁘게 생각한다, 나는 우리가 먼 길을왔다라고 생각한다 그러나 우리 연구에서 보았던 것들이 아직도 있습니다 개선 될 수있다 그래서 저는 이것을 사용자 친화적 인 형태로 분류했습니다 내가 본 것들 중 몇 가지는 여전히 사용자가 자신의 업무에 많은 작업을해야하는 일부 앱

여러 다른 필드에 커서 놓기 그들의 전화 번호, 그리고 이런 것들에 대해서, 사용자 측에서 많은 노력이 필요합니다 또한 양식 필드가 어떻게 나타나는지 보려고 지불하지 않았습니다 사용자에게 문제가되었습니다 그 (것)들을 위해 종류를 분류하는 것은 단단했다 그들이 다음에 채워야 할 것의 그들의 정신 모델 그것들은 좌절감을 일으켰고 확실히 마찰적이었습니다

포인트 더 나은 교전은 여기에서 더 많은 일을하고 있습니다 백 엔드에 따라서 사용자가 휴대 전화에 글을 쓰고 싶어하는지 숫자 사이에 대시가있는 숫자, 숫자 사이에 공백이 있으면 아니면 하나의 긴 필드 일뿐입니다 그리고 그것을 만들어라

그것은 우리를 위해 조금 더 많은 일을한다 개발 측면에서,하지만 그것은 사용자가 훨씬 쉽게 사용할 수 있습니다 그들이하는 일을 이해하고, 오류가 반환되지 않습니다 또한 오류가있는 곳에서도 인라인을 제공합니다 정말 도움이됩니다

여기 앱에는 양식을 현장으로 옮기는 정말 좋은 직장 사용자가 정보를 입력하면 이는 사용자에게 매우 유리한 결과였습니다 따라서 멋진 텍스트 필드를 만드는 방법에 대한 많은 정보가 있습니다 머티리얼 디자인을 통해 서로 다른 측면에 대해 많은 이야기 좋은 양식을 만드는 것 특히 장소에 대해서는 지역 정보 자동 완성 기능을 사용할 수 있습니다

Places API의 일부로 다시, 그리고 이것은 이러한 형태로 채우는 데 정말로 도움이 될 수 있습니다 위치가 필요한 필드 양식 디자인의 또 다른 측면은 키보드와 일치하는 것입니다 필요한 텍스트 입력 이것은 꽤 잘 알려진 일이며, 그러나 우리는 여전히 잘 수행하지 못하는 중요한 앱을 보았습니다

따라서 사용자가 신용 카드에 커서를 올리면 필드에 추가하고 앱에이 항목이 있다면 너는 그것을 조사해야한다, 그것이 옳은 일을하고있는 것인가? 이 예에서는 여기에 올바른 일을하지 않습니다 사용자는이 키보드를 그대로두고, 올바른 키보드를 얻을 수있는 방법이 없습니다 대개는 아니지만, 여기에 숫자 키를 치고 나서 그들은 상단에 숫자가있는 키보드를 갖게 될 것이고, 적절하게 설계하는 것과는 대조적으로, 한 번 커서가 안에 있으면 그 (것)들을위한 숫자 키보드 이렇게 작은 것들, 양식에있는 모든 작은 것들 실제로 추가하고 양식 디자인을 체크 아웃하십시오 이런 식으로 사람들에게 정말로 도움이됩니다

입력 방법 지정에 대한 정보가 있습니다 이 링크에서 찾을 수있는 키보드 유형과 올바른 키보드 그런 다음 마지막으로 유용성과 이해력을 살펴 보겠습니다 이것들은 당신이 할 수있는 작은 것들입니다 우리가 우리 연구에서 보았던 것, 애플 리케이션을 통하여, 사용자들에게보다 자연스러운 경험을 제공합니다

우수한 사용자 경험을 보장하는 데 중요 할 수 있습니다 사용자가 걸려 넘어 지거나 경험을 포기하지 않는 경우, 언제든지 이것은 텍스트 레이블 및 시각적 키 제공에 관한 것입니다 시각적 정보를 명확히하기 위해 그래서 이전에 이것을 보았습니다 제 이야기에서 저는 시각적 인 열쇠가 빠져있었습니다

그 그림 속의 파도가 필요해 호텔의 방향을 이해하는 데 도움이됩니다 이 예제를 보자 몇 순간을 가지고 자신을 결정하십시오 그 아이콘이 나타내는 것이라고 생각하는 것

그들 중 일부는 아마 다른 사람들보다 분명합니다 답을 봐야할까요? 여기에 우리가 간다, 그래서, 그것은 나의 여행, 책, 클럽, 그리고 계정이다 누구가 그 (것)들을 맞았 는가? 나는 아마 계정이 그렇게 나쁘지 않았다고 생각한다 그러나 우리가 본 교훈은 다시, 나는 그것이 지나친 일반화라고 생각한다 우리가주는 규칙은 아이콘이 모호하고, 텍스트 레이블이 꼭 필요합니다

문제는 말하기에 때 아이콘 모호하다 우리 모두는 서로 다른 수준을 가지고있다 이해와 관련하여 너는 내가 생각하기에, 너의 많은 아이콘들 애매하게 될 것입니다 나는 당신에게 모범을 줄 수있다

따라서 필터 아이콘을 알 수 있습니다 이런 식으로 보이니? 그렇게 보편적이라고 생각할 수 있습니다 그것은 아주 다른 방식으로 그려집니다 많은 다양한 앱에서 보편적으로 사람들 사이에서 이해되는 것을 발견하지 못했습니다 그래서 나는 우리가 우리의 수준을 바꿔야한다고 생각합니다

앱의 아이콘 수와 관련하여 설정 라벨이 필요한 사람들, 사람들이 그것을 이해할 것입니다 그리고 이것은 매우 훌륭한 곳입니다 간단한 AB 테스트를 수행하고 레이블 제공 여부와 차이점 레이블을 제공합니다 여기에 구현 세부 정보가 있습니다 단추에 텍스트와 아이콘을 사용하려는 경우

그래서 그걸 가지고 있다면 그리고 라벨을 붙이는 것에 대해 이야기하고, 항상 저를 깨닫게 해줍니다 내 응용 프로그램에 액세스 할 수 있습니다 여기에는 많은 가이드 라인이 있습니다 응용 프로그램에 액세스 할 수 있는지 확인하십시오

그리고 오늘 내가 들어가야 할 마지막 원리 컨텍스트에서 사용 권한을 요청합니다 그래서, 이것은 우리가 Android M으로 가능하게 한 것입니다 하지만 우리는 여전히 상당수의 앱을보고 있습니다 그것을 이용하고 있지 않다 잠시 동안 iOS가 가능할 수있었습니다

지금도 따라서이 예에서 사용자는 다운로드 및 응용 프로그램을 열고 그들은 즉시 묻습니다, 위치를 사용할 수 있습니까? 그래서 아마이 앱은 그들에게 제안되었습니다 다른 누군가에 의해 그들은 오, 이것이 정말 좋은 앱이라고 말했다 당신이 가정 장식에 대해 배우고 싶다면, 그리고 그것은 당신이 살 수있는 몇 가지 정말 멋진 것들을 가지고있어

그러나 우리와 비슷한 방식입니다 문제가되는 등록을 생각 하겠지? 당신이 그것을 앞쪽에 요구할 때 넘어서 오는 장애물입니다 이것은 사용자에게 똑같습니다 개발자들이 말하는 것처럼, 내 위치를 알려주는 것과 같습니다 내가 너에게 다른 것을주지 않기 전에, 그렇지? 사용자는 종종 '아니오'라고 말하려고합니다

그들은 왜 그 이유를 정말로 이해하지 못하기 때문에 그들은 단지 당신의 앱을 둘러보고 싶었습니다 그래서, 그걸하는 더 좋은 방법입니다 안드로이드 M 때문에 지금 할 수 있어요 런타임에 컨텍스트에서이를 수행 할 수 있습니다 이 예에서는 매장을 검색하는 사람들이 있습니다

사용자가 자신의 동기 부여가 있기 때문에 훨씬 나아질 것입니다 권리? 그들은 그 가게를 찾을 수 있기를 원합니다 그 다음에 일어나는 일은 그들에게 더욱 분명합니다 뒤에 오는지도가 있고 그것 묻는다, 위치를 사용할 수 있습니까? 음, 물론 그렇게 할 수 있습니다 권리? 너는 받아 들일 확률이 훨씬 높다

당신이 문맥에서 묻는다면 우리는 이것을 위해 많은 자원을 가지고 있습니다 우리는 작은 비디오와 구현 세부 사항이 있습니다 런타임에 사용 권한을 요청할 수 있는지 여부 그리고 그것은 단순히이 원칙에 불과합니다 왜냐하면 많은 사람들이 그것에 대해 알고 있음을 알고 있기는하지만, 우리가 최근에 공부 한 앱에서 많이 보았습니다

그것이 여기있는 이유입니다 그래서 내가 원칙의 끝으로 나를 데려다 준다 너와 갈거야 각 장을 살펴 보았습니다 이러한 원칙을 온라인에서 더 많이 찾을 수 있습니다

그들은 모두 Google에서 생각할 때 온라인 상태입니다 그리고 여기 당신과 관련된 짧은 링크를 만들었습니다 원칙에 향상된 모바일 사용자 환경 사실 여러 가지 원칙이 있습니다

내가 무엇이 있는지 말해 줄께 모바일 앱 원칙, 새로운 설정 25 가지 모바일 원칙 중 새 집합이 있습니다 소매업을위한 25 가지 원칙 – 웹과 앱 모두입니다 다시 한 번 연구를 했으므로 그 정보는 그런 다음 모바일 웹 원칙이 있습니다 이전에 게시 한 내용, 이미 보았을 수도 있습니다

이 링크의 모든 링크는 동일한 링크입니다 더 자세한 구현 정보가 필요한 경우 모바일 웹 사이트에서 우리의 웹 펀더멘털의 일부이기도하다 사이트 및 그 곳에서 제공 한 특정 링크 추가 개발자 구현 세부 정보를 제공합니다 내가 가기 전에 한 가지 더 이야기하고 싶습니다 연구의 이야기

그래서이 연구에서, 신용 카드 스캔 기능을 구현 한 지불하기 위해서 이제 우리는 연구에서 소수의 사람들이 전에 그것을 사용했고, 그것을 가로 질러 왔고, 그것을 좋아했다 그러나 이것은 상대적으로 새로운 기술이기 때문에, 우리는 그것을 만난 사람들이있었습니다 처음으로 이제 스캔이라는 단어에 대해 생각하면 가장 친숙한 단어입니다

경험, 나는 생각한다, 단어 스캔과 더불어, 내가 식료품 가게에 가서 신용 카드를 스캔 할 때입니다 권리? 그리고 바로 옆에 내 신용 카드를 걸고 있습니다 음, 다른 기계를 통해 퍼팅, 정말, 그게 스캐닝 내가 스캔이라는 단어를 알고있는 또 다른 곳 사진 복사기에 종이 넣고있다 더 오래 전의 일이지만 여전히 스캔, 서로의 위에 뭔가를 가하고

따라서 사용자는이 요청을받습니다 신용 카드 스캔 그것은 스캔이라는 단어를 사용하는 것입니다 그리고 만약 당신이 그들을 번역하려한다고 상상한다면, 종종 가장 먼저 묻는 것은, 우리 카메라를 사용할 수 있을까요? 음, 카메라가 할 일은 무엇입니까? 내 신용 카드를 스캔하는 중입니까? 음, 아마도, 나는 그것을 이해하지 못한다 그래, 그래, 내 카메라를 사용할 수있어

그런 다음 여기에 신용 카드를 보관 해달라고 요청합니다 자동으로 스캔합니다 좋아요, 지시에 따라 놀라지 마시고, 우리는 연구에서 세 사람이 이것을 보았다 그리고 그들은 기다리고 기다렸다 그들은 대단히 실망했다

그들은 지불하는 것이 아주 간단한 방법이라고 생각했기 때문에 그리고 이것은 단지 이해에 관한 것입니다 우리가 사람들에게하고 싶은 것과 사용하고있는 언어 간단하고 사용하기 쉽습니다 불행히도 우리는이 모든 것이 효과가 있다고 생각합니다

아직 작동하지 않습니다 그러나 그것은 말이 맞습니다 그들이하는 일, 그들이 무엇을하도록 지시 받았기 때문에 그래서 다시, 나는 그 시점으로 돌아 간다 사용자를 이해하고있는 앞에서 만든 경험, 끝에서 끝까지

흐름과 고통의 포인트를 이해합니다 정말 중요합니다 네가 경험을 쌓기를 원하기 때문에 당신은 당신의 사용자를위한 정말 좋은 앱 경험을합니다 사용자가 좌절하지 않는 곳, 좌절감의 종류가 아니라 내 앱을 사용한 후에 느낌이 들었고 내 호텔 방까지 갔다

내 창문에서 그 주차장을 봤어 앱 경험을 할 수 있기를 바랍니다 사람들이 인생이 정말로 마찰이없는 것 같은 느낌을 갖게한다 해변의 경치와 더 비슷합니다 그래서 저는 여러분에게 세 차례의 테이크 아웃을 해드 리고 싶습니다

그리고 이것들은 생각할 수있는 세 단계입니다 이 이야기 이후에 대해 앱을보고 앱을 감사합니다 25 가지 원칙에 위배된다 간단히 말해서, 우리는 이러한 경험들 각각에서 무엇을하고 있으며, 그리고 그것을 측정하고 있습니까? 그게 너에게 길고 긴 길을 가져다 줄거야

하지만 앱도 독특합니다 맞습니까? 따라서 주요 사용자 여정을 실제로 이해해야합니다 그 붕괴 지점을 이해하십시오 내 호텔 앱에 내가 제공 한 것 정말 흥분 되긴했지만 내게서 깨진 점들 결국에는 잘 작동하지 않게되었습니다

그리고 나서 마침내, 당신 자신의 사용자 테스팅에 대해 생각해보십시오 Google Ventures의 가이드 사용자 연구를 위해 많은 자원을 제공합니다 실제로 작은 규모의 방법으로 사용자 테스트를 수행하면 당신이 제공 한 좋은 것들을 볼 수 있도록 앱에서 축하하고 고통을 식별 할 수 있습니다 귀하의 애플 리케이션에 포인트, 그래서 당신이 그들을 해결하는 방법에 대해 생각할 수 있습니다 시간 내 주셔서 감사합니다

[음악 재생]

Build great Material Design products across platforms (Google I/O '18)

[음악 재생] JOHNATHAN CHUNG : 안녕하세요 우리 이야기에 오신 것을 환영합니다

제 이름은 Jonathan Chung입니다 그리고 저는 Material Design 팀의 UX 리드입니다 NIC BUTCHER :여보세요 내 이름은 닉 부처 야 그리고 저는 Design Relations 팀의 디자이너이자 엔지니어입니다

LARCHE : 나는 윌이야 저는 Material Design의 엔지니어입니다 JOHNATHAN CHUNG : 자리에 앉으세요 오늘 우리는 정말 어떻게 이야기하는지에 대해 기쁘게 생각합니다

플랫폼 전반에 걸친 훌륭한 소재 디자인 제품을 제작할 수 있습니다 그래서, Material Design이란 무엇입니까? 우리가 막 만든 모든 새로운 발표? 이전에 우리가 알고 있던 것에서 어떻게 진화 했습니까? 머티리얼 디자인은 이제 적응 형 디자인 시스템입니다 오픈 소스 코드로 뒷받침되는 팀은 고품질의 디지털 경험을 제공합니다 즉, Material은 당신을 돕습니다 정말 빠르고 아름답고 유익한 제품을 만들 수 있습니다

우리가 처음 출시 한 2014 년에는 제로 고객이 생겼습니다 이제 Material Design을 사용하는 150 만 개 이상의 앱이 있습니다 믿을 수 없어 그리고이 거대한 고객 수를 기반으로, 우리는 정말로 듣고 계속했습니다 우리의 시스템을 개선합니다

오늘 우리는 End-to-end 제품인 Material Theming을 출시했습니다 재료 디자인을 쉽게 만들 수있는 기능 자, 여러분 중 일부는 더 많이 배우기를 간절히 원합니다 하지만 아마도 당신 중 일부는 여전히 궁금해하고 있습니다 머티리얼 디자인이 당신에게 적합한 지 여부 귀하의 회사를 위해

그래서 나는 새롭게 걷는 것으로 시작할 것입니다 디자인 된 Materialio 사이트 그런 다음 Nick은 재료 도구 제품군을 시연합니다 공동 작업 및 맞춤 설정을 위해 제작 한 정말 쉽고 편리합니다

그러면 Will은 Material Components에 대해 이야기 할 것입니다 오픈 소스 코드 라이브러리 모든 플랫폼에서 사용할 수 있습니다 그래서 내가 왜해야하는지 세 가지 이유를 설명해 드리겠습니다 Material Design 사용을 고려하십시오 첫째, Materials Design은 개발자를위한 것입니다

우리에게 많은 피드백을 주셨습니다 앱을 적용하고 구축하는 것이 쉽지 않은 점 머티리얼 디자인을 사용합니다 이제 Material Theming 및 모든 도구를 사용하여 우리는이 새로운 기능을 지원하기 위해 구축했습니다 우리는 이제 창조하고자하는 열망을 갖게됩니다 개발할 코드에 눈을 돌려야합니다

머티리얼 디자인은 진정한 크로스 플랫폼 프레임 워크입니다 일관된 사용자를 만드는 것이 얼마나 중요한지 이해합니다 플랫폼 전반에서 작동하는 경험 따라서 머티리얼 디자인을 사용하면 사용자에게 도움이됩니다 여러 장치를 사용합니다

우리는 또한 고품질의 제품을 만드는 것이 오랜 시간이 걸린다 따라서 우리는 플랫폼 간 일관성을 장려하고 있으며, 또한 코드를 제공하고 있습니다 Android, iOS, 웹 및 Flutter에서 개발을 시작하십시오 이제, 우리는 그것을 시험에 적용 할 것입니다 이렇게 스크린을 만들 것을 상상해보십시오

그리고 아마도 여러분 모두는 전문가이자 전문가 일 것입니다 하지만 내 경험에 의하면, 화면을 구축 이것을 좋아하고 올바르게하려면 시간이 걸릴 것입니다 재료 디자인의 힘으로, 우리는 이제 그 어느 때보다도 쉽게 만들고 있습니다 여러 플랫폼에서 이와 같은 화면을 설계하고 구축 할 수 있습니다 그리고이 모든 마법은이 재 설계 된 사이트에서 바로 시작됩니다

새로운 사이트는 이제 디자인, 개발 및 도구로 나뉩니다 각 섹션에서 모든 위대한 자원을 찾을 수 있습니다 우리 팀이 당신을 위해 창조 한 디자인 지침, 도구, 리서치 통찰력, 오픈 소스 코드, 당신이 이름을 짓는다 우리는 시간을 좀 보냅니다 이 사이트는 현재 더 자세하게 설명되어 있습니다

디자인 섹션에는 여전히 모든 것이 있습니다 Material Design에 대해 좋아했습니다 모든 것이 있습니다 아무것도 사라지지 않았다 또한 가장 많이 읽은 기사 몇 가지를 소개합니다

페이지 상단의 콘텐츠를 빨리 찾을 수 있습니다 우리는 여전히 당신을 돕는 데 집중하고 있습니다 아름다운 디자인 제품, 배경없이 디자인 여기에서 기사를 볼 수 있습니다 우리가 당신을 위해 제공 한 것, 그리고 시스템 아이콘, 자신 만의 맞춤 색상 팔레트 생성, 당신의 브랜드에 맞는 서체를 고르십시오

UI에서 모양의 힘을 실제로 활용할 수 있습니다 마지막 섹션에서는 재료 연구에 대해 이야기합니다 우리는 Material Design의 모든 유연성을 보여 주며, 당신이 소매 용 건물이라면, 의사 소통을 위해, 또는 무엇인가 여행 앱만큼이나 복잡합니다 모든 것이 있습니다 그리고 우리는 그것을 테스트했습니다

그리고 체크 아웃 할 수있는 모든 것이 있습니다 머티리얼 디자인 가이드도 확장 및 향상되었습니다 재료 시스템, 재료 기초 및 재료로 변환 지침 머티리얼 시스템 섹션부터 시작하여, 우리는 Material Metaphors에 대한 일반적인 개요를 제공합니다 그런 다음 재단 섹션 다이빙 기본 관행으로 그래서 구조적인 것들을 언급 할 것이고, 타이포 그라피, 도해 법, 모양, 레이아웃 등

이제 지침 섹션에서는 전술 지침을 제공합니다 재료 제품을 만드는 방법에 대해 알아보십시오 이것에 관한 가장 좋은 점은 이러한 위대한 디자인 지침은 엔지니어링과 밀접하게 관련되어 있습니다 이제 다른 기능 중 일부를 살펴 보겠습니다 너를 위해 도움이 될 사이트에 제품을 만들 때

우리는 어떻게 상세한 사양을 가지고 있는지 압니다 엔지니어링 프로세스를 10 배 더 빠르게 만듭니다 그래서 우리는이 뷰를 제공하고 있습니다 Spec 뷰어 이 스펙 뷰어에서 우리는 이제 이 이미지에 대한 유용한 정보

오른쪽의 메뉴를 클릭하면, 다양한 유형의 모든 레이어에 액세스 할 수 있습니다 이 이미지에 대해, 당신은 단지 이미지 만 볼 수 있습니다, 측정, 텍스트, 색상, 모양 및 표고를보고, 이 UI에서 사용되는 여러 구성 요소를 확인하십시오 또는 우리가 추가했을지도 모르는 추가 노트 이 텍스트 주석을 살펴 보겠습니다 따라서이 주석에서, 여러분은 글꼴 이름, 크기 및 색상을보고, Google 팀이 구축 한 Google 글꼴 사이트로 연결됩니다

우리는 이러한 유용한 자원을 표면화하기를 정말로 원했습니다 워크 플로우의 맥락에서 당신에게, 그래서 당신이 필요로하는 모든 것이 바로 거기에 있습니다 이제 Google 글꼴 사이트로 이동하면 너는 다운로드하고 사용할 수있을 것이다 우리의 mock에서 사용되는 글꼴 우리는 또한 가장 효과적인 방법에 대한 연구를 수행했습니다

지침을 전달합니다 그리고 우리는 인터랙티브 한 콘텐츠 독자들에 대한 이해의 수준을 높였습니다 그래서 우리는 콘텐츠를 소개하기 시작했습니다 우리 기사에서 상호 작용한다 다음은 재료 팔레트 생성기의 예입니다

그것은 컬러 기사에 줄 지어 배치됩니다 이 도구와 상호 작용함으로써, 개선 된 색상 시스템에 대해 배울 수 있습니다 그래서 그것들은 우리가 가지고있는 새로운 특징 중 일부입니다 디자인 섹션에 추가 그러나 어떻게이 모든 것을 구축합니까? 그게 니가 여기있는 이유야

맞지? Develop 섹션은 이제 기능과 액세스 권한이 있습니다 Android, iOS, 웹 및 Flutter 용 오픈 소스에 모두 제공됩니다 플랫폼 협약을 존중하면서, 구성 요소가 제대로 작동하는지 확인하려고했습니다 Android뿐 아니라 다양한 플랫폼에서 사용할 수 있습니다 그리고 이들 구성 요소로 게임을 즐길 수 있습니다

우리 카탈로그에 아래로 스크롤하면 섹션이 표시됩니다 개발자 리소스 디자인 섹션과 비슷하게, 우리는 당신에게 필요한 자원을 제공하기를 원했습니다 귀하의 제품을 구축하는 데 사용할 수 있습니다

그리고 이것에 익숙하지 않다고 가정 해 봅시다 아래쪽으로 더 스크롤하면 이 작업을 시작하려면 자습서를 찾으십시오 기어를 도구 섹션으로 전환합니다 도구 섹션에는 모든 훌륭한 리소스에 대한 링크가 있습니다 갤러리를 시작으로 우리가 당신을 위해 만들었습니다

내가 사랑하고 디자인을 공유하기 위해 사용해온 부분이다 내 팀과 나는이 제품을 좋아한다 갱도 갤러리는 공동 작업을 매우 쉽고 매끄럽게 만듭니다

Nick이 갤러리에 대한 자세한 내용을 1 분 안에 알려줍니다 오른쪽에는 액세스 권한이 있습니다 양식화 된 아이콘의 다섯 가지 전체 세트 형식, 크기 및 밀도 범위에서 사용할 수 있습니다 하단에는 Material Theme가 표시됩니다 스케치 편집자

Theme Editor 란 무엇입니까? 이미 다른 회담 소식을 듣지 않았다면, Theme Editor는 플러그인입니다 브랜드를 체계적으로 표현할 수 있습니다 색상, 도해 법, 인쇄술, 그리고 모양 그리고 Theme Editor를 통해, 당신은 우리가 당신을 위해 제공 한 주제를 취할 수있을 것입니다 그것을 사용자 정의하여 사용자 정의하십시오

이러한 구성 요소 집합은 디자인에 사용할 수 있습니다 곧 또한 Theme Editor에 대한 유용한 정보 가이드 라인에 언급 된 모든 가이드 라인입니다 도구에 직접 통합됩니다 나중에 뭔가를 바꾸고 싶다면 어떨까요? 문제 없어

다음은 내부 색상에서 색상을 선택하는 예입니다 팔레트를 구성 요소의 전체 라이브러리에 적용합니다 나는 이것이 매우 유용하다고 생각한다 그리고 이것은 내 일을 그렇게 쉽게 만듭니다 이제, 나는 그것을 동료에게 넘겨 주겠다

닉, Theme Editor 사용법에 대해 더 자세히 이야기 해주십시오 고맙습니다 고마워, 조니 고마워, 조니 그래서 우리는 Material System, Foundation, 가이드 라인을 통해 고유 브랜드를보다 쉽게 ​​가져올 수 있습니다

귀하의 앱에 나는 당신에게 어떻게하면 좋을지의 예를 들려 줄거야 당신은 정말로 얼마나 쉬운 지 보여주기 위해 이것을합니다 해야 할 일이며, 특히 새로운 자료가 어떻게 나타나는지 보여줍니다 툴링은 설계 과정에서이 프로세스를 만듭니다 훨씬 더 빨리 개발할 수 있습니다

그래서 저는 올해 멋진 팀의 일원이었습니다 Google I / O 앱을 디자인하고 제작 한 사람 어쩌면 당신 중 일부는 그것을 사용했을 수도 있습니다 우리는 새로운 컴포넌트 리를 배치했음을 눈치 챘을 것입니다 여기에 하단 앱 바를 사용하는 것처럼 인셋 팹과

그러나 우리는 새로운 Material Theming을 모두 사용하고 싶지 않았습니다 우리가 원하지 않았기 때문에 오늘 큰 출시를위한 쇼를 망쳐 놓을 수 있습니다 오늘 우리가하는 일은 너를 걷는거야 Material Theming이 어떻게 할 수 있었는지 몇 가지 가능성을 통해 Google I / O의 상표를 훨씬 더 깊게 가져 오기 위해 적용됩니다 이 응용 프로그램에

그래서 Google I / O, 개발자 회의입니다 우리는 그것을 개발자 페스티벌로 거의 생각하고 싶어합니다 이 브랜드에는 장난기가 가득합니다 나는 특히 장난을 좋아한다 모션 스타일의 종류

또한 색상 표를 통해 표현됩니다 당신 주위에있는 모든 곳에서 볼 수 있습니다 또한 소프트웨어의 은유를 사용합니다 엔지니어링 세계, 레이어 및 스택과 같은 것들 그리고 우리는 일러스트 스타일에 영감을주기 위해 그것을 사용합니다

브랜드의 일종으로 그렇다면 이러한 요소를 앱 디자인에 어떻게 적용 할 수 있을까요? 그래서 나는 스케치에있다 이 파일은 테마 편집기에서 생성 한 디자인 파일입니다 조니가 방금 당신을 보여 줬어 Theme Editor가 많은 것들을 생성했다는 것을 알 수 있습니다 우리를 위해

그것은 구성 요소의 무리, 인쇄술, 스케일, 컬러 팔레트, 입면도 설정 및 아이콘, 등등 여기에서 Components View로 전환하면, 기본적으로 볼 수 있습니다 자료의 모든 구성 요소에서 일대일로 이 스티커 시트에서 나를 위해 생성 된 지침 여기, 내 디자인에서 사용할 준비가되었습니다 앱 바에서 모든 것이 있습니다 팹에서 카드로의 백 드롭

이름은 여기에 있습니다 이 구성 요소들에 대한 더 좋은 점은 그들이 Material Theming 시스템을 알고 있다는 것입니다 내가 의미하는 바를 보여 드리죠 테마로 다시 전환하여 여는 경우 스케치 플러그인 메뉴의 테마 편집기, 우리는이 테마가 현재 I / O, 일종의 인디고 프라이 머리, 그리고 청록색 악센트 색깔의 종류 색상 설정으로 들어가서 여기에서 Primary Color 섹션을 클릭하면, 그리고 나는이 원색을 바꾸어야했다

16 진수 코드를 직접 드래그하거나 16 진수 코드를 입력함으로써, 그것은 많은 효과를 가질 것입니다 내가 너를 그들을 따라 가게 해줘 우선, 이런 종류의 색조 팔레트를 보게됩니다 이 10 가지 색상의 색상이 생성되었습니다 내가 선택한 그 한 색깔에서

이것은 꽤 멋지다 나는이 작은 것에 괴짜 할 것이다 여기에 순진하지 않고 있습니다 선택한 색조 만 사용하는 것이 아닙니다 밝기를 변경하고 그런 식으로 팔레트의 종류,이 알고리즘 뒤에 디자이너가 색상을 선택하는 방법을 모방하려고 노력하고 있습니다

그리고 그것을 사용하여 멋진 색상 표를 고를 수 있습니다 잘하면 응용 프로그램 전체에서 훌륭하게 작동합니다 그래서 그것을 선택하면 테마의 전체 색상 팔레트 업데이트 중입니다 그리고 제가 다시 구성 요소로 전환하면,이 스티커 시트, 당신은이 모든 요소들이 테마 색의 변화를 알고 있습니다 그리고 그 변화는 모든 요소들로 흘러 넘칩니다

따라서 앱 바가 기본 색상을 선택하고 더 어두운 색상을 선택할 수 있습니다 상태 표시 줄의 음색 등, 그것은 꽤 강력합니다 그렇다면 우리가 생성 한이 라이브러리를 어떻게 사용합니까? 따라서 내 앱 디자인 파일로 전환하면, 이것은 I / O 앱의 일부 화면입니다 라이브러리의 구성 요소를 사용하여 디자인했습니다 저를 위해 Theme Editor가 생성되었습니다

Sketch의 라이브러리 기능을 사용하지 않은 경우, 꽤 멋지다 기본적으로 구성 요소를 공유하는 방법입니다 서로 다른 디자인 파일간에 또는 팀간에 공유 할 수 있습니다 그것은 매우 강력합니다 따라서 표준 스케치 삽입물을 사용하여 라이브러리에 액세스합니다

메뉴 그리고 제가 생성 한이 라이브러리로 스크롤합니다 그리고 바로 여기서 볼 수 있습니다 스티커 시트에서 우리가 방금 보았던 이러한 종류의 나무 구조로 배열됩니다 그래서 우리는 우리가 구성 요소의 다양한 변형, 구성 요소가있을 수있는 다른 상태로 내려갑니다

따라서 설계에 팹을 추가하려면, 메뉴에서 하나 잡을 수있어 내 디자인에 떨어 뜨려 라 그리고 오른쪽 경위 창에서, 재정의를 제공하는 것을 볼 수 있습니다 당신은 아이콘과 같은 것들을 바꿀 것입니다 따라서 Theme Editor를 통해 생성하면, 사용할 수있는 많은 구성 요소가 있습니다

그래서 우리는 그것이 생성 된 라이브러리를 이해합니다 그리고 그것을 당신의 디자인에 사용하는 방법 이러한 매개 변수 중 일부를 사용자 정의하기 시작하십시오 그래서 나는 나의 도서관으로 돌아가 Theme Editor를 열었다 그리고 내가 생각하는 첫 번째 매개 변수 중 하나 I / O 브랜드가 재미있을 수도 있습니다

I / O 로고에서 영감을 얻고 싶습니다 그 사이에 이런 종류의 탁월한 슬래시가 있습니다 나는 우리가 흥미로운 종류의 표면을 할 수 있다고 생각한다 모양 치료 그래서 기본적으로, 기준선에서, 우리는 이런 종류의 둥근 모서리 표면 모양

각도 설정으로 전환하겠습니다 대신에이 세 모서리의 선택을 취소하십시오 왼쪽 상단 모퉁이 반지름을 크랭크 업하십시오 여기 I / O 로고에서 영감을 얻으 려합니다 내 제품의 구성 요소에 깊이 삽입 할 수 있습니다

라이브러리에서 저장을 누르고 전환하면 내 디자인 파일에 스케치가이 작은 보라색 막대를 띄웁니다 모퉁이에서 기본 라이브러리에 업데이트되었습니다 이것을 클릭하면 diff가 거의 나옵니다 이것들은 모두 이러한 변화의 영향을받을 것입니다 그래서 그것들을 선택할지 말지를 선택할 수 있습니다

나는이 모든 변화를 가져갈 것입니다 이제는 형상 시스템을 알고있는 모든 구성 요소 업데이트 될 예정입니다 예를 들어이 하단 시트를 확대하면 당신은 그것이 커트 코너에서 픽업되는 것을 볼 수 있습니다 그리고 마찬가지로, 여기에있는이 제기 버튼에, 그것은 모양을 인식합니다 시스템의 일부 구성 요소는 다른 기능을 제공합니다

매개 변수를 선택할 수 있거나 가질 수없는 변형 체계 예를 들어, 여기에 표준 원형 프리젠 테이션을 사용하고 있습니다 그러나 Symbol 설정으로 들어가면 내가 선택한 곳으로 갈 수있어 다른 대안을 선택하십시오 만약 내가 매개 변수를 알고 싶거나 원하지 않는다면

예를 들어, 다이아몬드 또는 스퀘어 타입으로 픽업 할 수 있습니다 모양, 다른 모양 매개 변수에 데리러 것입니다 또는 원하면 원형으로 유지하도록 선택할 수 있습니다 그래서 그것들은 그들의 매개 변수를 고르지 않을 것입니다 유사 콘텐츠에 대해 말하면서 새로운 분산을 도입했습니다

텍스트 필드 중 우리는 곧 다시 돌아올 것입니다 내 디자인에서 바로 들어가서 선택할 수 있습니다 기본 텍스트 필드의 표준 종류는 무엇입니까? 다른 변형으로 전환 할 수 있습니다 내 스티커 시트에서 사용할 수있는 것들 그래서 거기에 우리가 간다

텍스트 필드의 다른 변형이 있습니다 바로이 윤곽선을 사용하면 더욱 분명합니다 살펴보고 싶은 다음 매개 변수는 활판 인쇄입니다 현재 I / O 앱은 Google Sans를 사용하고 있습니다 Google 브랜드의 서체 인 페어링 된 Roboto와 함께 나는 우리가 어떤 영감을 얻을 수 있다고 생각한다

그것은 개발자 이벤트입니다 그래서 저는 개발에서 영감을 얻으려고합니다 환경을 보호하고 모노 스페이스 글꼴을 사용해보십시오 이것이 Google 브랜드와 어떻게 작동하는지 확인하십시오 Theme Editor의 타이포 그라피 설정으로 들어가면, 테마 편집기에있는 여기에이 스케일이 있음을 알 수 있습니다 나를 위해 생성, 이런 종류의 의미 스타일을 제공 내 디자인 전반에 걸쳐 적용 할 수 있습니다

여기에있는 Google Sans를 선택하고 검색하면 모노 스페이스 (monospace)의 경우, 여기서 Roboto Mono를 사용할 것입니다 내 즐겨 찾기 중 하나, 그것은 어디서나 교환 할 것입니다 그 다른 폰트가 사용되었다는 것 내가 사는 곳마다 다른 곳이야 Google Sans의 다른 변형을 사용하면 수동으로 변경할 수 있습니다

그리고 그것은 흥미로운 것을 할 것입니다 여기를 보시면 Google Sans로 설정되어있는 동안 볼 수 있습니다 특정 글꼴 크기와 추적 및 무게를 가졌습니다 그리고 다른 글꼴, Roboto Mono로 전환했을 때, 해당 스타일에 대해 변경된 글꼴 크기, 추적 및 체중 그래서 여기에있는 것은 Theme Editor입니다

글꼴에 대해 꽤 영리합니다 글꼴의 특성을 살펴 봅니다 순서대로 광학적으로 수정하십시오 조화로운 스케일을 만들 수 있습니다 그래서 당신이 선택한 글꼴이 무엇인지 알 수 있습니다

x 높이 또는 획 두께가 다릅니다 또는 이와 비슷한 것을 보면, 사용하는 크기를 조정합니다 규모의 다양한 유형에 대한 이 조화로운 유형을 생산하기 위해서 모두 단지 글꼴을 선택함으로써, 그것은 저를위한 스케일을 생성합니다 그것은 꽤 훌륭하다

그래서 그것을 저장하고 내 앱 디자인으로 다시 전환합니다 다시 말하면, 도서관이 업데이트되었음을 ​​알려줍니다 나는 모든 변화를 가져갈 수있다 디자인 전반에 걸쳐 나는 다른 폰트를 마침내 사용하고 있었다 당신은 내 새로운 서체로 업데이트 된 것을 볼 수 있습니다

[박수 갈채] 테마 편집기로 이동하십시오 그래서 이러한 변화는 나에게 꽤 좋아 보인다 나머지 팀원들과 공유하고 싶습니다 머티리얼 플러그인을 사용하면 Theme Editor와의 긴밀한 통합을 얻으십시오 하지만 갤러리와도 정말 잘 통합됩니다

공동 작업을위한 도구 플러그인에서 바로 갤러리에 업로드하도록 선택할 수 있습니다 프로젝트 또는 하위 수집을 설정할 수 있습니다 그것을 넣고 곧바로 업로드 할 수 있습니다 한 번 업로드하면 준비가 완료됩니다

팀과 공유했습니다 그래서 나는 우리 팀과 공유 할 수있는 고유 한 URL을 얻습니다 그래서 갤러리에서 디자인 작품에 대한 개요를 얻을 수 있습니다 새로운 반복을 업데이트 할 수 있으므로 내 디자인이 어떻게 발전했는지 나는 논평 할 수있다

그래서 이것을 사람들과 공유 할 수 있습니다 다양한 디자인 기능에 대한 토론이 있습니다 그러나 나는 당신에게 내가 절대적으로 좋아하는 기능 중 하나를 보여 주겠다 이는 검사 모드입니다 이제 Inspect Mode를 사용하면 디자이너가 쉽게 작업 할 수 있습니다

개발자와 개발자를위한 핸드 오프 디자인에서 필요한 모든 정보를 얻을 수 있습니다 따라서 Inspect Mode를 활성화하면이 Inspector를 얻습니다 오른쪽으로 그리고 나서, 내가 가리 키거나 디자인의 항목을 선택할 때, 그것은 나에게 spec 일을 줄 것이다 근본적으로 나에게 자동으로 빨간 선을 그어 줄거야

그래서 그것은 나에게 크기, 위치 정보를 준다 그것은 선택과 모든 것의 몸과 사본을 나에게 준다 서체 정보 그것도 당신이 그들에서 사용하는 모든 아이콘을 데리러거야 소재 테마 그래서 어떤 Material Icons가 당신을 연결시킬 것입니다 Material Icon 사이트로 이동합니다

필요한 자산을 확보 할 수 있습니다 그리고 바로 거기에서 무엇보다도 갤러리는 구성 요소를 이해합니다 테마 편집기가 생성합니다 따라서이 팹을 여기에서 선택하면, 단지 말하지 않을 것입니다

이봐, 이건 파란색 동그라미 야 그것은 말할 것입니다, 이봐 요, 나는 그것이 팹이라는 것을 알고 있습니다 따라서 그것이 팹이라는 것을 알 수 있습니다 무엇보다도 플랫폼 링크 당 제공됩니다 문서를 참조하기 때문에 개발자 구현해야하는 구성 요소로 직접 이동할 수 있습니다

그리고 그들은 어떤 매개 변수도 주어질 것입니다 변경 사항은 구성 요소에서도 변경되었습니다 나는 이것을 충분히 강조 할 수 없다 더 이상 그림이 그림을 넘겨주는 것이 아니라, 이봐, 이걸 구현할 수 있기를 정말로 바란다 구성 요소 간의 밀 결합 Theme Editor와 Material Design 구성 요소간에 제공됩니다

그들은 동일한 구성 요소라는 것을 의미합니다 이 구성 요소를 사용한다는 의미입니다 이 매개 변수가 변경되었습니다 그래서 더 이상 추측하는 게임이 아닙니다 그래서 이러한 변화는 나에게 좋을 것 같습니다

@Will에 대한 Comment 기능을 열어 두겠습니다 이러한 변화가 갤러리에 업로드되었습니다 구현 준비 너에게 끝이야, 윌 LARCHE : 고마워, 닉

그는 위대하지 않습니까? [박수 갈채] 그래서 저는 엔지니어입니다 그리고 닉은이 갤러리 프로젝트를 나에게 공유했습니다 나는 링크를 얻었다 그리고 나는 그것을 클릭한다 그리고 나는 여기 들어올거야

그리고 나에게 Material Components 선적 서류 비치 자, Material Components 또는 MDC는 무엇입니까? Material Components는 오픈 소스 프레임 워크입니다 머티리얼 디자인을 구현합니다 Android 용 MDC, iOS, 웹 및 Flutter 용 MDC가 있습니다 Google에서 앱과 동일한 코드입니다

각각에는 수십 가지 구성 요소가 있으며 모두 닉이 더 일찍 이야기했던 시원한 것들을해라 오픈 소스이기 때문에 수수께끼가 없습니다 그들은 마법 상자가 아닙니다 보거나 사용자 정의 할 수있는 모든 것을 사용할 수 있습니다 그리고 우리는 코드를 기증 해 주시기 바랍니다

이제 Material Components의 새로운 텍스트 필드를 살펴 보겠습니다 어떻게해야합니까? MDC를 코드 기반에 추가하는 것은 매우 쉽습니다 Android 사용자는 디자인 지원에 액세스합니다 표준 지원 라이브러리 설정을 사용하여 Maven을 통해 라이브러리 웹에서는 노드 모듈 만 설치하면됩니다

Flutter에서 끝났습니다 Flutter에는 재질 구성 요소가 내장되어 있습니다 iOS에서는 CocoaPod를 사용할 수 있습니다 Pod 파일에 추가합니다 iOS에서 조금 더 자세히 살펴 보겠습니다

새 텍스트 필드를 구현하는 방법에 대해 설명합니다 따라서 MDC iOS의 모든 텍스트 입력란에는 입력 및 제어기를 포함한다 우리는 MDC 텍스트 필드와 아웃 라인 컨트롤러를 추가 할 것입니다 우리의 앱에 본질적인 콘텐츠 크기를 사용하여 레이아웃 할 수 있습니다

UI 텍스트 필드 대리자를 설정할 수도 있습니다 그리고 자리 표시자는 국경을 넘어서 뜰 것이다 MDC를 이미 사용하고 있다면 업그레이드가 매우 쉽습니다 이러한 새로운 디자인을 얻으십시오 CocoaPod를 사용하고 있다면, 포드 업데이트 MaterialComponents를 실행하십시오

그런 다음 컨트롤러 클래스를 변경합니다 예전의 수업에서 새로운 멋진 수업 중 하나에 이르기까지 그리고 너 끝났어 그런데이 텍스트 필드는 훨씬 더 우수합니다 이전 디자인보다 성능이 좋습니다 우리는 엄청난 양의 연구를 순서대로 수행했습니다

이러한 최적화 된 디자인, 많은 연구가 필요합니다 그리고 그것은 긴 형태로, 사용자가보고 상호 작용할 확률이 훨씬 높습니다 이 텍스트 필드는 이전 디자인보다 새로운 텍스트 필드 또는 자료에 대해 더 자세히 알고 싶다면 연구, 목요일 "Measuring Material"목요일을 볼 수 있습니다 12시 30 분에 iOS에서 이렇게하는 것은 쉬운 일입니다 하지만 안드로이드는 어떨까요? 글자 입력 레이아웃에 윤곽선 상자 스타일을 설정했습니다

요소입니다 웹에서는 요소를 바꿉니다 클래스 MDC 라인 리플, MDC 클래스의 요소 클래스 경로가있는 SVG가있는 노치 아웃 라인 MDC 노치 외곽선 경로 및 MDC 요소 노치가있는 윤곽 유휴 수정 자 클래스 MDC 텍스트 필드 개요를 잊지 마십시오 더 간단 할 수는 없습니다

그리고 Flutter에서 테두리를 윤곽선으로 바꿉니다 MDC Flutter에서 일하기 때문에 조금 편견이 있습니다 하지만 펄터가 완벽한 방법이라고 생각합니다 여러 플랫폼에서 재료 설계를 구현할 수 있습니다 한 번 해보면 iOS와 Android를 모두 얻을 수 있습니다

그리고 MDC가 바로 구워집니다 Flutter 용 기본 UI 프레임 워크입니다 새 프로젝트를 만들 때마다 이미 링크되어 있습니다 나는 그것을 좋아한다 이제 재료 텍스트 입력란 코드에 추가 할 수 있습니다

그러나 더 많은 것이 있습니다 거의 모든 재료 가이드 라인 구성 요소를 찾을 수 있습니다 자재 구성 요소 앱 바, 버튼, 카드, 칩, 대화 상자, 탐색, 탭, 잉크 잔물결 지금 수십 가지가 있습니다

그리고 오늘 Materialio/develop에서이 모든 것들을 이용할 수 있습니다 그리고 설계가 완료되지 않았기 때문에 항상 더 많은 것들이 추가됩니다 오늘은 디자인 리소스를 보여 줬습니다 오늘 Material

io에서 사용할 수 있습니다 Theme Editor, Gallery 및 Material Tools Suite의 사용법 브랜드를위한 디자인을 사용자 정의 할 수 있도록 도와줍니다 머티리얼 구성 요소가 만드는 방법 4 개의 플랫폼에서 이러한 디자인을 쉽게 구현할 수 있습니다 정확성과 용이성 그래서 당신이 I / O에 있다면, 그 밖의 무엇을 할 수 있습니까? 우리의 디자인 돔으로 갈 수 있습니다

디자인 리뷰 및 데모를 얻을 수 있습니다 박스 회담에 귀를 기울이십시오 그리고 당신은 또한 이야기를 보러 갈 수 있습니다 "Flutter가있는 코드 Beautiful UI 그리고 재료 디자인 " 우리는 Material Components를위한 30 개의 코드 랩을 가지고 있습니다

코드 랩에서 그리고 수요일 2시 30 분에 세션, "펄럭과 물질을 묻는다" 우리에게 와서 질문 할 수있는 곳 Flutter 앱에서 소재 디자인을 구현하는 방법에 대해 알아보십시오 고맙습니다

[음악 재생]

Data Binding – an easier way to connect android UI

안녕, 모두들 나는 파이살 아비드 야

나는 리그의 안드로이드 아키텍트 다 나는 너에게 여기에있다 Android 데이터 바인딩 지금, curently 당신이 listview를 만들 때 또는 recyclerview 어댑터 네가해야 할 일은 먼저 객체를 다운로드하십시오 당신은 아마도 Retrofit과 같은 것을 사용할 수 있습니다 JSON을 오래된 일반 자바 객체 POJO를 가져와 레이아웃 파일로 변환 그게 보통 의미하는 것은 톤과 톤 "findviewbyid"호출 여기 저기 그럼 확실하게해야 해

올바른 전망을 보이고 있다면 가시성을 망쳐 놓음으로써 시간이 많이 걸릴거야 자, 해결책이 있다면 어떨까요? 몇달 전에, Google I / O에서 Google, 오픈 소스 프로젝트 발표 안드로이드 데이터 바인딩 솔루션의 훌륭함 그 안드로이드 데이터 바인딩입니다 런타임에 실행할 필요가 없습니다 컴파일 타임에 실행됩니다 Android Studio를 사용하는 한 당신이하는 일은 몇 가지를 추가하는 것뿐입니다 그라데이션 플러그인을 설치하고 Android Studio 허용 컴파일러는 모든 컴파일 작업을 처리합니다

어댑터 생성하기 그게 너에게 어떤 의미인지 적은 코드 너는 너의 모든 것을 정말로 쓰고있어 레이아웃 파일 데이터 바인딩과 정말 흡사합니다 훌륭한 솔루션입니다 그리고 지금 우리가 보지 않는 이유는 무엇입니까? 내 노트북에서 어떻게 보는지 우리는 실제로 프로젝트에 데이터 바인딩 먼저, 우리가 개발할 샘플 앱 매우 간단한 앱입니다

보여줄 모든 것이 Hello World입니다 및 정수 정말로 사소한 것 같네요 하지만 네가이 일을했다면 정상적인 Android 개발에서 레이아웃 파일을 만들어야합니다 어댑터 만들기 findviewbyid를 두 번 그것이 제대로 재활용되고 있는지 확인하십시오 일단 다 끝났어

메모리 누출이 없는지 확인하십시오 Android 데이터 바인딩으로 매우 간단합니다 먼저해야 할 일은 그 buildgradle 파일에서 전체 프로젝트 당신은 다음의 두 줄을 포함합니다 이 gradle을 1

30 베타 버전으로 업그레이드 또한 데이터 바인더 플러그인을 추가합니다 다음으로하고 싶은 일은 애플리케이션의 buildgradle로 이동하십시오 추가 com

androiddatabinding 용 플러그인 당신이 이것을 얻지 못한다면 걱정하지 마라 화면보기 이 작업을 수행하는 방법의 맨 아래에 메모가 있습니다 웹 사이트에서 이를 위해 리사이클 뷰를 사용했습니다 그래서 나는 recyclerview 플러그인을 추가했다

내 buildgradle 리사이클 러 뷰를 사용하지 않는 경우 매우 가벼운 목록보기입니다 그것은 많은 최적화를 수행합니다 네가하고 싶은 다음 일은 모델 파일 만들기 여기에 간단한 객체가 있습니다 모델 파일 우리에게는 여기에 2 가지의 증언이 있습니다

우리는 이름이있다 int 나이 데모 용으로 이름을 공개 문자열로 남겼습니다 사적 끈으로서의 나이 getter 및 setter 변수 사용 이것이 우리에게 할 수있는 것은 레이아웃 파일 대신에 텍스트를 정수로 쓴다 우리는 실제로 나이를 문자열로 변환합니다 내가 두 번째로 의미하는 것을 보게 될 것이다

다음 것 너는 만들고 싶어 실제 레이아웃 파일 이 객체를 저장하는 객체 이것은 안드로이드 데이터 바인딩의 마법입니다 나는 여기에 레이아웃 파일을 만들었다 adapter_simple_projectxml 다른 레이아웃 파일과 비슷합니다 우리가 디자인에 간다면 그것은 본다 여기에 아무것도없는 레이아웃 파일처럼 오른쪽에, 내가 가지고있는 TextView 2 개를 볼 수 있습니다

TextView에 ID가 없다는 것을 알 수 있습니다 나는 그것을 필요로하지 않는다 당신이해야 할 한가지 Android 용 데이터 바인딩 레이아웃 클래스로 모든 것을 랩핑한다 이 클래스를 사용할 수 있습니다 Android를 적용 할 때 데이터 바인딩 플러그인

당신이해야 할 다음 일은, 데이터 바인딩 알리기 당신이 사용하는 수업 너는 여기에서주의 할 것이다, 나는 "sompleobject"라는 변수를 가지고있다 그리고 그것은 간단한 객체 클래스를 가리키고있다 우리는 이전에 만들었습니다 이제 나머지 레이아웃은 다른 레이아웃과 같습니다 Android 레이아웃

나는 LinearLayout을 가지고있다 및 2 TextViews 여기 흥미로운 것은 텍스트 값을 보면 두 TextViews 모두 참조가 표시됩니다 simpleobjectname 및 simpleobjectage 이제이 사실을 알게 될 것입니다

우리 시대 변수에 대한 게터와 세터 왜냐하면 우리가 단지 숫자 1, 정수 1 실제로 레이아웃을 찾으려고합니다 또는 문자열 값 정수 1을 참조하는 문자열 1보다는 여기에 몇 가지 텍스트 스타일을 추가했습니다 이전에 본 것처럼 ~을위한 푸른 색 이름 시대의 붉은 색 일단 우리가 그렇게하면, 우리의 어댑터를 만들 차례입니다 이 어댑터는 조금 특별합니다 우리는 findviewbyids를 많이하지 않습니다

또는 뷰의 조작 우리는 단지 가지고있다 간단한 리사이클 뷰 어댑터 확장 SimpleObjectHolder 우리는 그걸 두 번째로 살펴볼 것입니다 뷰 홀더를 만들 때 우리는 다음과 같은 클래스를 만듭니다 동적으로 생성 된 우리는이 클래스를 실제로 만들지 않았다는 것을 알 수 있습니다 AdapterSimpleProjectBinding 레이아웃 파일의 이름에 따라 AdapterSimpleProject 자동으로 생성한다

그래서 당신은 이것을 창조합니다 파일 당신은 DataBindingUtil은 정적 클래스입니다 레이아웃을 부 풀린다 이걸 언급 한 사람 파일 그리고 당신은 그것을 당신에게 넘깁니다 SimpleObjectHolder 우리가 지금보고있는 것 우리는 통과한다

바인딩 객체 홀더로서 우리가 만든 방법으로 BindConnection 우리는 SimpleObject를 전달한다 그리고 우리 바인딩을 말하다 내 간단한 개체 modle 걸릴 레이아웃에 바인딩합니다 bindingsetSimpleObject 다시 말하지만, 이것은 모두 동적으로 생성됩니다 AdapterSimpleProjectBinding 마지막으로, 다른 리사이클 뷰어 홀더와 마찬가지로 우리는 재정의 할 필요가있는 방법을 가지고있다

onBindViewHolder 홀더 값과 위치를 전달합니다 우리는 소유자를 데리고 우리는 bindConnection 우리는 모델을 전달한다 우리가 bindConnection에 들어가면 그게 우리가 방금 본거야 bindingsetSimpleObject 일단 끝나면 그게 다야

어댑터를 만들었습니다 필요 없음 findviewbyids 많은 날짜를 조작 할 필요가 없다 모든 것이 거기에있다 상자에서 작동합니다 그리고 네가 실제로 어떻게 생각해? 어댑터 할당 리사이클 러보기로 다른 어떤 것과 마찬가지입니다

당신이 한 Android 프로젝트 당신 리사이클 러 뷰의 인스턴스 가져 오기 몹시 떠들어 대다 여기에 모델 객체들 방금 for 루프가 있습니다 100 번 실행되는 "Hello World"를 지정합니다 나이 이전 동영상에서 본 것처럼 우리는 어댑터를 인스턴스화합니다 보통처럼 일반 Android 개발 우리가 LinearLayoutManager를 설정 한 recyclerView 다시, 일반 Android 개발과 마찬가지로 마지막으로 어댑터를 설정합니다

여기에는 새로운 것이 없습니다 그들은 모두 친숙해야합니다 새로운 유일한 것은 레이아웃 파일 새 데이터 바인딩 호출을 추가하십시오 당신은 그것을 가지고 있습니다 Android 데이터 바인딩을 본 것처럼 정말 강력합니다

그것은 많은 개발 속도를 높인다 네가하는 일 목록보기를 인스턴스화하려는 경우 일부 데이터를 보여줍니다 동영상을 시청 해 주셔서 감사합니다 다른 것이 있으면 당신은 자유롭게 나에게 다가 가라

에 Twitter, @ 파이살 알비드 그것은 아래에있을 것이다 나는 안드로이드 데이터 바인딩을 바란다

너의 삶을 편하게 해준다 고마워요 : D 그럼 앱을 열자 받은 새 알림이 있습니다 그것은 말한다 : Android Wear 프레스 그것이 전화 통보입니다 시계에서, 우리는 볼 것이다

그게 맞아 공고

The Components of Material Design (Android Dev Summit '18)

[음악 재생] CAMETON KETCHAM : 헤이 제 이름은 카메론 케 um입니다

나는 Material Design Components 팀 또는 MDC Android 그리고 뉴욕시 사무실에서 일합니다 GAUTHAM SAJITH : 내 이름은 Gautham Sajith입니다 MDC Android에서도 작업합니다 저는 샌프란시스코에 있습니다

CAMERON KETCHAM : 그리고 우리는 조금 이야기 할 것입니다 머티리얼 디자인 컴퍼넌트 (Material Design Components)와 앱 테마에 대해 알려드립니다 이렇게 빨리, 우리가 토론 할 것입니다 Material Design의 간단한 역사, Material Theming 머티리얼 디자인 구성 요소를 사용하여 색상, 유형, 및 Shape 하위 시스템, 이러한 하위 시스템 적용 방법 우리의 석방 과정으로, 그리고 조금 기여하고 있습니다 이렇게 빨리, 재료 디자인 도서관의 간단한 역사

머티리얼 디자인은 2014 년에 처음 발표되었습니다 그리고 디자인 도서관도 없었습니다 그런 다음 1 년 후인 2015 년 I / O에서 Google이 마침내 디자인 지원 라이브러리를 발표했다 재료에 대한 많은 코드를 가져 오는 데 도움이되었습니다 다음을 포함한 특정 구성 요소에 대한 설계 탐색 드로어, 플로팅 동작 버튼, 스낵 바, 등등

그러나 아직도 그다지 그렇게 많지 않았습니다 그리고 올해 I / O에서 우리는 Material Theming을 발표했습니다 보다 큰 엔지니어링을 목표로 그것 뒤에 팀 따라서 우리는 많은 구성 요소를 구현하는 중입니다 Material Design spec을 기반으로합니다

그래서 재료 Theming Material Design의 원래 문제점은 무엇입니까? 글쎄, 그것은 디자인 시스템의 훌륭한 초기 버전이었습니다 그것은 많은 경우에 효과가있었습니다 그러나 브랜드의 표현으로는 부족했다 그래서 여기에 이메일 앱의 예가 있습니다

다른 모든 앱과 비슷합니다 Material Design을 사용합니다 이메일 앱이라고해도 과언이 아닙니다 내 의견으로는 여기에 사물의 예가 있습니다

Material Theming으로 할 수있는 일 앱을 눈에 띄게 만들 수 있습니다 그리고 우리는 약간의 세부 사항에 들어갈 것입니다 이렇게 빨리, 어떻게 theming 작동합니까? 기본적으로 Material Theming은 시스템입니다 우리가 당신을 돕기 위해 디자인 한 당신은 당신의 애플 리케이션을위한 독특한 디자인 글꼴, 색상 등의 몇 가지 사항을 결정하면됩니다

모양 등등 그리고 이것은 사용할 수있는 Material Design 스케치 플러그인입니다 디자인 아이디어를 만드는 데 도움이 될 것입니다 앱을 개발하는 데 사용할 수 있습니다 해당 도구에 대한 자세한 정보는 material

io를보십시오 우리가 한 몇 가지 물질 연구가 있습니다 Material Theming의 예를 보여줍니다 그리고 당신은 그것들 모두가 아주 다르게 보임을 볼 수 있습니다 그리고 이것들이 material

io에 훨씬 더 많이 있습니다 GAUTHAM SAJITH : 멋지다 이제 어떻게해야하는지에 대해 이야기 해 봅시다 자료를 사용하여 실제로 시작하기 구성 요소 라이브러리 이 시나리오를 상상해보십시오

이 이야기를 통해 몇 번 돌아 오십시오 당신은 당신이 만든 상당히 평범한 앱을 가지고 있습니다 바로 직선 AppCompat에서 그리고 팀 메이트가이 재 설계를 요청합니다 머티리얼 디자인 스펙을 사용합니다

그럼 어떻게 할 건데? 따라서 귀하는 지원 라이브러리 디자인에 대해 잘 알고있을 것입니다 패키지,이 v28 버전, 우리 도서관을 사는데 사용할 수 있습니다 그리고 이것을 사용할 수 있습니다 그러나 더 이상 업데이트되지 않습니다 따라서 conductgoogle

android 소재를 사용해 보셔야합니다 라이브러리, 안드로이드 X 주목할 사실 하나 행동 안드로이드 지원 및 행동을 사용할 수 없습니다 Google Android 패키지가 함께 제공됩니다

따라서 Android X로 전환하려면, 개발자에게 멋진 리팩터링 도구가 있습니다 안드로이드 사이트 그러면 앱을 리팩터링하는 데 도움이됩니다 그런 다음해야 할 일은 우리의 Material Themes를 사용하고 있습니다 그래서 우리는 기존에 상응하는 주제를 제공합니다 AppCompat 테마

그리고 이러한 테마는 다양한 속성을 제공합니다 모양, 색상, 유형 테마 중 일부를 수행하는 데 도움을줍니다 우리가 얘기 할거야, 사용할 수있는 기본 스타일은 물론 모든 구성 요소에 걸쳐 예를 들어, 귀하의 테마가 AppCompat Light에서 확장되면, 전환하기 만하면됩니다 themematerialcomponents

light 그리고 당신은 우리의 모든 속성을 가져야합니다 뿐만 아니라 우리의 모든 구성 요소 스타일 제가 언급했듯이, 많은 새로운 속성들이 있습니다 우리가 소개 할 것입니다

우리 구성 요소를 사용하려고하면 이러한 속성이 정의되지 않은 경우, 당신은 런타임에 Theme Enforcement Error를 얻게 될 것입니다 스타일은 테마에서 이러한 속성을 찾기가 쉽습니다 그리고 그것들이 존재하지 않는다면 그것은 런타임에 충돌 할 것입니다 그래서 이것에 대한 해결책은 우리의 테마를 사용하는 것입니다 그것은 당신에게 모든 속성을 줄 것이다

전체 주제로 전환 할 준비가되지 않았다면 꽤 아직 – 당신은 속성을 얻고 싶습니다 스타일들 중 – Bridge 테마라고 불리는 것을 사용할 수 있습니다 그리고이 브릿지 테마가하는 일은 그들이 당신에게 제공하는 것입니다 스타일링을 수행하는 데 필요한 모든 속성 그러나 그들은 당신에게 어떤 기본 스타일도주지 않습니다

따라서 구성 요소 스타일을 하나씩 사용하도록 선택할 수 있습니다 전환 할 준비가되었습니다 예를 들어 Bridge 테마에서 확장하는 경우, BottomAppBar 스타일을 사용하도록 선택하려는 경우, 기본 BottomAppBar 스타일을 정의 할 수 있습니다 당신의 주제에 그런 다음 모든 BottomAppBars 머티리얼 구성 요소 스타일을 얻습니다

CAMERON KETCHAM : 이제 우리는 단지 몇 가지 새로운 구성 요소에 대해 조금 이야기 할 것입니다 Material Theming을 통해 우리는 몇 가지 새로운 것을 소개했습니다 BottomAppBar와 같은 BottomAppBar는 탐색 및 키 동작을 표시합니다 모바일 화면 하단에 있습니다 한 손으로 만하는 사람들에게 좋은 것은 무엇입니까? 엄지 손가락을 사용하여 장치와 상호 작용합니다

꽤 간단합니다 코디네이터 레이아웃을 사용하여 BottomAppBar 간의 모션 플로팅 액션 버튼이 있습니다 여기서는 BottomAppBar에 대한 간단한 XML 만 있습니다 할 수있는 일 중 몇 가지 FAB의 수직 오프셋을 설정합니다 FAB 크래들 여백을 설정할 수도 있습니다

FAB와 BottomAppBar 사이의 거리입니다 둥근 모서리 반경뿐만 아니라, 이는 BottomAppBar가 FAB를 충족시키는 모서리입니다 스크롤 할 때 BottomAppBar 숨기기를 사용할 수 있습니다 그리고이 정렬 모드를 설정할 수도 있습니다 자동으로 FAB에 애니메이션을 적용합니다

네비게이션하는 경우 유용합니다 다른 조각이나보기 사이 시각적 인 차이를주고 싶다 서로 다른 화면 사이 이미 툴바를 사용하고 있다면, BottomAppBar를 사용하면 쉽게 시작할 수 있습니다 도구 모음에 대한 지원 작업 표시 줄을 설정하는 경우, BottomAppBar 대신 설정하십시오

그리고 다른 모든 것은 같은 방식으로 작동합니다 그러나 On Menu Item을 사용할 수도 있습니다 Listener를 직접 클릭하십시오 BottomAppBar에 있습니다 GAUTHAM SAJITH : 우리는 또한 버튼의 개조 된 버전 소재 버튼 호출

스타일을 훨씬 단순하게 만들기 위해 개편되었습니다 따라서이 Material Button 구성 요소를 XML에 넣으면, 스타일이 지정된 버튼을 얻을 수 있습니다 그러나 전체 테마를 사용하는 경우, 실제로 XML에서 Button 태그를 사용할 수 있습니다 그리고 우리는 Custom View Inflation이라고 불리는 것을합니다 이 태그는 재료 버튼으로 자동 팽창됩니다

꼬리표 그런 다음 비활성화 된 상태를 설정할 수 있습니다 이 버튼에 그리고 모든 주들이 이관 할 것입니다 색상이 전송됩니다

이 버튼에 아이콘을 설정할 수 있습니다 아이콘 속성뿐만 아니라이 아이콘을 설정하면 스타일 그리고이 스타일은 선택 사항입니다 그러나 그것은 패딩을 약간 조정할 것입니다 단추에 대한 시각적 균형을보다 균등하게 달성 아이콘이있을 때

속성을 사용하여 아이콘 크기를 변경할 수 있습니다 개요 단추 스타일을 설정할 수 있습니다 우리가 사용하는 기본 스타일 중 하나입니다 이 헤어 라인 윤곽선 단추를 얻으려면이 단추를 제공하십시오 버튼의 배경색을 설정할 수 있습니다

배경 색조 속성을 설정합니다 여기에 색상 상태 목록을 제공 할 수 있습니다 따라서이 경우 버튼이 활성화되어 있으면 보라색으로 표시됩니다 사용 중지되면 회색으로 표시됩니다 다른 속성을 설정할 수 있습니다

획 너비, 획 색상, 코너 반경을 사용하여 스타일을 지정합니다 아이콘 전용 버튼 만 만들 수도 있습니다 이 경우 아이콘을 설정합니다 아이콘 패딩을 0으로 설정하는 것뿐만 아니라, 버튼의 중앙에 아이콘이 표시됩니다 또한 콘텐츠 설명을 설정하고 있습니다

이 버튼에 그래서 텍스트가 없으므로 접근성 측면에서, 콘텐츠 설명을 설정해야합니다 그래서 사람들은 버튼의 내용을 알게 될 것입니다 버튼에 리플 색상을 설정할 수도 있습니다 예를 들어 여기에 자주색 리플을 설정하면, 버튼에 적용됩니다

색상 상태 목록이나 16 진수 값을 여기에서 설정할 수 있습니다 보시다시피 버튼 위에 보라색 잔물결이 있습니다 하지만 알파가 이미 내재되어 있기 때문입니다 리플에 녹색 버튼 상단에 자주색 리플이 있습니다

그리고 이들은 몇 가지 예입니다 이 라이브러리에서 제공하는 다른 구성 요소 중 우리는 여러 종류의 칩을 가지고 있습니다 채우기 및 개요가있는 텍스트 필드가 있습니다 스타일, 암호 표시 및 숨기기 기능 및 문자 계수기 그런 다음 매우 맞춤 설정할 수있는 탭 레이아웃이 있습니다

게다가 CAMERON KETCHAM : 좋습니다 이제는 테마에 대해 조금 있습니다 MDC는 Android의 기본 테마에 크게 의존합니다 테마 및 스타일이 작동하는 방식을 간단하게 다시 살펴 보겠습니다

XML의 뷰에 직접 적용된 것은 먼저 사용됩니다 여기에서 속성을 변경하면 단일보기를 변경하십시오 스타일을 업데이트 할 수도 있습니다 따라서 스타일에 속성을 설정하면 이 스타일은이 스타일을 사용하는 모든보기에 영향을줍니다 스타일에 정의되지 않았거나 스타일이 설정되어 있지 않은 경우, 기본 스타일로 돌아갑니다

그래서 여기에서, 당신이 길을 바꾸고 싶다면 전체 구성 요소 그룹이 보입니다 기본 스타일을 설정할 수 있습니다 마지막으로 속성이 다른 곳에 정의되지 않은 경우, 테마를 살펴볼 것입니다 Material Theming이 정상적으로 작동하는 방식 최상위 수준의 속성 집합이 있습니다 당신은 타이포그래피, 색, 모양 등등

또한 모든 구성 요소의 기본 스타일입니다 그러나 더 세분화 된 제어가 필요한 경우, 당신은이 층들 중 어느 곳에서나 연결할 수 있습니다 단일보기의 색상 만 변경하고, 또는 특정 구성 요소 전체의 색상 만 표시 할 수 있습니다 여기에 우리의 Chip 스타일 라이브러리 예제가 있습니다 테마 속성을 참조하는 몇 가지 값을 정의합니다

그리고이 디자인의 힘은 사실에서 나온 것입니다 우리 도서관의 다른 스타일들이 참고할 수있는 것들 이 같은 속성 여기에 Button의 예제가 있습니다 그리고 이것들 둘 다 같은 모양의 외관을 가지고 있습니다 이것은 작은 컴포넌트 모양 모양입니다

즉, 우리가 룩을 업데이트하고자한다면 이 모양에 대한 우리의 응용 프로그램의 느낌 – 이 작은 구성 요소들에 대해서는 우리가해야 할 모든 것 이 속성을 테마의 한 위치에서 업데이트합니다 그리고 우리는 당신에게 그것을 조금하는 방법의 예를 보여줄 것입니다 각 테마 속성의 효과는 무엇입니까? 불행히도, 그것은 완전히 간단하지 않습니다 우리는 의미있는 방식으로 테마 속성을 적용하려고합니다 그러나 그것은 확실히 가능합니다

서로 다른 색상의 값을 선택합니다 같이 잘 어울리지 않을 수도 있습니다 아마 각 구성 요소에 대해 materialio를 확인해야합니다 어떻게 반응하는지 볼 수 있습니다

그러나 가능한 또 다른 간단한 것은 – 당신이 할 수있는 또 다른 간단한 해결책, 잠재적으로 디버그 테마를 만드는 것입니다 엉뚱한 값을 다른 속성으로 설정합니다 그리고 사물이 어떻게 보이는지보십시오 예를 들어 BottomAppBar 페이지가 있습니다 material

io 사이트에 있습니다 컨테이너 자체가 표면이라는 것을 알 수 있습니다 아이콘은 On Surface입니다 그리고 우리는 어떤 속성들에 대해서 이야기 할 것입니다 밖을 내다 볼 수있을뿐만 아니라 수정할 수 있습니다

다음 섹션에서 따라서 서브 시스템을 테마로합니다 우리는 현재 3 개의 테마 서브 시스템 인 Type, Color, 및 모양 그리고 이것들은 당신이 개발자로서, 앱을 테마로 조정해야합니다 다행히도 대부분의 사람들은 텍스트 출현에 익숙합니다

그러나 우리는 Material Theming, 테마 속성을 사용하여이 텍스트를 참조합니다 형세 다음은 툴바 예제입니다 이는 스타일이 아닌 Headline Six 속성을 사용합니다 직접

그리고 Body 1 속성을 사용하는 사본이 있습니다 이들은 우리가 정의한 유형 속성입니다 그래서 당신이 당신의 주제에서 이것들을 오버라이드한다면, 앱의 스타일과 모양을 설정할 수 있습니다 색상은 또 하나입니다 그리고 아마도 AppCompat Color에 익숙 할 것입니다

기본 및 색상 악센트 Material Theming의 경우, 우리는 더 넓은 범위의 색상을 가지고 있습니다 색상을보다 잘 제어 할 수 있습니다 앱의 다른 부분에 대해 확장 된 팔레트 색상의 의미 론적 이름입니다 Color Theming에서 작동합니다

맨 위에는 기본, 기본 변형, 2 차, 2 차 변형 그것들은 모두 브랜드 컬러입니다 그것들은 당신이 일반적으로 주제가되어야하는 것들입니다 앱 스타일 배경, 표면 및 오류 색상도 있습니다

스타일을 지정할 수 있지만 꼭 그렇게 할 필요는 없습니다 그리고 나서, On Primary, On Secondary– 색상의 변형에 관한 것 – 그들이 그릴 때 접근 가능해야한다 다른 색상 위에 그래서 예를 들어, On Primary는 원색 위에 그려 질 것입니다 따라서 위에 표시된 텍스트가있는 경우 기본 배경색은 기본 색상이어야합니다

이것들은 우리가 정의한 색상 속성입니다 새로운 것을 많이 볼 수 있습니다 우리는 AppCompat에서 나온 일부를 재사용하려고했습니다 그리고 우리는 우리가 사용하는 안드로이드 컬러 배경을 가지고 있습니다 그냥 일반 Android입니다

그 속성의 버전 모양은 당신이 테마로 할 수있는 또 다른 하위 시스템입니다 그리고 모든 것은 MaterialShapeDrawable에서 발생합니다 그래서 우리는 MaterialShapeDrawable 형상 가능한 구성 요소의 배경으로, 단추, 카드, FAB, BottomAppBar, BottomSheet, 칩, 등등 그리고 그것이 작동하는 방식은 모서리 및 코너 처리입니다

그래서 우리는 가장자리와 모서리 처리가 있습니다 둥근 모서리와 절삭 모서리에 대해 정의 된 거의 모든 버튼 또는 상호 작용 가능한 구성 요소입니다 당신이 찾을 수있는 그러나 당신은 언제나 당신 만의 것을 만들 수 있습니다 여기 코 틀린 코드의 예가 있습니다 둥근 모서리 처리를 정의합니다

그리고 그것을 MaterialShapeDrawable에 설정합니다 모든 것에 둥근 모서리를 적용하는 것 그리고 XML 버전도 있습니다 그래서 XML로하고 싶다면 우리는 Shape Appearance라는 새로운 속성이 있습니다 그리고 Text Appearance와 비슷합니다

여기에있는 속성은 코너 패밀리와 모서리입니다 크기 그리고 이것은 반경이 24dp 인 둥근 모서리로 설정됩니다 그리고 개별 구석을 무시할 수 있습니다 여기서는 왼쪽 상단을 재정의하는 것입니다

자르고 오른쪽 하단 구석에 구석 크기가 0입니다 XML에서도 동일한 작업을 수행 할 수 있습니다 한 가지주의해야 할 것은 우리가 Shape Appearance 여기에 오버레이, 기본적으로 동일한 것입니다 우리는 단지 속성을 정의한다 우리가 재정의하려는 따라서 테마 오버레이와 비슷합니다

즉, 소재가 버튼 자체는 기본적으로 모양 모양을 이미 가지고 있습니다 그리고 여기, 우리는 단지 좌상단을 설정하고 있습니다 오른쪽 상단 모서리가 0이되도록 dp로 자릅니다 다른 모든 것은 스타일에서 상속됩니다 버튼의 Material Theming의 핵심 아이디어 중 하나는 앱에 일관성을 부여합니다

그래서 우리는 이러한 모양 매핑을 정의했습니다 이들은 서로 다른 구성 요소 그룹입니다 앱의 일관성있는 모양을 유지하는 데 도움이 될 수 있습니다 모양을 통해 표면을 연결하여 느낌을 느낄 수 있습니다 따라서 작고, 중간이고, 큰 구성 요소가 있습니다

그리고 이것들은 당신이 당신의 테마에 설정할 수있는 속성입니다 따라서 모든 작은 구성 요소를 다시 정렬하려면 잘라낸 오른쪽 구석이나 다른 것을 가지고 있다면, 그렇게 할 수 있습니다 여기에 내가 말했던 것처럼, 우리는 작은 컴포넌트 스타일을 재정의하고 있습니다 그래서 우리는 작은 외양을 재정의했습니다 테마의 작은 컴포넌트 모양 모양 우리 스타일로

그리고 여기, 우리는 우상을 세울 것이다 그리고 우리는 여기에 부모를두고 있습니다 그래서 다른 모든 것을 상속 받게됩니다 다른 부분의 둥근 모서리 그림자는 우리가 언급하고 싶은 것입니다

볼록한 모양에 대해 기본 표고가 지원됩니다 API 21 이상을위한 롤리팝 사용 하지만 우리는 그림자를 모두 오목한 15의 API로 백 포트하고 있습니다 일반적인 경우의 볼록한 모양, 둥근 모서리 또는 절단 모서리뿐만 아니라 BottomAppBar의 경우 이것은 내부에 컷 아웃이 있기 때문에, 네이티브 쉐도우를 얻지 못할 것입니다 그래서 우리는 그라디언트로 그림자를 가짜로 만듭니다 GAUTHAM SAJITH : 이제 우리는 우리의 테마 서브 시스템에 대해 조금 들었습니다

앱에 실제로 적용하는 방법을 살펴 보겠습니다 다시이 시나리오로 돌아옵니다 이 AppCompat 앱을 적용하고 싶다고 가정 해 보겠습니다 이러한 테마 하위 시스템 중 그래서 우리는 무언가를 건설 할 것입니다

저렇게 조금 생겼어 그리고 분명히, 자신의 앱을 만들 때, 이보다 훨씬 더 아름답고 응집되어 보일 것입니다 그러나 우리는 우리만큼 많은 손잡이를 조정하고 있습니다 우리가 만든 기능의 일부를 보여줄 수 있습니다 그래서 당신이해야 할 첫 번째 일은 AppCompat Light No Action Bar 테마를 사용하는 경우, 머티리얼 구성 요소 테마로 전환 할 수 있습니다

이 경우 Bridge 테마를 사용하고 있음을 알 수 있습니다 이러한 구성 요소를 사용하기로 선택하기 때문에 하나씩 하지만 일반적으로 전체 테마, 일반 테마, 다리를 시험해보기 전에 먼저 어떻게 보이는지 보아라 테마 그러니 가장 먼저하는 일은 당신은이 테마 색 속성을 설정합니다

그래서 당신이 이미 알고있는 기존의 것들 중 일부 색상 1 차 및 색상 2 차입니다 그것들은 여전히 ​​존재합니다 그런 다음 새로운 테마 색 속성 중 일부 (예 : 색상) 1 차, 2 차, 컬러 서피스 및 컬러 서페이스 또한 설정됩니다 이 Color Secondary가 실제로 어디에도 나타나지 않습니다 귀하의 애플 리케이션에 아직,하지만 그렇게됩니다

다음으로 우리가하고 싶은 일은 머티리얼 버튼을 얻는 것입니다 그래서 우리는 AppCompat 버튼을 사용하기 전에 그리고 나서 테마에 Material Button 스타일을 설정하면, 모든 버튼이 머티리얼 버튼으로 바뀌어야합니다 XML 태그를 변경할 때 앞에서 언급했듯이, 전체 테마를 사용하고 있다면, 이 인플레이션은 자동으로 발생합니다 따라서 실제로이 XML을 전혀 변경하지 않아도됩니다

우리는 다른 기본 스타일들을 가지고있다 우리가 여기에 제시 한 것 모든 구성 요소에는 기본 스타일이 있습니다 테마로 설정할 수 있습니다 일반적으로 구성 요소 이름과 스타일에 불과합니다

예를 들어, 카드 스타일을 설정하려면, 테마에 Material Card View Style을 설정합니다 그리고 나서, 우리는 카드보기를 변경해야합니다 이 경우 XML의 Material Card View로 이동하십시오 그리고 나서 우리는 몇 가지 속성을 적용 할 것입니다 이 카드들에

예를 들어, 카드 높이, 스트로크 색상, 및 획 폭 그리고 그것은 모든 카드에 표시됩니다 기본 스타일을 설정하기 때문입니다 모든 카드는이 기본 스타일을 봅니다 그리고 기지를 바꾸고 싶다고 해

모든 버튼의 스타일 당신은 당신 자신의 Button 스타일을 정의하고 그것의 부모를 설정할 것입니다 기본 스타일 중 하나 인 아웃 라인 버튼으로 그러면 모든 단추가 개요 단추로 변경됩니다 이제 모든 버튼에 모양 테마를 적용 할 수 있습니다 그래서이 모양을 정의 할 것입니다

모양 모양 버튼 스타일 그리고 그 버튼 스타일에서는 오른쪽 모서리를 자르고 왼쪽 모서리를 설정하려면 반올림 그리고 코너 크기를 설정합니다 그리고 이제, 당신은이 화살 모양의 버튼을 가지고 있습니다 또한 Shape Appearance Overlay를 사용하여이 작업을 수행 할 수 있습니다

버튼에는 기본적으로 둥근 모서리가 있기 때문입니다 당신은 둥근 것을 설정할 필요가 없습니다 왼쪽 모서리 따라서 모양 모양 오버레이를 사용하는 경우, 당신은 변화하고있는 것을 설정할 수 있습니다 정상적으로 적용됩니다

그리고 나서, 우리는 아이콘 버튼을 갖고 싶다고 말합니다 이 아이콘 버튼 스타일을 정의 할 수 있습니다 패딩과 분 너비를 원하는대로 설정하십시오 그리고 이것을 XML로 직접 Button에 적용하고, 아이콘 및 컨텐트 설명을 설정할 수 있습니다 그리고이 공유 아이콘 버튼이 있습니다

그 공유 텍스트 버튼 BottomAppBar로 전환 할 수도 있습니다 그래서 BottomAppBar를 설정해야합니다 당신의 주제에 스타일 그런 다음 XML 레이아웃에서 최상위 앱 표시 줄을 제거하십시오

이 BottomAppBar를 여기에 추가하십시오 플로팅 액션 버튼을 추가 할 수도 있습니다 떠있는 동작을 추가하여이 BottomAppBar에 넣습니다 버튼을 레이아웃에 추가하십시오 그런 다음 Layout Anchor를 설정합니다

BottomAppBar의 ID를 가리키는 특성 이 FAB에는 AppCompat의 청록색이 있습니다 우리가 기본 부동 작업을 설정하지 않았기 때문입니다 버튼 스타일 한 번 설정하면 이제 그걸 볼 수 있습니다 컬러 보조 및 컬러 보조를 사용합니다

그리고 리플 효과도 있습니다 그런 다음 우리 카드의 내용에 대해 텍스트 스타일을 적용 할 수 있습니다 모든 텍스트를 Color On Surface, 이전에 있었던 것보다 우리는 소재 테마를 사용하려고합니다 오버레이, 잠시 후에 얘기하겠습니다

하지만이 소재의 테마 오버레이는 거의 해당 구성 요소의 모든 내용에 대한 테마를 설정합니다 따라서이 경우에는 Color Primary라는 텍스트를 설정합니다 Tertiary에서 텍스트의 색을 설정합니다 그래서 소재 테마 오버레이, 당신 Android 테마에 대해 들어 보셨을 것입니다 그것은 뷰의 하위 섹션을 스타일링 할 수있는 방법입니다

계층 그리고 이것의 한 가지 일반적인 사용법은 스타일에 있습니다 앱에서 어두운 색의 툴바라고 말하면됩니다 Android 테마의 단점은 기본 스타일에서는 작동하지 않습니다 예를 들어, 모든 카드 스타일을 지정하려면, 당신은 정말로 안드로이드 테마를 설정할 수 없습니다

따라서 소재 테마 오버레이는 속성입니다 우리가 정의한 것은 구성 요소가 지원하는 것입니다 기본 스타일로 작동합니다 그래서 이것을 기본 스타일로 설정할 수 있습니다 귀하의 구성 요소

그리고 구성 요소의 하위 뷰를 주제로 삼으십시오 마지막으로 TextAppearance 테마를 적용 해 보겠습니다 이전에는 제목에 하드 코딩 된 텍스트 모양이있었습니다 스타일 이제 우리는 새로운 TextAppearance로 전환 할 것입니다

속성 그리고 비슷하게, 본문도 마찬가지입니다 그리고 나서, 우리는 이것을 약간의 스타일에 적용 할 수 있습니다 예를 들어, Headline Six 예를 들어 코믹 샌즈가되기 위해서는 변경할 수 있습니다 앱에서 Headline Six를 사용하면 다음과 같이 보입니다

그렇다면 왜이 일을하는 데 문제가 있습니까? 최상위 속성을 사용하는 데 어려움을 겪는 이유 당신의 스타일 전반에 걸쳐? 이유가 뭐야? 그리고 일반적으로 우리는 이렇게합니다 앱 전체를 스타일링 할 수 있기를 원한다 이러한 최상위 속성 예를 들어, 팀원이 당신에게 다가 갔다고 말하십시오 "어이, 우리 브랜드의 색깔이 바뀌고있다 그래서 실제로 우리는이 블루스 대신이 적갈색을 원합니다

우리가 가진 것 "이라고 말했다 당신이해야 할 일은 이러한 최상위 색상 속성 중 하나입니다 그리고 당신의 전체 앱이 다시 열립니다 마찬가지로, 어두운 테마 또는 가짜 어두운 테마를 원한다면 일종의, 당신이해야 할 일은 변화입니다 이 두 가지 다른 색상 속성

그리고 구성 요소는 모두 적절하게 응답해야합니다 그리고 다른 모양의 앱이 있습니다 CAMERON KETCHAM : 이제 우리는 조금 이야기 할 것입니다 맞춤 구성 요소 및 만든 일부 구성 요소에서 스타일을 사용할 수 있습니다 방법에 관하여 진짜로 불가사의 한 아무것도 우리 구성 요소는 테마를 사용합니다

모든 기본적인 Android 테마입니다 따라서 구성 요소에서도 사용할 수 있습니다 기본 스타일을 만들어야합니다 그 기본 스타일 속성 전달하기 생성자에 입력하고 스타일 속성 가져 오기를 사용하십시오 그럼 그걸 살펴 봅시다

여기에는 테마 및 일부 속성에 대한 정의가 있습니다 여기에서는 기본 스타일 속성을 만듭니다 그것을 우리의 테마로 설정하십시오 그래서 우리는 내 사용자 정의보기 스타일을 가지고 있습니다 그리고 우리는이 widget

mycustomview 스타일로 설정합니다 우리는 우리 테마의 어딘가에서 정의했습니다 따라서 이것은 사용하는 모든 구성 요소가 이 내 사용자 정의보기 – 또는 이러한 내 사용자 정의보기는 기본적으로이 스타일을 사용합니다 또한 스타일을 지정할 수 있습니다 몇 가지 다른 속성

그리고 생성자에서 이들을 사용할 필요가 있습니다 다음은보기에 대한 생성자의 예제입니다 여기에서는 기본 스타일을 사용합니다 우리는 전에 만들었습니다 그리고 우리는 이것을 여기에 전달하여 그 밖의 아무것도 설정되지 않은 경우 기본 스타일을 선택할 수 있습니다

그런 다음 스타일 속성 가져 오기를 시작합니다 그리고 우리가 방금 만든 스타일러스를 전달합니다 원래의 스타일 속성뿐만 아니라 생성자에 전달됩니다 마지막으로 대체 스타일 인 속성을 찾기위한 최후의 수단으로 사용될 수 있습니다 그리고 나서, 그것들을 읽으십시오

이것이 구성 요소가 작동하는 방식입니다 그래서 당신은 분명히 스스로 할 수 있습니다 또한 사용 사례에 맞게 시스템을 확장하십시오 경우에 따라 더 많은 속성이 필요한 경우처럼, 당신은 그것들을 분명히 추가 할 수 있습니다 그것은 당신의 부분에 조금 더 많은 작업일지도 모른다

스타일을 업데이트해야하기 때문에 당신이 가진 모든 구성 요소 이러한 속성을 참조하기 위해 사용하는 경우, 우리가 작성한 구성 요소 그것들을 참조하지 않을 것입니다 그러나 당신이 그것을 필요로한다면, 당신은 확실히 그것을 할 수 있습니다 다음은 속성의 예입니다 그냥 만들어서 자신의 스타일로 정의하십시오 그런 다음 참조하십시오

테마에 정의한 다음 그것을 스타일이나 다른 곳에서 참조하십시오 그리고 지금, 우리의 과정에 대해 조금 있습니다 우리는 몇 가지 릴리스를했습니다 10은 7 월에 나갔다 – 7 월 20 일에 삭제되었다

그리고 그것은 잠시있었습니다 그러나 이제 Android X Jetpack 리팩터링 마무리로, 우리는 더 자주 석방 할 수 있습니다 지원 라이브러리에 묶여 있지 않기 때문입니다 그래서 우리는 우리의 방출을 가속화하려고 노력하고 있습니다 그리고 마침내 우리는 1

1 알파 1 10 월 31 일 잘라 그리고 우리는이 일을 더 자주하려고 노력하고 있습니다 적어도 한 달에 한 번 11 Alpha는 타입 테마, 컬러 테마, 우리가 말한 다크 테마 이것에 대해, 많은 버그 수정과 성능 향상 개량

향후 출시 될 예정인 내가 말했던 모양 주제를 가지고있는 것 11 Alpha에서는 Shape 테마 서브 시스템이 존재하지만, 실제로 구성 요소 중 어느 것도 응답하지 않습니다 그 주제 속성에 아직 그러나 다음 릴리스에서는 반드시 있어야합니다

우리는 대화 상자, 하단 시트 메뉴, 그런 종류의 것들이 모두오고 있습니다 그리고 문제를 제기하고 제출하는 한, GitHub은 코드가있는 곳입니다 따라서 당신이보기에 흥미있는 경우에, 그냥 GitHub에가 모든 코드를 살펴볼 수 있습니다 그것은 오픈 소스입니다

또한 GitHub에서 지침을 확인할 수 있습니다 버그 리포트를 제출하는 방법 우리는 무엇이 가장 잘 작동하는지 알아 내려고 노력 중입니다 지금 당장은 버그보고를하고 있습니다 이 issuetracker

google buginizer 구성 요소 그러나 우리는 다른 방법을 찾고있다 우리가 작업하고있는 것을 더 분명하게하기 위해서입니다 커뮤니티와 더 많은 것을 통합하려고합니다 여기 몇 가지 리소스가 있습니다

Materialio 사이트는 특히 Android 섹션에서 훌륭합니다 확실히 불화에서 우리를 확인하십시오 우리와 채팅하는 데 관심이 있다면, 또는 우리가 홍보를하도록 돕는 데 관심이 있습니다 – 무엇이든을위한 아이디어 와서 우리와 채팅하십시오

Stack Overflow에 태그가 있습니다 따라서 구현에 대해 질문이있는 경우, 너는 거기에 무엇인가 물어볼 수있다 우리는 그것을 지켜보고 있으며, 우리는 이에 응할 것입니다 그리고 우리는 몇 개의 코드 랩을 가지고 있습니다 이 GitHub 페이지에서 해당 코드 랩에 대한 링크를 찾을 수 있습니다

그리고 그것은 꽤 많이 있습니다 와줘서 고마워 GAUTHAM SAJITH : 감사합니다 [박수 갈채] [음악 재생]

Android app development tutorial #19( Android Xml Layout Design-2 )

지금 당신 당신 당신 좋아, 내 레이아웃 섹션 꿀벌 n을 완료했습니다 그리고 당신은 사용자가 볼 수 있습니다 섹션 리사이클 러가있는 내부 레이아웃을 제공했습니다

보기와 하나의 진행 막대가있는 리사이클 러 뷰는 모든 사용자 목록 괜찮아요받는 사람 메시지에서 여기 한 사람은 상대입니다 레이아웃은 부모 레이아웃이고 내부는 선형을 제공합니다 방향이 수평이고 내가 제공 한 안쪽의 레이아웃 오리엔테이션이 수직 인 또 다른 선형 레이아웃과 체중 중 하나는 영점 5이고 다른 하나는 괜찮습니다 편도 선형 레이아웃은 x에 대한 텍스트보기를 유지하고 다른 하나는 메시지는 괜찮아요

나는 배경을 chat background 이것은 드로어 블 내부에서 생성 한 셰이프입니다 폴더 괜찮아요 및 발신자에 대한 동일한이 차이를 한 적이 있다는 것입니다 그 부모의 끝은 부모의 오른쪽에있는 정렬이다 그것은 수령인에게 당신이 왼쪽에 부모 정렬을 볼 수 있다고 말했고 모든 것이 동일하고 단지 배경이 다른 것입니다 솔리드 및 솔리드 컬러 나는 사용하지만받는 사람 섹션에서 나는 획을 긋고 내가 제공 한 사용자 프로필에서 여기 상대 레이아웃과 동일하고 하나의 원형 이미지보기 내부 내가 평소에 가지고있는 외부의 Gradle 파일이고 텍스트보기입니다 사용자 이름을 보유하고 다른 사용자 이름은 텍스트보기로 연결되었거나 사용자의 상태를 볼 수 있습니다

그것은 오늘날 우리의 개요 인 온라인입니다 그래서 오늘 그 사람들이 업로드하고 있습니다 소스 코드도 그래서 내 설명에 소스 코드의 링크를 얻을 수 있습니다 그것은 오늘입니다 그리고 우리는 다음 강의로 계속 진행할 것입니다 내 채널을 더 구독하십시오

당신

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) 런던에서 우리를 방금 떠났습니다

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

Software Engineering Design Patterns in Java & Android: Welcome ‘2017

모두 다 잘됐다 내 이름은 Oum Saokosal입니다

오늘 저는 Design Patterns라는 새로운 코스 시리즈를 발표하게되어 너무 흥분됩니다 혼동하지 말고 소프트웨어 엔지니어링의 일부인 소프트웨어 디자인 패턴입니다 UI 디자인 패턴을 통해 사용자 인터페이스 및 사용자 경험을 디자인하는 방법에 중점을 둡니다 사용하기 쉽고 친절합니다 여기 소프트웨어 공학과 함께, 디자인 패턴은 소프트웨어를 만드는 것에 관한 것입니다

재사용하기 쉽고, 유연하고, 느슨하게 결합 할 수 있습니다 그러면 디자인 패턴은 무엇입니까? 글쎄, 당신은 객체 지향 프로그래밍을 알고 있죠? C ++, C #, Java, Python, PHP 6, Ruby, Swift와 같은 목록이 계속 있습니다 사람들은 다시 만들 수있는 하나의 클래스를 가질 수 있기 때문에 OOP가 멋지다고 말합니다 당신이 좋아하는만큼 많은 물건 부모 클래스에서 멋진 메소드를받을 수있는 상속 기능이 있습니다

글쎄, 많은 수업이 많은 일을 할 수 있고, 많은 수업을 수업 그리고 당신도 알다시피, 그것은 엉망입니다 그것은 자유지만 어쩌면 너무 많은 자유입니다 어떻게 제어 할 수 있을까요? 규칙과 결합하는 법? 클래스에서 많은 클래스를 호출하는 방법? 사물을 숨기는 방법? 수업을 다른 수업에 연결하는 방법? 콜백하는 방법? 많은 질문은 Design Patterns에서 대답 할 수 있습니다 이 질문들에 대한 대답은 하나도 아닙니다

그것이 디자인 패턴에 s가있는 이유입니다 실제로 Gang of Four에는 23 개의 디자인 패턴이 있습니다 디자인 패턴은 4 명의 소프트웨어 엔지니어 나 컴퓨터 괴짜가 만들어 냈습니다 Erich Gamma (Gang of Four)로도 알려져 있습니다 이제는 모두가 4 가지 디자인 패턴의 갱 (Gang of Four Design Patterns)이 될 것입니다

코드의 독창성은 C ++과 스몰 토크 (Smalltalk)로 작성되었습니다 그들이 쓴 책은 요즘까지도 관련성이 있고 인기가 있습니다 나는 그것이 결코 날짜가 없다고 믿습니다 왜? 프로그래머가 OOP 패러다임을 여전히 사용하는 한, 디자인 패턴은 결코 사라지지 않기 때문입니다 이 시리즈에서 공부할 패턴은 무엇입니까? 글쎄, 계속하기 전에 내 채널을 구독하고 그 채널 옆의 벨을 클릭하십시오

구독 버튼을 클릭하면 좋은 자습서를 놓치지 않습니다 이 코스 시리즈가 훌륭하다고 생각한다면 링크 버튼을 누르십시오 확인했는데 아직 구독 했습니까? 글쎄, 나는 기다릴 수있다 승인 처음에는 대부분의 프로그래머가 반드시 알아야하는 10 가지 가장 인기있는 디자인 패턴부터 시작하겠습니다 알고있다 그것들은 다음과 같습니다 : 1 싱글 톤 2

공장 공장 방식과 초록 공장 3 빌더 4 관찰자 5 어댑터 6 전략 7

명령 8 반복자 9 복합 재료 10 프록시 그런 다음 나머지 디자인 패턴을 계속 진행할 것입니다 이 자습서에서는 자바 프로그래밍에 대해 더 많이 알고 있기 때문에 Java 프로그래밍 언어로갑니다

다른 언어보다 더 좋으며 내 채널 이래로 안드로이드 개발자들에게도 좋을 것입니다 Android에 관한 것입니다 그러나 이러한 기술은 사용자가 선호하는 프로그래밍 언어에 적용 할 수 있습니다 어떻게 생각하니? 내가 원하는 디자인 패턴은 무엇입니까? 아래의 설명 섹션에서 알려주십시오 다시 한 번 내 채널을 구독하고 알림을 클릭하는 것을 잊지 마십시오

벨 내가이 게시 언제든지이 튜토리얼을받을 수 있습니다 고마워요, 제 이름은 Oum Saokosal입니다 그리고 다음 비디오에서 만나겠습니다

5 Design Tips for Mobile App UI (2018)

전문 모바일 앱 UI를위한 5 가지 디자인 팁 앱을 만드는 것만으로 코드를 작성하는 것뿐만 아니라 인기 있고 사용하기 쉬운 앱을 만들기 위해 많은 노력을 기울여야합니다 전문 사용자 인터페이스를 만들기위한 5 가지 디자인 팁 1 번 – 인터페이스를 간단하고 신속하게 유지하십시오

사용자가 즉시 수행 할 작업을 알기가 어려울 수 있습니다 내용으로 압도했다 각 화면을 간소화하여 사용자에게 필수 정보 만 보여줄 수 있습니다 앱 표시가 중요합니다 다양한 모바일 장치에서 일관되게 확장 가능 두 번째 – 요소 사이의 간격 고려 관련 항목은 함께 모호하지 않아야합니다

이로 인해 앱이 혼란스럽게 표시되는 것을 방지 할 수 있습니다 가독성을 높이기 위해 단어 사이에 충분한 간격을 두어라 3 번 – 일관된 색상 팔레트 사용 보충 색상 또는 유사한 색상으로 브랜드 스틱을 사용하는 경우 해당 색상 또한 서로 보완하는 단일 글꼴 또는 두 글꼴을 사용하는 것이 좋습니다 네 번째 – 네비게이션을 고려하십시오 사용자는 앱의 모든 부분에 손쉽게 액세스하여 한 가지 방법으로 달성 할 수 있어야합니다

이를 달성하는 한 가지 방법은 앱 전체에 존재하는 화면 하단의 버튼을 사용하여 일반적으로 사용되는 기능에 손쉽게 액세스 할 수있게하는 것입니다 좀 더 깔끔한 디자인을 원하면 햄버거 스타일 메뉴 번호 5를 선택하십시오 – 플랫폼 별 디자인 언어를 따르십시오 iOS와 Android는 공통된 디자인 가이드 라인을 가지고 있습니다 따라서 각 플랫폼의 휠 사용자가 앱 내에서 집처럼 느껴지도록 재촉하지 마십시오 예를 들어, IOS 아이콘은 평면 디자인을 사용하는 경향이 있습니다 반면에 안드로이드는 서명 재료 설계 지침을 사용합니다 조명과 그림자의 상호 작용과 같은 실제적인 영향을 사용합니다

전문 모바일 앱 UI를위한 5 가지 디자인 팁이 있습니다 모바일 애플리케이션을 만드는 경우 Zco의 개발 및 디자인 전문가가 귀하와 함께 일할 준비가되었습니다 Zcocom을 방문 하시거나 603-881-9200으로 전화주십시오

Android Design in Action: Responsive Design

로마 누리 크 : 안녕하세요 환영합니다

Android 디자인 실천 내 이름은 로마 누릭이야, 오늘 나랑 여기서 – 안녕 얘들 아, 아담 코흐 런던에서는 NICK BUTCHER : 안녕, Nick Butcher 오늘 쇼의 대부분의 날과는 달리 – 공연의 대부분의 화요일 – 우리는 실제로 될 수 없습니다 재 설계에 대해 이야기하기

그래서이 쇼를 한번도 본 적이없는 분들은 대개 지명 된 앱을 살펴보십시오 일반적으로 개발자는 자신을 지명합니다 우리가 스크린의 일부를 어떻게 다시 상상할 수 있는지 살펴 보겠습니다 Android 스타일과 더 잘 어울리는 앱에서 전반적인 사용자에게 더 나은 경험이 될 수 있습니다 그런 다음 개발자가 개발자에게 전달합니다

그들이 그것을 좋아하는지보십시오 그리고 그들이하는 경우, 때로는 그들은 변화를합니다 때때로, 그들은하지 않습니다 그리고 지켜보고있는 당신들에게는, 기본적으로, 개발자는 목요일에 다시 올 수 있으며 무엇을 알 수 있습니까? 그들은 쇼를 생각해 개발자 스트라이크 백 (Developer Strikes Back)은 개발자들이 스트라이크 백 쇼

그러나 이번 주에는 그 일을하지 않습니다 엄청난 기술적 인 실패 때문에 마운틴 뷰 (Mountain View)에있는 금요일 앱에 사람들을 괴롭혔다 우리는 약간 다른 접근법을 채택하기로 결정했습니다 오늘이 에피소드 그래서 오늘, 우리는 이야기 할 것입니다

반응 형 디자인에 대해 그럼 반응 형 디자인이 무엇인지 알아 보겠습니다 자, 여러 사람들을 위해, 이번이 처음입니다 반응 형 디자인의 개념을 들었다 그리고 Ethan Marcotte – 미안,이든, 내가 너의 이름을 잘못 예측한다면 – Ethan Marcotte는 몇 년 전 기사에서이 용어를 사용했습니다

반응 형 웹 디자인에 관해 이야기했습니다 기본적으로 여기에서 인용문을 볼 수 있습니다 기사에서 웹 사이트를 방문하여 그것은 어떤 매체를 가로 질러서도 비례합니다 전화, 태블릿, 브라우저, 다른 화면 크기 및 거의 모든 다른 장치 유형

따라서 단일 레이아웃이나 단일 콘텐츠를 취하는 것과 매체에 따라 확장되는지 확인하십시오 그렇다면 반응 형 웹 디자인은 초소형 간단히 말하자면 따라서 반응이 빠른 웹 디자인이 적용됩니다 모바일 앱도 포함됩니다 그리고 오늘, 우리는 반응하는 것에 대해 이야기 할 것입니다

디자인 및 Android 기기에 적용되는 방법에 대해 설명합니다 우리가 뛰어 들기 전에, Adam, Nick, 어떤 의견? 이견있는 사람? 니가 말했듯이, 우리는 반응 형 디자인인데, 이번 주에 정제에 초점 방법에 대한 품질 가이드 라인을 시작했습니다 고품질의 태블릿 응용 프로그램을 만드십시오 그리고, 나를 위해, 잘 비례하는 응용 프로그램을 가지고 거대한 다양한 기기에서 Android 풍경, 그 품질의 크고, 큰 부분입니다

그래서 저는 이것이 정말로 중요한 주제라고 생각합니다 ADAM KOCH : 내가 언급하고 싶은 한 가지 빠른 것은 만약 당신이 이런 반응에 대해 생각한다면 웹 디자인 또는 반응 형 Android 개발 Android 개발시 개발주기 시작 앱을 사용하면 태블릿 앱을 만들거나 디자인을 만들 수 있습니다 그저 다른 모든 것을 맞추기가 더 쉽습니다 거기 밖으로 스크린 따라서 처음부터 디자인하는 것보다 이 모든 것들에 대해 처음부터 생각해보십시오

정말 도움이됩니다 우리가 다시 뛰어 들기 전에 형식에 대해 조금이라도, 우리는 실제로 될 수 없습니다 개발 모범 사례에 대해 이야기합니다 우리는 몇 가지 교육 세션을 가지고 있습니다 실제로 어떻게하는지에 대한 developer

androidcom 이러한 개념을 구현하십시오 하지만 우리가 할 일은 기존의 앱을 밖에 있고 그들이 어떻게 대우하는지, 어떻게 구현하는지 보아라 이 반응 형 디자인, 어떻게 그들이 유동적으로 규모가 있는지 서로 다른 유형의 기기간에 그래서 뛰어 들자 먼저 캘린더를 살펴 보겠습니다

따라서 이것은 내장 된 달력 응용 프로그램입니다 Galaxy Nexus, Nexus 7, Motorola Zoom 그리고 이것은 화면을 만드는 예제입니다 새 일정 항목 여기 전화로 볼 때, 그리고 나는 잠시 동안 확대 할 것입니다

전화로, 당신은 일종의, 완료 취소를 볼 수 있습니다 기본적으로 액션을 대체하는 상단의 바 막대 및 다른 입력 필드 (예 : 캘린더, 이벤트 제목, 날짜, 시간, 그런 것들 꽤 전형적인 것들 그런 다음 Nexus 7에서 스위치가 전환 된 것을 확인할 수 있습니다 일종의 다중 열 레이아웃으로 왼쪽 열에는 다른 텍스트의 레이블이 있습니다

입력란 그리고 오른쪽에는 필드가 있습니다 그리고 나서 10 인치 태블릿을 가로 질러 – 나는 여기에서 확대 할 것이다 미안합니다 기본적으로 동일한 화면임을 알 수 있습니다 화면에 세로로 표시됩니다

단, 여백이 더 넓습니다 그래서 기본적으로, 그들은 그것을 결정했습니다 콘텐츠, 텍스트 입력란은 꽤 흔하지 않습니다 번호는 약 45 ~ 75 자입니다 그 이상을 결코 볼 수 없도록하십시오

줄 길이가 너무 길지 않도록 한 번에 그런 제약에 맞추기 위해 측면을 따라 여백 그래서 요점은 간단히 말해서 캘린더는 무엇입니까? 앱의 이벤트 만들기 화면이 표시됩니다 얘들 아, 그들이 한 다른 일에 대한 생각 응답이 좋다는 것을 확인하기 위해 정말로 여기에 있습니까? NICK BUTCHER : 아마 좋을거야 외쳐라 우리는 Holo에 관한이 쇼에서 많이 이야기합니다

안드로이드의 언어, Holo 시각 테마, 그리고 그것이 가지고있는 그것의 자신의 특정 편평한보기 및 느낌 그리고 그 이유가 무엇인지 말해주고 싶었습니다 그런 사고 방식의 사고 Android 용으로 선정되었습니다 그리고 저는이 스크린 세트가 정말로 여기에 있다고 생각합니다 Holo가 어떻게 사용자 인터페이스를 만드는 데 도움이되는지 보여줍니다

타이포그래피와 간격을 사용하여 멋지게 확장됩니다 적절하게 애플리케이션 구조를 제공하기 위해 이 세 화면에서 분명히 볼 수 있습니다 Chrome에 세분화 된 상자가 많지 않으며 그래서, 텍스트 상자 등등 그것은 정말로 콘텐츠를 정의하는 콘텐츠입니다 페이지의 구조

그리고 그것은 정말로 그것을 확장하는데 정말로 도움이됩니다 너는 많은 비트 맵을 가지고 있지 않다 자산 또는 그래픽 자산 또는 그라디언트를 장소 전체에 적용 할 수 있습니다 크기가 커질 때 이상하게 보일 수도 있고 실제로는 그렇지 않을 수도 있습니다 이 분야에서 당신을 도와주세요

그래서 나는 이것이 내 주요 테이크 아웃 중 하나라고 생각한다 캘린더 응용 프로그램에서 홀로가 실제로 도움이되는 방법입니다 이 응용 프로그램 밖으로 이러한 화면 크기를 통해 확장하십시오 ADAM KOCH : 나를위한 한 가지 중요한 점은, 여백에 흰 공백 – 어디 보자 전화로 볼 수 있습니다

공백이 있습니다 왼쪽과 오른쪽 Nexus 7에 올라가 보면 작은 공백 그런 다음 가로보기로 가면 확대됩니다 실제로 여기에 더 많은 공백이 있습니다

모든 것이 더 큰 화면 크기를 채 웁니다 로마 누리 크 (NANIK) : 창조 할 때 또는 여전히 그리드에 충실한이 여백을 정의해야합니다 그리고 Metrics 아래의 디자인 가이드에서 볼 수 있듯이 및 그리드 섹션에는 16-DIP 그리드 개념이 있습니다 및 48-DIP 리듬 따라서 16 DIPs의 증분을 사용하여 32 DIP 또는 48 또는 64, 여전히 레이아웃에 구조를 도입 할 수 있습니다

아주 작은 마진을 사용하는 것을 제한하지 않고 따라서 32 개의 DIP, 48 개의 DIP가 큰 용도로 사용하기에 좋습니다 장치 (예 : 태블릿) NICK BUTCHER : 네 이런 종류의 화면을 순진하게 구현하려면 입력 필드를 줄곧 늘렸다 10 인치에서보기 흉하게 보입니다

그래서 나는 그것이 당신의 스크린 디자인에 접근하고 있다고 생각한다 앱 디자인 그리고 만일 당신이 무모한 것을보고 생각하고, 이봐, 어떻게하면 더 넓은 디스플레이에서 볼 수 있을까? 예를 들어, 10 인치의 풍경과 마음에 품은 소개를 시작하려는 곳 이 마진 포인트 ROMAN NURIK : 그럼 다음 앱으로 넘어 갑시다 그러면 첫 번째 타사 앱이됩니다

우리가 보는 것 그리고 이것은 Pattrn입니다 닉, 패트 른 얘기 좀하고 싶니? NIC BUTCHER : 물론 이죠 그래서 Pattrn은에 대한 배경 화면을 찾기위한 훌륭한 작은 응용 프로그램입니다 당신의 장치 루카스라는 영국 개발자가 모질라에서 일하고 있습니다

그리고 나는 그들이 정말 훌륭한 일을 해냈다고 생각합니다 내용 적응 다행히도 그들에게는 꿈의 응용 프로그램이 거의 없습니다 콘텐츠의 패턴 화 된 시나리오 배경 화면 – 종횡비의 개념이 없다 그런 것

그들은 실제로 종류의 타일을 사용하므로 실제로 잘 작동합니다 다른 종횡비에 따라 변경 될 수 있습니다 일부 앱의 경우 일 수 있습니다 그러나 보시다시피, 우리가 보여주는 세 화면에서 여기, 전화로, 그들은가는 3 개의 탭에 의지하고있다 데이터의 세 가지 주요 관점을 통해 그러나 그들이 특정 시점을 넘어 더 많은 것을 가지고있을 때 공간, 그들은 실제로 그것을 탭에서 떼어 낸다

이 사이드 바를 가지고있는 것으로의 탐색, 나는 생각한다 정말 잘 지나치게 폭이 넓어지기보다는 내용을 스트레칭하는 것보다, 실제로는 더 쉽게 네비게이션을 제공 할뿐 아니라 더 많은 정보를 제공합니다 예를 들어 Nexus 7에서 볼 수 있습니다 최근 검색 서비스

그래서 한 번 가볍게 치기 만하면됩니다 검색 필드를 탭한 다음 최근 기록을 보면, 최근 검색, 정말 멋지 네요 다른 점은, 당신이 그 차이를 보았다면, 전화와 7 인치 태블릿은 실제로 텍스트 크기와 패딩이 조금 더 크게 암시 그 특정 크기에 더 편하게 느끼기 위해서 그리고– 미안 해요, 닉 그것은 태블릿에서와 같이 보입니다 넓은 마진

그것이 16 DIPs의 증가라면 우리는 얘기했지만, 분명히 더 큽니다 패턴의 왼쪽과 오른쪽 네, 그리고 제가 말할 수있는 마지막 것, 당신이 7 인치에서 10 인치로 나가서 사용할 수있는 공간이 늘어남에 따라 이러한 종류의 더 많은 잠재적 배경 화면을 보여주는 그리드보기 한 번에 화면에 따라서 콘텐츠를 다시 상상할 수 있습니다 내용의 표현

그래서 같은 내용이지만 완전히 뻗어서 다른 방법으로 공간을 훨씬 효율적으로 사용할 수 있습니다 ROMAN NURIK : 네, 그리고 저는 놓친 기회 그리고 이것은 아주 사소한 것이지만 핸드셋을 보면 풍경의 버전 – 여기에 스크린 샷이 없습니다 Lucas는 패턴에 단일 열을 사용합니다 그래서 그는 이미 다중 컬럼을 구현했기 때문에 그걸로 전환하는 것이 상당히 사소한 것처럼 보입니다

멀티 칼럼 – 가로로 2 열짜리 레이아웃 그렇게하면 효과가있을 것입니다 승인 그렇다면 다음 앱으로 넘어 갑시다 더 많은 댓글

코닥 : 단지 한 가지 질문입니다 실제로이 앱을 많이 사용하지는 않았지만 휴대 전화 버전의 유료 탭에서? [알아들을 수 없는] Nick : 나는 실제로 나 자신을 기억하지 않는다 나는 그것이 즐겨 찾기와 다른 것이라고 생각한다 그러나 그것은 둘 중 하나의 조합이었습니다

ADAM KOCH : 어떻게 생각해 볼 수 있을까요? 그들은 확실히 구조를 조금 바 꾸었습니다 핸드셋 버전만으로 3 가지 버전에 맞출 수 있습니다 표준 탭을 표시하고 여전히보기 좋게 만듭니다 네 좋아, 계속 가자

그래서 우리는 시간을 확인해야합니다 승인 그래서 다음 앱은 Pocket입니다 그리고 포켓은 사실 포켓이라고 불립니다 이전에 읽으십시오

포켓은 기본적으로 – 저장된 기사 목록입니다 따라서 RSS 피드를 탐색하고 싶지 않은 경우 지금 읽으십시오 그냥 꺼내서 Pocket에 저장하십시오 그리고 그들은 당신이 공유 할 수있는 의도가 있습니다 좋은 일

그래서 이것은 Pocket의 메인 스크린과 비슷합니다 저장된 기사 목록을 참조하십시오 그래서 당신은 전화로 볼 때, 그들은 간단한 목록을 가지고 있습니다 오른쪽에 미리보기 이미지가 있습니다 이제이를 7 인치 태블릿으로 확장하면 2 열 그리드를 만들고 가로로 바꾸면, 3 열 그리드가 있음을 알 수 있습니다

그리고 완전히 다르다는 것을 알게 될 것입니다 똑같은 내용이지, 그렇지? 단순하지 않고 타일보기와 비슷합니다 수평 선형 레이아웃 그리고 10 인치 태블릿을 보면 기본적으로 더 많은 인용문으로 졸업하고, 인용 부호를 붙이지 않으며, '잡지'레이아웃은 Google Play 클라이언트와 유사합니다 응용 프로그램은 다른 타일을 추천 섹션

그래서 나에게 흥미로운 점은 그들이 많은 일을했다는 것입니다 글꼴 크기를 조정할 수 있습니다 따라서 10 인치의 제목 크기가 태블릿은 7 인치 태블릿보다 약간 큽니다 그리고 그들이 기본적으로 이것을 구현했다는 사실 레이아웃을 세 번, 한 번은 목록으로, 다른 하나는 그리드보기로, 잡지 레이아웃의 단순화 된 버전 일 것입니다 오른쪽으로

그러나 그들은 또한 잡지 레이아웃을 가지고 있습니다 프레임 워크를 지원하지 않습니다 내가 알아야 할 것 중 하나는 조금 바람 피는 그들은 HTML5와 CSS3에서 WebView를 사용하여 레이아웃, 완벽하게 대단합니다 유일한 문제는 약간의 실적이 있다는 것입니다

처벌 – 음, 아마도 사소한 것은 아니지만 약간의 실적이 있습니다 관련된 벌칙 그러나 전반적으로, 그것은 멋지게 보인다 네, 그렇게 간단합니다 내가 언급하고 싶은 또 다른 점은 그들이 액션 바 같은

그리고 이것은 완전히 괜찮습니다 액션 바를 전환 할 필요는 없습니다 키가 크면 물건을 더 넓게 만들 수 있습니다 프레임 워크는 실제로 모든 것을 처리합니다 너의 아이콘을 약간 넓게 만들거야

약간 더 큰 바 그래서 당신을 위해 모든 것을 할 것입니다 이 경우, 나는 아마 그들은 아마 사용자 지정 작업 표시 줄, 그래서 거기 일어나지 않을거야 하지만 액션 바는 거의 동일합니다 태블릿 및 휴대 전화, 동작 및 거친 측면에서 크기

NICK BUTCHER : 내가 좋아하는 것들 중 하나 여기서도 끝내주는 것은 당신이 전화와 태블릿에서는 검색 우선 순위를 지정하고 검색 결과를 가져옵니다 콘텐츠 뷰 상단에서 바로 검색 할 수 있습니다 필터를 사용하는 반면, 태블릿에서는 저것을 강등했다 그렇게 덜 중요합니다 거기에 행동 오버플로가 있다고 생각합니다

정말 흥미 롭습니다 나는 그것이 그들이 어떻게 생각했는지를 보여주는 것이라고 생각한다 누군가이 응용 프로그램을 약간 사용하려고합니다 타블렛에서 다르게, 그들은 같은 내용을 가지고있다 사용할 수 있지만 다른 표현입니다

그들은 서로 다른 유스 케이스를 위해 디자인되어 있습니다 누군가가 더 많은 시간을 보내고 탐색 모드 ROMAN NURIK : 다른 의견이 있으십니까? 좋아요 그래서 계속 나아가 자구 나는 – 오, 아니, TED가있어

TED에 대해 이야기하십시오, Adam 예, TED 앱입니다 잘하면, 여러분 중 일부는 TED 앱과 모든 훌륭한 콘텐츠에 대해 잘 알고 있으며, 그들이 가지고있는 비디오 회담 따라서이 예제는 매우 간단하기 때문에 마음에 듭니다 미친 짓이나 복잡한 일을 할 필요가 없습니다

다양한 폼 팩터를 지원하고 멋지게 보임 여전히 기분이 좋다 따라서 세 가지 폼 팩터를 살펴보면 여기에 게시되었습니다, 당신은 초상화에 핸드셋있어 모드에서 상단에 큰 미리보기 이미지가있는 경우 아래쪽에있는 세 개의 하위 탭은 다른 것을 보여줍니다 해당 동영상과 관련된 조회수 그런 다음 Nexus 7로 이동하면 매우 유사합니다 그들은 약간의 공백을 추가했습니다 조금만 확대 해 봅시다

그들은 약간의 여분의 공백을 추가했습니다 탭도있다 그것은 흥미있다 하지만 그렇지 않으면 상당히 유사합니다 글꼴 크기를 약간 늘린 추가 공백 그리고 10 인치 경치로 이동하면 여기 저기 확대 해 보겠습니다

당신은 그들이 쌓인 것에서 벗어났다는 것을 알게 될 것입니다 그들의 파편을 나란히 놓아 두는 것 그러나 본질적으로, 그것은 같은 조각입니다 당신은 분명히 그들이 재사용했다고 말할 수 있습니다 거기에 같은 조각

동영상 미리보기 이미지의 흥미로운 점은 다음과 같습니다 그들은 제목을 투명한 오버레이에서 실제 비디오 아래에는 더 많은 공간이 있으므로 그들은 정말 멋진 비디오 축소판을 가져올 수 있습니다 그것을위한 약간의 공간을 할당합니다 얘들 아, 의견이 있으십니까? 로마 누리 크 (NANIK) : 화면의 전체 구조 Android에서 YouTube 재생 화면을 상기시켜줍니다

그리고 저는 그것이 실제로 좋은 일이라고 생각합니다 내 생각에 사용자는 Android 기기를 구입할 때 YouTube를 열면 즉시 익숙해집니다 어떻게 작동하는지 그리고 당신이 풍경, 전체 화면입니다 그들은 그것이 어떻게 행동하는지, 탭의 종류에 대해 매우 잘 알고 있습니다

휴대 전화 하단의 구조로 전환 할 수 있습니다 서로 다른 세부 사항들 사이 동영상에 대한 정보 그리고 태블릿에서, 그들은 기본적으로 다시 뭔가를합니다 YouTube와 매우 유사합니다 그들은 그것을 오른쪽으로 넘깁니다

그리고 이것은 뭔가를하는 자연스러운 방법과 거의 같습니다 당신이 가진 새로운 공간으로 그러나 나는 단지 그것과 비슷한 점을 추가했다 YouTube 앱을 사용하면 사용자에게 즉시 익숙해집니다 닉, 우리가 이사 가기 전에 다른 건 없니? NICK BUTCHER : 나는 그들이 훌륭한 일을 해냈다고 말한다 간격을 가지고 노는 것

나는 그들이 당신이 공간에서 명확히 암시하고 있음을 볼 수 있다고 생각한다 당신이 전화에서 7 인치까지 올라가서 그냥 느끼기 만하면 그 크기의 장치에서 훨씬 편합니다 그래서 당신이 할 수있는 일 이죠 7 인치 장치에 전화 레이아웃을 시도하고 생각, 이봐, 그 정도면 충분 해 그러나 그들은 실제로 실제로 말할 여분의 마일을갔습니다

그것은 조금 비좁은 느낌이나 약간의 혜택을 누릴 것입니다 여기에 더 많은 간격이 있습니다 그래서 그들은 정말로 더 많은 돈을 벌어서 다른 장치 크기 ADAM KOCH : 네, 그렇습니다 이 특정 화면의 가로 레이아웃을 핸드셋 장치

사실, 그들이 실제로 풍경을 가지고 있는지 확실하지 않습니다 핸드셋에있는 모든 화면 그러나 비디오 앱의 경우, 특히 비디오 디테일의 경우 이런 식의 스크린은 때로는 좋다고 생각합니다 사람들은 회전 할 때 비디오가 대신 전체 화면으로 재생됩니다 거기에 다른 곳에서 할 수있는 충분한 공간이 없습니다

그건 TED 야 좋아, 그럼 계속 가자 마지막 앱이라고 믿습니다 우리는 여기에서 속임수로 쓰고 있습니다 왜냐하면 이것은 앱이기 때문입니다

우리 모두가 작업 했어 이것은 Google I / O 2012 애플리케이션입니다 그래서 기본적으로,이 응용 프로그램, 당신이 회의에 참석한다면, 그것은 재생중인 세션을 볼 수 있습니다 개인화 된 일정을 만들 수 있습니다 또한 다른 장치간에 동기화됩니다

다시 말하지만, 멀티 디바이스 사용자에게는 여러 기기에서 원활하게 동기화 할 수 있습니다 그래서 우리가 여기서 한 것은 기본적으로 – 전화로는 그다지 수평적인 공간이 없습니다 그래서 우리는 서로 다른 핵심 부분에 대해 세 개의 탭을 가지고 있습니다 기능 그것은 상호 작용 측면의 일종입니다

Google+에도 참여중인 다른 사용자 회의 내 일정 또는 내 일정 목록 영역, 그리고 탐색 단계를 통해지도를 보거나 둘러 볼 수 있습니다 개별 트랙 그래서 우리가 여기서 한 흥미로운 점은 우리가 그것을 나눕니다 탭에서 여러 창으로 확대 할 수 있습니다

그래서 초상화에서, 실제로,이 두 장치 모두 – 7 인치 및 10 인치 장치 – 초상화에서, 그들은이 종류의 2 열을 보여줄 것입니다 레이아웃은 두 개의 창이 하나의 열에 쌓이는 방식입니다 그리고 풍경에서, 그들은 더 넓은쪽으로 전환합니다 3 열 레이아웃 7 인치와 10 인치의 주요 차이점 중 하나는 레이아웃은 여기서 여백이 7 인치는 16 DIP입니다

10 인치 크기의 태블릿에서는 32 DIP입니다 그리고 실제로 조금 더 숨쉴 공간이 생깁니다 이 10 인치 기기의 콘텐츠 그리고 다음 화면에서도이를 알 수 있습니다 그것을 얻으십시오, 이것은 간격의 감각을 추가하고 두 개의 콘텐츠를 분리하거나 여기에서 세 가지 다른 콘텐츠 어떤 생각? NICK BUTCHER : 아름다운 앱입니다

누가 이것을 설계 한 사람이 대단하니? [목을 가다듬 다] 로마 인 내가 언급 한 것을 잊어 버린 한 가지는 당신이 스크린 샷에서이 내용을 볼 수 없지만 전화를 건 드리면 실제로 16-DIP 분배기는 실제로는 빈 공간입니다 그 분배기는 회색 배경과 동일합니다 태블릿 그래서이 지역에

여러 장치가있는 경우 미묘한 힌트가 있습니다 이것들은 실제로 같은 화면의 일부입니다 내가 말했던 것처럼 당신이 전화를 미끄러지게 할 때, 당신은 그 회색을 본다 배경은 당신에게 다시 분리 감각을줍니다 코닥 ADAM : 마지막으로 한 가지

개인적으로 내가 좋아하는 한 가지 점은 태블릿에 있습니다 레이아웃, 각각의 제목의 정렬 정렬 다른 조각들, 그것은 단지 앱이 정말 멋지다고 느낍니다 그리고 로마가 말했듯이, 이런 종류의 패딩이 있습니다 거기에 다른 섹션 사이에 동일한 패딩 그리고 내가 기억할 수없는 작은 표식도있다 라고 불린다

ROMAN NURIK : What 's On 단편? ADAM KOCH : 예, What 's On 단편입니다 그냥 정렬 일뿐입니다 정말 좋네 모든 것이 실제로 일관되게 보입니다 ROMAN NURIK : 여기서 한 가지하지 못한 것은 사용법입니다

Roboto Thin 또는 Roboto Light, 아마도 우리가 가지고 있어야합니다 따라서 타이틀을 더 돋보이게 만들고 싶다면, 더 주목 해 나는 그것이 여기에 필요하다고 확신하지 않는다 그러나 너는 할 수있다 큰 포인트 크기와 Roboto Thin을 사용하여 우아한 느낌을줍니다

헤더를 각 창에 추가하십시오 자, 이제이 앱의 두 번째 화면으로 넘어 갑시다 기본적으로 세션 세부 정보 화면입니다 그래서이 경우처럼 특정 세션에 들어가면, Chris와 Ellie가 Android 앱에서 제공 한 세션 Google Play에서 발표 한 곳 새 게시자 콘솔 화면에 들어가면 많은 정보가 있습니다

내가 볼 수있는 행동, 내가 할 수있는 행동들 세션에 참여하고 싶습니다 예를 들어, 내가 추가하거나 제거 할 수 있습니다 일정 잡기, 사람들과 공유하기,지도보기, 그런 것들 여기에 +1 할 수 있습니다

그리고 저는 연사리스트를보고 더 많은 것을 배우고 싶습니다 크리스 또는 엘리, 그리고 몇 가지가 있습니다 링크는 하단에 있습니다 그래서 우리가 여기서 한 것은 이것이 하나의 스크린이라는 것입니다 음, 세션 세부 정보 및 세션 목록입니다

이전 화면 이것은 휴대 전화의 단일 화면이며, 반면 태블릿에서는 그것은 다중 창 레이아웃으로 결합됩니다 이것은 매우 일반적인 마스터 세부 레이아웃의 일종입니다 이는 거의 모든 시스템 앱에 사용됩니다 당신은 초상화에서 그것을 볼 것입니다 – 여기서는 실제로 볼 수 없습니다 우리는 애니메이션이 필요합니다

우리는 이것을 보여줄 멋진 기술이 없습니다 그러나 초상화에서, 그것은 미끄러짐 스크린의 종류 다 상호 작용을 시작하면 왼쪽 패널이 축소됩니다 오른쪽 세부 정보 창이 있습니다 그런 다음 위로 버튼을 누르면 다시 슬라이드됩니다

또는 화면에서 실제로 움직이는 것입니다 그리고 풍경에있는 10 인치 태블릿에서 우리는 사용 가능한 공간이므로 축소 동작이 필요하지 않습니다 항상 눈에니다 어떤 생각이나, 얘들 아, 우리가 지적해야 할 다른 것? NICK BUTCHER : 저는 여기 7 인치 치료법을 정말로 사용합니다

같은 것을 가질만큼 충분히 넓지 않은 곳 당신이 10 인치에 가지고있는 디스플레이, 모든 정보가 화면에 영구적으로 표시됩니다 따라서 슬라이딩 인 / 아웃 기능이있는 멋진 솔루션입니다 당신은 화면에 둘 다 가지고 많은 장점 나는 사이의 빠른 상호 작용을 좋아한다 현재 세션을 전화로 할 필요없이, 어디서 계속 올라가고 내려야 만할까요? 다른 인접한 일정을 참조하십시오

그래, 내가 좋아하는 한 가지 사소한 일은 이 링크와 관련된 개념이 있습니다 특정 세션 따라서이 세션은 가을 세션과 관련된 동적 링크입니다 아래 핸드셋에서 – 내가 확대 할 수 있는지 보자 Nexus 7 버전 그러나 만일 당신이 풍경의 10 인치의 버전에 간다면, 대신 콘텐츠와 함께 일종의 가을을 볼 수 있습니다

그래서 NICK BUTCHER : 네, 그건 자연스러운 방법을 제공합니다 여백 포인트 또한, 그래서 세부 사항을 얻을하지 않습니다 와이드, 내 생각 엔

ROMAN NURIK : 여기 자연적인 점 중 하나는 텍스트 길이와 공백에 관한 것입니다 크고 넓은 스와 스를 최소화하기 위해 최적화하고 싶습니다 화면에는 아무 것도없는 공백이 있습니다 다음 중 하나를 따라 정보를 보내지 않으려 고합니다 화면 가장자리 또는 모서리

그리고 내가 선 길이에 관해 말한 것처럼, 특정 수의 문자를 중심으로 실제로 최적화 한 줄에 하나씩, 왜냐하면 더 크고 조금 덜 쉽기 때문입니다 눈으로 보아라 다음 줄로 이동하십시오 그리고 조금 더 작아 지 더군요 그것은 신문과 비슷합니다

한 줄에 2 ~ 3 단어 만 있으면 정말 지루해지다 긴 텍스트 조각 그래서 실제로 최적화 포인트 중 하나입니다 텍스트 자체를 매우 쉽게 읽을 수 있고 공백이 충분하게 채워진다 내가 지적하고자했던 마지막 한 가지는 단지 일반적인 것입니다

이것들에 걸친 스레드 – 당신은 녹색 배경은 트랙의 브랜딩을 유지합니다 여기에 작업 표시 줄 아이콘이 있습니다 안드로이드를보고 있음을 나타 내기 위해 초록색의 녹색이 표시됩니다 그리고 나서 초록색은 다른 태블릿 괜찮아

그래서, 마지막 절로 넘어 가자 4 분 남았 어 와, 시간이 없어, 얘들 아 정말 끝내주는 군 4 분 남았으니 안드로이드에 뛰어 들자

디자인 뉴스 그래서 뉴스의 첫 번째 비트 – 그리고 이것은 정말로 뉴스가 아닙니다 사람들에게 거짓말해서 미안해 이것은 실제로 Kirill Grouchnikov의 기사입니다 엔지니어 중 한 명이 Google의 인기있는 앱 중 하나입니다

그는 반응 형 모바일 디자인에 대한 일련의 기사를 저술했습니다 그것들은 개발자가 집중하는 것 같아요 서로 다른 전환점에 대해 많은 관심을 기울여야합니다 Nick이 암시하는 바와 같이 마진 포인트와 어떻게 만들었습니까? 그 결정들, 그리고 그 근본적으로 그것이 어떻게 영향을 미치는지 태블릿에서의 다른 레이아웃 조금이라도 1 년이 조금 지나면주의해야합니다

따라서 사고의 일부는 이전 버전이거나 우리의 현재 디자인 사고의 전신입니다 그러나 반응 형 모바일 디자인은 놀라운 인트로입니다 계속 전진 해 닉, 네가 생각한다 NICK BUTCHER : 예, 환상적입니다

우리가 2 주를 보았던 응용 프로그램 중 하나 보기 용 응용 프로그램 인 Glimmr이라고하는 Flickr의 사진 그리고 개발자 인 Paul Bourke에게 좋은 직장을 말하고 싶습니다 누가 디자인을 가져와 이미 구현했는지 너는 그 전후에 변화를 볼 수있다 첫 번째 화면

그래서 더 이상 단순한 로그인은 아니지만 실제로 그는 처음부터 일부 콘텐츠를 보여 주며 정말 좋네 나는 그가 훌륭한 직업을 가졌다 고 생각한다 잘 했어, 폴 네, 그렇습니다 잘 했어, 닉 초기 디자인에 영감을 불어 넣었습니다

다음은 The Verge입니다 닉, 그 얘기하고 싶니? 네, 물론 이죠 그래서 The Vertge, 인기있는 가제트, 저의 가제트 뉴스 사이트는 방금 Holo 재 설계를 완료했습니다 그래서 여기에서 볼 수 있습니다 그들은 Holo의 외관과 느낌이 브랜딩에 반영되는 동안 꽤 성공적으로, 나는 느낀다

그래서 일반적으로 정말 좋은 직장입니다 애플리케이션의 탐색과 관련된 몇 가지 문제 하지만 그들은 좋은 직장을 꾸 렸고 나는 또한 정말 기쁩니다 서랍 내비게이션 사용 패턴은 꽤 정확하게 그래서 그것은 매우 좋다

다음은 ActionBarSherlock입니다 그리고 이것은 개발자들에 더 초점을 맞추고 있습니다 하지만 ActionBarSherlock은 매우 유명한 도서관입니다 제이크 와튼 액션 바를 모두 사용할 수있는 라이브러리입니다

허니컴을 가지고 있지 않은 장치에 대한 영광 아이스크림 샌드위치는 아직 – 예를 들어, 진저 브레드 장치 그리고 최신 버전 – 버전 42 – 덧붙여 나는 이것이 예비적인 지원이라고 믿는다 SearchView 따라서 SearchView를 중심으로 디자인을 진행하고 있다면 진저 브레드를 지원해야합니다

이것은 좋은 방법 일 수 있습니다 보기를 백 포트하십시오 그리고 나는 그것이 이번 주에 있다고 생각합니다 나는 우리가 1 분 일찍 생각한다 그러나 다시 한번 튜닝에 감사드립니다

다음에 우리가 실제로있을 곳을 보길 바랍니다 검토 된 동영상 플레이어 앱의 재 설계 이번 주 금요일, 앱 클리닉에서 믿습니다 다시 한번 감사드립니다 언제나처럼, 나는 Roman Nurik입니다 아담 코흐 : 아담 코흐

닉 부처 (Nick Butcher) 서명 해 나중에 보자 고맙습니다, 얘들 아 안녕

[음악 재생]

Android Performance Patterns: Android UI and the GPU

콜트 맥안리스: 좋은 앱을 만들기 위해서는 내부적으로 어떻게 작동되는지 알고 있어야 하지요 하드웨어 레벨에서 어떻게 돌아가는지 모른다면 효율적인 앱 만들기는 영 힘들겁니다

저 콜트 맥안리스가 앱 렌더링에 대해 알려드리죠 안드로이드가 GPU를 어떻게 사용하는지 안다면 앱 실행 상의 문제를 해결하는데 큰 도움이 되지요 가장 중요한 문제는 앱의 작업 결과가 스크린에 어떻게 보여지느냐 골치아픈 XML과 여타 마크업 언어가 유저가 보고 바로 이해할 수 있는 픽셀로 어떻게 전환되느냐 하는 것이죠 래스터화, 흔히 이미지화라고 하는 프로세스 덕분에 가능한 것인데요 문자열이나 버튼이나 패스나 각종 형태를 그러니까, 하이 레벨 언어의 오브젝트를 텍스쳐나 화면의 픽셀로 바꾸는 겁니다

문제는, 래스터화는 시간을 무지하게 잡아먹는 프로세스입니다 그래서 그 과정을 좀 더 빠르게 해주는 하드웨어가 기기 안에 들어있죠 그래픽 처리 유닛, 줄여서 GPU 90년대에 보급이 시작됐는데요 래스터화를 가속시켜 줍니다 GPU 자체는 기본 자료형, 주로 폴리곤과 텍스쳐를 써서 이미지를 나타내죠 이걸 GPU가 스크린에 그릴 수 있게 앱의 작업 결과를 넘겨 주는 게 CPU다 이거죠

안드로이드에서 이걸 하는게 오픈GLES라는 API인데요 앱 UI에 버튼이나 패스나 체크박스 등 오브젝트가 화면에 그려져야 할 때는 먼저 CPU에서 폴리곤과 텍스쳐로 변환, 그런 후에야 GPU에 넘겨져서 래스터화가 됩니다 그리고, 아마도 짐작하시겠지만 이 UI객체를 폴리곤과 텍스쳐로 전환하는 과정은 절대 빠를 수 없는 작업입니다 CPU에서 GPU로 넘겨주는 것도 시간걸리는 일이고요 그럼 오브젝트를 전환해야 하는 횟수와 CPU와 GPU간의 넘겨주기의 횟수를 최소화하는 게 답이죠

참 다행스럽게도,오픈 GLES API는 GPU에 자료를 보내고 보존할 수 있게 해줍니다 만약 똑같은 버튼을 다시 쓴다 하면 이미 GPU의 메모리에 메시가 있으니 오픈GL에 그리는 방식만 지정해 주면 됩니다 그러니까 기본 룰은, GPU에 데이터를 최대한 많이, 빠르게 보내고, 거기 놔둬요 최대한 오랫동안 데이터 수정이 없도록 GPU에 이미 있는 데이터를 다시 보내면, 시간만 잡아먹는 게 되잖아요? 안드로이드 시스템은 효율적인 렌더링에 목숨걸었습니다

예로 들면, 앱에서 쓰는 리소스는, 비트맵하고 나머지 그릴 거 말입니다 하나의 텍스쳐에 합해져서 GPU에 자동으로 넘겨지죠 동시에 9-패치 같이 자주 쓰이는 폴리곤 메시도요 이미 넘긴 리소스를 쓰는 화면을 그릴 때마다 폴리곤 전환을 할 필요가 없어요 그러니까 이미 GPU에 데이터가 다 들어 있어서 화면 그리기가 정말로 빨라지는거죠 하지만 UI 객체가 더 복잡해질 수록 이 프로세스도 복잡해집니다 예로 들면, 이미지 띄우는 건 CPU에 있는 이미지를 메모리로 옮겨서 다시 GPU로 넘겨주고 그리게 하는 건데요

여기서 패스를 쓰면 CPU에서 폴리곤을 줄줄이 만들어줘야 할 수도 있어요 악몽입니다 아니면 그 형태를 마스킹하는 폴리곤을 GPU에서 만들어야 하죠 텍스트 렌더링은 생각하기도 무서운데요 CPU는 문자를 텍스쳐로 래스터화해서 그걸 GPU에 보내줘야 하고 그걸 문자열의 문자 수만큼 반복해야 하죠

GPU 메모리에 있는 문자를 사각형으로 렌더링하게요 애니메이션은 이걸 여기서 더 꼬이게 합니다 그러니까, 비쥬얼을 어떻게 바꾸느냐에 따라서 GPU의 데이터를 새로 처리하는 코스트를 프레임 하나 하나마다 계속 계속 부담할 수 있습니다 이건 GPU 문제의 빙산의 일각인데요 안드로이드는 매 프레임마다 앱 화면을 전체를 갱신할 필요 없이 실제로 변경된 부분만 새로 그려서 발생 부담을 획기적으로 줄여 줍니다

물론, 안드로이드가 해야 하는 래스터화 전 CPU의 전환이나 넘겨주기 작업도요 하지만 여기서 주의할 점이 있습니다 유저가 앱을 순조롭게 사용하려면 코드 갱신, GPU 데이터 갱신 그리고 렌더링까지 매 프레임 16 밀리세컨드 그 안에 해내야 합니다 적어도 목표는 그러하니까 이 안드로이드 퍼포먼스 패턴 시리즈 나머지를 보셔서 앱의 렌더링이 매끈하게 흘러가도록 하셔야 하는 거죠 그리고 저희 구글+ 커뮤니티에 들리셔서 개발자 분들의 팁이나 충고 보시는 것도 잊지 마시고요 그리고 항상 침착하게, 코드는 단정하게 실행은 효율적으로, 잊지마세요