《规律与逻辑·用户体验设计法则》 学习笔记7

书接上回,这次记录一下在界面设计中对于细节的把控应当怎么做。

该部分为书中第四章内容,视觉体验进阶后半部分。笔记摘自《规律与逻辑》。

该系列将暂时停更一段时间,接下来更新的内容将会与Vue,JavaScript等相关。

界面设计中的层次感表现

层次感是在满足视觉合理性的基础上,把要强调或者突出的主体与画面中的其他元素进行区分。通过对比版面中的元素大小、远近和前后等多重关系进行梳理,并运用色彩加以区分,可以使元素和主体在画面中具有一定的主次关系,让人在观看时产生一定的视觉层次和心理变化。对设计师而言,可以通过技术手段对主体自身的层次感进行调整,使画面在传递的过程中具有更好的视觉效果和层次变化。

  • 文字的层级区分

拉开文字层级的首选备选方法:

字号>粗细>色彩明度>字体特效,越高优先级的越应优先使用,但越低优先级的效果越明显(并不一定是效果越好,好不好要看实际情况)
首级文字最好拉开对比,做一个字号粗细和间距的区分。排版要做到上重下轻,左重右轻。文字层次要做到大方向上统一,局部对比调和。

  • 元素的复杂程度

一般界面的复杂度是和元素的重要程度挂钩的,比如主页可以做的尽量花里胡哨,但是二级页面基本都很简洁,不然还像主页那么丰富多彩就会显得很混乱。使用元素复杂程度体现层次感有两个要点,一个是图标的效果控制,另一个是插图的合理利用。

在同系列学习笔记5中我记录了关于图标的知识,图标在界面设计中把控层次感是很重要的,入口层级较高的图标建议带彩,使用面性图标或者线条比较粗的线性图标,工具类或列表等层级较低的就可以使用线条比较细的线性图标了。

插图是一种能提升产品情感与品质感的设计方式,但是插图并不适合在任何场景。层级较高的界面可以使用,层级较低的使用反而会显得多余。

  • 间距的合理性

这里是亲密性原则的一种体现,也就是用户会认为相邻的元素是相关的,所以确实相关的元素是应当挨着近一些,确实不相关的元素应当挨着远一些。

分界线和留白的取舍应当看信息的重要性,重要度最弱的用留白,其次再用分界线。如果一个界面版块过多,可以用粗分界线处理。

如今的设计趋势更倾向于利用较多留白让界面版块更清晰透气,但这并不代表一个产品内所有的几面都需要这种大面积留白。一般来说一级界面可以使用较大的留白,清晰的布局让界面看起来轻松具有呼吸感,但二级三级页面再这样设计就有些过分追求形式了。用户点到二级三级页面大概率的目的是为了获取信息,所以在设计二级三级页面时的核心点在于同屏的信息承载力,但这也不代表二级三级页面得很拥挤,设计时也需要遵循基本规律。

  • 学会信息归类

要把相同表意的信息归到一起,在视觉上把相关的东西集中在一个版块内,而不相关的东西要有明确的提示,否则会没有层次感。

“查看更多”按钮经常存在于各大网站中,这个按钮的奥妙相当多。这个按钮代表的含义大多是跳入二级页,一般这个按钮会跟随在当前板块的标题后面。这样做的原因是避免歧义,如果按照常规思路,把查看更多按钮放在这个版块的底部,会让用户感到迷惑,迷惑的点是这个查看更多到底是查看这个板块内的更多信息,还是查看更多其他版块?而把查看更多按钮放在标题后面,用户就能很清楚的意识到这是查看更多其他版块。造成这种现象的原因就是查看更多按钮放在底部失去了层次感,原本是标题等级的组件放在了内容等级,层次感就这样缺失了。

  • 色彩的合理把控

在界面设计中,色彩的运用需要克制。每一种色彩的使用都得有其缘由和目的。对于色彩的把控,有三个问题需要注意。

第一个是相比于黑白灰,有彩色层级更高。很多设计师喜欢把导航条做的花里胡哨的,从视觉层级上压住整个界面,避免界面缺少重量感。因为有彩色层级更高,所以不重要的元素一定不能给它赋予有彩色。比如头像的边框,完全可以使用浅灰色阴影解决的问题,如果加入彩色边框,可能会造成视觉干扰。

第二个是有彩色元素一般意味着可以点击。彩色的文字在用户的心理预期中一般是认为可点击的,在一些多文字场合(比如微信公众号推文页)使用按钮时,可以使用有彩色文字链接作为按钮,这样避免了有色按钮带来的视觉重心倾斜,也能很好的提示用户这个按钮可以点击。但并不是说所有可点击元素都得弄成彩色,那样就会让界面看着很碎,比如信息列表,文字都是黑色的,但这样的组件用户一般都会认为标题可点击,所以不需要再为标题修改颜色了。

第三个是黑色不适用于长文本。过深的黑色对于大量文字来说阅读负担比较重,可以让文字更灰一些,阅读起来压力会小很多,只需要让用户能容易识别出文字来就可以了,但是标题,加粗等地方还是需要用深黑色表示,这样也可以营造一个视觉的层级差。

界面设计中的选图规律

设计用户界面时基本都避免不了使用图片,但选图是需要谨慎的。这里有以下要点需要记住。

  • 图片的比例选择

图片比例有以下四种类型:

1:1长宽等比型。这种类型比较常见,可以让界面看起来更简洁,比如头像,方形logo,但如果界面中的图片需要通屏时,这样的图片就不适用了,因为手机屏幕的尺寸是高而窄的。

4:3小众型。这种比例接近长宽等比,在实际使用中用的很少,适用于一些图片为主的产品或用户群体比较年轻的产品。

16:9人体工程学型。人体工程学的研究表明,人的视野范围是一个长宽比例为16:9的长方形,因此显示器等产品的尺寸一般都是以此比例进行设计的。在实际应用中,Banner,视频播放窗口等位置可以使用这样的尺寸,这是迎合人体工程学的。

X:≤Y瀑布流型。这个公式的意思是在界面设计中宽度固定,高度根据图片内容自适应。这样的模式在以图片为主且内容比较复杂的产品中使用较多,一般这样的页面都会使用瀑布流布局,所以名字就是这么来的。

  • 选图的统一性。

选图的统一性从三个方面入手:

比例统一。当确定一款产品的图片比例后,就要尽量将图片比例都规范化,也就是相同属性的版块图片比例都要保持统一。

视平线统一。如果相同图片的视平线不同,会使用户在浏览时视觉变得不流畅。这个需求在大部分产品中都是很难实现的,但是作为设计稿而言,应该把产品最好的一面展现出来。即使这个需求很难实现,设计师也要把最终视觉稿做到完美。(前端震怒)

格调统一。配图的格调能反应出产品的格调,尽量选取与产品相关的图片。

  • 选图的清晰度

选图的清晰度注重两个问题:

注重图片质量。选图清晰、高质量是提升界面效果最简单的方式。(当然,实际当中也要注意图片大小,太大了也不合适,得压缩一下)

将图片转换为智能对象。使用PS处理图片时尽量将图片转换为智能对象,这样可以减少像素丢失。

  • 图片和主题的贴合性

贴合性注重两个方面:

图片要与产品相关联。要格调内容均统一。

避免图片重复。图片重复会很大程度影响预览视觉效果。

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信