產品經理之原型設計
一、什麼是原型
原型就是產品的模型，用以描述產品的設計方案和需求。原型產出是每個基層產品經理必備的技能。
二、原型的作用
1、明確需求。無論是對於產品團隊，還是對其它部門同事，原型無疑能讓大家更加清楚的了解產品設計的情況，對需求有基本的共識，減少溝通成本和分歧。
2、驗證產品設計。特別是在產品早期階段，原型還可以幫助你低成本的了解用戶的想法，驗證產品方案是否可行，例如請用戶進行原型測試，容易發現產品設計方面的不足。
三、原型的目的
在做原型設計前，明確目的是非常重要的，這裡按使用角色進行簡單劃分。
1、如果給甲方，投資人或是用戶演示操作的。相信我，花點時間把原型做成高保真的非常重要，這樣能夠很直觀的表達你的產品，他們才能夠想想產品真實的樣子，才會給你想要的結果。
2、給團隊用的。快速理解產品需求和效率最大化成為主要的目的，所以只要易於理解和提高效率，哪怕你的原型只是紙質草圖也無所謂。
提醒新人，日常的工作中，千萬不要過於追求原型的完美，設計得屌炸天的樣子就沾沾自喜，這樣非常的浪費時間而且意義甚小。
四、那麼如何製作原型呢？
1、了解業務流程是首要任務。
不要拿到一個項目，就興奮得不得了，馬上開始操刀，這樣往往忽略了業務的流程，導致後來不得不花大量的時間去修改，甚至推倒從來。了解流程非常重要，它使你在站在一個高處，全局的看待這個產品，把控好大的方向，不至於越到後面越摸不著頭腦。你可以藉助一些流程工具，也可以簡單的在紙上畫畫流程圖，這樣就能清楚的知道產品大概有什麼頁面，頁面與頁面間的關係是怎麼樣的。下面舉了一個微信掃碼點餐的例子：
2、參考競品
產品設計的本身，是為了更好的服務用戶。所以只要是優秀的設計，又符合我們產品本身的情況，為何不可以拿來用呢？且不說另造車輪的成本很高，在很多的情況下，原型設計的創新並沒有太大的價值，例如一個登陸的功能，你自創出來一個有多大的意義呢。還有一點就是，當做一些大眾化產品時，用戶對目前同種類型產品的操作已經習以為常了。除非你的idea百分之百的OK，否則千萬不要去改變用戶的習慣，這樣只會增加用戶的學習成本，讓用戶覺得反感。當然這裡絕不是主張大家百分百的模仿，只是想表達，只要有最優的方案，就不要浪費時間的另走彎路。
3、羅列頁面元素
產品的頁面都是由一個個的元素構成的，例如按鈕、輸入框和單選項等，不要偷懶，把事前有關的欄位和操作都列一下，這會讓你布局起來更加輕鬆。如果是設計PC網頁，你甚至需要做信息結構圖或表格來確保界面元素沒有遺漏，否則大量的信息將會使你摸不著頭腦。
這裡放一張網站信息圖做個樣例，不去考究網站規劃是否合理。當然一些簡單的原型設計，你只需要在紙上簡單列一下就行了。
4、做草圖
不要忽視筆和紙的作用。簡單的在紙上進行原型的勾勒，方便進行快速的溝通和修改，大大提高工作效率和降低出錯率。
5、設計階段
工具：原型工具非常多，這裡就推薦Axure，其它的大家感興趣的可以找找。Axure簡直就是圖片界里的PS，文字界里的Word一樣，功能非常強大的，可以滿足你的各種需求。
尺寸：原型尺寸很多情況不必太在意，因為UI設計時會進行把控的。但如果你進行一些精細化設計時，界面元素非常之多，合適的尺寸，會讓你的結構更加明朗，減少與UI撕逼的概率；還有的就是，當你做的原型是需要高保真演示的話，合適的尺寸會達到很好的效果。移動設備一般用360x640。PC的話寬度1200，高度不限。
全局說明：很多新人會很糾結一些細節，例如彈層、列表刷新數量、滾動條和loading圖標等，其實初期我也經常出現這種情況，甚至會在原型畫出彈層和交互效果，生怕開發任性而為。大可不必那麼麻煩，因為正常情況下產品需要制定一份全局說明文檔，統一描述產品各種可預計情況和交互的處理方式。下面列舉一個彈層的全局說明
熱區說明：熱區指的就是可以操作區域的範圍。經常發現想要操作的是A區域，開發出來卻是B區域，程序員通常會用最快最方便的方式開發產品，默認會是操作元件本身的範圍就是熱區。如果有特殊情況，可以在原型里指出來，或寫在全局說明裡。甚至有些操作複雜的產品，有必要寫一份熱區規範文檔。如下圖，在不標註之前，開發出來的產品只有點擊商品圖片才會跳轉詳情頁，而不是真箇區域。
文案：產品涉及的界面文案往往是多方面的，如果公司裡面有文案人員最好，複雜文案可以交由他複雜。這裡也可以寫一份文案規範文檔，對產品的可預見文案類型，甚至細到按鈕文字、欄位名稱和頁面為空提示等做出說明，因為一個產品的可能由幾個產品經理負責，或越到後面，產品經理自己就忘了原先的規則，導致產品里各種形式的文案風格都有，例如在這個模塊叫「新增」，另外一個模塊就叫「添加」。記住幾點：風格統一；意思明確，易於理解；不讓用戶反感。
ICON的使用：Axure8.0之前的版本是沒有icon元件庫的，所以原型需要用到對應的icon時會非常麻煩，需要各種查找，曾經就有過一個新人來問我，返回按鈕的icon怎麼畫。目前大家可以運用Axure裡面的icon元件庫，基本可以滿足日常需求了。記住，原型的主要目的為了清楚的描述需求，只要能清晰的表述，你大可隨便畫個圈圈來表述icon，到UI設計階段，在當面和UI溝通你想要的效果是如何的。
元件的使用：在使用各種元件時，也是一樣，力求風格統一，易於理解，不要各有各的類型，例如在這個頁面里用長方形表示圖片，在另外一個頁面就用axure內置的圖片元件表示。這會增加團隊人員的理解負擔，曾經就有開發人員和我反映，他不懂原型里的長方形是後台返回的圖片，以為是一個背景區塊。
與操作系統的規則統一：這點非常重要，特別是對於一些新人，往往會忽略了這點。如果是同一類型的事件，操作位置、操作方式和交互效果，與系統相背離的話，用戶會一時摸不著頭腦，甚至有時會抓狂。這裡推薦移動設計的朋友閱讀《IOS人機界面指南》和《Material Design 》，裡面分別對IOS和安卓系統的設計做出了規範說明。還有的就是，看了這些文檔，你和UI撕逼起來會變得有理有據。
與自然統一：這裡可能會有點抽象，簡單的來說就是你的設計，要與人們日常的所見到的事物保持統一，這樣用戶才能夠容易的了解你想表達的是什麼意思。比如書的翻頁效果是由右到左的，你千萬不要設計成由左到右。這點對於擬人或擬物的產品特別重要，大家可以看一些遊戲產品，就應該非常明了。
目光流：當我們的眼睛的注意力集中到頁面時，其實是有主次或者說是順序之分的，舉個例子，當我們看一篇文章，自然的目光會從左邊看起。PC網頁很多重要的信息，都會放在左側就是這個道理。這個地方，新人可以往後點在進行學習。
手指的可操作區域：這裡主要是針對移動設計的，我們知道當一隻手在操作手機時，手指方便操作的區域是限制在一個範圍的。甚至手指接觸屏幕的最小有效區域，也是有一個數值的。所以原型的設計要考慮到人手的操作情況。這部分新人只需要有這意識就夠了。
場景：場景的概念在移動設計里會普遍存在，簡單的說來就是用戶在手機上使用你的產品時，是在什麼樣的一種現實場景里進行的，是走路，坐公交，還是晚上空閑的時候呢。不同的產品在不同的場景下會採取不同的處理方式，範圍太廣，這裡不細說，只想表達大家在做產品的原型設計時，一定要考慮用戶使用產品的場景，這樣才會給予用戶良好的體驗。
設備的物理特性：最直觀的例子就是安卓手機和IOS手機的按鍵就不同了，所以對於一些特殊頁面的返回方式處理會有區別，大家可以對照一些微信的安卓版和IOS版。當然除了安卓和蘋果的差別，手機的感測器也是非常重要的，例如加速度器、陀螺儀和重力感應儀。大家在玩賽車遊戲的時候，有沒有使用過擺動手機來控制方向呢？或者大家常用的微信搖一搖，他們都是利用了手機的感測器。想做出一些酷炫的產品，了解手機感測器非常有必要。
關於動效：不管對於PC還是移動設計，運用合適的動效對於事物的表達和用戶理解都有明顯的意義，以後會詳盡的闡述其使用場景和作用。產品經理如果要在原型里表達動效，簡單的還好，複雜的話絕對是一件很悲催的事情。簡單的處理，建議你可以運用墨刀，這款軟體做交互效果還算很方便的，當然Axure的功能依然很強大，但需要處理各種交互事件。現實里很多的小公司是沒有交互設計師的，更別談動效設計了，所以你只能親自操刀，但開發前千萬不要忘了和前端工程師做好溝通，否則開發出來的效果絕對讓你大跌眼鏡。
UI的重要：為什麼在說原型設計階段要說UI的重要性呢，因為在產品進入開發流程的時候，程序員基本會漠視原型的存在，哪怕你的原型設計得屌炸天了，他們也會直接根據UI圖來搞。所以你最好用各種辦法讓UI理解你的意思，原型上不能表述的，直介面頭去溝通，會達到意想不到的效果。
原型設計的知識絕不僅限於此，如果真要詳細的闡述，可能需要幾本書的篇幅。這裡只是著重的寫自己在新人階段所遇到的問題供大家參考，會有很多不足之處。大家在原型設計時，一定要規範起來，易於團隊的人員的理解。產品經理本來就是個高危行業，如果原型難以理解，又不及時去溝通，你分分鐘鍾會被亂箭射死。
TAG:媽媽小字典 |