首页

3D与UI结合的设计探索

纯纯

关于 Big Sur 的新图标的讨论很多,很多都在激烈争论。人们对苹果公司没有将完全扁平设计引入 Mac 感到松了一口气,但分歧并未停止。有些人认为这引领一种新的图标表现方式,而有些人则认为这是丑到了天际。



但苹果的设计就是这样,不管你你喜不喜欢,过一段时间他总会流行起来。就像iPhone11刚面世时,背面的摄像头组被无数人吐槽一样,而现在这个设计已经成了高端机的标板。


大家还能想起来UI扁平化设计已经流行了多少年了吗?

从2013年6月11日苹果发布iOS7算起,现在已经将近8年了,这8年时间扁平化像飓风一般席卷了整个UI设计圈,一夜间几乎所有的APP UI都被拍扁了。




其中以Instagram的换标作为扁平盛行时代的里程碑



但扁平化设计的确已经一统江湖太久了,人们似乎已经有点厌倦了。其实设计风格就是这样,并没有绝对的好与不好,只要审美不疲劳,就可以继续流行下去,至于流行多久我们经常会用一个词去形容---耐看度。

扁平化带给我们的是画面的轻盈和设计的高效率,但是缺点也是明显的,场景表现过于单一的问题,设计感体现较为有限,于是很多设计师都在尝试用新的设计风格替代或者进化现在的扁平化设计风格,今天我们就来探讨一下新拟物背景下3D与平面的结合设计,能在UI中擦出什么样的火花。


2014年我的作品-Cache 

https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html


现在这样的风格会被我们称之为重度拟物风格,他不好看了?技术落后了吗?当然不是!只是目前不流行了!

他的特点是强调光影对比与物理质感,色彩都会比较偏“暗”,而且伴随设计的往往是难和慢!刻画一个细节需要很久,在强调设计效率组件化的今天,这种费时又难学的设计方法必然不会成为主流。


当前的UI流行趋势是强调高饱和的色彩搭配(在没有光影细节之下也只有色彩可以玩了),这种风格明显也不符合趋势,被“淘汰”也就难免了。


从设计角度上解析,图标主要是由四方面构成:构图+光影+色彩+纹理

而拟物风格图标在这四方面更加强调构图、光影和纹理,而色彩则是更多去搭配纹理质感,所以你看到多数拟物风格图标在质感上很棒,但是色彩却没有那么丰富。




说到新的拟物风格,这只是一个概念,也有称之为轻拟物,轻偏平,这里并没有通用的称呼和预设的设计方法,一切的UI设计风格都是为产品本身服务,如果新的设计风格能让产品整体体验得到“提升”,哪怕这种提升只是成功获取到了用户的注意力,那这个设计就是有价值的。



所以当下如果你的产品中想要吸引目光就要有点与众不同的东西,要么是独门的功能,要么就是吸晴的设计。
显然扁平的彩色图标现在已经达不到这个效果了,而以前的拟物又显得有点过时,在这种时代背景下,新的风格必然就会被碰撞出来。


于是乎我们就会看到以下的一些大厂“创新”,你不止能看到轻拟物设计,还能看到“实物”设计......

不得不说,各位设计师们还真是拼了...


“哪怕这种提升只是成功获取到了用户的注意力,那这个设计就是有价值的。”没毛病!各位加油!


当然苹果BigSur带给我们的图标设计创新更加有趋势意义,这种3D+平面的设计组合方法更加能给我们一些设计启迪和思考,并且这种3D图标与之前的拟物风格有着明显的视觉区别

我用3D重构了一个计算器icon,以此为例来进行分解,如下:

与2D设计方法设计图标一致,都是先勾画图形(建模),然后填色、加材质和灯光,但不同的是在3D环境下,这一切都比2D环境下简单了,而且视觉效果更佳,整体画面感更佳立体,质感更加饱满,并且根据渲染器的参数调节和材质质感的不同,即使是在同一模型下,也能制造出很多种不同的视觉体验。



图标背板的选择上,由于选择了3D作为主体表现,3D背板过于抢视线,图标为了突出主体而非背景,建议使用2D平面背板与3D前景图标进行结合。

3D设计图标的确有一些天然的优势,特别是在质感和光感的表达准确度上,是绝对超过2D的。
但是2D图标在一些风格的设计也是很难替代的,比如线性图标和渐变风格图标。




3D设计的确可以提升UI整体的视觉氛围,并且现在在一些APP中已经可以看到小范围3D案例了(比如支付宝),但是多是以插画的形式出现,其实与产品UI还是有一定距离的。

未来3D设计一定会是UI中大展身手,但是目前的常见的3D设计软件实在是太庞大了,我与许多3D行业的同行聊天的时候,大家普遍的认知是现在的3D软件(包括C4D)的实际最佳场景依然是动画设计,UI的中的3D属于非常轻量级的,用现在主流的3D设计软件做UI应用案例,有点用巡航导弹打蚊子的感觉,而且这个蚊子还是距离一米以内。这有点像当年的PS来做UI,虽然可以完成但是效率不高,学习曲线也高,于是Sketch和Figma这样的产品顺理成章的取代了PS在UI界的地位。


当然趋势不可避免,效率也会提升,且方法总是有的,降低门槛,提升效率一直是我们的追求!

原文地址:站酷
作者:残酷de乐章

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



谈谈那些被误用的交互设计模式

博博

交互设计并不是一门简单的学科,很多经验不足的交互设计师都会犯一些这样那样的错误。
在Medium上看到了这篇文章,觉得不错,于是将其翻译了出来分享给大家阅读。
虽说是翻译,在某些地方也加了一点自己的话进去

如果你是一位经验丰富的设计师,你应该会同意这个观点:从他人的作品中获取到灵感并不算偷窃他人的作品。这是属于在对设计进行深入研究呀,这也属于一种设计模式呀,而且还遵守设计规范呢。所以,当然要以用户们所熟悉的那些模式来创造出可用性界面。


不过,有的设计师则会认为,过于遵守设计规范,而且,经常性的从他人的作品中获取灵感的话,自己本身的创造能力就会下降,这就导致了这样一个结果——一天下来,你的所有APP都长一个样。


从交互设计的角度看,我们会发现一个问题。什么问题呢?


习惯性的去应用一些所谓的最好的设计模式,可能会让你觉得Google,Facebook,Instagram或者说其他的一些你最喜欢的APP总是做的非常棒,你会觉得,他们的设计目标和你自己的设计目标并没啥差别,但是,人家成功了,而你的作品却失败了。所以,这里推荐一些被公认为是(至少曾经被公认为)最好的设计模式,可能在你第一次看来,这些设计模式也就那样。


1、隐藏导航


关于汉堡图标,已经有不下于50万的文章来争论它了。如果你一篇都未曾读过,试着去读一两篇吧。其实,简单说来,这些文章讨论的主题更主要的是这个图标里所隐含的那些导航,而不是这个图标自身。



上面图片这样的设计对于设计师来说其实是很有吸引力的,而且简直太方便了。根本不用担心屏幕大小的限制,只需要这样一个图标,然后,把所有的导航全部塞进这个可以上下滚动的东西里,然后,让他默认隐藏。就这样,就这么简单。


但是,实验证明,与完全隐藏导航相比,适当的展示出一些导航能够更多的增加用户的依赖度和满意程度,甚至为你带来更多的收入。所以说,现在的好多大公司的播放器都抛弃了以前的汉堡图标,将最常用的一些导航一直显示给了用户。




如果说你的导航比较复杂,那么,请在考虑优先级的基础上适当地隐藏导航。


2、图标,随处可见的图标


由于移动端的屏幕大小限制,许多无脑的设计师为了节省空间,在任何只要能够使用图标替换的文本域,都使用了图标。大家都这样想,象形文字或者图标占的空间又少,不需要额外的转换,而且,人们都很熟悉这些图标,难道不是这样吗?所以,每一个APP都这样做了。


设计师们将上面的那种假设放在脑海里,于是,有的时候,他们将实用性的功能蕴含在了图标里面,但事实上,那个图标是难以识别的。比如,你能猜到在下图的Instagram里的这个图标点击之后能够发送什么信息吗?



或者说,假如你从来没用过谷歌翻译,那么,你会期待下图的这个图标实现什么样的功能呢?



你总是假设你的用户们非常熟悉那些抽象的图标,或者说,你总以为用户们会花大量的时间去研究和学习你的这个图标的含义。这是一个很普遍性的错误,很多设计师都会犯这个错误。


Bloom.fm上让人觉得迷糊的标签栏


如果说你曾经设计过一个需要一个弹出框来解释从而提高可用性的图标,那么,即使你的用户们会不管怎么样都能了解它,你的这个做法也是错误的。




当然,并不是说你在设计中就一点都不使用图标。你的用户们熟悉大量的图标,这些图标中,有很大一部分都是能够代表普通的功能的,比如搜索,播放视频,邮件,设置等等。(但是,用户们可能不会很确定当他们点击一个心形图标的时候,会发生什么。)


一些能够被大多数用户所识别的图标并且被认为是通用的


对于复杂的和抽象的图标,在显示的时候,应该总是在旁边加上一个文本来进行说明。这样,你的图标才是真正有用的。同时,还能够提高菜单的可发现性,也能够为你的APP添加漂亮的触感和个性。


Pixelmator的导航


对于基本的功能,可以使用图标来展现;但是,对于复杂的功能,就需要使用文本来说明了。(如果你要使用图标的话,要时常性的做可用性测试)


3、基于手势的导航操作


当苹果公司在2007年发布了iPhone的时候,多指触控技术就成为了人们关注的主流技术,用户们发现他们不仅可以在屏幕上进行点击,还可以进行放大,缩小和左右轻扫。


手势在设计们的圈子中流行了起来,许多的APP都围绕着手势操作来进行设计。


Clear里的手势操作


就像隐藏的导航栏和使用图标代替文本一样,手势看起来似乎能够为设计师节约一些屏幕空间。(“屏幕上不应该有删除按钮的存在,人们只需要向左或者向右轻扫就可以进行删除了。我们会决定怎么操作的。”)


关于手势,你首先需要知道的是,手势是不可见的。人们需要记住它们,就像汉堡菜单的例子一样。如果你隐藏了一个选项,那么,用到那个选项的人就会越少。


另外,手势存在着与图标相同的问题:众所周知的手势有点击,放大,上下滚动,同时,每个APP也有那些需要慢慢发现和学习的手势。


不幸的是,触屏界面的设计仍然是一个新的领域,在各个APP中,大多数手势还不标准和统一。一个很简单的手势,比如左右轻扫,在各种各样的邮件APP中可能都会大相径庭。


在Apple的Mail APP中,向右轻扫,显示出了“标记为未读”的选项


同样的手势,在Mail Box中,就表示将邮件存档


或者说,想一想,摇晃你的手机,在两个APP中,也会有两种不同的含义。在iOS中表示撤销,在Google Maps中表示发送反馈信息。


永远都要记住,手势是隐藏的操作,人们不得不去记住它们。对于你的用户,这需要大量的努力。如果你是一个发起人,也许你可以让全世界的向右轻扫的含义都一样——但是,只有当它是你APP的概念设计里必不可少的一个部分的时候。


4、新手引导


新手引导,最近很火的一个话题,适用于用户第一次与APP打交道的时候。在很多情况下,这个简单的方式能够在一个透明的覆盖层上为用户展示一些标记来解释界面元素。


dcovery APP里的新手引导


为什么说这是一个很烂的解决方案呢?因为许多用户都会跳过你的介绍,他们想做的就是赶紧使用这个APP。即使他们注意到了你的这些标记,当他们把这个关掉的时候,这些所谓的教程也被他们忘得一干二净了(尤其是当屏幕上挤满了信息的时候)。最后说一句重要的,在你的屏幕上添加这些引导的标记,并不会提高APP的易用性,记住下面这句话:


原图翻译:用户界面就和讲笑话一样,如果这个笑话还需要解释才能明白的话,那么,这也不是一个好笑话。


对于你的用户来说,新手引导也许可以使用其他的方式来设计的更加有用。比如Slack这个APP,使用第一屏来创建一个用户场景。简单的介绍一下他们自己,着重于利益而不是屏幕上的功能。


留住你的第一批用户的一个更有效的方法就是逐步的引导。比如Duolingo,他没有向用户们解释这个APP是如何工作的,而是促使人们做一个指定语言的快速测试(甚至不需要登录),因为用户们可以在做测试的过程中了解到这个APP是如何使用的。同时,这也是展示这个APP的价值的一个更有影响力的方法。



记得住左右轻扫的手势在Apple的Mail APP里和在MailBox里的不同吗?看看他们的逐步引导是如何做的:用户们在开始使用APP之前,必须在APP所提供的一个练习场景里尝试使用这个APP里的每一个手势。



在你准备在一个半透明的覆盖层上设计你的引导标记的时候,停下来好好想想第一次使用你的APP的用户会有写什么样的经历。关注一下使用环境,通常情况下,有更好的方法来欢迎你的用户们。


5、充满了创造力,但是并不直观的空白状态


很多没有经验的设计师很容易忽略APP的空白状态。但是,从一个APP的整体用户体验上来说,这是一个很重要的方面。


有的时候,设计师们把错误信息和空白状态的界面当作一块展示他们创造力的画布。


比如下面这张Google Photo的空白状态界面:



第一眼看去,简直太棒了不是吗?一个漂亮的矢量图加上完全符合设计规范的布局。


但是,再看一下,就会觉得有写奇怪的东西了:


・这块屏幕里什么收藏也没有,但为什么这里会有一个那么显眼的搜索按钮呢?难道是想让用户在什么都没有的界面里搜索什么?


・第二个很显眼的元素就是这个矢量图,很明显不可以点击(虽说会有很多人去尝试点击)。


・屏幕上的提示说,我应该找到在顶部的那个超级不起眼的“+”标志。为什么这个提示自己不包含一个添加按钮呢?就像是在说“点击继续按钮来继续”


总而言之,上面这个空白屏幕没有能够帮助用户理解用户所在的这个环境:


・什么是收藏?他们为什么有用呢?


・为什么我什么都没有呢?


・我可以做些什么吗?(我应该做什么?)


当需要创造力时,越少有时会越有用。下面这个空白状态屏在可用性上就做的十分完美。(先让我们忽略那个“现在就点击下面这歌按钮吧”的引导提示)


在Lootsy里的空白状态屏


记住,空白状态(类似于网页里的404页面)并不只是美感和品牌特色。在可用性上,他们更为重要。要让空白状态更为直观。


多问多想


不要说我是错的:设计模式和最佳的实践仍然是你的好伙伴。但是要知道,APP和用户是不一样的:在一个APP里能够适用的方案,在你自己的APP里,也许就一点不适用。这不是一个通用方案就能解决的事情。另外,你永远不可能知道为什么一个APP会以某种方式来设计。


自己要多想想,多设计,多研究。


衡量,测试,验证——如果能够做得更好,就不要害怕打破设计规范。


作者: 郑小小莊

转载请注明:站酷

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

魏华的微信.png

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


交互设计的输出文档撰写方法 3年前发布

博博

这次给大家分交互输出文档怎么写,全文7000字,阅读时间10分钟

交互输出文档的作用

文档这个东西,我们又爱又恨,爱的是它能够记录并且在工作中让大家高效的协调合作,恨的就是很多人对文档嗤之以鼻非常敷衍,以至于文档不但没有起到它应有的作用,反而成为了一个不负责任的借口。所以一份合格或者优秀的交互输出文档对于一个项目的流转以及团队的配合来说是至关重要的。交互文档的主要利益相关者通常是以下几个角色:交互、产品、开发、UI


交互

首先优秀的交互文档必须在交互组内部进行过审核,包括一致的撰写标准和模式的使用,一个比较规范的交互设计组对于交互的撰写标准也是有严格的规范的,以及在什么情况使用什么交互模式还有组件库的调用都会有详细的说明,那么你的交互输出文档就必须满足团队设定的规范。


其次对于其他交互设计师来说,你的设计方案中是否会出现其他人负责的模块,那么在评审的时候需要同步,虽然交互输出文档对于其他交互来说不是直接受益人,但是在团队同步过程中也是非常重要的。


产品

每个公司对于文档的要求和规则不一样。小公司可能没有交互设计这个岗位,那么可能产品连prd文档也没有,仅仅只是一个简易的需求说明文档,就更不用说针对交互规则的说明文档了。


很多有完善规模和流程的团队不仅会有详细的需求说明文档也有很完善的交互说明文档。我们首先要明确的一点是那么多文档最后是给谁看的,一共在项目中会有多少文档产生。


通常产品经理会在项目初期做一份prd文档(Product-RequirementDocument,需求说明文档),这个prd文档主要是给业务方、交互和开发看的,在这个文档中需要包含一些业务规则以及交互规则,所以交互的输出文档是需要和产品的prd文档合并的。


当然如果你是一位很有自驱力的人,那么你可以自己推进需求并落地,一个人就可以完成prd文档的撰写和需求的落地了。


开发

特别想给各位提个醒,在开发需求评审的过程中,请一定记住你们评审的目的,开发同学也要注意,请把重点放在需求是否能实现以及开发相关的地方即可,请不要考虑为什么要这样做,或者你觉得应该怎么设计,一旦进入了开发对需求和设计的评头论足那么这个会议效率就相当低下。专业的事情就交给专业的人去做吧,可以私下讨论但不要在评审会上各抒己见。


交互输出文档对于开发的作用就是,开发可以更好的还原该功能中交互的跳转以及逻辑,所以我们尽量把交互规则写明白写详细,比如按钮在press和default时候是否样式会有变化,或者页面转场的方向,这都是一些细节,减少不必要的低效沟通。你会发现有些时候为什么开发总是来问一些规则,就是因为文档中没有描述准确,所以开发和交互都需要花时间去同步这个细节。



所以这个也非常考验交互设计师对需求文档撰写的功底,并不是图片文字随意摆放就可以的。和开发合作时也是一项内部的体验设计,你把文档写好了,开发看起来也舒服,满意度也高。如果是一堆文案,连基本的对齐都没做到的话,谁来看都会看不下去。


UI

交互输出文档对于UI来说,作用就非常简单了,但是这里也会碰到问题,那就是交互同学只需要把信息的层次表示出来即可,千万不要画到连视觉同学都没有发挥余地的程度。所以为什么现在UXD体验设计那么火,就是因为交互和UI其实重合度是很高的,只要有智能化组件库和工具做支撑,那么在交互和UI的设计流程中,时间就会大大降低。


交互输出文档的内容

在这里,我们就将整个prd文档的内容给大家分享一下,不仅仅是交互需要输出的部分。因为一个高阶的交互是需要能够独自产出prd文档的。然后不同的公司对与文档的要求也是不同,大家做参考即可。


一份基础的prd文档主要由这几部分组成(其实就是这个需求的来源以及推导过程和如何落地的说明):



1.项目概要

a.需求背景

这个是一个项目最重要的部分,可以说背景没有搞清楚,后面都可以不用做。这个指的就是我们做这个需求的价值和原因。比如我们app中业务方(运营)需要做一个扫一扫功能,那么这个功能首先我们就从业务价值和用户价值两个方面去评估,根据对业务方的沟通之后我们发现扫一扫功能将会在周年庆的时候通过物流包裹上的二维码,让用户进行扫码参与活动这样的玩法。



所以这个需求对于业务方来说是一个转化手段,通过扫码参与活动-领券-消费,确实是一个不错的玩法,但是大家如果只盯着眼前的问题或许就不够了,比如当周年庆结束之后这个功能还有什么用,他在以后的规划中的存在是怎样的。在所有的包裹中印上活动的二维码这个时间周期和成本有多大。


其次,对于用户来说,扫一扫并不是帮助他们解决了某个问题,而是我做了一个东西,同时搭配着这个功能让你们去使用,对用户来说是一个很可有可无的功能,如果线下包裹上的二维码破损了也是非常影响体验并且是不可控的。那么综上所述,既然要做一个临时的活动用其他的方式会不会更好?


所以在这个文档中的第一步,首先就是要确定需求的背景、价值,也就是说,你这个需求是怎么来的,比如再来讲我们一个店铺的优化项目,在这个项目中,首先我们必须在评审的时候说清楚我们为什么要对其进行优化和改版,一定是出现了或者我们定义到了某个比较严重的问题,这边大家对我们app业务可能不是很了解我就简单说了,就是个人中心和店铺营销场景重合过多,并且卖家的同时可以买和卖两个场景存在,所以店铺页通过我们的数据分析和用户的访谈我们发现了一些机会点,以及我们必须突出一个核心场景让用户有明确的分辨。


另外就是背景的描述也可以带上你的调研结果和分析,比如之前我们做首页优化,我们观察了近5个月的数据,都呈现下降的趋势,所以之后有进行了一系列的访谈和用户体验地图分析才有了这个需求的背景产生。



b.需求目标

目标很好理解,就是我们希望通过这次需求迭代达到一个什么成果,比如我们之前做过一次整体的体验优化改版,那么我们的目标就是减少用户的流程跳失、提升整体体验满意度、提高用户的任务转化率,其中我们做了一个商品关注的功能,由于是限时特价商品所以是限量的,在规定时间进行抢购,为了让用户的使用场景统一我们打算在应用内做一个商品关注功能,所以在这个需求的初期,我们对这个功能的目标和预期是提升xx百分比的转化,提高x%比的gmv,提高用户对关注商品下单的效率和满意度,之前很多用户想要购买商品需要自己在手机端设置闹钟,不方便。所以这个功能的一个目标就是解决用户场景迁移的问题。设定目标之后,就是为了在上线后对其进行复盘和数据跟踪还有用户跟踪。

可以用一句话来描述:针对什么用户在什么场景下解决用户的什么问题,达到什么目的?



c.需求范围

需求范围也相当于范围层,指的就是在该需求中我们需要做哪些相关功能以及功能涉及面。举个例子,之前说的扫一扫功能,不同的产品定位对于扫一扫功能的要求也是不同的,比如说微信在扫一扫功能中承载了:扫一扫、相册、封面、街景、翻译、手电筒等诸多功能,再比如淘宝,有扫一扫(ar、拍立淘)、相册、历史、帮助、手电,这说明了不同产品对扫一扫功能有不一样的要求,所以在需求范围内我们需要把本次需要做的功能进行描述,并且该功能是否影响其他功能的使用和对整个产品的影响范围。并且我们也会讲所需要的功能进行拆解和优先级拆分,在表格中编辑。



d.调研分析

调研分析其实就是为我们第一步背景和价值做准备,由于汇报方案和评审,或者在项目推进时,我们需要有相应的论据来支撑我们方案的客观性,所以在这一板块中输出的结论就非常重要,比如之前的首页改版,经过用户研究小组的访谈和数据分析得出相关的结论,通过埋点找到相应板块的点击数据和异常点,然后再进行一系列的问卷和访谈研究,找到结果,都是为了辅助项目的背景以及在评审中大家对需求价值的灵魂拷问。由于数据和调研结果比较敏感就不过多放了。


e.版本日志

日志是一个非常重要的组成部分,做过开发的同学都知道log 的重要性,当我们跑不通的时候我们都会去检查log,然后多测试几遍可能就找到问题所在了,其实我们的版本日志的作用也是这样,但是一个是对自己来说可以记录自己的工作过程,还有思路的变化,第二就是对外,包括和需求方的讨论,会议的纪要等。


要注意的是会议纪要在备注中需要详细说明,以做证据。同时也要邮件通知相关人员和负责人。可能有些公司还会放一些评审记录,比如各部门负责人对方案和需求的建议,业务方和技术负责人的一些建议也会放在项目概要中,而这个prd文档也可通过内部服务器进行实时更新和保存,如svn。方便大家对需求的进度和迭代有一个直观的追踪。

f.项目成员

这个就不用多说了,产品、运营、交互、视觉、开发各司其职,照相馆人员即可,就不至于当项目开始进行了人员分配还没到位就尴尬了。


2.需求方案设计

a.业务、任务、界面流程图

有些同学不是特别明白业务流程图和任务流程图的区别,这边给大家简单介绍一下


业务流程图:

意思就是在这个需求系统中,相关利益者的业务关系,任务信息的流向的一个图标。比如这个简单的例子,用户在点外卖这个场景中,相关的利益者有用户、店家、外卖员三者,那么当用户开始触发流程后,这3者在这个流程中就会各司其职,而业务流程图也很明显的告诉大家所有联动者的指责和流程走向。


任务流程图:

用户在具体执行某一个任务时候的工作流程,以及其核心任务的操作步骤,比如在登录注册这个任务中,用户需要进行一系列的操作,在这个流程中用户的操作引发的系统判断需要详细说明。



界面流程图:

界面之间的跳转关系和路径,在这个流程图中,我们不需要吧详细的说明写上,只需要将需求中涉及到的页面跳转进行叙述即可。

b.相关说明和规则

接下来就要开始我们交互文档最为关键的部分了,如何书写交互说明,以及交互说明应该包含的内容。


1.全局思考

在做交互方案也就是我们画原型的时候会思考一些问题:

a.整体思考

1.信息架构是否容易理解,信息分类是否合理,比如我们的信息架构是否采用了用户容易理解的,市面上常用的信息架构。


2.信息层级和路径是否合理,不一定要最简,但是要高效,信息的优先级是否放置准确,信息组织是否具有相关性、逻辑性。


3.主题是否清晰,3秒内告诉“我”在哪里,并且可以做什么


4.方案的延展和后续功能规划的可扩展性


b.用户权限

根据不同用户的权限对该需求进行检查,比如普通用户、vip用户、内外网用户、游客用户,在登录未登录时候对需求内功能的使用是否有影响


c.登录方式

用户登录和注册、终端的兼容,不同方式注册的用户是否需要补填相关信息等等


d.流程

1.该需求中的功能流程是否和其他类似或者相同功能流程保持一致性;

2.逆向流程和非正常流程的思考有没有完全;

3.流程的闭环有没有做好;页面跳转的方式是否合理;

4.中断后的恢复状态如何呈现;

5是否保留原信息等等


2.内容、状态和显示

a.内容的获取来源

例如下方的图片为例,banner的图片来源和发现feed流的图片来源肯定是不同的,那么就要写清楚,图片或者数据的来源是来自于用户的上传还是系统后台的配置获取;并且获取的方式是如何的,是需要手动下啦刷新还是切换页面自动刷新,还是设定时间自动刷新。


字段、图标是从接口获取还是前端写死,以及气泡展示的规则等等。另外一张图片可能用在多个地方,而可能呈现的尺寸不同,所以在涉及到相关图片使用时要注意剪裁规则和图片的来源。

b.缓存机制

图片以及一些资源通常我们需要对其进行缓存,有些同学不清楚什么是缓存,缓存是在计算机上的一个原始数据的复制集,一般来说需要缓存的内容是通过浏览产生的,包括图片以及cookie等,浏览过的视频和广告也会被缓存。同时在不同的网络环境下缓存的时间标准也不同,无网络那肯定只能读取缓存文件,wifi环境下缓存时间可设置的短一些,而流量环境下时间就可以设置的偏长。


c.状态

状态大家都应该都会写,主要包含的就是初始状态(冷启动无缓存第一次进入)、空状态(无任何内容比如空的购物车)、常规状态、异常状态(网络中断、接口报错)还有过期状态等


d.显示

数据和内容的极限值,最大和最小,比如粉丝和关注的数量,小于1万人则显示完整的数量,大于等于1万小于11000则显示1万,大于11000小于12000则显示1.1万,这样的方式。另外包括标题极限为一行显示,超过部分的显示规则。敏感信息、错误提示以及超时的信息提示。金额的格式使用¥xxx还是xxx元,小数点保留的规则。日期的显示格式是xxxx年xx月xx日还是xxxx-xx-xx还是xxxx/xx/xx等等



3.反馈、提示、手势

反馈和提示的样式有很多种,一般反馈指的是用户对某一个控件进行触发后获得的反馈,比如按钮按下的反馈,以及之后收到的反馈,是进行跳转还是给用户提示,采用的是模态还是非模态的提示。比如点击关注某个人的按钮后会提示关注成功,比如退出某个图文编辑会二次确认是否退出,再比如抖音长按后出现的3个操作反馈,还有支付成功后的动效提示、恶意多次操作后的提示等等


如果有手势交互也需要说明,比如滑动后内容置顶、拖拽、左右轻扫的tab滑动、重按的3dtouch等等



4.加载

使用模态还是非模态,如果是模态加载请尽量使用情感化设计来减少用户焦虑。如果是非模态,根据信息呈现和体验采用分步加载还是预加载还是智能加载。如果是分布加载就选择先加载资源较小的内容,再加载图片,可以先将图片模糊化粗渲染给用户呈现,包括在浏览信息流的时候的分页加载也是可以的。如果更智能化一些也可以预判用户的行为进行内容加载,例如当用户在某个图文前停留时间达到某个值后就预先给用户加载里面的内容。


加载的全局方式在方案中需要考虑,页面加载、下啦刷新等等,需要统一。



5.环境、设备与场景

a.不同设备、厂商的不同版本


都会影响到方案的落地和用户体验这个要非常注意。比如一些交互控件我们在6、iphonex和大屏幕尺寸上使用起来效果很好,但是小屏幕的时候这个交互控件显得就很难受,所以需要仔细斟酌用户的使用情况。另外还有横竖凭情况的交互方案是否兼容、是否需要与其他硬件进行兼容。


b.白天和晚上是否需要做不同的风格设计,以及在是否需要给用户遮挡隐私的功能。



6.文案

文案这点很多设计师都忽略了,你们有没有听说过一个叫文案设计师的岗位。其实文案在我们产品设计中是非常重要的。首先一个产品的文案对应的语气和产品调性也是相关的,就好比我们说产品有它自己的性格一样,另外文案的使用直接就影响用户对该信息的理解,比如一个对话框的文案是:确定退出吗?下面会有两种不同的选择,一个确定,一个是退出,大家觉得哪个比较好?还有就是不加“吗”,就变成了:确定退出?这样描述出来的语言给人感觉很冰冷,甚至有一些威胁。


所以首先我们的文案是否有温度,和产品的个性是否相匹配。其次文案的表述是否准确和通俗易懂,比如你告诉程序员一句话,帮我去菜市场买西瓜,如果有西红柿,帮我买两个,你会带什么东西回家?程序员版:if(看到西红柿)西瓜等于2;else 西瓜=1。buy 西瓜。条件:看见西红柿 执行命令:买两个西瓜一语道破版:其实吧,看到西红柿呢是卖两个西瓜的触发条件…没看到就买一个西瓜,看到就买两个西瓜。所以这里出现的不仅仅是程序员的思维和我们的差异化,也说明了一句话没有表述清楚所带来的问题是很大的。


另外就是文案用语的一致性,在整个产品同样的场景中,我们需要统一文案用语。


7.常见控件

具体见下方列表



8.撰写方式

作为一个设计师,不管是否在做视觉,我们都需要对文档有一个美化意识,如果你的文档非常凌乱,那么在别人眼里就会觉得你是一个比较粗心大意,不够负责任的人,所以我们尽量在做交互输出文档的时候也画的美观一些。


目录

首先在目录的撰写时候要进行分类,通常我做的时候会对该需求以页面父子集关系进行创建,父集为核心页面,子集为其下的相关子页面,这样页面的流转和归属关系就不会搞错。


说明

在撰写规则与说明时可以通过标签法进行标签说明的撰写方式,同样在视觉上保持美观,对比与对齐的运用,具体该写什么东西上面已经说明就不赘述了。除了交互规则以外,高阶的交互设计或者产品经理还需要补充业务规则,比如排序、商品抓去规则、权重、算法、活动规则等等这里就不展开说了。


总结

文档的形式有非常多种,针对不同的公司和产品也需要作出相应的调整,能够满足需求和方便协作,目的就达到了,我们并不希望过多的时间花在文档的撰写上,而是希望大家在做设计时多思考业务,本次分享就到这里啦~

作者: 应骏

转载请注明:站酷

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

魏华的微信.png

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


界面设计丨Banner设计的一些思考

博博

从版式,字体,颜色,背景,点缀进行剖析

前段时间一直在做运营类设计,banner在其中占了较大比重,为此就想写一篇阶段性总结。其中部分观点参考了相关视频教程和文章,设计新手一枚,如有不足还请大家海涵。


banner由以下五部分组成:版式,字体,颜色,背景,点缀。我就针对这几点做些具体分析。


关于版式

大家发现没有,大体上banner版式可分为两种:1、图文左右排版   2、文字居中    

在工作中我接触图文左右排版的机会较多,因此今天着重分析下。


图文左右排版

当banner中需要包含具体的素材,如某位大咖,某件产品时,一般会选择左右排版。并且图文比例约为6:4(接近0.618的黄金比例)


关于为何文字部分要大于图片部分,我做了如下分析:如果banner中只有某位大咖、某件产品,而没有文字衬托,用户就不会知道banner想表达的什么。

如下图,banner中只有一位拉大提琴的中年外国男子,人们会猜测这男子的个人专辑发布了?他是谁?所以,通过图片用户只能对信息有个大致了解。


相反,如果把banner中图片部分遮去,而只保留文字部分。人们能够获取的关键词有:5首电影歌曲、回忆过往的。因此即使没有配图,文字也能将信息精准地带给用户,文字所占比例应当比图片多些。这也就解释了为何大部分左右排版的banner都是文字占比大于图片。

undefined



banner中有些文字放左边,有些放右边,这有什么区别呢?

下图中第一个banner是关于欧美电影歌曲的,右侧可布局拉琴的男子,也可配电影片段,还可放正在播音的留声机。第二张banner同样如此。

下面两图均是图左字右的banner,第一张《首席医官》,特指这本书。

第二章奥运冠军陈一冰求婚——除了他没别人了。

说了这么多,总结出图右字左和图左字右的区别了吗?图片在右,配图内容比较模糊;图片在左,配图内容比较清晰。由于人们习惯的阅读顺序是从左到右,左边放什么意味着用户会先看到什么。当图片信息清晰时图片放左,先用特定配图吸引用户目光,再加以具体的文字阐述就更正常不过了。而如果把含义不清的配图放左左边,用户得看到右边的文字部分才能获得banner想传递的内容,这会导致用户接收信息时间增加。


2、文字居中    

在工作中我没怎么接触过文字居中的排版方式,因此很抱歉没法做太多的剖析。印象中电商比较喜欢此类排版,也许是文字放在正中的位子,底下可以放许多产品?


版式中大小标题的比例

发现没?大小标题比例约为2:1。其实这和一级标题,二级标题是同个道理,我们在设计banner时总希望用户能把banner上的文字看全,但又不希望大小标题混在一起主次不清,因此在排版合理,用户能看清字的综合考虑下,大小标题比例约为2:1。(其实小标题太小运营们也会怼的)



关于字体

banner中常用的字体有三种:衬线体(serif)、非衬线体(sans-serif)、书法体(cursive)



都说字体有各自的性格,衬线体笔画有粗细之分,它模仿的是中国古代字体和古代碑文上的字体,因此衬线体能给人古典,文艺的感觉,适合用于文艺气息或与女子的相关设计。

非衬线体笔画简洁,笔画较粗,体现现代,简约的特性,适合用于苍劲有力,与男子相关的设计。

书法体源自中国古代,能体现中国文化和挥洒墨水的豪气,适用于文艺主题和金戈铁马般的豪迈主题。

ps:商用字体需要注意版权!!!这点很重要



关于颜色

在生活中,色彩心理学对人们对颜色的认知有很大的影响。


黑色:黑色是一种代表品质、权威、稳重、时尚的色彩,同时也含有冷漠、悲伤、防御的消极情感。


白色:传递一种简单、纯真、高雅、精致、信任、开放、干净、畅快、朴素的情感。


灰色:代表睿智、老实、执着、严肃、压抑的色彩。


红色:传递喜庆、自信、斗志、权威、性感的情感。


绿色:是自然界中最常见的颜色,代表生命力、青春、希望、宁静、和平、舒适、安全的情感。


蓝色:是三原色中的一种,代表永恒、灵性、清新、自由、放松、舒适、宁静、商务。


紫色:是一种代表优雅、浪漫、高贵、时尚、神秘、梦幻、灵性、创造性的颜色。


黄色:代表阳光、青春、活力、时尚、尊贵、年轻轻快、辉煌、希望的颜色。


因此在设计中选择主色调也要遵从如上:point_up_2:。


例如活泼年轻的内容可选择纯度较高的蓝绿色、绿色等作为主色调。

文艺类内容则适合饱和度不高,偏向白色这类能让人平静的色彩。

关于颜色的搭配,我一般会在花瓣上找些主题相近的banner作参考。

此外推荐几个配色网站:

https://coolors.co/browser/latest/1

https://color.adobe.com

https://uigradients.com



关于点缀

大约有3种。椭圆点缀,圆角矩形点缀,实物点缀。圆形圆角矩形点缀可适当加些渐变和阴影。

为了不让实物点缀太过抢眼,可以适当做些弱化,比如降低透明度或是做些模糊处理。

关于背景

大约有3种。

纯色背景,实物背景,材质背景。根据画面的需要可以选择合适的底图。

总结:看了这么多手痒痒了吗?此时此刻,打开ps做个banner练练手呗~~~~


作者: 夜夜yue

转载请注明:站酷

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

魏华的微信.png

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


Shneiderman的八大黄金法则——完美界面设计秘诀

博博

从Mac和PC,从移动设备到虚拟现实,以及未来可能出现的任何互动科技,只要涉及到人与界面之间的交互设计,Shneiderman的八大黄金

f67f5947cdf2a8012193a389f7e5.jpg


如果你想设计出卓越,高效和流畅的用户界面,就请参考Ben Shneiderman的“界面设计的八大黄金法则” 。苹果,谷歌和微软设计的产品都反映了Shneiderman的法则,这些行业巨头制定的用户界面指南都包含Shneiderman黄金法则中的特征,而这些公司的热门界面设计则是法则的视觉体现。本文将告诉你如何整合8大黄金法则来改进你的工作。


界面设计的八大黄金法则


Ben Shneiderman(生于1947年8月21日)是美国马里兰大学人机交互实验室的计算机科学家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其热门书“设计用户界面:有效的人机交互策略(Designing the User Interface: Strategies for Effective Human-Computer Interaction)”中介绍了界面设计的八个黄金法则:


  • 一致性


当你在设计类似的功能和操作时,可以利用熟悉的图标,颜色,菜单的层次结构,行为召唤,用户流程图来实现一致性。规范信息表现的方式可以减少用户认知负担,用户体验易懂流畅。一致性通过帮助用户快速熟悉产品的数字化环境从而更轻松地实现其目标。


  • 常用用户使用快捷操作


随着使用次数的增加,用户需要有更快的完成任务的方法。例如,Windows和Mac为用户提供了用于复制和粘贴的键盘快捷方式,随着用户更有经验,他们可以更快速,轻松地浏览和操作用户界面。


  • 提供有用信息的反馈


用户每完成一个操作,需要系统给出反馈,然后用户才能感知并进入下一步操作。反馈有很多类型,例如声音提示,触摸感,语言提示,以及各种类型的组合。对于用户的每一个动作,应该在合理的时间内提供适当的,人性化的反馈。如设计多页问卷时应该告诉用户进行到哪个步骤,要保证让用户在尽量少受干扰的情况下得到最有价值的信息。


62525947ce14a8012193a31dda20.jpg

作者/版权持有人:Google,Inc.    版权条款和许可:合理使用


Windows Media Player设计师应该牢记Ben Shneiderman的第三个黄金法则:提供有用信息的反馈。体验不佳的错误消息通常会只显示错误代码,对用户来说这毫无意义。作为一名好的设计师,你应该始终给用户以可读和有意义的反馈。


  • 设计流程需要设计一个完结


不要让你的用户猜来猜去,告诉他们其操作会引导他们到哪个步骤。例如,用户在完成在线购买后看到“谢谢购买”消息提示和支付凭证后会感到满足和安心。


  • 提供简洁的错误操作的解决方案


用户不喜欢被告知其操作错误。设计时应该尽量考虑如何减少用户犯错误的机会,但如果用户操作时发生不可避免的错误,不能只报错而不提供解决方案,请确保为用户提供简单,直观的分步说明,以引导他们轻松快速地解决问题。例如,用户在填写在线表单时忘记填写某个输入框时,可以标记这个输入框以提醒用户。


  • 允许撤销操作


设计人员应为用户提供明显的方式来让用户恢复之前的操作,无论是单次动作,数据输入还是整个动作序列后都应允许进行返回操作,正如Shneiderman在他的书中所说:


“这个功能减轻了焦虑,因为用户知道即便操作失误,之前的操作也可以被撤销,鼓励用户去大胆放手探索。”


  • 给用户掌控感


设计时应考虑如何让用户主动去使用,而不是被动接受,要让用户感觉他们对数字空间中一系列操作了如指掌,在设计时按照他们预期的方式来获得他们的信任。


  • 减少短时记忆负担 


人的记忆力是有限的,我们的短时记忆每次最多只能记住五个东西。因此,界面设计应当尽可能简洁,保持适当的信息层次结构,让用户去再认信息而不是去回忆。再认信息总是比回忆更容易,因为再认通过感知线索让相关信息重现。例如,我们经常发现选择题比简答题更容易,因为选择题只需要我们对正确答案再认,而不是从我们的记忆中提取。被彭博商业周刊称为“世界上最具影响力的设计师之一”的Jakob Nielsen发明了几种可用性研究方法,包括启发式评估。信息再认而非回忆就是Nielsen界面设计10种可用性启发式原则之一。


了解苹果的设计如何整合Shneiderman的8大黄金法则


苹果整合Shneiderman的八项黄金法设计出成功的产品,他们从Mac到移动设备设计都取得了巨大的成功,他们以产品设计的一致性,直观而美丽为荣。苹果的iOS人机界面指南也告诉我们他们的设计团队如何应用Shneiderman的设计原则。


1.  一致性


“一致性”和“感知的稳定性”在Mac OS的设计中体现得淋漓尽致。不管是80年代的版本,还是现在的版本,Mac OS菜单栏设计都包含一致的图形元素。


7ad45947ce40a8012193a354848a.jpg

作者/版权持有人:StockSnap.io    版权条款和许可:CC0


c7165947ce52a8012193a32ce01b.jpg

作者/版权持有人:StockSnap.io    版权条款和许可证:CC0


随着时间的推移,Mac OS的外观有很大变化,Mac OS菜单栏设计都保持一致。


2.  快捷操作


如前所述,Mac允许用户使用各种键盘快捷键,使用频率高的包括复制和粘贴(Command-X和Command-V)以及截图(Command-Shift-3)。


343f5947ce68a8012193a316b2ce.jpg

作者/版权持有人:StockSnap.io    版权条款和许可证:CC0


Mac允许用户键盘快捷方式操作实现通常需要鼠标、触控板或其他输入设备才能完成的操作。


3.  有用信息反馈


当用户点击Mac桌面上的文件时,该文件会“突出显示”,这是视觉反馈的一个很好的示例。另外,当用户拖动桌面上的文件夹时,他们可以看到在按住鼠标时,文件夹显示被移动的状态。


c75f5947ce7da8012193a39ff8f0.jpg

作者/版权持有人:Euphemia Wong    版权条款和许可:合理使用


56f45947ce8ca8012193a3703cff.jpg

作者/版权持有人:Euphemia Wong    版权条款和许可:合理使用


4.  操作流程的设计


当用户将软件安装到Mac OS时,提示信息的屏幕显示用户当前的安装步骤。


81935947cea0a8012193a3e02c72.jpg

作者/版权持有人:Google,Inc.    版权条款和许可:合理使用


5.  错误操作的解决方案


在软件安装过程中,如果发生错误,用户将收到友好的提示信息。提供复杂的解决方案,或用户难以理解的解决方案,或只报错不提供解决方案,都是极大影响用户体验,使用户沮丧的关键原因。根据错误操作的严重程度,区分何时使用小的,不会影响用户操作的提醒,以及何时使用大的,侵入式提醒。但当错误操作发生时,请谨慎选择正确的语气和正确的语言提醒用户操作错误。


4be55947ceb2a8012193a3975133.jpg

作者/版权持有人:Google,Inc.    版权条款和许可:合理使用


Mac OS通过显示一个温和的提示消息向用户解释出现了什么错误操作及其原因。另外,解释这是由于自己的安全偏好选择,进一步向用户保证,告诉他们一切在掌控范围内。



b14b5947cec4a8012193a377376a.jpg

作者/版权持有人:Manutencaonet Blogspot     版权条款和许可:CC BY 3.0


Windows系统中这个非常不友好的提示信息使用“fatal(后果严重的)”和“terminated(被终止)”字样。这样的负面的,不友好的言语肯定会吓倒大多数用户!


6.  允许撤销操作


当用户在安装过程中提供信息时发生错误,允许他们重新回到上一步,而不必重新开始。



b6ba5947ced6a8012193a36254cf.jpg

作者/版权持有人:Euphemia Wong    版权条款和许可:合理使用


7.  给用户掌控感


让用户有权选择是继续运行程序还是退出程序,Mac的活动监视器允许用户在程序意外崩溃时“强制退出”。


1c765947cee9a8012193a3b3fb7c.jpg

作者/版权持有人:Euphemia Wong    版权条款和许可:合理使用


8.  减少短时记忆负荷


由于人类短时记忆每次只能记住5个东西,所以苹果iPhone屏幕底部的主菜单区域中只能放置4个及以下的应用程序图标,这个设计不仅涉及对记忆负荷的考虑,还考虑了不同版本一致性问题。


e2e95947cf00a8012193a3ebc1a0.jpg

作者/版权持有人:Brian Voo    版权条款和许可:合理使用


a7c65947cf2ca8012193a30aa178.jpg

作者/版权持有人:Pixabay    版权条款和许可证:CC0


工作表:如何将Shneiderman的8项黄金法则应用于你的界面设计


作为设计师,你的工作是创建直观,精美和流畅的用户界面设计,让用户感到轻松和满意。下面这个工作表可以帮你把上述这些规则应用于你的设计中。


73f65947cf85a8012193a32d7543.jpg

工作表的PDF格式下载链接: https://pan.baidu.com/s/1nvp1EKp    密码: mjq7


从Mac和PC到移动设备甚至是虚拟现实,以及将来可能出现的任何互动科技,只要你的设计涉及到人与界面之间的交互,这八大规则在设计过程中至关重要,不容忽视,现在就用这个工作表学习如何将它应用到你的设计中吧。


作者: oftodesign

转载请注明:站酷

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

魏华的微信.png

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


B端设计中台落地、响应式界面设计

博博

B端系统设计总概终结篇,详细聊聊响应式界面设计和B端设计中台落地的方法步骤


以下内容主要分成两大部分,第一是聊聊响应式和自适应的区别和原理,以及我们应该如何去设计响应式界面;第二部分也是比较关键的B端系统设计的核心,B端设计中台完整构建过程的具体步骤,以及应用到的格式塔原则,和命名的一些注意事项,内容较多,大家可以根据上述目录来选择性阅读。


1.1多端兼容设计的发展史



简单概括多端兼容设计的发展史,最早是桌面端,比如桌面的一些应用;后来出现了移动端,针对移动端大家用的都是WAP,指一种无线应用协议,大家在用手机浏览一些网站,会把网站翻译成一种低流量的浏览方式,比如去掉图片大图,只剩全文字,因为当时网络不好,早在3G和2G时代移动端用的都是WAP;在2008年之后出现了响应式,也就是做一套代码可以兼容三端(网页、移动端、iPad)设备,在发展的同时也遇到很多问题,但响应式同时也遇到了很多问题;于是又出现了自适应,指不同的设备打开不同的页面进行自适应,自适应能增加效率,但需要增加工作量;2017年以后直到现在看到最常用的就是渐进式,类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。


1.2 响应式布局的种类



1.2.1 响应式布局RWD


可以理解成用户在手机、电脑、ipad打开同一个界面,所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。


1.2.2 自适应布局AWD


自动布局算是响应式的一种,但平时看到很多响应式其实并不是真正的响应式,而是自动布局,因为界面在不同的设备用的是不同的模板,当我们用电脑打开呈现的是一套模板,而用手机打开则是另外一套模板,这种看起来是响应式,其实不是。因为当我在开发者模式下调节不同设备展示时,就会发现,其实是换了一个网址来根据不同的设备进行自适应的,而真正的响应式是不需要刷新的,在拖小窗口的时候就会变成手机端的那个样子。


1.2.3 渐进式布局PWD


渐进式布局是近几年比较新起的,这种布局设计,很像一个网站或者本身它就是一个网站,但用起来就像一个APP一样,看到这里大家很容易相到,小程序就是渐进式布局得一种,小程序明显是一个网页,但通过技术的一些嵌入和一些接口或者缓存的方式的操作,让用户在使用的时候感觉小程序就是一个APP,但核心技术还是web网页。



1.3 如何应用设计响应式


响应式的原理是通过定位的方式来做响应式的各种开发,需要在页面中至少标出这十个点:中心点,上下左右点,上左上右点和下左下右点,这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解,其实结合figma来看,这些点对应的就是这样(如下图),在figma中的布局点。设计师通过调节图形的布局点,可以做到在页面拉伸时,让想动的元素跟随变化,不动的元素静止不动,这就是响应式的原理。换言之,我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。



1.4 响应式和自适应的区别


01、响应式


如下图是响应式的优点和缺点。响应式其实就是只开发一套页面,这个页面兼容三端。虽然做了响应式,但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面,然后全部做好对应的自动布局,再进行页面拉伸,内容随之会发生变化,比如当拉伸到1024*768的时候,也就是iPad的尺寸,就会发现局部在设计上有些不合实际情况,这时就需要设计师在对应尺寸的设计稿上进行内容上的微调,比如按钮不可能那么长,就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时,然后再酌情针对网页尺寸的呈现样式,局部进行尺寸的调整,比如文字和按钮被拉伸到网页版都需要居中对齐,电脑端的样式就需要设计师重新排版了。


通常在B端系统,设计师需要做响应式设计时,往往是从大往小做设计,这也取决于这个B端产品是否需要进行移动端的设计,《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端,就需要我们将网页改成移动端设计,比如B端的侧边栏导航在拉伸到移动端时,就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中,做三端拉伸时候,可以用断点插件来进行演示,通过对断点插件的设置,就可以完美的看到页面在三端不同情况的适配呈现,断点插件用来做演示非常方便。



02、自适应


如下图是自适应的优点和缺点,其实就是一个项目开发三个页面,分别做定制设计,网页端、移动端和Ipad端。



2.1必读前言


我们都知道2021年也就是今年是我国新基建的元年,十四五规划2035远景目标里提到重点发展传统企业数字化转型,尤其是今年我们设计师更能深刻体会,C端和B端已经是完全两个不同的行业,C端发展近十年,已经很难再做到创新上的突破,该做的功能和创新都已经做了,而B端这片蓝海才刚刚开始发力,很多企业也都在考虑B端系统的搭建,降本提效率成了很多公司新的指标,因此数字化转型重点在于B端系统探索,B端重点在于中台的搭建!设计师通过设计中台,构建出基本的业务类型,再分类到业务中,构建出不同的业务界面,所以设计中台非常关键,很多公司经常会用这两个系统去构建,Antdesign和Elemnet就是设计中台,我们会发现用Antdesign可以做出很多的系统,那怎么进行设计中台的设计呢?和我们设计师有什么样的关联度呢?带着这个问题,我们深度探索B端设计中台的落地!


2.2 中台的概念及作用


概念:中台是互联网的术语,一般应用于大型企业,中国互联网的变革永远是从大型互联网开始,大型互联网公司引发了技术的变革,这也是中台的兴起,一般指搭建一个灵活快速应对变化的架构,快速实现前端提的需求,避免重复建设,达到提高工作效率目的。


作用:降本提效。如果没有组件库,普通设计师一天最多做十个页面,再多就不太可能了,如果有组件化得产生,一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前,组件库的作用尤为重要。但如果落地,就需要前端工程师的密切配合,因为设计师设计的组件只是一个样式,而前端需要把组件进行代码化,所以组件一定是代码化的,也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用,和前端代码的复用,可以大大提高设计师的工作效率。


2.3 设计中台的构建过程



2.3.1 基本库建立


基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等,之所以强调系统两个字,有系统就要统一规则和统一规范,然后进行调用应用在系统中的各个地方,比如我们想调用一个颜色,不是去随选用一个颜色,应该严格的从色彩系统中去调用,如果系统组件库里没有这个颜色,我们也绝对不可以使用,可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用,这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面,组件库中如果没有相应的组件,我们应该试着反推一下,是否要加进组件库中去,来进行系统的调用。在做中台的过程中,我们一直使用Antdesign,我们对组件的名称,组件的分类其实一点都不陌生,其实Antdesign也在借鉴国外的Bootstrap组件库(大家感兴趣可以下载Bootstrap组件库进行查看),所以并不是Antdesign组件库形成了一定的规则,它也是在沿用别人的规则,而这些规则也需要不断的有大公司去继承出来,所以慢慢衍生出来现在这样的组件库,那中台设计,首先要搭建基本库,把基本库里的基础一些系统搭建好后,我们继续去做扩展库。


2.3.2 扩展库建立


如下图,扩展库中包含了很多内容,比如分了四类,导航系统,数据录入,数据展示和反馈系统。其中导航系统又包含了,面包屑导航、下拉菜单、导航菜单、顶部导航等等,包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库,也不需要做成像Antdesign的组件库里包含的那么多,或者和新出得字节Arco组件库,因为它们面向的是系统级的解决方案,各行各业都可以用它,它面向的是一个大系统,也许我们只涉及到了其中的20%,因为也没有一个系统能用到它所有的组件,所以我们自己在设计组件库的时候,一定是按照我们自己项目的范围去做组件库,而不是做一个大而全的,大而全的组件库对我们也没有意义。它们做的是公共平台,而我们要做的是一个专属平台。



2.3.3 方法库建立


形成完基本库和扩展库后,第三步是建立方法库。方法库告诉我们的是什么时候用,比如我做了一个多选框,这个多选框应该什么时候用,是不是只要遇见一个选择就去用多选框,肯定不是,应该加以说明什么时候用这个多选框。类似于是组件的设计说明。


2.3.4 案例库建立


最后再做一个案例库,最佳实践库,具体组件什么时候用我们知道了,接着案例库就是在告诉我们应该如何正确的使用,或者说的方法是什么。比如标签的左对齐和右对齐,这种情况都对,什么时候用顶对齐,什么时候用左对齐,什么时候用右对齐呢?那么根据眼动仪实验数据数据来看,并且结合给出一些工作中业务中的最佳实践得案例放进去,给使用的人去做指引。


所以设计师做的事情,不仅仅是应用组件库和创造组价库,还应该指导其他设计师,指导开发人员在去复用每个页面组件的的时候,应该怎么正确的使用,这也是在B端设计中一个关键的环节,同时我们的视觉系统一定也是和业务有关联度的,所以在B端中做设计一定也不会脱离业务去做,我们一定要联系到实际的业务场景中,这个业务场景指的就是业务和视觉的结合,在做C端的时候,业务场景一定不会比B端多,C端的业务场景大多是定制化的业务场景,它要求的是个性化,不要求通用,尽量得个性化,比如图标、按钮、页面,而B端需要统一化,中台组件库的落地,可以大大提高设计师的工作效率和开发人员的协同效率,严谨的调用组件使用组件,可以使得系统页面保持高度的一致。



2.4 认识格式塔原则


2.4.1接近性


如图1:可以看出纵列的关系更紧密,因为纵间距小于行间距。


如图2:可以看出行间距大于列间距,它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢?这属于用户心理学的应用,如果元素相邻的更近,元素之间的关系就会更加的紧密。


如图3:如果元素相邻的关系都是保持一样的,那么它们的关系是相对对等的。


由此可以得出结论,如果相邻的关系越近,它们的关联度就越近,如果相邻的越远,它们的关联度就越远。


应用案例:如图4卡片中得标题和内容,设计中把标题和内容进行区分,所以我们会做大量的留白,这样的留白就会让信息结构具有层次感,层次感就是指它们信息结构的关联度,如果想让它们有关联度,就让它们距离近一点不要做区分,如果不想让它们有关联度,或者关联度出现一个等级的区分,那么就可以加一条线,让它们之间的关联度分隔开。这就是格式塔接近性的应用。



2.4.2 相似性


如图5:如果去区分右边的形状,通常我们会根据形状进行区分,因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。


应用案例:如果文字的标题大小是保持一致的,包括它有统一的大小,统一的色彩,统一的字号,那系统中的其他同样功能的地方,都应该用统一的文字,这就是格式塔相似性的应用,比如图标也是一样,只有用了相似的图形大小,相似的颜色,在相同的位置,用相同的图标进行表达,图标之间的设计才具有相似性。


2.4.3 主体与背景


如图6:可以看到有一个L,是主体与背景进行了区分,如果在设计的时候让L看的更加明显,我们采用的办法就是将主体的色彩或者形状变的更加独特,或者将背景的颜色变得更加分明,这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。


应用案例:比如警告弹出,可以用色彩去区分,目标就是让用户看的更加得清晰,当警告的时候给用户一个警告的信息,当成功的时候给用户一个成功的信息。还有类似对话框的弹出,采用背景变暗和加阴影的方式,都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中,前景和背景进行区分的时候,我们就可以通过色彩进行区分,色彩的区分要保持统一,比如背景色彩透明度50%同时加一些背景模糊,其他的背景也需要保持一致,阴影也是一样,如果把阴影放在一个平面上,距离平面越近,它得阴影越短,距离平面越远,它得阴影越长,这也是阴影的层级关系。


2.4.4 封闭性


如图7:可以看出这是一个四分之一的圆形。


如图8:这个图可以看出是一个五角星。


封闭性应用案例:当一个形状被另外一个形状或者被另外一个色彩阻断的时候,并不影响人们对这个形状额外得认知,一定会脑补出另外一个形状,这个原则和我们UI的关系是什么呢?比如一个loading,半圆一直在旋转,或者图表中的圆占比,我们就可以判断出谁大谁小,谁多谁少,判断出当前的进程和位置,封闭性原则通常应用在图标的设计,图表的设计和步骤条的设计中。


2.4.5 连续性


如图9:可以看出用一些简单得形状来体现,其中三角形具有明显的指向性,三角形箭头指向右边,上面五个是一组,可以看出它们具有连续性;另外一组三角形箭头指向右下角,可以看出它们是连续的一组。不同的形状会有连续性,箭头也特别有指向性,这就是为什么返回和前要进放在不同的位置,当我们的数据需要有连续的时候,我们也要使用相似的形状来表达,这就是连续性原则的应用。


同理如图10:连续性一定是要有连续等阶的变化,从左上角开始,向下和向右我们可以看出有明显的颜色连续等阶变化,通过色彩的透明度也可以做到连续性。




2.5 组件的命名规则



2.5.1 如何正确的命名


很多公司或者不同公司有不同的命名方式,这个需要和团队开发提前做沟通,主要以方便开发习惯操作为主,如果不命名也不能非得说成是错误的,命名可以理解成是一件锦上添花的事情,因为一切都以效率优先,命名自然会影响工作效率,通常情况,组件的命名可以分成组件的名称、级别、尺寸、状态,这样的命名顺序来进行,这样命名开发使用也比较方便,因为是按照了开发的统一规则来进行命名的。如图所示:



2.5.2 更多命名英文词汇


当英文不好的时候,推荐大家记常用组件英文名,以及常用状态名、级别名、内部名、尺寸名和位置名,那这些英文也几乎涵盖了工作中80%的英文词汇,收藏记忆哦~



至此B端系统设计总概系列为终结篇,回顾第一篇主要内容是如何正确设计组件库,B端业务调研的具体过程步骤,以及视觉规范的建立,可以看出第一篇属于B端设计的方法论或者设计指导,也是为开展B端设计前的一些准备工作;回顾第二篇总概主要内容是如何设计表单、表格、图标、仪表盘这些经常用到的设计难点,第二篇更加讲究设计落地过程中遇到的疑难杂症,专业技法;回顾当前总概三,主要内容就是中台规范的建立和自适应、响应式适配的难点,主要是成系统的B端设计步骤。我们都知道B端市场刚刚打开,而且当下对B端设计师的需求还远远不能满足我国现代化建设,数字化推进这么的大市场,作为UIUX,更早的拓宽一条路是我们当下必要的选择,谢谢阅读,祝愿各位2022乘风破浪,B端设计学有所成,如虎生翼!





作者: _C鱼

转载请注明:站酷

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

魏华的微信.png

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


UI和交互的需要注意45个微细节

纯纯

1.用微妙的双重投影来让你的卡片看起来更加清晰

在某些元素周围使用多个放置阴影或非常精细的边框(仅比实际阴影暗一点)可以使这些元素看起来更清晰、更清晰,并帮助你避免那些看起来浑浊的阴影。



2.减少标题上的字母间距以提供更好的光学平衡

你的标题很可能会比正文更大,也比正文更重,所以字母之间的间距有时会看起来更大,

减少一点间距,就可以使你的标题更加清晰



3.为了保持一致性,请确保图标共享相同的视觉样式。

在ui中实现图标时,保持一致。

确保它们具有相同的视觉风格; 相同的重量,或者填充,或者轮廓。



4.在你的设计中只用一种字体就好了

在创建设计时只使用一种字体是比较好的,这样做实际上可以帮助你产生统一的设计效果。

使用字重、大小和颜色的组合,你还是可以用一个单独的字体表达清晰的文字的结构



5.留白

留白可以让你的设计具有呼吸感,更加舒适



6.选择底色,然后使用色调和阴影来增加一致

通过选择一个基色,然后使用你选择的颜色的色调和阴影,可以以最简单的方式为你的设计增加一致性



7.提高用户的入职体验。 拇指法则记住。

允许用户随时跳过你的移动应用程序登录序列,并将该跳过链接放在拇指容易触及的位置。

只是一个简单的调整,可以让你的用户有更好的体验(我常常体验国内一些APP,关闭按钮特别远,特别难按)



8.光影需要是来自同一个光源

确保你的阴影总是来自同一个光源,会素描的同学很好理解,光源关系一致表达空间统一性的基础



9.提高文本和图像之间的对比度

基本的处理方式是,在图片上增加一个透明渐变蒙版来使得字体看的更加清楚



10.同一种字体时,使用多字重的字体

如果只使用一个字体,尽量选择有多字重的字体,比如:阿里巴巴普惠体、思源、OPPO



11.在浅色背景上你的文字可见性需要注意

在浅色背景下工作时,文字颜色不要太浅,虽然看起来很舒服,但可见性不较差,不利于阅读



12.长文本中,文字阅读感不要太抢眼

当涉及到长格式的内容时,某些常规的粗体字体在屏幕上看起来还是有点太重,太呆板了。

建议,选择像深灰色(即# 4f4f)来降低文本的色调,这样阅读起来会更加舒服



13.行动按钮需要是最聚焦的。

通过使用颜色对比、尺寸和标签,确保“行动按钮”尽可能突出



14.字号越小,你的行距就越高

随着字号的减小,增加行高可以获得更好的易读性。




16.突出菜单中最常用的元素


在设计应用程序内部使用的菜单时,请确保提供最常用的操作(即; 上传图像,添加文件等…)最突出的屏幕



17.从你的图像中挑选颜色,让你的产品栩栩如生。

只需从你的产品图像中挑选颜色,然后将你选择的颜色的各种色调和阴影应用到你的背景、文本、图标……,就能为你的设计增添大量的视觉趣味



18.根据字体的x高度设置行高。

不同x高度的字体需要不同的行高测量来实现文本行之间的正确分隔。

即使你可能有两种字体大小相同(即; 18px)它们的x高度可能会有很大差异,选择正确行高是非常有必要的



19.突出最重要的元素

undefined

通过使用字体大小、权重、颜色和布局的组合,你可以轻松突出UI中最重要的元素



20.告知错误的原因

undefined

在用户刚刚执行的操作附近添加一条错误消息,可以帮助用户提高正确登入,也可以缓解用户焦虑(他可以更加清晰那里出错)



21.尝试在手机上创建更大可点击的区域。

undefined

当为移动设备设计时,尝试创建足够大的可点击区域

对于按钮和仅由文本组成的链接来说,点击区域会很小,所以尽可能使用带有标签的图标。

iOS和Android的最低建议点击区域

iOS为44 x 44pt

安卓48 x 48dp



22.在短标题上使用大写的字母

undefined

长标题都是大写字母的话,阅读转化上比较慢(你明白他是什么意思比较慢)

短标题都是大字母的话,相对来说比较快可以和记忆中的单词对应上



23.保持浅色文本和图像之间的对比度

undefined

始终确保浅色文本在浅色图像背景下清晰可见。

只需在文本后面应用一个低透明的深色背景,就能保持这些元素之间的良好对比度



24.排版的亲密性,要一直记得

undefined

标题、正文、标题、正文……这样的排列中如果是间距都是相同的,那么在阅读上就很难区分标题是属于上文还是下文的。

正确的做法是,标题距离上文的距离>标题距离下文的距离,这样阅读起来,标题会比较清晰的对应的是下文



25.在下载中尽量给进度提醒

undefined

当下载速度是一闪而过时,则无需提示

当下载等待时间>3S时,建议给进度提示



26.文字也有情绪

undefined

在项目中处理文本时,选择正确的字体将影响文本的语音类型。 那么大声、或者温柔、或者正式,严肃,或者有趣。每种字体都有自己独特的声音



27.为正文选择合适的行长,并提高可读性。

undefined

基于人阅读情绪,如果阅读一行很长,一直阅读下去,会出现你眼前阅读的内容“不见”的情况

对于单列页面,45到75个字符被广泛认为是令人满意的行长,66个字符的行(包括字母和空格)是最合适的。

当然,字体大小和行高也是决定可读性的一个因素,但是对于行长,要保持在45到75个字符之间



28.偶尔使用纯粹的装饰性元素是可以的,但要保持可访问性。

undefined

需要适当,如果装饰的强了主要表达的,则不可取



29.使UI中的元素相互区分。

按钮。 通知。 UI中两个独立但必不可少的元素。

一定要确保你的用户能够快速准确地将他们区分开来



30.阴影不要太重

undefined

舒服的投影会增加你的设计的质感,和透气感。太重的投影会显得你画面比较脏



31.使用递进分类时,需要明确当前选中的元素

undefined


32.使用高度饱和的颜色? 试着用色调或阴影把事情调小一点。

undefined

高度饱和的颜色(明亮的蓝色、红色、绿色等)在网站上看起来很不错,但过度使用时,会让用户眼睛疲劳,主要是与文本内容一起使用时。



33.使用用户熟悉认知的图标表达

undefined

在向设计中添加图标时,使用用户熟悉认知的图标。新的图标虽有很好看,很有个性,但是会让用户疑惑



34.接近律

undefined

需要承上表达的元素,排版上接近对应的元素,可以让用户心理联系起来是一体的



35.减少标题的行高是很好的。

undefined

与长格式正文文本(需要足够的行高以提高可读性)不同,标题通常要短得多,因此可以稍微缩小间距。标题的建议行高通常是文本大小的1到1.3倍



36.从色轮上挑选配色

undefined

类比色和邻近色是最和谐的配色方案之一,也是最不会出错的配色



37.想用更轻松的语气, 尽量用小写字母。

undefined

在处理特定项目时,使用类似于所有小写字母的文本可以表达更加轻松的意思

但需要注意,在图像和文本之间使用某种颜色叠加,以获得更强的对比度



38.使用重量、大小和颜色来表示你的结构层次感。

undefined


39.深色背景+浅色文本, 增加字重,提升易读性

undefined

当在浅色背景下设置深色文本时,偶尔可以选择较轻的字体。

但是…

反之:浅色文本>深色背景。

最好是把字体的重量增加一点,尤其是长文本,原因是,让用户避免视觉疲劳,获得更好的易读性



40.使用争取的字体类型,表达对应的情感

正确的字体选择对于让你的内容更快的正确传达更重要



41.全部大写+字母间距=更好的易读性。

只需稍微增加字母之间的间距,就可以提高字迹的易读性,并为大写字母增加一些设计感



42.让表单上的错误信息变得有用和容易理解。

确保错误提示,解释了哪里出错和如何解决

始终让用户了解最新情况,即使是普通的表单,让这些错误消息变得有用,不要让用户懵逼



43.加载占位符

使用占位符可以更好的缓解用户焦虑



44.通知用户如果应用某个特定操作将会发生什么。

在应用可能产生后果的特定操作之前,请详细地通知用户。尤其适用于具有不可逆转后果的行为,例如永久删除某个内容。让用户知道将要发生什么,并要求他们确认



45.不要在下拉列表中隐藏重要的操作

用户需要采取的基本操作(例如,注册或登录)隐藏在下拉列表中,甚至可能找到用户想要的。

解决:将重要的功能提出来,不要隐藏


原文地址:站酷
作者:木七木七

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




一文读懂最全语音交互设计流程

纯纯

一、VUI的现状

随着智能音箱的迅速发展,谷歌(Google Home)、亚马逊(echo)天猫精灵、小爱音箱......智能产品的井喷式增长,人们对智能语音产品的需求也越来越多,也越来越高,智能音箱对人们的生活的影响也越来越深,自然孕育而生一些新的职业需求,比如VUI(语音交互设计师Voice User Interfaces Designer),语音体验设计师VUE(Voice User Experience Designer),但其实VUI和VUE的分界线是很模糊的,这里不做多叙述。国际的一些大公司已经做了很好的示范了,比如亚马逊,谷歌等等,都会有设立专门的职位,做一些专门的研究,当然近期国内的相关招聘也会看到有相关的职位,且薪资不低。那么接下来会个大家详细的分享VUI(语音交互设计师Voice User Interfaces)

undefined


二、VUI起源/历史

1.VUI的第一个时期

20世纪50年代,贝尔实验室建立了一个单人语音数字系统

20世纪90年代,诞生了第一个可行的非特定人的语音识别系统

交互式语音应答IVR系统的出现,代表了VUI的以一个重要时期

2.VUI的第二个时期

也就是我们现在所处的的时期

我们的现状,我们正处于下一阶段的初期阶段,我们手机已经可以用语音处理很多事情了,但是还有很多事情是无法处通过语音完成的

3.VUI的一些优势和局限性

优势

1.速度

显而易见的是速度变快了,国内的语音,语音转文字的技术已经很大程度上提高了人们效率

2.释放双手

比如你在开车的时候,你可以直接对着你的手机语音助手说,嘿XX,麻烦你帮我做XXX

3.直觉性

说话是每个人的天性(当然排除特出情况)

4.同理心

语音包含了语气、音量、音调、语速,这些特征包含了大量的感知信息,能够让你感知到对方在表达些什么。

局限性

1.环境

对环境的要求比较高,在公共场合,人多的地方不利于语音的接受和录入

2.不适应

还是有很多用户不喜欢,不适应对着语音设备说话的

3.喜欢打字

就是喜欢打字的一些用户,打字从某个方面能够带给他一些愉悦

4.隐私

这个就很容易理解了,每个人都不希望自己的隐私被别人知道。



三、VUI设计师是什么(是做什么的)?

1.需要思考,在系统和终端用户间,从开始到结束的整个个对话过程

2.用户研究是不可少的

3.负责设计,产品原型和产品描述

4.需要了解底层技术的优缺点

5.分析数据的能力

从项目的发布阶段到发布阶段都扮演着非常重要的角色。

当然很多人看到上面5条可能会有点怵,其实也并不是需要全部都需要会,也可以专门负责其中的一个链条,节点。比如用户研究,数据分析....

undefined


四、VUI的基本设计原则

1.对话式设计

定义:简单来说就是我问你答

目前我们使用的智能设备基本只能支持单轮对话,但这样并不是人们习惯的对话方式

一轮以上的对话,才是符合用户心理预期的。

请大家回忆下自己使用智能音箱的一些场景体验,

举个例子(天猫精灵)

用户:天猫精灵,明天我有闹钟么?

天猫:您明天没有闹钟呢

用户:那可以帮我设定一个么?

天猫:.....

你会发现,智能音箱这个时候像是失忆了一般,毫无反应,显然这并不是我们想要的一个交互,从用户社交属性来说,人们沟通的方式一直都是一轮以上对话式的,并不是单轮式的,一般来说,我们要做到让用户决定对话要持续多久,很显然,你有亲身体验过的话,能做到多轮对话的比较少。

插一个题外话,最近天猫精灵更新了游戏语音的玩法,算是踏进一步了吧,虽然不是很棒的体验,但起码跨进了多一步,相信未来会越来越棒的。那对话式是如何设计出来呢?大致是怎么样的一个流程呢?


2.设计工具、

这里说的设计工具并不是说是一个具体的工具,更多是指一个方法论

示例对话

定义:示例对话字面意思就是演示举例对话,它看起来像一个电影脚本,像两个人一起在对话

特点:是整个设计对话过程的关键方法。成本较低,简单易操作

用法:把要做成一件事情的场景用文字写出来,然后大声读出来,你会发现书写和口语化的还是有很多区别的,甚至是有些奇怪的,这时候你会发现有很多可以改进的地方,所以你会看到一些招聘都会有这一项对应的要求,甚至是要求一些事有话剧功底,有剧本写作相关经验优先。

作用:它能够让你在投入开始研发之前,知道你的设计效果是如何。


3.视觉原型

虽然是语音交互,但是还是离不开GUI的,它可以结合示例对话,将用户体验可视化。示例对话和原型组成了我们产品的故事板,GUI+VUI是用户一套完整的体验,所以,VUI和GUI在早期阶段就开始合作,这样对用户体验会更加流畅。

undefined


4.流程图

也叫做呼叫流程图,一般来说我们的流程图需要包括用户使用中所有可能存在的分支,但这样下来会有千万条复杂的情况,流程图就会很乱,也很难梳理,所以我们采用分组的方法,

具体的分类的方法可以根据分成多组(日历功能、搜索功能,电话..),也可以根据不同的目的进行分组。

流程图的使用到的工具就非常多了,这里就不一一列举了。

那大概我们设计完成了一组示例对话之后,我们就要对一些细节进行细致的研究,比如;确认


五、如何进行确认

1.用户语音的确认

2.非语言式确认

3.通用确认

4.视觉的确认


1.用户语音的确认

最重要的是用户语音的确认,分为显性确认和隐形确认

显性确认即:比较重要,强制用户确认信息。比如:天猫精灵你能帮我一份奶茶么?查到附近XXX奶茶,使用优惠后的价格是XX元,你要来一份么?

隐形确认:即不需要用户确认消息,比如:用户:XX你能帮我设定明天10点的闹钟么?好的,已经帮你设定好明天早上10点的闹钟。

1.1那么如何去判定什么时候用隐性确认和显性确认呢?

那么下面就要介绍一下三级置信度。

系统将在一定的阀值内作出明确的形式确认信息。而这个阀值我们设定为三个等级

1.2置信度?

就是智能音箱能识别到声音的清晰度。

用易懂的话说就是人与人之间沟通的语言接受的清晰度,当然听不清对方说什么话的时候时候一般会发起询问,或者直接说,对不起,我没有听清,你可以再说一遍吗?


1.3三级置信度

比如帮我再买一份外卖

1.当置信度大于80%,使用隐性确认

好了已经帮你在订了一份外卖。

2.当置信度为45~79%,使用显性确认

您是想再多订一份外卖是吗?

3.当置信度小于45%

对不起,我没有听清您的讲话,您想买些什么?


2.只用隐形确认.

智能语音音箱能够非常清晰的识别到你说的内容的时候,可以直接用隐形确认,这样带来的体验流畅感舒服很多


3.非语言式

比如说,灯光花几秒才能,那么只是让系统先恢复好了或者知道的来让用户知道后面发生什么。还有加一些特定的音效,来代表特定某一个意思。

undefined


4.有趣的通用确认。

就是说智能语音音箱不会单独的回答你是和否,会主动会询问您一些的问候,通过这样情感化的一些设计,将能够让用户感到更加的温暖和舒服。

那我们前面讲到了那么多的一些确认策略,那我们接下来再说一下对话式的标识。因为是让用户了解交谈进展以及进展情况的重要方式


5.对话式的标识

它包括了以下三个方面。

1时间线,开始,进行中,结束。

2接收回执,谢谢,知道了,好的。了解了。

3积极反馈。哇,你这个消息真的很棒。

那对话式对话作用是什么呢?是让用户了解交谈进展以及进展情况的重要方式。能够更好的追踪到用户的使用过程中的一种路径方法。


大家会发现我们很多时候智能语音设备并不是每次都能够快速,精准接受识别我们的信息的。出错率相对来说是比较高的,下面大概说下语音识别的出现错误异常的几种情况


六、语音出现错误异常和解决方法

错误异常的几种情况

1.未检测到语音

2.检测到语音,但没有识别

3.检测到语音,但没有识别

4.部分语音识别错误


1.未检测到语音

未检测到语音有大概两种情况,一是用户说了,系统没有接收到。二是用户没说。

主要说下用户说了,系统没有接收到的情况,建议采取两种解决方式,

第一种前面我们说到的三级置信度,我们采取直接询问,“对不起,我没有听清你说的话,你能再说一遍么?”

第二种是采取什么也不做


1.1那什么情况下使用询问呢?

用户必须回复后,系统才能继续进行任务

你的系统只是支持语音

没有其他回复方式了

1.2什么情况下更适合使用什么也不做呢?

用户还有其他选择(比如手机界面课、通过一个按键操作)

什么也不做,不会中断对话

有视觉信息可以提示用户做出明确的选择


2.检测到语音,但没有识别

处理方式和未检测到语音基本是一直的,这里就带过了


3.检测到语音,但没有识别

出现这种情况的原因一般是两点

1.系统程序没有针对这种情况的回复

2.程序中写了错误的回复

解决方法,这里我们就要通过测试来发现具体是哪个环节出了问题了,通过数据的收集分析能够找到具体的答案


4.部分识别错误

大概就是这样的场景,天猫精灵,嗯...我想..。嗯,好的,为您带来一首XXX的歌曲。

解决方法:这个还是需要技术的介入,可以通过使用N-Best列表(可以通过这个列表规避二次错误)和镇适用固件后相应的数据分析来构建此问题的解决方法


说完了错误异常处理以及解决方式,我们接下来说下延迟和消除歧义

5.延迟

在交互一般用户等待的时间是7秒(现在可能是5秒),当你询问等待回答的时间超过这个阈值,用户就会怀疑是不是系统出问题了,甚至烦躁。

解决方法:一是通过“请稍等”让用户知道你在运作和查找。2.非语言提示,比如音效,等等。


6.消除歧义

很多时候用户提供的信息只有一部分,再加上中文的多层含义的特殊性,消除歧义对用户体验的的提升有重要作用。

比如:问地名的天气,中国很多镇区的地名都是一样的。

鼓楼 河南省_开封市_鼓楼区, 福建省_福州市_鼓楼区, 江苏省_南京市_鼓楼区, 江苏省_徐州市_鼓楼区

解决方法:还是可以采用置信度的方式去判别,如果很确定就直接回答,要么就多轮询问确定


7.帮助功能

最后的模块说下帮助功能。也是至关重要的,能够在一定程度上消除用户的“恐慌”,所以,在我们VUI中设计对应的帮助是非常有必要的,比如:询问智能语音设备你能干什么呢?它会告诉你他能做些什么?比如:我的设备怎么样链接你的蓝牙。APP:好的,长按......


七、语音交互的几点原则

1.应该是省时、高效的

2.简短的

3.能够被随时打断

4.能够链接上下文语境


1.应该是省时、高效的

和视觉界面交互其实是差不多的,用户是非常不愿意花很多时间达到他想要完成的任务的。越高效,越短时间,用户的体验会更加愉悦。


2.简短的

只需要告诉用户主要关键信息即可,不要过于冗余。举个简单的例子购物APP的商品表现形式,一般都是把名称和价格放在主要的位置,把详情放进下一级页面。采用尽可能简短的表现形式,让用户直接获取到他想要的,当然这对用户的了解和洞察都要需要经验的积累和感知的


3..能够被随时打断

举个例子,用户:明天的天气怎么样?APP:明天XXX地方的天气19℃,小雨,适合穿.......,用户可能只是想知道天气而已,这时候我们是需要做到可以被用户打断,而不是“执拗”的把话说完,如果一直说下去,不允许用户打断,用户的请求没有被回应,这时候用户会产生反感心理,

undefined


4.能够链接上下文语境

这是目前很多智能语音设备体验上没有那么好的地方,也就是前面说的,可以进行多轮对话,当然如果要设定多轮对话,中间的交互情况将会比现在更佳庞大,需要考虑的可能性也会更佳复杂。


语音交互设计的前半部分设计流程基本已经概述完了,主要说了VUI的起源,一些VUI中用到的一些方法论,设计工具,一些异常情况的处理,和VUI设计的几点原则。下面将会和大家聊下用户测试和预发布、确认发布......



八、用户测试

语音用户界面的测试其实和视觉界面测试的方法有一些相同的地方,但也有一些差异。


一般来说,在开始测试之前呢,还是需要做用户调研的。大概分为以下几个步骤。

1.了解需求(用户用例背景研究。)

1.做用户研究和访谈之前,我们要先搞清楚,这个利益方的需求是什么,业务需求,用户诉求是什么,我们的产品能够给用户带来什么?能够给他们解决什么问题?最后我们要确定我们的目标用户,然后进行访谈和调研(大体的方法,详细可以去看一下阿里提出的五导家加方法论)


2.制定设计研究方案。

2.1给目标用户制定,任务流程。

就是给每一个受访的用户,一个特定的任务流程,但很多时候我们并不是只是测试一个任务,会有很多任务,那就会涉及到任务排序的问题。还有最好的方法是采用拉丁方阵设计,这样的话不必通过出现所有可能的排斥方式来试验。

那么设定好这次任务之后呢,我们就要进行招募受试人员了


2.2.招募受试人员

需要注意以下几点。

1.要在目标用户里抽取测试用户

2.人数大概控制在5~12人,可用性专家Jakob  Nielseb提出效果一般控制在5-8人左右为最佳

undefined

对于小公司招募测试用户可能会相对比较困难,成本相对来说会比较高,当然是可以招募你身边的朋友和公司的同事来协助你的,但最好避开项目的直接核心人员。

那么在目前人员完成之后呢,我们大概会进行一些进行中的一些测试,比如说我们做一些提问。

请问这里会涉及到一个方法,我们在交互设计里面叫它为用户体验地图。


3.用户体验地图

我会给到用户一些任务的体验流程,然后根据他的一些反馈,通过语言、表情,然后绘制出用户体验地图,从而判断出,用户在这个任务流程中,得到了一些体验感受,找到可能存在问题的所在节点,然后进行修改。下面说下在访谈中需要注意的I点,如何进行访谈


4.访谈需要注意的点

那么在口头提问的过程中,我们需要注意些什么呢?

4.1.提问不要有一些语句上的偏袒,不要出现故意引导,比如说你喜欢这个功能吗?这样提问是不太合理的。最好提问是,你用完这个功能之后,你是什么样的一个感受?或者说你觉得怎么样?

4.2.要注意引导用户得出具体的结论。而不是用户说大概,可能我觉得应该是等等之类的词。要有具体的例子,不要一个抽象的结果。

4.3.少用为什么开头,会让受访者觉得你是在质疑他,或者说故意的,刁难他。比如说受访者说,语音天气询问功能特别难用,能够简单说一下你的使用场景吗?他是在什么情况下让你感觉到难用?描述我们需要更加具体化一些,而不是笼统的,抽象的。


5.可用性测试(用户调研)

目的是测试工作流程和易用性。但是在语音交互过程中,识别问题往往会阻碍用户完成任务。最好是找几位测试用户,尝试找出主要的识别问题,然后修复它。


可用性测试大概分为几类

5.1.远程测试(电话/视频访谈)

优点

更容易找到符合特征的用户

成本较低,只需要远程即可,不需要支付其他额外的支出,比如说来到你约定地方差旅费。

会更加自然,更贴近真实情景。

用户心理负担没有那么大会比较自在。

可以没有测试主持人

条件允许的话,最好使用视频通话,这样我们可以录制影像,后期方便我们去观察用户的表情和反应,以得出更加正确的测试结果。

缺点

没有办法实时跟进参与人员的反应。


5.2.拦访

这种测试方式是非常有难度的。意味着我们要去到公共场合去拦截受访者,然后让他参与到你这个测试当中,因为人与人的戒备心理,所以很多人都会拒绝你,如果你想提高成功率,最好准备一些小礼品或者其他的小奖励,这样有助于你提高拦访的成功率。当然你也很有可能得到的结果,会有一些偏差,受访者会出于某些目的而回答你的一些问题,有可能并不是出于真心的。所以呢,这里不是很建议大家用这种方法。


5.3测试完成

测试完之后,我们需要进行我们的结果分析和统计。

测试衡量的一些指标,我们大概分为5个关键指标。

准确性,响应速度,认知速度,清晰度,友好度和声音


5.4.注意事项

这里需要注意的点是,一定先要预先设定好,确定每项任务完成的标志是什么。不然后期对结果的一个标准很难去统计,会比较混乱。

我们需要总结这是用户对问题的回答及完成任务率错误数量和类型等等,从中找出用户的痛点,用户的一些干扰点。按任务出错时,用户是否能够自己解决呢?等等,具体需要得出的一些结论,要根据自己想要测试的一些目的来定。

在这样我们就完成了整个可用性测试的流程。


6.预测试

发布之前需要做一次与测试,可以权重没有那么高。但也是关键的一步。

7.识别测试

最重要的还是识别测试,这关系着整个产品的体验问题,整体的测试流程需要用三级置信度和N-Best列表、以及后台的表格相结合,找出相对应的问题节点,并且修复它。

8.负载测试

你得清楚明白你的设备,最多的承载量,不然流量一进来,服务器就崩溃了,这样的体验是极其差的。

9.效果的评估

你还得去做效果的评估。在试运行开始之前,你需要制定目标,然后看是否达到这个目标,这个效果大概是什么样的?是否达到预期?任务的完成率也是非常关键的一个成功指标。

10.试运行

最后到达发布阶段。为了产品的稳妥起见,我们还是会进行一次试运行,

11.发布

12.迭代

条件允许的话,重复上面一次的用户调研的方法,然后得出一些现阶段的一些问题。我们需要实时跟踪系统的故障并快速的改进,这是我们非常需要要做到的。


大概全部的语音交互流程就说到这里了,我们简单的回顾下下

1.语音交互设计的起源

2.语音交互设计的设计原则-示例对话

3.确认原则/纠错方法-三级置信度

4.可用性测试

5.发布


那语音交互设计的未来点在那里?设计师我们的机会在哪里

战略选择

世界一直都是存在不确定性的,如何能够应对呢?眼界和选择。

这里延伸下梁宁在《产品思维30讲》里面说到的点线面的战略选择的问题,她大概说了这样的例子:比如有一对双胞胎,2010年一起大学毕业,一个进入了腾讯,一个进入了报社。7年之后呢,腾讯的那位如果不出意外应该是年薪百万,而且满街都是猎头在挖,投资人在挖,只要出来创业就给钱,而去了报社的那位呢,报社的情况我们今天肯定了解整个产业都沉沦了,曾经他寄托理想的整个产业都没有了,其实一切都需要重来,在这个时候并不是说双胞胎他们的个人的素质有问题,或者是他们的能力点有问题,点是没有问题的,也不是他们分别跟随的领导,比如说我们就跟老大,他们的老大的能力点和个人操守也都是没有问题的,但是问题在哪里?问题是说这两个单位所附着的经济体,一个是在快速崛起,一个是在快速崩溃。你努力工作的公司收益,远远不如你在2010年以前或者2013年以前,比如说买腾讯的股票,或者是说你买一套北上广的房子,


我们本身是一个点,我们这个点需要附着在整个整个快速崛起的“线”上,战略的选择,眼界的层面显得尤为重要,和努力一样重要,甚至往往有时候选择比努力更重要,但选择也是努力累计的结果。我们设计师如何做出顺应这个迅速崛起的经济体的选择,也是我们当下 的机会,我们能看到什么机会,我们要附着到什么样的线上,在当下职业边界愈发模糊的时代,我们能力和眼界的提升,可以做到从容的应对未来的种种变故。


那么同样,随之AI的发展,5G的到来,我们的很多工作方式都有可能被颠覆,语音交互设计的将会是一片蓝海,虽然现在有诸多的桎梏,但这是趋势,是快速崛起的趋势。设计师工作你能想象未来没有显示器么?没有臃肿的主机么?等等,未来都有可能会发生。而这一切也正在发生.....

原文地址:站酷
作者:木七木七

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



UI设计反馈页风格

seo达人


两套风格各有优劣,“三维风格”细节丰富,但如果把控不好,容易使视觉显得“过重”,因而对视觉掌控力的要求较高。而“矢量风格”视觉较轻量,不容易对内容产生干扰,无论是绘制难度还是使用场景对设计师的要求都相对较低,因而泛用性更高。

决定使用何种风格,往往和团队成员配置相挂钩。比如在以前的公司,视觉部分的设计由外包团队负责,那么就会面临设计质量不好把控的风险。在这样的环境下,三鱼选择以“矢量风格”为主,并制定了一套视觉设计规范:

首先我沉淀了一批泛用性较高的素材,方便团队成员快速取用。

接下来,面向团队中一些更为“高阶”的设计玩家,三鱼制定了一套易于上手的创作规则,方便让他们加入进来一起创作,从而丰富素材库。于是我把矢量插图拆解为“模型”、“贴图”、“传输介质”,各沉淀出常见的基础物料(如下图)。

最终输出给团队一套包含了各种基础模型的psd、一套包含了贴图和介质的透明底逐帧动画。

最后,我只需要通过一段使用教程,就能够教会团队上手这套素材模板。它实在是太简单了,只需要以下两步:

1. 在PS中用“基础模型”绘制出静态的效果;

2. 在AE中将“贴纸”“介质”利用“边角定位”功能贴到图形上,即可完成动画的制作。

(当然,如果不需要做动画,步骤二里面的操作也完全可以放到PS中完成)

通过这套规范与教程,三鱼把矢量绘制的难度大幅度降低,其他设计同学也能顺利地在此基础上展开创作,设计效果遍地开花,设计师和业务方都很开心。

不知道大家有没有发现,虽然这套风格被称为“矢量”,但三鱼在其中虚虚实实地穿插了很多三维渲染。下图是以前的作品,二者灵活搭配在我的作品中很常见。

https://www.zcool.com.cn/work/ZMjkzMzUzOTY=.html

后来我还尝试加入人物规范。可惜哪怕我把规范做到了头、手、脚可以自由拼接组合,大家还是只愿意用我提供的那几个“范例素材”。这时“矢量风格”的缺点渐渐暴露出来:素材使用的灵活性较低,三鱼已经无法通过完善素材库来提升大家的工作效率了。

于是我尝试制作3D素材。3D素材有个特点:即制作过程虽然很繁琐,但制作完成后,素材使用起来很轻松。比如人体模型,虽然建模的过程很繁琐,但大家只需要拿到成品去摆Pose就成了。

果然,模型建好以后,摆Pose的难度就很低了,于是顺利产出了一系列B端常用的动画循环。(想玩玩的可以找我要人模源文件,你会发现模型一旦做出来,后续的创意空间是源源不断的)。

我们把这些小动画应用于业务场景中,顺利投入工作。

后续的创作成本已经变得可控,甚至还可以自由地切换质感,根据需要来决定它是“矢量”还是“三维”。(暴露了没有仔细观察生活,姿势不太自然,见笑了…)

咳咳… 越聊越远了。不过大家也发现了,不管是我还是我的团队,随着我们对质量与效率的进一步追求,视觉风格中融入“三维”的一环是迟早的事了。相比于PS绘制,“三维风格”需要在立体的空间内设定构图,然后是建模+材质+布光,制作的成本明显高了很多。

虽然制作成本较高,但模型的细节度也是PS绘制所达不到的,而且一旦建模完成,后续的扩展自由度会非常高。比如自由地变换角度/颜色。

3D更大的优势还在于丰富的动画演绎空间。

但就像前面说的,“三维风格”对设计师的要求明显高了很多,而三鱼面对的依然是一个没有3D基础的设计团队。但这一次三鱼选择了另一种方式——面向团队成员开展3D软件培训,而且是一场有别于常规课程的培训。

很久以前,在三鱼还是个美术老师的时候,在每届学生的第一堂课上,我都会讲这么一段话:“这节课我所讲的内容,就是你们学画画所需要掌握的所有理论知识。接下来的时间里,我会不断重复它们,并和你们一起反复练习,直到你们熟能生巧!”这就是三鱼对掌握一个视觉技能的经验:唯手熟尔。只有反复且高质量的练习才是掌握视觉技能的关键。

因此我对团队的培训方式很特别,开课的第一天我就坦言:“三鱼掌握的C4D功能不超过10个,所以各位不要有压力,我只教10个功能,傻子都能学会。而且三鱼能把这10个功能用到天花板,只要你们彻底掌握这10个功能,那么三鱼过往的99%的作品你们就都会做了。所以你们也看到了,三鱼并非一个“百科全书”式的老师,倘若你们对这10个以外的功能感兴趣,去网上搜教程会比问我效果更好… 当然,虽然我只教这不到10个功能,但我会用无数个高质量的案例来反复教这10个功能,直到你们彻底掌握它…”

这种培训方式效果还不错。课程进行没多久,已经有同学能将技能应用到业务中了。而且随着可复用的场景、材质、模型资源越来越丰富,如今我们团队的3D制作效率已远超PS绘制,当设计师可以灵活选择视觉表现形式时,手上功夫便不再是制约创意的瓶颈。

其实我团队有一位设计师之前曾学过3D,但因为“没有应用场景”,学会以后又渐渐忘光了。

诶?…这哪是说他啊,分明也是在说你对吧?哈哈哈哈!

在第一堂课前,三鱼临时让大家做了个小测试,内容很简单:“钢笔工具”人人都会吧?那好,我现在在网上随便搜一张“鱼”的图片,给大家5分钟的时间,用钢笔工具把它的外轮廓描下来。

你们猜测试结果怎么样?居然没人能在5分钟内熟练地把外轮廓描下来,可“钢笔工具”不应该是每个设计师都必须掌握的基本技能吗?其实这就是问题点:“会”和“掌握”是两码事,大部分设计师所谓的“会”,可能仅仅只是了解“两个卯点控制一段曲线”而已,很少有人思考过如何以最少的卯点绘制出想要的效果吧。熟练使用钢笔工具的人,往往可以很准确地放置卯点,不熟练的人,则需要反复试错,耗费了很多精力和时间成本。

讲到这里你可能已经意识到了:不同熟练度的人使用“钢笔工具”耗费的成本是不同的,熟练度越低,成本越不可控,而当我们面对有限的项目排期时,我们就更倾向于使用成本可控的自己熟悉的手法来解决问题,于是这个方案每次都被绕开,被其它解决方案替代,其熟练度永远练不上来。

明白三鱼要说什么了吗?不是没有应用场景,而是以你目前的熟练度,根本无法控制成本。这就是为什么我只教10个功能,却要求大家反复练习反复刷题的原因,熟练度才是最重要的。

噢对了,那套人模我后来又试着用来诠释音视频场景,比如直播(Live Brodcast)、视频会议(Video Conference)、连麦(Real-Time Communication)、主播PK(Anchor Player Killing)、视频发布(Video Posted)中。还挺有意思的的,大家可以拿去试着结合自己的场景玩玩。

今天就聊到这吧,来看看我都讲了啥:

一开始我分享了两套B段反馈页的风格,并分享了源文件,算是比较正经的设计技法交流;

接下来我站在管理者的角度,讲了讲我在把控团队视觉风格的经验,以及我做事方式的转变过程,穿插分享了人模的设计技法交流(感兴趣的可以问我要源文件);

再后来,随着做事方式的转变,我也从一名管理者变成了一名人民教师… emm

看来管理的尽头,竟然是当老师… 也不知道今天三鱼讲的这些对大家有没有帮助。

 

原文地址:站酷

作者:三鱼先生

转载请注明:学UI网》干货虽然迟到了,但三鱼还有私货

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



一些被忽略的 UI 设计表现技巧

seo达人

咕噜噜 
 
图片 
 

一、利用手势交互实现自动跳转 

随着手势交互的不断成熟,被普遍的应用到产品设计中。利用手势的辅助可以缩短用户的操作路径,通过不断优化用户的学习成本,带给用户更加便利的操作体验。
通过指向按钮的引导可以让用户抵达需求目的,需要用户进行点击操作。针对横向滑动的交互输出中,在连贯的滑动操作中配合手势交互,随着滑动力度的不同可以实现自动跳转。比如开言英语 APP 课程模块中,针对推荐的课程卡片在向左滑动过程中,随着滑动的程度提示“查看更多”和“释放查看”,实现详情内容的自动跳转。对于需要查看更多推荐内容的用户来说,减少了二次点击的步骤,提高了操作的便捷度和使用效率。 
图片
[优化输出图像]
 

二、手势交互带来的切歌体验

手势交互能够带给用户使用的便捷度,不过目前很多产品的手势玩法都还有待用户去挖掘。功能层面是否“暗藏玄机”需要用户的深度体验,如果可以培养用户的使用习惯,带来的便捷度和体验度都会进一步提升。
在 QQ 音乐主页底部标签栏上方会浮层展示播放器,方便用户操作正在播放的歌曲。可以通过左右滑动的手势进行切歌体验,对于盲选歌曲来说非常便利。在不改变当前布局结构的基础上新增功能操作,手势交互是不错的选择,这个隐藏的手势体验你是否注意到呢?
图片 
 

三、拖动进度条实时预览画面

从短视频到长视频,内容量的丰富可以满足用户的观看需求,针对长视频来说进度的设计可以便于用户选取感兴趣的部分。
抖音的进度条设计也在不断的探索新的体验,最近更新的版本中在拖动进度条时,会隐藏其他附属的功能,让界面显得更加简洁。拖动进度条时也会实时预览显示视频画面,辅助用户进行精准的内容确定,提高用户的操作效率。
图片
图片 
 

四、底部功能区的延伸设计

底部功能区是手势操作的最佳区域,近些年越来越多的产品对该区域进行延伸设计,满足更多功能曝光的目的。
百度翻译 APP 在底部标签栏上方延伸了一个功能区,初次进入时呈现隐藏式设计,单击或者上滑展开全部。延伸功能区为用户提供了更多常用功能,便于进行频繁操作,提升用户的操作体验和效率。
图片 
 

五、情感化的功能引导设计

初次使用一个产品时,针对一些重点功能都会进行引导设计,以此来提高功能的曝光度,降低用户的学习成本。
百度翻译 APP 通过情感化的 IP 形象进行功能引导,可爱的形象趴在功能区上,趣味性十足。情感化设计的融入相较于普通的文字浮层,更能吸引用户的关注度。
图片 
 

六、推荐模块的轮播翻页设计

推荐模块在产品设计中较为普遍,也呈现了各式各样的设计解决方案,结合自身的内容属性进行设计,是体现差异化设计的关键。
最近在喜马拉雅 APP 播客栏目发现了不一样的设计表达,通过专辑封面形式结合辅助解释来设计。不仅结合了自身内容属性,也能在强化视觉感的同时利用文案辅助让解释更加清楚。通过手势滑动进行翻页切换,动态效果也是非常的流畅自然。
图片1图片.gif 
 

七、提高图文布局视野感的设计

在针对新闻、资讯、热点等内容进行布局时,通常有左图右文、左文右图、纯文字布局、轮播图等形式。设计表达考虑了阅读引导和版面利用率,如果需要突出视觉感时,如何进行设计发挥呢?
最近在芒果 TV APP 首页的看点专栏发现了一个感官体验不错的设计,将文字信息以卡片式进行布局,以大图作为背景来衬托卡片。滑动时也会有进度条式的控件提示,整体的视野感更强,更能吸引用户的关注度。
图片 
 

八、微动效增强签到设计的关注度

签到的存在是为了提高用户粘性,通过签到获得积分,兑换礼品或者升级功能服务等权益。提高签到的曝光度才能吸引用户参与,进而达到需求目的。
除了在签到设计的视觉感上面进行强化以外,微动效的表达也是非常不错的选择。快看 APP 就将代表签到的图标通过动效来强化,也能吸引到用户的关注,提高签到的点击率和参与度。
图片 
 

九、辅助图形强化品牌感

立足于品牌做设计,无论是那个方向的设计都需要从品牌的角度进行思考,特别是 UI设计。通过辅助图形强化品牌感是一个方向,逐步被设计师加以运用。
比如考拉海购 APP 在多个局部区域融入了辅助图形进行强化,将辅助图形作为背景使用。辅助图形结合到 UI 场景中,是 UI 设计师后期需要逐步探索的方向。
图片 
 

十、悬浮动效式空状态设计

空状态代表无数据状态设计,通常形式有纯文案提示、图形加文案提示、情感化插画融入、IP 形象结合、动效表达形式等。在体验的众多案例中,动效形式的表达相对较少,不过感官度也是不错的。
在 COVES APP 中,采用动效式空状态设计来表达无数据状态。在局部的模块还使用了悬浮动效式表达,无论是视觉感还是吸引力都呈现出不错的效果。不仅吸引用户的关注度,也融合了产品的设计风格,是一个不错的设计解决方案。
图片 
 

小结

每一次的体验、分析、总结都能吸收新的思路和灵感,有助于我们提高设计的灵活性和解决需求的效率。希望本期的整理可以带给你更多帮助,我们互相进步。 
 
原文地址:黑马家族(公众号)
 
作者:黑马青年
 
转载请注明:学UI网》一些被忽略的 UI 设计表现技巧


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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档