交互水深 07 | 長期設計APP會讓人變傻

寫給設計師，幫助大家消除恐懼。盡量通俗易懂，不會追求『技術術語』的嚴謹，也不希望被吹毛求疵。

看過交互水深系列的前6篇文章，大家一定感覺：Hozin對移動端好像沒那麼熟悉和偏愛，但是好像又能一下看透很多交互的本質。沒錯，如果長期設計Web界面，並且從事過桌面客戶端的設計，那麼移動APP是很容易理解，並且是簡單到會把設計師變傻的存在。

UI設計的簡單困境

創造力被抹煞，目前是個大問題。在很多設計師的作品集當中，普遍存在『帶底部導航的首頁』、『帶返回的列表頁』、『帶返回的詳情頁』，這種千篇一律的APP設計。

誠然，主流中文用戶已經習慣了這種『層層進、層層退』的結構，可是在Web界面當中，每個界面都設計一個返回，有點畫蛇添足。並且，在桌面環境下，中文用戶對瀏覽器的『返回按鈕』並未形成習慣，設計『網頁內返回』是個兩難問題。

上圖是移動Web設計中的常見錯誤，左上角的『返回』和瀏覽器的『返回』重複出現。

如果明確APP和Web的設計差異，也就不難理解：為什麼微信小程序會把『菜單』和『關閉』設計在右上角？

作為設計師，不被時代拋棄，就要保持寬廣的視野；除了抓住潮流，還要追本溯源，搞清楚差異的來源。

這個話題很大，也可以很小。如果覺得危言聳聽，可以了解一下當年Symbian程序員如何批量失業。

客戶端軟體和所謂C/S結構

互聯網是Internet，萬維網是World Wide Web，如果能分清楚二者，就不難理解客戶端與web的差異，也就是所謂C/S結構與B/S結構的差異。

客戶端軟體歷史非常悠久，早在二十世紀70年代人類就發送了第一封電子郵件（中國是1987年）；而Web是1990年才誕生，屬於新生事物。

客戶端軟體是什麼呢？就是安裝在操作系統上，能夠通過網路與伺服器遠程交換數據的軟體，通常稱之為Client/Server結構，比如QQ和Foxmail。它的特點是：

• 運行在操作系統上，通過軟體包安裝、卸載和更新；
• 特定的操作系統必須安裝特定的客戶端軟體；
• 擁有比較大的本地許可權，例如進行文件操作、控制網路，操控內存等；
• 可以在本地執行複雜的運算；

如果上面這些都不太明白，那麼只需要記住下面這句話：

Web瀏覽器是一種客戶端軟體，各種手機上的APP也是客戶端軟體。

Web/HTML和所謂B/S結構

客戶端可以擁有各種強大的功能，甚至是破壞力，但是它們的開發維護有些繁瑣。對於某些簡單的任務，有點『殺雞用牛刀』的感覺，於是人們發明了Web/HTML（準確來講，並非發明，而是制定了標準）。

基於瀏覽器這種客戶端，按照共同標準渲染和解釋超文本，就形成了今天的Web，即在C/S結構基礎上有了Browser/Server結構，例如各種網頁和所謂H5。它的特點是：

• 只要有瀏覽器，就能在任何操作系統上呈現；
• 不需要下載安裝，更新代碼只在伺服器端完成；
• 擁有很小的本地許可權，幾乎不能進行文件操作、網路控制、操控內存等；
• 本地運算能力非常有限，幾乎完全依賴伺服器性能和網路帶寬；

顯而易見，C/S結構和B/S結構在特點上截然相反，完全互補。同時，還有兩個問題需要補充：

• 幾乎所有的客戶端都可以內置WebView，比如QQ或者Foxmail都或多或少的出現了一些Web；
• 無論市場上的瀏覽器品牌如何繁多，常見內核只有4種，並且都遵從幾乎相同的標準；

如果上面這些都不太明白，那麼只需要記住下面這句話：

Web/HTML是一種可運行在任何瀏覽器/任何客戶端當中通用標準。

移動APP是如何讓設計師變傻的

第一，屏幕空間和性能所限，很難支持複雜業務；

手機的屏幕空間局促，大家都能理解，但是有朋友會說iPadPro這樣的設備已經很強大了啊。沒錯，應對移動辦公和娛樂，iPadPro還是可以的，但是真的用Pad做影視後期、3D建模、科學計算……目前來看還是非常有難度的！從電量和便攜性的角度，移動設備還是以消息通知、事務處理、簡單查看這類業務為主。

絕大部分複雜的控制業務都使用Web承載，而涉及到安全、計算、系統控制等領域的業務幾乎是桌面客戶端軟體的天下（這些領域大量缺乏有經驗的設計師！）。

第二，便攜設備從心智上是單進程的；

iOS和Android從技術上都是多進程，但呈現的方式幾乎是單進程，即在某一時刻，用戶只在全屏環境下運行一個APP。這往往讓設計師意識不到窗體（進程）之間傳值、響應和實時同步的問題，設計思維變得簡單（甚至比Web還簡單）。

第三，交互觸發手段太單一；

咦？有沒有搞錯！移動端提供了大量的手勢啊，比如Tap、Press、Drag、Flick、Pinch、Spread……更何況還有觸控筆哦……網頁上只有Click和Hover而已，右鍵也只是個半殘廢，到底誰比誰少呢？好好好，你們贏了，但請不要忽略『鍵盤』的存在！雖然移動設備也能使用藍牙鍵盤，但是除了網頁之外，有多少款移動APP支持熱鍵呢？熱鍵對操作效率來說是神一樣的存在啊！

更何況有了『觸控板』這種神器，macOS和Windows上的各種客戶端也完全可以Tap、Press、Drag、Flick、Pinch、Spread……

第四，官方設計指南太細緻；

每當小夥伴拿著一個APP來問：為什麼這個設計違反了官方指南？呃，Hozin想說Guidelines這種東西，本身就是個參考而已。雖然每一次版本更新都伴隨Guidelines的更新，但是設計師們完全不必太在意，比起所謂指南，適配設備更有意義。

『指南』與『標準』，本身就是兩樣東西；指南是公共原則，標準才是嚴格規範；如果嚴格按照指南，那設計師就沒存在的意義了；遵照指南去建立實用標準，才是設計師的價值，甚至必要時可以違背指南。

如何區分使用原生/H5/Hybrid

前文提到，幾乎所有的客戶端軟體都能使用WebView，但不能簡單的理解為：APP中嵌入H5就是Hybrid混合編程。確切的說，只有原生代碼和H5產生數據交換的開發方式，才能算作真正的Hybrid編程。

如果理解APP只是便攜操作系統中的一種C/S結構的客戶端，H5是運行在APP里的一種B/S結構。那麼，就有下面的總結啦！

原生代碼的優勢：

• 本地擁有小型資料庫，預載入/緩存功能強大，節約流量帶寬；
• 能操控本地文件和系統許可權，計算能力強，完成壓縮圖片、處理語音、獲取位置等服務；

原生代碼的劣勢：

• 每次更新都要下載部分軟體包，且需要用戶授權；
• 要為不同操作系統準備不同的軟體包；
• 圖文混排基本上做不了，如果能實現也會把運營同學搞殘；

H5的優勢：

• 不需要下載軟體包，不需要用戶授權，直接在伺服器端更新；
• 不需要考慮操作系統，兼容性高；
• 特別善於圖文混排，感謝偉大的CSS樣式表；

H5的劣勢：

• 緩存能力弱，比較消耗流量帶寬；
• 無法操控本地文件和系統許可權，計算能力差；

Hybrid混合編程實際集合了原生代碼和H5的優勢，於是有下面幾個原則：

• 短期在線並且經常更換，以展示為主的內容，使用H5開發，比如APP當中內嵌的各種活動頁面；
• 富含大量多媒體，格式相對固定，沒有圖文混排的那部分內容，使用原生代碼開發，利用緩存降低流量消耗；
• 存在圖文混排的那部分，一定要用H5進行開發設計，同時一定兼顧多媒體載入和播放時機；
• 長期在線的固定複雜功能，比如壓縮、切圖、獲取位置，一定使用原生開發；
• 絕大部分功能按鈕，推薦使用原生代碼開發；

幾乎每一個主流APP都會用到Hybrid混合編程，只是『大量』還是『少量』的差異，必須要囑咐一下各位設計師：

混合編程提高了對程序員和測試人員的要求，成本較高；在設計過程中，請一定和開發人員保持密切溝通，確認技術方案的可行性。

對APP設計師的建議

世界上沒有傻瓜，只有懶漢。以下這些期望都非常具體：

1. 去學習CSS樣式表吧，真的一定會用到（包括理解盒模型）；
2. 分析國內外歷次獲獎APP設計，拋棄底部導航，嘗試變換思路；
3. 不要再用APP的思路設計H5，也不要再用APP的思路設計微信小程序；
4. 分析承載複雜業務的Web界面，特別是導航系統，嘗試臨摹練習；
5. 設計一款Windows的殺毒軟體界面，練習桌面客戶端交互設計；

通過以上學習與鍛煉，可以擴展視野和技能，提升對交互本質的深層認知。

總之，不要再把時間浪費在什麼區塊鏈、VR、人工智慧之類的時髦辭彙上了，那些並非憑空產生，只是近期進入了大眾傳播視野而已。

寫文章不容易，請呵護原創 未經授權，請勿轉載

精力有限，知乎專欄更新較慢，追番請移步微信公眾號 hozin-com

Hozin公眾號入口

擴展閱讀

交互水深 01 | 從區分 [ 頁面 ] 和 [ 界面 ] 開始吧

交互水深 02 | 設計師對 [ 功能 ] 應該有怎樣的認知？

交互水深 03 | 理解 [ 用戶任務 ] 的 [ 顆粒度 ]

交互水深 04 | 選擇設計中的五個要點【單選小坑，多選大坑】（上篇）

交互水深 05 | 下拉框的濫用、聯動菜單、單選特例、級聯單選【單選小坑，多選大坑】（中篇）

交互水深 06 | 多選陷阱、收集器、列表構造、增項列表【單選小坑，多選大坑】（下篇）

交互水深 07 | 長期設計APP會讓人變傻