top of page

WIX STUDIO提供更棒的設計體驗!






WIX一直以來致力於為創作者、設計師和數位專業人士提供專業工具和資源,以幫助他們更輕鬆地創建、設計和管理網站、應用程式和數位項目。從以往至今陸續推出了WIX Editor、WIX ADI、EditorX,而近期更是進一步推出了WIX STUDIO,在現有的基礎上極大的強化了網站版面的設計功能,從動畫、CSS到整個網頁的排版都進行了優化,讓設計者更能設計出自己想要呈現的網站。




WIX STUDIO提供的特色


一、新增了數個物件可用的動畫模式


在既有的WIX編輯器中,能夠針對物件(多為文字、圖片)進行的動畫設計只有兩種,"浮動"和"點擊",而WIX STUDIO新增了三種,分別為"進入"、"捲動"和"循環"。以往設計者如果想要設計像是"捲動"和"循環"這樣的動畫效果,大多都需要利用開發者模式,甚至還需要研究一下VELO,才能知道如何使用正確的模式將編碼寫入,以達成需要的效果,而現在只要簡單幾步設定就能製作出相同的效果,便利許多。


以下也大致說明各種動畫效果:

​進入

​當指定的物件進入視野畫面時,便執行設定的動畫效果

浮動

​當滑鼠游標移動到指定的物件上時,便執行設定的動畫效果

點擊

​當指定的物件時,便執行設定的動畫效果

捲動

​指定的物件會根據頁面捲動進度,執行設定的動畫效果

循環

指定的物件會持續執行設定的動畫效果(如持續左右搖擺)


▲WIX STUDIO新增了進入、捲動、循環三種動畫模式



▲編輯器小圖示會演示動畫呈現的方式,幾個步驟便能輕鬆設計完成






二、物件的專屬CSS設計


在原本的WIX編輯器中,其實並不支援CSS,雖然可以透過開發者模式編寫代碼指定物件的樣式,但支援的內容有限。有時候也會乾脆建立一個html的iframe來把css和物件都寫在裡面,但相對在設計的彈性上也有其侷限性。這次的WIX STUDIO推出後,終於可以直接設定物件的class來編寫CSS了!



▲採用我們一般認知的CSS設計(圖片來源:WIX STUDIO)




三、AI最佳化物件排版


通常在設計網頁時,都會由電腦版開始,然後再編排平板/手機版的版面樣式。當電腦版排版完成時,切換到平板/手機版一看,有時候那個版面可以說是不忍直視,明明電腦版做得很漂亮,但切換成其他裝置大小的版面就會有很大的落差,這部分其實也都需要設計師重新再調校一次版面,才能讓訪客再使用各種設備都能瀏覽順暢。而WIX STUDIO也因應這部分提供了一樣功能─回應式AI,它可以讓設計者編輯完電腦版的某個區塊後,讓該區塊再其他裝置上看起來也不錯,可以節省大量重新排版的精力。



▲AI一鍵依照電腦版面生成手機版面(影片來源:WIX STUDIO)




WIX STUDIO推出的這些要素大大強化了網站版面的設計功能,而且透過引入更多AI元素,使得設計者可以更迅速地應對多裝置設計的挑戰。對於想看到更多視覺上特色的用戶,WIX STUDIO想必能進一步滿足這些需求;而對於那些追求創意、追求更高自由度的設計者來說,WIX STUDIO無疑為他們提供了一個更豐富且具有前瞻性的創作平台。




bottom of page