一款APP的互動文件從撰寫到交付

千千小助手發表於2018-07-24

我第一份工作的設計總監是前百度設計師,34歲,一線設計12年;今年聊天說轉了產品總監,如今39歲還活躍在行業中……

我第二份工作的部門總監是前騰訊工程師,38歲,一線開發14年;2年前在Q群裡跟我們說,他上山跟師傅修行養生,神隱了(;´༎ຶД༎ຶ`)……

設計總監哈爾濱的,開發總監青島的,和我們一樣都是北漂,無一線戶口,老家二三線城市,網際網路行業發展都很一般。

說起這個主要是和設計朋友們聊天,談到兩個事情:

①有人很焦慮,說中國網際網路30多歲後做不下去了,我不否認這殘酷現實o(╥﹏╥)o

行業精英只是少數人,我們終其一生也可能就是個普通設計師,把設計當成養家餬口的手藝,離開行業發達的城市甚至都沒有可用武之地。

但是我們這階段焦慮也是空有焦慮,沒什麼用。所以踏實的提升能力吧,到了30多歲的時候再考慮繼不繼續做下去。

②有人說小企業沒有牛人帶,想跳槽一沒拿的出手的作品,二怕沒跳槽的實力;

這種情況存在而且很多,多數中小企業就這樣,我們無力改變普遍行情。

所以我建議在職期間用盡一切辦法提升能力,不論自學或者網課;之後重設計公司的商業專案作為個人作品,年後趁早跳了吧。

最後說一句,我工作中遇到過很多設計師,套用現在比較俗套的句子就是:

設計行業,工作年限≠工作能力,天賦決定上限,努力決定下限

所以不時刻學習提升能力,30多歲的我們也只是乾的時間比較久的美工而已。

閒話扯的有點多,下面來看乾貨部分吧。

Part 1 互動文件的作用

這是理論性的東西,快速瀏覽下就可以了,沒什麼實質內容,但不寫還差點意思。

ㄟ( ▔, ▔ )ㄏ

互動文件需要團隊人員都知曉,並根據需求反饋,時刻迭代,同步更新到每一個人。

說白了,這文件必須每個人都熟悉,並且後邊更新後每個人手裡的都得跟著更新。

互動文件在每個環節的作用:

· 把PM抽象的需求,變成具象的、可落地執行的設計方案;

· 和各級部門討論設計方案細節和可行性,並最終敲定需求、開始執行;

· 對UI:根據互動文件設計效果圖,頁面佈局、順序、頁面情感以及互動方 式等等;

· 對開發:嚴格根據互動文件進行產品功能的設計和開發;

· 對測試:嚴格根據互動文件設計測試用例,並Review方案進行反饋。

優秀的互動文件的作用:

1.讓相關人員快速瞭解設計方案和制定工作計劃;

2.保證每個環節的使用者體驗一致;

3.開發完成後、作為產品驗收的檢驗依據。

同時也是體現互動設計師專業能力和個人價值的依據。

對設計師而言,製作原型的思考過程,絕對是最快提升邏輯能力、產品設計能力、分析能力以及提高產品認知度的過程;、

(當然前提是真的要思考著去做,不過腦子光畫線框圖的就當我沒說過吧……)

對團隊而言,低保真原型可以有效提升工作效率,規避風險和資源浪費。

無論是大到整個產品的互動文件,還是小到某個功能的互動文件,道理相同。

以上當然是理想狀態,但現實總是殘酷的。

我經歷過無視原型階段,拿需求文件直接讓UI出效果圖;需求變更直接改效果圖,把UI設計師當牲口使喚;

也經歷過因方案沒有準確傳達到每個人,導致有人對方案誤解,開發中出現問題的;

第一種憑設計師個人很難改變公司的現狀,所以要麼走要麼扛;

第二種一定要盡力避免因溝通引起的低階錯誤。

Part 2 完整的互動文件

不少人認為線框圖就是互動文件,但它只算是“介面佈局方案”,不算完整的“互動文件”,因為“介面佈局方案”PM、UI可以畫,甚至市場、運營也可以根據想法畫出來,

所以這個無法體現互動設計師的工作價值。

下面這份互動文件的書寫習慣,來自我第一份工作的設計總監,他教導我的東西一直被我延用至今,受益匪淺。

首先看下互動文件的Pages目錄,我會把涉及到模組對應的內容解釋給大家:

一款APP的互動文件從撰寫到交付

①目錄

目錄就是互動文件自身的資訊架構,優秀的互動文件需要結構清晰,命名準確的目錄。

很多人闡述互動方案時,其他人看到的目錄是“New Page01、新頁面03、功能02……”,結構和命名都很混亂,團隊成員憑什麼認同你的專業能力?

結構清晰,命名準確本身就是體現互動設計師專業能力的內容之一。


②互動文件內容之一:產品封面

一款APP的互動文件從撰寫到交付

封面的內容:

專案或需求:專案名稱或者本次需求的名稱;

版本號:專案或需求隸屬的版本,用來進行版本歸檔,專案跟進、排期;

人員列表:專案相關人員都會位列其中,便於工作安排和交接。

產品封面顯示了專案的基本概況,是很好的介紹入口。


③互動文件內容之一:修訂更新記錄

一款APP的互動文件從撰寫到交付

修訂更新記錄的作用:

· 讓UI、開發和測試等快速知曉專案需求以及更新內容,並迅速定位到對應位置;

· 作為需求的憑證,當有人對需求有異議時,拿出白紙黑字的記錄;

· 培養互動設計師時刻記錄的習慣,記錄的越詳細越好,以後會有很大幫助。

修訂更新記錄的書寫規則:

1.以天為單位倒序書寫,從專案立項開始記錄, 持續更新迭代;

2.每個需求點單獨列為一條記錄,不要一條記錄填寫多個功能點;

3.每條記錄新增連結到互動方案的對應頁面,便於其他人快速定位到相應位置。

這文章雖然叫“互動文件的撰寫和交付”,但是交付之後互動設計師的工作可遠遠沒有結束。

互動設計師的工作就是不停的跟進需求變更和反饋,持續迭代優化互動文件,而且無論何種更新,都要具體提現在我們的互動文件中。


④互動文件內容之一:需求分析 & 業務邏輯圖

一款APP的互動文件從撰寫到交付

一款APP的互動文件從撰寫到交付

這裡其實是來自於PM的需求文件和業務邏輯圖,不是互動設計師的工作範圍。

這個模組工作主要是PM來做的,放到這裡的原因有兩個:

①為了保持文件的完整性;

②讓開發和測試能夠在同一份文件裡解熟悉業務需求和業務邏輯,方便他們工作,而不需要好幾個文件來回檢視了。


⑤互動文件內容之一:資訊架構圖

一款APP的互動文件從撰寫到交付

資訊架構圖是根據PM的需求文件、功能樹狀圖和業務邏輯圖提煉的產品功能模組,這裡已經可以區分出產品功能的層級關係了。

資訊架構圖的結構和產品互動方案的結構兩者是對應的。

從產品互動方案上就可以看出一個互動設計師的資訊架構梳理能力是不是專業。


⑥互動文件內容之一:流程設計圖

一款APP的互動文件從撰寫到交付

流程設計有多重要我就不贅述了,凡是做互動設計的都避不開的工作。

流程設計圖中的每一環節,是和我們互動方案中的頁面一一對應的。

把它放到文件裡來:

一是避免在製作互動方案的過程中,忽略遺漏掉某些頁面;

二是讓開發和測試快速理解產品每個任務的具體流程,來安排工作。

這裡注意一點:

有多個任務流程的時候,應該針對每一個任務單獨繪製該任務的流程設計圖。


⑦互動文件內容之一:互動方案

一款APP的互動文件從撰寫到交付

互動方案就是我們整份互動文件的重點:產品最終的可執行設計方案。

它會包含頁面邏輯關係、頁面佈局、互動說明、迭代標示、動效說明、頁面情感說明等諸多要點;

它和前面提到過的資訊架構圖,流程設計圖是相呼應的,設計它應該根據資訊架構和流程設計來製作。

互動方案會在下一期詳細擴充,這裡僅作為本章示例來使用,不再過多展開。

互動方案的注意事項非常多,這裡展開的話會導致本章的內容過長了,而且我個人不喜歡看太長的文字。


⑧互動文件內容之一:公用控制元件庫

一款APP的互動文件從撰寫到交付

公用控制元件庫的作用有兩個:

一是我們製作互動文件的時候可以快速提取對應控制元件,提高工作效率;

(目前線上平臺已經提供了大量的可用控制元件,但因為我們這裡使用的是本地化的製作工具,這個模組還是要有的。)

二是團隊成員共同協作的時候,保持互動文件的一致性;

每個團隊的公用控制元件庫都不相同,需要各自的團隊根據自身產品特性去共同完善它,

這裡只放了一些示例模板,大家需要注意一下。

我們來總結下都有什麼:

①目錄

②文件封面

③修訂更新記錄

④需求分析 & 業務邏輯圖 (來自PM)

⑤資訊架構圖

⑥流程設計圖

⑦互動方案

⑧公用控制元件庫

以上是一份完整的可以稱之為“互動文件”而不是“介面佈局方案”的文件該有的內容,

除了第④項可能受限於PM的職業水平和素養,不能保證確確實實獲取到。

其他的內容都應該是作為互動設計師體現在互動文件中的工作內容。

這一期我們談了一份完整的互動文件應該包含的內容模組;

其實也可以理解為使用本地化製作工具書寫互動文件時,要體現哪些資訊。

看過我以前文章的人也熟悉,我的文章大部分都是工作的方法,模式;很少涉及設計能力,理論體系之類的內容。

這麼寫的初衷是因為:

這類工作方法,不需要時間消化,看過之後立刻就可以根據自己的實際工作情況進行調整和套用,立刻就可以達到上手應用的程度。

而設計能力,理論體系這類抽象的東西,根據我個人的學習經歷,短時間內很難通過閱讀幾篇文章就得到質的提升,必須通過大量的實際工作經驗慢慢積累。

作者:精分青年滷大溼

UI中國主頁:http://i.ui.cn/ucenter/126293.html


相關文章