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

最近在研究一些復(fù)雜度稍高的交互原型實(shí)現(xiàn)，雖然日常工作很少用到，但對于產(chǎn)品經(jīng)理去分解產(chǎn)品是有幫助的。偶爾刷朋友圈的時候，往上一滑，微信的標(biāo)題欄（頂欄）和狀態(tài)欄的切換一下子抓住了我的眼球，因此想實(shí)現(xiàn)一個一樣的原型效果，以下是我的思路和最終實(shí)現(xiàn)。

最終效果體驗(yàn)：https://beu30o.axshare.com/#c=2

一、邊界狀態(tài)

狀態(tài)一，狀態(tài)欄是背景透明+文字白色的、沒有“朋友圈”三個字、返回鍵和相機(jī)圖標(biāo)都是白色。

狀態(tài)二，狀態(tài)是背景灰色+文字黑色的，標(biāo)題欄多了“朋友圈”三個字，并且有了灰色背景、圖標(biāo)變?yōu)楹谏?/p>

二、拆解中間交互流程

整個狀態(tài)欄+標(biāo)題欄的變化是隨著用戶向上滑動而變的，因此，我們定義 H = 用戶向上滑動的距離，刷新朋友圈后未進(jìn)行任何上下滑動時即為 H=0。

同時假設(shè)朋友圈的相冊封面高度為300（實(shí)際上并不是）

隨著H的變化，頂欄及狀態(tài)欄有以下兩幾種情況：

• 0<H<200，狀態(tài)欄背景透明+字體白色，頂欄兩個圖標(biāo)白色，不透明度均為100%；
• 200<=H<250，頂欄不透明度從100%→0，狀態(tài)欄維持完全不透明；
• 250<=H<300，狀態(tài)欄字體黑色不透明度100%，背景從透明逐漸變灰；頂欄背景灰色+兩個圖標(biāo)、朋友圈字體黑色，透明度從0→100%逐漸顯示；
• 300<=H，狀態(tài)欄灰色+頂欄灰黑，不透明度100%。

這里有一個邊界值需注意，在H=250的時候，狀態(tài)欄是突然從白色切換到黑色的，不透明度維持100%；

三、原型素材準(zhǔn)備

此處我用了四個素材：機(jī)型外殼、狀態(tài)欄的動態(tài)面板（高度20，背景透明）、頂欄動態(tài)面板（高度60，也用于控制狀態(tài)欄的背景色）、拖動面板（兩層動態(tài)面板嵌套實(shí)現(xiàn)上下滑動效果，里面塞了一堆無意義的色塊）

ps：如果對拖動面板不理解的同學(xué)自己另行解決……

四、交互用例設(shè)計(jì)

（1）定義全局變量H，默認(rèn)值為0；

（2）載入頁面時，狀態(tài)欄、頂欄均為白色；對應(yīng)設(shè)置載入時的兩個動態(tài)面板狀態(tài)，此處省略截圖；

（3）整個交互是圍繞“拖動面板 拖動時”發(fā)生的，因此對應(yīng)第三步中的分解，設(shè)置0<H<200、200<=H<250、250<=H<300、300<=H 四個條件判斷；

（4）四個條件中，都加入滑動交互；設(shè)置好H的變化，此處我用了 H=[[-p.top]]，p為拖動面板內(nèi)嵌套的內(nèi)容面板；

（5）分條件添加狀態(tài)欄、頂欄的變化交互：

• 0<H<200，頂欄、狀態(tài)欄都設(shè)置為白色，不透明度100%；
• 200<=H<250，頂欄、狀態(tài)欄設(shè)置為白色，狀態(tài)欄的不透明度從100%→0，即頂欄不透明度設(shè)置為 [[(250-H]*2]；（ps，不透明度設(shè)置貌似axure 8 或以上才有）
• 250<=H<300，頂欄、狀態(tài)欄設(shè)置為黑色（動態(tài)面板狀態(tài)設(shè)置），狀態(tài)欄的不透明度從100%→0，即頂欄不透明度設(shè)置為 [[(H-250]*2]；
• 300<=H，頂欄、狀態(tài)欄設(shè)置為黑色，不透明度100%，用戶繼續(xù)上滑也不變化；

具體設(shè)置如下圖：

拖動面板的交互動作

如此，即能實(shí)現(xiàn)朋友圈上下滑動時，狀態(tài)欄和標(biāo)題欄（頂欄）的交互效果。

我這里的數(shù)值和微信的實(shí)際數(shù)值有所差異，主要是為了分解邏輯，次要為了模擬效果實(shí)現(xiàn)。

最終效果體驗(yàn)：?https://beu30o.axshare.com/#c=2

想要具體原型rp文件的同學(xué)可以自?。?/p>

鏈接：https://pan.baidu.com/s/1lawCXdpNhTxA6uqjaItnzg

提取碼：njnz

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

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