在線網頁原型設計

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

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

2、求一款中文，簡單的畫網頁原型圖軟體。

Axure RP吧

3、有哪些好用的在線界面原型工具，且支持IE

十大界面原型與布局工具

作者夏夢竹

工具開發者原型設計
摘要：原型設計能起到有效溝通的作用，漂亮，直觀的原型圖更是讓人賞心悅目。本文羅列了2013年最新的10大界面原型與布局工具以幫助設計師和開發者創建出更加優秀的產品。
創建網頁或者程序不僅要關注主頁的排版以及與主題想匹配的圖片，還應注重視覺設計，這是因為它更能吸引用戶進而提升搜索量。因此，項目開發首先需要確立良好的設計，創意是必不可少的。所以，項目經理、Web設計師、開發者在線框和原型工具方面需要具備一定的功底。
本文羅列了2013年最新的10大界面原型與布局工具以幫助設計師和開發者創建出更加優秀的產品。
1. Solidify
Solidify允許用戶在模型、線框或者草圖中獲取原型圖。此外，你還可以快速地查看屏幕界面原型。如果在桌面、計算機或者手機上運行Solidify還能輕易地測試出項目原型。如果你沒有太多的時間花在這上面，你也可以共享給其他測試人員，隨時隨地獲取反饋意見。
2. PowerMockup
專為設計師准備的PowerMockup在創建PowerPoint時為線框提供模板。包含各式各樣的模板，包括菜單、表格、文本框、按鈕和標簽。當你在創建PPT時你可以輕易的將這些模板拖入使用。另外，用戶還能在庫中添加自己的條目，只需選擇PPT的外形，然後點擊「添加模板」標簽，一款自定義的模板即可輕松創建。
3. Antetype
當你創建大型的且連續性的項目時，Antetype是最佳選擇，這是因為它允許開發者創建一整套的構件庫。該構件庫可收集各小部件，在原型中方便易用。此外，每個小部件都有一定數量的定製和默認狀態可單獨或者同時進行編輯。
因此用戶在編輯時無需使用不同的副本，Antetype可適應不同項目的需求。
4. UXPin
UXPin是為那些不擅長UX設計的開發者而開發的。經驗豐富的UX設計師為UXPin提供了一整套的完整的工具包。
在UXPin上用戶可以為自己的項目找到所需要的模板。他們通過上傳UX和項目文件來獲取模板，比如Project Canvas、Project Kick Off、Business Model Canvas、Personas等等。
此外，用戶無需來回收發郵件，因為在這里任何項目都可在一起工作。UXPin旨在幫助項目經理開發適應任何一款解析度和設備的響應式線框和原型。
5. QuirkTools
QuirkTools讓網站創建更加簡單和便捷。

利用QuirkTools構建Web應用可幫助用戶創建屬於自己的一款應用。Wires就是典型的例子，該應用幫助用戶創建基於桌面、移動手機或平板電腦的線框模型。此外，QuirkTools還能讓開發者與同事、客戶共同協作打造最完美的設計。
6. Wireframe.cc
利用Wireframe.cc即可輕易的創建線框。Wireframe.cc支持有限的調色板和模板，以簡潔為主。有兩個模板供選擇：移動手機和瀏覽器窗口，前者包含景色和垂直風格；後者則是縱向和橫向風格。有了Wireframes.cc用戶可清晰的看到整個創建過程。
7. Easel
Easel是一款基於瀏覽器的Web設計工具，允許用戶記錄模型和創意。其功能包括按鈕、表和文本框。這款工具還集成了Twitter Bootstrap庫貫穿其他額外的圖標和顏色。此外，Easel 讓用戶在Web中設計保持最佳像素，用戶可以使用先進的工具比如CSS3、Web字體，無需在瀏覽器和文本編輯器之間來回查看，告別繁瑣的過程，輕松創建應用。
8. InVision
InVision讓你以高水準的級別快速創建令人印象深刻的原型。利用這款工具，用戶可在很短的時間內鏈接到UX草圖、設計以及線框，還能與其他團隊分享該項目。InVision使設計演示更加輕松方便，用戶可以在項目中進行實際演示，在瀏覽器中載入或者以SMS形式連接到移動設備上。
該工具還支持追蹤功能，讓你輕松查看項目進度。
9. Proto.io
Proto.io這款工具完美適合設計師在觸摸屏幕上的小工具。支持主流的移動觸摸風格和手勢，包括swipe、pinch、tap、zoom、tap-hold。此外，還能整合動畫屏幕轉換比如，幻燈片、旋轉、流、翻轉等等。
該工具不僅僅是為了生產先進的屏幕轉換，還能允許用戶學習和應用最基本的動畫技能比如在原型創建中的移動、縮放、旋轉等等。
10. POP

有了Prototyping on Paper (POP)創建iPhone原型不再是難事，其提供了一個傳統的高科技線框技術。沒有復雜的軟體，所有的用戶需要在紙上或者筆記本上繪畫或繪制出線框。
該線框僅通過攝像頭拍攝，利用POP確保草圖能自動調節對比度和亮度，然後通過「鏈接點」連接到草圖來設計模板。首先確保任何事情都在完美狀態，用戶只需點擊「play」並模擬介面即可。
最後：
在設計網頁或程序之前，需要把界面給「畫」出來成為原型設計，就像動畫片要畫分鏡頭、手稿一樣。原型設計能起到有效溝通的作用，漂亮，直觀的原型圖更是讓人賞心悅目。有了這些工具，原型和線框變得更加簡單和方便，即使是初學者也可設計自己的網站或者應用，趕緊嘗鮮吧。
當然，原型工具還有很多很多，歡迎與我們分享。

4、如何用Mockplus來畫簡易網頁版原型圖

打開Mockplus這個軟體，點擊新建項目，選擇你需要用的頁面模式，如：手機、平板、網頁等，選擇好就可以進行原型圖的繪制了。

2
首先，在畫之前引入眼簾的是Mockplus的工具欄，有組件、交互、擴展、布局、移動、靜態、批註等功能；點開看看，熟悉各種功能的使用；

3
現在，熟悉完畢後，我們可以進行簡單網頁版原型圖繪制。
END
方法/步驟2

一、利用組件里的線框工具進行拖拽，可隨意拖拽形成大概布局，然後可以在線框中進行編輯，選擇需要的字體顏色大小，線框粗細等，如下圖所示；

二，利用組件里的擴展功能，繪制你所需要的搜索框，表單等功能；利用圖片功能可以導入你所需要的圖片使布局圖變得更有直觀性；如下圖所示；導入完後，還可以隨意縮放圖片大小。

三、利用布局裡的工具，添加選項卡、分組框等需要的功能，也可以進行編輯；
四、對需要的功能組件進行拖拽，編輯，一個簡單的網頁版原型圖就畫好了！

5、關於網頁和移動端原型設計的方式

你說的是高保真原型，可以先用PS等設計工具做好界面設計，再上傳到摹客轉為高保真原型，也可以直接用摹客在線的原型設計工具畫高保真交互原型，UE和開發也可以直接在摹客查看圖層信息和下載切圖，傳達意見更准確。

6、最好的輕量級 網頁設計原型工具是哪個

收不到簡訊驗證碼，原因以及處理方法如下：
系統簡訊延時，可以耐心等待一下，或者嘗試在驗證碼一欄點擊「重新發送」，等待看看是否可以接收到簡訊；
檢查手機是否停機，是否能夠正常接收簡訊，欠費停機的手機是無法接收簡訊的，可以在手機繳費以後再操作；
手機號或者手機卡問題，可以嘗試更換別的手機號或者將手機卡放到另一個手機試試；
網路特殊高峰時期，如春節，大量簡訊延時，可以更換別的時間段試試；
系統本身問題，等待微信系統更新或者修復。

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

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

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

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

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

9、提供幾款界面原型設計軟體

做界面設計如果沒有好的工具進行輔助，那隻會導致事倍而功半。下面推薦幾款不錯的界面原型設計軟體：

界面原型圖繪制工具 Pencil

Pencil 是一款開源的原型圖繪制工具，手繪風格的，就像自己在紙上畫的那樣。Pencil 還可以用來繪制各種架構圖和流程圖，同時還提供 Firefox 的插件。

開源原型設計工具 Framer

Framer 是一個開源原型設計工具，使用 CoffeeScript 編寫。支持動畫效果和交互操作。

基於 HTML 的界面原型庫 Shireframe

Shireframe 可通過 HTML 實現界面原型的繪制。基於 AngularJS 和 jQuery 驅動，使用 RequireJS 進行模塊載入，使用 Bootstrap 進行展示 

原型製作軟體 Axure RP

AxureRP 是一個快速原型製作軟體，由美國Axure Software Solutions, Inc.公司開發。 Axure RP 能讓操作它的人快速准確的創建基於Web的網站流程圖、原型頁面、交互體驗設計、標注詳細開發說明，並導出Html原型或規格的Word開發文檔。

軟體界面原型設計工具 UIDesigner

UIDesigner，簡稱「UID」，是一款進行軟體界面原型設計的工具。 它擁有強大的模板和預制功能，能夠快速的搭建起軟體界面的高保真原型。可以實現設計師、產品經理、程序開發工程師三者間的快速溝通，減少不必要的工作內耗。

產品原型設計工具 Mockup

Mockup 是一款手繪風格的產品原型設計工具，在短短的幾分鍾內，用戶可以創建一個模型。採用 Vala 語言開發。 應用程序使用從工具條中拖放對象到虛線帶白色區。

產品原型設計工具 Balsamiq Mockups

Balsamiq Mockups是產品設計師繪制線框圖或產品原型界面的利器。在產品設計的需求階段，低保真的線框圖或者草圖設計介於產品流程設計與高保真DEMO設計之間，在Balsamiq Mockups出現之前，流程圖可以使用Visio，高保真DEMO可以使用Axure，但我們並沒有好用的草圖設計工具；在產品設計管理中，我們通常在產品的業務流程和數據流轉已經相當明確時才開始進一步考慮產品的結構層和框架層，雖然此時紙、筆、白板都是非常簡單方便的交流工具，但是他們的最大劣勢就是——很難將有價值的原型保存下來。Balsamiq Mockups的出現完美的解決了這個問題。

最後需要說的是，無論是推崇手繪，還是喜歡原型軟體，做界面設計最重要的還是想法，工具只是用來幫助實現想法的。不必過於追求技術，也不必過於追求視覺表現，有時只需要專注於產品邏輯、頁面交互、布局結構這些，其餘的就交給美工。