'UI設計師來看iOS 13 隱祕的細節:系統組件·下'

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

拷貝:三指捏合,可以快速拷貝;

剪切:連續三指捏合兩次,即可剪切;

粘貼:三指外擴,即可粘貼;

撤銷:三指向左輕掃,即可輕鬆撤銷;

重做:三指向右輕掃,即可重做;

講真,我看一次,就記住瞭如何快速拷貝,其他四個都沒記住......

也許不久之後,國內軟件上也會興起類似的多指交互,也未可知。讓我們拭目以待吧~

默認頭像

在《第一篇》中,我曾提及iOS 13中默認頭像的變化:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

拷貝:三指捏合,可以快速拷貝;

剪切:連續三指捏合兩次,即可剪切;

粘貼:三指外擴,即可粘貼;

撤銷:三指向左輕掃,即可輕鬆撤銷;

重做:三指向右輕掃,即可重做;

講真,我看一次,就記住瞭如何快速拷貝,其他四個都沒記住......

也許不久之後,國內軟件上也會興起類似的多指交互,也未可知。讓我們拭目以待吧~

默認頭像

在《第一篇》中,我曾提及iOS 13中默認頭像的變化:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在iOS 12系統中,“默認頭像”都具有性別特徵。比如通訊錄的圖標,就是由一男一女的剪影組成。

在其他位置,比如:通訊錄詳情頁、短信列表、AppStore所用的默認頭像均為“男性”剪影。

而在iOS 13中,上述這些位置的頭像,都變成了去性別特徵的圓形頭像。如下圖:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

拷貝:三指捏合,可以快速拷貝;

剪切:連續三指捏合兩次,即可剪切;

粘貼:三指外擴,即可粘貼;

撤銷:三指向左輕掃,即可輕鬆撤銷;

重做:三指向右輕掃,即可重做;

講真,我看一次,就記住瞭如何快速拷貝,其他四個都沒記住......

也許不久之後,國內軟件上也會興起類似的多指交互,也未可知。讓我們拭目以待吧~

默認頭像

在《第一篇》中,我曾提及iOS 13中默認頭像的變化:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在iOS 12系統中,“默認頭像”都具有性別特徵。比如通訊錄的圖標,就是由一男一女的剪影組成。

在其他位置,比如:通訊錄詳情頁、短信列表、AppStore所用的默認頭像均為“男性”剪影。

而在iOS 13中,上述這些位置的頭像,都變成了去性別特徵的圓形頭像。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

當初我對此的理解是:Apple可以根據賬號中的性別設置,提供男/女兩套頭像,而是採用“無性別頭像”。我想這麼做也許是為了更好的照顧到“跨性別群體”的感受。

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

拷貝:三指捏合,可以快速拷貝;

剪切:連續三指捏合兩次,即可剪切;

粘貼:三指外擴,即可粘貼;

撤銷:三指向左輕掃,即可輕鬆撤銷;

重做:三指向右輕掃,即可重做;

講真,我看一次,就記住瞭如何快速拷貝,其他四個都沒記住......

也許不久之後,國內軟件上也會興起類似的多指交互,也未可知。讓我們拭目以待吧~

默認頭像

在《第一篇》中,我曾提及iOS 13中默認頭像的變化:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在iOS 12系統中,“默認頭像”都具有性別特徵。比如通訊錄的圖標,就是由一男一女的剪影組成。

在其他位置,比如:通訊錄詳情頁、短信列表、AppStore所用的默認頭像均為“男性”剪影。

而在iOS 13中,上述這些位置的頭像,都變成了去性別特徵的圓形頭像。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

當初我對此的理解是:Apple可以根據賬號中的性別設置,提供男/女兩套頭像,而是採用“無性別頭像”。我想這麼做也許是為了更好的照顧到“跨性別群體”的感受。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此前跨性別群體曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等標誌,這些眼下已出現在iOS 12.2的Emoji中。畢竟蘋果的CEO庫克,自己就是一位好同志。

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

拷貝:三指捏合,可以快速拷貝;

剪切:連續三指捏合兩次,即可剪切;

粘貼:三指外擴,即可粘貼;

撤銷:三指向左輕掃,即可輕鬆撤銷;

重做:三指向右輕掃,即可重做;

講真,我看一次,就記住瞭如何快速拷貝,其他四個都沒記住......

也許不久之後,國內軟件上也會興起類似的多指交互,也未可知。讓我們拭目以待吧~

默認頭像

在《第一篇》中,我曾提及iOS 13中默認頭像的變化:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在iOS 12系統中,“默認頭像”都具有性別特徵。比如通訊錄的圖標,就是由一男一女的剪影組成。

在其他位置,比如:通訊錄詳情頁、短信列表、AppStore所用的默認頭像均為“男性”剪影。

而在iOS 13中,上述這些位置的頭像,都變成了去性別特徵的圓形頭像。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

當初我對此的理解是:Apple可以根據賬號中的性別設置,提供男/女兩套頭像,而是採用“無性別頭像”。我想這麼做也許是為了更好的照顧到“跨性別群體”的感受。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此前跨性別群體曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等標誌,這些眼下已出現在iOS 12.2的Emoji中。畢竟蘋果的CEO庫克,自己就是一位好同志。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最近在公司內分享到這段時,同事楊新坤提及一段有關Facebook的設計細節:

在2015年時,Facebook有一段時間也對帶性別剪影的圖標作了調整:原本男性剪影在前的圖標,且“男大女小”的好友圖標,被改成了女性剪影在前,並將男女的大小進行了統一。

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

拷貝:三指捏合,可以快速拷貝;

剪切:連續三指捏合兩次,即可剪切;

粘貼:三指外擴,即可粘貼;

撤銷:三指向左輕掃,即可輕鬆撤銷;

重做:三指向右輕掃,即可重做;

講真,我看一次,就記住瞭如何快速拷貝,其他四個都沒記住......

也許不久之後,國內軟件上也會興起類似的多指交互,也未可知。讓我們拭目以待吧~

默認頭像

在《第一篇》中,我曾提及iOS 13中默認頭像的變化:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在iOS 12系統中,“默認頭像”都具有性別特徵。比如通訊錄的圖標,就是由一男一女的剪影組成。

在其他位置,比如:通訊錄詳情頁、短信列表、AppStore所用的默認頭像均為“男性”剪影。

而在iOS 13中,上述這些位置的頭像,都變成了去性別特徵的圓形頭像。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

當初我對此的理解是:Apple可以根據賬號中的性別設置,提供男/女兩套頭像,而是採用“無性別頭像”。我想這麼做也許是為了更好的照顧到“跨性別群體”的感受。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此前跨性別群體曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等標誌,這些眼下已出現在iOS 12.2的Emoji中。畢竟蘋果的CEO庫克,自己就是一位好同志。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最近在公司內分享到這段時,同事楊新坤提及一段有關Facebook的設計細節:

在2015年時,Facebook有一段時間也對帶性別剪影的圖標作了調整:原本男性剪影在前的圖標,且“男大女小”的好友圖標,被改成了女性剪影在前,並將男女的大小進行了統一。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

而發起這一改動的,正是一位Facebook的女設計師 Caitlin Winner

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

拷貝:三指捏合,可以快速拷貝;

剪切:連續三指捏合兩次,即可剪切;

粘貼:三指外擴,即可粘貼;

撤銷:三指向左輕掃,即可輕鬆撤銷;

重做:三指向右輕掃,即可重做;

講真,我看一次,就記住瞭如何快速拷貝,其他四個都沒記住......

也許不久之後,國內軟件上也會興起類似的多指交互,也未可知。讓我們拭目以待吧~

默認頭像

在《第一篇》中,我曾提及iOS 13中默認頭像的變化:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在iOS 12系統中,“默認頭像”都具有性別特徵。比如通訊錄的圖標,就是由一男一女的剪影組成。

在其他位置,比如:通訊錄詳情頁、短信列表、AppStore所用的默認頭像均為“男性”剪影。

而在iOS 13中,上述這些位置的頭像,都變成了去性別特徵的圓形頭像。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

當初我對此的理解是:Apple可以根據賬號中的性別設置,提供男/女兩套頭像,而是採用“無性別頭像”。我想這麼做也許是為了更好的照顧到“跨性別群體”的感受。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此前跨性別群體曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等標誌,這些眼下已出現在iOS 12.2的Emoji中。畢竟蘋果的CEO庫克,自己就是一位好同志。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最近在公司內分享到這段時,同事楊新坤提及一段有關Facebook的設計細節:

在2015年時,Facebook有一段時間也對帶性別剪影的圖標作了調整:原本男性剪影在前的圖標,且“男大女小”的好友圖標,被改成了女性剪影在前,並將男女的大小進行了統一。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

而發起這一改動的,正是一位Facebook的女設計師 Caitlin Winner

UI設計師來看iOS 13 隱祕的細節:系統組件·下

她曾經就讀於女子學院的女性,這讓她很難忽略圖標中所代表的性別意義,她就想女性必須直處於“男性的陰影”中麼?於是他對Facebook的圖標作了上述的調整。並獲得認可,應用到公司的新產品以及更多的平臺之上。

不過對與這個改動,也有很多人認為Caitlin Winner的做法過於女權主義:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

拷貝:三指捏合,可以快速拷貝;

剪切:連續三指捏合兩次,即可剪切;

粘貼:三指外擴,即可粘貼;

撤銷:三指向左輕掃,即可輕鬆撤銷;

重做:三指向右輕掃,即可重做;

講真,我看一次,就記住瞭如何快速拷貝,其他四個都沒記住......

也許不久之後,國內軟件上也會興起類似的多指交互,也未可知。讓我們拭目以待吧~

默認頭像

在《第一篇》中,我曾提及iOS 13中默認頭像的變化:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在iOS 12系統中,“默認頭像”都具有性別特徵。比如通訊錄的圖標,就是由一男一女的剪影組成。

在其他位置,比如:通訊錄詳情頁、短信列表、AppStore所用的默認頭像均為“男性”剪影。

而在iOS 13中,上述這些位置的頭像,都變成了去性別特徵的圓形頭像。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

當初我對此的理解是:Apple可以根據賬號中的性別設置,提供男/女兩套頭像,而是採用“無性別頭像”。我想這麼做也許是為了更好的照顧到“跨性別群體”的感受。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此前跨性別群體曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等標誌,這些眼下已出現在iOS 12.2的Emoji中。畢竟蘋果的CEO庫克,自己就是一位好同志。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最近在公司內分享到這段時,同事楊新坤提及一段有關Facebook的設計細節:

在2015年時,Facebook有一段時間也對帶性別剪影的圖標作了調整:原本男性剪影在前的圖標,且“男大女小”的好友圖標,被改成了女性剪影在前,並將男女的大小進行了統一。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

而發起這一改動的,正是一位Facebook的女設計師 Caitlin Winner

UI設計師來看iOS 13 隱祕的細節:系統組件·下

她曾經就讀於女子學院的女性,這讓她很難忽略圖標中所代表的性別意義,她就想女性必須直處於“男性的陰影”中麼?於是他對Facebook的圖標作了上述的調整。並獲得認可,應用到公司的新產品以及更多的平臺之上。

不過對與這個改動,也有很多人認為Caitlin Winner的做法過於女權主義:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

目前,Facebook當前的版本,也採用了去性別化的圖標的設計:

"

本次iOS 13全局細節調整較多,我將之分為兩部分進行闡述:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

第一部分 - 全局組件:Switch、分段控件、Sheet彈窗、Context Menu等;(第一篇、第四篇)

第二部分 - 原生App:相機、Safari、短息、地圖等。(第二篇、第三篇)

本文繼續講述全局組件。

系統設置

以下是“設置”中相關模塊的設計變化:

1.屏幕時間

UI設計師來看iOS 13 隱祕的細節:系統組件·下

1.1 “今天、過去7天”兩處文案變成更加常見的“每天、每週”。減少文案帶來的歧義,比如過去我還和朋友討論,iOS 12中的“過去7天”是否包含“今天”...

1.2 新版iOS調整了“每天”、“每週”的排列順序。難道是使用“每週”的用戶佔比最大?

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去優先展示“每天”,而在iOS 13中,優先展示“每週”。

1.3 還有一個細節,新版屏幕時間支持左右切換時間:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

如上圖所示:頁面上滑後,出現左右切換的浮層。

2. 圖標去投影

UI設計師來看iOS 13 隱祕的細節:系統組件·下

iOS 13控制中心去掉了“刪除”和“添加”兩處圖標的底部投影。圖形中間的加號、減號也由直角變圓角。

3.壁紙設置

過去壁紙設計界面底部,採用了吸底的矩形大按鈕。如下圖:

在iOS 13中變成了非吸底的“膠囊按鈕”。這樣的設計更加適合自帶圓角的全面屏,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此外,像“靜止”、“透視”這類原本清晰的文字按鈕,變成抽象的圖標。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在我看來,新圖標的含義著實不好理解。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

誰能想到這個類似“放大”的小圖標居然表示透視?

4.視圖

操作路徑:設置→顯示與亮度→視圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

通過切換不同的視圖,可以調整手機分辨率(截屏可獲得不同分辨率的尺寸)。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我們可以把iOS中的視圖切換,看成是電腦端的分辨率調整。

分辨率低,則視覺層面圖像變大、分辨率高,則視覺層面圖像變小。

不過在此前版這個頁面設計的不是很好,用戶需要切換頁面,並細心對比不同頁面中的靜態圖片,才能察覺出兩種視圖模式下手機界面的差別。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

我曾問過好幾個朋友,他們都不知道有這個功能。

Apple在iOS 13中對這個頁面做了重新設計:將兩種模式放在同一頁面中進行展示,並增加動效展示。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新設計,有助於用戶更直觀的瞭解兩種視圖下手機界面的差別,從而選擇自己需要的視圖。

PS:下面附上各機型,標準視圖和放大視圖對應的分辨率:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

控制中心

UI設計師來看iOS 13 隱祕的細節:系統組件·下

等了7年,iPhone終於可以和Android手機一樣,通過長按底部控制中心的Wifi和藍牙,進行快速鏈接或跳轉到對應設置頁。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

底部彈窗

此次系統彈窗可謂是大變樣,下面逐一說明:

1.佈局變化

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最明顯的一個變化是,Apple在彈窗上放棄了使用多年的十字交互,改用列表進行展示。

我想這麼做主要是為了便於信息的直接展示。讓功能更好的觸達用戶。併為日後系統功能拓展做準備。

簡單來說,TV端很早就開始使用十字交互,旦如今越來越多的TV端放棄了十字交互,除了頂部分類導航外,都在儘可能減少橫滑,改成清一色的上下滑動。其中最主要的原因就是橫向的信息觸達率太低,而豎向的瀑布流便於用戶查看信息。

試想一下,如果你想查看AppStore榜單的前十名,你會選擇橫滑?還是點擊全部進入列表模式進行查看?

總之我都是進去列表模式進行查看。

所以在我看來,變成列表不僅更有助於信息展示(結合彈窗上拉變大),也便於Apple日後在彈窗中推廣新功能。

不過可惜的是,Apple在取消十字交互的同時,過去長按調整按鈕位置的功能也被取消了,如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

好遺憾......目前,iOS 13只能通過”更多“和”編輯操作“調整按鈕位置。

2.文案調整

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版中的”更多“按鈕,在新版中改為更加具體的”編輯操作“。

過去光看”更多“兩個字,以為點進去是更多功能入口,結果卻是進入了一個編輯操作頁面。真是一臉懵,嚇得我趕緊關閉返回上一頁。

雖然底部的更多發生了變化。但橫滑右側入口依舊是”更多“。

3.AirDorp摺疊

UI設計師來看iOS 13 隱祕的細節:系統組件·下

過去一打開彈窗,彈窗頂部AirDrop區域佔據了1/3彈窗的高度。點擊使用的話,自己想要隔空投送的設備一開始未必會加載出來,等後面加載出來,又未必出現在開始或結尾的位置。需要一直左右滑動查看等待需要連接的設備是否出現。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

新版則將Airdrop變成一個普通的圖標入口,在用戶要使這個功能時,在調起一個彈窗頁面,專門展示所掃描到設備。這無疑解決了上述提到查看設備的問題,大大提高了操作效率。

4.左上角增加APP縮略圖

UI設計師來看iOS 13 隱祕的細節:系統組件·下

彈窗上滑後,以標題欄的形式常駐。對此,我的理解是,由於新版彈窗支持上滑,這樣一來多個APP都可能處於全屏彈窗的界面。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此時如果缺少頂部的APP標識,那麼當用戶在多個APP中調起彈窗時,很難分辨當前所處的軟件。

5.底部取消按鈕

UI設計師來看iOS 13 隱祕的細節:系統組件·下

舊版彈窗底部有一個明顯的取消按鈕,而新版彈窗的因為採用Sheet彈窗*的形式,所以關閉按鈕轉移到了右上角。另外,新版彈窗還支持下拉關閉的操作,這樣一來也解決了關閉按鈕在頂部不易點擊的問題。

Tips:Sheet彈窗,我在《iOS 13:第一篇》中有做專門介紹。

三指交互

最後再說一下三指交互

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在《第一篇》中提到,iOS 13中新增了一個三指菜單。只要用3個手指點擊屏幕,就可以呼出一個全新的菜單。用來完成:撤銷、剪切、複製、粘貼、重做這五個操作。

其實,用戶可以不呼出菜單就完成上述五種操作,分別是:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

拷貝:三指捏合,可以快速拷貝;

剪切:連續三指捏合兩次,即可剪切;

粘貼:三指外擴,即可粘貼;

撤銷:三指向左輕掃,即可輕鬆撤銷;

重做:三指向右輕掃,即可重做;

講真,我看一次,就記住瞭如何快速拷貝,其他四個都沒記住......

也許不久之後,國內軟件上也會興起類似的多指交互,也未可知。讓我們拭目以待吧~

默認頭像

在《第一篇》中,我曾提及iOS 13中默認頭像的變化:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

在iOS 12系統中,“默認頭像”都具有性別特徵。比如通訊錄的圖標,就是由一男一女的剪影組成。

在其他位置,比如:通訊錄詳情頁、短信列表、AppStore所用的默認頭像均為“男性”剪影。

而在iOS 13中,上述這些位置的頭像,都變成了去性別特徵的圓形頭像。如下圖:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

當初我對此的理解是:Apple可以根據賬號中的性別設置,提供男/女兩套頭像,而是採用“無性別頭像”。我想這麼做也許是為了更好的照顧到“跨性別群體”的感受。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

此前跨性別群體曾要求Apple在Emoji表情中增加“特殊人群”、“特殊家庭”和“彩虹旗”等標誌,這些眼下已出現在iOS 12.2的Emoji中。畢竟蘋果的CEO庫克,自己就是一位好同志。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

最近在公司內分享到這段時,同事楊新坤提及一段有關Facebook的設計細節:

在2015年時,Facebook有一段時間也對帶性別剪影的圖標作了調整:原本男性剪影在前的圖標,且“男大女小”的好友圖標,被改成了女性剪影在前,並將男女的大小進行了統一。

UI設計師來看iOS 13 隱祕的細節:系統組件·下

而發起這一改動的,正是一位Facebook的女設計師 Caitlin Winner

UI設計師來看iOS 13 隱祕的細節:系統組件·下

她曾經就讀於女子學院的女性,這讓她很難忽略圖標中所代表的性別意義,她就想女性必須直處於“男性的陰影”中麼?於是他對Facebook的圖標作了上述的調整。並獲得認可,應用到公司的新產品以及更多的平臺之上。

不過對與這個改動,也有很多人認為Caitlin Winner的做法過於女權主義:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

目前,Facebook當前的版本,也採用了去性別化的圖標的設計:

UI設計師來看iOS 13 隱祕的細節:系統組件·下

一勞永逸的解決了性別誰佔主導的爭議。如今蘋果也採用了相同的做法,弱化了APP中的性別特徵。

在這裡我相信有很多想要學習UI設計的朋友,我是一名從事了多年UI設計私人定製課程,今年年初我花了一個月整理了一份最適合2019年學習的學習乾貨及教程,從最基礎到,各種框架都有整理,送給每一位UI設計取的可以關注我並在後臺私信我:學習,即可免費獲取

"

相關推薦

推薦中...