[Week15] JackDou

[DuckJao]

今天討論了什麼？結論是什麼？

無

最新的進度是什麼？

撇了幾筆wireframe發現根本放不下想要放的啊... 想要放暗黑模式切換鈕、想放天氣(練習串api)、還想放每年的pantone色(這個應該沒有api吧...) 找了awwward網站看personal的作品，超多爆炸強的！但是還是沒有頭緒... 結果發現怎麼放都不對，只好請教公司的資深UI設計師... 她聽了我的需求，看了看現有的文件後，把我的LOGO改了一輪... 她花30分鐘的建議比起我之前兩個月的成果，真的差好多！這就是專業Orz

結果銘謝誌又要加一位了XD

下次報告前要完成哪些事項？

要把wireframe搞定

其他心得

一開始要做網站時，請教了一位前同事UI設計師，聊了聊LOGO的想法， 於是她說你有養貓啊，可以去以拉用貓的元素結合一下，然後我拉了半小時後傳給她被回： 「這是什麼鬼東西？」 於是只好上套版網站找靈感XD 然後拜託設計師同事幫我從png點陣圖改成以拉向量圖好讓我修改QQ (右邊的是我拉半小時的成果，左邊是套版網站修改的初步成果)

本來定案是雙色版LOGO一金一黑，但是看了一些暗黑模式的文章，有提到暗黑模式開始各大頭(蘋果和google)開始注意到文字顏色辨識度，簡單來說很多時候網站文章標題或是內文的顏色，是由LOGO主色來決定的，但是在暗黑模式下或是正常白背景下，這些顏色的辨識度可能未達標準，造成人們閱讀不易。

在參考google的material design與apple的人因介面設計兩家關於暗黑模式對顏色辨識度的部分後，我歸納幾個重點如下：

1. LOGO不在辨識度的規範，LOGO可以在暗黑模式或正常模式都保持一樣(說歸說，但這兩家都做了手腳，apple在黑底是白蘋果、白底就是黑蘋果；而google這幾個字在暗黑模式和正常模式的顏色有些微的不同，可以透過更改chrome瀏覽器的暗黑模式來觀察)
2. 文字顏色辨識度有分成大標和內文兩個部分，大標的辨識度可以比較低，而文字的辨識度就有嚴格要求。
3. 暗黑模式的底色不是純黑，而material design中規範的標準是#121212，透過將自己logo的主色調成半透明疊加在#121212上，可以得到接近黑色但帶有主色風格的網站底色。 (這邊是第一版的雙色logo，圖片右上有疊加找出網站暗黑模式底色的範例)

結果發現我logo的顏色超爛的全部辨識度不及格XD 所以除了一邊做文件一邊還要找尋合格的顏色...

在資深UI設計師30分鐘的巧手下，第二版LOGO直接從兩個對比色改成三個同色系相近色，質感瞬間提升...最後她建議我去google font找尋取代以拉預設少得可憐的字體...

於是第二版beta就這麼出來了... (找了12種字體安裝來比較！)

最終選出和LOGO最像的字體與類星際大戰字體來選XD 雖然很愛星際大戰，但是一體感為重QQ

最後就是校對辨識度了，我參考了兩個網站： material design的校色網站 色階產生線上版 (最終色階表)

經歷過數天的找尋，終於找出可以在白底得正常模式與黑底暗黑模式都符合辨識度的LOGO~ 然而可惜了資深UI設計師幫我想的LOGO白邊(還有特殊圓角！)在辨識度不好的情況下，加了白邊清楚很多！而微調顏色讓辨識度提升後，白邊就有點突兀了，最後忍痛拿掉QQ

終於，最終LOGO誕生！ 對照前面我自己拉以拉的圖片，光是LOGO找尋就花了2個月的時間啊...