스타일

Glass는 독특한 스타일이 있으므로 표준 카드 템플릿, 색상 팔레트, 서체, 가능한 경우 항상 따라야 할 작성 가이드라인을 제공합니다.

맞춤 레이아웃을 디자인하기 전에 GDK에서 제공하는 사용 가능한 CardBuilder 레이아웃을 사용하여 사용자에게 일관된 사용자 환경을 제공하세요. 이러한 레이아웃 중 어느 것도 요구사항을 충족하지 않는 경우 디자인에서 아래의 가이드라인을 따르세요.

측정항목 및 그리드

Glass 사용자 인터페이스에는 다양한 유형의 타임라인 카드에 관한 표준 레이아웃과 여백 가이드라인이 있습니다. 카드에는 일반적으로 다음과 같은 일반 리전이 있으며 일반적인 카드 세트에 적용할 수 있는 가이드라인을 제시합니다.

카드 리전

Glass는 여러 카드를 쉽게 디자인하고 일관되게 표시할 수 있도록 공통 영역 집합의 크기를 정의합니다.

기본 콘텐츠

카드의 기본 텍스트 콘텐츠는 최소 크기가 32픽셀인 Roboto Light에 있으며 패딩이 적용됩니다. 64픽셀 이상의 텍스트에서는 Roboto Thin을 사용합니다.


풀 블리드 이미지

이미지는 풀 블리드 시 가장 잘 작동하며 텍스트에 필요한 40px의 패딩이 필요하지 않습니다.


여백

타임라인 카드에는 텍스트 콘텐츠의 모든 면에 40픽셀의 패딩이 있습니다. 이렇게 하면 대부분의 사용자가 콘텐츠를 명확하게 볼 수 있습니다.

바닥글

바닥글은 카드 출처 또는 타임스탬프와 같은 카드 관련 추가 정보를 표시합니다. 바닥글 텍스트는 24픽셀이며 Roboto Regular이며 흰색 (#ffffff)입니다.


왼쪽 이미지 또는 열

왼쪽 이미지 또는 열에는 패딩과 텍스트 콘텐츠를 수정해야 합니다.

레이아웃 템플릿

GDK는 개발자가 사용할 수 있는 다양한 CardBuilder 레이아웃을 제공합니다.

색상

Glass는 대부분의 텍스트를 흰색으로 표시하고 다음과 같은 표준 색상을 사용하여 긴급도 또는 중요도를 나타냅니다. 타임라인 카드에도 이러한 색상을 사용할 수 있습니다.

CSS 클래스 RGB 값
white #ffffff
gray #808080
blue #34a7ff
red #cc3333
green #99cc33
yellow #ddbb11

다음 예에서는 색상을 사용하여 기차 노선과 상태에 관한 중요한 정보를 나타냅니다.

서체

Glass는 글꼴 크기에 따라 모든 시스템 텍스트를 Roboto Light, Roboto Regular 또는 Roboto Thin으로 표시합니다. 실시간 카드 또는 몰입형 콘텐츠를 만들 때는 다른 서체를 사용해서 나만의 브랜딩을 전달해도 됩니다.

Roboto Light

Glass에서 대부분의 글꼴을 이 글꼴로 표시합니다.

ABCDEFGHIJKLMN OPQRSTUVWXYZa bcdefghijklmnopqr stuvwxyz1234567 890!?/+-=()[]#@$
%^&*<>:;”

>

Roboto Regular

Glass가 이 글꼴에 각주 텍스트를 표시합니다.

ABCDEFGHIJKLMNOPQRST UVWXYZabcdefghijklmnopq rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;”

Roboto Thin

Glass에서 이 글꼴로 더 큰 텍스트 (64px 이상)를 표시합니다.

ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[]#@$%^ &*<>:;”

동적 텍스트 크기 조정

CardBuilder.TEXTCardBuilder.COLUMNS 레이아웃을 사용하는 경우 Glass는 콘텐츠 양에 따라 가능한 가장 큰 글꼴 크기를 사용합니다. 다음 카드는 텍스트 양에 따라 텍스트의 서체 특성의 예를 보여줍니다.

쓰기

텍스트 공간이 제한되어 있으므로 Glass 소프트웨어용 텍스트를 작성할 때 다음 가이드라인을 따르세요.

간결하게 만드세요. 간결하고 간단하며 정확해야 합니다. 콘텐츠를 큰 소리로 읽거나 이미지 또는 동영상을 표시하거나 기능을 삭제하는 등 긴 텍스트의 대안을 찾아보세요.

단순함을 유지합니다. 똑똑하고 유능하지만 기술 용어를 모르고 영어를 잘 알지 못하는 사람과 대화를 나누는 경우 짧은 문구, 능동형 동사, 보통 명사를 사용합니다.

친절하게 대합니다. 축약형을 사용합니다. 2인칭('나')을 사용하여 독자와 직접 대화합니다. 평범한 대화에서 그와 같은 텍스트로 생각하지 않는다면 아마도 그게 적합하지 않을 것입니다.

가장 중요한 것을 먼저 배치하세요. 처음 두 단어 (공백 포함 약 11자)에는 문자열에 가장 중요한 정보를 최소한으로 포함해야 합니다. 그렇지 않으면 처음부터 다시 시작합니다. 필요한 부분만 설명하세요. 미묘한 차이를 설명하려고 하지 마세요. 대부분의 사용자에게 표시되지 않습니다.

반복하지 마세요. 화면이나 텍스트 블록 내에서 중요한 용어가 반복되면 한 번만 사용하는 방법을 찾습니다.