Day 10 Prototype 制作 - 版面、字体、间距、图示设定小技巧分享

今天用这个阳春的版面来介绍版面、字体、图示还有间距的设定。刚刚跟接案的客户谈完流程，也收了头款，大家敲碗的话也可以来分享一下接案。

版面 layout

虽然我第一份工作是网页设计师，但因为没有手刻过网页，其实一开始版面设定造成我很大的困惑。

大部分的网站都是将内容集中在中间，内容宽度大概是 1000 - 1300px 左右都有，比较主流的可能是 1100 - 1200px 。如果你有兴趣的话，可以使用 devtool 检查工具去看其他网站的配置，挺有意思的。

比较麻烦的是，遇到不规则的网页会手足无措XD

比如说底下是最近为气象局做的，如果真要切版的话，应该要用百分比来计算而非 px。不同的版面会有不同的配置模式，印度气象局官网我应该会采用最典型的 1200px 。

因为工作还包括切版，所以这个设计真的是自己整自己XD

图示 icon

icon的部分，这是很有趣的一块，我将它做简单的分类，这些icon都是从这个网站搜集的，有兴趣可以参考一下。
https://www.flaticon.com/

间距 spacing

spacing 当初也一直困扰我，之前都是凭感觉做设计XD

这是从一个我很喜欢的 UI 设计师 medium 文章看到的，觉得受用无穷。用朋友亲疏关系解释，突然觉得莫名地亲切好懂许多。
https://tessgadd.medium.com/?p=8754c365dfe5

字体 font

再来是字体。底下提供的为通用准则，但字体大小还是要根据不同网页类型做决定。我通常会把不同的字体加在 character styles ，有些人会给他命名。

文字 12px 网页中最小使用的字级
文字 14px
文字 16px 现今网页常使用的字级大小
文字 18px 现今网页常使用的字级大小
文字 20px
文字 24px 一般附标题使用之字级大小
文字 26px 一般附标题使用之字级大小
文字 30px
文字 36px 大标题可使用之字级大小
文字 48px
文字 60px

16px = 1rem（浏览器预设）

文字 12 px = 0.75 rem 最小的
文字 16 px = 1 - 1.2 rem 常用的
文字 24 px = 1.5 - 2 rem 附标题
文字 36 px = 2.25 - 2.5 rem 大标题
文字 48 px = 3 – 3.75rem 超大标题

工作区域

经过多个午休的努力，整个工作区域大概是长成这副德性，有点儿杂乱，但其实也颇像我真实的工作情境XD
如果有什麽好的工作区域配置也请告诉我吧。

印度气象局

工作某项目

今天先这样。下一篇还在难产，拜拜～