你造嗎？國(guó)內(nèi)知名UED團(tuán)隊(duì)的設(shè)計(jì)流程是怎樣的？

寫(xiě)在前面：流程用好了是好東西，用不好是阻礙。今天圖趣分享一篇國(guó)內(nèi)知名UED團(tuán)隊(duì)的設(shè)計(jì)流程的好文，現(xiàn)在學(xué)起來(lái)，以后可以更快上手，同時(shí)也能一窺大公司的工作流程，讓自己更加專(zhuān)業(yè)，趕緊來(lái)學(xué)習(xí)吧！

設(shè)計(jì)流程的思考，以下。：）

設(shè)計(jì)存在于設(shè)計(jì)流程中。

設(shè)計(jì)師的工作是基于設(shè)計(jì)流程的。

和很多朋友討論過(guò)設(shè)計(jì)流程。這個(gè)流程在每個(gè)國(guó)家、每個(gè)行業(yè)、每個(gè)公司、甚至是同個(gè)公司的不同業(yè)務(wù)下，都是不一樣的。所以要寫(xiě)出來(lái)，很難統(tǒng)一概括。

與設(shè)計(jì)師相關(guān)的設(shè)計(jì)流程，可能一個(gè)基本認(rèn)知是這樣的：

產(chǎn)品需求，交互設(shè)計(jì)，視覺(jué)設(shè)計(jì)，前端開(kāi)發(fā)。

再豐富一些：

市場(chǎng)分析，創(chuàng)意階段，用戶(hù)研究，概念設(shè)計(jì)，設(shè)計(jì)控件預(yù)設(shè)，交互設(shè)計(jì)，交互Demo，用戶(hù)測(cè)試，視覺(jué)預(yù)研，視覺(jué)設(shè)計(jì)，設(shè)計(jì)Demo，用戶(hù)驗(yàn)證測(cè)試，前端開(kāi)發(fā)，開(kāi)發(fā)Demo，展示Demo，迭代，用戶(hù)測(cè)試，測(cè)試數(shù)據(jù)回收，用戶(hù)數(shù)據(jù)驗(yàn)證，灰度，全量，項(xiàng)目總結(jié)，規(guī)范輸出，控件庫(kù)，用戶(hù)跟蹤反饋……

再凌亂一些：

以上所有點(diǎn)，順序是可以根據(jù)敏捷開(kāi)發(fā)的需求，靈活排列的。也可以隨機(jī)組合。

所以，現(xiàn)在大多公司的設(shè)計(jì)流程，是一個(gè)標(biāo)準(zhǔn)且完整的架子。在實(shí)際設(shè)計(jì)項(xiàng)目中使用，并不一定是那么規(guī)范和統(tǒng)一的。有時(shí)項(xiàng)目大，可能流程走的完整；有時(shí)項(xiàng)目小步快跑，流程就會(huì)被精簡(jiǎn)為一個(gè)可用且貼合業(yè)務(wù)的小流程。

設(shè)計(jì)流程為什么這么不可控？因?yàn)樵O(shè)計(jì)不是完全理性、可工程化的。

一輛汽車(chē)可以通過(guò)完整有效的流程快速組裝起來(lái)，且能保證質(zhì)量；點(diǎn)子、思路、設(shè)計(jì)，不能這樣。沒(méi)有人能提供一個(gè)設(shè)計(jì)流程，能保證任何人進(jìn)入這個(gè)流程，挨著一步一步做，就能做出設(shè)計(jì)精品。所以設(shè)計(jì)流程，是幫助產(chǎn)品設(shè)計(jì)推動(dòng)，且為設(shè)計(jì)思路提供思考維度的一個(gè)不可工程化的方式。

我在美國(guó)、中國(guó)、德國(guó)工作時(shí)，都和設(shè)計(jì)師小伙伴一起制定了很多設(shè)計(jì)流程和方法。每個(gè)都不一樣。

但是我發(fā)現(xiàn)，思考維度是類(lèi)似的。

所以今天，我想借用Jesse James Garrett書(shū)中對(duì)用戶(hù)體驗(yàn)要素分層的一個(gè)參考，來(lái)描述下設(shè)計(jì)流程的思考維度。

書(shū)名：用戶(hù)體驗(yàn)要素：以用戶(hù)為中心的產(chǎn)品設(shè)計(jì)
作者：Jesse James Garrett

1，Surface 表現(xiàn)層
2，Skeleton 框架層
3，Structure 結(jié)構(gòu)層
4，Scope 范圍層
5，Strategy 戰(zhàn)略層

這是書(shū)中對(duì)用戶(hù)體驗(yàn)要素分層的想法。我覺(jué)得貼合設(shè)計(jì)流程來(lái)描述，應(yīng)該反過(guò)來(lái)說(shuō)。

一、Strategy 戰(zhàn)略層

經(jīng)營(yíng)者想要什么？用戶(hù)想要什么？這兩個(gè)問(wèn)題能回答清楚，才能算是了解這個(gè)產(chǎn)品設(shè)計(jì)的戰(zhàn)略層。

經(jīng)營(yíng)者想要什么是商業(yè)需求，用戶(hù)想要什么是用戶(hù)需求。有了這個(gè)基本理解，才能準(zhǔn)確理解產(chǎn)品設(shè)計(jì)的商業(yè)價(jià)值和用戶(hù)價(jià)值。

聽(tīng)上去很簡(jiǎn)單。但是做起來(lái)不一定簡(jiǎn)單。很多設(shè)計(jì)師在執(zhí)行層，得到需求，完成設(shè)計(jì)工作。我個(gè)人認(rèn)為大部分設(shè)計(jì)師是能清晰理解用戶(hù)需求的；但是不一定每個(gè)設(shè)計(jì)師都能清晰理解商業(yè)需求。

例如做一個(gè)社交產(chǎn)品。年輕設(shè)計(jì)師很清楚這個(gè)社交產(chǎn)品面對(duì)的用戶(hù)群體和核心用戶(hù)場(chǎng)景（做了基本的Persona和Scenario分析），比較了解用戶(hù)在使用這個(gè)產(chǎn)品過(guò)程中的心理模型和行為習(xí)慣（通過(guò)共感等方式）。但是年輕設(shè)計(jì)師可能不夠了解這些問(wèn)題：這個(gè)社交產(chǎn)品的商業(yè)價(jià)值是什么？怎么給公司帶來(lái)收益？每一個(gè)點(diǎn)擊、每一個(gè)新增用戶(hù)、每一個(gè)廣告位、每一個(gè)流失、每一個(gè)轉(zhuǎn)化率各自意味著什么？這些細(xì)節(jié)對(duì)商業(yè)數(shù)據(jù)的影響？

這個(gè)理解程度差異直接給年輕設(shè)計(jì)師帶來(lái)兩個(gè)問(wèn)題：與產(chǎn)品方合作的時(shí)候講不清楚，達(dá)不成一致；對(duì)產(chǎn)品理解的全局觀不到位（很難成為產(chǎn)品的Owner）。

我有時(shí)會(huì)對(duì)團(tuán)隊(duì)的設(shè)計(jì)師提一些問(wèn)題，是與用戶(hù)體驗(yàn)設(shè)計(jì)相對(duì)無(wú)關(guān)的。例如：

這個(gè)產(chǎn)品的未來(lái)3年你怎么看？
這個(gè)產(chǎn)品現(xiàn)在所處的區(qū)間，是否有巨大優(yōu)勢(shì)且可以成功？
這個(gè)產(chǎn)品真實(shí)的產(chǎn)品差異點(diǎn)在哪兒？

這些都是戰(zhàn)略層問(wèn)題。也是一些設(shè)計(jì)師小伙伴忽略的部分。

所以，設(shè)計(jì)流程第一步，我覺(jué)得應(yīng)該是透徹理解產(chǎn)品的戰(zhàn)略層，包括商業(yè)價(jià)值和用戶(hù)價(jià)值，也就是，怎樣幫助公司持續(xù)發(fā)展地賺錢(qián)？怎樣幫助用戶(hù)提升他們的生活品質(zhì)？

二、Scope 范圍層

產(chǎn)品到底需要什么樣的功能和特性？換言之，這個(gè)產(chǎn)品要做什么。

早期的互聯(lián)網(wǎng)產(chǎn)品，怎么豐富怎么來(lái)。產(chǎn)品經(jīng)理希望把100個(gè)內(nèi)容模塊都一起扔到一個(gè)頁(yè)面上。那個(gè)時(shí)候做設(shè)計(jì)真心是痛苦啊?，F(xiàn)在好多了，大家都越來(lái)越清楚聚焦、簡(jiǎn)潔的重要性。

一個(gè)產(chǎn)品，有1-3個(gè)殺手級(jí)功能、特性就足夠精彩。

例如：Facebook的贊；Foursquare的Check in；Yo的Yo；微信的語(yǔ)音聊天等。

設(shè)計(jì)流程第二步，就是要知道產(chǎn)品需要什么樣的功能。這些功能要足夠滿(mǎn)足第一步中的商業(yè)價(jià)值和用戶(hù)價(jià)值，還需要把故事說(shuō)清楚。在一個(gè)產(chǎn)品中，功能不需要太多。

設(shè)計(jì)師面臨的挑戰(zhàn)是：做新產(chǎn)品的時(shí)候，輸入方太多，點(diǎn)子太多，如何選擇如何執(zhí)行，壓力很大；做改版的時(shí)候，可能現(xiàn)有版本的功能特性已經(jīng)很多，沒(méi)有辦法聚焦，你要改動(dòng)的時(shí)候，又會(huì)影響產(chǎn)品現(xiàn)有的形態(tài)和利益，如何精進(jìn)？

這些問(wèn)題都可以從第一步戰(zhàn)略層的思考得到輸入和幫助，甚至可以直接解決問(wèn)題。

三、Structure 結(jié)構(gòu)層

結(jié)構(gòu)層里重點(diǎn)思考結(jié)構(gòu)的具體表達(dá)方式，例如流程的進(jìn)行方式、界面元素的位置邏輯、導(dǎo)航的布局原則等，所以這個(gè)層關(guān)注信息框架和交互流程設(shè)計(jì)。

這就是設(shè)計(jì)師進(jìn)入交互設(shè)計(jì)的時(shí)候，是第三步。海量的設(shè)計(jì)準(zhǔn)則、豐富的設(shè)計(jì)經(jīng)驗(yàn)、靈感和創(chuàng)意，都可以在交互設(shè)計(jì)中得到體現(xiàn)。交互設(shè)計(jì)可以說(shuō)是具體設(shè)計(jì)的第一步，一個(gè)產(chǎn)品執(zhí)行過(guò)程中的質(zhì)量和創(chuàng)新程度，交互設(shè)計(jì)是起始點(diǎn)。

產(chǎn)品方和用戶(hù)關(guān)注最多的，一個(gè)產(chǎn)品好不好用，就依賴(lài)于交互設(shè)計(jì)中的每個(gè)細(xì)節(jié)：流程是否流暢；提示是否充足；容錯(cuò)性好不好；操作是否自然；界面是否統(tǒng)一；效率是否高……

在設(shè)計(jì)流程的第三步中，交互設(shè)計(jì)需要準(zhǔn)確把握商業(yè)價(jià)值、用戶(hù)價(jià)值，理解產(chǎn)品的核心功能特性，有效有質(zhì)量地描述整個(gè)產(chǎn)品結(jié)構(gòu)、節(jié)奏、特質(zhì)。是設(shè)計(jì)執(zhí)行中非常關(guān)鍵的一步。

四、Skeleton 框架層

框架層主要就是做每個(gè)界面了。這是設(shè)計(jì)執(zhí)行中，交互設(shè)計(jì)量最大的工作。

界面中每個(gè)元素，例如文字、圖片，如何細(xì)致地布置在一個(gè)頁(yè)面中。文字設(shè)計(jì)要精確到字段的大小、字體的大小，圖片設(shè)計(jì)要精確到組合布局的展示、形狀的釋義等。精細(xì)的交互稿可以完全展現(xiàn)產(chǎn)品形態(tài)，一個(gè)黑白的產(chǎn)品形態(tài)。

框架層，大部分設(shè)計(jì)師每天都接觸，就不一一講述方法了。只講兩個(gè)點(diǎn)。

細(xì)致

這個(gè)時(shí)候的細(xì)致體現(xiàn)在設(shè)計(jì)師每個(gè)元素布局、像素精準(zhǔn)、整體感觀、交互邏輯定位、交互標(biāo)注等方面。足夠細(xì)致的交互稿，可以提升產(chǎn)品設(shè)計(jì)結(jié)果品質(zhì)、幫助視覺(jué)設(shè)計(jì)更好地進(jìn)行視覺(jué)創(chuàng)意、幫助開(kāi)發(fā)測(cè)試更準(zhǔn)確理解產(chǎn)品設(shè)計(jì)。

創(chuàng)新

戰(zhàn)略層、范圍層，我們已經(jīng)經(jīng)歷了創(chuàng)新的主要階段?？蚣軐邮嵌蝿?chuàng)新的黃金機(jī)會(huì)。很多微創(chuàng)新、界面創(chuàng)新、特效創(chuàng)新，都來(lái)自這個(gè)階段。蘋(píng)果新的iOS與Google新的設(shè)計(jì)準(zhǔn)則中強(qiáng)調(diào)的交互動(dòng)效創(chuàng)新，很多可以發(fā)生在框架層設(shè)計(jì)階段。

五、Surface 表現(xiàn)層

關(guān)注感官的關(guān)鍵階段。視覺(jué)設(shè)計(jì)師、藝術(shù)家是核心。

一個(gè)產(chǎn)品經(jīng)歷了各種打磨，終于到最終呈現(xiàn)的階段。最終用戶(hù)看到的產(chǎn)品，80%是來(lái)自于表現(xiàn)層的設(shè)計(jì)工作。雖然產(chǎn)品設(shè)計(jì)背后的業(yè)務(wù)邏輯、功能巧思、開(kāi)發(fā)創(chuàng)新非常多，但是用戶(hù)看到的感官部分，表現(xiàn)層設(shè)計(jì)是最多的。

表現(xiàn)層是最直觀地看設(shè)計(jì)師本事的階段。優(yōu)秀的視覺(jué)設(shè)計(jì)師、動(dòng)效設(shè)計(jì)師、品牌設(shè)計(jì)師可以在這個(gè)層發(fā)揮得淋漓盡致。

以上5層并沒(méi)有區(qū)分角色。而且我不認(rèn)為每個(gè)角色應(yīng)該局限在某一個(gè)層中。

交互設(shè)計(jì)師

我建議是要完全進(jìn)入5個(gè)層的，這樣對(duì)你把握整個(gè)產(chǎn)品的特質(zhì)、故事、靈魂非常重要。要做到不僅僅是Designer，而是Owner，這5個(gè)層你都得完整理解并有一定控制權(quán)。

視覺(jué)設(shè)計(jì)師

也不要僅僅停留在后幾個(gè)層。誠(chéng)然，視覺(jué)設(shè)計(jì)師在設(shè)計(jì)流程的后面多一些，所以要去理解前幾個(gè)層不那么直觀，例如視覺(jué)設(shè)計(jì)師可能不會(huì)參加戰(zhàn)略層和范圍層的會(huì)議。但是你想想，視覺(jué)設(shè)計(jì)師已經(jīng)有充足的藝術(shù)氣息、視覺(jué)設(shè)計(jì)技能，再加上對(duì)前幾個(gè)層的理解，會(huì)是多么強(qiáng)大啊。

用戶(hù)研究工程師

在這5個(gè)層是非常關(guān)鍵的。你們是用戶(hù)和業(yè)務(wù)之間的橋梁。用戶(hù)是什么樣子，他們的一顰一笑一舉一動(dòng)，都是你們帶來(lái)的。所以用戶(hù)研究應(yīng)該貫穿在5個(gè)層中，通過(guò)使用不同的用戶(hù)研究方法（專(zhuān)家測(cè)試、用戶(hù)測(cè)試、用戶(hù)畫(huà)像、問(wèn)卷、數(shù)據(jù)分析等）去提供產(chǎn)品設(shè)計(jì)支持。

前端開(kāi)發(fā)工程師

現(xiàn)在的要求更高了，不僅僅是要實(shí)現(xiàn)，還要?jiǎng)?chuàng)造。強(qiáng)大互聯(lián)網(wǎng)公司（Google）的工程師文化是有依據(jù)的，技術(shù)創(chuàng)新是設(shè)計(jì)創(chuàng)新的一大輸入點(diǎn)。前端開(kāi)發(fā)工程師精通技術(shù)，如果再理解業(yè)務(wù)懂設(shè)計(jì)，基本是無(wú)敵的。

希望這個(gè)5層的設(shè)計(jì)流程思考維度分析，對(duì)你以后對(duì)設(shè)計(jì)的理解有一定幫助。：）

謝謝閱讀。