首页

灵感 |「拼贴艺术」连接现实与过去的大门

seo达人



拼贴艺术(Collage)

图片

 

大意是将纸张、布片或其他材料贴在一个二度的平面上,创作出一件拼贴作品。拼贴艺术广泛运用在现代传媒中,比如海报设计、封面设计、视频等等,用于表达冲突、异同、隐喻等等,这种破碎而藕断丝连的艺术形式,在同样破碎的互联网日常中得到了认可。

让拼贴艺术火起来的正是毕加索「有藤椅的静物」见下图,拼贴艺术非常适合开脑洞,把无关的事物拼合在一起,寻找新的意义,因此被广泛用来表达个人艺术想法。

 

图片

毕加索「有藤椅的静物」

 

 

分享一些

让你脑洞大开的优秀拼贴作品

图片

图片

图片

图片

图片

图片

 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

图片

图片

 

图片

 

图片

图片

 

图片

 

图片

 

图片

图片

图片

图片

图片

图片

图片

图片

 

图片

图片

 

图片

 

图片

图片

 

拼贴艺术也常用于表达个人艺术思维,比起手绘需要深厚的基础,拼贴艺术门槛更低且更注重思维的过程,找到合适的素材来表达自己更重要,需要注意处理素材的形态颜色等,才能设计出更成熟的艺术作品。

 

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

作者:修先森

转载请注明:学UI网》灵感 |「拼贴艺术」连接现实与过去的大门

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

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

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

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



设计师如何在逆境中成长?

seo达人

#1.掌握标准化体系建设


熟练掌握主流平台、载体和终端的设计规则玩法,对于一个设计师来说是极为重要的能力。有些设计师工作多年,对设计标准化的建设还是一窍不通,更别说去定义基础层规范了。
“标准化建设涉及到品牌愿景、设计原则、视觉体系(设计概念和视觉语言)、组件系统等,这也是设计师之间的能力区分点之一。”
图片
标准化基本框架
早期大家可以从基础层慢慢学习了解,先去熟悉各家平台设计标准化搭建思路,然后从基础规范搭建开始,最后到顶层设计语言的构建,最终慢慢掌握设计标准的整体建设。
所以想进去大厂这一步大家务必要认真思考和学习掌握,因为目前很多大厂招聘信息都有这个招聘条件要求。

 

#2.锻炼多元化设计技法

图片

对现在的主流趋势是否有了解与掌握,能否将其运用到项目设计中。这个点也是考察设计师手上功夫能力。如果你在技法层面过于单一,那么现在就要开始去弥补这块短板,开始做打卡练习。

1.杂志化设计风格是否掌握,杂志设计理念与思路,表现形式等。

图片

 

2.极简设计风格

图片

 

3.三维技法风格

图片

 

4.轻UI设计风格
图片

 

5.轻拟物化设计
图片

上面的风格技法只是抛砖引玉,其实还有很多,我们只需把主流的平面技法掌握了,其余每年新趋势可以去了解和学习,能在项目中应用起来,体现你的实力。

 

#3.掌握设计方法流程

图片
设计流程方法,是看不见摸不着,是设计师的核心能力。那么在前期如果这块比较薄弱,大家可以去多了解一个项目设计流程,设计风格推导方法,把这些了解与掌握并且能应用到项目,可以形成你的知识体系。
那么通常一个设计流程该是怎样的?
图片
这是一个基本的常态化设计流程,当然,会根据项目的不同,而发生变化。如果是做一些前瞻性研究设计,那么这个流程就不合适。所以流程只是一种工作方法,需要大家掌握并能灵活的应用。

 

#4.掌握项目规划能力

项目规划对更高阶设计师来说是必备能力之一,因为这时候你不再是纯执行,你需要自驱做一些项目之外的事情;比如一个课题研究、一个自发性0~1项目探索规划。
当然规划只是其中一项能力,还需要推动执行到落地、资源协调、汇报提案等,这就是一个高阶设计师必备能力之一。
图片

比如上面就是一个项目简单规划排期,当然这只是大框架,偏整体性排期规划,涉及到更细的排期,每个阶段有详细排期跟进,如果还没做过规划和排期的伙伴可以提前练习尝试。


图片

 

原文地址: 功夫UX(公众号)
作者: 功夫UX

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

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

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

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


这组3D素材定能提升你的UI作品质量

seo达人

先看作品 

一起看看作品欣赏,感受这些小元素在设计中的呈现效果。

作者:Alzea Arafat

更多作品:https://dribbble.com/alzea/shots

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

以上仅为作者部分作品,更多作品可访问作者的 Dribbble 查看。

 

素材  分享 

以上作品是不是还不错,为了方便大家学习交流,作者特意分享了自己作品中的部分素材文件。文件格式为 figma ,大家可以下载自行研究学习。

下载地址:https://www.figma.com/community/file/890095002328610853

图片

部分素材截图示意

d

附加  分享 

文末再给大家分享一组超级可爱的三维字母设计素材,有点像是长气球拉伸出来的感觉。

这是一个三维艺术字体素材平台,拥有多种不同的三维字母风格,满足大家不同的需求,平台提供免费和付费两种选择。

图片

链接:https://www.artify.co/3d-lettering

a

小结 

素材不在于多,而在于质量,希望本期的分享能够给大家带来帮助!后续也会继续给大家分享更多的素材资源。

素材可以在短时间内提高我们的工作效率,但是却不是长久之计,能力的提升离不开磨练。独立完成设计才能不断提高我们的设计价值,希望大家能够养成动手的习惯。

 

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

作者:黑马青年

转载请注明:学UI网》这组3D素材定能提升你的UI作品质量

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

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

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

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



如何制定规范,太强了!

seo达人

#1.Airbnb Design Language

图片

airbnb 设计团队构建一套设计语言和执行路径的思考,非常值得大家学习。他们还谈到通过原子思维构建基础层规则时的一些利弊,以及如何打破这样的规则,建立一个可发展性的基础层组件,拓展应用到全局。

图片

图片

地址:https://airbnb.design/building-a-visual-language/

 

#2.Starbucks Brand Guide

图片

星巴克品牌视觉指导手册,里面涵盖一些字体、排版、摄影、插画、色彩等一系列标准。星巴克设计我一直很喜欢,包括他们家的周边产品设计都是非常有设计感。

图片
地址:https://creative.starbucks.com/color/

 

#3.HarmonyOS 

图片

华为的鸿蒙OS系统,最接近我们的产品的设计语言,强烈推荐,我想设计师也是最容易看得懂的设计系统。

图片
算是媲美Materials Design的一套国内权威性设计语言系统,设计体系单元拆分很详细。

图片

地址:https://developer.harmonyos.com/cn/design

 

#4.Salesforce Lightning 

图片
Salesforce Lightning 设计系统创建于 2015 年,为在 Salesforce 生态系统中设计企业应用程序建立了原则和最佳实践。它不仅仅只专注在设计上,又让设计师专注于用户体验、交互和设计流程。
图片

地址:https://www.lightningdesignsystem.com/

 

#5.Spectrum Design system

图片
Spectrum 自 2019 年开始向公众开放,它定义了 Adobe 应用程序系列的通用体验,非常值得大家去了解下,涵盖了他们从顶层原则、到基础层原子组件搭建以及设计模式应用。
图片
地址:https://spectrum.adobe.com/

 

#6.Fluent Design System

图片

Fluent 是一个开源的跨平台设计系统,可为设计上和开发提供创建引人入胜的产品体验所需的框架——包括可访问性、国际化和性能。

图片

地址:https://www.microsoft.com/design/fluent/#/ios

 

#7.Carbon Design System 

图片

Carbon designsystem 碳原子设计系统,是IBM旗下针对B端出的一套网页端设计规范语言,里面详细罗列出设计语言基础层定义思路,设计组件化定义以及后面的设计模式及资源。

图片

图片

一些网格间距系统的规则定义
图片

地址:https://www.carbondesignsystem.com/

 

#8.Audi Design System 

图片
Audi Design System 算是一套成熟设计系统,里面该有的都有,品牌主张,价值观,以及到基础风格的定义,非常值得借鉴。

图片

图片

图片

图片

原文地址: 功夫UX(公众号)
作者: 功夫UX
转载请注明:学UI网》原来大厂都是这样去做规范的,太强了!

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

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

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

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


拯救没思路系列,试试提取风格

seo达人


图片

 

1.水墨风

图片

首先我们先看这两张图,传统的水墨风能看出来虽然设计方式不一样。

图片

但却是用的同一种风格或者说是技法,利用墨迹塑造出文字、图形或者一种优美的形态。

图片

我们可以提取出这样的风格特点,使用毛笔墨迹简单演示下这种做法。

图片

是不是很简单,将风格提取出来会有效的提升设计效率,拯救你的没思路。

 

2.酸性风

图片

接着我们再看这两张设计,也是现在很流行的酸性风格,提取这个风格的特点。

图片

流体、哥特文字、高饱和度渐变、金属或水印材质以及网格等,我们就可以做出类似这种风格特性的海报来。

图片

图片

 

3.赛博风

图片

赛博风格的特点提取在于夜景充满各种LED霓虹灯光和牌匾的高楼大厦加上一些高科技例如显示屏、虚拟场景等于现实的交错。

图片

将这些特点提取出来就可以做出这种风格特性的海报来,怎么样,是不是比想的头秃容易许多!

 

[优化输出图像]

 

图片

当听说过几天要七夕,我想男生们应该会集体跑到厕所,拿出比脸还干净的钱包时,众人扎堆哭晕在厕所里。

并掏出省吃俭用的一张撕成6小半的厕纸对着马桶祷告上天能晚一些到来!(重点数学题要考:请问一张130X190mm的厕纸是如何可以撕成6半并能在擦腚的同时还不碰到手指呢?请在留言区回答!)

 

案例分析

最后用这个案例来实(提)操(醒)演(礼)示(物)的时候到了!

图片

版式:人物只占据画面中的一小部分,主体都以文字作为图形塑造出场景来形成与人物之间的一个对比关系。

图片

对比关系:就是原本同样大小的物体与文字,尝试放大文字,缩小物体大小,并让物体与文字之间的内容有一定的连接,这时候就会形成非常鲜明的对比关系,这样的对比关系会造成视觉上的冲突和层次感。

图片

空间:画面中看上杂乱的文字其实都有拉出一定的远近与左右距离,以此来展现空间的丰富和律动感。

图片

质感:放大图片可以看出来,文字的质感的是由地面阴影、光度、文字遮挡、明暗的过度造成的。

图片

 

实操过程–七夕海报制作

结合刚才所分析的版式、空间、质感进行提取风格,我们就能得到的同类型的七夕节海报。

图片

备注:文章底部,原文连链接,有此视频凑操作步骤可观看。

图片

 

原文地址:修先森撩设计

作者:修先森

转载请注明:学UI网>拯救没思路系列,试试提取风格

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

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

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

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



项目总结|你知道吗?用户转化是可以被设计的

seo达人


01.前言

如今,随着市场竞争日益激烈,“转化难”也变成大家特别关注的问题,其实需要提升用户转化的场景很多,每个场景都有影响用户心理的关键因素,那么设计师如何做,才能助力用户转化呢?下面结合省钱会员项目,聊聊如何抓住用户心理,从而提升用户转化。

 

02.背景分析

最近这段时间,我们引入了很多新的运营玩法,跳出之前单一的营销方式,将玩法串联。我们通过省钱会员卡,打造运营体系的玩法矩阵,提升用户转化;

省钱会员卡是什么呢?是对0元购、百亿补贴以及100+的生活权益进行资源整合;

用户敏感点:根据以往“免费领”运营活动的数据,了解到用户对价格很敏感;

 

03.目标用户分析

在做用户转化之前,我们必须找到精准的目标用户并对其进行分析,这样才能精准抓住用户心理,做到更好的转化。

下面我们可以从用户不同阶段的转化进行分析,其中用户分成三类,分别是强需求用户、潜在型用户以及弱需求用户;阶段分为三个节点,分别是激发兴趣、视觉感知和触发行为;

首先是强需求用户,用户在视觉感知信息触达阶段,需求已经满足,完成转化;其次是弱需求用户,这一部分用户,不管如何刺激,都难以满足,所以这两类用户暂时先不考虑;而目前阶段最主要考虑的是潜在型用户,这一类用户在视觉感知到触发行为的阶段,我们需要抓住用户心理,从而促成转化。因此目标用户是视觉感知到触发行为这个阶段的潜在型用户;那接下来需要怎么做呢?

图片

 

04.思考模型

在设计的过程中,我们用到了设计策略模型“CST法则”,什么是CST法则?“CST法则”是以“视觉影响感知,感知影响行为”作为基础理念,以“抓住感知,强化兴趣,触发行为”作为核心内容的设计方法。下面我们将以这个模型来分析,设计过程中抓住哪些心理因素的点,来促成用户转化的。

图片

 

05.影响用户心理因素

我们通过“CST法则”得到了促使用户转化的三个点:抓住感知、强化兴趣、驱动购买。我们在这三个点上设置了多个用户心理影响因素,从而促使用户完成转化。

 

· 抓住感知=抓住“优惠”感知

首先抓住用户的权益感知,以省钱卡核心内容的“权益优惠”作为与用户有共鸣的元素,更容易抓住用户的感知。我们在这尝试做了ab版的两种表达方式。图中对比之后发现,左图中将优惠提炼出来,更能突出权益的优惠力度,聚焦用户注意力,而右图相对来说,优惠感知更弱一些;

图片

在会员购买页中权益模块上,也做了ab版的尝试,对比一下:清晰度上,左边的去掉多余的装饰元素,将权益信息降噪展示,调理清晰,让用户有章可循;匹配度上,用色彩来区分权益分类,让用户快速浏览的时候,更直观清晰的感知权益的构成,也与用户使用场景(娱乐、影音、餐饮出行等)多样性的预期相匹配; 

图片

 

· 强化兴趣点=强化价格敏感点

我们以用户感兴趣的“价格”作为强化的视觉元素,提升用户的兴趣点;其中在会员补贴专区筛选出超值产品,价格补贴前后的对比以曲线来呈现,强化价格的变化;右图详情页中,对会员模块的价格进行单独设计,从而来强化会员价格的氛围感;

图片

 

· 驱动行为=驱动购买

最后从影响用户心理的因素:心理账户和从众心理两点进行分析;

何为“心理账户”呢?

“心理账户(Mental Accounting)”是芝加哥大学行为科学教授理查德·塞勒(Richard Thaler)提出的概念。心理账户也是一种有趣的现象。简单来说,人们会把对物品分类的习惯,用于钱和资产上,在头脑中为他们建立各种各样的账户。比如说,我们会把买生活用品的钱放在生活账户,买礼物的钱归到情感开支账户,旅游的钱归到享乐休闲账户等等。那么心理账户的存在,不仅影响着投资决策,也在日常生活中的各种消费决策产生重要的影响;

比方说打扑克,以5元为赌注,然后手气爆棚的一路赢了500元,但是最后都输光了,那么在人们心理是输了多少钱?这时候在人们心理上只感觉输了5元钱,但其实应该是505元,因为人们没有把意外得来的钱归为自己财产,同时对意外得来的钱敢于去冒风险。

我们要善用“心理账户”,创造一笔新的心理账户,让用户心甘情愿的掏钱。其中在优惠购主页,用户进入页面后会有一笔补贴金弹窗,在这里补贴金弹窗就是我们说的“心理账户”。红包设计了3s自动收下的提示,给用户营造紧迫感的氛围,最后收下红包的动作上增加了小动效,让用户有清晰的红包收下的感知;

图片

我们还要善用用户的从众心理。项目中,我们在会员购买页的主视觉区域,增加了“xx几分钟前已成为会员“的气泡提示,来引导用户操作,暗示用户产生购买的行为;最后在页面底部,增加了大家问的模块,消除用户的疑虑,那么在多次刺激后,有利于用户做最终的决策,引导用户下单,并达到用户转化;

图片

 

06.结语

做转化,最重要的就是抓住用户的心理,深挖影响用户心理的关键因素,才能拥有更高的转化。

在设计过程中,我们要在不同的使用场景和节点上,通过分析目标用户以及影响用户的心理因素,将这些进行设计串联,让用户完成一系列的体验,从而最终达到设计目的。

 

参考内容:

理查德·塞勒(Richard Thaler),芝加哥大学行为科学教授提出的“心理账户”理念;

https://baike.baidu.com/item/%E5%BF%83%E7%90%86%E8%B4%A6%E6%88%B7/2369306?fr=aladdin


 

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

作者:环铁艺术家

转载请注明:学UI网》项目总结|你知道吗?用户转化是可以被设计的

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

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

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

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



B端交互设计在产品需求全周期中的质量保证

seo达人

为什么需要设计质量保证

在设计中,最常见的质量保证方式就是在产品验收环节进行「设计走查」。不过因为是上线前的最后验收环节之一,经常会出现因临近上线时间,且交互和UI类的问题在修改优先级中一般都是较低的,最后只能修改部分设计上的「bug」,其他只能舍弃或放入永远不会开工的下次迭代再改。设计师在各种来回扯皮之间筋疲力尽,看不到设计价值在需求中的体现,各种“这里设计不好”的锅一不小心也接了一堆。更严重的问题在于,用户得不到更优秀的体验,轻则耗费更多时间,重则放弃使用功能。不管哪种结果,对于产品整体满意度都会有不同程度的影响。

由此可见,设计质量保证仅靠最后临门一脚的设计走查远远是不够的。在需求全周期中各个环节都可以加入对设计质量的把控(Design QA)。Design QA的概念来源于研发流程中测试环节。质量保证缩写为QA(Quality Assurance),是产品交付流程中非常重要的一环,一般就是大家了解的测试工程师的岗位职责内容。在这个环节中,测试人员需要对产品功能进行仔细认证,确认是否满足了产品需求并且可以正常使用。但与测试不同,设计QA须加入到产品需求全周期的各个环节中,最终形成与产品设计并行的一个流程,才能有效保证质量。

 

设计QA实施步骤和方案

步骤1: 需求分级,确定是否需要设计QA

要保证设计质量,在B端设计中不是易事。我们经常会听到:

· “这个功能能用就行”:公司/团队不理解或不够认同设计价值是什么,不明白为什么体验会在每一处未还原的设计稿上慢慢丢失

· “这还原的不挺好,和你设计稿我看一样啊”:非专业的同事无法分辨设计稿与研发实现稿的细微差异

· “没时间改了,下次再说吧”:设计质量保证低于功能质量保证,或者团队必须在有限的时间交付需求

 

在接到需求后可以根据以往经验或与产品经理的沟通,确定本次需求设计等级:

  • A:公司级和部门级重点、设计周期长内容多、设计可沉淀输出的内容多的需求
  • B:正常迭代、量级一般的需求
  • C:时间紧迫倒逼排期、无前端研发资源、少量调整、评估不需要设计的需求

在确认等级后,作为设计师可以有一定的心理预期。对于A类可能各个环节都需要详细的进行QA,而对于C类有可能连设计走查都没有预留时间,只能靠后续线上的直接验证了。后面的几个步骤可针对不同的等级选取全部或部分进行实施。

 

步骤2:交互设计中,考虑极限下的正确展示

B端交互设计中,很重要却经常制作不到位的就是极限情况。看起来都是各种表格,简单的给定一个宽度即可,但在上线后经常发现,填充了真实商家数据的表格,总有意想不到的错位折行和重要信息截断,用户的可阅读性降低。

图片

                                             左:重要信息被截断;右:折行错位

 

步骤3: 设计评审与交付,交互说明与UI标注一体化

在完成制作后一定要进行评审,对功能完整性、页面流程、页面文案、组件特殊交互逻辑要求、交互可实现性与开发成本进行评估。项目相关利益人都需要参加,尤其是测试同事需要参与评审,保证后续测试用例编写质量。在交互与UI全部评审完成并通过后,交付给研发的设计稿最好可以做到交互说明文档与UI标注一体化,方便研发同事查看。避免在交互说明与UI标注中来回切换,导致交互或UI细节遗漏。这里推荐一个sketch插件:NoteBook Pro (需要付费,lite版大约¥76),方便在sketch中添加交互说明标注,在上传到可以在线查看UI标注的平台,比如Zeplin/Relay等。

图片

交互说明+UI标注在一个页面上同时呈现

 

步骤4: 参加测试用例评审,确保测试用例涵盖所有交互细节

一般来说,交互稿与UI稿交付给研发同学后,设计师就要开始忙下一个需求了。直到通知设计走查前,设计师暂时不会再随时跟进需求进展,而是交接到产品或项目经理手中。而在这个从设计稿到研发实现的过程中,设计师也需要在关键节点参与其中,确保设计质量。测试用例是其中一个设计师可以参与的环节。其实有时候很多交互文档中的内容会被用作测试用例,所以需要再次和研发与测试同学对齐所有交互内容,保证交互设计内容不会在此阶段被降级甚至直接去掉。

 

步骤5:设计走查,输出并记录结果

此环节很重要的一点就是走查文档或记录。未完成修改的内容,建议研发给出一个解释,并以文档的方式记录下来抄送给相关利益人,标明可能带来的风险。同时尝试与产品或项目经理沟通,推动迭代优化的具体时间,避免「下次一定」的无效承诺。

 

总结

设计QA是贯穿整个产品需求全周期的设计流程,在以往的点状设计走查之外,需要与团队上下游通力合作沟通,才能确保优秀的产品呈现在用户面前。

图片

参考文献:

https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

https://www.nngroup.com/articles/quality-assurance-ux/

https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

https://owl.tools/notebook-sketch-plugin

 

原文地址:京东设计中心JDC(公众号)

作者:唐朋博、李小猛

转载请注明:学UI网》B端交互设计在产品需求全周期中的质量保证

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

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

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

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



这应该是近几年,见过最牛逼的网站,可以按趋势风格找图了!

seo达人

图片

相信大家经常有这个问题,平时看了很多干货,收藏了很多干货网站,但是每次找灵感都还是很困难,甚至是大海捞针的感觉,那么有没有一个地方,可以按照风格、字体、样式,甚至设计手法,来找灵感呢?今天我找到了这个神器,分享给大家。星球里素材库里还有更多素材供大家发掘使用,帮助大家更好地做设计。

w

01.  先上神器 

图片

 比如我最近在一个网站,想看看一些大背景图片的灵感图,那么直接点击顶部Big Background Image这个按钮,它就自动帮我把这个风格灵感筛选出来了,是不是很方便。

图片

 最近潘通新发布的2021年配色粉彩,我也想收集一些关于粉彩的设计灵感,那么点击顶部的按钮,他会自动的帮你筛选出很多。

图片

 筛选后的灵感都是最新的,而且数量也很多,特别的方便。

图片

 比如我想找一个极简的设计,一些黑白设计,同样可以快速筛选出来,是不是很方便高效。

 

这个网站里有很多高质量的灵感图片,已经帮大家下载好了,需要的话可以添加叮当猫回复“图库”领取,已有叮当猫的无需重复添加。

图片

图片

长按扫码添加叮当猫回复:图库

w

02.  怎么使用 

图片

 这个网站用起来很简单,首页进入后默认是最新的灵感趋势,不得不说godly这个网站主编审美非常赞,每个设计都是最新的设计方向和灵感。

图片

 包括最近流行的液态水滴效果,都是高清大图演示,你根本不需要点进去网站,直接这里就可以看见最新的设计。那么我是怎么运用这个网站的?

 

1.根据风格找图

图片

 这个是最常用的,点进去首页,下面一行标签,这里面标签就是各个设计风格关键词。当然英文不好,你可以用谷歌自带的翻译功能,翻译的明明白白。

图片

 比如我想找暗黑风格的,那么点击黑暗标签,就都是黑暗风格的页面设计。

图片

 比如点击网格,那么出来的都是非常有设计秩序的,网格感非常强的设计,随便点击一个进去看看。

图片

 模块感非常强,如果你今天想做一个杂志感,这种布局就可以参考。当然最强大的是导航里面有个More。

2.根据字体找图

图片

 这里是全部分类,里面有根据设计风格分类,比如大背景图、黑白、网格、粉彩等风格。同时也有按照流行字体风格分类,比如Helvetica Neue、Roboto等知名字体。同时分类还有各种数字海洋、亚马逊等,总之非常丰富。我们来试试。

图片

 我点击了Helvetica Neue这个分类,那么就看见了全部使用Helvetica Neue字体的网站,每个网站的字体运用细节、排版和版式都可以参考。

图片

 都是特别好的案例,而且你能看见这些字体都是搭配什么样的字体在使用。

图片

 点击Netlify就都是非常抽象的图形风格,总之这个网站有很多点值得我们去探索。

3.根据图片找图

图片

 比如最近做一个需求,想了解下孟菲斯风格,那么我找到了这张图,都是视频录制好了,非常高清。

图片

 点进去都是高清,并且带有动态演示,并且每个页面都是高清大图。

图片

 页面的缩略图非常大,因此你可以很轻松找到你喜欢的图并且更好的查看很多细节。单击一个图片就可以看见更大的尺寸,点进去可以看见这个网站的全部标签。如上图,我想看看3D风格网站怎么设计的。

图片

图片

 点进去后,可以看见这个设计的详细大图,同时还可以看见很多标签。这个标签代表它在的分类,随便点进去一个分类,就可以看见全部类似这样的设计。因为这个灵感是3D,因此我点了3D,然后进去都是一些很酷炫的3D灵感。

图片

 质量怎么样?你们自己说了算,每个灵感都有完整的高清效果,还是动态的。

图片

 比如这个,是一个动态的3D组成的英文单词。所以这里可以基于一个图片风格找很多风格。这个网站的魅力能让我们更加专注于根据主题来看我们想要的东西。

w


原文地址:我们的设计日记(公众号)

作者:sky
 

转载请注明:学UI网》这应该是近几年,见过最牛逼的网站,可以按趋势风格找图了!

ps教程 | 这个PS技巧,用到海报中真赞!!

seo达人

图片

 

先来看看下面的海报,给人的感觉就是梦幻高级,满满的质感扑面而来。

 

深色的背景图配上发光的文字效果,有什么小伙伴会想,为什么我没有这么用过。

图片 
其实同样的表现效果,只要设计师的思维不同,那么呈现的最终效果也是大不相同,感觉也会千差万别。 
下面为大家演示一下如何在PS中实现这种帅气的发光效果。   
 
图片  

第一步 >

首先把图片拉到PS中,新建一个纯色图层,填充纯黑色。然后在纯色图层上添加蒙版,选择柔边画笔涂抹,用黑色画笔只涂抹中间的区域,这样四角就会更暗,这样的处理的目的就是想让图片的质感进一步加强。
选择文字工具打上相应的文字,选择合适的字体,尽可能不要选太细的字体,那样发光效果不是特别好。

图片

图片
 

第二步 >

新建两个纯色图层,一个偏粉紫色,一个偏蓝紫色。
重复黑色图层的步骤,为两个图层添加蒙版,然后用柔边画笔涂抹,光的效果出现了两层,扩展的范围一大一小,这样会显得更真实。
图片
图片
 

第三步 >

复制一个文字图层,分别都添加上外发光的图形样式。
在混合模式上选择滤色,会使光更亮。扩展和大小的参数一大一小,围绕着文字的外发光效果就会呈现远近的层次感。另外近的光源尽可能更浅一点,更亮一些。
图片
图片
图片
 
 
也可以索性做一些小球效果,用刚才的方法去实现,陪衬效果甚佳。
图片 

最后再次贴上最后的海报完成图。

图片

设计虽没有近路,但可以少走弯路  
 
原文地址:诗人星火宇宙(公众号) 
作者:星火君 
转载请注明:学UI网》ps教程 | 这个PS技巧,用到海报中真赞!!

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

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

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

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


优化教程 | 没想到,改完以后的画面真的好了许多!

seo达人



图片

作业问题

我们先来看一下有哪些问题:首先就是模块和首屏的叠压不是很好;文案图标的处理不是很好,给人一种拥堵不整齐的感觉;图片可以做一些简单的处理手法,使其更加灵活。

图片

 

第一步

我们先将下方模块和首屏之间拉开距离,之后填充同色系的蓝色作为最下方背景的颜色,之后将图片上方饱和度提高,再把产品和模块边缘处进行抠图,做出破图的视觉效果,复制多个泡泡增加画面的氛围。

图片
 

第二步

将文案简单编排拉开间距放到画面当中,这里注意一下原稿的图标信息我没有放在文案组下方,当我们文案很多的时候不要都放在一起,应该学会合理的分配空间。

图片

 

第三步

这里我另起了一个模块和当前模块进行连接关联,有些小伙伴可能感觉不是双数的图标很难做的规整,其实大家应该换个思考方式,先把图标规整的排列后,空余的负空间可以通过哪些元素进行填补。

图片

 

最后

添加装饰线条增加细节,并对图标部分线条进行替换颜色的处理,处理好整体的细节画面就改好了,我们一起来看下前后的对比吧!
图片
相较于原稿,优化之后画面看着更加清爽干净,画面的透气性也好了许多,整体画面的质感提升了许多。  
 
原文地址:三个小美工(公众号)  
作者:Three  
转载请注明:学UI网》优化教程 | 没想到,改完以后的画面真的好了许多!

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

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

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

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


日历

链接

个人资料

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

存档