⑴ 做響應式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。