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

用户体验设计师的主要产出物是什么?从打开产品的引导页到数据为空状态的设计技巧,逐渐扩展到运营Banner设计,最后深入到界面层次感的打造以及不同风格产品的设计路线,全面解决用户体验设计实际工作中的各种难题。

我打算用两次笔记学完这里。该部分为书中第四章内容,视觉体验进阶前半部分。笔记摘自《规律与逻辑》。

设计中的感性与理性

设计是感性与理性的结合体,只有两者完美融合,才能呈现出独特的美感。感性听从内心,理性服从大脑,理性让人逻辑,感性让人自然。

如果理性束缚意识自由,感性就要消除压力。对于设计而言,应当做到感性和理性的结合,既要懂得设计规律逻辑思维,也不能让思维受到局限,勇于大胆尝试。

引导页设计

引导页是指导用户如何使用产品的页面,之所以会大量出现在移动端产品中,是因为受到传统PC软件时代的影响。PC时代的软件,用户往往不知道如何操作,所以对于软件而言必须配备一个完备的说明书,甚至需要进入专门的培训班进修才能掌握某种软件的使用。

不过移动互联网时代,这样的说明书似乎显得有些笨重了。软件的轻量也使得用户学习成本大大降低,并不需要以前那样再配备一个说明书了。于是人们使用引导页代替说明书,对用户进行软件使用介绍。

引导页分为产品介绍型、操作指引型和讲故事型。

  • 产品介绍型

简单介绍产品,让用户有个大致的了解,体现产品的格调,多为图文共同展示形式。文字作为简要介绍,图片烘托氛围,下方最好提供一个阅读进度条,让用户了解当前介绍所处的位置。

  • 操作指引型

这样的引导页除了会在首次打开产品时出现,还会在产品内首次打开某个界面时出现。这种引导方式会加深用户的印象,但在用户使用过程中,不经意间弹出的引导会打断用户操作,会引起用户反感。所以这样的引导页尽量不要出现在简单易理解的操作步骤中。

  • 讲故事型

讲故事型引导页的主要目的是营造具有浓烈感情色彩的场景,增加用户对产品的关注,提升在用户心理认知中的情感。一般是设定一个与产品相关的场景进行介绍,使用形式也是图文共同展示较多。

引导页设计规律:

  • 控制文字量并有效传达信息:人类对于文案在短时间内能记忆住的字符不超过9个。
  • 改变常规的交互方式:可以使用更创新的形式吸引用户关注,比如使用弹窗。
  • 信息聚焦:引导页中不应该出现过多的视觉焦点,容易分散用户注意力。

空状态设计

(老师!这个问题我会!让我来!)

某列表或某区域的信息为空,没有任何可以展示的东西,或者说获取数据出错,断网,程序异常等情况,都可以认为是空状态适用的场合。

空状态对于提升用户体验的重要性是极其高的。我在《前端工程简史》那篇笔记中写到AJAX技术改变了前端, AJAX技术进行的异步加载表现到页面上就是信息的更新,那如果更新出来是空或者调用接口时爆500了呢?(error 500代表服务器内部错误,一般是后台程序bug了)。此时如果是一个全白的区域,给人的感觉就类似于“是不是正在加载?卡了?”,那自然用户就会感到迷惑,但此时不一定是卡了,而是确实没有什么可以展示的。使用空状态便可解决这样的问题。

空状态分为以下三类型:

  • 系统推荐型空状态

适合在应用初次启动时使用,此时用户没有或很少在应用内执行任何操作,对于一些信息推荐相关的内容自然是“无米可炊”,那么可以设定一个推荐页面,让用户根据喜好选择一些内容,就解决了内容空的问题。

  • 操作指引型空状态

这样的空状态适合以下逻辑:界面应该展示产生的内容→界面并没有展示产生的内容→空状态指引用户前往产生内容的页面。

举个例子,某书籍阅读类应用,用户刚注册账号时书单内没有任何书,此时访问书单页面时,空状态提示用户书单为空,可以前往找书页面发现自己喜欢的书籍,给出一个明显的按钮便于用户跳转。

刚才的例子,使用推荐型空状态一样适合,但同样需要给出跳转找书页面的链接,否则用户体验会不太好。

  • 情感表达型空状态

这是一种“实话实说”型空状态,适用于用户操作的结果页面。比如用户搜索某关键词却什么都没搜到,此时并不怎么需要多余的跳转(毕竟当用户没搜到东西时,常见的操作要么是返回上一页,要么是换个关键词继续搜),此时只需要放一张有趣的图片,可以配上一些幽默的文案,提示用户没有结果,就足够了。

设计空状态应该避免死角,每个有可能为空的状态都应当考虑一下(是考虑一下,不是都需要,下面会说),在用户使用一个产品并完成他之前从未完成过的功能时,不能让用户“走进死胡同”。

但并不是每个空状态都需要设计,也不是每个空状态都需要来个配图进行精心设计。当同屏只有一个版块时,使用带图空状态是合适的,但如果同屏有多个版块,每个版块的空状态都带个图就显得有点占地方了,这时候空状态只给一句话就可以。如果是多版块页面,某版块信息为空时也可以直接设定其折叠显示或者不显示,这样其实也是空状态的一种体现。

Banner设计

Banner可以作为网站界面的横幅广告,也可以作为活动用的旗帜,还可以作为报纸、杂志上的大标题。对于移动端设计,Banner可以理解为最高视觉层级的功能或活动入口,因为Banner在设计时通常都会花里胡哨的,视觉层级相当高。

Banner的尺寸并没有固定的规范,形状也没有规范,圆角矩形,弧形都是可以的。我在工程实践中常用到的PC端Banner尺寸有1920*700px1200*400px,手机端可以等比缩放一下或者根据实际情况调整。

Banner的组成五要素:文案、素材商品或模特、背景渐变、纹理叠加、点缀图形。

Banner的设计要点:

  • 文案注意排列规则,一行文字不能超过9个字。
  • 设计背景渐变让视觉添加纵深感,用色应当符合产品特性。(色彩选取参考请参照我的同系列学习笔记3)
  • 合理使用纹理叠加衬托主体,但避免过度使用喧宾夺主。
  • 实物点缀,人物点缀,图形点缀对设计Banner尤为必要,这三者至少应当出现一个。
  • 注意控制版面色彩与版式平衡。

据书上说,带着这几个要点去网上找找比较成熟的banner图,会发现万变不离其宗。

Banner的组成形式分为纯文案型和文案素材结合型。

纯文案的Banner一般出现在电商以外的产品中,这种Banner不需要图的原因或者结果就是重点突出文案,所以设计这样的Banner必须在字体上下功夫(字体规律请参考我的同系列学习笔记5)。这样的Banner需要元素和图形来烘托气氛,绘制或选取素材时应当尽量贴合Banner的主题。

文案与素材结合型的Banner在电商类或音乐类产品中应用较多,电商类Banner推广销售产品,音乐类Banner推广音乐专辑。设计这样的Banner需要注意权衡文案和素材的视觉层级关系,同时两者尽可能统一风格,营造产品应当表达的氛围。

Banner的设计风格有以下六种:

  • 素雅文艺型:大面积留白,字体多宋体,字号差距大,饱和度较低,明度拉高点,常见灰白色。
  • 高冷时尚型:文案很简洁,黑体无衬线,色调就两种,素材大比例,摄影很细腻,点缀得小心。
  • 传统中国风型:灰调用的多,书法中国色,文案多竖排,排版右到左,不要渐变感,传统元素加:印章、山水画、墨迹、扇面、剪纸、园林窗格、祥云、京剧元素、卷轴、锦鲤等。
  • 青春活力型:排版随你意,饱和度拉高,互补加对比,标题别太细,背景多点缀,字体也随意。
  • 节日促销型:就图一热闹,多用红黄紫,画面少留白,标题得夸张,字号放大些,视觉冲击强。
  • 科技概念型:底色用暗色,光效配科技,不要大圆角,配色蓝紫黑,画面要硬朗,科技元素加:光线,金属,线条,光点,宇宙,地球,人脑等。

Banner在设计中需要注意的问题:

  • 主题要明确,构图要紧凑,整体性要强
  • 左边的视觉重量更高,想突出什么元素就尽量把它放左边
  • 巧用装饰元素,避免画面单调
  • 纹理应当体现一定的质感
  • 装饰性图案元素一般不让用户明显感知到,视觉上隐约可见即可
  • 留白和点缀的多少应当根据风格确定

装饰元素的分布方法:

  • 散点分布法
  • 流星雨分布法
  • 点状环绕分布法
  • 放射发散分布法

装饰元素的设计方法:

  • 渐变图形法
  • 元素提取法
  • 发散联想法

启动页设计

启动应用程序后,进入主功能界面之前一般会有一张图或一个动画,在程序进行加载时显示,加载完成后消失,这就是启动页。

启动页本身不是为了展示艺术品,而是解决用户会因为等待时间过长产生厌烦的问题。PC时代一般都是大型软件和网游才有启动页,移动端应用程序启动页应用变得非常广泛了。

启动页设计有以下四种形式:

  • 快速启动型启动页,尽量让用户不去感知界面的存在,无缝衔接到应用中。这样的形式有两种实现方法,第一种是把App首页背景图作为启动页,第二种是把首页加载状态作为启动页,但这样的设计具有局限性,仅适合轻量级应用,使用量较少。
  • 品牌传递型启动页,这样的启动页是比较常见的,通常包括三个要素:产品图标,产品名称,宣传口号。部分启动页还会加入如开发者信息等其他信息,这样的启动页能加深用户的直观印象,拉近与用户的距离,强调品牌性格。
  • 节日氛围型启动页:这样的启动页多以插画形式出现,一般会在节日或特殊纪念日时出现,时效性很强。当然也有一些直接用普通插画当启动页的,这样的启动页会很吸引用户的注意力,所以在设计插画时应当用心一些。
  • 广告推广型启动页:恰饭启动页,无非就是弹广告了,这样的启动页在设计时和节日氛围型差不太多,细节之处其实在于没多少用户愿意看广告,所以最好给个倒计时提示或能点击跳过(恶心心做法:跳过按钮做成跳转按钮,参照几年前的某app)

设计启动页的注意事项:

  • 避免过度设计,不能画的太花里胡哨,做到简洁耐看就足够了。
  • 避免高频率改动,启动页往往可以代表产品的第一印象,频繁更换会造成心理感觉等待时间加长,如果像QQ,微信那样长时间不换的,用户甚至有时候回感受不到启动页的存在,这只是心理感受,并不代表实际时间一定变短了。
打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信