《交互設(shè)計(jì)》課件-第6章 流程設(shè)計(jì)

2020PRODUCTDESIGN交互設(shè)計(jì)06流程設(shè)計(jì)“流程設(shè)計(jì)”，就是關(guān)于先做什么、再做什么的先后順序的設(shè)計(jì)。如何為一個(gè)功能設(shè)計(jì)一個(gè)好用的流程？如何畫出功能的流程圖？6.1什么是流程圖流程是一個(gè)功能的結(jié)構(gòu)框架和邏輯體現(xiàn)。一個(gè)設(shè)計(jì)良好的流程，能夠讓用戶用最合理的路徑和步驟去完成想完成的操作。6.1什么是流程圖流程圖可以清晰地表現(xiàn)出用戶完成一個(gè)任務(wù)所要經(jīng)歷的各種步驟和操作。1.流程圖有利于保證用戶所經(jīng)歷的流程是明確、清晰、簡(jiǎn)單的。2.流程圖可以保障交互方案邏輯清晰，結(jié)構(gòu)完整。3.流程圖對(duì)于開發(fā)和測(cè)試同事，也有很大的幫助：流程圖可以清晰地表達(dá)出實(shí)現(xiàn)一個(gè)功能的邏輯順序，方便開發(fā)的同事寫代碼時(shí)抓住脈絡(luò)，也方便測(cè)試同學(xué)在測(cè)試的時(shí)候有跡可循。6.2如何畫流程圖流程圖主要由三種元素組成：頁面、動(dòng)作、條件。6.2如何畫流程圖當(dāng)一個(gè)界面中有多個(gè)入口，可以在矩形中列出界面包含的操作入口6.2如何畫流程圖反例1：交互設(shè)計(jì)師在畫流程圖時(shí)，只畫界面邏輯，不要畫內(nèi)部算法邏輯6.2如何畫流程圖反例2：不要把步驟和界面本身都表現(xiàn)出來，應(yīng)該只表達(dá)界面。6.2如何畫流程圖Axure里左側(cè)素材欄，有專門一類“流程圖工具（圖中的Flow選項(xiàng)）6.3流程設(shè)計(jì)萬能公式發(fā)現(xiàn)→了解→操作→跟進(jìn)小明想買一件健身衣，他一直挺喜歡UnderArmour這個(gè)牌子，想從網(wǎng)上挑一件價(jià)格400以內(nèi)、款式好看的健身衣。（目標(biāo)明確）晚上睡覺前，小美覺得無事可做，一向喜歡逛街買東西的小美心里想，“要是能把商場(chǎng)搬到我家來該多好啊！”。（逛）舉例：淘寶首頁購買商品需求對(duì)客觀場(chǎng)景中的主要場(chǎng)景：

6.3流程設(shè)計(jì)萬能公式發(fā)現(xiàn)→了解→操作→跟進(jìn)晚上睡覺前，做運(yùn)營(yíng)的小美在家中覺得無事可做，正好最近花錢不多，她拿出手機(jī)打開淘寶應(yīng)用，想看看有沒有好玩又不貴的東西，買來讓自己開心一下。舉例：以第2個(gè)客觀場(chǎng)景為例，描述其目標(biāo)場(chǎng)景6.3流程設(shè)計(jì)萬能公式焦點(diǎn)圖和入口焦點(diǎn)圖和入口品類推薦商品推薦6.3流程設(shè)計(jì)萬能公式品類推薦6.3流程設(shè)計(jì)萬能公式品類推薦評(píng)價(jià)入口了解評(píng)價(jià)詳情操作6.3流程設(shè)計(jì)萬能公式發(fā)現(xiàn)→了解→操作→跟進(jìn)大學(xué)生小美看到同學(xué)新買的書架既實(shí)用又好看，于是詢問哪里買的。同學(xué)在微信上把淘寶鏈接分享給了小美。小美使用分享鏈接，也買到了同樣的書架。發(fā)現(xiàn)：小美查看同學(xué)在微信里發(fā)給小美的商品鏈接了解：這個(gè)步驟會(huì)相對(duì)簡(jiǎn)短，因?yàn)樾∶酪呀?jīng)看到同學(xué)買的實(shí)物，所以花在了解的精力自然會(huì)小一些操作和跟進(jìn)：與上面分析的步驟相同。舉例：淘寶首頁購買商品需求對(duì)客觀場(chǎng)景中的次要場(chǎng)景：

6.3流程設(shè)計(jì)萬能公式1.恰當(dāng)?shù)奈Πl(fā)現(xiàn)

→了解→操作→跟進(jìn)功能的入口要符合這個(gè)功能的重要性，不能比更重要的功能更顯眼，也不能太低調(diào)

6.3流程設(shè)計(jì)萬能公式1.恰當(dāng)?shù)奈Πl(fā)現(xiàn)

→了解→操作→跟進(jìn)功能的入口要符合這個(gè)功能的重要性，不能比更重要的功能更顯眼，也不能太低調(diào)

6.3流程設(shè)計(jì)萬能公式2.清楚的含義表達(dá)發(fā)現(xiàn)

→了解→操作→跟進(jìn)一個(gè)優(yōu)秀的入口的設(shè)計(jì)方案，能夠做到讓用戶清楚地知曉，通過這個(gè)入口能帶自己來什么好處6.3流程設(shè)計(jì)萬能公式2.清楚的含義表達(dá)發(fā)現(xiàn)

→了解→操作→跟進(jìn)一個(gè)優(yōu)秀的入口的設(shè)計(jì)方案，能夠做到讓用戶清楚地知曉，通過這個(gè)入口能帶自己來什么好處6.3流程設(shè)計(jì)萬能公式3.新手引導(dǎo)發(fā)現(xiàn)

→了解→操作→跟進(jìn)新功能告知型一般用于上線了以前沒有的新功能，告知用戶這個(gè)功能包含的內(nèi)容6.3流程設(shè)計(jì)萬能公式3.新手引導(dǎo)發(fā)現(xiàn)

→了解→操作→跟進(jìn)功能用法告知型如果某個(gè)功能的操作方法是用戶不熟悉的，可以考慮該種引導(dǎo)，提示用戶如何操作6.3流程設(shè)計(jì)萬能公式3.新手引導(dǎo)發(fā)現(xiàn)

→了解→操作→跟進(jìn)功能強(qiáng)調(diào)型該類型引導(dǎo)強(qiáng)調(diào)某某功能的價(jià)值，希望用戶更多使用該功能。6.3流程設(shè)計(jì)萬能公式3.新手引導(dǎo)發(fā)現(xiàn)

→了解→操作→跟進(jìn)彩蛋型當(dāng)用戶觸發(fā)了特定的操作，提示用戶“以后也可以如此操作”，會(huì)給用戶驚喜的感覺6.3流程設(shè)計(jì)萬能公式3.新手引導(dǎo)發(fā)現(xiàn)

→了解→操作→跟進(jìn)新手引導(dǎo)對(duì)用戶的操作會(huì)造成打斷，因此不宜使用過多6.3流程設(shè)計(jì)萬能公式1.運(yùn)用接近性原則發(fā)現(xiàn)

→了解→操作→跟進(jìn)人們傾向于將彼此在位置上接近的物體歸位一類6.3流程設(shè)計(jì)萬能公式2.保證文案表意準(zhǔn)確、清晰發(fā)現(xiàn)

→了解→操作→跟進(jìn)文案是應(yīng)用跟用戶溝通的一個(gè)非常重要的方面6.3流程設(shè)計(jì)萬能公式3.主次分明發(fā)現(xiàn)

→了解→操作→跟進(jìn)重要的信息在視覺上更明顯：加大尺寸、加粗、使用更顯眼的顏色6.3流程設(shè)計(jì)萬能公式4.保證元素的功能可見性發(fā)現(xiàn)

→了解→操作→跟進(jìn)用戶看到一件物品，或者一個(gè)界面，不用學(xué)習(xí)，就知道如何使用6.3流程設(shè)計(jì)萬能公式1.注意用戶習(xí)慣發(fā)現(xiàn)

→了解→操作→跟進(jìn)用戶更習(xí)慣上下劃動(dòng)頁面，而不是左右劃動(dòng)頁面6.3流程設(shè)計(jì)萬能公式2.盡量縮短操作路徑發(fā)現(xiàn)

→了解→操作→跟進(jìn)操作路徑指用戶在進(jìn)行多個(gè)操作時(shí)，手指在前后操作點(diǎn)之間的移動(dòng)路徑。這個(gè)路徑越短，操作的效率就越高，操作起來也越方便。6.3流程設(shè)計(jì)萬能公式3.注意遵循一致性發(fā)現(xiàn)

→了解→操作→跟進(jìn)在一個(gè)應(yīng)用里，相同的按鈕需要有相同的行為6.3流程設(shè)計(jì)萬能公式3.注意遵循一致性發(fā)現(xiàn)

→了解→操作→跟進(jìn)在一個(gè)應(yīng)用里，相同的按鈕需要有相同的行為6.3流程設(shè)計(jì)萬能公式4.合理使用iOS和Android設(shè)計(jì)規(guī)范控件發(fā)現(xiàn)

→了解→操作→跟進(jìn)iOS人機(jī)界面設(shè)計(jì)規(guī)范MaterialDesign設(shè)計(jì)規(guī)范6.3流程設(shè)計(jì)萬能公式讓用戶知道在進(jìn)行了操作之后，如何查看到后續(xù)的結(jié)果發(fā)現(xiàn)

→了解→操作→跟進(jìn)toast提示用戶在哪里可以看到收藏的內(nèi)容6.3流程設(shè)計(jì)萬能公式讓用戶知道在進(jìn)行了操作之后，如何查看到后續(xù)的結(jié)果發(fā)現(xiàn)

→了