本文總結(jié)了最近網(wǎng)頁設(shè)計領(lǐng)域比較熱門的幾種技術(shù)，代表了一定的趨勢，設(shè)計師們要跟市場接軌，緊跟潮流的腳步，可以閱讀這篇總結(jié)，肯定大有裨益。

騰訊cdc：技術(shù)的革新帶動了設(shè)計行業(yè)的的迅猛發(fā)展，這使得設(shè)計師和開發(fā)者有了更廣闊的的探索天地。而網(wǎng)頁設(shè)計也越發(fā)不再那么循規(guī)蹈矩，許多團隊和公司都做了很多思考和創(chuàng)意。所以在我們適應(yīng)著現(xiàn)代設(shè)計潮流的同時，不妨也來看看現(xiàn)階段網(wǎng)頁設(shè)計大致的趨勢和風(fēng)格吧。

我不敢大言不慚的說這就是網(wǎng)頁設(shè)計的必然趨勢，這只是本人對當下網(wǎng)頁設(shè)計做出的一些小總結(jié)。希望這樣的歸類總結(jié)能給你帶來更多的思路和想法。

01. 響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design）

現(xiàn)在越來越多用戶都擁有多種終端：臺式機，筆記本，平板電腦，手機，能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁是現(xiàn)在的潮流，甚至是未來很長一段時間的設(shè)計趨勢。那么響應(yīng)式網(wǎng)頁設(shè)計就是來解決這個問題的。這種特別的開發(fā)方式能保證網(wǎng)頁適應(yīng)不同的分辨率，讓網(wǎng)頁要素重組，使其無論在垂直的平板電腦還是智能手機上，都能達到最好的視覺效果。

除了多終端的多樣化，我們還可以看到我們的電腦屏幕，手機屏幕都在不斷變大，而在對未來生活的預(yù)測、概念設(shè)計里，”屏幕”%

Queen譯者注：隨著平板電腦市場的迅猛增長，你可曾考慮到網(wǎng)站在平板上的用戶體驗？本文給出了6個提升網(wǎng)站平板體驗的簡易技巧，讓你花小氣力，出大成果，可謂事半功倍。要不你試試看。
原文鏈接：the-pursuit-of-tappiness

在這篇文章發(fā)布時，僅在美國就有近7000萬的平板電腦用戶，這比前一年的數(shù)據(jù)增加了一倍。這意味著，美國近30％的互聯(lián)網(wǎng)用戶使用平板設(shè)備上網(wǎng)瀏覽。2011年到2012年間，電子商務(wù)網(wǎng)站在平板電腦上的交易量增長了348％，第一次超越智能手機的交易量。由于平板市場很年輕，其未來的發(fā)展空間必定很大。
這一趨勢傳遞了一個強烈的信號：如果你的網(wǎng)站還沒有針對平板電腦進行設(shè)計的話，現(xiàn)在是時候優(yōu)先考慮其在平板電腦上的可用性了。否則，忽略這一點可能會對網(wǎng)站的整體轉(zhuǎn)化率，回訪量，銷售量等帶來負面影響。

什么是”點擊愉悅感”（tappiness）？

當一個網(wǎng)站具有”點擊愉悅感”時，用戶在手機或平板設(shè)備進行訪問的操作將變得容易而愉快。點擊愉悅感包括巧妙使用的空間，易于閱讀的文本，符合邏輯的交互線索，和大尺寸的點擊目標，這些讓訪問者瀏覽網(wǎng)站時充滿信心。

本設(shè)計中，大字體和大點擊目標的體驗很好，即使在平板電腦上縮小后，體驗依然不錯。
而在另一些設(shè)計中，文字太小無法閱讀，鏈接太接近容易誤操作，無形中增加了操作時間、復(fù)雜度以及體驗上的挫敗感。糟糕的體驗下，用戶將快速流失。

本設(shè)計中的小字體和小觸摸目標被證明在平板電腦上難以閱讀和使用。
一種理想選擇可能是：重新設(shè)計你的網(wǎng)站，讓它能針對各種不同設(shè)備進行自適應(yīng)布局，但時間和成本可能會使你無法完成這樣的全面翻新。然而你還有其他選擇。本文給出一些技巧和方法，能快速幫助你提升網(wǎng)站的平板用戶體驗，只需幾個簡單的變化，你今天就可以做到！

推薦一 ：（5星）

Smashing Magazine

網(wǎng)站的精選文章比較綜合，包括Design, Coding, Mobile, Word Press等，整體質(zhì)量很高，非常適合用戶體驗從業(yè)人員持續(xù)關(guān)注。

推薦理由：

1. 對于設(shè)計師而言，DESIGN, MOBILE, UX DESIGN這三個tag的內(nèi)容都很棒；
2. 文章總體質(zhì)量非常高，篇幅雖長，但很成體系；
3. 訂閱者超過1,100,000，用戶活躍度高，每篇文章的回復(fù)都很專業(yè)；
4. 超過1,700篇原創(chuàng)文章，890位作者，他們均有多年從業(yè)經(jīng)驗；
5. eBooks中很多優(yōu)秀書籍免費。

隨著CSS的廣泛應(yīng)用，透明元素在網(wǎng)頁設(shè)計中大量采用。

通過添加透明效果，可以增添頁面的對照感和可讀性，同時對整體的效果妨礙又不大，可謂一舉兩得。

一般來說，采用透明效果顯示區(qū)塊、展現(xiàn)數(shù)據(jù)，透明效果出現(xiàn)在很多輔佐元素當中，這樣前景元素就顯得非常突出。
讓我們來看看透明效果，這種優(yōu)雅而又華麗的效果。

Wavefront

整體構(gòu)成比較不拘一格，音樂節(jié)一般的氛圍。霓虹色彩，半透明區(qū)塊，讓色彩更加動感，很好的支持了主題。

Advies

頁面中含有很多透明條紋，中間的大區(qū)塊既不影響背景圖像的效果，也能很好的展現(xiàn)信息。

表單應(yīng)該就像個溫柔又有禮貌的服務(wù)生。想象你走進一間超級市場，走過兩旁堆滿商品的走道之后，左轉(zhuǎn)右轉(zhuǎn)，看到你想買的果醬并且挑選了兩罐放在購物袋中。

終于你走向結(jié)賬柜臺，一個笑容甜美的收銀人員對你溫柔的問好，并接過你手中的果醬，告訴你價錢，幫你包裝，然后找給你零錢和發(fā)票并且愉快的說再見。

現(xiàn)在你來到一個購物網(wǎng)站，在首頁看到許多特價商品，你點選了食品的分類選項，來到果醬的分類。稍微看了一下果醬的介紹文章，然后點擊鼠標把果醬放到購物車中，并點選結(jié)賬：結(jié)果出現(xiàn)的是一個冷淡又死氣沉沉的表單（Form）。

表單絕對是網(wǎng)站中用戶和系統(tǒng)互動的最主要的元素，網(wǎng)站透過表單向用戶提出問題，用戶則透過表單向網(wǎng)站表達他的想法。標單又可以細分成三種元素：1、說明目的的標簽；2、提供響應(yīng)的輸入方塊或選單；3、以及提交表單的按鈕。表單的設(shè)計就可以想象成一個稱職的服務(wù)生，他的服務(wù)應(yīng)該要符合下面幾個項目：

揭開iOS7扁平化的外衣，深入探索蘋果的新式設(shè)計語言，一起來猜想一下新的設(shè)計風(fēng)格是如何在iWatch iTv iCar上實現(xiàn)。

當談到Jony Ive，我們就不得不談到他在iOS7上的大改造，普遍看法是，這種改變僅僅是外觀上的改變，換湯不換藥。

iOS7的神秘面紗于2013年6月揭開，設(shè)計靈感來自德國已故傳奇設(shè)計師Otl Aicher。
Jony Ive在iOS上決定采用扁平化風(fēng)格，這就意味著以下幾點風(fēng)格的轉(zhuǎn)變：

1、用色愈發(fā)大膽、鮮艷；
2、界面會擁有更多的留白空間，讓元素更好的呼吸；
3、字體運用會更加優(yōu)雅靈活；
4、即將使用大量的幾何形狀。

這就是Jony Ive摒棄擬物設(shè)計的原因。iOS7的推出，也可以看成是Jony Ive對擬物設(shè)計的宣戰(zhàn)。

iOS7的扁平化設(shè)計非?！比f金油”，不但適應(yīng)了今天的iPhone以及iPad設(shè)備，也能夠應(yīng)用于未來的iWatch,iTV,iCar等設(shè)備。

D.A：我們都知道不管網(wǎng)頁還是移動應(yīng)用，響應(yīng)速度都是最重要的體驗指標之一，并且移動應(yīng)用的網(wǎng)絡(luò)環(huán)境不穩(wěn)定，速度的體驗顯得尤為重要。其實速度優(yōu)化不僅是程序員的事，設(shè)計，也能夠讓App變得更快。

1.后臺執(zhí)行

這是一條很通用，也容易理解的方法。用戶不會愿意盯著進度條傻傻地等待，除了”取消”沒有其他選擇。在系統(tǒng)處理一些網(wǎng)絡(luò)任務(wù)的時候，完全可以允許用戶做一些其他的事情。

各大平臺的發(fā)微博，都采用了后臺執(zhí)行。云閱讀的離線下載也采用后臺執(zhí)行。

而微博的看長圖(或視頻)，是個反例。網(wǎng)絡(luò)不給力時，要么等待1分鐘讓圖加載完，要不就只好放棄看圖。為什么不能讓圖加載的同時，用戶可以看其他微博呢？

2.在載入前顯示內(nèi)容

客戶端與web的一個不同點，客戶端的顯示內(nèi)容包括本地數(shù)據(jù)和網(wǎng)絡(luò)數(shù)據(jù)兩部分。在設(shè)計界面時，將更多的信息放在本地，在網(wǎng)絡(luò)數(shù)據(jù)未載入時即顯示本地數(shù)據(jù)，讓用戶產(chǎn)生一種”已經(jīng)載入一半了”的錯覺，即使最終的耗時一樣，心理感受也會更快。當然把數(shù)據(jù)過多地寫在本地，會犧牲一些靈活性，需要根據(jù)具體情況考慮。

越來越多的傳統(tǒng)企業(yè)擁抱移動互聯(lián)網(wǎng)，以補充完善原有渠道的目標推出自有企業(yè)的品牌app，比如傳統(tǒng)雜志社設(shè)計一款電子雜志app、傳統(tǒng)實體店商家推出電子商城app。這些傳統(tǒng)的做法已經(jīng)司空見慣，讓我們看看品牌大牛們有哪些不務(wù)正業(yè)的新玩法。

本文不談趨勢、不談技術(shù)，也不涉及廣告營銷思路。通過分析研究以下八大品牌app案例的設(shè)計表現(xiàn)手法，總結(jié)出一些品牌app創(chuàng)新設(shè)計要點，希望與大家進行交流探討。

【案例一】UNIQLO——清新型格的數(shù)字化生活工具

UNIQLO是一個擁有出色創(chuàng)新基因的日本服裝品牌，UNIQLO品牌所倡導(dǎo)的Life Wear（服適人生）哲學(xué)——“Clothes for a better life, for everyone, every day”不是單純將“衣食住行”的“衣”作為一種時尚，而是創(chuàng)造豐富人們?nèi)粘Ｉ畹囊路?，基于這個概念發(fā)表的各種數(shù)字化生活工具被歸類為“UNIQLO LIFE TOOLS”，下面就來介紹一下這些apps——UNIQLO WAKE UP、UNIQLO CALENDAR和UNIQLO RECIPE。

UNIQLO WAKE UP

作為一個工具型應(yīng)用，UNIQLO WAKE UP的歡迎語 “在隨著天氣而變化的音樂聲中開始新的一天，分享您的起床信息” 道出了它與其他鬧鐘app的不同。它集天氣、音樂、社交功能為一體，把起床和天氣聯(lián)系起來，配以的美妙女聲播報，原創(chuàng)背景音樂則是由世界知名音樂人Cornelius和菅野洋子合作完成。

小伙伴們可去官網(wǎng)感受下：http://www.uniqlo.com/wakeup/cn/pc/index.html?high=true

打開app默認的是天氣/時鐘界面，清新明亮的大色塊平鋪十分迷人，不同天氣會自動切換不同背景色和音樂。

在設(shè)計網(wǎng)頁和程序界面的時候，為了確保每一個像素的顏色、紋理和位置都準確地呈現(xiàn)，大多數(shù)設(shè)計師都會被搞得疲憊不堪。一不小心，一些很常用的操作像移動、旋轉(zhuǎn)和粘貼就會讓你的辛勤勞動付之東流。但是，如果能對你的工作流程做些小小的改動，就能在項目中始終保持作品的高質(zhì)量。

像素完美之旋轉(zhuǎn)

如果你不夠小心，那么在Photoshop中旋轉(zhuǎn)圖層就會使像素遭到明顯的破壞，出現(xiàn)模糊。

使用自由變換工具（或其他工具）把圖層旋轉(zhuǎn)90度或270度后，像素最終的顯示效果將取決于圖層的尺寸。如果圖層的寬和高都是偶數(shù)，你就可以幸免于難。如果圖層的寬和高都是奇數(shù)，也不會有問題。但是如果圖層的寬是奇數(shù)，高是偶數(shù)或者寬是偶數(shù)，高是奇數(shù)，那么你將會看到如下情景：

本例中原始圖層的尺寸為20×9像素：偶數(shù)×奇數(shù)。盡管位圖和矢量圖層在旋轉(zhuǎn)后的效果不一樣，但兩者都變得不可用了。這是由于圖層旋轉(zhuǎn)的中心點沒有落在某個像素邊界上導(dǎo)致的。

一種解決方法

當圖層的寬高為奇數(shù)×偶數(shù)或偶數(shù)×奇數(shù)時，旋轉(zhuǎn)后就會出現(xiàn)問題。因此，我們需要某種方法來保證圖層的寬高是偶數(shù)×偶數(shù)或奇數(shù)×奇數(shù)。也許你所想到的解決方法就是給要旋轉(zhuǎn)的圖層增加一個正方形的位圖蒙版或者添加更多的像素。除此之外，你還可以通過在另外一個圖層上繪制一個正方形后跟原始圖層同時旋轉(zhuǎn)來解決這個問題。

總而言之，只要圖層的寬高是偶數(shù)×偶數(shù)或者奇數(shù)×奇數(shù)就可以了。

一種更簡單的方法

在使用自由變換工具時，把旋轉(zhuǎn)的中心點挪到左上角（或其他任意一個頂角）就能確保它會落在某個像素的邊界上，這樣便能保證每次旋轉(zhuǎn)后的結(jié)果都是完美的。為此，你需要在選擇自由變換工具后在參考點設(shè)置按鈕上單擊下任意頂角再進行旋轉(zhuǎn)。這是目前為止最簡單有效的方法。

在QQ群與群友交流時，聊到網(wǎng)站如何做關(guān)鍵詞評估，交談中說到關(guān)鍵詞的搜索量、商業(yè)價值、競爭程度三個方面的評估。關(guān)鍵詞評估是關(guān)鍵字進行詳細的評估是否具備優(yōu)化的可行性，并從中選擇高搜索量、高相關(guān)性、低競爭的關(guān)鍵詞。

搜索量
搜索量是關(guān)鍵詞日搜索的檢索量，搜索量的高低決定著競爭度的大小。檢查關(guān)鍵詞的搜索量常用工具是百度指數(shù)、谷歌關(guān)鍵字工具等，如搜索“郵件營銷”關(guān)鍵詞是181（29/7）。

商業(yè)價值
關(guān)鍵詞商業(yè)價值指關(guān)鍵詞在行業(yè)中的地位，以及能給商家?guī)淼幕貓笞鳛楹饬繕藴?，通常使用在搜索引擎競價上。進入百度推廣賬戶，使用估算工具查詢關(guān)鍵詞預(yù)估價格。如預(yù)估“郵件營銷”排名前三名的價格是7元。

關(guān)鍵詞競爭度
關(guān)鍵詞競爭是搜索結(jié)果中參與優(yōu)化該關(guān)鍵詞的頁面有多少，網(wǎng)站有多少。例如搜索“郵件營銷”這個關(guān)鍵詞，返回的結(jié)果有2520000個頁面，前三頁直接使用首頁優(yōu)化的網(wǎng)站有11個網(wǎng)站，競爭程度是比較大的。

網(wǎng)絡(luò)上有一個計算關(guān)鍵詞競爭度的公式：關(guān)鍵詞競爭度=關(guān)鍵詞搜索量*10000/關(guān)鍵詞相關(guān)頁面數(shù)量。得到的結(jié)果越大，代表關(guān)鍵詞競爭越不激烈，越容易優(yōu)化，反之，結(jié)果越小，相對競爭度越激烈，越不容易優(yōu)化。如以“郵件營銷”舉例，搜索量是181，相關(guān)頁面是2520000，181*10000/2520000=0.72，該關(guān)鍵詞較難優(yōu)化。