整理學習與經驗上，網站設計的風格指南。
說明
使用者體驗
設計的層級
- Elements
- Compoenents
- Section Components
- Layout
文字 Font
不要使用全黑 (#000) 的顏色，優雅的使用淺黑色 (#3e3e3e)
#000
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum odit alias maiores accusantium perferendis excepturi laboriosam sint autem deserunt eius nemo cumque id sunt natus, quibusdam assumenda nobis aliquam delectus.
#3e3e3e
lLorem ipsum dolor sit amet consectetur adipisicing elit. Eum odit alias maiores accusantium perferendis excepturi laboriosam sint autem deserunt eius nemo cumque id sunt natus, quibusdam assumenda nobis aliquam delectus.
建立固定的字體，分為襯字類與非襯字類
- Consolas
- Roboto
- cascadia-code
- Noto Sans TC
馬上用粉圓字體
:root {
font-size: 12px;
}
@font-face {
font-family: 'jf-openhuninn';
src: url('https://cdn.jsdelivr.net/gh/justfont/open-huninn-font@master/font/jf-openhuninn-2.0.ttf') format('truetype');
}
body {
font-family: 'jf-openhuninn', sans-serif;
color: #2e3339;
background-color: rgb(245, 247, 243);
}
h1{
color: #34495e;
}
p{
text-indent: 2em;
line-height: 1.75em;
text-align: justify;
}
字體大小 Font Size
| FontSize | Px | Em |
|---|---|---|
| Main Heading | 32px | 2em |
| Heading | 24px | 1.5em |
| Sub Heading | 19.2px | 1.2em |
| Text | 17.6px | 1.1em |
| Metadata | 16.8px | 1.05em |
| Default | 16px | 1em |
圖片 Image
💡 使用顯示圖片兩倍 height, width 的實際圖片，以免使用者使用的是 High-Resolution 的顯示裝置，解析度不足的圖片會變得模糊。
Icons
好 Icons 是配角，不搶走主角的風采
SVG Copy
Html Tag Insert
Illustration
插圖適合活潑的網站
活潑化應用
綜合設計工具 10015.io
Favicon
網站設計的小細節也不錯過。
顏色 Color
色階組 Tint & Shade
CSS Recipes
Blur 濾鏡效果
<div style="position:relative;max-width: 500px;margin: 0 auto;">
<img src="img.jpg" style="width:100%; filter: opacity(50%)">
<div class="heading">Work With Teams</div>
</div>.heading {
font-size: 28px;
background-color: #eaeaea;
position: absolute;
padding: 2%;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}圖片灰階化處理
相較於使用 grayscale 使用下列技巧可以達到同色灰階的效果
.grayItem {
filter: brightness(0);
opacity: 50%;
}Link
隨手的連結修飾刀 🪒
.nav-link:link, .nav-link:visited {
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s;
background-color: #ffd9cb;
color: #333;
}
.nav-link:hover, .nav-link:active {
background-color: #e67248;
color: #fff;
}
.btn-noname {
border-radius: 3px;
padding: .5rem .8rem;
border: 0px;
}Link Light Up Effect
使用相同的 Color RGB，但利用透明度的差異來達到點亮的效果。
light-up-effect{
color: rgba(218, 165, 32, 0.8);
}
light-up-effect:hover{
color: rgba(218, 165, 32, 1);
}Imgae Hover Zoom
.img-container{
overflow: hidden;
width: 450px;
}
.img:hover{
transform: scale(1.3);
transition: all 1s;
}
.img:not(:hover){
transition: all 1s;
}Heading Style
.heading-style{
border-left: 6px solid #20c997;
padding-left: 6px;
}Responsive Design
Media Query
Media Query 設計策略，使用 max-width 讓指定寬度以下的元素符合 CSS 規則，因此 CSS Code 順序要由最大包容到最小包容 (1200px 到 768px)。
.style {
/* style for all sizes */
}
@media (max-width: 1200px)
{
/* style for desktop */
}
@media (max-width: 992px)
{
/* style for tablet */
}
@media (max-width: 768px)
{
/* style for mobile */
}裝置所具備的寬高度 Pixel 與 CSS 所使用的寬高度 Pixel 不見得是 1:1，可以使用 mydevice.io 來確定，一般的 PC 螢幕大多為 1:1，但例如 iPhone 12 則是 3:1，因此解析度 1170x2532 px 的 iPhone 12 對應為 Viewport Size 為 390x884 px。這個比率在 mydevice.io 稱為 CSS pixel-ratio 而一般瀏覽器常見的縮放動作則稱為 JS pixel-ratio。
mydevice.io 對於新裝置的更新速度較慢，另外可以參考 yesviz 來確認新發行裝置的 Viewport Size (CSS) 與其實際的 Resltion。
常見裝置的 CSS Width & Height
| Device | CSS W | CSS H | Res W | Res H | Ratio |
|---|---|---|---|---|---|
| iPhone 12 | 390 | 844 | 1170 | 2532 | 3 |
| iPad Pro 11 | 834 | 1194 | 1668 | 2388 | 2 |
| iPhone 13 Pro Max | 428 | 926 | 1284 | 2778 | 3 |
| iPhone 13 Pro | 390 | 844 | 1170 | 2532 | 3 |
| iPhone 13 | 390 | 844 | 1170 | 2532 | 3 |
| iPhone 13 Mini | 360 | 780 | 1080 | 2340 | 3 |
Difference Between Viewport, Screen Resolution, DPR, and PPI for Responsive Web Development