萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 淺談交互設計中Web UI與手機UI的區別

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

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

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

淺談交互設計中Web 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中的重要性,要比網頁更大。

copyright © 萬盛學電腦網 all rights reserved