首页

设计心法 谈谈事理学-认识论

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


目录


引言

一、对设计的认识

二、设计观念

三、设计原则

四、设计思维


引言


前段时间在学习python语言的时候,我了解到在程序界有一种叫做“算法”的存在,其实“算法”就像武侠片里面的内功心法,内功心法越好就能激发越强的武功招式。在程序编写时大部分的程序语言都可以使用“算法”来优化程序的流畅度。比如,当大量用户同时使用程序时,“算法”就可以合理配置服务器资源防止服务器的崩溃。在设计的过程中其实也存在这样的通用心法,事理学的认识论其实就有点类似于“算法”,所以这一期我的分享题目叫《设计心法》。


一、对设计的认识

 

·内部因素与外部因素:

 

设计中我们可以将设计问题化分为外因(人,时,地,事)与内因(技术,工艺,材料等),在上一期文章中我们谈到设计可以定义为:人有目的创造活动,往往现代生活中设计的目的不是唯一的,这就好比佩戴手表时我们可能不仅仅是为了查看时间,还可能是为了在潜水时防止手表被泡坏。因此,物“应该是什么样”表现的是对不同人与环境的适应,就如同生物多样性表现了对环境的适应一样。

Image title


除却外部的环境因素,我们还要考虑的制作产物时所需要技术、工艺、材料、形态、结构。内部的因素其实代表了一种可能性,是一种可变通的元素组合。比如同样是防水手表,我们可以采用耐浸泡的材料,也可以运用防水工艺。(ps:在《事理学论纲》中内部因素没有成本,但是小胖认为成本其实也算是设计中应该考虑到的内在因素,所以在这里我也将其归纳了进来。)

Image title


总的来说外部因素代表了限定性,而内部因素代表了可能性。设计的过程中应当了解外部的需求与限定,然后组织内部结构。在内外因素之间找出一个契合点,设计就发生在这个契合点上。

 Image title

·目标与目标系统

 

窗帘、太阳镜、电焊面罩、等等这些看似风马牛不相及的物品,却有着共同的目标—— 遮挡强烈的光。在实际设计过程中目标往往是抽像的,而目标系统是具体的。目标系统既包含特定的外部因素的限制也包含内部因素的选择。

 Image title

同样是手表,同样是为了看时间,从技术到外观在使用因素的限制下,也就决定了其品种的千差万别。建立目标系统是对实现目标的外部因素限制的研究过程,也是从外部角度观察、分析、归纳实现目标条件的认知过程、叙述过程。设计师应将抽象的目标转化为目标系统,完善的目标系统才是优秀设计的创意源泉。

 Image title

·“使用”的意义

 Image title

在“使用”物品的过程其实包含两个方面,一是使用者——人的动作:二是被使用者——物的动作。人的动作是人生理结构和生存需要指示下的延伸,在动作的引导下人的大脑对外界的刺激作出反应,留下印象,形成经验,储存信息,成为意识。当再次遇到类似的问题是,人会逐渐总结经验并形成知识的迁移。物的动作是人使用过程中人的动作在物上的反应,这就包括器物的变形、移动、或是其他信息(比如声音,灯光等等)。

 

在人使用物的过程中,为了使物更加符合人意志,自然要对物进行改进,使物更加适合人的生理结构和需求目标。比如在原始社会原始人类为了更有效地的获取猎物,在原有的石头上进行敲击加工使之更加符合使用习惯。在“使用”中人和物不断磨合,这一过程实则就是产品迭代的过程。“使用”的意义在于它是一种积极的思维方法,是一种能启发创造的设计起点。Image title

 

·方式与合理

Image title

方式在设计中不是指的具体的某一个动作,而是使用时产生的一系列动作,人的行为与各动作相对应的物与物组成的环境组成了一个特定的社会现象,我们称为“方式”。物是动作对象,环境是行为条件。同样,动作使物有用行为使环境具备社会意义。

 

合理是指合乎客观规律,合乎时代观念,合乎社会准则,合乎人类理想。合理是人类经验、教训的总结,是认识的升华、沉淀;是道德、行为、情操的法庭;也是在历史的基础上对未来的规划。当人在追求欲望的过程中,合理更像是一种约束人类行为的标准,通过合理的约束来引导人类的行为方向。

 

综上合理的使用方式其实是设计的原则,通过合理的评估系统和反馈可以制约不合理的设计行为,在的设计活动中,以“创造合理的生存方式”作为第一原则才能促进人类往更好的方向发展

 

二、设计的观念

 

·设计生态观

 

自然界的生态系统是一个封闭的、可以自给自足的系统。在此系统中没有开始也没有结束,任何一环的在生态环境中都扮演着至关重要的角色。反观现代设计生态却并不存在这样的循环。

 Image title

现代经济学被认为是研究人类需求与稀缺资源之间关系的学科。经济学中的生产者(企业)将有限的资源整合变成可盈利的“商品”,而消费者是在有限收入下实现“效用最大化”的行为个体。消费者购买行为发生后进入“使用”阶段,直至使用的物品失去使用价值。“物”从资源直到被销毁经历了四个阶段,这四个阶段分别是产品、商品、用品、废品。

Image title


现代市场经济下人的物质需求被极大满足,市场经济的增长依赖消费增长,反观人类的自然资源总体上却在急剧减少。设计者除了的满足生产者、消费者、使用者的需求之外,还应该思考如何将“废品”分解利用形成设计生态闭环。

 

·设计美学观

Image title

人类文明的发展大致经历了三个阶段,这三个阶段即古典主义、现代主义、和后现代主义。这三种文明的美学观也可称之为再现主义、表现主义和共生美学。这三种美学观点的发展是相互交错的,只是主体上有区别。

 

当代设计和艺术是以思考、感召、联想的手法,以同观众、使用者共同创造为目的,以多种美学观重叠、并行、综合为基础的共生美学观为审美取向。技术与艺术共生,技术与各种美学观共生,这就是当代设计——后现代主义的美学特征。

 

三、设计原则

 Image title

·有限理性原则

 

在艺术的创作中美可以被分为很多种,梵高的油画是美的,米开朗基罗的雕像也是美的。其实任何事物,任何美都是相对的,在不同的时代背景和使用场景下我们对于美的定义都不同。

 

类比设计,衡量设计的标准不是对与错,而是相对满意与不满意。设计应该遵循“有限理性”的原则,即设计的目的并不是寻找“最优解”,而是“满意解”。“最优化理论”只适合作为设计中的一种技术方法使用,而且只有当目标属性十分明确,可以用数量化衡量时才可运用。

 

·适应性原则

 

上文说过设计就发生在内部因素和外部因素的“关系”中,而这其中的“关系”其实就是适应的过程,设计还可以理解为是以一定的目的、一定的方式来达到与客观条件内部关系相适应的人为适应系统。设计的内部因素、外部因素和设计目的是设计过程中应当遵守的具体内容。

 

多数时候外部因素在适应系统中是人们行为方式的主要决定因素。系统的复杂行为主要是其所处外部的复杂性的表现,而内部因素少量限定属性的制约,这才是完整的适应性系统。

 

四、设计思维

 

设计思维实际上是围绕着“问题”来展开的。所谓“问题”是指设计各要素交织在一起时,所产生的关系矛盾。好的设计一定是“问题”的良好协调统一体。研究“问题”的方法通常是通过观察问题——分析问题——归纳联想——评价修正的模式来巩固的。

Image title


观察问题其实是在用户调研中最常用的方法,定性调研中研究人员常常会使用观察法来记录用户的行为,之后用研人员会使用“五问分析法”来抽象出用户的真实需求。其实在事理学中也提出了类似的观点。


  观察法的几个原则:


  1. 目标明确——从现象到本质(五问分析法)

  2. 忠实于对象——感官+体验

  3. 扩延、比较——搜寻同类比较共性

  4. 由表及里、去粗取精——总体到局部再到整体

 Image title

需求分析中有一块人物画像的部分,其中情景分析和故事板就是分析人物使用产品的外因和内因,撰写故事版时不妨按照以下路径来展开。

 

  分析问题中应当结合设计中的基本路径来分析:


  1. 寻找“物”存在的外在限制——人、环境、时间、条件等制约。

  2. 析出“物”的内因与外因的逻辑“关系”——寻找现象依据

  3. 比较相似“物”的内、外因的关系——透析共性基础上的个性

 

具体的归纳、联想和创造都应该明确设计“目的”,结合实际中遇到的外部因素来具体创意创造。最后我们通过建立评价体系,优化设计产物在设计生态中的体验和循环。

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

如何让动效完美还原?送你两个超厉害的免费插件!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

作为视觉设计师你是否会遇到这样的问题,当需要做一个 loading 或者其他动效的时候,总会或多或少的出现一些问题,如何使用更轻量的 Sketch 直接将矢量图形转到 AE 制作动效,如何不再受 GIF 导出的失真问题困扰,如何让开发完美还原我们的动效设计稿等,如果你也存在这些疑问,那以下介绍的2款插件就可以完美的解决这些问题。

AEUX

AEUX 是由 Google 团队推出的,运用在 Sketch 和 AE 的一组插件,能将 Sketch 里的图层以及整个画板一键导入到 AE 里,同时能在 AE 里解决图形分组和分层的问题,减少导出图片或者转入 Illustrator 处理带来的不必要的重复动作。

以下是我做的一个简单小案例,通过此次案例将介绍怎么更好的使用这个插件:

首先在 Sketch 内将图层进行分组,在多图层的情况下,需要在前期进行动效构思,根据构思在 Sketch 里对图层进行分组,所做的分组将会是你在 AE 里的合成分组。

分好组后该如何导入才能让两者图层统一?

方法一:直接复制选中图层

安装好插件后,打开 AEUX,选择你将导入到 AE 里的图层,点击 Send selection to Ae,同时在AE里打开安装的 AEUX插件,在 BUILD COMP 区域出现了从 Sketch 导入的图层数量,勾选 Precomp groups,点击将自动加载入 AE 合成里。

方法二:导出json文件

从 Sketch 的 AEUX 面板里点击 Export AEUX.json 导出 json 文件,打开 AE 的 AEUX 面板勾选中 Precomp groups,将导出的 json 拖入到 BUILD COMP 区域,或者点击「曲别针」icon打开 json 文件。

这样导入到 AE 里的图层是以合成的形式展示 Sketch 里的分组。

避坑指南

如果在 sketch 内,分组图层不在同一组内,导入 AE 后会出现变形和位移的情况。

如果 sketch 内形状图层有投影/渐变/point type 的编辑形状时,导入 AE 后将出现投影消失,渐变消失,形状变形的情况,在遇到这种情况时,会通过导出图片的方式处理。

导入 AE 的 AEUX 面板时如果没有勾选 Precomp groups,多图层导入的情况下,组内的图层都会生成在 AE 中的同一个合成中。

Sketch的AEUX面板其他功能介绍

1. Detach symbols

这是一个解除 symbol 的功能,在 sketch 内如果没有解除 symbol,导入到 AE 里将出现图形位移和变形的情况。

2. Flatten shapes

AEUX 支持布尔运算,但是在一个组中混合不同的运算符(如添加然后减去)对于Ae来说比较困难。点击 Flatten shapes 可以合并布尔运算图形。

3. Images to symbols

Sketch 只能导出它在画板上看到的内容。如果在 sketch 内图像的一部分超出画板边界,复制到 AE 内部的图像将出现位移的情况。导出前点击 Images to symbols 不会发生被裁剪和位移的情况。

AE的AEUX面板其他功能介绍

1. Come size multiplier:切换倍数

可以设置 sketch 画板的倍数合成。

2. Auto build artboards:自动构建合成

导入前勾选此功能,在 sketch 的 AEUX面板中复制图层后,在 AE 里不需要任何操作,它会自动复制图层导入到创建合成中。

3. Convert to precomp:创建合成

同时选中单一图层,可以将他们建立一个新的合成。

4. Un-Precomp group:解除合成分组

点击可以解除合成的分组,变成单一的一个一个的图层

5. Toggle Visibility:可以一键隐藏和显示所有的父级图层

6. Delete group layers:删除父级图层

虽然现在 AEUX 有些上面所讲的功能不能支持,但是在一步步完善,希望可以帮助一些习惯用 sketch 画插图的设计师提高动效制作效率,减少不必要的操作步骤。

Bodymovin

在动效制作好后,通常我们会导出 mov 然后导入 PS 里生成 gif 格式,但是 gif 会出现质量过低的情况,比如渐变分层,边缘有毛边等情况,所以由2017年 Airbnb 团队开发的 lottie 动效可以完美的解决这些问题,而实现 lottie 动画需要在 AE 中安装一款名为 Bodymovin 的插件。

Bodymovin 以 Android/iOS 原生动画的形式在移动设备上渲染播放,在制作动效时导出 json 文件直接给到开发,可以帮助提高实现动效效率,同时提高动效质量。

1. 它还有很多的优点

  • 它可以支持 Android、iOS平台;
  • 导出的文件体积小,方便开发使用;
  • 实现效果佳,可以支持渐变等效果。

2. 在使用中有几点注意

  • 在使用前期,这种方法是否适合你现在所做的动效,lottie 是针对矢量动画开发的,不太适合图片过多的情况,图片过多会增加文件负荷,所以最好是将图片转化为路径动画。
  • 在 AE 里导入到 Lottie 的图层不能识别矢量渐变。
  • 不能支持外置插件的效果,比如粒子、光效等。
  • 需要与前端开发沟通,他们是否愿意使用。
  • 导出给开发的文件中需要有完整视频参考,开发可以通过完整视频知道 loading 位置和效果,同时如果出现 json 导出错误的情况,开发可以查看,遇到不一样的地方可以询问设计师。
  • 开发完成后需要走查,看是否与你预期一致。

3. 所需软件

ZXP installer

  • LottieFiles(移动版)
  • 插件:bodymovin

下面是一组之前做的页面加载loading效果,开发小哥哥反馈:实现挺。

4. 步骤

下载ZXP installer:https://aescripts.com/learn/zxp-installer/

下载bodymovin:https://github.com/airbnb/lottie-web

下载之后,点开刚下载的 ZXP,点开顶部 file-open,打开 bodymovin插件。

当出现以下界面时代表已经安装成功。

意外情况:在用 ZXP 安装 bodymovin插件的时候出现以下提示。

原因是没有通过 Adobe Creative Cloud 下载 AE,需要重新通过 Adobe Creative Cloud 下载。

打开AE,After Effect CC – 首选项 – 常规,勾选允许脚本写入文件和访问网络。

打开窗口 – 扩展查看是否添加成功。

调出 Bodymovin 面板,选择需要导出的合成。

点击你要保存的 json文件地址,点击 Render。

点击 Brown 载入刚导出的 json文件,检查动效是否有误。

这时候就可以把 json 文件给到开发,如果 AE 合成中有图片,需要把图片放在文件夹内一起提供给开发,同时也会给到一个 gif文件,如果实现有不一样的地方,开发可以询问设计师。

如果想在移动端上浏览可以打开网址:https://www.lottiefiles.com/,下载安装移动端客户端(ios/Android)

注册登录成功后打开 Lottie Preview 添加 AE 里用 bodymovin 导出的 json文件。

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

 

B 端产品如何做动效设计?用实战案例告诉你!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在无限的信息体量和有限的用户浏览范围之间求得平衡,让用户看到全部创作中他最想看到的那一面。

在B端产品的设计过程中,我深切体会到动效能在很多体验领域起到四两拨千斤的作用。于是我将自己这些年来做动效的思考,结合B端产品的一些固有特点,来和大家聊一聊动效设计在B端产品体验设计中的意义。

既然是谈B端产品的体验设计,那么就免不了要与C端产品做对比。在我看来,B端产品与C端产品在大的体验趋势上是趋同的。对于大多数用户而言,都希望自己在工作与生活中是顺利、愉悦的,而用户体验就是为了让用户顺利、愉悦而生的。也就是说,不管是B端产品还是C端产品,其体验的本质都是围绕着使用的效率与愉悦感为核心展开的。那么这次我们就将目光聚焦在B端产品,来看看在这个领域都有哪些亟待解决的设计难点。

针对这四个特点,我沉淀出一套解决B端产品体验问题的方法,它们分别是:信息折叠、路径梳理、提升效率、概念物化。接下来,我将通过具体的案例,来详细展现动效在B端产品体验设计中的意义。

涉及案例简述:

  • Dataphin:一款将阿里建设数据中台的能力商业化的产品
  • QuickBI:一款用于数据可视化分析的BI工具

信息折叠

1. 切换式:不同信息共用同一区域

案例1:

问题分析:初次进入 Dataphin,我们会提供一张业务流程图来解释 Dataphin 的工作流程。为了降低理解成本,我们对每个流程都添加了文字说明。然而由于流程本身已经很复杂,页面排版中加入说明性文字会使得流程的排版拉长,用户很难通过一屏浏览完整的功能流程,体验不佳。

解决方法:我们发现用户一开始关注业务的全流程展示,然后才会仔细查看每个业务的详细说明。当用户将注意力放在查看详细说明的时候,是顾不上看全流程的。因此我们将「看流程」和「看说明」的场景区分开,共用同一块区域,从而优化信息排布。

案例2:

问题分析:在QuickBI中,同一套 icon 需要应对两种不同的使用场景,当用户没有选中任何图表的时候,点击任意类型的图表icon,即可新建一个图表;当用户选中某一创建好的图表时,再点击图表icon,则是为该图表切换类型。所以为了确保用户的认知清晰,我们需要将两套使用场景区分开。

下图中,我们尝试了静态的布局思维,虽然可以区分场景,但也造成了导航条过高,导致空间冗余,压缩了创作空间。

其实这个问题不止我们家有,用过 AE 的同学应该清楚,AE里面的形状工具体验也很鬼畜,用户不选择任何图层的时候,使用形状工具可以新建形状,当用户选中某个图层的时候,使用形状工具是针对该图层创建蒙版,两种不同的功能却没有任何样式或操作上的区分,对新手用户来说是相当不友好的。

解决方法:用户创建图表和切换类型是两种不同的场景,不可能同时存在,在布局上没有必要让两套 icon 同时存在于界面。因此使用切换式,利用鼠标对图表的点击、失焦可以灵活切换两套使用场景。

2. 交叠式:不同入口内容共用同一区域

问题分析:图1是用户在 Dataphin 中所创建的一张逻辑表,我们需要保证用户在屏幕内尽可能多的获取信息,因此逻辑表中的空间利用就显得很重要。在原有交互中,我们为用户提供了搜索功能,同时我们也在思考有没有更优的信息布局方案,可以为用户展示更多的数据。

解决方法:在图2中,我们需要在顶部区域寻找与用户搜索操作不重合的场景,并把它们重叠起来。这里我用到交叠式的思路,即将搜索框收起来,只在顶部保留搜索入口,这样在布局上就可以让搜索与标题交叠使用同一块区域,优化了布局。

3. 衣柜式:在原有入口上扩展出更多信息

问题分析:在下图中,侧边导航的信息过多,压缩了创作区域,我们需要为导航「瘦瘦身」。

解决方法:通过用户调研,我们发现导航的名称对于新用户来说很有必要,但随着用户对产品的逐渐熟悉,名称重要性渐渐下降。我们需要通过动效,找到合理的展示形式,来兼顾新老用户的使用需求。

4. 设计的价值

通过动效优化信息布局,既保证了单位面积内尽可能多的展示有效信息,又避免了信息过载带来的干扰与阅读疲劳,使得用户每次只需要专注眼前的使用场景,提高了获取数据的效率,这便是视觉设计师在项目中的价值。

路径梳理

1. 层级路径梳理:解释类目之间的层级嵌套关系

问题分析:在 Dataphin 中一共包含了80多个功能点,我们将这些功能点梳理归纳成5个大类目和20个子类目。因此我们既希望用户能明确每个类目下包含的子类目,又希望用户在选中子类目的同时,也能明确感知自己处在哪个大类目下。

下图中,用户从首页切换到数据资产版图,我们想要让用户明确信息的嵌套层级,静态的思维只能用双Tab 形式展现。虽然解释了层级关系,但也使得导航高度过高,压缩内容区域,加之案例中的资产版图本身还包含三个子类目,于是,同一个页面出现了三层 Tab。

解决方法:将嵌套路径通过动效的方式展现,运动轨迹可以暗示用户子类目从哪里展开,其余类目被收到了哪里,用动效的方式解释了层级嵌套路径。明确了层级嵌套关系,节约了为解释嵌套路径而铺展出的信息所浪费的页面空间。

2. 操作路径梳理:解释操作流程的递进关系

在 Dataphin 中,用户在创建逻辑表之前,会经过一系列繁琐的配置工作,如下图中,用户需要经过「定义维度」-「定义主键&来源逻辑」-「定义层级」三个步骤。由于操作流程复杂,我们为用户设计了铅笔线动效,让用户时刻明确自己操作所处的位置,也方便回退操作。

3. 设计的价值

通过动效梳理路径,使得B端产品复杂的产品逻辑更为清晰,降低用户的理解成本,缩短因查找路径浪费的时间,提升工作效率。同时,将操作路径巧妙地隐藏在运动路径当中,可以节约为了展示路径关系而浪费的页面空间。

提升效率

1. 借位式:尽可能多的展示信息,缩短操作路径

问题分析:在 QuickBI 仪表板中,用户需要导入已有的数据集以配置图表内容。数据集由用户自行创建,一般来说,B端产品用户文件命名比较偏长,正常情况下下拉框很难直接把名称显示完全,用户还需要将鼠标hover 到名称上才能查看完整的名称,操作路径被拉长了。

解决方法:我们在侧边栏展开的一瞬间向两侧借一部分空间,使得名称获得了更多展示空间。尽可能多的展示信息,缩短操作路径,提率。

2. 响应式:每一步操作都有回应,引导式的体验

问题分析:在 QuickBI 仪表板中,用户创建图表的操作为,先拖动字段进入对应轴区,轴区便能读取字段内的信息并生成数据可视化。这一所见即所得的操作对老用户而言是的,但对于新用户而言认知成本却有些高。

设计思路:我们需要通过响应式的设计来引导用户学会这样一个操作。首先,用户的鼠标滑过字段,字段会高亮响应,提示用户此处可点击,从而吸引用户学会点击拖动字段。接下来,我们通过轴区内的文字提示,告诉用户字段可以被拖入该轴区。用户将字段拖入轴区的时候,对应的轴区会高亮响应告诉用户字段可以被拖入轴区,同时字段会根据拖入路径是否正确给出响应。如果正确,字段会划入轴区;如果错误,会给出错误提示;如果用户执意操作,字段会弹回原处。这样我便构建了一套完整的响应流程。通过层层响应的方式,减少用户在每一步操作上的困惑时间,帮助用户快速掌握这一操作手法,提升工作效率。

3. 元素联动:强化元素间的关联关系

工具型产品中很多操作是相互关联的,而且这样的关联关系通常是细微的,因此需要我们通过动效强化元素之间的关联关系。案例中图表的每一列指标可以自由配置,通过微动效,让用户一眼就能找到新增的指标,提升操作效率。(苹果在新版的 Mac 系统中也有采用类似的设计,体验很棒)

4. 框架联动:强化框架层面的关联关系

联动关系在框架层面也同样适用,比如导航区域与创作区域之间就存在拉伸联动。这样的动效前提,建立一整套元素的适配规范,便于开发与团队协作。这个过程会很繁琐,也是B端产品看不见的巨大工作量。

5. 设计的价值

每一个微小细节的打磨才能汇聚成的用户体验。提升效率的点小而且零散,总结起来即是用户的操作是强反馈的,从而增加用户尝试的信心;用户的操作是有引导性的,即增加用户继续探索的信心;用户的操作路径是尽可能被缩短的,以节约时间。满足这三点均可被看作是设计在提升效率方面的价值。

概念物化

1. 视效运用:运用视觉设计的能力,物化抽象的概念

问题分析:QuickBI 中有一个叫「创作区」的模块,是用来介绍 QuickBI 产品能力的。我们需要在这个区域向用户展示 QuickBI 所具备的能力与工作流程。由于 QuickBI 是面向行业分析师的 BI工具,其所要传达的概念对于新用户来说比较生涩复杂,这就需要我们在产品流程展示设计上尽可能简单易懂。

下图是1.0版本中的效果,其对流程的设计仅停留在图形的堆砌,对业务的表述不够清晰,也就很难向用户传递我们的产品价值。

那我们来看看视觉设计是如何物化抽象的概念的。

首先我梳理出 QuickBI 工作的四个步骤:获取数据、创建数据集、数据分析、数据展示。

接下来我们思考一下,当我们需要对某人讲述一个很复杂的概念的时候,我们通常会打个比方。那么我接下来要做的,就是为这套抽象的概念「打个比方」,因此我要为它们构建一个有故事性的场景,那么这四个步骤应该是某种静止且持续运转的工厂,它们之间需要某些动态的介质将其串联起来。

于是我进一步挖掘视觉样式,构建出了场景原型图。

进一步完善视觉效果,得到了最终的成品:零散的代码被收集车间收集,产出数据表进入加工工厂,工厂将其加工成数据集,运输进分析台,分析台通过「仪表板、电子表格、数据全屏」三种方式对数据进行可视化分析,最后将分析结果通过数据门户和邮件订阅的方式对外分享。

2. 设计的价值

通过动效设计,将抽象的概念具象化,将复杂的流程简单化,大大降低了新用户的学习成本,使之可以快速上手。

最后,我将我的动效设计方法沉淀成一套以方盒为载体的方法论——方盒理论:「置身于三维空间下,信息的体量是无穷的,我们需要为其寻找合适的载体,在无限的信息体量和有限的用户浏览范围之间求得平衡。即让用户看到全部创作中他最想看到的那一面。」这即是我所构建的以六面方盒为基础的信息载体,并为我的一切动效解决方案提供了理论支点。

B端产品并非大家印象中那样的索然无味,其中有很多体验是值得深挖的。动效仅仅是其中的一个层面。随着近几年B端领域功能点逐步完善,用户对体验提出了更高的要求,B端产品的体验设计需求也会渐渐升温,也希望有更多这个领域的优秀设计师能和我做朋友。

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

从UX 到产品设计,聊聊用户体验行业的巨大泡沫

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

上周和小伙伴一起翻译了一篇 medium 上点赞量超多的文章(8.1k赞),该文作者在电子产品的界面设计领域有13年的从业经验,也经历了从架构师到用户体验设计师再到如今的产品设计师的多次职业转换,文章主要是讲他对用户体验设计的犀利吐槽,以及对产品设计所代表的工作方法的无限看好。或许观点上并没有什么新意,但是,就像某大佬说的,设计是对混乱的驯服。想要驯服混乱仅凭理论套路是远远不够的,而设计师真正的价值或许也就在于此:投身于未知与混沌的灰色之中,并且还要从中分出黑白。

那么为什么我要翻译这篇巨长的文章呢?就我个人而言,单纯很喜欢作者傲慢中带着犀利的风格,就像看一篇文字版的吐槽大会般有趣。我在翻译的时候加上了自己的思考和看法,所以,文末也留了 medium 的原文链接,可以去查看作者的本意,并观看其中的演讲视频。

这是关于我从架构师转变到用户体验设计师的一段经历,以及我是如何看待行业现状的。

十年前的某一天,我决定要把我的职业从架构师改成用户体验设计师。我记得当时很多可用性专家、架构师、界面设计师、交互设计师对我说:这只是潮流而已,「用户体验设计」这个表述并不,简直就是胡说八道,体验怎么可能被设计?

然后在去年,我又突然决定把我的职业从用户体验设计师改成产品设计师。同样的,一群用户体验设计师又来对我说,这只是潮流而已,用户体验设计师和产品设计师之间并没有什么本质的区别。

但是,对我来说,它们是不同的。在我看来,产品设计更加的谦虚真诚。我觉得这是用户体验设计师不具备但最应该学会的:谦虚务实。

我不是在劝你像我一样改换职业名称(坦白地说,你最好别这么做),我真的一点儿也不在意。我只是想告诉你,我决定转变的原因,以及我是如何看待行业现状的。

很肤浅的话题,聊职称大概是世界上最无聊的事儿了,但是作为设计师们,我们又确实很喜欢讨论它。或许,这次我们可以聊的更深入一点。

用户体验设计的出现是因为我们设计师的需求

我一直很喜欢 Alan Cooper 提出的这个词:交互设计师(interaction designer)。我认为它很地抓住了这项工作的本质。但是早在十年前看来,这个词的定义就已经很狭隘了。数字产品的设计师们希望工作能触及到更多的内容,而「用户体验设计」似乎就承担了这个「需要触及更广泛内容」的责任。

它确实抓住了这个需求,现在 UX 这个词广泛流传,每个人都在使用这个缩写,但问题是每个人对它的理解是不同的。所以,直到现在它也是个令人疑惑的概念。

在Peter Merholz 的一次访谈中,Don Norman 对创造 UX 这个词的初衷做了如下解释:

我发明了这个词是因为我觉得人机交互和可用性这两个词儿太狭隘了。我想要创造一个可以覆盖人们体验各个方面的系统,包括图形设计,界面,体感交互和这个系统的使用手册。但从那之后,这个词就开始广泛地流传,慢慢地失去了它本来的意义。

如今它偏离本来的意义越来越远,以至于 Alan Cooper 先生说:根本没有用户体验设计这回事。

UX设计师是如何看待自己的以及他们真正做的是什么?

在我们尽可能扩宽工作边界的努力之下,我们把 UX 这个气球吹得快要爆掉了。UX 现在承担了「设计不同触点的体验」的任务,包括组织转型,制定策略,改革创新,市场营销,设计从 app 到广告、服务、设备、地点、事件,甚至公司文化在内的所有事情。

或许用户体验确实应该做到这些,但是问题是,没有一个用户体验设计师能一个人把所有的这些事情做好,要创造一个复杂的产品,你需要的是一个由不同领域专家组成的团队。

我不得不说很多 UX设计师真的是眼高手低,他们根本不具备足够的技能或者经验去支撑他们的野心。

我同时也负责招聘的工作,大多数申请 UX 这份工作的求职者可以分为以下几类:

  • UI/UX设计师,其实就是图形设计师,他们并不擅长信息架构、定义目标和需求,创建交互模型,考虑商业利益。他们只生存在追波上。
  • UX设计师,他们靠画规范的线框图谋生,有时候也做做可用性测试。(顺便说一句,他们是最有可能成长为优秀的产品设计师的人。很多有经验的 UX设计师叫他们「线框仔」,我真的很讨厌这种没必要的鄙视。他们忘了自己也是这么成长起来的。)
  • 空想家,专注于建工作坊,喜欢在墙上贴便利贴和画布,但是通常没有把想法转化为实际设计方案的能力。

当然,以上只是一种简单的归纳,但是从我的观察来看,很多做 UX 的都可以归到这三类人当中,因为真的很少见到那种既懂战略又会战术,既有创造力又有执行力,既了解商业又懂设计的人才。

UX设计师日常做的事情以及他们对商业的价值根本配不上他们的自我认知:「用户体验设计很重要 」。

用户体验设计实际上并不像很多「什么是UX」的文章写的那样是所有事情的中心。我推荐你去看Paul Addams在UX London 2018上的优秀演讲——《The end of Navel Gazing》。标题「用户中心论的终结」很好地表达了这个意思。

UX专注于用户和工具,但是这两点并不足以解决真正的商业问题

我观察到的另一个现象,是关于用户体验设计目前的状态的。UX设计师们每天都会发表数不清的文章,它们大部分都是关于研究工具以及方法论(例如用户画像,用户体验地图,原型制作工具,用户研究方法等等),各种教程,无关紧要的图形设计趋势,或者用户界面细节。

Fabricio Teixeira 和 Caio Braga 写了一篇优秀的文章来说明这些理论的狭隘之处:

https://essays.uxdesign.cc/state-of-design-publishing/

然而,这些我们经常讨论的东西,对于处在残酷商业竞争环境下的产品设计团队来说,并没有什么用。因为计划与管理实际的产品开发进程和理想的「Design thinking 五步法」之间并没有太大的关系。

整个 UX 行业好像对商业这部分都没什么兴趣,也难怪,「用户体验设计」这个名字就暗示了他们只关注用户。商业是别人的事。

UX设计现在很像一个宗教,而且它的信徒的想法通常都很接近

也难怪会冒出 UX 的忠实捍卫者们了,如果你胆敢不同意他们的信仰,他们就会把你的心扯出来。

仅仅只要说一句:用户研究不是总是被需要和有实际意义的。他们就会告诉你如果你不会用户研究,你就不是一个合格的用户体验设计师。如果你个人并不是很喜欢一些方法论,像用户画像或者其他,你最好赶紧默默溜走。

可悲的是,UX们总是想成为最有创新能力的人。但是我认为他们并不是。因为,创新力需要尝试不同的工作方法,考虑新鲜的想法,要求与众不同以及灵活多变,敢于实验,勇于实践,并拥有商业头脑与落地思维。想要成为真正的革新者,需要的是自己去开创自己的道路,去突破规矩,去冒险。而不是重复说那些所有人都在说的简单的陈词滥调,遵从那些轻而易举的方法指南。我觉得 UX设计师整个群体都搞不清楚地图和实际道路,模型(或其他噱头)和现实之间的差别。(只有这些「革新者」的想法才很容易被预测:因为他们所有人都读一样的书,说着同样的话。)

我感觉我已经超越了UX

我从事数码产品的设计有13年了,现在我不觉得我和大多数的 UX设计师之间有什么共同点。我觉得我已经超越了用户体验设计。我跟产品经理或产品需求方之间更为投契。

Peter Merholz 在他的一次演讲中说过,用户体验这个行业的出现是因为产品经理对用户体验缺乏考虑,我同意这种说法。

数字产品就是我现在正在做的,像网页,app,界面。我的目标是为我的客户创造一个成功的产品,一个会帮助他们赚钱或者省钱的产品。可用性和用户体验只是实现这个目标的一部分,它们很重要,但是说实在的,并不是最终的目的。我不会像大多数的 UX设计师那样不切实际的浪漫主义。

我也需要为我自己和我的公司赚钱,所以我要擅长规划一个有效率的设计流程,估计好预算,有条有理地和客户进行合作,销售与推广我的工作,招聘人才等等。

我知道我很擅长数字产品设计,但是我可能并不擅长做所有类型的设计。这就是为什么我更喜欢「数字产品设计师」这个头衔的原因了。

我喜欢它的点在于,它更聚焦于产品而不是用户。它把我的工作放在了资本市场的背景之下。产品需要对顾客有用,但是也需要切实地有利可图。

对我来说,无论它是什么,听起来,「产品设计」比「用户体验设计」都更加的落地。产品设计更容易被所有人理解,甚至你妈妈也能懂。它不需要太多解释。用户体验只是它的一部分,但是从另一方面讲,比起想要解决世界上所有问题的万能药UX 来说,产品设计这个说法更加的谦虚。

现在我大部分时间依然是在做交互设计和信息架构这种传统工作。我大部分的精力也都是花在制定策略,进程管理和设想概念的层面。但是我也正在带上许多的帽子:决策者,界面设计师,架构师,文案,创意总监,项目经理,产品需求方,用户研究员,测试人员。总之,哪里有需要哪里就有我。

当然我需要和很多人(他们是各自专业领域的专家)一起合作来实现我的愿景,然后把它迭代变得更好,更完善。技术专家,开发者,图形设计师,内容设计师,项目经理,甚至律师等等。最后的用户体验其实是很多这些人的工作共同作用的结果。

用户体验是很多人工作的结果,是一个产品或者服务生产出来的,并不是一个职位的描述。

我会把产品设计师定位为这样一个角色:他们是那些为产品功能和形式的最终呈现负责,并能够以任何可能的方式对设计流程以及产品的发布进行规划和优化的人。(如果你还把产品设计仅仅看作是 UI/UX 的另一个名字,这对你毫无帮助)对于很多有经验的 UX设计师来说,并没有什么新鲜的,但是产品设计确实和 UX 不同。

我看到如今,越来越多的有经验的 UX设计师称自己是产品设计师了,所以,也许这是一个潮流吧。又或许是某种原因?

Andy Budd,一个有着很棒的见解的家伙,我一向很尊敬他,最近他发了一个推特说:UX就像爵士乐,产品设计就像朋克乐。

好吧,我的看法跟他完全相反。打比方说,如果你想成为一个 UX设计师,你现在要做的只需要去上个周末课程,学习设计过程的5步法以及5个方法论,像用户画像,用户体验地图,愿景图,你就可以开始干活儿了。

但是成为一个产品设计者,你需要把产品交付给市场的实际经验,这非常的难,因为经常是一团混乱,复杂的过程。产品设计就像自由的爵士乐。可能听起来混乱嘈杂,有一点像朋克乐,但是想要把它玩好,你需要很多的技能和经验以及音乐理论的掌握,也需要一些即兴创作的能力:改变规则甚至是反对它们。更不用说,在团队中,你需要成为整个团队工作的主导。

无论你想叫自己什么,无论你有多大的梦想,但,也要记得保持真实和谦卑

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

设计师必须学会的卡片式设计!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 微信图片_20190318164322.jpg微信图片_20190318164342.jpg微信图片_20190318164344.jpg微信图片_20190318164347.jpg微信图片_20190318164350.jpg微信图片_20190318164352.jpg微信图片_20190318164355.jpg微信图片_20190318164359.jpg微信图片_20190318164402.jpg微信图片_20190318164404.jpg微信图片_20190318164407.jpg微信图片_20190318164410.jpg微信图片_20190318164413.jpg微信图片_20190318164416.jpg微信图片_20190318164419.jpg微信图片_20190318164421.jpg微信图片_20190318164424.jpg微信图片_20190318164427.jpg微信图片_20190318164429.jpg微信图片_20190318164432.jpg

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

成为UI / UX设计师所需的7个步骤

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

现在让我们关注最常见的设计专业:UI/UX设计师。

一、熟悉UI原则

在进行设计练习之前,你需要做的第一件事就是学习一些设计原则。这样你才能够进入设计世界,并开始进行“创造性”的思考。你会学到心理学对设计方案的影响,例如:为什么它看起来不错,为什么会失败。

下面是你应该了解的一些设计基本原则。

1、颜色

色彩词汇,色彩基础和色彩心理学。

设计原则:色彩

2、平衡

对称性和不对称性。

设计原则:平衡

3、对比

使用对比来组织信息,构建层次结构和创建焦点。

设计原则:对比

4、 排版

选择字体和在网络上创建可读的文本。

易读性的10个原则与网页排版

5、一致性

最重要的原则,创造直观和实用的设计。

设计原则:一致性

下面是设计好的界面一些好的方法和需要注意的事项。

二、了解创意用户体验流程

接下来要了解创作过程,UI / UX设计是设计都要经历的特定阶段。它分为四个不同的阶段,发现、定义、开发和交付。


创作过程

发现

在项目的最开始,设计师会开始研究,获取灵感并收集想法。

定义

在定义阶段,设计人员定义从发现阶段提取的想法。由此创建了一个清晰的创意设计方案。

开发

在这里创建原型,测试和迭代解决方案或概念的地方。这种反复试验过程有助于设计师改进和完善他们的想法。

交付

最后交付阶段,项目会最终确定并且投入使用。

三、培养你的设计视野

了解设计原则虽然有很大的帮助,但这是远远不够的,还需要培养你的视野,知道什么是好的设计和坏的设计,并且能找到设计方案的优缺点。

在打开一张空白的画布并盯着它看半个小时之前,你明白创新的唯一方法是通过研究。培养你的设计视野的最有效方式是通过看更多的设计方案来寻找灵感。尤其当你是初学者的时候,有时候无法自己打开脑洞,这时候你必须先看看其他人的设计。

浏览灵感类网站

所以看看其他设计师在Dribbble上做了什么,每当你遇到漂亮的设计或与你的项目相关的东西时,将它保存在笔记中并能说出你为什么喜欢,你也可以截屏保存。通过这种方式,你将拥有一个丰富的设计素材库,设计之路由此展开。

四、每天阅读设计文章

为了让自己尽快的熟悉设计,最好的方法是每天阅读一些文章。让阅读设计新闻和博客成为日常习惯。我们有数百万篇在线文章可供我们了解新趋势,设计方法和教程。我们所要做的就是找到它们,没有比从其他人总结的经验中学习更好的了。

让阅读文章成为日常习惯

在早上学习新事物会扩充你的脑洞,并为白天创造腾出更多的空间。因此你早上可以在Medium或Smashing Magazine看一些优秀的设计文章,开始新的一天。

另外要注意劳逸结合,不时地休息一下,阅读更多设计内容。特别是当你陷入困境并感到没有想法的时候,更有停下来休息,休息对于创造力非常重要。你可以将您喜欢的网站收藏为书签或订阅设计博客。

五、设计概念项目

实践是检验真理的唯一标准,并且我们清楚的知道,没有设计经验我们就无法获得客户/工作。但如果没有客户/工作我们就没有办法加强设计技能。所以我们可以通过自己的实践来打破这个循环,进行概念项目设计以获得乐趣以及成长!Dribbble上有很多的概念设计,他们都做的很棒。

Facebook Material Design by Kevin McCarthy

你可以花点时间选择你感兴趣的网站或App并重新设计它。你可以完全赋予它新的创意和意义,并且由此你将形成你的设计风格和作品,获得快速的成长。

六、了解的设计工具

我们有很多的设计工具,但你不需要都了解。你只需要选择你喜欢的并且适合你的工具即可,并随时了解的功能和趋势,以下是我在设计过程中使用的工具:

界面设计:Sketch

用于协作界面设计:Figma

用于低保真线框图:Axure

用于界面设计和原型设计: Adobe XD

可交互动态原型:Principle、Flinto

用于原型设计和协作:Invision App

七、寻找导师并且得到帮助

学习设计的另一个好方法是找到愿意提供帮助的设计导师或设计师朋友。他们将帮助您加快学习进程,导师或者设计师朋友会对你的设计方案会尽可能地发表意见。这就像一条捷径,他们还会分享他们的经验和方法论以及设计技巧。因此请向有经验的设计师或者导师提出问题并讨论您的疑问。

另外在我教授设计和前端的几年时间里,我学到的东西比我教的要多很多。所以当你准备好如何与人们讨论设计时,你可以指导或教育某人有关设计的知识。你将学习从不同的角度看待它,你将获得你可能从未想过的反馈和问题。

每当你和其他人谈论设计时,你的思维将一直处于“头脑风暴”模式,你会发现自己越来越对设计产生兴趣。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

用第一性原理告诉你:什么是交互设计?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

为什么是第一性原理

最早提出这个概念的是亚里士多德。他说:在任何一个系统中,存在第一性原理,是一个最基本的命题或假设,不能被省略,也不能被违反。

后来「硅谷钢铁侠」埃隆·马斯克在一次采访中提到「第一性原理」:

我们运用第一性原理,而不是比较思维去思考问题是非常重要的。我们在生活中总是倾向于比较,对别人已经做过或者正在做的事情我们也都去做,这样发展的结果只能产生细小的迭代发展。第一性原理的思想方式是用物理学的角度看待世界,也就是说一层层拨开事物表象,看到里面的本质,再从本质一层层往上走。

所以,我希望用第一性原理的思维方式,发现交互设计的本质,从而更好地理解和运用它。

什么是交互设计

交互设计,又称互动设计(英文Interaction Design,缩写 IxD 或者 IaD)是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the「interaction」即人工制品在特定场景下的反应方式)相关的界面。——百度百科

读完上面关于交互设计的权威解释,相信有读者和我一样,在短时间内很难弄明白:到底什么是交互设计?

下面,我们一起用第一性原理,拆解和分析交互设计的本质。

小学语文老师教会我们一种名次解释的方法——拆词法,那么,交互设计可以拆解成:交互层和设计层。

交互层是什么

交互,即交流与互动。具体点说,在某个场景下,一个对象为了某个事件目标,与其他对象产生信息的交流与互动。在笔者看来,交互的本质是信息的交流与互动,包含用户、目标、场景,它们共同构成交互设计的交互层,这是交互设计的前提。

而用户、目标、场景,也正是辛向阳教授定义的交互设计5要素其中的3个。

案例1:我们为「餐厅点餐」这个事件进行交互设计,那首先要知道这个案例的交互层是什么,也就是信息的交流与互动是怎样的。

这个例子的交互层是:用户(我们)需要在某个场景(餐厅),与其他对象(餐厅/服务员)产生信息的交流与互动,才能达到目标(完成点餐)。

案例2:我们为「地铁上听音乐」这个事件进行交互设计,按照上面的思路,我们知道这个事件的交互层是:用户(我们)需要在某个场景(地铁上),与其他对象(音源)产生信息的交流与互动,才能达到目标(听音乐)。

我小结一下,帮你理解交互设计的交互层。

当我们为某个事件进行交互设计时,首先要知道自己在一个什么样的事件前提下开展交互设计,而这个前提就是我所说的交互层,即用户在某个场景下,与其他对象产生信息的交流与互动,从而达到目标。

所以,在交互设计里的交互层,本质是信息的交流与互动,包含用户、目标、场景,主角是信息交流互动的双方或多方。

设计层是什么

在说交互设计的设计层之前,我们先来看「什么是设计」。

设计是把一种设想,通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。——百度百科

现在我们将上述解释放到「交互设计」里去理解。交互设计里的设计,就是在交互层的前提下,为一个事件合理的规划/计划(行为),并传达(媒介)出各种感觉(用户体验)。

所以,在交互设计里的设计层,本质是找到解决问题的手段,包括媒介和行为,主角是设计媒介和行为的设计师。

我们继续用前面的两个案例,理解交互设计的设计层。

案例1:为了完成「餐厅点餐」的交互设计,我们依据交互层这个前提,开始找到解决问题的手段,并为之设计媒介和行为。

在一些餐厅,用户还是通过纸质菜单,用口述的方式完成点餐。这里的媒介是纸质菜单和服务员,行为是口述。

在另外一些餐厅,用户用手机扫码点餐、下单、结账、评价等。这里的媒介是餐厅点餐的二维码和用户的手机,行为是用手机扫码、点餐、结账等一系列动作。

案例2:为了完成「地铁上听音乐」的交互设计,在非智能手机的时代,我们基本上是通过一个可存储的音乐播放设备和耳机完成这个目标的,那时候的媒介是播放器和耳机,行为是打开播放器播放音乐、在播放器调整音乐。

随着互联网和智能手机的普及,蓝牙传输技术的升级(aptX/LDAC等),以及用户诉求的升级和多样化,我们可以设计出更多贴近交互层(用户、目标、场景)的媒介和行为。比如音乐APP、蓝牙播放器、蓝牙耳机、线控耳机等。

此外,笔者认为:媒介和行为是相辅相成的关系,二者在交互设计的过程中会互相促进和限制。举个例子,一些带线控的蓝牙耳机自动连上手机后,按一下耳机上的播放键,就能直接启动音乐APP 开始播放了。这个「开始播放」的行为就可以设计在耳机上,而不仅仅是音乐APP里。

小结

用第一性原理,我将交互设计拆解成交互层和设计层,并结合辛向阳教授定义的交互设计5要素,得出结论:交互的本质是信息的交流与互动,由用户、目标、场景构成;设计的本质是找到解决问题的手段,由媒介、行为构成。

交互设计的本质:设计师为用户设计出在某个场景下信息交流与互动的媒介和行为,从而达成目标。

如何做好交互设计

1. 把握交互设计的行业差异化

本文从我个人的角度和经验,给大家分享了我对交互设计这个底层概念的理解,在我研究的过程中,最大的体会是,交互设计不仅仅表现在屏幕上,其实在线下场景下,同样有很多体现,比如现在热门的服务设计,我觉得它是对交互设计的场景化应用和延伸。

由此看来,交互设计会因行业和产品形态的不同,而存在差异化。拿B端产品来说,用户行为是完成某一项规范化的工作,而这项工作,往往具备行业和岗位专业性,设计师需要更好地理解行业和专业,才能贴近交互层(用户、目标、场景),设计出好的媒介和行为。

2. 具备相关思维

项目思维。交互设计师的工作往往贯穿调研、需求、设计、研发、测试等环节,我们需要把每一个设计Case 当成自己的项目一样去对待,而项目经理就是自己,充分发挥主动解决问题的意识和能力。

用户思维、产品思维、逻辑思维等。这3个思维网络上有很多解释,在这里就不赘述了。

3. 充实知识储备

点击下方标题,查看已更新的知识篇文章:

4. 提升专业技能和底层能力

《从今天起培养这5个好习惯,让你在 2019 年快速成长!》

写在最后

本文从构思到写完,断断续续有1个多月了,总希望找到一个合适的方式去解读交互设计,把这个概念说明白,但事实是越研究越觉得复杂,我需要了解的还有很多。

所以,我写这篇文章的目的不仅仅是分享我对交互设计的浅见,还希望用「第一性原理」这个拆解、分析、解决问题的思维方式,去研究「什么是交互设计」这个问题。

交互设计这个概念或领域,远比我写的要复杂和深入,我在研究「交互设计」路上才刚起步,希望能与读者朋友一起交流这个话题。

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

UI中切图与命名规范,收藏!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作,减少沟通成本。结合经验与收录的资料,分享给大家。

一. 切图命名英文缩写的三个要求


1.较短的单词可通过去掉“元音”形成缩写

2. 较长的单词可取单词的头部几个字母形成缩写

3.还有一些特定的英文单词缩写


二. 命名规则


切图命名以模块为前缀,如:模块_类别_功能_状态.png


模块:

登陆页面(login) 公共(common) 需求a(need) 需求b(demand) 发现(discover) 消息(message)    我(me)


类别:

导航栏(nav) 菜单栏(tab) 按钮(btn)  图标(icon)  背景图片(bg)  默认图片(def)


状态:

selected(选中) disabled(不可点) pressed(按下) normal(一般)


举例说明:

IOS:

以750*1334为基稿设计,按实际项目开发为标准,需切出@2x和@3两套图,把在公共页面中的导航栏里面有一个按钮(40x60px)的选中状态切图,直接输出的切图为@2x图,@2x的1.5倍图为@3x。


输出成果为:

common_nav_btn_back_s@2x.png(40x60)和common_nav_btn_back_s@3x.png(80x120);

意思为:公共_导航_按钮_返回_选中


Android:

以720*1280为基稿设计,由于尺寸不同且多样,需要切多套图适配不同机器,分别为mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,直接输出的切图为xhdpi;它们分别对应的倍数关系为1、1.5、2、3、4。


输出成果为:

common_nav_btn_back_s_mdpi.png(20x30)、

common_nav_btn_back_s_hdpi.png(30x45)、

common_nav_btn_back_s_xhdpi.png(40x60)、

common_nav_btn_back_s_xxhdpi.png(60x90)、common_nav_btn_back_s_xxxhdpi.png(80x120);


命名示列:

启动  (default):    

default.png   启动图片;

default_logo.png   启动logo


登陆(login):

login_bg.png   登陆背景图片

login_logo.png   登陆logo

login_input_n.png   输入框

login_input_s.png   输入框选中状态

login_btn_n.png    登录按钮

login_btn_s.png    登录按钮选中状态


注册(register):

login_register_rb_n.png    单选框按钮

login_register_rb_s.png    单选框按钮选中状态


导航栏(nav):

common_nav_btn_menu_n.png    菜单按钮

common_nav_btn_menu_s.png    菜单按钮选中状态

common_nav_btn_back_n.png    返回按钮

common_nav_btn_back_s.png    返回按钮选中状态

common_nav_btn_close_n.png    关闭按钮

common_nav_btn_close_s.png    关闭按钮选中状态

common_nav_btn_eidt_n.png    编辑按钮

common_nav_btn_eidt_s.png    编辑按钮选中状态

common_nav_btn_delete_n.png    删除按钮

common_nav_btn_delete_s.png    删除按钮选中状态

common_nav_btn_message_n.png    消息按钮

common_nav_btn_message_s.png    消息按钮选中状态

common_nav_btn_search_n.png    搜索按钮

common_nav_btn_search_s.png    搜索按钮选中状态


列表(list):

hpcollege_list_collect.png    列表页收藏按钮


左侧导航栏(leftbar):

leftbar_info.png     个人中心


菜单(tab):

common_tab_need_n.png     需求a按钮

common_tab_need_s.png     需求a按钮选中状态

common_tab_find_n.png     发现按钮

common_tab_find_s.png     发现按钮选中状态

common_tab_demand_n.png    需求b按钮

common_tab_demand_s.png    需求b按钮选中状态

common_tab_me_n.png    我的按钮

common_tab_me_s.png    我的按钮选中状态


首页(home):

home_bg.png     首页背景

home_banner.png     首页广告图


点9图(.9):

rounded rectangle.9.png    圆角矩形


常用词语:

selected:选中/s

pressed:按下/pre

disabled:不可点/d

normal:正常/n

common:公共

default:登录页

discover:发现

message:消息

me:我

navigation  bar:导航栏/nav

tab:菜单栏

button:按钮/btn

icon:图标

background-image:背景图片/bg

default-image:默认图片/def

cut-off  rule:分割线/cor

login:登陆

register:注册

list:列表

home:首页

banner:广告

browse:浏览

details:详情

like:喜欢

dislike:不喜欢

search:搜索

content:内容

collect:收藏

eidt:编辑

comment:评论

message:提示信息/msg

ranked:排名

location:定位

tags:标签

left:左

right:右

center:中

popup:弹出/pop

image:图片/img

viedio:视频/vd

audio:音频/ad

title:标题/tit

address:地址/add

number:人数

time:时间

sustem:系统

refresh:刷新

user:用户

more:更多

border:边框

next:下一步

sign:签到

code:密码

clear:清除

scroll:滚动条

hover:鼠标停留

common:公共

hot:热点

zoomin:放大

zoomout:缩小

service:服务

presonal  data:个人资料/Pdata

male:男性

female:女性

report:举报

input:输入/ip

dropdown  menu:下拉菜单/ddm

radio button:单选框/rb

check  box:复选框/cb

progressbar:进度条/pbar

download:下载

arrow:箭头

share:分享

upload:上传

release:发布

tabbar:标签栏

autonym:实名

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

商业化思维:如何创造价值,驱动产品/业务运转?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

商业化思维的本质就是:创造价值,通过为客户创造价值和交换价值来驱动产品以及业务的运转。那么,如何为用户创造价值和交换价值呢?价值属性会跟着用户属性的不同而产生变化,所以,在探究这个问题之前,要根据将用户划分为不同的群体,再从不同的方面着手。

商业化思维这个字眼乍看上去很高大上,确实往大了说,商业化思维可以套用到各种宏观微观的商业模式当中。但我们的目的是让商业化思维能够成为一个活动运营真正日常可用的能力项,所以我们对这个部分要解读的商业化思维的定义稍微做一些边界设定。

——基于商业化思维的本质:创造价值。

我们将探讨:如何通过创造价值去驱动一个产品/业务?

通过创造价值驱动产品/业务运转是一种完全不同于体验驱动(也就是产品思维)的模式,也是绝大部分互联网从业者少有接触的(电商&广告类的业务接触可能较多一些),能够综合使用价值驱动和体验驱动来帮助你策划一个业务形态,就会极大拓展你的思路(比如:你能够策划出趣头条类似的广告费转移为用户成本的模式)。

同时,也能够朝着我们的核心目的:让一个业务叫座又叫好去演进。

再次回顾一下产品思维和商业化思维模式的概念:

  • 体验驱动(产品思维):如何让用户使用便捷、有趣、解决用户的某种问题和需求?
  • 价值驱动(商业化思维):如何为用户/客户创造价值和交换价值?

用户/客户分类

那么如何为用户创造和交换价值?

价值属性是跟着用户属性在变化的,要探讨如何创造和交换价值,我们需要先对用户/客户做一个分类:

C用户:个人用户。

  • 素人用户:就是最普通的个体用户,看新闻的、买东西的、薅羊毛的、刷视频的普通大众们。
  • 达人用户:依赖一些内容平台生存的,往往以创造内容换取价值的内容生产者角色。

B用户:机构/商家/团体等任何非个人用户。

  • 职业经理人B用户:一般是大企业/机构里的业务负责人/对接人,他们并不在意公司的业绩,主要在意的是领导的认可。
  • 生意人B用户:一般是小企业/个人店铺的直接负责人或者就是老板本人,整虚的对他们从来没有用,他们只想要赚钱。

一般互联网的各种业务形态,会面对的用户种类基本上就是以上四种,代表着完全不同的四种价值诉求。

我们对这四种角色分别进行价值创造以及交换的理解和研究,就能够帮助你在业务规划当中,真正有效的运用到商业化思维。

当然这只是商业化思维最基础的入门,感兴趣的可以基于这个原理再深入研究。

C用户——素人用户的价值

在面对素人用户的时候,商业化思维主导的用户价值和产品化思维主导的用户价值有一些交叉和模糊的地带,为了便于理解和明确另外一种思维模式,我们相对粗暴的定义商业化思维的价值更多在于“创造”,区别于产品化思维的“满足”。

怎么理解呢?

用户有购物的需求,打造一个电商购物产品属于“满足”需求。而在购物需求满足之后,我们让用户去进行商品分享,通过用户分享进来的订单我们给予一定的分拥,这就“创造”了额外的赚钱的价值,可以交换用户社交关系链曝光的价值。

当然,实际并没有这么明确的区分,用户购物本身也是一种商业行为,商品的品牌溢价、促销手段(买三减一)等也都可以归类为价值创造的范畴。不过,这个不重要,我们关键要理解的是创造价值的思维模式。

常见的可以额外创造的素人用户价值:赚钱、省钱、炫耀、情感共鸣等不属于用户刚性需求(购物,变美,解决问题)的这类可以额外创造的价值。

而常见的你可以置换的用户价值:额外的成本付出、用户的个人关系链(自主推广)、用户的时间、用户的内容创造等。

商业化思维在素人用户部分,提供一种截然不同的业务策划模式:并不是考虑用户的需求是什么,然后针对性的策划一个产品。而是先思考你想要交换的用户价值是什么,然后,思考你如何创造额外的价值可以有效的置换到用户的价值。

在这个思维模式下,我们并不以体验和操作为优先去考虑业务形态,用户付诸成本是核心考虑因素,成本小于价值这个业务模式就有效,反之则无效。

这个思维模式也解释了:为什么很多体验优秀的产品就是没有用户愿意去使用?

目前业内新兴的一些社交产品拥有比微信更优秀的体验,但是产品在社交上创造的额外价值并没有大过用户的关系链迁移成本(想要去交换的价值)。而一些价值巨大但体验糟糕的产品用户还是愿意一遍又一遍的尝试想要成功走通——一个分佣50%的商品,再复杂的操作用户也愿意去钻研和使用。

当然,通过成本-价值的模式去思考和规划业务模型,并不妨碍我们同步去进行产品体验的完善,以帮助进一步减少用户在操作上付诸的成本。

商业化思维在业务中的一种典型运用场景,基于一个明确的用户价值交换业务目的,我们进行价值交换过程的建立,以找到合适的业务模式。

例如:我们希望用户能够主动进行分享(而这个过程往往基于已经满足了用户基本需求的状态上,比如说一个电商网站用户已经完成了购物,但是我们还想要额外榨干用户的价值),贡献他们的社交关系链价值。

首先,我们需要进行的思考是:用户进行分享需要付诸的成本是什么?

——分享到朋友圈后造成的个人形象影响,思考和检索适合的分享对象的成本,分享动作的操作成本(可以通过体验优化极大降低)。

那么思考,基于业务特性,我们能够提供给用户合适的交换价值是什么?

——可以通过和商家分摊成本的额外现金激励?基于稀缺或者高价产品的炫耀内容?或是商品本身附带的情感属性?明确的定义清楚这个具体的价值是什么。

然后完整的对比,你创造的额外价值是否大于综合成本,当然这个对比不是一个绝对的数学对比过程,还掺杂了很多主观因素。

所以,一定程度的用户调研或者简单一些的自我洞察能够帮助你得出有效的结论。如果做不到价值大于成本,那么这个业务就是不成立的。其实这个思维模式的逻辑是显而易见的,但又往往被忽略。所以,很多分享10元满减优惠券的策划被创造出来,而根本没有人思考过10元满减优惠券的价值其实远远低于我分享到朋友圈的成本。

琢磨一下以上的过程,是不是提供了一种全新的思路。帮助你的不仅是简单的思考“我想让用户做什么,所以理所当然的策划一个产品去引导用户”,而是真正的考虑清楚业务是否成立的根基,然后再从容不迫的去优化体验。

时刻保持“成本-价值交换”的思维模式,不仅能够帮助你打造有效的价值交换业务形态,还有一个非常有用的场景。

基于一个明确的用户诉求,我们进行价值交换过程的分析,以找到业务的关键点。

我们还是用电商业务场景来举例:在电商场景中,用户付诸的最大成本是金钱,而购物操作的成本实际上优先级并不靠前。用户在价值交换过程中最优先的价值是:“买到想要的东西”和“足够的划算”。

所以,在电商业务的重点一定是:提供更丰富的商品库和更优惠的价格,能够极大提升价值的含金量。

而优化购物操作体验,页面动线逻辑等是其次的,可以一定程度减少用户成本但解决不了价值不足的问题。

这也解释了:为什么一个创造了诸多优秀产品(常规产品主要面对的用户成本确实是操作成本,而价值是比较单一明确的,例如邮箱)的大厂投入了诸多心血打磨产品体验但最终还是在电商战场战败了?

一个擅长做价值交换的电商大厂在一个社交产品(用户的主要价值是社交,成本是难以独立完成的关系链迁移)上投入了大量的推广资源和利益诱导确留不下用户。

你看,大家都在说的基因的本质问题,其实本质并不复杂。当然大厂的成败并不只取决于思路的差异,还有历史以来积累的资源类型和用户心智,这些也都是基因的构成部分。

我们也不需要操心这么多,学会运用这个新的思路足以在业务策划中帮助自己抓住真正的重点。

C用户——达人用户的价值

首先明确我们这里所讨论的达人用户,并不是普通用户当中乐于分享和创造低质量内容的那群人(当然也有高质量的但并不普遍),而是以内容生产为职业,创造真正专业有价值内容,能够构成你的平台核心竞争力的那群人。

区别于普通用户,我们希望置换的达人用户价值是比较高的,平台依赖这些达人用户去不断供给符合平台导向的优质内容,而内容生产的成本极大,也就需要更大的价值来进行置换。
达人用户常见价值诉求:变现、曝光、独特的内容生产能力、有效的粉丝互动和管理能力。

达人用户需要付诸的成本:内容生产成本。

基于创造价值大于成本的逻辑,要打造优秀的面相达人用户的业务,就可以从几个方面着手(增加提供的价值):

提供足够价值的变现能力:

专业的达人往往以此生存,和普通用户一样的分佣价值只能作为额外的补充价值,并不能达到达人的标准。

所以,如果你的业务希望依靠变现价值来让达人自发留下,那么你需要考虑的核心问题和需要寻找打造的案例就是:有没有达人可以在你的平台赚钱养活自己。

当然如果没有内容独家协议的限制,达人可以依靠多平台存活,对你的要求就不会那么高,但变现的价值也一定是生存级别的(几千元)而不是福利级别的(几百元甚至以下)。达不到这个标准,你的业务逻辑确实就不成立。

提供足够多的曝光量级:

当然这个和你的用户规模以及流量分配机制有关,需要考虑的问题是:你给的曝光是不是有效的曝光?你的达人用户能否有效的把曝光转化为强关系的粉丝,或者是个人品牌认知用户?

这个目的达不到只是粗暴的给曝光并没有用(例如:很多内容平台会找我要稿子,一些平台只会放作者名字而不愿意曝光作者个人公众号,我就非常抗拒为他们提供稿件)。

很多冷启动的业务面对的是达人内容量级和用户量级循环驱动增长的问题,在这个逻辑下一定程度的达人内容补贴是常用的手段。但不能偏离的是,你的激励要做用户这个循环,要求仍然是激活的内容一定要对用户有价值而不只是凑数,达人的补贴规模也要达到生存级别。

提供独有的内容生产能力(生产素材):

或者说独特的有效的粉丝互动管理能力等产品层面的价值也是一种办法。但说实话国内互联网KOL行业发展多年已成定局,大的MCN机构已经垄断了大的流量和真正专业的内容生产者,平台迁移成本极低;大流量主产品能力的抄袭门槛又不算高。

所以,除非你能纯粹的全面培养素人成为达人,否则这类型的手段可能只作为补充,要真的撬动达人价值还是要回归到以上两个点。

降低创作的成本:

当你的产品不足以让一个达人在这里养活自己,那么你可能就很难得到独家的内容。

要让达人愿意在你这里搬迁内容或者一定程度的定制创作,可走的路就只有尽量减少内容生产的成本——快速搬迁,极低门槛的排版能力,和行业通用规则一致的产品形态等等。

接下来,我们看一下另外一个截然不同的面对B客户的领域。

B客户相比于C客户,目的更加明确,愿意投入更大的成本交换更大的价值。在B的领域,商业化思维的主导就更加明确,价值的创造和交换成为了唯一的话题,产品体验起到的作用微乎其微,除非你提供的价值本身就是产品的体验(比如说:一些企业服务工具)。

B客户——生意人价值

要理解生意人B的价值诉求,先从一个个人经历的故事开始:

曾经牵头过一个面向B商家服务的工具平台,商家支付费用使用工具和流量等整合的服务。

在工具平台搭建的早起,我们以非常产品导向的思维进行了规划,重点考虑的是工具的各种功能、平台使用体验、对平台的流量等价值贡献等问题,设定了工具平台的点击率、跳转率、转化率等关键考核指标,在这些导向下不断的去优化工具平台。

然后,我们召开了第一次的商家推广大会,准备了精美的PPT,详尽的介绍了工具平台各种先进的能力,复杂的逻辑和优秀的体验,其华丽程度首先把我们自己都感动了。

但是,现场反应平平,几乎所有商家全程都在玩手机,似乎对我们精彩的演讲丝毫不感兴趣。

会后我们找到几个资深的商家咨询了原因,其中一句关键的点播对我们产生了至关重要的影响:

“我们只想知道在你这里能不能赚钱,投入多少回报多少,流量成本吧如何,比其他平台有没有优势。其他的真的不太在意。”

这一句话真正引起了我们关于“什么是商业化?”“怎么样才叫做生意?”的思考。

面对着实打实要和你做生意的商家,一切形式化的虚无的东西都没有任何意义,只有唯一关键的话题:赚钱(当然不同的业务模式又有其他的一些核心价值例如获客等但逻辑都是可以套用的)。

回去以后我们快速调整了整个业务的导向,弱化了所有关于体验的考核指标——点击率,转化率(还要保留的原因是:这个产品还涉及到C端的用户体验),而把一切涉及到投入产出,能不能挣钱的指标——流量成本,拉新成本,费用的投入产出比,作为主要的考核导向来指导所有的工作方向。

至此为起点,这个产品开始真正的在市场上迎来了爆发,每一次宣讲会后(新的宣讲会我们只强调投入产出效果)开放的名额都被一抢而空。

以上的故事即是我对与生意人B合作的商业化思维理解:剥离掉生意场各种复杂的规则和概念,要撬动生意人B的投入,实际上也是在和他们做生意。能不能帮他们赚钱是唯一应该考虑的问题。任何经过包装的,浮夸的,虚无的内容在真实的投入产出效果下都没有任何意义。

B客户——职业经理人价值

当你合作的对象从一个想要赚钱的生意人变成了一个大公司内部的职业经理人,你将面对的价值又从单纯的赚钱变成了更复杂的职业经理人价值。

一个职业经理人心里在意的价值第一优先级,并不是帮助公司更多的盈利和获取价值(虽然这个理念并不道德但这是现状你不得不面对),而是他在和领导汇报这次合作价值的时候是否能得到认可。

所以,面对职业经理人这样的B端客户,并不能仅仅考虑实现业务目标,你还需要从他的角度考虑:能否过让这次的合作有更多的标杆价值、项目意义能够挖掘和包装出来,以帮助他形成一个漂亮的汇报文件。

所以,和B端客户做生意,需要更多讲故事的能力。除了业务目标的承诺外,你还能够在方面销售合作谈判的时候,能够完整的描述出:未来他在做汇报时候能够拿到的完美的报告是什么样子的?

以此去考虑:你在一开始要销售方案应该如何设计?业务应该增加哪些模块?合作应该提供哪些支持?就能够更好的帮助你搞定一个职业经理人的客户。

以上便是基于活动运营应该掌握的最基本的一些商业化思维业务运用介绍,除了常规的运用外,更重要的还是要强调互联网非技术工种人员应该都要具备“创造体验”和“创造价值”两种思维模式,能够真的帮助你创造出叫好又叫座的策划。

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

日历

链接

个人资料

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

存档