020-29815005
预约专线时间:09:00-23:59

优漫-关于UI设计的10条法则

新闻来源:本站 日期:2021-05-21
本文中,我将分享几种我认为可以在日常工作中帮助大家的方法,但是它们也不是一成不变的。实际上我觉得,设计就是要跳出框框去思考,但是先弄清楚规则才有可能打破规则。
    本文中,我将分享几种我认为可以在日常工作中帮助大家的方法,但是它们也不是一成不变的。实际上我觉得,设计就是要跳出框框去思考,但是先弄清楚规则才有可能打破规则。

    一、为像素密度而非像素密度而设计。

    假如你不熟悉dp的概念,我也会在这里解释一下:像素密度是指每一英寸像素的值,单位dp是单词“density-independentpixel”的缩写,有时还可以缩写为“dip”。

    设计边界时,建议不要以像素为目标,而是以设备像素密度为目标。这就保证了设计元素可以很好地与各种不同设备匹配。

    举例来说,如果我们设计一个按钮元素,其大小为200x50dp,则200x50dp显示在160ppi屏幕上,320ppi屏幕显示为400x100px,相当于两倍于原始资源。

    有些屏幕每英寸的像素数比其他屏幕多,但是设计资源在高像素密度的屏幕上看起来并没有变小,这是因为在这些屏幕上渲染的是原始尺寸的2倍、3倍、4倍。这种机制可确保不同密度和设备之间的所有设计资源保持相同的大小。

    举例来说,iPhoneXSMax的屏幕尺寸是414x896,但是这不是像素尺寸,而是点数,如果点数是1242x2688px,那么像素就是。有鉴于此,在设计iPhoneXSMax的时候,我会在414x896下进行设计,然后发送@3x的设计资源给你。

    二、良好的8dp增量。

    为何设计时使用8dp的增量规则?简单地说,我们之所以使用8而非5这一神奇的数字,是因为如果设备的分辨率为1.5倍,那么整除时就很难产生锯齿。

    另外,绝大多数的屏幕尺寸都可以被8整除,这使得我们的设计在适应这些屏幕时变得非常简单。

    以8为递增的网格设计,也使8的设计变得更加统一。设计者可以迅速作出决定,不需要更多的猜测,达到完美的匹配。

    对此规则有一个更全面的了解,请查看BrynJackson的8点网格文章(文章链接于https://spec.fm/specifics/8-pt-grid)。

    三、删除线条和边框。

    当你进行设计时,你应该不时地停下来查看一下,看看下面设计的容器是否会使UI混淆。一般情况下,用于分隔内容的框和线可以使用留白。

    过去我们做设计时,喜欢把元素放进盒子里。因此,只要去掉这些方框,就可以使页面看起来不那么密集,并且给元素更多的呼吸空间,整个界面就可以提升一个档次。

    四、注意反差。

    适当的对比不仅能使用户看到页面上的相关信息,而且能提高产品的可用性。

    这个产品就像是在建造一个公共建筑,比如图书馆或者学校,它需要包含所有人:盲人,色盲或者视力受损的人。

    Web页面的可用性标准(WCAG)(https://webaim.org/articles/contrast/)规定对比度至少应为4.5:1。

    要确保您的设计符合标准,建议您下载一个名为“stark(https://getstark.co/)”的插件,以检查您的设计是否可以。


UI设计


    五、遵循使用习惯。

    有许多原因使某些元素成为标准。

    举例来说,如果按钮被设计成圆形,那么当文本需要为“StartFreeTrial”时,按钮就会占据不必要的垂直空间。

    除此以外,用户也在期待类似的产品体验。假如你设计的网站、应用程序、软件功能和用户习惯不同,那么它就是不直观的,用户可能会对这种体验感到失望。

    所以,最好是在现有设计规范的范围内进行创新,而不要去重新发明车轮。

    六、用深浅颜色构造层次。

    每一种颜色都有一个可视化的权重,可以帮助建立内容的层次结构。利用深浅的颜色来赋予元素不同的重要性。

    经验告诉我们,如果一种元素比另一种元素更重要,那么它就应该有更高的视觉分量。这样,用户就可以方便地区分重要和不重要的信息,从而快速浏览页面。

    一个较大、更引人注目的信息首先吸引了用户的眼球,然后才是它下面的次要信息。

    七、避免两种以上字体。

    大家一致认为,应该对同一界面上使用的字体的数量加以限制,这是一个公认的设计共识。一般而言,两种字体就足够了。不要这样说,不要使用更多的字体,最好有一个合理的理由,否则最好不要使用。

    这一问题的解决方案是使用字体。

    利用字型系列,我们可以在设计中使用具有不同变体的相同字体,同一系列的字体设计成可以一起使用,是灵活而一致的。

    选字型时,优先选择各种重量的字型,如细体、标准体、中粗体、加粗体、超粗体、宽体、展开体、斜体等。这样你就有了更大的发挥空间,不用再加字体了。

    八、直接而非让使用者思考。

    直截了当是产品设计的好策略,因为,为什么要让用户去思考?

    付款页面、邮件收件箱、搜索历史、返回按钮等等都是很好的例子。

    从支付页面(如果设计合理的话),我不必记得我买了什么东西,并且可以清晰地识别我要买的东西,而不需要提醒我。

    搜寻历史。

    从Gmail的收件箱中,我只需浏览一下,就能判断出哪些邮件我已经阅读,哪些没有阅读,无需多想。另外,如果我登录Amazon,我可以从以前浏览过的地方快速浏览,因为它会告诉我最近浏览了什么内容。

    让对象、动作和选项变得可见,从而最大限度地减少用户的阅读压力。使用者不需要记住对话中各个部分的信息。必要时,系统使用说明应可见或便于搜索。”——尼尔森诺曼。

    九、不要让使用者慢下来。

    对用户而言,速度和效率才是关键所在。一个用户使用一个应用程序,其目的是解决他的问题。

    "我想更快些"——理查·鲍比。

    要是有很多丰富的特性就好了,但是不要让你的创造性阻碍我的用户目标。

    动画和微交互的一条经验法则是,如果体验增加了不必要的时间,它实际上并没有改善体验。

    有意识地使用动画可以提高体验,但是加入不必要的干扰和移动元素是不行的。

    在Dribbble上,我经常看到用户在页面上滚动的时候,页面会被移动的情况。内容常常太过活跃,一切都在移动,而内容本身却被忽视。对于用户来说,当界面上发生如此多的事情时,要想引起他们的注意是非常困难的。它完全是在浪费用户的宝贵时间。

    索雷托科利乌特德里布雷塞

    许多研究发现,界面动画最快可以达到200-500毫秒。这个数字是根据人脑的特性得出的。所有小于100毫秒的动画都是即时的,而且根本无法识别。而且超过1秒的动画会给人一种延迟的感觉,会使使用者感到厌烦。——开发工具用户界面。

    因此,如果你使用的是动画,一定要有目的。假如我有这个打算,那就别让我等超过500毫秒。到2019年,激怒用户只需1毫秒。

    十、少即是多。

    每一次我们想在页面上增加额外的信息:按钮、文本、图片、动画、插图等等,它就和相关信息竞争。当页面内容过多时,元素的重要性就会降低。

    与Yahoo网站用户可能并不需要的信息相比,谷歌主页的设计更注重于其核心功能:搜索,这是一个完美的例子。

    我对不起Yahoo,我必须这样做。

    其中一条我很喜欢的设计格言是:“完美,并不是因为没有增加任何东西,而是减少了任何东西”——AntoinedeSaint-Exupery。