對(duì)話框是一種重要的交互方式，主要用于完成信息傳遞。對(duì)話框很常見(jiàn)，但并不見(jiàn)得每一個(gè)設(shè)計(jì)師都可以百分百地弄明白對(duì)話框這個(gè)概念。這篇文章是對(duì)「對(duì)話框」的一個(gè)簡(jiǎn)單梳理和總結(jié)，希望可以解決大家心中的一些疑惑。

01

了解對(duì)話框

1、對(duì)話框定義

對(duì)話框是疊加在應(yīng)用主窗口上的彈出式的窗口。對(duì)話框以對(duì)話的方式讓用戶參與進(jìn)來(lái)，在對(duì)話中它給出消息或要求輸入。

當(dāng)用戶完成消息的閱讀或者作出選擇后，可以取消或者接受該對(duì)話框，之后，這個(gè)對(duì)話框便消失了，把應(yīng)用的主窗口交還給用戶。

關(guān)于對(duì)話框的概念，以下是百度百科的解釋：

對(duì)話框越來(lái)越廣泛地被應(yīng)用于軟件、網(wǎng)頁(yè)、以及移動(dòng)設(shè)備中。它可以保留用戶當(dāng)前進(jìn)程的情況下，指引用戶完成一個(gè)特定的操作 。

2、對(duì)話框分類

按照對(duì)話框的交互方式，可將其分為「模態(tài)[1]對(duì)話框」和「非模態(tài)對(duì)話框」。我們可以把他們看作是兩個(gè)小家族，模態(tài)家族的人比較強(qiáng)硬，而非模態(tài)家族的人相對(duì)溫柔一點(diǎn)。兩個(gè)家族的主要區(qū)別：是否強(qiáng)制用戶對(duì)其進(jìn)行回應(yīng)。

模態(tài)對(duì)話框：是位于瀏覽器的主頁(yè)面核心區(qū)域，需要用戶對(duì)它做出相應(yīng)交互，模態(tài)才會(huì)消失。而對(duì)話框會(huì)因?yàn)樽陨淼奈潭?、停留時(shí)間、信息量承載多少被劃分為多種對(duì)話框類型進(jìn)行區(qū)分，常見(jiàn)的對(duì)話框分別為：普通對(duì)話框、內(nèi)嵌表單對(duì)話框、分步表單對(duì)話框、文件選擇對(duì)話框、復(fù)雜信息展示對(duì)話框。

△ 何時(shí)使用模態(tài)對(duì)話框

1）在重要的警告時(shí)使用，避免出現(xiàn)嚴(yán)重問(wèn)題、或修正已出現(xiàn)的問(wèn)題。

例如：用戶錄入信息后未保存就要關(guān)閉時(shí)，彈出模態(tài)對(duì)話框提示用戶保存。

2）在需要用戶輸入信息或進(jìn)行某操作，才能繼續(xù)當(dāng)前流程的時(shí)候使用。

例如：在使用Canva資源網(wǎng)站時(shí)，點(diǎn)擊“上傳”會(huì)彈出模態(tài)化的登錄/注冊(cè)窗口，引導(dǎo)登錄/注冊(cè)后使用。

3）用來(lái)將復(fù)雜流程拆分成簡(jiǎn)單步驟。

例如：Teambition-分步驟的模態(tài)對(duì)話框式創(chuàng)建項(xiàng)目。

4）用來(lái)獲取信息，該信息可大大減輕用戶的后續(xù)操作/精力。

例如：在轉(zhuǎn)賬場(chǎng)景中，如果先復(fù)制一個(gè)賬號(hào)，打開(kāi)手機(jī)銀行APP（以招商銀行或平安口袋銀行為例），系統(tǒng)會(huì)通過(guò)模式對(duì)話框詢問(wèn)用戶是否向這個(gè)賬號(hào)轉(zhuǎn)賬，這樣的設(shè)計(jì)做到了預(yù)判用戶行為，節(jié)省用戶后面的操作成本。

非模態(tài)對(duì)話框：與模態(tài)完全相反，它更加溫和，不會(huì)強(qiáng)制打斷用戶正在進(jìn)行的現(xiàn)有流程，對(duì)用戶的干擾比較小。通常這類對(duì)話框只會(huì)在屏幕上短暫停留，幾秒就會(huì)消失，也因此用戶容易忽略它們的存在。因此非模態(tài)對(duì)話框不適合展示重要信息、不能承載大量文案，常見(jiàn)的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。

△ 何時(shí)使用非模態(tài)對(duì)話框

1）在獲取與當(dāng)前流程不必要信息的時(shí)候使用。

例如：平安口袋銀行和平安數(shù)字口袋采用氣泡卡片展示更多功能或引導(dǎo)用戶登錄。

2）不打斷重要流程中使用。

例如：在平安口袋銀行APP中購(gòu)買理財(cái)時(shí)，如果遇到疑問(wèn)的話，不會(huì)彈出框提示讓客戶咨詢投顧，而且采用氣泡框形式提示，不打斷用戶購(gòu)買。

簡(jiǎn)單來(lái)說(shuō)，兩者的優(yōu)缺點(diǎn)見(jiàn)下表：

02

對(duì)話框常見(jiàn)應(yīng)用場(chǎng)景

從前面講到的定義來(lái)看，對(duì)話框最主要的目的是：傳遞信息。那么從目標(biāo)導(dǎo)向的角度來(lái)看對(duì)話框，對(duì)話框要傳遞的信息的常見(jiàn)應(yīng)用場(chǎng)景主要有以下五種：

1、屬性對(duì)話框

屬性對(duì)話框是向用戶呈現(xiàn)或讓用戶改變所選對(duì)象的屬性或者設(shè)置。一般來(lái)說(shuō)，在屬性對(duì)話框中，用戶可以修改當(dāng)前的選擇，也可以設(shè)置應(yīng)用程序的全局屬性。該對(duì)話框適用于非頻繁操作和或僅需要設(shè)置一次的屬性，屬性對(duì)話框常見(jiàn)在一些設(shè)置、詳情中。

例如：Windows 11系統(tǒng)的設(shè)置界面，可設(shè)置系統(tǒng)的全局屬性。

2、功能對(duì)話框

功能對(duì)話框通常從菜單中打開(kāi)，是最常見(jiàn)的模態(tài)對(duì)話框，只控制單一功能，如打印、文件上傳/導(dǎo)入、插入對(duì)象或拼寫檢查。該對(duì)話框不僅允許用戶啟動(dòng)一個(gè)動(dòng)作，而且也允許用戶設(shè)置動(dòng)作的細(xì)節(jié)，屬于模態(tài)對(duì)話框。

例如：瀏覽器的打印功能，會(huì)彈出模態(tài)化的打印窗口，用戶可設(shè)置打印的細(xì)節(jié)。

例如：飛書(shū)的文檔導(dǎo)入功能，使用模態(tài)化對(duì)話框，引導(dǎo)用戶選擇文件類型或進(jìn)行批量導(dǎo)入操作。

3、進(jìn)度對(duì)話框

進(jìn)度對(duì)話框是由應(yīng)用程序啟動(dòng)的，而不是由用戶請(qǐng)求而啟動(dòng)的。它們向用戶表明當(dāng)前應(yīng)用正在忙于某些內(nèi)部功能，其他功能的處理能力可能會(huì)降低。

每個(gè)進(jìn)度對(duì)話框都應(yīng)該向用戶清晰地展現(xiàn)如下信息：

• 一個(gè)耗時(shí)的進(jìn)程正在進(jìn)行
• 現(xiàn)在一切正常
• 該進(jìn)行還有多長(zhǎng)時(shí)間才能完成
• 還有多少事情或項(xiàng)目沒(méi)有做完
• 用戶如何才能取消該操作，或重獲控制權(quán)

例如：使用Axure軟件導(dǎo)出html文件時(shí)的進(jìn)度提示，既提醒用戶當(dāng)前Axure正在運(yùn)行，又告知用戶當(dāng)前文件導(dǎo)出進(jìn)度。

例如：使用Sketch軟件導(dǎo)出文件時(shí)的進(jìn)度提示

4、通知對(duì)話框

通知對(duì)話框?qū)⒁恍┲匾畔?bào)告給用戶。來(lái)源可以是一些觸發(fā)的事件，也可以是其他用戶的通知。

常見(jiàn)的有通知中心對(duì)話框，處理完成某個(gè)操作的告知等等。

例如：花瓣的通知提醒

例如：脈脈的隱私政策閱讀提示和汽車之家的開(kāi)啟通知提示，均采用模態(tài)對(duì)話框方式。

5、公告對(duì)話框

公告對(duì)話框，和進(jìn)度對(duì)話框一樣，由應(yīng)用程序直接啟動(dòng)，不是由用戶請(qǐng)求發(fā)起的。公告對(duì)話框有三種：錯(cuò)誤、警告、確認(rèn)。

這種對(duì)話框通常不會(huì)要求用戶填寫什么，只會(huì)詢問(wèn)你“真的要進(jìn)行嗎？”或者告訴你一件事情。所以在這種對(duì)話框上，一般只會(huì)有只有[取消]和[確認(rèn)]，或者[OK]。

屬性、功能、進(jìn)度對(duì)話框，是用戶主動(dòng)請(qǐng)求的--它們?yōu)橛脩舴?wù)。但是，應(yīng)用程序發(fā)起的公告對(duì)話框--它們?yōu)閼?yīng)用程序服務(wù)，常常會(huì)犧牲用戶利益。由于公告對(duì)話框比較常見(jiàn)且常常犧牲用戶利益，那么我們?cè)趺窗堰@些討厭且無(wú)用的公告對(duì)話框直接鏟除掉，換成更加友好、能給用戶帶來(lái)真正幫助的交互方式呢？接下來(lái)我們來(lái)一起看看怎么讓公告對(duì)話框“名聲鵲起”。

03

怎么讓公告對(duì)話框“名聲鵲起”

我們可以從應(yīng)用本身和對(duì)話框本身著手提供友好的交互方式，減少公告對(duì)話框的出現(xiàn)頻率。

1、應(yīng)用方面

解決用戶錯(cuò)誤的方法不是指責(zé)用戶，讓用戶再認(rèn)真一些，或者給他們更多的指導(dǎo)練習(xí)，而應(yīng)該優(yōu)化應(yīng)用設(shè)計(jì)，讓犯錯(cuò)變得困難。

讓應(yīng)用變“聰明”，減少用戶犯錯(cuò)

• 使用有界控件。比如驗(yàn)證碼輸入框、數(shù)字鍵盤等

示例：登錄藍(lán)湖時(shí)的短信驗(yàn)證碼輸入框

示例：轉(zhuǎn)賬時(shí)輸入金額的數(shù)字鍵盤，金額大小的位數(shù)提示；平安口袋銀行的身份證號(hào)專屬鍵盤。

• 
  提高可見(jiàn)性，用戶可自主糾錯(cuò)

示例：輸錯(cuò)密碼是一個(gè)很難避免的錯(cuò)誤場(chǎng)景，語(yǔ)雀密碼登錄支持可見(jiàn)密碼，一來(lái)是考慮安全問(wèn)題，二來(lái)在用戶輸錯(cuò)的場(chǎng)景下可以打開(kāi)眼睛，即可見(jiàn)密碼，減少出現(xiàn)錯(cuò)誤頻率。

• 
  具備預(yù)判思維，在容易出錯(cuò)的地方提供更方便的功能

示例：在支付寶聊天窗輸入一串?dāng)?shù)字，支付寶發(fā)現(xiàn)這個(gè)問(wèn)題后，提供了識(shí)別后直接轉(zhuǎn)賬的功能，預(yù)判了用戶的慣性，減少錯(cuò)誤發(fā)生。

Zoom - 拉會(huì)前預(yù)設(shè)值在加入會(huì)議室的界面，提前選擇是否在進(jìn)入會(huì)議房間后“不自動(dòng)連接語(yǔ)音”和“保持?jǐn)z像頭關(guān)閉”，有效避免忘記閉麥或者忘記關(guān)攝像頭就直接加入了線上會(huì)議的意外尷尬。

讓操作可“復(fù)原”，提供撤銷功能。

在很多破壞性的操作都會(huì)二次進(jìn)行提醒，讓用戶確認(rèn)操作，比如說(shuō)刪除操作。在刪除之前都會(huì)詢問(wèn)用戶“你真的要?jiǎng)h除嗎？”想一想……你在看到這些提示的時(shí)候，是不是眼疾手快地按下那個(gè)「確認(rèn)」按鈕？

這種對(duì)話框在沒(méi)有容錯(cuò)處理時(shí)，非常容易被我們這種無(wú)腦按「確認(rèn)」的用戶釀成大錯(cuò)。比如我“手賤”只是試試這個(gè)刪除，然后就把某個(gè)表幾千條辛苦寫了一個(gè)月的數(shù)據(jù)刪掉了，由此可見(jiàn)系統(tǒng)的容錯(cuò)處理有多么重要。

示例：Windows系統(tǒng)在早期的時(shí)候，刪除文件時(shí)會(huì)讓用戶進(jìn)行二次確認(rèn)，但這是完全沒(méi)必要的，因?yàn)閯h除文件不是真正的刪除，還會(huì)在回收站里面。

Mac系統(tǒng)：在回收站刪除文件將是永久性刪除，此時(shí)的確認(rèn)對(duì)話框才是對(duì)用戶有用的。

2、對(duì)話框設(shè)計(jì)方面

從對(duì)話框本身的設(shè)計(jì)優(yōu)化出發(fā)，我們可以對(duì)話框的使用場(chǎng)景和文案方面著手進(jìn)行優(yōu)化設(shè)計(jì)。

對(duì)話框使用場(chǎng)景

其實(shí)什么時(shí)候使用對(duì)話框、是否使用取決于你要給用戶展示的信息是否重要。

例如你在手機(jī)上買了一張電影票，支付失敗的結(jié)果如果用toast展示就會(huì)容易被用戶忽視。那么等到用戶到了電影院才發(fā)現(xiàn)自己購(gòu)買失敗，那么用戶極有可能當(dāng)場(chǎng)卸載你的產(chǎn)品。

模態(tài)彈框會(huì)打斷用戶當(dāng)前操作流程，所以「使用對(duì)話框要克制」。總原則是：能在界面展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框?？傊?，重要的信息優(yōu)先考慮使用對(duì)話框。

具體的使用原則有：

• 彈框使用盡量克制。
• 文字需要精簡(jiǎn)，使用行為召喚動(dòng)詞。
• 注意區(qū)分復(fù)雜任務(wù)和輕量任務(wù)，選擇對(duì)應(yīng)的彈框類型。
• 反饋要及時(shí)。
• 可使用引導(dǎo)幫助選擇。

清晰且友好的文案

如果非要使用對(duì)話框，那么請(qǐng)使用友好尊重用戶的方式。當(dāng)我們說(shuō)到人與人之間的交流時(shí)，語(yǔ)言是重要的媒介，而用戶與產(chǎn)品之間同樣如此。

在設(shè)計(jì)過(guò)程中應(yīng)始終努力設(shè)計(jì)出有效的提示性文案，但是, 一定是有比沒(méi)有要好嗎？個(gè)人認(rèn)為也是不必要的，糟糕的提示性文案甚至?xí)茐漠a(chǎn)品中最好的用戶體驗(yàn)。例如以下幾種情況：

• 含糊不清
• 過(guò)于啰嗦
• 無(wú)意義，產(chǎn)生誤導(dǎo)
• 無(wú)同理心

因此糟糕的提示文案設(shè)計(jì)會(huì)誤導(dǎo)用戶在產(chǎn)品中采取不必要的操作, 從而使他們感到生氣和困惑，甚至可能會(huì)破壞品牌對(duì)用戶的忠誠(chéng)度，產(chǎn)生本末倒置的結(jié)果， 也給用戶帶來(lái)不佳體驗(yàn)。

所以，語(yǔ)言是使產(chǎn)品更加人性化的主要因素。產(chǎn)品的文案則充當(dāng)了語(yǔ)言的角色，它可以使用戶參與其中，影響他們的情緒，并把這種人機(jī)的功能性關(guān)系轉(zhuǎn)化成人類的個(gè)人情感體驗(yàn)。而這種用戶的情感體驗(yàn)才能夠真正的彰顯品牌個(gè)性，從而與其他產(chǎn)品區(qū)分開(kāi)來(lái)。

△ 錯(cuò)誤提示設(shè)計(jì)三步法

• 盡可能準(zhǔn)確地描述問(wèn)題和哪里出錯(cuò)了，簡(jiǎn)明易懂。
• 提出建設(shè)性意見(jiàn)，解決問(wèn)題，保持流程前進(jìn)不中斷。如果此時(shí)問(wèn)題還不能解決，告訴用戶可以做些什么來(lái)幫助他們，以及他們可以向誰(shuí)求助。
• 不要責(zé)怪他們，禮貌的對(duì)待用戶，在報(bào)錯(cuò)中加入情感。

總結(jié)：

對(duì)話框可以成為幫助用戶完成目標(biāo)的有用助手，而不是讓他們?cè)诿恳徊讲偈卮鞌〉目膳陆O腳石。通過(guò)保持對(duì)話框的可管理性，并且只有在他們的功能真的屬于另一個(gè)房間的情況下才調(diào)用他們，你將很好地維持用戶的工作流狀態(tài)，保證他們會(huì)成功完成任務(wù)，并且滿懷感激。
作者：DESIGN阿志   來(lái)源：站酷網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。

1. 并不存在單一的設(shè)計(jì)過(guò)程

設(shè)計(jì)過(guò)程被描述為多個(gè)階段，每個(gè)階段都包含不同的活動(dòng)來(lái)完成該階段，它沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)流程，每個(gè)公司和設(shè)計(jì)師都有自己的流程版本。

盡管存在多個(gè)流程，但一般流程和階段類似于以下內(nèi)容:

了解問(wèn)題：初步了解問(wèn)題。觀察、采訪和傾聽(tīng)用戶。

定義問(wèn)題：解釋和定義要解決的問(wèn)題。

構(gòu)思：通過(guò)頭腦風(fēng)暴產(chǎn)生盡可能多的想法。

原型設(shè)計(jì)：構(gòu)建原型并與其他人分享（ 再次縮小解決方案空間，為實(shí)驗(yàn)階段 ）。

測(cè)試：測(cè)試可能的解決方案、實(shí)施、改進(jìn)或重新設(shè)計(jì)。

2. 設(shè)計(jì)思維是傳統(tǒng)解法和創(chuàng)造性設(shè)計(jì)過(guò)程的結(jié)合

傳統(tǒng)的問(wèn)題解決采取有條不紊而又科學(xué)的形式。該過(guò)程從一個(gè)問(wèn)題開(kāi)始，定義要采取的步驟以及達(dá)到解決方案的工具或方法。

設(shè)計(jì)思維是一種創(chuàng)造性的策略，可以產(chǎn)生創(chuàng)造性的未來(lái)結(jié)果和/或創(chuàng)造性的問(wèn)題解決方式，它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。

它通常被描述為一種創(chuàng)造性、主觀和感性的對(duì)許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創(chuàng)造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。

3. 設(shè)計(jì)思維是問(wèn)題解法的進(jìn)階

設(shè)計(jì)思維來(lái)源于常規(guī)問(wèn)題解決方法，常規(guī)問(wèn)題解法是設(shè)計(jì)思維的基礎(chǔ)。

從解決問(wèn)題到設(shè)計(jì)思維，Liedtka (2013)

結(jié)果發(fā)現(xiàn)，設(shè)計(jì)思維實(shí)際上也是一個(gè)解決問(wèn)題的過(guò)程，而不僅僅是一個(gè)創(chuàng)新過(guò)程（ 利特卡，2013）

一個(gè)例子是，豐田采用設(shè)計(jì)思維從頭開(kāi)始分析其西海岸的一個(gè)客戶聯(lián)絡(luò)中心，在重新設(shè)計(jì)過(guò)程中，組建了一個(gè)由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團(tuán)隊(duì)，這一舉動(dòng)最終改變了客戶和員工的服務(wù)中心體驗(yàn)。

4. 從起床到入睡，你都在解決問(wèn)題

我們每天都會(huì)遇到問(wèn)題，但是當(dāng)我們解決同樣的問(wèn)題時(shí)，它們就成了例行公事（ 似乎已經(jīng)忘記它們是問(wèn)題了 ），我們甚至都沒(méi)有意識(shí)到正在解決這些問(wèn)題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達(dá)那里？開(kāi)車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達(dá)辦公室。

5. “設(shè)計(jì)思維”術(shù)語(yǔ)的產(chǎn)生

1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語(yǔ)：“設(shè)計(jì)思維”，并將多年來(lái)醞釀的方法和想法封裝成一個(gè)統(tǒng)一的概念。

6. 工程設(shè)計(jì)思維現(xiàn)在被稱為設(shè)計(jì)思維

設(shè)計(jì)思維是以人為中心、開(kāi)放式、基于問(wèn)題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式，而工程師處理和解決問(wèn)題的方式有其設(shè)計(jì)思維的基礎(chǔ)。

7. 設(shè)計(jì)思維的歷史早已出現(xiàn)（2000 年）

設(shè)計(jì)思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設(shè)計(jì)思維。” 他描述工程師和建筑師處理問(wèn)題的方法有很大不同。

90 年代初，認(rèn)知科學(xué)家 Don Norman 加入 Apple 團(tuán)隊(duì)，擔(dān)任他們的用戶體驗(yàn)架構(gòu)師，這使他成為第一個(gè)在職位中包含 UX 的人。他提出了“用戶體驗(yàn)設(shè)計(jì)”這個(gè)術(shù)語(yǔ)，因?yàn)樗搿昂w人們對(duì)系統(tǒng)體驗(yàn)的所有方面，包括工業(yè)設(shè)計(jì)、圖形、界面、物理交互和手冊(cè)?！?從那時(shí)起，這些領(lǐng)域中的每一個(gè)都將用戶體驗(yàn)，擴(kuò)展到了自己的專業(yè)領(lǐng)域。

8. “棘手的”設(shè)計(jì)思維

設(shè)計(jì)思維在解決“棘手問(wèn)題”時(shí)特別有用。

棘手問(wèn)題的特征

“棘手問(wèn)題”一詞是由設(shè)計(jì)理論家 Horst Rittel 在 1972 年創(chuàng)造的，用來(lái)描述本質(zhì)上非常模糊 \ 特別棘手的問(wèn)題。棘手問(wèn)題，有很多未知因素，沒(méi)有確定的解決方案。問(wèn)題或解決方案可能與另一個(gè)棘手的問(wèn)題有關(guān)，因此這是一個(gè)需要設(shè)計(jì)思維的持續(xù)過(guò)程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問(wèn)題。

9. 設(shè)計(jì)思維不僅限于數(shù)字化設(shè)計(jì)的應(yīng)用

設(shè)計(jì)主題的范圍是普遍的，因?yàn)?設(shè)計(jì)思維可以應(yīng)用于人類經(jīng)驗(yàn)的任何領(lǐng)域。

它可以用于：

符號(hào)和視覺(jué)傳達(dá)：這包括平面設(shè)計(jì)的傳統(tǒng)工作，如排版和廣告、書(shū)籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計(jì)算機(jī)顯示。

材料：這包括對(duì)日常用品的形式和視覺(jué)外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機(jī)械和車輛。

人類活動(dòng)和組織性服務(wù)：包括對(duì)物流的傳統(tǒng)管理關(guān)注，結(jié)合物質(zhì)資源、工具和人類低效的序列和時(shí)間表，以達(dá)到特定的目標(biāo)。

復(fù)雜的系統(tǒng)或環(huán)境：生活、工作、娛樂(lè)和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點(diǎn)，或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。

10. 設(shè)計(jì)思維不僅限于設(shè)計(jì)師的實(shí)踐

設(shè)計(jì)思維起源于設(shè)計(jì)師的培訓(xùn)和專業(yè)實(shí)踐，但這些原則可以被每個(gè)人實(shí)踐并擴(kuò)展到每個(gè)活動(dòng)領(lǐng)域。（布朗，2013 年）

在企業(yè)中，設(shè)計(jì)過(guò)程可以為企業(yè)環(huán)境中的問(wèn)題解決帶來(lái)創(chuàng)新思維。它還可以用于醫(yī)療保健，通過(guò)向護(hù)士、醫(yī)生和管理人員教授設(shè)計(jì)思維技術(shù)，我們可以激勵(lì)相關(guān)從業(yè)者貢獻(xiàn)新的想法。

11. 了解問(wèn)題是第一

不管是什么設(shè)計(jì)，理解和研究問(wèn)題是必不可少的，因?yàn)槲覀兡軌驈钠涑霭l(fā)，從而進(jìn)行以用戶為中心的設(shè)計(jì)。

設(shè)計(jì)思維的最早階段是搞懂你能帶來(lái)的情感價(jià)值。設(shè)計(jì)思維方法迫使你停留在提問(wèn)與質(zhì)疑階段，而不是準(zhǔn)確定義出問(wèn)題后進(jìn)入下一階段。我們都有過(guò)快進(jìn)入解決方案模式的傾向，所以設(shè)計(jì)思維方法迫使你真實(shí)地存在于這個(gè)不清楚、有時(shí)還非?；靵y的時(shí)刻，從而使你對(duì)要解決的問(wèn)題產(chǎn)生更好的理解。（利特克，2013）

12. 設(shè)計(jì)思維需要兩種不同的思維

傳統(tǒng)的問(wèn)題解決涉及提出一個(gè)解決方案，但設(shè)計(jì)思維首先使我們發(fā)散，試圖為問(wèn)題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。

13. 設(shè)計(jì)思維是可以傳授和學(xué)習(xí)的，它不是一種人格特質(zhì)

根據(jù)利特卡和奧美 (2011) 的說(shuō)法，設(shè)計(jì)思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問(wèn)題的方法。正如我們思考創(chuàng)造力一樣，即使是設(shè)計(jì)思維也可以通過(guò)實(shí)踐來(lái)教授和改進(jìn)。

14. 設(shè)計(jì)過(guò)程不是線性的

設(shè)計(jì)過(guò)程從來(lái)都不是線性的，它由多次失敗和迭代組成（布朗，2018）。

首先，設(shè)計(jì)師試圖將問(wèn)題與過(guò)去的類似案例聯(lián)系起來(lái)。如果這種方法不能提供任何解決方案，下一步就是使用知識(shí)和創(chuàng)造力作為一種實(shí)驗(yàn)思維形式來(lái)產(chǎn)生新的想法。使用決策矩陣對(duì)這些想法進(jìn)行評(píng)估，從而會(huì)產(chǎn)生被進(jìn)一步分析和測(cè)試的解決方案。如果成功，它將被實(shí)施。如果不成功，則需要重新表述問(wèn)題，并重復(fù)該過(guò)程。這是一個(gè)迭代過(guò)程，即循環(huán)方法。

這一持續(xù)不斷的重新再設(shè)計(jì)過(guò)程，源于和客戶親密接觸的洞察。

15. 調(diào)研是設(shè)計(jì)思維非常重要的工具

學(xué)習(xí)設(shè)計(jì)思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著：學(xué)習(xí)收集和分析大量數(shù)據(jù)；學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么；學(xué)習(xí)管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進(jìn)行的研究類型分為三類：生成性研究、評(píng)估性研究和驗(yàn)證性研究。

16. “要么很快失敗，要么經(jīng)常失敗”

一種常見(jiàn)的表述 —— 實(shí)際上是設(shè)計(jì)思維的另一種視角 —— 即設(shè)計(jì)師應(yīng)該預(yù)料到會(huì)“很快失敗或經(jīng)常失敗”（布朗，2009）。

當(dāng)過(guò)程早期發(fā)生故障時(shí)，例如被拒絕的原型，實(shí)質(zhì)上它可以為有效解決方案提供關(guān)鍵見(jiàn)解。這種觀點(diǎn)與傳統(tǒng)的先形成理論，再檢驗(yàn)正誤的方式相矛盾。

17. 公司正在將設(shè)計(jì)思維作為解決問(wèn)題的核心方法

Airbnb、Braun 和百事可樂(lè)等多元化公司都在 采用設(shè)計(jì)思維并將其作為核心戰(zhàn)略。例如，IBM 為全球旗下的 44 個(gè)設(shè)計(jì)工作室聘請(qǐng)了 1600 名設(shè)計(jì)師，并且正在培訓(xùn)數(shù)以萬(wàn)計(jì)的設(shè)計(jì)師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )

18. 以人為本的思維

設(shè)計(jì)思維為我們解決問(wèn)題添加了以人為本的元素。當(dāng)我們?cè)噲D通過(guò)牢記人們的想法來(lái)解決問(wèn)題，并使用基于直接觀察乃至訪談的研究時(shí)，我們便會(huì)捕捉到與消費(fèi)者需求一致的意外見(jiàn)解和創(chuàng)新。

19. 可觀的商業(yè)價(jià)值

它有助于將成功的產(chǎn)品更快地推向市場(chǎng)，最終節(jié)省企業(yè)資金。
IBM 的健康和人類服務(wù)組織的設(shè)計(jì)思維實(shí)踐，通過(guò)有效使用設(shè)計(jì)和設(shè)計(jì)思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計(jì)算出的 ROI 超過(guò) 300%。

20. 對(duì)復(fù)雜問(wèn)題的作用性

由于復(fù)雜的問(wèn)題從來(lái)不能被所有人完全理解，因此在嘗試設(shè)計(jì)解決方案時(shí)，處理歧義和多個(gè)并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。

設(shè)計(jì)思維通過(guò)綜合和歸納思維，幫助實(shí)現(xiàn)質(zhì)的飛躍。它允許通過(guò)解構(gòu)來(lái)測(cè)試約束，并允許通過(guò)多樣性思維和批評(píng)思維，來(lái)?yè)肀Ш吞剿髌缌x。

消費(fèi)者通常不知道他們有什么問(wèn)題需要解決，或者他們無(wú)法用語(yǔ)言表達(dá)出來(lái)。只有經(jīng)過(guò)仔細(xì)觀察，設(shè)計(jì)者才能根據(jù)真實(shí)消費(fèi)者行為中看到的東西來(lái)識(shí)別問(wèn)題，而不是簡(jiǎn)單地根據(jù)對(duì)消費(fèi)者的想法來(lái)確定問(wèn)題。這有助于定義模棱兩可的問(wèn)題，并找到解決方案。

21. 別名：跳脫框架的思維

該方法鼓勵(lì)“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見(jiàn)的事物并采用更具實(shí)驗(yàn)性的方法。
在早期的流程階段鼓勵(lì)大膽的想法，以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計(jì)師可以嘗試開(kāi)發(fā)新的不受約束的思維方式，或?qū)ΤＲ?jiàn)問(wèn)題的創(chuàng)新解覺(jué)方法。

22. 設(shè)計(jì)思想家的特征

根據(jù)大多數(shù)設(shè)計(jì)學(xué)院的說(shuō)法，具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計(jì)思維的作用。

同理心：從多個(gè)角度想象世界 —— 同事、甲方客戶、實(shí)際使用者和消費(fèi)者的角度。要成為更好的同理心，必須傾聽(tīng)和觀察他人的行為，注意并獲得洞察力。

綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺(jué)。

樂(lè)觀：除非你相信有解決方案，否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時(shí)，你可能會(huì)放棄。

實(shí)驗(yàn)主義：重大創(chuàng)新并非來(lái)自漸進(jìn)式調(diào)整。設(shè)計(jì)思想家以創(chuàng)造性的方式提出問(wèn)題并探索限制因素，并朝著全新的方向發(fā)展。

協(xié)作：產(chǎn)品、服務(wù)和體驗(yàn)日益復(fù)雜，因此必須擁有一支具有不同背景的團(tuán)隊(duì)，以幫助從多個(gè)角度看待問(wèn)題。

23. 有助于對(duì)抗某些偏見(jiàn)

當(dāng)我們想到一個(gè)問(wèn)題的多種解決方案時(shí)，對(duì)我們解決問(wèn)題會(huì)非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問(wèn)題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開(kāi)簡(jiǎn)單的彈簧門鎖。

24. 實(shí)用

為了幫助設(shè)計(jì)師利用文科和技術(shù)理論，整合多個(gè)領(lǐng)域的知識(shí)以找到創(chuàng)新的解決方案，我們采用設(shè)計(jì)思維來(lái)獲得洞察力。該方法側(cè)重于可視化和操作，因而幫助我們更容易地了解實(shí)際解法，而不僅僅是理論模型。

25. 執(zhí)行

第一批美國(guó)公司在 2000 年代初期開(kāi)始實(shí)施設(shè)計(jì)思維，這一概念引起了德國(guó)投資者 Hasso Plattner 的興趣，他于 2006 年資助創(chuàng)建了兩所設(shè)計(jì)學(xué)校（d.schools），其中一所位于波茨坦大學(xué)（德國(guó)），另一所位于美國(guó)斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計(jì)思維培訓(xùn)，因此該研究重點(diǎn)關(guān)注這些國(guó)家，以尋找早期實(shí)施者。

26. 團(tuán)隊(duì)思考

設(shè)計(jì)思維通常涉及希望參與整個(gè)設(shè)計(jì)和開(kāi)發(fā)過(guò)程的龐大利益相關(guān)者團(tuán)隊(duì)。

觀點(diǎn)、才能和經(jīng)驗(yàn)的多樣性被認(rèn)為是注入新思維的部分重要來(lái)源。多樣性確保通過(guò)融合不同的觀點(diǎn)、技能和知識(shí)來(lái)產(chǎn)生創(chuàng)意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設(shè)計(jì)思維的協(xié)作方法和工具可幫助團(tuán)隊(duì)以積極的方式利用他們的差異。

決策是平等的，因?yàn)槊總€(gè)成員的意見(jiàn)都被征求和使用（卡爾格倫等，2016）。

27. 不需要花哨的技術(shù)原型

當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時(shí)，它不是什么花哨的設(shè)備，而是一個(gè)用膠帶粘起來(lái)的原型。

低保真原型制作起來(lái)既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗(yàn)證、廉價(jià)試錯(cuò)的原則。為每個(gè)想法投入盡可能少的資源意味著前期投入的時(shí)間和金錢更少。此外，將多個(gè)原型帶到現(xiàn)場(chǎng)進(jìn)行測(cè)試為用戶提供了比較的基礎(chǔ)參考，同時(shí)也有助于揭示某些需求。

28. 過(guò)程強(qiáng)調(diào)心態(tài)和行動(dòng)

為了創(chuàng)新，設(shè)計(jì)思維意識(shí)到認(rèn)知和行動(dòng)對(duì)創(chuàng)新過(guò)程很重要。認(rèn)知包括接受度、樂(lè)觀和創(chuàng)造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動(dòng)包括快速原型設(shè)計(jì)、旅程地圖和假設(shè)浮現(xiàn)（ 假設(shè)浮現(xiàn)：assumption surfacing，這是一種評(píng)估技術(shù)，涉及寫出潛在的假設(shè)和反假設(shè)。）（ 卡爾格倫等，2016；利特卡，2015）

29. 在組織中實(shí)施設(shè)計(jì)思維的挑戰(zhàn)

如果領(lǐng)導(dǎo)層不歡迎風(fēng)險(xiǎn)、模棱兩可和風(fēng)格的改變，實(shí)施起來(lái)就會(huì)變得更加困難。它會(huì)被管理者“質(zhì)疑”其具體指標(biāo)

沃爾特斯 ( 2011 ) 聲稱，由于設(shè)計(jì)思維的模糊性，它與組織文化相沖突。

據(jù)受訪者稱，在日常業(yè)務(wù)中使用設(shè)計(jì)思維之所以不會(huì)是最優(yōu)選項(xiàng)， 因?yàn)樗琴Y源密集型的，增加了工作量。（ 麗莎等，2016）

在醫(yī)療保健等規(guī)避風(fēng)險(xiǎn)的行業(yè)和公司中，“經(jīng)常和早點(diǎn)失敗”的方法被認(rèn)為是非常困難的。

30. 設(shè)計(jì)思維的問(wèn)題

許多設(shè)計(jì)師反對(duì)設(shè)計(jì)思維這一觀點(diǎn)，設(shè)計(jì)思維不僅關(guān)乎一個(gè)過(guò)程，而且關(guān)乎改變思維過(guò)程并提高人們可能提出的解決方案的創(chuàng)造力。

“設(shè)計(jì)思維”的推廣已被大型全球公司用來(lái)增加業(yè)務(wù)。不過(guò)，在更廣泛的設(shè)計(jì)世界中，我甚至?xí)f(shuō)“設(shè)計(jì)思維”的過(guò)度宣傳導(dǎo)致了所提供設(shè)計(jì)質(zhì)量的下降?！?Yasushi Kusume

弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會(huì)助理教授 Lee Vinsel 在《設(shè)計(jì)思維運(yùn)動(dòng)是荒謬的》中寫道，“歸根結(jié)底，設(shè)計(jì)思維與設(shè)計(jì)無(wú)關(guān)。這與文科無(wú)關(guān)。這與任何有意義的創(chuàng)新無(wú)關(guān)。如果這意味著重大的社會(huì)變革，那肯定不是關(guān)于“社會(huì)創(chuàng)新”。這是關(guān)于商業(yè)化的?！?

31. 為什么需要共情

觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動(dòng)，可以為你提供有關(guān)人們想法和感受的線索。

你可能認(rèn)為你知道問(wèn)題所在，但只有通過(guò)觀察才能了解消費(fèi)者真正需要什么。

宜家派設(shè)計(jì)師到人們家中，觀測(cè)他們的互動(dòng)行為來(lái)了解他們的需求。這將使設(shè)計(jì)者能夠推斷這些經(jīng)歷的無(wú)形含義，以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實(shí)上，最好的解決方案來(lái)自于對(duì)人類行為的最佳洞察。

Good Kitchen 是一家為老年人和體弱者提供膳食的社會(huì)服務(wù)機(jī)構(gòu)。起初的問(wèn)題似乎是設(shè)計(jì)不當(dāng)?shù)纳攀巢藛?。然后設(shè)計(jì)思維揭示了無(wú)數(shù)問(wèn)題，所有問(wèn)題都源于服務(wù)本身的性質(zhì)。因此，經(jīng)由對(duì)服務(wù)進(jìn)行了徹底改革的之后，最終提高了客戶和員工的滿意度

看完本篇文章，你會(huì)學(xué)到以下內(nèi)容：
1、什么是詳情頁(yè)
2、詳情頁(yè)設(shè)計(jì)原則

3、詳情頁(yè)的構(gòu)成
4、詳情頁(yè)設(shè)計(jì)要點(diǎn)拆解

一、什么是詳情頁(yè)？

詳情頁(yè)向用戶展示一個(gè)對(duì)象的完整信息，主要用于信息瀏覽，允許對(duì)該對(duì)象發(fā)起編輯等操作。如電商的訂單詳情，OA的審批詳情等等。

二、詳情頁(yè)設(shè)計(jì)原則？

1、直接了當(dāng)

信息盡量平鋪展示，如沒(méi)有必要不要做隱藏折疊。 

2、層次分明

按照接近原則，對(duì)信息分層分組展示，降低單個(gè)頁(yè)面內(nèi)信息復(fù)雜度。

3、化繁為簡(jiǎn)

減少?gòu)?fù)雜結(jié)構(gòu)的使用，盡量使用相似的結(jié)構(gòu)和模塊，降低結(jié)構(gòu)差異對(duì)用戶進(jìn)行干擾，讓用戶聚焦信息本身。

三、詳情頁(yè)構(gòu)成

詳情頁(yè)由標(biāo)題、標(biāo)簽頁(yè)、圖片、文字詳情、按鈕、可視化、列表、表格、篩選、數(shù)據(jù)統(tǒng)計(jì)、進(jìn)度軸、標(biāo)簽構(gòu)成

詳情頁(yè)的特點(diǎn)：1、內(nèi)容雜，什么元素/模塊都可能出現(xiàn)。2、布局多，布局沒(méi)有套路，核心是做好內(nèi)容分塊和視覺(jué)引導(dǎo)。3、差異大，頁(yè)面與頁(yè)面巨大差異

四、詳情頁(yè)設(shè)計(jì)要點(diǎn)拆解

1.容器

由內(nèi)容由少到多劃分為原位展開(kāi)、氣泡卡片、彈窗、抽屜、頁(yè)面。能優(yōu)先滿足內(nèi)容收納的同時(shí)，容易盡可能輕量。

2.布局

根據(jù)內(nèi)容從簡(jiǎn)單到復(fù)雜可分為基礎(chǔ)樣式、標(biāo)題分組、色塊/分割線/卡片分組、錨點(diǎn)定位/標(biāo)簽頁(yè)、自由布局。核心是做好內(nèi)容分區(qū)、視覺(jué)引導(dǎo)符合用戶操作習(xí)慣。

布局注意事項(xiàng)：把用戶最關(guān)心的內(nèi)容放在最顯眼的地方

3.交互操作

交互操作可分為編輯（原位/氣泡/彈窗/頁(yè)面），查看詳情（內(nèi)容不多的話可以少用頁(yè)面容器，減少套娃），業(yè)務(wù)操作（層級(jí)清晰，符合用戶操作習(xí)慣）。

為回饋新老用戶、持續(xù)提升業(yè)務(wù)增長(zhǎng)、打造品牌影響力，開(kāi)展年終回饋活動(dòng)；本次活動(dòng)通過(guò)拉新、促活、轉(zhuǎn)化等方式實(shí)現(xiàn)用戶和業(yè)務(wù)的增長(zhǎng)。

基于兔年和送福的節(jié)日習(xí)俗，采用了“福兔迎新”主題，并結(jié)合業(yè)務(wù)目標(biāo)，構(gòu)建活動(dòng)玩法。

在頁(yè)面交互上，需建立統(tǒng)一框架承載豐富的玩法，也要保證易用性和擴(kuò)展性。

為保證主頁(yè)進(jìn)出游戲的體驗(yàn)流暢，采用了統(tǒng)一的結(jié)構(gòu)框架。頂部標(biāo)題固定，中間模塊下移，露出游戲區(qū)域，再利用過(guò)渡動(dòng)效，保證無(wú)縫轉(zhuǎn)場(chǎng)的自然流暢。

3.1 標(biāo)題 &圖形設(shè)計(jì)

在標(biāo)題設(shè)計(jì)中，將“兔”耳造型融入字體設(shè)計(jì)中，與主視覺(jué)相呼應(yīng)，營(yíng)造濃郁的兔年氛圍。傾斜8度的字體，展現(xiàn)出我們對(duì)新年蓬勃向上的精神追求和快速高效的業(yè)務(wù)增長(zhǎng)速度。統(tǒng)一圓角處理和圓點(diǎn)元素延續(xù)了順豐logo的設(shè)計(jì)，更好地提升了親和力。

簡(jiǎn)潔的符號(hào)往往可以傳達(dá)強(qiáng)有力的情感，所以選取了兔年元素和中國(guó)傳統(tǒng)紋飾融入到此次活動(dòng)的代幣設(shè)計(jì)中。這些符號(hào)也延續(xù)使用在活動(dòng)頁(yè)的其他設(shè)計(jì)和頁(yè)面裝飾上。

3.2 IP形象設(shè)計(jì)

“福兔”作為本次活動(dòng)的IP卡通形象，將貫穿于活動(dòng)各場(chǎng)景。小游戲中福兔作為重要角色，親切可愛(ài)的造型配上鮮活豐富的表情不僅能引起用戶共鳴，流暢輕松的動(dòng)作還能極大提升用戶的操作體驗(yàn)，增強(qiáng)活動(dòng)趣味性和互動(dòng)性。

福兔的造型設(shè)計(jì)從以下幾方面去結(jié)合順豐品牌元素：

· 強(qiáng)調(diào)品牌標(biāo)志：帶有順豐logo的杜邦紙袋延展設(shè)計(jì)為福兔的斜挎包

· 從細(xì)節(jié)入手：福兔的圓形腮紅與順豐快遞員IP形象的腮紅設(shè)計(jì)呼應(yīng)，同時(shí)也與順豐logo紅色圓點(diǎn)一脈相承。

我們?yōu)楦Ｍ迷O(shè)計(jì)了小游戲中的多種狀態(tài)動(dòng)畫，用豐富多變的表情，可愛(ài)的肢體語(yǔ)言，融入到小游戲中，增強(qiáng)游戲過(guò)程趣味性和可玩性，提升沉浸感。

與開(kāi)發(fā)協(xié)作在動(dòng)效上使用了spine骨骼動(dòng)畫，通過(guò)控制骨骼，可以快速輸出各種動(dòng)作，減少了動(dòng)畫體積，提升頁(yè)面加載速度。

“福兔跳跳”小游戲，通過(guò)躲避“鞭炮”障礙物，跳躍收集“福氣值”、“獎(jiǎng)勵(lì)金”。同時(shí)設(shè)置難度不同的關(guān)卡，以提高游戲的挑戰(zhàn)性和可玩性。

3.3 場(chǎng)景設(shè)計(jì)

主頁(yè)場(chǎng)景跟隨節(jié)日以提升感知，通過(guò)換膚減少視覺(jué)疲勞。隨著節(jié)日變化，色彩和營(yíng)銷氛圍感也隨之增強(qiáng)。

為了增強(qiáng)游戲氛圍、新鮮感，提高游戲體驗(yàn)。小游戲與主頁(yè)同步進(jìn)行換膚，前進(jìn)時(shí)街景也會(huì)呈現(xiàn)節(jié)日特色建筑、裝飾。

為了突出用戶的品牌感知，在背景街道設(shè)計(jì)中，盡可能融入了較多順豐元素，快遞箱、貨車、LOGO等等。

3.4 其他

多玩法設(shè)計(jì)

小游戲玩法，符合大眾群體的偏好；獎(jiǎng)勵(lì)金、配對(duì)搶免單有效提升用戶留存，激勵(lì)用戶持續(xù)參與活動(dòng)；兌獎(jiǎng)、沖榜玩法回饋高價(jià)值用戶，豐厚獎(jiǎng)品打造活動(dòng)口碑。

引導(dǎo)設(shè)計(jì)

在活動(dòng)的不同觸點(diǎn)對(duì)用戶進(jìn)行引導(dǎo)與轉(zhuǎn)化。

年終活動(dòng)是一年中業(yè)務(wù)搶收的重要節(jié)點(diǎn)?；顒?dòng)上線后，整體上活動(dòng)的訪問(wèn)量、參與率及留存率，均表現(xiàn)不俗，達(dá)到預(yù)期目標(biāo)。未來(lái)我們會(huì)繼續(xù)在運(yùn)營(yíng)活動(dòng)的創(chuàng)新上探索更多有趣好玩的方向，豐富用戶體驗(yàn)，挖掘創(chuàng)新玩法。

我們下個(gè)活動(dòng)再見(jiàn)～

前言

作為設(shè)計(jì)師的你，是否也遇到過(guò)這樣的問(wèn)題：

1.負(fù)責(zé)的業(yè)務(wù)線產(chǎn)品邏輯復(fù)雜難懂，產(chǎn)品自己想不清楚需求，導(dǎo)致項(xiàng)目難以有效推進(jìn)；

2.設(shè)計(jì)方案拍板的人太多，一人一個(gè)想法，溝通成本高，還總是返工；

3.設(shè)計(jì)優(yōu)化找不到頭緒，不知道是否匹配產(chǎn)品目標(biāo)等等…

本文將從what、why、how三方面帶你一起解讀設(shè)計(jì)共創(chuàng)的方法論模型，并以實(shí)際案例為指導(dǎo)，分享設(shè)計(jì)共創(chuàng)五步法；感受在設(shè)計(jì)過(guò)程中，通過(guò)與其他核心角色一起共創(chuàng)，從明確共同目標(biāo)、共同決策、共創(chuàng)設(shè)計(jì)、共同評(píng)價(jià)，到最終共享設(shè)計(jì)成果過(guò)程。

一起來(lái)赴一場(chǎng)創(chuàng)新共贏的設(shè)計(jì)盛宴吧！

What-什么是設(shè)計(jì)共創(chuàng)

共創(chuàng)行為由來(lái)已久

共創(chuàng)模式并非現(xiàn)代社會(huì)的新生事物，其萌芽可追溯至人類文明早期，比如中國(guó)最早的詩(shī)歌總集《詩(shī)經(jīng)》、古希臘的《荷馬史詩(shī)·伊利亞特》等耳熟能詳?shù)奈膶W(xué)作品，都是在民間大眾共創(chuàng)基礎(chǔ)上再由作者整理完成的；還有《永樂(lè)大典》、《四庫(kù)全書(shū)》等大型文化工程著作，都是集體協(xié)作的結(jié)晶。共創(chuàng)行為在人類文化發(fā)展史的各個(gè)階段，我們都可見(jiàn)其蹤影。

設(shè)計(jì)共創(chuàng)的定義

1.名詞定義

網(wǎng)上較少關(guān)于設(shè)計(jì)共創(chuàng)方法的完整介紹和明確定義，只有一些相關(guān)資料是對(duì)于該方法的理解。

如：“Co-designis a design-led process that uses creative participatory methods. There is noone-size-fits-all approach nor a set of check- lists to follow. Instead, thereare a series of patterns and principles that can be applied in different wayswith different people. Co- designers make decisions, not just suggestions”(Burkett, 2012).

“協(xié)同設(shè)計(jì)是一個(gè)通過(guò)使用創(chuàng)造性和參與性的方法進(jìn)行設(shè)計(jì)的過(guò)程。在這個(gè)過(guò)程中，沒(méi)有一種放之四海而皆準(zhǔn)的方法。但是，有一系列的模式和原則可以與不同的人以不同的方式進(jìn)行應(yīng)用。協(xié)同設(shè)計(jì)是為了做出決策，而不僅僅是建議”

2.筆者對(duì)設(shè)計(jì)共創(chuàng)的理解

經(jīng)過(guò)在實(shí)際工作中的不斷實(shí)踐和應(yīng)用，用一句話來(lái)總結(jié)我對(duì)設(shè)計(jì)共創(chuàng)的理解：“邀請(qǐng)核心角色參與設(shè)計(jì)關(guān)鍵過(guò)程，共識(shí)問(wèn)題和目標(biāo)、了解設(shè)計(jì)思考過(guò)程并共同決策、共識(shí)評(píng)價(jià)標(biāo)準(zhǔn)并共享設(shè)計(jì)成果”

Why-為什么要使用設(shè)計(jì)共創(chuàng)

設(shè)計(jì)共創(chuàng)的價(jià)值

設(shè)計(jì)共創(chuàng)有以下三個(gè)重要價(jià)值

1.打破能力邊界：個(gè)人能力是有限的，通過(guò)卷入其他核心角色的參與，發(fā)揮各個(gè)角色優(yōu)勢(shì)，實(shí)現(xiàn)資源的優(yōu)勢(shì)整合，有效打破個(gè)人能力的邊界。

2.豐富視角維度：設(shè)計(jì)是一個(gè)不斷平衡的過(guò)程，了解并兼容更多信息才能使方案更加完備，然而設(shè)計(jì)的單一視角往往是具有局限性，設(shè)計(jì)共創(chuàng)可以幫我我們從多視角思考問(wèn)題，有效規(guī)避風(fēng)險(xiǎn)。

3.拓展價(jià)值廣度：項(xiàng)目的價(jià)值如果僅僅從設(shè)計(jì)角度進(jìn)行評(píng)估會(huì)顯得單薄，難以獲得其他角色的認(rèn)可。通過(guò)多角色共建評(píng)估標(biāo)準(zhǔn)拓展價(jià)值廣度，最終實(shí)現(xiàn)價(jià)值共享。

什么類型的項(xiàng)目適合進(jìn)行設(shè)計(jì)共創(chuàng)

實(shí)際工作中我們通常會(huì)從項(xiàng)目的相對(duì)設(shè)計(jì)成本和相對(duì)設(shè)計(jì)價(jià)值兩個(gè)維度來(lái)評(píng)估項(xiàng)目類型。設(shè)計(jì)價(jià)值相對(duì)較高，又具有一定設(shè)計(jì)成本的項(xiàng)目，比較適合進(jìn)行設(shè)計(jì)共創(chuàng)。例如一些業(yè)務(wù)邏輯復(fù)雜的改版項(xiàng)目、從0-1的前瞻探索項(xiàng)目、設(shè)計(jì)多方?jīng)Q策的橫向項(xiàng)目等。

對(duì)設(shè)計(jì)成本、設(shè)計(jì)價(jià)值的理解

相對(duì)設(shè)計(jì)成本通常由業(yè)務(wù)復(fù)雜度、需求是否明確、溝通成本量決定；而對(duì)相對(duì)設(shè)計(jì)價(jià)值的評(píng)估則需要從用戶、業(yè)務(wù)、設(shè)計(jì)三個(gè)視角進(jìn)行評(píng)估。

設(shè)計(jì)共創(chuàng)流程 VS 常規(guī)設(shè)計(jì)流程

對(duì)比我們常規(guī)的設(shè)計(jì)流程，設(shè)計(jì)角色通常作為一個(gè)需求的把關(guān)者出現(xiàn)，重點(diǎn)參與需求確認(rèn)后的設(shè)計(jì)相關(guān)環(huán)節(jié)，最終從設(shè)計(jì)單一視角進(jìn)行項(xiàng)目復(fù)盤。在項(xiàng)目從需求到上線的整個(gè)過(guò)程中作為被動(dòng)者的角色，斷點(diǎn)式的參與，缺少控制權(quán)。

而設(shè)計(jì)共創(chuàng)流程要求我們?cè)陧?xiàng)目的各個(gè)環(huán)節(jié)深度參與共同決策，變被動(dòng)為主動(dòng)，從共創(chuàng)視角全流程掌握項(xiàng)目細(xì)節(jié)，提高對(duì)業(yè)務(wù)的理解和判斷。

How-如何開(kāi)展設(shè)計(jì)共創(chuàng)

以《百度保障體驗(yàn)優(yōu)化項(xiàng)目》為例

注：百度保障項(xiàng)目主要服務(wù)于百度網(wǎng)民權(quán)益保障計(jì)劃，這是百度聯(lián)合國(guó)家司法部、消協(xié)推出的首個(gè)搜索引擎網(wǎng)民權(quán)益保障體系，其目的是為了更好的保障網(wǎng)民的合法權(quán)益，當(dāng)用戶在百度進(jìn)行搜索、購(gòu)物等行為時(shí)，遭到釣魚(yú)、欺詐、假冒官網(wǎng)并造成經(jīng)濟(jì)損失時(shí)，可以享有一定額度的保障金，屬于百度APP的特色功能。

從項(xiàng)目的相對(duì)設(shè)計(jì)成本、相對(duì)設(shè)計(jì)價(jià)值來(lái)看，百度保障體驗(yàn)優(yōu)化是一個(gè)設(shè)計(jì)成本&價(jià)值相對(duì)較高的項(xiàng)目，比較適合進(jìn)行設(shè)計(jì)共創(chuàng)：

1.相對(duì)設(shè)計(jì)成本高

①業(yè)務(wù)復(fù)雜：百度保障是一個(gè)涉及BC雙端用戶的產(chǎn)品，流程復(fù)雜，設(shè)計(jì)側(cè)處于剛接手的階段，對(duì)業(yè)務(wù)邏輯不熟悉。

②需求不明確：百度保障業(yè)務(wù)屬于百度特色功能，起步晚且少有可參考的行業(yè)競(jìng)品，常常是一句話的改版需求。

③溝通成本高：產(chǎn)品團(tuán)隊(duì)新調(diào)整，一線產(chǎn)品同學(xué)經(jīng)驗(yàn)不足，缺少成熟的合作流程，總是頻繁改需求。

2.相對(duì)設(shè)計(jì)價(jià)值高

①用戶體驗(yàn)差：保障業(yè)務(wù)體量雖小，面對(duì)的用戶卻都屬于高危用戶，然而之前的功能沒(méi)有經(jīng)過(guò)設(shè)計(jì)介入，用戶體驗(yàn)極差。

②業(yè)務(wù)重點(diǎn)：影響百度口碑，是產(chǎn)品側(cè)的重點(diǎn)優(yōu)化對(duì)象。③設(shè)計(jì)視角：改版需求設(shè)計(jì)發(fā)揮空間大，產(chǎn)品給予高度配合。

《設(shè)計(jì)共創(chuàng)五步法》

接下來(lái)將結(jié)合《百度保障體驗(yàn)優(yōu)化項(xiàng)目》說(shuō)明設(shè)計(jì)共創(chuàng)的實(shí)踐路徑。

第一步：業(yè)務(wù)理解

1.項(xiàng)目背景摸底

產(chǎn)品最初的需求只有一句話“保障官網(wǎng)目前體驗(yàn)很差，很久沒(méi)有優(yōu)化過(guò)了，需要設(shè)計(jì)團(tuán)隊(duì)幫忙整體改版”，并在此基礎(chǔ)上提出一些非常稀碎的優(yōu)化點(diǎn)，缺乏關(guān)聯(lián)性和整體性。

設(shè)計(jì)側(cè)開(kāi)始通過(guò)定性、定量多種形式對(duì)業(yè)務(wù)進(jìn)行摸底，明確整體的業(yè)務(wù)邏輯以及保障官網(wǎng)所處的位置，并通過(guò)用戶反饋和用戶數(shù)據(jù)分析問(wèn)題，明確用戶的真實(shí)訴求。

2.理解業(yè)務(wù)價(jià)值

通過(guò)業(yè)務(wù)摸底，設(shè)計(jì)側(cè)將對(duì)業(yè)務(wù)價(jià)值、業(yè)務(wù)邏輯的整體理解梳理出來(lái)，并與產(chǎn)品確認(rèn)達(dá)成共識(shí)。

百度保障業(yè)務(wù)有三個(gè)重要的環(huán)節(jié)：保障官網(wǎng)、申請(qǐng)保障、保單管理。通過(guò)這三個(gè)環(huán)節(jié)建立起用戶端和商家端之間的聯(lián)系。其中，百度保障官網(wǎng)起著非常重要的信息傳達(dá)、用戶保障認(rèn)知建立的作用。

3.現(xiàn)狀問(wèn)題分析

百度保障官網(wǎng)作為重要的保障認(rèn)知傳達(dá)陣地，存在框架層級(jí)混亂、信息簡(jiǎn)陋缺乏針對(duì)性、傳達(dá)效率低等問(wèn)題。

第二步：共識(shí)目標(biāo)

通過(guò)多角色溝通，我們將官網(wǎng)改版的核心目標(biāo)確認(rèn)為“如何從BC雙視角重塑官網(wǎng)信息強(qiáng)化保障認(rèn)知，讓官網(wǎng)內(nèi)容更易理解”。

在共識(shí)目標(biāo)的過(guò)程中，設(shè)計(jì)側(cè)可以先基于共識(shí)的業(yè)務(wù)價(jià)值和問(wèn)題定一個(gè)初版目標(biāo)，然后拉其他核心角色一起討論，避免無(wú)目的低效率溝通，在基本共識(shí)點(diǎn)的基礎(chǔ)上更容易達(dá)成一致。

第三步：設(shè)計(jì)共創(chuàng)

基于共識(shí)目標(biāo)，設(shè)計(jì)側(cè)組織開(kāi)展多角色腦暴進(jìn)行設(shè)計(jì)方向共創(chuàng)和方案細(xì)節(jié)共創(chuàng)。

1.設(shè)計(jì)方向腦暴共創(chuàng)

①共創(chuàng)前-充分準(zhǔn)備有效的腦暴和共創(chuàng)過(guò)程需要組織者具備清晰的思路和明確的引導(dǎo)。在腦暴前我進(jìn)行了詳細(xì)的腦暴議程安排，并通過(guò)郵件和工作群的方式同步給參會(huì)同學(xué)，要求所有參會(huì)同學(xué)會(huì)議前完成閱讀，保證信息同步。

②共創(chuàng)中-把控節(jié)奏

共創(chuàng)過(guò)程中為了保障腦暴的質(zhì)量，我會(huì)要求全部參會(huì)同學(xué)關(guān)閉電腦聚焦在討論的目標(biāo)上，明確問(wèn)題和目標(biāo)→各自思考并用標(biāo)簽記錄想法→共同討論并在大白板上進(jìn)行整理分析→得出共識(shí)結(jié)論。

以C用戶官網(wǎng)優(yōu)化視角來(lái)舉例

我們?cè)诠沧R(shí)官網(wǎng)想要為C用戶營(yíng)造的感知是讓他們能【了解保障作用，建立信任感，知道如何申保】之后。從使用場(chǎng)景、用戶訴求、訴求滿足依次進(jìn)行腦暴共創(chuàng)：

1.核心場(chǎng)景：通過(guò)對(duì)業(yè)務(wù)的理解發(fā)散討論用戶什么場(chǎng)景下會(huì)來(lái)到保障官網(wǎng)，大家一起共識(shí)了兩個(gè)核心場(chǎng)景。

2.用戶訴求：基于核心場(chǎng)景，將自己帶入用戶，想象進(jìn)入保障官網(wǎng)的自己核心訴求是什么？每個(gè)人寫下自己的想法，然后貼標(biāo)簽找共性，共識(shí)核心訴求。

3.訴求滿足：共識(shí)訴求后，我們轉(zhuǎn)變視角，思考作為產(chǎn)品設(shè)計(jì)師我們可以通過(guò)提供哪些內(nèi)容來(lái)滿足用戶的訴求。同樣的，每個(gè)人寫下自己的想法后貼標(biāo)簽找共性，此次的內(nèi)容對(duì)于官網(wǎng)信息的呈現(xiàn)已經(jīng)起到很大的決定性作用，再此基礎(chǔ)上，我們一起投票決定信息的優(yōu)先級(jí)完成頁(yè)面內(nèi)容的基本布局并形成共識(shí)結(jié)論。

③共創(chuàng)后-記錄共識(shí)共創(chuàng)后，最重要就是及時(shí)記錄共識(shí)結(jié)論并同步到所有相關(guān)成員進(jìn)行確認(rèn)，這樣不僅可以幫助我們理清思路，更能夠很好的減少后續(xù)結(jié)論變動(dòng)的風(fēng)險(xiǎn)，降低溝通成本。

2.方案細(xì)節(jié)共創(chuàng)

①?zèng)Q策框架層方案以官網(wǎng)中BC用戶信息的強(qiáng)弱關(guān)系為依據(jù)，進(jìn)行框架結(jié)構(gòu)的多方案發(fā)散，并通過(guò)制作demo的方式完成不同方案的原型效果。

拉關(guān)鍵角色進(jìn)行體驗(yàn)并投票。大家一致認(rèn)為【方案3：強(qiáng)化C弱化B】的效果更符合我們的優(yōu)化目標(biāo)。

在框架方案3的基礎(chǔ)上，進(jìn)行方案細(xì)化。對(duì)比線上原方案，框架層有兩個(gè)核心優(yōu)化點(diǎn)：

1.層級(jí)優(yōu)化：由原層級(jí)關(guān)系不清晰的5個(gè)頁(yè)面，減少后一個(gè)C用戶首頁(yè)+B商家二級(jí)頁(yè)，重點(diǎn)突出層級(jí)簡(jiǎn)單。

2.提高屏效：將原來(lái)的雙底bar合并，提高頁(yè)面展示屏效。

②共識(shí)信息表現(xiàn)層方案

在信息層基于腦暴共創(chuàng)結(jié)論對(duì)內(nèi)容信息進(jìn)行了重構(gòu)，完成官網(wǎng)認(rèn)知的搭建，主要有以下3個(gè)優(yōu)化點(diǎn)：

1.內(nèi)容更豐滿：根據(jù)腦暴結(jié)論C用戶首頁(yè)增加9個(gè)內(nèi)容模塊，B商家頁(yè)增加4個(gè)內(nèi)容模塊，建立保障立體認(rèn)知。

2.內(nèi)容更聚焦：將C用戶頁(yè)作為首頁(yè)，去掉原首頁(yè)，B商家頁(yè)作為二級(jí)頁(yè)面，強(qiáng)化C視角更好的滿足核心用戶訴求。

3.信息更真實(shí)：C首屏信息通過(guò)展示申保&認(rèn)保的規(guī)模數(shù)據(jù)突出保障的安全感，B商家頁(yè)通過(guò)輪播申保動(dòng)態(tài)&增加真實(shí)案例方式營(yíng)造真實(shí)感。

完成方案后拉關(guān)鍵角色對(duì)齊共識(shí)，調(diào)整優(yōu)化細(xì)節(jié)，明確最終效果。

第四步：指標(biāo)拆解

在指標(biāo)拆解方面，根據(jù)HEART+GSM體驗(yàn)度量模型，完成定性+定量驗(yàn)證指標(biāo)的分析。

簡(jiǎn)單來(lái)說(shuō)，就是將HEART模型中的體驗(yàn)標(biāo)準(zhǔn)依次縱向排列，將GSM體驗(yàn)度量模型作為分析工具，依次對(duì)HEART模型中各個(gè)維度從目標(biāo)（goal）、信號(hào)（signal）、度量指標(biāo)（metric）進(jìn)行分析。

以留存率（retention）為例，我們的目標(biāo)是希望用戶愿意多來(lái)官網(wǎng)了解信息，不斷強(qiáng)化保障認(rèn)知，那么用戶所表現(xiàn)出來(lái)的行為信號(hào)是多次訪問(wèn)保障官網(wǎng)，對(duì)應(yīng)的度量指標(biāo)可以拆解為活躍用戶量、次日/三日/七日留存等等。

完成設(shè)計(jì)側(cè)指標(biāo)拆解后，與產(chǎn)品進(jìn)行討論，從產(chǎn)品視角給予補(bǔ)充完善，雙方達(dá)成共識(shí)后，一起完成定性評(píng)估問(wèn)卷和打點(diǎn)規(guī)則細(xì)化。

第五步：落地驗(yàn)證

上線后持續(xù)觀察用戶數(shù)據(jù)，對(duì)比上線前后的定性+定量指標(biāo)，定性評(píng)估及定量數(shù)據(jù)指標(biāo)均得到明顯提升。

其他思考

設(shè)計(jì)共創(chuàng)循環(huán)流程

官網(wǎng)優(yōu)化只是保障體驗(yàn)的一個(gè)環(huán)節(jié)，我們以點(diǎn)入局，拉開(kāi)了保障體驗(yàn)全流程整優(yōu)化的帷幕。

在完成申保前-保障官網(wǎng)的整體優(yōu)化改版后并獲得極大成功后，我們趁熱打鐵，通過(guò)用戶體驗(yàn)地圖的方式完成保障中、后全流程的設(shè)計(jì)機(jī)會(huì)點(diǎn)分析，明確申保中、后設(shè)計(jì)目標(biāo)并完成具體設(shè)計(jì)提案，與產(chǎn)品共識(shí)后分期推動(dòng)落地，與官網(wǎng)優(yōu)化一樣，通過(guò)設(shè)計(jì)共創(chuàng)和嚴(yán)謹(jǐn)論證最終上線后的數(shù)據(jù)效果均表現(xiàn)正向，符合預(yù)期。

從保障全流程優(yōu)化的案例我們不難發(fā)現(xiàn)，設(shè)計(jì)共創(chuàng)是一個(gè)循環(huán)過(guò)程，它始于我們對(duì)業(yè)務(wù)的初步理解，終于一個(gè)循環(huán)后對(duì)業(yè)務(wù)的理解加深而進(jìn)行進(jìn)一步的循環(huán)，從而形成一個(gè)良性循環(huán)，幫助我們不斷深入業(yè)務(wù)，助力業(yè)務(wù)體驗(yàn)不斷優(yōu)化提升。

及時(shí)進(jìn)行項(xiàng)目復(fù)盤總結(jié)

在項(xiàng)目關(guān)鍵節(jié)點(diǎn)及時(shí)進(jìn)行項(xiàng)目復(fù)盤，不僅可以讓所有參與項(xiàng)目的同學(xué)有獲得感和價(jià)值感，更加認(rèn)可設(shè)計(jì)共創(chuàng)的成果，形成正向循環(huán)。同時(shí)也能擴(kuò)大設(shè)計(jì)的影響力，獲得合作團(tuán)隊(duì)老板的高度認(rèn)可和贊許，達(dá)成雙贏目標(biāo)。