UI 디자인

[jujuwon]

Voice Assistance App 을 디자인합니다.

• 기동어를 인식해 입력을 대기 중인 상태 화면
• 입력 인식 이후 동작 화면
• 각 입력에 따른 동작 응답 화면

[jujuwon]

UI 디자인 작업은 아래 피그마 링크에서 진행하겠습니다.
figma 링크

[jujuwon]

현재 기동어 인식 시 UI 와, 이후 사용자가 명령어를 말할 때 입력이 인식되고 있는 동안의 UI 를 구상했습니다.
모두 최상단 View 에서 하단에 띄워지는 것으로 가정했습니다.

• 기동어 인식 UI

• 명령어 인식 UI

실제 동작화면은 Figma Flow1 실행 후 Icon 에 hovering 하는 것으로 확인 가능합니다.
hovering 되었을 때가 명령어를 인식하는 중이라고 생각하면 됩니다 🙋‍♂️

[KDW03]

@jujuwon

해당 로고로 개발을 진행한 결과 사용자의 음성을 인식할 때 움직이는 역동적인 로고가 있으면 좀 더 사용자 친화적인 ui 가 될 것 같다고 생각이듭니다.
혹시 사용자가 음성을 인식할 때 사용할 이미지 로고 gif 확장자 파일로 개발 가능하실까요?

[jujuwon]

@KDW03 우선 추가 gif 디자인에 어려움이 있어서 어려울 것 같습니다.
역동적인 효과를 위해서 기존 UI 에서, 명령어 인식 시 파란 배경을 투명도 조절하는 것으로 구현하는 게 어떨까 싶습니다 !

[KDW03]

기존 이미지로 입력 데시벨에 따른 투명도 조절 및 크기 조절을 진행보았으나 사용자의 입력에 따른 변화라고 느껴지지 않았습니다
일단 기존 UI 형태로 다시 되돌리고 다른 부분 진행하겠습니다.