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