上一篇給大家講了制作交互設(shè)計(jì)作品集慨削，前期的準(zhǔn)備和應(yīng)具備的內(nèi)容框架，將自己作品素材已經(jīng)梳理好的小伙伴殴蓬，接下來(lái)就可以來(lái)做核心的作品內(nèi)容了立润。

本文將重點(diǎn)介紹上一篇框架中 “四狂窑、作品集主體” 這一部分的內(nèi)容。

交互設(shè)計(jì)作品集桑腮，注重的是思維邏輯泉哈，將自己作品案例羅列累計(jì)顯然是不明智的做法，一方面無(wú)法聚焦你的優(yōu)勢(shì)和專業(yè)能力，另一方面讀者也會(huì)產(chǎn)生思維疲勞丛晦。好一點(diǎn)的做法是奕纫，將自己的專業(yè)能力和掌握的專業(yè)知識(shí)分解，然后映射到對(duì)應(yīng)的作品案例上烫沙，每一個(gè)作品重點(diǎn)突出你的某一項(xiàng)能力匹层，然后整個(gè)作品集是你的綜合體現(xiàn)。

下面我講一下在不同的案例中锌蓄，應(yīng)該是怎樣的框架升筏，都需要透出交互設(shè)計(jì)上的哪些知識(shí)點(diǎn)。

1.有實(shí)踐項(xiàng)目經(jīng)驗(yàn)的你瘸爽，就可以按以下結(jié)構(gòu)來(lái)表現(xiàn)你的項(xiàng)目作品您访。

2.沒(méi)有實(shí)踐項(xiàng)目，課堂作業(yè)偏多的你剪决，可以按以下結(jié)構(gòu)灵汪，把作業(yè)中缺少的部分進(jìn)行補(bǔ)充、邏輯結(jié)構(gòu)上進(jìn)行優(yōu)化柑潦，完全可以改成較為成熟完整的作品识虚。

一、展現(xiàn)交互流程完整性的作品案例

要點(diǎn)：交互設(shè)計(jì)所涉及的全流程個(gè)環(huán)節(jié)完整妒茬、每個(gè)環(huán)節(jié)不必特別詳細(xì)，一頁(yè)表達(dá)清楚即可蔚晨，但前后邏輯關(guān)系要嚴(yán)謹(jǐn)乍钻。

深藍(lán)色貫穿每一個(gè)環(huán)節(jié)，在這個(gè)案例中铭腕，上下游連接的順暢和嚴(yán)謹(jǐn)性银择，是最重要的

知識(shí)點(diǎn)框架：透出內(nèi)容之間的銜接、上下游的因果關(guān)系突出累舷，是整個(gè)案例要表現(xiàn)的浩考。

舉個(gè)栗子為了大家理解內(nèi)容的銜接，給看一個(gè)只有邏輯內(nèi)容被盈，沒(méi)有視覺美化的案例：

每章封面元素：標(biāo)題析孽、副標(biāo)題、簡(jiǎn)要介紹只怎、小目錄袜瞬、相關(guān)背景圖。（注意身堡，沒(méi)有任何多余無(wú)管要素哦）

1.提出現(xiàn)有產(chǎn)品“功能臃腫邓尤、框架擴(kuò)展性弱、車載環(huán)境適應(yīng)性差、不能同時(shí)適應(yīng)車廠和普通用戶的問(wèn)題”? 2.利用相關(guān)市場(chǎng)分析模型分析汞扎，進(jìn)而得出機(jī)會(huì)缺口：核心功能聚焦季稳、交互適配靈活，專注車載環(huán)境的輕導(dǎo)航澈魄。（該案例用SET分析環(huán)節(jié)景鼠，代替用戶研究環(huán)節(jié)，這個(gè)章節(jié)重點(diǎn)突出“有分析” 讓人知道你是有依據(jù)的一忱，無(wú)論是市場(chǎng)還是用戶莲蜘。因?yàn)楹竺鏁?huì)有專門針對(duì)用戶的案例，讓你去展現(xiàn)相關(guān)能力）

3左：根據(jù)產(chǎn)品缺口帘营，提出創(chuàng)新產(chǎn)品定位：功能模塊化票渠，簡(jiǎn)潔輕便，可與任何產(chǎn)品和環(huán)境組合使用的輕導(dǎo)航芬迄。闡述產(chǎn)品名稱问顷、理念等產(chǎn)品概念。3右：根據(jù)產(chǎn)品定位構(gòu)建目標(biāo)用戶角色禀梳，總結(jié)需求痛點(diǎn)：車廠需要導(dǎo)航具備集成能力杜窄，適應(yīng)廠商系統(tǒng)；用戶覺得現(xiàn)有軟件繁瑣算途，需要適應(yīng)車內(nèi)環(huán)境塞耕，使用簡(jiǎn)單。

4左：根據(jù)產(chǎn)品定位和目標(biāo)用戶嘴瓤，將原來(lái)眾多的功能扫外，只圍繞“巡航洁段、導(dǎo)航袱瓮、查看地圖”三個(gè)場(chǎng)景展開，讓用戶認(rèn)知中的層級(jí)結(jié)構(gòu)變清晰锐峭，廠商利用時(shí)也可以在三個(gè)大模塊中準(zhǔn)確調(diào)用停忿。4右：根據(jù)定義好的功能和層級(jí)驾讲，畫出產(chǎn)品內(nèi)部系統(tǒng)邏輯圖。

4：用線框圖表達(dá)主場(chǎng)景交互方案席赂。用戶最快可以用3步吮铭，最慢可以用5步，就可以順暢導(dǎo)航颅停，解決了之前提到使用繁瑣的痛點(diǎn)沐兵；卡片式的結(jié)構(gòu)，自由匹配功能便监，解決車廠系統(tǒng)適配和集成問(wèn)題扎谎。5：視覺原型展現(xiàn)簡(jiǎn)潔輕松的理念碳想。

以上是讓人知道，你邏輯嚴(yán)謹(jǐn)毁靶，且可以跑通全程的胧奔。即便拿一個(gè)普通的作品來(lái)做也沒(méi)有問(wèn)題。

二预吆、展現(xiàn)用戶研究能力的作品案例

要點(diǎn)：突出對(duì)用戶調(diào)研和可用性測(cè)試的專業(yè)性和完整性龙填、研究結(jié)果利用的合理性。

深藍(lán)色為重點(diǎn)部分拐叉，圓圈的大小代表重點(diǎn)部分的權(quán)重高低

①項(xiàng)目背景：簡(jiǎn)單描述岩遗，提出項(xiàng)目?jī)r(jià)值或問(wèn)題。

②用戶研究（完整展現(xiàn)知識(shí)點(diǎn)）：前期準(zhǔn)備凤瘦、用戶樣本分類及特種宿礁、訪談或問(wèn)卷提綱構(gòu)建、數(shù)據(jù)分析蔬芥、調(diào)研結(jié)論梆靖。

關(guān)于用戶調(diào)研”仕校可查看文章：《了解用戶：調(diào)研的定量與定性》《用戶體驗(yàn)之定量調(diào)研：讓問(wèn)卷無(wú)可挑剔》《用戶體驗(yàn)之定性調(diào)研：讓訪談物盡其用》

③需求分析：建立用戶角色返吻、分析目標(biāo)用戶特征，得出主要用戶和次要用戶乎婿，確定產(chǎn)品定位测僵。

④需求解決方案：簡(jiǎn)單闡述產(chǎn)品定位，和核心界面的線框圖即可谢翎，這一環(huán)主要是為了下一步可用性測(cè)試來(lái)起到銜接作用捍靠。

⑤可用性測(cè)試：測(cè)試前準(zhǔn)備內(nèi)容、啟發(fā)式評(píng)估原則及結(jié)論岳服、測(cè)試方法（發(fā)聲法/觀察法/AB測(cè)試/眼動(dòng)測(cè)試等）、測(cè)試結(jié)果希俩、分析后結(jié)論吊宋、修改建議。

⑥產(chǎn)品最終原型：是經(jīng)過(guò)改良后的產(chǎn)品方案颜武，要體現(xiàn)出可用性測(cè)試的結(jié)論璃搜。

作品集的展現(xiàn)上需體現(xiàn)出以下具體內(nèi)容。用戶調(diào)研相關(guān)可視化框架模板鳞上，供大家參考：

該章節(jié)需具備訪談提綱相關(guān)內(nèi)容这吻，展現(xiàn)你對(duì)調(diào)研準(zhǔn)備的思考

對(duì)調(diào)研用戶的分析，確保用戶研究的合理性

根據(jù)訪談結(jié)果得出的用戶相關(guān)結(jié)論

展示根據(jù)調(diào)研得出的定量數(shù)據(jù)結(jié)論

展示根據(jù)調(diào)研得出的定性數(shù)據(jù)結(jié)論

根據(jù)結(jié)論得出目標(biāo)用戶篙议，以及調(diào)研用戶類型之間的轉(zhuǎn)化關(guān)系

根據(jù)調(diào)研建立用戶角色

三唾糯、展現(xiàn)任務(wù)分析及信息架構(gòu)設(shè)計(jì)的案例

要點(diǎn)：突出對(duì)流程和界面布局方案的思考怠硼、原型設(shè)計(jì)方法和修改。

深藍(lán)色為重點(diǎn)部分

①項(xiàng)目背景：簡(jiǎn)單描述移怯，提出項(xiàng)目?jī)r(jià)值或問(wèn)題香璃。

②產(chǎn)品定位：呼應(yīng)背景中提出的項(xiàng)目?jī)r(jià)值或問(wèn)題，給出相應(yīng)產(chǎn)品定位描述舟误、目標(biāo)用戶和典型場(chǎng)景葡秒，1~2頁(yè)概括即可。

③功能架構(gòu)分析：根據(jù)產(chǎn)品定位給出需求轉(zhuǎn)化模型嵌溢、功能優(yōu)先級(jí)眯牧、產(chǎn)品整體功能架構(gòu)。

④任務(wù)流程分析：根據(jù)功能架構(gòu)赖草，給出詳細(xì)的流程分析圖学少，定義每個(gè)功能任務(wù)。

⑤界面信息布局：詳細(xì)的界面線框圖疚顷、流程引導(dǎo)旱易、注釋說(shuō)明。

⑥交互規(guī)范和視覺效果：控件規(guī)范腿堤、文字規(guī)范阀坏、色彩規(guī)范。

體現(xiàn)在頁(yè)面上的可視化框架如下：

簡(jiǎn)明扼要的產(chǎn)品概念介紹（產(chǎn)品定位）?

對(duì)核心功能進(jìn)行定義和闡述?

展示產(chǎn)品功能架構(gòu)圖笆檀，重點(diǎn)功能可以用不同顏色區(qū)分（圖片禁止轉(zhuǎn)載）

任務(wù)分析圖忌堂，包括正常流和異常流（圖片禁止轉(zhuǎn)載）

詳細(xì)界面流程圖，具備：流程酗洒、界面布局士修、說(shuō)明注釋（圖片禁止轉(zhuǎn)載）

詳細(xì)界面流程圖，具備：流程樱衷、界面布局棋嘲、說(shuō)明注釋（圖片禁止轉(zhuǎn)載）

產(chǎn)品控件規(guī)范（圖片禁止轉(zhuǎn)載）

高保真視覺界面的展示（圖片禁止轉(zhuǎn)載）

界面原型設(shè)計(jì)最完整的作品，適合在這一案例中表現(xiàn)矩桂，同時(shí)這也是一個(gè)設(shè)計(jì)師的基礎(chǔ)核心能力沸移。

四、展現(xiàn)服務(wù)設(shè)計(jì)及相關(guān)運(yùn)營(yíng)能力的案例

要點(diǎn)：一般選用已經(jīng)面向市場(chǎng)的產(chǎn)品侄榴，提出當(dāng)前問(wèn)題后雹锣，闡述解決方案，突出服務(wù)設(shè)計(jì)理念的完整性癞蚕，或運(yùn)營(yíng)前后的用戶變化程度蕊爵。

深藍(lán)色為重點(diǎn)部分，圓圈的大小代表重點(diǎn)部分的權(quán)重高低

①項(xiàng)目背景：簡(jiǎn)要概括項(xiàng)目背景桦山，一般是已經(jīng)面向市場(chǎng)的產(chǎn)品攒射。

②市場(chǎng)分析：利用SPET醋旦、波特五力模型、SWOT分析匆篓、5W2H等分析方法浑度，得出市場(chǎng)現(xiàn)狀。

③用戶旅程圖：用戶從使用到結(jié)束完整的旅程鸦概，寫出每一階段的描述和遇到的問(wèn)題箩张。

④需求痛點(diǎn)分析：梳理用戶核心痛點(diǎn)、設(shè)計(jì)機(jī)會(huì)窗市、得出機(jī)會(huì)所轉(zhuǎn)化出的功能先慷、功能優(yōu)先級(jí)。

⑤商業(yè)模式分析：商業(yè)畫布（合作伙伴 關(guān)鍵業(yè)務(wù) 核心資源 價(jià)值主張 客戶關(guān)系 渠道通路 成本結(jié)構(gòu) 收入來(lái)源）咨察。

⑥服務(wù)設(shè)計(jì)/運(yùn)營(yíng)方案：商業(yè)拓展方案论熙、服務(wù)設(shè)計(jì)藍(lán)圖、或運(yùn)營(yíng)推廣方案的模型圖等（圍繞之前提到的痛點(diǎn)和商業(yè)模式來(lái)進(jìn)行可視化展示）摄狱。

⑦市場(chǎng)效果：設(shè)計(jì)或運(yùn)營(yíng)方案應(yīng)用后脓诡，市場(chǎng)的反饋數(shù)據(jù)，活躍度或粘性的增加等（如果沒(méi)有實(shí)際數(shù)據(jù)也可以不寫）

對(duì)用戶使用的旅程進(jìn)行情緒與需求分析（圖片禁止轉(zhuǎn)載）

通過(guò)旅行圖進(jìn)行功能轉(zhuǎn)化（圖片禁止轉(zhuǎn)載）?

產(chǎn)品概念相關(guān)的商業(yè)畫布分析

產(chǎn)品整體生命周期的規(guī)劃

五媒役、其他小知識(shí)點(diǎn)補(bǔ)充案例

對(duì)細(xì)節(jié)問(wèn)題的處理祝谚、微交互、相關(guān)設(shè)計(jì)原理或方法論的利用等酣衷。不必是完整的項(xiàng)目交惯，可以是某個(gè)小環(huán)節(jié)，作為專題的形式來(lái)展現(xiàn)穿仪，證明你的細(xì)節(jié)處理能力席爽。

如以下案例：

汽車內(nèi)部環(huán)境中空屏幕，設(shè)置功能的界面布局的不同方案思考

車載屏幕鍵盤的點(diǎn)觸交互設(shè)計(jì)思路與方案

硬件與軟件的方控設(shè)計(jì)方案

六啊片、其他能力展現(xiàn)

6.1 數(shù)據(jù)信息可視化

通過(guò)你作品集每一頁(yè)的信息布局和圖形表達(dá)來(lái)展現(xiàn)只锻，因?yàn)樵灸阕髌芳系拿恳豁?yè)，應(yīng)該有很多的文字和數(shù)據(jù)來(lái)傳達(dá)紫谷，但為了他人更輕松易懂的看明白齐饮，你需要以可視化的方式表現(xiàn)。所以你的作品集在無(wú)形當(dāng)中就已經(jīng)在透出你這方面的能力碴里。

關(guān)于信息可視化的一些技巧：利用方法論模型沈矿、利用數(shù)據(jù)表上真、場(chǎng)景故事化咬腋、關(guān)鍵字突出法

信息可視化模型（圖片未經(jīng)授權(quán)不可私自轉(zhuǎn)用）

信息可視化模型（圖片未經(jīng)授權(quán)不可私自轉(zhuǎn)用）?

故事板（圖片未經(jīng)授權(quán)不可私自轉(zhuǎn)用）?

作品集信息可視化的一些常見問(wèn)題：

將文字表述逐條表達(dá)，且突出關(guān)鍵字

注意視覺中心 信息層級(jí)的先后

布局需要有規(guī)律性 減少視覺負(fù)擔(dān)

線框圖要素要詳實(shí)睡互，包含：界面元素 界面信息 說(shuō)明注釋

6.2 溝通與話術(shù)構(gòu)建能力

作品中總會(huì)有無(wú)法用可視化表達(dá)的內(nèi)容根竿，你每個(gè)項(xiàng)目中的介紹和注釋描述陵像，都去簡(jiǎn)化和推敲，你精準(zhǔn)的文案表達(dá)就會(huì)體現(xiàn)出你的溝通與話術(shù)構(gòu)建能力寇壳。

6.3 審美感知能力

作品集的封面與內(nèi)頁(yè)的裝幀設(shè)計(jì)醒颖、每一項(xiàng)目的首頁(yè)設(shè)計(jì)、每一頁(yè)中的排版布局設(shè)計(jì)壳炎，將是你視覺審美設(shè)計(jì)的體現(xiàn)泞歉。

所以：

1.在制作作品集之前，找準(zhǔn)作品集視覺風(fēng)格匿辩，包括配色和圖形特點(diǎn)腰耙，再開始制作；

2.在制作過(guò)程中隨機(jī)調(diào)整圖文铲球；

3.作品集初稿完成后自查挺庞，統(tǒng)一各級(jí)標(biāo)題與文本的“字體、字號(hào)稼病、字色”选侨，校對(duì)圖形的主體色和輔助色，精簡(jiǎn)多余的裝飾性視覺元素然走。

但要注意援制，這里的視覺效果還是以提升你作品集的可讀性為主，裝飾為輔丰刊。讓人在閱讀時(shí)把注意力放在你內(nèi)容的邏輯上還是最重要的隘谣。

6.4 復(fù)盤思考能力

在每一章節(jié)或項(xiàng)目結(jié)尾，對(duì)項(xiàng)目核心所展現(xiàn)的能力進(jìn)行總結(jié)啄巧。該總結(jié)應(yīng)該重點(diǎn)放在知識(shí)點(diǎn)的運(yùn)用梳理寻歧、方法論的理解、或某個(gè)問(wèn)題的頓悟秩仆，盡量避免主觀的情感表達(dá)码泛。

學(xué)生作品集修改前

以上就是交互設(shè)計(jì)作品集制作的全部流程和方法論，你get到其中技巧了么澄耍？

\(^o^)/~：

蒹葭姐姐對(duì)應(yīng)的作品集課程也上線了噪珊，可以進(jìn)入cctalk聽課哦。

關(guān)于如何寫背景分析齐莲，可查看文章《項(xiàng)目背景分析怎么寫》

關(guān)于用戶調(diào)研痢站。可查看文章：《了解用戶：調(diào)研的定量與定性》《用戶體驗(yàn)之定量調(diào)研：讓問(wèn)卷無(wú)可挑剔》《用戶體驗(yàn)之定性調(diào)研：讓訪談物盡其用》