有趣新穎的網(wǎng)站設(shè)計(jì)趨勢

2014-4-17    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請點(diǎn)這里

今天藍(lán)藍(lán)設(shè)計(jì)就再來詳細(xì)的聊聊其中一些新穎的網(wǎng)站設(shè)計(jì)趨勢,并且都用網(wǎng)站界面設(shè)計(jì)案例解析的形式推薦給大家,希望對(duì)您UI設(shè)計(jì)有啟發(fā):)

更多網(wǎng)站界面設(shè)計(jì)案例解析:http://m.sillybuy.com/

1、The Daily Beast

鼓勵(lì)用戶一直往下瀏覽

2

The Daily Beast上面的“Read This List” 板塊設(shè)計(jì)得非常巧妙。首先這個(gè)網(wǎng)站設(shè)計(jì)從上而下是不同故事的合輯,每當(dāng)你閱讀到不同的內(nèi)容故事時(shí),這個(gè)列表就會(huì)自動(dòng)用淡灰色背景填充列表當(dāng)下文章告知用戶。這種方式另一方面也是在鼓勵(lì)用戶繼續(xù)往下閱讀下一篇文章。我覺得這種提示性設(shè)計(jì)時(shí)非常贊的,特別是當(dāng)你有許多故事時(shí)。

 

2、start ups this  is how design works

讓用戶了解更多的內(nèi)容

3

如果你打開startupsthisishowdesignworks,你會(huì)看見頁面文章內(nèi)容含有大量的黃色高亮顯示。每當(dāng)你點(diǎn)擊這些特殊的詞匯或短語,你會(huì)在當(dāng)前頁面得到一個(gè)解釋框,里面是針對(duì)該高亮區(qū)域的解釋,形式有可能是圖文也有可能是視頻??傊悴辉傩枰蜷_新的頁面瀏覽完解釋再返回這個(gè)頁面。這種設(shè)計(jì)方式允許你閱讀更多的內(nèi)容,獲取更多信息。

 

3、Bamboo、mmenu

移動(dòng)端側(cè)滑菜單

Unnamed QQ Screenshot20140228233303

現(xiàn)在使用移動(dòng)端觀看網(wǎng)站的用戶越來越多,那些有趣的交互方式給用戶帶來了莫大的幫助。許多智能手機(jī)app為用戶提供了右滑彈出導(dǎo)航菜單,有許多這方面的模板,比如 Bamboo 和 mmenu,而如果你想用WordPress插件,嘗試一下mobile.nav也不錯(cuò)。

 

4、Medium

讓用戶隨時(shí)隨地參與評(píng)論

Unnamed QQ Screenshot20140228233333

在Medium上我喜歡在上下文間有一個(gè)小便簽展示用戶和作者之間的交流。當(dāng)你打開任何一篇文章,你都可以突出某一高亮文本,然后留下一個(gè)便條/評(píng)論,這是用戶和作者之間有意思的交流方式,用戶可以選擇性地去評(píng)論他們想閱讀或者參與的內(nèi)容。

 

5、Ultimate Flyout Responsive Menu

到底是單手操作強(qiáng)還是雙手呢?

Unnamed QQ Screenshot20140228233402

傳統(tǒng)的網(wǎng)站導(dǎo)航都是設(shè)計(jì)在頁面的頂端,但是隨著移動(dòng)用戶的激增,這個(gè)設(shè)計(jì)如果搬到移動(dòng)端,可能會(huì)很不合適。研究表明,人們使用智能手機(jī)有49%的人習(xí)慣使用單手操作。那么移動(dòng)端的導(dǎo)航最好就要從頂部搬移,移到底部是比較OK的。這里有一個(gè)WordPress插件 Ultimate Flyout Responsive Menu,提供響應(yīng)式導(dǎo)航。

更多網(wǎng)站界面設(shè)計(jì)案例解析:http://m.sillybuy.com/

分享本文至:

日歷

鏈接

個(gè)人資料

存檔