首页

交互长篇|B端UI设计师的交互文档应该怎么写?

资深UI设计者

1.1 交互文档是什么

交互文档,是一份用来解释项目交互方式、内容、规则的说明文档,也叫 DRD ( Design Requirement Document )。

在过去的分享中,我们有解释过,B 端项目会包含大量的交互内容,需要前期绘制交互原型来展示和确认交互方案。

如果是比较简单的小型项目,或成熟产品的小迭代,那么这样的连线图确实就足以表达交互的意图和方案了,写太多注释文字反而会画蛇添足提高观看者的认知成本。

但是,如果项目和展示的流程内容,逻辑非常复杂,包含非常多的选项和状态,那么单靠原型和连线是绝对不够的,添加更多的图文说明就变得非常有必要了。

同时在团队协作场景中,就需要将这些内容制作成一份规范的 “文档”,用来进行统一的展示、备份、归档。

所以做交互光靠画交互原型是不够的,“文档” 就成为必要的输出成果。

1.2 它和产品文档的区别

在产品侧(非开发),文档就有好几类:

- 商业需求文档:BRD,Business Requirement Document

- 市场需求文档:MRD,Market Requirement Document

- 产品需求文档:PRD,Product Requirement Document

- 交互说明文档:DRD,Design Requirement Document

- 设计规范文档:DGD,Design Guidline Document

BRD 和 MRD 是一个产品经理行业内部也在反复科普讨论的东西,和我们没多大关系可以暂时忽略。设计规范文档 DGD 大家应该也有概念,比较容易辨识,也不需要在这里强调。

而产品需求文档 PRD,是和交互文档最撞脸的文档类型。它们的文档规格、样式几乎一致,还包含大量界限模糊、相互交叉的内容范畴,会对新手的理解造成很大的不便。

要理解产品文档和交互文档的核心差异,就得从他们各自的工作职能说起,产品经理的主要产出是解释产品要做的功能和逻辑,所有的原型和连线的目标都是为了解释功能本身。

部分产品经理会 “顺带” 在这个基础上增加交互的元素,以及相关的说明。这恰恰是问题的关键所在,因为产品经理制作产品原型的过程是可以覆盖一部分交互信息的,所以很多设计师也天真的认为交互内容是应该由产品来出的。

这当中一定要关注里面的 “顺带”,因为一份有效的 PRD 主旨一定不是以交互为核心的,在面对需要大量图例、连线、方案、解释的交互问题下面,产品经理往往选择直接跳过,只把功能描述清楚,剩下的就交给交互设计师还是 UI 设计师来完成具体的交互方案。

所以,交互文档就是在产品文档的基础上,进行交互内容的补充,专注于解释项目的交互内容,让设计师和前端开发可以更直观得理解后续的工作内容。

来自 UEDART 的付费文档,案例地址:http://vip.uedart.com/interactive.html

交互文档和产品文档是相互独立和补充的,当产品文档无法完成对产品交互的有效解释时,我们就应该选择输出独立的交互文档,来提升项目协作的效率。

2.1 主流的交互文档工具说明

主流的交互文档输出有三种方式:

1. Axure/墨刀 导出

2. 一般文档制作

3. 线上 Wiki 记录

Axure 和墨刀是用来制作产品原型的软件工具,也是目前在产品经理、交互设计行业中应用最广泛的原型工具。

它的主要优势,在于可以比较方便的制作可交互的组件、连线、导出。

当然,光制作原型图并不能叫交互文档,它们还提供了比较全面的内容标注、文本记录、图形绘制的功能。

这就可以让我们完成原型绘制以后,结合页面结构的管理,添加交互文档所需的其它信息,并最终输出文件。

而在一些比较传统的行业或外包领域,使用的记录文档往往要使用 Word 或 PPT(方便开会演示或要打印)。这就要在原型完成以后,导出原型图例,并使用这些文档软件进行文字的记录和连线。

受限于 Word、PPT 的布局限制(强行分页),使用它们做交互文档是非常难受的,并且这些文档需要保存到本地,存在各种文档版本管理的问题。

所以还有另一部分也希望使用普通文档格式记录,并满足云端同步、备份、版本管理的团队,就会使用 Wiki 类的工具来制作交互文档。如语雀、飞书、Confluence、Notion 等工具。

如果只是一些比较小的项目迭代、一次性使用的交互文档,使用前两种方法都可以胜任。而真正大型、系统性的交互文档,往往都使用团队内部的 Wiki 进行创建和管理。和设计稿不同,这些使用了内部账号或需要内网访问的文档资料,是不会没事发到网上来分享的,这也是在网上找不到完整交互文档的主要原因。

2.2 B端设计师的交互文档工具建议

和你们网上可以找到的大多数交互设计干货不同,我即不推荐你们使用 Axure/墨刀 来画原型,也不推荐用它们或普通文档、Wiki 的形式来输出交互文档。因为:

—— 太低效了!

产品经理和交互设计师的主要产出物就是文档,自然可以耗费比较多的精力和时间去制作原型和编写内容。而 UI 设计师的主要工作肯定是最终的视觉界面和交付,所以用最复杂的方法去制作交互文档,显然是不合理的。

同时还要提一句,Axure/墨刀 等软件用来制作一般的线框图原型,效率实在是太低了。且绝大多数情况下的页面跳转、交互都是可以忽略不做的。而且随页面增加,它的左侧导航层级、数量会非常庞大,导致查找和浏览的效率进一步降低。

在我自己的所有课程和分享中,我始终都建议直接使用你们正在用的云端 UI 设计软件直接绘制产品、交互原型并输出文档,如即时设计或 Figma。

原因包含:

- 速度快:能用 Axure 五分之一的时间完成所有原型绘制

- 可复用:做好的原型方便复用,而且可以直接在原型上完成后续设计

- 交互性:对于表达交互流程所需的基础跳转和动效都能满足

- 更自由:一些需要复杂图文结合的说明方式不再受到普通文档布局限制

比如下面这样的原型案例,就可以通过一个简单的链接快速分享出去,或者添加团队成员自由查看。

在我过去长期的实践体会中,这种方式是优势最明显,效率最高,最易懂,也符合 UI 设计师工作需要的。如果项目中有其它因素要求,你们也可以选择前面的方式输出。

任何文档的目标都是为了书面记录和让看的人更容易理解我们要表达的信息,不要被固定的方法局限住,要努力去探索适合团队当前场景的方式。

3.1 文档框架结构制定

前面把基本的信息聊完了,这里就来具体讲讲交互文档应该如何进行输出。

当然,输出交互文档前需要先理解交互是什么,交互设计的具体设计内容和步骤。交互文档是对你已经设计出来的方案的书面记录,你不能在对交互一无所知的情况下强行编写文档。

交互文档制作首先要确认文档的记录内容和文档结构。

记录内容指的是你在该文档准备放哪些交互内容进去,并不是每次项目设计都要把项目所有页面和流程交互都重做一遍。

比如一次中等规模的迭代,新增几个通用的列表页面,调整了一些细节字段,增加了一个功能流程。那么文档重点记录内容肯定就是流程而不是所有页面。毕竟通用的列表页和细节更改,在产品需求评审阶段就可以完整的解释,而功能流程则不行。

如果是全新的项目,包含数十上百个页面。把所有流程、页面的交互内容全部表现出来的工作量是顶不住的,在绘制原型的过程中,你就会发现有大量的重复页面、流程和交互。所以制作文档就要有目的性的对重复的内容进行合并,以及只保留重要的页面和流程。

具体该放什么要考虑项目的实际情况,需要设计师自己评估。除此以外,标准的交互文档里面会包含背景介绍、编辑日志、文字图例、业务流程、名词解释、页面结构等等。

这些 “文绉绉” 的细节,并不是必备的,你可以根据当前场景自己决定需要加哪些。比如项目、业务背景前面的产品需求已经讲清楚了,业务流程、名词解释团队成员也都了如指掌的时候,那么这些页面模块就完全没有放的必要。

并且,基于前面对放置内容的考虑,结构的顺序并不一定要类似下方案例,完全按照产品的导航目录来走。

所以,根据一个中等规模的迭代项目,我会制定一个这样的一级文档结构。

- 基本信息:项目的简单信息,快速目录,参与人信息等

- 基本组件:涉及的相关组件展示和交互规则说明

- 原型一览:本次迭代涉及的所有页面原型和连线一览

- 流程介绍1:流程1的所有页面、状态、说明展示

- 流程介绍2:流程2的所有页面、状态、说明展示

- 流程介绍3:流程3的所有页面、状态、说明展示

每个1级文档结构对应 UI 软件中的 Page 目录,力求所需的 Page 数量越少越好,而不是像 Axure 的做法一样密密麻麻的。

结构可以根据复杂程度做进一步的细分,它像写文章的大纲一样,帮助我们提前规划好后续完成文档所需的内容和工作量。

3.2 关于连线和标注信息

有了结构,就要在对应的 Page 中填充内容了。其中一般的文字介绍、流程图、思维导图,只要正常输入或将导出的图例黏贴进来就可以。

而针对具体的交互内容,流程解释上,则重点处理连线和标注说明。比如下面是我自己在课程演示中的一个简单的交互流程演示案例。

在 UI 软件中,制作连线其实是很简单的事情,只要画出一个直线,再设置箭头和尾部图形、描边色彩和粗细即可。

然后,将该线段的图层放置在画布之外,起点放置在触发交互的区域之中,终点尖头则紧贴目标画布的边缘(不用特意延伸进画布内)。如果使用水平、垂直的方式连接两个画布,那就可以双击进去添加锚点制作 90 度的折角。

连线的应用是非常简单的操作,不要舍近求远通过插件或是其它的一些功能来实现。而除此之外,我在文档中添加的解释性文本主要有两种,交互事件和交互规则。

交互事件代表了连线的两个页面是如何被触发跳转的,所以我会在线段中帖一个文字卡片,解释触发的条件和交互操作是什么。

然后,就是页面或流程中的交互细则,包含两个部分,数字标签和对应文字注释。它们都是用 Auto layout 可以快速制作出来的组件,每次要做备注的时候,只要复制标签到页面上,设置对应的数值,再将右侧的文字卡片复制到页面旁边,再加上对应的数字、内容信息即可。

在设计软件中,画布的自由度极高,你想要怎么备注和添加内容都没关系,只要在内容翔实的基础上保证 —— 团队成员能看懂,就是一份优秀的交互文档。多在绘制过程中和同事沟通,优化展示的做法,可以避免很多会出现的问题,进一步加速我们的制作效率。

3.3 文档的团队协作应用

将文档全部做完以后,最终就是关于交付和协作的问题了。

既然我们使用线上的 UI 软件来完成交互文档的制作,那么文件设置公开访问权限,再分享链接自然是最简单的办法。

但每次项目分享个网页链接,或者并行有好几个项目,需要其它成员自己去收藏网址,也是挺麻烦的。所以尽量充分应用软件中的团队协作功能,通过创建一个团队,添加成员,让他们自行查看当前文件目录中的交互文档。


查看过程中,团队其它成员可以通过评论的功能对交互内容进行纠错、提问、建议,方便我们进行优化改进。


通过这种简单高效的文档协作模式,我们可以非常快得完成整体交互内容的定稿,并开始后续的工作。

再回到前面的话题,我们是 UI 设计师,不是全职交互设计。原型文档输出完了,下一步可是要做视觉界面的,所以交互文档就可以不用管了嘛?

交互文档的最佳状态是 —— 应用最终界面图例解释交互内容。

也就是当我们把所有页面内容设计完成后,强烈建议将界面的展示和交互文档进行整合。除了前端和产品可以看到最终的交互落地效果外(有时候最终设计和前面的交互不一致),还可以直接通过这个文档查看界面数值标注,而不用往返于交互和设计文档来回切换,这才能让文档作用最大化。

以上就是关于交互文档的相关解释。

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

作者:酸梅干超人    来源:站酷


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

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

韩国顶尖设计团队PlUS X,5年前的作品集包装套路,今天依然好用!

seo达人

一、项目背景及推导

在开头先放获得IF大奖作为证据,佐证作品质量,让读者有一个比较好的心理印象。我们在作品中展示作品时,也可以把自己获得的荣誉放在最前面,有一个霸气的开场。

图片

项目目标。关键词的推导,这部分的推导一定要简洁合理,太多人喜欢在这部分写很多文字,然后又没有把关键词可视化,容易被忽略。

图片

品牌愿景。说明产品最终想要达到什么样的状态,通过平台作为桥梁满足用户的诉求。

图片

品牌特色。介绍这个产品主要的特点。

图片

品牌设计原则。从品牌特色中提炼核心原则,并通过这些最核心的关键词,指导接下来的所有视觉设计。

图片

全局概览。把品牌设计过程稿和结果都放在一起,展示工作量以及全局概念。

图片

最终结果。动态展示最终的Logo。

 

二、规范体系

介绍完项目整体情况后,这一步开始介绍整个设计体系。

Logo系统。讲这个logo是如何设计出来的,会发现它的每一个词用的都挺准确的,很有代入感。

图片

主要应用形式

图片

颜色系统。给颜色一些解释说明。

图片

在Logo上的应用

图片

视觉主题系统。品牌的超级符号延展出的风格调性。

图片

A、倾斜式设计

图片

图片

B、折纸符号

图片

异化的叠纸符号

图片

图片

图标体系。图标这里的风格很容易看出是品牌风格的延续,也是品牌特征常用的做法,利用品牌超级符号中的某个特征应用到其他各个视觉触点上。

图片

图片

字体规范。通过排版将故事传递给用户。一致使用适当的字体可以建立强烈的品牌个性。合适的排版,例如使用各种不同字重和信息层次结构,将 KakaoPage 变成一个友好、体贴和值得信赖的品牌。

图片

动效系统。它也有2个不同的动态形式,动态的背景切割方式,能看出来都与品牌有高度一致性。

图片

图片

 

三、品牌应用

品牌应用图标。会根据Android和iOS系统要求,用不同的规范背板设计应用图标。

图片

APP设计,能看出来APP的设计其实也是品牌的一种延续应用,品牌是一个可以包揽全局的概念,几乎无处不在。

这也是高级UI设计师常用到的技法,抽象出品牌的超级符号,比如这里就是品牌颜色和斜角的运用,用在角标、背景图案、选项卡和图标等元素中。使得整个设计与品牌保持高度的一致性。

图片

图片

在一些媒体平台,都会尽可能地让品牌图形进行露出,并且保持品牌风格的一致性。

图片

图片

在名片、信封、卡片、包装袋、书籍、易拉宝、广告牌、运用广告等各种不同场景下的运用,也都会用到品牌符号,使得品牌更加具备识别度和统一性。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

最后再次展示Logo,通过动效,品牌符号等给用户加深印象。

图片

到这里,一套非常完整优秀的设计作品展示就做完了。以上包装思路是该团队5年前的作品,到今天依然是各大品牌方案的包装套路,堪称经典!



作者:彩云Sky

转载请注明:学UI网》韩国顶尖设计团队PlUS X,5年前的作品集包装套路,今天依然好用!

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


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


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



ISUX「八月」行业设计趋势速递

seo达人

一、Facebook一个帐号可绑定5个不同的资料卡 

Facebook 正在内测让用户可以将最多五个单独的个人资料绑定到一个帐户。资料不需要包含用户的真实姓名和身份信息。

用户可以将不同的个人资料专用于他们想要联系的特定群体,例如一个专用于他们的朋友的 Facebook 订阅源和另一个只为他们的同事提供的订阅源。

允许用户“根据他们的兴趣和关系个性化他们的体验”,预期增加用户间的互动和帖子数。

图片

 

二、ins上线了dual相机功 

ins相机上线了dual相机功能,用户可同时打开前后摄像头,合成画面。

今年爆火的新产品BeReal的主打功能之一就是同时打开前后置摄像头,以达到展示展示自己的目的。

图片

 

三、Apple 申请 VR 指尖追踪设备专利 

Apple 正在申请一项新专利,此种手套可用于手势控制,在某些场景还能提供触觉反馈。根据专利描述,Apple 想开发一种附着于指尖的设备,设备上有传感器,支持触觉反馈。传感器附着于手背面的手指上,传感器可以侦测动作,提供某种形式的触觉反馈。指环可以戴在指尖,由指甲固定住,以便判断是一根手指还是多根手指进行互动,而信息将反馈到手背上的控制单元,従而连接到计算机。

图片

图片

 

四、iOS近期开发者预览版值得关注的三个更新点 

1、电池支持展示百分比 

图片

由于空间限制,多年来搭载刘海屏的 iPhone 一直无法使用电池百分比,此次更新后,状态栏中的可显示确切的电池百分比,该功能可以在“设置”应用的“电池”部分进行开启。

2、锁定屏幕的音乐视觉化播放图形 

iOS 16 Beta 3 添加了全屏音乐播放器,Beta 5 引入了实时迷你可视化图形,可随音频播放变化。且会与新的按钮动画相结合,当点击播放 / 暂停按钮或前进后退按钮时,它们会有新的动画,动画感觉非常优美和流畅,并提供了很好的细节。

图片

3、屏幕截图新增【复制并删除】 

当截取屏幕截图,对其进行编辑后点击“完成”时,出现了一个新选项,可以“复制和删除”屏幕截图,而不仅仅是删除它。这允许用户复制图像以粘贴到任何其他应用程序,而无需先将图像保存到照片应用程序。

图片

 

五、YouTube支持视频双指缩放 

(点击上图前往原文查看视频)

近 YouTube 推出了【双指缩放影片】的功能,能夠直接放大来观看影片细节,并开放给会员抢先试用。

目前 YouTube 已正式向 Premium 推出这项功能,只要双指轻触拨动屏幕,就能自行縮放画面大小,不管是横屏还是竖屏都有支援,画面最高可以放大到 8 倍。和全屏模式相比,缩放功能可以让用戶更清楚地看到画面上的细节。如果你已经是 YouTube Premium 的会员,可通过手机版 YouTube 【会员福利】>【试用新功能】,就會看到此功能,点选后即可使用。

 

六、YouTube TV正在开发同时观看四个直播流的功能

YouTube TV 正在开发一些新功能——“Mosaic Mode”,可以让观众同时观看多个直播(最多四个)。虽然谷歌仍未回应,但多画面同时播放在体育直播中特别受欢迎。像FuboTV 是一项以体育为重点的直播电视流媒体服务,具有多视图功能,最多允许同时进行四个流。在索尼的 PlayStation Vue 服务关闭之前,它有一个类似的功能,在想要同时传输多个频道的用户中很受欢迎,这一战略举措对谷歌来说是有意义的。

图片

 

七、NGL匿名问答应用登顶APP Store

NGL的全称为“Not Gonna Lie”,是一款流行匿名社交软件。NGL只需要用户填写上自己在Instagram社交平台的昵称就可以成功注册。进入App后,NGL会为用户提供不同的问题选择,并最终将用户需要提问的问题生成一个专属链接和一个分享截图。

图片

 

八、0Zero 零重力浏览器

传统浏览器打开多个页面时,会以tab的形式切换。此款浏览器打开多个网页时,会在一个画布上平铺展示所有打开的网页。

图片

(点击上图前往原文查看视频)

九、糖果APP设置 avatar新方式

糖果APP是一个虚拟形象陌生人社交应用。传统创建avatar的方式都是用户自行捏脸。而糖果是在注册时,通过用户选择兴趣标签自动匹配一个avatar形象。极大的降低了创建成本。

图片

 

十、Snapchat推出网页版及首款AR游戏 

1、Snapchat推出网页版 

(点击上图前往原文查看视频)

Snapchat最近布推出“网络版 ”,支持消息聊天、发送快照、视频通话、表情反应等核心功能,且计划在未来将其Lenses功能引入视频通话。登录网络版Snapchat后会同步你手机上的信息,继续你在手机上的对话。通过桌面使用Snapchat时,用户的Bitmoji将出一个笔记本电脑的图标,向其他人表明你是通过Snapchat for Web访问聊天的。

此外,网络版本的体验还包括隐私屏幕特性:如你点击离开去完成另一项工作,软件就会隐藏Snapchat窗口;通过Snapchat for Web发送的信息将在24小时后自动删除;防止人们进行截图。

Snap发言人对外介绍产品情况时说,Snapchat上的通话者平均每天要花30多分钟的时间进行通话。尽管仍将自己视为一个移动优先的平台,但Snap表示,在听取了用户的反馈后,它决定是时候将Snapchat的核心功能引入电脑端。但网络版当前仅对部分地区的Snapchat+用户提供,暂时不支持中国区。

2、Snapchat推出首款AR游戏《Ghost Phone》 

(点击上图前往原文查看视频)

Snapchat 推出一款新的游戏内应用程序《Ghost Phone》,这是snapchat发布的第一款 AR 游戏,可将智能手机变成 AR 驱动的设备。《Ghost Phone》是使用 Snap 的专用滤镜创建工具 Lens Studio 构建的,使用 World Mesh 技术,可以进行更准确的跟踪。在游戏中,玩家需要搜索隐藏在短信中的线索,并使用智能手机的相机捕捉超自然实体。

「Ghost Phone」根据Snap旗下镜头创建工具Lens Studio构建,该应用支持World Mesh技术,从而实现更准确追踪。

 

十一、Whatsapp在线状态支持设置可见范围及语音状态  

WhatsApp的在线状态功能,近期新增了设置状态权限设置,凭借此功能,用户不仅可以设置可以看到自己的最近状态,还可以设置谁可以看到我在线,让用户可以更精细的控制自己的隐私。

除此之外,WhatsApp 最近还在测试新增的“语音状态”功能。如下图右图所示,状态选项卡底部有一个新图标,可以让我们快速向我们的状态更新语音状态。此语音状态只会与你在状态隐私设置中选择的人共享。

图片

 

十二、WhatsApp 发布 Windows 桌面版应用程序 

过去 Windows 用户必须下载 WhatsApp 的网页端桌面应用,或是通过网页浏览器来访问 WhatsApp,如今面向 Windows 用户的桌面端应用全新发布,通过原生的应用程序,WhatsApp 能带给用户更快、更流畅的体验。重新设计的 WhatsApp 提供了更简洁的界面,WhatsApp 表示正在为 MacOS 开发原生应用。

图片

图片

 

十三、Meta 聊天机器人 BlenderBot 3 登场 

Meta 释出了第三代聊天机器人 BlenderBot 3,奠基于 1,750 亿个参数的 OPT-175B 语言模型,BlenderBot 3 使用了更多的资料集,其对话效能比上一代提升 31%,知识能力是前一代的两倍,错误率则少了 47%,BlenderBot 3 互动界面目前仅于美国市场开放。Meta 指出,BlenderBot 系列在各种对话技巧上日益进步,除了个性、同理心与知识,还结合了长期记忆,并能通过网络搜索来进行有意义的对话。

图片

链接:https://geo-not-available.blenderbot.ai/

聊天机器人不免会模仿或学习到不安全、带偏见或冒犯的言论,Meta 对此展开了大规模的研究,发展各种新技术建立保障措施。即便如此,BlenderBot 3 仍可能说出无礼或冒犯的内容,Meta 因而决定让用户与其互动,让用户能在 BlenderBot 3 的回答上给予好评或负评,并注明评论的理由,协助 Meta 改善 BlenderBot 3。

图片

 

十四、Messenger 测试默认点对点加密功能 

Messenger 自 2016 年起提供点对点加密功能,但用户需对每个会话逐一设置,手动打开点对点加密功能。

如今 Facebook 计划挑选少数 Messenger 用户,默认启用点对点加密通信功能。除了向文本和图片消息提供点对点加密,语音通话也会提供点对点加密。此外,Facebook 还会测试其他相关功能,例如消息在一个设备删除后,也会在其他设备消失、点对点加密环境下取消发送、回复 Facebook Stories 等。

图片

Facebook 也会为 Messenger 部分功能进行更新,例如消息在一定时间后自动消失,也会测试新的安全存储功能,让用户将已加密的对话内容备份到云计算存储。

图片

 

十五、Telegram更新了互动表情 

Telegram此次更新包括:自定义动画表情符号、交互式自定义表情符号、iOS上的新贴纸、Gif和表情符号面板、赠送Telegram Premium 作为礼物的能力以及语音消息的新隐私设置等等。

图片

1、自定义动画表情 

Telegram推出开放表情符号平台,任何人都可以为Telegram premium用户上传独特的自定义表情符号。并且新的动画表情符号可以包含在消息文和媒体标题中,高级版用户最初可访问10个初始自定义表情包,其中包含了500多个高级表情符号。

(点击上图前往原文查看视频)

当在输入框输入信息时,贴纸按钮将变成一个表情按钮,点击即打开表情符号面板,因此用户可以快速浏览并添加自己上传的表情包。

2、新增了一批可交互式表情 

Telegram在表情制作中投入了很多精力,在新版本中又新增了一批可交互式的emoji表情,当用户发送出去后,好友点击即自动播放表情符号的全屏效果。

(点击上图前往原文查看视频)

3、语音信息的隐私设置 

Telegram Premium用户增加一个新设置,允许他们控制谁能够向他们发送语音和视频消息、同样也可以选择从不或始终向您发送语音消息的特定人员或用户组。

图片

4、向亲友赠送会员 

今年夏天,Telegram的活跃用户突破了7亿,并推出了 Telegram Premium会员服务,已是会员的用户还可以向亲友赠送Premium预付费订阅服务,除了享受一定的折扣价购买外,赠送的订阅将以特殊消息的形式出现在与亲友的聊天中,并生成一个特殊的动画礼品盒,极具送礼的仪式感。

 

十六、OPPO发布全新一代ColorOS 13操作系统 

(点击上图前往原文查看视频)

2022年8月30日,OPPO开发者大会(ODC22)上,全新一代ColorOS 13操作系统与「潘塔纳尔」智慧跨端系统正式发布。全面升级的ColorOS 13以「水生万物」为理念,对整体UI以及一些体验进行了优化。全新的「水生设计」,从水在自然界中的运动方式汲取灵感,进一步增强了UI和动画在视觉上的流畅与包容性。在界面、图标、按钮颜色上也用了大量的蓝色,呼应“水”的主题。

图片

另外,此次更新也带了一些新的功能和亮点体验。

1、个性形象使用场景更多且更具包容性 

ColorOS 13对Omoji也进行了更多创意升级,新增大量与社会身份和兴趣爱好等相关的创意素材,比如代表医护工作人员的“大白”形象,及流行的汉服、滑雪服,更丰富的五官、脸型、头型、饰品等素材。用户可以在社交应用中直接套用自己的Omoji个性形象,亦可为联系⼈创建Omoji,来电时即可显示对方的专属形象。或是在拍摄时使用自己的个性形象拍摄。

图片

图片

2、更智慧和有趣的息屏 

ColorOS 13对息屏做了全新升级,推出“智慧息屏“。在打开智慧息屏的场景化信息功能后,当用户处于外卖、叫车或听歌场景时,智慧息屏就会主动感知相关应用状态,并实时显示订单或歌单进程,无需反复亮屏查看。而当你在听歌时,「智慧息屏」还会显示音乐播放控制器,你可以很便捷地进行暂停、切歌、收藏等操作,ColorOS 13还会根据你的喜好为你智能地推荐歌单,做到了真正的省心和贴心。

图片

此外,息屏还可设置多种样式,包括丰富的图形、动态动物家园、以及时光息屏。其中家园息屏会根据每日气温变化,揭示动物们赖以生存的家园变迁,呼吁大家关注气候变化。时光息屏会在你每一次唤醒手机后,在彩带上留下独特刻痕,使用时间越长刻痕越宽。

图片

(点击上图前往原文查看视频)

3、有趣又实用的绽放壁纸 

时下人们对数字健康越发关注,手机使用时长的增长和不可控性已成为当下话题。绽放壁纸让屏幕使用时长可视化,嫩芽成长为叶片的过程,模拟时间的流逝。设定一个使用时长目标,当超过目标后,叶片从有机转为工艺品材质,暗含美的稍纵即逝。同时叶片颜色代表过去一小时内使用最多的应用图标颜色,实时变化,将个性化和数字健康完美融合。

(点击上图前往原文查看视频)

4、更便捷的大文件夹 

在新的系统中,支持对原有文件夹进行放大为九宫格大文件夹,可以直接点击打开 App。

5、智能会议助手支持整理会议纪要

会议当中的纪要整理一直都是让打工人头疼的难题,毕竟漏记、错记、反复回听录音是大部分职场人在整理会议纪要时常常遇到的痛点。为此,ColorOS 13 智能会议助手带来了纪要智能整理的功能,让你不遗漏会议中的每个重点。开会时,呼出智能侧边栏「字幕转记」功能,自动记录会议截图和笔记,会后生成图文并茂的会议纪要,便于回顾复盘,再也不需要反复回听会议录音,无需提笔即可记录重要信息。目前,纪要智能整理支持钉钉、飞书会议、腾讯会议、Zoom、Goole Meet以及Team。

图片

更多ColorOS 13功能可以移步查看:https://www.youtube.com/watch?v=9da1ktqjPy0

 

十七、微信iOS迎来8.0.27正式版本更新 

1、我的二维码支持更换样式 

在微信-扫一扫-我的二维码页面下方点击【换个样式】后,二维码可更换不同风格,还有全屏背景颜色版,更现代更美观了。目前有 10 种样式可供用户选择。

2、统一音视频悬浮窗体验 

此前小视频、一起听、直播悬浮窗各异,此次对悬浮窗样式进行了统一优化,同时在还在细节体验上也做了优化,不在支持多个音视频同时播放,最多只能展示一个悬浮窗。且在已有一个视频悬浮窗,如直播悬浮窗时,再进入进入小视频,悬浮窗会自动暂停并收折。

3、公众号支持长截图 

苹果手机一直不支持长截图(虽然手机 Safari 浏览器可以长截图)。这次更新后,阅读公众号文章时,手机先截屏,右下角会出现一个「保存整页为图片」的按钮,公众号文章都好用。

图片

4、个人状态及朋友圈权限更新 

个人状态除了状态表情图标外,现在还可以展示文字;朋友圈动态中,针对已发送的动态,支持修改可见范围。

 

十八、Snapchat支持双摄像头拍摄

图片

Snapchat在8月29日推出了双摄像头功能,该更新使用户能够同时使用手机的前置和后置摄像头拍摄照片和视频,让用户从多角度拍摄需要分享的内容。打开你的 Snapchat,在相机工具栏中看到一个新图标。只需轻轻一按,就可以开始创建快照和故事,或者更精美的 Spotlight 视频。双摄像头是一种创造性的方式,让我们可以更好的捕捉激动人心的时刻。双摄像头有垂直、水平、画中画和抠图四种布局。Snapchatter 还可以添加心爱的 Snapchat 创意工具,包括音乐、贴纸和镜头。双摄像头已经支持 iOS 端,未来几个月将支持 Android。

 

十九、百事的元宇宙是品牌年轻化的新尝试 

最近,知名饮料品牌百事发起一场基于元宇宙生态的颠覆性营销活动,就为品牌营销4.0时代贡献了一出经典案例。以元宇宙为营销触角,通过对百事概念店的全面升级,开启百事元宇宙新纪元,邀请Z世代体验一场沉浸式虚实交互的演唱会,百事家族虚拟偶像TEAM PEPSI搭档活力无限的年轻用户,通过潮流音乐的无缝跨界,共创无限可能的未来第三空间。

(点击上图前往原文查看视频)

百事通过元宇宙来对百事的“百事盖念店”进行升级。百事的宣传重点偏向于Z世代。在由元宇宙驱动更立体多面的新场域中,Z世代期待能享有更多主导权,共同参与创建“未来”的过程,创造力即第一生产力,而热爱驱动创造。

图片

百事设计了4个虚拟形象,它们分别对应了百事家族四大品牌的视觉主色调。还特意弄了一个演唱会,让人梦回炫舞团的感觉。

为了鼓励更多年轻人参加,在「百事可乐潮音梦境」的预约阶段,百事就向全国年轻人发出了一份盛大邀请,让用户可以通过DIY填词的方式,参与演唱会的联合共创,释放对百事品牌和未来音乐的想象。参与者不仅可以得到以百事家族虚拟偶像为封面的专属演唱会门票,所写歌词还会随机出现在Live House现场,让更多人看到。

 

二十、网易二次元元宇宙社交软件Fancy 

继日本的REALITY和韩国的#Me大火以后,网易也开始研发类似的二次元元宇宙社交软件,悄悄地在泰国App Store又上线了一款名为“Fancy – avatar live party”的虚拟化身语音聊天社区应用,再度加码针对年轻用户群体的虚拟社交产品。

Fancy与REALITY和#Me相比画风的区别还是很明显的。该产品的主要特点为“语音聊天社区”和“虚拟化身”在“Fancy”中,当用户创建了自己的虚拟形象后,就可以加入社交活动中,除了传统的文字聊天,“Fancy”主打的功能之一就是“派对房(Party Room)”。

图片

该房间最高支持9人同时在线。在派对房里,用户不仅可以和好友语音聊天、互动,当开启AI人脸识别功能后,AI会识别用户的眨眼、说话等状态,虚拟化身的表情也会与玩家的表情同步。

图片

 

二十一、TikTok 推出AI绿幕图像生成器 

最近, TikTok 的特效菜单下,增加了一个名叫“AI 绿幕” (AI Greenscreen) 的新选项。点击这个选项,然后在屏幕中间的对话框里输入一段文字描述,只用不到5秒的时间,TikTok 就可以根据文字描述生成一张竖版画作,用作短视频的背景:

图片

只要想象力到位,短视频的背景就可以放飞,让你尽情穿梭于各个虚拟场景。所有应用AI绿幕制作的视频,都会打上#aigreenscreen标签。

图片

TikTok 用的这个文字转图片模型,还是非常简单的。尽管目前AI绿幕所生成的背景还偏油画风格,没有任何写实色彩。但风格迁移的痕迹明显,而且用的颜色也都鲜亮明快,给人一种耳目一新的感受。

以上就是2022年8月ISUX行业设计趋势速递,喜欢记得收藏转发,以备不时之需查看。

 

原文地址:腾讯ISUX

作者:ISUX设计

转载请注明:学UI网》ISUX「八月」行业设计趋势速递

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


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


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



拿捏3种设计风格!

seo达人

设计的风格有很多种,今天给大家带来的是三种设计风格的海报案例呈现。

操作很简单,大家看完记得练习哦。直接开始今天的教程吧,yeah…

图片

 

图片

图片

● 相信大家小时候都玩过超级马里奥、魂斗罗等游戏。

下图是马赛克像素风典型的代表游戏之一。回想起来那都是童年的欢乐时光啊~

图片

● 下面用文字简单的介绍了一些关于像素画的知识

图片

● 给大家整理的一些像素风格的海报(案例来源于互联网,仅做参考)

图片

● 除了像素画海报之外还有与之对应的像素字体下图来源于互联网,仅做示意。

图片

图片

● 这里我们用到上图03和06的技法思路,像素的赶脚类似PS的半调效果,或者是仿色扩散,以文字设计为基础使用的仿色扩散的效果来呈现。

图片

设计思路&步骤解析

01:先设计完字体部分(这里暂不讲字体设计部分),不会字体设计的同学,使用一款好看的字库字体也是可以的。

图片

02:合并所有笔画,在AI中使用路径偏移,参数设置如下,对象-路径-偏移路径。

图片

03:取消编组,用2种颜色区分。

图片

04:勾勒钢笔连接每个边,红色圆圈标注部分为示意。

图片

05:接着给字体填充黑白渐变,注意白与黑之间的明暗过度。

图片

06:最终效果如下,将渐变后的字体在PS中选中,图像-模式-灰度-拼合。

图片

07:图像-模式-位图-扩散仿色。

图片

大家不要局限于做像素风格就非得像我用这种方法去呈现,我们只要抓住海报的主体,呈现是由一个小的单元格组合拼接而成就可以了。AI同样也可以做出矢量像素海报。。。

这是在AI做出的像素化效果,这里给大家抛砖引玉一下。

选中渐变完之后的字体,AI菜单栏-对象-栅格化,参数设置如下,最终位图再转矢量就可以啦。

图片

08:最终并为其添加色彩与排版就完成了~

图片

 

 

图片

我们先看几组网上的案例展示吧,大概认识下这类风格的一些表现形式,版面的构图元素,以及颜色的一些使用等。

不难发现我们目前所看到的孟菲斯风格是非常潮的,强烈的色彩组合与碰撞,几何形状的构成,甚至一些海报当中也会出现潮流的插画小元素,非常具有趣味性,以及强一些画面视觉冲击表现。

图片

图片

孟菲斯风格版面元素构成

孟菲斯平面设计特征可以归纳为:

1、高明度的色彩组合;线条、图案的随机排列搭配;几何元素的大量运用和空间填充。

2、各式各样的几何图案是“孟菲斯设计”经典元素之一,以正方形、圆形或三角形这类规则图形为主。

3、与传统设计强调有序不同,“孟菲斯”的设计背景喜用凌乱与自由的组合方式。

不管是细瘦的直线、粗体的波浪线,还是点状图案亦或3D结构图形,你都能在孟菲斯作品里找到。

图片

图片

图片

图片

图片

下图举例了孟菲斯在平面中的一些表现!

图片

图片

咱们分析完孟菲斯的一些构成元素表现形式之后就好开始下手了,下图是以人物为主体的表现形式。

图片

为了方便大家观察我将版面中的元素进行了拆解,大致分为人物、文字对话框、一些线条元素和版面中的配色。

图片

文字对话框&文字编排:

图片

版面中的人物主体:

图片

版面中的色彩搭配、字体&线条:

图片

以上就是拆解完的样式,这里我们为了增加版面的趣味性,我使用了手写字体以及随意装饰的线条活跃版面气氛,色彩的组合上使用了纯色与渐变的组合碰撞,图形构成上表现模拟了电脑页面对话框的组合形式搭配上文字编排,以上都是为了尽可能的符合孟菲斯的一些风格表现而存在的。

这是我做的另外一张孟菲斯的海报,根据之前给大家总结的要素:

*几何图形构成

*强烈的色彩组合

*简单图形&插图

图片

*简单图形&插图

图形的制作比较简单用 AI 3D工具就可以完成。

图片

*几何图形构成

图片

*几何图形构成

图片

*靓丽/怪诞/潮流

当时找素材的时候找到这只鸟的时候,发现嘴非常的有意思,以及鸟本身的颜色也是符合孟菲斯的色彩要求的(一个巧合罢了),扣完图之后给鸟加上一个外描边增强趣味性。

图片

*强烈的色彩组合

纯色与渐变色(高饱和度&低饱和度)、(明与暗)以及色彩在版面中的一个过度关系。

图片

最终组合版面中的主体与文字排版&构图,以及配色孟菲斯风格的海报就完成了,只要掌握了他们的元素构成风格与表现就好做了,希望这2张海报可以给到大家一个启发。

图片

 

 

图片

图片

所以我们只要能模拟出撕纸的效果差不多就能做了。

图片

下图是案例展示部分。

图片

我们来看下撕纸效果的一个具体制作方式,基本上都是在PS中完成的。

图片

下图是关于PS画笔的预设:

常规画笔、干介质画笔、特殊效果画笔、湿介质画笔。

图片

给人物添加一个蒙版,这里我使用的是干介质画笔,分别给他们换上颜色即可。

图片

选择下图第二种干介质画笔,以及它们在不同模式下的样式效果。

图片

接着在人物的边缘用干介质画笔(溶解模式)涂抹边缘,撕纸的效果就出现了,接着加入黑白相间的素材。

图片

图片

为了模拟撕纸的效果,我随意设置了一些纹理,让纹理保持一种不规则的状态。咱们动手制作一些素材使用(特殊效果画笔),新建一个画布,使用画笔涂满即可,导出图片当做素材就OK了,涂抹的时候画笔的大小折中就行,避免效果不理想(大家多尝试就行)。

图片

最终规划版面的文字编排就完成了。

图片

图片


大家多多练起来吧,希望对你有所帮助。


作者:大熊

转载请注明:学UI网》拿捏3种设计风格!

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


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


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



只要一个公式,带你看懂协同办公提效

seo达人

本篇文章笔者将结合58的云效项目协同2.0设计方案,分析一下协同办公提效的经验。快来看看吧~

图片

1.优化对象

云效是企业内部的效能研发平台,辅助公司员工研发产品。本项目的优化内容是针对它的项目协同能力,该部分的主要功能是“创建并管理项目”和“线上协同推动项目流转”。

2.设计依据

由于是自用产品,因此缺乏有效的数据验证,需要找到合理的设计依据。所以我们联系业务方开展针对员工的访谈,以职位为基础分类,梳理他们的工作流程;根据不同的工作阶段,收集各个用户角色的使用痛点;最后将痛点进行了分析和整理,将重点问题进行了分类汇总,最终总结出结论——效率低。因此本期的优化目标也明确下来了,就是对项目协同进行办公提效。

图片图片

3.提效内核

在开始设计前要搞明白一件事,那就是项目协同的基础构成是什么?它们分别是“流转”和“角色”。

为了方便理解,笔者把项目协同系统比喻成工厂,把项目推进比喻成商品制造,项目从策划到上线,就如同商品在一条流水线上会经历多个加工点,从原材料到最终完工上市。这条流水线在项目协同中可以它称为“流转”,而在流水线上的加工点们,其实就是公司员工,我们称他们为“角色”,角色需要完成相应的任务,才能将项目从一个节点流转至下一个节点。因此“流转”和“角色”共同构成了项目协同系统。

图片图片

所以提效的关键就在于“角色能否顺利完成任务”,同时“项目能否进行顺利流转”。满足这两点,项目协同系统才能高效运行,从而到达办公提效。

因此我们可以得出一个公式:“办公提效=角色完成任务的效率x流转顺畅程度”。即用户能在顺畅的流转过程中,高效地完成各节点的任务。再结合访谈结果,本次的设计目标逐渐清晰:

提升项目流转效率:梳理生命周期,满足全流程覆盖;搭建消息体系,提升信息触达率

提升任务完成效率:概念优化,降低学习成本;搭建高坪效页面,提升阅读和操作效率;多维度展示,提升决策管理能力

图片

图片

 

图片

1.项目流转全覆盖

旧版云效只覆盖了产品和开发,而本期我们要做全流程角色的覆盖,因此笔者从角色和工作两个层面重新梳理了产品生命周期,角色层面包括了从产品,设计师,开发和测试,即产品研发的全流程参与的员工;工作层面包括了从需求策划一直到上线的全工作流程。主要目标是梳理出各角色需要完成的任务,同时确认在流程上的流转节点。

图片图片

在本期方案中项目流转还是采用手动为主。举个例子,如产品在云效上创建了一个需求,并在线撰写了文档,此时他可以将需求流转给设计师,设计师收到需求后和产品沟通需求细节和排期,然后开始设计介入,此时产品即可将该需求的状态就变为了「设计中」,以此类推角色持续推动需求流转,直至完成上线。

图片图片

在未来我们将会实现高度自动化的流转方式。比如完成某些任务后能进行自动化流转,再举个例子:设计师在云效上直接上传设计终稿,产品确认后可自动流转到下一流程节点。

2.打通办公消息提醒体系

经访谈发现,项目流转存在信息传递不及时的卡点,需要提升用户触达。考虑到公司现有触达方式中,美事和企业邮箱的普及度较高,依托这两款产品能做到全公司的消息触达。于是笔者与业务方梳理了消息提醒的场景,包括了「待办提醒」和「异常提醒」两部分。以下可以举两个案例进行分享。

自动化待办提醒:需求负责人完成创建后会自动流转到参与人,告知对方被分配了相应的事项。

图片
图片

自动化监测提醒能力:旧版项目流转是由负责人全权监测,无形中增加工作成本。优化后方案以系统监测为主,负责人为辅。当系统监测到异常时(主要是临近逾期或已经逾期),会自动在美事里推送未完成的内容,用户可点击查看详情,并及时处理。

 

图片

1.概念提效

旧版的产品概念复杂,存在重复性内容,如「项目」和「产品」,如“产品”和“项目”这两个概念的相似度就很高,很多新用户难以理解。同时不符合业界定义的认知,如「迭代」,本应该是需求的合集,但是旧版二者却是并列关系,造成了理解成本高的问题。

在优化方案中,我们将概念扁平化,合并相似度较高的概念,放弃部分不常用概念。同时调研市面现有平台的概念体系,做到尽可能符合业界认知。从而降低理解成本

图片

图片

2.搭建高坪效页面

工作事项作为平台最基础组成部分,主要问题是页面交互方式老旧,体现在结构分散且层级复杂;使用过程中跳转频繁,需要重新搭建高坪效的页面。同时在阅读浏览、新增内容和语义理解方面都存在设计细节问题。笔者以需求详情页为例,说一下搭建高坪效页面的方法。

页面层级重构:笔者采用了卡片分类法将页面组件重新归类组合,重构新页面,同时考虑到用户的快速浏览习惯,将原有跳转新页面改为抽屉的展示方式,减少反复页面跳转带来的体验不佳。

图片图片

看到有用的信息:合理控制信息密度,同时保证添加内容的便捷性。设计吸顶的创建入口,点击后可跳转到预设位置去添加内容。页面上不会出现多余信息,有效降低页面的信息密度。

图片

图片

快速看到想看的:随着用户在抽屉内新增的内容越来越多,页面也会变的越来越长,为提升浏览效率,在左侧设计快捷帧导航栏,点击后能快速跳转到相应位置,提升浏览效率。

图片

图片

低成本理解文案:本次在语义设计上做了调整,确保用户低成本理解。以操作日志为例,日志里记录了所有操作记录,表达内涵是“哪些用户在什么时间进行了如何的操作”,因此设计由「用户名」+「行为」+「结果」+「操作时间」组成的字段句式,使语义做到标准化且降低理解成本。

图片图片

3.多维度展示

在旧版方案中大量使用列表作为展示方式。但单一维度列表仅仅强调了事项的主题,考虑到在实地的工作场景中,用户是需要从多种维度去管理工作事项。

层级关系展示:需求存在父子级关系(一个需求可以被拆分成多个子需求,分期完成),因此需要能表达清楚层级关系的展示方式。笔者使用了树形图的展示方式,明确父子级关系。

进度展示:因为我们所参与的事项都是有起止日期的,什么时候开始,什么时候结束,中间需要干多长时间,都需要让用户有清晰的感知,从而提升管理效率。笔者采用了甘特图,以事项进度的维度来管理决策,同时设计了拖拽功能方便用户及时编辑进度。

流转状态展示:工作事项需要流转的,因此需要以流转状态的维度去展示事项,能更好地帮助用户感知事项所处的状态,及时规划流转动向,从而提升事项流转效率。笔者采用了看板的展示方式,以事项流转状态的维度来管理决策,用户可拖拽事项,及时进行流转。

图片图片

 

图片

回归到办公提效公式:“办公提效=角色完成任务的效率x流转顺畅程度”。在“流转”和“角色”两个方面的优化。

通过梳理产品生命周期将做到全流程覆盖,同时搭建信息体系,提升流转信息的触达,进而提升项目流转效率。再通过优化概念,降低学习成本;搭建高坪效页面,提升阅读和操作效率;搭建多维度展示方式,提升决策管理能力,保障用户在各节点完成任务的效率。

最终做到精准的办公提效。

图片图片

 

图片

本次改版还在继续中,我们会继续以提效为目标持续优化。B端产品不同于C端,尤其是企业类办公产品,会经常缺乏埋点导致缺乏有效的数据支持,因此不能像C端产品以数据作为设计依据。

需要设计师深入产业了解业务背后的运行逻辑,访谈目标用户观察其行为并收集其诉求。由此才能足够了解业务,为企业用户产出更优秀的设计方案。

希望这份B端设计改版的内容能够对大家有所帮助~


作者:58UXD

转载请注明:学UI网》只要一个公式,带你看懂协同办公提效

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


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


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



交互设计的价值是什么?

seo达人

一、情感升华先谈谈交互在做什么?

借用一句传统设计行业的经典语录,一个好的产品一定是“有用的、好用的、用过还想用的”,有用的主要由产品经理把控,而好用、用过是否还想用就是交互设计的职责和价值了。工作内容,交互大概可以总结为下面这几点:

1、是针对行为的设计,让原本的物理逻辑向用户行为逻辑转化;

2、平衡业务价值和用户价值,脑海中永远不要忘记“用户价值”这几个字;

3、以目标为导向,保证产品贴合用户心智,用户能更好的理解、使用产品,并获得愉悦的使用体验;

4、是通过功能架构向信息架构的重组,提升产品框架的扩展性、稳定性等,交互更多的考虑到在不同场景下对可用性的要求,让产品能长久持续的使用下去;

5、是对使用流程设计;

6、数据分析和用户研究相关的工作,这两者是交互展开工作的基础支撑。

交互的价值是长期的和可持续的,没有交互,短期内看似不会出现问题,长期来看,对用户留存、用户满意度等会有重大影响,市场环境不同于垄断环境,功能堆砌过多后甚至都无法再动摇产品“难用”这个印象,但凡有类似竞品,放弃产品可能性较大。

 

 

二、交互设计的产出物特点——交互稿与产品原型稿有什么差别

这可能很多人关心、疑惑的问题了,本质上这个也是交互稿专业度的问题。产品经理也可以去画原型图,那问题在哪儿?下面会尝试阐述几点重要差别。当然并不排除极少数优秀、能力全面的产品能内外兼修。

1、从内到外的逻辑思维差异

行为逻辑是交互设计师思考的出发点,也是交互设计方式能否取得创新的关键点。物理逻辑或者业务逻辑是产品经理更关注的要点,交互设计需要具备丰富的同理心,产品功能不同、用户不同、场景不同都会影响到用户使用时的感受和操作行为。简单来说,交互设计师更多的站在用户角度去思考原型的价值,是否容易被理解、好用甚至转化,而产品的角度不可避免的会更多考虑业务、技术实现等方面,一个人做到面面俱到,是极其难且思维是很容易固化的,长期形成的思维差异会直接在原型图中表现,最终影响到产品可用性。

以QQ音乐几年前的版本(2017)和现版本(2021)为例,左侧过往版本在首页的信息组织形式上主要以分类的方式,而右侧现版本中信息的组织形式中首页的分类方式已经很弱了,基本倾向于按用户行为、需求去组织,比如根据用户过往听过的歌曲去推荐歌曲、歌单,每日30曲更是研究了用户每日习惯、耐心做的信息整合,30首怎么得来的?根据什么样的歌曲去推荐?这些都是行为研究的范畴,需要对用户深度了解后方有最好的解决方案。

图片

 

2.、设计规范的积累与创新

设计范式是交互设计师基本功的体现,包含设计规范和模块范式两个方面。设计规范是设计范式中的基础,对规范的理解和创新也是衡量专业度最基础的方面,这对原型稿是否成熟有很大关系,现有的交互规范大多基于iOS、Material design、微软设计规范的基础上优化的,国内比较流行的设计规范还有Ant design等,本文不对此做过多讨论,这里重点谈谈设计范式。

范式,指用户在长期对于互联网产品使用过程中产生的用户心智,比如用户对设置模块的预期、对个人信息模块的预期等。也可以理解为对于不同产品功能模块的记忆,设计时需要非常熟练的从脑海中调用,这样做的好处是不容易太偏离用户长期积累的心智,熟练应用范式是创新的前提。

比如表格编辑器的设计范式,不管是现在的飞书、谷歌文档、钉钉、石墨等协同办公产品,都在20年前微软office的ribbon设计模式中兜兜转转,尤其是表格编辑器,在长期的使用过程中记类的习惯是很难轻易被改变的,笔者亲身经历过一款表格编辑器产品的迭代,易用性(易操作、易学、易见)中易学性指标评分是最高的,现在想起来也跟行业范式接近不无关系。另外关于一些编辑器右键操作、键盘操作快捷键是否满足了用户需求都是极其重要的。不过办公类产品发展到现在已不再像20年前纯工具类属性了,协同属性必将带来编辑器再一次的创新。

图片

设计范式需要长期的积累,对范式理解不够深入,通常是要么画不出来可用的原型,要么画出来的原型会被问到一个问题——“这个…看起来有点说不出来的奇怪”。在理解了基础范式之后,我们才能做出真正的创新,虽然近两年交互形式越来越稳定,但真正理解了范式之后的创新也能帮助产品快速占领用户心智,形成特定印象,继而占领市场。设计范式并非不可创新,而是在不必要的时候尽量遵循范式能最大限度去降本增效,减少不必要的用户误解或开发成本。

 

3.、多端设计交互方式

如果不是潜心研究过多端设计差异,一般很容易出问题。比如PC端和Mobile端、小程序与App等,在设计方法上都存在巨大差异,我亲眼见过太多的产品原型稿中出现过Mobile的设计方法运用到PC,或者PC应用到了Mobile。

比如基本的差异点有:

  • Mobile的用户行为多为单线任务,而PC是多线任务,比如pc可以多窗口很便捷的切换,用户可以一边聊天一边收邮件;
  • Mobile端用户操作时间更加碎片化,PC操作时间更加系统、专一;
  • PC的界面也远大于Mobile,导致信息结构差异较大;
  • 两者交互事件也存在很大差别,PC可以针对对象进行hover,多上下滚动,少左右滑动(依据鼠标特性)等;
  • 设计控件的规范差异较大。

本文并不详细赘述差异点,总的来说,这些差异点在具体的原型稿设计中会体现的比较明显,这些也是专业性的一个方面。下面将举2个例子来说明:

1.树状结构

树状结构是一个PC端经常应用的控件,适用于层级结构的展示、选择等交互操作,高效而清晰,但其在移动端展示时却不能照搬,由于屏幕、移动端手指交互等限制,在移动端该控件既不高效也不清晰。比如常见的将文件移动到文件夹的操作,桌面端的交互可以用树状结构,而移动端更适合层级结构。

图片

2.面包屑导航

面包屑在桌面端是一个非常普遍的控件,可以有效的承载层级关系展示、快速导航定位的功能,比如不同层级的文件夹展示与导航等。但在移动端,因为屏幕大小、移动端用户操作碎片化等原因,导致用户对面包屑节点的记忆、层级操作上都远不如桌面端,甚至会影响到信息的展示效率,因此移动端在层级关系的展示与切换上通常不会用面包屑,而是左上角返回按钮或系统级别的返回。当然面包屑在移动端也并非一无是处,如果面包屑各节点承载的展示作用具备极强的参考意义,比如这些文件夹节点同时承载着组织关系的显示,则面包屑也还是可以用的。

图片

总结下来:面包屑在移动端尽量别用,但如果其各层级节点同时有极强的参考意义,则可用。

 

4.、方法论的掌握和运用

方法论在交互稿中的体现是比较隐晦的,准确来说,这一点是针对思维差异点的补充,如交互设计十原则、“F型”页面设计理论(近几年有争议)等视觉动线,也包含发现问题的一些方法,比如KANO模型、用户体验地图、卡片分类等方法论的应用,这些对于用户行为维度的研究结果也会支撑着交互稿的科学性,这里不做展开阐述。比如用户体验模型示意图如下,用户体验模型是建立在用户角色模型之上的,前提是需要大量的用户深度访谈资料为基础,用以系统、全面、科学的研究用户行为和探索用户需求。

图片

用户体验地图

除了以上列举出来的,还有一项重要的方法是数据分析,这一点是容易被轻视的,但确是最具备参考价值和衡量工作结果的,交互关注的数据和产品有很多差异,具体一点,比如对于一个项目中,产品更多关注的是衡量功能结果的数据,通常包含使用数据PV/UV、转化率等,而设计师更多关注CTR、停留时长、转化漏斗中跟操作行为相关的数据,行为是交互研究的对象,所以行为数据结果能为具体的方案设计提供衡量指标。

 

5、交互稿中的UI考量

简单来说,就是不能给UI挖坑,没有交互的设计,UI上与产品之间的沟通会非常频繁,也主要会出现以下几个常见问题。

1.信息结构与优先级的落地

信息布局既需要考虑功能的业务优先级,也需要考虑用户行为优先级,同时还需要考虑到UI排版的难度。这中间基本都会有矛盾存在,做好平衡是必备技能。有时候需要逼着产品给出功能优先级,排版是有限的,也有一定审美要求的专业度,交互稿需要为UI规避一些明显的坑,比如最典型的例子——功能都很重要、文案过长等,当产品同学也不确定自己所画功能是否能被用户理解、操作的时候,会喜欢用文案去进行解释,比如button上写10个字这种,交互需要给UI提前做避坑。

2.规范

设计是一个系统,任何需求在画交互稿时都应考虑到对系统的适应或冲击,这就要求交互设计师不仅要非常熟悉设计系统,而且必须是系统的制作人之一,设计系统是一项耗时耗力的工作,前期耐心打磨,后期适应、修改,如此才能把握住用户体验的一致性。

3.边界情况

主要包含用户交互中与前端、服务端的交互,比如操作事件的定义、反馈;加载的形式与技术方案;空状态;弱网、断网等等,这些边界页面的考虑都定义清楚,能有效避免UI的返工。

4.保真度与实现效果

交互稿如果保真度较低,会导致UI在实际设计的时候对交互稿修改较大,导致页面架构、交互注释等返工修改,造成不必要的时间资源浪费,也会对项目进度造成影响。一般来说,成熟的交互稿是比较接近UI稿而又不是UI稿的一种状态,将UI中的坑避免之后,UI设计师需要做的就是更表现层的设计,比如与前端工程师的实现匹配、色彩、栅格、间距、字体字号等等。

 

6、详尽的Use Case考量

Use Case(用例)指功能、交互的定义和详细描述,用例描述的细节程度决定开发时反复沟通的频率,具体包含的细节很多,大到功能流程的设计,小到某个交互事件的定义和枚举;从前端用户与系统的交互事件,到服务端与前端的功能联动等,都涉及到,总之,只要用户看到的、点击/滑动/hover等交互行为涵盖到的,都应该被定义,以期减少开发过程中遇到的问题和沟通成本,这里不做过多阐述。

 

 

三、交互稿背后的价值——交互设计只是画稿子的吗?

显然不是!如果说一个项目交互阶段持续了3天,那绘制交互稿最多能花费1天。

交互是一个横向能力比较高的职业,很多交互设计师也改行去做了产品、用研或者UI,所以多多少少都会具备这几者的一些技能。交互设计师通常会有多重隐藏的技能是必须掌握的。

 

1、项目中坚守用户价值

用户价值在项目中很容易就让步于业务价值、项目排期、技术方案等,交互就是在这中间说“不”的人,润物细无声,在每个项目中尽量减少用户价值的损耗,最后汇聚而成的产品整体体验还是有很大差别的。

 

2、团队中承担用户研究、行为数据的部分工作

—交互在组织架构上,一般是会归属于设计部门的,所以在部门中也承担了一线跟用户和数据接触的人,即便有数据分析师、用研同学的帮助,也需要有主动跟踪这些问题的意识,不然设计出来的交互稿很难不出问题。

 

3、可用性测试等结果追踪

可用性测试在一些稍大的项目中是体验设计环节中的定性维度核验步骤,需要结合用户反馈对方案进行可用、好用测试,并不是指在流程上能跑通的技术测试,而是校验用户对于方案的接受程度、满意程度,也顺便发现一些问题,后续进行优化。

更多的结果追踪形式,比如还有SUS可用性量表(B端产品可用阿里云UES量表等)、用户满意度、NPS跟踪等等,目的在于定量的给用户体验打分,确保用户体验的衡量是有章可循的。

图片

易用性量表

 

4.、直接驱动业务增长

增长黑客和用户增长设计的概念前几年也已在业内为大家所熟知,AARRR增长模型(获客、激活、转化、留存、推荐/传播)中,交互可依赖对用户的了解和用户行为的洞察,通过比如文案、微动效、转化漏斗优化、信息梳理、布局设计等,也可以帮助业务在各阶段直接提升对应的业务指标,甚至将体验设计师熟悉的体验地图转化绘制为用户增长地图,在用户使用的全链路行为节点做设计所擅长的增长赋能。

 

5、项目流程管理

交互需要更早的参与到需求中,在需求出现之前的交互参与能让需求更加合理,而在交互稿画完之后,也需要实时的去跟进UI、开发,有一些技术难题需要跟开发密切合作,开发说“”实现不了”是经常碰到的一句话,那是否是真的实现不了,可能跟不同的团队、人、项目排期有关了,有时候并不是真的实现不了,或许只是开发不想做或者他之前没做过,这个就需要PK了,当然有的真的很难实现或者性价比很低的设计,就需要对交互稿进行调整了。除此之外,有的公司还要求交互有整体管理能力,这就另说了。

 

 

四、没有交互会带来什么?

产品团队或许不都有交互岗位,但不可以没有好的交互设计!

 

1、短期内产品使用体验很奇怪

很多人画出来的原型稿甚至是交互稿都遇到过“用起来很奇怪”这个问题,其实是因为设计者对用户心智、用户行为、控件规范、产品范式等的不熟悉造成的这个问题,一个“夹生”的东西即便逻辑合理也必然会带来“夹生”的体验。此外,范式和规范的使用只是执行时的一个选择而已,对某规范的使用未必真正解决当前场景下的问题,交互设计师更多的是通过对业务的梳理、用户的洞察来做选交互范式和规范的筛选,找到合适的,才能价值最大化。

 

2、长期下产品“难用”印象的形成

任何行业,任何产品,产品研发者可能都不是实际使用者,术业有专攻,对用户的理解是一项长期经验积累的过程,合乎逻辑的,不一定是易用的,易用的不一定是好用的。笔者的经验来看,用户的使用行为既是“傻”的,也是孕育着无穷无尽智慧的,尤其是B端产品,用户使用的方式可能超乎想象。因此对用户行为理解的深度决定了产品与用户之间的默契度,围绕一个痛点市场上总不至于只有一个产品,如何让你的产品成为用户真正的朋友,需要有专业的人来研究用户行为,交互这个专业便也是因此而生的。

如今互联网红利愈发消失殆尽,或许由于资金原因交互岗位并没有存在于所有公司或团队,但交互设计的专业度一定永远存在,岗位的横向兼并融合并不能磨灭交互的专业度,因为交互坚守的是用户体验的底线,让产品变得或好用、或高效,最终驱动业可持续增长,便是这最大的价值!


作者:陈悦

转载请注明:学UI网》交互设计的价值是什么?

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


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


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




基于智能座舱场景的用户体验设计

seo达人



一、座舱体验的三要素

用户体验设计首先字面意思是用户+体验。

图片

图片

01 座舱内的用户除了驾驶员还要考虑非驾驶员, 非驾驶员也有多种角色:老人/儿童/青年。

图片

02 体验:用户发生使用操作的感受。

但实际用户体验一定是脱离不了场景的,场景是用户发生行为的一个大环境。

03 考虑场景的时候除了考虑的当下现实场景还有未来场景。

图片

场景案例:充电全屏展示充电信息

图片

场景案例:导航交互体验,先展开详细信息,然后再收起信息

图片

场景案例:蔚来的360泊车系统开启时不能唤醒nomi

图片

而且产品的研发和功能创新,用户的体验都是依据场景体系建立的。所以HMI设计过程当中,场景体系化的建立尤为重要。

 

 

二、智能座舱的场景体系化搭建

1、搭建流程

图片

01 场景发掘:竞品分析、用户画像定位、产品定位、用户旅程图

场景发掘首先要把场景和使用的用户做定位,结合实际项目进行用户画像定位,确定场景主题,寻找到目标用户进行实车访谈和拍摄。

图片

02 场景数据细化:网络数据、用户访谈、实车测评数据、常见高频数据

这一步主要是把用户访谈收集上来的数据,进行拆分和细化,然后筛选出有价值的数据进行录入。

用户访谈数据录入到数据库里,产品经理和设计师会针对收集上来的用户反馈,进行痛点/和爽点的挖掘。提出需求解决方案。

图片

03 场景应用设计:原型设计、界面设计

基于场景的应用设计会分为两个步骤、一个是原型设计、一个界面设计、原型设计时我们更多是组内评估、找专家来提供指导性意见,到了界面设计时候除了专家评审、可以做出demo给用户进行测试来获得反馈。

图片

04 场景走查还原场景

在设计方案产出完成之后,给用户还原到我们发掘的场景去进行走查,根据用户旅程图查看有没有遗漏的用户场景和不同的用户反馈。

图片

 

2、搭建工具

整个智能座舱的场景体系化搭建需要几个工具,竞品分析、用户画像定位、产品定位、用户旅程图。

用户调研方法有很多,我们需要掌握(调查问卷、用户画像、用户体验地图、用户访谈、焦点小组、)

今天核心介绍使用频率最高的三种用研方法。

2.1 用户旅程图

关注用户在驾驶阶段的行为、方式、心情、痛点、期待。

关键步骤:

① 设定场景、目标、期望(用户画像)

② 确定行为路径

③ 建立核心地图

④ 包装地图

⑤ 绘制故事板

图片

2.2 可用性测试

可用性测试已经成为获得用户反馈的流行手段,主要因为他们上手快,能快速反应出问题。

关键步骤:

① 明确测试目的

② 问卷框架的设计

③ 投放调研问卷

④ 组织测试

⑤ 整理输出结论

图片

2.3 5W+1H法则

5W+1H 是选定的项目、工序或操作,可以从原因(Why)、对象(What)、地点(Where)、人员(Who)、时间(When)、方法(How)等六个面进行思考。

① 原因—立项背景?

② 对象—什么功能?

③ 地点— 什么场景下?

④ 人员–驾驶员?/非驾驶员?

⑤ 时间–什么时机?哪个流程之后?

⑥ 如何–什么方式操作?

图片

 

 

三、细化座舱用户体验的三阶段

1、用户体验的三阶段

体验的时间性有三个主要组成成分,及熟悉程度、功能依赖和情感依赖。

图片

1.1 初识体验:

我们在产品使用初期的阶段,都会对产品有个使用预期。例如期望产品能提供一个好的体验,或者怕产生不好的体验。

图片

1.2 使用体验:

使用体验分为两个阶段:使用产品初期和使用产品深度期

进入到车内试驾或者试乘,试驾员和销售除了会让用户体验车机的基础功能外,主要介绍的就是和竞品车型的竞争功能。

产品深度体验期的时候,长期的可用性变得更加重要,而不是最初的易学性。从而产品的实用性成为影响我们整体评估判断的主要因素。

1.3 获得体验:

最后,当我们接受了产品,在我们的日程生活中它参与了我们的社交活动。成为了生活当中的固定解决问题的工具,这个阶段产品体验就具有可识别性了。

 

2、体验的三条路线

图片

2.1 体验线路是感官线

我们现在座舱内的交互感官有、触感、听感、视觉、嗅觉、语音。用户在人机交互的时候第一时间获得直观感受。

2.2 体验线路是情感线

情感线是诺曼强调感情在塑造体验中的重要性。比如灯光秀、宠物模式、和拟人化的汽车助手。带给用户都是情感上的满足。这些情感构成了与汽车的首次互动体验。

图片

2.3 体验线路的流畅

就像C端和B端一样,我们交互体验的线路效率和流畅程度,能给用户增强驾驶乐趣。或者最大限度减少信息元素的干扰,让驾驶员沉浸在当下。

图片

 

3、把握用户体验的多样性

3.1 个人价值观的差异

首先个人的因素,因为我们成长的环境不同,造成了对价值观的差异,有的人喜欢刺激新颖的产品,有的人喜欢乏善可陈的产品。

图片

3.2 产品属性问题

第二可能是产品属性的问题,游戏产品带给用户就是不断的快感刺激,工具类型的产品用户使用流程流畅会更好。

图片

3.3 跟随时间线的体重心变化

用户的使用体验对于时间的变化,通过用户旅程图,他们对产品的关注点会产生变化,例如用户刚开始对产品互动中更关注新的功能和刺激的体验。但在使用过一段时间后他们可能不会再关注他的新颖程度,更关注产品的实用性和效率。所以需要我们在不同的使用阶段重新帮助用户提升体验。

图片

 

原文地址:七酱设计笔记

作者:郝小七

转载请注明:学UI网》基于智能座舱场景的用户体验设计

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


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


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



这10年,我都在这里看全球最顶尖的app产品!

seo达人

图片

最关键的是,点进去每一个app,里面有这个app的所有截图:

图片

简直就是一个吸取灵感的天堂,太nice了。(网址在文末)

那我们有了这个好东西,怎么去参考借鉴呢?

今天菜心就给大家一些启发,希望能对大家有所帮助。

 

一、图标双线条风格

比如像下面这个app,体育竞技类的:

图片

我们仔细观察底部主图标:

图片

会发现他的风格是双线条的,在国内还很少见过,而这种形式我们就可以参考参考,省的来被别人说你得东西太同质化!

当然,也不能乱参考,一定要说清楚理念和原因,比如像人家体育类的app,用双线条风格,把这个双线条比喻成跑道,我感觉没毛病,哈哈。

 

二、学习人家的一些小创意

比如,像这个地图上的小创意点,人物拿着一个巨大的咖啡杯,和人物形成强烈的大小对比,就很有趣味性:

图片

放大看,人物还伸出来个舌头,挺馋的感觉:

图片

这种小创意,当你做一些场景的时候,就可以借鉴,比如一些地图啊、外卖啊,都可以尝试参考参考。

 

三、老板说你的闪屏太单调

闪屏是app的重要页面之一,我们看到的大部分闪屏都是一个简单的logo,比如:

图片

咱就是说,万一哪天你的老板不喜欢这种简单的形式,像来点设计感的闪屏,那你就可以去这个网站上找灵感,你就在主页划拉就完了,你框框一顿划拉,
就能发现有很多参考形式,比如这种图形类的:

图片

这种插画类的:

图片

这种图片类的:

图片

你就咔咔参考呗,灵感老了去了!

 

四、看看别人的插画风格

也可以看看别人的app里面融入的插画风格是什么样的,千万别一画插图就是这样的:

图片

看看别人的风格和造型,最起码可以提高一些审美,也可以提高一些对于差异化的视觉敏感度:

图片

当然,最好可以自己动手练一练,那样会吸收的更好!

 

总结

除了这些,看看差异化的风格,也都是可以的,像这些

图片

说不定,后面什么时候就能够用到,参考一番。

好啦,以上就是给大家的一些灵感启发, 主要是告诉大家,拿到一个优秀的网站后,怎么寻找灵感,吸取灵感,好好的把它用起来,而不是放到收藏夹里面吃灰。

网址:https://mobbin.com/

好好用起来,希望可以帮到大家!下期见!


作者:菜心

转载请注明:学UI网》这10年,我都在这里看全球最顶尖的app产品!

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


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


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



2022 PANTONE 最美色彩来啦!

seo达人

一、全新Post-It®Notes

Post-it 与彩通色彩研究所共同开发,推出 11 种全新 Post-it Notes 系列,以令人耳目一新的色调展现色彩的力量。激发创意生产力!

图片

 Post-it Notes 

Post-it 始终提供缤纷的画布,为人们的想法增添些许鲜艳的色彩,而在七年没有重大的视觉转变之后,彩通色彩研究所获选成为 3M 的合作伙伴,在全球推出重新打造的 Post-it Notes 和 Post-it Super Sticky 系列。

 

三种精选调色板包括:

1、花卉幻想

这个调色板充满新鲜芬芳的春季花卉,阳光正面的气息能带来活力与好心情。

2、能量激发

图片

这个系列中活力四射的色彩能点亮您的心情,让讯息清晰透彻。

鲜艳色彩混搭成组,振奋人心的色调以充满活力的配色之姿自然呈现。这些动感活泼的色调使人留下大胆鲜明的印象,传达生气蓬勃的欢乐讯息,以急迫感和力量激励使用者采取实际行动。

3、单纯静谧

图片

透过干净现代的单纯静谧系列,为提醒事项便利贴注入一丝禅意。

和谐混搭干净俐落的经典颜色,呈现简洁外观和平静状态,突显人们对简化、清理和整理的渴望。这几种独特色调稳定可靠且历久不衰,使用温柔且老少咸宜的粉红色来达到强调的目的,传递直接而单纯的讯息,让轻柔的氛围静静地抚慰人心。

 

二、多彩的元宇宙

元宇宙中的色彩:探索色彩在虚拟与现实之间的关系。

图片

1、视觉语言

许多人几乎无法想像生活在眼睛所见只有黑白灰、没有其他色彩的世界;我们已经习惯被色彩包围,色彩更是定义世界的视觉讯号,让我们感知与周遭环境和所爱事物的连结。约有 80% 的人生体验会经过双眼吸收,因此视觉讯号对于传达讯息至关重要。

图片

色彩在元宇宙的使用方式与实体世界大致无异,唯一的差别在于:

实体世界中的色彩有其局限。物体自然会是一种色彩,可以改变,不过需要资源、时间和精力。此外数码光谱中的某些色彩无法在实体世界重现。在元宇宙中,色彩可以立即视需求调整。

图片

元宇宙中的色彩没有任何限制。从你在 Web 3.0 中的外貌到衣着,或者是你拥有的产品,这些色彩都可以随你的心情以及你希望在数码世界呈现的方式改变,不论它们在实体世界呈现的色彩为何。元宇宙将会带来自由。

图片

三、提契诺的色彩

Ticino Turismo 了解色彩会唤起我们对旅游地点的珍藏回忆,并激发未来的旅游计画。因此他们与彩通色彩研究所 (Pantone Color Institute) 的全球色彩专家团队合作,透过各种色彩描述造访瑞士著名提契诺地区的体验。

(点击图片前往原文查看视频)

icino Turismo 与彩通色彩研究所合作精选出五种最能代表提契诺的色彩,用来传达春夏两季访客在当地所见识到的美景与快乐体验。

图片

彩通色彩研究所以这些色彩为基础创造出 Ticino Camellia Pink (提契诺山茶花粉红),用来代表点缀这片地区的艳粉色花朵;Bellinzona Fortress Grey (贝林佐纳城堡灰),这种带有灰色调的暖褐灰色正是当地中世纪城堡呈现的色彩;Brissago Blue (布利萨戈蓝),这是布利萨戈岛周围澄澈湖水的色彩;Lugano Sunset Orange (卢加诺日落橘),呈现当地日落的迷人光彩;以及 Valle di Muggio Green (穆吉奥山谷绿),展现郁郁葱葱的山谷色彩。

 

四、周大福的色彩

彩通色彩研究所最近与周大福集团合作,透过提供包含三种新色调的时尚调色盘,结合中国传统风格和现代审美,借以衬托周大福集团标志性的招牌红色。

图片

全新周大福调色盘体现了融合传统色彩与现代风格的故事。呈现出精致感触、完美品质和现代雅趣,全新周大福调色盘既融合了传统的优雅,也继承了现代风格的美感和精神。

图片

全新调色板:融合中国传统风格和现代审美

为强调大福红 (Tai Fook Red) 浓郁而充满活力的强大吸引力,我们透过暖金色突显出一系列相容的色调,打造和谐的色彩故事。

图片

这个全新调色板展现了对传承、幸福和信念的现代诠释,衬托出大福红 (Tai Fook Red) 优雅、现代且具备宁静力量的特点,透过现代化且积极的态度展现集团对品质的承诺。

 

五、西派金铜  City Park Golden Brass

彩通色彩研究所最近与中国铁建房地产集团有限公司 (CRCCRE) 合作,提供宏观色彩趋势指引并建立招牌色彩,做为该公司的主要品牌视觉形象,用于公司旗下不同的重庆西派城住宅。

图片

这个全新色彩能够向潜在买主传达出重庆西派城的居住环境和生活风格,以及CRCCRE 的愿景:成为具价值的房产开发、工程设计及资产管理商,借此提升中国生活水准,同时解决人们日益增长的需求,满足他们追求自然景观环绕,以及求取身心灵平衡的愿望。

图片

在考量中国生活风格趋势的美学,以及中国居民未来的追求后,我们创造出「西派金铜 (City Park Golden Brass) 」来代表重庆西派城的品牌定位:拘谨、优雅、稳定发展、现代化、年轻且时尚,同时仍支持及推广积极进取的哲学。


作者:刘涛

转载请注明:学UI网》2022 PANTONE 最美色彩来啦!

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


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


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



客户关系管理(CRM)产品解析

seo达人


图片

不同的产品,对于页面的模式、表现上都会有明显的差异,今天我们就来聊聊 客户关系管理系统

 

 

一、定义

CRM 的全称为客户关系管理系统,是 Customer Relationship Management 的缩写,顾名思义就是提供给销售人员进行使用的管理系统,来帮助销售人员管理他手下的客户。从产品类型来看,CRM产品是属于垂直业务型的产品,主要是为各行各业的企业,提供管理销售的服务

 

当然在CRM产品当中目前主要分为两个赛道,分别是以:Salesforce、纷享销客、销售易、悟空CRM 为首的管理型CRM,它们最为主要的功能是管理客户,也就是将销售人员手中的客户,通过公司的CRM系统进行统一的管理,能够保证企业的权益不会受到伤害

而另一个赛道则是SCRM,这应该算是国内比较火的新名词(其实也出现了很长一段时间了),它的全称是 Social Customer Relationship Management 也就是社交化客户关系管理系统。主要典型的产品包含:EC、尘锋、探马、微盛 等等…

图片

如何去理解SCRM?

比如我们现在日常沟通、获取信息,会从以前的传统媒体像是 “电视、报纸、收音机” ,逐渐迁移到 微信、知乎、小红书、抖音 等等,而这些社交媒体上我们的各种喜好、最近发生的事情,都能够在SCRM当中展示,并且他可以根据你的喜好,来与你进行沟通进而帮助它进行获客、成单

比如今天我想买 Figma ,然后我又在微信朋友圈当中吐槽 Sketch 很卡,那作为销售的你肯定会给我推销说,咱们 Figma 一点也不卡。当然SCRM的功能还会有很多,由于篇幅有限,我们目前分析还是以CRM为主,再加上SCRM篇幅太大,后面在做分析。或者是有在这些行业工作的小伙伴,可以在评论区进行补充

 

 

二、作用

想要了解CRM产品究竟能够给用户带来什么作用,我们今天换一个视角,来说说如果企业不使用CRM,会有哪些后果

 

1、客户安全性很难保证

因为在传统的销售业务模式当中,销售人员可以与客户直接进行对接,企业无法对销售进行合理的管控,所以经常会发生客户跟着销售“跑了”,也就是销售离职,带走了之前他负责的客户。这个时候你作为企业老板即没有掌握客户的基本信息,同时对于这位客户的经历也不了解,这样很容易就会流失一个客户。而客户对于企业来说至关重要,因为每一个客户都是企业通过运营人员沟通获取来的,因此企业的客户安全性无法得到保证(这也是为什么很多企业选择使用企业微信而不是个人微信的原因)

 

2、数据信息不够统一

一个销售获客的渠道有很多,其中包含名片、微信推荐、电话分享 等,而这些客户信息,如果不统一管理,就会变成一个个孤岛,对于企业的日常管理是非常麻烦,无法全局监控
当然企业也可以将数据统一放在传统的Excel表格当中,但是表格传播过于简单,风险太大,并且无法去做协同,一旦后续数据增多也会导致整个管理非常的混乱,不能分权限将企业的所有客户统一进行查看

图片

 

3、难以建立良好的客户关系

传统方式管理客户的时候,销售人员对于客户印象主要来自 之前的微信聊天记录以及朋友圈,而想要深入了解这位客户的具体信息、具体对接的联系人、以及公司的具体规模,就可能会因为时间的关系而忘记,因此传统的方式无法追踪客户,将客户的资料统一整理

图片

 

4.销售难以管理

对于企业的销售人员来说,他们的工作常年在外,因此企业很难对手下的销售进行管理,比如想了解员工今天的工作情况,又或者是员工的后续工作安排。之前企业都是通过收集员工每日工作汇报来判断,依旧很低效率
CRM系统可以连接日常工作和业务,在辅助销售人员完成工作的同时,也完成了对信息的收集,管理者可以清晰地看到该客户的跟进记录,以及重点客户员工是如何跟进的,提高了管理团队的洞察力

图片

其实了解CRM产品的作用,最终的目的就是为了了解这款产品能够给企业带来什么价值,什么核心的能力能够驱动客户进行购买,了解了过后你才能知道这个功能带来的价值是什么

三、业务

关于CRM的业务,我们主要会分为 专业词汇、关键角色、流程 三个维度进行分析,我们先来了解一下常见的专业词汇

 

1、专业词汇

销售线索:销售线索是与客户初次接触获得的原始信息, 可以是从展会中获得的名片,通过推广活动获得的电话号码 ,或是会议、广告、外部购买等渠道获得的客户简单信息,然后通过管理和跟进可以转化为客户

线索池:将线索通过按不同行业不同地区或是其它的方式组合一起,即成为线索池,如上海区线索池、北京区线索池、教育行业线索池、金融行业线索池等

客户:客户是指有业务往来企业、团体或个人,是企业的重要资源,可以通过线索转化而来,或是销售挖掘等多种渠道获取

公海:按不同行业不同地区或是按某种相同特性组合一起的客户分组,即成为公海,如上海区公海、北京区公海、教育行业公海等

联系人:即与企业直接联系的客户方相关人员。如果是企业客户,联系人是您与企业联系沟通的人。如果是个人客户,联系人可以是与客户有关系的沟通联系人

商机:商机是与客户做一笔生意的跟进过程,如果是企业客户,一个完整的销售周期大概包括产品咨询、报价、方案评估及最后的赢单或输单

图片

 

2、关键角色

在CRM产品里面,会涉及到形形色色不同的人员,其中最主要的角色包含:市场、销售、销售主管、老板

市场:主要负责整个产品的营销以及线索的分配,与CRM产品相关的就是会安排市场人员来与销售进行对接,将他们在 官网、内部推荐 得到的线索流转给销售

销售:销售人员对于企业来说非常关键,他主要是企业与客户对接的重要人员,是这份订单是否成功的关键角色
虽然都叫销售,但是会根据工作性质的不同,将销售分为:电话销售、产品销售与大客户销售

电话销售:电销通常是销售当中最基础的,通常就是拿着通讯录不停地拨打客户电话,算是一个重复性非常高的职位

产品销售:产品销售更多就是自有产品,当线索来了过后,销售人员也会与客户去电话沟通,但是沟通的目的是了解你公司的具体情况,分析是否有潜在的购买需求,后续主要任务便是促成订单的成交
比如你们每次去试用别人的B端产品的时候,都是产品销售来与你对接(别以为我不知道你们每天在做什么~)

大客户销售:大客户销售顾名思义,主要针对的是企业较为重要的客户,他们在整体的决策层面链路较长、金额较大,因此会安排经验丰富的人员进行对接

软件实施:负责现场培训、协助项目验收、负责需求的初步确认、把控项目进度、与客户沟通个性化需求、负责项目维护。总之就是你购买了产品过后,需要实施人员来进行项目落地(有的公司没有实施会让销售人员负责)

客户成功:客户成功扮演主要是提升客户的认同感,让客户感受到使用这款产品能够给他带来价值。简单来说客户成功就是要找出客户的问题,并制定相应的解决方案,然后基于不同的产品,把解决方案落进系统。客户有问题反馈,就需要与客户成功进行对接,评判客户成功好坏的标准就是看产品的续费率

 

3、流程

要了解一款B端产品的业务,那业务流程自然是十分重要,因为这样能够最快的了解清楚整个产品的流转方式(当然不同公司对于产品的流程不同,只是作为参考)

图片

在CRM产品当中,所有的客户都是从线索开始,因此线索是作为整个CRM产品的起点,也是业务流程当中的最主要一步。当然针对于线索,他最主要的特点便是线索来源,一般分为:官网、展会、朋友推荐、以及新媒体渠道当中获取到的线索(这可能就是SCRM存在原因)
而在线索这里,通常系统会去自动对接 官网 当中的提交的表单线索,同时也会给各个员工开放自己新建线索的入口(有的企业,新增一个有效线索是有对应的提成)

当然线索在类型上主要分为:线索池、有效线索、培育线索

线索池:就是将所有的线索都放在一个地方,方便销售人员进行选择

有效线索:有真正购买意愿的线索,通常敏锐的市场人员会从 规模、电话、行业 等综合信息进行判断

培育线索:也就是客户对于这个产品比较犹豫,对于产品购买意愿不太明确,因此可以通过培育线索,让他了解到产品过后,转化为有效线索

当你完成线索流转过后,你就会是一个商机,这也就代表着你对咱们的产品非常感兴趣,开始询问报价,销售人员就会给你去做各种各样的演示与沟通
而在每一次销售与客户的沟通情况,企业都会要求他去录入跟进信息,如果不填写可能会面临罚款的风险

然后就是销售人员一次又一次的和客户沟通,商讨价格直到客户签单,在此过程当中就会涉及到商务,然后就是 订单、合同、回款、开票 等流程阶段 来对整个过程进行统一管理,并且所有的过程都会在系统当中进行记录,直到最后的赢单

有得必有失,那后续输单也是同样,便是没有取得进展,最后以失败告终

 

我们来整理一下,举一个实际例子,比如现在想要去了解一款人事管理系统,你打开了薪人薪事的官网,在他们的官网当中经过简单的了解,填写了你的企业信息与表单

图片

紧接着,你的信息就会给到市场人员,他们会根据你的 表单信息、所在城市、公司规模 给你安排更为合适的销售人员来对你进行跟进

在跟进的过程当中就会根据你的各种 “反馈与表现” ,将你定义为各种名称 线索、商机、客户
并且目的只有一个,就是让你购买产品,后续涉及到 订单、合同、打款 等,都属于正常流程当中非常重要的一环,直到最终的赢单与输单

 

 

四、页面

CRM产品当中较为重要的页面,因为作为设计师,我们最终的设计思考一定是通过页面来去呈现,而前面的整体业务模块则更多是为了理解它们之间的关系,将问题讲清楚

1、客户详情页

客户详情页面作为CRM里面最为重要的一个页面,它主要是呈现这个客户当中的所有完整信息。比如销售人员,他高频进入的页面一定是客户的详情页面,因为他想要了解这个客户,在整个过程当中了解哪些信息、想要得到什么内容都可以通过客户想以企业快速的找到
但是由于客户详情页 页面的整体设计难度较大,会存在大量信息以及关联的内容,因此客户详情页更加考验设计师的信息处理能力。这里分享了 Hubspot、Salesforce、纷享销客、销售易、悟空CRM 的客户详情页

图片

 

2、客户列表页

客户列表页更多就是呈现数据,和普通B端产品的列表页基本相同,只是说会根据不同的产品类型有所调整。比如CRM产品,它更加强调的就是客户信息的快速检索以及快速寻找,因此你会发现在产品里面它的筛选功能做的非常强大

图片

当然关于表格的内容我们这里就不做过多的赘述,因为之前几期通用的表格文章。已经写得非常详细,感兴趣的话可以去看一下咱们之前的表格文章

3、跟进记录的填写

跟进记录在CRM产品里面是非常重要的板块,因为跟进记录也就意味着销售人员需要去反复的填写。有点像一个快速的表单让我需要把每一次我们具体聊的内容写到整个系统里面来
通常一个销售非常规范的公司,会要求销售人员把和顾客每一次的数据都记录到跟进记录里面,因此在跟进记录当中,我们要去考虑他如何频繁去呈现,以及如何快速的去阅读

图片

 

 

五、CRM产品对于设计师的影响

聊完了CRM产品过后,我们来说说整个产品会对设计师造成哪些影响
因为在整个的数据过程当中,我们需要去关注的点非常的多

1、了解用户习惯

简单来说,其实CRM产品本身就是为销售人员服务的一种产品类型,那作为设计师了解 销售的日常习惯就显得尤为重要。虽然在文章当中已经讲的过于详细,但是你会发现,用户的习惯当中,不同的产品类型,它的日常习惯本身就会有所不同,像是 电话销售、产品销售、大客户销售、传统业务销售,其实这对于我们来说,更需要了解用户的习惯才能更好的去做设计

 

2、懂得业务

因为CRM产品本身是难以理解的你,也就导致了我们作为设计师需要快速的了解业务,去懂业务究竟应该怎么去实现
比如和同事快速的沟通,进而快速掌握业务信息,又或者是寻找各种资料帮助你了解业务。那关于这些内容我们之前也有讲过,可以翻一翻,这里就不展开去赘述

 

3、快速转换

CRM本质上是一个针对于多行业的产品类型,也就导致了我们需要在设计的过程当中快速的进行切换。需要我们将用户多行业的需求进行整合,因为在工作当中你确实会发现不同的企业,他的关注点是不太一样的。那如何把这不同的关注点进行融合整理,就需要设计师充分的参与才行

 

作者:CE青年

转载请注明:学UI网》客户关系管理(CRM)产品解析

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


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


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



日历

链接

个人资料

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

存档