UI設計中如何設計真正高級感的細節(jié)?

原文來自微信公眾號:希音的設計筆記

在設計領域嘲碧,無論是APP設計還是網頁設計稻励,或是平面設計,投影的存在可謂是“形影不離”了愈涩。

在擬物化的早期設計中望抽,陰影是從圖標設計中衍生出來的,能夠很好的表現(xiàn)出深度和層次感钠署。

投影的靈活運用是UI設計師的基本能力糠聪,投影不僅讓你的設計更加有質感,也會讓你的界面更加清晰谐鼎,有層次感舰蟆。

投影一般有卡片投影,彌散投影狸棍,圖片投影和長投影幾大類身害。

關于卡片投影和長投影使用的場景不是很多且在UI領域很少再出現(xiàn)了,在這里就不多做說明了草戈。

01?彌散投影??

什么是彌散投影塌鸯?

彌散投影具體的解釋尚未有定論,在UI設計中唐片,彌散投影與陰影比的不同之處在于:

彌散投影的顏色一般是對象本身加深和增強的顏色丙猬,而不是陰影中的灰白黑,投影更具有深度费韭,在視覺上更有表現(xiàn)力茧球。

一張圖來康康有什么區(qū)別?


以下案例中的投影皆是卡片原有顏色的基礎上進行加深和增強星持。


圖片來自網絡抢埋,如侵則刪
圖片來自網絡,如侵則刪

Photoshop中的設計方法

制作的方法簡單且多樣,今天展示一種比較簡單的方法給大家揪垄。

在Photoshop中如何簡單快速實現(xiàn)以上效果穷吮?我們在Photoshop 中以一個卡片為例的設計教程,如下圖所示:


02 圖片投影? ?

Photoshop中的設計方法

圖片投影顧名思義就是用圖片本身做了模糊處理后作為一個投影效果使用饥努,這一效果最讓人有印象的就是出現(xiàn)在蘋果一系列產品中捡鱼。

在Photoshop 中同樣很簡單就能實現(xiàn),來看看步驟吧`

關于投影要理性去運用肪凛,不可以一味為了追求好看而亂用堰汉,投影的使用是為了界面的信息傳遞更加簡單。

用sketch來設計的方法下期見

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末伟墙,一起剝皮案震驚了整個濱河市翘鸭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌戳葵,老刑警劉巖就乓,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異拱烁,居然都是意外死亡生蚁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門戏自,熙熙樓的掌柜王于貴愁眉苦臉地迎上來邦投,“玉大人,你說我怎么就攤上這事擅笔≈疽拢” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵猛们,是天一觀的道長念脯。 經常有香客問我,道長弯淘,這世上最難降的妖魔是什么绿店? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮庐橙,結果婚禮上假勿,老公的妹妹穿的比我還像新娘。我一直安慰自己态鳖,他們只是感情好转培,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著郁惜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上兆蕉,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天羽戒,我揣著相機與錄音,去河邊找鬼虎韵。 笑死易稠,一個胖子當著我的面吹牛,可吹牛的內容都是我干的包蓝。 我是一名探鬼主播驶社,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼测萎!你這毒婦竟也來了亡电?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤硅瞧,失蹤者是張志新(化名)和其女友劉穎份乒,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腕唧,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡或辖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了枣接。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颂暇。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖但惶,靈堂內的尸體忽然破棺而出耳鸯,到底是詐尸還是另有隱情,我是刑警寧澤榆骚,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布片拍,位于F島的核電站,受9級特大地震影響妓肢,放射性物質發(fā)生泄漏捌省。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一碉钠、第九天 我趴在偏房一處隱蔽的房頂上張望纲缓。 院中可真熱鬧,春花似錦喊废、人聲如沸祝高。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽工闺。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間陆蟆,已是汗流浹背雷厂。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留叠殷,地道東北人改鲫。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像林束,于是被迫代替她去往敵國和親像棘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容

  • 創(chuàng)建美觀、可用和高效的UI界面需要花費時間進行設計細節(jié)的打磨依痊,本文從視覺和情感化設計兩個方面來說說如何提升UI設計...
    混沌小肉團01閱讀 1,926評論 0 46
  • 1避除、視覺元素 在互聯(lián)網產品日趨成熟的今天,你會發(fā)現(xiàn)所有的App越來越像胸嘁,似乎是同一套模版設計出來的產品瓶摆。而這種普適...
    莊小懶豬閱讀 594評論 0 0
  • 本文內容較多群井,U妹建議先收藏,再仔細閱讀喲~ 本文匯集和整理了共265篇干貨毫胜,從設計基礎知識—工具—界面設計—網頁...
    UI嚴選閱讀 11,569評論 20 365
  • 水槽定位法(0.618) 間距排版的應用方法书斜,開發(fā)者的box,鑲嵌原則酵使,統(tǒng)一數(shù)值反復利用荐吉。 eg:間距1: 30p...
    好妹妹mango閱讀 6,265評論 0 30
  • 16宿命:用概率思維提高你的勝算 以前的我是風險厭惡者,不喜歡去冒險口渔,但是人生放棄了冒險样屠,也就放棄了無數(shù)的可能。 ...
    yichen大刀閱讀 6,041評論 0 4