小紐扣

本周和大家聊一下設計中的投影,隨著iOS13的更新后,投影一下子又重新回歸我們的視線,其實投影一直是Ul界面設計很重要的一個元素,它能助于我們區分所看見的UI元素,投影在最早的時候,是運用在圖標設計里面,能很好模擬出界面真實是視覺感受!

 

投影的發展歷程?

圖片來源于dribbble

▲代表著從2009年至今整個按鈕的變化,可以很明顯的看到,投影從最早期每個按鈕有精致的漸變,圓角和陰影,到后面的扁平化所有頁面全部拍平,千篇一律,于是設計師重新將新的元素與平面結合,出現了彩色投影,更加強調的材質本身的顏色。

 

投影的重要性

幾乎所有的設計師在扁平化處理以后對于扁平化贊不絕口,作為新的趨勢,它讓信息更加簡潔,內容更加干凈,在所有的設備上看起來很一致性,但是扁平化發展到今天我們需要去思考,沒有差異性的設計真的是美的么?扁平化的設計問題在于,它讓UI的層次變動困難,讓用戶不得不去關注你內容組件本身,看個案例:

圖片來源于dribbble

▲?上圖這個案例是我們設計師經常每天在做的,很符合當下我們的設計趨勢,界面扁平的像紙片一樣,雖然在界面里面運用了線來區分,但是當我們第一眼看到這個界面時候還是不知道看哪里!

 

▲?然后設計師嘗試在這個界面基礎上去增加一些輕微的投影,明顯好多了,信息被區分為三層,信息更加明確了一些,同時也是在扁平化的基礎上,沒有那么突兀。

 

▲?上圖是iOS7剛出來的時候,完全沒有投影,我們仔細去看日歷圖標,鬧鐘圖標,當你使用白色或者黑色背景時候,鬧鐘圖標和日歷圖標,完全被背景吃掉了,是非常奇怪的一個設計,我們是希望用戶快速找到他們想要的圖標。

 

▲?蘋果在iO8時候已經解決了這個問題,在圖標四周增加一個微妙的投影,使得整個界面不會被背景吃掉,讓用戶更好的理解。

 

▲?前后版本效果對比,差異性就在于投影,這個設計也一直沿用到現在。

 

▲?同樣的問題也出現在了蘋果的地圖軟件,蘋果有個版本地圖搜索欄陰影去掉了,純扁平了,由于地圖本身就有很明亮的顏色,使得閱讀起來糊在一起了,右圖是蘋果優化后,在導航欄底部增加了投影,讓整個設計看起來更加完全清晰。

 

從上述一些案例我們可以看出,微妙的投影對于增強頁面的信息結構有很重要的作用,在現代界面設計中,包括最新的蘋果系統及微軟FluentDesign System的發布,里面大大增強了層次感,這種依賴于光特效,陰影和材質的效果,讓整個效果更加符合未來的一種界面設計方向。

 

投影的類型

卡片投影

使用陰影突出顯示兩個組件之間的高程差異。陰影可以應用于多個組件,包括卡片,菜單,側邊欄和工具提示。

▲?一般投影會區分幾個不同的區間,從小到大,分為小中大,根據實際場景來選擇不同的投影深度。

 

▲?規范來源于https:/ /design.frefox.com/

 

彌散投影

和上面卡片投影差別是,彌散投影顏色一般為物體材質本身的顏色,而不是黑白灰。

▲?圖中的卡片上按鈕黃色,它的投影也是物體本身的黃色透明度變化,其他案例也是類似原理。

 

▲?衣服的投影來源于后面背板的黃色,顏色值加深和增強。

 

這種投影的設計其實也并不難,能簡單幾步快速實現這個效果,下面以一個按鈕在sketh里面示范:

 

照片投影

它的特點是投影本身是在原照片上做了照片模糊處理,目前在蘋果一系列產品中看見過它的身影,比如iOS11的蘋果音樂,它效果很柔和,通透富有光澤和活力色彩。

 

照片投影目前iOS11代碼是可以實現的,在設計里面也很簡單,同樣簡單幾步就能出效果:

 

長投影

這個效果記得是在12年扁平化剛流行起來的時候,可惜過了一年左右就被歷史所遺忘了,現在除了偶爾在平面設計里面看到長投影運用,UI領域是很少再出現了。

 

總結

關于投影的運用是需要去理性思考的,需要考慮頁面場景,如果是效率形頁面,可能是列表更加合適,投影的目的也不是為了界面好看而添加的,而是讓用戶對于信息的理解更加簡單。

 

原文地址:我們的設計日記(公眾號)

作者:?sky

轉載請注明:學UI網 » 如何巧用投影提高設計品質

登錄收藏
 
你可能喜歡的:
稀缺性的正反價值稀缺性的正反價值
圖標造型時,你是否考慮過這兩個問題?圖標造型時,你是否考慮過這兩個問題?
中臺系統基礎知識- 系統布局中臺系統基礎知識- 系統布局
畫圖標已經夠難了,圖標里面還要加表情,我太南了!畫圖標已經夠難了,圖標里面還要加表情,我太南了!
實例解析尼爾森十大可用性原則實例解析尼爾森十大可用性原則
今天你簽到了嗎?今天你簽到了嗎?
觸摸鍵盤的設計解析 | 智能化工具產品觸摸鍵盤的設計解析 | 智能化工具產品
你對信息架構圖了解多少?你對信息架構圖了解多少?
十萬個為什么設計系列02-內容個性化十萬個為什么設計系列02-內容個性化
不知道這10點,誰還敢說真的了解設計-2020設計師要Get到的技能不知道這10點,誰還敢說真的了解設計-2020設計師要Get到的技能
?
5星腾龙时时彩做号软件 微信赚钱不需要保证金投票日结 阿里彩票苹果 小学赚钱赔钱问题的ppt 广西十一选五最大遗漏 美国驾驶证的赚钱漏洞 浙江快乐彩12选5走势图 北京pk10 108期20选5开奖结果 急速赛车6 福建快三 安徽快3一定牛 新疆11选5中助手 雪缘园nba即时比分 比分直播足球即时比分 内蒙古十一选五开 新时时彩