⑴ 做响应式web 页面怎么设计
响应式Web设计的方法
介绍完响应式Web的背景和概念之后，是时候该介绍具体的实现方法了，其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。
首先我们一起来看看Media Queries，这里我只会对其做一个简单的列举介绍。
通过媒体查询的设置，我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种：
1、通过link标签：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />
示例代码代表当当前屏幕宽度小于479px的时候，加载testcssbywidth1.css文件来渲染页面。
2、CSS中直接设置：
@media screen and (max-width:479px) {
/* 具体的CSS属性设置 */
}
对于Media Queries的一些常用属性，只对常用的几个做一个简单列举说明，其他的属性请各位自行查阅相关资料：
width：描述终端设备显示区域的宽度，接受max/min的前缀；
height：描述终端设备显示区域的高度，接受max/min的前缀；
device-width：描述终端设备屏幕的宽度，接受max/min的前缀；
device-height：描述终端设备屏幕的高度，接受max/min的前缀；
orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：landscape/portrait。
当我们调整浏览器大小的时候，上面通过媒体查询属性的操作就可以完成响应式Web设计的工作，但是这却不能满足移动终端的浏览器，因为移动浏览器默认页面是为宽屏幕设计的，所以会把他缩小来适应小屏幕，但是终端设备却无法识别正确的宽度，所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的
⑵ web端数据可视化（大屏）设计
目前流行数据可视化大屏设计，为了方便大家，我把各个行业的数据大屏进行了整合设计。
作品包括两部分：数据可视化模板和图表组件
数据可视化模板：医防融合数据大屏、慢病患者数据大屏、公卫体检数据大屏、公卫随访数据大屏、家医签约数据大屏、医院数据大屏、医院运营数据大屏、互联网医院数据大屏、电商数据分析大屏、药店销售数据大屏、餐饮数据分析大屏、在线教育数据大屏、网站流量访问数据分析大屏、酒店数据大屏、店铺交易数据统计、运动健康数据分析、个人健康后台数据分析、创作中心数据分析、电商后台数据分析
图表组件：数据卡片，折线图、柱状图、饼图及其他全图表
支持软件版本：Axure8.1（兼容Axure9、Axure10）
点击此处预览完整设计
部分设计展示：
⑶ web版本的网页设计有哪些应该怎么做
1.确定网页的主体色调风格。
我们制作自己的网页首先应该对自己的网页有一个整体的规划，是建一个什么类型的网站，网站主色调使用哪种颜色、设计布局采用什么样的方式等这些都需要有一个很好的规划。
2.规划网站的整体布局——导航、按钮、图片、文字的排版方式。
做什么事都不能盲目的没有目的的进行，那样只能浪费时间浪费精力，在我们制作网页之前一定要对网页的基本元素进行一些设计。可以简单的画草图，或者浏览几个自己比较喜欢的网站学习借鉴。
3.准备和归类素材——图片、音频、视屏、文章等。
制作一个网页需要大量的文件，我们必须先将这些不同类型的文件进行归类放置，整理到一个文件夹中。
打开Dreamweaver软件，新建一个站点，然后在站点下建立不同的文件夹存放素材。
.4建立自己的主页，按照之前的定的风格设计布局。
不要急着添加图片和文字，先将导航栏，标题栏和内容栏都规划好然后在进行素材的导入。注意无论是文件夹的名还是素材名最好使用英文而不是中文。中文状态很容易报错，文件添加后就不要更改文件路劲了，否则会导致文件的丢失。
5.制作网页是一个非常复杂的过程，如果想从头到尾自己制作一个网页的话是很难说清楚的，所以这里就分享一个很简单的方法。
找到一个适合自己风格或是自己比较喜欢的网页，右击鼠标——另存为。
这时浏览器就会将这个网页中的所有的元素都复制下来，存放到一个文件夹中。
6.打开Dreamweaver软件代开刚刚下载的网页，这时Dreamweaver中就会显示你下载网页的所有元素，不会出现丢失的情况。
7.替换网页中的元素即可。
选择需要进行修改的图片或是文字直接更换即可。选择一个元素然后在下面的属性栏中进行更换即可。同时还可以更换图片的大小和其他的属性。
8.按下F12进行预览效果即可。不满意的地方进行修改，一定要注意随时保存文件。
⑷ WEB网页设计常见布局
我们一般的版式设计除了平面设计，就是网页设计和互联网产品，比如一些移动端手机APP这些界面的设计。这些设计都有一些通用的布局， 大家在刚开始学习布局时有一个诀窍，即不用太在意布局的理论，而去收集一些大家常用的布局，先把这些东西记下来，随着经验的积累，可以通过这些通用的布局产生自己的理解和想法，然后去打破这些传统的布局，有自己的创新和突破。
左边为最常见的大框套小框的布局，整个网页首先在一个比较大的框里面，然后各个模块在大的框里面去布局分配。
这种布局的特点是有一个比较大的背景，背景是可以平铺的，然后其他的内容可以限制在一定的宽度范围内，好处就是视线比较集中。
通栏布局打破了框的限制，如图导航部分等是适应屏幕拉伸的。
如图背景可以根据屏幕无限延伸，显得比较大气。视觉上显示比较整体，整个网页上都是有内容的。
如图为导航在主视觉下方的布局的示意图，传统规则就是导航放在画面中间。
这是一种比较时尚、流行的布局方式，如图上面是体现当前页面主题的一个banner，这个banner比较重要，它的设计完全可以体现整个网页的风格，同时也起到一个装饰的作用。接下来把这个banner放在中间的位置而不是传统的上面的位置，这样就给banner这个位置留下了比较多的空间，让整个画面显得比较简洁大气。
如图为左中右布局示意图。
结合案例，如图分三栏左中右。对banner进行比较主题式的设计，如图第一张素材的选择体现了整个网页的风格。同样第二张、第三张的图片选择也是体现整个网页主题的主体部分。所以这种布局是必须有个部分体现这个主题的，其他两个部分用来布局网页的其他内容。
如图为环绕式布局的示意图。
环绕式就是页面会环绕一个比较显眼的图片装饰来进行设计。如图一，中间为图片焦点，内容部分环绕在图片焦点周围，进行布局设计。第二张、第三张也为内容环绕主题进行设计的。这种布局比较灵活，可以先选好一个主题图，然后所有元素围绕它的视觉效果去设计，整个画面的效果就会以图为中心，主题非常鲜明。
穿插式布局虽然很少看到，但效果也不错。
如图案例均属于穿插式布局，即所使用的图片素材在内容里面是一个穿插效果。整个banner穿插在网页内容里面，整个网页对称、画面感非常强。比较适合做一些专题类的网站。
真正的版面设计里面的布局时千变万化的，我们只要遵循前面讲到的用户体验要好、视觉上画面平衡，那效果就会很好。
⑸ Web 页面采用多大的宽度最合适
Web 页面采用多大的宽度最合适
网页设计标准尺寸：
1. 800×600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2. 1024×768下，网页宽度保持在1002以内，如果满框显示的话，高度是612눯之间，就不会出现水平滚动条和垂直滚动条。
3. 在ps里面做网页可以在800×600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740×560左右。
网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计.
网页的尺寸受限于两个因素:一个是显示器萤幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软体,就是我们常用的IE,遨游,Friefox等.
高度：
高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被外挂占了半个萤幕，所以高度没有确切值。
宽度:
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001
注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
所以如果是1024的分辨率，你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计.
如果是800的分辨率一般都设成770。但也有设成760的.
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了外挂或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右.
网页设计标准尺寸:
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右
4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.
页面标准按800*600分辨率制作，实际尺寸为778*434px
页面长度原则上不超过3屏，宽度不超过1屏
每个标准页面为A4幅面大小，即8.5X11英寸
全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px
另外120*90，120*60也是小图示的标准尺寸
每个非首页静态页面含图片位元组不超过60K，全尺寸banner不超过14K
标准网页广告尺寸规格
一、120*120，这种广告规格适用于产品或新闻照片展示。
二、120*60，这种广告规格主要用于做LOGO使用。
三、120*90，主要应用于产品演示或大型LOGO。
四、125*125，这种规格适于表现照片效果的影象广告。
五、234*60，这种规格适用于框架或左右形式主页的广告连结。
六、392*72，主要用于有较多图片展示的广告条，用于页首或页尾。
七、468*60，应用最为广泛的广告条尺寸，用于页首或页尾。
八、88*31，主要用于网页连结，或网站小型LOGO。
广告形式 画素大小 最大尺寸 备注
BUTTON 120*60(必须用gif) 7K
215*50(必须用gif) 7K
通栏 760*100 25K 静态图片或减少运动效果
430*50 15K
超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果
巨幅广告 336*280 35K
585*120
竖边广告 130*300 25K
全屏广告 800*600 40K 必须为静态图片，FLASH格式
图文混排 各频道不同 15K
弹出视窗 400*300(尽量用gif) 40K
BANNER 468*60(尽量用gif) 18K
悬停按钮 80*80(必须用gif) 7K
流媒体 300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放时间 小于5秒60帧(1秒/12帧)
网页中的广告尺寸
1.首页右上，尺寸120*60
2.首页顶部通栏，尺寸468*60
3.首页顶部通栏，尺寸760*60
4.首页中部通栏，尺寸580*60
5.内页顶部通栏，尺寸468*60
6.内页顶部通栏，尺寸760*60
7.内页左上，尺寸150*60或300*300
8.下载地址页面，尺寸560*60或468*60
9.内页底部通栏，尺寸760*60
10.左漂浮，尺寸80*80或100*100
11.右漂浮，尺寸80*80或100*10
1.65主频的cpu用多大的 显示卡 最合适 还有 多大的记忆体 最合适
您好。 建议您 用128MB的显示卡 和1G记忆体 本身您的CPU主频就不是很高 如果用好点的显示卡 和高点的记忆体 就浪费了
橱柜拉篮宽度选择多大最合适？
橱柜拉篮一般是根据您家橱柜吃尺寸来定做的，深度42cm的常用橱柜拉篮尺寸：600柜体为52.3*14cm，700柜体为62.3*14cm，750柜体为66.6*14cm，800柜体为72.3*14cm等，深度45.5cm的常用橱柜拉篮尺寸(：600柜体为56.5*20cm，700柜体为66.5*20cm，750柜体为71.5*20cm，800柜体为76.5*20cm等
淘宝手机详情页面宽度到底多少最合适咧？
手机萤幕尺寸有大有小，宽度480 – 620画素会比较合适。格式为JPGGIFPNG。当需要在图片上新增文字时，中文字型大于等于30号字，英文和阿拉伯数字大于等于20号字。
4.2米宽的客厅用多大的电视最合适
电视距离适宜在3米左右，根据沙发到电视的距离来决定。
1.7米使用26英寸
2米使用32英寸
2.4米使用37英寸
2.5米使用40英寸
2.7米使用42英寸
3米使用46英寸
3.3米使用52英寸
用多大的鱼缸养银龙最合适
按尺寸来说 最小尺寸是一米 宽40 银龙体长不得超过40 如果银龙体长超过50 就建议一米二宽50以上的缸子养了 一米五 一米八 两米都能养 越大越好呗
金毛用多大的狗窝最合适
如果你养的是金毛犬，那就更该如此了，要让它知道，白天当然不用说，夜晚这就是它睡觉的地方，不许它想在哪儿睡就在哪儿睡。
对于金毛犬来说，给它指定了一个住处，让它在想躺的时候也能随便在那儿伸伸腰，也算比较自在。
狗屋没必要十分讲究，只要宽敞就好。其实用个纸箱子或者木箱子在上面铺块毛巾也行。若买商店里卖的狗屋，则有条件在客人来访前，事先将金毛犬关起来，的确很方便。
狗屋应放置在安静、偏暗点儿的地方，最好选在冬暖夏凉、通风避晒之处，可能的话冬季和夏季应选在不同的地方。
也可以用铁笼子代替狗屋
要是你们家足够敞的话，也可以在屋里准备一个铁笼子，里面同时可以放上便器和金毛犬睡觉的窝。有一种能摺叠的铁笼子，可以很方便地拆运安装，天气好时还可以把金毛犬连笼子挪到院子里晒晒太阳。
中星九号用多大的锅最合适
目前用小锅接收中星9号的人占百分之九十九以上，因为它上面有免费的46套央视及省级卫视节目。其它卫星如亚太5号、新天11符和韩星5号上面节目少，也没有多大的收看价值。最小的小锅直径35厘米左右。 中星9号位于西南方向.应该影响不大。
86用多大轮胎最合适
1.抓地力增加。2。增加车身高度，3增加行车稳定性。4.油耗增加。5。对轮毂，内衬，转向角度，有影响!
⑹ Web网页设计尺寸，到底选哪个
很多新手设计师都会面对一个问题，Web页面尺寸宽度到底选哪个？
其实答案并不是固定的，可以做成1920，也可以做1280。黑客认为最重要的决定因素在于你自己的工作电脑分辨率。
这是广告公司AdDuplex送出的统计大数据
市面上的电脑屏幕尺寸多种多样，不过大部分都集中在这几种：
1920-1080：目前常用设备中最大的尺寸（Mac 5K屏除外）
1440-900：15寸MacBook Pro为代表，很多UI设计师首选
1366-768：普通的PC电脑
1280-800：13寸MacBook Pro为代表
在以上设备中，13寸和15寸Mac Book，虽然实际分辨率非常大，但由于是Retina屏幕，视觉展示上还属于以上范围。
所以，网站的内容显示宽度大部分都在1200px以内，确保小的电脑屏幕能显示全网页内容。更早的时候很多都是960px，不过由于屏幕越来越大，目前比较少。
在了解过电脑屏幕尺寸后，网页设计尺寸（本文专指宽度，高度不限）选哪个也很清楚了：选哪个都不会错。
事实上很多设计师是这么做的：用小于1920的屏幕去设计1920的网页。
这样设计没错，而且是很多培训机构、学校的标准定义：网页设计宽度尺寸是1920。
但是如果你用了这个神器的Sketch插件，就不会按照之前的结论来设计了。
以前黑客有介绍过。 点击查看
设计师在做界面的过程中需要经常查看设计稿，以便及时修改设计细节。除非你用1920的屏幕可以设计1920尺寸，否则我们的设计尺寸和屏幕尺寸不相同，就会导致预览的界面偏移，需手动调节居中。
如果设计的尺寸和屏幕尺寸保持一致，那么插件预览的效果就会完美，不用每次都要去调节。
本质上网页设计尺寸选哪个都是正确的，关键在于怎么方便、快捷地帮助我们预览、展示设计稿。
在利用sketch插件频繁预览的前提下，黑客建议网页设计尺寸等于你的工作电脑屏幕尺寸，这会节约你很多时间。在设计后台类的界面时，这个方法的优势会更加明显。
最后有一点需要注意，在进行切图的时候，如果遇到全屏的图，需要把切图修改成1920，否则在1920电脑中切图宽度会不足。不过到了切图这一步，就属于设计工作的后期了，我们只需要花点时间把对应切图改成1920即可。
更多UI设计干货文章请关注UI黑客
微信公众号 uihacker
UI黑客官网 http://www.uihacker.com/
UI黑客论坛 http://bbs.uihacker.com/
⑺ 移动端web在设计时宽度尺寸是多少合适
首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
像素密度
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。
⑻ Web页面设计原则
摘自电子商务系统分析与设计
Web页面设计遵循三条原则：简洁性、一致性和对比度。简称3C原则。
1）简洁性
设计并不再现具体的物像和特征，它要表达的是一定的意图和要求，在适当的环境里为人们所理解和接收。
醒目的图形，要求简洁。
限制字体和所用颜色的数量。
页面上所有的元素都应当有明确的含义和用途。
2）一致性
页面的排版，各个页面使用相同的页边距。文本、图形之间保持相同的间距。
主要图形、标题或符号旁边留下相同的空白。
各个页面使用相同的图标。
色彩和风格的一致性，所有图片都应该具有相同的风格。
文字的颜色要同图形的颜色保持一致并注意色彩搭配的和谐。
一个站点通常只使用一两种标准色。
3）对比度
使用对比度是强调突出某些内容的最有效的办法之一。
使内容容易辨认和接受。
例如：内容提要使用蓝色，正文采用黑色。
也可以使用大标题。
图像对比，题头的图像明确地向浏览者传达本页的主题。
⑼ 可视化大屏经验分享
最近在实际项目中积累了一些经验，以及看到很多大神们的分享，不断学习和丰富关于大屏设计的特点及数据可视化的表达方式。以下经验来自于多处资源，希望对有这方面需求的同学有所帮助。
大屏显示的一些特点：
1.面积巨大——用户站远才能看全内容（所以字也不能设计很小）
2.深色背景——紧张感强，让视觉更好的聚焦，省电
3.不可操作——大屏主要用来给来用户看的。用户一般不会直接操作大屏
4.空间局限——大屏不像网页有滚动条，它的长宽都是固定的
5.单独主题——每块大屏都有具体想给用户表达某个主题
第一步、调查研究
需要调研的点：
1.大屏的主题——这个屏用户要看什么信息（要规避哪些信息）
2.数据的权威和准确性——对具体要展示的信息进行数据的核对正常数据是多少，历史上极限数据是多少?
3.用户的其他需求点——用户说要用TOP10，但有时候只是用户只知道TOP能表达，还有很多形式也能表示TOP的信息
第二步、视觉效果定位（脑暴穷举、分类去重、投票确定）
紧张：数据的实时，动效的变化
科技：新颖的图表，新颖的动效
丰富：数据丰富，丰富层次感，图表类型多，强烈的空间感
权威：安全元素
第四步、数据表现元素
常规数据表现元素：地图，top10，饼图，列表，数字，趋势等。
如果在多个屏上都只放这些元素，展现上会缺乏很多心意，业务差别性也不好体现。所以需要对每个需求再剖析。
第五步、需求分析，数据挖掘
1.拆分维度——将需求拆分到最小维度
2.确定优先——选择最佳数据来说明观点
3.合并维度——对维度元素进行归类，化繁为简
4.最佳表现——确定用哪种表现形式来体现数据
举个栗子：
在做这一系列的具体某一个屏时，某业务需要大屏展示的内容：我们的业务针对特定区域的保护，正在实时防御着世界各地多类型的攻击。能看到每个攻击类型的当天累加值和趋势。
对于这个内容，我们先进行拆分维度。你们能看到多少维度呢？（一定要拆到最小维度）
接着，确定这些维度的主次优先级。
对这些信息进行相似度归类，化繁为简。关联性最多的维度用同一种颜色表示，画出所有的关系。
上图表示，所有的维度互相关系。我们可以发现时间维度和所有的内容都有联系。
但是时间又是个隐形的内容，大屏上的数据为了表示紧张性，时间如果是实时展现的。那么这个维度在设计的时候不必要用某个具体的视觉元素来表现，是通过在时间节点上的动效变化来表现的。所以我们把这时间线去掉，并对交错关系的维度进行位置的调整。
理清逻辑关系，我们最常用的一个方法就是借助于思维导图，这样我们能更加清晰知道业务需求以及数据关联性。
关系理清楚后，我们接下来可以就行规划设计了。
第六步、规划设计
在这块主要是细节和感受的设计。
1.模块设计——考虑的模块纵横栅格布局设计
2.维度表现——具体维度用什么表现的确定
3.动效设计——时间的把握和情感的控制
4.数量控制——对实施数据的不可控性进行展现上的控制。考虑数据极端情况效果太密或太疏，如何规避
大屏和其他显示屏一样，本身都是有固定分辨率的。
拼接大屏 ：大屏几乎都是拼接屏，UI设计时不用考虑屏幕缝隙影响 内容 的呈现，内容不会丢失，但有可能影响 视觉 的表现，例如一个很大的人物图像被缝隙正中“劈成”两半，或者“劈中”了眼睛，看起来很不舒服，所以设计时可以建立缝隙位置的参考线避免类似情况发生。（现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵）
设计尺寸： 拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px。
第七步、检查测试
1.重视需求——过一遍需求是不是能够满足。
2.实地测试——将效果放上大屏，看是否方便阅读，动效是否达到预期，色差是否能接受。
3.可信性测试——当自己的讲解员，给用户讲解大屏。能否一句话描述大屏，同时用户能够理解。
设计大屏一定是一个长期跟进的过程。有很多问题会在真正数据进来了，放在大屏上显示才能发现。
整个项目的流程
那让大屏怎么看起来更炫酷，简单的总结几个方法：
1）布局排版
大屏首先是要服务于业务，让业务指标和数据合理的展现。由于往往展现的是一个企业全局的业务，一般分为主要指标和次要指标两个层次，主要指标反映核心业务，次要指标用于进一步阐述。所以在制作时给予不一样的侧重。
2）色彩
背景色又分为整体背景以及单个元素的背景，无论是哪一个，都遵从两点基本原则：深色调&一致性。
整体背景深色系，可选的余地还是很多的，但是配起来能让多数人都觉得好看的还是以深蓝色系为主，如下所示是几个推荐的配色方案。根据实际项目经验，这里极其推荐大家为单个的组件元素搭配一些透明色，透明度设置在10%上下为宜，具体以实际效果微调。
3）点缀效果
细节影响感官体验，在大屏展现上，细节也会极大的影响整体效果。通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果，能帮助提升整体美观度。顶部的标题通过左右两个对称线条进行点缀，各个组件的细分标题通过不规则渐变色图片进行点缀，另外每个组件都搭配使用了简洁的边框以提升层次感。
4）动效
动效的增加能让大屏看上去是活的，增加观感体验。
以下举几个案例：
阿里在数据可视化方面已经做的相当超前了，早在2015年的双11销售数据就使用DataV数据可视化引擎搭建数据大屏。
以上大屏利用了DataV数据可视化引擎，以日常图表组件库d.chart以及地理相关组件库d.map为基础，专业数据可视化模板设计为视觉框架，依托cube前端框架搭建起来的web服务。通过该引擎可以利用已有组件低成本还原设计师产出的原型图，快速完成多种数据源的绑定，并通过最终的可视化配置调整系统完成所见即所得的视觉调试，最终产出数据大屏。
工作模式：由之前的“设计->开发”变为“设计->开发->设计->开发”，做到高度还原设计效果。
市场上很多可视化的工具，像帆软和Tableau都是都是数据处理分析软件，两个各有特点。
可以根据业务需求，选择工具，来展示自己的大屏。
以下打开finereport设计器中，按照布局样式，从组件栏拖入对应的图表元素到指定区域并绑定数据。
点击预览按钮，浏览器端的效果如下图所示。
接下来就是配色、点缀和动效了，可根据需求调整界面效果。
还有很多值得推荐的可视化工具，以下列出几个，供大家学习：
Raw 、 Infogram 、 ChartBlocks 、 Visualize Free 、 Visual.ly 、 iCharts
Chart.js 、 D3.js 、 FusionCharts 、 JavaScript InfoVis Toolkit 、 jQuery Visualize 、 ZingChart 、 Flot 、 Gephi
地图数据可视化工具
CartoDB 、 InstantAtlas 、 Polymaps 、 OpenLayers 、 Leaflet
纯可视化图表生成/图表插件——适合开发，工程师
Echarts（ echarts..com ）、AntV ( antv.alipay.com )、HighCharts ( www.hcharts.cn )
可视化报表类——适合报表开发、BI工程师
FineReport ( www.finereport.com )
商业智能分析——适合BI工程师、数据分析师
Tableau ( www.tableau.com )
FineBI ( www.finebi.com )
Power BI ( powerbi.microsoft.com/zh-cn/ )
可视化大屏类
阿里DataV ( data.aliyun.com/visual/datav )
数字冰雹 ( www.digihail.com )
这是最近几天对数据大屏的一些学习，在这里进行分享。
如果感觉有帮助，请点赞啦，谢谢~~
⑽ 如何设计自适应屏幕大小的网页 Responsive Web Design
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
如何设计自适应屏幕大小的网页(转)
一、”自适应网页设计”的概念
2010年，Ethan Marcotte提出了”自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯让基历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如何设计自适应屏幕大小的网页(转)
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如何设计自适应屏幕大小的网页(转)
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如何设计自适应屏幕大小的网页(转)
如果屏幕宽度在400像素以下，则6张图片分成三行。
如何设计自适应屏幕大小的网页(转)
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
viewport是网页默认的宽度和高度，上面这行代码坦陵谨的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕汪数面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。