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ì)感，適用于標(biāo)題性文字顏色。
[ 從照片中提取顏色 ]
在前期的訓(xùn)練中，也可將圖片馬賽克，這會輔助我們挑選顏色，當(dāng)你足夠熟練后，即可直接用吸管在照片上選擇更豐富的色彩。
[ 從馬賽克照片中提取顏色 ]
香檳灰（Champagne gray），可用作常規(guī)閱讀段落文字顏色，在墨綠色上面會顯得柔和、舒適。
我重新設(shè)計了首頁的文字與版式：
[ 優(yōu)化后的效果 ]
下面是之前的效果。對比看看：
[ 官網(wǎng)截圖 ]
這是最簡單的用戶感官上的提升。而更重要的是‘用戶心理’上的提升，這將在用戶閱讀文字內(nèi)容時發(fā)生。我們先看看文字內(nèi)容（翻譯如下）：
標(biāo)題 | 事情在變，但我們?nèi)匀辉谶@里為您服務(wù)。
正文 | 我們已暫時關(guān)閉店內(nèi)咖啡廳，但部分雜貨店和直通車位仍然開放。某些市場還提供星巴克提供的Uber Eats服務(wù)。請訪問我們的商店查找器以獲取的商店營業(yè)時間和營業(yè)地點。
按鈕 | 尋找門店
這段文字是星巴克官方在疫情期間所寫，并不是一段激動人心的品牌宣傳文案，所以我們在設(shè)計的時候應(yīng)使用常規(guī)的文字顏色，為避免白色在墨綠色下帶來的刺眼，我選擇白灰色（#e3e3e3）的字體顏色。標(biāo)題想表達的潛意識文字是：‘雖然我們碰到了困難，但是我們依然堅持為您服務(wù)’。我改為香檳色，來體現(xiàn)星巴克積極的態(tài)度與服務(wù)的品質(zhì)，會顯得更有力度。
在頁面中使用這樣的顏色，同樣可以提升設(shè)計的活躍度，為品牌帶來更好的品質(zhì)。例如，將顏色應(yīng)用到星巴克官網(wǎng)中小圖標(biāo)設(shè)計和文字上面，來提升品質(zhì)感與活躍度：
[ 優(yōu)化后的設(shè)計 ]
[ 官網(wǎng)截圖 ]
對我來說，OODA是一種行動思維，它可以改變您在設(shè)計工作中的思維方式?？梢赃\用在您的設(shè)計執(zhí)行和管理中，乃至您所在的任何領(lǐng)域、包括您所擔(dān)任的任何角色。
文章來源：優(yōu)設(shè) 作者：Riixiong
藍藍設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.sillybuy.com