디자인 입문 강의 1주차 숙제(자주 사용하는 앱 UI 분석)

내가 요즘 자주 쓰는 슬랙 앱 화면의 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의 아쉬운 점

• 카테고리 별로 구분해서 확인 할 수 있는 화면을 오른쪽으로 스크롤하면 "워크플로"도 나오는데 화면 밖에 구성되어 있고, 스크롤 하지 않으면 있는줄도 모를뻔했다.

 

 

 

참고한 사이트

https://m3.material.io/

Material Design