디자이너와 앱 엔지니어가 잘 ​​개발할 수 있는 치트 시트 만들기

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의 작법을 올바르게 이해해 사용하는 것으로, 설계의 의도를 낭비 없이 전달할 수 있습니다.
    그리고 불규칙 요소가 발생한 경우에도 엔지니어가 "여기만이 앱 독특한 요소"라고 주의하게 할 수도 있습니다.

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

    좋은 웹페이지 즐겨찾기