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