iT邦幫忙

2021 iThome 鐵人賽

DAY 13
2
Modern Web

30天以設計+切版實作(Adobe XD、Bootstrap 5)系列 第 13

【設計+切版30天實作】|Day13 - [設計進階挑戰] 把原本Plans的背景圖形改成特殊形狀

設計大綱

昨天設計的「方案」區塊的背景設計是單純一個長方形+背景顏色+陰影。今天想來做點不一樣的,所以來寫個「進階挑戰」。這一個挑戰主要打算修改「方案的背景框」,從無聊的長方形,變成類似「旗子」的模樣(!!!)。而「標題、內容、顏色、陰影、高度」則是維持不變,因此今天整體來看是不會改變太多喔!下面放個原來的樣子:
https://ithelp.ithome.com.tw/upload/images/20210927/20139489IWe5segU64.png

步驟

利用布林運算

  1. 點選原本的長方形,再把其高度拉長 80px
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489lRJCZ7Z9vz.png
  2. 另外再畫出一個寬度為col-4、高度為80px的三角形
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489z0tYZNu8c6.png
  3. 把三角形放置在長方形下方
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489GLUTdi3kR4.png
  4. 全選兩個物件後,點選右上方「布林運算」的第二個
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489095XvFJCCI.png
  5. 旗子就出現啦 ?
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489YBygFWW2Q1.png

完成剩下的形狀,並調整間距

  1. 重複上面的步驟,把其餘兩個方案也作修改
  2. 記得除了「背景」外,其他東西不要動到喔!
  3. 調整「方案們」與下方的間距維持96px,就完成了!
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489mHNo77Fjh2.png

結論

https://ithelp.ithome.com.tw/upload/images/20210927/20139489gjzkaET9ZX.png
布林運算(Boolean algebra)其實蠻好用的,它是數字符號化的邏輯推演法,在Adobe XD裡提供了四種模式(就是剛剛提到的右上角那四個icon),分別是並集、交集、差集A-B、差集B-A。
在設計時,很多時候都可以透過這工具去畫出更多不一樣的圖,這樣就不用很辛苦地去用鋼筆工具畫圖後才發現畫得不對稱(-v-;)!!
現在只是小小的更動了背景的框框,看起來就變得更生動了一點了,這就是設計的好玩之處~
那明天再來設計其他區塊吧!/images/emoticon/emoticon08.gif


上一篇
【設計+切版30天實作】|Day12 - 怎麼讓使用者選中您想要他選的Plans設計?
下一篇
【設計+切版30天實作】|Day14 - 簡約CTA的用處及設計的注意事項
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言