Doris

Window Resizer

網頁 RWD 自適應很重要,安裝這個插件,點選預設尺寸,網頁會自動縮放到指定的尺寸。

插件右邊工具欄,點擊「Open as popup」會以當前選擇頁面彈出新視窗,能夠在不影響原本操作大小,快速檢視排版。

第一份工作,設計網頁的時候,有和工程師學到一招,這裡一並分享給大家!

Step 1:在網頁上面,點擊右鍵 ➔ 點擊「檢查」

Step 2:如下圖,點擊 icon

Step 3:有許多預設的尺寸可以檢視

--

--

圖標的功能

它們被賦予可操作,提示說明等作用

相似圖形的變化

運用實心 icon 和線條 icon 區分不同的狀態

you could use the slash variant of a symbol to show that an item or action is unavailable, or use the fill variant to indicate selection.

您可以使用符號的斜杠變體來表示項目或操作不可用,或者使用填充變體來表示選擇。

線條 icon

透過線條的描繪,更容易增加細節,能夠給人精緻,輕鬆的感覺。
不同線條能帶來不同的視覺感受,直角顯得專業嚴謹;圓角則顯得圓滑流暢。

實心 icon

填滿圖形的描繪方式,視覺上面積較大更顯眼,能夠快速辨識圖形表達的含義。
完全填滿的實心顯得扁平而簡單;運用簍空和元件之間的距離,創造細節和豐富層次感。

視覺協調的評斷標準

1、識別性
圖標的大小,顏色,線條的粗細,這些影響視覺識別的因素識別性是否高。

2、規範性
也是做好一個圖標的基礎,我們要保證圖標在視覺大小的一致性,圖標飽滿度、遵循同一種規律,細節統一性。

3、統一性
線條的粗細比重,邊角的大小,配色方案,細節層次和設計元素在整個合集中是否是不變且一致的。

4、呼吸感
就是適當留白,不管是圖標還是界面,適當的留白可以突出主體內容,讓內容具備易看性。

參考文章

--

--

不斷反問自己,當下到底在想什麼,我到現在也還摸不著頭緒

碰的一聲!

我就這樣撞上了電線桿

跪倒在地上,餘光看到等待通行的車子開始緩緩移動

太害怕起步的汽機車朝向我而來

就用所剩下來的力氣,爬到旁邊的花圃坐著

慢慢的眼前出現一片雜訊,像是壞掉的電視螢幕

頭昏很熱到很想躺下來休息

就這樣坐著,想等待身體能夠緩和下來

男友問:「現在除了眼睛看不清楚,還有哪裡不舒服?」

我感受一下全身,發現左手舉不起來,膝蓋麻麻的

男友即時叫了救護車後,他留在現場做筆錄

而我帶著踉蹌的腳步走向救護車

在救護車上,護士為了方便清理傷口,將褲子剪短

褲子剪開,看到傷口的瞬間

痛覺才湧上來

順利抵達急診室後,護士用棉花棒深深捅了我的鼻子,完成快篩的程序

等待 X 光片結果的同時,醫生就將我膝蓋上的破洞縫合了起來

醫生拿著 X 光片說:「左手確定骨折,必須住院動手術。」

手術當天,躺在手術平台上

天花板上掛著兩盞看似可移動的巨大燈具

這裡比我想像中的還要寬敞和明亮

護士緩緩到我身邊,輕鬆地說:「我猜醫生應該會幫你用手縫,這樣傷口會比較漂亮~」

當下的氣氛很像是朋友閒聊,讓我的心情變得比較放鬆

手術順利的結束回到病房

住院 3 天的時間裡,有護士的照顧、男友陪伴和家人朋友的關心

出院後回家靜養等待縫線拆除

兩個星期後拆除縫線

傷口果然很平整!

現在鎖骨和鈦合金鋼板緊緊相依

每天都覺得手非常的酸痛

尤其是睡覺躺下的時候感受最強烈

偶而還會伴隨一陣被針扎到的刺痛感

受傷後的心得就是

騎車不要跟車

受傷很花錢

$$$$$$$$$$

--

--

在加入 YouTube 行列的初期,就像是一個剛踏進市場的新品牌,想要快速讓觀眾認識你,那就盡可能的將理念傳達出來,試著抓住觀眾的目光。

而頻道上方顯眼的橫幅,正是能夠帶給觀眾第一印象的方法,快速達到品牌宣傳的效果。

這篇主要紀錄關於 Banner 尺寸規範和設計方向。

章節

  • Part 1:場景規劃
  • Part 2:設計影片封面縮圖
  • Part 3:後製剪輯
  • Part 4:頻道 Banner 設計 ⇠本篇

橫幅圖片 ( banner )

▎尺寸規範

設計 banner 排版要考量行動裝置、電腦、電視三種尺寸,因為 YouTube 很貼心,設計一張符合三個裝置的排版,後台會自動做裁切,各個平台橫幅就一次搞定!

我整理的這張黃金範圍尺寸表,依照尺寸實作即可。

--

--

一陣微風徐徐吹來,你睜開雙眼望了望四周,映入眼簾的是黃澄澄的房間,本想再次闔上雙眼滾進軟綿綿的被窩裡,此時傳來鬧鐘鈴鈴鈴的聲響,舉起雙手伸展了躺在床上沈重的身體,伸手關掉鬧鐘,坐在床邊準備迎接新的一天到來。

當閱讀完這段內容,你有感受到暖和的陽光還有涼涼的微風嗎?

在大腦接收到環境的訊息時,透過視覺、聽覺、嗅覺、味覺和觸覺這五項感知,能帶給人不一樣的理解及感受。

影片後製剪輯的目的正是如此,運用視覺的色彩、動畫;聽覺的音效、音樂,來傳達影片的訊息。

我平時習慣使用 Adobe 系列的軟體,所以在眾多剪輯軟體中選擇 Premiere 作為學習剪輯的工具。

這篇主要紀錄,關於色彩搭配的細節以及動畫效果的呈現方式。

章節

  • Part 1:場景規劃
  • Part 2:設計影片封面縮圖
  • Part 3:後製剪輯 ⇠本篇
  • Part 4:頻道 Banner 設計

字卡組成

目前使用 Adobe Premiere「舊版標題樣式」創建字卡。下圖右側屬性面板,描邊圖層是由上往下排列,呈現效果也會依照順序一層層堆疊,圖中我運用不同的顏色簡單說明。

--

--

封面縮圖顧名思義就是平面設計的意思,也就是將文字和圖片透過設計排版,傳達訊息的一種視覺表現。

這篇主要會分享,在 YouTube 玲琅滿目的影片當中,觀察並歸納出幾種設計模式,以及實作延伸的設計想法。

章節

  • Part 1:場景規劃
  • Part 2:設計影片封面縮圖 ⇠本篇
  • Part 3:後製剪輯
  • Part 4:頻道 Banner 設計

設計模式

運用以下歸納出的幾個模式,互相搭配使用,可以延伸設計出很多不一樣的效果。

--

--

一件你從未做過的事情,很難憑空的創造出理想畫面,我覺得最快速入門的方式就是臨摹。

當你開始動手做,並看著自己實踐的成果時,我相信一定會找到可以挑惕的地方,當發現這些可以被調整的細節,那就表示你正在進步呢!

所以在擁有自己的風格之前,就是不斷的重複以下這個過程,直到找到心目中理想的狀態。

--

--

這篇會述說,在第一間公司任職平面設計師是如何接觸到 UI/UX 領域?

又是什麼契機讓我想轉職?轉職時是如何設定目標?

經歷了 2 年的工作時間,接下來的方向是什麼?

2018年寫了一篇關於菜鳥時期面試的經驗分享「轉職成為 UI 設計師:你也和我一樣害怕面試嗎?」如果你也是第一次面試,希望這篇文章可以幫助到你。

我的成長背景

國小短暫接觸兒童繪畫

國中進入畫室,學習關於素描水彩的基礎知識

高中就讀美術學校(復興商工-美工科)

大學就讀室內設計(中國科技大學-室內設計系)

畢業後在 UI/UX 領域工作

第一份平面設計師工作

我大學讀夜間部,前兩年的時間裡,還享受著當學生的那份簡單,對於出社會工作沒有實際想法,總覺得學校就是個小型社會,出社會應該也是一樣的模樣吧,抱持著這樣的心情生活。

直到大三那年,因緣際會下透過朋友介紹,推薦一間網路科技公司的工作,當時對於網路科技產業並不理解,就這樣踏上第一次的面試之旅。

最後很幸運的錄取,擔任平面設計師。
用著熟悉的 Ai 工具工作,負責更新名片的設計細節。

這設計有人想用嗎?

「你這個設計,會有人想用嗎?」一位工程師脫口而出

驗收第一版的設計頁面,是公司主線產品 — 旅遊網站

聽到評語當下,令我一時不知道該從何檢討起,主管則是建議我多參考現在的設計趨勢,給了我一些方向之後便開始研究。

就這樣不知不覺的開始研究網頁設計、RWD 響應式設計 、點擊效果、頁面顯示的邏輯…等

--

--

Doris

Doris

UI/UX 設計師|上線作品 Beiyi北宜 APP|記錄學習過程|何謂設計?「設」定目標;「計」畫執行