프로토타입을 그리는 방법을 말해 보세요!
프로토타입을 그리기 전에, 더 중요한 것은 페이지 흐름도와 정보 맵을 그리는 것이다! 만약 당신이 이런 것들을 가지고 있지 않다면, 원형을 그리기 시작한다면, 당신을 기다리는 것은 끝없는 변화입니다.
페이지 흐름도는 사용자의 관점에서 프로세스의 합리성을 봅니다. 일반적으로 점프가 비교적 복잡한 제품 기능 (예: 전자상 및 사교 제품) 에 적합합니다.
페이지 흐름을 그리는 이유:
(1) 는 대화식 설계/프로토타입 설계의 기초이자 논리적 기반입니다. 페이지 흐름의 순서를 고려하지 않는다면, 네가 그린 원형은 반드시 확정된 버전이 아닐 것이다.
(2) 사용자의 운영 과정을 나타냅니다. 먼저 페이지 순서도를 그리면 체험 문제를 빠르게 파악할 수 있습니다. 페이지 순서도를 통해 사용자가 제품을 사용할 때의 운영 과정을 상상하여 발생할 수 있는 문제를 파악할 수 있습니다.
(3) 페이지의 핵심 요소와 논리적 관계를 강조하여 프로토타입의 설계 효율성을 높입니다. 많은 페이지는 완전히 새로운 페이지가 아니라 원래 페이지에서 약간의 수정을 했다. 페이지 프로세스의 순서를 알고 있다면 프로토타입을 그리면 많은 작업량을 줄일 수 있다.
페이지 순서도는 다음과 같습니다.
(1) 사각형: 업무 프로세스의 사각형 부분으로, 예외 프로세스 또는 레이어는 일반적으로 마름모꼴로 표시됩니다.
(2) 유량: 1 차 및 2 차 유량.
(3) 핵심 요소: 각 과정에서 구현하고 표현해야 할 핵심 요소는 무엇입니까?
페이지 순서도 그리기 도구:
(1)Axure: 페이지 순서도를 그린 후 프로토타입을 그릴 수 있습니다.
(2)ppt: 해석하기 쉽다
주의해야 할 점은 다음과 같습니다.
(1) 업무 프로세스로 돌아가기, 페이지 프로세스는 업무 프로세스, 일반적으로 업무 프로세스의 사각형 부분에서 가져와야 합니다. 예외 프로세스는 일반적으로 탄성 레이어 또는 팝업 창에 의해 표시됩니다. 비즈니스 프로세스를 잘 그리면 페이지 프로세스가 간단해집니다.
(2) 페이지의 핵심 요소 파악: 기능페이지에서 표현해야 할 요소는 무엇입니까? 비정상적인 트래픽의 처리 논리를 늘립니다. 보조 도움말 페이지를 추가합니다. 다운스트림 트리거 지점 (버튼/링크/슬라이더 ...) 을 고려합니다.
(3) 통신 최적화: 먼저 관련된 페이지를 가능한 한 다 소진한 다음 빼면 일부 페이지가 병합되거나 삭제됩니다. 프로토타입 스케치 최적화를 통해 페이지의 핵심 요소를 조정합니다. UI, UE, 프런트 엔드 R&D 와 많이 소통하면 더 좋은 결과를 얻을 수 있습니다.
페이지 순서도의 일반 규칙:
페이지 흐름 범례:
구체적인 사례:
업무 프로세스:
페이지 흐름:
주로 일반 사용자의 작업 흐름을 분리하여 예외 처리를 늘렸다.
일반 사용자의 주요 페이지 및 주요 프로세스:
페이지 순서도:
(1) 흐름 방향을 결정하는 5 페이지로 나뉩니다.
(2) "1 카트" 와 같은 고정 요소에서 "주문 전송" 은 다운스트림 트리거 지점이며 클릭 후 다음 페이지로 흐릅니다. "2 할인 코드 입력" 에는 "할인 코드 작성" 이라는 핵심 요소와 "주문 확인" 이라는 다운스트림 트리거 지점이 있습니다. ...
(3) 각 페이지에 해당하는 프로토 타입을 그립니다.
정보 아키텍처 맵, 제품 관점에서 볼 때 얼마나 많은 기능점이 포함되어 있는지 알 수 있습니다. 음악 제품, 뉴스 클라이언트, 독서 제품 등과 같은 계층 구조에 적합합니다.
정보 아키텍처 범례 1:
페이지 순서도나 정보 구조도를 통해 이제 프로토타입을 그릴 수 있게 되었습니다. 첫째, 제품 프로토 타입 디자인이란 무엇입니까?
제품 프로토 타입, 일반적으로 와이어프레임으로 알려진, 아마도 스케치의 의미입니다. 제품 착지의 관건이며, 가상 개념에서 사용자 접촉에 이르는 노드입니다. 제품 매니저 출력의 중점이기도 하고, 사장에게 업로드하고, UI 와 UE 동료에게 보냅니다.
프로토타입에서 온라인으로의 제품 프로세스:
대기업의 제품 매니저는 손으로 그린 부분과 실제 부분만 하면 되고, 소기업도 아르바이트 인터랙티브 디자인을 해야 할 수도 있다. ...
시나리오:
좋은 프로토타입의 특징은 무엇입니까?
(1) 전체: 페이지 구조가 명확하고 점프 관계가 명확하며 비즈니스 프로세스와 일치하며 사용자 요구 사항이 충분히 표현됩니다.
(2) 개별 페이지: 기능 요소가 명확하고 질서 정연하며, 위치 관계가 명확하며, 상태에 따라 변화가 뚜렷하다.
(3) 상호 작용 설계: 상호 작용 논리가 명확하고, 상호 작용 방식이 일관되며, 인터페이스가 통일되어 있습니다.
공통 도구:
(1) 펜과 종이: 직접 그리고, 빠른 학습 위치.
(2) 화이트 보드: 많은 사람들이 토론합니다.
(3) 소프트웨어 Axure/Sketch/ 잉크 칼: 공문 제작.
시나리오:
(1) 연구 프로세스: 비즈니스 프로세스->; 페이지 흐름
(2) 페이지 프레임 결정: 페이지 레이아웃과 큰 프레임을 대략적으로 결정합니다.
(3) 프로토 타입 그리기: 상호 작용 세부 사항을 결정하는 모듈을 그립니다.
참고 사항:
(1) 가능한 한 실제 축척 및 실제 사본을 사용하여 피쳐를 더욱 사실적으로 만들고 요구 사항 검토에서 거부를 방지합니다. 가능한 한 극단적인 상황을 사실적으로 시뮬레이션하고 명확한 예를 제공한다.
(2) 합병증을 일으키지 않고 수요 주체와 밀접하게 접촉한다. 프로토타입에 새로운 기능을 추가해야 하는 경우 백엔드 데이터 소스를 고려해야 합니다.
(3) 그리지 마세요! 원형은 흑백으로 UI 와 UE 에 구덩이를 파지 마라.
(4) 디렉토리 트리가 명확하고 읽기 쉽습니다.
(5) 변경 기록을 저장하고 중요한 변경 사항에 대한 파일을 저장합니다.
가능한 프로토타입을 그리기/수정하는 시간을 근무시간의 20% 이내로 조절하거나, 잘못을 저질렀는지 스스로에게 물어보세요.
당신은 제품 수요를 정확히 알고 있습니까?
제품 프로세스가 명확합니까?
손으로 그린 스케치는 다 그렸나요?
너와 보스가 손으로 그린 스케치를 확인했니?
웹 사이트 제작 프로세스 단계 세부 정보 웹 사이트 제작 프로세스 단계 세부 정보
간단히 말해서, 웹 디자인의 목적은 웹 사이트를 만드는 것입니다. 좋은 웹사이트는 보급의 기초이다. YJBSY 수집을 위해 웹사이트 제작 과정을 정리했습니다. 도움이 되었으면 합니다!
첫 번째 단계: 웹 사이트의 위치를 명확히하십시오.
우리는 자신의 웹사이트의 위치, 회사의 제품 우세, 방문한 대상 집단을 명확히 해야 한다. 이것이 우리가 먼저 분석해야 할 것이다. 우리 회사의 실제 상황에 따라서만 사이트의 스타일 포지셔닝을 할 수 있다. 사이트 스타일은 마케팅형 사이트, 브랜드형 사이트, 전자상거래형 사이트, 플랫폼형 사이트 등으로 나뉜다. 다음에 우리 유형을 자세히 설명해 드리겠습니다. 자신의 사이트 위치를 파악한 후 관련 사이트 사례를 수집하여 다음 단계에서 참고할 수 있도록 합니다.
두 번째 단계: 웹 프로토타입을 만듭니다.
이것은 정신력을 낭비하는 일이다. 현재 대부분의 사람들은 Axure 소프트웨어로 제작되고 있습니다. 프로토타입을 그리려면 많은 사이트 스타일을 참고해야 한다. 끊임없는 참고로 자신의 사이트 스타일을 요약할 수 있다. 현재 유행하는 디자인 요소는 문자가 있는 아이콘, 편평한 인터페이스, 와이드스크린 스타일입니다. 프로토타입을 만드는 과정에서 우리는 많은 사이트 스타일을 봐야 한다. 대외 무역 사이트를 만들고 싶다면, 외국의 유명 사이트를 많이 찾아 그들의 사이트 스타일을 살펴봐야 그런 사고방식을 잘 찾을 수 있다. (윌리엄 셰익스피어, 윈스턴, 해외, 해외, 해외, 해외, 해외, 해외, 해외, 해외) 국내 사이트는 비교적 보수적이다. 모두 그래픽 디자인이지만 대부분의 사이트는 레이아웃이 비슷하다.
3 단계: 색상/사용자 인터페이스 디자인
프로토타입이 완성되면 디자이너에게 UI 디자인을 맡길 수 있습니다. 디자이너는 프로토타입의 레이아웃에 따라 색상을 디자인합니다 (원형으로 제한되지 않음). 우수한 디자이너는 차근차근 실현하는 것이 아니라 자신의 경험에 따라 디테일 레이아웃에 약간의 변화를 할 것이다. 이 움직임의 목적은 아름다운 인터페이스와 사용자 경험을 개선하기 위한 것이다.
4 단계: DIV+CSS 잘라내기/컴포지션
디자인 작업이 완료되면 지도 절단을 시작해야 합니다. 사이트가 단지 PC 역이라면 지도를 자르는 스타일만 하면 된다. 응답식 사이트 개발의 경우 PC, 태블릿, 휴대폰 등 세 가지 스타일의 컷아웃이 필요합니다. 응답 웹 사이트는 최적의 경험을 위해 서로 다른 해상도와 화면 크기에 자동으로 적응하지만, 모든 웹 사이트가 반응식에 적합한 것은 아니며 각 스테이션마다 다를 수 있다는 점을 보완해야 한다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 응답, 응답, 응답, 응답, 응답) 구체적인 이유는 다음 편에서 공유한다.
5 단계: 프로그램 개발
그림을 자른 후 프로그램 개발 단계에 들어가다. 프로그램 개발은 백그라운드 관리를 하는 것으로, 웹 사이트 후기에 관리 백그라운드가 있어 프런트 엔드 데이터 콘텐츠를 업데이트할 수 있도록 하는 것이다. 현재 개발 사이트가 비교적 유행하는 개발 언어는 두 가지가 있다. 하나는 PHP 언어이고, 하나는 PHP 언어이다. 인터넷 언어.
6 단계: 웹 사이트 버그 테스트 및 데이터 채우기.
프로그램이 개발된 후 전임 고객 서비스 테스트 버그를 제출하며 데이터를 작성하면서 페이지 효과를 테스트합니다. 새로 개발된 사이트에는 버그가 있을 것이다. 순수 핸드메이드 아이템이기 때문에 건반이 하나씩 나오는 코드는 bug 가 정상입니다. 그래서 고객서비스가 테스트를 해야 합니다. 테스트된 문제는 문서로 정리돼 프로그래머에게 맡기고 고치도록 하겠습니다.
초급 제품 관리자-AXURE 프로토타입을 효율적으로 그리는 방법은 제품 관리자나 대화형 디자이너가 설계한 특정 요구 사항이나 문제에 대한 구체적인 솔루션입니다. 프로토타입을 그리는 도구는 매우 많은데, 우리 제품은 대부분 Axure 를 사용한다. 이 소프트웨어를 사용하면 하이파이 또는 낮은 충실도의 프로토타입을 모두 잘 할 수 있다. 그렇다면 팀 커뮤니케이션에 적합한 프로토 타입은 무엇입니까?
결국, 그려진 프로토타입은 자신뿐만 아니라 팀원, UI/ 프런트 엔드/개발을 위한 것이다. 특히 그룹 검토에서는 프로토타입을 시연함으로써 내부 논리, 특정 페이지, 동적 효과 등을 설명해야 합니다. 제품도 디자인이 합리적인지, 실현될 수 있는지, 조용히 그들의 의견을 들어주는지 물어본다. 이때 프로토타입은 당신의 생각을 번역하고 팀원에게 주입시키는 사고 교류의 도구이다. (알버트 아인슈타인, 생각명언) 마찬가지로 프로토타입도 팀의 커뮤니케이션 도구이다. 그린 프로토타입에 대해 여러분은 자신의 견해를 이야기하고, 사상을 교환하고, 원형의 부족을 개선할 수 있습니다.
그래서 프로토타입을 그릴 때는 반드시 기본적인 납품 기준이 있어야 한다.
첫째, 프로토 타입 디자인의 기본 제공 기준
1. 명료함-제품의 용도 (기능 및 페이지 포함) 를 다른 사람에게 알려 줍니다.
페이지에 어떤 콘텐츠 모듈이 있는지 명확하게 표현해야 한다.
모듈 내부의 구성 요소를 명확하게 표현할 필요가 있다.
2. 명료함-팀원들에게 구체적인 요구 사항을 알리고 어떻게 하는지 지도한다.
1 함수 연산
함수가 무엇을 할 수 있는지, 클릭/롤오버/드래그, 페이지가 어떻게 반응하는지 알 수 있습니다. 발전을 촉진하는 사업.
2 작업 경로
점프 페이지 작업, 점프 경로, 점프 위치, 관련된 페이지, 연락 방법 등을 명확하게 표시해야 합니다. 사용자가 길을 잃지 않도록 방지하다.
3 클릭 상태
일부 링크와 버튼은 처음에 어떤 모습인지, 마우스를 위에 올려놓으면 어떤 효과 (색상/밑줄/힌트 등) 를 표시해야 합니다. ), 클릭 스타일 변경, 클릭 후 스타일. (이것들은 프런트 엔드 작업을 용이하게 할 수 있습니다)
4 정보 조합
관련 정보 (예: 기본 정보, 이름/성별/연령 등) 를 결합해야 합니다. 함께 두는 것이 가장 좋다, 헤어지지 마라. 거리가 무관합니다.
5 자리 정렬
페이지의 레이아웃은 사용자의 습관, 탐색 방법 및 작업 작업에 맞게 조정되어야 합니다. 요점을 강조하여 사용자의 업무를 편리하게 하다. 어떤 데이터는 어떻게 배열할지, 어떤 순서로 정렬할지, 사용자가 쉽게 찾을 수 있는지, 아니면 "사용자 중심" 인지 생각해 볼 수 있다.
3. 포괄-제품의 각종 세부 사항을 소홀히 해서는 안 된다.
1 대화형 상태
어떤 중요한 조작, 상호 작용 스타일 및 효과가 있습니까? 따로 추출하여 하이파이브를 만들어 다른 사람에게 보여 주고 제품에 대한 깊은 경험과 느낌을 주는 것이 좋다.
2 데이터 표시
프로토타입과 관련된 데이터는 실제 사례가 있어야 하며, 문장, 필요한 데이터 (예: 작성자, 게시 시간, 조회수, 점찬수, 수집수 등) 와 같은 중요한 데이터를 모두 표시해야 합니다. 을 눌러 필요한 데이터 인터페이스를 개발하고 준비합니다.
3 예외 사항
인터넷 단절, 느린 로드, 데이터 삭제, 데이터 찾을 수 없음, 액세스 권한 없음 등과 같은 돌발 상황을 고려해야 합니다.
지원 페이지 4 개
제품의 일부 기능은 다른 제품과 관련될 수 있으며 관련될 수 있는 다른 페이지는 프로젝트에 포함되어야 합니다. 예를 들어, WAP 에서의 휴대폰 브라우징 스타일, 사용자에게 보내는 메시지/문자 메시지의 내용과 스타일 등이 있습니다.
4. 기초미학
1 정렬
2 간격
3 가지 컬러
4 가지 글꼴
나는 네가' 모든 사람의 디자인서' 와 같은 간단하고 사용하기 쉬운 책을 읽는 것을 추천한다.
5. 기본 사양
1 페이지 크기
웹 페이지 폭은 960px, 1000px, 1200 px, app 는 안드로이드, 아이폰 5, 아이폰 6 등이다. , 기존 제품과 동일한 크기를 유지해야합니다.
2 글꼴 크기
제목은 18px 또는 16px 이고 내용은 14px 일 수 있습니다. 사용자가 똑똑히 볼 수 있는지의 여부뿐만 아니라 미관을 고려해야 한다.
3 가지 컬러
프로토타입은 너무 많은 색깔을 가지고 있지 말고 흑백회색을 견지하고, 강조하고 싶지 않으면 다른 색을 사용하세요. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 원형명언)
4 팝업 창
팝송 스타일은 통일이 가장 좋다. 팝업명+내용+조작 버튼+닫기.
5 가지 원소
프로토타입 텍스트에 스크린 샷과 아이콘 스타일을 너무 많이 추가하지 마십시오. UI 디자인을 방해할 수 있습니다.
2.Axure 빠른 사용 팁
그 일을 잘하려면, 반드시 그 기구를 먼저 이용해야 한다. 네가 너의 공구를 능숙하게 사용할수록, 너는 많은 시간을 절약하여 이 계획을 고려할 수 있다. 다음은 Axure 가 프로토타입을 그릴 때 수행할 수 있는 몇 가지 빠른 작업을 간단히 공유하는 것입니다.
먼저 찾아서 필요한 부품을 표시하면 설정할 수 있습니다.
1. 구성요소 라이브러리 구축 (효율성 향상 및 제품 계층 일관성 보장)
2. 마스터 사용 (여러 페이지의 공통 부분에 적용되며 수정 후 자동으로 업데이트됨).
3. 페이지 스타일 지정 (페이지의 글꼴과 배경을 한 번에 설정할 수 있음)
4. 구성 요소의 상호 작용 스타일
5. 구성품 조합
마우스로 결합할 원본을 상자로 묶고 ctrl+G 를 누르고 있으면 병합 후 쉽게 복사하고 드래그할 수 있습니다. Ctrl+shift+G 를 누르거나 선택을 클릭하고 아래의 두 아이콘을 클릭하여 그룹 및 그룹 해제를 수행합니다.
6. 정렬, 중심 및 균일 분포
배포할 내용을 선택하고 배포 스타일을 선택하면 개별적으로 수동으로 조정하지 않고도 깔끔한 원형 스타일을 빠르게 얻을 수 있습니다.
7. 입력 상자 유형 설정 (사전 설정 유형)
일부 입력 상자의 경우 기본 텍스트를 설정해야 할 수도 있습니다. 입력 상자를 직접 선택하여 원래 속성에 프롬프트된 문자와 몇 가지 제한을 설정할 수 있습니다.
8. 부품 프롬프트
일부 문자는 마우스를 올려 프롬프트를 표시해야 합니다. 원본 속성에 직접 [원본 힌트] 를 설정하여 표시할 내용을 입력할 수 있습니다.
셋째, 원형을 만드는 과정
65438+
2. 제품 구조 계획-Xmind 나 펜과 같은 도구를 사용하여 제품의 페이지 수와 각 페이지에 포함된 요소를 그립니다.
3. 프로토타입 카탈로그 정리-Axure 를 사용하여 페이지 간 점프 관계를 고려하여 몇 페이지의 프로토타입을 추가합니다.
4. 디자인 페이지 레이아웃 (그리드)-다른 색상 블록과 상자를 사용하여 이 섹션이 나타낼 섹션을 나타내고 페이지 레이아웃을 디자인합니다.
5. 각 모듈에 대한 상세내역 작성-박스에 있는 특정 정보 및 데이터를 완성합니다.
6. 약간의 상호 작용이 추가되었는데, 일부 임무와 관련된 조작에 나타난다.
7. 페이지 주석-대화식 설명이 향상되었습니다.
8. 자체 테스트 감사--기능이 완전히 덮여 있는지 여부; 페이지가 누락되었는지 여부 프로세스가 명확한지 여부 상태가 완전합니까
넷째, 프로토 타입 응용 경험
저는 대부분 백그라운드 시스템 최적화를 담당하기 때문에 개발을 직접 처리합니다. 프런트 페이지가 관련된 경우 UI 가 먼저 프로토타입을 그림으로 만든 다음 프런트 엔드에서 동적 효과를 가진 demo 를 만든 다음 demo 에 따라 개발해야 합니다. 하지만 어떤 경우든, 그린 프로토타입은 팀원들이 당신의 논리와 표현할 요점을 이해하도록 해야 한다. (조지 버나드 쇼, 자기관리명언)
내가 프로젝트를 처음 맡았을 때 하이파이브를 사용했다. 나는 일주일 넘게 완전한 원형을 그렸고, 다양한 동작과 상호 작용이 있는 가상 제품을 만들고 싶다. 그러나 개발자와 프로토타입에 대해 이야기한 뒤 프로젝트 검수를 할 때 개발자들은 대부분 프로토타입의 동작을 따르지 않고 디테일까지 생략한 것으로 드러났다. 재촉을 한 후, 나는 이런 방법이 그다지 수지가 맞지 않고, 너무 힘들고, 결과도 그다지 좋지 않다는 생각을 하기 시작했다.
나중에 상부에서 그린 프로토타입을 보면 모두 정적 페이지 위주로 저보진이라고 할 수 있지만, 각 상황은 그래픽으로 잘 묘사되어 있다. 클릭 후 어떤 모습인지, 어떤 데이터를 얻을 수 있는지, 실패하면 어떻게 될지. 그리고 이렇게, 곧 완성되었습니다. 그래서 저는 저충실도 모드를 선택하고 원형을 그리기 시작했습니다. 결국 나는 개발이 때때로 약간의 동작을 잘 하지 못한다는 것을 알았다.
그래서 저는 "T-프로토 타입" 을 시작했습니다. "T-prototype" 은 대부분 최소한의 파악으로 개발되어 전체 제품의 논리를 직접 제시한 다음 중점 묘사가 필요한 곳에서 심도 있는 하이파이 설명을 하는 것이다. 그래서 내 프로토타입은 대부분 하이파이+주석과 하이파이+액션 프레젠테이션의 조합이다. 그러나 상호 작용이 간단한 제품의 경우 저충실도 모델만으로도 충분하다.
제품마다 프로토타입을 그리는 습관과 스타일이 다르지만 팀 회의를 열어 팀원들에게 프로토타입과 논리를 설명하는 것이 관건이다. 발전 과정에서 더 많은 교류가 필요하다.
또한 무료 소프트웨어 설치 패키지와 자습서를 찾을 수 있는 AXURE learning 에 대한 웹사이트를 공유해 주세요.
/
문장 관심이 있으시다면 댓글을 달고 좋아하는 것을 고집하세요. 화이팅 ~