Daily UI 013 / Direct Message 디엠

13번째 과제: Direct Message 디엠 UI

 

아이폰 메세지, 카카오톡, 인스타그램 DM, 왓츠앱 메세지, 텔레그램, 슬랙을 레퍼런스 분석하였다.

왓츠앱과  텔레그램은 완전이 애플의 HIG를 그대로 따른 디자인이었다. 거의 아이폰 기본앱같이 느껴진다.

슬랙은 여타 앱과 달랐다. 확실히 사내 조직을 위한 서비스여서 그에 맞는 Form follows function이었다.

 

 

- 메세지 보낸 시각을 기본적으로 보이게 하였다. 분단위로 메세지를 나누면 적당한 선에서 한번씩 호흡을 끊어주는 기능도 있기 때문이다. (아이폰, 디엠의 경우 대화들을 왼쪽으로 밀어야 시각이 표시된다.)

- 예전 대화 기록을 보기 위해 위로 스크롤했을 때, 한번에 Go to the Bottom되는 FAB을 넣었다.

- 해당 FAB는 100vh만큼 올라갔을 때부터 활성화되는데, 그렇다면 0~100vh만큼 올렸을 때 올라가있는 상태라는 것을 더욱 알기 쉽게 하기 위해 하단 메세지 입력창부분을 흐리게 만들었다.

- 메세지 입력창에 플레이스 홀더를 넣었다.

- 외국에서 더 많이 쓰는 앱의 경우에 입력 부분에 녹음 버튼이 꼭 있는데, 이는 실제로 녹음 기능을 많이 쓰기 때문이다. 하지만 우리나라의 경우 녹음 기능을 많이 쓰지 않기 때문에 굳이 꺼내두지 않았다.