회사 리셉션 앱에 구현된 엄선된 UI

소개

벌써 1년 가까이 됩니다만, 굿 패치의 접수에 두는 iPad 앱을 구현했습니다.



이것에 구현한 UI를 2개 소개합니다.

초대 코드를 입력하면 색상이 변경됩니다.

초대 코드가 3자리 색상 코드로 되어 있으며 입력하면 색상이 변경됩니다.

예) 초대 코드 #A67


키보드의 부분은 StackView, 색을 바꾸는 부분은 리액티브계의 라이브러리를 사용해, 어느 정도 편하게 구현할 수 있었습니다. 문자색은 배경색과의 명도 차이를 보고, 흰색인지 검정인지를 결정하고 있습니다.

또한 애니메이션 gif를 찍을 때 탭 부분을 알 수 있도록 morizotter/TouchVisualizer을 이용했습니다.
(결국 Simulator와 QuickTime으로 찍으면 마우스 커서 들어 버렸습니다만)

CollectionView의 인덱스 목록

TableView는 인덱스 목록을 표준으로 제공합니다.

예) 설정 앱의 지역 선택

오른쪽 ABCD...가 그것입니다.



하지만 CollectionView에는 인덱스 목록이 없습니다. 그래서 자전으로 구현했습니다.


※본래는 일본어명, 영어명, 얼굴 사진이 나옵니다만, 여기에서는 이니셜만의 표기로 하고 있습니다.

A, B, C로 섹션을 나누어 버리면 쓸데없이 여백이 태어나 버리기 때문에, 섹션은 나누지 않고 비선택 상태의 셀을 반투명하게 해, 선택 상태의 셀이 눈에 띄게 하고 있습니다.

앞서 언급했듯이 인덱스 목록의 부분은 StackView를 사용하고 있으며, 탭되었을 때의 처리는 반응형 라이브러리를 사용하여 처리하고 있습니다.

결론

당연히, 이 UI는 나만의 힘으로 태어난 것은 아니고, 팀 멤버의 힘에 의한 곳이 큽니다. 논의하거나 프로토 타이핑하면서 브러쉬 업 해 갔습니다.

나 자신은 사실 첫 번째 iPad 앱 개발이었지만 UI를 고집하면서 구현할 수있어서 매우 즐거웠습니다.