EZTABLE IDEAS 是 EZTABLE 成員揮灑熱情和大家分享專業及創意的網誌。 EZTABLE 讓消費者 24 小時都可以在網路訂位全台灣最優質的餐廳,同時提供餐廳經營者 e 化的訂位管理系統 (雲端、iPad、智慧型手機)

Web Design自適應網頁設計

一月 09 2013 Published by under Design, EZ教學

最近工作的關係又開始在研究所謂的『自適應網頁設計』,但第ㄧ次看到這真的搞不清這到底是什麼,但以英文來說就是Responsive Design (這樣容易懂多了),字面解釋就是讓網頁呈現適當的版面樣式。

在這裡提供一些自己的經驗和技巧:

1.  PC First:如果你要做 PC / Mobile 雙版本的網站。先設計好 PC 版的,把架構和layout都先設計好,先想好那個區塊在Mobile上不需出現或是需要改變size等方向,在配合media queries 的@media only screen and (max-width: 767px) 去做最小的尺寸 for Mobile。而iPad的版本就更好設計了,只需動小部份的CSS就可以非常的friendly。

2.  盡量讓Mobile版本不要用有『輸入』的功能,只唯讀。寫入會牽涉到layout的動線及頁面的跳轉,會大幅降低 user experience,當userㄧ跳走就很難在回頭了。Mobile版畢竟不是app,所以UI的設計也是非常重要,某些元素或圖片的配置要懂得取捨。

3.  Mobile版本對圖片的大小非常有限制,media queries 也只能配合去設定部份的CSS,所以如果可以用JS去控制再不同的size上去設定不同尺寸的圖片這樣最好,但還是必須配合版面。

4.  基本上讓裝置成為一個介質,使用者才是真正的主角。

 

介紹幾個我個人覺的還不錯用的網站:

GitHub的設計總監 Kyle去年發表的文章   http://warpspire.com/talks/responsive/

*  Responsive Web Design Testing Tool. Test your own site~ 貼上網址就可以方便的測試看看。 http://mattkersley.com/responsive/

陳列了好多 Responsive Design 的網站,同時提供不同尺寸的預覽圖,如果你的設計需要 Responsive Design 絕對不能錯過喔! http://mediaqueri.es/

Twitter 所釋出的前端框架系統,同時包括格線系統、UI 元件和許多 Javascript 操作物件,無論是製作雛形還是正式產品都很好用喔!http://twitter.github.com/bootstrap/

FOUNDATION 3 The most advanced responsive front-end framework in the world. http://foundation.zurb.com/

Desiring Clicks 幫設計師們整理了許多大家常常會用到的工具喔!http://dclick.cc/web-designer-tools/

(from webdesignerwall.com)參考資料和圖片webdesignerwall.com

希望可以幫助ㄧ些外星球的朋友們。

WEB DESIGNER

Grace Ku

 

Related Posts Plugin for WordPress, Blogger...

No responses yet

發表迴響