世界看臉，網(wǎng)站看Banner，門面當(dāng)然要漂亮，不過很多同學(xué)以為做Banner是門技術(shù)活兒，自己學(xué)藝不精做不了。如果你看了今天這篇文，就會(huì)明白，技術(shù)于Banner，就像刀法于人，雖有招式，但無內(nèi)功支撐，久戰(zhàn)必?cái)　６@篇好文，就是Banner的內(nèi)功修煉心法，按6個(gè)步驟來，速成可待。

資深交互設(shè)計(jì)師 ：團(tuán)隊(duì)小伙伴問到這個(gè)問題，發(fā)了一封郵件分享自己的思路，順便貼過來。

色彩心理學(xué)被廣泛地運(yùn)用到各個(gè)設(shè)計(jì)領(lǐng)域，這早已不是什么秘密。從日常的雜貨到LOGO設(shè)計(jì)，色彩所起到的作用越來越大，它是給用戶傳遞信息的最重要的因素之一。

 首先網(wǎng)頁首屏中的文字必須具備可讀性才行，所以你需要確認(rèn)文字與背景之間的色彩搭配能讓用戶看得清楚。當(dāng)你選擇一個(gè)暗色調(diào)的背景，那么你需要使用白色或者淺色的的文字，而當(dāng)背景比較素雅的時(shí)候，文字可以使用深色，這就是我所說的強(qiáng)化對(duì)比。

當(dāng)然，對(duì)比不僅限于色彩，文字同樣存在對(duì)比。文字與圖像相互配合，才能達(dá)到出人意表的效果。例如第一個(gè)案例，Packdog網(wǎng)站的設(shè)計(jì)，大圖作為背景，用色濃郁，文字則正好相反，輕薄而大小錯(cuò)落。這些對(duì)比強(qiáng)烈的元素組合在一起令人印象深刻。

表現(xiàn)層級(jí)關(guān)系

為了展現(xiàn)層與層的關(guān)系，是抽屜，是打開，還是平級(jí)切換等等，讓用戶知道這個(gè)界面和上一個(gè)、下一個(gè)的關(guān)系。這已經(jīng)是非常最常見的運(yùn)用了。

用戶體驗(yàn)，細(xì)節(jié)為王，今天推薦一篇看似簡單卻道理十足的文章，值得大家一起閱讀并且深思，我們是否在一些地方因?yàn)閼T性思維錯(cuò)過了提升產(chǎn)品體驗(yàn)的點(diǎn) >>>

感謝Ping++的@俞越 同學(xué)傾情相助，提供了譯文的初版，雖然還是要逐句理解進(jìn)行錯(cuò)譯修正和校對(duì)，和以前相比，也大大縮短了翻譯的時(shí)間。

譯者微信公眾號(hào)“開卷有譯”，歡迎關(guān)注唷。

相信做設(shè)計(jì)的同學(xué)對(duì)黃金螺旋線并不陌生，這是屬于純理論層面的知識(shí)，上面這張建筑圖片就是很明顯運(yùn)用了這個(gè)理論

譯者紀(jì)：本片文中包含大量的動(dòng)態(tài)頁面（原網(wǎng)站是視頻鏈接，本網(wǎng)站上傳視頻不能排序，故人工轉(zhuǎn)為動(dòng)圖），加載較緩慢，請(qǐng)各位多點(diǎn)耐心，么么噠

---

一個(gè)好的交互設(shè)計(jì)師可以很容易的解釋設(shè)計(jì)里面的決定背后的邏輯。這包含著信息架構(gòu)，頁面內(nèi)容的層次結(jié)構(gòu)，流程和所做的解釋。

遲早，動(dòng)效將會(huì)應(yīng)用到線框圖原型中，這個(gè)時(shí)候，再去對(duì)設(shè)計(jì)做決定或者是解釋，將會(huì)變的難一些。例如一些這樣的理由：太狂拽酷炫了……太潮了……太雞凍了……這將是設(shè)計(jì)失去其力度的領(lǐng)域（Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength.）在我們的設(shè)計(jì)中，動(dòng)效理應(yīng)占到更多的比重。我們應(yīng)該去定義動(dòng)效，并且闡述他們的目的——像我們闡述一個(gè)設(shè)計(jì)中其他的元素一樣。

什么是功能動(dòng)效？

一個(gè)好的用戶界面具有較高的轉(zhuǎn)化率和易用性。換句話說，它既能滿足商業(yè)用途也便于使用。以下是我們發(fā)現(xiàn)的一些想法清單。

上一篇：交互設(shè)計(jì)技巧：創(chuàng)造好的用戶體驗(yàn)（1）(翻譯)

21. 嘗試平滑過渡而不是突兀呈現(xiàn)

當(dāng)用戶進(jìn)行操作的時(shí)候，界面元素經(jīng)常會(huì)有出現(xiàn)、隱藏、移動(dòng)、轉(zhuǎn)換以及大小調(diào)整的動(dòng)作。作為對(duì)操作的回應(yīng)，為元素變化適當(dāng)添加時(shí)間延遲有時(shí)候讓用戶更容易理解剛剛發(fā)生了什么。以動(dòng)畫或者過渡的形式刻意制造的延時(shí)，給了用戶理解元素大小或者位置變化的必要的反應(yīng)時(shí)間。當(dāng)然了，你也要記住，我們應(yīng)該將過渡的時(shí)間控制在0.5s之內(nèi)，時(shí)間太久的話，用戶可能就會(huì)感到不適。對(duì)于那些只想快點(diǎn)完成任務(wù)的用戶，太長時(shí)間的延時(shí)當(dāng)然會(huì)成為一種負(fù)擔(dān)。

 22. 嘗試循序漸進(jìn)的引導(dǎo)而不是草率地讓用戶注冊(cè)

與其要求用戶立馬注冊(cè)，何不讓用戶先體驗(yàn)一些已示范的有價(jià)值的操作呢？在最初的交互過程中，不僅能展現(xiàn)產(chǎn)品的價(jià)值，也能顯示出產(chǎn)品的個(gè)性。一旦用戶開始看到你的產(chǎn)品的價(jià)值，了解產(chǎn)品對(duì)自己的用處，他們將更樂于與你分享更多的信息。這種循序漸進(jìn)的引導(dǎo)是一種盡可能推遲注冊(cè)過程的方法，同時(shí)還可以讓用戶使用和自定義你的應(yīng)用或產(chǎn)品。

一個(gè)好的用戶界面具有較高的轉(zhuǎn)化率和易用性。換句話說，它既能滿足商業(yè)用途也便于使用。以下是我們發(fā)現(xiàn)的一些想法清單。

  1. 嘗試使用一列布局代替多列

一列布局會(huì)讓你對(duì)全局有更好的掌控。它也能讓你的用戶預(yù)先對(duì)整體的內(nèi)容從上到下有一個(gè)大致的了解。然而多列布局則會(huì)讓用戶從頁面的核心內(nèi)容上分散注意力從而增加額外的風(fēng)險(xiǎn)。最好的方法是用一個(gè)有邏輯的敘述然后在文末加上一個(gè)行動(dòng)的口號(hào)來引導(dǎo)用戶。 

  2. 嘗試用禮物代替直接銷售

信息可視化包括了信息圖形、知識(shí)、科學(xué)、數(shù)據(jù)等的可視化表現(xiàn)形式，以及視覺可視化設(shè)計(jì)方面的進(jìn)步與發(fā)展。地圖、表格、圖形，甚至包括文本在內(nèi)，都是
信息的表現(xiàn)形式，無論它是動(dòng)態(tài)的或是靜態(tài)的，都可以讓我們從中了解到我們想知道的內(nèi)容，發(fā)現(xiàn)各式各樣的關(guān)系，達(dá)到最終解決問題的目的。信息可視化的意義就是在于運(yùn)用形象化方式把不易被理解的抽象信息直觀地表現(xiàn)和傳達(dá)出來。