您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

超周全!一個完備的交互設(shè)計稿有哪些必備元素?

交互稿是交互設(shè)計師的重要產(chǎn)出。在現(xiàn)實工作中,交互設(shè)計師的重要職責(zé)就是根據(jù)產(chǎn)品提出的不同需求,用交互稿的情勢給出交互方案。而且,交互方案會在產(chǎn)品、UI、開發(fā)、測試同窗中流轉(zhuǎn),因此也成為他們評判一個交互設(shè)計師能力的緊張依據(jù)。因此可以如許說,交互方案質(zhì)量的高低,會成為一個交互設(shè)計師能力高低的緊張表現(xiàn)之一。

要想畫出高質(zhì)量的交互稿,一方面,要使用精確、高效的方法對需求進行設(shè)計分析,然后依據(jù)分析中形成的設(shè)計思路來進行設(shè)計;另一方面,交互稿中必要具備完整的結(jié)構(gòu),以表現(xiàn)交互設(shè)計師的專業(yè)性。下面,我們來看看如何能保證交互稿的完整性,防止信息的遺失。

交互稿的「目標用戶」

  • 要講交互稿,我們先來看看交互設(shè)計師的工作流程:
  • 交互設(shè)計師從產(chǎn)品經(jīng)理那里接到需求,跟產(chǎn)品討論之后,首先必要對需求進行設(shè)計分析。
  • 在分析之后,就可以開始畫交互稿了。
  • 交互稿完成之后,要把它交接給UI的同窗進行界面設(shè)計,再然后是給開發(fā)的同窗進行開發(fā)、測試的同窗進行測試。

從這里可以看出,交互稿文檔的重要「目標用戶」是產(chǎn)品、UI、開發(fā)和測試。其實細心想想,交互設(shè)計師的職責(zé),就是把一個功能給「說清楚」:

  • 產(chǎn)品同窗必要知道這個交互稿是否包含了所有的功能點。
  • UI同窗必要知道這個功能都包含哪些界面,每個界面的元素都有什么,元素的狀況都有什么。
  • 開發(fā)、測試同窗必要知道功能的流程是什么,點擊了網(wǎng)頁的元素會有怎樣的反應(yīng)。

所以,以上這些信息都必須包含在交互稿中。曉暢交互稿的目標用戶對于畫出高質(zhì)量的交互稿十分緊張。

交互稿的必備信息

上面我們提到交互設(shè)計師產(chǎn)出的交互稿是給誰看的。我們來總結(jié)一下,上面提到的交互稿中必須包含的信息有:

  • 界面顯現(xiàn)完備的流程。
  • 界面以及界面中的元素顯現(xiàn)需求的所有功能點。
  • 界面中元素的各種狀況。
  • 元素操作后的結(jié)果。

對于第1點顯現(xiàn)完備的流程,假如這個功能比較復(fù)雜,流程比較長或者流程中邏輯比較多,則可以附上流程圖,方便產(chǎn)品、開發(fā)、測試同窗理解;而對于一樣平常相對簡單的功能,依據(jù)你使用的交互稿的作圖工具,分以下兩種情況:

假如你使用的是Sketch,那么可以把所有的界面都平鋪在一張圖里,UI、開發(fā)的同事通過圖中的重要界面就可以get到流程;假如你使用的是Axure,建議Axure里的一個網(wǎng)頁只顯現(xiàn)一個界面或分支流程(益處是可以充分顯現(xiàn)一個界面或分支流程的各種狀況,顯現(xiàn)十分清晰),此時,流程是通過Axure左邊的樹狀結(jié)構(gòu)來顯現(xiàn)的,如下圖:

△ 樹狀結(jié)構(gòu)示例

對于第2、3、4點,我們可以通過遍歷的方法來走查流程和界面。遍歷的方法,就是從頭到尾看一遍本身的交互稿,細致其中是否包含了需求中所有的功能點;每個界面中的每個元素,假如用戶點擊了,它會有什么反應(yīng)(顏色是否改變?是否必要動效?等等)?點擊之后去到哪個網(wǎng)頁?假如沒有網(wǎng)絡(luò)該顯現(xiàn)什么?這里為大家總結(jié)一下:

  • 按鈕、圖標一樣平常就包含三個狀況:默認態(tài)、點擊態(tài)和點擊之后的狀況。
  • 用戶操作后可能發(fā)生的非常情況:無相應(yīng)、無網(wǎng)絡(luò)、空數(shù)據(jù)、大量數(shù)據(jù)、網(wǎng)絡(luò)慢、是否有緩存、數(shù)據(jù)過期、狀況的改變(如換城市)、首次使用(新手指導(dǎo))。

這里給大家舉一個之前做的案例(如下圖)。在這個例子中,左邊的樹狀結(jié)構(gòu)反映了重要的流程。因為該需求流程中設(shè)計的邏輯較多,因此在最后附上了「流程圖」這個模塊,方便開發(fā)和測試的同窗。在網(wǎng)頁中,只顯現(xiàn)了「我的宜定盈詳情」這個網(wǎng)頁的各種狀況和操作后的效果。

交互稿的附屬信息——項目概述

在交互稿的第一頁,可以加上「項目概述」這個主題,重要展示該需求的基本信息和迭代說明。增長項目概述這一頁,一方面可以記錄交互的修改,在發(fā)生題目的時候方便追溯;另一方面讓交互稿顯得更專業(yè),是提拔交互稿氣場的好方法。

△ 項目概述示例

交互稿的附屬信息——設(shè)計分析

有一些需求,假如需求自己比較重大,涉及到的人員比較復(fù)雜,可以在交互稿中加入設(shè)計分析的部分。這可以幫助大家更好地理解你的交互稿是如何被設(shè)計出來的。因為是放在設(shè)計稿里,而不是一個專門的必要展示設(shè)計分析的PPT,因此設(shè)計分析里只必要放入最核心的信息就好,包括:場景分析、產(chǎn)品目標、用戶目標,比如下面這個例子:

△ 設(shè)計分析示例

以上為大家總結(jié)了一份完整的交互稿應(yīng)該包含的要素,盼望對大家有幫助。

這里也附上目標導(dǎo)向設(shè)計法的鏈接,教你如何提拔設(shè)計思維:《一招教你讓交互方案更靠譜!超好用的目標導(dǎo)向設(shè)計法》。

作者最近開了一個小密圈,與通俗的小密圈不同,博主的小密圈不僅有問答功能,還有6個專題分享,幫助你體系學(xué)習(xí)交互:

都是他從近5年工作經(jīng)驗中總結(jié)的比較實用的知識點,適合入門一兩年的交互設(shè)計師進階學(xué)習(xí)。除此以外,他會為大家提供7個需求,供大家實戰(zhàn),鍛煉之前學(xué)到的知識。實戰(zhàn)后的點評和建議都是他親自上手的,這么知心的引導(dǎo),感愛好的抓緊咯 :)

迎接關(guān)注作者微信公眾號:「新設(shè)計青年」


[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di3861.html
扁平風(fēng)格的題目在哪?來看這個分析!
超周全!UI設(shè)計中的字體配色方法總結(jié)
圖趣網(wǎng)微信
建議反饋
×