2023-7-28 資深UI設(shè)計(jì)者
用一個(gè)實(shí)戰(zhàn)案例，幫你了解交互與UI思維差異｜蘭亭妙微UI設(shè)計(jì)公司
來(lái)百度APP暢享高清圖片
大家是否有關(guān)注到，在過(guò)往的面試過(guò)程中，經(jīng)常被問(wèn)到的一類問(wèn)題就是崗位間的區(qū)別，比如產(chǎn)品與交互、交互與 UI、UI 與視覺(jué)等等。筆者在之前幫團(tuán)隊(duì)面試交互設(shè)計(jì)師的時(shí)候，也喜歡給出一個(gè)需求背景，讓求職的小伙伴聊聊不同崗位是如何思考的，因?yàn)榇蠖鄶?shù)交互設(shè)計(jì)師都是由上下游崗位轉(zhuǎn)崗而來(lái)，思維可能還停留在原有的崗位中，所以就希望通過(guò)這類問(wèn)題，來(lái)初步的判斷下對(duì)方是否匹配當(dāng)前崗位的要求與工作。
一、項(xiàng)目背景
本次項(xiàng)目是一個(gè)“購(gòu)買返虛擬幣”的功能，類似于京東的返京豆，返還的虛擬幣可以在購(gòu)買的時(shí)候按照對(duì)應(yīng)的比例換算成抵扣金額，而此次改版的功能是在原有單件返幣的基礎(chǔ)上調(diào)整為階梯返幣，單件返幣的數(shù)量隨著用戶單次下單的商品件數(shù)遞增，從而促進(jìn)用戶能多件下單，提升商品的銷量。
乍一看該功能都不需要設(shè)計(jì)師參與，只需要根據(jù)商品的返虛擬幣規(guī)則，將之前的單件反幣標(biāo)識(shí)改成多個(gè)就行，如“1 件返 XX、3 件返 XX…”，雖然看起來(lái)好像也解決了業(yè)務(wù)訴求，但是如果僅僅考慮標(biāo)識(shí)展示，而不結(jié)合需求背后的業(yè)務(wù)邏輯去思考，后續(xù)也會(huì)隨著規(guī)則的變化而帶來(lái)對(duì)應(yīng)的問(wèn)題，那對(duì)于交互與UI設(shè)計(jì)師而言，針對(duì)這個(gè)需求，又該如何考慮的呢？我將分為“交互篇”與“UI篇”來(lái)分別闡述。
二、交互篇
對(duì)于交互設(shè)計(jì)師而言，其中一個(gè)核心能力就是將業(yè)務(wù)訴求轉(zhuǎn)變成用戶可理解、可操作的交互流程。那么我將從業(yè)務(wù)規(guī)則、用戶場(chǎng)景以及操作流程三個(gè)方面來(lái)拆解交互設(shè)計(jì)師是如何思考這個(gè)業(yè)務(wù)需求的。
業(yè)務(wù)規(guī)則
雖說(shuō)本次業(yè)務(wù)需求很簡(jiǎn)單，只是將單件返幣改成多件，但是我們也不能僅僅被表象所蒙蔽，需要進(jìn)一步挖掘相關(guān)業(yè)務(wù)規(guī)則。
返幣并不是適用于所有商品，那不管是單件還是多件都會(huì)有對(duì)應(yīng)的配置返幣規(guī)則的地方，我們需要知道在配置規(guī)則的時(shí)候有沒(méi)有做限制，比如支持幾個(gè)階梯，這將決定我們?cè)谇芭_(tái)該如何展示該規(guī)則。
如果最多兩個(gè)，那我們就可以考慮將每個(gè)階梯對(duì)應(yīng)的返幣規(guī)則都展示出來(lái)，但是如果不做限制，那是不是可以考慮將規(guī)則收起，僅展示“單件最多返幣”引導(dǎo)用戶下單購(gòu)買。
用戶場(chǎng)景
用戶在產(chǎn)品中的下單流程不僅僅是通過(guò)首頁(yè)產(chǎn)品瀑布流開啟，可以通過(guò)各個(gè)途徑，比如搜索、營(yíng)銷板塊等等，所以我們需要考慮多件返幣規(guī)則都適用于哪些場(chǎng)景。
除此以外，我們可以結(jié)合該需求的目的出發(fā)，設(shè)置階梯意味著希望用戶能單筆下單多件，那我們可以聚焦用戶加購(gòu)數(shù)量的場(chǎng)景，當(dāng)用戶選擇的數(shù)量在兩個(gè)階梯之間時(shí)，可以給與相應(yīng)的提示，告訴下一個(gè)階梯的獎(jiǎng)勵(lì)，引導(dǎo)用戶增加購(gòu)買數(shù)量。
操作流程
前面在業(yè)務(wù)規(guī)則的分析中，確定了返利的階梯是沒(méi)有數(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)來(lái)輔助用戶理解。
三、UI 篇
對(duì)于 UI 設(shè)計(jì)師而言，其主要的工作是界面的視覺(jué)效果設(shè)計(jì)，并且需要配合前端工程師完成視覺(jué)效果的實(shí)現(xiàn)。所以主要通過(guò)視覺(jué)風(fēng)格、平臺(tái)規(guī)范、以及技術(shù)實(shí)現(xiàn)三個(gè)方面去拆解。
視覺(jué)風(fēng)格
UI 設(shè)計(jì)師每天會(huì)在各大設(shè)計(jì)網(wǎng)站中穿梭來(lái)收集靈感，但是并不是所有的視覺(jué)風(fēng)格都符合當(dāng)前的產(chǎn)品與功能，面對(duì)的人群不同，行業(yè)不同都會(huì)對(duì)最終的風(fēng)格選擇產(chǎn)生影響。同時(shí)該采取什么視覺(jué)表現(xiàn)手法，也需要根據(jù)具體的需求而定。
比如本次改版需求，UI 設(shè)計(jì)師主要是針對(duì)階梯返幣的標(biāo)識(shí)做設(shè)計(jì)。由于該標(biāo)識(shí)屬于強(qiáng)營(yíng)銷標(biāo)識(shí)，所以需要有比較強(qiáng)的視覺(jué)引導(dǎo)，此時(shí)對(duì)于 UI 設(shè)計(jì)師而言，就需要考慮該用什么視覺(jué)形式來(lái)表現(xiàn)，從而增強(qiáng)用戶的感知。
平臺(tái)規(guī)范
UI 設(shè)計(jì)師其中一個(gè)能力要求就是制定平臺(tái)規(guī)范，規(guī)范的建立能統(tǒng)一產(chǎn)品的視覺(jué)呈現(xiàn)以及提升設(shè)計(jì)與開發(fā)的效率。所以在設(shè)計(jì)返幣標(biāo)識(shí)的時(shí)候，除了思考視覺(jué)表現(xiàn)手法以外，還要結(jié)合當(dāng)前的平臺(tái)規(guī)范去設(shè)計(jì)。設(shè)計(jì)完成以后，可以放在最終的產(chǎn)品卡上，與其他的標(biāo)識(shí)做對(duì)比，最終達(dá)到“突出而不突兀”的設(shè)計(jì)目標(biāo)。
技術(shù)實(shí)現(xiàn)
這里說(shuō)的技術(shù)實(shí)現(xiàn)并不是說(shuō)要讓 UI 設(shè)計(jì)師去寫代碼。當(dāng)然設(shè)計(jì)師是可以了解一些簡(jiǎn)單的前端代碼，這樣就可以站在技術(shù)實(shí)現(xiàn)的角度來(lái)權(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è)越來(lái)越成熟，對(duì)于崗位的界定也變得越來(lái)越模糊，所以市面上出現(xiàn)了很多如體驗(yàn)設(shè)計(jì)師、產(chǎn)品設(shè)計(jì)師、產(chǎn)品交互設(shè)計(jì)師等“新興”的崗位，網(wǎng)上對(duì)于這些崗位的定義也各有不同，其實(shí)總結(jié)下來(lái)就是如何發(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ù)，來(lái)觀察這個(gè)功能帶來(lái)的變化，如果用戶熱衷尋找或者下單多件返幣的商品，那我們是否可以嘗試將所有的返幣商品集合在一個(gè)頁(yè)面，這樣不僅可以提升用戶查找返幣商品的效率，同時(shí)平臺(tái)也便于管理與跟蹤這些商品，并且可以通過(guò)該板塊的營(yíng)銷提升產(chǎn)品的日活與最終的轉(zhuǎn)化。
五、總結(jié)
以上，就是筆者根據(jù)工作中案例，分享的一篇關(guān)于交互與 UI 思維差異的文章，經(jīng)驗(yàn)有限，歡迎大家批評(píng)指正與交流。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：一個(gè)青橙子
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)未來(lái)將會(huì)持續(xù)在平臺(tái)上分享關(guān)于設(shè)計(jì)行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，添加vx藍(lán)小助ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。同時(shí)添加藍(lán)小助我們將會(huì)為您提供優(yōu)秀的設(shè)計(jì)案例和設(shè)計(jì)素材等，歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
藍(lán)藍(lán)設(shè)計(jì)( axecq.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://axecq.cn