2022-5-29 純純
UI 設(shè)計(jì)師必備的一項(xiàng)基礎(chǔ)能力：規(guī)范能力。
為了避免重復(fù)造輪子，反復(fù)掉入同樣的陷阱，閱讀并熟知主流平臺(tái)的設(shè)計(jì)規(guī)范，是非常有幫助的。
本文內(nèi)容主要介紹了iOS 、Android、Ant Design的相關(guān)規(guī)范，為的是不重復(fù)累贅描述同一個(gè)知識(shí)點(diǎn)，涉及到移動(dòng)端和PC端，主要為了幫助基礎(chǔ)同學(xué)學(xué)習(xí)，適當(dāng)?shù)貏h減了一些有難度的規(guī)范。
設(shè)計(jì)師在設(shè)計(jì)時(shí)并不一定要嚴(yán)格遵守，但對(duì)這些規(guī)范應(yīng)有所了解，并融會(huì)貫通。
通過(guò)設(shè)計(jì)規(guī)范的約束，保證產(chǎn)品的色彩使用、圖標(biāo)圖形、空間、文字、頁(yè)面布局等內(nèi)容保證嚴(yán)格的一致性。
規(guī)范能延續(xù)產(chǎn)品風(fēng)格及特性，保證產(chǎn)品視覺(jué)及交互層面的統(tǒng)一，包括技術(shù)帶來(lái)的變革，增強(qiáng)用戶(hù)的認(rèn)知性，不同程度得提升用戶(hù)體驗(yàn)。
多人合作完成一個(gè)項(xiàng)目時(shí)，需要視覺(jué)規(guī)范。遵循設(shè)計(jì)規(guī)范，保證視覺(jué)統(tǒng)一、提高工作效率。
輔助技術(shù)層搭建框架及布局的規(guī)則更清晰明確，如按鈕、顏色、字體大小等，提高開(kāi)發(fā)效率，確保應(yīng)用軟件最終實(shí)現(xiàn)效果與視覺(jué)設(shè)計(jì)相符合。
視覺(jué)設(shè)計(jì)規(guī)范是指對(duì)設(shè)計(jì)的具體技術(shù)要求，是設(shè)計(jì)工作的規(guī)則。包含了目標(biāo)、功能、技術(shù)指標(biāo)，以及限制條件等。
① 視覺(jué)設(shè)計(jì)規(guī)范，是量化的設(shè)計(jì)指標(biāo)，具有指導(dǎo)性、約束性。
視覺(jué)設(shè)計(jì)規(guī)范要確定?般可用性原則和審美常識(shí)下的避免犯錯(cuò)的方法，以及一旦出現(xiàn)錯(cuò)誤后的補(bǔ)救方案。規(guī)范的第一個(gè)目的是減少設(shè)計(jì)過(guò)程中出錯(cuò)的次數(shù)，針對(duì)新手設(shè)計(jì)師、第三方團(tuán)隊(duì)，可以很好地做到經(jīng)驗(yàn)傳遞，迅速了解上手。減少標(biāo)注時(shí)間，提高前端開(kāi)發(fā)質(zhì)量。
② 視覺(jué)設(shè)計(jì)規(guī)范，是確定關(guān)鍵因素，要有有效性、復(fù)用性。
獲得該設(shè)計(jì)規(guī)范針對(duì)范圍內(nèi)的關(guān)鍵點(diǎn)，包括設(shè)計(jì)方向和設(shè)計(jì)元素，以通過(guò)項(xiàng)目設(shè)計(jì)的過(guò)程，達(dá)到團(tuán)隊(duì)成員的更加密切的配合效果。促進(jìn)多人協(xié)作，解決視覺(jué)不統(tǒng)?現(xiàn)象。
① 品牌規(guī)范：塑造形象以及應(yīng)用的規(guī)范。主要包含了標(biāo)識(shí)的標(biāo)準(zhǔn)制圖，配色字體等。以及常用的搭配方式。
?個(gè)企業(yè)或者?個(gè)產(chǎn)品，都有相應(yīng)的品牌視覺(jué)識(shí)別系統(tǒng)（VIS）。品牌視覺(jué)識(shí)別系統(tǒng)是視覺(jué)設(shè)計(jì)最好的參考基礎(chǔ)，既然是?種指導(dǎo)體系或者說(shuō)是參考，那么也相應(yīng)地會(huì)有品牌的規(guī)范。
② 平臺(tái)設(shè)計(jì)語(yǔ)言規(guī)范：平臺(tái)理念、遵循規(guī)范的好處、某種應(yīng)用的生態(tài)。比如 Google 和 Apple 制定的規(guī)范。針對(duì)第三方的規(guī)范，主要旨在讓這些第三方的設(shè)計(jì)更兼容平臺(tái)應(yīng)用。通常制定了大的方向和規(guī)則。并且會(huì)提供很多基礎(chǔ)的設(shè)計(jì)元素和插件。
③ 產(chǎn)品業(yè)務(wù)規(guī)范：側(cè)重在產(chǎn)品設(shè)計(jì)和實(shí)現(xiàn)層，內(nèi)容清晰并且實(shí)用，標(biāo)注詳盡，方便設(shè)計(jì)師們使用。更注重個(gè)性化的部分。
https://material.io/
Material Design 規(guī)范在于統(tǒng)一 Google 多種平臺(tái)下的一致性，代表 Google 全新的體驗(yàn)。 包含豐富的色彩、空間的層次、流暢的動(dòng)效、多樣的組件。
谷歌的想法是讓谷歌平臺(tái)上的開(kāi)發(fā)者掌握這個(gè)新框架，從而讓所有應(yīng)用就有統(tǒng)一的外觀，就像是蘋(píng)果向開(kāi)發(fā)者提出的設(shè)計(jì)原則一樣。
從設(shè)計(jì)角度：建立共同的設(shè)計(jì)語(yǔ)言，將產(chǎn)品風(fēng)格、品牌及交互形式統(tǒng)一起來(lái)。
從使用角度：提高產(chǎn)品認(rèn)知度，提升品牌延續(xù)性及產(chǎn)品體驗(yàn)的一致性。
Material Design 是基于三維空間的設(shè)計(jì)語(yǔ)言。 包含光線(xiàn)、材質(zhì)、陰影。在 Material 環(huán)境中，虛擬燈光照射整個(gè)場(chǎng)景。
Material 有自身固定不變的外在特征和內(nèi)在行為邏輯 ，理解這些固有的屬性有助于實(shí)際的設(shè)計(jì)項(xiàng)目。
? 立體性
? 空間位置的唯一性
? 不可穿透
? 形狀可變化
? 沿水平方向做變化
? 不可彎曲
? 能與其他材質(zhì)對(duì)象合并
? 分裂，再合并
? 可沿任何軸上移動(dòng)
Material 借鑒了現(xiàn)實(shí)物理世界中的物質(zhì)特性，并將其運(yùn)用在虛擬三維空間中的 Material 元素上， 有利于幫助用戶(hù)理解信息層級(jí)，同時(shí)可以統(tǒng)一各應(yīng)用之間的體驗(yàn)。
投影提供了元素深度和運(yùn)動(dòng)方向的重要視覺(jué)線(xiàn)索；在運(yùn)動(dòng)中，投影提供了元素移動(dòng)方向及高度變化。
https://developer.apple.com/desig
iOS 設(shè)計(jì)規(guī)范逝之蘋(píng)果開(kāi)發(fā)者官網(wǎng)上面的 iOS 人機(jī)交互指南（iOS Human Interface Guideline）。制作這個(gè)規(guī)范的目的是為了讓所有安裝到 iOS 系統(tǒng)的 App 都遵從某些特定的視覺(jué)特性、交互特性，以達(dá)到風(fēng)格一致的使用體驗(yàn)。另一層面，也是便于讓設(shè)計(jì)人員和開(kāi)發(fā)人員能夠更好地理解 iOS 系統(tǒng)，更合理的運(yùn)用系統(tǒng)提供的功能和接口，更高效地制作出 App。
在整個(gè) iOS 系統(tǒng)中，每一種尺寸下的文本信息都應(yīng)該是易讀的，圖標(biāo)應(yīng)該是精確易懂的，每一個(gè)裝飾應(yīng)該是精巧適當(dāng)?shù)模腋有枰⒅毓δ茯?qū)動(dòng)設(shè)計(jì)的原則。利用留白、色彩、字體、圖像和界面元素巧妙的突出重要內(nèi)容并傳達(dá)其不同的交互性。
在簡(jiǎn)潔美觀的界面中清晰流暢的動(dòng)畫(huà)效果可以幫助用戶(hù)更容易理解內(nèi)容并與之進(jìn)行交互，而不會(huì)對(duì)用戶(hù)的操作產(chǎn)生干擾。內(nèi)容全屏顯示時(shí)，半透明或者模糊處理的方式可以提示用戶(hù)更多的內(nèi)容。減少使用邊框，漸變及陰影可以使界面輕 量化，突出顯示內(nèi)容（內(nèi)容優(yōu)先）。
不同的視覺(jué)層次和逼真生動(dòng)的動(dòng)畫(huà)效果 可以表達(dá)界面更深層次的內(nèi)容，賦予了界面活力，使用戶(hù)對(duì)界面內(nèi)容更容易理解。易于發(fā)現(xiàn)并易于觸摸的元素可以提升用戶(hù)體驗(yàn)的愉悅感，用戶(hù)在操作功能時(shí)不至于迷失。當(dāng)用戶(hù)在瀏覽內(nèi)容時(shí)，流暢的轉(zhuǎn)場(chǎng)效果提供了一種縱深感。
為了最大限度地提高影響力和覆蓋面，在應(yīng)用設(shè)計(jì)規(guī)范時(shí)應(yīng)牢記以下原則：
（1）審美完整（Aesthetic Integrity）
審美完整性體現(xiàn)了 App 的外觀和行為與其功能的整合程度。例如，一個(gè)幫助用戶(hù)執(zhí)行嚴(yán)肅任務(wù)的 App 可以通過(guò)微妙、不顯眼的圖形、標(biāo)準(zhǔn)控件和可預(yù)測(cè)的行為來(lái)保持他們的專(zhuān)注。
另一方面，沉浸式的 App，比如游戲 App等，就可以提供吸引人的外觀，傳遞樂(lè)趣和刺激感，同時(shí)鼓勵(lì)發(fā)現(xiàn)。
系統(tǒng)提供的界面元素、眾所周知的圖標(biāo)、標(biāo)準(zhǔn)的文本樣式和統(tǒng)一的術(shù)語(yǔ)來(lái)實(shí)現(xiàn)熟悉的標(biāo)準(zhǔn)和范例可以使得一個(gè) App 的設(shè)計(jì)符合一致性。
易用性指的是用戶(hù)可以理解屏幕的內(nèi)容，用手勢(shì)、觸動(dòng)屏幕等動(dòng)作直接操作，并且，用戶(hù)通過(guò)直接操縱，可以看到他們的行動(dòng)的直接的、可見(jiàn)的結(jié)果。
反饋指對(duì)用戶(hù)的行動(dòng)進(jìn)行了確認(rèn)，并且通過(guò)顯示行動(dòng)結(jié)果以使用戶(hù)了解情況。iOS 系統(tǒng)的 App 要為用戶(hù)的每一項(xiàng)操作提供可感知的反饋。如：輕觸時(shí)會(huì)突出顯示交互元素；進(jìn)度指示器會(huì)傳達(dá)長(zhǎng)時(shí)間運(yùn)行的項(xiàng)目的狀態(tài)；動(dòng)畫(huà)和音效有助于闡明操作的結(jié)果。
當(dāng)一個(gè) App 中的虛擬元素以及動(dòng)作都是用戶(hù)對(duì)熟悉事物的隱喻的時(shí)候（包括現(xiàn)實(shí)世界和數(shù)字世界），用戶(hù)會(huì)學(xué)習(xí)的更快。比如，用戶(hù)移動(dòng)視圖來(lái)查看更多內(nèi)容；拖拽內(nèi)容；切換開(kāi)關(guān)、移動(dòng)滑塊并且直接滾動(dòng)來(lái)選取值；甚至可以像翻書(shū)或雜志一樣輕快的翻頁(yè)。
在整個(gè) iOS 中，用戶(hù)是掌控者，而不是 App，App可以建議一個(gè)行動(dòng)方案或者警示危險(xiǎn)后果，但 App 不能替用戶(hù)做決策。
好的 App 可以在用戶(hù)授權(quán)和避免不必要的結(jié)果之間找到正確的平衡。
App 可以通過(guò)交互元素，確認(rèn)、取消的提醒以使得用戶(hù)覺(jué)得自己在控制。
https://ant.design/index-cn
Ant Design服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系，常用于PC端設(shè)計(jì)規(guī)范，基于「自然」、「確定性」、「意義感」、「生長(zhǎng)性」四大設(shè)計(jì)價(jià)值觀，通過(guò)模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專(zhuān)注于更好的用戶(hù)體驗(yàn)。
1.Ant Design平臺(tái)的設(shè)計(jì)原則
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺(jué)單元；反之，則它們的距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺(jué)單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶(hù)對(duì)頁(yè)面結(jié)構(gòu)和信息層次一目了然。
正如「格式塔學(xué)派」中的連續(xù)律（Law of Continuity）所描述的，在知覺(jué)過(guò)程中人們往往傾向于使知覺(jué)對(duì)象的直線(xiàn)繼續(xù)成為直線(xiàn)，使曲線(xiàn)繼續(xù)成為曲線(xiàn)。在界面設(shè)計(jì)中，將元素進(jìn)行對(duì)齊，既符合用戶(hù)的認(rèn)知特性，也能引導(dǎo)視覺(jué)流向，讓用戶(hù)更流暢地接收信息。
對(duì)比是增加視覺(jué)效果最有效方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶(hù)快速識(shí)別關(guān)鍵信息。
相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效降低用戶(hù)的學(xué)習(xí)成本，也可以幫助用戶(hù)識(shí)別出這些元素之間的關(guān)聯(lián)性。重復(fù)元素可以是一條粗線(xiàn)、一種線(xiàn)框，某種相同的顏色、設(shè)計(jì)要素、設(shè)計(jì)風(fēng)格，某種格式、空間關(guān)系等。
正如 Alan Cooper 所言：「需要在哪里輸出，就要允許在哪里輸入」。這就是直接操作的原理。
eg：不要為了編輯內(nèi)容而打開(kāi)另一個(gè)頁(yè)面，應(yīng)該直接在上下文中實(shí)現(xiàn)編輯。
能在這個(gè)頁(yè)面解決的問(wèn)題，就不要去其它頁(yè)面解決，因?yàn)槿魏雾?yè)面刷新和跳轉(zhuǎn)都會(huì)引起變化盲視（Change Blindness），導(dǎo)致用戶(hù)心流（Flow）被打斷。頻繁的頁(yè)面刷新和跳轉(zhuǎn)，就像在看戲時(shí)，演員說(shuō)完一行臺(tái)詞就安排一次謝幕一樣。
根據(jù)費(fèi)茨法則（Fitts's Law）所描述的，如果用戶(hù)鼠標(biāo)移動(dòng)距離越少、對(duì)象相對(duì)目標(biāo)越大，那么用戶(hù)越容易操作。通過(guò)運(yùn)用上下文工具（即：放在內(nèi)容中的操作工具），使內(nèi)容和操作融合，從而簡(jiǎn)化交互。
很多富交互模式（eg：「拖放」、「行內(nèi)編輯」、「上下文工具」）都有一個(gè)共同問(wèn)題，就是缺少易發(fā)現(xiàn)性。所以「提供邀請(qǐng)」是成功完成人機(jī)交互的關(guān)鍵所在。
邀請(qǐng)就是引導(dǎo)用戶(hù)進(jìn)入下一個(gè)交互層次的提醒和暗示，通常包括意符（eg：實(shí)時(shí)的提示信息）和可供性，以表明在下一個(gè)界面可以做什么。當(dāng)可供性中可感知的部分（Perceived Affordance）表現(xiàn)為意符時(shí)，人機(jī)交互的過(guò)程往往更加自然、順暢。
人腦灰質(zhì)（Gray Matter）會(huì)對(duì)動(dòng)態(tài)的事物（eg：移動(dòng)、形變、色變等）保持敏感。在界面中，適當(dāng)?shù)募尤胍恍┻^(guò)渡效果，能讓界面保持生動(dòng)，同時(shí)也能增強(qiáng)用戶(hù)和界面的溝通。
「提供邀請(qǐng)」的強(qiáng)大體現(xiàn)在 交互之前 給出反饋，解決易發(fā)現(xiàn)性問(wèn)題；「巧用過(guò)渡」的有用體現(xiàn)在它能夠在 交互期間 為用戶(hù)提供視覺(jué)反饋；「即時(shí)反應(yīng)」的重要性體現(xiàn)在 交互之后 立即給出反饋。
就像「牛頓第三定律」所描述作用力和反作用一樣，用戶(hù)進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個(gè)對(duì)應(yīng)的反饋，同時(shí)輸入量級(jí)越大、重要性越高，那么反饋量級(jí)越大、重要性越高。
雖然反饋太多（準(zhǔn)確的說(shuō)，錯(cuò)誤的反饋太多）是一個(gè)問(wèn)題，但是反饋太少甚至沒(méi)有反饋的系統(tǒng)，則讓人感覺(jué)遲鈍和笨拙，用戶(hù)體驗(yàn)更差。
當(dāng)然，這并不代表了解這些就能做出優(yōu)秀的設(shè)計(jì)方案了，英文水平比較好的同學(xué)建議直接讀原文，直接從 Material Design 和 iOS 的官網(wǎng)進(jìn)行規(guī)范學(xué)習(xí)，效果更佳。當(dāng)然如果英文水平有限，網(wǎng)上也有很多譯版方便大家閱讀。
而關(guān)于Ant Design的設(shè)計(jì)規(guī)范，可以去官網(wǎng)查閱更多的詳細(xì)內(nèi)容，但PC端的設(shè)計(jì)規(guī)范平臺(tái)還有很多，字節(jié)、騰訊等設(shè)計(jì)官網(wǎng)都有。
記得對(duì)于規(guī)范不需要死記硬背，練多了自然能夠記住。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn