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)買(mǎi)返虛擬幣”的功能,類似于京東的返京豆,返還的虛擬幣可以在購(gòu)買(mǎi)的時(shí)候按照對(duì)應(yīng)的比例換算成抵扣金額,而此次改版的功能是在原有單件返幣的基礎(chǔ)上調(diào)整為階梯返幣,單件返幣的數(shù)量隨著用戶單次下單的商品件數(shù)遞增,從而促進(jìn)用戶能多件下單,提升商品的銷(xiāo)量。
乍一看該功能都不需要設(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)買(mǎi)。
用戶場(chǎng)景
用戶在產(chǎn)品中的下單流程不僅僅是通過(guò)首頁(yè)產(chǎn)品瀑布流開(kāi)啟,可以通過(guò)各個(gè)途徑,比如搜索、營(yíng)銷(xiāo)板塊等等,所以我們需要考慮多件返幣規(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)買(mǎi)數(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ū)分開(kāi),我們?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)銷(xiāo)標(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ì)與開(kāi)發(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ì)師去寫(xiě)代碼。當(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)銷(xiāo)提升產(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ì)( 91whvog3.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://91whvog3.cn