在設(shè)計(jì)原型和UI時(shí)我們經(jīng)常會(huì)有開發(fā)抱怨實(shí)現(xiàn)困難剖煌，效果與設(shè)想相差巨大等等晶伦，那么如何避免這些開發(fā)中會(huì)遇到的坑赋访，以及如何與開發(fā)更好的溝通屹蚊，下面結(jié)合下自己工作中的幾個(gè)案例說一下。
案例一：手機(jī)H5的加載動(dòng)效
實(shí)現(xiàn)效果如下
業(yè)務(wù)背景：這是一個(gè)涉及到業(yè)務(wù)辦理的加載動(dòng)畫进每，需要調(diào)取多個(gè)外部api汹粤，所以加載的時(shí)長在10s左右。因?yàn)槭墙鹑陬怉PP所以需要一個(gè)生動(dòng)但不是特別活潑的加載動(dòng)畫田晚。
后臺(tái)邏輯：后臺(tái)需要訪問外部所有api結(jié)束后才能返回結(jié)果嘱兼，但后臺(tái)可以每隔2-3秒告訴前端仍在進(jìn)行中或者后臺(tái)失敗。
設(shè)計(jì)思路：
1.這是個(gè)長加載的效果贤徒，用戶需要等待很久且行業(yè)特性需要顯得比較嚴(yán)謹(jǐn)芹壕。因而為了消磨用戶等待中的耐心，需要有一定的進(jìn)度上的反饋接奈，但后臺(tái)無法反饋真實(shí)的進(jìn)度值踢涌，所以需要前端做一定的處理去模擬加載的進(jìn)度。
2.那么如何去模擬這個(gè)進(jìn)度反饋呢序宦？因?yàn)榧虞d的時(shí)間在10s左右睁壁，所以將進(jìn)度條分成三段。第一段為0%-80%，這一段時(shí)長為8s潘明，在這段時(shí)間內(nèi)動(dòng)畫會(huì)做勻速運(yùn)動(dòng)行剂，如果后臺(tái)在這段時(shí)間內(nèi)返回成功則運(yùn)動(dòng)加速直接到100%然后跳轉(zhuǎn)成功頁面，如果返回失敗則直接跳轉(zhuǎn)失敗頁面钳降。第一段動(dòng)畫結(jié)束后臺(tái)仍未返回值則進(jìn)入第二段動(dòng)畫厚宰，第二段進(jìn)度條為80%-90%，時(shí)長為2s遂填，此時(shí)也為勻速動(dòng)畫但速度較為緩慢铲觉，用戶以及已經(jīng)等待了一段時(shí)間此時(shí)速度變慢但仍然會(huì)繼續(xù)等下去。正常情況下后臺(tái)在此時(shí)就會(huì)返回成功或者失敗吓坚，如果此時(shí)仍未成功則進(jìn)入第三段备燃，第三段動(dòng)畫為減速運(yùn)動(dòng)，最終會(huì)在99%處停止凌唬，當(dāng)然現(xiàn)實(shí)中幾乎不會(huì)有這種情況，在運(yùn)動(dòng)停止之前就會(huì)返回值或者服務(wù)器報(bào)錯(cuò)漏麦。
3.只有一個(gè)進(jìn)度條略顯無聊所以在動(dòng)畫中又加入了一個(gè)不斷刷新頁面的電腦屏幕的效果客税，使得動(dòng)畫變的更為生動(dòng)。
案例二：首頁配置與活動(dòng)配置后臺(tái)設(shè)計(jì)
業(yè)務(wù)背景：APP上線需要首頁模塊均可配置撕贞，這樣方便運(yùn)營根據(jù)不同的推廣方向去設(shè)計(jì)不同的首頁更耻。根據(jù)業(yè)務(wù)的需要設(shè)計(jì)出，SKU模塊捏膨、圖片模塊秧均、商戶模塊、
后臺(tái)邏輯：后臺(tái)會(huì)根據(jù)配置的內(nèi)容加載出不同的模塊号涯，后臺(tái)需要獲取的數(shù)據(jù)有：
1.配置的模塊類型目胡；2.配置的內(nèi)容；3.模塊間排列的順序链快；4.模塊list一次刷新加載的數(shù)量誉己；5.模塊加載時(shí)欄位的寬高。
其中134是根據(jù)配置后臺(tái)可以獲取到的域蜗，2和5需根據(jù)模塊的不同做不一樣的處理巨双，有些模塊如商品模塊可以直接調(diào)取后臺(tái)中商品的圖片和鏈接。有些模塊如圖片模塊需要后臺(tái)先讀取圖片的寬高然后返回比例給前端計(jì)算出占位欄的高度霉祸。
設(shè)計(jì)與前端實(shí)現(xiàn)：
1.因?yàn)槟K是自由組合的筑累，所以在做UI時(shí)一定要統(tǒng)一好各個(gè)模塊之間的間距并給出設(shè)計(jì)規(guī)范，使不同的模塊在不同順序下顯示出統(tǒng)一的UI效果丝蹭。（PS：設(shè)計(jì)UI使需將各個(gè)模塊考慮成一個(gè)盒子的模型慢宗，具體可以參考下css的盒式模型）
2.加載狀態(tài)顯示，頁面進(jìn)入加載狀態(tài)時(shí)計(jì)算出占位欄的框高，傳統(tǒng)網(wǎng)頁體驗(yàn)較差的有一點(diǎn)就是因?yàn)閭鹘y(tǒng)網(wǎng)頁加載圖片時(shí)婆廊，圖片欄位的寬高會(huì)有所變化導(dǎo)致頁面會(huì)有抖動(dòng)迅细。因而在設(shè)計(jì)list加載時(shí)給出了加載的占位欄，這個(gè)占位欄的寬高也應(yīng)當(dāng)與加載完成后欄位的寬高一致淘邻。
3.標(biāo)題模塊的設(shè)計(jì)茵典，標(biāo)題模塊中有主標(biāo)題和副標(biāo)題，其中主標(biāo)題不填寫則不顯示宾舅，填寫主標(biāo)題則可以填寫副標(biāo)題统阿。UI需要明確模塊中標(biāo)題元素與上線元素之間的間距，當(dāng)標(biāo)題不現(xiàn)實(shí)時(shí)UI的顯示筹我，只顯示主標(biāo)題時(shí)的顯示和主副標(biāo)題都顯示時(shí)的情況都需要考慮扶平。
案例三：長圖片加載效果
業(yè)務(wù)背景：商品詳情頁的詳情圖片加載速度較慢，需要優(yōu)化蔬蕊。往兩個(gè)方向入手1.壓縮圖片的尺寸2.設(shè)計(jì)加載的狀態(tài)緩解優(yōu)化等待時(shí)間
后臺(tái)邏輯：1.后臺(tái)需將圖片做壓縮處理结澄，目前已經(jīng)有很多現(xiàn)成的壓縮圖片的工具，可以參考這些工具的代碼實(shí)現(xiàn)邏輯岸夯；2.加載過程中想做出從模糊到清晰的效果麻献，需要后臺(tái)生成一個(gè)原圖片縮小到極小尺寸的圖片。
設(shè)計(jì)與前端實(shí)現(xiàn)：進(jìn)入頁面后頁面開始加載圖片猜扮，前端先從后臺(tái)獲取圖片的寬高渲染出占位欄的大忻阄恰；之后載入后臺(tái)生成的極小尺寸圖片旅赢，圖片覆蓋在占位欄上之后給圖片加上毛玻璃的模糊效果齿桃；此時(shí)后臺(tái)一直在讀取大圖的數(shù)據(jù)，大圖片先隱藏加載完成后將占位欄的小圖片圖換成大圖并去掉模糊的濾鏡煮盼。這樣就實(shí)現(xiàn)了大圖加載的從清晰到模糊的加載樣式短纵。
案例四：商品庫存處理
業(yè)務(wù)背景：電商平臺(tái)SKU的簡單庫存處理
實(shí)現(xiàn)邏輯：1.確定庫存的狀態(tài)為可銷售庫存、鎖定庫存僵控、已銷售庫存踩娘、活動(dòng)庫存；2.確定在不同狀態(tài)下對(duì)庫存的操作喉祭，操作有增加庫存养渴、鎖定庫存、解鎖庫存泛烙、扣減庫存理卑、返還庫存。當(dāng)用戶下單時(shí)應(yīng)當(dāng)鎖定庫存蔽氨，如果用戶取消則解鎖庫存藐唠，用戶支付成功扣件庫存帆疟，用戶退款則返還庫存。同時(shí)做活動(dòng)時(shí)也應(yīng)當(dāng)擁有活動(dòng)庫存宇立，活動(dòng)庫存應(yīng)當(dāng)小與相關(guān)聯(lián)的商品庫存踪宠。
當(dāng)然在實(shí)現(xiàn)中會(huì)有許多細(xì)節(jié)性的問題，比如：1.我們平臺(tái)有優(yōu)惠券的功能妈嘹，那么如果優(yōu)惠券金額大于商品金額則訂單價(jià)格為0元柳琢，因此這種情況下提交訂單即為支付成功，此時(shí)應(yīng)為扣件庫存的流程润脸；2.平臺(tái)剛上線時(shí)用戶不多柬脸，做一些活動(dòng)時(shí)需要在頁面需要營造出用戶大量購買的情況，因此需要在后臺(tái)可配置商品的虛擬購買量而虛擬購買是不扣庫存的毙驯；3.打包商品的庫存處理倒堕，當(dāng)多個(gè)商品打包成一個(gè)權(quán)益時(shí)，權(quán)益的庫存于商品庫存的關(guān)系爆价，權(quán)益庫存默認(rèn)應(yīng)當(dāng)小于所有商品中庫存最少的那個(gè)垦巴，但如果權(quán)益的庫存超出其中某些商品的數(shù)量則對(duì)應(yīng)的商品不發(fā)放，但在設(shè)計(jì)頁面時(shí)應(yīng)當(dāng)明白的告訴用戶限額領(lǐng)取的規(guī)則铭段。
總結(jié)
當(dāng)你作為一個(gè)產(chǎn)品設(shè)計(jì)師在一個(gè)開發(fā)資源不是那么豐富團(tuán)隊(duì)中骤宣，你需要權(quán)衡下實(shí)現(xiàn)的成本，這樣就需要多和開發(fā)溝通了解下實(shí)現(xiàn)的細(xì)節(jié)和原理稠项，從而將自己手中的牌打出最優(yōu)解
