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