您現在的位置是:電腦技術吧?>? 編程技術 ??>??交互文檔,交互文檔說明??>??正文詳情

交互文檔,交互文檔說明

溫如心2019-11-15 22:40:41 人圍觀
簡介sketch 交互文檔交互規范文檔是交互設計器輸出的重要組成部分,關系到設計方案能否最大限度地實現。新的互動人,大多會擔心如何編寫互動文檔。今天我們來談談這個話題,交互文檔

交互說明文檔,是交互設計師 的輸出物中必不可少的一項,它關系著設計方案能否最大程度的被實現。

交互新人,大多會煩惱如何寫交互文檔,今天來聊聊這個話題。

  交互文檔,寫給誰看  交互文檔可以看做交互設計師 輸出的產品,它面向的用戶是下游的同事視覺設計師、測試工程師、開發工程師。

他們會根據文檔中的線框圖、交互細節說明等等,來輸出視覺設計稿、寫測試用例、用代碼實現產品設計方案,并以此為依據完成驗收測試等工作。

  交互文檔,寫什么內容  最初寫交互文檔時,很多人會有疑惑該寫些什么內容。

我的看法是,開發同事在寫代碼時需要考慮的與界面顯示邏輯、用戶操作相關的內容,幾乎都要在交互文檔中體現,建議越全面越好。

  如果有遺漏的內容,開發可能會找你討論,也可能懶得費時間溝通直接按照自己的理解去實現。

最終,驗收測試的效果不如意,你也不能全賴開發。

所以盡量將交互文檔寫的全面些,別消費開發同事對你的信賴值。

  那么,到底交互文檔中,需要寫哪些內容呢?  1、頁面流程(界面之間)  頁面流程圖,可以表達產品的整體結構,幫助同事了解界面之間的關系。

在撰寫交互文檔時,也可以以任務、子任務為模塊來詳細介紹界面如何跳轉、何時跳轉。

  2、內容布局(界面內)  正在加載狀態、加載完成有內容的狀態、加載完成無內容的空狀態、失敗狀態(比如網絡異常/權限未開啟)、不同角色的用戶看到的內容是否一樣、不同狀態的文案圖標變化  內容的加載方式,何時加載、何時顯示、何時刷新  其他   3、交互操作與反饋(界面內)  根據用戶與界面之間發生的交互操作,提供相應的反饋,可能是提示內容,也可能是界面內或界面之間的跳轉。

  剛入門的交互新人,喜歡把重心放在界面之間的跳轉,而遺漏了界面內的內容布局和交互操作。

對此,我的小技巧是,先整體看界面全局,再review界面上的每一個元素,思考各種不同場景下這些元素是否變化、如何變化。

  以登錄界面為例,看看怎么寫交互細節說明  下圖,是一個簡單的登錄界面,我們試著先整體后部分的方式,看看這個界面的交互說明需要考慮哪些方面。

  1、登錄界面的跳轉流程  什么情況下,從哪些界面可以進入登錄界面  登錄成功后進入哪個界面  取消登錄后回到哪里  界面轉場方式,比如從下向上進入界面,從上往下離開界面  2、賬號輸入框  字段格式要求,字段長度、字段類別(漢子、字母、數字、手機號)  是否有默認提示文案,如果上次登錄過是否顯示上次的賬號  光標是否置入此輸入框,鍵盤是否顯示,鍵盤用哪種視圖  何時檢測用戶填寫的是否正確,填寫正確的提示,填寫錯誤的提示,反饋提示何時顯示、何時消失  輸入框中的內容是否支持一鍵清除  3、密碼輸入框  字段格式要求  何時檢測格式是否符合  光標置入后顯示鍵盤的哪種視圖  輸入框中的內容是否支持一鍵清除  是否支持密碼可見、如何切換可見狀態  4、登錄按鈕  按鈕是否有可用不可用之分,何時可用狀態、何時不可用狀態  點擊按鈕之后提示正在登錄的方式  登錄成功如何提示、跳轉進入哪個界面  有哪幾種登錄失敗的場景(比如賬號未注冊、網絡異常等),不同失敗的情況下如何提示  多次登錄失敗提示方式是否變化  5、注冊按鈕  點擊進入哪個界面  界面的轉場方式是怎樣的  6、關閉按鈕  點擊進入哪個界面  界面的轉場方式是怎樣的  以上只是拋磚引玉,給大家打開思路。

雖然只是幾個輸入框,但其細節比大多數界面都要復雜。

你可以找一款優秀的APP,去研究它如何設計這些細節,是否還有我沒有提到的點,研究透了下次自己設計才能做到更加全面。

  當然,交互細節說明,只是方案的表述,每一個小點都有好幾種設計方案。

如何權衡選擇體驗更優的方案,才最是考驗交互設計 師的能力。

你可以對比研究幾款優秀產品,看它們在細節設計有何不同,分析其中的緣由,想想是否有更好的方案,學無止盡。

  如何提升交互文檔的瀏覽體驗  交互設計 師的目標是提升產品的體驗,我們輸出的文檔本身也應該有上佳的瀏覽體驗。

為了達到這個目標,我也在不斷優化文檔的撰寫方式和排版。

下面聊聊我嘗試過的幾種方式。

  方式1:一頁紙表示所有的線框圖,配上箭頭 簡單的文字說明  網上流傳著很多這種風格的圖,最初覺得這樣的圖很有范兒,以為這就是他們輸出的全部交互文檔,所以按照這種模式產出。

等到自己做的多了會發現這類圖大多只表達了某個界面的正常狀態,并沒有詳細的交互說明來體現界面的內容布局和交互操作反饋。

  方式2:一頁一個界面,每個界面建一個交互說明文件夾,分功能模塊寫交互說明(Web產品)  工具: Axure  Web產品的特點是,層級復雜,每個界面比較大而且內容很豐富。

通常會組織好頁面層級,再畫每個界面的原型,待幾輪討論過后界面布局和內容基本確定之后,再為每個界面撰寫各自的交互說明。

  考慮到每個界面中的內容模塊和功能點不少,我沒有在確定好的界面上直接標注交互說明,而是將這個界面劃分為幾個功能模塊,并給每個功能模塊新建一個頁面用來寫交互說明。

  如下圖,分別是 Axure的文檔目錄(左)、某個功能模塊的交互說明(右)

  方式3:一頁顯示一個大功能點的所有界面和交互說明(App 產品)  工具: Axure  App相比Web界面內容簡潔很多,很多人輸出App的交互文檔都是一頁展示很多個界面,上下左右排滿了。

設計師大多是大屏電腦,這樣設計起來確實比較連貫流暢。

  但是開發大多用MacBook,沒有外接的大屏顯示器,一屏看不到幾個界面。

雖然我會按照橫向主流程豎向次要或分支流程的規律排列,但是他們對這些規律并不熟悉,左右拖拽上下滾動幾次就容易犯暈,可能一會兒就找不到剛看過的界面了。

  如下圖,界面右側配上對應的交互說明(通常情況,交互原型應該以黑白灰顏色為主,不過因為我們的APP處于迭代優化的階段,已經確定了視覺風格,而且某些狀態需要用顏色來區分對錯,所以會有一些配色。

)

  期間優化過這種方式,將大功能點拆分,按照以往設計Web 產品的方式來組織。

對此開發同事仍然覺得不夠好,所以有了后面ppt/keynote演示文稿的方式。

  方式4:一頁介紹一個子任務,每頁最多4個界面,輸出php?/PDF/' target='_blank'>PDF格式(App 產品)  工具: Axure 畫原型,Keynote 寫交互說明  為什么采用這種方式呢?源于開發同事看到產品老大介紹需求用的幻燈片,覺得一張圖配一個表格的方式很清晰,強烈建議用這種方式來寫交互文檔。

  我覺得用幻燈片輸出PDF 的方式確實可取,易于瀏覽。

不過一頁一個圖太零散,界面之間、界面內容的不同狀態關鍵性很強,放在一起介紹更直觀。

  于是,我想到了以前 yoyo 在騰訊CDC 官方博客上分享的交互文檔撰寫方式:如何制作實用美觀的設計文檔 。

以前嘗試過用他推薦的indesign寫文檔,但對這個工具不那么習慣以至于效率并不高,嘗試過寫完一個產品的交互文檔之后就沒再用了。

不過 yoyo 推薦的將大故事拆分為一個個小故事來寫交互說明的方法讓我記憶猶新。

  就這樣,嘗試了這種新的搭配方式,Axure 畫原型,Keynote 寫交互說明。

  Keynote縮略圖預覽如下圖,為每個功能模塊建立一個任務/子任務的目錄結構,按照劃分的結構依次介紹各個子任務。

每個頁面最多介紹四個界面,頁面底部作為固定的區域用來寫交互說明。

  測試、開發同事反饋這種方式不錯,一方面是因為每頁文檔的結構大小一致,滑動瀏覽的體驗也更好;另一方面是因為他們寫代碼也是按照這樣的方式一個小模塊一種場景依次往下走,更容易專注看當前寫的這個模塊的交互說明。

  雖然有同事的肯定,但這種方式還有優化的空間。

因為采用了兩個工具,一個畫原型一個寫文檔,如果Axure原型有改動,需要復制到keynote,兩處都要更新顯然影響效率。

所以我還在考慮是否切換到某一個工具搞定這兩件事,比如用sketch 。

除此之外,文檔模板也可以改進優化。

  就像前面說的,交互說明文檔,就像是交互設計師輸出的產品,既要根據場景的變化不斷調整,又要聽取用戶的意見,持續優化提升體驗。

  歡迎關注妹子的微信公眾號:

版權聲明:本文由 溫如心 整理編輯。

原標題:交互文檔包括什么,設計交互文檔

轉載注明出處:http://www.dn9ww09s.icu/program/12637.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • applepay無法添加卡,apple pay怎么打開

    applepay無法添加卡,apple pay怎么打開 相關圖片未能設置apple pay蘋果支付是蘋果公司的一種快捷支付方式,給iPhone用戶帶來了極大的便利。但是,當用戶在Apple pay中添加卡時,無法添加。蘋果支付不能添加的卡是什么綁定apple pay卡無...

  • kux格式播放器,哪個播放器支持kux格式

    kux格式播放器,哪個播放器支持kux格式 相關圖片支持kux播放器有些用戶看到Kux格式的文件時會感到奇怪。事實上,Kux格式是優酷獨有的視頻格式。如果用戶想打開Kux格式供魏健觀看,需要使用優酷播放器。Kux不是一種常見的視qlv格式...

  • 碎玻璃特效,照片玻璃碎片特效

    碎玻璃特效,照片玻璃碎片特效 相關圖片快手玻璃碎片特效今天我們將為您帶來一個由HTML5Canvas實現的圖像玻璃碎片效果。圖像以玻璃碎片的形式出現在界面上,然后玻璃破碎的效果似乎逐漸被報道。呈現如下:HTML代碼破碎玻...

  • dfu模式和恢復模式哪個好,dfu刷機弊端

    dfu模式和恢復模式哪個好,dfu刷機弊端 相關圖片蘋果用itunes恢復系統DFU的全稱是設備固件升級,是iPhone固件的強制升級和降級模式。只有當用戶的iPhone無法打開,iTunes無法識別,或者用戶的iPhone被降級越獄時,蘋果11更新不了13.1...

  • 代碼例子,g代碼實例

    代碼例子,g代碼實例 相關圖片代碼呈現:方法1:代碼如下:!DOCTYPE HTML htmlbody canvas id=mycanvas width=500 height=500yourbrhtml5基礎代碼實例...

  • 光驅讀不出光盤怎么辦,外置光驅讀不出光盤

    光驅讀不出光盤怎么辦,外置光驅讀不出光盤 相關圖片電腦光驅讀不出dvd光盤CD-ROM驅動器是筆記本電腦的標準工具。許多臺式機也將配備CD-ROM驅動器,但許多人已經很長時間沒有聯系CD-ROM驅動器了。然而,一些大型游戲的運營商仍然win10光驅...

  • 升級win10,怎么升級win10

    升級win10,怎么升級win10 相關圖片win8.1Win10是微軟主操作系統的最新版本。有些新功能只能在win10上體驗,所以很多舊版本系統的用戶也開始想升級自己的系統。本文將與您分享win8.1升級win10bwin...

  • html音樂播放器代碼,html5音樂播放器源碼

    html音樂播放器代碼,html5音樂播放器源碼 相關圖片音樂播放器前端獲取htmlvideoelement和htmludioelement objects1//audio您可以直接通過new 2 media=newaudio(ht在線音樂播放器源碼...

  • 蘋果定位功能有什么用,怎樣使用蘋果手機定位功能

    蘋果定位功能有什么用,怎樣使用蘋果手機定位功能 相關圖片蘋果手機的定位功能沒有網絡能用嗎當iPhone用戶丟失手機或想定位自己的手機時,可以通過icloud使用蘋果的定位功能。不過,icloud只能定位蘋果設備的大致位置,使用蘋果定位并不十分...

  • 邊框圓角,圓角邊框怎么設置

    邊框圓角,圓角邊框怎么設置 相關圖片html圓角矩形邊框!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xps做圓角矩形邊框...

熱評文章

  • 聯想 Z5 Pro,聯想Z5 Pro GT

    聯想 Z5 Pro,聯想Z5 Pro GT 相關圖片聯想手機怎么樣自vivo nex以來,真正的全屏手機層出不窮。本文與大家分享一款來自聯想的新機型:聯想Z5 pro采用了創新的滑蓋式全屏幕設計,實現了超級95.0聯想手機...

  • 值得關注的一件事,值得關注的博主

    值得關注的一件事,值得關注的博主 相關圖片ins有哪些值得關注的人如果設計趨勢只停留在色彩、交互效果和卡片界面的討論上,我們可能會在未來兩年內落后。今天,讓華僑設計總監斯佩爾與同學們一起探討五大影響人類生活方...

  • win鍵用不了,win鍵不能用怎么辦

    win鍵用不了,win鍵不能用怎么辦 相關圖片怎么禁用win鍵在電腦鍵盤上,有些按鍵位置很少被某些用戶使用,但其實它們的功能非常強大。例如,更著名的贏鍵。讓我們看看贏球的關鍵是什么?贏的鑰匙有什么用?是舊鍵盤上的...

  • 元素element,myelement元素

    元素element,myelement元素 相關圖片element是啥我很久沒有更新教程了。我最近很忙。今天,我想和大家分享一下如何使用pixate來產生使用單一元素來擴展轉換的效果效果。效果如下:實際上,這個效果在pixate中element是哪里...

  • 手機刷機是什么概念,手機系統卡刷是什么意思

    手機刷機是什么概念,手機系統卡刷是什么意思 相關圖片手機刷機需要提供什么對于喜歡手機的用戶來說,手機刷的概念是非常熟悉的,但是對于一些新朋友來說,刷的概念還是有點奇怪刷是一種改變手機操作系統的行為,相當于安裝了不同...

  • 圖庫攝影師,中國圖庫攝影師

    圖庫攝影師,中國圖庫攝影師 相關圖片中國圖庫簽約攝影師今天,一個新的安利畫廊網站被挑出來,因為它的所有照片都是由專業攝影師拍攝的。圖片的質量比一般的畫廊網站要高得多。這些圖片可以免費下載、使用和修改...

  • win鍵按了沒反應,win10按win鍵沒反應

    win鍵按了沒反應,win10按win鍵沒反應 相關圖片win鍵一直按著計算機鍵盤上的Win鍵是一種強大的輔助密鑰,它可以在與其他情況結合后進行調整。然而,當一些用戶按下win鍵時,他們沒有響應。我該怎么辦?一。鍵盤本身可能需要拆...

  • 現在蘋果6s換電池多少錢,蘋果保修期換電池多少錢

    現在蘋果6s換電池多少錢,蘋果保修期換電池多少錢 相關圖片蘋果電池壽命80%要換嗎很多人在手機上選擇蘋果,蘋果系統封閉穩定,性能也不錯。很多用戶可以從一個蘋果開始很長一段時間,通常手機還在使用,但電池不夠用。而且一直有一種說...

  • 怎么收集信息,信息收集

    怎么收集信息,信息收集 相關圖片搜集信息的渠道有哪些今天,雖然這篇文章是一篇老文章,但它的實用價值仍然很高。尤其是那些沒有良好組織習慣的學生,這篇文章一定會讓你大開眼界!作者是阿里巴巴的高級交互...

  • Windows資源管理器停止工作,win7資源管理器老是停止工作

    Windows資源管理器停止工作,win7資源管理器老是停止工作 相關圖片win7右鍵資源管理器停止工作Windows資源管理器已停止工作,這是許多計算機用戶經常遇到的計算機問題之一。當他們遇到這個問題時,一些用戶不知道如何根據微軟官方的答案,windows資...

關注微信

变脸官网查询