淺談交互設計中Web UI與手機UI的區別

 　　做了幾年的UI和交互，這期間曾經接觸過網頁設計和手機應用界面的設計，現在簡單的談一下兩者之間的區別，個人拙見做個小總結，不同意見輕拍。

　　首先，網頁設計與手機UI，操作的媒介不同，鼠標與手，這是一個很大的區別，而這個區別所造成的幾點不同如下：

　　1. 精確度不同：

　　鼠標的准確度是相當高的，哪怕是再小的按鈕，對於鼠標來說，也是可接受的(注意，僅僅是可接受)，點擊的錯誤率不會很高。

　　而手的准確度相對而言就沒那麼高了，而且還要照顧一些肢端較大的用戶，因此對於手機UI中的按鈕，就需要一個比較大的范圍，以減少錯誤率(相信不少人咒罵過iphone的輸入法吧，這就是個很好的例子)

　　2. 位置不同：

　　對於鼠標，可以說按鈕在屏幕中的任何位置，對於操作的影響都不是很大，你可以輕松的移動鼠標到任何你想去的位置，點擊任何你需要的按鈕。因此我們可以看到大部分的網頁，按鈕都在邊緣的一個狹小空間內。

　　而對於手機UI，你需要考慮的是手機的使用環境，通常人們更加希望單手操作手機(某品牌的7寸大磚頭除外)，因此，我們設計的按鈕，通常更多的在屏幕下方，或左右手大拇指能控制到的區域內。

　　3. 操作習慣不同：

　　對於鼠標，通常我們有單擊，雙擊，右鍵這幾種操作，因此在網頁設計中，我們可以設計右鍵菜單，雙擊動作等等。

　　而對於手機UI，通常我們有點擊，長按和滑動甚至多點觸控，因此我們可以設計長按呼出菜單，可以設計滑動翻頁或切換，可以設計雙指的放大縮小，以及雙指的旋轉等等。

　　但很明顯，我們不能把以上這兩種操作習慣混用，想象一下如果手機應用中出現右鍵菜單，或者網頁中出現多點觸控操作，那麼最先罵娘的就是用戶，然後就是設計師的老板了。

　　4. 按鈕狀態不同：

　　對於網頁中的按鈕，通常有四個狀態：默認狀態，鼠標經過狀態，鼠標點擊狀態，不可用狀態。而對於手機UI中的按鈕，通常只有三個狀態：默認狀態，點擊狀態和不可用狀態。

　　因此，在網頁設計中，按鈕可以與環境以及背景更加和諧的融為一體，不必擔心用戶找不到按鈕，因為當用戶找不到的時候，會用鼠標在屏幕上亂畫，這時按鈕的鼠標經過狀態就派上用場了。

　　而在手機界面中，按鈕需要更加的明確，指向性更強，讓用戶知道什麼地方有按鈕，因為一旦用戶點擊，觸發按鈕的事件就發生了。然後，網頁設計與手機UI，輸出的區域尺寸不同，這同樣是一個很大的區別，目前主流顯示器的尺寸通常在19-24寸，而主流手機的尺寸則僅僅為3.7-4寸(請果粉原諒我沒有把iphone的屏幕尺寸作為主流標准，因為它實在是太小了)，甚至最愚蠢的廠商開發的大磚頭，也不過7寸而已。

　　這個不同造成的結果是，我們不能在網頁設計和手機UI中，在同一屏裡放入同樣多的內容，一般來說，一個應用或是一個網頁應用，總體的信息量是一定的，因此，在網頁端，我們可以盡量多的把內容放進首頁，而盡量避免更多的層級，一般類的網站，基本只有3級目錄，而這個3級目錄，是建立在第一級所產生的子目錄足夠多的情況下。

　　在手機端，我們需要更多的層級，因為我們不能在第一個頁面裡放入無限多的內容，所以我們需要給用戶一個更加清晰的操作流程，讓用戶可以更容易的知道自己在整體應用的什麼位置，並且很容易的到達自己想去的頁面或步驟。因此，map在手機UI中的重要性，要比網頁更大。