首頁技術(shù)文章正文

視覺設(shè)計師的進化

更新時間:2018-01-09 來源:黑馬程序員 瀏覽量:

視覺設(shè)計師面臨修飾者困境,本文將介紹設(shè)計沖刺帶給視覺設(shè)計師全鏈路認知和體系化思維的有效嘗試,助力成為杰出區(qū)分者和驅(qū)動者。

?視覺設(shè)計師的現(xiàn)狀

視覺設(shè)計師通常會面臨這樣的場景:做設(shè)計的時候要面臨來自產(chǎn)品、運營、開發(fā)等各方的意見,甚至有時候領(lǐng)導(dǎo)的需求是一切。

香港理工大學(xué)教授John Heskett認為,設(shè)計師有三層價值:

1、修飾者,主要美化產(chǎn)品頁面,體現(xiàn)較為底層的基礎(chǔ)價值

2、區(qū)分者,根據(jù)不同的產(chǎn)品打造不同調(diào)性,賦予產(chǎn)品差異性

3、驅(qū)動者,在戰(zhàn)略高度思考產(chǎn)品,引領(lǐng)整個公司,這是價值感非常強的階段

典型的例子就是蘋果公司,是一家設(shè)計師驅(qū)動、以設(shè)計為導(dǎo)向的公司,創(chuàng)新設(shè)計能力是產(chǎn)品的核心競爭力。這是每一位設(shè)計師夢寐以求的階段。要成為杰出的區(qū)分者乃至驅(qū)動者,就意味著需要具備全鏈路的開闊視野和綜合能力,既有用戶需求和商業(yè)需求的洞察能力,也有交互設(shè)計的思維能力,還有視覺設(shè)計的審美能力。

國內(nèi)大多數(shù)互聯(lián)網(wǎng)公司,由于崗位分工很明確,界限分明,在傳統(tǒng)的設(shè)計開發(fā)流程中,視覺設(shè)計師通常處于下游的流水線等待的狀態(tài),也就是交互設(shè)計之后的視覺還原工作,僅僅局限于將界面視覺美觀性發(fā)揮到極致,存在感和成就感都很低。很多視覺設(shè)計師可能處于第一層修飾者,小部分處于第二層區(qū)分者,成為杰出的區(qū)分者乃至驅(qū)動者指明了視覺設(shè)計師未來的主要進化發(fā)展方向之一。那么如何提升視覺設(shè)計師全鏈路的綜合能力呢?我們的實踐表明,谷歌的設(shè)計沖刺是一個很好的嘗試,創(chuàng)造了非常好的機會使視覺設(shè)計師全程協(xié)同參與,不僅更深刻地理解了用戶需求和業(yè)務(wù)目標,也更有效地提升了視覺設(shè)計的價值。

?設(shè)計沖刺簡介

設(shè)計沖刺是谷歌提出的一套為期5天的創(chuàng)新設(shè)計流程方法,集思考、設(shè)計、分析、產(chǎn)品原型產(chǎn)出為一體。

分為6個步驟:

1、理解:即理解用戶需求、商業(yè)需求,了解技術(shù)可行性

2、定義:定義關(guān)鍵和重點問題,既定義需求

3、發(fā)散:圍繞定義的需求盡可能探索更多的想法

4、決策:選擇目前來說最好的方案

5、原型:制作低保真原型進行用戶測試

6、驗證:與用戶、商業(yè)利益相關(guān)者、技術(shù)專家進行方案驗證測試,最后迭代優(yōu)化

?設(shè)計沖刺的實踐

網(wǎng)易易盾是網(wǎng)易云旗下一站式B2B安全服務(wù)平臺,其中內(nèi)容安全業(yè)務(wù)主要為客戶提供文本、圖片、視頻等垃圾過濾服務(wù)并開放相對應(yīng)的在線體驗服務(wù)。我們結(jié)合網(wǎng)易易盾廣告在線體驗功能的改版,給大家介紹一下設(shè)計沖刺的具體實踐過程以及視覺設(shè)計師的深度參與。

“網(wǎng)易易盾圖片在線體驗功能需要優(yōu)化”是這次改版的主要目標,其面臨的業(yè)務(wù)挑戰(zhàn)是,如何提升用戶體驗以確保用戶留存率。考慮到設(shè)計沖刺這種快速試錯迭代的設(shè)計方法,很適合短時間小范圍洞察用戶需求并測試其準確性以及發(fā)現(xiàn)具體需要完善的地方。這是傳統(tǒng)設(shè)計流程難以解決的,或者說是成本和風(fēng)險都相對比較高的任務(wù)。

1、理解

首先我們拿到產(chǎn)品的需求,“網(wǎng)易易盾圖片在線體驗功能不好用,需要優(yōu)化”。拿到需求第一步我們要做的是分析問題,從用戶入手,去挖掘和理解用戶的真實需求。

這次的項目中,視覺設(shè)計師也主動參與到用戶研究中。我們通過面對面的深度訪談、觀察用戶在使用過程中,具體在哪些環(huán)節(jié)上遇到了體驗上的問題。通過觀察到的行為和場景去挖掘隱藏著的真實需求。

深度訪談之后我們還原用戶所有的操作過程,繪制用戶旅程圖,即用戶行為路徑圖。我們發(fā)現(xiàn)用戶幾乎在每一個階段都遇到了操作上的問題,我們把問題對應(yīng)到每一階段的行為路徑上,比如找不到體驗入口、頁面跳轉(zhuǎn)頻繁、沒有明確的判斷標準、上傳過程很麻煩、結(jié)果不準確等。

用戶使用網(wǎng)易易盾圖片在線體驗功能過程

用戶使用網(wǎng)易易盾圖片在線體驗功能行為路徑圖以及各個階段對應(yīng)的問題點

2、定義

理解了用戶的真正需求之后,需要定義需求,把問題限定在一定的范圍內(nèi)進行討論和解決,這樣可以清晰目標,之后的一切工作都圍繞著定義好的需求展開。所以,定義問題(需求)比解決問題更重要。

那我們要如何定義需求呢?我們采用DVF(Desirability、Viability、Feasibility)模型來定義需求,也就是從用戶需求出發(fā),同時考慮技術(shù)可行性和業(yè)務(wù)可持續(xù)性。

DVF模型

最后,我們定義的圖片在線檢測功能需求如下:

使用場景:圖片在線檢測

目標客戶:有反垃圾需求的企業(yè)用戶

遇到的問題:操作復(fù)雜、判斷結(jié)果不精確

核心需求:簡單便捷的在線體驗服務(wù),判斷精準無誤

業(yè)務(wù)目標:提升用戶留存率

以前視覺設(shè)計師一拿到交互框架就開始美化界面,從一開始就沉浸在細節(jié)中卻很少去想為什么這樣解決,而正是從項目前期開始主動與用研同學(xué)一起理解和定義用戶真實需求,全方位、多角度熟悉業(yè)務(wù)目標和技術(shù)實現(xiàn)能力的過程中,視覺設(shè)計師們開始嘗試培養(yǎng)自己的理性思維,有針對性地去思考問題的真正起源,給自己的設(shè)計帶去一個更寬廣的視野和更清晰的理解;進而,將體驗?zāi)繕巳谌霕I(yè)務(wù)規(guī)劃,參與確定這次改版優(yōu)化的方向,將自己從接需求的被動角色轉(zhuǎn)變?yōu)轶w驗規(guī)劃的主動推進者。

3、發(fā)散

明確需求以后,就可以發(fā)散思維,探索各種可能的解決方案了。

我們結(jié)合波諾的水平思維法(即基于核心問題每個人自由發(fā)散思維,探索無窮無盡的各種可能性,通常用“我們該如何……”起頭)和概念扇思維法來發(fā)散思維,概念扇主要是有目標、方向、概念和想法方案四個部分組成。

現(xiàn)在有一個目標:將一個貼紙貼到天花板。 我們可能會想到梯子。思考一下:“梯子”只是“將我們從地面提高”的一個工具。如果把“將我們從地面提高”作為一個概念,這個概念發(fā)散還有“站在桌子上”“找人將我舉起來”。

“將我們從地面提高”只是“縮短貼紙與天花板的距離”,如果把他作為一個廣義概念,那么滿足他的其他概念還有“把我的胳膊變成”“讓物體移動”,對應(yīng)的想法就是“用棍子加長我的胳膊”、“用伸縮式桿”“貼到氫氣球上”、“操控?zé)o人機”等。

水平思維不拘泥與形式和路徑,你可以從任何節(jié)點開始,只要最終能建立這樣的概念扇即可。

概念扇應(yīng)用到實際案例中:

區(qū)別于傳統(tǒng)頭腦風(fēng)暴的地方是:設(shè)計沖刺鼓勵團隊成員在限定的時間內(nèi)獨立分散思考問題,然后再集體聚合每個人的想法。有了對于用戶需求和業(yè)務(wù)目標的深刻理解后,視覺設(shè)計師在此環(huán)節(jié)與其他同學(xué)一起,開始學(xué)會始終圍繞核心問題創(chuàng)造更好的體驗去有條理,有針對性地開腦洞,也讓自己的視覺創(chuàng)意有了更大的發(fā)揮空間,最終我們用便簽貼的方式輸出頭腦風(fēng)暴的結(jié)果,橫軸為可行性,縱軸為用戶價值、滿意度,聚合歸類所有想法。過程中我們不批判他人的想法是對是錯,你可以在他的想法的基礎(chǔ)上有延伸或者補充,腦洞越大越好,但要圍繞定義的需求和核心問題。

我們聚焦在問題較多的檢測過程中和檢測結(jié)果2個階段,提供多種方式上傳圖片、提供在線圖庫、檢測過程可感知、結(jié)果圈出廣告元素、具體原因分析等解決方案。

然后每個人根據(jù)自己提的點子,快速繪制方案草圖,然后從每個人繪制的草圖中選出自己最滿意的方案。

4、決策

決策的過程,我們提倡單獨投票,然后集體決定最好的概念。

解決方案1-TAB切換

解決方案2-在線樣本庫

解決方案3-檢測過程以及結(jié)果展示

以上是我們繪制的小部分草圖方案,我們的新方案具備以下幾個功能:廣告樣本圖片展示、廣告圖片判定規(guī)則說明、檢測過程真實可信、檢測結(jié)果準確,對結(jié)果有具體分析、支持多種本地上傳方式、提供在線樣本圖片庫。

5、原型

該階段我們需要把抽象的想法變成具體化的,可供用戶實際操作的低保真原型。對視覺設(shè)計師來說繪制低保真原型圖是優(yōu)勢所在。在這個過程中視覺設(shè)計師和交互設(shè)計師就會協(xié)同繪制原型。而與交互設(shè)計師的協(xié)同工作,也幫助視覺設(shè)計師更清楚地理解用戶需求實現(xiàn)時的整個設(shè)計的上下文邏輯關(guān)系和前因后果,避免了沒有支撐理由、自我表達式的視覺設(shè)計。

1、固定導(dǎo)航,減少切換

2、增加判斷規(guī)則和樣本示例

3、支持批量、單張、粘貼url、直接拖動等多種上傳方式

4、增加圖片在線樣本庫

5、在線圖片庫可以一次性添加10張隨機圖片,供檢測試用,也可以隨機更換

6、檢測進度可感知,讓用戶知道圖片在線檢測當(dāng)前的狀態(tài)

7、檢測結(jié)果圈出違規(guī)元素(文字、二維碼、電話等),圖片類型、違規(guī)程度百分比展示

6、驗證

設(shè)計沖刺包含2方面測試,第一是驗證概念方向是否正確,第二是可用性測試。由于我們這里做的是功能的優(yōu)化,所以只是做了可用性測試。我們招募了典型的5-7位用戶代表進行測試。在情境訪談式的可用性測試中,我們細心觀察用戶使用過程中的各種表情以及動作等,鼓勵用戶發(fā)聲思考。同時制作打分版,統(tǒng)計完成率、錯誤率。最后歸納總結(jié)所有問題,提出優(yōu)化的迭代方案。

測試結(jié)果表明,我們選定的方案是行之有效的,5位目標用戶均完成了我們的測試,整個操作流程基本沒有遇到挫折,體驗流暢,并大都給出了滿意的反饋。

改版之前存在頁面跳轉(zhuǎn)多、上傳方式單一、入口不明顯、檢測結(jié)果不準確等問題

改版之后體驗入口固定左側(cè)、樣本圖片展示、判斷標準展示、結(jié)果圈出廣告元素、展示類型和違規(guī)程度

新版本體驗動畫

?關(guān)于設(shè)計沖刺的反思

1、設(shè)計沖刺的本質(zhì)

其實,在我們看來,設(shè)計沖刺的本質(zhì)就是設(shè)計思維,是關(guān)于設(shè)計的元思考。

我們把設(shè)計沖刺歸納成2大階段,問題的解讀和問題的解決。第一個階段從用戶研究到問題和機會點定義,明確方向,是做正確的事情,屬于策略層面的事情;第二個階段明確方向以后,開始創(chuàng)意發(fā)散和迭代測試,直到重新聚攏在技術(shù)合理業(yè)務(wù)可行的方案上,是把事情做正確,這屬于執(zhí)行層面的事。這就是一種全局性認知。

2、設(shè)計沖刺的價值

通過實踐可以看到,視覺設(shè)計師參與整個研究和設(shè)計過程中,對目標用戶需求、業(yè)務(wù)目標和交互邏輯有更透徹和深入的理解,讓視覺設(shè)計回歸到了“人”本身,變得有理有據(jù),而不是單純的視覺技巧的呈現(xiàn),這樣視覺設(shè)計可以發(fā)揮更大的價值,能夠獲得更完整的視野和更系統(tǒng)的設(shè)計思考能力,從而在與用研、交互以及整個團隊的協(xié)同工作中釋放更大的價值,增強視覺設(shè)計師在團隊中的成就感。與此同時,設(shè)計沖刺強調(diào)的協(xié)同工作打破了職位分工的隔閡,大家學(xué)會相互理解,更合理地發(fā)揮各自所長,客觀上能夠大大提升團隊的創(chuàng)新效率。

精通自身領(lǐng)域同時具備綜合能力,那么你在團隊中的不可替代性更強,對于企業(yè)來說也會更重視這樣的全方位人才。

設(shè)計沖刺只是其中一種方法工作,如果自己能夠有意識地去培養(yǎng)整體性的設(shè)計思維,就回有更大的價值感和成就感產(chǎn)生。


本文版權(quán)歸黑馬程序員UI設(shè)計綜合設(shè)計師學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處。謝謝!

作者:黑馬程序員UI設(shè)計綜合設(shè)計師培訓(xùn)學(xué)院

首發(fā):http://ui.itheima.com/

分享到:
在線咨詢 我要報名
和我們在線交談!