雖然 iOS 11 設(shè)計(jì)語言上沒有做全新的突破,但用戶體驗(yàn)方面還是下了不少功夫,視覺及交互體驗(yàn)都或大或小有了各種變化......

雖然今年的 iOS 11 設(shè)計(jì)語言上沒有做全新的突破,但用戶體驗(yàn)方面還是下了不少功夫,視覺及交互體驗(yàn)都或大或小有了各種變化。
WWDC 大會上庫克只是做了部分介紹,為了讓大家在正式版來臨時(shí)能有更好的認(rèn)知過度,我從開發(fā)者 Beta1 版本中找出一些新舊系統(tǒng)的差別提前 Share 給大家。
1、App Store
由于我平時(shí)比較喜歡下載各種應(yīng)用,所以更新完系統(tǒng)第一時(shí)間仔細(xì)體驗(yàn)了新版 App Store。
App Store 這個(gè)為蘋果巨型 “搖錢樹” 終于迎來了一次改頭換面的大改版( 歷史上 App Store 雖然也有過幾次改版不過都集中小修小補(bǔ)方面);
新版定位是“重新塑造”,摒棄了沿用多年的各類應(yīng)用 Icon 集合方式,更加突出每個(gè)應(yīng)用的信息展示,通過各種有價(jià)值信息外顯增強(qiáng)對用戶的吸引和關(guān)注;
- 卡片樣式的大量應(yīng)用:無論是頁面布局、還是彈出層形式(iPad版),卡片都在新版 App Store 樣式布局上得到了大量應(yīng)用。 卡片設(shè)計(jì)的優(yōu)勢在 Windows Metro & Android Material Design 中早已展示的淋淋盡致。 信息展示更加聚合,在保證設(shè)計(jì)風(fēng)格一致的前提下,更適用于不用尺寸屏幕乃至跨端的靈活布局。 iOS 終于也開始接棒 “卡片設(shè)計(jì)”;
- 大字號、大比例組件、大間距的留白應(yīng)用:可以很好的突出標(biāo)題識別性以及頁面內(nèi)信息層次差異。如搜索頁面、每個(gè)頁面的主標(biāo)題部分等; iOS10去年引入的這種大字號UI形式這次得到了更大規(guī)模的推廣,系統(tǒng)通訊錄、系統(tǒng)設(shè)置等更多系統(tǒng)級場景都在使用,至于App內(nèi)是否使用,還是要看各款應(yīng)用的自身?xiàng)l件而定。
- 圖標(biāo)變化: 轉(zhuǎn)角圓潤的實(shí)心 Icon 替換了扁平時(shí)代的線性 Icon。雖然線型圖標(biāo)簡潔干凈,但是在復(fù)雜信息的頁面中會由于過于單薄,從而復(fù)雜場景內(nèi)又降低了圖標(biāo)信息識別率;
- 細(xì)心的朋友會發(fā)現(xiàn),App Store 的主導(dǎo)航也發(fā)生了變化,新版主導(dǎo)航依次是 “ 今天、游戲、App、更新、搜索”。 首頁第一個(gè)大標(biāo)題是 "今天"! 沒錯(cuò),它就是會每天推送不同的應(yīng)用,增強(qiáng)信息時(shí)效性的同時(shí),把首頁各種推薦的優(yōu)秀 App 變成瀑布流形式。另外根據(jù)蘋果的調(diào)性,App Store 的推薦邏輯極有可能是根據(jù)用戶搜索及下載習(xí)慣實(shí)行 “千人千面” 形式;


- 首頁推薦 App 會配有單獨(dú)(軟文)運(yùn)營的宣導(dǎo)頁面,加強(qiáng)了運(yùn)營策略; 舊版首頁推薦 App 時(shí)進(jìn)入該 App 產(chǎn)品單頁;
- 首頁推薦 App 的宣傳頁面中視覺運(yùn)營感被很好強(qiáng)化,“美圖” 配 “專業(yè)文案” 的宣導(dǎo)作用會在用戶的初次接觸中產(chǎn)生了有很好的感知作用; 無線運(yùn)營單頁設(shè)計(jì)時(shí)可以分析借鑒;

- 單個(gè) App 介紹頁面的布局也是全新的布局,不一一解釋,但整體感覺新版的布局形式頁面信息清爽不少,同時(shí)也有些便捷操作的交互改動(dòng)??偨Y(jié)一句話就是“信息結(jié)構(gòu)清晰和可讀性加強(qiáng)”,等正式版來臨時(shí)大家親自去體驗(yàn)吧...

2、 底部控制中心
“控制中心”是今年 iOS 系統(tǒng)變化最大的地方之一。與老版本的“完整操控板”相比,新版的控制中心交互上變成靈活組合模式,如果你覺得它的樣式不夠美觀,那就關(guān)注它的實(shí)用性吧...
- 新版控制中心采用小卡片組合形式,每個(gè)功能以一個(gè)小卡片形式存在,每幾個(gè)相近功能又組成了一個(gè)功能卡片組。 并支持在系統(tǒng)設(shè)置里自定義各種系統(tǒng)App的控制中心功能布點(diǎn)(目前還不支持第三方應(yīng)用,估計(jì)接口隨后會開放),用戶可以根據(jù)自己習(xí)慣去布局。 設(shè)置權(quán)限越來越多的開放給用戶,這是一個(gè)明智的選擇。畢竟每個(gè)人的認(rèn)知和使用習(xí)慣不同,過于嚴(yán)格的統(tǒng)一,反倒是給用戶在做強(qiáng)加意識轉(zhuǎn)換,產(chǎn)品設(shè)計(jì)依然如此,讓用戶遵循自己的習(xí)慣和意愿去進(jìn)行流暢舒服的操作,是產(chǎn)品設(shè)計(jì)師需要多投入精力去思考的方向;
- 信息展示聚合: 把 iOS 10 中的兩頁到三頁的信息集成到一個(gè)頁面內(nèi)顯示,減少了隱藏式頁面的左右滑動(dòng),從展示上看是提高了信息曝光度,但相應(yīng)的代價(jià)就是把部分功能隱藏起來,需要時(shí)在呼出,所以3D Touch 的作用就被顯現(xiàn)出來;
- 幾乎每個(gè)功能卡片的擴(kuò)展操作都需要使用 3D Touch 呼出(如果沒有 3D Touch 的低版本 iPhone 是長按操作)。
- 操控動(dòng)效非常流暢;仔細(xì)觀察音量調(diào)節(jié)到低或者靜音時(shí),icon也會隨之變化,對于細(xì)節(jié)控來說這個(gè)體驗(yàn)就兩個(gè)字“舒服”;
- 手電筒多了不同亮度的調(diào)節(jié)等等;

3、3D Touch 功能
自從2015年 iOS 9 中加入3D Touch 功能,使用頻率多數(shù)集中桌面 App 入口位置,方便快速打開應(yīng)用內(nèi)的某個(gè)功能,減少App內(nèi)的操作步驟。
iOS 11 蘋果似乎在強(qiáng)烈推薦使用 3D Touch 功能。 比如新版控制中心,幾乎每個(gè)操作都有相應(yīng)的 3D Touch 打開擴(kuò)展操作,估計(jì)是希望培養(yǎng)用戶的3D Touch操作習(xí)慣,為后續(xù)更多場景的應(yīng)用擴(kuò)展做好鋪墊。
- 3D Touch 直觀理解可以看成是PC的鼠標(biāo)右鍵: 一方面在提高效率方面,滿足繞開App內(nèi)復(fù)雜鏈路操作,快速鎖定實(shí)用功能; 另一方面在推廣使用場景,培養(yǎng)用戶習(xí)慣。如控制中心改版這種對大量信息做整合處理時(shí)(勢必要隱藏一些類似相關(guān)功能和操作),著重培養(yǎng)用戶 3D Touch 使用習(xí)慣。讓用戶習(xí)慣性記憶加強(qiáng)理解。 它是簡化布局相互作用的功能。同時(shí)我們也期待 3D Touch 這種移動(dòng)交互行為的后續(xù)更多發(fā)力點(diǎn);
4、UI小調(diào)整
- 線條的使用逐漸減少,改為平面實(shí)心,典型案例如:鎖屏數(shù)字鍵、打電話按鍵與計(jì)算器。

- 圖標(biāo)由線條改為平面,轉(zhuǎn)角更加圓潤( Icon線條變粗。原因上面講過,過于纖細(xì)的線條不適用于大屏幕顯示時(shí)的視覺捕捉,所以加粗是增強(qiáng)了線條 icon 的識別性);

5、iPad Dock Bar
雖然近兩年科技媒體統(tǒng)計(jì)的 iPad 銷量一直沒有突破,甚至有些下滑趨勢。但是不可否認(rèn)iPad這種大屏幕移動(dòng)設(shè)備越來越多的影響著用戶的生活乃至工作;
在移動(dòng)辦公領(lǐng)域 iPad 的設(shè)備特性也有著它的先天優(yōu)勢,只是早期蘋果著重發(fā)展 iPad 的娛樂用途。 今年庫克終于開始重視 iPad 的辦公需求了,底部 Dock bar 及多窗口的改造就很好的為辦公操作需求做出了實(shí)用的功能擴(kuò)展。
新版 Doc Bar 使用更加靈活機(jī)動(dòng)。咋一看它有些像 Mac OS Dock bar,功能上也近乎相似,可以與桌面圖標(biāo)實(shí)現(xiàn)拖拽加入,可以與桌面使用需求配合方便的隱藏、呼出,區(qū)別在于它不能像 Mac中那樣無限的往里拖拽應(yīng)用,好像最多可以支持16個(gè),因?yàn)镸ac有鼠標(biāo)操作,可以把鎖定區(qū)域控制在非常小的范圍,而iPad依然是手指操作為主,所以設(shè)定填入應(yīng)用最大數(shù),即控制了每個(gè)App icon的最小尺寸,也是方便手勢操作。
Dock bar 的使用非常靈活,也可以在使用各種App時(shí)從底部快速呼出。方便快捷切換 App,不用再點(diǎn)擊Home 物理按鈕。同時(shí)這一屬性也與多任務(wù)窗口操作實(shí)現(xiàn)了交互形式上的靈活互動(dòng);

6、iPad 多任務(wù)窗口切換 + Drag and Drop
iPad 與手機(jī)相比,有著屏幕尺寸上的大屏優(yōu)勢。蘋果在上個(gè)版本也開始嘗試分屏操作,可以同時(shí)兼顧兩個(gè)App間的使用,充分利用了大屏優(yōu)勢,改善了移動(dòng)設(shè)備上的應(yīng)用單一注意力問題。
而這次的懸浮窗口 配合 Drag and Drop 更是把不同 App 的互動(dòng)體驗(yàn)又上升了一個(gè)臺階。
- 多窗口操作即可以把某個(gè)應(yīng)用拖拽成浮動(dòng)層,在iPad桌面上方便靈活的拖動(dòng),甚至隱藏到屏幕外側(cè)邊緣,向內(nèi)手勢滑動(dòng)隨時(shí)拉入;
- 多任務(wù)窗口使得兩個(gè)App的互動(dòng)操作更加便利。 比如打開圖片庫和記事本,可以快速把圖片通過拖拽插入記事本(支持圖片多選操作); 同理也可以把 Safari 網(wǎng)頁上的圖片拖拽到郵件 App 中; 不過目前僅支持系統(tǒng)級應(yīng)用,其他第三方 App 估計(jì)需要調(diào)整代碼對接該功能的SDK,讓我們一起期待更多 App 加入新玩法;
- 拖拽操作可以支持 圖片、文字、鏈接 ...

7、其他
- 文件管理程序:基于 iCloud 云存儲,用戶可以方便的在 iPhone、iPad、MacBook 等蘋果設(shè)備間的實(shí)現(xiàn)文件同步。以往 iCloud 服務(wù)需要通過網(wǎng)頁登錄操作,不得不說這個(gè)新程序?yàn)槲募目缭O(shè)備轉(zhuǎn)移提供了不少便利;
- Live Photo:可以像視頻一樣可以選取每一幀畫面并設(shè)置為該動(dòng)圖的默認(rèn)頭圖,支持可以關(guān)閉 Live Photo 內(nèi)的聲音;
- 新增錄屏功能:這個(gè)對于有移動(dòng)設(shè)備錄屏需求的人來說是個(gè)不小的驚喜,以往這類操作通常要下載對應(yīng)的錄屏APP,或錄制質(zhì)量不好,或是收費(fèi)軟件;這個(gè)系統(tǒng)級功能的上線,勢必會讓那些簡單的錄屏App“壽終正寢”了...
- 機(jī)器鎖屏狀態(tài)時(shí)的消息提醒,可以通過向上手勢滑動(dòng)查看更多歷史消息提醒(舊版查看歷史消息,需要解鎖進(jìn)入從頂部下滑翻查);
- 刪除操作:手勢左滑刪除操作步驟由舊版需要點(diǎn)擊后二次操作,變?yōu)橐徊讲僮鳎?nbsp;向左滑動(dòng)超過半屏寬度則刪除成功,這個(gè)交互形式是符合用戶流暢操作的心智模型;
- 照片中強(qiáng)化了修改操作,把 “標(biāo)記” 功能添加了不同的筆觸,同時(shí)這些操作的界面層次由舊版的隱藏二級提升到頁面第一層;
- 截屏操作:截屏后會變成縮略圖停留在屏幕左下方幾秒,用戶可以點(diǎn)擊縮略圖展開大圖進(jìn)行圖片編輯。 不得不提一句:新版截屏動(dòng)效非常流暢!非常流暢!非常流暢!
- App Store APP產(chǎn)品單頁如果有視頻介紹,該視頻變?yōu)樽詣?dòng)播放(WIFI前提);

目前還是 iOS 11 Beta1 版本,體驗(yàn)可能會有誤差,也有遺漏的地方,更多好玩、實(shí)用操作還有待于深入挖掘。
BTW,目前 Beta1 更新后手機(jī)比較卡頓... /(ㄒoㄒ)/~~
大牛,別默默的看了,快登錄幫我點(diǎn)評一下吧!:)
登錄 立即注冊