如何進行網站原型設計

1、如何設計出色的網站後台原型

要製作一個優秀的後台原型，我認為主要就分為三個部分：
1.對於後台功能模塊的結構和頁面邏輯有清晰的認識
2.能夠熟練的使用原型工具
3.優秀的設計風格和設計規范
1是基礎，2是進階，3則是讓原型變得出色的點綴。

如果樓主有架構設計能力的話，後台比前台簡單，因為對UI UE的要求不高。
如果架構設計能力不夠的話，那就不是前後台的問題了，這本身就變成了一個不可完成的任務。
因為後台本來就是就是環環相扣的地方。所以要求設計者本人必須思路清晰，條理清楚，即使不去畫，腦子里也有完整的流程圖。整個流程都是順暢的可拓展的和業務貼合的。如果沒有這個基礎，那一切都會變成災難。
然後就是性能了，做數據表的時候一定要考慮好這一點，加上必要的冗餘，不要讓所有聯系最後都變。

2、如何設計出色的網站後台原型

1、畫原型之前，先理清後台管理的功能模塊，通過樹狀結構圖來幫助自己劃分頁面和模塊。
2、理清模塊之後，就可以著手設計後台管理系統的骨架，老漁哥認為可以分為三種：主模塊（主要分為哪些獨立的功能模塊），次級分類（每個功能模塊又有哪些次級的功能分類），功能事件（具體到每個功能頁面內存在哪些主要的操作）
3、思維導圖幫助理清思路很有幫助。
4、思考的路線應該是自上而下，在進行模塊劃分時不要拘泥於具體的某個界面的展現形式。

3、如何設計出色的網站後台原型

明確目標
既然是做原型的角度，我們就從具體工作來談，首先要明確的肯定是產品目標，比如以下幾個問題：
是全新的產品，還是更新改版？
有沒有相匹配的前台系統？或者其他需要配合的線下資源？等等
業務層面的目標是什麼？新增功能？體驗優化？等等
需求分析
明確了產品目標，在做需求分析的時候就會有所側重，總的來說，值得關注的有以下幾個要素：
1、角色許可權
這個非常重要，一定要在具體設計之前熟悉管理後台的所有類型用戶。包括一共有幾類用戶，他們各自的使用需求，操作許可權，還有用戶許可權的設計。
2、信息架構
一定要畫信息結構圖（即產品層面的數據模型），主要用於理清產品結構。畫一下腦圖，列一個excel表單，詳細程度依據自己習慣即可，需要和用戶配合起來設計。
這個是和普通原型設計比較不同的一點，如果是改版還需要特別標注和舊版的區別，以及舊數據的清理或遷移方案。另外，還需要考慮和其他資源（前台、對應頁等）的配合，數據流向以及狀態轉移等。
4、功能流程
常規需要考慮的用戶流程和業務規則流程。根據不同的業務目標，用戶流程可以按場景或功能進行劃分，給予部分用戶適當的優化。業務規則流程需要保證邏輯清晰，閉環，不要遺漏異常流（閉環很重要）。
原型設計
終於可以開始原型設計啦，現在各種管理後台的主題模板都有很多，沒有特別需求的情況下，和開發溝通好選擇一套「抄」即可。
設計過程中注意一下導航，列表（增刪改查排序篩選）等，細節上不要遺漏預覽、錯誤/成功提示、新內容提醒、快捷鍵等

4、網站原型設計工具有哪些

有很多呀， Axure, Basamiq 等等。像我們團隊用戶的就是摹客Mockplus. 提供很多模板和豐富的組件資源，交互原型拖一拖就完成了。 還可以團隊協作、分享和迭代。

5、原型設計是什麼，該怎麼使用它

我們首先明確兩個定義：

原型的定義：

用線條、圖形描繪出的產品框架，也稱線框圖。

交互設計的結果輸出，可能是一張紙上的幾張圖；原型代表著交互設計的結果，當最終實現的時候，交互流程會和原型保持一致；可以理解為草稿或者叫做參照物

原型是一種讓用戶提前體驗產品、交流設計構想、展示復雜系統的方式。就本質而言，原型是一種溝通工具。

原型設計的定義：

線框圖描繪的是頁面功能結構，它不是設計稿，也不代表最終布局，線框圖所展示的布局，最主要的作用是描述功能與內容的邏輯關系。

原型圖是最終系統的代表模型或者模擬，比線框圖更加真實、細致。

其次，了解原型設計的作用，主要有兩點：

溝通： 因為是原型是需求和功能的具象化表達，所以原型可以輔助產品經理與領導、交互、UI和技術的溝通產品思路。雖然需求文檔也是可以滿足溝通需求的，通過用例將交互寫到設計描述文檔中，但是原型可以更詳細地解釋交互。

測試：因為原型相較於UI稿來說修改更方便，所以原型能提高產品經理的功能設計沒通過評審時返工的工作效率。沒有哪一家互聯網公司可以不經過測試，就直接上產品和服務。原型在識別問題、減少風險、節省成本等方面有著不可替代的價值。

（原型設計在產品設計中所處的位置）

設計流程：首先明確產出原型目的以及用戶群體，這個原型有多大效率幫助我傳達設計或測試設計？ 有多少時間做原型？其次需要什麼級別的保真程度？

該如何使用原型設計，那麼原型設計工具就是必不可缺的。

又選擇什麼工具來製作原型？主要考慮以下幾個因素（排名分先後）：

1. 熟悉程度和獲得工具的便利度；

2. 所需的時間和精力；

3. 可復用的代碼/框架；

4. 為測試創建可用的原型；

5. 價格和學習曲線。

目前比較好用的在線原型設計工具有Marvel，Invision，墨刀等等。

希望對你幫助~

有任何疑問可以追問，滿意請採納，謝謝~

6、如何將一個網頁中的元素放到新的原型設計中

?

7、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

8、如何設計出色的網站後台原型

網上很多坐原型的軟體。不過這種只是工具，更多的還是人的思維

9、網頁設計流程，用畫原型圖嗎？邏輯誰來設計

首先要有網頁或者說是網站的需求方提供需求內容。
例如頁面要包括哪些，如用戶登錄，注冊，信息展示，甚至在線支付之類的東西。
然後還要有一些具體功能需求，如用戶注冊需要提供哪些資料，如身份證，地址之類的信息。
信息展示具體是哪些。

有需求方先要寫明自己的需求，然後根據需求進行下一步的設計，原型圖肯定要畫，因為沒有圖就無法製作網頁。
先把圖畫好，然後和對方商定細節，例如logo的大小，段落間距，字體顏色，之類的細節東西。
畫好圖並確定後就可以按照圖來製作網頁。
至於內部後台相關也要商定。
具體由誰來做什麼要視情況而定。
例如如果對方公司有美工之類的，可能就直接給你一些素材甚至畫好的圖讓你直接製作。
也有可能需要你自己畫圖或者找人畫圖。