中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

黃油相機（下面簡稱黃油）原名《食日談》，是一款可以添加豐富字體的攝影類 App，而這兩個名字都是因為作者斯日先生不僅是個代碼高手，更是一個廚房愛好者。我第一次在 UI 中國上看到黃油設計稿的時候就深深愛上了這個 app，當時它只支持 iPhone 5及以上機型，而我手里只有一個 4S，因此直到一個月后才在朋友的 iPhone6 上體驗到了這款一見鐘情的 App。最開始的界面交互設計和現(xiàn)在的樣式有不少的區(qū)別，當時的設計雖然吸引人，但是實際使用起來卻有很多不合理的地方（不常規(guī)的導航結(jié)構(gòu)，很多操作的可見性較差等），因此我在 UI 中國上試著給斯日先生留言簡要說明了一些問題，后來也沒有再關(guān)注。直到最近自己也更新了設備，作為一個從來沒有玩過相機 App 的用戶，才在新版的黃油上開始了我的手機攝影之旅。

此版本的黃油相比其他攝影類 App 是要來得復雜的，主要原因在于其不僅提供了添加多個文字、圖形的功能，還允許對它們做豐富的編輯——這對圖層管理、操作提出了很高的要求。目前黃油為了解決這些復雜的操作，同時又希望保證界面的簡潔，采用了大量的手勢操作。眾所周知，手勢操作的可見性較差，除去主流的手勢以外，其他手勢學習成本較高，誤操作概率大，因此在體驗上有許多可以改良之處。我作為一個還沒出道的新人，就針對黃油的幾個交互問題嘗試進行一些設計和改良。

讓我們先來看一下目前黃油關(guān)于取圖編輯功能的流程：

如果沒有用過產(chǎn)品的話看界面圖可能不太明晰，那么再來看一個流程圖：

如圖，其中『選擇濾鏡』的環(huán)節(jié)還有改變圖片橫寬比（1:1，4:3）、局部虛化等功能，同時提供了9種濾鏡供選擇；模板選擇部分提供了7種默認模板，并且允許創(chuàng)建新模板和使用收藏的模板；預編輯功能下只允許修改文字內(nèi)容和調(diào)整元素的大小、位置，編輯模板功能中才允許添加元素、修改字體等復雜調(diào)整。最后，紅色標記的節(jié)點是本文著重進行的幾個改進之處。

改進一：『切換濾鏡』操作與『局部虛化圈移動』操作手勢沖突。

在相機拍攝過程中和相冊取圖完成后，都能夠?qū)Ξ嬅孢M行濾鏡選擇和背景虛化的處理，添加背景虛化會在界面中出現(xiàn)如下圖所示的虛化圈，并且在大約2秒不操作后自動消失。同時，調(diào)整虛化圈的位置需要用手指點擊看不見的虛化圈并且進行拖動。此時，如果進行的是左右方向的拖動，即會有可能與左右滑動切換濾鏡的操作沖突，引發(fā)誤操作。同時，當前版本的虛化圈是不能調(diào)整大小的。

改進方法：當虛化圈所在區(qū)域被點擊（無論是否可見）后，鎖定濾鏡切換功能；點擊非虛化圈區(qū)域后，虛化圈轉(zhuǎn)為不可見，濾鏡切換功能重新開放；增加通過手指縮放的虛化圈大小調(diào)整功能。（有朋友反饋說是可以把虛化圈放大縮小的，但是我還特意去試了好幾次都沒有成功，如果是有此功能的，可能操作方式也需要進行改變和提升。）

如下圖所示，只有單擊虛化圈所在區(qū)域才能激活虛化圈的編輯，在區(qū)域內(nèi)左右輕掃是不會激活的。同時，在虛化圈的激活狀態(tài)下，取消了原本的2秒自動消失設置，只有在點擊區(qū)域外的部分時，才會使圈消失，并且重新激活濾鏡切換功能（下部的白色圓點存在與否表示濾鏡切換功能是否開啟）。

改進二：默認模板選擇界面與模板預編輯功能的手勢沖突，并對此處邏輯進行改良。

完成濾鏡的選擇后，進入默認模板選擇界面，此時點擊默認模板內(nèi)的元素是允許進行簡要編輯的，主要包括文字內(nèi)容編輯（雙擊），元素位置、角度與尺寸調(diào)整，不包含字體調(diào)整、添加元素和圖層順序調(diào)整，我把這個環(huán)節(jié)稱為預編輯功能。

目前，在預編輯功能下，盡管底部的幾個圓圈會消失，但是默認模板選擇的功能依然是開放的。也就是說，當我左右移動元素的時候，極易引發(fā)模板切換，導致當前所做的操作丟失。同時，返回『被消失』的模板后，前面所做的調(diào)整也都不復存在，模板又回到初始狀態(tài)。

改進方法：取消預編輯功能，默認模板選擇界面內(nèi)點擊任何元素即進入『編輯模板』模式，同時取消原本默認模板頂部的『編輯模板』按鈕。在『編輯模板』模式下點擊無元素區(qū)域，則返回默認模板選擇頁面。先看下面一張圖：

這樣做可以避免上述所提到的誤操作，但是引入了一個新的問題，即在編輯模式下點擊空白區(qū)域后，當前的模板放到什么地方？為此，我在默認模板選擇界面上增加了一個位置存放新的模板，如下圖所示：

新增加的『存放位』用矩形來表示，區(qū)別于默認模板的圓形。此處可以設置矩形存放位的個數(shù)，比如一個、三個等，最后編輯的模板存入最后一個位子，不足的則不顯示，超出的則刪除最早的一個模板。新增存放位的個數(shù)我不想直接拍腦袋決定，最好根據(jù)用戶反饋和用戶研究測試再設置精確個數(shù)比較妥當。另外，原本的編輯模式下才有的『返回提醒』則放置到了如上圖所示的位置，離開此界面后，只有重新從默認模板開始編輯。

最后，我取消了原本默認模板選擇最后一個選項『新建模板』，由于當前提供的幾個默認模板都比較簡單，新建模板后立即生成一個文本，和直接修改前面簡單模板并沒有本質(zhì)區(qū)別，不如減少用戶的選擇成本。

改進三：元素旋轉(zhuǎn)時難以保持水平或垂直方向。

這個功能其實很常見，在大多數(shù)的軟件中都提供了，我挺奇怪為什么黃油這個版本沒有。簡而言之，當我們對元素進行旋轉(zhuǎn)后，其即脫離了原本的水平垂直位置，而我們希望它進入一個新的水平垂直位置時，往往難以通過目測判定是否真的水平或垂直。因此我在旋轉(zhuǎn)角度的判定上加入了一個小的規(guī)則改動，即可解決這個問題——增加角度附著，如下圖所示。

這個改進很簡單，但是提供的體驗提升卻很大。

非常重要但是依然沒有想到好辦法的第四點：

黃油在編輯界面提供了比較復雜的功能，而為了保持界面的簡潔，大多通過手勢來完成。

• 連續(xù)點擊兩下：圖層順序調(diào)整與重疊圖層的選擇；
• 雙指旋轉(zhuǎn)：元素旋轉(zhuǎn)，并且此操作可以在非元素所在區(qū)域執(zhí)行；
• 雙指縮放：元素縮放，并且此操作可以在非元素所在區(qū)域執(zhí)行；

在同時提供了元素右下角旋轉(zhuǎn)按鈕的同時又提供雙指旋轉(zhuǎn)的功能，會使得用戶被可視的前者所吸引而忽略后者。很多用戶在很長的時候時間后依然不清楚上面這些功能的用法，而抱怨某些需求無法完成。其實，這些功能在第一次進入 App 后都會有一個小的說明和提醒，但我就和大部分用戶一樣，只想快點開始使用黃油，對于這些暫時還沒有遇到的問題提醒置之不理。

接下來幾天我會著重再寫一篇文章，討論這些『不可見操作的可見性提升』問題，也思考一下這類操作如何提升他們的可見性，降低用戶學習成本。

黃油相機的設計真的非常棒，我在視覺層面沒有資格對它提出什么有價值的意見，考慮到小團隊出品，有這些交互上的小紕漏也是在所難免，斯日先生和團隊也正在抓緊迭代。我的這些小改進、小方案都是從身邊用戶中很淺地調(diào)研出來，僅供開發(fā)者簡單參考，最主要還是自己學習、思考的一個過程。

希望黃油做的越來越好。

作者：鎮(zhèn)雷

來源：簡書