白露

【白露】
「水土濕氣凝而為露,秋屬金,金色白,白者露之色,而氣始寒也。」
──《月令七十二候集解》
.
今年自9/7起進入24節氣「白露」,相信大家除了這幾天報到的滂沱秋雨,也已然感受到入夜漸微涼的轉變。今天的Em小講堂,設計師想要以「白露」為配色靈感,呈現清晨霧氣瀰漫或者大雨滂沱的氤氳感。
.
首先以先前提到的nipponcolors為工具,冷色調、低彩度的顏色為優先選擇。以深淺不一帶有灰感的藍與綠營造對應氣候的冷冽感與朦朧感;以厚重沉穩的老竹色作為畫面中唯一點綴;最後分別以帶黑而深邃的藍及亮灰色作為加重層次舖陳,完成這次的配色小示範。
.
雖然入秋後溫度日漸微涼,近日大雨也帶走不少暑熱餘韻,我們仍衷心希望這場大雨不要造成太多災情。

色系:白鼠、深川鼠、老竹、白茶、藍墨茶

#Em小講堂
#白露
#二十四節氣
#日本傳統色
#nipponcolors

太空人404頁面

[row]

[col span=”6″ span__sm=”12″]

[title text=”客製404頁面” tag_name=”h2″]

在既定常見的印象中,網站設計師能發揮實力之處往往在banner與footer.但其實客製化404頁面也是網站設計師發揮創意的好主題,從Dribble的tag 404_page 可一探究竟。

最近Em的網站設計師在Codepen瞧見一個好玩的404頁面動畫,畫面中的太空人會隨著滑鼠游標移動漂浮,所以設計師做了個GIF動畫展示這些優秀設計師的創意。

如果對各種創意404頁面有興趣的,可以前往CodePen欣賞,連結在此

[/col]
[col span=”6″ span__sm=”12″]

[ux_image id=”348″ link=”https://codepen.io/FilipVitas/full/KRRRoY/”]

[/col]

[/row]

參考資料

在WooCommerce加入客製化使用者欄位

前言

由於業主有增加WooCommerce客製化使用者欄位的需求,所以這篇文章想分享一些客製化使用者欄位經歷。因為預期會有許多後續寄送收據、報帳與聯絡需要,業主想在使用者註冊時就先填好資料,或者使用社群網站 (Facebook or Google) 一鍵登入後能繼續填寫客製化欄位,所以在註冊表單、編輯個人帳號、購物車結帳前,後台查詢訂單這四處要加上客制化欄位。

搜尋參考資料有找到一位WooCommerce plugin開發者寫的詳細教學文章,英文文件但值得一看,以下參考他的文章增加業主所需的客製欄位。code的部分要打包成外掛Plugin或者是MU Plugin (Must Use Plugin)都可以。

在WooCommerce加入客製化使用者欄位

定義客製化欄位

要加入客製化欄位得先知道要放哪些欄位、類別跟必塡/選填,所以得先定義這些欄位。

 

這邊的例子是建立名字(文字欄位),身份與類別兩個下拉式選單:
type是欄位類別可以選:

  • Text 文字
  • Textarea 文字區塊
  • Select 下拉式選單
  • Country 國家
  • Checkbox 單勾選
  • Number 數字
  • Password 密碼
  • Email
  • Tel 電話

原文教學內還有教怎麼做單選的radio button與多勾選。

掛上欄位

定義好欄位,使用原文的驗證與更新functions,掛到對應的action hooks:’woocommerce_register_form’, ‘woocommerce_edit_account_form’,如名稱,分別是掛到註冊表單與個人資訊表單就可以用了。

 

更新驗證表單資料 & 訂單成立後更新資料

驗證與更新這邊沒有修改內容就不多說,倒是訂單結帳前也有欄位要填,所以在訂單成立之後得更新資料,因為原本的儲存function是以user為主,所以我另外改了一個以訂單為輸入的function,把資訊填在user/order的meta data,其實寫在user的metadata就好了,只是想說後台是讀取訂單資訊就寫在訂單內了,可以少一次query (誤)。

 

以First Name欄位替代First Name + Last Name欄位

這個部分忘記是參考哪位前輩寫的文章,總之是簡化姓名欄位為一個。

 

結論

照著開頭那篇文章可以好好的客製化需要的欄位,搭配WooCommerce文件與討論,就可以完成此客製化功能。
大概會像這樣:

[ux_slider]

[ux_image id=”311″ image_size=”medium” width=”30″]

[ux_image id=”309″ image_size=”medium” width=”50″]

[ux_image id=”341″ image_size=”medium” width=”50″]

[/ux_slider]

配色靈感網站Nippon Colors

最近「莫蘭迪色」隨著古裝戲劇的視覺美學成為熱門關鍵字,雖然灰色調「莫蘭迪色」畢竟和中彩度、低明度的中國傳統用色有所出入,但這波色調風潮仍昭示著配色是設計乃至日常生活中重要的一環。

在進行設計,尤其是製作網頁,「配色」抉擇於網站性質與其想要呈現的質感,即使主色調一致,只要使用不同的配色方式如對比色、同色系、鄰近色、互補色,都能搭配出不同的視覺效果。而面對這龐雜的色彩系統,坊間已有不少配色參考與色彩搜尋網站,例如我們上一篇介紹的Picular

而我們的設計師還有個珍藏以久(意思是有段時間了大家應該都知道)的配色靈感網站Nippon Colors http://nipponcolors.com

Nippon Colors總共有250種日本傳統色,亦即是曾在日本古典文學、和服或其他傳統藝術中出現的顏色,每個顏色都有它專屬名稱,是明度偏低,質感清雅的色彩聚集。

Nippon Colors總共有250種日本傳統色,亦即是曾在日本古典文學、和服或其他傳統藝術中出現的顏色,每個顏色都有它專屬名稱,是明度偏低,質感清雅的色彩聚集。

Nippon Colors總共有250種日本傳統色,亦即是曾在日本古典文學、和服或其他傳統藝術中出現的顏色,每個顏色都有它專屬名稱,是明度偏低,質感清雅的色彩聚集。只要點選其中一樣顏色,視窗畫面就會淡化轉換為該色,同時Nippon Colors貼心地一併呈現色彩名稱、色碼(CMYK、RGB、HEX),不管是平面或網頁設計,都能直接獲得該色資訊,進而實際應用。Nippon Colors簡潔的配置與清雅的配色,甚至有中國色網站 http://zhongguose.com/ 直接仿效整體版型,如果想參考中國傳統色,倒也不失為一個管道。

只是兩相比對Nippon Colors與中國色,「中國色」網站使用的書法字體效果,以整體視覺呈現來說:嗯….看官自行意會即可。

顏色搜尋網站Picular.co

[ux_banner bg=”269″]

[text_box width__sm=”60″ position_x=”50″ position_y=”50″]

[/text_box]

[/ux_banner]

剛剛看到顏色搜尋網站Picular,輸入兩個字元以上關鍵字就能得到相關的顏色區塊與色碼,點擊顏色會自動複製色碼。右下角則是搜尋到的原始圖檔模糊版,Logo跟Favicon也會跟著回傳的左上角第一組色碼一起變換。

但回傳色碼並不是完全正確,例如輸入blue,在各種藍色的搜尋結果中卻會出現#CF9982,類似紅泥土/銅色,從原始圖檔看起來,似乎是搜尋到牛仔褲 (blue jeans) 😆

[ux_image_box img=”271″]

 

例外情況

這是搜尋blue的結果,出現了一個紅泥土色#CF9982,相當顯眼。

[/ux_image_box]

故搜尋機制應該是藉由關鍵字尋找google圖片,並在各圖片中尋找一個代表性的顏色,估計是用圖片中佔最大比例的顏色吧。

總之是個還蠻有趣的工具,可以玩玩看!

連結:[icon name=”external-link-square-alt” style=”solid” class=”” unprefixed_class=””] Picular