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

提升产品UX体验的一些排版设计原则

发布时间:2017:11:21 17:02:59 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1259个文字,预计阅读时间4分钟
导语
本期和大家聊下 UI 设计中提升产品UX体验一些排版设计原则,下面进入正题(备注:以下举例图片均来源于网络)。

  本期和大家聊下 UI 设计中提升产品UX体验一些排版设计原则,下面进入正题(备注:以下举例图片均来源于网络)。

  

提升产品UX体验的一些排版设计原则

 

  本期和大家聊下 UI 设计中的一些排版的设计原理,作为 UI/UX 设计师,如何更佳有规律的去掌握排版设计能力,这样能保证你在设计中的界面处理能力到达一个长期稳定的水准,而不是时好时坏,下面进入正题(备注:以下图片均来源于网络)。

  UI排版设计 4 大原则

  视觉焦点

  层次结构

  视觉重量

  视觉方向

  视觉焦点

  视觉焦点就是在界面中占主导地位的视觉元素,第一时间进入你眼睛,在整个设计中你不能强调所有设计元素。

  

提升产品UX体验的一些排版设计原则

 

  上图的界面中作者通过色块来强调重要的日期选项记事,这样能吸引你的注意力,关键重要元素高亮显示。

  

提升产品UX体验的一些排版设计原则

 

  这个选座购票中中间座位元素都是同一个,但是选中后的效果突出,形成视觉焦点,右边的异常界面提示按钮形成焦点。

  

提升产品UX体验的一些排版设计原则

 

  这是反面例子,右边界面所有元素看起来都很重要,没有一个明确的视觉方向指引,看起来有颜色的都能点击?

  层次结构

  在几秒钟内,用户就能明确知道要点和页面元素之间的关系,并且顺利完成当前任务。建立视觉层次结构可以通过大小,对比,颜色,肌理,留白,空间,可感知的视觉重要,好的设计它的视觉层次结构分明且符合用户阅读习惯。

  

提升产品UX体验的一些排版设计原则

 

  界面中的视觉关系我标注出来了,我们可以思考别人作品是通过什么来表达这种层次关系。其实可以直观看出运用有颜色、大小,明暗对比(列表文字关系)。

  

提升产品UX体验的一些排版设计原则

 

  顶部视觉焦点第一也是导航比较重要的一部分,下面介绍设计师和联系图标,右边页面顶部视觉重量大,里面文字通过明暗关系区分层级。

  

提升产品UX体验的一些排版设计原则

 

  

提升产品UX体验的一些排版设计原则

 

  视觉重量

  如何去衡量视觉重量,影响视觉重量的因素有大小、对比、颜色、留白、形状、位置等等,那么在一个界面中如何把握视觉重量的比例,下面看几个例子:

  

提升产品UX体验的一些排版设计原则

 

  大家看完有什么感受吗?他们大小都是120px。

  第一个例子为何左边看起来比右边大

  第二个例子为何黑色视觉重量比较大

  第三个例子为何红紫色比左边方块更吸引眼球

  上面三个场景我们会在界面中,图标设计中会经常遇到,下图是调整后的大小左边方形大小是108px右边圆形还是120px

  

提升产品UX体验的一些排版设计原则

 

  图左边为何我会第一时间留意中间logo 而不是大面积的蓝紫色,因为留白,周围没有任何元素。图右边按钮第一时间吸引我,这就是通过颜色来吸引我的视觉焦点,需要关注的重点的地方

  

提升产品UX体验的一些排版设计原则

 

  图左边购买按钮和评分,购买按钮第一进入眼睛,黑色在白底上视觉重量比较大。图右边选座购票区域,都是圆形,通过颜色来区分他们之间的层级关系,重要的内容通过颜色强调,次要的通过明暗关系来表达

  视觉方向

  前面讲了视觉重量,它能第一时间把你带到特定重要的位置,那么接下来视觉方向是引导的一个作用,设计师要做的就是通过视觉引导,让用户能快速完成任务和达到预期目标,常用的视觉引导有Fpattern 和 Zpattern,下面来和大家详细说下

  

提升产品UX体验的一些排版设计原则

 

  左边图标和右边列表形成一个竖向轴的概念,那么就会有线,线连接元素的方向。右图再看下形成Z字结构 ,就是我们说的Z模式

  

提升产品UX体验的一些排版设计原则

 

  上图6个功能入口的图标水平排列,内部系统的建立一个平行轴的关系,所以视觉方向比较清晰

  总的来说要形成视觉方向就需要有线,这条线是看不见摸不着,他是通过轴来形成。如何形成轴的概念,那通过对齐,相同形状元素

  总结

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

看了这篇文章的人还看了

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

上一篇:设计的价值:一位搜狗UED设计师的自白

下一篇:后台系统设计:工作流设计剖析

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

      统一报价,无隐形消费

    • 金牌服务

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

    • 售后无忧

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

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

    截屏,微信识别二维码

    微信号:13825575516

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

    优化二维码打开微信