交互設(shè)計(jì)是近幾年流行的一個(gè)詞語(yǔ)?，F(xiàn)在市場(chǎng)上有許多資料來(lái)介紹什么是交互設(shè)計(jì)，如何做交互設(shè)計(jì)等。從場(chǎng)景，任務(wù)，用戶(hù)，操作等分析。但由于受實(shí)際情況的限制，往往不能很深入。所以筆者結(jié)合實(shí)際工作體驗(yàn)與大家分享下，具體做設(shè)計(jì)時(shí)候是怎么考慮的。如果要說(shuō)什么是一個(gè)好的交互設(shè)計(jì)，個(gè)人淺見(jiàn)就是簡(jiǎn)單。本文以下內(nèi)容都是圍繞簡(jiǎn)單2字進(jìn)行展開(kāi)。

簡(jiǎn)單在本文中包括認(rèn)知和操作兩個(gè)部分：
1. 認(rèn)知主要是指人的思維過(guò)程，本文中主要說(shuō)明用戶(hù)是如何做決定的；
2. 操作在本文中說(shuō)明用戶(hù)的瀏覽和點(diǎn)擊行為。

先來(lái)說(shuō)下認(rèn)知，我們時(shí)常能夠看到“裝修前大清倉(cāng)，最后3天”。這些促銷(xiāo)用語(yǔ)，是商家用數(shù)字來(lái)制造稀缺，引起用戶(hù)的注意，我們就來(lái)說(shuō)說(shuō)：數(shù)字是如何引導(dǎo)用戶(hù)的。

制造稀缺和迫切的氛圍

要讓人們渴望做一件事，只需要使做這件事的機(jī)會(huì)難以獲得。
1. 時(shí)間（通常用倒計(jì)時(shí)的方式呈現(xiàn)，給用戶(hù)造成一種，“此時(shí)不買(mǎi)，只有后悔”的暗示，或者?? 推薦給好友，附帶一句“趕快買(mǎi)，馬上要結(jié)束了”）
2. 數(shù)量（限量200件，僅剩20件）

小結(jié)
1. 把原價(jià)，現(xiàn)價(jià)標(biāo)出來(lái)，再去掉原價(jià)。因?yàn)橹挥幸粋€(gè)價(jià)格用戶(hù)不知道有多便宜；
2. 給出原價(jià)，產(chǎn)生對(duì)比，幫助用戶(hù)決策。至于現(xiàn)價(jià)是不是真的，很多用戶(hù)不會(huì)考慮。

制造社會(huì)認(rèn)同,刺激用戶(hù)跟風(fēng)
社會(huì)認(rèn)同是指一種群體影響力，簡(jiǎn)單說(shuō)來(lái)，就是個(gè)人在群體中的從眾心理，人們傾向于認(rèn)為他人比自己更加了解所處的情況，他人的行為也總是合理和正確的。因此個(gè)人會(huì)做出和他人一樣的行為，來(lái)獲得群體的認(rèn)同，這種效應(yīng)就是“社會(huì)認(rèn)同”。

數(shù)字提醒，讓用戶(hù)非點(diǎn)不可
相信很多人都有立刻去點(diǎn)掉數(shù)字的沖動(dòng)。這里的數(shù)字提醒，筆者以為與前面的略有不同。

1. 起到最基本的提示引導(dǎo)作用；
2. 這里的操作會(huì)讓用戶(hù)上癮，從而培養(yǎng)用戶(hù)習(xí)慣，增加用戶(hù)粘性；
3. 對(duì)于平臺(tái)級(jí)的產(chǎn)品，是互相拉動(dòng)，形成一站式體驗(yàn)。

小結(jié)：
1. 數(shù)字不能弄虛作假，特別是電子商務(wù)網(wǎng)站，對(duì)于一些價(jià)格，時(shí)間、數(shù)量的數(shù)字要真實(shí)準(zhǔn)確；
2. 要在顯眼的位置把這些數(shù)字顯示出來(lái)，讓用戶(hù)有一個(gè)直觀的判斷和快捷的操作；
3. 對(duì)于“微”提醒，界面上要設(shè)計(jì)的顯眼，又不能打擾到用戶(hù)。

接下來(lái)就讓我們說(shuō)說(shuō)操作的簡(jiǎn)單：

這里筆者先拋出一個(gè)常見(jiàn)的場(chǎng)景：

1. 按鈕放這么遠(yuǎn)，用戶(hù)會(huì)看不到；
2. 按鈕能不能大點(diǎn)，生動(dòng)點(diǎn)，要有點(diǎn)擊欲。

這是日常工作中經(jīng)常碰到的事，在這里我們能不能去提煉下呢？

1. 邀請(qǐng)用戶(hù)操作（評(píng)論，購(gòu)買(mǎi)，注冊(cè)）—功能需求；
2. 要大，要近，要明顯—設(shè)計(jì)需求。

先來(lái)看一個(gè)事例：

這是來(lái)自Digg的截圖，Digg是一個(gè)社會(huì)化推薦的新聞?wù)军c(diǎn)，推薦是站點(diǎn)運(yùn)營(yíng)的核心，所以按鈕要大，要明顯，按鈕更不能隱藏，這好像是廢話。但需要引出本文一個(gè)概念—實(shí)時(shí)可見(jiàn)工具,該工具就是將用戶(hù)操作入口明確化，表現(xiàn)形式上是各種按鈕，文字鏈，圖標(biāo)等。接下來(lái)我們簡(jiǎn)單分析下它是否足夠簡(jiǎn)單：

1. 從認(rèn)知角度來(lái)看，在這里主要是視覺(jué)部分。通過(guò)文字的顏色和大小，明度和間距的變化起到層次感，主次突出，方便閱讀。
2. 從操作層面上來(lái)說(shuō)其實(shí)就是點(diǎn)擊，已近是最簡(jiǎn)單的了。所以需要通過(guò)按鈕的3態(tài)（默認(rèn)，懸浮，點(diǎn)擊）變化，動(dòng)畫(huà)效果（從Digg變到Dugg）等細(xì)節(jié)來(lái)提升產(chǎn)品的體驗(yàn)和口碑。

下面我們看看一些主流的SNS的feed設(shè)計(jì)是如何的?

Qzone

facebook

新浪微博

騰訊微博

Digg
里面包含了頭像，發(fā)布者，內(nèi)容，時(shí)間戳，操作入口等基本元素。這里需要考慮各元素之間的關(guān)系，從視覺(jué)上分清主次，從而方便閱讀,特別在大面積feed的情況下，不凌亂，干凈，整潔。是不是很簡(jiǎn)單，下面我們就看個(gè)反例，濫用按鈕會(huì)怎么樣。排布混亂，層次不清晰，具體就不累贅了。

現(xiàn)在讓我們看看Gmail是怎么做的。

突出標(biāo)記是對(duì)郵件分類(lèi)很重要的功能，所以將他默認(rèn)展示，通過(guò)明度調(diào)整使它從視覺(jué)上不突出，降低視覺(jué)干擾。點(diǎn)擊后用高亮顯示明確突出，簡(jiǎn)而言之，把最重要的東西默認(rèn)放出來(lái)，通過(guò)處理，降低視覺(jué)干擾。

最后我們小結(jié)下，實(shí)時(shí)可見(jiàn)工具需要注意的點(diǎn)：
1. 涉及用戶(hù)執(zhí)行重要操作，應(yīng)該保持始終可見(jiàn)；
2. 減少視覺(jué)干擾，重點(diǎn)突出
3. 保持可見(jiàn)操作最小化
接下來(lái)我們看下另一個(gè)工具——懸停即現(xiàn)工具，簡(jiǎn)單來(lái)說(shuō)就是鼠標(biāo)懸浮觸發(fā)操作入口。

這是很明顯的懸停操作，通過(guò)弱化背景，突出焦點(diǎn)區(qū)域的變化，來(lái)提示用戶(hù)操作。這種交互方式適合于圖片，列表等大面積的樣式，并且需要提供操作又不希望影響版面閱讀效果的場(chǎng)景。

隨著功能的越來(lái)越復(fù)雜，頁(yè)面承載信息也越來(lái)越多，如何平衡各種引導(dǎo)，操作，反饋是衡量一個(gè)交互工作的基本點(diǎn)。

這是一個(gè)照片編輯的事例，一般我們將顯示和編輯分離，通過(guò)操作入口進(jìn)入編輯頁(yè)面，保存后反饋。隨著技術(shù)的進(jìn)步，以前需要的頁(yè)面跳轉(zhuǎn)現(xiàn)在也可以局部刷新解決了。

接下來(lái)我們看一個(gè)例子：

好處：即時(shí)編輯不用跳轉(zhuǎn)，操作更方便，意味有更多元數(shù)據(jù)，從而產(chǎn)生更好的搜索和瀏覽體驗(yàn) 。

懸停即現(xiàn)工具-易發(fā)現(xiàn)性

懸停即現(xiàn)-需要考慮易發(fā)現(xiàn)性，因?yàn)槟惆阉[藏了。 所以對(duì)于交互提示需要設(shè)計(jì)的很明顯，這里，移動(dòng)到頭像上有浮雕效果，然后是下拉箭頭用藍(lán)色高亮顯示，點(diǎn)擊后三角形的箭頭方向變換。所有都是細(xì)節(jié)的變化，有時(shí)候我會(huì)想到是否做的太過(guò)了會(huì)。最近工作中也和同事討論，我們做產(chǎn)品做設(shè)計(jì)，有個(gè)假設(shè)：就是面對(duì)的海量用戶(hù)，他們的互聯(lián)網(wǎng)經(jīng)驗(yàn)很少，不明白哪里可以點(diǎn)擊，這個(gè)功能是什么意思。所以作為設(shè)計(jì)師需要做好引導(dǎo)，操作上把反饋?zhàn)鲎銐颍膭?lì)用戶(hù)去嘗試和探索。簡(jiǎn)單來(lái)說(shuō)，交互設(shè)計(jì)做的是產(chǎn)品的包裝，要會(huì)講故事，設(shè)計(jì)場(chǎng)景，吸引用戶(hù)后，通過(guò)貼心的引導(dǎo)來(lái)留住用戶(hù)。

小提示：

1. 用戶(hù)通常知道點(diǎn)擊圖像會(huì)有更多信息
2. 在主要的操作路徑觸發(fā)懸停內(nèi)容是個(gè)不錯(cuò)的方法

小結(jié)
1.? 操作不太重要，需要突出內(nèi)容的易讀性，可以講操作隱藏于鼠標(biāo)懸停之后
2.? 明顯操作的時(shí)候需要保證頁(yè)面布局不變化
3.? 編輯區(qū)域明顯
4.? 鼠標(biāo)狀態(tài)變?yōu)榫庉嫚顟B(tài)（I形）
５.? 空間合適的情況下可以放編輯入口

參考資料
1. http://www.socialbeta.cn/
2. 《web界面設(shè)計(jì)》

• (本文出自Tencent CDC Blog，轉(zhuǎn)載時(shí)請(qǐng)注明出處)