交互稿不僅僅是一張黑白稿而已!

0 評(píng)論 8643 瀏覽 10 收藏 19 分鐘

從表現(xiàn)層來(lái)看,交互設(shè)計(jì)師產(chǎn)出的內(nèi)容,除了流程的設(shè)計(jì),就只有一頁(yè)頁(yè)黑白稿了。然而,產(chǎn)出稿子的過(guò)程真是那么簡(jiǎn)單嗎?本文作者對(duì)他在畫(huà)設(shè)計(jì)稿時(shí)思考的一些問(wèn)題進(jìn)行了分析,一起來(lái)看一下吧。

不知道你在工作中有沒(méi)有遇到這樣的場(chǎng)景:“哎呀,你畫(huà)下交互稿更快的呀,就不同東西拼一拼下就好啦”、“一個(gè)星期就只有這幾個(gè)黑白的頁(yè)面?效率會(huì)不會(huì)太低了?”、“這個(gè)需求很簡(jiǎn)單,類似這樣畫(huà)出來(lái)就行”、“只要這幾個(gè)頁(yè)面,下午可以給到吧”……

每次加班爆肝出的設(shè)計(jì)稿在他人眼中不過(guò)就是拼一拼,似乎對(duì)于交互設(shè)計(jì)師而言,不用完善邊界場(chǎng)景,輸出交互稿好像是放個(gè)屁一樣容易。雖然從表現(xiàn)層來(lái)看,交互設(shè)計(jì)師產(chǎn)出的內(nèi)容除去流程的設(shè)計(jì),剩下的就是一頁(yè)頁(yè)可能沒(méi)有特別好看的黑白稿了。

但那個(gè)產(chǎn)出稿子的過(guò)程真是這么簡(jiǎn)單嗎?今天就來(lái)來(lái)聊下,我在畫(huà)設(shè)計(jì)稿的時(shí)候會(huì)去思考什么問(wèn)題,大家看到內(nèi)容后也可以說(shuō)說(shuō)自己畫(huà)稿的時(shí)候會(huì)思考什么,多討論多交流~

交互稿不僅僅是一張黑白稿而已!

一、有意識(shí)地注重引導(dǎo)設(shè)計(jì)

交互從本身的名稱而言,就是用戶與產(chǎn)品的互動(dòng),只不過(guò)我們?nèi)粘8嗟氖欠旁谑謾C(jī)、電腦、ipad這塊屏幕上進(jìn)行,但是其本質(zhì)就是人和某個(gè)東西的行為互動(dòng),人產(chǎn)生行為進(jìn)行輸入,機(jī)器根據(jù)人的行為做出反應(yīng)而已,就是這是一個(gè)雙向的過(guò)程。

所以這其中便涉及到一個(gè)如何讓人產(chǎn)生行為進(jìn)行互動(dòng),以及用什么樣的方式來(lái)互動(dòng)的問(wèn)題。所以我們?cè)诔鲈O(shè)計(jì)稿的時(shí)候需要有意識(shí)地注重引導(dǎo)的設(shè)計(jì)。

這里的引導(dǎo)設(shè)計(jì)不是指我們?nèi)粘?吹阶疃嗟男率忠龑?dǎo),而是通過(guò)我們?cè)陧?yè)面上信息、結(jié)構(gòu)、排布、視覺(jué)重點(diǎn)及動(dòng)畫(huà)等設(shè)計(jì)從而對(duì)用戶進(jìn)行引導(dǎo)。不知道你發(fā)現(xiàn)沒(méi)有,微信上其實(shí)很少有新手引導(dǎo)的設(shè)計(jì),據(jù)說(shuō)是張小龍覺(jué)得需要新手引導(dǎo)的設(shè)計(jì)就沒(méi)做好設(shè)計(jì)。接下來(lái)我們就從行為引導(dǎo)設(shè)計(jì)的角度來(lái)聊聊應(yīng)該怎么做。

1. 一個(gè)頁(yè)面只展示一個(gè)重點(diǎn),并盡量只保留一個(gè)操作項(xiàng)

優(yōu)秀設(shè)計(jì)的經(jīng)典要素之一就是形式簡(jiǎn)約,以簡(jiǎn)馭繁。對(duì)于交互設(shè)計(jì)師而言,就是運(yùn)用最少的元素控件來(lái)完成任務(wù);對(duì)于視覺(jué)而言,就是用最少的視覺(jué)區(qū)別明確表達(dá)意思。關(guān)于這點(diǎn)我想可以好好去體驗(yàn)下Apple的官網(wǎng)你就可以感受。

官網(wǎng)上全是自家產(chǎn)品的高清大圖,文字寥寥無(wú)幾,通過(guò)精美的高清大圖及主要的功能入口,簡(jiǎn)約大氣的展示了自己賣點(diǎn),且因?yàn)闆](méi)有其他元素的干擾,用戶很容易可以看到“進(jìn)一步了解”、“購(gòu)買(mǎi)”的操作入口,即使Apple并沒(méi)有用大按鈕,用了很弱的文字按鈕,我們依舊可以看到。

交互稿不僅僅是一張黑白稿而已!

交互稿不僅僅是一張黑白稿而已!

進(jìn)步一進(jìn)入到產(chǎn)品的詳細(xì)細(xì)節(jié),我以Apple Watch 為例,來(lái)看看 Apple的設(shè)計(jì)師是如何一步步的引導(dǎo)你了解產(chǎn)品,不斷刺激你心坎,最終下單的。

①進(jìn)入詳情直接是視頻自動(dòng)播放,通過(guò)一個(gè)視頻將手表的外觀、結(jié)構(gòu)堅(jiān)硬、耐磨、耐高低溫、續(xù)航、GPS、防水、麥克風(fēng)收音、檢測(cè)等性能賣點(diǎn)在一個(gè)精美的視頻中完美呈現(xiàn),并且視頻根據(jù)不同賣點(diǎn)特性選擇了特定的場(chǎng)景進(jìn)行拍攝,通過(guò)這樣的方式進(jìn)一步凸顯出特點(diǎn)。

ps:值得注意的是,進(jìn)入詳情后,視頻并不是全部播完,因?yàn)橐曨l總共有3分多鐘,所以設(shè)計(jì)師采用的是將不同場(chǎng)景的頁(yè)面切出來(lái),只展示幾個(gè)特點(diǎn)的畫(huà)面,然后就該視頻就自動(dòng)消失,帶領(lǐng)用戶進(jìn)入到更加詳細(xì)的內(nèi)容中。

交互稿不僅僅是一張黑白稿而已!

②隨后便是漸隱出主題商品的核心賣點(diǎn),除了主題商品的高清圖外,包含主體標(biāo)題“越野心越馳”,這樣的一個(gè)標(biāo)題文案不光與主題視頻緊扣,文案押韻上也是精心設(shè)計(jì),野、馳,光是文案都很有吸引力;其次是下面的小黑字都是在突出這款新手表的核心特點(diǎn)。這很重要,通過(guò)突出核心特點(diǎn),吸引用戶,從而產(chǎn)生向下繼續(xù)看的行為。

交互稿不僅僅是一張黑白稿而已!

③繼續(xù)向下滑動(dòng)即開(kāi)始展開(kāi)產(chǎn)品的詳細(xì)說(shuō)明,先是給的總覽,告知用戶新設(shè)計(jì),體現(xiàn)“新”就一行字加產(chǎn)品圖,沒(méi)有其余任何信息,就這么簡(jiǎn)單。果然是有質(zhì)感的圖片就是會(huì)自然而然的吸引你,apple官網(wǎng)上的所有產(chǎn)品圖都是實(shí)體拍攝+后期,不是建模,保留了材質(zhì)應(yīng)有質(zhì)感。

交互稿不僅僅是一張黑白稿而已!

④而后開(kāi)始對(duì)各個(gè)特征進(jìn)行詳細(xì)說(shuō)明,在這些詳細(xì)說(shuō)明中,可以看到運(yùn)用了大量的流暢動(dòng)畫(huà)進(jìn)行點(diǎn)對(duì)點(diǎn)的詳細(xì)展示,根據(jù)用戶下滑的行為,每次都僅展示一行關(guān)鍵字,讓用戶的視覺(jué)焦點(diǎn)始終跟著他們的設(shè)計(jì)走,更加專注,一步步強(qiáng)化核心特點(diǎn),同時(shí)這樣的描述也能讓用戶更容易理解。

交互稿不僅僅是一張黑白稿而已!

交互稿不僅僅是一張黑白稿而已!

從上述Apple逛網(wǎng)我們可以看出,設(shè)計(jì)師們通過(guò)以下幾個(gè)方式來(lái)引導(dǎo)用戶從上至下瀏覽產(chǎn)品細(xì)節(jié):

  1. 視頻展示,通過(guò)視頻代替文字直接展示核心賣點(diǎn),場(chǎng)景更具代入感,用戶更好理解
  2. 標(biāo)題+高清圖,排除其他雜亂信息干擾,專注圖和文案
  3. 大量的動(dòng)圖,根據(jù)文案搭配動(dòng)圖展示,使其介紹的點(diǎn)與動(dòng)圖緊密結(jié)合,非常容易理解

通過(guò)以上這些設(shè)計(jì)方法,我們?cè)跒g覽的時(shí)候因?yàn)楸划a(chǎn)品吸引,介紹清晰明了,表現(xiàn)簡(jiǎn)潔生動(dòng),就會(huì)莫名的產(chǎn)生好感,并產(chǎn)生繼續(xù)向下滑動(dòng)查看的動(dòng)機(jī)。

2. 以創(chuàng)意撬動(dòng)用戶行為

通過(guò)建立關(guān)聯(lián)的方式,打動(dòng)用戶,讓用戶自己自發(fā)產(chǎn)生、停止行為,接下來(lái)來(lái)看下以下幾個(gè)案例:

通過(guò)煙霧、視頻等傳感器,有人在廣告牌前抽煙時(shí),畫(huà)面中的人物就會(huì)咳嗽,通過(guò)這樣的方式引起他人注意,從而影響他人行為,即:掐斷煙!

交互稿不僅僅是一張黑白稿而已!

厚實(shí)的面包片被切下它將被一只略顯粗糙的手拿走,你恍然大悟,露出笑容,原來(lái)你輕輕一刷的2歐元,代表了給第三世界的孩子食糧與自由。

交互稿不僅僅是一張黑白稿而已!

繩索唰的一聲斷開(kāi),那雙稚嫩的手重獲自由。

交互稿不僅僅是一張黑白稿而已!

鋼琴樓梯。通過(guò)增加走樓梯的趣味度,改善人們的行為方式:

交互稿不僅僅是一張黑白稿而已!

QQ的去紅點(diǎn)的設(shè)計(jì)算是經(jīng)典吧,在大眾產(chǎn)品對(duì)紅點(diǎn)都不重視的情況下,對(duì)紅點(diǎn)做了小的創(chuàng)新設(shè)計(jì),我當(dāng)時(shí)第一次用的時(shí)候玩這個(gè)玩了好久~

交互稿不僅僅是一張黑白稿而已!

所以,通過(guò)上面的這些案例發(fā)現(xiàn),有趣、好玩、包含深刻意義的設(shè)計(jì)能讓用戶非常自發(fā)的產(chǎn)生行為,這種自愿是發(fā)自內(nèi)心的,且非常能夠調(diào)動(dòng)用戶情緒,做完后還非常有成就感。所以我們?cè)谌粘TO(shè)計(jì)的時(shí)候,也可以考慮是否可以加入一些有趣的元素、制造驚喜,因?yàn)槿颂焐矚g驚喜!

3. 人臉是一種被驗(yàn)證過(guò)有效引導(dǎo)用戶的方式

喜歡看臉是人的天性,人喜歡看有明顯面部特征的東西,以及會(huì)受到人的視線的引導(dǎo)。

交互稿不僅僅是一張黑白稿而已!

交互稿不僅僅是一張黑白稿而已!

4. 動(dòng)效

人眼對(duì)動(dòng)的東西都非常敏感,即使這個(gè)東西在我們以為的視覺(jué)邊緣,也能成功吸引用戶的注意。最常見(jiàn)的就是網(wǎng)頁(yè)的左下角、右下角有動(dòng)態(tài)的廣告,即使角落只有一小塊的空間,但是一旦動(dòng)起來(lái),用戶便可第一時(shí)間注意到。

例1:一些常用APP的主要轉(zhuǎn)化按鈕都加入一些動(dòng)效,以及手指點(diǎn)擊的效果,引導(dǎo)你點(diǎn)擊按鈕從而實(shí)現(xiàn)轉(zhuǎn)化。

交互稿不僅僅是一張黑白稿而已!例2:對(duì)于很多視頻類的產(chǎn)品,在提供封面讓用戶選擇時(shí),都會(huì)提供預(yù)覽動(dòng)圖,讓用戶更好的注意并理解其內(nèi)容,進(jìn)而促進(jìn)內(nèi)容本身的轉(zhuǎn)化。

交互稿不僅僅是一張黑白稿而已!

最后,放一個(gè)微信的頁(yè)面,我覺(jué)得設(shè)計(jì)得很好,很容易理解。即:語(yǔ)音、語(yǔ)音轉(zhuǎn)文字、取消語(yǔ)音。看看微信是如何將這一系列的功能做到這么優(yōu)秀的。

交互稿不僅僅是一張黑白稿而已!

不知道到大家注意到?jīng)]有,設(shè)計(jì)師將文案中間都是空格隔開(kāi)的,先按住 再說(shuō)話 松開(kāi)后就會(huì)發(fā)送,所以就有 “按住 講話” “松開(kāi) 發(fā)送”,行為的先后在文案上就給到你感知;其次是在語(yǔ)音錄入界面的反饋?zhàn)龅谜娴姆浅2欢?,手指移?dòng)到取消、轉(zhuǎn)文本上對(duì)應(yīng)的頁(yè)面反饋、文案反饋,讓人真的非常容易理解。

當(dāng)然這塊還包括,大小 位置 文案啥的,具體可以看我之前寫(xiě)的一篇:怎樣設(shè)計(jì)轉(zhuǎn)化頁(yè)?重點(diǎn)關(guān)注2個(gè)方面!

小結(jié):關(guān)注注重引導(dǎo)設(shè)計(jì)我就講這三方面,希望可以讓大家在做設(shè)計(jì)的時(shí)候不要一提到引導(dǎo)就想到新手引導(dǎo),而是可以先從頁(yè)面信息展示、趣味創(chuàng)意、動(dòng)效、位置、文案等上面優(yōu)先去思考,不要偷懶,一上來(lái)就新手引導(dǎo),請(qǐng)記住,在引導(dǎo)設(shè)計(jì)上,新手引導(dǎo)應(yīng)該是最不應(yīng)該先考慮的。

二、產(chǎn)品的思考與業(yè)務(wù)的理解

這點(diǎn)我覺(jué)得是很多設(shè)計(jì)師都欠缺的,計(jì)師不理解業(yè)務(wù),往往和產(chǎn)品只能進(jìn)行“不對(duì)等”溝通,只有真正理解了業(yè)務(wù)才會(huì)正確發(fā)現(xiàn)問(wèn)題,正確發(fā)現(xiàn)問(wèn)題才能正確解決問(wèn)題。在深入理解業(yè)務(wù)的基礎(chǔ)上,可以發(fā)揮更大的設(shè)計(jì)價(jià)值,挖掘更多的設(shè)計(jì)機(jī)會(huì)點(diǎn),才能站在更高的視角為產(chǎn)品服務(wù),輔助產(chǎn)品決策,幫助產(chǎn)品更快速達(dá)成商業(yè)目標(biāo)。特別特別是B端設(shè)計(jì)師。

具體如何快速了解業(yè)務(wù),我自身的建議是:親自去嘗試,將有關(guān)模塊所有可以點(diǎn)的都親自去走一遍,將流程梳理出來(lái),并且把各個(gè)場(chǎng)景都梳理出來(lái)(不同場(chǎng)景、不同角色),只有這樣我們才能在最快的時(shí)間內(nèi)對(duì)自己所做的事情有個(gè)整體的認(rèn)知。

例1:QQ支付的一個(gè)優(yōu)化案,希望對(duì)支付進(jìn)行體驗(yàn)優(yōu)化。這是產(chǎn)品提出的訴求,如果設(shè)計(jì)師沒(méi)去好好梳理支付相關(guān)的業(yè)務(wù),可能最后產(chǎn)出就僅僅局限在支付主流程,而忽視了其實(shí)更多影響體驗(yàn)的是一些分支流程細(xì)節(jié)的處理。但實(shí)際上,僅僅是一個(gè)支付頁(yè)面所涉及的場(chǎng)景及流程是非常的龐大的。

交互稿不僅僅是一張黑白稿而已!

交互稿不僅僅是一張黑白稿而已!

并且還包含著未成年人開(kāi)戶等合規(guī)一系列流程,深入了解后,會(huì)發(fā)現(xiàn)這真是個(gè)龐大的工程!只有了解了業(yè)務(wù),才可以cover到更多場(chǎng)景,把控到更多細(xì)節(jié),才能最終達(dá)到提升體驗(yàn)的目的。

例2:我其中的一個(gè)案子是關(guān)于QQ小游戲開(kāi)發(fā)者平臺(tái)優(yōu)化,接到需求時(shí)就被告知需要進(jìn)行優(yōu)化,產(chǎn)品有給到需要優(yōu)化的點(diǎn)。但是如果不和產(chǎn)品細(xì)致的溝通就不知道促成這次優(yōu)化的背景是因?yàn)楹弦?guī),因?yàn)樾抡邔?dǎo)致需要對(duì)平臺(tái)進(jìn)行合規(guī)的優(yōu)化,讓各類信息、審核更加規(guī)范化;

其次是內(nèi)部審核過(guò)程中效率不夠高,所以需要對(duì)審核流程、模式進(jìn)行優(yōu)化,在合規(guī)和效率上共同進(jìn)行改版。

所以在深入溝通后,我了解了大背景就是合規(guī)和提效,在了解了這個(gè)大背景后,我就開(kāi)始對(duì)整個(gè)管理端進(jìn)行了整個(gè)流程的梳理,這個(gè)過(guò)程很繁雜,因?yàn)檎娴奶珡?fù)雜了,涉及到的角色、流程、模塊太多,以及很多頁(yè)面我都咩有權(quán)限,所以導(dǎo)致我到處問(wèn),花了很多時(shí)間。

但是這樣的一個(gè)梳理過(guò)程也讓我有個(gè)全盤(pán)的視角,在做設(shè)計(jì)的時(shí)候,畫(huà)著畫(huà)著就會(huì)自然想到當(dāng)前這個(gè)和另外某個(gè)模塊是有關(guān)聯(lián)的,從而進(jìn)行聯(lián)動(dòng)優(yōu)化,這樣就能更加全盤(pán),更閉環(huán)地完成這個(gè)任務(wù)。

最終在充分了解了整個(gè)背景及業(yè)務(wù)后,便可以和產(chǎn)品溝通擬定整體的優(yōu)化策略,再后面就有序輸出與跟進(jìn)落地開(kāi)發(fā)便可。

最后,可以多去看下市場(chǎng)上不同的產(chǎn)品,辨析他們?yōu)槭裁催@么做?舉個(gè)例子:為什么抖快采用了單列模式,而小紅書(shū)、B站等還在用雙列模式呢?什么樣的交互模式適合自己的產(chǎn)品呢?歡迎大家可以留言討論。

總結(jié):以上兩點(diǎn)就是我近期的一些想法,自己在這兩點(diǎn)中踩了很多坑,希望你們不要踩坑,最后關(guān)注一下我唄~

本文由 @小發(fā)的設(shè)計(jì)筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!