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

本篇分析對比是基于各自官網(wǎng)最新的Material design與iOS Human Interface Guidelines文檔，官方文檔地址將在文末給出，供各位交流學(xué)習(xí)。

規(guī)范目標(biāo)與原則

Material Design（以下簡稱MD）是谷歌設(shè)計的一套視覺語言設(shè)計規(guī)范，也是Android Design演進的一種設(shè)計規(guī)范。在MD開篇，谷歌公司就表達了自己的期望：創(chuàng)造一種視覺語言，能夠?qū)⒔?jīng)典的設(shè)計原則與創(chuàng)新的科學(xué)技術(shù)結(jié)合起來；開發(fā)一個能夠跨平臺使用的底層系統(tǒng)，保證用戶在不同平臺上都能夠擁有統(tǒng)一的體驗。與此相適應(yīng)的MD規(guī)范的設(shè)計原則是：

• Material 是一種隱喻（Material is the metaphor）
• 醒目，圖像，刻意（Bold, graphic, intentional）
• 運動是有意義的（Motion provides meaning）

iOS Human Interface Guidelines（以下簡稱HIG）是蘋果公司針對iOS設(shè)計的一套人機交互指南，目的是為了使運行在iOS上的應(yīng)用都能遵從一套特定的視覺以及交互特性，從而能夠在風(fēng)格上進行統(tǒng)一。?iOS HIG規(guī)范的設(shè)計原則是：

• 審美的完整性
• 一致性
• 操作的直接性
• 有反饋
• 采用隱喻
• 用戶行為可控

文檔結(jié)構(gòu)的對比

本章主要從文檔結(jié)構(gòu)角度對兩份官方文檔進行對比分析。希望能夠從全局視角出發(fā)，分析兩份設(shè)計規(guī)范編寫過程中的側(cè)重點。

從圖1中的文檔結(jié)構(gòu)中我們可以看出，在側(cè)重點上兩者是存在一定差異的，MD側(cè)重于規(guī)范軟件的視覺表現(xiàn)效果而HIC側(cè)重于最大化利用系統(tǒng)原生資源。

MD文檔中共有10個一級目錄，其中動態(tài)效果，風(fēng)格，布局，要素以及模式這5個方面從本質(zhì)而言都是對軟件的視覺表現(xiàn)效果進行約束。例如動態(tài)效果中，文檔對material變形的動態(tài)效果就作出了嚴(yán)格規(guī)定，輻射變換適用于圓形至方形而不能用于兩個相似的形狀。而在HIC文檔的11個一級目錄中，僅在“視覺設(shè)計”，“bar”，“視圖”與“控制”這四個主題中存在著對軟件的視覺表現(xiàn)效果進行規(guī)范。在其余的部分，文檔更多的是在介紹該部分有哪些系統(tǒng)原生的功能與設(shè)計可以滿足對應(yīng)的需求，在鼓勵重用原生資源的同時，也支持設(shè)計師進行原創(chuàng)。

設(shè)計細節(jié)對比

本章選擇從按鈕這個基本元素入手，通過比較同一項目中具體的差異來分析兩者在設(shè)計思路上的差異。

1. MD中的按鈕

整體來看，MD中對按鈕進行了非常詳細的規(guī)范，即在一個確定的場景中以什么樣的方式使用哪一種按鈕是已經(jīng)確定了的。在文檔中，如圖2所示，按鈕依據(jù)表現(xiàn)形式（高度，形狀）被分為3類標(biāo)準(zhǔn)按鈕：Floating action buttons、 Flat buttons以及Raised buttons。在全局范圍內(nèi)，文檔首先對按鈕的風(fēng)格進行了規(guī)范，包括文字形式，按鈕可達性要求，按鈕邊角弧度要求，密集度以及大小，具體詳見表1。而后在詳細介紹中，文檔對按鈕的的用途，透明度，行為又再次進行了規(guī)范。

2. HIG中的按鈕

相較于MD中對按鈕的規(guī)范，HIG中的規(guī)范則更為寬松，在我看來甚至不能稱之為規(guī)范。在一開始文檔便說明了系統(tǒng)提供了非常多的預(yù)制按鈕樣式足以應(yīng)付大多數(shù)的情況，同時也支持設(shè)計人員對按鈕樣式進行設(shè)計。隨后在具體介紹部分，文檔選擇了三個圖標(biāo)進行了說明。HIG中按鈕

下面以系統(tǒng)按鈕（System button）作為示例進行說明。經(jīng)過整理，我們將規(guī)范以表2的形式展現(xiàn)出來。對內(nèi)容進行分析我們可以發(fā)現(xiàn)：HIG更側(cè)重功能性。在按鈕的規(guī)范中，文檔對外形并未做過多要求，僅僅在第四條對其邊界與背景的有無作了建議。于此同時，值得注意的是文檔對按鈕所承載的文字內(nèi)容作了3條規(guī)范：動詞，大寫，簡短。這也意味著在按鈕設(shè)計的時候我們無需過多考慮按鈕的是否足夠美觀，形狀設(shè)計是否與系統(tǒng)相適應(yīng)，而應(yīng)該側(cè)重于用戶是否能夠直觀地理解每一個按鈕背后代表的操作與操作帶來的結(jié)果。

3.對比分析

按鈕除了觸發(fā)交互動作的顯性功能外，更重要是他具有的隱性作用：信息傳達，當(dāng)然，它同時也應(yīng)該兼具修飾功能。引用MD中對按鈕的定義“Buttons communicate the action that will occur when the user touches them”，我們可以知道按鈕主要的作用是對將會發(fā)生的事件進行預(yù)告，告訴用戶按了以后會發(fā)生什么。

在隱性的修飾功能和信息傳達功能中，MD規(guī)范顯然更注重修飾功能的規(guī)范，對于每一個按鈕的大小，形式所處層級以及用途都有一個明確的規(guī)定，它希望通過一致的設(shè)計規(guī)范使按鈕這個元素能夠分工明確，表現(xiàn)統(tǒng)一。這樣一種設(shè)計最終能減少用戶在不同應(yīng)用和設(shè)備間切換時的學(xué)習(xí)成本，進而增加了這種設(shè)計語言的易用性。

而HIG規(guī)范則相對而言更注重信息傳達的效率。在設(shè)計theme中第一位的是clarity，在按鈕這個元素中，這樣一種設(shè)計思想帶來的結(jié)果就是注重信息傳達效率，減少不必要的設(shè)計元素的干擾：慎用邊框與背景，放個清清楚楚的字在那里告訴用戶這是干嘛的就好了。

結(jié)論

縱觀MD規(guī)范與HIG規(guī)范，我們會發(fā)現(xiàn)按鈕這一個元素所呈現(xiàn)出來的兩者的不同其實非常有代表性。如果說MD像一個事無巨細的媽媽，各個元素的分類，使用場景，大小，弧度，顏色風(fēng)格都設(shè)計地清清楚楚，那么HIG則更像是一個神經(jīng)大條的爸爸，我這有挺多東西你拿去用，差不多就是這樣做，但你別那樣做。這是非常明顯的區(qū)別，但下面我將從設(shè)計思路以及設(shè)計目標(biāo)的角度來說明兩者的不同。

1. 從設(shè)計思路的角度而言，兩者的設(shè)計思路是不一樣的

MD規(guī)范是一種對設(shè)備內(nèi)虛擬世界的隱喻。它認為手機是一個盒子，里面裝載了一個虛擬的三維世界，每一個物件都是以一種名為material的形式存在的，它具有長度，寬度，厚度，同時也占據(jù)著一定的空間，同時通過光效投影的效果來表現(xiàn)不同物件的層級關(guān)系。這樣一種模擬是MD規(guī)范的設(shè)計基礎(chǔ)，也是其必須遵循的物理法則。在設(shè)備中，我們所有的操作都是在對Material進行操作：切換一個Material，滑動一個Material，按壓會使某些Material的高度發(fā)生變化，但始終不會穿過它下層的Material。這樣種模擬在交互體驗上會給人一種非常自然的感覺，仿佛手機里面的東西就是真實存在的，就像辦公桌上的一疊疊紙一樣，我平時挪動文件的時候會發(fā)生什么事情，在這里面就會發(fā)生什么事情。

HIG規(guī)范最初也是采用了擬物的思路，但目前它似乎讓設(shè)計回歸到了語言的本質(zhì)——傳遞信息，雖然也保存了暗喻這一原則。在HIG規(guī)范中，符號設(shè)計不再是對現(xiàn)實實物的精準(zhǔn)模擬，而是設(shè)計成象形文字一樣來暗示用戶符號所代表的意義。這樣一種思路的好處是在有限的用戶界面中減少了符號設(shè)計帶來的干擾信息，凸顯了應(yīng)用需要傳達的主要信息。在網(wǎng)上也看到有人說HIG的設(shè)計趨勢是“大而簡，簡而精”，對此我表示非常贊同。從App Store的改版中就能發(fā)現(xiàn)符號設(shè)計已經(jīng)被弱化或者說是簡化，而且與此同時還增加了留白，增大了字體，使主要關(guān)注點都集中在了主要信息上。

2. 從設(shè)計目標(biāo)的角度而言，兩者都追求著一種一致性

雖說兩者都追求著一種一致性，但在我看來兩者的一致性擁有不同的含義。MD規(guī)范的一致性意味著不同設(shè)備間的一致性，這種一致性體現(xiàn)在視覺表現(xiàn)上。而HIG除了能保證視覺表現(xiàn)的一致性以外，更多是考慮應(yīng)用與系統(tǒng)間的一致性，這種一致性體現(xiàn)在功能上。

就MD而言，細致的規(guī)則能保證不同設(shè)備上視覺的一致性。在我看來，細致的規(guī)范要求就是為了應(yīng)對不同的設(shè)備間的差異。通過精確地相對位置和大小規(guī)定來保證在不同設(shè)備上同一個應(yīng)用能夠有相對一致的表現(xiàn)，不至于同一個應(yīng)用在兩個設(shè)備間表現(xiàn)差距過大而破壞了這種視覺上的一致性。

對HIG而言，有限的設(shè)備型號與統(tǒng)一風(fēng)格的預(yù)制符號保證了應(yīng)用在視覺上能保持一致性，這包括了兩方面，一是設(shè)備間的一致性，二是應(yīng)用與系統(tǒng)間的一致性。相較與MD規(guī)范而言，HIG規(guī)范本身針對的設(shè)備型號數(shù)量是有限的，其實從顯示屏的尺寸規(guī)格的角度上來講其實也就那么幾種屏幕尺寸，在布局上也不會相差太多，這為保證設(shè)備間的視覺一致性提供了基礎(chǔ)。同時，HIG也提供了較多的與系統(tǒng)符號風(fēng)格相一致的預(yù)制符號，這在一定程度上保證了應(yīng)用與系統(tǒng)間也能夠有一個較好的視覺表現(xiàn)一致性。

HIG規(guī)范也追求著應(yīng)用與系統(tǒng)在功能上保持一致性。HIG規(guī)范中著重介紹了各種系統(tǒng)原生功能與技術(shù)，同時推薦設(shè)計師在任何能夠用到原生功能和技術(shù)的時候應(yīng)用他們，比如指紋識別，面部識別，蘋果支付等。這就使得應(yīng)用與系統(tǒng)之間能夠在功能上保持一致性，例如我們用指紋解鎖應(yīng)用和用指紋解鎖系統(tǒng)在操作體驗上是一樣的。

3. 內(nèi)容側(cè)重不同，導(dǎo)致面向?qū)ο笠泊嬖谳p微差距

MD規(guī)范側(cè)重于視覺效果上的表達，所以更多的面向UI設(shè)計師以及視覺設(shè)計師。而HIG除了基本的視覺與交互規(guī)范，還有對功能和技術(shù)的介紹與引導(dǎo)。面向的則是程序設(shè)計師。

如果將產(chǎn)品比作一座商場，MD關(guān)注的是商場的柜臺、海報怎么布置好看，而HIG除此之外還涉及我的扶梯你應(yīng)該用在哪，我的觀光電梯你應(yīng)該用在哪。

最后談一談對兩者各自價值觀的理解

從我的理解而言，MD的價值觀是自然，統(tǒng)一，和諧。他最初對手機內(nèi)部空間的模擬追求的是一種自然展現(xiàn)，在用戶第一次使用的時候就不會感覺到異樣，第一次使用就能接受他應(yīng)該是這樣，因為他和我們現(xiàn)實世界遵循著同一套物理法則。在兼容上它追求著應(yīng)用間與設(shè)備間的統(tǒng)一，不希望用戶因為硬件設(shè)備的不同而導(dǎo)致學(xué)習(xí)成本的增加，對同一個應(yīng)用產(chǎn)生陌生感。最后在藝術(shù)設(shè)計上，MD通過精確的數(shù)值保證了應(yīng)用的元素在設(shè)計出來后都能有一種和諧的美感。無論是顏色搭配還是層級設(shè)置，亦或是大小分配，都能給用戶一種欣賞藝術(shù)品般的體驗。

HIG的價值觀則是簡和精。簡：減少設(shè)計帶來的干擾，凸顯主要功能與信息的價值，同時推進系統(tǒng)原生功能在應(yīng)用內(nèi)的使用來簡化某些步驟。精：聚焦于信息傳遞與邏輯呈現(xiàn)，讓用戶用最少的時間與精力理解他做了什么，在哪里，將會到哪。

文檔地址：

1. Material design：https://material.io/guidelines/material-design/introduction.html#introduction-principles
2. iOS Human Interface Guidelines: https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

本文由 @hugooooo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 unsplash，基于 CC0 協(xié)議