首页

设计入门必备万金油-场景篇

seo达人



一、 场景的定义

关于“场景”,不同的出处给出的解释也不尽相同,并没有给出一个明确的定义。

  • 在《交互设计精髓4》书籍描述“场景”为用户如何使用产品实现具体目标的故事
  • 梁老师在《产品思维三十讲》中将“场景”分为:场、景。场为“时间”“空间”,景为“情景”“交互”
  • 在《2020UCAN》中四场关于场景的案例,将案例解释为:人+场+事+物
  • 百科定义“场景”是指戏剧、电影等艺术作品中的场面,泛指情景。

图片

上面四种对场景的解释,涵盖的对象和包含的要素各不相同,那我们如何理解场景呢?如何定义场景?

场景常用在产品迭代中的产品需求阶段和设计阶段,作为产品从产生到设计的依据,2个阶段的侧重点不同,需求阶段(明确用户是谁,需求是什么,做什么事),设计阶段(基于某目标,使用产品的情况)。场景是需求和行动的具现化描述,场景分别对应阶段分为:用户需求场景和用户使用场景。

 

场景类别1-用户需求场景

用户需求场景是用户需求的扩展细化,补充描述需求涉及的多个关键要素。若只有简单描述需求的情况下,对产品的指导设计容易出现偏差。

这里举个例子:“周四下半年,小波回家出地铁口(场景),想吃菠萝(需求),看到有个卖菠萝的摊位,上去看了看,都是没有削皮的菠萝(产品),地铁口人流量大,小波不想等没买菠萝就走了。”这案例从需求来说,没削皮的菠萝已对焦,但因为环境影响了小波不购买的行为。若菠萝的已经削皮,小波就已经买了带回家好好品尝。基于此再进行延伸,若场景放在逛街的场景中,已经切块菠萝就是匹配的,随走随吃。若场景放在水果店里,没削皮的菠萝是合理的,保证了新鲜度安全性品质,甚至还可以多种菠萝挑选,因为有时间。从上面来看,同一个需求,因为场景不同,其菠萝的形态也不同。场景是需求的细化,会影响到最终产品的设计上。

需求场景:用户+环境+需求+事件。在【某环境】下,【某用户】做了【某事】来满足【某需求】。用户、需求、事件是核心要素,环境是影响要素,环境包含时间、空间。除了环境要素还包含用户状态。

图片

 

场景类别2-用户使用场景

用户使用场景描述的是在需求场景的前提下,具体描述为了完成某任务,跟产品怎么交互的过程。其对产品的具体设计有较大影响。

这里举个例子:以接电话(任务)的情况来看,手机未在使用状态锁屏下和手机正在使用中就是完成不同使用场景。在手机正在使用中(用户状态),考虑不被过度打扰,此时的电话提醒是小区域展示,接通、拒绝和收起操作都是直观的操作。在锁屏状态下可以放在裤兜里(用户状态),考虑不被误触采用滑动解锁,以及可以物理按键免打扰和拒绝(可以不看直接操作)。同一个任务在不同的状态下,因因素的差别影响产品的设计。

图片

使用场景:用户+环境+目标+产品。在【某环境】下,【某用户】跟【某产品】发生了交互,用来完成【某任务】。用户、目标、产品是核心要素,环境是影响要素,环境包含时间、空间。除了环境要素还包含用户状态和承载产品的设备状态。

图片

 

场景关联的概念

设计常用的工具有2个跟场景关联,它们是用户画像、用户故事。用户画像描述了用户需求,用户需求场景是用户需求的延伸,用户故事则是用户需求场景的细化,一个场景可包含多个用户故事。

  • 用户画像:用户特征+用户需求
  • 用户故事:场景+产品+用户操作,用户故事基本等同于用户使用场景

图片

 

二、场景的价值

上一段描述2种类型的场景,场景不仅限于指导产品设计,还可以助力团队协作等多个方面。以下通过需求分析、团队协作、产品设计三块来描述场景的价值。

 

需求分析

场景可以帮助挖掘需求的完整性、判读需求是否准确及梳理需求优先级。

  1. 【完整性】深刻理解产品需求,让产品功能更全面,挖掘产品的新机会或者产品的新功能
  2. 【准确性】让需求分析准确,辨别需求真伪
  3. 【优先级】考虑用户如何使用产品,帮助理清强弱场景,帮助理清强弱需求

图片

 

团队协作

场景可以帮助团队增强同理心、更好的理解需求及提升产品设计的参与度。

  1. 【易理解】让团队对产品的理解更简单、具体(对于理论以及长篇大论的需求文章来说,人们更能记住故事发生的场景,通过简短但是详尽的故事描述)
  2. 【同理心】让团队进入用户视角看产品设计,而不是产品单方面的猜测。
  3. 【参与度】用户场景是协作设计工具,期望所有项目利益相关者参与产品需求和设计的过程

图片

 

产品设计

  1. 【优化现有】突破用户原有的解决方案:意即在当下的场景下,用户可能会产生什么问题?用户原有的解决方案是什么,我们是否有机会提供更好的解决方案呢(效率或者更好的体验)?
  2. 【新机会点】发现场景的连续性,发现行动中的不连续性。通过成组的动作进行预期:比如复制 – 粘贴;分享 – 朋友圈等;
  3. 【精细设计】从面对所有人转向用户分层精细化设计,打造竞争优势
  4. 【产品归纳】场景具现化需求,可用场景去归类相关的产品

图片

 

三、场景的挖掘方法

如何获取场景?2种类型场景因获取信息的侧重点不同。用户需求场景侧重需求及事件的描述,及描述事件相关联的环境。用户使用场景侧重使用产品完成任务交互的过程。有两种用户调研方法适用:访谈法、观察法:

 

访谈法

挖掘用户需求场景,主要去挖掘未知的需求和当下满足的需求是否有优化拓展空间,更适合提供一些开放性问题引导用户给出更多信息,在用户延伸出新信息再继续往下深挖需求相关元素等。

  • 您能描述下一天的工作流程吗?
  • 在流程中有没有遇到其他场景?
  • 您能具体描述下这个场景吗?所在什么样的环境
  • ······

了解用户使用场景,引导用户具体描述任务完成的过程,再延伸其中遇到的问题点等。

  • 您是怎么使用渲染的?
  • 图文编辑的流程是怎么样的?
  • ·······

 

观察法

观察法更容易观测用户使用场景,可以发现在访谈中很多忽略的细节。对于用户需求场景,需要更长期的观测,对观测的行为进行记录反推其需求。观察法可以是完成中立的观测,也可以是边观测边适时的提问便于挖掘原因。甚至可以自己作为用户参与进去。

 

四、场景化设计

什么是场景化设计?场景化设计是引入场景概念将简单需求延伸拓展出更多延伸的决策因素来精细化产品设计,简单讲是将原粗放型设计转向精细化设计,提升目标转化、体验等。场景要素影响的多少决定了场景化差异的空间,场景化设计的前提并不对整体目标的转化造成负面影响。

场景最终落地到产品设计上,在一场景里并不是所有的要素都对产品起到影响作用,在设计前可筛选出对产品产生影响的要素,进行一一罗列。产品的3部分组成:功能、内容/信息、形态。场景要素最终影响其的变化。

场景要素:用户、需求、事件、环境状态、载体状态、人物状态

产品组成:形态、功能、内容

图片

场景化设计最适用于O2O领域的设计,它会涉及丰富的空间、时间、天气环境等影响因素,同样的需求存在n多种不同场景情况。在我负责业务主要以web为主,日常场景更多是基于用户需求的拓展。

 

产品设计与场景的关系

产品如何承载用户需求场景?把场景和产品承载容器(可指单页面)作为象限划出4种类型区间。

  • 产品理想的情况是单容器承载单个场景,单场景可以清晰传达,产品帮助用户专注完成当下需求场景下的任务。
  • 非必要情况下,不要让多容器承载单场景。就好比将一个衣柜的能力,直接拆开成多个房间,一个房间放外套、一个房间放裤子、一个房间放内衣等等,会让使用变得极其麻烦。
  • 单容器承载了多个场景,这时候需要去辨别场景之间是否有关联,切忌不要把太多无关联的场景一起传达。如一个房间内包含了厕所、厨房、卧室、客厅,场景之间会相互打架。单容器多场景不合理情况下,不仅分散了用户注意力,也更难让用户理解产品,且对于产品来说也会多出更多不必要的成本消耗。
  • 多容器承载多场景近似于单容器承载单场景。

图片

 

五、场景化应用案例

在上一篇文章《需求太碎?设计师如何在小业务中提炼价值》中有过产品场景的案例解析。是对一个小项目进行了新的需求场景挖掘,推动进行改版的过程,这里不再展开说明,有兴趣的朋友可以去看一看。

个人实践案例不能完全覆盖场景化应用,另收集了一些直观的场景案例展示如下。

 

核心要素的应用案例

1. 要素——用户、需求

淘宝首页男生女生看到的内容和功能都有差异人需求差异。

图片

2. 要素——事件

京东购物车从原来的暂时放置商品延伸出更多关联的场景,如:对比、收藏,围绕场景产品设计

图片

 

影响因素的应用案例

1. 时间——饿了么

根据不同的事件点推送不同的内容,晚上是夜宵,中午是午餐、早上是早餐、傍晚是晚餐

图片

2. 地点——去哪儿旅游

根据不同的地点推送不同的内容

图片

3. 人物状态——手机接电话

手机接电话(景的差异,差异化交互形态),手机放裤兜走路中,手机正在使用中,2个场景手机进来。使用手机中(防止错误,更适合用户体验)

图片

 

六、小结

场景是入门容易、普适性很强的应用工具,也是个人推崇的设计师入门必备技能点。在用户需求上可以帮助挖掘新的机会点拓展产品的使用边界。在设计上场景让设计有据可依对产品设计更准确。在业务上可以通过场景的描述对业务所满足的需求有更深入的理解,可以帮助理解许多功能之间的关系。在协作上给团队提供沟通的基础,容易达成共识。

以上,欢迎大家一起交流。

 

原文链接:酷家乐用户体验设计(公众号)

作者:小波

转载请注明:学UI网》设计入门必备万金油-场景篇

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

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

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

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



蓝湖产品经理:产品设计协作的前世今生

seo达人


图片

 

设计协作的发展历程

回顾生产方式的发展历史,我们可以窥探到团队协作的变化。青铜器时代是以人力为主的作坊式手工生产。到 18 世纪 60 年代的第一次工业革命,机器生产逐渐代替人力生产。再到一战后,美国人福特(Henry Ford)和通用汽车的斯隆(Alfred Solon),将欧洲人创造的技艺性生产方式改为流水线、大批量生产方式,使制造业发生革命性变化。

图片

从发展历程看出,不同时代基于生产目标,会发展出相应的生产工具和协作方式来解决团队的生产效率和质量问题。

着眼当下,现代互联网科技高速发展,软件生产团队随之快速扩大。根据艾瑞网2021年《中国协同办公市场研究报告》显示,2020 年中国的协同市场增速达到 43.5%。市场上出现了数以万计的协同产品希望解决团队中的协作效率、项目管理等问题。

在产研协作流程中,和设计师关系更加密切的设计协作发展如何?

在这篇文章中,通过观察设计工具的变化,我分别从生产创作、设计评审、资源管理三个维度来分析其发展历程。

图片

f

第一阶段:通用单体工具 —— Photoshop / Adobe Illustrator

这个阶段互联网刚刚起步,出现了用于完成精细化图像设计的工具。在 1990 年 2 月,Photoshop 的 1.0 版本正式发布。Photoshop 是一款位图编辑软件,主要处理以像素所构成的数字图像。因其丰富强大的图像编辑绘制功能,当时被广泛应用于各行各业,如早期 PC 端网页的 UI 设计、门户网站运营图设计、广告海报设计、照片后期处理等。

而 Photoshop 的兄弟产品 Adobe Illustrator 则是一款矢量图形设计软件。相比于 Photoshop,它不依赖于图像的分辨率,无论显示器大小如何,矢量图都不会降低质量,非常适合创建基本的图形,如 Logo 的设计、字体设计等。

当 Photoshop 和 Adobe Illustrator 被广泛的应用时也暴露出明显的体验问题。如,设计师交付时需要手动标注和切图。线下设计评审的方式,需要预定会议室、协调参会人时间,效率极低。还有一种常见评审场景,几位同学围着一位设计师的电脑屏幕发表意见。这样虽然信息传递很直接,但也严重影响了设计师的工作体验。

随着团队和项目的发展,设计产出物越来越多,团队需要将其沉淀消费。而在 Adobe 时代,创作工具和存储工具的相互独立,且多次更新需要多次上传。割裂的工具使团队资源不便管理且难以再利用。

第一阶段的创作、评审、管理资源的效率提升空间很大,随着互联网的发展上述问题影响范围也随之扩大。

第二阶段:细分垂直领域的设计工具  —— Sketch,Zeplin

2010 年后大而全的工具已经无法满足设计生产需求,针对 UI 领域垂直化工具开始替代传统设计工具,出现了细分垂直领域的设计工具 Sketch,Zeplin。

首先在生产创作方面,Sketch 相比 Photoshop 体量更小、占用内存更少、响应速度更快,这些特点让设计师们逐渐从 Photoshop 切换到 Sketch。将 Sketch 创作的设计稿上传到 Zeplin,可以省去手动标注切图的工作,这对设计师生产力的释放无疑是巨大的。不过,Zeplin 本地安装的方式以及操作流畅度等问题,依然阻碍团队协作效率的提升。

第三阶段:多人在线实时协作工具 —— Figma,MasterGo

到第三阶段,互联网企业规模继续扩大,去中心化的组织结构要求工具不再受平台和系统限制,以 Figma、MasterGo 为标杆的在线多人实时协作工具应运而生。(下文以 MasterGo 为代表进行阐述。)

MasterGo 通过将工具云端化,把刚刚我们谈到的生产创作、评审、资源管理融合。对于设计师而言,在线创作后只需要生成一个分享链接,团队成员即可获取到最新设计稿,节省之前反复修改上传操作;不再需要手动标注切图,这些功能对于设计生产力释放无疑是巨大的。

同时,MasterGo 相比 Sketch 更轻量、响应更快,这也是其获得更多设计师亲睐的原因。对于团队,设计评审不再是一件繁琐耗时的工作,评审人可以根据自己的安排随时在线评审,提出修改意见。

在线的方式,保证了项目信息的互通性,每位成员得到的信息是一致的,最新的,打破了团队成员之间存在的信息壁垒。

第四阶段:产研协同平台 —— 蓝湖

除了生产方式的重大变革,随着团队角色和分工进一步细化,产研协作流程的逐渐规范,仅靠优秀的生产工具已经远远无法满足团队的需求。更需要一款能够产品/设计的生产、协作、任务和资源管理整个产研流程串联的一站式的平台化工具,来提升团队协作的效率。
蓝湖目前集中在设计协作环节提效,未来会以设计协作为原点逐渐向产品/设计创作、实时协作及研发生产的全流程辐射,形成一站式产研协同平台。

 

国内产研协作的痛点问题

目前国内产研团队的协作模型是怎样的呢?根据调研,大部分团队处于瀑布式开发或敏捷式开发方式。

产品经理写完需求文档分享到团队内部沟通群中,团队成员在 IM 中提出修改意见,或者线下会议评审。产品文档定稿后,设计师根据产品文档输出设计稿,并进行设计评审。之后进入研发阶段,研发完成后进行上线前验收,最后灰度上线。

图片

在这样的产研流程中,存在非常明显的几点问题:

图片

1、项目过程文件割裂,沟通信息流转失真

团队产品文档/设计稿分散在不同平台,像一个个信息孤岛,割裂的形态成为团队成员间信息互通和项目信息流转的天然障碍。比如,研发同学在查看一个项目的产品文档、设计稿、项目进度时,需要分别进入到不同平台,操作成本很高。尤其在评审时,大家在 IM 平台上阶段性的瞬时沟通,你一句我一句,使整个沟通信息难以记录,且信息极易失真。

2、产品文档设计图评审体验差

如今,虽然线上评审的形式已经逐渐被大家接受,但依然有很多团队采用线下评审的方式。线下评审虽然可以直接接受对方的信息甚至情绪,但协调多方人员时间、记录跟踪评审意见,追溯文档修改都影响团队协作效率。

3、低效的手动标注切图

以往低效的手动标注切图的方式,一旦漏标或错标,不仅会消耗大量人力,还会带来反复确认修改的额外工作。

 

一站式产研协作云平台

蓝湖作为一站式产研协作云平台,是如何解决这些问题呢?

图片

蓝湖最初被大家认可是因为高效的自动标注切图功能。不过,除了大家直接使用到的工具属性外,蓝湖更重要的是作为工具背后的高效协作和管理的理念。

1、产研团队资源整合

当前蓝湖集中解决产品文档与设计稿的整合,即产品经理可以上传 Axure、word、PDF、PPT 等文档到蓝湖项目中,设计师也可以把项目的 Sketch 、Photoshop、Xd 设计稿上传,这样每个团队成员可以在蓝湖一个平台上基于输出文档和设计稿无障碍的沟通协作。

图片

更重要的是,项目过程中产生的设计图/产品文档等组织过程资产对于团队的成长是极其重要的。相信如果有做团队管理的朋友一定深有感触,做好团队的资产管理,不仅局限在资产的存储和分类,更要做好全生命周期的管理,资产的生产、流转和消费每一步沉淀价值都是巨大的。

2、产品文档、设计文件在线协作评审

设计师将 Sketch 、Photoshop、Xd 的设计稿上传到蓝湖后,团队成员可以在线评审,减少线下低效会议。同时线上评审可以精确到设计稿的具体某一点提出意见,信息传递更精准,评审环节更高效也更友好。

图片

有时评审后上传的新设计稿差异很小,只是加了一条分割线,研发同学很难发现。为了帮助研发同学快速分辨设计图更新点,我们上线了历史版本对比功能,通过图像算法的像素级比对能力,自动标记版本间的差异,更新点一目了然。

3、设计稿自动标注切图,自动生成代码

图片

调查显示,目前蓝湖能够帮助团队节省每周 2 个工作日的开发时间。但蓝湖为产研团队赋能的能力远远不止于此。基于设计图一键生成整页代码功能,可以节省 30% 的开发时间,大幅提升研发效率。并且生成的代码高度还原了设计效果,设计师不再需要反复走查验收。

 

协作与蓝湖的未来

未来的协作趋势是融合的,蓝湖也在持续探索最佳的设计协作方式,不断打破工具的边界,进一步解决产品研发协作效率。

图片

蓝湖未来不仅会在设计协作每个节点渗透更深入,提供更多最佳实践。同时会在文档协作、项目管理、设计创作等多个环节提供解决方案。欢迎大家持续关注蓝湖~

期待我的分享能对你有帮助,更期待我们能在蓝湖相遇。

 

原文地址:蓝湖产品设计协作(公众号)

作者:蓝湖产品设计协作

 

转载请注明:学UI网》蓝湖产品经理:产品设计协作的前世今生

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

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

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

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



工作经验|设计资产库中的组件,应该如何命名?

seo达人


设计系统的基础工作之一就是给组件命名。这个工作看上去并不起眼,似乎还有些机械重复,但实际上却需要具备严谨的逻辑和对细节的锱铢必较。

组件的命名方式并不唯一,你可以按照你对组件构成的理解,来规划你的命名逻辑。下图以我工作中用到的一款组件库为例,呈现出组件的命名逻辑:

图片

可以看到,我们在命名时分了 5 个层级,依次是类别,元件,模式,等级,状态

 

1、类别

类别指的是组件最本质的作用和宽泛的应用场景。通常我们会分为:通用、导航、数据录入、数据展示、反馈等几个类别,类别以及其中的部分组件如下图所示:

图片

 

2、元件 / 组件

元件即具体的、单一的组件,比如 “导航” 这个类别下就包括了固钉(返回顶部)、面包屑、下拉菜单、导航菜单、分页、页头、步骤条等几个组件:

图片

 

3、模式

目前的模式通常会分成暗黑模式(Dark Mode)浅色模式(Light Mode)两种,但随着对用户体验的不断重视,未来也有可能会出现 “护眼模式”、“色盲模式”、“高对比度模式” 等模式。

 

4、等级

等级的分类和数量由组件的基本功能和在产品的具体需求决定,有些组件比如 “分页器”、“面包屑” 通常只有一个等级,在命名的时候就可以不体现;而有些组件如 “按钮”、“标签页” 、“导航” 则会有多个等级:

图片

 

5、状态

状态即组件在交互时的变化样式,通常包括普通(默认)、悬浮(悬停)、点击、失效(禁用)等,根据不同组件的特性,也可能会包括危险提示、聚焦等状态。

根据上述这个规则,我们就可以对所有组件进行有规律的命名,下图中组件悬停状态的命名为:Navigation/Sidemenu/Light/Primary/hover

图片

图片

 

组件命名的注意事项

在给组件命名的时要注意以下几点:1. 含义清晰

组件的命名能够清晰的体现组件的性质和状态,不要仅仅使用数字 1、2、3 来代替状态。举个例子,你的产品品牌色主色名称的结尾应该是:“……brand/primary”,而不是 “brand/blue1”,或 “brand/ #E60326”。

除了色板,我们对于组件也是要尽量清晰的描述组件的类别和状态,而不是它的外观。比如按钮在“悬停状态”的时候是浅蓝色,你命名到 “悬停” 的状态就可以了,这时你的按钮名称后半部分应为:“……/button/primary/hover”,不需要提及按钮的颜色变化。

这种命名结构可以最大程度上确保组件与系统一起发展,如果当主按钮的颜色发生变化,你也不必在整个系统和组件中更新其名称。

 

2. 遵守逻辑

命名结构要有逻辑,名称根据一定的逻辑结构进行推导,以便于当组件有新增、或组件库有革新时可以顺畅的添加和修改。

由于不同组件的等级和状态千差万别,建议你也可以先梳理出上文图中的命名逻辑层级表,按照表单进行工作,简单清晰,也方便团队的其他设计师一同协作。

 

3. 良好习惯

养成良好的工作习惯,建立标准的工作流程和规范,包括:

  • 用斜杠 “/” 分隔单词
  • 不要随意添加空格
  • 仅使用小写字母
  • 尽量使用英文单词
  • 修改内容后及时同步给团队等等

 

在公众号后台回复 “组件”,会看到更多与之相关的干货讲解。如果你还有其他与组件相关的问题,欢迎向我提问。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》工作经验|设计资产库中的组件,应该如何命名?

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

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

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

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



UI设计思路受限?来试试这5个界面设计通用技巧

高劲

做设计是很难的。不仅要创建解决问题的设计,而且理想情况下,它们还应该使人们开心并感到愉悦。设计是一种技能,它是一种手工艺品,而且这种手工艺品做起来并非很容易。


设计师如何高效沟通需求

高劲

“有效的沟通取决于沟通者对议题的充分掌握,而非措辞甜美。”——英特尔创始人葛洛夫

如何快速制作3D样机-作品包装神器

seo达人

 初识操作界面 

先来看一眼这款神器的操作界面吧,无需安装,在线版更方便。软件界面简单易操作,基本没有什么学习成本。(温馨提示:如果英语不好的同学可以使用谷歌浏览器自带翻译)

图片

 

 

 

 样机模型选择 

软件里面为大家存储了手机、笔记本电脑、台式电脑等基础模型供选择,可以独立使用,也可以叠加选择到画板中进行组合创造。

图片

 

除了样机模型以外,也提供了一些装饰元素,比如一些操作手势和设备零部件等,方便设计师进行自由创造。

图片

 

当然,还有更多各式各样的模版,倾斜的组合模版、各种颜色搭配的组合模版、各种手势的组合模版等等。方便一些基础薄弱的同学可以直接选择使用,也是非常的便利。

图片

 

 

 强大的操作界面 

了解了各类预存的资源后,黑马哥带大家看一下软件的操作界面。非常的简单易懂,基本一看就会。

当我们选择好基础样机模型之后,可以通过左侧操作栏调整样机的颜色、位置、透视角度、大小等。点击上传可以选择自己设计好的界面替换到模型中,画质还是很高清的。

图片

 

下方就有类似于图层的操作,可以管理多个组合样机模型,复制、隐藏、删除等操作。

图片

 

在画板底部也有一些常规的功能操作,可以进行调节。比如画板的背景色、视角、阴影设置等。

图片

 

在画板右侧可以对整体的灯光进行设置,满足我们环境渲染的需要。调节的方法也非常简单,大家可以动手尝试一下。

图片

 

当然,如果觉得通过各种参数调节透视比较麻烦,你也可以像操作 3D 软件一样,直接在画板中操作 X、Y、Z 轴来随心所欲的创造,是不是很酷呀!

图片

 

好了,说了这么多相信大家能够上手了,更多的功能操作就留给大家啦!希望这款神器可以带给你作品包装的新大陆,创造出自己满意的设计效果。

3D样机神器网址:
https://things.morflax.com/

温馨提示:仅作为学习交流,勿做他用。

 

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

作者:黑马青年

转载请注明:学UI网》如何快速制作3D样机-作品包装神器

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

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

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

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


用动效创造可用性:动效设计的基本原理

seo达人


在用户界面中,动效不仅仅是一种视觉装饰,而是一种强大的力量,它可增强产品参与度并扩展设计交流的范围。

本文给大家介绍了十二项最基本的动效设计原理,这些都适合用于UX/UI设计项目中,是非常有用的运动原理,建议收藏反复食用。

 

原理一:缓动 Easing

缓动效果模拟了现实世界中对象随时间加速或减速的方式,它适用于所有运动的元素。自然界中没有东西是从一点呈线性地移动到另一点。现实中,物体在移动时往往会加速或减速。我们的大脑习惯于期待这种运动,因此在做动画时,应利用此规律。自然的运动会让用户对你的应用感觉更舒适,从而产生更好的总体体验。

线性动画

没有任何速度上的变化的的动画称为线性动画,如坐标图所示,运动的曲线成直线状态。这种动画效果往往显得很僵硬,不自然,让用户觉得不协调。一般来说,应避免线性运动。

 

缓出动画

运动的开头速度很快,结尾处逐渐减速的动画称为缓出动画。运动曲线呈抛物线状态,缓出动画最适合界面里面的动效,快速的入场给人反应很快的感觉。

 

缓入动画

和缓出相反,缓入动画是开头慢结尾快,这就像自然落下的球体一样,速度越来越快。但是,从交互的角度来看,缓入可能让人感觉有点不自然,因为结尾很突然;在现实中移动的物体往往是减速,而不是突然停止。缓入还有让人感觉行动迟缓的不利效果,这会对网站或应用的响应速度给人的感觉产生负面影响。

 

缓入缓出动画

把缓入和缓出曲线连接在一起,就是完整的缓入缓出动画,它的运动过程可以想象一辆汽车从起步到停车的动作,可以实现比单纯缓出更生动的效果。由于开头慢、中间快和结尾慢,动画将有更强的对比,会让用户感到愉悦。

因此,缓动原理实际上是使动画不再那么尖锐或生硬的过程。

 

原理二:变形 Transformation

变形是由一个形态变成另一个形态,这种形变是动画里最引人注目的。通过元素形态的转变,告知用户元素的状态或作用发生了改变。

例如这个下载动画,下载完成后变形为按钮,其实是符合用户预期的。这种无缝转换,可以提高用户的认知度,提

升了动画的连贯性。

在动效中,利用挤压变形原则能够唤起用户的主观记忆。是刚性的还是柔软的,通过物体运动的变形状态就能很好的体现出来。

 

原理三:克隆 Cloning

当元素被克隆时,可表达出元素与元素之间的某种连续性。在此原理中,如何让物体的出现和离开具有连续性、关系和过渡,是信息准确传递的关键。

例如这个发布按钮,点击它会创建多个新对象,引导注意力,非常清晰的表达了他们之间的关系。

还有这个运动健康页面,在添加练习项目时,从主按钮克隆生成一系列练习项目,选择完成后原路返回。

 

原理四:覆盖 Overlay

利用覆盖原理能让原本有限的空间得以延伸,用以显示额外的可见元素,补偿了用户体验中的单一统一视野或“客观视图”。覆盖原理在UI设计中常用于列表横滑,通过覆盖,隐藏相关操作,以减少视觉上的干扰。

在某种程度上,作为设计师,“层”的概念是显而易见的,不言而喻。我们用层来设计,层的概念被深深地内化了。但是,我们必须小心区分“制作”和“使用”的过程。

作为不断参与“制作”过程的设计师,我们要非常熟悉我们正在设计的物体的所有部分(包括隐藏部分)。然而,作为用户,那些不可见的部分是根据定义和实践,在视觉和认知上隐藏的。

 

原理五:偏移和延迟 Offset & Delay

偏移和延迟原理是表明元素之间的层级与关系,在新元素入场时利用偏移和延迟让信息或界面元素按照秩序进退场,定义对象关系和层次结构。

在上面的示例中,浮动操作按钮 (FAB) 转换为头部背景。数据图表在时间的延迟下依次出现,暗示用户这里的信息与其他元素之间的区别,吸引用户注意力。

 

原理六:遮罩 Masking

遮罩是决定元素变化的结果是什么,通过暂时使对象显示和隐藏,以连续无缝的方式转换,保持了叙事流程的效果。虽然对象本身保持不变,但因为它有了边界和位置,这两个因素决定了对象是什么。

例如这个转动的咖啡杯,借助遮罩,通过改变logo的位置和吸管的朝向,造成杯子在自转的假象。

在上面的例子中,音乐封面改变了边界形状和位置,但没有改变内容。转换发生在用户执行操作后激活,是相当巧妙的技巧。

 

原理七:父子关系 Parenting

父子关系是将界面元素关联起来的重要原则,创建出空间和时间层次关系。它最适合作为“实时”互动,例如拖动列表顺序时,其他信息会同步跟上。

回想一下,很多元素属性都可以创造这种联动的继承关系,例如不透明度、位置、旋转、缩放、形状、颜色等。

 

原理八:数值变化 Value Change

文本和数字的变化是如此普遍,以至于我们忽略了它们,而我们却没有给它们带来区别和严谨来评估它们在支持可用性方面的作用。

数字和值表示现实中正在发生的事情,既可以发生在实时活动中,也可以发生在非实时活动中。它可能是时间、收入、速度、游戏得分等。当我们使用动态的数值变化时,它激活了一种“神经反馈”,用户会觉得自己与这些数值有关联的。如果这些值是静态的,就感觉与现实的联系会减少。

数值的变化在各类金融理财和日历APP中经常出现,数据的动态表达和交流可能会对数据的价值产生影响;如上图中的数值的动态变化,让用户感知到自己可能有能力影响到数据,提升了参与活动的意愿。

 

原理九:蒙层 Obscuration

蒙层与原理四的覆盖类似,只不过蒙层带有透明属性,它挡住了后面的信息,但又没有全挡住。iOS中常见的毛玻璃效果就是如此,它让用户意识到正在操作的对象,还有另一个世界。拓展了Z轴的层次结构,补偿用户体验中的单一视野。

 

原理十:视差  Parallax

当用户滚动时,在视觉平面中创建空间层次结构。其目的是为了建立各元素的层级关系,移动速度更快的交互式元。对用户来说显得更接近,较慢的非交互式元素,会退回到背景显得更远,从而更好把内容和环境区分开来 。

设计师可以利用时间本身来创建这些关系,告诉用户界面中的哪些对象具有更高的优先级。用户不仅认为界面对象现在具有超出视觉设计中确定的层次结构,而且现在可以利用这种层次结构,让用户意识到设计之前掌握用户体验内容。

 

原理十一:多维 Dimensionality

维度是将界面的元素多维化,使元素看起来像可翻转的,可折叠的,浮动的。可以使不同的UI元素实现无缝的过渡衔接,它通常以折纸维度、浮动维度和对象维度这三种方式来呈现。

此外,维度原理克服了视觉平面中的分层悖论,其中缺乏深度的物体存在于同一平面上,但出现在其他物体的“前面”或“后面”。

折纸维度可以被认为是“折叠”或“铰链”的三维界面对象,它由多个元素组合成“折纸”结构,隐藏的物体在空间上仍然可以说是“存在”的,即使它们不可见。

浮动维度为界面对象提供了空间起源和离开,使交互模型直观且具有高度叙事性。常见的“3D”卡片就是通过这一维度来实现的。

对象维度会产生具有真实深度和形式的维度对象,可以看到,虽然在2D层,元素却可以3D视角呈现真实的维度。

 

原理十二:平移与缩放  Dolly & Zoom

平移与缩放是电影概念,指的是与相机有关的对象的运动,以及画面中图像本身的大小从远景平滑变化到特写镜头(反之亦然)。

在某些情况下,无法判断对象是否正在缩放。可能是在在 3D 空间中向着相机移动,也许是相机在向对象移动,又或者是对象自身在放大缩小。以下三个示例说明了可能的情况。

镜头平移:被拍摄物保持静止而镜头移动或镜头保持静止,而被摄物体进行远离或接近镜头的前后移动。

镜头缩放:镜头与被摄物体在位置上保持静止,而被摄物自身进行缩放。

缩放:是指视角和对象都没有在空间上移动,而是物体本身在缩放(或者我们的视野正在缩小,从而导致图像放大),这向观看者传达了附加界面对象在其他对象或场景“内部”的信息。

移动还可以结合维度原则,从而产生更多空间和深度体验,并向用户传达当前视图“前面”或“后面”的其他区域或内容。缩放允许无缝转换 – 实时和非实时 – 支持可用性。在创建空间心智模型时,Dolly & Zoom Principle 中采用的这种无缝性非常强大。

以上,便是有关动效设计的十二条基本原理,希望能给你带来一些启发。

 

参考资料

https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing?hl=zh-cn

https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

 

原文地址:站酷

作者:印迹_

转载请注明:学UI网》用动效创造可用性:动效设计的基本原理

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

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

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

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


设计师应该关注的用户体验设计模式

鹤鹤

我们在周围的世界中看到了许多熟悉的设计模式。例如,大多数道路用实线或条纹线分隔车道。还有交通灯和道路标志可以帮助您在道路上行驶。如果每个国家/地区使用不同的系统,司机将不得不为他们想要驾车经过的每个国家/地区学习新的驾驶模式——但这不切实际!

UX 设计模式的工作原理类似。它们使用户无需学习新系统即可熟悉浏览数字产品或网页。

什么是用户体验设计模式?

UX 设计模式是用于构建用户界面的常见构建块。设计师使用 UX 设计模式作为可重用组件来解决常见的可用性问题。

例如,我们经常看到的一种设计模式是面包屑。面包屑向用户显示他们所在的页面以及返回主页的路径。

UX 设计模式如何改善用户体验

设计模式为设计人员提供了构建块以更快地创建用户界面,但它们也增强了用户体验。

UX 设计模式通常遵循用户熟悉的通用设计标准,从而减少学习和浏览新产品或网站所需的时间和认知负担。

在《我们如何决定》一书中,作者乔纳·莱勒 (Jonah Lehrer) 写道,识别熟悉的模式会释放出多巴胺——一种与动机、奖励、记忆和注意力有关的化学物质。当用户体验模式按预期工作时,多巴胺命中会增加。

使用有效的UX 设计心理学技术的设计师,例如熟悉的 UI 设计模式,可以增强用户体验并使产品交互更加愉快。

UX 和 UI 模式之间的差异

大多数设计师交替使用UX 模式和UI 模式这两个术语,因为区别很小,有很多重叠,并且可能会引起混淆!

UX 模式:用户流和导航的可重用模式——在社交媒体平台或网站上无限或连续滚动。用户认识到他们可以向下滚动以刷新页面。

UI 模式:用于视觉和交互设计的可重用模式——一个汉堡图标。用户知道汉堡包图标将打开导航。

何时以及如何应用设计模式

知道何时使用设计模式对于产品设计和用户体验至关重要。设计人员必须仅在有明确的可用性原因时才使用设计模式。

以下是识别用户需求和应用设计模式的四步、以问题为中心的方法:

查明问题——您可以通过分析和可用性测试的组合来识别问题。例如,您注意到在获取客户详细信息时,您的产品注册流程有很高的流失率。通过可用性测试,您了解到一个常见的痛点是注册过程耗时太长——您的注册表单要求填写全名、电子邮件、年龄、性别、城市和手机号码(其中许多细节与使用产品无关) 。

通过市场和竞争对手研究找到解决方案——寻找竞争对手和流行的设计库,以找到常见的 UI 模式来解决您的问题。回到我们上面的例子,您会发现竞争对手通常只在注册时询问用户的全名和电子邮件地址。它们还允许用户使用社交媒体帐户进行注册和登录,从而简化注册流程。

自定义设计模式——您必须自定义新的设计模式以匹配您的品牌和现有设计系统。对于我们的用户注册示例,此自定义可能包括调整输入、社交媒体按钮和提交按钮的圆角半径。占位符文本、输入标签和错误/成功消息将使用您的样式指南中的颜色。

测试您的设计模式——最后,您必须始终测试新的设计模式实现,以确保它们满足可用性和品牌要求。

上面的例子展示了可用性测试的重要性——识别和应用用户界面设计模式以测试开始和结束。

不要因为竞争对手有一个设计模式或者你认为这是正确的做法就添加一个设计模式。例如,您的网页设计是否需要面包屑导航?对于电子商务,可能有必要让用户返回到产品类别或知道他们在结账序列中的位置。但是,对于大多数其他网站,它只是添加了额外的数据点供用户处理。

UX 设计模式的常见示例

设计模式分为六大类:

A. 数据输入输出

B. 内容结构

C. 导航

D. 社交媒体和分享

E. 激励

F. 等级制度

数据输入和输出

数据输入和输出是最常见的用户/产品交互之一。用户输入信息,系统返回数据或完成一个动作。

一个很好的例子是许多网站和应用程序使用的日期选择器。尽管它们看起来略有不同,但大多数日期选择器显示类似的布局和功能——标题中的月/年、星期几和日期。

当用户单击一个日期时,它会突出显示以选择。最后,有一个 CTA(有时是一个取消按钮),用户可以在完成并准备继续时单击。

数据输入和输出的其他示例包括:

a) 表单提交

b) 成功/失败消息

c) 应用通知

d) 进度条/步骤

内容结构

你有没有注意到大多数界面使用类似的块布局和图像缩略图?或者,管理界面的左侧导航面板和右侧的内容如何?

使用这些熟悉的内容结构和 UI 模式可以帮助用户快速浏览新的数字产品或网站。目标是最大限度地减少摩擦(例如学习新界面),以获得无缝和愉快的用户体验。

导航

熟悉的 UI 模式可以帮助用户轻松浏览网站或数字产品。桌面和移动界面有不同的导航模式。

例如,主导航位于桌面网站或应用程序的标题中或左侧。在移动应用程序中,主导航栏位于页脚中,只需用拇指触碰即可。

无限或连续滚动是 Instagram 和 Pinterest 使用的典型导航设计模式。当用户滚动时,系统会刷新以显示更多内容。这种设计模式很熟悉并增强了用户体验,因为用户不需要单击下一步按钮或分页来查看更多内容。

社交媒体与分享

设计师可以使用多种社交媒体和共享设计模式,包括:

a) 链接的品牌社交媒体图标

b) 共享图标 - 向右弯曲的箭头或三个点的共享图标

c) 引言——用引号引用此人的姓名和形象

这些熟悉的设计模式可帮助用户找到社会认同,以建立对您的产品和品牌的信任。

这些设计模式利用心理学,鼓励用户执行所需的操作。这里的目标是在用户和产品之间建立联系。

激励

激励 UX 模式利用设计心理学来鼓励用户执行任务和操作,从而创建用户/产品关系。

设计师鼓励使用设计模式通过积极的反馈、认知、游戏化等来吸引用户。

例如,游戏化模式鼓励用户邀请朋友来获得奖励。UI 模式将通过 CTA 向用户显示他们当前的积分,以邀请更多朋友赚取更多。

等级制度

层次结构模式类似于内容结构,因为它们为用户创造了即时的视觉熟悉度,以便快速浏览界面并知道如何完成所需的操作。

博客的两种常见层次结构模式包括标题和目录。用户可以滚动页面以快速找到他们想要的内容或使用目录跳转到特定部分。

面包屑是电子商务网站用来帮助用户浏览产品页面和结账流程的另一种层次结构模式。

总结

UX设计模式是用户体验的重要组成部分,因为它们最大限度地减少了产品的学习曲线和人类认知负担。设计师必须知道何时使用这些 UX 设计模式,而不仅仅是出于习惯或模仿竞争对手而实施它们。

分析和可用性研究可帮助设计人员确定界面中缺少哪些 UX 模式,然后测试他们是否实施了正确的模式。

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

文章来源:站酷 作者:对啊设计君
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


2022年标志设计趋势:标志的未来

鹤鹤

2021年,标志设计师朝着更大胆、更具创新性的设计迈出了一大步。与平面设计趋势类似,品牌推广大量采用软循环动画和鲜艳的配色方案。它还开辟了实验排版,鼓励创造性思维重新审视标志设计。

2022年的标志设计趋势很可能会延续这一大趋势,我们希望看到上述美学在全球范围内得到重塑。您会看到设计师同样选择极简主义和卡通标志、3D 和平面标志、花卉和文字标志。我们认为2021年是创作自由的一年。然而,看起来在2022年,我们将看到它真正的肆无忌惮。

1) 简单的几何图形和基本形状

2) 高大的标志

3) 饱和颜色和渐变

4) 象征主义和极简主义代替现实主义

5) 涂鸦和草图

6) 粗体字标标志

7) 无衬线标志

8) 花艺和微妙的装饰

9) 黑白标志

10) 3D与平面样式

简单的几何图形和基本形状

在2022年,拥有基于复杂图形的标志几乎会很少见。此类标志通常难以记住,客户可能会很难发现在品牌与其图形表示之间的联系。对于寻求加强存在感和提高品牌知名度的大企业来说,这可能是一个巨大的问题。因此,公司倾向于拒绝此类标志,而倾向于使用一些基本的东西。

基本的几何形状是各种三角形、圆形、正方形、点和线,它们使标志设计成为简单的图像。作为优化,建议设计师使用充满活力或独特的配色方案。或者相反,切换到黑白,将这种极简效果发挥到极致。最后,还有负空间,这是另一种采用简单几何形状并保持视觉趣味的好方法。

高大的标志

虽然2022年的大多数标志设计趋势与我们两年、三年或五年前曾经拥有的一切产生共鸣,但高大的标志就像一口新鲜空气和创造力。反对过度使用的三角形、方形和圆形标志。正如我们从多个Behance项目中看到的那样,它们的美学非常适合寻求领先的时尚公司、精品店、创意工作室和大品牌。

高大的标志部分借鉴了装饰艺术风格,它们特别喜欢优雅的垂直框架。高大的标志同样具有波西米亚风美学和现代几何元素。事实上,这种标志设计趋势的根源并不那么重要。真正重要的是新的形状让设计师想出了新的标志创意,所以在这里我们希望他们以不同的方式处理字体和图形元素。

饱和颜色和渐变

实践表明,标志的颜色工作和色彩的选择是一个非常个人化的故事,通常很难跟踪全球趋势或与特定颜色相关的任何标志趋势。有人更喜欢黑白标志。有人会选择现在特别流行的单色、裸色或大地色。然而,如果我们看看大品牌,我们将能够在标志设计中使用生动、饱和的颜色来定义一个巨大的趋势。

对标志设计中颜色的兴趣已经发展到这样的程度,创作者不仅要增加饱和度,还要选择纯粹、生动的解决方案,同时尽可能地简化标志。太多的细节和颜色会造成混乱的外观,因此选择其中一个至关重要——在极简主义时代,选择很明确。然而,我们不禁强调鲜艳的色彩很难处理——尤其是糖果色。它们可以使品牌标识看起来廉价甚至业余。因此,当您关注这一标志设计趋势时,重要的是要取得平衡——否则您将面临使用可疑标志的风险。

象征主义和极简主义代替现实主义

有多种与简化标志和极简主义相关的标志趋势——这可能是最能说明问题的。我们每个人都将标志创建为一件真正的艺术品。动物、花卉、神话和生物——在标志内,它们展示了精湛的技艺和对细节的迷人关注。诚然,这样的标志确实看起来很引人注目,但从响应式设计的角度来看,它们失去了其他类型的标志。

您可能还记得响应式标志,这个术语是在大约4年前引入的。这些是可以适应不同屏幕尺寸或其他媒体的标志。为此,设计人员可以删除字标、简化或隐藏标志。今天几乎没有人认为响应式标志是一种独立的现象或趋势。相反,响应性是标志的自然特征,象征主义和极简主义的运动正好证明了这一点。

涂鸦和草图

2022年,草图和涂鸦将作为图形设计趋势回归,因此它们作为单独的标志设计趋势出现。其复兴的关键是人们对设计师个人品牌方法的兴趣增加。显然,没有什么比以独特风格绘制的快速草图、卡通人物和形状更好的了。

因此,要为标志设计中的更多涂鸦以及企业品牌中草率的卡通标志和快速绘制的吉祥物做好准备。以快速和朴实的方式制作的手绘标志也受到欢迎,我们已经看到以这种方式书写品牌名称的项目和团队。

粗体字标标志

如果我们考虑2021年的标志设计趋势,粗体字标志将是最好的例子。于2020年底推出的实验排版项目专注于不常见的几何解决方案。难怪品牌和标志设计师不能忽视这种大规模的图形设计创新——在这里,我们在标志设计方面有了一个全新的方向。

许多跨国公司选择字标标志。例如H&M、可口可乐、Zara、谷歌、Visa等品牌。然而,几乎没有人认真考虑使用实验字体进行品牌重塑。这就是为什么此类文字商标标志主要在独立工作室、小型企业、精品店、沙龙和个人创作者中传播。也许,这些大胆标志的特征是其吸引力的另一个关键。您可以将它们视为那些知道要注意什么的鉴赏家的标志——或者那些想要感受品牌美学的人。

无衬线标志

虽然使用大胆的实验排版并不是每个人的趋势,但无衬线字体是每个人都知道和理解的。自从设计师拒绝花哨的脚本和衬线字体而支持无衬线字体以来,已经有一段时间了。但由于存在普遍趋势,我们可以说它仍然是2021年的标志设计趋势——顺便说一下,这得到了我们上面写的极简主义和基本几何形状的流行的支持。

拒绝花哨字体的动机非常简单——使用无衬线字体要容易得多。使它们适应不同的屏幕和画布尺寸并不复杂,因此它们更适合响应式标志。有趣的是,几年前,我们观察到了一个相反的过程:许多公司从无衬线字体切换到衬线字体,因为复古设计非常流行。今天,随着复古狂热慢慢释放出来,健康的实用主义出现了,无衬线字体再次相关。

花艺和微妙的装饰

我已经不知道设计师和产品创造者用极简主义制作了一系列标志多少年了。与此同时,许多小企业继续选择和使用它们,所以这些标志不会退缩——就好像它们刚刚出现在市场上一样。所以请放心,它们将与您共存数个季节,同时还会定期推出新款式,例如2022年风靡一时的Boho。

也许,这种标志设计趋势是最流行的。优雅的线条看起来令人着迷,因此使用它们的诱惑很大。2019年如此,2022年依旧如此。 事实上,这种微妙的视觉风格并不仅仅集中在花艺上。有很多日常用品:从家具到文具和衣服。重要的是这些标志模板是如何制作的!

黑白标志

随着我们继续从各个方面学习了解极简主义,让我们在这个市场中传递2022年的另一个自信趋势:黑白标志。实际上,将黑白色调视为一种趋势是很奇怪的,因为它是一种经典的解决方案,并且它的存在与时间和风格的变化无关。所以,我们需要让您注意到对此类标志的兴趣是日益增加的,其中最重要的例子是GoDaddy的重新设计之一。他们逐渐简化了他们的标志,现在他们似乎到达了最后阶段——带有带有无衬线字体和保留标志的黑白标志。

黑白标志的最佳之处在于它们令人难以置信的风格灵活性,这使得它们在品牌设计师中流行起来。它们完美地适应了品牌的审美,因此可以将它们用于字体、装饰元素和几何形状的各种实验。极简主义、创造性的排版、花卉、象征主义、原始几何——一切都与黑白标志相得益彰。

3D与平面样式

3D是2021年最有前途的图形设计趋势之一。随着技术的发展,这种图形变得如此庞大,以至于我们永远无法预见。甚至可以在直观的在Spline或 Procreate的最新更新中进行高质量3D对象的制作。图像质量也得到了发展。

然而,在标志设计中,情况颇有争议。设计师将平面样式的 logo 转换为3D,反之亦然,力求使 logo 风格更加生动和简洁——后者对于旧版本的3D和假3D尤为典型。出于同样的原因,他们付出了很多努力来探索类似于3D的方向——等距艺术。它允许在视错觉、鲜艳的色彩、渐变、阴影和形状的帮助下获得大量图像。可能它看起来比3D更适用于标志设计——但时间会证明公司和客户会习惯什么。

最后

显然,2022年和2021年的标志设计趋势没有明确的界限。大多数处于巅峰的趋势已经伴随我们很长一段时间了。

但是,我们可以肯定地说,例如之前非常受欢迎的故障风格,不太可能成为本季标志设计的主角。在过去的几年里已经有很多这样的事情。动画标志也是如此,这是2021年最有希望的标志趋势之一。动画本身继续引起人们的兴趣,这是展示品牌的一种成功技术——但不幸的是,它并没有被证明是可行的。

最后,3D的命运也没有确定,我们还不能说3D或扁平风格的标志设计是否会成为一种趋势。我们已经写过,设计师的立场是模棱两可的,一个方向和另一个方向都有品牌重塑。


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

文章来源:站酷 作者:对啊设计君
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

实用的设计原则

鹤鹤

设计原则是设计师为规范和塑造他们的作品而制定的规则。这些原则强调焦点设计元素,遵循它们有助于帮助设计师与广泛受众产生共鸣。

尽管设计原则听起来可能限制了自由,但它们的创建是为了支持设计师的工作,而不是设置障碍。您可以将它们视为建立一般顺序但不干扰作者创造力的拼写规则。因此,设计工作依赖于设计原则,一旦使用得当,就会开始吸引观众的注意力和兴趣。理解这些原则意味着理解并控制整个项目、创建它的过程以及每个涉及的设计元素。

不同的团队和工作室区分不同数量的设计原则。然而,七项原则被认为是基本原则。它们是平衡、层次、统一、对比、强调、比例和重复/节奏。

1. 平衡

平衡可能是最明显和最容易理解的原则。这也是让视觉内容感觉舒适的一个重要功能。这个想法是设计的每个元素——比如字体、颜色、图形、背景、形状、图案、按钮、文本等——都有它们的视觉重量。较重的元素会迅速吸引观众的注意力,而较轻的元素则不会,主要用于完成整个场景的整体性与和谐性。

有两种类型的平衡,对称和不对称。对称平衡是通过沿中心轴对齐的等重元素实现的。不对称平衡与镜像相反。它使用不同权重的元素并且更常见。这样的构图围绕一个或几个突出的部分排列,因此创作者寻求轻元素和重元素之间的平衡以获得视觉图像。

2. 层次结构

层次结构是网页和应用程序设计中最重要的设计原则之一。它用于对设计元素进行优先级排序,并根据其重要性设置重点。这里有一个简单的规则:如果一切都标记为重要,那么一切都不重要。

层次结构引导用户跨界面从焦点对象到二流对象,并有助于按逻辑顺序了解事物。如果忽略了这一设计原则,构图就会显得杂乱无章,而且很难找到必要的信息。

设计中有两种主要类型的层次结构:视觉和排版。可以通过场景内对象的比例和颜色强调获得视觉层次。排版层次结构是通过不同的字体、大小和字体粗细来实现的。

3. 统一

你可能遇到过这样的网站、印刷品,甚至是室内设计概念:大量的元素很难融合在一起,所以整体形象看起来一团糟。为了解决这种图形的混杂,使用统一的原则,应该创造视觉和心理的和谐。

统一意味着与品牌理念和信息的联系,因此每个制作的设计,无论是网站页面、T恤印刷品还是广告,都应该成为其中的一部分。它与设计系统密切相关,是大多数平面设计公司和项目应该考虑的原则。

4. 对比

虽然统一和平衡创造了易于交互的视觉上可接受的设计,但多样性增加了吸引注意力的细节。如果没有多样性,即使是最平衡、最精心组织的概念也会缺乏对比,变得单调乏味。

这个设计原则为项目添加不同的视觉元素、图案、符号或排版。事实上,这是设计师可以尽情发挥创造力并顺应潮流的地方。

5. 强调

强调是通过在构图中设置焦点元素来创建画面的设计原则。这意味着它们会吸引观众的眼球,但不会超过其他元素,否则平衡就会倾斜。这就像一个好的海报设计:你立刻就能看到正在演奏的乐队,并且找到细节:音乐会的日期和地点、门票价格等。

强调可以通过比例、重量、位置、颜色、形状和样式来实现。创建一个大胆的、色彩鲜艳的元素是不够的,因为一切都应该在一个设计中连贯地显示。

6. 比例

比例是指元素相互之间的大小,是最全面的设计原则。调整比例并根据物体的大小和视觉重量对物体进行分组有助于突出重点并保持构图的统一。

设计组合中比例的主要思想是,越重要的元素越大,不重要的元素越小。就像着陆页、文章或海报一样,对象之间的比例关系与其对读者的重要性相关。

7. 重复/节奏

这两个设计原则相辅相成,相互补充。重复是指在设计中实现相同或相似的元素:如图像、按钮、颜色、字体或形状。它用于创建统一性和一致性。通过使用相同的图标、背景或风格化元素,可以轻松实现重复。如果使用得当,它可以控制浏览者在页面上的移动,因为重复元素可以成为吸引和引导注意力的绝佳方式。

元素重复的方式创造了一种节奏感。当设计中有节奏感时,观者将其视为旋律。有五种类型的视觉节奏:随机、规则、交替、流动和渐进。

随机— 没有特定规则间隔的重复元素。

定期— 重复进行相同的间隔。它通常是通过创建一个网格或一系列垂直线来获得的。

交替— 允许在设计中重复多个元素。

流动— 模仿自然流动并显示遵循各种弯曲和曲线的重复元素。

渐进式— 通过在重复时改变元素的一个特征而获得。

最后

定义要使用的设计原则并不总是有意义的,因为它们可能会在创作过程中参与和拒绝,而设计师的主要目标仍然是传达重要信息,创造和谐构图,设计可用的界面。

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

文章来源:站酷 作者:对啊设计君
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


日历

链接

个人资料

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

存档