使用 Lolly

一份實際教你使用本應用程式的指南:開啟工具、操作畫布、匯出、儲存與分享。這裡的一切都在你的裝置上執行:不需要帳號、不需要上傳,首次載入後也不需要網路連線。

第一次使用嗎?快速上手讓你在幾分鐘內就能開始動手做,Lolly 給維運人員則說明如何安裝與部署本應用程式;本頁談的是開啟之後怎麼操作。

開啟工具

首頁就是工具庫:所有工具依類別分組。點卡片即可開啟工具;如果你先前用過,繼續按鈕會接續你最近一次的工作階段。用搜尋框依名稱篩選,或從六個列表畫面(工具庫、工具程式、專案、目錄、儀表板與個人資料)底部的列來搜尋,它除了工具,也能找到你儲存的成果、目錄與設定。進入工具後,這條列會退開,讓位給工具本身的介面。

工具庫:每個工具都是一張卡片,依類別分組signed by Lollyvector SVG自己驗證Get the signed file281 paths~38k nodes443 groups6 images2,269 KB工具庫:每個工具都是一張卡片,依類別分組signed by Lollyvector SVG自己驗證Get the signed file281 paths~38k nodes443 groups6 images2,265 KBTry it in the app

每個工具都是分割畫面:一側是控制項,另一側是即時預覽(畫布)。變更任何控制項,預覽都會立即更新。

某個工具的分割檢視畫面——左側是控制項堆疊,右側是即時繪製的分組長條圖signed by Lollyvector SVG自己驗證Get the signed file23 paths372 nodes11 groups21 KB某個工具的分割檢視畫面——左側是控制項堆疊,右側是即時繪製的分組長條圖signed by Lollyvector SVG自己驗證Get the signed file23 paths372 nodes11 groups21 KB

少數工具(例如 Design)會改以自由畫布開啟:一個沒有邊框、可直接操作的介面,你可以拖曳、縮放、旋轉並貼齊文字、形狀與圖片方塊,也能雙擊就地編輯文字。它與其他所有工具走同一條算圖路徑匯出,因此畫布就是檔案。見下方的自由畫布

有兩種方式可以把這片格狀清單調整成你要的樣子:

工具格狀清單的末端,隱藏的工具已顯示出來:變暗的 QR Code Generator 卡片,以及旁邊那塊把它切回可見狀態的灰色方塊,現在寫著 Hide hidden toolssigned by Lollyvector SVG自己驗證Get the signed file251 paths~29k nodes440 groups658 KB工具格狀清單的末端,隱藏的工具已顯示出來:變暗的 QR Code Generator 卡片,以及旁邊那塊把它切回可見狀態的灰色方塊,現在寫著 Hide hidden toolssigned by Lollyvector SVG自己驗證Get the signed file247 paths~29k nodes439 groups1 image729 KB

Ask Lolly

與其翻找,不如直接問:Ask Lolly#/ask)接受你輸入的問題,並把本說明文件中相符的段落原文交還給你,是指南本身的原話,不是摘要,也不是生成內容,並註明出處頁面,旁邊附上 Open in docs(在文件中開啟)連結。答案下方是應用程式中同樣符合這個問題的位置:一個工具、一項設定、一個已儲存的專案,各自是一顆直接帶你過去的按鈕。

對話紀錄只是這次工作階段的記憶:追問下去,串接會逐步累積,重新載入後則從頭開始。搜尋結果底部會有一列 *Ask Lolly:你的查詢***,位在其他分組找到的具體結果之下,點下去就把問題直接交過來,因此你可以從搜尋列開始,在這裡收尾。

畫布(預覽)

預覽永遠精確呈現匯出後的樣子。

桌機

畫布角落的縮放 HUD:減號、即時百分比、加號、Fit,接著是主題與音效切換signed by Lollyvector SVG自己驗證Get the signed file5 paths199 nodes11 groups7 KB畫布角落的縮放 HUD:減號、即時百分比、加號、Fit,接著是主題與音效切換signed by Lollyvector SVG自己驗證Get the signed file5 paths186 nodes11 groups7 KB

觸控

點一下就跳到對應的控制項: 點設計中的任何元素,側邊欄裡對應的輸入項就會取得焦點並捲入視野;若是重複列群組,它會展開你點到的那一列,因此要編輯眼前看到的東西只差一下點按。

只要改變尺寸,畫面一律會回到乾淨的符合視窗狀態。

自由畫布(Design)

自由畫布類的工具會在畫板周圍加上一塊工作區,就像設計師的桌上檯面:

Design 的自由畫布 - 工作區域及其周圍的貼上板signed by LollyPNG自己驗證Get the signed filepixels, not shapes543 KBDesign 的自由畫布 - 工作區域及其周圍的貼上板signed by LollyPNG自己驗證Get the signed filepixels, not shapes490 KB

翻轉選取項目。 在任何方框上按右鍵,選擇 Flip horizontalFlip vertical 即可原地鏡射,或以鍵盤按下 Shift+H / Shift+V - 之所以要按 Shift,是因為單獨的 V 是 Pointer 工具。每個選取的方框都會依自己的軸鏡射,並在一個復原步驟內完成,而且鏡射是真正的變形,因此會保留在匯出的 SVG、PDF 與 PNG 中,而不僅僅是畫布上。

畫出自己的形狀(鋼筆)

方塊、圓形與圓角框足以應付大多數版面。需要清單裡沒有的形狀時,就自己畫:工具列的鋼筆按鈕(或 P 鍵)會讓你進入繪製模式。三個單鍵在模式之間移動:V 回到指標、P 是鋼筆、N 是節點工具(編輯節點),而指標永遠是離開目前狀態的出口。

自由畫布的工具列:拖曳握把、Lolly 選單,接著是指標、新增方塊、鋼筆、編輯節點、線條、時間軸、畫板與自動排列signed by Lollyvector SVG自己驗證Get the signed file36 paths206 nodes31 groups22 KB自由畫布的工具列:拖曳握把、Lolly 選單,接著是指標、新增方塊、鋼筆、編輯節點、線條、時間軸、畫板與自動排列signed by Lollyvector SVG自己驗證Get the signed file36 paths206 nodes31 groups22 KB

結果就是畫布上一個普通的方塊。移動、縮放、旋轉、群組、對齊、調整堆疊順序,給它填色、漸層、陰影或不透明度都行:路徑的行為和其他所有方塊一樣,這些控制項不會對它另眼相待。

它出場時也已經上好色。你畫的第一條路徑會採用品牌給路徑的填色與筆畫,之後每一條新路徑則採用你上次用的設定:填色設一次就繼續畫,不必每個形狀都重新上色。(若某個工具的品牌沒有為路徑指定任何設定,畫出來的路徑會以你繪製時看到的顏色描邊,所以絕不會是隱形的。)

再次編輯節點。 雙擊該形狀(或用物件列上的編輯節點),節點就會回來。拖節點可移動它,拖控制桿可改變方向,在曲線上任一處點一下可插入節點,框選一組節點後按 Delete 可刪除選取的節點。路徑至少會保留兩個節點,所以你不會不小心把它刪到不存在。

曲線類型決定通過你節點的是哪一種曲線,這是值得弄懂的選擇:

類型作用
平滑(自動)預設值。自行算出控制桿長度,因此單純點、點、點就能得到真正平滑的曲線,不必和控制桿搏鬥。若你確實設定了控制桿,它會固定方向,長度仍由曲線自己掌握。
貝茲控制桿經典的鋼筆。控制桿就是控制點,插入節點永遠不會移動曲線。
通過節點精確通過你放下的每一個節點,沒有控制桿。
B-spline靠近節點而不通過節點,形狀更柔和。
直線折線。

把既有路徑切換成會自行決定控制桿的類型時會先詢問,因為你設定的控制桿長度無法還原;切換到貝茲控制桿則一律不會有損失。繪製途中不會詢問:切換會直接套用到草稿上,你已經拉出的控制桿也會跟著改變。在自行掌管控制桿的類型上,插入節點會讓曲線的形狀略微改變;貝茲控制桿則不會。

每個節點也帶有一條連續性規則,從它在畫布上的形狀就看得出來:方形是角點(控制桿各自獨立),圓形是平滑(控制桿保持共線),圓形加一圈是對稱(共線且等長)。為任何選取的節點設定它,曲線會立刻重新滿足這條規則。

兩條直接從連結算圖出來的鋼筆路徑:一條描邊的 S 形曲線,以及一個閉合填色的團塊signed by Lollyvector SVG自己驗證Get the signed file5 paths38 nodes7 groups5 KB兩條直接從連結算圖出來的鋼筆路徑:一條描邊的 S 形曲線,以及一個閉合填色的團塊signed by Lollyvector SVG自己驗證Get the signed file5 paths38 nodes7 groups5 KB

畫出來的路徑和其他一切一樣會跟著連結走,因此你畫的形狀能從分享連結重新開啟,也能從 CLI 算出一模一樣的結果。它完全不依賴編輯器。

合併形狀(路徑運算)

選取兩個以上的形狀,在畫布上按右鍵(觸控是雙指輕點),選單就會提供你在繪圖軟體中會預期的那些運算:

另外三項作用在單一形狀上:筆畫轉外框…把筆畫變成同一輪廓的填色形狀(想把粗細原樣保留下來時很有用),位移路徑…把輪廓往外撐大,或用負值往內縮小,而簡化會用較少的線段重建同樣形狀的路徑。

一彎新月與一個有真正孔洞的環,兩者都由減去運算做出signed by Lollyvector SVG自己驗證Get the signed file5 paths47 nodes7 groups5 KB一彎新月與一個有真正孔洞的環,兩者都由減去運算做出signed by Lollyvector SVG自己驗證Get the signed file5 paths47 nodes7 groups5 KB

結果是一條新的路徑,你可以繼續用鋼筆編輯。孔洞是真正的孔洞:筆畫面板上的填滿規則控制項決定重疊的輪廓是要填滿(non-zero)還是穿透(even-odd)。

這些運算刻意不做兩件事。它們寧可拒絕,也不破壞:要求兩個不重疊的形狀相交,它會告訴你沒有東西可以保留,而且什麼都不會變。另外,文字與圖片方塊沒有可用的輪廓,因此會維持原狀,而不是用外框去近似。合併的結果會以單純的貝茲曲線儲存,繪圖軟體也是這麼做的:原本的曲線類型不會在運算後留存。

時間軸(Sequence Studio)

The timeline with the music clip selected: its strip runs along the bottom with Speed, Fades, Volume, Pan, EQ, Pitch, Normalize volume and the Effect slotsigned by Lollyvector SVG自己驗證Get the signed file104 paths~7.2k nodes157 groups2 images97 KBThe timeline with the music clip selected: its strip runs along the bottom with Speed, Fades, Volume, Pan, EQ, Pitch, Normalize volume and the Effect slotsigned by Lollyvector SVG自己驗證Get the signed file104 paths~7.2k nodes157 groups2 images97 KB

Sequence Studio 為自由畫布加上時間。每個方塊都可以在某個時刻開始、持續一段長度,並帶進場與出場動畫,而停靠在畫板下方的時間軸就是你安排它們的地方。一開啟就已經有一段序列在播放:一張標題卡、一段片段、一張結尾卡、一條下方字幕條與一段配樂,因此你還沒改動任何東西,就能看見整個模型。

Sequence Studio 的時間軸:播放控制列、尺標、疊加軌道、含有片段與接縫標籤的磁吸式序列列,以及 Always on 條帶signed by Lollyvector SVG自己驗證Get the signed file73 paths~5.4k nodes115 groups80 KBSequence Studio 的時間軸:播放控制列、尺標、疊加軌道、含有片段與接縫標籤的磁吸式序列列,以及 Always on 條帶signed by Lollyvector SVG自己驗證Get the signed file73 paths~5.4k nodes115 groups80 KB

有兩種列,而兩者的差別正是整個構想所在:

編輯舞台:置中的畫板、左側的工具列,以及角落的縮放 HUDsigned by Lollyvector SVG自己驗證Get the signed file19 paths852 nodes30 groups20 KB編輯舞台:置中的畫板、左側的工具列,以及角落的縮放 HUDsigned by Lollyvector SVG自己驗證Get the signed file19 paths839 nodes30 groups20 KB

開啟時間軸就等於把鍵盤交給它,因此 Space 與方向鍵驅動的是播放磁頭,而不是頁面;又因為在已經帶有時間設定的作品上它會自行開啟,所以 Sequence Studio 一載入就是如此。

序列編輯器更深入說明四件決定「在時間上編輯」是否好預測的事:畫布上的一次點按會編輯到哪個片段、相鄰片段的洋蔥皮殘影、分割的作用範圍與能還原剪接的接合,以及修剪(含鍵盤操作)。時間軸取得焦點時按 ? 可叫出快速鍵表。

編輯。 拖片段的中間可移動或重新排序,拖在任一端幾個像素之內可修剪,按在播放磁頭處分割(或 S)可把一個片段切成兩個。分割需要片段有實際的長度,而且播放磁頭要落在它裡面一小段距離,因此沒有結束時間的片段(配樂就是一例)無法分割。貼齊邊緣預設開啟,會貼齊片段邊緣、播放磁頭與整秒,按 Alt 可暫時取消。每次拖曳都是單一個復原步驟,而拖曳預覽採用與實際提交相同的算法,所以拖曳時看到的就是結果。

選取片段後,檢視器會以數值提供同樣的編輯:長度裁修起點(從來源的多深處開始)、速度(從 ×0.25 到 ×4 的一組固定倍率)、進場動畫 / 出場動畫及其長度,以及將片段靜音。磁性列上的片段刻意沒有開始欄位:順序由該列掌管,所以要移動就用拖的。

轉場是預設效果,不是關鍵影格:淡入淡出、彈出、放大、上升、落下、四種滑入、放大與縮小、傾斜、俯衝、旋轉、飄移,或硬切(無動畫)。距離會隨物件大小縮放,因此同一個預設在滿版卡片與小徽章上都讀得對。序列列上兩個相鄰片段之間有一個接縫標籤:點它並選擇硬切交叉淡入淡出,會立即套用並關閉。再開啟同一個標籤可以改長度(毫秒),然後按完成。交叉淡入淡出會存成前一段的淡出加下一段的淡入,匯出時再從這一對推導出真正的溶接,這就是為什麼預覽裡看起來像兩次淡化,在檔案裡卻是真正的交接。

聲音。 加入一段音訊片段,它就和其他片段一樣活在時間軸上:波形、修剪、靜音。(預設工作階段附帶的生成配樂是唯一的例外,它在匯出時才合成,所以在你算圖之前,它的長條都是素面而且沒有聲音。)按麥克風可直接在時間軸上錄製旁白,附有預備計數與音量表,錄好的內容會存成你自己的素材,放在你開始錄的位置。按旁邊的攝影機可用同樣的方式錄製影片:拍攝時畫面會依畫板的匯出尺寸裁切,因此那個小小的自拍預覽顯示的,正是會以滿版畫面進入播放頭處序列的內容——這也是透過共享連結收集同事素材的方式。音樂、對白與片段本身的聲音都會進入匯出的混音。(匯出面板的音訊軌是另一回事:鋪在整段影片底下的單一配樂,帶有淡化與閃避。兩者可以並存。)

算圖。 動態匯出是一次確定性的合成,不是螢幕錄影:每一格都在精確的時間點解碼、繪製與編碼,因此檔案不取決於你的機器跟不跟得上,MP4 或 WebM 在實務上也沒有影格數上限。除非你自己輸入,否則時間軸本身的長度就決定片長。Content Credentials 會像其他任何匯出一樣蓋上。靜態匯出給你的是播放磁頭處的那一格,或是用輸出尺寸旁的影格欄位一次做出整張連拍表,見匯出

有幾項限制要記得:一段序列上限為一小時,GIF 與動態 PNG 會把影格緩衝起來,所以長度得短;速度不是 ×1 的片段沒有聲音(目前還沒有時間伸縮),而即時錄製在這裡被隱藏,因為合成器是更好的路徑。

超越預設集:關鍵影格、深度與攝影機。 轉場動畫負責讓片段在進場與退場時產生動態。若要在片段內部為某個物件設定姿態——讓它漂移、淡入淡出、模糊、抬離頁面再落回——就要新增關鍵影格:選取該片段,按下 +Keyframe(時間軸工具群組中的菱形圖示、畫布物件列上的菱形圖示,或按 K),播放頭的位置就會決定你下一次編輯所寫入的姿態。同一套關鍵影格系統也為每個計時合成賦予攝影機功能,能推進、橫搖並拉焦,把一張平面 SVG 變成一疊你能在其間穿梭飛行的圖層。完整指南請見 動畫功能

Design 工具有同一條時間軸,因此你不必換到別的工具就能為版面設定時間,而且它也能匯出動態。

簡報播放

The inspector's Document section: Voice, Blend with, Speed, Lead-in, Tail and Show captions when presentingsigned by Lollyvector SVG自己驗證Get the signed file29 paths~4.4k nodes56 groups2 images57 KBThe inspector's Document section: Voice, Blend with, Speed, Lead-in, Tail and Show captions when presentingsigned by Lollyvector SVG自己驗證Get the signed file29 paths~4.4k nodes56 groups2 images57 KB

畫板組成的 Design 文件本身就是一份簡報。開啟工具列上的 Lolly 選單,選擇最後一列的簡報播放,每個畫板就會變成一張全螢幕投影片,順序依畫板在畫布上的排列而定。簡報跑的是已算圖畫板的副本,因此底下的編輯器完全不會被動到,離開時你會回到原來的位置。

簡報同時也是一個連結。?present 會直接開進簡報,s= 指名投影片:一個位置、一個畫板 id,或用 id.step 指到某個分段步驟,而網址會隨你移動更新,因此你送出的就是你正看著的那一張。工具作者請注意:這些參數記載於 URL Mode 頁面。

在手機上

在窄螢幕上,版面會重排成單欄:

手機寬度螢幕上的工具:控制項是頂端的面板,生成的色盤填滿下方預覽,算圖膠囊浮在底部中央signed by Lollyvector SVG自己驗證Get the signed file61 paths~2.9k nodes128 groups2 images72 KB手機寬度螢幕上的工具:控制項是頂端的面板,生成的色盤填滿下方預覽,算圖膠囊浮在底部中央signed by Lollyvector SVG自己驗證Get the signed file61 paths~2.9k nodes128 groups2 images72 KB

控制項(輸入項)

工具只開放本來就該變動的輸入項,其餘一切(色彩、版面、字體排印、邏輯)都由工具作者鎖定,因此你做出來的東西一定符合作者設下的規則。輸入項包括文字、滑桿、選色器、下拉選單、日期、圖片選擇器與重複列群組。有些會收在可收合的區塊裡。

工具的控制項堆疊:一個文字欄位、幾個顏色觸發器與一支滑桿,作者選擇鎖定的其他一切都不在這裡signed by Lollyvector SVG自己驗證Get the signed file19 paths~2.1k nodes45 groups1 image31 KB工具的控制項堆疊:一個文字欄位、幾個顏色觸發器與一支滑桿,作者選擇鎖定的其他一切都不在這裡signed by Lollyvector SVG自己驗證Get the signed file19 paths~2.1k nodes45 groups1 image31 KB

重設: 清除變更會把每個輸入項還原成預設值。

復原與取消復原

Cmd/Ctrl-Z 往回一步,Cmd/Ctrl-Shift-Z(或 Cmd/Ctrl-Y)再往前一步。同一組也是控制項上方那一列的復原取消復原按鈕,在自由畫布上則位於工具列,各自在沒有東西可收回時變灰。每一步都會說出它是什麼:復原一個顏色,會有一則小訊息指出它剛還原的是哪個輸入項,裡面還帶一顆取消復原按鈕讓你走回去。

在即時協作中,歷史紀錄仍然只屬於你自己。來自其他裝置的變更永遠不會加入你的復原堆疊,因此復原永遠只能取消你自己做過的動作。

你的個人資料與大頭照

個人資料(工具庫右上角)存放你的姓名、聯絡方式與選用的大頭照。需要這些欄位的工具會自動預先填入:設定一次,你的電子郵件簽名檔、標誌組合與識別證就會自己填好。你仍然可以在個別工作階段覆寫任何欄位。開啟使用我的資料來建立,你的資料就會以作者身分跟著匯出的成品一起走。

你的大頭照與個人資料只存在這台裝置上。個人資料也不一定只代表你本人,它可以是一個團隊,或你偶爾扮演的一個角色。完整說明(包括同時保留多份)見 個人資料

儲存與接續

儲存可把目前的輸入項存成該工具的一個工作階段。每個工具都可以保留多個具名的工作階段;每個工具的繼續按鈕會重新開啟你最近的一個,而歷史按鈕(右上角,個人資料旁邊)會列出所有工具中每一個已儲存的工作階段。工作階段只存在本機裝置。要整理它們,請開啟專案(見下文)。

分成兩半的算圖膠囊:一個向上箭頭開啟匯出面板,一個勾號就地儲存工作階段signed by Lollyvector SVG自己驗證Get the signed file2 paths240 nodes10 groups7 KB分成兩半的算圖膠囊:一個向上箭頭開啟匯出面板,一個勾號就地儲存工作階段signed by Lollyvector SVG自己驗證Get the signed file2 paths240 nodes10 groups7 KB

專案

專案(從工具旁邊的專案分頁開啟,或從個人資料 → 儲存空間 → 在專案中整理進入)是你所有已儲存內容的家,用起來就像檔案管理員:

專案:已儲存的工作階段整理在可巢狀的資料夾中signed by Lollyvector SVG自己驗證Get the signed file79 paths~7.7k nodes104 groups179 KB專案:已儲存的工作階段整理在可巢狀的資料夾中signed by Lollyvector SVG自己驗證Get the signed file79 paths~7.7k nodes104 groups180 KB

專案中開啟的「檢視與排序」浮動視窗,包含一列主題、Preview 或 List 的檢視選擇,以及排序底下的名稱、加入日期與最後修改signed by Lollyvector SVG自己驗證Get the signed file11 paths~1.3k nodes21 groups19 KB專案中開啟的「檢視與排序」浮動視窗,包含一列主題、Preview 或 List 的檢視選擇,以及排序底下的名稱、加入日期與最後修改signed by Lollyvector SVG自己驗證Get the signed file11 paths~1.3k nodes21 groups19 KB

選取列提供的動作會依檢視略有不同,因為不是每個動作在每個地方都說得通:

有個標籤陷阱:檢視工作階段只有在已選取東西之後才存在。在未選取的單張卡片上按右鍵,出現的會是 N saved sessions,它開啟的是該工具自己的歷史對話框,而不是切換到專案。

工具總覽中兩張已勾選的工具卡片,浮動選取列顯示「已選取 2 項」,並提供「可離線使用」、「檢視工作階段」、「我的最愛」與「隱藏」等選項signed by Lollyvector SVG自己驗證Get the signed file278 paths~46k nodes495 groups4 images1,183 KB工具總覽中兩張已勾選的工具卡片,浮動選取列顯示「已選取 2 項」,並提供「可離線使用」、「檢視工作階段」、「我的最愛」與「隱藏」等選項signed by Lollyvector SVG自己驗證Get the signed file280 paths~46k nodes500 groups5 images1,227 KB

分享你的作品

設計可以用兩種方式送出去:連結或檔案。分享對話框兩者都提供。在匯出控制項中用分享開啟;在專案中對已儲存的工作階段選分享連結,會為該工作階段開啟同一個對話框。

連結

每個輸入項都收在頁面網址裡,因此連結就是設計。對話框頂端是可直接複製的連結,底下有兩個收合的區塊。

把連結貼給同事、加入書籤,或提交進版本庫。(完整說明:URL Mode。)

有些工具會讓連結本身就是完整的產品。 Jump Page 把你的連結整理成一頁,方便你分發出去——個人簡介連結、研討會演講頁、商店首頁皆可。背後沒有任何東西需要架設,也不需要帳號:這一頁就是那個連結,因此它能以網址傳遞的速度立即開啟。在編輯器中,你會在欄位旁邊看到完成後的頁面;開啟連結的訪客會以全寬顯示,並隨著捲動,每個場景顯示一個連結。

編輯器中的 Jump Page——標題、三個各自擁有專屬底色的連結場景,以及「Made with Lolly」頁尾,在畫布中排版為一整頁signed by Lollyvector SVG自己驗證Get the signed file12 paths~2.4k nodes28 groups30 KB編輯器中的 Jump Page——標題、三個各自擁有專屬底色的連結場景,以及「Made with Lolly」頁尾,在畫布中排版為一整頁signed by Lollyvector SVG自己驗證Get the signed file12 paths~2.4k nodes28 groups30 KB

對話框會說明連結載不動什麼。 有三種東西塞不進網址:你從這台裝置加入的圖片或檔案、非常長的文字值,或非常大的清單。建立連結時每一項都會被計入。若有東西不得不捨棄,對話框會指名是什麼,並把你導向下面的檔案,而不是交給你一個開啟後圖片不見的連結。只是很長的連結則會得到一則較溫和的提示與字元數,因為長度還能靠打包救回來。

.lolly 檔案

在你正在使用的工具的分享對話框中,下載 .lolly 會把同一份設計寫成一個檔案。它帶著已儲存的工作階段,以及你從裝置加入的圖片與檔案。設計所引用的目錄美術資源也一併裝在裡面,因此這個檔案在從未見過你品牌的機器上打開時是完整的。若你的裝置有分享面板,傳送至…會把該檔案直接交給它(AirDrop、Android 分享),而不是存到磁碟。

.lolly 就是一個普通的 zip。把它改名成 .zip 再打開:你自己的圖片在 assets/uploads/ 底下,目錄美術資源在 assets/catalog/ 底下,每一個都保有真實的名稱與副檔名,manifest.json 列出全部,最上層還有一份 README 說明這個檔案是什麼。

送出之前有三件事由你決定:

開啟檔案。.lolly 檔案拖放到應用程式上:素材會加入你的資料庫,工作階段會加入「專案」,工具也會隨之開啟該工作階段。你既有的任何內容都不會被覆寫:工作階段會以新的儲存欄位形式加入,而裝置上已存在的素材則會依照校驗碼比對並重複使用,而不是重複建立。匯入過程中,每個部分都會依照檔案自身的校驗碼進行檢查,因此傳輸過程中損毀的複本會被拒絕,而不會匯入到一半。

若檔案帶著你沒有的工具,Lolly 會在該工具能執行之前先問你:Trust this tool?(信任這個工具?)會指出它的名稱與作者,並明白說出開啟它就會在你的裝置上執行該工具自己的程式碼,Trust & install(信任並安裝)是通過的方式。拒絕的話,分享的作品仍會存進你的專案,等著你哪天把工具加進來。(有一種工具目前還不能側載,就是程式碼以模組形式提供的那種,它會以同樣的方式被擋下。)

連結與檔案交出去的都是一份快照。若要和別人同時處理同一個工作階段,兩台裝置、不需要伺服器,在同一個網路內也不需要網際網路,見一起工作

即時攝影機(隨動作反應的工具)

每個照片濾鏡(半色調、掃描線、色調分離、Voronoi 格、色彩處理、像素拉伸與瑕疵)在有攝影機可用時都會顯示一顆開始即時按鈕。開啟後,效果會逐格追蹤你的網路攝影機,因此會隨動作反應;你可以把結果錄成 GIF、WebM 或 MP4。影格的讀取與處理都在你的裝置上進行,絕不外流,而且你一停止或離開工具,攝影機就會被釋放。(任何圖片選擇器也都有拍照,可擷取單一影格成為裝置上的圖片。)

我的圖片

當工具允許你從裝置加入圖片時,它會原封不動地保留(因此上面的 Content Credential 仍然可以驗證),並存進你個人的我的圖片素材庫(位於個人資料 → 儲存空間)。只有真的很大的檔案才會問你要保留還是縮小。它可以在任何工具中重複使用。若要在圖片進來時清掉 EXIF/GPS,請在個人資料中開啟移除上傳檔案的中繼資料。沒有數量上限:這個素材庫完全在本機,只受裝置儲存空間限制,圖片也在那裡管理或刪除。

目錄:你的素材庫

目錄#/c,或每個列表檢視頂端 Projects · Tools · Utilities · Catalog 切換器中的 Catalog 區段)匯集了你的工具可以取用的一切:品牌標誌、圖片、音訊與動態,依種類分組,同時也是你自己的創作檔案存放的地方。沒有伺服器、沒有管理主控台、沒有 pull request:一切都在你的裝置上。

目錄:品牌素材、色票與字體,以及你自己上傳的檔案signed by Lollyvector SVG自己驗證Get the signed file456 paths~43k nodes707 groups1,022 KB目錄:品牌素材、色票與字體,以及你自己上傳的檔案signed by Lollyvector SVG自己驗證Get the signed file456 paths~43k nodes707 groups1,022 KB

把你的色盤與字體帶著走

目錄的色票面板不只是展示:點一個顏色即可複製,或以你其他軟體看得懂的格式下載整套品牌色盤

色票面板:頂端一排五顆色盤下載按鈕,接著是每個品牌顏色,都是可複製的色塊signed by Lollyvector SVG自己驗證Get the signed file196 paths~22k nodes282 groups302 KB色票面板:頂端一排五顆色盤下載按鈕,接著是每個品牌顏色,都是可複製的色塊signed by Lollyvector SVG自己驗證Get the signed file196 paths~22k nodes282 groups302 KB

字體面板列出你的品牌字型,每個旁邊都有一個下載,可以安裝到本機或交給印刷廠。(Brand Studio 的色彩區也提供同樣的色盤下載。)

素材只是開放、自己動手這條路的一半;另一半是做出你自己的工具:自由畫布(上面說的 Design)讓你用視覺方式做出一個,不需要寫程式。

聲音與無障礙

Lolly 希望每個人用起來都舒適。介面可以用鍵盤操作,自訂控制項為螢幕閱讀器帶有適當的標籤,而每個工具的即時預覽都以單一張有標籤的圖片呈現,說明它正在做什麼。

一層輕柔的輔助音效會確認你的操作:進入工具庫、Content Credentials 檢查通過與不通過、關閉面板、切換濾鏡。它預設關閉:在任何出現該開關的地方(各檢視的選項浮動視窗,或個人資料)打開聲音,這個選擇會被記住。

個人資料 → 無障礙底下有四項需自行開啟的舒適設定:減少動態效果(拿掉應用程式的轉場與花俏效果)、隱藏彩色預覽(工具庫卡片變成沉穩的圖示加文字,專案縮圖也更安靜)、高對比(更強的邊框、文字與焦點框),以及大字級(放大應用程式的字:標籤、選單、按鈕文字)。這四項都只讓工作周圍的應用程式安靜下來:它們絕不會伸進工具畫布,也不會改變你匯出成品的任何一個像素,而且在你開啟之前都是關的。完整說明見你的個人資料 → 無障礙

聲音開關旁邊是 Neurospicy Mode,一段選用的、令人平靜的背景專注音樂,會在你工作時輕輕播放。開啟後,底部角落會出現一個小小的播放器停靠列,隨你在應用程式中移動;你可以在上面搜尋並挑選曲目、往前往後跳、設定音量,以及縮到最小或關閉。曲目清單涵蓋幾個類別:程序生成的 Lolly Sings 曲子、環境循環與節奏、你自己上傳的音訊,以及少數幾個即時網路廣播電台(這些需要連線,其餘都能離線播放)。它預設關閉,而且和聲音一樣,會跨工作階段與裝置記住。關掉聲音也會讓專注音樂靜音。

儲存空間與隱私

一切都存在你瀏覽器的本機資料庫(IndexedDB)裡:你的個人資料、已儲存的工作階段、上傳的圖片,以及下載的目錄內容快取。個人資料 → 儲存空間會顯示用量,並讓你:

手機寬度螢幕上的儲存空間卡片:裝置上每一類資料都列出名稱,底部是「清除我的所有資料」按鈕signed by Lollyvector SVG自己驗證Get the signed file14 paths~2.0k nodes39 groups28 KB手機寬度螢幕上的儲存空間卡片:裝置上每一類資料都列出名稱,底部是「清除我的所有資料」按鈕signed by Lollyvector SVG自己驗證Get the signed file14 paths~2.0k nodes39 groups29 KB

這些本機資料不會傳送到任何地方:沒有遙測,也沒有雲端算圖。應用程式曾經抓取或送出的完整清單列於隱私權政策,而伺服器介面則盤點了選用的伺服器元件。

換到另一台裝置

因為一切都在你的裝置上,個人資料 → 儲存空間 → 移至其他裝置讓你把全部帶到第二個安裝,不需要帳號,也不需要雲端:

目錄快取不包含在內,它會在新裝置上自行重新下載。這個組合包是一個單純的 zip(manifest.json + profile.json + sessions.json + assets.json + assets/blobs/… + prefs.json,格式 id 為 lolly-backup),因此經過電子郵件、USB 或 AirDrop 都能完整無損,而且每個 shell 讀的都是同一種格式。每個部分都有檢查碼,所以傳輸中損壞的檔案會在匯入時被抓出來,而不是還原成半殘的狀態。(完整格式規格:資料轉移。)

匯入設計(Figma、Penpot、Illustrator、InDesign)

你可以把既有的設計帶進 Lolly 繼續做:開啟 Design,在畫布工具列點匯入設計,然後選擇 Figma 的 .fig 或 SVG、Penpot 的 .penpot、Illustrator 的 .ai / .pdf,或 InDesign 的 .idml。圖層會變成自由畫布上可編輯的方塊,文字仍可重新輸入,圖片落進我的圖片,字體與色彩則遵循品牌的全域設定,之後成果就和其他工作階段一樣可以儲存、分享與算圖。解析完全在你的裝置上進行。完整說明:匯入設計

匯出

完整說明見 匯出與格式:選擇格式、輸出尺寸與印刷單位、透明背景、影片,以及複製/分享。簡單說:挑一個格式,需要的話設定尺寸,然後下載(或複製到剪貼簿)。

批次(Pro)模式

給進階使用者的批次(從工具庫連過去,由預設開啟的 Pro 功能旗標控管)能一次算出許多變體:一張格線,每一列是一組輸入項,一起匯出。很適合把一張卡片在地化成十來種語言,或一次生成所有尺寸變體。填列的方式可以是直接輸入、從試算表貼上,或匯入 CSV(也可以匯出一份),並可逐列設定格式、尺寸與輸出檔名。整張格線可以存成具名的批次工作階段,之後從工具庫重新開啟,也能把每一列一起下載成單一個 .zip

批次工具列——ZIP 檔名、單位、DPI,以及每一列繼承的格式,右側則是「工作階段」與「算繪」signed by Lollyvector SVG自己驗證Get the signed file31 paths~1.9k nodes50 groups4 images34 KB批次工具列——ZIP 檔名、單位、DPI,以及每一列繼承的格式,右側則是「工作階段」與「算繪」signed by Lollyvector SVG自己驗證Get the signed file31 paths~1.9k nodes50 groups4 images34 KB

批次是用來一次生成同一個範本的許多變體。若要重新算圖你已經儲存的工作階段,請用專案 → 算圖資料夾/算繪選取範圍(見上文),不需要 Pro。

並排編輯(Multi-edit)

批次處理是同一份設計的多種變化版本。多重編輯則是另一半的工作:同時開啟數份不同的已儲存設計,讓一項變更套用到全部設計上。在專案中勾選兩到八份已儲存的工作階段,並從選取列中選擇一起編輯;它們就會以即時卡片的形式並排開啟於 #/multi?s=<slot>,<slot>…。每張卡片都是該工作階段的真實算繪結果,而不是儲存的縮圖,因此你看到的畫面就是最終匯出的結果。

一個側邊欄驅動全部:

點任何一張畫布(或在它上面按 Enter),該工作階段的側邊欄卡片就會展開並捲入視野。全部儲存會把每個工作階段寫回它自己的位置。全部下載會先儲存,再透過與專案的算繪選取範圍相同的流程算出整組:一個 zip,過程中也會提供選用的密碼鎖。

有兩項要老實說的限制。二到八的上限是真的:每張卡片都掛載自己的即時執行環境,這個數字才能維持順暢;要求更多(或要求已經不存在的工作階段)的連結會直接說明,而不是載入到一半。另外,連結指名的是儲存的位置,所以它只會在這台裝置上重新開啟那一組,它不是分享連結。

當選取範圍超過八個、混合了多個工具,或除了工作階段還包含圖片時,逃生門就是同一條選取列上的 Edit as sheet:它會把整個選取範圍當成批次格線中的列開啟(#/pro?s=…),沒有數量上限,也沒有同一工具的規定。資料夾兩者都不參與,它們有自己的在格線中開啟的路徑。(搜尋是目前唯一還沒伸進來的東西:Multi-edit 是搜尋列唯一不知道的檢視。)

離線與安裝

Lolly 是一個 PWA。第一次載入之後就能離線運作:從瀏覽器網址列安裝(行動裝置上是加到主畫面),可獲得類似原生應用程式的全螢幕體驗。回到線上時它會自行更新。

關於更新:如果畫面在更新後就是無法載入(出現空白面板,或角落顯示「failed to fetch」),請重新載入頁面一次——應用程式會順利套用新版本,而你的作品、工作階段與品牌都不會受到影響。所有內容都儲存在你的裝置上,而不是儲存在頁面中。