首页

十条UI设计视觉表现技巧

seo达人

01.  磨砂玻璃式的金刚区图标设计 

轻质感在 UI 设计场景中的运用近些年比较明显,以磨砂效果为代表的无论是在图标设计还是界面表现上面都较为常见,特别是在金刚区的图标设计上面。

喜马拉雅 App 首页金刚区图标结合磨砂效果呈现,材质感和舒适度都较为突出。实现难度也比较小,通过 Sketch 软件的背景模糊很容易实现。突出业务以微动效的形式表达,这也是较为常见的差异化设计解决方案之一。 

图片

 

02.  多种模式满足用户不同喜好 

不同用户的操作习惯和感官标准各不相同,越来越多的产品为了满足用户的不同喜好,设计多种模式进行设置切换。最早的就是主题皮肤,逐步延展到更多的功能模块中,比如音乐播放页的布局设置。

MOO 音乐为用户提供了以专辑封面和背景大图来进行播放页的模式设置,用户可以根据自己的喜好进行设置。在进行 UI 设计的时候无法判断用户的唯一喜好,多种模式的自定义设置更能带给用户良好的体验。

图片

 

03.  独一无二的个性化首页定制 

随着用户喜好的变化,自定义模式可以满足各自不同的需求,网易云音乐推出了独一无二的个性化首页定制设计。用户可以通过预设的默认模式、歌单模式、视频模式进行选择,为了方便用户判断定制后的效果,可以通过“功能说明”观看预设后的样式,直观的展示提高用户的判断体验。

自定义模式打破了千篇一律的设计,根据用户的喜好呈现内容,提高了用户粘性和使用体验。

图片

 

04.  App Banner 呈现的裸眼 3D 效果 

移动端的设计已经越来越成熟,设计师都在寻找新的发力点,不断向细分的功能探索更好的设计体验,而 Banner 设计也是研究的方向之一。

突然有一天在使用自如 App 的时候发现了这个隐藏的“彩蛋”,模拟裸眼 3D 效果的呈现方式在 Banner 上面,是一次全新的尝试。通过借助移动设备上的传感器等将 2D 影像转化为景深效果,以呈现出不用 3D 眼镜就可看到的 3D 效果。

自如

 

05.  简单的动效不一样的场景代入感 

微动效在产品设计中的运用已经非常普及,特别是在图标中的运用,既能提高图标的关注度,也能体现图标的差异化。就像一个扫一扫的功能图标,加上简单的动效呈现,提高了场景代入感。

将现实中的扫描动作运用到图标动效的表达上面,既增加了该功能的关注度,也能让主题表达更清晰。

图片

平安口袋银行

 

06.  视频引导关注度更强 

引导页是 UI 设计中较为普遍的存在,而动效的引导和视频形式的引导相较于静态图文形式来说,更能吸引用户的关注度。特别是随着 C4D 等三维软件的普及,结合立体感和动效形式形成视频引导,也是一种全新的体验。

 

07.  底部手势区的充分运用 

对于移动端来说,随着大屏手机的普及,手势操作舒适区的研究至关重要。底部操作范围算是手势的最佳区域之一,充分的利用好有利的位置进行更多功能的设计,提高功能的曝光度。

将一些重点功能通过悬浮层的形式设计在底部,随着交互的变化进行隐藏和显示,也是一种非常不错的设计解决方案。比如平安口袋银行将我的余额、积分兑换、签到、抽奖、领取红包等设计在底部标签栏之上,通过悬浮层的形式呈现,让这些原本隐藏的功能得到了曝光,增加了用户的关注度。

图片

平安口袋银行

 

08.  首页导航位置的合理运用 

顶部导航栏通常是提示当前页面的位置,对于首页来说一般会设计搜索、品牌曝光、功能操作、当前位置提示等内容。也有一些直接展示 Banner 图,隐藏导航的存在。

一些产品想要弱化活动 Banner 的空间占比,除了缩小 Banner 高度尺寸以外,最近也发现了一种新的设计解决方案。安居客将活动主题设计到导航位置,单击和下拉刷新到一定程度都会唤起活动详情。该设计解决方案不仅充分利用了导航位置,在达到曝光度的同时也不会过度占用首页版面,合理的运用了有限的资源。

图片

安居客

 

09.  背景的变化让等级区分更直观 

很多产品都会涉及到会员中心和会员等级区分,不同的等级如何在设计上面体现出差异,除了图标的区分以外,背景的差异也是一个设计方向。

自如通过不同渐变色的过度来体现会员等级的差异,在滑动预览的时候 UI 界面也会随着色彩的过度发生变化,视觉效果非常突出。色彩的变化过度自然,动效的转场伴随着内容的更换,直观的体现了会员等级的权益区分。

自如

 

10.  个人中心设计的场景变化 

个人中心的设计对于很多产品来说都比较常规,随着感官体验的升级,个人中心设计的差异也有待深入思考。而场景化的情感表达是提高个人中心设计差异的方向之一,结合插画和微动效的表达较为普遍。

自如的个人中心除了以场景插画的形式来提升情感化体验以外,昼夜变化采用了不同的插画场景来表现,代入感非常到位。场景插画还融合了微动效,微妙的变化提高了产品的精细化设计,增强了产品的体验感。

图片

自如

 

小结 

从感官体验的角度体验产品,总结了在 UI 设计视觉层面的解决方案,有助于提高 UI 设计师的视觉表现能力。对比相同功能的不同视觉表达,总结优秀的设计呈现方案,希望这个栏目可以带给你更多帮助!

 

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

作者:黑马青年

转载请注明:学UI网》十条UI设计视觉表现技巧

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

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

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

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



10条UI设计视觉表现技巧-第2期

seo达人



01.  内容与手势的联动设计 

交互手势在移动端设计场景中至关重要,手势的变化和内容的联动关系,决定了是否可以获得更高的用户体验。 比如抖音的短视频播放设计中,进度条拖动过程中除了时间数字变化以外,数字的位置会随着手势的方向位移。联动效果的设计感官体验明显,内容传播的关注度更强。

图片

抖音

 

02.  内容切换的场景模拟化设计 

以真实场景模拟设计表现,在 UI 设计中比较常用,带给用户更强的场景代入感。 比如千聊 App 首页的免费听直播栏目,直播预告的时间切换就像频道调频一样,切换到自己感兴趣的内容。自然流畅的动效滑动,两条点缀的红色线条,把频道切换的场景代入感体现给用户,带来新颖的感官体验。

图片

千聊

 

03.  通过文字角标设计表达切换差异 

顶部内容的分类切换较为常见,特别是电商产品中。一般体现点击和默认通常有字体大小区分、颜色深浅区分、下划线区分、图形装饰区分等。 除此以外也有下划线的变异用法,通过角标线段来体现差异。通常是右下角位置,伴随着动效表达。比如京东 App 首页,联想到京东吉祥物,也有一种品牌呼应的感觉。

图片

京东

 

04.  更贴近真实场景的设计引导 

通过设计还原真实场景,带给用户更强的代入感,从陌生转换到熟悉的场景触感。 高德地图通过模拟真实的道路状况,呈现出更加真实的行车引导,就像自己驾驶的车辆行走在手机屏幕上一样。真实感的路况引导增加了驾驶的代入感,降低了复杂路口选错方向的可能性,从视觉感上面也提高了感官体验。

图片

 

05.  人性化的城市点亮设计 

好的产品体验,就是在无意间带给用户惊喜。在小长假期间,自驾游沿途经过不一样的城市地点时,会弹出“欢迎到来”的点亮提示,第一次看到还有种惊喜感,算是一种旅行足迹的记录。 在这个弹窗广告满天飞的互联网环境中,能把这种惊喜带给用户才能抓住用户的黏性,通过情感化的设计提升用户对于产品的认可度。

图片

 

06.  被人忽略的上滑交互探索 

大家经常使用下拉刷新这个功能,而且在该功能上的设计探索已经呈现出非常多的案例,而下滑到底部之后的设计探索却被设计师所忽略。 在支付宝的首页中,下滑到底部之后进行了新的设计探索。继续上滑将会解锁一项新玩法,以游戏化的设计带给用户新的探索体验,也许这一尝试将会带来页面底部新的挖掘点。这个新的挖掘点会像下拉刷新一样,在底层功能需求的基础上被深度开发,呈现出更多营销玩法。

图片

 

07.  列表式设计中的左右滑动交互 

在列表式设计中,比较隐藏式的交互就是左滑和右滑,通常左滑删除较为常见。而大部分的列表设计中都没有探索过右滑交互,除非是右滑返回或者退出等操作。 在小宇宙 App 的订阅栏目中,对于关注的内容列表左滑为删除(不喜欢),右滑则是添加到播放列表中。充分运用了左右滑动的手势交互,不仅操作便利也带给用户不一样的使用体验。

小宇宙

 

08.  通过展示形式增加内容的品质感 

同样的东西放在不同的环境中,通过不一样的展示形式,带来的品质感也是相差甚远。就像放进橱窗的饰品或者展品,给人的品质感就会更高。 得物(毒)在购买栏目将精选推荐、福利专区、潮流榜单、补贴专区等内容,通过类似于玻璃罩的展示模型来呈现,不仅突出了视觉焦点,也带给用户一种品质感的认知。配合动效的运用,增强了该区域的关注度,是一种展示商品或者内容的不错方式。

图片

得物(毒)

 

09.  通过AR科技带你感受虚拟试穿 

网络购物存在的问题就是质量和匹配度等,得物(毒)通过AR科技带你感受虚拟试穿,模拟真实场景中的体验,打破了静态选择的弊端。技术的突破将会带给用户更便利的生活体验,打破常规的固有模式才能带给用户更好的使用体验。

图片

 

10.  更直观的设计带来更人性化的体验 

想要看一场电影,在选择影片的时候为了让用户更直观的了解影片内容,做出最快捷的选择。淘票票将精彩片段作为背景层,影片展示作为前景层,点击不同的影片背景层就会播放对应的精彩片段。直观的设计带给用户更便利的选择,减少了抵达目标的操作步骤。 从视觉形式感的角度使得画面更丰富,空间感更强。相较于单调的平铺式设计,带给用户更好的感官体验和操作便利。

淘票票

 

小结 

从感官体验的角度体验产品,总结了在 UI设计视觉层面的解决方案,有助于提高 UI 设计师的视觉表现能力。对比相同功能的不同视觉表达,总结优秀的设计呈现方案,希望这个栏目可以带给你更多帮助!

 

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

作者:黑马青年

转载请注明:学UI网》10条UI设计视觉表现技巧-第2期

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

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

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

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




排版良药 | 图文不会排?试试四角构图

seo达人


【视频完整版观看可抖音搜索: 野川设计】

回到设计没思路系列,  今天我们讲四角构图!

[调整输出图像大小]

 

1、构图:

首先构图本身是一切图文编排困难的良药,而四角构图是构图技巧中的其中一种。

[优化输出图像]

 

 

四角的构图版式最显著的特征就是将标题内容编排到四个角落

[优化输出图像]

 

 

诶!这不是四饼吗?

图片

 

而传统的四角构图原本是将文字信息有主次的编排到四周,而这种也是目前很常见的一种排版手法, 再将主视觉放置到版式中心,以此满足平衡稳固的构图作用。

图片

 

如果听不懂没关系  我们以天官赐福这四个字为示例,将文字拆分放到版式四角,并改变字体与大小,最后将主视觉图像放到版式中心,就可以得到一个最初的框架形态。

图片

 

2、排版

当理解了构图的原理,将文字通过信息分层梳理排版

图片

解读主标题的文字沿用到配色上,选出绿色和橙黄色,将绿色填充至底色,再将黄色填充至文字色,这样主题的文字在背景中就会比较醒目。

 

图片

 

再放置主视觉图像,这样前期的构图与排版的形态就塑造完成。

[优化输出图像]

 

 

3、融合

接下来就是要解决物体融合、塑造质感、视觉分层的后期阶段。

[优化输出图像]

 

 

我们来看看最终整个海报的设计全过程

[优化输出图像]

 

图片

 

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

作者:修先森

转载请注明:学UI网》排版良药 | 图文不会排?试试四角构图

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

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

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

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



这三步来做海报设计,思路才清晰!!!

seo达人


案例实操

说到设计海报,一般需要明确的就是主体,主标题和文本信息,需要根据重要性依次进行刻画,显然主体→主标题→信息处理按这三个步骤依次处理一个比较常用的思考步骤,如果没有处理好前面的,就开始盲目去优化后面的,可能就会使画面的视觉逻辑出问题。

我们开始实操,这里先将文案整理好,简单的做个层级划分。

图片

接着我们去构思整个版式的布局,将大概的信息位置放好,也就是明确它们的主次位置大小关系。

图片

前面说了是用文字“爆”作为主体,那么我们先来处理它,这里需要用到Ai里的效果→扭曲和变换→收缩和膨胀,选择收缩。

图片

很容易我们就可以做出下面这个效果,而且符合爆的感觉。

图片

然后我们加入英文BOOM,爆的后面放入用粗糙化做的效果,增加叠压关系。

图片

接下来就是刻画小信息啦,信息之间要有对比,加上相应的符号搭配,这里为什么信息下面要加上色块呢,一般这种除了统一之外,如果背景比较复杂的话,加入色块不会影响识别性。

图片

最后把剩余的信息放到画面中相应的位置,大小关系处理好。

图片

或许上面黑白识别性不太好,那么我们来配个颜色,加入样机效果,这个设计就完成啦。

图片

 

最后总结

本期教程到这里就结束了,做设计需要的三个大步骤记住了吗,赶紧试着去做一下吧,也希望文章给了你亿点点思路,大家一起努力进步!

 

原文地址:设猎派(公众号)

作者:设猎派

转载请注明:学UI网》这三步来做海报设计,思路才清晰!!!

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

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

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

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



「福特汽车环保奖」升级LOGO,贺冰凇作品!

seo达人



福特创始人亨利·福特本人也十分喜爱小动物,将公益融入企业发展,践行企业社会责任,这正是一个伟大品牌的开始。

CEGC在中国已经有20年的历史,1983年首次在英国成立,2000年进入中国,而福特汽车进驻中国是在1995年,因此CEGC几乎是和福特品牌一路同行至今,有着久远的历史足迹。

全新标识CEGC分别代表了四个形象象征:

C:陆地 — 雪豹 — 勇敢的精神
E:天空 — 斑头雁 — 自由而博大的胸怀
G:水 — 江豚 — 生命的起源
C:万物的尺度 — 人 — 深邃的爱

新的品牌形象,从定位、结构,以及LOGO的色彩进行了全新的设计,从不同空间构建品牌价值观念。

福特公益多年来为改善地球环境做出努力,保护生态平衡,CEGC的内涵则是代表了区域性的生态、生物多样化繁荣发展。

做任何一个公益项目,不是随着一次评选活动结束而结束,环保项目应当是可持续的走下去,走得更远。这次的品牌升级将助力福特汽车环保奖朝着更崭新的阶段迈进。

CEGC的设计理念,最终可以表达为,信息传达与艺术的完美统一。

让品牌有最清晰的识别力,代表生物多样性。

CEGC不仅是视觉上的感受,希望以此也能带来行动上的力量,让设计的意义变的最大化,最终为品牌带来最优的价值。

新的定位:

支持系统性变革、支持优秀民间环保力量可持续发展、保护生态资源与物种多样性,在新的升级中,重练品牌的核心价值。

为公益品牌服务,贺冰凇团队一直是践行于实际帮助的,通过设计和艺术给这个世界带来更好的一面,希望借此,吸纳更多的力量,为环境保护发挥更大的作用。

©注:设计中使用的人物图片皆来自CEGC官方公益项目资料,均有署名,仅供学术交流和作品呈现,不作任何商业用途。

原文地址:站酷

作者:贺冰凇

转载请注明:学UI网》「福特汽车环保奖」升级LOGO,贺冰凇作品!

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

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

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

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



干货|交互设计中的「有效反馈」7大准则!

seo达人


准则 1.  Timely —— 找准时机,即时反馈

在用户操作后尽快 / 立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯,或纠正用户的不当操作。

如果反馈内容需要较长时间的加载,也可以给用户设计一些有特点的 / 情感化的加载状态,缓解用户等待的不耐烦,又可以传达一定的品牌调性

例如:知乎 App 在加载内容的过程中,增加了 IP 形象的动态效果:

图片

 

准则 2.  Specific —— 具体分析,差异对待

在设计交互反馈时,不仅仅要给出正确或错误的判断结果,同时也应该考虑到用户的个性化需求,针对不同类型、场景、地区的用户提供差异性引导和服务。

例如:大众点评、高德地图可以根据用户的位置,在用户开始使用产品时就推送个性化信息:

图片

 

准则 3.  Balanced —— 正负反馈,穿插结合

通常来说,正面的反馈会激发用户的自信等积极情绪,因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候,我们可以在其中穿插一些正面的消息,减少或缓解用户的因负面反馈带来的消极情绪。

这就好像是别人跟你说:“ 坏消息是……,但是,这样做的好处是…… ”,坏消息不可避免,但加上一点转折,就会让他人心里稍微舒服一些。

例如:美团单车在你骑完车之后,需要支付费用时提示你可以购买单车套餐,虽然是在劝用户花钱,但看上去依旧很友善,其中的话术包括:“本次骑行免费”,“当前已是最优价格”:

图片

 

准则 4.  Instructive —— 提示下步,指引行动

有效的反馈会主动多引导一步,对用户的下一步行动给出清晰的、正确的、指导性的意见,有助于驱动用户继续做出有效操作。

很多 App 在截屏之后都会给出下一步分享的路径引导:

图片

 

准则 5.  Emotional —— 情感属性,引起共鸣

有科学依据证实,人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈,从而也更有可能改变其行为方式。

例如:虽然只是一个提醒弹窗,QQ 音乐会员到期的续费提醒文案却经过精心的设计,由各类歌名组成的一句话,每天的到期提醒都不同:

图片

 

准则 6.  Traceable —— 可被溯源,可供反馈

一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因,可以提供给用户进行申诉和询问的渠道,供用户进行反馈。

例如:电商平台和外卖平台都会在用户下单或退单之后,提供商品物流的详细信息,在查看购买的商品的当前状态时,并可以追溯到商品所在的各个历史环节:

图片

再比如,高德打车如果发现用户的行程订单金额与预估金额差距较大时,会给用户发短信提示,并给出客服和投诉渠道:

图片

 

准则 7.  Less is more —— 质量优先,减少数量

在这个信息过载而注意力稀缺的时代,好的反馈在于质量,不在于数量。有时数量越多,反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品,而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。

以上这 7 大准则,来源于我们日常工作中的积累和沉淀,对于设计产品的交互反馈具备较高的指导意义,希望对你有启发。

 

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

作者:元尧

转载请注明:学UI网》干货|交互设计中的「有效反馈」7大准则!

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

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

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

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



数据可视化设计常出现的错误,你一定要避免!

seo达人


1.三维图形使用不当

虽然三维图形带来的立体感很强,但用在可视化设计中,很容易出现问题。

一方面,三维图形具有X、Y和Z坐标,容易造成图表间的遮挡关系,遮挡会掩盖一部分的数据,让精准比较数据信息变得困难。

另外,透视使对象看起来像是位于三维空间中,但在数据可视化中,它会造成错误的层次结构:前景图形看起来很大,背景图形很小,数据关系被不必要地扭曲。

图片

 

设计要点:

三维图形很有吸引力但可能会遮挡重要的数据信息,并扭曲数据间的比例关系;

如果没有绝对需要尽可能使用二维图形样式。

 

2.数据太多

在设计中,很多人总想在一张图表中尽可能多地展现内容,把各种数据信息聚合在一起。

这样的想法本身没什么错误,但重要的前提是要有清晰的认知,明确知道到底要展示哪些数据。

如果可视化中包含太多数据,信息的展现会变得不堪重负甚至难以理解,这样的话包含的数据再多也没有任何意义。

图片

 

设计要点:

避免数据可视化的信息过载,如果一张图表中包含的信息过多,反而会让用户混乱;

灵活结合多种可视化方式,让数据的展现变得更有效。

 

3.省略基线

一组数据往往各不相同,数据差值的大小也不确定。为了使可视化效果看着更舒服,有的设计师通过改变坐标轴比例来展示数据关系。

最常见的例子就是让Y轴代表的数据不是从0开始,借此夸大数据之间的差异,让数据的变化更加明显。

图片

 

设计要点:

图表的美感再怎么重要,也要服务于精准的数据表现;

避免通过省略基线来故意夸大或缩小数据差异,造成用户误解。 

 

4.选择错误的可视化方法

每个数据可视化方法都有自己的特点。例如饼图适合用来比较一个整体中的不同部分,但不适合用来比较几组不同的数据。

通过饼图的比例划分,虽然可以直观地显示三家企业的收益,但使用条形图会让这三家企业之间的差异更加明显。

如果目的是为了显示一段时间内的收入,那么折线图会是比条形图更好的选择。

图片

 

设计要点:

数据可视化方法并非一刀切;明确可视化传达的变量及最终目的。

 

5.混淆关联

数据可视化更高的价值在于探索和发现不同数据间的相关性,通过比较几组不同的数据关系,找出其中的关联性,从而得到一个更有根据的验证结果。

显示相关性最常用的方法是将几组不同的数据叠加在同一个图表上,但当叠加的数据数量过多时,图表会变得难以识别。

另外一旦强行关联几种相似的数据,有可能造成结果的混乱。一个有意思的例子是冰激凌销量的增加与暴力犯罪的激增有关,因为这两者都是因为气候变化造成的结果。

图片

 

设计要点:

透过数据间的关联性发现事物本质是有意义的,但要考虑数据间的关联是否有依据、是否合理;

数据有相关性并不等于有因果关系。

 

6.放大有利数据

数据的增长或下降和时间是不可分割的。放大时间范围是很多公司经营中投机取巧的方法。

比如只在图表上向用户展示业绩增长的4-6月份(上图),这样看起来公司业绩增长幅度特别大,但如果将X轴的时间缩小到一整年(下图),才会发现公司真实的经营状况,4-6月份的业绩增长仅仅代表了公司业绩持续下跌中的小幅上涨。

图片

 

设计要点:

避免放大的可视化效果与数据整体不一致;

短时间内放大的数据表现可能会让用户对信息的判断产生错误。

 

7.避开常见的视觉联想

视觉元素影响用户的心理,图标、色彩和字体都具有影响观者感知的作用。

下图的可视化描述了美国各个地区宗教信徒占所有居民的百分比,但使用的颜色与地图的设计元素(蓝色的水、绿色的植被和棕色的土地)太过相似。

图片

▲ 分析数据可视化很耗费精力。在看到这样的图表时,我们第一时间联想到的应该是国家的地形情况,可能很难在这个熟悉的认知下去重新理解这个图表代表的其他含义。

 

设计要点:

避免强迫用户重新理解常见的视觉联想,造成对数据的注意力分散。

 

8.过分纠结于数据可视化

数据可视化将难以表现的数字关系赋予了易于理解的形式。最理想的方式是可以通过可视化清晰、简洁地传达数据关系

但是并不是所有的数据都需要使用可视化来表现,有时候一个简单的数据搭配一个流行的颜色就足以说明问题。

图片

 

设计要点:

数据可视化是一种交流工具。像其他所有工具一样,有时它是合适的,有时可能另一种工具更适合。

 

为回馈一直以来关注和支持Clip设计夹的读者,将免费赠送3本《写给UI设计师看的数据可视化设计》书籍给大家,帮助大家更好地学习数据可视化设计。

参与方式:详见原文。

 

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

作者:Clippp

转载请注明:学UI网》数据可视化设计常出现的错误,你一定要避免!

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

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

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

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



如何解决运营设计的核心部分?

seo达人



01.背景

运营设计主要包括日常运营(以介绍产品为主)和活动运营(通过促销或游戏的形式,拉新促活),其目的都是要吸引用户关注,实现流量的最大化,最终完成商业目标。

那设计出好看的画面吸引用户就是运营设计中的核心了吗?

答案肯定是不确切的。画面的呈现只是吸引关注的第一步,信息的传达才是保证用户驻足的关键。随着获取信息的便捷,人们对信息的关注越来越碎片化,甚至只关注标题,所以标题的呈现无疑是运营设计中的核心关键。

a

02.神器诞生

标题设计有很多具体的方法,但随着用户对信息清晰度的更高要求和审美疲懒,装饰过多或者变化过多的标题已不再流行,取而代之的是言简意赅、辨识度高的,更像是“没有设计”的标题设计。在日常的设计中,设计师通常采用合适的字体再通过变形等设计手段,使标题字更有品质感。如果可以直接使用一款字体,既能够清晰表意且兼具个性,又能够节省设计师创作的成本,这无疑是标题设计的首选方式。

字体作为信息传达的核心因素,能够起到统一品牌理念和精神的作用,正是58设计团队当前探索的领域之一。就此,58UXD设计团队的首选原创字体——微笑体诞生了!这款字体在表达企业精神的同时,兼具清晰且个性的特征,并为设计师减轻了工作中标题字体设计的负担!

图片

微笑体诞生

f

03.品质提升,效率UP

· 微笑体是为标题而生,它可以满足运营设计中的绝大部分场景,应用于不同的表现形式

1)轻量化设计页面中,增加简单效果,就具有一定的设计感

图片

招聘业务线活动banner

 

图片

58到家-saas系统系列海报

 

2)需要突出标题品质时,可增加层次感或立体质感

图片

58到家-“城市黑盒”活动画面

 

3)配合3D设计风格时,亦能发挥其厚重优美的字形

图片

2021春节运营活动-房产/招聘/二手车主会场画面

 

· 应用广泛,统一集团品牌感

发布近半年,微笑体已应用到58平台各类运营设计中,并在集团各渠道发挥作用,成为58对外展示的品牌特质之一

图片

58到家线下店内海报

 

图片

58同城招聘业务日常活动

 

图片

58同城平台日常活动

 

图片

58同城校园招聘

 

图片

员工福利-蜂蜜礼盒

 

自5月8日微笑日发布微笑体字库后,主创团队不断优化微笑体,更新完善了含有3627字的字体包。在UXD自主研发的两款运营页面设计平台——斑马智能物料设计审核平台和灵动编辑器中,微笑体已嵌入使用,为运营设计师提供更加便捷的工作方式,为运营工作提供高效且高质量的输出环境。

图片

灵动编辑器

w

04.持续赋能

微笑体在工作中运用的成功,一定程度上解决了运营设计的核心部分。当然一款字体是无法覆盖所有的应用场景的,运营设计需要丰富多样的视觉呈现,需要标题字和其他文字信息以及画面共同完成。

在设计微笑体之初,58UXD组建了专门字体工作小组——Fontwork造字计划。团队本着提升58企业品牌的初心,为设计工作提效的目的,启动了字体设计的第二波征程。为补充微笑体的使用空缺,同时为满足更多的使用场景,第二款字体的字形确定为有设计感的正文字体。

第二款正文字体已征集完毕,在四十多款参赛作品中确定了一款字形,该字体目前正在如火如荼的设计中,待与大家见面时再解开它神秘的面纱~

图片

字体大赛作品展示

e

05.结语

为了给用户持续不断的新鲜体验,为了适应不断变化的流行趋势,高品质的运营设计目前还是主要依靠人力完成。合适且优秀的字体解决了运营设计工作中的一部分问题,如何在保证设计质量的同时,提高效率,优化工作方法将会是我们不断探索的方向。


 

原文地址:58UXD (公众号)

作者:环铁艺术家

转载请注明:学UI网》如何解决运营设计的核心部分?

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

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

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

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


配色基础03-配色的实践

鹤鹤







兼顾“突出”与“融合”两方面


进行配色时,要从两方面考虑,既突出提升的方面又融合平稳方面。


例如,以自己最喜欢的颜色为中心完成了初稿,然后应该检查一下,是否过于沉重模糊,或者是否过于喧闹令人不安。如果过于沉静,则下点功夫突出一下即可;如果过于喧闹,则向着沉静、融合的方向调整即可。






1.1 突出型配色1


使主角更鲜明

画面整体显得模糊时,要放弃几个要点,明确主题。大力强调作为主角的部分,并删去暧昧模糊的地方。主题明确后,不仅气氛被提升,画面也会显得清爽踏实。


减少黑色的分量,提高纯度

感觉配色过于沉重压抑时,应该减少黑色,增加鲜艳的颜色,配色将瞬间明朗起来。色调沉重是由于混入过多黑色,减少黑色后自然会呈现出鲜艳的色彩。这是最有代表性的突出配色的方法,也是效果最显著的方法。




烘托画面的中心


明确画面主角

当画面的中心部分被提升后,才会使配色给人深刻印象。我们还可以强化明度对比,加强画面中心部分明度,这样的画面会格外令人印象深刻。

A海报带点梦幻的感觉,但是主角不够清晰。而B海报提升了背景亮度,扩大与中心人物的明度对比度,从而能强调了主角。



加强中心部分的方法


提高颜色纯度


强化明度对比


强化色相对比




给画面添加亮点


我们很多小伙伴喜欢沉稳踏实的配色,这种配色方法虽然是好的,但是画面的配色过于均一则平淡无奇。那怎么解决这个问题呢?其实我们可以在画面中心设置小面积的亮点,给画面增添品味和活力。


抑制背景色,凸显亮点

要记住,亮点的面积越小给人的印象就越深刻。如果你想更加凸显亮点,那就要抑制周边的背景色。只有这样,即使在平稳不显眼的配色中,这个亮点一样很显眼。

A图中整体色调沉稳,但是总觉得少了点什么。而B图中鲜艳的红色成为宁静配色的亮点,给原本平淡的画面注入了活力。



制造亮点的方法


弱化背景色,突出亮点


控制好背景色,即使纯度不高的亮点也有很好的效果




给画面加入鲜艳色彩


鲜艳的色彩尽显活力

如果你想增加配色的欢快感,就应该加入纯度高的颜色。

A产品整体是暗色调,高雅庄重,但是似乎有些欠缺。而B产品加上了小面积的鲜艳色彩,高雅不变,华丽有余。


加入鲜艳色,变得活力




增加画面色彩面


添加色彩,画面变得生动

当人们看到无彩色画面时,总会感到有所欠缺。如果在无彩色画面当中加入一些色彩,画面顿时变得欢快活跃。

A海报是无彩色的,画面过于单调;而B海报只是在A海报的基础上增加了色彩面,画面顿时变得欢快活跃,生动了许多。


增加色彩面,变得明快




减少黑色


调整画面部分明亮度

很多小伙伴喜欢把画面背景色设为暗色调,因为这样有踏实感。这样做画面虽然高雅却有失欢快,我们不妨试试将背景色调亮一个等级,最后你会发现画面变得明朗愉悦了许多。

因为A画面沉稳有余,但过于灰暗,缺乏欢快气氛;将A背景色中的黑色调到零就得到如图B背景色,调整之后的画面能给人明快的印象。


减少黑色使画面明亮


如何创造有踏实感的明亮?

如果你希望画面变得明亮,又不想破坏原有的踏实感时,则可以保留10%的黑色。




分离配色


什么是分离配色?

大家都知道按照色相、明度次序配色称为“渐进配色”;那与之相对的配色方式就是“分离配色”,独立配置每个颜色。

A图采用的是渐进式配色,按色相顺序排列,给人安静平稳之感,但有失紧凑,略显无趣。而B图采用的是分离式配色,使用与A图中相同的色彩,只是简单变换顺序,突出各色的独立性,冲破秩序感,给人以活泼的感觉。


打破颜色顺序,随机分离,使之独立,释放出动感






1.2 突出型配色2


用对比色达到突出效果

在色相图在相对的为对比色,相邻的为邻近色。单用邻近色配色,则画面感觉平稳;加入对比色,则颇具紧凑感。


在色相环中的相对位置创造出各样的色彩表情

挑选色相环中的相对两色,则带来欢快的节日型配色。若组合在色相环图中呈正三角形的红、黄、蓝,则得到理性安定的画面。通过颜色在色相环中的形状,能创造出各式各样的色彩表情。


黑白制造紧凑感

不难想像加入黑色会起提升效果,其实白色同样能在轻松氛围中制造紧凑感。




给画面加入对比色


对比色是主色的必要补充

色相环中相对的色相成为对比色,也叫补色,甚至可以说,配色的基本就在于补色,配色完成于补充颜色的过程之中。加入补色使人心情舒畅,缺乏补色的画面容易令人觉得不自然。

A图是以同色系为中心的平稳配色;图B加入对比色蓝色后,画面效果加强了些许。


加入对比色,使画面生动突出




终极纯粹三角型


平衡的三角型

红、黄、蓝在色相环上组成一个正三角形,被称为三原色,是特殊的颜色。绿色、紫色等颜色都可以通过混合这3种颜色得来,但是无论怎样混合其他颜色都无法得到三原色。随着毕加索、蒙德里安等现代派画家们追求终极的纯粹色,三原色的组合得到了重视。


蒙德里安《红、黄、蓝的构成》

这幅作于1930年的《红、黄、蓝的构成》是蒙德里安几何抽象风格的代表作。蒙德里安将色彩、形状纯粹化的结果,是否定红、黄、蓝三色以外的一切色彩。线条的方向也限定于水平或垂直,排斥斜线。


三角型的效果,掌握好平衡即可




十字型配色


强烈的紧凑感

将两组对比配色交叉组合后,便得到十字型配色。醒目安定的同时,又具有紧凑感。在一组对比色产生的紧凑感上加一组,自然成为最强配色型。


梵高《軍人》

A画面只用了一组红绿对比色,看上去很有紧凑感,但是过于硬朗。在A的基础上增加了一组蓝橙对比色,带来有力的安定感及紧凑感,画面丰富了许多。


由于把两组补色组成十字型,达到了完全的平衡。




黑色起突出作用


无色彩的黑色是最有力的搭配色

黑色是“无色”的特殊色,纯度、色相、明度都为零。但是,加入黑色会突出原有的颜色,使画面有力度。黑色与其他色彩组合时,是最有力的配角色。

海报A蓝绿色均为冷色,绿色背景下,表现出轻快自然、明亮却趋于平淡。海报B背景变为黑色后,绿色变得深邃而闪烁。这时,黑色本身难掩的光辉甚至会使人误将其当成主角,但是不会喧宾夺主掩盖主角色。


黑色无论与任何色彩搭配,都起强调提升作用。使强色更加强烈,使浅色更加突出,产生生动醒目的效果。

 



白色起强调作用


作为中立色的白色,不会破坏其他颜色

白色是所有色彩中最中立、最无个性的颜色,但是可以通过特定的使用方法,使画面整体更突出。在不破坏其他色彩感觉的基础上提升整体。

白色与任何颜色的反差都很大。人眼对最明亮的白色颇为敏感。即使是相当低的明度下,白色的效果也显而易见。海报B加入白色,瞬间被突出。


白色有着意想不到的效果。配上过于强硬的颜色则使之缓和,配上浅色则使之被强调。保持浅色原本的感觉,突出整体效果。






1.3 融合型配色


使用三属性达到融合效果

与突出型配色一样,我们采用三属性(色相、纯度、明度)来缓和过于喧闹、醒目的颜色。突出时要增强三属性的对比,融合时则要减弱对比色的对立。



靠近色相


使用同系色,画面统一和谐

色相差越大越活泼,反之,色相越靠近越稳定。色彩给人感觉过于突出喧闹时,可以靠近色相,协调各种色彩,使画面稳定下来。

B图使用近似色配色,表现出平稳安详的感觉。而A图红绿色相之间变化幅度过大,流于散漫,给人一种不安定的感觉。


色相被靠近后称为邻近色,进一步靠近则称为同系色,越偏离对比色、接近同系色,就越有平稳踏实感。




统一明度


明度差破坏安定感

即使色相差很大,只要明度统一,画面整体就会给人以安定的感觉。这是在不破坏色相平衡、维持原有气氛的同时,得到安定感的巧妙方法。

A图明度差较大,产生活泼感。而B图缩减明度差至零后,画面整体变得和谐,给人一种安定的感觉。


无论多么松散的配色,统一明度后都会呈现出整齐稳定的效果。零明度差营造出踏实稳定的感觉,因此最好尽量扩大色相差,力求维持色彩之间的跳跃感。




色调靠近


气氛的统一

色调也称“调子”,表示色彩的感觉、品位。因此,可以把同一色调的色群归为具有同一类色彩感觉。组合同一色调的颜色,则相当于统一了画面气氛。


A画面组合有所偏高的色调,会破坏画面的统一,而B画面将鲜艳的色调换为明灰色调,画面感觉统一和谐了许多。


如果画面松散,缺乏统一感,则需要统一色调。统一至相同或相近色调后,原本混乱的配色将变得缓和稳定。




群化方法


通过群化法收敛混乱,将三属性共通化

将混乱的配色群化会得到踏实的效果。所谓群化,就是赋予色相、色调、明度等以共通性,制造出整齐划一的组合。画面松散时,将三属性的一部分共通化,会得到统一感。

A图的配色过于混乱,色彩纷繁的效果使画面整体显得混乱。B图的配色明度、色相以及色调都比较相近,画面整体显得统一和谐。


所谓群化,指的就是分组、共通化。将前面讲述的明度、色相、色调等综合地共通化后,产生群化效果,画面收敛、缓和。




双色调配色


同一色相的明暗两色

所谓“双色调”,指从相同或相近色相中抽出两种色调的组合。最有代表性的双色调是同一色相的单色与明色的组合。制造色差,或是组合进浊色,都能创造出丰富的色彩表情。

B图的配色采用的是同一色相的淡色与暗色的组合双色调;而A图中的绿色与淡红色的色相差过大,无法组合成相同或相近色相的双色调。


双色调组合类型




浓淡法


节奏感产生舒适感

浓淡法指按照色相或明度顺序的配色。由于顺序被明示出来,因此产生节奏感,给人以舒适的感觉。对画面的一部分使用浓淡法配色,则该部分周报有着踏实的效果。

A图中彩虹的配色排列松散,但颇为活泼;B图中彩虹按色相顺序排列后产生稳定感、节奏感,就会显得既张扬又踏实。


色相的渐进


明度的渐进




莫里斯派·对比双色调


莫里斯偏爱的配色

使两组双色调对比后,同时呈现出平稳与紧凑的画面感,将双色调具有的舒适感与色相对比具有的紧凑感调和至平衡,是活跃在19世纪的英国装饰艺术大师威廉·莫里斯钟爱的配色形式。

A图由绿色的明、中、暗三阶段构成的配色。由于是同一色相,所以画面踏实,不过似乎太过单调而显无趣。鉴于出现3个阶段的颜色,应成为三色调,不过与双色调效果大致相同。而B图中加入对比色红色系的双色调。对比色效果强调了整体,双色调的平稳感与色相对比的紧凑感共存。


组合身为对比色的双色调,产生紧凑感,给人以自然的印象。




微差·品位浮雕装饰


近似色相与小明度差

使用几乎令人察觉不到的微笑色彩差别配色,会传达出高雅寂静的感觉。一般情况下,微差因其暧昧模糊感并不讨好,不过一旦被有意图地巧妙使用,会有意想不到的效果。想运用好微差,周边色尤为关键。若不小心搭配进强色,则会瞬间破坏来之不易的静感,称为庸俗失败的模糊配色。

A图鲜艳的黄色破坏了整体的宁静气氛;而B图去掉了鲜艳的色彩,包的色调具有微差的特点,微差配色表现静谧。


微差配色可以营造出幽静气氛




重复法


通过重复融合整体,制造共同之处

在稍稍偏离的位置上放置统一色彩,会达到共鸣融合的效果。这就是重复法。一致的色彩不仅互相呼应,整个画面也融为一体。

A图顶部与下面的颜色没有呼应,使得上下分离,破坏了画面的整体效果;而B图下面汽车的青蓝色与顶部天空的青蓝色呼应,形成一致的色相,上下便产生一体感,使得整体紧凑严密。


在偏离的位置上放置与主要色彩同色系的颜色,使得整体融合,产生统一感




利用白色间隔使画面更柔和


在过于浓艳的配色在使用白色背景

白色的色彩度为零,可以说是完全中立的颜色,但是由于搭配方法不同,可以产生十分鲜艳的效果。白色可以令平淡的配色鲜明,也可以令浓艳的配色柔和。

A画面全部是过于强烈的颜色,浓艳而令人腻烦;而B画面换成白色背景去除了浓艳的感觉,画面表现得柔和起来了。


如果强烈的带有刺激性的色彩让人感觉很浮躁的话,可以尝试在中间插入白色间隔,这样不仅减弱了压迫感,也使这种颜色的特征更加鲜明生动









2.1 营造画面氛围


画面的安排决定配色的成功与否

如果商品与画面不一致的话,即使有了漂亮的配色也没有任何价值。已完成配色的画面能否与目光锁定的方向一致是成功与否的关键。想要随意表现一个快乐的画面,如果用上等的格调和高雅的配色,就会令画面混乱,无法传达正确的意思。


大部分画面由色调决定

决定画面的三要素是色调、色相和对比强度。其中最重要的就是色调。色调换言之是“格调”,是和“心情、品位、兴趣”具有相同语感的词汇。选择哪种色调进行画面的配色,决定性因素就是心情。




色调


大部分画面由色调决定

即使是相同的材料、相同风格的形状,当色彩的色调发生变化时,画面也会完全不同。色调在营造画面氛围的要素之中起决定性作用,如果错误地选择了色调,无论在色相和明度上下多少工夫都无法修正画面。

选择的色调就决定了配色的画面。如设计婴儿产品,就不适合用鲜艳或严肃的色调。




色相


暖色与冷色

色相大致可以分为暖色和冷色。由红色至橙色、黄色被称为暖色,正如字面上的意义一样,这些颜色给人温暖的感觉。相反,由蓝色至青紫色被称为冷色,表现出清凉、冷静的感觉。一方面,各自的颜色都与各自特有的氛围相联系。绿色、褐色是用来表现大自然的色彩,字色无论浓淡都散发着女性的气息。


色相带来不同的画面效果

色相大致可以分为冷色与暖色,一级位于其中间的色相共4部分。以暖色为主体进行配色给人以温暖健康的印象,以冷色为中心则给人寒冷的印象。




对比强度


加强对比凸显活力

组合色彩之间的色相之差、明度之差和纯度之差称为对比强度。增加对比强度可以增添活力,减少对比强度则显得沉稳。想要创造富予活力、精神饱满的画面就要增加对比强度,想要表现静谧高雅的画面,就要限制对比强度。

A图中的运动鞋色相对比较小,给人稳重的印象;反观B图的配色色相对比强烈,表现年轻人的朝气蓬勃。




面积比


利用大面积比使画面鲜明锐利

即使使用相同颜色的搭配,当面积比例改变时印象也会随之改变。增大面积比(大小差)可以产生轻快的动感,相反,减小面积就会带给人轻松愉快的印象。

A图中的橙色地面在画面中占据了相当大的面积,给人以轻松舒适的印象。较少地面橙色的面积,画面变得锐利鲜明起来。






2.2 色彩印象指南


检查画面的差别

如果想要传达的内容与画面的配色产生分歧,那么无论怎样美丽的配色都不会有任何效果。观看者的印象与配色所表达的画面无法产生共鸣,那么无论怎样美丽的配色都没有任何意义了。


男性——冷静且有力的形象

令人感觉到男性特征的色彩,必须具有强大的力量。表现强大力量的纯色,接近纯色的暗色都是符合男性形象的色彩。


女性——冷温柔亲切的形象

和蔼、亲切、温柔的色调与保守色调的对比是关键因素。以红色为中心的暖色十分有效。另外,紫色是可以表现女性温柔的特殊色相。


寒冷

如果只用蓝色为主的冷色进行配色,就可以营造出冰天雪地的寒冷感觉。增大明度差能够进一步强调寒冷的感觉。


凉爽

以冷色为主的大部分色相,减小其对比强度即可减弱寒冷的程度,使画面表现出凉爽的感觉。由于亮度是主要因素所以要避免使用强色调。


温暖

橙色、红色、茶色等以暖色为中心的色相用来表现温暖。减小对比强度就可以营造出温暖的感觉。使用任何色调均可。


炎热

加入对比色相更能够强调暖色。纯色色调是基本要素,素雅的色调与明亮的色调都无法表现出炎热的感觉。


活力

朝气、活力、休闲


可爱·浪漫


都市气息·优雅

略显素雅的明亮色调带给人平静和安详的感觉。表现出橙色生活的优雅氛围。


豪华感·高级感

将暗色色调放置在纯色的旁边,表现出豪华气质。即使是同样的暗色,由于被放置在离纯色较远的位置上而失去了鲜艳色泽,豪华的氛围也一下子消失不见了。


自然之美

树木的绿色、大地的褐色使人直接联想到大自然,心情也变得安定祥和。


力量·速度

充满力量的画面不可缺少重量感,但并不一定适合于表现速度感。速度感是以鲜艳的纯色色调为基调,而力量感则与鲜艳的厚重色调相吻合。


幻想·神秘

同色系色彩带来幻想世界的缥缈感。


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

文章来源:站酷  作者:随风落叶ZK
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


如何从业务出发,发掘更多的设计价值

鹤鹤

“价值”在百度百科的解释是————“价值属于关系范畴,从认识论上来说,是指客体能够满足主体需要的效益关系,是表示客体的属性和功能与主体需要间的一种效用、效益或效应关系的哲学范畴。”
因为一些外部原因,让我最近一段时间都在思考一个问题,作为一名设计师,我的价值是什么???我的设计能力。那我设计能力的价值是什么???完成产品视觉的呈现,帮助项目上线和产品落地?
当这个回答摆到我面前的时候,我竟然有了一丝的不安。
因为在我看来视觉呈现这只是能力,并不是真正的价值。如果作为设计师只是这样的能力,你会发现在团队的位置是很容易就会被顶替的。
那作为设计师的我,那如何才能让自己不容易被顶替,体现自身价值到底是什么就成了重中之重的事情。
那体现自身价值之前,我需要去知道设计价值是什么。设计价值说到底就是解决问题,从而带来了想要的效益。


那我需要思考的方向(我工作主要方向B端产品)

一、设计师解决了什么问题
1、发现问题
2、定义问题
3、分析问题
二、设计师如何解决的问题
1、明确设计目标
2、制定设计策略
三、设计师如何验证问题是否解决
1、收集用户反馈
2、跟踪数据指标
四、举个例子
五、总结一下

 

第一步:「设计师解决了什么问题」

发现问题、定义问题、分析问题
一开始工作的时候很长一段时间都是被动接需求、找参考、输出设计稿,这样一个流程下来,解决的问题无非就是如何用设计呈现需求的过程,设计师的价值发挥就会非常有限。所以如果想发掘更多设计价值,就需要转被动为主动,将设计前置,从业务出发去发现问题(通过分析项目背景/目标、用户调研、行业/竞品分析等)、定义问题(问题出现的原因是什么?用户的原因?还是产品本身的原因)并且分析问题(细化出现问题的原因,给出解决问题的方案)


第二步:「设计师如何解决的问题」

明确设计目标、制定设计策略
虽然如何解决问题每个人的侧重点都不一样的,但是设计目标作为体验提升的开始,正确的设计目标决定了提升的方向,而设计目标可以由产品目标(提升某个具体的指标、提高用户的操作效率)和用户目标(用户的想要得到什么、用户使用产品的痛点是什么)的推导出来。目标有了就要落地去实现,作为设计师,设计策略是落地的重要一步:统一规范、缩短操作路径、提升用户满意度等等


第三步:「设计师如何验证问题解决与否」

收集用户反馈、跟踪数据指标
我们总是在主观的评价这个设计好不好看、好不好用,导致设计的价值很难去真正的衡量。其实衡量价值最基本的方法无非就是你这样做带来了什么,结果导向是衡量设计最为标准的,也是流程闭环的最后一步,如果没有结果,流程无法闭环,那设计价值也无法衡量。而产品上线后得到结果又是什么?无非就是用户反馈是否满意和数据指标是否达标。 


举个例子

项目背景是在公司业务快速增长和用户对于服务品质的诉求提升,加上客服团队一直处于被动依靠人力处理用户问题的服务模式的情况下,排除大幅度叠加人员的方案,希望通过数据驱动+服务产品智能化的方式来对客服体系的升级。从而提高客服人员的工作效率,减少公司的招聘成本的同时提升用户的体验,最终实现公司业务的快速增长。

第一步:「设计师解决了什么问题」

1、发现问题

通过项目背景不难发现其中问题所在:在不增加人员的情况下,当前客服团队的服务模式,已经满足不了现有的业务增长趋势和客户的品质诉求。

那我们需要做的就是解决服务模式的问题。

服务模式有什么问题呢?一直处于被动依靠人力处理用户问题。

2、定义问题

为什么一直处于被动依靠人力处理用户问题呢?

· 用户一遇到问题就去找客服,用户做不到遇到问题可以通过自我查询或者其他不依赖客服的方式来解决。

· 客服人员能力有限,每天的用户承接量大,重复性问题多,问题处理流程繁琐,导致单个问题处理时间较长。

3、分析问题

排除人力堆加的方法以外,如何才能解决服务模式的问题呢?

方法就是

增强用户自主解决能力:自主渠道的升级,实现渠道扩增和业务分流,通过内容分层,简化用户查找问题的流程,培养用户自主解决能力的心智模型;引入智能机器人能力,实现简单性、高频率问题由机器人代理解决。

提升客服解决问题能力:调整问题的优先级排序,优先解决重要客户的问题,减少重要客户的投诉和流失;寻找问题处理流程的机会点,减少客服单个处理时长;分析不同程度客服同时处理问题量的数据,限制客服最大承接量。

既然问题已经确定了,那就要去解决问题。根据对问题的分析结果,该如何转换为设计呢?


第二步:「设计师如何解决的问题」

1、确定设计目标

结合产品目标(自助渠道升级、产品智能化/数据化)+用户目标=设计目标的推导公式

产品目标是产品经理/需求方给到你的,但是用户目标则是设计师自己调研分析得来的

----用户想做什么?

用户想快速解决遇到的问题

----客服想做什么?

客服想轻松快速的帮助用户解决遇到的问题,完成工作中的KPI指标

----用户的痛点?

用户在自助渠道找不到答案,于是遇到问题就找客服去解决问题,智能机器人的回答也解决不了问题,所以需要找人工客服,但是需要等待很长的时间

----客服的痛点?

每天高负压的的工作环境,枯燥重复的工作流程,敏感繁多的考核指标。

2、制定设计策略

那在确定好设计目标之后,就需要通过制定设计策略,以达到设计目标。

注意:我们在做设计之前,必须要确定设计目标。因为目标是方向,不然做到最后发现自己做的设计没有解决产品目标和用户目标,那就是白白的浪费时间,也说明自己做的设计是又问题的。

第三步:「设计师如何验证问题解决与否」

项目上线后,我们需要去收集用户反馈,关注我们设定好的指标去衡量、验证构建的设计方案是否解决用了用户问题以及是否达成了产品目标,因为这样设计工作才能实现一个闭环。

1、收集用户反馈

可通过在产品上线初期以及上线一段时间后进行调查问卷的发放,通过调查问卷得到用户在使用新的产品的感受,直观感受产品迭代后的反响,同时也可以为下次的迭代提供方向和依据

2、跟踪数据指标

从产品目标我们可以看出,我们的数据指标就是提高用户对自主渠道的使用率,那我们只需要在自主渠道的页面增加一定的数据埋点:页面点击率、页面浏览时长等等


总结一下

写了这么多,才发现自己现在欠缺的,还有环境欠缺的。所以冷静的理一理自己的工作的流程,多关注业界的动态。主动的将设计前置,提升自己的价值,提高自己在团队/项目中的话语权。不然如果只是简简单单的设计呈现,自己永远处于被动挨打的状态,没有话语权,没有价值体现,随时都有可能被替代。

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

文章来源:站酷  作者:一曲问灵
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


日历

链接

个人资料

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

存档