Tables
Last updated
Last updated
A table presents data as a scrolling, single-column list of rows that can be divided into sections or groups. Use a table to display large or small amounts of information cleanly and efficiently in the form of a list. Generally speaking, tables are ideal for text-based content, and often appear as a means of navigation on one side of a split view, with related content shown on the opposite side. See .
테이블은 데이터를, 섹션 또는 그룹으로 나눌 수있는 single-column 행 들의 리스트를 스크롤링으로 표시합니다. 테이블을 사용하여 대용량 또는 소량의 정보를 목록 형태로 깨끗하고 효율적으로 표시하십시오. 일반적으로 말해서, 테이블은 텍스트 기반 콘텐츠에 이상적이며, 종종 반대쪽에 표시된 관련 콘텐츠와 함께 스플릿뷰의 한 쪽에서 탐색 수단으로 나타납니다.
iOS implements two styles of table, plain and grouped.
iOS는 플레인과 그룹화 된 두 가지 스타일의 표를 구현합니다.
Plain. Rows can be separated into labeled sections, and an optional index can appear vertically along the right edge of the table. A header can appear before the first item in a section, and a footer can appear after the last item.
Plain 행은 레이블이 있는 섹션으로 분리 될 수 있으며 선택적으로 인덱스는 테이블의 오른쪽 가장자리를 따라 수직으로 나타날 수 있습니다. 머리글은 섹션의 첫 번째 항목 앞에 표시 될 수 있으며 바닥 글은 마지막 항목 뒤에 나타날 수 있습니다.
Grouped. Rows are displayed in groups, which can be preceded by a header and followed by a footer. This style of table always contains at least one group and each group always contains at least one row. A grouped table doesn’t include an index.
행은 그룹 안에 표시되며, 그룹 앞에는 머리글이 있고 뒤에는 바닥 글이옵니다. 이 스타일의 테이블은 항상 최소한 하나의 그룹을 포함하며 각 그룹은 항상 최소한 하나의 행을 포함합니다. 그룹화 된 테이블은 인덱스를 포함하지 않습니다.
Think about table width. Thin tables can cause truncation and wrapping, making them hard to read and scan quickly at a distance. Wide tables can also be difficult to read and scan, and can take away space from content.
테이블 너비에 대해 생각하십시오. 얇은 테이블은 절단 및 줄 바꿈으로 인해 먼 거리에서 빠르게 읽고 스캔하기가 어려울 수 있습니다. 넓은 테이블 또한 읽기 및 스캔이 어려울 수 있으며 컨텐츠로부터 공간을 빼앗을 수 있습니다.
Begin showing table content quickly. Don’t wait for extensive table content to load before showing something. Fill onscreen rows with textual data immediately and show more complex data—such as images—as it becomes available. This technique gives people useful information right away and increases the perceived responsiveness of your app. In some cases, showing stale, older data may make sense until fresh, new data arrives.
테이블 내용을 빨리 보여주기 시작하십시오. 무언가를 보여주기 전에 많은 테이블 내용이 로드 되기를 기다리지 마십시오. 화면의 행을 텍스트 데이터로 즉시 채우고 더 복잡한 데이터 (예 : 이미지)를 사용할 수있게 표시하십시오. 이 기술은 사람들에게 유용한 정보를 즉시 제공하고 앱의 응답성을 향상시킵니다. 어떤 경우에는 신선하고 새로운 데이터가 도착할 때까지 신선하지 않고 오래된 데이터를 보여주는 것이 맞을 수도 있습니다.
Communicate progress as content loads. If a table’s data takes time to load, show a progress bar or spinning activity indicator to reassure people that your app is still running.
콘텐츠가 로드 될 때 진행 상황을 알리십시오. 테이블의 데이터가 로드 되는 데 시간이 걸리는 경우, progress bar 또는 spinning을 표시하여 사용자가 앱이 아직 실행 중임을 확신할 수 있습니다.
최신 콘텐츠를 유지하십시오. 새로운 데이터를 반영하기 위해 정기적으로 테이블의 콘텐츠를 업데이트 하는걸 고려하십시오. 스크롤 위치를 변경하지 마십시오. 대신 콘텐츠를 테이블의 처음 또는 끝에 추가하고 사람들이 준비가 되면 스크롤 할 수 있게 하십시오. 일부 앱은 새로운 데이터가 추가 될 때 표시기를 표시하고, 바로 이동 컨트롤을 제공합니다. 또한 새로 고침 제어 기능을 포함 시키면 언제든지 수동으로 업데이트를 수행 할 수 있습니다.
Avoid combining an index with table rows containing right-aligned elements. An index is controlled by performing large swiping gestures. If other interactive elements reside nearby, such as disclosure indicators, it may be difficult to discern the user’s intent when a gesture occurs and the wrong element may be activated.
인덱스를 오른쪽 정렬 요소가 포함된 테이블 행과 결합하지 마십시오. 인덱스는 큰 스와이프 제스처를 수행하여 컨트롤 됩니다. 공개 표시기와 같이 다른 대화 형 요소가 근처에있는 경우 제스처가 발생하고 잘못된 요소가 활성화 될 때 사용자의 의도를 식별하기 어려울 수 있습니다.
You use standard table cell styles to define how content appears in table rows.
컨텐츠가 테이블 행에 어떻게 표시하는지 정의하기 위해 표준 테이블 셀 스타일을 사용합니다.
행의 왼쪽에 있는 선택적 이미지와 왼쪽 정렬된 제목을 따릅니다. 보충 정보가 필요없는 항목을 표시하는 데는 좋은 옵션입니다.
한줄에 왼쪽 정렬된 제목과 다음줄에 왼쪽 정렬된 부제목. 이 스타일은 행이 시각적으로 비슷한 테이블에서 잘 작동합니다. 추가적인 부제는 행과 행을 구별하는데 도움을 줍니다.
All standard table cell styles also allow graphical elements, such as a checkmark or disclosure indicator. Of course, adding these elements decreases the space available for titles and subtitles.
또한 모든 표준 테이블 셀 스타일은 체크 표시 또는 공개 표시와 같은 그래픽 요소도 허용합니다. 물론 이러한 요소를 추가하면 제목 및 부제에 사용할 수있는 공간이 줄어 듭니다.
Keep text succinct to avoid clipping. Truncated words and phrases are hard to scan and decipher. Text truncation is automatic in all table cell styles, but it can present more or less of a problem depending on which cell style you use and where truncation occurs.
잘라지는 것을 피하기 위해 텍스트를 간결하게 유지하십시오. 잘린 단어와 구는 보고 해독하기가 어렵습니다. 텍스트 자르기는 모든 테이블 셀 스타일에서 자동이지만 사용하는 셀 스타일과 잘림이 발생하는 위치에 따라 다소 문제를 나타낼 수 있습니다.
Consider using a custom title for a Delete button. If a row supports deletion and it helps provide clarity, replace the system-provided Delete title with a custom title.
삭제 버튼에 사용자 정의 제목 사용을 고려하십시오. 행이 삭제를 지원하고 명확성을 제공하는 데 도움이되면 시스템 제공 삭제 제목을 사용자 정의 제목으로 대체하십시오.
Provide feedback when a selection is made. People expect a row to highlight briefly when its content is tapped. Then, people expect a new view to appear or something to change, such as a checkmark appearing, that indicates a selection has been made.
선택이 이루어질 때 피드백을 제공하십시오. 사람들은 컨텐츠가 탭 될 때 행이 잠깐 강조 표시 될것으로 기대합니다. 그런 다음 사람들은 새로운 뷰가 나타나거나 어떠한 변화(선택이 이루어질 때 가리키는 체크마크가 나타나는 것 같은)가 있길 기대합니다.
비표준 테이블 행을 위한 사용자 정의 테이블 셀 스타일을 디자인하십시오. 표준 스타일은 다양한 일반적인 시나리오에서 사용하기에 적합하지만 일부 컨텐츠 또는 전반적인 앱 디자인은 강하게 사용자 정의 된 테이블 모양을 요구할 수 있습니다.
Keep content fresh. Consider updating your table’s content regularly to reflect newer data. Just don’t change the scrolling position. Instead, add the content to the beginning or end of the table, and let people scroll to it when they’re ready. Some apps display an indicator when new data has been added, and provide a control for jumping right to it. It’s also a good idea to include a refresh control, so people can manually perform an update at any time. See .
For developer guidance, see .
Basic (Default). An optional image on the left side of the row, followed by a left-aligned title. It’s a good option for displaying items that don’t require supplementary information. For developer guidance, see the constant of .
Subtitle. A left-aligned title on one line and a left-aligned subtitle on the next. This style works well in a table where rows are visually similar. The additional subtitle helps distinguish rows from one another. For developer guidance, see the constant of .
Right Detail (Value 1). A left-aligned title with a right-aligned subtitle on the same line. For developer guidance, see the constant of .
Left Detail (Value 2). A right-aligned title, followed by a left-aligned subtitle on the same line. For developer guidance, see constant of .
Design a custom table cell style for nonstandard table rows. Standard styles are great for use in a variety of common scenarios, but some content or your overall app design may call for a heavily customized table appearance. To learn how to create your own cells, see in .
For developer guidance, see .
