最近接手了一個之前由同事小C在做的項目，是我司服務官網(wǎng)首頁改版的后臺頁面設計鳞溉，說只要出一下視覺稿即可弓柱。我心想后臺頁面結構較簡單、模塊可復用悄谐，有現(xiàn)成的交互稿的情況下三四天肯定能搞定介评。出乎意料的是，全部做完花了十幾天爬舰，總共80多個web頁面们陆，關鍵是交互工作基本上重新做了一遍。

這其中必定是有較大的工作習慣與方法的差異情屹，以下就是我對本次工作的回顧坪仇，無關對錯，只是自己對交互設計的一點個人見解垃你。

先上其中一頁交互稿：

小C的交互稿

如上圖所示椅文，如果是以用戶視角，應該基本可以理解這個頁面的基本功能惜颇、頁面跳轉等情況了皆刺。但交互稿的使用者不是用戶，不能進行籠統(tǒng)地概括官还，而應在顧全大局的前提下做好最細致的工作芹橡，讓我們的下游工作伙伴（視覺、前后端望伦、測試等）能清晰地理解業(yè)務規(guī)則林说、界面元素，可以順利地進行他們的工作屯伞、減少溝通成本腿箩，從而提升工作效率助力項目順利上線。

以下是我認為這份交互稿存在的幾個問題：

1）職責未盡

如圖1所示劣摇，列表顯示規(guī)則珠移、保存反饋提示等信息，都是基本的數(shù)據(jù)展示與操作反饋，也都關切到產(chǎn)品的用戶體驗钧惧，這些信息由我們交互設計師來定義和提供會更合適暇韧。同時也讓下游伙伴不用再浪費時間精力去咨詢產(chǎn)品同學了，減少了溝通成本提高了工作效率浓瞪。同時懈玻，如果我們能把每個細節(jié)思考清楚、主動承擔起一些貌似應該是產(chǎn)品做的工作乾颁，那設計師在團隊中的作用會越來越大涂乌，能得到大家更多的認可。

圖1 交互設計師的職責

2）交互說明不足

如圖2所示英岭，各表單項的填寫與校驗規(guī)則不夠細致湾盒，如果我是前端工程師會有如下疑問：

1）產(chǎn)品名稱：是必填項，那為空時怎么提示诅妹？不能重復罚勾，那重復時怎么提示？

2）產(chǎn)品圖標：有格式及文件大小的要求漾唉，如果用戶上傳不符合要求的文件怎么辦荧库？

3）是否需要登錄、是否為諾諾產(chǎn)品：是下拉單選還是多選赵刑？有幾個選項分衫？如果只有是或否兩個選項的話，把選項直接平鋪出來不是更方便選擇嗎般此？另外有沒有默認選中某一項呢蚪战？

...

圖2 交互說明不足

我們所設計的界面都是需要前端工程師用一行一行代碼還原出來的，有些字段的校驗（比如上方的產(chǎn)品名稱不能重復）還需要后端提供接口一起配合校驗铐懊，所以實際開發(fā)過程中他們思考的會比我們仔細邀桑、碰到的問題也更多。如果我們的設計稿沒有考慮仔細科乎，就勢必會增加后期的溝通成本壁畸，不利于團隊協(xié)作，同時也會降低我們設計師自己的專業(yè)性茅茂。

3）虛增實體

奧卡姆剃刀原理“如無必要捏萍，勿增實體”，在交互設計領域很適用空闲，尤其是2B注重效率的后臺產(chǎn)品令杈。我們要保證每個出現(xiàn)的元素、頁面都是合理的碴倾，是有助于用戶完成任務的逗噩。如圖3所示掉丽，一個產(chǎn)品的信息已經(jīng)在表格中可以完整展示了，沒有必要再設計一個“查看頁”（如圖4）异雁，增加了下游的工作量外捶障，對用戶來講也是一個視覺負擔。

圖3 產(chǎn)品信息已完整展現(xiàn)在表格中

圖4 查看頁

4）頁面形式缺乏考慮

彈窗有結構簡單片迅、減少頁面跳轉等好處残邀，但是當表單項較多時，使用彈窗的形式會有很多兼容性問題柑蛇，特別是一些小屏電腦上，用戶操作時的視野會受限驱闷，不利于把控整體的填寫進度耻台。可以考慮新開一個頁面空另，使用面包屑導航指示當前所處位置盆耽。

5）操作行為的可用性不足

如圖5所示，「刪除」是可以批量操作的扼菠，但「查看」和「編輯」操作只能針對單條數(shù)據(jù)進行摄杂，每次想要查看或編輯時，需要選中一條數(shù)據(jù)后再將鼠標移至頁面頂部點擊這兩個按鈕循榆，可用性會大打折扣析恢，所以放置的位置還需要斟酌一下。建議放在每條數(shù)據(jù)的最后面秧饮，直接點擊按鈕進行這條數(shù)據(jù)的操作映挂。

圖5 操作的可用性

以上簡單說了我認為有優(yōu)化空間的幾點，總之我們最后交付的設計稿盗尸，應該是一份可用性高柑船、滿足業(yè)務需求和用戶需求的產(chǎn)出物，還能讓我們的工作伙伴順利進行他們的工作泼各。

下圖是我以自己的工作習慣和方法重做的設計稿（交互+視覺）：

圖6 重做的設計稿

結語：交互設計師所需要涉獵的知識領域很廣鞍时，大到心理學、人體工程學扣蜻，小到需要考慮操作反饋逆巍、字段命名，還要對技術實現(xiàn)方法有所了解弱贼，這個過程中需要我們勤于思考蒸苇、虛心學習，多積累工作經(jīng)驗吮旅。以下是個人經(jīng)驗認為一份靠譜的交互稿至少需要具備的幾點：

1）高可用性：交互設計作為承接上下游的關鍵一環(huán)溪烤，需要分析業(yè)務需求找到合理的解決方案 ?味咳，同時要兼顧用戶體驗，保證產(chǎn)品的可用性檬嘀。如果不去思考槽驶，只是把產(chǎn)品的PRD復制過來修飾補充一下，其實是遠遠不夠的鸳兽。

2）清晰的結構：給頁面加上有規(guī)則的序號掂铐、準確的標題，能使設計稿井然有序揍异、引導使用者查看全陨。至于是否需要線條箭頭來指示頁面流程要看具體元素、頁面的所屬關系衷掷，一些特別的分支流程是很有必要的辱姨，但大多時候也不用為了使用而使用，縱橫交錯的線條其實也是視覺噪音戚嗅。

3）考慮周到：對于一些特殊情況雨涛，比如字段長度超出如何展示、異常情況的處理等懦胞，我們都需要去考慮替久。這個需要平時積累經(jīng)驗，也可以多做流程圖繪制的練習躏尉，對一個流程進行不斷的是否追問蚯根，是會怎樣，否又如何提示醇份，直到將整個流程都走完基本就不會有遺漏了稼锅。

4）詳盡的交互說明：對于出現(xiàn)在頁面上的元素、字段僚纷，除了一些容易理解而且是寫死的（比如表頭標題）矩距、以及和團隊成員達成一致的內(nèi)容，其他的我們盡量標注交互說明怖竭，越詳盡越好锥债。

——以上

謝謝閱讀，歡迎一起探討：）