今天，我要來介紹Even大大所講的「2012網頁技術濃縮咖啡」，當然其中也穿插一些小編自己的小小經驗。
以前我們在做網頁的時候，不外乎就是先確定瀏覽器的大小以後，立馬開啟繪圖軟體，設定相同的尺寸，等待客戶確認以後，就切版做成網頁。
以前用固定的寬高，問題在哪裡??
1. 視覺不等於規格
2. 互動性差
3. 解析度固定
4. 未來前途堪慮
現在平板電腦、智慧型手機滿街流竄，
Responsible design已經是現在進行式了。
1. Agile(敏捷式)
2. 工程需要
3. 更多解析度、更多裝置
4. 設計擴充彈性高
所以，網站不是畫布，不是魔術，而是資訊流!!
Okay，前言講完了，首先來破題一下
2012-2013網頁設計應該要注意的事情
1. 使用SASS/SCSS
2. 顏色與形狀
3. RWD圖與文
4. Web字體
5. Hi-DPI設計
接下來一一的為大家介紹細項
1. 使用SASS/SCSS
◆ 原生的CSS有什麼問題
- 沒有巢狀寫法
- 沒有變數
- 沒辦法計算
- 沒辦法寫fuction重複使用
- 沒有方便的ie-hach解決方案
◆ 為什麼要用SCSS
- 有巢狀寫法
- 有變數
- 可以計算
- 可以寫mixin重複使用
- 有方便的ie-hach解決方案(by compass)
Even有推薦使用Fire.app撰寫SCSS
http://fireapp.handlino.com
menubar背景程式
幫你把SCSS轉為CSS
還有其他哩哩摳摳web設計很好用的功能
SCSS
http://sass-lang.com
Compass
http://compass-style.org
Okay, 以上不負責任抄Even大大的，等待小編學習完以後會再貼一篇不負責任的入門文。
2. 顏色與形狀
看完這幾張圖有什麼感想呢???
簡而言之，當方形遇到圓形，假設是置左對其，但是圓角部分也要再往左3~5px左右！
為什麼呢?!!!!!!因為這是視覺的原因拉，像是上方有一張是正方形、圓形、三角形把在一起時，
間距其實是一樣的，但是因為人視覺會不自主地取較遠的距離，所以才會有這樣的錯視。
3. Web字體
為什麼中文字這麼醜?!
客戶端的電腦字體有限- win預設－新細明體
- mac預設－黑體TC
各平台不統一
字體品質差
解決方法
Flash 手持裝置大抵上支援Flash (Orz)圖片 伺服器負擔大、缺乏彈性
Canvas 設計師不會用 (抱歉)
@font-face 設定複雜、自行授權，而且檔案超大(尤其是中文字)
Okay, that me show you some webfonts website.
Typekit - 歐文
http://typekit.com
Justfont - 中文(繁+簡)
http://www.justfont.com
Typesquare - 日文
http://typesquare.com
Typekit - 歐文
http://typekit.com
Justfont - 中文(繁+簡)
http://www.justfont.com
Typesquare - 日文
http://typesquare.com
4. Hi-DPI & Retina display
HiDPI到底有什麼好?!
新潮
圖片顯示更清晰
更容易閱讀的文字
支援HiDPI有什麼不好?!
圖檔變大了
舊瀏覽器怎麼辦?
爛技術害死你的user
阿阿阿阿阿阿~~~但是今天不講圖的部分
支援HiDPI的其他選擇?!
CSS3
Web fonts
SVG
1. 盡量使用CSS3
圓角 border-radius
陰影 box-shadow, text-shadow
漸層 linear-gradient, radial-gradient
2. Web fonts
特殊的字體使用web fonts，不要用圖片
icon fonts
缺點：單色
3. SVG (SVG Tiny)
向量檔案，放大10X也OK的!!!!
可彩色
Illustrator製作轉存即可
SVG Tiny - 不支援模糊、陰影... 等較為複雜的屬性
BUT!
IE6, 7, 8、Android 2, 3不支援 :((
沒有留言:
張貼留言