一名專業(yè)的設(shè)計(jì)師，交互文檔是日常工作最重要的輸出件，尤其交互說(shuō)明，它承載著我們的設(shè)計(jì)思路、交互邏輯、頁(yè)面規(guī)則說(shuō)明等，是設(shè)計(jì)師與開發(fā)溝通與協(xié)作的重要橋梁。

然而部分同學(xué)沒有專門練習(xí)過(guò)說(shuō)明文檔撰寫，在寫說(shuō)明時(shí)，總或多或少有遺漏的點(diǎn)，導(dǎo)致產(chǎn)品開發(fā)過(guò)程中被發(fā)現(xiàn)重新補(bǔ)齊，增加了溝通與時(shí)間成本。

因此，今天想從字段說(shuō)明、頁(yè)面排版、元素交互規(guī)則、頁(yè)面/彈窗交互四方面與大家分享如何把交互說(shuō)明撰寫清晰，避免出現(xiàn)返工情況。

一、字段說(shuō)明

字段是組成界面的重要元素，一款產(chǎn)品中肯定會(huì)有數(shù)據(jù)信息錄入功能，如創(chuàng)建活動(dòng)界面，我們需要填寫活動(dòng)標(biāo)題、活動(dòng)內(nèi)容或者圖片。

那么在頁(yè)面設(shè)計(jì)時(shí)，必須要對(duì)字段進(jìn)行解釋。

字段說(shuō)明主要包括 5 個(gè)信息：

1. 字段名稱
2. 數(shù)據(jù)類型
3. 字符長(zhǎng)度（最小最大值）
4. 是否必填
5. 備注。

例如新增活動(dòng)頁(yè)中字段說(shuō)明如下：

1. 活動(dòng)主題：必填，字符串類型，最多 30 個(gè)字符，超過(guò) 30 字符禁止輸入；
2. 活動(dòng)海報(bào)：必填，點(diǎn)擊活動(dòng)海報(bào)同樣調(diào)起手機(jī)圖片功能，讓用戶選擇活動(dòng)海報(bào)圖片；
3. 報(bào)名人數(shù)：必填，數(shù)字類型，最多 7 位字符；
4. 活動(dòng)開始時(shí)間：必填，點(diǎn)擊調(diào)用時(shí)間選擇組件，精確到分鐘，如 2023-12-30 17:16
5. 活動(dòng)結(jié)束時(shí)間：必填，點(diǎn)擊調(diào)用時(shí)間選擇組件，同樣精確到分鐘，但活動(dòng)結(jié)束時(shí)間不能小于開始時(shí)間”

PS：字段說(shuō)明的形式有兩種：直接撰寫文字說(shuō)明或者列表格進(jìn)行說(shuō)明都可。

二、頁(yè)面排版布局說(shuō)明

在做內(nèi)容頁(yè)面或者頁(yè)面詳情展示時(shí)，需要對(duì)可變參數(shù)的極限值以及展示方式進(jìn)行說(shuō)明。

什么是可變參數(shù)？就是字段是通過(guò)參數(shù)（如用戶配置）而并非系統(tǒng)固定的，譬如淘寶中商品信息列表的商品名稱，不同商品字符長(zhǎng)度并不固定，倘若名稱太長(zhǎng)，則需要考慮換行顯示或省略符。

所以當(dāng)設(shè)計(jì)可變字符組成的界面時(shí)，我們需要說(shuō)明：

1. 一行最多顯示多少字符？
2. 超過(guò)后是否換行？
3. 最多顯示多少行？
4. 是否需要用...（省略符）省略。

看個(gè)活動(dòng)列表與活動(dòng)詳情案例，當(dāng)活動(dòng)名稱與內(nèi)容過(guò)長(zhǎng)時(shí)候，規(guī)則如下：

三、元素交互規(guī)則

元素交互有三種：按鈕、信息輸入框、以及圖片。

① 按鈕的交互包括默認(rèn)狀態(tài)、可點(diǎn)擊狀態(tài)、點(diǎn)擊后交互，這些按鈕交互我們?cè)谠O(shè)計(jì)時(shí)需要考慮仔細(xì)，例如在登錄/注冊(cè)時(shí)：

1. ?未輸入手機(jī)號(hào)與手機(jī)驗(yàn)證碼，按鈕默認(rèn)置灰（不可點(diǎn)擊）；
2. 用戶輸入手機(jī)號(hào)與驗(yàn)證碼后，注冊(cè)/登錄按鈕狀態(tài)從置灰轉(zhuǎn)化成可點(diǎn)擊狀態(tài)；
3. ?按鈕點(diǎn)擊后跳轉(zhuǎn)到產(chǎn)品首頁(yè)（點(diǎn)擊后交互）”

② 信息輸入框交互包括默認(rèn)狀態(tài)、選中狀態(tài)、信息輸入狀態(tài)與輸入后狀態(tài)。例如在注冊(cè)/登錄頁(yè)面中，手機(jī)號(hào)輸入框交互：

1. 輸入框默認(rèn)顯示「請(qǐng)輸入手機(jī)號(hào)」；
2. 點(diǎn)擊輸入：輸入框獲取焦點(diǎn)，喚起「數(shù)字鍵盤」；
3. 輸入過(guò)程：輸入框非空且在輸入狀態(tài)時(shí)，末尾顯示一鍵刪除按鈕；
4. 輸入完成且失去焦點(diǎn)時(shí)，顯示完整號(hào)碼；
5. 用正則表達(dá)式判斷用戶是否符合手機(jī)號(hào)規(guī)則，否則提醒「請(qǐng)輸入正確的手機(jī)號(hào)」；（必要時(shí)我會(huì)對(duì)內(nèi)容進(jìn)行實(shí)時(shí)校驗(yàn)）”

③ 圖片交互更多在 banner 與信息列表/詳情頁(yè)面中出現(xiàn)，例如淘寶首頁(yè) banner、商品詳情。

Banner 的交互包括輪播時(shí)間，手勢(shì)切換，圖片點(diǎn)擊后交互，如 JD 首頁(yè) banner 輪播間隔是 5 秒，可以通過(guò)左滑或右滑切換，點(diǎn)擊后跳轉(zhuǎn)到商品詳情；

信息列表/詳情則需要說(shuō)明圖片點(diǎn)擊后放大還是鏈接跳轉(zhuǎn)、長(zhǎng)按交互以及圖片放大后能夠繼續(xù)左右切換；

④ 頁(yè)面/彈窗交互

頁(yè)面或彈窗跳轉(zhuǎn)以一般都是用戶交互進(jìn)行作為前置條件觸發(fā)。

例如最常見的按鈕單擊跳轉(zhuǎn)頁(yè)面、從左向右滑動(dòng)返回上一頁(yè)或者上往下滑喚醒小程序等，這些在界面設(shè)計(jì)時(shí)都需要手勢(shì)+交互形式進(jìn)行說(shuō)明。

此外還有稍微復(fù)雜的彈窗或界面跳轉(zhuǎn)交互，如：初次登錄時(shí)彈窗廣告、倒計(jì)時(shí) x 秒彈窗關(guān)閉，搖一搖跳轉(zhuǎn)廣告頁(yè)面，我們都需要把每一個(gè)交互邏輯交代清晰。

例如在設(shè)計(jì)用戶首日登錄彈窗時(shí)，彈窗說(shuō)明文檔：

1. 用戶當(dāng)日首次登錄時(shí)，彈出簽到彈窗，點(diǎn)擊領(lǐng)福利則獲取獎(jiǎng)勵(lì)，隨后關(guān)閉彈窗，或者點(diǎn)擊 X 按鈕直接關(guān)閉彈窗，關(guān)閉后當(dāng)天不再顯示。
2. 如果用戶不操作，彈窗倒計(jì)時(shí) 15S 后自動(dòng)關(guān)閉?！?/li>

其他細(xì)節(jié)交互說(shuō)明

其實(shí)，除了上文提及的核心交互外，在界面設(shè)計(jì)時(shí)還可能會(huì)遇到更多的交互方式。

如果想把產(chǎn)品做到極致，那么在寫交互文檔時(shí)需要我們細(xì)心把每一個(gè)交互點(diǎn)寫清晰明了，最后產(chǎn)品落地后才能避免返工。