需要設(shè)計(jì)的框架包括交互設(shè)計(jì)框架、視覺設(shè)計(jì)框架、有時(shí)還包括工業(yè)設(shè)計(jì)框架和服務(wù)設(shè)計(jì)框架。這個(gè)階段中，形式設(shè)計(jì)和行為設(shè)計(jì)需要保持一致。而科學(xué)的設(shè)計(jì)流程是卓越設(shè)計(jì)的基礎(chǔ)。

Alan Cooper通過數(shù)十年總結(jié)出來一套交互框架設(shè)計(jì)流程：

1-2主要是信息的提煉和匹配，3-5是信息層級的梳理和建立，6是設(shè)計(jì)的測試驗(yàn)證。要注意的是，3-5是一個(gè)循環(huán)的過程，1-6也不是線性的流程，因人而異。

1.定義形式要素、姿態(tài)和輸入方法

這是第一步。建議是，深入群眾獲取一手資料。

• 形式要素：通過回顧人物模型和場景，了解產(chǎn)品形式對交互設(shè)計(jì)的限制；
• 交互姿態(tài)：思考用戶會(huì)投入多大注意力和產(chǎn)品互動(dòng)，產(chǎn)品會(huì)做出何種反應(yīng)；
• 輸入方法：考慮到用戶和產(chǎn)品互動(dòng)的方式（鍵盤、鼠標(biāo)、木質(zhì)板、聲音等）。

2.定義功能性和數(shù)據(jù)元素

數(shù)據(jù)元素：通常是交互產(chǎn)品中的基本主體（比如照片、電子郵件、客戶記錄及訂單等，是用戶可以訪問、反應(yīng)記憶操作的基本個(gè)體）。理想情況下，數(shù)據(jù)元素要符合用戶的心理模型。

功能元素：是針對界面中的數(shù)據(jù)元素及其現(xiàn)實(shí)所做的操作。一個(gè)需求通常由多個(gè)界面元素來滿足。我們可以假定產(chǎn)品是真人，而且這是一個(gè)體貼周到的人（都說人工智能是未來，因?yàn)榉先诵裕??；氐角榫硤鼍啊⑷宋锬Ｐ?、心理模型中，去?yàn)證方案是否適合。

3.確定功能組和層級

這個(gè)就看邏輯能力了。把數(shù)據(jù)和功能納入屏幕、框架和網(wǎng)格等高層次結(jié)構(gòu)中，更好的在任務(wù)中和任務(wù)間疏通人物模型的流程。這個(gè)階段需要思考的問題：

• 哪些元素需要大片的視覺區(qū)域，那些不需要？
• 哪些元素能夠容納其他元素？
• 如何組織分類才能優(yōu)化工作流？
• 哪些元素需要捆綁使用，哪些不需要？
• 相關(guān)的元素順序如何？
• 哪些數(shù)據(jù)元素有助于任務(wù)魔性做出決定？
• 采用何種交互模式和原則？
• 人物模型的心理模型如何影響元素的組織？

4.勾畫交互框架

運(yùn)籌帷幄就是這個(gè)階段。將視覺圖細(xì)分為粗略的方塊圖，對應(yīng)窗格、控制部件，及其他高層次的容器。開始階段必須看到整體且高層次的框架，不要陷入細(xì)節(jié)?。。。ǖ诙螐?qiáng)調(diào)咯）

5.構(gòu)建關(guān)鍵線路情景劇本

為真實(shí)的世界設(shè)計(jì)。用低保真草圖框架和關(guān)鍵線路情景的敘述，可以充分地描述設(shè)計(jì)方案如何幫助用戶完成目標(biāo)。通過不斷地變更和反復(fù)，優(yōu)化交互流程。畢竟魔鬼和天使都在細(xì)節(jié)里。

有個(gè)很好用的工具——故事板。它借助了電影制作和動(dòng)畫片中的技巧，讓產(chǎn)品和用戶之間的每個(gè)交互都可以用框架來描繪。

6.運(yùn)用驗(yàn)證性場景來檢查設(shè)計(jì)

考驗(yàn)嚴(yán)謹(jǐn)性的時(shí)候到了！需要驗(yàn)證的場景主要有三類：

• 替代場景（比如常見的例外情況）
• 必須使用的場景，常見又不經(jīng)常發(fā)生的動(dòng)作（比如清空數(shù)據(jù)庫）
• 邊緣情形場景,必須要有卻不太常用的功能（比如要添加兩個(gè)重名的聯(lián)系人）

交互框架建立了產(chǎn)品行為的整體架構(gòu)，視覺框架建立行為有關(guān)的外形。

視覺設(shè)計(jì)外形的過程是：

1.開發(fā)視覺體驗(yàn)特征

定義視覺設(shè)計(jì)框架的第一步，是確認(rèn)產(chǎn)品的風(fēng)格、調(diào)性和品牌訴求。提煉3-5個(gè)詞作為產(chǎn)品的“體驗(yàn)特征”。這些關(guān)鍵詞需要經(jīng)過競品、市場的分析和用戶測試后才能最終確定。

2.開發(fā)視覺語言研究

交互設(shè)計(jì)通常只有一個(gè)最優(yōu)行為框架，而視覺方案會(huì)有多種選擇。視覺語言包括了顏色、類型、元素、整體的外形、尺寸和界面質(zhì)感等。

除了保持品牌一致性，實(shí)際工作中，視覺方案需要提供對交互有意義的形式和感覺。比如老人和視力不好的人需要更大和更易讀的屏幕顯示。

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

綜合協(xié)調(diào)交互和視覺設(shè)計(jì)，進(jìn)一步完善和打磨，便于更好地評估方案的可行性。

我們司空見慣的行為就是這樣一步一步精心設(shè)計(jì)出來的。完成堅(jiān)實(shí)穩(wěn)定的框架之后，設(shè)計(jì)的剩余部分就會(huì)變得明朗。關(guān)鍵就在于產(chǎn)品的整體連貫性和流暢性。

封面 Zara Picken

作者：酷九設(shè)計(jì)。微信公眾號：酷九設(shè)計(jì)（coninedesign）

本文由 @酷九設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。