내가 요즘 자주 쓰는 슬랙 앱 화면의 UI를 연구해 보았다.
첫번째 찾은 UI는 글쓰기 버튼이다.
Floating action buttons (플로팅 작업 버튼)
- 화면에서 가장 일반적이거나 중요한 작업에는 FAB를 사용합니다.
- FAB의 아이콘이 명확하고 이해하기 쉬운지 확인합니다.
- 콘텐츠가 스크롤될 때 FAB가 화면에 유지되도록 합니다.
- 세 가지 크기: 작은 FAB, FAB, 큰 FAB
다음과 같은 작업에는 FAB를 사용하지 마세요.
- 보관처리 또는 휴지통
- 경고 또는 오류
- 텍스트 자르기와 같은 제한된 작업
- 도구 모음에 더 적합한 컨트롤(예: 볼륨 또는 글꼴 색상을 조정하는 컨트롤)
Meterial Disign 사이트에서 제시하는 FAB의 요건
- FAB 는 Container 과 Icon 으로 이루어져 있다.
- 컨테이너는 둥근 사각형으로 표시되고 정중앙에 아이콘이 배치된다.
- 아이콘이 최소 3:1 명암비를 유지해야한다.
- 초점이 맞춰지거나 터치가 이루어 졌을 때 도구 설명이 표시되는 것이 좋다.
- 큰 스크린에서는 왼쪽 상단, 소형 및 중형 스크린에서는 오른쪽 하단에 두는것이 좋다.
내가 찾은 슬랙 속 FAB의 좋은 점
- 버튼의 아이콘이 컨테이너 정중앙에 위치해 있다.
- 버튼을 누르면 버튼 사이즈에 움직이 생긴다. 잘 눌렸는지 확인이 가능해서 편했다.
내가 찾은 슬랙 속 FAB의 아쉬운 점
- 3:1 명암비가 유지되어 있지 않다.
- 앱에서는 버튼의 위치가 우측 하단에 있지만, 컴퓨터에서는 좌측 상단이라고 하기엔 애매한 곳에 위치 되어있어 해당 버튼이 있는지도 몰랐었다.
두번째 찾은 UI 는 검색창이다.
Search Bar (검색 할 수 있는 창)
메세지 등 사람을 검색할때 쓰는 창이다.
- 검색어를 통해 탐색하려면 검색창과 보기를 사용하세요.
- 검색창에는 사용자가 입력할 때 추천 키워드나 문구가 표시될 수 있습니다.
- 검색 보기에 항상 결과 표시를 합니다.
- 검색창에는 선행 검색 아이콘과 선택적 후행 아이콘이 포함될 수 있습니다.
Meterial Disign 사이트에서 제시하는 Search Bar 의 요소
Meterial Disign 사이트에서 제시하는 Search Bar 의 패딩 값
내가 찾은 슬랙 속 Search Bar의 좋은 점
- 검색창에 "이동 또는 검색..." 이라고 쓰여있어 검색창의 기능을 잘 알 수 있다.
- 글씨를 쓰다보면 창 오른쪽에 X버튼이 뜨는데 그걸 누르면 내가 입력한 모든 글씨를 한번에 지울 수 있다. 편리한 기능이다.
내가 찾은 슬랙 속 Search Bar의 아쉬운 점
- Leading Icon Button (3줄)이 오른쪽에 있어 사용을 안하게 된다.
- 새로운걸 추구하는 기업인가.. Material Design에서 정해져있는 룰을 조금씩 바꾸어 사용한 느낌이다. (아이콘들의 위치 등)
세번째 찾은 UI는 검색 뷰 이다.
Search View (검색을 했을때 밑에 뜨는 보기)
- 검색어를 통해 탐색하려면 검색창과 보기를 사용하세요.
- 검색창에는 사용자가 입력할 때 추천 키워드나 문구가 표시될 수 있습니다.
- 검색 보기에 항상 결과 표시를 합니다.
- 검색창에는 선행 검색 아이콘과 선택적 후행 아이콘이 포함될 수 있습니다.
Meterial Disign 사이트에서 제시하는 Search View 의 요소
Meterial Disign 사이트에서 제시하는 Search View 의 패딩 값
내가 찾은 슬랙 속 Search View의 좋은 점
- 검색뷰를 카테고리 별로 구분해서 확인 할 수 있다. (최근, 캔버스, 파일, 채널, 사람, 워크플로)
내가 찾은 슬랙 속 Search View의 아쉬운 점
- 카테고리 별로 구분해서 확인 할 수 있는 화면을 오른쪽으로 스크롤하면 "워크플로"도 나오는데 화면 밖에 구성되어 있고, 스크롤 하지 않으면 있는줄도 모를뻔했다.
참고한 사이트
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
'UIUX 3기 사전캠프+본캠프' 카테고리의 다른 글
디자인 입문 강의 3주차 숙제(테스트케이스 작성, 디자인 QA 이슈 공유) (1) | 2024.02.27 |
---|---|
디자인 입문 강의 2주차 숙제(디자인씽킹을 통한 스카이스캐너 개선 아이디어) (1) | 2024.02.27 |
피그마에서 마진 값 구하는 방법 (0) | 2024.02.22 |
피그마에 폰트 가져오기 (0) | 2024.02.21 |
컴포넌트ㅣ인스턴스ㅣ프로퍼티ㅣ베리언트ㅣ오토레이아웃 (0) | 2024.02.20 |