如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

現在讓我們關注最常見的設計專業：UI/UX設計師。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

為什么是第一性原理

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

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

我們運用第一性原理，而不是比較思維去思考問題是非常重要的。我們在生活中總是傾向于比較，對別人已經做過或者正在做的事情我們也都去做，這樣發展的結果只能產生細小的迭代發展。第一性原理的思想方式是用物理學的角度看待世界，也就是說一層層撥開事物表象，看到里面的本質，再從本質一層層往上走。

所以，我希望用第一性原理的思維方式，發現交互設計的本質，從而更好地理解和運用它。

什么是交互設計

交互設計，又稱互動設計（英文Interaction Design，縮寫 IxD 或者 IaD）是定義、設計人造系統的行為的設計領域。人造物，即人工制成物品，例如，軟件、移動設備、人造環境、服務、可佩帶裝置以及系統的組織結構。交互設計在于定義人造物的行為方式（the「interaction」即人工制品在特定場景下的反應方式）相關的界面?！俣劝倏?

讀完上面關于交互設計的權威解釋，相信有讀者和我一樣，在短時間內很難弄明白：到底什么是交互設計？

下面，我們一起用第一性原理，拆解和分析交互設計的本質。

小學語文老師教會我們一種名次解釋的方法——拆詞法，那么，交互設計可以拆解成：交互層和設計層。

交互層是什么

交互，即交流與互動。具體點說，在某個場景下，一個對象為了某個事件目標，與其他對象產生信息的交流與互動。在筆者看來，交互的本質是信息的交流與互動，包含用戶、目標、場景，它們共同構成交互設計的交互層，這是交互設計的前提。

而用戶、目標、場景，也正是辛向陽教授定義的交互設計5要素其中的3個。

案例1：我們為「餐廳點餐」這個事件進行交互設計，那首先要知道這個案例的交互層是什么，也就是信息的交流與互動是怎樣的。

這個例子的交互層是：用戶（我們）需要在某個場景（餐廳），與其他對象（餐廳/服務員）產生信息的交流與互動，才能達到目標（完成點餐）。

案例2：我們為「地鐵上聽音樂」這個事件進行交互設計，按照上面的思路，我們知道這個事件的交互層是：用戶（我們）需要在某個場景（地鐵上），與其他對象（音源）產生信息的交流與互動，才能達到目標（聽音樂）。

我小結一下，幫你理解交互設計的交互層。

當我們為某個事件進行交互設計時，首先要知道自己在一個什么樣的事件前提下開展交互設計，而這個前提就是我所說的交互層，即用戶在某個場景下，與其他對象產生信息的交流與互動，從而達到目標。

所以，在交互設計里的交互層，本質是信息的交流與互動，包含用戶、目標、場景，主角是信息交流互動的雙方或多方。

設計層是什么

在說交互設計的設計層之前，我們先來看「什么是設計」。

設計是把一種設想，通過合理的規劃、周密的計劃、通過各種感覺形式傳達出來的過程?！俣劝倏?

現在我們將上述解釋放到「交互設計」里去理解。交互設計里的設計，就是在交互層的前提下，為一個事件合理的規劃/計劃（行為），并傳達（媒介）出各種感覺（用戶體驗）。

所以，在交互設計里的設計層，本質是找到解決問題的手段，包括媒介和行為，主角是設計媒介和行為的設計師。

我們繼續用前面的兩個案例，理解交互設計的設計層。

案例1：為了完成「餐廳點餐」的交互設計，我們依據交互層這個前提，開始找到解決問題的手段，并為之設計媒介和行為。

在一些餐廳，用戶還是通過紙質菜單，用口述的方式完成點餐。這里的媒介是紙質菜單和服務員，行為是口述。

在另外一些餐廳，用戶用手機掃碼點餐、下單、結賬、評價等。這里的媒介是餐廳點餐的二維碼和用戶的手機，行為是用手機掃碼、點餐、結賬等一系列動作。

案例2：為了完成「地鐵上聽音樂」的交互設計，在非智能手機的時代，我們基本上是通過一個可存儲的音樂播放設備和耳機完成這個目標的，那時候的媒介是播放器和耳機，行為是打開播放器播放音樂、在播放器調整音樂。

隨著互聯網和智能手機的普及，藍牙傳輸技術的升級（aptX/LDAC等），以及用戶訴求的升級和多樣化，我們可以設計出更多貼近交互層（用戶、目標、場景）的媒介和行為。比如音樂APP、藍牙播放器、藍牙耳機、線控耳機等。

此外，筆者認為：媒介和行為是相輔相成的關系，二者在交互設計的過程中會互相促進和限制。舉個例子，一些帶線控的藍牙耳機自動連上手機后，按一下耳機上的播放鍵，就能直接啟動音樂APP 開始播放了。這個「開始播放」的行為就可以設計在耳機上，而不僅僅是音樂APP里。

小結

用第一性原理，我將交互設計拆解成交互層和設計層，并結合辛向陽教授定義的交互設計5要素，得出結論：交互的本質是信息的交流與互動，由用戶、目標、場景構成；設計的本質是找到解決問題的手段，由媒介、行為構成。

交互設計的本質：設計師為用戶設計出在某個場景下信息交流與互動的媒介和行為，從而達成目標。

如何做好交互設計

1. 把握交互設計的行業差異化

本文從我個人的角度和經驗，給大家分享了我對交互設計這個底層概念的理解，在我研究的過程中，最大的體會是，交互設計不僅僅表現在屏幕上，其實在線下場景下，同樣有很多體現，比如現在熱門的服務設計，我覺得它是對交互設計的場景化應用和延伸。

由此看來，交互設計會因行業和產品形態的不同，而存在差異化。拿B端產品來說，用戶行為是完成某一項規范化的工作，而這項工作，往往具備行業和崗位專業性，設計師需要更好地理解行業和專業，才能貼近交互層（用戶、目標、場景），設計出好的媒介和行為。

2. 具備相關思維

項目思維。交互設計師的工作往往貫穿調研、需求、設計、研發、測試等環節，我們需要把每一個設計Case 當成自己的項目一樣去對待，而項目經理就是自己，充分發揮主動解決問題的意識和能力。

用戶思維、產品思維、邏輯思維等。這3個思維網絡上有很多解釋，在這里就不贅述了。

3. 充實知識儲備

點擊下方標題，查看已更新的知識篇文章：

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

4. 提升專業技能和底層能力

《從今天起培養這5個好習慣，讓你在 2019 年快速成長！》

寫在最后

本文從構思到寫完，斷斷續續有1個多月了，總希望找到一個合適的方式去解讀交互設計，把這個概念說明白，但事實是越研究越覺得復雜，我需要了解的還有很多。

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

交互設計這個概念或領域，遠比我寫的要復雜和深入，我在研究「交互設計」路上才剛起步，希望能與讀者朋友一起交流這個話題。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

商業化思維的本質就是：創造價值，通過為客戶創造價值和交換價值來驅動產品以及業務的運轉。那么，如何為用戶創造價值和交換價值呢？價值屬性會跟著用戶屬性的不同而產生變化，所以，在探究這個問題之前，要根據將用戶劃分為不同的群體，再從不同的方面著手。

商業化思維這個字眼乍看上去很高大上，確實往大了說，商業化思維可以套用到各種宏觀微觀的商業模式當中。但我們的目的是讓商業化思維能夠成為一個活動運營真正日?？捎玫哪芰棧晕覀儗@個部分要解讀的商業化思維的定義稍微做一些邊界設定。

——基于商業化思維的本質：創造價值。

我們將探討：如何通過創造價值去驅動一個產品/業務？

通過創造價值驅動產品/業務運轉是一種完全不同于體驗驅動（也就是產品思維）的模式，也是絕大部分互聯網從業者少有接觸的（電商&廣告類的業務接觸可能較多一些），能夠綜合使用價值驅動和體驗驅動來幫助你策劃一個業務形態，就會極大拓展你的思路（比如：你能夠策劃出趣頭條類似的廣告費轉移為用戶成本的模式）。

同時，也能夠朝著我們的核心目的：讓一個業務叫座又叫好去演進。

再次回顧一下產品思維和商業化思維模式的概念：

• 體驗驅動（產品思維）：如何讓用戶使用便捷、有趣、解決用戶的某種問題和需求？
• 價值驅動（商業化思維）：如何為用戶/客戶創造價值和交換價值？

用戶/客戶分類

那么如何為用戶創造和交換價值？

價值屬性是跟著用戶屬性在變化的，要探討如何創造和交換價值，我們需要先對用戶/客戶做一個分類：

C用戶：個人用戶。

• 素人用戶：就是最普通的個體用戶，看新聞的、買東西的、薅羊毛的、刷視頻的普通大眾們。
• 達人用戶：依賴一些內容平臺生存的，往往以創造內容換取價值的內容生產者角色。

B用戶：機構/商家/團體等任何非個人用戶。

• 職業經理人B用戶：一般是大企業/機構里的業務負責人/對接人，他們并不在意公司的業績，主要在意的是領導的認可。
• 生意人B用戶：一般是小企業/個人店鋪的直接負責人或者就是老板本人，整虛的對他們從來沒有用，他們只想要賺錢。

一般互聯網的各種業務形態，會面對的用戶種類基本上就是以上四種，代表著完全不同的四種價值訴求。

我們對這四種角色分別進行價值創造以及交換的理解和研究，就能夠幫助你在業務規劃當中，真正有效的運用到商業化思維。

當然這只是商業化思維最基礎的入門，感興趣的可以基于這個原理再深入研究。

C用戶——素人用戶的價值

在面對素人用戶的時候，商業化思維主導的用戶價值和產品化思維主導的用戶價值有一些交叉和模糊的地帶，為了便于理解和明確另外一種思維模式，我們相對粗暴的定義商業化思維的價值更多在于“創造”，區別于產品化思維的“滿足”。

怎么理解呢？

用戶有購物的需求，打造一個電商購物產品屬于“滿足”需求。而在購物需求滿足之后，我們讓用戶去進行商品分享，通過用戶分享進來的訂單我們給予一定的分擁，這就“創造”了額外的賺錢的價值，可以交換用戶社交關系鏈曝光的價值。

當然，實際并沒有這么明確的區分，用戶購物本身也是一種商業行為，商品的品牌溢價、促銷手段（買三減一）等也都可以歸類為價值創造的范疇。不過，這個不重要，我們關鍵要理解的是創造價值的思維模式。

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

而常見的你可以置換的用戶價值：額外的成本付出、用戶的個人關系鏈（自主推廣）、用戶的時間、用戶的內容創造等。

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

在這個思維模式下，我們并不以體驗和操作為優先去考慮業務形態，用戶付諸成本是核心考慮因素，成本小于價值這個業務模式就有效，反之則無效。

這個思維模式也解釋了：為什么很多體驗優秀的產品就是沒有用戶愿意去使用？

目前業內新興的一些社交產品擁有比微信更優秀的體驗，但是產品在社交上創造的額外價值并沒有大過用戶的關系鏈遷移成本（想要去交換的價值）。而一些價值巨大但體驗糟糕的產品用戶還是愿意一遍又一遍的嘗試想要成功走通——一個分傭50%的商品，再復雜的操作用戶也愿意去鉆研和使用。

當然，通過成本-價值的模式去思考和規劃業務模型，并不妨礙我們同步去進行產品體驗的完善，以幫助進一步減少用戶在操作上付諸的成本。

商業化思維在業務中的一種典型運用場景，基于一個明確的用戶價值交換業務目的，我們進行價值交換過程的建立，以找到合適的業務模式。

例如：我們希望用戶能夠主動進行分享（而這個過程往往基于已經滿足了用戶基本需求的狀態上，比如說一個電商網站用戶已經完成了購物，但是我們還想要額外榨干用戶的價值），貢獻他們的社交關系鏈價值。

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

——分享到朋友圈后造成的個人形象影響，思考和檢索適合的分享對象的成本，分享動作的操作成本（可以通過體驗優化極大降低）。

那么思考，基于業務特性，我們能夠提供給用戶合適的交換價值是什么？

——可以通過和商家分攤成本的額外現金激勵？基于稀缺或者高價產品的炫耀內容？或是商品本身附帶的情感屬性？明確的定義清楚這個具體的價值是什么。

然后完整的對比，你創造的額外價值是否大于綜合成本，當然這個對比不是一個絕對的數學對比過程，還摻雜了很多主觀因素。

所以，一定程度的用戶調研或者簡單一些的自我洞察能夠幫助你得出有效的結論。如果做不到價值大于成本，那么這個業務就是不成立的。其實這個思維模式的邏輯是顯而易見的，但又往往被忽略。所以，很多分享10元滿減優惠券的策劃被創造出來，而根本沒有人思考過10元滿減優惠券的價值其實遠遠低于我分享到朋友圈的成本。

琢磨一下以上的過程，是不是提供了一種全新的思路。幫助你的不僅是簡單的思考“我想讓用戶做什么，所以理所當然的策劃一個產品去引導用戶”，而是真正的考慮清楚業務是否成立的根基，然后再從容不迫的去優化體驗。

時刻保持“成本-價值交換”的思維模式，不僅能夠幫助你打造有效的價值交換業務形態，還有一個非常有用的場景。

基于一個明確的用戶訴求，我們進行價值交換過程的分析，以找到業務的關鍵點。

我們還是用電商業務場景來舉例：在電商場景中，用戶付諸的最大成本是金錢，而購物操作的成本實際上優先級并不靠前。用戶在價值交換過程中最優先的價值是：“買到想要的東西”和“足夠的劃算”。

所以，在電商業務的重點一定是：提供更豐富的商品庫和更優惠的價格，能夠極大提升價值的含金量。

而優化購物操作體驗，頁面動線邏輯等是其次的，可以一定程度減少用戶成本但解決不了價值不足的問題。

這也解釋了：為什么一個創造了諸多優秀產品（常規產品主要面對的用戶成本確實是操作成本，而價值是比較單一明確的，例如郵箱）的大廠投入了諸多心血打磨產品體驗但最終還是在電商戰場戰敗了？

一個擅長做價值交換的電商大廠在一個社交產品（用戶的主要價值是社交，成本是難以獨立完成的關系鏈遷移）上投入了大量的推廣資源和利益誘導確留不下用戶。

你看，大家都在說的基因的本質問題，其實本質并不復雜。當然大廠的成敗并不只取決于思路的差異，還有歷史以來積累的資源類型和用戶心智，這些也都是基因的構成部分。

我們也不需要操心這么多，學會運用這個新的思路足以在業務策劃中幫助自己抓住真正的重點。

C用戶——達人用戶的價值

首先明確我們這里所討論的達人用戶，并不是普通用戶當中樂于分享和創造低質量內容的那群人（當然也有高質量的但并不普遍），而是以內容生產為職業，創造真正專業有價值內容，能夠構成你的平臺核心競爭力的那群人。

區別于普通用戶，我們希望置換的達人用戶價值是比較高的，平臺依賴這些達人用戶去不斷供給符合平臺導向的優質內容，而內容生產的成本極大，也就需要更大的價值來進行置換。
達人用戶常見價值訴求：變現、曝光、獨特的內容生產能力、有效的粉絲互動和管理能力。

達人用戶需要付諸的成本：內容生產成本。

基于創造價值大于成本的邏輯，要打造優秀的面相達人用戶的業務，就可以從幾個方面著手（增加提供的價值）：

提供足夠價值的變現能力：

專業的達人往往以此生存，和普通用戶一樣的分傭價值只能作為額外的補充價值，并不能達到達人的標準。

所以，如果你的業務希望依靠變現價值來讓達人自發留下，那么你需要考慮的核心問題和需要尋找打造的案例就是：有沒有達人可以在你的平臺賺錢養活自己。

當然如果沒有內容獨家協議的限制，達人可以依靠多平臺存活，對你的要求就不會那么高，但變現的價值也一定是生存級別的（幾千元）而不是福利級別的（幾百元甚至以下）。達不到這個標準，你的業務邏輯確實就不成立。

提供足夠多的曝光量級：

當然這個和你的用戶規模以及流量分配機制有關，需要考慮的問題是：你給的曝光是不是有效的曝光？你的達人用戶能否有效的把曝光轉化為強關系的粉絲，或者是個人品牌認知用戶？

這個目的達不到只是粗暴的給曝光并沒有用（例如：很多內容平臺會找我要稿子，一些平臺只會放作者名字而不愿意曝光作者個人公眾號，我就非?？咕転樗麄兲峁└寮?。

很多冷啟動的業務面對的是達人內容量級和用戶量級循環驅動增長的問題，在這個邏輯下一定程度的達人內容補貼是常用的手段。但不能偏離的是，你的激勵要做用戶這個循環，要求仍然是激活的內容一定要對用戶有價值而不只是湊數，達人的補貼規模也要達到生存級別。

提供獨有的內容生產能力（生產素材）：

或者說獨特的有效的粉絲互動管理能力等產品層面的價值也是一種辦法。但說實話國內互聯網KOL行業發展多年已成定局，大的MCN機構已經壟斷了大的流量和真正專業的內容生產者，平臺遷移成本極低；大流量主產品能力的抄襲門檻又不算高。

所以，除非你能純粹的全面培養素人成為達人，否則這類型的手段可能只作為補充，要真的撬動達人價值還是要回歸到以上兩個點。

降低創作的成本：

當你的產品不足以讓一個達人在這里養活自己，那么你可能就很難得到獨家的內容。

要讓達人愿意在你這里搬遷內容或者一定程度的定制創作，可走的路就只有盡量減少內容生產的成本——快速搬遷，極低門檻的排版能力，和行業通用規則一致的產品形態等等。

接下來，我們看一下另外一個截然不同的面對B客戶的領域。

B客戶相比于C客戶，目的更加明確，愿意投入更大的成本交換更大的價值。在B的領域，商業化思維的主導就更加明確，價值的創造和交換成為了唯一的話題，產品體驗起到的作用微乎其微，除非你提供的價值本身就是產品的體驗（比如說：一些企業服務工具）。

B客戶——生意人價值

要理解生意人B的價值訴求，先從一個個人經歷的故事開始：

曾經牽頭過一個面向B商家服務的工具平臺，商家支付費用使用工具和流量等整合的服務。

在工具平臺搭建的早起，我們以非常產品導向的思維進行了規劃，重點考慮的是工具的各種功能、平臺使用體驗、對平臺的流量等價值貢獻等問題，設定了工具平臺的點擊率、跳轉率、轉化率等關鍵考核指標，在這些導向下不斷的去優化工具平臺。

然后，我們召開了第一次的商家推廣大會，準備了精美的PPT，詳盡的介紹了工具平臺各種先進的能力，復雜的邏輯和優秀的體驗，其華麗程度首先把我們自己都感動了。

但是，現場反應平平，幾乎所有商家全程都在玩手機，似乎對我們精彩的演講絲毫不感興趣。

會后我們找到幾個資深的商家咨詢了原因，其中一句關鍵的點播對我們產生了至關重要的影響：

“我們只想知道在你這里能不能賺錢，投入多少回報多少，流量成本吧如何，比其他平臺有沒有優勢。其他的真的不太在意?！?

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

面對著實打實要和你做生意的商家，一切形式化的虛無的東西都沒有任何意義，只有唯一關鍵的話題：賺錢（當然不同的業務模式又有其他的一些核心價值例如獲客等但邏輯都是可以套用的）。

回去以后我們快速調整了整個業務的導向，弱化了所有關于體驗的考核指標——點擊率，轉化率（還要保留的原因是：這個產品還涉及到C端的用戶體驗），而把一切涉及到投入產出，能不能掙錢的指標——流量成本，拉新成本，費用的投入產出比，作為主要的考核導向來指導所有的工作方向。

至此為起點，這個產品開始真正的在市場上迎來了爆發，每一次宣講會后（新的宣講會我們只強調投入產出效果）開放的名額都被一搶而空。

以上的故事即是我對與生意人B合作的商業化思維理解：剝離掉生意場各種復雜的規則和概念，要撬動生意人B的投入，實際上也是在和他們做生意。能不能幫他們賺錢是唯一應該考慮的問題。任何經過包裝的，浮夸的，虛無的內容在真實的投入產出效果下都沒有任何意義。

B客戶——職業經理人價值

當你合作的對象從一個想要賺錢的生意人變成了一個大公司內部的職業經理人，你將面對的價值又從單純的賺錢變成了更復雜的職業經理人價值。

一個職業經理人心里在意的價值第一優先級，并不是幫助公司更多的盈利和獲取價值（雖然這個理念并不道德但這是現狀你不得不面對），而是他在和領導匯報這次合作價值的時候是否能得到認可。

所以，面對職業經理人這樣的B端客戶，并不能僅僅考慮實現業務目標，你還需要從他的角度考慮：能否過讓這次的合作有更多的標桿價值、項目意義能夠挖掘和包裝出來，以幫助他形成一個漂亮的匯報文件。

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

以此去考慮：你在一開始要銷售方案應該如何設計？業務應該增加哪些模塊？合作應該提供哪些支持？就能夠更好的幫助你搞定一個職業經理人的客戶。

以上便是基于活動運營應該掌握的最基本的一些商業化思維業務運用介紹，除了常規的運用外，更重要的還是要強調互聯網非技術工種人員應該都要具備“創造體驗”和“創造價值”兩種思維模式，能夠真的幫助你創造出叫好又叫座的策劃。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

二 發表能力建構

————————

同質化競爭突圍

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

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

三 設計切入角度

————————

建立情感連接，是視頻設計“雙面性”的一面

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

用戶與產品接觸的過程按時間展開分為初次接觸、逐漸了解、熟悉依賴三個階段，若在每個階段都能與用戶保持情感連接，必能逐步加深用戶印象，達到競爭差異化的目的。下文兩個案例演示我們如何在引入期和成長期選擇合適觸點，制定相應設計策略和方案，從而達到此目的。

四 設計亮點引入

————————

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

為了讓用戶更主動的發表相冊視頻，QQ團隊在影集發表模塊上規劃了智能相冊的能力，借助用戶回憶塑造超級符號，把用戶的親身經歷與產品功能建立聯系，提高使用意愿。在影集的引導步驟中，尋找合宜的契機，把零散的照片按特定線索重新組織，經過精心包裝以回憶墻的方式重新呈現給用戶。

影集功能的重新包裝：

4.1 場景搭建

QQ經授權后訪問用戶相冊，沿時間和位置線索用聚類算法對照片歸類，產生與特定場景關聯的照片組，再用圖像識別技術從照片組中精選特定n張合成視頻，為后續情緒升級埋下基礎。

4.2 意境傳達

為視頻搭配轉場音樂是主要增色手段。

轉場效果設計要以情緒傳達為目的，過渡動畫和快慢節奏的靈活搭配打造大片質感，疊加細節讓畫面生動不僵硬。

在配樂標準上，我們基于用戶習慣推導，明晰場景+節奏的音樂選擇維度。

轉場和音樂的挑選需貼合場景特征。在“聚會”場景中，設計師選用翻轉重組的效果傳遞歡快愉悅氛圍，曝光和光暈細節可以模擬真實光影效果。“往年今日”則表現出安靜氛圍，沉浸的復古濾鏡和低調的疊黑效果讓情緒表達含蓄收斂，漣漪波動仿若時光倒流。

4.3 捕捉時機，宣傳專屬回憶

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

4.4 案例回顧

我們采用情感符號引導發表的策略，得到數據的支撐，影集發表總量和發表轉化率均有明顯提升。經過市場橫向對比，QQ團隊在對影集的功能規劃和整體設計理念上占據了優勢位置。

五 設計亮點深挖

————————

打造情感體驗峰值，強化用戶印象

在任何體驗中，都應該重視體驗過程中的情感峰值，如同丹尼爾卡曼說，體驗產品時能夠被記住的只有峰值與終值的體驗，我們在智能相冊的環節之中建立起與用戶情感上的鏈結，而鏈結后的情感峰值，則選擇在發表成本最高發表頻率的文字視頻中深挖，讓體驗情感的峰值在高頻率的場景中發生獲取最高的投入回饋。

5.1 過程頗折

文字視頻上線后發現用戶發表意愿未達預期，癥結在于其過程缺少能激發用戶主觀意愿表達的情緒觸發點。我們提出兩個優化思路，

1 降低理解成本，體驗對齊于常見動態發表界面。

2 支持自定義背景，用帶場景暗示的背景烘托情緒氛圍。對比實驗后發現2既可增加文字視頻的意境表達又不干擾基礎操作，是為更佳方案。

文字視頻的初期方案和優化方向：

5.2 策略制定

QQ團隊基于對用戶發表場景統計，確定以傳達心情和高頻發表時間點為線索，策略制定是考慮到既要與用戶表達有耦合但不能具體有所指。

5.3 意境傳達

背景模版設計有以下原則：

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

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

3 表義避免太具象。抽象表達騰出更大想象空間，讓用戶創意不受縛于環境。

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

5.4 案例回顧

經優化后文字視頻的背景從純視覺角度轉變成帶動用戶情緒刺激發表的觸發點，后續團隊結合運營策略，在特殊節日或特殊事件前更新模版可以持續刺激拉升文字視頻發表量，該策略的運用屢建奇效。

六 總結心得

————————

設計經驗

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

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

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

目錄

一、為什么要建立規范

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

二、規范的適用范圍

• 適用于處于成長期和成熟期的產品。
• 規范不是越全越好。適合就是最好。

三、如何建立規范 

• 整理產品的組件和復用的內容
• 基礎規范（柵格 間距 基礎網格  顏色 字體 ）
• 組件規范（按鈕、導航、彈框、缺省圖、標簽、列表、卡片等等）

一、為什么要建立設計規范？

1 利于多人協作，提率

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

制作和遵循設計規范，能夠保證整個產品的交互效果和視覺風格、乃至文案的統一性，提升用戶的體驗。

3 減少冗余內容，方便維護和更新

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

4 利于工作交接 

方便設計團隊和其他團隊交接，如果團隊有人員變動，也方便后續入職的同事能夠通過規范迅速熟悉產品，快速上手。

二、規范的適用范圍

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

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

三、如何建立設計規范

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

做規范時通常會有這兩種情況：

1、不打算進行大版本更新的產品

對于小版本迭代的產品來說，建立規范只需要在sketch里把所有設計稿進行歸攏和分類。直接根據現有的稿子梳理出規范，再對不符合規范的文件進行調整即可。

2、新版本 新規范

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

四、基礎規范

1 制定統一的柵格系統

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

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

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

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

2 色彩規范

色彩規范主要表明色彩的色值和使用范圍，一般會從品牌色、輔助色、基礎色、狀態用色等等。如下圖所示。

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

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

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

3 字體

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

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

4 圖標

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

功能性圖標是為了引導用戶理解和操作，需要表現和簡介，方便用戶識別其含義。功能性圖標常規狀態下為無彩色。

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

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

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

5 默認圖

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

五、頁面組件

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

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

因為組件部分是一個比較龐大的內容，需要根據具體產品

1按鈕

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

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

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

2 導航

對現有頁面的導航進行收攏和分類，比如我這里分類為常規標題樣式、標簽樣式、搜索框樣式、無標題樣式、字母導航……

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

3 標簽

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

然后對每類的標簽統一樣式、文字內邊距以及說明適用場景。

4 彈窗

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

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

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

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

5 列表

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

六、結語

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

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

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1. 系統全面地了解文字的基礎知識、顯示方式、影響因素及當前網頁設計中適合的文字系統；
2. 梳理出自己團隊所有產品文字使用情況；
3. 綜合第1步、第2步總結出適合團隊業務的文字系統。

字符屏幕顯示原理

1. 字符

字符是指計算機中使用的字母、數字、標點符號等等。

計算機最初發明出來是用來解決數字計算問題的。

后來發現，計算機還可以做更多的事，例如文本處理。其實計算機挺笨的，它讀到的所有字符都是由1和0組成的字符串，因為計算機電路只有兩種狀態，「開」和「閉」，對應「1」和「0」。計算機也只可以直接存儲和處理二進制數字。

2. 二進制

「二進制」是數字世界里的基本規則。

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

△ MP4

△ MP3

△ JPG

△ TXT

△ AVI

以圖像為例，我們用電腦或手機看到的圖像都是在某個角落里存儲著下面這樣的一串數據。開頭的16位翻譯過來就是 BMP文件開始的標識。

BMP文件標識后面的數字就是圖像的各項基本信息。

△ 圖像的各項基本信息

△ 顏色深度

最開始的24位，都是1，像素顯示為紅、綠、藍三種顏色，相加后顯示為白色。

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

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

根據這樣的規則整個55×55的格子鋪滿顏色就得到一張完整的圖片。所以一個 BMP圖像文件中的1和0就在逐個記錄圖像中每一個像素點的顏色。

△ 二進制圖片生成方式

△ 色光三原色和顏料三原色區別

下面所有文件的顯示都和圖像顯示例子一樣，文件中的1和0按照人們事先設計好的規則排列好，只需要找到正確的打開方式按照特定的規則來解讀這些數據，我們就可以獲得其中的信息。我們怎么才能知道某一個文件的1和0究竟是按什么規則排列的？我們又要用怎樣的方式來解讀？這就用到了擴展名，在文件的名字后面加幾個特定的字符，就可以幫助系統辨別出文件的類型，從而提示電腦去按照某種特定的規則來正確解讀其中的信息。

△ MP4格式擴展名

△ MP3格式擴展名

△ JPG格式擴展名

△ TXT格式擴展名

△ AVI格式擴展名

更多其他文件拓展名：

3. 字符編碼

為了在計算機上顯示字符，必須將字符轉換成二進制數字。所以就有了統一、標準字符轉換規則，即字符編碼。字符編碼是給所有的漢字定一個的數字編號，并用1和0來表示這個數字編號。

文字的一個字符對應一個編碼（碼點），而編碼對應字符集里的一個「字」，字符通過字符集與「字」相連。像圖中所示Unicode、GB 2312、Shift_JIS 都是字符集，其主要作用是為每一個「字」分配一個編碼。

△ 文本編碼流程

字符集里的每一個編碼對應的是一個「字」而不是「字形」，也就是一個「字」在不同的地區或標準中可能有不同的「字形」，但字符集中只能對其分配一個編碼（除非相差過大，比如簡化字），要顯示其不同的「字形」要通過使用為不同地區或標準設計的字體來實現。

△ 字異形（左簡體中文，右日文）

4. 編碼發展史

ASCII

ASCII（American Standard Code for Information Interchange，美國信息交換標準代碼）出現在上個世紀60年代的美國，ASCII 一共定義了128個字符，包括英文字母 A-Z，a-z，0-9，一些標點符號和控制符號。ASCII 采用的編碼模型是簡單字符集，在英語系國家里 ASCII 標準很完美。但是世界上有好幾千種語言，其他語言系的國家想使用計算機，ASCII 就遠遠不夠了。所以編碼進入了混亂的時代。

△ ASCII編碼

混亂時代

計算機的一個字節是8位，可以表示256個字符。ASCII 使用了7位，所以人們決定把剩余的1位也利用起來。人們對于 ASCII 已規定好的128個字符沒有異議，但是不同語系的人對于其他字符的需求不一樣，所以對于剩下的128個字符的擴展千奇百怪。而且在亞洲語言系統中有更多的字符。于是就又產生了各種多字節表示一個字符的方法，每個語系都有自己特定的編碼頁（code pages），這就使整個局面更加混亂不堪。這時 Unicode 出現了。

Unicode

Unicode 就是給計算機中所有的字符各自分配一個代號。Unicode 可以認為是字符的編號，它為每種語言中的每個字符設定了統一并且唯一的二進制編碼，Unicode 字符集和編碼方式解決了跨語言、跨平臺的交流問題。但在 Unicode 里每一個字符都是用4個字節來編碼，原本英文字母僅需1個字節編碼，中文需2~3個字節編碼即可，這對于存儲或傳輸資源而言是很不劃算的。

UTF-8

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

UTF：Unicode Transformation Format

5. 中文編碼類型

△ 中文編碼類型

文字基礎知識

1. 文字

「文字」是信息交流的工具，可讀性、易讀性至關重要。在網頁設計中文字使用需要考慮幾個要素：首先考慮字體，其次是字重、字號、行高、字間距、行間距、段間距等。

△ 字體、字重

△ 字間距、字號、行高

△ 行間距、段間距

2. 字體

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

字體種類

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

襯線、無襯線

△ 襯線和無襯線差異1

△ 襯線和無襯線差異2

字體 – 中文

字體構成：

△ 筆畫

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

△ 中宮

△ 中宮和字體關系

△ 中宮緊湊、中宮松散

間架結構，漢字種類眾多，筆劃不等，空間排布極為重要。字體的間架結構可分為兩類：單體字、合體字。

△ 單體字 間架結構

△ 合體字 間架結構

漢字字形眾多，有些字形會產生視覺大小變化，頂格、縮格、出格就是針對不同結構的字體筆畫特征進行微調，讓他們看起來更加均衡、等大、視覺更完整。

△ 調整前

△ 調整后

字形調整實例：

襯線、無襯線字形演變：

△ 襯線 字形演變

△ 無襯線 字形演變

字體對比：

微軟雅黑、方正蘭亭黑簡體、思源黑體、蘋方-簡，筆畫寬度均勻，橫平豎直。同一字號，微軟雅黑最粗，小字號時閱讀會較為吃力。方正蘭亭黑從微軟雅黑派衍生出來，可以更好地適應其他應用場合。

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

字體 – 英文

「字谷」概念來自西文字母設計，字谷指字母中部分或完全封閉的空間，即字母當中留白部分。

英文的字體結構是由4條平行線組成，有時候是5條，但是一般大寫線會忽略?！富€」在西文中是標準，單個字母的所有立腳點都是在這條線上（除了 g、j、p、y）。英文文字結構多種多樣，4條平行線的位置也會發生改變。

升部：上緣線和主線之間的內容。

降部：下緣線和基線之間的內容。

字體對比：Helvetica Neue、Arial、DIN

Helvetica Neue：中性，無襯線，現代主義風格字體。字體末端嚴格保持橫平豎直，性格嚴謹、保守，沒有任何的修飾，適合不同分辨率的顯示器。該字體是 Helvetica 字體的升級版本，擁有更多的字重，更易于不同場合的應用。字形則相對偏胖，筆畫更清晰，而且小字號的情況下可讀性也很高。

Arial：Arial 是一套隨同多套微軟應用軟件所分發，無襯線。該字體比例及字重和 Helvetica 極相似，其實是 Monotype Grotesque 系列的衍變。在字體及字距上都做了一些細微的調整和變動，以增加它在電腦屏幕的不同分辨率的可讀性。

DIN：字形瘦長，無襯線，適合顯示比較長的數字，但是小字號的情況下識別度較低。DIN 字體在德國有著悠久歷史，是交通標志、路牌、門牌和車牌的標準字體。雖然曾經是德國納粹使用的字體，但是經過設計和重新升級。DIN 在雜志、海報以及其他各種設計領域都被廣泛地使用。

Helvetica Neue、Arial、DIN 數字對比：

3. 字重

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

在排版中，一種字體會在標題、正文、說明注釋等不同內容下使用，單一的字重不能很好適應排版需求，于是衍生出了同一個字體的不同字重。

4. 字號

「字號」是字體的高度，不同平臺字號規范不同。

在界面設計中，文字字號決定了信息層次和權重。首先要設定基準字號（最小字號），然后可依據一定規律設定導航、標題等稍大字號。一般網頁基準字號有12px、14px、16px等。

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

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

5. 行高

「行高」可以理解為一個包裹在字體外面的無形的盒子。字號和行高決定著一套字體系統的動態與秩序之美。

西文：西文基本行高是字號的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來創造行間空隙。

中文：中文因為字符密實且高度一致，所以一般行高需要更大，根據不同人群的特點（兒童、年輕人、老年人）以及使用環境，可達到1.5~2倍甚至更大。

Ant Design 受到5音階以及自然律的啟發定義了10個不同字號以及與之相對應的行高。

6. 字間距

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

字偶距：是指兩個字母（或其他字符，比如數字，標點符號等）之間的空白。不同的字母有不同的外形，所以字體使用相等的字間距是不協調的。所以需要調整字偶距來提升可讀性。

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

比例字體：根據字符外形特點設置不同字距的字體，這種字體外形協調，可讀性好。

等寬字體：每個字符設置相同字距的字體，其優點是可以很好的控制排版對齊。

7. 行間距

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

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

如何設定行間距，如何規范行間距

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

注：至于為什么是20，因為最初一個字節用8個二進制位來表示，所以現在的很多網頁設計中常用到8。12+8=20，參考 Ant Design，網上有很多設計師總結的行間距計算方法，對于一個數學不好的我來說，參考已有總結和經驗得出的數值，固定這個數值重復使用，這樣最簡單。

8. 段間距

段間距（paragraphs spacing）：段落與段落之間的距離，可保持頁面節奏，與字體、行高相互關聯。為保證文章易讀性，正文段間距，可以簡單地取一個空行（也就是一個行高），這是比較常規也比較合適的做法。舉個例子：字號12，行高設定20，段間距 = 行高 + 行間距。

小結

要設置「有節奏感的文本內容」就要遵循這些規則：段間距大于行高，行高大于行間距，行間距大于字間距。

字體選用基礎原則

1. 網頁文字顯示方式

網頁設計內容一般都是通過電腦各種瀏覽器來承載顯示的，瀏覽器顯示字體是直接讀取用戶操作系統里的字體。

2. 字體選用原則

字體是界面設計中最基本的構成之一，科學的字體系統：始終保證信息具有優秀的易讀可讀性，提升用戶的閱讀體驗及工作效率。

• 原則一：字體優先使用各操作系統默認的字體。
• 原則二：有版權、筆畫嚴謹、清晰可讀、經典。

3. 操作系統

下圖數據來源：世界互聯網市場份額統計網站 Net MarketShare。

△ 操作系統市場占有率 TOP10

各操作系統默認字體：

4. 瀏覽器

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

下圖數據來源：世界互聯網市場份額統計網站 Net MarketShare

5. 字體版權

除了操作系統默認字體，其次需要優先選擇使用的就是已購版權字體，如果沒有已購買的字體，可考慮一些免費字體，非免費字體使用時需謹慎。

△ 公司常購版權字體

文字規范

1. 字體規范

字體使用三原則

體系化：在同一個系統UI設計中先建立體系化的設計思路，對主、次、輔助、標題、展示等類別的字體做統一的規劃，再落地到具體場景中進行微調。建立體系化的設計思路有助于強化橫向字體落地的一致性，提高字體應用的性價比，減少不必要的樣式浪費。

重復：重復設計中出現的一個或多個內容。任何事情都可以重復。字體、字重字號、顏色、一條線、各種形狀（如圓形、正方形或三角形）等。字體使用最好不要超過3種，一般同一個系統UI設計內容的字體數量建議2種即可，中文一種、英文數字一種。且字體樣式上也遵循重復原則，避免毫無意義的使用大量字號、顏色、字重、行高等。

韻律：在需要拉開差距的時候可以嘗試選擇對比大的字體字號，令字號之間產生一種微妙的韻律感。為保證良好的閱讀體驗，每行保持適當的字符數量。每行上擁有適當的字符數量是文本可讀性的關鍵。如果每行文字太短，視線必須反復折回來，打破讀者的節奏。如果一行文字太長，用戶的眼睛將很難專注于文本。英文無特殊要求避免使用全大寫字符，因為會大大延緩用戶掃描和閱讀的速度。

現有產品字體統計

字體規范

綜合考慮不同操作系統選用最佳字體體驗。

代碼聲明：

• Font-family：Helvetica Neue, Helvetica, Arial, 「蘋方-簡」, 「Microsoft YaHei」, 「微軟雅黑」, sans-serif。
• 英文字體：首先查找Helvetica Neue（Mac），然后查找Helvetica（Win），都找不到就用Arial（Mac&Win）；若是以上三者都缺失，則使用當前默認的sans-serif字體（操作系統或瀏覽器指定）；
• 中文字體：選用平臺默認中文字體 蘋方-簡（Mac），微軟雅黑（Win）。

2. 字重規范

一般情況下會選用「一粗一細」兩種字重。

粗體：在視覺面積上較重，筆畫加粗，字腔（筆畫間空間）小，突出顯示，產生強調作用。常用于標題和標語。

細體：在視覺面積上較輕，筆畫輕細，字腔（筆畫間空間）大，結構疏朗清透，閱讀時不會讓讀者產生壓迫感。常用于正文和說明。

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

3. 字號規范

現有產品字號統計

字號規范

4. 行高規范

參考：Ant Design 受到5音階以及自然規律啟發定義了10個不同字號以及與之相對應的行高。

5. 字間距規范

使用比例字體，根據字符外形特點設置不同字距的字體，這種字體外形協調，可讀性好。

6. 行間距規范

顏色規范

1. Ant Design 兩大色彩體系

Ant Design 兩大色彩體系：系統級、產品級。

系統級色彩體系

系統級色彩體系主要定義了螞蟻中臺設計中的基礎色板、中性色板和數據可視化色板。

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

產品級色彩體系

產品級色彩體系則是在具體設計過程中，基于系統色彩進一步定義符合產品調性以及功能訴求的顏色。

• 品牌色應用：品牌色取自基礎色板的藍色#1890FF，應用場景包括：關鍵行動點，操作狀態、重要信息高亮，圖形化等場景。
• 中性色：中性色主要應用在文字部分，此外背景、邊框、分割線等場景中也非常常見。
• 功能色：功能色代表著明確的信息及狀態，如成功、出錯、失敗、提醒、鏈接等。

2. 系統級 中性色

中性色包含了黑、白、灰。在網頁設計中被大量使用，合理的選擇中性色能夠令頁面信息具備良好的主次關系，助力閱讀體驗。中性色板一共包含了從白到黑的10個顏色。

3. 產品級 中性色

Ant Design 的中性色主要應用在文字、背景、邊框、分割線等場景中。產品中性色的定義需要考慮深色淺色背景的差異，同時結合 WCAG 2.0標準。中性色在落地的時候是按照「透明度」的方式實現。

VIP大數據用戶體驗部 的中性色也是主要應用在界面的文字、背景、邊框、分割線等場景中。考慮到深淺色背景的差異，中性色根據設計需求在落地的時候可按照色值和透明度兩種方式實現，兩種方式優先使用色值方式，盡量避免兩者混搭使用。

4. 產品級 功能色

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

功能色的選取需要遵守用戶對色彩的基本認知。在一套產品體系下，功能色盡量保持一致，不要有過多的自定義干擾用戶的認知體驗。

文案

文案內容來源于 Ant Design，一文一字之間可研究琢磨的空間還很大。

分享一個感觸很深的例子，里面有一個專業用語「閾yù值」和「閥fá值」，這兩個字一開始我看了很久才看出來區別，查資料了解到，其實「閥fá值」在專業行業里是一個錯別字，是一個錯誤的用詞，其正確用法是「閾值」是所屬行業認可通用詞。「閾yù值」又叫臨界值，是指一個效應能夠產生的值或最高值。

所以精準、清晰的語言會更容易讓用戶理解，合適的語氣更容易讓用戶建立信任感。因此在界面設計時，在使用和定義文案時要注意以下幾點：

• 從用戶角度出發；
• 表述一致；
• 重要的信息放在顯著位置；
• 專業、精準、完整；
• 精簡、友好、正面。

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

結語

因為硬件軟件一直在變化，設計規范和內容也要定時更新，規范是為了在繁多復雜業務中尋求一種平衡，幫助各團隊更的完成任務，有些內容適合強制規定，有些內容適合規范一個范圍，有些內容適合制定一種規律方法……當出現特殊情況時需要重新審視和不斷完善靈活使用。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

之前聽一位同學在公司看國外作品學習的時候，公司的一個老員工發現了，就過來語重心長地和他說，你看這些東西沒用的，學不到東西，就是在浪費時間等等，類似這樣的話說了一堆。聽到這個話題的時候就特別的親切，因為在開始接觸設計的時候，和那位老員工的想法一樣。但是隨著對設計的理解越來越深，接觸的項目多了以后，這種想法慢慢就淡化了。

其實新人對研究國外作品這件事存在誤區是很正常的，畢竟應用的文字不一樣，內容多數我們也看不懂，把時間花在這上面給人的第一感覺確實有點不合適，哪有直接去看國內的作品來得過癮。我們暫時拋開作品的數量與質量不談，來聊聊這個話題。

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

純圖片形式的燈箱、畫冊、展板、品大片。

純圖形的UI圖標、布展裝飾、logo徽章。

包括純顏色的手機屏保、背景墻之類的設計，這些基本的設計元素，會在設計作品中單獨出現。

而更多的設計作品都是這幾種元素同時出現的結果，這些海報中，文字、圖片、圖形、色彩這幾種元素都占全了。注意，這些海報用的都是中文，屬于國內的海報對吧？也能夠在這上面學到一些東西，那我們換幾張國外的作品看看，有什么不一樣的地方。

日本的、歐洲的等等都是優質的設計作品，我們可以來分析一下這些作品，風格、技法、表現形式暫時可以拋開。

構成他們的元素和國產海報有什么區別？都存在文字、圖片、圖形包括色彩，唯一的區別就是上面說的，不同的國家，使用的文字會不太一樣。那么這種文字上的差異真的會影響到我們對這個作品的研究、欣賞嗎？

答案很明顯，不會的。了解一些構成知識的同學都知道，構成版面的基本元素就是點、線、面，而文字、圖片、圖形包括色彩，他們在版面中整體來看，本質上就是點線面的具象表現。那我們在欣賞這些作品的時候，完全可以把文字看成是點線面的存在，這樣的話也就沒有必要糾結他用的是哪個國家的文字了。

像這張國外的海報，我們把這里存在的視覺元素標注出來，他們本質上就是這些東西。

國內的也一樣，如果你看到的是這些東西，還需要糾結這是哪個國家的作品嗎？

版面中的所有視覺元素，都可以看成是點線面的存在。

來做一組實驗，這張英文海報，我們把這里面的英文，替換成漢字。前后對比一下，海報的整體感覺，基本沒有出現什么變化。

再換一組，感覺基本一致。

再來一組，這回我們把英文替換成日文。類似這個版面構成的形式，我們把文字替換成英文、漢字，變化也不會很多，依然很美觀。我們研究、學習、欣賞優秀作品的時候，一定不能受到類似「看國外的設計沒用」這類思維的束縛，不然的話你會錯過很多的。

不光從構成的角度看這個問題是這樣，其實從設計發展的角度來看，也能得出同樣的結論。因為現代設計教育的起源來自德國的包豪斯，后來包豪斯的理念傳到了美國，又通過美國傳遍了整個世界。包括我們現在學習的平面設計體系，都是一脈相承的。從這個起源的角度來看，也不存在國內、國外那么大的差別。都是一個門派的，只要做的好，那看誰的都一樣。說了這么多，應該能看出來，我們是鼓勵大家去多看優秀作品的。那么堅持做這件事，又能得到什么呢？下面就來說一下，為什么要養成欣賞優秀作品的習慣？

欣賞優秀作品的習慣

先來看看這個習慣能給我們帶來的好處有哪些。

1. 提升審美

長時間欣賞優秀的作品，會對我們個人的審美能力有質的提升，幫助我們開闊眼界。眼高手低雖然是個貶義詞，不過這對于正在成長的我們來說是好事，最起碼能讓自己對自己的能力有一個比較清晰的認知，知道自己做的不夠好，這樣會有動力不斷的鞭策自己學習新的東西，把專業做到更好。

2. 培養興趣

如果我們對這個行業沒興趣的話，就算你再有設計天賦，也很難做好的。堅持看優秀的作品給我們提供持續的刺激，說不定哪幅作品就非常合你的胃口，勾起你的興趣，讓你花時間去研究。

3. 利用碎片化的時間學習

平時都很忙很累，再懶一點，就沒什么完整的時間學習。這個時候如果能把碎片化的時間利用上，我們坐地鐵、坐公交、午休、睡覺前，包括上廁所的時候都是可以通過欣賞這些優秀的作品提升自己的，這也是一個提升學習效率的習慣。

4. 為設計提供靈感和參照

這也是最重要的一點，不知道你有沒有一接到項目，大腦就一片空白的感覺，是因為你干活干的太少的原因嗎？不一定，有不少人每天不停的干活還這樣。其實出現這種狀況的主要原因就是看東西看的太少。很多好的形式我們見都沒有見過，怎么可能有印象，沒印象就更不可能把他們應用到我們平時的工作中了。

所以說，我們想有好的想法、無盡的靈感，必須通過看優秀作品這個成本低、見效快的方式來提升了，并且通過我們持續不斷的積累，得到的東西會越來越多，這是一種可以不斷提升自己的方式。

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

如何欣賞作品

我們欣賞作品的場景主要有兩種，第一種是有目的、有針對性的去看；第二種是沒有針對性的看。這兩種場景要看的東西差不多，細節上會有一些差異，我們先來了解一下有針對性的。一般來說，有目的有針對性指的是我們接到了具體的項目，但是這個項目以前沒有接觸過，需要了解一下別人都是怎么做的，然后帶著問題去尋找答案。

先從項目要求入手，就是看看你做的內容是關于什么的，比如你要做日本壽司海報，就去搜集這方面的作品。有些同學在搜索的時候很實在，要做關于壽司的海報就專門去找日本壽司的作品，這種方式的缺陷特別明顯，如果你要做的這個項目品類能找到的優秀作品很多還好，不過多數情況下，優秀作品是不那么好找的。這個時候把思路打開，選擇的余地就會大很多。

比如把日本壽司海報這個關鍵詞縮減成日本料理海報，優秀作品的數量會成倍的增加。

或者你要做的是海報，那我們搜索的時候除了海報，還可以找日式的包裝、畫冊。

網站、插畫等等作品，都會給我們帶來很多的思路。

數量的問題，這也是我們推薦看國外優秀作品的一個原因，光去找中文的作品，在一個小品類里，很難找到足夠多的優秀作品，一般的東西又沒有什么學習的價值，這時候加入國外的東西會讓我們的選擇余地更大、思路更廣。我們在搜集作品的同時，連帶關于項目的一些圖片、文字材料都可以一起搜索，這樣能幫助我們更深的理解這個項目，學到更多的知識。

其實學習這個行為不是非得上學、看書才能學，我們設計師在接觸各種項目的時候，通過與客戶溝通和查閱項目相關資料的過程也是在學習，而且我覺得這種學習方式比我們單純的去上學讀書更深刻、實用。學到的東西也是在工作中甚至生活中用得上。

在找到這些優秀作品以后，就可以嘗試去尋找這些作品共同的規律。

比如文字，如果文字屬于同一種題材的設計，就算是不同國家的作品，我們也會在里面找到一些共同的特征。比如這些關于食品的字體，都會表現出屬于食物的那份圓潤的特征，這就是一種規律。這些規律性的東西總結出來，就可以嘗試應用到自己的作品中。這個是學習大的規律，在這個大規律的基礎上，再去關注這里面的一些小的細節。想做好東西，稍小的細節也很重要。

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

這里面每一個文字組合都是一個小的個體，比如很常見的日期的處理方式就有很多，像這張海報里日期文字組合的處理方式。

我們看到了覺得這個形式不錯，就可以記下來。那這些處理方式我們見過了，遇到合適的項目，換一個字體，或者調整一下數字，就能應用到自己的項目中了，這些組合形式，你沒看見、沒有印象，自己拍腦袋是很難想出來的。

包括這種產品或圖形的表現排列形式，在做畫冊、雜志、頭圖、詳情頁、海報、展板的時候經常會碰到。

自己排不好的話，就可以借鑒這些作品的形式和規律，再上手就輕松多了。如果你想做的是logo設計，也可以去觀察優秀作品的細節，比如字體與圖形的比例、文字與圖形的間距是多少、文字與文字的間距如何控制，包括別人的創意點在哪，這些東西都是可以在別人的作品中學到的。

△ 《高手的平面課堂！解鎖LOGO設計新技巧》

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

△ 《平面設計中，如何通過“抄襲”優秀的作品成為高手？》

包括你看過的作品，他們的網格是怎么劃分的。使用的是什么樣的字體、構圖如何都可以作為我們思考學習的方向，關于這幾點的詳細內容，在之前的文章里很細致的講過，沒看過的同學可以去看看。

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

案例演示

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

比如我們要用這些材料來設計一款網頁頭圖。

看到這些材料，可能會想到以前在哪見過，類似這種左右放置的圖配文形式。

產品價格的處理方式見過這樣的。

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

還見過所有的文字組，都以左對齊的形式進行排列的作品。

只要有印象，我們在設計的過程中就會下意識的往這些方向上靠，設計出的作品也會接近前面的那些規則。

在這些規則影響的基礎上，如果我們還見過襯線體搭配無襯線體的作品，圖疊字的形式，也能做出接近的風格作品。

同樣內容，不同的表現形式。你看過的優秀作品越多，選擇的空間就越大。

我們再來看這個案例，一張藝術展的海報。

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

主體文字組合的結構是因為見過類似的組合方式，在文字量近似的情況下，我們的文字組合也可以設計成類似的形式。

如果說我們設計的這個文字組合之間，距離稍遠，也有很多的作品會使用線的分割來解決這個問題。

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

將和主題相關的照片填充到劃分好的網格中，這里面使用的照片是同一張照片的不同局部，這種對照片重復的處理方式也很常見，在給版面增加變化的同時，也會制造出一定的故事性，引發受眾的聯想。

一張海報從無到有的創作過程。

想設計出不錯的作品，沒有大量的積累，對優秀的作品沒有印象是肯定行不通的。

總結

怎么樣，是不是覺得多看看優秀的作品還是有用的？不管是國外的、國內的都一樣能學到很多。類似我是做電商的，看印刷品的設計沒用；我是做包裝的，看版式的作品沒用；我專門做商業項目的，看藝術類的項目沒用；我們公司是做金融產品的，那看其他行業的東西都沒用。遇到這種言論，我們可以冷靜的思考一下，是真的沒用，還是這個人，他不會用。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

為什么你的設計看起來很亂？在此之前我們先了解一個概念，我們怎樣看這個世界？

我們通過眼睛看世界，眼（又稱眼睛，目）是一個可以感知光線的器官。那么結論來了，我們看到這個世界，其實本質就是看到了光。舉個例子，晴空萬里時我們可以看到很遠很遠的距離，反之在漆黑的屋子里，我們什么都看不見。

我們再來了解第二個問題，眼睛是怎樣成像的？眼睛通過調節晶狀體的彎曲程度（屈光）來改變晶狀體焦距獲得倒立的、縮小的實像。簡單來說，成像原理就是晶狀體來改變焦距，簡單一點解釋決定成像的重要因素是焦距。

你的設計看起來很亂，往往在這幾個方面出了問題：

• 明暗關系紊亂；
• 視覺焦點不明確，畫面沒有重點；
• 顏色雜亂，毫無章法。

明暗

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

去色檢查畫面明暗關系

從上至下三張圖依次是去色之后的黑白圖；運用色相和飽和度給畫面賦予一個顏色的單色圖；原圖。

從下圖可以粗略得出結論，明暗（光源色）+固有色=色彩。調色之前先處理明暗，畫面顏色處理起來就非常簡單了。

最近火爆的國產硬核科幻片海報，即使去掉顏色，黑白關系依舊明確清楚。好的設計即使沒有任何顏色，依舊是一副好的素描畫。我所理解的明暗關系與色彩的關系相當于人體與衣服妝容的關系，對于一個美女是否漂亮，衣服妝容的搭配是你能達到漂亮的上限，然而你的臉型，身高，氣質，皮膚才是你能達到的驚為天人的基礎。

視覺焦點

視覺焦點究其概念，是讓我們的視線多停留幾秒的視覺元素，我們在畫面中第一眼就能看到的元素，畫面中的「主角」。

對畫面的視覺漏斗進行分類：

• 視覺焦點：想看不見都很難，表現突出；
• 重要元素：不經意就能看見；
• 輔助元素：仔細看看也能看見（類似買理財產品的最右下角的小標注，「投資有風險，理財需謹慎」）

高斯模糊法看視覺焦點

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

這上面的兩個例子看出，即使畫面模糊了，還是能清晰看到畫面表達的主題。那么模糊度多少合適呢，一般調整到上面所說的視覺漏斗中重要元素看起來剛好模糊到看不清就可以了。

色彩

色彩是附著在物品上由于光的照射產品漫反射的顏色，可以粗略按色彩元素分為光源色，固有色和漫反射產生的環境色。按照長期的實踐經驗來看，通常比較和諧的配色方式是除了產品的固有色之外，盡量把光源色和環境色統一在三種顏色（黑白灰不算顏色）之內，顏色比例盡量類光源色的主色調占據畫面百分之八十的面積，其他環境色作為補充。

色彩插件檢查配色

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

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

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

今天的內容就說到這里了，我們回顧一下重點內容，解決畫面看起來很亂可以有以下方法：

• 去色檢查畫面明暗關系
• 高斯模糊法看視覺焦點
• 色彩插件檢查配色

設計雖沒有近路，但可以少走彎路。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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