상세 페이지

상세 페이지 (Detail Page)

상세 페이지는 사용자에게 완전한 데이터를 보여 줘요. 사용자는 정보를 편집하거나 다른 조작을 할 수 있죠.

출처: 문서

본문

디자인 목표 (Design Goals)

정보의 보기(viewing)와 검색 효율을 높이고, 조작의 편의성을 높이는 것이 목표예요.

디자인 원칙 (Design Principles)

Direct (직접적): 정보를 가능한 한 평평하게 표시해요. 필요한 경우가 아니면 콘텐츠를 숨기거나 접지 마세요.

Clear hierarchy (명확한 위계): 각 페이지의 정보 복잡성을 줄이기 위해, 근접성 원칙에 따라 정보를 레벨과 그룹으로 배치해요.

Concise (간결함): 복잡한 구조의 사용을 줄이고, 유사한 레이아웃과 모듈을 사용해 구조적 차이가 사용자에게 주는 간섭을 줄여 정보 자체에 집중하게 해요.

대표 템플릿 (Typical Templates)

기본 레이아웃 (Basic Layouts)

기본 레이아웃

기본 상세 페이지는 같은 위계 레벨의 모든 정보를 직접 보여 줘요. 우리는 이런 데이터 표시 방식을 제안해요.

기본 상세 템플릿

기본 레이아웃 템플릿은 주요 정보를 하나의 전체 카드에 표시하고, 비컬럼 분할선(non-column split lines)을 사용해 콘텐츠를 그룹으로 구분해요.

사용 시기 (When to use)

콘텐츠가 적고 복잡성이 낮은 정보를 표시할 때요.

문서 상세 템플릿 (Document Detail Templates)

문서 상세 템플릿

문서 상세 템플릿은 승인 문서의 상세 정보를 표시해요. 복잡한 콘텐츠가 있는 모듈을 분리하기 위해 카드를 사용해요.

사용 시기 (When to use)

승인 프로세스와 상세 승인 정보, 그리고 일부 승인 조작을 표시할 때요.

관련 조작 (Related operations)

Pass(통과), reject(거절), transfer(전송), sign(서명), suspend(보류), withdraw(철회).

복잡한 레이아웃 (Complex Layouts)

복잡한 레이아웃

복잡한 상세 정보는 다음과 같이 처리해요: 복잡성이 높고 상관관계가 약한 정보를 여러 부분으로 나누고, 그 부분들을 관련성에 따라 탭, 스텝, 카드 등으로 그룹화해요.

고급 상세 템플릿

고급 상세 템플릿 1

고급 상세 템플릿 2

사용 시기 (When to use)

상세 페이지에 크고 복잡한 콘텐츠가 있을 때, 사용자가 정보를 탐색하도록 안내하기 위해 여러 탭으로 나눠야 해요.

게시 프로세스 템플릿 (Publish Process Templates)

게시 프로세스 템플릿

콘텐츠를 단계로 나눠 사용자가 단계별로 탐색하고 조작하게 해요.

사용 시기 (When to use)

이런 템플릿은 개발과 협업 프로세스에 적합해요.

디자인 제안 (Design Suggestions)

템플릿 선택 방법 (How to choose template)

템플릿 선택

정보 복잡성과 상관관계 모델에 기반해, 관련 모드를 선택해 정보를 제시하고, 상세 페이지의 콘텐츠를 표시할 적합한 레이아웃을 선택해요.

분리 방법 (Separation Methods)

분리 방법

정보 모듈 사이의 관련성에 따라 각 모듈의 밀접도를 판단해요. 보통 콘텐츠가 관련될수록 서로 더 가까워져요.

비컬럼 분할선(non-column split lines): 관련된 콘텐츠를 분리할 때요.
풀컬럼 분할선(full-column split lines): 콘텐츠를 여러 부분으로 나눌 때요.
카드(Cards): 한 주제의 정보를 표시할 때요.
탭(Tabs): 버전, 의도, 단계 같은 특성에 따라 정보를 그룹으로 나눌 때요.

콘텐츠 컴포넌트 (Content Components)

콘텐츠 컴포넌트

정보의 유형과 복잡성에 따라 정보의 제시 모드를 선택해요. 복잡성이 낮은 것부터 높은 것 순서로 다음 컴포넌트를 사용할 수 있어요.

상세 페이지