國內(nèi)知名UED團隊的設(shè)計流程是怎樣的?
寫在前面:流程用好了是好東西,用不好是阻礙。
今天寫的設(shè)計流程的思考,以下。:)
設(shè)計存在于設(shè)計流程中。
設(shè)計師的工作是基于設(shè)計流程的。
和很多朋友討論過設(shè)計流程。這個流程在每個國家、每個行業(yè)、每個公司、甚至是同個公司的不同業(yè)務(wù)下,都是不一樣的。所以要寫出來,很難統(tǒng)一概括。
與設(shè)計師相關(guān)的設(shè)計流程,可能一個基本認(rèn)知是這樣的:
產(chǎn)品需求,交互設(shè)計,視覺設(shè)計,前端開發(fā)。
再豐富一些:
市場分析,創(chuàng)意階段,用戶研究,概念設(shè)計,設(shè)計控件預(yù)設(shè),交互設(shè)計,交互Demo,用戶測試,視覺預(yù)研,視覺設(shè)計,設(shè)計Demo,用戶驗證測試,前 端開發(fā),開發(fā)Demo,展示Demo,迭代,用戶測試,測試數(shù)據(jù)回收,用戶數(shù)據(jù)驗證,灰度,全量,項目總結(jié),規(guī)范輸出,控件庫,用戶跟蹤反饋……
再凌亂一些:
以上所有點,順序是可以根據(jù)敏捷開發(fā)的需求,靈活排列的。也可以隨機組合。
所以,現(xiàn)在大多公司的設(shè)計流程,是一個標(biāo)準(zhǔn)且完整的架子。在實際設(shè)計項目中使用,并不一定是那么規(guī)范和統(tǒng)一的。有時項目大,可能流程走的完整;有時項目小步快跑,流程就會被精簡為一個可用且貼合業(yè)務(wù)的小流程。
設(shè)計流程為什么這么不可控?因為設(shè)計不是完全理性、可工程化的。
一輛汽車可以通過完整有效的流程快速組裝起來,且能保證質(zhì)量;點子、思路、設(shè)計,不能這樣。沒有人能提供一個設(shè)計流程,能保證任何人進(jìn)入這個流程,挨著一步一步做,就能做出設(shè)計精品。所以設(shè)計流程,是幫助產(chǎn)品設(shè)計推動,且為設(shè)計思路提供思考維度的一個不可工程化的方式。
我在美國、中國、德國工作時,都和設(shè)計師小伙伴一起制定了很多設(shè)計流程和方法。每個都不一樣。
但是我發(fā)現(xiàn),思考維度是類似的。
所以今天,我想借用Jesse James Garrett書中對用戶體驗要素分層的一個參考,來描述下設(shè)計流程的思考維度。
書名:用戶體驗要素:以用戶為中心的產(chǎn)品設(shè)計
作者:Jesse James Garrett1,Surface 表現(xiàn)層
2,Skeleton 框架層
3,Structure 結(jié)構(gòu)層
4,Scope 范圍層
5,Strategy 戰(zhàn)略層
這是書中對用戶體驗要素分層的想法。我覺得貼合設(shè)計流程來描述,應(yīng)該反過來說。
一、Strategy 戰(zhàn)略層
經(jīng)營者想要什么?用戶想要什么?這兩個問題能回答清楚,才能算是了解這個產(chǎn)品設(shè)計的戰(zhàn)略層。
經(jīng)營者想要什么是商業(yè)需求,用戶想要什么是用戶需求。有了這個基本理解,才能準(zhǔn)確理解產(chǎn)品設(shè)計的商業(yè)價值和用戶價值。
聽上去很簡單。但是做起來不一定簡單。很多設(shè)計師在執(zhí)行層,得到需求,完成設(shè)計工作。我個人認(rèn)為大部分設(shè)計師是能清晰理解用戶需求的;但是不一定每個設(shè)計師都能清晰理解商業(yè)需求。
例如做一個社交產(chǎn)品。年輕設(shè)計師很清楚這個社交產(chǎn)品面對的用戶群體和核心用戶場景(做了基本的Persona和Scenario分析),比較了解用 戶在使用這個產(chǎn)品過程中的心理模型和行為習(xí)慣(通過共感等方式)。但是年輕設(shè)計師可能不夠了解這些問題:這個社交產(chǎn)品的商業(yè)價值是什么?怎么給公司帶來收 益?每一個點擊、每一個新增用戶、每一個廣告位、每一個流失、每一個轉(zhuǎn)化率各自意味著什么?這些細(xì)節(jié)對商業(yè)數(shù)據(jù)的影響?
這個理解程度差異直接給年輕設(shè)計師帶來兩個問題:與產(chǎn)品方合作的時候講不清楚,達(dá)不成一致;對產(chǎn)品理解的全局觀不到位(很難成為產(chǎn)品的Owner)。
我有時會對團隊的設(shè)計師提一些問題,是與用戶體驗設(shè)計相對無關(guān)的。例如:
這個產(chǎn)品的未來3年你怎么看?
這個產(chǎn)品現(xiàn)在所處的區(qū)間,是否有巨大優(yōu)勢且可以成功?
這個產(chǎn)品真實的產(chǎn)品差異點在哪兒?
這些都是戰(zhàn)略層問題。也是一些設(shè)計師小伙伴忽略的部分。
所以,設(shè)計流程第一步,我覺得應(yīng)該是透徹理解產(chǎn)品的戰(zhàn)略層,包括商業(yè)價值和用戶價值,也就是,怎樣幫助公司持續(xù)發(fā)展地賺錢?怎樣幫助用戶提升他們的生活品質(zhì)?
二、Scope 范圍層
產(chǎn)品到底需要什么樣的功能和特性?換言之,這個產(chǎn)品要做什么。
早期的互聯(lián)網(wǎng)產(chǎn)品,怎么豐富怎么來。產(chǎn)品經(jīng)理希望把100個內(nèi)容模塊都一起扔到一個頁面上。那個時候做設(shè)計真心是痛苦啊?,F(xiàn)在好多了,大家都越來越清楚聚焦、簡潔的重要性。
一個產(chǎn)品,有1-3個殺手級功能、特性就足夠精彩。
例如:Facebook的贊;Foursquare的Check in;Yo的Yo;微信的語音聊天等。
設(shè)計流程第二步,就是要知道產(chǎn)品需要什么樣的功能。這些功能要足夠滿足第一步中的商業(yè)價值和用戶價值,還需要把故事說清楚。在一個產(chǎn)品中,功能不需要太多。
設(shè)計師面臨的挑戰(zhàn)是:做新產(chǎn)品的時候,輸入方太多,點子太多,如何選擇如何執(zhí)行,壓力很大;做改版的時候,可能現(xiàn)有版本的功能特性已經(jīng)很多,沒有辦法聚焦,你要改動的時候,又會影響產(chǎn)品現(xiàn)有的形態(tài)和利益,如何精進(jìn)?
這些問題都可以從第一步戰(zhàn)略層的思考得到輸入和幫助,甚至可以直接解決問題。
三、Structure 結(jié)構(gòu)層
結(jié)構(gòu)層里重點思考結(jié)構(gòu)的具體表達(dá)方式,例如流程的進(jìn)行方式、界面元素的位置邏輯、導(dǎo)航的布局原則等,所以這個層關(guān)注信息框架和交互流程設(shè)計。
這就是設(shè)計師進(jìn)入交互設(shè)計的時候,是第三步。海量的設(shè)計準(zhǔn)則、豐富的設(shè)計經(jīng)驗、靈感和創(chuàng)意,都可以在交互設(shè)計中得到體現(xiàn)。交互設(shè)計可以說是具體設(shè)計的第一步,一個產(chǎn)品執(zhí)行過程中的質(zhì)量和創(chuàng)新程度,交互設(shè)計是起始點。
產(chǎn)品方和用戶關(guān)注最多的,一個產(chǎn)品好不好用,就依賴于交互設(shè)計中的每個細(xì)節(jié):流程是否流暢;提示是否充足;容錯性好不好;操作是否自然;界面是否統(tǒng)一;效率是否高……
在設(shè)計流程的第三步中,交互設(shè)計需要準(zhǔn)確把握商業(yè)價值、用戶價值,理解產(chǎn)品的核心功能特性,有效有質(zhì)量地描述整個產(chǎn)品結(jié)構(gòu)、節(jié)奏、特質(zhì)。是設(shè)計執(zhí)行中非常關(guān)鍵的一步。
四、Skeleton 框架層
框架層主要就是做每個界面了。這是設(shè)計執(zhí)行中,交互設(shè)計量最大的工作。
界面中每個元素,例如文字、圖片,如何細(xì)致地布置在一個頁面中。文字設(shè)計要精確到字段的大小、字體的大小,圖片設(shè)計要精確到組合布局的展示、形狀的釋義等。精細(xì)的交互稿可以完全展現(xiàn)產(chǎn)品形態(tài),一個黑白的產(chǎn)品形態(tài)。
框架層,大部分設(shè)計師每天都接觸,就不一一講述方法了。只講兩個點。
細(xì)致
這個時候的細(xì)致體現(xiàn)在設(shè)計師每個元素布局、像素精準(zhǔn)、整體感觀、交互邏輯定位、交互標(biāo)注等方面。足夠細(xì)致的交互稿,可以提升產(chǎn)品設(shè)計結(jié)果品質(zhì)、幫助視覺設(shè)計更好地進(jìn)行視覺創(chuàng)意、幫助開發(fā)測試更準(zhǔn)確理解產(chǎn)品設(shè)計。
創(chuàng)新
戰(zhàn)略層、范圍層,我們已經(jīng)經(jīng)歷了創(chuàng)新的主要階段。框架層是二次創(chuàng)新的黃金機會。很多微創(chuàng)新、界面創(chuàng)新、特效創(chuàng)新,都來自這個階段。蘋果新的iOS與Google新的設(shè)計準(zhǔn)則中強調(diào)的交互動效創(chuàng)新,很多可以發(fā)生在框架層設(shè)計階段。
五、Surface 表現(xiàn)層
關(guān)注感官的關(guān)鍵階段。視覺設(shè)計師、藝術(shù)家是核心。
一個產(chǎn)品經(jīng)歷了各種打磨,終于到最終呈現(xiàn)的階段。最終用戶看到的產(chǎn)品,80%是來自于表現(xiàn)層的設(shè)計工作。雖然產(chǎn)品設(shè)計背后的業(yè)務(wù)邏輯、功能巧思、開發(fā)創(chuàng)新非常多,但是用戶看到的感官部分,表現(xiàn)層設(shè)計是最多的。
表現(xiàn)層是最直觀地看設(shè)計師本事的階段。優(yōu)秀的視覺設(shè)計師、動效設(shè)計師、品牌設(shè)計師可以在這個層發(fā)揮得淋漓盡致。
以上5層并沒有區(qū)分角色。而且我不認(rèn)為每個角色應(yīng)該局限在某一個層中。
交互設(shè)計師
我建議是要完全進(jìn)入5個層的,這樣對你把握整個產(chǎn)品的特質(zhì)、故事、靈魂非常重要。要做到不僅僅是Designer,而是Owner,這5個層你都得完整理解并有一定控制權(quán)。
視覺設(shè)計師
也不要僅僅停留在后幾個層。誠然,視覺設(shè)計師在設(shè)計流程的后面多一些,所以要去理解前幾個層不那么直觀,例如視覺設(shè)計師可能不會參加戰(zhàn)略層和范圍層的會議。但是你想想,視覺設(shè)計師已經(jīng)有充足的藝術(shù)氣息、視覺設(shè)計技能,再加上對前幾個層的理解,會是多么強大啊。
用戶研究工程師
在這5個層是非常關(guān)鍵的。你們是用戶和業(yè)務(wù)之間的橋梁。用戶是什么樣子,他們的一顰一笑一舉一動,都是你們帶來的。所以用戶研究應(yīng)該貫穿在5個層中,通過使用不同的用戶研究方法(專家測試、用戶測試、用戶畫像、問卷、數(shù)據(jù)分析等)去提供產(chǎn)品設(shè)計支持。
前端開發(fā)工程師
現(xiàn)在的要求更高了,不僅僅是要實現(xiàn),還要創(chuàng)造。強大互聯(lián)網(wǎng)公司(Google)的工程師文化是有依據(jù)的,技術(shù)創(chuàng)新是設(shè)計創(chuàng)新的一大輸入點。前端開發(fā)工程師精通技術(shù),如果再理解業(yè)務(wù)懂設(shè)計,基本是無敵的。
希望這個5層的設(shè)計流程思考維度分析,對你以后對設(shè)計的理解有一定幫助。:)
謝謝閱讀。
thanks,yoyo
原文來自:優(yōu)設(shè)
原文地址:zhihu
作者:@EDC尤原慶
我們這里的UX全部都做,從思維導(dǎo)圖到邏輯圖到低保真到視覺設(shè)計再加動效,可慘
寫的不錯,但是有一點,如果目標(biāo)不明確,就會打架,職責(zé)重疊,肯定就會引起紛爭,各自職責(zé)必須明確以哪個為主,哪個為輔才是對的,本末倒置,如果交互主導(dǎo),還要產(chǎn)品做什么,或者要產(chǎn)品,還要交互做什么,每個人擅長的東西不同,才會有側(cè)重點,有的比較擅長戰(zhàn)略,不擅長交互,有的擅長交互,不擅長戰(zhàn)略,到目前為止,我沒有見到幾個全能的,以前我也覺得所有都會牛,但是一個團隊,每個人的領(lǐng)域都不同,還是要相信專長的人,最多也是建議,不在其位,不謀其職,這老話一點都不假,多了解一些,是好的,但是不要蓋過自己的本職
贊同。