據(jù)說 iOS 11 的界面變得又大又粗又圓丙号!

昨天終于可以更新 iOS 11 啦,之前在發(fā)布會結束后已經(jīng)有了很多對 iOS 11 全面的分析颂跨,作為一個小小的UI設計師敢伸,我僅能盡一下綿薄之力,學(tu)習(cao)一下 iOS 11 在界面上都有些什么改變恒削。

更大

“設置”界面對比

最明顯的對比就是 Nav Bar 高度的增加和標題字號的加大:Nav Bar 以前的高度是 64pt池颈,iOS 11 變?yōu)?116pt尾序,標題的字號由 16pt 變?yōu)?32pt,增加了一倍躯砰;而單行列表上的文字字號有所減小每币。

這樣帶來的直觀感受就是,留白增多琢歇、字體醒目兰怠、對比明顯,瀏覽信息的過程中更加舒適李茫。

“App Store”界面對比

App Store 也有了全新的結構和布局揭保,確實比老版好看很多。

iOS 11 版本的界面魄宏,一改簡單的列表式布局秸侣,采用卡片式布局突出放大首推 app,往下再是 app 列表宠互。并且簡化了信息味榛,增加了分類,結構一目了然予跌。

“App Store”界面對比

搜索界面能最好地體現(xiàn) iOS 11 界面字體變大的特點搏色,相應的行間距也變大。不僅如此券册,字體也有明顯的加粗频轿。記得 iOS 10 更新的時候,就因字體加粗而備受吐槽汁掠,現(xiàn)在又變粗啦略吨!不過真心覺得標題性質(zhì)的文字加粗可以使層次更加分明。

更粗

“撥號”界面對比

以前纖細的字體配上精致的圓框看起來很含蓄高端考阱。而 iOS 11 給我的感覺是為了增大對比翠忠,采用了一些簡單粗暴的方法,數(shù)字的加粗顯得顏色更深乞榨,圓框也是直接改成了有填充色的圓形秽之,背景色為了和數(shù)字按鈕拉開差距,直接填充成白色(#ffffff)吃既。

“解鎖”界面對比

字體變得更粗考榨,解鎖界面和撥號界面確實是承擔了大多數(shù)的槽點。

底部欄icon對比

另一個意義上的“變粗”鹦倚,就是 Apple Icons 的調(diào)整河质,全部改成了正形圖標,正形圖標相對與負形圖標來說,面積占比大掀鹅,視覺上顯得“更粗”散休。

另外,icon 也都從以前的尖角改成了圓角乐尊,變得更“圓”戚丸。

更圓

“計算器界面”對比

是時候拿出這張飽受爭議的計算器界面啦,所有的按鈕都變成了圓形扔嵌。一開始表示好不能接受限府,畢竟小時候經(jīng)常用的計算器按鈕都不是純圓形的啊~~很不符合用戶預期。

學生時代的回憶痢缎,哈哈

但是轉(zhuǎn)念一想胁勺,蘋果為了保證視覺的統(tǒng)一性,也不得不把計算器的按鈕都改成圓形的牺弄,因為其他地方都改了耙黾浮!

“App Store”界面對比

打開 App Store 势告,映入眼簾的就是圓角半徑14pt 的卡片~

“App Store”界面對比

按鈕的圓角變得更圓~仔細對比一下,能找到很多為了保持視覺統(tǒng)一性所做出的細節(jié)調(diào)整抚恒。

另外咱台,很多交互細節(jié)也做了微調(diào)整,用起來更加流暢俭驮。比如說左滑刪除這個功能回溺,以前的左滑刪除有兩個手勢:手指左滑+點擊刪除按鈕;現(xiàn)在優(yōu)化成了一個手勢混萝,一直往左滑即可實現(xiàn)刪除遗遵。

左滑刪除

設計的趨勢變得真是很快,記得去年這個時候還是按照大標題(18~20pt),正文(12~14pt)這樣的規(guī)范來做設計的逸嘀,但是短短幾個月就刮起了大字體風车要,標題 32pt 以上都不嫌大!

畢竟每一個設計趨勢都是為了解決具體的問題而存在的崭倘,經(jīng)過細膩處理的界面才能具有更好的使用體驗翼岁、閱讀體驗,而這些細節(jié)的處理真心值得好好學習司光。

一些力所能及的分析琅坡,學識尚淺,請多指教~

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末残家,一起剝皮案震驚了整個濱河市榆俺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖茴晋,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件迂求,死亡現(xiàn)場離奇詭異,居然都是意外死亡晃跺,警方通過查閱死者的電腦和手機揩局,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來掀虎,“玉大人凌盯,你說我怎么就攤上這事∨胗瘢” “怎么了驰怎?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長二打。 經(jīng)常有香客問我县忌,道長,這世上最難降的妖魔是什么继效? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任症杏,我火速辦了婚禮,結果婚禮上瑞信,老公的妹妹穿的比我還像新娘厉颤。我一直安慰自己,他們只是感情好凡简,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布逼友。 她就那樣靜靜地躺著,像睡著了一般秤涩。 火紅的嫁衣襯著肌膚如雪帜乞。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天筐眷,我揣著相機與錄音黎烈,去河邊找鬼。 笑死浊竟,一個胖子當著我的面吹牛怨喘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播振定,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼必怜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了后频?” 一聲冷哼從身側響起梳庆,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤暖途,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后膏执,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體驻售,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年更米,在試婚紗的時候發(fā)現(xiàn)自己被綠了欺栗。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡征峦,死狀恐怖迟几,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情栏笆,我是刑警寧澤类腮,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站蛉加,受9級特大地震影響蚜枢,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜针饥,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一厂抽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧打厘,春花似錦修肠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽饲化。三九已至莽鸭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吃靠,已是汗流浹背硫眨。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留巢块,地道東北人礁阁。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像族奢,于是被迫代替她去往敵國和親姥闭。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫越走、插件棚品、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,102評論 4 62
  • “備注~有劇透哦~建議看過的小伙伴們再來看文章哦~~~” 今天我看了久違的電影铜跑,《頭腦特工隊》门怪。 剛開始的時候,看...
    鬼馬姑娘閱讀 651評論 0 1
  • 1锅纺、 不考慮文學作品的話掷空,目前可以征引的資源庫主要是中國美術史以及中國古器物研究方面的書籍。讀過的書包括但不限于:...
    哇啦哇啦119閱讀 176評論 4 0