首页

配色驿站-粉色灵感海报

seo达人


谁心里还没有那一抹粉红呢!

粉红色是暖色系,温暖没有攻击力,比正红稚嫩青涩,比黄橘绿更具女人味,又没有蓝紫的冷峻,是这么多颜色中最温和友好的。对小女孩来说是童真娇柔的,对少女是温婉可爱,情人之间也是一种甜蜜蜜最放松最舒适的状态。
马里兰大学的社会学家Philip Cohen调查了1974个人,男女比例均衡。结果发现,男性和女性都很偏爱蓝色,紫红色系,尤其是粉红色,女性则更偏爱。粉色的确是女性偏爱的颜色。  
 
图片  
 
粉色在中世纪是男人的专属颜色,就像高跟鞋本来是给矮个子国王穿的一样。之前认为红色是血的颜色,而粉色便是稀释的血的颜色,所以粉色在曾经是受男人喜欢的,并且认为粉色高贵。  
 

图片

图片

图片

图片

图片

图片

图片

 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》配色驿站-粉色灵感海报

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

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

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

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



轻奢格调|构建百度直播平台设计语言系统

seo达人


什么是设计语言?

设计语言是把设计作为一种“沟通的方式”,在特定的场景中进行内容与信息的传达。设计是介于科学与美学之间的一种艺术,是需要理性的去解决感性的问题。它和艺术之间的差别就在于“解决问题”。

 

设计语言有哪些?

设计语言最底层是项目设计语言,具有典型特征和主题,比如医疗项目凸显专业冷静,节日项目凸显热闹氛围。往上一层是产品设计语言,强调个性品牌,比如小视频的设计深色更沉浸,电商从结构到色彩都凸显热闹。很多产品随着发展,形成一些系列平台服务,平台设计语言确保服务“统一规范”。最顶层是生态设计语言,跨设备跨平台和硬件呈现的设计语言。

 

百度直播业务,从单一业务形成系列平台服务,囊括的不只是B端和C端用户产品,还有8大垂类蓬勃发展,以及跨业务多宿主的呈现。庞大的平台业务,特别需要建设平台设计语言。

图片

 

如何构建设计语言?

所有的设计语言,都是服务于业务顶层战略发展。制定设计策略前,需对业务所在的行业背景、品牌战略、用户群体、流行趋势有充足的认知。当返工无数次还是没方向时,说明以下前四点需要再深入明确。

图片

 

建立设计原则时(设计语言的标准),不妨尝试把品牌战略人格化,由所有人解决所有人问题的愿景,得出产品是一个解决问题的行业专家的身份,Ta传达的气质是简洁大方的仪表,亲和有力的仪态,和专业权威的素养。

图片

 

设计语言以现代轻奢风格为基调,它大简至美、配色和谐、材质考究,以独具特色的现代格调,构筑起一个充满质感又十分舒适的直播间,给用户一致、友好、有品的体验。

图片

 

设计动手前,按照风格基调具象化拆解分析必不可少,每一个元素的表达手法都要定位清晰。

 

图片

 

01 至简 光影艺术图标体系

在图标的设计中,我们基于专业亲和的品牌理念延展出2个不同的方向。方案一以直线折纸与光影为视觉元素,呈现一个用心专业的态度。方案二以曲线雕刻艺术展现专业亲和的魅力。

图片

 

图标体系化,多场景验证一致性,发现方案一不够极致,造型复杂;方案二具备良好的一致性,但破坏了物体固有的结构,影响识别度。

图片

 

在一致性的前提下,尝试简化、提高识别度。巧妙的将光影和结构交汇,极简到2个图层呈现主体;语义清晰识别度高;角度渐变光影带来舒适亲和感,15°x角度的精准把控传达专业的品牌特性。因此总结出图标绘制要遵循的法则为识别性、品牌性、愉悦性、一致性。

图片

图片

图片

图片

图片

 

 

02 和谐 家族感的色彩体系 

 

a)标准色

初期直播品牌色继承百度App品牌色,随着业务逐渐中台化,需要专属直播色。运用色彩心理学传递给人不同的情绪及心理感受,寻找直播的专属色相,而活力、温暖的红色色调,更能体现亲和有力的产品气质。

图片

红色也有冷暖之分,此时提高色相、饱和度的颗粒度,H色相以350°为起点,以2°递增或递减,S饱和度以5°为阶梯,生成更多色阶(保持相同B明度100),在多界面和真机验证,得出直播专属红(H350 S80 B100),冷暖适中符合平台属性。

 

图片

图片

 

b)协调的辅助色
同时,运用色环建立辅助色彩体系。H色相以350°为起点,以15°递增或递减标准,创建24色相色板(保持相同B明度100、S饱和度80);选取柔和与协调的类似色和邻近色作为家族色彩主体,调和互补色与对比色,平衡整体色调。因为不同色相的感官明度并不相同,校正每一个辅助色的HSB,达到色彩感官上一致。

图片

 

C)调色版
一般会有2种方法,一种是使用明度差获得统一性佳的调色板,优点是落地成本低,代码可直接实现;另一种则是微调饱和度和色相,获得鲜明的色板,可使用在插图绘制上。

 

图片

图片

 

03 考究 新颖独特材质

亚克力,这种具有透明质感、光学品质的材质,在设计领域最早应用在家居设计上,被互联网设计师熟知是在微软的概念视频里,随之逐渐应用到icon绘制上,亚克力1.0版本背景和主体层次没拉开,2.0版本更趋向加大不透明度和模糊值,达到清晰舒适又兼具艺术美感。

图片

 

这种量身打造的稀缺材质运用在运营玩法上,如红包雨玩法,即能凸显平台专业用心的态度,又能强化用户消费行为转化,助力变现增长。 

图片

 

用户激励体系,采用3D玉石润泽质感+动态折射光影,体现有内涵不张扬的泛知识调性,凸显用户独特身份感 
图片 

[优化输出图像]

 

写在最后

在每一个小元素的创作中,我们都时刻谨记,无论是项目的主题语言、还是产品的设计语言、甚至是生态的,终点都是传达企业文化以及价值观。从战略层重构业务的认知体系,再将品牌战略人格化,才能够在茫然期产生真正的笃定感,逐步拆解设计目标和构建符合业务气质的设计语言,达到最愉悦的体验。

 

原文地址:百度MEUX(公众号)

作者:文娱平台用户体验

转载请注明:学UI网》轻奢格调|构建百度直播平台设计语言系统

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

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

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

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


2021趋势,Behance大神都在用的弥散光感教程来了!

seo达人


弥散光感也是今年突然间兴起一种流行趋势,国内外很多设计师在项目上运用这种处理手法,下面我们先来回顾一些网上案例。
图片

上面这种是单色弥散效果,而且还带有一些噪点纹理。

图片

这种思路是通过一边往外延伸,然后慢慢消失的过程。

图片
这种是弥散渐变上面叠加点阵纹理,效果细节也很丰富。
图片
多色混色弥散光感,细节非常丰富,不过对色彩把控要求高,稍不留神就会显脏。
图片
杂志卡片应用弥散光感,起到点缀作用,还能形成亮点设计。好了,下面到了案例实操部分,为大家准备了3个案例,尤其是最后一个,我个人最喜欢。

 

案例实操#1

这里快速给大家演示几种思路,基本上实操一次就会了。

第1步:先准备一个基础的版式,因为弥散光感一般都是以背景的形式出现在画面中,能起到氛围渲染作用。

图片

第2步:准备制作弥散渐变,这里以单色来举例。首先制作第一层渐变,具体参数值,大家领取源文件慢慢查看。

图片

第3步:制作第二层泛白渐变效果,目的起到综合的作用,颜色过渡自然。

图片
第4步:基本两层就OK了,最后再叠加一层噪点纹理,效果看起来会更丰富细腻。这里的噪点肌理我在sketch 里面完成的,也是非常方便简单(大家可以拿着源文件去研究下,一看就会)。
图片

 

案例实操#2

第1步:先准备一个基础的版式

图片
第2步:开始制作弥散渐变
图片

由于这里所需要的弥散效果较大一些,因此这里模糊值需要在ps里面处理,首先画一个圆形,然后使用高斯模糊;然后将其复制一层,然后添加杂色,最后两层叠加起来,就得到如下效果。

图片

 

案例实操#3

第1步:先在ps里面绘制两个基础的圆形,一个大圆和一个小圆。

图片

第2步:然后分别将大圆和小圆使用ps模糊画廊里面的移轴模糊效果,再将两者叠加起来,就得到如下效果。

图片

当然还可以叠加很多层,效果也很细腻。

图片

除了圆形,我们还可以玩出其他花样。

图片

今天分享就先到这里,大家下去可以拿着源文件 自己在玩一下 弥散光感,可以研究出不同的效果。


原文地址:功夫UX(公众号)
作者: 功夫UX
转载请注明:学UI网》2021趋势,Behance大神都在用的弥散光感教程来了!

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

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

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

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

B端设计指南 – 栅格的使用

seo达人



其实在说栅格的使用,我们就在讨论网页当中的布局方式,以及他们之间的不同点:

 

0.网页的布局方式:

布局方式,本质上就是去处理窗口宽度网页内容的关系。

图片

用户会使用浏览器打开不同尺寸的窗口宽度,而网页内容究竟应该如何去适应这些窗口尺寸?

通常会分为:固定布局、流式布局、自适应布局、响应式布局。

 

1.固定布局(Static Layout)

固定布局是一种最为简单的方式,它的设计逻辑是将页面当中的内容 “写死固定” 在屏幕上,内容不会随着本身窗口宽度进行改变,所有元素都使用 px 作为基础单位。

图片

当然在固定布局当中,窗口大小与页面内容会存在两种基本关系:窗口过大则将页面元素进行居中,窗口过小则展示横向滚动条。

图片

固定布局的好处是这种方式相对简单,只需将页面设计好即可,不会存在太多兼容性的问题(因为也压根没有考虑兼容性的相关问题)。

固定布局通常出现在 老旧的政府项目、网页的登录注册中。

图片

 

2.流式布局(Liquid Layout)

流式布局是最基础的变化布局,它的设计逻辑是将页面当中的元素设计成可以流动的 “水” ,通过在页面,设计不同的“杯子”容器来装下页面内容。

这里的“水”一般指的是 文字、图标、以及一些页面重复出现的元素。而杯子通常是我们设计的容器,它高度固定,只会变化其宽度,比如卡片、外层容器控制宽度 等等…

因为“杯子”的限制,也就导致水会根据杯子的宽度进行延展流动,进而形成流式布局。

图片

使用流式布局可以通过较低的开发成本,来实现一个页面当中多尺寸的小范围适配,如果屏幕尺寸跨度较大,则会比较困难。

而流式布局最常使用的方式就是通过栅格系统,来确定整个“杯子”的宽度,进而让“水”能够在页面当中实时滚动展示。

图片

 

这里有两个需要注意的点:

  1. 在研发层面,杯子的大小是需要进行限制的,通常会去设定它的最大值与最小值,当它超过最大值则居中对齐,当他在流式布局当中,窗口超过其最大值则固定左侧,右侧空白补充;窗口小于其最小值则展示横向滚动条。比如与上方同样的案例,将页面当中内容的文字实现成流式布局,并且将其流体布局的宽度限制为 200px – 120px ,这时则会形成页面的宽度变化,会导致内容发生直接的变化
  2. 流动的“水” 需要去考虑它漫出的情况,即在“水杯”高度固定的情况下,整个宽度无法装下如此多“水”的情况,通常我们可以使用 “…” 进行标注。这个思路后续在响应式布局当中也会体现

 

3.自适应布局(Adaptive Layout)

自适应布局是将差别较大的屏幕尺寸,去创建多个不同的设计稿,每一个设计稿去对应 一个用户实际的尺寸范围。改变屏幕分辨率就可以去切换不同的设计方案。

图片

通俗一点来说,自适应就是去单独设计桌面端、平板端、移动端的页面,并且将它们三者进行独立,而系统通过不同尺寸间的 屏幕断点/浏览器UA等…(实际前端判断远比这个更加复杂,但是为了方便理解可以暂且这么认为),进而适应出不同的设计页面。

而通俗一点来说,自适应是使用多套代码去对应多个页面,并且都是在业务非常复杂的情况下进行使用,在国内当中最常使用便是 桌面端与移动端 的产品。

比如 语雀 当中的 桌面端与移动端就是一个典型案例,他通过判断用户的使用设备,将页面拆分为了,桌面端、移动设备端、小程序(单独设计适配的)。因此只需要将每种设备的设计思路分析清楚即可。

图片

 

自适应布局与栅格

自适应主要是表达多个设备尺寸下进行切换的 布局方式,在不同的设备之间,也是需要去使用流式布局以及其他布局方式。

而不同的设备之间,屏幕分辨率的差异就会涉及到一个关键点,屏幕断点。

 

屏幕断点

屏幕断点,又叫媒体查询 @media,因为在整个设计当中,屏幕尺寸是极其复杂的,除了我们常见的尺寸:1920*1080、1440*765、1366。

图片

用户还可以通过调整窗口的大小,进而改变网页尺寸。而屏幕断点,最主要是判断屏幕的宽度,来确定 目前的尺寸究竟应该采取什么设计方案。

比如在设计一款成熟的B端产品时,因为商业的缘故我们作为各大平台(钉钉、企微、飞书)的ISV(合作上架),产品上架到不同平台时,需要对不同平台尺寸进行调整,比如钉钉为1024px、企微为980px、飞书为1280px,这时为了满足用户的实际场景,会将这几类特殊的尺寸作为屏幕断点进行对应的布局设计,以满足不同产品当中的最佳实践。

关于屏幕断点的媒体查询,是在前端 CSS3 代码当中,提供给用户校验整个屏幕的宽度,比如在下图前端代码当中,则代表在屏幕尺寸小于480px 时,使用 字体大小为16px。

图片

而确定断点才是这其核心,这里给大家提供两个思路,实际设计当中还会更为复杂:

  • 物理断点:也就是屏幕当中,已经划分好的断点方式,比如显示器的全宽大小、不同设备之间的屏幕分辨率差异
  • 设计断点:在设计过程当中,一些必要的屏幕尺寸。比如上方讲到不同平台的设计问题

其实屏幕断点不是最终目的,最终还是想通过屏幕断点,将页面当中不同的不同元素的处理方式实现在设计稿中,如果不需要,完全可以不考虑增加屏幕断点。

 

4.响应式布局(Responsive Layout)

这里先多聊一句,其实响应式的大规模普及,是源自 2015年 Google 的倡导(可以看到Google旗下的很多产品都采取的响应式布局,例如 YouTube),它最初的目的非常简单,就是为了提高响应式在移动终端上的运行效率。因为在2015年时,安卓 生态下的屏幕尺寸多到可怕,以至于需要有一套解决办法来让用户运行并使用。

响应式布局是确保一个页面当中所有的设备(桌面端、平板端、移动端)都能够展示出非常满意的效果,进行产生的一种技术方案。它更像是 流式布局与自适应布局 的结合,它能够通过对屏幕尺寸的快速响应,进而对页面的内容进行更为细致的变化。

通俗一点来说就是通过一套代码去实现多个页面,并且将多个页面的内容进行细化,进而能够快速适配多个设备。

图片

对于多个设备,最主要是调整页面栅格数量、水槽宽度、页面距进行适应,比如在YouTube当中,就是通过响应式布局,让页面实时响应进行处理。

 

响应式布局与栅格

比如以 Ant Design Pro的页面进行拆解,你会发现它在 575、767、991 的尺寸中,页面布局发生变化,然后根据屏幕断点之间的页面布局,采用向下兼容的适配方式,Ant design Pro 屏幕断点可以划分为320、576、768、992、1200,响应策略如下图:

图片

图片

 

布局与栅格的关系

你会发现布局其实是依赖于栅格,而栅格的使用,正是由于不同的布局所导致。只有通过栅格,才能够确定流式布局的比例、响应式布局的变化方式,但是在B端产品当中,并不是所有页面都需要使用栅格,经常看到一些作品集其实是为了栅格而栅格。

在B端产品当中在,真正使用栅格的地方更多是工作台、官网,而其他相对复杂的页面是没办法使用栅格,而对我们每一个产品而言,可以优化的点就是在屏幕尺寸较小的情况下,默认让整个产品导航菜单收起,以提供给用户更多展示内容。

 

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

作者:CE青年

转载请注明:学UI网》B端设计指南 – 栅格的使用

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

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

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

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


音磁APP-电磁风说唱社区

seo达人



音磁是中国首个说唱音乐AI创新产品,面向18-25岁年轻用户群体的潮酷嘻哈兴趣社区。作为一个从0到1的产品,设计师通过电磁视觉风格和典型嘻哈的故事化IP角色,来缔造说唱文化深度,快速孵化APP。

设计思路

本次设计目标,聚焦说唱文化,对说唱文化进行深入的探索思考,通过风格化的设计语言赋予产品个性、确定产品调性。创建故事化IP角色,引起嘻哈用户共情,帮助音磁打造年轻化、记忆点和竞争力的品牌形象。

1、风格化视觉语言 提炼视觉符号

2、故事化IP角色 树立品牌形象

图片

 

 

风格化设计语言

电磁风

a.前期调研

项目启动前期,我们对说唱文化、竞品App、综艺节目品牌、声音可视化品牌运营等案例调研分析,说唱文化凸显个性,极具潮流特色,结合项目立项资料。得出以下结论:

图片

 

b.情绪版表达

从调研分析中寻找共性,归纳总结符合产品调性的视觉调性,扩展出一些说唱圈情绪关键词:潮酷、大胆、个性,并且分方向进行设计风格探索。推演出音磁产品的设计语言,简洁平面电磁风+潮酷涂鸦个性化。

图片

图片

 

 

c.电磁风视觉符号

基于产品情绪版关键词:潮酷、大胆、个性,探索视觉符号。结合产品名称音[磁],以电磁为视觉符号语言贯穿整个产品以及品牌设计中,凸显潮酷的气质。

图片

 

d.视觉设计语言

将简洁平面电磁风与潮酷涂鸦个性气质融合是音磁视觉语言的重要视觉呈现方式。倡导“简洁、易用、潮酷”的设计理念,通过电磁风的视觉风格,来缔造说唱文化,拉近与核心用户的距离。

图片

图片

 

① 品牌LOGO

LOGO的设计从多个方向:音符、图形、文字、字母等进行多方案的探索以及评审,最后和业务&设计团队达成一致确定了最终的品牌标示,以字母“CI”为主进行图形化设计,好记易识别。

图片

图片

 

标准图形:形状来源于音磁中“磁”的拼音『CI』,利用类似「过电」「故障」「重叠」的图形处理,视觉化了“磁”的感受。我们把『CI』字形往前倾斜了10度带来一种速度感,绿黑白的颜色搭配让它在众多logo中有较强的识别度和记忆点。

标准字:延续LOGO的速度感,如倾斜度、尖角、笔画粗细,提炼加入电磁符号,呼应logo图形,强化超级符号并应用在界面中。LOGO整体传达出年轻、时尚、不羁的感觉,符合音磁嘻哈社区的产品定位。

图片

 

 

② 品牌色

黑+绿大胆配色,酷炫十足,释放潮流激情,绿色-年轻有生命力。

图片

 

 

③ Icon

功能性图标在一致性的前提下,圆角化处理,提高识别度、亲和度,保证易用性,结合品牌色,夯实品牌调性。

图片

 

 

④ 图形

个性化磁力礼物的设计采用涂鸦贴纸风,满足说唱圈文化圈层喜好,凸显说唱应用产品的个性。

图片

 

 

故事化IP角色-磁哥

IP形象能让用户快速建立品牌联想与品牌识别,IP的融入可以增加产品的情绪温度,使其产生共情,共情力才是IP能成功的最关键属性。产品中增加一些代入性、趣味性的情感元素,让用户在使用的过程中更愉悦。

我们深入研究说唱文化圈层,挖掘用户喜好,用故事化角色拉近距离,提炼可视化关键词:涂鸦贴纸、脏辫、说唱、潮流、个性等。赋予角色性格、喜好、身份。设定了一个异于常人的个性化小绿人角色(初代版本)。

图片

图片

 

IP在产品应用中,关注用户使用情绪,缓解焦虑、等待的情绪,结合趣味性的潮流话术,引导积极正向情绪,来制造生动有趣的气氛。

图片

 

升级版IP角色,头部结合品牌图形加入电磁超级符号,使其更超酷灵动。下图为音磁专属特色表情。

图片

图片

图片

 

总结

在用户调研报告中,音磁的设计风格满意度为4.23分(满分5分),得到了说唱圈用户的认可。作为一个从 0 到1的品牌,音磁的设计语言依然在不断的打磨、优化。极具特色的品牌调性能够确保产品、运营各环节的视觉设计更加统一,助力业务的发展。做一款新产品-风格化的设计语言,可以快速吸引目标用户;故事化IP角色,引发用户共情。

 

 

原文地址:百度MEUX(公众号)

作者:文娱平台用户体验

转载请注明:学UI网》音磁APP-电磁风说唱社区

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

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

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

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



字节设计师如何玩转西瓜PLAY?

seo达人


项目背景

西瓜PLAY是西瓜视频年度盛事,作为一年一度的中视频标杆性盛会,也是面向创作人、媒体和行业伙伴,传递重要的产品形态变化、内容扶持政策,持续讲好中视频的故事,让外界更好地了解西瓜的生态和中视频的内容价值。

2021西瓜PLAY推出「多屏战略」,中视频服务用户的边界不仅仅是 App,还应当覆盖 TV + PC + Pad 等场景,优质的中视频内容将在适合的终端流转起来,到用户需要的地方去。

图片

图片

图片

 

 

Part 1

好用的创意载体

怎么把多屏战略,体现在视觉创意上

结合今年主题「中视频迎来全屏幕时代」多屏联通,我们借鉴了艺术家的创作思路,结合蒙德里安拼接感形式,多尺寸图形和多屏概念相契合;魔方的创意点是,为了能更多面/更立体/更多维的视觉感受,以及当代影像艺术之父白南准的屏幕艺术,多屏幕组合的屏幕质感。

图片

图片

 

 

Part 2

好看的视觉语言

如何让活动视觉耳目一新

确定好魔方载体后,以及不同比例几何图形来体现多屏重组的,为了增添激情和饱满的情感,我们从魔方中提取了互补色,主色采用橙色到红色的渐变,而深色背景更能包容魔方的光线和多彩,同时针对赛道类别,进行定制化设计,经过了数次的进化完成。

图片

图片

图片

 

 

中视频畅想未来

念念不忘,必有回响,我们致敬经典也探索未来。西瓜视频可以在中视频绿洲中为大家带来更多精彩、有价值的内容;也会随时陪伴你点亮生活中的每一份好奇心;穿梭在有你的城市中,为生活工作奔忙的你带去惊喜和感动,西瓜视频,未来已来。

图片

图片

图片

 

Part 3

好玩的互动体验

怎么把创意承接到界面上

基于主视觉提取屏幕质感,让页面也有屏幕的感受,页面中“视频”“直播”两大赛区按钮切换,让用户知道在哪个赛道上的,也能充分利用主视觉屏幕重组的概念,这种仪式感,也会让用户觉得参加西瓜活动,是件很酷的事情!也能更好的承接产品界面。

图片

图片

 

 

用户体验活动框架

活动设计从报名前预热,到线上创作人评选,电视端的抢先赛、手机端海选赛投票互动,考虑多场景串联,做到活动逻辑清晰,体验顺畅。

图片

 

 

围绕动机激发行为

注重用户感受,分析用户动机激发行为,满足不同角色诉求,降低参与成本/拉票/任务难度,操作简单及时提供线索,重要信息多点触达。

图片

部分动态展示方案,有目的运用动效,加强创作人的荣誉认同感;代码实现动画文件极小,增加数字的跳动震感反馈,使投票充满互动感;及时的互动反馈,粉丝与创作人情感联系,增加参与感比拼感。

 

图片

图片

图片

多场景串联,保证整个活动风格的延续,平衡好统一性差异性,保证体验一致。

图片

 

 

线下活动

创作人从各地欢聚在此,一起狂欢庆祝,一起学习交流,共创中视屏内容生态;从创作人奖杯到线上装置的还原,以及活动周边都延续了主视觉基因,好奇心大会及创作人之夜的也同样验证了这个创意具有很高的延续性,使得品牌得到更好的透传,可以最直接触碰到用户。

图片

图片

 

原文地址:今日头条UED(公众号)   
 
作者:头条UED   
 
 转载请注明:学UI网》字节设计师如何玩转西瓜PLAY?

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

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

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

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

体验设计常用的5个研究方法论

资深UI设计者

概念

“用户体验”一词最早出现在 1990 年代, 认知心理学家唐·诺曼 (Don Norman) 随着技术使用的扩大和发展。 虽然这个词在最近几年才越来越被广泛的认识,但用户体验的原则实际上可以追溯到几千年前,中国古代风水实践起始的时候。

先来认识一下用户体验的概念吧,用户体验是一个人或者用户与产品的互动感觉与体验。产品是一种商品、服务或功能。 它可能是一个实体产品,也可以是虚拟产品,比如我们所熟知的手机程序、网页等。

评价一个产品是否拥有良好的体验的标准是公平、愉快、可用、有用。在设计时考虑原先被排除在外的用户群体是体现公平的关键,比如残章人士,或与自己有截然不同生活经历的人。用户体验设计中五个最常用的框架: 以用户为中心的设计过程、 五要素框架、设计思维框架、精益设计(MVP)、双钻模型。 选择其中某一个方法来满足你的设计需求,这也取决于公司、团队或项目,我们也许不会每次都使用相同的框架。


1.用户为中心的设计过程

这是一种设计方法流程,它在每一个阶段都关注用户及其需求。这是一个迭代过程,意味着设计师将一次又一次的回到某些阶段,通过这样的方式来优化我们的设计并为我们的目标用户创造最好的产品。

以用户为中心的设计过程的核心是同理心,对我们目标用户深刻的同情。这不仅仅是关于产品为用户做了什么,而是关于如何让用户感知我们的交互设计。

以下是以用户为中心的设计过程中的关键步骤:

  • 了解用户如何体验产品。我们想知道用户是如何参与我们的设计,以及他们将在其中体验产品的环境,理解这一点需要大量的研究,比如观察用户的行动和进行采访,这些方法将在后面进行探讨。

  • 指定用户的需求。根据我们在上一步的研究,找出最需要解决的用户问题。

  • 设计解决方案。为需要解决的需求提出多种可能解决方案,然后开始实际设计这些想法!

  • 验证解决方案。问问自己,我创建的设计是否解决了用户的问题?要回答这个问题,这里我们应该与真人一起测试自己设计的产品并收集反馈。

示意图中的箭头说明了以用户为中心的设计过程的迭代质量。设计师回到流程的早期阶段来完善和修正他们的设计。通过以用户为中心的设计流程,始终致力于改善用户体验并解决用户面临的问题!

以用户为中心的设计过程的指导原则:

为用户及其需求而设计(可用性原则)

按照我们自己的想法来设计是新手设计师常常容易陷入的误区,因为它看起来很酷或解决了您自己的问题之一。但请务必记住,你不是用户。你正在设计以帮助具有特定需求的不同人群。

使您的文案具有对话性(环境贴近原则)

产品设计中的文字应该具有友好、简单且易于理解的语气。避免使用用户可能不理解的行话或过于复杂的术语。

清楚地呈现所有信息易取原则

用户应该能够轻松浏览您的产品设计,而无需其他人的帮助。使关键信息(如结帐按钮)易于查找和识别。

确认用户操作(状态可见原则)

您的产品应该让用户知道他们何时正确执行了任务。这可能像按下图标时弹出一个新窗口一样简单,也可能像用动画扔的五彩纸屑来证明用户已完成任务一样复杂。 

提供支持(人性化帮助原则)

作为 UX 设计师,我们的目标是让每个用户都可以访问和理解设计,但有时我们会做得不够。为用户提供安全网,例如支持中心或常见问题列表。确保沮丧的用户不必在整个产品上滑动和点击来寻求帮助。


2.五要素设计框架

用户体验五要素已经是老生常谈的一个概念了,它是Jesse James Garrett在《用户体验要素-以用户为中心的产品设计》(The elements of user experience - user-centered design for the web and beyond)中提到的概念。作者Jesse James Garrett还有一个名头,那就是“Ajax之父”。

用户体验设计的五个要素是用户体验设计师将想法转化为工作产品的步骤框架。这五个要素从下到上是:战略、范围、结构、骨架和表面。将这些视为一组五层,其中每一层都依赖于它下面的一层。

  • 战略:底层是战略,在此为设计目标奠定基础。这些目标基于用户需求和产品的业务目标。

  • 范围:下一层是范围,你可以在其中确定正在构建的产品类型。这一层将考虑要包含在产品中的功能和内容类型。

  • 结构:中间层是结构,也就是整个产品的信息结构。在这里,你将了解如何组织您的设计以及你希望用户如何与产品进行交互。

  • 框架:框架是产品的布局。就像我们骨骼的布局塑造我们的皮肤一样,框架层详细说明了你的设计是如何工作的。

  • 表现:顶层,即表面,代表产品对用户的外观。表现代表用户查看和交互的界面。将表现想象成外部世界可见的衣服或化妆品。


3.设计思维过程

设计思维是一种创建解决方案的方式来解决用户的问题。设计思维有五个可操作的步骤:

 移情、定义、构思、原型和测试。


第一步:移情

这是关于发现用户真正关心的是什么,设计师需要并学习如何像他们一样思考和感受。 你可能会进行调查、访谈或观察会议,清楚地描绘出你的最终用户是谁以及他们面临的挑战。

第二步:定义

通过创建清晰的问题陈述来定义问题。 问题陈述是对用户的清晰描述需要解决的问题。 问题陈述应基于用户研究和,它让团队专注于一个明确的目标。后面我们会讲到该如何创建问题陈述。

第三步:构思

 一旦我们定义了问题,我们就可以开始构思或集思广益解决方案。 你的目标应该是想出尽可能多的想法。 通过关注想法的数量,而不是质量, 你更有可能想出创新的解决方案。 最终,我们需要缩小到一些可以原型化的想法。 

第四步:原型

原型是显示重要功能的产品的缩小版本。 你应该为你的原型制定一个明确的目标。

最后:测试

我们与用户一起测试原型。 测试将用户放在首位,因为它为用户提供了机会 在产品构建之前提供反馈。根据用户反馈,你可以进行更改和改进,或者提出一个全新的想法。


4.精益用户体验  Lean UX(MVP)

精益思想(Lean Thinking)源于20世纪80年代日本丰田发明的,精益生产方式造成日本汽车的质量与成本优势,曾经压得美国汽车抬不起头。精益思想的核心就是消除浪费,以越来越少的投入——较少的人力、较少的设备、较短的时间和较小的场地创造出尽可能多的价值;同时也越来越接近用户,提供他们确实要的东西。

精益用户体验过程侧重于减少浪费的时间和资源,并尽快生产出可行的产品。这个过程是迭代的,这意味着团队在收集用户研究和利益相关者的反馈时会继续更新和修改产品。

精益用户体验过程分为三个步骤: 

思考

探索用户遇到的问题,并考虑如何通过设计解决这些问题。这一步是关于收集研究,因此你可以清楚地了解产品的用途以及它将如何帮助你的用户。 

制作

通过创建草图、线框和原型开始设计产品。您还将创建一个最小可行产品,简称 MVP,它是你可以与用户一起测试的简单设计原型。准备好在收集反馈时返回并更新您的原型!

查看

了解用户如何响应您的设计并收集项目利益相关者的反馈。相应地调整您的设计,并在必要时再次重复这三个步骤。

这些步骤应该根据需要重复多次,直到你的团队达到所需的最终产品。精益用户体验流程鼓励生产力和协作。精益用户体验团队通常是跨职能的,这意味着您将与工程师和用户体验研究人员等团队成员一起工作。

在使用精益用户体验流程时,你应该牢记六个原则:

  1. 前进。仅关注将设计过程推向特定目标的设计元素和功能。不要被“好东西”分心。 

  2. 保持好奇。Leaning UX 是关于使用来自用户和利益相关者的反馈来修改和改进你的设计。不断寻求反馈以了解为什么特定的设计有效或无效。

  3. 在现实世界中测试想法。精益用户体验鼓励设计师在会议室之外与潜在用户一起测试他们的想法——例如使用原型。

  4. 外化你的想法。不要在内部辩论和分析一个想法是否可行,而是将你的想法转化为实际的、可见的和可测试的,同时它们在您的脑海中仍然新鲜。这样,你将在早期阶段获得有关设计的反馈,不同的观点和反馈最有帮助。 

  5. 将可交付成果重新定义为结果。专注于创造用户真正想要和需要的可用的、令人愉快的产品。请始终牢记,你首先要为用户设计,而不是为项目利益相关者设计。

  6. 拥抱彻底的透明度。对团队中的每个人坦诚相待(并期望得到同样的回报),因为你们将依赖于彼此的见解。这样,每个人都可以就如何前进做出明智的决定,避免浪费时间和精力。 


5.双钻 Double Diamond

双钻模型描绘了在设计流程中发散和收缩的过程,由英国设计协会提出,是一种设计师所使用的思考模式。该设计模型的核心是:发现正确的问题和发现正确的解决方案。一般应用在产品开发过程中的需求定义和交互设计阶段。

它将用户体验设计分解为两个主要阶段(或“钻石”):研究和设计。每个阶段有两个步骤。结合起来,这些是四个步骤:

  1. 发现问题。收集有关用户面临的潜在问题的信息。 

  2. 定义问题。筛选数据,并专注于您的产品旨在解决的主要问题。

  3. 解决方案。作为正在进行的工作开始设计您的产品。这就是线框和原型发挥作用的地方。

  4. 交付产品。审查和测试您的产品,为发布做好准备。

为了更方便理解,我从网上找了中文理解示意图:

原文链接:https://www.sohu.com/a/412691806_769195

与我们讨论过的许多设计方法一样,Double Diamond 是迭代的,而不是线性的。每个冲刺都会带领团队获得用于改进产品设计的新见解。然后,该过程以新的迭代重新开始。把它想象成学生在将最终草稿交给老师评分之前写的研究论文的各种草稿。

Double Diamond 还鼓励整个组织的团队合作,因此设计团队不仅仅专注于设计。要取得成功,整个团队必须知道如何结合设计原则、设计方法、用户参与策略和领导原则。准备好根据需要承担多种角色和职责。

双钻石流程有四个原则: 

  1. 以用户为中心:与 UX 设计的情况一样,用户是重中之重。

  2. 交流:通过补充文本的图像和设计选择进行视觉交流。你还应该确保你的设计交流是公开和可访问的。

  3. 合作:双钻流程的独特之处之一是它鼓励与您的团队成员进行创造性合作和共同创造。 

  4. 迭代:接受设计正在进行中并且不会立即完成的事实。神奇在于修订。每一次迭代,你都会给用户带来新的体验。


总结:

在前面我们讨论了5种常见的设计研究方法,可以发现究其根本,就是在开始设计前,设计师首先应该定位问题所在,是用户最关心的问题,而非我们想象中的问题。在这个基础上再去拆解我们的设计目标,提供足够多的可能性的解决方案将问题逐个击破。设计后期我们需要验证,和用户一起进行可用性测试。然后不断的往复循环。这些方法并非独立的,都是交叉相通的,所以在使用中我们可以灵活运用。

事实上在工作中我们可能已经尝试过其中某一个环节,但是却未必系统的了解它的原理。我认为理论知识可以帮助我们更宏观的看待问题,指引我们使用方法找到更多的解决方案。我也一直秉持这样的信念在学习设计理论,希望我的整理笔记对需要的人能有所帮助。





文章来源:站酷   作者:将晚秋


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

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

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



为何深色模式看起来不自然?

ui设计分享达人

在过去的几年中,深色模式一直是用户最期待的一个功能。你可以自由切换你喜欢的模式来适应当前的场景,iOS和Android也都在2019年布局了系统级的深色模式,深色模式可获得出色的视觉体验,尤其是在弱光环境中……有助于你专注地开展工作,因为内容会较为显眼,而颜色加深的控制项和窗口则会隐入背景之中。但真是这样吗,或者只是一种实际上弊大于利的操作? 


文章内容:


1、什么是深色模式

2、从可用性角度看深色模式

3、为什么深色模式看起来不自然

4、从设计角度看深色模式

5、结论


什么是深色模式?


虽然各种软件界面的色调和颜色会有所不同,但是对深色模式的处理方式都是在深色背景上显示明亮文本和界面元素的配色方案。相比之下,在浅色背景上显示深色文本和界面元素的配色方案,在这里我们称之为浅色模式。


而事实上,深色模式比浅色模式早了几十年。在其最初的阶段,深色模式并不是一种有意的解决方案,而仅仅是当时计算显示设备是阴极射线管(CRT),且只能显示单色的显示,屏幕看上去就是黑的,黑底白字或者黑底绿字就是计算机行业的早期状态。直到1980年代彩色显示器发明后,微软视窗系统上线之后,黑底显示才退出主流。苹果在1984年推出“麦金塔”个人电脑,第一次发布采用图形用户界面,由此开启了计算机屏幕白底显示的主流之路。


           

          

 ibm 5151单色监视器


浅色模式出现的确切时间很难确定,但可以追溯到施乐Parc图形用户界面,它也极大地影响了早期苹果的“麦金塔”和其他操作系统,该界面使用了以白色背景为主的深色文本和界面元素。它与显示技术的进步和现代图形用户界面的出现密切相关。这种能够显示色彩的且更先进的RGB CRT显示器拉开了浅色模式的序幕。


                      

1973年的施乐Alto是最早使用轻型接口模式的计算机之一


从可用性角度看深色模式


深色模式的实用性有多少,每个人看法也不一样。尽管深色模式的界面可能不像浅色模式那样观感清晰,但深色模式的界面却具有一定的魅力,可以让你联想到新颖,高端,精致,神秘,力量,奢华这些词。但是,黑色也是一种会引起人们强烈的情感一个颜色,并且在过度使用时很容易使人无法承受。


2019年9月,苹果公司上线深色模式(Dark Model)时,在官网上如是宣传道。从iPhone到Mac,当库克决定在苹果公司几乎所有产品上线深色模式、甚至要求所有在AppStore上架的应用都必须兼容深色模式时,安卓阵营的谷歌、华为、三星等头部公司也纷纷在其最新手机中推出了深色模式,相应地从WhatsApp到微信等全球主流的应用也都推出了深色模式。



            


但是,想要获得良好的深色模式是相对比较难的。一方面,深色模式迫使放大瞳孔来捕获必要的视觉信息,从而导致整体清晰度的降低。而同时界面中高亮的部分又迫使我们的瞳孔缩小去适应亮度,以便提高清晰度。这也就能理解为什么白色背景上的黑色文本在你的眼睛中通常会显得更清晰的原因。


             

扩大的瞳孔让光线更多,但感觉到的锐度受到损害



行业对深色模式追逐的群羊效应,也进一步加剧、放大了一个见解:深色模式对眼睛更友好更健康!


但是,事实并非如此。对于一些有散光的人来说,在某种程度上深色模式对他们的眼睛来说更糟糕,深色模式比浅色模式更友好更健康的科学仍有待讨论。斯坦福·拜尔斯眼科研究所的眼科专家对此表示:“鉴于文献中的数据,我认为深色模式对眼睛没有任何的友好和健康。” 这种深色模式对眼睛疲劳和潜在的眼睛健康的影响时,使用时间可能比设备的亮度或亮度更重要。


根据美国验光协会的说法称,大多数人的眼睛在某种程度上都患有散光,但通常不会引起注意。据美国眼科学院统计,每三个美国人中就一个存在散光的情况,1.5亿美国人需要佩戴眼镜来矫正视力;香港理工大学针对2700多人的临床检测发现,在21岁的30岁的香港人中,近40%以上患有100度以上散光。


一起看下面的说明性图像。即使你有完美的视觉,你也很可能在黑色背景上看到白色文字周围的光晕。



            

浅色模式与深色模式


如果增加文字并降低文字的大小,这种效果可能会更强:


             


右边的图像你应该会看到更多的光晕,如果你有散光症状,深色模式可能会让你看屏幕更费劲。在深色模式下,虹膜打开以接收更多的光,并且瞳孔的变形在眼睛上产生了更加模糊的焦点,因此,当你在深色屏幕上看到浅色文本时,其边缘似乎渗入黑色背景,也就是所谓的“光晕效果”。虽然深色模式可能更适合夜晚等弱光环境下使用,但不一定能帮助更好地阅读,对于散光患者来说,可能还会加剧视疲劳。


当然,从实用性上讲,深色模式也有它的好处,深色模式利用OLED屏幕在纯黑的背景下不发光的特性,确实能有效的省电,让你的电子设备续航上提升很大,这也是很多人一直在追求深色模式的一个重要原因,只要手机续航强比啥都重要!这也可能是苹果公司决定在几乎所有产品上线深色模式的一个原因。


另外深色模式更有利于给用户营造一种沉浸体验,对于视觉娱乐应用尤为如此。当你想突出显示特定类型的内容时,深色模式会特别有用。豆瓣、数字尾巴、网易云音乐是我常用的几个软件,它们都已经适配了深色模式。在这种模式下你的目光会更加注意到电影的海报、数码产品和充满活力的音乐专辑上。



             

豆瓣、数字尾巴、网易云音乐的深色模式


为什么深色模式看起来不自然


一是由于我们人脑的组织结构造成的,从多年来的多项科学研究和调查得出的结论是,从物种进化来看,人类99%的时间都是在白天中活动,人脑更倾向于在浅的背景上显示深色的图像。所以无论白天还是黑夜,浅色的背景都可以让你更快地专注于显示的元素,而深色的背景则使其难以辨别文字和视觉界面元素,从而影响你的阅读效果并最终使你的眼睛疲劳。 其实从世界各地多个洞穴中发现的史前壁画也能说明为什么我们倾向于喜欢浅色模式。



            

追逐猎物的狮子,法国Chauvet Cave,约公元前30,000-28,000


德国帕绍大学曾经做过一次测试。在该研究要求参与者阅读屏幕上的正极性(白色背景上的黑色文本)或负极性(黑色背景上的白色文本)的文本。随后,参与测试的人员会执行基本的校对任务,例如查找拼写或语法错误。研究人员还测量了每种模式下参与者的阅读速度。结果是所有参与者在正极性条件下的表现都会更好,他们检查出更多的错误以及阅读的速度更快。


                       

可读性差异


另一个学习发现正极性对于在显示器上读取小文本特别有利。人脑具有更快的可读性,更喜欢在光线背景下显示的深色文本和物体。


二是由于含有大量蓝光的光源会使我们眼睛不舒服,当我们谈论屏幕对眼睛的潜在破坏性影响时,我们通常是在谈论“蓝光”,这是由短、高能量波长构成的光谱的一部分。研究发现蓝光可能是导致眼睛疲劳的一个因素,但指出长时间不眨眼的干眼也是导致眼睛疲劳的一个更严重的原因,当然也有是因为字体太小,以及散光这样的原因。


当我们身处暗室或是在黄昏或夜晚时,眼睛会切换成不同的视觉模式;在弱光环境下,人眼会从对绿色敏感变成对高能量蓝光敏感,这代表我们在大量的接收蓝光,因此对刺眼强光的敏感度会增强。这类情形对驾驶人而言并不陌生,当他们被来车车头灯的强光照射时,特别是使用现代化氙气灯或LED头灯的车辆,可能会暂时丧失视力。


           

平板电脑、智能手机和其他电子显示屏,不仅改变了我们所接触的光谱,也使我们的视觉行为发生转变。我们必须意识到,我们现在用于“近距离”视物的时间比以往多得多,这通常是因为背景亮度太暗所致。


在德国光学公司蔡司官方网站上,对于蓝光也作一分为二的评价:“好处是当外界环境变亮也就是蓝光较多时,身体便释放出血清素—它是其中一种快乐荷尔蒙以及皮质醇—这是一种压力荷尔蒙。这两种荷尔蒙能让我们保持清醒,富有活力,同时也应用于冬季抑郁和失眠的治疗中。但过多的紫外光和蓝紫光可能会对肉眼造成损伤,除了可能导致令人难受的结膜和角膜发炎,也可能会破坏眼睛的晶状体(例如白内障),尤其是伤害我们的视网膜(黄斑病变)。”


从设计角度看深色模式


在WWDC 2019大会上,苹果宣布了iOS13的深色模式功能,在令人兴奋之余,作为设计师和开发人员,我们应该考虑的该如何去实现它。苹果和安卓已经发布了为应用程序设计深色模式的设计指南。当然,没有硬性规定要求遵循他们提供的设计指南,这些只是指导原则。


             

由于Material Design设计语言的原因,投影的占比是非常大的。在浅色模式下还好,但这不太适用于深色模式,因为深色背景上的黑色阴影在视觉上不容易察觉,为此安卓还提供了在深色模式下不同层级的卡片与投影上的参考。


            

根据设计文档来看,iOS背景为纯黑色,色值为#000000,Google 则更喜欢深灰色,色值为#121212。


            

通过提供的设计指南,我们可以轻易上手来设计和开发我们的软件,但要注意的是深色模式并不是简单的与浅色模式颜色对调,必须为所有的元素进行单独配色。


            

浅色模式下的白色不会在深色模式下转换成纯黑色


这样也就能理解为什么很多软件并没有全部去适配新的深色模式,一方面使用场景决定的,另一方面就是深色模式并不是简单地换个换个颜色就行,很多元素需要重新设计和开发。


结论:该选择哪种模式


在去年的 WWDC 大会上,苹果人机交互团队的设计师曾对 macOS 的深色模式使用场景做了进一步的解释。

他指出,只有阅读浏览或是内容创作型 App 才需要长期启用深色模式,比如文字或代码编辑。它们会借助黑底白字的高对比度特性来让用户视线保持集中,其它大部分软件对于深色模式的需求反而并不强烈。


或则你可以通过使用场景去选择,在明亮的环境中使用浅色模式,在昏暗的环境中使用深色模式。



            

但是在大多数情况下,真正帮助你避免眼睛疲劳的是不要整天盯着屏幕,而不是纠结到底用深色还是浅色模式。

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

文章来源:站酷 作者:罗小盒
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


竞品分析技巧

资深UI设计者

竞品分析无论是对产品经理,还是对设计师,都有着举足轻重的作用。这篇文章提供了一个做竞品分析的套路方法,将竞品分析分为了针对性分析和全局性分析两大方向,推荐对竞品分析感兴趣的同学阅读。


相信对于从事互联网行业的新型农民工们来说,竞品分析一定是不会陌生的,尤其是产品经理,往往会成为产品迭代及差异化的重要依据。

其实,作为设计师,无论你负责的产品业务是面向To B还是To C的,谙熟相关产品的功能体验,对业务产品的设计还是大有裨益的。“知己知彼”,“取彼之长,补己之短”,才能把设计体验做到愈来愈好。

设计老板经常对我们小组成员说:“我们做竞品分析,不能仅分析产品界面表象,还要通过体验竞对的功能架构、交互流程、视觉界面,分析出他们为什么这么做,反推出竞对产品经理的prd文档业务逻辑以及竞对设计师设计背后的思考。”

提到竞品分析,我时常会想到这句话,虽然做到有点难,但是竞品分析的最大价值意义也就在于此了。

如何做好竞品分析是有套路可寻的。所谓套路方法,按照我个人的理解就是你用这种方法套路可以达到目的。不太擅长做竞品分析的人,按照这种套路也能得到相对不错的结果。最好呢,简单易行,比如是一张可以“Take Away”的图表。

一、设计师做竞品分析的价值

1. 验证设计思路正确与否

对于从事一两年的设计师来说,在接到设计需求时,脑海里总会出现一些想法、思路。这个时候,借助竞品分析,可以把脑海中的多个想法进行筛选过滤。迅速放弃不太可行的想法,不再深入;重点关注可行靠谱的思路,从而明确设计目标和设计目标。

2. 寻求设计灵感

设计工作中或多或少都会遇到难解的问题,短时间内找不到合适的设计对策。这个时候,借助竞品分析,可以快速了解行业常规的做法,了解用户行为习惯;或者发现竞对的设计亮点,刚好移花接木。

  • 行业常规都这么做的,思考一下可否复用,以便设计体验更符合用户既有使用直觉;
  • 竞品的亮点,思考一下可否借鉴+适度创新,在此基础上,让设计体验做的更好;
  • 竞品的不足,思考一下为什么这么做不好,帮助自己的产品有效避免。

二、竞品分析的两大方向

根据分析目的、分析侧重点的不同,我们可以将竞品分析大致归纳为两个方向:针对性分析和全局性分析。

1. 适用场景

1)针对性分析

所谓针对性竞品分析,即具有明确的分析目标,分析较为细节、充分,在设计角度有较大的借鉴意义。

比如,要找到某个交互操作问题的解决方案,或者验证某个方案的正确性;产品的业务功能,也无需借助竞品来佐证价值本身;通过竞品分析所得到的设计方案,可以快速推动落地;所留给设计师们做竞品分析的时间,也相对紧迫等场景。

2)全局性分析

适用于分析目的没有那么确定,就是要了解一下行业内相关产品的情况;现有产品有一个大的思路,但不知道可行性、合理性如何,想借用竞品分析来为自身产品决策提供依据;需要多维度的收集竞品分析,比如产品定位、市场占比、用户规模、用户口碑等。

所留给设计师们做竞品分析的时间也相对宽松,或许是一个长期的研究课题。

2. 分析工作特点

1)针对性分析

分析工作量相对轻量化,不求面面俱到,只求有价值的信息输出。分析方法也比较灵活,可以根据分析目的随时调整。分析过程及结果的输出形式也无要求,形式不限,可以是图片,可以是文档,可以是表格,可以是ppt。

但是,针对性分析要求要做到细致、完整,而非概括性的。比如某个设计亮点,要分析出它为什么好,设计背后是如何思考的,我们要借鉴的话,如何做。

2)全局性分析

分析工作量比较大,分析内容要求全面些、系统化,包括竞品的产品定位、行业占比、用户角色、用户口碑等多个方面。

分析方法有一定的逻辑性更好,要遵循一定的主线框架。分析维度不限于设计中的交互流程和视觉创意,可以向前一步,即产品层面;也可以向后一步,即技术层面。可以成立竞品分析虚拟小组,与产品、开发协作做有广度有深度的竞品分析,会更有价值。

3. 分析侧重点

1)针对性分析 – 抽象化思考,让借鉴竞对做到心里有底

分析侧重于用户使用情况的背后原由,设计点的优势和不足,竞对背后的设计思考方式。若为我所借鉴的话,其设计方案落地情况指标的设定衡量。

2)全局性分析 – 以终为始

上文有提到泛竞品分析时间宽松,是一个长期研究的课题,这就要求我们要以终为始,以行为知。侧重于分析竞品的用户角色特征、特色功能、核心流程链路、典型页面的设计布局和设计表现等。

老板又喊你做竞品分析了!

三、竞品分析的来源方式

我们设计师做竞品分析,来源方式大体可以分为两种:产品发布会和在平时工作中有目的性的资料收集。

1. 产品发布会

竞对产品版本迭代的大型发布会,这种来源方式的获取对做竞品分析的我们来说,是最直接、最高效的。发布会上所体现的功能体验内容大多是该产品核心中的核心,亮点中的亮点。

针对竞对的产品发布会上介绍的功能体验点,结合产品去实操体验,我们对竞品的认知会更有体感、更全面、更具体。

2. 产品资料收集

在平时的工作中,要多有意识地收集相关竞品的网络文章链接或图片,梳理沉淀设计体验亮点。如适老化产品的设计资料库,当要做适老化产品竞品分析的时候,即可短时间获取资源。

老板又喊你做竞品分析了!

四、竞品分析如何做

1. 全局性分析的流程

全局性分析需要有逻辑性的阐述分析与总结,而不能存在较大的跳跃性。因此可采用如下流程进行分析。

第一步:项目背景

项目背景是对整体竞品分析的概述。要明确竞品分析的目的,是为了解决什么实际问题,寻找某应用作为竞品的原因,表达要言简意赅,把事情讲清楚。

第二步:竞品概述

此部分要阐述的是竞品的体量(下载量等数据),体量是真实反映一个公司,一个产品受欢迎程度的指标;也是对于竞品的功能和本产品要做功能最好的证明材料。

第三步:维度分析

建议初学者言简意赅的表达思路(优、缺点)+对比截图(建议标注区别点);功能点要有针对性,多想想为什么产品会这样设计。作者通常采用如下角度进行分析:

  • 用户层面:用户群体特点、用户的核心诉求、用户流程关注点等。
  • 功能层面:归纳梳理出竞品有哪些功能,分析出相应功能的目的及意义;同时,也可与自家产品功能做横向对比。
  • 信息架构:竞品导航架构以及功能之间的关联,可以让我们直观的横向了解架构之间的差异。信息架构层级分析不宜过深,建议分析到第三信息层级就行。
  • 流程链路:选取竞品的核心链路流程(如MVP路径),梳理出完备的用户体验流程图。核心流程节点中建议关联用户实操界面,可以标注出用户体验过程中痛点问题或者设计反推思考的内容或想法。
  • 关键页面:结合用户的使用场景,对典型页面的结构布局、交互操作、视觉风格等做分析评价。

第四步:分析总结

分析总结是整个竞品分析的精华部分。总结要有新意和立场,要说出你做这个竞品分析报告的思考和提炼是什么,能够结合产品接下来怎么做,给出明确的建议。

针对全局性分析类型,并结合工作经验,本人抽离提炼出一张竞品系统化分析报告表格,供大家参考使用。

详见下图:

老板又喊你做竞品分析了!

在整个报告中,第三部分与第四部分是核心内容,需要尽可能详尽、言之有物。同时,整个报告的前后分析应该层层递进,逐步得出分析结论,如果前后缺乏逻辑性,会减少报告的说服力。

2. 针对性分析——竞品迭代亮点功能分析

相较于全局性分析,针对性竞品分析就没有较为复杂或统一的分析流程,设计师可以根据自己的直觉进行点对点的分析。竞品分析的团队可大可小,也不依赖团队成员之间的相互协作。

举个例子,之前针对Google Workspace产品的发布会,我们就可以围绕着Workspace产品发布会来做。当然,前提是Workspace产品是所负责业务的直接竞对或者业务功能有关联的间接竞对。设计组内召集愿意做分析的小伙伴,相信10个人的小组总会有那么两三个乐意去做的。

如下图,下面是针对一个功能点整理的分析总结。

老板又喊你做竞品分析了!

针对性竞品分析可以从产品里面那些小而美的功能体验点入手,如动态的引导互动展示、预判用户下一步、减少重复操作、情感化设计、沉浸式的交互、形象化设计、有温度的文案等,这些都可以成为后续产品优化的微体验。

当然也可对产品的迭代亮点进行全面的分析。如下图,是作者抽离的分析报告模板:

老板又喊你做竞品分析了!

相较于全局性分析,针对性竞品分析形式上更加灵活,可以是做方案时的灵感来源,也可以是自己分析素材与提升的积累,亦或是政策性的竞品分析任务,这种竞品分析更加快速有效,更加容易言之有物,不会流于空泛。

五、结语

经过若干竞品分析的实践,有以下实践建议,希望能有所帮助。

  1. 建议遵循竞品分析主线框架,可根据实际情况做调整;
  2. 建议借用竞品分析工具包里的协作小工具、通用方法(如可快速绘制流程图、思维导图、用户画像等小工具,四象限分析法、横向比较法、PEST分析法、SWOT分析法);
  3. 成果物形式建议最好是一张长图(包含简介、多维度的设计分析、相应可借鉴的结论提案等),便于结果的可视化展示。

竞品分析是一个老生常谈的话题,特别是在to B类产品.其他的研究方法相对来说都较为困难,或效果不太明显。因此,竞品的收集与研究是做好to B产品的有效手段之一。

文章来源:人人都是产品经理  作者:弘毅

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

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

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




干货迟到了,职场的一些理解

seo达人


第一个问题:薪酬背后的竞争力究竟是什么?

不拉仇恨,但我的薪酬很不错,那这薪酬背后的竞争力究竟是什么?是我的视觉?创意?交互?管理?认知???诚然我的设计能力不错,但事实上大部分的业务方并没有很高的审美、绝大部分业务需求也用不到这么牛逼的体验思路。事实上,哪怕离了三鱼,这里的业务照常运转,对业务来说我的设计能力强弱并非决定性甚至算不上至关重要的因素,尤其是在B端。小伙伴们大概猜到了,决定我薪酬的不仅仅是业务方,更多的是设计团队的决定,而我对设计团队的价值,一定不止是搞定业务方这么简单。就像前面说的,支持业务需求迭代对设计的要求并不高,所以单凭这一点是不足以支撑起高薪酬的,毕竟互联网公司再有钱,这钱也不是大风刮来的。那么这个团队究竟是在为我的什么能力买单???视觉?创意?交互?管理?认知?还是说帅气的外表???我直到最近才慢慢想清楚,可能是我具备能为设计团队讲出一个好故事、进而帮团队争取到更多资源的能力。

这大概是三鱼微微想明白的一个游戏规则,它甚至不仅仅适用于职场,只要我们参与社会分工,就无时无刻不在进行自我推销:推销自己的能力,你就能得到一份工作;推销自己的观点,你就能得到一群信众;推销自己,你就能找到另一半(Maybe)。而前面说到的“讲一个好故事”,在我看来就是一种很高级的推销方式。

先举几个例子:

在品牌领域:宝马宣扬“驾驶的乐趣”,并用富有活力、运动感的宣传片塑造品牌,从而在一众高端车中打开了市场;奥妙宣扬“脏是对的”,并用一个个衣服脏了但换来了快乐体验的案例来塑造品牌,从而在一众强调去渍能力/不伤手的洗洁精中独树一帜。

在销售领域:从食品原料的采摘到最后送入口中的全环节,销售人员展示出一个绿色安全无公害的产品生产故事,赢得了高端消费者的信任。

哪怕在感情领域:同样是表白,“执子之手与子偕老”会比“我爱你”更有诚意,因为它描绘出了让人产生画面感的场景,从而使情感表达更容易打动人。

甚至大到国与国之间:“碳中和”、“人权” 也是用故事为外衣,包装经济、政治目的(不展开)。

再说说我们自己:“海洋保护”我们耳朵都听起茧了也没啥触动,但看完《海豚湾》之后,三鱼甚至产生了成为海洋保护志愿者的冲动。

比起说教,故事的杀伤力显然要强大得多。那么说回到一个公司的设计团队,它想要获得更多的话语权、更多的资源倾斜,就必须让公司乃至行业看到自己的价值,比起直白地表述,通过一个个设计故事来传达价值,显然是更高明、更容易被人接受的。而由此设计团队就可能获得更多的资源倾斜,进一步发展壮大。所以你会发现,对设计师而言,讲好故事是比支持好业务更高维度的要求,因此我的总监对设计质量的要求会远高于业务需求,因为他需要靠一个又一个的好故事,为设计团队换来更大的话语权、更多的资源倾斜,这样才能让整个团队活得更好,而我们的设计产出就是他的故事素材。

所以说到底,我的总监所看中的也许正是三鱼能在支持业务需求的同时为设计团队讲出好故事或者产出能让设计团队讲出好故事的必要素材。这便是第一个问题的答案:我的竞争力来源于我能讲出一些特别好的故事,这些故事不仅能把我的视觉、创意、交互、管理、认知能力直观地推销出去,也能为整个设计团队搏出更大的发展空间。

 

第二个问题:怎么定义好故事?

三鱼认为:能让人直观感受到业务价值以及你/团队不可替代能力的故事就是好故事。下面我先列举一下互联网公司常见的两类体验设计领域 (运营和品牌又是另一套玩法下次讲) 的故事形式:

1. 深刻的设计思考

顾名思义,这一类故事着重从设计能力的不可替代性发力,也是三鱼最推崇的一种方式。这一类故事具体又分为三种:

a. 主导某产品3.0以上的设计改版工作

如果你能主导某产品3.0以上的设计改版工作,那么你就很容易讲出一个好故事,通常一个产品发展到3.0以上,一方面功能已经铺设完善,有富余的开发资源愿意投入到体验打磨上,另一方面它已经具备一定的用户基数,你的设计方案可以靠数据进行直观验证。所以主导一个产品3.0以上的设计改版,可能算是体验领域最黄金的机会了。但这样的机会往往凤毛麟角,姑且不论一个产品走到3.0所需要的时间和几率,单你能否主导它这件事,在大公司就是一门玄学…3.0改版产出的故事,在业务价值和专业不可替代性上都容易讲好 (不排除有人专业能力实在拉垮的可能性)。但缺点就是这样的香饽饽,你抢得到吗?守得住吗?至少三鱼工作到现在也就遇到过一次,噢不,半次…

 

b. 设计自驱

既然大型项目的改版机会很难得,那么很多设计师退而求其次,开始“设计自驱”地发起项目,本质上是自己主动创造机会,这其实是一个很好的思路,主动挖掘设计机会是三鱼很推崇的。但据三鱼观察到的事实是,有相当大一部分设计自驱仅仅停留在“打补丁”式的创新,就比如“我们经过一系列专业的分析,决定把直角改成了圆角/把色值调亮15%,最终使得产品DAU上涨了1.5%,这次自驱取得了圆满成功”…这类自驱产出的故事在专业上勉强能讲讲,但在业务价值层面就比较单薄了。

 

c. 设计/业务创新

本质上它也属于设计自驱,但要求设计师有更高的业务视角和专业技能,能敏锐地在行业中找到新的赛道,并针对新赛道中的人群定义出完整的体验流程并把它推动落地。设计/业务创新产出的故事基本都是好故事,而且在新场景没打开之前也没人和你抢。但对设计师的专业能力、调动资源的能力都有较高的要求,并非人人都能把握住。

 

2. 庞大的项目体量

那我再来看看第二类故事形式,依靠体量讲故事的一般是在展现自己在资源调度、团队管理方面的不可替代性,讲这种故事的往往管理者居多。在体验设计领域,最有代表性的就是我们所熟悉的“主导设计体系落地”这类项目,为业务降本提效是这一类故事的卖点,衡量价值在于它能覆盖多大的业务体量。但因为设计体系是一个很虚的概念,两套设计体系之间也很难分出优劣,真正能把所有设计/业务团队统一在一套设计体系之下靠的不是设计本身,而是实权。既然这是一种只要权力(或背后的权力)满足条件,就能讲好的故事,那么这种故事基本上满足条件的人都会来上一个,但也存在问题,就是这种故事在业务价值上好讲,但在专业不可替代性上会被质疑,毕竟大家造的轮子高度同质化,而设计最怕同质化。几乎所有造轮子的人都绕不过去的一个问题:“你这个轮子和AntDesign有什么本质区别?”答案1:“我造的轮子比它的更大!”但市面上业务体量能大过蚂蚁的也没几家,总不能轮子造得比业务还大吧?答案2:“我造的轮子是为我们的业务场景量身定制的!”那你们的业务场景有什么特殊性?举几个你针对这样的特殊性做出的创新?讲得出来吗?倘若真的讲得出来,那么这个故事中在专业不可替代性的部分,已经朝“深刻的设计思考”靠拢了。所以至少三鱼认为,在体验设计领域,纯粹靠体量来讲故事会越来越不好使,互相拼体量并不现实,业务的体量终归有边界,那么项目的体量就不可能无限扩大。因此在故事中加入 “深刻的设计思考”,可能才是打出差异化更现实更低成本的方式。

讲到这里你会发现,三鱼所讲的这些体验领域好故事的条件都很苛刻,往往超出了设计师专业能力所能掌控的范畴。

 

第三个问题:有没有一种思路,能直接在设计师可掌控的范围内,讲出好故事呢?

答案是:有,但是似乎整个体验领域只有我一个人在用这个思路,至少三鱼是靠它一路开挂走到现在。而且这个思路其实人人都可以做到。

这是真的,先给大家看看我最初的水平:

培训班作品《爱情小管家》

再看一下我在百度的主要工作:我晚了2年才转行,在百度职级最低,被应届生倒挂。互联网工作经验为0的我在相当长一段时间被安排做一些类似广告图优化、日常运营图支持等繁琐但技术含量低的工作,和体验没有半毛钱关系。

广告图优化

运营图支持

三鱼的起点似乎也并不是特别好。早期你还能在我的站酷看到这些作品,但后来越来越多人评论:“看了作者早年的作品,感慨作者这一些年一定付出了巨大的努力。” NND,于是我就把这些作品都删了,以维持我的偶像包袱…

但我准备把这个思路放在下一篇文章来讲,乐观估计会在11月份和大家见面。抱歉不是三鱼故意卖关子,这个思路说到底就一句话,但倘若三鱼只讲这一句话,你是听不进去的。我需要结合实际案例的思路和收益来跟你讲,而我认为最合适的那个案例要到11月份才解禁。所以大家就保佑我11月份新作品能顺利上线吧。PS:可能还会有延期风险,抱歉…

 

原文地址:站酷

作者:三鱼先生

转载请注明:学UI网》干货迟到了,职场的一些理解

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

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

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

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



日历

链接

个人资料

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

存档