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

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

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

我會(huì)談到以下5點(diǎn)：

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

閱讀時(shí)間大約5分鐘。

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

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

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

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

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

賞。

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

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

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

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

1

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

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

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

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

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