用「黃油相機(jī)」蠻久了赵辕，今天來重設(shè)計(jì)它。
現(xiàn)今移動(dòng)端照片類應(yīng)用大致分為這么兩種：
1、以snapseed丐谋、vsco為代表的較專業(yè)的修圖工具芍碧，提供了從裁剪、去污号俐、濾鏡等完備的功能泌豆。
2、以Instagram吏饿、nice踪危、lofter為代表的圖片社區(qū)，修圖在這里是為了更快傳播猪落，修圖步更加流程化簡潔化贞远。
對(duì)于「黃油相機(jī)」，它總給我一種「我們才不像無腦的一鍵P圖應(yīng)用呢笨忌，我們可是有B格有創(chuàng)意的蓝仲，在我們修的圖放到朋友圈一定?是點(diǎn)贊最多的！』
為了釋放創(chuàng)意官疲，當(dāng)然只不能弄幾個(gè)模板袱结、貼紙，?于是不可避免地增加了許許多多的功能途凫，濾鏡擎勘、文字、圖形每一方面都要照顧到颖榜，細(xì)至透明度棚饵、陰影的軟硬、行距邊距等也不厭其煩一并加上掩完。下圖很好的反映了其功能的復(fù)雜噪漾。
修圖流程是這樣的
第四步難以理解地出現(xiàn)了「僅對(duì)自己可見」的選項(xiàng)，而分享到其他平臺(tái)的選項(xiàng)在「照片」條目下隱藏地扭扭捏捏且蓬，個(gè)人認(rèn)為也反映了其照片社區(qū)與工具定位的糾結(jié)欣硼。
修圖流程重設(shè)計(jì)
Step 1
合并「選擇照片」與「裁剪」
這里我將原設(shè)計(jì)中「選擇照片」和「裁剪」圖片兩個(gè)頁面合并成了一個(gè)，主要還是因?yàn)槠涔δ芘c交互較其他頁面都更簡單恶阴，合并也不會(huì)過于繁瑣诈胜，且為后續(xù)功能的拆分騰出了頁面。
優(yōu)化反饋
原設(shè)計(jì)中冯事，當(dāng)我點(diǎn)擊「畫布比」焦匈，圖片被裁剪成4：3或1：1，視覺上除了圖片被切割外昵仅，按鈕也發(fā)生相應(yīng)變化缓熟。
我認(rèn)為這一視覺反饋?指示性不夠強(qiáng)累魔，故嘗試了一種新的方式。
Step 2
step2沒什么好說的，濾鏡彰触、銳化梯投、模糊這類更「圖片」的功能被我拆分開來，分列為底部三個(gè)tab况毅。
Step 3
現(xiàn)有修圖流程的主要問題是層級(jí)復(fù)雜分蓖，結(jié)構(gòu)混亂
tab欄與側(cè)邊欄齊上陣，視覺上如此混亂的結(jié)構(gòu)俭茧，終究是塞進(jìn)太多功能，條目維度過多導(dǎo)致的漓帚。
修圖時(shí)用戶的使用習(xí)慣
修圖時(shí)母债，如添加文字，「文字」-「打字」-「字體」尝抖，最底層即「字體」的使用頻率是最高的毡们，因?yàn)橛脩粜枰粩嗲袚Q各類字體，對(duì)照前后效果昧辽。那么在交互這一環(huán)節(jié)就應(yīng)當(dāng)盡量減少??在「字體」間切換的成本衙熔。
此外作為面向大眾的修圖產(chǎn)品，清楚的結(jié)構(gòu)才是第一要義搅荞，故不應(yīng)當(dāng)抗拒三層菜單的使用红氯。
最后，動(dòng)效和視覺對(duì)比來區(qū)分父層級(jí)和子層級(jí)也是必不可少的咕痛。
Step 4
原設(shè)計(jì)中為選擇「?僅對(duì)自己可見」痢甘，因?yàn)槲也⒉涣私恻S油自己的想法，所以我的重設(shè)計(jì)到此為止茉贡。
相關(guān)閱讀：
移動(dòng)場景下的圖像處理應(yīng)用設(shè)計(jì)
后記：這次重設(shè)計(jì)多是一時(shí)興起塞栅，自己是個(gè)UXER，上文的評(píng)價(jià)和重設(shè)計(jì)很多時(shí)候都只是局外人的看法腔丧。創(chuàng)造一款產(chǎn)品放椰，從來都是自上而下的順序，戰(zhàn)略-功能-交互-界面愉粤。慢慢覺得各方優(yōu)秀的協(xié)調(diào)整合遠(yuǎn)比一個(gè)人意淫好得多砾医。
