2020-9-21 資深UI設(shè)計者
這是Taobao APP 商詳購買頁面底部Button。一般情況下,品牌刷新或VI色調(diào)整,都會體現(xiàn)在界面的核心功能區(qū)域,例如Button或者Icon上。從‘立即購買’Button的色彩變化,便可以判斷Taobao經(jīng)歷了3次重要的VI色調(diào)整。
下面顏色是我記憶里的淘寶VI色(大致色值),淘寶VI色的調(diào)整也是相應(yīng)了互聯(lián)網(wǎng)設(shè)計的主流色彩表現(xiàn)趨勢:
[ 星巴克官網(wǎng)首屏截圖 ]
常人看到這樣的界面并不會有任何意見。用‘色彩認知’來講講我的觀察。星巴克的主色是墨綠色,在官網(wǎng)大面積使用,則帶來‘視覺壓抑’的感覺,我想通過簡單地改變,來提升星巴克的品牌氣質(zhì)。
我用Photoshop吸管工具從官網(wǎng)首頁上的一張照片中提取顏色:香檳色(Champagne),這樣的顏色在墨綠色底色上有較好的辨識度和品質(zhì)感,適用于標題性文字顏色。
[ 從照片中提取顏色 ]
在前期的訓(xùn)練中,也可將圖片馬賽克,這會輔助我們挑選顏色,當你足夠熟練后,即可直接用吸管在照片上選擇更豐富的色彩。
[ 從馬賽克照片中提取顏色 ]
香檳灰(Champagne gray),可用作常規(guī)閱讀段落文字顏色,在墨綠色上面會顯得柔和、舒適。
我重新設(shè)計了首頁的文字與版式:
[ 優(yōu)化后的效果 ]
下面是之前的效果。對比看看:
[ 官網(wǎng)截圖 ]
這是最簡單的用戶感官上的提升。而更重要的是‘用戶心理’上的提升,這將在用戶閱讀文字內(nèi)容時發(fā)生。我們先看看文字內(nèi)容(翻譯如下):
標題 | 事情在變,但我們?nèi)匀辉谶@里為您服務(wù)。
正文 | 我們已暫時關(guān)閉店內(nèi)咖啡廳,但部分雜貨店和直通車位仍然開放。某些市場還提供星巴克提供的Uber Eats服務(wù)。請訪問我們的商店查找器以獲取的商店營業(yè)時間和營業(yè)地點。
按鈕 | 尋找門店
這段文字是星巴克官方在疫情期間所寫,并不是一段激動人心的品牌宣傳文案,所以我們在設(shè)計的時候應(yīng)使用常規(guī)的文字顏色,為避免白色在墨綠色下帶來的刺眼,我選擇白灰色(#e3e3e3)的字體顏色。標題想表達的潛意識文字是:‘雖然我們碰到了困難,但是我們依然堅持為您服務(wù)’。我改為香檳色,來體現(xiàn)星巴克積極的態(tài)度與服務(wù)的品質(zhì),會顯得更有力度。
在頁面中使用這樣的顏色,同樣可以提升設(shè)計的活躍度,為品牌帶來更好的品質(zhì)。例如,將顏色應(yīng)用到星巴克官網(wǎng)中小圖標設(shè)計和文字上面,來提升品質(zhì)感與活躍度:
[ 優(yōu)化后的設(shè)計 ]
[ 官網(wǎng)截圖 ]
對我來說,OODA是一種行動思維,它可以改變您在設(shè)計工作中的思維方式??梢赃\用在您的設(shè)計執(zhí)行和管理中,乃至您所在的任何領(lǐng)域、包括您所擔任的任何角色。
文章來源:優(yōu)設(shè) 作者:Riixiong
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.wnxcall.com