【摹客RP測評大賽優秀作品】基于用戶需求,打造原型設計工具中的卓越用戶體驗
#本文為2022摹客RP原型工具測評大賽三等獎作品
隨著互聯網的發展,產品設計需求也隨即增多,市面上的原型設計工具都差不多,呈現差異化是當前原型工具從競爭中脫穎而出的關鍵。本文以摹客RP為例,借助用戶五要素,闡述如何在產品設計借助創新思維,打造卓越用戶體驗,實現彎道超車,一起來看看。
2014年,國內移動互聯網行業迎來大爆發,設計需求也隨即井噴。所謂“工欲善其事、必先利其器”,原型軟件已經成為產品經理的必備工具,而市面上的原型工具在交互設計上都大同小異。如何在激烈的市場競爭中,借助設計形成差異化的競爭優勢,真正的為廣大用戶做好服務,成為了原型設計工具的重要使命。
目前,在全球90多個國家和地區,摹客已擁有數百萬專業用戶和數十萬個企業團隊,服務了眾多領域的頭部企業,其中不乏中國最為知名的科技企業、互聯網企業和數字化轉型中的大中型傳統企業。
今天我們通過摹客旗下的原型設計工具——摹客RP,了解下如何在產品設計借助創新思維,打造卓越用戶體驗,實現彎道超車。文章的主要內容包括以下幾點:
一、用戶需求洞察
我現在是一名B端交互設計師,有時候偶爾會客串一下產品經理的角色。用過的工具也是五花八門,從最開始的PPT到專業的原型軟件Axure,后來又轉了設計師專業工具Sketch、Figma。雖然一直在畫原型,不過仔細思考下,會發現其中有了新的變化。主要有以下幾點:
1. 原型質量要求變高
行業越來越成熟,各類產品都開始追求高質量的用戶體驗,對原型的要求也越來越高。簡單的框圖已經無法滿足對內的需求傳達、以及對外的展示要求。
在C端領域,崗位分工更加清晰,產品經理主要側重需求分析,基本不需要輸出原型方案,界面設計工作由專門的交互設計師和視覺設計師完成。交互設計師首選專業的設計工具,例如Sketch、Figma等等。
而傳統行業正在受到互聯網影響,開始走向信息化、數字化,B端產品處于大發展階段。產品的用戶體驗受到重視和追捧。但是由于產品形態和受眾的差異化,B端設計與C端有所不同。一般采用“產品經理+體驗設計師”的模式,產品經理除了需求分析之外,還會承擔起原型設計工作;體驗設計師是在原型方案基礎上,進行交互優化,并完成高保真視覺效果圖。
這樣的崗位配置對兩者工作配合和個人能力要求都比較高,如果體驗設計師的交互能力不足,產品經理就需要盡可能精細化的表達產品需求和設計方案,以便在后續的需求對接中,減少溝通成本,保證方案準確的執行落地。
現實工作中也的確如此,由于B端產品專業性比較強,行業門檻比較明顯,兼顧視覺和交互的體驗設計師缺乏對需求的理解和認知,更偏向于設計執行層面,更依賴產品經理的基礎原型方案,于是產品經理也被倒逼著不斷提高個人的原型設計能力。
2. 交互演示要求更高
B端產品以PC端為主,頁面尺寸通常比較大,想要像C端產品一樣,純粹依靠頁面流程圖來展示產品交互邏輯不太現實。
在評審方案時,大范圍的來回拖動設計方案,容易增加聽眾的理解成本。因此有必要添加一些基礎的交互動作,方便設計方案演示。另一方面,帶交互的方案演示效果也更加自然,給聽眾更強的代入感。
3. 迭代速度在加快
SaaS產品區別于傳統B端產品,更容易受到市場和用戶的雙重驅動,產品的迭代速度也在加快。這就要求產品經理的設計速度也要加快,一款高效的原型工具,必須帶給產品經理更高的工作效率,起到事半功倍的效果。
二、拆解摹客RP
本文從用戶體驗五要素的維度,去拆解摹客RP,嘗試洞察內在的設計邏輯以及設計亮點。
1. 戰略層
戰略層就是“產品能夠帶給用戶什么樣的價值,而在這個過程中產品又可以獲得什么(通常就是商業目標的達成)”。
傳統原型工具都是采用售賣軟件的方式獲得收益,用戶免費下載軟件,購買授權碼后即可享受正版服務。不過這對個人用戶和設計團隊而言,都是一筆不小的成本。所以Axure 10推出付費訂閱后,雖然我也希望能夠體驗到最新的產品功能,但是最終理智戰勝了欲望,因為我不想付費。
而摹客RP則采用互聯網運營模式,為產品經理和設計師量身定制了“免費設計計劃”,只要邀請5名用戶注冊并加入團隊一起工作,就可以獲得永久無限設計包,不限時長、頁面、功能。
這無疑給行業帶來了巨大的沖擊,零成本使用設計工具,讓用戶選擇成本更低。對團隊而言,免費模式也將成為設計團隊邁向全面數字化的推動力。當然這種模式也促成了摹客RP用戶規模的快速增長,實現了產品和團隊的雙贏。
而在產品層面,摹客RP的口號是“重新定義原型設計”,“更高效、更易用、更流暢”。目標就是要改變傳統原型工具組件繁瑣、交互復雜的問題,而這一產品設計理念也確實體現在了產品其他用戶體驗層級中。
2. 范圍層
原型設計工具日漸趨同,從大的用戶場景劃分,主要包括靜態原型設計動態交互設定,以及產品原型頁面展示。但是細化到功能層面,還是有很大的拓展空間。
在我的體驗中,發現摹客RP相較于其他產品,主要有以下產品特色:
1)適應行業變化,增強組件擴展性
前文提到現在對產品原型的要求越來越高,但是產品經理普遍不太注重原型界面的美觀度,就容易造成原型方案比較粗糙,比較典型的問題包括,布局對齊、配色、字體大小等等,這樣就無法展示出內在的信息層級。而在傳統原型設計工具中,組件比較基礎,無法覆蓋到更多的產品設計場景。
對于復雜組件,需要產品經理通過基礎組件組合搭配才能實現,這就造成了制作繁瑣,在一定程度上影響了工作效率。如果涉及到團隊協作,不同產品經理的使用習慣、個人能力不同,輸出的原型方案可能大相徑庭。
根據實際的用戶需求,摹客RP推出了更加符合用戶需求的場景級組件。包括復選框組、開關、二維碼、日期選擇器等28種常用組件、8種圖表組件,以及海量矢量圖標。有了這些成熟組件,產品經理不需要再去網絡上尋找組件庫和圖標,并且這些組件有的還自帶交互效果,無形中節省了大量的時間和精力。實現了軟件安裝即可使用,產品經理可以將更多經理專注在產品設計上。
海量圖標庫囊括了產品設計中常見的各類型圖標,粗細兩種風格可以靈活適應不同的設計場景,真的是解決了產品經理的后顧之憂。
組件樣式的可編輯能力也在加強,可以滿足產品經理的精益化需求,打造更加有質量的原型方案。同時標準化組件設計,讓團隊協作更加方便,更好地保證產品設計方案展示的一致性。
2)主輔畫板創新模式,提升操作的易用性
為了提交原型方案的逼真程度,傳統的原型工具實現彈窗效果時,要么將彈窗內容直接疊加在頁面上方,或者將彈窗放置在頁面外部隱藏起來,通過添加“移動”和“顯示”2條交互命令實現仿真效果。
在彈窗數量不多的簡單場景下,這樣的操作模式也是可以接受的。但是對于彈窗較多的復雜場景,就會嚴重影響用戶的操作效率。例如直接疊加在頁面上,彈窗內容重疊容易造成選擇困難或者錯誤選擇。如果放在頁面范圍之外,每個彈窗都要添加移動命令,光是確定移動后的坐標值,都會增加額外的工作量。
摹客RP創造性的推出了自己的解決方案——“主輔面板”。主面板內容用來是最終的演示區域,輔助面板在主面板之外,承接各種內容信息,可以通過交互動作調用到主面板中。調用后的坐標設定了5種常用的位置。當然用戶也可以自定義位置。這種方式就極大的提高了用戶的操作效率。
輔助面板的另一個特點,就是編輯狀態下直觀、高效;而演示狀態下,輔助面板則不可見,也就是說用戶無需將面板內容手動隱藏。這相比傳統原型工具的隱藏模式,更加直觀。修改時也不需要激活顯示,可以直接修改,用戶的查看和編輯效率更高,更加流暢。
3)響應式布局,產品經理提效利器
當設計稿需要應用在不同的終端尺寸時,往往需要我們手動調整組件的布局和大小,費時費力。眾多的設計工具都推出了“約束”功能,摹客RP也順應趨勢,推出了“響應式布局”功能,可以輕松完成布局調整。
響應式布局對產品經理提高工作效率有極大的幫助。例如原型設計時,會有大量的彈窗設計,但是每個彈窗的尺寸有大有小,就需要不斷調整尺寸。有了響應式布局后,就可以將提示信息彈窗或者內容彈窗,約束好彈窗內容的定位方式和元素尺寸,并轉化為組件資源,可以在不同場景下調用、編輯即可。在對畫板或組進行縮放時,其所包含組件的布局和大小也會隨之發生改變,減少了手動調整內容的工作量。
3. 結構層
1)交互操作創新
提升效率是原型設計工具的不懈追求。一些老牌的原型工具,擁有強大的命令式交互能力,可以制作出各種各樣的逼真的交互效果,但是相應的學習門檻較高。當年我學習Axure時,專門找了一份教程來學習其中的技巧。
而摹客RP采用了“所見即所得”的交互模式,通過拖拽即可快速建立元素的交互關系,再經過簡單的配置即可完成交互設置。這種方式相較于傳統的命令交互的方式,大大地提高了用戶的操作效率。
結合前面我們提到的豐富組件,甚至實現了在需求討論時,就可以高效地完成頁面搭建、演示并確認方案,有助于提升項目協同的整體效率。
2)輔助面板交互亮點
動態面板可以說是原型工具中非常重要的組件,可以承載各種頁面信息,建立交互關系后,可以實現內容的展示和切換。但是動態面板也存在比較明顯的交互短板。最大的痛點就是動態面板和頁面是相互隔離的兩個空間,用戶需要單獨進入動態面板才能進行內容編輯。編輯時首先要通過下拉選擇或者逐個切換的方式,定位到具體面板完成編輯。這無疑增加了用戶的操作成本。
摹客RP改變思路,利用輔助面板,解決了這個用戶痛點。
首先摹客RP也有自己的動態面板——稱之為“內容面板”。這個面板只是用來關聯輔助面板,方便主面板承載信息功能。之前提到在編輯狀態下,輔助面板與主面板平級展示在畫布中,這樣就減少了面板選擇跳轉的過程,操作更加快捷。主畫板中的組件,通過拖拽即可與輔助面板建立交互關系,從而提升了操作效率。
但是對于復雜頁面,輔助面板必然也會較多。面對滿屏的面板,用戶該如何快速定位呢?摹客RP在傳統的圖層列表搜索的基礎上,還提供了2種解決方案,保證了良好的用戶體驗。
① 畫板列表
考慮到畫板的重要性,摹客RP單獨提供了畫板列表,用戶可以快速定位、修改、刪除面板,也可以拖拽建立交互關系,真正的做到了簡潔高效。
② 定位功能
在主面板中,可以通過已經關聯的交互關系的組件,快速定位到輔助面板。那么編輯完成輔助面板后,該如何快速返回主面板呢?摹客RP也想到了這一點,在工作區增加了鷹眼導航功能,只要雙擊導航區,就可以快速定位到主面板。
4. 框架層
摹客RP作為后來者,一方面要引入零基礎的產品新人,另一方面主要是承接從其他原型工具遷移過來的行業老用戶。因此遵循行業內通用的框架布局模式就是成了必然選擇,有利于降低用戶的學習成本。
摹客RP產品的框架結構并不復雜,左、中、右的布局模式與常見的工具軟件非常相似,很容易讓用戶上手。
5. 表現層
摹客RP采用了固定的深色面板,只允許用戶自定義工作區背景色,這種方式還是略顯單一的,無法滿足不同用戶的視覺要求。反觀大多數的設計軟件都已經支持深色、淺色兩種模式。
三、優化建議
摹客RP也并不是完美無缺的。在體驗過程中我也發現了一些體驗細節問題。
1)快捷操作需要加強
作為Axure的老用戶,我的繪圖習慣已經被培養起來了。例如形狀的切換,可以通過右鍵菜單完成。圓角矩形也可以通過矩形上的拖拽點直接生成。但是在摹客RP中,這些操作都必須通過右側屬性欄完成,操作效率并不高。形狀切換功能被放在屬性欄的最底部,我剛開始是沒有找到的。所以我畫錯形狀的情況下,就只能刪除后,重新繪制。
另外文本組件中也缺少了標題文本組件,每次都要專門設定文本屬性,雖然可以通過文本樣式定義成資源,不過還要切換Tab頁簽,沒有直接拖拽組件便捷。
2)資源管理能力要完善
摹客RP資源是可以復用的屬性信息,分為了顏色、文本、組件3類。確實可以減少不必要的重復性操作。但是資源管理的能力還需要加強。例如文本樣式不可以命名,用戶的識別效率就比較低,顏色管理也存在這樣的問題,可以做一些事情分組功能,方便用戶選擇。
3)交互細節要提升
界面交互中,基礎的操作方式還是需要提升的。例如在用戶場景中,預覽功能頻率更高,用戶要校驗交互動作是否準確有效,而發布功能其實應用的頻率并不是最高的,主要是完成方案后才使用。但是在界面中,發布按鈕作為主按鈕,設計明顯強于預覽按鈕,每次我都會有些遲疑,因為需要做一下思維的轉換。
而在演示界面中,側邊的收起、現實的操作都被集中到了演示區域下方的工具欄中,這其實違背了親密性原則。因為工具欄是在演示的內容區,用戶首先想到的是對演示內容的控制。而常規的側邊欄控制按鈕都是就近布置,目的是為了用戶減少用戶的認知負荷和操作負荷。
另一方面側邊雖然可以自行拖拽,但是目前版本中只能做拉寬,不能收窄。這也影響了操作的靈活性。
四、總結
完整的體驗后,個人認為摹客RP的設計亮點確實比較多,不僅在大的功能層面,小的細節也在不斷優化提升。例如點擊即可快速切換圖標,而且可以繼承原有圖標的屬性。比傳統的刪除、拖入、調整屬性的方式,方便太多了。正是這些面向用戶需求的設計細節,讓摹客RP快速成為了原型設計利器。
希望摹客RP未來能夠持續改進,為廣大產品經理帶來更加實用、更加驚艷的產品功能。
本文為2022摹客RP原型工具測評大賽的測評文章,如對摹客RP感興趣可點擊體驗鏈接:https://www.mockplus.cn/rp-event/?hmsr=woshipmlichao
專欄作家
子牧先生。公眾號:子牧UXD(HelloDesign),人人都是產品經理專欄作家。產品體驗設計師。8年互聯網行業經驗,擅長體驗設計思維、設計方法論、交互設計研究。
本文原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
多不是復雜,少也不是簡單。見所不想見,關系又多頭暈??
很棒的作品