看到這個圖,其實很清楚了,研發(fā)先行不是最好的路線。產(chǎn)品、UI設計師以及后續(xù)研發(fā)調(diào)整的工作量很大。那么,一個完整的交互設計流程是怎樣的呢?
首先,我們先來認識一下產(chǎn)品的五個用戶體驗的要素

用體驗的五個層面分為:戰(zhàn)略層、范圍層、結構層、框架層、表現(xiàn)層。五個層面自上而下地建設,具備基本的雙重性、用戶體驗的要素和應用這些要素。
所謂戰(zhàn)略層,即為產(chǎn)品目標、用戶需求,通俗來講,經(jīng)營者想從網(wǎng)站上得到什么,用戶想從網(wǎng)站上得到什么?
所謂范圍層,即功能規(guī)格和內(nèi)容需求,其意義在于這是一個有價值的過程,同時能夠產(chǎn)生有價值的產(chǎn)品。比如,提供用戶可以保存之前的郵寄地址功能。
結構層,即交互設計、信息架構層,其目的是為了確定各個將要呈現(xiàn)給用戶的元素的“模式”和“順序”。交互設計關注于將影響用戶執(zhí)行和完成任務的元素。信息架構則關注如何將信息表達給用戶的元素。重點:理解用戶的工作方式、行為和思考模式。
框架層,即界面設計、導航設計、信息設計層。
界面設計是用來確定界面空間元素以及位置,提供用戶完成任務的能力,通過它,用戶能真正的接觸到那些“在結構層的交互設計中”確定的具體功能。
導航設計:呈現(xiàn)信息的一種界面形式,提供給用戶區(qū)某個地方的能力。
信息設計:呈現(xiàn)有效地信息溝通,表達想法,它是這個層面中范圍最廣的一個要素。
實現(xiàn)方法建議以線框圖將設計信息、界面設計和導航設計放置到一起,形成一個統(tǒng)一的、有內(nèi)在凝聚力的架構的地方。
- 通過安排和選擇界面元素來整合界面設計;
- 通過識別和定義核心導航系統(tǒng)來整合導航設計;
- 通過放置和排列信息組成部分的優(yōu)先級來整合信息設計。
線框圖的好處是可以確定一個建立在基本概念結構上的架構,同時指出了視覺設計應該前進的方向。
表現(xiàn)層,即為視覺設計。界面設計考慮可交互元素的不足,導航設計考慮在產(chǎn)品中引導用戶移動的元素安排,信息設計考慮傳達給用戶的信息要素的排布,解決并彌補“產(chǎn)品框架層的邏輯排布”的感知呈現(xiàn)問題。
評估一個頁面的視覺設計的簡單方法:終于眼睛。一個成功的設計有2個重要的特點:
- 遵循的是一條流暢的路徑;
- 在不需要太多細節(jié)來嚇到用戶的前提下,它為用戶提供有效選擇的、某種可能的“引導”。
所以,我們的設計師應該怎么做呢?
讀懂原型圖
- 讀懂PRD。確保在需求理解上,與PM保持一致;
- 查找漏洞。人無完人,在成熟的PM,也難免有疏漏。找出遺漏,與PM反饋、溝通;
- 提出產(chǎn)品新想法。讀PRD時,總會有一些產(chǎn)品的好想法冒出來,及時與PM和團隊溝通;
- 開始構思交互。
草圖快速溝通
通過草圖,快速將“產(chǎn)品關鍵流程”、“關鍵交互界面布局”呈現(xiàn)紙面,以此與PM、技術溝通至達成共識;目的是為了:
- 再次掃遺漏;
- 收攏想法。這個階段,產(chǎn)品設計基本定型;
- 達成共識。確保讓產(chǎn)品、設計、技術隊要做的事情有一致的理解,PM需更新PRD、技術開始做開發(fā)準備。
Axure線框圖表現(xiàn)產(chǎn)品流程、界面
包含:產(chǎn)品流程圖、全部的頁面原型。
Axure讓團隊對產(chǎn)品的理解無異議,對最終的產(chǎn)品有直觀的了解。這個階段,產(chǎn)品需求凍結。開發(fā)人員可以依據(jù)原型對UI關聯(lián)較小的部分進行技術開發(fā)。
視覺設計
有前面兩個“掃清障礙”的過程,這個階段,視覺設計時非常舒服的事情。在相對完整的設計規(guī)范、控件規(guī)范的前提下,視覺包括:
- 風格探索;
- 關鍵頁面的視覺設計;
- 關鍵交互動畫表現(xiàn)(如果無法口頭項技術表達動畫效果時,給出一個“活的”效果,是非常直觀的。
視覺素材輸出、設計文件標注
每個項目最終給到開發(fā)人員的都要有效果圖、標注圖、切圖三個文件夾。Pxcook、Markman是不錯的標注工具,Cutteran、Assistor PS是很方便的切圖工具。
開發(fā)后期,細節(jié)跟進
與開發(fā)跟進細節(jié),是設計過程的一部分。在我們團隊,完全依靠規(guī)范作業(yè)、設計文件標注(不和開發(fā)人員說一句話),能夠確保80%的交互、視覺細節(jié)能夠被還原。剩下的20%,就要設計師與開發(fā)人員肩并肩坐在一起打磨了。開發(fā)過程中,一定要預留這個時間。主要包括:邊距、字體、界面動畫的數(shù)值微調(diào)。
原文作者Havery,由@理理V 編輯整理,轉載請注明出處。
這不是用戶體驗要素里講的嗎..
11
可以,可以
?? 不錯
其實這個原理很多地方都有,這里也描述得清楚,但是如果每個點有多幾個列子就好了,特別是戰(zhàn)略層和范圍層的例子
此篇文章是小編身處在研發(fā)先行的快節(jié)奏企業(yè)中遇到的問題。創(chuàng)業(yè)公司,節(jié)奏快是沒錯的,快也不能省略對某一產(chǎn)品系統(tǒng)性的規(guī)劃。后續(xù)產(chǎn)品和UI在設計產(chǎn)品前端時,做減法及規(guī)劃邏輯是很頭痛的。謹以此為鑒吧。
沒看太明白
等我下一篇出解說版 ??