Axure 設計網站原型時,網站寬度和高度怎麼設置比較好呢?


首先確定自己的角色

如果你是設計師,寬度的設定應該根據項目特點進行設置,從960pix~全響應式,寬度通常是為了保證用戶在任何解析度下可以完整瀏覽重要信息,當然,你配合一些交互動作後,可實現的方式會有很多。底線是讓最少的用戶出現橫向滾動條,如果特別苛刻,連縱向滾動條都不想出現,你就需要考慮全屏響應或者全局響應,這是設計師需要完成的工作;

如果你是產品經理,寬度有個大概範圍即可,不要在提交原型時進行強制設定,會限制設計師後期擴展與視覺發揮。最好是不要提到寬度,當你規劃的內容與實際設計寬度出現衝突時,設計師會第一時間與你溝通,變化內容的數量或者方式。

十分必要的情況下,設定內容寬度或者首屏出現的內容量,其他細則不要設定。設計師會根據自己的經驗進行目標匹配與後期寬度細則設計;

如果你是交互設計師,你應該對用戶使用過程的功能設計負責,同時考慮頁面寬度對該操作或全部交互動作的影響,相對講,你需要設定的規則參數應該多於產品,少於設計師。

在這些工作之前,你應該先去調查目前的終端解析度使用情況,當項目內容與你想實現的設計方案出現衝突時,以解析度最大範圍受益為基本。比如:我們在PC端已經不考慮800*600解析度,可能馬上也不考慮1024解析度;甚至我們也要考慮全局響應式設計,在任何終端上都能有效傳達信息的設計方案,可以從PC端跨到移動端使用。這一切都是根據用戶終端的解析度使用情況而變化的結果。


寬度1200高度不限,首屏高度750-800以內


推薦網站:尺寸ChiCun-為設計,做更好的標準

我也在搜尋「做原型時,頁面寬度設置成多少,最適宜?」的答案,得此文,順帶分享,供參考。

自己一般左右留白50~100px,中間頁面設為1000px,方便得出內容or布局比例。

原文如下:

原型設計工具中,設計元素無外乎都差不多,只是哪個工具操作更容易、視覺上效果更好。使用過VISIO的朋友們,如果用AXURE畫原型上手應該也不是太困難,只是裡面一些交互的東西需要研究研究。AXURE可以生成HTML,如果做得專業一些,可以直接拿來當DEMO版演示用。這段時間我將研究如何將網站原型做得更專業。

【頁面尺寸】網頁的尺寸受限於兩個因素:一個是顯示器屏幕(顯示器現在種類很多,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

如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點。也方便做一些浮動層的設計。如果是800的解析度一般都設成770。但也有設成760的。這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求。不過一般我們都會設定的再稍微小一點,因為有些瀏覽器加了插件或者其他的東西寬度會有變化,所以 800的解析度一般設定760左右,1024的設定990左右。

網頁設計標準尺寸參考:

1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。

2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間,就不會出現水平滾動條和垂直滾動條。

3、頁面長度原則上不超過3屏,寬度不超過1屏,每個標準頁面為A4幅面大小,即8.5X11英寸。

4、全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px (另外120*90,120*60也是小圖標的標準尺寸 )

5、每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K

【網頁廣告尺寸】

1、120*120,這種廣告規格適用於產品或新聞照片展示。

2、120*60,這種廣告規格主要用於做LOGO使用。

3、120*90,主要應用於產品演示或大型LOGO。

4、125*125,這種規格適於表現照片效果的圖像廣告。

5、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。

6、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。

7、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。

8、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*100

本文轉自 「我的需求我做主」 2011年的博客,讓我們的原型更加專業化【頁面規格設置】


參見解析度使用情況,之前的話1024×768, 1440×900是大頭,不過最近1366×768漲的好像很快啊,1280×800在下降,1920×1080在上升,所以寬度的話還是能照顧1024×768不要拖滾動條就好,當然能自適應就更好

高度的話看你網站的實際情況,不過要考慮的因素的話,假設你的用戶用了個比較佔地方的瀏覽器(我就不說是誰了),狀態欄一般是22px,菜單欄算140px(如果算上那些亂糟糟的工具欄的話就沒法估計了所以我們先不管他們了),win7的任務欄40px,如果攤上個小屏的話首屏也就是580px以下了,不過上下滾動條大家早都習慣了,所以除非你是能做好響應式設計的,否則別玩一屏流


推薦閱讀:

手游應該怎麼做 UI 設計?
小米發起一個100萬徵集手機壁紙的活動,一張手機壁紙真的值100萬嗎?
扁平設計與情感化設計的邊界或區別在哪裡?
UI設計是如何崛起的在這十年中——手機Ui?

TAG:用戶界面設計 | Axure65 |