畫原型時須要注意什麼？

這裏是修真院pm小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析pm知識/技能，本篇分享的是：

【畫原型時須要注意什麼？ 】

你們好，我是IT修真院上海分院第4期的學員，一枚正直純潔善良的PM

今天給你們介紹一下畫原型時須要注意什麼？

目錄

一.前言

二.畫原型圖的原則

三.畫原型圖時咱們須要注意些什麼

四.畫原型時常見的細節錯誤

五.對錯實例

六.畫原型圖的幾個技巧

七.參考文獻

一.前言

二.畫原型圖的原則

一、手稿原型圖優先於電子稿原型圖

原型圖是需求的外在體現，邏輯是需求的內在體現，二者並不對立，反而是相輔相成關係。

大體理順邏輯才能開始畫原型圖，而畫原型圖的過程又能夠檢查邏輯。所以，畫原型圖的過程，也是再次梳理邏輯的過程。

對於手稿來講，想到了就秒秒鐘畫，錯了就秒秒鐘擦，驗證合適不合適速度飛快；

對於電子稿來講，想到啥要畫，還得各類拖動控件，搞排版，簡直累人累己分分鐘速度小渣渣；

所以，在快速驗證或者梳理需求的過程當中，推薦用手稿的方式

2.電子稿原型圖要規範

能夠簡單概括爲

頁面框架要清楚；

頁面不影響設計；

頁面元素要統一；

頁面排版要整齊；

至少過手的東西能夠齊整的地方要齊整，最好能夠好看的地方要好看

三、電子稿不宜佔用過多時間

雖然第二點提到了要好看，可是不能由於好看而主次顛倒，花費了大量時間在電子原型圖上，那就得不償失了。原型圖能夠說是需求分析的最後一層了，重點始終是前面的思考。

而爲啥不少人畫原型圖慢呢？由於畫圖前不考慮清楚就上軟件！

由於畫圖習慣很差就上軟件！由於動不動就上軟件，而後反反覆覆反反覆覆！

三.畫原型圖時咱們須要注意些什麼

第一點，要作的是要清楚頁面須要突出的內容是什麼。

咱們有時候真的會眼高手低，看着感受so easy，可是真正作起來真正被問及時卻發現本身真的不行真的不會。因此，這個必須明確的第一點最好要弄清楚再往下走。

第二點，就是要弄清楚功能方面須要突出的是什麼？說白了也就是你要設計的這個頁面要突出什麼功能。

第三點，就是要明確內容板塊如何劃分，頁面的內容主要分紅幾個模塊，每一個模塊內存放的都應該是一些相近的內容。這個說實話涉及到了涉及原型圖頁面的深層部分了，也就是涉及到了你所設計的原型頁面的大致佈局，因此這個部分要拿捏好，這一部分的佈局設計可能會直接影響到你的頁面效果，很考驗人的設計能力，固然還有美感審視能力，因此請你們在這部分的設計上多用點心，多有些本身的想法。

第四點要說的就是模塊與模塊之間以及頁面與頁面之間承接和關聯的關係了。每一個模塊與其相近的模塊之間應該有一些邏輯上的關聯性，而不能隨意的進行拼接，應具備上下承接關係。頁面與頁面之間的轉化承接也要尤爲鏈接性，切勿給人一種生搬硬套的感受，要有必定的連貫性和聯繫性。

最後在原型圖設計完以後，須要對其進行修改和檢查。最好試着把你設計的原型按照你的思路走一遍，看看是否有哪些不暢、彆扭的地方。並且要注意的是，這個時候你要學會換位思考，把本身當成一個用戶而不是一個設計者，看看在整個流程的過程當中是否有用戶體驗度很差的地方，試着提出一些疑問，並當心求證一下，積極改正。

四.畫原型時常見的細節錯誤

1.排版粗糙一、線頭未閉合，畫到邊界前就終止了，手繪還可理解，但總軟件繪製就說不過去了。二、元素溢出邊界，好比時間屬性，超出原型界面邊線。三、文字緊貼邊線，未給足內邊距。四、該對齊的元素未對齊。五、該居中的元素未居中。六、多個列表項的高度不一致，有25像素的，有23像素的……七、上層與下層元素本該重合的線條未重合，反倒造成了一個更粗的邊框。八、主次文案的字號及字色未做區別。九、表單等文案不齊整，有兩字的、三字的、四字的、五字的……若是詞彙量豐富，儘量更換名詞促成整齊，好比：用戶名、密碼、手機號、身份證號碼、E-mail，能夠統一爲：用戶名稱、登陸密碼、手機號碼、身份證號、電子郵箱。十、有廢棄或多餘的元素捨不得刪，非要用中劃線或佔位符臨時遮蓋，對閱讀者形成干擾。

2.原型不仿真一、原型字號過小，在原型圖中首屏可容納200字，而根據實際狀況只能容納100字，形成信息顯示預期未達成。二、列表內容都是重複或不真實的，好比標題項都寫爲「標題」，未按真實文章標題長度來展現，沒法直觀表達截字或折行效果。若是是實名制平臺產品，用戶名就不要列一堆不切實際的名稱如「藍精靈」、「堂吉訶德」……三、列表項時間參數都是同樣的，沒法直觀感覺到列表是否須要按時間倒序排列。四、用想固然的圖示表達需求，好比畫一條橫線就完成了播放器進度條的示意，進度如何體現？是否須要拖拽操做？

3.缺少一致性一、每一個原型界面總體尺寸需一致。二、同一功能在不一樣頁面叫法不一樣，如「搜索」、「查詢」、「檢索」、「找一找」……三、數據單位寫法不統一，如文件大小有的用1M，有的用100kb，可統一爲1MB與100KB，要麼1M與100K。四、時間格式不統一，有的用2017年9月10日 8點6分 有的用2017-09-10 08:06:32五、界面用語風格不一致，如「請您稍後重試」、「親，請一下子再試哦」……六、彈窗及提示樣式不一致。七、選用圖標的風格需一致，儘可能用一套圖庫。

五.對錯實例：

一、頁面框架要清楚

不少初手畫原型圖，通常是畫多少頁面就重建多少page，而且每一個page都是平行關係。在這種狀況下，想經過看原型圖的目錄來了解產品的頁面關係，徹底是懵掉的，和你對接的設計和開發也可能分分鐘狗帶。

比較合適的方式是，畫原型圖以前先搞清楚頁面與頁面之間的關係，在頁面目錄中根據頁面關係創建好空的頁面後，再進行具體頁面的設計。

舉例以下圖：

左邊：爲平行關係的頁面；

右邊：爲有主次的頁面（頁面名字亂起的哈）；

二、頁面不影響設計師的視覺

這點和你們每天嘴裏說的「高保真原型圖」偏偏相反。

產品經理需求分析完成後，須要拿着原型圖和設計師進行直觀溝通，溝通清楚以後，設計師就會開始設計。

那麼，原型圖對於設計師而言，是一個便於理解需求的工具亦或是忘記需求時的查看工具，從這個角度說，就不應給工具賦予一些其餘角色，好比影響設計師的設計感受。

舉例以下圖：

左邊：用固有的佔位圖或者按鈕來表示一些須要的內容；

右邊：用不知道從哪裏找來的風格不一樣的icon拼湊；

人對看到的東西會產生印象，設計師看到你找來的icon們，腦中一樣也會有相應的反應：

若是你找的風格比較一致也還看着闊以，那麼設計師有可能會按照你找的icon風格來作；

若是你找的風格水準差別巨大，那麼不能幫助設計師設計沒有關係，可是干擾設計師設計那就罪過了。

三、頁面元素要統一

畫原型圖的時候，勢必會用到不少軟件中自帶的控件。一開始沒有造成本身習慣的時候，可能會有如下狀況：

同一個頁面內同一種控件表明好多種行爲；

同一個頁面內同一種控件表示同一個行爲，不一樣頁面之間同一種控件表示好多種行爲；

舉例以下圖：

左邊：表明佔位符，不可點擊；表明按鈕，可點擊；

右邊：比較混亂，兩個控件亂用，不能點擊的地方用了按鈕，能點擊的地方又用了佔位符；

四、頁面排版要整齊

排版整齊主要指：

該左右對齊的地方對齊；

該上下居中的地方上下居中；

間隔該一致就一致；

舉例以下圖：

左邊：上下、左右都對齊；

右邊：額，紅色標記的都沒有對齊；

六.畫原型圖的幾個技巧

一、善用輔助線

輔助線可以幫助你分分鐘對齊，而且無時不刻闊以用到它：畫總體頁面、畫局部部件等等都闊以。

上圖中紅色框內的四根輔助線我是一定會有的；藍色框內的線是拖動了控件時系統會出現的

二、善用母版

會多處用到的一整塊的東西儘可能用母版

若是你採用處處複製粘貼的方法的話，那麼若是有修改，你就得一次一次的修改好多地方，浪費時間；

若是你採用每次都本身從新畫的話，那比上面還慘

同時，母版順便解決了排不齊的問題，畢竟，大部件拖起來容易排整齊的多。

三、善用組合

不少童鞋一開始的時候都不喜歡用組合，反正畫完都同樣嘛

萬一你下個版本要把整坨東西換到另外一個位置上去呢？萬一你整個頁面要出現相似的東西好多遍呢？

雖然第二點剛說過要善用母版，可是母版也不是越多越好。

在不是全局出現的狀況下，闊以把相關控件組合起來，無論是單頁面上的複製粘貼仍是挪動，都會很是方便，同時又無形之中解決整齊問題。

四、不要過分用case裏的花哨功能

只用頁面跳轉，最多用面板之間的設置功能。

 

五、不要過分用條件判斷

下圖登陸註冊流程，應該平均一個控件上至少都有五、6個判斷條件吧。

能夠用文字補充清清楚楚說明白的事情，不要折騰原型圖

六、過分用花哨功能和條件判斷，會引發控件的命名問題

作大量條件判斷或者複雜的case是會須要指向某個控件的，那麼對於控件的命名就須要套規則，而這點，一開始的時候你是沒有意識到的。你須要不斷加前綴來區分不一樣的控件，隨着頁面層次愈來愈多，命名會愈來愈複雜。

七.參考文獻

畫原型圖時咱們須要注意些什麼-CSDN

作產品原型設計有哪些須要注意的問題-知乎用戶短腿柯基大屁屁

畫原型圖的幾大坑，你被埋了嗎？！-人人都是產品經理

PPT連接：PPT