iOS7體驗報告 – 關于視覺風格、界面結構、字體、動效和可用性
iOS7體驗報告 – 關于視覺風格、界面結構、字體、動效和可用性-移動閱讀二維碼

iOS7體驗報告 - 關于視覺風格、界面結構、字體、動效和可用性

新版本的iOS進行了徹底的重設計。相比于過去栩栩如生的擬物化界面風格,它走向了另一個極端——光潔的令人震驚。一向以精益求精著稱的蘋果,這次似乎無法履行自己的諾言了。乍看上去,應用圖標有些令人難過,用戶界面缺乏結構,所有東西都給人一種未經打磨的感覺。

實際上,iOS7并不那么差勁,遠遠不是。

作為設計師,我們必須記得自己是在為用戶而設計。我們要有同理心,要能駕馭更加現代化的設計風格(相關閱讀:八個小方法,幫你成為更具同理心的設計師)。這在如今就意味著我們要把那些來之不易的、精心打造的視覺風格拍扁;這似乎有些戲劇性。我們當中的多數都是復雜化和擬物化的受害者,而現在,到了考驗我們適應能力的時候了。

關于iOS7,到目前為止,我在WWDC、MacRumors、Hacker NewsJohn Gruber的文章當中所看到的,都是壓倒性的正面反饋。沒錯,設計師們是會淚奔的,可是誰能責怪他們呢?他們畢竟都曾接受過同一個公司的教育,而如今,這個公司又要重新教育他們了?,F在的蘋果是一塊空白的石板,拿著鑿子與斧頭的是同時掌管軟、硬件設計的Jonathan Ive長官。

 

視覺設計

它非常平,比我當初所能預想的還要平很多。對于那些習慣了iOS界面設計規范和OS X的設計師們來說,新風格是令人震驚的;這種震驚甚至會讓你懷疑自己是否還屬于最酷的一代。這不太像蘋果過去的風格,現在它似乎正在跟隨Google、微軟甚至是雅虎的步伐。無論是日歷、郵件還是天氣應用,你都能看到這些公司相關產品的影子。

02-weather-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

不過,這種變化注定是要發生的。扁平化設計風格強烈的依賴于文字排版與配色,而不是通過漸變、陰影或紋理質感使內容得到突出。要更好的理解這一點,你需要把眼界放寬些,思考一下Google、雅虎、微軟等公司是怎樣走上這個方向的。是的,你會發現最根本的原因還是在于蘋果。iPhone風格的UI模式以及Helvatica Neue Light這樣的優秀字體都是蘋果在現代移動設計的時代之初所宣揚的實踐方式。所以,與其花時間去琢磨蘋果是不是在copy其他平臺的風格,還不如回頭看一看歷史——正是各個平臺間的互相影響共同造就了真正意義上的現代移動設計風格;這種風格所面向的,是在科技方面受過良好教育的一代用戶,他們并不那么熟悉擬物化風格所模仿的現實對象,例如盤式磁帶、皮革封面的行事歷或是撲克牌桌。

03-skeumorphism-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

iOS7的視覺呈現方式是有深度的,而非漫無目的的。實際上,它在很多方面都做的很正確。1像素的線條、細字體、白色的整體UI,現代感十足。與安卓的暗色/灰色UI或微軟的黑白UI不同,蘋果明確而優雅的使用著白色,感覺非常干凈,且具有禪意。

04-white-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

 

視覺結構和缺乏一致性的地方

在iOS7當中,有時你會覺得很難分辨界面頭部與內容之間的分隔,因為它們使用的背景色幾乎相同,一個略灰一些,一個更白。按鈕看上去不再像是按鈕了,它們現在只是一段藍色的文字。但同時,你又會在切換控件上看到強烈的陰影效果;更奇怪的是,在提醒事項應用中,你仍然可以看到紙質紋理的樣式,另外iBooks也依然在使用木質外觀。

另外Spotlight功能確實不容易被發現。從前是在首屏向右滑動進入Spotlight搜索模式,而現在是在首屏向下掃。另外當你在搜索框中輸入了一些文字之后,也不大容易發現怎樣退出Spotlight界面。

05-structure-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

另外某些配色在半透明的控件上表現的并不理想,甚至缺乏必要的對比度。確實不大像蘋果的作風。

06-color-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

 

半透明界面

iOS7當中的模糊背景效果是我所見過的運用的最棒的,在任何內容背景下都表現不錯,不會影響可讀性和趣味性。其實如果預先設置幾種固定的背景色的話,這種效果還是很普通的,但是在iOS7當中,所有的模糊背景效果都是基于實際界面內容生成的,而且是動態的可互動的。我確實琢磨過他們使用的是怎樣的混合模式,Screen還是Overlay?

09-Translucent-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

在短信應用中,你可以透過鍵盤看到下面模糊化的對話氣泡;控制中心的背景是一層白色毛玻璃一樣的面板,而通知中心則是暗灰色的,非常有現代感,整體效果看上去甚至有些像信用卡上的激光防偽標簽。從某種程度上講,這可以說是摒棄了多余的紋理和質感效果的、更具現代感的、以內容為中心的擬物化。

 

字體

纖細的字體表現還算良好。這種風格來自于雜志,通常字號會較大,所以可讀性不錯。由于iOS7當中的按鈕基本都是以文字的形式出現的,所以字號也略大。平心而論,這些文字形式的按鈕還是具有很強的自解釋性的;相比之下,倒是Windows 8當中的文字按鈕由于空間占用方面的問題而顯得有些夸大其詞。

07-wallpaper-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

在可訪問性方面,iOS7為大號字體提供了更好的支持。有意思的是,當你和“老一代”iOS用戶談起這方面的問題時,你會發現他們所提出的主要問題之一,就是怎樣增大字號。所以iOS7的這點變化應該會受到歡迎。在WWDC上,蘋果同時還宣布了一些在這方面令人興奮的功能,例如自動布局(Auto Layouts)等等。

08-accessibility-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

 

動畫效果

動畫效果是我最新歡的部分,特別是當你點擊應用圖標后,應用界面直接從圖標處放大呈現出來的過程——非常符合直覺,因為你的視線可以很自然的跟隨這樣的運動。另外控制中心和通知中心的展開過程也很自然,不會突兀地讓你失去上下文環境感。當通知中心完全展開后,你甚至能看到仿真的碰撞和彈跳效果。

10-Notifications-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

從鎖屏狀態進入系統界面時的動效也很吸引人,你會看到應用圖標一排排的“落”到它們應該在的位置上。設備的傾斜還會使系統界面產生視差效果,從技術角度講,就是背景圖片朝著設備水平位置較高的一個側面進行簡單的移動。這不是個足以改變業界游戲規則的重大視覺效果,但可以取悅用戶。

11-home-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

在短信應用中,隨著內容的滾動,你也可以看到視差效果,感覺非常自然,而且很有意思。

12-message-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

層級化的界面在前后切換時的動畫,也由從前簡單的“推進”效果進化成為精巧的頁面覆蓋疊加的效果,感覺更加光滑順暢。

13-BackButton-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

 

解決問題

在WWDC,我和6000名開發者坐在同一間屋里看著Keynote演示,興奮點此起彼伏,有個家伙甚至喊出了“我愛你”。因為從根本上來說,iOS7非常漂亮的解決了很多問題。

你可以在整個鎖屏界面上執行滑動解鎖,感覺比以前容易多了。

14-lock-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

從底部滑出的控制中心可以讓人們快速訪問亮度、Wi-Fi、藍牙等控制功能,甚至還包括拍照、計算器和新的手電筒功能。這不是什么隨隨便便的花招,所有這些功能都是用戶最常用的。

15-control-center-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

如今的文件夾可以收納不限量的應用,在內部左右滑動就可以瀏覽全部。

16-folder-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

App Store在搜索方面進行了比較大的改動,并且增加了一個非常漂亮的下載動畫。另外,在iOS7當中,應用可以在后臺自動更新了。

17-app-store-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

在iOS7當中,從屏幕左邊緣向右輕掃便可以回到前一個界面,很有效地解決了返回按鈕與單手操作可用性的問題。(相關閱讀:談導航欄返回按鈕的替代方案)

18-safari-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

還有用起來感覺很贊的多任務控制功能。

19-multi-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

新的Safari在導航欄的隱藏和最小化方式上很像Pinterest的做法。另外,新的標簽頁的設計很聰明,在數量上也不再受限制。

20-safari-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

新的相機應用內置了濾鏡功能,照片可以按照時間和地點整潔的組織起來。

21-camera-ios7-redesign-flat-transition-ui-ux-user-interface-iphone

像這樣的解決方案列表還可以繼續下去。

 

小結

這就是我,一名WWDC的出席者以及花了一整天時間測試iOS7 Beta版的用戶所得出的體驗報告。我真心覺得你會越發愛上iOS7,但同時,我也認為蘋果真的應該換掉那些丑陋的應用圖標。

?轉自:beforweb? 譯者c7210[微博]
本文鏈接:http://www.casaleticia.com/ios7-experience-report.html
本文標簽: , , , , , ,