首页

关于表单中存在编辑表格的情况

分享达人

需求:供应链系统,销售价目表需要添加价目明细。


问题:思考【添加】【删除】按钮放置位置及交互方式


思考过程

 

方案一:

这是系统已有页面。【添加】【删除】按钮固定于表格右上角。

适用于数据1~10条的情况。


方案二:以【轻流】举例

【添加】【删除】按钮固定于表格左上角。

表格中有勾选框,支持【批量删除】【部分删除】


同时在表格右侧固定【添加】按钮。


当鼠标位于序列号时,出现【弹框填写信息】按钮。


弹框页面支持上下数据切换。




方案三:

【添加】按钮位于表格下方左侧,不固定。【删除】按钮位于表格右侧,固定。

适用于数据10~100条的情况。


优点:相较于【方案一】,缩短了操作路径。

缺点:不适用于表格存在分页的情况。需要每个页面存在【添加】按钮。

          不适用于表格存在横向滚动条的情况。


方案四:以【简道云】举例

【添加】按钮位于表格外下方左侧,固定。


当鼠标位于表头左上角时,出现【切换】按钮,表格会单独在一个页面打开。


当鼠标位于序号时,出现表格【切换】按钮和【更多】按钮。


点击【切换】按钮,出现【弹框填写信息】。


点击【更多】按钮,出现【删除】和【复制到最后一行的】按钮。


总结:对于在表格中编辑的样式,基于业务场景,目前都是弱化删除按钮。我更倾向于选择【轻流】的方案。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:木丁西dwj

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



构建视觉层次的4个技巧

分享达人

设计行业每天发生着翻天覆地的变化,随着专业的发展,我们也在不断的学习新的技巧和趋势,但同时我们也要明白,设计中那些基础的UI准则,才是好的趋势和风格建立的基础。今天我们就一起来聊聊做好设计最重要的能力之一:区分视觉层次。


什么是视觉层次

视觉层次你可以理解为,通过将界面元素进行设计上的区分,引导用户的注意力,并使用户的注意力始终集中在页面的关键地方。但是今天没有一个方法可以一直控制用户注意力,就像我们今天做设计一样,不同的产品要用不同的设计手法去设计,才能达到帮助用户分清主次的作用。 

视觉层次不仅仅包含文字有关,它还包含我们的图片,视频按钮以及文字以外的视觉元素。所以当你设计一个网页时候,除了网站整体的颜色,排版,图片也能够影响视觉层次。那么如何让设计的层次更清晰,常用方法有哪些,今天我们一起来聊聊关于设计层次,希望可以帮助到你。


运用尺寸大小建立层次

大小是建立视觉层次非常重要的方式,这里的大小不仅仅是文字,还包括图形,插画,图片等等。 作为设计师我们必须了解屏幕上每个元素的优先级,根据优先级来判断它的使用大小。

当我们谈到尺寸的时候,相信很多设计师有过被要求各种元素放大的经历,确实大的元素能更好的吸引用户。 但是当元素越大,其实设计的复杂性也越高,所以在设计时候需要更注意整体节奏,把握好一个度。 

如上图插画的比重很大,在设计这种大的元素时,你的每个元素比例和细节处理都被同时放大了,我们可以看见这副插画四周还运用了很多元素,让页面达到平衡,同时这个画面和旁边的文字场景也很好融合在一起。一个好的设计一定是通过视觉手段让用户理解信息更加准确,在看完页面文字和图片后,很自然的引导到底部的按钮,这才能算是一个很引人注目的设计。


运用色彩建立层次

颜色在视觉层次中扮演着非常重要的角色, 设计师可以通过颜色来传递信息内容,同时也可以引导页面内容,色彩在心理学中有着很重要的作用,比如黑金给人尊贵感VIP感,糖果色给人小清新,甜蜜的感觉;红色能吸引人注意等等。用户在视觉情感上和颜色很容易联系在一起, 作为设计师我们需要对不同的色调,不同色彩进行细致的组合搭配,以掌握对色彩的了解。

Zenly:国外知名产品,在引导页面设计时候运用红色按钮吸引用户注意,在App主页面里面,通过深蓝色强调选中效果以及Tab. 

Netfix:知名的电影软件Netfix在设计中,充分运用色彩去增强层次,无论是在引导页按钮设计,还是在页面核心行动点,以及Tab切换等地方,都通过显眼的主色来引导用户操作,让页面的行为路径更加顺畅。 

Tiktok:抖音海外版本设计,整体UI部分非常简单,页面还是一如既往突出内容为主,所以在整个设计上就通过色彩来强调页面优先级,比如拍摄,分享,选择这些核心操作都通过色彩来引导完成任务。 


运用文字大小字重建立层次

丝芙兰App的设计,在引导页采用一个衬线体非常有品位,通过字体大小,和字重对比,再配合美妆护肤的行业属性,页面非常的简洁大气,有对比有细节。 

无论是产品介绍,还是详情页,丝芙兰设计都是采用字重和字体大小对比,来打造层次,字重和大小,也是设计师常用建立层级的方式。 

除了字重以外,还可以字体透明度来增加层级,一般是黑色搭配灰色使用,再加上字体大小和字重整个页面层次会更加清晰。如上图韩国APP页面,标题是黑色,辅助说明文字字号小4号,同时颜色改为浅灰色,这样设计页面层次增强了很多。 

很多设计师在做界面时候,喜欢字体就一个颜色用到底,这样会显得界面粗糙,也没有层次感。但是运用好我上面说的字体大小,颜色、字重等对比其实节奏很容易就能做出来。 

运用视觉重量建立层次

比如aaptiv这个产品的功能页面设计,就是运用了视觉重量的对比,线框按钮最弱,其次是黑色选中效果,最重的功能引导按钮, 视觉 重量的对比能很好让用户关注到功能内容。

如上图,选中的黑色视觉重量最重,其次是蓝色选中效果,最后是未选中的黑色,视觉重量几乎我们每一个页面中都会使用到。 

headspace这款产品我非常喜欢,将情感化用到了极致,在页面很多细节地方运用了不同的小橙人在背景上,视觉重量有轻有重,通过不同视觉重量来表达页面内容,非常巧妙。 

在列表的表达上,不同视觉重量感受是不一样的,比如左边的视觉重量更轻一点,用户关注图形同时也去关注文字内容,右边这个视觉更重,更加引导用户去点击功能模块内容。 

设计师熟悉的medium官方App设计,在正文阅读时,同样采用不同的视觉重点来突出重要信息,比如左边通过字重以及文字背景绿色底色和正文对比,非常醒目。右侧通过浅绿色作为背景强调突出。

同样在一些重要位置,Medium也是运用视觉重量处理,如左图通过顶部提示条提示可以通过语音播放,在右侧付费文章通过行动按钮引导用户升级付费。

文章来源:站酷   作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


分享3个方法,打开全球视野

分享达人

设计如果要做好,除了提升审美还有一个非常重要的点就是多看、多使用好的产品,特别是一些全球顶级大公司的产品一定要去体验,很多国内设计师受限于各种原因,无法下载国外App,没关系,今天分享一个我经常使用的工具网站,让你也能不出国门打开全球设计眼界。

设计师要拓宽眼界

我相信很多朋友在面试时候都会被问到,你常用的产品有哪些?一般问这个问题,其实面试官在考察3个方面: 

第一:你对于互联网好产品的关注度。

第二:你是否有足够好奇心去研究体验产品

第三:你的审美,美感如何?

因此作为一个设计师,必须不断去把玩使用各种APP才能让眼界打开。如果说Pin是去构建设计灵感库,那么每个人还需要有一个App图书馆,当你设计灵感枯竭时候;可以去尝试体验更多好的产品提升自己眼界,今天就分享几个小方法帮你打开全球视野。


第一个神器

https://mobbin.design/ 这个网站是我私藏多年的一个宝藏网站,里面几乎包括了目前国外最优秀的一些APP,而且不用你去商店下载就可以看见里面全部界面流程。有的APP你还得需要各种账号才可以去看见完整页面,这个网站很全,你点击进去,它把全部页面模块都已经截图好了,非常方便。 

比如我今天想看twitter某个动态卡片如何设计的,按照一般做法,我可能需要科学上网,甚至有的还需要去注册美区账号。但是在这个网站里,直接搜索就可以看见twitter的全部设计,包括各个场景截图。 

APP的全部页面状态,以及里面各种场景,按照用户的体验流程一一的截图展示。

点击后可以查看大图模式,点击旁边的列表标签,能够搜索很多列表的效果图。

点击标签后全网所有关于列表相关的设计截图,都给你找出来了,然后 你就可以找到你想要的图片,顺藤摸瓜,找到更多的APP。

同时你如果要下载到手机,点击头像即可跳到对应的APP下载页面,非常方便! 

同时搜索功能也支持很多的APP查询,比如我想看看google news的界面设计,直接搜索即可找到。 

就能查询到Google news的全部页面设计和细节,非常方便。大家可以多去这个网站试试,你会发现很多惊喜。 

第二个工具:Senstower

除了上面那个网站,还有另外一个神器工具:https://sensortower-china.com/它可以看见全球的APP排行榜,最神奇地方是可以看见各个产品的用户数,以及盈利情况。让我们可以更好的了解商业。 

详情页可以看见这个公司旗下全部产品,以及公下载用户量,每月赚的钱。非常的厉害,这个工具适合很多初创公司,当你不知道做什么项目时,可以去上面看看其他国家一些产品,找找灵感,那设计上我们又可以学什么呢? 

比如我很喜欢的一家韩国公司Nvaer,相当于中国的阿里腾讯,点击搜索后,你能很完整的看到这个公司的全部app,非常全。 

点击进去可以看见下载数。以及公司的盈利情况,以及用户对于这个产品的全部评价。 

当然也有屏幕截图,比如你是做直播的产品,那么就可以去看看这个产品的页面,做为设计参考。同样的支持APP商店下载,可以跳转到对应的APP的链接。 

经常做设计没有灵感,但是我们找竞品只能看到国内的,那么这个软件你搜索后可以 查询全球的所有APP,比如我做音乐软件,那么我搜索music出来的关键词就是全球的音乐软件排行榜。非常强大! 

同时你可以通过类别选择产品类型,是娱乐的还是音乐,以及那个国家的?他能帮我们的眼界放眼到全球,如果说上面那个工具,帮我们收集优秀截图,那么 这个网站帮我们了解很多商业思维,用户评价,以及这个公司矩阵产品。

第三个工具:producthunt

这个网站是我的最爱,所以放到最后分享,它是一个优秀产品的分享网站,https://www.producthunt.com/ ,里面基本都是一些优秀创业公司的最新产品,免费开放给所有人体验,包括产品,设计,工具,以及各种新奇好玩的趣味工具。 

比如这个网站,是谷歌的一个最新产品「谷歌照片」,你可以像故事一样发布你的照片,非常好玩。 

比如这个产品,设计师提供了几百个3D的图标网站可以供大家下载体验,全部免费。 

一键扣除背景图片和视频的工具,非常的棒,这些产品都是全球一些顶级的开发者设计出来的,给大家免费使用和评测的。我经常能在里面发现很多宝藏,也一起分享给大家!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

移动端响应式设计的高效方法

雪涛

以前,设计师们都需要去跟开发沟通并手动标注所有文件,现在,有了像 Zeplin 和 Abstract 这样实用的标注工具,设计师几乎不需要花太多的时间在对接上。

但是,还是避免不了很多东西会在对接过程中出现问题。比如,这个按钮是固定大小的还是弹性大小?是保持底部边距固定还是在一个较大的对象内居中?让我们来看下约束布局在对接过程中的使用方法。

约束布局是定义控制应用中内容的规则。这些规则通过使用统一的元素和间距,保持跨平台、跨环境和跨屏幕大小的一致性。通常应用在 iOS 和 Android 中。

彩云注:这里想跟大家科普下相对布局和约束布局的区别。相对布局是通过相对定位的方式让控件出现在布局任意位置,相对布局因为逻辑原因,层级较多;而约束布局能够有效解决布局过多问题,让页面更加扁平化,布局之间相对位置也更好控制。约束布局也是继相对布局后,谷歌官方针对相对布局问题给出的一个更优解决方案,意在将来替代掉相对布局。当然,这里不再过多阐述,感兴趣的可以自行去了解下,可能偏开发方面会更多一些。

约束条件

如果在 sketch 文件中已经设计布局好了所有元素,就可以开始了!

1. 基础单位

Lyft设计总监:移动端响应式设计的高效方法

8×8

首先从定义基本单位开始,每个度量值都是其倍数。我建议使用偶数 8 来调整大小和间距,因为这样可以方便且一致地适配各种设备。

  • 8 更容易整除!10/4=2.5 vs 8/4=2
  • 大多数流行的屏幕尺寸都可以被 8 整除,这样更容易适配(与 6 或 10 相比)
  • 分辨率为 1.5 倍的设备很难清晰地显示像素为奇数的,若按 1.5 倍缩放 5 个像素就会导致半像素偏移。

在 Sketch 中选择首选项>画布,将“通过 Shift+方向键调整移动对象中的 10px 改成 8px”,这样会解决很多问题!

2. 间隔单位

间隔单位是常用间距的视觉表达。例如,一个“2 间隔单元”是 16 pt/dp,因为 2×8=16。这些符号应该在设计中使用,别名应该被标注成代码,以便在和开发对接时使用相同的语言。

Lyft设计总监:移动端响应式设计的高效方法

垂直和水平间隔

在项目很赶的时候,你可能没有足够的时间手动做到完美像素对齐。通过使用这些通用单位来标识,而不是标注工具自动生成的标注像素,它可以告诉开发实际间距。数字别名与“Shift +方向键”移动对象的次数相匹配。

Lyft设计总监:移动端响应式设计的高效方法

响应式按钮:iPhone8、三星 Galaxy S8、iPhoneSE

间隔大小永远不会改变。如果是水平间隔,则垂直高度被锁定,反之亦然。这意味着在不同的手机宽度上,组件的尺寸会发生变化,但用于创建它的边距的间距将保持不变。

对齐指标

有时元素在间隔之间对齐。间隔之间对齐的主要方法是中心对齐和底部对齐。

Lyft设计总监:移动端响应式设计的高效方法

垂直居、中水平居中和居中对齐

中心对齐是指你想要一个对象或一组对象向中间集中对齐。对象可以水平居中,垂直居中,或者向中间集中对齐。

Lyft设计总监:移动端响应式设计的高效方法

底部对齐

底部对齐是指希望对象与其中一个对象的底部对齐。当有两种不同的文本大小并且想要在基线处对齐时,底部对齐就是比较常见使用方法。

1. 点击对象

Lyft设计总监:移动端响应式设计的高效方法

48 x 48

在手机上,最小点击对象尺寸为 48x48dp /pt。这尺寸来自于谷歌设计指南,物理尺寸约等于 12 英寸。(HIG 建议使用 44x44pt,所以我选择更大的)。将元素放在一起时考虑点击对象大小。你也可以使用点击对象符号来表示元素的哪些部分是可点击的。

组件布局

让我们通过一些组件示例切换来测试所有约束的使用:

Lyft设计总监:移动端响应式设计的高效方法

组件示例:列表项、按钮和复选框

2. 基本尺寸

组件的基本尺寸,它的最小高度和宽度,应该基于最小点击对象的尺寸。视觉上小于点击对象的组件仍应由相同的最小点击对象大小触发。这意味着,如果用户在复选框之外触摸了一点,也会承认他们点击了复选框。

Lyft设计总监:移动端响应式设计的高效方法

组件相对于最小点击对象的视觉尺寸:精确、高于和低于。

3. 内边距

使用间隔表示组件内的边距。

Lyft设计总监:移动端响应式设计的高效方法

长字符串的水平边距

你可以通过设置水平边距来限制元素的水平位置,比如文本框。当文本太长时,你需要指出文本是否应该调整大小、换行和/或截断。换行到两行比截断一行更好!

Lyft设计总监:移动端响应式设计的高效方法

动态类型的水平和垂直边距

垂直填充最常用于动态适配。尽管组件在当前手机尺寸、当前语言和当前字体大小下看起来可能很好——但所有这些因素都是最坏情况下的变量。当类型增加时,组件将变得比它的基本大小更大,并且你希望确保它仍然有垂直填充。

4. 基线对齐

使用居中和基线标记来示意,如何让那些没有接触到所有边的间隔元素表现出来。这部分主要是方便给开发理解的。

Lyft设计总监:移动端响应式设计的高效方法

垂直居中的列表项文本、底部对齐的价格和居中的复选框

界面布局

现在你已经布局好了一个页面,使用与在组件中相同的方式使用间隔、点击目标和对齐符号。

Lyft设计总监:移动端响应式设计的高效方法

插图来源于 Meg

……瞧!这就是移动端的响应式布局!

提示:为你在界面布局中引用的组件创建单独的 symbol 画板。在组件中,将所有组件规范包含在一个文件夹中,该文件夹可以轻松打开和关闭。没有什么比同时标记组件和界面布局更好了。

总结

即使是一个精心制作的交接文件也不能取代你与开发之间良好的语言交流。这应该与开始、移交和书面文档一起使用。你越让开发了解你的设计,还原的结果就越接近实际发布的产品。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设  作者:彩云译设计

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


这样做设计,可太香了~

seo达人



今天我将告诉大家一个更加简单高效的技巧去定义一个色板。在星球里还有很多这样的文章,无论是现有的500+精华文章,还是每天100+设计干货,我们坚信相信水滴石穿的力量。请看今天的分享,Enjoy it。

图片

a

一套界面需要哪些颜色?

图片

说到色板,我们得首先弄清楚一套APP需要哪几种色彩,我们从airbnb的色板中,以及很多很多产品中大概可以得出一个公式:品牌色 + 提醒类型颜色(成功,错误,警告)+ 中性黑白灰颜色(各种字体,背景,分割线颜色等)

图片

在定义了上述大的色彩原理下,我们需要对界面中使用场景进行梳理得出下列大概色彩类型。

图片

a

如何去做呢?

重点来了,那我们如何去做呢?首先,我们先创建3个方块,这些方块后面会成为基础颜色!这里我设置的是被3整除的高度和宽度,我创建了一个300X300的正方形:

图片

接着我们填充3个颜色,红,绿,蓝,为什么是红,蓝绿,因为在色彩体系里面,这三种颜色属于色光三原色(色光三原色为:红、绿、蓝。光线会越加越亮)

红,绿,蓝怎么定义,大家可以从自己品牌色里面去定一个,然后可以根据HSB的方法去得出同色温下面的绿和蓝!

图片

h值(色相)以15,S和B不变,递增得到基于品牌色的24个色带,有人可能会问为什么是24个?因为24X15=360刚好围绕色环盘一圈。

图片

所以我们得到一圈基于品牌色,明度和饱和度一致性的颜色!

图片

你也可以依据https://coolors.co/去生成一套蓝色或者绿色

第二步

第二步,将这三个方块横向等分,因为每个方块300X300,所以除以3就是100PX

图片

图片

图片

将一个矩形与画板顶部对齐,然后填充微白色,将第二个矩形与画板底部对齐,填充微黑色,然后将顶部的白色,和黑色透明度调整微20,这样我们就过得到,三种不同的红色,绿色,和蓝色。

第三步

第三步,我们需要定义垂直等分的区间,我们需要画2个矩形,这2个矩形的宽度刚好是300X300的三分之一也就是100X100,将他们和正方形的右侧对齐。

图片

现在到了这篇文章的核心,就是我们需要将这个颜色改为黄色,很多人可能会好奇,为什么是黄色,因为黄色是色彩的三原色之一(可以参考上面我们通过HSB得出黄色)

图片

图片

调整黄色的模式改为叠加,将其中一个透明度降低为40%,另外一个降低为80%,然后将他们复制到绿色和蓝色的画布上,借助叠加模式,我们得到了明亮和鲜艳的颜色。

第四步

这样我们就快速的得出了一套色彩体系,然后根据我们的需求选取一部分颜色成为这个色盘体系:

图片

图片

然后添加到我们的整个色盘里面去,同理我们可以得出黑白灰色颜色,比如我们的颜色最黑是#333333

图片

顶部20%白色,底部80%黑色得出

图片

图片

纵向叠加40%白色,80%白色得出

图片

得出文字3个梯度颜色

生成最终色板

图片

通过上面的步骤就可以得出整个色板

注意

色彩感觉不好的同学,如果没有品牌色,或者品牌色搭配出来不太和谐,强烈推荐大家使用这个网站进行配色。

图片

他是基于设计师人工智能匹配出来的颜色,都比较和谐,使用起来的,我们随便试试。

图片

在这个网站上输入一个红色,锁定,然后按空格随机生成颜色,最终确定,蓝色,绿色黄色,制作出色盘。

图片

得出色盘

关于色彩系统构建的方法就是这样,不知道大家掌握没有,希望大家在做设计时候,色彩运用更加科学,一定要自己动手试试!

 

原文地址:我们的设计日记(公众号)

作者:sky


 

转载请注明:学UI网》这样做设计,可太香了~

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

                                                            微信图片_20210513163802.png

 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

细微之处见真章-逐帧分析方法的产生与应用

分享达人

逐帧分析方法是一种针对动态的、短暂的过程对象进行对比分析的方法。该方法可帮助设计师以微观视角完成差异分析并得出相应结论。与传统的静态截图、动态录屏方法相比,其优势是可以看到过程的全貌,对动态细节一览无余,具有较高的分析可控性。


背景


逐帧分析方法的产生源于一次针对加载场景的体验调研项目。百度百科对于加载的定义是:所有软件要运行必须加载到内存,加载就是把需要的文件及信息读取到内存里。简单说来,所有从服务器读取信息并显示在手机屏幕上的过程都属于加载。以百度APP举例,加载的典型场景有:启动、打开FEED落地页、打开搜索落地页等。这些场景都有一个共同的特点是:动态的过程,且过程较为短暂。


基于以上特点,运用对比分析里最常见的静态截图或动态录屏方法,是无法完成分析的。原因是,静态截图对于一个动态过程来说,无法看到过程的全貌,可对比点较少,分析要素不可控(一张静态截图中,无法做到涵盖所有分析元素)。而采用动态录屏的方法进行分析时,问题也同样明显:过程太快,无法看清细节;不同视频节奏不同,对比起来比较困难。因此针对加载这种特殊的场景,就需要采用一种全新的方法既能看到过程全貌,又可以对细节一览无余。





方法的产生


小时候我们都玩过跑马灯的游戏,即一系列静态图片通过快速轮转,由于视觉滞留效应,便可看到一段动态影像。如果把产生动画的过程翻转过来,也就是说如果可以把一段动态影像拆成一系列序列帧,那么是否可以更好的完成影像观察?


以百度APP打开小视频落地页的加载场景为例,当我尝试将这段300ms的过程录屏拆分为18张序列帧后发现,除了可以清楚的看到过程全貌外,对于过程中的所有细节也可以一览无余。同时,序列帧可以进行任意拆分,以便完成多角度观察。




到此为止,逐帧分析方法的雏形已经产生。在之后的章节,我将为大家具体介绍如何完成序列帧分析以及如何导出序列帧。




如何进行逐帧分析


面对一系列序列帧,我们可以通过“序列帧三要素”来导出关键数据及结论。

 

要素1:序列帧全流程


首先,我们进行序列帧观察的时候,需要明确定义目标对象的起点与终点。由于逐帧对比方法适用的观察对象均为短暂的动态过程,明确定义全流程的起点与终点是为了让观察过程和结论更加精准。


以百度APP打开搜索落地页为例,起点与终点分别是:点击搜索结果手指松开的第一帧与搜索落地页首屏内容全部加载完成的最后一帧(可以通过观察前后帧是否有变化得出结论)。这一要素中,可以采集到的关键数据为时长,时长可以帮助我们观察加载性能的好坏,甚至在进行竞品对比的时候,快速找出与竞品在时长方面的差异从而得出优化建议。结论输出时,需要将帧数转换成为时间单位(如何将帧数转化成时间会在后续文章中为大家讲解)。



要素2:序列帧子流程


在前文中提到,逐帧分析法的一个优势是,逐帧序列可以进行任意拆分,以便完成多角度分析。在分析的第2要素中,我们可以最大限度拆分子流程,同时需要明确每一个子流程的起点与终点。这一要素的分析中,可以采集到的关键数据为子流程时长,缺失或多出的子流程,以及子流程内部的差异。


例如在百度APP Android端热启动过程中,全流程被拆分为:启动至全屏、持续白屏态、内容加载3个子流程。通过换算,可以看到每个子流程的时长。并且在和竞品的对比中发现,百度APP缺失了持续白屏态这个子流程。而在启动至全屏的子流程中,百度APP因为没有添加过渡动画,与多数竞品是有差异的。


要素3:用户体验节点


用户体验节点的对比是逐帧分析法的第三要素,这一要素进一步深入到过程的微观视角,使得分析结论更为全面。而用户体验节点是逐帧分析法所提出的一个全新概念,其定义是:产品界面上任何一次用户可感知的变化,都叫做用户体验节点。以百度APP Android打开搜索结果页为例,整个过程的用户体验结点有5个。通过用户体验节点可以采集到的关键数据有:用户体验节点的数量以及用户体验节点的顺序。



我们以Android打开搜索落地页为例为大家进一步讲解如何完成用户体验节点数量的分析。通过对比发现,百度APP在整个加载过程中的用户体验节点数量多于竞品,多出的节点为:白屏节点、文字加载节点。虽然百度APP加载时长与竞品相差无几,但是由于节点数量较多,导致用户在等待过程中经历了过多的页面状态变化,形成了较强的视觉闪跳感,从而引发用户感知层面的错觉,认为百度的加载时长较长。因此我们可以通过减少非必要的用户体验节点,从而提升加载场景的流畅感。但是,用户体验节点的数量并非越少越好,这还要根据实际业务与优化方向来输出具体结论。



用户体验节点顺序的分析,可以参考百度APP iOS FEED打开图文落地页的示例。在这一示例中,百度APP图文落地页内容加载节点位于框架转场节点之后。但是对比竞品发现,多数竞品在这个过程中,内容加载是先于框架转场的,而这种节点顺序的优势是,转场完成后,用户即可开始浏览内容,整体感知较为流畅。这种导致阅读流畅感体验差异的原因很难通过肉眼或常规竞品对比法观察得出,由此可见逐帧分析方法针对特殊场景的分析优势非常明显。





序列帧三要素总结

 

在此,我们回顾一下逐帧分析方法的“序列帧三要素”。


要素1:序列帧全流程,可采集的关键数据有:全流程时长。


要素2:序列帧子流程,可采集的关键数据有:子流程时长、子流程是否缺失、子流程内部的差异。


要素3:用户体验节点,可采集的关键数据有:用户体验节点的数量与顺序。




如何导出逐帧序列


工欲善其事,必先利其器。进行逐帧分析前,我们首先要将录制好的视频转化成序列帧。以下章节将为大家讲解如何导出逐帧序列。


整个过程可分为:录制、创建合成、输出3个环节。


1.录制


由于系统特性,iOS和Android手机双端建议采用不同的录制手段。iOS手机可直接通过数据线连接到电脑,并使用电脑的QuickTime进行录制。这样的好处是保证了录屏的帧数基本稳定在60FPS(每秒传输帧数);Android手机建议采用机内功能或其他录屏应用完成录制,但是安卓中低端手机很容易出现掉帧的现象,因此就需要我们在合成和输出阶段制定一个合理的输出帧数,让分析的结果更加接近真实。另外,建议录制的起始点适当延长,这样便于素材在合成阶段精准切割。


这里要为大家讲解一下如何将帧数换算成时长。以iOS的输出帧数为例,换算公式为:iOS时长= N(帧数) x 16.6ms。例如:在iOS打开图文落地页的加载过程中,百度APP总时长为:73(帧数)x16.6ms= 1217ms(约等于)。



2.创建合成


创建合成阶段所使用的工具是AE。AE的好处是:

1.方便查看原视频帧速率,对不稳定的帧速率进行统一处理;

2.可以将视频转换为图片序列,便于后续的逐帧分析;

3.AE也可以将多个视频进行同步播放来进行对比验证。



第一步:打开AE>合成>新建合成。


这一步的目的是通过合成设置,统一帧速率。通过一系列实验,我在新建合成时,将iOS录屏的帧速率设置为60帧/秒,Android录屏的帧速率设置为30帧/秒,这样可以保证最大化的减少空白帧,使分析结果更加准确。



第二步:导入录屏




第三步:截取起止点关键帧。


在进行素材处理的时候,需要精确到每一帧,由于逐帧分析所针对场景的时长极为短暂,很可能由于一帧的差距,导致分析结果相差甚远。


以百度APP iOS端热启动过程为例,我们将录屏中手指抬起的前一帧(即icon显示出点击态)做为起点,将APP启动后填满手机屏幕的第一帧(可通过观察法,在AE中查看前后帧是否有变化)做为终点完成素材处理。


3.输出

        

输出的路径为:菜单栏 文件>导出>添加到渲染队列,在渲染队列中找到待渲染视频,再在 输出模块>格式选择JPEG或PNG以序列导出。这一步的目的是,将一段视频文件拆分成可提取对比的逐帧画面。


最终导出的序列帧如下:


在完成分析对象序列帧导出工作后,便可开始进行逐帧分析了。



结语


逐帧分析法是在实际项目中总结并提炼出的一种全新的分析方法。该方法对于短暂的、动态的过程非常适用,可以帮助我们从微观视角发现问题、验证问题、得出优化结论,极大的提升了分析效率和精准度。逐帧分析法也在后续的多个项目中也得到了推广和验证,希望可以帮助到大家。

文章来源:站酷   作者:MEUX

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

交互设计方法论

前端达人

通过对产品用户界面的分析与设计方法论相关联,梳理了在UI UE日常设计中使用的一些定律和原则;相信大家在工作过程中都遇到过这类灵魂拷问“你这么设计的依据是什么? 为什么这么设计”,熟悉了这些定律、原则 我们就能自如的去应对这些拷问,也能够非常快的去熟悉市面上的一些主流设计规范。



转自:站酷

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

为什么你做的设计总是不耐看?

雪涛

不知道大家有没有这样的情况发生,自己设计的作品,“乍一看不怎么样,仔细一看,还不如乍一看”!

其实不耐看,或者不敢放大看的原因都是细节做的不到位。

最近在做手机OS的主题图标,对细节的感触很大,今天结合主题图标来和大家聊聊,我们可以从哪些方面注意自己的设计细节,大纲如下:

  • 给造型加点细节
  • 多加点质感的细节
  • 不要让图标看着灰灰的
  • 风格特点的运用

1. 给造型加点细节

造型是所有设计执行的第一步,造型做不好,说别的都没用。

那如何能给造型加点细节呢?

打个比方,我们要画一个圆角矩形:

哟哟哟!学会点线面,排版好方便!

雪涛

每个设计师多少都有一点强迫症,有时候会为一个像素的间距而纠结,有时候又会割舍不下自己做的元素,满屏的信息都想突出,导致画面混乱。设计师培养自己对画面的全局观是很重要的,所以我们的脑子里时刻都需要有一把“尺子”在,这把尺子,就是“点线面”。在使用这把“尺子”的时候,抛开那些装饰和颜色还有材质,将画面抽象成点线面来把控你的设计,也许会有不一样的启发和看到画面不和谐的原因所在。

设计师对版面的全局观,就是“点线面”的处理。“点线面”是所有视觉画面的基本结构,点线面可以把不同的部分或者元素组合成一个整体,进而打造一个视觉舒适平衡的版面。


这5个牢不可破的设计规则,是你打造优秀动效的标准

雪涛

转场动效在UI界面中所起到的作用无疑是显著的。相比于静态的界面,动态的转场动效更符合人类的自然认知体系,有效地降低了用户的认知负载,屏幕上元素的变化过程,前后界面的变化逻辑,以及层次结构之间的变化关系,都在动效的加持之下,变得更加清晰自然。从这个角度上来说,动效不仅是界面的重要支持元素,也是用户交互的基础。

动效设计,尤其是协助交互的转场动效,如今日趋成熟。通过大量的案例分析和过来人的经验,我们逐步总结出优秀转场动效的5个核心的规则,今天的文章,我们就来分享这5个知识点。


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档