網站設計風格指南 WebSite Styles


  1. 說明
    1. 使用者體驗
    2. 設計的層級
  2. 文字 Font
    1. 字體大小 Font Size
  3. 圖片 Image
    1. Icons
    2. Illustration
    3. 活潑化應用
    4. Favicon
  4. 顏色 Color
  5. CSS Recipes
    1. Blur 濾鏡效果
      1. 圖片灰階化處理
    2. Link
    3. Link Light Up Effect
    4. Imgae Hover Zoom
    5. Heading Style
  6. Responsive Design
    1. Media Query
    2. 常見裝置的 CSS Width & Height

整理學習與經驗上,網站設計的風格指南。

logo

說明

使用者體驗

Jakob Nielsen 十項使用者體驗設計優化原則

設計的層級

  • 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

CSS | Typography


字體大小 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 的顯示裝置,解析度不足的圖片會變得模糊。

unsplash

Icons

好 Icons 是配角,不搶走主角的風采

SVG Copy

Html Tag Insert

Illustration

插圖適合活潑的網站

undraw

插圖屋

Open Peeps Generator

avataaars generator

活潑化應用

Clip-Path Maker

綜合設計工具 10015.io

Favicon

網站設計的小細節也不錯過。

favicon.ico

favicon.io

顏色 Color

色階組 Tint & Shade

jonas.io Resources

color.sdwh

CSS Recipes

Blur 濾鏡效果

CSS | Filter

Work With Teams
<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%;
}

隨手的連結修飾刀 🪒

.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 Btn

使用相同的 Color RGB,但利用透明度的差異來達到點亮的效果。

light-up-effect{
  color: rgba(218, 165, 32, 0.8);
}
light-up-effect:hover{
  color: rgba(218, 165, 32, 1);
}

Hello World

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;
  }
Heading

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

重新認識 Pixel、DPI / PPI 以及像素密度