中国设计网:UI设计中的10条经验法则

设计资讯
发布日期
2020-04-15 15:43
发送

在这篇文章中,我将分享一些我认为在日常工作中能帮到大家的方法,但这些方法也并非一成不变。我其实觉得,设计就是要跳出框框去思考,但先清楚规则才有可能打破规则。

1. 针对像素密度设计,而不是像素


在3dp或者4dp下的像素值


如果你不熟悉dp的概念,我也在这里先说明一下:像素密度是每一英寸的像素值也叫ppi,单位dp是单词“density-independent pixel”的缩写,有时也缩写为“dip”。
在设计界面时,建议不要针对像素而设计,而是针对设备的像素密度进行设计。这样能确保设计元素能在各个不同设备上很好的适配。

例如,如果我们设计一个按钮元素,大小是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整除,这就是使得我们的设计在这些屏幕上适配变得很简单。

通过在8点网格上以8为增量进行设计,也让设计变得更加统一。设计师不需要更多的猜测,就能快速做出决策,做到完美适配。

想要更全面地了解这个规则,可以去看看Bryn Jackson的8点网格文章(文章链接在 https://spec.fm/specifics/8-pt-grid)。


3. 去掉线和边框


在做设计的时候,应该时不时的停下来看看,确定下设计出的容器是否会使得UI变得混乱。通常,用于分隔内容的框和线可以用留白代替。

我们以前做设计的时候,喜欢将元素套在盒子里。所以,只需要把这些盒子去掉就能使页面看起来不那么密集,并给元素更多的呼吸空间,整个界面就能提升一个档次。


4. 关注对比度

合适的对比度不仅可以让用户看到页面上的相关信息,还可以提高产品的易用性。
设计一款产品就类似于建造一个公共建筑,比如图书馆或学校,它需要包容所有人:盲人,色盲或视力受损的用户。

网页可用性标准 (WCAG) (https://webaim.org/articles/contrast/ )规定对比度至少要达到4.5:1。

为了确保你做的设计符合标准,建议下载一个叫“stark ( https://getstark.co/)”的插件,来检查设计是否OK。

5. 遵循用户习惯

某些元素被认为是标准的原因有很多。

例如,如果将按钮设计为圆形,那么当文本需要为“Start Free Trial”时,按钮就会占用不必要的垂直空间。
除此之外,用户已经开始期待类似的产品体验。如果你设计出来的网站,App,软件功能和用户所习惯的不太一样,那么它就是不直观的,用户就可能对这种体验感到失望。因此,最好是在现有的设计规范的范围内进行创新,而不是去重新发明轮子。


6. 用颜色深浅构建层次结构

每种颜色都有一个视觉权重,这有助于在内容中建立层次结构。通过使用颜色的深浅,为元素赋予不同的重要性。


责编:春林
THE END

本文标题:中国设计网:UI设计中的10条经验法则
本文链接:https://www.chinadesignw.com/sjzx/1147.html

相关热点

10月22-23日,第28届中国(深圳)国际礼品及家居用品展览会(秋季展)即将在深圳国际会展中心举办,作为最具影响力的礼业顶级盛会,本届展会携手产业上下游4000+展商继续逐浪前行、斩获...
设计资讯/ 2020-09-11
聚焦设计价值 深耕设计师生态圈 躺平设计家平台拥有超1000万全球注册设计师,遍布200多个国家与地区,并与全球5万个商家建立了深度合作。 躺平设计家以免费、简单、高效的3D设计工...
设计资讯/ 2020-09-07
首届福佑文玩乐淘节今日开幕 上海福佑文玩城今天举行首届福佑文玩乐淘节开幕仪式。 本次文玩乐淘节邀请到了全国各地500多位文玩藏家齐聚福佑,并特设六场专业的主题活动:海上...
设计资讯/ 2020-09-03
9月1日是全省中小学开学的日子,江北设计小镇正式启用的金陵中学浦口分校迎来了首个开学日。 据了解,金陵中学浦口分校是江北设计小镇为提高教育水平和办学质量,新引进的公办...
设计资讯/ 2020-09-02
8月28日,同裳@东方 2020大浪杯中国女装设计大赛暨十周年颁奖盛典在深圳大浪时尚小镇盛大举行。星光璀璨,万众期待,最终18号选手杨岳凭借作品《拾荒者的乐趣》突出重围,一举夺...
设计资讯/ 2020-09-01
以升级住房消费健康绿色建筑为主题的第十六届国际绿色建筑与建筑节能大会暨新技术与产品博览会(以下称:绿建大会)2020年8月26至27日在苏州国际博览中心完美收官。2005年至今,绿建...
设计资讯/ 2020-09-01

相关推荐

3