阿里經(jīng)驗(yàn)！聊聊實(shí)用而容易被人忽視的設(shè)計(jì)整理術(shù)

編者按：對(duì)于改稿無(wú)數(shù)的設(shè)計(jì)師來(lái)說(shuō)，整理文件是一項(xiàng)不修煉不成活的重要技能，今天阿里的鴻影同學(xué)從如何歸類與命名/常用組件的整理與沉淀/交互文檔的規(guī)范等多個(gè)方面教大家設(shè)計(jì)整理的正確姿勢(shì)，來(lái)收！

和很多人一樣，我并不喜歡「整理」這件事情，我的桌子總會(huì)在一段時(shí)間后變得凌亂，電腦桌面也經(jīng)常布滿各種類型的文件圖標(biāo)。在具體的設(shè)計(jì)工作中，（仗著自己記憶力還行 + 有搜索功能在）也會(huì)表現(xiàn)得比較隨性，存放設(shè)計(jì)稿的文件目錄亂糟糟，疏于整理沉淀產(chǎn)品的設(shè)計(jì)規(guī)范，交付物的樣式經(jīng)常變來(lái)變?nèi)サ取?/p>

誠(chéng)然，整理上的工作優(yōu)先級(jí)不算高，經(jīng)常需要給更重要的事情讓路，在項(xiàng)目組人員很長(zhǎng)時(shí)間都不會(huì)發(fā)生變化時(shí)意義相對(duì)也不大（因?yàn)榇蠹叶甲銐蚴煜がF(xiàn)在的工作模式）。但一旦出現(xiàn)項(xiàng)目變動(dòng)人員交接搭檔變化的情況，忽視整理帶來(lái)的缺陷就會(huì)更容易暴露，也會(huì)給新的項(xiàng)目成員造成困擾，我還記得很久之前一次臨時(shí)交接工作中講解一些設(shè)計(jì)規(guī)范注意事項(xiàng)時(shí)的不耐煩心情，而對(duì)方的估計(jì)也一樣頭疼。（想起程序員最討厭的事是自己要寫(xiě)注釋和別人的代碼沒(méi)注釋這個(gè)梗，其實(shí)設(shè)計(jì)師也有類似情況的233）

文件夾的歸類與命名

我在前一家公司實(shí)習(xí)的時(shí)候，大家的設(shè)計(jì)稿一般存放在Server上，并且有些比較約定速成的歸類與命名方式（目前記得的有按版本分成V1\V2\Archieve\Latest...，或者按時(shí)間分成201X-XX，一組高保真設(shè)計(jì)稿按交互流程前綴上0123...），當(dāng)時(shí)的老板會(huì)在組會(huì)上當(dāng)場(chǎng)Review大家的設(shè)計(jì)文件存放方式是否規(guī)范（比如.psd和.png要放在不同的文件夾，不能混在一起），否則挨罰。不過(guò)我有一點(diǎn)一直做得不太佳，就是會(huì)慢慢把文件目錄搞得過(guò)細(xì)過(guò)深而疏于重新整理歸類（懶......），結(jié)果反而影響了查找東西的效率。

這樣的好處是別人（上級(jí)、項(xiàng)目組伙伴、其他設(shè)計(jì)師）看你的設(shè)計(jì)成果時(shí)能一目了然，迅速找到想要的東西，而不是迷失在混亂的版本管理與各種類型的文件海洋中，也相對(duì)不容易出現(xiàn)拿舊的設(shè)計(jì)稿開(kāi)發(fā)完才發(fā)現(xiàn)不對(duì)的情況；你也可以更方便地瀏覽別人的設(shè)計(jì)稿、尋求思路借鑒。作為用戶體驗(yàn)設(shè)計(jì)師，在公司內(nèi)部和他人合作時(shí)，也要注意怎么帶給別人更好的體驗(yàn)。

常用組件的整理沉淀

大公司的大型成熟產(chǎn)品線通常都有一份完整的設(shè)計(jì)規(guī)范，沉淀了各種常用的組件與使用原則，這樣的規(guī)范可以幫助新人設(shè)計(jì)師迅速熟悉和接手工作，將更多精力聚焦到對(duì)業(yè)務(wù)和用戶的理解與思考中去，而非糾結(jié)已經(jīng)很成熟的組件設(shè)計(jì)上的細(xì)節(jié)。

但如果是做從0到1、偏偏還比較復(fù)雜不是一兩個(gè)內(nèi)嵌頁(yè)面了事的產(chǎn)品設(shè)計(jì)，有必要時(shí)就需要自己動(dòng)手豐衣足食了。起初做這樣的產(chǎn)品時(shí)，我對(duì)組件與規(guī)范的沉淀不以為意，也磕磕絆絆完成了第一期的上線，后來(lái)不斷增加新頁(yè)面新模塊的設(shè)計(jì)時(shí)，都是憑借自己的記憶從舊設(shè)計(jì)稿中找到可以復(fù)用的組件，但隨著時(shí)間推移記憶負(fù)荷與查找成本也有所上升。后來(lái)趁一個(gè)比較空閑的工作周里做了一下網(wǎng)站組件的統(tǒng)一梳理沉淀，并參考其他部門一些成熟的設(shè)計(jì)規(guī)范，寫(xiě)了相應(yīng)的使用場(chǎng)景與原則，進(jìn)一步加深了自己對(duì)組件在交互設(shè)計(jì)中如何運(yùn)用的理解，也希望讓自己之后設(shè)計(jì)工作里查詢復(fù)用、甚至項(xiàng)目變動(dòng)需要交接給他人時(shí)變得更加方便。

交付物的規(guī)范化與實(shí)用性

剛來(lái)現(xiàn)公司實(shí)習(xí)不久時(shí)，寫(xiě)過(guò)一篇設(shè)計(jì)文檔相關(guān)的文章：如何寫(xiě)好一份設(shè)計(jì)文檔。隨著時(shí)間推移，我發(fā)現(xiàn)自己的設(shè)計(jì)交付物雖然整體框架上還好，但細(xì)節(jié)上是有各種問(wèn)題的，所以也在不斷地迭代優(yōu)化。后來(lái)偶然接手了一個(gè)之前由天貓?jiān)O(shè)計(jì)師負(fù)責(zé)的小項(xiàng)目，進(jìn)而又通過(guò)內(nèi)網(wǎng)發(fā)現(xiàn)天貓的設(shè)計(jì)師們有一套相對(duì)成熟的交互交付物規(guī)范，包括任務(wù)流程、用戶路徑、信息架構(gòu)等，都有比較完整的模板，比自己摸索出來(lái)的交付物要成熟不少，注釋細(xì)節(jié)之類的信息很完整清晰。

但在實(shí)際工作中我發(fā)現(xiàn)，交付的規(guī)范、嚴(yán)謹(jǐn)、說(shuō)明全面的交互文檔可能并不一定能起到很好的效果。比如前端未必有耐心去閱讀你那大段的文字，一個(gè)簡(jiǎn)單的交互動(dòng)效，用Axure直接模擬出一個(gè)可以交互的高保真效果演示給他人，比口干舌燥地描述上一大段效果要好得多；又比如常見(jiàn)的「左側(cè)標(biāo)記數(shù)字，右側(cè)空白寫(xiě)說(shuō)明」的布局模式，在PC端的產(chǎn)品設(shè)計(jì)稿中（APP端應(yīng)該還好）右側(cè)經(jīng)常會(huì)被人忽視（意識(shí)不到頁(yè)面還能橫向滾動(dòng)一下），也提高了反復(fù)溝通確認(rèn)的成本，所以我更傾向直接在設(shè)計(jì)稿上控件的旁邊直接標(biāo)注，雖然會(huì)對(duì)美觀性產(chǎn)生一定影響。

《交互設(shè)計(jì)沉思錄》一書(shū)中就批評(píng)了UX經(jīng)理把時(shí)間花在華而不實(shí)的文檔管理工作上的現(xiàn)象，指出文檔的時(shí)間維度體驗(yàn)表現(xiàn)力偏弱，而可用原型會(huì)是一個(gè)更好的替代方案。在規(guī)范化交付物提升專業(yè)度的同時(shí)，也要注意觀察搜集他人實(shí)際的反饋效果，并進(jìn)行調(diào)整改進(jìn)，不要忽視了實(shí)用性。

歡迎關(guān)注作者微信公眾號(hào)：

「交互新手入門手冊(cè)」

網(wǎng)易設(shè)計(jì)總監(jiān)親歷分享！
《網(wǎng)易美女設(shè)計(jì)主管！交互設(shè)計(jì)菜鳥(niǎo)如何入門？》

交互設(shè)計(jì)自學(xué)超全合集！
《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》

阿里巴巴資深交互設(shè)計(jì)師經(jīng)驗(yàn)！
《推薦！交互設(shè)計(jì)那些事兒（一）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com