乾貨 | 字體配色總結

2021-01-19 UI頭條

《懂點設計》推薦文章

導讀：

1、本文將界面中的文字分為標題、正文、提示和交互四類

2、這四類文字在配色上分別有哪些注意事項

.....




今天來給大家分享產品設計中文字配色的一些知識點。配色對於UI設計的重要性這裡我就不用再強調了，關於配色的文章我之前也寫了好幾篇。但是回頭看了一下，感覺總結的過於籠統，所以這次我把格局放小一點，專門來寫一篇關於文字配色的文章，希望大家看完能夠有所收穫。


那麼要給文字配色，首先我們要知道你的產品(界面)中有哪些文字。在這裡，我將產品中的文字主要分為以下四種：標題類、正文類、提示類和交互類。



標題類


首先來說標題類，標題，顧名思義要讓用戶在短時間內了解界面的大致內容，講究簡潔明了。在app中，標題類一般有的頂部欄標題，底部欄標題，列表標題、表單標題等。


給標題類文字配色相對來說比較簡單，選項比較少，我們一般只會使用深灰色或者企業色。因為標題雖然很重要，但是也不能過於搶眼。



而根據重要性程度我們可以把標題分為不同的等級，一般來說，層級越低的標題顏色越淺。深淺的搭配可以給你的界面帶來意想不到的效果。


例如，微信中的好友列表和聊天界面中，用戶名和聊天記錄的文字顏色深淺正好是反過來的。這個其實也很好理解，好友列表中用戶關注的是好友是誰，而到了聊天界面用戶更關注的是好友說了什麼。所以這裡用深淺不同的文字來幫助用戶加以區分。



我們可以看下使用同樣的配色的效果，感受一下不同。



ps.我不太建議給標題使用企業色，因為你要調整企業色的飽和度來區分不同的等級，個人覺得這樣不太合理。


此外如果標題體系過於繁雜，僅從顏色深淺已經無法讓用戶從視覺上進行識別。我們還可以用字號來幫助完成區分，事實上現在大多數產品都是通過字號的不同來完成等級區分的。



正文類


正文類文字是給用戶提供詳細說明和解釋的，正文類文字要比標題類要淺一些。一是因為用戶對於正文都不太感興趣，很少去讀，我們沒有必要在這裡使用配色來吸引他們的注意力。其二，因為正文字數一般比較多，過於花哨的配色會使整個界面顯得凌亂，造成主次不分。



提示類


提示類文字顧名思義就是要給用戶以引導和提示。這個就意味著提示類文字要足夠的顯眼，如果用戶都注意不到你，還怎麼提示呢？


提示類文字一個主要用途就是給用戶展示當前的狀態。


我們來設想一個場景，你在一個理財平臺上購買了一款理財產品。不同的時間段會有不同的狀態。你看到這款理財產品收益率不錯，投了3000元，這時的狀態是「確認中」；過了幾天這個產品開始起息就進入了「起息中」狀態；又過了一段時間，你臨時有事急需要用錢，就把產品轉讓給別人，又會依次進入「轉讓中」和「轉讓成功」。不同的狀態我們在設計上給用戶加以區分來幫助用戶進行更好的識別。一般常見的方法就是使用不同的配色來進行區分，但是這個是適用於產品狀態較少的情況。如果你的產品狀態過多，每一個狀態都配以一款顏色的話，那麼整個界面就會顯得很亂。



最常見的狀態就是成功和失敗，一般來說在用戶心中都默認為綠色和紅色了。當然現在把企業色作為成功也很常見。這裡就會出現一個問題，如果你的產品主色調恰好是紅色，這個時候就可能會引起用戶混淆。



交互類


 接下來，我們來談談交互類文字。交互類文字，簡單來說就是能夠讓用戶完成點擊操作的文字。交互類文字設計的首要目標是讓用戶覺得你的文字是可以點擊的。主要的辦法有三個:


1 使用配色


目前來說用戶覺得帶有顏色的字體都是可以點擊的，比如企業色。



當然如果你覺得界面中企業色出現的過於頻繁，你還可以使用藍色。藍色在配色領域絕對是萬金油型的，不管你的產品界面主色系是什麼，用戶一看到藍色文字就會明白是可以點擊的。


2 icon


文字加icon的組合也可以讓用戶產生點擊的欲望。以知乎為例，左邊的帖子用戶只能看到答者和內容簡介，這裡的點讚和評論都是純文字，用戶無法直接進行點讚，但是點擊進去以後，是icon和文字的樣式，這裡用戶是可以直接進行點讚，評論，打賞和收藏。



ps.大家有沒有注意到上面我只提到不能點讚，沒說不能評論，其實是可以評論的。知乎裡一個帖子的字數都是比較多的，用戶只看到簡介就點讚或者評論沒有什麼意義。後來我又去看了簡書，發現簡書是不支持用戶在沒有看完文章的情況下就支持點讚和評論的。



所以我不知道知乎這麼做是出於什麼考慮，反正我是沒弄明白。



3 行為召喚語句


我們會遇到一些情況，不能使用配色，也不能使用icon樣式。例如，登錄界面中，我們希望用戶的注意力在登錄按鈕上，所以下方的「忘記密碼」和「快速註冊」我們要進行弱化。弱化了還能讓用戶認為你是可點擊的嗎？當然可以，只要你的文字行為召喚一點，多使用動詞就可以了。




交互類文字和按鈕


其實我一直覺得設計師應該對每一個設計組件(元素)都做到充分了解。因為設計師的工作就是把那些元素以一種合理的方式放在一個界面(畫布)裡。所以你必須要了解他們。這裡給大家推薦一個網站設計組件（http://element.eleme.io/#/zh-CN/component/select），裡面一些基本組件都有。



回到主題上來，交互類文字和按鈕其實有很多共同點。首先它們都支持點擊跳轉，也都可以展示狀態的切換。交互類文字與按鈕相比更加的輕量化，適用於極簡風格設計。但是按鈕也有自己的優勢，按鈕可以展示複雜的動效。


總結


以上就是我對UI設計中主要文字配色的一些分析和總結，希望大家看完能夠有所幫助，有什麼想法也歡迎留言跟我交流。



作者：王M爭

《懂點設計》內容提供設計師之一

UI中國主頁：http://i.ui.cn/ucenter/129823.html


想查看他的更多乾貨內容，請訂閱《懂點設計》吧！



---關於我們---

UI中國 專業用戶體驗設計平臺

主站：www.ui.cn

新浪微博：@UI中國

合作請加微信：18931333875


相關焦點

  • 菜單字體和配色的選擇
    前天發表了菜單創建指南中第一個步驟——如何設置菜單結構，昨天是第二個步驟——如何為菜單選擇風格，今天發布的為製作餐廳菜單的最後一個部分—如何為菜單選擇字體，如何配圖，如何選顏色，以及如何書寫菜單項。以下是有關如何為菜單選擇圖片，字體和顏色的一些技巧，以及如何為菜品編寫說明。選擇配色方案在菜單上使用的顏色反應了餐廳和品牌的許多信息，所以應該仔細選擇配色方案。 不同的顏色對顧客的食慾有不同的影響，例如，紅色，黃色和橙色等鮮豔的顏色可以增加顧客的食慾， 另一方面，藍色和紫色等顏色會減少顧客的飢餓感。
  • 網頁設計配色及字體規範
    總結了一些著名網站的顏色搭配方法，這些方法可以讓我們的學習少走彎路，快速提高我們的網頁製作水平。      我們所有網頁上顏色，在HTML下看到的是以顏色英文單詞或者十六進位的表示方法（如#000000表示為黑色）。不同的顏色有著不同的含義，給人各種豐富的感覺和聯想。
  • 頭條乾貨——Logo配色基本知識
    引言：配色是Logo設計方案中「出彩」的地方。而設計師最不希望的就是客戶因為不喜歡Logo的配色而拋棄整個的設計方案。因此在標誌中，對Logo配色會尤其重視。整個感受就像黑白電影和酷炫的美國大片一樣。總結：選擇應根據企業的經營範圍、事務性用品的涉及面、傳媒方式、企業的經濟實力與利潤的回報率等方面綜合考慮。根據表現企業形象的完整性需要決定單色或多色組合。完
  • 乾貨!史上最全的手繪字體設計教程
    我在最初開始練習手繪字體的時候，前期除了憑自己任性的想法寫一些字體練習外，我也是會經常在站酷上找一些前輩們的優秀手繪字體作品來臨摹學習。談到字體臨摹，可能大家多多少少都有些牴觸，因為每個人都想做自己的字體感覺、在最開始都想把自己的創意急於表現在字體作品上、但是我個人覺得臨摹+思考+創作才能讓自己領悟更多進步更快，其實臨摹的過程就是一個學習的過程，在過程中去揣摩前輩們的字體設計用意和表現技法、之前我在站酷上發作品會有多朋友留言問我如何開始練習字體、我的回答經常就是先臨摹，在這裡不是反對大家一上來就原創，而是在不了解的情況下可以先多臨摹多看多學習
  • 圖文教程06 | 字體與配色那點事兒
    但是不管是多麼好看的分析圖配色，如果和你的效果圖根本不搭，用起來只會是災難。還有另外一種方法，可以讓你不再依賴外來的配色圖，就是從自己的效果圖裡取色，讓我們再次召喚強大的indesign。或許你經常用吸管工具 ，但可能從來沒注意過這個顏色主題工具，當用顏色主題工具吸取你的效果圖時，就會自動生成一套配色。
  • (模板、高清圖、字體、配色、圖標......)
    涉及圖片模板配色圖標字體這幾個板塊，基本涵蓋了你所需的所有素材。頂部banner的位置為大家準備了專題推薦，而在下方還有下載排行以及相關的乾貨文章推薦，可以很輕鬆的幫助大家找到高質量的模板。>Adobe官方配色網站，輸入顏色後網站自動輸出相應的配色建議
  • 【乾貨】手繪字體 · 字體設計 · 經驗分享
    談到字體臨摹，可能大家多多少少都有些牴觸，因為每個人都想做自己的字體感覺、在最開始都想把自己的創意急於表現在字體作品上，但是我個人覺得 臨摹+思考+創作 才能讓自己領悟更多進步更快，其實臨摹的過程就是一個學習的過程，在過程中去揣摩前輩們的字體設計用意和表現技法，之前我在站酷上發作品會有很多朋友留言問我如何開始練習字體，我的回答經常就是先臨摹，在這裡不是反對大家一上來就原創，而是在不了解的情況下可以先多臨摹多看多學習
  • 【乾貨】英文字體中的草間彌生——Spot
    | 關於SPOT字體設計Q & A |Q：設計靈感從何而來呢？A：作為一個80後設計師，對像素畫風一直情有獨鍾，童年的紅白機遊戲簡直是最棒的回憶。受到草間彌生藝術的影響，選擇用圓點代替方正像素格。最終確定了字體的設計方向：復古的波點風、清晰的輪廓、明快的色彩。▼下面是字體應用展示
  • 乾貨 | 可愛卡通型字體的設計技巧
    ，簡單講就是可愛卡通類型的字體風格，像是母嬰、兒童相關會常常用到，那麼設計一款萌萌的字體有哪些方法？，這樣做的目的是給第二步筆畫的填充打好基礎，因為相類似這種類型的字體筆畫設定都是比較粗的。筆畫的加粗不是意味著沒有粗細變化，要根據結構空間適當的改變筆畫的粗細狀態，這樣字體會更有活力；另外一些曲線的部分要過渡自然柔和，這很大程度上影響字體的品質感；
  • 800款超高顏值字體免費送給你!(含可商用字體)
    ，雖然PPT模板很漂亮，但是總感覺字體缺了點靈魂，沒有畫龍點睛的效果。其實在我們日常學習和工作中，有很多需要用到字體的場景，比如做PPT、PS、海報設計等場景時都要用到字體，好看的字體可以讓你的作品脫穎而出。但是現在很多字體是有版權的，是要收費的。
  • 乾貨:字體設計中8種常用創意方法
    在進行廣告的創意，對漢字進行創意，往往也能達到比較驚豔的效果，本期就給大家帶來一期乾貨，推薦一些常用的字體設計創意方法。1替換法。替換法是在統一形態的文字元素加入另類不同的圖形元素或文字元素。其本質是根據文字的內容意思，用某一形象替代字體的某個部分或某一筆畫，這些形象或寫實或誇張。
  • 平面設計中各種字體特徵總結
    不同於傳統的字體介紹，這篇文章不按照字體的名稱來分類敘述，而是按照字體的字形特徵來分類敘述，從一種新穎、獨特的角度帶領大家了解字體的奧妙，和傳達的含義。1、書法字體與襯線體類似，只是筆畫上是毛筆字。例如隸、楷、行、草字體都是書法體。
  • 乾貨:神秘感黑色主題頁面設計配色技巧
    Impero深色系配色和動效的結合確實已經悄然流行起來了：用黑色或者深色為主的配色方案，搭配一個炫酷的動效。除此之外，想要讓整個配色和動效能夠有效地搭配，還得讓色彩足夠豐富。確定主要的色彩之後，最好在配色方案中加入同色系不同明暗、不同飽和度的色彩，這樣能讓整個配色統一而又豐富。雖然營造顯著的對比並不在這個設計趨勢之內，但是它依然是不容忽視。這個深色係為主的配色方案應該儘量貼近單色系配色，但是配色中色彩的對比度不夠明顯會讓人迷惑，對比度太強則不夠微妙。
  • 圖標、組件、字體,超實用設計乾貨大合集
    最新一期的設計圈實用乾貨大合集來了！和以往類似，11月的乾貨合集當中，涵蓋了一些實用性頗為不錯的設計工具和開發工具，但是最實用的始終是各種圖標、組件、還有字體，下面具體看看吧： The Good Line-Height https://www.thegoodlineheight.com/
  • UI設計師面試作品集排版規範經驗之顏色和字體選擇
    今天結合設計大神黑馬青年給出的如何包裝自己的作品集來跟大家重點聊聊配色控制和字體選擇。是不是老覺得人家的排版的作品集就是好看，自己弄出來的總感覺彆扭呢？有這樣的疑問，那就好好看看下面的乾貨吧~1、務必控制作品集中的配色搭配問題如果你對於色彩的把控不能運用自如，那麼在作品集設計的時候就要適當地控制不同色相的運用
  • 乾貨:網頁字體怎麼用才更吸引人!?
    近年來，展示性字體的需求越來越大，箇中緣由也就不難理解了。今天的文章會總結5種使用展示性字體創造獨特戲劇效果的技巧，幫你的頁面在激烈的競爭中，脫穎而出。1、簡約但動感的字體簡約的字體和動感的排版並不是互相排斥的存在。事實上，簡單的字體同樣可以輕鬆創造有著強力戲劇感的排版。
  • 秋冬季大衣的配色很重要!實用色彩搭配乾貨,穿出滿滿高級感
    其實大衣穿搭，靠的是細節取勝，大衣的配色很重要。尤其是大衣與內搭的配色，更是難倒了不少色彩小白。秋冬實用色彩搭配乾貨就在這兒，讓你穿出滿滿的高級感。 秋冬既然是大衣的季節，在穿搭時姑娘們都或多或少有過自己的配色方法。
  • 字體乾貨 | 這波新字體太養眼!
    上首造字擁有一支資深的設計團隊，創始至今一直專注漢字的設計應用與研發，為中小企業和設計師提供更多優質字體，為品牌視覺系統打造優勢，字體整體風格偏向於年輕化。至2020年7月入駐到字體超市以來，上首造字已經先後向字體超市提供了27款可商用授權的字體。
  • 做PPT找不到好看的字體?這裡幫你解決了!
    我們都知道，選擇一個好看的字體，對於PPT或者其他設計將會有很大的幫助。下面，我們就說說到什麼地方尋找好看的字體。本篇文章內容較多，所以分了上下兩篇。老規矩，如今您沒心思看內容的話，可以翻到最後，那裡有總結和乾貨。1.求字體網站：這個網站長這個樣子。
  • 【乾貨】如何書寫美工pop字體?
    出於這樣的考慮，應該儘量將商品的特點總結成條目，並且至多三條。POP是吸引顧客注意商品的手段，將商品的特點總結成條目，便於顧客閱讀，也就便於顧客了解商品。     　　書寫POP用的筆，應該控制在三種顏色以內。如果字體的顏色太多，反而會令顧客眼花繚亂，不容易看清。  　　第三點是易懂。介紹商品的語言要讓顧客一目了然，不能含混晦澀。