說說怎麽畫原型吧！
在繪制原型之前，更重要的是繪制頁面流程圖和信息架構圖！如果妳沒有這些東西，開始畫原型，那麽等待妳的是無盡的變化。
頁面流程圖從用戶的角度看流程的合理性。通常適合跳轉比較復雜的產品功能，比如電商和社交產品。
為什麽要繪制頁面流:
(1)是交互設計/原型設計的基礎，也是邏輯基礎。如果不考慮頁面流動的順序，那麽妳畫出來的原型壹定不是確定的版本。
(2)它代表了用戶的操作過程，先畫出頁面流程圖可以快速發現體驗問題。通過頁面流程圖，可以想象用戶在使用產品時的操作過程，找出可能出現的問題。
(3)突出頁面的關鍵元素和邏輯關系，提高原型的設計效率。很多頁面並不是全新的頁面，而是在原有頁面上做了壹些修改。如果妳知道頁面流程的順序，給妳畫原型會減少很多工作量。
頁面流程圖包括:
(1)正方形:業務流程中的正方形部分，異常流程或層通常用菱形表示。
(2)流向:主要流向和輔助流向。
(3)關鍵要素:每個過程中要體現和表達的關鍵要素是什麽？
繪制頁面流程圖的工具:
(1)Axure:畫壹個頁面流程圖之後可以畫壹個原型。
(2)ppt:易於解釋
需要註意的是:
(1)回歸業務流程，明確主線:頁面流程必須來自業務流程，壹般是業務流程的壹個方形部分。異常過程壹般是由彈性層或彈出窗口提示的。如果業務流程畫得好，頁面流程就簡單了。
(2)明確頁面中的關鍵元素:功能在頁面中，需要表達的元素有哪些。增加異常流量的處理邏輯。添加輔助幫助頁面。考慮下遊觸發點(按鈕/鏈接/滑塊...).
(3)溝通優化:首先要把涉及的頁面盡可能的窮盡，然後做減法，有些頁面會合並或者刪除。通過原型草圖優化調整頁面的關鍵元素。多和UI、UE、前端R&D溝通，效果會更好。
頁面流程圖的壹般規則:
頁面流圖例:
壹個具體案例:
業務流程:
頁面流量:
主要是分離了普通用戶的操作流程，增加了異常處理。
普通用戶的關鍵頁面和關鍵流程:
頁面流程圖:
(1)分五頁，確定流向。
(2)固定元素，比如在“1購物車”中，“提交訂單”是下遊觸發點，點擊後流向下壹頁；“2輸入折扣碼”中有壹個關鍵元素“填寫折扣碼”，還有壹個下遊觸發點“確認訂單”。...
(3)為每個頁面畫出相應的原型。
信息架構圖，從產品角度，看包含多少功能點。適合分層次，比如音樂產品、新聞客戶端、閱讀產品等。
信息架構圖例1:
有了頁面流程圖或者信息架構圖，現在終於可以開始畫原型了。首先，什麽是產品原型設計？
產品原型，俗稱線框，大概就是草圖的意思。是產品落地的關鍵點，是從虛擬概念到用戶接觸的節點。同時也是產品經理輸出的重點內容，上傳給老板，發給UI和UE同事。
產品從原型到上線的過程:
大公司的產品經理只需要做手繪和真實的部分，小公司可能也要兼職交互設計。...
案例:
好的原型有什麽特點？
(1)總體:頁面結構清晰，跳轉關系明確，與業務流程壹致，用戶需求表達充分。
(2)獨立頁面:功能元素清晰有序，位置關系明確，不同狀態下的變化清晰。
(3)交互設計:交互邏輯清晰，交互方式壹致，界面統壹。
常用工具:
(1)紙筆:自己畫，快速學習定位。
(2)白板:多人討論
(3)軟件Axure/Sketch/墨刀:制作公文。
案例:
(1)調研流程:業務流程->；頁面流量
(2)確定頁面框架:大致確定頁面布局和大框架。
(3)繪制原型:繪制模塊，確定交互細節。
註意事項:
(1)盡可能使用真實比例和真實副本，使要素更加真實，避免在需求評審中被拒絕。盡可能真實地模擬極端情況，並給出清晰的例子。
(2)緊扣需求主體，不引起並發癥。如果原型需要增加新的功能，壹定是來自需求，要考慮後端的數據源。
(3)不要畫！原型用黑白灰，不要給UI和UE挖坑。
(4)目錄樹清晰易讀。
(5)保存修改記錄，為關鍵修改保存文件。
盡量把畫/修改原型的時間控制在工作時間的20%以內，或者問問自己有沒有做錯。
妳搞清楚產品需求了嗎？
產品流程是否清晰？
手繪草圖畫好了嗎？
妳和Boss確認手繪草圖了嗎？
網站制作流程步驟詳解網站制作流程步驟詳解
簡單來說，網頁設計的目的就是制作網站。好的網站是推廣的基礎。我為妳YJBSY收集整理了網站制作流程的步驟，希望對妳有所幫助！
第壹步:明確網站的定位。
我們要明確自己網站的定位，公司的產品優勢，拜訪的目標群體。這是我們首先需要分析的。只有根據我們公司的實際情況，才能做出網站的風格定位。眾所周知，網站風格分為營銷型網站、品牌型網站、電子商務型網站、平臺型網站等。下次我可以給妳詳細解釋我們的類型。在妳明確了自己網站的定位之後，開始收集相關的網站案例，供下壹步參考。
第二步:制作網頁原型。
這是壹份浪費腦力的工作。目前大部分人用Axure軟件制作。畫壹個原型需要參考很多網站風格。通過不斷的參考，可以總結出自己的網站風格。目前比較流行的設計元素是帶字符的圖標，扁平化的界面，寬屏風格。在制作原型的過程中，我們需要看很多網站風格。如果妳想做外貿網站，那麽妳需要找很多國外的知名網站，看看他們的網站風格，才能很好的找到那種思維感覺。國內網站相對保守。雖然都是平面設計，但是大部分網站的布局都差不多。
第三步:顏色/用戶界面設計
原型圖完成後，就可以交給設計師進行UI設計了。設計師會根據原型圖的布局來設計色彩，但不限於原型圖。優秀的設計師不會壹步壹步去實現，而是會根據自己的經驗在細節布局上做壹些改變。此舉的目的是為了改善美觀的界面和用戶體驗。
第四步:DIV+CSS剪切/排版
當設計工作完成後，妳應該開始切割地圖。如果網站只是壹個PC站，只需要做壹套裁剪地圖的樣式就可以了。如果是響應式網站開發，需要做三套風格的切圖，分別是PC、平板、手機。響應式網站會自動適應不同的分辨率和屏幕大小，以達到最佳體驗，但我需要在這裏補充壹點，不是所有的網站都適合做響應式，每個站都不壹樣。具體原因在下篇分享。
第五步:程序開發
剪完圖後，進入程序開發階段。程序開發就是做後臺管理，讓網站後期有壹個管理後臺來更新前端數據內容。目前開發網站比較流行的開發語言有兩種:壹種是PHP語言，壹種是。網語。
第六步:網站Bug測試和數據填充。
程序開發出來後交給專職客服測試bug，壹邊填數據壹邊測試頁面效果。新開發的網站會有bug。因為是純手工項目，鍵盤壹個壹個打出來的代碼有bug很正常。所以需要客服進行測試，測試出來的問題會以文檔形式整理出來，交給程序員修復。
初級產品經理——如何高效繪制AXURE原型是產品經理或交互設計師設計的針對某個需求或問題的具體解決方案。繪制原型的工具有很多，我們大部分產品都用Axure。有了這個軟件，高保真或低保真度的原型都可以做得很好。那麽，什麽樣的原型適合團隊交流呢？
畢竟畫出來的原型不僅是給自己的，也是給團隊成員的，UI/前端/開發。尤其是在小組評審中，通過演示原型，我們需要向他們解釋其中的內在邏輯、具體頁面、動態效果等。的產品，也問問他們設計是否合理，能否實現，靜靜的聽聽他們的意見。這個時候，原型就是壹個思維交流的工具，把妳的想法翻譯並灌輸給妳的團隊成員。同樣，原型也是團隊的溝通工具。對於畫出來的原型，大家可以談談自己的看法，交流思想，改進原型的不足。
所以在畫出原型的時候，壹定要有基本的交付標準。
壹、原型設計的基本交付標準
1.清晰——讓別人知道產品的用途，包括它的功能和頁面。
要明確表達頁面有哪些內容模塊。
有必要清楚地表達模塊內部的組成元素。
2.清晰——讓隊友知道具體要求，指導他們怎麽做。
1函數運算
壹個函數能做什麽，點擊/鼠標懸停/拖動，頁面會有什麽反應。促進發展的工作。
2操作路徑
有壹些跳轉頁面的操作，需要明確標註跳轉的路徑，跳轉到哪裏，涉及哪些頁面，如何聯系。防止用戶迷路。
3點擊狀態
有些鏈接和按鈕需要在開頭標明是什麽樣子的，鼠標懸停在上面是什麽效果(顏色/下劃線/提示等。)，點擊的風格變化，點擊後的風格。(這些可以方便前端工作)
4信息組合
需要結合相關信息，比如壹些基本信息，姓名/性別/年齡等。最好放在壹起，不要分開。無關距離。
5位排序
頁面的布局要適應用戶的習慣、瀏覽方式和工作任務。突出重點，方便用戶工作。有些數據可以想想怎麽排列，按照什麽排序，可以方便用戶查找，還是“以用戶為中心”。
3.全面——產品的各種細節，不能疏忽。
1交互狀態
有哪些重要的操作、交互風格和效果？最好是單獨提取出來做成高保真，展示給別人看，讓他們對產品有深入的體驗和感受。
2數據顯示
原型涉及的相關數據要有真實案例，需要獲取的關鍵數據都要顯示出來，比如壹篇文章，需要的數據:作者、發布時間、瀏覽量、點贊數、收藏數等。，以便開發和準備必要的數據接口。
3異常註意事項
需要考慮壹些突發情況，比如斷網、加載慢、數據已經被刪除、數據找不到、沒有訪問權限等等。
4個支持頁面
產品中的某些功能可能與其他產品相關，可能涉及的其他頁面需要包含在項目中。比如手機在wap上的瀏覽風格，發送給用戶的壹些消息/短信的內容和風格等等。
4.基礎美學
1對齊
2間距
3種顏色
4種字體
我推薦妳閱讀像《人人設計書》這樣簡單易用的書。
5.基本規範
1頁面大小
網頁寬度為960px，1000px，1200 px，app為Android，iphone5，iphone6等。，需要保持與現有產品相同的尺寸。
2字體大小
標題可以是18px或者16px，內容可以是14px。不僅要考慮用戶是否能看清楚，還要考慮美觀。
3種顏色
原型不要有太多的顏色，堅持黑白灰，除非妳想突出，否則就用其他顏色。
4彈出窗口
彈唱風格最好統壹，彈窗名+內容+操作按鈕+關閉。
5個元素
不要在原型文本中添加過多的截圖和圖標樣式，會幹擾UI的設計。
2.Axure的快速使用技巧
工欲善其事，必先利其器。他使用工具越熟練，就能節省越多的時間來考慮這個方案。下面簡單分享壹些Axure繪制原型時的快速操作:
先找到，顯示需要的零件，就可以設置了。
1.構件庫的建立(可以提高效率，保證產品層次的壹致性)
2.母版的使用(適用於多個頁面的共同部分，修改後會自動更新)。
3.設置頁面樣式(可以壹次性設置頁面的字體和背景)
4.組件的交互風格
5.組件組合
用鼠標把要合並在壹起的原稿框起來，按住ctrl+G，這樣合並後就可以很方便的復制拖動了。按住ctrl+shift+G，或單擊選擇並單擊下面的兩個圖標來組合和取消組合。
6.對齊、居中並均勻分布
選擇要分發的內容，選擇壹個分發樣式，不需要逐個手動調整，就可以快速得到壹個整潔的原型樣式。
7.輸入框類型設置(預設類型)
對於某些輸入框，您可能需要設置默認文本。可以直接選擇輸入框，在原始屬性中設置提示文字和壹些限制。
8.部件提示詞
有些字符需要鼠標懸停才能顯示提示。可以直接在原稿的屬性中設置“原稿提示”，輸入要顯示的內容。
第三，制作原型的過程
65438+
2.規劃產品結構——用Xmind或者紙筆之類的工具畫出產品有多少頁，每頁包含哪些元素。
3.整理原型目錄——用Axure添加幾頁原型，考慮頁面之間的跳轉關系。
4.設計頁面的布局(網格)-使用不同的色塊和方框來表示這部分將代表什麽板塊，並設計頁面的布局。
5.填寫每個模塊的詳細信息-完整填寫框中的具體信息和數據。
6.增加了少量的交互動作——體現在壹些與任務相關的操作上。
7.頁面註釋-改進交互式描述。
8.審核自檢——功能是否全覆蓋；頁面是否缺失；流程是否清晰；狀態是否完整
第四，原型應用的經驗
因為我大部分負責後臺系統的優化，所以直接處理開發。如果涉及到前臺頁面，我需要UI先把原型做成圖片，然後前端做壹個帶有動態效果的demo，再根據demo進行開發。但不管是哪種情況，畫出來的原型壹定要讓隊友明白妳的邏輯和要表達的重點。
我第壹次負責項目的時候，用的是高保真。我花了壹個多星期的時間畫了壹個完整的原型，我想做壹個有各種動作和交互的虛擬產品。但是和開發人員談過原型之後，項目驗收的時候才發現，開發人員大部分都沒有按照原型上的動作去做，甚至連細節都省略了。在壹個個催我補上之後，我開始思考這種方法是不是不太劃算，太費力，結果也不太好。
後來看到上級畫的原型，都是靜態頁面為主，可以說是低保真，但是每壹種情況都用圖文描述的很清楚，點擊之後是什麽樣子，會得到什麽數據，失敗了會怎麽樣。而且就這樣，很快就完成了。於是我選擇了低保真模式，開始畫原型。結果我發現開發有時候做不好壹些動作。
於是我啟動了“T型樣機”。“T-prototype”就是大部分都是以極小的把握進行開發，直接把整個產品的邏輯呈現出來，然後在壹些需要重點描述的地方進行深度高保真的描述。所以我的原型大部分都是高保真+註釋和高保真+動作演示的組合。但是對於交互簡單的產品，低保真模型就足夠了。
每個產品都有不同的繪制原型的習慣和風格，但關鍵是要召開小組會議，向隊友解釋原型和邏輯。在發展的過程中，需要更多的交流。
另外，分享壹下妳關於AXURE learning的網站，在那裏可以找到免費的軟件安裝包和教學課程。
/
如果對文章感興趣，請評論留言，堅持自己喜歡的，加油~