19年前,世界上第一個網(wǎng)頁誕生,它沒有設(shè)計可言,由文本和url組成,樣式只有最基本的。而如今,Web設(shè)計已經(jīng)成長為獨立而龐大的設(shè)計門類,一個網(wǎng)頁的創(chuàng)造需要多個工種、多種技術(shù)的參與,其流程的復(fù)雜和挑戰(zhàn)性已經(jīng)超過任何傳統(tǒng)設(shè)計類別。
這19年間,網(wǎng)站的擁有者越來越清楚自己的目標(biāo),而設(shè)計師們也越來越理性和專注,人們在不停尋求商業(yè)訴求、用戶、審美和技術(shù)上的平衡點。每一年過去,都有無數(shù)過時的風(fēng)格、特征元素以及實現(xiàn)技術(shù)被拋于身后。
設(shè)計風(fēng)潮體現(xiàn)著一個時期內(nèi)人們對特定的風(fēng)格、趣味、審美、技術(shù)乃至理念等各種模型或特征的追隨。新技術(shù)的發(fā)展、媒介載體的占有量的變化、新網(wǎng)站類型的誕生、全球的設(shè)計思潮的影響、行業(yè)領(lǐng)軍者的轉(zhuǎn)變、明星設(shè)計師個體的亮點,這些因素都在推動潮流的變化。 你可以回想一下那些曾經(jīng)風(fēng)靡一時的模式:復(fù)古的像素樣式;Google的樸素之風(fēng);韓式清新插畫風(fēng);Flashsite的興起帶來的不規(guī)則布局和動畫的濫用;Apple引發(fā)的對質(zhì)感的追求;用戶和情境意識的覺醒;對細(xì)節(jié)的關(guān)注——圓角和陰影的廣泛運(yùn)用; Web2.0設(shè)計風(fēng)潮中典型的配色和特征元素;空間與層次感的魔術(shù)……
09年流行的半透明風(fēng)格:
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-09/middle_20100728_d7ab83283c9111ff8642b2iPDMr0PBEG.png)
空間和層次感的魔術(shù):
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-09/middle_20100728_bc4ab13c5a7d08ff506fVF19Q7JxQh0D.jpg)
潮流的涌現(xiàn),是社會一致化與個體差異化的碰撞,每一次碰撞都推動著這個行業(yè)的進(jìn)步。
讓我們來看看這些發(fā)生中的變化:
簡潔,精簡,極簡
極簡主義(Minimalism )在這一年大熱。原因有4點:1, 手持便攜設(shè)備的占有量逐步上升,人們的訪問方式發(fā)生了改變,小尺寸屏幕所需的精簡之道反過來影響了整體的設(shè)計趨勢。
2, Apple簡潔、專注、充滿誘惑力設(shè)計哲學(xué)重領(lǐng)潮流,效仿者眾多。
3, 來自全球設(shè)計思潮的影響:極簡、禪意、人文、空間感的“日式風(fēng)格”這兩年在出版界、時裝設(shè)計、包裝設(shè)計、工業(yè)設(shè)計界都頗受追捧。
4, 網(wǎng)站的專業(yè)性和針對性在進(jìn)一步加強(qiáng),人們選擇一個網(wǎng)站一次把一件事做好、做到極致,而非盲目擴(kuò)張。這也使“精簡”擁有更大的實現(xiàn)空間。
極簡主義體現(xiàn)設(shè)計師對意圖、受眾、情境的強(qiáng)大控制力。不是簡單的做減法就可以了,如果不能很好地把握取舍的宗旨與理由,一個為了極簡效果而精簡的頁面可能看起來庸俗不堪,是為“做作”的留白 。
操刀這一風(fēng)格需要對作品有充分的自信和理解力,更重視細(xì)節(jié)和布局,把握恰當(dāng)?shù)膶Ρ、?qiáng)調(diào)。
來自版式和留白的均衡美感
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-09/middle_20100728_546de1236edf4423afe8dYkEGfrIkwpE.jpg)
極簡主義風(fēng)格非常適用于以圖片為表現(xiàn)主體的網(wǎng)站
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-09/middle_20100728_7df790255204e89c2780QlmR76iIh2AQ.png)
極簡主義的風(fēng)潮中,還涌現(xiàn)了許多單頁網(wǎng)站。所有內(nèi)容都放在一個頁面上呈現(xiàn),通過分屏來巧妙地布置格局,不再有跳轉(zhuǎn)和復(fù)雜的站點結(jié)構(gòu),一目了然。
更有人情味與趣味的設(shè)計
運(yùn)營上的專注使得設(shè)計師們可以在設(shè)計中投入更多的感情,更有針對性地取悅受眾。從保守、冷漠、功利的陳舊風(fēng)貌中,涌現(xiàn)出更多富有生命力和趣味的產(chǎn)品。
Twitter取得了巨大成功,可愛的小鳥形象深入人心。以動物為主題的logo和網(wǎng)站吉祥物也隨之風(fēng)行起來。
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-09/middle_20100728_eda13b46c0c2de8fcdb4nsgv98Cquabn.jpg)
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-09/middle_20100728_76dbc7f9921ed534f6fcvaah3cVsBXhW.jpg)
這一變化出現(xiàn)的原因:
1是具有針對性的中小型服務(wù)和應(yīng)用類網(wǎng)站大批涌現(xiàn)。
2是來自示范者的力量。
3是多元化的必然趨向。
4是在功能性、規(guī)范性和用戶體驗之外,設(shè)計師開始尋找那些從未出現(xiàn)過的、能更深層次打動用戶的東西——“一種在感情上贏得人們喜愛的東西”。
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-09/middle_20100728_931ed11777543f210cc9hRQEcDL789r0.jpg)
親和、活潑、富有感染力、配色清新、使用自然元素作為裝飾物。
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_de9facca2ab08d5e184cmSTieZLbiYt2.png)
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_6fc7c044682bcf487672sxFdKByfVG7j.jpg)
曾經(jīng)很不常見的高飽和度的配色,這種充滿動感和生命力高調(diào)設(shè)計讓人充滿驚喜。
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_3e794962ddc83c77aafd4WM2QoCYml2V.png)
精致有趣的細(xì)節(jié)
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_bac955e670b39e6ef1f3NQzFuoMAjos2.jpg)
對傳統(tǒng)設(shè)計的借鑒
Web設(shè)計這個年輕的分支在自我生長的同時也在不停向傳統(tǒng)設(shè)計汲取營養(yǎng)。在布局與版式方面,設(shè)計師們一直在探尋更好的表現(xiàn)手法,所以嘗試從傳統(tǒng)的設(shè)計媒介中尋求靈感,雜志版式布局( Magazine-style Layouts)的從09年就開始大熱,不光大型新聞網(wǎng)紛紛求變,雜志版式布局的Wordpress Themes 也炙手可熱。 這一變化對傳統(tǒng)設(shè)計不僅僅是形式上的追隨,更重要的是嘗試去借鑒與融合的態(tài)度。
Times 和 Financial Times 都是國外老牌媒體,他們的網(wǎng)站布局結(jié)合傳統(tǒng)紙媒版式有許多新潮的亮點,比如 豎式的流體布局,圖文混排,頭條強(qiáng)調(diào),由標(biāo)題字號變化帶來的層級差別。
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_b79ee311c3045f67b0a4yk4TvVnBWtrF.png)
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_472177320b670eeb4989OqwnaVkr2wzp.png)
而國內(nèi)的此類網(wǎng)站絕大多數(shù)采用的還是非常傳統(tǒng)的橫向區(qū)塊布局,信息密度高,版式缺乏節(jié)奏和韻律。
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_370a0e57d45606ece1521xYKB8qb6juQ.png)
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_770ed9eb17d283722b0b5pMlvNVMoCDb.png)
由比較可見,國外的大容量信息網(wǎng)站的趨勢是 降低首頁的信息密度,把內(nèi)容分?jǐn)偟蕉夘l道;版式上更具引導(dǎo)性、更適于閱讀,瀏覽方式像讀報一樣更流暢隨意。
由于廣告盈利價值的差別,國內(nèi)這類網(wǎng)站還是使用信息密度極高的索引模式,所以看起來更像說一份導(dǎo)流量的“黃頁”而非可隨心閱讀的媒體。在信息呈現(xiàn)密度與模式無法改變的情況下,照搬國外的版式布局是非常危險的。
除了在樣式上的借鑒,傳統(tǒng)版式設(shè)計上的許多經(jīng)典的實現(xiàn)手法也移植了過來,最著名的就是
黃金比例和柵格系統(tǒng)(Grid System)。柵格系統(tǒng)的歷史有300多年,運(yùn)用嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格來指導(dǎo)和規(guī)范元件的分布排列。將傳統(tǒng)柵格移植為適合網(wǎng)頁設(shè)計的系統(tǒng),不光是創(chuàng)造了一種工具,也產(chǎn)生了一種普遍的審美規(guī)范與傾向。無論你是選擇遵循規(guī)范還是打破規(guī)范,都是對它的推動。
960px寬的網(wǎng)頁柵格系統(tǒng) 960 Grid System:
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_dfcdfbd6111c5988c20f3IGrnrWqb1Bn.jpg)
![web設(shè)計趨勢與潮流](https://att2.citysbs.com/hangzhou/sns01/forum/2010/07/28-10/middle_20100728_febea8780fdb2cd73b0dhf3DfD6EwwaP.png)
個體風(fēng)格帶來的變化
誰才代表著趨勢?有人認(rèn)為設(shè)計師們所追捧的變化代表了潮流,
有人認(rèn)為top100的大站才是大勢所趨。狡猾一點說,兩個說法都不確切,網(wǎng)站運(yùn)營的Top100并不代表設(shè)計上的Top100,出于多種原因,很可能它
們是最保守的陣營。但你無法忽略他們對用戶/客戶的審美及視覺習(xí)慣造成的影響。而設(shè)計師們雖然愿意挑戰(zhàn)和嘗試變化,但在面對個人化設(shè)計和商業(yè)設(shè)計時,他們
的取舍卻往往不盡相同。
巨頭和個體們在設(shè)計風(fēng)格一直在互相影響和滲透。所以你永遠(yuǎn)不應(yīng)該輕視那些看起來“個人化”和“小眾”的創(chuàng)新設(shè)計。觀察它們的最好舞臺就是設(shè)計師的Blog和Profile站。
下面這幾點都是從現(xiàn)在小眾網(wǎng)站上流行,慢慢被許多普通大眾網(wǎng)站設(shè)計所趨向的特征。。
更大header區(qū),更醒目的logo和標(biāo)識,字號更大的標(biāo)題。
內(nèi)容放得再多再好,但用戶記不住“你是誰?”也是白費(fèi)。 更大header區(qū)強(qiáng)化了用戶對品牌和風(fēng)格的記憶,讓你有更多的發(fā)揮余地去表現(xiàn)。