如何輸出一份優(yōu)秀的網(wǎng)頁設計交互稿？

時間：2024-02-16 06:50:01 | 來源：網(wǎng)站運營

時間：2024-02-16 06:50:01 來源：網(wǎng)站運營

如何輸出一份優(yōu)秀的網(wǎng)頁設計交互稿？：如何輸出一份優(yōu)秀的網(wǎng)頁設計交互稿？分享：

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

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

1. 頁面元素

所謂頁面元素，就是規(guī)定頁面內(nèi)應該存在什么內(nèi)容、應用什么樣的控件等，以及規(guī)定這些存在內(nèi)容的樣式。這些元素為頁面組成的根本，也是交互輸出最基礎(chǔ)的根基部分。

2. 用戶點擊事件流

其實「事件」是個計算機詞匯，你在輸入框中獲取焦點，就算是一個用戶事件;亦或是你點擊了某個鏈接，都屬于事件，存在于Log日志中。那么所謂的用戶點擊事件流，通俗說既是用戶使用產(chǎn)品時，與界面、服務器交互的過程。在此過程中，交互設計師需要規(guī)定用戶點擊后跳轉(zhuǎn)的頁面、界面對用戶的反饋，此過程是塑造用戶行為的關(guān)鍵環(huán)節(jié)。

3. 異常、邊界情況

異常情況和邊界情況其實可以分開來講。首先說異常情況，主要包含：服務器響應超時情況、服務器錯誤、網(wǎng)絡中斷、弱網(wǎng)狀態(tài)(主要存在Mobile端)等… 邊界情況的存在主要用于限定一些特殊情況。

二、交互稿輸出原則

在了解個人輸入交互稿的內(nèi)容習慣后，內(nèi)容的基礎(chǔ)上，如何完成準確性高、高效、有利于工作協(xié)同的交互輸出?總結(jié)了以下幾點交互輸出的原則。

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

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

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

2. 易讀性

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

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

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

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