關於原型設計的一些事

發表於2013-03-22

來源:幻風閣

原型設計,是每個互動設計師和產品經理最最最基本的技能。這也是一個梳理思路很好的方式。

關於什麼是原型

為了討論方便,有必要先做一個簡單的定義。

這裡的原型指的是對最終產品各頁面上內容的簡單呈現,通常不會設定顏色和字型,也不含圖片。這裡的原型,也通常被稱作線框圖、示意圖、藍圖。在一些極端的情況下,原型圖往往可以先被抽象成一個個的模組組合,然後再去細化每個模組中的內容極其展示形式。

原型的主要作用是為了溝通最初的產品設想。原型圖展示的是內容和結構及粗線條的佈局,而不是視覺設計。

一定程度上,原型圖是為了說明使用者將如何與產品進行互動,其主要受眾是團隊裡的工程師與設計師。原型圖一定要體現出使用者在每個頁面上期望看到的內容,以及這些內容在頁面上的相對優先順序。通常情況下,原型圖在紙上呈現,也可以使用一些特定的軟體進行製作,常見的包括axure、viso等。

所以,根據這個定義和解釋。我們接下來討論的問題,主要是圍繞著Web網站和APP的原型設計進行的。

關於原型的精細程度

業界普遍的認知是,原型做相對中保真即可。中保真的原則是,對照原型,團隊的設計師和工程師能夠明白我們要做的是一件什麼事情及這件事的重點就可以了。

當然,還存在另外一個觀點,原型,必須是要高保真的。對於這個觀點,個人持保留意見。高保真的原型需要花費更多的精力,同時,不夠敏捷。

關於原型繪製工具

在程式設計師的世界裡,終極問題是,什麼是最好的語言?在前端工程師的世界裡,終極問題是,什麼是最好的瀏覽器?在產品經理和互動設計師的世界裡,終極問題是,什麼是最好的原型工具?….

基本上,不存在絕對好用的工具,完全取決與自己的愛好與使用是否順手。關於原型繪製工具,網路上有很多人總結了很多不同的工具,你可自行選擇。我個人使用的比較順手的是axure。

哦,對了,實際上最好用的原型設計工具,最後,我發現,是紙和筆。在快捷酒店管家的實際專案運作中,我們更多的是運用白板來繪製原型,然後將經過討論通過的原型用手機拍下來做記錄存檔。

關於axure的使用

(不使用該工具的同學,讀到這裡可以關掉頁面了,謝謝。)

1、千萬不要去學習複雜的互動動作!

首先,在axure裡使用複雜的互動會上癮,這將大大的浪費你的時間;其次,設計師和工程師都不會看你的複雜互動動作的,他們只覺得這是個圖形而已;第三,如果你真想學,為什麼不去學div+css呢?

2、如果你確實需要表達一個複雜的互動,可以考慮將這個互動拆解了表述

典型的比如一個輸入框的不同狀態。可以拆解為,獲得焦點啟用輸入框 – 正在輸入中 – 輸入完成啟用提交按鈕 – 點選提交按鈕完成提交。

這種拆解的方式,雖然看上去會佔篇幅,但是卻實在是最容易被理解的,連流程圖都能省略了。

3、可以考慮將需求文件與axure原型結合起來

只是說可以,沒說一定要這麼做。這是我一直在使用的一種方式,我自己覺得效果還不錯,詳細的可以參考“基於axure的PRD協作”,不再贅述。

4、一定要有一套屬於自己的控制元件庫

控制元件庫,簡單理解就是將產品拆解成很多的小零件,當你需要的時候,將這些零件進行組裝即可。這可以大大的提高你的原型製作效率。

關於原型控制元件,每個原型工具都有,你可以自己網上搜尋。在實際運用的過程中,你可以根據自己的需要對這些控制元件做修改,之後可以再次使用。

5、原型的版本存檔同樣重要

原型,跟實際產品一樣,是會迭代和不斷被修改的,所以,一定要記得存檔。即使是在同一個原型上做修改,也一定要做記錄,這對後續回顧很重要。關於原型設計的一些事

(快捷酒店管家首頁的早期原型)

最後,

原型設計,是每個互動設計師和產品經理最最最基本的技能。這也是一個梳理思路很好的方式。

相關文章