Classi 어드벤트 캘린더 8일째는, 디자이너 @shio312 가 보내 드립니다.

소개

한 디자이너와 앱 엔지니어의 대화
・iPhone 내비게이션 바를 꽂으면서 「그로나비가~」
・iPhone으로 만든 캠프를 꽂으면서 「Android도 이 전환 스위치의 UI로~」
・「Android도 아래에서 화면 내면 좋잖아」
・「토글? iOS인데」

상기 디자이너의 발언, 모두 엔지니어에게 살의를 끓일 수 있습니다. 오, 미안해.

실은, 앱 개발 경험이 있는 UI 디자이너는 엔지니어씨&디자이너씨가 사이좋게 개발할 수 있는, 자신 나름의 치트 시트를 가지고 있거나 합니다.
만약 모바일 개발 경험이 적은 디자이너와 개발하게 된 경우 이번에 소개하는 간이 치트 시트 작성 방법을 부드럽게 가르쳐 보는 것은 어떻습니까.
분명 친해질 수 있다고 생각합니다.

절차

디자이너의 공수 30분을 받는다

미소로 부르자. 기준은 평소의 3배 정도로.

자료 다운로드

덧붙여서 XD 데이터라면 폭속입니다.

iOS
htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / 데시 g / 리소 r s / # 이오 s ps

Android
htps // 마테리아 l. 이오/구이데 네 s/레소 r세 s/s 치 c케 r- ぇ에 ts-이 콘 s. HTML

배포

덧붙여서 XD 데이터라면 폭속입니다(2번째).



왼쪽은 iOS, 오른쪽은 Android의 UI 구성 요소입니다.

각 컴포넌트에 대해 스쿠쇼

각 OS5분 정도로 끝납니다. 가능한 한 세세하게 스쿠쇼하는 것이 나중에 커스텀하기 쉽습니다.

팀 공유 위키 등에 정리

각 OS, 공통 파트를 나란히 표시하는 것이 중요합니다.
여기서 자신만의 주의해야 할 점 등을 수시로 추가합시다.


이제 각 OS의 UI 파트의 차이를 빠르게 볼 수 있게 되었습니다.

개발이 진행될 때 제품에 맞는 디자인으로 대체할 수 있으면 사내의 디자인 가이드 라인이되므로 매우 편리합니다.

왜 이런 일을 하는가?

・OS에 의해서 있는 것 없는 것을 제대로 파악하기 위해서
・2개 이상의 OS로 개발하게 된 경우(특히 iOS/Android의 조합이군요) 어느 OS의 이야기인지 모르는 채 진행하는 경우가 있어, 불필요한 커뮤니케이션을 발생시키지 않기 때문에

즉

개발시의 용어는 개발 용어로 통일하자. (디자이너에게 개발 용어를 사용하도록 함)
사용자 관점은 아니지만 별다른 관점에서 말하는 방법을 생각합니다.

예를 들어 iOS의 경우 사용자에게 안내하는 단계는

この画面はアプリ内のブラウザでWEBサイトを表示していて、画面右上のインフォメーションアイコンをタップするとお店の情報が表示されます

그렇다면 사양으로

この画面のコンテンツビュー部分はWEBビューで、ナビゲーションバー右側のインフォアイコンをタップするとお店の情報がモーダル表示されます (모달 뷰가 임시 뷰이므로 닫기 버튼이 제대로 있다고 가정 할 수 있음)

됩니다.

디자이너가 UI의 파트나 OS의 작법을 올바르게 이해해 사용하는 것으로, 설계의 의도를 낭비 없이 전달할 수 있습니다.
그리고 불규칙 요소가 발생한 경우에도 엔지니어가 "여기만이 앱 독특한 요소"라고 주의하게 할 수도 있습니다.

팀이 행복하게 개발할 수 있기 때문에 사용자에게 좋은 제품을 제공 할 수 있다고 믿습니다.