墨刀原型設計——ClubSphere

拉绒發表於2024-05-09

一、使用原因
此款軟體在大二上學期軟體工程導論課程的小組作業我就已經使用過。由於當時是組長,最後的期末作業是以小組為單位彙報ppt,但是我們透過寫之前的分析報告,其實腦海裡就已經形成了對我們軟體的一些介面。但由於我們能力和時間受限,不能使用程式碼開發出來一款完全符合我們預期的軟體,我就要在網上搜尋各種推薦製作軟體原型的網站,其實在我在網上查詢的時候還不知道我做的這個東西叫原型哈哈。
二、同款軟體主要缺點
透過對比axure和mockplus,由於我認為正版的Axure售價高,我們主要還是想使用免費的軟體。動態皮膚和中繼器較為複雜,要完全弄懂也需要一定的時間成本,學習成本高。Axure只支援在本地設計。
mockplus不支援滑鼠懸停,手機預覽不是很清楚,日曆表元件是靜態的。表格功能還需要完善。Mockplus對於一些過於複雜的功能,比如:判斷和變數,是不支援的。所以在使用者體驗上會造成影響。也不支援手勢互動,無法透過其設計製作一些較為精細的操作,而且設計介面不夠美觀。此外,對於產品文件的支援,也有不足。
經過嘗試各種不同的製作原型的網站,墨刀是最適合我的。
三、墨刀的特點
1、它操作效率高,易於上手。並且在這個AI的大環境下,它也提供了AI生成原型,AI文字助手,AI智慧填充,AI生成元件。
image

這幾個功能一定程度上方便了我們,但他只能生成一些基礎的簡單的介面,也會由於我們表達不夠準確生成不出來我們想要的效果。
2、它的動效也十分豐富。它還支援團隊協作,多人同時線上編輯,分享二維碼到微信等十分方便。可自動生成頁面流程圖。
image

3、專為移動端產品原型設計而生。基本上能滿足移動端產品原型的設計要求並且系統控制元件都是基於APP,以及系統平臺IOS和安卓,因此在裡面可以首先選擇相應的裝置佈局,減少了不少不必要的工作環節。
4、場景多元化
比如在以後我們設計網站小程式的準備工作時也可以使用此網站,它還可以製作後臺、H5頁面、視覺化大屏、工業HMI這些不常見的原型製作。可見他的使用場景非常廣泛。
image
5、雲端儲存,實時手機預覽,多種手勢,頁面切換特效等多種功能!另外,墨刀能夠快速建立頁面連線,獨創的拖拽連線方式,讓頁面間的連線關係清晰呈現出來。
雖然在一開始使用它的時候也會出現一些錯誤,比如畫布大小不一致,執行到真機尺寸與真機不匹配,透過檢視網上的教程已經基本能夠掌握此軟體的使用方法。一番對比下來他的頁面比較整潔,並且有現成的模板,圖示也比較豐富,基本能滿足我想達到的效果。
6、批次完成規範化設計、後臺原型效率翻倍
主要體現在他有強大的母版例項,同一個元件(組合)在多個頁面多處都需要用到,但是當後期需要修改時,你想一次性修改所有這樣的元件。此時就可以利用墨刀的“母版”了。母版具備以下功能與特點:
1)儲存重複元素:墨刀支援將任何元件,無論是靜態還是動態,轉化成母版(master)。可以將經常使用的元素轉化為母版,以便在多個頁面和畫布中重複使用。
2)建立多個例項:可以將母版直接拖動到畫布中;在畫布中建立的母版副本,即為例項,與母版間存在關聯性,可以實現與母版的同步更新。
3)批次更新:母版的特點是具備“繼承性”:只要改動母版,那麼它所有的例項(instance)都能同步更新改動。
使用方法:選中某個元件右鍵選單點選轉換為母版就可以複用了。
image
7、清晰梳理網站結構
他很好地使用了腦圖梳理網站sitemap,更加清晰地讓使用者梳理自己的思路,製作出更加嚴謹的原型。並且還能透過畫流程圖來讓使用者更加明確頁面跳轉的條件。
image
image

8、同時也提供了大廠資源,方便使用者使用更優秀的元件。海量圖示供使用者選擇。
image

四、ClubSphere(社團交流管理app)的原型
1.功能:
讓使用者更加清楚地瞭解本校社團資訊,社團成員及時收到社團相關資訊,讓跨校活動舉辦的更加精彩。同時也為社團宣傳提供了一個專門的平臺。
2.主要介面及說明
1)登入註冊介面
介面組成:包括手機號、密碼輸入框;位置可以直接手動輸入也可以下拉進行尋找。左側批註為了提高介面可讀性。
前置條件:使用者尚未註冊賬號/已註冊可登入
後置條件:成功註冊/登入後跳轉主頁。
image
2)主頁
介面組成:頂端搜尋欄、上側新增輪播圖元件、中間部分是釋出的社團宣傳資訊,使用者也可以釋出社團資訊。
前置條件:已經登入未加入社團不可釋出社團資訊
後置條件:可進行檢視/搜尋社團活動資訊。
image
3)訊息
介面組成:選擇了訊息頁面,又自行新增了未打卡的任務,有一點和機型尺寸不匹配。
前置條件:已登入的使用者。
後置條件:可進行簡單交流並且檢視任務。
image
4)附近
介面組成:有附近高校的按鈕
前置條件:已登入的使用者。
後置條件:可檢視附近高校社團資訊
image
5)個人資訊
介面組成:頭像元件、瀏覽記錄、線上客服等元件
前置條件:已登入的使用者。
後置條件:可檢視/編輯個人基礎資訊
image
五、總結
任何軟體都有自己的優缺點,找到適合自己的軟體才是目的。此原型主要秉承頁面簡潔,使用者上手容易,沒有其他冗餘功能,並且能夠保護個人隱私。具有實時性、個性化推薦等功能。

相關文章