前言
上篇文章我们从图标造型、卡片造型和 banner 造型三大模块对设计中造型进行了剖析,本篇文章接上篇文章从按钮造型、瓷片区和导航继续对造型进行剖析。
造型要素指构成形体的基本知觉元素。包括形态、肌理、色彩三个部分。「来源百度百科」
本文基于视觉设计,将造型定义为页面里组成元素的形态,像图标造型、卡片造型、banner 造型、按钮造型、TAB 造型和瓷片区造型等,这也是构成整个页面里的基本组成元素。(本篇文章将质感和颜色单独列出与造型并列,是为了方便讲解 UI 视觉设计)
1. 按钮造型
在 UI 设计中,按钮(Button)是一种常见的界面元素,用于触发特定操作或执行特定功能。用户可以通过点击按钮与应用程序进行交互。
①按照熟知的按钮功能类型分:
1)CTA 按钮:CTA,即“Call to Action”的缩写,意思是行为召唤。用来执行特定的操作,例如“预定”、“加入购物车”、“联系我们”等等这类有行为召唤的交互。
2)悬浮按钮:用于在页面上悬浮显示的按钮,通常用于提供额外的功能或操作。
3)标签按钮:用于在页面上显示标签的按钮,例如用于分类或导航。
4)命令按钮:用于执行特定操作的按钮,例如保存、编辑、删除等。
5)开关按钮:用于控制开关状态的按钮,例如开关灯、开关声音等。
6)表格按钮:用于在表格中添加交互功能的按钮,例如用于排序、筛选或操作数据。
7)选择按钮:我们常用的复选框,单选就是,或者一个大的选框。
②按钮从视觉上可以分为五大类:
1)文字按钮:纯文字按钮,网页首页大多为了追求简洁而采用加黑加粗的文字按钮。APP 纯文字按钮主要是为了弱化视觉层级。
2)面型按钮:填充一个形状,形状可以是正方形,圆形,带圆角的或者其它造型,视觉层级强。有些按钮为了追求独特性,例如“登录”,会采用渐变、弥散投影等设计手法。
3)线性按钮:也称作描边按钮或者镂空按钮,比较单一,视觉层级相对于面型按钮弱一级。
4)图标按钮:图标按钮以特定视觉图形来表达命令属性,提升界面整洁度,很多导航栏都会使用到它。因为图标按钮体积较小,布局灵活,且图标形式给了设计师更多表现空间,所以它是 Ui 设计中很容易出彩的地方。但需要注意的是,由于没有文字元素,图标按钮容易出现用户理解上的偏差,因此设计师在设计时需要做用户测试,以确定图标是否符合用户视觉预期。
5)图标+文字按钮:图标+文字相较于图标按钮会更清晰,在金刚区、功能列表等经常会用到。我们在设计常用功能图标时,应尽量选择图标+文字,避免用户看不懂图标语义,而增加使用成本。
6)修饰性按钮:这类按钮需要很强的视觉,通常用在运营插画上,限制比较小,UI 设计师可以根据主题率性发挥。
(注意:为了区分面型按钮,这里刻意将其独立出来,前面的面型按钮更多的是扁平化风格,这里的修饰性按钮则可以是轻拟物、玻璃拟态、拟物风、3D 风格等等,目的是为了在烘托视觉氛围,吸引用户点击。)
面型按钮、线性按钮和文字按钮,这三种我们经常会在同一卡片里同时用到,对于三者使用我们需要根据交互权重层级来选择,如下图:
③按钮设计应遵循以下设计原则:
1)一致性
“一致性是最强大的可用性原则之一:当事物始终表现相同时,用户不必担心会发生什么。” —雅各布·尼尔森(Jakob Nielsen)
一致性提高了速度和准确性,有助于避免错误。我们需要保障普通按钮在颜色、圆角、文字、间距、大小等保持一致。
2)无障碍设计
按钮的大小和位置应该使其容易点击,目标区域大小是影响可访问性的因素之一,其他是字体大小,颜色和对比度。
3)可用性(Usability)
按钮应该易于辨识和使用,文字内容应该简洁明了,能够清晰明确地传达按钮功能。按钮的位置和布局也应该符合用户直觉和使用习惯。
4)视觉美观
按钮的设计应该与整体的页面风格和品牌形象相协调,并能够提供良好的用户体验。
5)响应式设计
按钮应该能够适应不同屏幕尺寸和设备类型,以确保在不同设备上的用户体验。
6)创新
人总是喜新厌旧的,创新不但可以避免“同质化”,而且还能达到吸睛效果,这是体现设计师价值所在。
2. 瓷片区
瓷片区是以图片加文字方式呈现的运营位,视觉外观看上去就像一块块瓷片贴在版面上,故名“瓷片区”。像淘宝、京东、美团等 APP 都有用到。目前,在资讯、理财等页面也会经常看到,起到导流作用。
从设计的角度来看,瓷片区是一种非常灵活的元素,可以根据不同运营需求和产品特点进行定制。从而提高产品用户黏性和转化率。
①按设计风格:
1)实物类
这种风格通常使用真实商品或服务图片,直观地展示产品或服务特点,吸引用户注意力。我们常见的电商、外卖、旅游等产品类型,可以突出产品的真实感和可信度,喜迎用户点击了解的欲望。
2)插画类
这种风格的瓷片区通常使用插画图形,以展示特定的主题或传达某种情感。它不仅起到引流作用,而且极大地丰富了页面,让整个页面更加美观。多适用于金融、教育等产品类型。
②按颜色类型:
1)低饱和度
背景采用低饱和度颜色设计,颜色更柔和耐看,弱化整个瓷片区层级,常见于 B 端设计。
2)高饱和度
背景采用高饱和度设计,强化视觉,吸引用户注意,提高整个瓷片区层级。
3)简约类
这类风格背景大多采用白色或者浅灰色,外加简单的插画元素,减少视觉干扰,让整体显得简约、干净上档次。
③设计要点:
1)标题(主标题、副标题和按钮)
好的文案起到吸睛的效果。UI 设计师则要注意文案的排版技巧,要特别注意主标题和副标题的对比与层级。(注意:运营提供文案时最好主、副标题一起提供,同时注意字段不易过长,言简意赅)
按钮可有可无,按钮的样式可以丰富整个卡片,但也会让狭小的卡片略显拥挤,要学会取舍。
2)主元素
主元素是瓷片区灵活所在,人的第一眼首先会被主元素吸引,因此设计主元素的时候一定要注意它的准确度、美观度、清晰度、舒适度和设计感。
3)背景和辅助元素
背景起到定位整张页面视觉风格的作用,我们在设计页面时,要特别考虑是采用高饱和度还是低饱和度,或者简约白底;不同的背景色调给人整体感觉是不一样的,要结合整体设计风格和行业背景去定义。
辅助元素对瓷片区起到修饰作用,我们可以用简单的几何图形、律动的线条等等进行修饰,让主元素和背景层更加融合,提升美感。
4)布局排版
布局排版根据瓷片区个数,灵活排版,某一个板块需要强调,可以通过放大面积进行设计,这样要比中规中矩等分的瓷片区排版更加灵活,让页面充满律动感。如下图,4 个模块的瓷片区,布局排版至少有六种排法,所以设计师在设计的时候,要充分发挥想象力,避免同质化。
以下是结合四要素找的素材对比:
后续会根据本文介绍,会专门出一期瓷片区不同风格对比设计方法,敬请期待!
以上是从按钮造型和瓷片区造型对“影响视觉设计好坏的六要素(构、形、色、文、质、韵)之造型篇(下)”作了剖析,希望对大家在设计这两大模块的时候有所帮助,如有其它见解欢迎在下方留言,互相探讨。
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
用户体验设计核心问答
已累计诞生 646 位幸运星
发表评论 已发布12条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓