源：站酷網

作者：宛蘇

鏈接：https://www.zcool.com.cn/article/ZMTAxOTU0OA==.html

在做交互文檔之前，我們先要明白什么是交互文檔、為什么要做以及做了給誰看。

什么是交互文檔

交互文檔，即交互設計說明文檔。英文 Design Requirement Document ，簡稱DRD。主要是用來承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。

為什么需要交互文檔

有些人可能對文檔這種東西比較反感，尤其是從事工作不久的朋友。其實工作得越久，越會發現文檔的重要性，它可以幫助你理清思路，并記錄下來，便于回顧。

工作上而言，有一份規范的文檔可以讓你的設計更有說服力，也易于工作對接，提高彼此之間的溝通效率。

交互文檔給誰看的

交互文檔其實要說給誰看，其實具體情況具體分析。有的公司老板也要盯交互文檔，以及甲方爸爸、運營部門同事，都有查看的可能。

「產品經理」產品經理與交互設計師可能是溝通最多的人，產品經理主要在文檔中確認設計思路和業務流程，然后過一下頁面交互模塊。

「視覺設計」UI設計師通常最關注的是頁面交互模塊，有著產品思維和體驗思維的設計師也會仔細看一下設計思路和產品背景，以便于自己更了解產品業務邏輯和用戶心理。

「開發人員」前端的開發同事和UI設計師一樣，最關注頁面交互模塊，其他的作為提升會輔助了解。而后端開發人員關注更多的是業務邏輯、信息架構、操作流程等，這些都清晰了，他們才能輸出一份準確合格的開發文檔。

「測試人員」因為測試人員是把關產品上線的一群人，所以各個模塊、步驟都應該去了解透徹，才能提出有效的bug。

如何撰寫交互文檔

本文主要闡述以Axure軟件為撰寫工具，大家可以根據實際需求決定用什么軟件（Sketch、PPT、Word、PS、AI 等）。比如小需求可以用Sketch，快而高效。如果是要給甲方爸爸/大老板看的，使用PPT會讓他們更好理解。

通常，一個比較基礎、規范的交互文檔（DRD）由：文檔封面、更新日志、文檔圖例、設計背景/思路、業務流程、頁面交互、全局通用說明、廢紙簍八部分組成。當然，這不是絕對，你可以根據你的實際工作需要進行增減。

比如，如果是C端產品的話，用戶調研的結論、用戶畫像、用戶體驗地圖等等，都可以放進去給看的人一個參考。尤其是在如今這么關注用戶體驗、產品思維的一個大環境下，這些數據支撐很有力量。同時還可以幫助開發人員、界面設計人員培養產品思維、體驗思維，大家一起將產品變得更好。

其次，交互文檔的整潔與美觀也很有必要。相信在過去幾年不少人有遇到過這樣的產品經理（兼交互），他們會輸出一些有時連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。當開發和界面設計的人提出質疑的時候還美其名曰線框不重要，重要的是里面的業務邏輯。。。其實用產品思維想，交互文檔就是交互設計師的產品，而看的人就是用戶，保持良好的可讀性，可謂至關重要。

1. 文檔封面

交互文檔的封面如上圖，通常包括產品的名稱、Logo、版本號以及版本發布時間、所屬部門、對接負責人/對接人。

2. 更新日志

我們都知道，在產品的迭代的過程中，需求/功能是會不斷調整的。而更新日志，就是為了迭代而生。它一般由修改日期、修改內容、修改人、版本號和備注組成。如果是新增的功能或模塊，建議是要加上鏈接可直接跳轉至新增內容的，如上圖。

版本號也是同理，都應加上對應的版本鏈接，便于查看者回溯之前的內容，與當前的新版本形成對比。這一點對開發人員來說很重要，其次對于新同事深入理解產品也能起到很大的幫助。

修改日期，通常是按時間倒序排列，查看起來會比較方便。

3. 文檔圖例

文檔圖例，顧名思義就是關于此文檔的一些輔助說明，目的是為了讓讀者更好地理解文檔。如上圖的：操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。

4. 設計背景/思路

設計背景，根據實際工作需要，放置一些關于思路整理、靈感來源的文檔。

比如用研報告、用戶畫像、競品分析報告、商業畫布等等。增強文檔的說服力，盡量讓每一個人都能理解到產品的戰略目標和業務邏輯。

因為我今年對接最久的是一個B端產品的項目，所以整理了一個產品畫像，僅供參考。

5. 業務流程

業務流程圖，不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程，直接和業務掛鉤，可以說是產品的核心流程。

例如淘寶APP，買家購物由始至終的流程就是它的業務流程。通常用泳道圖的形式展示，多數情況下是由產品經理繪制。

以上是我所負責產品的核心業務的流程圖。因為是B端產品，涉及角色較多，針對3個代表性角色分別進行了繪制，僅供參考。(涉及到保密協議，所有關鍵詞都去掉了)

6. 頁面交互

信息架構

信息架構屬于用戶體驗的結構層，是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代，否則不會大改。

權限說明

如果是C端產品，權限這一塊相對簡單，比較好整理的。B端產品涉及角色眾多，可能要單獨拎出來分析整理。以上僅供參考，大家具體情況具體分析。若是功能很單一的產品，交互文檔中也可省去這個模塊。

操作流程圖

產品操作流程圖就是通過圖形化的表達形式，闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時，會產生的一系列操作和反饋的圖標。

注：不要將所有流程匯總在一個表里，或者展示在同一個頁面中，而應跟隨具體的操作或者功能模塊放置。時刻想著看文檔的人的感受，怎么易懂怎么來。

上圖是登錄、注冊和找回密碼的操作流程圖。僅供參考。模板源文件下載，后臺回復「交互」即可。

頁面線框圖

頁面線框圖，是通過圖形化的表達形式，闡述產品在頁面層面的信息。包括：

「頁面標題」即每一個頁面的對應標題，一般就是導航欄標題

「頁面內容」以黑白為主，保證信息規整易讀

「交互說明」用標簽將其對應起來，包括交互邏輯、操作流程及反饋、元素狀態、字符限制、異常/特殊狀態、相關規則 等等

「主流程線」只需要畫出主流程線即可，千萬不可太多太雜，時刻考慮讀者的感受

以上是注冊/登錄的線框圖和詳細的交互說明。將重點內容用紅色標記，可以讓查看者一目了然更好理解文檔。

7. 全局通用說明

全局通用說明，指整個產品可通用或者復用的元素。一般是邊做文檔邊整理出來的，方便自己或者接手該項目的設計師直接調用。其次，對開發及時封裝可復用控件也是有參考價值的。

常用控件

常用控件類似UIKit，通常將極具復用價值的控制整理在一起，方便及時調用。

復用界面

顧名思義就是全局可復用的一些內頁，比如選擇聯系人、獨立搜索頁等。

時間規范

在做產品的第一步，就應該約定一個時間規范。不然各個端開發出來，你會發現iOS是斜杠的，Android是橫杠的，WEB是圓點的…真到了發現的時候再改，那真是彼此都是無比崩潰的。

缺省頁匯總

缺省頁一般包括加載失敗、加載中、網絡中斷和無數據的空頁面。為空頁可以按照模塊整理在一起，方便UI設計師最后一起設計缺省頁，保持風格統一。

8. 廢紙簍

廢紙簍，被稱為是交互文檔的「后悔藥」。在需求不斷變動的情況下，改改改的過程中，請把你改過的稿子，放這里！！！因為很可能最后還是用的第一個方案…（此刻內心有點絕望）

總結

文檔、軟件只是工具，最重要的還是要落地、實行起來才能對產品有所幫助。所以在撰寫文檔的每時每刻，都應該站在「讀者」的角度思考，他們看的時候感受會是怎樣的，會覺得很難理解嗎？

除此之外，還需要有耐心，耐心給他們講解理解不透徹的地方。用一個朋友的話總結下：好的設計都是被虐出來的。（其實干哪一行不是呢…♀?重要的是：心態心態～）

本文旨在提供參考，并非絕對的規范，還望拋磚引玉，多多交流。

言

WKWebView是iOS8 出來的瀏覽器控件,用來取代UIWebView.對于WKWebView與UIWebView的對比特點,這里就不過多的敘述,都算是老生常談的問題了,網上的說明也很多.近來在做Web端,需要植入移動端,并且做JS交互工作.以前寫過的JavaScript:淺談iOS與H5的交互-JavaScriptCore框架是用于UIWebView.在WKWebView并不適用了,自己做的過程中遇到一些坑,在這里總結一下,做一下記錄.

WKWebView加載本地 html文件

現在的項目要求就是使用存儲在本地的html文件 js文件 css文件 img圖片等文件.我使用HBuilder創建了一個Demo工程.里面包含了基本的文件以及圖片資源.如下所示.然后拖到Xcode工程中.

然后我們把整個Html工程文件夾導入工程中.

WKWebView 在iOS 9 有新的加載本地方法- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));.但是我看了網上有一些博客說- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;并不能加載本地html文件.其實兩者都能加載.只是需要把路徑寫對.第一個方法就不過多敘述了.網上有很多的博客.這里我就用第二個方法來看一下如何加載.

NSString *path=[[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"index.html"];

NSURLRequest *request=[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];

[_mainWebView loadRequest: request];

• 1
• 2
• 3

運行效果圖如下.

Xcode工程中 html文件 加載js文件 css文件 img文件

上面我們加載了html.可是css樣式 .img文件和js文件都沒有加載出來.那么我們該如何解決呢?(html原始加載圖如下所示.)

對于css文件、img文件 ,js文件我們只需要把html文件中的文件夾路徑刪除即可.如下所示.

???????? 注意:這里是使用的- (WKNavigation *)loadRequest:(NSURLRequest *)request;方式加載的網頁.所有如上設置即可.如果使用的是loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL或者loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;都需要設置本地資源文件所對應的路徑! 我們只需要把資源文件所對應的路徑設置給readAccessURL 和 baseURL即可(). 例如下面所示.

//假定都在工程根目錄之下.

NSURL *baseURL=[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

[_mainWebView loadHTMLString:[self loadHtmlString] baseURL:baseURL];

• 1
• 2
• 3

對于js文件,有時候我們發現我們就算如上刪除了js文件夾的路徑依然不能使用.這是為什么呢?.這里就要去檢測查看工程的設置,是否把js文件當成一個可編譯文件使用了.我們需要把它移動到資源文件中.這樣就能正常加載了.如下圖所示.

WKWebView中警告窗 確認面板 輸入框的顯示

相比于UIWebView,WKWebView對警告窗 確認面板 輸入框并不能直接顯示.是通過WKUIDelegate代理方法收到對應的回調方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;

//接收到確認面板

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

//接收到輸入框

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

• 1
• 2
• 3
• 4
• 5
• 6

我們只需要對上面的回調方法進行實現即可實現顯示警告窗 確認面板 輸入框等需求.

WKWebView中OC方法調用JS方法

在WKWebView OC方法調用JS方法方法比較簡單.我們只需要使用如下方法即可.

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

• 1

看一下我寫的例子.在index.js中定義一個方法.方法內容為彈出一個警告框.代碼如下所示.

function alertAction(message) {

alert(message);

}

• 1
• 2
• 3

然后在ViewController控制器中定義一個Button.定義它的點擊方法.代碼如下所示.

- (UIButton *)alertButton{

if (_alertButton==nil) {

_alertButton=[[UIButton alloc] initWithFrame:CGRectMake(KMainWidth*0.2, KMainHeight - 60, KMainWidth * 0.6, 40)];

_alertButton.backgroundColor=[UIColor colorWithRed:250/255.0 green:204/255.0 blue:96/255.0 alpha:1.0];

_alertButton.layer.cornerRadius=6.0f;

_alertButton.layer.masksToBounds=YES;

_alertButton.titleLabel.font=[UIFont systemFontOfSize:16];

[_alertButton setTitle:@"彈出彈窗" forState:UIControlStateNormal];

[_alertButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[_alertButton addTarget:self action:@selector(alertButtonAction) forControlEvents:UIControlEventTouchUpInside];

}

return _alertButton;

}

- (void)alertButtonAction{

[self.mainWebView evaluateJavaScript:@"alertAction('OC調用JS警告窗方法')" completionHandler:^(id _Nullable item, NSError * _Nullable error) {

NSLog(@"alert");

}];

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

因為彈窗不能直接顯示.所以我們實現了對應的代理方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

UIAlertController *alert=[UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action=[UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

completionHandler();//此處的completionHandler()就是調用JS方法時，`evaluateJavaScript`方法中的completionHandler

}];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

這時候我們點擊按鈕就會調用對應的JS方法了.相比于JavaScriptCore框架還是非常簡單的.效果圖如下所示.

WKWebView中JS方法調用OC方法

上一個模塊我們看到了OC方法調用JS方法.那么JS方法調用OC方法呢?我們也只需要幾步就可以完成調用.

第一步.我們需要在WKWebView創建的過程中初始化添加ScriptMessageHandler.(命名自定例如:currentCookies.如下所示)

WKWebViewConfiguration *configuration=[[WKWebViewConfiguration alloc] init];

WKUserContentController *userController=[[WKUserContentController alloc] init];

configuration.userContentController=userController;

_mainWebView=[[WKWebView alloc] initWithFrame:CGRectMake(0, 0, KMainWidth, KMainHeight) configuration:configuration];

[userController addScriptMessageHandler:self name:@"currentCookies"];

• 1
• 2
• 3
• 4
• 5

然后實現代理方法.監聽JS的回調.為了查看效果,我們仍然使用彈窗的形式展示我們的回調信息.代碼如下所示.

//JS調用的OC回調方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

if ([message.name isEqualToString:@"currentCookies"]) {

NSString *cookiesStr=message.body;

NSLog(@"當前的cookie為： %@", cookiesStr);

UIAlertController *alert=[UIAlertController alertControllerWithTitle:@"提示" message:@"JS調用的OC回調方法" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action=[UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:nil];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

然后在Html文件中添加點擊方法.

<div id="button_div" onclick="buttonDivAction()">

點擊調用OC方法

</div>

• 1
• 2
• 3

緊接著.在js文件中實現點擊事件.這時候要注意的是ScriptMessageHandler的名稱要與上面定義的一致.

function buttonDivAction() {

window.webkit.messageHandlers.currentCookies.postMessage({

"body": "buttonActionMessage"

});

}

• 1
• 2
• 3
• 4
• 5

然后我們點擊網頁中對應的div就會出現對應的彈窗.效果圖如下所示.

并且控制臺打印信息如下所示.

總結

相比于UIWebView,WKWebView確實更加的方便快捷.本篇博客就到這里了.如果有任何問題,歡迎在評論區回復騷棟.感謝觀看,最后還是附上本篇博客的Demo傳送門.