第一篇：彈窗設(shè)計(jì)常見的四種交互情況

http://www.tmdps.cn/

彈窗設(shè)計(jì)常見的四種交互情況

彈窗經(jīng)常在哪些情況下使用？設(shè)計(jì)上需要注意什么？

彈窗，顧名思義，是指彈出的窗口，強(qiáng)調(diào)一個(gè)彈字。無論是在web端還是在移動(dòng)端，彈窗都是一種十分常見的一種交互方式，經(jīng)常被用于以下四種情況：

1、廣告投放

2、用于系統(tǒng)提示、通知、警告類的消息彈窗。

3、用戶引導(dǎo)

4、顯示加載

接下來我們來逐個(gè)分析一下這四種情況：

1、廣告投放

作為網(wǎng)站的最重要的盈利方式，廣告彈窗被廣泛使用，但恐怕也是大家最討厭的一種廣告形式了。相信大家都有過類似經(jīng)歷，在家里打開一個(gè)網(wǎng)頁，你還沒反應(yīng)過來，里面就傳出了奇怪的呻吟聲或者是打斗的聲音，如果父母正好也在，簡(jiǎn)直超級(jí)心虛好嘛，但明明我就是看篇小說而已！而且這些彈窗的暗黑模式要不要那么心機(jī)啊，我急急忙點(diǎn)擊了關(guān)閉，為什么直接進(jìn)入了，而且聲音更大了，這個(gè)時(shí)候已經(jīng)是尷尬癌晚期了?

北京千鋒互聯(lián)科技有限公司 版權(quán)所有

http://www.tmdps.cn/

這樣的彈窗廣告無疑是有悖于用戶體驗(yàn)的，那為什么在如此重視用戶體驗(yàn)的互聯(lián)網(wǎng)氛圍內(nèi)，彈窗廣告依舊堅(jiān)挺呢？這就要看網(wǎng)站所屬公司的盈利模式了，比如我大學(xué)時(shí)候很喜歡看小說，但學(xué)生嘛沒錢，總會(huì)去看一些盜版小說，這些小說都是免費(fèi)的，那網(wǎng)站靠什么盈利呢？就是廣告投放，而且這些網(wǎng)站一般也沒什么優(yōu)秀設(shè)計(jì)師，所以廣告?zhèn)儽挤磐饴叮直┮靶U，毫不含蓄。這也是特定的環(huán)境造成的。

當(dāng)然作為一個(gè)設(shè)計(jì)師，我們站在公司盈利的角度下，如何設(shè)計(jì)優(yōu)雅的彈窗廣告，在降低用戶厭惡感的同時(shí)，提升廣告效果，又為公司賺取利益，是我們應(yīng)該思考的。

比如：

1、絕對(duì)不要聲音。這點(diǎn)說一個(gè)彈窗之外的視頻體驗(yàn)，相信大家都發(fā)現(xiàn)了，現(xiàn)在點(diǎn)開手機(jī)上的騰訊新聞，視頻播放默認(rèn)是關(guān)閉聲音的。終于可以在上班時(shí)間偷看視頻新聞不被發(fā)現(xiàn)啦！

2、關(guān)閉按鈕位置明顯，能迅速關(guān)閉。對(duì)廣告里的產(chǎn)品有興趣的用戶自然會(huì)點(diǎn)開，沒有興趣的用戶你強(qiáng)制進(jìn)入只會(huì)增加用戶的反感。

3、精準(zhǔn)投放廣告，讓用戶看到他想看到的。

如果你想要一種更有設(shè)計(jì)感的方式，那你可以參考一下知乎上了腳喵說的回答： 我覺得可以用“反向彈窗”，就是剛打開頁面的半秒鐘之內(nèi)存在廣告，且畫面吸引人，在人看清楚之前就收縮到頁面邊緣變成類似書簽的很薄的東西（收縮時(shí)最好有動(dòng)感，比如加速運(yùn)動(dòng)等），感覺是被“嚇跑”一樣，留下干干凈凈的頁面，并讓人出于好奇主動(dòng)用鼠標(biāo)去點(diǎn)擊（不是懸停）那些被收縮的小廣告。雖然也是廣告，但實(shí)際廣告效果肯定比彈窗要好。

小結(jié)：廣告彈窗作為網(wǎng)站盈利的重要模式，是無法杜絕的。設(shè)計(jì)師需要在商業(yè)利益和用戶體驗(yàn)上尋找平衡。

2、用于系統(tǒng)提示、通知、警告類的消息彈窗（也稱彈框）

提示確認(rèn)彈框

提示確認(rèn)彈框是在用戶需要的時(shí)候呼出，也用來防止用戶誤操作。看似簡(jiǎn)單的提示彈框又有哪些需要注意的點(diǎn)呢？

北京千鋒互聯(lián)科技有限公司 版權(quán)所有

http://www.tmdps.cn/

上圖是淘寶購物車中刪除商品時(shí)的確認(rèn)彈窗，元素很簡(jiǎn)單，文字+確認(rèn)、取消button+關(guān)閉icon，文字部分主觀性較強(qiáng)，就不做探討了。我們主要針對(duì)確認(rèn)、取消button和關(guān)閉icon來做三個(gè)方面的探討：

1、確定button放在左邊還是右邊？

2、確認(rèn)需要給出指示態(tài)hover嗎？（將“確認(rèn)”改變或填充顏色，突出“確認(rèn)”這個(gè)操作來引導(dǎo)用戶點(diǎn)擊）

3、關(guān)閉icon是否必須

為了解開這三個(gè)問題，我們先來對(duì)比一下Mac和windoes的系統(tǒng)彈框

北京千鋒互聯(lián)科技有限公司 版權(quán)所有

http://www.tmdps.cn/

上圖是UI中國刪除評(píng)論時(shí)的提示確認(rèn)彈框，一般這種情況純屬開發(fā)人員偷懶，直接調(diào)用了系統(tǒng)彈框。而對(duì)比Mac和windows的彈框，會(huì)發(fā)現(xiàn)有兩個(gè)不同點(diǎn)，一是Mac的確認(rèn)button在右，而Windows的確認(rèn)button在左，關(guān)于這一點(diǎn)，從用戶習(xí)慣看來，設(shè)計(jì)師應(yīng)該遵從用戶比例高達(dá)95%的Windows系統(tǒng)習(xí)慣來設(shè)計(jì)，即將確認(rèn)button放在左邊。二是Mac提示框右上角沒有關(guān)閉icon，這就不是不同平臺(tái)上用戶習(xí)慣不同的問題了，更關(guān)系到是否強(qiáng)制讓用戶做出選擇。如果沒有關(guān)閉icon，新手用戶必須閱讀文字之后再作出一個(gè)選擇，但如果用戶只是無意點(diǎn)開了呢，也必須讓用戶閱讀后再做出選擇嗎？顯然是違背用戶體驗(yàn)的。

因此在PC端關(guān)于上面三個(gè)問題的探討，答案是： 1.確定button放在左邊還是右邊？左邊 2.確認(rèn)需要給出指示態(tài)嗎？（hove態(tài)）需要

3.關(guān)閉icon是否必須。通常要有，但如果必須要讓用戶閱讀后做出選擇，則可以沒有。當(dāng)然，PC端的一些體驗(yàn)，到了移動(dòng)端就有所不同了，由于界面以及手指觸摸面積的限制，手指移動(dòng)去點(diǎn)擊關(guān)閉icon顯然不如直接選擇來的簡(jiǎn)單便捷。

北京千鋒互聯(lián)科技有限公司 版權(quán)所有

http://www.tmdps.cn/

確認(rèn)和取消的位置在移動(dòng)端如果確認(rèn)呢？看上圖的例子，IOS系統(tǒng)中朋友圈中的刪除是刪除后不可恢復(fù)的，因此刪除放在單手操作不那么容易觸達(dá)的左邊比較合適，而淘寶網(wǎng)刪除訂單是可以恢復(fù)的，因此確認(rèn)放在右邊比較合適。在我看來，雖然移動(dòng)端普遍遵從IOS規(guī)范，但其實(shí)確認(rèn)放在左邊或者右邊區(qū)別并不大，但每個(gè)設(shè)計(jì)師都可以有自己的規(guī)范。

而至于是否要有指示hover態(tài)，要根據(jù)情況來定了，如果是希望引導(dǎo)用戶進(jìn)入下一步操作的，比如希望用戶點(diǎn)擊確認(rèn)，那么就將“確認(rèn)”兩個(gè)字改變顏色突出出來，以方便用戶點(diǎn)擊。但如果是希望用戶自己選擇，則不用給出指示hover態(tài)。

因此在移動(dòng)端的答案是：

1、確定button放在左邊還是右邊？區(qū)別不大，但在我看來，需要根據(jù)操作是否謹(jǐn)慎來定，比較謹(jǐn)慎的操作放在左側(cè)來防止誤操作，相對(duì)隨意的操縱則放在右側(cè)比較符合用戶的心理模型

2、確認(rèn)需要給出指示hover態(tài)嗎？需要用戶自己決定的操作，不需要給出指示。

3、關(guān)閉icon是否必須。不需要關(guān)閉icon

北京千鋒互聯(lián)科技有限公司 版權(quán)所有

http://www.tmdps.cn/

好評(píng)提示

有的APP進(jìn)去之后就會(huì)彈出提示讓你好評(píng)，可是我瀏覽頁面正high呢，一下子彈出來這個(gè)來打擾我，如果我當(dāng)時(shí)心情不錯(cuò)，我可能會(huì)選擇下次再說或者不再提示，但如果心情不好，我就好想進(jìn)去給他個(gè)差評(píng)啊，但是進(jìn)入APP Store又要連要一會(huì)兒，干脆就放棄了。

上圖是豆果美食的評(píng)價(jià)彈框，在我注冊(cè)的關(guān)鍵時(shí)刻給我一個(gè)評(píng)價(jià)彈框，就好像我去你家做客，我還沒進(jìn)門呢，你就問我這次招待的怎么樣？這個(gè)時(shí)間點(diǎn)把握的是非常不合理的。

關(guān)于提示評(píng)價(jià)的彈框，我覺設(shè)計(jì)師要注意兩點(diǎn)：

1、在合適的時(shí)候給出提示評(píng)價(jià)的彈框、至少也要是用戶使用了一段時(shí)間之后，避免在用戶剛剛使用，或者正在注冊(cè)的時(shí)候提示評(píng)價(jià)。

2、要給出下次再說或者不再提示的選項(xiàng)，如果強(qiáng)制性的讓用戶評(píng)價(jià)，即使用戶想給好評(píng)，AppStore也不給力呀，要等那么久才能連接上，挑戰(zhàn)用戶耐心的結(jié)果可能是：用戶本來對(duì)APP還是有好感的，結(jié)果把對(duì)AppStore連接慢的差評(píng)一起給你。

北京千鋒互聯(lián)科技有限公司 版權(quán)所有

http://www.tmdps.cn/

通知類彈框

最常見的就是新聞推送了，例如騰訊新聞的通知彈框會(huì)把一些熱點(diǎn)事件通知給你，你可以選擇現(xiàn)在就看，也可以選擇暫時(shí)不看，這類通知彈窗最重要的也是需要根據(jù)用戶瀏覽新聞的習(xí)慣和愛好進(jìn)行通知，有一句話特別形象，你愛的人吻你，那是愛情；你不愛的人吻你，那就是流氓。還有插一句我對(duì)體育新聞?wù)娴臎]有興趣，騰訊下次不要給我推了。

2、警告類的彈窗

網(wǎng)站殺毒軟件檢測(cè)到威脅的消息彈窗，一般都是被用戶喜歡的，因?yàn)檫@些給用戶提供了很多消息，幫助用戶全面了解更多信息做正確的決策。但是如果頻繁出現(xiàn)威脅消息，也容易引發(fā)用戶內(nèi)心恐慌與不安。度要把握好，同時(shí)形式也很重要。

3、引導(dǎo)性的彈窗

北京千鋒互聯(lián)科技有限公司 版權(quán)所有

http://www.tmdps.cn/

用戶經(jīng)常需要一些引導(dǎo)，比如在玩游戲的過程中，彈窗告訴你該怎么玩，這種引導(dǎo)在用戶需要的時(shí)候適時(shí)出現(xiàn)，不但不會(huì)引起用戶反感，還會(huì)幫助用戶，提升用戶好感度

引導(dǎo)性彈窗也常見于產(chǎn)品業(yè)務(wù)需要而出現(xiàn)，比如游戲中的注冊(cè)，領(lǐng)取禮物、購買道具等，這是良性的運(yùn)營推廣和商業(yè)利益的獲取，但是在什么環(huán)節(jié)，彈出什么功能，哪個(gè)時(shí)間點(diǎn)上適度出現(xiàn)是設(shè)計(jì)師需要考慮的。用戶并非都忽略彈窗或者看見付費(fèi)就關(guān)閉，點(diǎn)開后能否繼續(xù)吸引用戶、幫助用戶才是最重要的。

4、顯示加載進(jìn)程的彈窗

北京千鋒互聯(lián)科技有限公司 版權(quán)所有

http://www.tmdps.cn/

緩解了用戶在等待過程中的焦慮感。如果能加上生動(dòng)有趣的動(dòng)畫，還能在加載的過程中提升用戶好感度。

總結(jié)：彈窗作為在頁面中彈出來的框，自帶打擾用戶的屬性，這個(gè)屬性是一把雙刃劍，如果設(shè)計(jì)師運(yùn)用得當(dāng)，在合適的時(shí)機(jī)彈出用戶需要的彈窗，將會(huì)給產(chǎn)品帶來良好的用戶體驗(yàn)，即使是暗黑模式，也能降低用戶的反感。

相信我們通過不斷的深度思考，能在商業(yè)利益和用戶體驗(yàn)上找到平衡點(diǎn)。

北京千鋒互聯(lián)科技有限公司 版權(quán)所有

第二篇：常見家譜四種格式

常見家譜四種格式

四種格式家譜

歐式、蘇式、寶塔式和牒記式

歐式

：又稱橫行體，是北宋文學(xué)家歐陽修創(chuàng)立的。歐式 的特點(diǎn)是：世代分格，由右向左橫行，五世一表，用起 來很方便。歐式中，每個(gè)世代人名左側(cè)都有一段生平記 述，介紹該人的字、號(hào)、功名、官爵、生辰年月日、配 偶、藏地、功績(jī)等。

蘇式

：又稱垂珠體，是北宋文學(xué)家蘇洵創(chuàng)立的。蘇式世

系表的特點(diǎn)是：世代直行下垂，世代間無橫線連接，全 部用豎線串連，圖表格式也是由右向左排列的，主要是 強(qiáng)調(diào)宗法關(guān)系。

寶塔式 ：

顧名思義，就是將世代人名象寶塔一樣，由上

向下排列。寶塔式采用橫豎線連接法，豎線永遠(yuǎn)處在橫 線的中間，這對(duì)人多的大家族來說，因人名不可能排在 同一頁紙上，兄弟之間長幼關(guān)系不清，會(huì)為寫譜、看譜 帶來很多不便。此種圖譜最遲在南宋時(shí)期出現(xiàn)，其特點(diǎn) 是將始祖置于上方正中位置，后世子孫按輩分依次排列，每一父輩必置于字輩的上方正中，這樣家庭成員的親疏、血緣關(guān)系表現(xiàn)的非常明了。但寶塔式的缺點(diǎn)是，當(dāng)家族 發(fā)展到一定程度，就無法將世系在一張紙上畫出，而且

由于各支系子嗣多寡不一，難以保持圖譜整體上的均衡，容易給人一種不整理的感覺，另外寶塔式圖譜在附記履 歷時(shí)由于篇幅有限也受到較大的限制。

牒記式

：不用橫豎線連接世代人名間的關(guān)系，而

是純用文字來表述這種關(guān)系。每個(gè)人名下都有一個(gè)相關(guān) 的簡(jiǎn)介，如：字、號(hào)、功名、官爵、生辰年月日、藏地、功績(jī)等。牒記式的世系形式固定，次序分明，比較節(jié)約 紙張。牒記式家譜類似于每位家庭成員的簡(jiǎn)歷匯編，其 起源大約是源于歐式圖譜，大致相當(dāng)于歐式圖譜后面的 傳記部分。其優(yōu)點(diǎn)是世系固定，依次分明，因此有不少 家譜采用這一圖譜。

以上四種家譜形式都各有特色，這是一般族譜中比 較常見的，但也有其它的變化，我們?cè)谟浭黾易迨老当?時(shí)，可根據(jù)掌握材料的多少、家族成員的多少等靈活運(yùn) 用，總之，家譜要易看易懂、內(nèi)容真實(shí)、層序分明，這 才是最為重要的。

關(guān)于家譜編輯格式的諸多內(nèi)容供大家參考：

一、譜名一般均稱為家譜、宗譜、族譜、家乘、世譜、統(tǒng)譜、支

譜、祖譜、合譜、聯(lián)宗譜、大成譜、房譜等，也有的稱為譜傳、真譜、淵源錄、源流考、清芬錄、世典、世牒、世恩錄、故譜、族譜圖、族

系、族講、石譜、世家、私譜、本書、大同譜、鄉(xiāng)賢錄、傳芳集、家

傳簿、先德傳、系譜、譜志略、家譜匯編、家模匯編等，可謂名目繁 多。

二、譜序稍具規(guī)模的家譜，卷首一定會(huì)有一篇至幾十篇不等的序

文，它是每部家譜不可缺少的內(nèi)容之一。譜序包括新序、舊序、族外

人的客序、跋語、目錄和刻印人名以及其它關(guān)于本族的記述。

三、譜例又稱凡例，主要是闡述家譜的纂修原則和體例。一般而 言，一些家譜在每一次續(xù)修時(shí)都會(huì)訂出若干條適合社會(huì)潮流與需要的 規(guī)則，以作為修譜時(shí)所要遵循的原則。

四、譜論許多家譜都專門辟有譜論一章，專收先賢的譜說、譜論、譜議的篇章和古代經(jīng)典中的有關(guān)論述，對(duì)修譜的作用、功能、意義、歷史、原理、方法等加以發(fā)明和闡述，是研究譜學(xué)的寶貴資料。

五、恩榮錄主要內(nèi)容為歷代皇帝對(duì)家族中的官員及其家譜的敕書、詔命、賜字、賜匾、賜詩、賜聯(lián)、御謚文、御制碑文以及地方官府的 贈(zèng)諭文字等，以顯示和炫耀朝廷對(duì)該家庭及其成員的獎(jiǎng)勵(lì)和表彰，同

時(shí)反映高家族的地位和身份。

六、像贊

祖先及家族中歷代英賢、重要人物的圖像資料，一般為 正面是遺像，背面是像贊。

七、姓氏源流中國家譜素來有 “

敘本系，述始封 ” 的傳統(tǒng)，明清以

來各家譜也大多有記姓氏源流的一章，或稱姓氏源流，或稱宗族源流。

它主要是用來記述本姓來源、本族的歷史淵源、始祖、世派、遷徙、各支派間關(guān)系甚至改姓的原委等。

八、族規(guī)家法是宗族家族成員共同制定的、用以約束和教化族人 的宗族法規(guī)，是家譜中的重要組成部分。其名稱各異，種類很多，諸

如家規(guī)、家約、家戒、家法、家禮、家典、家儀、家條、族規(guī)、族約、祠規(guī)、祠約、規(guī)范、規(guī)條、規(guī)矩、條規(guī)、戒諭等。

九、祠堂記載宗族、家族祠堂修建的歷史，介紹祠堂的建筑規(guī)模、地理位置，收錄有關(guān)祠堂的碑文、詩文、祠聯(lián)、祠匾、祠堂圖，建祠

捐資人名，記錄祠堂內(nèi)神位世次、配享、附享、祭祀情況等。

十、五服圖又稱服制圖。所謂五服，就是指古代喪服制度中的五

種服色，即斬衰、齊衰、大功、小功、緦麻。喪服是根據(jù)生者與死者的遠(yuǎn)近親疏關(guān)系而穿著的一種服飾。因五服本身就表明生者與死者的 親疏遠(yuǎn)近關(guān)系，同時(shí)又表明與死者同有關(guān)系的生者與生者之間的遠(yuǎn)近親疏關(guān)系，所以不僅在執(zhí)行喪禮時(shí)要涉及到，而且在執(zhí)行宗族、家族

事務(wù)及執(zhí)行法律時(shí)也必須涉及，所以家譜中一般都載有五服圖。

敦宗睦族

忠誠為人做實(shí)事

弘揚(yáng)祖德

和諧網(wǎng)絡(luò)興家園

第三篇：大神UI彈窗設(shè)計(jì)經(jīng)驗(yàn)總結(jié)

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 大神UI彈窗設(shè)計(jì)經(jīng)驗(yàn)總結(jié)

當(dāng)你將彈窗設(shè)計(jì)及使用得恰到好處時(shí)，它們就會(huì)是非常有效的用戶界面元素。它們能幫助用戶快速且便捷地達(dá)成目標(biāo)。然而當(dāng)錯(cuò)誤使用時(shí)，彈窗卻會(huì)困擾你的用戶。學(xué)會(huì)如何設(shè)計(jì)彈窗，會(huì)幫助你在使用時(shí)避免那些可能對(duì)用戶造成的困擾。

加上這篇《騰訊設(shè)計(jì)師做了100個(gè)彈框后總結(jié)的設(shè)計(jì)經(jīng)驗(yàn)》 學(xué)會(huì)彈窗設(shè)計(jì)就沒問題了！1，什么是彈窗？

彈窗是一個(gè)為激起用戶的回應(yīng)而被設(shè)計(jì)、需要用戶去與之交互的浮層。它可以告知用戶關(guān)鍵的信息，要求用戶去做決定，抑或是涉及到多個(gè)操作。彈窗越來越廣泛地被應(yīng)用于軟件、網(wǎng)頁、以及移動(dòng)設(shè)備中，它可以在不把用戶從當(dāng)前頁面帶走的情況下，指引用戶去完成一個(gè)特定的操作。

UI設(shè)計(jì)

圖1，會(huì)話過期彈窗

現(xiàn)在讓我們來看看有哪些優(yōu)秀的彈窗設(shè)計(jì)和使用方法。

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 原則1，減少干擾

由于彈窗會(huì)中斷操作，要盡可能地少使用彈窗。突然出現(xiàn)的彈窗會(huì)強(qiáng)迫用戶去停止他們當(dāng)下正在進(jìn)行的任務(wù)，并轉(zhuǎn)而專注于彈窗中的內(nèi)容。在繼續(xù)之前，用戶必須要面對(duì)這個(gè)彈窗，否則將無法對(duì)彈窗之下的頁面進(jìn)行操作。當(dāng)這個(gè)用戶必須要確認(rèn)一個(gè)關(guān)鍵的操作時(shí)，這就是好的，但是在大部分情況下彈窗是不太有必要的，甚至?xí)鹩脩舴锤小Ｐ枰_認(rèn)

在你需要用戶去互動(dòng)才可繼續(xù)時(shí)，或當(dāng)犯一個(gè)錯(cuò)誤的成本會(huì)很高時(shí)，使用彈窗是最合適且最合理的。

UI設(shè)計(jì)

圖2，這里告知了用戶一個(gè)情況，需要用戶確認(rèn) 不要突然打開彈窗

在用戶沒有做任何操作時(shí)突然打開彈窗，是非常糟糕的設(shè)計(jì)。許多網(wǎng)站用訂閱框來轟炸它們的用戶，就如下面的例子：

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/

UI設(shè)計(jì)

圖3，諸如此類的彈窗給沒有鍵盤的用戶造成了數(shù)不清的麻煩

彈窗的出現(xiàn)應(yīng)該永遠(yuǎn)基于用戶的某個(gè)操作。這個(gè)操作也許是點(diǎn)擊了一個(gè)按鈕，也許是進(jìn)入了一個(gè)鏈接，也可能是選擇了某個(gè)選項(xiàng)。小結(jié)

不是每個(gè)選擇、設(shè)置、或細(xì)節(jié)都有必要中斷用戶當(dāng)前的操作。

彈窗的備選方案有菜單以及同框內(nèi)的擴(kuò)展，這兩種控件都可以保持當(dāng)前頁面的延續(xù)。可不要突然跳出彈窗，應(yīng)該讓用戶對(duì)彈窗的每次出現(xiàn)都有心理預(yù)期。原則2，彈窗應(yīng)與現(xiàn)實(shí)世界相關(guān)連

彈窗應(yīng)該使用用戶的語言（用戶熟悉的文字，短語和概念），而不是一些系統(tǒng)特有的專有名詞。表述清晰的問題和選項(xiàng) ? ? ?

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 在彈窗的內(nèi)容區(qū)域，應(yīng)該使用一個(gè)表述清晰的問題或陳述，例如“清除您的存檔？”或“刪除您的賬戶？”總之，應(yīng)該避免使用含有歉意的、模凌兩可的、或者是反問式的語氣，如“警告！”“你確定嗎？”

UI設(shè)計(jì)

圖4，左邊的彈窗提出了一個(gè)很模凌兩可的問題，并且這個(gè)操作可能影響的范圍并不明確；右邊的彈窗提出的問題相當(dāng)明確，它解釋了此次操作對(duì)用戶的影響，并且提供了指向清晰的選項(xiàng)。盡可能不要給用戶提供可能產(chǎn)生混淆的選項(xiàng)，而應(yīng)該使用那些文意清晰的選項(xiàng)。大部分情況下，用戶應(yīng)該能夠只通過彈窗的標(biāo)題和按鈕，就了解他們有哪些選項(xiàng)。

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 反例：這個(gè)按鈕的文字“不”的確回答了彈窗內(nèi)的問題，但是并沒有直接告訴用戶點(diǎn)擊后會(huì)發(fā)生什么。

UI設(shè)計(jì)

圖5，安卓的系統(tǒng)彈窗

改成這樣：肯定的操作文字“放棄” 很明確地指示了選擇這個(gè)選項(xiàng)的后果。

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/

圖6，安卓的系統(tǒng)彈窗 提供重要的信息

一個(gè)彈窗不應(yīng)該把對(duì)用戶有用的信息說得含糊不清。舉個(gè)例子，如果一個(gè)彈窗要讓用戶確認(rèn)刪除某些條目，就應(yīng)該把這些條目都列出來。

UI設(shè)計(jì)

圖7，這個(gè)彈窗很簡(jiǎn)要地指明了這個(gè)操作的結(jié)果

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 另外，避免使用“了解更多”按鈕去連接到幫助文檔；在彈窗同一頁面展開則是更好的選擇。如果還需要顯示更多的信息，則將其放在進(jìn)入彈窗之前的頁面。提出有（關(guān)鍵）信息的反饋

當(dāng)一個(gè)流程結(jié)束時(shí)，記得顯示一條提示信息（或視覺反饋），讓用戶知道自己已經(jīng)完成了所有必要的步驟。

UI設(shè)計(jì)

圖8，在完成一個(gè)操作后成功的例子 小結(jié)

在彈窗中使用語意清晰的問題和選項(xiàng)。設(shè)計(jì)促進(jìn)操作完成的彈窗。

在操作完成后，提示用戶操作已經(jīng)完成了。原則3，講求極簡(jiǎn) ? ? ?

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 別試著把太多東西擠在一個(gè)彈窗內(nèi)。要保持干凈和簡(jiǎn)約（遵從KISS原則）。然而極簡(jiǎn)主義并不意味著被局限住，你提供的所有信息都該是有價(jià)值并且與之相關(guān)的。元素與選項(xiàng)的數(shù)量

彈窗絕不應(yīng)該只是部分顯示在屏幕上。因此不要使用有滾動(dòng)控件的彈窗。

反例：巴克萊銀行的付款處理彈窗包括了許多的選項(xiàng)和元素，部分的選項(xiàng)只有滾動(dòng)后才能看到（特別是對(duì)于屏幕通常較小的移動(dòng)設(shè)備）

好的例子：Stripe使用了一個(gè)簡(jiǎn)單并且聰明的彈窗，只顯示了最基本的信息，這樣不管在桌面端上還是移動(dòng)屏幕上看起來都會(huì)很不錯(cuò)。

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/

官網(wǎng)：http://www.tmdps.cn/

UI設(shè)計(jì)

操作的數(shù)量

彈窗不該提供超過兩種選項(xiàng)。第三個(gè)選項(xiàng)，例如下圖的“了解更多”，有可能會(huì)將用戶帶離此彈窗，如此用戶將沒有辦法完成當(dāng)前的任務(wù)。

圖11，“LEARN MORE”操作將用戶從這個(gè)彈窗指引到其它頁面，進(jìn)而把當(dāng)前的彈窗置入一個(gè)不確定的狀態(tài)

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 勿將多個(gè)步驟放置在一個(gè)彈窗內(nèi)

把一個(gè)復(fù)雜的任務(wù)分解成多個(gè)步驟是一個(gè)極好的想法。然而這也會(huì)給用戶傳達(dá)一個(gè)信號(hào)，這個(gè)任務(wù)太復(fù)雜了，以至于根本沒法再一個(gè)彈窗界面中完成。

如果一個(gè)交互行為復(fù)雜到需要多個(gè)步驟才能完成（如下圖的UI設(shè)計(jì)例子），那么它就有必要單獨(dú)使用一個(gè)頁面（而不是作為彈窗存在）。

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/

官網(wǎng)：http://www.tmdps.cn/

UI設(shè)計(jì)

圖13，有多個(gè)步驟的彈窗 小結(jié)

如果你發(fā)現(xiàn)你在很努力地把許多元素?cái)D進(jìn)一個(gè)彈窗，這通常代表彈窗已經(jīng)不是最優(yōu)的設(shè)計(jì)方案了。

? ? ?

將那些不必要的、不能夠幫助用戶完成任務(wù)的元素或內(nèi)容從彈窗中去除，以達(dá)到簡(jiǎn)化的目的。盡量避免在彈窗內(nèi)安置多個(gè)步驟。原則4，選擇適當(dāng)?shù)膹棿胺N類

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 彈窗大致分兩個(gè)大類。第一大類為吸引用戶關(guān)注的模態(tài)彈窗，強(qiáng)制用戶與之交互后才能繼續(xù)。模式彈窗通常被用在獨(dú)立、強(qiáng)制的流程中： 當(dāng)不需要上下文就可以決定怎么做的時(shí)候。

需要明確的“接受”或“取消”動(dòng)作才能關(guān)閉。在點(diǎn)擊這種彈窗的外部時(shí)，它并不會(huì)關(guān)閉。當(dāng)我們不允許此用戶的進(jìn)程處于部分完成狀態(tài)（即用戶必須完成此進(jìn)程才可做其他任何的操作）。

第二大類則是非模態(tài)彈窗，它允許用戶通過點(diǎn)擊或輕觸周圍就可關(guān)閉。

第一種模式彈窗只在特別重要的交互操作時(shí)才須使用，（比如：刪除帳戶，同意協(xié)議）。? ? ?

UI設(shè)計(jì)

圖14，模態(tài)彈窗：用戶必須輸入“DELETE”才能確認(rèn)刪除

另外移動(dòng)系統(tǒng)的彈窗通常是模態(tài)的，并且含有如下的基本元素：內(nèi)容，操作，和標(biāo)題。

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/ 創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/

圖15，安卓模態(tài)彈窗 原則5，視覺一致性 彈窗下的背景

當(dāng)打開一個(gè)彈窗時(shí)，后面的頁面一定要稍微地變暗。它有兩個(gè)功能，第一它把用戶的注意力轉(zhuǎn)移到了浮層上，第二它讓用戶知道后面的這個(gè)頁面是不再可用的。

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/

官網(wǎng)：http://www.tmdps.cn/

圖16，安卓的模態(tài)彈窗

在調(diào)節(jié)背景深度時(shí)要注意了。如果你把它變得太暗，用戶就沒法看清背景的內(nèi)容。如果你調(diào)得太淺，用戶可能會(huì)認(rèn)為這個(gè)頁面仍然可操作，并且甚至不會(huì)注意到彈窗的存在。清晰的關(guān)閉選項(xiàng)

在彈窗的右上角應(yīng)該有一個(gè)關(guān)閉的選項(xiàng)。許多彈窗會(huì)在右上角有一個(gè)“x”的按鈕，方便用戶關(guān)閉窗口。然而，這個(gè)“x”按鈕對(duì)于一般的用戶而言并不是一個(gè)顯而易見的退出通道。這是由于“x”按鈕通常較小，它需要用戶準(zhǔn)確地定位到該處，才能夠成功的退出，而這一過程通常很費(fèi)事。

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/

官網(wǎng)：http://www.tmdps.cn/ 因而讓用戶通過點(diǎn)擊非模態(tài)彈窗的背景區(qū)域去退出，就是一個(gè)更好的方法。

圖17，TWITTER同時(shí)使用了點(diǎn)擊X按鈕和點(diǎn)擊背景區(qū)域的退出方式 避免在彈窗內(nèi)啟動(dòng)彈窗

應(yīng)該避免在彈窗內(nèi)再啟動(dòng)附加的小彈窗，這是因?yàn)榇伺e會(huì)加深用戶所感知到的網(wǎng)站或app的層級(jí)深度，從而增大了視覺的復(fù)雜性。

圖18，反例：彈窗中的彈窗

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/

官網(wǎng)：http://www.tmdps.cn/ 小結(jié)

在大部分情景下，都允許用戶通過點(diǎn)擊或輕觸來關(guān)閉彈窗（除了模態(tài)彈窗）。應(yīng)該避免在彈窗內(nèi)再啟動(dòng)附加的小彈窗（即彈窗中的彈窗）。總結(jié)

希望這些有關(guān)彈窗的使用案例和使用方法還算有趣，并能在你們?cè)O(shè)計(jì)原型時(shí)派上用場(chǎng)。要記住，用戶體驗(yàn)是為用戶而做的設(shè)計(jì)，而非為技術(shù)。要想知道什么樣的設(shè)計(jì)最適合你的用戶、最適合他們將進(jìn)行的任務(wù)，其實(shí)不是一件難事：你只需要模仿那些領(lǐng)先產(chǎn)品的彈窗，然后找到你的用戶做一些相關(guān)的測(cè)試 ? ?

創(chuàng)想設(shè)計(jì)學(xué)院

官網(wǎng)：http://www.tmdps.cn/

第四篇：交互設(shè)計(jì)心得整理

交互設(shè)計(jì)心得整理

長期以來我就有對(duì)幾年來交互設(shè)計(jì)的心得進(jìn)行總結(jié)整理的想法。回到中國來親身體會(huì)到不少同行，主要是交互設(shè)計(jì)師和視覺設(shè)計(jì)師對(duì)于交互設(shè)計(jì)的困惑，以及其他行業(yè)對(duì)于交互設(shè)計(jì)的誤解和濫用。后來我在小范圍內(nèi)開設(shè)了一個(gè)關(guān)于交互設(shè)計(jì)的講座；現(xiàn)在把它整理成文，希望與同行切磋，共同進(jìn)步。

這篇文章是我?guī)啄陙碓诿绹鴱氖陆换ピO(shè)計(jì)工作的一個(gè)經(jīng)驗(yàn)總結(jié)。當(dāng)時(shí)我們遵循以用戶為中心（User-Centered-Design, 簡(jiǎn)稱UCD）的設(shè)計(jì)原則，每一個(gè)項(xiàng)目都是不折不扣的按所有UCD的步驟進(jìn)行。下面總結(jié)的交互設(shè)計(jì)的方法，是從UCD的過程中提煉出來，也就是說，同樣適用于任何非UCD的設(shè)計(jì)過程。交互設(shè)計(jì)的流程

如果一提到交互設(shè)計(jì)，你就想到畫線框圖或原型圖，那你只對(duì)了五分之一。交互設(shè)計(jì)是一個(gè)過程，從開始到結(jié)束有一套系統(tǒng)的流程。原型圖只是其中的一個(gè)環(huán)節(jié)。

當(dāng)接到一個(gè)設(shè)計(jì)項(xiàng)目，怎么開始？都應(yīng)該做哪些工作？怎樣盡可能的保證交付物滿足既定的功能以及用戶體驗(yàn)層面的易用性？

第一步，是任務(wù)分析，列出界面所要完成的所有任務(wù)。第二步按各任務(wù)確定頁面流程，建立信息架構(gòu)。接下來是創(chuàng)建統(tǒng)一的頁面布局包括分區(qū)等。然后在頁面布局的基礎(chǔ)上進(jìn)行原型設(shè)計(jì)，可以是低保真和高保真的原型圖。最后編寫設(shè)計(jì)說明。下面以設(shè)計(jì)一款動(dòng)感相冊(cè)界面為例，逐步講解各個(gè)環(huán)節(jié)。1.任務(wù)分析

第一步任務(wù)分析。這里要做的是對(duì)于將要設(shè)計(jì)的這個(gè)新界面的所有任務(wù)的分析，也就是用戶在界面上能進(jìn)行的所有操作。這個(gè)分析在功能需求的基礎(chǔ)上進(jìn)行，需求方一般提供一個(gè)功能點(diǎn)的列表。

任務(wù)分析最常見的是任務(wù)列表，另外有任務(wù)流程和任務(wù)場(chǎng)景等。下面以任務(wù)列表為例。列出所有主要任務(wù)，以及每個(gè)主要任務(wù)的子任務(wù)。再把子任務(wù)細(xì)分到各個(gè)步驟。形成下面這個(gè)列表。主要任務(wù)1 子任務(wù)1 步驟1 步驟2 子任務(wù)2 步驟1 步驟2 主要任務(wù)2 …

以動(dòng)感相冊(cè)為例，任務(wù)分析列表如下：

1.瀏覽相冊(cè) 1)瀏覽相冊(cè)列表 2)選擇相冊(cè) 3)瀏覽照片 2.創(chuàng)建新相冊(cè) 1)添加照片 a)選擇已有相冊(cè) b)選擇照片 c)排列順序 d)添加字幕文字 e)選擇動(dòng)畫效果 2)添加模板 a)瀏覽模板 b)選擇模板 3)添加音樂 a)瀏覽音樂列表 I.試聽音樂 II.選擇音樂 b)增加新音樂 I.打開本地文件 II.選擇音樂 4)預(yù)覽（略）… 5)命名（略）… 6)保存（略）… 3.修改相冊(cè)（略）…

任務(wù)列表包括所有功能點(diǎn)，并對(duì)每一個(gè)功能點(diǎn)的邏輯關(guān)系進(jìn)行整合。必要時(shí)會(huì)對(duì)各任務(wù)的使用頻率和其它影響設(shè)計(jì)的重要因素進(jìn)行分析，這里不做解釋了。2.頁面流程

任務(wù)分析完成后，進(jìn)入設(shè)計(jì)的第一步，即設(shè)計(jì)頁面流程。頁面流程是設(shè)計(jì)的開始，也是重要的一環(huán)。它決定整個(gè)界面的信息架構(gòu)和操作邏輯。頁面流程是上一步任務(wù)分析的自然轉(zhuǎn)化。一般來說，一個(gè)主要任務(wù)就是一個(gè)頁面，其它子任務(wù)也可以轉(zhuǎn)化為頁面。

以動(dòng)感相冊(cè)為例，頁面流程如下：

頁面幾乎是把任務(wù)分析照搬過來了。所以上一步做好了，這一步很輕松，而且越往后越輕松。注意這個(gè)流程圖應(yīng)該包括所有將要設(shè)計(jì)的新頁面，一個(gè)不少，一個(gè)不多。它不僅確定頁面內(nèi)容，頁面數(shù)量，還確定各頁面之間的關(guān)系。如果在后來設(shè)計(jì)具體頁面原型時(shí)，發(fā)現(xiàn)這個(gè)流程圖多了或少了頁面，或者頁面關(guān)系發(fā)生了變化，說明你的功夫不到家（這個(gè)比較難，我一般不苛求我們的設(shè)計(jì)師）。根據(jù)原型圖來創(chuàng)建或者修改頁面流程圖，不是在做設(shè)計(jì)，而是在寫設(shè)計(jì)說明。3.頁面布局

第三步頁面布局是具體頁面設(shè)計(jì)的開始，在上一步知道有哪些頁面需要進(jìn)行設(shè)計(jì)后，這里對(duì)頁面進(jìn)行劃分，對(duì)內(nèi)容進(jìn)行組織。最重要的一點(diǎn)是確定頁面分區(qū)。以動(dòng)感相冊(cè)為例，頁面布局如下： 總布局，即通用布局，適合所有頁面。

具體頁面布局，在不與總布局沖突的情況下，有更細(xì)節(jié)的布局。

頁面布局賦予零碎的內(nèi)容以邏輯性，以分區(qū)的形式把頁面各區(qū)域所對(duì)應(yīng)的功能區(qū)確定下來，減少具體設(shè)計(jì)時(shí)的隨意性。這是設(shè)計(jì)嚴(yán)謹(jǐn)與否的表現(xiàn)所在。把類似的操作放在一起，對(duì)于用戶來說是可以預(yù)見的，用戶能夠判斷哪個(gè)操作在哪個(gè)區(qū)域，減少盲目尋找?guī)淼睦щy和疑惑。4.原型設(shè)計(jì) 這一步是大家熟知的，即具體頁面的設(shè)計(jì)。這一步設(shè)計(jì)把所有的界面元素表現(xiàn)出來。可以有低保真和高保真原型圖。低保真即是線框圖，高保真多是接近最終效果圖。下面是動(dòng)感相冊(cè)的低保真原型圖。

5.設(shè)計(jì)說明

最后一步需要做的是對(duì)所有頁面進(jìn)行詳細(xì)的描述，包括對(duì)頁面上所有元素進(jìn)行說明，比如默認(rèn)狀態(tài)，跳轉(zhuǎn)頁面，字號(hào)字體，尺寸等。這里就不解釋了。這是交給開發(fā)人員的文檔，以及測(cè)試人員進(jìn)行測(cè)試的依據(jù)。小結(jié)

交互設(shè)計(jì)是一個(gè)過程，它不僅僅是畫線框圖。交互設(shè)計(jì)最關(guān)鍵的兩個(gè)環(huán)節(jié)是頁面流程和頁面布局，前者建立清晰的架構(gòu)和嚴(yán)密的邏輯，后者整合零散的信息并確定分明的主次關(guān)系。這一切都是為了我們的終極目標(biāo)——讓我們的界面符合用戶的預(yù)期，不帶給他們?nèi)魏蔚囊馔狻Ｒ磺卸荚谟脩舻囊饬现小?/p>

第五篇：交互設(shè)計(jì)檔案

交互設(shè)計(jì)師的基本素質(zhì)

首先，談?wù)勎覀€(gè)人對(duì)交互設(shè)計(jì)師基本素質(zhì)的看法。從我個(gè)人的理解來看，可以簡(jiǎn)單歸納為九字訣：“聽、看、想、說、磨、做、驗(yàn)、寫、講”（如圖1.1）。

圖1.1 1）聽：做一個(gè)交互設(shè)計(jì)師，最重要的一點(diǎn)就是要懂得傾聽（這里蘊(yùn)藏了一個(gè)隱晦的性格屬性：謙虛！）。通常情況下，我們不是用戶，所以很難 100%代表用戶，更左右不了老板，所以我們首先要有聽的本事，把來自用戶的、老板的、PD的、視覺的、前端的、開發(fā)的、測(cè)試的、市場(chǎng)的、業(yè)界的等各方面的聲音都聽過來，聽進(jìn)去。

2）看：99%的情況下，交互不是一蹴而就的創(chuàng)造工作，它是站在前人肩膀上不斷迭代更新的行為過程。我這里指的“看”是要求設(shè)計(jì)師能博覽、能泛獵，看到好的，見過差的，什么都略懂，交互才能變得很美??

3）想：交互是思考的輸出產(chǎn)物和表現(xiàn)形式。當(dāng)設(shè)計(jì)師將之前聽到的和看到的內(nèi)容在頭腦中加以整理、分析，經(jīng)過發(fā)散的創(chuàng)造性碰撞和嚴(yán)謹(jǐn)?shù)倪壿嬚撟C后，逐漸得到了相對(duì)靠譜的交互產(chǎn)物。這個(gè)思索分析的過程貫穿于交互設(shè)計(jì)工作流程的每個(gè)環(huán)節(jié)。

4）說：一個(gè)能說會(huì)道的人不一定是一個(gè)優(yōu)秀的交互設(shè)計(jì)師，但一個(gè)優(yōu)秀的交互設(shè)計(jì)師必然是一個(gè)善于準(zhǔn)確表達(dá)自己想法和觀點(diǎn)的人。在這一點(diǎn)上，我堅(jiān)持交互是一門分享的學(xué)科，需要的是開放的性格和良好的溝通技巧。

5）磨：耐心、技巧、熱情的綜合表現(xiàn)。在一個(gè)項(xiàng)目的進(jìn)程中，不可避免的會(huì)面臨很多的挑戰(zhàn)，優(yōu)秀的交互設(shè)計(jì)師善于發(fā)揮“磨”的精神，他們懷揣對(duì)交互專業(yè)的無比熱情，以無所不用其極的技巧，耐心的纏死一個(gè)又一個(gè)質(zhì)疑方，最終讓大家認(rèn)同并幫助推動(dòng)設(shè)計(jì)的實(shí)現(xiàn)。通常來說，一個(gè)優(yōu)秀的交互設(shè)計(jì)師會(huì)是一個(gè)優(yōu)秀的Idea推銷員。

6）做：交互設(shè)計(jì)師專業(yè)度的核心表現(xiàn)。俗語說得好，是騾子是馬，牽出來遛遛。對(duì)于交互設(shè)計(jì)師來說，之前的環(huán)節(jié)做得再好、再完美，也只是停留在設(shè)計(jì)師自己的腦子里，游蕩于聽眾們的耳膜間。如果理論落實(shí)不到實(shí)際，那所有的想法都只是空中樓閣，你之前所有的努力都只是在佐證你的空泛和不切實(shí)際。所以我們不僅要能 “做”，更要“做”得漂亮，“做”得完美！我一直都是這樣認(rèn)為：“做”決定了一個(gè)交互設(shè)計(jì)師是不是靠譜，決定了一個(gè)交互設(shè)計(jì)師的高度，是一個(gè)交互設(shè)計(jì)師最根本的專業(yè)素質(zhì)。

7）驗(yàn)：用戶體驗(yàn)設(shè)計(jì)，最終是要落實(shí)到用戶的身上的。客觀中立的驗(yàn)證、分析、評(píng)估能力是一個(gè)優(yōu)秀交互設(shè)計(jì)師的重要素質(zhì)。無論個(gè)人還是團(tuán)隊(duì)，設(shè)計(jì)的成果都需要通過精準(zhǔn)的測(cè)試才能算得上合乎標(biāo)準(zhǔn)，此時(shí)，一顆平常心和一雙敏銳的眼睛是設(shè)計(jì)師最需要的。

8）寫：分析、歸納和總結(jié)能力的綜合表現(xiàn)。一個(gè)項(xiàng)目，無論成功還是失敗，總是有很多地方值得設(shè)計(jì)師本人或后來人借鑒。交互設(shè)計(jì)之路不是一座苛求零失誤的獨(dú)木橋，但絕對(duì)是一條要求零“重復(fù)”失誤的單行線。評(píng)價(jià)一個(gè)設(shè)計(jì)師的專業(yè)度，很重要的一環(huán)就是看他能不能多犯前人從來沒有犯過的錯(cuò)誤，并能有效總結(jié)給后來人。于是，他就成了大家，路就這樣被趟了出來??

9）講：演講能力。這里所指的是在項(xiàng)目后期進(jìn)行的交流分享。一個(gè)專業(yè)的交互設(shè)計(jì)師會(huì)站在宏觀的高度上，以平和的心態(tài)同他人溝通，驗(yàn)證自己先前設(shè)計(jì)的合理性、全面性和科學(xué)性，更好的提高自己的專業(yè)能力，為今后的交互設(shè)計(jì)做好準(zhǔn)備。

·交互專業(yè)度的具象化表現(xiàn)

剛才講了很多，但總體來說還是偏理論，還是讓人摸不著頭腦，虛幻的概念最大的優(yōu)勢(shì)在于它的顛簸不破和四平八穩(wěn)，誰也揪不住它的小辮子。但這不是我的風(fēng)格，更不是我寫這篇文章的初衷，我希望的是拋磚引玉，給大家?guī)硪恍┱嬲饬x上能直接使用的東西。所以，接下來，我們來些“干貨”，玩點(diǎn)簡(jiǎn)單粗暴的??

圖1.2

根據(jù)阿里巴巴目前的產(chǎn)品開發(fā)流程（如圖1.2），交互設(shè)計(jì)是大環(huán)節(jié)中的一個(gè)小點(diǎn)，拋開雜亂的干擾信息，單純考量交互設(shè)計(jì)師在過程中的參與度，我們就能得到一個(gè)理想化的交互設(shè)計(jì)行為流（如圖1.3）：

圖1.3 流程沒什么好講的，更沒什么好爭(zhēng)辯的，無非也就是增加一個(gè)、減少一個(gè)、偷換概念、細(xì)分歸納之類的忽悠。我這里想和大家分享的是流程中每個(gè)環(huán)節(jié)的專業(yè)輸出物，我有一個(gè)激進(jìn)的想法：如果某人能精準(zhǔn)的完成某些公認(rèn)的標(biāo)準(zhǔn)化輸出物，那他99%可以被稱為是一個(gè)“專業(yè)”的75分交互設(shè)計(jì)師了，剩下的 1%，也許是拼RP??

這里，我先簡(jiǎn)單交代一下即將涉及到的流程節(jié)點(diǎn)、對(duì)應(yīng)輸出物的圖形色塊的代表含義。

1）流程環(huán)節(jié)說明（如圖1.4）：

圖1.4 2）流程環(huán)節(jié)各輸出物說明（如圖1.5）：

圖1.5 在我看來，一個(gè)專業(yè)的交互設(shè)計(jì)師，在一個(gè)理想化產(chǎn)品設(shè)計(jì)的過程中，有一些是屬于必須的輸出物，有一些屬于最好有（推薦）的輸出物，還有一些屬于可有可無的輸出物。同時(shí)，根據(jù)項(xiàng)目的實(shí)際情況和參與角色的分工情況，存在一些交互設(shè)計(jì)師可能需要負(fù)責(zé)的輸出物，具體細(xì)節(jié)我將在下面逐一介紹。1）需求獲取階段：

此階段通常來說會(huì)由PD等外部資源發(fā)起，輸出物主要是FRD文檔和時(shí)間計(jì)劃文檔，用以描述問題、提出初步目標(biāo)，假想可能的解決方案、預(yù)估資源并梳理時(shí)間計(jì)劃等。當(dāng)然，對(duì)于從UED內(nèi)部發(fā)起的項(xiàng)目，這兩部分的輸出也可以由交互設(shè)計(jì)師完成，屬于可能責(zé)任輸出物； 2）需求分析階段：

歷史數(shù)據(jù)的關(guān)注和分析階段，基于項(xiàng)目本身，要針對(duì)競(jìng)爭(zhēng)對(duì)手、行業(yè)現(xiàn)狀等做詳盡的收集和分析，其中的關(guān)鍵考核點(diǎn)是要做必要的頭腦風(fēng)暴，獲取發(fā)散而全面的信息集合。在此階段，競(jìng)爭(zhēng)分析報(bào)告和頭腦風(fēng)暴輸出物是交互設(shè)計(jì)師專業(yè)度的重要表現(xiàn)。

3）用戶訪談階段：

對(duì)于一些條件允許的項(xiàng)目，我們建議能在項(xiàng)目初期尋求一些用戶的信息，定義一些用戶的屬性，這些對(duì)于之后的交互設(shè)計(jì)都會(huì)是堅(jiān)實(shí)的基礎(chǔ)。一個(gè)高專業(yè)度的交互設(shè)計(jì)師甚至?xí)鲃?dòng)介入訪談問卷的設(shè)定工作，客觀的參與調(diào)研報(bào)告輸出的全過程。

4）需求修正階段：

專業(yè)的交互設(shè)計(jì)師通常不甘于淪為一個(gè)純粹的資源，抗拒被動(dòng)的接受命令。我們之前經(jīng)歷的需求分析和用戶訪談都是為掌控主動(dòng)權(quán)而做的準(zhǔn)備。如今，我們有理有據(jù)，應(yīng)該主動(dòng)出擊，和需求方討論研究需求的合理性、可行性，明確最終的修正目標(biāo)，并對(duì)達(dá)成目標(biāo)所涉及的重點(diǎn)突破點(diǎn)有理性的分析判斷，篩選出各設(shè)計(jì)點(diǎn)的優(yōu)先級(jí)。5）設(shè)計(jì)草稿階段

項(xiàng)目目標(biāo)和設(shè)計(jì)方向確定下來后，我們將進(jìn)入核心的設(shè)計(jì)環(huán)節(jié)。作為交互設(shè)計(jì)師的“殺手锏”，交互流程和線框草圖當(dāng)然一個(gè)都不能少，但此時(shí)我更想強(qiáng)調(diào)一項(xiàng)輔助性質(zhì)的調(diào)研分析工作。從交互的角度來看，在大流程大框架敲定的情況下，交互設(shè)計(jì)師通常會(huì)投入更多的精力在一些核心的設(shè)計(jì)點(diǎn)，也就是我們?cè)谛枨笮拚A段確認(rèn)的設(shè)計(jì)重點(diǎn)。此時(shí)，專業(yè)的設(shè)計(jì)師絕對(duì)不會(huì)拍腦袋設(shè)計(jì)，更不會(huì)想當(dāng)然出方案，而是會(huì)針對(duì)這些核心點(diǎn)做業(yè)界調(diào)研和分析，為自己即將進(jìn)行的設(shè)計(jì)尋求一個(gè)足夠?qū)拸V厚實(shí)的肩膀。6）設(shè)計(jì)細(xì)化階段

第一階段的設(shè)計(jì)工作將在此階段性輸出。我們回顧一下，截止此時(shí)的設(shè)計(jì)產(chǎn)物有：用戶調(diào)研報(bào)告、FRD確認(rèn)文檔、交互流程、線框草圖、核心設(shè)計(jì)調(diào)研分析、核心設(shè)計(jì)詳細(xì)說明、交互流程整體說明等。基本上，一個(gè)交互設(shè)計(jì)師的專業(yè)度，已經(jīng)可以根據(jù)此時(shí)的輸出物數(shù)量、質(zhì)量看出個(gè)大概齊了 7）專家評(píng)審階段

一個(gè)專業(yè)的交互設(shè)計(jì)師，要謙虛。此刻，我們進(jìn)入小范圍專家評(píng)審的階段了，三個(gè)臭皮匠還頂一個(gè)諸葛亮呢，更何況是參與評(píng)審的專家呢。此時(shí)設(shè)計(jì)師的專業(yè)度就體現(xiàn)在 “聽”、“說”和“想”這三訣上，耐心的做好評(píng)審記錄，有理有據(jù)的同專家們進(jìn)行專業(yè)溝通，并確認(rèn)最終的結(jié)論和方向。8）設(shè)計(jì)優(yōu)化階段

經(jīng)歷了專家團(tuán)的考驗(yàn)，又該抖擻精神重新上路了，沒什么好說的，把過程做好了，你的專業(yè)度也就到位了。設(shè)計(jì)優(yōu)化階段的投入度和產(chǎn)出將直接影響到后續(xù)Demo及測(cè)試的效果，和最終設(shè)計(jì)也息息相關(guān)，各位交互設(shè)計(jì)師們，千萬別打瞌睡了！

9）仿真Demo開發(fā)階段

終于到了仿真Demo的模型化階段啦，這時(shí)盡管并沒有直接的交互輸出物，但還是需要交互設(shè)計(jì)師用百分百的挑刺精神，協(xié)助視覺和前端精準(zhǔn)的達(dá)成我們之前的設(shè)計(jì)，嚴(yán)格保證最佳的輸出效果。10）測(cè)試驗(yàn)證階段

仿真Demo出來之后，將進(jìn)入最后的測(cè)試驗(yàn)證階段，根據(jù)項(xiàng)目的實(shí)際情況，可能是QA測(cè)試，也可能是用戶測(cè)試，總之，這個(gè)環(huán)節(jié)能幫助設(shè)計(jì)師最后把關(guān)設(shè)計(jì)的合理性，專業(yè)如你，一定要親自跟進(jìn)測(cè)試并給出最終的評(píng)估報(bào)告，哪些點(diǎn)是前期沒有考慮周全的？那些點(diǎn)是成功的？哪些點(diǎn)是必須立即改進(jìn)的？哪些點(diǎn)能以后再說？哪些?? 11）完成設(shè)計(jì)階段

最后的設(shè)計(jì)階段，根據(jù)之前的測(cè)試驗(yàn)證評(píng)估報(bào)告，交互設(shè)計(jì)師要對(duì)所有之前的輸出做一次嚴(yán)格的檢查和修正，完成最后的輸出。

12）開發(fā)上線階段

盯緊視覺設(shè)計(jì)師和前端工程師吧，最關(guān)鍵的時(shí)候終于到了，經(jīng)歷了那么多紛繁復(fù)雜的環(huán)節(jié)，我們等的就是上線的這一瞬間。當(dāng)然，千萬別忘了后續(xù)的跟蹤和分析，這能為你的專業(yè)度加分不少哦 ·總結(jié)和展望

綜上所述，我們已經(jīng)整理出來了體現(xiàn)交互設(shè)計(jì)師專業(yè)度的過程輸出物了，總結(jié)一下：以75分交互設(shè)計(jì)師的標(biāo)準(zhǔn)來看，我們的專業(yè)度能通過以下的關(guān)鍵輸出物衡量：FRD目標(biāo)確認(rèn)文檔、競(jìng)爭(zhēng)分析報(bào)告、頭腦風(fēng)暴產(chǎn)出物、項(xiàng)目初期用戶調(diào)研報(bào)告、核心設(shè)計(jì)點(diǎn)調(diào)研及分析報(bào)告、專家評(píng)審報(bào)告和評(píng)估報(bào)告、原型測(cè)試報(bào)告、交互流程圖及詳細(xì)說明文檔、頁面線框圖、核心設(shè)計(jì)點(diǎn)說明文檔和最后的跟蹤分析報(bào)告。

基本上，所有的輸出物都是反復(fù)易稿的結(jié)果，都是細(xì)碎過程的迭代輸出，都飽含了設(shè)計(jì)師辛勤的工作投入。所有有夢(mèng)想的交互設(shè)計(jì)師們，請(qǐng)正確的審視這些輸出物，珍惜自己的付出，它們不光是單板的形式教條，它們更是證明自己專業(yè)度最有利的武器！

被很多同學(xué)都質(zhì)疑過：那么多的輸出物，平時(shí)做需求怎么可能全部做出來？每當(dāng)此時(shí)，我的回答都是一樣的：“是的，找借口總是很容易的。大家的確都很忙碌，按季度來說，基本上每個(gè)人都會(huì)經(jīng)手大大小小幾十個(gè)需求，但我們真的忙碌到輸出一個(gè)高質(zhì)量設(shè)計(jì)的精力都沒有了嗎？還是我們打心里就本著做交互、混日子的想法呢？”

不是不能，是不愿！那才是交互設(shè)計(jì)這個(gè)職業(yè)最可悲之處??

作者信息：本文http://