首页

交互设计师该如何提升“软实力”?

seo达人

我将交互设计师应该具备的能力总体上划分为“硬实力和软实力”两个大方向:

硬实力是指专业能力,包括交互设计能力、对所负责的业务线与对应产品的理解程度、对产品面向的用户群体与用户使用场景的了解程度、对设计规范与组件的熟练应用、数据分析能力、对设计工具的熟练使用、以及具备一定的视觉审美。

软实力是指通用能力和个人影响力,通用能力主要包括“沟通与表达能力、推动与执行能力、项目管理能力、复盘总结能力”;个人影响力主要包括“分享、指导、创新能力”。

本文将结合我的工作经验,以及不同公司招聘要求中都有的共性点,向大家介绍如何在日常工作中培养和提升自己的软实力。

下图是我简要绘制的“交互设计师能力框架图”:关于硬实力这部分内容,在我之前的文章中已经梳理过一些,感兴趣的可以回头翻看。

 

一、通用能力

1. 沟通与表达

首先你需要分析自己的性格特点,一般外向的人擅长沟通,即便不是外向型,也最好不要是内向不爱说话。只有你发自内心的愿意主动与他人沟通,别人才能感受到你的亲和力

其次不管与怎样性格的人沟通,把握的第一个原则是“就事论事”:没必要为了事情大声争论,甚至上升为人身攻击,我们沟通的初心是为了解决问题,应该尽可能的“求同存异”。

你需要做的是想办法解决影响事情顺利发展的各种障碍,过程中遇到的非主观因素记录下来便于后续总结。

表达是指将思维所得的成果用语言等方式反映出来的一种行为,是向他人正确传达自己的想法。

比如与同事沟通表达自己的观点、公开演讲、获奖感受等,表达的定义里包含一个关键词“思维所得”:这意味着你需要在平时就有一定的思考沉淀,不然你无法做到“准确且清晰”的传递自己的观点

需要把握的第二个原则是“不卑不亢”:既然是一个Team,团队最终目标是一致的,只不过不同成员的岗位角色不同,分工内容不同,没有谁一定要给谁妥协,或者谁一定要强硬到底。按照已经发生的客观事实有理有据的陈述自己的观点即可。

最后需要把握的第三个原则是“换位思考”:用户体验设计领域的设计师经常提到一个词“同理心”。我们需要站在用户角度审视自己设计的产品,我们需要站在不同岗位角色角度理解他人的难处…无论对内还是对外沟通与表达,能做到换位思考的人,必然考虑问题更加周全、更加有深度。

 

2. 推动与执行

执行力是指完成任务目标的操作能力,评判执行力强弱的标准是效率与效果。执行其实是践行的过程,践行的过程中效率可能没那么高、最终的效果可能也没有多满意,但无论如何,做这件事都为你积累了宝贵的“践行经验”,举重若轻的背后一定经历过多次失败与不堪。

执行力是每一位员工都必须具备的基础能力,而推动力则是针对中高阶水平设计师提出的更高要求。

“从单纯的执行任务”升级为“从头到尾推动事情落地”,这是职场打怪升级的必经之路!推动力不再是单一的能力要求,而是“多项能力”的综合体现,推动落地的过程中涉及到沟通表达、组织协调、向上管理、项目管理等能力。

 

3. 项目管理

往小了说是对自己承接任务的管控,范围相对小,包括项目前期涉及到的“与上游业务同事和产品经理梳理需求、提出合理建议、预估排期”;项目推进过程中涉及到的“准时交付产出、问题沟通与解决、风险点预估与分析、及时向上汇报进展、设计验收”;项目后期涉及到的“上线验收、遗留问题记录与跟进”。

以上提到的是设计师在设计层面应该做好的事情。再往大了说,你可能会作为一个分支项目的牵头人,你要管控的不单是项目在设计阶段的开展,还会更多涉及到与上游业务方、产品经理;与下游开发同事、测试同事;与外部合作方的协作等。

随着项目复杂度提升,对负责人项目管理能力要求会越高,因为会涉及到方方面面,可能包括业务对接洽谈、细节协商达成一致、进度把控等。

作为交互设计师,有机会深入参与到项目推进的全流程中,这既是对你专业能力的深化,也进一步加强了你对所负责业务线的理解程度。

如果你遇到这样的机会,请珍惜把握,尤其是首次承担类似职责。谁都是从0到1、从无经验到身经百战走过来的,不要有过多的担心害怕,撸起袖子加油干!当你经历过再回首时,你会感谢当初自己的勇敢与自信。

 

4. 复盘总结

近期面试一些交互设计师,聊到关于项目需求的复盘时,有的应聘者在公司现有机制下没有机会接触到需求上线后的数据表现或者用户反馈;有的应聘者总结分析的不够深入或者视野局限于设计层面的改进。

我之前也在小的创业公司工作过,以上类似现象在许多公司还是比较普遍的。我的看法是:围绕个人能力发展思考并决策。

  • 如果你所在的公司没有建立复盘机制,你也很少能接触到相关数据,一方面你可以尝试着利用上面说的推动能力,试着推动建立这个机制,至少可以先从你所在的小部门开始试行;另一方面如果你是在类似国有企业,反馈信息涉及到保密,这是客观因素与你的努力无关,这时候需要认真考虑换工作的事情了。
  • 另外一种情况是有机会获取相关反馈信息,但有时候承接的业务需求不间断,再加上许多公司的复盘机制算是锦上添花,不是非做不可的,所以针对设计师个人而言,做好这件事更多依靠的是“自驱力”。

复盘总结不单针对工作项目,另外重要的方面是自我反思。从过往的工作经验中思考做的好的地方,不好有待提升的地方,需要补齐的短板是什么,职业生涯下一阶段的规划是什么… 我认为尤其对于交互设计师而言,阶段性的反思总结,有助于更好的认清自己能力优势与劣势,有助于逐步搭建上面提到的自己的能力框架。

 

 

二、个人影响力

1. 分享

分享其实就是将某方面复盘总结的结果拿出来与他人沟通交流,分享形式和分享内容围绕分享目的可以灵活调整。比如我之前的文章《如何做好一场部门内部分享?》中提到过关于分享形式与内容的创新,感兴趣的可以翻看。

当初之所以要做出这个改变,是因为我们认为原有的单个人框定大概分享内容范围进行分享的方式,不能很好的帮助分享人和被分享人提升能力,同时分享内容容易脱离现有业务。当然不同公司分享目的考虑的侧重点不同,所以算是因公司而异吧。

对个人而言,如果你平时针对项目、设计专业、工作流程、存在的问题等有过一定程度的思考,你会积累一些沉淀,无论是优秀的值得借鉴的内容、还是失败的值得引以为戒的内容,都可以与同事或者专业领域的朋友交流讨论。反过来在这个过程中,又会激发你更多的想法,拓展你的眼界与思维。

 

2. 指导

团队内有工作经验或者熟悉工作流程的中高阶设计师,针对初入职场的新人或者刚来公司还处于适应部门环境的有工作经验的职场老人,进行专业层面和工作流程的指导。

许多公司比较注重公司文化对新人的输出,但针对日常工作的指导带教却没有十分明确的规定。

辅导的效果很大程度上取决于指导人,如果某天你有机会带教新人,不要轻视这项工作,首先在心态上能够做到上面提到的换位思考,你自己也是从新人一路走过来的,能够切身感受到新人的诉求。

其次也是对你责任心的侧面考察,在职场有一句话我认为是适用的:你能承担多大的责任,就值得拥有多大的回报。

 

3. 创新力

提到创新许多人觉得有些虚无缥缈,因为现实情况是处理不完的待解决问题,哪还有时间和精力做创新,就算提了创新的点也很难有资源支持。很久一段时间我也是这么想的,后来看到两个观点使我茅塞顿开:

  • 创新不是颠覆,也不一定是惊天动地的大动作,更多的可能是微创新,一个有可行性有突破性的想法。
  • 如果你对所做的事情保持有好奇心或者热情,千万不要被日常的工作消磨掉。好奇心是创新的源动力。

生活中太多的人会告诉你,只能顾好眼前的苟且,没有精力和金钱畅想诗与远方,如果你也这么想并且这么去做,你只会被大众牵着鼻子走。更为可怕的是,慢慢的你丢掉的是那些原本可以让你更为成功的优势点。

 

 

三、总结

以上是我提炼出的我认为一名优秀的交互设计师应该具备的“软实力”, 这部分能力应该是成为高阶设计师的衡量标准之一。无论是职场新人还是老鸟,重视和持续打磨自身的通用能力与个人影响力,才能不断提升自己的不可替代性。

 

原文地址:人人都是产品经理

作者:Viksea

 转载请注明:学UI网》交互设计师该如何提升“软实力”?

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


如何让用户始终有掌控感——信息架构

纯纯

信息架构是产品的骨架。具体而言,就是一款产品有几个一级页面,以及支撑起整个产品的一级页面、二级页面各有几种内容样式。所谓一级页面,微信的“发现”页就是一个一级页面;在“发现”页点“朋友圈”,进去的就是一个二级页面。所谓内容样式,Banner 是一种内容样式,九宫格是一种内容样式,设置页面那种列表也是一种内容样式。

 

这样的信息架构,有什么价值?

 

 

01 信息架构的价值:掌控感与健康迭代

 

对用户而言,信息架构的主要价值在于掌控感;对产品而言,信息架构的主要价值在于健康迭代。

 

1. 掌控感

 

如果房间里很乱,到处都堆满了东西,常穿的衣服也找不到了,我们就很容易变得烦躁不安。相反,如果混乱的房间被收拾得很整洁,我们的心情也会随之变得愉悦起来。

 

这中间的原因是什么?

 

个人觉得,从原始社会到 21 世纪,我们人类一直生活在竞争中,所以一直在追求一种对生活的掌控感。这种掌控感,会让我们找到一种存在感和价值感,从而给身处竞争中的我们一种安全感。一个收拾得井然有序的房间,会让我们觉得一切尽在掌握中;一个胡乱塞满东西的房间,则会让我们觉得这个房间处于失控状态,从而引发烦躁不安。

 

一款 App,如果主要的几个一级页面也都塞满了各式各样的内容,那么用户通常也会感到烦躁不安。这是因为用户不能马上理出头绪,不能马上获得那种掌控感。另外,如果大的改版经常让用户体会到这种烦躁不安,用户就会对这款 App 感到不满和失望,甚至失去信心和期待。

 

所以说,信息架构的第一个价值,就是让用户始终有掌控感。

 

2. 健康迭代

 

产品的更新迭代,有时会出现“发福”和“微整形”的情况。这都属于不健康的迭代。

 

所谓发福,就是变得臃肿了,比如一级页面突然增加了很多内容样式。所谓微整形,就是和之前比有点乱套了,比如有的一级页面突然消失了、有的一级页面突然出现了、有些常用的功能突然找不到了,诸如此类。

 

一款产品,如果大的改版总是通过发福、甚至微整形的方式实现,用户就很难获得掌控感。

 

反过来,一个优秀的信息架构,是接近“冻龄”的。也就是说,不管产品怎么更新、怎么加新功能,都能简单如初,都能让用户马上获得掌控感。典型的例子是微信:微信已经加了很多功能,但整体给人的感觉依然是简单的。

 

这样的信息架构,很少发福,也几乎不做微整形,所以能让用户永远有掌控感,从而确保产品能够健康迭代。

 

 

02 怎样实现信息架构的价值

 

什么样的信息架构,能够实现“掌控感”和“健康迭代”?

 

其实参考答案刚才已经出现了,那就是接近冻龄的信息架构。或者更确切地说,是一种“以不变应万变”的信息架构。

 

这里的不变,是指信息架构看起来永远没有明显变化,永远都很简单。万变,是指不断新增的功能,不断变化的功能。

 

如何做到以不变应万变?一级页面和二级页面都很关键,其中最核心的是一级页面。这里也顺便抛一个问题:一级页面,用来干啥?

 

一级页面主要用来干三件事,分别是:提供掌控感、提供常用功能、提供小入口。也就是说,一级页面尤其要把掌控感给到用户,要让用户快速找到常用功能,同时还要为不常用的功能提供一个小入口。需要说明的是,这个理念可能不太适合一些商店类产品,比如淘宝这样的电商产品,所以仅供参考。

 

那如何完成这三件事?主要有以下四个要点。

 

1. 不要超过 4 个一级页面

 

4 个和 5 个,它俩之间存在微妙的区别。比如我们给手机号或银行卡号分段时,更喜欢每段最多分 4 个数字,而不是 5 个,直观对比见下图。


4 个还是 5 个

 

很多 App 的底部导航栏,也是只有 4 个Tab,即 4 个一级页面。受生活经验等因素影响,当我们看到 App 有 4 个一级页面时,内心或潜意识里可能会觉得:哦,4 个,还算简单,基本能记住;而当看到有 5 个一级页面时,可能会感到一丝压力:5 个啊,有点多了。

 

总的来说,我们更偏爱只有 4 个一级页面的产品,因为 4 个仍在简洁的范畴内,5 个就已经开始走向复杂。在《微信背后的产品观》这场分享中,张小龙也提到过:“微信保证只有 4 个底部 Tab。”

 

2. 不要超过 3 种内容样式

 

Keep 6.0 系列的“探索”页面有 5 种内容样式,显得很复杂。微信的 4 个一级页面中,“发现”和“我”页面只有 1 种内容样式,“微信”和“通讯录”页面只有 2 种内容样式(加上顶部的搜索框),显得非常简单,和 Keep 的对比如下图所示。

 

Keep 6.0 系列与微信的内容样式数量

 

像微信这种内容样式数量上的极简,可能很多产品难以做到。那么,我们不妨退而求其次,早期先从 1 种、2 种内容样式开始。后期加功能了,可以考虑第 3 种,谨慎考虑第 4 种,尽量不要增加第 5 种,因为一定会变得复杂。

 

大家可能会说,产品的功能很多,3 种内容样式不够用。

 

针对这种情况,只要逻辑上不存在大的问题(比如把“支付”放到“通讯录”页面),就可以尝试把不同内容合并成一种样式。微信在这方面就做得很好,大家可以参考它的设计。比如下图的“通讯录”页面,联系人上方那些内容,和联系人不是同一类内容,但它们共用一种内容样式——一个简单的图文列表。

 

微信“通讯录”页面:不同内容合并成一种样式

 

3. 不为二成需求,去打扰八成用户

 

产品设计里存在一个比较常见的问题,就是往一级页面塞很多内容或功能,其中有相当一部分是用户日常用不到的,这种设计容易让人觉得臃肿。比如 Keep 6.0 系列的“运动”页面,就用了较大空间来推荐付费计划和运营活动,如下图所示。

 

用较大空间来推荐付费计划和运营活动的 Keep 页面

 

相信有相当一部分用户是不需要这些内容的,所以这其实也是一种打扰。这种打扰会影响到这些用户对这个界面的掌控感。

 

这种现象有两个可能的原因。一是企业担心用户不用这些功能,所以就在一级页面用很多空间来展示它们,Keep 的例子应该属于此类。二是有部分用户提建议,所以企业就加了这些功能。

 

关于第一个原因,个人观点,有些功能本身就属于二成需求,在一级页面占用太多空间不仅改变不了这个现实,还会对用户形成打扰。

 

关于第二个原因,个人看法,用户的建议通常只代表个人立场,而企业至少要代表大部分用户的立场。比如,网上就有人建议微信在朋友圈加一个屏蔽别人的功能,实际上微信有这个功能,只是一直隐藏,没有放出来——因为用的人少,它属于二成需求,放出来的话会对八成用户形成打扰。

 

总的来说,理想情况是接受现实、尊重规律:是八成需求就提供八成空间,是二成需求就提供二成空间。具体参考如下图所示。

 

是八成需求就提供八成空间,是二成需求就提供二成空间

 

4. 尽量不在标题栏使用 Tab 或下拉框,增加维度

 

这其实是张小龙分享过的一个观点,我个人很赞同,就直接引用一下。下面直接看两个例子。Keep 6.0 系列的前三个一级页面,标题栏都使用了 Tab,就显得内容很多,有点复杂,如下图所示(仅展示前两个)。

 

使用了 Tab 的标题栏

 

微信中拥有标题栏的前三个一级页面,其标题栏都没有使用 Tab 或下拉框,就显得简单、内容少,如下图所示(仅展示前两个)。这也是微信保持简单的一个重要原因。

 

没有使用 Tab 的标题栏

 

 

结语

 

一般情况下,产品都需要更新迭代:增加新功能,完善旧功能。

 

用户则是一个矛盾体:一方面对新功能和新事物怀有好奇心;另一方面又希望每次打开常用的产品时,都有一种回到家一样的熟悉感和一种家里井然有序的掌控感。

 

好的做法,就是类似微信那样:尽管加了新功能,但是看起来没有明显变化。也就是说,以“不变”的信息架构,来应对万变的功能。

原文地址:站酷    作者:SnowDesign


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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




如何合理使用大标题设计风格?

纯纯

一、什么是大标题设计风格?


大标题导航栏是从iOS11发布后,开始在中国的UI设计师中急速流行的一种设计风格。其实这种风格最早在2016年就在硅谷盛行了起来,源自一位叫Michael Horton的设计师发表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章,这篇文章提到的Complexion Reduction这种设计风格(下文简称CR)就是大标题导航栏的起源,即大、黑、粗的标题。

 

CR这种风格有四个明显的特征:

 

1.删除多余的颜色;

2.又大、又黑、又粗的标题;

3.简单、可识别的图标,也不要使用颜色(常用黑灰色);

4.留白留白留白,更多的留白。

 

下图是比较典型的使用CR风格的APP(分别是爱彼迎、ENJOY、火球买手、MOO音乐),大家可以结合CR风格的4大特征感受一下:

 不知道小伙伴们有没有发现,这几个APP的功能会比较单一或是某一垂直领域,且视觉上都给人一种高品质,超极简的感觉,人们会更多的关注界面中内容本身,对内容的要求也会更高。



二、中西方的差异


那么问题来了,为什么这种CR风格鲜少出现在中国特有的淘宝类电商APP中呢?

 

国外的APP大都是小而精致的,一般一个APP只能做一件事,功能比较单一,而国内的淘宝类电商APP,携程类的综合旅游APP所包含的业务与功能都非常广泛,在狭小的手机屏幕上展示更多的商品就显得尤其重要,CR风格提倡的大标题大留白无疑不是在挑战老板的底线。

 

实际上即便使用大标题风格也不要盲目采用iOS11官方的大标题导航,其原因在于中英文的差异。

 

英文大标题一个单词有大小写的变化,富有一定的层级变化,而中文如果使用iOS11给定的68px(二倍图下)的字号,那真是大到闪瞎我的眼。中文一个词语每一个字都是差不多的大小,没有层级上的变化,太大的字体在整个界面中看起来会很奇怪,如下图:



三、合理使用大标题


虽说iOS11那么大的标题不适合大部分的APP,但并不是说大标题风格就不适合大部分APP了,实际上目前大多数的APP依然使用了大标题的风格,不过进行了一定的改良。

以下参考尺寸均是二倍图下的尺寸


1.大标题导航栏


大标题导航栏大致有两种样式,一种是延用iOS11的大标题导航栏,一种是稍微改良使用的大标题导航栏。


1)iOS11大大大标题导航栏


iOS11的大标题导航栏标题字号约为68px、栏高192px(二倍图),大标题对齐导航栏左边,页面滑动时转换为常规的导航栏。

 

国内使用这种大大大标题的APP比较少,标题文字实在太大,若只作为导航标题占位,会极其浪费屏幕空间。

 

使用这种大大大标题时,导航标题一般都有一定的意义,如下图:

饿了么的订单页详情页使用了这种大大大标题,但是标题赋予了订单状态的意义,比起单纯的“订单详情”,这样有一定意义的标题文字则可考虑使用iOS11的大大大标题。


2)改良大标题导航栏

某些APP在使用大标题导航栏时,在iOS11的大标题导航栏上进行了一定的改良,最常见的就是一定程度缩小了标题的字号,如下图:

这三个APP的标题字号都没有到68px,常用40px~48px的字号,陌陌与天猫是固定在顶部导航栏的,而Kepp会随页面上滑变为常规标题导航。

 

一般这种固定的较大标题都会隐去导航栏的分割线,显得导航栏更高,更有呼吸感。像是天猫的大标题导航栏使用的色块,与下方模块又比较近,就显得很拥挤。



2.Tab栏大标题

Tab栏的文字标题切换样式最常见的就是颜色变化,加小短线等,随着大标题风格的流行,Tab栏的切换样式也出现了大标题的选中样式,选中字号通常采用40~48px(甚至更大,如虾米音乐的72px),而非选中标题通常则是采用的28~32px,如下图:

使用这样的Tab栏,能够迅速帮助用户辨识自己所在的位置,就差指着自己说“这儿”了。需要注意的是一个屏幕内尽量只在一级Tab使用大标题切换,与二级Tab做出区分。



3.模块化大标题

大标题的风格除了应用在界面顶部导航,在模块化标题上应用的也非常多,有些APP即便顶部导航不使用大标题,却会在模块化标题上使用较大的字号,如下图:

这种模块化大标题常配合留白分割的界面使用(这也符合了CR风格的特征),模块化大标题在留白分割的界面上能够更好地帮助上下模块做到层级区分的作用。



4.文字变大变粗变黑

抛开大标题不谈,不知大家有没有发现,现在越来越多的APP的内容标题、正文内容的字体也在逐渐变得更黑更粗,甚至更大,毕竟我们的手机变得越来越大了。如下图:

即便是拥有复杂业务的淘宝与飞猪,在某些内容标题上也变得更粗更黑,一眼看过去用户能更容易找到自己想看的内容。


四、划重点


· 大标题设计风格源自Complexion Reduction这种设计风格,CR这种风格的特征就在于颜色少、标题大黑粗、图标通用简单、大留白;


· 由于中英文字体的差异,中文使用超大字号没有英文富有变化;


· 合理使用大标题,做一些适当的改良。常见用于导航栏、一级Tab选中标题、模块化大标题以及内容标题。

原文地址:站酷    作者:人类君


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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



用户心理定律及优秀案例分析

纯纯

将普遍存在的人性用户心理规律运用于设计,增加设计的温度。

近来对用户心理比较感兴趣,去看相关设计资料的时候发现相关内容重复性较高,多方搜集资料结合自己的一些分析总结出一篇补充。

定律是钥匙,在遇到让我们上瘾,持续付出或获得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能为我们的后续的设计吸收。










undefined

undefined

undefined

undefined

undefined



原文地址:站酷    作者:唐小葱


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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


什么是数据可视化

seo达人


01. 什么是数据可视化?

数据可视化即数据的图形表示,旨在以更易于掌握和理解的有效方式传达大量海量数据。从某种意义上说,数据可视化是原始数据和图形元素之间的映射,它决定了这些元素的属性如何变化。可视化通常是通过使用图表,折线或点,条形图和地图来进行的。

  • Data Viz是描述性统计的一个分支,但它需要设计,计算机和统计技能。
  • 美学和功能齐头并进,以直观的方式传达复杂的统计信息。
  • Data Viz工具和技术对于做出以数据为依据的决策至关重要。
  • 在形式和功能之间取得了很好的平衡。
  • 每个STEM领域都将从了解数据中受益。

Jorge Rey的化石燃料Dataviz

 

02. 它是如何工作的?

如果我们能看到它,我们的大脑就可以内在化并对其进行反思。这就是为什么理解图表和查看趋势比阅读大量的文档要花费大量时间和精力进行合理化更容易和有效的原因。我们不想重复人类是视觉生物的陈词滥调,但这是事实,可视化更加有效和全面。

在某种程度上,我们可以说数据Viz是讲故事的一种形式,目的是帮助我们根据数据做出决策。这些数据可能包括:

  • 追踪销售
  • 识别趋势
  • 识别变化
  • 监控目标
  • 监测结果
  • 合并数据

秘密7 –塞尔吉奥·费尔南德斯(Sergio Fernandez)提出离婚可视化的理由

 

03. 什么时候使用?

数据可视化对于每天处理大量数据的公司很有用。必须立即显示您的数据和趋势。胜过浏览庞大的电子表格。当趋势立即脱颖而出时,这也可以帮助您的客户或观看者理解它们,而不会迷失在混乱的数字中。

话虽如此,Data Viz适用于:

  • 年度报告
  • 简报
  • 社交媒体微叙事
  • 信息手册
  • 研究
  • 趋势贩运
  • SciViz
  • 烛台图,用于财务分析
  • 确定路线

 

可以看到数据可视化的常见情况是在销售和营销,医疗保健,科学,金融,政治和物流中。

娜塔莉·祖伊娃(Natalie Zuieva)的租金和薪金统计信息图

 

04. 为什么要使用它?

简短的答案:决策。数据可视化具有快速识别模式和解释数据的不可否认的好处。更具体地说,它是确定以下情况的宝贵工具。

  • 识别变量关系之间的相关性。
  • 获得有关受众行为的市场见解。
  • 确定价值与风险指标。
  • 随时间监视趋势。
  • 通过频率检查速率和潜力。
  • 应对变化的能力。

太空垃圾-BBC科学焦点,作者:Federica Fragapane

 

05. 数据可视化类型

您可能已经猜到了,Data Viz不仅仅是简单的饼图和图形,而且还具有视觉吸引力。该分支用于可视化统计信息的方法包括一系列有效类型。

 

地图

地图可视化是一种很好的方法,可以分析和显示与地理位置相关的信息,并通过地图准确地将其呈现出来。这种直观的方法旨在按区域分布数据。由于地图可以是2D或3D(静态或动态),因此可以使用多种组合来创建Data Viz地图。

COVID-19支出数据可视化POGO,George Railean

 

但是,最常见的是:

  • 区域地图:显示国家,城市或地区的经典地图。对于每个区域中的不同特征,它们通常以不同的颜色表示数据。
  • 线图:它们通常包含空间和时间,由于对特定场景进行了分析,因此通常是路线选择的理想选择,尤其是该地区的驾车或出租车路线。
  • 点地图:这些地图分发地理信息的数据。它们是企业确定区域中建筑物确切位置的理想选择。
  • 热图:它们根据特定属性指示地理区域的权重。例如,热图可以按区域分布感染者的饱和度。

 

图表

图表以图形,图表和表格的形式显示数据。由于图形确实是图表的子类别,因此它们经常与图形混淆。但是,两者之间的差别很小:图形显示数据组之间的数学关系,并且仅是表示数据的统计图方法之一。

图表数据可视化,作者:Madeline VanRemmen

 

顺便说一句,让我们谈谈数据可视化中最基本的图表类型。

条状图

他们使用一系列的条形图来说明数据。它们是较轻量数据的理想选择,并遵循不超过三个变量的趋势,否则,条形变得混乱且难以理解。

 

饼状图

这些熟悉的圆形图按部分划分数据。切片越大,部分越大。它们非常适合描述整体的各个部分,它们的总和必须始终为100%。当您需要显示一段时间内的数据发展或缺少任何部分的价值时,请避免使用饼图。甜甜圈图与饼图具有相同的用途。

 

线形图

他们使用一条线或多条线来显示随着时间的发展。它允许同时跟踪多个变量。一个很好的例子是跟踪品牌多年来的产品销售情况。面积图与折线图具有相同的用途。

 

散点图

这些图表使您可以通过数据可视化查看模式。它们有两个不同值的x轴和y轴。例如,如果您的x轴包含有关汽车价格的信息,而y轴包含有关薪水的信息,则正向或负向关系将告诉您某人的汽车所反映的薪水。

 

表格

与我们刚刚讨论过的图表不同,表格几乎以原始格式显示数据。当您的数据难以以视觉方式呈现,并且旨在显示应该阅读而不是可视化的特定数值数据时,它们是理想的选择。

数据可视化| Aishwarya Anand Singh的养蜂与否


例如,图表非常适合显示特定区域内一段时间内特定疾病的数据,但是当您还需要了解具体原因(例如原因,结果,复发,治疗时间和治疗方法)时,最好使用表格。

 

06. 数据可视化与信息图表

5个主要差异

它们并没有什么不同,因为它们在视觉上都代表数据。通常,您搜索信息图表并找到标题为“数据可视化”的图像,反之亦然。但是,在许多情况下,这些标题都不会引起误解。这是为什么?

  1. 数据可视化仅由一个元素组成。它可以是地图,图表或表格。另一方面,信息图表通常包含多个Data Viz元素。
  2. 与可能简单或极其复杂且繁重的数据可视化不同,信息图表简单易行,并且面向更广泛的受众。即使对于信息图表代表的研究领域之外的人,后者通常也是可以理解的。
  3. 有趣的是,数据Viz不提供叙述和结论,而是提供这些叙述和结论的工具和基础。虽然信息图表在大多数情况下提供了故事和叙述。例如,数据可视化地图的标题可能是“按区域划分的空气污染饱和度”,而带有相同数据的信息图则显示为“ A区和B区在C国污染最严重”。
  4. 数据可视化可以在Excel中进行,也可以使用其他自动生成设计的工具,除非将其设置为演示或发布。但是,信息图表的美学非常重要,其设计必须吸引更广泛的受众。
  5. 在交互方面,数据可视化通常提供交互式图表,尤其是在线形式的图表。另一方面,信息图表很少互动,通常是静态图像。

Skype通过可视化.com进行可视化

 

07. 如何创建有效的数据可视化?

5种有用的技巧

该过程自然类似于创建信息图表,并且围绕了解您的数据和受众。更准确地说,这些是准备有效的数据可视化以使您的查看者立即了解的主要步骤和最佳实践。

 

1.做功课

准备工作已经完成了一半。在甚至开始可视化数据之前,必须确保您了解该数据的最后细节。

不可否认的是,了解您的数据查看对象是另一个重要部分,因为不同的人对信息的处理方式不同。您要为数据可视化的对象是谁?他们如何处理视觉数据?只需给他们一张饼图就足够了,否则您将需要更深入的可视化报告?

您正在可视化什么样的信息,它能反映出您的目标吗?

最后,考虑要使用多少数据并加以考虑。

图片来自Brodie Vissers

 

2.选择正确的图表类型

在上一节中,我们列出了可在数据可视化中使用的基本图表类型。要确定最适合您工作的人,需要考虑的因素很少。

  • 图表中将有多少个变量?
  • 您将为每个变量放置几项?
  • 值之间的关系是什么(时间段,比较,分布等)

话虽如此,如果您需要展示整个项目的各个部分,那么饼图将是理想的选择。例如,您可以使用它来展示特定产品的市场份额的百分比。但是,饼图不适用于时间范围内的分布,比较和跟踪趋势。在这些情况下,条形图,散点图,s和折线图更为有效。

另一个示例是如何在图表中使用时间。使用水平轴会更准确,因为时间应该从左到右。它在视觉上更直观。

Oberhaeuser的MagnaGlobal广告市场海报

 

3.对数据进行排序

首先删除所有不会增加价值并且基本上是图表多余的数据。有时,您必须处理大量数据,这不可避免地会使您的图表变得非常复杂且难以阅读。不要犹豫,将您的信息分成两个或多个图表。如果这对您不起作用,则可以使用突出显示或使用更合适的内容更改整个图表类型。

提示:使用条形图和柱形图进行比较时,请按值(而不是字母顺序)以升序或降序对信息进行排序。

图片由萨曼莎·赫尔利(Samantha Hurley)

 

4.利用颜色发挥自己的优势

在每种可视化形式中,颜色都是您最好的朋友和最强大的工具。它们产生对比,重音,强调并直观地引导眼睛。即使在这里,色彩理论也很重要。

设计图表时,请确保不要使用超过5或6种颜色。除此之外,任何其他操作都将使您的图表不堪重负,并且难以为观众阅读。但是,您可以使用颜色强度来发挥自己的优势。例如,当您在不同的时间段内比较同一概念时,可以将数据从所选颜色的最浅阴影到其较深的颜色进行排序。它会创建适合您时间线的强烈视觉效果。

选择颜色时要考虑的事项:

  • 不同类别的颜色不同。
  • 系列中所有图表的采用一致调色板,方便以后将进行比较。
  • 最好使用对色盲友好的调色板。

Jamie Kettle可视化塑料废物污染数据

 

5.获取灵感

当您想成为数据可视化设计中的佼佼者时,请多多发挥自己的灵感。查看优秀的示例、信息图、其他人的工作,并了解哪种方法最适合您需要实现的每种数据。

下图这个Twitter帐户数据可视化是一个很好的例子。同时,我们还将精选一些令人称赞的示例,这些示例将使您有信心开始为数据创建视觉效果。

lilit Hayrapetyan创作的大数据纪录片的人脸

 

8个数据可视化示例

作为另一种艺术形式,Data Viz为一些令人惊叹的精心设计的图表提供了沃土,这些图表证明了数据也可以是美丽的。现在,让我们来看看一些例子。

 

1.黑暗之魂III体验数据

我们从孟小伟的个人项目开始,介绍他玩《黑暗之魂3》的经验。这是信息图表和数据可视化也是个人设计工具的完美例子。这项研究非常庞大,但非常专业地归类为针对不同概念的不同类型的图表。所有数据可视化都使用相同的调色板进行制作,并且在信息图表中看起来很棒。

我的黑暗之魂3孟小伟在播放数据

 

2.有史以来最伟大的电影

凯蒂·西尔弗(Katie Silver)根据评论家和观众的评论汇总了有史以来最伟大的100部电影。可视化显示了每部电影的关键数据点,例如发行年份、奥斯卡提名和获胜、预算、利润、IMDB得分、类型、拍摄地点、电影背景和制作工作室。所有电影均按发行日期排序。

凯蒂·西尔弗(Katie Silver)的100部最佳电影数据可视化

 

3.最暴力的城市

费德里卡·弗拉加帕内(Federica Fragapane)显示了2017年全球50个最暴力城市的数据。这些项目根据人口在垂直轴上排列,并根据凶杀率在水平轴上排序。

 

4.家族企业作为数据

这些数据可视化和插图由Valerio Pellegrini为《透视》杂志制作。它们显示了一个饼图,其中包含行业细分以及对就业贡献的散点图。

视角杂志–家族企业by Valerio Pellegrini

 

5.太阳系的轨道图

该地图显示了太阳系中18000多个小行星的轨道数据。每个小行星都显示在1999年除夕的位置,并按小行星的类型进行了着色。

埃莉诺·卢兹(Eleanor Lutz)的太阳系轨道图

 

6.标题的语义

KatjaFlükiger对头条新闻的故事情有独钟。数据可视化旨在传达销售对算术的影响程度。该项目在马里兰大学艺术学院完成,目的是可视化对移民的引用,并对用词选择和上下文所暗含的价值判断进行颜色编码。

标题语义学KatjaFlükiger

 

7.月球和地震

该数据可视化用于回答月球是否引起地震。该图显示了根据月球的相位和轨道位置而发生的地震的时间和强度。

月亮与地震艾西瓦娅·阿南德·辛格(Aishwarya Anand Singh)

 

8. Nanosats的黎明

可视化效果显示了从2003年到2015年发射的卫星。该图表示了专注于项目的机构类型以及为其提供资金的国家。左侧显示了每年的发射次数和卫星应用次数。

有线英国–由Nanosats拍摄的黎明(Valerio Pellegrini)

 

最后的话

数据可视化不仅是一种科学形式,而且还是一种艺术形式。其目的是帮助任何领域的企业快速理解复杂数据,并开始根据该数据做出决策。为了使您的图表高效且易于阅读,这一切都与了解您的数据和受众有关。这样,您就可以选择正确的图表类型,并使用可视化技术来发挥自己的优势。

 

原文地址:https://graphicmama.com/blog/what-is-data-visualization/

译文地址:站酷

作者:AI Boicheva

译者:ZZiUP

 转载请注明:学UI网》什么是数据可视化

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


如何做B端体验标准化:以数据可视化场景为例

seo达人


图片

业务背景

以我们 CCO 体验设计团队为例,主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加,设计面临严峻挑战。

1、业务多:30多个产品应用

2、角色多:覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户  6大类用户群体。

3、体验复杂:设计师需兼顾用户和客户两个视角。

图片

从组织上,85% 设计师纵向支撑业务,15% 设计师横向做标准化,反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。

图片

 

图片

标准化怎么做

核心通过页面梳理、抽象、分发、衡量,保障基础体验一致性。

图片

 

图片

案例实战

以数据可视化场景为例,讲述如何做标准化。

1、业务现状

共有11个应用,涉及89个页面。

图片

2、问题

体验不一致:各个工作台页面架构、组件、样式野蛮生长,缺少规范导致体验不统一。

低效:部分场景缺失,组件重复建设,大量定制;沟通协同内耗大,成本高。

图片

3、策略

体验统一:框架、组件、样式。

提效:代码化、工具、交付机制。

4、体验统一

包括框架、组件、样式。

图片

框架

(1) 现有页面收集

图片

(2) 用户场景分析

图片

(3) 页面归类

结合用户看数内容(例:概览、分析、详情)和交互形态(例:平铺、下钻),对页面进行归类。

图片

(4) 确定典型布局

通过统计高频复用形态,确定典型布局。

图片

组件

(1) 页面结构分析

组件的收敛,需要先对页面分析,确定模块层内容。例:模块包含页头、筛选、图表、表格。

图片

(2) 模块层分类

横向收集全部业务,将模块层分类。细分模块扩展形态,放到对应的篓子里。

图片

(3) 模块专项治理

接下来,需要对每一个模块进行专项治理。比如图表模块,再拆再抽象成指标、图表、单选、多选 4类场景。场景里再对主体和变体(也就是扩展形态)分类。

图片

图片

样式

(1) 确定优化内容

围绕视觉凌乱,要做的便是完善设计语言。设计师需要结合自身技术底层,补充缺失规范。例如布局、色板、字体、动效。

图片

(2) 确定组件范围

通过统计高频复用组件,确定需要梳理的组件范围。

图片

(3) 布局

图例位置:线上有9种,通过从业务场景按阅读顺序划分,最终收敛成2种。

图片

组件高度:真实线上情况,只能看2个指标,高度规范缺失。

图片

需要根据用户分辨率调研,提炼典型分辨率。比如用户是win系统,包含菜单栏、任务栏等默认高度,再减去本身页面页头等默认高度,得到 3 档。确定组件建议默认行高 240px。

图片

轴标签旋转角度:现状有顺/逆时针两种,通过分析标签类型,结合阅读顺序、轴与标签亲密度,确定默认角度为顺时针。

图片

(4) 色板

通过场景梳理,确定不同组件使用的色板类型及缺失色板。

图片

补充语义色板:从业务里抽象2类场景,指标和柱/饼/环场景,定义颜色。例如带正面语义,用绿色,比如升、已到岗、正常。带负面语义,用红色,比如降、旷工、失败。

图片

(5) 字体

结合自身业务场景问题,从场景、版权、风格、识别、极值共5个维度选择字体。

图片

举例场景一,纵向数据场景里,将市面上数据竞品用到的字体都横向铺开尝试,做排除法。比如din没版权,苹方非等宽字体,普惠102识别性弱。

图片

举例场景二,在核心数据呈现中,helvetica 品牌风格弱,普惠在1亿以上极值过宽。

图片

最终我们根据自身业务场景特征,用普惠和普惠102,运用在对应场景里。并同前端提炼规则。

图片

(6) 动效

首先,需要确定动效价值,明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。

图片

通过动效场景链路分析,确定优化范围。

图片

加载动效:围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路,输出方案。比如这里共梳理17种组件类型,抽象成9类,包括点、线、面、饼、环、柱、文本、图标、词云,再进行组合产出方案。

图片

出场动效:通过业务分析、提炼场景、优化效果。比如这里共提炼 3类场景,有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。

图片

图片

浏览动效:通过提炼场景,来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下,围绕点击感知弱、重点不突出、缺少悬停态来优化效果。

图片

沉淀速度参数:将优化动效场景的速度参数,同前端约定规则沉淀组件库。

图片

5、提效

包含代码化提效、工具提效、机制提效。

图片

整体思路

从设计组内到技术产研的提效过程。

提效面向用户依次是:组件设计师、业务设计师、前端、产品。

搭建目前还在进行中,这里主要从交付-工具-代码化来分析。

图片

交付内容

1、业务设计师:sketch/figma物料 (样式、组件、区块、模板、规则 )

2、业务设计师:kitchen工具(样式、组件、区块、模板)

3、组件工程师:组件规范/组件官网

图片

交付机制

新需求:通过评估复用性、抽象、内审、沉淀物料。

现有业务:通过页面梳理归类、抽象、内审、沉淀物料。

图片

6、衡量

从物理到行为层,包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。

图片

 

图片

总结

回归课程,在B类业务里,服务多个产品、多用户角色、体验复杂的场景下,在定制化+标准化团队阵型里,标准化实质解决的问题是保障60分基础体验一致性。

图片

总结:B端体验标准化包括物料的产出、交付以及衡量标准。

产出:包括框架、组件、样式的收敛来梳理、抽象页面。

交付:面向2类用户群体,业务设计,需交付物料和工具。组件工程师,代码化需提供组件规范,组件线上化需助力组件官网的建设。

衡量:一致性评分包括样式、组件、框架及组件交互。

图片

 

原文地址:AlibabaDesign (公众号)

作者:CCO 设计

转载请注明:学UI网》如何做B端体验标准化:以数据可视化场景为例

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


插画在 UI 场景中的趋势化探索

seo达人


一、呈现独具一格的 Banner 设计

插画运用到 Banner 设计中非常普及,不仅可以带来个性化的视觉风格,也可以避免运用图片带来的版权风险。因为插画有着丰富多样的风格,运用到设计中也会呈现风格多样的效果,插画也比较容易统一视觉规范,很多成熟的设计团队都会制定插画规范系统,满足项目各类场景的运用。

作为视觉设计师来说掌握插画的能力已经成为基本岗位需求,很多公司对于 UI 设计师也有同样要求,这也是提高产品设计视觉感的一个方向。

 

二、突出图标设计的风格差异

随着用户对于感官体验的升级,图标风格特征的差异化体验至关重要,而插画风格的融入可以提升图标设计的特征感。

插画风格运用到图标设计中,需要做简化处理,可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中,不仅可以使得图标具备差异化的视觉效果,也能烘托出整体设计的质量。

图片

 

三、强化区域背景的风格感

插画可以作为栏目区域背景来使用,以此增加该栏目的风格感和视觉感。相较于摄影图片来说,插画具备风格特征,可控性较强,能够满足更多氛围感的营造。

 

四、突出个人中心的情感化

个人中心的设计之前大部分采用单调的白色或者品牌色作为背景,近些年一些产品开始使用插画背景来增强情感化设计。有的产品还根据天气变化、节日主题、白天/夜间等场景设计不同的插画风格,带来的视觉感较强,也能吸引用户的关注度,提高用户对产品的感官体验。

 

五、强化空状态的情感化设计

空状态由单纯的文字提示演变到图文结合,感官层面越来越被重视。利用图形结合、IP 形象结合、小场景插画结合等,还有结合动效设计的案例,带来的设计体验感也是非常不错的。

图片

 

六、瓷片区的视觉感强化

插画风格被运用到视觉表现层面案例较多,特别是在瓷片区的发挥,呈现出了风格多样的优秀案例。可以使用全场景插画作为背景设计,也可以使用小场景插画作为局部强化,还有使用部分插画元素作为点缀设计,视觉表现力丰富多样。

图片

 

七、活动封面设计体现统一感

将插画形式作为活动或者服务栏目的封面设计,相较于其他形式来说风格统一性更强,也能更好的进行设计延展。就算使用不同风格的插画来进行封面设计,只要在配色风格上面把控好,也能做到有效的视觉感统一,对于设计师来说把控性很强。

图片

 

八、增强专题活动头部视觉感

插画形式运用到专题页设计中案例非常多,相较于合成图片来说,插画的风格感和驾驭度更灵活。插画形式带来的情感化体验更佳,通常被运用到专题页头部区域来增强视觉感,也有延伸到整个背景层设计中的案例。

根据特定活动主题创作插画对于设计师来说更容易,找到符合主题的摄影图片是很难的,自己拍摄成本又会比较大,插画形式是最经济实用的设计解决方案。

 

九、插画形式提高栏目品质感

插画形式可以作为一些代表成就感的配图设计,以此来提高该栏目的品质感。比如在打卡点亮城市成就的设计中,不同城市的邮票采用插画形式来表达,不仅可以展示出各城市的风格,也能做到视觉风格的统一。精美的插画提高了品质感,吸引了用户的参与度,带来的感官体验也是非常棒的。

图片

 

十、体现主题化的风格感

在主界面的设计中,不仅要体现出功能的操作体验,也要通过视觉的强化来吸引用户的关注度。一些产品在主界面设计中以插画作为背景来强化,结合动态的表达趣味性更佳,带来的关注度也是不错的。插画形式结合到功能模块中,带给用户情感共鸣和操作的体验度。

 

十一、插画形式的引导页设计

插画被运用到引导页设计中是相当普及的,也是非常有利于进行设计发挥的。插画元素表达的可控性可以满足引导页主题创意的需求,通常以轮廓束缚为主,满屏插画较少。基于焦点和轮廓造型进行插画元素装饰,对于插画基础薄弱的设计师更易上手。

 

十二、插画形式的闪屏设计

闪屏和启动页采用插画的形式也是可取的,启动页设计通常和引导页表现类似,不过运用品牌展示的相对多一些。

闪屏分为广告形式和主题展示形式,闪屏广告形式比较多,插画结合也是在广告活动中的发挥。一些节庆主题和特殊纪念日活动,也会以精美插画的形式表达,更容易表达主题和与用户产生共鸣感。

 

小结

插画作为设计师需要掌握的基础技能,被逐步运用到各类设计场景中,也影响了 UI 设计的趋势走向。随着产品设计感官体验的不断升级,风格化和差异化的设计才能满足更多用户的感官需求,而风格多样的插画形式首当其冲。

希望这些插画结合 UI 场景的案例可以作为抛砖引玉,让大家重视插画在 UI 设计中的表现力,不断加强并掌握插画设计的能力。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》插画在 UI 场景中的趋势化探索

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


设计方法论

鹤鹤

“先有思想,后有设计”设计师自身应该逐步建立一套自己的设计体系,需要对设计方法论有专业的认识和理解。一直想收集整理日常说到的各类设计理论知识,也希望通过整理和总结能有新的收获,加深记忆。



格式塔心理学是视觉排版及设计中应用比较广泛,主要指人的眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体。格式塔的理论核心是整体决定部分的性质,部分依从于整体,人脑知觉到的东西要大于眼睛见到的东西。

  1. 图形与背景的关系原则:在有一定配置的画面内,有些对象凸显出来形成图形,有些对象退居到衬托成为背景,图形和背景的区分度越大图形就越突出成为感知对象,要让图形成为突出对象,不仅需要有突出的特点,还要有明确的轮廓/明暗度/统一性。运用到设计中,做海报banner时要尽量弱化背景突出视觉中心,减少背景的细节和色彩,可以让用户更加聚焦视觉中心。
  2. 接近或邻近原则:接近强调位置,实现统一的整体,某些距离较短活互相接近的部分,容易组成整体。
  3. 闭合性原则:人们倾向把不连贯的图形尽可能在心理上使之趋合,即是闭合性原则。人们在感知图形的时候通常会先整体后局部,从整体上找到一个近似匹配,然后填补空白,这个空白是我们认为我们应该看到的内容,可以省去部分的轮廓,同时还会提供完善的定界/对称和形式
  4. 相似性原则:相似强调内容,人们通常把那些明显具有共同特性的(如颜色,运动,形状,大小等)事物组合在一起。
  5. 对称性原则:人们往往容易感知围绕中心对称的形状,对称性给了我们坚固和稳定的秩序感,这种本能会让我们在组合物中寻找一种平衡感,虽然很多设计中并不需求完全对称。利用这一点可以在设计中反向的打破对称性,制造画面的冲击力。
  6. 连续性原则:如果一个图形的某些部分可以被看作是连接在一起的,那么这些部分就相对容易被我们知觉为一个整体。
  7. 简单原则:在人的眼脑认知中习惯将事物简化,通常会根据已有的认知来确定元素,一个简单明确的对象会比一个复杂具体的形象更快更有效的传递信息
  8. 共方向原则:同方向元素会比固定元素或者不同方向的元素更为紧密。不管元素相距多远或者看起来有多么不同,只要他们按照同一方向运动,就会被认为有相关性。



古登堡法则是又称对角线平衡法则,由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限:

1.第一视觉区(Primary Optical Area):左上方,读者首先注意到的地方。

2.最终视觉区(Final Optical Area):右下方,视觉流程的终点。

3.强闲置区(Strong Follow Area):右上方,较少被注意到。

4.弱闲置区(Weak Follow Area):左下方,最少被注意到。

通过古登堡法则我们知道用户的视觉中心往往在页面的左上方,而结束浏览时视线往往落在右下角,所以合理利用这个法则可以帮助用户更好地获取内容并采取行动。自上而下的界面设计,自左向右的界面设计,页面中通常将操作按钮放在右下角。



交互七大定律

菲兹定律:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。意味着小而近的目标用户不需要花费太大的精力就能轻易触及或者关注,相反小而远的目标则需要花费用户更多的时间和注意力,菲兹定律阐述的是效率相关的问题

思考结论:1.必要时让按钮更大,2.让相关信息更近

希克定律一个人面临的选择(n)越多,所需要作出决定(t)就越长。用数学公式表达为反应时间T=a+b log2(n)。在人机交互界面中选项越多,意味着用户作出决定的时间越长。如比起2个菜单,每个菜单有5项,用户会更快从有10项的1个菜单中做出选择。席克定律在产品应用中主要用于通过合理的选项及功能规划提高用户的决策及完成任务效率

应用场景:

1.分类编组,提高决策效率

2.过滤选项,隐藏/删除低频率功能选项

3.分布执行,提高流程转化率



米勒定律:头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。米勒定律在产品应用中主要在于合理的信息布局和信息处理可以提高用户对信息的获取效率和记忆难度。

应用场景:

1.控制数量,减少用户选择

2.信息分段,辅助用户记忆

3.流程分步,优化用户操作

4.信息排序,引导用户记忆

临近性原则:当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,用户会理解为按钮于文本框有关联性。换句话说当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。

泰斯勒定律(复杂守恒定律):定律认为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。

应用场景:

1.合理缩短用户使用路径,在设计中可有适度的简化缩短操作流程但是到一定的程度可能会影响整体的功能和价值。

2.将固有的复杂性从一个地方转移到另一个地方,例如搜索中历史记录,信息商品的收藏等功能,实际都利用了此定律。

3.将功能进行拆分,一次性无法降低复杂度的功能可以进行拆分。

奥卡姆剃刀原理:奥卡姆剃刀原理只承认确实存在的东西,认为那些空洞的普遍性的东西都是没有用的,应该剔除掉,概括起来就是“如非必要,勿增实体”实际上无论实体、视觉或认知上,多余的负担都会削弱表现效能,去除解决方案的杂质,让最后的设计会更严谨、更纯粹。在设计苹果产品的时候,乔布斯一直坚持认为:为了实现一个功能而造出一堆复杂的东西,没用,简单的才最好。Google专注于搜索,主页上也只有搜索,其他搜索引擎就没有做的这么彻底,这也是为什么Google用户量最多的原因之一。

防错原则:最早应用于汽车制造领域中,工程师新乡重夫(丰田精益生产庄家)于上世纪60年代,创造了这个理念。防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽,例如硬件设计上的 USB 插槽,酱油瓶口。防错原则有四项基本原则包括,轻松原则,简单原则,安全原则和自动原则。

尼尔森十大交互原则

状态可见原则:保持界面的状态可见,变化可见,内容可见。让用户知道发生了什么,在适当的时间内做出适当的反馈。 比如用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。



贴近场景原则:用用户的语言,用词,短语和用户熟悉的概念,而不是系统术语。遵循现实世界的惯例来呈现信息,功能操作符合用户的使用场景。进一步来说贴近场景,也是要求在设计的时候要考虑,产品面对的人群和人群所在的环境,比如,同一款产品在不同地区呈现形式需要考虑文化差异。不同属性的产品例如儿童教育和办公产品,需考虑使用人群的特性。

可控原则:操作应该是可逆的,可以支持“撤销”和“重试”,以此来离开“非预期” 的状态,简单来说就是不要让用户走进死胡同,提供出口和退路。例如微信发送消息可以撤回可重新编辑等。很多web端的表单,文章发布等都支持自动保存,很大程度上避免错误或者意外操作。



一致性原则:遵循平台的惯例。也就是,同一用语、功能、操作保持一致。

防错原则:核心观点是如何有效的在用户出错之前就尽量避免错误发生,在互联网产品中,比起回退修改错误信息或者操作更好的是,用设计防止这类问题发生。很多转账功能中输入数字后会显示千万等说明文字,用户输入卡号后会自动识别关联银行,避免用户出错。

1.限制操作范围和条件。例如很多手机登录等交互中默认设置手机号为11位避免了用户出错,提高了易用性。

2.对有风险的操作进行二次确认。



易取原则:尽量减少用户对操作目标的记忆负荷,动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。 很多产品搜索功能的关键词联想搜索,即使用户不能完全记住关键词也能轻松搜索。

1.让用户选择而不是输入,选择和输入的操作成本相差巨大,产品应给给用户提供选项,让用户可以直接选择,而不是自己输入,比如填写收货地址。

2.自动读取、记录信息、减少操作路径。在用户使用产品的过程中,会产生一些需要记忆的内容、或者操作路径,这个时候我们要避免用户记忆,把信息直接提取出来,送到用户手里



高效灵活原则:为大多数用户设计,兼容少部分特殊用户。允许用户进行频繁的操作,更加便捷灵活的代码和反馈。各大产品中常使用的搜索功能,提供历史搜索功能。微信朋友圈发布中选择可见/不可见人群时,提供上次选人记录。
1.提供快捷入口,例如支付宝的首页可以自主配置常用的小程序,微信下拉对话页面可以快捷进入历史小程序
2.方便用户重复操作,例如外卖平台中自动定位常用地址,订单中可以再来重复的一单等

3.预知用户操作缩短操作路径,例如截图后打开微信对话框会关联截图发送

简约原则:审美和简约设计,页面不应该包含无关紧要的信息,页面的每个额外信息都会降低主要内容的相对可见性。

容错原则:错误信息应该用语言表达(不要用代码),较准确地反应问题所在,并且提出一个建设性的解决方案。比如404。

人性化帮助原则:有必要提供帮助和文档。任何信息应容易去搜索,专注于用户的任务,列出具体的步骤来进行。帮助性提示最好的方式是:1、一次性提示;2、常驻提示;3;帮助文档。



通过这些方法的总结归纳,我发现其实很多原则原理我们在平时的设计中有意无意的总会用到,在实际工作中设计很大程度上是做选择,哪一种是对产品对用户最优的方案,有的设计师可以通过自己的经验作出选择,没有经验的可能需要多多理解这些原则原理,交互设计之父阿兰·库珀说过“除非有更好的选择,否则就遵从标准”只有反复的遵循使用标准才能建立自己的一套设计方法论,让工作更加得心应手。

来源:站酷
作者:有鱼MUMU

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

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

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

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

提升网站设计的10个小技巧

纯纯

每个人都是从初学者开始他的设计之旅的,你的审美眼光也要像其他事物一样经过训练。看 Dribbble 的设计可能是非常有帮助的,但有时候你只是欣赏设计,却不明白为什么。

 

没有灵感、没有优质的设计素材、不知道要设计什么,所有这些原因都可能会拖慢你的速度,让你感到沮丧。所以现在我将和你分享 10 个极其简单的设计技巧,帮你改善你的设计作品,而且不需要额外学习新的技能哦。

 

请记住,我提供的不是必修遵守的规则,而是大多数时候都有效的技巧。

 

1)把你的设计作品去色。

如果你没有好的想法或优质的设计素材,那么你可以把你的作品去色。你可以通过正确的构图获得野兽派的设计。这么做有助于你理解平衡、留白,以及如何使用文字和几何图形。

 

让我们来看一个案例:


 


2)用“平衡方案”测试你的画面。

我自己发明了一套测试画面的方法:用简单的几何图形代表画面中内容,然后通过比较页面中色块的面积来确定页面是否平衡。当你在自己的作品中使用这个方法时,会得到下图这样的效果。

 

 

通常你需要通过视觉进行判断,但这里我们可以做一些简单的计算帮助理解:

 

左边区域的黑色矩形加起来约为:

(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 PX

 

而右边的大长方形数约为:

446×446=198916PX

 

他们只是相差了一点点 3.9558%。

 

注意:圆形比长方形小,但由于相当锐利和细致,使它更吸引人的注意。

我在设计之前没有计算过。经过多年的练习,这只是成为自动的,因为你的眼睛会感觉到错误的平衡。

 

3)用背景来呈现设计。

我之前带来的例子是在灰色背景上呈现的,但你可以尝试不同的东西。这有助于为你的设计创造一些景深。但要注意,在一个真正的网站中,你不会有那么多额外的空间,所以这只是一个展示技巧!


 

4)使用推荐的字体大小。

不要再整天浪费时间去实验字体大小。一般情况下以下字体大小是合适的:段落使用 14-18 pt 左右,副标题使用 24-36 pt,标题使用 96-144 pt 左右。Figma 的默认大小对于排版来说是相当不错的。虽然它们看起来会很小,但这是正常的。

 

有些字体相对于其他字体会偏大或者偏小,所以你应该以标准字体为基础。比如 Roboto:如果字体大小接近 14-18 pt 的 Roboto,那就非常适合用于段落。

 

 

5)拥抱 Z 轴。

如果你有一些具有透明区域的图片,你可以利用它们来创建一些分层。

 

在网页开发中,CSS 代码有一个 Z-index 的参数,可以用来把图像带到其他项目的后面或前面,给人一种立体的错觉。

 

让我们看看我的一个简单的设计,其中就利用了这种技巧。

 

 

6)开始使用柔和的颜色。

鲜艳的色彩虽然美好,但往往会导致画面过于刺激。现在非常流行在设计中使用更加柔和的色彩,你可以在下图拾色器中红色标记区域内选取更柔和的颜色。

 


 


7)让画面有呼吸感。

在我看来,多一些留白要比没有留白更好。杂乱无章的设计就通常都很糟。你可以通过以下方式获得呼吸感。

 

1、保持大量的背景可见。

2、用间距避免文字墙效果。

3、使用不会吸引太多注意力的图片。

4、精炼你的文字。

 

 

 

8)在设计中使用噪点。

通常当我们想到设计的时候,我们会想到干净、流畅、清晰等概念。但完美就存在于缺陷之中。

 

在你的设计中,当你想给自己的网站一个优雅或艺术的外观,噪点是一个强有力的朋友。

 

此外,应用微妙的噪点让你的构图看起来像电影一样,这对视频和动态网站来说效果非常好。

 

你可以通过使用 Photoshop,在白色背景上创建一个 2-4 K 的高斯模糊,然后将其应用在你的画板上,从而获得一些噪点纹理。

 

 

9)开始寻找更好的字体。

我们电脑上预装的字体通常都不是很好的选择。要想找到更好的字体,可以开始上网冲浪或看 youtube 视频,了解精彩的字体和字库。

 

但要注意:很多字体都不是免费的,在没有授权的情况下使用它们可能会给你带来麻烦。不过不用担心,大多数的字体都有免费版本!

 

虽然有大量不同的字体和风格,但一般来说,我把它们分为三大类。

 

1、古典字体

2、现代字体

3、正文字体

 

通常情况下,前两种也可以用在正文中,只是字体的设计者希望你把它们当作标题来使用。

 

古典字体包括Abril Fatface、Playfair Display、Volux、Chalga和许多其他字体。

现代字体包括Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....

 

 

10)利用几何图形。

这可能是最难利用的技巧,但如果应用得当,画面会非常有冲击力。

 

利用几何图形有助于强化布局中的概念和秩序,甚至不需要使用额外的图像。找到合适的几何图形是很难的。目前我还是不能很好地掌握它。

 

但是有一个诀窍是,把你的文案中的字母、数字和标题当作几何图形:把它们做成巨大但微妙的形状,或者用一些特定的字母作为形状(字母 A 就很好用)。

 



作者:知群

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



让用户一见钟情的10条心理学规则

纯纯

一个好的设计不仅是解决正确的问题,还要为用户创造积极的情感。一个实体产品可以通过人类的 5 种感官来创造情感;但对于数字产品来说,因为它只是在设备屏幕上进行干巴巴的交互,然后提供服务,所以很难创造良好的情感体验。

 

所以数字产品设计师需要深入了解每一种情感,以及能够创造情感的心理学原理,才能更好地设计相关产品。

 

唐·诺曼认为,可以从三个方面对用户的情感体验进行设计:本能层、行为层和反思层

 


  • 本能层:"用户想要的感觉"

  • 行为层:"用户想做什么"

  • 反思层:"用户想成为什么样子"

 

在第一个层面,设计将通过用户的视觉和与产品的互动产生情感。因此,这也是 UI 设计师大显身手的地方。除了审美和基本的平面设计原则外,以下是我目前在设计中运用的心理学规则。

 


1. 格式塔原则

  • 相似性原理

人的眼睛往往会把相似的元素连接成一组,大脑会认为这些元素有相同的作用。

 


因此,在设计具有相同功能或内容的界面元素时,要使其一致。


应用场景:导航、画廊、卡片、横幅、内容、分页

 

  • 连续性法则

人的眼睛将排列在连续体中的元素视为一组。这个规律与对称性和相似性颇有关系。通过在一个序列上创造相似和重复的元素,我们可以将用户往我们想要的方向驱动。这使得阅读信息更加连贯和清晰。

 


轮播图就是应用了这一规则的设计,为用户提供了还有信息可看的提示。

 

应用:菜单/子菜单、列表、产品排列、轮播图、进度指示器

 

  • 封闭法则

当看一个不完整的图像时,大脑会依靠以前的经验,把剩下的填满。

 


这是图形或 Logo 设计中常用的规则。但在产品设计中,我们可以将其用于图标和加载。

 

应用:图标、加载、数据可视化

 

  • 邻近法则

这是 UI 设计中必不可少的规则,因为人的眼睛会把任何相邻的元素当作一组。

 

 

在设计的时候,我非常注意利用间距将元素组合在一起。我通常用大的空间来分隔大的内容群,然后用小的空间来分隔大的内容群中的小的内容群。

 

应用:导航、图库、卡片、横幅、内容、分页

 

  • 对称法则

我们的大脑喜欢看到对称和平衡的事物。这是在所有设计领域中最常用也是最安全的法则。它帮助我们创造一种稳定和秩序感。


 

在设计需要简单、视觉化、和谐的产品时,我经常会将对称性应用到其中。当观众需要专注于重要的东西时,这也有助于他们感到更舒适。缺点是,如果过度使用,产品会变得枯燥单调。通常,我应用于头部或行为召唤按钮,以更好引导用户产生行动。

 

应用:图库、焦点图、重要内容、产品展示、列表、导航

 

  • 主体/背景原则

这个规律是关于人的眼睛倾向于注意到脱离背景的事物,或是被框为一组的内容。

 

 

我用这个规则来引导用户的视线去预览重要信息。通常是在卡片设计中,用淡淡的下影在背景上方铺设一层。此外,构图组也是应用这个规则的一种方式。

 

应用范围:卡片、内容、列表、服务、摘要


  • 共同命运法则

在同一方向上移动的元素被认为比静止的元素或在另一个方向上移动的元素更有关系。这一规则的应用有助于我们建立群体和状态之间的关系。


 

我在做动画的时候,经常比较明确地使用这个规则。但是,我们也可以应用到更多方面。

 

应用:导航/下拉菜单、折叠菜单、折叠面板、工具提示、滚动条、视差滚动和指标

 


2. 焦点

当我们看某样东西的时候,我们的眼睛往往会先关注最突出的元素。理解这种行为将帮助我们在设计中创建一个 "锚点",从而推动用户按照我们的方案去浏览内容。

 

 

应用:内容页、落地页、价格页、产品页、焦点图

 


3. 冯·雷斯托夫效应

又称隔离效应,它表明人们倾向于注意和记住与其他部分不同的部分。这个规则很容易与焦点法则相混淆。不同的一点是,应用这个规则的元素往往是独立存在的,并没有额外的功能和信息。

 

 

应用:定价表、促销横幅、权益升级。

 

 

4. 本能反应

基于真实世界的用户体验,创造出具有视觉吸引力的体验。就像我们看一个视频时,每一个高潮笑话都有笑声的配音,我们就更容易笑。如果我们的设计能让用户感觉很好很舒服,用户就会喜欢我们的设计。

 

 

应用:产品形象、插图、摄影

 


5. 色彩心理学

有许多研究表明,颜色对我们的潜意识有特别的影响。不同性别、不同宗教、不同文化的人对色彩的看法也不同。

 

另外,我们也不要忘了早期被广泛使用的系统的颜色:

  • 红色:错误

  • 绿色:成功

  • 蓝色: 进行中

  • 黄色:警告。

 


6. 形状心理学

 

 

和颜色一样,人的潜意识对不同的形状也有不同的反应。比如:

  • 圆形 、椭圆形:传递一个积极的信息,通常与社区或关系有关。

  • 正方形和三角形:传递强烈的信息,通常与力量和稳定有关。

  • 竖线:代表强度、力量或侵略性。

  • 水平线:代表平静、平等或安静。

 

 

7. 双重编码理论

这个理论解释了人类需要视觉和语言信息来尽快处理信息。而且,人类是视觉动物,我们的大脑处理图像的速度是文字的 6 万倍。而为了达到设计的最大效果,我们不应该删除说明性文字。

 

 

一个明显的例子就是应用程序的导航栏。大多数新的应用程序或具有复杂功能的应用程序都是用图标和标签来设计的。

 

另一个例子。

 

 


8. 并行设计

相较于其他元素,人的眼睛往往会更容易注意到平行的元素。我经常用这个原理将同一屏幕内的两组不同内容进行分类。最容易看到的相关案例可能是 Facebook 的消息界面,“故事”并排而消息水平平行排列。

 

 


9. 共同区域

这个原理就像《格式塔原理》中的相似性法则一样,但它并不以相同为终点。共同区域是通过我们使用划分的方式,通过线条、形状或颜色来创建的。

 

 

如果一个屏幕需要用户大量滚动来查看内容,我们应该有一些方法来将其划分得更清晰,而不是仅仅使用间距。


应用:列表、信息流

 


10、扫描模式

根据 NNGroup、UXPin 等机构或团体的各种研究,最常用的两种扫描模式是 "F 模式"和 "Z 模式"。

 

其中,"F 模式"的应用最为广泛,尤其是对于内容较多的网站。

 

“Z 模式”用于那些不太注重文字的网站,往往在最后强调行为召唤按钮。

 

当我们了解了这些模式的使用方法后,我们就可以有效地选择布局和安排元素来实现我们的设计目标。

 

第一印象是最难忘的,积极的体验可以在用户和产品之间建立长久的关系。如果我们能让用户在第一时间爱上设计,我们就为我们的产品创造了相当好的优势。

 

作者:知群

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




日历

链接

个人资料

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

存档