首页

设计调研三部曲

分享达人

在设计领域,调研是一个至关重要的环节,然而,要进行一次有效的设计调研并不容易。它需要我们掌握一系列方法和技巧,灵活运用定性和定量的研究手段,同事还要结合实际情况进行分析和判断。本文将探讨如何进行设计调研,介绍产品分析,竞品分析和用户分析的方法和工具,为您的设计工作注入新的灵感和价值。

用一篇文章,带你完整了解近年来流行的视觉风格

分享达人

作为设计师,我们经常需要做产品的视觉风格定义。那么什么是视觉风格,具体又要怎么定义?我随便在群里问了下这个问题,好像大多都比较模糊,更别说设计行业外的人了。
借这个问题,我想来聊聊我的理解,希望对大家有所启发。
对于不同的领域或产品来说,视觉风格的定义、要素以及设计方法,可能也是完全不同的。
 

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

周周

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

设计师如何洞察客户行业|北京蓝蓝UI设计公司

分享达人

设计的价值怎么衡量?更有钱?更有名?更有权?全都不是工作价值 = 社会需求 X 生态位 也就是设计在越大越难的社会需求中,承担越大越难的职责,那就意味着有更大的价值。钱也好,名也好,权也好,都只是真正价值交付后产生的副产品,我们把这些副产品暂时抛开,关注事情的本质。

宏观视角:聊聊AIGC对设计行业的影响与启发

分享达人

生成式AI到了技术发展从开始走向期望的膨胀期,现象级产品已经出现;
在产业结构中,AI智能应用近乎爆发的状态;
生成式AI的可控性突破也是爆火的重要原因之一。

用户体验设计流程

雪涛

用户体验设计流程


虽说用户体验是主观的,但对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由研究实验来认识,并通过良好设计去改善的。用户体验设计(User Experience Design,通常简称UX Design)就是以提升用户体验为目标的一套设计流程。为什么用户体验设计如此重要呢?因为随着科技进步,当功能的实现不再成为挑战时,产品的设计和体验就成为了赢得市场竞争的关键因素。



由于系统软件糟糕的UI设计(菜单排布问题)所导致的误操作,美国居民受到导弹袭击的惊吓



· 美国Forester的一项研究发现,针对UX投入的每1美元,能够带来2~100美元的收益。


· Amazon把按钮文字从“注册(register)”改成“继续(continue)”之后,销售增长了3亿元。


· McAfee重新设计UI之后,客服电话减少了90%。· Airbnb的Mike Gebbia认为,公司从接近失败到获得100亿美元市值,最大因素要归功于UX


UX究竟在设计些什么 

广义的用户体验设计,是包含了内容功能设计,信息架构设计,用户界面设计,交互设计,视觉设计,语言设计,动效设计,音效设计,在一定程度上涵盖了产品物理外观设计(工业设计),平面/包装设计,空间设计,服务流程设计等。它意味着一个高度交叉综合的领域,涉及到人与产品系统或服务发生关系并产生体验的所有触点。一般或狭义的UX Design,则主要作为与UI Design区分,多用于互联网软件(或消费电子等)行业基于屏幕的设计,包含信息框架设计,用户交互设计,可用性研究等。这里的UI Design偏重于视觉上的设计。而在现实中我们也经常把UX等同于“交互”。





用户体验设计的核心和本质,就是研究目标用户在特定场景下的思维方式和行为模式,通过设计提供产品或服务的完整流程,去影响用户的主观体验。可见用户研究在整个UX流程当中的重要性。而认知心理学(Cognitive Psychology)则是用户体验设计的理论基础和科学依据。它是一门研究认知及行为背后之心智处理(包括思维、 决定、推理和一些动机和情感的程度)的心理科学。这门科学包括了广泛的研究领域,旨在研究记忆、注意、感知、知识表征、推理、创造力,及问题解决的运作。相关的还有人体工学(Ergonomics)与人因工程学(Human Factors Engineering),是研究人和机器、环境的相互作用及其合理结合,使设计的机器和环境系统适合人的生理及心理等特点,达到提高效率、安全、健康和舒适目的的一门科学。可用性(Usability)的概念最早出现于1979年,远比唐·诺曼在1993年提出的“用户体验”概念要早。可用性的ISO定义是“用户在特定环境下完成指定目标的效果、效率和满意度”(ISO 9241-11),而用户体验指“用户与产品、服务、设备或环境交互时各方面的体验和感受”。可用性的范畴比用户体验窄,它聚焦于任务完成。而用户体验是外观呈现、功能组合、系统性能和交互行为等因素的综合结果。




上图将用户体验细分为工具性(Utility)、可用性(Usability)、合意性(Desirability)和品牌体验(Brand Experience),最内部的圆代表最基础的用户体验。


用户体验 / 产品设计的流程与方法


以用户为中心的设计(User-Centered Design,简称UCD)概括了用户体验设计的典型流程和方法学。以用户为中心的设计思想非常简单:在设计开发产品的每一个步骤中,都要把用户列入考虑范围。从前期的用户研究需求挖掘,到后期的用户测试设计验证,都要围绕目标用户群来进行。



在UCD设计流程的每个阶段,都有多种不同的方法来帮助我们达到目的。

用研分析:


· 单独访谈(Individual Interviews):一对一的用户讨论,让你了解某个用户是如何工作,使你知道用户的感受,想要什么和他的经历。


· 焦点小组(Focus Groups):组织一组的用户进行讨论,让你更了解用户的理解、想法、态度和想要什么。


· 关键利益人访谈(Stakeholders Interview)


· 情境访谈(Contextual Inquiry or Field Study):走进用户的现实环境,让你了解你的用户的工作方式,生活环境等等情况。


· 日记研究(Diary Study):日记研究可以让用户记录自己的进程,研究者以非打扰的视角探查用户的体验。


· 问卷调研(Questionnaire Study):利用网上或纸张的问题list对用户进行发放填写,从而收集用户对产品的需求建议。


· 任务分析(Task Analysis):通过任务分析了解用户使用产品时的目标和操作方式,习惯(GOMS模型)。


· 用例分析(Use Case Analysis)


· 卡片分类(Card Sorting)、树形图测试(Tree Testing):观察用户是如何理解内容和组织信息,用来帮助你的产品更合理地组织信息。· 竞品分析(Competitive Analysis)、标杆分析法(Benchmarking)· 桌面研究(Desktop Research)、市场研究(Market Research)· 用户角色模型(Personas):构建一个虚构的人来代表特定目标用户群组,设计团队围绕这个虚拟人物设计开发产品。


· 用户体验旅程图(User/Customer Journey Mapping or Experience Mapping):从用户角度出发,以叙述故事的方式描述用户使用产品或接受服务的体验情况,以可视化图形的方式展示,从中发现用户在整个使用过程中的痛点和满意点,最后提炼出产品或服务中的优化点、设计的机会点。


· 态度研究(Attitudinal Research)和行为研究(Behavioural Research)


· 定性研究(Qualitative Research)和定量研究(Quantitative Research)



设计阶段:


· 脑力风暴(Brainstorming Ideation)


· 概念草图(Concept Sketching)


· 思维导图(Mind Mapping)· 交互流程(User Interaction Flow)


· 信息架构(Information Architecture):对功能内容进行高度概括的统筹规划、设计安排。


· 情景与故事版设计(Scenario & Storyboard Design):情景是指特定用户如何使用产品完成特定目标的简短故事。故事板是连续的一系列草图,用视觉的方式表现用户如何使用产品,形式上类似漫画分镜。


· 线框图(Wireframing)


· 低保真原型与高保真原型(Lo-fi & Hi-fi Prototyping)


· 纸质原型(Paper Prototype)


· 视频原型(Video Prototype):通过视频来演示用户如何与产品系统进行交互。


· 绿野仙踪原型(Wizard of oz Prototype):使用角色扮演来模拟用户如何与产品系统进行交互。


· 可交互原型(Interactive Prototype)


· 视觉设计(Visual Design)


· 设计模式(Design Patterns)、设计语言(Design Language)、设计规范(Design Guidelines)与设计体系(Design System)


· 标注文档(Design Spec)


· 动效设计(Animation Design)


· 参与式设计(Participatory Design):将终端使用者或利益相关者带入设计流程中。


· 共情/移情/同理心设计(Empathic Design):将设计师带入使用者情境中进行观察设计。


· 平行设计(Parallel Design):对同一个产品进行分开的设计,从而比较选择一个最佳方案。



评估验证:


· 启发式评估(Heuristic Evaluation):由一组行内专家依据尼尔森十大原则对产品进行可用性检查。


· 专家评审(Expert Inspection)


· 可用性测试(Usability Testing):邀请用户来试用你的产品,有任务性的完成测试,从而达到评估的目的。分为Moderated和Unmoderated,In-person或Remote。


· 组内测试(Within-Subject Testing)与组间测试(Between-Subject Testing)


· 游击式调研(Guerrilla Research):便宜、快速地得到大致的用户反馈。


· 问卷调查(Surveys):利用网上或纸张的问题list对用户进行发放填写,从而收集用户对产品的反馈意见。


· CSAT(Customer Satisfaction Score)与NPS(Net Promoter Score)


· 眼动追踪(Eye Tracking)和热力图(Heat Map)


· 点击流分析(Clickstream Analysis)


· 产品漏斗(Product Funnel)和使用情况分析(Usage Analytics)


· 统计学分析(Statistical Analysis)


· A/B测试:在同一时间维度,分别让相似的目标人群随机的访问产品的不同版本,收集各群组的用户体验数据和业务数据,最后分析、评估出最好版本,正式采用。




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


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

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

如何提高界面信息识别效率?

分享达人

一、为什么要提高界面信息识别效率?(Why)

界面设计的好坏,会直接影响到用户的使用体验,很多时候我们往往会直接拿到竞品的页面搬运到自己产品上,而没有针对自身产品的特点和业务加以思考。

这种做法理论上不会让自己的页面出错。但是很多人往往忽略了一点,就是别人这么设计的出发点是什么,是否匹配自身产品的业务流程,如果不了解这些贸然的去搬运设计,那么时间久了就会养成一个不好的习惯,导致思维不能得到足够的刺激和知识的沉淀。当需要我们专门进行设计构思时,就会遇到诸多困难。

如果是刚入手的领域,前期可以去进行适当的搬运参考,但是一定要了解别人设计思考点,明白其背后的原因,将其沉淀成自己的知识储备在脑海中。

1. 信息大爆炸

过去60年,人类社会的数据发生了爆炸式增长。2008年人类大约创造了近10亿张DVD能存储的数据,这等同于过去5000年的人类创造数据的总和。12年,调研机构预测信息每隔18月会翻一倍20年,调研机构预测信息每隔73天会翻一倍

2. 人类的生理局限

在信息爆炸的年代,人类进化的速度却是缓慢的,我们现在的大脑跟250万年前的原始人并没有太大区别。

我们的大脑每秒钟要接收约4000万次的感官信息输入,但意识一次能注意到其中约40个,其中短期工作记忆能处理的只有4±1个。

正是由于现代信息数据的大爆炸,多数产品日益臃肿的结构,以及人类有限的处理能力,所以呈现什么信息,以何种形式呈现的信息层级设计就非常重要。

作为设计师,我们有必要根据自身产品的业务方向,以及用户的行为和特征,结合信息环境,选择合适的信息,并以适合的方式进行组织和呈现,以便让用户获取并理解信息更容易,完成信息的组织和传达作用。

二、如何提高界面信息识别效率?(How)

1. 信息分类

相关联信息需要进行归类,无论是什么类型的产品模块,我们在设计中应当做好信息分层,当两段内容元素具有关联性时,他们应当作为一个整体给用户展现。

2. 层级区分

(1)层级数量应靠近“3”

信息层级作为影响页面信息传达效率的重要因素之一,那么怎样做好页面的信息层级便尤为重要。网上资料大多都在围绕对比、对齐、亲密、重复四个基本原则讲解。

不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用,并且也是我们非常熟悉的。但其阐述得太过宽泛,在我们实际工作中面对复杂层级排版时,仍会面感到困惑,很难直接有效地利用。

于是我把优秀的案例进行收集并整理分析。

经过线上页面与概念的整体研究发现,他们在遵循排版原则的基础上,都存在着一个简单的规律:主内容的层级控制在三层左右。

如下图所示:

可以发现,三层左右的层级是最容易被用户识别的,且视觉上不易混乱。三层往后,随着层级越多其复杂性会成比增加。

比如我们看下面这两个例子,左边层级方面平铺直叙没有重构区分,使得层级复杂,造成用户识别效率变低。但其实我们只需要对信息加以归类并控制层级数量,瞬间就变得更简单且易懂。

因此,我们需要在着手设计前,首先思考一个逻辑:尽量将我们的内容层级控制在三层左右,且这三层内有比较明显的对比关系。

有朋友看到这肯定要问了,这个道理大家都懂啊,可是在实际工作中大多数拿到的信息都非常多,根本做不到保持在三层以内。别着急,本文的重点当然不是告诉你这么简单的道理,而是在面对复杂层级的时候,我们应该怎样去控制它的层级表现,从而让它在最终呈现上保持在三层左右,让用户获取信息的效率更高。

(2)源头筛选处理

源头筛选的关键在于接手复杂信息时,我们首先需要从源头上进行第一层的判断,了解这些信息是否真实地被需要。这也是我们大多数人容易忽视的一点,当然这也不能完全怪我们,因为通常需求给到我们的时候都是大致的概括,好一点的话还有个交接文档,甚至有时候需求拿到我们手上时,已经转好几手了交接人可能也不知所云,导致很难知晓其底层出因,

源头筛选的本质就是判断我们当前所要呈现的信息是不是必要的。

比如某些时候产品给到了我们很多信息,但我们并不一定会全盘接受,而是通过当前页面的业务场景去进行判断。确定每个信息的合理性,从而可以决定有些元素是否可以删减,提高整体信息设计的一致性。

过程需要我们对以下2点进行思考:

  1. 此信息真的是页面中的必要信息吗,如果去掉是否会产生直接影响:比如当打开高德地图的时候,在你浏览地图时,界面只呈现强关联功能模块。只有当你上划进入二级页面时,其它相关功能才会展现,这些都是按照用户的使用场景来进行对应的呈现。
  2. 当前信息的重要程度是怎样的,对于某些不重要的信息是否可以通过隐藏的方式展现:当你拿到一堆信息,信息的重要程度就决定了我们需要将哪些信息作为主体,哪些信息作为次要辅助信息,哪些信息甚至可以收起或者省略。比如当你使用语雀创建文档时,编辑和浏览永远是最关注的,而跳转入口等都是次要信息,将其隐藏反而提高效率。

上述两个问题的确认,会影响我们对后面的信息排布。因此我们需要在源头,比如去和产品或者业务沟通,弄清楚该信息呈现的缘由以及必要性,这样能够帮助我们最后理清楚信息层级。

(3)在排布上降低复杂度

信息排布的本质是通过我们对信息进行主观的排列上的组织重构,来将复杂的层级控制在三层左右的区间里。从而保证我们页面的简洁性、规律性、识别性。

通过目前的实践总结,合理地安排信息层级的方法大致可以分为:分组、组件、组织、融入、弱化。

① 信息分组

信息分组是大家在设计时都能够想到的形式,分组能够将复杂的信息归组从整,从而降低整体复杂度,清晰线索。

我们常用的分组方式主要有三种:间距、分割线、卡片

那么这三种方式有没有区分呢?

VIVO设计团队曾经就这个问题展开过用户调研,但结果表示,如果纯粹从用户的角度来讲,对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感,因此我们可以根据当前信息的复杂度作出以下规则:

  • 复杂度较低时,优先采用留白分割,视觉清爽五干扰;
  • 当留白分割效果不明显时,可引入线性分割,让层次更清晰且保证屏效;
  • 需要进一步强化信息之间的边界感,可引入卡片样式,强化层次和可操作性。

② 利用组件拆分

组件其实是目前大部分设计师在进行信息排布时必备的部分,因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是,目前这几种组件对于我们信息层级的划分起到了比较重要的作用:树形结构、表格结构、步骤条、选项卡。

  • 树形结构。对于有关联性的多层级非常适合,可以将复杂的层级结构进行收拢,从而能够显著降低信息的复杂度。
  • 表格结构。对于信息多且关联性不大的复杂信息,可以聚合到表格来进行呈现,但表格的呈现方式不宜滥用,需要根据我们场景来进行选择。
  • 步骤条。步骤条则对场景要求非常明确,我们可以将多个场景通过分步的形式进行呈现,从而减少当前页面的复杂度。
  • 选项卡。选项卡更适合与同级的数据,对于同类型的结构可以更好地将页面进行拆分,从而让当前页面更简洁。

③ 灵活组织

通过对组织方式的调整,我们可以将多层结构的样式通过拆分布局来将其控制在三层内。

举个简单的例子:

从图中你可以看出左侧的层级较多,尤其是两层tab的叠加,视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局,从上下结构变为左右结构,达到从视觉上简化层级的作用:

当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时,我们可以通过改变结构使其交互逻辑更清晰,从而减少其复杂度。

④ 巧妙融入

我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式,让其融入到同一个层级中。比如我们看下面这一个例子,产品设计中将button与查询项利用分割排列在一起,从而变为同一层级,通过这种方式有效降低了页面的复杂度。

当我们在进行B端布局时,信息融入这个方法用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间,还能够降低信息层级的复杂度。

但在进行信息融入的过程中,我们需要注意的是:如果放在同一层级会造成理解上的误解时,这个时候不要采用该方案。比如搜索框的位置,放在哪个层级决定了对应的搜索范围。

⑤ 信息弱化

信息弱化的原则是:将某些超出层级的部分进行弱化。

比如图中有5个层级,但其巧妙地将功能筛选融入到了当前的结构中,使得即使超过3层我们也不会觉得其特别复杂。

在很多时候,我们觉得信息混乱的原因,就是页面要素太多太花哨。

比如工作中的一个小卡片,也就是利用信息弱化去减少画面的复杂度:

因此我们需要学会对信息分级,不重要的信息就进行弱化,这样整体的呈现上会好很多。

但不可否认仍会有更复杂的页面,即使缩减也仍有过多层级,那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。

(4)突出热区

当模块具有按钮、文字链、图片入口等需要下一步操作的关键元素,需要进行高亮显示,以此帮助用户快速定位目标。

图中 “Learn more” 使用文字高亮进行处理,通过颜色让用户快速定位入口,且不影响用户正常阅读,若使用色块按钮进行突出,模块会冗余,过于喧宾夺主。

3. 可见性

当产品需要用户进行多步骤完成任务时,应当展示系统进度,让用户了解他们的行为操作在界面中所处于的位置。

比如下图中房屋装修信息填写流程,用户面对这种多流程任务时,耐心往往很低,我们可以在设计时添加系统状态进度条,时刻提示用户当前的节点,此方法应用场景还有注册登录、信息完善等更多场景,目的都是为了让用户达到交互可预测的状态,提升用户体验。

4. 遵循视觉动线

我们在设计内容复杂的网页时,建议根据产品诉求和用户目标,合理的放置元素,以此来达到目标,另一方面符合眼动规律的浏览顺序,可以让用户不会产生视觉疲惫,每个视觉点停顿时看到元素都是不同,提升用户体验。

5. 合理的字体加粗

在设计大面积文字排版时,应当注意字体粗细,它决定着我们的设计是否易读性高。

无论标题还是内容,字体过重或者过轻都会降低文本的基本识别度,而且遇到文字信息过多的情况,长时间专注文本的识别很容易出现视觉疲劳的情况。

在设计UI界面中,无论是长文字体还是模块元素字体,我们都要注意字体的重量,保证基本识别度的同时,优化视觉重心,确保用户在阅读时不容易陷入疲劳。

6. 孰轻孰重

当界面中存在多个入口时,我们可以对这些入口进行优先级处理,以突出核心功能为目的,用户浏览界面的动作是大面积扫读的形式,这就意味着我们需要弱化无关信息,既保证了界面的基本美观性,又能够具备良好的体验。


作者:CKin.记事本
转载请注明:人人都是产品经理

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


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


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


19大常用调性,160种配色方案

博博

矩形色块为背景色,圆形色块为画面中图片元素或文字使用的颜色。根据需要可以把其中的某些纯色转变为单色渐变,或者也可以把某些单色渐变转化为纯色。另外,在不包含黑白灰的色彩组合里,仍可以根据需要自行加入黑白灰,比如用于填充文字的颜色。


1. 高端


视觉调性高端的色彩,通常具有明度低、饱和度低、颜色数量少等特点,所以很多高端的设计都会以深色作为背景色,因为深色更显低调、更具神秘感,所以给人的感觉更高贵。然后以亚金色、银色、桔红色、白色等作为辅助色。


2.科技


想要表现科技感,色彩的整体调性通常会偏冷色系,明暗对比要强,且通常会使用渐变色。比如以深蓝色到蓝色的渐变作为背景色,然后用高饱和度、高亮度的青色和紫色作为辅助色,这时这些辅助色就会非常的跳跃,具有一种发光的效果。


3.时尚

其实所有调性的配色都应该要尽量时尚一点,即使是想表现复古,也不能太土,所以这里所说的时尚特指偏向年轻、潮流的时尚。这种色彩通常具有饱和度高、明度适中、色相对比较大等特点。葱爷这里概括了两类,一类是以纯色作为背景,这种色彩比较适合于品牌设计、网页设计、画册设计等;一类是以渐变色作为背景,这种色彩比较适合于电商设计、广告设计等。


4.酷炫

酷炫是指那种视觉效果特别张扬、甚至是极具个性的色彩搭配,比如近几年比较火的蒸汽波风格、酸性风格、赛博朋克风格、故障风格,其色彩就属于酷炫类的。该类设计通常也是以深色作为背景,图片元素会使用高饱和度且对比很强的渐变色,色彩相对较多。


5.好吃


即让人感觉很有食欲的色彩搭配,这种色彩通常以暖色为主,比如红色、橙色、黄色。饱和度较高、明度较低的组合方式通常用于餐饮行业;而饱和度较低、明度较高的色彩组合通常用于甜点、饮料等行业。


6.夏天


目前正值火热的夏季,所以葱爷专门整理了一些适合表现夏季的好看色彩,该类色彩通常会以蓝色、青色、绿色这种冷色系最为主要颜色,然后以黄色或红色、白色作为辅助色,这种色彩组合会给人清凉、快乐的感觉。


7.清新


小清新的视觉感受为轻松、柔和、淡雅,要达到这样的效果,颜色的明度通常是比较高的,饱和度偏低,常用的颜色有浅青色、浅绿色、浅黄色、粉红色等,在奶茶、女性护肤品的相关设计中比较常见。


8.快乐

快乐是张扬的、是活泼的,所以快乐的色彩饱和度较高、明度不会太低、色彩的种类会比较多,通常也是以暖色为主,但是会搭配冷色一起使用。黄色具有很强的快乐、阳光属性,所以想要表达快乐,黄色通常是少不了的。

9.可爱


跟儿童、年轻女性相关的设计,通常需要表现出可爱的调性,这类色彩通常是用冷色和暖色相互组合,颜色的明度同样不会太低,否则会有压抑的感觉,另外饱和度也不要过高,饱和度稍低一点效果会更柔和一些。


10.健康


想到健康我们立马就会想蓝天白云、青山、绿色的草地和树叶,还有黄色的小野花等等,所以蓝色、绿色、青色、黄色、白色都是常用于表现健康的色彩,红色也可以偶尔作为点缀色加进来。由于健康的调性也是要给人一种舒适、轻松的感觉,所以整体的颜色明度不要太低。


11.运动


要想让色彩动起来,对比一定要强,可以是色相对比、也可以是明度对比和饱和度对比。橙色和黄色是两个很具活力的的颜色,所以常用于表现运动的设计里。

12.科幻


这是一些科幻电影、机动游戏的海报设计常用的色彩搭配组合,给人的视觉感受是稳重而大气,科技感和神秘感并存,所以背景色通常也比较暗,喜欢用青色和黄色这种比较亮的颜色作为点缀。

13.喜庆



在设计节日海报或促销海报时,通常需要表现出喜庆的调性,有些设计师会局限在大红色、黄色、和橙色里,这样搭配出来的色彩容易土,而想要解决这个问题,一方面可以加入冷色搭配使用,另一方面颜色的饱和度和亮度也不要过高。


14.复古


这类色彩的特点是颜色的饱和度会相对低一点,而且大多数情况下,整体的明度通常也不会太高,常用类比色搭配和对比色搭配。

15.中国风


具有中国风特色的颜色和色彩组合有很多,葱爷这里仅列举了8个组合。这类色彩同样饱和度不会达到最高,有点复古和充满文化气息的感觉。胭脂(暗红色)、缃色(中黄)、绀青(深蓝色)、黛(褐色)等是中国风常用的颜色。


16.梦幻


梦幻具有奇妙和神秘的感觉,好像在黑暗中找到了一点曙光,奇遇了惊喜一般,所以大多数情况下,背景色会使用从深色到亮色的渐变。颜色相对会比较丰富,而且以渐变色居多。


17.女性


女性是温柔的,是感性的,所以该类色彩组合通常为类比色,偶尔会用一点对比色作为点缀,以增加画面的活泼气息,颜色的明度和饱和度都不能太低,当然饱和度最好也不要过高,粉色、紫色是常用于表现女性的色彩。

18.优雅


优雅可以理解为低调、高级、温和、安静,所以这类色彩的对比通常不会太强,饱和度也会比较低,整体的色彩调性会偏中性,常用卡其色、麻色,还有单色组合及类比色组合。


19.经典色彩组合

除了以上十八大调性,葱爷还给大家推荐一些经典的配色,很难把它们具体归为哪一类,但是我们在做很多设计时,用上这种配色总能得到不错的效果,比如红黄黑、红白蓝、黄绿黑、等等,在很多平面海报设计中经常能看到。



作者:葱爷      来源:站酷

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

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

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

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

博博

B 端产品主要是 Web 端产品,空间大、操作多,内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系,从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。

格式塔主要包括 7 个基本原则:

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

今天我们就来总结下,格式塔原理在 B 端产品中是如何应用的?

接近性原则


我们先看 2 张截图,分别是不同分辨率下的界面效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

可以明显的感觉到高分辨率下,菜单列间距离较大,菜单的归属关系很清晰。而低分辨率下,菜单间的距离变小,特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则,距离近的关联亲密,距离远的就各自独立分组。

当我们想要传达给用户层级关系时,就需要善于利用接近性原则。例如表格上方的功能按钮,通常我们将高频、核心操作放置在左侧,低频、辅助功能放置在右侧。通过增大元素间的距离,达到功能分区的目的。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

相似性原则


相似性原则是通过颜色、尺寸、图形等方面的共同属性,实现信息的分组或者高可读性。

例如在可视化图表中,不同范围值的指标采用不同的背景色。通过背景色的差异,将同一范围内的数据形成视觉关联,提高用户对信息的识别效率。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页,都采用了双列设计,左侧主要以高频的业务功能信息为主,右侧是辅助运营信息。两列尺寸宽度有明显差异,用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异,并有效地突出业务信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

闭合性原则


IBM、苹果的 Logo 设计,无论是“用刀砍过”,还是被“偷咬了一口”,用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在 UI 设计中,则会通过对齐方式,形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色,内容区借助标题、卡片对齐形成视觉闭合空间,最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

另外闭合性是需要元素之间相互辅助的,单独的元素无法构建出闭合空间。以下图为例,虽然四个小的卡片做了间距分割,但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

连续性原则


用户更习惯于从左到右的横扫阅读,因此连续性主要体现在横向空间中。

下图中,虽然左侧的标签文字与右侧的内容信息有较为明显的间距,高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体,而是理解为两组信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在某些场景中,如果信息平均分布,不会产生连续性的视觉感知。

例如下图指标监控中,指标都是采用小卡片,间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点,没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时,需要逐个检索,花费的成本更高。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

简单对称原则


通过上述很多图片,我们可以看出页面元素基本都是横平竖直,中规中矩的元素和分割方式。或许有些单调乏味,但是胜在简单,不会带来额外的视觉噪点。

特别是 B 端产品,基本看不到异形的存在,甚至全圆角矩形都很少见到。即使有异形,也只是作为视觉表现元素存在于内容中,而不会作为空间的划分边界。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

主体与背景原则


主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性,凸显弹窗信息。

当我们需要着重表现内容时,同样适用于主体与背景原则。例如登录界面的设计,会通过差异化的背景、阴影等方式,带给用户清晰的视觉层级,适当凸显输入框的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

而 B 端内容区是核心空间,基本都是采用纯白背景,与页面背景形成对比,从而占据信息的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

共同命运原则


共同命运原则听起来有点玄学,指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少,我没有找到合适的案例解释这个原理。

在移动端产品中有些应用案例。比如 iOS 系统中,桌面布局编辑态下抖动的图标,可以与静态不可编辑的内容形成隔离效果,视觉引导性更强。同样今日头条频道编辑时,也采用了抖动效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

总结


虽然 B 端产品没有 C 端色彩丰富,表现力上没那么炫酷。但是两者对信息传达的要求是一样的,要求和谐、有序、层次分明,辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。

格式塔原理不仅限于视觉表现,产品经理或交互设计师在原型设计时,也要重视格式塔原理,辅助设计方案表达,提高团队间的协作效率。

今天的分享就到这里了。如果有更好的案例,欢迎评论区留言分享给大家~


作者:子牧先生

转载请注明:优设网

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

魏华的微信.png

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

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

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



超全干货!五个方面帮你掌握标签栏设计

博博

快速迭代的产品存在着同质化趋向,如何做出差异性?如何将品牌精神向外传达?如何在有限的时间内,满足产品需求的同时带给用户更好的

体验感,进而体现设计的价值呢?静态画面动起来或许是个不错的选择!

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计


作者:多点MP

转载请注明:优设网

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

魏华的微信.png

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

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档