網站設計風格指南 WebSite Styles

2022-01-21

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

說明

版面

「作業系統縮放」與搭配「瀏覽器縮放」以及捲動軸的出現下螢幕寬度 pixel 對照表。

Bootsrap 5 的 Breakpoint

Bootstrap 5 的 Container 寬度

在寬度充足的情況下，container 會是下列表格的固定寬度。

在寬度不足的情況下 cotnainer 會是 100% 寬度，另外 fluid 永遠為 100% 寬度。

使用者體驗

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

設計的層級

• Elements
• Compoenents
• Section Components
• Layout

文字 Font

不要使用全黑 (#000) 的顏色，優雅的使用淺黑色 (#3e3e3e)

建立固定的字體，分為襯字類與非襯字類

• Consolas
• Roboto
• cascadia-code
• Noto Sans TC

⭐CSS | Typography

馬上用粉圓字體

: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

圖片 Image

💡 使用顯示圖片兩倍 height, width 的實際圖片，以免使用者使用的是 High-Resolution 的顯示裝置，解析度不足的圖片會變得模糊。

unsplash

stockAI

Pexcel 圖庫

BURST 圖庫

Pure PNG

Librestock

CC0 免費圖庫搜尋引擎

Icons

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

SVG Copy

tablericons

heroicons

Google Fonts

Html Tag Insert

ionicons

Bootstrap Icons

Human Pictogram

Illustration

插圖適合活潑的網站

undraw

插圖屋

Open Peeps Generator

avataaars generator

SOCO-ST 插圖庫

Loose Drawing 插圖庫

恰到好處的插圖庫

shigureni 插圖庫

Linustock

ILLUST NAVI

活潑化應用

Clip-Path Maker

綜合設計工具 10015.io

Favicon

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

favicon.ico

favicon.io

Ideas

Behance

Drribbble

顏色 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%;
}

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 Btn

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

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

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

Difference Between Viewport, Screen Resolution, DPR, and PPI for Responsive Web Development

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