騰訊高級設(shè)計師分享交互設(shè)計師必備模版
時間：2023-06-08 07:39:01 | 來源：網(wǎng)站運營
時間：2023-06-08 07:39:01 來源：網(wǎng)站運營
騰訊高級設(shè)計師分享交互設(shè)計師必備模版：作者簡介
WingST（寇敬），男，33歲，騰訊高級交互設(shè)計師、騰訊學(xué)院認證講師，9年工作經(jīng)驗的資深互聯(lián)網(wǎng)人，曾任 MIG 桌面安全產(chǎn)品部 軒轅設(shè)計組組長，目前在騰訊游戲 NEXT Studios 工作室負責(zé)《樂高無限》創(chuàng)造型沙盒游戲的用戶體驗設(shè)計。
負責(zé)過的產(chǎn)品有騰訊電腦管家 V11.0、加速小火箭 V2.0、騰訊手游助手、騰訊網(wǎng)游助手等。曾在OPPO手機、金蝶軟件等企業(yè)工作，有著PC、Web、移動端等多平臺的豐富設(shè)計經(jīng)驗。
作為交互設(shè)計師，天天畫的就是交互稿了。而對于很多新手交互設(shè)計師以及想轉(zhuǎn)行做交互的同學(xué)們來說，一定都非常想知道大廠的交互設(shè)計師畫出來的交互稿具體是怎么一個樣子。
但和視覺稿不同，交互稿里面體現(xiàn)了太多產(chǎn)品本身的邏輯，難免設(shè)計到一些敏感內(nèi)容，所以具體的交互稿不太適合直接分享，這就是比較尷尬的問題了。
不過，這不妨礙我為你們做一份交互稿模板嘛！
一來我自己也在用，二來可以造福大眾，何樂而不為呢！
但我必須重點強調(diào)一句話：框架是死的，人是活的，不一定要拘泥于某種形式，你可以根據(jù)自己的需要自由修改。模版一：PPT型的分頁交互稿
第一個是
PPT型的分頁交互稿。
這個樣式最早是從騰訊CDC團隊流傳下來的，我在第二家公司的時候就從他們的博客中看到過，當(dāng)時還用InDesign做過一個模板。而我現(xiàn)在所在的團隊用的也是這個，因此我過來后就自己重新用Sketch做了一版，方便以后使用。
1.封面
封面很簡單，就是文檔標(biāo)題和作者，頂部有一個通用的文檔標(biāo)題欄，上面的內(nèi)容包括：
- 項目名稱：阿爾法項目（示意）
- 頁面標(biāo)題：iOS主界面框架（示意，根據(jù)每頁的內(nèi)容進行變化）
- 版本號：1.0（每修改一次都要+0.1，當(dāng)然你也可以直接變成2.0、3.0）
- 修改日期：2018-07-24
- 頁碼：分為當(dāng)前頁碼和總頁數(shù)
我在Sketch中為這個模板中需要改動的內(nèi)容都定義了Symbol，比如這個標(biāo)題欄，你只要選中之后，就可以在右邊的屬性面板中自定義里面的內(nèi)容。
2.修訂記錄
修訂記錄這頁，記錄了從文檔建立開始，每次更新的主要內(nèi)容，以及相關(guān)人員，方便后期交接的時候給對應(yīng)的產(chǎn)品經(jīng)理、游戲策劃和設(shè)計師查看。有時候交互稿更新一次只是修改一小處地方，如果不備注一下對方就會很難找，你自己可能以后都會遺忘。
這一塊我也定義了Symbol元件，你可以直接復(fù)制一行，然后修改里面的內(nèi)容，“更新內(nèi)容”的文本支持多行輸入。
3.目錄
這種分頁型的文檔一定要有目錄，備注好每個模塊對應(yīng)的頁碼，否則十幾頁看下來都暈了，每次想找到對應(yīng)的界面還得重新翻一遍。
4.內(nèi)容頁面
具體的內(nèi)容頁面才是交互稿的核心，一般會用小氣泡和箭頭進行標(biāo)注，然后在右側(cè)用對應(yīng)的數(shù)字和它們對應(yīng)，寫下詳細的交互說明。
結(jié)構(gòu)可以有很多種，比如上面這種豎屏的界面可以是左右結(jié)構(gòu)，如果是橫屏界面還可以是上下結(jié)構(gòu)，等等，根據(jù)情況自由調(diào)整吧。文字段落的樣式我已經(jīng)定義好了，直接修改套用就好。
其中最重要的氣泡我當(dāng)然也做了元件，選中之后直接在右邊修改數(shù)字就好。
導(dǎo)出方式
使用這套模板做好交互稿后，使用Sketch的
File -> Export Artboards to PDF 即可將交互稿導(dǎo)出成PDF文檔。我很喜歡這個格式，比起PPT來，PDF在任何平臺都可以很通用，包括手機、Mac不用特地裝什么軟件都能很好地打開。
模版二：長圖型長圖型的流程交互稿
另一種是更常見的交互稿形式，這也是我進騰訊后的這幾年一直在用的格式。
如果你曾經(jīng)用過上文介紹的PPT 型模板，你一定會發(fā)現(xiàn)：它的好處是PDF分頁格式非常整齊，比較適合一次性做一個大產(chǎn)品的交互功能介紹，而不適合小功能的頻繁修改。
而今天介紹的這第二種，則是更加輕便快捷的類型。
1.內(nèi)容模塊
這種長圖型的交互稿，優(yōu)點很明顯：
- 你的發(fā)揮空間很大，可以直接在一片空白上盡情地闡釋每個界面、每個流程，展開說各種細節(jié)；
- 分享和閱讀都很方便，最終格式是一張PNG長圖，隨手一發(fā)就能給老板、產(chǎn)品經(jīng)理和其他相關(guān)同事，電腦手機都能看；
- 不存在分頁和各種格式限制，所以畫起來和修改起來都很快，小迭代要的就是效率。
來看一張基本樣例：
它的結(jié)構(gòu)分為：
- 交互稿標(biāo)題、日期：按照項目、模塊、功能的方式命名（如：電腦管家V12-清理垃圾-深度清理圖標(biāo)化改版），可以最大程度地規(guī)范交互稿名稱，讓其他人很容易理解交互稿涉及的是什么內(nèi)容；
- 相關(guān)負責(zé)人：對應(yīng)的產(chǎn)品經(jīng)理，交互稿的作者，方便評審時或者交接后找人；
- 需求背景：簡單介紹為什么要做這次設(shè)計，出發(fā)點是什么，遇到了什么問題；
- 主要界面：這次設(shè)計中，涉及到的所有主要界面，先陳列出來方便大家快速評審和討論，視覺接手后可以根據(jù)這些來開始風(fēng)格設(shè)計；
- 流程說明：有了主要界面后，我們還可能需要對一些操作流程進行說明，比如怎樣發(fā)送一條語音消息，怎樣刪除一條會話等等；
- 異常狀態(tài)：最后還要記得檢查一下，每個界面在沒有內(nèi)容時候的空狀態(tài)、斷網(wǎng)時的異常狀態(tài)，彈出各種通知的位置等等，千萬不要等到開發(fā)同學(xué)找你的時候才想起來。
上面所說的，就是一份交互稿的常見內(nèi)容模塊了。
2.模板使用
該模板是專門給Mac平臺的Sketch用的，請注意！下載后（下載方式見文末），打開你會看到這個界面：
里面的每個模塊我都做了Symbol元件，你只要選中就可以在右側(cè)更改內(nèi)容了。
比如下面的文檔基本信息：
我還把可能會用到的各種字體大小、顏色、對齊方式都做成了文字樣式：
選中文字后，在右側(cè)下拉框中選擇你要的樣式就好。
交互稿用的當(dāng)然都是黑白灰了，還有藍色作為標(biāo)注，我也都定義好了。
我天天用的就這幾種，足夠用了。
是不是很心動？
別著急，先把這個Sketch文件保存成Template（模板）。
然后，你就可以在新建文件時，選擇從模板處新建，直接用這個模板開始畫稿了。
源文件下載
Sketch 源文件我已經(jīng)上傳到堅果云和百度云網(wǎng)盤上了，需要的同學(xué)請先關(guān)注公眾號
落羽敬齋（wingstudy），然后在公眾號會話界面回復(fù)關(guān)鍵字
交互模板，即可獲取網(wǎng)盤鏈接。
寫在末尾
感謝大家的閱讀，末尾做個小廣告，我的新書
《交互思維：詳解交互設(shè)計師技能樹》今天正式上市了，這是我自己九年多來做交互設(shè)計師的經(jīng)驗總結(jié)，也是市面上第一本詳細介紹交互設(shè)計師所應(yīng)該掌握的職業(yè)技能的書，很適合所有希望了解交互、學(xué)習(xí)交互的設(shè)計師和產(chǎn)品經(jīng)理。同時書中也有我進騰訊的成長故事，以及一些個人工作和學(xué)習(xí)方法的分享，絕對物超所值！
大家在京東、當(dāng)當(dāng)上直接搜索“交互思維”就能找到，特別是今天（4月15日）當(dāng)當(dāng)還有十個小時的首發(fā)五折特惠哦！
這是我所總結(jié)的“交互設(shè)計師技能樹”。
在線咨詢