在開始一個項目之前，我門要確定幾件事

2010-02-15 商城開發(fā)專題

在開始一個項目之前，我要確定幾件事：

我想完成什么？

無論原型是用于用戶測試還是將概念構(gòu)思化，使我的想法得到傳播或從測試中獲得見識所需的最少工作量是多少？我不只是懶惰；），這有助于確定所需的必要交互，動畫和屏幕。

您花在設(shè)計上的時間越多，您所獲得的聯(lián)系就越多。附件越多，您進(jìn)行必要更改的可能性就越小。

讓我們以上面的原型為例。

我當(dāng)時在一個新項目上工作，我想探索一種基于紙牌的布局，這種布局在各州之間帶有“改組”動畫。我勾畫出我想提出的基本想法，并將其作為起點。

如果您看一下完成的原型，則在每個步驟中只有第一張卡是可單擊的。沒有回退的方法，沒有懸停狀態(tài)，最后一個屏幕中的內(nèi)容不完整，并且像素也不完美。這些都不是傳達(dá)我的想法所必需的，因此我沒有花時間包括他們。Framer幾乎可以做任何事情，但這并不意味著您應(yīng)該嘗試在原型中做所有事情。

使用Andreas出色的ViewController模塊創(chuàng)建UI流程

您可以使用ViewController Sketch插件直接在Sketch中創(chuàng)建UI流程?？焖賹⒛脑O(shè)計變成可點擊的原型，而無需編寫代碼。

這非常適合將您的工作介紹給利益相關(guān)者，而且非常容易做到。您可以演示交互式原型或共享托管的Framer項目URL，而不用瀏覽帶有十幾個畫板或.pdf的Sketch文件。

根據(jù)我要完成的工作，我可能最終會為諸如懸停效果，動畫和文本輸入之類的代碼編寫一些代碼，以增加真實感和交互性。再次，作為一名設(shè)計師，決定需要什么才能使您的想法得到傳播并正確實施。

查看Andreas的“ 使用Sketch and Framer創(chuàng)建UI流程”一文，以了解有關(guān)該插件的更多信息。

我認(rèn)為在Framer中真正流行移動原型的原因有很多，其中之一就是微交互在移動設(shè)備上似乎更為普遍。但這不是必須的！我認(rèn)為作為Web的設(shè)計師可以更好地使我們的工作更具動感，而Framer確實擅長于此。

這只是我使用團隊中的設(shè)計師已經(jīng)完成的Sketch文件進(jìn)行快速交互的一個簡單示例。探索這種交互需要幾分鐘的時間。

當(dāng)然可以，但為什么不只是編碼呢？

作為前端開發(fā)人員，我的許多項目最終都將以編碼原型結(jié)束。然后，我將使用此原型作為基礎(chǔ)，將前端代碼編寫到產(chǎn)品中，并進(jìn)行側(cè)面工程設(shè)計。那么，為什么不從一開始就編寫代碼呢？

正如我前面提到的，速度。通過將它們從Sketch導(dǎo)入Framer，我可以快速充實我或其他設(shè)計師已經(jīng)提出的想法。這對于設(shè)計過程的早期階段非常有用，您可以在其中探索想法并快速實施反饋。我可以快速移動代碼，但是Framer將其帶入了一個新的高度。

另一個原因是自由。我用Framer編寫的所有代碼都將被丟棄的簡單事實實際上很不錯。它使我可以嘗試其他我不會嘗試的事情，并使我的代碼更加寬松。我可以花15分鐘探索一個想法，然后毫無保留地將其丟棄。

一些提示和技巧

您（或您與之合作的設(shè)計師）可能必須以不同的方式設(shè)置Sketch文件。

對圖層進(jìn)行分組。不在組中的圖層將被忽略

避免在組名中使用空格

Sketch中的隱藏圖層仍會導(dǎo)入，但其可見性將設(shè)置為false。

為您的畫板創(chuàng)建簡單，唯一的名稱

畫板末尾的減號（-）會將其排除在導(dǎo)入到Framer中之外

展平Sketch中任何將保持靜態(tài)的圖層。這將縮短項目的加載時間，在創(chuàng)建更高級的原型時尤其如此。您可以通過在Sketch的圖層末尾添加一個星號（*）來實現(xiàn)。

值得花一些時間與團隊中的設(shè)計師一起討論如何設(shè)置草圖文件以最適合工作流程以及最適合團隊的方法。

將Sketch文件導(dǎo)入Framer時，您會看到類似以下內(nèi)容：

# Import file "design" sketch = Framer.Importer.load("imported/design@1x")

用$替換草圖，現(xiàn)在您可以使用$來引用草圖圖層，從而使自己免于寫草圖一遍的次數(shù)：

$ = Framer.Importer.load("imported/design@1x")

將“普通光標(biāo)”代碼段用于普通鼠標(biāo)指針：

document.body.style.cursor = "auto"

我將設(shè)計導(dǎo)入@ 2x，然后按比例縮小，因此它們特別清晰。注意，這似乎與上面提到的ViewController模塊不兼容。

杭州網(wǎng)站建設(shè)

Sketch和Framer為Web使用不同的默認(rèn)畫板/設(shè)備。草圖使用1440×1024，而成幀器使用1440×900。我選擇1440×900。不過，不要以為您只能將高度限制為900像素，而是可以在Framer中輕松創(chuàng)建可滾動頁面。

上一篇：功能齊全的UI，并且吸引微交互，共情的內(nèi)容尤為重要返回觀點列表下一篇：網(wǎng)站必須快速運行，以降低跳出率

本文標(biāo)簽：

本文地址： http://www.bmwdream.cn/a/1294.html

相關(guān)專題

電商/商城開發(fā)
杭州派迪科技為高端客戶提供商城開發(fā)建設(shè)咨詢策劃，商城官網(wǎng)設(shè)計，商城建設(shè)開發(fā)服務(wù)，以國際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端商城開發(fā)定制、策劃、設(shè)計、互動與制作
查看詳情
微信公眾號開發(fā)
杭州派迪科技微信公眾號開發(fā)，為全國企業(yè)提供微信公眾號商城、H5、功能系統(tǒng)開發(fā)，如您需要找專業(yè)的公眾號開發(fā)團隊，委托第三方公司開發(fā)公眾號菜單及網(wǎng)頁內(nèi)容請聯(lián)系派迪科技
查看詳情
小程序開發(fā)
杭州派迪科技專業(yè)小程序開發(fā)，為企業(yè)提供微信小程序開發(fā),包括小程序商城、小程序應(yīng)用及其他平臺,可根據(jù)客戶需求進(jìn)行定制開發(fā),提供源代碼,可二次開發(fā),可申請軟件著作權(quán),歡迎咨詢。我們以用戶為中心的程序功能豐富、直觀且性能極佳。我們以清晰的業(yè)務(wù)目標(biāo)視圖制作您的項目目的地，并確保它支持用戶訪問體驗?？稍诳缭O(shè)備上產(chǎn)生無縫的全渠道體驗，應(yīng)用程序具有豐富的 UI/UX、規(guī)范化的數(shù)據(jù)庫和強大的框架，可提供更好性能。
查看詳情
在線教育
查看詳情
APP/應(yīng)用平臺開發(fā)
杭州派迪科技專業(yè)的app開發(fā)平臺,9年開發(fā)經(jīng)驗,專注app開發(fā)、app軟件開發(fā)、手機app制作為教育行業(yè)、檢修行業(yè)、商城電商系統(tǒng)等APP提供過全程策劃及開發(fā)
查看詳情