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

今天教大家怎么做一個高保真的上傳圖片、文件的效果。該原型用中繼器做的，所以使用的時候只需要簡單填寫表格內容即可，也可以當做學習中繼器交互的案例。如有喜歡該原型或者有什么疑問的都可以在評論區留言。

為什么要做這樣的原型呢，系統里面不是可以將文本框設置為文件的格式然后上傳嗎？

首先系統的文件文本框格式不能自由修改，可能ui和我們自己的demo不搭；其次是演示的時候，axure打開不了本地文件的，所以沒有很好的交互效果。

那為什么不用js調用，雖然用js調用，可以更改上傳按鈕的ui，但是同樣不能打開本地文件，只能設定一個交互效果不能，沒有很好的體驗。

所以呢，就模擬了高保真上傳界面。為了可以隨心所欲的設置樣式和交互。

好了，說了這么多開始進入正題了。

效果演示

1. js調用的上傳原型

js的好處就是簡單，直接調用，但是上傳的圖片只能默認寫死，不能變更。而且axure9好像不支持使用，axure8正常使用。

2. 高保真上傳原型

（1）上傳圖片

正常上傳效果：

上傳格式不是圖片的時候：

分類查看：

（2）上傳頭像

（3）上傳文件

還有更多交互，例如新建文件夾等，大家可以自己嘗試哦。

使用方法

該原型最重要的就是內容中繼器

type：填寫類型文件夾、圖片、視頻、ppt等等，如果控麥的就默認其他文件，可以參考之前的填寫，或者自己增加也可以（其實大部分類型都有了）。

自己增加的時候需要注意，在每項加載時復制下面的事件，類型填你新增的類型，然后設置圖片導入對應的圖片即可

• name：填寫文件名，如果是圖片的話，右鍵導入圖片即可
• address：地址，例如該文件在“桌面”的“文件夾1”里面，填寫“桌面-文件夾1”
• rank：如果是文件可以不用填，類型是文件夾填1，硬盤填2，為了排序好看一點
• jingyong：不用填寫默認為空，只做邏輯處理

制作方法

1. 中部文件中繼器

這個是最重要的一部分內容，中部中繼器里包含圖片，文本，多選框，和透明背景框一個，如下圖所示擺放透明背景框的作用是移入和選中時有一個顏色變化的效果

多選框的話大家可以有系統的多選框，如果覺得樣式不好看的話可以自己制作，具體可以參考我之前的文章建議收藏：Axure交互常用按鈕組

交互事件：

• type：每項加載時，如果tpye=pdf，設置圖片=pdf圖片，如果type=視頻，設置圖片=視頻圖片，如此類推
• name：每項加載時，設置文本name=item.name
• address：地址是后面篩選用到的，例如該文件在“桌面”的“文件夾1”里面，填寫“桌面-文件夾1”
• rank：用于排序的，硬盤排在最前填寫2，文件夾填寫1即可。如果是文件就默認不用填寫。中繼器默認按rank降序排列
• jinyong：其實利用中繼器記住那個選中了，jinyong=1，就讓透明背景框變色，如果=0，設置無。

鼠標單擊該組合時切換選中狀態，雙擊時判斷，如果rank=0，應該整個上傳彈窗，就完成上傳了。

如果rank！=0，進行篩選，條件是target.item.address=item.address+item.name

2. 左邊欄

如下圖所示利用圖標文字和背景框制作

交互也簡單，點擊組合時，對上面中繼器進行篩選item.address=文字即可

3. 上面欄

單擊左邊欄或雙擊中繼器內組合設置中間文字=item.address，這里為了好看用replace函數將-換成→圖標。

搜索的話，只需要進行模糊篩選中繼器就可以了，如果不知道模糊篩選怎么做的話，可以參考我之前的文章建議收藏：高保真搜索框集合

4. 底部欄

• 文件名：鼠標雙擊中繼器內組合時設置文件名=item.name即可
• 打開：觸發中繼器中部組合鼠標雙擊時的時間
• 取消：隱藏整一個組合
• 自定義文件：一個篩選方式，如果我們是上傳圖片的話，設置點擊自定義文件，只顯示tpye=文件夾、硬盤和圖片。點擊所有文件，移除篩選即可。

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議