TNW發(fā)布了2013年10大網(wǎng)頁設(shè)計趨勢：

1、響應(yīng)式布局盛行，即一個網(wǎng)站適配多種屏幕;
2、重視字體的選擇，使用Web字體;
3、更少的使用Flash，使用其他任何可能替代的技術(shù);
4、蘋果iOS的擬物化設(shè)計將不再時髦;
5、使用巨大的背景圖構(gòu)造大氣的視覺效果;
6、產(chǎn)品和個人介紹頁面留出更多空白;
7、更多的社交網(wǎng)絡(luò)分享入口;
8、淺色、冷色調(diào)重新成為主流;
9、移動App將取代一部分移動網(wǎng)頁流量;
10、內(nèi)容依舊為王;

好了，該到我們年終展望新年的時刻了。2012年我們看到一些新的設(shè)計趨勢在Web設(shè)計領(lǐng)域，特別是響應(yīng)式頁面設(shè)計。那么跟隨我們的腳步，來預(yù)測一下2013年的設(shè)計趨勢吧！

1、響應(yīng)式網(wǎng)頁設(shè)計越來越被重視

響應(yīng)式網(wǎng)頁設(shè)計已經(jīng)不是什么新鮮名詞了，但我們?yōu)槭裁催€有說它呢？簡單地說：響應(yīng)式設(shè)計的方法會更多且制定相應(yīng)的標(biāo)準(zhǔn)。2012年通過斷點的響應(yīng)式 設(shè)計類適合不同的屏幕，當(dāng)新的設(shè)備比如iPad mini沖擊足夠大的市場的時候，這種方式將得到改變，斷點可能被替換成其他實現(xiàn)方式。

我們認(rèn)為更多的網(wǎng)站設(shè)計將專注于最初的頁面設(shè)計以響應(yīng)式，而非單獨制定不同設(shè)備的模式。這種響應(yīng)式設(shè)計忘記尺寸以便支持多種設(shè)備，我們將看到更豐富的頁面設(shè)計適應(yīng)不同節(jié)點的設(shè)備。

超贊！難得的一套響應(yīng)式網(wǎng)頁設(shè)計模版，分別含iPad界面設(shè)計、iPhone界面設(shè)計、PC界面設(shè)計。

這對最近有響應(yīng)式設(shè)計項目的設(shè)計師來說，絕對是不可多得的五星干貨！
界面已經(jīng)上傳@微盤 ，下載請戳http://vdisk.weibo.com/s/u6sEw
另外特別說明！本資源經(jīng)官方授權(quán)（Cris）可以免費使用在個人和商業(yè)項目中。

溫馨提示：下載后打開PSD請記得戳開“智能對象”，記得！肯定會有一些同學(xué)會說怎么就一個圖層，那些頁面的詳細(xì)分層呢？為了給你解釋清楚藍(lán)藍(lán)設(shè)計做了一張解說圖。見下方！

本周我們向您推薦這21個時尚新潮的網(wǎng)站設(shè)計，它們都有非常好看的聯(lián)系頁面。
或許很多人覺得聯(lián)系頁面并不重要，但是在國外，設(shè)計師和企業(yè)團隊是非常注重這個頁面的設(shè)計和信息展現(xiàn)的，有一個明確的方式讓人們獲得與你聯(lián)系的信息是非常重要的。
設(shè)計一個好的聯(lián)系頁能讓你與客戶更好的溝通。從咖啡館及餐館的頁面到設(shè)計工作室的頁面，我們將展示幾種不同的聯(lián)系頁。
這些設(shè)計簡潔、輕便、圖文并茂并豐富多彩?，F(xiàn)在就來感受這些優(yōu)雅的頁面吧：）

相關(guān)文章推薦：
一組漂亮的婚禮相關(guān)網(wǎng)站設(shè)計欣賞
35個超贊的iOS App網(wǎng)站欣賞
70個全球最華麗的互動型單頁網(wǎng)站欣賞

Supereight Studio

藍(lán)藍(lán)設(shè)計精選25個與食物相關(guān)的網(wǎng)站設(shè)計，這些網(wǎng)站的設(shè)計主體突出，大部分以暖色調(diào)為主，比如披薩、曲奇餅之類的；當(dāng)然也有一些是走清涼風(fēng)的，比如冰淇淋之類；還有與愛情相關(guān)的象征著甜蜜的粉色系糖果類，更有單頁面食物制作流程的酷酷黑色系。

這些網(wǎng)站的主體內(nèi)容有主食類的，有餅干零食類，有咖啡飲料類，也有甜點類，更有公益性質(zhì)的。網(wǎng)站的背后有餐廳、有小賣部、有流動外賣、更有食品商。每個網(wǎng)站的所營造的氣場需要您點擊進(jìn)去細(xì)細(xì)品喲：）

Milano

Culinary Culture

藍(lán)藍(lán)設(shè)計：本文作者總結(jié)了十四條關(guān)于移動端產(chǎn)品設(shè)計的原則，其提倡的核心原則就是從用戶出發(fā)，充分考慮用戶的使用體驗。

一、充分考慮用戶的使用習(xí)慣

比如大多數(shù)人拿手機的時候是雙手握還是單手握，單手握的時候是右手操作還是左手操作，操作的時候用哪個手指就能進(jìn)行操作?？紤]到用戶的使用習(xí)慣有助于在設(shè)計時避開手指的觸碰盲區(qū)。

二、充分考慮用戶的使用場景和干擾源

用戶使用產(chǎn)品是在什么時間，什么地點，什么環(huán)境下使用？譬如，用戶經(jīng)常在嘈雜的環(huán)境中使用自己的產(chǎn)品，這時候的干擾源就是噪音，產(chǎn)品設(shè)計時應(yīng)避免使用語音技術(shù)；用戶經(jīng)常在擁擠的環(huán)境中使用產(chǎn)品，則產(chǎn)品設(shè)計時應(yīng)避免用戶過多地進(jìn)行輸入操作；用戶經(jīng)常在地鐵等網(wǎng)絡(luò)環(huán)境不好的場所使用產(chǎn)品，產(chǎn)品就應(yīng)該自動保存用戶的信息，防止信息的丟失。

三、盡量減少產(chǎn)品層級

在移動設(shè)備上，過多的層級會使用戶失去耐心而放棄對產(chǎn)品的使用。如果產(chǎn)品層級確實過深，考慮用一下幾種方法扁平化你的層級結(jié)構(gòu)：使用選項卡（tabs）結(jié)合分類和內(nèi)容的展示；允許穿越層級操作，比如允許用戶在第一層級對第二層級的內(nèi)容進(jìn)行直接操作（新浪微博信息列表頁的長按）。

界面設(shè)計包括哪些細(xì)節(jié)、如何深入？
我們常說“細(xì)節(jié)決定成敗”，有些界面會讓人覺得不精致，缺細(xì)節(jié)，而這些細(xì)節(jié)又包括哪些呢？如何去深入呢？

不妨來看本文作者，百度用戶界面設(shè)計師@JJ-Ying 為您娓娓道來：

• 界面元素的對齊，我見過很多同學(xué)對齊是永遠(yuǎn)靠眼睛的。確實在布局的時候經(jīng)常需要做到視覺上的對齊，而不是機械的對齊，但這不是界面元素可以隨意擺放的借口，該對齊的內(nèi)容需要對齊，有時候只是舉手之勞，養(yǎng)成好習(xí)慣很重要，有點強迫癥也不是壞事情。
• 像素，雖然現(xiàn)在的分辨率越來越高，但是很多圖標(biāo)、按鈕的邊緣還是最好都檢查一遍保證垂直和水平邊緣不會被虛化。
• 界面光源的一致性，一致性是個很大的課題，應(yīng)該能寫一篇論文那么長，細(xì)節(jié)方面的一致性應(yīng)該包括界面元素、文字陰影、圖標(biāo)等的光源。假設(shè)深色的標(biāo)題文字用了向下的淡色投影表現(xiàn)內(nèi)凹效果，那正文就應(yīng)該避免用深色的文字向上投深色的陰影
• 圖標(biāo)面積的一致性，這也是一個一直難以避免的問題，而且有很多主觀成分，最好的方法是設(shè)計的時候放到實際屏幕上以較遠(yuǎn)的距離查看，是不是有哪些會特別輕或特別重，然后再去調(diào)整尺寸
• 文案，雖然這不是直接的界面設(shè)計元素，但是嚴(yán)謹(jǐn)、完整的文案也是給所有設(shè)計加分的。常見的問題有中文錯別字、英文該大寫的沒大寫、拼寫錯誤等等
• 別直接使用 Windows 自帶宋體 / 黑體里的英文?。?！這個不解釋
• 謹(jǐn)慎地使用高飽和度顏色、大差別漸變，我們 GUI 設(shè)計師總喜歡把自己當(dāng)做藝術(shù)家，即使 GUI 真算藝術(shù)那也是限制最大的一門藝術(shù)（天朝的電影、電視劇不算。。。），大家大部分情況下遇到的設(shè)計場景沒有非常大的顏色空間去發(fā)揮，所以一些醒目出跳的顏 色和漸變使用起來要比較小心，否則很容易產(chǎn)生“俗氣”的感覺

按鈕是網(wǎng)頁設(shè)計最重要的組成元素之一，是用戶和網(wǎng)站進(jìn)行交互的重要橋梁。要設(shè)計出優(yōu)秀的按鈕設(shè)計是一件非常困難的事情，因為設(shè)計師們需要從整體設(shè)計的角度考慮按鈕設(shè)計成什么樣的風(fēng)格才能和頁面的其它部分很好的融合，同時按鈕的設(shè)計要操持風(fēng)格的一致性。下面和大家分享網(wǎng)頁設(shè)計中15個迷人的按鈕設(shè)計案例，一起欣賞。

Radio fm buttons

Iphone Camera App Ui

BT UI Facelift

網(wǎng)頁設(shè)計中其實有個很重要的設(shè)計元素常常被大家忽視，呃！它就是搜索框！別看一個搜索框就是一個小盒子、一個小方框！它可有著莫大的用處。它經(jīng)常會出現(xiàn)在角落或者側(cè)邊欄，它能迅速幫助你的訪問者找到資料（靠用戶自己腦海的習(xí)慣記憶以及和你網(wǎng)站匹配的關(guān)鍵字）。

國外的網(wǎng)站上，大家都可以看到，這個小框子的交互和設(shè)計越來越別出心裁了。那些交互和細(xì)節(jié)優(yōu)化不僅僅是為了吸引訪客的眼球，更多時候，是在培養(yǎng)用戶對搜索框的使用，上留住訪客，并把你的網(wǎng)站上的每一個干貨展現(xiàn)給訪客。

那么，今天我們收集了一些漂亮的搜索框設(shè)計，來細(xì)細(xì)品味一下吧！它們從字體、顏色、陰影、梯度等不同角度做了改變！希望對您的項目有幫助！

Free Custom Search Boxes (PSD)

Source

Search Bar PSD

各色各樣的餐飲類app界面設(shè)計

Recipes and Grocery List – BigOven

超過250000種食譜（包括你的和你朋友的），有了它，你的手機就是一個可移動的食品雜貨鋪和菜單！超過七億下載，圍起來可繞地球N圈！

Real Recipes

Real Recipes（iPhone和iPod touch有）為你提示做美食需要的工具、簡單的食材等。里面有灰常多其他用戶分享的食譜或者你自己的哆啦a夢菜譜口袋、食物計時器的鬧鐘等~對了！還有一個配方微調(diào)器，就是你可以在短時間內(nèi)根據(jù)自己的需要調(diào)配完美的食譜，還有詳細(xì)的烹飪教程哦~

當(dāng)開始進(jìn)行新項目時，一般都會起步于線框圖。本文收集了大量的線框圖設(shè)計工具和套件。
交互設(shè)計師必備哦！

推薦閱讀：
《推薦！交互細(xì)節(jié)中的那些變形金剛》 
《iOS用戶體驗設(shè)計：如何構(gòu)建交互模式》 
《20個專為無線端設(shè)計提供靈感的資源站》

在線設(shè)計模板

Wirefy

以內(nèi)容優(yōu)先為原則的線框圖在線設(shè)計工具。允許你運用標(biāo)準(zhǔn)元素設(shè)計出響應(yīng)式線框圖。

Lumzy

網(wǎng)頁設(shè)計和界面設(shè)計的原型設(shè)計工具。

Mockup Builder