買了本《設(shè)計之下》，是搜狐UED團(tuán)隊寫的書，挺好的。今天又拿來體會了下，順便摘抄點下來，算是讀書筆記，感謝搜狐新聞客戶端UED團(tuán)隊。

一、解析需求

1、交互設(shè)計的五要素

人、動作（情感、典型、策略、用戶研究、流程、動機(jī)）、環(huán)境、工具、目的

創(chuàng)起來的流程是這樣子的，人，通過工具，完成動作，達(dá)到目的，在環(huán)境里。

2、解析需求的過程可以獲得以下兩點東西：

第一點、理清項目所設(shè)計的框架問題，以及沒一個功能之間的內(nèi)在聯(lián)系，為之后的原型設(shè)計奠定堅實的基礎(chǔ)；

第二點、通過分析項目所服務(wù)的用戶、平臺（包括硬件特性、交互方式和競品等多方面）、使用環(huán)境和目標(biāo)等，明確每一處設(shè)計的評估標(biāo)準(zhǔn)。

二、原型設(shè)計分為三階段

概念設(shè)計、低保真原型和高保真原型。概念設(shè)計用來傳達(dá)內(nèi)容，是最初的解決方案；低保真原型可以具體到信息的布局和傳遞，從框架細(xì)化到內(nèi)容；高保真原型則基本可以達(dá)到產(chǎn)品上線后的效果，此時交互設(shè)計師需要對每一個細(xì)節(jié)負(fù)責(zé)。

三、交互設(shè)計

<一>如何讓操作流程簡潔？

1、使用自然思維而不是程序思維。

做交互時應(yīng)該遵循用戶的認(rèn)知，并且結(jié)合生活實際情況來設(shè)計，不能用程序固話的邏輯思維來定義交互行為。

2、圍繞用戶的目的和行為來設(shè)計。

用戶看到產(chǎn)品的第一個想法是“我能用它來做什么？”，著手設(shè)計之前要理解用戶的目的和行為，他們想要做什么，先做什么再做什么，是否會再同一時間去做不同的事情，抱著不同的目的和心態(tài)，適合的操作流程可能會有很大的差異。

3、少點一次就更方便了嗎？

只要是有意義的點擊，都不會多于，交互設(shè)計師不能只管減少了操作步驟，應(yīng)該在減少步驟的同時減低用戶的認(rèn)真和使用障礙，操作步驟是根據(jù)任務(wù)來設(shè)定的，不是越少越好。

4、將常用的功能提前。

5、不妨遵循用戶已經(jīng)成型的用戶習(xí)慣。

<二>反饋的形式

1、氣泡狀提示

通常出現(xiàn)在畫面上過一會兒后就自動消失，用于告知任務(wù)欄狀態(tài)和操作結(jié)果。由于氣泡的特性，它容易被用戶忽略，所以并不適合承載太多的文字和重要信息。

2、彈出框

一般會承載兩個操作按鈕，有時候會強(qiáng)迫用戶操作并屏蔽背景的所有內(nèi)容，對用戶有打擾最大的一種提示效果。用戶通常會想馬上關(guān)掉，所以彈出框上的文字最好簡潔，能夠幫用戶快速做出決策。

避免濫用，如果不是太重要的反饋，就用氣泡提示用戶就行，避免嚇到用戶。

3、按鈕/圖標(biāo)/鏈接的按下狀態(tài)

這類反饋是基于人在現(xiàn)實世界中的經(jīng)驗來的，也是手機(jī)最常見的一種反饋。

4、聲音

能在一定程度上給用戶反饋，不過有時候會打擾到用戶，有時候又因為環(huán)境外因而導(dǎo)致聽不見，因此不能將聲音作為主要反饋，而且要你管給用戶能夠關(guān)掉提示音的權(quán)利。

5、震動

是比較強(qiáng)的觸覺反饋，可以用來代替或者加強(qiáng)聲音提示。在有些游戲中主角死亡時手機(jī)會震動，這種提示有些驚悚，所以最好不要亂用。

6、動畫

能給用戶提供有意義的反饋，幫助用戶直觀的了解到操作的結(jié)果。并且好的動畫能給用戶留下好的印象，提升愉悅感，甚至成為吸引用戶的一個因素。

在某些比較久的操作里，用戶動畫來提示操作的進(jìn)度，可減少用戶的焦慮。

<三>反饋出現(xiàn)的位置

1、狀態(tài)欄

此位置不是很顯眼，建議顯示不重要的或者跨畫面的提示。

2、導(dǎo)航欄

一般是連接狀態(tài)的展示，臨時將導(dǎo)航欄的內(nèi)容代替為連接狀態(tài)，表示當(dāng)前產(chǎn)品正在努力連接網(wǎng)絡(luò)拉去數(shù)據(jù)中，這個位置適合現(xiàn)實臨時的較為重要的提示類信息。

3、內(nèi)容區(qū)域上方

通常為下拉刷新，是加載新內(nèi)容的一種快捷方式，默認(rèn)的提示信息是隱藏的，向下拉才現(xiàn)實對應(yīng)的提示信息，以引導(dǎo)用戶進(jìn)行操作。

4、屏幕中心

反饋消息在屏幕中心，通常為整體的、比較重要的提示信息。需要引起用戶的重視的、系統(tǒng)的提示均可以顯示在此位置。

5、菜單欄上方

這個位置沒有限制，可根據(jù)需要靈活使用，可以是應(yīng)用的整體信息的提示，也可以是與界面底部內(nèi)容相關(guān)的提示。

6、底部

在次位置提示并沒有特別的好處，或許是對于新形勢的一種追求?，F(xiàn)在越來越多的應(yīng)用將彈出框放在此位置，因為彈出框本來就會屏蔽畫面，所以覆蓋在菜單欄剛好符合彈出框的交互特性。

總結(jié)：反饋的設(shè)計原則

為用戶在各個階段提供必要的、積極的、及時的反饋；

避免過度反饋，以免給用戶帶來不必要的打擾；

能夠及時看到效果的、簡單的操作可以省略反饋提示效果；

所提供的反饋要能讓用戶最便捷的方式完成選擇；

為不同類型的反饋做差異化設(shè)計；

不要打斷用戶的意識流，避免遮擋用戶可能會去查看或者操作的對象。

<三>動畫的重要引導(dǎo)作用

1、引導(dǎo)作用和提示作用

頁面層級結(jié)構(gòu)引導(dǎo)、手勢操作引導(dǎo)、狀態(tài)提示、隱藏功能提示、吸引注意力

2、反饋作用

邊界反饋、過程反饋、結(jié)果反饋

<四>考慮各種特俗的情況

無網(wǎng)絡(luò)、空白頁面、超量的內(nèi)容顯示、失敗、加載中、重復(fù)操作、輸入錯誤、分辨率影響

（以上內(nèi)容書書籍的交互設(shè)計部分，視覺部分的我沒摘抄，都是實戰(zhàn)型的內(nèi)容，建議去買書過來具體看。）

本文系 芒果道長 授權(quán)發(fā)布，轉(zhuǎn)載請注明來源于人人都是產(chǎn)品經(jīng)理并保留本文鏈接