【心得】現代化網站技術分享日 - 現代網頁設計趨勢觀察之心得。 | 學徒工坊 - 點部落

2016-03-27

【心得】現代化網站技術分享日 - 現代網頁設計趨勢觀察之心得。

887
0
2016-05-30

　　就讓我們一起來關心 2016 年現代網頁設計的趨勢吧！

　　在 2015/12/22 由微軟與 iThome 主辦的現代化網站技術分享日，請到興趣使然的熱血前端開發者 & 講師李建杭（Amos）來為大家分享現代網頁設計趨勢的觀察。

　　首先，在分享 2016 年的趨勢前先跟著講師的腳步來回顧 2015 年。

那道閃光（Adobe Flash）真的離開我們了。
　　一些現代的瀏覽器 Mozilla Firefox、Google Chrome 及 Microsoft Edge 都相繼不支援 NPAPI Plugins了^[1]^[2]，Flash Professional 也將改名為 Adobe Animate^[3]。
最友善的瀏覽器（Internet Explorer）被宣告了死期。
　　微軟 2016/01/12 停止支援舊版 Internet Explorer^[4]。
JavaScript 突然稱霸了網路世界。
　　我們可以看到很多東西都是 JavaScript 做的，像是：Node.js、jQuery 等。
工具、方法、技術越來越多樣。
　　像是編輯器、Framework 也越來越多。
頁面設計都視差了。
　　可以看到現在有越來越多這種視差滾動（Parallax Scrolling）^[5]的設計了，這也是個趨勢
可以用中文寫 CSS 了。
　　講師開發的 Sublime Text Plugin：ST-iconFont-snippets Snippet for Sublime Text 2 & 3^[6]^[7]^[8]。

　　那麼 2016 年呢？

視覺 & 互動設計。
- 扁平化設計當道。
- 網頁總要放食物。
  　　選單的按鈕「」有被稱為漢堡、三明治或三條線。
- 圖示 ↔ 字體。
  　　像是 Font Awesome，圖示放大也不會失真。
- 陰影不死，只是變長。
  　　扁平化的設計使得陰影變少，但還是有只是變長了。
- 鮮豔的色彩。
  　　現在的網頁顏色都還蠻鮮豔的。
- 喔耶！是漸層！
  　　像是 iPhone 的圖示也是用漸層色的。
- 極簡版面。
  　　現在的版面都是格線系統居多，如 Bootstrap、Modern UI。
- 卡片式設計。
- 動畫、動畫、給我動畫。
  　　可以用 JavaScript 或 CSS3 來做動畫，而動畫影響效能的狀況還是要取決於網站的流量。
網頁趨勢的演進。
　　網頁設計也是有流行趨勢。
百年傳統，全新感受。
　　早期動畫我們會用 Flash 來做，現在我們會用 JavaScript 和 CSS3 來做。
新技術？老技術？
　　不管是新技術或老技術都要去接觸，因為有些新技術是基於老技術開法出來的，就像是 jQuery，總不能說只會 jQuery 而不會 JavaScript。
CSS VS. JavaScript
　　在動畫的部分，簡單的可以用 CSS 來做，因為 CSS 動畫比較吃效能。
持續的學習新技術或基礎技術練到滿等？
　　還是需要持續的學習新技術並精進基礎的技術。
怎麼判斷網頁技術值不值得公司導入學習？
　　沒有值不值得，只有需不需要。看公司有沒有這個需求，有這需求就去學習、去開發。
臺灣對前端設計師的職稱定義？
　　大致分為二種，一種是視覺加切版加程式不需要串 API，另一種是串 API。
如何面對這整個技術上的變化？
　　大約每半年就有新的東西出現，要追技術真的追不完，還是看需求。而就現在的趨勢來看也都是追求要快速產出越快越好，先把東西做出來給他就好。
RWD VS. App
- RWD
  - 跨裝置
  - 統一維護
  - 修改快速
  - 技術層面較低
- App
  - 裝置分開開發
  - 分別維護
  - 修改緩慢
  - 技術層面較高
UX
　　很重要也需要視覺設計師、程式設計師等很多人都來做，但要做到什麼程度就要看成本考量。
操作流程改善。
　　不要說這不能做那不能做，而是要找解決方案怎麼樣做比較好。
網頁互動改善。
　　很需要，而 CSS 動畫在這塊加了很多分數。
動畫設計組件化。
　　如何在開發上如何加快開發的速度。
開發過程／工具改善。
　　如何讓我們整個設計能夠加快。像是講師開發的 Sublime Text 外掛 iconfont snippets 一樣能夠加快圖示的搜尋與程式碼片段的插入。
永遠保持熱血。
　　講師利用通勤的時間來撰寫程式，經常寫到不想下車。
參考網站
　　下列是有關網頁設計的相關網站提供參考
- Smashing
- awwwards
- UXPin