跟大師學(xué)框架層設(shè)計(jì):框架設(shè)計(jì)的6個(gè)步驟

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