如何分析 iOS、Android 和 Windows Phone 的 UI 設計？

12-06

針對不同的系統的用戶，同一個產品的設計風格會不會也會根據系統來設定？比如ios是擬物風格、WP是極簡色塊風格，視覺設計時，是不是要根據不同的系統來更改該產品的設計風格呢？

很多討論中每次一上來就拿 Find My Friends 的界面來說事兒並不是很靠譜，甚至我個人覺得 iOS 的視覺風格是這三個里最中庸的。

Find My Friends 一般人一個月開幾次？Game Center 一般人一個月開幾次？在一些本來就是「玩票」性質的 App 里嘗試了一些擬物風格怎麼就變成整個系統都是擬物風了呢？Find My Friends 的界面設計甚至還是由 Apple 以外的設計師（Icon Designer）完成的。哪怕是使用了部分擬物設計的 Contacts 和 Reminders 等主力 App 里其實主要信息呈現區域的視覺風格還是含蓄的。

拿使用率更高的常用界面（比如電話、簡訊、iPhone 的音樂播放器）來比較，iOS 的界面風格無疑比 Android 和 Windows Phone 樸實不少，或者說「最沒設計感」。這點你從三大系統所選用的默認字體就可以看出來：Roboto 和 Segoe WP 明顯比傳統的 Helvetica Neue 要活潑很多。

當然毫無疑問，那些使用了擬物設計的原生 App 在視覺風格上給了其他第三方 App 一些啟發和指導甚至可以看做是鼓勵。

下面是正經回答：
是否按照不同的系統對 App 的設計做調整這顯然是個 case by case 的，但按照各家的官方指導，毫無疑問應該至少在交互方式上遵循各個系統的要求。

而視覺上如果希望樹立比較強的 App 自身品牌形象，完全可以在設計中著重自身的設計特徵，比如主色、質感等，而同時在細節處與原生風格加以結合給不同平台用戶仍然保留一定的熟悉度。

無論從風格樣式和結構上比較IOS，Android，WPUI，IOS的可擴展性、自由行以及實用性都是最強的。不要求你一定是擬物還是平面化，像Find My Friends，clear這樣的風格迥異的App都可以並存。交互上不需要適應硬體button的行為邏輯，App本身的導航UI就可以搞定一切，設計師省時省心啊。Android相對比較中庸，要適應多硬體的OS體驗是其硬傷，不得不考慮更加複雜的場景，必然會影響體驗本身。而WPUI是最極端的，有點偏執狂的性格，限制了一定的風格，一定的結構。很難想像Find My Friends的風格如果出現在WPUI里，會多麼奇怪。千篇一律的風格必定會容易使用戶產生視覺疲勞或者是體驗疲勞。我覺得Metro的風格用於某一App，絕對是驚艷之作，如果用作一個龐大的OS 的設計語言和規範，它的包容性和擴展性就很局限了。

好大的命名。真要分析起來，分析幾天也分析不完。

從現在的發展趨勢來看，視覺默認的風格已經無法說明平台本身的特性，看看IOS大家主動放棄應用圖標上的那層默認高光就知道了。再看看騰訊的應用設計，早已經形成了企業自己的風格。現在哪個應用如果還用默認控制項做設置界面，用戶會覺得很原始。至於android，各種rom,主題，換膚，大量ios移植產品的影響，系統風格已經被應用風格代替，誰能告訴我到底什麼是android的視覺風格，別說那個原生的rom, 用戶是不知道什麼是原生的。至於WP,當我將我的WP手機桌面安裝滿應用以後，我發現，這不就是以前的塞班嗎？我相信那些忍夠了WP千遍一律的風格的應用遲早會放棄平台的視覺風格，WP也會出現擬物的設計，只要你想做，為什麼不行，特別是在一個連什麼是ios和安卓都分不清的WP用戶。

那麼，什麼是平台真正的差異？

我覺得是，交互架構。我們暫時不談系統架構，因為無非就是那些鎖屏啊，widget的東西。只談標準架構對第三方應用的影響。因為第三方應用才是生態圈的未來。因為，當一個用戶用手機80%集中在一些應用上的時候。應用的交互設計，會代替用戶對系統的交互的印象。

ios的標準交互架構是第一層導航在底部，左上角返回，右上角操作，右進左出，默認垂直滾動。不得不說，這套架構運用得到成熟，很徹底，最後在這套架構上和各種進化也很優秀。

android標準交互架構的混亂很多，但是，不好用自然會消失，看看G1的按鍵還有幾個。search沒了，menu越來越少用了，頂部導航少了。各種移植現象也讓交互越來越ios化。但是android的特點在哪裡，我覺得在back上。ios的優秀在於app內部，缺點卻是app外部，app之間的切換非常弱。而android，因為back物理按鈕的存在，應用之間的介面非常靈活。所以我覺得android還是會繼續自由，並用這種自由形成一種應用之間配合的優勢。

至於WP，從設計之初就像一個為單手操作做準備的系統，導航之間的切換直接是左右掃動，屏幕上面20%區域基本上不會有常用可點擊的內容，大部分點擊內容在屏幕下方。但優秀的設計，解決了大屏幕和單手操作的問題。但是，還是這個導航之間的切換。限制了應用可使用的層級，開發者在一個頻道里，只能上下移，左右的操作給限制了。

結論，ios中庸，andorid吸收著iOS的優點並靈活，WP則很尷尬，Metro的特色即是優點即也是致命的弱點。

擬物設計, 就光看看提問給的圖片中的那個紋理, 除了overdesign實在沒有別的形容. 好處也很直接, 降低學習成本.

Metro是非常有意思的design language, 它完全是為了數字的世界而生, 幾乎可以看做反-擬物. Metro的態度很鮮明, 在數字世界去模擬物理世界的交互方式雖然降低了學習的成本, 但是也限制了身在「數字世界」的能力(e.g., 數字世界沒有圓角, 沒有「凹凸」, 更不需要按鈕而是直接顯示信息, 播放器也完全不需要像真的電視一樣外面有個框下面是功能版, etc). 所以它幾乎完全放棄了上一代的用戶, 我媽拿到iPad應該馬上就能用, 但是拿到surface就完全找不到北. Metro的目標是下一代用戶, 出身和成長在數字時代的這批人.

Metro的問題也很明顯, 改動太大學習成本太高, 新的信息結構讓人覺得很混亂, 以手勢優先但同一個OS跨桌面，平板和移動的設計效果貌似也不好. 設備賣的不好主流用戶要接受它更不知道得哪年哪月.

所以覺得節省點成本, 都靠近Google這樣簡潔的"中間派"挺好的 (開放系統設備太多, 沒法太多個性只能選做的最少最簡潔大概也是沒辦法的事). 不過個人倒是真心被Metro的理念說服了.

來回答回答題主的問題，發現其他的答題人都是在單純地比較這三個系統的ui設計語言，卻沒有注意題主問的好像是ui與工業設計（Industrial design）的聯繫，下面我舉例來說明一下。

智能手機與生態系統發展到這個階段，我們可以看到，脫穎而出的三個系統有ios、android、windowsphone，而主流的硬體廠商有Apple（ios），Samsung、sony、LG、htc、HUAWEI…（android），nokia、sumsung、HUAWEI（windowsphone）。
可以說各個硬體廠商的工業設計各有千秋，而且很多廠商都是積累了無數機型的龍頭級企業，都有很出色的設計；三個系統的ui語言也是各有特色，像其他題友說的一樣，ios7現在的neon（霓虹）風格、android的不知道什麼風格、wp的metro即平面磁鐵風格。設計都是相當的出色。

我們知道，ui與工業設計是相輔相成的設計，彼此是緊密聯繫的。所以我認為，生態系統的ui風格與相匹配機型的工業設計，二者之間的聯繫是非常緊密的。也就是說，不同風格的系統，與其相匹配的手機也是不一樣的。若要再深入一些，這種聯繫，對ios和安卓束縛較小，對wp束縛較大。

下面我舉些例子，具體說明一下我的觀點。
一、生態系統的ui風格與相匹配機型的工業設計，二者之間的聯繫是非常緊密的
我們來個最直接地旗艦對比

（ip5+ios7）

（galaxy note 3+android4.3）

（nokia1520+wp8）
以上是我們現在對三個系統，最直接、最本能的意識形態。如ios界面的下面就是有個圓圓的home鍵，android界面運行在寬大的白色大屏機上，wp的手機都是炫彩明艷的。這種直觀的了解是我所說的，ui與工業設計的聯繫異常密切。
而後可以看到，ios與android的ui語言，在開始界面，很不一樣：ios滿屏圖標，neon背景；android的大圖背景，小圖標。但是仔細觀察會發現，iphone跟note其實很像的，籠統的看，差別僅在於屏幕占面板的百分比。
而wp吧···從ui到工業設計，它都是很獨樹一幟的。

二、不同風格的系統，與其相匹配的手機也是不一樣的
這個問題我會以不同android廠商的ui來說明，我挑選的都是盡量不同的。（ps：題答道一半我才想到，題主的問題拿android就可以解答完滿）各安卓廠商的幾乎都有自己特色的ui系統，以搭配他們生產的機型。我們來看看。

三星風格：清爽（galaxy s4）

三星手機的硬體設計堪稱典雅大方，皓月白現在也是當下最流行的顏色。回想一下，三星官方宣傳的海報中，手機的背景設置都是藍天、氣球、蒲公英等清新燦爛的畫面，配合典雅大方手工業設計，手機在手裡給人的給人的感覺是清爽的，如清風拂面，連手感都是軟潤光滑，在視覺觸覺方面已經樹立了手機硬體形象。
sony風格：酷（l36h）

snoy是我所說的積澱了無數機型的龍頭級硬體廠商，l36h開啟了sony的一扇窗，這個手機太漂亮太強大了，大屏、炫彩、超薄還三防！按照上面的思路，再看sony的ui，首先圖標排列方面，與三星的手機幾乎沒什麼區別，但是手機背景，看看，變成了暗黑中的炫彩光芒，配合紫色的外觀，還有精緻漂亮的power鍵，這手機就是一個字，酷！
魅族風格：比肩iphone（魅族mx3）

魅族在發布第一款手機的時候就立下了自己追求旗艦的貴族氣質，一年發一機，我們都說魅族是中國的蘋果，實際上我們看最新發布的mx3的ui，果然是這樣——排列有序的圖標、霓虹風格的背景、還有一個圓圈狀的home鍵，可以說魅族的手機，雖然運行的是安卓4.4的系統，但是ui方面已經很接近蘋果的。題友補充的在ios7之前，魅族的iflyme已經是扁平化風格了，在此表示國貨當自強！
有對比有真相
htc：BlinkFeed? 繽紛聚合（htc one）

htc one被譽為2013最美的手機，確實很迷人，全金屬的機身、幾何切感與弧度的完美結合，像是iphone撞上了白色lumia一樣。最最稱奇的，是htc最新的sense5.0系統界面，以及blinkfeed繽紛聚合界面，類似於wp，但是比wp更加豐滿耐看。黑色的頁面背景搭配邊框的黑色設計，讓用戶感覺界面無限延伸，配以這白色的質感外觀。黑白對撞、甚至是質感拼接的感覺，完美融合在一起，我只能說，最美機型名副其實。

以上是我挑選的最具代表性的ui系統與工業設計的結合，這四款手機運行的都是android系統，但是由於硬體廠商對於佔據市場的需要，開發了各自的ui
系統，已造成差異化對消費者的影響。這也就是其他題友所說的，android系統根本沒有自己的ui風格，因為自由，處處都可以風格。

相信以上各ui聯繫機型的不同，可以說明我的第二個觀點了。

三、這種聯繫，對ios和安卓束縛較小，對wp束縛較大。

我分三方面來說明這一點，一是工業設計相似的手機搭配不一樣的ui（特指ios與android）；一是不同廠商wp手機的相似方面；一是些許不同ui間，機型的細微差別（特指iphone 5c與lumia）

在工業設計上相似的手機，可以搭配不同的ios和android的ui。（iphone5與HUAWEI p6為例）

第一次端詳華為Ascend p6，有兩種感覺，一是驚嘆，國產手機有希望了；緊接著而來的，這貨跟ip太像了，細緻的鏡面倒角、超薄機身、天工般的一體化設計，很漂亮，很像。下面，有對比有真相。

連天線的樣子都一樣有沒有？！
然而兩個手機運行的卻是完全不同的系統，也是完全不一樣的ui。也是很和諧很好看的。
不同廠商wp手機的相似方面
我們熟知的wp生產廠商除了nokia，還有htc和華為等，我們見識了htc和華為關於android手機的硬體設計，下面我們看看這兩家對於wp手機的詮釋。
代表機型htc 8x和華為w2.

「我擦！這玩意跟lumia有蛇么區別啊！？」這是我們心底都會說出的疑問。但是我們想想htc的one，想像華為的p6，再看看他們的wp機，ui對工業設計的影響可見一斑！也就是說要想使得metro風格的手機出眾，機身的明亮配色似乎已經是wp手機的標誌了，這就好比一個女優有了文化涵養跟內涵，這人就很完美了。手機也是，明亮的配色跟同樣絢麗的瓷磚，搭配起來更耀眼。
些許不同的ui間，機型的細微差別。
這個問題我們用絢麗的5c和同樣絢麗的lumia系列來說明。先上圖

我挑了lumia家族中與5c最相似的lumia 620，從外觀到配色種類，都驚人地一致。我們都知道，5c和lumia的顏色都是繽紛絢麗的，但是lumia的顏色比5c的顏色純度要高，5c的顏色有點發白似的。這主要也是系統ui的問題，ios7主打的霓虹色（neno），這種ui概念比較高級，所以搭配的也是明度跟灰度較高的顏色，專業中稱「高級灰」。wp的metro風格一開始就是純色的，像是糖果（suger）一樣，跟它的極簡主義的瓷磚相匹配，簡潔最美，所以顏色也是單純的。