動(dòng)畫設(shè)計(jì)的規(guī)范與必要性

2010-02-15 網(wǎng)頁(yè)設(shè)計(jì)

對(duì)我來(lái)說(shuō)，關(guān)鍵的事情之一是始終在原型中準(zhǔn)備好所有交互。在與隊(duì)友進(jìn)行的小型會(huì)議或展示一些特殊流程的過(guò)程中，我通常會(huì)在最終決賽的途中擁有3–5個(gè)原型。我傾向于在一個(gè)畫板上準(zhǔn)備Sketch中的所有狀態(tài)，然后復(fù)制這些畫板以在導(dǎo)出時(shí)準(zhǔn)備好每個(gè)狀態(tài)。

最好在設(shè)計(jì)的各個(gè)部分中添加注釋，以進(jìn)一步擴(kuò)展規(guī)范，以便每個(gè)文案和對(duì)話框都能按要求工作，即使是文案撰稿人也可以輕松地檢查真實(shí)像素和流。

1. QUICKTIME視頻>注釋

當(dāng)我不在環(huán)聊上向團(tuán)隊(duì)或客戶展示內(nèi)容時(shí)，我會(huì)發(fā)送一個(gè)截屏視頻，介紹我如何瀏覽原型并解釋我所設(shè)計(jì)的一切。對(duì)于任何演講之前的我來(lái)說(shuō)，這都是對(duì)我的一個(gè)很好的確認(rèn)，我知道我決定設(shè)計(jì)的任何問題的答案以及可能的奇特互動(dòng)。在遠(yuǎn)程團(tuán)隊(duì)中工作時(shí)，也可以很好地使用它。每個(gè)人都可以隨時(shí)重播整個(gè)交互思維。

2.動(dòng)畫

可以使用After Effects或Principle作為最后的修飾。很好地解釋您希望如何移動(dòng)。

3.風(fēng)格指南

工程師的另一個(gè)關(guān)鍵點(diǎn)是要了解事物在不同情況下的反應(yīng)。考慮輸入的錯(cuò)誤狀態(tài)或顯示錯(cuò)誤消息的位置。同樣，提交按鈕的禁用狀態(tài)將如何顯示，放置微調(diào)框的位置等。

工程師們可以通過(guò)Lego塊中的Sketch文件，一一遍歷您的Symbols畫板和樣式元素，甚至可以開始對(duì)所有屏幕進(jìn)行編碼，這非常容易。

由于我們已經(jīng)完成了將設(shè)計(jì)移交給工程師的工作，因此我們可以專注于過(guò)程的最后一部分-測(cè)試我們的決定！

4. INSPECTLET / HOTJAR

將設(shè)計(jì)轉(zhuǎn)變?yōu)榭蛇\(yùn)行的代碼后，請(qǐng)不要忘記包含您的Inspectlet或HotJar JS代碼片段?？吹接脩羧绾螢g覽我們的儀表板或他們?cè)谖业耐顿Y組合頁(yè)面上正在做什么，我總是很興奮（或沮喪）。Inspectlet在捕獲您的所有用戶會(huì)話方面都非常出色。同樣適用于較大的項(xiàng)目。

它帶有簡(jiǎn)單的“ /頁(yè)面”過(guò)濾功能，可幫助您觀看特定功能或流程的會(huì)話。

5. MIXPANEL

Mixpanel對(duì)于驗(yàn)證我們的目標(biāo)（在過(guò)程開始時(shí)設(shè)置的目標(biāo)）非常有用。Mixpanel幫助查看有多少用戶完成了特定的流程。在設(shè)置帳戶之前，有多少用戶掉線了。從主要目標(biāo)網(wǎng)頁(yè)到商店以及我們最有價(jià)值的產(chǎn)品有多少人。

6. GOOGLE ANALYTICS（分析）

我無(wú)法編寫大型代碼，但至少可以使用CSS文件和簡(jiǎn)單的代碼。最近，我很想了解用戶單擊的位置以及查看Hotjar熱圖的過(guò)程，因此，我決定也要在Google Analytics（分析）中設(shè)置基本的點(diǎn)擊跟蹤器。您也可以輕松跟蹤用戶在您網(wǎng)站上的每一次點(diǎn)擊。

這有助于我輕松地勾勒出用戶的行為。例如，我發(fā)現(xiàn)人們?cè)诮榻B文本中高亮顯示的鏈接上使用網(wǎng)站導(dǎo)航的次數(shù)是原來(lái)的5倍。遺憾的是，它不計(jì)算來(lái)自AdBlock用戶的點(diǎn)擊次數(shù)。

7.對(duì)講機(jī)

當(dāng)我們就最初的流程達(dá)成一致時(shí)，我們所談?wù)摰氖瞧渲幸徊糠至鞒虖挠脩羰盏絹?lái)自對(duì)講機(jī)的電子郵件。我們的責(zé)任是確保所有副本和消息本身有意義，并且實(shí)際上對(duì)訪問者有所幫助。確保您的電子郵件將用戶引導(dǎo)到您的敏銳結(jié)果，并始終嘗試提供特定的支持文章以及如何繼續(xù)進(jìn)行此流程的信息。

8.丟下DRIBBBLE

從我所學(xué)到的知識(shí)以及過(guò)去4年中我的設(shè)計(jì)如何變化，我已經(jīng)了解到Dribbble不一定是您要為其創(chuàng)建設(shè)計(jì)的地方。我一直致力于在性感的個(gè)人資料圖片上使用漂亮的像素，但這并不是真正的用戶需要并且不會(huì)使用的像素。

這是一個(gè)示例，在左側(cè)，您會(huì)看到我為Dribbble設(shè)計(jì)的內(nèi)容。在右側(cè)，當(dāng)我花一些時(shí)間看著人們編輯個(gè)人資料并意識(shí)到我的愿景無(wú)法滿足他們的需求時(shí)，您將看到我設(shè)計(jì)的東西。

您可能會(huì)收到500份關(guān)于杭州網(wǎng)站建設(shè)或滑動(dòng)比薩餅的瘋狂動(dòng)畫的點(diǎn)贊，但真正重要的是您的用戶將找到如何管理公司電子郵件的發(fā)送頻率或如何過(guò)濾其績(jī)效分析。

上一篇：與用戶溝通設(shè)計(jì)定稿的決定是設(shè)計(jì)的第一步返回觀點(diǎn)列表下一篇：設(shè)計(jì)始終是一個(gè)持續(xù)的過(guò)程

本文標(biāo)簽：

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

相關(guān)專題

品牌官網(wǎng)設(shè)計(jì)
杭州派迪科技為高端客戶提供品牌官網(wǎng)咨詢策劃，品牌官網(wǎng)設(shè)計(jì)，品牌官網(wǎng)建設(shè)開發(fā)服務(wù)，以國(guó)際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端企業(yè)網(wǎng)站定制、策劃、設(shè)計(jì)、互動(dòng)與制作
查看詳情
大策略營(yíng)銷門戶網(wǎng)站
杭州派迪科技有自己的營(yíng)銷型網(wǎng)站CMS系統(tǒng)，適合白帽SEO網(wǎng)站。特別對(duì)大策略的營(yíng)銷型門戶網(wǎng)站制作有一定的經(jīng)驗(yàn)，曾經(jīng)為上海天擎外貿(mào)行業(yè)網(wǎng)站、浙江兆龍營(yíng)銷型門戶、先臨三維門戶營(yíng)銷網(wǎng)站提供全程的技術(shù)支持及SEO優(yōu)化指導(dǎo)
查看詳情
集團(tuán)/上市公司網(wǎng)站
杭州派迪科技為杭州本地集團(tuán)公司提供網(wǎng)頁(yè)設(shè)計(jì)、制作、開發(fā)服務(wù)，為集團(tuán)公司網(wǎng)站建設(shè)提供了響應(yīng)式、營(yíng)銷型、品牌型、門戶型網(wǎng)站建設(shè)需求，歡迎廣大集團(tuán)公司客戶咨詢
查看詳情
外貿(mào)網(wǎng)站建設(shè)
杭州派迪科技為高端客戶提供外貿(mào)網(wǎng)站咨詢策劃，外貿(mào)官網(wǎng)設(shè)計(jì)，外貿(mào)官網(wǎng)建設(shè)開發(fā)服務(wù)，以谷歌搜索引起算法為基礎(chǔ)，為各行業(yè)外貿(mào)公司提供高端企業(yè)外貿(mào)網(wǎng)站定制、策劃、設(shè)計(jì)、互動(dòng)與制作
查看詳情
企業(yè)網(wǎng)站建設(shè)
高端專業(yè)、令人印象深刻的用戶界面、易于訪問——企業(yè)網(wǎng)站必須反映一切，因?yàn)榕傻峡萍荚谶@里提供幫助，憑借精湛的技術(shù)、豐富的經(jīng)驗(yàn)、與客戶的持續(xù)溝通以及對(duì)每一個(gè)細(xì)節(jié)的關(guān)注，我們確保在快速的周期時(shí)間內(nèi)提供優(yōu)質(zhì)的服務(wù)。
查看詳情
半定制網(wǎng)站
杭州派迪科技模板網(wǎng)站建設(shè)專題_各行業(yè)方案專題欄目提供各行業(yè)產(chǎn)品適合的網(wǎng)站建設(shè)方案,幫助企業(yè)了解派迪科技建站效果等信息,您可以通過(guò)本站了解各行業(yè)網(wǎng)站建設(shè)方案,如需要獲取本行業(yè)定制網(wǎng)站建設(shè)方案,可以聯(lián)系在線客服或撥打電話咨詢
查看詳情