Flaticon 可商用之 icon 網站

Flaticon 可商用之 icon 網站

既強大,也可免費商業使用的 icon 素材網站!

Flaticon 集結眾多 icon,具備不同風格、系列,甚至能直接使用 Flaticon 提供的網頁工具編輯 icon!這麼佛心又方便~

本文將介紹 Flaticon 的特色、Flaticon 授權方式,以及我自己如何使用它。


大綱
1. 前言
2. 數量眾多的 icon 可免費商用
3. 與創作者合作
4. icon 包
5. icon 的多元風格
6. 挑選多個 icon,再一次下載
7. 具備多種檔案格式
8. 編輯工具
9. 靈感來源
10. Flaticon 授權方式

前言

關於 Flaticon 的介紹,以及該公司(Freepik Company)所創立的其他系列(FreepikSlidesgo)有興趣的人可自行爬文囉。

本文無業配,僅分享~

現今在網路上已有各種資源,而 Flaticon 具備哪些吸引我的特色呢?


數量眾多的 icon 可免費商用

Flaticon 會持續新增 icon,你甚至可在 Flaticon 中見到近期活躍的 icon,知道目前的趨勢。

Icons made by Smashicons from Flaticon

與創作者合作

在 Flaticon 中有不少創作者設計的 icon,不論是官方還是創作者所設計的 icon,在品質上具有一定的水準。

Flaticon

icon 包

這是我最喜歡的部分,預設會以「ICONS」為單位,若我們將搜尋方式,改為「PACK」,可搜尋以同個風格或系列為一組(包)的 icon。

Flaticon

若不是以「PACK」進行搜尋,也可以在搜尋 icon 時,若 icon 有屬於某 icon 包,則會在更多 icon 顯示相關資訊。


icon 的多元風格

當我搜尋 icon,點擊該 icon 顯示更多資料時,若 icon 同時有多種風格,可在下方見到。

Flaticon

以此 icon 為例,就具備五種風格!

Icons made by Smashicons from Flaticon

挑選多個 icon,再一次下載

可將想要的 icon 加入收集,確定後再一起下載,非常方便~

Flaticon

具備多種檔案格式

PNG、SVG、EPS、PSD、</>BASE 64;可滿足不同的使用需求。

Flaticon

編輯工具

Flaticon 具備網頁編輯工具,可改變 icon 的顏色。

Flaticon

靈感來源

我較常將 Flaticon 當作蒐集 icon 設計的靈感。不論是觀察 icon 如何表現、象徵圖示、風格形式等等,都能作為參考或靈感啟發。

反而較少直接下載、使用 icon~


Flaticon 授權方式

  • 免費 icon,只要註明素材授權來源,大部分皆支援免費商用。
  • 付費帳號,使用 icon:則不需註明。

以我自己的習慣,為了避免遺漏或爭議,我還是會自行設計 icon,盡量少使用素材網站所提供的現成 icon。

想了解更多關於授權的概念,可參考「創用CC是什麼?(舊版網站)」、「CC 台灣社群(新版網站)

以上,祝使用愉快。

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Writing
提升文章質量與收益的心態
Life
近期的健康狀態
Aesthetics
淺談色彩原理
Aesthetics
設計法則:圖地反轉及負空間
Writing
✍ Medium Feature pages 與 Tag 搭配
Aesthetics
設計資源與參考統整(二)
Freelancer
設計自由接案作品集
Life
書評《秒睡》

Share

過得好的秘訣

Photo Credit : ikidhimase on Unsplash

過得好的秘訣

過得好的秘訣不是對所有事物心懷感激,而是為自己好,這一切才開始有了意義。

當我不存在時,我的世界也不存在。

1

要求合群

小學時,老師發現我將習作的後半段寫完,她生氣地問:「為什麼先寫沒教到的課?」

「妳不能先把作業寫完,要等全班一起。」老師當著全班,對我嚴肅地說。

其實老師不希望在大家寫習作時,我是沒事做的;她也厭惡,學生不照著她的方法解題目。自此之後,她偶爾會用她的方式特別「教育」我。

並不是暴力相向,例如嫌棄我寒酸、誣賴我之類的;還好我從不相信她所說的話,以及扭曲的教誨。

我很喜歡且尊敬每一位教導我的老師,但她例外。

不認同她有資格被稱老師,這是我討厭她的方式。

高中時,另一位老師說:

「大家在做專題的時候,我不允許班上有人偷唸統測的考題。」

但我還是在上課做專題時,偷偷準備統測;為何做完專題的學生,不能做其他事情呢?為何該被要求的,不是那些做專題偷懶的學生?

有時候盲從使群體退化。


2

「妳真不會做人。」

不知有多少人遇過,ㄧ些「沒貢獻」的同學,找你一起做分組作業,卻總是把事情都推給你,仗著你不敢隨便,濫用你的責任感呢?

或者你正參與著見不得人的事,但周圍的人告訴你,其實在別的地方也是這麼進行的,睜一隻眼閉一隻眼,不要雞婆。

我曾收集眾多的證據,列出每位組員名義上與實際上執行的部分,證明我的組員們都在偷懶,讓所有人對質,最終老師將他們的分數評得極低。

也曾在跨系合作的時候,偷偷錄音,將別系浮報公款拿差額的醜聞揭發,讓該系的學生受到懲罰,剔除享有的福利。

並不覺得那些以和為貴的人如何,而是在這些環境能與大家共榮,是需要點什麼的,我只是捨棄那些,並做好承擔所有風險的心理準備。

只是幸運地能向那些不公不義反抗,痛恨這些社會的毒瘤。

「妳真不會做人。」是我收到的許多回饋之一。


3

過得好的秘訣

過得好的秘訣不是對所有事物心懷感激。

而是為自己好,這一切才開始有了意義。

將所有的好,構築在自己身上吧。

正當我意識到,其實被說自私也不會怎樣,因為對方並不是我,他只是以他見到的角度來肆意評斷。又或許他正羨慕著我,能如此「自私」。

當你為他人好,說著「我為你付出這麼多」那是對他人的情緒勒索。

何不換成「我為自己付出這麼多,我真幸福」以此肯定自己。

當我不存在時,我的世界也不存在。

晚安。


文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Aesthetics
學習素描需要知道的N件事
Aesthetics
從臨摹開始學習繪畫創作
Aesthetics
Flaticon 可商用之 icon 網站
Aesthetics
SQ|使用純 CSS 在 Squarespace 做出偽雙語系導覽列
Life
認知行為療程回測分享
Aesthetics
繪製插圖的感想
Life
DIY 貓貓尿布褲
Life
書評《點子都是偷來的:10個沒人告訴過你的創意撇步》

Share

改變思維,建立自我專業與自信

Photo Credit: Tom Podmore on Unsplash

改變思維,建立自我專業與自信

從「知道自己能做好什麼」開始建立你的自信。

近期有幾位朋友詢問「設計師的自信如何建立」的課題,以旁觀者的角度來說,我覺得「沒有自信」是對現在的選擇、成就,充滿迷惘的表現之一,當然這其中有許多原因。

這篇文章,原本歸類在自由接案的〈自由接案系列,快完成文章時,認為不只適用於設計領域,於是歸類在〈餘生漫漫〉系列。


大綱
1. 沒有自信的經驗
2. 自身的經驗
3. 總是懷疑自己?
4. 互相比較的結果…
5. 更多更多的因素
6. 關於「取捨」
7. 改變思維
8. 封面故事

沒有自信的經驗

「在平面設計公司上班,待了一年。非本科系的我,平時會看看其他設計師的作品,假日針對專業能力進修。不論是給主管或是讓同事看看提案,都會在內心掙扎一陣子才敢交出去…。」

「我是視傳系的學生,好不容易做完一個滿意的作品,當教授將我的作品與其他同學比較時,我突然失去自信,覺得自己的作品好醜…。」

「常常在作為公司一員,和自己接案之間迷惘,想提升自身能力,可能也缺乏自己能夠掌握案件動態的權利和機會,但我也在專業項目和工作內容之前猶豫,像是原本學什麼,之後卻沒有繼續應用的機會,漸漸遠離原本會的東西…。」


自身的經驗

身旁的朋友,覺得我做設計是充滿自信的,有時是語氣、作品本身、學習態度、勇於展現作品的自信。

或許不少人認為,我本身的職業就是設計師,設計師本來就該對自己的設計充滿自信,話雖如此,仍有不少人身處在這行業,卻懷疑自己,對自己沒有自信。

這樣的我,並不是從一開始就充滿自信的。

國中的我並不快樂,人際關係大搞砸,也沒有任何專長和興趣,對我來說,進入高中,沒有特別的意義;唯一的感受,是終於要脫離痛苦的國中,到一個沒有人認識我的新環境(高中)。

而我選擇去那所高中的原因,跟不少踏入設計的人一樣,以為只要會畫畫就適合往這方向發展。

你知道有許多人,沒有自己的方向,而選擇設計嗎?設計的門檻低,卻難以生存。

我也因為能力不足,比不上其他人而感到沒自信。

完全沒有基礎的人,如何與額外有在畫室上課、補習班的同學相比?

但這份感覺並沒有持續太久,我選擇比周遭的人更努力,犧牲自己的娛樂,和其他看似微不足道,但很重要的感受。

我如何成為自由接案工作者?(一)

如何知道自己的能力開始能「比得上」其他人,什麼時候開始有了自信?

對我而言,是從每一次的小進步開始建立,掌握住簡單的小技巧,就能感到開心;得到老師說「比上次更好了」這麼一句話,也讓我內心受到鼓舞。

從滿足自己,對自己肯定開始。


總是懷疑自己?

是否認為自己已經很努力,卻沒有看見成長、覺得其他人的條件都比自己好、上天不公平…。

介紹一位完美的小提琴家- LING LING

LING LING 是 TwoSet Violin 雙琴俠 在 2017 年虛構的完美小提琴家,這個人物具有無可挑剔的技巧,而且可做到常人無法完成的事情,例如:每天練琴 40 小時。

一天只有 24 小時,「每天練琴 40 小時」根本是天方夜譚!雖然荒誕,但在荒誕的背後,暗示著一般人需要多少,甚至是無法想像、不可能的努力,才能達到天才的程度?

對於天才,好像只要花費一點點努力,就能達到我們無法觸及的成就。

也許天才,比我們更努力練習。
LING LING Violin Competition/有中文字幕

 LING LING Violin Competition 短片,他們募集不少音樂神童,也就是那些「LING LING」,他們觀看音樂神童的反應,就像是我們觀看其他「神人」的反應一樣。

Have you practiced today?

「你今天有練習嗎?」這句話,也成為 TwoSet Violin 的名言之一。

你認為那些身旁值得欽佩的人,他的成就是與身俱來,還是後天培養與勤奮努力呢?

TwoSet Violin 雙琴俠 是我很喜歡的 YouTuber,他們的影片大多有繁體字幕哦。

互相比較的結果…

在這競爭的社會中,比較必然存在。

就連我們在買東西,見到相同商品,也會傾向選擇有促銷或便宜的(有時只差個幾塊錢而已)。不論是去比較任何事物的好壞,或是拿自己跟他人比較,要我們不做比較,那是不可能的,我們不是聖人,無法心如止水。

沒有佛系,只有放棄。

俗話說,沒有比較就沒有傷害。

不過設計的價值,能輕易量化嗎?努力,也能輕易被量化嗎?那些看不見的種種,也能被量化嗎?

你知道這些事物無法被量化(尤其設計是如此主觀)卻能輕易地批判誰誰誰做得設計很醜、政府部門的設計難看…

在否定之前,是否明白,是什麼樣的因素,讓你覺得不合時宜?是畫面還是理念?當我們批評時,不單單只做批評而已。

對於比較,若只以優越程度來判定所有人事物的好壞,造就出來的環境,必定是狹隘的。

當你認為自己的設計「很糟」,可以思考是畫面還是理念的問題?

這些負面回應,並不是要使你難過的,而是讓你學著不再犯相同的問題,甚至是征服他,讓他成為自己的優點。

比起沒自信,更可怕的是自卑感

不讓沒自信變成強烈的自卑感,而是將它轉換成你的動力之一。

我們在歷經新事物時,必定會感到不熟悉、迷惘,這些感受,讓我們對眼前的事物無法掌控,認為自己沒把握做好某件事情時,就會產生沒自信的想法。

長期處在沒自信的狀態下,開始認為自己的能力不過如此,最終,這些沒自信演變成自卑感,造成惡性循環。

人們把許多事物的成果,歸咎於自己的能力

凡事以結果論而定,忽略過程與態度。

「由於能力不足,所以做不出好的成果,身旁的人也不認同你的努力,導致你缺乏自信…。」

沒自信也會影響他人對你的感受,如果連自己都不相信自己,那麼如何讓對方相信你呢?


更多更多的因素

關於信心的建立,無法一言以蔽之,也許文章前說得太簡單,更多時候,我們有著無法抵抗的因素,例如:家庭、教育、環境、公司、社會所造成的影響。從他人或是社會價值的認可(例如名校畢業、在國外留學、得過知名獎項、受人稱讚)才願意肯定自己。

拋棄那些既有想法,先從建立對自己的自信開始,勇於展現自己的同時,避免將自信建立在他人對你的評價。當你知道「自己能做好什麼」的時候,就足以成為你的自信來源。


關於「取捨」

舉兩個簡單的例子。

是否有這樣想過:

「我想存錢,可是我不願意放棄自己的舒適生活。」

我還是能存錢,只是速度非常慢;如果我稍微節儉一點、忍耐一點,我就能存更多錢。

套用在其他事物:

「我想進步,可是我不願意放棄自己的休閒娛樂。」

我還是能進步,只是速度非常慢;如果少點娛樂、多點練習時間,我就能進步得更多。

無法十全十美,兼顧所有事情

任何事物都有其一體兩面,若我們光看爽的那一面,就忽略坎的那一面。

以上的例子,想表達「魚與熊掌不可兼得」如果你全都要,那你如何有更多的心力去做好每件事情?

亦或是成為 LING LING,每天練琴 40 小時,成為完美的人?

應該思考的是,我們如何在有限的資源下,分配對自己或是未來更好的規劃?並保有相應的彈性。


改變思維


封面故事

〈可愛守則〉說你不用做任何事情,只要相信自己,你就是最可愛的

Design by Jhane Chou
文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Aesthetics
學習素描需要知道的N件事
Life
多管閒事的長輩們,期盼你快點結婚
Freelancer
接案設計師的工作流程
Freelancer
設計領域的自我精進與學習態度
Aesthetics
醫學符號-蛇與權杖
Freelancer
工作室網站的第五次大改版?!
Writing
✍ Medium Feature pages 與 Tag 搭配
Aesthetics
設計基礎:色彩感覺

Share

自由接案者的請款方式-勞務報酬

自由接案者的請款方式-勞務報酬

2021 更新版|分享使用勞務報酬單的經驗、簡易算法、表格呈現。

適合無法開立發票的自由工作者,以及勞務報酬的簡易公式、表格。文章前段是基本算法,後段才是簡易公式與表格呈現。


大綱
1. 前言
2. 報價金額 ≠ 實拿金額
3. 計算方式
4. 關於「拆單」
5. 表格呈現
6. 最後的碎碎唸

前言

沒有成立公司行號的個人,公司會讓你填寫「勞務報酬單」或由你提供勞務報酬單,讓公司去報稅。了解勞務報酬單以及計算的方式,才能得出正確的報價。僅提供初步的資訊,更詳細的資訊,請查詢相關資料。


報價金額 ≠ 實拿金額

個人對個人的匯款、或是個人對個人的現金交易,則沒有這個問題。

Design by Jhane Chou

計算方式

支付金額 – 代扣所得稅 10% – 健保補充保費(二代健保)2.11 % = 支領淨額

支付金額

通常是報價書上的專案總金額,有些人會在金額上標明「未稅」、「不含稅」等等,公司收到之後,需要請會計計算「支付金額」應該寫多少。

大部分的公司,會請你重寫一份報價書,並將「稅」納入專案總金額。

所得類別

執行業務報酬 9A,10%(起扣點 20,001 元)

設計多使用執行業務報酬 9A,而依據不同行業與性質,有其適合的類別。

所得稅 10%

可於次年度報稅時,視當年的狀況申請退稅。

例如:支付金額 35,000 元,因高於兩萬元,須扣繳 10 % 所得稅、2.11 % 二代健保補充保費,計算方式:

二代健保補充保費 2.11 %

接著,還得扣繳 2.11 % 二代健保補充保費(因高於兩萬元)計算方式:

支領淨額

最後我們得出支領淨額,也就是實拿的金額!

Design by Jhane Chou

關於「拆單」

不少人會為了減少扣稅,選擇「拆單」的做法,即每次勞務報酬的單次給付控制在 20,000 元以內。

拆與不拆,我都有遇過,有的客戶能協助拆單,有的客戶則是其他原因而不拆。目前的款項越來越少拆單,就給他扣…。

表格呈現

分享自製的勞務報酬單表格圖,不提供原檔是希望你自行找尋範本修改,或是自製勞務報酬單。

領款人資訊、勞務內容、領取金額、身分證正反面影本、領款人匯款資訊

Design by Jhane Chou

小補充

勞務報酬單中的身分證影本、銀行/郵局封面,可壓上「提供某公司申請勞務用」的浮水印。

Design by Jhane Chou

最後的碎碎唸

好啦~以上分享關於勞務報酬的經驗,在報價時能多注意自己的相關權益!如內容有誤,多多包涵~~

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Aesthetics
適合素描初學者的線條&排線練習
Writing
✍ Medium Format Text 內文格式
Life
書評《龜兔賽跑-在1250°C遇見最棒的自己》
Aesthetics
設計適合的介面插圖
Life
改變思維,建立自我專業與自信
Freelancer
我如何成為自由接案工作者?(一)
Aesthetics
PS|設計光影灑落 Mockup
Life
領養臭美的紀錄

Share

我為何退訂 Civic Liker 讚賞公民,以及淡出 Matters?

Photo Credit : Sven Brandsma on Unsplash

我為何退訂 Civic Liker 讚賞公民,以及淡出 Matters?

我傾向從文章裡得到知識、體會、觀點、經驗;同樣的,我也會希望自己的文章能帶給他人什麼。

從今年 2020 年 1 月使用 Matters 與成為 Civic Liker 讚賞公民,在 5 月底,退訂 Civic Liker 讚賞公民。


聲明

以下言論不代表任何立場,僅分享我的狀況與想法。本篇文章以文字組成,沒有配圖。

使用 Matters 與成為 Civic Liker 讚賞公民的起因:

補充


加入 Matters 與成為 Civic Liker 的原因

雖然前段兩篇文中有提到,還是統整這些促使我將重心轉移至 Matters 與成為 Civic Liker 的原因:

Medium 平台

  1. 收益計算改變(很重要,待會會提)
  2. 舊版的文章留言系統巨難用

Matters 平台

  1. 想體驗使用者幾乎為華人,互動熱絡的感受
  2. 本身綁定 LikeCoin,使用上還算方便
  3. 介面有待改善,期待能見到不斷優化與更新(不斷優化的感覺很好)

LikeCoin

  1. 想多點收益,以及支持其他創作者(Civic Liker 的讚賞能讓創作者拿到更高的收益)所以付費成為 Civic Liker

當時覺得 Medium 平台互動低,加上文章收益改變,導致不少使用者放棄使用,本身也受到影響;剛好 Matters 平台興起,收益明顯比 Medium 高,平台內的互動也熱絡,於是我將重心大部分轉移至 Matters,並透過付費,成為讚賞公民。


使用 Matters 與成為 Civic Liker 的過程

Matters 平台互動確實比 Medium 平台高許多,也因為性質偏向社群的感覺,所以前期知道具備怎樣的條件,能增加成為熱門文章的機率。

我覺得熱門文章無法代表文章的好壞(也沒人能決定好與壞)熱門文章能讓大家知道,現在多數人關注的是什麼?

在一開始得到的收益,Matters 比 Medium 高許多,不過前提是得跟上平台內的趨勢保持產文的篇數

好的時候比當期的 Medium 高出兩三倍,但沒有超過 Medium 收益未改版時的金額。

稍稍能感受到部分創作者是「為寫而寫」而非真正想寫文或分享,也是人人都是創作者的時代。

而我們也無法評斷好壞,全是個人喜好。

老實說,在 Matters 裡,個人不喜歡的文章佔多數,這也導致我對文章的拍手數不高(這有些本末倒置)本來加入 Matters 是想多鼓勵其他創作者,反而比在 Medium 拍手數低。

許多人會說,不喜歡就不要看,我就真的不看了。

寫文章是額外的小興趣,也很鼓勵創作者多創作、發文章,不過本身對這文章有些要求。

當然也有它好的一面,對於創作的門檻降低了,有更多人與你互動。

就是社群!

雖然上述講了許多不喜歡的原因,卻沒有引起我想離開的念頭。因為那時的我還很認真的寫文、發文呢。

那段時間是我接案空窗期,在4月後,有了案子讓我忙碌起來,開始會仔細評斷這些因素。

後期的感受

能寫文的時間有限

因為忙碌起來,導致寫文章的時間不多,加上我的文章都需要不少的前置作業、設計圖、製圖、脈絡化等等,於是文章產出越來越低。

Matters 平台

時間變少,容許度降低,我變得更在意 Matters 能帶給我多少我會喜歡的文章,雖然官方很認真地舉辦活動,促進大家創作,卻更容易有「為寫而寫」的成分。另一方面,題材也不夠多元,這算是情有可原,能理解。

其實不管怎樣的策略,都會有人喜歡、不喜歡,而我剛好只是少數的不喜歡罷了。

介面體驗雖是其次,但我還是很在意;當然,內容幾乎決定一切。

我可能不適合社群吧(?

Matters 與 LikeCoin

雖然使用 Matters 短期內發文、保持產能可以超越 Medium,但 Medium 的新版本收益計算,的其中一個要素是「閱讀時間」。

Medium 使用者閱讀該文章一定的時間,也能再增加收益;然而 LikeCoin 計算收益,卻是同個人拍手次數滿後,就沒有下一次收益(除非斗內支持)。

我不喜歡過度討拍手的感覺。

以前對 Medium 取消拍手計算收益,改成閱讀時間計算很反感,但現在能體會新版本的優點。對於使用者(付費會員)而言,他只需要做好自己的事情(閱讀文章)不需要去拍手或是做其他事情,創作者就能得到收益。

所以 LikeCoin 是否要為了拿到更多收益、給予創作者更好的收益分配,成為付費使用者?對我來說已經不這麼重要了。

現在的 LikeCoin 僅作為 Medium 文章的附加,來彌補 Medium 免費會員無法讓創作者增加收益的辦法。


只是退出而已

因為不適合我,才決定退出 Civic Liker 讚賞公民,以及淡出 Matters;這並不代表他們不好,依然喜歡他們的初衷,也有不少的創作者活躍在該平台中。

每當一陣子回來 Medium 依然覺得親切,也許是在這裡較舒適。

介面、領域、專業、多元、全球…。

我知道與多數人對文章的認知不一樣,我傾向從文章裡得到知識、體會、觀點、經驗;同樣的,我也會希望自己的文章能帶給他人什麼。

若單純享受閱讀文章的感覺,那我會重視的可能是題材、文筆那一類的。

暫時不再繼續寫關於 Matters、LikeCoin 的文章,會回歸到 Medium 平台本身,以及寫文的想法。


文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.Medium
Life
書評《少年與狗》
Life
感覺,有些話一定得說出來
Freelancer
設計師自學路徑
Freelancer
使用圖表分散焦慮感的負面循環
Aesthetics
給初學者的學習建議/私人家教介紹
Aesthetics
畫面中的視覺動線設計
Life
違背世俗的常規,需要點勇氣
Writing
提升文章質量與收益的心態

Share

SQ|使用純 CSS 在 Squarespace 做出偽雙語系導覽列

SQ|使用純 CSS 在 Squarespace 做出偽雙語系導覽列

不升級方案、不裝插件,只用 CSS 製作偽雙語系網站。

僅運用 CSS,在 Squarespace 平台模擬雙語系網站之語系切換。


大綱
1. 前言
2. Squarespace
3. Squarespace 官方提供的方法
4. 製作方式
5. 最後的碎碎唸

前言

當客戶需要製作具備管理後台的網站,且預算又不高時,通常會建議客戶使用 WordPress 或是 Squarespace 網站建立平台來製作網站。

Wix、Weebly,我也有使用過,但不適合我。

回歸正題,本篇適合會使用 Squarespace 網站建立平台,及具備 CSS 基礎的使用者。分享使用 CSS,人工製作出偽雙語系網站的方法。


Squarespace

Squarespace 是一個由網站建立工具、網頁代管服務及部落格平台所組成,並以軟體即服務模式運作的網上內容管理系統。該服務讓個人或公司建立及修改網站及部落格。 — — WIKI

我覺得 Squarespace 使用起來能快速建立一個美觀的網站,具備多種版本,大部分的版面設定都是內建好的,多為簡約的風格,基本上不要作亂都不難看,當我們需要微調介面的細節,才會另外用 CSS 去新增樣式。

詳細的介紹跟使用心得,之後再分享。

在使用 Squarespace 建立「偽雙語系網站」之前,有建立過幾次網站,稍稍熟悉 Squarespace 的網頁架構。

Squarespace 官方提供的方法

Squarespace 本身也提供建立多語系網站的方法:Creating a multilingual site in Squarespace

  1. 一個一頁式代表一個語系,一頁式中由多個區塊組成
  2. 有幾個語系就建立幾個一頁式
  3. 製作一個 Home page,讓使用者進入到 Home 時先選擇「語系」再進入對應的一頁式頁面

聰明的你一定知道,官方提供的辦法,很受限於網站的「主題」。然而我們不可能只承接一頁式網站;有時候承接的可能是多頁式,或者一頁式與多頁混用。

好,那就不要用 Squarespace 的平台建立網站

正解!(誤)

但是我就各方面不足,好想用 Squarespace 架站啊!於是我想到了另一個辦法:

考量目前客戶挑選的方案(方案費用差距不小)無法置入插件,倒不如把每個頁面都建立出來,並在不同語系中,在導覽列隱藏特定的頁面


製作方式

一、建立頁面

假設我有五個頁面,分別是:首頁、作品、產品、活動、資訊;這時我需要製作出這五個頁面的英文版本,將他們依照順序排列。

我的後台頁面架構

正常情況下,所有導覽列頁面都會顯示,如同示意圖的「全部頁面」的導覽列狀態。

前台導覽列呈現

最終效果需能切換為「中文」、「英文」版本的導覽列。


二、找出對應的樣式名稱

使用網頁檢查工具,找出對應的樣式名稱,因為 Squarespace 頁面有各自的 ID,若我們不指定 ID ,樣式會套用至每個頁面。

id=”collection……….”
  1. 找出頁面的 ID:有幾個頁面就要找出幾個對應的 ID,頁面 ID 通常是collection 開頭,順帶一提,如果是文章頁面,ID 則是item 開頭
  2. 找出導覽列的項目樣式名稱:以此範例為例,導覽列的項目樣式為.header-menu-nav-item

三、CSS 樣式

在 Squarespace 後台 Design→Custom CSS(建議在 Sublime Text 3 編輯器建寫好樣式再貼回 Squarespace,原因在文末)

運用 CSS 選取器,控制導覽列的單數、偶數列的顯示,達到偽雙語導覽列的效果。

CSS 樣式

中文首頁隱藏英文導覽列項目,故我們選取「偶數」項目,並將他隱藏。樣式中的 ID 編號是示意圖,請找出自己的頁面 ID,並更換他。

#collection-0000001
.header-menu-nav-item:nth-child(even) {
display: none;
}

在多個「中文頁面」隱藏「英文頁面」導覽列

邏輯相同的情況下,找出中文頁面的 ID,雖然共用同一個樣式,但他們是不同的頁面,於是編寫成以下方式。

#collection-0000001
.header-menu-nav-item:nth-child(even),
#collection-0000002
.header-menu-nav-item:nth-child(even),
#collection-0000003
.header-menu-nav-item:nth-child(even),
#collection-0000004
.header-menu-nav-item:nth-child(even),
#collection-0000005
.header-menu-nav-item:nth-child(even) {
 display: none;
}

舉一反三

如果是在英文頁面,隱藏中文頁面的導覽列,則使用 :nth-child(odd) 選取單數列項目(也就是中文頁面)並將他隱藏。

#collection-0000001
.header-menu-nav-item:nth-child(odd) {
display: none;
}

最終效果

可參考惠誌企業形象官網專案的成果。

三、補充

其餘小提醒。

調整語系的樣式

以上選取器的寫法再自己查囉。
持續優化的效果

缺點

做工繁複,有多少頁面就得做多少次。

有更好的作法,可以跟我說 :)

使用 Sublime Text 3 編輯器

如果你直接在 Squarespace 後台 Design→Custom CSS 中寫樣式,不論是內建的小視窗還是展開的大視窗,都很不舒服…。

懷疑人生

推薦你使用 Sublime Text 3 編輯器,編輯好之後再貼過到 Squarespace,也能把大個階段的更動存一個 CSS 檔(在 Squarespace 是無法一直倒回先前的版本哦)

Sublime Text 3 編輯器

可以躺著,為什麼要站著?

(????


最後的碎碎唸

以上僅分享,目前為初學者,如果有更好的方式都歡迎跟我說:)能把新學習的技能運用上,雖然笨笨的,卻能稍稍突破,改變作法!

Repeating the same behavior will repeat the same result.

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Product
LINE 原創主題|紫丁香 ── 貓舞
Writing
✍ Medium Format Text 內文格式
Writing
✍ Medium Format Text 使用技巧
Product
LINE 原創主題|未歸檔 ── 晚安
Life
關於,我在台北生活的開銷與生活(一)
Product
LINE 原創主題|豆芽 ── 夢之花
Freelancer
2022 年 LINE 主題創作者問答
Freelancer
我如何成為自由接案工作者?(四)

Share

拓展不同領域,保持學習的習慣

拓展不同領域,保持學習的習慣

降學習是一生的課題,永不停止向前邁進。

許久未見,更新自己的學習狀態,並分享學習新領域後的想法。


簡介

我的職業是「自由接案設計師」能執行的設計範圍有:

因為做的範圍有些雜,也不是非常厲害的佼佼者,所以不用任何的設計師頭銜來稱呼自己;同時經營的設計工作室(未登記)偶爾讓人誤會為是多人的工作室。

執行設計的,一直都是我。

工程端的領域則是找合作的工程師,或者請教其他專業。

在〈設計師自學路徑〉以及〈設計領域的自我精進與學習態度〉文章,有帶過自學的開始,不過~這不是本篇的重點,有空再看就好。

本篇重點會分為:

  1. 透過自身的作品,學習新領域-網站前端樣式
  2. 擔任私人設計家教的想法
  3. 可能會沒有自信,不敢向前
  4. 學習這麼多的後果,是否感到混亂
  5. 保持不斷學習的心態

大概是這樣,進入正題吧。


Design by Jhane Chou / 2019 年改版後的工作室官網-使用者前台

透過自身的作品,學習新領域

在 2019 年,將工作室網站整個打掉重建,包含使用者前台、管理者後台。

以前我看到程式碼是會頭痛的人…。

非常非常非常,對程式碼沒轍(不知道是不是因為英文、數字的關係?)我的數理也很糟。

男友是 Android 工程師,在公司任職,雖然對網頁的領域不算熟悉,至少比我這個麻瓜好太多了。

時程數個月(包含前期討論與規劃)當時的分工與狀態如下:

Design by Jhane Chou / 2019 年改版後的工作室官網-管理者後台

向朋友學習前端樣式撰寫-大約一個月

一開始只會介面設計,跟些許的 HTML、SASS(只會改寫,不會自己寫)於是向朋友- Fay 學寫前端樣式。

Fay 是火曜日設計的成員,與他們合作執行過幾次專案:The Great Tipsy 微醺大飯店網站Club Tomorrow 明日俱樂部網站GETWILD FEST 2019…等等

與男友一起學習 VUE 框架-數個月

舊版的工作室官網使用 VUE 框架,我們決定沿用 VUE 框架,但是會整個打掉重建。學習 VUE 的基礎特性、生命週期、元件寫法。目前還有部分無法掌握得很好,有在整個網站的規劃做出取捨。

過程中也有請教另一位朋友-Whien

Whien 除了在公司任職,也有接案!
與他執行過的專案:Home Hotel 官網重構 & 介面調整

也是友情贊助!大感謝!

印象深刻的部分

  1. 開始能稍微掌握新領域時,有非常多的成就感,享受從無到有的過程
  2. 以往我們接觸建置網站的專案中,有部分客戶的內容不足,或是不同的媒體資料須想辦法另外準備或是委外,由於自己從平面到影片都能掌握,所以在網站的呈現準備反而輕鬆、彈性
  3. 接觸不同領域之後,在後續的專案,能考量得更多

擔任私人設計家教

Design by Jhane Chou / 講義局部

在 2020 年初,擔任私人設計家教,從無基礎開始學起。

花最多時間的是前期基礎課程,需要由學生的學習節奏和習慣來安排課程,也讓我重新順過一次自己的專業基礎。

學習素描需要知道的N件事〉是課程中釋出的一小部分,覺得很重要所以寫成教學文分享。

學生心態以及課後練習

過去在學校學習的時候,本科系的學生擁有更多的練習時間,但最終能按部就班,下好基礎的人卻不多。

許多學生,怪罪老師教不好、自己沒有資質,實際上是小看基礎,認為不用下足功夫去練習。

基礎是奠定後續的關鍵。

回頭學習&更新

準備課程的同時,發現以前所學的部分觀念,在現今其實已被推翻,若我今天沒有回顧&更新,我可能就會一直把持著舊觀念。


可能會沒有自信,不敢向前

還記得前段提到我學習其他領域嗎?後來,我開始承接網頁的案件,完全由自己處理介面設計到前端樣式撰寫,不過我稍微借用「Wordpress」與「Squarespace」平台作為後台的基礎,也因為 WordPress 平台的關係,學會改寫 PHP。

Design by Jhane Chou

曾懷疑自己,會不會讓人覺得我在貶低工程師的價值?

老實說在剛學習部分,並開始應用在專案少時,這樣的想法有些強烈。不過,我若是一直抱持這樣的想法,那麼我就不會繼續前進。

於是我盡可能做好,同時尊重每一個領域。


學習這麼多的後果,是否感到混亂

從平面到動態、前端樣式。

如果感到混亂,可能是還沒掌握好

我自己沒有混亂的狀況發生。當這項技能能使用之前,都是不斷練習,以及請教其他專業。

分享

在 MATTERS 曾經分享類似公告欄的教學貼文,繞過 MATTERS 發布後不可編輯的規則(樣式寫的小髒,但現在也不想回頭調整)。

有被官方列為「#Matties自製工具箱 | 把掌聲送給發開者」覺得很開心~~


保持不斷學習的心態

對我來說,許多事物在一開始時,面對一大堆未整理、未消化的資訊量,都是最難應對的。

Design by Jhane Chou

我覺得今天畫的圖小可愛(她是熱愛學習的豆芽小姐)祝各位豐收滿滿。

文章同步發佈平台&支持,可前往不同平台進行拍手支持,或透過下方的 Like 讚賞(註冊 Liker 完全免費)讓創作者獲得額外收入!

.MediumMatters
Life
關於臉部基礎保養這件小事
Aesthetics
設計基礎:色彩感覺
Product
LINE 原創主題|迷因 ── 謎樣生物 I
Life
DIY 貓貓尿布褲
Freelancer
我如何成為自由接案工作者?(四)
Aesthetics
給初學者的學習建議/私人家教介紹
Freelancer
設計自由接案作品集
Writing
✍ Medium Format Text 使用技巧

Share