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