趨勢:大而簡,簡而精 在HIG最最最重要的設(shè)計(jì)原則的部分,仍然是萬年不變的Deference(順從)/Clarity(清晰)/Depth(深度)。 但是不知道大家有沒有注意,其中有了一個非常細(xì)微的變化,就是萬年老二的Clarity(清晰)原則,這次成了老大。
首先,我們先來看一下iOS 10之前的HIG歷史版本記錄,了解一下在以前的版本中Apple都做了些什么:
圖1 iOS HIG Revision History
自從iOS 7開始,每個版本的HIG都是在同一個框架中進(jìn)行維護(hù)的,而且維護(hù)頻率之低改動幅度之小令人發(fā)指(當(dāng)然跟Apple一貫的嚴(yán)謹(jǐn)風(fēng)格有關(guān))
而針對設(shè)計(jì)部分的內(nèi)容一共也只有兩次改動,這種情況一直持續(xù)到iOS 9,如果你愿意把iOS 7、8、9三個版本的HIG拿出來一起看,簡直就是在玩找茬游戲。
然后,我們再拿iOS 9 和 iOS 10 的HIG結(jié)構(gòu)框架進(jìn)行一下對比:
圖2 iOS HIG版本對比
歷經(jīng)三年以及三個版本都沒動過的框架被開了刀,我相信Apple的設(shè)計(jì)師絕對不是因?yàn)殚e的無聊才干出這種事的。
對于Apple這種嚴(yán)謹(jǐn)且強(qiáng)迫癥的公司來說,做每一件事必然有其原因,這里面?zhèn)鬟f出了一個信號:iOS 10的設(shè)計(jì)會發(fā)生「重大改變」,而Apple也期望通過設(shè)計(jì)的改變來獲取更多的用戶。
讓我們把視角再深入到具體的章節(jié)中,看看都有些什么變化:
1)增加了之前沒有過的Interaction章節(jié) (主要內(nèi)容為軟硬件與用戶的交互)
2)原來的Icon and Image Design章節(jié)(主要內(nèi)容為系統(tǒng)中不同情境下的icon設(shè)計(jì)定義)改名為Graphics章節(jié)并且優(yōu)先級上浮
3)原來的iOS Technologies章節(jié)(系統(tǒng)中的新技術(shù))改名為Technologies章節(jié)且優(yōu)先級下移
4)原來UI Design Basics章節(jié)中的動畫/品牌/色彩/布局/字體的內(nèi)容專門提取出來生成新的Visual Design章節(jié)
圖3 iOS HIG版本對比
5)原來的UI Elements一級目錄被取消,其中的二級目錄全部成為了一級目錄
圖4 iOS HIG版本對比
6)增加了新的Resources章節(jié),提供了PSD Templates、San Francisco Fonts和Xcode Projects的下載!這是讓我覺得最有誠意的部分了!你什么時候見過Apple爸爸這么貼心了!
圖5 增加的Resources章節(jié)
Apple的設(shè)計(jì)師對內(nèi)部的細(xì)節(jié)內(nèi)容也進(jìn)行了翻新和擴(kuò)建,在這里就不贅述了,但是確實(shí)值得大家細(xì)細(xì)去研究一番的,傳送門在此:iOS 10 Human Interface Guidelines
我個人的感覺是,以前的HIG像是寫給非設(shè)計(jì)人士/個人開發(fā)者的,使當(dāng)年的他們在缺乏專業(yè)設(shè)計(jì)師的條件下也能保證產(chǎn)品的基礎(chǔ)體驗(yàn);現(xiàn)在的HIG更像是寫給專業(yè)設(shè)計(jì)師的,說明了移動互聯(lián)網(wǎng)整個行業(yè)已經(jīng)成熟,職業(yè)分工越來越細(xì),職業(yè)化程度越來越高,而用戶和行業(yè)對設(shè)計(jì)的要求、設(shè)計(jì)對于產(chǎn)品的重要性也達(dá)到了一個新的高度。
而重視設(shè)計(jì)的Apple變的更加關(guān)注設(shè)計(jì),試圖像當(dāng)年iOS 7一樣,在設(shè)計(jì)和體驗(yàn)上帶一波新的節(jié)奏。
P.S. 在這個方向上走在前列的是早在14年就發(fā)布了Material Design的Google。
在HIG最最最重要的設(shè)計(jì)原則的部分,仍然是萬年不變的Deference(順從)/Clarity(清晰)/Depth(深度)。
但是不知道大家有沒有注意,其中有了一個非常細(xì)微的變化,就是萬年老二的Clarity(清晰)原則,這次成了老大。具體原因也只有Apple的設(shè)計(jì)師知道了(貌似是來自于用戶吐槽),但是就結(jié)果來說,「清晰」這一設(shè)計(jì)準(zhǔn)則應(yīng)當(dāng)會是以后的設(shè)計(jì)趨勢和重點(diǎn)
另外,對于設(shè)計(jì)原則的解釋的內(nèi)容也增多了,不要以為Apple突然抽風(fēng)從冰山美人變成了話癆,增多的內(nèi)容恰恰告訴了我們Apple重視的究竟是什么。
圖6 新老設(shè)計(jì)三原則對比
在Clarity(清晰)原則中,增加了一段解釋:留白、色彩、字體、圖形和界面元素要強(qiáng)調(diào)重要內(nèi)容并且對交互進(jìn)行指引。
我們抽取一下其中的關(guān)鍵字,內(nèi)容、留白、色彩、字體、界面元素,從描述來看,界面的內(nèi)容將成為Apple關(guān)注的重點(diǎn),其他關(guān)鍵字都是為內(nèi)容的傳達(dá)而服務(wù)的。但是,具體到底是怎么實(shí)施的呢?
實(shí)際上在WWDC 2016大會上展示的Apple Music已經(jīng)告訴了我們答案:
圖7 Apple Music改版
另外還有……加大控件?。?!在鎖屏播放界面中,播放和音量的控件都被明顯放大了,并且控件之間的間距也被加大了,大大降低了被誤觸的概率。
圖8 鎖屏播放改版
以及給重要控件賦予色彩。新的控制中心的按鈕都有了不同的顏色,從而讓他們具有更明顯的區(qū)分度以及視覺注意度,同樣的,按鈕也被加大了不少,Night Shift、AirPlay和AirDrop更是被獨(dú)立了出來。
圖9 Control Center改版
這樣的優(yōu)化出現(xiàn)在更多的界面中,再以新版的地圖為例:
首先是控件位置的變化,原來的“開始”從底部移動到了規(guī)劃路線的右側(cè),變的更加明顯并且與路線本身產(chǎn)生更強(qiáng)的關(guān)聯(lián)性;集中在頂部的操作也全部被移動到了底部,在大屏手機(jī)下的用戶操作變的更加便捷,手指不用上下來回移動也能完成所有的操作了。
然后是控件形式的變化,原來的“開始”由純文字Label變成了一個綠色的按鈕,對用戶產(chǎn)生了更強(qiáng)的視覺指引,還有個細(xì)節(jié)就是文案也由原來的「Start(開始)」 變成了 「Go(出發(fā))」
圖10 Apple Map改版
這些改進(jìn)具有一些共同點(diǎn):
1. 通過對字體大小和粗細(xì)的調(diào)整以及更多的留白來幫助用戶理解界面的層級架構(gòu),取代了之前使用平面元素的分割和分層來構(gòu)建界面架構(gòu)的方式,從而讓界面變的更加扁平,內(nèi)容更加突出。另外,讓具有一定程度視覺障礙的用戶(色盲/色弱/老年人)也能夠無障礙的使用。
2. 放大按鈕的尺寸、改變按鈕的布局、賦予按鈕不同的色彩來提高用戶對可操作內(nèi)容的認(rèn)知,降低點(diǎn)擊操作的難度,使界面與用戶的交互行為變的更友好。引用Apple在它的Accessibility Guideline(無障礙指南)中的描述就是「You view what you can do」 和「We make it easy to push all the right buttons」
當(dāng)然,這些變化解決了一些問題,但是帶來了一些新的問題,比如在Apple Music中,內(nèi)容展示效率的下降,原來能夠展示6張專輯的界面,現(xiàn)在只能放下3張。不過目前發(fā)布的仍然是Beta版,不知道在正式版中是否會Fix這些問題。
但是,「The biggest iOS release ever」,iOS 10名至實(shí)歸
似乎不光是Apple一家在試圖進(jìn)行這樣的改進(jìn),這種趨勢已經(jīng)開始蔓延。比如Airbnb在今年4月份上線的新設(shè)計(jì),幾乎完全舍棄了原來以圖片襯底為主的設(shè)計(jì),換成了大面積的留白和加粗加大的文字,底tab的高度也加高了不少,當(dāng)然,按鈕也加大了一圈。
全新的設(shè)計(jì)去掉了任何可能會給用戶帶來視覺干擾的東西,變的極度的純粹。
圖11 Airbnb改版
好友JJ-Ying也在前段時間的博文「后扁平化時代」的 i18n 和 L10n中詳細(xì)的分析了Airbnb的這次改版,引用文章內(nèi)一個有趣的描述Airbnb的新設(shè)計(jì)是「比交互稿還交互稿」,不過他在文中更多關(guān)注的問題是:在這樣的趨勢下,字體設(shè)計(jì)與產(chǎn)品品牌的關(guān)系以及在進(jìn)行本地化與國際化設(shè)計(jì)時設(shè)計(jì)師所遇到的挑戰(zhàn),感興趣的同學(xué)可以點(diǎn)上面的鏈接閱讀。
幾乎是緊接著Airbnb的步伐Instagram就發(fā)布了他們的新LOGO和新設(shè)計(jì)。對于褒貶不一的新LOGO我們暫且放在一邊,主要還是看看UI的變化:
Ins去掉了頭欄和底欄的顏色,通過加粗文字的方式來區(qū)分內(nèi)容結(jié)構(gòu),取代了之前通過給文字添加顏色的方式(如:用戶昵稱、獲贊數(shù))。
圖12 Instagram改版
Ins的設(shè)計(jì)總監(jiān)Ian在Medium上對于這次改版的說明是:“我們的新icon已經(jīng)足夠colorful了(確實(shí)非常colorful……),所以我們更希望App內(nèi)的顏色是來自于用戶上傳的照片和視頻而不是App本身,然后我們就把影響用戶內(nèi)容展現(xiàn)的干擾給干掉了。”
總結(jié)成一句話來形容這股趨勢就是「大而簡,簡而精」。
在這股趨勢下,未來的設(shè)計(jì)將更注重產(chǎn)品的內(nèi)容和操作體驗(yàn),降低其他因素對用戶使用上的干擾,這對設(shè)計(jì)師來說,是不小的挑戰(zhàn),因?yàn)樵胶唵蔚臇|西越難設(shè)計(jì),特別是如何在界面設(shè)計(jì)中去把握「大」和「簡」的程度以及如何通過更有限的手段和空間來傳達(dá)更多的信息和指引用戶來達(dá)到「精」的目標(biāo),這是我們在未來需要不斷考慮、探索和解決的問題。
0
喜歡他,就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)