整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
知不覺(jué)，在千鋒武漢HTML5培訓(xùn)學(xué)習(xí)已經(jīng)三個(gè)月了。最近這段時(shí)間，我一直在學(xué)習(xí)原生js的相關(guān)知識(shí)，而這周，正好是第二階段第二個(gè)月的考試周。為了過(guò)關(guān)，在這里進(jìn)行知識(shí)點(diǎn)的回顧和總結(jié)。
首先，js的概念是：JavaScript 是一門跨平臺(tái)、面向?qū)ο蟮膭?dòng)態(tài)的弱類型的輕量級(jí)解釋型語(yǔ)言，是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言。應(yīng)用于 HTML 文檔能夠在網(wǎng)站上提供動(dòng)態(tài)的交互能力，他不同于Java。
其次，js由三部分構(gòu)成：BOM、DOM、ECMAScript核心。注意，script標(biāo)簽要放在body上面，需要在其中加上Window.onload。
最后，我們?cè)谧罱@兩周做了來(lái)到千鋒武漢HTML5培訓(xùn)之后的第一個(gè)項(xiàng)目，在這次做項(xiàng)目中，暴露出很多不足，我總結(jié)在下面：
這次做項(xiàng)目，遇到很多以前沒(méi)見(jiàn)過(guò)的bug，也通過(guò)和同學(xué)交流學(xué)習(xí)，了解到很多以前不知道的小技巧，這些是資料上學(xué)不來(lái)的，可以說(shuō)是受益匪淺。在這里，我總結(jié)一些自己遇到的bug，解決的附上解決辦法，沒(méi)解決的，希望有看到的大佬可以幫忙解決。
1、一個(gè)很容易產(chǎn)生的bug，許多程序猿編寫html和css時(shí)，都會(huì)遇到浮動(dòng)和定位引起的高度塌陷的問(wèn)題，我們都知道解決高度塌陷的方法，但是有時(shí)寫的high了，會(huì)不看效果，一直編寫，最后打開(kāi)頁(yè)面一看，一團(tuán)亂麻，不僅不好找錯(cuò)誤，而且看著亂七八糟，容易產(chǎn)生厭煩心理。這時(shí)候，就需要一個(gè)方便解決高度塌陷的辦法。
解決方法：用我們以前學(xué)過(guò)的BFC的知識(shí)，在每個(gè)功能結(jié)構(gòu)下面加一個(gè)div，class設(shè)置成clear，css樣式就寫成以前學(xué)習(xí)的萬(wàn)能清除法，這樣就有效避免高度塌陷。
2、輪播圖bug。這次項(xiàng)目中，主頁(yè)的輪播和以前做過(guò)的不太一樣，小圖是三張一起運(yùn)動(dòng)，而每張鼠標(biāo)時(shí)，有一個(gè)給其他可視兄弟元素添加遮罩的事件，這個(gè)用jquery可能很好寫，但是我大部分用原生寫的，再用jquery就會(huì)遇到很多問(wèn)題，比如下面的span滑塊設(shè)置了進(jìn)度條功能，但是不生效，也不報(bào)錯(cuò)。
3、購(gòu)物車總計(jì)有問(wèn)題，點(diǎn)擊減少購(gòu)買數(shù)量按鈕時(shí)，會(huì)出現(xiàn)input框中的數(shù)字為1，但是總計(jì)的價(jià)格依然可以減少。
在千鋒武漢HTML5培訓(xùn)的三個(gè)月讓我明白了，自己仍然是井底之蛙，前端的知識(shí)博大精深，我不懂的還有很多，希望能通過(guò)這次考試，讓我可以繼續(xù)學(xué)習(xí)新的知識(shí)，為自己的將來(lái)做準(zhǔn)備，爭(zhēng)取高薪！
TML5從入門到精通，兄弟連京修隨堂筆記（二）HTML的框架結(jié)構(gòu)，每日都有新內(nèi)容，訂閱走一波
HTML5的form標(biāo)簽
問(wèn)：網(wǎng)站怎樣與用戶進(jìn)行交互? 答案:使用HTML表單(form).
表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端的程序(比如ASP,PHP)的HTML元素,服務(wù)器端程序可以處理表單傳過(guò)來(lái)的數(shù)據(jù),從而進(jìn)行一些動(dòng)作.比如,bbs,blog的登陸系統(tǒng),購(gòu)物車系統(tǒng)等.
form 標(biāo)簽 -- 代表HTML表單
form標(biāo)簽是成對(duì)出現(xiàn)的,以<form>開(kāi)始,以</form>結(jié)束
常用屬性.
action -- 瀏覽者輸入的數(shù)據(jù)被傳送到的地方,如一個(gè)PHP頁(yè)面(dofm.php)
method -- 數(shù)據(jù)傳送的方法
get -- 此方式傳遞數(shù)據(jù)量少,但是傳遞的信息顯示在網(wǎng)址上。
post --此方式傳送信息多,而且不會(huì)把傳遞信息顯示在網(wǎng)址上
enctype -- 表示將數(shù)據(jù)發(fā)送到服務(wù)器時(shí)瀏覽器使用的編碼類型
application/x-www-form-urlencoded -- 窗體數(shù)據(jù)被編碼為名稱/值對(duì).這是標(biāo)準(zhǔn)的編碼格式.默認(rèn)的。
multipart/form-data -- 窗體數(shù)據(jù)被編碼為一條消息,頁(yè)上的每個(gè)控件對(duì)應(yīng)消息中的一個(gè)部分.
text/plain -- 以純文本形式進(jìn)行編碼,其中不含任何控件或格式字符
HTML5 input標(biāo)簽
input 標(biāo)簽 -- 代表HTML表單的單行輸入域
input標(biāo)簽是單獨(dú)出現(xiàn)的,<input />
屬性.
type -- 代表一個(gè)輸入域的顯示方式(分為輸入型,選擇型,點(diǎn)擊型)
name – 此表單項(xiàng)名稱
value -- 輸入域的值
size -- 輸入域的長(zhǎng)度
maxlength -- 輸入域最多可以輸入文字的長(zhǎng)度
checked -- 如果是選擇型的輸入域,代表已經(jīng)被選擇，值為checked
readonly -- 輸入域可以選擇,但是無(wú)法修改 ，值為readonly
disabled -- 輸入域無(wú)法獲得焦點(diǎn),無(wú)法選擇,以灰色顯示,在表單中不起任何作用。如：disabled="disabled"
accesskey -- 表單的快捷鍵訪問(wèn)方式，如值為h即按Alt+h快捷鍵。
tabindex -- 輸入域的"tab"鍵遍歷順序
src -- 當(dāng)使用圖片來(lái)表示按鈕時(shí),代表圖片的位置(URI)
alt -- 用來(lái)替換提交按鈕的圖片(當(dāng)在input的src屬性定義的圖片無(wú)法顯示時(shí))提示信息。
type屬性 -- 代表HTML表單,單行輸入域(框)的表現(xiàn)方式
type屬性取值:
text -- 文字輸入域(輸入型)
password -- 也是文字輸入域,但是輸入的文字以密碼符號(hào)'*'顯示(輸入型)
file -- 可以輸入一個(gè)文件路徑(輸入型)
checkbox -- 復(fù)選框.可以選擇零個(gè)或多個(gè)(選擇型)
radio -- 單選框.只可以選擇一個(gè)而且必須選擇一個(gè)(選擇型)
hidden -- 代表隱藏域,可以傳送一些隱藏的信息到服務(wù)器
button -- 按鈕(點(diǎn)擊型)
image -- 使用圖片來(lái)顯示按鈕,使用src屬性指定圖像的位置(就像img標(biāo)簽的src屬性)(點(diǎn)擊型)
submit -- 提交按鈕,表單填寫完畢可以提交,把信息傳送到服務(wù)器.可以使用value屬性來(lái)顯示按鈕上的文字(點(diǎn)擊型)
reset -- 重置按鈕,可以把表單中的信息清空(點(diǎn)擊型)
select 標(biāo)簽 -- 選擇列表標(biāo)簽
select標(biāo)簽是成對(duì)出現(xiàn)的,以<select>開(kāi)始,以</select>結(jié)束
此標(biāo)簽中的每對(duì)option標(biāo)簽代表一個(gè)選擇項(xiàng)
屬性:
name – 表單項(xiàng)名稱
size -- 選擇域的高度
multiple -- 可以有多個(gè)選擇
disabled -- 以灰色顯示,在表單中不起任何作用
tabindex -- 使用"tab"鍵的遍歷順序
許我們經(jīng)常會(huì)碰到這么一副畫面：很多產(chǎn)品經(jīng)理在梳理好了產(chǎn)品架構(gòu)的腦圖之后，都會(huì)火急火燎打開(kāi)原型設(shè)計(jì)工具Axure，開(kāi)始進(jìn)行原型設(shè)計(jì)工作去了。三下五除二就基本將產(chǎn)品線框圖給畫完了，然后就屁顛屁顛地跑去和研發(fā)工程師過(guò)需求，討論的時(shí)候會(huì)發(fā)現(xiàn)：不是這里有個(gè)小問(wèn)題，就是那里有個(gè)邏輯沒(méi)想明白，整理整理返工，結(jié)果下一次又發(fā)現(xiàn)有一個(gè)流程沒(méi)有考慮清楚，這樣來(lái)回反復(fù)幾次才能將一個(gè)產(chǎn)品需求和原型界面給討論清楚。
其實(shí)，這樣的場(chǎng)景出現(xiàn)的頻率還比較高。想想自己第一次去和公司開(kāi)發(fā)溝通的時(shí)候，也是碰到了這樣的情況，被開(kāi)發(fā)噴這里邏輯不對(duì)，那里漏了一種分支情況的思考，當(dāng)時(shí)那個(gè)囧啊，真想找個(gè)地縫鉆進(jìn)去。后來(lái)才知道，在設(shè)計(jì)原型之前，其實(shí)還少了一個(gè)關(guān)鍵的步驟，那就是確定產(chǎn)品的業(yè)務(wù)流程，梳理產(chǎn)品的流程圖。
從字面來(lái)理解，流程圖＝流程＋圖。流程，是指特定主體為了滿足特定需求而進(jìn)行的有特定邏輯關(guān)系的一系列操作過(guò)程；而圖呢，就是將這些流程進(jìn)行顯性化和書面化的一種表達(dá)。
流程圖有時(shí)也稱作輸入-輸出圖，某種程度上來(lái)說(shuō)，流程圖是一種溝通性質(zhì)的圖形化語(yǔ)言。一般會(huì)使用一些標(biāo)準(zhǔn)符號(hào)代表某些類型的動(dòng)作，如判斷用菱形框表示，具體的操作行為、活動(dòng)用方框表示，開(kāi)始和結(jié)束用圓角矩形框表示。
但比這些符號(hào)規(guī)定更重要的，是必須清楚地描述產(chǎn)品業(yè)務(wù)流程的順序及使用邏輯。從產(chǎn)品經(jīng)理的角度來(lái)理解，流程圖其實(shí)就是一個(gè)用戶使用產(chǎn)品的過(guò)程，基本的三要素是“從哪進(jìn)—做什么—從哪走”。比如用戶打開(kāi)一個(gè)電商APP，會(huì)有這樣一個(gè)使用產(chǎn)品的過(guò)程：
「搜索商品」→「查看商品詳情頁(yè)」→「加入購(gòu)物車」→「生成訂單」→「開(kāi)始支付」，以及支付之后的「確認(rèn)收貨」
用戶從電商商城的首頁(yè)進(jìn)入，通過(guò)搜索來(lái)找到自己想要購(gòu)買的商品，了解后將其加入購(gòu)物車，購(gòu)買了自己想要的商品，支付結(jié)束后便離開(kāi)APP，待收到商品后又回到APP進(jìn)行確認(rèn)收貨。
可以看出，只要產(chǎn)品用戶在使用我們產(chǎn)品的過(guò)程中有其自身的目標(biāo)和任務(wù)，產(chǎn)品流程就會(huì)存在。產(chǎn)品經(jīng)理要做的，就是通過(guò)一系列步驟完成任務(wù)和流程的梳理，最終目的是幫助用戶，完成核心任務(wù)。
而且制作產(chǎn)品流程圖不僅可以幫助產(chǎn)品經(jīng)理梳理、完善用戶操作使用流程，還能有效降低團(tuán)隊(duì)成員間的溝通成本。在實(shí)際的工作中，產(chǎn)品經(jīng)理需要向很多人（尤其是開(kāi)發(fā)人員）描述產(chǎn)品需求和原型界面，借助可視化的流程圖，溝通的效率會(huì)提高很多，畢竟一份步驟清晰的流程圖要比一大段文字直觀易懂得多。
常見(jiàn)的流程圖分類有兩種，一種是業(yè)務(wù)流程圖（Transaction Flow）, 一種是頁(yè)面流程圖（Page Flow）。
對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō)，用的比較多的自然是業(yè)務(wù)流程圖，頁(yè)面流程圖一般是設(shè)計(jì)師那邊使用比較頻繁。在工作中，我們經(jīng)常能夠看到兩種業(yè)務(wù)流程圖，一種是單純的用戶操作行為流程圖，這種流程圖往往只涉及一種用戶角色，不需要進(jìn)行跨部門或者跨功能完成某項(xiàng)任務(wù)，如下圖所示：
另一種則很好區(qū)分，俗稱為“泳道圖”，在樣子上也挺像游泳池里的泳道，可以有橫向的泳道，也會(huì)有縱向的泳道。泳道圖在某些文檔里會(huì)被稱為“以活動(dòng)為單位的流程圖”，浮在泳道中的都是一個(gè)個(gè)活動(dòng)。泳道圖是處理多角色、多系統(tǒng)、多模塊的復(fù)雜需求的最好方法，它的本質(zhì)就是希望可以通過(guò)角色、系統(tǒng)、模塊的劃分將復(fù)雜的功能梳理切割清晰，因此多模塊之間的關(guān)聯(lián)盡可能單一，實(shí)際中也很少存在多聯(lián)系線條的情況，因此如果泳道之間多條關(guān)聯(lián)，最好自己反思下是不是之前的功能模塊架構(gòu)切割的不太合理，導(dǎo)致繪制出來(lái)的圖不夠簡(jiǎn)潔。
講完了基礎(chǔ)的東西，接下來(lái)我們來(lái)梳理下，該如何確定產(chǎn)品的流程。
首先我們要設(shè)計(jì)的是產(chǎn)品的核心功能流程，也就是用戶的核心使用路徑。拿微博進(jìn)行舉例，微博用戶的核心操作路徑是這樣的：
這是微博用戶最常有的兩種操作行為，所以你會(huì)發(fā)現(xiàn)：所謂產(chǎn)品的核心功能流程，就是一個(gè)產(chǎn)品對(duì)用戶產(chǎn)生的價(jià)值，用戶要感知到這個(gè)價(jià)值需要完成的最簡(jiǎn)操作步驟。微博這個(gè)產(chǎn)品對(duì)用戶來(lái)說(shuō)，最大的價(jià)值無(wú)非就是兩個(gè)方面，一個(gè)是可以碎片化地瀏覽資訊，一個(gè)是可以碎片化地發(fā)表自己的動(dòng)態(tài)信息。用戶要感知到這兩個(gè)價(jià)值，就必然要做出上述的一系列操作流程和步驟。
所以，在確定產(chǎn)品的主干流程的時(shí)候，需要先弄清楚產(chǎn)品的價(jià)值到底體現(xiàn)在哪里，用戶要完成對(duì)這個(gè)產(chǎn)品價(jià)值的感知，需要付出哪些行為。通過(guò)這樣一個(gè)簡(jiǎn)單的分析，我們就能得出產(chǎn)品的主流程了。
當(dāng)然，這里輸出的產(chǎn)品主流程，只是一個(gè)產(chǎn)品的整體使用流程，具體到某一個(gè)功能如何進(jìn)行操作使用，就需要花費(fèi)更多的精力去進(jìn)行細(xì)化分解。
那對(duì)于某個(gè)功能的產(chǎn)品操作流程梳理，我們又具體怎么來(lái)做呢？
我建議可以從下面3步著手。
如果你是在梳理一個(gè)簡(jiǎn)單的功能操作流程，或者已經(jīng)比較通用成熟的產(chǎn)品流程，那么只需要好好研究幾款產(chǎn)品，就可以知道常規(guī)的流程是什么樣的，典型如產(chǎn)品的注冊(cè)登錄流程；但如果是梳理一個(gè)全新的業(yè)務(wù)功能流程，尤其是設(shè)計(jì)企業(yè)內(nèi)部支撐系統(tǒng)的時(shí)候，就需要對(duì)相關(guān)業(yè)務(wù)進(jìn)行系統(tǒng)的調(diào)研了。
其實(shí)調(diào)研的過(guò)程，倒是和我們小時(shí)候?qū)懹洈⑽挠悬c(diǎn)相似，無(wú)非就是要解決who，what，why，how，以及where的問(wèn)題：誰(shuí)，在什么情況下，做了什么事情，這個(gè)事情需要什么前置條件，又輸出了什么，這個(gè)事情在哪里完成的？基本上只要我們深入到業(yè)務(wù)環(huán)境里去，和業(yè)務(wù)相關(guān)人員好好溝通交流，搞明白這幾個(gè)問(wèn)題也不是什么難事。然后把調(diào)研結(jié)果做一個(gè)完整記錄，我們的調(diào)研就可以算是圓滿完成了。
舉個(gè)例子：假設(shè)你老板派你去調(diào)研一個(gè)商業(yè)地產(chǎn)開(kāi)發(fā)商的業(yè)務(wù)流程，調(diào)研的目標(biāo)是為了給他們提供商鋪和業(yè)主管理系統(tǒng)。
那么在調(diào)研中：
- 首先可以要求精通業(yè)務(wù)流程的人給你系統(tǒng)講解一遍
- 調(diào)研具體操作的人，來(lái)驗(yàn)證他給你講解的是否全面和是否存在偏差
- 實(shí)地觀察和記錄，可以花點(diǎn)時(shí)間走遍整個(gè)業(yè)務(wù)流程，了解各個(gè)細(xì)節(jié)
這里提供的三種方式可以相互結(jié)合使用。第一種方法可以讓你首先建立一個(gè)全局觀，了解業(yè)務(wù)的整體運(yùn)行邏輯，但對(duì)于業(yè)務(wù)細(xì)節(jié)問(wèn)題則不能那么深入。第二種方法比較依賴于問(wèn)題的質(zhì)量以及問(wèn)問(wèn)題的場(chǎng)景，這就要求我們?cè)谔釂?wèn)之前就做好充分的準(zhǔn)備工作，有很多結(jié)論的不正確其實(shí)是因?yàn)閱?wèn)錯(cuò)了人或者問(wèn)問(wèn)題的方法不對(duì)。第三種方法的存在，就是為了在觀察中再進(jìn)行驗(yàn)證。
做好了調(diào)研工作后，我們就該立即對(duì)調(diào)研結(jié)果進(jìn)行整理。
首先，明確你要梳理的業(yè)務(wù)流程的范圍，具體是包含哪幾個(gè)功能模塊，涉及到哪些用戶角色，這個(gè)時(shí)候可以先使用一些關(guān)鍵節(jié)點(diǎn)，弄一份該業(yè)務(wù)流程的主干流程圖出來(lái)；
接下來(lái)，就是對(duì)上面這個(gè)粗的流程圖進(jìn)行分解，好比去拆解一個(gè)金字塔，層層分解下去，直到不能分解為止；
最后，就是用流程圖將其給畫出來(lái)，通常來(lái)說(shuō)，會(huì)有三種結(jié)構(gòu)的流程圖出現(xiàn)——順序結(jié)構(gòu)、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)。
一份流程圖能否通過(guò)評(píng)審，關(guān)鍵是看其能否真正反映現(xiàn)實(shí)中的業(yè)務(wù)，評(píng)審主要是讓業(yè)務(wù)部門和開(kāi)發(fā)部門參與，如果都覺(jué)得沒(méi)有問(wèn)題，那么恭喜你，你的流程算是過(guò)關(guān)了。這里稍微要強(qiáng)調(diào)的是，好的流程圖具備怎樣的一些特征，大致歸納起來(lái)如下：
上面說(shuō)的這三個(gè)步驟方法，比較偏向于做后臺(tái)業(yè)務(wù)功能的流程梳理和調(diào)研，其實(shí)對(duì)于to c 類的產(chǎn)品來(lái)說(shuō)，方法都是通用的，只不過(guò)調(diào)研業(yè)務(wù)部門換成了調(diào)研用戶，只有更了解用戶的操作行為、習(xí)慣、心理預(yù)期才能做出更好的流程設(shè)計(jì)。
制作流程圖的工具有很多種，比如，Visio、Axure、Smartdraw、Omnigraffle（Mac）等等，產(chǎn)品經(jīng)理只需要選擇一款適合自己的工具即可。
這里介紹幾個(gè)常用工具。
Visio是微軟推出的一款流程圖制作工具，也是目前產(chǎn)品經(jīng)理最常用的一款流程圖工具。通過(guò)Visio可以方便、快速地把業(yè)務(wù)流程、系統(tǒng)實(shí)現(xiàn)流程畫出來(lái)。它本身有很多的組件庫(kù)，可以很方便的完成各類流程圖、結(jié)構(gòu)圖和網(wǎng)絡(luò)圖的制作。Visio的另一個(gè)特色功能在于它有非常豐富的自帶模板。
OmniGraffle是由The Omni Group制作的一款繪圖軟件，其只能于運(yùn)行在蘋果電腦和iPad平臺(tái)之上。個(gè)人感覺(jué)在很多方面，OmniGraffle都類似于微軟的Visio，不過(guò)繪制出來(lái)的任何圖表不知為何總會(huì)覺(jué)得很美，有Mac電腦的產(chǎn)品經(jīng)理可以下載軟件試試。
ProcessOn 是一款網(wǎng)頁(yè)版的在線作圖工具，用戶只需要有一個(gè)瀏覽器即可制作思維導(dǎo)圖、流程圖、UML圖、界面原型設(shè)計(jì)、組織結(jié)構(gòu)圖等等。這款工具上手非常容易，而且免費(fèi)，更重要的是省去了安裝、授權(quán)等各種付費(fèi)軟件的煩惱。作為一款用 HTML5 開(kāi)發(fā)的在線網(wǎng)頁(yè)版作圖工具，ProcessOn一個(gè)很大的特色就是可以做到無(wú)延遲協(xié)作，方便兩個(gè)或多個(gè)人同時(shí)對(duì)一個(gè)文件協(xié)作編輯和溝通，對(duì)創(chuàng)業(yè)團(tuán)隊(duì)或者企業(yè)辦公小組來(lái)說(shuō)，是一款簡(jiǎn)單易用的工具。
有時(shí)候光有流程圖，還不能夠準(zhǔn)確完整地表達(dá)清楚業(yè)務(wù)邏輯和產(chǎn)品需求，這個(gè)時(shí)候就需要借助時(shí)序圖和狀態(tài)圖來(lái)完成相關(guān)的補(bǔ)充說(shuō)明了。
流程圖、時(shí)序圖、狀態(tài)圖都可統(tǒng)稱為UML圖，那什么是UML呢？先來(lái)看看百科是怎么解釋的：
Unified Modeling Language (UML)又稱統(tǒng)一建模語(yǔ)言或標(biāo)準(zhǔn)建模語(yǔ)言，是始于1997年一個(gè)OMG標(biāo)準(zhǔn)，它是一個(gè)支持模型化和軟件系統(tǒng)開(kāi)發(fā)的圖形化語(yǔ)言，為軟件開(kāi)發(fā)的所有階段提供模型化和可視化支持，包括由需求分析到規(guī)格，到構(gòu)造和配置。 面向?qū)ο蟮姆治雠c設(shè)計(jì)(OOA&D，OOAD)方法的發(fā)展在80年代末至90年代中出現(xiàn)了一個(gè)高潮，UML是這個(gè)高潮的產(chǎn)物。它不僅統(tǒng)一了Booch、Rumbaugh和Jacobson的表示方法，而且對(duì)其作了進(jìn)一步的發(fā)展，并最終統(tǒng)一為大眾所接受的標(biāo)準(zhǔn)建模語(yǔ)言。
是不是看不太懂？看不懂才是正常的表現(xiàn)，因?yàn)檫@是面向?qū)ο筌浖臉?biāo)準(zhǔn)化建模語(yǔ)言，簡(jiǎn)單地說(shuō)就是一種有特殊用途的語(yǔ)言。
大家有空可以參考《UML基礎(chǔ)、案例與應(yīng)用》詳細(xì)了解下。
這里就給大家介紹兩種常見(jiàn)的圖，一種叫時(shí)序圖，一種叫狀態(tài)圖。介紹這兩種圖之前，我們先說(shuō)下什么是對(duì)象，什么是類的定義嗎？類就是一類事物的總稱，那對(duì)象呢？對(duì)象就是這類事物中的個(gè)體，比如手機(jī)類，蘋果手機(jī)就是手機(jī)類的一個(gè)對(duì)象。
時(shí)序圖顯示對(duì)象之間的動(dòng)態(tài)合作關(guān)系，它強(qiáng)調(diào)的是對(duì)象之間消息發(fā)送的順序，同時(shí)顯示對(duì)象之間的交互。時(shí)序圖的一個(gè)用途是用來(lái)表示用例中的行為順序。當(dāng)執(zhí)行一個(gè)用例行為的時(shí)候，時(shí)序圖中的每條消息對(duì)應(yīng)了一個(gè)類操作或引起狀態(tài)轉(zhuǎn)換的觸發(fā)事件，如下圖所示是一個(gè)ATM 用戶成功登陸的時(shí)序圖：
在 UML 中，時(shí)序圖表示為一個(gè)二維的關(guān)系圖，其中，縱軸是時(shí)間軸，時(shí)間延豎線向下延伸。橫軸代表在協(xié)作中各個(gè)獨(dú)立的對(duì)象。當(dāng)對(duì)象存在時(shí)，生命線用一條虛線表示，消息用從一個(gè)對(duì)象的生命線到另一個(gè)對(duì)象的生命線的箭頭表示，箭頭以時(shí)間的順序在圖中上下排列。
所謂狀態(tài)圖，就是用來(lái)描述一個(gè)對(duì)象的可能狀態(tài)以及各個(gè)狀態(tài)之間的轉(zhuǎn)換關(guān)系的一種圖。
上圖就是典型的狀態(tài)圖，一本圖書經(jīng)過(guò)不同的觸發(fā)行為或滿足一定的條件，就變成了不同的狀態(tài)，我們?cè)诋a(chǎn)品設(shè)計(jì)的過(guò)程中，也會(huì)經(jīng)常碰到這樣的情況需要用狀態(tài)圖去表示。
熟悉了這么多種流程圖，算是為后面的原型設(shè)計(jì)打下了堅(jiān)實(shí)的基礎(chǔ)，下一篇我們來(lái)講具體如何做產(chǎn)品的原型設(shè)計(jì)。
作者：壹百度（微信公眾號(hào)：倒退集），在線教育企業(yè)服務(wù)領(lǐng)域產(chǎn)品經(jīng)理，創(chuàng)業(yè)公司Team Leader。常常自詡是文藝青年和極客青年的結(jié)合體，在宅與不宅之間可以自由切換，曾主導(dǎo)多款重量級(jí)產(chǎn)品的產(chǎn)品策劃和設(shè)計(jì)工作。
本文由 @壹百度 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
