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