作為一名交互設(shè)計(jì)師，為了保持不斷精進(jìn)，經(jīng)常在分析產(chǎn)品的同時(shí)積累一些優(yōu)秀的交互模式。但我們經(jīng)常會(huì)遇到這樣的情況：

看到好的APP設(shè)計(jì)，截屏、存在相冊(cè)里，打算未來某天清理，然后就木有然后了

把截圖發(fā)到電腦上、放在文件夾里，日日放月月放卻沒有定時(shí)梳理，等你想起用它的時(shí)候已經(jīng)雜亂無章、無比龐大了

或者因?yàn)橘Y料無法快速調(diào)用，你開始懷疑積累的意義，而且最終實(shí)際設(shè)計(jì)用到的，還是腦子里印象深刻的那些……

那這該怎么辦呢？

解決方法就是構(gòu)建你的個(gè)人控件資料庫。

其中，“積累”這個(gè)動(dòng)作只是第一步，隨后應(yīng)當(dāng)像收納整理師，將碎片井井有條地歸類，在需要的時(shí)候快速、高效地找到他們。

具體怎么做呢？我們先用3W法分析這個(gè)問題

1、WHY：為什么要做這件事

痛點(diǎn)：沒有系統(tǒng)的資料庫、設(shè)計(jì)全憑經(jīng)驗(yàn)

癢點(diǎn)：又快又好地完成任務(wù)

超預(yù)期：與身邊的人共享，創(chuàng)造一起成長的氛圍

2、WHAT：在什么場景下需要這些控件庫

在實(shí)際設(shè)計(jì)中尋找當(dāng)前最優(yōu)解，場景包含“解決問題，優(yōu)化模式，提供創(chuàng)意”

●? 解決問題：滿足基本型需求，使產(chǎn)品可用

●? 優(yōu)化模式：滿足期望型需求，使產(chǎn)品好用

●? 提供創(chuàng)意：滿足魅力型需求，創(chuàng)造AHA Moment（如微信讀書的推薦=微信讀書+搖一搖）

其中，根據(jù)目標(biāo)的不同，控件庫的分類方式和觸點(diǎn)也應(yīng)當(dāng)不同

●? 解決問題：問題維度分類

●? 優(yōu)化模式：模式維度分類

●? 提供創(chuàng)意：創(chuàng)意維度分類；因?yàn)閯?chuàng)意較發(fā)散，在分類基礎(chǔ)上可設(shè)置標(biāo)簽

3、HOW：怎么做控件庫、步驟分別是什么

產(chǎn)品打造思路：最小MVP，即定義問題、明確方案、設(shè)計(jì)原型、快速迭代。

按照這個(gè)思路，我們做一個(gè)變體：選擇、整理、吸收、應(yīng)用

創(chuàng)建控件庫的步驟

1）選擇

首先，我們需要把積累的資料聚合在一起，并把他們分成三類：

●? 模式：一般來源于其他APP，可能是一些讓你覺得很棒的基礎(chǔ)控件或基礎(chǔ)控件的變體

●? 問題：一般來源于你的實(shí)際設(shè)計(jì)，如你遇到什么問題，然后通過這個(gè)設(shè)計(jì)解決了

●? 創(chuàng)意：讓你眼前一亮的設(shè)計(jì)，或許很概念現(xiàn)階段用不到，但是提供一個(gè)創(chuàng)意方向

如果你還沒有很多資料可以分類，可以先看看你的項(xiàng)目控件庫、收集一些模式。

畢竟，開始的時(shí)候，資料不在多，首先要先做起來~

2）整理

現(xiàn)在手里有很多資料了，怎么整理呢？

推薦使用Axure（Sketch）和Adobe Bridge。前者適合積累模式和問題，便于與設(shè)計(jì)畫簿互相引用；后面適合更發(fā)散的內(nèi)容，文件夾+標(biāo)簽使分類更多重

①? 模式：按照交互模式對(duì)收集的控件進(jìn)行分類，并收集在Axure中。其中，每個(gè)畫簿的標(biāo)題是該控件的名字，如圖1.1 ，類似項(xiàng)目控件庫，但這里需根據(jù)你的掌握情況做刪減，畢竟是自用~

圖1.1 我的模式分類

②? 問題：同上，只是每個(gè)畫簿的標(biāo)題修改為問題名稱，所以這里是對(duì)你已解決問題的收錄，如圖1.2

圖1.2 我的解決問題示例

③? 創(chuàng)意：將所有圖片放在電腦中的一個(gè)文件夾里，建議先按照功能進(jìn)行歸類，因?yàn)楣δ苁且粋€(gè)少有交叉的分類，然后用Adobe Bridge對(duì)圖片設(shè)置標(biāo)簽，便于日后多維度查找。圖1.3為微信讀書搖一搖，該功能=推薦功能+微信搖一搖，我很喜歡這種設(shè)計(jì)和專注的推薦，因此把它放在“推薦”文件夾里，標(biāo)簽有#微信讀書 #搖一搖 #沉浸式 #轉(zhuǎn)場動(dòng)效

圖1.3 微信搖一搖推薦

3）吸收

只有收集是不夠的，我們還需要定期對(duì)資料進(jìn)行內(nèi)化，使其為我所用。

對(duì)于新接觸的控件，我們用初級(jí)設(shè)計(jì)師學(xué)習(xí)控件的方法，比如分析控件的優(yōu)劣、找案例和變種、分析實(shí)際產(chǎn)品的使用合理性等，如圖1.4-圖1.5

圖1.4 分析控件的優(yōu)劣，by一抹陽光

圖1.5 按控件分析合理性，by一抹陽光

對(duì)于解決問題的收錄，我們可以定期回顧，看之前的解決方式是否在當(dāng)時(shí)是最優(yōu)，如果不是、如何改進(jìn)；聚合同一類問題的解決方式，也幫助我們發(fā)現(xiàn)共通的底層解決思路，從而建立方法論。

有時(shí)候我會(huì)“沒眼看”自己幾個(gè)月前的設(shè)計(jì)，雖然當(dāng)時(shí)可接受，但放在現(xiàn)在一定有更好的設(shè)計(jì)。這種回顧方式，一方面幫助成長，另一方面也能獲取成長的成就感~

為了避免陷入收集整理卻沒時(shí)間吸收的困境，可以在周/月計(jì)劃增加“整理控件資料庫”、“回顧資料庫問題解決方式”，為這一行為增加除法點(diǎn)，讓它更加可行。

4）應(yīng)用

因?yàn)槲覀兊氖占緛砭褪前磮鼍胺诸惖模虼嗽趹?yīng)用時(shí)會(huì)比較得心應(yīng)手

在遇到問題時(shí)，看之前是否遇到過相同的問題，是否可以參考解決

在優(yōu)化模塊時(shí)，看看資料庫里是否有更好的控件承載自己的設(shè)計(jì)

在出概念方案時(shí)，查看相關(guān)功能的文件夾、搜索標(biāo)簽，能否應(yīng)用一些眼前一亮的設(shè)計(jì)點(diǎn)

這樣日積月累，我們就多了一個(gè)實(shí)際設(shè)計(jì)中的可靠工具，將過去的經(jīng)驗(yàn)應(yīng)用至現(xiàn)在，也不用在陷入困境時(shí)去臨時(shí)翻競品了。因此，這樣也提升了設(shè)計(jì)效率~

-【End】-