「所見即所得」在 app 設計和開發中的應用
最近進行專業實訓做 Android 專案的時候,我開始對「 ofollow,noindex">所見即所得 (英文縮寫為 WYSIWYG)」的互動開始感興趣起來。「所見即所得」是這樣一種狀態: 你在螢幕上看到的,就是結果。 比如我喜歡用 Typora 來寫 markdown 文章,原因就是它的介面採用了「所見即所得」的方式:

Typora 的使用介面
在 Typora 上,你打過的每一個字都會立即成為 HTML 格式化後的樣子。相比起傳統 markdown 編輯器左右分欄的顯示方式,它既不影響編輯,又方便了檢視。
這種狹義上的「所見即所得」是傳統計算機文字編輯技術方面的概念,它還有一層廣義上的含義。比如現在許多常用軟體的設定項都是自動儲存的,一個複選框,直接點選勾選即可設定,不需要再「儲存」或是「應用」;還比如有許多編輯軟體不需要退出前詢問是否儲存,直接關閉就可以了,因為使用者每做一次改變後它都會存檔。這也是一種所見即所得。 使用者不需要考慮那麼多,儲存設定或編輯以後應該是什麼樣子直接呈現出來就好。
而在 UI 和互動上,我認為所見即所得就是 一個檢視應該在正確的場合顯示出正確的樣貌 。在網頁上,如果瀏覽的人沒有將滑鼠 hover 到超連結上的時候,那它就不要顯示下劃線,僅僅是用一個特殊顏色標識但保持和文段中其他文字相同的格式就好。手機滾動檢視一側的滾動條,只有在滾動的時候才要去顯示滾動到了什麼位置,而使用者正常閱讀時就隱去,把焦點放在內容上。
這些我覺得都是非常好的例子,我在設計和開發 app 時也會盡量把這一設計準則運用到其中。比方說我們在做一款運動 app 時,有一個設定計時開始跑步的介面,大致是這個樣子,還沒做完:

App 的設定計時檢視
注意看這個計時選擇的檢視,它在一開始就是一個普通的 00'00",但當用戶去點選這個檢視想要設定時間時發現這個時間原來是一個滾輪選擇器,這樣使用者就可以用滑動滾輪的方式去設定時間。當設定完畢時,滾輪又變回到普通的時間文字。這樣的互動就很符合我在上文中提到的準則:它原本就是一個顯示使用者當前設定的計時的檢視,當用戶觸控這個檢視時,它變成滾輪選擇器指示使用者這個是可以通過滾動來改變值的。出於設計上的考慮,在這個介面真的放一個滾輪會遮擋後方的背景,使視覺效果大打折扣。相反地, 使用合適的控制元件在適當的時機顯示正確的畫面,才會有優良的視覺感受和互動體驗 。這就是我在做開發中所體會到的。
如果大家看了這樣的示例、聽了我的一番理論以後覺得有點新奇,仔細考慮後認為確有合理之處,我也已經把這個滾輪控制元件開源,大家可以親自試一試: HiddenWheelView ,也歡迎大家 star 和 fork。^_^ 希望各位開發者今後也可以嘗試將這種設計理念運用到自己的產品中,相信它會給產品帶來新意,給使用者以舒適的使用體驗。