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

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

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

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

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

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

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

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

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

用戶體驗(yàn)設(shè)計(jì)的出現(xiàn)是因?yàn)槲覀冊(cè)O(shè)計(jì)師的需求

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

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

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

我發(fā)明了這個(gè)詞是因?yàn)槲矣X(jué)得人機(jī)交互和可用性這兩個(gè)詞兒太狹隘了。我想要?jiǎng)?chuàng)造一個(gè)可以覆蓋人們體驗(yàn)各個(gè)方面的系統(tǒng)，包括圖形設(shè)計(jì)，界面，體感交互和這個(gè)系統(tǒng)的使用手冊(cè)。但從那之后，這個(gè)詞就開(kāi)始廣泛地流傳，慢慢地失去了它本來(lái)的意義。

如今它偏離本來(lái)的意義越來(lái)越遠(yuǎn)，以至于 Alan Cooper 先生說(shuō)：根本沒(méi)有用戶體驗(yàn)設(shè)計(jì)這回事。

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

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

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

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

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

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

當(dāng)然，以上只是一種簡(jiǎn)單的歸納，但是從我的觀察來(lái)看，很多做 UX 的都可以歸到這三類人當(dāng)中，因?yàn)檎娴暮苌僖?jiàn)到那種既懂戰(zhàn)略又會(huì)戰(zhàn)術(shù)，既有創(chuàng)造力又有執(zhí)行力，既了解商業(yè)又懂設(shè)計(jì)的人才。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

無(wú)論你想叫自己什么，無(wú)論你有多大的夢(mèng)想，但，也要記得保持真實(shí)和謙卑

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

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

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

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

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

為什么是第一性原理

最早提出這個(gè)概念的是亞里士多德。他說(shuō)：在任何一個(gè)系統(tǒng)中，存在第一性原理，是一個(gè)最基本的命題或假設(shè)，不能被省略，也不能被違反。

后來(lái)「硅谷鋼鐵俠」埃隆·馬斯克在一次采訪中提到「第一性原理」：

我們運(yùn)用第一性原理，而不是比較思維去思考問(wèn)題是非常重要的。我們?cè)谏钪锌偸莾A向于比較，對(duì)別人已經(jīng)做過(guò)或者正在做的事情我們也都去做，這樣發(fā)展的結(jié)果只能產(chǎn)生細(xì)小的迭代發(fā)展。第一性原理的思想方式是用物理學(xué)的角度看待世界，也就是說(shuō)一層層撥開(kāi)事物表象，看到里面的本質(zhì)，再?gòu)谋举|(zhì)一層層往上走。

所以，我希望用第一性原理的思維方式，發(fā)現(xiàn)交互設(shè)計(jì)的本質(zhì)，從而更好地理解和運(yùn)用它。

什么是交互設(shè)計(jì)

交互設(shè)計(jì)，又稱互動(dòng)設(shè)計(jì)（英文Interaction Design，縮寫 IxD 或者 IaD）是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域。人造物，即人工制成物品，例如，軟件、移動(dòng)設(shè)備、人造環(huán)境、服務(wù)、可佩帶裝置以及系統(tǒng)的組織結(jié)構(gòu)。交互設(shè)計(jì)在于定義人造物的行為方式（the「interaction」即人工制品在特定場(chǎng)景下的反應(yīng)方式）相關(guān)的界面?！俣劝倏?

讀完上面關(guān)于交互設(shè)計(jì)的權(quán)威解釋，相信有讀者和我一樣，在短時(shí)間內(nèi)很難弄明白：到底什么是交互設(shè)計(jì)？

下面，我們一起用第一性原理，拆解和分析交互設(shè)計(jì)的本質(zhì)。

小學(xué)語(yǔ)文老師教會(huì)我們一種名次解釋的方法——拆詞法，那么，交互設(shè)計(jì)可以拆解成：交互層和設(shè)計(jì)層。

交互層是什么

交互，即交流與互動(dòng)。具體點(diǎn)說(shuō)，在某個(gè)場(chǎng)景下，一個(gè)對(duì)象為了某個(gè)事件目標(biāo)，與其他對(duì)象產(chǎn)生信息的交流與互動(dòng)。在筆者看來(lái)，交互的本質(zhì)是信息的交流與互動(dòng)，包含用戶、目標(biāo)、場(chǎng)景，它們共同構(gòu)成交互設(shè)計(jì)的交互層，這是交互設(shè)計(jì)的前提。

而用戶、目標(biāo)、場(chǎng)景，也正是辛向陽(yáng)教授定義的交互設(shè)計(jì)5要素其中的3個(gè)。

案例1：我們?yōu)椤覆蛷d點(diǎn)餐」這個(gè)事件進(jìn)行交互設(shè)計(jì)，那首先要知道這個(gè)案例的交互層是什么，也就是信息的交流與互動(dòng)是怎樣的。

這個(gè)例子的交互層是：用戶（我們）需要在某個(gè)場(chǎng)景（餐廳），與其他對(duì)象（餐廳/服務(wù)員）產(chǎn)生信息的交流與互動(dòng)，才能達(dá)到目標(biāo)（完成點(diǎn)餐）。

案例2：我們?yōu)椤傅罔F上聽(tīng)音樂(lè)」這個(gè)事件進(jìn)行交互設(shè)計(jì)，按照上面的思路，我們知道這個(gè)事件的交互層是：用戶（我們）需要在某個(gè)場(chǎng)景（地鐵上），與其他對(duì)象（音源）產(chǎn)生信息的交流與互動(dòng)，才能達(dá)到目標(biāo)（聽(tīng)音樂(lè)）。

我小結(jié)一下，幫你理解交互設(shè)計(jì)的交互層。

當(dāng)我們?yōu)槟硞€(gè)事件進(jìn)行交互設(shè)計(jì)時(shí)，首先要知道自己在一個(gè)什么樣的事件前提下開(kāi)展交互設(shè)計(jì)，而這個(gè)前提就是我所說(shuō)的交互層，即用戶在某個(gè)場(chǎng)景下，與其他對(duì)象產(chǎn)生信息的交流與互動(dòng)，從而達(dá)到目標(biāo)。

所以，在交互設(shè)計(jì)里的交互層，本質(zhì)是信息的交流與互動(dòng)，包含用戶、目標(biāo)、場(chǎng)景，主角是信息交流互動(dòng)的雙方或多方。

設(shè)計(jì)層是什么

在說(shuō)交互設(shè)計(jì)的設(shè)計(jì)層之前，我們先來(lái)看「什么是設(shè)計(jì)」。

設(shè)計(jì)是把一種設(shè)想，通過(guò)合理的規(guī)劃、周密的計(jì)劃、通過(guò)各種感覺(jué)形式傳達(dá)出來(lái)的過(guò)程?！俣劝倏?

現(xiàn)在我們將上述解釋放到「交互設(shè)計(jì)」里去理解。交互設(shè)計(jì)里的設(shè)計(jì)，就是在交互層的前提下，為一個(gè)事件合理的規(guī)劃/計(jì)劃（行為），并傳達(dá)（媒介）出各種感覺(jué)（用戶體驗(yàn)）。

所以，在交互設(shè)計(jì)里的設(shè)計(jì)層，本質(zhì)是找到解決問(wèn)題的手段，包括媒介和行為，主角是設(shè)計(jì)媒介和行為的設(shè)計(jì)師。

我們繼續(xù)用前面的兩個(gè)案例，理解交互設(shè)計(jì)的設(shè)計(jì)層。

案例1：為了完成「餐廳點(diǎn)餐」的交互設(shè)計(jì)，我們依據(jù)交互層這個(gè)前提，開(kāi)始找到解決問(wèn)題的手段，并為之設(shè)計(jì)媒介和行為。

在一些餐廳，用戶還是通過(guò)紙質(zhì)菜單，用口述的方式完成點(diǎn)餐。這里的媒介是紙質(zhì)菜單和服務(wù)員，行為是口述。

在另外一些餐廳，用戶用手機(jī)掃碼點(diǎn)餐、下單、結(jié)賬、評(píng)價(jià)等。這里的媒介是餐廳點(diǎn)餐的二維碼和用戶的手機(jī)，行為是用手機(jī)掃碼、點(diǎn)餐、結(jié)賬等一系列動(dòng)作。

案例2：為了完成「地鐵上聽(tīng)音樂(lè)」的交互設(shè)計(jì)，在非智能手機(jī)的時(shí)代，我們基本上是通過(guò)一個(gè)可存儲(chǔ)的音樂(lè)播放設(shè)備和耳機(jī)完成這個(gè)目標(biāo)的，那時(shí)候的媒介是播放器和耳機(jī)，行為是打開(kāi)播放器播放音樂(lè)、在播放器調(diào)整音樂(lè)。

隨著互聯(lián)網(wǎng)和智能手機(jī)的普及，藍(lán)牙傳輸技術(shù)的升級(jí)（aptX/LDAC等），以及用戶訴求的升級(jí)和多樣化，我們可以設(shè)計(jì)出更多貼近交互層（用戶、目標(biāo)、場(chǎng)景）的媒介和行為。比如音樂(lè)APP、藍(lán)牙播放器、藍(lán)牙耳機(jī)、線控耳機(jī)等。

此外，筆者認(rèn)為：媒介和行為是相輔相成的關(guān)系，二者在交互設(shè)計(jì)的過(guò)程中會(huì)互相促進(jìn)和限制。舉個(gè)例子，一些帶線控的藍(lán)牙耳機(jī)自動(dòng)連上手機(jī)后，按一下耳機(jī)上的播放鍵，就能直接啟動(dòng)音樂(lè)APP 開(kāi)始播放了。這個(gè)「開(kāi)始播放」的行為就可以設(shè)計(jì)在耳機(jī)上，而不僅僅是音樂(lè)APP里。

小結(jié)

用第一性原理，我將交互設(shè)計(jì)拆解成交互層和設(shè)計(jì)層，并結(jié)合辛向陽(yáng)教授定義的交互設(shè)計(jì)5要素，得出結(jié)論：交互的本質(zhì)是信息的交流與互動(dòng)，由用戶、目標(biāo)、場(chǎng)景構(gòu)成；設(shè)計(jì)的本質(zhì)是找到解決問(wèn)題的手段，由媒介、行為構(gòu)成。

交互設(shè)計(jì)的本質(zhì)：設(shè)計(jì)師為用戶設(shè)計(jì)出在某個(gè)場(chǎng)景下信息交流與互動(dòng)的媒介和行為，從而達(dá)成目標(biāo)。

如何做好交互設(shè)計(jì)

1. 把握交互設(shè)計(jì)的行業(yè)差異化

本文從我個(gè)人的角度和經(jīng)驗(yàn)，給大家分享了我對(duì)交互設(shè)計(jì)這個(gè)底層概念的理解，在我研究的過(guò)程中，最大的體會(huì)是，交互設(shè)計(jì)不僅僅表現(xiàn)在屏幕上，其實(shí)在線下場(chǎng)景下，同樣有很多體現(xiàn)，比如現(xiàn)在熱門的服務(wù)設(shè)計(jì)，我覺(jué)得它是對(duì)交互設(shè)計(jì)的場(chǎng)景化應(yīng)用和延伸。

由此看來(lái)，交互設(shè)計(jì)會(huì)因行業(yè)和產(chǎn)品形態(tài)的不同，而存在差異化。拿B端產(chǎn)品來(lái)說(shuō)，用戶行為是完成某一項(xiàng)規(guī)范化的工作，而這項(xiàng)工作，往往具備行業(yè)和崗位專業(yè)性，設(shè)計(jì)師需要更好地理解行業(yè)和專業(yè)，才能貼近交互層（用戶、目標(biāo)、場(chǎng)景），設(shè)計(jì)出好的媒介和行為。

2. 具備相關(guān)思維

項(xiàng)目思維。交互設(shè)計(jì)師的工作往往貫穿調(diào)研、需求、設(shè)計(jì)、研發(fā)、測(cè)試等環(huán)節(jié)，我們需要把每一個(gè)設(shè)計(jì)Case 當(dāng)成自己的項(xiàng)目一樣去對(duì)待，而項(xiàng)目經(jīng)理就是自己，充分發(fā)揮主動(dòng)解決問(wèn)題的意識(shí)和能力。

用戶思維、產(chǎn)品思維、邏輯思維等。這3個(gè)思維網(wǎng)絡(luò)上有很多解釋，在這里就不贅述了。

3. 充實(shí)知識(shí)儲(chǔ)備

點(diǎn)擊下方標(biāo)題，查看已更新的知識(shí)篇文章：

• 《用一篇文章，帶你回顧桌面GUI 的設(shè)計(jì)發(fā)展史》
• 《用Airbnb 的產(chǎn)品，幫你快速理解尼爾森10大可用性原則！》
• 《用YouTube 為例，讓你輕松讀懂交互設(shè)計(jì)7大定律！》
• 《以Apple Music為例，為你解讀格式塔7大法則》
• 《設(shè)計(jì)師應(yīng)該知道的 iOS 設(shè)備常見(jiàn)差異化設(shè)計(jì)》

4. 提升專業(yè)技能和底層能力

《從今天起培養(yǎng)這5個(gè)好習(xí)慣，讓你在 2019 年快速成長(zhǎng)！》

寫在最后

本文從構(gòu)思到寫完，斷斷續(xù)續(xù)有1個(gè)多月了，總希望找到一個(gè)合適的方式去解讀交互設(shè)計(jì)，把這個(gè)概念說(shuō)明白，但事實(shí)是越研究越覺(jué)得復(fù)雜，我需要了解的還有很多。

所以，我寫這篇文章的目的不僅僅是分享我對(duì)交互設(shè)計(jì)的淺見(jiàn)，還希望用「第一性原理」這個(gè)拆解、分析、解決問(wèn)題的思維方式，去研究「什么是交互設(shè)計(jì)」這個(gè)問(wèn)題。

交互設(shè)計(jì)這個(gè)概念或領(lǐng)域，遠(yuǎn)比我寫的要復(fù)雜和深入，我在研究「交互設(shè)計(jì)」路上才剛起步，希望能與讀者朋友一起交流這個(gè)話題。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

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

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

商業(yè)化思維的本質(zhì)就是：創(chuàng)造價(jià)值，通過(guò)為客戶創(chuàng)造價(jià)值和交換價(jià)值來(lái)驅(qū)動(dòng)產(chǎn)品以及業(yè)務(wù)的運(yùn)轉(zhuǎn)。那么，如何為用戶創(chuàng)造價(jià)值和交換價(jià)值呢？?jī)r(jià)值屬性會(huì)跟著用戶屬性的不同而產(chǎn)生變化，所以，在探究這個(gè)問(wèn)題之前，要根據(jù)將用戶劃分為不同的群體，再?gòu)牟煌姆矫嬷帧?

商業(yè)化思維這個(gè)字眼乍看上去很高大上，確實(shí)往大了說(shuō)，商業(yè)化思維可以套用到各種宏觀微觀的商業(yè)模式當(dāng)中。但我們的目的是讓商業(yè)化思維能夠成為一個(gè)活動(dòng)運(yùn)營(yíng)真正日?？捎玫哪芰?xiàng)，所以我們對(duì)這個(gè)部分要解讀的商業(yè)化思維的定義稍微做一些邊界設(shè)定。

——基于商業(yè)化思維的本質(zhì)：創(chuàng)造價(jià)值。

我們將探討：如何通過(guò)創(chuàng)造價(jià)值去驅(qū)動(dòng)一個(gè)產(chǎn)品/業(yè)務(wù)？

通過(guò)創(chuàng)造價(jià)值驅(qū)動(dòng)產(chǎn)品/業(yè)務(wù)運(yùn)轉(zhuǎn)是一種完全不同于體驗(yàn)驅(qū)動(dòng)（也就是產(chǎn)品思維）的模式，也是絕大部分互聯(lián)網(wǎng)從業(yè)者少有接觸的（電商&廣告類的業(yè)務(wù)接觸可能較多一些），能夠綜合使用價(jià)值驅(qū)動(dòng)和體驗(yàn)驅(qū)動(dòng)來(lái)幫助你策劃一個(gè)業(yè)務(wù)形態(tài)，就會(huì)極大拓展你的思路（比如：你能夠策劃出趣頭條類似的廣告費(fèi)轉(zhuǎn)移為用戶成本的模式）。

同時(shí)，也能夠朝著我們的核心目的：讓一個(gè)業(yè)務(wù)叫座又叫好去演進(jìn)。

再次回顧一下產(chǎn)品思維和商業(yè)化思維模式的概念：

• 體驗(yàn)驅(qū)動(dòng)（產(chǎn)品思維）：如何讓用戶使用便捷、有趣、解決用戶的某種問(wèn)題和需求？
• 價(jià)值驅(qū)動(dòng)（商業(yè)化思維）：如何為用戶/客戶創(chuàng)造價(jià)值和交換價(jià)值？

用戶/客戶分類

那么如何為用戶創(chuàng)造和交換價(jià)值？

價(jià)值屬性是跟著用戶屬性在變化的，要探討如何創(chuàng)造和交換價(jià)值，我們需要先對(duì)用戶/客戶做一個(gè)分類：

C用戶：個(gè)人用戶。

• 素人用戶：就是最普通的個(gè)體用戶，看新聞的、買東西的、薅羊毛的、刷視頻的普通大眾們。
• 達(dá)人用戶：依賴一些內(nèi)容平臺(tái)生存的，往往以創(chuàng)造內(nèi)容換取價(jià)值的內(nèi)容生產(chǎn)者角色。

B用戶：機(jī)構(gòu)/商家/團(tuán)體等任何非個(gè)人用戶。

• 職業(yè)經(jīng)理人B用戶：一般是大企業(yè)/機(jī)構(gòu)里的業(yè)務(wù)負(fù)責(zé)人/對(duì)接人，他們并不在意公司的業(yè)績(jī)，主要在意的是領(lǐng)導(dǎo)的認(rèn)可。
• 生意人B用戶：一般是小企業(yè)/個(gè)人店鋪的直接負(fù)責(zé)人或者就是老板本人，整虛的對(duì)他們從來(lái)沒(méi)有用，他們只想要賺錢。

一般互聯(lián)網(wǎng)的各種業(yè)務(wù)形態(tài)，會(huì)面對(duì)的用戶種類基本上就是以上四種，代表著完全不同的四種價(jià)值訴求。

我們對(duì)這四種角色分別進(jìn)行價(jià)值創(chuàng)造以及交換的理解和研究，就能夠幫助你在業(yè)務(wù)規(guī)劃當(dāng)中，真正有效的運(yùn)用到商業(yè)化思維。

當(dāng)然這只是商業(yè)化思維最基礎(chǔ)的入門，感興趣的可以基于這個(gè)原理再深入研究。

C用戶——素人用戶的價(jià)值

在面對(duì)素人用戶的時(shí)候，商業(yè)化思維主導(dǎo)的用戶價(jià)值和產(chǎn)品化思維主導(dǎo)的用戶價(jià)值有一些交叉和模糊的地帶，為了便于理解和明確另外一種思維模式，我們相對(duì)粗暴的定義商業(yè)化思維的價(jià)值更多在于“創(chuàng)造”，區(qū)別于產(chǎn)品化思維的“滿足”。

怎么理解呢？

用戶有購(gòu)物的需求，打造一個(gè)電商購(gòu)物產(chǎn)品屬于“滿足”需求。而在購(gòu)物需求滿足之后，我們讓用戶去進(jìn)行商品分享，通過(guò)用戶分享進(jìn)來(lái)的訂單我們給予一定的分擁，這就“創(chuàng)造”了額外的賺錢的價(jià)值，可以交換用戶社交關(guān)系鏈曝光的價(jià)值。

當(dāng)然，實(shí)際并沒(méi)有這么明確的區(qū)分，用戶購(gòu)物本身也是一種商業(yè)行為，商品的品牌溢價(jià)、促銷手段（買三減一）等也都可以歸類為價(jià)值創(chuàng)造的范疇。不過(guò)，這個(gè)不重要，我們關(guān)鍵要理解的是創(chuàng)造價(jià)值的思維模式。

常見(jiàn)的可以額外創(chuàng)造的素人用戶價(jià)值：賺錢、省錢、炫耀、情感共鳴等不屬于用戶剛性需求（購(gòu)物，變美，解決問(wèn)題）的這類可以額外創(chuàng)造的價(jià)值。

而常見(jiàn)的你可以置換的用戶價(jià)值：額外的成本付出、用戶的個(gè)人關(guān)系鏈（自主推廣）、用戶的時(shí)間、用戶的內(nèi)容創(chuàng)造等。

商業(yè)化思維在素人用戶部分，提供一種截然不同的業(yè)務(wù)策劃模式：并不是考慮用戶的需求是什么，然后針對(duì)性的策劃一個(gè)產(chǎn)品。而是先思考你想要交換的用戶價(jià)值是什么，然后，思考你如何創(chuàng)造額外的價(jià)值可以有效的置換到用戶的價(jià)值。

在這個(gè)思維模式下，我們并不以體驗(yàn)和操作為優(yōu)先去考慮業(yè)務(wù)形態(tài)，用戶付諸成本是核心考慮因素，成本小于價(jià)值這個(gè)業(yè)務(wù)模式就有效，反之則無(wú)效。

這個(gè)思維模式也解釋了：為什么很多體驗(yàn)優(yōu)秀的產(chǎn)品就是沒(méi)有用戶愿意去使用？

目前業(yè)內(nèi)新興的一些社交產(chǎn)品擁有比微信更優(yōu)秀的體驗(yàn)，但是產(chǎn)品在社交上創(chuàng)造的額外價(jià)值并沒(méi)有大過(guò)用戶的關(guān)系鏈遷移成本（想要去交換的價(jià)值）。而一些價(jià)值巨大但體驗(yàn)糟糕的產(chǎn)品用戶還是愿意一遍又一遍的嘗試想要成功走通——一個(gè)分傭50%的商品，再?gòu)?fù)雜的操作用戶也愿意去鉆研和使用。

當(dāng)然，通過(guò)成本-價(jià)值的模式去思考和規(guī)劃業(yè)務(wù)模型，并不妨礙我們同步去進(jìn)行產(chǎn)品體驗(yàn)的完善，以幫助進(jìn)一步減少用戶在操作上付諸的成本。

商業(yè)化思維在業(yè)務(wù)中的一種典型運(yùn)用場(chǎng)景，基于一個(gè)明確的用戶價(jià)值交換業(yè)務(wù)目的，我們進(jìn)行價(jià)值交換過(guò)程的建立，以找到合適的業(yè)務(wù)模式。

例如：我們希望用戶能夠主動(dòng)進(jìn)行分享（而這個(gè)過(guò)程往往基于已經(jīng)滿足了用戶基本需求的狀態(tài)上，比如說(shuō)一個(gè)電商網(wǎng)站用戶已經(jīng)完成了購(gòu)物，但是我們還想要額外榨干用戶的價(jià)值），貢獻(xiàn)他們的社交關(guān)系鏈價(jià)值。

首先，我們需要進(jìn)行的思考是：用戶進(jìn)行分享需要付諸的成本是什么？

——分享到朋友圈后造成的個(gè)人形象影響，思考和檢索適合的分享對(duì)象的成本，分享動(dòng)作的操作成本（可以通過(guò)體驗(yàn)優(yōu)化極大降低）。

那么思考，基于業(yè)務(wù)特性，我們能夠提供給用戶合適的交換價(jià)值是什么？

——可以通過(guò)和商家分?jǐn)偝杀镜念~外現(xiàn)金激勵(lì)？基于稀缺或者高價(jià)產(chǎn)品的炫耀內(nèi)容？或是商品本身附帶的情感屬性？明確的定義清楚這個(gè)具體的價(jià)值是什么。

然后完整的對(duì)比，你創(chuàng)造的額外價(jià)值是否大于綜合成本，當(dāng)然這個(gè)對(duì)比不是一個(gè)絕對(duì)的數(shù)學(xué)對(duì)比過(guò)程，還摻雜了很多主觀因素。

所以，一定程度的用戶調(diào)研或者簡(jiǎn)單一些的自我洞察能夠幫助你得出有效的結(jié)論。如果做不到價(jià)值大于成本，那么這個(gè)業(yè)務(wù)就是不成立的。其實(shí)這個(gè)思維模式的邏輯是顯而易見(jiàn)的，但又往往被忽略。所以，很多分享10元滿減優(yōu)惠券的策劃被創(chuàng)造出來(lái)，而根本沒(méi)有人思考過(guò)10元滿減優(yōu)惠券的價(jià)值其實(shí)遠(yuǎn)遠(yuǎn)低于我分享到朋友圈的成本。

琢磨一下以上的過(guò)程，是不是提供了一種全新的思路。幫助你的不僅是簡(jiǎn)單的思考“我想讓用戶做什么，所以理所當(dāng)然的策劃一個(gè)產(chǎn)品去引導(dǎo)用戶”，而是真正的考慮清楚業(yè)務(wù)是否成立的根基，然后再?gòu)娜莶黄鹊娜?yōu)化體驗(yàn)。

時(shí)刻保持“成本-價(jià)值交換”的思維模式，不僅能夠幫助你打造有效的價(jià)值交換業(yè)務(wù)形態(tài)，還有一個(gè)非常有用的場(chǎng)景。

基于一個(gè)明確的用戶訴求，我們進(jìn)行價(jià)值交換過(guò)程的分析，以找到業(yè)務(wù)的關(guān)鍵點(diǎn)。

我們還是用電商業(yè)務(wù)場(chǎng)景來(lái)舉例：在電商場(chǎng)景中，用戶付諸的最大成本是金錢，而購(gòu)物操作的成本實(shí)際上優(yōu)先級(jí)并不靠前。用戶在價(jià)值交換過(guò)程中最優(yōu)先的價(jià)值是：“買到想要的東西”和“足夠的劃算”。

所以，在電商業(yè)務(wù)的重點(diǎn)一定是：提供更豐富的商品庫(kù)和更優(yōu)惠的價(jià)格，能夠極大提升價(jià)值的含金量。

而優(yōu)化購(gòu)物操作體驗(yàn)，頁(yè)面動(dòng)線邏輯等是其次的，可以一定程度減少用戶成本但解決不了價(jià)值不足的問(wèn)題。

這也解釋了：為什么一個(gè)創(chuàng)造了諸多優(yōu)秀產(chǎn)品（常規(guī)產(chǎn)品主要面對(duì)的用戶成本確實(shí)是操作成本，而價(jià)值是比較單一明確的，例如郵箱）的大廠投入了諸多心血打磨產(chǎn)品體驗(yàn)但最終還是在電商戰(zhàn)場(chǎng)戰(zhàn)敗了？

一個(gè)擅長(zhǎng)做價(jià)值交換的電商大廠在一個(gè)社交產(chǎn)品（用戶的主要價(jià)值是社交，成本是難以獨(dú)立完成的關(guān)系鏈遷移）上投入了大量的推廣資源和利益誘導(dǎo)確留不下用戶。

你看，大家都在說(shuō)的基因的本質(zhì)問(wèn)題，其實(shí)本質(zhì)并不復(fù)雜。當(dāng)然大廠的成敗并不只取決于思路的差異，還有歷史以來(lái)積累的資源類型和用戶心智，這些也都是基因的構(gòu)成部分。

我們也不需要操心這么多，學(xué)會(huì)運(yùn)用這個(gè)新的思路足以在業(yè)務(wù)策劃中幫助自己抓住真正的重點(diǎn)。

C用戶——達(dá)人用戶的價(jià)值

首先明確我們這里所討論的達(dá)人用戶，并不是普通用戶當(dāng)中樂(lè)于分享和創(chuàng)造低質(zhì)量?jī)?nèi)容的那群人（當(dāng)然也有高質(zhì)量的但并不普遍），而是以內(nèi)容生產(chǎn)為職業(yè)，創(chuàng)造真正專業(yè)有價(jià)值內(nèi)容，能夠構(gòu)成你的平臺(tái)核心競(jìng)爭(zhēng)力的那群人。

區(qū)別于普通用戶，我們希望置換的達(dá)人用戶價(jià)值是比較高的，平臺(tái)依賴這些達(dá)人用戶去不斷供給符合平臺(tái)導(dǎo)向的優(yōu)質(zhì)內(nèi)容，而內(nèi)容生產(chǎn)的成本極大，也就需要更大的價(jià)值來(lái)進(jìn)行置換。
達(dá)人用戶常見(jiàn)價(jià)值訴求：變現(xiàn)、曝光、獨(dú)特的內(nèi)容生產(chǎn)能力、有效的粉絲互動(dòng)和管理能力。

達(dá)人用戶需要付諸的成本：內(nèi)容生產(chǎn)成本。

基于創(chuàng)造價(jià)值大于成本的邏輯，要打造優(yōu)秀的面相達(dá)人用戶的業(yè)務(wù)，就可以從幾個(gè)方面著手（增加提供的價(jià)值）：

提供足夠價(jià)值的變現(xiàn)能力：

專業(yè)的達(dá)人往往以此生存，和普通用戶一樣的分傭價(jià)值只能作為額外的補(bǔ)充價(jià)值，并不能達(dá)到達(dá)人的標(biāo)準(zhǔn)。

所以，如果你的業(yè)務(wù)希望依靠變現(xiàn)價(jià)值來(lái)讓達(dá)人自發(fā)留下，那么你需要考慮的核心問(wèn)題和需要尋找打造的案例就是：有沒(méi)有達(dá)人可以在你的平臺(tái)賺錢養(yǎng)活自己。

當(dāng)然如果沒(méi)有內(nèi)容獨(dú)家協(xié)議的限制，達(dá)人可以依靠多平臺(tái)存活，對(duì)你的要求就不會(huì)那么高，但變現(xiàn)的價(jià)值也一定是生存級(jí)別的（幾千元）而不是福利級(jí)別的（幾百元甚至以下）。達(dá)不到這個(gè)標(biāo)準(zhǔn)，你的業(yè)務(wù)邏輯確實(shí)就不成立。

提供足夠多的曝光量級(jí)：

當(dāng)然這個(gè)和你的用戶規(guī)模以及流量分配機(jī)制有關(guān)，需要考慮的問(wèn)題是：你給的曝光是不是有效的曝光？你的達(dá)人用戶能否有效的把曝光轉(zhuǎn)化為強(qiáng)關(guān)系的粉絲，或者是個(gè)人品牌認(rèn)知用戶？

這個(gè)目的達(dá)不到只是粗暴的給曝光并沒(méi)有用（例如：很多內(nèi)容平臺(tái)會(huì)找我要稿子，一些平臺(tái)只會(huì)放作者名字而不愿意曝光作者個(gè)人公眾號(hào)，我就非?？咕転樗麄兲峁└寮?。

很多冷啟動(dòng)的業(yè)務(wù)面對(duì)的是達(dá)人內(nèi)容量級(jí)和用戶量級(jí)循環(huán)驅(qū)動(dòng)增長(zhǎng)的問(wèn)題，在這個(gè)邏輯下一定程度的達(dá)人內(nèi)容補(bǔ)貼是常用的手段。但不能偏離的是，你的激勵(lì)要做用戶這個(gè)循環(huán)，要求仍然是激活的內(nèi)容一定要對(duì)用戶有價(jià)值而不只是湊數(shù)，達(dá)人的補(bǔ)貼規(guī)模也要達(dá)到生存級(jí)別。

提供獨(dú)有的內(nèi)容生產(chǎn)能力（生產(chǎn)素材）：

或者說(shuō)獨(dú)特的有效的粉絲互動(dòng)管理能力等產(chǎn)品層面的價(jià)值也是一種辦法。但說(shuō)實(shí)話國(guó)內(nèi)互聯(lián)網(wǎng)KOL行業(yè)發(fā)展多年已成定局，大的MCN機(jī)構(gòu)已經(jīng)壟斷了大的流量和真正專業(yè)的內(nèi)容生產(chǎn)者，平臺(tái)遷移成本極低；大流量主產(chǎn)品能力的抄襲門檻又不算高。

所以，除非你能純粹的全面培養(yǎng)素人成為達(dá)人，否則這類型的手段可能只作為補(bǔ)充，要真的撬動(dòng)達(dá)人價(jià)值還是要回歸到以上兩個(gè)點(diǎn)。

降低創(chuàng)作的成本：

當(dāng)你的產(chǎn)品不足以讓一個(gè)達(dá)人在這里養(yǎng)活自己，那么你可能就很難得到獨(dú)家的內(nèi)容。

要讓達(dá)人愿意在你這里搬遷內(nèi)容或者一定程度的定制創(chuàng)作，可走的路就只有盡量減少內(nèi)容生產(chǎn)的成本——快速搬遷，極低門檻的排版能力，和行業(yè)通用規(guī)則一致的產(chǎn)品形態(tài)等等。

接下來(lái)，我們看一下另外一個(gè)截然不同的面對(duì)B客戶的領(lǐng)域。

B客戶相比于C客戶，目的更加明確，愿意投入更大的成本交換更大的價(jià)值。在B的領(lǐng)域，商業(yè)化思維的主導(dǎo)就更加明確，價(jià)值的創(chuàng)造和交換成為了唯一的話題，產(chǎn)品體驗(yàn)起到的作用微乎其微，除非你提供的價(jià)值本身就是產(chǎn)品的體驗(yàn)（比如說(shuō)：一些企業(yè)服務(wù)工具）。

B客戶——生意人價(jià)值

要理解生意人B的價(jià)值訴求，先從一個(gè)個(gè)人經(jīng)歷的故事開(kāi)始：

曾經(jīng)牽頭過(guò)一個(gè)面向B商家服務(wù)的工具平臺(tái)，商家支付費(fèi)用使用工具和流量等整合的服務(wù)。

在工具平臺(tái)搭建的早起，我們以非常產(chǎn)品導(dǎo)向的思維進(jìn)行了規(guī)劃，重點(diǎn)考慮的是工具的各種功能、平臺(tái)使用體驗(yàn)、對(duì)平臺(tái)的流量等價(jià)值貢獻(xiàn)等問(wèn)題，設(shè)定了工具平臺(tái)的點(diǎn)擊率、跳轉(zhuǎn)率、轉(zhuǎn)化率等關(guān)鍵考核指標(biāo)，在這些導(dǎo)向下不斷的去優(yōu)化工具平臺(tái)。

然后，我們召開(kāi)了第一次的商家推廣大會(huì)，準(zhǔn)備了精美的PPT，詳盡的介紹了工具平臺(tái)各種先進(jìn)的能力，復(fù)雜的邏輯和優(yōu)秀的體驗(yàn)，其華麗程度首先把我們自己都感動(dòng)了。

但是，現(xiàn)場(chǎng)反應(yīng)平平，幾乎所有商家全程都在玩手機(jī)，似乎對(duì)我們精彩的演講絲毫不感興趣。

會(huì)后我們找到幾個(gè)資深的商家咨詢了原因，其中一句關(guān)鍵的點(diǎn)播對(duì)我們產(chǎn)生了至關(guān)重要的影響：

“我們只想知道在你這里能不能賺錢，投入多少回報(bào)多少，流量成本吧如何，比其他平臺(tái)有沒(méi)有優(yōu)勢(shì)。其他的真的不太在意?！?

這一句話真正引起了我們關(guān)于“什么是商業(yè)化？”“怎么樣才叫做生意？”的思考。

面對(duì)著實(shí)打?qū)嵰湍阕錾獾纳碳?，一切形式化的虛無(wú)的東西都沒(méi)有任何意義，只有唯一關(guān)鍵的話題：賺錢（當(dāng)然不同的業(yè)務(wù)模式又有其他的一些核心價(jià)值例如獲客等但邏輯都是可以套用的）。

回去以后我們快速調(diào)整了整個(gè)業(yè)務(wù)的導(dǎo)向，弱化了所有關(guān)于體驗(yàn)的考核指標(biāo)——點(diǎn)擊率，轉(zhuǎn)化率（還要保留的原因是：這個(gè)產(chǎn)品還涉及到C端的用戶體驗(yàn)），而把一切涉及到投入產(chǎn)出，能不能掙錢的指標(biāo)——流量成本，拉新成本，費(fèi)用的投入產(chǎn)出比，作為主要的考核導(dǎo)向來(lái)指導(dǎo)所有的工作方向。

至此為起點(diǎn)，這個(gè)產(chǎn)品開(kāi)始真正的在市場(chǎng)上迎來(lái)了爆發(fā)，每一次宣講會(huì)后（新的宣講會(huì)我們只強(qiáng)調(diào)投入產(chǎn)出效果）開(kāi)放的名額都被一搶而空。

以上的故事即是我對(duì)與生意人B合作的商業(yè)化思維理解：剝離掉生意場(chǎng)各種復(fù)雜的規(guī)則和概念，要撬動(dòng)生意人B的投入，實(shí)際上也是在和他們做生意。能不能幫他們賺錢是唯一應(yīng)該考慮的問(wèn)題。任何經(jīng)過(guò)包裝的，浮夸的，虛無(wú)的內(nèi)容在真實(shí)的投入產(chǎn)出效果下都沒(méi)有任何意義。

B客戶——職業(yè)經(jīng)理人價(jià)值

當(dāng)你合作的對(duì)象從一個(gè)想要賺錢的生意人變成了一個(gè)大公司內(nèi)部的職業(yè)經(jīng)理人，你將面對(duì)的價(jià)值又從單純的賺錢變成了更復(fù)雜的職業(yè)經(jīng)理人價(jià)值。

一個(gè)職業(yè)經(jīng)理人心里在意的價(jià)值第一優(yōu)先級(jí)，并不是幫助公司更多的盈利和獲取價(jià)值（雖然這個(gè)理念并不道德但這是現(xiàn)狀你不得不面對(duì)），而是他在和領(lǐng)導(dǎo)匯報(bào)這次合作價(jià)值的時(shí)候是否能得到認(rèn)可。

所以，面對(duì)職業(yè)經(jīng)理人這樣的B端客戶，并不能僅僅考慮實(shí)現(xiàn)業(yè)務(wù)目標(biāo)，你還需要從他的角度考慮：能否過(guò)讓這次的合作有更多的標(biāo)桿價(jià)值、項(xiàng)目意義能夠挖掘和包裝出來(lái)，以幫助他形成一個(gè)漂亮的匯報(bào)文件。

所以，和B端客戶做生意，需要更多講故事的能力。除了業(yè)務(wù)目標(biāo)的承諾外，你還能夠在方面銷售合作談判的時(shí)候，能夠完整的描述出：未來(lái)他在做匯報(bào)時(shí)候能夠拿到的完美的報(bào)告是什么樣子的？

以此去考慮：你在一開(kāi)始要銷售方案應(yīng)該如何設(shè)計(jì)？業(yè)務(wù)應(yīng)該增加哪些模塊？合作應(yīng)該提供哪些支持？就能夠更好的幫助你搞定一個(gè)職業(yè)經(jīng)理人的客戶。

以上便是基于活動(dòng)運(yùn)營(yíng)應(yīng)該掌握的最基本的一些商業(yè)化思維業(yè)務(wù)運(yùn)用介紹，除了常規(guī)的運(yùn)用外，更重要的還是要強(qiáng)調(diào)互聯(lián)網(wǎng)非技術(shù)工種人員應(yīng)該都要具備“創(chuàng)造體驗(yàn)”和“創(chuàng)造價(jià)值”兩種思維模式，能夠真的幫助你創(chuàng)造出叫好又叫座的策劃。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

二 發(fā)表能力建構(gòu)

————————

同質(zhì)化競(jìng)爭(zhēng)突圍

發(fā)表能力構(gòu)建方面從最輕的發(fā)表成本以及最多的發(fā)表回饋兩個(gè)維度做橫向的鋪陳，建構(gòu)了除了拍攝以外，輕量主觀表達(dá)的文字視頻，不受時(shí)空與題材影響發(fā)表動(dòng)機(jī)的影集，勾引起共同參與及話題的游戲，最多社交參與感的問(wèn)答等發(fā)表能力等四種發(fā)表方式。打造輕量發(fā)表成本的文字視頻可以確保發(fā)表量足夠，以解決發(fā)表量與觀看量不對(duì)等的問(wèn)題，在小游戲與問(wèn)答等發(fā)表方式，除了可以營(yíng)造社交場(chǎng)景以外，創(chuàng)新的玩法也能與競(jìng)品拉開(kāi)差異，在眾多的短視頻產(chǎn)品中具有自身的特色。

然而單純的發(fā)表能力差異容易被模仿，能夠保持自身優(yōu)勢(shì)與特色的時(shí)間十分短暫，建立起與用戶情感上的連接可以有效的加深用戶對(duì)服務(wù)的認(rèn)可以及歸屬感，舉個(gè)例子，前段時(shí)間筆者至上海出差數(shù)日，意料之外的一份小禮物卻促使我成為該酒店的常客，這證明了建立情感連接確實(shí)可以成為與同業(yè)同質(zhì)化競(jìng)爭(zhēng)時(shí)不錯(cuò)的突圍點(diǎn)。

三 設(shè)計(jì)切入角度

————————

建立情感連接，是視頻設(shè)計(jì)“雙面性”的一面

參考諾曼的理論，情感化設(shè)計(jì)分為本能，行為，反思三個(gè)層面。在打造視頻制作工具的過(guò)程中，滿足本能的外觀愉悅以及確保行為過(guò)程的順暢性屬于基本要求，可以參照過(guò)去設(shè)計(jì)工具的手法，保證架構(gòu)流程界面反饋每一環(huán)節(jié)的使用效能和低理解成本，而反思的范疇則與內(nèi)容相關(guān)。為制作視頻內(nèi)容而設(shè)計(jì)，需要將用戶的經(jīng)驗(yàn)，喜好，文化轉(zhuǎn)化成特殊符號(hào)，以觸及情感連結(jié)最重要的反思環(huán)節(jié)。

用戶與產(chǎn)品接觸的過(guò)程按時(shí)間展開(kāi)分為初次接觸、逐漸了解、熟悉依賴三個(gè)階段，若在每個(gè)階段都能與用戶保持情感連接，必能逐步加深用戶印象，達(dá)到競(jìng)爭(zhēng)差異化的目的。下文兩個(gè)案例演示我們?nèi)绾卧谝肫诤统砷L(zhǎng)期選擇合適觸點(diǎn)，制定相應(yīng)設(shè)計(jì)策略和方案，從而達(dá)到此目的。

四 設(shè)計(jì)亮點(diǎn)引入

————————

喚起情感，拉近與用戶的距離

為了讓用戶更主動(dòng)的發(fā)表相冊(cè)視頻，QQ團(tuán)隊(duì)在影集發(fā)表模塊上規(guī)劃了智能相冊(cè)的能力，借助用戶回憶塑造超級(jí)符號(hào)，把用戶的親身經(jīng)歷與產(chǎn)品功能建立聯(lián)系，提高使用意愿。在影集的引導(dǎo)步驟中，尋找合宜的契機(jī)，把零散的照片按特定線索重新組織，經(jīng)過(guò)精心包裝以回憶墻的方式重新呈現(xiàn)給用戶。

影集功能的重新包裝：

4.1 場(chǎng)景搭建

QQ經(jīng)授權(quán)后訪問(wèn)用戶相冊(cè)，沿時(shí)間和位置線索用聚類算法對(duì)照片歸類，產(chǎn)生與特定場(chǎng)景關(guān)聯(lián)的照片組，再用圖像識(shí)別技術(shù)從照片組中精選特定n張合成視頻，為后續(xù)情緒升級(jí)埋下基礎(chǔ)。

4.2 意境傳達(dá)

為視頻搭配轉(zhuǎn)場(chǎng)音樂(lè)是主要增色手段。

轉(zhuǎn)場(chǎng)效果設(shè)計(jì)要以情緒傳達(dá)為目的，過(guò)渡動(dòng)畫(huà)和快慢節(jié)奏的靈活搭配打造大片質(zhì)感，疊加細(xì)節(jié)讓畫(huà)面生動(dòng)不僵硬。

在配樂(lè)標(biāo)準(zhǔn)上，我們基于用戶習(xí)慣推導(dǎo)，明晰場(chǎng)景+節(jié)奏的音樂(lè)選擇維度。

轉(zhuǎn)場(chǎng)和音樂(lè)的挑選需貼合場(chǎng)景特征。在“聚會(huì)”場(chǎng)景中，設(shè)計(jì)師選用翻轉(zhuǎn)重組的效果傳遞歡快愉悅氛圍，曝光和光暈細(xì)節(jié)可以模擬真實(shí)光影效果?！巴杲袢铡眲t表現(xiàn)出安靜氛圍，沉浸的復(fù)古濾鏡和低調(diào)的疊黑效果讓情緒表達(dá)含蓄收斂，漣漪波動(dòng)仿若時(shí)光倒流。

4.3 捕捉時(shí)機(jī)，宣傳專屬回憶

在信息架構(gòu)層的設(shè)計(jì)使用卡片橫滑的方式，一方面可以暗喻時(shí)光隧道，另一方面考慮到大卡片比其他尺寸的縮略圖在陳列和交互行為上更利于突出視頻的優(yōu)勢(shì)。

4.4 案例回顧

我們采用情感符號(hào)引導(dǎo)發(fā)表的策略，得到數(shù)據(jù)的支撐，影集發(fā)表總量和發(fā)表轉(zhuǎn)化率均有明顯提升。經(jīng)過(guò)市場(chǎng)橫向?qū)Ρ?，QQ團(tuán)隊(duì)在對(duì)影集的功能規(guī)劃和整體設(shè)計(jì)理念上占據(jù)了優(yōu)勢(shì)位置。

五 設(shè)計(jì)亮點(diǎn)深挖

————————

打造情感體驗(yàn)峰值，強(qiáng)化用戶印象

在任何體驗(yàn)中，都應(yīng)該重視體驗(yàn)過(guò)程中的情感峰值，如同丹尼爾卡曼說(shuō)，體驗(yàn)產(chǎn)品時(shí)能夠被記住的只有峰值與終值的體驗(yàn)，我們?cè)谥悄芟鄡?cè)的環(huán)節(jié)之中建立起與用戶情感上的鏈結(jié)，而鏈結(jié)后的情感峰值，則選擇在發(fā)表成本最高發(fā)表頻率的文字視頻中深挖，讓體驗(yàn)情感的峰值在高頻率的場(chǎng)景中發(fā)生獲取最高的投入回饋。

5.1 過(guò)程頗折

文字視頻上線后發(fā)現(xiàn)用戶發(fā)表意愿未達(dá)預(yù)期，癥結(jié)在于其過(guò)程缺少能激發(fā)用戶主觀意愿表達(dá)的情緒觸發(fā)點(diǎn)。我們提出兩個(gè)優(yōu)化思路，

1 降低理解成本，體驗(yàn)對(duì)齊于常見(jiàn)動(dòng)態(tài)發(fā)表界面。

2 支持自定義背景，用帶場(chǎng)景暗示的背景烘托情緒氛圍。對(duì)比實(shí)驗(yàn)后發(fā)現(xiàn)2既可增加文字視頻的意境表達(dá)又不干擾基礎(chǔ)操作，是為更佳方案。

文字視頻的初期方案和優(yōu)化方向：

5.2 策略制定

QQ團(tuán)隊(duì)基于對(duì)用戶發(fā)表場(chǎng)景統(tǒng)計(jì)，確定以傳達(dá)心情和高頻發(fā)表時(shí)間點(diǎn)為線索，策略制定是考慮到既要與用戶表達(dá)有耦合但不能具體有所指。

5.3 意境傳達(dá)

背景模版設(shè)計(jì)有以下原則：

1 界限分明，背景效果不要干擾主體信息。

2 意象與認(rèn)知相符，有情理之中意料之外的驚喜，引起用戶好奇心。

3 表義避免太具象。抽象表達(dá)騰出更大想象空間，讓用戶創(chuàng)意不受縛于環(huán)境。

以下是全部模版效果展示。

5.4 案例回顧

經(jīng)優(yōu)化后文字視頻的背景從純視覺(jué)角度轉(zhuǎn)變成帶動(dòng)用戶情緒刺激發(fā)表的觸發(fā)點(diǎn)，后續(xù)團(tuán)隊(duì)結(jié)合運(yùn)營(yíng)策略，在特殊節(jié)日或特殊事件前更新模版可以持續(xù)刺激拉升文字視頻發(fā)表量，該策略的運(yùn)用屢建奇效。

六 總結(jié)心得

————————

設(shè)計(jì)經(jīng)驗(yàn)

產(chǎn)品體驗(yàn)路徑中植入情感因素意義重大。在引入期喚起情感降低用戶心理戒備，產(chǎn)生熟悉親切感。接觸期有效調(diào)動(dòng)用戶情緒制造情感峰值，加深印象。成熟期創(chuàng)造互動(dòng)機(jī)會(huì)，讓情感得到延伸寄托進(jìn)而鞏固市場(chǎng)地位。此過(guò)程環(huán)環(huán)相扣層層遞進(jìn)，在用戶心理推波助瀾。

好設(shè)計(jì)是能影響用戶非理性，改變情緒最終影響他的行為。設(shè)計(jì)的高境界在于只影響不明說(shuō)，用戶不需要領(lǐng)會(huì)設(shè)計(jì)意圖，但情緒已經(jīng)被感染了，在情緒的作用下，按照設(shè)計(jì)者預(yù)定的軌跡，自然做出選擇。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

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

目錄

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

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

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

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

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

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

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

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

2 增強(qiáng)一致性，塑造品牌感

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

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

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

4 利于工作交接 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 色彩規(guī)范

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

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

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

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

3 字體

字體規(guī)范最需要注意的是提取出各個(gè)場(chǎng)景下需要用的字體和字號(hào)。

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

4 圖標(biāo)

通常來(lái)說(shuō)圖標(biāo)分為兩種，功能性圖標(biāo)和展示性圖標(biāo)。

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

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

圖標(biāo)規(guī)范通常來(lái)說(shuō)會(huì)先定一些基礎(chǔ)尺寸，梳理好各個(gè)頁(yè)面的圖標(biāo)尺寸，進(jìn)行整合，最后確定好幾個(gè)基礎(chǔ)尺寸，比如我這里的基礎(chǔ)尺寸是4個(gè)。功能層級(jí)一致的圖標(biāo)尺寸要一致。

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

5 默認(rèn)圖

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

五、頁(yè)面組件

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

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

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

1按鈕

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

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

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

2 導(dǎo)航

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

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

3 標(biāo)簽

標(biāo)簽通常有多個(gè)使用場(chǎng)景，我們可以對(duì)標(biāo)簽進(jìn)行分組，比如運(yùn)營(yíng)類標(biāo)簽、內(nèi)容屬性標(biāo)簽、篩選標(biāo)簽等等

然后對(duì)每類的標(biāo)簽統(tǒng)一樣式、文字內(nèi)邊距以及說(shuō)明適用場(chǎng)景。

4 彈窗

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

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

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

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

5 列表

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

六、結(jié)語(yǔ)

寫這篇文的初衷，是因?yàn)閺娜ツ甑孜医⒐娞?hào)，并且在站酷發(fā)表了一些文章，得到了很多人的認(rèn)可。很多粉絲私信我各種問(wèn)題，陸續(xù)有人問(wèn)我設(shè)計(jì)規(guī)范怎么做、交互規(guī)范什么樣之類的問(wèn)題。但是公司內(nèi)部的文件確實(shí)沒(méi)有辦法公開(kāi)分享，所以我就想說(shuō)，那不如專門寫一篇文章詳細(xì)教大家制作移動(dòng)UI設(shè)計(jì)規(guī)范吧。

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

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

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

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

1. 系統(tǒng)全面地了解文字的基礎(chǔ)知識(shí)、顯示方式、影響因素及當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)中適合的文字系統(tǒng)；
2. 梳理出自己團(tuán)隊(duì)所有產(chǎn)品文字使用情況；
3. 綜合第1步、第2步總結(jié)出適合團(tuán)隊(duì)業(yè)務(wù)的文字系統(tǒng)。

字符屏幕顯示原理

1. 字符

字符是指計(jì)算機(jī)中使用的字母、數(shù)字、標(biāo)點(diǎn)符號(hào)等等。

計(jì)算機(jī)最初發(fā)明出來(lái)是用來(lái)解決數(shù)字計(jì)算問(wèn)題的。

后來(lái)發(fā)現(xiàn)，計(jì)算機(jī)還可以做更多的事，例如文本處理。其實(shí)計(jì)算機(jī)挺笨的，它讀到的所有字符都是由1和0組成的字符串，因?yàn)橛?jì)算機(jī)電路只有兩種狀態(tài)，「開(kāi)」和「閉」，對(duì)應(yīng)「1」和「0」。計(jì)算機(jī)也只可以直接存儲(chǔ)和處理二進(jìn)制數(shù)字。

2. 二進(jìn)制

「二進(jìn)制」是數(shù)字世界里的基本規(guī)則。

下面這些不同格式的文件，在本質(zhì)上都是一串由1和0組成的代碼，要了解這些文件首先要了解二進(jìn)制。人有十根手指頭，但計(jì)算機(jī)電路只有「開(kāi)」和「閉」兩種狀態(tài)，所以滿十進(jìn)一位的計(jì)數(shù)方式更適合人類計(jì)算，而滿二進(jìn)一的二進(jìn)制更適合計(jì)算機(jī)。計(jì)算機(jī)只需要1和0這兩個(gè)數(shù)字就可以傳遞一切信息。

△ MP4

△ MP3

△ JPG

△ TXT

△ AVI

以圖像為例，我們用電腦或手機(jī)看到的圖像都是在某個(gè)角落里存儲(chǔ)著下面這樣的一串?dāng)?shù)據(jù)。開(kāi)頭的16位翻譯過(guò)來(lái)就是 BMP文件開(kāi)始的標(biāo)識(shí)。

BMP文件標(biāo)識(shí)后面的數(shù)字就是圖像的各項(xiàng)基本信息。

△ 圖像的各項(xiàng)基本信息

△ 顏色深度

最開(kāi)始的24位，都是1，像素顯示為紅、綠、藍(lán)三種顏色，相加后顯示為白色。

接下來(lái)的24位，前8位是1，后面都是0，像素顯示為紅色。

再后面24位的前16位都是1，最后8位為0，像素顯示紅、綠兩色，相加后顯示為黃色。

根據(jù)這樣的規(guī)則整個(gè)55×55的格子鋪滿顏色就得到一張完整的圖片。所以一個(gè) BMP圖像文件中的1和0就在逐個(gè)記錄圖像中每一個(gè)像素點(diǎn)的顏色。

△ 二進(jìn)制圖片生成方式

△ 色光三原色和顏料三原色區(qū)別

下面所有文件的顯示都和圖像顯示例子一樣，文件中的1和0按照人們事先設(shè)計(jì)好的規(guī)則排列好，只需要找到正確的打開(kāi)方式按照特定的規(guī)則來(lái)解讀這些數(shù)據(jù)，我們就可以獲得其中的信息。我們?cè)趺床拍苤滥骋粋€(gè)文件的1和0究竟是按什么規(guī)則排列的？我們又要用怎樣的方式來(lái)解讀？這就用到了擴(kuò)展名，在文件的名字后面加幾個(gè)特定的字符，就可以幫助系統(tǒng)辨別出文件的類型，從而提示電腦去按照某種特定的規(guī)則來(lái)正確解讀其中的信息。

△ MP4格式擴(kuò)展名

△ MP3格式擴(kuò)展名

△ JPG格式擴(kuò)展名

△ TXT格式擴(kuò)展名

△ AVI格式擴(kuò)展名

更多其他文件拓展名：

3. 字符編碼

為了在計(jì)算機(jī)上顯示字符，必須將字符轉(zhuǎn)換成二進(jìn)制數(shù)字。所以就有了統(tǒng)一、標(biāo)準(zhǔn)字符轉(zhuǎn)換規(guī)則，即字符編碼。字符編碼是給所有的漢字定一個(gè)的數(shù)字編號(hào)，并用1和0來(lái)表示這個(gè)數(shù)字編號(hào)。

文字的一個(gè)字符對(duì)應(yīng)一個(gè)編碼（碼點(diǎn)），而編碼對(duì)應(yīng)字符集里的一個(gè)「字」，字符通過(guò)字符集與「字」相連。像圖中所示Unicode、GB 2312、Shift_JIS 都是字符集，其主要作用是為每一個(gè)「字」分配一個(gè)編碼。

△ 文本編碼流程

字符集里的每一個(gè)編碼對(duì)應(yīng)的是一個(gè)「字」而不是「字形」，也就是一個(gè)「字」在不同的地區(qū)或標(biāo)準(zhǔn)中可能有不同的「字形」，但字符集中只能對(duì)其分配一個(gè)編碼（除非相差過(guò)大，比如簡(jiǎn)化字），要顯示其不同的「字形」要通過(guò)使用為不同地區(qū)或標(biāo)準(zhǔn)設(shè)計(jì)的字體來(lái)實(shí)現(xiàn)。

△ 字異形（左簡(jiǎn)體中文，右日文）

4. 編碼發(fā)展史

ASCII

ASCII（American Standard Code for Information Interchange，美國(guó)信息交換標(biāo)準(zhǔn)代碼）出現(xiàn)在上個(gè)世紀(jì)60年代的美國(guó)，ASCII 一共定義了128個(gè)字符，包括英文字母 A-Z，a-z，0-9，一些標(biāo)點(diǎn)符號(hào)和控制符號(hào)。ASCII 采用的編碼模型是簡(jiǎn)單字符集，在英語(yǔ)系國(guó)家里 ASCII 標(biāo)準(zhǔn)很完美。但是世界上有好幾千種語(yǔ)言，其他語(yǔ)言系的國(guó)家想使用計(jì)算機(jī)，ASCII 就遠(yuǎn)遠(yuǎn)不夠了。所以編碼進(jìn)入了混亂的時(shí)代。

△ ASCII編碼

混亂時(shí)代

計(jì)算機(jī)的一個(gè)字節(jié)是8位，可以表示256個(gè)字符。ASCII 使用了7位，所以人們決定把剩余的1位也利用起來(lái)。人們對(duì)于 ASCII 已規(guī)定好的128個(gè)字符沒(méi)有異議，但是不同語(yǔ)系的人對(duì)于其他字符的需求不一樣，所以對(duì)于剩下的128個(gè)字符的擴(kuò)展千奇百怪。而且在亞洲語(yǔ)言系統(tǒng)中有更多的字符。于是就又產(chǎn)生了各種多字節(jié)表示一個(gè)字符的方法，每個(gè)語(yǔ)系都有自己特定的編碼頁(yè)（code pages），這就使整個(gè)局面更加混亂不堪。這時(shí) Unicode 出現(xiàn)了。

Unicode

Unicode 就是給計(jì)算機(jī)中所有的字符各自分配一個(gè)代號(hào)。Unicode 可以認(rèn)為是字符的編號(hào)，它為每種語(yǔ)言中的每個(gè)字符設(shè)定了統(tǒng)一并且唯一的二進(jìn)制編碼，Unicode 字符集和編碼方式解決了跨語(yǔ)言、跨平臺(tái)的交流問(wèn)題。但在 Unicode 里每一個(gè)字符都是用4個(gè)字節(jié)來(lái)編碼，原本英文字母僅需1個(gè)字節(jié)編碼，中文需2~3個(gè)字節(jié)編碼即可，這對(duì)于存儲(chǔ)或傳輸資源而言是很不劃算的。

UTF-8

UTF-8 基于 Unicode 編碼的一種節(jié)約字節(jié)的編碼，是一種可變長(zhǎng)度字符編碼方式。在UTF-8編碼中，英文字母是一個(gè)字節(jié)，中文（非生僻字）是2~3個(gè)字節(jié)?？梢哉J(rèn)為， UTF-8 是對(duì) Unicode 的一種壓縮算法。UTF-8 等編碼方式有效的節(jié)約了存儲(chǔ)空間和傳輸帶寬，因而受到了極大的推廣應(yīng)用。并且 UTF-8 兼容 ASCII 字符集。

UTF：Unicode Transformation Format

5. 中文編碼類型

△ 中文編碼類型

文字基礎(chǔ)知識(shí)

1. 文字

「文字」是信息交流的工具，可讀性、易讀性至關(guān)重要。在網(wǎng)頁(yè)設(shè)計(jì)中文字使用需要考慮幾個(gè)要素：首先考慮字體，其次是字重、字號(hào)、行高、字間距、行間距、段間距等。

△ 字體、字重

△ 字間距、字號(hào)、行高

△ 行間距、段間距

2. 字體

「字體」是文字的外在形式特征，不同的字體有不同的性格。

字體種類

綜合中文、英文都適用的廣義分類。

襯線、無(wú)襯線

△ 襯線和無(wú)襯線差異1

△ 襯線和無(wú)襯線差異2

字體 – 中文

字體構(gòu)成：

△ 筆畫(huà)

中宮，是指等分成九個(gè)小方格最中間的那一格。

△ 中宮

△ 中宮和字體關(guān)系

△ 中宮緊湊、中宮松散

間架結(jié)構(gòu)，漢字種類眾多，筆劃不等，空間排布極為重要。字體的間架結(jié)構(gòu)可分為兩類：?jiǎn)误w字、合體字。

△ 單體字 間架結(jié)構(gòu)

△ 合體字 間架結(jié)構(gòu)

漢字字形眾多，有些字形會(huì)產(chǎn)生視覺(jué)大小變化，頂格、縮格、出格就是針對(duì)不同結(jié)構(gòu)的字體筆畫(huà)特征進(jìn)行微調(diào)，讓他們看起來(lái)更加均衡、等大、視覺(jué)更完整。

△ 調(diào)整前

△ 調(diào)整后

字形調(diào)整實(shí)例：

襯線、無(wú)襯線字形演變：

△ 襯線 字形演變

△ 無(wú)襯線 字形演變

字體對(duì)比：

微軟雅黑、方正蘭亭黑簡(jiǎn)體、思源黑體、蘋方-簡(jiǎn)，筆畫(huà)寬度均勻，橫平豎直。同一字號(hào)，微軟雅黑最粗，小字號(hào)時(shí)閱讀會(huì)較為吃力。方正蘭亭黑從微軟雅黑派衍生出來(lái)，可以更好地適應(yīng)其他應(yīng)用場(chǎng)合。

黑體、華文黑體、冬青黑體筆畫(huà)末端寬度不同。

字體 – 英文

「字谷」概念來(lái)自西文字母設(shè)計(jì)，字谷指字母中部分或完全封閉的空間，即字母當(dāng)中留白部分。

英文的字體結(jié)構(gòu)是由4條平行線組成，有時(shí)候是5條，但是一般大寫線會(huì)忽略?！富€」在西文中是標(biāo)準(zhǔn)，單個(gè)字母的所有立腳點(diǎn)都是在這條線上（除了 g、j、p、y）。英文文字結(jié)構(gòu)多種多樣，4條平行線的位置也會(huì)發(fā)生改變。

升部：上緣線和主線之間的內(nèi)容。

降部：下緣線和基線之間的內(nèi)容。

字體對(duì)比：Helvetica Neue、Arial、DIN

Helvetica Neue：中性，無(wú)襯線，現(xiàn)代主義風(fēng)格字體。字體末端嚴(yán)格保持橫平豎直，性格嚴(yán)謹(jǐn)、保守，沒(méi)有任何的修飾，適合不同分辨率的顯示器。該字體是 Helvetica 字體的升級(jí)版本，擁有更多的字重，更易于不同場(chǎng)合的應(yīng)用。字形則相對(duì)偏胖，筆畫(huà)更清晰，而且小字號(hào)的情況下可讀性也很高。

Arial：Arial 是一套隨同多套微軟應(yīng)用軟件所分發(fā)，無(wú)襯線。該字體比例及字重和 Helvetica 極相似，其實(shí)是 Monotype Grotesque 系列的衍變。在字體及字距上都做了一些細(xì)微的調(diào)整和變動(dòng)，以增加它在電腦屏幕的不同分辨率的可讀性。

DIN：字形瘦長(zhǎng)，無(wú)襯線，適合顯示比較長(zhǎng)的數(shù)字，但是小字號(hào)的情況下識(shí)別度較低。DIN 字體在德國(guó)有著悠久歷史，是交通標(biāo)志、路牌、門牌和車牌的標(biāo)準(zhǔn)字體。雖然曾經(jīng)是德國(guó)納粹使用的字體，但是經(jīng)過(guò)設(shè)計(jì)和重新升級(jí)。DIN 在雜志、海報(bào)以及其他各種設(shè)計(jì)領(lǐng)域都被廣泛地使用。

Helvetica Neue、Arial、DIN 數(shù)字對(duì)比：

3. 字重

「字重」是同一種字體的不同字形粗細(xì)，即字體重量。字重的劃分根據(jù)不同字體廠商各有不同，不同的字重稱呼也可以不一樣，常見(jiàn)的劃分如下：

在排版中，一種字體會(huì)在標(biāo)題、正文、說(shuō)明注釋等不同內(nèi)容下使用，單一的字重不能很好適應(yīng)排版需求，于是衍生出了同一個(gè)字體的不同字重。

4. 字號(hào)

「字號(hào)」是字體的高度，不同平臺(tái)字號(hào)規(guī)范不同。

在界面設(shè)計(jì)中，文字字號(hào)決定了信息層次和權(quán)重。首先要設(shè)定基準(zhǔn)字號(hào)（最小字號(hào)），然后可依據(jù)一定規(guī)律設(shè)定導(dǎo)航、標(biāo)題等稍大字號(hào)。一般網(wǎng)頁(yè)基準(zhǔn)字號(hào)有12px、14px、16px等。

字號(hào)也受閱讀距離影響，眼睛到屏幕距離40~70cm，為較適合的閱讀距離。

Ant Design 定義的電腦顯示器閱讀距離（50 cm）從原先的12上升至14，以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳。

5. 行高

「行高」可以理解為一個(gè)包裹在字體外面的無(wú)形的盒子。字號(hào)和行高決定著一套字體系統(tǒng)的動(dòng)態(tài)與秩序之美。

西文：西文基本行高是字號(hào)的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來(lái)創(chuàng)造行間空隙。

中文：中文因?yàn)樽址軐?shí)且高度一致，所以一般行高需要更大，根據(jù)不同人群的特點(diǎn)（兒童、年輕人、老年人）以及使用環(huán)境，可達(dá)到1.5~2倍甚至更大。

Ant Design 受到5音階以及自然律的啟發(fā)定義了10個(gè)不同字號(hào)以及與之相對(duì)應(yīng)的行高。

6. 字間距

「字間距」是指一組字母之間相互間隔的距離，受字偶距和字體影響。

字偶距：是指兩個(gè)字母（或其他字符，比如數(shù)字，標(biāo)點(diǎn)符號(hào)等）之間的空白。不同的字母有不同的外形，所以字體使用相等的字間距是不協(xié)調(diào)的。所以需要調(diào)整字偶距來(lái)提升可讀性。

按字間距可分類為：比例字體（Proportional）和等寬字體（Monospaced）。

比例字體：根據(jù)字符外形特點(diǎn)設(shè)置不同字距的字體，這種字體外形協(xié)調(diào)，可讀性好。

等寬字體：每個(gè)字符設(shè)置相同字距的字體，其優(yōu)點(diǎn)是可以很好的控制排版對(duì)齊。

7. 行間距

行間距（line spacing / leading）：行與行之間的距離，作為一段文本中的留白，行間距讓字與字之間有了可呼吸的空間，行間距對(duì)文章的易讀性有很大影響。

排版推薦使用行間距1.2~2倍。

如何設(shè)定行間距，如何規(guī)范行間距

行間距由行高決定，為了確?？勺x性增加行間距，就需要增加行高。舉個(gè)例子：字號(hào)12，行高設(shè)定20，那么行間距=「（行高-字號(hào)）÷2」×2，除2又乘2，我就簡(jiǎn)單的簡(jiǎn)化成行間距 = 行高 – 字號(hào)，那么行間距就是20-12=8，并且可以將這個(gè)數(shù)值固定下來(lái)，重復(fù)使用。

注：至于為什么是20，因?yàn)樽畛跻粋€(gè)字節(jié)用8個(gè)二進(jìn)制位來(lái)表示，所以現(xiàn)在的很多網(wǎng)頁(yè)設(shè)計(jì)中常用到8。12+8=20，參考 Ant Design，網(wǎng)上有很多設(shè)計(jì)師總結(jié)的行間距計(jì)算方法，對(duì)于一個(gè)數(shù)學(xué)不好的我來(lái)說(shuō)，參考已有總結(jié)和經(jīng)驗(yàn)得出的數(shù)值，固定這個(gè)數(shù)值重復(fù)使用，這樣最簡(jiǎn)單。

8. 段間距

段間距（paragraphs spacing）：段落與段落之間的距離，可保持頁(yè)面節(jié)奏，與字體、行高相互關(guān)聯(lián)。為保證文章易讀性，正文段間距，可以簡(jiǎn)單地取一個(gè)空行（也就是一個(gè)行高），這是比較常規(guī)也比較合適的做法。舉個(gè)例子：字號(hào)12，行高設(shè)定20，段間距 = 行高 + 行間距。

小結(jié)

要設(shè)置「有節(jié)奏感的文本內(nèi)容」就要遵循這些規(guī)則：段間距大于行高，行高大于行間距，行間距大于字間距。

字體選用基礎(chǔ)原則

1. 網(wǎng)頁(yè)文字顯示方式

網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容一般都是通過(guò)電腦各種瀏覽器來(lái)承載顯示的，瀏覽器顯示字體是直接讀取用戶操作系統(tǒng)里的字體。

2. 字體選用原則

字體是界面設(shè)計(jì)中最基本的構(gòu)成之一，科學(xué)的字體系統(tǒng)：始終保證信息具有優(yōu)秀的易讀可讀性，提升用戶的閱讀體驗(yàn)及工作效率。

• 原則一：字體優(yōu)先使用各操作系統(tǒng)默認(rèn)的字體。
• 原則二：有版權(quán)、筆畫(huà)嚴(yán)謹(jǐn)、清晰可讀、經(jīng)典。

3. 操作系統(tǒng)

下圖數(shù)據(jù)來(lái)源：世界互聯(lián)網(wǎng)市場(chǎng)份額統(tǒng)計(jì)網(wǎng)站 Net MarketShare。

△ 操作系統(tǒng)市場(chǎng)占有率 TOP10

各操作系統(tǒng)默認(rèn)字體：

4. 瀏覽器

電腦瀏覽器直接讀取用戶操作系統(tǒng)里的字體，不同瀏覽器對(duì)文字的渲染方式不同，因此了解市場(chǎng)瀏覽器使用情況很有必要。

下圖數(shù)據(jù)來(lái)源：世界互聯(lián)網(wǎng)市場(chǎng)份額統(tǒng)計(jì)網(wǎng)站 Net MarketShare

5. 字體版權(quán)

除了操作系統(tǒng)默認(rèn)字體，其次需要優(yōu)先選擇使用的就是已購(gòu)版權(quán)字體，如果沒(méi)有已購(gòu)買的字體，可考慮一些免費(fèi)字體，非免費(fèi)字體使用時(shí)需謹(jǐn)慎。

△ 公司常購(gòu)版權(quán)字體

文字規(guī)范

1. 字體規(guī)范

字體使用三原則

體系化：在同一個(gè)系統(tǒng)UI設(shè)計(jì)中先建立體系化的設(shè)計(jì)思路，對(duì)主、次、輔助、標(biāo)題、展示等類別的字體做統(tǒng)一的規(guī)劃，再落地到具體場(chǎng)景中進(jìn)行微調(diào)。建立體系化的設(shè)計(jì)思路有助于強(qiáng)化橫向字體落地的一致性，提高字體應(yīng)用的性價(jià)比，減少不必要的樣式浪費(fèi)。

重復(fù)：重復(fù)設(shè)計(jì)中出現(xiàn)的一個(gè)或多個(gè)內(nèi)容。任何事情都可以重復(fù)。字體、字重字號(hào)、顏色、一條線、各種形狀（如圓形、正方形或三角形）等。字體使用最好不要超過(guò)3種，一般同一個(gè)系統(tǒng)UI設(shè)計(jì)內(nèi)容的字體數(shù)量建議2種即可，中文一種、英文數(shù)字一種。且字體樣式上也遵循重復(fù)原則，避免毫無(wú)意義的使用大量字號(hào)、顏色、字重、行高等。

韻律：在需要拉開(kāi)差距的時(shí)候可以嘗試選擇對(duì)比大的字體字號(hào)，令字號(hào)之間產(chǎn)生一種微妙的韻律感。為保證良好的閱讀體驗(yàn)，每行保持適當(dāng)?shù)淖址麛?shù)量。每行上擁有適當(dāng)?shù)淖址麛?shù)量是文本可讀性的關(guān)鍵。如果每行文字太短，視線必須反復(fù)折回來(lái)，打破讀者的節(jié)奏。如果一行文字太長(zhǎng)，用戶的眼睛將很難專注于文本。英文無(wú)特殊要求避免使用全大寫字符，因?yàn)闀?huì)大大延緩用戶掃描和閱讀的速度。

現(xiàn)有產(chǎn)品字體統(tǒng)計(jì)

字體規(guī)范

綜合考慮不同操作系統(tǒng)選用最佳字體體驗(yàn)。

代碼聲明：

• Font-family：Helvetica Neue, Helvetica, Arial, 「蘋方-簡(jiǎn)」, 「Microsoft YaHei」, 「微軟雅黑」, sans-serif。
• 英文字體：首先查找Helvetica Neue（Mac），然后查找Helvetica（Win），都找不到就用Arial（Mac&Win）；若是以上三者都缺失，則使用當(dāng)前默認(rèn)的sans-serif字體（操作系統(tǒng)或?yàn)g覽器指定）；
• 中文字體：選用平臺(tái)默認(rèn)中文字體 蘋方-簡(jiǎn)（Mac），微軟雅黑（Win）。

2. 字重規(guī)范

一般情況下會(huì)選用「一粗一細(xì)」兩種字重。

粗體：在視覺(jué)面積上較重，筆畫(huà)加粗，字腔（筆畫(huà)間空間）小，突出顯示，產(chǎn)生強(qiáng)調(diào)作用。常用于標(biāo)題和標(biāo)語(yǔ)。

細(xì)體：在視覺(jué)面積上較輕，筆畫(huà)輕細(xì)，字腔（筆畫(huà)間空間）大，結(jié)構(gòu)疏朗清透，閱讀時(shí)不會(huì)讓讀者產(chǎn)生壓迫感。常用于正文和說(shuō)明。

中文、英文推薦使用字重：

3. 字號(hào)規(guī)范

現(xiàn)有產(chǎn)品字號(hào)統(tǒng)計(jì)

字號(hào)規(guī)范

4. 行高規(guī)范

參考：Ant Design 受到5音階以及自然規(guī)律啟發(fā)定義了10個(gè)不同字號(hào)以及與之相對(duì)應(yīng)的行高。

5. 字間距規(guī)范

使用比例字體，根據(jù)字符外形特點(diǎn)設(shè)置不同字距的字體，這種字體外形協(xié)調(diào)，可讀性好。

6. 行間距規(guī)范

顏色規(guī)范

1. Ant Design 兩大色彩體系

Ant Design 兩大色彩體系：系統(tǒng)級(jí)、產(chǎn)品級(jí)。

系統(tǒng)級(jí)色彩體系

系統(tǒng)級(jí)色彩體系主要定義了螞蟻中臺(tái)設(shè)計(jì)中的基礎(chǔ)色板、中性色板和數(shù)據(jù)可視化色板。

• 基礎(chǔ)色板：12個(gè)主色（薄暮/火山/日暮/金盞花/日出/青檸/極光綠/明青/拂曉藍(lán)/極客藍(lán)/醬紫/法式洋紅）以及衍生色共120個(gè)顏色。
• 中性色板：黑、白、灰，從白到黑共10個(gè)顏色。
• 數(shù)據(jù)可視化色板：敬請(qǐng)期待。

產(chǎn)品級(jí)色彩體系

產(chǎn)品級(jí)色彩體系則是在具體設(shè)計(jì)過(guò)程中，基于系統(tǒng)色彩進(jìn)一步定義符合產(chǎn)品調(diào)性以及功能訴求的顏色。

• 品牌色應(yīng)用：品牌色取自基礎(chǔ)色板的藍(lán)色#1890FF，應(yīng)用場(chǎng)景包括：關(guān)鍵行動(dòng)點(diǎn)，操作狀態(tài)、重要信息高亮，圖形化等場(chǎng)景。
• 中性色：中性色主要應(yīng)用在文字部分，此外背景、邊框、分割線等場(chǎng)景中也非常常見(jiàn)。
• 功能色：功能色代表著明確的信息及狀態(tài)，如成功、出錯(cuò)、失敗、提醒、鏈接等。

2. 系統(tǒng)級(jí) 中性色

中性色包含了黑、白、灰。在網(wǎng)頁(yè)設(shè)計(jì)中被大量使用，合理的選擇中性色能夠令頁(yè)面信息具備良好的主次關(guān)系，助力閱讀體驗(yàn)。中性色板一共包含了從白到黑的10個(gè)顏色。

3. 產(chǎn)品級(jí) 中性色

Ant Design 的中性色主要應(yīng)用在文字、背景、邊框、分割線等場(chǎng)景中。產(chǎn)品中性色的定義需要考慮深色淺色背景的差異，同時(shí)結(jié)合 WCAG 2.0標(biāo)準(zhǔn)。中性色在落地的時(shí)候是按照「透明度」的方式實(shí)現(xiàn)。

VIP大數(shù)據(jù)用戶體驗(yàn)部 的中性色也是主要應(yīng)用在界面的文字、背景、邊框、分割線等場(chǎng)景中?？紤]到深淺色背景的差異，中性色根據(jù)設(shè)計(jì)需求在落地的時(shí)候可按照色值和透明度兩種方式實(shí)現(xiàn)，兩種方式優(yōu)先使用色值方式，盡量避免兩者混搭使用。

4. 產(chǎn)品級(jí) 功能色

功能色代表了明確的信息以及狀態(tài)，比如成功、警告、失敗、提醒、鏈接等。

功能色的選取需要遵守用戶對(duì)色彩的基本認(rèn)知。在一套產(chǎn)品體系下，功能色盡量保持一致，不要有過(guò)多的自定義干擾用戶的認(rèn)知體驗(yàn)。

文案

文案內(nèi)容來(lái)源于 Ant Design，一文一字之間可研究琢磨的空間還很大。

分享一個(gè)感觸很深的例子，里面有一個(gè)專業(yè)用語(yǔ)「閾yù值」和「閥fá值」，這兩個(gè)字一開(kāi)始我看了很久才看出來(lái)區(qū)別，查資料了解到，其實(shí)「閥fá值」在專業(yè)行業(yè)里是一個(gè)錯(cuò)別字，是一個(gè)錯(cuò)誤的用詞，其正確用法是「閾值」是所屬行業(yè)認(rèn)可通用詞?！搁搚ù值」又叫臨界值，是指一個(gè)效應(yīng)能夠產(chǎn)生的值或最高值。

所以精準(zhǔn)、清晰的語(yǔ)言會(huì)更容易讓用戶理解，合適的語(yǔ)氣更容易讓用戶建立信任感。因此在界面設(shè)計(jì)時(shí)，在使用和定義文案時(shí)要注意以下幾點(diǎn)：

• 從用戶角度出發(fā)；
• 表述一致；
• 重要的信息放在顯著位置；
• 專業(yè)、精準(zhǔn)、完整；
• 精簡(jiǎn)、友好、正面。

在有限的空間內(nèi)將重要的信息放在最前面，讓用戶第一眼看到最重要的內(nèi)容。（或通過(guò)高亮、留白等方式突出重要信息）。

結(jié)語(yǔ)

因?yàn)橛布浖恢痹谧兓?，設(shè)計(jì)規(guī)范和內(nèi)容也要定時(shí)更新，規(guī)范是為了在繁多復(fù)雜業(yè)務(wù)中尋求一種平衡，幫助各團(tuán)隊(duì)更的完成任務(wù)，有些內(nèi)容適合強(qiáng)制規(guī)定，有些內(nèi)容適合規(guī)范一個(gè)范圍，有些內(nèi)容適合制定一種規(guī)律方法……當(dāng)出現(xiàn)特殊情況時(shí)需要重新審視和不斷完善靈活使用。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn)、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

之前聽(tīng)一位同學(xué)在公司看國(guó)外作品學(xué)習(xí)的時(shí)候，公司的一個(gè)老員工發(fā)現(xiàn)了，就過(guò)來(lái)語(yǔ)重心長(zhǎng)地和他說(shuō)，你看這些東西沒(méi)用的，學(xué)不到東西，就是在浪費(fèi)時(shí)間等等，類似這樣的話說(shuō)了一堆。聽(tīng)到這個(gè)話題的時(shí)候就特別的親切，因?yàn)樵陂_(kāi)始接觸設(shè)計(jì)的時(shí)候，和那位老員工的想法一樣。但是隨著對(duì)設(shè)計(jì)的理解越來(lái)越深，接觸的項(xiàng)目多了以后，這種想法慢慢就淡化了。

其實(shí)新人對(duì)研究國(guó)外作品這件事存在誤區(qū)是很正常的，畢竟應(yīng)用的文字不一樣，內(nèi)容多數(shù)我們也看不懂，把時(shí)間花在這上面給人的第一感覺(jué)確實(shí)有點(diǎn)不合適，哪有直接去看國(guó)內(nèi)的作品來(lái)得過(guò)癮。我們暫時(shí)拋開(kāi)作品的數(shù)量與質(zhì)量不談，來(lái)聊聊這個(gè)話題。

我們平時(shí)在工作中完成的作品，里面基本都會(huì)包含文字、圖片或圖形、色彩這幾種基本元素，不管你做的是海報(bào)、logo還是畫(huà)冊(cè)都離不開(kāi)它們，比如純文字類型的海報(bào)、公告、條幅。

純圖片形式的燈箱、畫(huà)冊(cè)、展板、品大片。

純圖形的UI圖標(biāo)、布展裝飾、logo徽章。

包括純顏色的手機(jī)屏保、背景墻之類的設(shè)計(jì)，這些基本的設(shè)計(jì)元素，會(huì)在設(shè)計(jì)作品中單獨(dú)出現(xiàn)。

而更多的設(shè)計(jì)作品都是這幾種元素同時(shí)出現(xiàn)的結(jié)果，這些海報(bào)中，文字、圖片、圖形、色彩這幾種元素都占全了。注意，這些海報(bào)用的都是中文，屬于國(guó)內(nèi)的海報(bào)對(duì)吧？也能夠在這上面學(xué)到一些東西，那我們換幾張國(guó)外的作品看看，有什么不一樣的地方。

日本的、歐洲的等等都是優(yōu)質(zhì)的設(shè)計(jì)作品，我們可以來(lái)分析一下這些作品，風(fēng)格、技法、表現(xiàn)形式暫時(shí)可以拋開(kāi)。

構(gòu)成他們的元素和國(guó)產(chǎn)海報(bào)有什么區(qū)別？都存在文字、圖片、圖形包括色彩，唯一的區(qū)別就是上面說(shuō)的，不同的國(guó)家，使用的文字會(huì)不太一樣。那么這種文字上的差異真的會(huì)影響到我們對(duì)這個(gè)作品的研究、欣賞嗎？

答案很明顯，不會(huì)的。了解一些構(gòu)成知識(shí)的同學(xué)都知道，構(gòu)成版面的基本元素就是點(diǎn)、線、面，而文字、圖片、圖形包括色彩，他們?cè)诎婷嬷姓w來(lái)看，本質(zhì)上就是點(diǎn)線面的具象表現(xiàn)。那我們?cè)谛蕾p這些作品的時(shí)候，完全可以把文字看成是點(diǎn)線面的存在，這樣的話也就沒(méi)有必要糾結(jié)他用的是哪個(gè)國(guó)家的文字了。

像這張國(guó)外的海報(bào)，我們把這里存在的視覺(jué)元素標(biāo)注出來(lái)，他們本質(zhì)上就是這些東西。

國(guó)內(nèi)的也一樣，如果你看到的是這些東西，還需要糾結(jié)這是哪個(gè)國(guó)家的作品嗎？

版面中的所有視覺(jué)元素，都可以看成是點(diǎn)線面的存在。

來(lái)做一組實(shí)驗(yàn)，這張英文海報(bào)，我們把這里面的英文，替換成漢字。前后對(duì)比一下，海報(bào)的整體感覺(jué)，基本沒(méi)有出現(xiàn)什么變化。

再換一組，感覺(jué)基本一致。

再來(lái)一組，這回我們把英文替換成日文。類似這個(gè)版面構(gòu)成的形式，我們把文字替換成英文、漢字，變化也不會(huì)很多，依然很美觀。我們研究、學(xué)習(xí)、欣賞優(yōu)秀作品的時(shí)候，一定不能受到類似「看國(guó)外的設(shè)計(jì)沒(méi)用」這類思維的束縛，不然的話你會(huì)錯(cuò)過(guò)很多的。

不光從構(gòu)成的角度看這個(gè)問(wèn)題是這樣，其實(shí)從設(shè)計(jì)發(fā)展的角度來(lái)看，也能得出同樣的結(jié)論。因?yàn)楝F(xiàn)代設(shè)計(jì)教育的起源來(lái)自德國(guó)的包豪斯，后來(lái)包豪斯的理念傳到了美國(guó)，又通過(guò)美國(guó)傳遍了整個(gè)世界。包括我們現(xiàn)在學(xué)習(xí)的平面設(shè)計(jì)體系，都是一脈相承的。從這個(gè)起源的角度來(lái)看，也不存在國(guó)內(nèi)、國(guó)外那么大的差別。都是一個(gè)門派的，只要做的好，那看誰(shuí)的都一樣。說(shuō)了這么多，應(yīng)該能看出來(lái)，我們是鼓勵(lì)大家去多看優(yōu)秀作品的。那么堅(jiān)持做這件事，又能得到什么呢？下面就來(lái)說(shuō)一下，為什么要養(yǎng)成欣賞優(yōu)秀作品的習(xí)慣？

欣賞優(yōu)秀作品的習(xí)慣

先來(lái)看看這個(gè)習(xí)慣能給我們帶來(lái)的好處有哪些。

1. 提升審美

長(zhǎng)時(shí)間欣賞優(yōu)秀的作品，會(huì)對(duì)我們個(gè)人的審美能力有質(zhì)的提升，幫助我們開(kāi)闊眼界。眼高手低雖然是個(gè)貶義詞，不過(guò)這對(duì)于正在成長(zhǎng)的我們來(lái)說(shuō)是好事，最起碼能讓自己對(duì)自己的能力有一個(gè)比較清晰的認(rèn)知，知道自己做的不夠好，這樣會(huì)有動(dòng)力不斷的鞭策自己學(xué)習(xí)新的東西，把專業(yè)做到更好。

2. 培養(yǎng)興趣

如果我們對(duì)這個(gè)行業(yè)沒(méi)興趣的話，就算你再有設(shè)計(jì)天賦，也很難做好的。堅(jiān)持看優(yōu)秀的作品給我們提供持續(xù)的刺激，說(shuō)不定哪幅作品就非常合你的胃口，勾起你的興趣，讓你花時(shí)間去研究。

3. 利用碎片化的時(shí)間學(xué)習(xí)

平時(shí)都很忙很累，再懶一點(diǎn)，就沒(méi)什么完整的時(shí)間學(xué)習(xí)。這個(gè)時(shí)候如果能把碎片化的時(shí)間利用上，我們坐地鐵、坐公交、午休、睡覺(jué)前，包括上廁所的時(shí)候都是可以通過(guò)欣賞這些優(yōu)秀的作品提升自己的，這也是一個(gè)提升學(xué)習(xí)效率的習(xí)慣。

4. 為設(shè)計(jì)提供靈感和參照

這也是最重要的一點(diǎn)，不知道你有沒(méi)有一接到項(xiàng)目，大腦就一片空白的感覺(jué)，是因?yàn)槟愀苫罡傻奶俚脑騿?？不一定，有不少人每天不停的干活還這樣。其實(shí)出現(xiàn)這種狀況的主要原因就是看東西看的太少。很多好的形式我們見(jiàn)都沒(méi)有見(jiàn)過(guò)，怎么可能有印象，沒(méi)印象就更不可能把他們應(yīng)用到我們平時(shí)的工作中了。

所以說(shuō)，我們想有好的想法、無(wú)盡的靈感，必須通過(guò)看優(yōu)秀作品這個(gè)成本低、見(jiàn)效快的方式來(lái)提升了，并且通過(guò)我們持續(xù)不斷的積累，得到的東西會(huì)越來(lái)越多，這是一種可以不斷提升自己的方式。

當(dāng)然了，欣賞優(yōu)秀作品也是有方法的，走馬觀花的看一大堆，最后能得到的可能只有審美的提升。就是感覺(jué)自己周圍的人做的東西都是垃圾，輪到自己做，發(fā)現(xiàn)自己也很垃圾。那為了避免這個(gè)悲劇發(fā)生在你的身上，下面分享一些欣賞優(yōu)秀作品的正確方法。

如何欣賞作品

我們欣賞作品的場(chǎng)景主要有兩種，第一種是有目的、有針對(duì)性的去看；第二種是沒(méi)有針對(duì)性的看。這兩種場(chǎng)景要看的東西差不多，細(xì)節(jié)上會(huì)有一些差異，我們先來(lái)了解一下有針對(duì)性的。一般來(lái)說(shuō)，有目的有針對(duì)性指的是我們接到了具體的項(xiàng)目，但是這個(gè)項(xiàng)目以前沒(méi)有接觸過(guò)，需要了解一下別人都是怎么做的，然后帶著問(wèn)題去尋找答案。

先從項(xiàng)目要求入手，就是看看你做的內(nèi)容是關(guān)于什么的，比如你要做日本壽司海報(bào)，就去搜集這方面的作品。有些同學(xué)在搜索的時(shí)候很實(shí)在，要做關(guān)于壽司的海報(bào)就專門去找日本壽司的作品，這種方式的缺陷特別明顯，如果你要做的這個(gè)項(xiàng)目品類能找到的優(yōu)秀作品很多還好，不過(guò)多數(shù)情況下，優(yōu)秀作品是不那么好找的。這個(gè)時(shí)候把思路打開(kāi)，選擇的余地就會(huì)大很多。

比如把日本壽司海報(bào)這個(gè)關(guān)鍵詞縮減成日本料理海報(bào)，優(yōu)秀作品的數(shù)量會(huì)成倍的增加。

或者你要做的是海報(bào)，那我們搜索的時(shí)候除了海報(bào)，還可以找日式的包裝、畫(huà)冊(cè)。

網(wǎng)站、插畫(huà)等等作品，都會(huì)給我們帶來(lái)很多的思路。

數(shù)量的問(wèn)題，這也是我們推薦看國(guó)外優(yōu)秀作品的一個(gè)原因，光去找中文的作品，在一個(gè)小品類里，很難找到足夠多的優(yōu)秀作品，一般的東西又沒(méi)有什么學(xué)習(xí)的價(jià)值，這時(shí)候加入國(guó)外的東西會(huì)讓我們的選擇余地更大、思路更廣。我們?cè)谒鸭髌返耐瑫r(shí)，連帶關(guān)于項(xiàng)目的一些圖片、文字材料都可以一起搜索，這樣能幫助我們更深的理解這個(gè)項(xiàng)目，學(xué)到更多的知識(shí)。

其實(shí)學(xué)習(xí)這個(gè)行為不是非得上學(xué)、看書(shū)才能學(xué)，我們?cè)O(shè)計(jì)師在接觸各種項(xiàng)目的時(shí)候，通過(guò)與客戶溝通和查閱項(xiàng)目相關(guān)資料的過(guò)程也是在學(xué)習(xí)，而且我覺(jué)得這種學(xué)習(xí)方式比我們單純的去上學(xué)讀書(shū)更深刻、實(shí)用。學(xué)到的東西也是在工作中甚至生活中用得上。

在找到這些優(yōu)秀作品以后，就可以嘗試去尋找這些作品共同的規(guī)律。

比如文字，如果文字屬于同一種題材的設(shè)計(jì)，就算是不同國(guó)家的作品，我們也會(huì)在里面找到一些共同的特征。比如這些關(guān)于食品的字體，都會(huì)表現(xiàn)出屬于食物的那份圓潤(rùn)的特征，這就是一種規(guī)律。這些規(guī)律性的東西總結(jié)出來(lái)，就可以嘗試應(yīng)用到自己的作品中。這個(gè)是學(xué)習(xí)大的規(guī)律，在這個(gè)大規(guī)律的基礎(chǔ)上，再去關(guān)注這里面的一些小的細(xì)節(jié)。想做好東西，稍小的細(xì)節(jié)也很重要。

再比如文字組的形式。文字的主要作用是傳遞信息，那么如何、美觀的把文字表現(xiàn)出來(lái)就要靠文字組了。一款作品做的是否優(yōu)秀，通過(guò)觀察文字組的處理是否細(xì)致，很容易看出來(lái)。信息的層級(jí)關(guān)系需要文字組來(lái)表現(xiàn)，主標(biāo)題、副標(biāo)題、段落文字、時(shí)間、裝飾性的文字等等，這些文字可不是隨便扔到版面中就行了，它們都是通過(guò)設(shè)計(jì)師的處理，以文字組合的形式分布在版面的各個(gè)位置。

這里面每一個(gè)文字組合都是一個(gè)小的個(gè)體，比如很常見(jiàn)的日期的處理方式就有很多，像這張海報(bào)里日期文字組合的處理方式。

我們看到了覺(jué)得這個(gè)形式不錯(cuò)，就可以記下來(lái)。那這些處理方式我們見(jiàn)過(guò)了，遇到合適的項(xiàng)目，換一個(gè)字體，或者調(diào)整一下數(shù)字，就能應(yīng)用到自己的項(xiàng)目中了，這些組合形式，你沒(méi)看見(jiàn)、沒(méi)有印象，自己拍腦袋是很難想出來(lái)的。

包括這種產(chǎn)品或圖形的表現(xiàn)排列形式，在做畫(huà)冊(cè)、雜志、頭圖、詳情頁(yè)、海報(bào)、展板的時(shí)候經(jīng)常會(huì)碰到。

自己排不好的話，就可以借鑒這些作品的形式和規(guī)律，再上手就輕松多了。如果你想做的是logo設(shè)計(jì)，也可以去觀察優(yōu)秀作品的細(xì)節(jié)，比如字體與圖形的比例、文字與圖形的間距是多少、文字與文字的間距如何控制，包括別人的創(chuàng)意點(diǎn)在哪，這些東西都是可以在別人的作品中學(xué)到的。

△ 《高手的平面課堂！解鎖LOGO設(shè)計(jì)新技巧》

就像異形同構(gòu)這篇文章，你看到了這類作品，就能回憶起這款 logo 使用的是異形同構(gòu)中的邊線同構(gòu)這個(gè)方式設(shè)計(jì)的，這種方式有哪些特點(diǎn)？如何能設(shè)計(jì)出類似的作品？教程里都講過(guò)了，這樣又把之前學(xué)到東西鞏固了一遍。

△ 《平面設(shè)計(jì)中，如何通過(guò)“抄襲”優(yōu)秀的作品成為高手？》

包括你看過(guò)的作品，他們的網(wǎng)格是怎么劃分的。使用的是什么樣的字體、構(gòu)圖如何都可以作為我們思考學(xué)習(xí)的方向，關(guān)于這幾點(diǎn)的詳細(xì)內(nèi)容，在之前的文章里很細(xì)致的講過(guò)，沒(méi)看過(guò)的同學(xué)可以去看看。

如果是沒(méi)有針對(duì)性的看作品，和上面的思考路徑是一致的，只不過(guò)是利用碎片化的時(shí)間來(lái)學(xué)習(xí)而已，更靈活一些，可以快速瀏覽，也可以觀察細(xì)節(jié)。如果你有收藏整理這些材料的習(xí)慣會(huì)更好，拿出來(lái)就能用，收集整理的越多、越細(xì)致，以后工作起來(lái)越輕松。

案例演示

所謂的創(chuàng)意就是我們把不同的元素重新發(fā)散、打散、重組呈現(xiàn)的過(guò)程。能夠保證有想法、思路的前提就是見(jiàn)識(shí)，要見(jiàn)過(guò)很多好東西，有了很深的印象以后才能憑借這些印象，學(xué)到的東西設(shè)計(jì)成新的、屬于你自己的作品。下面給大家演示一遍，我們看多了優(yōu)秀作品以后，再去做設(shè)計(jì)的時(shí)候會(huì)發(fā)生什么變化。

比如我們要用這些材料來(lái)設(shè)計(jì)一款網(wǎng)頁(yè)頭圖。

看到這些材料，可能會(huì)想到以前在哪見(jiàn)過(guò)，類似這種左右放置的圖配文形式。

產(chǎn)品價(jià)格的處理方式見(jiàn)過(guò)這樣的。

文字的形式全部使用黑體和無(wú)襯線字體，很多作品都是這樣處理的，放在一起很和諧。

還見(jiàn)過(guò)所有的文字組，都以左對(duì)齊的形式進(jìn)行排列的作品。

只要有印象，我們?cè)谠O(shè)計(jì)的過(guò)程中就會(huì)下意識(shí)的往這些方向上靠，設(shè)計(jì)出的作品也會(huì)接近前面的那些規(guī)則。

在這些規(guī)則影響的基礎(chǔ)上，如果我們還見(jiàn)過(guò)襯線體搭配無(wú)襯線體的作品，圖疊字的形式，也能做出接近的風(fēng)格作品。

同樣內(nèi)容，不同的表現(xiàn)形式。你看過(guò)的優(yōu)秀作品越多，選擇的空間就越大。

我們?cè)賮?lái)看這個(gè)案例，一張藝術(shù)展的海報(bào)。

整體的骨架是這樣的，這種骨架布局的方式來(lái)自于左邊這個(gè)案例，類似的形式有很多。

主體文字組合的結(jié)構(gòu)是因?yàn)橐?jiàn)過(guò)類似的組合方式，在文字量近似的情況下，我們的文字組合也可以設(shè)計(jì)成類似的形式。

如果說(shuō)我們?cè)O(shè)計(jì)的這個(gè)文字組合之間，距離稍遠(yuǎn)，也有很多的作品會(huì)使用線的分割來(lái)解決這個(gè)問(wèn)題。

包括其他文字組合的布局方式，也是參照這種軸線式的排列方法。文字使用的是宋體搭配西文襯線體的方式，中文的宋體和西文的襯線體具有類似的筆畫(huà)特征，基礎(chǔ)文字的統(tǒng)一性能夠得到保障。

將和主題相關(guān)的照片填充到劃分好的網(wǎng)格中，這里面使用的照片是同一張照片的不同局部，這種對(duì)照片重復(fù)的處理方式也很常見(jiàn)，在給版面增加變化的同時(shí)，也會(huì)制造出一定的故事性，引發(fā)受眾的聯(lián)想。

一張海報(bào)從無(wú)到有的創(chuàng)作過(guò)程。

想設(shè)計(jì)出不錯(cuò)的作品，沒(méi)有大量的積累，對(duì)優(yōu)秀的作品沒(méi)有印象是肯定行不通的。

總結(jié)

怎么樣，是不是覺(jué)得多看看優(yōu)秀的作品還是有用的？不管是國(guó)外的、國(guó)內(nèi)的都一樣能學(xué)到很多。類似我是做電商的，看印刷品的設(shè)計(jì)沒(méi)用；我是做包裝的，看版式的作品沒(méi)用；我專門做商業(yè)項(xiàng)目的，看藝術(shù)類的項(xiàng)目沒(méi)用；我們公司是做金融產(chǎn)品的，那看其他行業(yè)的東西都沒(méi)用。遇到這種言論，我們可以冷靜的思考一下，是真的沒(méi)用，還是這個(gè)人，他不會(huì)用。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

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

為什么你的設(shè)計(jì)看起來(lái)很亂？在此之前我們先了解一個(gè)概念，我們?cè)鯓涌催@個(gè)世界？

我們通過(guò)眼睛看世界，眼（又稱眼睛，目）是一個(gè)可以感知光線的器官。那么結(jié)論來(lái)了，我們看到這個(gè)世界，其實(shí)本質(zhì)就是看到了光。舉個(gè)例子，晴空萬(wàn)里時(shí)我們可以看到很遠(yuǎn)很遠(yuǎn)的距離，反之在漆黑的屋子里，我們什么都看不見(jiàn)。

我們?cè)賮?lái)了解第二個(gè)問(wèn)題，眼睛是怎樣成像的？眼睛通過(guò)調(diào)節(jié)晶狀體的彎曲程度（屈光）來(lái)改變晶狀體焦距獲得倒立的、縮小的實(shí)像。簡(jiǎn)單來(lái)說(shuō)，成像原理就是晶狀體來(lái)改變焦距，簡(jiǎn)單一點(diǎn)解釋決定成像的重要因素是焦距。

你的設(shè)計(jì)看起來(lái)很亂，往往在這幾個(gè)方面出了問(wèn)題：

• 明暗關(guān)系紊亂；
• 視覺(jué)焦點(diǎn)不明確，畫(huà)面沒(méi)有重點(diǎn)；
• 顏色雜亂，毫無(wú)章法。

明暗

明暗是指畫(huà)中物體受光、背光和反光部分的明暗度變化以及對(duì)這種變化的表現(xiàn)方法。明暗分亮面，灰面，暗面，以及明暗交界線，反光五大調(diào)子。單個(gè)物體明暗關(guān)系，暗部（反光，投影）＞灰面＞亮面。整體關(guān)系，靠近光源暗部＞遠(yuǎn)離光源……畫(huà)畫(huà)核心畫(huà)的是光，遵循光照的自然規(guī)律即可。

去色檢查畫(huà)面明暗關(guān)系

從上至下三張圖依次是去色之后的黑白圖；運(yùn)用色相和飽和度給畫(huà)面賦予一個(gè)顏色的單色圖；原圖。

從下圖可以粗略得出結(jié)論，明暗（光源色）+固有色=色彩。調(diào)色之前先處理明暗，畫(huà)面顏色處理起來(lái)就非常簡(jiǎn)單了。

最近火爆的國(guó)產(chǎn)硬核科幻片海報(bào)，即使去掉顏色，黑白關(guān)系依舊明確清楚。好的設(shè)計(jì)即使沒(méi)有任何顏色，依舊是一副好的素描畫(huà)。我所理解的明暗關(guān)系與色彩的關(guān)系相當(dāng)于人體與衣服妝容的關(guān)系，對(duì)于一個(gè)美女是否漂亮，衣服妝容的搭配是你能達(dá)到漂亮的上限，然而你的臉型，身高，氣質(zhì)，皮膚才是你能達(dá)到的驚為天人的基礎(chǔ)。

視覺(jué)焦點(diǎn)

視覺(jué)焦點(diǎn)究其概念，是讓我們的視線多停留幾秒的視覺(jué)元素，我們?cè)诋?huà)面中第一眼就能看到的元素，畫(huà)面中的「主角」。

對(duì)畫(huà)面的視覺(jué)漏斗進(jìn)行分類：

• 視覺(jué)焦點(diǎn)：想看不見(jiàn)都很難，表現(xiàn)突出；
• 重要元素：不經(jīng)意就能看見(jiàn)；
• 輔助元素：仔細(xì)看看也能看見(jiàn)（類似買理財(cái)產(chǎn)品的最右下角的小標(biāo)注，「投資有風(fēng)險(xiǎn)，理財(cái)需謹(jǐn)慎」）

高斯模糊法看視覺(jué)焦點(diǎn)

瞇著眼睛看形，睜著眼睛看細(xì)節(jié)。把畫(huà)面模糊調(diào)到一定程度，然后看畫(huà)面，如果畫(huà)面仍然能看清楚「主角」，那么畫(huà)面的視覺(jué)中心就是可以的。下圖畫(huà)面即使模糊了，我們依然能看清「男主角」沈騰以及飛馳人生四個(gè)大字，雖然原圖背景復(fù)雜以及其他裝飾物很多，依然不影響畫(huà)面的整體協(xié)調(diào)感，元素多且雜而不亂。

這上面的兩個(gè)例子看出，即使畫(huà)面模糊了，還是能清晰看到畫(huà)面表達(dá)的主題。那么模糊度多少合適呢，一般調(diào)整到上面所說(shuō)的視覺(jué)漏斗中重要元素看起來(lái)剛好模糊到看不清就可以了。

色彩

色彩是附著在物品上由于光的照射產(chǎn)品漫反射的顏色，可以粗略按色彩元素分為光源色，固有色和漫反射產(chǎn)生的環(huán)境色。按照長(zhǎng)期的實(shí)踐經(jīng)驗(yàn)來(lái)看，通常比較和諧的配色方式是除了產(chǎn)品的固有色之外，盡量把光源色和環(huán)境色統(tǒng)一在三種顏色（黑白灰不算顏色）之內(nèi)，顏色比例盡量類光源色的主色調(diào)占據(jù)畫(huà)面百分之八十的面積，其他環(huán)境色作為補(bǔ)充。

色彩插件檢查配色

谷歌插件 palette.site 能分析出畫(huà)面顏色的狀態(tài)以及畫(huà)面中幾種主要的顏色，借助這個(gè)插件能很輕松檢查畫(huà)面是否超過(guò)了3種顏色（黑白灰不算顏色），如果超過(guò)三種顏色，那么頁(yè)面就需要做減法，或者將顏色統(tǒng)一在一個(gè)色系里，用明度以及飽和度區(qū)分。

插件的使用方法：可以直接使用瀏覽器下載，然后也可以在瀏覽器中選擇一張圖片，右鍵「在新標(biāo)簽中打開(kāi)圖片」，然后再「點(diǎn)擊右上角的插件按鈕」分析顏色狀態(tài)。

從上面的兩個(gè)案例中可以看出，兩個(gè) banner 的顏色分析基本都在三種顏色以內(nèi)，特別是下面的看起來(lái)比較復(fù)雜的顏色，總共分析的顏色也就紅黃藍(lán)，其中藍(lán)色還是點(diǎn)綴色的存在。

今天的內(nèi)容就說(shuō)到這里了，我們回顧一下重點(diǎn)內(nèi)容，解決畫(huà)面看起來(lái)很亂可以有以下方法：

• 去色檢查畫(huà)面明暗關(guān)系
• 高斯模糊法看視覺(jué)焦點(diǎn)
• 色彩插件檢查配色

設(shè)計(jì)雖沒(méi)有近路，但可以少走彎路。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。