3 分鐘，跟交互設(shè)計之父學(xué)框架層設(shè)計
（Zara Picken）
先用上帝視角想象一下用戶界面和相關(guān)行為的整體結(jié)構(gòu)。
——交互設(shè)計之父Alan Cooper
原標(biāo)題：3分鐘，跟大師學(xué)框架層設(shè)計
數(shù)英網(wǎng)用戶原創(chuàng)文章，轉(zhuǎn)載請聯(lián)系本人
想象一下，你就站在這個路口。路邊有綠化帶和小公園，人行道上有人在走著，私家車零散地停在車位上。你約的出租車正停在馬路左邊等你。再熟悉不過的場景，但是這都是精心設(shè)計過的。
盡管城市、交通系統(tǒng)、網(wǎng)站都不會顯示明確的邊界，但城市設(shè)計師們通過雙黃線、斑馬線、馬路牙子、臺階等已經(jīng)事先把不同的區(qū)域框了起來，讓你在不同的框框里做不同的事情。你意識不到這些框架的存在，不會感覺被命令，潛意識做著一些事。
雙十一的時候，不會去想我是怎么一步一步花了那么多錢的；刷微信的時候，不會去想為什么點來點去就過去了一個小時。在不知不覺中引導(dǎo)我們的行動，這是框架的力量。就像圖片中的冰山，用戶能感知的就是露出水面的一角。水面下還有框架、結(jié)構(gòu)、范圍和戰(zhàn)略的影響。框架就在接近產(chǎn)品表象的部分發(fā)揮作用。
《西部世界》里的BOSS，用上帝視角，能夠決定人物的命運(yùn)。而現(xiàn)實中的人機(jī)交互設(shè)計，更像是一個“服務(wù)者”的角色。以需求為導(dǎo)向、理解用戶的心理、期望，理解商業(yè)和技術(shù)，創(chuàng)造出有用、易用、可行、令人滿意的產(chǎn)品體驗。這其中框架設(shè)計師像擁有一直上帝之手，牽動著用戶的行為。
如何設(shè)計一個完美的框架？
千萬不要一下子陷入細(xì)節(jié)！！！設(shè)計框架定義了用戶體驗的整個結(jié)構(gòu)，包括信息組織原則、屏幕上功能元素的排列、工作流程、產(chǎn)品交互、視覺和形式語言、功能性和品牌識別等。
需要設(shè)計的框架包括交互設(shè)計框架、視覺設(shè)計框架、有時還包括工業(yè)設(shè)計框架和服務(wù)設(shè)計框架。這個階段中，形式設(shè)計和行為設(shè)計需要保持一致。而科學(xué)的設(shè)計流程是卓越設(shè)計的基礎(chǔ)。
Alan Cooper通過數(shù)十年總結(jié)出來一套交互框架設(shè)計流程：
1-2主要是信息的提煉和匹配，3-5是信息層級的梳理和建立，6是設(shè)計的測試驗證。要注意的是，3-5是一個循環(huán)的過程，1-6也不是線性的流程，因人而異。
1.定義形式要素、姿態(tài)和輸入方法
這是第一步。建議是，深入群眾獲取一手資料。
形式要素：通過回顧人物模型和場景，了解產(chǎn)品形式對交互設(shè)計的限制；
交互姿態(tài)：思考用戶會投入多大注意力和產(chǎn)品互動，產(chǎn)品會做出何種反應(yīng)；
輸入方法：考慮到用戶和產(chǎn)品互動的方式（鍵盤、鼠標(biāo)、木質(zhì)板、聲音等）。
2.定義功能性和數(shù)據(jù)元素
數(shù)據(jù)元素：通常是交互產(chǎn)品中的基本主體（比如照片、電子郵件、客戶記錄及訂單等，是用戶可以訪問、反應(yīng)記憶操作的基本個體）。理想情況下，數(shù)據(jù)元素要符合用戶的心理模型。
功能元素：是針對界面中的數(shù)據(jù)元素及其現(xiàn)實所做的操作。一個需求通常由多個界面元素來滿足。我們可以假定產(chǎn)品是真人，而且這是一個體貼周到的人（都說人工智能是未來，因為符合人性）。回到情境場景、人物模型、心理模型中，去驗證方案是否適合。
3.確定功能組和層級
這個就看邏輯能力了。把數(shù)據(jù)和功能納入屏幕、框架和網(wǎng)格等高層次結(jié)構(gòu)中，更好的在任務(wù)中和任務(wù)間疏通人物模型的流程。這個階段需要思考的問題：
哪些元素需要大片的視覺區(qū)域，那些不需要？
哪些元素能夠容納其他元素？
如何組織分類才能優(yōu)化工作流？
哪些元素需要捆綁使用，哪些不需要？
相關(guān)的元素順序如何？
哪些數(shù)據(jù)元素有助于任務(wù)魔性做出決定？
采用何種交互模式和原則？
人物模型的心理模型如何影響元素的組織？
4.勾畫交互框架
運(yùn)籌帷幄就是這個階段。將視覺圖細(xì)分為粗略的方塊圖，對應(yīng)窗格、控制部件，及其他高層次的容器。開始階段必須看到整體且高層次的框架，不要陷入細(xì)節(jié)！！！（第二次強(qiáng)調(diào)咯）
5.構(gòu)建關(guān)鍵線路情景劇本
為真實的世界設(shè)計。用低保真草圖框架和關(guān)鍵線路情景的敘述，可以充分地描述設(shè)計方案如何幫助用戶完成目標(biāo)。通過不斷地變更和反復(fù)，優(yōu)化交互流程。畢竟魔鬼和天使都在細(xì)節(jié)里。有個很好用的工具——故事板。它借助了電影制作和動畫片中的技巧，讓產(chǎn)品和用戶之間的每個交互都可以用框架來描繪。
6.運(yùn)用驗證性場景來檢查設(shè)計
考驗嚴(yán)謹(jǐn)性的時候到了！需要驗證的場景主要有三類：
替代場景（比如常見的例外情況）
必須使用的場景，常見又不經(jīng)常發(fā)生的動作（比如清空數(shù)據(jù)庫）
邊緣情形場景,必須要有卻不太常用的功能（比如要添加兩個重名的聯(lián)系人）
交互框架建立了產(chǎn)品行為的整體架構(gòu)，視覺框架建立行為有關(guān)的外形。視覺設(shè)計外形的過程是：
（1）開發(fā)視覺體驗特征
定義視覺設(shè)計框架的第一步，是確認(rèn)產(chǎn)品的風(fēng)格、調(diào)性和品牌訴求。提煉3-5個詞作為產(chǎn)品的“體驗特征”。這些關(guān)鍵詞需要經(jīng)過競品、市場的分析和用戶測試后才能最終確定。
（2）開發(fā)視覺語言研究
交互設(shè)計通常只有一個最優(yōu)行為框架，而視覺方案會有多種選擇。視覺語言包括了顏色、類型、元素、整體的外形、尺寸和界面質(zhì)感等。
除了保持品牌一致性，實際工作中，視覺方案需要提供對交互有意義的形式和感覺。比如老人和視力不好的人需要更大和更易讀的屏幕顯示。
（3）將已選擇的視覺風(fēng)格應(yīng)用于屏幕原型
綜合協(xié)調(diào)交互和視覺設(shè)計，進(jìn)一步完善和打磨，便于更好地評估方案的可行性。
我們司空見慣的行為就是這樣一步一步精心設(shè)計出來的。完成堅實穩(wěn)定的框架之后，設(shè)計的剩余部分就會變得明朗。關(guān)鍵就在于產(chǎn)品的整體連貫性和流暢性。
用戶體驗只有一個，用戶不希望遇到任何一個不順暢的意外，而周全的框架可以預(yù)知意外。
設(shè)計讓美好發(fā)生，也讓錯誤不可能發(fā)生。
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）