대형 화면에 표시되는 몇 가지 기능:
1. 면적이 어마합니다. 사용자는 멀리서 전체 내용만 볼 수 있습니다. 따라서 글자는 작게 설계할 수 없습니다.
2. 어두운 배경-긴장감이 강하여 시각이 더 잘 초점을 맞추고 에너지를 절약합니다.
3. 조작불가-대형 스크린은 주로 사용자에게 보여집니다. 사용자는 일반적으로 대형 화면을 직접 조작하지 않습니다.
4. 공간 제한-스크롤 막대가 있는 웹 페이지와 달리 대형 화면은 고정 길이와 폭을 가지고 있습니다.
5. 개별 주제-각 대형 화면에는 사용자에게 표현할 특정 주제가 있습니다.
첫 번째 단계, 조사 연구
조사가 필요한 요점:
1. 대형 화면의 테마-이 화면의 사용자가 보고 싶은 정보 (어떤 정보를 피하는가)
2. 데이터의 권위성과 정확성-표시할 특정 정보의 정상적인 데이터와 역사적 한계 데이터가 무엇인지 확인합니다.
3. 사용자의 다른 요구 사항-사용자가 TOP 10 을 사용한다고 하지만, 때때로 사용자만이 TOP 이 표현될 수 있다는 것을 알고 있고, 많은 양식도 TOP 정보를 표현할 수 있다.
2 단계, 시각 효과 포지셔닝 (상세한 브레인스톰, 분류, 투표)
장력: 실시간 데이터, 동적 변화.
기술: 새로운 차트, 새로운 동적 효과
풍부함: 데이터가 풍부하고, 층감이 풍부하며, 차트 유형이 많고, 공간감이 강합니다.
권위: 보안 요소
4 단계: 데이터 표현 요소
일반 데이터 표현 요소: 지도, top 10, 원형 차트, 목록, 숫자, 추세 등.
이러한 요소들을 여러 화면에 올려놓는다면 전시회에서 많은 아이디어가 부족하고 상업적 차이가 잘 드러나지 않을 것입니다. 따라서 각 요구 사항을 다시 분석해야 합니다.
5 단계: 수요 분석 및 데이터 마이닝.
1. 차원 분할-요구 사항을 가장 작은 차원으로 분할합니다.
2. 우선 순위 결정-가장 좋은 데이터를 선택하여 관점을 설명하십시오.
3. 차원 병합-차원 요소를 분류하고 단순화합니다.
4. 최상의 성능-데이터를 나타내는 데 사용할 표현식 형식을 결정합니다.
밤을 들다:
이 시리즈의 특정 화면을 만들 때, 한 업무는 큰 화면에 표시되는 내용을 필요로 한다. 우리의 업무는 특정 지역을 보호하고 전 세계 다양한 유형의 공격을 실시간으로 방어하기 위한 것이다. 이날 각 공격 유형의 누적 값과 추세를 볼 수 있다.
이 내용에 대해서는 먼저 차원을 분할합시다. 얼마나 많은 차원을 볼 수 있습니까? (가장 작은 차원으로 분해해야 함)
그런 다음 이러한 차원의 우선 순위를 결정합니다.
이 정보를 유사성별로 분류하여 간소화하다. 가장 관련성이 높은 차원은 같은 색으로 표시되며 모든 관계가 그려집니다.
위 그림에서는 모든 차원이 상호 연관되어 있음을 보여 줍니다. 우리는 시간 차원이 모든 내용과 관련이 있다는 것을 알 수 있다.
하지만 시간은 보이지 않는 내용이다. 장력을 표현하기 위해 대형 화면의 데이터를 실시간으로 표시해야 한다. 그러면 이 차원은 특정 시각적 요소가 아니라 시간 노드의 동적 변화로 설계될 수 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 그래서 우리는이 타임 라인을 제거 하 고 인터리빙 관계의 차원의 위치를 조정 합니다.
논리적 관계를 빗질하는 가장 일반적인 방법 중 하나는 마인드맵을 사용하여 비즈니스 요구 사항과 데이터 관련성을 더 잘 이해할 수 있도록 하는 것입니다.
관계가 명확해야 다음 단계의 계획 설계를 진행할 수 있다.
6 단계: 계획 및 설계
이 작품에서 디자인은 주로 디테일과 느낌에 관한 것이다.
1. 모듈 설계-모듈 수직 및 수평 그리드의 레이아웃 설계를 고려합니다.
2. 차원 표현-특정 차원을 표시할 대상을 결정합니다.
동적 설계--시간을 파악하고 감정을 제어하십시오.
수량 제어-제어 할 수없는 구현 데이터 제어. 데이터의 극단적인 상황을 감안하여 효과가 너무 밀집되거나 너무 희소한 것을 어떻게 피할 수 있습니까?
다른 디스플레이와 마찬가지로 스크린 자체의 해상도는 고정되어 있습니다.
스플 라이스 대형 화면: 대형 스크린은 거의 패치입니다. UI 디자인은 화면 간격이 콘텐츠 렌더링에 미치는 영향을 고려하지 않으므로 콘텐츠가 손실되지 않지만 시각적 표현에 영향을 줄 수 있습니다. 예를 들어, 매우 큰 인물의 이미지가 틈 중간에 둘로 나뉘거나, 눈이 쪼개져 불편해 보이면, 디자인 시 틈 위치에 참조선을 세워서 비슷한 상황을 피할 수 있다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) (현재 기업에서 많이 사용하는 스플 라이스 대형 화면에는 매끄러운, 1.7mm 틈새, 3.5mm 틈새, 작은 틈새가 더 비쌉니다.)
디자인 크기: 접합된 각 작은 화면은 일반적으로 16:9 의 HD 화면입니다. 설계 크기는 1080px 로 설정할 수 있으며 길이는 스플 라이스 화면 비율을 기준으로 할 수 있습니다. 예를 들어 3 곱하기 5 의 대형 스크린, 3 개 화면의 높이는 1080 으로 설정되고, 각 화면은 360, 360 을 9 곱하기 16 등으로 나눕니다. 640,640 곱하기 5 화면 = 3200, 최종 디자인 원고의 크기는 높음 1080px 곱하기 폭 3200px 입니다.
7 단계: 검사 및 테스트.
1. 수요에 집중합니다. 경험한 후 수요가 충족될 수 있는지 여부입니다.
2. 현장 테스트-효과를 큰 화면에 올려 읽기 쉬운지, 동적 효과가 기대에 부합하는지, 색차가 받아들일 수 있는지 확인합니다.
3. 신뢰도 테스트-스스로 해설자가 되어 사용자에게 큰 화면을 설명해 줍니다. 한 문장으로 큰 화면을 묘사할 수 있습니까, 사용자가 이해할 수 있습니까?
대형 화면을 설계하는 것은 반드시 장기적인 후속 과정이다. 많은 문제가 있습니다. 실제 데이터가 들어와서 큰 화면에 표시해야만 발견할 수 있습니다.
전체 프로젝트에 대한 프로세스
큰 화면을 더 멋지게 보이게 하고, 몇 가지 방법을 간단히 요약했습니다.
1) 레이아웃 및 조판
대형 스크린은 우선 업무 서비스를 위해 업무 지표와 데이터를 합리적으로 보여 주는 것이다. 기업의 전반적인 업무를 나타내는 경우가 많기 때문에 일반적으로 주요 지표와 보조 지표라는 두 가지 수준으로 나뉩니다. 주요 지표는 핵심 업무를 반영하고, 보조 지표는 더 자세히 설명하는데 쓰인다. 그래서 만들 때 다른 초점을 준다.
2) 색상
배경 색상은 전체 배경과 개별 요소의 배경으로 구분됩니다. 어느 쪽이든 두 가지 기본 원칙, 즉 어둡게&어둡게; 일관성.
전체적인 배경이 어두워서 선택이 많긴 하지만 대부분의 사람들을 함께 있게 하는 것은 역시 진한 파란색을 위주로 하는 것이 좋습니다. 아래 그림은 몇 가지 추천한 배색입니다. 실제 프로젝트 경험에 따르면 실제 효과에 따라 개별 구성 요소 요소에 투명 색상을 지정하는 것이 좋습니다. 투명도는 10% 로 설정됩니다.
3) 장식 효과
디테일은 감각 경험에 영향을 주며, 대형 화면 디스플레이에서도 디테일이 전체적인 효과에 큰 영향을 미칩니다. 요소, 제목, 숫자에 테두리, 그림 등의 포인트 효과를 적절히 추가하여 전체적인 아름다움을 높일 수 있습니다. 맨 위 제목은 좌우 두 개의 대칭선으로 장식되고 각 구성요소의 세분화 제목은 불규칙한 그라데이션 그림으로 장식되어 있습니다. 또한 각 구성 요소는 간단한 테두리를 사용하여 레이어 감각을 향상시킵니다.
4) 동적 효과
동적 효과의 증가는 큰 화면을 생동감 있게 보이게 하고 시각적 경험을 증가시킬 수 있다.
여기 몇 가지 사례가 있습니다.
알리는 데이터 시각화 방면에서 상당히 앞서 있다. 2005 년 20 1 1 판매 데이터부터 DataV 데이터 시각화 엔진을 사용하여 대형 데이터 화면을 구축했습니다.
위의 대형 화면은 DataV 데이터 시각화 엔진을 사용하며, 일일 차트 구성 요소 라이브러리 d.chart 및 지리 관련 구성 요소 라이브러리 d.map 을 기반으로 합니다. 전문 데이터 시각화 템플릿은 시각화 프레임워크로 설계되었으며 cube 프런트 엔드 프레임워크에 기반한 웹 서비스입니다. 이 엔진을 통해 기존 구성 요소 저비용 복원 디자이너가 만든 프로토타입 다이어그램을 활용하여 다양한 데이터 소스의 바인딩을 신속하게 완료할 수 있습니다. 최종 시각화 구성 조정 시스템을 통해 보이는 대로 시각적 디버깅을 완료하여 데이터 화면을 생성합니다.
작업 모드: 이전 "디자인->; "변경" 디자인 개발->; 개발-> 디자인->; 개발 "을 통해 고도의 복원 설계 효과를 얻을 수 있습니다.
Sailsoft, Tableau 등과 같은 시중에 나와 있는 많은 시각화 도구는 모두 데이터 처리 및 분석 소프트웨어로 각각 특색이 있다.
비즈니스 요구 사항에 따라 도구를 선택하여 큰 화면을 표시할 수 있습니다.
아래 finereport 디자이너를 열고 레이아웃 스타일에 따라 해당 차트 요소를 구성 요소 막대에서 지정된 영역으로 끌어다 놓고 데이터를 바인딩합니다.
미리 보기 버튼을 클릭하면 브라우저의 효과가 다음 그림과 같습니다.
다음은 배색, 포인트, 동적 효과, 인터페이스 효과를 필요에 따라 조정할 수 있습니다.
추천할 만한 시각화 도구가 많이 있습니다. 여기 몇 가지가 있습니다.
Raw, Infogram, 차트 블록, Visualize Free, Visual.ly, iCharts
Chart.js, D3.js, FusionCharts, JavaScript InfoVis Toolkit, jQuery Visualize, ZingChart, Flot, Gephi
지도 데이터 시각화 도구
CartoDB, InstantAtlas, Polymaps, OpenLayers, 전단지
순수 시각화 차트 생성/차트 플러그인-개발, 엔지니어에게 적합
Echarts(echarts.baidu.com), AntV(antv.alipay.com), high charts(www.hcharts.cn)
시각화 보고서 클래스-보고서 개발 및 BI 엔지니어에게 적합합니다.
Fine report(www.finereport.com)
비즈니스 인텔리전스 분석-BI 엔지니어 및 데이터 분석가에게 적합
Tableau(www.tableau.com)
피니비 (www.finebi.com)
파워 bi (파워 bi.microsoft.com/ko-cn/)
비주얼 스크린 클래스
알리 다타프 (data.aliyun.com/visual/datav)
디지털 우박 (www.digihail.com)
이것은 최근 며칠 동안 데이터 화면에 대한 몇 가지 학습입니다. 저는 여기서 공유하고 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 데이터명언)
도움이 될 것 같으면 맘에 드십시오. 감사합니다 ~ ~