Ⅰ Axure 設計網站原型時，網站寬度和高度怎麼設置比較好
【頁面尺寸】網頁的尺寸受限於兩個因素：一個是顯示器屏幕（顯示器現在種類很多，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
Ⅱ 初級產品經理-如何高效繪制AXURE原型
原型是產品經理或者交互設計師所設計的某一需求或者某一問題的具體的解決方案。繪制原型的工具有很多，我們公司大多的產品用的都是Axure。用這個軟體，高保真或者低保真原型都能做的很好。那麼，怎樣的原型才適合團隊交流？
畢竟繪制出來的原型並不是只給自己看的，還要講解給團隊里的成員，UI/前端/開發。特別是進行小組內評審的時候，通過演示原型，需要向他們講解產品內部的邏輯、具體的頁面、動效等，還要向他們詢問設計是否合理，能否實現等，靜心傾聽他們的意見。這時候，原型就是一個思維傳達的工具，將你的想法，翻譯並灌輸給你的團隊成員。同樣，原型是也團隊的交流工具，針對繪制出來的原型，每個人都可以談談自己的看法，交流思想，完善原型不足的地方。
所以原型繪制出來，必須要有基本的交付標准。
一、原型設計的基本交付標准
1.清楚------讓他人能明白產品是干什麼的，包括什麼功能，有哪些頁面。
需要清楚地表達頁面有哪些內容模塊
需要清楚地表達模塊內部的構成元素
2.清晰------讓隊友知道具體有哪些要求，指導他們如何做
【1】功能操作
某一個功能可以進行哪些操作，點擊/滑鼠懸浮/拖動等操作，以及頁面會有什麼反應。（方便開發的工作）。
【2】操作路徑
有一些操作是要跳轉頁面，跳轉的路徑需要標清楚，跳到哪去了，涉及哪些頁面，頁面之間是如何聯系的。防止用戶迷失。
【3】點擊狀態
一些鏈接，按鈕，需要標明它初始的時候是什麼樣，滑鼠懸浮有什麼效果（顏色/下劃線/提示語等），點擊的樣式變化，以及點擊後的樣式。（這些可以為前端的工作提供方便）
【4】信息組合
相關的信息需要組合在一起，比如一些基本信息，姓名/性別/年齡等最好放一塊，不要分開。不相關的保持距離。
【5】位置排序
頁面的布局應該適應用戶的習慣，瀏覽方式、工作任務。突出強調重點，方便用戶的工作。一些數據可以思考一下它們的排列方式，按什麼排序，能方便用戶查找，仍舊是「以用戶為中心」。
3.周全-----產品的各種細節，不頌搭肢能疏忽
【1】交互狀態
某些重要的操作，交互樣式是怎樣的，效果如何，最好單獨抽出來做成高保真，演示給他人看，讓他們對產品有深入的體驗和感受。
【2】數據顯示
原型上涉及的相關數據做好有真實的案例，將需要獲取的關鍵數據全部展示出來，比如一篇文章，需要的數據：作者、發布時間、瀏覽量、喜歡數、收藏數等，方便開發准備必要的數據介面。
【3】異常考慮
需要考慮一些突發情況的應對，比如斷網、載入太慢、數據已經被刪除了、數據找不到了、沒有訪問許可權等等情況。
【4】配套頁面
產品里的一些功能可能和其他產品有關聯，需要將可能涉及的其他頁麵包括到項目內。比如頁面在wap上手機的瀏覽樣式、一些發送給用戶的消息/簡訊的內容和樣式等等。
4.基本審美
【1】對齊
【2】間距
【3】顏色
【4】字體
推薦大家看看《寫給大家看的設計書》這類易上手的書籍。
5.基本規范
【1】頁面尺寸
web的寬度有960px、1000px、1200px，App有安卓、iphone5、iphone6等，需要與已有的產品保持統一的尺寸。
【2】字體大小
標題可以是18px或者16px，內容可以是14px。既要考慮用戶是否看到清，又要考慮美觀。
【3】顏色
原型不要有太多的顏色，堅持黑白灰，除非要突出，可以用其他的顏色。
【4】彈窗
彈唱的樣式最野世好做統一，彈窗名+內容+操作按鈕+關閉
【5】元件
不在原型正文添加過多的截圖、圖標樣式，會對UI的設計造成干擾。
二.Axure的快捷使用技巧
工欲善其事枝悄必先利其器，工具使用的越嫻熟，才能節省大量時間用於方案的思考。下面將簡要分享Axure繪制原型時的一些快捷操作：
首先在頂部菜單欄中找到<視圖>，把需要的部件顯示，就可以設置了。
1.組件庫的建立（能提高效率，保證產品層面的統一一致）
2.母版的使用（適用於多頁面通用的部分，修改後，集體自動更新）
3.設置頁面樣式（頁面的字體、背景能一次性設置好）
4.元件的交互樣式
5.元件組合
把要組合的原件用滑鼠框在一起，按住ctrl+G，成為組合後就可方便復制拖動了。許下按住ctrl+shift+G，也可以點擊選中後，點擊下圖的兩個圖標來組合和取消組合。
6.對齊、居中、平均分布
選中要對其的內容，選擇一種分布樣式，就能快速得到整齊的原型樣式，而不用一個個手動調整。
7.輸入框類型的設置（預設好類型）
一些輸入框，可能需要設置默認文字，可以直接選中了輸入框後，在原件屬性里設置提示文字和一些限制。
8.元件的提示語
有些文字需要有滑鼠懸浮顯示提示語的動作，可以直接在原件的屬性里設置「原件提示」，輸入要顯示的內容，即可。
三、製作原型的過程
1.梳理功能點-------------------將需求轉化為功能清單，標出重要等級（前提是需求已經梳理清楚）
2.規劃產品結構----------------用Xmind或者筆和紙等工具畫出產品有幾個頁面，每個頁麵包含哪些元素
3.整理原型目錄----------------用Axure添加原型的幾個頁面，考慮頁面之間的跳轉關系
4.設計頁面的布局（打格子）-----用不同的色塊，方框來表示這部分將要表示什麼板塊，設計好頁面的布局
5.填充各模塊的細節----------在方框里把具體的信息和數據填充完整
6.增加少量的交互動作--------------體現在一些涉及到任務的操作
7.頁面注釋-------------完善交互說明
8.審查自檢------------------功能是否覆蓋完全；頁面有沒有缺失；流程是否明確；狀態是否完備
四、原型應用中的經驗
因為我多是負責後台系統的優化，所以是直接和開發打交道，如果涉及前台頁面，就需要UI先將原型做成圖片，再由前端製作含有動效的demo，開發再按照demo開發。但是不論哪種，繪制出來的原型一定需要讓隊友都明白你的邏輯和要表達的重點。
第一次負責項目的時候，我用的是高保真，畫完整的原型就花了一星期多，各種動作和交互，恨不得做個虛擬的產品。但是和開發講了原型後，等來驗收項目的時候，才發現，開發大部分都沒有按照原型上的動作來，甚至連細節都有遺漏。一個個催著補上後，我開始思考這種方式是不是不太劃算，太費事費力，結果又不太好。
後來我看了我上級繪制的原型，都是以靜態頁面為主，可以說是低保真，但是每一種情況都詳細地用圖文描述清楚，點擊之後是什麼樣子，將要獲取什麼數據，失敗了會怎麼樣都有。而且這種方式，完成的特別快。於是我就選取低保真模式的開始畫原型，結果發現，開發有時候並不能將一些動作做好。
於是我開始「T式原型 」。「T式原型 」就是大部分是以低保真鋪展開，將整個產品的邏輯都直接呈現出來，再在某些需要重點描述的地方用高保真描述深入。所以，我的原型大部分是以 低保真+注釋說明和高保真+動作演示 的組合。 不過對於交互簡單的產品來說，低保真模型足夠了 。
每個產品繪制原型的習慣和風格都有所不同，但關鍵還是需要進行小組會議來向隊友們講解原型和邏輯，在開發的過程中，需要多溝通。
另外，分享大家關於AXURE學習的網站，可以在裡面找到免費的軟體安裝包和教學課程。
https://www.axure.com.cn/
如果對文章感興趣，歡迎評論留言，堅持喜歡的事情，加油~
Ⅲ Web UI設計規范及界面實現注意事項
適用於WEB產品線的人機交互界面的設計，貫穿於以用戶為中心的設計指導方向。根據WEB產品的特點制定出的一套規范，以達到提升用戶體驗，控制產品設計質量，提高設計效率的目的。
適合界面設計師、用戶體驗設計師、前台設計工程師、發布支持人員、運營編輯人員等
1．【統一識別】規范能使頁面相同屬性單元統一識別，防止混亂，甚至出現嚴重錯誤，避免用戶在瀏覽時理解困難。
2．【節約資源】除了門戶網站、活動推廣等個性頁面外，相對於後台系統、物聯網系統、數據統計系統、等界面設計，使用規范標准能極大的減少設計時間。
3.【重復利用】相同單元屬性，頁面新建時可以執行此標准重復使用，減少無關信息，就是減少對主題信息傳達干擾，利用閱讀與信息傳遞。
未通過客戶或上級領導確認產出的界面，請勿上傳至藍湖協作系統
設計師在原型步驟及應該想好對應的圖層結構，交互特效，並和前端開發人員做好交流，是否可以實現，功能的評估一定要細致
1．已上傳至藍湖協作平台的高保真界面，應根據平台中的標注尺寸進行精確還原，Web界面還原度不得低於95%；移動端還原度為100%（精確到一像素）。
2．開發人員完成視覺部分內容以後，必須由UI設計師及前端技術負責人進行校對工作。
3．如遇到界面效果復雜或組件樣式特殊等難以實現的問題，應及時與對應的UI設計師或前端技術負責人溝通處理，不能隨意更換。
4．前端開發人員無權更改設計圖中的樣式及功能，遇到問題應及時與設計人員協商。
5．如遇產品經理或項目負責人未通過設計師確認，直接要求修改界面視覺效果部分，前端開發人員可拒絕修改。必須由UI設計師對高保真圖紙更改後再進行相應的修改。
Ⅳ 如何進行web頁面原型圖設計
最後半天心不在焉拖拖拽拽把各個部分都搭建好了，可是做出來的頁面慘不忍睹，自己都沒勇氣打開。晚上回家後和鄰居又討論了三個小時，最後熬夜把原型圖完成。雖然最後原型圖也沒有被採納，但是這次原型圖居然受到了表揚，領導說我的原型圖有了提升。今天就寫下這篇文章，為這段時間的工作做一個總結。原型設計前：①�0�2�0�2 重點突出內容：要清楚明了頁面需要突出的內容是什麼，這個在前期的討論中一般就已經確定；②�0�2�0�2 第一功能目的：除了內容以外，功能方面需要突出的是什麼？如引導注冊或像下一級頁面引導流量。③�0�2�0�2 如果是改版要考慮改版要解決的問題是什麼？對於前一版頁面存在什麼問題 畫原型圖要考慮：④�0�2�0�2 內容板塊如何劃分，頁面的內容主要分成幾個模塊，每個模塊內存放的都應該是一些相近的內容；⑤�0�2�0�2 模塊與模塊之間的關聯性：每個模塊與其相近的模塊之間應該有一些邏輯上的關聯性，而不能隨意的進行拼接；⑥�0�2�0�2 頁面的流程：模塊與模塊的上下承接關系，模塊與模塊應該上下存在某些邏輯上的連接性。 頁面完成後：完成原型圖後一定要進行檢查，主要從以下三個方面進行檢查：⑦�0�2�0�2 內容是否完整：對比框架中的每一部分內容檢查是否完整；⑧�0�2�0�2 第一屏是否把最重要的內容展現出來：頁面第一屏以外的內容基本都是輔助內容，如果不能在第一屏就把內容全部展現，基本上就等於內容不完整；⑨�0�2�0�2 功能是否實現：想要表達的功能是否在明顯的地方表現出來；⑩�0�2�0�2 流程是否順暢：把相應的流程走一遍，看是否流暢。 注意tips：①�0�2�0�2 未完成的作品拿出來討論頁面不完整不代表思想不完整，即使是不完整的頁面，裡面應該也要有一個清晰的邏輯圖。通過這種方法可以強迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有屬於自己的清晰思路，對內容、功能和流程自己要先想明白，可以列舉一些具體的問題來輔助理清自己的思路。③�0�2�0�2 堅持自己的想法每一個人都有自己的想法，只要你理清自己的思路，就一定要堅持下去。用自己的邏輯解答別人的疑惑和質疑，形成自己的思路。 關於工具和作圖：之前花了很多時間去研究axure，是學會了一些作圖的技巧，可是漸漸發現這些對頁面的提高基本不大，我是覺得在掌握基本的工具使用時可以暫時忽略工具。頁面最重要的是你的想法，等到想法成熟之後不妨慢慢的考慮工具的深入，太多的考慮技巧方面的問題反而會模糊視線。思考的過程和畫圖的時間可以在7:3都無所謂，前期的框架和流程思路想好後，後面的原型圖也就水到渠成了。