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

編輯導(dǎo)語：圖片輪播原型常應(yīng)用于各大app的首頁，包括文章分享app、讀書app、商城app等等。通過這篇文章，本文作者希望和大家分享一下圖片輪播原型的作用、應(yīng)用案例以及設(shè)計(jì)思路。

一、圖片輪播原型的作用

對于用戶而言，普遍用戶都不喜歡死氣沉沉的ui界面，隨著5G的發(fā)展，軟件界面展示不在受限于網(wǎng)速。

所以像圖片輪播、gif、短視頻的展現(xiàn)方式更加能吸引用戶的眼球，通過動(dòng)畫的效果，保持用戶瀏覽的熱情。

對于運(yùn)營人員而言，因?yàn)閳D片輪播能夠吸引用戶的注意力，所以他們也會將最重要或者想要營銷的內(nèi)容做成圖片輪播的形式來展現(xiàn)。所以，圖片輪播可以說是每個(gè)軟件比不可少的的元件。

下面我會和大家分享一些常用的圖片輪播案例：

二、圖片輪播原型案例

1. 頂端banner輪播圖元件

這種是最常見最簡單的輪播圖了，一般會放在界面的頂端，或者有多個(gè)類別時(shí)，放在內(nèi)容的最上面，將最精彩的內(nèi)容，或者是廣告推送給客戶，一般應(yīng)用于線上商城、外面平臺、文章閱讀平臺等等。

這種圖片輪播元件有兩個(gè)交互，一各是自動(dòng)輪播，間隔2-3秒自動(dòng)切換下一張圖；第二個(gè)是手動(dòng)輪播，就是用戶可以通過左右滑動(dòng)切換圖片。

2. 大小輪播圖元件

大小圖輪播元件其實(shí)就是在banner輪播元件的基礎(chǔ)上加了圖片放大縮小的效果，以及點(diǎn)擊左右小圖時(shí)移動(dòng)的效果。

大小圖輪播圖更多的是應(yīng)用于類似產(chǎn)品的選擇上，比如同一款型號手機(jī)的不同顏色，這樣能夠讓用戶看到多種顏色，如果對某個(gè)顏色感興趣，就可以直接點(diǎn)擊查看大圖。

另一種是相識產(chǎn)品的展示，例如不同款的手表、汽車等，讓用戶知道有多款產(chǎn)品可以查看。

當(dāng)然了，根據(jù)需要還可以制作為橫屏的大小圖輪播元件。

3. 全屏輪播圖元件

全屏輪播圖元件一般用于軟件啟動(dòng)的啟動(dòng)頁，可以用于廣告展示，告知用戶新版信息及使用提示、介紹軟件和公司的solgan和logo等等。

全屏輪播圖元件和banner輪播元件基本一致，只不過改變了圖片的大小，變成了全屏顯示。

4. 上下滑動(dòng)輪播圖元件

上下滑動(dòng)輪播圖元件一般會應(yīng)用于直播app、視頻app等，不需要太多文字內(nèi)容，讓用戶過目即可。如果用戶手指停留在屏幕上時(shí)，停止滑動(dòng)，松開繼續(xù)滑動(dòng)，用戶也可以上下滑動(dòng)查看內(nèi)容。

5. 心形輪播圖元件

心形輪播軟件是就近很流行的圖片動(dòng)畫，一般用于像珍愛網(wǎng)、世紀(jì)佳聯(lián)、百合網(wǎng)等一些相親app。

當(dāng)然了在特殊節(jié)日如父親節(jié)、母親節(jié)、情人節(jié)也會用的上，該元件的交互主要是移動(dòng)圖片和放大縮小。

三、設(shè)計(jì)思路

1. 制作材料

圖片輪播原型，我們選擇使用中繼器來制作，為什么使用中繼器呢？

因?yàn)橹欣^器制作完成之后，維護(hù)簡單，只需要像填寫excel表格那樣，填寫中繼器表格導(dǎo)入圖片即可。交互自動(dòng)實(shí)現(xiàn)，復(fù)用性高，維護(hù)成本低，以后項(xiàng)目也可以用到。

中繼器內(nèi)原件及擺放：圖片+文字（非必要），圖片大小自己調(diào)整即可，如下圖擺放：

2. 中繼器表格

我們只需要設(shè)置3列：

1. picture：需要顯示的圖片，鼠標(biāo)右鍵導(dǎo)入，或者ctrl+v粘貼
2. title：標(biāo)題文字（非必填）
3. number：數(shù)據(jù)（這個(gè)根據(jù)實(shí)際需要設(shè)置，非必填，例如文章內(nèi)容可以顯示閱讀數(shù)，直播的話可以顯示在線人數(shù)）

3. 主要交互

設(shè)置文本：中繼器每項(xiàng)加載時(shí)，把title列和number列的文字設(shè)置到對應(yīng)的標(biāo)題和數(shù)據(jù)文本。

設(shè)置圖片：中繼器每項(xiàng)加載時(shí)：設(shè)置圖片為item.picture。

滑動(dòng)事件：我們用移動(dòng)這個(gè)時(shí)間來做，移動(dòng)的距離就是圖片的寬度（如果是上下滑動(dòng)就是高度）+兩圖之間的間距（間距可以為0）。

例如：往左滑動(dòng)300，x就填-300；向右滑動(dòng)300，x就填300；向上滑動(dòng)300，y就填-300；向下滑動(dòng)300,y就填300。

自動(dòng)循環(huán)事件：自動(dòng)循環(huán)我們用動(dòng)態(tài)面板來做，動(dòng)態(tài)面板新建state1和state2，載入時(shí)設(shè)置動(dòng)態(tài)面板轉(zhuǎn)臺自動(dòng)循環(huán)，間隔為3s（根據(jù)實(shí)際設(shè)置，這個(gè)是幾秒換一張圖），動(dòng)態(tài)面板轉(zhuǎn)態(tài)變更時(shí)觸發(fā)上面的滑動(dòng)事件即可。

以上就是本期關(guān)于移動(dòng)端圖片輪播原型設(shè)計(jì)的全部內(nèi)容了，主要是基于我個(gè)人在實(shí)際工作中需要用到的原型，而設(shè)計(jì)出來的Axure組件。大家在設(shè)計(jì)原型的時(shí)候，可以根據(jù)實(shí)際情況需要選擇使用。

如果大家有所收獲，希望可以點(diǎn)贊鼓勵(lì)一下，也歡迎大家交流，謝謝。

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

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