如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

上周和小伙伴一起翻譯了一篇 medium 上點贊量超多的文章（8.1k贊），該文作者在電子產(chǎn)品的界面設(shè)計領(lǐng)域有13年的從業(yè)經(jīng)驗，也經(jīng)歷了從架構(gòu)師到用戶體驗設(shè)計師再到如今的產(chǎn)品設(shè)計師的多次職業(yè)轉(zhuǎn)換，文章主要是講他對用戶體驗設(shè)計的犀利吐槽，以及對產(chǎn)品設(shè)計所代表的工作方法的無限看好?；蛟S觀點上并沒有什么新意，但是，就像某大佬說的，設(shè)計是對混亂的馴服。想要馴服混亂僅憑理論套路是遠遠不夠的，而設(shè)計師真正的價值或許也就在于此：投身于未知與混沌的灰色之中，并且還要從中分出黑白。

那么為什么我要翻譯這篇巨長的文章呢？就我個人而言，單純很喜歡作者傲慢中帶著犀利的風(fēng)格，就像看一篇文字版的吐槽大會般有趣。我在翻譯的時候加上了自己的思考和看法，所以，文末也留了 medium 的原文鏈接，可以去查看作者的本意，并觀看其中的演講視頻。

這是關(guān)于我從架構(gòu)師轉(zhuǎn)變到用戶體驗設(shè)計師的一段經(jīng)歷，以及我是如何看待行業(yè)現(xiàn)狀的。

十年前的某一天，我決定要把我的職業(yè)從架構(gòu)師改成用戶體驗設(shè)計師。我記得當時很多可用性專家、架構(gòu)師、界面設(shè)計師、交互設(shè)計師對我說：這只是潮流而已，「用戶體驗設(shè)計」這個表述并不，簡直就是胡說八道，體驗怎么可能被設(shè)計？

然后在去年，我又突然決定把我的職業(yè)從用戶體驗設(shè)計師改成產(chǎn)品設(shè)計師。同樣的，一群用戶體驗設(shè)計師又來對我說，這只是潮流而已，用戶體驗設(shè)計師和產(chǎn)品設(shè)計師之間并沒有什么本質(zhì)的區(qū)別。

但是，對我來說，它們是不同的。在我看來，產(chǎn)品設(shè)計更加的謙虛真誠。我覺得這是用戶體驗設(shè)計師不具備但最應(yīng)該學(xué)會的：謙虛務(wù)實。

我不是在勸你像我一樣改換職業(yè)名稱（坦白地說，你最好別這么做），我真的一點兒也不在意。我只是想告訴你，我決定轉(zhuǎn)變的原因，以及我是如何看待行業(yè)現(xiàn)狀的。

很膚淺的話題，聊職稱大概是世界上最無聊的事兒了，但是作為設(shè)計師們，我們又確實很喜歡討論它?；蛟S，這次我們可以聊的更深入一點。

用戶體驗設(shè)計的出現(xiàn)是因為我們設(shè)計師的需求

我一直很喜歡 Alan Cooper 提出的這個詞：交互設(shè)計師（interaction designer）。我認為它很地抓住了這項工作的本質(zhì)。但是早在十年前看來，這個詞的定義就已經(jīng)很狹隘了。數(shù)字產(chǎn)品的設(shè)計師們希望工作能觸及到更多的內(nèi)容，而「用戶體驗設(shè)計」似乎就承擔了這個「需要觸及更廣泛內(nèi)容」的責(zé)任。

它確實抓住了這個需求，現(xiàn)在 UX 這個詞廣泛流傳，每個人都在使用這個縮寫，但問題是每個人對它的理解是不同的。所以，直到現(xiàn)在它也是個令人疑惑的概念。

在Peter Merholz 的一次訪談中，Don Norman 對創(chuàng)造 UX 這個詞的初衷做了如下解釋：

我發(fā)明了這個詞是因為我覺得人機交互和可用性這兩個詞兒太狹隘了。我想要創(chuàng)造一個可以覆蓋人們體驗各個方面的系統(tǒng)，包括圖形設(shè)計，界面，體感交互和這個系統(tǒng)的使用手冊。但從那之后，這個詞就開始廣泛地流傳，慢慢地失去了它本來的意義。

如今它偏離本來的意義越來越遠，以至于 Alan Cooper 先生說：根本沒有用戶體驗設(shè)計這回事。

UX設(shè)計師是如何看待自己的以及他們真正做的是什么？

在我們盡可能擴寬工作邊界的努力之下，我們把 UX 這個氣球吹得快要爆掉了。UX 現(xiàn)在承擔了「設(shè)計不同觸點的體驗」的任務(wù)，包括組織轉(zhuǎn)型，制定策略，改革創(chuàng)新，市場營銷，設(shè)計從 app 到廣告、服務(wù)、設(shè)備、地點、事件，甚至公司文化在內(nèi)的所有事情。

或許用戶體驗確實應(yīng)該做到這些，但是問題是，沒有一個用戶體驗設(shè)計師能一個人把所有的這些事情做好，要創(chuàng)造一個復(fù)雜的產(chǎn)品，你需要的是一個由不同領(lǐng)域?qū)＜医M成的團隊。

我不得不說很多 UX設(shè)計師真的是眼高手低，他們根本不具備足夠的技能或者經(jīng)驗去支撐他們的野心。

我同時也負責(zé)招聘的工作，大多數(shù)申請 UX 這份工作的求職者可以分為以下幾類：

• UI/UX設(shè)計師，其實就是圖形設(shè)計師，他們并不擅長信息架構(gòu)、定義目標和需求，創(chuàng)建交互模型，考慮商業(yè)利益。他們只生存在追波上。
• UX設(shè)計師，他們靠畫規(guī)范的線框圖謀生，有時候也做做可用性測試。（順便說一句，他們是最有可能成長為優(yōu)秀的產(chǎn)品設(shè)計師的人。很多有經(jīng)驗的 UX設(shè)計師叫他們「線框仔」，我真的很討厭這種沒必要的鄙視。他們忘了自己也是這么成長起來的。）
• 空想家，專注于建工作坊，喜歡在墻上貼便利貼和畫布，但是通常沒有把想法轉(zhuǎn)化為實際設(shè)計方案的能力。

當然，以上只是一種簡單的歸納，但是從我的觀察來看，很多做 UX 的都可以歸到這三類人當中，因為真的很少見到那種既懂戰(zhàn)略又會戰(zhàn)術(shù)，既有創(chuàng)造力又有執(zhí)行力，既了解商業(yè)又懂設(shè)計的人才。

UX設(shè)計師日常做的事情以及他們對商業(yè)的價值根本配不上他們的自我認知：「用戶體驗設(shè)計很重要 」。

用戶體驗設(shè)計實際上并不像很多「什么是UX」的文章寫的那樣是所有事情的中心。我推薦你去看Paul Addams在UX London 2018上的優(yōu)秀演講——《The end of Navel Gazing》。標題「用戶中心論的終結(jié)」很好地表達了這個意思。

UX專注于用戶和工具，但是這兩點并不足以解決真正的商業(yè)問題

我觀察到的另一個現(xiàn)象，是關(guān)于用戶體驗設(shè)計目前的狀態(tài)的。UX設(shè)計師們每天都會發(fā)表數(shù)不清的文章，它們大部分都是關(guān)于研究工具以及方法論（例如用戶畫像，用戶體驗地圖，原型制作工具，用戶研究方法等等），各種教程，無關(guān)緊要的圖形設(shè)計趨勢，或者用戶界面細節(jié)。

Fabricio Teixeira 和 Caio Braga 寫了一篇優(yōu)秀的文章來說明這些理論的狹隘之處：

https://essays.uxdesign.cc/state-of-design-publishing/

然而，這些我們經(jīng)常討論的東西，對于處在殘酷商業(yè)競爭環(huán)境下的產(chǎn)品設(shè)計團隊來說，并沒有什么用。因為計劃與管理實際的產(chǎn)品開發(fā)進程和理想的「Design thinking 五步法」之間并沒有太大的關(guān)系。

整個 UX 行業(yè)好像對商業(yè)這部分都沒什么興趣，也難怪，「用戶體驗設(shè)計」這個名字就暗示了他們只關(guān)注用戶。商業(yè)是別人的事。

UX設(shè)計現(xiàn)在很像一個宗教，而且它的信徒的想法通常都很接近

也難怪會冒出 UX 的忠實捍衛(wèi)者們了，如果你膽敢不同意他們的信仰，他們就會把你的心扯出來。

僅僅只要說一句：用戶研究不是總是被需要和有實際意義的。他們就會告訴你如果你不會用戶研究，你就不是一個合格的用戶體驗設(shè)計師。如果你個人并不是很喜歡一些方法論，像用戶畫像或者其他，你最好趕緊默默溜走。

可悲的是，UX們總是想成為最有創(chuàng)新能力的人。但是我認為他們并不是。因為，創(chuàng)新力需要嘗試不同的工作方法，考慮新鮮的想法，要求與眾不同以及靈活多變，敢于實驗，勇于實踐，并擁有商業(yè)頭腦與落地思維。想要成為真正的革新者，需要的是自己去開創(chuàng)自己的道路，去突破規(guī)矩，去冒險。而不是重復(fù)說那些所有人都在說的簡單的陳詞濫調(diào)，遵從那些輕而易舉的方法指南。我覺得 UX設(shè)計師整個群體都搞不清楚地圖和實際道路，模型（或其他噱頭）和現(xiàn)實之間的差別。（只有這些「革新者」的想法才很容易被預(yù)測：因為他們所有人都讀一樣的書，說著同樣的話。）

我感覺我已經(jīng)超越了UX

我從事數(shù)碼產(chǎn)品的設(shè)計有13年了，現(xiàn)在我不覺得我和大多數(shù)的 UX設(shè)計師之間有什么共同點。我覺得我已經(jīng)超越了用戶體驗設(shè)計。我跟產(chǎn)品經(jīng)理或產(chǎn)品需求方之間更為投契。

Peter Merholz 在他的一次演講中說過，用戶體驗這個行業(yè)的出現(xiàn)是因為產(chǎn)品經(jīng)理對用戶體驗缺乏考慮，我同意這種說法。

數(shù)字產(chǎn)品就是我現(xiàn)在正在做的，像網(wǎng)頁，app，界面。我的目標是為我的客戶創(chuàng)造一個成功的產(chǎn)品，一個會幫助他們賺錢或者省錢的產(chǎn)品?？捎眯院陀脩趔w驗只是實現(xiàn)這個目標的一部分，它們很重要，但是說實在的，并不是最終的目的。我不會像大多數(shù)的 UX設(shè)計師那樣不切實際的浪漫主義。

我也需要為我自己和我的公司賺錢，所以我要擅長規(guī)劃一個有效率的設(shè)計流程，估計好預(yù)算，有條有理地和客戶進行合作，銷售與推廣我的工作，招聘人才等等。

我知道我很擅長數(shù)字產(chǎn)品設(shè)計，但是我可能并不擅長做所有類型的設(shè)計。這就是為什么我更喜歡「數(shù)字產(chǎn)品設(shè)計師」這個頭銜的原因了。

我喜歡它的點在于，它更聚焦于產(chǎn)品而不是用戶。它把我的工作放在了資本市場的背景之下。產(chǎn)品需要對顧客有用，但是也需要切實地有利可圖。

對我來說，無論它是什么，聽起來，「產(chǎn)品設(shè)計」比「用戶體驗設(shè)計」都更加的落地。產(chǎn)品設(shè)計更容易被所有人理解，甚至你媽媽也能懂。它不需要太多解釋。用戶體驗只是它的一部分，但是從另一方面講，比起想要解決世界上所有問題的萬能藥UX 來說，產(chǎn)品設(shè)計這個說法更加的謙虛。

現(xiàn)在我大部分時間依然是在做交互設(shè)計和信息架構(gòu)這種傳統(tǒng)工作。我大部分的精力也都是花在制定策略，進程管理和設(shè)想概念的層面。但是我也正在帶上許多的帽子：決策者，界面設(shè)計師，架構(gòu)師，文案，創(chuàng)意總監(jiān)，項目經(jīng)理，產(chǎn)品需求方，用戶研究員，測試人員?？傊睦镉行枰睦锞陀形?。

當然我需要和很多人（他們是各自專業(yè)領(lǐng)域的專家）一起合作來實現(xiàn)我的愿景，然后把它迭代變得更好，更完善。技術(shù)專家，開發(fā)者，圖形設(shè)計師，內(nèi)容設(shè)計師，項目經(jīng)理，甚至律師等等。最后的用戶體驗其實是很多這些人的工作共同作用的結(jié)果。

用戶體驗是很多人工作的結(jié)果，是一個產(chǎn)品或者服務(wù)生產(chǎn)出來的，并不是一個職位的描述。

我會把產(chǎn)品設(shè)計師定位為這樣一個角色：他們是那些為產(chǎn)品功能和形式的最終呈現(xiàn)負責(zé)，并能夠以任何可能的方式對設(shè)計流程以及產(chǎn)品的發(fā)布進行規(guī)劃和優(yōu)化的人。（如果你還把產(chǎn)品設(shè)計僅僅看作是 UI/UX 的另一個名字，這對你毫無幫助）對于很多有經(jīng)驗的 UX設(shè)計師來說，并沒有什么新鮮的，但是產(chǎn)品設(shè)計確實和 UX 不同。

我看到如今，越來越多的有經(jīng)驗的 UX設(shè)計師稱自己是產(chǎn)品設(shè)計師了，所以，也許這是一個潮流吧。又或許是某種原因？

Andy Budd，一個有著很棒的見解的家伙，我一向很尊敬他，最近他發(fā)了一個推特說：UX就像爵士樂，產(chǎn)品設(shè)計就像朋克樂。

好吧，我的看法跟他完全相反。打比方說，如果你想成為一個 UX設(shè)計師，你現(xiàn)在要做的只需要去上個周末課程，學(xué)習(xí)設(shè)計過程的5步法以及5個方法論，像用戶畫像，用戶體驗地圖，愿景圖，你就可以開始干活兒了。

但是成為一個產(chǎn)品設(shè)計者，你需要把產(chǎn)品交付給市場的實際經(jīng)驗，這非常的難，因為經(jīng)常是一團混亂，復(fù)雜的過程。產(chǎn)品設(shè)計就像自由的爵士樂?？赡苈犉饋砘靵y嘈雜，有一點像朋克樂，但是想要把它玩好，你需要很多的技能和經(jīng)驗以及音樂理論的掌握，也需要一些即興創(chuàng)作的能力：改變規(guī)則甚至是反對它們。更不用說，在團隊中，你需要成為整個團隊工作的主導(dǎo)。

無論你想叫自己什么，無論你有多大的夢想，但，也要記得保持真實和謙卑

藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

現(xiàn)在讓我們關(guān)注最常見的設(shè)計專業(yè)：UI/UX設(shè)計師。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

天氣類界面欣賞！

藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

響應(yīng)式已經(jīng)成為網(wǎng)頁設(shè)計的主流，目前已很多網(wǎng)站能兼容手機端 ，但是唯有 dashboard 的界面是相當難在移動端顯示，特別是數(shù)據(jù)復(fù)雜、內(nèi)容較多的后臺數(shù)據(jù)，是很難直接展示到移動端的。

今天我們分享一系列 dashboard UI 設(shè)計作品，主要展示一些用戶數(shù)據(jù)、圖表的可視化組合設(shè)計。這些作品界面布局合理，層級分明，設(shè)計美觀，對要做這類 UI 的同學(xué)有很好的參考價值。

從收集的這些 Dashboard 界面來看，它的展示形式和PC 端有很大的區(qū)別，移動端的后臺只能顯示少量或簡化版的數(shù)據(jù)。比如 PC 一個頁面的功能，在移動端可以分開1-2個頁面來區(qū)分，或者使用類似 Tab 的形式來展現(xiàn)。

如果是手機 WEB 端可以用響應(yīng)式來解決，以節(jié)省成本，但這樣通常交互并不十分友好，如果時間和成本允許的話，建議產(chǎn)品和交互人員策劃新的后臺版本。

藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

在多人團隊里，通常不同的設(shè)計師負責(zé)不同的流程，如果沒有UI設(shè)計規(guī)范，不同的設(shè)計師就會對相同的組件做出不同的方案。產(chǎn)生大量重復(fù)工作，效率比較低。而制作設(shè)計規(guī)范和UI KIT之后，則可以直接利用KIT里的組件快速搭建好頁面，把設(shè)計師從基礎(chǔ)工作中釋放出來，大大提升設(shè)計效率。

目錄

一、為什么要建立規(guī)范

• 用戶體驗一致
• 塑造品牌感
• 利于多人協(xié)作
• 方便維護和更新，減少冗余內(nèi)容

二、規(guī)范的適用范圍

• 適用于處于成長期和成熟期的產(chǎn)品。
• 規(guī)范不是越全越好。適合就是最好。

三、如何建立規(guī)范 

• 整理產(chǎn)品的組件和復(fù)用的內(nèi)容
• 基礎(chǔ)規(guī)范（柵格 間距 基礎(chǔ)網(wǎng)格  顏色 字體 ）
• 組件規(guī)范（按鈕、導(dǎo)航、彈框、缺省圖、標簽、列表、卡片等等）

一、為什么要建立設(shè)計規(guī)范？

1 利于多人協(xié)作，提率

2 增強一致性，塑造品牌感

制作和遵循設(shè)計規(guī)范，能夠保證整個產(chǎn)品的交互效果和視覺風(fēng)格、乃至文案的統(tǒng)一性，提升用戶的體驗。

3 減少冗余內(nèi)容，方便維護和更新

同類內(nèi)容使用一樣的組件，能夠降低輸出的內(nèi)容量，減少冗余的控件和代碼。同時也便于維護，在迭代時進行統(tǒng)一的更新和應(yīng)用。

4 利于工作交接 

方便設(shè)計團隊和其他團隊交接，如果團隊有人員變動，也方便后續(xù)入職的同事能夠通過規(guī)范迅速熟悉產(chǎn)品，快速上手。

二、規(guī)范的適用范圍

前面的文章我提到過，如果產(chǎn)品處于啟動期的話，這個時候最重要的事情是圈到第一波用戶，讓自己活下去。在這個階段產(chǎn)品會頻繁的改版、驗證，迭代非常快，整個團隊可能都處于拼命加班的狀態(tài)。在這種情況下做設(shè)計規(guī)范文檔顯然事倍功半，一個是浪費人力資源，另外就算做了，在頻繁更新的背景下也很難去執(zhí)行。

因此設(shè)計規(guī)范文檔更適合于那些跨越0-1階段的產(chǎn)品，這個時候產(chǎn)品已經(jīng)用有了一定的用戶，團隊也會擴張。這個時候我們可以選擇制作基礎(chǔ)的設(shè)計規(guī)范，比如柵格、配色、字體、圖標規(guī)范等等。對于成熟期的產(chǎn)品來說，大版本更新的周期是非常長的，這個階段通常會制作更為詳細的設(shè)計指南、設(shè)計原則、do & don’t、品牌書、圖標手冊等等。

三、如何建立設(shè)計規(guī)范

電商類的產(chǎn)品對于大家來說都是比較熟悉的，就算不從事這個方面，日常使用也會很頻繁，所以此次案例我們以下面這個電商APP作為示范。

做規(guī)范時通常會有這兩種情況：

1、不打算進行大版本更新的產(chǎn)品

對于小版本迭代的產(chǎn)品來說，建立規(guī)范只需要在sketch里把所有設(shè)計稿進行歸攏和分類。直接根據(jù)現(xiàn)有的稿子梳理出規(guī)范，再對不符合規(guī)范的文件進行調(diào)整即可。

2、新版本 新規(guī)范

而對于需要做新版本并且建立新版本規(guī)范的產(chǎn)品來說，在做設(shè)計稿之前，我們就需要先統(tǒng)一一些基礎(chǔ)的內(nèi)容，比如顏色、字體、柵格等等，然后在設(shè)計過程中去制作KIT、對基礎(chǔ)的規(guī)范進行補充。

四、基礎(chǔ)規(guī)范

1 制定統(tǒng)一的柵格系統(tǒng)

因為現(xiàn)在都是一稿適配多端，所以首先需要確定設(shè)計的基準尺寸，是基于iphone8？還是iphone 8P？或者1080*1920等等……每個公司設(shè)計稿的基準都不一樣，我們是以一倍圖為基準進行設(shè)計的，所以我這里的基準尺寸就是375*667，單位為pt。

柵格一種情況是制定網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)的話首先要制定最小的設(shè)計單位，比如淘寶的最小單位是3，掌閱的最小單位是4，airbnb的最小單位是6……定好最小設(shè)計單位之后，界面中所有間距采用最小單位的倍數(shù)。

假定我們最小單位4的網(wǎng)格，排版時橫向和縱向的間距都是4的倍數(shù)，比如8、12、24。

第二種情況是可以直接建立橫向柵格系統(tǒng)，常用的是12柵格，12柵格比較好的地方是能夠同時被2、3、4整除，因此能夠根據(jù)具體需求靈活的設(shè)計各種模塊。當然如果產(chǎn)品比較輕量化，是不需要這么復(fù)雜的柵格的，可以根據(jù)需求設(shè)置6、4甚至2柵格等等。

2 色彩規(guī)范

色彩規(guī)范主要表明色彩的色值和使用范圍，一般會從品牌色、輔助色、基礎(chǔ)色、狀態(tài)用色等等。如下圖所示。

如果產(chǎn)品常用到漸變的話，需要注明漸變的角度以及漸變色的色值。包括產(chǎn)品如果有夜間模式的話，要額外注明日間和夜間模式下各個顏色的對應(yīng)色值。當然這里的夜間模式說的是真·夜間，而不是微博那種直接加一個黑色透明度蒙層的偽·夜間。

額外提一句，重要內(nèi)容和正文內(nèi)容要保證文本的可識別度，WCAG指南中指出，文本和背景色的對比度需要達到3：1。大家可以通過

https://webaim.org/resources/contrastchecker/ 的顏色對比檢查器來核對顏色。我這里的品牌色和強調(diào)色對比度為3：1和6.3：1，而輔助顏色（比如標簽）的對比度則在2-3之間。

3 字體

字體規(guī)范最需要注意的是提取出各個場景下需要用的字體和字號。

需要注意的是，要標注上應(yīng)用場景方便其他人理解。不然其他成員也并不知道到底什么時候應(yīng)用一級標題、什么時候用二級標題。

4 圖標

通常來說圖標分為兩種，功能性圖標和展示性圖標。

功能性圖標是為了引導(dǎo)用戶理解和操作，需要表現(xiàn)和簡介，方便用戶識別其含義。功能性圖標常規(guī)狀態(tài)下為無彩色。

展示性圖標通常為頁面入口，會有更多形狀、顏色、質(zhì)感的表達，吸引用戶的注意力和點擊欲望，強調(diào)差異性，比如各種品類區(qū)的圖標、徽章、等級圖標等等。

圖標規(guī)范通常來說會先定一些基礎(chǔ)尺寸，梳理好各個頁面的圖標尺寸，進行整合，最后確定好幾個基礎(chǔ)尺寸，比如我這里的基礎(chǔ)尺寸是4個。功能層級一致的圖標尺寸要一致。

為了保證不同形狀的圖標在視覺上保持大小一致，會制作一個圖標的基礎(chǔ)制作說明。制作說明里會統(tǒng)一圖標的圓角、描邊的粗細；如果是涉及到展示性圖標的話，還會有圖標的視角選擇、配色的選擇、以及如何表現(xiàn)質(zhì)感等等等等

5 默認圖

電商APP的話有大量的產(chǎn)品圖片，所以我們也把默認的占位圖樣式進行了統(tǒng)一。因為我們這里樣式都是一致的，所以采用了統(tǒng)一的規(guī)范，如果有多種默認樣式，或者有其他類型的占位圖，需要分別進行說明。

五、頁面組件

頁面組件通常包括導(dǎo)航欄、工具欄、彈框、列表、卡片、空狀態(tài)等等，按照原子設(shè)計理念來說，還可以把組件拆分為原子、分子等更小的基礎(chǔ)設(shè)計組件，比如角標、標簽、按鈕、圖像、優(yōu)惠券、選擇器、進度指示器等等

頁面組件除了梳理出規(guī)范之外，通常會整理成一整套UI KIT，保存為sketch文件日常拖拽使用，或者導(dǎo)入為Libraries直接調(diào)用。當然，也可以直接在KIT上備注出規(guī)范和注意事項，具體輸出什么格式這個看團隊的需求即可。

因為組件部分是一個比較龐大的內(nèi)容，需要根據(jù)具體產(chǎn)品

1按鈕

按鈕一般有懸浮按鈕、填充按鈕、線框按鈕和文本按鈕等類型。其中懸浮按鈕具有最高的優(yōu)先級，屬于強引導(dǎo)型按鈕。

按鈕通常會有三種狀態(tài)，常規(guī)狀態(tài)、點擊狀態(tài)和不可用狀態(tài)。因此在規(guī)范中需要標明按鈕在這三種狀態(tài)下的樣式，比如顏色、投影、圓角、文字大小等等

除此以外，也可能會有加載狀態(tài)，也就是在點擊按鈕后，如果有1S以上的數(shù)據(jù)延遲，通常會考慮觸發(fā)按鈕的加載狀態(tài)。加載狀態(tài)的按鈕樣式為按鈕上顯示進度指示器。

2 導(dǎo)航

對現(xiàn)有頁面的導(dǎo)航進行收攏和分類，比如我這里分類為常規(guī)標題樣式、標簽樣式、搜索框樣式、無標題樣式、字母導(dǎo)航……

標題需要注意文字的極限值，ICON尺寸和位置的話要考慮最小可點擊區(qū)域，我這里icon的尺寸設(shè)置為24pt，但是熱區(qū)是44pt，所以要注意間距的設(shè)置，熱區(qū)不能重疊。

3 標簽

標簽通常有多個使用場景，我們可以對標簽進行分組，比如運營類標簽、內(nèi)容屬性標簽、篩選標簽等等

然后對每類的標簽統(tǒng)一樣式、文字內(nèi)邊距以及說明適用場景。

4 彈窗

彈窗是為了提示和通知用戶而位于頁面內(nèi)容之上的一種控件。它是引導(dǎo)用戶專注于某一項任務(wù)，用戶可以通過操作來關(guān)閉彈框。彈框包含模態(tài)（對話框、操作菜單）和非模態(tài)（toast、 snake bar等）兩種形式。

模態(tài)彈窗需要定義蒙層的樣式（顏色、透明度），以及彈框內(nèi)的文字說明和按鈕。

我這里拿一個對話框的規(guī)范進行舉例，這是一個無ICON的雙按鈕對話框，因此在這里我們需要說明標題、正文文本、按鈕以及背景遮罩的信息，還有字號、行距、文字極限值、文字色、按鈕的狀態(tài)等等……

除此之外，組件類的規(guī)范可以配上常用案例、don’t&do，會更方便團隊人員理解，防止錯誤狀況。

5 列表

列表是由多個等寬的行組成的、按照一定規(guī)律排列的連續(xù)條目。列表在一些資訊類產(chǎn)品里會有更多的組合形式。我這款產(chǎn)品里用到的列表主要是單行和雙行列表，那么我們就整理出對應(yīng)的列表類型和需要說明的事項。

六、結(jié)語

寫這篇文的初衷，是因為從去年底我建立公眾號，并且在站酷發(fā)表了一些文章，得到了很多人的認可。很多粉絲私信我各種問題，陸續(xù)有人問我設(shè)計規(guī)范怎么做、交互規(guī)范什么樣之類的問題。但是公司內(nèi)部的文件確實沒有辦法公開分享，所以我就想說，那不如專門寫一篇文章詳細教大家制作移動UI設(shè)計規(guī)范吧。

這篇的基礎(chǔ)部分我做的比較詳細，組件部分寫的有些概括，主要是因為組件部分不是通用的，要根據(jù)自己的稿子進行整理和歸納，歸納好之后做好標注和規(guī)范說明即可，這部分是一個羅列的內(nèi)容，所以就不必展開了……

當然還有很多內(nèi)容沒有展開說，比如在Sketch里把KIT制作成Libraries統(tǒng)一使用，但是我想作為一篇設(shè)計規(guī)范入門教程目前應(yīng)該足夠了，更多的內(nèi)容我在后續(xù)開新文去補充吧。

藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

 排行榜干貨集合。

藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

今天分享軟件后臺界面設(shè)計，

藍設(shè)計( www.lanlanwork.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

迪士尼動畫的12條原則是設(shè)計師必須要掌握的經(jīng)典指導(dǎo)性原則，是由Ollie Johnston和Frank Thomas在他們的書《The Illusion of Life》中提出來的觀點（譯者注：這本書在豆瓣的評分有9.3分，值得一看）。這些原則最初是用來為動畫片這種傳統(tǒng)的形式設(shè)計的，然而，這些原則也同樣適用于UI設(shè)計。所以，我想在這里做一個有趣的嘗試，看能否將這些動畫原則聯(lián)系起來。

一、擠壓和拉伸

在動畫中，擠壓和拉伸代表了物體的重力，質(zhì)量，重量和靈活性。舉例來說，當一個彈球在它撞擊地面時會發(fā)生形態(tài)變化，就是擠壓和拉伸。

在界面中，擠壓和拉伸很容易就聯(lián)想到按鈕。當一個按鈕被按下時，就可以理解為受到了擠壓，通過控制按鈕的擠壓和拉伸，我們可以很輕易的做好一個按鈕的交互動畫。除了按鈕之外，這種原則也可以應(yīng)用于UI中的任何交互元素上。

按鈕在交互時的擠壓和拉伸

擠壓和拉伸被應(yīng)用于側(cè)邊欄

二、預(yù)期動作

讓觀眾能預(yù)先知道接下來將會發(fā)生什么，它是先于下一步會發(fā)生的動作。舉例來說，迪士尼動畫里經(jīng)常有從高空往下跳躍時會先彎曲膝蓋再跳、正在跑步的人要停止跑步前會逐漸變慢步伐等等。

在界面中，懸停狀態(tài)就是很好的例子。當我們把鼠標懸停在元素上時，元素會提供反饋，表明它是可以點擊的，并且在點擊時，又會有一些別的反饋。

懸停的交互通常會暗示這個按鈕是可以點的

在有水平滾動界面里，通常在交互時會顯示下一個元素的部分內(nèi)容。這其實是一個很好的例子，因為它是在告知用戶下一步的一些信息。

三、時間節(jié)奏

在傳統(tǒng)動畫中，時間會決定關(guān)鍵幀的繪制方式。幀數(shù)越多，動畫就越流暢，同時也更慢，時間能夠給動畫賦予情緒和性格。

時間的節(jié)奏感是任何動畫的基礎(chǔ)，速度在元素編排中起著非常重要的作用。速度太慢，用戶會不耐煩，速度太快，用戶又會錯過一些內(nèi)容。一般來說，大多數(shù)UI動畫在200-600ms之間，其中懸停和反饋交互時長大約為300ms，精細的轉(zhuǎn)場動畫大約在500ms。也可以去參考谷歌的動畫規(guī)范（https://material.io/design/motion/speed.html#duration），里面非常詳細的解釋了每種動畫類型的持續(xù)時間。

一些設(shè)計系統(tǒng)，如Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把運動的節(jié)奏感視為一個很重要的方面，并為每種類型的過渡都制定了嚴格的規(guī)范。

右邊的過渡動畫顯得太過于漫長，繁瑣。

四、漸快與漸慢

在現(xiàn)實世界中，大多數(shù)物體都遵循著緩動運動規(guī)律。也就是說，物體的運動并不會瞬間開始或瞬間結(jié)束，就像一個物體自由落體，也是一開始很慢后面才變會變快。

左側(cè)的卡片是沒有緩動的，右側(cè)的是帶有緩動的，看起來會自然很多。

給UI中的元素加上緩動會讓它看起來更加自然，緩動和節(jié)奏感都是可以有效的提升動畫的品質(zhì)。

五、呈現(xiàn)方式

舞臺中的表演需要合適的編排才會精彩。也就是說，對象在場景中如何擺放，每個動畫又如何出現(xiàn)，關(guān)乎演出的質(zhì)量。通過這種編排，能夠?qū)⒆⒁饬σ蜃钪匾慕巧?

在界面中，呈現(xiàn)方式能夠決定元素的位置，以及在交互時，它應(yīng)該如何編排才能將用戶的注意力引向預(yù)期的元素。

比如現(xiàn)在有一個基于興趣的音樂APP，對這個應(yīng)用來說，最重要的事就是讓動畫引導(dǎo)用戶選擇他們所喜歡的音樂。因此，有必要將類似的操作與其他元素分開編排，有目的的引導(dǎo)用戶。

六、弧形軌跡

一個從高處拋出的小球，運動軌跡會做拋物線軌跡運動，弧線能使物體的運動更加自然。

在界面中，沿著對角線的元素沿著弧線軌跡將會使運動變得更加自然。當需要凸顯出元素的運動路徑時，多嘗試使用弧線軌跡。

通過對比，能夠發(fā)現(xiàn)右側(cè)的弧線運動軌跡會比左側(cè)的直線運動軌跡顯得更加自然。

七、附屬動作

在動畫中，次要動作能夠起到烘托主要動作，比如動畫中的角色在走路時，頭部的晃動就是次要動作，卻能夠讓角色行走顯得更加自然。

在界面中，次要操作能夠起到強化關(guān)鍵動作，當元素需要向用戶提供反饋時，這個方法非常管用。所有的微交互都是基于這個附屬動作原理。

按鈕邊上的粒子效果強化了主按鈕的點擊效果

八、夸張和吸引力

場景中的重要角色通常會采用一些比較夸張的動作來獲得更多的注意力。

在界面中，重要的交互也會通過一些夸張的動畫來引起用戶的注意。谷歌設(shè)計規(guī)范中的FAB按鈕就是一個很好的例子，F(xiàn)AB按鈕在不動的時候也比較能引起注意，因為它通常會帶有比較鮮明的顏色，并且是獨立懸浮在界面元素之上的。當它被點擊時，F(xiàn)AB的動畫被放大，把整個界面都占滿，使得它完全占據(jù)用戶的注意力。

FAB 夸張的交互形式

對于支付這么重要功能的按鈕，通過夸張的動效引起用戶的注意

九、跟隨動作和重疊動作

想象一只兔子從高處跳下來，當兔子開始起跳時，它的耳朵動作會與身體動作發(fā)生錯位。然后當它著陸時，它的身體停下來了，但是耳朵還在動。前者稱之為跟隨動作，后者被稱為重疊動作。其原理說的就是：沒有任何一種物體會突然停止，物體的運動是一個部分接著另一個部分的。

在界面中，可以使元素在停止之前超過它們原本的位置，使得元素運動更加自然。（譯者注：大白話就是我們常說的回彈效果。）

界面有一定的回彈，會顯得更加自然。

當界面滾動時，文字會跟隨圖片的運動，圖片與文字以不同的速度運動會更加自然。（譯者注：像是被拖著走的那種感覺）

總結(jié)

界面中的每一次交互都必須在適當?shù)膱鼍爸芯脑O(shè)計，讓整個體驗更具沉靜感。在正確的地方使用這些原則能夠確保產(chǎn)品中的交互體驗更加協(xié)調(diào)自然。

這些原則正在以不同的形式應(yīng)用于當今的數(shù)字產(chǎn)品中，值得敬畏的是，30年前設(shè)計的一套規(guī)則到今天仍然適用。

藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計