【设计+切版30天实作】|Day14 - 简约CTA的用处及设计的注意事项

设计大纲

设计CTA的用意一方面是让结尾不会来得太突然,另一方面是想在网页的最後再来一个「Call To Action」。

由於上面已经有蛮多不同样式的设计区块了,所以CTA就简单带个标题、email的input就好!CTA一样会是以满版的方式去设计,背景颜色会使用Primary (#9B3C05),文案颜色则会使用Secondary (#FDFCFC)。

Grid System的分配方面,左方会是标题,右方会是Input。这边还是要再提醒一下大家:「记得不管目前文案字数为多少,都要多留位置唷!」,因为你不会知道你*8主管或是G*客户会不会突然说要多加字或是什麽的(xxxxxxxx)。所以,这边的分配将会是「标题占6栏,Input占6栏」。

步骤

满版背景

  1. 在画布上画出一个满版宽的长方形,高度先不用管
  2. 颜色为Primary (#9B3C05)
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489zDKp1s0aGN.png

标题

  1. 文字框出6栏宽,并输入标题文案
  2. 调整文字颜色为Secondary (#FDFCFC)
  3. 调整文字大小为24px
  4. 调整文字字重为Normal
    https://ithelp.ithome.com.tw/upload/images/20210927/201394894C4gQDVtaf.png

Input

  1. 画出只有Border的长方形,宽度先调整成占4栏宽(因为目前不知道Button会占多少)
  2. 调整Border颜色为Secondary (#FDFCFC)
  3. 在input内输入placeholder的文字
  4. 调整placeholder的样式
    • 文字大小:16px
    • 文字字重:Regular
    • 文字颜色:Secondary (#FDFCFC)、60%透明度
      https://ithelp.ithome.com.tw/upload/images/20210927/20139489lW9EC3zsFz.png
  5. 调整placeholder的Margin-y为12px、Margin-left为24px
  6. 这时候Input的高度就出来了?

Button

  1. 因为为了统一,所以整个网页的Button样式都会一样(颜色可以变,但Padding最好不要),所以这边先把上面的Button复制贴上
  2. 调整Button的文字颜色为Primary (#9B3C05)
  3. 调整Button与左边Input的间距为16px,这样左边的Input长度就出来了*这边的input与button之间没有完全对齐Grid System是允许的,因为它们的外面已经有对齐col-6了,因此里面就不用了喔!
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489F0FdM27ANh.png

调整间距

  1. 把标题、input、button群组起来
  2. 上下间距 96px就可以了
    https://ithelp.ithome.com.tw/upload/images/20210927/20139489XS8s5ZPlUw.png

结论

因为已经到了设计的倒数第二个区块了,所以要用到的技巧都是之前有提到过的东西,但这边还是会再三强调要注意如何对齐Grid System,以及空间分配唷!
那明天再来设计最後一个区块吧!/images/emoticon/emoticon08.gif


<<:  第13车厢-table界的神器!DataTables介绍篇(3)

>>:  Day 14 -资料查询语言 LIKE !

Day 29. F2E-完善过渡动画

昨天後来在看效果时,有发现过渡动画的元素已经完全超出卡片组件的范围了,这个不是我们想要的效果 理想...

Day03: 03 - 页面刻划(2) - 登入、注册、订单

Hi,こんにちは,我是Charlie! 在Day02当中,我们开始了新专案,并且刻出了首页。 今天,...

[Tableau Public] day 26:台湾姓氏分布分析-4

今天我们来做各姓氏人口数分布地图,新增一张工作表名称为「107年6月_台湾各姓氏人口数分布地图(预设...

[ Day 22 ] - 阵列资料处理 - forEach

阵列资料处理 - forEach 会将阵列中的每一个元素资料进行处理 使用范例 let dataLi...