목적

앱의 mock-up design을 만듭니다.

이번에는 특정 앱 작성 요청을 받고,
아직 시스템 개요가 정해지지 않았기 때문에,
먼저 design 작성에서 들어가기로 했습니다.

디자인 할 때 향후 부품 활용 등도 고려하여
머티리얼 디자인(바람:Fu-)을 채용하기로 합니다.
제작에 사용되는 도구는 좌절이 아니며,
mock-up design에 특화된 XD이라는 도구를 사용합니다.

운영 환경

★ 로컬 환경
MacBook Pro (13-inch, Mid 2012)
프로세서: 2.5 GHz Intel Core i5
메모리: 4GB 1600MHz DDR3

디자인하기 전 마음가짐 5개

※주의 디자인을 배운 적이 없기 때문에 기본을 모릅니다. 잘못되었거나 이렇게하면 좋다 등이 있으면 댓글을 달아주세요.
1. 디자인 뿐만이 아니라, 코딩시도 각 사용 돌릴 예정의 부품은 1개소로, 갱신이 가능하도록 설정, 고려하는 것.
2. 스마트폰 디자인은 최소화면과 최대화면으로 잘라내지 않도록 고려할 것.
3. mock-up이나 실제의 동작을 포함해, 동작 전과 후를 고려해, 화면 천이를 최대한 하지 않는 디자인을 의식하는 것. 화면 전환으로 분리 할 필요가있는 경우 등은 메인 색상을 변경하여 화면이 전환 된 것처럼 보입니다.
4. 화면 구성의 문자를 포함하여 색상은 가능한 한 적은 수로 디자인합니다. (5~10[MAX]정도?)
5. 정보량은 적고, 통일성, 일관성 있는 디자인을 고려한다.

실제로 디자인 해 보자

XD에는 심볼이라는 기능이 있어, 처음에 메인이 되는 화면을 작성해,
작성한 부품은 화면 상단의 Design Board로 심볼화하여 각 부품마다 나누어 둔다.
이렇게 함으로써, 각 화면에서 이용되고 있는 부품을 단번에 변경이 가능해진다.
텍스트 등도 마찬가지로 동일 내용의 텍스트를 이용하는 개소가 많은 경우는,
심볼화해 Design Board에 돌진해 두는 것으로, 한 곳의 갱신만으로 끝난다.
최초의 작업은 번거롭지만, 사양 변경이나 디자인 변경등의 때는,
매우 도움이됩니다.
(※ 덧붙여 이번은 클라이언트님께 허가를 얻고 있지 않으므로, 일부 모자이크를 걸고 있습니다.)

화면 분할

화면 분할
Color 분할






이번 화면 구성으로는 「낮음(최후면:background)→높음(최전면:firstfront)」으로 구성하고 있습니다.
이유로는 머티리얼 디자인은 각 부품의 분리를 테두리가 아니라 섀도우로 분리할 수 있기 때문에, 테두리의 역할을 다하고 싶기 때문에, 짙은 색을 일부러 위로 올리고 있습니다.
맨 앞면은 문자가 되기 때문에 굳이 흰색으로 하고 있습니다.
또, 최전면보다 상위에 들 수 있도록, 그레이색의 문자도 준비하고 있습니다.
이제 문자 색을 포함하여 5 색으로 색상이 구성됩니다.

덤으로는, 스리 유리를 메인 화면에 추가해, 그 위에 표시시킵니다.
이렇게하면 메인 화면보다 중요하다는 것을 강조합니다.

예비

다음 번에는 이 화면 구성을 바탕으로 앱을 설계해 나갈 것입니다.
덧붙여 그 외의 디자인에 대해서는, 시간이 있으면 투고 예정으로 합니다.