首页

这么好的设计排版技巧,不看亏了啊!

seo达人

一、运用分组建立层次 

图片

在设计中,相邻的元素比分开较远的元素会更加吸引人注意,在做设计阅读顺序的时候,利用设计分组是一个非常有效的方法,将不同信息进行视觉间距分组,能提升用户对于内容上的理解。

如上图slack的设计,插画引导图和底部按钮上面文字拉开了距离,使得内容更聚焦。第二个界面的顶部头像和下面的文字也是通过分组形成了对比。

图片

stadium-live的产品设计上,登录页面按钮为一组,顶部品牌LOGO和slogan一组,人物为一组,每组信息之间分组非常清晰,每一组都不会对对方视觉互相干扰,间距非常合理,用户阅读从一组信息到另外一组信息也很清晰。

后面两张页面也是如此,顶部的导航,和下面表单信息,以及头像和底部按钮,通过分组处理,内容更加符合用户的视觉动线。

图片

在球员定制的处理上,最左边那张图,通过卡片和线条分组处理,从视觉上很清晰的看见排名,哪个球队和哪个球队之间比赛。

图片

当一组信息比较接近,证明必须是有关联的,如果距离比较远,这意味着这组信息和他们是不同的,简单来说,通过邻近性,通过分组创造这些关系,为信息带来层次。

 

二、运用空白建立层次 

图片
空白也是视觉设计元素,并不是留白就是空着,如果设计中留白运用合理,可以帮助用户理解很多信息,因此任何设计都需要通过适当的负空间来传递信息。如上图我喜欢的一个应用classpass设计非常极简,页面中大量运用留白来凸显内容。
图片

classpass的设计不会使用太多的视觉元素,而是运用留白把内容进行分组,每个页面的留白恰到好处,同时留白本身就是对信息进行分组,所以页面中减少了很多线条使用,页面会更加干净有品质感。

图片

must是一款电影软件,整体设计非常杂志感,页面就是通过图文处理,以及留白空间的处理,增加对比,基本产品体验你不会感觉到视觉负担,元素之间的信息组织的非常清晰。

图片

在电影展示页面,信息的处理,以及打分设计上,重复运用留白来处理信息层级,在设计中,当你元素周围留白越多,它产品的注意力也越强,如右边的打分页面,几乎所有焦点都在这个弹窗上。

图片

artsy是一款艺术品电商网站,整个app的设计也充满了艺术气息,每次我设计找不到感觉时候就会去打开看看,里面的排版,还有设计的细节处理,都值得我学习,但我喜欢的还是他对于板式和留白空间的处理。

图片

在首页设计,我最喜欢他相框的设计,就像欣赏美术馆的一幅画,页面留白也非常大,衬线体和非衬线体的对比也运用的非常好。

图片

整个APP的设计被大量留白包围,虽然现在流行各种质感,各种光感,C4D的设计,很多设计师认为设计越多越好,但是大量视觉元素会让页面过于饱和,如果没有很好的视觉引导,用户会感到不知所措。

 

三、运用氛围建立层次 

图片

有设计感的纹理从视觉感受上比简约主义更能吸引用户注意力,但是背景纹理运用不能为了设计而设计,而是需要和产品内容有关系。比如纹理和文字内容,和信息是密切相关的。如上图,是一款打车软件,背景结合了打车的地图,公路线路,用车场景,让页面对比和设计层次更加突出。

图片

jour这款产品在设计上,背景通过有层次的氛围纹理和质感,使得页面氛围感很强,层次细节更加丰富,当然在设计的时候切忌对于设计氛围过度运用,那样会让用户分散注意力。

图片

其它场景上氛围纹理的运用,卡片上通过系列插画的塑造,页面虽然有很多插画,但是页面平衡感同样重要。需要考虑用户在界面看见的和其它页面视觉感受是一致的。

图片

氛围除了图形,其实色彩也是很重要一种方式,我很喜欢的ASANS的设计,在背景上就是运用了一些几何图形的肌理效果让整个空间感更加丰富,这些几何图形丰富细节同时也让整个内容更加凸显。

图片

如上图是他里面一个注册登录场景,在界面中,除了背景灰色底纹通过几何图形来烘托视觉层次,同时在插画上也是非常巧妙,用户输出,完成后,整个插画到品牌图形的连贯变化体验非常好。

图片

Sift是一款新闻类阅读产品,这类型产品设计一般就是文字排版,设计简约为主,但是sift运用了一种大胆的设计,背景氛围上采用一些点线底纹的肌理效果,和内容结合的很平衡。

图片

Lugg是一款货车APP有点像国内的货拉拉,整个设计也氛围感非常强,运用的全插画设计,在页面每个细节,从引导页,让页面核心功能设计都能看见完整插画的运用,我目前我看见运用插画氛围作为主设计最好的产品。

图片

感兴趣的同学可以去美国苹果商店去下载使用,页面中增加氛围是一种增加层次很好的方式,但是同时需要主要好视觉平衡,不要做到本末倒置。

 

四、运用衬线字体和无衬线字体建立层次 

图片

字体对比,运用衬线字体和非衬线字体对比是非常常用的方式,如上图运用了Adelle Sans字和Tiempos字体这两款字体的对比让页面内容结构非常清晰。

图片

上图官网的设计,干净的排版,通过字体大小,字型进行对比,体现出视觉层次。

图片

字体的选择本身也是设计中很重要的因素,好的设计不仅能提升设计品质,同时也能让页面视觉层次更加分明。

 

五、结语 

回归设计本质,其实我一直觉得设计这个工作就是一个翻译官,我们的使命是让用户使用产品过程中更加易懂,同时我们能方便地解决他们的问题,而不仅仅是专注在界面美观本身上,今天分享的这些提升设计层次的一些技巧,也是为了让页面有更好的体验。


作者:叮当猫

转载请注明:学UI网》这么好的设计排版技巧,不看亏了啊!

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


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

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


哦,原来这样可以更高级!

seo达人


图片

如果光看视觉不论主题感觉还不错的,但最大的问题也是不符合主题,主体是一个现实的篮球运动员,却搞了很多魔幻的元素,结果就很像魔幻篮球似的,这样在练习的时候可以试试,但作为一个项目需求肯定是不会让你过的。

再来看看修改后的:

图片

修改后的图整个就和谐统一多了,更符合主题。

我们做图的时候符合主题是最基本的,那到底该怎么做呢?今天就给家分享一下设计思路。

 

一、明确风格

视觉设计师经常会遇到各种各样的需求,首先我们要做的第一件事就是了解需求,明确风格。
我们可以通过了解需求背景,和观察人物素材来了解,之后再去推进设计。

我们来看看素材:

图片

这不是NBA巨星科比么?!明显是现实题材,不应该加入一些魔幻、科幻什么的元素进去。

图片

 

二、明确需求

明确需求的目的是为了抓住设计关键点,方便为接下来的设计推进提高效率。比如这次作业是要求大家设计一张带有神秘感的剪影海报,我们可以找剪影的参考来提取这类视觉表现的关键点是什么:

图片

找了很多参考,可以看到剪影视觉的效果还是蛮强的。很容易出效果,通过观察我们要学会提取里面的关键点:

图片

我们要做的就很明确了,在一个场景里设置一个光源,再加入人物调黑放在光源前面形成对比。

 

三、元素联想

我们的人物素材是篮球员,我们就可以通过篮球运d动员这一个点为中心去发散联想:

图片

再用这些点来组成画面,就会很符合主题了。

比如我们的场景可以是球星的发布会背景墙:

图片

一个简单的场景就ok了

然后是我们的光源:

图片

原图中就是一个圆,就比较普通。
其实光源也可能是各种各样的造型,来增加设计感和主题感。我们刚才联想到有篮球,光源我们就可以用篮球来做。但我又懒得画,怎么快速的做一个呢。这里给大家分享个省力的小办法。

我直接从开源的图标网站去下载,里面的图标都可以免费用,且可以下载到矢量文件。
图片

直接下一个不错的放图里看看:

图片

emm,感觉有点太粗了,一点也不透气,没关系。我们把源文件拖进AI里调整下描边粗细就可以了:

图片

再放回图里看看:

图片

这样就轻薄透气多了!再给图形加个外发光效果:

图片

光源就完成了,又快又贴合主题棒棒的!
接着可以继续丰富画面,比如把光源想成一个霓虹灯,那可能需要绘制一些线路,也可以在墙上张贴一些人物宣传海报:

图片

还可以增加灯光对地面的倒影,直接把墙上的篮球图形复制一个下来,使用透视工具拉一下变形,放到地面上:

图片

这里要注意做好两个点,倒影才能更真实:
1.靠近光源的位置会很亮,远离光源的地方要暗下去;
2.靠近光源的位置边缘比较实,远离光源的地方要用高斯模糊虚化下去。

图片

这样整个场景就很丰富啦。

接下来是人物的处理,有一个点给大家分享下:

直接把人物涂黑也有剪影的感觉,但是毫无细节,人物就很平,薄的像纸,一点都不立体

图片

为了解决这个问题,我们可以给人物的边缘加一些过度的光,注意观察手臂的位置:

图片

有过度光的人物是不是就显得很立体啦?

这个同学的也有点这个问题,整个手臂没有加过度光,所以会显得有点平:

图片

加完过度光看下整体效果:

图片

一张帅帅的人物剪影海报就完成了!

 

四、其它的一些附加知识点

1.低视角会让画面充满压迫力。

以Amor的作业为例:人物我们不能调,

但我们可以调整地面的俯视角度。比如右边这张,就放大了透视,就给人一种仰视角色的感觉,整张图更有压迫感。左边这张因为透视比较小,视角就比较高,显得是在俯视角色。就缺少了一点气势:

图片

小小的改动就可以提升一个气质。

 

2.在光源里加入一些碎片会让画面更丰满,充满细节。

这是兜兜一张作业,也是很不错的。

图片

我们观察下底部光源的位置的区别:

图片

很多同学打完光就会让它空着,就会显得很单一,光也会显得有点苍白平淡。其实我们可以在光源里加入一些细节,就可以让光的层次更丰富了,从而让画面更耐看。


作者:慢热

转载请注明:学UI网》哦,原来这样可以更高级!

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


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

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



设计策略|源源不断的创新思路(激进篇)

seo达人


图片

 

本篇讲述:激进式创新

激进式创新是相对罕见的,它同时依赖革命性的技术和创新的商业模式来解决问题,激进创新的发生往往伴随着产品的创新、组织创新等连锁反应甚至引起产业结构的变化。科技的创新带来了很多革命,iPhone开创了电容触屏时代,ARVR打开了元宇宙之门;新的商业模式利用现有的资源引起行业巨变,如Uber和滴滴用物联网技术关联私家车和出行乘客,连接异地旅者和房东的Airbnb等都是激进式创新。

作为设计师,我们在技术和用户间承接着场景和体验,了解激进式创新的方法可以让我们在工作更好地帮助团队突破。很多具有划时代意义的创新产品其实都有设计师创始人的身影:颠覆传统酒店行业的Airbnb(爱彼迎)的联合创始人Rian Chesky和Joe Gebbia,首创了华夫格底跑鞋的Nike(耐克)创始人Bill Bowerman,设计开发了凹凸面圆点拼接积木的LEGO(乐高)创始人Ole Kirk Kristiansen,颠覆内容传播权威、开启全民播客时代的Youtube联合创始人Chad Hurley…他们都是设计师出身,基于自己对行业、产品和用户需求的洞察革新了行业。

 

一、激进创新启动 / 策略2则

图片

上一篇提到渐进式创新的起点难度主要在于沟通和传达,而激进式创新依赖创意突破,有两类需求命题可能会让创意发散变得艰难。其中一种是需求命题过于具体,这可能会限制创意的发散空间;另一种则是需求命题过于宏大,无边无际让设计师不知从何着手调研和发散。针对这两种状态,下面的方法将针对性地帮助设计师们解题。

 

策略1.  问题挖掘 Dig Deeper

命题过于具体很可能会限制创意的发散空间,仿佛解决方案已经有了安排,那设计师很可能会被限制在已有思路中。问题挖掘就是针对这类命题打破砂锅问到底,从而帮助自己更好地获得发散思路。问题挖掘就是写下所有能想到的问题,挖掘前因后果,了解内外机会和风险。

 

提问可以从以下三种工具角度着手:

图片

  • 5W1H问题

5W1H分别是:是什么,是谁,为什么,在哪里,在何时,如何。从这六个提问开始着手列出所有想问的问题,并继续发散关联的子问题。然后尝试自己回答刚刚列出的问题,有些问题可能和命题无关则跳过。当我们自行完成了梳理筛选后,就可以将这些问题在和需求方沟通和访谈时提出,进行深入了解,获得灵感。

  • 是什么(What) “我们的创新想要解决什么问题?关键假设是什么?”…
  • 是谁(Who)“产品创新的购买者是谁?用户是谁?相关利益人是谁?”…
  • 为什么(Why)“为何这个问题重要?为何发生这个问题?为何之前未能解决?”…
  • 在哪里(Where) “这个问题发生在哪里?之前在哪里解决?还有哪里有相似的问题? ”…
  • 在何时(When)“这个问题何时发生?问题何时开始?何时可以解决?” …
  • 如何(How)“如何解决?已经尝试了哪些解决办法?”…
  • 5个为什么(5Why)

经典的连问5个为什么。如果我们针对看到的结果,只问一个“为什么”,很容易停在第一层的表象原因,只有不断的深入挖掘才可以层层递进,找出最关键的底层原因。

  • “机器为什么停下来?” 电路过载,使保险丝熔断。
  • “为什么?” 轴承润滑不足,因此被锁定。
  • “为什么?” 机器人上的油泵没有循环足够的油。
  • “为什么?” 泵入口被金属屑堵塞。
  • “为什么?” 泵上没有过滤器。
  • 层层扩散

如果五个为什么是向内层层递进,那层层扩散就是向外发问。以最为基础的命题问题作为中心点扩散,向外展开相关因素:产品的核心问题,相关结构技术,外部文化和法规…

  • “这个产品我们要解决一个什么问题?为什么要解决这个问题?”
  • “别人对这个产品的当前印象和期待是怎样的,需求发起者是谁?”
  • “这个产品的开发方式,有什么背景,历史渊源,复杂的代码历史,变动难度?
  • “这个产品拥有的资源?”
  • “这个产品有什么文化、政治、法规背景
  • “我们的外部优势和劣势是什么?”

 

策略2. 设置边界 Planting Limits

都说设计是戴脚镣跳舞,你是否接到过抽象空泛且听起来没有任何限制的命题?创作条件没有限制也许意味无限可能,但更常意味着难以聚焦。适当的束缚有时可以帮助更好地放飞想法。所以如果面对的命题太庞大,可以尝试给自己设限,或思考可能存在的限制,就能抓到一个相对靠谱的起点。

  • “这个项目要控制成本投入,用最少的资金,最少的人力。”
  • 最大程度保留用户的现有体验,尽可能减少用户学习成本。”
  • “新创意最大程度满足原来的代码框架,使用最小的开发成本。”
  • “新的产品体验要极简,将用户路径缩短到三步以内。”
  • “在链路上需要用户使用的媒介最少化。”

图片

例. 重新设计支付流程

  • 原体验:原本用户需要携带钱包出门,钱包里会有多张信用卡,储蓄卡,还会有很多现金。而用户出门手机也必不可少。
  • 设置边界: 在优化的支付流程里,尽可能减少用户支付需要携带的东西;在用户支付流程中减少遇到的阻力,提升消费。
  • 新体验:让用户可以用软件进行转账,输入需要支付的价格,双方确认后输密码转账。

-> 让用户可以直接扫码进行支付,无需输入价格,无需人工核对

-> 让用户用指纹确认,或开通多少元以下免密码支付,无需输入密码

-> 让用户直接手机感应支付,无需打开手机或软件

-> 扫脸进行支付,即使不带手机也可以进行支付。

 

二、激进创新过程 / 策略3则

上一篇渐进式创新介绍的方法和原则在激进式创新同样适用,而本文将介绍三则对于命题较大的激进式创新非常适合的过程方法,分别是:创意矩阵,逆向思考,多问“如果”。

图片

 

策略1.  创意矩阵 Creative Matrix

如果需要用创意解决一个较为庞大的主题,尤其是激进类创新设计,那创意矩阵可以迅速排列组合进行发散,且不遗漏内容。

创意矩阵以表格的形式,让X轴和Y轴上的内容进行交叉碰撞,强制、批量地激发创意的方法。如在X轴写下选择一类用户和主题间的需求(目的 / 流程 / 用户类型 / 特点 / 心理等…),Y轴写下解决问题的方式(内外部新机会 / 实现方式 / 科技 / 环境 / 媒介 / 分发渠道 / 政策等…),横纵碰撞在一起,就会有一张完全覆盖的创意表格,之后可找出亮点、分析可行性进行创意选择和组合。

图片

例:设计一个针对工业设计的3D建模软件,打破市面上常见的软件功能和体验。

我们以Gravity Sketch的3D建模产品为例,用创意矩阵倒推思考的流程。

(1)首先确定XY轴发散方向。能带来革命性改变的体验往往依赖技术层面的实现,技术革新会带来在流程、建模方式的革新。所以我们将3D软件依托的技术和媒介为Y轴,在媒介的放散方向上同时考虑建模现有媒介(传统的PC端和云端软件等)是否还有新的机会;再考虑相对激进、未来的媒介(如pad端、VR端等)。3D建模的工程经常会涉及到协作分享等流程,选择以整体设计步骤为X轴。从这个矩阵开始进行发散,交叉重合的部分思考结合出的设计,再选取其中的亮点向产品方向创新。

图片

(2)梳理亮点。在梳理发散过程中可以看出,VR客户端和pad用移动端有相对创新的亮点,不同于较为传统的PC端和云端。如果pad端和VR端可以满足3D建模软件所需要的性能,这样的创新就可以被支持。

(3)继续探索。针对每一个流程步骤,可以聚焦到里面的每一个分步骤,探索亮点。比如创作阶段的流程可以展开到具体设计到建模的步骤。当把步骤进行分解之后,可以发散出各个阶段利用VR的创作优势。

(4)梳理亮点。在草图和草模阶段,VR内直接创作可以节约物理材料,支持无死角设计不用重复出图,帮助立体想象、可视、模拟真实尺寸体验,打通草图到建模的链路…颠覆草图到建模阶段的设计流程,提升整体效率和可能性。

图片

 

策略2.  逆向思考:程序 / 观念 / 状态

逆向思维缔造了许多打破常规的创意。上一篇我们介绍了在渐进式创新中实用的原理/功能/结构三种逆向思路。这里介绍3类更适用于激进式创新的逆向思路和具体的案例,为激进式创新赋能。

图片

  • 程序或方向逆向 | 颠倒事物发展变化的构成顺序、排列位置。

例a. C端服务直接收费 -> C端服务免费,其他项盈利

很多产品在收费时直接向C端用户收取服务费用,但是容易面临C端有付费意愿的用户量数不多。不如让用户免费使用体验服务,扩大用户留存的基础上,通过向B端等有更多支付意愿的商家收取费用。QQ、微信等通讯软件的出现让用户免费使用通讯、社区等功能,通过用户的留存从其他商业化项目收费,如收取在软件内的广告费用。

图片

例b. 主动检索 -> 算法推荐

以前用户浏览信息的方式,偏重于主动搜索需要或感兴趣的内容,但是检索流程相对繁琐,用户可能并不够了解自己的喜好。逆向思路让用户被动接收信息,由算法基于用户的浏览喜好状态进行推荐,无需用户进行检索即可将信息推送给用户。短视频等产品就是通过算法推荐匹配出用户感兴趣的视频,让用户享受“刷”视频的过程。

图片

  • 观念逆向 | 设计者反转看待问题的观念,或针对人们的观念逆向设计。

例a. 少即是多 -> 多才是多

现代主义建筑大师Ludwig Mies Van der Rohe提出“少即是多(Less is more)”的极简设计理念改变了很多产品和建筑设计,之后许多设计师都遵循”少即是多原则进行设计,罗伯特•文丘里 (Robert Venturi)逆向而行从设计思路上“反叛”,开创了“少则无聊(Less is bore)”观念,让设计的建筑更符合街道氛围和文化。BJARKE INGELS B.I.G 事务所则喊出了“多才是多(Yes is more)”,设计出造型夸张有趣的建筑,并从外观出发让设计带有更多丰富的能力。

图片

例b. 追随变化 -> 锁定不变

在日新月异、瞬息万变的互联网,很多企业和产品都在努力拥抱、追随变化,但很少有人去思考什么是不变的。Amazon(亚马逊)创始人Devin Beverage在亚马逊创立之初就选择思考未来十年,什么是不变的,并得出了三件极其普通但是消费者最核心在意、不会变化的三件事情:无限选择,最低价格,快速配送。在用户的底层需求上出发,并且长期、持续地投入让亚马逊成长为现在的头部企业,支持经典的包括支持自营&第三方卖家平台(Marketplace)、开放给消费者的比价工具、Prime会员两日达、影视服务等开创性产品设计。

图片

  • 状态(过程)逆向 | 改变现在的状态,如正变负,进变退、动变静、硬变软等等,获得创新。

例a. 人在路上跑动 -> 跑步机跑道带动

过去跑步都是人在道路上跑动锻炼身体,人动路不动。但在艳阳天、雨天等天气下在室外的环境就会不适合跑步运动。跑步机的诞生就让用户可以随时在室内环境中舒适、不占空间地进行运动,让“地”动起来,人在原地跑动。不但可以调节跑步机跑带的角度速度等模拟各类环境,还可以监控记录用户的跑动、健康状态,一举多得。

图片

例b. 人去商店购物堂食 -> 外卖快递送上门

过去的购物体验基本都依赖用户到店进行。但这样商店能辐射的客户范围会相对狭小、用户也必须出行才能购物和享用美食。比起提升到店体验,支持送货上门,让用户足不出户体验到购物的乐趣和便捷。不但让顾客可以享受到更远距离、甚至海外的商品,商家同时可以辐射更远距离的顾客,也不用依赖实体门店进行销售。

图片

 

策略3.  多问”如果”, What if… 

多问些异想天开的问题,别害怕天马行空的发散。我们总是可以把解题思路再聚焦到一个盒子,所以不用最初就把盖子盖上。阿尔伯特•爱因斯坦甚至说过:“如果一开始这个想法不荒谬,那么它就没有希望了。” 在发散的过程中要敢于想象发散,才能带来突破式创新。当我们想要解决问题的时候可以首先大胆发问、设想出“如果”的场景后,再去考虑实现该场景所需要用到的技术;也可以从技术出发,畅想落地场景的“如果“。

图片

对于市面上一些带有亮点的产品,我们也可以倒推去思考当初设计者问出的“如果”是什么。这几年全球都在疫情的不断反复中挣扎,我们可以以远程工作场景为例,来思考一些“如果”。

例. 远程协作

  • 发散:如果我们远隔万里还能面对面、身处一个空间工作交流…

如果远程状态下我们还可以像在办公室一样一起查看模型…

如果在查看模型的基础上我们还可以调整、比对修改方案,及时看到反馈…

  • 结果:空间感知设计评审

Microsoft Mesh使人们能够与全息状态联系,跨空间共享,并从世界上任何地方进行协作。通过为组织引入支持 Mesh 的混合现实体验,可以增强虚拟会议、进行虚拟设计会话、远程帮助他人以及举办沉浸式虚拟会议,从而大幅提高工作效率。

Mesh通过允许用户使用任何设备在任何位置加入任何位置来增强 3D 设计评审。无论是物理存在还是全息,同事都可以实时查看和批注 3D 模型。所有内容都在设计会话之间持续存在,因此团队可以从他们中断的地方快速开始交流理解,激发创造力。

图片

例. 远程培训和维护

  • 发散:如果维修人员不能上门工作,是否有人能远程教学我修理电器…

如果维修人员可以远程修理我的电器就好了…

如果他们能看到我看到的内容,完全基于我的视角指导我…

如果还能在我的视觉标记、说明、演示操作方法…

如果在工业界专业领域,也能这样进行教学、监督、指导…

  • 果:远程培训和学习

Hololens利用AR技术进行远程培训,特别是关于手术、设备维护和交通管制等复杂主题的培训,很难与讲师在同一个房间,并从多个角度查看同一组对象。员工可以通过全息传送、全息共享和可视化效果从任何地方一起学习,有助于提高虚拟培训的效率,同时降低差旅和物流成本。

图片

 

三、激进创新决策 / 策略三则

图片

Warren Bennis说,“创新—任何新想法—根据定义,一开始都不会被接受。在创新被组织接受和内化之前,需要反复尝试、无休止的演示、单调的排练。这需要勇敢的耐心。”激进式创新需要经过的等待和挑战可能非常漫长,在这个过程中,更需要谨慎地筛选想法和推进。下面的三则方法可以帮助我们在决策中减少试错成本。

 

策略1.  考虑实现时间和所需要的技术系统。

九宫格视窗可以帮助进一步决策,将创意灵感在“系统结构”和“实现时间”两个维度进行排列选择,之后根据需求的资源和达成所需时间进行选择和规划。突破式的创新往往需要大量的时间来完善技术和系统,所以在筛选想法的过程中结合这两个因素,可以保证持续性的创新。

图片

例. Netflix播放创新

现在我们熟知的Netflix网飞是一家会员订阅制的流媒体播放平台。

  • DVD及蓝光租赁提供商

最初在1997年刚成立时,Netflix曾经是一家在线DVD及蓝光租赁提供商。当时DVD技术刚诞生,轻质的材料代替了原本笨重的VHS电影格式存储,让邮寄DVD成为了可能。Netflix创新地使用线上下单、往返邮寄的租赁模式,让用户通过免费快递信封租赁及归还Netflix库存的大量影片实体光盘,并以此打败了线下租赁连锁店百视达。

  • 付费订阅流媒体

2006年在线点播技术兴起,随着新技术的出现Netflix 转向通过互联网流式传输视频,提供更广泛的内容选择,并且可以无限观看、点播、低价,高质量的影视内容,并最终吸引了对手Blockbuster 的核心客户。Netflix的付费订阅模式和Apple的iTune下载、Youtube的免费模式成为当时最热门的三个细分市场。

Netflix的创新帮助他们在市场上站稳脚跟并不断突破,但如果在1997年Neflix就把流媒体视频作为目标进行创新、不考虑当时的现实技术和研发时长,那公司可能在漫长的科技发展等待中生存,也就没有后来的故事了。所以对于突破性的创意,按照时间维度、技术实现给出逐步创新的节奏,通常能更好地帮助产品持续创新。

图片

 

策略2.  考虑可推动性&可实现性

如果你的创意需要在大公司里进行落地和推进,可以使用“传播速度和可实现性”矩阵逐步选择,第一步聚焦适应速度和传播速度,将决策者对产品的影响也放入考察。第二步,审查可实现性和财务可行性,之后做出相应选择和推动。

图片

这个矩阵也可以用于对外部环境的判断,在第一步骤中考虑想法在文化、政治、地缘等因素下的适应和传播速度,在第二步骤中考虑市场技术或包容度是否能支持该想法的推动。

例. 出行产品的本地化决策

以出行领域的产品设计为例,我们可以看看在这个领域里一些创新决策考虑。我们熟悉的Uber,滴滴等打车平台通过利用空闲的私家车来接送乘客,降低了打车花费、难度和空闲汽车的利用率,颠覆了原本的出租车打车市场。而在决策想法时,这类出行产品需要考虑当地的具体交通、运输工具、出行状态等现实因素进行推送。

  • UberEats在美国部分城市用汽车送外卖

Uber优步是起源美国的打车平台,2016年该品牌在美国本土开启外卖业务。当时中国已经成熟的外卖业务主要是由骑手骑电瓶车来完成外卖服务,但在美国一些城市自行车作为工具的出行道路十分有限,人们居住的距离也相对遥远。所以Uber从他们已有的打车系统上汲取了思路,在这些城市让司机用汽车送外卖解决了路程遥远的问题,同时让他们可以有机结合接送乘客和接送外卖的订单,系统规划路线后不但提高效率,也让司机增加了收益。

  • Gojek在印尼用摩托车送乘客

2015年,当来自美国的Uber和来自新加坡的打车平台Grab在印尼打得火热、且都使用出租车和私家车作为接送乘客的交通工具时,印尼市场的Gojek则聚焦印尼的国情,把打车平台的思路运用在打摩的上,规范化摩的市场。在交通严重拥挤的印尼,摩的的快速穿梭远比汽车出行更适合本土,这让Gojak成为了印尼的第一大出行平台,并在后来拓展出庞大的本地生活产品体系。

图片

 

策略3.   小心鸿沟

“如果解决方案意味着与他们习惯接受的标准有太大的偏离,那么成年公众的口味不一定准备好接受符合他们要求的合乎逻辑的解决方案。” ——Raymond Loewy,著名的可口可乐瓶、壳牌石油标志背后的工业设计师这样说。

如果你的创意需要很多解释,大量的培训和“帮助”功能,那么这样的设计可能过于先进或复杂,不易被大众理解。产品创意在初期会辐射到的创新者、早期使用者与普通使用大众间可能存在着差距,在一些案例中,早期使用者觉得有趣认可的解决方案并不被大众所买单,所以在选择创意和推进过程中,设计师也要考虑这种差距。

图片

例. Airbnb如何更好地衔接早期大众

Airbnb将寻求经济实惠住宿地点的旅行者与想要租房或备用房间的人联系起来,这个想法现在已经被大众熟悉。但在2009年业务的第一年,这个创意是非常具有创新性的,尚不为大众熟知。

  • 好创意却不得市场认可

当时虽然早期使用者的反馈非常好,但团队仍然面临着严峻的用户增长和收入挑战,甚至一度每周只赚200美元。为什么这样一个对租客和出租者都互惠互利的创新,却不能在市场上得到良好的反馈呢?一天下午,团队正在与Paul Graham一起思考纽约市的搜索结果,试图弄清楚为什么他们增长。Paul Graham给出了一个简单的建议:前往纽约,租一台相机,花一些时间与客户一起列出他们的房产,并用美丽的高分辨率照片取代业余摄影。因此,团队成员飞往纽约,与Airbnb在网站上列出房产的客户会面、拍摄高质量照片。结果收入迅速增加了100%(400美元)。

  • 照片减少沟通鸿沟

究其原因,其实是虽然当时Airbnb的想法已经在市场上独具突破性,但团队没有考虑到早期使用者和早期大众之间的差距。早期使用者往往乐于尝试新事物且有很强的需求(特别体验、更低成本出行等),而早期大众会和他们现有的酒店体验进行比较,安全、正规、优质、温馨的入住体验是他们的强需求,那些非高清、非精美照片很难在第一印象上说服早起大众这些品质。弥补上这个预期差距后,也就有更多的用户愿意尝试了。在后续的迭代中,Airbnb也也在系统改进上不断强化安全、正规,更好地满足用户。

图片

 

结语

激进式创新往往依赖团队基于用户需求、市场、技术等多维度内容的理解。在创新过程中,设计师更多了解相关领域和创意方法就能更有益启迪想法。希望本文激进篇、上文渐进篇的设计策略可以帮助设计师们更好地创新发散。

创新思维可以被学习累积,设计师可以保持多看多思考的习惯,从其他优秀的设计和产品上反推创意思路。设计创新时要相信推进的过程,如果对题目感到无从下手,相比纠结现有思路是不是最优解,不如用文中的方法把想法全部写下来并原型尝试。许多时候我们离优秀的想法只是一步之遥,也许转个弯就柳暗花明了。

 

参考:部分策略启发/提炼自以下著作和文章:
  1. 《Creative Strategies》by Fridolin Beisert (Author), Jessie Kawata (Artist)
  2. 《The Design Thinking Playbook: Mindful Digital Transformation of Teams, Products, Services, Businesses and Ecosystems》Michael Lewrick(Author),Nadia Langensand(Artist)
  3. 《Zero to One: Notes on Startups, or How to Build the Future》by Peter Thiel, Blake Masters
  4. 《Thinking, Fast and Slow》Daniel Kahneman
  5. 《Cross the Chasm》Geoffrey A. Moore
  6. 《The Innovator‘s Dilemma》Clayton M. Christensen
  7. 《Lean Startup》Eric Ries
  8. What are 5 Whys? | Interaction Design Foundation (IxDF)
  9. https://cwodtke.medium.com/how-i-stopped-worrying-and-learned-to-love-design-thinking-f1142bab60e8
  10. Types of Innovation – The Ultimate Guide with Definitions and Examples
  11. The Design Process Simplifed – Design Sojourn
  12. https://medium.com/user-experience-design-1/10-design-principles-every-designer-should-know-a03e12f8deca
  13. https://blog.prototypr.io/shaping-user-behaviour-is-better-than-changing-them-47997f36e71
  14. Airbnb 2021 Release: 100+ innovations and upgrades across our entire service
  15. Clipdrop – Copy and Paste reality with AR + ML | Product Hunt
  16. https://dodo-africa.medium.com/how-design-turned-airbnb-from-a-dying-startup-to-a-billion-dollar-business-b7f711e9ef73
  17. https://docs.microsoft.com/zh-cn/mesh/get-started


作者:ISUX设计

转载请注明:学UI网》设计策略|源源不断的创新思路(激进篇)

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


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

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


logo设计除了用首字母,还能怎么做?

seo达人

一、以某物体作为logo图形

如果品牌名刚好是某种物体,或者品牌名中的某个字是一种物体,又或者是品牌名的谐音是某种物体,那么都可以直接把这个物体当作logo图形。当然设计师需要对该图形进行设计,使其变得更美观、更特别、更符合品牌的调性。比如把图形进行简化、规范、抽象化、或者是增加一个记忆点,另外,同行中最好没有其他知名品牌用过该物体作为logo图形。采用此类手法的设计logo的品牌有:苹果、长城汽车、锤子手机、天猫、盒马鲜生等。

图片

▲ apple公司的logo就是一个苹果,但它又不是一个普普通通的苹果,而是一个被咬了一口的苹果,而且在设计上经过精确规范,视觉上符合黄金比例。

图片

▲ 长城汽车的logo是经过一个极度简化的长城烽火台图形。

图片

▲ 锤子科技的logo是一把小巧、精致的地质锤,比起普通的锤子更专业、更具科技感,在设计规范上同样不简单。

图片

▲ 天猫的品牌名中含有一个“猫”字,所以它的logo是一只几何化、且极具特色的黑猫。

图片

▲ 盒马鲜生中的“盒马”其谐音是“”河马,所以其logo图形就是一只可爱的河马。

 

二、象征图形

这种logo图形在表面上与品牌并没有什么联系,而是借用某个被大众比较熟知的、具有某种特定象征意义的图形,来象征该品牌的理念、愿景、产品品质等。使用此类logo设计手法的品牌有:星巴克、劳力士、中国联通、真功夫等。

图片

▲ 星巴克的logo图形取自古希腊神话中海妖-塞壬的形象,她具有非常诱人的歌声,听到她歌声的人都会经不住她的诱惑,星巴克把海妖塞壬的形象作为logo图形,是想表达星巴克的咖啡品质极佳,与塞壬一样具有极大的诱惑力。

图片

▲ 顶级手表品牌劳力士的logo是一个皇冠,展现了劳力士在制表业中的帝王之气,也定位了劳力士在钟表行业的王者地位。

图片

▲ 中国联通的logo灵感来源于中国传统元素:中国结,具有连接、团结、与消费者心心相通等寓意。

图片

▲ 快餐品牌真功夫的logo图形为一个酷似李小龙的插画人物,象征着该品牌的品质过硬以及中国特色。

 

三、用一种动物作为logo

国内的互联网品牌特别喜欢用动物作为品牌的logo,很重要的一个原因就是方便打造品牌IP,动物IP可以有效拉近品牌与消费者之间的距离,以及丰富广告传播的手段。另外,使用动物做logo也更能方便消费者记忆。当然,品牌方选择的动物最好与品牌的行业、气质比较吻合。使用此类logo设计手法的品牌有:京东、苏宁易购、携程旅游、瑞幸咖啡等。图片

▲ 京东的logo是一只小狗,狗的特点是是忠诚、温驯,符合服务行业的特性。

图片

▲ 苏宁易购的logo是一只狮子,狮子是草原之王,苏宁易购希望通过狮子图形来表达自己想做大做强的野心。

图片

▲ 携程网的logo是一条海豚,海豚是海洋动物,与旅游行业比较吻合。

图片

▲ 瑞幸咖啡的logo是一只梅花鹿,该品牌主要针对年轻白领,梅花鹿精致而优雅,符合瑞幸咖啡的品牌调性。

 

四、抽象图形

即设计一个在气质上、造型上符合品牌精神、调性、行业属性的抽象图形,以此来作为logo,抽象图形比起具象的图形具有更广泛的包容性。使用此类logo设计手法的品牌有:耐克、英国石油、奔驰、华为等。

图片

▲ 耐克的logo看似一把勾,但勾与运动品牌能有啥关系呢?实际上它是一个物体快速运动出来的轨迹,感觉是“嗖地一下就不见了”,速度极快。也有人说这是翅膀的造型,你看,抽象的图形会给受众很大的想象空间,而这个图形是否优秀,取决于它是否总能引导人们往正面的、跟品牌相关的方向联想。

图片

▲ 这个传说中最贵的标志,是英国石油的logo,被称为太阳花,寓意生机勃勃、永不凋零、照耀世界。

图片

▲ 奔驰的logo是一个三叉星图形,又似汽车的方向盘,象征着汽车行业以及征服海、陆、空的愿景。

图片

▲ 华为的logo像一个光芒四射的太阳,其实也像一朵绽开的花,寓意华为多元化发展,以及走向世界的决心。

 

五、中文结合图形

既然是中国品牌,所以直接用中文来做logo设计自然是天经地义的,这种logo的关联性比用品牌首字母更强,通常为用品牌名中的一个字或两个字与品牌相关的图形结合。使用此类logo设计手法的品牌有:北京冬奥会、中国美院、广州、广州国际品牌节等等。

图片

▲ 北京冬奥会的logo采用“冬”字与滑雪运动员的图形结合。

图片

▲ 中国美院的logo采用“国美”二字与印章图形结合。

图片

▲ 广州城市logo采用“广州”二字与广州塔图形结合。

图片

▲ 广州国际品牌节的logo采用“广品”二字与广州塔相结合。

 

六、把品牌名直译为图形

有些品牌名是一个动词或者名词,通过其字面意思就能把它图形化,这种图形在表面上会与品牌有明显的关联,如同要想有内在的关联,还是得在设计风格和设计调性上下功夫。使用此类logo设计手法的品牌有:一加手机、三菱汽车、方圆地产、红点奖。

图片

▲ 一加手机的logo图形为阿拉伯数字1与一个加号的组合。

图片

▲三菱汽车的logo为三个菱形。

图片

▲方圆地产的logo为一个方形与圆形的组合。

图片

▲ 红点奖的logo为一个红色的圆球。

 

七、用主打产品或主要服务作为logo

有些品牌有主打的产品,或者聚焦于某个行业,那么也挺适合用用能代表主要产品或主要服务的图形作为logo,前提是也要做出个性。这样可以让消费者一目了然,比如汉堡王、喜茶、QQ音乐等就是这么做的。

图片

▲ 汉堡王使用其主打产品汉堡作为logo图形,同时也呼应了品牌名,这个logo在经过去年的改版升级后,变得非常简约,具有很强的识别性和延展性。

图片

▲ 喜茶的logo为一个人正在喝奶茶。

图片

▲ QQ音乐的logo为一个音乐符号。

 

图片

怎么样?思路是不是打开了很多,所以,以后别只用首字母这一种方式设计logo了,多尝试一下其他的方式,或许会有更多、更合适的解决方案。

 


作者:葱爷


转载请注明:学UI网》logo设计除了用首字母,还能怎么做?

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


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

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


产品分析怎么做

博博

分析产品,也是难到很多 UI 设计师的问题。很多人认为这属于产品经理的工作,但实际上 UI 设计师也离不开使用产品分析的技能来处理日常的工作,以及提升自己的产出质量。


产品的分析其实远远没有想象中那么玄乎,这篇文章就要教会大家如何通过正确的步骤完成对产品的分析。


以下为正文。


undefined



产品分析,顾名思义,就是对某互联网产品,进行系统的、多纬度的分析,并最终完成一份逻辑清晰,符合客观事实的商业报告。


为什么我们需要这个报告?那是因为对于我们工作的决策来说,获取越多有效的参考信息,就越能帮助我们做出正确的选择。


举个例子,如果我准备做一款针对定制奶茶外卖的 APP,那么就要了解这样的 APP 产品通常有哪些模块和功能,通过 APP 下单的流程是什么样的,以及用户更喜欢什么样的设计或者交互。这时候,光靠我自己脑补是没用的,我得分析同行或者相关外卖 APP 产品,才能得到明确的结论,然后作为依据开始设计我自己的产品。


或者,我们在面试或者客户谈判之前,有认真的分析过对方的产品,那么在沟通过程中就可以让我们的处境更有利,能进行更有质量的沟通和探讨。


产品分析的好处很多,不仅能帮助我们解决当前的问题,也可以帮助设计师锻炼自己的逻辑思维能力,产品能力以及业务能力,是升职加薪的必备技能。




undefined



接下来,可能很多同学已经忍不住摩拳擦掌,想要知道产品分析应该怎么开始了,但别急,我要先讲讲一个被很多人忽略,以及在众多讲解文章中都没有提及的东西,就是产品分析的 —— 目标。


前面提到,产品分析最后要以商业报告的形式呈现,而一份合格商业报告是要提供 “明确的结论” 的。如果这份报告指向性不清晰,洋洋洒洒写了一百页,像流水帐一样把所有能罗列的分析内容全都一股脑做进去,那对于自己和看的人都是一场灾难。因为这样的报告没有重点,缺乏阅读性。


开始分析前,我们要确定一个明确的目标,即想要通过这份报告获得哪些信息。在获取的内容上,往往不会只想得到一个结果,很可能会是复数形式,所以我们需要列一个表格,将它们罗列出来。

比如我们再用想做奶茶外卖服务的APP为出发点,那么我们分析美团或者饿了么的产品,定了下面这些目标:

undefined


可以看出,对于产品、交互层面的分析明显要大于设计的权重,根据 MVP 原则,第一个版本应该要得出的是一个流程可以跑通的产品,在前期过分关注设计和细节并不是首要任务。


所以,在不同的场景、时期、战略上,产品分析的侧重点就不同,而且留给我们的分析时间也不可能足够充足的,所以也要将精力集中在最重要的事情上,提升效率,才可以真正解决问题。




undefined



整个产品分析的内容,可以划分成多个纬度和若干的细节,我用下面这个思维导图表示出来。

undefined


这样的图表让人望而生畏,如果每一部分我们都认真做分析,那么势必得写出非常多的内容不可,所以才有了前面所说的要规划分析的目标,在实际执行过程中有很多分析项是不需要提及的。


再者,产品分析中还包竞品分析、运营分析、交互分析、视觉分析、文案分析等分支,它们各有侧重和取舍,所以不要为此而感到恐慌。


下面,我们分别对这些内容进行简单的说明。



1.产品的基本信息


分析任何产品的第一步,就是对它有一个大致的认识,首先就是去下载和体验它,并且能用一句话来概括它的功能,然后通过该功能解决了用户什么样的需求。


然后就是它所处的行业目前的状态,是否规模连年上升,有什么重量级新闻或者革新,未来的发展趋势是什么。如果我们不了解的情况下,可以多在百度、知乎、新闻门户上进行搜索和了解


尽可能收集可信的数据报告或者图表,便于信息的整理。

undefined


对于一些新上线不太久的应用,通常会带有非常明显的初创团队烙印,可能有一些匪夷所思的交互或者功能,这时候在应用上浪费时间干想是没有用的,可以花点时间在网上找找创始成员的履历,会对我们认识应用有更大的帮助。比如拼多多创始人在上线前有 “拼好货” 的多年积累,产品模式是经过检验的产物,有大量相似的特征。

undefined


最后,还可以对产品当前的处境做简单的收集,有没有强大的外部竞争,它们各自在市场中占比的数据,以及用户在不同商店、社交平台中对其的评价。这可以帮助我们对该产品的竞争力和商誉做出初步的认识。



2.用户研究


用户研究这个名词出现得非常频繁,想不看见都难,它是专业产品团队必备的项目准备工作。用户研究的方式和产出物多种多样,通常我们会建立清晰的目标画像找出目标用户,然后对他们进行访谈、调研,设计可用性测试、眼动测试等等,帮助我们更好的推出可以被用户喜爱的产品。


但在我们研究外部产品的时候,往往不需要将它想得太复杂(除非是对直接竞争对手的分析),否则只需要整理该产品的目标用户画像即可。


用户画像即总结核心用户多个纬度的特征,主要分成三个部分。


生理主要就是用户的年龄、性别、身高或体重等特性,外在的则是诸如学历、工作履历、所处城市、薪资状况等可以直接收集的内容,内在的则是性格、爱好、行为(喜好女装之类的……)等等和关联主观特征的内容。


根据我们的需要对这些属性进行筛选,就可以制作几个标准的用户画像卡片出来,比如下方这种。

undefined


3.用户体验要素


因为这两年对于产品、体验、设计的专业分析需求高涨,所以 《用户体验要素》 中的五要素就成为大家喜闻乐见的分析模型,它给我们提供了明确的分析步骤和方向,易于上手。


undefined


战略层:


战略层指的是产品在宏观、商业层面上的的考虑,需要我们自己的判断,因为如果不是内部人员,那么对于一款产品的战略层思考是无法做到绝对准确的。虽然网上可以搜索到很多商业分析和企业 PR 稿,但是这些内容的使用往往是具有欺骗性的,是基于运营需求抛给大众的障眼法。


比如我之前分析的一篇关于瑞幸咖啡的总结(个人总结):

https://www.zhihu.com/question/306547560/answer/559771838


所以,报告中没有充足的把握时就不要在这个问题上侃侃而谈,只需要回答,一款什么样的产品才可以满足用户的需求获得商业上的成功。


范围层:


战略层可以获得的信息通常是一个比较宏观、含糊的概念,所以,我们要来制定更具体的方案,明确产品应该包含那些功能和服务,规划产品功能要覆盖的范围。


比如提供奶茶的外卖服务 APP,初期我们的功能包含选择店铺商品、加入购物车、交易结算系统,但不包含资讯推送、晒单社区等功能。


所以,范围层就是将该产品提供的最重要的服务、产品内容罗列出来。


结构层:


这就是一个产品的功能或者信息结构,通常我们可以用思维导图或者树状图的方式进行梳理。最初级的方法是通过对可视页面的层级做梳理,整理出产品的页面层级结构。


而更好的方式,是根据产品的几个核心功能建立产品流程图,将操作的结构与逻辑展示出来,绘制这个图表的过程中可以更好的加深我们对产品的理解。



框架层:


框架层即页面的布局结构,以及组件层面的交互和展示,一般来说,可以研究产品的主要流程页面,每个页面的布局和信息展示是否合理,操作是否顺畅。


如果觉得没法很好的理解,书中建议是通过 “界面设计”、“导航设计”、“信息设计” 三个角度切入,但这样操作性太差。建议在分析这个界面的时候,只要关注内容从上到下的布局内容有没有契合主题,并且重要的组件中,字段权重能不能很好的被表现出来即可。


比如我们看下面飞猪的航班页面,页面模块依次是城市、日期、班次列表、排序筛选。在航班列表中,最被用户关注的价格信息得到凸显(证明买机票的用户对价格更敏感),时间作为次级权重元素相对被弱化但依旧易于识别。



表现层:


这里就是着重分析产品设计本身的特点了,相对就容易了不少,只要分析配色的方案,设计的一致性,捕捉动效和情感化设计的细节即可。

就不展开更多的说明了。


用户体验五要素的分析一样不是散乱的抛出结果而已,如果按原书的方法做分析,肯定也会作出非常复杂的报告,所以我再提炼一次用户体验分析的思路。


通过分析产品的商业目标,进入划分功能和服务的范围,之后根据核心的服务总结主要操作流程,并在最后的交互、布局、设计的几个方向来判断它们是否有益于核心流程,能被用户接受。然后得出结论,如果有益,那么产品符合商业目标的条件,如果没有,则难以达成。



4.盈利模式


有一些产品本身就有购买要素,或者有付费的项目,那么对它作出分析是非常重要的。因为任何商业产品最终的目的都是为了盈利,所以多数产品会在这方面下足功夫。


如果是电商、外卖、快递这类直接发生交易的应用类型,只要分析产品本身的交流流程即可,相对比较直观。


如果是类似社交、资讯、工具类的应用,往往在盈利点上会比较隐晦,并通常包含较多零散的盈利来源,比如不同位置的广告位,订阅服务,付费道具等等。


我们要做的就是把这些盈利来源全部罗列下来,如果知道价格也对应填写上去即可。



5.运营策略


如果不是以工具为导向的产品,通常就有比较重的日常运营。包括用户运营、社区运营、媒体运营、内容运营和活动运营。


有不少产品的迭代是以运营为导向的,我们直接通过产品功能本身去分析它往往得不到理想的结果,所以需要从运营的角度进行切入。


比如每日优鲜这样的生鲜电商,如果仔细研究用过它的服务,就会发现这款产品本身交易的流程乏善可陈,但是出彩的地方是在于层出不穷的运营策略,无论是选品的内容运营或者活动运营上,而这些运营方式才是推动产品的改动和优化的主要因素。


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



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

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



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



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

如何提升我们的审美

博博

新手和初学者总会错误的将审美的能力托付给天赋或是科班教育,作为自己审美水平低下的借口。如果这么想,那肯定不会为自己带来任何改善。


今天,我要写一些不一样的东西出来。


按我一贯的风格,我不喜欢在入门问题上高开高走,一开始就讨论比较概念或者艺术性的问题,就讲讲在最初级月薪不过万,连自己工作设计类型相关的作品都没办法评判好坏的情况下,展开讨论。


所以,我要写一篇接地气的提高审美的回答。


关于比较


审美是一个宏大的话题,无论是文学、影视、视觉、时尚等我们都可以审视它们的 “美”。不同领域的 “美” 有不同的形式,不同的立场,不同的角度,不同的原则。


在这里,我们不谈具体某个领域审美的规则和方式,我们来讲讲提升审美的具体做法。


讲一个例子,在国内,我们普遍觉得女生在对穿衣打扮的审美上比男生更优,对于其它经过设计的事物所展现的审美也比男生更好。这种差别在高中时期便逐渐放大,在大学中就能明显得感觉出来这一点。


这是由于基因天赋论导致的吗?


是也不是。女生爱美这点是一个既成的事实,有比较大的先天因素,而因为对美好事物的追求比男生更强烈,所以在审美上整体大于男性。


但大家要注意,这个因果关系的模型太过简陋,我们要进一步来分析为什么对美好事物的追求就能导致审美上的差异,这就是我们提升审美的关键,先从衣品讲起。



原因1:


基于对美的追求,女生往往会花更多的时间在穿衣打扮上,也就意味着要购物。无论是在商场还是淘宝,女生逛起来的热情与时长都远远大于男生,这造成了女生在查看数量上也远远大于男生。



这就和很多设计前辈告诉你要 “多看” 的做法是一样的,通过量变引起质变,只要你看的够多,审美自然就可以提升了。


这话说的颇有道理,但依旧在推理上站不住脚。因为,量变为什么一定就能产生质变?这个变化的逻辑依据是什么?在青铜段位里打了一万盘,也不代表一定能打进最强王者不是。


所以,这就是要引入第二个原因,关于对比。



原因2:


女生逛街能逛这么久,往往在除了看以外,还会做一件事,就是大量的试衣服(此处被我言中的女性同学可以点个赞让我看见你们的双手),经常抱了一整箩筐的衣服进试衣间,在里面对着镜子鼓捣摆 Pose 大半个小时,然后才能挑选一两件自己喜欢的出来,或者干脆一件也不要。


嗯,不要问我是怎么知道的……


在这个过程里,就发生了提升审美中最重要的一环 —— 对比。通过大量的对比,来找出好看的、高级的、适合自己的衣服。也因为对比,女生们就通过实践来了解到,什么样的衣服是好看的,什么样的是丑的不适合自己的。


这个过程实际上收窄了选择的范围,比如一个个子比较高挑五官比较立体的女生,是很难在比较过后还会选择那些可爱、少女、小鸟依人的设计。很可能会偏向运动、男友、中性等风格。


而在有了具体的偏向以后,她们依旧会深入到这个范围,继续观察、尝试、对比,然后再次提升对这些东西的理解和审美。


所以,看吧,审美的提升第一步就是这么简单,通过大量的观察,然后对比和筛选,就能非常直接的提升我们的审美,这个提升的过程完全依靠的是人的主观能动性。


日常生活中我们遇到的绝大多数某些人审美比自己更好的人,都是因为他们在某些方面看过的,比较的比我们更多,而不是依靠天赋的加持,这个思路落实到创作中也一样。


当然,我丝毫不怀疑人类的历史长河里,有极少数人打娘胎里就因为染色体中某些基因片段神秘的律动,而获得了独特的审美与创作天赋,但那始终是一个可以忽略的概率。审美的提升是个人主动的行为,不要祈祷上帝在你身上投的骰子能得到你要的结果。



即使抛开这群有 “天赋” 的神仙,也依旧还有很多第二梯队、第三梯队的老法师们通过奋斗逼的经历功成名就不是。


所以别这么自恋总要搬达芬奇、毕加索、梵高等人举例,每次忍不住想要把锅甩给天赋前,就问问自己钥匙配嘛?


什么?您配?


您配几把……



具体案例


不正经到此为止,正经脸……


既然说了那么多关于比较的问题,空口白话难以令人信服,所谓没图我说个……锤子。因为很多新人都会说,你觉得大多数设计案例看起来都挺好,觉得挑不出什么毛病啊。


所以,下面我挑了几个与设计有关的方向,并找了一些案例出来,你们来看看同类型中,哪一张图是最优的。


而没被选上的那些,对于你选出来的图而言,它们当然都是有 “问题的”。



人像摄影




美食摄影



室内设计



产品设计




海报设计





管理界面





UI APP 界面





小结


审美提升的第一步,就是从对比开始,因为这个世界对所有事物的评判,都有不同方向的两个极端。善恶、美丑、高矮、胖瘦,是对立而相互依存。


就像左拉的《陪衬人》中所讲的:


“……另一个却总是奇丑无比,丑得刺眼,使路人不禁要看她几眼,并且拿她和她的同伴作个比较。要知道,你上了圈套。那个丑女子要是独自走在街上,会吓你一跳;那个相貌平常的,会被你毫不在意地忽略过去。但当她们结伴而行时,一个人的丑就提高了另一个人的美。”


之前我们讲了关于审美提升的第一步对比,但是我们留了一个疑问,为什么依靠对比我们可以提升,或者只靠对比我们就一定可以提升审美嘛?审美提升起来就如此容易?


当然不是!


对比的过程只是表象,我们还要追究深层次的原因,那就是“推理”。


在系统性提升审美的道路上,最大的敌人就是——主观感受。因为无论我怎么解释和审美提升相关的方法,总有人会觉得它就是依靠个人审美,不同人审美不一样,总能找出有的人就喜欢网红脸但看不上汤唯或者高圆圆的案例。


没错,每个人都有自己的审美,无论喜欢什么稀奇古怪的东西都可以,存在即合理。但是,设计师该拥有的审美是不能这么随意的,因为作为专业人士,我们的审美就要符合 “专业” 的要求,即通过客观标准来评价事物的内在价值。


比如茶、酒、咖啡这类饮品,都已经拥有非常成熟的市场,会根据产品的价值形成对应的价格。而有趣的是,这些饮品都不是甜的,都不符合我们本能的喜好。所以,还有很多人不接受它们,只喜欢带有甜味的饮料。这种个人的选择上,任何人都可以偏爱一杯 1 元不到的雀巢的速溶拿铁,厌弃红标瑰夏冰滴,但无论你怎么想,也无法改变它们价值不对等的事实,瑰夏手冲有远远超出速溶的口感和品质。


但超出的部分在哪里?答不答得上来,就是内行和外行的区别。


内行经过专业的训练可以品尝出其中蕴含的风味、口感,解释它们与产地气候的联系,储藏运输的条件,以及冲制过程的步骤。但外行往往只能给出好喝、甘甜、顺滑、难喝、太苦之类零碎、没有体系的评价。


如果设计师对设计相关的作品只能做到和外行一样的水平,那么他也只能是设计师中的外行,并且缺乏成为优秀设计师的必要基础。


所以,接下来我们来探究一下,作品的评价为什么重要!


丹尼尔·卡尼曼的畅销书《思考快与慢》中,将我们的思考方式简单的划分成了两个部分,用了非常简单粗暴的 “系统1”、“系统2” 命名。简单概括它们的含义,就是系统 1 是联想式思维,系统2是规则式思维,也可以看成是直觉与慎思的区别。


先说系统1,直觉是我们大脑对日常接受信息简化处理的产物,我们的大脑就像处理器一样,每天都要面对海量的信息通过视觉、味觉等五感导入,如果它没有任何区别的对这些内容进行深度、缜密的分析,那么它一定会超负荷运转并最终自我毁灭。



所以生物的演化,让我们的大脑进化出了一套可以对信息进行过滤和简化的系统,格式塔心理学中关于视觉对物体简化、完形的理论,也是由其产生,这就是我们对很多事物下意识反应的来源。比如在走路的过程中,看见一辆自行车直挺挺的从远处像你冲过来,那么你会马上感觉到危险并往某个方向规避,整个过程会在不到1秒的时间内完成。


而系统2,就是对事物进行逻辑推导的深入思考,如果用它来处理危险的事件,那么结果可能是我们先判断这辆自行车行驶的轨迹并得出它前进的方向与我站立的位置相交,并且它的时速约为 40km, 在撞到我的时间还有3S,如果以这种速度撞在我们身上,大概率会发生……



“BONG~”


那就不用想可能会发生什么事情,你已经被撞飞了,可以直接得到结果。类似的事情还有很多,无论是对与危险的,还是日常事务的作用,系统1都发挥出了极其重要的作用。也因为它的有效,而导致我们对它依赖过度。所以,很多人在对于美丑的审视上只依靠系统 1 来完成,而不会深入去思考各中原由。


系统 1 对美丑的判断,是个人的,但它并没有 “审” 的过程,专业的分析也就无从谈起。斯洛曼和费恩巴赫所著的 《知识的错觉》 里提到:


"直觉给予我们一个简化的、粗略的,而且通常足够好的分析,这让我们产生错觉,自以为所知甚广。但是当我们慎思时,我们才意识到事物实际上何其复杂,我们真的只是略知皮毛。"


审美和品尝美酒、咖啡一样,需要通过了解专业的知识,培养系统的分析方式进行刻意练习,逐渐摆脱依靠我们直觉做出的不可靠的判断。


因为任何优秀的设计作品,在创作过程中都不可能是随性而为的,都是经过创作者深思熟虑后的产物,我们对优秀作品的评价,就是通过专业的知识对其创作逻辑进行推导,哪里有亮点,哪些是败笔,都是清晰可见的。



它不仅帮助我们判断别人作品的优劣,也可以分析我们自己作品的不足,从而得到改进的思路。所以为什么说审美要先于实践,如果连什么是好的都不了解,自己设计出来的东西都不知道如何评价,又谈何进步?


在我自己的教学经验中,这个问题所表现出来的差异就很有意思。如有一些审美能力较差的学生第一次设计 Banner ,花了非常多精力和时间,自我感觉不错,但是作品质量极差,会在得到否定的评价以后表示诧异和茫然,因为他们已经预感应该得到赞美与肯定。而审美较好的学生则是在完成作业以后充分的发现自己设计的东西和较好的作品之间的差距,那么他希望在我这里获取的,就是如何缩小这种差距的具体方式,而不是对其作品做出评价,因为他们自己也会觉得作品质量差的没评价的必要。


但不幸的是,在商业视觉设计的领域中,提升我们的专业评价的能力,并不如其它行业一般有固定的流程和教学,按笔者自己长期的经验来看,如果我们盲目的从艺术、设计、心理多个学科的基础理论开始学起,那提升的速度太缓慢,需要的周期太长,而且有非常强烈的挫败感,如果没有好老师的引导,还容易钻牛角尖误入歧途。


所以,第一部分的对比,重要性才能体现出来。我们要通过实践作为基础,来系统性的提升我们的专业审美能力,通过应用推理的能力,抑制我们无所不在的直觉。


前面扯了这么一大堆,都是在纸面上的探讨,不太接地气,只分析一通原因,和你该如何提升审美没太多关系,这是最气人的。所以,最后一部分,我们来讲讲具体实施的做法。

先声明,审美提升是要通过刻意练习的步骤的,谁也不可能只通过区区几篇文章就以为自己已经明白了,所以需要执行下面这个循环步骤:


    • 采集:大量观察和收集作品

    • 对比:留下它们中最好的

    • 分析:寻找优劣差异的原因


开始前,还要解释一件事,就是我们提升审美都要先从某个点开始突破,从你最感兴趣的,或是工作关联度最高的设计类型开始,而不是无差别的乱看。与美术学相关的所有设计中,底层的原则都是近似的,精通一种,就能更容易理解其它种类的作品。



1.采集


观察的来源多种多样,强烈建议初期只使用花瓣即可,不要分心到太多的平台上,选择太多往往不是好事,会增加干扰,让我们疲于奔命,模糊一开始的目标。


例如首先要提升在 APP 方面的审美,我们先在花瓣中创建一个 APP 的画板,然后搜索 APP 相关的关键字,但不需要关注第一页弹出的采集结果,直接查看 “画板” 选项。



画板是别的用户自己整理的采集合集,我们可以通过封面简单筛选出你喜欢的,然后打开它们,浏览里面收集的作品。




然后尽量按自己最高的要求来找到能让自己觉得满意的作品,再将它们 “采集” 到自己创建的画板中,并设定一个数量,比如采集到500张为止。



2.对比:


达到目标的数量就停下来,因为再采集下去能带来的作用已经非常有限了。虽然采集中已经包含了选择和对比的过程,但我们要更进一步,在自己的选出来的作品里进行比较。相信在完成这个步骤以后,你们已经可以明显感觉到最后 100 张收集的质量是远远高于前 100 张的。在罗子雄 TEDX 的演讲中就说过:你回头看三个月前收集的作品,会发现它们都是垃圾……




更极端一点,那就是我们只在挑选的作品中留下最好的十分之一,听起来是不是很刺激。


也就是我们要开始在自己选出来的作品中,你要删掉其中的 450 张作品 (最好有留底),即使当中有一些你非常喜欢,而且它们都是你的劳动果实。但就因为这样,你才会更慎重的进行比较。因为多数人的采集只是走马观花,后面根本就不会看这些东西。


当然,这个过程推荐用 Eagle 或者 花瓣 PRO 客户端,操作起来会更顺手一点。



3.分析:


在上一步操作里,我们会动用我们脑海里所有关于理性的分析方法来解释它们的优劣,并得出结论,虽然这些想法可能很幼稚或漏洞百出,但不要担心,最后一步就是用来解决这个问题的。


我们捉对挑选一些作品出来,在剩下的作品中和已经被你否决掉的作品各选一张,然后将它们排列到一起,对比它们的优缺点,比如下图是我从我自己画板中找出的近期和早期的采集作品。



专业的分析是怎么得出的?当然不像朱熹提出的 “格物致知” 一般盯着它们思考,就能把设计的理论给格出来,这条路是走不通的,所以才有王阳明 “知行合一” 的教诲。


我们要把对比的内容进行细化,把一套作品看成若干细节的合集,明确比较的目标,这样才能得到理想的结果,比如:


    • 字体

    • 配色

    • 布局

    • 配图

    • ……


比如我们挑文字出来分析,这时候局势已经比较明朗了,上侧的设计中文字是能被清晰识别的,在不同的字段类型中字重有对应的调整,主次有序。而下侧的文字应用则缺乏对比,部分文字甚至和背景都无法做出区分,且字重几乎没有变化,使用了多种字体没有整体性,导致最后的阅读感受极差。


同理,你可以再试试分析其它几个细节,是不是简单多了。如果这时候你再觉得手足无措,完全分析不出什么具体的东西怎么办?


学啊!


如对比到配色,我们解释不出为什么右图的配色不行,那就针对配色去了解相关的配色技巧、理论,网上可以搜索的分享就一大堆了,比如关于色彩对比、用色比例等等,将你学到的知识现学现用套进这两张作品中,也就可以很快的得到验证。


后面每出现这样的问题,就现学现卖,不仅可以直接提升我们对作品的理解能力,还能巩固我们学过的理论知识。多分析几组对比,你就会发现对于这类作品的审美和理解已经得到了质的飞跃,这时候,你就可以以留下的这几十张作品作为你接受的下限,去收集新的作品,完成下一次循环。




结尾


对于设计基础审美的提升就解释到这里了,再写下去也没人看了(写不动了)。我们在职业相关的审美提升一定要具有实用性,接地气,目标准确的特点,不要这个阶段跑去听古典,看画展,读诗歌,所以整个回答我都尽量避开这些坑不提。


设计师的专业性首先不是追求审美的极限,而是先提高自己的下限。只有超出自己动手能力的下限,才能让我们拒绝粗制滥造的作品,驱动我们进步。


最后,在同意我前面观点的基础上,大家可以尝试我最后给出的方法,如果你觉得你的审美还提升不上去,那欢迎你们随时找我算账!而只是看完却没有实质行动,那就不要再抱怨自己什么提升上去了。

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

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

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

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


数据可视化

博博

这两年互联网行业在 C 端市场上的增长已经不足以吸引大众和投资者的视线,B 端作为一个新的热点开始被追捧。 

但 B 端是一个泛指,它是由若干面向商业场景的不同细分行业组成。包括云服务、SAAS、PAAS、定制系统、数据可视化、智慧平台、商用 HMI 等等。 

不同 B 端细分行业差距是非常大的,就像游戏 APP UI 和一般软件 APP UI 完全是两种职业一样。每当我们讨论 B 端行业前景,就一定要聚焦到具体的行业类型,否则就没有讨论下去的基础。 

而我们今天重点聚焦的,就是目前声势极大的数据可视化行业。 



这是最近很多同学咨询和关注的领域,也是各大显卡厂商、3D 引擎发布会上的常客。 



各种让人眼花缭乱的图例和技术应用解说,很容易让我们产生未来已经加速向我们走来的 “幻觉”,此时不抓紧时代的机遇投身数字化界面的设计,更待何时? 

但我还是要劝大家别光顾着鸡冻,冷静下来好好分析这些行业和市场状况,当你了解的越多,你就越会发现,这个职业方向和你们想的不太一样…… 

首先,数字可视化领域也是一个比较笼统的行业,它依旧可以拆分出若干细分领域。但我先简单根据视觉展示类型把它们分成两大类,平面展示型和3D展示型。为什么根据这个分而不是商业场景,下面会做进一步解释。 

首先,数据可视化不是用了花哨的 3D 视觉才叫可视化,平面展示类型是绝对不能忽视的一个方向。它的主要应用场景集中在商业 BI ,统计分析工具等。 

比如统计并查看网站、应用、店铺数据的平台。 



这类产品有非常广泛的使用场景和需求,是现代企业和产品运营的基石,它存在的价值是毋庸置疑的。 

而另一类 3D 展示型的细分发展方向,包含展示大屏、数字孪生、智慧项目、商用 HMI 等类型。 



这类项目更多是由技术发展催生而来的 “新需求”,和 5G 的发展是高度相似的。我对这个行业的发展潜力是认可的,但对设计师从事这个行业的总体前景持悲观态度。 

下面,针对真正的数据可视化设计师,我会从下面几个维度展开讨论(唱起反调): 

- 知识门槛 

- 行业特征 

- 团队价值 



数据可视化是对数据信息进行图形化设计的过程,这个行业不是这两年才出现的,而是由来已久。 

从世界上第一个图表的诞生之后,就有无数统计学家和设计师投身到这个领域中,发明和设计出各种精妙绝伦的图形。



数据可视化的重要性不会比任何其它设计行业低,但是,数据可视化重要性的来源,是由数据本身的价值赋予的。因为诠释数据的方式精彩,所以有价值,而不是仅仅是因为你做得好看且花哨。 

更进一步说,就是数据可视化的价值是被统计学赋予的,而统计学是被这个世界真实需要的。 

但很可惜,极少有 B 端设计师会投入精力到统计学的基础知识和应用,这就导致很多设计稿中,连对数据的展示应该用折线还是柱状都分不清。 

或许你依靠经验可以提升对一些基本图表使用的心得,但是,进阶的可视化设计需求就靠几个简单的折线、柱状、饼图就能解决嘛?那下面这些图形应用需要掌握什么? 



复杂的可视化应用场景,不仅需要设计师对统计内容和数据应用有主动地分析,还需要对计算机图形学有一定的掌握。先不说门槛极高的 R 语言应用,但凡涉及到区级以上的地理信息可视化,就一定需要应用 GIS 工具的应用,导出并转化数据包。 



除了 2D 以外,3D 可视化的项目,所需的知识储备就更进一大步。很多新人的认知以为设计师的工作只要用 3D 软件建模并输出就可以,学会 C4D 就可以做可视化项目。

这和以为掌握烤箱的功能就可以做出美味的蛋糕性质是一样的…… 

前面说过,3D 可视化是由技术发展催生出的行业,它的应用受到技术的影响非常大。因为 3D 应用实在是太复杂了,比 2D 图形复杂好几个量级,这就导致设计可以落地的限制远远超出新手的认知。 

常规的 3D 项目,必然要借助相关的图形协议或者引擎。比如新手刚开始都以为的 3D 可视化就是网页中运行 3D 效果,而网页运行 3D 就是借助 WebGL 图形协议实现的。 



由于各种技术和硬件限制,WebGL 的性能是奇差无比的,因为它的图形绘制渲染主要依靠 CPU 来完成,只要项目稍微复杂一点,多边形和图元数量一多,立马就会让电脑变卡(CPU占用量暴涨)。同时,它可以使用的渲染效果、着色器也必然不等同于 3D 软件的高阶渲染插件 OC 或 Redshift。 

因为 WebGL 太弱,目前封闭的可视化项目就转而使用其它的技术解决方案,即虚幻 Unreal 和 Unity。没错,就是你们玩游戏启动画面中显示的那俩引擎。 



换句话说,现在的高端 3D 可视化项目,就是用做游戏的方式做可视化应用,只要在指定设备里安装,就可以调用 GPU 资源,实现更高级复杂的效果。



但是,只要应用了对应的引擎,就必须使用配套软件来完成渲染、动画、交互事件。即通过 C4D 或者 Blender、犀牛等软件完成建模(不同可视化项目应该用的建模软件也不一样),再导入到虚幻或者 Unity 编辑器中进行下一步的操作,然后再和开发进行交付。 



因为 3D 的复杂性,导致独立 3D 可视化项目的开发流程被大幅度拉长,从而让设计师需要掌握的知识面也大大增加。中间每个步骤都充斥着各种屎尿屁的限制,我就不继续展开了。 

3D 可视化设计师,几乎就等同于游戏行业中的技术美术(Technical Artist),因为游戏开发更复杂,分工更明确,技术美术作为设计师和开发之间的桥梁,帮助项目的美术能尽量在技术上被实现。 

而因为可视化项目的建模精度与视觉效果要求不高(对比游戏),这些工作就要由同一个岗位包揽,设计师就没办法回避这些让人绝望的知识信息。 

还有一点对比游戏行业更让人绝望的,就是 3D 可视化实际应用的技术方案是高度碎片化、没有体系的,而且技术迭代周期远比游戏行业短(WebGPU已经在路上了),这在客观上增加了设计师的从业压力(欢迎体验前端开发的压力?)。 

一个专业的可视化设计师知识门槛,是远远高于一般 UI 设计师的。 



当我们研究一个行业的前景时,就是研究它未来的趋势和潜力。数据可视化严格意义来讲并不是完全独立的一个行业或市场,而是其它多个大市场中的某个组成部分。 

如前面提到的数字分析、物联网、工业物联,都是层次更高的商业化市场。这些都是近年来高速发展的热门行业,是带动可视化行业发展的客观依据,我就不一一找公开统计数据佐证了。 

而可视化除了商业场景外,还有个在国内做可视化绕不开的话题 —— 政策。 

如果具体关注过地产、5G、电动车产业的发展历程,就应该明白国家意志的贯彻可以怎样在短时间内催生出市场的高度繁荣(或者泡沫)。 

而政策对于可视化的利好,就在于 “数字政府” 概念的规划中。从几年前开始就兴起的政务数字化转型,到最近国务院发布的 《关于加强数字政府建设的指导意见》,都是中央直接 “指导” 地方发展数字化的指标,是行政意志与力量的体现。 

说更具体点,下面是指导意见中的目标说明,非常直白,大家可以自己体会: 

到2025年,与政府治理能力现代化相适应的数字政府顶层设计更加完善、统筹协调机制更加健全,政府数字化履职能力、安全保障、制度规则、数据资源、平台支撑等数字政府体系框架基本形成,政府履职数字化、智能化水平显著提升,政府决策科学化、社会治理精准化、公共服务高效化取得重要进展,数字政府建设在服务党和国家重大战略、促进经济社会高质量发展、建设人民满意的服务型政府等方面发挥重要作用。 
到2035年,与国家治理体系和治理能力现代化相适应的数字政府体系框架更加成熟完备,整体协同、敏捷高效、智能精准、开放透明、公平普惠的数字政府基本建成,为基本实现社会主义现代化提供有力支撑。 

原文链接: http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm 

正因国情在此,所以这些年 G 可视化项目才如雨后春笋一般涌现。智慧城市、智慧农村、智慧水利、智慧交通、智慧民政等等,都是借助这股东风蓬勃发展。 



所以,商业和政务的迫切需求,催生出一大批可视化服务公司,如 EasyV、ThingJS、观远等。即使头部大厂也生怕错过这个机会,纷纷组建团队进行行业布局。如腾讯云的 Raya Data、阿里云的 DataV、网易的数帆等等,都已经小成气候,初现锋芒。 

市场需求旺盛,规模快速增长,前景理应一片大好!但是…… 

市场总规模的扩张,带给个体的收益却不一定有表面看起来那么理想,尤其是设计师岗位。 

这要先从常规 UI 设计行业说起,UI 设计师工资已经是国内设计行业工资最高的类型之一,从10年前的屌丝行业到今天能和老牌贵族建筑设计叫板,是非常了不起的成就。 



而之所以有这种收入,除了移动互联网爆发以外,最重要的原因就是互联网产品的 “利润率”,可以用非常少量的职员撬动上亿甚至上百亿的利润。 

如王者荣耀 2021 年全年盈利 28 亿美元,接近 200 亿人民币的利润。一款游戏的利润直接达到万科(2021年利润225亿)和中国人保(2021年利润216亿)的水平,他们都是在册员工超过 10W 人的大型企业,也是国内各自行业里的巨头,而王者的员工只是他们的几百近千份之一。 

再如蚂蚁金服、微信、抖音之类的国民级互联网应用,都是用极少的员工达到让人难以置信的估值和利润,这在传统行业是无法想象的。 

所以能盈利的公司会给员工开出满是行业红利的待遇,拔高行业上限的同时,也迫使那些有志于挑战巨头的新公司愿意抬高工资价码,吸引人才。 

总结起来,UI 之所以平均收入远超平面、服装、工业、室内等老牌设计行业,并不是因为 UI 专业门槛更高,而是以行业规模、项目规模、利润率三个核心指标的共同作用形成。 

其中,项目规模和利润率的重要性,其实远远大于行业规模,这是很多职场新人最想不通的地方。 

例如广告行业已经是一个万亿市场了,除了分众这家互联网独角兽外,其它老牌广告营销公司每年财报的营收和利润大家感兴趣的可以去搜搜(下图为 21 年财报)。 



看看他们的营收总额和净利润比例,以及员工总数,你自己就会得出,作为普通平面设计师的待遇,是绝对不可能超过头部互联网企业的,甚至能达到中游水平都是超常发挥的结论。 

行业规模大,但是头部企业规模和利润却不高,除了行业本身的平均利润率因素外,还有一个原因就是业务是高度分散的,没有被集中在少数头部企业,供应商数量庞大,不像多数 C 端市场都由少数几家公司或者产品把持或直接垄断。 

在可预见的未来,可视化行业也会处于这样的情况,竞争激烈,利润率低。而且作为 B 端服务商,不要看各家企业需求旺盛,政府各级单位招标不断,实际上每个项目的规模都不大,百万内的项目才占行业的绝大多数,这是不太符合满足我们收入期待的项目规模。 

而单个项目规模在未来高速扩大在我看来也不太现实,有两个原因,一个是项目使用人数极少(通常也就几十上百人…),另一个就是对可视化项目实用性的质疑。 

如果看过航天相关的报道,就会看到指挥室数据大屏相比我们网上看过的案例比起来,简陋得发指。这会是因为总局没有预算,请不起设计师和团队开发嘛? 



为什么航天指挥中心没有用下面这种 “科技感” 满满,复杂的我坐下面保证除了标题一个字也看不见的 “高端设计”? 



原因说出来让人沮丧,因为他们 —— 真的要看上面的信息啊!

真正能发挥可视化价值的场景并不多,很多项目出发的意义,就是为了表面工程(各级ZF单位需求,自行体会),装饰属性大于实用性。既然实用性不够高,很多甲方心里也清楚,是花钱装裱门面的,那么投入的预算就更不可能太高。 

所以,我对可视化行业的整体的发展是认可的,但对单家公司或项目的预期,却是悲观的,它们没法达到我们已经习惯的 C 端和 SAAS 行业的高度。 



最后,还要探讨下数据可视化中设计师的团队价值。 

我们知道,一个完整的可视化项目设计与开发门槛都是非常高的,但因为高,创造的价值就高嘛?项目营收的成本占比就高吗? 

答案依然是否定的!因为可视化行业的绝大多数项目都是 “传统” 的外包项目。 

不管是商业是政务领域,外包最重要的任务,都是找到业务(中标)。朴素的价值观会认为,只要技术和服务够好,业务自然源源不断,其实不然。技术服务都是后验的,客户没有合作过之前是不知道的,在市场上挑选服务商,可不是打开淘宝买家评论查看分数和具体评价筛选。 

所以,外行了解服务商的窗口,更多是通过熟悉的中间人介绍,或者销售的嘴。谁能拿到项目,谁就为公司创造了最大的价值。后面怎么做那是后面的事,换谁做不是做…… 

这就是最常见的外包企业思路,所以技术人员或者设计往往都是消耗品,没有那么强的依赖性。而在具体外包实践环节中,项目的执行决策也和一般 B 端、G 端项目不同。 

我以前一直强调,B 端项目的存在价值,是用来解决业务问题,为企业 —— 降本增效。但是可视化项目往往不是用来解决问题,而是用来 —— 解决产生问题的人! 

尤其是面向政务的项目,在领导的需求面前,是没有体验这一说的,首先考虑的应该是 ”科技感“(结合前文理解),不然怎么展示自己贯彻上层指导意见…… 



这种环境对于创意类职业是非常不利的,一方面创造的价值并不显著,另一方面是由别人 “教你” 怎么做设计。长此以往,你会越来越缺失职业竞争力和发展可能。 

问题二,则是因为可视化项目独立开发成本太高昂,做的视觉内容又非常固定。于是有实力的团队就纷纷投入可视化编辑工具的研发,解决最麻烦的底层图形方案。 



这和 B 端的前端开源框架非常类似,把底层的代码、交互、动画、性能优化都帮你做好了,设计师和程序员可以用非常省事的完成项目的视觉内容落地。 

但是,常规 B 端管理项目中,界面样式一直就不是最重要的事情,而是解决复杂页面流程和组件交互的问题。所以资深的 B 端设计师乐于应用第三方的框架来完成复杂的项目。 



而在可视化领域中,多数项目并没有那么多和复杂的交互需要考虑,视觉展示效果才是第一位,绝大多数团队应用第三方框架是大势所趋。核心工作内容被影响,那才叫触及灵魂的打击。 

所以,在我看来可视化设计师可以创造高价值的场景,只会出现在两种团队中。 

第一种,是给其它可视化团队提供图形服务的 SAAS 工具,比如 Raydata、EasyV 这类。都需要团队有非常优秀的前端程序员和技术积累,换句话说,就是既要有技术实力又要有资金保障的团队。 

第二种,则是走优质项目输出路线的小团队或公司。会有一些优秀的开发人员坐镇,再由设计师主导来推动业务发展,不会什么项目都做,会选有价值的用心交付。例如早年的 UI 外包团队 ARK、Eico、TangUX 等都是这种路线。 

这两种对比目前海量的服务商来说都是凤毛麟角,第一种类型是可视化设计师发展最好的归宿,因为设计产出和图形技术发展高度捆绑,只有这样的团队才会最早最快接触新的专业技术方案。 

除了这两类,不要对其它外包类公司有太多的期待。在整个互联网行业中,成熟产品团队非常不喜欢招外包设计师不是没有原因的。 

至于未来是不是可视化内容会在 C 端领域打开局面,发展出一些新的应用场景,我就不过早下定论了。 



最后,做个总结,给目前还没有进入可视化设计行业,或者是误打误撞进入这个行业的设计师一些职业方向的建议。 

可视化设计行业和广告业非常类似,就是从业人员收入构成是沙漏状,而不是像 UI 这样呈金字塔状的,缺乏健康的增长梯度和充足的腰部岗位。 



可视化设计师从菜鸟进入专业阶段所需的知识量更大,准备周期更长,技能门槛更高。在初中级阶段和一般 UI 行业对比起来 —— 毫无性价比。 

如果本身热爱可视化,想将 FUI 那些东西搬进真实的世界和项目里,也做好了艰苦学习的准备(说不定是你乐在其中的),那么这个的行业的头部岗位就是为你这种人准备的。 

毕竟行业体量大,当然就会有真正优质的岗位出现,只是它的门槛高,没有那么多水分能挤。 

如果不是异常热爱这个行业,具备较强的自学能力,或有一定的 3D 和图形技术知识积累,那么不太建议往这个职业深入发展,一般的 B 端和 SAAS 项目才会是更好的选择。



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



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

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



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



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

轻拟物设计

博博


在今天的 UI 设计领域,由扁平化设计风格占据主导地位,已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外,对设计师而言就是设计的难度大大降低了。


一个界面的 UI 视觉元素,仅仅只需要图片素材、矢量图标、几何、文字,UI 设计师的工作仅仅是对内容进行组织和排版,涉及到原创的也仅仅只有少量的图标(大多数人还画不好)。


这种状态持续了很多年,看起来岁月一片静好。


但是,这两年市场发出了一些不同的声音,那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。


比如新拟态风格在年初炒了一波热度,各大平台和公众号都铺天盖地的发文和介绍,介绍它的设计理念和设计方法。


还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标,引起设计圈的热议。


首先讲讲新拟态设计,之所以之前只字不提,是因为我对这个风格实在没什么好感,有种对纯拟物借尸还魂的味道,且它的样式对于信息密度高的应用是完全不适用的,只能活在飞机稿里。


而国内大型应用开始在实际项目中上线拟物图标,意义就不一样了,证明这样的设计是经过几个大厂团队认可,且有共识的。


当然,这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。


今天的互联网和过去不一样,用户的增长留存不再是过去一样通过裂变和口碑完成,一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的,而互联网产品又层出不穷,佛系的等待用户临幸是没有出路,这种现状也被称为互联网的下半场。


佛系不行,当舔狗更不行(成本太高),所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高,运营活动越来越密集,广告和强提示也越来越多。比如刚打开了三个应用,进入的首页大家自己意会……


有点扯远了,回到话题上。在这种掠夺用户注意力的思路指引下,再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后,那么进一步在一些细节处应用拟物就成为必然的选择。


而拟物的应用并不可能铺设到整个应用中去,因为完全拟物化的设计降低信息浏览效率是必然的,所以它只适合做局部的视觉强化,来加强用户对特定区域的感知。


最常见的需要被凸出的要素,就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配,相信大家已经很习惯了。


只是,这些图标开始在脱离运营活动的状态下,也开始使用非扁平模式,那就不再是运营设计师的工作职责,而是 UI 设计师们绕不过去的槛了(知识盲区)!


且除了 APP 外,其它领域对于拟物设计的需求也会开始逐渐提升,尤其是目前越来越复(fu)杂(kua)的大屏数据展示、车载界面、定制系统等等。


作为新世代的 UI 设计师,多数人对拟物的设计可以说是完全空白的状态,所以是时候要重拾拟物设计这个传统艺能了。







前面我有提到,拟物主要应用在关键的图标上,但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物,而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。


首先我们看看,过去优秀的拟物图标和设计案例,它不仅表现元素本身的光影、透视、构造,甚至会非常完整的表现物体表面的材质和肌理。


这种图标单看起来确实很好看、细致。但是,把它丢进我们当前的页面中是非常违和的,因为它们细节实在太多了,而且画起来非常耗时间,不利于项目整体的推进。


所以为了符合画面的质感,又要考虑项目效率,轻拟物这个概念开始被提出和应用,作为一个折中的解决方案。


它和纯拟物设计的共同点在于,也表现光影、结构、透视,但它尽可能精简了轮廓的复杂度、肌理和层级,呈现出更概念化、理想化、易于辨识的拟物图形。


所以,我们主要去学习的内容是轻拟物的设计方法,而不是徒手画照片(这个可以缓缓)!


而轻拟物虽然 “轻”,但它依旧也还具备拟物的基本特征,是有实体质感的。但是扁平从插画到图标设计经过多年的改版,有各种叹(hua)为(li)观(hu)止(shao)的设计,应用大量的渐变、投影、模糊的效果,比如下图案例。


这在我们之前图标的系列干货中有提过,这类设计是面性图标的进阶版,它们依旧属于扁平风格的范畴之内,不能和轻拟物划上等号。


对于这几年才开始学习 UI 设计的新手来讲,拟物已经变成一个很陌生的事物,这对行业来说是比较悲哀的一件事。


因为拟物的设计不仅仅是画图标而已,对它的学习可以全方位的提升设计师的基础素养,不仅包括对传统美术(结构、光影、色彩、透视)知识点的剖析,还包含对 PS 使用的深入探索。


可以说,自从拟物不成为必修题材以后,九成以上的UI设计师是不会用 PS 的,这极大的限制了他们自身的可能性和作品的多样性。








轻拟物本身也是拟物,所以它的核心基础和拟物设计师一致的,只是省略了更多复杂的细节。而对于整个拟物的体系来讲,最重要的东西实际上只有2个,形体、光影。



形体表现


形体的表现,就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中,有写过面性图标进阶的设计中,可以包含更多的细节、内部元素,而不是仅仅只有外轮廓。


轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上,即你要把这个图形的内容有明确的示意并画出来,而不是用抽象的图形做填充而已。


比如大众点评的快速入口图标,虽然看起来很复杂,但是那是配色上的复杂,而不是形体轮廓上的具象化。


换句话说,拟物插画的图形基底,类似扁平插画风格图标,不能表现得太抽象,也不能增加过多的细节,需要一种恰到好处的平衡(玄学),这就非常考验设计师的判断和经验了。


并且,在描绘轮廓的时候,新手尽可能的采取正视图来进行绘制,而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面,这样难度会大幅度上升,比如下面这种情况。



光影表现


除了形体外,光影就是整个拟物的灵魂了。


当一个完整的图形完成填充色时,它是扁平图案,如果完成光影呈现的时候,它就是三维空间的立体图形,比如下面这个圆的案例:


在拟物的设计中,我们对光影的定义是至关重要的,所以首先就是针对该图形确定光源的方向,是上方、前方、左上还右上,这对后续的设计有一连串的影响。


如果对光影没有正确的解释,那么在制作细节的渐变角度、投影的使用上,就会产生错误的设计,造成光影视觉冲突和矛盾。


在创建了光源以后,物体受到光线的影响就会产生明暗面和投影,可以简单划分成4个部分,高光、亮部、暗部、投影。


这和我们学习的素描有一定的差异,美术中对光影的表现害会包含明暗交界、反光面,这对于轻拟物的来说负担太重,所以我们要去掉它们,接下来重点讲讲高光和暗部。


高光是物体作为受光物对光源的直接反映,比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现,再或者一拳超人中男主光头上长期存在的高光配饰(多数动画的光头角色都有)……

高光可以非常有效的增加画面的层次和对比性,让物体看上去更有冲击力和观赏性。


而暗部,则完全是为了正常表现物体结构和弧度增加的示意,因为不在受光面,所以颜色会变暗。在实际操作过程中,我们可以通过渐变的方式开控制明暗的表达,但尽量不要直接手动设置一个渐变色出来,而是为它叠加暗部或亮部的黑白透明度渐变。

了解这几个特性以后,下面,我们就通过一个实例来讲解一下轻拟物设计的过程吧。








作为轻拟物的演示,直接画个图标讲一遍怎么操作是没什么用的,我们要从实际场景出发,用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页:


总结它的问题,不难发现首页顶部业务功能太多了,顶部图标就包含30个(加滑动的),虽然每个模块图标单看都没有硬伤,但堆积到一起,就使得顶部缺乏足够的信息层级和对比性。


我们要做的,就是通过轻拟物的方式,调整快速入口最大的三个图标,凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始,讲解一下如何完成轻拟物化设计的升级。


第一步:确认轮廓造型


第一个操作,即确定图标本身的轮廓。根据原有图标的样式我做了一些改动,包括加粗车头,减少高度,增加车灯等。并对每一个模块进行纯色的填充,定义它们的色彩和做出区分。


形体的重要性在于要对图形本身有比较合理的呈现,不要让比例失调和图不达意。



第二步:完善图形细节


这一步,就要在原有基础上,进行下一步的深入。包括对一些细节交代得更清楚一点,增加一些有趣的小元素等等,完善它的具体样式。



第三步:增加基础的暗部表现


在这里,我们就要开始为图标增加高光了,高光从右上角打下来,那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现,让整体的立体感稍强。


这一步在软件中主要使用蒙版功能,通过蒙版在背景上方创建一个图层,然后添加深色的透明度渐变,就可以表现出对暗部和投影的效果。



第四步:增加高光效果


接着,就是最后一步,将高光添加到画面中来,讲整个图标的质感进行拉升,

undefined


通过上面的演示,我们可以将整个拟物设计流程精简成:


1.确定图形基本轮廓、外形比例、模块色彩

2.丰富细节样式增加趣味性和适当的拟真感

3.通过蒙版添加暗部来完善表现的明暗和层级关系

4.添加高光元素作为图形的亮点,拉升层次感


然后,通过这样的步骤,再来完成后续的两个图形,拆解完的效果如下。



然后,再用这三个修改后图标套用进原来的页面,并做出对应的修改,再来看看前后对比:



通过这个对比,我们就可以看出在这个复杂的首页头部中,轻拟物风格可以从一众平面中被凸显出来,且不会显得太突兀和复杂。


而这就是轻拟物在项目设计中的实际作用,当画面元素已经开始超负荷,且容易导致同质化的审美疲劳和主次不清时,就是轻拟物登场的时候了。

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

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

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

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

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

ui中的投影

博博

在如今的界面设计中,投影使用的范围和频次越来越高。无论线上项目或是追波上飞机稿,都可以看见各种各样的投影样式。

投影的使用,是 UI 设计师必须掌握好的视觉设计基础。投影远没有大家想象的那么简单,即使软件中可以设置的参数并不多,很多设计师始终没办法很好的应用投影来提升自己的设计质感。

所以,这篇文章就会详细讲解设计投影的正确姿势。





有了光,才有影。光影是美术和摄影最核心的基础。

如果没有系统学习过相关理论,对投影的认识会有失偏颇,会认为投影只是将一个物体的轮廓(遮挡光源的部分)完整映射在其它平面上而已,一个光源下只有一个影子,比如下图设计出来的情况。

但是,真实世界中的投影,却并没有这么简单,往往虚实即不统一,明暗也不一致。就像下面这个物体的阴影。

undefined

在光学原理中,不透明物体遮挡光源,所产生的影子有两个部分,本影和半影。本影是影子中间最暗的部分(还有伪本影的概念,我们暂时将它合并起来理解),而四周开始变浅变淡,有弥散质感的影子称为半影,就像下图所示。

现实世界中可见的投影都会形成这两种影子,因为光源有散射的特征,当光线照射在物体上时势必会产生非垂直角度的光线,于是其中作用最大,重叠最多的一部分形成本影,而其余比较极限的切线部分形成半影,如下图的案例。

通过案例我们也可以发现,当光源、物体、阴影面的距离不同时,产生的本影和半影面积也就不同。反过来讲,我们还可以通过物体本影和半影的面积,来判断它的空间关系,比如下方的两个物体,明显能感受到下侧悬浮的高度大于上侧。

或者,通过阴影来判断光源对于物体的方向和强弱。比如下图案例,就可以明显判断光源位于画面的左侧,所以即使摆入其它物体,阴影也会朝反方向延伸。

除此之外,投影还可以反应很多其它隐藏的三维信息,只要使用得当,它就可以帮助设计师表达呈现各种不同的空间位置。比如可以通过投影判断物体是处于悬空或者是平躺,以及物体的厚度如何。

根据生活的经验,我们已经对投影所产生的暗示习以为常,能根据投影的结果下意识的对界面内容做出判断。所以,设计师在设计过程中如果对投影没有进行很好的思考,就无法设计出符合规律和逻辑的投影,界面就会产生违和感,而作品也因此大幅降低了质感。

undefined





在进入了扁平化的设计环境后,投影有很长一段时间被抹除,因为大家认为那是拟物的遗毒,就怕设计里用到拟物元素显得不够时髦。

到了 Material Design 发布以后,谷歌在规范中增加了 Z 轴的概念,也就是为平面预设了立体的空间,设计元素可以定义与空间中水平面的距离,并通过投影来表现。

下图中,Z 轴数字越大,代表和水平面的距离越远,上升得越多。而带给我们这种感受的原因,就是投影的暗示,元素本身的 XY 坐标并没有任何改变。

即然增加了投影,那么谷歌的专业设计团队,肯定不会很随意的制定其参数。当我们打开谷歌的官方 UI kits 源文件进行查看时,就能发现其中的奥妙。它们为元素创建了两层投影,即本影和半影,有时也称为 top shadow 和 bottom shadow。 

并且,还有一个在第一部分没有提及的要点,投影的深浅与元素的距离是非线性的,即中心到边缘衰减的速度是越来越大的,用坐标轴标示就是非线性的函数关系,而大多数软件中的投影只能以线性的模式呈现。

在 UI 设计师接触的平面类软件中,只有 PS 具备完美复现这种投影的能力,即控制投影的等高线。

上面出现的投影都是黑白灰,但在现在流行的设计作品中,最常见的是应用了彩色的投影,摄影中也经常会应用彩色的投影渲染氛围。

但是,投影中的这些彩色区域,并不完全都是投影,还包含了折射和漫反射等混杂的色光。为了简化(完整的阐述可以写一本书了),我们可以认为是光线穿透物体从而投射出带有物体本身颜色的投影。就像撑起一把绿色的阳伞,伞下的人头顶也会弥漫着草原的芬芳……





在开始展示具体的设计案例前,我们要先明确一个原则,即:优雅的投影是让你感受到它的存在,但不会吸引你去关注它!

undefined

一般的设计软件中,元素的阴影即是在元素的背后添加了一个相同轮廓的纯色矢量图形,我们可以通过 XY 轴移动它的位置,并使用模糊的参数来设置它的弥散度。

当元素距离水平面越近,阴影距离元素也就越近,即投影的 XY 值越小,模糊也越小,如果离得远则相反。



3.1 常规投影类型


第一种投影的类型,即假定元素平躺,光源正对着元素的平面,可以参考谷歌提供的投影方案叠加两层投影。第一层是 XY 轴坐标为0,只添加模糊的参数,透明度较低。第二层阴影使用相同的模糊参数,增加 Y 轴坐标,透明度较高。

在非 MD 设计中,它浓郁的投影参数会让整个界面变“脏”,变拥挤。我们要做的是要降低投影的透明度,这样才能让投影的表现更自然舒适。要牢记的是,当使用纯黑色做阴影时,透明度无论如何都不应该高于 20%,正常区间在 5%-15%。

既然知道阴影属性的规律,我们还可以复制这个矢量图层做高斯模糊也可以得到一样的效果,这种方法可以支持我们设计出更真实的投影。即将 Bottom Shadow 独立出来,缩小并向下移动。

如果想要得到彩色的投影,那么只要切换投影的色彩即可。值得注意的是,不同色彩的刺激程度不同,我们要凭感觉去调整它们的透明度。

如果感觉不得劲,阴影太少了,那么我们就让元素的 Z 轴上升。

既然前面提到彩色投影是由于光线穿透了元素,那么当使用了渐变色或者是图片的投影,我们在之前提到的复制出的那层充当 Bottom shadow 的矢量图形,就可以不使用填充色,而是直接用渐变或者是原图进行模糊和透明度调整。



3.2 非常规投影类型


光既然可以垂直于被照射平面,那么发挥想象力,我们还可以更改光与面的位置,让光线与平面之间的夹角变小,如下图所示。


在这个场景中,投影就作用在图片下方的地面,只有地面处于透视状态时,才能可以看见它的投影,所以,我们就可以得到下方的效果。

当然,我们还可以结合光源的类型,比如使用聚光灯等,那么阴影的轮廓就会发生变化。

我们甚至可以假设元素本身产生了一定的变形,如边缘翘起,那么就会出现独特的阴影形状。

我们可以从日常生活中的观察将各种不同的投影形式引用进我们的设计中,让我们设计中的视觉形式更丰富有趣。




学会正确的投影设计方式,并不是仅仅让我们局限在 UI 元素的设计上。它还能给我们带来很多意想不到的帮助,比如做设计作品的包装。

通过前面讲解的知识点,上方展示案例中应用的阴影方式相信你们已经可以看出端倪了,如果使用基础的阴影设置去创建展示的阴影,就会发现效果远远不如案例的高级,自然也难以带给别人良好的视觉体验。

最后,在项目中,想要将设计出来的阴影交付给开发,真正落地实现出来,无论安卓或是 iOS ,阴影的渲染和设计软件的参数是不一致的,这就需要大家自己钻研究了。

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

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

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

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

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

高效ui配色策略

博博

从平面到屏幕,CMYK 到 RGB,墨点到像素,色彩越来越丰富,形式越来越复杂。而 UI 的发展从拟物的繁琐细节中挣脱出来,却在色彩的展现中放飞了自我。


零售业有个有趣的研究成果 —— “七秒钟定律”:人们在挑选商品和服务时 ,只需要 7 秒钟就可以确定是否感兴趣,而在这短暂的 7 秒钟内,色彩的作用占到了 67%。


要在小小的手机屏幕中加入这么多颜色,并保持其中的联系和逻辑,着实不易。如果你还对配色一无所知,完全不知道配色应该怎么入手,那么你需要了解一下,我几年经验总结的配色思路。






无论我们用 PS、AI,还是 Sketch、XD、Figma,和色彩打交道最多的地方就是拾色器窗口,我们来看看这些案例:


虽然是不同的应用,但是这个拾色器的用法大同小异,但是,很多新人并没有搞懂拾色器的正确应用逻辑。


很多人知道,UI 的色彩使用 RGB 模式,但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑,也就是色相(H)、饱和度(S)、明度(B)。


HSB 是色彩科学中对所有颜色属性的理论划分,是种概念上的定义,可以用来解释任何色彩,也就是说可以和 RGB 和 CMYK 相互转化,且 HSB 的选色逻辑更清晰、简洁、干练。


因为一个正确的选色过程,是先确定出色相,然后再在这个色相维度下选出明度和饱和度,所以我们首先要关注色相选择条。


细心的同学应该已经发现了,它们的首尾都是红色,那是因为色相的序列是一个首尾相接的环形模式,所以它实际上就是色环的柱状展示图,应用起来和色环没有实际区别。


接下来就要说到重点,饱和度和明度选择区,我自己使用的习惯,是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域,然后明确它们在 UI 中的对应情绪和应用场景。


在过去的大量分析中,互联网产品的主色和重要辅助色都会往右上角聚集,一些次要、不可点的色彩聚集在中上方,而文字背景色则聚集在左侧,无人区则是我们重点避开的对象。


下面我们分析几个案例,看看它们在这个选择区中的色彩分布情况:

undefined


大家也可以自己拿一些主流的应用做截图,然后把它们的 UI 元素色彩排列到拾色面板中,就会得到基本一致的结果。牢记这 9 个区域的场景划分,可以帮助我们非常高效、安全地完成 UI 配色。






在众多的 UI 设计规范中,色彩部分的介绍,都必然包含三种类型,分别是:


  • 主色:应用的核心色彩,品牌色

  • 辅色:丰富页面视觉和传达效果的次要颜色

  • 中性:没有色相的文字、背景用色



2.1 主色的选择


主色是一个应用的最核心的色彩,品牌的象征色,比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。


确定主色,并没有大家想象的那么复杂,它的要点在于 —— 你想让用户感受到哪种情绪,然后通过情绪关联一个大致的色彩范围,再进行微调。


在今天的互联网产品中,主色的应用选择范围在拾色器区域的右上角,前面已经有解释了。这和平面设计中的用色有非常大的不同。


移动端产品要在一个方寸大的空间中争夺用户的注意力,引起用户的兴趣,那么低饱和清淡的色调是无法实现这个目标的,所以今天主色饱和度越来越极致,比如我们之前整理的,发在站酷的一篇总结:


支付宝主色变更分析


再加上屏幕的 RGB 显示特性,高对比度,高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法,就是在确定色相类型后,在右上方区域选出合适的色值。



2.2 辅助色的选择


辅助色是丰富应用中的次要色彩,它会包含一到若干个和主色不同的色彩,除了品牌传达外,具有更强的实用性。


前面我们提到过色环,这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型,它蕴含一个最朴素的原则,即两个颜色在这个环形中角度越大,那么视觉差异性越大,对比越强,比如下图的展示:

undefined

这些配色的模式是不能闭着眼随便挑的,它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择,是根据实际场景的功能决定的。


比如通知、提醒、取消用大红色,确认、同意用绿色或者蓝色,收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型,跟着常规方法来做,是没有其它思路的情况下最简单、最安全的辅助色选择方式。


没有标准元素用色的情况下,再考虑应用色环的 “角度原则”,越需要被突出的颜色,可以在色环中离主色越远,越不需要被突出的则越近。


比如下方携程的案例,主色在蓝色的情况下,支付、保险金标签这些需要被重点突出的色彩,使用了主色的互补色, 让我们一眼就能看见并产生强烈的操作欲望。



2.3 中性色的选择


中性色,是页面中文字、背景用到的颜色,它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要,实际情况恰恰相反。


主色辅助色决定了界面视觉是否出彩,而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例,就应该明白,即使只有黑白灰的状态下,我们理解这些页面和进行使用也不会有丝毫的障碍。


中性色的配置,就是制定一个由深到浅的灰度阶梯,应用在对应权重的元素上,色彩轻重的主要判断依据是 HSB 中的 B(明度) 值。

undefined

中性色虽然指的是无个性,但并不是只能用纯灰色,常见的一种做法,就是为中性色添加适量的蓝色饱和度,提升观看体验(满足 RGB 的某种特性)。


这种做法,颜色越浅的时候饱和度应用色值就越低,将这个规律在拾色器中进行表现,那么我们就可以得到一个 L 型曲线,我称它为 “中性曲线”。


掌握对于主色、辅助色、中性色的选择方法,那么对于 UI 配色的奥义来说,你已经掌握了一半,接下来就要了解更具体的实践思路了。






配色并不是只有色彩的色值本身,大家一直在研究各种色彩心理学和理论,却很少关心它们应用如何应用,如何配置。


所以,我根据主色和辅助色应用总结了一个配色的四象限表格,在分别看看它们对应的案例:

undefined


3.1 主色占比大,色彩丰富度高


主色会作为顶部标题栏或其它重要模块中的背景色,进行大面积应用,加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务,需要用丰富的色彩来进行暗示,吸引用户关注。


undefined



3.2 主色占比大,色彩丰富度低 


这类配色中,主色的应用占比也大,出现频率高,鲜有其它颜色出现。比较适用于图片内容丰富的题材中,或者是相对正式、品牌感强的应用。


undefined



3.3 主色占比小,色彩丰富度高


这是多数主流应用的趋势,降低主色占比,留出更多的空间给内容模块的展示上,突出自身带有的服务和功能。


undefined



3.4 主色占比小,色彩丰富度低


通常,会应用这种方式是因为产品的服务是相对单一,但也需要用户投入注意力的应用,设计师就会尽力避免给予用户过多的干扰。


undefined

每次在进行配色的时候,我们都需要对自己要应用哪种配色应用方式做出规划,然后再动手执行。有了这个目标,后面在整个项目的设计中的配色步骤就是水到渠成的事情了。






在实践前,我们要简单讲讲一个应用或者界面的标准配色的流程了,流程顺序如下:



undefined



具体应该怎么使用这套流程,我们用一个图虫 APP 改版的案例来做演示,首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。



4.1 配色流程演示


原型是 UI 设计的基本艺能了,在开始具体设计、配色前,搭建页面的框架原型是一个必备的条件,下面,是我们已经准备好的原型案例。


然后,我们确定以橙色作为应用主色,并在拾色器中进行确认。


有了主色,就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的,那么首先可以用到的就是顶部标题栏的背景色了,以及底部 Tabbar 中的选中色,大按钮色等。


接着,我们开始整理中性色的使用,选择新的颜色来填充文字和背景,清晰的表现模块层级,文字信息的权重。


最后,就是添加辅助色和其它色彩的元素了,这个步骤建议都是放在最后一步操作。因为色彩越丰富,越难控制,容易让整个画面显得杂乱无序,所以先完成基础搭建,可以更好的帮助我们判断彩色的使用是否合理。


下面,我们使用彩色的金刚区图标,然后将用户关注、认证用户、标签等元素使用其它色彩,来丰富页面的色彩内容。

undefined



4.2 其他配色类型应用


根据第一个方案,我们可以再用这个原型来实现其余的三个方案的配色。


比如下面的主色占比大,但是色彩丰富度低的。因为已经不太应用其它辅助色,所以主色填充上我们不再填充顶部导航栏的背景,而是将更多元素应用主色,减少辅助色数量。

undefined

然后是主色占比小,色彩丰富度高的方案,进一步降低主色应用的比例,然后在金刚区、标签等处使用较为丰富的配色。

undefined

最后,就是主色占比小,色彩丰富性也低的方案,那么使用中性色的元素就开始增多,只保留最核心的一些元素使用主色,和极少的辅助色。

undefined

根据四种不同的配色方案,我们就可以得到四种不同的配色结果和风格,在每次设计开始实施前,我们都可以根据这种做法来做尝试,并选出自己满意的方案。


要再次强调,UI 配色是极其强调形式的应用科学,最后做的往往会和一开始想的效果有极大出入,所以需要我们有几个备选方案,可以随时进行调整,并选出合理的那个。



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



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

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



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



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

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档