DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 對比iPhone和Windows Phone 7設計界面
對比iPhone和Windows Phone 7設計界面
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:iPhone、Windows Phone 7界面設計博弈.

iPhone、Windows Phone 7界面設計博弈

首先是鎖屏,這是消滅 Tufte 所說界面殘渣(interface debris,比如滾動條之類無助於信息顯示的界面元素)的第一個例子。整個界面沒有任何控件。

要解鎖 Windows Phone,只需將整個屏保往上滑。手機就在屏保圖片下方。

我還記得當我第一次看見 iPhone 時想:“哦,終於不用再記那些難以理解的按鍵組合來解鎖了”。現在看著 Windows Phone 的解鎖機構,讓我產生了類似的想法。

接下來是待機界面。Windows Phone 是動態的。我又回憶起 07 年第一次見到 iPhone 的網格界面,難免有些失望。“就這樣?網格?”。Windows Phone 的 Live Tiles 點出了我三年前就期望見到的東西。

接下來是 People 界面。在我們團隊裡曾有究竟是否應該在列表中顯示照片的熱烈討論。我的觀點一直是“沒門,沒人會通過照片來進行浏覽”。看來 Windows Phone 的聯系人列表可能會改變我的想法……好吧,它已經改變了。

網頁制作poluoluo文章簡介:iPhone、Windows Phone 7界面設計博弈.

iPhone、Windows Phone 7界面設計博弈

還有個值得注意的地方是,iPhone 似乎覺得數據(電話號碼、郵箱地址等)比數據類型(移動電話、家庭電話)更重要;而 Windows Phone 覺得動作更重要(打移動電話、給移動電話發短信……)。Windows Phone 再次贏得了一分。

Appstore/Marketplace。我無語了(這和 iPhone 的完全相反,有誰真去看那些文字?)

下面是進入音樂、視頻程序後的第一個頁面。iPhone 在這裡有些優勢,它讓用戶能夠直接進行播放操作而不用先在菜單進行選擇,然後再操作。不過除此以外,相較而言,iPhone 顯得界面元素過載。

網頁制作poluoluo文章簡介:iPhone、Windows Phone 7界面設計博弈.

iPhone、Windows Phone 7界面設計博弈

圖片程序,Windows Phone 再一次堅持給用戶一個入口菜單而不願讓用戶直接開始操作。但除此之外嘛,注意 iPhone 列表裡的小縮略圖和 Windows Phone 所采用的截然不同的顯示方法。這畢竟是用來顯示圖片的程序。

單幅圖片顯示。這對 iPhone 有點不太公平,畢竟該界面在用戶觸碰圖片之後才會出現。

但這還是能夠說明問題。你有多少時候需要精確知曉相冊裡到底有幾張照片?當你可以用手滑動切換照片的時候需要“上一張”/“下一張”這兩個按鈕?這裡最常用的按鈕肯定是“Camera roll”(返回上一級)。

Windows Phone 有一個實體返回按鍵,這個布局是我強烈反對的。如果你所有交互操作都在屏幕上進行,為什麼還要把最常用的那個操作放在屏幕以外?我曾以為 Android 已經證明了我的觀點。現在看來,錯的可能是我。

上下文菜單非常類似。我知道我又要重復了,不過……Windows Phone 上的界面元素更少。但這裡我不確定它是件好事。iPhone 的按鈕明確指出了我可以按的區域。在 Windows Phone 上是不是只有按中文字才有效?為了確保按中,我會瞄准文字,這就縮小了點擊區域,違背了 Paul Fitts 法則。(譯注:在觸控環境下,簡單地說,目標越小,就越難點中。)

網頁制作poluoluo文章簡介:iPhone、Windows Phone 7界面設計博弈.

iPhone、Windows Phone 7界面設計博弈

現在先這樣吧,分析 iPhone 怎麼突然顯得過時是件很有意思的事。

有個需要注意的地方,iPhone 的用戶界面以及其內部幾乎所有的頁面都有三年的歷史。還有一點,我們還不知道 Windows Phone 在不同手機上的響應速度如何,hub 和內嵌功能能不能應付日常使用。(不過根據上手視頻,原型機的響應速度還不錯)。

根據 iPad 的界面分析,iPhone OS 4 應該沒什麼突破。那麼,或許微軟在新千年裡終於領先了一次。

最後是用戶界面中的多和少的另一個例子(Lotus VS iCal 2009):

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved