U00 hyui CodePen 及網站完整動態流程整理

# U00 hyui CodePen 及網站完整動態流程整理 ###### tags: `切切切` ## A.載入動畫* >網站從首頁進入前的循環(Cycle)動態。目的是利用循環小動態視覺上讓網站加載時看起來不這麼久 常見做法 視覺面：使用品牌Logo或能夠貫穿全站的視覺元素作為圖像。動態面：持續循環、百分比倒數、任何有開始&結束的視覺動態。 建議 循環動態持續期間：約1秒~1.5秒/循環1次。 提醒 百分比動態使用時機：判斷網站大小，加載1秒~3秒 → 不需要放 , 超過3秒以上 → 需要放。 #### 範例 * U00_CodePen 載入動畫 [link](https://codepen.io/collection/XqGJad) * https://www.ecosyn-textile.com/ * https://www.taiwanfolkdance.com/ * https://www.i7-11.com/project --- ## B.轉場動態 >與「首頁載入動態」意義相仿，但不是從首頁進入的頁面，都需要加上「轉場動態」。舉個例子，如果當使用者每個頁面進入時都要跑百分比或複雜的載入動態時，會讓人更容易失去耐心或是眼花撩亂，甚至離開網站。所以此動態應該越快速、越簡單越好。 常見做法 視覺面：單純造型、品牌Logo或能夠貫穿全站的視覺元素作為圖像。動態面：持續循環、慢速閃爍。 建議 要做不做都可以，越簡單越好！快速作法：大畫面色塊由左而右刷過去也可以。 #### 範例 * U00_CodePen 轉場動態 [link](https://codepen.io/collection/DwROPM?grid_type=grid) --- ## C.進場動態** >載入動態結束後，全畫面的物件即將要出現時所採用的任何形式，皆為進場動態。 常見做法 動態面：淡入、位移、放大縮小、色塊遮擋 建議 * 依據畫面元素「資訊輕重」、「圖片吸引力」、「版面配置」做順序進場。 * 建議全站都可以加入進場動態，但須制定全站頁面共用的腳本&形式，否則太多種腳本或形式反而會容易導致視覺疲乏。 * 進場時間：控制在約2秒內。 * 快速作法：在網站CSS程式中的最外層加入透明度(opacity) 0~1淡入或全畫面物件依序左右進入。 #### 範例 * U00_CodePen 進場動態 [link](https://codepen.io/collection/XpEkbo) --- ## D.代表動態* >網站中最核心必要的設定，必須讓人印象最深刻的主要動態。此動態的吸睛度、視覺複雜度、獨特性在全站當中數一數二。這類的動態，往往會讓使用者逛完網站離開後還是印象深刻，還會突然在某一天回想起來，我們統稱為代表動態。 常見做法 通常放在首頁第一塊視覺面的位置。根據該品牌、形象，去想這個網站我要玩什麼動態。你心中還沒玩過但想玩的動態去做發想。 建議 基本上，全站通常只要有1個代表動態就夠囉！（但還是可以依據網站目的性，會有兩個動態的可能。） #### 範例 --- ## E.持續動態 >為吸引使用者目光或增加畫面動感豐富度而持續Loop的動態 建議 比例不超過該畫面10% 注意 須慎選持續動態的程式作法，因為這也是最容易造成網站速度變慢主因！盡量避免全畫面都在動，除了會影響效能也可能造成視覺疲乏。 #### 範例 * U00_CodePen 持續動態 [link](https://codepen.io/collection/AKjOWd) * 跑馬燈設計 https://friendlyhealthclub.jp/ * https://blotter.js.org/#/materials --- ## F.回饋動態** >當滑鼠游標移過(move) 這個物件需傳達給使用者是可點擊或是有意義的。最常見的就是滑鼠移至按鈕上，按鈕呈現的視覺變化，就是回饋動態！ 常見做法 視覺面：變色、透明度改變、文字替換。動態面：微幅位移、放大縮小、附加物(出現另一個物件)...等。 建議 快速作法：一點點位移(10px)、透明度(opacity)調整。 #### 範例 * U00_CodePen 回饋動畫 [link](https://codepen.io/collection/DVypzp) --- ## G.滾動動態** >根據設計腳本依序呈現，通常使用於「資訊過多」、「需提示性」、「需表達資訊輕重」的畫面。也有許多時候用在用故事型敘述資訊的網站中 建議 動態觸發點：建議於畫面由上往下約80%高度之處觸發，較可符合多種瀏覽器高度。快速作法：物件淡入、物件位移。 #### 範例 * U00_CodePen 滾動動態 [link](https://codepen.io/collection/AGVaLj) * Animate On Scroll Library https://michalsnik.github.io/aos/ --- ## H.游標動態* >跟上述的回饋動態(Hover)，但回饋動態(Hover)的反應是觸發在物件上，游標動態是觸發在鼠標上。這類動態是這幾年趨勢，除了具提示作用，更有延伸資訊功能。 建議 可根據該物件「特性」做相對應提示。這效果容易造成遮擋或是Z-index層級問題，須多考慮「作動範圍」、「變化效果大小」。 限制 僅限有滑鼠的裝置看得到。 #### 範例 --- ## I.點擊動態 >滑鼠點擊(Click or Hold)之後，被點擊物所產生的反饋效果，可能是音效、位移、大小...之類。這動態比較少看到，算是增加互動或特殊記憶的作法。 #### 範例 --- ## J.設備動態 >設備動態目前不是主流，但可作為新媒體開發的媒介或是網站的彩蛋使用。 * 鍵盤：可根據該物件「特性」做相對應提示。 * 陀螺儀（手機）：行動裝置專屬，視差、顯示隱藏物件。 * 鏡頭(特殊)：偵測深度、晃動。 * 麥克風(特殊)：錄音、音量大小聲。 * 手機(特殊)：AR、VR、多畫面控制。 #### 範例 --- ## F.離場動態 >離場動態與進場動態其實就是意義類似，但一個是開始一個是結束的動態效果，會出現在當你點擊按鈕準備換頁前的全畫面動態。此動態可以營造畫面不跳頁閃爍的連貫性，以達成使用者優良的視覺體驗並提升許多質感。＊無換頁=指的是網站在頁面切換時不會有閃爍跳轉的呈現 常見做法 可以進場動態相反方式離場，或是蓋板方式。時間：1秒。 建議 切記！離場動態一定要短暫，如果有載入動態，又有進場動態，現在再加入離場，整體體驗會非常不好。 #### 範例 --- ## 雅瓊的範例 #### 範例 * U00_CodePen 雅瓊的範例 [link](https://codepen.io/collection/XPELOw) --- ## Scrollbars #### 範例 * U00_CodePen ScrollBar 外觀設定 [link](https://codepen.io/collection/XgJBwg) * https://kingsora.github.io/OverlayScrollbars/#!overview --- ## button #### 範例 * U00_CodePen button [link](https://codepen.io/collection/ngomEo) --- ## 常用的js #### 範例 * U00_CodePen 常用的js [link](https://codepen.io/collection/nVJokZ) --- ## background圖片效果設定 #### 範例 * U00_CodePen background圖片效果設定 [link](https://codepen.io/collection/nJVzKP) --- ## Accordion / 收合式選單 #### 範例 * U00_CodePen Accordion / 收合式選單 [link](https://codepen.io/collection/DOqwNY) --- ## 日曆 #### 範例 * U00_CodePen 日曆 [link](https://codepen.io/collection/Xdaeez) --- ## CSS文字設定 #### 範例 * U00_CodePen CSS文字設定 [link](https://codepen.io/collection/XKbjWm) --- ## 圖片Animation 效果 #### 範例 * U00_CodePen 圖片Animation 效果 [link](https://codepen.io/collection/AKbZQE) --- ## 選單範例 #### 範例 * U00_CodePen 選單範例 [link](https://codepen.io/collection/nroRYv) --- ## hyui模組 #### 範例 * U00_CodePen hyui模組 [link](https://codepen.io/collection/nmpWqB) --- ## hyui kit #### 範例 * U00_CodePen hyui kit [link](https://codepen.io/collection/AeqJwm)