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