首頁

8個在網(wǎng)頁設(shè)計中即將被淘汰的趨勢

藍藍設(shè)計的小編

時代一直在變,一個又一個的創(chuàng)新讓我們感到驚訝萬分。網(wǎng)頁設(shè)計的趨勢如同流星,光芒耀眼,但來得快、去得也快。雖然跟風很不好,顯得毫無設(shè)計主見,但很多設(shè)計潮流確實值得追隨。就像當下響應(yīng)式設(shè)計、扁平化設(shè)計、以及滾動視差等。

可是呢,還有很多極為”糟粕”的設(shè)計趨勢,本文一一列舉,請君對號入座。

相關(guān)推薦:
《年終特典!當下最熱門的網(wǎng)頁設(shè)計趨勢總結(jié)》
《網(wǎng)頁:滾動視差設(shè)計指南》

1. 除了電話線時代的老頑固,現(xiàn)在已經(jīng)沒人喜歡頁面跳轉(zhuǎn)了

webdesign-annoying-trends

“下一頁”、”下一張”,明明一頁就能展現(xiàn)的內(nèi)容,非要跳轉(zhuǎn)20多次才能看全,你把用戶當傻子?操作繁瑣、浪費時間、效率低下,沒人喜歡頁面跳轉(zhuǎn)過于頻繁的網(wǎng)頁。

2. 十面埋伏的廣告

webdesign-annoying-trends

確實有很多網(wǎng)站的維持依賴廣告收入,但是廣告的位置一定要合理,不要妨礙用戶瀏覽信息,用戶體驗永遠位于廣告之上。沒有用戶訪問量,也就沒人找你打廣告。

導(dǎo)航設(shè)計趨勢!關(guān)于圖標式導(dǎo)航的改進

藍藍設(shè)計的小編

不知不覺的,很多網(wǎng)頁設(shè)計中采用了圖標式導(dǎo)航(Navigation)——一般使用三道杠作為圖標,用以導(dǎo)航。
這種導(dǎo)航的好處是節(jié)省空間,讓界面更簡潔。

圖標式導(dǎo)航的案例

這是YouTube 圖標式導(dǎo)航(移動版):

為導(dǎo)航瘦身!關(guān)于圖標式導(dǎo)航的改進

這是Squarespace的圖標式導(dǎo)航:


為導(dǎo)航瘦身!關(guān)于圖標式導(dǎo)航的改進

AWARD的圖標式導(dǎo)航不拘一格:

不用編碼!全球10大高端建站神器推薦

藍藍設(shè)計的小編

這不是天方夜譚!你不需要知道HTML、CSS、PHP和其余晦澀難懂的語言。這些工具就像一個圖像編輯器,只需繪制矩形、填充顏色。我知道這很難相信,但他們就是存在!而且全球備受贊譽!

1、IM Creator

優(yōu)設(shè)網(wǎng)10大零編碼基礎(chǔ)的建站神器

聽我說,我們的IM Creator易用性和多功能性超越了很多客戶的預(yù)期。只需要你把控住超級菜單,根據(jù)您的需要做相應(yīng)的拖放和功能選擇。它們包括視頻、圖片、畫廊和幻燈片、按鈕、超鏈接、甚至一個HTML小部件。

最酷的地方在與你不需要創(chuàng)建繁瑣的帳戶,你可以輕松上路。嘮叨了半天,我差點沒有提到最好的部分:以上所有服務(wù)都是完全免費的!

2、WebStartToday.com

優(yōu)設(shè)網(wǎng)10大零編碼基礎(chǔ)的建站神器

如果你是一個細節(jié)癖,喜歡摳各種設(shè)計細節(jié),那么你完全應(yīng)該來看看WebStartToday!這里提供了超過1000個不同的網(wǎng)頁模板來匹配你的需求!甚至那些很少見的模版:旅行、夜生活、豪華轎車服務(wù)、鎖匠、美食、琳瑯滿目數(shù)之不盡!

當然這并不意味著我們的模版就是千篇一律,隨處可見的!在這里的模版,可以保證是獨此一家的,如果你在其他地方發(fā)現(xiàn)了,那一定是他們借了我們的寶貝,偷偷的!

網(wǎng)頁新趨勢:革命性的創(chuàng)新網(wǎng)頁導(dǎo)航設(shè)計

藍藍設(shè)計的小編

每個網(wǎng)站有屬于自己的個性——它能反射出背后的個人或者團隊。如何做到讓自己的網(wǎng)站顯得與眾不同、卓爾不群,讓用戶流連忘返或者立馬下單?

為了讓你的網(wǎng)站脫穎而出,不僅需要有豐富的高質(zhì)量內(nèi)容,同時也要兼顧網(wǎng)站的創(chuàng)新性和功能性。從用戶的角度出發(fā)好好想一下,怎樣讓你的網(wǎng)站用戶體驗更友好?簡單的搜索功能是需要的,或者你也可以精心設(shè)計一下網(wǎng)站的導(dǎo)航。同時,要注意保持整個網(wǎng)站設(shè)計語言的一致性。在這個html5狂潮涌進的時代,誕生了很多優(yōu)秀的網(wǎng)頁設(shè)計作品,他們都有卓越的導(dǎo)航設(shè)計,接下來整理的這些網(wǎng)站將喚起你關(guān)于導(dǎo)航的極限創(chuàng)意,快來親自體驗下吧!

Toybox

在需要的時候?qū)Ш綑趹?yīng)該一直在那里,而當用戶想要專注于某個特定的任務(wù)時,導(dǎo)航欄則應(yīng)該優(yōu)雅的隱藏起來。比如說,在設(shè)計一個網(wǎng)上商店的出納頁面時,網(wǎng)站的導(dǎo)航應(yīng)該可以隨時都易于使用,但同時也要注意突出像出納表單和按鈕控件之類的鮮明功能。Toybox的導(dǎo)航設(shè)計就恰好滿足了這些。

如下圖示,這個側(cè)邊導(dǎo)航給人的感覺就像是你在窺視頁面背后或者是掀開了一個玩具盒的蓋子看看里面到底有些什么。這個側(cè)邊導(dǎo)航非常方便使用,鼠標懸停在瀏覽器左側(cè)即可出現(xiàn),主體部分即時出現(xiàn)的旋轉(zhuǎn)效果也很帶感,可以很好的引導(dǎo)用戶的注意力。將導(dǎo)航隱藏起來同時也實現(xiàn)了界面的簡潔,使網(wǎng)站的瀏覽體驗非常的愉悅,因為網(wǎng)站并沒有留下太多無用的信息去分散用戶的注意力。

Toybox

至于其他你想知道的信息,比如說Toybox公司的主營業(yè)務(wù)和地址,可以在頂部的一個直接呈現(xiàn)的導(dǎo)航欄里找到。首頁的磁貼鼠標hover效果也非常的有趣,當鼠標懸停于某個項目的縮略圖時,其余的項目縮略圖都后退變暗并且產(chǎn)生景深的效果。

Olivier Bossel

交互設(shè)計師Olivier Bossel的個人作品博客非常有趣。該網(wǎng)站的導(dǎo)航元素在鼠標hover狀態(tài)下會產(chǎn)生像素爆炸式的效果(譯者注:火狐瀏覽器測試通過,chrome測試無效果)。這個效果相對于網(wǎng)站其余的簡潔設(shè)計來說非常有動感,由此產(chǎn)生強烈的對比效果。作為一個視覺元素它非常有效的促進了用戶繼續(xù)閱讀該網(wǎng)站,統(tǒng)一的視覺語言也彰顯了品牌的特點。

Olivier Bossel

來試試響應(yīng)式設(shè)計!25例優(yōu)秀的響應(yīng)式網(wǎng)頁設(shè)計賞析

藍藍設(shè)計的小編

通過我們長期對設(shè)計類網(wǎng)站的發(fā)掘,總結(jié)出了一個現(xiàn)象,那就是很多關(guān)于響應(yīng)式設(shè)計的文章只給出了桌面版的網(wǎng)頁設(shè)計,卻沒有提供移動版網(wǎng)頁設(shè)計的對比,這在我們看來,多少顯得有點不夠?qū)I(yè)。

于是,我們在這里收集整理了25例優(yōu)秀的響應(yīng)式網(wǎng)頁設(shè)計,均有桌面版和移動版的對比。在方便您閱讀這篇文章的同時,您不妨也思考一下靈活性這個主題。
對了,如果您還不夠了解響應(yīng)式設(shè)計,請至我們這篇文章《經(jīng)驗分享:響應(yīng)式排版中的基礎(chǔ)知識》回顧學(xué)習。

 

Whisperism

Responsive Websites

 

World Wildlife

Responsive Websites

 

Naspa

Responsive Websites

超贊!精致典雅引人注目的黑色系網(wǎng)站設(shè)計

藍藍設(shè)計的小編

Hotel Bourg Tibourg

有同學(xué)喜歡玩黑白配,但是卻一直不得要領(lǐng),總設(shè)計不出讓人眼前一亮的佳作出來?今天就讓我們來這些優(yōu)秀案例里找原因。

深色的背景看起來具有神秘感,能提供前景元素、背景元素的高度對比。有了黑色的鋪墊渲染,任何一個色彩都可以輕易在它之上煥發(fā)光彩。
那么怎么才能更好的在網(wǎng)頁設(shè)計中運用深色背景呢?想要成為一名”高級黑”設(shè)計師嗎?先來欣賞本文的絕贊范例吧。

The Blue Cube

外觀整潔干練,對照鮮明。黑色背景凸顯了白色文本。

The Blue Cube

 

網(wǎng)絡(luò)營銷常用方法及術(shù)語

藍藍設(shè)計的小編

最近看到一些剛接觸網(wǎng)絡(luò)營銷的朋友,對于網(wǎng)絡(luò)營銷一些常用的方法以及概念性的東西都不是很了解,在交談中說到軟文營銷、IM推廣等這些的方法時他們就不知道是什么意思。在此小篇整理一部分常用的網(wǎng)絡(luò)營銷方法和術(shù)語,希望對新人有幫助,高手看到就請繞行。

網(wǎng)絡(luò)營銷常用方法

什么是網(wǎng)絡(luò)營銷?以國際互聯(lián)網(wǎng)絡(luò)為基礎(chǔ),利用數(shù)字化的信息和網(wǎng)絡(luò)媒體的交互性來輔助營銷目標實現(xiàn)的一種新型的市場營銷方式。簡單的說,網(wǎng)絡(luò)營銷就是以互聯(lián)網(wǎng)為主要手段進行的,為達到一定營銷目的的營銷活動。(摘自百度百科)

搜索引擎優(yōu)化/SEO:利用搜索引擎的搜索規(guī)則來提高網(wǎng)站關(guān)鍵詞排名的方式。

搜索引擎營銷/SEM:利用搜索引擎進行營銷推廣的,比如SEO、競價推廣等都屬于SEM。

百度網(wǎng)盟推廣:在百度的聯(lián)盟網(wǎng)站上以圖片或文字的形式展現(xiàn)廣告。

軟文營銷:以文章為主,專門通過文字去宣傳推廣產(chǎn)品,或以新聞稿來提升品牌知名度。

數(shù)據(jù)庫營銷:通過收集和積累會員信息,經(jīng)過分析篩選后有針對性的使用電子郵件、短信、電話等方式進行客戶嘗試挖掘與關(guān)系維護的營銷方式。

郵件營銷:在用戶事先許可的前提下,通過電子郵件的方式向目標用戶傳遞有價值信息的一種網(wǎng)絡(luò)營銷手段。

IM/即時通信營銷:利用QQ、MSN、YY等即時工具營銷推廣的。

博客營銷:利用新浪博客、百度空間等平臺進行推廣的方法。

微博營銷:利用新浪微博、騰訊微博通過活動吸引粉絲關(guān)注,發(fā)布包含140字營銷信息、圖片、視頻的內(nèi)容。

微信營銷:伴隨微信的火熱產(chǎn)生的一種網(wǎng)絡(luò)營銷方式,用戶訂閱自己所需的信息,商家通過提供用戶需要的信息,推廣自己的產(chǎn)品的點對點的營銷方式。

靈感創(chuàng)意!15個整潔的小型網(wǎng)頁設(shè)計

藍藍設(shè)計的小編

作為一名網(wǎng)頁設(shè)計師,有時會使用很多不是必需的元素或者大量的復(fù)雜色調(diào)來使頁面脫穎而出。這樣做往往會使頁面看起來太過花哨和分散用戶的注意力,無法突出頁面的內(nèi)容。大多時候你會發(fā)現(xiàn)使用簡單的設(shè)計方法就會達到很好地效果。因此,今天我們收集了15個新鮮的用簡約風格設(shè)計的頁面來啟發(fā)大家的靈感。

相關(guān)推薦:
《11個超炫的視差滾動網(wǎng)站欣賞(附神器推薦)》

《awwwards上推薦的20個擁有創(chuàng)意布局的網(wǎng)站》

Arko

暢游VC-優(yōu)設(shè)截圖

Orchard Keepers

暢游VC-優(yōu)設(shè)截圖

提高網(wǎng)站瀏覽體驗的5條建議

藍藍設(shè)計的小編

提高網(wǎng)站瀏覽體驗的5條建議

當你瀏覽一款網(wǎng)站時,一般會迅速的對網(wǎng)站的外觀和使用感受做個評判,整體的設(shè)計風格是第一印象,能否引導(dǎo)用戶繼續(xù)閱讀取決于此。

金玉其外敗絮其中必然無法長久,功能性也是重要考量。推薦您也好好學(xué)習《網(wǎng)站用戶體驗的76個要點》。
好的用戶體驗不僅僅關(guān)乎到功能性和設(shè)計美學(xué),還需要考慮很多因素,我們一起來看一下吧。

一致性

最重要的交互元素一定要友好,并且風格一致。

盡管在設(shè)計一款網(wǎng)站時,我們可以融入很多創(chuàng)新點和美學(xué)風格,但是一些經(jīng)常使用、且重要的元素,風格一定要一致,比如按鈕、鏈接、導(dǎo)航欄、表單等等。我建議可以多瀏覽一些電商網(wǎng)站,他們在這一點上做的就很棒,他們通常有很多的茶品頁面,但是整體體驗卻相差不大,我們可以看看優(yōu)衣庫的網(wǎng)站。

Consistency is one of the most important aspects in web design.

 

  • 像產(chǎn)品類別、當前按鈕和重要的文本信息都通過紅色來高亮顯示
  • 頁面不同,布局基本相同。

推薦!20個綠色網(wǎng)站設(shè)計欣賞

藍藍設(shè)計的小編

@Iamkikidong 如果在網(wǎng)頁上合理地使用大片的綠色,不僅能營造出清爽,自然的界面,還能讓訪問者感到輕松自在,增加網(wǎng)站的親切感。事實上綠色有很多的色調(diào),這形成了一個非常靈活的色彩,它可以在色盤的黃綠色端顯得很“溫暖”,又可以在藍綠和碧綠方向顯得有些“冷”。一個檸檬綠可以讓一個設(shè)計很“潮”,橄欖綠則更顯平和,而淡綠色可以給人一種清爽的春天的感覺。

用藍色搭配綠色可以傳遞一種水的感覺。添加米色或者褐色則可以展現(xiàn)一種泥土的氣息。白色+綠色是新鮮和戶外的,而紫色和綠色是高對比的一對兒(需要小心對待)。

今天為您分享20個綠色系的網(wǎng)站,希望能為你的工作帶來靈感和啟發(fā)!

1. Garnier Body

01

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔