《交互設計》課件-第6章 流程設計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

→了