IOS11設計分析

PART 1 -?Wayfinging / 尋路 / 空間導引 — Metro UI

我們通過 [標示引導] 在街道,機場,停車場這些場所進行方向和位置的識別,這種導引指示系統被稱為【Wayfinding】,詞語來自【建筑】,由 Kevin Lynch 在1960年提出。

Metro UI ,Metro 是由微軟公司開發的內部名稱為“typography-based design language”(基于排版的設計語言)。最早出現在微軟電子百科全書95,后來的產品如:windows媒體中心、Zune播放器都有用到這項技術。該技術已于2010年初(美國)獲得Metro UI專利批準(USPTO)如今該技術被引入到微軟最新開發的Windows Phone操作系統和已經發布的Windows 8Windows 8.1以及Office 15中。為避免與德國公司Metro AG可能存在的商標侵權糾紛,微軟營銷部門已經決定在描述Windows 8及其以上版本或Windows Phone界面時,放棄使用“Metro”一詞,而啟用“Modern UI”(現代用戶界面)作為替代詞匯。

Metro UI的特點在于【強調信息本身】。


PART 2 - 字體排印(Typography)

字體排印學,或字體排印(Typography),是一種涉及對字體、字號、縮進、行間距、字符間距進行設計、安排等方法來進行排版的一種工藝。在數碼技術普及之前,字體排印是一項專業的工作,數碼時代的來臨使字體排印不像從前僅由排字印刷方面的技術工人完成,而更被圖形藝術家、藝術指導、文書人員甚至兒童廣泛使用。

字體排印學是對【可讀性】與【易讀性】的研究應用

a : 可讀性

可讀性通常用來形容某種書面語言閱讀和理解的容易程度 — 它關乎這種語言本身的難度,而非外觀,影響可讀性的因素包括詞句的長度,以及非常用詞的出現頻度。

b : 易讀性

易讀性描述的是排版文本閱讀時的輕松和舒適程度,它和語言內容無關,卻與印刷或文本現實的尺寸和外觀聯系密切。

易讀性一般通過閱讀速度來衡量,用閱讀理解的得分來檢驗閱讀效率。

在易讀性研究方面達成的共識包括:小寫字母的文本要比全大寫字母的文本易讀,大致是由于小寫字母的結構和詞語形狀更容易區分,特征更明顯——帶有延展性的筆畫(ascenders上伸筆畫, descenders下伸筆畫、以及其他的伸展性筆畫部件);標準體字形(正體roman)的易讀性要優于斜體;對比很重要——不要有那些耀眼的發光效果;在黃色/奶油色底上使用黑色文字最有效;陽文(白底黑字)要比陰文(黑底白字)易讀;在識別過程中,字母的上部形狀要比下部形狀發揮更重要的作用;字母間距、詞間距和行間距太密集或太松散也會降低易讀性。充足的行間距可以隔開每行文字,使得眼睛容易區分上一行或下一行。設計糟糕的字體,以及過密或過松的排版都會導致糟糕的易讀性。


PART 3 - 蘋果的設計原則?iOS Human Interface Guidelines: Designing for iOS

人機交互設計原則?

a : 美學完整性;b : 一致性;c : 直接操作;d : 隱喻;e : 用戶控制

在 IOS 7 之后,蘋果在官方的人機交互指南卷首就闡明了它的設計主題。

·?清晰性(Clarity)

文字在任何字號下都可讀,圖標必須明晰且表以精準,裝飾必須微妙且合適,必須尖銳地用功能驅動設計。

· 順從性(Deference

設計永遠只幫助用戶理解與交互內容,但永遠不與內容競爭。

· 景深(Depth

通過視覺層次和仿真的動態效果來傳達生動,來提升用戶的愉悅與理解。

歸結起來就是

內容凸顯第一,元素不與內容競爭,除非是幫助(引導)用戶去理解潛在功能的作用。


PART 4 - 蘋果的設計探索

16年,在 IOS10 中 Apple Music 進行了一次前瞻性改版

盡管設計師們討厭,卻似乎并沒有影響到用戶的正常使用。UserTesting專門做了用戶測試,得出的答案就是:The more users interact with it,the more they like it。


Apple music 改版后的用戶增長曲線

最終的用戶數據反饋,實實在在打了一眾高逼格設計師的臉

為什么要拿 Apple music 做小白鼠?

Apple music 是內容型APP,適合用來驗證新設計是不是能夠明確位置和清晰路徑。


PART 5 - IOS11在APP中應用的特性

a : 大標題導航欄

使用「大標題」導航欄能清晰表現當前的位置,也是這次 iOS 11 讓人印象最深的設計變化。

大標題導航欄所適應的場景:

· 頂層是標簽欄結構的APP

一般有標簽欄的 App 內容會相應更多一些,使用「大標題」導航讓用戶在各個標簽欄切換中能夠快速查看到自己的位置,當用戶滑動屏幕時看到「大標題」導航也可以意識到回到了頭部。

· 內容豐富的 App?

蘋果設計師們在內容豐富的 Apple Music 驗證了「大標題」的效果,所以對于內容豐富的 App 自然也是適用。內容豐富 App 有大量的頁面和各種深度的結構層級,用戶會沉浸其中,這時候「大標題」導航就可以起到導引作用。

· 在頁面內容&布局類似的 App 中使用

內容&布局相似的 App 一眼很難快速分辨,「大標題」導航可以起到明顯的指示作用,電話(Phone)App 里各個標簽欄的內容都是類似的信息,很適合使用「大標題」導航。

· 不適合用在內容功能互相平行獨立

時鐘(Clock)App 是一個不適合使用的案例,每一個標簽頁的界面都符合當前功能的界面,用戶可以快速分辨出來,若使用「大標題」導航,會讓大標題強過功能表現,違背蘋果的設計原則「UI元素不與內容競爭」,影響可用性,所以不適合。


b : 提升文字設計的層次

· 利用「先后位置」建立層次

位置可以表現重要性,像下圖中的 Lable1 和 Lable2 的位置,大部分人看到時都會推斷 Label1 比 Label2 更重要(有些場景也許有例外)。

· 利用「顏色/字號/字重」建立層次

深顏色 vs 淺顏色,大字號 vs 小字號,粗字重 vs 普通字重,這些在正常情況下都能很容易分辨出哪個 Label 更重要,可以利用這些方法疊加起來,讓元素之間有清晰的層次

· 在 iOS11 中提升層次的案例?

照片(Photo) App

照片是 App 中最重要的內容,iOS 10 中照片的章節標題與照片對比不清晰,不能凸顯照片,所以在 iOS 11 中,章節標題的主標題字體調大+增加字重,副標題字體調大+用灰色,改動后在下面對比圖中可以看到層次有明顯提升。

日歷(Calendar) App

基礎元素都加強了顏色,月份上用了更大字體+粗字重,在當前正在經歷的內容上用了紅色加強,對比 iOS10 的版本,層次清晰并且對當前場景的處理讓整個 App 的設計更符合邏輯和美觀。

天氣(Weather) App

全局調大了字體大小和間距大小,雖然犧牲了一些高度,但是可讀性上增加了很多,層次更清晰,變得更容易閱讀。

c : 增強對比效果

隨著「大標題」和「文字層次」的提升,其他元素也要一起去平衡,讓所有元素之間都保證功能實用性和盡可能簡約,以下是改動的一些內容:

解鎖界面中填充了按鈕形狀和增大文字字重

搜索框中文字字號增加,增加高度

標簽欄文字的字重從默認(Regular)到中號(Medium),對圖標也做了填充和加粗線條

橫屏狀態下,把標簽文字移動到了圖標右側,縮短了標簽欄高度,和導航欄和工具欄的高度更匹配。


PART 6 - IOS11視覺特性 —— “化繁為簡”

iOS 11的 UI 風格叫 Complexion Reduction —— 一種超越扁平化設計和極簡設計的UI美學新風潮

三個視覺特性:

· 加大加粗的標題

· 更簡單更普遍的圖標

· 減少色彩的使用

iPhone的主屏很快就會變成一塊彩色的馬賽克,這些鮮艷的入口會引領你進入游樂場。

產品設計流程正在發展和進化,不再是從前那種分離式的方式,鼓勵過多的設計。現在的流程更趨于整體,真正關注用戶。在從前的產品設計流程中,UI設計師可能會接過UX或產品給出的原型圖,要求“把它做漂亮點”。然后設計師就會畫上數小時、數天來添加、去除、調整顏色,或許最好的方案可能就一直擺在他們面前……直接用原型圖!由于在如今這個整體的設計流程中,UX和UI設計師的界限正變得模糊,設計師不必過分操心自己的具體職責(例如把它做漂亮點),轉而關注最終目標,為用戶打造最棒的產品。

化繁為簡的終極指南

·?去除彩色,或者極度克制地使用彩色(包括但不限于標準色)。讓內容來為應用填充顏色。

·?加大、加粗、加黑的標題,減少頁面的視覺層級。

·?簡潔、纖細、易辨識的圖標。

·?留白區域變為原來的兩倍,三倍甚至可以到四倍。

·?應用圖標更鮮艷。體現個性和品牌的地方,要讓它光彩奪目。

總結成一句話來形容這股趨勢就是「大而簡,簡而精」

在這股趨勢下,未來的設計將更注重產品的內容和操作體驗,降低其他因素對用戶使用上的干擾,這對設計師來說,是不小的挑戰,因為越簡單的東西越難設計,特別是如何在界面設計中去把握「大」和「簡」的程度以及如何通過更有限的手段和空間來傳達更多的信息和指引用戶來達到「精」的目標,這是我們在未來需要不斷考慮、探索和解決的問題。


PART 7 - 從理念到趨勢

很多設計師說到「設計趨勢」,會說扁平化,漸變,投影等元素,相信這次 iOS 11 中視覺風格最強烈的「大標題」也會成為一些設計師口中下一個「設計趨勢」。

我們回顧下蘋果設計團隊設計 iOS 11 過程:

·?發現 iOS 中存在位置不清晰的問題。

· 提出「Wayfinding」的概念。

· 用「字體排印」的方式進行融合,并且遵守已有的設計原則。

·?在 Apple Music 中做實驗并且驗證有效果。

·?制定了設計方向(大標題,文字層次,對比)。

·?落地并打磨設計。

「大標題」的設計樣式并不是憑空而造的,基于發現一個問題和提出一個解決思路和一個全局的設計理念而得來的,特別是對于互聯網產品的設計,這點尤為重要。

不要成為「設計樣式」的追隨者。要知道什么對我們產品是合適的。要建設中國特色的社會主義道路。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,090評論 25 708
  • 1 UI設計基礎 1.1 為iOS而設計 1.1.1 iOS包含以下3條設計原則: 遵從,UI應該有助于人們理解內...
    Willry閱讀 3,615評論 1 48
  • github排名https://github.com/trending,github搜索:https://gith...
    小米君的demo閱讀 4,796評論 2 38
  • 對…… 比如,我沒有做夢,我真的拉在褲襠里了。 比如,我現在手頭上沒有可以立刻彌補這一切的條件。 更比如,我在街道...
    陸宇閱讀 247評論 0 2
  • 感謝奇葩說為我提供了這么多選題 這回可以討論下今生摯愛的問題 如果你不是單身 哪天真的遇到今生摯愛了 你是分手還是...
    娛樂圈觀點閱讀 331評論 0 1