亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

從IOS 10設計指南變化看設計的新趨勢

作者:
分類: 觀點/經驗
2016-09-07
2677

趨勢:大而簡,簡而精 在HIG最最最重要的設計原則的部分,仍然是萬年不變的Deference(順從)/Clarity(清晰)/Depth(深度)。 但是不知道大家有沒有注意,其中有了一個非常細微的變化,就是萬年老二的Clarity(清晰)原則,這次成了老大。

改變:越來越像給設計師用的「設計指南」

首先,我們先來看一下iOS 10之前的HIG歷史版本記錄,了解一下在以前的版本中Apple都做了些什么:

1.jpg

圖1 iOS HIG Revision History

自從iOS 7開始,每個版本的HIG都是在同一個框架中進行維護的,而且維護頻率之低改動幅度之小令人發指(當然跟Apple一貫的嚴謹風格有關)

而針對設計部分的內容一共也只有兩次改動,這種情況一直持續到iOS 9,如果你愿意把iOS 7、8、9三個版本的HIG拿出來一起看,簡直就是在玩找茬游戲。

然后,我們再拿iOS 9 和 iOS 10 的HIG結構框架進行一下對比:

2.png

圖2 iOS HIG版本對比

幾乎是完全不同的結構框架!

歷經三年以及三個版本都沒動過的框架被開了刀,我相信Apple的設計師絕對不是因為閑的無聊才干出這種事的。

對于Apple這種嚴謹且強迫癥的公司來說,做每一件事必然有其原因,這里面傳遞出了一個信號:iOS 10的設計會發生「重大改變」,而Apple也期望通過設計的改變來獲取更多的用戶。

讓我們把視角再深入到具體的章節中,看看都有些什么變化:

1)增加了之前沒有過的Interaction章節 (主要內容為軟硬件與用戶的交互)

2)原來的Icon and Image Design章節(主要內容為系統中不同情境下的icon設計定義)改名為Graphics章節并且優先級上浮

3)原來的iOS Technologies章節(系統中的新技術)改名為Technologies章節且優先級下移

4)原來UI Design Basics章節中的動畫/品牌/色彩/布局/字體的內容專門提取出來生成新的Visual Design章節

3.jpg

圖3 iOS HIG版本對比

5)原來的UI Elements一級目錄被取消,其中的二級目錄全部成為了一級目錄

4.jpg

圖4 iOS HIG版本對比

6)增加了新的Resources章節,提供了PSD Templates、San Francisco Fonts和Xcode Projects的下載!這是讓我覺得最有誠意的部分了!你什么時候見過Apple爸爸這么貼心了!

5.jpg

圖5 增加的Resources章節

Apple的設計師對內部的細節內容也進行了翻新和擴建,在這里就不贅述了,但是確實值得大家細細去研究一番的,傳送門在此:iOS 10 Human Interface Guidelines

我個人的感覺是,以前的HIG像是寫給非設計人士/個人開發者的,使當年的他們在缺乏專業設計師的條件下也能保證產品的基礎體驗;現在的HIG更像是寫給專業設計師的,說明了移動互聯網整個行業已經成熟,職業分工越來越細,職業化程度越來越高,而用戶和行業對設計的要求、設計對于產品的重要性也達到了一個新的高度。

而重視設計的Apple變的更加關注設計,試圖像當年iOS 7一樣,在設計和體驗上帶一波新的節奏。

P.S.  在這個方向上走在前列的是早在14年就發布了Material Design的Google。

趨勢:大而簡,簡而精

在HIG最最最重要的設計原則的部分,仍然是萬年不變的Deference(順從)/Clarity(清晰)/Depth(深度)。

但是不知道大家有沒有注意,其中有了一個非常細微的變化,就是萬年老二的Clarity(清晰)原則,這次成了老大。具體原因也只有Apple的設計師知道了(貌似是來自于用戶吐槽),但是就結果來說,「清晰」這一設計準則應當會是以后的設計趨勢和重點

另外,對于設計原則的解釋的內容也增多了,不要以為Apple突然抽風從冰山美人變成了話癆,增多的內容恰恰告訴了我們Apple重視的究竟是什么。

6.jpg

圖6 新老設計三原則對比

在Clarity(清晰)原則中,增加了一段解釋:留白、色彩、字體、圖形和界面元素要強調重要內容并且對交互進行指引。

我們抽取一下其中的關鍵字,內容、留白、色彩、字體、界面元素,從描述來看,界面的內容將成為Apple關注的重點,其他關鍵字都是為內容的傳達而服務的。但是,具體到底是怎么實施的呢?

實際上在WWDC 2016大會上展示的Apple Music已經告訴了我們答案:

7.jpg

圖7 Apple Music改版

答案就是:加大字號!加粗字體!加多留白!減少頁面的視覺層級!

另外還有……加大控件?。?!在鎖屏播放界面中,播放和音量的控件都被明顯放大了,并且控件之間的間距也被加大了,大大降低了被誤觸的概率。

8.jpg

圖8 鎖屏播放改版

以及給重要控件賦予色彩。新的控制中心的按鈕都有了不同的顏色,從而讓他們具有更明顯的區分度以及視覺注意度,同樣的,按鈕也被加大了不少,Night Shift、AirPlay和AirDrop更是被獨立了出來。

9.jpg

圖9 Control Center改版

這樣的優化出現在更多的界面中,再以新版的地圖為例:

首先是控件位置的變化,原來的“開始”從底部移動到了規劃路線的右側,變的更加明顯并且與路線本身產生更強的關聯性;集中在頂部的操作也全部被移動到了底部,在大屏手機下的用戶操作變的更加便捷,手指不用上下來回移動也能完成所有的操作了。

然后是控件形式的變化,原來的“開始”由純文字Label變成了一個綠色的按鈕,對用戶產生了更強的視覺指引,還有個細節就是文案也由原來的「Start(開始)」 變成了 「Go(出發)」

10.jpg

圖10 Apple Map改版

這些改進具有一些共同點:

1.   通過對字體大小和粗細的調整以及更多的留白來幫助用戶理解界面的層級架構,取代了之前使用平面元素的分割和分層來構建界面架構的方式,從而讓界面變的更加扁平,內容更加突出。另外,讓具有一定程度視覺障礙的用戶(色盲/色弱/老年人)也能夠無障礙的使用。

2.  放大按鈕的尺寸、改變按鈕的布局、賦予按鈕不同的色彩來提高用戶對可操作內容的認知,降低點擊操作的難度,使界面與用戶的交互行為變的更友好。引用Apple在它的Accessibility Guideline(無障礙指南)中的描述就是「You view what you can do」 和「We make it easy to push all the right buttons」

當然,這些變化解決了一些問題,但是帶來了一些新的問題,比如在Apple Music中,內容展示效率的下降,原來能夠展示6張專輯的界面,現在只能放下3張。不過目前發布的仍然是Beta版,不知道在正式版中是否會Fix這些問題。

但是,「The biggest iOS release ever」,iOS 10名至實歸

比Apple Music做的更早更徹底的Airbnb

似乎不光是Apple一家在試圖進行這樣的改進,這種趨勢已經開始蔓延。比如Airbnb在今年4月份上線的新設計,幾乎完全舍棄了原來以圖片襯底為主的設計,換成了大面積的留白和加粗加大的文字,底tab的高度也加高了不少,當然,按鈕也加大了一圈。

全新的設計去掉了任何可能會給用戶帶來視覺干擾的東西,變的極度的純粹。

11.jpg

圖11 Airbnb改版

好友JJ-Ying也在前段時間的博文「后扁平化時代」的 i18n 和 L10n中詳細的分析了Airbnb的這次改版,引用文章內一個有趣的描述Airbnb的新設計是「比交互稿還交互稿」,不過他在文中更多關注的問題是:在這樣的趨勢下,字體設計與產品品牌的關系以及在進行本地化與國際化設計時設計師所遇到的挑戰,感興趣的同學可以點上面的鏈接閱讀。

另外一個搭上這班車的公司就是Instagram

幾乎是緊接著Airbnb的步伐Instagram就發布了他們的新LOGO和新設計。對于褒貶不一的新LOGO我們暫且放在一邊,主要還是看看UI的變化:

Ins去掉了頭欄和底欄的顏色,通過加粗文字的方式來區分內容結構,取代了之前通過給文字添加顏色的方式(如:用戶昵稱、獲贊數)。

12.jpg

圖12 Instagram改版

Ins的設計總監Ian在Medium上對于這次改版的說明是:“我們的新icon已經足夠colorful了(確實非常colorful……),所以我們更希望App內的顏色是來自于用戶上傳的照片和視頻而不是App本身,然后我們就把影響用戶內容展現的干擾給干掉了?!?/span>

結語

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

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


0
5
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務聯系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學科技園東區9號樓2層

版權信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

      欧美成人国产| 亚洲国产精品成人综合| 美女任你摸久久| 亚洲四色影视在线观看| 黄色成人av网站| 国产精品乱码| 欧美日韩成人| 欧美大片免费观看| 麻豆成人综合网| 午夜精品久久99蜜桃的功能介绍| 日韩视频第一页| 国产综合色在线视频区| 国产精品国产三级国产专播精品人 | 午夜日韩在线| av成人手机在线| 亚洲黄页视频免费观看| 1204国产成人精品视频| 欧美精品不卡| 久久精品一二三区| 欧美一区二区大片| 欧美亚洲专区| 性刺激综合网| 欧美在线观看一区| 亚洲欧美精品在线观看| 亚洲一区免费网站| 99xxxx成人网| 亚洲亚洲精品在线观看| 一本色道久久加勒比88综合| 亚洲国产精品一区二区www| 亚洲美女淫视频| 亚洲国产精品一区二区www| 狠狠狠色丁香婷婷综合激情| 国语精品一区| 在线精品福利| 91久久极品少妇xxxxⅹ软件| 亚洲国产成人精品久久久国产成人一区| 国产一区二区视频在线观看| 国产视频一区免费看| 国产亚洲精品一区二区| 狠狠综合久久av一区二区小说| 在线观看欧美日本| 亚洲日本电影| 亚洲视频一区二区免费在线观看| 亚洲少妇一区| 久久国产视频网| 免费短视频成人日韩| 欧美激情亚洲国产| 国产精品视频网| 激情成人av| 一区二区久久| 久久久久国产精品www| 欧美成年人视频网站欧美| 欧美日韩另类视频| 国产伪娘ts一区| 亚洲国产网站| 亚洲欧美日韩爽爽影院| 久久午夜电影网| 欧美视频免费在线| 影音先锋日韩有码| 在线视频精品一| 久久久夜精品| 国产精品视频yy9099| 亚洲国产mv| 久久电影一区| 国产精品草莓在线免费观看| 黄色成人91| 亚洲欧美日韩国产另类专区| 欧美国产专区| 伊人婷婷欧美激情| 校园春色综合网| 欧美日韩三级一区二区| 在线免费观看日本欧美| 午夜视频一区二区| 欧美日本亚洲| 最新日韩在线| 久久亚洲午夜电影| 国产日韩1区| 亚洲嫩草精品久久| 欧美色视频一区| 亚洲美女啪啪| 欧美高清在线观看| 悠悠资源网久久精品| 久久精品72免费观看| 国产精品久久国产精品99gif| 亚洲精品一区二区三区四区高清| 久久躁狠狠躁夜夜爽| 国产免费成人在线视频| 亚洲欧美日韩国产综合精品二区| 欧美精品在线视频观看| 91久久极品少妇xxxxⅹ软件| 久久夜色精品亚洲噜噜国产mv| 国产日韩三区| 久久精品人人做人人综合| 国产欧美日韩中文字幕在线| 亚洲专区欧美专区| 国产伦精品一区二区三区免费迷| 亚洲一区二区免费在线| 国产精品乱码妇女bbbb| 亚洲一级黄色| 国产欧美精品va在线观看| 欧美一级免费视频| 国产亚洲欧美在线| 久久久精品国产免大香伊 | 欧美激情精品久久久久久久变态 | 欧美伊人影院| 国产一区二区你懂的| 久久九九热re6这里有精品| 国产亚洲精品久久飘花| 久久都是精品| 亚洲成人资源网| 欧美国产日韩免费| 一本色道久久综合亚洲91| 欧美日韩午夜| 性欧美videos另类喷潮| 精品白丝av| 欧美日韩国产在线观看| 亚洲欧美bt| 亚洲激情视频网站| 欧美日韩中文字幕在线视频| 亚洲特黄一级片| 国内精品美女av在线播放| 欧美高清在线观看| 亚洲一区在线看| 在线日韩欧美| 欧美色大人视频| 久久久噜噜噜久噜久久| 日韩天堂av| 国产亚洲精品bt天堂精选| 老鸭窝91久久精品色噜噜导演| 亚洲精品国精品久久99热| 国产精品免费看片| 男女精品视频| 午夜精品一区二区在线观看| 亚洲夫妻自拍| 国产精品影院在线观看| 欧美精品一二三| 欧美一级大片在线观看| aⅴ色国产欧美| 伊甸园精品99久久久久久| 欧美系列一区| 欧美福利一区| 久久久久久久一区| 午夜精品视频一区| 亚洲麻豆国产自偷在线| 狠狠色丁香婷婷综合久久片| 国产精品久久久久久久app| 欧美成年人网站| 久久午夜国产精品| 欧美一区精品| 亚洲欧美卡通另类91av| 99国产精品99久久久久久粉嫩 | 另类欧美日韩国产在线| 欧美一区永久视频免费观看| 亚洲网站在线看| 日韩天堂在线观看| 91久久午夜| 亚洲欧洲日本mm| 伊人久久亚洲热| 国产一区二区三区四区| 国产欧美日韩综合精品二区| 国产精品久久久久久久午夜 | 欧美日韩国产精品一卡| 老色鬼精品视频在线观看播放| 欧美一区二区三区在线看| 亚洲小视频在线| 国产精品99久久久久久久久| 日韩一级精品视频在线观看| 亚洲精品少妇30p| 亚洲国产精品久久久久秋霞蜜臀| 国语自产精品视频在线看抢先版结局| 国产精品天美传媒入口| 国产精品黄色| 国产美女精品人人做人人爽| 国产麻豆9l精品三级站| 国产精品综合不卡av| 国产欧美在线视频| 国产综合久久| 亚洲精品色婷婷福利天堂| 一区二区三区日韩欧美精品| 一本久道综合久久精品| 亚洲视频一起| 香蕉成人久久| 麻豆国产va免费精品高清在线| 欧美福利小视频| 欧美日韩国内| 国产亚洲精品bt天堂精选| 亚洲福利国产| 亚洲午夜一区二区| 香蕉乱码成人久久天堂爱免费| 久久精品综合| 欧美激情精品久久久久久黑人 | 国产亚洲观看| 亚洲福利视频网站| 一本大道久久a久久综合婷婷 | 国产精品视频一区二区高潮| 国产一区二区中文| 亚洲国产精品va在线观看黑人| 日韩香蕉视频| 欧美一区激情视频在线观看| 欧美顶级艳妇交换群宴|