List and Tables(HIG)

2023. 6. 7. 17:01·Design

리스트와 테이블은 하나 이상의 행열에 정보를 보여준다.

list는 목록이라는 뜻으로 나열하는 형태. Table은 표 뜻으로 나열한 형태.

  • 리스트 또는 테이블에 텍스트를 넣는 것이 좋다. 텍스트를 스캔하고 읽기 쉽게 만드는데 적합.
  • 만약에 다양한 컨텐츠들을 넣어야한다면 콜렉션사용
  • 사람들이 맥락에 따라 테이블을 편집할 수 있도록.
  • 사용자가 리스트의 항목을 선택할 때 적절한 피드백 제공. 

 

컨텐트

  • 행 내용을 쉽게 읽을 수 있도록 텍스트를 간결하게 제공하는 것이 좋다. 항목의 제목만 나열하여 사용자가 항목을 선택한다면 세부 보기를 통해 내용을 보여주는 방식이 있다.
  • 텍스트 잘림을 고려하여 텍스트의 가독성을 유지하는 것이 좋다. 
  • 다중 열 테이블에는 열을 설명하는 제목을 사용해야한다. 명사또는 짧은 명사구를 큰 제목 스타일의 대문자와 함께 사용하고 끝 문장부호를 사용하지 않는 것이 좋다.
  • 행을 레이블링된 섹션으로 구분할 수 있고. 선택적 색인은 표의 오른쪽 가장자리를 따라 세로로 나타날 수 있다. 머리글은 섹션의 첫번째 항목앞에 나타나고 바닥글은 마지막 항목뒤에 나타날수 있다.
  • 행은 그룹으로 표시되고 그룹앞에 header과 footer를 놓을 수 있다. 
  • 테이블의 컨텐츠를 빨리보여주기 싲가한다. 텍스트는 데이터자가 작아 즉시화면에 행을 채울수 있고 이미지가 있는 경우 천천히 그 이후에 온다.

이것이 대부분의 디폴트인데 행 왼쪽에는 옵션이미지가 있고 그 뒤에 왼쪽정렬된 제목과 subtitle이 존재한다. 오른쪽에는 버튼이 있을수도 있고 right detail이 있을수도 있다. 

보면 리스트의 헤더로 활동이 있고 왼쪽에 이미지가있고 그 바로 오른쪽에는 왼쪽정렬이 된 제목과 subtitle이 있다. 오른쪽에는 마찬가지로 커스텀한 오늘이란 버튼이 있다.

'Design' 카테고리의 다른 글

마케팅 앱스토어 노출하기  (1) 2025.01.04
Tab bar (HIG)  (0) 2023.06.07
ActivityRings - HIG & component(피트니스앱 분석)  (0) 2023.06.07
Navigation bar - HIG  (0) 2023.06.06
HIG - 그게 뭔데?  (1) 2023.06.01
'Design' 카테고리의 다른 글
  • 마케팅 앱스토어 노출하기
  • Tab bar (HIG)
  • ActivityRings - HIG & component(피트니스앱 분석)
  • Navigation bar - HIG
2료일
2료일
좌충우돌 모든것을 다 정리하려고 노력하는 J가 되려고 하는 세미개발자의 블로그입니다. 편하게 보고 가세요
  • 2료일
    GPT에게서 살아남기
    2료일
  • 전체
    오늘
    어제
    • 분류 전체보기 (120)
      • SWIFT개발 (29)
      • 알고리즘 (25)
      • Design (6)
      • ARkit (1)
      • 면접준비 (30)
      • UIkit (2)
      • Vapor-Server with swift (3)
      • 디자인패턴 (5)
      • 반응형프로그래밍 (12)
      • CS (3)
      • 도서관 (1)
  • 인기 글

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
2료일
List and Tables(HIG)
상단으로

티스토리툴바