技術(shù)資訊
2009年海外Web2.0風(fēng)格設(shè)計風(fēng)潮(上)
2009-01-23 11:06:00
這是 Smashing Magazine 花費(fèi)幾個月的時間研究編寫的 2009 年 Web 設(shè)計風(fēng)格與潮流,Smashing Magazine 的編輯們對當(dāng)前流行的大量 Web 設(shè)計風(fēng)格進(jìn)行分析,總結(jié)出那些可能在 2009 年風(fēng)行的潮流,包括新的設(shè)計元素,新的圖形方式,并給出大量的漂亮的示例。這是第一部分10個潮流,第二部分15個潮流將于下周推出。
2009 Web 設(shè)計風(fēng)潮
1、凸版印刷風(fēng)格
http://365daysofastronomy.org/
2、富UI
http://www.newspond.com/science/
3、透明 PNG
http://rustinjessen.com/
4、大字體
http://www.francescomugnai.com/
5、代用字體
http://www.chigarden.com/
6、燈箱框
http://listen.grooveshark.com/
7、媒體塊
http://www.goodbarry.com/
8、雜志式樣
http://cutandtaste.com/
9、幻燈滾動
http://www.itv.com/
10、重點(diǎn)展示區(qū)域
http://productplanner.com/
這種風(fēng)格有些出人意料,可能因為之前很少有人使用。該風(fēng)格在在各種主題的網(wǎng)站中都有,但主要用于產(chǎn)品設(shè)計或在線服務(wù)類網(wǎng)站。 #p#
2. 富UI
現(xiàn)代 Web 中的 UI 變得越來越漂亮,越來越好用。過去的一年,Web 中的 UI 有了顯著提高,有了一種接近桌面的感覺。Ajax 和 Flash 被廣泛使用。
特別是我們比去年看到了更多留白區(qū)域,還看到很多現(xiàn)代的 UI 技術(shù)會顯示用戶同系統(tǒng)之間交流的視覺狀態(tài),比如,按鈕在正常和被按下時顯示不同的樣子,用戶同系統(tǒng)交互時能及時得到反饋,另外,越來越多的服務(wù)可以被用戶定制。
http://www.quicksnapper.com/
http://dc2009.drupalcon.org/
這些設(shè)計顯示 Web 設(shè)計師將更多精力放到了用戶體驗上。
http://konigi.com/interface/mobileme-calendar-date-selector
http://www.newspond.com/science/
http://www.howcast.com/categories
http://moodstream.gettyimages.com/
http://www.gettyimages.com/
http://listen.grooveshark.com/
http://www.kontain.com/#home
3. 透明 PNG
使用 PNG 實現(xiàn)透明雖然不被 IE6 支持,卻在過去的一年大行其道。設(shè)計師們似乎正在嘗試將背景圖片和內(nèi)容融合并實現(xiàn)一些印刷媒體的風(fēng)格。比如,將 PNG 半透明圖片放到整體背景的某個區(qū)域上,用來加亮顯示這個區(qū)域,如標(biāo)題或聲明。一些 PNG 同名技術(shù)還用來實現(xiàn)燈箱框效果。
Smashing Magazine 去年曾有篇使用透明效果實現(xiàn)創(chuàng)意設(shè)計的文章,很多設(shè)計師在他們的作品中開始嘗試這些技巧。有趣的是,透明效果常被用于頁首和頁尾部分,不過也有些例外。
http://rustinjessen.com/
http://dc2009.drupalcon.org/
http://24ways.org/
http://labs.paulicio.us/viewport/#2
http://www.restroom.nl/
http://www.wishingline.com/notebook/
http://carrotcreative.com/
4. 巨大字體
以前的文章中我們曾介紹過巨型字體設(shè)計,2009年,巨型字體設(shè)計還會風(fēng)行,尤其是那些設(shè)計社,以及展示型,產(chǎn)品介紹型,或在線服務(wù)型網(wǎng)站,他們會使用巨型字體顯示重要信息。
巨型字體設(shè)計中使用的字號往往超過36px,設(shè)計師們對字體編排注入了更多關(guān)注,以實現(xiàn)更漂亮,更連貫,更值得信賴的站點(diǎn)。
http://www.francescomugnai.com/
http://madebygiant.com/
http://theautumnfilm.com/red-white-sale/us.html
http://www.signalapps.com/
http://www.blackestate.co.nz/
http://www.onefastbuffalo.com/
5. 代用字體
設(shè)計師們還把更多注意力放到字體上,雖然經(jīng)典的 Web 字體,Helvetica, Arial, Georgia 以及 Verdana 等仍占主流,一些代用字體正浮出水面(如 sIFR)。
有趣的是,這些字體會和設(shè)計無縫地銜接,設(shè)計師們似乎并非為字體而字體,而是要將字體同他們的設(shè)計結(jié)合在一起實現(xiàn)更漂亮的效果。
http://blog.iso50.com/
http://www.chigarden.com/
http://www.nonesuch.com/journal
http://daily.creattica.com/
6. 燈箱效果
燈箱框是第二代彈窗,它們比第一代基于 JavaScript 的彈窗更友好,可以讓用戶將注意力集中到最重要的部分。這些窗口一般由用戶的某個行為激發(fā),并顯示在其它內(nèi)容的上層,他們有時候是半透明的,并包含一個關(guān)閉按鈕。
http://typedeskref.com/
http://www.realmacsoftware.com/rapidweaver/overview/
http://listen.grooveshark.com/
7. 媒體塊
隨著寬帶接入的普及,用戶現(xiàn)在可以承擔(dān)更豐富的內(nèi)容,設(shè)計師們也借機(jī)提出更有吸引力的內(nèi)容。越來越多產(chǎn)品網(wǎng)站使用媒體塊顯示視頻,讓用戶更容易理解這些內(nèi)容。用戶只需靠在椅子上看視頻,不需要一步一步往下點(diǎn),這些食品通常比較短,直奔主題,雖然很正規(guī),但也包含一些娛樂性。
不過請注意,視頻應(yīng)當(dāng)是你內(nèi)容展示方式的次要選項,并不是所有人都有寬帶接入,也不是所有人都喜歡有視頻播放(他們可能正在后臺聽網(wǎng)絡(luò)收音機(jī)或播放音樂),另外,也不是所有人都啟用了 Flash 和 Javascript。
http://www.getbackboard.com/
http://www.goodbarry.com/
8. 雜志外觀
傳統(tǒng)印刷媒體設(shè)計中使用的編排技術(shù)也出現(xiàn)在 Blog 設(shè)計中,文章的編排,文字排版,圖片甚至對其方式。基于網(wǎng)格的設(shè)計也很流行,但主要用于展示與產(chǎn)品頁以及大型博客,極少用于公司網(wǎng)站或網(wǎng)店。
http://www.alpha-multimedia.com/category/blog
http://www.objectifiedfilm.com/
http://www.inspirationbit.com/sources-of-inspiration-to-the-rescue/
http://www.good.is/
http://cutandtaste.com/
http://www.nonesuch.com/journal
9. 滾動幻燈導(dǎo)航
幻燈片水平和垂直滾動,可以向不同方向滾動,當(dāng)前項加大加亮。這種導(dǎo)航技術(shù)可以讓用戶快速直觀地瀏覽站點(diǎn)中的內(nèi)容。一般常用語娛樂性網(wǎng)站,另外,設(shè)計者還可以使用該技術(shù)展示他們的作品。
http://www.itv.com/
http://money.cnn.com/
http://music.yahoo.com/
http://vickycristina-movie.com/
10. 在重點(diǎn)位置做形象展示
網(wǎng)站的左上方一般是一個站點(diǎn)最重要的區(qū)域,因為那是用戶注意力最集中的地方。因此,在那個部位放上網(wǎng)站中最重要的信息是明智之舉。
事實上很多設(shè)計師正是這樣做的,不管是 Web 程序,公司網(wǎng)站,在線服務(wù)還是作品展示,設(shè)計師們將口號或簡介性內(nèi)容放在那里,并使用醒目的排版給用戶以良好的第一印象。這些內(nèi)容長短不一,不管哪種方式,但它們都占據(jù)可觀的空間,一般橫跨整個幅面,高度在250到400之間。不過這些形象展示性區(qū)域一般并不用于博客或在線商店。
http://www.shannonmoeller.com/
http://productplanner.com/
http://www.45royale.com/
http://revyver.com/
http://creamscoop.com/
未完待續(xù)
本文國際來源:http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
中文翻譯來源:COMSHARP CMS 官方網(wǎng)站(35公里譯)
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2009-02-20 11:18:00] Web設(shè)計之道
- [2009-02-20 11:17:00] Web設(shè)計中的黃金分割
- [2009-01-23 11:24:00] 2009年海外Web2.0風(fēng)格設(shè)計風(fēng)潮(下)
- [2019-08-15 10:12:31] 從零開始的響應(yīng)式web設(shè)計
- [2018-01-05 10:43:22] 《響應(yīng)式Web設(shè)計:HTML5和CSS3實踐指南》——1.2節(jié)基于寬度百分比的圖像縮放
- [2008-12-18 21:56:00] 關(guān)于“>>”和“<<”、箭頭的交互
- [2009-04-07 08:31:00] 中文Web設(shè)計中的著重號
- [2009-04-07 08:22:00] 寬屏幕下的Web設(shè)計
- [2009-04-19 08:46:00] web專題設(shè)計模板化可行性研究
- [2009-02-20 13:46:00] Web設(shè)計中9個常見的可用性錯誤[譯]
- [2009-03-23 09:29:00] 面向Web開發(fā)者和設(shè)計者的參考手冊
- [2014-11-22 10:36:53] WEB設(shè)計的趨勢:聚焦簡潔強(qiáng)調(diào)字體
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運(yùn)動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
圖形網(wǎng)格 輪胎網(wǎng)站設(shè)計 網(wǎng)頁設(shè)計 網(wǎng)站開發(fā) 官網(wǎng)建設(shè) 青島黃島、紅島網(wǎng)站建設(shè)公司 建站常識 青島網(wǎng)站建設(shè) H5專題頁面 高端輪胎網(wǎng)站設(shè)計 青島抖音小程序開發(fā) 集團(tuán)性網(wǎng)站 微信小程序 青島網(wǎng)站建設(shè)基礎(chǔ)知識 H5 程序開發(fā) 網(wǎng)站優(yōu)化 營銷策略 html和css 微網(wǎng)站 蘋果系統(tǒng) 網(wǎng)站設(shè)計趨勢 企業(yè)建站 青島高端網(wǎng)站建設(shè)公司哪家好 外貿(mào)網(wǎng)站設(shè)計 集團(tuán)官網(wǎng) 青島不錯的英文網(wǎng)站建設(shè)公司 力圖數(shù)字科技 英文網(wǎng)站建設(shè) 高端網(wǎng)站設(shè)計