1.针对像素密度设计,而不是像素
例如,如果我们设计一个按钮元素,大小是200x50dp,那么它在160ppi的屏幕上显示为200x50dp,在320ppi的屏幕上显示为400x100px,即原始资源的2倍。
在某些屏幕每英寸的像素要比其他屏幕多,但设计资源却不会在像素密度高的屏幕上显得更小,这是因为在这些屏幕上会以原始尺寸的2倍,3倍,4倍进行渲染。这样的机制可以确保所有设计资源可以在不同密度和设备之间保持同样大小。
例如,iPhone XS Max的屏幕尺寸是414x896,但这不是像素尺寸而是点的数量,以像素为单位时是1242x2688px。考虑到这一点,在设计iPhone XS Max时,我会将在414x896点下设计,然后交付@3x的设计资源。
2.善用8dp增量
为什么设计中要用8dp这个增量规则?这里有一个简单的解释:我们使用8而不是5这个神奇数字的原因是,如果设备有1.5倍的分辨率,就很难被整除而出现锯齿。
此外,绝大多数的屏幕尺寸都可以被8整除,这就是使得我们的设计在这些屏幕上适配变得很简单。
在做设计的时候,应该时不时的停下来看看,确定下设计出的容器是否会使得UI变得混乱。通常,用于分隔内容的框和线可以用留白代替。
我们以前做设计的时候,喜欢将元素套在盒子里。所以,只需要把这些盒子去掉就能使页面看起来不那么密集,并给元素更多的呼吸空间,整个界面就能提升一个档次。
3.关注对比度
合适的对比度不仅可以让用户看到页面上的相关信息,还可以提高产品的易用性。
设计一款产品就类似于建造一个公共建筑,比如图书馆或学校,它需要包容所有人:盲人,色盲或视力受损的用户。
网页可用性标准(WCAG) (https://webaim.org/articles/contrast/ )规定对比度至少要达到4.5:1。
为了确保你做的设计符合标准,建议下载一个叫“stark ( https://getstark.co/)”的插件,来检查设计是否OK。
4.遵循用户习惯
某些元素被认为是标准的原因有很多。
例如,如果将按钮设计为圆形,那么当文本需要为“Start Free Trial”时,按钮就会占用不必要的垂直空间。
除此之外,用户已经开始期待类似的产品体验。如果你设计出来的网站,App,软件功能和用户所习惯的不太一样,那么它就是不直观的,用户就可能对这种体验感到失望。
因此,最好是在现有的设计规范的范围内进行创新,而不是去重新发明轮子。
5.用颜色深浅构建层次结构
每种颜色都有一个视觉权重,这有助于在内容中建立层次结构。通过使用颜色的深浅,为元素赋予不同的重要性。
这里的经验就是,如果一个元素比另一个元素更重要,那么它就应该具有更高的视觉权重。这能让用户很容易区分重要和不重要的信息,从而快速浏览页面。
更大,更醒目的信息会首先吸引用户的眼球,然后才会看向它下面的次要信息。
6.避免使用超过两种字体
一个普遍接受的设计共识就是在同一张界面中使用的字体数量应该要有限制。一般来说,两种不同的字体就足够了。这不是说不能用更多的字体了,而是最好要有合理的理由,否则最好不使用。
解决这个问题的方法是使用字体族。
使用字体族,我们可以在设计中使用具有不同变体的相同字体,来自同一家族的字体被设计成可以一起使用,是灵活且一致的。
在选择字体时,优先选择具有各种权重的字体,如细体,标准体,中粗体,加粗体,超粗体,宽体,扩展体和斜体。这将给你更多的发挥空间,而不需要添加额外的字体。
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果用户发布的作品侵犯了您的权利,请联系管理员:wupeng@hqwx.com
环球青藤
官方QQ群扫描上方二维码或点击一键加群,免费领取大礼包,加群暗号:青藤。 一键加群