欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

产品设计套路:UI设计中的“对比”

发布时间:2017:07:15 05:20:18 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1438个文字,预计阅读时间4分钟
导语
互联网产品应该做到让用户在短时间内就可以获取到他们期望的信息,找到他们想要使用的功能。

产品设计套路:UI设计中的“对比”

  UI设计的最终目的就是为了更好的展示产品的内容,让用户可以更好的接受。与传统媒介相比,互联网产品所包含的内容更多,而且更加复杂。

  以书籍为例,我们读书都是一页一页的翻,一句一句的读,不能跳来跳去。但是对于app和网页来说,我们无法期望用户像读书一样来使用你的产品。这样不现实,现在是快速读图时代,即使面对文字用户也很少去“读”,他们更习惯一目十行的去扫描。互联网产品应该做到让用户在短时间内就可以获取到他们期望的信息,找到他们想要使用的功能。

  对比的应用可以很好帮助我们来实现这个目标。因为页面中信息虽然多,但是有优先级之分。有些内容对于用户来说不是那么重要,我们要弱化处理。同理,对于那些重要的内容,或者用户比较常用的功能,我们就要进行强化凸显,这就是我们说的对比。

  对比可以由形状、配色、大小、字体位置(留白)等来实现。

  形状

  首先我们来说说形状,对比的主要原则就是避免页面中的元素太过于相似。在同一个页面中,如果两个功能是不一样的,那么我们就尽量让它俩在外观上看起来不一样。如果无法在设计上进行很好的区分,用户很容易会混淆。

  例如,现在很多的按钮样式都是矩形(圆角矩形)加文字。这就给了用户一个暗示,矩形跟文字搭配在一起是可以点击。但是我看到现在的一些app里,矩形跟文字在一起是做标签使用的。

产品设计套路:UI设计中的“对比”

  我第一次使用的时候,尝试点击了一下,我以为会弹出一个弹出框来解释这个T+0存取的具体意思。当然也不是什么大问题,用户点击了一次就会明白这是一个标签,不会造成持续性的干扰。

  配色

  对比在UI设计中的一个主要目标就是吸引用户注意力。因为一个页面中的功能有很多,有的功能比较重要,用户使用频率比较高,设计师就需要把这个功能凸显出来,更容易被用户发现。配色是一个很好的实现手段。

  以网易云音乐的客户端为例,网易云音乐客户端mac版和window版在设计上还是有很大区别的,这里我们只说搜索框。

  Mac版里搜索框填充使用的白色,而windows使用的填充是深红色。

产品设计套路:UI设计中的“对比”

产品设计套路:UI设计中的“对比”

  可以很明显的看出,同样在红色的背景下,搜索框使用白色可以更好的吸引用户的目光。任何一款音乐类app,搜索框都是一个使用频率很高的功能,这样的一个功能,我们应该让用户很容易就发现而不是费力去找。

  位置

  下面这个登录界面比较常见,在登录按钮有三个链接,分别是:忘记密码、立即注册和游客登录。

产品设计套路:UI设计中的“对比”

  为了提升网站转化率,我们会希望新用户点击立即注册这个链接,所以在配色上使用了橙色将其凸显出来。这属于通过配色来实现对比。其实在这里我们除了使用配色,还可以使用大小和位置来实现对比。

产品设计套路:UI设计中的“对比”

  这是同样的一个登录框,将游客登录移到下方,缩小字号。两种设计方案都可以很好的鼓励用户去完成注册。

  令人纠结的“对比”

  就像我在上篇文章中说到的,设计是一个经常会让人陷入纠结的行业。以信息录入页面为例,在设计此类页面的时候,我经常问自己录入的信息到底是居中,居左还是居右。我没有办法说服我自己去100%的接受一个方案。

  如果需要用户填写的项目比较少那还好,因为位置没有那么重要,信息左对齐、右对齐或居中都可以。只要保持页面整洁美观就行了。但是当页面信息比较多,而且需要用户填写的信息和回显的信息夹杂在一起,我就很纠结了,网站建设公司,因为位置的重要性就凸显出来了。

  以下图为例,左边回显信息和需要输入的信息都是左对齐,这样的排布的好处是页面非常整洁。但是对于用户来说,他们第一眼看去很难分辨出哪些信息是需要填写的。以下图为例,如果用户没有仔细看可能会以为满屏的信息都是需要填写的,造成很高的跳出率,然而需要用户输入的信息只有3个。

产品设计套路:UI设计中的“对比”

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:2017年过半 设计师们都跟着这些趋势做设计

下一篇:全球资产交易平台美信金融获千万美元A轮融资 将拓展海外业务

  • 18876 文章总数
  • 2195195访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信