一、應(yīng)用/軟件研發(fā)就是單純的敲代碼？

在我們傳統(tǒng)認(rèn)知里，應(yīng)用/軟件研發(fā)似乎就是開發(fā)者在黑色屏幕前敲代碼。但隨著敏捷研發(fā)DevOps理念的發(fā)展，現(xiàn)在的應(yīng)用研發(fā)，轉(zhuǎn)變?yōu)榱藝@devops的協(xié)作工作流，涉及多樣化的工具和不同人員的協(xié)作。研發(fā)體驗(yàn)的核心要素，也從“架構(gòu)邏輯“向”流程和協(xié)作“發(fā)展。

阿里巴巴應(yīng)用研發(fā)平臺(tái)EMAS正是在此背景下誕生的產(chǎn)品。面向全端場(chǎng)景（移動(dòng)App、H5應(yīng)用、小程序、Web應(yīng)用、PC應(yīng)用等），基于廣泛的云原生技術(shù)（Backend as a Service、Serverless、DevOps、低代碼等），為企業(yè)、開發(fā)者提供應(yīng)用研發(fā)運(yùn)營(yíng)管理服務(wù)。

綜上，EMAS做為幫助企業(yè)/開發(fā)者進(jìn)行應(yīng)用研發(fā)的技術(shù)類SaaS產(chǎn)品，也面臨了全新的機(jī)遇與挑戰(zhàn)。

二、設(shè)計(jì)師如何在技術(shù)類產(chǎn)品中破局？

面對(duì)復(fù)雜的技術(shù)類產(chǎn)品，由于技術(shù)的高門檻及業(yè)務(wù)的復(fù)雜性，很多時(shí)候設(shè)計(jì)師都是被動(dòng)的接受需求。但我們也在思考，設(shè)計(jì)師如何在技術(shù)類產(chǎn)品中破局，如何發(fā)揮更大的價(jià)值。

因此，我們嘗試站在更高的全局視角而不是設(shè)計(jì)的本位視角，主動(dòng)發(fā)現(xiàn)問(wèn)題提出設(shè)計(jì)策略，實(shí)現(xiàn)設(shè)計(jì)執(zhí)行到設(shè)計(jì)驅(qū)動(dòng)的突破。

全局視角的主動(dòng)洞察

懷著讓設(shè)計(jì)發(fā)揮更大價(jià)值的初心，我們深入業(yè)務(wù)主動(dòng)邀約產(chǎn)品關(guān)鍵角色深入溝通，了解產(chǎn)品歷史背景、技術(shù)邏輯及痛點(diǎn)，并發(fā)起產(chǎn)品的易用性測(cè)試、體驗(yàn)走查及競(jìng)品分析等動(dòng)作，站在全局視角從產(chǎn)品側(cè)、用戶側(cè)和體驗(yàn)側(cè)多個(gè)角度進(jìn)行深入洞察，形成全面的“產(chǎn)品體檢報(bào)告”總結(jié)舊版EMAS所存在的問(wèn)題：

1.產(chǎn)品側(cè)洞察——子產(chǎn)品無(wú)合力、相互割裂缺乏串聯(lián)

EMAS圍繞應(yīng)用全生命周期包含12款子產(chǎn)品，卻是各個(gè)子產(chǎn)品的拼接，功能獨(dú)立零散，未形成一站式研發(fā)體驗(yàn)。各個(gè)子產(chǎn)品也是以獨(dú)立垂直工具視角建設(shè)，缺乏用戶及客戶業(yè)務(wù)視角。

2.用戶側(cè)洞察——產(chǎn)品價(jià)值/能力感知弱、沒(méi)有攻占開發(fā)者心智

多數(shù)用戶并沒(méi)有完全理解產(chǎn)品的價(jià)值和能力，EMAS沒(méi)有攻占開發(fā)者心智。

3.體驗(yàn)側(cè)洞察——產(chǎn)品易用性差、滿意度低

通過(guò)用戶調(diào)研的量表評(píng)分，易用性及滿意度評(píng)分低，雖然用戶對(duì)產(chǎn)品功能能力認(rèn)可，但對(duì)產(chǎn)品使用體驗(yàn)滿意度差。

三、設(shè)計(jì)驅(qū)動(dòng)產(chǎn)品創(chuàng)新升級(jí)

基于以上分析，我們與關(guān)鍵決策人積極溝通，匯報(bào)關(guān)鍵問(wèn)題及設(shè)計(jì)策略，驅(qū)動(dòng)產(chǎn)品的升級(jí)創(chuàng)新，進(jìn)行EMAS3.0 一站式應(yīng)用研發(fā)平臺(tái)的打造。通過(guò)咬合3個(gè)業(yè)務(wù)關(guān)鍵問(wèn)題，制定出以下的設(shè)計(jì)策略：

〇 策略一：打造一站式研發(fā)體驗(yàn)

1.應(yīng)用全生命周期協(xié)同流程梳理：

舊版的EMAS是各個(gè)子產(chǎn)品的拼接，功能獨(dú)立零散，未形成一站式的研發(fā)體驗(yàn)。經(jīng)數(shù)據(jù)分析，產(chǎn)品的交叉使用率也非常的低。因此，設(shè)計(jì)首先從應(yīng)用全生命周期角度，梳理了不同角色的協(xié)作流、任務(wù)流，并串聯(lián)之前子產(chǎn)品沒(méi)有打通的數(shù)據(jù)流，進(jìn)行構(gòu)建-測(cè)試-發(fā)布-運(yùn)維-運(yùn)營(yíng)全鏈路打通串聯(lián)。

2.用戶視角的產(chǎn)品架構(gòu)重構(gòu)

并且在舊版的EMAS中，各個(gè)子產(chǎn)品是以垂直工具的視角進(jìn)行建設(shè)，每個(gè)子產(chǎn)品的架構(gòu)邏輯都不同，也沒(méi)有形成合理的聯(lián)動(dòng)。進(jìn)一步，設(shè)計(jì)驅(qū)動(dòng)以用戶視角進(jìn)行產(chǎn)品的架構(gòu)重構(gòu)，以”項(xiàng)目“作為統(tǒng)一頂層邏輯，并兼容技術(shù)架構(gòu)，進(jìn)行圍繞應(yīng)用的的管理，形成一站式應(yīng)用研發(fā)全周期流程。

3.一站式獨(dú)立控制臺(tái)建設(shè)

在產(chǎn)品形態(tài)上，形成了以下結(jié)構(gòu)的一站式獨(dú)立的Studio框架，讓用戶能夠清晰、流暢的產(chǎn)品體系中進(jìn)行應(yīng)用構(gòu)建。

4.一站式全景產(chǎn)品架構(gòu)

最終，EMAS3.0一站式應(yīng)用研發(fā)平臺(tái)實(shí)現(xiàn)編碼-構(gòu)建-測(cè)試-發(fā)布-運(yùn)維-運(yùn)營(yíng)全鏈路的打通串聯(lián)。應(yīng)用阿里云的Real3D能力，打造一站式產(chǎn)品全景3D互動(dòng)場(chǎng)景，圍繞DevOps協(xié)作流串聯(lián)各個(gè)子產(chǎn)品，形成一站式應(yīng)用平臺(tái)。

通過(guò)流程化研發(fā)指引幫助新手開發(fā)者快速開啟應(yīng)用研發(fā)流程，也能幫助團(tuán)隊(duì)不同角色成員進(jìn)行項(xiàng)目全局管理和關(guān)鍵指標(biāo)監(jiān)控。

〇 策略二：品牌建設(shè)與產(chǎn)品價(jià)值傳遞

通過(guò)品牌建設(shè)與開發(fā)者心智構(gòu)建，強(qiáng)化產(chǎn)品價(jià)值/能力透?jìng)?/section>

1.增強(qiáng)產(chǎn)品價(jià)值/能力透?jìng)髟O(shè)計(jì)

舊版的EMAS試用體驗(yàn)差，且在首頁(yè)、功能初始頁(yè)等場(chǎng)景也缺乏產(chǎn)品能力的有效展示與使用引導(dǎo)。因此，我們?cè)诙鄠€(gè)場(chǎng)域進(jìn)行產(chǎn)品信息的有效展示及引導(dǎo)，進(jìn)行產(chǎn)品價(jià)值/能力透?jìng)鞯暮诵膱?chǎng)域的典型場(chǎng)景建設(shè)，幫助用戶快速感知產(chǎn)品價(jià)值。

2.品牌建設(shè)，建立用戶心智

研究競(jìng)品會(huì)發(fā)現(xiàn)：大部分競(jìng)品缺少獨(dú)特的品牌語(yǔ)言——用戶很難區(qū)分彼此，無(wú)法激發(fā)用戶對(duì)產(chǎn)品的興趣 EMAS希望提供什么樣的形象與感受，現(xiàn)有的視覺(jué)設(shè)計(jì)語(yǔ)言能否讓用戶產(chǎn)生所預(yù)設(shè)的共鳴？因此差異化的牌語(yǔ)言，能體現(xiàn)EMAS獨(dú)有的品牌價(jià)值，在用戶心智建立準(zhǔn)確的品牌形象。

首先，我們基于“卡普費(fèi)雷品牌識(shí)別棱鏡”從品牌定位&品牌表現(xiàn)的維度來(lái)挖掘產(chǎn)品形象，在個(gè)性、文化、形象、關(guān)系、體現(xiàn)、外貌6個(gè)緯度對(duì)品牌進(jìn)行定位。

明確了“Make smart app”這一產(chǎn)品Slogan，相應(yīng)確定了產(chǎn)品“智能、高效、敏捷、靈動(dòng)”的視覺(jué)語(yǔ)義，并從從個(gè)層面定義Smart，從各設(shè)計(jì)元素中挖掘smart的特性，來(lái)傳達(dá)品牌。

通過(guò)品牌logo的三角圖形元素貫穿運(yùn)用到整個(gè)產(chǎn)品的 布局、插畫等元素，增加符號(hào)化元素的透出率，提升品牌的感知。

產(chǎn)品形象采用3D Pictogram配上動(dòng)效，通過(guò)材質(zhì)和光影的變化，更豐富傳達(dá)各子產(chǎn)品的特點(diǎn)，體感更強(qiáng)。

 

〇 策略三：易用性改進(jìn)提升研發(fā)效能

舊版EMAS經(jīng)過(guò)用戶調(diào)研的量表評(píng)分，產(chǎn)品易用性為6.8分，未達(dá)到優(yōu)秀標(biāo)準(zhǔn)，在整體研發(fā)易操作性及易學(xué)性等方面存在20+體驗(yàn)問(wèn)題。

因此，我們基進(jìn)行了深入的易用性度量和測(cè)試，挖掘出20+體驗(yàn)問(wèn)題，除了問(wèn)題的單點(diǎn)解決外，我們也形成了系統(tǒng)化的解決方案，形成了“一鍵接入”、”流水線編排““跨產(chǎn)品引導(dǎo)”、”場(chǎng)景化開發(fā)指引“等易用性策略和范式。最終形成了完善的一站式應(yīng)用研發(fā)設(shè)計(jì)體系。

 

四、技術(shù)類SaaS產(chǎn)品設(shè)計(jì)方法

通過(guò)以上項(xiàng)目的體系化設(shè)計(jì)的最佳實(shí)踐，我們逐漸總結(jié)出一套技術(shù)類SaaS產(chǎn)品創(chuàng)新設(shè)計(jì)方法：基于“產(chǎn)品/技術(shù)能力”、“產(chǎn)品價(jià)值傳遞”、“使用體驗(yàn)”及“ARR”四個(gè)產(chǎn)品關(guān)鍵要素的抽取和分析，明確了“連貫度”、“價(jià)值感”、“易用性”、“轉(zhuǎn)化率”四大開發(fā)者體驗(yàn)原則，進(jìn)而形成一系列體驗(yàn)設(shè)計(jì)要素，指導(dǎo)設(shè)計(jì)師有章可循的去進(jìn)行技術(shù)類產(chǎn)品的思考和設(shè)計(jì)工作。

設(shè)計(jì)師是人與科技間的鏈接者，在數(shù)字化變革的浪潮中發(fā)揮著重要的作用，通過(guò)對(duì)用戶、產(chǎn)品、體驗(yàn)的深度洞察，讓科技逐步普惠化、民主化。

 

原文地址： 阿里云設(shè)計(jì)中心（公眾號(hào)）

作者： 阿里云設(shè)計(jì)中心

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》數(shù)字化浪潮下，設(shè)計(jì)師如何驅(qū)動(dòng)技術(shù)類SaaS產(chǎn)品的升級(jí)與創(chuàng)新？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.0391cbd.com )是一家專注而深入的界面設(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ì)公司