微傳單 720°全景編輯指引全景頁面結(jié)構(gòu)
上圖是全景展開后的圖示,如你所見,它由外圈背景(2580×1306),內(nèi)圈背景(2360×1206),還有在其上方的部件構(gòu)成。為了方便描述,外圈背景和內(nèi)圈背景使用了純色表示,實(shí)際上它們是兩張圖片。將整塊東西繞著Y軸卷成一個(gè)圓柱體后,就變成了我們?cè)谑謾C(jī)上看到的720°全景:
圓柱體的上方和下方可以看到白色的區(qū)域,是由屬性“背景色”控制的,可以修改成你想要的顏色。 部件 編輯全景中的部件時(shí),你會(huì)接觸到一個(gè)新的概念:層級(jí)。一共有10個(gè)層級(jí),可以這樣理解,層級(jí)越小,越靠近背景;層級(jí)越大,越靠近觀看者。高層級(jí)的部件看起來會(huì)比實(shí)際尺寸更大,和我們?cè)诂F(xiàn)實(shí)中遠(yuǎn)小近大的觀感一致。 - 較大寬度 部件在每個(gè)層級(jí)中都有一個(gè)較大寬度,超過這個(gè)寬度有可能兩邊會(huì)被背景切割遮擋。各層級(jí)較大寬度參照表:
請(qǐng)嚴(yán)格遵循上表設(shè)置各層級(jí)部件尺寸,務(wù)必不能超出較大寬度。 - 面向角度 全景中所有部件都會(huì)調(diào)整成面向圓柱體的Y軸,因此即使在編輯時(shí)看起來是處于一個(gè)平面的兩個(gè)部件,實(shí)際觀看時(shí)都有可能會(huì)斜切,即使他們?cè)谕粋€(gè)層級(jí)上。
↑ 編輯時(shí)(這兩個(gè)方塊處在同一層級(jí),且有重疊)
↑ 實(shí)際效果,由于調(diào)整了面向角度,它們相切了 要避免這種情況,有兩個(gè)方法: a)部件之間盡量不要有重疊; b)如果需要做重疊效果,請(qǐng)把部件水平居中對(duì)齊。示例:
↑ 編輯時(shí)將它們水平居中
↑ 實(shí)際效果 如果N個(gè)部件水平居中對(duì)齊,那么不管它們處在什么層級(jí)都不會(huì)有相切的情況 外/內(nèi)圈背景 外/內(nèi)圈背景圖片設(shè)計(jì)難度較高,如果你不是專業(yè)設(shè)計(jì)師,建議不要修改背景圖片,直接選擇合適的全景模板修改部件內(nèi)容。 - 強(qiáng)制尺寸 外圈背景2580×1306,內(nèi)圈背景 2360×1206。這是一個(gè)強(qiáng)制的尺寸,即使你的背景圖片像素區(qū)域沒那么大,也要預(yù)留空白像素,做成所要求尺寸的部分透明PNG圖片。 - 左右邊緣銜接 由于背景圖片最終要卷成圓柱狀,設(shè)計(jì)時(shí)需要留意讓圖片的左側(cè)和右側(cè)完美拼合。 - 背景內(nèi)容 全景中不宜添加尺寸過大的部件,因此你應(yīng)該把想表現(xiàn)的大部分內(nèi)容放在背景圖片上,僅保留相對(duì)較小的、需要添加點(diǎn)擊事件的部件。 Prev微傳單 一鏡到底使用教程
Next微傳單 球體儀使用教程
|
觀達(dá)云產(chǎn)品矩陣
全經(jīng)營(yíng)場(chǎng)景覆蓋,快速高效解決經(jīng)營(yíng)難題