首页

如何专业的搭建色彩系统?6个步骤讲清楚|北京蓝蓝UI设计公司

之晨

今天和大家聊聊颜色系统,在做一套新产品的色彩体系时,大家常常需要解决一个问题,那就是颜色梯度,也就是色卡制作。如何从品牌色开始建立一套科学的调色板?这篇文章尝试解决这个问题。

无论你是一位需要从 0-1 制定色彩系统的品牌设计师,还是在一个已有设计系统的产品设计师,都需要掌握如何更加专业的创建设计系统中的颜色梯度。

总监分析!为什么移动端设计中不使用栅格系统?|北京蓝蓝UI设计公司

之晨

我们都知道做网页相关的项目,不管是 C 端的还是 B 端的,往往都会应用响应式布局,用了响应式布局,就肯定要做栅格系统,才能确保响应式的正常执行。但是,移动端要不要用栅格,怎么用,就成为很多人困扰的问题,我们就用今天这篇分享来解释。

简单易学出效果!11个工作常用的AE小技巧|北京蓝蓝UI设计公司

之晨

我们在平常的 UI 设计工作中,经常需要通过 AE 来做一些小动效,比如生长、毛玻璃等效果,这样有利于刺激用户去点击,增强趣味感,从而提升转化,助力业务达成等目标。其中有一些动效技巧经常能用到,也是我经常反复去查看的知识点,在此整理了一波分享给大家,希望能帮助大家在工作中更加得心应手。

蓝蓝设计作品:B端产品组态软件2种设计风格|北京蓝蓝UI设计公司

之晨

蓝蓝设计的两种组态软件风格都采用符合当下审美潮流的2D插画效果,既保证了视觉效果美观的同时也降低落地成本,方便后续的拓展、修改、提升与设计效率,同时注重用户的阅读习惯,将原功能点重新布局,主次内容对比明显,降低视觉噪音,保证清晰顺畅的操作,提升用户体验!

蓝蓝设计是一家专注而深入的界面设计公司,我们期待与您合作,为您提供最优质的UI界面设计方案,欢迎前来咨询!

蓝蓝设计作品:半老外David英语小程序界面设计

之晨

David是一个来自美国的华侨,哥大毕业后就来到了亚洲,现在定居北京!David是一个爸爸,也是一个创业者,在过去7年里都在科技教育领域创业。David相信,英语启蒙能在家就能做好,于是推出线上英语启蒙的小程序。

蓝蓝设计作品:B端软件首页2种设计风格|北京蓝蓝UI设计公司

之晨

方案一:驾驶舱风格 采用驾驶舱形式,以生产为主的业务,使用户可以更直观,更全面地了解企业中所有指标的具体情况,以便快速做出决策。整体显示更为重要的实时数据,监控掌握大局观,及时对有问题的数据进行及时处理,板块区分明显,更方便找到相关数据。
方案二:平台主页风格  在初步调研产品框架的基础上,系统首页重构信息组织架构,丰富信息和数据,根据不同权限可调整页面信息增加办公效率。设计风格采用简约的设计语言,模块化布局,方圆并构的设计模式,界面强调可复用性和通用性,配色采用品牌色,品牌融合度高。

如何判断一位设计师是否具有产品思维|北京蓝蓝UI设计公司

之晨

产品思维是设计师在设计产品时所需具备的关键能力之一。拥有强大的产品思维能力可以帮助设计师更好地理解客户需求,使设计效果更加符合市场需求,从而实现商业成功。那么如何判断一位设计师是否具有产品思维能力呢?

数据可视化大屏不会做?5个重要UI设计知识点|北京蓝蓝UI设计公司

之晨

大数据可视化界面设计是将海量数据以图形化的方式呈现,以帮助用户更好地理解和分析数据。在这个领域,设计师需要充分考虑数据的特点和用户的需求,以创造出易于理解和操作的界面。本文将介绍大数据可视化界面设计的7个关键知识点,并提供相关的技巧和实践建议。

 

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

之晨

一、用户心智模型是什么

先问你一个问题。

拼多多、淘宝、京东这三家购物平台,你认为它们的区别是什么?

或者换个方式问你。

买电器你去哪个平台?买衣服你去哪个平台? 买垃圾袋你去哪个平台?

是不是有了答案了?

没猜错的话, 大部分人的答案是:买电器去京东、买衣服去淘宝、买垃圾袋去拼多多。

你看,这就是一个购物心智模型,你的心里对这三家平台已经产生了固有的心智,如果让你去京东买衣服,你会不会觉得,有些别扭?没错,这就是心智模型。

百度百科对心智模型的定义是:

“深植我们心中关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。并深受习惯思维、定势思维、已有知识的局限。”

关键词是:故事、习惯、局限。

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

淘宝一开始就我们讲了一个故事,一个万能的集市,我们习惯在上面买衣服,但是也产生了局限性,那就是,当我们想买大额电器的时候,还是会选择京东。

我个人对心智模型的理解是:

我们内心深处对一个事物的看法。

空口聊天多没意思,下面举个例子。

这是一尊陶俑,第一眼你觉得她像什么?

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

是不是觉得像米老鼠?

为什么?

因为陶俑的头上的发髻和米老鼠标志性的耳朵很像。

如果你从没见过米老鼠,你还会觉得她像米老鼠吗?

一定不会。

这就是心智模型,你对头顶的大圆形的心智是“米老鼠”,所以一旦你看到类似的形状,米老鼠的形象就会浮现出来,这个发髻的形状和你心里对米老鼠的形象产生了匹配。

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

对心智模型有没有一点印象了?下面我们接着聊。

二、心智模型的3运用

我不想用具体的界面来聊,那样的话太散,我认为要想理解一个概念,最好还是从“面”的角度来说,所以下面我会举一些商业上的案例来辅助理解。

心智模型有哪三种运用方式?

第一种:创建新的心智模型

第二种:改变旧的心智模型

第三种:匹配现有的心智模型

可以理解成一件事情的新生、改变和延续。

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

下面咱们一个个来。

第一种:创建新的心智模型

难度指数:难啊。

记得《盗梦空间》里最难的是什么吗?

最难的不是盗梦,而是植入一个想法。

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

创建新的心智模型有异曲同工之妙,都是让别人内心接收一个事物,需要刻意培养。

举几个例子。

当年外卖刚开始的时候,家家搞补贴,很多时候几乎不花钱就可以点外卖,后来这些福利没有了,为啥?

因为点外卖的心智已经培养好了,你离不开它了,所以平台可以“不惯着你了”。

还有唯品会的正品低价、瑞幸一开始的星巴克平替,这些都是他们想要植入到用户大脑中的心智。

为什么要费劲植入一个新的想法?

因为一旦植入了,就很难改变。

现在我身边的很多朋友想买一些低价的品牌都会上唯品会,买咖啡会喝瑞幸,一旦用户的习惯养成就很难改变,意味着什么?

意味着留存和转化的成本更低了。

第二种:改变旧的心智模型

难度指数:也难。

《盗梦空间》里小李子的妻子被他植入了一个想法“你不在现实世界里”,当他和他妻子回到现实世界后,他妻子仍旧认为自己不在现实世界里,这个被植入的想法已经根深蒂固,很难改变。

所以改变旧的心智也不简单。

例如小米最初主打极致性价比,后来想往高端路线走,很难,大家心里已经认准了小米就是“性价比之王”,也就是你的产品不仅要好还要便宜。

这就导致小米一涨价,大家就骂他们忘了初心……所以小米拆分出了红米主攻性价比,小米往高端发展,但是仍旧很难。

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

拼多多的百亿补贴也是一样的道理,一开始的砍一刀深入人心,大家对拼多多的心智已经成型:便宜,质量一般。拼多多想改变这个心智,推出百亿补贴,并承诺假一赔十,就是想告诉大家,我拼多多,也是有正品好货的。不过,效果嘛,见仁见智。

第三种:匹配现有的心智模型

难度指数:相对简单。

其实匹配现有的心智模型,是相对最简单的方法,市场已经帮你把用户习惯培养好了,你直接使用,那肯定事半功倍,省时省力啊。

举个例子,大家最近有关注小米的 13 Ultra 吗?

小米和徕卡联合研发的,主打徕卡调色的相机。

我有一个同事就直接把手里的微单换成了 13 Ultra,因为拍照足够好看而且便携。

这里不是要推销手机啊,是想让你们了解 13 Ultra 是个什么东西。

然后给大家看看它的手柄(一个配角,可以拆卸)。

是不是有些熟悉?和相机像不像?

这个手柄就是沿用了相机的心智模式。

小结一下:

心智模型有 3 种用法:

  1. 新建:创建新的心智模型
  2. 改变:改变旧的心智模型
  3. 延续:匹配现有的心智模型

下面聊聊,咱们怎么做才能更加匹配用户的心智模型?

同样的,我不会拿具体页面来举例,还是希望把思考方式分享给大家,而不是某一个页面的设计。

三、心智模型的3匹配

要想匹配用户的心智模型其实就三步:

了解业务、了解用户、竞品调研。

或者可以这么说, 在懂业务、懂用户的基础上,还要了解行业内的通用做法。

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

1. 了解业务

一定要了解业务,为什么?

因为好的设计方案千千万,但是匹配你的业务的方案才是好方案,如果不了解业务,可能设计出来的方案就是自嗨,例如网上很多的 dribble 风设计。

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

又比如说手机浏览器一般都把搜索框放到屏幕顶部,而夸克浏览器却把搜索框放到了下面。

为什么?

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

因为夸克想推翻传统的浏览器,想打造一款更年轻更好用的浏览器,把搜索框放到下面也是满足他们的业务诉求,现在手机屏幕越来越大,搜索框放在下面手指操作更加方便。

所以,一定要先去了解业务。

拼多多和淘宝同样都是电商平台,可它们的用户心智相差甚大,因为最后方案设计是服务于最初的业务目标的,业务不同,呈现的方案也不一样,最后让用户形成的心智也不同。

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

2. 了解用户

为啥?给老人和小孩设计的界面能一样吗?

就拿颜色和文字来说。

小孩喜欢高饱和、丰富的颜色,而老人则需要考虑在各种场景下都能看得清楚信息的颜色。

小孩喜欢圆润的卡通字体,而老人需要识别度更高的字体,更大的字号。

高级设计师都掌握的心智模型,这篇帮你快速掌握它!

不同的用户,采用的设计一定是不同的,只有了解了他们的喜好和痛点,才能做出符合他们心智模型的设计。

3. 竞品调研

为啥要竞品调研呢?

因为竞品和我们的产品类似,那么意味着用户大概率重合度也高,甚至业务上都有一定相似度,那么意味着,竞品的方案,大概率是经过市场验证的符合用户心智模型的方案。

你看,既然竞品已经给咱们打了个样,为何还要自己闷头造轮子呢?

咱们目的是解决问题,又不是为了证明自己很厉害。

但是,不要误解,我不是说照着竞品抄,而是取长补短,所以不仅要调研,还要分析,分析就是把竞品的优劣势找出来,好的地方咱们可以酌情借鉴,不好的地方,咱们也要避个雷嘛。

好了,小结一下,要想匹配用户的心智模型,一定要了解业务、了解用户,还要做竞品调研了解市场的通识性做法。

以上。




文章来源:优设网    作者:馊面包


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


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

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


如何做好竞品分析?来看这份超详细的实例拆解

之晨

一、竞品调研的结构

首先说明,竞品调研的方法有很多,本文只提供一种方法供参考,建议大家活学活用。建议从下面 4 个方面入手:

1. 调研背景

主要说一些为什么要调研,希望通过调研答达到什么样的目的?是视觉升级、体验升级还是为了提升转化率?只有了解为什么做调研这件事情,才能知道从哪几个维度调研。

2. 调研样本

建议选几个直接竞品,再选几个优秀的次要竞品也是可以的,可以帮助补齐盲点。

3. 调研维度

调研维度要根据调研目的来确定,例如如果是为了视觉升级,那么调研维度主要就集中在视觉效果上,如果是体验升级,那么调研维度主要集中在交互体验层面。所以维度的选择一定是和此次调研的目的紧密相关的,不过,倒也不是说如果是视觉升级就只调研视觉方面的内容,而是咱们要有一个主要的调研方向,啥都想要,最后啥都做不好。

4. 结论

结论是最重要的,毕竟,做这次的调研不就是为了这份结论吗?所以最后一定要有结论,也就是咱们通过调研得到了什么结论。

二、实例拆解

1. 调研背景

我公司这个项目是做一个官网的改版,官网主要就改版主要目标有两个:

第一个目标是视觉体验升级,拆解下来就是界面更好看,内容更好找。

第二个目标是提升用户转化率,更细致的拆解一下就是让更多的用户点击「咨询」按钮。

可以得到关键词:界面更好看、内容更好找、咨询客服的人数更多。

好,咱们继续,下一步是找样本。

2. 调研样本

前面提到过,样本最好是直接竞品+间接竞品(主要是一线大厂竞品)。所以这次调研我选择了几个直接竞品的官网,以及华为、飞书等这样的做的比较优秀的产品进行辅助分析。

3. 选取调研维度

调研维度又可以分为两大部分:整体结构、内容拆解。

了解整体架构是每个竞品调研都离不开的步骤,可以帮助我们快速了解行业内的通识性做法,毕竟站在巨人的肩膀上才能看得更远嘛。

①整体架构

我当时的做法是把主要竞品的官网都截图下来,然后一个模块一个模块的去分析,其实看下来你会发现,大家的做法都是有迹可循的。

看下面的图片,我把他们类似的模块用同样的颜色框出来,框出来后就会发现,哦,原来,这就是行业内的通识性做法。

如何做好竞品分析?来看这份超详细的实例拆解(附模版下载)

然后我把这种通识性做法归纳总结出来,发现,其实官网首页可以划分为四大板块:

  1. 常规内容:head、foot
  2. 建立认知:banner、产品介绍、解决方案、产品优势
  3. 增加信任:客户评价、客户案例、新闻资讯、行业认可
  4. 转化:免费试用、在线咨询、电话咨询

如何做好竞品分析?来看这份超详细的实例拆解(附模版下载)

你看,看似有很多复杂内容的官网, 其实也就这几个模块,这样看是不是就清晰多了。

既然咱们通过架构梳理来了官网的内容,下一步就进行内容的拆解了,拆解什么内容?就是拆解上面总结出来的规律呀。

②内容拆解

为啥要拆解内容呢?因为咱们竞品分析的目的不就是要做到“人有我优”嘛,咱们竞品分析是为了青出于蓝而胜于蓝呀,所以咱们不能直接抄人家的内容,这是无效设计,咱们要做的是分析他们的优点,然后借鉴,然后超越。

进行内容拆解的时候,建议先定几个拆解维度,不然会没有方向,这里我分了三个维度来进行拆解:

如何做好竞品分析?来看这份超详细的实例拆解(附模版下载)

  1. 用户诉求:用户的需求、疑问或者想达到的目标
  2. 业务策略:针对用户诉求,网站做出的一系列解决方案
  3. 表达形式:完成业务策略的交互/视觉展现方式

我就拿「建立认知」板块来举例。

官网首页的建立认知是什么?

是让进来的用户对整个网站有一个基础的认知,顾客来了,对店铺总要有一个第一印象吧。

通过前面的架构拆解我们发现,首页一般使用 4 种方法来对用户建立认知,哪四种?banner、产品介绍、解决方案、产品优势

一个用户看了 banner,浏览了产品介绍和解决方案,看了产品优势,是不是对咱们的产品有了一个认知了,这就是建立认知的过程。

那么咱们如何去分析呢?

我的做法是一个个板块分析,有些麻烦啊,但是相信我,值得。

下面我就拿建立认知里面的“产品介绍”来举例子,看看如何去分析产品介绍这个板块。

使用 3 个维度来分析:

维度 1:用户诉求(用户进来之后的诉求)

产品介绍内容是否有我需要的产品和功能?是否满足我的需求?

维度 2:业务策略(针对用户诉求,业务是怎么解决的)

讲清楚三个问题,即“我们的产品是什么”、“我们能做什么”、“我们有什么优势“

维度 3:常用表达形式(用什么样的表达方式来实现策略)

分点描述:减少大段落文字,分点描述,增强阅读性,降低理解成本

提炼卖点:将核心功能提炼出来,吸引用户注意力,精准打击,结合图标提升可读性

试用入口:视觉上强化按钮,引导转化

图文结合:图>文,可视化表达降低理解成本,增强临场感

拆解下来,是不是对产品介绍板块很了解了,产品介绍板块主要的目的就是为了讲清楚咱们是谁,咱们的优势啊。王婆卖瓜,瓜虽好,但是咱们得让来的人知道咱们的瓜好呀,所以表达方式也是至关重要的,用什么形式去表达这个板块呢?其实竞品已经有了很好的解决方案,那就是上面描述的。

你看,这样一通分析,其实你的方案就自然而出来了,你知道往哪个方向去使劲了,而不是看别人有啥咱们就做啥。


文章来源:优设网    作者:馊面包


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


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

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


日历

链接

个人资料

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

存档