久久分类免费视频_亚洲Av不卡在线_97超碰在线免费观看_人人狠狠综合久久88亚洲 一本久道综合久久精品_四虎成人精品在永久免费_亚洲精品有码在线观看_国产在线视频导航

作品總是沒(méi)細(xì)節(jié)怎么辦?這3招教你給設(shè)計(jì)增加形式感!

一、異形容器

通過(guò)制造視覺(jué)元素的差異—— 讓 “不一樣” 的元素從周圍環(huán)境中凸顯出來(lái),自然成為視覺(jué)焦點(diǎn)。

引導(dǎo)用戶注意力優(yōu)先落在關(guān)鍵信息或操作點(diǎn)上,這就是對(duì)比原則,我們可以通過(guò)形狀的對(duì)比讓卡片突出,增加視覺(jué)表現(xiàn)力:

image.png

在一些視覺(jué)頁(yè)面中,也可以用異形容器增加視覺(jué)表現(xiàn)力,可以結(jié)合主題設(shè)計(jì)容器,例如下方就是一個(gè)以紙質(zhì)火車票造型作為卡片背景的例子:

image.png

也可以結(jié)合內(nèi)容設(shè)計(jì)容器,例如頁(yè)面的內(nèi)容是感謝用戶,就可以從感謝信或者信紙的角度設(shè)計(jì)容器:

image.png

二、背景

在設(shè)計(jì)中,想要為卡片或頁(yè)面增加形式感,豐富背景是直接且高效的方式,可以從顏色、底紋、裝飾元素這三個(gè)核心維度展開(kāi),讓背景不再單調(diào),為整體設(shè)計(jì)加分:

1. 優(yōu)化顏色增加背景的形式感

可將背景的無(wú)彩色(如黑白、灰度色)替換為帶有明確色相的有彩色(如柔和的薄荷綠、清新的天藍(lán)、低飽和的珊瑚橙等)

借助 “無(wú)彩色與有彩色” 的屬性差異,讓卡片與周圍的淺灰背景或普通卡片形成直觀色彩對(duì)比,快速?gòu)恼w布局中跳脫出來(lái):

image.png

也可以將卡片的單一純色設(shè)計(jì),升級(jí)為多種顏色的漸變效果 —— 通過(guò)這種漸變色,讓卡片與周圍的背景、其他組件形成鮮明對(duì)比

從而快速?gòu)恼w布局中凸顯出來(lái),成為視覺(jué)焦點(diǎn),快速抓住用戶注意力:

image.png

2. 給背景增加底紋

在背景中增加底紋(如低透明度的幾何紋理、輕微的肌理質(zhì)感等),不僅可以強(qiáng)化視覺(jué)層次,還可以向用戶傳遞頁(yè)面的風(fēng)格氛圍,增強(qiáng)記憶點(diǎn)。

例如科技類產(chǎn)品用細(xì)線條網(wǎng)格底紋增強(qiáng)科技感,古風(fēng)類產(chǎn)品可以用紙張等營(yíng)造復(fù)古的氛圍感:

image.png

image.png

image.png

下面列舉了一些常見(jiàn)的底紋元素,可搭配圖層的混合模式、不透明度使用:

image.png

3. 在背景上增加裝飾

可以根據(jù)頁(yè)面/活動(dòng)添加合適的裝飾元素,裝飾可以是圖形、文字等與頁(yè)面相關(guān)的元素。

裝飾元素主要是為了平衡界面視覺(jué),優(yōu)化整體協(xié)調(diào)性:當(dāng)界面存在 “大面積空白” 或 “元素分布不均” 時(shí),裝飾元素可起到 “視覺(jué)平衡” 作用。

image.png

image.png

image.png

三、文字

這里的文字不僅是卡片標(biāo)題,也可以是活動(dòng)標(biāo)題或者頁(yè)簽導(dǎo)航,那么文字的設(shè)計(jì)感可以怎么加呢?我們可以從圖形裝飾、線條裝飾、文字裝飾、背景裝飾四個(gè)方面給文字添加設(shè)計(jì)感:

1. 圖形裝飾

將圖形放在標(biāo)題空白處增加標(biāo)題的設(shè)計(jì)感:

image.png

也可以用來(lái)填補(bǔ)標(biāo)題的空白區(qū)域,平衡視覺(jué):

image.png

用圖形代替文字的某一個(gè)筆畫(huà),傳遞產(chǎn)品的氛圍:

image.png

2. 線條裝飾

用簡(jiǎn)單的線條突出標(biāo)題,輔助信息分層,突出重點(diǎn)信息,降低認(rèn)知成本:

image.png

3. 文字裝飾

用風(fēng)格獨(dú)特的字體寫(xiě)一句英文作為標(biāo)題的裝飾:

image.png

另一種方法是將文字放大起到裝飾作用:

image.png

4. 背景裝飾

在標(biāo)題后面增加背景,不僅可以保證標(biāo)題的可讀性,還能讓標(biāo)題抓住用戶的眼球,進(jìn)一步強(qiáng)化視覺(jué)表現(xiàn)力:

image.png

總結(jié)

盡管上面的案例分別展示了不同的提升形式感的方法,但在實(shí)際設(shè)計(jì)中,不必局限于單一形式。

將多種手法靈活組合(比如為卡片搭配有彩色背景的同時(shí),疊加輕量底紋并點(diǎn)綴細(xì)節(jié)裝飾),更能放大視覺(jué)表現(xiàn)力,讓界面擺脫單調(diào)感,呈現(xiàn)出更豐富的層次與質(zhì)感。

如果這篇內(nèi)容對(duì)你有啟發(fā),或是你有其他提升形式感的實(shí)用思路,歡迎在評(píng)論區(qū)分享交流,一起探索更多設(shè)計(jì)可能性~

轉(zhuǎn)載:優(yōu)設(shè)

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.aknz.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

日歷

鏈接

個(gè)人資料

存檔