今天來給大家分享產品設計中文字配色的一些知識點。要給文字配色,首先我們要知道你的產品(界面)中有哪些文字。在這里,我將產品中的文字主要分為以下四種:標題類、正文類、提示類和交互類。
標題類
首先來說標題類,標題,顧名思義要讓用戶在短時間內了解界面的大致內容,講究簡潔明了。在app中,標題類一般有的頂部欄標題,底部欄標題,列表標題、表單標題等。
給標題類文字配色相對來說比較簡單,選項比較少,我們一般只會使用深灰色或者企業色。因為標題雖然很重要,但是也不能過于搶眼。
而根據重要性程度我們可以把標題分為不同的等級,一般來說,層級越低的標題顏色越淺。深淺的搭配可以給你的界面帶來意想不到的效果。
例如,微信中的好友列表和聊天界面中,用戶名和聊天記錄的文字顏色深淺正好是反過來的。這個其實也很好理解,好友列表中用戶關注的是好友是誰,而到了聊天界面用戶更關注的是好友說了什么。所以這里用深淺不同的文字來幫助用戶加以區分。
我不太建議給標題使用企業色,因為你要調整企業色的飽和度來區分不同的等級,個人覺得這樣不太合理。
此外如果標題體系過于繁雜,僅從顏色深淺已經無法讓用戶從視覺上進行識別。我們還可以用字號來幫助完成區分,事實上現在大多數產品都是通過字號的不同來完成等級區分的。
正文類
正文類文字是給用戶提供詳細說明和解釋的,正文類文字要比標題類要淺一些。一是因為用戶對于正文都不太感興趣,很少去讀,我們沒有必要在這里使用配色來吸引他們的注意力。其二,因為正文字數一般比較多,過于花哨的配色會使整個界面顯得凌亂,造成主次不分。
提示類
提示類文字顧名思義就是要給用戶以引導和提示。這個就意味著提示類文字要足夠的顯眼,如果用戶都注意不到你,還怎么提示呢?
提示類文字一個主要用途就是給用戶展示當前的狀態。
我們來設想一個場景,你在一個理財平臺上購買了一款理財產品。不同的時間段會有不同的狀態。你看到這款理財產品收益率不錯,投了3000元,這時的狀態是“確認中”;過了幾天這個產品開始起息就進入了“起息中”狀態;又過了一段時間,你臨時有事急需要用錢,就把產品轉讓給別人,又會依次進入“轉讓中”和“轉讓成功”。不同的狀態我們在設計上給用戶加以區分來幫助用戶進行更好的識別。一般常見的方法就是使用不同的配色來進行區分,但是這個是適用于產品狀態較少的情況。如果你的產品狀態過多,每一個狀態都配以一款顏色的話,那么整個界面就會顯得很亂。
最常見的狀態就是成功和失敗,一般來說在用戶心中都默認為綠色和紅色了。當然現在把企業色作為成功也很常見。這里就會出現一個問題,如果你的產品主色調恰好是紅色,這個時候就可能會引起用戶混淆。
交互類
接下來,我們來談談交互類文字。交互類文字,簡單來說就是能夠讓用戶完成點擊操作的文字。交互類文字設計的首要目標是讓用戶覺得你的文字是可以點擊的。主要的辦法有三個:
1.使用配色
目前來說用戶覺得帶有顏色的字體都是可以點擊的,比如企業色。
當然如果你覺得界面中企業色出現的過于頻繁,你還可以使用藍色。藍色在配色領域絕對是萬金油型的,不管你的產品界面主色系是什么,用戶一看到藍色文字就會明白是可以點擊的。
2.icon
文字加icon的組合也可以讓用戶產生點擊的欲望。以知乎為例,左邊的帖子用戶只能看到答者和內容簡介,這里的點贊和評論都是純文字,用戶無法直接進行點贊,但是點擊進去以后,是icon和文字的樣式,這里用戶是可以直接進行點贊,評論,打賞和收藏。
3.行為召喚語句
我們會遇到一些情況,不能使用配色,也不能使用icon樣式。例如,登錄界面中,我們希望用戶的注意力在登錄按鈕上,所以下方的“忘記密碼”和“快速注冊”我們要進行弱化。弱化了還能讓用戶認為你是可點擊的嗎?當然可以,只要你的文字行為召喚一點,多使用動詞就可以了。
交互類文字和按鈕
其實我一直覺得設計師應該對每一個設計組件(元素)都做到充分了解。因為設計師的工作就是把那些元素以一種合理的方式放在一個界面(畫布)里。所以你必須要了解他們。
回到主題上來,交互類文字和按鈕其實有很多共同點。首先它們都支持點擊跳轉,也都可以展示狀態的切換。交互類文字與按鈕相比更加的輕量化,適用于極簡風格設計。但是按鈕也有自己的優勢,按鈕可以展示復雜的動效。
本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司!
網站標題:網頁設計中—文字配色方案介紹
當前URL:http://m.newbst.com/news9/312209.html
成都網站建設公司_創新互聯,為您提供網站排名、Google、標簽優化、動態網站、ChatGPT、網站內鏈
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯