在內(nèi)容區(qū)上，網(wǎng)頁端和客戶端的框架是保持一致的，都是頂-中-底三層：

1. 頂層：網(wǎng)頁端菜單標(biāo)題下方會展示詳細(xì)的項目和項目集數(shù)量信息，客戶端僅展示標(biāo)題；
2. 中層：展示常用功能，如新建項目或項目集、搜索功能，樣式和布局基本保持一致；
3. 底層：網(wǎng)頁端項目或者項目集支持多種展示方式，且可以通過篩選條件進(jìn)行查找，客戶端僅支持列表展示，不支持篩選條件查找。

2. 原型設(shè)計頁面

原型設(shè)計頁面和Axure的頁面相似度很高，大致可以拆分成四大部分：標(biāo)題和工具欄，左邊功能區(qū)分上下兩層，可以上下收縮拉伸，中間是原型設(shè)計區(qū)域，右邊設(shè)置面板區(qū)主要屬性、交互、備注三個主要功能。頁面的布局符合設(shè)計師使用習(xí)慣，理解成本很低；網(wǎng)頁端和客戶端的也是統(tǒng)一的。

3. 體驗小結(jié)

整體來說，兩端的控制臺主頁面滿足了設(shè)計師基本的使用需求，布局中規(guī)中矩，但兩端細(xì)節(jié)差異還是有很多的，雖然是不影響用戶正常使用，但在實際操作中，設(shè)計師需要花很多時間來適應(yīng)兩端頁面和操作的差異，所以在產(chǎn)品評測過程中一直疑慮：同一套信息和內(nèi)容，為什么要做兩套控制臺頁面樣式來增加設(shè)計師的學(xué)習(xí)和使用成本呢？信息內(nèi)容布局的差異化會影響設(shè)計師能否快速熟悉功能，操作的差異化會影響設(shè)計師的體驗感。

為了驗證統(tǒng)一性的重要性，我找了市面上主流的設(shè)計工具做了對比，如下圖，在多端統(tǒng)一性上（忽略極小的差異化細(xì)節(jié)），他們的共有率達(dá)到了100%，所以足以證明這些產(chǎn)品對統(tǒng)一性的重視程度。

關(guān)于操作臺頁面統(tǒng)一性的優(yōu)化方案如下所示：

優(yōu)化點1：兩端的主頁面?zhèn)冗厵诘男畔⒖蚣芸梢员３忠恢?，首先是logo、用戶賬號信息的位置；其次是導(dǎo)航菜單的數(shù)量，可以讓用戶在兩端之間切換使用時，通過統(tǒng)一性加強(qiáng)用戶對界面的理解

優(yōu)化點2：兩端的右邊操作區(qū)域針對項目和項目集的管理和篩選，展示方式的多樣性應(yīng)該保持同步，包括配置篩選條件也可以同步；

優(yōu)化點3：兩端關(guān)于全部菜單的功能框架的設(shè)計，可以在多級菜單（全部>項目集1>項目集2）和一級菜單（全部）中二選一，復(fù)用一種設(shè)計樣式，降低開發(fā)成本；

優(yōu)化點4：兩端關(guān)于“設(shè)計團(tuán)隊的切換”的設(shè)計，網(wǎng)頁端點擊團(tuán)隊名稱出下拉菜單，進(jìn)行團(tuán)隊切換，客戶端點擊側(cè)邊欄的用戶名，出現(xiàn)次聯(lián)菜單，再找到團(tuán)隊切換列表，兩端可以在組件使用和入口方式的設(shè)計上統(tǒng)一，保證信息內(nèi)容、位置的統(tǒng)一性的前提下，使用可復(fù)用的設(shè)計樣式，降低開發(fā)成本。

原型設(shè)計頁面，功能很全面，使用起來很便捷，整理了如下優(yōu)缺點：

爽點1：如文字元素的屬性設(shè)置點非常多，英文大小寫，首航縮進(jìn)等，可設(shè)置的參數(shù)很多；

爽點2：支持畫板響應(yīng)式布局，選中畫板作為對象時，可以在屬性面板中進(jìn)行刪除；

爽點3：可以創(chuàng)建項目資源庫，包括顏色、文本、組件等設(shè)計資源，設(shè)計更加高效；

問題點1：相對應(yīng)的屬性列表展開顯示后，模塊空間的沒有充分利用；如圓角這個參數(shù)可以選擇百分比的樣式，就需要另起一行；

優(yōu)化方案1：屬性面板可以保留比較常用的屬性參數(shù)，新增加的參數(shù)設(shè)計如果不常用會占據(jù)空間，且在黑色色彩模式下，信息的閱讀效率會收到影響

問題點2：右邊整塊屬性面板不支持自適應(yīng)拉伸，位置是固定的，如元素透明度這個參數(shù)為100%時，數(shù)字也不能夠顯示全。

優(yōu)化方案2：屬性面板增加自適應(yīng)收縮，會讓頁面空間更加靈活。

三、角度2-操作流程

第二個角度主要是從相關(guān)功能的操作使用流程作為切入點去體驗，主要7大核心流程和14個操作小任務(wù)。

1. 新建項目和新建項目集

任務(wù)1：在控制臺頁面找到功能的入口，新建一個名為“自定義頻道”的項目和兩個名為“Biuos1.0”、“蘇寧智能終端”的項目集

客戶端操作示例：在首頁菜單，有個單獨(dú)項目編輯區(qū)域，可以直接點擊進(jìn)行命名和選擇尺寸。在其他菜單下，如果有創(chuàng)建按鈕，均可以點擊，頁面中間會跳出彈窗，直接對項目和項目集進(jìn)行創(chuàng)建編輯。

網(wǎng)頁端操作示例：在相關(guān)的菜單中，只要有創(chuàng)鍵按鈕，就可以進(jìn)行創(chuàng)建編輯，僅支持點擊按鈕-跳出彈窗的途徑。

設(shè)計爽點1：在客戶端，有個很大的項目創(chuàng)建區(qū)域，用戶可以命名，選擇尺寸，很直觀，增加了項目創(chuàng)建的入口；

設(shè)計爽點2：網(wǎng)頁端可以創(chuàng)建項目和項目集，客戶端只能創(chuàng)建項目，雖然沒有統(tǒng)一，但是從使用習(xí)慣的角度思考，這個設(shè)計還是非常好的，項目集是比項目要大的，根據(jù)設(shè)計師使用習(xí)慣，考慮到網(wǎng)頁端的網(wǎng)絡(luò)鏈接，大多數(shù)用戶都會下載客戶端去操作，并且當(dāng)項目責(zé)任人建立好項目集，負(fù)責(zé)相關(guān)模塊的設(shè)計師就可以專注在項目上，避免了亂建項目集，造成混亂；

體驗問題1：兩端的很多基礎(chǔ)導(dǎo)航菜基本都有新建項目或新建項目集按鈕，考慮到用戶在切換不同菜單時，都能提供這個入口，雖然能方便用戶操作，但有一些過度引導(dǎo)；

優(yōu)化方案1：減少過度設(shè)計，菜單應(yīng)匹配相對應(yīng)的信息需求。例如用戶切到我的收藏菜單，需求就是去查看收藏項目，新建項目就是非必要的選擇，加上就會變的強(qiáng)行引導(dǎo)；

體驗問題2：在創(chuàng)建項目時，通過彈窗的方式去進(jìn)行創(chuàng)建編輯，這樣會讓操作流程變得復(fù)雜，而且彈窗中的信息優(yōu)先級不高，創(chuàng)建結(jié)束后也都可以修改；

優(yōu)化方案2：模態(tài)彈窗對用戶的干擾程度很高，創(chuàng)建項目應(yīng)該是比較簡單的操作，不需要強(qiáng)干擾的組件去提示用戶，建議可以直接過度到原型設(shè)計界面。

2. 項目或項目集的移動

任務(wù)2：在控制臺頁面，把項目“自定義頻道”移動歸類到“Biuos1.0”的項目集

客戶端操作示例：項目和項目集僅有列表的展示方式，將項目“自定義頻道”移動至項目集“Biuos1.0”時，需要點擊項目中的操作按鈕，彈出操作列表，選擇移動，跳出彈窗，選擇項目集確認(rèn)，無二次彈窗確認(rèn)。

網(wǎng)頁端操作示例：項目和項目集有列表和宮格兩種展示方式，將項目“自定義頻道”移動至項目集“Biuos1.0”時，需要點擊項目中的操作按鈕，彈出操作列表，選擇移動，跳出彈窗，選擇項目集確認(rèn)，再彈出彈窗二次確認(rèn)。

體驗問題1：網(wǎng)頁端和客戶端移動項目的過程中，第一次都需要有彈窗，選擇項目集分類，但下一步的操作，網(wǎng)頁端使用模態(tài)彈窗讓用戶二次確認(rèn)，確認(rèn)移動成功后有提示。客戶端成功移動成功后，沒有提示。

優(yōu)化方案1：結(jié)合兩端的優(yōu)缺點，首先網(wǎng)頁端避免使用確認(rèn)移動的二次彈窗，減少操作流程，客戶端移動成功后，增加操作提示，提升交互感知。

體驗問題2：項目或項目集不可以直接拖拽進(jìn)行移動管理操作，只能通過按鈕點擊選擇移動選項才能操作，操作比較遲緩。

優(yōu)化方案2：為移動操作增加鼠標(biāo)拖拽功能，更加快速的進(jìn)行項目歸類，效率高。

3. 頁面和畫板管理

任務(wù)4：選中原型設(shè)計頁面的左邊功能區(qū)的【頁面】tab，為“自定義頻道”功能創(chuàng)建若干個頁面，隨機(jī)對頁面進(jìn)行設(shè)置操作（創(chuàng)建、重命名、移動、復(fù)制、刪除、撤銷刪除）

操作示例：點擊「添加」按鈕，可以進(jìn)行頁面創(chuàng)建，選中任一頁面，右擊出現(xiàn)彈框，進(jìn)行選擇重命名、移動、復(fù)制、刪除等操作；雙擊頁面標(biāo)題都可以進(jìn)行頁面名修改，拖拽頁面可以進(jìn)行運(yùn)動歸類，選中頁面點擊設(shè)備刪除鍵，出現(xiàn)彈窗提示是否刪除。刪除后，設(shè)備無快捷鍵撤銷刪功能。

新建和復(fù)制新頁面后，新頁面變?yōu)楫?dāng)前頁面，且有背景底色，但無法使用設(shè)備刪除鍵直接進(jìn)行刪除操作，需再次點擊選中新頁面，讓文字變?yōu)榧儼咨?，才可以刪除文件。

體驗問題1：頁面刪除后沒有進(jìn)行刪除撤銷的快捷鍵“command+z”操作，“撤銷”快捷鍵是設(shè)計師最常用且依賴度很高的操作。

優(yōu)化方案1：增加“撤銷”快捷鍵的使用。

任務(wù)5：選中原型設(shè)計頁面的左邊功能區(qū)的【頁面】tab，使用回收站功能、將“某一頁面”刪除再從找回

操作示例：選中某一頁面，進(jìn)行刪除操作確認(rèn)，點擊回收站按鈕，開始回收模式，找到分頁面，鼠標(biāo)懸停在頁面上，顯示恢復(fù)和刪除按鈕，點擊恢復(fù)按鈕，再彈窗確認(rèn)，頁面恢復(fù)。退出回收站模式，才能顯示當(dāng)前所有頁面。

設(shè)計爽點1：增加“回收站“模式，用戶可以找回頁面，擴(kuò)大了容錯范圍；

體驗問題1：回收站模式退出的按鈕樣式和工具欄的撤銷重合度高，易混淆；其次這里的回收站模式需要開始和關(guān)閉兩種狀態(tài)，整個過程中需要2次點擊操作。

優(yōu)化方案1：回收站對應(yīng)的是頁面，單獨(dú)再加一個tab對于信息內(nèi)容切換會更便捷，省去“回收站”，模式開啟和關(guān)閉的流程。

任務(wù)6：選中原型設(shè)計頁面的左邊功能區(qū)的【頁面】tab，選擇“自定義標(biāo)簽”頁面，切換到【圖層】tab，對頁面中的“默認(rèn)狀態(tài)”畫板中的圖層進(jìn)行順序調(diào)整

操作示例：選中畫板其中一個圖層，然后移動到另一個圖層的上方或下方，調(diào)整圖層順序，但不能進(jìn)行拖拽移動，只有置于頂層和底層的按鈕操作。

體驗問題1：設(shè)計師在制作原型圖時，需要調(diào)整畫板中的圖層順序，置頂或置底的操作不能解決使用者調(diào)整圖層順序的效率問題，移動拖拽能靈活快速的給圖層排序。

優(yōu)化方案1：增加鼠標(biāo)拖拽移動功能，讓圖層位置的移動更加方便。

4. 項目原型設(shè)計制作

任務(wù)7：在“自定義標(biāo)簽”頁面編輯區(qū)進(jìn)行畫板的創(chuàng)建、設(shè)備和尺寸選擇、復(fù)制、命名、屬性設(shè)置

操作示例：工具欄中使用“添加輔助畫板”或者快捷鍵A創(chuàng)建畫板，在原型編輯區(qū)域左下角可以進(jìn)行進(jìn)行設(shè)備和尺寸選擇、使用快捷鍵command+c/v、直接雙擊畫板標(biāo)題可以進(jìn)行重命名、選中畫板后，在右側(cè)功能區(qū)域調(diào)整參數(shù)進(jìn)行屬性設(shè)置。

設(shè)計爽點1：可直接在視圖中雙擊畫板名稱文字，直接選中進(jìn)行修改，不用在圖層頁面找對應(yīng)頁面進(jìn)行名稱修改，圖層的空間有限，當(dāng)畫板數(shù)量超過之后，就需要上下移動來回審查，所以這個設(shè)計細(xì)節(jié)讓操作更加聚焦，對于大批量的畫板名稱修改，很節(jié)省時間。

體驗問題1：畫板設(shè)備和尺寸選擇的優(yōu)先級高于畫板快捷創(chuàng)建，通過鼠標(biāo)懸停的操作方式呼出多級菜單分類，交互的可控性比較差。

優(yōu)化方案1：類比市面上其他產(chǎn)品，基本都是快捷鍵A調(diào)出設(shè)備尺寸選擇，而且大多是在屬性面板使用列表下拉的方式展示?？旖萱I“A”的使用對象可以重新定義，加強(qiáng)快捷創(chuàng)建畫板的優(yōu)先級，重新設(shè)計畫板設(shè)備和尺寸選擇的位置和交互出現(xiàn)方式。

體驗問題2：在復(fù)制畫板時，不支持選中畫板后，使用“option+鼠標(biāo)鍵”快捷操作進(jìn)行復(fù)制拖拽，新畫板不能任意的拖拽到自己想要的位置。

優(yōu)化方案2：增加快捷鍵的使用。

任務(wù)8：在“自定義標(biāo)簽”頁面的畫板中利用工具繪制低保真設(shè)計稿，設(shè)置元素屬性

操作示例：選中自定義頁面，在默認(rèn)狀態(tài)的畫板中對元素文字、形狀、顏色等屬性參數(shù)進(jìn)行設(shè)置。

例1：在畫板中縮放矩形，設(shè)置面板中的寬高參數(shù)沒有變化；

例2：在屬性中將初始矩形外邊框?qū)挾戎祻摹?”變?yōu)椤?”，但頁面中元素沒有變化，仍然是1，只能在點擊非寬度的參數(shù)任意區(qū)域后，寬度數(shù)值的變化在頁面中才能響應(yīng)；

操作示例：將圖片拖入某畫板內(nèi)，圖片位置在畫版的頂部位置，當(dāng)將畫板拖去來，在左邊功能區(qū)的圖層tab中，圖片還在原來畫板頂部顯示，拖動畫版，圖片在畫版外和畫板一起移動。

體驗問題1：兩個例子都是屬性面板和畫板聯(lián)動無響應(yīng)的問題，不管是畫板中的元素聯(lián)動屬性面板的參數(shù)，還是屬性參數(shù)聯(lián)動畫板中的元素，都沒有實時響應(yīng)。尤其是外邊框的寬度值無法實時顯示，這就對設(shè)計的效果很難把控。

體驗問題2：圖片拖進(jìn)和拖出畫板時，圖片圖層的歸屬不清晰。

優(yōu)化方案：這兩個槽點屬于產(chǎn)品的性能問題，可針對性能這個點，加強(qiáng)優(yōu)化。

任務(wù)9：在“自定義標(biāo)簽”頁面的畫板中查看元素與元素，元素與畫板，畫板與畫板的距離，進(jìn)行元素和畫板的距離調(diào)整

使用鼠標(biāo)和鍵盤鍵可以查看“默認(rèn)狀態(tài)”畫板中元素的間隔、與相鄰畫板的間隔，在懸停展示間距的同時去調(diào)整位置距離。

體驗問題1：只能查看同一個畫板中元素之間的距離，無法查看畫板之間的距離，且同畫板中不能在顯示距離間隔的狀態(tài)下，對元素位置進(jìn)行調(diào)節(jié)。

優(yōu)化方案1：增加設(shè)計優(yōu)化，完善距離相關(guān)的測量和位置移動的操作問題，提升設(shè)計體驗和用戶的原型設(shè)計效率

任務(wù)10：在“流程圖”頁面中使用流程模式，為“自定義頻道”功能繪制邏輯流程圖

操作示例：在「流程圖」頁面，在工具欄中打開流程圖模式，為“自定義標(biāo)簽”功能畫一個簡單的邏輯流程圖，梳理業(yè)務(wù)流轉(zhuǎn)的邏輯關(guān)系。

設(shè)計爽點1：產(chǎn)品內(nèi)置了很多流程圖組件，當(dāng)鼠標(biāo)獲取矩形元素的連接線端點后，開始移動至松開鼠標(biāo)結(jié)束，流程組件庫彈窗會自動出現(xiàn)，可以選擇對應(yīng)的矩形組件。并且制作好摹客RP源文件可以和自帶的PRD文檔工具相關(guān)聯(lián)，選擇帶有流程圖內(nèi)容的畫板，直接轉(zhuǎn)化成圖片導(dǎo)入到文檔中，這個聯(lián)動做的相當(dāng)給力。

任務(wù)11：對“自定義頻道”功能的原型項目進(jìn)行保存

操作示例：當(dāng)設(shè)計結(jié)束或中斷時進(jìn)行項目保存時，可以使用保存按鈕或者快捷鍵“command+s”對項目進(jìn)行保存。

體驗問題1：當(dāng)用戶保存后，頁面并無明顯的關(guān)于“項目已經(jīng)被保存或者可以實時進(jìn)行保存項目”的提示；

優(yōu)化方案1：首先用戶不知道的項目保存的時效性，可以使用“Toast”提示用戶。

5. 創(chuàng)建交互demo

任務(wù)12：為“自定義頻道”功能頁面的跳轉(zhuǎn)和設(shè)置保存創(chuàng)建頁面交互事件

操作示例：在當(dāng)前頻道有內(nèi)容的場景下，開啟調(diào)整模式，移動頻道順序，再次確認(rèn)頻道，移動跳到頻道顯示或隱藏功能區(qū)域，為頻道自定義設(shè)置創(chuàng)建交互事件，最后使用彈窗對頻道順序調(diào)整、顯示、隱藏這些操作進(jìn)行數(shù)據(jù)保存；在右邊功能區(qū)的選擇“交互”菜單點擊「添加交互」按鈕，對事件屬性參數(shù)進(jìn)行設(shè)置。

1. 頁面跳轉(zhuǎn)
2. 設(shè)置保存

設(shè)計爽點1：在使用Axure原型工具時，通常一個頁面我們會使用文字描述主要信息和交互操作；例如，在自定義頻道設(shè)計的頁面主要就是標(biāo)題、頻道名稱以及狀態(tài)圖標(biāo)，這是顯性化的信息。

對應(yīng)保存的的操作還有各種隱性信息和操作，比如設(shè)置保存的彈窗，不可操作的提示、網(wǎng)絡(luò)異常的提示等；我們會使用很多靜態(tài)頁面去描述隱形信息和操作。但摹客RP的原型工具支持的主輔畫板的模式，可直接設(shè)計交互轉(zhuǎn)場、提示等隱形操作，更直觀的呈現(xiàn)原型設(shè)計效果。

6. 項目原型設(shè)計預(yù)覽

任務(wù)13：使用播放功能或進(jìn)入摹客協(xié)作模式預(yù)覽“自定義頻道”原型設(shè)計和交互效果

操作示例：在工具欄點擊播放按鈕，預(yù)覽“自定義頻道”功能的原型設(shè)計和交互點擊效果；點擊發(fā)布，進(jìn)行項目分類，進(jìn)入慕客協(xié)作網(wǎng)頁端查看所有頁面和畫板以及交互效果。

體驗問題1：單獨(dú)演示預(yù)覽時，視圖窗口只展示頁面，不展示頁面內(nèi)的畫板；在慕客協(xié)作網(wǎng)頁端可以進(jìn)行查看所有內(nèi)容，當(dāng)使用網(wǎng)頁端查看畫板內(nèi)容的過程中，有多次無法快速找到「畫板」入口的場景，查看畫板的入口不是很容易被注意到。

優(yōu)化方案1：演示預(yù)覽狀態(tài)下，增加“查看畫板”的入口，在慕客協(xié)作的網(wǎng)頁端強(qiáng)化“查看畫板”的入口

7. 項目多人協(xié)作

任務(wù)14：發(fā)送項目或項目集鏈接邀請協(xié)作人，協(xié)作者點開鏈接進(jìn)入原型設(shè)計頁面

操作實例：在操控臺找到“自定義標(biāo)簽”的項目，點擊按鈕找到「成員管理」，跳出彈窗，復(fù)制鏈接，發(fā)給協(xié)作人，協(xié)作者點開鏈接進(jìn)入頁面協(xié)作

體驗問題1：項目管理人分享項目鏈接給協(xié)作者，協(xié)作者點擊鏈接直接進(jìn)入原型設(shè)計頁面進(jìn)行操作編輯，在網(wǎng)頁端從原型設(shè)計頁面返回到操作臺頁面后，再點擊項目，無法進(jìn)入原型設(shè)計頁面；客戶端可以正常操作。

優(yōu)化方案1：打開網(wǎng)頁端重新進(jìn)入頁面的權(quán)限，讓用戶能夠自由進(jìn)入或退出頁面。

8. 體驗小結(jié)

這部分通過最常用的7個交互操作，建立以目標(biāo)為中心的體驗流程，再細(xì)分出了14個操作任務(wù)對產(chǎn)品進(jìn)行體驗說明。操作體驗主要聚焦在統(tǒng)一性、功能設(shè)計、交互操作效率、細(xì)節(jié)設(shè)計。首先在任務(wù)流程中體驗到的爽點設(shè)計，體驗是非常不錯的，其次是針對相關(guān)的一些設(shè)計問題也有描述并提出自己的優(yōu)化建議。

四、角度3：設(shè)計和組件

第三個角度主要是從設(shè)計組件來進(jìn)行體驗，這部分內(nèi)容主要有如下6個體驗點組成。

1. 導(dǎo)航菜單

網(wǎng)頁端和客戶端對于導(dǎo)航菜單（“全部”）組件的結(jié)構(gòu)不一致，網(wǎng)頁端的全部菜單下會展示二級菜單，客戶端沒有；兩端菜單數(shù)量都不相同；

優(yōu)化建議：導(dǎo)航菜單組件結(jié)構(gòu)和數(shù)量統(tǒng)一。

2. 圖標(biāo)

• 網(wǎng)頁端全部菜單的圖標(biāo)和文案語義不匹配，一個是代表“首頁”含義的圖標(biāo)，另一個文案卻使用“全部”文字。
• 網(wǎng)頁端和客戶端的“模版例子”菜單的圖標(biāo)不一致。
• 網(wǎng)頁端的導(dǎo)航菜單圖標(biāo)全是面性圖標(biāo)；客戶端是有面性和線性圖標(biāo)兩種，首頁是面性圖標(biāo)，其他全是線性圖標(biāo)。
• 網(wǎng)頁端和客戶端的“項目”圖標(biāo)列表式展示狀態(tài)下的顏色和設(shè)計形式上不統(tǒng)一，其次項目和項目集的圖標(biāo)的區(qū)分不明顯。

優(yōu)化建議：兩端的頁面相同圖標(biāo)需要保持一致，包括類型，樣式，統(tǒng)一性，減少差異化，關(guān)于圖標(biāo)設(shè)計表意要傳達(dá)精準(zhǔn)一點。

3. 按鈕

新建項目和新建項目集是產(chǎn)品的兩個重要功能，從功能重要程度來說應(yīng)該是要保持一致的，目前設(shè)計明顯是新建項目的優(yōu)先級高于新建項目集，雖然都是用“圖標(biāo)+文字”的按鈕樣式，但圖標(biāo)的樣式過于簡單，且新建文件使用強(qiáng)提示的高亮底色，更能吸引注意力。

競品中，如藍(lán)湖、即時設(shè)計、Figma、Pisxo的功能和摹客RP一樣都有新建文件（項目）和新建文件夾（項目集）功能，競品基本都保持相同的設(shè)計樣式，保證功能優(yōu)先級是一樣的，僅有mastergo雖然按鈕和摹客RP一樣使用強(qiáng)提示按鈕，但它的功能框架設(shè)計和摹客RP不一樣。

它創(chuàng)建文件夾的功能放在左邊菜單的創(chuàng)建團(tuán)隊中，新建文件的按鈕和文件導(dǎo)入是獨(dú)立的，雖然設(shè)計樣式不一樣，新建按鈕也相對突出了，文件導(dǎo)入的按鈕還有動畫效果。

優(yōu)化建議：可借鑒主流的原型工具類的設(shè)計方案，平衡功能的優(yōu)先級，在圖標(biāo)設(shè)計樣式上讓功能更加形象。

4. 彈窗對話框

（1）彈窗樣式設(shè)計的統(tǒng)一性，如新建和刪除項目或項目集時的彈窗按鈕，它并不是特殊使用場景，都僅需要“確認(rèn)”和“取消”簡單操作，但是鼠標(biāo)懸停文字按鈕上的樣式是不一樣的。一種是加淺灰底色，文字沒變化，另一種是改變字體的透明度。

（2）多次彈窗增加了操作流程，如網(wǎng)頁端項目移動時，會有二次彈窗確認(rèn)。

優(yōu)化建議：彈窗的按鈕設(shè)計樣式上可以保持一致，對于產(chǎn)品中的個別功能的操作，建議少用或慎用彈窗組件，縮短操作流程。

5. 文案

（1）文件界面的左邊功能區(qū)的“圖層”菜單中包含畫板和圖層信息，這個標(biāo)題名稱和內(nèi)容不對應(yīng)，表述不精準(zhǔn)。

（2）頁面刪除的彈窗提示文案沒有給出完整且能防錯的的提示，彈窗只提示是否刪除當(dāng)前頁面，并沒有提示用戶如何找回和被刪除文件的去向。

如下例子為操控臺項目刪除和原型設(shè)計的頁面刪除：項目刪除的文案：“確定將此次項目加入回收站”，頁面刪除的文案：“確定要刪除當(dāng)前頁面嗎？”

（3）新建項目和新建項目集兩個按鈕的文案表意不精準(zhǔn)，改為“文件和文件夾”，這樣的表述更簡單明了。

（4）導(dǎo)航收藏菜單名稱不一致，網(wǎng)頁端用“收藏”，客戶端用“我的收藏”，可以統(tǒng)一為“我的收藏”。

優(yōu)化建議：關(guān)于文案部分，主要包括菜單欄、圖標(biāo)、按鈕、彈窗提示文字等應(yīng)用場景，進(jìn)行修改完善。

6. 色彩模式

產(chǎn)品的主色調(diào)很深，沒有淺色色彩模式可以切換，同類的主流產(chǎn)品基本都是默認(rèn)淺色，如即時設(shè)計、Masetrgo、Pisxo等都以默認(rèn)淺色界面，F(xiàn)igma更是支持淺色深色切換；

優(yōu)化建議：因為用戶對顏色的接受和敏感度都不一樣，提供深淺色兩種顏色模式進(jìn)行切換，可以在界面色彩運(yùn)用上滿足不同使用者的需求，若不提供，建議淺色模式，白色在感官上更加干凈、整潔。

7. 體驗小結(jié)

設(shè)計和組件主題包括6個部分，這些在產(chǎn)品評測，是很容易被注意的設(shè)計點，也是產(chǎn)品最基礎(chǔ)的組成元素；它的設(shè)計呈現(xiàn)決定了用戶的好感度，好的設(shè)計是需要通過這些元素來表達(dá)它的設(shè)計原則和理念；組件的設(shè)計和使用也是要合理和克制的；例如導(dǎo)航菜單和圖標(biāo)設(shè)計應(yīng)該在網(wǎng)頁端和客戶端保持一致；文案表述的應(yīng)該精準(zhǔn)、簡單、明了；按鈕和彈窗設(shè)計也可以再克制一點，色彩模式需要干凈簡潔，最大程度的減少對用戶的干擾，提升用戶的粘性。

五、測試總結(jié)

以上就是四周產(chǎn)品測試總結(jié)分享了，這篇測評文章主要是從交互的三個角度：頁面框架、頁面操作流程、頁面組件設(shè)計，通過深度使用和體驗這款產(chǎn)品，從中提煉出一些想法和建議，這里就個人使用體驗做出以下終結(jié)。

1. 產(chǎn)品關(guān)聯(lián)性

摹客RP這款原型設(shè)計工具與視覺、產(chǎn)品的關(guān)聯(lián)性方面設(shè)計的很好：作為一款原型設(shè)計軟件，它的功能很豐富，覆蓋了設(shè)計師做原型設(shè)計的大部分場景，能利用視覺思維發(fā)揮產(chǎn)品優(yōu)勢，在項目協(xié)作，橫向和產(chǎn)品相關(guān)的工作內(nèi)容進(jìn)行關(guān)聯(lián)。

• 在設(shè)計上，這點主要體現(xiàn)它可以像頁面視覺設(shè)計一樣創(chuàng)立組件庫（文本、顏色、組件），團(tuán)隊可以組件共享，大大的提升的高保真設(shè)計原型的設(shè)計協(xié)同效率；
• 在產(chǎn)品上，可以和，摹客PRD文檔工具進(jìn)行關(guān)聯(lián)能夠?qū)隦P源文件進(jìn)行資源利用。

2. 功能設(shè)計

• 超預(yù)期的功能：開啟流程圖模式，產(chǎn)品內(nèi)置了很多流程圖組件，選擇組件的設(shè)計方式非常的超預(yù)期，使用起來很便捷，操作更順暢，流程圖還可以直接導(dǎo)入到摹客PRD文檔工具中。
• 實用性的功能：主頁面中的回收站菜單和原型設(shè)計頁面左邊的回收站模式，回收站設(shè)計的本質(zhì)是幫用戶避免誤操作，挽回?fù)p失；不管是在操控臺的找回項目或者項目集，還是在原型設(shè)計頁面對頁面進(jìn)行找回的使用場景中，回收站這個功能和模式設(shè)計都能很好的容錯；
• 過度設(shè)計的功能：例如兩端的操控臺主頁面，很多基礎(chǔ)導(dǎo)航菜單都有重復(fù)的新建項目和項目集按鈕，菜單導(dǎo)航應(yīng)該有相對應(yīng)的內(nèi)容；不應(yīng)該站在“自己以為的用戶方便”的角度，去增加重復(fù)的設(shè)計。

3. 統(tǒng)一性差

這一點在產(chǎn)品體驗中感覺是十分明顯的，設(shè)計工具軟件，基本都有網(wǎng)頁端和客戶端的，控制臺頁面都不會進(jìn)行差異化設(shè)計，所以當(dāng)?shù)谝淮卧诓煌舜蜷_摹客RP控制臺頁面時，呈現(xiàn)出的是不一樣的內(nèi)容，我的第一印象是：有這么多不一樣的地方啊，我要花點時間再看看對比下？我剛才的那些操作入口在哪里??？

• 布局：在“頁面框架”已經(jīng)有提及過，包括控制臺頁面的布局，側(cè)邊菜單欄的設(shè)計，項目和項目項目集的展示方式，客戶端都有不小的差異；
• 操作：如項目移動的操作，在網(wǎng)頁端需要二次彈窗提示，客戶端就僅需要一次提示；
• 功能：如多人協(xié)作，網(wǎng)頁端和客戶端的功能操作邏輯也不一樣，點擊鏈接，網(wǎng)頁端進(jìn)入頁面再退回控制臺，重進(jìn)原型設(shè)計頁面就被禁止了；客戶端可以正常操作。

4. 交互操作效率

在交互操作上產(chǎn)品要有暢通感，即操作起來夠舒服，能夠給予操作有效提示，能夠在進(jìn)行任務(wù)操作時有效率；

• 流程和組件：控制臺移動項目的交互操作應(yīng)是一個極簡單的操作，但實際產(chǎn)品中使用了強(qiáng)制性的模態(tài)彈窗和2次操作彈窗進(jìn)行確認(rèn)，操作步驟多且干擾程度很強(qiáng)。
• 交互方式：產(chǎn)品有一些比較實用的交互方式?jīng)]有被應(yīng)用，如拖拽移動的操作，在控制臺頁面項目和項目集不能拖拽歸類，在原型設(shè)計頁面中畫板中的圖層不能拖拽移動；
• 快捷鍵：主要集中在撤銷、復(fù)制等操作；在原型設(shè)計頁面，如刪除的頁面不能使用快捷鍵“command+z”撤回，如選中畫板后，不支持使用“option+鼠標(biāo)鍵”進(jìn)行脫拖拽；如使用快捷鍵“a”畫板快捷創(chuàng)建的邏輯。

5. 細(xì)節(jié)設(shè)計

在摹客RP體驗過程中，注意到很多設(shè)計細(xì)節(jié)，有很多不錯的地方，也有很多需要優(yōu)化完善的設(shè)計點，如下所述；

• 優(yōu)點：流程圖模式中的設(shè)計操作順暢，還可以直接在畫板中雙擊修改名稱；
• 缺點：第一點產(chǎn)品文案很多地方都表述不準(zhǔn)確，彈窗在很多操作場景下的不合理使用；

第二點產(chǎn)品性能問題，很多交互操作過度不自然，轉(zhuǎn)場太快，無狀態(tài)結(jié)果的反饋，操作生硬；還有原型設(shè)計畫板、元素和屬性面板參數(shù)的聯(lián)動很差；第三點是項目原型設(shè)計中的關(guān)于元素相關(guān)的設(shè)計點，包括圖片的圖層歸屬問題，距離的測量等。

總的來說摹客RP是一款比較專業(yè)且實用性很強(qiáng)的的設(shè)計協(xié)作軟件，他基本兼容了原型設(shè)計軟件“Axure”的大部分功能，也適合團(tuán)隊協(xié)作中進(jìn)行使用和推廣，但隨著市面上的競品越來越多，后續(xù)的競爭推廣也會越演越烈，所以個人認(rèn)為產(chǎn)品應(yīng)該做好以下兩點，會增加自己產(chǎn)品的優(yōu)勢；首先工具可以輕量化，注重常用功能的用戶體驗和產(chǎn)品的性能優(yōu)化。

其次作為一款設(shè)計協(xié)作軟件，面向的是廣大設(shè)計師，產(chǎn)品細(xì)節(jié)方面的問題特別容易被設(shè)計師捕捉。所以需要著重把控這兩點，進(jìn)行積極的推廣助力，才好抓住設(shè)計的心！這里也祝摹客系產(chǎn)品能越做越好！

本文為2022摹客RP原型工具測評大賽的測評文章，如對摹客RP感興趣可點擊體驗鏈接：https://www.mockplus.cn/rp-event/?hmsr=woshipmqianwei