UI設計中的“黑與白”

     我們都知道在UI設計中配色占據著極其重要的地位,良好的配色會提升產品的用戶體驗度,更會吸引更多潛在用戶的目光。當然一款產品配色體系的建立是一個極其繁瑣的過程,礙于篇幅我無法展開來說。這篇文章我們只是主要來探討一下如何確定產品的主體配色風格:是白底黑字還是黑底白字?


影響配色的因素


一款產品配色風格的確定是要綜合多方面因素,在配色方案制定的初始階段,我們應該考慮以下幾個方面:


易讀性

屏幕背景色的選擇會對內容的易讀性產生極大的影響,這是產品用戶體驗中我們最看重的一部分。因為我們主要通過眼睛來獲取信息,如果這款產品的屏幕內容我都無法看清,那么就沒有繼續使用下去的欲望了。特別是對于以文字為主體的app或網站來說,糟糕的易讀性會導致用戶忽視重要的信息,而且增加了用戶的閱讀成本。用戶必須耗費很大的精力才可以獲取信息。所以說即使你的產品在其他方面做得很出色,易讀性的缺乏會致使你損失大量用戶。


適配

無論是設計一個app頁面還是網頁,我們要記住用戶會在不同的設備下使用我們的產品。在高分辨率屏幕下一些很酷炫的效果在低分辨率的屏幕下就會很“臟”,原有的效果無法體現出來。所以設計師應該注意產品在不同屏幕下的適配問題。當然這個在設計的早期構思過程中就應該被考慮到,什么樣的版式與配色會很好的完成適配。比如:卡片式設計就可以對頁面內容進行分割重組來適應不同的屏幕??ㄆ舊砘咕哂瀉芮康納燜跣?,可大可小??ㄆ繳杓瓶梢栽誆煌笮〉鈉聊恢腥員3質泳醴綹竦耐騁?。


使用場景

在我們選擇適當的配色方案和背景類型時,需要考慮的另一個因素就是用戶的使用場景。例如在自然光的投射下,黑色背景會產生反射效果,特別是平板電腦和智能手機的屏幕,這會影響用戶對屏幕內容的閱讀。從另一個方面說,在光線不好的條件下,暗色背景的導航對用戶來說更加合適。所以對于不同的使用場景,顏色組合,對比度和陰影的使用,設計師應該足夠的考慮。


視覺層次

同一個頁面中內容有著不同的優先級順序,有的內容很重要或者我們希望用戶首先看到,這類優先級高的內容我們在設計的時候就應該著重表現。我們可以通過色彩搭配來建立頁面的視覺層次,凸顯用戶真正需要關注的信息。模糊效果是我們衡量頁面視覺層次的一項重要測試工具。


模糊效果可以幫助我們發現頁面的視覺重心,了解用戶的目光是否放在我們希望被關注的內容上。方法其實很簡單,我們只要將圖片導入進Photoshop,并對圖片進行高斯模糊處理,強度為5-10px。就像上圖一樣,模糊處理后頁面,模擬的就是用戶第一眼看到頁面的場景:用戶對頁面整體布局會有一種大致上的認識,但是不會注意到具體細節。如果模糊狀態下的頁面我們找不到任何重點,那么就意味著我們要重新做出一些調整了。


配色步驟


明確定位產品的目標

產品的存在意義就在于可以滿足用戶的特定需求。比如美食外賣類app解決了用戶希望足不出戶又同時享有美食的需求;微信則解決了用戶在相隔萬里卻又想親密溝通彼此的交流需求;微博滿足了平凡的用戶同明星在同一個平臺卻也可以享有明星般關注的社交心理需求。我們產品的核心價值就是為用戶解決特定的需求,也可以理解為產品的核心競爭力就是滿足用戶的特定需求。因此在開始進行頁面設計前,應該對我們的產品核心功能定位有一個足夠的認識。


如果你的產品是一個博客類的app或者電子書,淺色調的背景或許更加合適一些。因為這類產品都是以文字為主導的,內容的可讀性占據用戶體驗的首要位置??蒲Ъ彝ü笛檠芯糠⑾鄭荷釕淖衷誶成塵吧媳硐值母?。因為淺色會增加頁面的空間感,不會顯得厚重擁擠,用戶更加容易集中注意力到內容中去。


反過來說,如果你的產品需要在視覺上做到具有很強的吸引力,那么深色調背景更加適合。因為深色調背景雖然顯得很厚重,但是因為其吸收了頁面中其他元素的光,更有利于其表現非文字形式的內容。因為產品的內容不僅僅只和文字相關,還有圖標、圖像、符號和數字等都屬于內容的范疇。此外,深色背景會給產品營造出一種特有的神秘感和奢華感,可以從更加深的層次來反映內容。


定義和分析目標用戶群

知道你的用戶將會是哪些人,了解他們期望從你的產品中獲得什么,這會對你接下來產品的界面風格定位有一個大方向上的指導。中老年用戶喜歡淺色背景的界面,因為內容更加的直觀,導航清晰。年輕人更傾向于深色背景的界面,因為其更加的自然與時尚。而青少年用戶對于歡快明亮界面是沒有任何抵抗力的,一些有趣的細節設置也可以很好的吸引低年齡段用戶的關注。


調研競爭對手

市場上不是只有你這一款產品,你必須要面對許多同類型產品的競爭。所以我們要對市場上同類型的產品進行調研,通過調研我們可以知道哪些設計方案已經被競爭者所使用,我們應該放棄。否則最壞的結果就是,等到產品已經進入了測試階段,即將上線,你才發現市場上已經有了一個極其類似的產品。所以說對市場進行調研在產品研發早期階段就可以放棄一些過時無用的設計方案,避免無用功。


產品測試

在產品測試階段,我們應該在不同分辨率和尺寸的屏幕條件下對產品進行測試,確保設計方案在不同設備下都可以有相同的用戶體驗。

總結

當然,拋除以上我們提到的部分,設計師還要做到具體情況具體分析。不同的時代、不同的技術支撐,我們的產品具有多種可能性。隨著科技的發展,智能語音技術的進步,或許我們的設計還將考慮技術因素,請與我一起共同期待。


來源:ui中國

上一篇: 如何打好前端游擊戰

下一篇: 讓你的設計更加高效便捷的5款原型設計工具

分享到: 更多
不限ip注册优惠体验金 黑客为啥不接博彩 时时彩四码计划软件 21点技巧16点碰到17点 四川时时注册网址 快三稳赚口诀 吉祥三公下载 北京pk是最简单技巧 飞艇六码二期计划软件 哪个游戏平台有21点 大乐透规则及中奖规则 不倒翁投注法新法整理 重庆时时走势图 11选5任选8稳赚技巧 火爆电子平台mg电子 pk10计划网页