寫給不是設計師的——漸層配色(中)

作者現職是一位對於研究設計與使用者體驗充滿熱忱的 iOS 工程師,由於其本身非本科系(設計相關)出身,也不是資工相關出身,特別撰文分享其運用漸層配色的心得。此為暨(上)篇介紹「色彩學」、「類似色漸層變化」,以及「對比色漸層變化」後,(中)篇主要介紹「基礎複習/練習」、「球型(放射狀)漸層變化」。
評論
評論

作者 Samuel 高玉璁,目前任職於 Tickle Lab,擔任 iOS 工程師與介面設計助理,原文刊登於 Medium,Inside 獲授權刊登。

漸層,還可以用來做些什麼?

6/5 聲明稿連結

(中)篇主要會介紹以下三個主題:

  1. 基礎複習/練習
  2. 球型(放射狀)漸層變化
  3. 金屬漸層變化(延至下一篇 xD)

建議沒有讀過 (上)篇 的夥伴們,先藉由(上)篇來建立漸層應用的基本知識,而接下來的(中)篇在有了上篇的基礎之後,肯定能帶給您更多的幫助。小弟我也會盡可能提供您更多有用的好東西。

我是 Samuel。非本科系(設計相關)出身,也不是資工相關出身,但有幸接受幾位厲害前輩(Hammer, Sophy, Fran)的指導。目前職場工作經歷 0 年(未滿一年 xD),於學生時期就熱愛嘗試新鮮事物以及跨領域的合作(真是一條不歸路)。2013 年與設計系夥伴們共同完成孕婦照護系統 Fetus Care;2014 年暑假於 i-Fit 擔任 iOS 實習工程師與介面實習設計師,同時非常感謝 Chiao 在這段時間給予的職涯建議以及分享設計思考的經驗;於 2015 年取得經由 陳教授 的指導取得 NTUST 嵌入式系統領域的碩士學位。目前是一位對於設計與使用者體驗相當具有熱忱的 iOS 工程師 ,同時希望持續的寫作能夠帶來更多的分享與討論,讓每個熱愛或是想要瞭解設計的朋友都能夠互相指教與學習。

一、基礎複習/練習

講在最前面 →在上篇有部分的讀者反應不知道到底 1/5 區間是什麼東西,該如何把它從檢色器上面打開來做參考? NoNoNo,1/5 區間其實是一種感覺 →小弟在選色的時候都會在腦海裡將檢色器切分成 25 個區塊,就如同下圖一樣:

以上圖為例,在選擇漸層顏色變化時就會在下圖 1/5 的紅色框框區間內選擇:

蛤,一定只能這麼少喔?其實在設計上面並沒有一定要怎麼做,只要你爽,然後業主買單就好?,但小弟建議您最多最多維持在 2/5 的區間就好,如果再往外進行調整的話 → 想必您已經開始發現顏色差異增加,甚至因為灰階的影響,開始導致漸層出現變髒的狀況,在後面會看到這樣的範例說明。

練習一

首先我們先從一個結合類似色以及色階變化的練習開始 → 這個練習只是一個相當常見的波浪漸層圖樣(廣泛運用在 UI/ 視覺設計當中):不同的漸層區塊搭配了透明度的變化以及正確的選色來做出一種乾淨(上篇教學的重點),好像很厲害(每一篇的重點 xD)的視覺感受。

▲ 練習 1
  • Step1. 選擇顏色

選擇顏色是做出乾淨漸層最重要的一個步驟。下圖是我在(練習 1)裡面所使用的五種漸層組合,每一種組合都有微調色相來讓顏色的變化更為細緻 → 記住儘可能不要跟我使用相同的顏色來做練習喔!

(1)-(5)運用到的其實都是上一篇提到類似色漸層中 → 高明度色系漸層的變化,複習一下「確保明度與彩度的調整都保持在檢色器的上方 1/5 內」的基本法則。先看看第(1)組的漸層用色,是不是完全符合這樣的調整區間?在微幅調整彩度/明度的情況下,進行色相的左右移動,最後選擇與藍色(#7BD2F8)相當接近的藍綠色(#72E8CE)作為漸層起點/終點:

再來看看第(3)組的漸層用色,在完全沒有調整色相的情況下,將彩度的變化向左調整約 1/5 個區間來作為這一組的漸層選色。

講到這裡可能有很多人會疑惑為什麼要限制選擇的範圍?如果有更多的彩度差異難道不好嗎?嗯…個人認為設計上面是沒有絕對的,但在做出這樣的選擇之前,讓我們來簡單看一下如果把彩度的差異增大,呈現的效果會是怎麼樣:

其實除了最下方最大彩度差異的搭配之外,其餘兩種都在可接受的範圍之內,在我看來甚至可以說是相當不錯的選擇,端看您使用上面的需求→不過因為這次練習的目標是要組合出乾淨/剔透而且不跟其他顏色衝突的漸層圖像,因此在這邊我還是會確保彩度/明度的差異都在檢色器的 1/5 區間裡面,藉此避免當顏色重疊時灰階會持續的累積 →導致最終整體顏色過重或是視覺效果變髒。

  • Step2. 第一層疊色

在選色完成之後,就會是一層一層往上疊加囉!

使用(2)的顏色做出第一層,透明度 30%。

  • Step3. 第二層疊色

使用(3)的顏色做出第二層,透明度 40%。

  • Step4. 第三層疊色

使用(4)的顏色做出第三層,透明度 40%。

  • Step5. 第四層疊色

使用(5)的顏色做出第四層,透明度 40%。

  • Step6. 第五層疊色

使用(1)的顏色做出第五層,透明度 30%,這層漸層角度差異較大的原因是我想試著做出更多的融合感覺,也非常建議各位夥伴嘗試使用不同的漸層角度來玩玩看產生的效果喔。

  • Step7. 內陰影疊加

做到這邊大家應該發現怎麼顏色好像都融在一起分不太清楚?跟上面的範例似乎不太一樣 → 最後這一步是相當重要的一步,為了讓重疊的類似色漸層能更明顯的產生區隔,我在每一個漸層區塊上面加了內陰影,舉第一層與第二層的應用為例:

▲ 沒有內陰影
▲ 有內陰影

雖然變化不大,但是不是能夠發現有內陰影的版本其實立體感更強,同時也能拉開與同色系漸層區塊的差距。而內陰影的選色其實非常簡單,運用的還是同樣的一個小技巧 → 選擇本身的顏色往右下角稍微加深一些(1/5 之內),作為你使用的內陰影顏色即可。

附上兩個用相同原理調色的 Demo→ 所以就別照著調色啦,自己配一個?。

 

登愣!!練習 1 就完成囉?。

練習二

接下來我們再來看一下上篇的學習目標應該要如何製作。
註:這邊只會帶您進行右邊的練習,左邊的部分請在參閱(上)篇之後自行運用想像力產出?。

▲ 練習 2
  • Step1. 選擇顏色

選擇顏色是做出乾淨漸層最重要的一步 ← 複製貼上。同樣不唬爛的選色模式(下圖),保持彩度明度在檢色器一定的區間之內進行調整,利用這樣的限制來有效抑制大幅度調整色相的不協調性,這樣子的用色使得圖層在作為背景的同時也呈現了較強烈的漸層變化感。

  • Step2. 製作底部基座

運用上淺下灰的漸層,搭配底部的陰影就能夠輕易地製作出具有立體感的圓弧底部基座。(忘記請複習 上篇

Tips. 大部分在使用的陰影的時候請不要傻傻地選了一個黑色搭配透明度,這樣子的陰影通常會!很!髒!除非要刻意強調陰影的對比效果,請盡量選用底色加深的顏色(往右下移動移動在移動)作為陰影色。(ex. 製作紙雕類的立體模型時有可能會為了強調陰影 → 使用純黑或是深灰色作為陰影喔)。

  • Step3. 製作凹陷區

運用上灰下淺的漸層,搭配內陰影就能夠輕易地製作出具有凹陷感的按壓區。(忘記請複習上篇)

Tips. 小細節補充 → 一般在製作凹陷的區塊時,我通常會在區塊底部加上白色的陰影(模糊 =0)來做出反光的效果讓整體更有細節。

  • Step4. 打光與填上文字

在下圖中紅色框起來的圓形當中,我運用了白 → 灰黑的漸層,利用覆蓋(Overlay)的混色模式(覆蓋(Overlay)的混色模式會讓圖層白色的部分去加亮底色,圖層深色的部分去加暗底色),搭配透明度的效果做出光從右上照過來的光感。最後搭配符合整體色調(#36D9E7)的細黑體(Helvetica Neue-Thin)文字(如果在這個作品中使用新細明體或是華康少女體我一定會揍你?)來完成這個練習。

登愣!!練習 2 也完成囉?。

二、球型(放射狀)漸層變化

相信很多像我一樣剛入門的人每次再看見那麼多種漸層類型時多少都會有些疑惑,上一篇已經講完許多基本的運用方式,相信各位對於各種漸層類型應該沒有那麼恐懼囉。那我們接下來就開始看看球型(放射狀)漸層變化到底可以拿來做什麼吧!

一般來說小弟我最常運用放射狀漸層來處理 → 補光,球體,光暈這三種狀況。小弟之前設計嘗試的 icon 也算是運用放射狀漸層的概念 xD。(6/7 補)

那麼接下來我們就依序來聊聊它們的應用場景:

補光

補光這樣的技巧通常會被運用在真實感較強的物體上面 →這邊我們用 寫給不是設計師的漸層配色-上篇 中最後所 Demo 的蛋黃來做練習吧。相信以各位練習到現在的練習,要做出底下這樣的 icon 應該已經是輕而易舉囉?!如果還不行 →請回去複習之前的內容?。

  • Step1. 底部基座

由純色(#FEA740)搭配基本白 → 灰漸層基底的樣式。

  • Step2. 精華步驟

一切的精華就在這神奇的一步,我們現來看看想像中的光源相對於荷包蛋的位置應該是長什麼樣子:

由上圖可以知道,荷包蛋的另外一端(右側)應該會比左側(光源直接照射)來的暗,利用放射狀漸層 → 模擬光由光源的聚焦點(最亮點)然後往外逐漸變暗散去的效果,就可以做出最重要的補光特性囉。

  • Step3. 加強視覺效果

加上外陰影(#D3CBB7 透明度:50%),這邊選擇是跟蛋黃顏色較接近的顏色作為陰影 → 可以把他想像成蛋黃映射在蛋白產生的反光結合陰影產生的顏色。

  • Step4. 凸顯光源點

最後最後,為了更加凸顯光源的聚焦點,我在這裡額外加了一個橘白色的區塊(左圖)搭配高斯模糊來增強光源效果,成果為右圖。

球體

  • 類型一

球體可以說是放射狀漸層最最常見的應用 → 就跟下圖一樣簡單:

Tips:在這邊為了讓球體的效果更加強烈 → 我們可以加一點內陰影進來(稍微亮一點點來模擬底部地板產生的反光)以凸顯球體本身的立體效果。(os. 看起來怎麼好像都一樣 XD)

  • 類型二

讓我們稍微進階一點,開始嘗試看看不一樣的球體感覺 → 首先先拉出如下圖的底色漸層:

接下來我們嘗試運用放射狀漸層(#F8EFDD,中心透明度 100% → 最外側透明度 0%)來填上左上角的光:

最後我們對光源使用高斯模糊來解決界線過於清晰的問題:

講到這裡,相信各位讀者應該也發現到 →放射狀的漸層其實非常適合拿來模擬”有弧度”的光源,畢竟在自然界當中幾乎不存在任何剛剛好垂直的線性漸層,絕大部分的物體都是有弧度或是有形體變化的。

光暈

  • 類型一

舉個最簡單的例子 → 有一顆太陽在發光,他的光會隨著距離越來越弱.. 吧 xD?所以在畫一顆簡單有著散射光的太陽時,理論上應該要利用放射狀漸層拉出下面的效果。(漸層的頭跟尾都填上 #FFCF0A,只是頭的透明度是 80% 而尾的透明度是 0% → 藉此模擬光向外發散的效果。)

同樣的原理也可以利用在下圖的範例:

出處

範例中的背景就模擬了夕陽陽光從左上角灑入畫面的感覺 →

搭配上篇運用的漸層效果以及前述的漸層練習,要做到這張圖的效果應該不會太難(逃)。

註:這張圖最難的其實是細節上面的調整,反倒不是漸層的應用啦?。

▲ 效果練習
  • 類型二

放射狀漸層其實相當適合作為 UI 背景使用,可以輕鬆依照下面這樣的選色來試試看拉出富有層次感的漸層變化。(看到這句話應該都覺得很扯,我每次讀文章最害怕看到的就是這種有講跟沒講一樣的說明 xD)

既然很討厭,那我們當然還是要說明一下上圖的用色是如何選擇的,我在這邊做的事情其實非常簡單,在橘-紫的區間依照色相表順序由左往右的任意選色,調整明度/彩度在 1/5 的區間之內,就可以搭配出 Demo 和諧,不衝突的漸層效果囉。

利用放射狀漸層配合上圖顏色設定漸層區段 →

做出來的背景效果如下 →

  • 類型三

在上一篇教學中小弟臨摹練習的 icon 裡面,同樣在背景上運用了放射狀漸層達到聚焦的效果,能夠讓您的作品有看起來好像很厲害 *2 的感覺 xD。當然跟原作還有一段差距啦,不過如果有需要 Sketch 檔來做練習的朋友歡迎發訊息或是留下信箱跟我索取喔?。

補充 1:(上)(中)(下)篇漸層配色文章相當適合需要設計師姊姊妹妹崇拜(勉強認同)眼神的工程師們,至於效果如何因為小弟任職的地方沒有任何的設計師妹妹…所以請務必告訴我成效如何(重要!!),是否能夠有效提升您在她們心目中的地位?。

預告:金屬色漸層/更多的漸層應用

莫名其妙這篇的篇幅有夠長的啦 xD,所以我們就把金屬色漸層留到下一篇再繼續跟大家介紹囉。如果大家喜歡這一系列的文章,也請麻煩幫忙分享/推薦,給予小弟一點鼓勵囉。

有了金屬漸層的練習之後,您也可以開始製作如下圖的效果囉 →

如果下篇的篇幅足夠,小弟也會簡單的說明一下該如何做出像「潮汐」這隻超優雅 APP 的 icon:

底下是小弟根據「潮汐」icon 作出的練習(相信厲害的夥伴們應該已經看出一些端倪了吧?):

在這幾篇「寫給非設計師」系列結束之後,小弟預計會針對簡報字體懶人包(很多朋友在問 xD)來寫一篇,然後就會開始寫一些「寫給非工程師」的 For 設計師文章囉? → 希望能夠幫助剛踏入職場的 UI 設計師更快的與工程師接軌合作。有興趣的夥伴們歡迎交個朋友/或持續 Follow 囉 : )。

感謝 Angela,同事 CrystalChang、方方魚幫忙校稿以及順修。


圖解智慧國家四大關鍵科技,從不同角度帶你了解台灣的科技應用實力

大家都知道台灣有座半導體護國神山,也聽過許多媒體對台灣科技實力的盛讚,但台灣的科技實力到底強不強?我們從四個面向帶你看台灣作為「智慧國家」到底有什麼實力!
評論
評論

大家都知道台灣有座半導體護國神山,也聽過許多媒體對台灣科技實力的盛讚,但台灣的科技實力到底強不強?自己說不如讓國際單位做的調查更客觀顯示。瑞士洛桑管理學院(IMD)每年9月公布的世界數位競爭力(World Digital Competitiveness Ranking)評比,最近一次報告2021年台灣在全球64個主要國家及經濟體當中排名第8,獲得歷年來最佳名次。

而且值得關注的是,支持數位競爭力的核心要素之一,也就是「科技」競爭力。IMD評比報告揭露台灣拿下全球第2的佳績,從2018年的第11名年排名持續上升,顯見台灣無愧於科技強國之名。


科技小百科:
瑞士洛桑管理學院(IMD)是一個長期研究國家與企業競爭力,在國際上具盛名及公信力的評比機構,並自1989年起發布「世界競爭力年報」World Competitiveness Yearbook,其評比報告與調查結果更是各國政府擬定相關政策之參考。IMD每年會定期公布兩份競爭力評比報告,其一是「世界競爭力年報」,每年在6月公布,2022年台灣在63個受評比國家中排名全球第7名。另一份報告為「世界數位競爭力評比」World Digital Competitiveness Ranking,每年在9月底公布,本篇文章引用的資料為這份兩份研究。


也因為科技與國家發展息息相關,有哪些技術是台灣不為人知的優勢?或是未來產業可大力投資布局的領域?我們找出其中四大項與智慧國家最有關的科技,展現台灣具備強勁的科技能量,或許你已經受惠,也或許你能從其中找到發展的機會。

關鍵科技一、融合海陸空領域的多維通訊

隨著國家管理範圍逐漸擴大,通訊範圍多元且彼此關聯,相關科技如低軌衛星、5G通訊、海底電纜等,形成環環相扣的多維通訊聯網。

仔細洞察2021年的IMD報告,台灣在「行動寬頻的用戶比例」這項指標,拿下全球第1的傲人成績。顯見台灣在通訊基礎建設的投資及普及率,是走在全球領先位置。

尤其5G/6G關聯科技更是未來多維通訊的具舉足輕重的地位,原因是5G衍生的價值鏈相當廣泛,舉凡從晶片、模組、終端、邊緣、系統、到應用服務,可形成完整生態圈。為了強健台灣5G專網的自主技術與供應鏈,從2018年先後成立5G產業發展聯盟、5G垂直應用聯盟、以及5G Open Networking平台,逐漸形成5G國家隊。

除了把5G領先國視為戰略目標,當創新技術落地,更能帶來龐大商機。根據工研院的預估,將5G的小基站、邊緣運算、網路虛擬化等關鍵產品、模組、元件加總起來,2025年的市場規模上看2,510億美元(約新台幣7.5兆元),其他國家還在積極推動5G聯網建設,顯見相關商機仍有相當大發展空間。

關鍵科技二、新型態數位經濟與網路服務

邁向Web 3.0的交叉點,元宇宙被視為下一代網際網路的新機會,市調機構Gartner預測,2026年全世界將有25%的人口,每天至少有一小時投入元宇宙虛擬世界,進行工作、社交、教育、購物、娛樂等活動,並藉由虛擬貨幣、NFT進行數位資產的交易,虛擬經濟逐漸成形。

所謂元宇宙,需要以5G/6G高速網路為基礎,透過VR頭盔/眼鏡作為進入3D虛擬世界的載體,在元宇宙的各種互動體驗則需仰賴AI運算、雲端/邊緣儲存、區塊鏈等核心技術支援。人們在元宇宙內可以滿足從現實世界做不到的事情,形成穿梭虛擬、現實之間的生活體驗與商業模式。

近七成投入元宇宙相關應用的企業,認為元宇宙在未來5年一定會蓬勃發展,虛擬音樂會、虛擬時裝秀、媒體及產品聯名展示活動,將是元宇宙優先發生的商業體驗。

那麼台灣要投入元宇宙有何利基?解析元宇宙供應鏈版圖,主要可分為晶片、光電、通訊、AR/VR裝置、內容以及AI技術,台灣科技可從硬體方面,包含晶片、感測IC、光學零組件、伺服器等擅長領域切入。像是大家熟知的半導體大廠台積電,對於相關晶片的供應就至關重要,另外光電產業也有揚明光、玉晶光、中光電等企業,讓投影技術更精緻,再來連接元宇宙的通訊技術,也有聯亞來支援,而裝置軟硬體、AI技術則是有創意、世芯、智原等企業投入,最後想到AR/VR集大成者,就不能遺漏宏達電在這一塊的耕耘,同樣威盛電、佐臻、未來市(XRSPACE)等品牌也積極佈局,可見台灣已有完整的供應鏈,接下來有志於加入元宇宙的廠家,不妨從自身的專長去思考,相信不論是哪個領域的企業,都能有更多的創新、應用內容投入,完善整個元宇宙生態。

關鍵科技三、疫後時代興起的智慧型代理人 

近年因疫情持續延燒,越來越多領域開始導入「智慧型代理人」,像是零售業者引進半自動化機器,協助人力處理訂單、點餐;又或是醫院使用機器人,藉由AI辨識功能分擔部分醫護工作。

所謂智慧型代理人,以它所知的知識範圍內,自主完成人類所給予的指令任務。智慧型代理人發展至今,能協助人類的廣度、深度越來越多,主要是受惠機器學習的技術更為先進,加上其他的自動規劃、互相協調等演算法的成熟,讓智慧型代理人成為下一波產業發展重點。

世界先進國家紛紛把AI納為國家產業重要發展策略,台灣從2018年就推出「台灣AI行動計畫」,全面啟動產業AI化。發展至今,AI應用已從測試階段逐步應用於各式產業,資策會統計發現,掌握AI技術的新創企業在台灣有300家,逐漸摸索出不同的商業策略與獲利模式。

尤其資通訊、醫療照護是台灣兩大擁有頂尖人才的雙軸產業,在疫情之下,就可以看到醫療+科技所衍生的智慧型代理人應用。像是過去為了解決醫療量能不足,開發「5G智慧防疫機器人」,用來隔離病房消毒、運送餐盒及藥品物資,比傳統人力消毒方式有效節省50%時間,還能降低醫護人員感染風險,讓醫事工作更有效率。

關鍵科技四、資訊安全網保護每個人數位資產

我國面臨網路犯罪、駭客入侵政府、機關,甚至竊取個人資料事件持續增加,如何保護國民安心使用數位科技、保障財產安全將是未來重要方向。隨著AI普及所衍生的龐大資料量之隱私及資安問題,成為棘手的挑戰。從國際AI資安發展現況來看,歐盟在2021年提出人工智慧規則草案(Artificial Intelligence Act),鼓勵值得信賴且道德的AI進行研發與應用。微軟更在今(2022)年禁止提供AI推測情緒技術,並制定「負責任AI標準第二版」、Google則停止AI機器人具有自我意識、能與人類溝通等爭議事件,這些做法也都反映美歐在立法之際,業者也在努力自行節制敏感AI技術。

AI資安,是挑戰也是機會。未來,台灣政府與企業也須密切關注美歐相關草案的立法動態,找出AI規範的共同點,以此界定使用AI產品與服務之要求;因此,AI資安不僅需透過科技來防禦,更需要治理與法規,降低AI所帶來的衝擊。

另外,針對5G資安議題,台灣有展開大型科技防禦策略,包含5G資安防護系統、跨機關資安聯防。5G資安防護系統致力確保業者使用的5G系統具備安全、可靠、信賴,與國內5G專網業者進行服務驗證,以強化國產5G系統的整體資安防護能力。跨機關資安聯防的目標放在建立政府與民間的資安聯防體系,藉由橫向整合跨部會,全面提供威脅情資,減少機關隱匿資安事件,降低事件誤報與漏報。

持續提升台灣的科技能量 打造全方位的智慧國家

圖片資料來源:IMD 2022 世界競爭力年報

台灣的科技能量持續提升,從2022年的IMD世界競爭力年報可發現,而且該報告還指出我國擁有高素質勞動力、經濟活力、企業治理能耐、高教育水準等優勢。上述四項與智慧國家高度關聯的新興科技,涵蓋「數位基盤、數位創新、數位包容」等元素,如何借助科技打造創新、包容的社會,在台灣強勁的科技應用產業鏈上,補強創新的能量,並延續發展優勢項目,將是台灣要持續努力的方向。

了解更多智慧國家方案
看更多智慧國家相關報導

行政院科技會報辦公室 廣告