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