首页

交互设计原则之格式塔定律

博博

在做交互设计或者视觉设计时要遵循一些既有的原则,其中非常重要的一条就是【格式塔定律】

一、什么是格式塔原理?

        格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。

       格式塔学派主张人脑的运作原理属于整体论,“整体不同于其部件的总和”。例如,我们对一朵花的感知,并非纯粹单单从对花的形状、颜色、大小等感官资讯而来,还包括我们对花过去的经验和印象,加起来才是我们对一朵花的感知。

       格式塔心理学家认为这些原则之所以存在,是因为头脑具有天生的倾向,可以根据某些规则感知刺激中的模式。(是不是觉得hin神奇)

       比如,这是著名的“人脸花瓶幻觉”图。如果以黑色为背景,白色为图形,则是一个花瓶;如果以黑色为图形,白色为背景,则是两个人的侧脸。它也反映了图形和背景对一幅图的影响。

二、格式塔原理分析

1、接近性原理
接近性原理说的是物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近(相对于其它物体)的物体看起来属于一组,而那些距离较远的则自动划为组外。             

接近性原理的应用1--将相关元素彼此靠近放置

使用不同数量的空格来合并或分离元素是传达有意义的分组的关键。例如,在Ant Design的标题区域中,“ 搜索”功能与站点的主要导航位于同一行。但是,主导航和搜索之间的多余空格表示它们属于不同的组,因此具有独特的功能。对于使“ 搜索”功能在主菜单的其余部分中脱颖而出,此空格至关重要。


但是,在较小的屏幕上,无法保持此间距。为了避免将这些区域视为一个整体,页面收缩宽度的时候,搜索后的文字隐藏了。




接近性原理的应用2--构建清晰的结构

应具有固定或锁头标题的网站特别可以从使用独特的背景颜色或清晰的边框中受益,从而有效地将标题与下面滚动的页面内容区分开。此外,大页脚的单一统一背景色  可有效地表示该区域中的所有链接都属于一个组。

创建清晰的边界是一种强大的视觉提示,可以压倒其他分组原则,例如接近性或相似性。因此,当需要包含几种不同类型的UI元素或无法调整对象之间的空白量时,它是一种强大的工具。我们做页面时如果需要把两个元素放成一组与其他元素区分,那么我们可以用线框画出边界来达到目的。

2、相似性原理

如果其它因素相同,那么相似的物体看起来归属于一组。接下来从形状、颜色、尺寸上来说明相似性原理,这也就是我们平时做视觉设计时的原理,比如我们设计稿宣讲时可能会被开发、产品以及测试同学问到“为什么用这个形状?为什么这里用这个颜色?为什么这两个尺寸不一致?等等,细细体会这个相似性原理就会给我们答案,让我们在画设计稿时能够有理有据。


A相似性原理之形状:

在上图中,我们头脑中自然而然的会分成“四列”,也就是圆形一列,三角形一列,然后再圆形一列,三角形一列,而不会看成“三行”


B相似性原理之颜色:

应用共享的颜色来表示某些项目是相关的,因此可能具有相似的功能,这很有效。通用颜色往往比其他特征(例如形状)更加突出,因此可以用于组合不同类型的元素并传达它们确实相关。        

在用户界面设计中,颜色通常用于指示常用功能。例如,使用单个链接颜色作为与用户交流可点击内容,链接颜色应仅保留给交互式文本和其他可单击元素,因为用户会意识到所有具有此特征的项目都是相关的,并且以相同的方式工作。因此,链接颜色不应用于关键字,不可点击的标题或实际上不可点击的附近图标。

如上图,就是一个用色的反面例子,“ 消息中心”中的所有按钮均为绿色,因此用户必须花时间确定哪个是提交表单的主要按钮。(此外,“ 提交”按钮离消息区域很远,并且根据Fitts的定律,这种缺乏接近性也会降低用户的速    度。)

相同颜色的按钮将被视为具有相同的重要性级别。因此,应为主要操作性按钮保留单独的颜色,以帮助它们在辅助按钮中脱颖而出。

C相似性原理之大小:大小也可以用来表示关系。大小相似的对象可能被认为是相关的,通常具有相同的重要性。

在用户界面中,我们经常使用大小来强调内容或按钮中最重要的部分。相同的大小表示相同的视觉突出度,并且在所有其他条件相同的情况下,将共享该属性的所有元素连接在一起。一致地使用大小会创建视觉层次结构,并使页面易于扫描,因为人们可以立即看到并理解这些类型分组。

例如,在产品列表页面中,每个单独的产品列表都以相同的大小(和相同的形状)显示。这种一致的视觉样式告诉我们该区域中的所有物品都是产品。共享大小将其与其他不同的UI元素分开。当某项商品在此列表中以不同的大小或形状出现时,就会突出显示为不属于产品分组。下面这个产品集合的促销以单个产品列表大小的两倍显示。


下面是我最开始尝试的招聘系统首页的改版:

根据上面的相似性原理和接近性原理就可以很容易看出来,这个页面结构和逻辑不清晰:

1.待处理和招聘日程两个模块之间的区分不够清晰:因为这两个模块右侧应用了同样的形状和颜色的按钮(相似性原理),让用户在心理上产生联想,同时这两个模块之间只靠间距来区分,区分的太弱了(接近性原理)

2.招聘日程头部日期与下面的面试安排卡片联系太弱:因为面试卡片用了非常强的边界区分的线条(接近性原理-构建清晰的结构)确实在面试模块之间构建了清晰的结构,与此同时卡片与头部的日期之间看起来没有什么关联。

3.首页的选中效果太弱,分析这个页面的层级,左侧首页选中才应该是最重的,能让用户第一眼就知道在系统中的位置,很显然目前来看很容易忽视首页这个位置,关注点被吸引到了快捷入口。这并不是我们想要传达给用户的。

根据格式塔原理中的相似性原理和接近性原理,对页面的结构进行了调整,就看起来清晰多了。

所以,我们在制作完设计稿后,可以应用格式塔原理,分析下最终呈现给用户的结构和逻辑是否清晰。而这也是做视觉的理由和底气。


3.连续性原理

视觉倾向于感知连续的形式而不是离散的碎片。

连续理解起来是很简单的,但连续却解决了非常复杂的问题。通过找到非常微小的共性将两个不同的环连接成一个整体。在引导页中经常会用到这个。

    

 4、封闭性原理

视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

闭合可以实现统一整体,这不难理解。但是有一个非常有趣的现象值得我们去观察和思考,就是不闭合时候也会实现统一的整体,更确切的说,这种现象是一种不完全的关闭。这些图形与设计给人以简单,轻松、自由的感觉。所以,完全的闭合是没有必要的。最著名的应用便是苹果公司的logo,咬掉的缺口唤起人们的好奇、疑问,给人巨大想象空间。

5、对称性原理

我们倾向于分解复杂的场景来降低复杂度。


6、主体/背景原理

我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素,其余则是背景。这个原理经常会在海报设计中应用,这也是为什么我们做海报,做平面时,一定要制作好背景,背景的氛围很重要。


文章来源:站酷   作者:ZZiUP


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

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

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

2022年,B端设计的趋势有哪些?

lanlanwork


 

视觉趋势

1. 3D设计风格

虽然 3D化 的视觉风格早已到来,但是在B端市场上,3D风格在此之前依旧表现的十分克制。

随着 C4D、Blender 这些 3D 建模软件的不断普及,再加上互联网上关于 3D 建模教程的增多,你会发现 3D 风格的视觉表现,是一个 B端视觉设计师 的基本要求。

而3D风格用在B端软件当中,会有两个使用场景:

 

图标

因为在B端产品当中,图标本身就是非常难以去表现,比如“物联网,大数据”。

许多的抽象词汇,很难通过一个具象的事物进行表达,而在企业官网当中,在视觉表现上的要求又十分的高。因此你会发现,在视觉风格上的选择,往往只有 3D 图标 + 插画 这一条路。

图片

并且 3D 图标的使用场景不会太过于局限,也可以用于产品的工作台、运营营销工具箱 等页面,因此 3D 图标的出现,它的应用场景也会相比之前 要更加的广阔。

图片

 

可视化大屏

大屏设计 也在不断的“内卷”,因为传统的 2D 可视化大屏 所搭建出来的大屏已经满足不了企业的野心, 像DataV 腾讯云图 ,大家都在朝着 3D风格 炫酷的方向进行延展,因此也就会导致 3D 的视觉风格需求 激增,而 3D 建模仿佛就是大势所趋。

图片

 

2.新拟态

虽然新拟态是在前两年的产物。这个设计风格背后,遭到了很多设计师的质疑与排挤。

但是随着这个风格的不断成熟,感觉它在B端视觉领域(特指的是 官网 ),是非常受到欢迎的,因为整体的风格,与官网的设计形式趋同。

同时作为B端产品的官网,其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作 给出的真实反馈,而使用了新拟态的官网按钮,给你的反馈非常真实。

这里安利一下腾讯云的首页官网,大家就会发现在设计风格上,大量的采取了新拟态元素,并且配合 3D 风格的图标,以及毛玻璃材质的设计,让它的设计瞬间加分不少。

图片

 

3.开源的设计系统

在去年,设计系统迎来了一波发展的高峰期,随着字节、腾讯,三大设计系统(Arco Design、TDesign、Semi Design)的开源,其实是给我们很多B端设计初学者,有了更加完整仔细的B端入门教程。

比如 Arco Design 的组件用法 https://arco.design/docs/spec/link

图片

就清晰的讲清楚了每一个组件的使用方式,以及注意事项,仔细阅读这里面的内容,其实就是B端设计的入门学习。

而未来,国内的环境,开源的系统也会越来越多,大家可以针对这几大类不同的设计系统,进行对比,或许会有一番收获。

 

产品趋势

超级app

这里的 超级app 可能和大家潜意识里的 支付宝、微信 这些软件不太一样。

在B端行业,随着疫情的不断扩散、再加上了两年时间的发展,很多B端产品的功能架构都出现了一个现象,产品的功能开始变得非常拥挤。因为B端软件的核心价值其实就是靠着一个又一个功能去累积,也就意味着随着B端产品的发展,功能模块在不断的累积,导致在设计层面,这样的现象变得更加严峻。

你会发现左侧的导航菜单已经完全没有办法装下这些导航内容,而这一现象也反映在很多产品当中,比如我了解的 飞书管理后台、薪人薪事 等等诸多B端产品,它们在整个导航内容上,已经增加到一级导航 15+  、二级导航 40+ ,这无疑会开始对设计师的能力造成巨大考验。

图片

面对这一情况,许多导航菜单都将会迎来前所未有的挑战,最近也在深入研究导航菜单过多时的解决办法,发现了一些新的 导航菜单 设计方法,有机会咱们重新梳理一下 导航菜单 的内容,将B端设计指南 文章进行更新。

图片

 

低代码定制化

低代码一直是我关注的一个领域,先给不明白低代码的同学简单科普一下。

低代码,一种快速开发应用的软件,将通用、可重复利用的代码形成组件化的模块,通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码,类似用“乐高积木”的方式来开发。

在国外有很多著名的低代码成功案例。Outsystems(国外非常出名的低代码平台)帮助施耐德电气在20个月内推出了60款应用程序,开发过程加速了两倍,仅在第一年就节省了650人天的工作量;在2012年即将推出Model S之际,特斯拉放弃了SAP的ERP产品(可以思考一下为什么),改用低代码开发平台Mendix,用25个人四个月时间自建ERP系统。

去年,低代码平台,也有很多新产品面世,其中就包含:

图片

因此你会发现,其实低代码就是在解决一件事,围绕着某一个业务场景,通过平台的持续完善优化。

让所有的功能都能围绕这个业务展开,其中包括:权限、时间轴、流程、表单、公式等等,能够解决很多特殊的业务场景。

而低代码会涉及到设计思路上的转变,以及低代码编辑器的出现,如何去设计如此复杂的配置流程,如何能够让用户能够快速上手,如果你能够有比较完整的思路,这些都会成为我们设计的新机会。

 

行业细分

随着互联网市场的不断发展,用户会越来越关注产品在自己行业的应用,比如CRM,其实只是一个笼统的称呼,现在CRM市场又会分为 SCRM、运营CRM,等诸多产品。

PaaS类的平台也出现了 负责从虚拟主机和数据库层面入手的 iPaaS 以及 从应用和数据层面入手的 aPaaS。

即使是大家经常使用的 钉钉、企微、飞书,它们也在各自的领域有所擅长。

图片

因为B端产品,在底层逻辑上是不能允许趋同的产品出现,如果你和别人的产品一样,其实是没有办法在目前的市场上立足。

因此你会发现,虽然产品形式都会比较相同,但是B端市场十分广阔,大家都在去寻找自己产品的差异化。

当然市场是瞬息万变的,这里也只是简单聊聊我自己的看法,希望对你有所帮助。最近拖更确实比较厉害,准备之后几天给大家抽些书,可以多留意留意公众号的文章。

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》2022年,B端设计的趋势有哪些?

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

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

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

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

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


11本值得一读的设计书

lanlanwork


01.

超越平凡的平面设计之
《版式设计原理与应用》

图片

这是一本很经典的版式设计书籍,内容主要包含排版、色彩搭配,通过这本书你可以学到如何选择合适的字体?如何裁剪图片?如何设计封面?如何排版?如何配色等知识。设计师在这本书里分享了很多案例的设计过程和优化过程,包括画册设计、折页设计、唱片设计、网页设计等等,清晰的展示了他的每一步都是怎么思考的,逻辑非常缜密。
虽然里面的案例已经有些历史,但是其设计的方法和理念在今天仍然受用。 
 

02.

《超越Logo设计》

图片

这是一本有超级多干货的logo设计书,作者在书里不仅分享了31条logo设计的实用秘诀,还分享了如何谈业务?如何与客户合作?怎样提高过稿率?如何做好前期的准备工作?如何构思?等问题,它能加深你对logo设计以及logo设计之外的知识的了解。
 
 

03.

《文字怡人》
图片
这本书由日本著名平面设计师高桥善丸所写,虽然设计的是日文,但由于日文中也有很多汉字,所以中国设计师也能从中学到很多东西,另外我推荐他的原因是,通常到达一定高度的设计大师,都不会放下身段去写一些设计技能、设计方法的书,大多都在讲理论,这也使得设计师们错过了很多向大师学习设计执行的机会。
而高桥善丸给了我们这样一个机会,这本书主要是通过分享他的各种字体设计案例,来讲述不同的字体设计技巧,并且这些字体设计案例并不是作为个人练习单独存在的,而是作为真实案例运用在书籍封面设计和海报设计中。
 
 

04.

《设计中的设计》

图片

这本书很多设计师应该都熟悉,由日本当代平面设计大师原研哉所著,出版至今已经被加印了近二十次,足以证明这本书有多牛。
很多年轻的设计师认识原研哉可能是通过小米的logo和KURASHICOM的logo这两个案例,甚是还会因此对他的设计理念冷嘲热讽,如果你读了这本书,我相信你一定会对他有新的看法。在我看来,他对设计的认识已经超越了绝大多数人,也远远超出了技术层面,但他又不像很多大师把设计做成了艺术,而是始终围绕设计的本质:信息传达,来做研究和深化。
什么是设计?什么是视觉传达?设计的目的是什么?无印良品的地平线系列海报是怎么诞生的?等等问题,你都可以在这本书里面找到答案。
 
 

05.

《超级符号就是超级创意》
图片
该书由华与华的创始人华杉所写,华与华是一家知名的战略咨询公司,在设计圈里的争议很大,他们的设计作品可能不太受设计师的认可,但是华与华的方法确实影响了中国的整个策划圈和设计圈。
初读这本书时,其中的很多观点也给了我一种醍醐灌顶的感觉,作者在书中分享了什么是超级符号?如何打造超级符号?现代商业设计中有哪些问题?如何建立企业战略?等知识。
葱爷当时读的是左边黄色这本,现在最新的是右边蓝色这本,据介绍是新增了50页,包含华与华最新的案例和跨年演讲等内容。
 
 

06.

《香港新生代平面设计访谈》

图片

这本书是我去年才读的,书中收集了港澳地区共12位新生代知名设计师,他们来自平面设计、品牌设计、网页设计、字体设计、服装设计、IP设计等多个不同领域,年龄跨越了70后到90后,每个人都有许多经典的代表作,每个人都拿过很多荣誉,他们的故事和发展经历也很精彩。
 
 

07.

《设计工作室生存手册》

图片

几乎每一个设计师都有成为自由设计师,或者是创建设计工作室的梦想,所以这本书值得每一个设计师读一读。读完这本书你将会了解设计师的工作和职责是什么?如何获取客户、筛选客户?如何收费?如何与客户签订合同?如何管理团队?如何与人合作?等多个很实际、很实用的问题。
这一本薄薄的小书,原本是作者写给他儿子的,文风幽默风趣,言辞犀利,快人快语,读起来很带劲。看完以后记得要冷静冷静,别立马急匆匆跑去辞职创业。
 
 

08.

《田中一光自传》
图片
田中一光是日本平面设计领域国宝级的人物,也被誉为无印良品之父、日本设计中心之父,创作过很多经典的案例,获奖无数。这本书详细讲述了他从小到大的经历,以及怎样一步一步成为了享誉全球的设计大师。
老实说,读自传通常不能让你学到什么具体的技能,所以这不是一本教你怎么做设计的书,读名人自传的主要作用是让你对某些事情、某些行业产生兴趣,并可以把对方作为学习的榜样。读完田中一光自传这本书,我深深地“爱”上了他,他的人品和设计才华都深深的吸引了我,让我一度想去买他的其他书籍,并把它作为我人生的榜样。
 
 

09.

《日本版式设计原理》
图片
这本书的内容形式应该是很多设计师都会喜欢的,即:改稿,作者通过展示50个设计案例修改前和修改后的对比效果,从而向大家解释了如何正确的布局?如何正确地使用文字?如何进行正确的色彩搭配?如何正确地使用图片?这四大块内容。
另外,这本书里展示的案例也是非常接地气的商业作品,而不是自嗨稿,所以其中的设计思路和设计技巧可以很容易用到你的设计工作中去。
 
 

10.

《平面设计中的网格系统》
图片
这本书是瑞士知名设计师约瑟夫·米勒-布罗克曼所著,他是第一批把网格系统运用到平面设计中的设计师,网格系统是版式设计中很重要的一个工具,可以使排版更加有章可循、更严谨,在这本书中,作者不但介绍了网格的绘制、网格的分类、网格的使用,甚至还把网格延伸到了建筑设计中,想了解网格系统的人可以读一读。
 
 

11.

《design360杂志》
图片
图片 
 
 
这个年代还会看杂志的人应该已经不多了,看设计杂志的那就更少,然而这本2005年诞生于广州的《design360》却能够存活至今,并且有超过3万忠实的读者,可以说是亚洲最优秀的设计杂志之一了。你既可以购买它的某一期,也可以按年订阅,一年共6期,每一期的内容都不同,包含了平面设计、插画、产品设计、建筑设计、景观设计、设计组织、工作室访谈等内容,这本杂志除了可以拓宽你的知识面、加深你对设计的认知以外,你还可以从中认识到很多国内外的优秀设计师和设计工作室。  
 
图片
以上11本书是我个人觉得不错,值得一读的设计书,当然并不是设计师必读,也不是适合所有人,因为我觉得根本就不存在哪一本书是必读的,但如果你想对设计有更深入的了解,想提升自己的设计认知,选择一两本自己感兴趣的书读一读,肯定是有好处的。没必要买太多,不然肯定避免不了吃灰的命运。 
 
 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》11本值得一读的设计书

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

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

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

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

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



未来情感化界面设计

博博

情感化设计在我们的决策过程中起着至关重要的作用




情感化设计在我们的决策过程中起着至关重要的作用,因为加入情感化的设计可以改变与产品交互的人的整体现实。


人类是一种情绪驱动的物种,我们选择某些产品并不是因为它们有意义,而是因为我们认为它们会让我们感受到不一样的感觉。也正因如此,在未来的界面将在产品设计的基础上使用情感的概念,人们使用的经验将基于智商(IQ)和情商(EQ)。


本文试图展望未来,看看我们将在未来十年内设计哪些接口。我们将仔细研究三种情感化界面设计的互动:


  • 语音

  • 增强现实(AR)

  • 虚拟现实(VR)


未来情感化界面的实际例子


界面如何?即使我们还没有回答这个问题,我们也可以讨论接口可能具有哪些特性。在我看来,我确信我们最终将摆脱充满菜单,面板,按钮的接口,并转向更“自然的界面”,也就是情感化的界面。未来的界面不会被锁定在物理屏幕上,而是会集合五种感官的力量。因此,他们需要较少的学习曲线,理想情况下,根本没有学习曲线。


情商情绪在商业中的重要性


除了使体验更自然并减少学习曲线之外,为情感设计还为产品创造者带来了另一个好处:它提高了用户对产品的采用率。可以利用人类对情绪的行动能力来创造更好的用户参与度。


真实的语音界面


使用语音作为主要界面的产品正变得越来越流行。我们中的许多人使用Amazon Echo和Apple Siri进行日常活动,例如设置闹钟或预约。但是,目前市场上可用的大多数语音交互系统仍然具有自然的局限性:它们不会考虑用户的情绪。因此,当用户与Google Now等产品进行互动时,他们对与机器进行通信具有强烈的沟通感 - 而不是真正的人。系统可预测地响应,并且他们的响应是脚本化的,与这样的系统进行有意义的对话是不可能的。


但是目前市场上有一些完全不同的系统,其中一个是Xiaoice,一个社交聊天机器人应用程序。这个应用程序的核心是情感计算框架,该应用程序的基础是,首先与用户建立情感联系。Xiaoice可以动态识别情绪,并在与相关响应的长时间对话中吸引用户。结果,当用户与Xiaoice交互时,就像是与真人交谈一样。


Xiaoice的局限在于它是一个基于文本的聊天应用程序。很明显,你可以通过基于语音的交互来实现更强大的效果(人声具有不同的特征,例如可以传达强大的情感谱的音调)。


我们中的许多人已经在电影“她”(2013)中看到了基于语音的互动的力量。Theodore爱上了Samantha(一个复杂的操作系统)。这也使我们相信,未来基于语音的系统的主要目的之一将是用户的虚拟伴侣。这部电影最有趣的事情是西奥多没有萨曼莎的视觉形象,他只有她的声音。要建立这种亲密关系,必须产生反映一致性格的回应。这将使系统既可预测又值得信赖。


技术离Samantha这样的系统还有很长的路要走,但我相信语音优先的多模式接口将是语音接口发展的下一章。这样的接口将使用语音作为主要交互方式,并在创建和建立连接感的上下文中提供附加信息。


为Brain.ai设计的语音界面示例(图片来源:Gleb Kuznetsov)


AR体验的演变


增强现实(AR)被定义为现实世界之上的数字覆盖,并将我们周围的对象转换为交互式数字体验。我们的环境变得更加“智能”,用户对手指尖上的“有形”物体产生幻觉,从而在用户和产品(或内容)之间建立了更深层次的联系。


使用AR重新构想现有概念


AR的独特之处在于它为我们提供了与数字内容进行物理交互的非凡能力。它允许我们看到以前无法看到的东西,这有助于我们更多地了解我们周围的环境。此AR属性可帮助设计人员使用熟悉的概念创建新的关卡体验。


例如,通过使用移动AR,可以创建新级别的飞行体验,允许乘客查看有关其班级或当前航班进度的详细信息:


AR在空中客车A380的飞行体验中。(图片来源:Gleb Kuznetsov)


AR帮助我们找到通过空间的方式,并一目了然地获得所需的信息。例如,AR可用于为您当前的位置创建丰富的上下文提示。被称为技术SLAM(小号 imultaneous 大号 ocalization 甲 ND 中号 apping)非常适合此。SLAM允许实时映射环境,并且还可以将多媒体内容放入环境中。


为用户提供价值的机会很多。例如,用户可以将他们的设备指向建筑物,并在其屏幕上了解更多信息。它可以显着减少工作量,并通过允许导航和访问实现轻松的情感体验。


在上下文中提供其他信息(图片来源:Gleb Kuznetsov)


我们周围的环境(例如墙壁或地板)可以成为交互场景,过去仅限于我们的智能手机和计算机。


你在下面看到的概念正是如此; 它使用物理对象(白墙)作为通常使用数字设备传送的内容的画布:


交互式墙的概念 - 在现实世界之上的数字覆盖。(图片来源:Gleb Kuznetsov)


避免信息过载


我们中的许多人都看到了名为“超现实”的视频。在这段视频中,物理和数字世界已合并,用户被大量信息所淹没。



技术允许我们同时显示几个不同的对象。当它被误用时,很容易造成过载。


信息过载是一个严重的问题,对用户体验产生负面影响,避免它将成为AR设计的目标之一。精心设计的应用程序将使用AI的强大功能过滤掉与用户无关的元素。


高级个性化


当系统实时地根据用户的需求和期望来管理内容或功能时,就会发生数字体验的个性化。许多现代移动应用程序和网站使用个性化概念来提供相关内容。例如,当您访问Netflix时,您看到的电影列表会根据您的兴趣进行个性化。


AR眼镜允许创建新的个性化水平,即“高级”个性化水平。由于系统“看到”用户看到的内容,因此可以利用此信息提出相关建议或在上下文中提供其他信息。想象一下,你很快就会戴上AR眼镜,转移到你视网膜的信息将根据你的需要量身定制。



从增强现实走向虚拟现实,创造沉浸式体验


AR体验具有自然的局限性。作为用户,我们在内容和内容之间有明确的界限; 这条线将一个世界(AR)与另一个世界(现实世界)分开。这条线引起了AR世界显然不真实的感觉。


您当然可能知道如何解决这个限制,即使用虚拟现实(VR)。VR并不是一种新的媒介,但只是在过去的几年里,技术已经达到了允许设计师创造身临其境体验的程度。


沉浸式VR体验消除了现实世界与数字之间的障碍。当你戴上VR耳机时,你的大脑很难处理你收到的信息是否真实。关于VR体验如何在最近的将来看起来的想法在电影“Ready Player One”中有很好的解释:



以下是设计人员在创建沉浸式虚拟环境时需要记住的内容:


1.写一个故事


有意义的VR有一个强大的故事的核心。这就是为什么在你开始设计VR环境之前,你需要为用户旅程写一个叙述。一个称为“故事板”的强大工具可以帮助您。使用故事板,可以创建故事并检查所有可能的结果。当您检查故事时,您将看到何时以及如何使用视觉和音频提示来创建身临其境的体验。


2.与角色建立更深层次的连接


为了让用户相信VR中的所有内容都是真实的,我们需要创建与用户所扮演的角色的连接。最明显的解决方案之一是在虚拟场景中包含用户手的表示。这种表示应该是实际的手 - 而不仅仅是一个操纵的复制品。考虑不同的因素(如性别或肤色)至关重要,因为它会使交互更加真实。


用户可以看到他或她的手,看他们看起来像一个角色。(来源:leapmotion)


也可以将现实生活中的一些对象带到VR环境中以创建此连接。例如,一面镜子。当用户查看镜像并在反射中看到他们的角色时,它可以在用户和虚拟角色之间实现更真实的交互。


虚拟现实用户会查看虚拟镜像,并将自己视为VR环境中的角色。致谢:businesswire。


3.使用手势代替菜单


在设计沉浸式VR体验时,我们不能依赖传统的菜单和按钮。为什么?因为通过显示菜单来打破沉浸感相对容易。用户会知道他们周围的一切都不真实。设计师不需要使用传统菜单,而是需要依赖手势。设计界仍然在定义使用手势的通用语言,参与这项活动是有趣和令人兴奋的运动。棘手的部分是让用户熟悉并可预测手势。


Hovercast VR菜单试图将现有的交互概念重用于VR体验。不幸的是,这个概念可以打破沉浸感。新媒体需要新的互动模式。


4.与VR环境中的元素交互


要创建一个感觉真实的环境,我们需要让用户能够与该现实中的对象进行交互。理想情况下,环境中的所有对象都可以以允许用户触摸和检查它们的方式进行设计。这些物体将充当刺激,并将帮助您创造更加身临其境的体验。触摸对于探索环境非常重要; 婴儿在头几天获得的最重要信息是通过触摸获得的。


5.VR


VR中分享情感有一个真正的机会,成为一个新的社会体验水平。但为了实现它,我们需要解决一个重要问题,即将非语言线索带入交互中。


当我们与其他人互动时,我们获得的信息的重要部分来自肢体语言。惊喜,厌恶,愤怒 - 所有这些情绪都在我们的面部表情中,在面对面的互动中,我们从眼睛区域推断信息。当人们在VR环境中进行交互以创建更真实的交互时,提供此信息非常重要。


好消息是头戴式设备(HMD)将很快涵盖情感识别。几乎任何人与人之间的互动都将受益于VR中的面部表情。


在VR空间分享情感(来源:MITReview的 Rachel Metz )


6.为VR环境设计声音和音乐适合


音频是沉浸式体验的重要组成部分。如果不为环境设计声音,就不可能创造出真正身临其境的体验。声音既可以用作背景元素(即风的环境声音),也可以用作方向性的。在后一种情况下,声音可以用作提示 - 通过播放方向性(声音来自哪里)和距离(可以将用户的注意力集中在特定元素上)。


在为VR设计音频时,制作声音3D至关重要。2D声音不能很好地用于VR,因为它使一切都太平。3D声音是您可以在周围的各个方向听到的声音 - 前方,后方,上方和下方 - 遍布整个地方。您不需要专门的耳机来体验3D声音; 可以使用HMD的标准立体声扬声器来创建它。


头部跟踪是良好声音设计的另一个重要方面。让声音以逼真的方式表现至关重要。这就是为什么当用户移动他的头部时,声音应该根据头部运动而改变。


7.预防晕车


动是VR的主要痛点之一,这是一种在视觉感知运动和前庭系统的运动感之间存在分歧的情况,而让用户在体验VR时保持舒适至关重要。


有两种流行的理论导致VR中的晕动病:


  • “感觉冲突”理论:根据这一理论,晕动病的发生是由于预期的运动和实际经历的运动之间的感觉上的不一致。

  • “眼动”理论:在“ VR书:虚拟现实的以人为本设计 ”一书中,杰森杰拉德提到晕动病的发生是因为保持场景图像在视网膜上稳定所需的不自然的眼球运动。


以下是一些提示,可以帮助您防止用户接触到病箱:


  • 身体运动应与视觉运动相匹配。有时即使是小的视觉抖动也会对体验产生巨大的负面影响。

  • 让用户在移动场景之间休息(这在VR体验非常动态时尤为重要)。

  • 减少虚拟旋转。


结论


当我们考虑产品设计的现代状态时,很明显我们只是处于冰山一角,因为我们仅限于平面屏幕。


我们正在目睹人机交互(HCI)的根本转变 - 重新思考数字体验的整体概念。在接下来的十年中,设计师将打破玻璃(我们今天所知的移动设备时代)并转向未来的接口 - 复杂的语音接口,先进的AR和真正的沉浸式VR。当谈到创造一种新的体验时,必须要明白我们唯一的边界是我们的大脑告诉我们它必须始终如一。



文章来源:站酷   作者:Pursuer设计


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

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

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


如何培养设计美感,这个方法掌握了,想不进步都难!!

lanlanwork


1.从大量阅读开始

为什么我们读小学时候,每天很早去学校晨读,目的通过这样刻意练习加深学习记忆。

长久以往,我们对文字理解,对写作文就会构建起丰富的背景知识。

那么在设计中也是一样的,在前期,一定要每天坚持大量的阅读,培养你的眼界。

阅读什么呢?我觉得可以针对性一些,比如:

 

a.大量看UI设计作品

网上因为作品有好有坏,如果你早期无法判定好的作品,可以去看一些获奖的作品,比如kdesignaward、Adobe设计大奖,IF设计大奖等。

图片
图片
Bomapp(kdesignaward)
图片
DuerOS(百度车联网)kdesignaward

 

b.创意性网页UI作品
图片
图片
图片

 

c.品牌设计作品
图片
图片

 

d.插画设计作品
图片
图片

 

e.版式设计作品
图片
图片
图片
当然不止这些,比如你还可以看看一些装置艺术、科幻艺术、三维作品、摄影作品、文化类作品,总之早期一定要坚持大量阅读。
我们大量阅读是为了建立丰富的背景知识库,积累越多,你的审美自然也会跟随提高,当然做设计的想法就会有更多。

 

2.什么情况下知道,我的审美提高了?

前期大量阅读了很多作品,这时候你需要把牛逼的作品收集起来,等半个月后,再去看看之前搜集的作品,如果发现有部分很丑,那么恭喜你又往前走了一步。

成长是需要一个过程,切忌操之过急,关键是需要自己动手去执行,不能等着被改变。

图片
https://www.pinterest.com/Tonyrosie666/_saved/

我们可以去建立一个图板,虽然很多人有这样做,但是真正做到复盘,然后去删除之前采集的人很少。

如果不去复盘,不去思考,进步当然会缓慢,抱怨也是没用的。

低头赶路,也不要忘了抬头路,我们要随时知道是朝着正确的方向努力。

 

3.学习一些理论

当看了大量的作品,对美有些认知,但是你还是不知道怎么表达美?这时候,你需要学习一些理论的支撑。

我们通过阅读大量作品构建审美认知,通过阅读书籍、文章理论构建审美体系。

比如,德国工业设计师迪特·拉姆斯提出好设计十项原则:

好的设计是创新的
好的设计让产品更加实用
好的设计是美观的
好的设计使产品更易理解
好的设计师谨慎克制的
好的设计是诚实的
好的设计是经典永恒的
好的设计是细致的
好的设计是保护环境的
好的设计要尽可能简单

又或者:

我们可以从形、色、质、字、构、动等6个维度去拆解,又或者可以利用格式塔心理学来进行设计质量的评估,比如我们常说的相似性、亲密性、连续性、焦点归一等。

再比如,当你看到一个吸引你的设计作品,你可以这样思考吸引你的点在哪?

比如:是图形运用很巧妙还是质感表达很新潮?又或者色彩创意很棒,一般一个好的设计都会满足形、色、质、字、构等,至少要3个以上维度。

当然还可以通过看书积累对设计美的表达,总之就是要大量输入,构建丰富的知识库。

 

4.推荐一些网站

提升审美必须每天坚持看,这个是毋庸置疑的事情。这里,推荐一些我常常去看的网站。

a.savee

图片
https://savee.it/

 

b.pinterest

图片

https://www.pinterest.com/

 

c.designweek

图片

https://www.designweek.co.uk/

 

d.designcollector
图片

https://designcollector.xyz/design

 

写在最后

提升设计审美,前期大量阅读只是一个开始,我们还需要做的是不断思考总结。

同时还需要学习设计理论,这些我们可以通过看书或者和别人交流,在讨论过程中,你自然知道他们是怎么评价这个设计的。

路漫漫其修远兮,学习是一个长期的过程,培养审美也是。

积小步,成大步,没有一蹴而就的成功,一切都是量变的积累。

 

原文地址:功夫体验设计(公众号)

作者:Tony

转载请注明:学UI网》如何培养设计美感,这个方法掌握了,想不进步都难!!

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

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

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

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

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



提高用户体验的10个优秀案例

lanlanwork


一、特殊场景下的差异化设计

根据用户使用场景和特殊情况出现时,产品会结合变化呈现不同的功能或者服务,这种差异化的设计更能体现情感化设计的一面,提高用户对于产品的认可度。

腾讯新闻 APP 在东航事故出现时,在底部操作栏新增了祈祷的图标,方便用户表达祈祷的心情。特殊情况下的差异化设计满足了用户的情感需求,也体现出了产品的温度,带给用户更强的粘性。

图片

 

二、优化指引路径提高操作效率

通过提取本机号码一键登录减少了繁琐的注册流程,提高了登录的效率,减少用户的操作路径。在登录时都需要用户同意一些条款协议等内容,当用户未勾选时通常都是提示用户,指引用户选择后操作。这样的设计增加了用户的操作路径,使用体验不是很好。

网易云音乐 APP 在同样问题出现时,提供了一个弹窗进行指引,用户无需重复操作,直接点击“同意并继续”即可完成登录。在用户误操作出现时,无需用户过多的操作路径,给出了更高效的操作解决方案,提高了用户使用体验。

图片

 

三、温馨提示降低用户的过度依赖

随着互联网时代的到来,太多的娱乐产品占据了我们的时间,过度依赖和使用耗费了大量时间。特别是短视频的走热,刷视频容易带来过度依赖,影响用户的视力等健康问题。

抖音 APP 作为用户量庞大的短视频产品,提高用户体验至关重要。为了降低用户的过度依赖,提示用户注意休息,特意设计了温馨提示。用户可以设置提示时间和进行管理,APP 也会定期提示用户。温馨的设计提高了用户对产品的好感度,也能辅助用户做好时间管理,以免过度依赖而影响休息时间。

图片

 

四、隐藏式设计提高版面利用率

对于用户来说希望内容具有较高的可见性,提高内容的曝光度才能被关注。在控制内容的优先级时,通过隐藏式设计可以满足更多内容的呈现,不过需要做好隐藏内容的引导,提高隐藏内容被发现的概率。

网易云音乐 APP 在云贝中心签到设计中使用了隐藏式设计,将签到相关的附属内容隐藏在展开卡片中,为更多主要内容提供了展示空间。为了提高展开的交互设计,在每天初次访问时会默认展开,然后再收起隐藏,这个动态的指引提高了这个交互动作的曝光度。利用隐藏式设计满足了产品需求,通过动作引导提高了用户知晓度,是一个具备较好体验的设计解决方案。

图片

 

五、更人性化的模式设计

随着用户群体的跨度增加,为了带给不同年龄段用户更好的体验,众多产品都针对不同用户提供了定制化模式。特别是针对老年用户而进行适老化设计,还有针对青少年儿童设计的时间管理等,不同模式满足了更多不同年龄段的用户需求。

比如优酷 APP 在个人中心设计了“模式切换”,点击可以设置长辈模式、青少年守护、儿童守护。针对不同年龄段对于产品的使用需求进行定制化,带给用户更加人性化的使用体验。

图片

 

六、定制化的播放页模式设计

不同用户对于产品的使用需求有所差异,固定的模式虽然可以减少产品的开发成本,但是单一的体验不够人性化。针对不同用户提供更多选择,可以带给用户更加人性化的体验。

MOO 音乐 APP 为了满足不同用户对于播放页的体验差异,设计了播放页模式定制化切换,用户可以选择以专辑封面或者背景大图进行展示。为了直观的方便用户做出选择,模式设计以可视化的图形展示,便于用户更快的做出选择。定制化的模式虽然把繁琐的事情留给了产品开发者,却把更好的体验带给了用户。

图片

 

七、缩放预览满足对细节的体验

随着短视频走进更多用户的视野中,短视频的形式也是越来越丰富,满足不同用户的使用体验至关重要。特别是图片形式引入短视频平台,对于细节的体验因人而异,缩放画面满足对于细节的体验才能更加人性化。

抖音 APP 无论是针对视频还是图片形式作品都可以缩放预览,配合缩放的手势交互带给用户放大细节查看的体验,满足了不同用户对于细节的需求。手势交互也是产品设计师需要多多探索的方向,更加便捷的操作有助于提升用户对于产品的使用体验。

图片

 

八、满足用户好奇心的设计

用户从小白到依赖是一个逐步探索的过程,好奇心的用户会点击尝试任何的功能,甚至连一个图标或者 LOGO 都希望获得彩蛋。作为设计师来说设计出来的每一个元素都需要考虑用户体验,给予反馈式的设计才能满足好奇心的驱使。

爱奇艺 APP 首页左上角的 LOGO 展示你有注意到吗?有没有尝试去点击体验,作为好奇心驱使特意尝试了一下。点击之后会跳转到皮肤等设置的页面,为该功能的曝光新增了首页入口,用户也可以通过个人中心“装扮”进行设置。该设计解决方案不仅满足了用户点击的好奇心,也赋予了 LOGO 展示功能化的作用。

图片

 

九、可以标记和叠加的点赞设计

点赞设计在众多产品中均有体现,这是用户表达对于内容的喜欢,以此来增加作者和用户之间的互动性。为了吸引用户点击和带来差异化的体验,点赞设计也被脑洞大开,在表情化、叠加点赞、点赞标记、微动效等方向不断探索。

小宇宙 APP 在播放页中对音频进行点赞时,可以多次叠加点赞,点击之后会针对音频播放进度条进行点赞标记,反复点击也会使得进度条纹增高,以此来强化点赞的程度。该设计解决方案不仅丰富了点赞的设计,也能通过标记和进度条纹的高度让用户记住关键的部分,方便后续回顾的时候知道哪些时间段是重要内容,提高用户对于产品的使用体验。

图片

 

十、差异化的短视频推荐设计

作为新闻资讯类产品来说,大部分用户的习惯还是图文结合的阅读形式,不过随着短视频的出现,改变了一部分用户的阅读习惯。通过短视频获取新闻资讯、搜索指定内容、学习生活技巧或者专业技巧等均可实现,改变了用户的阅读习惯和获取内容的形式。

央视新闻 APP 作为新闻资讯类的专业平台,在满足用户阅读新闻的同时,也跟进了短视频观看新闻的体验。在底部标签栏以舵式导航的形式作为短视频新闻入口,点击之后会有推荐视频展示,差异化的推荐设计不仅提高了内容的曝光度,也吸引了用户的关注度。

图片

 

小结

本期为大家总结了提高用户体验的十个优秀设计解决方案,体验、分析、总结是为了掌握别人的设计经验,积累设计灵感并运用到项目设计中。灵感的积累离不开总结,探索细微之处的差异化对于 UX 设计师而言至关重要。

本期分享到此结束,仅为个人角度的体验总结,希望可以带给大家更多灵感启发。

 

 

原文地址:黑马家族(公众号)
 
作者:黑马青年
 
转载请注明:学UI网》提高用户体验的10个优秀案例

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

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

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

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

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

To B端界面设计要点

博博

To B端界面设计要点精彩分析,希望能帮到在B类产品项目中的你:)

写在前面

 

B端产品和C端产品作为两种很不一样的产品形态一直服务着广大的用户。它们各有各的作用,有很多B端产品还是一个非常庞大的系统工程,甚至有很多的公司就是专注于开发B端产品,我从业以来曾经参与过很多的(两位数)B端产品项目,有的是从0到1的开发,也有的是在原基础上更新优化,下面就从我个人的设计经验整理出一些观点。

 

什么是B端和C端产品


概念:B端面向商家和公司,组织;C端面向普通的大众用户; 

B端是指:business--泛指生意,商业,公司和组织; To B即是面向商家和公司,组织,是给专职专业的用户使用的产品,例如微信公众平台给制定的公众号持有人使用,某公司的指挥调度系统,某停车管理系统,以及相关的后台管理系统等。C端是指:consumer--消费者,顾客,用户,是指被设计为能给普通大众使用的产品;To C即是面向普通的老百姓用户,例如微博,QQ,微信,新闻客户端,淘宝等;

  

几乎男女老少都会使用的微信


面向专职岗位人员使用的后台管理系统


两者的不同点


C端产品追求极致的体验,;B端产品追求简约、高效的完成工作 

C端产品是为了满足用户某一主要的、固定 的核心需求,因此设计的目标是围绕着这个核心需求,简单直接解决用户的需求,追求的是极致的用户体验,因为对C端产品而言,产品不好用,体验不好,用户就流失了,也就没有盈利的可能了。

B端产品的目标是帮助用户把大量的复杂的工作,整理归纳,使得他们能高效便捷的完成工作,追求的是产品的简约实用,提高效率,能很好的处理工作,有时候为了达成业务目标,甚至不惜牺牲部分用户体验。


To B端界面的设计应该要重点注意什么


很多新手设计师在接到新的需求的时候会没有头绪,不知道如何开展工作,在不了解业务的前提下很多时候被产品牵着鼻子走。那么问题来了,是拿到产品给过来的原型之后就开始设计了吗?又或者没有原型只有一些简单的描述,又该如何开展呢。以下是我的几个建议


1,要了解业务

因为B类产品不同于C类产品,并不是大多数人日常都会很普及用到的,所以就需要设计师主动的去了解行业,了解业务需求,不同的行业有不同流程和规则,甚至是一些特殊的需求;启动用户群体调研和用户使用场景调研,有条件的可以开展用户问卷调研甚至面对面访谈,整理出用户的使用流程,调研后要求设计师自己能非常清楚这个产品的作用、用户人群、和在特定的使用场景下的使用目标、和不同情境下的操作流程等。

 

2,交互流程设计

B端产品往往包含了比较复杂的业务,那在复杂的业务背景下如何通过设计来提高用户的工作效率,这就对设计师有比较高的要求。在交互流程上要整理出一些操作路径,要考虑它们的层级关系,先后顺序,行业习惯等。通过操作体验给用户留下明确的印象,可以降低用户的学习成本,提高产品的易用性。

 

To B端界面的视觉设计


①、界面布局,分固定的和自适应的分辨率两种,一般来说自适应的布局比较适合操作和展示内容比较多的系统,固定的宽度的分辨率的布局一般多用1200px以适应适配更多低分辨率的显示器,现在的大屏幕设备非常普及了,很多系统转为以1400px的宽度来设计,至于用哪一种的布局要取决于产品的功能了。

界面布局视觉上的区分;当我们设计一个系统的主页到时候,B端产品通常会分为很多功能模块,即便产品经理会提供原型给UI设计师,他们有时候往往会在原型按照他们的想法来布局,这时候设计师需要主动地去了解业务去弄清楚各个模块的主次之分。通过调研后,整理归类任务模块,按照业务流程和规则来区分模块优先级。(图例)

②、颜色,B端系统的界面颜色也非常考究,按照系统的功能特性来定,一般常规的系统界面都是以白色底色配以一种主色调的颜色来搭配的;第二深色的底色界面,深色界面能起到一种很好的衬托界面内容(如大量文字,数据,图形,视频等)的作用,深色界面再附以一些点线面和光的元素就能营造出一种炫酷的科技感。三是现在流行渐变色,渐变色和纯色会给人一种缤纷,轻松愉悦,有活力的年轻的感觉,所以大家在设计不同的B端系统界面的时候要考虑产品的功能性质来选择用颜色。

③、导航,导航可以解决用户在访问页面时:在哪里,去哪里,怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。一:侧栏导航:可将导航栏固定在左侧,提高导航可见性,方便页面之间切换;顶部可放置常用工具,如搜索条、帮助按钮、通知按钮等。适用于复杂的、功能多的中后台的管理型、工具型网站。二:顶部导航,顺应了从上至下的正常浏览顺序,方便浏览信息;顶部宽度限制了导航的数量和文本长度

④、按钮,通常B端产品分为较多的功能模块,也对应有很多不同的按钮,在设计按钮的时候,我们第一要分清楚哪些按钮对应哪些功能,在设计上要做出区分。

⑤、表格,表格的设计遵循简洁和易读性为主,表里面的文字内容是主要的设计重点,例如信息层次的明确、对齐的原则等。


⑥、弹窗,不仅有操作反馈的作用,同时又是一个承载更多的操作功能的容器,弹窗的设计要有规范性,组件化。


视觉设计方面除了常规的设计流程,我想说的是综合考虑和相关的系统衔接,体验的一致,视觉风格的统一和品牌的建设。

 

设计师还能做些什么


虽然设计师和产品经理以及开发已经沟通过相关的业务需求,但设计师一定要懂得切换角度来看待问题,一方面设计师的视角相对注重视觉上和交互上的设计细节;第二我们也要懂得站在开发和产品的角度考虑,哪些效果能不能实现,也是需要我们和开发同事密切配合的;另一方面要更加注重代入用户的角度来思考,这样才能做出合理适用的设计,甚至能挖掘新的需求,提出一些很好的建议,给产品和项目带来加分和利好。


总结


因为B端产品业务需求,用户目标,使用场景和用户群体都不相同,所以设计师接到B端产品的设计需求时一定要先了解清楚业务,做好前期调研,其次要多站在用户的角度来看待和设计产品。其实C端和B端产品,它们都要求要简单实用和有效准确,都是为了更好的满足用户的需求,解决用户的痛点。做好了以上这些关键点,无论遇到多么复杂的B端产品,我相信所有问题都会迎刃而解。


文章来源:站酷   作者:chrisHCZ


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

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

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

没想到用上圆形后,设计感瞬间强了很多!

lanlanwork


1.圆的线性语言

图片

线性圆形,它的粗细可自由变化,根据当前设计语言的风格调性特征决定的。线性圆形的作用绝大部分都是装饰,丰富画面视觉感官,它们大多情况下都是以单色或者黑白灰出现。

图片

如果我们把上图的圆形线条去掉,设计感自然就弱几分。当然如果非要去掉也不会影响阅读,有了圆形形式感自然增强许多。

图片

LOGO符号应用,变为粗线条

图片

UI界面中应用圆形

 

2.圆形的渐变语言

渐变圆形基本都是以粗块面为主,它可以呈现出丰富细腻的质感、厚度、虚实变化的光影。

图片

Sedigas

 

西班牙天然气协会Sedigas的品牌LOGO更新,通过圆形设计语言提取,在多场景下贯穿圆形的应用。

Sedigas(可点击图片查看视频或 点击Sedigas查看原文中内视频)

 

在品牌视觉语言动态介绍过程中,我们可以看到圆形的应用和丰富的变化,圆形与物理世界万物连接。

来看看其他案例

图片

图片

 

3.圆形面的特征

当圆形以块面的姿态出现时,它更随和,更加温润。块面的圆形和线性的不一样,块面圆形更加厚实,整体性,更聚焦。大部分情况下作为背景或者承载内容的容器。

图片

UI界面中,有时候圆形也可作为功能承载,操作区域更直观可视化。

图片

当以时装饰元素使用, 圆形一般都会用作强调一些重要信息,同时也增加设计形式感,张力,可玩性。

图片

图片

图片

 

4.圆形参数化特征

参数化圆形,它简单纯粹,以一种单一形态不断重复几个甚至几十个上百个的相同的形态,这些重复出现的圆形,大部分都是以装饰视觉效果呈现。

图片

我们可以看到大部分圆形以线性姿态不断重复,而且重复中带有规律可循,比如朝着某个方向拓展开,这个方向可以是斜方向、水平或者垂直。

图片

以同心圆的方式向外计算扩散开。

图片

图片

图片

 

5.圆形的肌理

上面我们讲到了圆的线,块面圆、参数化形态和渐变特征,那么在最后这个模块,我们可以看到圆形还有一种特殊的存在,那就是肌理,这里说的肌理不是贴图的那种材质,而是通过几何演变来实现的,比如通过多条线的组合而形成,下面来看看。

图片

上图的圆形,由多个长条几何形状不断重复形成,这些重复几何条状物就形成了一个大圆形的肌理视觉特征。

图片

右上角圆形线性阵列,通过重复小短线条而形成,在一些特殊场景下,这种阵列圆形图还可以用来打造视觉记忆点或者品牌DNA序列。

图片

图片

圆形应用远远不止这些,比如还有立体、真实物理质感,还有多形态、空间感营造等等。

 

今天列举出来的这5种形态是我们设计中常用,不过在使用时候还是需要依据产品视觉调性合理应用,形式要追随功能。

原文地址:友设青年(公众号)

转载请注明:学UI网》没想到用上圆形后,设计感瞬间强了很多!

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

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

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

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

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


设计效率工具趋势 | 综述篇

lanlanwork


一、日常积累

设计师日常除了应对当下的需求,每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法,也可以让我们潜移默化中得到提升。

Panda|全而美的设计订阅平台

图片

Panda帮助设计师不错过每天的设计灵感和资讯,包括新的设计方法理念、流行潮流、也有一些新产品推出。我们可以把Panda替换Chrome主页,每次打开浏览器页面都可以随时看到最新的设计资讯。一些英文的订阅也可以用chrome浏览器的翻译功能可以粗略查看。

地址:https://app.usepanda.com/#

 

Topys|创意内容平台

图片

全球顶尖创意内容平台,作为中国成立最早、最受欢迎的创意垂直网站,以 “Open Your Mind” 为宗旨,始终专注在全球创意、艺术、灵感、人文领域寻找最有质感的声音。

地址:https://www.topys.cn

 

Voicer|分享生活和设计的美学

图片

我们总在生活中与「一瞬间的感动」相遇。Voicer的理念即是发现这「感动」, 将它传递给更多热爱生活的人们。内容包括创意内容品牌、在线杂志等。致力于分享生活和设计之美。

地址:https://www.voicer.me

 

Design better|优质设计读物网站

 

涵盖设计商业思维、产品设计原则、设计系统等关于推动设计团队前进的实践读物,同时提供PDF和有声格式。

地址:https://www.designbetter.co

 

二、研究分析

设计师在调研过程会研究用户、记录用户的行为和需求,会使用一些高效的记录工具。同时繁多的调研的信息需要汇总整理,协作整理,这里会推荐一些记录和整理的工具给大家。

Noted|录音笔记好工具

图片

Noted 是一款将录音和笔记相机相结合的软件。我们做访谈用户或做会议纪要的时候,经常错过记录的内容,如果通过一些软件录音的话,后期回听需要比较多时间成本。Noted可以在记录笔记的同时记录输入文字的时间点所对应的录音,输入的每个字的时间点都会对应到。当内容没记录下来时可以随时跳到对应时间的录音进行回听,方便在漫长的录音文件中快速检索。

 

Marginnote|文献收集箱

图片

重塑学习方式的阅读笔记工具,更加高效阅读书籍和学习,可以在阅读时摘录笔记,制作学习卡,提取关键词,根据笔记生成思维导图,梳理知识框架。非常适合阅读专业书籍,阅读论文以及复习。

地址:https://www.marginnote.com/chinese/home

 

GoodNotes|手写笔记

图片

一款功能强大的手写笔记软件,拥有多种笔记封面和纸张模板可以选择,支持自定义模板,可以简单处理图片,可以导入pdf、ppt等文稿并做标记,也适合做电子手账。

地址:https://www.goodnotes.com/zh-cn

 

腾讯文档|在线协作

图片

调研阶段方便多人一起搜集资料和汇总,多人同时在线编辑,内容实时同步。随时随地高效协作,轻松创作。

地址:https://docs.qq.com/home

 

Xmind|思维导图

图片

功能强大的思维导图软件,极简设计,流畅体验,多种结构图风格选择,方便资料的汇集和思路的整理。

地址:https://www.xmind.cn

 

三、设计创作

当设计目标确定时,接下来进行具体的创意设计。设计师除了通过脑暴进行发散方案以外,一些高效的设计工具可以让我们事半工倍。

3.1 灵感搜集

Collect UI|界面灵感

图片

UI设计灵感库,基于dribbble平台精心挑选优质内容,提高效率便捷,为设计师提供专项更好的灵感。同时支持邮件订阅推送。

地址:https://collectui.com

 

Adobe Color|配色灵感

图片

Adobe color不仅从各个维度解决了我们的配色需求,同时也提供找图需求。其中包含 9 种智能调色模式可以选择。拾取主题色、拾取图片中的渐变色、协助工具可以合理帮助检查不同颜色的对比、探索behance趋势。

地址:https://color.adobe.com/zh/create

 

Useanimations|图标动效灵感

图片

图标动态效果库,当绘制的图标需要一些巧妙的微动态效果时可以参考。

地址:https://useanimations.com/index.html

 

3.2 设计打磨

FigmaEX|插件可视化

图片

当插件特别多时候,FigmaEX极大的改善了Figma中使用插件的体验,将插件可视化。可以进行展开,同时显示插件的名称与图标。可以通过拖拽调整插件的顺序,调节高度。

 

Autoflow|流程图插件

图片

输出交互设计稿的时候,方便快捷的在不同画板之间连线,提升输出效率。

地址:https://www.figma.com/community/plugin/733902567457592893/Autoflow

 

Skewdat|倾斜插

图片

这是一个非常简单实用的 Figma 插件,它可以帮你将任何形状元素倾斜过来。

地址:https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio

 

Undraw|插画素材

图片

最棒最全的插画库,支持快速搜索,一键调整颜色。

地址:https://undraw.co/illustrations

 

Magic Eraser|轻松移除杂物

图片

一款免费的在线服务,它通过 AI 自动去除图片中不需要的部分,只需要上传图片,等待几秒钟即可。用鼠标把不要的部分划掉,松开鼠标就会闪几下,被划掉的部分就消失了,比如去水印之类的小东西,如果用 PS 的图章,估计要十来分钟,而用 Magic Eraser 就几秒钟,简单易用,推荐使用。

地址:https://www.magiceraser.io

 

3.3 设计验证

Checklist Design|设计清单

图片

设计输出后可以通过这个清单去做最后的检查。网站列举了一些通用场景(页面、元素、流程、主题、品牌)下的基本设计要素。可以检查你的设计在这些场景下是否符合规范。样式、颜色、命名、易用性等是否合适。

地址:https://www.checklist.design/?ref=prototyprio

 

四、测试评估

好的方案不是一蹴而就的,设计方案需要不断的打磨和迭代。方案需要持续和用户进行沟通和测试,才能得到完善的方案。也需要和开发工程师不断沟通,以达到最佳的实现效果。

4.1 用户测试

腾讯文档|在线收集表

图片

用户测试阶段方便高效的收集用户反馈,一般用于定量的用户测试。

地址:https://docs.qq.com/

 

Hawkeye|眼动追踪工具

图片

一般的眼动跟踪设备比较昂贵,使用繁琐。这个名为鹰眼的眼动追踪APP,可以通过手机前置摄像头捕捉用户在使用产品时的视觉动向。

地址:https://www.usehawkeye.com/?ref=prototyprio

 

4.2 评估还原

CoDesign|腾讯自研设计协作平台

图片

覆盖产品经理、设计师、工程师协作需求。设计交付更轻松,有效管理和使用设计资产。

地址:https://codesign.qq.com/

 

Pixel Eye|高效视觉还原

图片

在项目上线前设计师都会对最终的产品实现效果进行走查,以保证设计还原的准确性,体验的流畅性。这是一款视觉还原工具,帮助前端工程师在页面重构阶段就能快速发现开发稿与视觉稿的差异,实时对比、实时修改,减少工程师与设计师的沟通成本,提升整体开发效率。

地址:pixeleye.暂未对外开放敬请期待

 

五、对外宣传

设计完成后汇报展示、产品的宣传包装等,提供更便捷优秀的展示形式。

5.1 效果展示

Mockup World

图片

样机的类型全面而且免费,综合质量很高。

地址:https://www.mockupworld.co

 

ls.graphics

图片

素材非常优质精美,有免费和付费的资源。

地址:https://www.ls.graphics/#UI

 

5.2 在线作品集制作

Adobe Portfolio

图片

主要面向设计师群体,帮助设计师建立个人在线作品集。几分钟就可以建好一个作品集网站,提供精美模板选择。最大的特点是易于操作,无需懂网页程式,都能在建立一个网站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收费。已订阅用户可免费使用。

地址:https://portfolio.adobe.com/start

 

Portfoliobox

图片

针对设计师或者创意人员的作品展示工具,可以直接在网页浏览器中搭建属于你的作品展示平台。

地址:https://www.portfoliobox.net/cn/

 

结语

此综述篇大家有了比较整体的了解,在设计流程中每个环节,介绍了一些比较好用的工具,后续的设计工具系列文章会针对某一环节进行更深入的探索。

图片

感谢阅读,以上文章由腾讯ISUX团队创作,版权归腾讯ISUX所有,转载请注明出处,违者必究,谢谢您的合作。 

 

原文地址:腾讯ISUX

作者:ISUX设计

转载请注明:学UI网》设计效率工具趋势 | 综述篇

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

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

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

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

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



B端产品-StreamLake-RTC

lanlanwork



(本作品所有数据均为Demo演示,非真实数据,知识产权属快手所有,未经许可不得转载)

(本作品所有数据均为Demo演示,非真实数据,知识产权属快手所有,未经许可不得转载)

 

原文地址:站酷
作者:三鱼先生

转载请注明:学UI网》B端产品-StreamLake-RTC

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

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

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

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

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



日历

链接

个人资料

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

存档