同今生活在线网

体验设计5个关键问答(下)

UI设计培训 2019-09-07 12:1873未知tysj5ggj

相关文章:《体验设计5个关键问答(上)》

3. 如何把握设计细节

我们拿一些非常小的细节元素来说,大家平时怎么去绘制一个按钮,是否通过形状工具直接画一个差不多大小的按钮就可以了呢?这里有很多细节大家要注意。

1.按钮的长宽是需要有一定比例的,且必须为偶数。

当你在2倍图设计时,尽量数值能够被4整除例如36、32、28、24、20等,为什么要被4整除呢,因为2太小,如果整个页面的基数是2的话会非常碎,2的倍数太多,页面布局会显得没有规律。3的话是奇数,对于显示和运算都不友好所以我们选择4为基数进行设计计算。

2.按钮的直角/半圆角/全圆角设置

直角和全圆角就不讲了,主要是半圆角。对于不同尺寸大小的按钮,设置成一样的圆角数值是不行的。那应该如何设定呢,我先来看看一些产品中的规律。

大家发现了啥没有,有明显大小的按钮,半圆角率就会有明显区别甚至刚好是两倍,但如果按钮放大两倍后圆角曲率不变就会让大的那个按钮圆角看起来更大。如果没有明显面积区别的按钮通常圆角曲率也会有2/4/6/8这样的间隔来设置,由于按钮尺寸大小因素影响很多,所以一般不做很严谨的规律,只要不非常突兀就可以.

3.按钮的内容设定

一般按钮内部通常会有一些元素比如图标、文字、动效,以及其结合形态。例如图标和文字结合,图标需要有切图属性,所以尺寸会比实际图标尺寸更大,四周的留白也就越多。并且我们在设定图标、文字和按钮三者之间的关系时,需要进行一些计算,尽量让其三者的上下左右间距为4的倍数,但由于实际情况的限制我们也可以使用2的倍数。

有一点要注意的是,切图属性的存在会让实际视觉产生平衡偏差,所以我们要以实际视觉为主,让整体内容往左偏移一些。另外文字在默认状态下是有上下的空白间距的,这里如果为和开发说明,就会造成实际效果的偏差,所以如果大家在sketch里做的话一定要在输入完文字之后,再将行高的数值调整到和文字大小一致。

那么根据这些不同场景的按钮样式,我们就可以在组件库中作出更多复用性高的组件了,不仅仅是图标、文字、动效的结合,按钮状态、文字字数都可以做进组件库。

布局

首先有以下功能:头像、昵称、简介、级别、关注、分析、浏览数、会员按钮。

这些通常是在个人中心,所以一般也就3种布局,左对齐、居中对齐、右对齐。三种布局有他的优点和缺点,左对齐也是一种比较常规的对齐方式,信息靠左,行动靠右。居中对齐让信息更聚焦更有归属感但占用篇幅过高,功能扩展性较弱。右对齐弱化头像但比较新颖,缺点依旧是功能扩展性不高。那我们先选择左对齐来讲一讲信息布局中的细节。

杰途IT培训学习网 备案号:

本站内容部份来自网络和网友自行发布,如有侵权等问题请联系本站删除。