首页

UI/UX的趋势分析

丽洁


在色彩方面,虽然UI是一个相对独立的设计环境,但其实一直是在跟随平面的趋势。

 


年初潘通发布了2021年的色彩流行趋势,灰黄色一时间成为了我们追逐的目标。

但是潘通流行色更多是表现了一种当下的社会情绪与远景追求,并不是用来指导设计的。

(图片来源:Dribbble)


在UI的色彩方面,我们都记得2020年还是流行的是高饱和色彩路线,而2021年UI色彩一下子就被冲淡了,各种低饱和度色彩的作品更加得到设计师的青睐,似乎也昭示着大家的情绪也从疫情中慢慢稳定了下来,这个世界的确需要设计来对情绪进行即时表达,在5月份Google的全新Material You设计语言中,这种低饱和色彩也被发挥的淋漓尽致。相信低饱和度色彩将在2021下半年会延续发展!


有关Material You信息可以看一下我的另一篇文章《Material You 为你而来!》


(图片来源:Google Material You)


(图片来源:Dribbble)


图形方面,亮点在3D!毫无疑问3D插画在2021上半年继续着他的强劲势头,2021上半年涌现出了大量优秀的3D风格插画,并且不止是3D卡通人物,在产品渲染和背景展现上也在酝酿新的力量。特别说明的是,设计工具的高速发展也让3D门槛不断降低,如果你只盯着C4D那就真的OUT了,像Blender Spline Stager 这样的新兴轻量级3D工具软件是需要特别关注的,也许这些新工具是真的能让你跑出与别人不一样的赛道。


(值得关注的3款新兴3D软件)



在2D图形方面,也有突破,除了传统的矩形、圆角矩形、圆形之外,UI中将会引入到更多的形状,像多边形、三角形、不规则形都会大量的出现在UI设计中,UI设计越来越开放和放得开了!



(图片来源:Google Material You)


随着去年底苹果BigSur操作系统的发布,3D图标着实火了一段时间,出现了不少3D风格图标。但是后来大家发现在图标在2D层面其实还是很有创新点的,并且也更加实用,所以我们又看到了磨砂玻璃风格图标走入了我们的视线。这种采用背板透光设计的风格图标,看起来清新自然,一经亮相就让设计师们喜欢起来了!

(图片来源:Dribbble)


但无论是3D风格还是磨砂玻璃风格图标设计,从某种意义上说,这些都是拟物化设计的一种新的回归方式,设计就是一个圈哪!


排版设计,块状与字体成为了关键词。先看几个作品,你发现了什么了吗?


(图片来源:Dribbble)


UI设计的排版不止是为了视觉好看,更多是要做信息的分割与归类,让信息阅读快速准确且优雅!从某种方面也就是我们说的用户体验。当下仍然是扁平化为主体UI设计语言的时代,阴影设计几乎已经退出了当下的主流设计,所以在信息的区分上靠的就是留白与文字,所以加粗大字体,卡片留白、形状色彩块就在UI排版设计中起到重要的作用。再辅助通过一些微交互动画,一切都是那么自然丝滑,主次分明!


(UI排版的三个趋势)


最后我们说说行业趋势方面,在2021上半年的UI设计作品中,除了常规的移动端APP UI设计之外,我们更多看到了一些针对于其他设备的UI设计,比如说电脑B端应用、车载HMI、数据可视化、交互动画等这样的新端趋势,并且这些作品的数量越来越多了,所以从行业趋势来讲,UI设计师们还是要打开更多的眼界和格局,设计的竞争不止是在水平能力上,更重要的是行业赛道的选择!关注趋势尤为重要!


(图片来源:Dribbble)

原文地址:站酷
作者:腾讯ISUX

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

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

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

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

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



设计心理学-15种用户体验法则

丽洁

一、认知负荷


定义:

认知负荷是完成一项任务所需的精神努力总量。您可以将其视为用户与产品交互所需的处理能力。如果需要处理的信息超出了用户的处理能力,那么认知负荷就太高了。


案例:

造成用户认知负荷的的原因大多都是,产品在交互和视觉上过于复杂,设计的统一性不够,导致用户在使用时不断进行思考无法形成习惯


例如移动端中的空状态,目的是为了引导用户完成任务,在设计时无论是文案展示与视觉表现都应简单明了、层次分明、视觉统一




二、锚点效应


定义:

用户获得的初始信息会影响后续的判断,用户对某件事做出判断时,会不自觉的将开始看到的信息作为衡量标准。


案例:

在日常生活中锚点效应非常常见,例如平常不带帽子,偶尔带帽子出门的你,走在大街上会发现挺多人都有带帽子,因为心理活动是把带帽子这件事作为起始衡量,而你刻意的在寻找与帽子产生共鸣的事


在产品设计中最典型的就是会员体系,例如某视频平台的会员价格默认选中的那一栏会比其他的价格低,那么用户在使用时心理会默认这是会员的价格,相对应其他更高的价格只是作为衡量这个最低价格而存在



三、诱饵效应


定义:

又称对比效应,指人们对两个不相上下的选项进行选择时,因为第三个新选项(诱饵)的加入,会使某个旧选项显得更有吸引力,通过对比诱导人购买商家想让他购买的商品。


案例:

有一位著名的行为经济学家他叫丹·艾瑞里教授,他曾经做过一本《经济学人》杂志的定价策略,这里不细讲感兴趣的可以搜一下。诱饵效应运用最多的是在超市场景,我们经常看到超市的货架上会有看起来很实惠的物品在,如一袋泡面可能是5元,而旁边还有3包泡面一起出售可能也就12元,然后开心的拿走了,这就是诱饵效应,那一袋5元的就是诱饵,商家的目的就是为了让你买走12元的


而在线上产品策略中运用最多的则是电商场景,如下图中的图书商品,单价610元,定价980元,三件单价488元,这里的单价和定价都是诱饵,目的是为了让用户同时购买三件商品,而用户内心是欣然接受因为更划算




四、注意偏差


定义:

在检查所有可能的结果时,我们倾向于关注一些看起来合理且熟悉的事物,从而忽略了其他结果。


案例:

13年9月twitter公司宣布IPO,当时11月份才开始交易,但是在这两个月时间里有一家名为twweeter的公司三天内涨了13倍,只是在名字上与推特公司极为相似,但实际业务毫无关系,机构就是利用用户的注意偏差让不了解实际情况的投资者只看到相关性,而另一面的不相关的结果用户自然的忽视掉


在产品设计的客服助手中,就属于注意偏差,我们习惯的认为向客服回复人工等关键字时,会自动切换人工客服,而产品则会设置一些虚拟的智能客服来节省成本,而用户在这个过程中则忽略了细节,误以为智能客服是人工客服



五、菜斯托夫效应


定义:

前苏联前苏联心理学家菜斯托夫提出特殊事物才易被人牢记。也就是说,有个性的人、与众不同设计得商品、不寻常的事情,都会让人留下更深的印象。


案例:

生活中我们很难记住某个点或某件事,但是当这件事足够突出拥有独特的个性我们便会深深印在脑海里,比如一串字符ezol4tpmb,我们最容易记住的是4,因为他是唯一的数字,在比如说让你去记忆国内某些城市的特点,如西安、开封、浙江我们想到的就是秦皇陵、包青天、西湖等著名具有特征的地点,因为这些事物比较特殊更容易被记住


在品牌设计中菜斯托夫效应运用的比较广泛,如何通过视觉的表现让用户对产品更加的印象深刻,对此就衍生出产品IP、品牌符号这种具有特殊意义的标识便于加强产品印象



六、菲茨定律


定义:

任意一点移动到目标点的时间与该目标点的距离和大小有关,距离越远时间越长,目标越大时间越短,公式: 

T = a + b log2(D/W+1)


案例:

在交互设计中经常用到此定律,无论是正向还是逆向此定律都能够很好的运用到交互中,如mac系统上的关闭按钮,始终在左上角并且很小,我们的鼠标在右侧,移动到左侧上角时间会随之变长,因此这一交互结构就避免了用户误操作关闭软件


再例如移动端中会把重要的按钮操作放置在屏幕右下或者居下,因为大多数人是右手使用手机,因此在使用时右手拇指距离点击区域会更近



七、幸存者偏差


定义:

幸存者偏差是指把一些事的不同角度的人员筛选出来,筛选出一部分人进行采访从而制造舆论,观察者只能看到事物的一面,而另一面则被忽略,也被称为以偏概全


案例:

某次春节记者采访到一些在火车上的群众,聊一些购票的过程以及买到票的心理感受,最后向公众公布出今年回家的票大家都买到了,但这个过程中却忽略了那些不在车上或者没买到票的人们,因此就以偏概全的传输单方面信息,这些被采访到的人们就是幸存者


在做产品时经常会听到用户画像这个词,用户画像就是利用幸存者偏差而把广大的用户数据通过典例呈现,当然这个幸存者的样本必须是压倒性的庞大,否则就掉入幸存者偏差的陷阱



八、邻近法则


定义:

彼此靠近或接近的对象往往会组合在一起,相近的元素可以建立关系,人们会不自然的把相近的元素看作一个整体。


案例:

在UI设计中,经常会用到邻近法则进行设计,如一些组件、卡片的建立,由不同的元素组成变成一个整体,其次邻近法则能够有效的用户层级的划分,如下图中的一些卡片、icon进行规律的排布最后组成一个整体,与上下模块的层级有效的区分



九、特斯勒定律


定义:

特斯勒定律又称复杂性守恒定律,他指出对于任何系统都存在一定的复杂度并且是无法避免的,问题是谁来处理它。


案例:

在任何产品设计中无论是功能还是流程都存在一定的复杂度,依据特斯勒定律有些复杂度是无法避免的,那么需要我们在设计中去解决这些问题,保证在用户的角度来看它是合理的简单的


像我们常见的话题功能,输入#自动引导出关键词供用户填写省去用户输入时间,再例如b站的一键三连,长按点赞的同时会把收藏、打赏功能一并完成;结构层面也会用到此定律如产品中的设置页面,按照不同的维度进行区分如系统维度、反馈维度、功能维度帮助用户更快的完成操作



十、帕累托原则


定义:

它是由意大利经济学家帕累托提出,它指出对于许多事件,大约80%的影响来自20%的原因


案例:

在设计中我们会发现一个产品页面有几十上百个,对于用户而言能够提供价值的可能也就那么几个功能页面,这几个页面可能占总产品的20%左右,那么我们在做优化的时候则需要去考虑如果把20%做好把它的价值放大


再往细了说,例如打车软件在这个页面中能够为用户提供核心价值的区域则是地图区域和选择目的地区域,那么在做优化体验时应当着重关注此区域,而页面中剩下的区域则受上面20%的影响



十一、社会证明


定义:

社会证明是用户用来确定行为方式的便捷捷径,当他们不确定目标时,他们最有可能认为并接受他人的行为是正确的,人数越多,行动似乎越合理。


案例:

最近抖音在评论区新增了一个踩一下与点赞进行互补,但是奇怪的是我们进行踩一下时并不会展示具体数量,试想一下当点赞的数量大于踩一下的时候,我们有时就会被影响认为这条评论值得点赞


再例如购物中的评论排序,像京东把好评优先展示在前面,当好评的数量大于其他维度时就会影响用户判断,用户会把数量多的好评当作参考依据认定这个商品符合自己的需求



十二、好奇心差距


定义:

指用户知道的内容与他们想要或需要知道的内容之间的空间,这个空间叫做差距,差距会导致痛苦,要消除痛苦,用户需要填补知识差距。


案例:

例如在做产品设计中都会涉及到登录注册流程,那么对于有些产品则需要在登录注册阶段大量收集用户信息完成更好的推荐策略,但对于用户而言用户的认知是固有的流程,如填完手机号就收到验证码,最后完成注册进入首页,如果说中间的过程需要收集用户信息,则需要对应的解决方案来弥补用户的心理差距


即可App在收集用户信息的阶段使用了偏趣味性的一些设计表现,在用户的这个空间差里面来缓解用户的情绪,激起用户填写欲望



十三、心智模型


定义:

心智模型是对某人关于事物在现实世界中如何运作的思考过程的解释,它是对周围世界的表示,可能准确或不准确,用户认为他们对您的产品的了解会改变他们使用产品的方式。


案例:

心智模型其实就是我们对未来发展的预测,内心对要发生的事情进行预判,然后采取行动,例如我们要购物想到的就是淘宝、京东,想到吃饭可能就是美团、饿了么,这些产品就打入了用户的心智。往细了说心智模型是一个广泛的概念,它还包括行为模型、实现模型、表现模型


像我们常用的聊天软件,在聊天过程中撤回消息,就会有个重新编辑功能,这就是满足用户的心智模型,预判用户的操作例如微信、钉钉、飞书



十四、拟态认知


定义:

拟态是在页面中模仿现实世界物品,通过它的外观和交互模仿现实,拟物化适合用来让用户适应新的页面和技术形态。


案例:

我们在做页面时都会涉及到图标的绘制,那么那些具有业务属性的图标则需要通过拟物的方式进行呈现,对于用户能够降低理解成本,如经典的红包、自如的金刚区等



十五、奇点效应


定义:

与群体相比,用户对个人的关注不成比例,与大型抽象群体相比,人们更愿意同情一个单一的、可识别的人。


案例:

这个如果用逆向思维来想的话,类似于我们说的“对抗性人格”在大多数人都对一件事或事物看法一致时,出现一个不一样的声音,试想一下我们在刷短视频时评论区总有那么些人与大多数人的看法不太一致,这就是奇点效应


在设计中体现最多的是等级体系和勋章体系,一方面为用户的攀比心理,另一方面则是奇点效应,这类用户的想法就是为什么要一样,为什么不可以独树一帜。


       原文地址:站酷
作者:爱吃猫的鱼___

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

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

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

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

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


设计思维的方法与步骤

丽洁

谈到设计思维可能有很多小伙伴会问,“设计思维是设计师的事,和自己没有关系”。其实不然,我认为设计思维不仅仅是设计师才具有的能力,关乎到各行各业不同身份的人,特别是管理层和老板更应该有的一种思维方式。设计思维无处不在,有人可能会问:“到底什么是设计思维,设计思维能带给我们什么好处,希望通过一篇文章让你彻底搞懂设计思维的概念和方法。

设计思维的发展历史

美国经济学、认知心理学家,诺贝尔经济学奖获得者赫布·西蒙 (Herbert Simon),在他的著作《人工科学》提出了设计作为一种思维方式的概念。

1987年,哈佛大学设计学院教授罗伟(Peter Rowe)出版了《设计思维》一书,书中首次使用设计思维的概念。

1991年,戴维·凯利(DavidKelley)成立了设计和创新咨询公司IDEO,将设计思维推向商业化,成为设计思维的教育和推广先驱。全球最大的设计咨询机构之一。1992年,卡内基梅隆大学设计学院院长布坎南(Richard Buchanan)发表了一篇名为《设计思维中的难题》的文章,他指出:“设计思维可以扩展到社会生活的各个领域”。

2004年戴维·凯利(David Kelley)创办了斯坦福大学设计学院(D.School)致力于提供设计思维的教育和推广,以Design Thinking为核心教学思想,教授设计思维方法与实践。在美国,设计学院正取代商学院成为热门,该学院已成为斯坦福大学最受欢迎的学院。

设计思维的定义

“设计思维是以人为本的利用设计师的敏感性以及设计方法,在满足技术可实现性和商业可行性的前提下,来满足人的需求的设计方法。设计思维是一个可以被重复使用的解决问题的方法框架或一系列的步骤,提供解决问题的原型和一系列的工具。” ——蒂姆·布朗(Tim Brown)教授,设计思维的提出者和倡导者

首先设计思维是以用户为中心的,从用户的需求开始出发,针对产品看看用户有哪些需求,能不能通过科技手段去实现,有了科技的可行性,再看看能不能不断的实现商业变现,才能使我们的产品不断的给用户提供价值,所以设计思维指的是用户的需求,科技的可行性和商业的持续性,这三者之间的交界就是设计思维带来的创新。


设计思维的应用领域

设计思维其实也是一种思维方式,能帮助你打破当下的一些卡点,包括企业遇到的一些问题,设计思维能够帮助企业创新,从而在企业发展的不同阶段实现升级和转型,甚至有些企业用了设计思维的方法实现第二增长曲线。设计思维的应用领域也非常的广,比如:实物产品、服务设计、商业模式、软件应用、工作流程、企业文化等。有些儿童教育机构也用设计思维开设了创造课程引导和教育孩子,斯坦福大学还运用设计思维开设了人生设计课,就是一个人的人生也可以被设计的,我也曾读过这本人生设计课,有空给大家分享读书笔记。一些全球领导品牌公司早已意识到设计思维对于其产品开发及公司发展的重要性,采取一系列措施加大对员工在设计思维方面的培训,从苹果、美国银行、 宜家、可口可乐,星巴克、Airbnb、FOTILE方太、到GE通用电气、宝洁、IBM、三星、3M 等,都已经把设计思维纳入其经营策略,成立设计思想工作坊,并大量运用于为各种企业和社会难题提供实用和具有创造性的解决方案,下面就来谈谈设计思维具体步骤和方法。

一、共情 (Empathy)

设计思维的第一个方法是共情(Empathy)也叫同理心。大家可以想一下,我们在设计或者解决问题的时候,是不是站在需求人的角度去看待问题的,有的设计师可能只看到冰山模型最上面的一层,而冰山下用户真正需求却看不到,这就需要我们去了解用户,了解用户最好的方法就是共情。

1. 观察

观察是共情最基础的方法,其实就是深入洞察用户,如何从用户身上发现问题。你可以回想一下上大学时,是如何谈恋爱的,是不是一开始先默默的观察对方,看看有什么习惯和行为,喜欢什么东西,想办法去靠近和了解,找到一个突破点。比如你帮她修好了电脑,解决了她的问题,就这样自然而然交往,进入了恋爱状态。这就是观察,观察是人的本能,也是建立情感最基础的第一步。这里的观察是带有目标性的,并能解决实际问题的观察。

最近看了一个节目叫秘密大改造,就是帮助用户改造装修老旧房的节目。栏目组安排室内设计师装作成记者和用户一起住一起吃,设计师发现房子特别小,空间利用很低,观察房主人生活习惯、爱好等,通过交流了解房主的内心世界及对生活的向往等。完全和房主建立共情基础,等了解观察的差不多了,节目组就赞助房主和节目组一起去做公益的名义外出一个月。节目组故意不告诉房主在这一个月之内帮助房主改造房子,设计师就根据之前观察发现的居住问题,设计改造了房子的方案,并监督工人进行装修。等一个月房主人回来后,惊讶地发现自己的房子都认不出来了,完全超出了自己的想象,房主人太满意了,每一个细节都考虑到用户的需求,最终设计的方案用户当然比较满意了。这个栏目就是用了设计思维帮助用户解决实际问题的。我举这个例子希望帮助大家能更容易理解,大家有空可以看一下这个节目,看看设计思维是如何运用的,如果是自己该怎么用设计思维的方法去做。

2. 沉浸式体验

共情的第二个方法就是沉浸式体验,就是把自己当成用户去体验真实用户的感受才能更好的发现问题。比如IDEO公司被委托设计一款儿童车,就让工程师坐在现有的儿童车上去沉浸式体验,推着这些成年儿童去户外或去购物。体验结束后这些工程师就总结了:儿童车太矮了,前面看到的都是脚,还有灰尘,最重要的看不到妈妈没有安全感,小孩总爱哭,于是工程师就把儿童车做成可折叠并能升高,下面可以放东西,然后再转过来面向妈妈,儿童就喜欢了。这就是通过沉浸式体验来挖掘用户需求。

3.访谈

共情最后一个方法是用户访谈,可以通过定性或定量访谈目标用户,可以面对面的交互式访谈,焦点小组访谈、专家访谈、也可以是问卷形式的等,网上有很多访谈模版和发放问卷的网站。上文提到的例子秘密大改造的设计师和用户一起吃一起住,在不轻易的的交流中就知道了用户的真实需求,这种访谈方式用户是最不会感觉到有压力的,也最能发现用户真实需求的,所以最好的访谈是先和用户做朋友,就是完全把用户当成自己的好朋友,试问有几个公司能做到这一点呢?

二、需求定义(Define)

通过共情的方法我们充分理解需求,并挖掘了用户的诸多问题和需求,那么是不是所有的需求都要满足用户呢,怎么找到用户的真正痛点呢?这就需要重新定义需求,找到核心问题并进行设计。作为设计师你是否会遇到:接到需求就去设计,而反复设计的结果却不被用户满意,只是做到了被领导满意,而被陷入盲目的尝试误区中,这个时候应该回头想一想需求有没有被正确定义,有没有明确用户真正的问题。只有对设计需求进行有针对性的,有目标性的定义和理解,设计师才能找到最佳的落脚点,从而高效省时省力的完成任务。比如我们使用的Iphone,有没有发现不能自定义铃声,乔布斯肯定发现了这个问题,但为什么到现实还没有改进这个功能,但Iphone依然卖的很好。这就说明了自定义铃声不是用户的核心需求,没有谁会经常换铃声来炫耀自己的身份,这个功能有没有都不影响最终的销售成绩,原因可能是苹果希望用户不要被打扰,更尊重用户隐私。需求定义不是产品经理或老板拍脑袋定下来的,要把自己放到空杯状态,不要相当然的拍脑袋,也不要拍胸脯说自己的想法一定是正确的、要深挖用户需求,找到用户真正痛点,重新界定问题,从而确保解决产品核心问题的正确方向。


三、头脑风暴(Ideate)

设计思维的第三步生成想法,要生成想法可以利用头脑风暴来共创更多的好主意。提到头脑风暴可能大家都听说过,其实就是聚集各式各样的人一起思维发散,俗话说 “三个臭皮匠顶个诸葛亮,三人行必有我师焉” 就是这个道理。头脑风暴的前提是正确理解用户的真实需求和明确设计需要解决的核心问题,头脑风暴尽量不要找领导参与,因为领导一句权势的话会扼杀很多好意的产生。其次要注意自身思维的局限性,我们在思考问题时经常会带有自己的经验、习惯和思维方式,从而走进了盲区,如果有人提出一个好主意,有些人就不愿意思考了,这也说明了人的惰性。所以开展头脑风暴还可以帮助我们打破传统思维方式,打破盲区和惰性,从而打开多视角全方位的开放性思维,帮助产品找到创新的方法。还有要注意的是:面对别人提出的天马行空的主意,不要评判和否定,而是说Yes,and, 在别人想法上再去想,并且鼓励越多这样的想法越好,这样就会激发出更多人愿意出来分享自己的想法。最后,设计师从发散思维中收集灵感,再由灵感转变成可实现的想法,最后把最佳想法转变成全面、具体的实施方案。

四、原型设计(Phototype)

在找到最佳的解决方案之后,需要在原型上呈现出来,这就把抽象的概念与想法变成具象的模型来验证用户问题,这样能避免不合理不准确的假设。为了快速搭建原型可以采取精益创业的精神做出最小可行性产品MVP,花最少的时间和金钱来快速试错。最简单的原型可以利用随手可得的材料快速制作或现场绘制草图,达到易理解快速沟通的效果,从原型中看看有没有准确解决用户的问题,发现问题后,再去迭代和优化。

五、测试(Test)

原型设计好之后可以进行小范围测试,A/B测试,灰度测试等。我们要考虑在测试中要得到什么结果或验证什么问题,然后从观察真实用户的使用习惯和喜好出发。抓住用户的本能行为,重点看用户做出了哪些操作行为,用户真实的反应和你所预期的可能是不一样的。当用户提出不一样的反馈时,不要为自己的设计而辩护,用户说的不一定对,但用户说的一定是个事实,用户觉得不对,就说明哪里可能出了问题,要虚心接受批评。如果用户说的对,就去改,收集用户的反馈后,再进行快速迭代和优化,最后发布上线,产生商业价值可持续性。

总结

能读完这篇文章的你应该对设计思维有一定的概念了,你已经有了改变世界的能力,也许你在以后的面试中能更好的运用设计思维的方法来进行面试问答。最后简短总结一下设计思维的方法过程:“首先要学会与用户共情,帮助我们定义问题,再用头脑风暴的方式帮助我们解决问题并产生创新的方法,把创新可行的方法转变成原型,用原型进行测试和验证假设,再通过原型测试去了解用户,并重新定义问题,所以这五个步骤是不断反复和叠加的,最终打造出用户喜爱并能产生商业价值的产品”。

读了这篇文章你可能会发现,其实市面上所谓的产品思维,商业思维,突破性思维,服务设计,体验设计,其实都是来源于设计思维的核心理念和方法。设计思维帮助了很多企业,但也不要认为是万能的,它只是帮助我们解决问题的方法和工具框架,只有在项目实战中不断运用和实践,才能更好的理解和转化成自己的理论体系。

原文地址:站酷
作者:junken

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

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

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

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

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


为什么你始终做不好版式设计?

seo达人


 

原文地址:Martin_K(站酷)

作者:Martin_K

转载请注明:学UI网》为什么你始终做不好版式设计?

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

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

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

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

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


还在为没灵感发愁?那是没学过移花接木这招!

seo达人

我们来变个魔术,这是贾玲,

qiu~

变成了沈腾。

 

图片

看到那根点燃的火柴吗?

qiu~

变成了火腿肠。

图片

从贾玲变成沈腾,将火柴变成火腿肠,有趣的同时却没有影响到整个画面的调性,这便是移花接木的方法,设计理论叫做置换同构。 

 

 

这是一个8,这是一个苹果,

你想到了什么?

图片

利用苹果置换成8的形状,但显然看起来有些粗糙,融合调整下,让苹果有了8的样貌,当然还可以此类推成其他的样式。

图片

图片

一个冰淇淋与一座富士山,找到近似相同可置换的区域。

[优化输出图像]

在原有结构不变的基础上,将冰淇淋替换成了富士山,创意就是这么简单。

图片

置换的理念是将两个毫无关联的图像,比如这样,将其中一部分与另一个部分替代,

[优化输出图像]

形成一种新的组合形式,替代后的物体和原来造型保持相对的一致,置换的设计就产生了,当然这都是相对简单的。

由此我们可以尝试更多脑洞的置换设计,比如人在蛋黄里游泳,农场种在蛋黄里。

水壶倒出来的不是水而是云朵,顺着这样的思路还可以增加场景元素形成全新的创意设计。

 

 

置换同构的商业案例

看到这样一个场景,如果要做一个手机的海报,

你想到怎么置换吗。

将场景调整成手机外边的形状,手机平躺在场景中。

放置主题文字,再利用相关的场景元素增加融合的真实感,这样简单、有趣、创意的设计就做好了。

图片

 

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》还在为没灵感发愁?那是没学过移花接木这招!

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

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

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

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

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


近期输出的一些UI设计探索作品

seo达人


图片 

以下作品主要是练习通过 Sketch & Adobe Illustrator 软件配合实现立体图标设计,掌握通过色彩的变化营造质感和光感。 

图片
图片 

以下作品主要是练习圆柱体的绘制和光影的处理,以此来表现排行榜。配色比较趋向于年轻化,青春活泼的风格探索年轻化的设计趋势。

图片
图片 

这一组作品主要是研究极光风的配色和磨砂玻璃效果的结合,用磨砂玻璃层作为图标的保护罩,带来朦胧美的感官体验。

图片
图片
图片
图片 

随着网民年轻化的趋势,UI设计也逐渐趋近于更加青春活泼的风格。探索了一组低饱和度高明度的图标配色,利用不透明度渐变实现晶白风格图标。

图片
图片 

这是在五一假期前绘制的一个相机 APP LOGO,探索多色环形组合来进行色感营造,利用简单的内阴影和蒙版工具刻画效果。

图片 

一组带给大家好心情的 IP 表情设计作品,超椭圆的造型和青春可爱的风格结合,练习表情设计的能力和光影把控的技巧。情感化设计的技能被逐步放大,也是提高作品亮点和视觉感的一个不错的方向。

图片
图片 

想要休息的时候来了一个灵感,大家都喜欢喝咖啡,我还是比较喜欢喝茶~O(∩_∩)O哈哈~有感而发绘制了一个关于茶的 APP LOGO。

图片 

带有纹理的球体绘制,你可以想象这是一个瑜伽球。利用 AI 软件的 3D 功能进行造型绘制,然后利用 Sketch 软件进行质感细节的刻画完成。

图片 

这组作品主要是研究 B 端设计的栅格化系统,以及配色风格的尝试。随着 B 端 C 化的趋势,在 UI设计层面的风格探索中,将会变得更为大胆,突破风格定义的束缚。

图片
图片
图片
图片
图片
图片 

以上是近期输出的一些 UI设计探索作品,后期将会继续探索更多设计风格和细节的刻画。

 

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

作者:黑马青年

转载请注明:学UI网》近期输出的一些UI设计探索作品

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

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

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

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

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


如何更好的设计图标?优先注意这些容易被忽略的细节

seo达人


图片

 

  风格

常见的图标风格有线性、面性、彩色、写实、3D等,图标的选用因页面的设计风格、图标的位置等原因会有所差异,主要的作用是反馈动作和吸引用户更多注意力。

线形/面性:最基本也是做常用的风格,广泛用在页面设计中。

彩色:通常用于反馈用户的操作或者增加用户的注意力。

3D/写实:当页面中的某哥内容需要引起用户高度注意时使用,一下抓住用户的视线。

图片

Tips: 现在字节、百度新推出的一些年轻化产品中,有很多精致的3D写实图标,极具个性,很好地迎合了年轻用户的喜好。在扁平风格流行的当下,这样的尝试也是一种突破。

 

重量

简单的线性图标重量轻,看起来更简约,不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容,那么更适合选用简约的、重量轻的线性/面形图标,防止页面过于杂乱。

相反,如果当前的页面中只有文字,信息量很少,那么更适合利用重量大的彩色甚至3D图标来增加页面的丰富性,让页面看起来更有设计感,给用户带来视觉上的愉悦,简约而不简单。

图片

 

属性

构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等,表达式规则是统一的,以便只给观看者识别图标所需的最小更改。

图片

描边粗细:手机上常用到的描边粗细有2px、3px、4px。2px的看起来会显得更加精致,4px的描边视觉较重,可以用在优先级较高的区域作为功能性图标,。

端点/节点:图标的端点有平头、圆头和方头,图标的节点有斜接连接、圆角连接、斜角连接,具体使用哪种样式要根据页面的情况统一设置。

圆角半径:方形的图标边角过于锋利,用户有时候看起来会不舒服,圆角图标更圆滑,相对来说更容易让用户接受。虽然圆角用的更普遍,但具体使用哪种,还是要考虑页面的整体风格再决定。

 

网格

图标的外形有圆形、方形、三角形甚至不规则形状的,所以我们很难将不同形状的图标尺寸完全统一。

这个时候网格就起到很关键的作用,有了网格相当于提前将图标限定范围,在网格范围内根据图标的重量和重心灵活调整大小,这样会让不同形状的图标看起来更统一。

图片

 

视觉校正

由于设计软件的局限性,虽然有些图形已经居中对齐,但有时候还需要进行视觉校正。

最典型的图标案例是“播放”图标,利用设计软件对齐中间的三角形后,会发现三角形的位置看起来偏左。

利用软件对齐后,我们还需要再用眼睛确认一遍,我们可以将三角形向右移动,保证三角形的重心与圆形的重心一致,这样整个播放图标看起来会更舒服。

图片

  

角度

设计图标时,我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视,所以大多数的图标都没有透视,看起来会更简洁。

带透视的图标会给用户营造一种空间感,可能会感到认知失调。虽然这种带透视的图标能引发用户关注,但不建议这么设计。

图片

 

比例

图标比例通常使用8的倍数作为基准,例如8px、16px、24px和32px,以便在各种环境中进行流畅地切换。除此之外,在移动端等屏幕尺寸较小的页面中,还会使用4px的倍数,来实现多功能性。

图片

 

清晰

图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小,要尽可能做到对用户友好,可以使用一些简单的隐喻设计,但含义不能过于复杂。

一个图形能说明的问题,没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义,这样反而会影响用户的操作。

图片

 

细节

这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息,特别是对于尺寸很小的系统图标,最好只保留最基本的内容,移除多余的装饰元素。

图片

 

一致性

这里说得一致性,并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面,线性、面性等多种图标风格可以一起使用。

但在同一个页面场景中,执行相同功能的图标应该保持相同的样式。

图片

 

熟悉感

面对不同的操作系统,例如iOS和Android,同一功能对应的图标也会有差异。针对不同的系统,我们可以选用大多数用户熟悉的图标,这样用户能更快地理解图标的含义

图片

 

最后

以上就是常用却容易忽略的图标设计细节,希望通过这些内容能帮助你对图标设计有更深的认识。

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学YUI网》如何更好的设计图标?优先注意这些容易被忽略的细节

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

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

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

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

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


拿捏8种LOGO设计技法!

seo达人

图片

图片

我们先来分析一下这个 LOGO:

1. 基本形状为字母 D;

2. 一大一小、一长一短均匀的进行向外发散渐变。

如果我们把一大一小、一长一短分别单拿出来,都是比较方便做出来的,先做出两个不一样的线然后绕着 D 的外轮廓混合就好,但是同时满足这两个条件的话,就需要采取其他的办法,ok,下面我们来看一下演示步骤。

第一步,我们先把字母 D 的外轮廓画出来,直接用一个方形右边拉圆角即可!

图片

然后我们选择【对象】➡️【路径】➡️【偏移路径】,数值改为负数,向内缩小复制一个。

图片

将里面的 D 左边断开,并连接到外面的 D 里面。

图片

用上面同样的方法再次向内整一个小 D。画好后我们就可以直接删掉它了…不是,删一半就行,因为图形是上下对称的,我们先画一半直接镜像!可以事半功倍,能偷懒就偷懒。

图片

画完这三条线有啥用呢?不急,我们先从最外面的入手,先在左右两个端点出分别画一大一小的圆。

图片

然后对这两个圆进行混合,用【混合工具】分别点击两个圆,指定步数改为 9,然后再【替换混合轴】,就可以让圆沿着我们画好的路径进行大小重复排列。

图片

然后我们在最小的线的两头端点处分别画一个很小很小的圆,再次执行前面同样的操作,混合 9 步,替换混合轴。

图片

然后我们分别让上面的大圆对下面的小圆进行混合,步数给的大一些,这样就会出现发散效果的图形啦。(别忘了先扩展和取消编组)

图片

那一大一小的发散该怎么实现呢?这就用到了我们第二根线了,我们分别把单数混合上面的圆向下移动到第二根线上,然后调整一下间距,就搞定了!

图片

画好一半了,直接镜像复制一下,整体就出来了,然后我们给每一根线添加上渐变色。

图片

最后加上排版就搞定了,这个 logo 的难点在于他是一大一小的进行发散,所以直接用单个线来混合达不到这个效果,所以我们就采取单一作战模式,用同样的方法,选择不同的混合对象,会实现不同的效果。

图片

 

图片

图片

红点奖作为世界三大设计奖之一,一直以来都是设计师们梦寐以求想要获得的奖项,它的 logo 大家应该都很熟悉,但这种球形环绕式 LOGO 很多同学都不知道应该怎么实现,ok,下面我们就来设计一个红点奖颁给日夜操劳却依旧菜 b 的自己…

首先第一步我们先画两条相等长方形,其中第一个填充为红色,第二个去掉填充色和描边。

图片

然后我们就向下复制多个,但也不用太多,给太多不好…

图片

之后调出符号窗口,将这个图形编组后整体移动到符号窗口里面,也可以取一个好听的名字,虽然没什么用。

图片

放完后先不管它,我们额外画一个圆形,注意用描边模式,之后砍掉它的一半。

图片

选择【效果】➡️【3D】➡️【绕转】

图片

先选择【贴图】,将符号部分改成我们刚才设置的图形,然后点击【缩放适用】及【三维模型不可见】,可以适当拉高拉宽,之后确定回到绕转页面,拖动左边的方块更改它的绕转方向,然后选择下方【表面】改为无底纹。

图片

得到新的图形之后,是漫长的取消编组和扩展,多操作几次,你就可以得到下面两个部分。

图片

将他们居中对齐,然后给下面的图形增加一个渐变,这样效果就出来了!

图片

最后就是更改一下细节了,将上面和下面的部分可以单独切一下,做出一个角度。ok,基本的方法就是这样啦,虽然最终效果和红点的原 logo 不太一样,有点像破产版,但没办法,想得到真正的红点奖,还得靠你自己的努力!!!

图片

 

图片

我们在遇到相对比较复杂的图形的时候,一般就会用到形状生成器工具,它可以通过合并或删减简单形状创建出复杂的形状,掌握了这个工具,可以说你的 logo 就多了无数种可能性。下面我们通过一个看起来比较复杂案例来演示一下如何使用它!

图片

越是看似复杂的东西,往往越具备一定的规律性,我们看一下这个图形,可以发现它是由一个部件通过旋转复制得到的,如下图:

图片

所以我们只需要把这红色部分先绘制出来,就很容易画出来了!我们看一下操作步骤。

第一步先画出他的网格,先画出横线部分,再倾斜 60 得到右斜线,然后将有斜线镜像复制出左,最后三组居中对齐。

图片

接着我们画出它的圆形框架,注意与线段的对齐关系。

图片

ok,这样就把所有的网格线全部绘制好啦!这个时候就可以回到开始的时候讲的,我们只绘制那六分之一的图形即可。选择【形状生成器工具】按住 alt,将多余的线删除(记得提前复制一份圆备用)。

图片

得到这个图形后,我们将它描边加粗一些,然后扩展,之后绕大圆圆心旋转 60 度复制一圈(为了方便切割,我们把线往外延伸一些)。

图片

这时候我们再次请出形状生成器工具,一是将大圆外圈的部分删掉,二是将内部闭合的地方填充上。

图片

最后我们再在中间连接一个矩形色块,就做好啦!为了充分体现形状生成工具的强大功能,特意选了这么个复杂的 logo,真是累瞎了我的狗眼… 总之总之,形状生成器工具的作用有很多,可以提取闭合图形,可以删除多余图形,线或者面都可以进行操作!

图片

 

图片

图片

我们无论是在做 logo 还是做辅助图形的时候,这种异形扭曲空间图形真的很常见,它们看似复杂,其实用一个工具就可以搞定,就是封套扭曲工具。

他一共有三种表现形式,第一个是用变形建立,也就是我们在效果中看到的旗形、波形、鱼形等,常用于文字;

第二种是用顶层对象建立,比如先画一个苹果,然后打上文字介绍,用这个建立就可以让文字扭曲成苹果的形状;

而第三种,用网格建立,是可控性非常强的扭曲变形,我们通过建立网格体系产生大量的锚点,拖动任意一个都可以产生不同的变化,下面我们就用这个方法来做一下这个 logo。

第一步,我们先画一个长方形,向下均匀复制多个,形成多个等距的长条。(也可以用混合工具)。

图片

第二步,给图形添加渐变色。

图片

第三步,我们选择图形,执行【对象】➡【封套扭曲】➡【用网格建立】,行数和列数均设为 1。

图片

然后就是关键的一步了,我们用直接选择工具(A)拖动调整网格的锚点和手柄,得到一个扭曲的图形(如下图 1234 各点的位置变换)。

图片

调整完之后将图形扩展,用形状生成器工具将中间重合多余的地方删掉(按住 alt 删除)。

图片

ok,最后加上排版,一个通过扭曲得到的抽象鸟 logo 就做好了,这个方法基本的套路就是这样了,主要在于锚点摇杆的调节和把控,另外,在设置网格半径时,数值越大,可操作的空间及难度也就越大,大家可以多去试试看。

图片

 

图片

图片

参加过波波品牌课的同学们应该都知道,这类 logo 就是贵为九大构成之一的重复构成!因为特有的重复性和规则性,使它呈现出来的效果会很高级很实用。但是我看很多同学在做的时候都是单个的缩小放大摆放…这样往往是很不标准的,下面给大家安利一个简便高效的方法!

首先第一步我们还是先把基础图形画出来,用钢笔工具勾一个造型即可,注意线条要丝滑一些!

图片

然后就是重点部分了,我们选择【效果】➡️【扭曲和变换】➡️【变换】依次调整一下的参数(参数不是固定的,要打开预览根据自己的实际情况来设置)

缩放:控制变换的大小对比

移动:控制变换的路径方向

旋转:控制变换的路径角度

副本:变化添加的图形数量

图片

ok,调整完后就可以得到下面这个造型了!

图片

然后我们给它添加颜色啦,这里再来一个快速设置渐变色块的方式,先做好最深色和最浅色,然后用混合工具很容易就做出来了。

图片

做好颜色后我们就一个一个的给它上色就可以了。

图片

最后加上底色和排版就搞定啦!

图片

变换这个方法真的非常好用,非常适合重复构成的 logo,这里给大家留个小作业,可以用这个方法试着自己做一下华为的 logo。

图片

 

图片

立体 logo 往往拥有比纯扁平 logo 更加良好的视觉展示,在色彩上也更多运用渐变色进行搭配,使其更具吸引力。

但是实现起来往往比扁平 logo 要困难的多。下面我们通过这个案例来演示一下绘制立体 logo 常用方法。

图片

先简单分析一下:

由三个立方体堆积搭配渐变色形成视觉错位感,ok,我们第一个思路就是先从单个立方体入手,下面我们就来绘制一下立方体。

首先我们画一个正方形,大小给到 80px(也可以是其他数值,但要记住这个数值)。

图片

点击【效果】➡️【3D】➡️【凸出与斜角】,执行三步操作:

1. 将位置改为等角上方;

2. 凸出厚度改为 80 的两倍也就是 160;

3. 表面材质选择无底纹。之后点击确定。

图片

这样一个基础立方体就出现啦,为了方便后面的操作,我们可以换成描边模式。然后通过这个立方体进行旋转,分别旋转 -30、-150,90 度得到三个不同倾斜角度的立方体。

图片

将他们组合在一起,然后用形状生成工具绘制出错位感。

图片

再依次给每个面添加上渐变色,就完成啦!

图片

那除了这个方法还可以怎么做呢?假设我们已经画好了草图,在草图的基础上绘制 3Dlogo 的时候,可以使用网格大法!

图片

可以看到这个图形的斜边是直线倾斜 30 度来完成的,那我们就可以用这个角度先把网格绘制出来。

图片

然后通过网格可以直接用【形状生成工具】或【实时上色工具】将视觉错位之后的图形绘制出来,省去了 3D 的步骤。

图片

之后就和第一种方法一样添加渐变就完成了,这个方法比较适用于在已经有草图或想法的基础上来绘制,会更精确更快捷,如果是想单纯的绘制立体图形,那还是更多的用第一种 3D 凸出与斜角的方式。

图片

 

图片

图片

这是全球市场调研咨询公司 PRS IN VIVO 推出全新品牌 LOGO,相信大家看到它应该不会陌生,没错,它就是运用了彩色半调效果来进行视觉设计。它会帮你生成一个波点圆形点阵,呈现出一种像素化感觉,同时也是波普艺术中重要的变现形式,下面我们就看一下如何做出彩色半调效果的 logo。

我们在进行设计前,先新建一个 cmyk 模式的画板,分辨率也给的大一点。

图片

我们画一个正圆,给它添加一个黑白渐变。

图片

将渐变模式改为径向渐变,再点击反向渐变,再将黑色部分改的稍微灰一点,得到一个新的渐变圆形。

图片

然后我们就用这个图形进行彩色半调。【效果】➡【像素化】➡【彩色半调】

图片

那么如何控制点阵中原点的排列疏密和数量呢?

我们在进行彩色半调的时候,会添加一个半径参数,这里数值就决定了点阵的数量(也可以随便输入一个数值,然后放大缩小圆形进行控制)而疏密程度,则是由一开始我们给予黑色的黑度所控制的,越黑越密,越浅越疏。

图片

OK,调整完参数后,我们将它变成矢量图形。具体操作为:

1.【对象】➡【栅格化】

2.【图像描摹】➡【黑白徽标】➡【扩展】

图片

这样一个矢量的彩色半调圆形点阵就做好了,之后添加一个粗一点描边的圆框,将圆框与之前的圆重复部分用形状生成工具提取出来,删除多余的波点,再添加渐变和文字排版,就得到了这个 logo 图形。

图片

彩色半调不仅仅局限于圆形哦,其他任何形状都可以用这个方法进行点状像素化,还不快去试试?

 

图片

图片

上面这些图,虽然可能没有见过,但大家一定都不会太陌生,是的,上面的图形都是用黄金比例圆来完成的,只要是做过 logo 有一定时长的同学就一定会接触。我也曾经遇到过好多次客户直接在设计需求中点出了要用黄金分割比例做设计图形…至于它为什么好看,那不是我们今天所研究的,今天只负责教会你该怎么用!

工欲善其事,必先利其器。想要用黄金比例来绘制图形,那首先你得把黄金分割比例的圆先做出来,这里介绍两种比较方便快速的绘制方法:

第一种是黄金比例分割,也就是通过绘制 0.618 倍数的多个图形,如下图。

图片

但是我们在实操中没有必要用这么规整的来方形堆积来绘制,只需用一个工具就可轻松搞定!

双击【比例缩放工具】,等比数值改为 61.8%,点击复制。

图片

这样就得到了 1:0.618 的两个圆啦,我们只需按住 CTRL+D,重复复制多个,一个黄金比例圆就画好了!

图片

第二种方法是利用斐波那契数列绘制。斐波那契数列指的是:1,1,2,3,5,8,13,21,34,55,89…这样从第三项开始,每一项都等于前两项只和。换算成设计语言的话就是这么个图形:

图片

我们用这个结构,把每一个正方形都换成圆形,组合起来就是一个黄金分割比例的圆形环。

图片

以上两种方法哪一种都可以!灵活运用!下面我们就用画好的黄金比例圆来绘制 logo。

首先,你得先画一个草图…纸上或者 PS 都可以,将它垫底。

图片

然后我们把黄金比例圆放进来,注意不要随意放大缩小,先整体编组,将最大的圆环对准图形最大的弧线部分,之后就可以将剩下的圆进行一一对应摆放了。(可无限重复使用,一些小细节可以适当拉大拉小一点点)

图片

摆完之后我们用【形状生成工具】或【实时上色工具】,将切割得到的大象绘制出来!

图片

黄金比例固然好,但是我们在设计的过程中不能过度的去依赖它,毕竟无论你用不用它,只要 logo 是好看的,那就有价值!PS:不过它确确实实能够为你的提案加分…很多客户都吃这一套,嘘…

图片

好勒,八个案例全部完事了,不知道大家吸收的怎么样,其实虽然分了八个方向,但有很多技法都是互相通用的,而且AI中隐藏的小技法远远不止这些,相信跟着一起实操过来的你,一定可以丰富自己的武器库,给自己的LOGO作品集,增添一大波可能性!

好了,时候不早了,做 AI(Adobe illustrator)也做的有些累了,大家晚安!记得实操!

 


作者: 告白天

转载请注明:学UI网》拿捏8种LOGO设计技法!

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

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

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

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

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


超级可爱!插画萌新必学的PS极简马克笔简笔画:盆栽篇

seo达人


image

 

准备好了吗?

工具:Photoshop、手绘板

笔刷:art-markers:Round kyle 70(文末附笔刷下载链接)

适合:板绘零基础入门

 

马克笔笔刷的亮点:叠色

打开PS,新建一个2000px*2000px的文档,颜色模式为RGB。

我们不要急着开始画,先试试用马克笔笔刷Round kyle 70画出蓝色的水平线和波浪线,熟悉一下笔刷画出的效果,和笔刷培养一下感情。

image

这个过程中,你会发现,这个笔刷如果只是从头到尾画一条线,看起来很平淡,但如果在蓝色线条之上多画上另一条红色线,两条线的交叉位置就出现一个颜色更深的“点”,我们把它叫做叠色区,它能让整个造型变得不俗气,高级起来了~

image

盆,盆栽的盆

这时,我们正式开始画小盆栽啦,用笔刷画出一条蓝绿色水平线。然后再画出整个容器的“身体”。

step 01

这里要营造一个小心机,不要让水平线和容器身体连接起来,这样就能制造一个断线,断线表示我们下笔也是要休息的,这是一种线条的呼吸,极简的感觉就是这样来的。

image

step 02

用亮蓝色画出盆上的花纹,这里我用了波浪线,还可以把它画出框。

image

画的是植物没错

高级的感觉靠的就是“有技巧的画不像”来制造的,比如植物大都是绿色,但我们这里用了红色。这种故意用错颜色的方法,就会让画面看起来很时尚

step 03

试一下,用红色线条画出植物。植物叶片很简单,由一条线加一个圆圈组成。

image

这里注意一下,相同的颜色也可以制造叠色效果哦。

image

第二幅,来多一点装饰

有点感觉了吗?再来试试另一个盆栽吧~

step 04

这个花盆的造型是个六边形,用亮蓝色先画花盆的上下两条等长的水平线,然后用红色画出花盆的左边和右边的折线,框出一个花盆轮廓。

image

step 05

再用黑色画出花盆内部的线条,花盆中间就不会显得空空荡荡。

image

step 06

在花盆上面的左右两边分别画上两片叶子,像两个猫耳朵。然后再画出中间的叶片,叶片和叶片之间可以叠色表现,看起来就像一顶皇冠。最后再在上方继续画叶子,类似菠萝头的造型。

image

step 07

最后,我们再用红色在每片叶子尖上画一个小线条,就像给叶子涂指甲油。这是一个点睛之笔,多肉的颜值就又提升了。

image

最后把画好的两幅小盆栽放在一起,看看效果~每幅小画我们都可以配点文字,有点仪式感,这样画起来也很有趣。

image

拿去练吧~从简单开始

最后,这里的有我画好的一页简笔画练习,不焦,不躁,一天进步一点点吧~

image

长图版更适合临摹:

image

笔刷下载地址

百度网盘下载

链接:https://pan.baidu.com/s/1OdfNVJID_Cq3UbgawGQxbw

提取码:aqdb

 

原文地址:飞屋设计

作者:飞屋睿UIdesign

转载请注明:学UI网》超级可爱!插画萌新必学的PS极简马克笔简笔画:盆栽篇

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

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

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

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

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


这些设计小妙招,助力B端产品体验提升

seo达人

一、预判设计

在团队活动时,从搭档的一个眼神我们就能预判他接下来的动作,相互的默契配合能让我们顺利地完成任务,在产品设计中的预判设计也可以得到事半功倍的效果。

我们可以从历史记录、效果预知、智能辅助和行为惯性4个方面进行设计,辅助用户决策,提升操作效率。

1.历史记录

a.用户操作行为记录

广告优化师通常会管理几十至上百个账号,需要在多个账号之间频繁切换去盯盘和新建广告,频繁的操作难免会造成信息遗忘和决策卡顿,从而会影响操作效率。在管理后台的设计中可以通过记录用户最近操作行为,恰合时宜地为用户提供帮助。

案例:在新建计划环节,标识出本账号上次的选择记录(最近一次的投放目标),辅助优化师快速做决策。

图片

b.基于操作习惯的系统预测

平台系统可基于个体操作习惯和大数据分析来预测用户需求,提供高概率的操作建议,给予用户贴心指导。

案例:针对广告平台表格信息密集,不易快速获取关键指标的问题,Google提供了用户自定义栏,而Facebook的表格栏会根据用户列操作习惯和自定义栏行为进行大数据分析,预置一些高频意图的组合栏,一键切换即可查看关键指标,操作更便捷。

图片


2.效果预知

a.效果预览

表单页对填写的物料内容进行映射,展示真实效果预览,降低用户心理的不确定性。

案例:在进行广告创意创建的过程中,优化师填写完标题和上传完物料后很难知道广告投放到手机端用户看的真实效果。而所见即所得的可视化编辑方法支持创意样式实时预览,可以辅助优化师更好地进行创意优化。

图片

b.效益预估

针对一些需要效力评估的页面,平台通过预置好的算法对用户内容的表达及时给出估算值,给出建议,从而提高内容填写质量,降低填写的盲目性。

案例:Google广告平台在新建创意环节,对广告素材资源的组合方式和数量进行估算,呈现当前广告与高质量广告设置的差距,辅助用户进行高质量的广告制作。

图片


3.智能辅助

用户在进行输入等操作时可以提供智能辅助,例如表单填写时对需要录入信息的区域提供辅助提示,通过自动补全或联想词来帮助用户快速录入信息,在保持用户的操作自由度的情况下提效。

图片


4.行为惯性

在一些场景里,用户的行为具有很强的关联惯性,例如上班时间进到办公区域打开办公APP首要目的一般是打卡签到。通过梳理主线任务或整理用户体验地图可以挖掘出很多基于行为预判的设计机会点。

案例:预判用户在工作台内截屏后大概率是去反馈遇到的问题,适时将反馈入口透出,可以提高反馈的效率和用户体验。

图片

 

二、表达清晰

现实生活中,在与他人交往时,清晰的表达尤为重要。同样是演讲,有的演讲者“词不达意”没有重点,或者内容晦涩难懂让听众感觉索然无味;而好的演讲者则会用场景化的方式将逻辑复杂的事情讲给听众,让听众有身临其境的画面感。

好的设计也应该是清晰好用的,能让用户沉浸其中轻松高效地完成自己的任务。

如何让用户通俗易懂地了解产品功能,并能快速上手?我们可以从功能易理解、内容强吸引和选择无负担三个方面来降低用户的操作门槛。


1.功能易理解

a.术语转换

将一些晦涩难懂的词汇转化表达方式,转化为更贴近用户视角的文案描述,传递细节感受;

图片

b.信息有效展示

透过需求背后的真实意图分析和高效率的信息展示可以让用户更方便地获取更多信息,提升产品的服务效益。

案例:服务器预警平台从传统的表格形式优化成拓扑图。将所有的云服务器都抽象成一个个矩形,矩形的颜色代表服务器监控指标的状况。当方块颜色显示为黄色,则表示该云服务器内有监控指标出现了异常,这个时候目标用户就需要重点关注。

图片


2.内容强吸引

对于老用户来说,从之前习惯的平台迁移到新的平台一般会有很大的抵触心理。迁移前用户考虑的关键点包括:不迁移是否有影响?新平台有什么优势吗?迁移起来麻烦吗?

以百度营销客户中心迁移引导页方案为例,初期方案首屏只告诉用户平台升级了,但是不能快速了解到升级后的核心优势有哪些,同时迁移按钮设计得很弱,传达的信息是迁移可能会很麻烦,很容易让用户止步于此。

所以在进入迁移导流页面时,首屏首先要讲清楚新版平台的能力和迁移方式。对于当下想迁移的用户,明确迁移方式和入口;对于徘徊不定的用户,告知迁移后的好处并做好最后下线时间的提示。这些信息不仅能够消除用户迁移前关于成本的顾虑,也能吸引用户立即开始迁移行动。

图片


3.选择无负担

B端产品操作链路通常比较长,用户很容易迷失其中。对于逻辑复杂的功能在做页面设计时需要突出主次和流程引导,尽可能提供一个主要触发的主按钮,让客户不用过多思考就知道模块和操作的隶属关系,降低认知的负担。

图片

 

三、操作可控

我们在执行任务时总是希望有过往经验可借鉴,如果事情按照自己的预期发展了会觉得很踏实有可控感。同理,用户在操作一个系统界面时也会有类似的心理变化,对于自己熟悉的功能希望主动权在自己手里,能复用之前的经验无需额外的学习成本;对自己不熟悉的功能希望有及时的引导,能很快地上手并能掌握主动权。

不可控的操作体验会让用户在使用过程中产生很强的挫败感,一旦有了这样的心理感受就很难被扭转。那如何保障体验的基线确保用户正向的感受呢?下面就结合操作一致性和明确指引性两方面进行说明。


1.操作一致性

针对同类型的功能,在交互设计上要尽可能地保持逻辑对齐,保证平台的一致性同时降低用户的学习成本。一致性设计对产研提效也有很大的益处。

案例:下例中的批量操作项的逻辑,都是通过选中复选框之后在模块上方展示批量操作栏且支持一键关闭。这样该平台的用户无论在任何场景下只要注意到复选框就对批量操作功能有了预期,没有额外的学习成本。

图片


2.明确指引性

对于复杂的使⽤流程,最好能够在客户使⽤的过程中建立统一的指引,引导客户⼀步步完成操作,从而提高任务的完成率,促成业务目标达成。

案例:当一个平台需要用户完成的任务繁多且流程性强时,需要把所有的核心任务按照层级进行呈现,并作为一个固定模块展示在醒目位置。这样用户既可全局视角理解业务又能作为功能入口快速触达。

图片

 

写在最后

B端业务中,交互设计的核心在于为特定场景设计择优的行为路径;通过分析用户当前所处的阶段和场景来判断此刻遇到的关键问题。针对不同的问题去选择对应的解决策略,例如对于新手来说降门槛会是首要任务,对于熟手来说操作的效率会显得更为重要。结合预判设计、表达清晰、操作可控三个维度的案例可以让我们在对业务理解有限的情况下,产品设计能有更多思考角度,也能有更明确的设计主张。

 

原文地址:百度MEUX(公众号)

作者:商业用户体验部

转载请注明:学UI网》这些设计小妙招,助力B端产品体验提升

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

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

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

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

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


日历

链接

个人资料

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

存档