激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

從0設(shè)計App(6):根據(jù)流程圖4步解決原型稿、交互稿

發(fā)布時間：2024-05-28 16:52:47 瀏覽量：147次

至此，完成了App的宏觀定位、系統(tǒng)架構(gòu)、產(chǎn)品結(jié)構(gòu)圖以及重要的2大流程圖（業(yè)務(wù)、頁面流程圖）。接下來將圍繞頁面的原型設(shè)計、交互設(shè)計展開。

在目前手頭上已經(jīng)繪制了所有業(yè)務(wù)流程圖，還有一張頁面流程地圖。可以說在心里基本知道產(chǎn)品的功能，以及每個頁面的功能元素，接下來就是參與需求評審的原型稿和交付給技術(shù)同學的設(shè)計稿了。

強烈建議先看前面的文章再往下看～否則可能看不懂。

二、原型vs交互vs視覺

很多人對原型稿、交互稿、視覺稿定義不清楚。

無論是大公司還是從0設(shè)計App，由業(yè)務(wù)流程圖還不能直接交付給程序員開發(fā)，還需要做出原型需求稿、交互UE稿、UI稿。而三者正好對應(yīng)是黃金圈法則：Why-How-What。

  • 原型需求稿：頁面有什么功能（why）
  • 交互UE稿：功能如何被用戶使用（how）
  • 視覺UI稿：功能長什么樣子（what）

本文將著重就原型和交互展開。關(guān)于視覺UI設(shè)計，下一篇文章來講。

三、原型稿

關(guān)于原型，有些產(chǎn)品經(jīng)理堅持「逼真」、「動態(tài)」，尤其是一些乙方公司?？梢院苊鞔_的說，即使花時間把Axure練得很熟，把原型做得很逼真，在甲方公司里都是性價比極低的做法。

3.1 What：原型稿是什么？

在實際工作中，直接看原型稿的3大使用場景：

  1. 描述需求：產(chǎn)品經(jīng)理通過對需求挖掘，然后解決用戶的需求，原型作為輔助工具形象地描繪出來，以便其他人可直觀理解、快速達成共識，解決用戶的需求；
  2. 設(shè)計協(xié)作：需要在進入UI設(shè)計階段之前將原型稿確認，不能讓UI通過你的口述來天馬行空設(shè)計；
  3. 客戶展示：對于外包服務(wù)型乙方公司，在聽了甲方的需求后，一般會直接設(shè)計動態(tài)、可交互的原型，目的是更好地解釋給甲方聽，也是為了更快交付簽合同。

一般來說，我們都是甲方公司的產(chǎn)品經(jīng)理，只用考慮前2點。

你所做的原型，其實更多就是講清楚，頁面有什么功能，如何解決需求。因此在原型環(huán)節(jié)也是如此，講清楚大概怎么解決需求即可。

如上圖，如果公司有交互設(shè)計師，最終做成這個樣子就可以了。已經(jīng)能夠說清楚功能是解決什么需求，剩下的細節(jié)交給UE和UI設(shè)計就好了。

3.2 How：怎么做線框稿？

問：用什么工具做原型？

答：其實Axure、Sketch、磨刀、甚至PPT都能做原型，我推薦Axure。

問：Axure要系統(tǒng)學嗎？

答：我反正沒學過，至今95%的工作里只用到方框、文本框、按鈕、占位符、直線這么幾種夠了。

做出上面途中那樣子的線框稿，基本上已經(jīng)可以在甲方公司應(yīng)用了。產(chǎn)品經(jīng)理不是來畫圖的，否則和設(shè)計師有什么差別？設(shè)計師要系統(tǒng)學一下Sketch或Axure。

在各大廠中用過很多方法，用來用去，讓我寫經(jīng)驗，我還是推薦閔偉老師（攜程高級PM）的4步方法，比較簡單易用：

  1. 繪制業(yè)務(wù)流程圖和頁面流程圖；
  2. 添加頁面基本元素；
  3. 添加功能，滿足業(yè)務(wù)流程和頁面跳轉(zhuǎn)；
  4. 添加判斷，滿足流轉(zhuǎn)。

根據(jù)業(yè)務(wù)流程圖和頁面流程圖，將每個頁面的原型全部繪制出來。工作量較大的時候，建議先手繪，不要上色，不要寫太多注釋，逐步完善原型圖。

四、交互稿

作為產(chǎn)品經(jīng)理我們基本已經(jīng)大功告成，接下來將交互稿交付給UI設(shè)計師，最后制作PRD給技術(shù)開發(fā)同學就可以了！下一篇內(nèi)容：從0設(shè)計App（7）：視覺設(shè)計。

五、總結(jié)

OK，至此基本完成了App的設(shè)計階段。交互稿將交付給UI設(shè)計師，隨后展開視覺設(shè)計。關(guān)注下一篇內(nèi)容，從0設(shè)計App（7）：視覺設(shè)計，與阿里巴巴認證設(shè)計師學習更多交互設(shè)計知識。

參考學習內(nèi)容：

  1. 市場分析-知識短視頻行業(yè)
  2. 市場分析-職場技能教育市場
  3. 競品分析-吃透3款產(chǎn)品
  4. 如何用問卷看透人心
  5. 用戶訪談造就產(chǎn)品靈魂
  6. 用4步管理一切需求
  7. 構(gòu)建產(chǎn)品之“道”
  8. 搭建系統(tǒng)架構(gòu)和產(chǎn)品結(jié)構(gòu)
  9. 繪制業(yè)務(wù)、頁面流程圖

作者：朱魯斌，公眾號：字字朱心。每周深度思考一個問題，不穩(wěn)定的世界里找到一份篤定。

本文由@朱魯斌 原創(chuàng)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載。

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定