如何輸出高質量的交互稿?(附帶 交互稿輸出模板.rp)
引言 交互設計師作為近年興起的互聯網設計崗位之一,具有其崗位產生的背景的特殊性。從交互設計師崗位職能來講,它是產品與視覺、前端開發的橋梁,是產品研發線上的連接紐帶。由于交互設計師既不是需求的發起者,也不是完全算是需求的執行者,所以作為產品研發線的中間環節,交互輸出對準確性、效率的不言而喻。類似可參考某些傳話類游戲,中間傳遞的人的重要性也不言而喻。
1. 交互輸出內容
以目前主流市場來說,大家還都是用Axure來進行交互稿件的繪制和輸出,可見各大互聯網公司的UED團隊對Axure軟件的認可度、兼容性還是比較認可的。那么,交互輸出應該規定一些什么,輸出內容分成幾個大類,下面給大家詳細講述:
1.1 頁面元素
所謂頁面元素,就是規定頁面內應該存在什么內容、應用什么樣的控件等,以及規定這些存在內容的樣式。這些元素為頁面組成的根本,也是交互輸出最基礎的根基部分。下列為筆者隨便舉例:移動端二次確認對話框的頁面元素規定(由于方便顯示,沒有按照自身規范書寫)
1.2 用戶點擊事件流
其實“事件”是個計算機詞匯,你在輸入框中獲取焦點,就算是一個用戶事件;亦或是你點擊了某個鏈接,都屬于事件,存在于Log日志中。那么所謂的用戶點擊事件流,通俗說既是用戶使用產品時,與界面、服務器交互的過程。在此過程中,交互設計師需要規定用戶點擊后跳轉的頁面、界面對用戶的反饋,此過程是塑造用戶行為的關鍵環節。下列舉例為移動端二次確認對話框的用戶點擊事件流規定:
1.3 異常、邊界情況
異常情況和邊界情況其實可以分開來講。首先說異常情況,主要包含:服務器響應超時情況、服務器錯誤、網絡中斷、弱網狀態(主要存在Mobile端)等… 邊界情況的存在主要用于限定一些特殊情況,例如:
- 輸入用戶昵稱的Maxlength (字符限制);
- 移動端的加載等待時間(一般15-20S),超出后顯示錯誤狀態。
下列舉例為移動端二次確認對話框的異常和邊界規定:
2. 交互稿輸出原則:
OK,在了解我個人輸入交互稿的內容習慣后,內容的基礎上,如何完成準確性高、高效、有利于工作協同的交互輸出?筆者個人在工作過程中,總結了以下幾點交互輸出的原則:
2.1 模擬真實+規范統一
盡可能對線上頁面的元素進行完整還原,目的是給讀交互稿的同事一種代入感。但是模擬真實并不是進行像素級別的還原,那是視覺設計做的工作。其實做到模擬真實有一個捷徑就是,建立自己產品的交互設計規范,這套交互設計規范庫可以從控件級到組件級再到頁面級。筆者注意到做到一般視覺、交互規范很難達到頁面級別,因為產品頁面模式多變。但是不同頁面最終會落到一種前段“容器”模板中,這個容器可以是以列表、表單為基礎的,也可以是產品的一個詳情頁模板??傊看谓换ポ敵鲂枰眠@些規范模板時,都可以復用,達到模擬真實的效果。
利用頁面級的規范模板可以促成產品規范的統一。但是說到規范的統一性,就不僅僅是頁面級別,可能是更高的層級的統一性。比如下圖所示,交互稿的命名、分頁的規范。
2.2 易讀性
如何提高交互輸出的易讀性?這個問題見仁見智,從筆者本身角度出發,個人認為提高易讀性最關鍵的就是:流程清晰,描述簡練。能用簡短步驟描述清楚的,就不用繁瑣的步驟。同時流程應盡量簡化,但是流程簡化是建立在高效交互的基礎上,故而交互設計能力還是關鍵;其次則是描述(交互說明),看過許多交互設計師、初級PM在寫頁面的說明時,長篇大論、文字繁瑣至極,瞬間就會產生一種不想讀下去的感覺。。。
你要想到:寫文字交互說明的目的是為了補充原型圖中沒有提到的點,從而方便開發、上下游同步頁面信息。所以在保證功能、流程完整度的前提下,盡量描述簡練,是提高效率的好方式。
2.3 業務邏輯 & 功能范圍內的創新
老生常談的話題。在基礎方法論、行業經驗都兼具的一群人當中,靠什么區別一個產品設計師是否優秀?沒錯,創新能力。業界大佬的例子數不勝數,我就不在這列舉了。就拿身邊的同學來說,他們的策劃案、作品、PRD也看過不少,普遍來說大家都差不太多。但是有BAT或國際TOP3互聯網公司實習的同學明顯會體現出差別:那可能是頁面中某一個控件用的十分巧妙、亦可能是某一個商業落地想法以前沒有聽說過,總之都會給人以一種眼前一亮的感覺?;蛟S這就是創新能力吧。
最后:寫的零零散散,都是工作之余的休息時間拼湊出來的,大家湊合看吧~(反正看到這你都看完啦)
*下面鏈接為筆者日常工作中用到的PC端+移動端 Axure模板,有需要同學自取~
鏈接: https://pan.baidu.com/s/1ESw5Ibt0oMz7b0m1VIvBwg 密碼: yxxq
OK,就這樣,希望大家多多點贊、收藏、分享,祝各位同行能拿下滿意Offer~下期產品設計文章再見~
作者:Roy_ ,公眾號:交互設計Roy
本文由 @?Roy_ 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Pexels,基于 CC0 協議
= = 可以打開啊 文章里的
哈嘍大家,再次補鏈接~ 鏈接:https://pan.baidu.com/s/1fYZWSco7yMGNGiDD1qiMHA 密碼:c4q5
還是打不開
還是打不開
文件打不開
鏈接:https://pan.baidu.com/s/1feVSzodx4DBy9HYht1UrLg 密碼:Y3rb
文件有問題
鏈接:https://pan.baidu.com/s/1feVSzodx4DBy9HYht1UrLg 密碼:Y3rb
文件有問題
鏈接:https://pan.baidu.com/s/1feVSzodx4DBy9HYht1UrLg 密碼:Y3rb
大家不好意思,補充
鏈接:鏈接:https://pan.baidu.com/s/1feVSzodx4DBy9HYht1UrLg 密碼:Y3rb
打不開的把文件名亂碼去掉
這個模板文件打不開 報錯了
啊哦,你所訪問的頁面不存在了。
可能的原因:
1.在地址欄中輸入了錯誤的地址。
2.你點擊的某個鏈接已過期。
您好,可以重新發一下嗎,鏈接有問題。
貌似這個模板文件打不開 報錯了
打不開