一本到中文字幕高清不卡在线,亚洲国产精品尤物yw在线观看,欧美日本在线,亚韩无码一区二区在线视频,精品72久久久久久久中文字幕,国产一区二区三区久久

歡迎來到海淘科技官網 官方微信 官方微博 平面活動官網
微信

網絡傳播媒介服務提供商

熱線電話

021-62677988

海淘新聞
首頁 > 新聞列表 > IOS 10與IOS 11的UI對比分析報告

IOS 10與IOS 11的UI對比分析報告

發布時間: 2017-06-14 10:23

WWDC 2017 Keynote 結束沒幾天,相信很多對 UI 設計有興趣的朋友應該很好奇 iOS 11 詳細的設計變動有哪些,但是自己的手機又不方便裝開發者版本,所以就讓我替各位踩雷吧。

兩個版本分別是 iOS 10.3,以及 iOS 11 beta 1,而由于后者尚未正式推出,因此某些設計有問題的地方,Apple 可能會在后續版本變動或修正,不過整體來說應該不會有大改變了。

本篇文章會從三個大方向來觀察新設計,分別是:

功能與操作體驗

設計語匯

產品策略

并再細分成幾個小主題,而剩下較零碎的比對就列在后面;太細微的變化我不會列出,畢竟要截出大量的相同畫面真的很費工夫。

對了,我只會列出不同的地方,并且推測其設計意圖,不會有太多評論,我想這留給各位自行思考比較有趣。

1. 功能與操作體驗

大幅簡化的主畫面結構

從 iOS 7 到 iOS 10 以來,隨著功能的增加,鎖定畫面、主畫面、通知中心這三者的結構越來越復雜,其中的操作邏輯和視覺線索就產生了明顯的矛盾,例如下面這是 iOS 10 的主畫面結構:


以上的畫面有些非常相似,但出現的時機和細部功能又不太相同,而這點在 iOS 11 獲得了明顯改善,可以看到操作邏輯的結構變得簡單多了:


這設計一定是有變得更好、更合理,但我不確定這樣大幅改變對于使用者的習慣來說是不是好事。

以下的左右比較圖都是「左舊右新」。

解鎖畫面


解鎖的數字鍵 base 變成實心,除了配合新的設計語言外(后面會詳細觀察),推測是避免框線和細字的搭配會干擾閱讀。

主畫面


App 名稱的字變粗,改進閱讀體驗。

Dock 的 App 名稱不見,邏輯應該是:「會放 Dock 代表使用者自己很清楚那是什么」;且經過研究,我們記住 UI 的方式,是透過位置,而不是文字內容。

控制中心


多頁變成單頁,可自訂功能及排列


可使用 3D Touch 來展開詳細設定的按鈕更多了。

使用統一的矩形視覺元素來變化出不同的設定,這是我滿喜歡的部份,如下面這些:


橫向 Tab bar 讓出更多空間

橫向的 Tab bar 排列方式有改變(上新下舊),爭取更多垂直空間。這個設計在 iOS 10 的 iPad 版本「音樂」App 就有了,只是應用到了 iPhone 上。

用字重來改善可讀性


把過去字太細、太小的地方集體改進,上圖以 Voice Memo 為例。

鍵盤設計改變


△ 數字鍵盤


△ 方便單手打字的鍵盤

數字鍵的按鈕和文字鍵盤樣式統一

新增單手打字模式

2. 設計語匯

大量應用不同的層次區隔手法


△ App Store 的新設計

「層次(Hierarchy)」是 UI 很重要的元素,讓重要的、不重要的東西區隔開來,引導使用者的閱讀動線。區分層次的手法有很多,如大小、粗細、顏色、間隔、形狀、排列方式??等等。

過去 iOS 較常使用分隔線和文字大小來做層次;而自從新版 Apple Music App 推出后,開始頻繁使用新手法,如大面積陰影、字重等,如上圖的 App Store 新設計。

順帶一提,我不喜歡稱這類手法叫「Card UI」,我覺得那就如同把一堆明顯不同的設計語言全都冠上 Flat Design 一樣,是跟風且不精確的形容(唯一好處就是對外行解釋比較方便),矩形+陰影到哪里都能見到,過去蘋果在 Passbook 和提醒事項 App 就有這類設計了。

細節風格更新


△ App 介紹頁


△ 計算機

邊角更圓潤

空心變實心(色塊感變重)

空心變實心的特點剛剛在解鎖畫面有出現過,而上圖的計算機讓我想到初代 iPhone OS 向經典致敬(?)的設計。


全新的 Navigation Bar

去年(2016)在新版 Apple Music 讓大家耳目一新的大字 Nav Bar,蘋果在這次 iOS 11 也大量使用在各個 App 里(見下圖);另外也終于開放 API 讓大家使用了,以后設計師們可以放心做這類大標題,不必擔心造成開發者的麻煩:


就跟以前 iOS 7 大量使用高斯模糊,結果過整整一年才開放 Blur API 一樣,蘋果真的很小氣。

圖像(Graphic)與符號


App Icons

計算機的新 icon 配重用色皆恰到好處,我滿喜歡的。

iTunes Store icon 整個換掉,可能是因為音樂、電影都具備「明星」這個要素。

App Store 也跟著拿掉外圍圓框。

日歷字變粗,跟隨整體設計調性。

iCloud Drive 變成 Files,這個是產品性質和策略變更。


System Icons

Status Bar 訊號強度從 ????? 改回階梯式。

電量 icon 的線面比例變得更均衡一些。

Tab bar icons 從空心/實心兩態變成全實心粗線條設計,是配合整體設計調性,但對色盲有點小不利。

想一想:為什么「Games」是用火箭,而不是用游戲手把來做 icon?


Siri

從左右分列的對話式變成全靠左設計,意圖不明??

Siri icon 重新設計,我覺得挺有「細胞、生命體、靈魂」的概念,個人認為是非常優秀的設計。

順便看一下 Siri 的變臉史,Alan Dye 真是個善變的男人:


△ 你這樣一直改一直改一直改

3. 產品設計策略

從 Apple 把哪些部分變明顯、哪些部分隱藏,就可以知道哪些地方是最賺錢、最有發展力的。

App Store


主頁改成「Today」,與消費者的對話變得更重質一點,因為現在使用者心里的聲音已經不是早期的「有沒有得下載?」,而是「我為什么要下載?」了。


至于以前的「整個 App Store」,現在變成只有一個 tab 的份量,在導航系統里整整下降一級。

以下是 App Store 的新舊設計細節比較:


△ 排行榜


△ 分類


△ 搜尋

檔案 App


另一個產品策略改變是,iOS 終于有可見的檔案系統了(其實嚴格來說還稱不上)

其他設計比較

接下來的這些畫面,就幾乎就是以上分析的組合應用,玩一下大家來找碴,順便欣賞蘋果對細節的用心吧!

Widget 管理畫面

調整間隔和字重,Nav bar buttons 的 padding-x 內縮少許。


照片


日歷


這個畫面左上角的「Jun 2017」變成「2017」,原本以為是 feature,因為把 nav button 當成 nav title 用不太合理;但經網友指出,這樣一來會變成沒有顯示當前月份,易造成混淆。我覺得挺有道理的,蘋果應該不會為了改善一個缺點而制造更多缺陷,因此想一想是 bug 的可能性較大。

Podcasts

讓視覺和操作體驗與 Apple Music 統一,等好久了。


家庭


天氣


Wallet


電話


音樂


主頁幾乎沒變。


我好奇到底有誰會用那兩顆按鈕,可能我音樂太多了。


△ 播放器本身幾乎沒變。

Safari


URL Bar 變高,滿奇怪的決定;另外,網頁滑動的摩擦力明顯降低,應該是考量到現在響應式的超長網頁越來越多。


Tabs 加上圓角


△ 閱讀模式的 typography 有改善

相機


右下角的 icon 參考了 MacBook Pro 的 Touch bar 設計規范,變成雙 opacity 的設計


我覺得套用濾鏡的 UI 原本做得比較好。

FaceTime


△ Status bar 黑色我猜應該是 bug。

Find My iPhone


郵件


以上就是 iOS 11 幾個比較明顯的設計變更,至于 iPad 的部份也差不多,比較明顯的不同是 iPad + iOS 11 更強化了「拖/放」與「分割畫面」的功能,那些 Apple 官網都有介紹了。

除了玩大家來找碴以外,其實 Apple 的設計改版一向都是非常難得的學習和思考機會,因為這「幾乎」等同是給你最佳解,你只要思考「為什么這可能是最佳解」就好了,建議剛入門的朋友利用這機會多看多想。

以上就是上海網站設計提供的內容,如果想要了解關于教育類網頁設計案例企業微博營銷注意事項,可直接點擊查看

相關文章:

版權所有 @ 2007-2023上海海淘信息科技有限公司 滬ICP備11050025號-4