【摹客RP測評大賽優秀作品】產品評測——對摹客RP交互設計的體驗與建議
#本文為2022摹客RP原型工具測評大賽一等獎作品
原型設計工具是很多交互設計師以及產品經理都會使用到的,國產原型工具越來越多,給了用戶許多選擇,而真正滿足用戶需求的原型設計軟件,才是為大家所選擇的。作者就摹客RP進行評測,結合實際工作案例,將蘇寧智慧屏OS系統中的“自定義頻道”功能作為測試案例,從交互設計的角度對產品進行體驗測評。
一、產品評測簡介
原型設計軟件是設計師、產品經理使用頻率很高的工具,最早期的軟件是Axure,它因為輕量化,功能豐富的特點也一直很受大家追捧,但作為一款國外開發的軟件,卻也有很多局限性,比如使用者權限,團隊協作、購買價格等,正是由于這些因素,讓國內很多公司看到了這塊市場,紛紛入局,開發相關的軟件去競標Axure;從早期的藍湖到現如今的各大品牌的原型設計軟件,給了項目設計人員更多的選擇,大大提高的團隊協作效率。
1. 測試背景
目前我們公司設計團隊使用的原型設計工具就是Axure,在實際項目中,團隊交互原型的呈現效果很差,統一性不強,組件的復用、新增、修改等同步的效率很低。原型設計樣式和規范五花八門,給閱讀的人員造成很多不便,盡管團隊在每個版本結束之后都會對原型設計的規范進行匯總和要求,但是設計師在進行原型設計時,都習慣了一遍做原型,一遍去比對熟悉規范,都是獨自去審查,大大影響了原型設計的統一性;
項目組的設計人員負責的模塊都比較獨立,繪制原型頁面過程中,無法實時同步去協作,繪制結束后還需要保存源文件或者導出html分享給項目組人員,導致Axure的共享協作成本變得非常高。
2. 測試目的
項目團隊想通過引入國內原型設計工具來替代Axure,幫助團隊更加高效地進行項目項協作,剛好應邀參加「摹客與人人都是產品經理」聯合舉辦的關于“摹客RP評測文章”的比賽。
所以就想著通過評測這款產品是否在團隊中使用和推廣,以及通過使用體驗提出一些建議,希望自己的拙見和思考能夠對摹客RP的產品設計能有一些幫助。本篇文章通過實際工作中的項目,蘇寧智慧屏OS系統中的“自定義頻道”功能作為測試案例,從交互設計的角度對產品進行體驗測評。
3. 測試環境
測試設備:Macbook pro 2019
測試產品:摹客RP網頁端、客戶端
測試形式:以實際工作項目為例,對摹客RP的產品功能使用和交互操作進行體驗評測
測試用時:四周
4. 測試大綱
測試主要從以下三方面進行:產品的設計框架、產品使用的操作流程、產品的設計組件;框架是產品最底層的基礎部分,好的框架會讓用戶一目了然,比如他的功能是有哪些,功能信息怎么去布局的,信息的層次感有沒很有分明,這些都能有效率的讓用戶閱讀和使用產品;操作交互是能讓用戶對產品體驗更直觀,如在某一功能的使用流程中,用起來方不方便,交互方式的操作是否順暢,設計和組件設計決定和產品的“顏值”,設計原則、模式和合理的組件使用能提升產品的價值和表現力,所以本次的測試大綱如下:
- 框架:功能、設計布局、信息層次
- 操作:使用流程目標、主要任務
- 設計和組件:原則、模式、組件樣式
二、角度1:設計框架
第一個角度主要是從設計框架來進行體驗,主要包括產品的功能結構、布局的信息層次;兩端主頁面的框架設計基本是保持一致的,均是左右結構,但還是有很多差異化的細節設計;
1. 控制臺頁面
網頁端拆解圖:
客戶端拆解圖:
(1)左邊區域對比
對比可以看出網頁端的側邊欄信息更多,有logo,有相關聯的工具鏈接,導航菜單類別多達7個,而客戶端側邊欄功能比較簡化,只有用戶信息和導航菜單,且導航菜單只有5個。
(2)右邊區域對比
在內容區上,網頁端和客戶端的框架是保持一致的,都是頂-中-底三層:
- 頂層:網頁端菜單標題下方會展示詳細的項目和項目集數量信息,客戶端僅展示標題;
- 中層:展示常用功能,如新建項目或項目集、搜索功能,樣式和布局基本保持一致;
- 底層:網頁端項目或者項目集支持多種展示方式,且可以通過篩選條件進行查找,客戶端僅支持列表展示,不支持篩選條件查找。
2. 原型設計頁面
原型設計頁面和Axure的頁面相似度很高,大致可以拆分成四大部分:標題和工具欄,左邊功能區分上下兩層,可以上下收縮拉伸,中間是原型設計區域,右邊設置面板區主要屬性、交互、備注三個主要功能。頁面的布局符合設計師使用習慣,理解成本很低;網頁端和客戶端的也是統一的。
3. 體驗小結
整體來說,兩端的控制臺主頁面滿足了設計師基本的使用需求,布局中規中矩,但兩端細節差異還是有很多的,雖然是不影響用戶正常使用,但在實際操作中,設計師需要花很多時間來適應兩端頁面和操作的差異,所以在產品評測過程中一直疑慮:同一套信息和內容,為什么要做兩套控制臺頁面樣式來增加設計師的學習和使用成本呢?信息內容布局的差異化會影響設計師能否快速熟悉功能,操作的差異化會影響設計師的體驗感。
為了驗證統一性的重要性,我找了市面上主流的設計工具做了對比,如下圖,在多端統一性上(忽略極小的差異化細節),他們的共有率達到了100%,所以足以證明這些產品對統一性的重視程度。
關于操作臺頁面統一性的優化方案如下所示:
優化點1:兩端的主頁面側邊欄的信息框架可以保持一致,首先是logo、用戶賬號信息的位置;其次是導航菜單的數量,可以讓用戶在兩端之間切換使用時,通過統一性加強用戶對界面的理解
優化點2:兩端的右邊操作區域針對項目和項目集的管理和篩選,展示方式的多樣性應該保持同步,包括配置篩選條件也可以同步;
優化點3:兩端關于全部菜單的功能框架的設計,可以在多級菜單(全部>項目集1>項目集2)和一級菜單(全部)中二選一,復用一種設計樣式,降低開發成本;
優化點4:兩端關于“設計團隊的切換”的設計,網頁端點擊團隊名稱出下拉菜單,進行團隊切換,客戶端點擊側邊欄的用戶名,出現次聯菜單,再找到團隊切換列表,兩端可以在組件使用和入口方式的設計上統一,保證信息內容、位置的統一性的前提下,使用可復用的設計樣式,降低開發成本。
原型設計頁面,功能很全面,使用起來很便捷,整理了如下優缺點:
爽點1:如文字元素的屬性設置點非常多,英文大小寫,首航縮進等,可設置的參數很多;
爽點2:支持畫板響應式布局,選中畫板作為對象時,可以在屬性面板中進行刪除;
爽點3:可以創建項目資源庫,包括顏色、文本、組件等設計資源,設計更加高效;
問題點1:相對應的屬性列表展開顯示后,模塊空間的沒有充分利用;如圓角這個參數可以選擇百分比的樣式,就需要另起一行;
優化方案1:屬性面板可以保留比較常用的屬性參數,新增加的參數設計如果不常用會占據空間,且在黑色色彩模式下,信息的閱讀效率會收到影響
問題點2:右邊整塊屬性面板不支持自適應拉伸,位置是固定的,如元素透明度這個參數為100%時,數字也不能夠顯示全。
優化方案2:屬性面板增加自適應收縮,會讓頁面空間更加靈活。
三、角度2-操作流程
第二個角度主要是從相關功能的操作使用流程作為切入點去體驗,主要7大核心流程和14個操作小任務。
1. 新建項目和新建項目集
任務1:在控制臺頁面找到功能的入口,新建一個名為“自定義頻道”的項目和兩個名為“Biuos1.0”、“蘇寧智能終端”的項目集
客戶端操作示例:在首頁菜單,有個單獨項目編輯區域,可以直接點擊進行命名和選擇尺寸。在其他菜單下,如果有創建按鈕,均可以點擊,頁面中間會跳出彈窗,直接對項目和項目集進行創建編輯。
網頁端操作示例:在相關的菜單中,只要有創鍵按鈕,就可以進行創建編輯,僅支持點擊按鈕-跳出彈窗的途徑。
設計爽點1:在客戶端,有個很大的項目創建區域,用戶可以命名,選擇尺寸,很直觀,增加了項目創建的入口;
設計爽點2:網頁端可以創建項目和項目集,客戶端只能創建項目,雖然沒有統一,但是從使用習慣的角度思考,這個設計還是非常好的,項目集是比項目要大的,根據設計師使用習慣,考慮到網頁端的網絡鏈接,大多數用戶都會下載客戶端去操作,并且當項目責任人建立好項目集,負責相關模塊的設計師就可以專注在項目上,避免了亂建項目集,造成混亂;
體驗問題1:兩端的很多基礎導航菜基本都有新建項目或新建項目集按鈕,考慮到用戶在切換不同菜單時,都能提供這個入口,雖然能方便用戶操作,但有一些過度引導;
優化方案1:減少過度設計,菜單應匹配相對應的信息需求。例如用戶切到我的收藏菜單,需求就是去查看收藏項目,新建項目就是非必要的選擇,加上就會變的強行引導;
體驗問題2:在創建項目時,通過彈窗的方式去進行創建編輯,這樣會讓操作流程變得復雜,而且彈窗中的信息優先級不高,創建結束后也都可以修改;
優化方案2:模態彈窗對用戶的干擾程度很高,創建項目應該是比較簡單的操作,不需要強干擾的組件去提示用戶,建議可以直接過度到原型設計界面。
2. 項目或項目集的移動
任務2:在控制臺頁面,把項目“自定義頻道”移動歸類到“Biuos1.0”的項目集
客戶端操作示例:項目和項目集僅有列表的展示方式,將項目“自定義頻道”移動至項目集“Biuos1.0”時,需要點擊項目中的操作按鈕,彈出操作列表,選擇移動,跳出彈窗,選擇項目集確認,無二次彈窗確認。
網頁端操作示例:項目和項目集有列表和宮格兩種展示方式,將項目“自定義頻道”移動至項目集“Biuos1.0”時,需要點擊項目中的操作按鈕,彈出操作列表,選擇移動,跳出彈窗,選擇項目集確認,再彈出彈窗二次確認。
體驗問題1:網頁端和客戶端移動項目的過程中,第一次都需要有彈窗,選擇項目集分類,但下一步的操作,網頁端使用模態彈窗讓用戶二次確認,確認移動成功后有提示??蛻舳顺晒σ苿映晒螅瑳]有提示。
優化方案1:結合兩端的優缺點,首先網頁端避免使用確認移動的二次彈窗,減少操作流程,客戶端移動成功后,增加操作提示,提升交互感知。
體驗問題2:項目或項目集不可以直接拖拽進行移動管理操作,只能通過按鈕點擊選擇移動選項才能操作,操作比較遲緩。
優化方案2:為移動操作增加鼠標拖拽功能,更加快速的進行項目歸類,效率高。
3. 頁面和畫板管理
任務4:選中原型設計頁面的左邊功能區的【頁面】tab,為“自定義頻道”功能創建若干個頁面,隨機對頁面進行設置操作(創建、重命名、移動、復制、刪除、撤銷刪除)
操作示例:點擊「添加」按鈕,可以進行頁面創建,選中任一頁面,右擊出現彈框,進行選擇重命名、移動、復制、刪除等操作;雙擊頁面標題都可以進行頁面名修改,拖拽頁面可以進行運動歸類,選中頁面點擊設備刪除鍵,出現彈窗提示是否刪除。刪除后,設備無快捷鍵撤銷刪功能。
新建和復制新頁面后,新頁面變為當前頁面,且有背景底色,但無法使用設備刪除鍵直接進行刪除操作,需再次點擊選中新頁面,讓文字變為純白色,才可以刪除文件。
體驗問題1:頁面刪除后沒有進行刪除撤銷的快捷鍵“command+z”操作,“撤銷”快捷鍵是設計師最常用且依賴度很高的操作。
優化方案1:增加“撤銷”快捷鍵的使用。
任務5:選中原型設計頁面的左邊功能區的【頁面】tab,使用回收站功能、將“某一頁面”刪除再從找回
操作示例:選中某一頁面,進行刪除操作確認,點擊回收站按鈕,開始回收模式,找到分頁面,鼠標懸停在頁面上,顯示恢復和刪除按鈕,點擊恢復按鈕,再彈窗確認,頁面恢復。退出回收站模式,才能顯示當前所有頁面。
設計爽點1:增加“回收站“模式,用戶可以找回頁面,擴大了容錯范圍;
體驗問題1:回收站模式退出的按鈕樣式和工具欄的撤銷重合度高,易混淆;其次這里的回收站模式需要開始和關閉兩種狀態,整個過程中需要2次點擊操作。
優化方案1:回收站對應的是頁面,單獨再加一個tab對于信息內容切換會更便捷,省去“回收站”,模式開啟和關閉的流程。
任務6:選中原型設計頁面的左邊功能區的【頁面】tab,選擇“自定義標簽”頁面,切換到【圖層】tab,對頁面中的“默認狀態”畫板中的圖層進行順序調整
操作示例:選中畫板其中一個圖層,然后移動到另一個圖層的上方或下方,調整圖層順序,但不能進行拖拽移動,只有置于頂層和底層的按鈕操作。
體驗問題1:設計師在制作原型圖時,需要調整畫板中的圖層順序,置頂或置底的操作不能解決使用者調整圖層順序的效率問題,移動拖拽能靈活快速的給圖層排序。
優化方案1:增加鼠標拖拽移動功能,讓圖層位置的移動更加方便。
4. 項目原型設計制作
任務7:在“自定義標簽”頁面編輯區進行畫板的創建、設備和尺寸選擇、復制、命名、屬性設置
操作示例:工具欄中使用“添加輔助畫板”或者快捷鍵A創建畫板,在原型編輯區域左下角可以進行進行設備和尺寸選擇、使用快捷鍵command+c/v、直接雙擊畫板標題可以進行重命名、選中畫板后,在右側功能區域調整參數進行屬性設置。
設計爽點1:可直接在視圖中雙擊畫板名稱文字,直接選中進行修改,不用在圖層頁面找對應頁面進行名稱修改,圖層的空間有限,當畫板數量超過之后,就需要上下移動來回審查,所以這個設計細節讓操作更加聚焦,對于大批量的畫板名稱修改,很節省時間。
體驗問題1:畫板設備和尺寸選擇的優先級高于畫板快捷創建,通過鼠標懸停的操作方式呼出多級菜單分類,交互的可控性比較差。
優化方案1:類比市面上其他產品,基本都是快捷鍵A調出設備尺寸選擇,而且大多是在屬性面板使用列表下拉的方式展示。快捷鍵“A”的使用對象可以重新定義,加強快捷創建畫板的優先級,重新設計畫板設備和尺寸選擇的位置和交互出現方式。
體驗問題2:在復制畫板時,不支持選中畫板后,使用“option+鼠標鍵”快捷操作進行復制拖拽,新畫板不能任意的拖拽到自己想要的位置。
優化方案2:增加快捷鍵的使用。
任務8:在“自定義標簽”頁面的畫板中利用工具繪制低保真設計稿,設置元素屬性
操作示例:選中自定義頁面,在默認狀態的畫板中對元素文字、形狀、顏色等屬性參數進行設置。
例1:在畫板中縮放矩形,設置面板中的寬高參數沒有變化;
例2:在屬性中將初始矩形外邊框寬度值從“1”變為“2”,但頁面中元素沒有變化,仍然是1,只能在點擊非寬度的參數任意區域后,寬度數值的變化在頁面中才能響應;
操作示例:將圖片拖入某畫板內,圖片位置在畫版的頂部位置,當將畫板拖去來,在左邊功能區的圖層tab中,圖片還在原來畫板頂部顯示,拖動畫版,圖片在畫版外和畫板一起移動。
體驗問題1:兩個例子都是屬性面板和畫板聯動無響應的問題,不管是畫板中的元素聯動屬性面板的參數,還是屬性參數聯動畫板中的元素,都沒有實時響應。尤其是外邊框的寬度值無法實時顯示,這就對設計的效果很難把控。
體驗問題2:圖片拖進和拖出畫板時,圖片圖層的歸屬不清晰。
優化方案:這兩個槽點屬于產品的性能問題,可針對性能這個點,加強優化。
任務9:在“自定義標簽”頁面的畫板中查看元素與元素,元素與畫板,畫板與畫板的距離,進行元素和畫板的距離調整
使用鼠標和鍵盤鍵可以查看“默認狀態”畫板中元素的間隔、與相鄰畫板的間隔,在懸停展示間距的同時去調整位置距離。
體驗問題1:只能查看同一個畫板中元素之間的距離,無法查看畫板之間的距離,且同畫板中不能在顯示距離間隔的狀態下,對元素位置進行調節。
優化方案1:增加設計優化,完善距離相關的測量和位置移動的操作問題,提升設計體驗和用戶的原型設計效率
任務10:在“流程圖”頁面中使用流程模式,為“自定義頻道”功能繪制邏輯流程圖
操作示例:在「流程圖」頁面,在工具欄中打開流程圖模式,為“自定義標簽”功能畫一個簡單的邏輯流程圖,梳理業務流轉的邏輯關系。
設計爽點1:產品內置了很多流程圖組件,當鼠標獲取矩形元素的連接線端點后,開始移動至松開鼠標結束,流程組件庫彈窗會自動出現,可以選擇對應的矩形組件。并且制作好摹客RP源文件可以和自帶的PRD文檔工具相關聯,選擇帶有流程圖內容的畫板,直接轉化成圖片導入到文檔中,這個聯動做的相當給力。
任務11:對“自定義頻道”功能的原型項目進行保存
操作示例:當設計結束或中斷時進行項目保存時,可以使用保存按鈕或者快捷鍵“command+s”對項目進行保存。
體驗問題1:當用戶保存后,頁面并無明顯的關于“項目已經被保存或者可以實時進行保存項目”的提示;
優化方案1:首先用戶不知道的項目保存的時效性,可以使用“Toast”提示用戶。
5. 創建交互demo
任務12:為“自定義頻道”功能頁面的跳轉和設置保存創建頁面交互事件
操作示例:在當前頻道有內容的場景下,開啟調整模式,移動頻道順序,再次確認頻道,移動跳到頻道顯示或隱藏功能區域,為頻道自定義設置創建交互事件,最后使用彈窗對頻道順序調整、顯示、隱藏這些操作進行數據保存;在右邊功能區的選擇“交互”菜單點擊「添加交互」按鈕,對事件屬性參數進行設置。
- 頁面跳轉
- 設置保存
設計爽點1:在使用Axure原型工具時,通常一個頁面我們會使用文字描述主要信息和交互操作;例如,在自定義頻道設計的頁面主要就是標題、頻道名稱以及狀態圖標,這是顯性化的信息。
對應保存的的操作還有各種隱性信息和操作,比如設置保存的彈窗,不可操作的提示、網絡異常的提示等;我們會使用很多靜態頁面去描述隱形信息和操作。但摹客RP的原型工具支持的主輔畫板的模式,可直接設計交互轉場、提示等隱形操作,更直觀的呈現原型設計效果。
6. 項目原型設計預覽
任務13:使用播放功能或進入摹客協作模式預覽“自定義頻道”原型設計和交互效果
操作示例:在工具欄點擊播放按鈕,預覽“自定義頻道”功能的原型設計和交互點擊效果;點擊發布,進行項目分類,進入慕客協作網頁端查看所有頁面和畫板以及交互效果。
體驗問題1:單獨演示預覽時,視圖窗口只展示頁面,不展示頁面內的畫板;在慕客協作網頁端可以進行查看所有內容,當使用網頁端查看畫板內容的過程中,有多次無法快速找到「畫板」入口的場景,查看畫板的入口不是很容易被注意到。
優化方案1:演示預覽狀態下,增加“查看畫板”的入口,在慕客協作的網頁端強化“查看畫板”的入口
7. 項目多人協作
任務14:發送項目或項目集鏈接邀請協作人,協作者點開鏈接進入原型設計頁面
操作實例:在操控臺找到“自定義標簽”的項目,點擊按鈕找到「成員管理」,跳出彈窗,復制鏈接,發給協作人,協作者點開鏈接進入頁面協作
體驗問題1:項目管理人分享項目鏈接給協作者,協作者點擊鏈接直接進入原型設計頁面進行操作編輯,在網頁端從原型設計頁面返回到操作臺頁面后,再點擊項目,無法進入原型設計頁面;客戶端可以正常操作。
優化方案1:打開網頁端重新進入頁面的權限,讓用戶能夠自由進入或退出頁面。
8. 體驗小結
這部分通過最常用的7個交互操作,建立以目標為中心的體驗流程,再細分出了14個操作任務對產品進行體驗說明。操作體驗主要聚焦在統一性、功能設計、交互操作效率、細節設計。首先在任務流程中體驗到的爽點設計,體驗是非常不錯的,其次是針對相關的一些設計問題也有描述并提出自己的優化建議。
四、角度3:設計和組件
第三個角度主要是從設計組件來進行體驗,這部分內容主要有如下6個體驗點組成。
1. 導航菜單
網頁端和客戶端對于導航菜單(“全部”)組件的結構不一致,網頁端的全部菜單下會展示二級菜單,客戶端沒有;兩端菜單數量都不相同;
優化建議:導航菜單組件結構和數量統一。
2. 圖標
- 網頁端全部菜單的圖標和文案語義不匹配,一個是代表“首頁”含義的圖標,另一個文案卻使用“全部”文字。
- 網頁端和客戶端的“模版例子”菜單的圖標不一致。
- 網頁端的導航菜單圖標全是面性圖標;客戶端是有面性和線性圖標兩種,首頁是面性圖標,其他全是線性圖標。
- 網頁端和客戶端的“項目”圖標列表式展示狀態下的顏色和設計形式上不統一,其次項目和項目集的圖標的區分不明顯。
優化建議:兩端的頁面相同圖標需要保持一致,包括類型,樣式,統一性,減少差異化,關于圖標設計表意要傳達精準一點。
3. 按鈕
新建項目和新建項目集是產品的兩個重要功能,從功能重要程度來說應該是要保持一致的,目前設計明顯是新建項目的優先級高于新建項目集,雖然都是用“圖標+文字”的按鈕樣式,但圖標的樣式過于簡單,且新建文件使用強提示的高亮底色,更能吸引注意力。
競品中,如藍湖、即時設計、Figma、Pisxo的功能和摹客RP一樣都有新建文件(項目)和新建文件夾(項目集)功能,競品基本都保持相同的設計樣式,保證功能優先級是一樣的,僅有mastergo雖然按鈕和摹客RP一樣使用強提示按鈕,但它的功能框架設計和摹客RP不一樣。
它創建文件夾的功能放在左邊菜單的創建團隊中,新建文件的按鈕和文件導入是獨立的,雖然設計樣式不一樣,新建按鈕也相對突出了,文件導入的按鈕還有動畫效果。
優化建議:可借鑒主流的原型工具類的設計方案,平衡功能的優先級,在圖標設計樣式上讓功能更加形象。
4. 彈窗對話框
(1)彈窗樣式設計的統一性,如新建和刪除項目或項目集時的彈窗按鈕,它并不是特殊使用場景,都僅需要“確認”和“取消”簡單操作,但是鼠標懸停文字按鈕上的樣式是不一樣的。一種是加淺灰底色,文字沒變化,另一種是改變字體的透明度。
(2)多次彈窗增加了操作流程,如網頁端項目移動時,會有二次彈窗確認。
優化建議:彈窗的按鈕設計樣式上可以保持一致,對于產品中的個別功能的操作,建議少用或慎用彈窗組件,縮短操作流程。
5. 文案
(1)文件界面的左邊功能區的“圖層”菜單中包含畫板和圖層信息,這個標題名稱和內容不對應,表述不精準。
(2)頁面刪除的彈窗提示文案沒有給出完整且能防錯的的提示,彈窗只提示是否刪除當前頁面,并沒有提示用戶如何找回和被刪除文件的去向。
如下例子為操控臺項目刪除和原型設計的頁面刪除:項目刪除的文案:“確定將此次項目加入回收站”,頁面刪除的文案:“確定要刪除當前頁面嗎?”
(3)新建項目和新建項目集兩個按鈕的文案表意不精準,改為“文件和文件夾”,這樣的表述更簡單明了。
(4)導航收藏菜單名稱不一致,網頁端用“收藏”,客戶端用“我的收藏”,可以統一為“我的收藏”。
優化建議:關于文案部分,主要包括菜單欄、圖標、按鈕、彈窗提示文字等應用場景,進行修改完善。
6. 色彩模式
產品的主色調很深,沒有淺色色彩模式可以切換,同類的主流產品基本都是默認淺色,如即時設計、Masetrgo、Pisxo等都以默認淺色界面,Figma更是支持淺色深色切換;
優化建議:因為用戶對顏色的接受和敏感度都不一樣,提供深淺色兩種顏色模式進行切換,可以在界面色彩運用上滿足不同使用者的需求,若不提供,建議淺色模式,白色在感官上更加干凈、整潔。
7. 體驗小結
設計和組件主題包括6個部分,這些在產品評測,是很容易被注意的設計點,也是產品最基礎的組成元素;它的設計呈現決定了用戶的好感度,好的設計是需要通過這些元素來表達它的設計原則和理念;組件的設計和使用也是要合理和克制的;例如導航菜單和圖標設計應該在網頁端和客戶端保持一致;文案表述的應該精準、簡單、明了;按鈕和彈窗設計也可以再克制一點,色彩模式需要干凈簡潔,最大程度的減少對用戶的干擾,提升用戶的粘性。
五、測試總結
以上就是四周產品測試總結分享了,這篇測評文章主要是從交互的三個角度:頁面框架、頁面操作流程、頁面組件設計,通過深度使用和體驗這款產品,從中提煉出一些想法和建議,這里就個人使用體驗做出以下終結。
1. 產品關聯性
摹客RP這款原型設計工具與視覺、產品的關聯性方面設計的很好:作為一款原型設計軟件,它的功能很豐富,覆蓋了設計師做原型設計的大部分場景,能利用視覺思維發揮產品優勢,在項目協作,橫向和產品相關的工作內容進行關聯。
- 在設計上,這點主要體現它可以像頁面視覺設計一樣創立組件庫(文本、顏色、組件),團隊可以組件共享,大大的提升的高保真設計原型的設計協同效率;
- 在產品上,可以和,摹客PRD文檔工具進行關聯能夠導入RP源文件進行資源利用。
2. 功能設計
- 超預期的功能:開啟流程圖模式,產品內置了很多流程圖組件,選擇組件的設計方式非常的超預期,使用起來很便捷,操作更順暢,流程圖還可以直接導入到摹客PRD文檔工具中。
- 實用性的功能:主頁面中的回收站菜單和原型設計頁面左邊的回收站模式,回收站設計的本質是幫用戶避免誤操作,挽回損失;不管是在操控臺的找回項目或者項目集,還是在原型設計頁面對頁面進行找回的使用場景中,回收站這個功能和模式設計都能很好的容錯;
- 過度設計的功能:例如兩端的操控臺主頁面,很多基礎導航菜單都有重復的新建項目和項目集按鈕,菜單導航應該有相對應的內容;不應該站在“自己以為的用戶方便”的角度,去增加重復的設計。
3. 統一性差
這一點在產品體驗中感覺是十分明顯的,設計工具軟件,基本都有網頁端和客戶端的,控制臺頁面都不會進行差異化設計,所以當第一次在不同端打開摹客RP控制臺頁面時,呈現出的是不一樣的內容,我的第一印象是:有這么多不一樣的地方啊,我要花點時間再看看對比下?我剛才的那些操作入口在哪里???
- 布局:在“頁面框架”已經有提及過,包括控制臺頁面的布局,側邊菜單欄的設計,項目和項目項目集的展示方式,客戶端都有不小的差異;
- 操作:如項目移動的操作,在網頁端需要二次彈窗提示,客戶端就僅需要一次提示;
- 功能:如多人協作,網頁端和客戶端的功能操作邏輯也不一樣,點擊鏈接,網頁端進入頁面再退回控制臺,重進原型設計頁面就被禁止了;客戶端可以正常操作。
4. 交互操作效率
在交互操作上產品要有暢通感,即操作起來夠舒服,能夠給予操作有效提示,能夠在進行任務操作時有效率;
- 流程和組件:控制臺移動項目的交互操作應是一個極簡單的操作,但實際產品中使用了強制性的模態彈窗和2次操作彈窗進行確認,操作步驟多且干擾程度很強。
- 交互方式:產品有一些比較實用的交互方式沒有被應用,如拖拽移動的操作,在控制臺頁面項目和項目集不能拖拽歸類,在原型設計頁面中畫板中的圖層不能拖拽移動;
- 快捷鍵:主要集中在撤銷、復制等操作;在原型設計頁面,如刪除的頁面不能使用快捷鍵“command+z”撤回,如選中畫板后,不支持使用“option+鼠標鍵”進行脫拖拽;如使用快捷鍵“a”畫板快捷創建的邏輯。
5. 細節設計
在摹客RP體驗過程中,注意到很多設計細節,有很多不錯的地方,也有很多需要優化完善的設計點,如下所述;
- 優點:流程圖模式中的設計操作順暢,還可以直接在畫板中雙擊修改名稱;
- 缺點:第一點產品文案很多地方都表述不準確,彈窗在很多操作場景下的不合理使用;
第二點產品性能問題,很多交互操作過度不自然,轉場太快,無狀態結果的反饋,操作生硬;還有原型設計畫板、元素和屬性面板參數的聯動很差;第三點是項目原型設計中的關于元素相關的設計點,包括圖片的圖層歸屬問題,距離的測量等。
總的來說摹客RP是一款比較專業且實用性很強的的設計協作軟件,他基本兼容了原型設計軟件“Axure”的大部分功能,也適合團隊協作中進行使用和推廣,但隨著市面上的競品越來越多,后續的競爭推廣也會越演越烈,所以個人認為產品應該做好以下兩點,會增加自己產品的優勢;首先工具可以輕量化,注重常用功能的用戶體驗和產品的性能優化。
其次作為一款設計協作軟件,面向的是廣大設計師,產品細節方面的問題特別容易被設計師捕捉。所以需要著重把控這兩點,進行積極的推廣助力,才好抓住設計的心!這里也祝摹客系產品能越做越好!
本文為2022摹客RP原型工具測評大賽的測評文章,如對摹客RP感興趣可點擊體驗鏈接:https://www.mockplus.cn/rp-event/?hmsr=woshipmqianwei
本文由 @Q什伍 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
看問題的廣度與深度,還有寫作結構都學習了。感覺自己的優秀作品獎是靠運氣得來的???♂?,向大佬學習。
你太謙虛了哈哈哈,互相學習哈
大佬,怎么搜不到你的公眾號呀?
公眾號搜“說說體驗設計”哦!
厲害厲害,恭喜兄弟!
謝謝,繼續加油哈哈哈!
很清晰的分析框架,菜雞看完都流淚(╥╯^╰╥)
互相學習哈!加油加油!
終于看到一等獎的文章,respect大佬
感謝感謝!