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

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

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

趨勢:大而簡,簡而精 在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本身,然后我們就把影響用戶內容展現的干擾給干掉了。”

結語

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

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


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一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

      9000px;">

          99国产麻豆精品| 理论片日本一区| 精品一区二区三区蜜桃| 欧美精品高清视频| 亚洲国产一区视频| 欧美亚洲一区二区在线| 亚洲综合图片区| 欧美午夜理伦三级在线观看| 有坂深雪av一区二区精品| 色8久久精品久久久久久蜜| 亚洲一区二区三区在线| 欧美视频一区二| 日本少妇一区二区| 激情深爱一区二区| 国产三级精品视频| proumb性欧美在线观看| 一区二区三区精品在线| 欧美日韩成人综合天天影院| 蜜桃91丨九色丨蝌蚪91桃色| 日韩一区二区三区av| 国内精品免费在线观看| 国产拍欧美日韩视频二区| eeuss鲁片一区二区三区| 亚洲欧美偷拍三级| 日本午夜一本久久久综合| 日韩精品一区二区三区视频播放| 精品亚洲免费视频| 国产精品天天摸av网| 91蜜桃在线观看| 日本欧美大码aⅴ在线播放| 国产亚洲精品久| 色哟哟欧美精品| 五月激情六月综合| 久久蜜桃香蕉精品一区二区三区| 成人禁用看黄a在线| 一区二区三区在线观看视频| 91麻豆精品国产91久久久更新时间| 久99久精品视频免费观看| 中文字幕一区二区三区不卡 | 555www色欧美视频| 国产69精品久久久久毛片| 在线免费观看一区| 久久成人久久爱| 最新欧美精品一区二区三区| 欧美一级艳片视频免费观看| 国产不卡高清在线观看视频| 亚洲一二三四区不卡| 日韩精品中文字幕在线不卡尤物| 成人av资源网站| 美女免费视频一区| 亚洲裸体在线观看| 精品国产乱码久久久久久久久| 91丨porny丨国产| 韩国理伦片一区二区三区在线播放| 亚洲另类春色国产| 久久日一线二线三线suv| 在线观看视频一区二区欧美日韩| 国产一区视频在线看| 亚洲国产另类精品专区| 国产精品久久久久久一区二区三区 | 日韩伦理免费电影| 日韩精品一区二区三区在线观看 | 欧美不卡一区二区三区| 一本久道中文字幕精品亚洲嫩| 久久精品国产亚洲一区二区三区| 亚洲免费av在线| 26uuu色噜噜精品一区| 欧美久久久影院| 91丝袜高跟美女视频| 国产高清亚洲一区| 青青草原综合久久大伊人精品优势| 亚洲免费观看高清完整版在线观看 | 精品国产人成亚洲区| 欧美中文字幕一区| 一区二区三区不卡视频| 中文字幕高清一区| 久久精品视频免费观看| 日韩一区二区在线观看| 欧美综合视频在线观看| 色系网站成人免费| 99riav一区二区三区| 国产乱淫av一区二区三区| 久久国产免费看| 人人超碰91尤物精品国产| 亚洲午夜久久久久中文字幕久| 一区在线中文字幕| 亚洲欧美怡红院| 国产精品久久久久一区| 91麻豆福利精品推荐| 99精品国产99久久久久久白柏| av在线一区二区三区| proumb性欧美在线观看| av不卡在线播放| 91麻豆高清视频| 在线观看亚洲a| 在线观看精品一区| 欧美性色黄大片| 欧美丝袜丝交足nylons图片| 欧美日韩中文字幕一区| 欧美性videosxxxxx| 欧美日韩中文一区| 欧美一区二区在线视频| 欧美一级欧美三级| 国产精品综合av一区二区国产馆| 国内久久婷婷综合| 粗大黑人巨茎大战欧美成人| 91影院在线观看| 欧美日韩免费观看一区二区三区| 欧美视频精品在线| 欧美一区二区三区不卡| 精品国产不卡一区二区三区| 久久久亚洲精品石原莉奈| 国产精品久久久久久久久免费桃花| 亚洲人被黑人高潮完整版| 亚洲国产毛片aaaaa无费看| 日本不卡一区二区三区| 激情亚洲综合在线| 国产91综合网| 欧美性受xxxx| 久久嫩草精品久久久久| 亚洲色图一区二区三区| 亚洲gay无套男同| 国产美女一区二区| 91极品视觉盛宴| 日韩精品在线网站| 亚洲欧洲av在线| 日本在线不卡视频| 成人午夜av在线| 欧美色图免费看| 国产日韩精品视频一区| 亚洲妇熟xx妇色黄| 国产精品18久久久久久久久| 在线观看日韩av先锋影音电影院| 日韩精品一区二区三区视频| 久久99精品久久久久婷婷| av中文字幕不卡| 日韩一级黄色片| 中文字幕中文字幕在线一区| 蜜桃在线一区二区三区| 91在线观看免费视频| 日韩欧美不卡在线观看视频| 国产视频一区在线播放| 天天操天天干天天综合网| 成人在线视频一区二区| 成人深夜视频在线观看| 99久久精品免费精品国产| 欧美成人性战久久| 亚洲精品高清在线| 国产99精品国产| 日韩午夜激情av| 亚洲综合视频在线观看| 成人精品视频一区二区三区尤物| 91麻豆精品国产91久久久资源速度 | 国产在线精品一区二区三区不卡| 五月婷婷欧美视频| 97成人超碰视| 2021中文字幕一区亚洲| 日韩黄色片在线观看| 97精品久久久久中文字幕| 久久久久久久久久久99999| 亚洲a一区二区| 亚洲一区在线观看免费 | 国产精品久久久久久久久快鸭| 蜜臀av一区二区在线观看| 欧美色综合影院| 亚洲美女在线国产| 白白色 亚洲乱淫| 亚洲国产精品成人久久综合一区| 激情文学综合插| 欧美一级二级三级蜜桃| 亚洲午夜在线电影| 色综合天天综合网国产成人综合天 | 91在线小视频| 国产精品国产成人国产三级| 国产美女精品在线| 91在线精品一区二区三区| 久久久久久免费| 国内精品国产三级国产a久久| 日韩一级精品视频在线观看| 图片区日韩欧美亚洲| 色就色 综合激情| 亚洲精品国产精华液| 一本大道久久a久久精二百| 成人app下载| 4438亚洲最大| 日本视频中文字幕一区二区三区| 欧美日韩精品欧美日韩精品| 一片黄亚洲嫩模| 欧美综合一区二区| 亚洲国产精品一区二区www| 欧美日韩一区二区三区四区五区| 亚洲高清免费观看 | 久久精品久久综合| 日韩欧美成人激情| 国产自产2019最新不卡| 国产日韩影视精品| 99久久国产综合精品色伊| 亚洲欧洲制服丝袜| 欧美在线免费播放| 免费观看一级欧美片|