Resin
中國每年有50萬的設計畢業生，相比之下，能夠進入大廠的寥若晨星。但所有投身於設計的設計師，都有一顆渴望成長的心。《體驗設計師入門實戰課程》是vivo VMIC UED 為新入職設計師量身打造的專業成長課程，是UED全體講師的結晶。現在，我們將這套課程整理成文章發表出來，希望給選擇並從事設計行業的你一點成長的力量。感興趣的小夥伴記得關注我們VMIC UED的公眾號，和我們一起共成長~iOS Human Interface Guidelines和Material Design是最經典的兩大系統級設計規範設計規範按照覆蓋範圍可以分為三類，最上層是應用級規範，即針對單個應用的設計指導比如vivo應用商店設計規範，它們與下層的平台級規範有一定傳承和包含關係，比如各大手機廠商的OS設計規範，而這些規範的設計思想和內容很多又都來源於底層的系統級規範，最經典的就是iOS Human Interface Guidelines（後文簡稱iOS HIG）和Material Design。iOS HIG是蘋果官方出品的用戶界面指南，指導iOS應用程序設計，目的是為了使運行在iOS上的應用都能遵從一套特定的規範，保證體驗統一。Material Design是谷歌官方出品的設計語言，和大家的常規認知不同，這套規範不僅僅是安卓產品的設計規範，還可以跨平台使用在Android、iOS以及Web上。iOS HIG和Material Design作為最經典的設計規範，可以讓設計師學習到頂級設計規範思想，從更高的設計理念層面指導做設計，比如Material Design核心設計思想是將平面的二維空間變成現實世界的三維空間，在vivo遊戲聯運懸浮窗改版設計中就吸收了這個思想，延伸X軸降維Z軸，創造出了更好的交互形式。▲圖2 設計規範提供理念指導-vivo遊戲聯運懸浮窗案例iOS HIG和Material Design還能幫助設計師系統梳理交互基礎知識，讓你和別人講清楚你所熟悉但又無法確切闡述的設計控件，糾正原有設計誤區，比如橫向進度指示條一定用於指示明確進度，而轉圈進度環代表進度無法衡量嗎，答案是否定的。最關鍵的是iOS HIG和Material Design能為設計方案提供理論支撐和判斷依據，提高正確性和說服力，比如開關控件該怎麼設計、行為召喚按鈕該怎麼設計，這些平時設計工作問題的答案其實都在設計規範當中。iOS HIG和Material Design還能幫助打破思維局限，提供更多開闊的設計創意來源，比如微信懸浮窗的設計，大家都覺得很有創意並且實用，解決了用戶痛點，這個設計其實就來自於Material Design的底部拓展面板組件（Expanding bottom sheet），設計規範里還有很多這樣有意思的交互細節等着大家去發現。
▲圖3兩大設計規範構成層次iOS HIG和Material Design原文內容很長，為方便大家閱讀理解，首先給大家導讀兩大設計規範的核心內容。兩個設計規範的目錄結構有差異，但是基本上可以將規範拆解成從抽象到具象的三部分：最底層的是基本設計理念，指導整個規範的設計思想；再上層是具體一點的界面基礎規範，比如導航方式、交互手勢、視覺布局等；最上層就是更加具體的頁面組件了，給出該規範可應用的組件，比如我們常用的彈窗、開關控件等等。接下來和大家逐一導讀這三部分。▲圖5 iOS HIG和Material Design的設計理念iOS HIG設計理念比較多，包括三大設計主旨和六大設計原則，清晰、遵從、深度、整體美學、一致性、直接操作、反饋、隱喻、用戶控制。其中最有系統代表性的是遵從，指好的界面設計要為內容服務，切勿過度設計，設計師常常會因為過度追求美感而忽視這點，iOS通過使用留白、無邊框、簡化UI等方式使得呈現的功能更加清晰，幫助用戶更好地使用產品。Material Design設計理念相對精簡，有三大設計原則，核心思想來自於現實世界中的材質。和iOS一樣，Material Design的原則中也有隱喻，目的都是為了讓可用性增加，降低用戶學習成本，不過兩者在理念上稍微有些差別，MG很明確在二維界面中引入了三維空間的概念，通過二維的一些表達手段，比如投影、動效等構建出了三維空間Z軸的概念，隱喻現實物體，每個界面元素都有厚度和高度，不同投影暗示了不同元素的高度。另外Material Design對動效的重視程度很高，納入設計原則的一項，動效應該要有意義、要合理，不應該為了炫技而動效。用戶界面基礎規範，包括導航方式、交互手勢、視覺設計等等，這部分內容比較多雜，兩大規範的結構和重點也各不相同，這裡會抽取核心的內容進行對比。產品基礎規範離不開導航，iOS導航方式中有大家常見的層級導航和扁平導航，還有不常見的內容驅動/體驗驅動導航。Material Design規定的導航類型和iOS差不多，但多了一種反嚮導航，用戶可以按時間順序在產品中向後移動，Android物理back鍵就是起到這種導航作用。▲圖6 iOS HIG和Material Design的導航手勢是重要的人機交互輸入方式，iOS和Material Design的手勢趨同，如輕擊（Tap）等。另外有一些兩大規範特有的手勢交互，比如iOS由於沒有Android底部back鍵，點擊左上角返回按鈕又太遠了，所以補充使用了滑動手勢返回上級頁面。其次對於隱藏操作，iOS一般使用滑動手勢出現，而Android使用長按手勢出現。這些在規範里都有定義，兩個系統的用戶也形成了習慣，大家要遵守使用。▲圖7 iOS HIG和Material Design的手勢兩個規範在顏色上的特點也是符合他們的設計理念。iOS講究清晰的設計主旨，所以在色彩的使用上會更謹慎克制，而Material Design提倡使用高飽和度的對比色來提升產品的視覺表現力和品牌認知。▲圖8 iOS HIG和Material Design的顏色除了兩個規範共有的導航、手勢、顏色等內容外，推薦大家閱讀Material Design動效規範，由於MG對動效的重視程度很高，所以動效這部分的規範內容也非常豐富實用。規範給出了4種動效模式，容器切換模式、共享軸模式、淡入淡出模式、褪色模式，可以根據動效表達意義選擇動效的模式。另外規範還對動效過渡的時間給出了具體建議，比如大過渡區域比小過渡區域的元素動效有更長的持續時間，動效消失的持續時間通常比動效出現的持續時間更短。iOS HIG和Material Design給出的組件非常多，可以大致將頁面組件分為三類：欄、視圖、控件。▲圖10 iOS HIG和Material Design頁面組件分類欄用來展示導航和關鍵操作，比如常見的導航欄。欄根據在界面上的位置可以分為：頂部欄、底部欄和側邊欄。iOS設計體系中主要使用頂部欄和底部欄，而Material Design設計體系則主要使用頂部欄和側邊欄，原因是Material Design最早是為Android系統設計的規範，而Android機底部都有三個物理按鍵，如果採用底部欄作為主導航，容易造成用戶誤點擊，不過最新版本的MG規範也開始使用底部欄了（猜測可能是因為越來越多的Android機支持取消底部虛擬按鍵），兩個規範已經呈現融合的趨勢。▲圖11 iOS HIG和Material Design頁面組件-欄頂部欄在iOS中叫導航欄，Material Design中叫應用欄，能夠實現不同層級間的導航，也可用於管理當前屏幕內容，均有大小標題兩種樣式。側邊欄只在Material Design體系中出現，叫抽屜導航，由於側邊欄比較隱蔽，一般產品都不會用作主導航方式，都是作為輔助導航方式。底部欄就比較常見了，國內產品基本都是用這個作為主導航方式，底部欄在iOS中叫標籤欄，Material Design中叫底部導航，兩者使用差異不大，但Material Design更注重對界面空間的利用（從側邊導航就能看出來），所以Material Design底部導航用戶上滑時是可以隱藏的。▲圖12iOS HIG和Material Design頁面組件-頂部欄、側邊欄、底部欄視覺用來展示應用程序中看到的主要內容，視圖包含內容視圖和臨時視圖，顧名思義內容視圖就是產品中常態出現的內容，臨時視圖是短暫出現的可以關閉的視圖。▲圖13 iOS HIG和Material Design頁面組件-視圖這裡提一下我們平時設計工作中用到比較多的臨時視圖。臨視視圖按照設計目的可以分為兩類，一類是用來展示產品自發出現的信息通知、用戶操作後的反饋，形式從強到弱分別是彈窗（Alerts/Dialogs）、橫幅（Banners）、提示條（Snackbars），可以根據場景來選擇使用；另一類是用戶觸發控件後展開更多操作項，包含在當前位置出現和屏幕邊緣出現的，適用於尺寸不同的屏幕場景。▲圖14 iOS HIG和Material Design頁面組件-臨時視圖控件是用來進行操作輸入等行為，比如按鈕、開關、滑塊等，兩大設計規範的控件種類也非常多，這裡就不一一在文章中介紹了，大家感興趣可以自己閱讀規範原文。▲圖15 iOS HIG和Material Design頁面組件-控件設計規範的學習要講究方法，建議大家在新手期直接閱讀設計規範的原文，先進行一次系統性的遍歷式閱讀（可藉助上文的導讀），對整體知識有個印象，不要求死記硬背全部記住，閱讀的時候或者平時體驗產品的時候可以想一想產品中哪些應用了規範哪些沒有應用，思考為什麼沒用，用了會不會更好，之後再把這些規範當成字典，等真正做的時候再有針對性的查閱。建議辯證看待規範，學習規範的思想方法，而不是死板遵守，遇到設計問題的時候，規範可以當成工具書來針對性查閱，根據具體設計場景再判斷是否需要遵守。▲圖16 如何遵守iOSHIG和MaterialDesign對於iOS和Android操作系統規定的、用戶約定俗稱的習慣，是需要遵守的，比如iOS使用邊緣滑動手勢返回上級頁面、Android使用底部back鍵向後返回等。而對於規範比較模糊沒覆蓋到、用戶已經被教育、或針對當前場景有更合適的設計時，我們可以斟酌是否要遵守。系統級別的設計規範因為要考慮到大量該系統產品的通用性，所以不可能覆蓋非常全面，很多設計細節都是可以按照具體情況去調整、增加的，比如iOS對刷新控件只規定了常用的下拉頁面內容刷新，而淘寶首創了下拉距離超過閾值進入二樓，利用隱藏的頁面空間和手勢，創造驚喜且實用、被行業復用的設計。所以我們設計師在熟悉規範、學習思想後，具體設計時還是要從實際場景和問題出發，敢於挑戰和勇於創新，考慮是否有更優秀的解決方案，設計規範規定了你的設計下限，能夠保證你的設計不出錯，也就是70分，但可能會有更令人驚艷的90分以上的設計，當這個設計足夠好的時候，也許你的設計就會成為行業約定俗成的新規範。1、什麼是兩大設計規範：設計規範分為應用級、平台級、系統級，兩大設計規範iOS Human Interface Guidelines和MaterialDesign屬於系統級規範。2、為什麼要學習兩大設計規範：提供設計理念指導、系統交互知識、方案判斷依據、設計創意來源。3、如何學習兩大設計規範：兩大設計規範均可以拆解成從抽象到具象的三部分：設計理念、基礎規範、頁面組件。建議先遍歷式全文通讀、建立認知，等真正使用的時候再當成字典有針對性的查閱，根據具體設計場景判斷如何使用，嘗試突破和創新。蘋果Human Interface Guidelineshttps://developer.apple.com/design/human-interface-guidelineshttps://www.microsoft.com/design/fluent/#https://www.ibm.com/design/languagehttps://ant.design/index-cnhttps://developers.weixin.qq.com/miniprogram/design/
鑽石舞台 發表在 痞客邦 留言(0) 人氣()
留言列表
留言列表