Lazy loaded image
側邊欄編排小攻略
00 分钟
2022-9-19
主題分類
版面編排
作者
晉博
晉博
最後更新日期
Sep 19, 2022 10:10 AM

▊ 一般側邊欄

1️⃣ 一般：🤙Callout

Callout 側邊欄優點與缺點
優點
  • 可以製作同一個頁面跳轉的按鈕。
  • 有間隔稍微美觀一點（因人而異）。
缺點
  • 比較佔空間。
  • 要多一個執行步驟去複製網址，然後貼上。
  • 如果沒注意 Icon 會跟頁面不一致。
 

2️⃣ 一般：📄Page

▊ 融合式側邊欄

1️⃣ 融合：Callout + Page（明確區分主頁面＆子頁面）

Callout + Page 側邊欄優點與缺點
優點
  • 很明確哪一個是主頁面和子頁面。
缺點
  • 強迫症患者不適合用，因為沒有對齊。
💕
個人興趣

2️⃣ 融合：Callout 方框內含 Page（明確區分主頁面＆子頁面）

Callout 方框內含 Page 側邊欄優點與缺點
優點
  • 很明確哪一個是主頁面和子頁面。
缺點
  • 如果要加「色塊」整個 Callout 都會填上顏色。
範例
📄
個人頁面
📄
個人主頁
💕
個人興趣
🥘
吃吃吃吃
😴
睡睡睡睡

3️⃣ 融合：Toggle + Callout（適合多階層運用＆省空間）

Toggle + Callout 側邊欄優點與缺點
優點
  • 可以做很多很多很多階層。
  • 節省空間。
缺點
  • 要多一個動作打開它。
  • Toggle + Callout 視覺上沒那麼好看。
📄 個人頁面
階層二
💕 個人興趣
🥘
吃吃吃吃
😴
睡睡睡睡

4️⃣ 融合：Toggle + Page（適合多階層運用＆省空間）

Toggle + Page 側邊欄優點與缺點
優點
  • 可以做很多很多很多階層。
  • 節省空間。
  • Toggle + Page 視覺效果比 Toggle + Callout 還要好。
缺點
  • 要多一個動作打開它。
 
個人頁面
階層二
個人興趣
 

5️⃣ 融合：引言 + Page（就是旁邊多一條線）

📄 個人頁面

6️⃣ 融合： Bulleted list + Page （可以走極簡側邊欄（？）

方案一：適合強迫患者
  • 個人頁面
方案二
  • 個人頁面
    極簡側邊欄
    • 個人頁面
    • 遊牧小豬
    • 遊牧小豬
    • 遊牧小豬
     
    上一篇
    读书盘点｜2022年世界读书日
    下一篇
    如何发掘自己的潜力