如何輸出高質(zhì)量的交互稿？來(lái)看京東設(shè)計(jì)師的總結(jié)！

交互設(shè)計(jì)師作為近年興起的互聯(lián)網(wǎng)設(shè)計(jì)崗位之一，具有其崗位產(chǎn)生的背景的特殊性。從交互設(shè)計(jì)師崗位職能來(lái)講，它是產(chǎn)品與視覺(jué)、前端開(kāi)發(fā)的橋梁，是產(chǎn)品研發(fā)線(xiàn)上的連接紐帶。由于交互設(shè)計(jì)師既不是需求的發(fā)起者，也不是完全算是需求的執(zhí)行者，所以作為產(chǎn)品研發(fā)線(xiàn)的中間環(huán)節(jié)，交互輸出對(duì)準(zhǔn)確性、效率的不言而喻。可參考某些傳話(huà)類(lèi)游戲，中間傳遞的人的重要性也不言而喻。

一、交互輸出內(nèi)容

以目前主流市場(chǎng)來(lái)說(shuō)，大家還都是用Axure來(lái)進(jìn)行交互稿件的繪制和輸出，可見(jiàn)各大互聯(lián)網(wǎng)公司的UED團(tuán)隊(duì)對(duì)Axure軟件的兼容性還是比較認(rèn)可的。那么，交互輸出應(yīng)該規(guī)定一些什么，輸出內(nèi)容分成幾個(gè)大類(lèi)，下面給大家詳細(xì)講述：

1. 頁(yè)面元素

所謂頁(yè)面元素，就是規(guī)定頁(yè)面內(nèi)應(yīng)該存在什么內(nèi)容、應(yīng)用什么樣的控件等，以及規(guī)定這些存在內(nèi)容的樣式。這些元素為頁(yè)面組成的根本，也是交互輸出最基礎(chǔ)的根基部分。下列為筆者隨便舉例：移動(dòng)端二次確認(rèn)對(duì)話(huà)框的頁(yè)面元素規(guī)定（由于方便顯示，沒(méi)有按照自身規(guī)范書(shū)寫(xiě)）。

2. 用戶(hù)點(diǎn)擊事件流

其實(shí)「事件」是個(gè)計(jì)算機(jī)詞匯，你在輸入框中獲取焦點(diǎn)，就算是一個(gè)用戶(hù)事件；亦或是你點(diǎn)擊了某個(gè)鏈接，都屬于事件，存在于Log日志中。那么所謂的用戶(hù)點(diǎn)擊事件流，通俗說(shuō)既是用戶(hù)使用產(chǎn)品時(shí)，與界面、服務(wù)器交互的過(guò)程。在此過(guò)程中，交互設(shè)計(jì)師需要規(guī)定用戶(hù)點(diǎn)擊后跳轉(zhuǎn)的頁(yè)面、界面對(duì)用戶(hù)的反饋，此過(guò)程是塑造用戶(hù)行為的關(guān)鍵環(huán)節(jié)。下列舉例為移動(dòng)端二次確認(rèn)對(duì)話(huà)框的用戶(hù)點(diǎn)擊事件流規(guī)定：

3. 異常、邊界情況

異常情況和邊界情況其實(shí)可以分開(kāi)來(lái)講。首先說(shuō)異常情況，主要包含：服務(wù)器響應(yīng)超時(shí)情況、服務(wù)器錯(cuò)誤、網(wǎng)絡(luò)中斷、弱網(wǎng)狀態(tài)（主要存在Mobile端）等… 邊界情況的存在主要用于限定一些特殊情況，例如：

• 輸入用戶(hù)昵稱(chēng)的Maxlength （字符限制）；
• 移動(dòng)端的加載等待時(shí)間（一般15-20S），超出后顯示錯(cuò)誤狀態(tài)。

下列舉例為移動(dòng)端二次確認(rèn)對(duì)話(huà)框的異常和邊界規(guī)定：

二、交互稿輸出原則

在了解我個(gè)人輸入交互稿的內(nèi)容習(xí)慣后，內(nèi)容的基礎(chǔ)上，如何完成準(zhǔn)確性高、高效、有利于工作協(xié)同的交互輸出？筆者個(gè)人在工作過(guò)程中，總結(jié)了以下幾點(diǎn)交互輸出的原則。

1. 模擬真實(shí)+規(guī)范統(tǒng)一

盡可能對(duì)線(xiàn)上頁(yè)面的元素進(jìn)行完整還原，目的是給讀交互稿的同事一種代入感。但是模擬真實(shí)并不是進(jìn)行像素級(jí)別的還原，那是視覺(jué)設(shè)計(jì)做的工作。其實(shí)做到模擬真實(shí)有一個(gè)捷徑就是，建立自己產(chǎn)品的交互設(shè)計(jì)規(guī)范，這套交互設(shè)計(jì)規(guī)范庫(kù)可以從控件級(jí)到組件級(jí)再到頁(yè)面級(jí)。筆者注意到做到一般視覺(jué)、交互規(guī)范很難達(dá)到頁(yè)面級(jí)別，因?yàn)楫a(chǎn)品頁(yè)面模式多變。但是不同頁(yè)面最終會(huì)落到一種前段「容器」模板中，這個(gè)容器可以是以列表、表單為基礎(chǔ)的，也可以是產(chǎn)品的一個(gè)詳情頁(yè)模板。總之，每次交互輸出需要利用這些規(guī)范模板時(shí)，都可以復(fù)用，達(dá)到模擬真實(shí)的效果。

利用頁(yè)面級(jí)的規(guī)范模板可以促成產(chǎn)品規(guī)范的統(tǒng)一。但是說(shuō)到規(guī)范的統(tǒng)一性，就不僅僅是頁(yè)面級(jí)別，可能是更高的層級(jí)的統(tǒng)一性。比如下圖所示，交互稿的命名、分頁(yè)的規(guī)范。

2. 易讀性

如何提高交互輸出的易讀性？這個(gè)問(wèn)題見(jiàn)仁見(jiàn)智，從筆者本身角度出發(fā)，個(gè)人認(rèn)為提高易讀性最關(guān)鍵的就是：流程清晰，描述簡(jiǎn)練。能用簡(jiǎn)短步驟描述清楚的，就不用繁瑣的步驟。同時(shí)流程應(yīng)盡量簡(jiǎn)化，但是流程簡(jiǎn)化是建立在高效交互的基礎(chǔ)上，故而交互設(shè)計(jì)能力還是關(guān)鍵；其次則是描述（交互說(shuō)明），看過(guò)許多交互設(shè)計(jì)師、初級(jí)PM在寫(xiě)頁(yè)面的說(shuō)明時(shí)，長(zhǎng)篇大論、文字繁瑣至極，瞬間就會(huì)產(chǎn)生一種不想讀下去的感覺(jué)。

你要想到：寫(xiě)文字交互說(shuō)明的目的是為了補(bǔ)充原型圖中沒(méi)有提到的點(diǎn)，從而方便開(kāi)發(fā)、上下游同步頁(yè)面信息。所以在保證功能、流程完整度的前提下，盡量描述簡(jiǎn)練，是提高效率的好方式。

3. 業(yè)務(wù)邏輯 & 功能范圍內(nèi)的創(chuàng)新

老生常談的話(huà)題。在基礎(chǔ)方法論、行業(yè)經(jīng)驗(yàn)都兼具的一群人當(dāng)中，靠什么區(qū)別一個(gè)產(chǎn)品設(shè)計(jì)師是否優(yōu)秀？沒(méi)錯(cuò)，創(chuàng)新能力。業(yè)界大佬的例子數(shù)不勝數(shù)，我就不在這列舉了。就拿身邊的同學(xué)來(lái)說(shuō)，他們的策劃案、作品、PRD也看過(guò)不少，普遍來(lái)說(shuō)大家都差不太多。但是有BAT或國(guó)際TOP3互聯(lián)網(wǎng)公司實(shí)習(xí)的同學(xué)明顯會(huì)體現(xiàn)出差別：那可能是頁(yè)面中某一個(gè)控件用的十分巧妙、亦可能是某一個(gè)商業(yè)落地想法以前沒(méi)有聽(tīng)說(shuō)過(guò)，總之都會(huì)給人以一種眼前一亮的感覺(jué)。或許這就是創(chuàng)新能力吧。

歡迎關(guān)注作者微信公眾號(hào)：「交互設(shè)計(jì)Roy」

「值得新手學(xué)習(xí)的交互設(shè)計(jì)方式」

• 《超全面！寫(xiě)給零基礎(chǔ)新人的交互設(shè)計(jì)入門(mén)完全指南》
• 《專(zhuān)業(yè)科班的答案！一個(gè)完整的交互設(shè)計(jì)流程是怎樣的？》
• 《進(jìn)階好文！讓人舒服的的交互設(shè)計(jì)稿該有的5個(gè)特點(diǎn)》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com