TIL_3W3D~4D_머티리얼 디자인 읽기
디자인 카타
오늘의 토픽 - Selector 어떤 것을 선택하시겠어요?
선택 A안
대부분 A안의 경우 갯수 조절 버튼으로 조절하는 것 이외에도 숫자를 클릭시 입력할 수 있는 경우가 많아 실수로 입력시에도 갯수 조절 버튼으로 조절이 가능함 A안을 사용하는 경우가 더 많다보니 친숙한 방식
B안은 잘못 눌렀을 경우 다시 선택상자를 누른 후 갯수를 눌러야 하기 때문에 A안과 달리 잘못 눌렀을 경우의 수정이 더 오래 걸리며, 버거와 같은 예시보다 다른 선택지인 경우에 더 적합한 방안이라고 생각함
다만, A안과 B안을 혼합적으로 적용하거나, A안의 상황에서 입력 기입이 가능하다던지 하는 두가지 이상의 형태를 함께 다루는 것이 사용하는 데 편리성이 클 것으로 생각하여, A안의 상황 + 입력 기입 가능, A안 + B안 등으로 적용하는 게 맞다고 생각
디자인 카타
오늘의 토픽 - Selector 어떤 것을 선택하시겠어요?
선택 A안
사용자는 제이콥의 법칙 사용자는 새로운 제품 사용시에도 자신이 이미 알고 있는 익숙한 제품과 같은 방식으로
작동하길 원하는데 대다수의 쇼핑몰에서 주문하기로 표기하는 경우가 많기 때문에 익숙한 방식인 A안을 골랐음
이미 위에서 크게 합계 금액을 제시했음에도 박스버튼에 주문하기와 함께 합계 금액을 기입하는 것은 불필요하다고 생각하지만
어르신이나 연령층이 높은 고객을 대상으로 운영한다면 헬퍼 텍스트를 봐도 헷갈리는 경우가 많으셔서 B안이 더 적절할 수 있다고 생각하였음
구글의 Material Design
대비율의 중요성을 강조하는 모습을 보이며 중요한 포인트이기도 함
큰 텍스트는 14포인트 굵게/18포인트 일반 이상) 및 그래픽에서 배경에 3:1
작은 글씨는 배경에 대한 4.5:1을 보여주고 있음
3:1이 fail일 때와 아닐 때의 차이점이 더욱 나타나있으며 중요성을 다시 한 번 알 수 있음
FABs와 같은 일부 독립형 구성 요소는 3:1 fail이여도 가능 하나 완전히 면제 되는 것이 아니며,
핵심은 얼마나 눈에 띄는지, 색상 대비 외에 다른 시각적 단거 제공 유무
구성요소 클러스터 배치 시에 각각 구성요소와 배경 간 대비가 최소 3:1인 것을 사용할 것
터치 타겟은 최소 48 x 48dp로 만드는 것을 권장하며
iOS에서는 44 x 44dp를 권장함
타겟 간격의 권장은
대부분
, 8dp 이상의 공간으로 구분된 대상은 균형 잡힌 정보 밀도와 사용성을 촉진함으로
8dp 이상을 권장함
비정형 키 트래버설은 사용자가 키보드만을 이용해서 웹 페이지나 애플리케이션에서 예상치 못한 방식으로 요소들을 탐색, 정해지지 않은 방식으로 요소 간 이동을 할 수 있는 기능
탭은 일반적으로 대화형 요소 간에 초점을 이동, 종종 기본 탐색으로 사용. 탭 + Shift는 방향.
화살표 키는 일반적으로 구성 요소 내에서 탐색하는 데 사용됩(예: 양식의 셀 간 이동 또는 메뉴의 항목 탐색)
Enter는 링크나 버튼을 활성화, 양식 항목에 포커스가 있을 때 양식을 보냄
즉, 탭 키로 큰 그룹을 탐색하고, 화살표 키로 그 안의 세부 항목들을 탐색하는 방식
단축키는 일반적으로 두개 이상 사용해야 하며,
단일키로 키보드 단축키가 사용된 경우
(가장 권장) 인쇄할 수 없는 키보드 키 하나 이상을 포함하도록 바로 가기를 다시 매핑
(권장) 관련 구성 요소가 포커스된 경우에만 바로가기 활성화합
(권장되지 않으며, 임시 해결책으로만 사용하세요) 키보드 단축키를 끔
정보적 이미지에는 필수 요소와 비필수 요소가 있음 필수 정보는 큰 텍스트의 경우 3:1, 작은 텍스트의 경우 4.5:1의 색상 대비율을 가져야 함
사용자가 텍스트를 볼 수 있는 방법을 제공하며, 텍스트를 잘라내지 않아야 함
일부 구성 요소는 더 많은 텍스트를 위해 수직 또는 수평으로의 확장
사용자가 콘텐츠를 볼 수 있는 다른 방법을 제공하지 않고, 콘텐츠를 잘라내지 말 것
UI는 최소 200%의 텍스트 증가를 지원
너무 중요해서 가져옴
대부분의 구성 요소는 텍스트 크기가 조정될 때 동일하게 동작하는데, 텍스트와 줄 높이는 비례적으로 확대되며 크기 조절 값에 곱해짐
패딩은 기본 크기의 1배로 일정하게 유지
구성 요소의 요소 간 간격은 기본 크기의 1배로 일정하게 유지
적응형 디자인에서 대부분의 Material 구성 요소는 크기 조정, 숨기기 및 표시, 프레젠테이션 변경이라는 세 가지 주요 전략을 사용하여 대응
크기 조정에서는 버튼은 부모 컨테이너와 함께 확장이나 콘텐츠를 감싸고 왼쪽 또는 오른쪽 정렬을 유지할 수 있음을 말함
요런식 →
숨기기와 보여주기에서는 목록에서 부모컨테이너 확장에 따라 설명이나 기타 추가 정보를 표시할 수 있음을 말함
요런식 →
프레젠테이션 변경에서는 요소의 방향, 색상, 유형, 모양과 같은 특정 속성도 변경이 포함되는데.
창 크기가 커지면 FAB는 중간에서 크게와 같이 크기를 변경할 수 있으며 탐색 모음은 탐색 항목을 수직에서 수평으로 변경할 수 있음
요런식 →
대체 텍스트의 권장 길이는 140자!!
대체 텍스트는 이미지의 의미 집중와 캡션 아이디어 강화로 적을 것
글로벌 글쓰기에서 명사가 바로 뒤에 오지 않는 한 문장을 "이것"이나 "그것"으로 시작하지 말아야 하며, 명사가 불분명하면 문장을 번역하기가 더 어려워짐이 있는데 이런 포인트들을 생각해보지 않았어서 좀 더 와닿음
말이 되는 경우, 가장 중요한 정보를 문장의 맨 앞으로 옮겨야 함
문장의 맨 끝으로 옮기면 간과되거나 잘려나갈 수 있음
동적 텍스트를 피할 것
동적 텍스트는 사용자 또는 컨텍스트에 따라 변경되도록 엔지니어링에서 구현한 단어, 헤드라인에 사용자 캠페인 이름을 추가하거나 특정 시간에 사용자가 로그인할 때 "좋은 오후입니다"와 같이 표시
텍스트가 잘리지 않도록 권장 문자 수를 지킬 것
제목 : <29자
접힌 본문: <40자
확장된 본문: <80자; 축소된 본문으로 시작하여 추가
버튼 : 1-2개 버튼(각각 1-2개 단어)
SMS는 특정 문자 수를 초과하면 여러 메시지로 나뉘므로 비용이 증가하는데,
라틴어: <160자
라틴어가 아닌 언어: <134자
아 머리티얼, HIG 읽으면서 느낀게 영어가 너무 많고 세부 내용은 해석도 안되서 gpt 도움이 컸다 진짜루...⭐
어이가 없긴 하다 좀
Ctrl + D 하면 반복적으로 복제가 가능함
예를 들면 ㅇㅇ인 상태에서 적용 시 ㅇㅇㅇㅇㅇ 가능함
Sifht + S 를 하면 섹션이 됨
Sifht + G 하면 레이아웃 그리드를 껐다가 켰다가가 가능함
Grid 10px 신기하당!!
ps. 이틀동안 뭘 별로 안했어여...열시미 하자!!
