Chromium Gerrit의 새로운 커밋은 Google Material Design 언어의 새롭고 향상된 버전일 수 있는 "Material Design 2"를 참조하는 것으로 보입니다.
Android Lollipop과 함께 출시된 통합 디자인 언어인 Material Design은 평면적인 파스텔 색상 팔레트, 깊이, 부드러운 조명, 사실적인 물리학을 특징으로 합니다. 스큐어모피즘에 의존하지 않고 실제 물체의 촉감을 모방하기 위한 것입니다. 구글은 이를 기술의 "혁신과 가능성"과 "고전적인 원리"의 종합으로 설명합니다.
머티리얼 디자인은 2014년 데뷔한 이후 YouTube, Chrome, Gmail, 행아웃, Google 캘린더와 같은 Google 앱은 물론이고 Android 생태계 전반에 산불처럼 퍼졌습니다. 플로팅 액션 버튼, 기분 좋은 색상, 고도화 기술이 재료 구성 요소 라이브러리 GitHub(Android의 디자인 지원 라이브러리 및 Google의 웹 중심 Material Design Lite의 후속 버전)에서 Material의 Android에서는 사용자 정의 보기 형식으로, 웹에서는 표준 HTML처럼 가져오고 사용할 수 있는 번들 형식으로 제공됩니다. 태그.
이제 머티리얼 디자인 4주년을 앞두고 Google은 차세대 머티리얼 디자인을 준비하고 있는 것으로 보입니다. 종이와 잉크에서 영감을 받은 미적인: 머티리얼디자인2. 이번 주 Chromium Gerrit의 새로운 커밋에서 그 존재를 발견한 Material Design 2에 대한 귀중한 정보가 공개적으로 제공됩니다. 우리는 그것이 다음과 같다고 주장하지 않습니다. 적절한 최신 머티리얼 디자인 프레임워크의 후속 제품이지만 커밋은 색상 팔레트, 아이콘 및 터치스크린 동작의 미묘하더라도 눈에 띄는 변화를 가리킵니다.
Material Design 2가 Chromium Gerrit에 표시됩니다.
2월 초, Chromium Gerrit에 대한 새로운 커밋으로 Chrome의 "Material Design 2" UI가 구현되었습니다. tabstrip—웹페이지 제목, 파비콘, Chrome 상단의 '탭 닫기' 버튼이 포함된 드래그 가능한 탭입니다. 주소 표시 줄.
커밋은 과감하지 않지만 Chrome 탭의 모양을 변경합니다. 탭 스트립의 높이가 늘어납니다. 탭의 콘텐츠 레이아웃, 특히 제목 및 경고 표시기를 불특정으로 조정합니다. 탭 표준 너비를 늘리면서 탭 터치 너비를 줄입니다. 그들은 명시적으로 ~하지 않다 탭 경고 표시기 색상, 탭 구분 기호 색상, "새 탭" 버튼 또는 탭 인쇄술을 수정합니다.
공개적으로 커밋은 "Material Design 2" 탭 닫기 버튼 아이콘과 "Google Material Design 2에 필요한 기본 색상 상수"를 참조합니다.
커밋 코드를 더 자세히 살펴보면 회색, 빨간색, 빨간색-어두운 Chromium 테마에 대한 새로운 "Material Design 2" 색상 팔레트와 표준 Chrome 도구 모음 및 시크릿 도구 모음에 대한 새로운 색상이 표시됩니다. 우리는 RGB 견본을 생성하기 위해 16진수 조회 테이블을 사용했습니다.
머티리얼 디자인 2의 빨간색은 약간 더 어둡다 현재 머티리얼 디자인보다 레드 800 (#C62828) 및 레드 600 (#E53935), 새로운 회색 음영(#3C4043, #5F6368, #BDC1C6, #F1F3F4)은 더 밝고 푸른 색조를 띠고 있습니다. 머티리얼 디자인은 R=G=B인 전통적인 회색을 특징으로 하며 여기서는 모든 음영에서 B>G>R입니다(단, 255개 중 1-4개만 해당).
Material Design 2 호환 버전 Chrome은 현재 빌드보다 훨씬 더 밝은 도구 모음을 제공합니다. 현재 회색 색상 구성표에 비해 거의 흰색입니다.
다음은 새로운 색상이 적용된 도구 모음의 모양에 대한 간단한 모형입니다.
마지막으로 커밋은 새로운 것을 추가합니다 IsTouchOptimizedMaterial() 깃발을 머티리얼디자인컨트롤러, 이는 터치에 최적화된 Material Design 2 요소를 의미할 수 있습니다. 우리는 1월 초에 Google의 Chrome OS 기기에서 Chrome 웹 브라우저의 터치스크린 지원이 계속되는 것으로 보입니다.
예를 들어, 커밋은 터치스크린 기기에서 Chrome의 SetStackedLayout이 '항상'임을 보여줍니다. 활성화되었습니다.' 기본적으로 많은 탭을 열면 다른 탭의 너비가 축소됩니다. 새 탭. Chrome의 스택 레이아웃은 원래 탭의 너비를 유지하고 그 뒤에 새 탭을 추가합니다.
머티리얼 디자인에서 색상의 중요성
그렇다면 머티리얼 디자인의 더 넓은 맥락에서 새로운 색상은 무엇을 의미할까요?
머티리얼 디자인은 레이어, 구성요소, 요소, 그리고 이들 요소가 서로 어떻게 작동하는지에 관한 것 이상입니다. Google 디자인 모티브의 핵심은 고대비 테마, 밝은 색상, 대담한 하이라이트입니다. 이러한 요소가 머티리얼 디자인 호환 앱을 다른 앱보다 돋보이게 만듭니다.
Google에서 샘플을 제공합니다. 색상 팔레트 여러 플랫폼에서 "함께 잘 작동"하도록 설계되었으며 소스를 활용하는 개발자를 장려합니다. 500가지의 다양한 컬렉션 중 기본 앱 색상("주요" 색상이라고도 함) 견본. ("파란색", "녹색", "보라색" 및 기타 기본 색상을 생각해 보세요.) 필요한 경우 확장된 700가지 색상 컬렉션에서 보조 색상을 소싱합니다. (가장 중요한 UI 요소에 대한 보색, 덜 중요한 UI 요소에 대한 유사 색상, 하위 집합의 3차 색상 300).
색상은 머티리얼 디자인 계층 구조에서 중요한 역할을 합니다. 밝은 색상은 중요성을 나타냅니다. 눈에 띄는 버튼과 기타 상호작용 요소용으로 예약되어 있습니다. 반면에 미묘한 색상은 텍스트 필드, 진행률 표시줄, 링크 및 UI의 기타 부분을 강조하여 시각적 흥미를 더합니다.
Material Design 2의 색상 팔레트에 대해 우리가 알고 있는 바에 따르면 Red 600 및 800과 같은 Google의 "기본 500" 견본 중 적어도 일부는 이전 Material Design보다 더 어둡습니다. 그러나 회색과 같은 다른 것들은 정반대의 대우를 받습니다. Chrome 탭 모형에 표시된 회색 및 흰색 견본은 모두 더 차가운 회색조와 더 높은 파란색 값을 갖습니다..
현재 우리가 Material Design 2에 대해 알고 있는 것은 이것이 전부입니다. 그러나 커밋은 배후에서 어떤 일이 일어나고 있다는 신호일 수 있으며, 그것이 사실이라면 우리는 더 빨리 더 많은 것을 배울 수 있습니다. 구글은 이르면 3월부터 안드로이드의 차기 주요 버전인 안드로이드 P를 공개할 예정이며, 구글 I/O 2018은 5월 8일에 시작될 예정이다. 둘 다 머티리얼 디자인 2를 마무리할 수 있는 최고의 기회입니다.
2018년 2월 4일 업데이트: 이 기사가 게시된 직후 커밋이 비공개로 설정되었습니다. 이는 잠재적으로 비밀로 유지되어야 함을 의미합니다. Chromium Gerrit에서 변경 사항을 계속 확인하고, 변경 사항이 있으면 이 문서를 업데이트하겠습니다.