「交互設(shè)計」設(shè)計框架的六個步驟!Fㄖ谩焊夸!



Q:什么是設(shè)計框架?


設(shè)計框架(design framework)??

概念:定義了用戶體驗的整個結(jié)構(gòu)蓝角,包括底層組織原則阱穗,屏幕上功能元素的排列,工作流程使鹅,產(chǎn)品交互揪阶,傳遞信息的視覺和形式語言,功能性和品牌識別等(包括 交互框架患朱,視覺設(shè)計框架鲁僚,工業(yè)設(shè)計框架)


Q:什么是交互設(shè)計框架?


交互框架設(shè)計(interaction framework):交互設(shè)計師利用場景和需求來創(chuàng)建屏幕和行為草圖裁厅。(簡單的說就是繪制界面交互線框圖)



Q:如何定義交互框架冰沙?


交互框架定義了高層次的屏幕布局,產(chǎn)品的工作流执虹,行為和組織拓挥。


Q:交互框架定義的六個過程?


1.定義形式要素袋励,姿態(tài)和輸入方法(什么端的產(chǎn)品侥啤,用戶如何交互当叭,輸入的方式是怎樣的)

2.定義功能性和數(shù)據(jù)元素(將功能轉(zhuǎn)換為界面上的具體表現(xiàn)--例如 ?需求:發(fā)送郵件,在界面上要呈現(xiàn)的功能元素:發(fā)送按鈕)

3.確定功能組和層級(將所有的功能元素分組愿棋,排列優(yōu)先級)

4.勾畫交互框架(畫圖)

5.構(gòu)建關(guān)鍵線路情景劇本(常用/重要功能的走查)

6.運(yùn)用驗證性場景來檢查設(shè)計(不太頻繁/不太重要功能的走查)


框架定義的過程

Q:這六個過程具體如何實(shí)施科展?


步驟一:定義形式要素,姿態(tài)和輸入方法(什么端的產(chǎn)品糠雨,用戶如何交互才睹,輸入的方式是怎樣的)


1.形式要素(form factor)指在產(chǎn)品設(shè)計前期考慮產(chǎn)品是web應(yīng)用,手機(jī)端應(yīng)用還是公共場所的信息亭等 甘邀±湃粒考慮每種形式要素對設(shè)計暗含了什么限制

2.考慮產(chǎn)品的基本姿態(tài)(posture),確定該系統(tǒng)的輸入方法松邪。

產(chǎn)品姿態(tài)是指用戶會投入多大的注意力和產(chǎn)品互動坞琴,以及產(chǎn)品的互動會對用戶投入的注意力作出何種反應(yīng)

輸入方法是用戶和產(chǎn)品互動的方式。(同時受到產(chǎn)品外形和姿態(tài)逗抑,人物模型的態(tài)度剧辐,能力和喜好的驅(qū)使)。包括:鍵盤邮府,書包荧关,小鍵盤,拇指板褂傀,觸摸屏忍啤,聲音,游戲桿仙辟,遙控器同波,專門的按鍵等


確定該產(chǎn)品的主要輸入方法(例如大多數(shù)電腦應(yīng)用/網(wǎng)站都需要鍵盤和鼠標(biāo)兩種輸入方法,而ipad通常是用手指觸摸或者是手繪筆)


步驟二:定義功能性和數(shù)據(jù)元素 ?(將功能轉(zhuǎn)換為界面上的具體表現(xiàn)--例如? 需求:發(fā)送郵件叠国,在界面上要呈現(xiàn)的功能元素為:發(fā)送按鈕未檩,存入草稿按鈕等)


功能性和數(shù)據(jù)元素代表著界面中要展示給用戶的功能和數(shù)據(jù)。

功能元素具體指的是我們將需求轉(zhuǎn)化為具體的功能元素粟焊,繼而展示在界面上的內(nèi)容讹挎。(簡單的說就是,我們將整理好的需求轉(zhuǎn)化為具體的功能點(diǎn)以后吆玖,具體呈現(xiàn)在界面上的東西筒溃。)


步驟三:確定功能組和層級 (將所有的功能元素分組,排列優(yōu)先級)


具體步驟為:將列出的功能按照重要性進(jìn)行優(yōu)先級的分組


此時需要考慮以下主要問題:

1.哪些元素需要大片的視頻區(qū)域沾乘,哪些不需要怜奖?

2.哪些元素能夠容納其他元素?

3.容器如何組織才能優(yōu)化工作流翅阵?

4.哪些元素需要捆綁使用歪玲?哪些不是迁央?

5.相關(guān)聯(lián)的元素使用時順序如何?

6.哪些元素有助于人物模型作出決定滥崩?

7.采用何種交互模式和原則岖圈?

8.人物模型的心理模型如何影響元素組織?


步驟四:勾畫交互框架(畫圖)


開始階段關(guān)注整體钙皮,不要局限在細(xì)節(jié)蜂科。可以以紙面原型短条,做前期的溝通导匣,等確認(rèn)后再輸出細(xì)節(jié)。

這個階段根據(jù)具體操作為:根據(jù)我們確定的功能元素茸时,以及給功能元素排布的優(yōu)先級贡定,在界面上進(jìn)行排版。最先開始是以紙面原型(手稿)繪制整體可都,不斷的調(diào)整再用Axure或其他線框軟件繪制出基本確定的交互線框圖缓待,跟其他同事溝通進(jìn)行交互稿的調(diào)整



步驟五:構(gòu)建關(guān)鍵線路情境劇本(常用/重要功能的走查)


本步驟的目的:交互的走查,針對具體任務(wù)進(jìn)行用戶使用流程的走查渠牲,繼而對交互進(jìn)行調(diào)整

關(guān)鍵線路情境劇本描述了人物模型如何使用交互框架詞匯同產(chǎn)品進(jìn)行交互旋炒。人物模型最頻繁使用界面的主要路徑,通常是每天都使用的路徑(例如QQ郵箱嘱兼,關(guān)鍵線路活動包括了讀寫郵件)

用關(guān)鍵線路情境對用戶動作和產(chǎn)品反應(yīng)中更為具體的細(xì)節(jié)進(jìn)行仔細(xì)考量。關(guān)鍵線路情境以任務(wù)為導(dǎo)向贤徒,必須在細(xì)節(jié)上嚴(yán)謹(jǐn)?shù)孛枋雒總€主要交互的精確行為芹壕,并提供每個主要線路的走查。

故事板

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

故事板借用了電影制作和動畫片中的技巧,通過類似的過程對設(shè)計想法進(jìn)行計劃和評估序宦。

產(chǎn)品和用戶間的每個交互都可以用一個或多個框架或者幻燈片來描述睁壁,通過故事板,我們可以使交互的連貫性和整個過程接受現(xiàn)實(shí)的檢驗互捌。


步驟六:通過驗證性的場景來檢查設(shè)計 (不太頻繁/不太重要功能的走查)


本步驟的目標(biāo):針對不太頻繁使用和不太重要的交互上潘明,通過驗證性場景,指出設(shè)計方案的漏洞秕噪,并根據(jù)需要進(jìn)行調(diào)整

按照如下順序钳降,解決三類主要的驗證性場景

1.替代場景 ?指人物模型決策過程中,關(guān)鍵路徑某個點(diǎn)的替代/分岔點(diǎn)(例如用戶A 決定通過電子郵件而不是電話回復(fù)用戶B)

2.必需使用的場景 ? 指那些必須要執(zhí)行腌巾,但又不經(jīng)常發(fā)生的動作 (例如 清空數(shù)據(jù)遂填,升級設(shè)備)

3.邊緣情形場景 ?指的是非典型情形下一些產(chǎn)品必須要有卻不太常用的功能(例如 用戶A想添加兩個重名的聯(lián)系人 ?就是一個邊緣情境場景)



以上铲觉。

緣小蛋

文章內(nèi)容來自《aboout face 4》 重點(diǎn)/讀書筆記


推薦閱讀

「交互設(shè)計」需求定義的五個方法!O偶帷撵幽!


歡迎設(shè)計師小伙伴們 關(guān)注/交流/一起玩設(shè)計~(●'?'●)??

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市礁击,隨后出現(xiàn)的幾起案子盐杂,更是在濱河造成了極大的恐慌,老刑警劉巖客税,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件况褪,死亡現(xiàn)場離奇詭異,居然都是意外死亡更耻,警方通過查閱死者的電腦和手機(jī)测垛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秧均,“玉大人食侮,你說我怎么就攤上這事∧亢” “怎么了锯七?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長誉己。 經(jīng)常有香客問我眉尸,道長,這世上最難降的妖魔是什么巨双? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任噪猾,我火速辦了婚禮,結(jié)果婚禮上筑累,老公的妹妹穿的比我還像新娘袱蜡。我一直安慰自己,他們只是感情好慢宗,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布坪蚁。 她就那樣靜靜地躺著,像睡著了一般镜沽。 火紅的嫁衣襯著肌膚如雪敏晤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天缅茉,我揣著相機(jī)與錄音茵典,去河邊找鬼。 笑死宾舅,一個胖子當(dāng)著我的面吹牛统阿,可吹牛的內(nèi)容都是我干的彩倚。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼扶平,長吁一口氣:“原來是場噩夢啊……” “哼帆离!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起结澄,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤哥谷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后麻献,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體们妥,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年勉吻,在試婚紗的時候發(fā)現(xiàn)自己被綠了监婶。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡齿桃,死狀恐怖惑惶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情短纵,我是刑警寧澤带污,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站香到,受9級特大地震影響鱼冀,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜悠就,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一千绪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧理卑,春花似錦翘紊、人聲如沸蔽氨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鹉究。三九已至宇立,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間自赔,已是汗流浹背妈嘹。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留绍妨,地道東北人润脸。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓柬脸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親毙驯。 傳聞我的和親對象是個殘疾皇子倒堕,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

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