首页

160种常用的配色方案,把设计调性拿捏得死死的

seo达人

一、高端

图片

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

图片

 

二、科技

图片

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

图片

 

三、时尚

图片

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

图片

图片

 

四、酷炫

图片

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

图片

 

五、好吃

图片

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

图片

 

六、夏天

图片

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

图片

 

七、清新

图片

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

图片

 

八、快乐

图片

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

图片

 

九、可爱

图片

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

图片

 

十、健康

图片

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

图片

 

十一、运动

图片

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

图片

 

十二、科幻

图片

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

图片

 

十三、喜庆

图片

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

图片

 

十四、复古

图片

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

图片

 

十五、中国风

图片

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

图片

 

十六、梦幻

图片

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

图片

 

十七、女性

图片

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

图片

 

十八、优雅

图片

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

图片

 

十九、经典色彩组合

图片

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

图片

 

 

图片

以上所列举的色彩组合,矩形色块为背景色,圆形色块为画面中图片元素或文字使用的颜色。根据需要可以把其中的某些纯色转变为单色渐变,或者也可以把某些单色渐变转化为纯色。另外,在不包含黑白灰的色彩组合里,仍可以根据需要自行加入黑白灰,比如用于填充文字的颜色。
当然,能体现以上这些调性的颜色还有很多,大家可以自行补充,建立起自己的色库。 

作者:葱爷

转载请注明:学UI网》160种常用的配色方案,把设计调性拿捏得死死的

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


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


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



这个效果原来是这样做出来的

seo达人


图片

 

正文

经常使用爱奇艺刷剧的同学,有没有发现爱奇艺的应用图标又变了。前段时间爱奇艺针对品牌设计进行了较大的调整,最近又悄悄地将应用图标的背景色换成了这种多彩色混合渐变的形式。

图片

针对这个视觉效果估计大家各有看法,我们就不讨论这个话题了,今天黑马哥是来出教程的~O(∩_∩)O~。

这个类似于极光/弥散渐变的风格最近也比较流行,在 UI 场景中的运用也是比较普及的,被运用到应用图标的案例中相对较少。大概的回忆了一下,也有一些产品会使用,特别是比较知名的 Instagram 很早之前就使用了,也成为了流行趋势中的优秀案例之一。

图片

通过极光/弥散渐变(混合渐变)的形式强化应用图标外轮廓背景,不仅可以提高视觉感,也是体现年轻化趋势的一种色彩表现形式。不过渐变中的色彩本身也是关键性的因素,如果色彩不够年轻活泼,带来的效果也是千差万别的。

图片

 

一、渐变的表现形式

渐变色在我们的设计中是非常普及的,渐变色分为线性渐变、径向渐变、角度渐变、混合渐变、流体渐变等形式。不同的渐变形式可以营造不一样的视觉体验,可以丰富色彩环境、强化光影质感、增强层次感和空间感等。

1、线性渐变

这是最常见的一种渐变方式,具备明确的方向性,由两种或者多种颜色组合形成。相较于单色来说,线性渐变可以使得画面更加丰富,色彩营造出的层次感更强。

图片

2、径向渐变

径向渐变是以中心向外扩散而形成的圆形渐变,可以作为立体感的表现,也可以营造向中心聚拢的光影效果。

图片

3、角度渐变

角度渐变形成类似于雷达扫描的效果,属于运用相对较少的渐变形式。在一些应用图标的外轮廓背景中会被使用,也可以作为营造产品的光影变化。

图片

4、混合渐变

混合渐变就是多种颜色随机混合,色彩形成不均匀的自然弥散开,也可以成为弥散渐变或者极光渐变。是最近比较流行的视觉风格,可以呈现出丰富的色彩变化和随性自然的年轻化趋势,被广泛应用到平面设计、UI 设计、电商设计等众多视觉设计领域。

图片

5、流体渐变

流体渐变就是多种颜色渐变组合,形成带有流动感的视觉效果,通常作为背景来丰富设计的视觉感。也有动态形式的流体渐变,在 APP 和一些屏幕壁纸中出现,带来的感官体验也是非常不错的。

图片

随着视觉感官体验的不断追求,设计师已经不满足于趋于平面化的渐变形式,探索出造型多变、色彩丰富、刺激感官的视觉体验,以更加丰富的表现形式来探索渐变方式。

 

二、渐变小教程

线性渐变、径向渐变和角度渐变实现起来比较简单,软件自带的渐变属性即可满足。下面重点给大家分享如何实现混合渐变的效果,以后再单独给大家分享关于流体渐变的技巧。

混合渐变顾名思义就是将多种颜色进行混合,形成色彩丰富的过度效果,需要把控的是颜色之间的自然过渡。

方法一:

通过绘制几个不同颜色的形状图形,然后执行高斯模糊形成混合渐变,模糊的参数值要适当大一些,一直到颜色自然过渡为止。

图片

方法二:

如果想要随机性大一些,可以通过画笔工具随意涂抹颜色,这样形成的效果更加随机性。然后再执行高斯模糊将颜色融合,带来自然随性的视觉体验。

图片

 

三、分享几个案例

不能只是纸上谈兵,只有反复磨练和尝试才会熟能生巧。根据以上的方式黑马哥完成了以下的作品案例,大家也一起来动动手吧!

1、邻近色系易把控

混合渐变技法层面来说并不难,配色是相对具备难度的,很多同学都会因为配色不到位而做不出优秀的作品。针对应用图标设计中的配色来说,邻近色系的搭配是最容易把控的。选择色相范围在 60° 以内的色值,混合出来的色彩排斥感都是比较低的,融合度比较高,能够呈现出比较舒适自然的视觉感官体验。

如果选择了色相角度大于 60° 的色值,只要数值的增减关系控制在 30° 以内都属于可控范围,这时候如果出现较大的色彩排斥感,可以通过降低不透明度来进行视觉平衡。

图片

2、强视觉感还得对比色

虽然邻近色的处理比较容易把控,但是带来的视觉感也是与颜色对比关系成正比的,想要达到强视觉感还得选对比色。色相选择范围在 120°~180° 之间的色值,容易形成较强的视觉张力,通过增加高斯模糊的值才能稍微过度相互之间的色彩排斥感。

图片

3、学会举一反三

今天分享的经验不局限于应用图标的设计范畴,我们要学会将这个技法举一反三,运用到更多的设计场景中。比如在下面作品中的一组信息卡片的设计中,通过混合渐变形成的卡片背景提高了局部的视觉感,配合磨砂玻璃质感的运用,提高了该部分的视觉感官体验。

图片

4、其他作品欣赏

为了辅助大家理解和开拓思维,为大家选择了几个类似的案例作品,希望可以带给大家更多设计灵感。(以下作品版权归属原作者,仅作为学习交流)

 

 

四、布置一个小作业

通过对混合渐变实现技巧的学习和案例欣赏,相信大家对于混合渐变有了比较全面的认知。学以致用的目的,下面为大家准备了一个小作业,希望以此来强化大家的理解。

图片

根据以上示意图提供的高保真原型图,以混合渐变的形式增强其作品的视觉感。

以下方案为黑马哥完成的一个示意,大家可以转换思维和调整新的配色方案,输出不一样的全新作品。

图片


作者:黑马青年

转载请注明:学UI网》这个效果原来是这样做出来的

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


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


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




百度直播丨塑造亲和力的直播间虚拟助理形象

seo达人

业务背景 

首先,我们一起解读业务场景、身份、及功能;业务场景是全品类综合电商直播间,身份是主播的虚拟助理,直播间的功能是为用户答疑解惑;基于这三个背景,初步勾勒了角色标签,目标是创造一个富含亲和力的虚拟助理形象,来呼应全品类综合直播场景和虚拟助理身份。图片 

 

行业洞察

其次,洞察行业虚拟数字人,从外形上分为卡通和写实,风格上划分为二次元动漫化、3D卡通、3D超写实、真人形象四种类型,渲染效果分为虚拟和现实;而3D卡通风格的受众群体大,接近现实的渲染效果,更平易近人,亲和感更强。 
探究形象美学,代入「巴卡罗九风格坐标图」的“曲直+量感”两大风格要素,定位到人物轮廓圆润曲直偏曲,与柔和自然的小量感「柔和型风格」是亲和的,和用户交流时无攻击性,符合亲和的带货助理身份所需的特质。 

 

设定架构

最后,结合形象的“内在+外在”的体现,与巴卡罗两大风格要素“曲直+量感”,来塑造亲和力的直播间虚拟助理形象;拆解内在围绕性格/气质/眼神特征,外在围绕形象(体型/面貌/穿搭)、举止与表情三大框架设定形象,共同塑造亲和力和感染力的形象。

图片

01 内在心与神 

解析内在形象对应的两大风格要素-曲直+量感,细分量感的指标是成熟/青春、外向/内向、开朗/稳重的综合值,曲直的指标是热情/冷漠、柔和/刚烈、感性/理性的综合值。而亲和力的内在形象,量感偏小—开朗的性格、青春乐观的心态、以及外向的性格;曲直偏曲—需具备大方热情的气质、柔和的眼神、感性的情感表达,拉近和沟通者的距离,在直播间为用户答疑解惑时,第一次见面也能给所有人留下亲切、可信任的印象。

图片

02 外在形与貌

解析外在形象对应的两大风格要素-曲直+量感,细分量感的指标是大小、轻重、粗细、深浅、宽窄、薄厚、浓淡的综合值,曲直的指标是直曲、冷暖、方圆、硬软的综合值;量感偏小—特征是窄细浅小短薄淡,带来柔和自然;曲直偏曲—特征是圆暖曲软,和用户沟通时圆润舒适,以此来指引亲和形象的设定。  a)形象亲和接下来,外在形象围绕体型/面貌/穿搭三步走框架,搭建亲和力的决策框架。体型

第一步,体型选择胖瘦适中(曲直适中);肩腰臀比例协调/凹凸有致的X型(量感适中),理想型身材穿什么衣服都好看。

面貌五官

第二步,五官的起点是脸型,选择曲直适中,长短适中的鹅蛋脸(额头与颧骨等距),不挑发型。

图片

确定脸型后,是五官的决策,我们通过洞察发现,许多保持高热度的卡通形象最显著的共同特征就是拥有一双甜美可爱的大眼睛,表情生动亲切,无攻击性。在五官比例上,三庭中的中庭稍长,五眼中两侧较短,注重眼睛神情的表达。因此,在设计初始,我们先以眼睛为中心,再逐一展开眼睛/眉毛/嘴巴/鼻子的设定。

图片

眼睛:定位生动的大眼(量感大)获得生动的神情;眼型结合圆眼+桃花眼(偏曲),上眼皮弧度圆润饱满,自带月牙般微笑感。

眉毛:定位粗细适中(量感适中),眉峰圆润/眉尾自然向下的小挑眉(曲直适中)。

嘴巴:定位小嘴唇(量感小),唇型选择微笑唇,嘴角上扬提升友好度(曲直适中)。

鼻子:定位鼻翼窄小的小鼻(量感小);鼻型选择鼻头上翘的小翘鼻(曲直适中),搭配鹅蛋脸脸型。

图片

妆容

在妆容上,尝试融入电商热卖元素-火苗,来进行面部彩绘,呼应电商直播间虚拟助理的身份。

图片

头发

五官和妆容确定后,开始做她的头发,长短适中的中长发(量感适中)、发尾微微外卷俏皮柔美(曲直适中)、高颅顶发型蓬松透气。

图片

到这里,咱们面貌的部分就告一段落了,亲和力的五官,并不是说每一个五官都要量感小、曲度适中;咱们围绕业务场景、身份与功能,科学的创造虚拟形象,需注重五官与脸型的比例,和五官之间的相互搭配。

穿搭

第三步,是穿搭的设定,以上体型和面貌量感/曲直的设定,与穿衣风格有着密不可分的关系。我们以修身得体为方向,尝试了优雅的轻熟风、服务型身份的职业装、以及休闲百搭的休闲装-T恤和牛仔裤;因轻熟风的连衣裙便利性差,职业装略过正式有距离感,最终选择休闲装即适用于多品类直播间场景,又给人亲和感拉近距离。

图片

b)举止优雅

根据虚拟助理的六大服务场景,定义优雅的肢体语言,在与和用户交流时,从肢体语言(站姿、手势、头部、眼神、面部表情….)中流露出周到的礼节、细致的行为,给予用户友好的指引与反馈。

图片

c)表情生动

咱们按照场景把基本情绪划分为快乐、伤感两类;欢迎/引导/收到赞的正向行为,表现为快乐的微笑;答不上来问题和收到踩的负向行为,表现为伤感的噘嘴/皱眉,避免使用带有攻击性的(悲痛、愤怒、憎恨)。

图片图片

 

写在最后

美国心理学教授艾伯特·马伯蓝比提出73855定律:人们对一个人的印象,有7%来自于说话的内容,38%来自于说话的语调,55%来自外型与肢体语言;虚拟形象想要拥有丰富的表现力,既要注重形象、举止、表情的雕琢,也要注重声音的音色/语调/语速、语言的话术的呈现。彼时,虚拟数字人来到了聚光灯下,窥见巨大的商业潜力;MEUX将持续探索属于自身的“造人”之路。
 

作者: 富媒体用户体验 

转载请注明:学UI网》百度直播丨塑造亲和力的直播间虚拟助理形象

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


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


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



快来看看这些小功能里面的设计惊喜

seo达人

一、【抖音】点赞功能情感化设计

在七夕期间使用抖音APP点赞时,图标会变成玫瑰花符号,多次点击会出现满屏的玫瑰花,让点赞设计变得更加趣味化。并且与同类竞品在点赞的交互设计细节上产生差异化,给用户带来与节日相关联的,更加丰富的视觉和感官的触动。该设计方案不仅提高产品的调性与用户体验,并且与用户在节日情感上产生更深的共鸣。

图片

 

二、【飞书】左侧聊天框交互设计探索

飞书作为一个办公协作平台,在解决团队沟通效率方面下足了功夫。鉴于人们在认真阅读某些信息时,通常是从左到右、从上到下的浏览习惯,飞书的聊天信息全都靠左排列也正好印证了这一点,一改往常闲聊时较为随意的习惯,不仅能潜移默化的暗示用户在交流过程中该有的工作态度,还能提高其专注度、以及团队之间的沟通效率。

在使用场景中,用户可以把工作的聊天记录当成文档来看待,减少与工作无关的聊天内容,使得聊天记录就是会议纪要。

用户也可以通过飞书的设置,自由地更改聊天消息的左右排布。使不习惯于左侧聊天排布的用户调整的自由,减少这类型用户的排斥心理反应。

图片

 

三、【闲鱼】卖闲置图标场景设计

闲鱼将“卖闲置”的驼峰标签栏设计成“电风扇”的动态图标形式,结合近期高温天气,给用户带来心理上凉爽的使用体验。

图片

 

四、【每平每屋】加入话题圈卡片动效设计

每平每屋的话题圈添加卡片,做成了非常有意思的ip人物拨弄+号的动效。在视觉上起到了强调的作用,也能驱动用户的好奇心和体验心,增加话题圈的点击率和加入率,让加入圈子这件事变得轻松有趣。

图片

 

五、【Snapchat】角色创建功能应用设计

在Snapchat中角色创建完成后,在相应的应用功能界面,则会替换成用户的专属角色。

如:地图界面、表情包界面、引导界面以及视频流界面。

该设计以专属角色代替用户视角,通过让专属角色深入的参与每一个功能来提高用户粘性,以及用户存在感和归属感。

图片

 

六、【Snapchat】底部栏故事功能设计

Snapchat将故事视频流设计成了视频“合集”,用户点开视频,通过下滑或者点击创作者的名称来关注或者查看不同的视频合集。视频合集分为xx季xx集,方便用户快速筛选。

另一个不同于普遍的视频功能设计点中,Snapchat将单击视频【暂停】的功能设计成了单击【快进】,视频切换则是左右切换。对于中国用户,需要时间来适应不同的交互习惯。

图片

 

七、【Gravity】头像装扮设计探索

在Gravity这款社交软件中,用户无法使用设置头像功能,产品将用户系统角色替代照片头像。在软件中模糊用户的头像存在感,使用户发出的内容成为社交重点,塑造一个半匿名社交平台的属性。而角色商城的装扮,则满足了用户头像多样性的选择,同时通过这种方式提高了产品变现的能力。

图片

 

八、【Gravity】角色场景界面

在Gravity的角色场景界面中,用户可以根据心情、生活、兴趣等场景来切换自己的展示形象。也可以邀请好友进入自己的场景界面,形成一个动态的“朋友圈”,通过切换场景来表示自己最近的状态和生活。动态朋友圈的建立能够增加用户与用户之间的联系,增强用户对平台的粘性。

图片

 

九、【羊驼日语】首页卡片功能设计

羊驼日语的首页不同于其他APP,摒弃了首页头部banner或者金刚区的设计方法,羊驼日语将动漫风融合进APP的设计风格中,将首页的卡片区动漫人物做主要突出。新颖的设计让用户眼前一亮的同时将思维引导到卡片功能上去,引导用户进行点击,提升学习率。

图片

 

十、【型影】构图姿势辅助功能设计

如果你拍照总是肢体僵硬,不会摆姿势,那你一定要下载这个APP。

型影APP的构图姿势由创作者提供,内含几千种不同场景不同姿势的构图摆拍。

只需要点击你喜欢的同款照片,打开相机,视频中的辅助线能够帮助你一比一复刻博主同款poss!

图片


作者:黑马青年

转载请注明:学UI网》快来看看这些小功能里面的设计惊喜

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


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


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



火出圈的《羊了个羊》,到底做了什么?

seo达人


图片

几轮信息传播下来,我的好奇心就这么被激起来了。于是到小程序里找到游戏,玩了几把。最直观的感觉就是“确实难度很高”,而且与之前的玩过的游戏还真有点不一样。

 

一、产品玩法

1、门槛低

本质上来说,《羊了个羊》是一款消消乐游戏。消消乐的特点就是门槛低,没有复杂的操作,用户只要点几下就可以了。第一关太简单了,更多的是为了教学而服务的。也正是因为简单,我不知道“卡槽里的3个相同的卡牌,即使不相邻也是可以消除的”,不过玩了几局后我就明白了。

图片

2、单局时间短

微信小游戏有一个特点就是时间短,用户可以随进随出,单局不会占用太多的用户时间,但是玩起来后也容易上瘾。这似乎与短视频非常相似,本想着只看一个视频,也就3-5分钟,不会浪费太多时间,但是一旦开始了,根本停不下来。

前几天,在我儿子的引导下,玩了一个赛车游戏。刚开始想就玩一局,结果是一局接一局,中秋放假2个晚上都玩到了深夜。

3、难度高

《羊了个羊》与传统的消消乐游戏又有些不同,增加了叠牌设计、卡槽消除玩法。看起来简单,玩起来实际上非常烧脑。

叠牌的玩法就是用户必须要消除上层的卡牌,才能激活下层卡牌。有了消除的先后顺序,就要求用户必须有一定的策略,才可能通关。

卡槽用来放置用户选择的卡牌,卡槽中出现了3个一样图案的卡牌则可以消除,当卡槽满了,也就意味游戏失败。即使卡池上存在3个一样图案的卡牌,但是卡槽中没有了空位,游戏仍然失败。

图片

所以用户不仅要关注卡池中的卡牌层级,还要关注卡槽中卡牌情况。

因此,游戏在宣传方面打出了“通关率只有0.1%”的口号。为什么搞这么高的游戏难度呢?

 

二、第二关都过不去的难度

任何游戏都必须要有一定的难度,否则用户玩几局就会觉得“缺乏挑战性,没意思”。但是只到第二关的难度,我也是第一次见。这种难度给游戏带了什么呢?

1、话题性带来流量

虽然很多游戏会有获得成就引导分享,或者分享朋友圈、好友圈复活玩法等等,但是用户要么不做分享,或者都是非常被动的分享。而这次用户发朋友圈,或许都是主动而为。

最大的引爆点就是游戏难度,有难度才会有话题性,用户才有分享和互动的欲望,才能引起更多人的关注。而朋友圈、分析文章、短视频各种渠道掀起的话题,肯定为游戏带来相当大的用户流量。

2、用户挑战欲望

如果有人对你说,“有款消消乐游戏挺好玩的,要不要试试?”,你也许只会微微一笑,甚至嗤之以鼻。

但是如果有人对你说,“有款消消乐游戏,你第二关都过不去”。你会怎样?

大概率想“怎么可能呢?我要挑战一下”。用户尝试的欲望就起来了。结果,用户越是挑战不成功,越想挑战。

3、方便广告植入

游戏难度最终是商业化服务的,用户多次尝试后不成功,就会求助道具或者启用一次复活机会。特别是单局已经投入了较多的时间成本,眼看快要成功通关的关键时刻,沉没成本促使大多数用户牺牲30秒的广告时间,换取一次复活的机会。

只要看广告的人越多,钱也就赚得越多,游戏的难度也是为了“如何让玩家看更多广告”而服务的。

图片

4、减少游戏投入

对于游戏这种产品来说,真正的热度应当来自于游戏内容,以及其带给玩家精神层次的愉悦体验、世界观、价值观构筑等方面;而游戏公司通过制作优质内容的游戏,获取商业利益,再持续开发更多游戏吸引更多关注。

所以传统的关卡游戏可能是几十上百关,甚至更多,大家也都习以为常了。随着关卡增加,游戏会慢慢加入新的玩法,吸引用户不断地玩下去,最终让用户长期上瘾。希望像挤奶牛一样,持续性地挖掘用户的价值。

《羊了个羊》则完全反其道而行之。

似乎是考虑到当下小程序游戏非常容易相互模仿。一旦一款游戏火了,之后就会冒出各种相似的游戏,就会面临激烈的竞争。所以《羊了个羊》改变了游戏策略,通过拉高关卡难度,让用户一直停留在第二关(也许有更多关,因为我没有玩过第二关),从而减少游戏的开发成本。

这种更像是快餐模式,不用过多地担心游戏风潮会过去,也不用担心用户流失,毕竟游戏的投入并不高。

而一些当时风靡一时的小游戏,例如“跳一跳”、“打纸飞机”、“旅行青蛙”等,确实在大火之后迅速降温。想想自己这几年也曾经玩过一些小游戏,不过基本上都是“3分钟热度”,玩一段时间就放弃了。

或许这也是《羊了个羊》拔高游戏难度的一个原因吧。

 

三、关于激励机制

当然,在《羊了个羊》游戏中也有传统游戏必备的激励机制。例如有省区代表队排名,“最强王者”等荣誉勋章称号。但这些激励机制在目前的阶段,似乎并不重要,通关成为了用户最大的目标。用马斯洛需求层次理论来解释就更加合理了,温饱还没解决,谈什么个人荣誉呢?

用户当前最大的需求就是“该如何冲过第二关”。

图片

以上就是我的一些思考,欢迎大家评论区留言交流~


作者:子牧先生

转载请注明:学UI网》火出圈的《羊了个羊》,到底做了什么?

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


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


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



怎样解决设计好看又符合市场需求的问题?

seo达人


在商业设计中,好看和有效按理来说应该是一体的,因为脱离了市场需求的好看没有意义,而设计师所做的工作就是要解决降低传播成本的问题,通过专业的审美和技巧让设计更美观,也是为了满足市场需求、达到更好的传播效果。

举个例子,在一张产品海报中,最好不要让一个产品孤零零的“飘”在海报上,而应该加一些元素与产品进行组合,以强调产品的功能属性和行业属性等;或者搭建一个场景加强氛围感;又或者加上用户以加强代入感。这些处理手段都是从设计的功能性来考虑的,但是出来的视觉效果确实也会比只摆放产品要更好看。

图片

图片

比如上面两张海报,忽略画面中的文案意思和尺寸,单纯从设计上来看,很明显图二更好看,也更有带入感和氛围感,所以相比之下,图二更符合市场需求。

而如果不出于对市场的考虑,只要做到美观,那么我们就可以在产品周围加很多花哨的元素,甚至把产品和文案尽量缩小,让装饰元素作为主导,这样可能更好看,但是产品和文案被抢了风头,消费者的关注点都在装饰元素上,导致最终效果可能会大打折扣,这就是不符合市场需求的好看。现在很多国内的电商设计在这一方面有比较明显的问题。

图片

还有一个老生常谈的问题,就是关于中文和英文的排版问题,我们都知道用英文排版更容易做出好看、洋气的版面,所以现在的很多海报中都会有英文。

其实适当加一点英文进行辅助也没什么不好,毕竟我们可以把英文当成是与产品或主题相关的元素,既然图形能做装饰元素,那么文字也可以,何况现在国人整体的英文水平也有所提高,国内也有不少国外友人。

图片

但主次问题一定要把握好,既然是国产品牌,目标群体又是普通的国内大众,以中文为主、突出中文才是符合市场需求的。着重突出英文或许会更加好看,但同时也会弱化中文,那么传播成本就提高了,甚至还会让消费者怀疑,在这些看不懂的英文里是不是隐藏了一些对他们不利的信息,所以这种做法并不可取,客户通常也接受不了。

 

二、并不是丑的设计就有效

有很多设计师会习惯性的以为,好看的设计就是花里胡哨的、没有效果的;而丑的设计就是接地气的、有效果的、符合市场需求的,甚至喜欢把符合市场需求当成设计不好看的借口,这绝对是一个误区。

比如有些人觉得椰树牌椰汁包装很有效,是因为它丑,其实美与丑只是个人的视觉感受,美丑之下传递了什么信息、达到了怎样的效果才是关键。椰树椰汁的包装之所以有效,不是因为它丑,而是因为它不一样,还有它把包装本身当成了广告媒体,大量宣传了它的利益点。

图片

想象一下,如果一开始的包装就请设计师按照这种思路精心排版一番,做好看、做时尚一点,效果难道会比这个差吗?应该不会吧,而且可能年轻人会更喜欢,更敢于拿着它走在大街上。

图片

图片

▲ 上图是网友自发设计的包装。

 

还有的人觉得有效的设计就是把文字和图片都尽可能地放大、把重点文字填充成大红色,逻辑是面积占比大了、颜色不一样了,自然更容易被看到、更容易阅读,所以更有效。而事实上不一定,原因有三。

❶ 如果所有信息都大、都突出,那么就等于没有重点,消费者在有限的时间里不知道该看什么。

❷ 如果文字和图片都大,那么留白空间就会减少,版面太拥挤就会加大阅读的难度。

❸ 如果因为元素太大、红色强调的信息太多,从而导致画面变得很难看,那么可能会引起消费者反感,从而放弃阅读信息,甚至是损害品牌的形象。

下图是葱爷在一家超市门口看到的海报,文字都很大,版面得到了充分利用,也用颜色突出了重点信息,但是效果很好吗?不一定吧,如果合理美化一下是不是能得到更好的效果。

图片

把重点信息放大、用红色突出也没有错,但突出信息的方式不只有这两种,以不变应万变的种做法很偷懒,效果也不会太好。

 

三、如何在符合市场需求的基础上尽量做好看?

1、加强氛围感

即把产品或主题的属性加强,比如科技产品的设计要有很强的科技感、食品海报要有很强的食欲、运动海报要有动感和放飞自我的感觉。加强氛围感的主要方式有增加场景、增加光影、填充大面积的颜色、增加与产品相关的素材等等。

加强氛围感强可以使设计在视觉上变得更美观,但基本不会影响到原来信息的可读性、产品也不会被抢风头,这样的设计会更有带入感,更能促进消费者采取行动。

图片

图片

比如在上面的两则banner中,图二在图一的基础上增加了背景色和光影,氛围感增强了很多,同时视觉上也更好看了。

 

2、加强设计的形式感

比如使用一种新颖的构图方式、新设计风格、新的创意表现、新的元素组合方式等,有形式感的设计会更整体、更特别。当然,在视觉上也会比没有形式感的设计更美观、更具视觉冲击力。

图片

 

3、有主次、有层级

产品和重要信息当然可以突出,但不能盲目地突出,而是要按信息的重要程度和逻辑关系来安排信息的层级关系,引导消费者高效阅读信息。

图片

 

4、设计手段不要太单一

比如为了突出重点信息,我们除了放大字体还可以采用其他手法,还可以加强字体对比、空间对比、方向对比、空间对比、留白对比、风格对比、点线面对比等手段,照样能起到突出的作用。而且手法丰富了以后,视觉就不会那么单调,从而也会好看很多。

图片

图片

▲ 图二比图一 的设计手法就要丰富一些。

 

5、细节要精致

在设计大方向做得不错的情况下,如果再加强细节的处理,那么其美观性也可以得到很大提升。比如把标题做一下字体设计、把图片精修一下、颜色搭配在整体和谐的基础上增加一点新意、排版用网格系统规范一下等等。

 

比如在上图的两张海报中,图二在图一的基础上做了图片美化、网格规范排版、色彩优化等细节调整,视觉上也更美观了,甚至也更符合市场需求了。

 

图片

想要设计既能满足市场需求又能满足审美需求,确实不是一件容易的事情,因为设计不是数学,没有标准答案,如何把握好这个度,如何让两者完美结合达到最好的效果,是需要设计师去反复探索和尝试的,但毫无疑问,它们是可以共存的,而且应该共存。


作者:葱爷

转载请注明:学UI网》怎样解决设计好看又符合市场需求的问题?

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


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


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



需求太朦胧,设计师如何拆招?

seo达人


 

图片
图片 
先举一个栗子,如果你正在进出地铁口,迎面而来的是一张信息繁杂,需要解读时间较长的海报广告,你是否会驻足观看?

图片

除了部分“犯职业病”的同学可能会研究一下,绝大多数人可能并不会耗费时间去解析,因此这个海报也就失去了传播信息的价值。

图片

或许设计师在设计这张海报时运用了某种创意,但因为对场景限制的欠考虑或者并未提前了解投放地点,而没能达到预期效果,的确有点儿得不偿失。

图片

因此,在开始着手设计前,建议设计同学要和AE或客户确认好目标用户、使用场景和时间节点等关键信息。只有在思考到这些之后,才能尽量确保自己的设计能真正助力品牌或一场营销活动。 

 

图片

▷  它被广泛用于企业管理和创意设计,对于从不同角度发散设计思维很有帮助,同时也助于弥补设计产出的疏漏,让你的设计工作更成体系。

图片

图片
▷ 在参与项目时,这些信息点可能不会完整的给到,这就需要我们主动进行提问、了解。有时,提出一个好的问题,就意味着完成了“一半”的工作。收集到的“情报”越多,也越有利于提高出品的准确性、合理性。

 

图片 

▷ 那么当下次有一张“你看着设计就行”的海报需求时,你通过对它进行拆解,可能得到的答案是——为迎接双十一,客户要在商场电梯两侧,做产品促销广告,希望通过更优惠的价格吸引人购买的海报了。

 

图片

图片

图片

 

图片

▷ 我的建议是延续品牌调性走,至少也要跟着所属品类的调性走。因为不同行业、品类的风格是有差异的,比如:快消品可能要传达很“嗨”的感受、奢侈品要很有高冷feel等… 

 

一般情况下,我们不能用做快消品海报的风格来设计奢侈品海报。 

图片

▷ 这是我浏览网页时偶然见到的一个例子,可能比较极端,但这里想建议大家的是,在开始设计前,可以先大概看一下服务品牌以往的视觉调性,了解行业、品类的视觉特点,做到心中有数,这样即使在没有明确需求时,我们至少也能做到尽量不跑偏。 

 

 

图片

图片

“字再大点儿”这几个字在商业设计上“战功卓著”,引无数设计同仁竞折腰…把字放大和设计师对审美的坚持,有办法调和么?面对诸如此类的“设计需求”,我们可以如何拆招呢? 

图片

▷ 我认为最关键的点落在这个词上——翻译。当客户说他没有别的需求,把字再放大一些就行时,你确认只是字面上的意思么?其实大部分情况下好像并不是,他虽然表述不出来,但内在的意思有可能是再醒目一些、一眼就能看见。

 

图片

▷ 我们来看一个案例。提交第一张图时,客户反馈字还要放大,但这里我们尝试换一种思路来处理这个需求。

 

图片

▷ 原图的字号我们保持不变,把颜色重新调整一下。通过更简明、醒目的方式,让其传播信号的能力更强,从而达到客户的真实目的。

 

 

图片

▷ 除了颜色上的调整,也可以通过对文字的重新布局,达到“字要大”的需求。

 

图片
▷ 上面第一张图是我在网上找到的一个案例,但因为它的行距和字距相近,所以让人阅读起来非常困难。我只是在它字号不变的基础上调整了字距,这样看起来信息就清晰了很多,相应的传播的信号也有所增强。

图片

以上两个例子虽然都没有直接按照需求把字放大,但同样能达到客户的预期,因为通过这些变化,我们实现了更醒目,传播信号更强的目的。

 

 

图片

除了字要大,“没有品质感”应该也是让各位设计同学经常挠头的反馈了…按照上面所讲,我们来尝试翻译下这个需求。

▷ 品质感本身是一个比较模糊的、虚拟的、对设计作品综合性的评价。可以从两个方向去理解,“品”一般是指物体的品相、细节,而“质”则代表物品所传达出的感受、气质。

 

图片

▷ 我们来看一下大众比较认可的具有较高品质感的苹果产品的页面设计,通过加入一些光影以及渐变、材质,使产品看起来更加真实、细腻。这也是非常值得我们借鉴的。

 

图片 
 
▷ 通常我们在logo提案中,会给甲方展示一些logo的样机贴图。这样能让客户更直观的感受到logo的具体应用效果。但如果样机的材质不够真实和细腻,那么很有可能导致提案的效果大打折扣。比如上方的两个样机贴图,我们就能很明显的感受到哪一个更有品质感。

 

 

图片

再来看一个比较常见的客户反馈——“看着不喜庆,想用大红色”。一般情况下,如果按照这个诉求直接调整,可能会影响整体的美观性,这个时候我们是不是可以尝试换一个同色调的其它颜色呢?

图片 

▷ 按照客户的要求调整后,虽然看起来有一些喜庆的氛围,但画面显得不透气,并且也和主体的颜色类似,造成画面没有层次感。

图片 
 
▷ 我们换成了同样具有热闹属性的黄色,不仅能衬托主体,也能传递出热闹的氛围,并且提交后,客户表示符合预期,非常满意。

 

 

图片

图片  

这是因为,虽然在各位设计同学眼中,我们使用的是不同的颜色(它们唯一的共性是暖色,即使在简版的潘通色卡中,暖色就有上百种),但是很抱歉,它们在客户这块儿,可能统一都被称为是“大红色”。 

 

 

图片

所以,当客户表面上在说要喜庆、要大红色时,我们可以尝试进行需求的翻译,其内在的诉求可能是想传达温暖、亲切感;也可能是热闹、豪放感…大家可以根据实际服务项目的行业属性、风格特征等做进一步的分析,灵活运用。

 

 

写在最后:

图片

 


作者:大目

转载请注明:学UI网》需求太朦胧,设计师如何拆招?

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


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


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




设计师的能力建设(2):思考能力

seo达人

一、为什么设计师不愿意思考?

每个人都有自己的思考,只是有些时候不愿思考。我认为主要有以下几个原因:

1、个人定位错误

B端业务脱离了设计师的生活场景,设计师很难有代入感。日常工作中,主要依靠产品经理的输入。而视觉出身的设计师通常比较感性,不太愿意去了解复杂的业务场景,不想参加需求评审。对于需求内容,设计师容易全盘接受,甘愿只做一名“真正”的设计师。

设计师不愿意被称为“美工”,但是现实中,一些B端设计师就是“美工”的角色。产品经理给了原型方案,设计师按照设计规范润色一下,完成页面搭建就可以了。当你问他为什么这么设计时,要么说“原型就是这样的”,要么说“为了好看”,就是没有自己的思考。

另外新人设计师缺乏思考,就容易盲从。当年我在设计实习时,就是如此。一方面个人的设计能力比较弱,另一方面缺乏思考,找不到破解途径。更多的是依靠其他人的输入,加上缺少自信,更容易听信别人的想法。当时做了一些事情,但似乎又没做什么,导致个人的成长非常缓慢,甚至会形成恶性循环,给自己也造成了很大的精神压力。

久而久之,设计师的存在感就会越来越弱,也会对个人信心造成比较严重的伤害。

2、成就感低

B端产品的页面设计很多都是流程、数据,设计师主要跟表格,表单打交道。做来做去,没什么新鲜东西。时间长了,设计师容易失去工作热情。特别是企业内部的B端中后台管理系统,用户量不大,各方面的关注度不高,用户体验似乎可有可无,设计师就会产生思考惰性,“就这样吧~”成为了主流的想法。

另外设计师如果只关注交互和视觉、受限在设计规范的框架中,设计方案就会流于形式。而产品经理基于业务需求出发,设计方案也很容易被推翻,一遍遍改稿成为家常便饭。如果产品经理还懂点交互,那么在他眼中,设计师对产品就没有多大的帮助,顶多只是帮忙把原型图画的规整了一点。

3、团队氛围差

很多B端产品对设计工作不够重视,不会专门设置设计团队,所以设计师的地位并不高,加之设计流程不规范,产品经理有时会直接扔一个原型方案过来,让设计师照图做设计,连个基本的设计输入也没有。有些产品经理的配合意愿差,设计师主动沟通时,还会遭到奚落或者刁难。

经验不足的设计师碰到这种情况,一时难以找不到解决方法,就容易自我封闭,索性就放弃努力,完全遵照原型执行。毕竟“原型即需求,需求是产品经理的职责,我是遵照需求设计的,完全没问题”。一旦有问题,设计师也有借口搪塞过去。

4、经验主义作祟

经验很重要,可以让设计师从容地面对各种需求。不过有时候经验主义会让设计师想当然地去理解需求,导致设计师犯错。每一个需求看似相同,但是深究下来,用户和场景可能已经发生了变化,原有的设计形式不再适用了。

竞品分析可以帮助我们获得别人的设计经验,不过这种设计经验也不一定牢靠。竞品虽然是相关性较强的产品,但是产品的定位、市场状况、用户和场景还是有所差别的,所以完全照搬竞品也并不是最优的选择。

当我们研究竞品时,最重要的是剖析竞品为什么会这么设计,而不是只看竞品是怎么设计的。

 

二、设计师该如思考呢?

思考的方法有很多。孔夫子曾说过“学而不思则罔,思而不学则怠”。把思考和学习的辩证关系说得很透彻了。

1、思考的深度

“学而不思则罔”,意思是说只学习不思考,就不会很深刻地理解知识的内涵。

当我们接到需求时,产品经理有时候会直接指定一个竞品,建议设计师直接照搬设计内容。对于设计师而言,这样做设计肯定比较简单。但是对于设计师的成长没有太大意义。设计师应该深入思考,理解产品背后的设计原因。这样才能将别人的经验为自己所用。

另外当我们接到需求时,不要立马动手开始画图,应该先要了解需求的目标、需求的用户场景,对需求进行一番梳理,并与产品经理沟通,消除其中的疑问点后,再着手开始设计。

通过不断地深入思考,设计师就能够积累出自己的设计方法论,也可以帮助设计师快速成长。

2、思考的广度

其实狭义的用户体验设计领域并不宽,应该说是比较窄的。设计师局限在自己的专业领域,很难获得持续的成长。而在工作流程上,设计师的需求来自产品经理,如果只依赖产品经理的输入,设计师在工作上必然会非常被动。

设计师想要获得足够的话语权,必须要提高思考的广度。

1)站在用户角度思考

设计师成长初期,注意力更多的是做好产品需求,完成设计方案。这个阶段最大的问题就是“重设计、轻业务”。设计的出发点局限在设计本身,“视觉只追求好看,交互只关注控件或者操作逻辑”。

我刚入行时就是这样,来了需求就做,不会问需求的价值,不去思考用户关注什么,用户场景是什么,主要就是为了完成设计任务。工作精力只是停留在与产品开发讨论控件形式,操作方式、操作流程点击次数等。

实际上设计师应该要了解用户场景,并代入其中,才能真正的发现用户痛点,才能做出更好的解决方案。

2)站在产品角度思考

界面设计是为产品服务的,必然也要满足产品的目标。设计方案只是片面地为用户体验服务也是不可取的。在一些B端产品中,用户体验并不是最重要的核心竞争力,所以用户体验需要服从整个产品的规划,在特定场景下就是要与产品相互妥协,逐级迭代,不能只追求极致的用户体验。

另一方面设计师还要深入了解业务,从设计角度帮助业务提升。比如某个业务场景下,需要给用户提供一些数据指标,为下一步操作提供依据。产品经理或许只是给出一张数据表格。

而设计师则要思考如何进行有效的信息传递,让用户清晰地理解数据逻辑。最终给出的答案可能是,在数据表格基础上,利用数据可视化方式展示数据之间的对比关系,便于用户做出判断。

3)站在设计师角度思考

很多时候界面设计比较主观,每个用户的喜好、感受可能会大相径庭。所以设计师抱怨最多的就是“没有话语权”。领导今天要绿色、明天要红色,仿佛设计永远在变动。最终千辛万苦确定下来的方案,领导一句话可能又要调整。这对设计师而言,绝对是沉重的打击。

设计师除了完成设计方案,还要思考如何将一个“主观”的设计方案,“客观”地表达出来,要让相关人员知晓设计的思考过程,让设计方案变得有理有据,并影响相关人员,获得最终的认可。

一旦设计师思考总结,形成了适合自己的方法后,设计师或许就自然而然地拥有了“话语权”。

 

总结

设计师的成长应该是个老生常谈的话题,思考能力是必不可少的能力之一。

“思而不学则怠”。有些设计师或许并不是不思考,而是深陷困境,找不到出路。思考过后,还需要去学习提升,去主动与他人沟通,寻找解决方案。或许这样才能打通自己的成长之路。


作者:子牧先生

转载请注明:学UI网》设计师的能力建设(2):思考能力

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


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


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




有没有发现,‘点击 ’开始变少而各种手势越来越多了?

seo达人


图片

但随着大屏手机的出现、逐渐追求个性化、高效率的操作等原因,使得不少人开始习惯用“抠边返回”的方式返回上一页:按住屏幕左侧边缘并拖动。

图片

无需特意将手指移动到特定的左上角位置、再点击back图标,随意在屏幕左侧边缘按住并拖拽 即可返回上一页,方便又快捷。

而且现在越来越多的手势,赋予了用户更多的操作自由与使用效率,也让互联网产品的生命力进一步得到了强化,给每个产品的功能体验带来了更大的发挥空间。

图片

下面带大家欣赏一下,各个手势里好玩、优秀的互联网设计案例。

图片

 

一、双指捏合

1、捏一捏就能抱抱?

之前网易(抑)云上线了一个很暖心的交互,在某条歌曲评论上用双指捏一下,就会弹出一个“抱抱”的动画,写下这条评论的用户就能收到一个“抱抱”。

够给那些生拥有悲观情绪(特别是抑郁症)的人求得心灵寄托,带来一些温暖、安慰,表达用户情绪,也降低产品不良风评(网抑云)。

图片

亮点在于:运用「环境贴切」原则,双指捏合的手势动作联想到了现实里的「抱一抱」动作,更符合/表达出抱一抱的情感关怀和暖心情绪。

观点总结:产品不应该是冷冰冰的,应该给用户探索更多的乐趣和温度,通过「用户关怀」助力产品口碑与印象的提升。

 

2、捏一捏就能伸缩?

iOS的相册图片,可以使用双指捏合or分离 即可对图片进行放大、缩小浏览,快速查看图片细节。

图片

免去用户「需要点击图片后,再去缩放」的操作链路,大大减少操作路径。但该交互更多符合国外操作习惯,国内还是习惯采用【点击后再放大】方式放大图片。

亮点在于:用同一个模块兼容多种交互/内容,免去用户「需要点击图片后,再去缩放」的操作链路

要点总结:可思考用一定的快捷操作来满足不同水平的用户需求,允许用户定制常用功能,比如【快捷键、重新操作、默认值等】

 

二、摇一摇

1、摇一摇就能加载内容?

爱奇艺在启动页上的信息展示上做了创新:只需“摇一摇”即可进入对应的广告详情和影视剧播放页,抛离传统的“点击”模式

图片

亮点在于:利用新鲜玩法来吸引更多用户观看广告、影视综视频,减少对启动页内容的抵触情绪与用户流失

要点总结:学会用趣味性交互 / 新的设计手法吸引用户目光,利用新鲜感的驱使引导用户参与,减少流失

 

2、摇一摇才能拍照出片?

喵喵记账有个设计挺有意思的,按下相机拍照后,需要晃动手机来使相片成像,才能看到影像慢慢显现。

通过连接现实生活感受,使成像过程具备仪式感与趣味性。

图片

亮点在于:不仅只在视觉上进行拟物化,更注重与现实中类似的交互操作,使之更具真实感。

要点总结:系统的一切表现和表述,应该尽可能贴近用户所在的环境,比如【用户语言、使用习惯、手势操作、生活联想/隐喻等】

 

三、拖拽

1、一拖就能发送照片?

QQ里的图片发送很有意思,只要按住想要发送的图片并往上拖动,松手即可发送。不用像传统的’先选中图片,再点击发送按钮’,特别方便

对于发送单张图片来说,免去了常规的跳转页面调取相册的多余步骤,大大提升操作成本

图片

亮点在于:利用手指的黄金操作热区,赋予更加快速、便捷的操作方式,大大减少行为负荷

要点总结:对用户重要、常用的功能可以设置「快捷操作」,提升操作效率

 

2、头像还能拖出来玩的?

在即刻的个人主页里,可以随意地拖拽、甩动自己的头像。松手后头像会根据惯性回到原处。期间还带着残影、原来的头像位置会显示一个小红心。

图片

亮点在于:利用头像降低了个人中心带来’冷冰冰’的感觉,丰富产品的可玩性与互动性

要点总结:设计有趣的隐藏彩蛋,能给用户带来惊喜并有效拉进之间的距离

 

四、双击

· 哪里需要点哪里?

早期在抖音上看视频时,点击或长按屏幕上的任何位置都会显示【爱心图标】与【操作浮层】。

大大减少用户的操作成本(手指与目光的移动),突显产品的个性化服务。

图片

 

2、双击就能控制弹幕?

B站作为国内「视频弹幕」的始发者,它的用户喜爱程度与操作频率也是极高的。因此只要两个手指双击屏幕,就能快速开启或关闭弹幕。

用户可随时随地开启或关闭弹幕,无需特意找到右下角的固定入口进行操作,大大减少操作成本。

图片

亮点在于:免去用户需要点击特定区域的操作负荷,增加产品操作的舒适与自由度

要点总结:系统状态可见性:让用户知道【自己在做什么、处在系统的什么位置等】,并做出适当的反馈

 

五、滑动

1、用标尺来控制数值?

Florence里的标尺设计得很有意思,通过第一人称下的镜头视角,让用户感知当前标尺所对应的人物清晰程度,以此来控制标尺位置。

避免用户掌握、控制不了合适标尺的位置,提升选择效率

图片

亮点在于:提供参照物可让用户有直观的决策依据,减少操作成本

要点总结:任何让用户更改/选择的地方,都应该明确地传达出预览效果

 

2、用拖拽来控制人物动作?

Florence是一款‘模拟叙事’小游戏,里面很多的交互动作都模拟了真实生活:

比如【刷牙】,需要左右滑动屏幕来模仿真实的刷牙动作;再如【做饭】也需要滑动平底锅来模仿炒菜动作。

图片

亮点在于:利用交互动作来推动情节的发展,让玩家有真实的代入感,提升游戏的趣味性。

要点总结:模拟真实生活/环境的设计,能有效提升用户的理解能力、产品趣味性

当然还有iOS微信上的‘删除确认’,在原有的内容基础上表达对用户的二次确认,避免用户手误造成操作失误,减少不必要的损失发生

图片

 

六、隔空手势

华为Mate30pro 有个「隔空手势」的交互,可以在距离屏幕20cm-40cm内进行手势操作,如隔空翻页、上下滑动、隔空截屏等。

提升手机的使用体验与操作效率,特别是边吃东西 边玩手机(追剧看小说等)

图片

还有优酷HD上线了一个黑科技交互【隔空手势】,可隔着屏幕用手势做各种操作

如「播放/暂停、全屏/半屏、快进/退15秒、亮度调节、音量调节」等操作,让用户不点触摸屏幕就能操作视频。

图片

亮点在于:让用户解放双手,无需手指触摸到屏幕即可控制手机,可减少很多卫生问题与操作成本。

要点总结:学会利用新技术来满足更多、高层次的用户诉求,通过一定的设计方式来满足不同水平的用户需求。

 

– END

最后,再酷炫再方便的手势,最多也只是锦上添花、起方便快捷的作用而已,不可能完全替代‘点击’的位置与作用。

正如正文所说:手势交互只适合用对业务重要、用户常用的场景中,可以起到四两拨千斤的,切记不可为了酷炫而随便添加。

以上老和对【手势操作】的一些小总结,觉得认同的麻烦帮我【点赞/在看/收藏/转发】,写得不对的请轻点喷~


作者:和出此严

转载请注明:学UI网》有没有发现,‘点击 ’开始变少而各种手势越来越多了?

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


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


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



日历

链接

个人资料

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

存档