在某些維度上，交互設(shè)計(jì)師和UI設(shè)計(jì)師之間的工作內(nèi)容或思考方式是存在差異的，那么，你了解交互和UI之間的差異在哪兒?jiǎn)?？本篇文章里，作者就結(jié)合實(shí)戰(zhàn)案例，聊了聊交互與UI的思維差異，一起來看看吧，或許會(huì)對(duì)你有所啟發(fā)。

大家是否有關(guān)注到，在過往的面試過程中，經(jīng)常被問到的一類問題就是崗位間的區(qū)別，比如產(chǎn)品與交互、交互與UI、UI與視覺等等。筆者在之前幫團(tuán)隊(duì)面試交互設(shè)計(jì)師的時(shí)候，也喜歡給出一個(gè)需求背景，讓求職的小伙伴聊聊不同崗位是如何思考的，因?yàn)榇蠖鄶?shù)交互設(shè)計(jì)師都是由上下游崗位轉(zhuǎn)崗而來，思維可能還停留在原有的崗位中，所以就希望通過這類問題，來初步的判斷下對(duì)方是否匹配當(dāng)前崗位的要求與工作。

由于筆者是由UI設(shè)計(jì)師轉(zhuǎn)崗成為交互設(shè)計(jì)師，所以本篇文章就結(jié)合一個(gè)實(shí)戰(zhàn)案例，來跟大家聊聊工作內(nèi)容的轉(zhuǎn)變帶來的兩者思維上的差異。

一、項(xiàng)目背景

本次項(xiàng)目是一個(gè)“購買返虛擬幣”的功能，類似于京東的返京豆，返還的虛擬幣可以在購買的時(shí)候按照對(duì)應(yīng)的比例換算成抵扣金額，而此次改版的功能是在原有單件返幣的基礎(chǔ)上調(diào)整為階梯返幣，單件返幣的數(shù)量隨著用戶單次下單的商品件數(shù)遞增，從而促進(jìn)用戶能多件下單，提升商品的銷量。

乍一看該功能都不需要設(shè)計(jì)師參與，只需要根據(jù)商品的返虛擬幣規(guī)則，將之前的單件反幣標(biāo)識(shí)改成多個(gè)就行，如“1件返XX、3件返XX…”，雖然看起來好像也解決了業(yè)務(wù)訴求，但是如果僅僅考慮標(biāo)識(shí)展示，而不結(jié)合需求背后的業(yè)務(wù)邏輯去思考，后續(xù)也會(huì)隨著規(guī)則的變化而帶來對(duì)應(yīng)的問題，那對(duì)于交互與UI設(shè)計(jì)師而言，針對(duì)這個(gè)需求，又該如何考慮的呢？我將分為“交互篇”與“UI篇”來分別闡述。

二、交互篇

對(duì)于交互設(shè)計(jì)師而言，其中一個(gè)核心能力就是將業(yè)務(wù)訴求轉(zhuǎn)變成用戶可理解、可操作的交互流程。那么我將從業(yè)務(wù)規(guī)則、用戶場(chǎng)景以及操作流程三個(gè)方面來拆解交互設(shè)計(jì)師是如何思考這個(gè)業(yè)務(wù)需求的。

1. 業(yè)務(wù)規(guī)則

雖說本次業(yè)務(wù)需求很簡(jiǎn)單，只是將單件返幣改成多件，但是我們也不能僅僅被表象所蒙蔽，需要進(jìn)一步挖掘相關(guān)業(yè)務(wù)規(guī)則。

返幣并不是適用于所有商品，那不管是單件還是多件都會(huì)有對(duì)應(yīng)的配置返幣規(guī)則的地方，我們需要知道在配置規(guī)則的時(shí)候有沒有做限制，比如支持幾個(gè)階梯，這將決定我們?cè)谇芭_(tái)該如何展示該規(guī)則。

如果最多兩個(gè)，那我們就可以考慮將每個(gè)階梯對(duì)應(yīng)的返幣規(guī)則都展示出來，但是如果不做限制，那是不是可以考慮將規(guī)則收起，僅展示“單件最多返幣”引導(dǎo)用戶下單購買。

2. 用戶場(chǎng)景

用戶在產(chǎn)品中的下單流程不僅僅是通過首頁產(chǎn)品瀑布流開啟，可以通過各個(gè)途徑，比如搜索、營(yíng)銷板塊等等，所以我們需要考慮多件返幣規(guī)則都適用于哪些場(chǎng)景。

除此以外，我們可以結(jié)合該需求的目的出發(fā)，設(shè)置階梯意味著希望用戶能單筆下單多件，那我們可以聚焦用戶加購數(shù)量的場(chǎng)景，當(dāng)用戶選擇的數(shù)量在兩個(gè)階梯之間時(shí)，可以給與相應(yīng)的提示，告訴下一個(gè)階梯的獎(jiǎng)勵(lì)，引導(dǎo)用戶增加購買數(shù)量。

3. 操作流程

前面在業(yè)務(wù)規(guī)則的分析中，確定了返利的階梯是沒有數(shù)量限制的，為了后續(xù)的延展性，我們選擇將對(duì)應(yīng)的階梯收起，改成“單件最多返XX”的標(biāo)識(shí)展示。

那如果用戶想要了解具體的返利規(guī)則時(shí)，該如何操作呢？

所以此時(shí)的返幣標(biāo)識(shí)不僅僅是一個(gè)標(biāo)簽，同時(shí)還是一個(gè)用戶了解規(guī)則的入口為了與其他標(biāo)簽區(qū)分開，我們?cè)诜祹艠?biāo)識(shí)上加上了可點(diǎn)擊引導(dǎo)來輔助用戶理解。

三、UI篇

對(duì)于UI設(shè)計(jì)師而言，其主要的工作是界面的視覺效果設(shè)計(jì)，并且需要配合前端工程師完成視覺效果的實(shí)現(xiàn)。所以主要通過視覺風(fēng)格、平臺(tái)規(guī)范、以及技術(shù)實(shí)現(xiàn)三個(gè)方面去拆解。

1. 視覺風(fēng)格

UI設(shè)計(jì)師每天會(huì)在各大設(shè)計(jì)網(wǎng)站中穿梭來收集靈感，但是并不是所有的視覺風(fēng)格都符合當(dāng)前的產(chǎn)品與功能，面對(duì)的人群不同，行業(yè)不同都會(huì)對(duì)最終的風(fēng)格選擇產(chǎn)生影響。同時(shí)該采取什么視覺表現(xiàn)手法，也需要根據(jù)具體的需求而定。

比如本次改版需求，UI設(shè)計(jì)師主要是針對(duì)階梯返幣的標(biāo)識(shí)做設(shè)計(jì)。由于該標(biāo)識(shí)屬于強(qiáng)營(yíng)銷標(biāo)識(shí)，所以需要有比較強(qiáng)的視覺引導(dǎo)，此時(shí)對(duì)于UI設(shè)計(jì)師而言，就需要考慮該用什么視覺形式來表現(xiàn)，從而增強(qiáng)用戶的感知。

2. 平臺(tái)規(guī)范

UI設(shè)計(jì)師其中一個(gè)能力要求就是制定平臺(tái)規(guī)范，規(guī)范的建立能統(tǒng)一產(chǎn)品的視覺呈現(xiàn)以及提升設(shè)計(jì)與開發(fā)的效率。所以在設(shè)計(jì)返幣標(biāo)識(shí)的時(shí)候，除了思考視覺表現(xiàn)手法以外，還要結(jié)合當(dāng)前的平臺(tái)規(guī)范去設(shè)計(jì)。設(shè)計(jì)完成以后，可以放在最終的產(chǎn)品卡上，與其他的標(biāo)識(shí)做對(duì)比，最終達(dá)到“突出而不突?！钡脑O(shè)計(jì)目標(biāo)。

3. 技術(shù)實(shí)現(xiàn)

這里說的技術(shù)實(shí)現(xiàn)并不是說要讓UI設(shè)計(jì)師去寫代碼。當(dāng)然設(shè)計(jì)師是可以了解一些簡(jiǎn)單的前端代碼，這樣就可以站在技術(shù)實(shí)現(xiàn)的角度來權(quán)衡設(shè)計(jì)，減少后續(xù)的溝通與優(yōu)化的時(shí)間成本。

在本次的需求中，標(biāo)識(shí)的設(shè)計(jì)如果采用了微動(dòng)效，那就需要確定是技術(shù)實(shí)現(xiàn)還是將動(dòng)效切圖給前端，而動(dòng)效又有不同的文件形式承載且各有優(yōu)缺點(diǎn)，需要設(shè)計(jì)師提前去了解并最終與技術(shù)達(dá)成一致。

四、共性

其實(shí)隨著整個(gè)互聯(lián)網(wǎng)行業(yè)越來越成熟，對(duì)于崗位的界定也變得越來越模糊，所以市面上出現(xiàn)了很多如體驗(yàn)設(shè)計(jì)師、產(chǎn)品設(shè)計(jì)師、產(chǎn)品交互設(shè)計(jì)師等“新興”的崗位，網(wǎng)上對(duì)于這些崗位的定義也各有不同，其實(shí)總結(jié)下來就是如何發(fā)揮崗位的優(yōu)勢(shì)幫助產(chǎn)品提升收益。所以不管是UI設(shè)計(jì)師還是交互設(shè)計(jì)師，都需要對(duì)產(chǎn)品、對(duì)業(yè)務(wù)、對(duì)目標(biāo)用戶有足夠的了解，這樣才能產(chǎn)出符合用戶預(yù)期的體驗(yàn)與設(shè)計(jì)。

比如這次多件返幣的升級(jí)功能，當(dāng)我們?cè)谕瓿闪诉@個(gè)需求本身的工作后，是不是可以進(jìn)一步的去挖掘需求。我們可以在功能上線后，結(jié)合后臺(tái)的埋點(diǎn)數(shù)據(jù)，來觀察這個(gè)功能帶來的變化，如果用戶熱衷尋找或者下單多件返幣的商品，那我們是否可以嘗試將所有的返幣商品集合在一個(gè)頁面，這樣不僅可以提升用戶查找返幣商品的效率，同時(shí)平臺(tái)也便于管理與跟蹤這些商品，并且可以通過該板塊的營(yíng)銷提升產(chǎn)品的日活與最終的轉(zhuǎn)化。

五、總結(jié)

以上，就是筆者根據(jù)工作中案例，分享的一篇關(guān)于交互與UI思維差異的文章，經(jīng)驗(yàn)有限，歡迎大家批評(píng)指正與交流。