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

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

21. 嘗試平滑過(guò)渡而不是突兀呈現(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)畫或者過(guò)渡的形式刻意制造的延時(shí)，給了用戶理解元素大小或者位置變化的必要的反應(yīng)時(shí)間。當(dāng)然了，你也要記住，我們應(yīng)該將過(guò)渡的時(shí)間控制在0.5s之內(nèi)，時(shí)間太久的話，用戶可能就會(huì)感到不適。對(duì)于那些只想快點(diǎn)完成任務(wù)的用戶，太長(zhǎng)時(shí)間的延時(shí)當(dāng)然會(huì)成為一種負(fù)擔(dān)。

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

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

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

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

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

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

在互聯(lián)網(wǎng)時(shí)代，誰(shuí)有互聯(lián)網(wǎng)思維?馬化騰，雷軍，周鴻祎他們有。他們?yōu)槭裁从谢ヂ?lián)網(wǎng)思維?因?yàn)樗麄兌际钱a(chǎn)品經(jīng)理!所謂的“互聯(lián)網(wǎng)思維”其實(shí)就是產(chǎn)品經(jīng)理的日常工作方法。這篇文章是一位資深產(chǎn)品經(jīng)理寫的故事，看過(guò)后，就算不是IT人，你也一定會(huì)有所收獲。

一家軟件公司接到了一個(gè)項(xiàng)目：開(kāi)發(fā)某報(bào)業(yè)集團(tuán)的圖片管理系統(tǒng)，老板決定成立一個(gè)跨部門的項(xiàng)目組來(lái)負(fù)責(zé)這個(gè)圖片系統(tǒng)。任務(wù)由產(chǎn)品經(jīng)理張曉龍負(fù)責(zé)，韓冰配合張曉龍的工作。

他們商量了一下，決定盡快開(kāi)一個(gè)項(xiàng)目啟動(dòng)會(huì)。會(huì)議的目的有兩個(gè)，一個(gè)是大家互相認(rèn)識(shí)一下，另外一個(gè)就是一起討論一下對(duì)于這個(gè)項(xiàng)目的看法，以及下一步的工作安排。

各位已經(jīng)工作了的小伙伴們，你們?cè)诟绢I(lǐng)導(dǎo)或是開(kāi)發(fā)、銷售等其他人討論產(chǎn)品的設(shè)計(jì)問(wèn)題是不是經(jīng)常聽(tīng)到這么兩個(gè)問(wèn)題:“我也是用戶啊，我就覺(jué)得xxx功能提好的啊”，“如果用戶需要xxx功能怎么辦”？

通常這個(gè)時(shí)候你是怎么回答的呢？是不是覺(jué)的他們好不講道理但又卻無(wú)法反駁？那今天老D給你講一個(gè)案例，一個(gè)故事講什么為什么需要用戶角色模型。

一家汽車公司準(zhǔn)備設(shè)計(jì)一款新車，他們的產(chǎn)品種類廣泛，一直以來(lái)的主要銷售對(duì)象是如下幾類人：

 A是個(gè)富二代，喜歡跑車，因?yàn)轳R力足、外形酷、好玩；

B是個(gè)家庭主婦，希望自己的車能安全、舒適、空間大；

C是個(gè)零售店主，經(jīng)常拉貨，所以希望自己的車解釋耐用；

D是個(gè)上班族，希望停車方便、省油；

E是個(gè)農(nóng)民，希望能夠結(jié)實(shí)耐用動(dòng)力強(qiáng)勁；

F..；

G...；

還有很多小眾的用戶需求

如果你看了很多優(yōu)秀的設(shè)計(jì)，但是自己卻仍然還覺(jué)得有所欠缺。來(lái)看看作者梳理的掌握交互設(shè)計(jì)的方法吧。

最近兩個(gè)月給公司的伙伴們做交互設(shè)計(jì)的分享，這是第一期分享的內(nèi)容。在這次分享中，我認(rèn)真梳理了交互設(shè)計(jì)師掌握和精通這門技藝的方法。我認(rèn)為，如果想成為拔尖的設(shè)計(jì)師，只有這條路可走。

什么是交互設(shè)計(jì)

用戶界面有兩部分的設(shè)計(jì)：交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)。在下圖中，左邊和右邊分別是微信的交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)。

交互設(shè)計(jì) vs. 視覺(jué)設(shè)計(jì)

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

順便講講我覺(jué)得重要的交互設(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è)畫板。

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

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

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