首页

这些设计细节你知道吗?

seo达人

目录

  • 产品需求与设计研发的良性循环
  • 今日事今日毕
  • 设计文档的规范性
  • 多渠道沟通
  • 验收不仅仅是记录问题
  • 沉淀业务组件的必要性

 

一、产品需求与设计研发的良性循环

从产品经理提出需求开始,到研发开发完成上线,整个过程我们可以看作是一个迭代。倘若与研发同一个迭代完成产品设计,时间上肯定是不够用。需求是永远都做不完的,一个人无论怎么埋头苦干,还是会时间紧迫无法喘息!这时候团队合作显得至关重要。我们需要进行合理的任务管理,利用工具达到更好的效果。目前我们敏捷组产品与设计小团队用的是飞书文档,它可以新建所需要的任务看板,清晰直观的看到此任务当前流转的阶段,任意拖拽方便快捷。

图片
图片

完善需求的详细信息,比如:所属项目、任务执行人、优先级、外审状态、敏捷组、文档链接等等,就可以从不同维度去管理任务,筛选我们想要了解的重点。

那么基于此,如果我是视觉设计,完成需求后就可以将它拖入下一泳道,等待排期。未完成的也就不会进入到排期和研发阶段,这样基本上每个迭代研发都会提前拿到相应的设计稿,尽管后续可能会有细节上的修改和返工,也不会很仓促。

 

二、今日事今日毕

每天的工作充满“已知”和“未知”。“已知”的是固定要做的需求设计,“未知”的是工作消息的各种沟通与答疑。
新的一周开始,我们可以安排下本周大致要做的事情,通过自己习惯的方式去记录。简单清晰即可,没必要给自己增加额外负担。
尽量不延误,保证本周事情完成率90%以上不会对下周产生很大压力。重要的事情和需要长时间投入的需求可以用完整且精力比较好的时间段去完成,琐碎的任务集中时间去搞定,或者快下班了搞搞完。

图片

三、设计文档的规范性

每个人都有自己习惯的设计稿排列方式。整齐、清晰、直观的布局,有利于研发快速捕捉到想要查看的信息。

图片

⬇️ 设计文档基本由以下部分组成:目录、交互原型、交互说明、视觉稿。交互稿与视觉稿最好合并在一个文档中,方便研发查看。

图片

⬇️ 具体到页面细节说明,可以安排在相应设计界面的附近,用清晰的数字或者标签展示。

图片

⬇️ 如不同状态,不同变量的变化,也需要详细标注。

图片

⬇️ 设计内容过多时,像以下细节单纯在页面上展示很容易被忽略,需要单独拿出来在旁边重点强调一下。

图片

⬇️ 如今标注插件很多,不需要全部手动标注了,但对于一些我们认为研发会忽略和写错的尺寸、间距等,可以表示一下。设计软件的自动展示标注有时候会因为图层覆盖之类的问题点不到某些元素,这个也需要检查一下。不然研发就自由发挥了哟~

图片

⬇️ 各式各样的组件有非常多的形式和状态,设计在引用时要明确类型,避免研发乱用。

图片

⬇️ 比如这个全局提示组件,组件本身可以提供多行展示的样式和规则,但研发很有可能不知道某种情况下对应的展示样式,实现的不是我们预期。以下是日常迭代中研发实现的有问题的样式与正确的对比:

图片

如上述所讲,完善补充细节,譬如图标的颜色变量,悬停变化,状态变化,引用组件备注等等,这些都是开发还原落地视觉设计的基础。页面设计中,所需的图标、图例、图片等素材,切图并压缩给到研发,最好用统一的方式去管理图标,比如iconfont,或者自己公司的组件平台等。

 

四、多渠道沟通

当接到新的需求并且拿到交互稿,前几周也参加了需求&交互内审,基本不会出现需求和框架大改的问题。大体了解背景和设计重点后,可完善视觉细节。

图片

做完设计稿只是成功了一半,还需在设计内审前,发给对应的产品和交互同学评论提意见,先修改掉一波明显的问题。这是视觉设计阶段第一个比较重要的沟通,提前在大部分内容上达成共识,节省了后续评审的时间。

图片

修改完大家提的问题后,视觉评审会明显顺利许多~

 

五、验收不仅仅是记录问题

1、项目上线前验收

提到验收是我非常头疼的事。前期设计稿准备充足的情况下,研发如果能实现到视觉稿的80%,验收起来不会特别吃力。有时会遇到验收内容多,前端还原度低,耗费设计同学大量时间,建立良好的验收机制非常关键,与研发同学的沟通和磨合也是必不可少的。

涉及到人员较少时,可以坐到一起面对面去沟通;若此次内容较多,涉及不同人,可建立文档。

图片

一遍验收后并不完美,基本要2-3轮的继续走查,针对优先级比较高或者问题重灾区,标红后给到相应负责的前端继续修改,保证上线前90%以上的问题得到解决。若还有问题遗留,可新建kaptain任务后续优化,让验收问题有迹可循。

2、日常全局验收

线上已有问题,按照模块集中归纳,建立对应的研发任务。开发过程中可与前端同学随时沟通,提供细节补充。

有时我们认为很简单的去掉一条间隔线或者间距,可能涉及到非常多不同的场景面板,提前沟通也有利于研发评估工作量。

图片

六、沉淀业务组件的必要性

每当开始新的项目设计,要费好大功夫找源文件呀。适当的归纳整理历史文档,也有助于我们快速的进入设计状态,对新人也很友好!

图片

以业务需求为背景,在组件库的基础之上,业务组件的整理尤为重要。按照每个人的使用习惯,我们可以建立自己的“业务”组件库,方便需求迭代时快速定位。

比如,我们可以将业务组件分为几部分:图标、图例、场景等,进而细化场景中的内容。至于怎么去命名和排版细节,都可以按照自己的习惯来整理,当然组件形成后也可以扩大到我们同业务线的UX或交互同学一起使用,提高设计效率。

图片

可能对于非设计岗位来说,看到的仅仅是一张设计图,但在设计稿背后我们需要去支持和处理的细节也是非常有价值的存在。

希望这篇小小滴文章可以带给你一定的帮助 ~(≧▽≦)/~


作者:小柴

转载请注明:学UI网》这些设计细节你知道吗?

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


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


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



工作经验|低代码平台,会给设计师的工作带来哪些影响?

seo达人

一、低代码平台是什么?

低代码开发平台(LCDP,英文全称为 Low-Code Development Platform),顾名思义,就是仅需通过少量代码或无需代码就可以快速生成应用程序的开发平台。借助低代码平台,你不需要像程序员一样写代码,而是仅通过对于组件和模块的拖、拉、拼、接就可以很迅速地搭建出一系列页面,完成一个基础产品。

图片

低代码平台 OutSystems 的功能界面

低代码平台的诞生和发展的进程简述如下:

– 2000年:可视化编程语言诞生,通过一些可视化的界面来辅助用户进行编程;

– 2014年:著名的研究机构 Forrester 正式提出低代码开发概念,并投身对该平台的研究当中,低代码平台在国外兴起

– 2016年:国内的低代码平台相继发布;

– 2021年:中国市场的低代码生态体系也逐步建立了起来,且正在加速发展,待开启一个新纪元。

作为帮助企业和团队快速搭建产品、实现数字化的新工具,低代码平台的核心功能有以下几点:

1.可视化

以简洁的图形化操作界面为主,做到通俗易懂,降低使用者的操作门槛,开箱即用;同时你可以在搭建好的界面中进行试用操作,所见即所得。

2.模型化

可以通过拖、拉、拽等方式拼接平台上的组件,用来搭建页面。可以灵活定义模型中的字段、元素和大部分布局。

3.工程化

通常包含开发调试、自动发布上线、数据监测等一站式的产品开发能力

4.扩展性

支持少量的代码扩展,可以实现一部分个性化的产品设计和开发需求,也可以和更多第三方工具联动应用,做到功能和信息的互通共享。

和组件库一样,低代码平台也是一种提效工具。但它与组件库的不同之处在于:

 

1、有成套的成熟解决方案。

低代码平台提供的不仅是原子级别的组件,也包括页面的模版、产品功能的框架和操作流程,比如提供各类企业级应用常见的聚合表、仪表盘、报表等已经成熟的功能界面解决方案。

 

2、能顺畅衔接第三方工具。

低代码平台可以和很多第三方工具的接口打通,比如可以与产品文档、设计软件、后台数据库等无缝对接,让工作过程更加专业、有序、可查。

 

3、注重流程而非单点提效。

让各个产研环节之间更易产生联动,适用于互联网产品研发的全流程,不再局限于设计和开发环节,也可以从业务、产品侧直接做输入。

理想化的情况是,业务侧和产品侧也可以轻松地使用低代码平台上提供的解决方案做出高质量的“原型图”,甚至是产品的基础版本,设计师仅需要做部分调整,开发检查优化下代码,产品就可以直接上线,比现在的工作流程要高效很多。

 

而且当产品侧在低代码平台上对文案做出调整后,相应的代码也会直接产生变化,这样就大大减少 “产品 – 设计 – 开发” 这种单线程的沟通方式带来的细节调整上的时间成本和错误率。

 

二、对于设计师工作的影响

低代码平台带来的产研方式的革新,对于不追求个性化体验的、从0-1的、功能相对单一、通用的企业级产品是合适使用的。这类产品的产研场景中,低代码平台可以代替设计师和开发完成重复性、低价值的体力劳动

不过,低代码平台在现阶段也并非适用于所有产品。这种方式做出的页面质量和功能自由度会受限于可视化编辑器所提供的服务和能力,如果编辑器不支持某种自定义的功能样式,那么产品形态在实现业务需求的过程中就会受限。所以对于业务需求和用户体验要求较高的业务领域,低代码平台目前起到的作用还是有限的。

目前,接触低代码平台的设计师可以被分为两类,一类是用低代码平台的“用户”,也就是自己参与的业务已经开始使用低代码平台做提效工具来做设计和研发了;另一类是设计低代码平台的“设计师”,也就是自己参与的业务就是低代码平台产品的设计。

 

1、对于「用户」类的设计师

使用低代码平台的一个核心思想是:低代码平台只是协助你工作的工具,不是你的替代品。它是手,而你是脑。你的思维和判断不要被工具所限制。你可以从重复性和低价值的工作中解脱出来,更多把工作的重心放在:

1.吃透业务

把时间和精力放在理解业务和用户需求、参与构建产品上,尝试让设计思维更早地介入到产品构建的过程中。低代码平台也可以变成你与产品和业务的无缝对接的桥梁,也更便于你了解他们的工作目标和方向。

2.去同质化

低代码平台的普遍应用会进一步带来企业级产品的同质化,这个时候更需要从用户需求切入,以商业、社会、人文等不同维度的设计创新来综合性地思考去同质化的解决方案,提升用户对于产品的认知,增强产品的差异化。

3.学新技能

工具在变化,你所掌握的技能也要随之更新。要充分关注和了解低代码平台的功能和进展,不仅不排斥使用,还要随之一同发展。你的工作技能将不再以设计绘图技法为主,要在低代码平台带来的协作方式变革中提升新的工作技能。

 

2、对于低代码平台的设计师

设计低代码平台的一个核心思想是:低代码平台本质上研究的是“业务模型”、“界面设计”与“代码实现”三者之间的关系。所以你可以:

1.从流程侧切入

需求、界面、代码通过一个可视化编辑器实现绑定在一起,其背后所对应的业务、设计和研发之间的关系不可忽视。要保证流程上的无缝对接和通畅性就需要多了解他们之间的工作协同方式。

2.从用户侧切入

从低代码平台的核心用户入手,为业务、设计和研发分别提供有针对性的功能服务,以此提高平台功能的丰富性、易用性和可拓展性。

现阶段也只是低代码平台的起步阶段,前路漫漫。如何最大限度地赋予不同类型的用户操作权力、最大程度上实现定制化、扩展到更多业务领域,都是需要继续研究的可课题。

 

作者:元尧

转载请注明:学UI网》工作经验|低代码平台,会给设计师的工作带来哪些影响?

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


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


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



如何解析产品原型

seo达人

一、理解功能

下手前的第一步当然是要先搞明白使用场景和功能用途,这个太基础了,想必大家都懂。具体到这个项目来说,它是一个用于数据分析的服务,后台有一个信息量很大的数据库,通过前台进行条件过滤后即可得到一张数据表。

图片

看到原型我的第一反应是:该从哪里开始操作?页面功能的终点在哪?原因在于,页面中有三个主按钮“生成表格”,“预览”和“应用条件”,且视觉结构基本扁平。和产品沟通后了解到,当前的逻辑是先选择指标,给指标排序后就可以生成表格了,针对表格可以再应用条件筛选,最终形成的表格可以导出。

 

二、结构梳理

2.1 拆分重组功能

设计改造一般从大到小作调整。先优化整体结构,尽可能让功能分区更明确。理解了原型后不难看出,页面的配置项分的很开,先在左边栏加指标,再在内容去上方排序,生成表格后再去右边栏条件筛选。这种需要用户点来点去的结构显然不太友好,而且细碎的分割消耗了大量的空间。

图片

该页面功能大概分为配置和数据展示两大部分,不妨从这个角度重组页面功能。配置生成类页面有这样几种常见交互形式:一,分两步,先配置再生成;二,模态浮层,通过弹窗或者抽屉配置;三,非模态,用工具栏或抽屉容纳配置项目。为了便于比对或调整配置项,非模态的抽屉更适合操作场景。

图片

功能结构的优化得到了如下的改进:

  • 易于统一卷展配置抽屉,避免了各个面板独立控制和空间浪费。
  • 减少了配置时的操作步骤,选好配置项即可一键生成。
  • 分区明显,一边操作另一边展示,各司其职。

2.2 方案对比测试

对比测试方案的目的是尽可能考虑全各种设计方案,确定出一个最符合使用习惯和操作流程的布置。不论是手画草图还是用电脑画线框图都可以,期间多和产品或业务讨论,可以让对方理解整个的推导过程。

不过沟通中有两点需要注意,首先讨论方案前先过滤掉从设计的角度看明显不合理的,评审的目的是通过多方意见调解让方案达到最优,而不是展示工作量。其次是结构和视觉方案尽量分开评估,否则对方会收到海量排列组合后的设计方案,评起来抓不住重点。下面是当时和产品一块研讨的三个方案:

图片

  • 方案一:指标一列,过滤条件一列。其中指标可以通过页签切换全部和已选。
  • 方案二:同方案一,但全部指标和已选指标上下显示。
  • 方案三:全部指标单占一列,已选指标和过滤条件单占一列。

最终选定了方案三,综合来看有如下原因:用户添加条件筛选的频次低,所以没有单放一列并且可单独卷展;并且方案三的布局在语义上更容易被理解为“库和待应用项”,提供更典型的心理暗示。

图片

过滤条件的结构做了一些特定的优化:一,新增功能保持在头部,避免被挤下去;二,条件关系配置直接外露,减少点击的同时也没有占用更多空间;三,条件卡片增加了。

图片

至此,需求页面的结构已经定了下来,之后就是常规意义上的视觉处理了。因为这部分比较细碎,单独来讲可能缺乏普适性,所以下面一章总结了一些常见且通用的设计点供大家参考,最后再提供页面的最终视觉效果供大家参考。

 

三、视觉效果构建

3.1 内容元素的背景色

尽量让内容和表单展示在白色卡片上。大部分基础组件样式是按白色底色的场景来做的,放在其他颜色的背景上很容易出问题,比如表单的禁用态或者标签的颜色和底色融为一体时,可读性很差,而且有一种不干净的感觉。当然这一条不绝对,如果深度定制了基础组件的样式,或是结构功能简单,背景采用其他颜色也是没问题的。

图片

3.2 阴影和描边

阴影分割是一种常见的视觉表达手法,然而B端用户的显示器普遍比较糟糕,分辨率低且色域小,太轻的阴影效果不如描边,有时甚至会让图形边缘看起来很模糊。担心显示效果的话,实际上可以看一看 macOS 窗口的阴影尺寸和透明度。B端工具设计中,功能性比美观度重要的多。

图片

3.3 易读性与复杂度

下次去宜家的时候可以观察下结账的柜员机,你会震惊地看到里面仍然显示着拟物化界面。元素的质感对现代界面设计来说可能是增加了页面复杂度,然而放到具体的操作场景中,拟物化界面可以给高速操作的收银员提供更佳的功能可见性,有益于培养肌肉记忆。所以页面易读性与复杂度之间的平衡,取决于用户在场景中的操作方式。

图片

3.4 功能颜色的数量

功能颜色让用户不阅读内容就可以初步感知数据状态,比如警告色,标识色等等。数量太多时用户会记不住映射关系,颜色就失去了功能性。一个常见的错误是标签的配色,假如一个系统里有十种标签,千万不要设计十种配色,不仅区分度低而且视觉上很混乱,尽可能先归类再配色。再举审核状态的例子,除了成功失败之外,审核流程还有各式各样的中间态,需要异化表现时,不妨尝试通过图形视觉信号区分,比如增加图标。

图片

3.5 避免摊大饼

非必要不摊饼。随着层级增多,用户对层级归属的感知逐渐变差,内容区也越来越窄,视觉效果难以把控。当然,在B端系统设计中没有什么完全不可打破规则,实在避免不了的话,可以着重突出顶层内容或动态提示用户当前聚焦的层级。比如鼠标悬停时高亮层级关系,类似编译器的代码区块高亮功能。

图片

3.6 数据与提示

  • 用真实字段内容设计:视觉设计前找产品或者研发要一份内容字段样本,有助于提高视觉保真度,同时避免开发上线后内容挤不下或大面积留白的情况。
  • 表单项默认值:表单中可以通过感知预测填充内容,或设置常用的默认配置,提高表单的填写效率,减少机械操作。
  • 提示信息:提示信息的暴露程度取决于系统功能是否常规,以及目标用户的理解能力。常用操作不提示,常用但晦涩的功能采用悬停提示,不常用且难懂的功能可以露出提示或帮助中心链接。

3.7 数据分析页最终效果

经过以上粗略的讲解,希望大家对页面控件和整体的视觉处理有了一定了解。针对高度定制化的B端页面,视觉的核心目的是提高功能可见性和操作易用性,不是单纯地去套规范。

图片

 

四、工期管理及研发对接

除了页面的设计流程,项目管理则是另一个重点,B端项目经常会倒排工期,个别战略导向型的需求更是火烧眉毛。毋庸置疑,两天工期的设计质量多半是比不上一周工期的,下面讲一讲在时间紧张时如何保障输出质量。

4.1 按需求表单规划

开始设计前,根据 PRD 整理出一个任务表单,即当期需求覆盖的功能范围。遇到紧急需求时,可以按照拆分出来的功能模块分批交付开发。B端模块的设计时间很少会完全符合预期,比如在设计时发现了一个重大优化点,从构思概念方案到各方评估影响需要占用一部分工期,而通过模块排期表可以更稳妥地评估突发事件对后续输出的影响,帮助产品评估是否投入资源做优化。

图片

4.2 先输出核心页面确认方向

先输出关键页面给产品和业务确认,一来让研发心里有底,二来控制改稿成本。返工在 B 端项目中很常见,有时候我甚至会手画草稿去找产品过方案,提前评估可行性,避免方案走了很远再被驳回。切忌等到交稿节点给产品一个突然惊喜。

4.3 组件与组件状态

B端原型通常看似只有一个页面,而算上各种面板的打开和关闭,页面操作状态,弹窗,包括定制化组件样式的说明,工作量并不小。组件状态可以留到最后再补充,但务必和研发提前协商技术方案:首先确定常规功能能否用现成组件,采用哪款组件,这一部分之后就不再出交互视觉样式了。其次和研发同事沟通非标组件的交互形式,这样他们可以先写框架最后再加样式,不会出现研发空窗。

图片

 

五、初步排错

交付设计稿或者做用户测试之前,还差一步验证的工序。过滤掉明显且粗粒度的问题,可以显著提高后续的测试效率。客观上验证可用性,主观上评估体验。

5.1 小黄鸭调试法

小黄鸭调试法是一个工程师都知道,但设计师很少听说的测试方法,本意是通过给桌上的橡皮鸭逐行解释代码来排查问题。验证阶段不妨也试试这个方法,给想象中的人物讲讲界面的使用方法和元素的设计原因,讲都讲不通的功能,想必也不会特别好用。(认识我的同事都知道我办公桌上有张青年 Gary Anderson 给一个领导样子的人解释可回收标识设计的照片。我的讲解对象就是这个领导样子的人,他已经驳回了我的很多烂方案。)

5.2 走用户流程

核对产品功能没有缺漏后,就可以检查用户流程的流程度了。几种常见的流程问题包括:不知从何下手;找不到功能入口;操作失误难以补救;系统出错原因不明。这些问题会突然地卡住用户,感受上很糟糕。我们可以找出类似的卡点,提供适当的引导。假如从设计上找不到解决方案,则需要提供可检索的帮助中心以便用户自行查阅解决。

图片

 

结语

B端产品一般会有详细的文档,或者培训操作人员。然而以B端产品的体量和非常规的交互方式,很多操作不好记忆。单纯按照原型施工,难以保障易用性。作为设计师的一个关键职责,便是将产品操作逻辑翻译成简明易懂的页面和图形,尽可能铺平体验的道路。

注1:文章示意图内容由于脱敏需要进行了处理,实际设计时请记得尽量使用真实字段内容。

注2:本文主要介绍流程处理,为避免繁琐略去了一些视觉设计点,想要了解更多可以参考上一篇文章《引起舒适!什么是好用的界面》。

 

作者:邢禹

转载请注明:学UI网》如何解析产品原型

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


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


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




设计师能力建设(1):如何更好地进行设计沟通

seo达人



设计师是项目流程中的中间环节,需要与不同角色的人员打交道,沟通必不可少。
  • 对上,要与产品经理保持沟通,清楚地知道产品当前的工作方向、目标,以及未来的工作计划,甚至要通过与产品经理沟通,侧面了解领导的期望。
  • 对下则要跟开发人员密切配合,跟进开发,推动设计落地。

与人沟通不是一项简单的工作,其中包含了很多为人处事的技巧,这方面我并不在行。但是单纯工作层面的沟通而言,我觉得并不复杂。

今天我们就来讨论下设计师应该如何做好设计沟通。主要有以下几个方面:

 

1、深入理解需求,给自己增值

2、找准关键角色,影响他人

3、主动沟通,拉近工作关系

4、基于用户场景,提高沟通准确性

5、重视设计评审,获得多方认可

 

一、深入理解需求,给自己增值

设计师是为产品服务的,打交道最多的就是产品经理,但是产生分歧最多的应该也是产品经理。根本原因就是产品经理和设计师会站在不同的维度去理解需求,产品经理主要是从需求价值、功能设计的维度定义需求,而设计师则是从用户体验角度理解需求。

现在很多的设计团队要求设计师要去理解业务场景、商业模式,要站在产品的角度思考需求,就是保证设计师能与产品经理在一个频道上沟通,这样才能产出有价值的设计方案。才能让产品经理认可你的能力,让他觉得你的设计方案确实更加合理、有效,甚至对你产生依赖性,最终赢得话语权。

当然这非常难,毕竟离了谁,地球都照样转。但是一旦形成了这样的工作方法,你会发现设计工作会更加容易推进,沟通交流也会更加顺畅。

 

二、找准关键角色,影响他人

设计师想要做成事,需要自下而上地影响别人。

有些时候,产品经理的需求并不清晰准确。必要时,设计师要拉上更高一级的角色与产品经理一起沟通,例如产品总监,将需求进一步确定下来。

总监这类角色比较重要,平时设计师很难有机会直接给领导汇报,跟产品总监或者设计总监沟通汇报的机会更多。一方面他们的意见比较受领导重视,另一方面他们也比较清楚领导的想法。产品总监会决定是否需要跟领导进一步沟通,或者由他们直接跟领导汇报。

所以跟总监汇报,要能够将设计方案的精髓有效地传递给他们,让他们充分了解并信服设计方案。

当然如果有机会,设计师还是要争取直接给领导汇报,毕竟自己产出的方案只有自己最熟悉,并且通过汇报也可以面对面了解领导的真实想法。

 

三、主动沟通,拉近工作关系

1、日常工作沟通

在我们的工作中,会遇到各种类型的产品经理。有强势的、有自以为是的等等,但是所谓“伸手不打笑脸人”,大家都是为了产品更好地发展在积极合作,当你主动的、真诚地站在产品角度去请教业务或者需求时,大多人还是很配合。

讲一下我的个人经历。

随着产品线的扩张,部门的产品经理越来越多,有些没有太多的交集,最开始对设计师缺少足够信任,个别产品经理会绕过交互设计师,直接找视觉完成方案后,推动开发上线。有的只是找交互设计师做下原型评审,并不传达需求内容,效果非常有限,导致设计师工作比较被动。

这一方面需要在流程制度上去约束产品经理,另一方面设计师也要与产品经理多沟通,提前知道产品规划、介入需求。或者对没有参与的需求进行体验走查,带着问题去找产品,并提出改进方案,让产品经理意识到设计师对产品的价值,逐步扭转不利的局面。

刚好最近在搞下季度的产品规划,产品经理搞得热火朝天,但是都没有主动将信息同步给设计师。

作为产品需求的下游,这种情况似乎也无可厚非。不过如果等着所有的需求都确定了,工作铺天盖地压过来,设计师也承受不了大量的设计任务。

在我看来,提前了解需求信息,可以更好地开展后续设计工作。所以就主动出击,找产品经理聊聊工作,于是有了以下对话。

设计师:“大佬,最近忙什么呢?后面的产品有什么安排吗?” 

产品经理:“需求还在整理中”  

我:“好的,有什么材料可以先发给我看看吗?” 

 产品经理:“还在改方案,新的方案被领导否了“

…..(中间就闲扯了几句,就此略过)

我:”好的,后面有需求可以提前跟我们沟通,我们设计侧保证积极配合”。

产品经理:“好的,那我先把之前的方案发你看看吧”

当你主动地想要了解产品需求时,很多产品经理还是比较欢迎的。

而当产品经理不知道该做什么或者怎么做时,设计师可以通过自己的专业能力,例如竞品分析、数据分析等,介入到需求分析中,帮助产品经理梳理需求,或者推进产品体验升级。这时候你的设计建议,产品也更容易接纳。

 

2、设计目标沟通

对于成熟的设计团队,设计师一般都有明确的分工协作,职责也比较清晰。单打独斗的设计师,相对比较惨。容易陷入被动接受工作的局面,今天做个A产品页面,明天改个B产品PPT,后天做C产品的页面,谁都能提需求。天天看似很忙,结果工作上不成体系,工作绩效都不知道该怎么写。

所以设计师要做好自我工作的管理,建议设计师可以主动向产品团队靠拢。除了日常的项目工作,还要能够找到一些体现自我价值的工作,可以更好地展现自驱能力。例如开展竞品分析报告、系统走查、设计规范、组件库建设沉淀等等。

这些偏向产品顶层规划与设计工作,要及时与产品负责人进行沟通,保证工作的方向和目标与产品整体发展保持一致,并且最好能够纳入到产品规划中,方便后续工作的开展。

 

3、抓住问题本质、带着方案沟通

设计是具象工作,看到设计方案才能做出评判。在工作沟通时,除了提出问题,还要尽量带着方案解决问题。尤其是与领导沟通,不要直接问领导该怎做,而是应该告诉领导我的方案是什么,请领导决策。

例如领导对现在版本不满意,要改版。我们该怎么做呢?

我认为,首先要弄清楚领导对哪些方面不满意,例如风格、颜色,还是框架布局。因为双方对改版的认知可能不一致。搞清楚问题之后,才能更好地开展具体工作。另一方面如果不好与领导直接沟通,还可以与总监,产品经理沟通讨论,他们跟领导接触更多,得到的信息也更多,可以侧面了解领导的期望。

试图搞清楚领导喜欢什么风格,再着手进行设计,这种方法可能很难奏效。因为领导的喜好会发生变化,可能不经意看到的页面就让他产生了改版的想法。又或者他今天喜欢这种风格,明天喜欢另一种风格,这样会让设计很难适从。

设计师还是需要通过主动调研分析,完成多个方案后,让领导做出选择,这样可以更深刻地影响领导的思维。

 

四、基于用户场景,提高沟通准确性

例如最近有个产品需求,最开始是产品经理跟我单线沟通的,感觉需求比较简单,确实没有仔细地了解用户场景,就在产品原型基础上修改了一版交互方案。后来产品经理找到我说,业务需求方对方案还有些异议。于是进行了第二轮沟通,这次邀请了产品经理、业务方、还有开发同事参会。

刚开始讨论的是第一轮的交互方案,发现产品经理转述业务方需求时,对信息理解有误,于是重新讨论用户场景和需求。在会上快速完成了一版框图原型,但是紧接着业务需求方又考虑到了一个新的场景,发现框图方案仍然无法满足要求,于是方案又被推翻了。

最后的会议由于时间关系,只是讨论清楚了用户场景,产品经理还要再梳理一下才能转化为产品需求,后续还要再拉会讨论。

一个产品需求涉及到各种岗位角色,单方面沟通容易出现信息偏差,或者信息传递不到位。在关键的节点,例如需求讨论、设计评审,应当召集所有相关人员,尽量避免单线沟通。

同时要基于用户场景沟通,不能含糊其词,可以通过5WH方法刨根问底,真正地理解需求,否则就可能出现设计返工。

 

五、重视设计评审,获得多方认可

设计评审是非常重要的沟通方式,一般分为两种,内部评审和外部评审。

 

1、内部评审

内部评审指的是设计团队内部的评审,主要作用是方案查缺补漏和正式评审预演。

设计师在评审过程中需要讲清楚产品需求是什么,业务流程、竞品分析、用户分析,设计思考、以及设计方案等等。当然由于现在都是敏捷开发,一些需求都是比较小的迭代,所以前期的分析可以简单讲解下,重点是要讲清楚需求和设计方案,让其他设计师了解需求背景和内容,并对设计方案提出改进意见。

 

2、外部评审

外部评审更多的是确认设计方案,而不是讨论设计方案。同时可以拉通各方面信息,并将最后的评审结果传递给需求的相关责任人,作为后续工作的依据。

为了评审效率,在正式评审前,设计师可以拉上业务方、产品经理做小范围的方案评审,让需求最直接的相关人员,确认方案是否正确,并达成一致。保证正式外审方案受到质疑时,获得他们的支持,或者由他们出面解释一些业务问题,更容易让其他人员接受。

正式的外部评审可能会包括一些业务方的领导、产品总监、设计总监、开发、测试等人员。设计师需要重点讲解从用户体验角度对需求的拆解和分析,以及完整的设计方案。当发生意见分歧时,可以通过竞品分析、数据分析等辅助论证方案。

设计外审时,设计师要面对各个团队的挑战,但是也是展示个人能力的好机会。毕竟平时不会有各个岗位的领导、同事,能够坐下来听你讲方案。

如果不重视设计评审,完成了设计方案,往群里一丢或者发个邮件就万事大吉了。其实是失去了一次表现自己的机会。同时也无法将足够的设计信息有效地传递给上下游,缺少了确认的过程,后面容易造成各方面的信息混乱、扯皮。

 

总结

立足于做事本身,你会发现工作中的沟通相对要简单很多。上面说了那么多,可以归纳为以下3点:

1、用心沟通

2、主动沟通

3、及时沟通

 

作者:子牧先生

转载请注明:学UI网》设计师能力建设(1):如何更好地进行设计沟通

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


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


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



信息无障碍研究与应用

纯纯

信息无障碍,是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息和利用信息。随着互联网覆盖越来越广,对于身体有局限的群体而言,更加迫切通过互联网获取信息,而这就需要互联网产品进行信息无障碍的优化。在我国其受益人群至少包括:8500多万残障人士,2亿多60岁以上的老年人,数量庞大。率先考虑信息无障碍能为产品增加优势而带来更多用户。


如今智能手机掀起了一场无障碍辅助工具的革命,而站在这个关键点的互联网设计师,也要开始行动起来,先从以下这几个容易实现的事情开始着手进行无障碍的优化吧。




关于读屏


对视障用户来说,是用听取读屏语音来了解你设计的界面信息的。读屏软件就像他们了解互联网世界的眼睛,它的原理是直接读出界面里的文字,如果icon按钮未加无障碍标签读屏会读为"无法发音",那么视障者就无法获取这些信息,自然也就无法使用你设计的功能。


解决的办法是:


1.需要在产品代码中添加无障碍标签(Android :contentDescription ; iOS:accessibilityLabel在对应的开发者文档里很容易找到,可以发给你合作的研发同学)。


2.装饰性icon可隐藏标签不读,提升读屏效率。不建议不做处理也不加标签,那么用户听到的就是“无标签”,这样会让用户以为这里有什么重要信息读不到而感到不安。


3.标签语义简短准确,尽可能使用动词。


4.必要时需要走查焦点顺序,确保不会被错误的焦点顺序误导页面含义。 



并且最好由设计师进行语义的标注,因为设计师才是对页面里图形应用最了解的人。避免出现“搜索”被写成“放大镜”、或者是“searchBtn_123”之类的情况。 





关于色彩


颜色可以用来区分信息数据的类别和维度,也可以帮助传达情绪等重要信息。然而,世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰。我们通常笼统的称这类人群为“色盲”,他们是典型的识别颜色有问题的群体。


"色彩"的目标是"易于感知",指的是互联网产品的内容信息的色彩对任何人来说,都应该拥有足够高的辨识度和舒适度,我从以下4个方向进行介绍。 

 

1.更安全的配色


a.色盲人群:


设计师在进行设计配色时应时刻自测,避免明度相似的橙黄绿两两配色和明度相似的红绿配色,因为这样的配色势必会造成色盲用户的可读性问题。并且,红色在红绿色盲眼中并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深,而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色的强调字,从而遗漏关键信息(设计时,可利用此插件模拟色盲眼中的颜色:Color Oracle) 。




b.文化差异:


因为色彩在不同国家文化中代表不同含义,所以对于国际用户来说也是存在障碍的。在西方文化里,红色通常用于表示消极趋势,而绿色则表示积极趋势,但在东方文化中却正相反。


c.特殊群体:


临床医学研究表明对于部分自闭症患者来说,高饱和高对比度的颜色,甚至只是黄色都会让他们感到不舒服和不安,因此在自闭症康复中心是不会出现过于对比刺激的颜色的。


另外,老年群体随着年龄的增长,晶状体变黄变浑浊,会选择性的吸收蓝光,从而导致老年人对蓝色的鉴别能力下降明显,如果你的主流用户是老年人,请尽量避免将蓝色运用到重要的按键中去。



2.更强的文本对比度


文本对比度与可读性息息相关,它测量的文本颜色和背景色之间的明度差。WCAG AA对于文本对比度的规范是:4.5:1,若字号够大(>18pt,或粗体>14pt)时,标准可降到3:1。如果满足4.5:1这个标准会让你的页面视觉看起来不那么优雅,可以尝试局部加强可视性的方法:



关于可读性其他需要注意的点:尽量不要在图片上叠加文字,除非你能保证图片背景颜色单一且对比度足够高。



Material Design设计规范建议,需要淡淡的遮罩确保上层文字的可读性;并且不建议极高对比度的文本,因为这样会使一部分视障者看到的字旋转模糊。


 

3.更多样的视觉变量 


颜色是数据可视化中最常用的视觉变量之一。但是对于无法辨别颜色的用户,如果颜色作为的唯一的提示信息,他们可能将无法理解你传达的信息。那么有什么改善的方法呢?


a. 不让颜色成为唯一的视觉变量:除颜色外,我们可以追加图标、纹理或者文字来加以标注。



b.色盲模式:Trello作为一款工具产品,在标注信息时,提供色盲模式可打开和关闭,并用不同纹理加以区别,色盲友好模式是一个很好的范例,它可以有效帮助色盲,又不会妨碍非色盲用户。


c.以明度饱和度为度量:虽然色盲人士对色相的辨识能力较弱,但却对明度、饱和度非常敏感。我们可以使用明度或饱和度区分信息。看这个例子:传统热力图习惯用暖色代表热力高冷色代表热力低,Google Analaytics的热力图采用深蓝色显示热度高的时段、浅蓝色显示热度低的时段,简单有效。




关于控件


控件可以是按钮、链接、输入框或任何带有事件监听器的HTML元素。控件太小或彼此太靠近可能会给用户带来糟糕的体验问题。


比如对于无法用指尖精确定位的用户(有颤抖疾病的用户),或因年龄而导致灵活性降低的老年用户,都会难以点击过小控件。


为了给用户足够的间距来准确选择控件,Material Design建议至少48×48dp,iOS设计系统将目标热区尺寸最小值定为44 x 44pt,而WCAG对WEB的规范则建议至少44×44px。一个控件可以在视觉上是24 x 24px,但是在所有边上都会有一个额外的填充使它达到44×44px。并且太靠近的控件可能会因误点击而带来挫败感,所以同时还建议控件之间的空间足够远以减少误触。Microsoft给pc的建议是至少有8px的间距,而Material Design推荐的控件至少间隔8dp。我们可根据以上规范来审视自己设计的控件。




关于文字


1.文字大小:


有视觉障碍的用户可能会把字号调得很大。你需要保证你的设计在大字号的情况下内容不会溢出或排版错乱。做设计的时候,可以使用2倍以上的字体测试你的设计。


在互联网早期,设计了字号在9-14px之间的网页,如今已与20年前不同,浏览器已经可以在任何尺寸设备上使用,小到智能手表大到4K荧幕,我们不能再使用固定的字号来设计产品了。字号应该与设计本身一样具有响应性。例如可以允许用户自定义字号、行高或字间距等以达到舒适的阅读水平。


 

2.文字样式:


文字作为传达信息的重要载体,对于许多用户来说,装饰字体或草书字体都是比较难阅读的。且用过细的、过小的、斜体和全大写文本,也会降低识别度。




关于动效


有效的动画可以给页面带来生命感,但如果滥用动效不仅会分散用户注意力,严重的话对某些用户来说来说可能是致命的(光敏性癫痫的临床诱因之一就是闪光图像的刺激)。


1997年的一天,日本电视台正在播放《精灵宝可梦》第38集“电脑战士3D龙”,但就在这天晚上发生了600多名儿童昏倒在家中集体送医事件,轰动了动画界,任天堂的股价也随之大跌。原来,为了达到震撼效果,3D龙的背景运用了“蓝-红-蓝”的快速闪烁来表现爆炸,这样高频率的闪烁刺激了孩子们脆弱的眼睛,导致他们集体患上了急性光敏症。也因为这件事日本开始着手对动画片的制作制定规范。Twitter在2019年为了保护对闪烁图像敏感的人员安全,也采取了禁用APNG动图格式的措施。


另外WCAG 2.3.3官方说明,一些用户会因滚动页面的动效(例如缓动和视差滚动)而触发大脑前庭疾病从而产生头晕的症状,所以iOS、Mac、Windows 10都具有关闭动效的功能。


为了避免给特殊人群造成困扰,设计师在开始做动效之前,应该看看以下四条是否满足:


1.动效每秒闪动不超过3次,发生的闪光区域不超过超过25%否则,光敏癫痫患者会有发病的风险。


2.避免过于夸张的视差和运动效果,因为大脑前庭失调者会引发眩晕。


3.避免有多个元素通过不断移动、闪烁而分散注意力,因为这可能会让注意力缺陷者产生困扰 。


4.如果有上述情况,需提供一些控件或选项来暂停、隐藏或者更改任何动画或效果的频率。


结语


作为体验设计师,研究无障碍会让我们收获良多。当然,目前所做的改进并非一劳永逸,而是我们与更广范围的用户保持持续对话的开端。不断改进产品的无障碍体验,让产品更友善,让美妙的互联网的世界变得更平等,我们希望能不断向这一目标前进。




作者:百度MEUX    来源:站酷

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

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

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


想要为元宇宙做设计,这些可以帮到你

纯纯

人类与其他物种最显著的不同点之一是人类拥有与他人沟通和交流的能力。在整个人类社会的发展史中,沟通和交流行为需要双方处在同一个物理空间中。但进入21世纪,虚拟空间的出现让我们社交方式正在发生翻天覆地的变化,它已经成为我们每天生活的一部分,对设计师而言,虚拟空间设计仍是一个全新的、亟待探索的领域,我们有很多事可以做。

你或许听说过元宇宙这一新兴概念,它是一个增强的、或者说是一个完全虚拟的空间,我们需要使用VR头戴设备和数字形象才能进入。在这个有社交距离的时代,元宇宙可以让我们感受到更加紧密的社交关系:不论我们相隔多远,我们都可以看到和感受到对方。包括META(前身为Facebook)在内的很多商业巨头正在入局元宇宙,在他们洞察到的的商业机会上投资数十亿美金,这些投资在未来将为大量的元宇宙设计创造机会。

考虑到这一点,这篇文章主要描述关于元宇宙设计的一切:包括元宇宙的概念、设计元宇宙的技术,以及设计元宇宙的工具。

一、什么是元宇宙?

元宇宙一词首次出现在Neal Stephenson于1992创作的科幻小说《雪崩》中,讲述了主人公在被称为“元宇宙”的虚拟空间和现实空间中来回穿梭旅行。斯皮尔伯格的电影《头号玩家》也描绘了一个在不久的将来会出现的类似元宇宙的概念,在电影中,主角生活在类似于虚拟现实中,与其他玩家一起在元宇宙世界中探索。



《头号玩家》

虽然最初元宇宙可能起源于科幻小说,但它无法被单一的定义,它更像是创建一个沉浸式虚拟空间的想法,人们可以在其中自然地互动。你可以想象一个充满数字形象的 3D 世界,它能提供全方位的数字体验。

事实上,元宇宙并不是一个新兴的概念,早在2000年,一款名为“第二人生”的平台就已经拥有了许多在我们今天看来与元宇宙有关的功能。作为一个用户,你可以在“第二世界”中完成与现实世界中相同的事情,但它与现在我们所说的元宇宙有一个关键区别——“第二人生”并不是一个必须要借助VR/AR设备体验的互动世界,最主要的原因是当时的 AR/VR 设备还无法创造沉浸式的交互体验。

从2022年开始,我们逐渐意识到,AR和VR才是组成元宇宙的关键元素,因为它们可以创造更加真实的虚拟体验(并且我们已经拥有可以使其实现的技术)。只要用户戴上头戴装置,他们就能立刻进入一个完全不同的世界。尽管用户周围的所有物体都是虚拟的,但它们对用户来说是真实自然的。

下面是一些日常交互行为如何在元宇宙中应用的示例:

工作

办公室这个场景其实可以自然的进化成元宇宙,因为现在流行的混合办公模式(一部分员工在实体办公室办公,一部分员工远程办公)非常适合在元宇宙中实现。无论人们住在哪里,他们都可以作为一个团队一起工作,因为元宇宙给了他们一种共享物理空间的感觉。Oculus 的 Horizon WorkRoom就是一个很好的例子。

培训课程

元宇宙可以成为学习的绝佳场所,它可以让学生与老师或教练在元宇宙中进行实时互动,就像在现实中上课一样真实自然,你甚至可以认为他们是同处于一个空间中的。

游戏

元宇宙很可能会首先在游戏行业中脱颖而出,自然而然地继承许多游戏设计的许多属性。比如元宇宙里的内容可能会由用户生成,并且元宇宙鼓励用户长期参与。


二、设计师如何为元宇宙进行设计?


从设计师的视角来看,元宇宙是拥有许多可交互的服务的巨大平台,用户可以在其中完全自主的选择他们想要的服务。进入元宇宙需要用户创建数字形象,它不仅仅是用户名和图片,更像是用户真实形象的数字孪生,用来与虚拟世界中的任何对象进行交互。就像真人一样,数字形象有一个身份来帮助用户进行访问。



Oculus Quest来创建属于你自己的形象

元宇宙有很大概率成为Web3.0的关键元素,这是基于区块链的新一代更加民主化的互联网版本。产品设计师将专注于创建 3D 空间,这些空间可以是现有物理场所(即家庭、办公室、俱乐部),也可以是一个全新的世界(空间站、卡通世界等),但无论是什么样的虚拟空间,它都应该让用户感到舒适。



虚拟办公空间. 图片取自Meta.

为元宇宙设计意味着设计一个完全沉浸的世界,设计师需要更全面更综合的能力。

下面列举了设计师在设计元宇宙时需要特别关注的几个领域:

1.可用性 

可用性是优秀设计的基本属性,创造一个易用的元宇宙体验是非常巨大的挑战,因为许多关键的设计因素都会对用户产生消极影响,比如晕动病(motion sickness):用户长期佩戴 VR设备所带来的头晕、恶心等症状,设计师在设计元宇宙的体验时就应该想到这一点,并想办法进行优化。

元宇宙设计目前仍旧处于早期阶段,这提供了从一开始就构建易用性体验的绝佳机会。设计师不应该只是在已有的经验基础上进行适配,而应该找到新的、更舒适的方法来帮助用户长时间停留在虚拟空间中。



技术造成的晕动病。图片来自Harmony.

2.元宇宙中的内容 

互联网时代的用户习惯浏览网站和应用程序来获取内容,那么元宇宙中,用户会期待什么样的内容呢?答案很有趣:和现在他们每天正在获取的内容一样就可以了。在元宇宙世界中,用户会选择他们熟悉的内容进行互动,比如文章、视频、音乐、电影等等。但他们消费这些内容的方式可能不同,比如元宇宙中用户无需购买大屏幕电视即可观看电影,他们可以依靠他们的头戴设备。

从设计的视角来看,在元宇宙中内容以最适合的形式展示给用户这一点尤为重要,但目前还没有简单且正确方法可以实现这一目标,因此设计师必须尝试各种内容形式,才能找到适合在元宇宙展示内容的形式。

3.数字商品 

元宇宙是一个拥有数字商品的数字世界。数字商品有它的局限性,你不能把它们带到物理世界中去,但它们也拥有巨大的优势——你在元宇宙中购买的数字商品可以以不同的方式在不同的环境中使用。例如,你可以购买一顶棒球帽,在你最喜欢的游戏和办公室中佩戴它,使其成为你个人风格的重要组成部分。当然,这个功能目前只是一个构想,需要那些在元宇宙运营的公司愿意支持数字商品在不同场景下的切换时才有可能实现。

4.去中心化的支付系统 

去中心化支付是元宇宙体验的重要一环。在虚拟空间中用加密货币支付数字商品比用真钱支付要方便得多。加密货币可以在用户加入的所有不同虚拟世界中发挥作用,在今天,一些虚拟世界也证明了这种商业模式的可持续性。Decentraland就是一个很好的例子,它是一个 3D 虚拟世界平台,提供自己专有的货币,名为 Mana。

5.为增强现实和虚拟现实设计 

从技术角度来看,AR 和 VR 设备的质量在未来一定会大幅提升,它们是用户进入元宇宙的硬件基础。在过去,AR技术被认为是迈向虚拟世界的第一步,但随着技术不断进步,我们逐渐发现虚拟世界的真正力量将通过 VR 展现。可以预见的是 VR 技术在未来会更加吸引用户,因为它可以创造一种逼真的感觉,一种让用户沉浸在交互中的体验。

以下几个方面值得在设计时重点关注:

环境理解

理解物理环境中的用户。景深和透视是物理环境的两大特征,因此,VR 设备中的传感器将能够映射用户周围的世界,以便设计师可以在创造沉浸虚拟世界的同时保证用户的安全。

真实的面部表情设计

众所周知,人类之间的互动很多都是不依赖语言的,面部表情可以帮助人们传达感受,因此,数字形象要像真实的人与人交互一样传达人类情感。

VR手势设计标准化(头部、手部和身体移动)

设计标准化将会制定一些通用交互模型,这样当设计师为元宇宙制作产品时,用户将更轻松地学习如何使用它。

声音交互

以声音为基础的交互很可能成为虚拟世界中的一个重要组成部分。对用户来说,在私密环境中用语音进行交互要比在公开场合更加舒适。

6.隐私保护 

在元宇宙中,侵犯在线隐私的行为会让用户感到被冒犯,所以从元宇宙设计第一天开始,隐私、安全和数据保护就应该是重要的组成部分。

不仅如此,防止网络霸凌也应是元宇宙设计中不能忽视的一部分,用户应该有自由决定他们在何时想和谁在一起的权利(或一个人独处,或去公司上班),并将那些对他们产生负面影响的人从他们的社交圈中移除。产品设计师需要与数据安全专家以及行为心理学家密切合作,以创建更安全和人性化的服务。

7.更少的干扰性广告 

谈到元宇宙,或许我们脑中会想到一些基于广告曝光的商业模式,因为在元宇宙中植入广告将会是一件收入颇丰的生意,然而事实上,将广告植入虚拟世界需要谨慎、谨慎再谨慎。

想象一下,在你未来生活的元宇宙中,一些公司为了能更有针对性的为你提供服务,会跟踪你并记录下你的一举一动。这是一件让人非常恐惧的事,虽然元宇宙的创建者可能并不会这么做,但我们必须意识到这样做的风险非常高,特别对于那些把广告曝光作为商业模式重点一环的商业巨头来说(比如Meta),需要非常严肃的去思考是否可以接受过度广告植入带来的风险。


三、元宇宙设计工具

这里列举了5个设计工具,对于想要设计元宇宙的设计师来说,这些工具都应该派上用场。

1. 故事板 

故事板是来自电影行业的创作工具。它是一个图形组织板,其中包含按顺序显示的动作场景的图片,这些能让工作人员更容易理解场景的性质和演员必须传达的情感。就像拍摄电影一样,如果没有好的故事讲述,就不可能创造出身临其境的虚拟世界体验。



故事版案例。图片来自NN Group.


2. 3D建模工具 

元宇宙是一个天然的3D世界,这个世界越真实,用户越能够进入沉浸式的体验。对于想要创造元宇宙体验的设计师来说,最好能成为3D建模大师,熟练使用如Blender、Cinema 4D、Houdini等建模工具。



使用 Blender 创建房屋模型。图片来自Blender.

3. 社会学 

设计师如果只通过搭建一些高质量的3D物体(例如房子、汽车和其他人类环境属性)就想创造出一个元宇宙,那几乎是不可能的。让元宇宙看起来和现实世界一样真实的关键因素是如何能让设计的物体之间的相互协作达到和谐统一。为了设计出一个拥有健康社会的的虚拟世界,设计师应该了解现实世界是如何运作的,这就是产品创造者必须学习人类学、建筑学和城市设计的原因。

诸如用户访谈、问卷、非参与性观察研究(在不知道被观察者的情况下进行观察)等方法对于创建好的用户体验来说非常重要。

4. 交互原型 

创造真实的交互对设计师来说是首要目标。在设计互动体验时,很重要的一点是不要白费力去做重复的事情,使用一些在过往设计中验证过的经验和方法会更有效。

现在,有一些工具可以帮助我们做到这一点,其中很重要的一个工具是“交互SDK模块”(Interaction SDK),这是一个模块化组件库,元宇宙设计师可以在其产品中使用。在这个组件库中有很多元宇宙会用到的的基本框架和对象,比如基础手部控制模型、距离计算器、手势检测等等。



使用交互 SDK 创建的虚拟手部和控件。图片来自Macprotricks.

5. 情景研究 

对于设计师来说,仅仅将一个产品设计出来是远远不够的,我们还需要对设计的产品不断的进行测试,看看它是否能为用户提供出色的使用体验。情景研究是一个非常好的方法和技术,这项技术可以帮助设计师直接了解虚拟世界中发生了什么,以及哪些设计领域需要改进。通过沉浸在你所创造的体验中,你会看到它的优点和缺点。

元宇宙代表了数字技术进化历程的下一个阶段,最终元宇宙设计将融合人们的真实生活和虚拟生活。人们不仅会在元宇宙中互动,还会在元宇宙中生活。目前,我们正处于这一旅程的早期阶段,它为产品设计师提供了一个塑造互联网未来的绝佳机会。

作者:Nick Babich    来源:站酷

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

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

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




设计师应该掌握的需求分析方法

纯纯

所谓的“产品设计导向”指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点,明确产品核心价值;在产品上线之后,通过数据分析和功能反馈,发掘更多的需求,去规划下一步的”功能增删改“,将产品的设计方向引导到更正确的位置,提升用户留存率,延伸挖掘出产品更多的可能。


另一方面,从现在的设计环境而言,对所有的设计师既是机遇,又是挑战。大量的UI专用工具(Sketch、Principle、Flinto、Origami等)的出现,大大提升了产品前期的UI设计师的工作效率,所以现在“全链路思维”已经从刚出现时的“概念化思维”变成了“主流化趋势”。所以现在很多的UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析(功能设计、用户画像等)内容。


但是很多设计师的分析环节明显就是为了证明“有”而去“做”,缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品,典型用户画像里主流用户是:“男、七十岁、目标是给自己的儿子购买婚房”。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的,只是从形式上走个过场罢了。


本篇主要讲述产品设计中的一些分析方法,范围从“个人练习式设计”到“团队合作式运作”,知识点大概有:空雨伞思维、文章大概六千字左右,建议阅读时间:15分钟。适读人群:初级产品经理、交互设计师、在工作中职能范围与产品规划有关的UI设计师、想要学习产品设计的新人(文中含有大量配图用来辅助观点,因此建议PC端阅读)。



产品运作流程概览

我遇到的比较普遍的问题是:很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽然相同。所以说要从浅到深的学习产品功能设计,就必须先理清当前工作的常规流程,例如常见的产品运作流程(如下图)

上面是一个相对规范的产品开发流程,实际上你在看到上述流程图后,对照自己公司的情况,会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本,现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分,才能更好地提升沟通效率。



个人思考方法(一):空·雨·伞

上面讲到了设计师的“全链路思维”现在已经成为了一种主流的观点,将来的前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。所以现在很多的设计师开始尝试自己去DIY一个需求或者做ReDesign这样的设计,希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候,大部分人会发现自己突然变得没有思路,从产品方向点确定到产品视觉产出之间出现了断层。

其实做过设计练习的人都知道,由于一些现实场景的不同,一些人在做设计练习的过程中会受到很多条件的局限,尤其是在孤立无援的情况下,你面对自己的练习作品往往会无从下手。当然,不同的场景下有不同的分析方法。

在团队协作的时候,分析方法要全面、严谨、反复推敲。

在个人练习的时候,分析方法要高效、直接、简化不必要的流程,以培养自己的分析能力为主,在这种场景下,空·雨·伞就是一个非常好的思考提升方法(如下图)

简单概述“空雨伞”思考方式:观察(事实) → 思考(内在) → 产出(解决方案)

运用在设计上就是:发现痛点 → 思考原因 → 提出解决方案。“空·雨·伞”因为简单、成本低、易上手,可以作为设计入门培养思考能力的一种方法,但是在使用空·雨·伞的分析方法时需要结合一定的具体调研(或者轻量级的用户研究)相配合,不然又会变成一味的“拍脑门儿”式的主观臆测,对于分析能力提升没有丝毫帮助。



个人思考方法(二):逻辑树

逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是“逻辑树”。逻辑树是将问题的所有子问题分层罗列,从最高层开始,并逐步向下扩展。


简单来形容一下逻辑树:把一个已知问题当成树干,然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点,就给这个问题(也就是树干)加一个“树枝”,并标明这个“树枝”代表什么问题。一个大的“树枝”上还可以有小的“树枝”,如此类推,找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路,不进行重复和无关的思考。


如果你要运用逻辑树方法去分析产品,主要的一点在于学会细化拆解目标。


举个例子:

在2017年我创建了自己的个人站酷号,但在发布了一部分的文章之后,我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析,去发现自己提升的空间。

如上图,就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分,拆分出三级逻辑树是比较容易的,甚至你可以沿着已经列出来的大纲继续深入细化,再拆分出更细更深层的各种提升点。


逻辑树分析法在个人作品中的主要作用是发散思维;在实际工作中的作用则是针对特定问题进行分析,理清思路。总而言之,是让你在分析的过程中更加有条理,避免重复思考。但是逻辑树分析也有一个缺陷,就是在逻辑树分析的过程中,根据现象分裂出子层级的步骤十分依赖你的认知能力,就如同做设计一样,当你感觉界面的视觉出现出题的时候,需要利用你学出来的知识去进行视觉优化,如果你对设计理论知识掌握程度并不是很强,那就不能采用逻辑树分析法解决问题。


总而言之,逻辑树分析法适用于对问题研究十分深入的情况下,如果你对当前的环境认知并不充足,那么就很容易走入歪路,跑偏主题。



实际项目:用户调研访谈

在一些实际项目中,用户调研是需求来源的主要渠道。提起用户调研,很多人会觉得这不属于UI设计师应该做的事情。其实行业逐渐规范的现在,用户调研、分析需求的能力也成为了衡量UI设计师能力的一个标准。现在的互联网产品种类繁多,从早期只做主流行业,到现在基本所有的冷门行业都有涉及;作为设计者而言,大多数设计师已经开始在设计的过程中心有余而力不足。


造成这种现象的主要原因为是因为随着行业的细分以及范围的扩大,我们距离用户的真实场景偏离太远,导致我们在设计中很容易理所当然的赋予给用户大量无用的东西。偏离了用户所需要的主要轨道。因此对于很多的设计师来说,学会了解用户以及分析需求成为了十分重要的事情。


然后整理了一下我在用户调研过程中的几点认知:


第一,保证调研的目标的准确性

我们需要明确,我们希望通过调研达到怎样的目的?(例如:提升部分页面转化率、收集用户对于产品不满意的地方、通过用户使用产品发现用户潜在的痛点)

第二,有目标的选择用户

一般来讲互联网公司都有收集客户反馈的部门,他们掌握着所有客户的反馈意见。我们在选择调研用户的时候,最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标

第三,适当的准备调研内容

当我们确定了调研目标和调研用户之后,就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好(开始调研之后根据实际情况进行改动)

一般市场调研细分的维度通常有四种,分别是:地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例:我们在调研中可能要把调研对象分为客户(老板)和用户(业务员)去进行不同情况的信息跟踪,而且根据产品的属性不同,需要提前预设好调研内容的侧重


第四,调研过程中

在调研过程中,我们可以适当结合上文讲述到的“空雨伞”方式去进行调研观察,收集用户需求(如下图)

在调研过程中,除了思考之外更多需要注意的是对用户洞察的记录与剖析,在记录用户行为的过程中,需要遵循“不干扰”、“不引导”、“记录客观”等原则,这样可以才可以保持用户行为记录的准确性。


第五,获取反馈整理结果

在调研结束后,我们应该产出一份完整的调查报告,按照本次调研预设目标进行整理,规划出合适的大纲,把调研收获转化为明确的产出,产出形式最好以报告(PPT、PDF),而不是口述或者微信消息,这两者之间差别很大~



需求归类:KANO模型

虽然说现在很多的公司都开始建立了用户体验类的部门,但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后,往往很少会出现我们幻想中的“逆袭”、“口碑急剧上升”,有时还会因为受到一部分用户观点的带偏导致产品口碑下降,用户表示不满;又或者会出现需求级规划混乱,重要功能反而后上线这种尴尬的情况。


所以这驱使着团队中负担“用研用体”职能的角色对用户需求进行正确的分类和排序

这个时候就可以运用到卡诺模型(KANO模型)。

KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系,狩野教授将产品服务的质量特性分为五类:


1.基本型需求

用户对企业提供的产品或服务因素的基本要求。是用户认为产品“必须有”的属性或功能。当其特性不充足(不满足顾客需求)时,用户很不满意;当其特性充足(满足用户需求)时,用户也可能不会因而表现出满意。对于基本型需求,即使超过了用户的期望,但用户充其量达到满意,不会对此表现出更多的好感。

例如对于网盘类产品来说,用户的基本需求是有快速的上传和下载。如果下载速度达不到用户的期望,则用户满意度将一落千丈。对于顾客而言,这些需求是必须满足的,理所当然的。对于这类需求,企业的做法应该是注重不要在这方面失分,需要企业不断地调查和了解顾客需求,并通过合适的方法在产品中体现这些要求。


2.期望型需求

提供该功能,用户满意度提高,如果不提供该功能,用户会感觉到不满。当然在这里要补充一句,这里的需求并不都是我们整理出的主观需求,也有可能是用户在使用的过程中产生的客观类需求,例如遇到不会的体验,需求得到响应时我们给的反馈

例如对于一些O2O类的产品,虽然做的都比较成熟,但是由于体量庞大的原因,偶尔也会受到糟糕体验,用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程(旅程预计时间偏差)、美团(酒店体验差)、饿了么(用餐体验差)等。在用户遇到这种糟糕体验之后,期望能通过投诉建议获得官方的反馈,那么官方把这种问题解决的越圆满,用户的满意度也会随之提高。

3.兴奋型需求

又称魅力型需求。指不会被用户过分期望的需求。对于兴奋型需求,随着满足用户期望程度的增加,用户满意度也会急剧上升,但一旦得到满足,即使表现并不完善,用户表现出的满意状况则也是非常高的。反之,即使在期望不满足时,用户也不会因而表现出明显的不满意。


4.无差异型需求

不论提供与否,对用户体验无影响。是质量中既不好也不坏的方面,它们不会导致顾客满意或不满意。


5.反向型需求

用户没有这个需求,提供后用户满意度反而会下降。

按照kano模型分析可以对收集到的产品需求进行分类,筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。

作者:千夜Ryan_Vision    来源:站酷

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

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

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




光影和空气,是完美排版的最后一块拼图

纯纯

咱一起来聊聊排版的问题:


NO.1


如果你看过我过往的文章,也许会对我的排版多少有点印象,夸张的大字,极强的对比,还有一些微妙的层级关系;坦诚的讲,我的风格揉杂了 2 种设计体系 —— 瑞士风格 / 拟物风格


1.瑞士风格

整洁、严谨、工整、理性化、实用的特征是瑞士平面设计的精神所在;这种一丝不苟,传达准确的风格,即所谓瑞士国际主义风格。简单的说,由于 Swiss Design 这种风格简单明确,传达功能准确,因而很快得到世界范围内的普遍认可,成为战后影响最大的一种平面设计风格,也是国际最流行的风格,因此,又被称为国际主义平面设计风格;

简单的说,瑞士的这种设计风格典型的代表就是我们看到的杂志,其中有 3 个特点:讲究网格 / 非常理智的克制颜色的使用 / 层级关系;有趣的是,审美和潮流是循环的,随着时代的发展,越来越多的app开始重新挖掘出来瑞士风格并加以使用,比如我们iOS系统自带的应用们,Spotify:

年少的时候,我经常看着这些个app会不禁的问,为什么在没有一张图片的情况下还能如此好看?这些年终于明白了前人良苦用心:文字是内容,同样也是构成;是信息,同样也是装饰;简单可以理解为,不管在平面还是网页亦或者是UI界面,在没有可用的装饰下,信息本身要承担起装饰和传达的双重功能,这就是瑞士风格的核心本质


2.拟物风格

iOS是拟物的典型代表,网上对于这块的讲解已经过于饱和了,我也没必要赘述;那么这一趴,来聊聊对我产生深远影响的锤子科技吧。我第一次接触到 smartisan OS 并没有觉着多么惊艳,潜意识里只不过是觉着把 iOS 的图标画的更漂亮了一点而已…

但当我打开下图这个页面的时候,我意识到我对拟物的理解还是浅薄了,第一次被光影的层次震撼到:

通过光影塑造了一个三维空间,让整个画面丰富饱满,也打破了我幼稚的设计观,PS.不管锤子科技现在如何,我依然敬佩 Paco / 方迟 / 罗子雄的设计团队为这个行业做出的贡献,respect!

毫无保留的说,我的设计就是二者的融合,以 层次对比 作为核心理念。


NO.2

啰嗦了半天,赶紧进入正题;如果你是一名产品体验设计师,一定听说过 “奥卡姆剃刀” ,这个定律通常用在交互链路的设计上(意思就是在用户路径中没必要的步骤,省了就完事了),“如无必要,勿增实体” 即简单有效原理;


同样,在嘈杂的视觉结构里,画面也需要奥卡姆剃刀,当你在对画面的饱和上困扰不已,并急于找到一些背景和纹理填充的时候,我建议你先冷静一下…因为页面的空虚未必是需要实体化的东西来填充的;上文有说过以  “层次对比” 作为核心理念出发,要区别于平面设计,营造一个立体空间,所以先理一下画面结构: 

通常来讲,如果想要不平,把二维空间转化成三维空间是必要的一步,需要在Z轴上下功夫;如果你恰巧也是一名摄影爱好者,可以想象下照相机的焦距和景深,工作原理是相同的,需要 前景 / 主体和背景 三个层次;当然,虚实的对比对信息的呈现和层次的拉开是极其重要的,这里需要通过景深来控制效果,你可以通过 photoshop 滤镜-模糊画廊的“场景模糊”来做到:

另外,空间的感觉想要被突显,那么“光影和空气”的价值就可以无限放大了,按照如上所说的结构,把内容和自然物质摆进去就好了,甚至可以做到举一反三(比如不同颜色的氛围,我就不展开了):

整个case下来,你会发现用光来聚焦在信息上,自然而然就形成了我们说所得 “信息优先级”;有点时候空气和光影的饱满程度超乎你的想象,这种自然存在的物质可以很好的帮助画面分层,以达到填充的效果,并不是一定要依赖于实体化的装饰。


对了,如果你跟我一样闲着没事干的话,借用 keynote 的动画效果做一个吊炸天的动效,一定可以成为汇报场上最靓的崽( 注意:视频有音乐)! 

NO.3

本来不打算再开一个章节说这个,但还是觉着很有必要再说下(我好纠结),作为PPT来讲,ta的主要用途分为两种:其一是给人看的,其二是给人讲的;不管是哪种,尽可能的简化文字,是对输入者关爱;

以上图为例(实名diss自己的作品),坦诚的讲左边的部分大多数观者是不会有心思来看的,按照视觉系统的处理,这部分就会被当成一个“面”而被忽略掉,这种情况下右边显得有力很多,也能帮助观者聚焦信息,所以还是那句话,能不写的就别写,能少些的别多写,保持信息的密度也是设计师必要的职责之一。

作者:负能量的补给站    来源:站酷

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

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

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




视觉层面的三维解析

纯纯

界面设计是一个很庞大的体系,具有很多原则,比如轻量、容错、清晰等等,其中包含了交互层面以及视觉层面等,今天我想单独把视觉剥离出来,来讲一讲我对界面设计“视觉层面”的理解与认知。


在我看来,界面设计的视觉层面主要可以分为三个维度来解析:信息传递、视觉美化、创意创新。


信息传递是让用户看的明白,快速清晰的获取信息;

视觉美化是让用户看的舒服,让界面足够美观;

创新创意是让用户看的惊喜,看到一些不一样的创意点。


如下图:



三个维度的目标如何实现呢?我提取了以下三个关键词:



清晰、和谐、独特是我们要达成的目标,达成目标一定会有一些原理所在,而有了原理就会有具体的执行方法,所以后面的每一个知识点,我都会按照“设计目标-执行原理-执行方法”的逻辑给大家讲解,大纲如下:


1 清晰 

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大


2 和谐

2.1 和谐-呼应-颜色呼应

2.2 和谐-节奏-变化对比

2.3 和谐-饱满-负形缩减


3 独特

3.1 独特-品牌延展-IP形象结合

3.2 独特-事物本意-事物图形化



1.清晰 

1.1清晰-降噪-容器整合  

设计目标:清晰

执行原理:信息降噪

执行方法:容器整合



当界面信息过于分散时,会对用户造成不必要的干扰,导致用户产生疑惑甚至直接离开界面。


作为设计师,要做的就是对信息进行整合,我们可以称之为信息减噪,目的就是让页面更加清晰,减少干扰。


这里我经常使用“容器整合法”来让内容更加清晰、聚焦。


当分散的内容装进一个“容器后”,就可以使内容聚焦在容器当中,让信息更加规整。而卡片就是一个很好的“容器”。


实际案例:

在改版腾讯动漫个人中心的时候,头部就存在信息分散不聚焦的问题,四个视觉触点(绿色圈处)分散在四个角落,形成极大干扰。



这里我就采用了”卡片容器“的方法,将信息装进容器中,减少分散信息的干扰,使界面更加清晰、工整,效果如下:


 

现在很多产品都在使用卡片化的布局,尤其是在信息数量、层级较多的时候,更加需要有容器将其规整起来,这样才会让界面保持不乱!



1.2 清晰-聚焦-局部放大  

设计目标:清晰

执行原理:聚焦

执行方法:局部放大




我们在平时做需求的时候,经常会遇到信息特别多,特别乱的时候,如果此时我们选择什么都想突出,最后的结果一定适得其反,什么都突出部不了,这时候就需要我们选择一些内容来进行局部放大,反而可以让整体信息更加聚焦、清晰。


这种方法经常用在有数字展示的页面当中,比如下面这种页面:



再比如,下面这个模块信息,如果”3“没有放大,整体的信息会乱到你眼花缭乱,我们看下对比:



所以,大家在遇到有数字,且信息杂乱的时候,就可以采用局部放大的方式来使整体更加聚焦、清晰。



2.和谐  

2.1 和谐-呼应-颜色呼应 

设计目标:和谐

执行原理:呼应

执行方法:以颜色呼应为例


 

很多时候我们会觉得自己做的东西很不和谐,其中一个很重要的原因就是因为页面中没有贯穿的元素,也就是没有呼应,很常用的一个呼应的方法就是颜色呼应。


例如这个画面总看起来不够和谐,你会觉得绿色很突兀,就是因为颜色上没有呼应:



而一旦你想办法,让绿色“事出有因”,比如取自眼镜的颜色:



那么,突兀的问题解决了,和谐的目标也就实现了。

而刚才那个人中心的界面:



我们会发现,图标的颜色也是取自背景色,所以整体看起来才会如此和谐。


除了颜色呼应,还有很多呼应的方式,比如图形、图标风格等等,这里就不再举例了。



2.2 和谐-节奏感-对比变化 

设计目标:和谐

执行原理:节奏感

执行方法:对比变化



对于音乐,节奏感是非常重要的,如果一段音乐一直是一个频率,那可能也算不上音乐了。


界面也是一样的,节奏感是让页面变得“和谐”很重要的因素之一,如何做到呢?


我们在展示文字列表的时候,你觉得下面两种哪个更舒服些呢?



我猜你会觉得第二个舒服一些,因为它有变化,有节奏感,所以它和谐、舒适。


我们会发现很多产品首页带有封面图的列表都有很多种排法,例如1带多,1x2,2x2,2x3等等:



就是为了防止每个模块过于重复,如果每个模块都是每排两张封面,一直下来:



看起来会非常乏味。


2.3  和谐-饱满-负形缩减 

设计目标:和谐

执行原理:饱满

执行方法:负形缩减



在做图标或者字体的时候,经常要讲一个原则就是“饱满”,界面上每个“不能拆分的元素”都需要尽量做到饱满,比如图标,再比如下面这个信息组件:



正文就属于不能拆分的单一原子,大家可能会问,这种信息不就是方方正正的一个信息块吗,怎么会不饱满呢,比如行间距过大:



再比如,我在优化腾讯动漫信息流的时候,发现正文出现的表情远远大于文字,如下图:



表情一旦出现,就会造成大量空隙(负形过大),导致整体不够饱满、和谐。

我们可以看下其他产品,表情和文字几乎都是一样的大小,他们都会尽量缩小负形空间(也就是空隙小大):



在这样的原则之下,优化后的效果如下:



以上是关于和谐的几点方法。


3.独特 

如果你的界面做到了清晰、和谐,在视觉层面就已经算是及格了,如果还能加上一点小创意,就可以让人眼前一亮。

如何能够做到独特?可以从两方面出发,1是品牌,2是内容本身含义。


3.1独特-品牌延展-吉祥物结合  

设计目标:独特

执行原理:品牌延展

执行方法:IP形象结合



从品牌出发,可以有很多方向,比如logo,图形,品牌吉祥物等,下面以品牌吉祥物为例:

在做小说阅读器的时候,有一个设置选项是选择文字的背景颜色,选择控件是圆形,而品牌形象也偏圆形,此时就可以将圆形控件与形象相互结合:



但是选择控件有两种状态,为了更加生动,就让给形象正面面对你的时候作为选择状态,而转过身作为非选择状态,大概效果如下:



此创意已在腾讯动漫小说落地实现。


3.2 独特-事物本意延展-事物图形化 

设计目标:独特

执行原理:事物本意延展

执行方法:事物图形化



除了品牌,还可以根据事物本身的意思来延展图形,比如日间夜间模式的切换按钮,男女性别的切换按钮,都可以利用事物本身的含义来延展图形设计:



此创意已在腾讯动漫个人中心模块落地。


再比如,弹幕的展示方式,就可以联想到电视机,再把电视机图形化,如下图:


这里需要注意下,有时候如果图形过于普通,可以配合动效来增加独特性,但一定要注意开发成本。

作者:黑泽双炽    来源:站酷

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

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

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



灵动岛,是创新还是妥协?

博博

2022苹果秋季新品发布会,最大的亮点是iPhone 14 Pro系列一改之前「刘海」设计,首次采用了「药丸」挖孔屏。

01

什么是灵动岛(Dynamic island)

2022苹果秋季新品发布会,备受关注的新一代iPhone如期而至,此次发布会最大的亮点是iPhone 14 Pro系列一改之前「刘海」设计,首次采用了「药丸」挖孔屏。虽然「药丸」在安卓阵营中并不是什么新鲜玩意,但一向以创新著称的苹果还是玩出了不一样的花样,带来了全新的交互方式,模糊了硬件和软件的界限,通过实时变化显示重要的提醒、通知以及简单的功能操作,苹果把这一创新称之为灵动岛(Dynamic island)。



02

灵动岛能做什么 / 不能做什么

灵动岛其实可以简单的理解为基于前置摄像头区域拓展的消息通知和快捷操作的新交互方式。

来电

当有来电时,灵动岛会发生变化,并在后台打电话时显示通话时间和声音波纹。



音乐

有点类似于锁屏后的音乐功能操作,保留了基本的播放、暂停、前进、后退等功能。



Airpods

连接AirPods后,AirPods的型号外观和当前电量会一起显示。



导航

显示导航方向和距离,并且能够在适当的时候放大显示更多导航信息。



Face ID

以前Face ID认证会显示在屏幕中间,现在集成于灵动岛的扩展功能之中。



充电

当充电时,会显示充电的状态以及当前电量百分比。



当然,目前除了官方展示的这些功能以外,还会有更多的应用方式,在此不一一列举。但灵动岛也并不是万能的,例如会存在以下的局限性:

重度使用场景

从官方给出的样例来看,灵动岛更多的是承担了消息通知和提醒的作用,并不适用于重度使用和复杂交互等场景,例如消息聊天、刷短视频、买卖交易等等。

过于复杂的图形

受限于前置物理摄像头,灵动岛这个区域并不能显示过于复杂的图形,并需要避开摄像头区域,因为该区域是不能显示任何图像的。



软硬件的边界

灵动岛的实际效果并不会像宣传图中那样好,特别是在反光强烈的户外。摄像头的挖孔清晰可见的,即使是在黑色不发光的OLED屏幕上,软件和硬件的界限还是能够明显区分。



03

对于灵动岛的各方反应

新事物的出现,总会伴随着支持和反对两种声音,此次灵动岛的创新交互,自然也是褒贬不一,还需要经受时间的考验,因为即使是苹果这样的公司也难免会犯错,比如3D Touch、MacBook上的Touch bar等。

支持方认为「灵动岛是继刘海屏之后的又一个成功设计,甚至会超越刘海屏,更受欢迎」。

「灵动岛的设计非常讨巧,同时也给挖孔屏带来了更多的想象空间」。

而反对方的理由也十分充分,首先是罗永浩第一时间发表了自己的观点,表面上是硬赞这个创新,但实则是讽刺了这样多此一举的方式,「先在脸上涂屎,然后再把屎的颜色调整得跟粉底差不多」



很多的舆论认为,灵动岛的创新是苹果的一种无奈和妥协,因为自从第一代iPhone革新性的使用触摸屏之后,十多年以来手机在工业设计方面并没有太多的创新,大部分厂家是在屏幕分辨率,后盖材质,摄像头像素上面做文章,而苹果作为一个工业设计创新的公司,也只能通过后置摄像头模组的排列来维持每一代iPhone的变化。所以此次灵动岛的创新,被认为是工业设计乏力之后推动交互设计创新的无奈之举。



但无论支持还是反对,前置摄像头挖孔屏终究是一个过渡性的方案,最终会被全面屏所替代,而在这个过渡时期,很明显苹果的解决思路与国内的绝大多数厂商都不一样。

04

为什么国产手机不做灵动岛

国产手机的前置摄像头解决方案除了「刘海」以外,单摄像头「圆孔」和双摄像头「药丸」设计都已经非常成熟,但是为什么经过这么多年的迭代,依然没有创新呢?

思维方式的差异

国产手机厂商的思路跟苹果相反,希望尽可能的把前置摄像头做得越小越好,甚至头部的厂商尝试探索升降摄像头和屏下摄像头的解决方案,目的就是为了把前置摄像头隐藏。而苹果的思路则是,既然现阶段的技术没有办法把前置摄像头隐藏,那么干脆就以此为基础,把这个区域运用到极致。

缺少创新和引领者

似乎国内的用户更关心的是电量是否持久、屏幕刷新率高不高、拍照功能强不强大等问题,秉持着「人民需要什么,我们就造什么」的成功理念,各大厂商也开始在这些方面内卷,从60Hz到120Hz刷新率,从千万像素到一亿像素,从莱卡加持到一英寸大底传感器... 大家都在做从1到100的事情,而很少有关注从0到1,因为这样做的性价比的确不高。



市场的接受和认可程度

当刘海屏第一次出现的时候,很多用户都在吐槽,其中也包括很多苹果的忠实用户,宁愿买iphone8P也不愿意使用刘海屏的iPhone X。而经过一两年的审美教育以及国产手机的跟风之后,才慢慢的被更多用户所接受。因此国内的厂商很难有信心通过一己之力去改变用户习惯,并赢得市场的认可。我相信,苹果发布以后,各大厂商已经在积极的学习和模仿,新的一轮内卷即将拉开帷幕。

即便如此,国产厂商也并不是完全没有在前置摄像头的区域努力尝试过。例如魅族曾经在前置摄像头上显示当前电量,称之为「环形电量」,并尽可能的使其与状态栏的其它信息融为一体。



荣耀的通话时间胶囊和自拍胶囊,都以前置摄像头为基础做延展,可以看得出在想尽办法的规避前置摄像头所带来的不好体验。




虽然VIVO的原子通知不是围绕前置摄像头区域拓展,但从效果和想法来看,也与灵动岛的概念比较类似。



HTC曾经出过一款HTC U Ultra,当然那时候还没有全面屏的概念,所以HTC把它称之为副屏,可以显示消息通知、音乐播放操作、App快捷入口等等。



除此以外,几乎所有刘海屏的手机都有把刘海隐藏起来的功能。



05

对设计师的影响

灵动岛的出现,对 iOS 原本通知、交互、卡片、弹窗等一系列交互规范进行了解构再重做,就好比「刘海屏」首次出现的时候,需要设计师对全新交互逻辑、卡片行为、动画等重新适配。那么对于「灵动岛」我想需要考虑的是这几个方面。

新的交互方式

之所以叫灵动岛,就是因为它是「灵动」的,拥有不同的状态变化,以适应各种功能提示和操作。设计师在使用这个功能的时候,需要充分考虑其场景,恰如其分的给予提醒而不给用户带来过多的打扰。

新的容器

不同形态的容器可以装载不同的内容,相比于以往常规的通知提醒,新的容器可以展示更多的信息,甚至是简单的功能操作。在提出解决方案的时候,留给设计师更多的想象空间。

新的表达方式

灵动岛相当于一个永远在桌面上的岛屿,比任何App的优先级都要高,所以会成为各个应用的必争之地,使用一种好的表达方式,必然能够达到事半功倍的效果,因此也是考验设计师在寸土寸金的区域中,通过视觉化手段表达的能力。

最后,我想苹果的初衷是为了更好的用户体验,消除一部分用户对于挖孔屏的焦虑,如果能够真正的站在用户的角度、克制的去使用新的交互方式,会得到用户的喜爱和市场的认可。

我认为灵动岛既是一种创新也是一种妥协,对于工业设计硬件创新乏力的妥协,更是对技术发展的妥协。我也相信,真正的全面屏时代终究会到来,期待那个时候苹果再一次给我们带来真正意义上的,里程碑式的,创新!


作者:捡蘑菇的人


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 


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


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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档