同一個產品,在 iOS 和 Windows 上如何依照系統特性分別設計?

同一個產品,在 iOS 和 Windows 上如何依照系統特性分別設計?

Ratio互動是一家位於西雅圖的設計工作室,為《GQ》、《Wired》、《New Yorker》、《VOGUE》做數位媒體的視覺設計。創意總監Bart Claeys從設計師的角度談「同一個產品,如何利用Windows系統的特性做的和iOS不一樣」

Windows系統在行動終端的難題之一是如何吸引更多的開發者來為Windows生態系統創造更多的app,這也是今年微軟Build開發者大會重點在談論的議題。在其中一場演講中,微軟邀請了Ratio互動的創意總監Bart Claeys從設計師的角度談「同一個產品,如何利用Windows系統的特性做的和iOS不一樣」

同一個產品,在 iOS 和 Windows 上如何依照系統特性分別設計?
Ratio互動是一家位於西雅圖的設計工作室,為《GQ》、《Wired》、《New Yorker》、《VOGUE》做數位媒體的視覺設計。
Bart Claeys從自己做iCookbook——一個在Windows和iPad上都可以使用的美食app作為案例,介紹同一個軟體在iOS(主要是和Windows平板尺寸接近的iPad)和Windows設計上的區別。

主頁: iPad區分內容時的邏輯是根據選單的標籤;Windows是以顯示內容為核心。

也就是說,在iPad上設計主頁時,使用者是被標籤引導進入內容,但是Windows則是要用內容(特別是大面積的圖片)來吸引使用者。
那麼,如果設計師要把一個iPad上的app主頁搬到Windows上來,就要做減法,如果以iCookbook為例——它強調用圖片來讓使用者對食物有直觀感受、需要簡單的文字介紹和使用者的評論——先確定一個固定顏色的背景圖片、去掉iPad版中的標籤欄、標記的頁數、可能讓使用者迷惑的隱喻、去掉圖片需要的相框、把內容按照一個全景圖重新組織(也就是想像一下如果你的app只有一張圖片沒有任何圖示該怎麼呈現)、填充圖片進去(特別是你想強調的內容)、在圖片下面添加文字並經常更新、把分類的標題部分放大再去處理Logo的樣式等。

輪廓和網格: 就這一點,Bart Claeys說其實沒什麼標準可言,要考慮具體的產品需求。

分享:在iPad上分享是來自app內螢幕兩側的延伸功能,例如你點擊app中的分享按鈕就會出現Facebook、Twitter或者Google+,Windows則是來自系統的設計——你需要在螢幕右邊從右往左滑動,會出現分享的設置,分享這一欄的背景顏色、主題都是由使用者自己設置的。

同一個產品,在 iOS 和 Windows 上如何依照系統特性分別設計?
搜索:iPad app裡搜尋需要app自己和搜尋引擎合作,Windows則是由右邊欄中的Bing作為預設搜尋引擎,在Windows 8.1的更新中還加入了程式內搜索。

設置:仍然是在微軟的右邊欄中,點擊設置按鈕會出現設置的資訊,包括帳戶資訊、登入和退出。

螢幕捲動方向:在iPad裡,關於螢幕的捲動方向並沒有明確的導向,但是在Windows的app中,非常明顯是水平滑動。Bart Claeys說這是iPad和Windows一個很大的不同,但是也帶來了一個問題,當你把Windows平板設備旋轉90度時,螢幕中有一半的內容是空白的,「這是添加一些新的內容的機會,比如廣告。」

app的封面:iPad的app是固定且靜止的圖示,Windows則豐富一些,你可以用圖片、文字連結等多種形式來組合,最多允許開發者設計五個封面。這裡Bart Claeys建議開發者去做A/B testing(一種將網頁內容簡單分成兩類,讓使用者隨機進入一種觀測使用者喜好的網頁有效性測試方法)。還需要注意的一點是,在Windows 8中,app的封面算是普通的長方形,但是到了Windows 8.1則多了幾種樣式——長度是過去的兩倍或者一半。

還有一個非常重要的問題——通知。iPad app的推送是在右上角標記一個數位或者發在通知中心,Windows則是直接出現在右上角。對此Bart Claeys說「這一點可要小心噢,你不會願意你在做一個演示的時候給台下的觀眾看到你其他的app推送了什麼消息吧。」對微軟吸引開發者的做法,Bart Claeys在演講完接受PingWest的採訪時說,「微軟過去在這方面沒有什麼經驗,之前他們邀請我去他們總部,專門講解Windows系統的特點、設計理念,他們有個協力廠商的公司專門負責這塊工作。我覺得他們肯定是想借這樣的方法來吸引開發者,未來說不定會把這種邀請制度變成一種正式的培訓或者借其他傳輸管道推廣;至於和蘋果有什麼不一樣,我覺得iOS 7之後似乎更加強調手勢,微軟則還要先繼續努力吸引開發者。」

同一個產品,在 iOS 和 Windows 上如何依照系統特性分別設計?

作者:Ronghui 

PingWest中文網
作者

PingWest是一家全球視野的尖端科技媒體,提供關於中國與美國的最尖端科技創業資訊,致力於成為溝通這兩個全球最大互聯網/移動市場的互聯網社群。

使用 Facebook 留言
發表回應
謹慎發言,尊重彼此。按此展開留言規則