在設計過程中，不斷否定自己、推翻原有方案的過程也充分證明了一個事實———永遠都有更好的方案等著你去發(fā)現(xiàn)！這樣，才能真正讓自己的產(chǎn)品在迭代過程中沿著“有用”、“可用”、“易用”到“好用”的過程不斷變得更好！

功能介紹：GIF功能通過將播放器播放的內(nèi)容片段生成連續(xù)的Gif動畫來滿足用戶對視頻片段的分享需求。

這一功能的交互設計前后經(jīng)歷了三個階段、五個版本的設計，最終得到了一個目前階段相對滿意的設計。

第一階段

方案一

這一階段的主要設計工作基本是通過對分析競品并收集功能，然后將這些一定的布局原則進行排布：

（1）控件形式的合理性

控件應當與業(yè)務相吻合、方便使用，如：

• 對開始位置的調(diào)節(jié)、對截取時長的調(diào)節(jié)，截取間隔的設置使用滑塊形式易于操作；
• 保存路徑使用了Windows下通用的方式；
• 觸發(fā)下一動作的入口“預覽”、“保存”使用了按鈕形式等等。

元素位置和布局合理：如使用對角線原則——重要界面元素應當在從左上至右下的縱貫線上，如將“預覽”、“保存到電腦”、“分享到微博”、“下載到手機”置于界面右下角。

布局美觀性：界面元素大小不一，通過排版保證布局整齊、錯落有致。

但很快我便覺得這一設計并不理想，原因主要是，界面元素太多，用戶使用起來會感覺非常復雜，學習成本比較高。所以便開始了第二階段的設計優(yōu)化。

第二階段

在第二階段，重新設計以簡化界面元素方便用戶使用為目標，以優(yōu)化控件形式、刪除多余控件和隱藏界面元素為手段來進行的，這一階段前后設計了兩版大同小異的方案：

方案二

• 將不常用的功能隱藏到高級功能中——隱藏修改保存路徑、修改截取間隔、修改截圖尺寸
• 將類似功能以下拉菜單組合在一起——保存、預覽、分享到微博、下載到手機。

這里之所以說四項功能類似，是因為這四項功能都是截圖過程的最終操作。

但思來想去，覺得這個方案仍然不夠理想，原因在于：

• 首先，即便是在隱藏高級設置的狀態(tài)下，用戶需要面對的設置項仍然比較多——開始位置的設置及微調(diào)，結束位置的設置及微調(diào)；
• 其次，開始位置的控件，圓點后方的藍線結束位置不可調(diào)節(jié)，可能會給用戶理解和使用控件造成障礙。

那么，是不是還能有進一步精簡的空間呢？

方案三

于是，基于方案二，我對隱藏高級選項狀態(tài)下的控件做進一步優(yōu)化的嘗試：

將開始位置和結束位置在一條時間軸上顯示，但這樣一來這條時間軸兩側的微調(diào)按鈕便出現(xiàn)了歧異，用戶微調(diào)時到底是微調(diào)開始位置還是微調(diào)結束位置呢？

于是，我又給了小圓點一個選中狀態(tài)，開始位置或結束位置始終有一個處于選中狀態(tài)，微調(diào)對處于選中的那個圓點生效。

這樣便得到了一個極為少見的、用戶可能從未使用過的控件，這也存在問題，用戶使用這個控件同樣需要學習成本，而且，用戶在一半的情況下做微調(diào)操作前需要首先選擇他要微調(diào)的項目，操作過程略顯繁瑣，這個方案同樣并不理想。

繼續(xù)思考，是不是可以不把功能做的這么“重”呢，用戶真的需要那么多的設置嗎？如果我把功能進一步精簡又如何呢，于是有了以“刪除”為主的方案四。

方案四

這個方案我對功能做了比較大刪減，僅保留生成Gif造作比較基本的功能：

• 刪除開始位置（開始位置僅可在進入截圖模式前調(diào)整）
• 刪除截取時長（生成GIF時長固定）
• 不支持微調(diào)功能
• 刪除預覽功能
• 提供一套可以滿足大多需求的默認設置

這樣得到了方案四，這個方案看來也仍然有很多讓人不滿意的地方，過多刪除掉的功能讓可能損失高級用戶，沒有預覽用戶根本不知道生成的gif將包含哪些畫面，界面雖然得以簡化，但功能受到了很大的限制、易用性也變差了?？傮w來講，這個設計甚至還不如之前的方案二和三。

第一、二階段的三個方案同時還面臨這一個我尚未提及的問題，如果用這三套方案支持在線視頻的GIF截取，那么在在線視頻數(shù)據(jù)未完全加載時，數(shù)據(jù)的加載策略會很復雜，需要切換開始位置（切換開始位置時預覽畫面需要隨之切換）、生成GIF過程中考慮對數(shù)據(jù)加載的處理。

第三階段

在第一、第二階段設計了四套方案，但始終沒有得到令我滿意的結果，那么是否還有更好的方案呢？突然想到前段期間正好在讀《簡約至上——交互設計四策略》這本書，書中描述了簡約設計的四個策略，即：刪除、組織、隱藏和轉移四個策略，前面的三套方案的設計雖然也得到了部分應用，但肯定還存其它辦法可以嘗試。隨機拿起書來隨意翻看，終于有了靈感，隱藏策略中有一種方式叫做“階段展示”，可以在這個思路上試一試。

方案五

首先，我保播放器控制欄增加一個明顯的易于在播放過程中點擊的”GIF”按鈕，點擊這個按鈕后邊直接從視頻的這一位置開始截取過程。

接著，用戶點擊后彈出截圖小窗口，小窗口從點擊“GIF”按鈕的視頻位置繼續(xù)播放視頻作為對即將生成GIF內(nèi)容的預覽，如果此時截取的是在線視頻且視頻數(shù)據(jù)尚未加載完成則直接顯示加載數(shù)據(jù)提示（這正好解決了一直困擾我的在線視頻數(shù)據(jù)未加載如何處理的問題），預覽過程中用戶可以隨時點擊停止按鈕確定GIF的結束位置，如果用戶一直沒有點擊停止按鈕，那么到達可截取的最大值則自動停止進入下一步。

這一步允許用戶對一些高級參數(shù)進行設置，設置方式修改為簡單的兩個三選一的選項，用戶可以修改設置或者直接點擊“立即生成”按照缺省設置成成GIF動畫。

生成過程中屏蔽用戶操作，生成過程結束后用戶可在“保存到電腦”、“分享到微博”和“下載到手機”三個后續(xù)操作中做出選擇。

至此，終于得到了一個相對滿意的方案的方案，它不僅解決了方案一到方案四所遇到的全部問題，而且還有下述優(yōu)點：

• 通過階段展示可用操作讓用戶時長面對最少的選擇，給用戶的心里負擔更小；
• 預覽過程更加直觀；
• 通過預覽過程處理數(shù)據(jù)加載邏輯更簡單、對用戶的打擾更少；
• 可以使用較小的界面。

至此，我得到了一個階段性的、相對滿意的方案，未來也許會發(fā)現(xiàn)更優(yōu)秀的解決方案，但項目不可能無限期的停留在設計階段，更好的設計方案留待產(chǎn)品迭代過程再繼續(xù)發(fā)現(xiàn)吧。

但是，上述設計過程中的不斷否定自己、推翻原有方案的過程也充分證明了一個事實———永遠都有更好的方案等著你去發(fā)現(xiàn)！這樣，才能真正讓自己的產(chǎn)品在迭代過程中沿著“有用”、“可用”、“易用”到“好用”的過程不斷變得更好！

本文由 @我是開水?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。