中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

產品設計中需要了解一些設計規范，規范我們更好地判斷界面的交互設計。本文總結了兩大設計規范——iOS HIG和Material Design，希望對你有所幫助。

中國每年有50萬的設計畢業生，相比之下，能夠進入大廠的寥若晨星。但所有投身于設計的設計師，都有一顆渴望成長的心?，F在，我們整理成文章發表出來，希望給選擇并從事設計行業的你一點成長的力量。

一、什么是兩大設計規范？

iOS Human Interface Guidelines和Material Design是最經典的兩大系統級設計規范。

▲圖1 設計規范類型

設計規范按照覆蓋范圍可以分為三類，最上層是應用級規范，即針對單個應用的設計指導比如vivo應用商店設計規范，它們與下層的平臺級規范有一定傳承和包含關系，比如各大手機廠商的OS設計規范，而這些規范的設計思想和內容很多又都來源于底層的系統級規范，最經典的就是iOS Human Interface Guidelines（后文簡稱iOS HIG）和Material Design。

iOS HIG是蘋果官方出品的用戶界面指南，指導iOS應用程序設計，目的是為了使運行在iOS上的應用都能遵從一套特定的規范，保證體驗統一。Material Design是谷歌官方出品的設計語言，和大家的常規認知不同，這套規范不僅僅是安卓產品的設計規范，還可以跨平臺使用在Android、iOS以及Web上。

二、為什么要學習兩大設計規范？

1. 設計理念指導

iOS HIG和Material Design作為最經典的設計規范，可以讓設計師學習到頂級設計規范思想，從更高的設計理念層面指導做設計，比如Material Design核心設計思想是將平面的二維空間變成現實世界的三維空間，在vivo游戲聯運懸浮窗改版設計中就吸收了這個思想，延伸X軸降維Z軸，創造出了更好的交互形式。

▲圖2 設計規范提供理念指導-vivo游戲聯運懸浮窗案例

2. 系統交互知識

iOS HIG和Material Design還能幫助設計師系統梳理交互基礎知識，讓你和別人講清楚你所熟悉但又無法確切闡述的設計控件，糾正原有設計誤區，比如橫向進度指示條一定用于指示明確進度，而轉圈進度環代表進度無法衡量嗎，答案是否定的。

3. 方案判斷依據

最關鍵的是iOS HIG和Material Design能為設計方案提供理論支撐和判斷依據，提高正確性和說服力，比如開關控件該怎么設計、行為召喚按鈕該怎么設計，這些平時設計工作問題的答案其實都在設計規范當中。

4. 設計創意來源

iOS HIG和Material Design還能幫助打破思維局限，提供更多開闊的設計創意來源，比如微信懸浮窗的設計，大家都覺得很有創意并且實用，解決了用戶痛點，這個設計其實就來自于Material Design的底部拓展面板組件（Expanding bottom sheet），設計規范里還有很多這樣有意思的交互細節等著大家去發現。

三、如何學習兩大設計規范？

1. 兩大設計規范拆解、導讀

▲圖3 兩大設計規范構成層次

iOS HIG和Material Design原文內容很長，為方便大家閱讀理解，首先給大家導讀兩大設計規范的核心內容。兩個設計規范的目錄結構有差異，但是基本上可以將規范拆解成從抽象到具象的三部分：最底層的是基本設計理念，指導整個規范的設計思想；再上層是具體一點的界面基礎規范，比如導航方式、交互手勢、視覺布局等；最上層就是更加具體的頁面組件了，給出該規范可應用的組件，比如我們常用的彈窗、開關控件等等。接下來和大家逐一導讀這三部分。

▲圖4 兩大設計規范結構導圖

（1） 設計理念

▲圖5 iOS HIG和Material Design的設計理念

iOS HIG設計理念比較多，包括三大設計主旨和六大設計原則，清晰、遵從、深度、整體美學、一致性、直接操作、反饋、隱喻、用戶控制。其中最有系統代表性的是遵從，指好的界面設計要為內容服務，切勿過度設計，設計師常常會因為過度追求美感而忽視這點，iOS通過使用留白、無邊框、簡化UI等方式使得呈現的功能更加清晰，幫助用戶更好地使用產品。

Material Design設計理念相對精簡，有三大設計原則，核心思想來自于現實世界中的材質。和iOS一樣，Material Design的原則中也有隱喻，目的都是為了讓可用性增加，降低用戶學習成本，不過兩者在理念上稍微有些差別，MD很明確在二維界面中引入了三維空間的概念，通過二維的一些表達手段，比如投影、動效等構建出了三維空間Z軸的概念，隱喻現實物體，每個界面元素都有厚度和高度，不同投影暗示了不同元素的高度。另外Material Design對動效的重視程度很高，納入設計原則的一項，動效應該要有意義、要合理，不應該為了炫技而動效。

2. 基礎規范

用戶界面基礎規范，包括導航方式、交互手勢、視覺設計等等，這部分內容比較多雜，兩大規范的結構和重點也各不相同，這里會抽取核心的內容進行對比。

（1）導航

產品基礎規范離不開導航，iOS導航方式中有大家常見的層級導航和扁平導航，還有不常見的內容驅動/體驗驅動導航。Material Design規定的導航類型和iOS差不多，但多了一種反向導航，用戶可以按時間順序在產品中向后移動，Android物理back鍵就是起到這種導航作用。

▲圖6 iOS HIG和Material Design的導航

（2）手勢

手勢是重要的人機交互輸入方式，iOS和Material Design的手勢趨同，如輕擊（Tap）等。另外有一些兩大規范特有的手勢交互，比如iOS由于沒有Android底部back鍵，點擊左上角返回按鈕又太遠了，所以補充使用了滑動手勢返回上級頁面。其次對于隱藏操作，iOS一般使用滑動手勢出現，而Android使用長按手勢出現。這些在規范里都有定義，兩個系統的用戶也形成了習慣，大家要遵守使用。

▲圖7 iOS HIG和Material Design的手勢

（3）顏色

兩個規范在顏色上的特點也是符合他們的設計理念。iOS講究清晰的設計主旨，所以在色彩的使用上會更謹慎克制，而Material Design提倡使用高飽和度的對比色來提升產品的視覺表現力和品牌認知。

▲圖8 iOS HIG和Material Design的顏色

（4）動效

除了兩個規范共有的導航、手勢、顏色等內容外，推薦大家閱讀Material Design動效規范，由于MD對動效的重視程度很高，所以動效這部分的規范內容也非常豐富實用。規范給出了4種動效模式，容器切換模式、共享軸模式、淡入淡出模式、褪色模式，可以根據動效表達意義選擇動效的模式。另外規范還對動效過渡的時間給出了具體建議，比如大過渡區域比小過渡區域的元素動效有更長的持續時間，動效消失的持續時間通常比動效出現的持續時間更短。

▲圖9 Material Design的動效

3. 頁面組件

iOS HIG和Material Design給出的組件非常多，可以大致將頁面組件分為三類：欄、視圖、控件。

▲圖10 iOS HIG和Material Design頁面組件分類

（1）欄

欄用來展示導航和關鍵操作，比如常見的導航欄。欄根據在界面上的位置可以分為：頂部欄、底部欄和側邊欄。iOS設計體系中主要使用頂部欄和底部欄，而Material Design設計體系則主要使用頂部欄和側邊欄，原因是Material Design最早是為Android系統設計的規范，而Android機底部都有三個物理按鍵，如果采用底部欄作為主導航，容易造成用戶誤點擊，不過最新版本的MD規范也開始使用底部欄了（猜測可能是因為越來越多的Android機支持取消底部虛擬按鍵），兩個規范已經呈現融合的趨勢。

▲圖11 iOS HIG和Material Design頁面組件-欄

頂部欄在iOS中叫導航欄，Material Design中叫應用欄，能夠實現不同層級間的導航，也可用于管理當前屏幕內容，均有大小標題兩種樣式。側邊欄只在Material Design體系中出現，叫抽屜導航，由于側邊欄比較隱蔽，一般產品都不會用作主導航方式，都是作為輔助導航方式。底部欄就比較常見了，國內產品基本都是用這個作為主導航方式，底部欄在iOS中叫標簽欄，Material Design中叫底部導航，兩者使用差異不大，但Material Design更注重對界面空間的利用（從側邊導航就能看出來），所以Material Design底部導航用戶上滑時是可以隱藏的。

▲圖12iOS HIG和Material Design頁面組件-頂部欄、側邊欄、底部欄

（2）視圖

視覺用來展示應用程序中看到的主要內容，視圖包含內容視圖和臨時視圖，顧名思義內容視圖就是產品中常態出現的內容，臨時視圖是短暫出現的可以關閉的視圖。

▲圖13 iOS HIG和Material Design頁面組件-視圖

這里提一下我們平時設計工作中用到比較多的臨時視圖。臨視視圖按照設計目的可以分為兩類，一類是用來展示產品自發出現的信息通知、用戶操作后的反饋，形式從強到弱分別是彈窗（Alerts/Dialogs）、橫幅（Banners）、提示條（Snackbars），可以根據場景來選擇使用；另一類是用戶觸發控件后展開更多操作項，包含在當前位置出現和屏幕邊緣出現的，適用于尺寸不同的屏幕場景。

▲圖14 iOS HIG和Material Design頁面組件-臨時視圖

（3）控件

控件是用來進行操作輸入等行為，比如按鈕、開關、滑塊等，兩大設計規范的控件種類也非常多，這里就不一一在文章中介紹了，大家感興趣可以自己閱讀規范原文。

▲圖15 iOS HIG和Material Design頁面組件-控件

2. 兩大設計規范的學習建議

（1）如何閱讀？

設計規范的學習要講究方法，建議大家在新手期直接閱讀設計規范的原文，先進行一次系統性的遍歷式閱讀（可借助上文的導讀），對整體知識有個印象，不要求死記硬背全部記住，閱讀的時候或者平時體驗產品的時候可以想一想產品中哪些應用了規范哪些沒有應用，思考為什么沒用，用了會不會更好，之后再把這些規范當成字典，等真正做的時候再有針對性的查閱。

（2）如何應用？

建議辯證看待規范，學習規范的思想方法，而不是死板遵守，遇到設計問題的時候，規范可以當成工具書來針對性查閱，根據具體設計場景再判斷是否需要遵守。

▲圖16 如何遵守iOSHIG和MaterialDesign

對于iOS和Android操作系統規定的、用戶約定俗稱的習慣，是需要遵守的，比如iOS使用邊緣滑動手勢返回上級頁面、Android使用底部back鍵向后返回等。而對于規范比較模糊沒覆蓋到、用戶已經被教育、或針對當前場景有更合適的設計時，我們可以斟酌是否要遵守。

系統級別的設計規范因為要考慮到大量該系統產品的通用性，所以不可能覆蓋非常全面，很多設計細節都是可以按照具體情況去調整、增加的，比如iOS對刷新控件只規定了常用的下拉頁面內容刷新，而淘寶首創了下拉距離超過閾值進入二樓，利用隱藏的頁面空間和手勢，創造驚喜且實用、被行業復用的設計。

所以我們設計師在熟悉規范、學習思想后，具體設計時還是要從實際場景和問題出發，敢于挑戰和勇于創新，考慮是否有更優秀的解決方案，設計規范規定了你的設計下限，能夠保證你的設計不出錯，也就是70分，但可能會有更令人驚艷的90分以上的設計，當這個設計足夠好的時候，也許你的設計就會成為行業約定俗成的新規范。

四、小結

最后小結一下全文的重點：

1. 什么是兩大設計規范：設計規范分為應用級、平臺級、系統級，兩大設計規范iOS Human Interface Guidelines和MaterialDesign屬于系統級規范。
2. 為什么要學習兩大設計規范：提供設計理念指導、系統交互知識、方案判斷依據、設計創意來源。
3. 如何學習兩大設計規范：兩大設計規范均可以拆解成從抽象到具象的三部分：設計理念、基礎規范、頁面組件。建議先遍歷式全文通讀、建立認知，等真正使用的時候再當成字典有針對性的查閱，根據具體設計場景判斷如何使用，嘗試突破和創新。