顯示具有 UI 視覺設計 標籤的文章。 顯示所有文章
顯示具有 UI 視覺設計 標籤的文章。 顯示所有文章

2013年5月19日 星期日

關於APPLE以及GOOGLE的介面設計風格

今天讀到3篇我很喜歡的文章,在這邊推薦給各位,也給自己做個閱讀後的心得總結。

Google finds its design voice on iOS
12.25.2012補充,今天看到數位時代翻譯版(:請點這裡

延伸閱讀:
Apple's 6 Simple Rules for Designing a Killer iOS App
10 experience-enhancing tips for iOS app success

再延伸閱讀:
Google Maps mobile lead: We had to crawl before we could walk in app design (interview) 

說來有趣,這三篇文章雖然並不全然相關,可是其中探討的東西,卻又有重疊的部分。而那個交疊,就是APPLE的設計哲學。第一篇非常精彩,而我這篇心得主要是以這篇文章的讀後心得為主,其餘兩篇則是可以拿來作延伸閱讀的文章。最後一篇則是最近大紅的GOOGLE MAPS FOR IOS的LEAD談論該APP的開發, 也非常值得一讀。

總和來說,APPLE一直提倡著所謂的仿真設計,或者說復古設計,相關的討論我以前也有提過。而GOOGLE走的是完全不一樣的方向。APPLE使用仿真設計的理由,不外乎"經由對於現實世界的模擬,來增進使用者對介面操作的親和與熟悉"。然而這引起很大廣泛的爭議。爭議的點可以看看其他的文章。

我很高興GOOGLE即使在IOS上,也沒有被牽著設計的鼻子跑。主導Gmail iOS專案的總設計師Jason Cornwell英文原文中有一句話我在此引用:
Cornwell specifically calls out the fact that it’s doing things that feel ‘digital’, rather than physical."  
“What we’re shooting for here is something that feels authentic and digital, that isn’t trying to be a physical thing. But at the same time has some depth to it,” he says. “When you start to interact with it, you get a sense of sophistication, that there’s a lot there, but the initial presentation is very simple and very clean.”

可以看出,GOOGLE的設計師,希望使用者感受到的是"數位",而非"實體"。而且是用非常簡潔的手法來呈現。這也是我喜歡GOOGLE,或者舉例來說Any.Do的設計風格。因為我一直認為這些APP介面設計,真的是在一個DIGITAL的螢幕上發生的,若是要借重實體的使用經驗,反而會造成數位,甚至說MOBILE的使用行為的衝突。而在圖像上,有時也會造成畫面過於繁複而失去焦點,尤其是在小螢幕的手持裝置上,不過這也是我個人的美感觀點來論述的。我一直覺的"與實體物品"的連結,應該更隱晦而巧妙的,而不是大辣辣的把東西畫進UI中。

而新的GMAIL也是經由整合了併購了Sparrow團隊而可以看到很多Sparrow App的點子。包含使用大大的首寫字體以及個人頭像。

各位可以讀讀Apple's 6 Simple Rules for Designing a Killer iOS App,這篇Spun App 團隊跟APPLE合作後寫的心得,多是來自於APPLE給他們的設計指導。其中第一點就說"The App Should Feel Like a Tangible Object",也就是強調APP用起來要像是一個實體。Spun的設計師於是作了一個住狀介面,並說明他的設計理念。  但是說真的,DUDE,這個介面的風格既不吸引,也沒有任何USABILITY的好用之處,我覺得很像HTC的翻頁特效。我個人也覺得這個就是太強調實體意象而犯的錯誤。

而另一個更容易犯的錯誤就是像APPLE一樣去直接把瑞士鐘畫進UI...這又是另一個故事了。

Apple 的 ID 與 UI 設計

先前 Apple 有一波人事異動,由於牽涉位階的層次高而引起多方議論,尤其針對 iOS SVP Scott Forstall 的評論,多有關於他領導風格與行事手段的描述。其中最令我感到意外的是,Forstall 主導的 app UI 擬真風格,竟與 ID SVP Jonathon Ive 的意見相左。

意見不同倒不是我認為的最大問題,擬真風格也不是,感到特別的是 UI 設計由 Forstall 主導,且即便工設大頭目不認同擬真風格,Apple 還是這麼做了,並且 iOS 擴散至 OSX。如果沒有網路上的各方評論,我以為擬真的 UI 設計方向是 Apple 內部一致的共識,它不僅確立了 Apple 的設計品質 (想要那麼寫實還真的不容易,畫虎不成反類犬的例子多見),也從眾多 OS 中區隔出 Apple 特有的風格 (別家的設計即使也擬真卻不好看)。每個人對設計的看法不同,喜好也不同,在這一點上面,純粹表達自已的偏好,並無對錯的評價摻入。Windows 的介面設計醜死了,Google 的呆極了,但可能它們的設計才是好的。美醜的部分讓大師去評,這部分就此打住。

擬真
中國人造字時用到了象形與會意等概念,而這兩個概念正好是設計符號時必用的原則。UI 設計有時也會納入的符號設計思維,例如 icon 和各種特殊的按鈕,也許這麼說並沒有錯 — UI 是符號的進階與延伸。而象形的極緻便是擬真。

我個人認為擬真是 UI 設計的一個好方向,它讓人看一眼便能理解 app 用途,擬真至與實物相同的程度時,使用者於 app 功能判斷上,想錯也錯不了,而且也能帶來親切感。只可惜,有機會模擬實物的機會並不多。

其實,跟著 OSX 一起現身的 Aqua UI 就是擬真風格,不論是水滴色澤與金屬刷髮絲質地,或各個裝置的 icon 與偏好設定的符號,都是盡可能地寫實呈現,發展至此時的 OSX 10.8 與 iOS 6,各物件的設計比以往更為細緻、高畫質,而隨著 iPhone、iPad 出現的新應用,更加入了皮革材質的設計元素。或許擬真設計的工力沒有會意來得高段,但前者能帶來更豐富而活潑的風格發展,是後者所不能及的。

外傳擬真是 Forstall 私人的主張,過去有著 Steve Jobs 的支持,現在他繼續強勢主導這個方針,但其他人覺得這個決定並不好,而且不喜歡 Forstall 的行事風格,工設與硬體老大甚至不願與他共事,所以權衡之後只好請他走路。

目前 Apple 的擬真風格或許用得有些太過,像是 Find my friends app 採用皮革質地全無可令人信服的依據,但關於 Forstall 走人這件事,我卻認為 Apple 做了一個不好的決定。如果真如外界傳言他是個迷你 Steve Jobs,跟他處不好說不定幾年後會對 Apple 造成危險。

當然,就算有報應也不會來得這麼快,Apple 即使立刻擺爛也還有不短的好日子可過,不過,不論如何,如果 Forstall 的出走能對 Apple 帶來威脅是件好事,任何人對 Apple 帶來威脅都是科技發展上的好事情,除了偽善的傢伙。不管是誰,我希望 Steve Jobs 後繼有人,不管在什麼地方。很高興聽到有人形容 Forstall 是位迷你 Steve Jobs,他不僅巳經證明了自已的專業能力,還承襲了 Steve Jobs 的方式和個性,希望他們不是沒依據地亂講。

ID 與 UI
或許產學界有多種派別,但我不曾做二想 — UI 是 ID 的一環。機器外在的按鈕是 UI,app skin 上的按鈕也是 UI,即使是實體按鈕,也與機器的功能與系統服務流程有關,因此 UI 設計難分軟硬,或許每個人專精不同領域,但 UI 歸屬 ID 千真萬確。

Forstall 走人一事顯示過去 Apple 的 ID 單位並無 UI 設計的控制權,至少是部分的 iOS 與 OSX 方面,此點令人大感意外。也難怪,Ive 的團隊只有十幾個人而巳,有相當多的時間用於圍在木桌邊發想與討論,不然就是畫圖或做模型,不只 UI 設計,像是機構設計的部分也只能委由別的單位處理,所謂的 ID 團隊,大概只負責外型設計與概念機種的提案。

雖說是 Ive 的團隊給予了所有 Apple 產品一個靈魂,但要評斷對 Apple 而言,是他重要,還是 Forstall 重要,我不知道,只耽心外界高估了 Ive 的貢獻,才會在此時對 Forstall 多有落井下石的評論。吾人當明暸,當年 iPhone 4 不鏽鋼天線是個大有風險的偏激設計,白色塗料的問題亦導致嚴重的上市延遲,而現在,iPhone 5 帶給鴻海空前的製造難題,這些堅持造成的困擾,不見得比 Forstall 來得輕,況且,外型設計與材料搭配的發揮空間近乎無限,若要說 iPhone 一定得設計成現在這樣才行,我必需給這個說法一個大問號。

撇開做人處事,我深信 Ive 跟硬體部門 (Bob Mansfield) 之間的衝突絕對多過軟 (Forstall)、硬體部門之間,Mark Papermaster 就是被工設經典案例不鏽鋼天線給犧牲掉的倒楣鬼,Forstall 走人也並不會讓 iPhone 硬體更好做,反正,Apple 現在成功了,那八成決定都做對了,外人在 ID 方面想法再有不同也是多餘。

Ive 是 Apple 的看板人物,如果他在公司裡面產生什麼衝突或問題,任誰也知道他是炒不得的,如果有誰在政治方面有利,那便是他,而不是傳言愛搞政治的 Forstall,希望 Ive 別把 iPhone 6 設計搞砸,權力再晉級之後,注入更多創見,彌補 Forstall 離去的損失。

如果你是UI Designer,下次一定要換台Mac

首先,這不是一篇廣告文。而是我在用了Macbook近一年後,發自內心的推薦。

在這之前,我是個純種的PC使用者。從高中的Intel 486 DX-33+MS DOS 6.X開始,到大學時把Pentium 266超頻成450MHz來做電腦動畫,研究所時期用遠端桌面遙控的NB寫論文,再一路到職場工作,我一直都是PC的愛用者,而且從未使用過Mac。之前也曾經聽過很多Mac user的使用心得,像是「用過就回不去了」,這種帶有濃厚情感的說法。只是姑且一聽,畢竟在自己真正用過之前,這些評論僅止於參考。    

然而,很妙的是,在用了Macbook近一年之後,我已經回不去PC,同時也開始鼓吹其他設計師換用Mac。原因無他,UI Designer應該主動去追求更多元、更極致的使用體驗,並且讓自己更懂得要求細節。像是買一台BMW,或是去杜拜帆船酒店住個幾天,都會很有幫助。不過除此之外,還有一個更有效、更務實的作法,那就是擁有一台Mac。雖然比PC貴一點點,但是可以工作,也可以娛樂,還可以讓你體驗到世界頂級的產品與服務,並且把它吸收轉化成往後做介面設計時的最低標準。

如果你是UI Designer,記得幫自己買台Mac

親身體驗一下,什麼叫做系統層次的高度整合

做過介面設計的人都知道,碰到整合應用程式,或甚至是整合軟硬體的案子,通常會很有趣,但是也真的很難。困難的地方在於,要在一堆可能性跟限制中,找出真正重要的亮點,同時用很強的執行力,把這個亮點從軟硬體的底層開始,以一貫之,用力地徹底執行出來。用講的誰都會,但是真正做出來的卻很少。Mac在不少層面都做到了這樣的高度整合,而且還真的超好用。

我覺得最棒的例子是Multi-touch Touchpad。在硬體上,Macbook的Touchpad乾乾淨淨的,除了一個圓角邊框,以及略微凹陷的平面外,沒有其他的雜訊。在軟體上,這塊乾淨的板子,可以做10來種手勢操作,而且每一個手勢,都有對應且流暢的互動效果。

Scroll是當中最棒的手勢之一。兩根指頭點下去,上下滑動就好,簡單俐落,很容易轉變成一種下意識的肢體反應。換做是一般的筆記型電腦,你得「把滑鼠游標精準地移到Scroll Bar的拉桿上」,「左手按著觸控板的左鍵不放」,然後「右手上下滑動」。光是描述一次整個操作流程就覺得煩了,更不用說要每天重複Scroll個幾百次。

Exposé跟Mission Control的手勢,也是一絕。在任何時候,任何畫面下,只要四根手指頭往上一甩,就像是把桌上的所有東西往前一攤,所有開啟中的軟體,全部縮小攤開歸類好,讓你有個概觀,並且可以立刻做選擇。四根手指頭再往左右一滑,立刻滑到另一個桌面,就像從書桌轉身到側桌一樣,讓你可以從工作模式,立刻轉換成休閒模式。這兩個功能在一般PC上都有類似的替代軟體,但是切換得靠「Win+Tab」、「Alt+1」等複合鍵,需要額外學習記憶,耗資源,而且普遍缺乏流暢的互動回饋。實際使用起來,跟這種系統層次的整合還差得遠。

Mac的多點觸控好用到爆,但是綁死了專利,僅只一家絕無分號

另外,還有一些其他系統整合之後的好功能,像是Dictionary。以前在使用PC的時候,要做英文拼字校正,得在Word裡面先打好文字,用Office提供的拼字檢查功能確認過,才複製貼上到其他軟體裡去。不然就是得安裝Babylon之類的字典軟體,遇到不確定的字就按滑鼠右鍵查詢一下。剛開始使用Mac的時候,我還很納悶,為什麼Mac上找不太到字典類的第三方軟體。結果,原來是Mac已經內建了一個跨軟體的字典功能。不管是瀏覽器、記事本,或甚至是專業繪圖軟體,只要是能夠輸入文字的地方,都可以即時做英文拼字檢查,實在很神奇。

唯有系統層次的高度整合,才會產生出這種「不廢話,用就是了」的使用經驗。從實務的角度來看,這些功能真是難做到死,但是好用到爆,你一定得自己親手試試。

寵壞自己的五官,讓自己更懂得嚴苛地要求細節

除了從大架構著手,去體驗一下什麼是系統層次的整合之外,Mac的很多細節設計,也可以作為介面設計時的參考。

聲音部分,Mac處理得頗為細膩。當你在靜音時插上耳機,會自動把音量打開;反過來,當你把耳機拔掉時,會再自動切回靜音,免得在夜深人靜的時候,突然爆出的聲音會去嚇到別人。這個設計說穿了,不過是個簡單的邏輯判斷而已,但是我在大部分的NB上,都沒有看過類似的使用經驗。

觸覺上,不論你用的是13″, 15″, 17″的Macbook,或是外接的Magic Touchpad,那片觸控版的觸感、顏色,跟按壓時的力回饋,幾乎都是一模一樣的。我記得在BenQ服務時,李焜耀曾經出了個難題給我們,要UX Team去研究一下,為什麼Nokia的手機鍵盤會這麼有質感。這個可真是個大哉問 (汗..)。結果經過仔細跟丈量與分析之後發現,原來Nokia手機上的每一個按鍵,它的行程深度、力道,以及按壓時的聲音,幾乎都是類同的。這讓你在按每一個按鍵的時候,都可以感受到一致的細節,不會有任何鍵特別大力,特別大聲,或是偏了一邊。這個要求放在不同尺寸的觸控板上,可就更難了。不過Apple做得真不錯,就算是把眼睛蒙上,大部分Mac使用者應該都還可以光靠觸覺跟聽覺,就辨識出哪一台是Macbook,哪一台不是。

視覺上,Macbook除了螢幕細膩、背光均勻等硬體優點外,軟體上的互動體驗,其實更值得去細看。不知道你是否有注意到,絕大部分的Mac OS介面,都是動態的。像是登入時,若是輸入了錯誤的密碼,輸入欄會左右抖兩下,感覺像是一個俏皮的小子,跟你說「喔喔,你搞錯密碼了呦!」。切換桌面時,整個畫面會先加速橫向移動,然後再緩緩減速直到定位,最後才把桌面的捷徑,以及視窗外圍的陰影套上。這些動態的細節,讓整個介面看起來輕快、優雅,而且充滿生趣。

這些聽覺、觸覺、視覺上的精鍊設計,平常得多看、多聽,多用。讓自己習慣於高水準的介面設計,並且反過來要求自己的作品與提案。

沒有相容性問題,反而有更多可能性

有一些問題,我猜你可能會想要問。首先,從Windows轉換到Mac,大概需要多久時間?我的經驗是,初步使用約兩天到一個星期,徹底轉換大概需要三個月。不過如果身邊有高人可以協助,例如推薦一些替代軟體,或是幫忙解釋兩個平台間的差異等,上手的時間會再短些。

再來,如果常用的軟體都在Windows平台,那該怎麼辦?我的建議是,裝個Parallels Desktop,用模擬的方式跑Windows就可以滿足八成以上的使用需求,甚至可以跑Photoshop,不會有任何問題。但如果有更高的運算需求,像是3D電腦繪圖,那就靠Boot Camp裝一個乾淨的Windows,運作起來比一般NB強得多。

裝個 Parallels Desktop,應該可以滿足80%的跨平台使用需求

不要停,繼續去追求多元的使用體驗

雖然強力推薦UI Designer要擁有一台Mac,但是並不是要大家去崇拜Apple,把Mac當做資訊科技的唯一。Windows跟Mac兩個平台各有特色,而且可見的未來,誰也取代不了誰。所以,除非你的公司只做Mac Software的生意,否則還是保持中性,每一個平台都多去了解一下,多去熟悉它們特性與慣例。

就像Steve Job在1996年時,接受Wired雜誌專訪時所說的:「When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while. That’s because they were able to connect experiences they’ve had and synthesize new things. And the reason they were able to do that was that they’ve had more experiences or they have thought more about their experiences than other people.」

主動去追求更多元、更極致的使用體驗,並且讓自己更懂得要求細節。不要停,這些都會逐漸累加成為往後設計所需的元素跟養分。直到有一天,你將會有能力去連接這些過去的美好體驗,並且反手去創造新事物。

那一天,將會是你一生當中,最美好的一天。

蘋果 UI 設計師談基於原則的創造

Bret Victor 的演講深深地打動了我的心,著實令我反省了許久。如果你還不認識他,不妨先至他的網站看看他是誰,在想些什麼,曾經做過些什麼。身為蘋果的 UI 設計師,他在美學設計上的創造力眾所皆知,然而背後之所以能一直驅使他創新與成長的理由就不是那麼容易挖掘了。

Bret Victor 的網站: worrydream.com

在底下的這一場演講,難得的可以聽見 Bret 透漏這麼多內心的想法,提到 social wrong 和設計師的責任。還提到他對於「find and solve problem」與「sense something wrong and do something」的價值判斷,這些真是非常少人提過。




在影片前一部分的 demo,Bret 主要在傳達每個人都應該要找到「自己的原則」的概念。他給了五個設計實例,告訴大家他是如何遵循他為自已所設下的原則,逐漸開發出這些令人驚喜的產品。他說, creator needs immediate connection. They need to see the effect immediately。這就是他的原則,所以他開發出了能夠立即給予程式設計人員立即回饋的開發環境。

而有一些片語也令我難忘,比如,許多人都提到要找到你的熱忱,追尋你的熱忱。不過,很少人提到要找到屬於你自己的原則。這個反省讓我印象深刻,也使我思索起這兩種行為的差別。而我想,差別在於後者是利於實踐的,而前者則是容易使人迷失在起伏不定的心情裡的。

影片的中間,他提到:「When I see idea's dying, it hurts. I see a tragedy.」一個多愁善感的人,不是嗎?但真是很難讓人不喜歡他。