中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

一份恰到好處的交互原型文檔，能夠體現(xiàn)出產(chǎn)品的交互設(shè)計(jì)規(guī)劃以及大概展示效果，并保證設(shè)計(jì)師、開發(fā)、測(cè)試對(duì)交互效果展現(xiàn)達(dá)成一致，避免中途翻車產(chǎn)品上線延期。

很多交互設(shè)計(jì)師都會(huì)遇到的問題，疫情期間在線辦公更是問題重重——交互評(píng)審反饋問題較多？開發(fā)和測(cè)試對(duì)交互理解有偏差？最終實(shí)現(xiàn)的效果與預(yù)期不符？開發(fā)測(cè)試過程中溝通成本較大？交互不完善導(dǎo)致延期上線？

根據(jù)我多年與技術(shù)撕b（討論）的經(jīng)驗(yàn)，告訴你們一份我的珍藏版交互葵花寶典。

一、文檔結(jié)構(gòu)層

先來看看你需要在axure里建立哪些文件夾和頁面：

1. 全局說明

需要放在文檔首位的文件夾，主要分三個(gè)頁面，原型查看說明、修改歷史記錄、統(tǒng)一元件。

2. 原型文件夾劃分

如APP端和web端都放在一個(gè)文件里，那么就需要一級(jí)文件夾命名為APP和web，如文件里只放了app端，那就需要按照功能模塊劃分。如圖：

3. 備份

這一點(diǎn)不要忘了，建立一個(gè)備份的文件夾，便于保留一些備份頁面。

4. 整體文件夾和頁面命名都使用編號(hào)

在做交互的過程中經(jīng)常會(huì)遇到命名類似的頁面，這個(gè)編號(hào)非常便于日后溝通，包括寫修改記錄時(shí)用到，開發(fā)可以對(duì)應(yīng)的第一時(shí)間找到你們溝通或修改記錄里寫的頁面，包括對(duì)接ui時(shí)也會(huì)用得到，可以減少不少溝通成本。

二、結(jié)構(gòu)層全局說明詳細(xì)介紹

1. 原型查看說明

主要是教開發(fā)怎么看原型，如何快速理解你產(chǎn)出的方案。近期我發(fā)現(xiàn)使用火狐瀏覽器會(huì)造成所有交互事件消失，所以進(jìn)入時(shí)先提示不要使用火狐瀏覽器。關(guān)閉瀏覽器后的說明如下圖，相信大家一看就懂。

2. 修改歷史記錄

主要記錄此版本交互的修改記錄，無論哪個(gè)階段修改、大家切記一定要寫在這個(gè)記錄里。不要嫌麻煩，會(huì)有用到的一天的，你們都無法想象我在做一個(gè)大項(xiàng)目時(shí)記錄了多少記錄。記錄模板如下圖，每次修改的內(nèi)容都要記錄在里面，要寫清日期、評(píng)審人。

3. 統(tǒng)一元件

這個(gè)不一定用得上，有一些項(xiàng)目是需要用的，尤其做一個(gè)0-1的項(xiàng)目，那么可能放哪些內(nèi)容呢？

比如需要下拉刷新的頁面都有哪些，上拉加載的默認(rèn)條數(shù)，多種加載效果都分別用在哪些頁面，總之全局性的交互都在這里描述，舉例說明。

三、原型效果

1. 交互效果盡量做出來

比如點(diǎn)擊跳轉(zhuǎn)、點(diǎn)擊出現(xiàn)彈窗、其他的效果根據(jù)自己的能力和時(shí)間考慮是否做出來。

謹(jǐn)記一點(diǎn)，產(chǎn)品畫的原型可以很糙，但交互的原型要很精致，注重細(xì)節(jié)。否則就失去了交互這個(gè)崗位的意義。除了跳轉(zhuǎn)、彈窗的交互，其他的交互如果在axure做出了效果，要在交互說明里向開發(fā)傳達(dá)，因?yàn)橛幸恍┘夹g(shù)人員不會(huì)一個(gè)一個(gè)去點(diǎn)你實(shí)現(xiàn)的交互。

傳達(dá)方法一：把效果復(fù)制到交互說明，引導(dǎo)開發(fā)點(diǎn)擊查看效果。

傳達(dá)方法二：可使用錄屏軟件錄下來操作效果，生成gif，直接放在交互說明，開發(fā)用瀏覽器打開原型直接就能看到動(dòng)圖。我用的是下面這個(gè)錄屏軟件。

2. 邏輯判斷的不同提示或跳轉(zhuǎn)要表示出來

一般產(chǎn)品會(huì)給一些流程圖，里面會(huì)有一些判斷邏輯，大多數(shù)情況是觸發(fā)一個(gè)按鈕需要判斷多個(gè)條件，而不同的條件可能是彈窗、可能是跳轉(zhuǎn)、可能是toast。那么我用的方法就是在一個(gè)按鈕上加多個(gè)單擊的事件，添加后記得給每一個(gè)用例名稱修改成對(duì)應(yīng)狀態(tài)。

那么開發(fā)最終點(diǎn)擊按鈕就會(huì)看到多個(gè)狀態(tài)，點(diǎn)擊不同的狀態(tài)會(huì)有不同的彈窗、toast或跳轉(zhuǎn)。

3. 原型畫成什么樣？

低保真？中保真？高保真？

可能現(xiàn)實(shí)項(xiàng)目中沒有那么多的時(shí)間去做很多細(xì)節(jié)的調(diào)整，包括加交互、動(dòng)畫都需要一定的時(shí)間，不過這根據(jù)自身的工作效率也有很大的關(guān)系。

我曾經(jīng)嘗試過同樣的工作量的不同項(xiàng)目，我跟另一個(gè)交互分別負(fù)責(zé)不同的項(xiàng)目，工作量是差不多的，最后我產(chǎn)出的就是偏高保真的效果還包括交互和動(dòng)畫。

當(dāng)習(xí)慣了用我自己的方法工作，如果讓我去做低保真的效果，反而會(huì)增加我的工作時(shí)間。給大家看一些我工作的產(chǎn)出吧，需要注意的是同一個(gè)頁面不同狀態(tài)展示的話要向右橫著排，不要讓開發(fā)又要橫向滑動(dòng)又要縱向滑動(dòng)的查看

4. 交互說明

交互說明我在APP和web端的輸出方法是不一樣的，APP占用空間小，而web一個(gè)頁面就已經(jīng)占滿了全屏。

APP交互說明：可以直接在旁邊寫出交互說明，上面一些圖片大家應(yīng)該一看就懂了，交互說明一定要把你想到的所有細(xì)節(jié)，所有可能都寫出來，其實(shí)原型畫的比較細(xì)，可以省很多交互說明的文字，不過有一些容易被開發(fā)忽略的交互還是要寫出來，比如：

1. 各種情況下的提示效果和提示文案都需要寫清。
2. 我們?cè)谧鼋换ピO(shè)計(jì)的時(shí)候會(huì)有一些頁面的返回特意設(shè)計(jì)成返回上兩級(jí)，這種情況不光是在返回上加鏈接的問題，要在說明上也寫清楚，避免開發(fā)沒有點(diǎn)擊查看效果。
3. 當(dāng)然有一些進(jìn)入頁面就自動(dòng)彈出鍵盤，焦點(diǎn)在某一個(gè)文本框上，雖然原型畫出來了，但交互說明還是要寫清楚。
4. 所有的列表頁都需要寫明需不需要下拉刷新和上拉加載。
5. 按鈕什么狀態(tài)下為灰色不可點(diǎn)擊狀態(tài)，什么狀態(tài)下是高亮可點(diǎn)擊狀態(tài)
6. 有必要的時(shí)候還需要在交互說明處配一個(gè)流程圖便于理解復(fù)雜的邏輯

web端交互說明：web端我一般都會(huì)直接在對(duì)應(yīng)需要說明的地方直接用axure的說明功能寫出來，開發(fā)打開后對(duì)應(yīng)點(diǎn)開每一處的說明，這種方法更有針對(duì)性，開發(fā)能一下子明白這條說明是針對(duì)這一個(gè)按鈕的、或針對(duì)這一個(gè)列表的。

四、總結(jié)

以上只是個(gè)人通過多年經(jīng)驗(yàn)總結(jié)出來的交互輸出的工作方法，希望可以幫助到交互小白，少踩坑。

或許大家看了之后會(huì)覺得會(huì)在做一個(gè)原型上面花很多時(shí)間，不過當(dāng)你習(xí)慣了這種方法后，其實(shí)并不會(huì)花太長時(shí)間，我的每一個(gè)實(shí)戰(zhàn)都會(huì)用以上方法輸出原型，至于為什么大家會(huì)看到以上效果，那都是一次一次撕b總結(jié)出來的。

作者：高杰，微信號(hào)公眾號(hào)：UX設(shè)計(jì)師高杰，從事交互設(shè)計(jì)和用戶體驗(yàn)工作。

本文由 @高杰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議