前端開發者的斜槓設計技能,打造動態icon,開發Loading Page

更新於 發佈於 閱讀時間約 3 分鐘

前言

前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者來處理簡單的設計,提升設計審美或與設計師溝通的能力。

前端開發者素材需求

而前端開發者也被要求擁有設計師的審美,表達方式是透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,對介面的美感或是素材UI元件都會有所要求,開發人員理想上是與設計師合作或購買素材會是更加效率的,但事實上有許多素材跟規畫都是開發者有機會實現的,也可以在製作簡單設計素材的過程讓前端與設計師溝通更加順利,這是一定的加分技能。


因此本篇會與讀者分享從設計素材準備到React網頁前端的開發流程。


前端工程師斜槓設計師你可能需要:

  • 對美有堅持
  • 擁有一些設計思維和能力
  • 能獨立掌握前端方面的知識

⊗ 一份健康檢查

設計環節

Figma 官網

首先先設計出一個自己需要的素材,並將整個素材群組成一個Componet,Figma提供常見的輸出檔案格設(SVG、JPG、PNG…),程式碼轉換格式(CSS、React…),及外掛工具(Widgets)。

raw-image



Jitter video 官網

在Figma中使用插件找到Jitter來完成動畫,Jitter也是獨立的工具,只是Figma提供工具整合更方便的將素材匯入,這裡將剛剛的組件(Componets)匯入至Jitter 。

raw-image



在Jitter就可以開始來製作動畫,Jitter需要用到一些動畫觀念,如:

  1. 時間軸
  2. XY軸的開始位置、結束位置
  3. 過渡特效
  4. 動畫速率貝茲曲線

Jitter提供很多好用的過渡特效,我自己在使用上覺得Jitter提供的功能非常容易上手,可以完成大部分的icon需求,至於更多細節或是酷炫的設計,還是交給專業的設計師吧!

raw-image


最後在Jitter輸出做好的動畫,Jitter提供(GIF、MP4、WebM、MOV)格式,選擇自己熟悉處理的格式,這裡我選擇MOV格式來作處理,最後再用設計軟體來轉檔輸出一張GIF。

React 開發環節

這邊使用React框架來開發,首先需要一個React compenent,底下示範提供一個範本,由LoadingPage.tsx來執行載入的畫面,這裡也提供一個空白置中於最上層的css屬性給大家參考。

LoadingPage.tsx

<div className="loadingPage">
<img style={{ width: "250px"}} src="/yourpath.gif" alt="GIF Example"></img>
</div>

LoadingPage.css

.loadingPage {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
background-color: rgb(255, 255, 255);
z-index: 5000;
display: flex;
justify-content: center;
align-items: center;
}

透過控制useState來決定何時要開啟,一般配合await的等待過程來設置true & false。

home.tsx

function Home() {
const [isLoading, set_isLoading] = useState(true);

return (<>

{isLoading ? <LoadingPage /> : <></>}

</>);
}

載入等待畫面成果

raw-image



36號矩陣 是一個理念象徵,一個專注在資訊科技與人文的地方 「在現代科學的浪潮中,我們的理性根植於人文學科的土壤」
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
每年一次的 State of JS 問卷調查,不只是觀察前端技術趨勢的工具,更是檢視自身技能與學習方向的絕佳機會。透過這份調查,你可以了解前端生態的變化,確保自己沒有錯過重要資訊,並規劃未來的學習路線。
Thumbnail
完成後端基本功能並通過驗收後,我們開始使用 Nuxt 架設個人財務管理系統的前端。Nuxt 基於 Vue,學習曲線平緩且配置簡單,適合不同程度的開發者。透過 Docker,我們快速建立了 Nuxt 開發環境,並搭建首頁和交易紀錄頁面,整合 Tailwind CSS 提供美觀的 UI。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
在軟體開發領域中,Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我,到底是 Backend 比較難還是 Frontend 比較容易?
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
每年一次的 State of JS 問卷調查,不只是觀察前端技術趨勢的工具,更是檢視自身技能與學習方向的絕佳機會。透過這份調查,你可以了解前端生態的變化,確保自己沒有錯過重要資訊,並規劃未來的學習路線。
Thumbnail
完成後端基本功能並通過驗收後,我們開始使用 Nuxt 架設個人財務管理系統的前端。Nuxt 基於 Vue,學習曲線平緩且配置簡單,適合不同程度的開發者。透過 Docker,我們快速建立了 Nuxt 開發環境,並搭建首頁和交易紀錄頁面,整合 Tailwind CSS 提供美觀的 UI。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
Thumbnail
在軟體開發領域中,Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我,到底是 Backend 比較難還是 Frontend 比較容易?
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,