웹 양식 디자인 방법웹 양식 페이지 디자인 방법

네트워크 측 양식 디자인 가이드에서는 기업 제품을 위한 시스템이나 애플리케이션을 디자인했다고 가정합니다. 이 디자인에는 테이블이 필요합니다. 이러한 테이블 디자인은 디자인 웹사이트에 표시되는 매우 아름다운 테이블 스타일이 아니라 복잡한 상호 작용과 수백 개의 셀이 있는 테이블입니다.

이 경우 디자이너는 많은 어려움에 직면하게 됩니다. 예를 들어 기존 프런트엔드 프레임워크에 디자인을 일치시키거나 레이아웃을 깨뜨리는 "불편한" 데이터와 싸우는 것입니다. 우리는 요구사항 체계화, 원자화, 상호작용 정의 등의 단계를 통해 이러한 문제를 해결할 것입니다.

이제 타겟 청중과 인터뷰를 마쳤습니다. 이제 고객의 필요와 요구 사항을 종합하여 디자인에 유용한 것으로 바꿔야 할 때입니다. 예를 들어, 사용자가 "내 데이터가 응용 프로그램의 다른 부분에 어떤 영향을 미치는지 확인해야 합니다."라고 말하거나 다른 사람이 소프트웨어를 사용하는 것을 보면 그 사람이 단축키만 사용하고 마우스를 전혀 터치하지 않는다는 것을 알 수 있습니다. 이것은 무엇을 의미합니까? 첫 번째 사용자의 말은 입력 확인 및 프롬프트에 관한 것입니다. 양식에 경고나 도움말 정보를 첨부하거나 의미 있는 색상 시스템을 개발하는 것이 좋습니다. 이는 도메인과 정신 모델에 따라 다릅니다. 두 번째 사용자의 작업을 관찰하면 설정할 수 있는 키보드 단축키를 디자인해야 할 수도 있고 "CmdC" 및 "CmdV"보다 더 심층적인 단축키를 고려해야 할 수도 있습니다.

이런 식으로 당신은 일련의 필요와 욕구를 갖게 됩니다. 개방형 질문은 실제 요구 사항을 파악하고 변덕을 걸러내는 데 도움이 됩니다. 예를 들어 "일을 더 빨리 하는 데 도움이 되는 것은 무엇인가? 업무 효율성을 높이는 방법은 무엇인가? XX를 할 수 없다면 무엇이 바뀔 것인가?"

이때 기능적 프레임워크가 필요합니다. 아래와 같이

모든 테이블의 가장 작은 구성 요소는 행과 열로 구성되며 다른 단위와는 다른 특정 특성을 갖는 단위입니다. 마지막으로 상단 표시줄, 키보드 명령, 오류 처리 등과 같은 중요한 추가 사항이 표에 추가되었습니다.

간단히 말하면, 사용자 요구사항을 수집하고 우선순위를 정하기 위한 복잡한 테이블을 구축하세요. 차트와 같은 표가 아닌 솔루션을 고려하십시오.

필요한 모든 기능을 체계화하기 위해 수형도를 그려보세요.

원자화는 작은 UI 구성요소를 먼저 디자인한 다음 더 큰 UI 구성요소를 조립하는 것입니다. 글꼴, 색상과 같은 기본 입자에서 제목이나 열과 같은 큰 패턴으로 점차 이동해 나갈 것입니다.

이러한 부분은 디자인 시스템이나 UI 프레임워크에 의해 정의될 수 있습니다. 기존 제품에 대한 양식을 생성하는 경우 색상 팔레트, 글꼴 및 아이콘이 양식의 요구 사항과 일치하는지 확인하십시오.

테이블 원자 디자인이 준비되면 계속해서 다양한 유형의 셀을 디자인할 수 있습니다. 먼저 각 요소의 "정상", "호버" 및 "활성" 상태를 미리 생각해 보세요. 그런 다음 "클릭" 및 "비활성화"와 같은 상태를 추가합니다.

셀에는 도구 설명, 입력 프롬프트, 오류 메시지, 자리 표시자 및 기타 첨부 파일이 포함될 수 있습니다.

행을 생성하기 위해 셀을 디자인할 때는 다양한 조합이 서로 잘 어울리는지 확인해야 합니다. 아래 행에는 읽기 전용 및 편집 가능한 셀이 표시되어 있습니다. 복잡한 편집 논리로 양식을 디자인하면 양식의 일부 필드는 사용자가 제공하고 다른 필드는 자동으로 계산되거나 기본값으로 채워집니다.

읽기 전용 셀과 편집 가능한 셀 위로 마우스를 가져가면 커서가 달라집니다. 셀을 클릭하면 행 선택이 트리거되거나 편집 가능한 셀에 대한 편집 모드로 들어갑니다. 아래 이미지에서 사용자가 하나 이상의 행을 선택할 때 셀의 상태를 볼 수 있습니다.

이제 헤더에 대해 생각해 볼 차례입니다. 내 경험상 열 머리글의 길이를 제어하고 한 줄에 고정하는 것이 불가능한 경우가 많습니다. 아래 이미지에 제목의 다양한 변형을 표시했습니다.

사용자가 정렬하고 필터링하는 데 자주 필요한 데이터 기반 도구입니다. 사용자가 긴 데이터에서 귀중한 정보를 찾는 데 도움이 됩니다. 정렬 및 필터링의 과제는 정렬 및 필터링 컨트롤을 다른 헤더 요소(열 헤더, 측정 단위 등)와 결합하는 것입니다. ).

표 셀과 달리 필터 상자에는 일반적으로 사용자가 필터링되지 않은 콘텐츠를 볼 수 있도록 오른쪽에 '재설정' 아이콘이 있습니다.

이 예에는 세 가지 유형의 필터 상자가 있습니다. 영숫자 필터를 사용하면 문자와 숫자로 검색할 수 있습니다. 와일드카드(알 수 없는 수의 알 수 없는 문자)를 지원합니다.

날짜 선택기 필터에는 셀과 동일하게 작동하는 달력이 있습니다. 사용자가 날짜를 수동으로 입력하고 달력에서 선택할 수 있도록 하면 좋을 것입니다.

검색하려는 내용을 알고 있으면 클릭하는 것보다 입력하는 것이 훨씬 쉽습니다. 내 프로젝트 중 하나에서는 "2017년 1월 25일", "2017년 6월 12일", "2016년 9월 4일" 등과 같은 날짜를 입력하여 한 달 또는 1년만 필터링할 수 있습니다.

복잡한 테이블의 일반적인 기능은 열을 복구하는 것입니다. 일반적으로 중요한 정보(예: 요소 이름 또는 상태)가 포함된 열은 스크롤할 수 없습니다.

테이블 열이 콘텐츠 크기에 딱 맞아야 하지만 텍스트가 잘릴 때 이런 일이 발생할 수 있습니다. 이 경우 열 크기를 조정하는 것이 도움이 됩니다. 사용자는 열 가장자리를 드래그하고 긴 콘텐츠를 볼 수 있습니다.

긴 텍스트 문자열을 처리하는 또 다른 방법은 가장 긴 내용이 포함된 열을 늘리거나 내용을 여러 행으로 축소하는 것입니다. 첫 번째 방법은 다소 유사한 텍스트 문자열에 더 효과적입니다. 테이블을 수직으로 작게 유지하는 것보다 전체 콘텐츠를 보는 것이 더 중요하다면 두 번째가 더 좋습니다.

테이블 크기가 조정되지 않는 것을 방지하려면 기본 최소 열 너비를 정의해야 합니다.

테이블은 무엇으로 만들어지나요? 셀, 열, 행. 또한 복잡한 테이블에는 일반적으로 최상위 작업 영역이 있습니다. 다른 구성 요소와 마찬가지로 상단 표시줄은 제목과 명령 등 더 작은 요소로 구성됩니다. 아래에는 제품에서 사용하는 다양한 상태의 명령 목록이 수집되어 있습니다.

이제 다양한 요소를 결합하여 작동하는지 확인할 수 있습니다. 다음은 몇 가지 예입니다.

물론 이것이 기능과 요소의 최종 목록은 아닙니다. 이는 프로젝트와 다르며 다음과 같은 다른 콘텐츠를 포함할 수 있습니다:

여러 열 기준 정렬,

사용자 정의 가능한 열,

확장 가능한 행,

논리 연산자(and, or, other 등)는 필터링 및 검색에 사용됩니다.

어떤 기능을 디자인하고, 어떤 기능을 디자인하지 말아야 할지 고민된다면 오컴의 면도날, 즉 단순 법칙을 참고하면 된다. 기존 인스턴스가 요구 사항을 충족하는 경우 디자이너는 새 인스턴스를 생성해서는 안 됩니다. 사용자에게 필요할 수 있는 성가신 기능을 "제거"해야 합니다.

읽기 전용 테이블입니다. 데이터만 표시하므로 작성하기 가장 간단한 테이블 유형입니다. 필터링이나 편집 옵션이 없습니다.

검색 양식. 셀은 편집할 수 없으며 헤더에 필터 상자와 정렬 컨트롤이 있으며 행을 선택할 수 있습니다. 실제로 이러한 테이블은 수많은 유사한 항목 중에서 항목을 검색, 비교 및 선택하는 것을 용이하게 합니다.

수정 가능한 양식입니다. 또는 일부 셀은 편집 가능하며 행 순서를 사용자 정의할 수 있으므로 일반적으로 필터링이 필요하지 않습니다. 이러한 테이블에는 일반적으로 도구 모음이 있으며 행에서 작업을 수행할 수 있습니다.

간단히 말하면

가장 작은 구성요소부터 시작하세요. 그런 다음 점차적으로 더 큰 테이블로 이동하고 마지막으로 전체 테이블을 시뮬레이션합니다.

미리 각 구성 요소의 가능한 모든 상태를 고려하세요.

요소 수를 최소한으로 유지하면서 모든 사용 사례를 포괄하려면 Occam의 면도날을 사용하세요.

테이블처럼 복잡한 것을 만들기에는 빌딩 블록만으로는 충분하지 않습니다. 디자이너는 디자인의 시각적 측면 뒤에 있는 논리적 원칙과 관례인 "게임의 규칙"을 고려해야 합니다.

컨테이너 및 응답 유형

인터페이스에 테이블을 배치하는 방법은 무엇입니까? 예를 들어 기존 컨테이너나 개별 모듈의 빈 공간을 차지합니까? 이러한 질문에 대한 답변은 전적으로 제품에 따라 다릅니다. 발생할 수 있는 문제를 예상하고 원칙을 철저히 명확하게 하는 것이 가장 좋습니다.

일부 애플리케이션은 정보의 가독성을 높이기 위해 선이나 흰색-회색 "얼룩말 교차점"을 사용합니다.

합리적인 기본 너비를 정의하고 필요한 경우 수동 크기 조정을 허용합니다. 표를 읽을 때는 열 사이에 간격을 두는 것보다 오른쪽에 빈 셀을 두는 것이 좋습니다. 그러나 테이블에 행과 열이 많으면 가로 및 세로 스크롤이 불가피합니다. 휴대폰에서 읽을 때 표를 카드로 변환하여 사용자가 데이터를 탐색하는 데 도움을 줄 수도 있습니다.

매우 매끄럽고 아름다운 형태라도 사용자에게는 악몽이 될 수 있습니다. 따라서 접근성 원칙을 따르는 것이 중요합니다. 다음은 접근성에 대한 주요 디자인 고려 사항입니다.

제목을 정하고 간결한 요약을 준비하세요. 시각 장애가 있는 사용자는 모든 단위에 대해 음성 처리를 요구하지 않고도 양식을 처리할 수 있어야 합니다.

글꼴 크기에 주의하세요. 웹의 공식적인 최소 크기는 없지만 16px(12pt)가 가장 적합한 것으로 간주됩니다. 또한 사용자는 전체 레이아웃을 손상시키지 않고 테이블을 200%까지 늘릴 수 있어야 합니다.

색맹인 사람들을 위해 색상을 테스트해 보세요. 텍스트 컨트롤은 배경과 충분한 대비를 가져야 합니다. 필요한 최소 색상 비율은 3:1입니다(더 많을수록 좋습니다). 색상이 사물에 라벨을 붙이는 유일한 방법이 되어서는 안 됩니다. 예를 들어, 오류 메시지는 빨간색 텍스트에만 의존해서는 안 되며, 경고 아이콘은 색맹 사용자를 위한 참조 역할을 합니다.

작고 모호한 컨트롤을 사용하지 마세요. 클릭 가능한 구성 요소는 크기가 40×40픽셀 이상인 경우 터치에 적합한 것으로 간주됩니다. 아이콘으로 표시되는 명령에는 레이블이 지정되거나 도구 설명 및 대체 텍스트가 있어야 합니다. 사용자가 복잡한 은유를 올바르게 이해하지 못할 수 있으므로 디자이너는 아이콘을 과도하게 사용해서는 안 됩니다.

간단히 말하면

콘텐츠의 통일과 형식화도 디자이너의 몫이다.

인터페이스 요소뿐만 아니라 사용 사례, 규칙, 공통 패턴도 고려하세요.

원문: plex-tables-356826d11861

번역자: 영원히