網頁端原型設計尺寸

1、PC端，頁面寬度，設計多少最合適。

這個要根據客戶要求了，就我公司而言吧，就沒有非常嚴格的頁面寬度要求，不過一般都1000+，因為900左右的相對而言有些太小氣，而1000=以上的一般也都1200以上，不排除1000-1200。
不過主要是看滿框或者非滿框了。
如果是滿的話：width:100%;(這沒得講，必須這樣了)

非滿的話：width:1280px;(大多數，但是不能太死，主要看設計內容，還有客戶需求)

2、如何在Axure中正確設置APP原型的尺寸

目前比較好的解決辦法是：

下載Axure

2.如果是給itouch或者iPhone用的，比較好辦，直接內用320×480的解析度畫好輔助線，容然後畫原型

3.按F5生成原型的時候，在「Mobile/Device」選項中可以設置適配移動設備的特殊原型

4.設置說明見下圖：（頁面大小顯示我的這個設置是按320×480的大小，默認不縮放）

5.用你的移動設備訪問你生成的原型鏈接（如本地伺服器，或Dropbox託管）6.把該頁面創建一個桌面快捷方式7.完成（有icon，有閃屏）

另：想做滑鼠動作或者復雜的頁面交互比較麻煩，不推薦，盡量簡潔。

3、使用Axure製作App原型怎樣設置尺寸

提供一個常用的移動設備尺寸列表，製作原型時根據查詢的尺寸在axure中設置大小即可，設計完畢後在生成HTML時設置 手機/移動設備 中勾選包含視圖介面（ include Viewport tag ），並進行配置，生成HTML後再到相應的移動設備中瀏覽就正常了。

設備名稱 系統平台 像素密度 屏幕尺寸 豎屏尺寸 橫屏尺寸
Acer Iconia Tab A100 Android 166dpi 7″ 800 1280
Acer Iconia Tab A101 Android 170dpi 7″ 600 1024
Acer Iconia Tab A200 Android 160dpi 10.1″ 800 1280
Acer Iconia Tab A500 Android 149dpi 10.1″ 648 1280
Acer Iconia Tab A502 Android 149dpi 10.1″ 800 1280
Ainol Novo 7 Elf 2 Android 170dpi 7″ 496 1024
Apple iPad iOS 132dpi 9.7″ 768 1024
Apple iPad 2 iOS 132dpi 9.7″ 768 1024
Apple iPad 3 (and 4) iOS 264dpi 9.7″ 768 1024
Apple iPad Mini iOS 163dpi 7.9″ 768 1024
Apple iPhone 3G iOS 163dpi 3.5″ 320 480
Apple iPhone 3GS iOS 163dpi 3.5″ 320 480
Apple iPhone 4 iOS 326dpi 3.5″ 320 480
Apple iPhone 4S iOS 326dpi 3.5″ 320 480
Apple iPhone 5 iOS 326dpi 4″ 320 568
Apple iPod Touch iOS 163dpi 3.5″ 320 480
Archos 70b (it2) Android ?? 7″ 600 1024
Archos 80G9 Android 160dpi 8″ 768 1024
Arnova 7 G2 Android ?? 7″ 480 800
Arnova 7FG3 Android ?? 7″ 640 1067
Arnova 8C G3 Android 125dpi 8″ 800 1067
Arnova 10b G3 Android 160dpi 10.1″ 600 1024
ASUS Padfone Android ?? 4.3″ 800 1128
ASUS Transformer Pad TF300T Android ?? 10.1″ 800 1280
ASUS Transformer TF101 Android 149dpi 10.1″ 800 1280
BAUHN AMID-972XS Android ?? 9.7″ 768 1024
BlackBerry 9520 Blackberry OS 185dpi 3.25″ 345 691
BlackBerry Bold 9360 Blackberry OS 246dpi 2.44″ 320 N/A
BlackBerry Bold 9780 Blackberry OS 246dpi 2.44″ 480 N/A
BlackBerry Bold 9790 Blackberry OS 246dpi 2.45″ 320 N/A
BlackBerry Bold 9900 Blackberry OS 287dpi 2.8″ 356 N/A
BlackBerry Curve 9300 Blackberry OS 246dpi 2.45″ 311 N/A
BlackBerry Curve 9320 Blackberry OS 164dpi 2.44″ 320 N/A
BlackBerry Curve 9380 Blackberry OS 188dpi 3.2″ 320 N/A
BlackBerry PlayBook Blackberry Tablet OS 169dpi 7″ 600 1024
BlackBerry Torch 9800 Blackberry OS 187.5dpi 3.2″ 320 480
BlackBerry Torch 9810 Blackberry OS 250dpi 3.2″ 320 480
BlackBerry Z10 Blackberry OS10 355dpi 4.2″ 345 521
Google Nexus 5 Android 445dpi 4.95″ 360 598
HP Touchpad Android 132dpi 9.7″ 768 1024
HP Veer WebOS 197dpi 2.6″ 320 545
HTC 7 Mozart Windows Phone 7 252dpi 3.7″ 320 480
HTC 7 Trophy Windows Phone 7 245dpi 3.8″ 320 480
HTC Desire Android 252dpi 3.7″ 320 533
HTC Desire C Android 164dpi 3.5″ 320 480
HTC Desire HD Android 216dpi 4.3″ 320 533
HTC Desire Z Android 252dpi 3.7″ 480 800
HTC Evo 3D Android 256dpi 4.3″ 540 960
HTC Legend Android ?? 3.2″ 320 480
HTC One S Android 256dpi 4.3″ 360 640
HTC One V Android 252dpi 3.7″ 320 533
HTC One XL Android 260dpi 4.7″ 360 640
HTC Sensation XL Android 198.5dpi 4.7″ 360 640
HTC Titan 4G Windows Phone 7 198.5dpi 4.7″ 320 480
HTC Velocity 4G Android 245dpi 4.5″ 360 640
HTC Wildfire S Android 180dpi 3.2″ 320 480
HTC Windows Phone 8X Windows Phone 8 341dpi 4.3″ 320 480
Huawei U8650 Android 165dpi 3.5″ 320 480
Kindle 3 Kindle 167dpi 6″ 600 N/A
Kindle Fire HD 7 Android 216dpi 7″ 533 801
Kindle Fire HD 8.9 Android 254dpi 8.9″ 533 801
Kindle Fire HDX 7″ Android 323dpi 7″ 600 902
Kindle Paperwhite Kindle 212dpi 6″ 758 N/A
Kobo eReader Touch Android N/A (E Ink) 6″ 600 N/A
LG Optimus 2X Android 233dpi 4″ 320 533
LG Optimus L3 Android 125dpi 3.2″ 320 427
LG Optimus Pad Android 168dpi 8.9″ 768 1280
LG Viewty KU990 Java 155dpi 3″ 240 400
Microsoft Surface (RT) Windows RT 148dpi 10.6″ 768 1366
Motorola Defy Android 265dpi 3.7″ 320 569
Motorola Droid3 Android 275dpi 4″ 360 599
Motorola Droid Razr Android 256dpi 4.3″ 360 640
Motorola Milestone Android 265dpi 3.7″ 320 569
Motorola Razr HD 4G Android 312dpi 4.7″ 360 598
Motorola Razr M 4G Android 312dpi 4.7″ 360 598
Motorola Xoom Android 149dpi 10.1″ 800 1280
Motorola Xoom 2 Android 149dpi 10.1″ 800 1280
Nexus 4 Android 318dpi 4.7″ 384 598
Nexus 7 Android 216dpi 7″ 603 966
Nexus S Android 233dpi 4″ 320 533
Nokia 300 Nokia 167dpi 2.4″ 234 N/A
Nokia 500 Symbian 229dpi 3.2″ 360 640
Nokia 700 Symbian 229dpi 3.2″ 240 427
Nokia 2700 S40 200dpi 2″ 240 N/A
Nokia Lumia 520 Windows Phone 8 233dpi 4″ 320 480
Nokia Lumia 610 Windows Phone 7 252dpi 3.7″ 320 480
Nokia Lumia 710 Windows Phone 7 252dpi 3.7″ 320 480
Nokia Lumia 800 Windows Phone 7 252dpi 3.7″ 320 480
Nokia Lumia 820 Windows Phone 8 217dpi 4.3″ 320 480
Nokia Lumia 900 Windows Phone 7 217dpi 4.3″ 320 480
Nokia Lumia 920 Windows Phone 8 332dpi 4.5″ 320 480
Nokia Lumia 1020 Windows Phone 8 332dpi 4.5″ 320 480
Nokia Lumia 1520 Windows Phone 8 367dpi 6″ 320 480
Nokia N95 S60 154dpi 2.6″ 240 N/A
Nokia N900 Naemo 267dpi 3.5″ 480 800
Panasonic Toughpad A1 Android 127dpi 10.1″ 768 1024
Samsung Galaxy Ace Android 165dpi 3.5″ 320 480
Samsung Galaxy Ace 2 Android 246dpi 3.8″ 320 533
Samsung Galaxy Grand Android 187dpi 5″ 480 800
Samsung Galaxy Note Android 285dpi 5.3″ 400 640
Samsung Galaxy Note 2 Android 267dpi 5.5″ 360 640
Samsung Galaxy Note 10.1 Android 149dpi 10.1″ 800 1280
Samsung Galaxy S2 Android 217dpi 4.3″ 320 533
Samsung Galaxy S3 Android 306dpi 4.8″ 360 640
Samsung Galaxy S3 Mini Android 233dpi 4″ 360 640
Samsung Galaxy S4 Android 441dpi 5″ 360 640
Samsung Galaxy S4 Mini Android 256dpi 4.3″ 360 640
Samsung Galaxy Tab 2 7.0 Android 170dpi 7″ 600 1024
Samsung Galaxy Tab 7 Android 170dpi 7″ 600 1024
Samsung Galaxy Tab 8.9 Android 170dpi 8.9″ 800 1280
Samsung Galaxy Tab 10.1 Android 149dpi 10.1″ 800 1280
Samsung Galaxy Tab 10.1 Android 149dpi 10.1″ 800 1280
Sony Xperia E Dual Android 164dpi 3.5″ 320 480
Tesco Hudl Android 242dpi 7″ 600 799
Windows Surface Pro Windows 8 207dpi 10.6″ 1080 1920

4、如何進行web頁面原型圖設計

簡單來說，產品經理進行頁面原型設計時，只需要把業務邏輯和交互邏輯講明白，不需要做得特別精美，而是要把握重點，把重心放在分析用戶需求、規劃產品功能上。之後交互設計師可以根據產品經理的原型圖進行設計。
從使用工具來看的話，產品經理在做原型時其實只需要Mockplus或摹客原型這樣的快速原型設計工具。只要提前想清楚主要的功能點和交互邏輯，使用工具內置的現成組件，十分鍾就能把原型做完。
交互設計師需要做的是根據產品經理繪制的原型版和相關產品文檔，繪制高保真原型，通常交互設計師會使用PS、sketch、XD之類的設計工具，在完成頁面設計後上傳到摹客等協作平台添加交互。完成後也可以直接發鏈接給其他成員審閱，這時候主要看的就是原型呈現的視覺效果了。

5、一般做網頁設計背景尺寸定多大？

網頁的背景多大要看對網頁的要求的，
網頁設計標准尺寸:
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

6、如何在Axure中正確設置APP原型的尺寸

目前比較抄好的解決辦法是襲：

下載Axure

2.如果是給itouch或者iPhone用的，比較好辦，直接用320×480的解析度畫好輔助線，然後畫原型

3.按F5生成原型的時候，在「Mobile/Device」選項中可以設置適配移動設備的特殊原型

4.設置說明見下圖：（頁面大小顯示我的這個設置是按320×480的大小，默認不縮放）

5.用你的移動設備訪問你生成的原型鏈接（如本地伺服器，或Dropbox託管）6.把該頁面創建一個桌面快捷方式7.完成（有icon，有閃屏）

另：想做滑鼠動作或者復雜的頁面交互比較麻煩，不推薦，盡量簡潔。

7、使用Axure製作App原型應該怎樣設置尺寸

最近有幾位copy小夥伴兒都提出同樣一個疑問：想用Axure設計一個 APP原型 放到真實的移動設備中演示，但不知道應該使用什麼尺寸？
若要解釋清楚像素和解析度需要的篇幅比較長，請大家參考網路。
這里金烏直接給大家提供一個常用的移動設備尺寸列表，製作原型時根據查詢的尺寸在axure中設置大小即可，設計完畢後在生成HTML時設置 手機/移動設備 中勾選包含視圖介面（ include Viewport tag ），並進行配置即可。
如：

iPhone4 320*480
iPhone5 320*568
Samsung Galaxy S4 360*640

Viewport Sizes

8、axure製作網頁 怎麼讓他自適應不同電腦的解析度呢？

1、雙擊打開Axure RP 8設計軟體，在基本元件中拖曳一個矩形1到畫布上。

2、再次在基本元件里拖曳兩個按鈕到畫布上，放在矩形框上方。

3、再拖曳一個佔位符到矩形框下方。

4、在右側屬性里自適應勾選「啟用」，彈出「影響所有視圖」。

5、點擊左側自適應按鈕，彈出自適應視圖，分別設置手機、平板和電腦解析度的范圍。

6、這時界面上顯示出不同解析度界面，然後預覽該界面。