借用一句傳統(tǒng)設(shè)計(jì)行業(yè)的經(jīng)典語錄,一個(gè)好的產(chǎn)品一定是“有用的、好用的、用過還想用的”,有用的主要由產(chǎn)品經(jīng)理把控,而好用、用過是否還想用就是交互設(shè)計(jì)的職責(zé)和價(jià)值了。工作內(nèi)容,交互大概可以總結(jié)為下面這幾點(diǎn):
1、是針對行為的設(shè)計(jì),讓原本的物理邏輯向用戶行為邏輯轉(zhuǎn)化;
2、平衡業(yè)務(wù)價(jià)值和用戶價(jià)值,腦海中永遠(yuǎn)不要忘記“用戶價(jià)值”這幾個(gè)字;
3、以目標(biāo)為導(dǎo)向,保證產(chǎn)品貼合用戶心智,用戶能更好的理解、使用產(chǎn)品,并獲得愉悅的使用體驗(yàn);
4、是通過功能架構(gòu)向信息架構(gòu)的重組,提升產(chǎn)品框架的擴(kuò)展性、穩(wěn)定性等,交互更多的考慮到在不同場景下對可用性的要求,讓產(chǎn)品能長久持續(xù)的使用下去;
5、是對使用流程設(shè)計(jì);
6、數(shù)據(jù)分析和用戶研究相關(guān)的工作,這兩者是交互展開工作的基礎(chǔ)支撐。
交互的價(jià)值是長期的和可持續(xù)的,沒有交互,短期內(nèi)看似不會出現(xiàn)問題,長期來看,對用戶留存、用戶滿意度等會有重大影響,市場環(huán)境不同于壟斷環(huán)境,功能堆砌過多后甚至都無法再動搖產(chǎn)品“難用”這個(gè)印象,但凡有類似競品,放棄產(chǎn)品可能性較大。
二、交互設(shè)計(jì)的產(chǎn)出物特點(diǎn)——交互稿與產(chǎn)品原型稿有什么差別
1、從內(nèi)到外的邏輯思維差異
行為邏輯是交互設(shè)計(jì)師思考的出發(fā)點(diǎn),也是交互設(shè)計(jì)方式能否取得創(chuàng)新的關(guān)鍵點(diǎn)。物理邏輯或者業(yè)務(wù)邏輯是產(chǎn)品經(jīng)理更關(guān)注的要點(diǎn),交互設(shè)計(jì)需要具備豐富的同理心,產(chǎn)品功能不同、用戶不同、場景不同都會影響到用戶使用時(shí)的感受和操作行為。簡單來說,交互設(shè)計(jì)師更多的站在用戶角度去思考原型的價(jià)值,是否容易被理解、好用甚至轉(zhuǎn)化,而產(chǎn)品的角度不可避免的會更多考慮業(yè)務(wù)、技術(shù)實(shí)現(xiàn)等方面,一個(gè)人做到面面俱到,是極其難且思維是很容易固化的,長期形成的思維差異會直接在原型圖中表現(xiàn),最終影響到產(chǎn)品可用性。
以QQ音樂幾年前的版本(2017)和現(xiàn)版本(2021)為例,左側(cè)過往版本在首頁的信息組織形式上主要以分類的方式,而右側(cè)現(xiàn)版本中信息的組織形式中首頁的分類方式已經(jīng)很弱了,基本傾向于按用戶行為、需求去組織,比如根據(jù)用戶過往聽過的歌曲去推薦歌曲、歌單,每日30曲更是研究了用戶每日習(xí)慣、耐心做的信息整合,30首怎么得來的?根據(jù)什么樣的歌曲去推薦?這些都是行為研究的范疇,需要對用戶深度了解后方有最好的解決方案。
2.、設(shè)計(jì)規(guī)范的積累與創(chuàng)新
設(shè)計(jì)范式是交互設(shè)計(jì)師基本功的體現(xiàn),包含設(shè)計(jì)規(guī)范和模塊范式兩個(gè)方面。設(shè)計(jì)規(guī)范是設(shè)計(jì)范式中的基礎(chǔ),對規(guī)范的理解和創(chuàng)新也是衡量專業(yè)度最基礎(chǔ)的方面,這對原型稿是否成熟有很大關(guān)系,現(xiàn)有的交互規(guī)范大多基于iOS、Material design、微軟設(shè)計(jì)規(guī)范的基礎(chǔ)上優(yōu)化的,國內(nèi)比較流行的設(shè)計(jì)規(guī)范還有Ant design等,本文不對此做過多討論,這里重點(diǎn)談?wù)勗O(shè)計(jì)范式。
范式,指用戶在長期對于互聯(lián)網(wǎng)產(chǎn)品使用過程中產(chǎn)生的用戶心智,比如用戶對設(shè)置模塊的預(yù)期、對個(gè)人信息模塊的預(yù)期等。也可以理解為對于不同產(chǎn)品功能模塊的記憶,設(shè)計(jì)時(shí)需要非常熟練的從腦海中調(diào)用,這樣做的好處是不容易太偏離用戶長期積累的心智,熟練應(yīng)用范式是創(chuàng)新的前提。
比如表格編輯器的設(shè)計(jì)范式,不管是現(xiàn)在的飛書、谷歌文檔、釘釘、石墨等協(xié)同辦公產(chǎn)品,都在20年前微軟office的ribbon設(shè)計(jì)模式中兜兜轉(zhuǎn)轉(zhuǎn),尤其是表格編輯器,在長期的使用過程中記類的習(xí)慣是很難輕易被改變的,筆者親身經(jīng)歷過一款表格編輯器產(chǎn)品的迭代,易用性(易操作、易學(xué)、易見)中易學(xué)性指標(biāo)評分是最高的,現(xiàn)在想起來也跟行業(yè)范式接近不無關(guān)系。另外關(guān)于一些編輯器右鍵操作、鍵盤操作快捷鍵是否滿足了用戶需求都是極其重要的。不過辦公類產(chǎn)品發(fā)展到現(xiàn)在已不再像20年前純工具類屬性了,協(xié)同屬性必將帶來編輯器再一次的創(chuàng)新。
設(shè)計(jì)范式需要長期的積累,對范式理解不夠深入,通常是要么畫不出來可用的原型,要么畫出來的原型會被問到一個(gè)問題——“這個(gè)…看起來有點(diǎn)說不出來的奇怪”。在理解了基礎(chǔ)范式之后,我們才能做出真正的創(chuàng)新,雖然近兩年交互形式越來越穩(wěn)定,但真正理解了范式之后的創(chuàng)新也能幫助產(chǎn)品快速占領(lǐng)用戶心智,形成特定印象,繼而占領(lǐng)市場。設(shè)計(jì)范式并非不可創(chuàng)新,而是在不必要的時(shí)候盡量遵循范式能最大限度去降本增效,減少不必要的用戶誤解或開發(fā)成本。
3.、多端設(shè)計(jì)交互方式
比如基本的差異點(diǎn)有:
- Mobile的用戶行為多為單線任務(wù),而PC是多線任務(wù),比如pc可以多窗口很便捷的切換,用戶可以一邊聊天一邊收郵件;
- Mobile端用戶操作時(shí)間更加碎片化,PC操作時(shí)間更加系統(tǒng)、專一;
- PC的界面也遠(yuǎn)大于Mobile,導(dǎo)致信息結(jié)構(gòu)差異較大;
- 兩者交互事件也存在很大差別,PC可以針對對象進(jìn)行hover,多上下滾動,少左右滑動(依據(jù)鼠標(biāo)特性)等;
- 設(shè)計(jì)控件的規(guī)范差異較大。
本文并不詳細(xì)贅述差異點(diǎn),總的來說,這些差異點(diǎn)在具體的原型稿設(shè)計(jì)中會體現(xiàn)的比較明顯,這些也是專業(yè)性的一個(gè)方面。下面將舉2個(gè)例子來說明:
1.樹狀結(jié)構(gòu)
樹狀結(jié)構(gòu)是一個(gè)PC端經(jīng)常應(yīng)用的控件,適用于層級結(jié)構(gòu)的展示、選擇等交互操作,高效而清晰,但其在移動端展示時(shí)卻不能照搬,由于屏幕、移動端手指交互等限制,在移動端該控件既不高效也不清晰。比如常見的將文件移動到文件夾的操作,桌面端的交互可以用樹狀結(jié)構(gòu),而移動端更適合層級結(jié)構(gòu)。
2.面包屑導(dǎo)航
面包屑在桌面端是一個(gè)非常普遍的控件,可以有效的承載層級關(guān)系展示、快速導(dǎo)航定位的功能,比如不同層級的文件夾展示與導(dǎo)航等。但在移動端,因?yàn)槠聊淮笮 ⒁苿佣擞脩舨僮魉槠仍?,?dǎo)致用戶對面包屑節(jié)點(diǎn)的記憶、層級操作上都遠(yuǎn)不如桌面端,甚至?xí)绊懙叫畔⒌恼故拘剩虼艘苿佣嗽趯蛹夑P(guān)系的展示與切換上通常不會用面包屑,而是左上角返回按鈕或系統(tǒng)級別的返回。當(dāng)然面包屑在移動端也并非一無是處,如果面包屑各節(jié)點(diǎn)承載的展示作用具備極強(qiáng)的參考意義,比如這些文件夾節(jié)點(diǎn)同時(shí)承載著組織關(guān)系的顯示,則面包屑也還是可以用的。
總結(jié)下來:面包屑在移動端盡量別用,但如果其各層級節(jié)點(diǎn)同時(shí)有極強(qiáng)的參考意義,則可用。
4.、方法論的掌握和運(yùn)用
方法論在交互稿中的體現(xiàn)是比較隱晦的,準(zhǔn)確來說,這一點(diǎn)是針對思維差異點(diǎn)的補(bǔ)充,如交互設(shè)計(jì)十原則、“F型”頁面設(shè)計(jì)理論(近幾年有爭議)等視覺動線,也包含發(fā)現(xiàn)問題的一些方法,比如KANO模型、用戶體驗(yàn)地圖、卡片分類等方法論的應(yīng)用,這些對于用戶行為維度的研究結(jié)果也會支撐著交互稿的科學(xué)性,這里不做展開闡述。比如用戶體驗(yàn)?zāi)P褪疽鈭D如下,用戶體驗(yàn)?zāi)P褪墙⒃谟脩艚巧P椭系?,前提是需要大量的用戶深度訪談資料為基礎(chǔ),用以系統(tǒng)、全面、科學(xué)的研究用戶行為和探索用戶需求。
用戶體驗(yàn)地圖
除了以上列舉出來的,還有一項(xiàng)重要的方法是數(shù)據(jù)分析,這一點(diǎn)是容易被輕視的,但確是最具備參考價(jià)值和衡量工作結(jié)果的,交互關(guān)注的數(shù)據(jù)和產(chǎn)品有很多差異,具體一點(diǎn),比如對于一個(gè)項(xiàng)目中,產(chǎn)品更多關(guān)注的是衡量功能結(jié)果的數(shù)據(jù),通常包含使用數(shù)據(jù)PV/UV、轉(zhuǎn)化率等,而設(shè)計(jì)師更多關(guān)注CTR、停留時(shí)長、轉(zhuǎn)化漏斗中跟操作行為相關(guān)的數(shù)據(jù),行為是交互研究的對象,所以行為數(shù)據(jù)結(jié)果能為具體的方案設(shè)計(jì)提供衡量指標(biāo)。
5、交互稿中的UI考量
簡單來說,就是不能給UI挖坑,沒有交互的設(shè)計(jì),UI上與產(chǎn)品之間的溝通會非常頻繁,也主要會出現(xiàn)以下幾個(gè)常見問題。
1.信息結(jié)構(gòu)與優(yōu)先級的落地
信息布局既需要考慮功能的業(yè)務(wù)優(yōu)先級,也需要考慮用戶行為優(yōu)先級,同時(shí)還需要考慮到UI排版的難度。這中間基本都會有矛盾存在,做好平衡是必備技能。有時(shí)候需要逼著產(chǎn)品給出功能優(yōu)先級,排版是有限的,也有一定審美要求的專業(yè)度,交互稿需要為UI規(guī)避一些明顯的坑,比如最典型的例子——功能都很重要、文案過長等,當(dāng)產(chǎn)品同學(xué)也不確定自己所畫功能是否能被用戶理解、操作的時(shí)候,會喜歡用文案去進(jìn)行解釋,比如button上寫10個(gè)字這種,交互需要給UI提前做避坑。
2.規(guī)范
設(shè)計(jì)是一個(gè)系統(tǒng),任何需求在畫交互稿時(shí)都應(yīng)考慮到對系統(tǒng)的適應(yīng)或沖擊,這就要求交互設(shè)計(jì)師不僅要非常熟悉設(shè)計(jì)系統(tǒng),而且必須是系統(tǒng)的制作人之一,設(shè)計(jì)系統(tǒng)是一項(xiàng)耗時(shí)耗力的工作,前期耐心打磨,后期適應(yīng)、修改,如此才能把握住用戶體驗(yàn)的一致性。
3.邊界情況
主要包含用戶交互中與前端、服務(wù)端的交互,比如操作事件的定義、反饋;加載的形式與技術(shù)方案;空狀態(tài);弱網(wǎng)、斷網(wǎng)等等,這些邊界頁面的考慮都定義清楚,能有效避免UI的返工。
4.保真度與實(shí)現(xiàn)效果
交互稿如果保真度較低,會導(dǎo)致UI在實(shí)際設(shè)計(jì)的時(shí)候?qū)换ジ逍薷妮^大,導(dǎo)致頁面架構(gòu)、交互注釋等返工修改,造成不必要的時(shí)間資源浪費(fèi),也會對項(xiàng)目進(jìn)度造成影響。一般來說,成熟的交互稿是比較接近UI稿而又不是UI稿的一種狀態(tài),將UI中的坑避免之后,UI設(shè)計(jì)師需要做的就是更表現(xiàn)層的設(shè)計(jì),比如與前端工程師的實(shí)現(xiàn)匹配、色彩、柵格、間距、字體字號等等。
6、詳盡的Use Case考量
Use Case(用例)指功能、交互的定義和詳細(xì)描述,用例描述的細(xì)節(jié)程度決定開發(fā)時(shí)反復(fù)溝通的頻率,具體包含的細(xì)節(jié)很多,大到功能流程的設(shè)計(jì),小到某個(gè)交互事件的定義和枚舉;從前端用戶與系統(tǒng)的交互事件,到服務(wù)端與前端的功能聯(lián)動等,都涉及到,總之,只要用戶看到的、點(diǎn)擊/滑動/hover等交互行為涵蓋到的,都應(yīng)該被定義,以期減少開發(fā)過程中遇到的問題和溝通成本,這里不做過多闡述。
三、交互稿背后的價(jià)值——交互設(shè)計(jì)只是畫稿子的嗎?
顯然不是!如果說一個(gè)項(xiàng)目交互階段持續(xù)了3天,那繪制交互稿最多能花費(fèi)1天。
交互是一個(gè)橫向能力比較高的職業(yè),很多交互設(shè)計(jì)師也改行去做了產(chǎn)品、用研或者UI,所以多多少少都會具備這幾者的一些技能。交互設(shè)計(jì)師通常會有多重隱藏的技能是必須掌握的。
1、項(xiàng)目中堅(jiān)守用戶價(jià)值
用戶價(jià)值在項(xiàng)目中很容易就讓步于業(yè)務(wù)價(jià)值、項(xiàng)目排期、技術(shù)方案等,交互就是在這中間說“不”的人,潤物細(xì)無聲,在每個(gè)項(xiàng)目中盡量減少用戶價(jià)值的損耗,最后匯聚而成的產(chǎn)品整體體驗(yàn)還是有很大差別的。
—交互在組織架構(gòu)上,一般是會歸屬于設(shè)計(jì)部門的,所以在部門中也承擔(dān)了一線跟用戶和數(shù)據(jù)接觸的人,即便有數(shù)據(jù)分析師、用研同學(xué)的幫助,也需要有主動跟蹤這些問題的意識,不然設(shè)計(jì)出來的交互稿很難不出問題。
3、可用性測試等結(jié)果追蹤
可用性測試在一些稍大的項(xiàng)目中是體驗(yàn)設(shè)計(jì)環(huán)節(jié)中的定性維度核驗(yàn)步驟,需要結(jié)合用戶反饋對方案進(jìn)行可用、好用測試,并不是指在流程上能跑通的技術(shù)測試,而是校驗(yàn)用戶對于方案的接受程度、滿意程度,也順便發(fā)現(xiàn)一些問題,后續(xù)進(jìn)行優(yōu)化。
更多的結(jié)果追蹤形式,比如還有SUS可用性量表(B端產(chǎn)品可用阿里云UES量表等)、用戶滿意度、NPS跟蹤等等,目的在于定量的給用戶體驗(yàn)打分,確保用戶體驗(yàn)的衡量是有章可循的。
易用性量表
4.、直接驅(qū)動業(yè)務(wù)增長
增長黑客和用戶增長設(shè)計(jì)的概念前幾年也已在業(yè)內(nèi)為大家所熟知,AARRR增長模型(獲客、激活、轉(zhuǎn)化、留存、推薦/傳播)中,交互可依賴對用戶的了解和用戶行為的洞察,通過比如文案、微動效、轉(zhuǎn)化漏斗優(yōu)化、信息梳理、布局設(shè)計(jì)等,也可以幫助業(yè)務(wù)在各階段直接提升對應(yīng)的業(yè)務(wù)指標(biāo),甚至將體驗(yàn)設(shè)計(jì)師熟悉的體驗(yàn)地圖轉(zhuǎn)化繪制為用戶增長地圖,在用戶使用的全鏈路行為節(jié)點(diǎn)做設(shè)計(jì)所擅長的增長賦能。
5、項(xiàng)目流程管理
交互需要更早的參與到需求中,在需求出現(xiàn)之前的交互參與能讓需求更加合理,而在交互稿畫完之后,也需要實(shí)時(shí)的去跟進(jìn)UI、開發(fā),有一些技術(shù)難題需要跟開發(fā)密切合作,開發(fā)說“”實(shí)現(xiàn)不了”是經(jīng)常碰到的一句話,那是否是真的實(shí)現(xiàn)不了,可能跟不同的團(tuán)隊(duì)、人、項(xiàng)目排期有關(guān)了,有時(shí)候并不是真的實(shí)現(xiàn)不了,或許只是開發(fā)不想做或者他之前沒做過,這個(gè)就需要PK了,當(dāng)然有的真的很難實(shí)現(xiàn)或者性價(jià)比很低的設(shè)計(jì),就需要對交互稿進(jìn)行調(diào)整了。除此之外,有的公司還要求交互有整體管理能力,這就另說了。
四、沒有交互會帶來什么?
產(chǎn)品團(tuán)隊(duì)或許不都有交互崗位,但不可以沒有好的交互設(shè)計(jì)!
1、短期內(nèi)產(chǎn)品使用體驗(yàn)很奇怪
很多人畫出來的原型稿甚至是交互稿都遇到過“用起來很奇怪”這個(gè)問題,其實(shí)是因?yàn)樵O(shè)計(jì)者對用戶心智、用戶行為、控件規(guī)范、產(chǎn)品范式等的不熟悉造成的這個(gè)問題,一個(gè)“夾生”的東西即便邏輯合理也必然會帶來“夾生”的體驗(yàn)。此外,范式和規(guī)范的使用只是執(zhí)行時(shí)的一個(gè)選擇而已,對某規(guī)范的使用未必真正解決當(dāng)前場景下的問題,交互設(shè)計(jì)師更多的是通過對業(yè)務(wù)的梳理、用戶的洞察來做選交互范式和規(guī)范的篩選,找到合適的,才能價(jià)值最大化。
2、長期下產(chǎn)品“難用”印象的形成
任何行業(yè),任何產(chǎn)品,產(chǎn)品研發(fā)者可能都不是實(shí)際使用者,術(shù)業(yè)有專攻,對用戶的理解是一項(xiàng)長期經(jīng)驗(yàn)積累的過程,合乎邏輯的,不一定是易用的,易用的不一定是好用的。筆者的經(jīng)驗(yàn)來看,用戶的使用行為既是“傻”的,也是孕育著無窮無盡智慧的,尤其是B端產(chǎn)品,用戶使用的方式可能超乎想象。因此對用戶行為理解的深度決定了產(chǎn)品與用戶之間的默契度,圍繞一個(gè)痛點(diǎn)市場上總不至于只有一個(gè)產(chǎn)品,如何讓你的產(chǎn)品成為用戶真正的朋友,需要有專業(yè)的人來研究用戶行為,交互這個(gè)專業(yè)便也是因此而生的。
如今互聯(lián)網(wǎng)紅利愈發(fā)消失殆盡,或許由于資金原因交互崗位并沒有存在于所有公司或團(tuán)隊(duì),但交互設(shè)計(jì)的專業(yè)度一定永遠(yuǎn)存在,崗位的橫向兼并融合并不能磨滅交互的專業(yè)度,因?yàn)榻换?jiān)守的是用戶體驗(yàn)的底線,讓產(chǎn)品變得或好用、或高效,最終驅(qū)動業(yè)可持續(xù)增長,便是這最大的價(jià)值!
作者:陳悅
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》交互設(shè)計(jì)的價(jià)值是什么?
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ì)公司