大家好，我是IT修真院上海分院第4期的學員，一枚正直純潔善良的PM
今天給大家介紹一下畫原型時需要注意什么？
目錄
一.前言
二.畫原型圖的原則
三.畫原型圖時我們需要注意些什么
四.畫原型時常見的細節錯誤
五.對錯實例
六.畫原型圖的幾個技巧
七.參考文獻
一.前言
二.畫原型圖的原則
1、手稿原型圖優先于電子稿原型圖
原型圖是需求的外在體現，邏輯是需求的內在體現，兩者并不對立，反而是相輔相成關系。
大致理順邏輯才能開始畫原型圖，而畫原型圖的過程又可以檢查邏輯。因此，畫原型圖的過程，也是再次梳理邏輯的過程。
對于手稿來說，想到了就秒秒鐘畫，錯了就秒秒鐘擦，驗證合適不合適速度飛快；
對于電子稿來說，想到啥要畫，還得各種拖動控件，搞排版，簡直累人累己分分鐘速度小渣渣；
因此，在快速驗證或者梳理需求的過程中，推薦用手稿的方式
2.電子稿原型圖要規范
可以簡單歸納為
頁面框架要清楚；
頁面不影響設計；
頁面元素要統一；
頁面排版要整齊；
至少過手的東西可以齊整的地方要齊整，最好可以好看的地方要好看
3、電子稿不宜占用過多時間
雖然第二點提到了要好看，但是不能因為好看而主次顛倒，花費了大量時間在電子原型圖上，那就得不償失了。原型圖可以說是需求分析的最后一層了，重點始終是前面的思考。
而為啥很多人畫原型圖慢呢？因為畫圖前不考慮清楚就上軟件！
因為畫圖習慣不好就上軟件！因為動不動就上軟件，然后反反復復反反復復！
三.畫原型圖時我們需要注意些什么
第一點，要做的是要清楚頁面需要突出的內容是什么。
我們有時候真的會眼高手低，看著感覺so easy，但是真正做起來真正被問及時卻發現自己真的不行真的不會。所以，這個必須明確的第一點最好要弄清楚再往下走。
第二點，就是要弄清楚功能方面需要突出的是什么？說白了也就是你要設計的這個頁面要突出什么功能。
第三點，就是要明確內容板塊如何劃分，頁面的內容主要分成幾個模塊，每個模塊內存放的都應該是一些相近的內容。這個說實話涉及到了涉及原型圖頁面的深層部分了，也就是涉及到了你所設計的原型頁面的大體布局，所以這個部分要拿捏好，這一部分的布局設計可能會直接影響到你的頁面效果，很考驗人的設計能力，當然還有美感審視能力，所以請大家在這部分的設計上多用點心，多有些自己的想法。
第四點要說的就是模塊與模塊之間以及頁面與頁面之間承接和關聯的關系了。每個模塊與其相近的模塊之間應該有一些邏輯上的關聯性，而不能隨意的進行拼接，應具有上下承接關系。頁面與頁面之間的轉化承接也要尤其連接性，切勿給人一種生搬硬套的感覺，要有一定的連貫性和聯系性。
最后在原型圖設計完之后，需要對其進行修改和檢查。最好試著把你設計的原型按照你的思路走一遍，看看是否有哪些不順暢、別扭的地方。而且要注意的是，這個時候你要學會換位思考，把自己當成一個用戶而不是一個設計者，看看在整個流程的過程中是否有用戶體驗度不好的地方，試著提出一些疑問，并小心求證一下，積極改正。
四.畫原型時常見的細節錯誤
1.排版粗糙1、線頭未閉合，畫到邊界前就終止了，手繪還可理解，但總軟件繪制就說不過去了。2、元素溢出邊界，比如時間屬性，超出原型界面邊線。3、文字緊貼邊線，未給足內邊距。4、該對齊的元素未對齊。5、該居中的元素未居中。6、多個列表項的高度不一致，有25像素的，有23像素的……7、上層與下層元素本該重合的線條未重合，反倒形成了一個更粗的邊框。8、主次文案的字號及字色未作區別。9、表單等文案不齊整，有兩字的、三字的、四字的、五字的……如果詞匯量豐富，盡可能更換名詞促成整齊，比如：用戶名、密碼、手機號、身份證號碼、E-mail，可以統一為：用戶名稱、登錄密碼、手機號碼、身份證號、電子郵箱。10、有廢棄或多余的元素舍不得刪，非要用中劃線或占位符臨時遮蓋，對閱讀者造成干擾。
2.原型不仿真1、原型字號太小，在原型圖中首屏可容納200字，而根據實際情況只能容納100字，造成信息顯示預期未達成。2、列表內容都是重復或不真實的，比如標題項都寫為“標題”，未按真實文章標題長度來展示，無法直觀表達截字或折行效果。如果是實名制平臺產品，用戶名就不要列一堆不切實際的名稱如“藍精靈”、“堂吉訶德”……3、列表項時間參數都是一樣的，無法直觀感受到列表是否需要按時間倒序排列。4、用想當然的圖示表達需求，比如畫一條橫線就完成了播放器進度條的示意，進度如何體現？是否需要拖拽操作？
3.缺乏一致性1、每個原型界面整體尺寸需一致。2、同一功能在不同頁面叫法不同，如“搜索”、“查詢”、“檢索”、“找一找”……3、數據單位寫法不統一，如文件大小有的用1M，有的用100kb，可統一為1MB與100KB，要么1M與100K。4、時間格式不統一，有的用2017年9月10日 8點6分 有的用2017-09-10 08:06:325、界面用語風格不一致，如“請您稍后重試”、“親，請一會兒再試哦”……6、彈窗及提示樣式不一致。7、選用圖標的風格需一致，盡量用一套圖庫。
五.對錯實例：
1、頁面框架要清楚
很多初手畫原型圖，一般是畫多少頁面就重建多少page，并且每個page都是平行關系。在這種情況下，想通過看原型圖的目錄來了解產品的頁面關系，完全是懵掉的，和你對接的設計和開發也可能分分鐘狗帶。
比較合適的方式是，畫原型圖之前先搞清楚頁面與頁面之間的關系，在頁面目錄中根據頁面關系建立好空的頁面后，再進行具體頁面的設計。
舉例如下圖：
左邊：為平行關系的頁面；
右邊：為有主次的頁面（頁面名字亂起的哈）；
2、頁面不影響設計師的視覺
這點和大家天天嘴里說的“高保真原型圖”恰恰相反。
產品經理需求分析完成后，需要拿著原型圖和設計師進行直觀溝通，溝通清楚之后，設計師就會開始設計。
那么，原型圖對于設計師而言，是一個便于理解需求的工具亦或是忘記需求時的查看工具，從這個角度說，就不該給工具賦予一些其他角色，比如影響設計師的設計感覺。
舉例如下圖：
左邊：用固有的占位圖或者按鈕來表示一些需要的內容；
右邊：用不知道從哪里找來的風格不同的icon拼湊；
人對看到的東西會產生印象，設計師看到你找來的icon們，腦中同樣也會有相應的反應：
如果你找的風格比較一致也還看著闊以，那么設計師有可能會按照你找的icon風格來做；
如果你找的風格水準差異巨大，那么不能幫助設計師設計沒有關系，但是干擾設計師設計那就罪過了。
3、頁面元素要統一
畫原型圖的時候，勢必會用到很多軟件中自帶的控件。一開始沒有形成自己習慣的時候，可能會有以下情況：
同一個頁面內同一種控件代表好多種行為；
同一個頁面內同一種控件表示同一個行為，不同頁面之間同一種控件表示好多種行為；
舉例如下圖：
左邊：代表占位符，不可點擊；代表按鈕，可點擊；
右邊：比較混亂，兩個控件亂用，不能點擊的地方用了按鈕，能點擊的地方又用了占位符；
4、頁面排版要整齊
排版整齊主要指：
該左右對齊的地方對齊；
該上下居中的地方上下居中；
間隔該一致就一致；
舉例如下圖：
左邊：上下、左右都對齊；
右邊：額，紅色標記的都沒有對齊；
六.畫原型圖的幾個技巧
1、善用輔助線
輔助線能夠幫助你分分鐘對齊，并且無時不刻闊以用到它：畫整體頁面、畫局部部件等等都闊以。
上圖中紅色框內的四根輔助線我是必定會有的；藍色框內的線是拖動了控件時系統會出現的
2、善用母版
會多處用到的一整塊的東西盡量用母版
如果你采用到處復制粘貼的方法的話，那么如果有修改，你就得一次一次的修改好多地方，浪費時間；
如果你采用每次都自己重新畫的話，那比上面還慘
同時，母版順便解決了排不齊的問題，畢竟，大部件拖起來容易排整齊的多。
3、善用組合
很多童鞋一開始的時候都不喜歡用組合，反正畫完都一樣嘛
萬一你下個版本要把整坨東西換到另一個位置上去呢？萬一你整個頁面要出現類似的東西好多遍呢？
雖然第二點剛說過要善用母版，但是母版也不是越多越好。
在不是全局出現的情況下，闊以把相關控件組合起來，不管是單頁面上的復制粘貼還是挪動，都會非常方便，同時又無形之中解決整齊問題。
4、不要過度用case里的花哨功能
只用頁面跳轉，最多用面板之間的設置功能。
5、不要過度用條件判斷
下圖登錄注冊流程，應該平均一個控件上至少都有5、6個判斷條件吧。
可以用文字補充清清楚楚說明白的事情，不要折騰原型圖
6、過度用花哨功能和條件判斷，會引起控件的命名問題
做大量條件判斷或者復雜的case是會需要指向某個控件的，那么對于控件的命名就需要套規則，而這點，一開始的時候你是沒有意識到的。你需要不斷加前綴來區分不同的控件，隨著頁面層次越來越多，命名會越來越復雜。
七.參考文獻
畫原型圖時我們需要注意些什么-CSDN
做產品原型設計有哪些需要注意的問題-知乎用戶短腿柯基大屁屁
畫原型圖的幾大坑，你被埋了嗎？！-人人都是產品經理
PPT鏈接：PPT
騰訊視頻：
感謝大家觀看！
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
