-
產(chǎn)品需求與設(shè)計(jì)研發(fā)的良性循環(huán) -
今日事今日畢 -
設(shè)計(jì)文檔的規(guī)范性 -
多渠道溝通 -
驗(yàn)收不僅僅是記錄問(wèn)題 -
沉淀業(yè)務(wù)組件的必要性
一、產(chǎn)品需求與設(shè)計(jì)研發(fā)的良性循環(huán)
從產(chǎn)品經(jīng)理提出需求開(kāi)始，到研發(fā)開(kāi)發(fā)完成上線，整個(gè)過(guò)程我們可以看作是一個(gè)迭代。倘若與研發(fā)同一個(gè)迭代完成產(chǎn)品設(shè)計(jì)，時(shí)間上肯定是不夠用。需求是永遠(yuǎn)都做不完的，一個(gè)人無(wú)論怎么埋頭苦干，還是會(huì)時(shí)間緊迫無(wú)法喘息！這時(shí)候團(tuán)隊(duì)合作顯得至關(guān)重要。我們需要進(jìn)行合理的任務(wù)管理，利用工具達(dá)到更好的效果。目前我們敏捷組產(chǎn)品與設(shè)計(jì)小團(tuán)隊(duì)用的是飛書(shū)文檔，它可以新建所需要的任務(wù)看板，清晰直觀的看到此任務(wù)當(dāng)前流轉(zhuǎn)的階段，任意拖拽方便快捷。
完善需求的詳細(xì)信息，比如：所屬項(xiàng)目、任務(wù)執(zhí)行人、優(yōu)先級(jí)、外審狀態(tài)、敏捷組、文檔鏈接等等，就可以從不同維度去管理任務(wù)，篩選我們想要了解的重點(diǎn)。
那么基于此，如果我是視覺(jué)設(shè)計(jì)，完成需求后就可以將它拖入下一泳道，等待排期。未完成的也就不會(huì)進(jìn)入到排期和研發(fā)階段，這樣基本上每個(gè)迭代研發(fā)都會(huì)提前拿到相應(yīng)的設(shè)計(jì)稿，盡管后續(xù)可能會(huì)有細(xì)節(jié)上的修改和返工，也不會(huì)很倉(cāng)促。
二、今日事今日畢
三、設(shè)計(jì)文檔的規(guī)范性
每個(gè)人都有自己習(xí)慣的設(shè)計(jì)稿排列方式。整齊、清晰、直觀的布局，有利于研發(fā)快速捕捉到想要查看的信息。
?? 設(shè)計(jì)文檔基本由以下部分組成：目錄、交互原型、交互說(shuō)明、視覺(jué)稿。交互稿與視覺(jué)稿最好合并在一個(gè)文檔中，方便研發(fā)查看。
?? 具體到頁(yè)面細(xì)節(jié)說(shuō)明，可以安排在相應(yīng)設(shè)計(jì)界面的附近，用清晰的數(shù)字或者標(biāo)簽展示。
?? 如不同狀態(tài)，不同變量的變化，也需要詳細(xì)標(biāo)注。
?? 設(shè)計(jì)內(nèi)容過(guò)多時(shí)，像以下細(xì)節(jié)單純?cè)陧?yè)面上展示很容易被忽略，需要單獨(dú)拿出來(lái)在旁邊重點(diǎn)強(qiáng)調(diào)一下。
?? 如今標(biāo)注插件很多，不需要全部手動(dòng)標(biāo)注了，但對(duì)于一些我們認(rèn)為研發(fā)會(huì)忽略和寫(xiě)錯(cuò)的尺寸、間距等，可以表示一下。設(shè)計(jì)軟件的自動(dòng)展示標(biāo)注有時(shí)候會(huì)因?yàn)閳D層覆蓋之類(lèi)的問(wèn)題點(diǎn)不到某些元素，這個(gè)也需要檢查一下。不然研發(fā)就自由發(fā)揮了喲～
?? 各式各樣的組件有非常多的形式和狀態(tài)，設(shè)計(jì)在引用時(shí)要明確類(lèi)型，避免研發(fā)亂用。
?? 比如這個(gè)全局提示組件，組件本身可以提供多行展示的樣式和規(guī)則，但研發(fā)很有可能不知道某種情況下對(duì)應(yīng)的展示樣式，實(shí)現(xiàn)的不是我們預(yù)期。以下是日常迭代中研發(fā)實(shí)現(xiàn)的有問(wèn)題的樣式與正確的對(duì)比：
如上述所講，完善補(bǔ)充細(xì)節(jié)，譬如圖標(biāo)的顏色變量，懸停變化，狀態(tài)變化，引用組件備注等等，這些都是開(kāi)發(fā)還原落地視覺(jué)設(shè)計(jì)的基礎(chǔ)。頁(yè)面設(shè)計(jì)中，所需的圖標(biāo)、圖例、圖片等素材，切圖并壓縮給到研發(fā)，最好用統(tǒng)一的方式去管理圖標(biāo)，比如iconfont，或者自己公司的組件平臺(tái)等。
四、多渠道溝通
當(dāng)接到新的需求并且拿到交互稿，前幾周也參加了需求&交互內(nèi)審，基本不會(huì)出現(xiàn)需求和框架大改的問(wèn)題。大體了解背景和設(shè)計(jì)重點(diǎn)后，可完善視覺(jué)細(xì)節(jié)。
做完設(shè)計(jì)稿只是成功了一半，還需在設(shè)計(jì)內(nèi)審前，發(fā)給對(duì)應(yīng)的產(chǎn)品和交互同學(xué)評(píng)論提意見(jiàn)，先修改掉一波明顯的問(wèn)題。這是視覺(jué)設(shè)計(jì)階段第一個(gè)比較重要的溝通，提前在大部分內(nèi)容上達(dá)成共識(shí)，節(jié)省了后續(xù)評(píng)審的時(shí)間。
五、驗(yàn)收不僅僅是記錄問(wèn)題
1、項(xiàng)目上線前驗(yàn)收
提到驗(yàn)收是我非常頭疼的事。前期設(shè)計(jì)稿準(zhǔn)備充足的情況下，研發(fā)如果能實(shí)現(xiàn)到視覺(jué)稿的80%，驗(yàn)收起來(lái)不會(huì)特別吃力。有時(shí)會(huì)遇到驗(yàn)收內(nèi)容多，前端還原度低，耗費(fèi)設(shè)計(jì)同學(xué)大量時(shí)間，建立良好的驗(yàn)收機(jī)制非常關(guān)鍵，與研發(fā)同學(xué)的溝通和磨合也是必不可少的。
涉及到人員較少時(shí)，可以坐到一起面對(duì)面去溝通；若此次內(nèi)容較多，涉及不同人，可建立文檔。
一遍驗(yàn)收后并不完美，基本要2-3輪的繼續(xù)走查，針對(duì)優(yōu)先級(jí)比較高或者問(wèn)題重災(zāi)區(qū)，標(biāo)紅后給到相應(yīng)負(fù)責(zé)的前端繼續(xù)修改，保證上線前90%以上的問(wèn)題得到解決。若還有問(wèn)題遺留，可新建kaptain任務(wù)后續(xù)優(yōu)化，讓驗(yàn)收問(wèn)題有跡可循。
線上已有問(wèn)題，按照模塊集中歸納，建立對(duì)應(yīng)的研發(fā)任務(wù)。開(kāi)發(fā)過(guò)程中可與前端同學(xué)隨時(shí)溝通，提供細(xì)節(jié)補(bǔ)充。
有時(shí)我們認(rèn)為很簡(jiǎn)單的去掉一條間隔線或者間距，可能涉及到非常多不同的場(chǎng)景面板，提前溝通也有利于研發(fā)評(píng)估工作量。
六、沉淀業(yè)務(wù)組件的必要性
每當(dāng)開(kāi)始新的項(xiàng)目設(shè)計(jì)，要費(fèi)好大功夫找源文件呀。適當(dāng)?shù)臍w納整理歷史文檔，也有助于我們快速的進(jìn)入設(shè)計(jì)狀態(tài)，對(duì)新人也很友好！
以業(yè)務(wù)需求為背景，在組件庫(kù)的基礎(chǔ)之上，業(yè)務(wù)組件的整理尤為重要。按照每個(gè)人的使用習(xí)慣，我們可以建立自己的“業(yè)務(wù)”組件庫(kù)，方便需求迭代時(shí)快速定位。
比如，我們可以將業(yè)務(wù)組件分為幾部分：圖標(biāo)、圖例、場(chǎng)景等，進(jìn)而細(xì)化場(chǎng)景中的內(nèi)容。至于怎么去命名和排版細(xì)節(jié)，都可以按照自己的習(xí)慣來(lái)整理，當(dāng)然組件形成后也可以擴(kuò)大到我們同業(yè)務(wù)線的UX或交互同學(xué)一起使用，提高設(shè)計(jì)效率。
可能對(duì)于非設(shè)計(jì)崗位來(lái)說(shuō)，看到的僅僅是一張?jiān)O(shè)計(jì)圖，但在設(shè)計(jì)稿背后我們需要去支持和處理的細(xì)節(jié)也是非常有價(jià)值的存在。
希望這篇小小滴文章可以帶給你一定的幫助 ~(≧▽≦)/~
作者：小柴
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》這些設(shè)計(jì)細(xì)節(jié)你知道嗎？
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司