웹사이트 사용자 경험: 비전에 대 한 몇 가지 알고 있어야 하 고 대화형

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

때때로 들었어요 제품 관리자와 인터랙티브 디자인 불만, 시각 디자인 및 원래 계획은 너무 다른, 비슷한 상황을 발생 했습니다. 이유는 대부분의 통신 문제.

효과적인 의사 소통, 정보 등가 매우 중요 하다. 이 등가 모두 다른 사람에 게 해당 정보를 습득 하 고 지식의 분야에서 서로 통신할 콘텐츠의 서로 다른 영역을 이해 가능한 한 빨리 제품 요구 사항을 이해 하는 시각 디자인을 만들기 포함 되어 있습니다.

상호 작용 디자이너, 시각 디자인 가장 협력 부분 이며 사용자의 눈에 시각적 형태로 표시 되는 대화형 프로토타입. 따라서, 그것은 쉽게 사용자에 게 대화형 솔루션을 전달 하 일부 시각 디자인 이해. 같은 시간에 위치의 멀티-징계 교차점으로 인터랙티브 디자인 비전의 일부는 그들의 능력 향상을 이해 합니다. Zhuge Liang는 좋은 말, 무슨 인생 더 다채로운 것 약간, 알고 있다.

본론, 더 나은 이해, 시각적 원리의 일부를 소개 하 게 내가 Weibo의 예를 제공.

제품 스타일 글꼴을 표현합니다

시각 디자인, 제품 스타일의 성능에 대 한 글꼴의 선택은 분명, 같은 단락 쓰기, 다른 글꼴의 텍스트, 느낌 정말 다릅니다.

Microblogging 릴리스 상자, 최고 "무엇 당신에 게 새로운" 사용 하 여 microblogging 반영 화 강 인형 몸, 언제 출시, 기분이 매우 쉽게 제품에 가장 일반적으로 사용 되. "XXFarEastFont-돋움" 및 "Microsoft Ya 대담", 교체 하는 매일 처럼 생각 하지,은 완전히 없이 스타일, 경험 훨씬 더 이다.

　　

홈 페이지 일기의 형태에서 필기 (FZJINGLEIS-R-GB)이 깜짝 놀랄만한 텍스트 일반 폰트로 대체 하는 경우 메달 생활의 기록 제품 느낌의 성장 표현 하 느낌은 사라진다.

　　

제품 컬러 디스플레이 위치 지정

디자이너 제품 컬러 매칭으로 위치 표시를 위한 필요한 방법 이기도 합니다. 종종 형성 된 색 구성표의 색을 수정 하는 대상 사용자의 감정적인 버전을 통해 시각 디자인 연구의 초기 단계.

보라색, 키워드: 우아한, 고귀한, 여성, 엄숙한, 신성한, 성숙, 깊이, 미스 테리, 패션. 마이크로-음악 음악 위치 위한 시작 플랫폼으로, 보라색 더 패션 매력을 강조 표시 합니다.

　　

빨간색, 핵심 단어: 예술, 열정, 열기, 열정, 긍정적인, 활기찬, 축제, 생활, 성숙. 마이크로-라이브 방송 화려, 열정적인 레드에 맞게 아주 적당 하다.

　　

블루, 핵심어: 이유, 지식, 정의 사업, 과학 및 기술, 엄격한, 세심 한, 엄격한, 배합. 투표의 공정성은 물론 마이크로-데이터의 엄격한, 합리 성 제품 주요 색상 파란 운명.

　　

오렌지, 핵심 단어: 햇빛, 광채, 활동, 따뜻함, 메모리, 가족, 건강, 행복. 참여 마이크로-활동, 목록의의 또한 있다 오렌지 톤의 대비.

　　

녹색, 핵심 단어: 성장, 단순, 공공 복지, 생활, 보안, 신선도, 평화, 봄, 자연. 마이크로 보다 마이크로 블로그 행동을 통해 그들은 제품의 잔디-뿌리 사용자 약간 풀뿌리 별 분야에, 녹색 컬러 매칭은 매우 가장 적합 한 성장, 마이크로-공공 복지는 더 말할, 확실히 녹색의이 느낌.

　　

통합된 브랜드 이미지 만들기

브랜드 이미지는 더 많은 마이크로 보 제품 브랜드 의미 하거나 전달 하는 시각적 이미지를 통해 특정 큰 필드입니다. 이렇게 하려면 10243.html "> 그들 보고 그들을 명확 하 게 식별 하는 사용자를 허용 하는 영상 시스템의 시스템 개발 비주얼 디자이너."

마이크로-그룹 브랜드 이미지 인식 모두에 의해 계획 프로젝트, 및 그룹, 사람, 사람과 소속 감의 그룹 사이의 관계를 표시할 수 있도록 노력 하겠습니다. 비주얼 디자이너를 사용 하 여 행성, 우주선과 인간의 시각적 요소, 이야기는 "각 그룹은 행성, 누구나 공통 관심사". 사용자가이 색 요소를 볼 때 별의 느낌을 만드는 기본 색상으로 진한 파란색에 전체 사이트 그들은 알아 그들은 마이크로 그룹 페이지에 왔어요.

　　

시스템 베타에 착수 했을 때 우주선 타고 사람들이 바로 행성을 발견 하 고 곧 착륙.

　　

초보자 가이드, 하지만 또한 독창적인 이미지에이 요소를 넣어 하 고 브랜드 감각 향상.

　　

반영, 높은 순위, 행성에서 나무와 함께 그룹의 순위는 더 많은 나무를 무성 한.

　　

도움말 페이지, 개인 페이지, 게시 페이지, 및 등... 됩니다 도입, 즉, 우리는 관찰, 우리가 발견할 것 이다 어디에 나 반영 됩니다 마이크로 그룹.

스타일링 제품 더 많은 영향을 만드는

시각 디자인, 사용자의 영향의 과장된 형태는 매우 큰, 사용자를 파악 하기 쉽습니다, 그리고이 디자인 테마 페이지 맞춤된 피부에 자주 나타납니다.

"와 함께 마이크로 보 여행"이이 항목 대각선 처리, 심지어는 버튼의 일부와 함께 머리 다이어그램 디자인에서 디자이너는 기울이면와 같은 구조화 된 모듈 대조를 형성. 프로토 타입, 레이아웃의 우리의 대화형 디자인은 종종이 규칙을 수평 수직, 그리고 때로는 시각적 성능, 우수한 효과 재생 됩니다.

　　

"Weibo는 사랑" 주제는 또한 좋은 예, 제목과 껴 안된은 손을 형성 하는 역된 삼각형, "Get 발렌타인 메달" 삼각형 팁에 배치, 테마와 가장 중요 한 작업을 사용자의 눈에 밀어.

　　

"마이크로-상태 메달" 및 "2012来" 특별 한 주제에, 느낌 화면 모델 및 배송, 하지만 또한 성능에 영향을 페이지 좋은 예입니다.

첫 번째 화면에 중요 한 콘텐츠

이것은 시각 및 인터랙티브 디자이너 첫 번째 화면에서 프로토 타입에서에 관심을, 때로는 자주 지불 해야, 일부 시각 디자인 (플러스 모듈 또는 머리 그림 고조) 이유 하 고 시각적 감사 및 테스트에 특별 한 주의를이 지점 아래 압박 했다.

아래 그림을 보면, 큰 스크린은 부정적인 예, 첫 번째 화면이 엄청나게 넣어 하지 광고, 그리고 훨씬 더 잘 할 마이크로 보 데스크톱.

　　

　　

#p # 자막 #e #

사용자 디스플레이의 대부분은 여전히 1024 * 768과 1280 * 800 해상도, 때문에 브라우저 높이, 중요 한 콘텐츠를 제거 하거나 높은 600에 넣어 하려고 합니다.

초점의 수준이 페이지를 보자

대화형 디자이너 페이지 레이아웃 디자인을 완료, 페이지 초점을 강조, 사용자는 정보 검색을 용이 하 게, 작업 완료. 시각 디자인 단계, 초기 상호 작용 개념, 가이드 사용자 작업의 지속에 대 한 좋은 디자인 원고는 매우 유용 합니다.

먼저 주요 역의 마이크로 블로그 예제를 보세요. 페이지, 주 내용 영역 및 오른쪽 모듈 지역 떨어져, 마이크로 블로그 정보를 검색 하는 사용자, 시력의 라인 양쪽 모두에 의해 방해 될 것입니다 하지 왼쪽 색상 블록을 통해 비주얼 디자이너. 그리고 몇 가지, 밝은 회색 왼쪽된 가이드에 마이크로 블로그 앨범의 동일한 레이아웃 명확 하지 않다, 권리와 주요 콘텐츠 영역에는 없습니다 명확한 경계 설정, 사용자가 거의 검색의 초점을 찾을 수 있습니다.

　　

　　

다음 마이크로 라이브 홈에서 가장 중요 한 것은 빨간색 모듈의 확장명이 디자이너 페이지 추천 영역 상단의 모양과 대조를 형성 하는 밝은 회색, 아래 포커스 강조 표시 됩니다.

　　

실제 일치 사용자 정신 모델 시뮬레이션

프로토 타입 디자인은 종종 시각 디자인 사용자의 정신 모델을 사실에 맞게 작동 모드는 동일 했다. 몇 가지 현실적인 요소, 현실 세계를 시뮬레이션, 사용자에 게 몰입의 느낌을 줄 것 이다.

　　

마이크로 라디오의 가정에서 프로그램의 하단에 규모는 라디오의 FM 디자인을 시뮬레이션합니다. 뮤직 박스 디자인은 더 멋진, 기록 기계와 회전 효과, 스타일 하자 사용자 레코드에 들어 있는 정말 느낌.

　　

　　

제품 그림에 게 더 많은 감정적인

그림 microblog에서 많은 고 난 그냥 여기에 오류 페이지의 예를 인용 거 야. 누구나 감정, 잘못 된 경험 아주 나쁜, 하지만 사진, 디자이너 에게도이 좌절과 낮은 느낌의 불안. 사용자의 부정적인 감정, 그리고 제품을 분해 하는 깨진 스웨터 바늘, 활동 풍선과 폴링 열, 모든 유머 망신 더 맛 이다.

　　

우리가 전에 말했듯이, 마이크로 그룹 브랜드 요소는 마이크로 그룹의 디자인을 언급할 가치가 있다: 행성, 우주선 및 사람들. 이 브랜드 포지셔닝에 몇 가지 오류 조건이 매우 좋은 성능, 나는 말하지 않는다, 우리는 그것을 참조 하십시오.

　　

영리 사용 아이콘, 더 많은 흥미로운 페이지

아이콘 디자인은 시각 디자인, 아이콘 그래픽 해석 모호한 콘텐츠의 많은의 매우 중요 한 부분입니다, 그리고 그것은 이해 하기 쉬울 것입니다. 반대로, 아이콘의 디자인 요소는 적절 한, 또는 아이콘 백그라운드를 혼란 하는 데 사용할 것입니다 그것은 사용자 이해 방해 됩니다.

마이크로-넓은 화면 홈, 디자이너 무엇입니까 큰 화면 설명 복사 3 아이콘을 사용.

　　

각 제품 페이지, 또한 자주 등장 하는 아이콘을 도움이 됩니다. 도움말 페이지는 제품 사양에 비슷한 내용의 많은 내부 정렬 됩니다 그리고 사용자 쉽게 정보를 찾을 수 원하는 카테고리 아이콘 사이 구분 하 여.

　　

　　

표 향상 사용자 경험 및 개발 비용

시각 디자인, 점점 더 많은 관심, 원래, 그리드 주로 3: 하나 페이지의 레이아웃을 통합, 사용자의 브라우징 경험을 향상 시킬 수 있습니다; 그리고 두 번째 페이지 모듈의 크기를 표준화, 개발 및 유지 보수 비용을 절감 하는, 마지막으로, 그리드는 또한 웹 디자인 전문성의 구현입니다.

　　

주요 역의 디자인에서 그리드 시스템을 사용, 표 폭이 20px, 간격은 10px (페이지의 전체 폭은 950px). 다음과 같은 상황의 제품을 쳐다보면서 블로그, 쓰기, 대부분 좋은 어느 것의 최고 이어야 한다 마이크로 공공 상품.

지금까지, 시각 디자인의 원리는 완료 됩니다.

그렇긴 해도 너무 많은, 그리고 마지막으로 간단히 인터랙티브 디자이너로 서 우리가 해야 하는 것에 대 한 이야기. 이 문제에 대해 생각 하기 전에 다시 위의 원리를 검토 하십시오.

1. 익스프레스 제품 스타일 글꼴

2. 색을 통해 표시 제품 포지셔닝

3. 통합된 브랜드 이미지 만들기

4. 모양 제품 더 많은 영향을 만드는

5. 중요 한 내용은 첫 번째 화면에서 유지

6. 하자 초점의 수준이 페이지

7. 아날로그 실제 일치 사용자 정신 모델

8. 일러스트 제품을 더 많은 감정적인 게

9. 더 멋진 아이콘 페이지를 사용 하 여

10. 그리드 사용자 경험 및 개발 비용을 강화 하

일반적으로, 이러한 10 요소 두 가지 범주로 분류할 수 있다: 하나는 비주얼 디자이너의 필드, 다른 통신 이며 다른 시각 디자인와 함께에서 상호 작용을 할 수 있는 그리고 통신 전달에 초점을 맞추고.

첫 번째 범주 포함: 글꼴 식 제품 스타일을 통해 컬러 디스플레이 제품 현지화, 창조 통합된 브랜드 이미지, 모델링 있습니다 통해 제품 영향, 사용자 정신 모델에 맞게 실제 시뮬레이션.

내용을 이해 하 고 비주얼 디자이너 더 나은 의사 소통을 그들의 경험을 개선 하기 위해 할 수 있는 이해 합니다. 비주얼 디자이너는 수요를 이해 하 게 일찍, 동등한 제품 정보, 더 나은 디자인의 힘을 발휘할 수 있다.

두 번째 범주에 포함 됩니다: 첫 번째 화면에서 중요 한 콘텐츠 숙박 초점 포인트를가지고 수준이 페이지, 그림 수는 감정이 제품, 영리한 사용 아이콘 페이지는 더 화려한 그리드 향상 사용자 경험 및 개발 비용.

비주얼 디자이너와 효과적인 의사 소통 뿐만 아니라 이러한 원칙, 가장 그들의 결과물-프로토 타입 및 설명에 반영 됩니다. 예를 들어 서로 다른 회색조 색상 블록 성능 디자인 포커스를 통해 프로토 타입, 콘텐츠 초점을 위한 눈금의 다양 한 구성 요소에 초점 설정 일러스트 및 아이콘 자리 표시자 등등. 시각 디자인의이 이해를 통해 배달 양식, 제품 요구 사항 및 사용자 보다 일관성 있도록 비주얼 디자이너와 함께 제품을 경험 한다.

(Weibo UDC 원래 블로그, 무단 전재 하 고 소스, 오신 오신 것을 환영 합니다 가입)