Welcome! 登入 註冊
美寶首頁 美寶百科 美寶論壇 美寶落格 美寶地圖

Advanced

[講義] 網站設計新技術需求

[講義] 網站設計新技術需求

分類標籤: 網頁設計
網站設計新技術需求

[hr]
1.網站版面需有響應式設計(Responsive Web Design),使不同瀏覽裝置皆可獲得最佳之瀏覽體驗。
http://mediaqueri.es/


[hr]
2.導入新資訊技術及網站設計思維,如長網頁(Long Page Design)、資訊式頁尾(Informative Fat Footer)、巨型導覽選單(Mega Menu)、扁平化介面設計(Flat UI Design)等,提升網站操作便利性及增加視覺美感。

1. 長網頁(Long Page Design)


10 Great Single Long-Page Website Designs
http://aptdesignonline.com/10-great-single-long-page-website-designs

26 Beautiful Landing Page Designs Critiqued with A/B Testing Tips

Creating Long Scrolling Pages
http://www.wix.com/blog/2013/12/long-scrolling-web-design/

[hr]

2. 資訊式頁尾(Informative Fat Footer)


> 讓使用者不需要捲回頁面上方***。
> 作為輔助導航的使用 – 絕對不會當成主要導航來使用。
> 作為網站架構的捷徑。
> 你的網站許多部分可能有較長的名稱時,也適合使用。
> 不管用戶正在訪問哪些頁面,都要顯示的功能。
> 常用的連結,但不屬於主要導航中。
> 視覺上對於整個網站主要內容的理解。

http://ui-patterns.com/explore/collections/fat-footer

http://www.about.com/

[hr]

3. 巨型導覽選單(Mega Menu)


大多數網站的導覽選單是階層式的,需一層一層點入。而Mega Menu在選單的第一層,就以大面積的區域展開了第二甚至第三層的選單。除了減少使用者的點擊數,且可以快速點入想看的內容。

Mega Menu是目前國外許多大型網站採用的選單設計方式,攤開所有架構,讓使用者一目瞭然看到所有子選項。有些使用者除了使用搜尋功能,有時候不見得有耐性點入眾多的分層中尋找需要的內容。

國外網站Mega Menu的設計範例:
https://www.usef.org/_IFrames/sponsors/default.aspx
Amazon.com http://www.amazon.com/
福斯汽車 http://www.vw.com/en.html
Cisco http://www.cisco.com/en/US/hmpgs/index.html
25 Examples of Mega Menus in Web Design
http://designm.ag/inspiration/mega-menus/

http://opinion.udn.com/opinion/story/6085/372353

[hr]

4. 扁平化介面設計(Flat UI Design)


許多新網站以及需要重新設計的網站都紛紛採用了扁平化設計(Flat Design)的方案,這種趨勢無論是在網頁設計或者行動端的設計方面都已經蔓延開了。
隨著融合了扁平化設計美學的 Windows8 以及新版 Google 的推出,以及其他人氣網站紛紛採用這種扁平化的主題設計
扁平化設計具有著一種讓人心醉的美麗,沒有大量的修飾,它能以一個簡單直白的方式來傳遞一個信息或者幫助一個產品以及思想變得更加深入人心。

扁平化設計的五大原則
http://blog.wis.com.tw/2014/ian/flat-design-principles/
1.不加特效
2.簡易的元素
3.注重排版:字體的應用需要配合整體設計,可以考慮簡單的無襯線字(Sans-Serif)
4.注重配色:設計上會比其他設計更為明亮,使用豐富的色彩呈現不同類型的元素,凸顯元素間的區隔性
5.簡易的設計:利用簡單的顏色和文字就足夠了,如要增加視覺效果,可以搭配圖像豐富網站的設計。

扁平化設計好燒!5 個 Flat Design 心法,帶你看明白怎麼扁、怎麼平
http://techorange.com/2013/07/19/5-dangers-of-flat-design/

http://designmodo.github.io/Flat-UI/
http://www.pinterest.com/warmarc/flat-ui-design/
http://ten2.tw/blog/20-fantastic-flat-ui-design/

[hr]
3.依使用者社群屬性設計網頁,並可提供多種版面之替換,惟版面之替換,應考量整體網站風格一致性。


[hr]
4.提供將網頁內容分享到社群網站之功能(如提供分享至主要社群網站之按鈕),提升民眾傳播訊息之便利性。



Edited 5 time(s). Last edit at 09/22/2014 11:57PM by JinJin.
(編輯記錄)