如何畫交互原型?展現(xiàn)5類信息就夠了

0 評論 19915 瀏覽 69 收藏 6 分鐘

一份好的交互原型,首先必須提供一個好的解決方案。一份優(yōu)秀的交互原型,還必須符合基本的設(shè)計原則、使用符合規(guī)范的控件、對各種可能出現(xiàn)的情況都給予考慮和展現(xiàn)。那么,要怎么做才能畫好交互原型?

交互原型是交互設(shè)計師的主要產(chǎn)出,是設(shè)計師在接到產(chǎn)品需求之后,經(jīng)過一系列分析,將抽象的文字產(chǎn)品需求轉(zhuǎn)化成具體的圖形產(chǎn)品方案的產(chǎn)物。

一份好的交互原型,首先必須提供一個好的解決方案。這需要交互設(shè)計師對產(chǎn)品需求進行合理的分析,明確需求的設(shè)計目標,并使用最合適的交互方案,幫助團隊達到目標。其次,一份優(yōu)秀的交互原型,還必須符合基本的設(shè)計原則、使用符合規(guī)范的控件、對各種可能出現(xiàn)的情況都給予考慮和展現(xiàn)。

今天為大家介紹一下如何畫交互原型。

1、設(shè)計思路

在交互原型的第一頁,可以加上“項目概述”這個主題,主要展示該需求的基本信息和迭代說明,如下圖所示。

其中項目概況、平臺說明和功能列表都比較好理解,迭代說明部分指的交互原型的迭代記錄。在實際工作中,原型的設(shè)計往往不可能一步到位,一般需要經(jīng)過溝通、評審慢慢確定最終的原型。在這種情況下,設(shè)計師需要把每一次的變更都記錄下來,方便項目成員看到每次更新修改的內(nèi)容,提高工作效率,節(jié)約溝通成本,方便后期追溯。

2、方案展示

這是交互原型中最核心的部分。需要提醒的是,交互原型的制作是在設(shè)計師拿到需求后,經(jīng)過設(shè)計分析后開始進行。制作原型的過程,只是把前面的分析過程的結(jié)果,用頁面的形式畫出來。所以交互設(shè)計師一定不要把“畫原型”當成自己最主要的任務(wù)。交互設(shè)計師的核心價值,是通過高質(zhì)量的交互方案達到設(shè)計目標,以解決某種問題。

交互原型的本質(zhì)是一種溝通工具,主要用于團隊內(nèi)部協(xié)作,作用是傳達需求。因此,為了把需求傳達清楚,交互原型中必須包含以下5類信息

  1. 原型展現(xiàn)完整的流程;
  2. 界面以及界面中的元素展現(xiàn)需求的所有功能點;
  3. 界面中元素的各種狀態(tài)說明;
  4. 元素操作后的效果;
  5. 異常、極限狀態(tài)說明。

對于第①點“原型展現(xiàn)完整的流程”,如果這個功能比較復(fù)雜、流程比較長或者流程中邏輯比較多,則在交互原型中可以附上流程圖,方便產(chǎn)品、開發(fā)、測試同時理解;對于相對簡單的功能,則不需要都畫出流程圖。

如果你使用的是axure來制作交互原型,建議axure里的一個頁面只展現(xiàn)一個界面或分支流程。這樣的好處是可以充分展現(xiàn)一個界面或分支流程的各種狀態(tài),查看起來十分清晰。當涉及頁面之間的跳轉(zhuǎn)時,設(shè)計師需要在跳轉(zhuǎn)的地方標明進行了何種操作,跳轉(zhuǎn)到哪個頁面,然后在站點地圖中使用一致的頁面名稱。

如下圖所示:

上面的頁面展示了“我的宜定盈詳情”界面的各種狀態(tài)和操作后的結(jié)果。

如果你使用的是sketch來制作交互原型,那么意味著一個流程中所有的界面都在同一個頁面中展現(xiàn)。此時,建議大家使用藍色來表現(xiàn)用戶操作后的結(jié)果,使用綠色來表現(xiàn)對界面中元素的注釋。這樣做的好處,是可以讓查看者更清楚地看到功能的流程走向,如下圖:

使用不同顏色表示操作結(jié)果和注釋信息,更有利于查看者看到功能流程走向。

以上為大家介紹了畫交互原型的原則和注意問題,歡迎討論。

#專欄作家#

沐風,微信公眾號:“沐風與體驗設(shè)計”。人人都是產(chǎn)品經(jīng)理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜,曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計經(jīng)驗,專注設(shè)計領(lǐng)域,歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!