七月末币旧，去北京參加了2016的IXDC大會(huì)，期間參加了阿里的一個(gè)交互設(shè)計(jì)工作坊蝌箍，分享的是目前他們正在研究的關(guān)于如何解決設(shè)計(jì)效率的問題么翰，因?yàn)榘⒗锸莻€(gè)體量很大的公司牺汤，單一產(chǎn)品的體量也很大，所以設(shè)計(jì)效率對(duì)他們來說就顯得尤為重要浩嫌，他們要解決的設(shè)計(jì)效率問題是通過將交互 視覺 前端一體化進(jìn)行組件化設(shè)計(jì)，具體的方案這里不做贅述补胚，網(wǎng)上可以查閱到码耐，據(jù)說不久也會(huì)上線；大約在半年前溶其，我也已經(jīng)在思考關(guān)于設(shè)計(jì)效率的問題骚腥，我是一名交互設(shè)計(jì)師，原型是我的主要產(chǎn)出物瓶逃，于是我就針對(duì)如何提升原型設(shè)計(jì)的效率問題束铭，進(jìn)行了研究；
交互設(shè)計(jì)師的主要使用的原型設(shè)計(jì)軟件是：Axure rp 7.0 and Axure rp 8.0 （主要針對(duì)使用 windows和部分在mac上使用的用戶）厢绝，Axure中部件存在的問題主要是部件種類少且無樣式契沫，而在原型設(shè)計(jì)過程中，有時(shí)需要我們進(jìn)行視覺層次的體現(xiàn)以及部分樣式體現(xiàn)昔汉，針對(duì)目前存在的問題懈万，我著手開始設(shè)計(jì)一個(gè)交互部件庫(kù)，主要目的為提高原型設(shè)計(jì)效率以及團(tuán)隊(duì)原型設(shè)計(jì)規(guī)范靶病，愿景是將團(tuán)隊(duì)價(jià)值最大化会通，暫定為交互部件庫(kù)1.0
#交互部件庫(kù)1.0
發(fā)現(xiàn)問題：
交互設(shè)計(jì)師在原型設(shè)計(jì)階段耗費(fèi)了大量的時(shí)間，且從總體來看娄周，做了很多重復(fù)的工作
設(shè)計(jì)目的：
提高原型設(shè)計(jì)效率以及團(tuán)隊(duì)原型設(shè)計(jì)規(guī)范涕侈，讓交互設(shè)計(jì)師有更多的時(shí)間去思考，愿景是將團(tuán)隊(duì)價(jià)值最大化
解決方案：
收集并設(shè)計(jì)交互部件庫(kù)煤辨，逐步分類完善裳涛，實(shí)現(xiàn)拖動(dòng)能用，將原型設(shè)計(jì)的步驟最小化掷酗，由低到高调违，分解重建
思路
過程1 ?對(duì)在原型中添加一個(gè)灰色色塊的過程進(jìn)行了分解，大概需要5個(gè)步驟泻轰，且鼠標(biāo)移動(dòng)路徑也很長(zhǎng)技肩；
過程2 ?演示了如果想做一個(gè)雙按鈕，大概就需要7步之多，這個(gè)過程可能平時(shí)沒有多少察覺虚婿，但設(shè)計(jì)一個(gè)網(wǎng)頁(yè)旋奢，是需要很多很多這種步驟的，那設(shè)計(jì)師在這個(gè)過程中然痊，其實(shí)效率是很低的至朗；
如果再往高一層級(jí)放大，比如做一個(gè)登錄框
這個(gè)過程就需要更多的部件和部件屬性的設(shè)計(jì)剧浸，效率是很非常低下的锹引。
設(shè)計(jì)方案
由上思考，直接將部件進(jìn)行組件化設(shè)計(jì)唆香，即事先預(yù)設(shè)好部件的形狀嫌变、顏色、線條躬它、陰影腾啥、半徑等屬性，組件化產(chǎn)出常用部件冯吓，盡可能達(dá)到拖動(dòng)能用的效果倘待；
首先將頁(yè)面進(jìn)行最小化拆解，拆解成元素组贺，然后對(duì)最小化的元素再進(jìn)行組合行成簡(jiǎn)單組件凸舵，再把簡(jiǎn)單組件進(jìn)行組合形成復(fù)雜組件；順著這個(gè)思路锣披，下面進(jìn)行相對(duì)應(yīng)的收集贞间、整理、歸納和設(shè)計(jì)雹仿。
#元素：
元素即最小化的部件增热，形狀、顏色胧辽、線條峻仇、陰影半徑等都屬于元素，將這些元素進(jìn)行簡(jiǎn)單的組合先形成我們需要的簡(jiǎn)單部件
這里選擇正方形和圓形的原因是因?yàn)橛肁xure自帶部件完成這兩個(gè)圖形邑商，需要手動(dòng)去設(shè)置形狀的參數(shù)摄咆，步驟較多，所以將這兩種形狀做成部件庫(kù)中的基本形狀人断，并賦予它一定的屬性（確保這些屬性是你在日常設(shè)計(jì)中常用的形狀吭从。顏色、大卸衤酢）涩金，我這里選擇的是三個(gè)均分的顏色段，以便適應(yīng)大多數(shù)的情況；
根據(jù)自己平時(shí)的實(shí)際設(shè)計(jì)習(xí)慣和實(shí)際情況步做，可以預(yù)設(shè)一些常用的簡(jiǎn)單組件副渴，這樣在實(shí)際使用過程中就可以實(shí)現(xiàn)拖動(dòng)能用，或者僅通過拖動(dòng)改變大小即可使用
考慮到原型設(shè)計(jì)的不同需求全度，即低中高三等保真煮剧，以及部件庫(kù)的普適性，所以像一些顏色将鸵、陰影勉盅、圓角等屬性可以不用考慮進(jìn)去，這樣也會(huì)減少選擇咨堤，提升部件選擇效率菇篡。
遵循以上的思路，從簡(jiǎn)單組件到復(fù)雜組件一喘，進(jìn)行收集整理。
我這里從形狀嗜暴、文字凸克、按鈕等進(jìn)行了簡(jiǎn)單部件的整理，可以根據(jù)自己平時(shí)的工作習(xí)慣將常用的部件進(jìn)行分類整理闷沥；
復(fù)雜組件的整理萎战，同簡(jiǎn)單組件一樣，如登錄框舆逃、搜索框蚂维、下拉框、tab切換樣式等等路狮，同一種組件也可以設(shè)計(jì)不同的樣式
由低到高虫啥，由簡(jiǎn)單到復(fù)雜，分解重建奄妨，將常用的一些部件做成部件庫(kù)涂籽，可以遵循按照大分類：web、app砸抛，然后大分類下再去細(xì)分评雌，由簡(jiǎn)單組件到復(fù)雜組件，收集直焙、整理景东。歸納，一定會(huì)有一個(gè)能極大提高自己設(shè)計(jì)效率的組件庫(kù)誕生奔誓；當(dāng)然也可以進(jìn)行團(tuán)隊(duì)協(xié)作斤吐，由團(tuán)隊(duì)來共同收集 整理，最終產(chǎn)出一份團(tuán)隊(duì)認(rèn)同的能提高個(gè)人效率及團(tuán)隊(duì)協(xié)作效率的組件庫(kù)；
愿景
將組件化的概念放大到產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)中曲初，聯(lián)合視覺和前端体谒，進(jìn)行團(tuán)隊(duì)級(jí)的組件化設(shè)計(jì)，最終將組件代碼化臼婆，對(duì)于大型產(chǎn)品的更新迭代抒痒，將是一次農(nóng)業(yè)刀耕火種到工業(yè)批量生產(chǎn)的進(jìn)化，這樣設(shè)計(jì)師在執(zhí)行層的效率會(huì)得到極大的提高颁褂，將更多的時(shí)間投入到產(chǎn)品的設(shè)計(jì)思考中故响，不僅僅是停留在執(zhí)行層，這樣的場(chǎng)景希望能早點(diǎn)到來颁独，也希望阿里在這發(fā)面的研究成果能早早的出來彩届，帶來一次設(shè)計(jì)效率的進(jìn)化。
最后捎帶補(bǔ)充一下部件庫(kù)的制作方法
Axure的部件庫(kù)下拉里面有個(gè)創(chuàng)建部件庫(kù)誓酒，點(diǎn)擊后在里面添加的每一個(gè)頁(yè)面都會(huì)是一個(gè)部件樟蠕，每個(gè)文件夾就是一個(gè)分組，然后保存靠柑，再載入部件庫(kù)就好了寨辩。
END.
----------專心寫博客，靜悄悄做人
2016.09.20 ? SHENGZHAO.
