設(shè)計(jì)框架包括交互框架及視覺(jué)設(shè)計(jì)框架，框架設(shè)計(jì)應(yīng)首先關(guān)注總體再去優(yōu)化細(xì)節(jié)，最后驗(yàn)證與測(cè)試設(shè)計(jì)。

一、構(gòu)建設(shè)計(jì)框架

在目標(biāo)導(dǎo)向設(shè)計(jì)中，不要一上來(lái)就直接跳入細(xì)節(jié)設(shè)計(jì)，而應(yīng)站在一個(gè)高層次上關(guān)注用戶界面和相關(guān)行為的整體架構(gòu)，我們把這叫做設(shè)計(jì)框架。

設(shè)計(jì)框架包括交互框架及視覺(jué)設(shè)計(jì)框架，在此階段中，交互設(shè)計(jì)者利用場(chǎng)景和需求來(lái)創(chuàng)建屏幕和行為草圖，視覺(jué)設(shè)計(jì)者使用語(yǔ)言研究開(kāi)發(fā)視覺(jué)設(shè)計(jì)框架。

過(guò)早的把重點(diǎn)放在小細(xì)節(jié)、小部件和具體的產(chǎn)品交互上，會(huì)妨礙框架設(shè)計(jì)。我們應(yīng)該采取自上而下的方式，首先關(guān)注總體，提出低保真而不包含具體細(xì)節(jié)的方案。低保真更容易收集用戶反饋。

滿足用戶需求的方案滿足以下條件

(1) 最有效滿足用戶目標(biāo)

(2) 最符合設(shè)計(jì)原則

(3) 最適合當(dāng)前的技術(shù)水平和成本考量

(4) 最能滿足其他條件

對(duì)于需求向功能元素的轉(zhuǎn)變來(lái)說(shuō)，一般性的設(shè)計(jì)原則和具體的交互模式很重要

1. 勾畫(huà)交互框架

勾畫(huà)交互框架，又稱為“方格圖階段”，開(kāi)始階段一定要看到整體且高層次的框架。在最終選擇最佳方案前，嘗試采用幾種不同并列并用于驗(yàn)證性的場(chǎng)景，通常是有效的做法。在設(shè)計(jì)的初期花費(fèi)過(guò)多精力研究復(fù)雜的細(xì)節(jié)，會(huì)阻礙設(shè)計(jì)者改變思路。

勾畫(huà)大致的框架是一個(gè)反復(fù)的過(guò)程，最好由一到兩個(gè)交互設(shè)計(jì)（理想情況下由一個(gè)交互設(shè)計(jì)者和一個(gè)“設(shè)計(jì)溝通者”，即根據(jù)設(shè)計(jì)敘述來(lái)思考的人組成）、一個(gè)視覺(jué)設(shè)計(jì)或者工業(yè)設(shè)計(jì)師組成的合作小組來(lái)進(jìn)行。

在框架勾畫(huà)階段，無(wú)論使用什么工具，關(guān)鍵是要快速、協(xié)作型和可視性要強(qiáng)，并且易于迭代和分享。

與目標(biāo)導(dǎo)向情景場(chǎng)景不同，關(guān)鍵線路場(chǎng)景以任務(wù)為導(dǎo)向，關(guān)注情景場(chǎng)景中廣泛描述和暗含的任務(wù)細(xì)節(jié)。這不意味著我們可以忽視目標(biāo)，目標(biāo)和人物模型需求始終都是整個(gè)設(shè)計(jì)過(guò)程的度量尺，用來(lái)刪除不必要的任務(wù)，優(yōu)化必要任務(wù)。不過(guò)，關(guān)鍵線路情境劇本必須在細(xì)節(jié)上嚴(yán)謹(jǐn)?shù)孛枋雒總€(gè)主要交互的精確行為，并提供每個(gè)主要線路的走查。

2. 定義視覺(jué)設(shè)計(jì)框架

(1) 開(kāi)發(fā)視覺(jué)體驗(yàn)特征

(2) 開(kāi)發(fā)視覺(jué)語(yǔ)言研究，在此階段，交互設(shè)計(jì)通常只有一個(gè)最優(yōu)的行為框架。與此不同，首次給涉眾展現(xiàn)視覺(jué)時(shí)，我們通常會(huì)拿出3～5套方案。這些方案的視覺(jué)風(fēng)格不同，但每種都包含了體驗(yàn)關(guān)鍵字和目標(biāo)。使用體驗(yàn)特征進(jìn)行設(shè)計(jì)方案的開(kāi)發(fā)，能夠在保持品牌含義一致性的同時(shí)，對(duì)體驗(yàn)進(jìn)行描述，從而避免涉眾根據(jù)個(gè)人喜歡和偏見(jiàn)進(jìn)行決策。

通常，我們會(huì)開(kāi)發(fā)一兩個(gè)極端的備選方案，在某一方向上把外觀和感覺(jué)推向極致，這會(huì)使不同方案的特點(diǎn)更加鮮明。

(3) 將已選擇的視覺(jué)風(fēng)格應(yīng)用于屏幕原型

3. 定義服務(wù)設(shè)計(jì)框架

(1) 描述客戶旅程（人物模型完成一個(gè)任務(wù)所需要的主要路徑、次要路徑，他們的目的）

(2) 創(chuàng)建服務(wù)藍(lán)圖（泳道圖）

(3) 創(chuàng)建體驗(yàn)原型

4. 定義服務(wù)設(shè)計(jì)框架

(1) 描述客戶旅程（人物模型完成一個(gè)任務(wù)所需要的主要路徑、次要路徑，他們的目的）

(2) 創(chuàng)建服務(wù)藍(lán)圖（泳道圖）

(3) 創(chuàng)建體驗(yàn)原型

二、細(xì)化外形和行為

完成堅(jiān)實(shí)、穩(wěn)定的框架定義后，設(shè)計(jì)者會(huì)發(fā)現(xiàn)設(shè)計(jì)的剩余部分都變得明朗起來(lái)，關(guān)鍵線路場(chǎng)景的每一次重復(fù)都使得設(shè)計(jì)更加細(xì)化，產(chǎn)品的整體連貫性和流暢性也更加順暢。這個(gè)階段是轉(zhuǎn)換到提煉階段的過(guò)渡期，設(shè)計(jì)已經(jīng)初具模型。

在這階段，要關(guān)注更深且更細(xì)微的方面，并且設(shè)計(jì)者要形成自己的組件庫(kù)（設(shè)計(jì)指南）

三、驗(yàn)證與測(cè)試設(shè)計(jì)

用戶反饋和可用性測(cè)試對(duì)于發(fā)現(xiàn)交互框架中的主要問(wèn)題及某些方面的細(xì)化，是很有幫助的。并且對(duì)于有些操作的微調(diào)也很有好處。

設(shè)計(jì)者參與可用性研究

1. 將重點(diǎn)放在設(shè)計(jì)過(guò)程中的重要問(wèn)題上
2. 使用任務(wù)角色和其特性制定實(shí)驗(yàn)參與者的標(biāo)準(zhǔn)
3. 運(yùn)用場(chǎng)景開(kāi)發(fā)用戶任務(wù)
4. 觀察測(cè)試過(guò)程
5. 和其他人一道共同分析研究中的發(fā)現(xiàn)

本文由 @SWM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。