日前，2016年天貓#雙11狂歡夜#晚會將于11月10日晚上8點在深圳大運中心體育館舉辦的消息已經(jīng)宣布了，超級碗、奧斯卡、美國偶像的總導(dǎo)演David Hill將會擔(dān)任此次晚會總導(dǎo)演，感覺會是一場掀起驚濤駭浪的視聽盛宴。

狂歡將至，天貓首波品牌宣傳海報出爐——貓頭，作為天貓最具識別性的品牌資產(chǎn)之一，在海報設(shè)計上依舊玩得淋漓盡致。天貓聯(lián)合40多家國際品牌，打響今年雙十一的第一炮。（可保存看大圖）

Spell（高級產(chǎn)品設(shè)計@Salesforce）：今年年初的時候，我寫了一篇關(guān)于2016年設(shè)計趨勢預(yù)測的文章。一方面為了記錄自己觀察到的一些現(xiàn)象，一方面讓自己養(yǎng)成每年總結(jié)的好習(xí)慣?；仡^一看，記錄下的點滴竟然逐一變成了現(xiàn)實，不禁感覺非常幸運。今天我來分享一下我自己對于2017年設(shè)計趨勢的觀察。

我會談到以下5點：

1. 微交互將會大量主導(dǎo)產(chǎn)品設(shè)計細(xì)節(jié)
2. 平，卻不再那么平了，顏色，字體和質(zhì)感將成為設(shè)計師追捧的視覺利器
3. The internet of everything真正崛起，將增加設(shè)計的復(fù)雜度
4. 人的距離將會無限被拉近
5. 觸覺聲音3D，我的五感都可以有交互

閱讀時間大約5分鐘。

在很長一段時間里面，網(wǎng)頁中的背景圖片元素，一直都生活在CSS、JS甚至視頻的陰影當(dāng)中，它的“參與感”并不強(qiáng)烈。不過隨著審美和用戶需求的逐步變化，背景圖片在網(wǎng)頁裝飾上，開始發(fā)揮著越來越重要的作用。

當(dāng)然，從總體上來看，變化并不明顯，但是在絕大多數(shù)的情況下，背景圖片開始作為主要的視覺驅(qū)動力而存在。

傳統(tǒng)意義上的背景主要是使用圖片，近幾年開始流行視頻背景了。而這些主要還是集中在網(wǎng)站的頁頭、Banner等位置，大多用來歡迎用戶，推薦內(nèi)容。許多網(wǎng)站都采取了相似的策略，讓用戶有所期待。

隨著動效的流行，現(xiàn)在越來越多的設(shè)計師開始試圖將CSS3、HTML5和JS等技術(shù)融入到背景設(shè)計中來，尋求全新的解決方案。事實上，現(xiàn)在已經(jīng)有四種不同類型的動態(tài)背景設(shè)計方案，它們風(fēng)格都非常符合時下流行的趨勢，且都具備不俗的發(fā)展?jié)摿?，今天我們聊聊這四種風(fēng)格前衛(wèi)大氣的背景設(shè)計。

最近藍(lán)藍(lán)設(shè)計在進(jìn)行工控類的軟件界面設(shè)計，我們也在搜集各方面的資料、國內(nèi)外的界面設(shè)計欣賞。一般來講，工控類軟件以操作、工具為主、注重嚴(yán)謹(jǐn)、穩(wěn)重、易用性、邏輯的清晰，其次是美觀。

賞。

每到一年一度的大促季，會場、頁面、互動游戲，都在緊張設(shè)計之中，這些精美的頁面和互動游戲，如何與用戶產(chǎn)生聯(lián)系？必然需要一條與用戶連接的紐帶 —— 它就是BANNER。有些人可能認(rèn)為資源位的設(shè)計相對簡單，但其實不然，小小的資源位承載著重大的使命，設(shè)計上自然也是下了一番功夫，那這一次的雙11我們是怎么做的？請聽我細(xì)細(xì)道來…..

曦村：在設(shè)計前期，做大致規(guī)劃，是很有必要的，在大促中雖然會有很多變化，但，做規(guī)劃會幫助我們在大方向上不出錯，這次，從了解業(yè)務(wù)背景及節(jié)奏 – 前期風(fēng)格創(chuàng)意設(shè)定 – 突出品牌增強(qiáng)識別度 – 制定規(guī)范提升效率等幾個方面去做，有了這個框架，這一次的設(shè)計過程還是相當(dāng)絲滑滴！那具體是怎么做的呢？

每當(dāng)要設(shè)計一個軟件界面的時候，設(shè)計師收集資料是必然的過程。最近北京藍(lán)藍(lán)設(shè)計要一個沉穩(wěn)嚴(yán)謹(jǐn)?shù)膒ad端軟件界面。

于是國內(nèi)外網(wǎng)站找了許多資料，集合一起，與大家分享！

1

整體的統(tǒng)一感知：大腦會將復(fù)雜的視覺內(nèi)容簡化為容易理解的整體，如圖所示；

為了對稱，我將她肩膀上的缺口補(bǔ)上了，但是作為一個形象剪影，她的頭發(fā)太像《星球大戰(zhàn)》中黑武士的頭盔了，所以發(fā)型還需要進(jìn)行一些調(diào)整。馬尾辮足夠現(xiàn)代，也非常女性化，看起來會給人年輕的感覺，但是在32像素的寬度之下，馬尾辮的效果看起來像是某種嚙齒動物。如果改成長發(fā)披肩或者其他的造型，在如此低的分辨率之下也難以準(zhǔn)確表達(dá)、消除歧義。所以，最終我使用了一個更加爽利精致的短發(fā)形象。

更新完女性剪影之后，問題來了：舊的男性剪影似乎也有些僵硬而過時。于是，我調(diào)整了男性剪影的發(fā)型，令其更加平滑，讓肩膀的弧度更大。在更新這個圖標(biāo)設(shè)計的時候，我發(fā)現(xiàn)Facebook的常常會用男性單人圖標(biāo)來表示“添加好友”。這樣的設(shè)定似乎并不公平，或者說是不準(zhǔn)確，難道所有的朋友請求都應(yīng)該用男性標(biāo)識來傳達(dá)么？唯一的性別圖標(biāo)是不恰當(dāng)?shù)模晕覝?zhǔn)備了一組。

清晰度是用戶界面設(shè)計最重要的元素。事實上，用戶界面設(shè)計的所有目的是為了使人們能夠與您的系統(tǒng)通過溝通和功能來進(jìn)行交互。 如果人們不知道你的應(yīng)用程序怎樣工作或在你的網(wǎng)站上應(yīng)該去哪里，他們會困惑和沮喪。

當(dāng)你已經(jīng)定義了你的目標(biāo)用戶而且只想通過一張嘴來提升產(chǎn)品，你應(yīng)該直擊它們的心靈和感受。如果你創(chuàng)造出了強(qiáng)烈的感受，你會使大家都在談?wù)撨@個產(chǎn)品。 因此，你應(yīng)該分析他們的需求和典型的人口特點來創(chuàng)造顯著的情緒反應(yīng)，這種情緒愿意與他人分享。順便說一句，這種反映的不同取決于產(chǎn)品的目標(biāo)不同：你可以敬 畏他們，震撼他們，驚訝他們，鼓勵他們，迷惑他們——任何強(qiáng)烈的感受將會鼓勵用戶告訴其他人這種體驗，并且與他人分享。