第五章-設(shè)計(jì)產(chǎn)品:框架和提煉

利用故事情節(jié)或場景劇本來設(shè)想理想的用戶交互過程篙程,之后從這些場景和其他來源中對需求進(jìn)行定義赞弥。

創(chuàng)建設(shè)計(jì)框架

在目標(biāo)導(dǎo)向設(shè)計(jì)中,不要一上來就直接跳入細(xì)節(jié)設(shè)計(jì)嗦枢,應(yīng)該先站在一個(gè)高層次上關(guān)注用戶界面和相關(guān)行為的整體結(jié)構(gòu),我們把這個(gè)階段叫做框架設(shè)計(jì)附鸽。

框架設(shè)計(jì)定義了用戶體驗(yàn)的整個(gè)結(jié)構(gòu)脱拼,包括底層組織原則,屏幕上功能元素的排列坷备,工作流程熄浓,產(chǎn)品交互,傳遞信息的視覺和形式語言省撑,功能性和品牌識(shí)別等赌蔑。形式設(shè)計(jì)和行為設(shè)計(jì)必須保持一致。設(shè)計(jì)框架包括:

  • 交互框架
  • 視覺框架

交互設(shè)計(jì)者利用場景和需求來創(chuàng)建屏幕和行為草圖竟秫,完成交互框架設(shè)計(jì)娃惯,與此同時(shí),視覺設(shè)計(jì)者使用視覺語言研究開發(fā)視覺設(shè)計(jì)框架肥败,它通常表現(xiàn)為詳細(xì)的單個(gè)屏幕原型趾浅。

設(shè)計(jì)復(fù)雜行為和交互時(shí),首先關(guān)注主體馒稍,提出低保真而不是包含具體細(xì)節(jié)的方案皿哨,這樣才能保證設(shè)計(jì)師和涉眾在開始階段重點(diǎn)關(guān)注基本原則,滿足人物模型的目標(biāo)和需求筷黔。

定義產(chǎn)品交互框架

交互框架不僅要對高層次的屏幕進(jìn)行定義,還要定義產(chǎn)品的工作流仗颈,行為和組織佛舱,以下6個(gè)步驟描述了交互框架的整個(gè)定義過程:

  • 定義形式要素,姿態(tài)和輸入方法
  • 定義功能性和數(shù)據(jù)元素
  • 確定功能組合層級
  • 勾畫交互框架
  • 構(gòu)建關(guān)鍵線路情景劇本
  • 運(yùn)用驗(yàn)證性場景來檢驗(yàn)設(shè)計(jì)
1. 定義形式要素

使用情景場景挨决,環(huán)境请祖。

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

功能性和數(shù)據(jù)元素代表著界面中要展示給用戶的功能和數(shù)據(jù),他們是需求定義階段中所確定下來的功能和數(shù)據(jù)需求得具體表現(xiàn)形式脖祈,

數(shù)據(jù)元素是交互設(shè)計(jì)產(chǎn)品中的基本主體肆捕,可以訪問,反應(yīng)以及操作的基本個(gè)體盖高,數(shù)據(jù)元素要符合人物模型的心理預(yù)期慎陵。

考慮數(shù)據(jù)元素間的關(guān)系也大有裨益。

功能元素是針對界面中的數(shù)據(jù)元素及其顯示所做的操作喻奥,功能元素包括數(shù)據(jù)元素操作工具席纽。

一個(gè)需求通常由多個(gè)界面元素來滿足。

必須回到情景場景撞蚕,人物模型和目標(biāo)和心理模型中润梯,才能檢驗(yàn)解決方案是否適合此刻的情景。每個(gè)確定的用戶需求,通常都需要?jiǎng)?chuàng)建多種解決方案纺铭,這時(shí)候就要審視哪個(gè)方案更能滿足一下需求:

  • 最有效滿足用戶目標(biāo)
  • 最符合設(shè)計(jì)原則
  • 最適合當(dāng)前技術(shù)和成本考量
  • 最能滿足其他條件
假定產(chǎn)品時(shí)真人

事想一下寇钉,如果是以為樂于助人的人,會(huì)怎么做舶赔,產(chǎn)品對待人物模型時(shí)是否有人情味?

采用設(shè)計(jì)原則和模式

對于需求向功能元素的轉(zhuǎn)變來說扫倡,一般性的設(shè)計(jì)原則和具體的交互模式很重要,這些工具都凝聚了設(shè)計(jì)師處理類似問題積累的多年設(shè)計(jì)經(jīng)驗(yàn)顿痪,忽視這些嘗試就意味著會(huì)在早已熟知解決方案的問題上浪費(fèi)不必要的時(shí)間镊辕。此外偏離設(shè)計(jì)標(biāo)注,可能會(huì)導(dǎo)致用戶從零開始學(xué)習(xí)蚁袭,除非有充足的理由征懈,否則不要輕易背離標(biāo)準(zhǔn)。

步驟3:確定功能組和層級

有了完善高層次功能和數(shù)據(jù)元素后揩悄,就可以開始按照不同功能分組工作卖哎,確定各自的層級。要考慮問題如下:

  • 哪些元素需要大片的區(qū)域删性,哪些不要亏娜?
  • 哪些元素能容納其他元素?
  • 容器如何組織才能優(yōu)化工作流蹬挺?
  • 哪些元素需要捆綁使用维贺?哪些不是?
  • 相關(guān)聯(lián)的元素使用時(shí)順序如何巴帮?
  • 那些數(shù)據(jù)元素有助于人物模型做出決定溯泣?
  • 采用何種交互模式和原則?
  • 人物模型的心理模型如何影響元素組織榕茧?
步驟4:勾畫交互框架

開始階段一定要看整體且高層次的框架垃沦,不要被界面上某個(gè)特殊區(qū)域的細(xì)節(jié)分散注意力。

在選擇最佳方案前用押,嘗試采用幾種不同排列并用于驗(yàn)證性的場景肢簿,通常是有效的做法,在設(shè)計(jì)的初期花費(fèi)過多的精力研究復(fù)雜細(xì)節(jié)蜻拨,會(huì)阻礙設(shè)計(jì)者改變思路池充,選擇更好的解決辦法。

勾畫大致的框架是一個(gè)反復(fù)的過程缎讼,最好由一到兩個(gè)交互設(shè)計(jì)者組成:一個(gè)交互設(shè)計(jì)者和一個(gè)設(shè)計(jì)溝通者纵菌。

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

人物模型如何使用交互框架詞匯同產(chǎn)品進(jìn)行交互,關(guān)鍵線路情況劇本對此進(jìn)行了描述休涤,人物模型最頻繁使用界面的主要路徑咱圆,通常是每天都在使用的路徑笛辟。

這些場景通常從情景場景演變而來,但在此處的場景特別描述了人物模型和組成交互框架的不同功能和數(shù)據(jù)元素之間的交互序苏,交互框架中細(xì)節(jié)越多手幢,我們越會(huì)運(yùn)用關(guān)鍵線路情境,對用戶動(dòng)作和產(chǎn)品反應(yīng)中更為具體的細(xì)節(jié)進(jìn)行仔細(xì)考量忱详。

與目標(biāo)導(dǎo)向情境場景不同围来,關(guān)鍵線路場景以任務(wù)為導(dǎo)向,關(guān)注情境場景中廣泛描述和暗含的任務(wù)細(xì)節(jié)匈睁,這不意味著忽視目標(biāo)监透,目標(biāo)和任務(wù)模型需求始終都是整個(gè)設(shè)計(jì)過程的度量尺,用來刪除不必要的任務(wù)航唆,優(yōu)化必要的任務(wù)胀蛮。關(guān)鍵線路情境劇本必須在細(xì)節(jié)上嚴(yán)謹(jǐn)?shù)拿枋雒總€(gè)主要交互的精確行為,提供每個(gè)主要線路的走查糯钙。

故事板

采用低保真草圖序列和關(guān)鍵線路情境劇本的敘述粪狼,你可以充分地描述設(shè)計(jì)方案如何幫助人物模型完成其目標(biāo)。

過程變更和反復(fù)

并不是簡單的順序過程任岸,在每個(gè)步驟之間前后移動(dòng)再榄,整個(gè)過程反復(fù)幾次,直到產(chǎn)出穩(wěn)定的設(shè)計(jì)方案享潜。

步驟6:通過驗(yàn)證性的場景來檢查設(shè)計(jì)

用故事板完成關(guān)鍵線路情境劇本困鸥,并對交互框架進(jìn)行調(diào)整,場景會(huì)逐漸變得流暢剑按,這時(shí)疾就,可以將重點(diǎn)轉(zhuǎn)移到一些不太頻繁使用和不太重要的交互設(shè)計(jì)上。包含一些假設(shè)性問題吕座,本步驟的目標(biāo)在于指出設(shè)計(jì)方案的漏洞虐译,并根據(jù)需要進(jìn)行調(diào)整瘪板。

  1. 場景替代
    人物模型在決策過程中吴趴,關(guān)鍵路徑某個(gè)點(diǎn)的替代或者分叉點(diǎn),其中包括常見的例外情境侮攀,不常用的工具和試圖锣枝,基于次要人物模型需求和目標(biāo)的其他場景或變體。

2.必須使用的場景
指那些必須要執(zhí)行兰英,但又不經(jīng)常發(fā)生的動(dòng)作撇叁,比如清空數(shù)據(jù)庫,升級等等畦贸。

  1. 邊緣場景
    非典型情形下一些產(chǎn)品必須要有但卻不要常用的功能陨闹。無論何時(shí)邊緣情形都不是設(shè)計(jì)的重點(diǎn)楞捂,但是設(shè)計(jì)者不能忽視邊緣情形或功能,只不過這些情形和功能所需的交互趋厉,應(yīng)該在設(shè)計(jì)工作優(yōu)先級排序中靠后排列寨闹,處于界面的底層。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末君账,一起剝皮案震驚了整個(gè)濱河市繁堡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌乡数,老刑警劉巖椭蹄,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異净赴,居然都是意外死亡绳矩,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進(jìn)店門劫侧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來埋酬,“玉大人,你說我怎么就攤上這事烧栋⌒赐祝” “怎么了?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵审姓,是天一觀的道長珍特。 經(jīng)常有香客問我,道長魔吐,這世上最難降的妖魔是什么扎筒? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮酬姆,結(jié)果婚禮上嗜桌,老公的妹妹穿的比我還像新娘。我一直安慰自己辞色,他們只是感情好骨宠,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著相满,像睡著了一般层亿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上立美,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天匿又,我揣著相機(jī)與錄音,去河邊找鬼建蹄。 笑死碌更,一個(gè)胖子當(dāng)著我的面吹牛裕偿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播痛单,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼击费,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了桦他?” 一聲冷哼從身側(cè)響起蔫巩,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎快压,沒想到半個(gè)月后圆仔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了圾结。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,977評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡歪沃,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出嫌松,到底是詐尸還是另有隱情沪曙,我是刑警寧澤,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布萎羔,位于F島的核電站液走,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏贾陷。R本人自食惡果不足惜缘眶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望髓废。 院中可真熱鬧巷懈,春花似錦、人聲如沸慌洪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蒋譬。三九已至割岛,卻和暖如春愉适,著一層夾襖步出監(jiān)牢的瞬間犯助,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工维咸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留剂买,地道東北人惠爽。 一個(gè)月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像瞬哼,于是被迫代替她去往敵國和親婚肆。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內(nèi)容