와이어 프레임과 목업의 차이점은 무엇입니까?
답변:
와이어는 기능에 관한 것입니다. 디자인에서 어떤 종류의 일을 할 수 있는지 보여주는 간단한 스케치 일 수 있습니다. 예를 들어 웹 사이트의 와이어 프레임에는 탐색, 기본 버튼, 열, 다른 요소 배치가 표시됩니다. 웹 사이트의 청사진으로 생각할 수 있습니다.
모형은 웹 사이트 : 제품이이 경우에 어떻게 보일까의 사실적인 표현입니다. 최종 결과는 모형과 똑같거나 버전 개정 후 변형 일 수 있습니다. 어떤 사람들은 그래픽 소프트웨어를 사용하여 모형을 그리는 것을 선호하지만 다른 사람들은 HTML / CSS에서 직접 모형을 그리는 것을 선호합니다.
와이어 프레임에는 Balsamiq을 사용하고 모형에는 Photoshop / Illustrator 또는 HTML + CSS (복잡도에 따라 다름)를 사용합니다.
와이어 프레임의 예 :
다음은 Marcin Treder 의 기사를 요약 한 것입니다 .
와이어 프레임
와이어 프레임은 디자인의 충실도가 낮은 표현입니다. 명확하게 보여 주어야합니다 :
- • 주요 콘텐츠 그룹 (무엇입니까?)
• 정보의 구조 (어디?)
• 사용자에 대한 설명 및 기본 시각화 – 인터페이스 상호 작용 (어떻게?)
- 이를 설계의 중추로 고려하고 와이어 프레임에는 최종 제품의 모든 중요한 부분이 포함되어야합니다.
모형
- 목업은 중간에서 높은 충실도, 정적, 디자인 표현입니다. 종종 목업은 시각적 디자인 초안입니다.
- 정보의 구조를 나타내며, 내용을 시각화하고 기본 기능을 정적 인 방식으로 보여줍니다.
- 사람들이 실제로 프로젝트의 시각적 측면을 검토하도록 장려
와이어 프레임은 프레임 워크, 정보 계층 구조, 워크 플로우 시연, 화면에 대한 세부 정보 제공 및 구성 요소 작동 방식 (주석)에 대한 설명을 제공하는 데 사용됩니다. 애플리케이션 또는 사이트의 복잡성에 따라 와이어 프레임은 다른 요구 사항에 따라 구축해야합니다. 공정 모델. 와이어 프레임을 사용하여 클라이언트에서 요구 사항을 도출하고 결국 클라이언트와 함께 요구 사항을 확인합니다. 와이어 프레임은 사이트 또는 응용 프로그램 구조의 시각적 모델입니다. 사용되는 글꼴, 패딩, 색상, 스타일 등을 정의하지 않습니다. 크기를 조정하지 않으며 톤이나 그라디언트가 없습니다. 이 모든 것은 클라이언트와 통신해야 다른 요구 사항 산출물과 함께 제공 가능한 와이어 프레임의 프로세스와 컨텍스트를 이해할 수 있습니다.
모형은 일반적으로 Photoshop에서 만들어지며 확인 된 와이어 프레임 결과물의 구조 또는 프레임 워크를 기반으로하는 반면 일정과 승인 프로세스가 뚜렷한 고유 한 결과물입니다. 목업 또는 구성, 시각적 스타일 또는 인터페이스의 톤을 정의합니다. 승인 된 모형은 CSS 코드, 스타일 가이드, 그래픽 자산 등과 같은 여러 추가 요구 사항 또는 작업 제품으로 변환됩니다.
와이어 프레임은 절대 모형이되어서는 안됩니다. 모형 은 와이어 프레임으로 사용될 수 있지만, 이는 개정이 필요할 수 있으며 예산에 큰 영향을 줄 수 있습니다.
출처 : 웹 사이트 및 애플리케이션을 개발하는 회사 환경에서 커뮤니케이션 디자이너, UX 책임자, 비즈니스 분석가로서 15 년. 그리고 사랑하는 밥
Dave Kaye의 답변에 대해 아직 평판을 얻지 못했기 때문에 직접 답변해야했습니다. Rachuru의 훌륭한 답변과 비교하여 그의 답변을 주목할 가치가 있습니다.
현대의 문구를 해석 할 때 평신도의 설명은 가능할 수도 있고 그렇지 않을 수도 있습니다.
- 와이어 프레임은 "디자인"입니다
- 실물 모형은 "렌더링 된 데모"입니다.
실제 용어는 80 년대에서 비롯된 것입니다. 그때, 당신은 실시간으로 이미지를 생성 할 수있는 컴퓨팅 파워를 가지고 있지 않았다하지만 당신은 할 수 실시간으로 화면에 주위에 떠있는 그래픽의 "와이어 프레임"을보세요. 야간 렌더링 등 적절한 "데모"가 필요했습니다.
이 때 "와이어 프레임"은 골격 "디자인"을 나타내며 반복적 인 디자인 프로세스를 통해 사람들은 와이어 프레임에서 모형을 생성하여 피드백을 받고 다시 전달하여 와이어 프레임 디자인을 개선해야합니다.
불행히도 요즘에는 프로그래머가 직접 사용할 수있는 것을 사용하지 않는 모형을 디자인 할 수있는 많은 소프트웨어가 고객에게 제공되고 있습니다. 종종, 그들의 디자인은 다른 사람들에 의해 만들어지기 때문에 모형은 프로그래머에게 다시 가져와 그랜드 디자인을 고려하지 않고 개인적으로 기능을 보강합니다.
나는 그것이 Dave가 언급하는 것에 대해 조금 더 예의 바르다는 것을 효과적으로 생각합니다. :-)
키이스
내 지식 모형 화면에 따르면 UI의 최종 표현은 모양과 느낌입니다. 정상적인 흐름과 대체 흐름은 무엇입니까? HTML과 CSS로 만든 웹 프로토 타입이 될 수 있다고 생각합니다. 우리는 대부분 HLD 단계에서 고객에게 보여주고 받아들이도록 만듭니다.
비교로서의 와이어 프레임은 일반적인 설명이있는 흐름도와 같이 더 집중된다. 이벤트 클릭시 발생하는 일과 같은 세부 사항에 대한 설명이 거의없는 경우 이벤트 변경 및 이와 유사한 사항 그것들은 주로 SA / BA에 의해 이루어지고 모형은 디자이너 / 개발자에 의해 이루어집니다. 더 많은 사람들이 특정 UI와 관련된 DB와 같은 와이어 프레임에 기술 사양을 첨부합니다.
그러나 다시 한 번 프로젝트마다 다릅니다. 우리의 경우 와이어 프레임은 진실의 원천입니다.
이것이 내가 차이점으로 이해하는 것입니다.
와이어 프레임은 모형 일 수 있습니다. 모형은 와이어 프레임으로 간주됩니다. 그것들은 때때로 (다른 사람들이 언급했듯이) 분리 된 것들이지만, 종종 분리 된 것들이 아닙니다.
한 번에 Visio에서 만들 와이어 프레임을 고려할 수 있습니다. 그리고 모형은 PhotoShop이 만들 것입니다.
그러나 오늘날 우리가 사용하는 도구의 범위는 실제 문서와 동일한 경우가 많습니다. 처음에는 와이어 프레임 (순전히 레이아웃 및 기능)으로 시작하지만 시간이 지남에 따라 모형으로 간주 될 수있는 지점까지 점점 더 상세 해집니다. 또한 Axure와 같은 대화식 도구를 사용하는 경우 특정 시점에서 프로토 타입으로 간주 할 수 있습니다.
겹치는 부분이 많은 스펙트럼입니다.
와이어 프레임
모바일 응용 프로그램이나 웹 응용 프로그램을 디자인하려면 먼저 각 페이지의 모양을 스케치해야합니다. 비즈니스 개념을 기반으로 디자이너는 응용 프로그램 흐름과 디자인의 첫 번째 초안을 정의 할 수 있습니다. 디자인 초안은 모양, 단추, 필드, 필드 등을 설명합니다. 의미.
모형
모형은 더 살아있는 그림입니다. 시각적으로 더 매력적이며 색상, 글꼴, 테마, 버튼, 로고 등이 있습니다.이 단계에서 필드, 메모, 글꼴 유형, 탐색 메뉴 등의 레이블이 디자인에 지정됩니다. 모바일 앱의 모양 또는 웹 페이지의 모양을 정확하게 나타냅니다.
이 유익한 기사 : 와이어 프레임, 모형 및 프로토 타입의 차이점 에서 와이어 프레임과 모형에 대한 자세한 비교를 찾을 수 있습니다.