中文字幕一区二区三区在线中文-日本中文字幕 在线观看-欧美日韩国产亚洲综合-性色AV一二三天美传媒

廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
請輸入搜索關(guān)鍵詞
知識庫 知識庫

優(yōu)網(wǎng)知識庫

探索行業(yè)前沿,共享知識寶庫

必知!UI 設(shè)計(jì)細(xì)節(jié)魔法:異形變換、破界創(chuàng)新與分割巧思

發(fā)布日期:2025-01-14 11:41:44 瀏覽次數(shù): 1119 來源:美啊設(shè)計(jì)平臺
 
UI 设计界面不像运营视觉的页面,它没有那么多强视觉、花里胡哨的东西,我们大多时候需要在排版上发力,整合组织信息,只为了能更好地的服务用户使用页面中的功能。
在保证做好这几点之后,当然在页面上还可以增加更多的设计细节,那怎么去丰富这些特别的设计细节呢?这里就跟大家分享三个方法,分别是异形、破界、分割。

01 异形

将常见的图形做一些变换,让它的形状不常规,是丰富页面设计细节快速又有效的方式。

这里分享四种异形卡片的做法:
1. 图形缺角:往往在矩形卡片右上角挖掉任意图形,并且在挖掉后,再填充上其他修饰物,来让排版更平衡
上面的两种挖出形状后,填上的都是装饰物,当然我们也可以填主体物,这种方式就经常可见在 会员卡片、弹窗上
2. 缺角不一:其实就是矩形卡片的四个角圆角大小不一,呈现出来的效果,去丰富设计细节
3. 斜切角:将矩形卡片斜切,变成平行四边形
可以是整张页面这样被斜切开
也可以是单个卡片做成斜切的
或者是三张斜切并排的
4. 品牌形状:将品牌logo或者吉祥物形状融入到卡片的设计中,以此来达到异形、设计感的目的
02 破界
在页面中我们往往会用卡片或者色块将页面划分出不同的界域
一个界域一块信息,但是会有一些物体突破自己原本所在的界域,到别人的地盘去,这种现象就是破界。

1. 物体破界:我们先来看一个非常常见的破界方式,物体破界,这种方式会使得破界的物体特别突出、强调
这种破界方式也经常用在做弹窗的视觉上
当然物体破界,并不只出现在卡片的上半部,大家可以根据自己物体在卡片上的摆放位置,想想看它是否可以破界而出。
2. 图形破界:在卡片的基础上再叠一个图形破出,这个图形能够帮助你承载一些信息内容,丰富设计形式。
当然你也可以不止用1次破界,用2次以上的破界去增加更多的设计感。
相信大家已经了解了两种破界的形式,在之后的设计中更要活用起来,跟死板的设计说拜拜!

03 分割

大家在做标签的时候会怎么做呢?比如下方这个商品,需要将「3折,立省30元」这段文字做成标签。
最直接的就是这种方式,谁都能想到:
但是仅一层标签,在设计形式上有些单调,所以我们不妨对标签进行分割
其实到这一步标签基本上就做好了,也没啥大问题,但是如果想要把细节做得更好一些,我们可以把中间的分割做一些差异。
比如说分割线做成闪电的形状:
不只是标签,活学活用,这种分割方式也可以用在按钮处
还有一种标签的分割样式也是比较常见的⬇️
大家也可以基于产品风格、调性,自己想一些分割方式,比如之前做的像素风格页面,在分割这块就联想到用像素块进行表达。
总之,分割设计样式是多种多样的,大家可以多多尝试多多联想!

总结
以上总结的这些丰富设计细节的方法——异形、破界、分割,既可以单个使用,也可以组合使用

優(yōu)網(wǎng)科技,優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實(shí)的服務(wù)了近萬家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴!

優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用(手機(jī)站APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。


我要投稿

姓名

文章鏈接

提交即表示你已閱讀并同意《個(gè)人信息保護(hù)聲明》

專屬顧問 專屬顧問
掃碼咨詢您的優(yōu)網(wǎng)專屬顧問!
專屬顧問
馬上咨詢
聯(lián)系專屬顧問
聯(lián)系專屬顧問
聯(lián)系專屬顧問
掃一掃馬上咨詢
掃一掃馬上咨詢

掃一掃馬上咨詢

和我們在線交談!