Ui 설계 사양 문서는 어떻게 작성합니까?

Ui 설계 사양 Ui 설계 사양은 무엇입니까? Ui 디자이너로서 ui 설계 사양도 설계 능력의 한 표현이기 때문에 이 문제는 ui 디자이너가 더 관심을 가져야 합니다. 따라서, 당신이 디자인을 하든, 제품 개발을 추진하든, 당신의 설계 규범이 완벽한지, 제품의 품질에 결정적이고 중요한 역할을 합니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 디자인명언) 그럼 오늘 이 문제를 이야기해 봅시다!

Ui 설계 사양에는 다음과 같은 여러 범주가 포함되어 있습니다.

1, 로고

브랜드 인상의 직접적인 느낌은 페이지 배경에 따라 다릅니다. 제품에 사용된 로고에 대해 통일적으로 분류했고, 모비의 Petshop UI 스타일 가이드의 로고 자원을 예로 들었다.

모비의 Petshop UI 의 로고에는 그래픽과 텍스트로 구성되며 브랜드 색상은 파란색입니다. 로고의 사용도 바닥글 블랙 배경의 로고를 고려해야 한다. 따라서 로고의 가로 세로 조판과 단일 로고 그래픽으로 분류하는 것이 좋습니다.

분류에서는 브랜드 색상이 있는 로고, 브랜드 색상 배경이 있는 로고, 바닥글에 검은색 배경이 있는 로고를 표시합니다.

2, 표준 색상

색상은 디자인의 가장 중요한 부분이며 아무것도 아닙니다. 디테일에 따라 퀄리티가 결정되기 때문에 컬러의 운용이 매우 섬세하고 컬러의 조화가 제품의 품질을 직접 결정합니다. 색상은 대략 브랜드 색상, 텍스트 색상, 배경 색상, 와이어프레임 색상 등으로 나눌 수 있습니다. 색상에 키워드를 추가하고 사용할 인터페이스를 지정합니다.

다음은 실제 픽셀 사용자 인터페이스 스타일 가이드의 색상 사양입니다. 각 색상에는 하나의 색상 값이 표시될 뿐만 아니라 오른쪽에는 해당 색상을 사용하는 장면도 표시됩니다. 버튼 정상 상태와 호버링 상태의 색상 값을 함께 넣어 다양한 상태에서 표시되는 색상을 보다 직관적으로 느낄 수 있도록 하는 것이 좋습니다.

색상 값의 명명 변수를 표준화하여 개발 효율성을 높이고 설계 사양을 보다 잘 유지합니다.

프런트 엔드 개발에서는 색상 값에 번호를 매겨 코드를 크게 최적화했습니다. 설계 조건이 있는 CSS 스타일 라이브러리를 정의하면 개발 과정에서 CSS 매개변수 값을 반복적으로 수정할 필요 없이 정의된 변수 이름을 직접 참조할 수 있어 설계 조건 수정 비용이 크게 절감됩니다.

3. 글꼴

글꼴은 디자인에서 중요한 고려 사항입니다. 서체에 따라 장면마다 기질과 느낌이 다르다. 따라서 디자인 시에는 글꼴의 디자인 효과를 고려한 다음 설계 사양에 명시해야 합니다.

다음은 소매 은행 서비스 사용자 인터페이스 스타일 안내서의 글꼴 사양에 대한 참조입니다. 글꼴 이름을 정의할 때 글꼴 스타일도 정의하여 다른 글꼴 스타일의 미리 보기를 추가합니다. 일반적인 글꼴 스타일에는 연한 색, 보통, 기울임꼴, 반굵게, 굵게 등이 있습니다.

4. 단락 설정

실제 제품 설계에서는 단락의 스타일이 다양하며 장면마다 단락에 대한 요구 사항이 다릅니다. 예를 들어, 내용을 읽는 단락은 문자 가독성이 강해야 하기 때문에 글꼴, 크기, 색상, 행간 등을 쉽게 읽을 수 있어야 합니다. 장식적인 단락 문자는 그렇게 엄격할 필요는 없지만 장식적일 수 있다.

단락 기본 글꼴을 정의할 때 기본 글꼴이 제대로 표시되지 않을 때 표시되는 백업 글꼴도 정의해야 합니다. 디자인의 가로 수준은 세부적인 연마에 있다. 이것이 바로 단락 규범이 디자인에서 의미하는 바이다.

5. 핵 표준 정보 센터

아이콘은 중요한 소프트웨어 로고이자 설계 리소스에서 가장 중요한 모듈 중 하나입니다. 소프트웨어 제품에는 각 페이지에도 아이콘이 있을 수 있습니다. 아이콘은 미화 외에도 의미 있는 컴퓨터 그래픽도 있다.

구체적으로 다음 세 가지 기능으로 나뉩니다.

아이콘은 다른 웹 사이트에 링크하여 다른 웹 사이트를 링크할 수 있는 로고와 포털입니다. 아이콘은 웹 사이트 이미지의 중요한 구현이다. 아이콘은 관중이 쉽게 선택할 수 있다. 아이콘 크기 및 사용 목적에 따라 설계 조건을 분류하여 정리하면 더욱 명확해집니다.

6. 그림

사진도 디자인 매뉴얼에서 가장 중요한 부분 중 하나이다. 그림 자원은 용도별로 분류되어 디자인 스타일을 체계화한다.

7. 조치

설계 과정에서 제품 일관성 (모깎기 값, 간격 및 크기) 을 유지하기 위해 표준화된 측정 기준 세트를 자주 사용합니다.

측정을 해석하는 가장 좋은 방법은 설계에 자주 사용되는 그리드 시스템입니다. 레이아웃은 고정 그리드 디자인으로 깔끔하고 깔끔합니다. 이것이 우리가 웹 페이지와 APP 디자인 과정에서 그리드 시스템을 자주 사용하는 이유이기도 하다.

8. 그림자

그림자 스타일과 매개변수도 설계 조건의 일부입니다. 설계 조건을 정리할 때 섀도우의 매개변수 값은 설계 소프트웨어의 매개변수 값이 아니라 웹 페이지의 섀도우를 제어하는 매개변수 값입니다.

예를 들어 웹 페이지의 그림자에 해당하는 매개변수 값은 box-shadow: type: outcome offsetx: 0px offsety: 4pxblur: 8px spread: 0pxcolor: # 000r 입니다 프로그래머가 필요로 하는 그림자의 매개변수 값입니다. 그렇지 않으면 최종 개발된 그림자가 일관되지 않아 사양을 충족하지 못할 수 있습니다.

9. 성분

일반 UI 구성 요소): 버튼 컨트롤, 드롭다운 상자, 선택 상자 (라디오 \ 확인란), 시간 선택기, 입력 상자, 검색 상자, 진행률 표시줄, 페이저, 프롬프트 상자, 경고 상자, 양식, 팝업 패널, 디지털 스테퍼, 탭 등.

버튼 컨트롤

버튼은 가장 일반적인 구성 요소 중 하나이며 정상, 호버링, 활성, 비활성화 및 로드의 5 가지 상태가 있습니다.

이러한 다섯 가지 상태는 사양에 별도로 나열되어야 하며 해당 버튼 채우기 색상, 테두리 색상, 필렛 값, 버튼 폭 및 높이, 버튼 텍스트 크기 및 색상 값을 표시해야 합니다. 아이콘 버튼의 경우 위의 매개변수 값 외에 치수 아이콘과 버튼 문자 사이의 간격 및 아이콘 icon 의 크기도 필요합니다.

10, 드롭다운 상자

드롭다운 상자는 사용자에게 다양한 선택 사항을 제공하는 단일 선택 구성 요소입니다. 장점은 가장 간단한 인터페이스 레이아웃에 많은 옵션이 포함되어 있다는 것입니다. 드롭다운 선택 상자가 팝업될 때 마우스 이동 시 정상, 호버링 및 활성 상태를 정의해야 합니다.

1 1, 선택 상자 (단일 선택 \ 확인란)

이름에서 알 수 있듯이, 단일 선택 상자는 많은 선택 중 하나이며, 확인란은 많은 선택 중 하나이며 무제한으로 선택할 수 있습니다. 체크 상자와 확인란에는 세 가지 상태, 즉 선택되지 않은 상태, 선택된 상태 및 클릭 불가능한 상태가 필요합니다.

시간 선택기:

시간 선택기는 연도, 월, 일, 주를 선택하는 구성 요소로 각각 연도, 월, 일, 주의 정보에 해당합니다. 설계에서는 select, Not_Select, Hover, Disable 의 네 가지 상태를 고려하여 설계 사양을 작성합니다.

입력 상자:

입력 텍스트 상자는 소프트웨어 제품 설계의 중요한 부분입니다. 텍스트 입력 상자에는 정상, 활성, 비활성화 및 오류의 네 가지 상태가 있습니다.

검색 상자:

입력 상자와 같은 점은 초점을 맞추고 내용을 입력해야 작업을 완료할 수 있다는 것입니다. 정상, 활성, 검색 드롭다운 상태 및 오류 상태가 있어야 합니다.

진행 표시줄:

이를 위해서는 사양에 업로드 진행률 막대의 전체 상호 작용 과정을 명시하고 정상 상태를 정리하고 업로드/끌기 업로드 상태, 업로드 진행 중, 업로드 성공, 업로드 실패 및 전체 프로세스 상태를 정리해야 합니다. 업로드 프로세스 중 사용자의 모든 작업에는 사용자가 사용 중에 혼란을 느끼지 않도록 적시에 응답해야 합니다.

호출기:

Pager 는 컨텐트 페이지 전환을 위한 합성 구성 요소입니다. 기존 페이징 장치에는 위/아래 페이지 조작 버튼, 페이지 번호 버튼, 페이지 번호 입력을 위한 검색 상자 및 페이지 지정 장치의 네 가지 상태 (정상, 롤오버, 활성 및 비활성화) 가 있습니다.

프롬프트 상자:

힌트 상자는 이벤트에 의해 트리거되는 팝업 패널에 표시되는 구성 요소입니다. 프롬프트 상자를 자주 사용하는 곳에는 삭제 버튼, 문제 해결 지점, 힌트 팝업 메시지 등이 있습니다. 이런 디자인은 디자인이 많고 디자인 스타일도 다르다. 바닥 스타일, 텍스트 스타일 및 그림자 매개변수를 정의합니다.

경고 상자:

페이지에 오류가 보고되는 표시 스타일, 일반적으로 사용되는 경보 정보: 작업 성공, 사용자에게 주의, 사용자에게 주의 경고 등.

양식:

표에 대한 정보가 많으니 표 스타일과 문자 색상 크기를 중점적으로 정리해야 한다.

팝업 패널:

팝업 패널은 주로 패널의 텍스트 정보, 버튼, 패널 크기 스타일, 마스크 색상 및 투명도라는 네 부분으로 구성됩니다.

디지털 스테퍼:

디지털 스테핑기는 버튼과 입력 상자가 연결된 구성 요소로 이해할 수 있는 복합 구성 요소이므로 입력 상자와 버튼에는 속성 상태가 있고 스테핑기에는 속성 상태가 있습니다.

탭:

태그를 전환하는 것은 내용을 전환하는 것을 의미합니다. 드롭다운 선택 상자와 달리 탭은 여러 옵션을 정렬하는 단일 선택 구성 요소이며 정상, 롤오버, 활성 및 비활성화의 네 가지 상태를 고려해야 합니다.

-응? Ui 설계 사양, ui 설계 사양은 무엇입니까? 이 문제에 대한 소개는 여기서 끝난다. 현재의 ui 디자인을 아십니까? 설계 사양은 전체 프로젝트의 표준화를 크게 촉진하지만 시간과 인내심이 필요합니다. 따라서 데이터 정리, 데이터 편집, 분류 통합 및 설계 소프트웨어에서 전체 사양을 새로 고치는 데 많은 시간과 노력이 필요합니다. Ui 디자인에 관한 다른 질문이 있으시면 이샤란에 계속 관심을 기울이시거나 저와 교류해 주시기 바랍니다 ~