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

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

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

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

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

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

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

二、原型vs交互vs視覺(jué)

很多人對(duì)原型稿、交互稿、視覺(jué)稿定義不清楚。

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

  • 原型需求稿：頁(yè)面有什么功能（why）
  • 交互UE稿：功能如何被用戶使用（how）
  • 視覺(jué)UI稿：功能長(zhǎng)什么樣子（what）

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

三、原型稿

關(guān)于原型，有些產(chǎn)品經(jīng)理堅(jiān)持「逼真」、「動(dòng)態(tài)」，尤其是一些乙方公司。可以很明確的說(shuō)，即使花時(shí)間把Axure練得很熟，把原型做得很逼真，在甲方公司里都是性價(jià)比極低的做法。

3.1 What：原型稿是什么？

在實(shí)際工作中，直接看原型稿的3大使用場(chǎng)景：

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

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

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

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

3.2 How：怎么做線框稿？

問(wèn)：用什么工具做原型？

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

問(wèn)：Axure要系統(tǒng)學(xué)嗎？

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

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

在各大廠中用過(guò)很多方法，用來(lái)用去，讓我寫(xiě)經(jīng)驗(yàn)，我還是推薦閔偉老師（攜程高級(jí)PM）的4步方法，比較簡(jiǎn)單易用：

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

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

四、交互稿

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

五、總結(jié)

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

參考學(xué)習(xí)內(nèi)容：

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

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

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

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定