交互設(shè)計(jì)師的核心能力其實(shí)是三者的交集，這個(gè)也很容易看到，為什么交互其實(shí)是易學(xué)難精的，也就是你每放大一點(diǎn)點(diǎn)，你需要在每個(gè)維度上都放大很多，產(chǎn)品維度而言，如果你知道商業(yè)目標(biāo)，產(chǎn)品功能，運(yùn)營策略是如何制定出來，那你從源頭上就找到了和產(chǎn)品經(jīng)理對(duì)話的能力，開發(fā)維度而言，核心來講，是你得知道技術(shù)的約束邊界，知道可行性把握有多大，如果你還知道實(shí)現(xiàn)機(jī)制，，那你也能就找到了和開發(fā)工程師愉快合作的基石，設(shè)計(jì)維度，不多講，具備足夠的設(shè)計(jì)美感和設(shè)計(jì)品味是應(yīng)該的，對(duì)設(shè)計(jì)規(guī)范、用戶習(xí)慣了解越多，越能知道設(shè)計(jì)不應(yīng)該做什么，不干舍本逐末的事，從這個(gè)模型上，這也很容易解釋，為什么一個(gè)好的交互設(shè)計(jì)師要涉獵產(chǎn)品，開發(fā)，UI知識(shí)，做到最好比較全面的知識(shí)結(jié)構(gòu)，我們經(jīng)常講用戶體驗(yàn)，講體驗(yàn)設(shè)計(jì)，其實(shí)有句話我一直很認(rèn)同，誰講的不記得了“體驗(yàn)是個(gè)人的，體檢設(shè)計(jì)不是”。

順便講講我覺得重要的交互設(shè)計(jì)師好習(xí)慣。

一款基于HTML5 Canvas的折線圖表，這款HTML5折線圖表的特點(diǎn)有兩個(gè)，一個(gè)是圖表是有動(dòng)畫效果的，即在圖表初始化的時(shí)候帶有動(dòng)畫；第二個(gè)是這個(gè)HTML5折線圖表可以讓你動(dòng)態(tài)添加數(shù)據(jù)節(jié)點(diǎn)，并且用折線平滑地連接，Canvas是這款折線圖的一個(gè)畫板。

這次我們要來看一款純CSS3實(shí)現(xiàn)的響應(yīng)式分頁插件，對(duì)于分頁插件，之前我們也分享過一些，都是基于jQuery分頁插件。這款CSS3分頁插件可以完全自定義分頁條的樣式，包括鼠標(biāo)滑過時(shí)的背景顏色、頁碼的數(shù)量以及前后翻頁的按鈕。

這是一款基于純CSS3的菜單導(dǎo)航，這款菜單非常有個(gè)性，菜單背景是一頁古老的筆記本紙張，菜單項(xiàng)像是浮動(dòng)的文字一樣嵌入在紙張上。鼠標(biāo)滑過菜單項(xiàng)時(shí)會(huì)出現(xiàn)不同的背景線條，顯得相當(dāng)可愛。這款CSS3菜單導(dǎo)航非常適合在個(gè)人博客中使用。

chart.js是一款基于HTML5 Canvas的圖表插件，chart.js的功能非常強(qiáng)大，它不僅提供了常見的柱形圖、折線圖、餅狀圖，而且還提供了環(huán)形圖、雷達(dá)圖，樣式外觀多樣，圖表的色彩搭配也比較清新。chart.js還有一個(gè)特點(diǎn)就是圖表在初始化的時(shí)候有彈性動(dòng)畫，這也是HTML5 Canvas的一大功勞。

今天要分享的一款HTML5 Canvas圖表應(yīng)用提供了折線圖和柱形圖兩種，這款HTML5圖表在初始化數(shù)據(jù)的時(shí)候有一種漸現(xiàn)的動(dòng)畫，我們可以將這款圖表應(yīng)用在統(tǒng)計(jì)頁面上。

這是一款帶有3D動(dòng)畫的CSS3菜單，該菜單有以下幾個(gè)特點(diǎn)：首先是菜單時(shí)基于CSS3的，因此瀏覽器兼容性都還可以；其次這款菜單支持二級(jí)下拉菜單，功能上也基本能滿足大部分開發(fā)者；最后這款菜單最大的亮點(diǎn)在于展開下拉菜單時(shí)，子菜單可以旋轉(zhuǎn)的展開和收縮，給人3D的視覺效果。

老婆說，和我結(jié)婚兩年了，才大概知道交互設(shè)計(jì)是做什么的。（我還經(jīng)常給她講我在做什么設(shè)計(jì)）

老爸前幾周把我介紹給他朋友，說我是做人機(jī)智能的。（HCI和AI還是有點(diǎn)遠(yuǎn)好吧lol）

所以，對(duì)家人和朋友，做設(shè)計(jì)的人經(jīng)常講不清楚自己是干什么的。……

以前雅虎的老大說過一句話：

When I worked at Apple, I remember the panic Steve Jobs inspired simply by walking the halls & asking "What are you working on?"

也是這個(gè)意思，其實(shí)很多人不能用一句話講清楚自己是做什么的，價(jià)值是什么。

我覺得設(shè)計(jì)師一定要在這個(gè)點(diǎn)上沒有問題，因?yàn)楹?jiǎn)短的語言歸納能力對(duì)設(shè)計(jì)師太重要了。

我之前寫過一些設(shè)計(jì)準(zhǔn)則、設(shè)計(jì)思辨的文章，很多朋友問我，有點(diǎn)復(fù)雜，有點(diǎn)專業(yè)，能否簡(jiǎn)單明白地說一下。的確，對(duì)于設(shè)計(jì)師本來的圈子來說，這些思路可能不是難題；但是對(duì)于設(shè)計(jì)師面對(duì)的廣大群體來說，很多設(shè)計(jì)的話題需要有一種更簡(jiǎn)單的說話方式來概括。

試想下這樣的場(chǎng)景：

一個(gè)技術(shù)人員問：這個(gè)產(chǎn)品為什么要做專家訪談？

一個(gè)市場(chǎng)營銷人員問：設(shè)計(jì)中的品牌性到底如何體現(xiàn)？

一個(gè)朋友問：你明明是理工科畢業(yè)，不是學(xué)美術(shù)的，為啥要做設(shè)計(jì)？

一個(gè)業(yè)務(wù)線領(lǐng)導(dǎo)問：這個(gè)產(chǎn)品設(shè)計(jì)的統(tǒng)一性做的如何？哪兒有問題？

一個(gè)產(chǎn)品經(jīng)理問：老聽你說Affordance，到底是什么意思？

前我們已經(jīng)向大家分享過一些基于HTML5的地圖應(yīng)用，比如jQuery矢量SVG地圖插件JVectorMap，以及這款HTML5/CSS3帶區(qū)域地圖的聯(lián)系表單。今天要分享的這款HTML5地圖應(yīng)用是一張世界地圖，地圖元素是使用SVG繪制的，并且地圖可以拖拽和局部縮放，效果非常不錯(cuò)。

之前我們分享過很多漂亮的網(wǎng)頁按鈕動(dòng)畫，大家可以移步至CSS3按鈕分類下查看各種各樣的CSS3按鈕。這次要分享的這款CSS3按鈕有著質(zhì)感的背景，并且鼠標(biāo)滑過按鈕時(shí)按鈕邊框還會(huì)發(fā)光，呈現(xiàn)出3D立體的視覺效果。