編者按：本文總結(jié)的4個(gè)點(diǎn)都是新人做交互方案時(shí)容易遺漏的，看完可以查漏補(bǔ)缺，完善場(chǎng)景，建議閱讀。

作為一名交互設(shè)計(jì)師，到底什么程度才能算得上是“專業(yè)”？成為一名專業(yè)的設(shè)計(jì)師是否有方法與捷徑呢？答案是肯定的，但是今天我分享的內(nèi)容還不敢稱之為體系，只能說(shuō)是幾個(gè)小小的經(jīng)驗(yàn)吧，希望能給正在奔向?qū)I(yè)路上的你有所啟發(fā)。

如果你是設(shè)計(jì)新人，可能你現(xiàn)在還沒(méi)有完全形成自己的思維模式，那么以下這幾點(diǎn)你就可以開(kāi)始注意了，至少把這個(gè)幾點(diǎn)加入到你的考慮范圍內(nèi)是不會(huì)有錯(cuò)的！

這是一篇由國(guó)外萬(wàn)粉dribbble大神Justas
Galaburda免費(fèi)提供的圖標(biāo)設(shè)計(jì)指南，在國(guó)外的UI設(shè)計(jì)圈子里算是引起了不小的關(guān)注。與一些小伙伴所期待的可能不一樣的一點(diǎn)是，這是一篇側(cè)重于方法論方面的指南，涵蓋了從設(shè)計(jì)第一枚圖標(biāo)開(kāi)始到完成一整套圖標(biāo)所需要的一切，而不是一篇側(cè)重于軟件技術(shù)方面的指南。

定義框架

1、產(chǎn)品成功的原因在于幫助人們解決問(wèn)題。這點(diǎn)世人皆知，但卻是打造偉大產(chǎn)品最重要的認(rèn)知。

2、打造新產(chǎn)品的第一步就是弄明白要解決的問(wèn)題是什么，目標(biāo)用戶是誰(shuí)。這是在開(kāi)始思考任何解決方案之前最應(yīng)該弄清楚想透徹的。

3、你應(yīng)該問(wèn)的第二個(gè)問(wèn)題是“為什么這種特殊問(wèn)題值得（我們）解決？”

4、如果產(chǎn)品定義的目標(biāo)用戶范圍很窄（你自己也屬于這類特別用戶之一），那你或許可以依賴直覺(jué)來(lái)指導(dǎo)產(chǎn)品決策。如果不是，你就應(yīng)該依賴研究和數(shù)據(jù)來(lái)進(jìn)行決策。

5、如果你是初創(chuàng)公司的創(chuàng)始人，針對(duì)狹義用戶去解決痛點(diǎn)會(huì)幫助你有一個(gè)良好的開(kāi)端，當(dāng)有了初步的成果后，再擴(kuò)展到更大范圍的用戶群體。

6、你打算解決的問(wèn)題應(yīng)該能用一兩句話描述清楚，并與你的目標(biāo)用戶產(chǎn)生共鳴。如果沒(méi)有，考慮放棄或改變吧。

圖標(biāo)是設(shè)計(jì)項(xiàng)目中幾乎必不可少的一個(gè)組成部分，但是在圖標(biāo)的具體使用上，講究并不少。 如果你曾仔細(xì)瀏覽優(yōu)設(shè)的網(wǎng)站，應(yīng)該已經(jīng)看過(guò)不少圖標(biāo)設(shè)計(jì)的實(shí)戰(zhàn)案例。

1、強(qiáng)化視覺(jué)

還記得雙12期間打開(kāi)手機(jī)淘寶，總有這么個(gè)小入口在誠(chéng)意滿滿向你揮撒紅包優(yōu)惠券嗎，還記得它每天給你帶來(lái)多變的小驚喜嗎。對(duì)啦，它就是剁手界的彩蛋，買買買中的精靈：手淘雙12主會(huì)場(chǎng)小入口。

作為一家專門以開(kāi)發(fā)和研究色彩而聞名全球的公司，潘通（Pantone)是目前最有影響力的色彩標(biāo)準(zhǔn)供應(yīng)商，同樣的它也作為每年流行色的風(fēng)向標(biāo)而存在，每年、每個(gè)季度都會(huì)發(fā)布當(dāng)年的流行色，對(duì)于設(shè)計(jì)和時(shí)尚行業(yè)從業(yè)者而言，這都是相當(dāng)值得參考的。

最近Pantone 發(fā)布了2017年的年度色彩，草木綠（Greenery），色彩編號(hào)為15-0343。全新的草木綠充滿了自然的氣息，明亮、清新、干凈。對(duì)于這款全新的色彩，Pantone 是這樣描述的：“草木綠介于黃綠之間，它是喚醒春天的第一抹色彩，充滿了自然的生機(jī)，帶有重生、更始的意義。草木綠呈現(xiàn)出了植物蓬勃的生命力，將勃勃生機(jī)視覺(jué)化地呈現(xiàn)到用戶眼前，讓用戶不由得想深吸一口，提振情緒，重獲新生。”

白無(wú)常：許多設(shè)計(jì)師都習(xí)慣的把精力放在視覺(jué)元素的效果上，而忽視了視覺(jué)元素之間的位置關(guān)系。如果對(duì)設(shè)計(jì)的構(gòu)圖沒(méi)有了解，即便是精彩的畫面效果也發(fā)揮不了作用，甚至?xí)`解了傳播的信息。

設(shè)計(jì)構(gòu)圖的作用

構(gòu)圖過(guò)程是設(shè)計(jì)師從混亂的視覺(jué)元素中找到條理性，幫助觀者在各個(gè)視覺(jué)元素之間建立聯(lián)系，從而有助于他們閱讀。設(shè)計(jì)的構(gòu)圖的作用是為了加強(qiáng)視覺(jué)的張力增加設(shè)計(jì)的趣味性，吸引并引導(dǎo)著觀者的注意力。

Part 1：了解情緒

1.情緒的來(lái)源

情緒(Emotion)的詞根是“motere”，意為“行動(dòng)”。簡(jiǎn)單來(lái)說(shuō)，情緒是大腦的條件反射系統(tǒng)，反射出人類從古到今的生存經(jīng)驗(yàn)。當(dāng)危險(xiǎn)來(lái)臨時(shí)，情緒迅速反應(yīng)，根據(jù)經(jīng)驗(yàn)，調(diào)動(dòng)身體來(lái)應(yīng)對(duì)，來(lái)保證存活。正因?yàn)槿绱?，情緒會(huì)導(dǎo)致生理反應(yīng)，例如：生氣時(shí)，血液流到手部，方便攻擊；恐懼時(shí)，血液流到雙腿，方便逃跑；快樂(lè)時(shí)，身體恢復(fù)加快等等。這都是遠(yuǎn)古人類的生存經(jīng)驗(yàn)。

Janilychen：以往做一些H5的運(yùn)營(yíng)項(xiàng)目，都是動(dòng)畫設(shè)計(jì)師使用Animate cc（原來(lái)的Flash）先設(shè)計(jì)好動(dòng)畫原型，然后交給我們UI開(kāi)發(fā)來(lái)實(shí)現(xiàn)。做過(guò)動(dòng)畫開(kāi)發(fā)的童鞋都知道動(dòng)畫開(kāi)發(fā)都是比較耗費(fèi)時(shí)間精力的，而且還要高質(zhì)量的還原動(dòng)畫設(shè)計(jì)師設(shè)計(jì)好的動(dòng)畫，來(lái)回溝通成本也非常高。

那有沒(méi)有一種的方法來(lái)改善這種流程，提高開(kāi)發(fā)效率的同時(shí)還能完成高品質(zhì)的動(dòng)畫呢？

經(jīng)過(guò)一段時(shí)間的摸索，發(fā)現(xiàn)AnimateCC（就是原來(lái)的Flash）可以導(dǎo)出canvas動(dòng)畫，而且是基于createjs這個(gè)開(kāi)發(fā)輕量級(jí)游戲的js庫(kù)的，非常適合用來(lái)做移動(dòng)端的一些h5動(dòng)畫。不僅縮短制作動(dòng)畫所需要的時(shí)間。同時(shí)它也是一個(gè)可視化的IDE，不需要編寫代碼就可以完成高品質(zhì)的動(dòng)畫效果；還可以通過(guò)Javascript，為動(dòng)畫效果添加交互性。

編者按：Banner 是我們最常聊到的設(shè)計(jì)元素，它是一個(gè)網(wǎng)頁(yè)的招牌，是用戶最容易看到的視覺(jué)元素。今天，我們來(lái)聊聊Banner中的急先鋒，網(wǎng)頁(yè)首圖，它的設(shè)計(jì)之道。

網(wǎng)頁(yè)設(shè)計(jì)師都明白，網(wǎng)頁(yè)對(duì)于用戶的第一印象是非常重要的，而網(wǎng)頁(yè)給用戶的第一印象很大程度上取決于網(wǎng)頁(yè)的視覺(jué)設(shè)計(jì)?，F(xiàn)在的網(wǎng)頁(yè)雖然多種多樣，但是出于視覺(jué)化設(shè)計(jì)的目的，大多會(huì)使用大圖背景，或者超大尺寸的Banner。當(dāng)用戶一打開(kāi)網(wǎng)頁(yè)的時(shí)候，映入用戶眼簾的Banner ，是影響視覺(jué)設(shè)計(jì)的關(guān)鍵因素，它有個(gè)專門的術(shù)語(yǔ)是 Hero image，我們通常稱之為首圖。所以，網(wǎng)頁(yè)首圖的設(shè)計(jì)需要特別用心的。

網(wǎng)頁(yè)首圖不僅僅是一張漂亮的圖片，它還應(yīng)該是強(qiáng)大的視覺(jué)傳達(dá)工具。談情懷不如講套路，今天的文章，我們就通過(guò)一系列最佳實(shí)踐來(lái)為你展示首圖設(shè)計(jì)的一些設(shè)計(jì)“套路”。