第三章 交互設(shè)計中的架構(gòu)與頂層設(shè)計
3.1 了解什么是頂層設(shè)計與架構(gòu)設(shè)計
1.什么是頂層設(shè)計
頂層設(shè)計師運(yùn)用系統(tǒng)的方法，從全局角度對某項任務(wù)或者某個項目的各方面、各層次、各要素統(tǒng)籌規(guī)劃，以集中有效資源，高效快捷地實現(xiàn)目標(biāo)。
頂層設(shè)計是通往架構(gòu)方向的，所以不用關(guān)心具體的實現(xiàn)細(xì)節(jié)，而是想好未來及當(dāng)前的產(chǎn)品架構(gòu)、產(chǎn)品鏈條、產(chǎn)品后臺支撐體系等，這相當(dāng)于在開始做產(chǎn)品之前將整個想法在腦中過了一遍，不要做可以明顯預(yù)見會失敗的事情，用一句話解釋頂層設(shè)計：自頂部往下的設(shè)計方式。
2.交互設(shè)計與頂層設(shè)計的關(guān)系
在交互設(shè)計中包含頂層設(shè)計，在頂層設(shè)計中又包含交互設(shè)計。其含義如下：
交互設(shè)計包含頂層設(shè)計是指：在業(yè)務(wù)邏輯層面上的交互和在架構(gòu)上的交互不同，此處指的是架構(gòu)交互設(shè)計包含頂層設(shè)計部分。在開展交互設(shè)計之前，需要先明確這個產(chǎn)品的架構(gòu)、邏輯等，這個過程就是交互設(shè)計的過程，但是這個過程中進(jìn)行交互設(shè)計的腳骨、邏輯等系統(tǒng)性的工作則屬于頂層設(shè)計的范疇。
頂層設(shè)計中包含的交互設(shè)計指的是業(yè)務(wù)邏輯層面上的交互。頂層設(shè)計好之后開展一系列的細(xì)節(jié)設(shè)計，即需求形成之后開展的原型等設(shè)計，這時候關(guān)心的是細(xì)節(jié)，而不是全局。
3.什么是架構(gòu)設(shè)計
系統(tǒng)的各個重要組成部分及其關(guān)系構(gòu)成了系統(tǒng)的架構(gòu)，這些組成部分可以使具體的功能模塊，也可以是肺功能模塊的設(shè)計與決策，他們相互關(guān)系組成一個整體，共通構(gòu)成了軟件系統(tǒng)的架構(gòu)。
4.架構(gòu)設(shè)計與頂層設(shè)計的關(guān)系
先要有實現(xiàn)生態(tài)體系的方案，根據(jù)體系方案規(guī)劃需要多少個業(yè)務(wù)系統(tǒng)支持，針對業(yè)務(wù)系統(tǒng)再進(jìn)行各業(yè)務(wù)系統(tǒng)的架構(gòu)設(shè)計。
3.2 怎么進(jìn)行頂層設(shè)計
進(jìn)行頂層設(shè)計的時候，需要明確的信息如下：
項目各條業(yè)務(wù)線與產(chǎn)品希望達(dá)成的目標(biāo)；
項目啟動需要的全局資源（例如沒有錢或者找不到錢就實現(xiàn)不了）；
項目個系統(tǒng)的關(guān)聯(lián)體系對接方案；
項目各層面的管理手段與工作體系；
運(yùn)營策略等。
3.3 為什么交互設(shè)計師要學(xué)會頂層設(shè)計
交互設(shè)計將在未來一段時期內(nèi)成為產(chǎn)品競爭的關(guān)鍵因素。用戶體驗、交互體驗的突出則是產(chǎn)品生存下來的制勝法寶，而到那時的交互設(shè)計師就可以更多參與到真正的產(chǎn)品頂層設(shè)計里面去。
3.4 實例：頂層設(shè)計圖例
1.項目背景
這里需要寫出市場調(diào)研、背景介紹、當(dāng)前現(xiàn)狀、競品分析等。
背景介紹：建立一個交互設(shè)計專業(yè)知識分享的網(wǎng)站。
項目名稱：IAMUE網(wǎng)項目。
項目簡介：交互設(shè)計垂直資料分享。
2.項目總體設(shè)計
①需求分析分解，在進(jìn)行頂層設(shè)計時先要做的就是明確需求
②總體框架
在架構(gòu)設(shè)計里需要考慮服務(wù)用戶的數(shù)量，合理構(gòu)建服務(wù)器環(huán)境，搭建服務(wù)平臺等工作。
③服務(wù)框架
服務(wù)框架則表示展現(xiàn)形式與服務(wù)接口，這些是產(chǎn)品的血肉，是直接展現(xiàn)于用戶的界面。
④應(yīng)用框架
由于每一條業(yè)務(wù)線中的應(yīng)用情況都不一樣，所以不再展開討論，下圖僅作為示意圖。
3.5 頂層設(shè)計注意事項
交互設(shè)計師在參與公司戰(zhàn)略級的策劃過程就參與其中，需要注意一下幾點(diǎn)：
·關(guān)心項目延展性
·關(guān)心項目可行性
·關(guān)心具體實施方案
一個優(yōu)秀的IT項目頂層設(shè)計方案的大綱應(yīng)該具有如下內(nèi)容：
·概述
·背景
·項目目標(biāo)
·項目架構(gòu)
·項目服務(wù)框架
·項目執(zhí)行計劃方案
·項目驗收計劃方案
·總結(jié)
第四章 業(yè)務(wù)流程與交互設(shè)計
4.1 業(yè)務(wù)流程圖
4.1.1 流程圖的概念
流程圖是利用圖表的形式展現(xiàn)出工作整體過程的一種方式，它能讓人直觀地理解業(yè)務(wù)步驟，所以一般也成為業(yè)務(wù)流。
對于流程圖的概念一般認(rèn)為流程圖是流程設(shè)計的圖形化展示，還有一種說法是流程（flow）+圖（chart）的概念，流程圖是用來展示項目組件的輸入項與特定輸出項的一系列作業(yè)。
4.1.2 流程圖的種類
一般有程序設(shè)計上的UML流程圖、工業(yè)建筑上的工作流程圖、企業(yè)內(nèi)部門的跨職能流程圖、還有UED常說的頁面流程圖。交互設(shè)計關(guān)心的是業(yè)務(wù)流程圖和邏輯流程圖，其中每一種類型的流程圖又可以細(xì)分為很多具體的流程，如UML流程里的用例圖、類圖等。作為交互設(shè)計師，最好對這些流程圖都會畫，不全會也沒關(guān)系，只需學(xué)習(xí)其中一種，其他的就觸類旁通了。
重點(diǎn)需要掌握制作流程圖的核心——設(shè)計流程。只要設(shè)計好流程，至于用什么圖形展示都沒有太大問題。Visio官方就有不少模板可用。
4.2 業(yè)務(wù)梳理與功能設(shè)計
案例介紹實際的流程與功能模塊的設(shè)計。
1.需要提前確認(rèn)的注意事項
·案例是一個APP項目，需要進(jìn)行業(yè)務(wù)流程設(shè)計與交互設(shè)計。
·選取APP的平臺（安卓、ios還是WP），本案例選用安卓平臺。
·確認(rèn)項目采用安卓系統(tǒng)版本，本案例采用安卓4.4版本。
·確認(rèn)項目核心需求。
2.本案例的核心需求
·多用戶協(xié)作辦公平臺APP端的即時通信。
·打卡簽到功能。
·我的任務(wù)管理：增、刪、改、查。
·查看任務(wù)詳情。
·更新任務(wù)進(jìn)度。
·任務(wù)帖子內(nèi)的評論與回復(fù)（@功能）
·登錄與管理員注冊驗證。
·通知提醒服務(wù)。
4.2.1 業(yè)務(wù)抽象流程圖
在對一個項目進(jìn)行交互設(shè)計之前，要先有項目需求，根據(jù)需求抽象出業(yè)務(wù)流程圖。
再設(shè)計流程的同時，功能模塊也要一起列出來，否則沒有業(yè)務(wù)功能哪有流程？如圖所示是一個功能圖表 的模板。
1.設(shè)計功能模塊
根據(jù)上面的核心需求提示找出幾個重要的模塊作為主要模塊。設(shè)計出核心模塊如下：
·即時通信模塊
·任務(wù)管理模塊
·登錄注冊模塊
·通知消息模塊
2.根據(jù)模塊順藤摸瓜設(shè)計功能點(diǎn)
在一級模塊下進(jìn)行細(xì)分功能點(diǎn)設(shè)計。
（1）即時通信模塊
·通信錄功能
·消息聊天
·發(fā)送圖片
·表情聊天
·傳送文檔支持DOC、PPT、XLS、ZIP格式
·聊天自動同步功能
·查看聯(lián)系人詳細(xì)資料
（2）任務(wù)管理模塊
·發(fā)布新任務(wù)
·發(fā)布任務(wù)進(jìn)度狀態(tài)
·查看任務(wù)詳情
（3）登錄注冊模塊
·企業(yè)郵箱登錄功能
·注冊功能
（4）消息通知模塊
·閱讀消息通知
·編輯消息通知狀態(tài)
4.2.2 功能組織圖
根據(jù)4.1.1中的內(nèi)容可以看出功能模塊、功能點(diǎn)以及功能組織架構(gòu)，也可以大致看清楚整個項目的形態(tài)，這時再去制作包含業(yè)務(wù)邏輯的流程圖
4.3 交互設(shè)計中的流程圖制作
4.3.1 流程圖繪制工具
產(chǎn)品經(jīng)理或技術(shù)經(jīng)理通常需要畫一些技術(shù)性的邏輯流程圖，這里推薦使用Visio、Mindjet Mindmanager。
用戶體驗和產(chǎn)品設(shè)計或交互設(shè)計師需要畫一些界面流程圖，則可以使用如：Axure、Justinmind、Visio、Balsamiq等原型設(shè)計工具來設(shè)計可交互的流程。
也有一些在線的流程協(xié)作工具如：Gliffy、Processon。
4.3.2 部門流程圖
部門工作流程圖是在多部門寫作的時候可能會遇到的一種圖，利用它可以方便地將各個業(yè)務(wù)線需求理清楚。
4.3.3 業(yè)務(wù)流程圖
業(yè)務(wù)流程圖是交互設(shè)計的核心，交互設(shè)計師需要根據(jù)需求設(shè)計出的功能進(jìn)行布局，根據(jù)也無需求來提取出其中的核心流程。
4.3.4 邏輯流程圖
邏輯流程圖是在業(yè)務(wù)流程圖確定之后根據(jù)每一個功能點(diǎn)進(jìn)行的邏輯梳理。
4.3.5 交互頁面流程圖
當(dāng)完成邏輯流程圖之后，得出具體的功能走向，開展原型設(shè)計，此時就要把邏輯套入到業(yè)務(wù)當(dāng)中來，把每個流程點(diǎn)用線框圖或高保真原型界面替換，形成頁面流轉(zhuǎn)圖。
4.4 業(yè)務(wù)流程案例
略。
4.5 流程設(shè)計技巧
4.5.1 技巧一：充分理解需求
設(shè)計功能的目的是滿足需求，但不能僅滿足功能需求，還要注重體驗，體驗不好，使用率和轉(zhuǎn)化率始終上不去也注定是一個失敗的產(chǎn)品。
4.5.2 技巧二：提取核心業(yè)務(wù)流
需要再設(shè)計之初就要想好什么是產(chǎn)品特色，怎么體現(xiàn)出產(chǎn)品特色功能，這就需要根據(jù)核心需求提取出核心業(yè)務(wù)需求，并根據(jù)核心業(yè)務(wù)需求設(shè)計出產(chǎn)品的功能業(yè)務(wù)流程。
4.5.3 技巧三：邏輯描述清晰
邏輯的清晰是基于流程設(shè)計而言的，在做設(shè)計的時候要嚴(yán)格遵守已經(jīng)確認(rèn)的邏輯流程。
第五章 原型設(shè)計
5.1 原型和原型設(shè)計的概念
1.原型的概念
在交互領(lǐng)域講的原型是指根據(jù)產(chǎn)品需求，進(jìn)行產(chǎn)品具體化形態(tài)設(shè)計后形成的Demo,我們稱這兒Demo為原型。
2.原型設(shè)計的概念
針對產(chǎn)品需求做出的具體形態(tài)展示的作業(yè)過程，一般理解為框架、結(jié)構(gòu)、頁面地圖的設(shè)計展示。
（1）線框圖
（2）低保真原型
（3）高保真原型
5.2 原型設(shè)計的歷史
略。
5.3 原型設(shè)計未來發(fā)展趨勢
web服務(wù)+APP展示+pc端的跨平臺服務(wù)模式。
5.4 原型設(shè)計與產(chǎn)品設(shè)計的關(guān)系
產(chǎn)品設(shè)計也包含原型設(shè)計。產(chǎn)品設(shè)計師主要負(fù)責(zé)：需求整理、框架搭建、系統(tǒng)架構(gòu)的設(shè)計和PRD的編寫。
5.5 常用原型設(shè)計工具
①需求調(diào)研階段會用到：XMind、Mindjet、Excel、Visio等
②原型設(shè)計階段會用到：Axure、Justinmind、Visio、AI、PS、Sketch等矢量圖制作工具。
5.5.1 需求與邏輯：使用思維導(dǎo)圖理清產(chǎn)品細(xì)節(jié)
5.5.2 Axure原型設(shè)計工具
略。
第六章 高保真原型設(shè)計
6.1 什么是高保真原型設(shè)計
高保真原型是指一個利用原型設(shè)計工具做出的交互原型+UI設(shè)計師切圖，形成一個與真實產(chǎn)品一致或高度相似的原型Demo。
6.2 關(guān)于高保真的爭論
（1）需要的場景一：以項目為導(dǎo)向
（2）需要的場景二：以UI視覺界面為導(dǎo)向
6.3 實例：制作高保真原型
略。
第七章 測試并評估交互設(shè)計原型
1.什么是測試并評估交互原型
原型評估是指描述用來確認(rèn)腳骨、邏輯、使用場景的交互設(shè)計方案的正確性、完整性、安全性和質(zhì)量的過程。
2.為什么要測試并評估交互設(shè)計原型
為了確保交互原型是一個可以被項目組執(zhí)行、被用戶所接受的設(shè)計方案。需要測試和評估交互原型。
7.1 常用的測試方法
1.通過建立用戶模型進(jìn)行內(nèi)部自測
用戶模型測試是指由設(shè)計師虛構(gòu)出一個典型用戶，來代表一個用戶群，用戶模型的內(nèi)容包括消費(fèi)習(xí)慣、產(chǎn)品使用習(xí)慣、生活習(xí)慣、性別、年齡、收入、地域、情感、上網(wǎng)方式、搜索歷史、名片關(guān)鍵詞等。
根據(jù)項目情況設(shè)計3-6個用戶模型就足夠代表所有的用戶群體。
2.進(jìn)行可行性分析測試
可行性分析測試是產(chǎn)品規(guī)劃階段必不可少的步驟之一，如果你的方案是一個不可實現(xiàn)的方案，那就最好不要浪費(fèi)別人的時間來閱讀和執(zhí)行它。
雖然我們的工作時間和資源有限，但你設(shè)計的產(chǎn)品是給真實的人所使用的，因此，也應(yīng)該在真實的用戶身上進(jìn)行測試。
3.組織焦點(diǎn)小組
焦點(diǎn)小組的說法源于國外，這個說法和“用戶訪談”類似，可以理解為用戶訪談就是焦點(diǎn)小組，其目的就是把目標(biāo)用戶、已有用戶、相關(guān)專家等人員組織起來由一個主持人給出話題進(jìn)行討論，并記錄大家發(fā)言，然后總結(jié)出有用的信息來幫助整理需求和設(shè)計產(chǎn)品。
4.專家把關(guān)
在產(chǎn)品原型測試和評估階段，找經(jīng)驗豐富的產(chǎn)品經(jīng)理、交互設(shè)計師等UED專業(yè)人員對產(chǎn)品進(jìn)行測試，發(fā)現(xiàn)可用性問題并給出解決方案。
7.2設(shè)計測試用例
測試用例是一個文檔，用來描述交互動作中的輸入數(shù)據(jù)、點(diǎn)擊或滑動等動作、等待時間等，用戶根據(jù)交互動作，測試所期望的結(jié)果是否能正確呈現(xiàn)。
7.2.1確定用戶場景
7.2.2明確任務(wù)
設(shè)計測試用例時要明確產(chǎn)品設(shè)計中每個功能的使用場景，并為測試人員解釋清楚，明確任務(wù)后要給具體的人分配具體的任務(wù)，并根據(jù)任務(wù)搜集測試結(jié)果。
匯總問題和討論解決方案。
7.3測試和評估交互原型總結(jié)
略。
第八章 交互設(shè)計說明書的制作
8.1 交互設(shè)計說明書的類型
交互設(shè)計說明書是用來梳理交互事件、頁面流程邏輯和跳轉(zhuǎn)等交互懂的文字+圖標(biāo)的描述文檔，并分別提供給UI設(shè)計團(tuán)隊、研發(fā)團(tuán)隊及測試團(tuán)隊，甚至有些還需要提供給老板等人查看。
8.1.1 正式版交互設(shè)計說明書
正式版交互設(shè)計說明書多以文字為主，其中主要頁面的交互界面截圖、注釋、文案等都要寫清楚。
8.1.2 Visio版頁面邏輯流程交互設(shè)計說明書
頁面邏輯流程交互設(shè)計說明書注重界面交互邏輯，并有清晰的文案注釋，這樣可以很方便地將頁面介紹清楚，但是只做起來比較繁瑣。
8.1.3 Axure版本PRD或交互設(shè)計說明書
是指在Axure里制作完成后生成的HTML頁面，采用這種方式不僅修改方便，而且支持多人在線協(xié)作編輯。
8.2 如何編輯交互設(shè)計說明書
8.2.1 交互設(shè)計說明書的閱讀對象
1.產(chǎn)品經(jīng)理場景：交互邏輯、功能架構(gòu)、交互事件、界面頁面流轉(zhuǎn)與內(nèi)容布局等。
2.UI設(shè)計師場景：具體頁面數(shù)量。
3.研發(fā)工程師場景：明確表示出關(guān)于功能設(shè)計、頁面邏輯、組件交互等信息的細(xì)節(jié)。
4.測試與需求場景：每一個功能的交互動作與事件，配合說明性文字解釋交互設(shè)計的思路與實現(xiàn)路徑。功能點(diǎn)、業(yè)務(wù)邏輯、界面元素、交互過程分解步驟。
8.2.2 交互設(shè)計說明書包含的內(nèi)容
1.寫什么
其實交互文檔就是頁面文檔，把原型截圖或原型直接化成一個文檔即可，所有的軟件頁面、狀態(tài)都分離出頁面進(jìn)行展現(xiàn)，然后加入頁面流程和交互動作說明文字、箭頭指示線條燈。
關(guān)鍵點(diǎn)：邏輯結(jié)構(gòu)、頁面跳轉(zhuǎn)、交互狀態(tài)的文字說明，統(tǒng)一交互體驗動作，確保頁面組件的一致性。
2.怎么寫
一般的交互設(shè)計說明書的文檔結(jié)構(gòu)如下：
文檔封皮與版本信息；
目錄頁；
log修訂記錄頁；
交互行為邏輯圖+文字說明；
頁面展開圖+邏輯+文字；
詳細(xì)介紹其他單獨(dú)的交互動作。
第九章 ?組織交互設(shè)計評審會
略。
第十章 產(chǎn)品與交互設(shè)計都要懂
略。
