天氣信息

720°全景編輯指引

瀏覽數:117 

全景頁面結構

上圖是全景展開后的圖示,如你所見,它由外圈背景(2580×1306),內圈背景(2360×1206),還有在其上方的部件構成。為了方便描述,外圈背景和內圈背景使用了純色表示,實際上它們是兩張圖片。將整塊東西繞著Y軸卷成一個圓柱體后,就變成了我們在手機上看到的720°全景:

圓柱體的上方和下方可以看到白色的區域,是由屬性“背景色”控制的,可以修改成你想要的顏色。



部件

編輯全景中的部件時,你會接觸到一個新的概念:層級。一共有10個層級,可以這樣理解,層級越小,越靠近背景;層級越大,越靠近觀看者。高層級的部件看起來會比實際尺寸更大,和我們在現實中遠小近大的觀感一致。


- 最大寬度

部件在每個層級中都有一個最大寬度,超過這個寬度有可能兩邊會被背景切割遮擋。各層級最大寬度參照表:

請嚴格遵循上表設置各層級部件尺寸,務必不能超出最大寬度。


- 面向角度

全景中所有部件都會調整成面向圓柱體的Y軸,因此即使在編輯時看起來是處于一個平面的兩個部件,實際觀看時都有可能會斜切,即使他們在同一個層級上。

↑ 編輯時(這兩個方塊處在同一層級,且有重疊)

↑ 實際效果,由于調整了面向角度,它們相切了


要避免這種情況,有兩個方法:

a)部件之間盡量不要有重疊;

b)如果需要做重疊效果,請把部件水平居中對齊。示例:

↑ 編輯時將它們水平居中

↑ 實際效果

如果N個部件水平居中對齊,那么不管它們處在什么層級都不會有相切的情況



外/內圈背景

外/內圈背景圖片設計難度較高,如果你不是專業設計師,建議不要修改背景圖片,直接選擇合適的全景模板修改部件內容。


- 強制尺寸

外圈背景2580×1306,內圈背景 2360×1206。這是一個強制的尺寸,即使你的背景圖片像素區域沒那么大,也要預留空白像素,做成所要求尺寸的部分透明PNG圖片。


- 左右邊緣銜接

由于背景圖片最終要卷成圓柱狀,設計時需要留意讓圖片的左側和右側完美拼合。


- 背景內容

全景中不宜添加尺寸過大的部件,因此你應該把想表現的大部分內容放在背景圖片上,僅保留相對較小的、需要添加點擊事件的部件。





东方6十1哪个app 快赢481最近120期 浙江快乐12中奖助手 3百家乐投注网 排列五玩法中奖说明 股票配资平台可问金多多建议 百度投资理财平台 什么是指数年线 广东十一选五任三计划 赌博上头控制方法