ABOUT ME

Today
Yesterday
Total
  • [한번에 끝내는 UI/UX] 안드로이드 디자인 가이드_7강
    기획 관련/UI_UX 2023. 3. 10. 14:00

    01. [안드로이드 가이드 문서 확인]  메테리얼디자인 이해하기

    1) 메테리얼 디자인 특징

    - 메테리얼 디자인은 메타포(현실에 대한 은유) 현실에 대한 종이, 빛, 그림자들이 인간에게 가장 익숙한 매체로 인식하여 그것으로 디자인을 했다는 의미이다.
    - 모션을 굉장히 중요시 여기고 있음 

    2) Sufaces

    • 메테리얼 디자인은 현실에 근거한 것이기 때문에 현실세계에서 어색한 것은, 메테리얼 디자인에서도 허용되지 않는다.

    왼쪽 : 허용 / 오른쪽 : 비허용
    메테리얼 디자인은 물리적 공간이기 때문에 사용자 인터렉션이 박스를 넘을 수 없다.
    메테리얼 디자인에서 그림자값은 현실에 근거해야 한다.(두번째의 경우 바깥 그림자는 있으나, 안쪽에 겹쳐지는 부분에 그림자가 부존재)
    iOS에서는 많이 쓰이지만, 메테리얼에서는 택도 없는 디자인이다.

    3) Elevation(고도)

    • 페이지들의 높이값

    Component elevation values
    1. Nav drawer: 16dp
    2. App bar: 4dp
    3. Card: 1dp to 8dp
    4. FAB: 6dp
    5. Button: 2dp to 8dp
    6. Dialog: 24dp

    왼 : 다이얼로그는 최상단 값으로 보여줘야 한다. / 오 : 클릭했을 때 그림자값으로 선택되었다는 것을 보여줘야 한다.

    고도에 따른 모션은 아래와 같다. (프론트 개발자와 소통할 때, 아래의 모션을 지정하여 알려주면 소통하기 쉽다)
    • Changes in shadows : 클릭하였을 때, 그림자값으로 선택되었다는 것을 보여줘야 한다. (상단 이미지 참고)
    • Displaying overlap : 뒤의 화면을 덮으면서 보여진다. (링크)
    • Pushing : 뒤의 화면을 밀면서 보여진다. (링크)
    • Scaling : 화면이 커지면서 보여진다. (링크)
    • Parallax : 스크롤을 올릴때 뒤에 있는 이미지가 살짝 같이 올라간다. (링크)
    • Combining motion techniques : 텍스트가 움직일 때 뒤에 있는 이미지가 같이 끌려간다. (링크)

    4) Light and shadow (빛과 그림자)

    • key light : 밝기의 방향성
    • ambient light : 전체적인 밝기 조정(명도)
    • key and ambient light : 키 라이트와 엠비언트 라이트를 혼합하여 사용
    • dark surface : 어두운 표면에서 사용

    key light와 ambient ligth 를 혼합해서 써라
    위와 같이 고도값이 액션 시 고도값이 느껴지게 디자인 되야한다.

    02.  레이아웃

    1) 반응형 레이아웃

    • 보통은 가장 작은 사이즈는 360으로 한다.
    Screen size (가로사이즈) Margin Body Layout columns
    Extra-small (phone)      
    0-599dp 16dp Scaling 4
    Small (tablet)      
    600-904 32dp Scaling 8
    905-1239 Scaling 840dp 12
    Medium (laptop)      
    1240-1439 200dp Scaling 12
    Large (desktop)      
    1440+ Scaling 1040 12

    03.  네비게이션

    1) 네비게이션의 방향성

    • 측면 탐색은 동일한 계층 수준에서 화면 사이를 이동하는 것을 말합니다. 앱의 기본 탐색 구성 요소는 계층 구조의 최상위 수준에 있는 모든 대상에 대한 액세스를 제공해야 합니다.
    • 전방 탐색은 연속적인 계층 수준의 화면 간 이동, 흐름의 단계 또는 앱 간 이동을 의미합니다. 전방 탐색은 컨테이너(예: 카드, 목록 또는 이미지), 단추, 링크에 또는 검색을 사용하여 탐색 동작을 포함합니다.
    • 역방향 탐색은 시간순(한 앱 내에서 또는 여러 앱 간에) 또는 계층적으로(앱 내에서) 화면을 통해 뒤로 이동하는 것을 말합니다. 플랫폼 규칙은 앱 내에서 역방향 탐색의 정확한 동작을 결정합니다.

    2) 모션

    • 부모 자식 관계

    • 형제 관계

    • 최상위 전환

    3) 검색

    • 항상 검색창이 떠있는 상태
    • 아이콘으로 제공하고 있다가 클릭했을 때 제공되는 상태 

     

    04.  interaction [ 중요한 부분이므로 링크]

    설명은 자체적으로 해석한 것이므로, 위 링크 들어가서 자세한 액션을 보면 됩니다.

    1)Navigational gestures

    • Tap 
    • Scroll and pan : 원하는 곳으로 이동
    • Drag : 클릭한 채로 위 아래
    • Swipe : 스치듯이 옆으로 
    • Pinch : 두손가락으로 이동

    2)Action gestures

    • Tap
    • Long press : 꾹 눌러서, 선택
    • Swipe : 스치듯이 옆으로 

    3)Transform gestures

    • Double tap : 더블 클릭하여 확대
    • Pinch : 두손가락으로 포지션 이동 및 확대
    • Compound gestures : 두손가락으로 확대
    • Pick up and move : 선택 및 드래그 하여 원하는 부분으로 이동

    05.  communication

    1) alert dialog

    2) Acknowledgement (통보)

    3) Data visualization (데이터 시각화)

    차트 쪽은 chartjs.org 에서 라이브러리도 제공하고 있음. 디자인 시 자체제작을 하는지 라이브러리를 쓰는지에 따라 디자인이 달라질 수 있다.
    • 기본

    • 데이터 비교

    • 랭킹 (등등등..)

    4) Lauch screen(스플래쉬 화면)

    시작 화면에는 두 가지 유형이 있습니다.

    • UI 실행 화면은 앱의 실제 UI에 대한 비대화형 미리보기를 표시합니다. 이 실행 화면은 앱 실행과 앱 내 활동 전환 모두에 적합합니다.
    • 브랜드 런치 스크린은 일시적인 브랜드 노출을 제공합니다.

    5) Onboarding

    6) Offline states


    출처 : 패스트 캠퍼스 "한번에 끝내는 UX/UI 디자인 초격차 패키지 Online" 강의 7강

     

     

     

     

     

    댓글

Designed by Tistory.