很多時(shí)候，領(lǐng)導(dǎo)要求你高效的工作 ，且有些領(lǐng)導(dǎo)認(rèn)為：語言傳達(dá)可以使溝通更高效，沒有必要花費(fèi)時(shí)間去做文檔。我只贊同“使溝通更高效”的想法，當(dāng)然不能只為了做文檔而做文檔，但是溝通需要一個(gè)平臺(tái)，我們需要基于某一個(gè)“東西”進(jìn)行溝通。由于語言表達(dá)的極限、理解的差異化，對(duì)于同一個(gè)“東西”的講解，不同的人在腦海中會(huì)形成不同的“樣子”。

      在軟件產(chǎn)品設(shè)計(jì)中，我們通常會(huì)針對(duì)“用戶定位、產(chǎn)品定位、發(fā)展方向（需要考慮可擴(kuò)展性)、交互方式、視覺風(fēng)格”等基本問題進(jìn)行溝通，或者要把想法和成果讓領(lǐng)導(dǎo)給予確認(rèn)。在實(shí)際操作中，我們已經(jīng)把各項(xiàng)工作分成了很多層面，這里我們要談?wù)劗a(chǎn)品設(shè)計(jì)在不同層面表現(xiàn)的格式，這里根據(jù)自己的經(jīng)驗(yàn)分成四個(gè)層面，也就是下面的四個(gè)大標(biāo)題。

一、產(chǎn)品的概念層面

1.行業(yè)分析，同類產(chǎn)品對(duì)比。如果我們想做某一個(gè)行業(yè)的產(chǎn)品，一般我們會(huì)對(duì)這個(gè)行業(yè)先做個(gè)分析，會(huì)考“慮成本最低優(yōu)勢(shì)、可替代性、差異化、潛在新產(chǎn)品威脅”等戰(zhàn)略問題，同時(shí)考慮自己的產(chǎn)品定位，一般會(huì)先做一個(gè)同行業(yè)產(chǎn)品對(duì)比分析文檔，建議包括以下內(nèi)容：

1）產(chǎn)品特點(diǎn)（長處）、價(jià)格對(duì)比；2）功能對(duì)比；3）界面及點(diǎn)評(píng)；4） 定位建議。

要表達(dá)上面提到的四點(diǎn)，我想做個(gè)word文檔就搞定了，前兩點(diǎn)用表格表達(dá)，后兩點(diǎn)用文字描述即可。舉個(gè)功能對(duì)比格式的例圖：

圖1-功能對(duì)比表格

2.用戶定位

1）用戶分類；2）角色設(shè)計(jì)；3）場(chǎng)景描述

這部分的內(nèi)容都是比較專業(yè)的，結(jié)構(gòu)也都是文字描述形式，建議大家參考《贏在用戶》這本書，很系統(tǒng)講了用戶研究這塊。

3.產(chǎn)品名稱及功能

1）產(chǎn)品名稱及視覺識(shí)別系統(tǒng)描述

拿土豆網(wǎng)舉例吧，當(dāng)然，我只是隨便舉例，并未實(shí)際分析，實(shí)際要比我的舉例復(fù)雜的多，也不去考證是否準(zhǔn)確。

產(chǎn)品名稱：土豆網(wǎng)。

視覺識(shí)別：土豆面具（標(biāo)志）。

2） 產(chǎn)品規(guī)格表，即產(chǎn)品功能詳細(xì)列表。

圖2-產(chǎn)品規(guī)格表示例

二、產(chǎn)品的結(jié)構(gòu)層面

這個(gè)層面要做的事情，通俗的說就是：“如何用界面組織功能”，“界面之間的關(guān)系是怎樣的 ”；分解開來就是：“功能組織”、界面組織、邏輯流程圖、用戶使用流程圖（界面流程圖）。

1.用卡片的形式給功能分類，并表達(dá)清晰功能的從屬關(guān)系。

圖3-卡片式功能結(jié)構(gòu)圖

2.邏輯流程圖

圖4-E-R流程圖，這部分應(yīng)該有程序設(shè)計(jì)去做才好 ，但有時(shí)候產(chǎn)品設(shè)計(jì)師也要理清楚這些。

3.界面流程圖

圖5-屏幕流，每個(gè)框代表一個(gè)界面，當(dāng)然，你可以把每個(gè)框換成實(shí)際的界面，看個(gè)人喜好了。

4.界面原型圖，如果想表達(dá)更清晰一些，可以畫成界面原型流程圖或者干脆做出界面原型。

圖6-無風(fēng)格的線框圖，可以輔助說明信息。

三、產(chǎn)品的交互細(xì)節(jié)

這個(gè)問題曾令很多交互設(shè)計(jì)師頭疼，總是不能很細(xì)致準(zhǔn)確的傳達(dá)界面交互，我們?cè)噲D畫出很準(zhǔn)確的交互圖，但語言表述的準(zhǔn)確性和細(xì)致性仍然不盡滿意，這里介紹使用偽代碼描述交互，因?yàn)閭未a邏輯近似開發(fā)邏輯，便于準(zhǔn)確傳達(dá)給程序工程師，保證設(shè)計(jì)細(xì)節(jié)的控制。但要設(shè)計(jì)師去設(shè)計(jì)偽代碼，確實(shí)需要點(diǎn)時(shí)間去鍛煉一下，此外還要形成一套易讀的偽代碼標(biāo)準(zhǔn)，便于大家在閱讀偽代碼時(shí)，保證描述的一致性。

1.用戶交互的表現(xiàn)方法

圖7-交互圖，構(gòu)成 ：用戶、界面、操作條件及路線。

2.偽代碼的表現(xiàn)方法

1）定義界面元素，形成一套界面元素庫，可以做成一個(gè)文檔標(biāo)準(zhǔn)，并整理出各個(gè)界面元素的偽代碼寫法，使用時(shí)可直接調(diào)用即可。

定義界面元素有很多現(xiàn)成的參考，比如Vista的UX Guide，在微軟的官方網(wǎng)站都能找的到。舉個(gè)定義Vista普通按鈕的例子：

圖8-圖表說明了是 Command Buttons，并用表格的形式說明了屬性。

2） 舉一個(gè)使用偽代碼書寫的簡單例子

圖9-用偽代碼的形式描述一個(gè)按鈕

其實(shí)沒有啥，正常的描述，只不過用近似代碼的形式描述出來，相必做程序設(shè)計(jì)的哥們都不陌生。

四、產(chǎn)品的視覺設(shè)計(jì)層面

在軟件產(chǎn)品中，視覺部分通常被稱之為GUI，在這個(gè)層面所要表達(dá)的格式?jīng)]什么好說的，就是設(shè)計(jì)圖。但很多時(shí)候做出所有界面的圖顯然是不明智之舉，其實(shí)界面可以歸納起來，即把所有界面歸類，然后每類做出一張圖即可；界面中的細(xì)節(jié)變化怎么辦？好辦！把界面布局標(biāo)注出尺寸規(guī)格，并作為標(biāo)準(zhǔn)傳達(dá)，剩下的事情是，只要把細(xì)節(jié)元素、交互視覺做出圖來就行了。至于界面的布局和組織，前面的第二個(gè)層面已經(jīng)很清楚了。

現(xiàn)在拿微軟和蘋果的系統(tǒng)UI指南舉幾個(gè)例子：

圖10-蘋果的尺寸標(biāo)注圖

圖11-Vista的狀態(tài)標(biāo)注圖

小結(jié)：

一般視覺設(shè)計(jì)都有視覺設(shè)計(jì)師（或者稱GUI設(shè)計(jì)師）來完成，而概念設(shè)計(jì)、結(jié)構(gòu)設(shè)計(jì)、交互細(xì)節(jié)是有產(chǎn)品設(shè)計(jì)師（或交互設(shè)計(jì)師）來完成 ?？赡苡腥艘獑栁?，那么產(chǎn)品經(jīng)理做啥呢？產(chǎn)品經(jīng)理是個(gè)管理職務(wù)，這里不做贅述，可參考在《協(xié)作，而非爭權(quán)》中的描述。本篇根據(jù)實(shí)戰(zhàn)把產(chǎn)品設(shè)計(jì)分成了四個(gè)清晰的層面，并對(duì)各層面要產(chǎn)出的文檔格式做了系統(tǒng)的描述，當(dāng)然不可能很詳盡，但在每個(gè)層面都提供了一個(gè)簡單的小例子。如果你對(duì)這方面有過很多實(shí)踐，希望這里能提供一些借鑒，日后有時(shí)間會(huì)分享每一個(gè)層面的設(shè)計(jì)細(xì)節(jié)。同時(shí)，有更好的表達(dá)格式，環(huán)境分享、補(bǔ)充。

原文：http://www.ui123.com/blog/?p=90