服务热线:
15071151002
图文展示
衍果视觉设计培训学校

新手UI设计师的UI设计技巧【UI干货】

给初级UI设计师的7个UI设计技巧



⬆️来自freepik.com的插图


文章目录


对比

留白

重复

重叠

悬念

一致性

对齐

如果你正在使用以上7个UI设计技巧,它将使你的设计与众不同。要像一位好厨师一样熟练掌握它们,你应该知道如何使用食材使菜肴变得可口。


1️⃣对比

它有助于使元素在人群中脱颖而出。它也遵循格式塔的“相似性法则”原则。对比度帮助我们在设计中创建视觉层次。可以通过以下方式实现对比:


-颜色对比

以Netflix的“登录”页面为例。


给初级UI设计师的7个UI设计技巧


你可以在下面看到他们如何使用对比色向用户显示标题(1)和CTA按钮(2)。


给初级UI设计师的7个UI设计技巧


以下是热图的快照,用户如何与Netflix登录页面进行交互。用户看到的第一件事是登录标题,然后是CTA按钮和“立即注册”链接。


给初级UI设计师的7个UI设计技巧

HeatMap是使用VisualEyes插件生成的


-尺寸对比

以 LinkedIn的个人资料页面为例。会看到他们如何使用字体大小(以px为单位更改)和粗细(从粗体,常规和斜体更改)来创建视觉层次结构


给初级UI设计师的7个UI设计技巧


-重量对比

重量的最佳示例是主按钮和辅助按钮之间的区别。根据谷歌材料设计指南


主按钮或包含按钮(重点突出)由于


包含颜色填充和阴影,因此包含按钮的重点更加突出。


次要或轮廓按钮(中等强调)


由于笔划,轮廓按钮比文本按钮用于强调更多。


第三或文本按钮(低强调)


文本按钮通常用于不太重要的操作。



给初级UI设计师的7个UI设计技巧


2️⃣留白

充足的留白空间可帮助你的设计呼吸并使其更生动。艺术家在白色空间中发挥很大的作用,以使其艺术品脱颖而出。你可以在下图中的Gal Shir中看到。他使用了对比(浅紫色的深紫色)和白色的空间来创作这幅精美的艺术品。



给初级UI设计师的7个UI设计技巧



Gal Shir的插图


留白会增加元素的可查找性。提高网站的转换率。以Amazon的登录页面为例。他们的主要重点是让用户登录时不会分心。他们把留白(-ive space)发挥到了极致。



给初级UI设计师的7个UI设计技巧



亚马逊,谷歌和ubereats等受欢迎的网站都使用留白,以提高其清晰度和转换率。



3️⃣重复

顾名思义,重复就是重复单个元素多次。重复在网络和应用程序设计中可能很有用。通过重复元素,我们作为设计师不仅可以按照用户的期望进行交付,而且还可以通过减少认知负担来改善他们的体验


重复可以是颜色,样式,布局等。

当你重复元素时,这些重复之间的间隔可以产生节奏感和移动感。


给初级UI设计师的7个UI设计技巧


重复颜色和线条以创建如此漂亮的logo,作者:肯尼·米斯纳(Kenny Miesner)

以dribbble.com为例,所有设计都以相同的四列顺序放置在相同大小的盒子中。


给初级UI设计师的7个UI设计技巧


Dribbble.com登录用户的主页



4️⃣重叠


重叠的最佳示例是视差动画。使用形状,颜色,照片和版式的组合可以最成功地实现这一目标。还使用模糊来创建深度和与页面的分离。

以下是一些使用重叠手法的设计。


流行的杂志封面在封面上经常使用这种技术。例如Vogue,Cosmopolitan,Bazaar等。



图片



著名的在线无代码生成器工具Webflow的登录页面使用了重叠的设计手法。你可以在右侧看到效果,将Webflow功能的快照一个接一个地添加并从监视器中出来。




给初级UI设计师的7个UI设计技巧


热门网站(从L到R)在其网站上使用重叠技术进行phonepe.com,webflow.com和stripe.com。



5️⃣悬念

悬念会使用户对你的设计感到好奇。他们会想为什么会这样。要想与其他网站不(视觉上)同。可以通过以下方法实现:



打破平衡


给初级UI设计师的7个UI设计技巧



极端裁剪放大


给初级UI设计师的7个UI设计技巧



重叠


给初级UI设计师的7个UI设计技巧



有角度的元素



给初级UI设计师的7个UI设计技巧





6️⃣一致性

一致性确实降低了用户的认知负担,但同时又扼杀了创新。精明的设计师非常清楚如何使用一致和不一致的设计元素


注意:你可以通过重复颜色,字体,类似类型的图像,布局和形状来保持一致性。


一致性可从这几点去表现:


色彩




给初级UI设计师的7个UI设计技巧





字体


给初级UI设计师的7个UI设计技巧



布局


Dribbble的设计展示页面在整个页面上具有一致的布局。


给初级UI设计师的7个UI设计技巧



图像(图标)


在stripe.com中,所有图标图片在整个网站上都是一致的



给初级UI设计师的7个UI设计技巧



7️⃣对齐

对齐可以帮助你设计的布局。网格在更好地对齐元素方面起着至关重要的作用。对齐可提高可读性


给初级UI设计师的7个UI设计技巧


⬆️在布局对齐中使用网格。


即使在报纸上,他们也使用网格来对齐大量内容。


图片



联系老师

联系老师

副标题

 
 
 
 
 工作时间
周一至周日 :8:30-21:00
 联系方式
客服热线:15071151002