設(shè)計(jì)需求

某系統(tǒng)中具有禮品兌換功能，用戶可以用積分兌換系統(tǒng)提供的了禮品，在后臺由系統(tǒng)管理人員將禮品圖片進(jìn)行上傳，在前臺禮品列表中展示給用戶。

第一版設(shè)計(jì)

最初設(shè)計(jì)時(shí)完全沒有考慮細(xì)節(jié)，只給了一個(gè)選擇圖片文件的按鈕和顯示圖片路徑的標(biāo)簽，在提交整個(gè)禮品表單時(shí)提交圖片。

第一版實(shí)現(xiàn)

開發(fā)人員直接引用了一個(gè)外部的上傳圖片控件，沒有考慮此處的上傳圖片需求以及UI/UX規(guī)范問題，完成了第一版的開發(fā)，進(jìn)行設(shè)計(jì)檢查時(shí)發(fā)現(xiàn)很多不太合理的問題。

1、沒有選擇圖片時(shí)

    

    多余且別扭的上傳按鈕

2、選擇了圖片后

    

    路徑名過長直接截掉了后半段

3、圖片上傳完成后

    

    上傳的圖片伸縮為100*100，不是設(shè)計(jì)的尺寸

4、其它交互過程中的細(xì)節(jié)問題

第二版設(shè)計(jì)

鑒于上述實(shí)現(xiàn)中的種種問題，發(fā)現(xiàn)上傳圖片并非一個(gè)簡單的瀏覽圖片然后提交就完成的功能，中間涉及到很多的細(xì)節(jié)問題，于是決定對上傳圖片進(jìn)行一個(gè)完善的交互設(shè)計(jì)。找了一些有上傳圖片功能的產(chǎn)品和插件進(jìn)行了一番體驗(yàn)，結(jié)合此處的需求總結(jié)了以下一些上傳圖片需要考慮的功能性和交互性問題，然后從這些問題著手，進(jìn)行一個(gè)完善的交互流程設(shè)計(jì)。

功能分析：

1、上傳圖片需要預(yù)覽嗎？

     需要

2、上傳圖片尺寸固定嗎？

     禮品圖片是顯示在固定的位置空間內(nèi)的，可以控制為相同的大小

3、上傳圖片需要進(jìn)行裁剪縮放等調(diào)整嗎？

     禮品圖片應(yīng)該經(jīng)過設(shè)計(jì)師處理后交給管理員上傳，可以保證圖片的尺寸和質(zhì)量，可以省略這個(gè)調(diào)整的環(huán)節(jié)

4、上傳圖片清晰度如何保證？

     禮品圖片一般尺寸都較小，原圖上傳即可

5、選擇和上傳圖片要分兩步進(jìn)行嗎？

     分開

6、允許選擇多個(gè)圖片嗎？

    只選擇一張圖片

7、能夠刪除圖片嗎？

    可以刪除圖片，重新載入新的圖片

8、顯示上傳圖片的路徑嗎？

    顯示，當(dāng)名稱過長時(shí)顯示前半部分和后半部分，中間以省略形式顯示，鼠標(biāo)移入后通過tip顯示完整路徑

     

交互分析：

1、上傳圖片過程交互？

    給出圖片上傳進(jìn)度

2、上傳圖片成功狀態(tài)交互？

    顯示上傳的禮品圖片

3、上傳圖片失敗狀態(tài)交互？

    給出上傳失敗的提示

4、刪除圖片交互？

    刪除當(dāng)前禮品圖片，跳轉(zhuǎn)到瀏覽圖片文件的狀態(tài)

設(shè)計(jì)結(jié)果

1、未上傳圖片時(shí)默認(rèn)狀態(tài)

2、選擇要上傳的圖片后

3、上傳圖片

4、上傳成功

5、刪除圖片

6、再次選擇要上傳的圖片

7、圖片路徑過長、移入使用瀏覽器默認(rèn)tip顯示完整路徑

8、上傳圖片

9、上傳失敗