2013 年八個網站設計趨勢
自從 1993 年第一個網頁出現在地球表面後,算算也過了 20 年了。這 20 年來,網頁設計從樸實無華,轉向以 Flash 為主的互動設計,又回頭往「簡約」風走。讓我們來看看,2013 年流行的網站設計趨勢為何?
1. 單一頁面網站:
將所有資訊全數集中於一頁、讓使用者一直往下捲就可以看到所有內容。以前會因為一次塞太多東西,網頁載入太慢,怕使用者沒耐心等,所以倡議網頁一頁不要超過兩個 PgDn。現在由於網路速度快,又有 AJAX 這種部分載入功能,為了讓使用者不必按「下一頁」,又走回「單頁風格」。
2. 大照片
文字太單調、Flash 太沈重。所以現在流行介於兩者中間的「照片」,將它放到很大,作為網頁主體。不僅美觀,也夠吸睛。
3. 方塊狀設計
就是類似 Windows 8 那種拼貼風。
4. 大圖示
如果你有 3 個要點要講,何不設計三個大圖示,讓人一目了然呢?
5. 簡單
像 Google、Dropbox 首頁,除了必要的功能外,提供大量的留白。不僅讓使用者一下子就了解你的網站是做什麼的,也能簡化使用上的困難度。
6. 適應各種螢幕尺寸
這個是因應平板與手機瀏覽網站的需求而興起的。作法是準備好幾套 CSS 排版版型,偵測使用者螢幕大小後分別套用之。
7. 視差設計(Parallax)
此類型網頁運用兩個或兩個以上的背景或物件,以不同速度移動,造成不同感受的視覺體驗,打破線性單調的網站呈現方式,是目前接受度頗高的設計趨勢。
8. 字體造型設計(Typography)
網站設計時運用特殊字型,不但視覺感較為強烈,也較能吸引網友目光。
原文連結在此:
我們喜愛的網站設計趨勢(上):http://www.bnext.com.tw/focus/view/cid/103/id/27278
我們喜愛的網站設計趨勢(下):http://www.bnext.com.tw/Article/view/cid/103/id/27289
css 特殊 字型 在 紀老師程式教學網 Facebook 的精選貼文
30 個讓你的網站看起來更優的點子
做網站的朋友,每天大多竭盡心思想著如何把網站變得更好看,但又不致於讓伺服器負擔太重。這裡有一篇「30 個立即可用的網站好點子」給大家參考。包含:
1. 使用者體驗測試
2. 適度的留白
3. 適當的字體
4. 以 CSS3 增加陰影,營造層次感
5. 添加背景紋理與樣板
6. 用 CSS3 替背景披上漸層色
7. 善用 Twitter 的 Bootstrap UI 函式庫
8. 善用 HTML5 Kickstart UI 函式庫
9. 使用 jQuery UI
10. 使用精美的全螢幕背景圖片
11. 以「圖示」(Icon)來代替單調的「選單(Menu)」
12. 常常更換整個網站的基礎色調
13. 盡可能將老舊瀏覽器的支援考慮在內
14. 善用搶眼的特殊字體營造網頁風格
15. 支援「社群分享」
16. 開放讀者討論
17. 較寬的「頁腳」設計(目前流行)
18. 使用相對大小來決定照片大小(如:以「100%」取代「180px」)
19. 提高「選單」的操作性(如:增加「首頁 > 產品 > 相機 > CM-100」這類超連結在頂端)
20. 為「照片」與「影片」以 HTML 屬性標籤添加關鍵字,方便搜尋引擎尋找
21. 別把選單項目埋得太深,讓使用者找不到
22. 增設「回到頁面頂部」(Back to Top)連結
23. 記得以 CSS 設定 與
標籤,使之易讀明顯
24. 記得增加圖片的 width 與 height 屬性
25. 以 alertify.js 這類函式庫,製作彈出式視窗
26. 版面要能適應「桌機」或「手機」等不同螢幕大小
27. 友站連結
28. 善用看起來很像圖示的字型
29. 圖片框加上陰影,營造層次感
30. 盡量以 CSS 代替 HTML 標籤排版,以利輕鬆更換版面
原文連結如下:
http://www.hongkiat.com/blog/ideas-to-nicer-websites/