iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Modern Web

不只是寫寫CSS,切版概念30天系列 第 9

DAY09 - 跨專案常見的切版共通問題

  • 分享至 

  • xImage
  •  

1. 需求面

1.1. 切版的依循標準無法非常具體

什麼時候該照設計圖稿?什麼時候應該要Follow我們自己的原則?
在沒有Guideline的專案,或沒有Guideline的各功能頁版型裡,都照個人感覺

1.2. 已經切完版才發現各種狀態的缺漏要補或要改

  1. 資料量的最大最小值
  2. 無資料的情況

2. 技術面

2.1. Layout

  1. 最小高
  2. footer飛上來
  3. 無資料的顯示畫面

2.2 文字

  1. 文字噴出去未折行 -> 若強制不折行應該超過某個寬要隱藏起來,不然就會噴出去
  2. 文字需要line-height,至少全站要給normal

2.3 Img

  1. img 的max-width: width:
  2. img 不寫死高

2.4 a

  1. 連結需要小手指

2.5 版型

a. Banner
  1. 需注意1920的主視覺
b. TAB
  1. 單個tab折行位置
  2. 多個tab的顯示方式?

2.6 資料量影響版型

  1. 左右兩塊的等高
  2. 資料多的時候跑版
    • 文字太多插出去
    • 文字太多,平行的畫面寬度跑掉
    • 文字太多,版型高度不夠 (版型鎖高)
  3. 資料整塊沒有的時候跑版
    • 整塊要消失? 還是保留原本的空間?
  4. 一排多個,變少時要如何呈現為考量
    • 一排多個,變少要置中還是置左
  5. 垂直排列的項目,其中一個區塊不見跑版
    • 整體應該是垂直置上對齊
    • 其中一個區塊不見時,應該要保留其空間,或是整體一起向上

2.7 間距

間距到底該下在哪裡才能完美的符合規則?

2.8 其他

  1. 置中 - icon 文字 垂直置中 -> 很容易沒置中 (應該有一個絕對致中的方式)
  2. scrollbar 要在邊邊 --> 不能用layout撐padding,要用內容撐padding

2.9 需他人協助

  1. icon 模糊問題
    * 狀況1 : png 太小 -> 改用 svg or 出 3倍
    • 狀況2:svg 還是糊的 -> 請設計用 ai 看 圖片上色可能是用遮色片 -> 改掉即可

3. 設計面

  1. 漏了小版的麵包屑
  2. 小版多層的設計方式
  3. 收合menu的問題:收合本身的項目不能是一個節點
    • 作法1. 收合展開的第一個變成該節點的項目,連結出去
    • 作法2. 在後面加上另一個小icon 表示連結出去 (不建議)
    • 可思考有沒有其他做法

上一篇
DAY08 - 切版必學技巧 : 熟知不同CSS使用時機與 - 以「等高」為例
下一篇
DAY10 - [中場加映] CSS Methodology - Atomic CSS & IT CSS
系列文
不只是寫寫CSS,切版概念30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言