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) 서명 해 나중에 보자 고맙습니다, 얘들 아 안녕

[음악 재생]