首页

了解这9种交互机制,不怕跟开发相爱相杀了~

seo达人



1.删除机制

删除逻辑是怎样的?

无法找回:是否需要二次确认设计、以及展示删除后结果)

可以找回:是否需要展示如何找回的说明?

删除对象:

是单个、批量还是全部?

删除方式:

手动删除:点击删除还是滑动删除?

自动删除:何时开始?是否展示剩余的时间

删除状态:

包删除成功提示、删除失败提示、删除过久的提示

图片

 

2.中断机制

数据的处理是怎样的?

信息/逻辑是否会发什么变化、是否自动保存进度/记录、是否影响后续链路里的逻辑处理

中断方式:有意、无意中断的处理都是怎样的?

中断程度:后台继续运行还是彻底退出后台?

软/硬件变化时的处理:

包括耳机的连接与切断、电话的来电与挂断、网络的中断与恢复

图片

 

3.显示机制

显示是否有边界值?

包括最小值、最大值、到达特定阈值

显示是否有时效性?

内容过期时怎么显示?到达某个阈值时怎么显示?内容不存在的显示?

其他考虑点:

· 显示格式:如日期时间的数据格式:2022.05.01  2022-05-01

· 显示分辨率:各种分辨率下如何显示,最大,最小考虑极致情况

· 显示样式:是否对齐组件?需要统一?是否有差异化设计

图片

 

4.加载机制

加载前中后该如何显示?

包括默认状态的显示、初始状态的显示、加载中的显示、加载过长的显示、加载成功的显示、加载失败的显示、加载为空的显示等等。

加载方式:

手动加载还是自动加载?优先加载哪些内容(文本或图片)?

加载范围:

展示数量是多少?一次性全量展示还是分页加载展示?

图片

 

5.推送(push)机制

push机制:

推送内容说明、全量用户还是局部用户、推送的时间/周期/次数等都是怎样的?

push交互:

跳转:原页面删除、无法进入、push过期时该如何处理?

返回:返回到哪里?

图片

 

6.退出机制

· 当期操作进度、记录是否保存

· 是否需要展示退出说明、原因

· 退出程度

是当前页面、某段流程、退出后台运行、杀死后台、还是手机关机?

图片

 

7.排序机制

· 默认排序是怎样的?正序还是倒序?哪个选项优先

· 排序维度是怎样的?按时间/销量/质量/数量/评分/信用等等排序

图片

 

8.刷新机制

· 是手动刷新:如下拉刷新、点击刷新

· 还是自动刷新:何时开始刷新?是否提前告知用户?是否提前自动保存操作记录

图片

 

9.缓存机制

· 缓存机制是怎样的?包括缓存对象、数量、范围

· 缓存位置是哪?手机本地、服务端

· 缓存的清理是怎样的?自动清除还是手动清除

图片

 

– END

好了,以上就是一些常见的交互机制,希望你在输出交互方案、产品为文档时有所帮助,避免漏掉一些内容,减少和开发的相爱相杀。

图片

 


 

原文地址:和出此严(公众号)

作者:和出此严

转载请注明:学UI网》了解这9种交互机制,不怕跟开发相爱相杀了~

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

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

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

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

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



国风音乐圈 UX 设计总结

seo达人

1. 背景

1.1音乐故事

我大概2011年左右了解到网络上有一种音乐概念叫“古风”,用到了很多民族、东方古典、戏曲元素,创作人员大部分都是业余音乐爱好者或者音乐专业学生,在acg论坛、贴吧、微博、分贝网、yyfc、5sing发布作品和交流。后来有一定影响力的创作团队开始举办线下演出,古风圈开始吸引更多年轻人 。2018年在北京召开中国国风音乐发展研讨会,包括古风圈的墨明棋妙等。国风音乐有更多的可能性,那么它是如何制作出来呢?

 

1.2音乐制作流程

音乐制作从盈利性上分为商业音乐制作和非商业音乐制作,区别在于商业音乐的制作目标之一为盈利;非商业音乐不用做商业用途,制作目标因人而异。

制作流程如下:

图片

1)策划和制作人有区别,制作人除了完成策划的内容,音乐素养更高,会在制作上提出更有建设性的修改意见。策划更多情况下只负责确定制作人员和项目进度跟进。

2)作曲、作词、编曲的先后顺序根据制作人员不同会改变,内部达成共识即可。

3)乐器实录指在录音室录制乐器音轨,非必须环节。如果不选择实录表现,则用音源代替。4)编曲给出的分轨文件就是由音源表现。

5)和声的编写有时是作曲、编曲负责,有时也由歌手发挥,顺序不一定排在主旋律录制后。

6)混音如果涉及同张专辑的多首歌曲,需要母带师介入完成整体调整。

 

1.3用户群体

独立音乐人:包括在校音乐专业学生或者已工作的业余音乐创作者。希望通过音乐表达自我,记录生活,结识朋友,提高演奏及创作能力,因此带有弱社交目的。

音乐团体:社团、乐队、团队、工作室、制作组。

音乐制作委托方:有制作适合自身音乐的需求,包括策划、导演、制片、制作人等。

图片

 

 

2. 痛点及情境

2.1痛点

从制作音乐的契机分为自发制作和委托制作,其中涉及到几个角色:自发制作者、委托方、受托方。

图片

自发制作者(音乐人):

1)音乐人之间缺少了解,难以构建信赖关系
2)很难找到相似风格的音乐人互相交流
3)想找能长久合作做音乐的朋友或团队

 

自发制作者(乐队/社团):

1)想找能长久做音乐的拍档

委托方(企划负责人/比赛举办方):

1)企划对音乐人的特化需求(对风格、完成度的需求)
2)比赛的题材限制,音乐人工种的筛选

受托方(音乐人/团队/工作室):

1)受托方对素材的特化需求(对风格、题材的需求)
2)受托方对企划的信任从何建立(对企划介绍、企划进度、作品数量、作品质量的需求)

 

 

2.2使用情境

一名在校大学生Y在为自己导演的短片寻找合适的配乐,因为周围没有音乐学院,班上同学也没有这类技能,她找到了国风音乐圈这个APP,通过搜索风格缩小范围,随手点进一个音乐人主页去翻阅他的作品和参与过的企划,通过企划推荐又找到了其他的音乐人及团队。Y创建了自己的企划,填写短片的介绍,上传样片。

图片

 

3.竞品分析

3.1竞品优缺点

分析5sing音乐人&腾讯音乐人&豆瓣音乐人&网易音乐人。

图片

 

优点:

1)经营时间久,积累了很多小众音乐人;
2)音乐更新频率高;
3)有比较多的消音伴奏;
4)有beat(一种音乐素材)交易、词曲交易。

缺点:

1)对某些工种分类缺失,导致相应工种曝光度很低,合作时不能第一时间建立信赖关系;
2)最近web端增加了音乐身份筛选,但依旧有些混乱,听众不适合放在音乐人中筛选,编曲和制作人有相似度,但职能完全不同;
3)在申请入驻时,无法选择多个流派。

图片

 

 

优点:

1)下属音乐平台多,可以搜索到很多作品;

2)有词曲出售。

 

缺点:

1)没有促成音乐制作工种间合作的功能(不清楚入驻后是否有该功能)。

图片

 

优点:

1)音乐风格分类很广泛;
2)根据听众关注列表来推荐,能帮助相近喜好的听众找到感兴趣的音乐人。

缺点:

1)部分音乐人自定义的页面布局板块混乱;
2)没有音乐人间交流合作的功能。

图片

优点:

1)网易会推出一些音乐策划项目,促成创作者间合作;
2)网易云音乐个性化推荐增加音乐人曝光度;
3)有创作者社区;
4)有beat、词曲交易。

缺点:

1)对身份的分类太少,只有制作人、作词、作曲、编曲、演唱。

 

 

3.2总结

几个平台对音乐人来说,都没能给出一条流畅的制作链,音乐人签署授权协议后,和平台的联系变强,但和合作者的联系几乎就和听众与之的距离差不多。音乐人有向部分人展示demo或beat的需求,还无法满足。有平台促成社区,效果待观察。

 

 

4.流程及功能

4.1流程

根据第2部分的情境分析出流程如下:

图片

 

选择合作者流程

 

 

4.2功能结构

图片

寻找合作者功能结构

 

 

5.页面展示

故事的开篇:开始寻找合作者

 

 

5.1招募

图片

若已有合作者,可在创建企划/团体时添加成员。发起人有修改企划信息的权限,可以转让企划或退出企划,若发起人未转让直接退出,则企划结束,所有成员都会看到该结束状态。流派风格可以多选,在主页最多展示5项。

 

招募有时限,可以避免太多废弃招募占据招募首页。创建完成后,可以添加已有的合作者为企划成员。发起人可以选择企划来发布招募。

图片

 

动效说明:这里展示的是策划(制作人)点击+号进入创建企划页面的过程。文字出现时配合图标的弹性变化,微微下沉再恢复。切换页面时速度曲线为渐缓。

图片

动效说明:这里展示的是添加已有成员进企划名单。选择工种。选项框展开有弹性变化。选项拉到底时,会有位置偏移再回弹。选好以后的工种滚动入场。

 

 

5.2搜索

图片

音乐人搜索的需求包括按个人、按团体、按作品、按企划。根据音乐制作的流程,得到对个人的筛选条件最主要为工种。按作品筛选的下级筛选条件是流派风格。按企划筛选的下级筛选条件是题材。按团体筛选的下级筛选条件是流派风格、题材。

 

 

5.3标签和身份

标签在搜索、主页展示、作品展示都有着视觉分流的作用。该应用中涉及到的标签包括:流派风格、工种 、题材。

图片

 

 

流派风格标签

图片

 

用户身份按结构分为个人和团体,按需求分为委托方和受托方。

按结构分,个人:策划/制作人/监制、作词、作曲、编曲、歌手、乐器演奏、混音/母带、画师、视觉设计、PV师;团体:乐队、工作室/团队、比赛举办方。个人身份间可以多选组合。团体身份不可和个人身份多选组合。

按需求分,委托方:策划/制作人/监制、比赛举办方;受托方:作词、作曲、编曲、歌手、乐器演奏、混音/母带、画师、视觉设计、PV师、乐队、工作室/团队。

结合两个维度,得到4种身份类型:个人委托方、团体委托方、个人受托方、团体受托方。

图片

以下是关于身份的几点考虑:

 

画师/视觉设计/PV师

狭义的音乐制作本身不包括宣传(如封面设计、海报设计、PV/MV制作),所以画师、视觉设计、PV师等工种视具体情况会删减。

 

乐队

考虑到组建乐队主要为乐器演奏者和歌手兼任作词、作曲、编曲,所以在团体中把乐队单独列出来的,权限和工作室、团队一样。

 

音乐听众

一开始整理用户身份的时候,对音乐听众这个身份的取舍思考过。保留的原因是这个应用主要面向音乐制作人员,但音乐制作也是一个交流的过程,不单与音乐专业人士,与听众的交流也是必不可少的。去掉的原因是听众这个身份的门槛较低,如果在用户中占比过多,就失去了做音乐制作交流平台的意义。

图片

 

工种标签

身份与工种的关系:身份有时对应一个工种,有时对应多个工种形成的集合。如身份A->策划,身份B->作曲/编曲/混音。

图片

题材标签

 

 

5.4主页

图片

除了用户主页,企划也有主页。在企划主页的简介中,会展示企划的父子级关系图,帮助音乐人了解该企划的发展。企划关系由发起人编辑。音乐人也可通过查看推荐的相似企划寻找感兴趣的项目。在个人主页还会推荐相似的音乐人、相关企划,团体主页推荐相关音乐人(团体成员)、相似团体团体和相关企划。

图片

 

 

动效说明:以选择的企划的头像和名称作为转场衔接。招募列表数据项快速退场。企划主页作品列表快速入场。加关注按钮在卡片信息完整出现后再入场,提示用户可以关注该企划。

图片

 

 

6.总结

作为系列的第一篇,介绍了国风音乐圈的项目背景、用户群体,针对用户分析其痛点并描述出寻找合作者的使用情境。以音乐人制作交流圈为切入点,分析相关竞品。有了参考后给出流程和功能结构图。从寻找合作者开始讲起,展示招募模块及涉及的设计点。

 

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

作者:黑马青年

转载请注明:学UI网》国风音乐圈 UX 设计总结

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

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

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

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

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


如何做B端体验标准化:以数据可视化场景为例

seo达人

图片

业务背景

以我们 CCO 体验设计团队为例,主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加,设计面临严峻挑战。

1、业务多:30多个产品应用

2、角色多:覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户  6大类用户群体。

3、体验复杂:设计师需兼顾用户和客户两个视角。

图片

从组织上,85% 设计师纵向支撑业务,15% 设计师横向做标准化,反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。

图片

 

图片

标准化怎么做

核心通过页面梳理、抽象、分发、衡量,保障基础体验一致性。

图片

 

图片

案例实战

以数据可视化场景为例,讲述如何做标准化。

1、业务现状

共有11个应用,涉及89个页面。

图片

2、问题

体验不一致:各个工作台页面架构、组件、样式野蛮生长,缺少规范导致体验不统一。

低效:部分场景缺失,组件重复建设,大量定制;沟通协同内耗大,成本高。

图片

3、策略

体验统一:框架、组件、样式。

提效:代码化、工具、交付机制。

4、体验统一

包括框架、组件、样式。

图片

框架

(1) 现有页面收集

图片

(2) 用户场景分析

图片

(3) 页面归类

结合用户看数内容(例:概览、分析、详情)和交互形态(例:平铺、下钻),对页面进行归类。

图片

(4) 确定典型布局

通过统计高频复用形态,确定典型布局。

图片

组件

(1) 页面结构分析

组件的收敛,需要先对页面分析,确定模块层内容。例:模块包含页头、筛选、图表、表格。

图片

(2) 模块层分类

横向收集全部业务,将模块层分类。细分模块扩展形态,放到对应的篓子里。

图片

(3) 模块专项治理

接下来,需要对每一个模块进行专项治理。比如图表模块,再拆再抽象成指标、图表、单选、多选 4类场景。场景里再对主体和变体(也就是扩展形态)分类。

图片

图片

样式

(1) 确定优化内容

围绕视觉凌乱,要做的便是完善设计语言。设计师需要结合自身技术底层,补充缺失规范。例如布局、色板、字体、动效。

图片

(2) 确定组件范围

通过统计高频复用组件,确定需要梳理的组件范围。

图片

(3) 布局

图例位置:线上有9种,通过从业务场景按阅读顺序划分,最终收敛成2种。

图片

组件高度:真实线上情况,只能看2个指标,高度规范缺失。

图片

需要根据用户分辨率调研,提炼典型分辨率。比如用户是win系统,包含菜单栏、任务栏等默认高度,再减去本身页面页头等默认高度,得到 3 档。确定组件建议默认行高 240px。

图片

轴标签旋转角度:现状有顺/逆时针两种,通过分析标签类型,结合阅读顺序、轴与标签亲密度,确定默认角度为顺时针。

图片

(4) 色板

通过场景梳理,确定不同组件使用的色板类型及缺失色板。

图片

补充语义色板:从业务里抽象2类场景,指标和柱/饼/环场景,定义颜色。例如带正面语义,用绿色,比如升、已到岗、正常。带负面语义,用红色,比如降、旷工、失败。

图片

(5) 字体

结合自身业务场景问题,从场景、版权、风格、识别、极值共5个维度选择字体。

图片

举例场景一,纵向数据场景里,将市面上数据竞品用到的字体都横向铺开尝试,做排除法。比如din没版权,苹方非等宽字体,普惠102识别性弱。

图片

举例场景二,在核心数据呈现中,helvetica 品牌风格弱,普惠在1亿以上极值过宽。

图片

最终我们根据自身业务场景特征,用普惠和普惠102,运用在对应场景里。并同前端提炼规则。

图片

(6) 动效

首先,需要确定动效价值,明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。

图片

通过动效场景链路分析,确定优化范围。

图片

加载动效:围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路,输出方案。比如这里共梳理17种组件类型,抽象成9类,包括点、线、面、饼、环、柱、文本、图标、词云,再进行组合产出方案。

图片

出场动效:通过业务分析、提炼场景、优化效果。比如这里共提炼 3类场景,有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。

图片

图片

浏览动效:通过提炼场景,来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下,围绕点击感知弱、重点不突出、缺少悬停态来优化效果。

图片

沉淀速度参数:将优化动效场景的速度参数,同前端约定规则沉淀组件库。

图片

5、提效

包含代码化提效、工具提效、机制提效。

图片

整体思路

从设计组内到技术产研的提效过程。

提效面向用户依次是:组件设计师、业务设计师、前端、产品。

搭建目前还在进行中,这里主要从交付-工具-代码化来分析。

图片

交付内容

1、业务设计师:sketch/figma物料 (样式、组件、区块、模板、规则 )

2、业务设计师:kitchen工具(样式、组件、区块、模板)

3、组件工程师:组件规范/组件官网

图片

交付机制

新需求:通过评估复用性、抽象、内审、沉淀物料。

现有业务:通过页面梳理归类、抽象、内审、沉淀物料。

图片

6、衡量

从物理到行为层,包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。

图片

 

图片

总结

回归课程,在B类业务里,服务多个产品、多用户角色、体验复杂的场景下,在定制化+标准化团队阵型里,标准化实质解决的问题是保障60分基础体验一致性。

图片

总结:B端体验标准化包括物料的产出、交付以及衡量标准。

产出:包括框架、组件、样式的收敛来梳理、抽象页面。

交付:面向2类用户群体,业务设计,需交付物料和工具。组件工程师,代码化需提供组件规范,组件线上化需助力组件官网的建设。

衡量:一致性评分包括样式、组件、框架及组件交互。

图片

 

原文地址:AlibabaDesign(公众号)

作者:CCO 设计

转载请注明:学UI网》如何做B端体验标准化:以数据可视化场景为例

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

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

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

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

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



5个超酷的标题设计技巧,So easy!

seo达人

01.加椭圆曲线

图片

这个技巧最近可以在很多设计中看到,效果很时尚、很现代,过稿率超高,并且操作起来也非常简单。 
❶ 在AI中输入标题,选择一比较简单、现代的字体,当然,自己设计的也行。

图片

 

 

❷ 用椭圆工具画一个椭圆线框,线的描边不要太粗,然后使其与标题斜交叉。

图片

 

 

❸ 把椭圆与文字重叠部分的线删除。

图片

也可以把椭圆复制一层,描边颜色填充成白色,然后把描边模式改成“使描边内侧对齐”,做出椭圆把文字进行裁剪的效果,当然,也可以真的做裁剪。

图片

图片

 

 

❹ 画一个四角星放在椭圆的路径上,并使其左右两边与椭圆路径隔开一点距离。
图片

图片

❺ 颜色可以根据自己的需求进行更改,做完了。

图片

 

 

02.曲线叠加

图片

这也是很简单的一个技巧,适合用在电商详情页、微信长图、折页等设计中。 
❶ 在AI中输入标题,最好再配一个英文标题作为装饰。

图片

 

 

❷ 选择画笔工具在标题上“随意”画一条曲线,要注意整体的美观性与平衡性,线条描边不要太粗,以免对标题形成过大干扰。

图片

 

 

❸ 给线条填充一个比较鲜艳的颜色就完成了。

图片

 

另外,还可以通过描边面板中的选取效果功能,给该描边路径添加一些艺术效果,就能得到不同质感的曲线。

图片

 

 

03.波纹效果

图片

 

❶ 在Ai中输入一个标题,然后按快捷键:Ctrl+shift+O将其转曲。

图片

 

 

❷ 用椭圆工具在标题正中央画一个小圆,然后复制一个圆,等比拉大到类似下图的位置。

图片

❸ 同时选中两个圆框,并用混合工具依次点击这两个圆的描边位置,再双击混合工具,把指定步数改成5,得到如下效果。

图片

图片

 

 

❹ 将圆形组扩展描边,使描边变成形状,然后一起选中圆圈和文字,打开路径查找器,选择修边效果。

图片

 

 

❺ 取消群组,单独把圆圈部分群组,并把透明度降低。

图片

 

 

❻ 根据圆圈波纹的路径,用钢笔工具给文字往外增加类似下图的小色块,上、下、中间都要有。

图片

图片

 

❼ 删除掉圆圈路径,保留最中间的小圆圈,因为此处的小圆圈没有与文字重叠,最后,再变换一下颜色就完成了。

图片

图片

 

 

04.扭曲效果

图片

这种扭曲效果有点像可口可乐的飘带图案,用作海报标题还不错,做法同样很简单。 
 
❶在Ai中输入标题(字数在4-8之间效果比较好),然后将标题转曲,并把文字分为最右两组。

图片

❷ 选中第一组文字,在顶部菜单栏中选择对象-封套扭曲-用网格建立,然后在弹出的参数面板中把网格行数和列数全部设置为1。

图片

图片

 

 

❸ 拖动网格框的四个角上的锚点和手柄,将文字扭曲成下图效果。

图片

 

 

❹ 采用同样的方式将第二组文字扭曲成如下效果。

图片

 

 

❺ 将文字复制到Ps中,并填充成白色,背景色设置成黑色。

图片

 

 

❻ 用画笔工具在文字“转”和“星”的转角处涂一点灰色,再添加一点杂色,做完了。

图片

 

 

05.火焰文字

图片

火焰文字不是啥新鲜的效果,不过搭配上对比很强的渐变色,效果也是很酷的。 
 
❶ 在PS中新建一个画板,将背景色填充成黑色,然后输入一个标题,任意填充一个颜色,然后删格化文字,并通过变换扭曲工具将标题扭曲成如下效果。

图片

 

❷ 按快捷键Ctrl+J将文字复制一层,并将上面的这一层锁定,选中下面这一层,然后选择涂抹工具,把强度值设置为70左右,沿着文字的上沿用涂抹工具向上呈曲线涂抹。(为了涂抹时每个文字不相互影响,可以以每个文字单独建立一个图层。)

图片

 

❸ 通过调整涂抹工具的画笔大小重复涂抹,火苗的长度大概是文字高度的两倍左右,尽量保证火焰的底端与文字的顶端是对齐的。

图片

 

另外,整体火焰的形状要尽量自然、饱满,相连文字之间的火焰轮廓要形成互补关系,有瑕疵的地方可以用画笔辅助涂抹一下,得到如下效果。

图片

 

 

❹ 将文字层和涂抹层分别填充上渐变色,注意文字的顶端与火焰的底端颜色要是相同的,使其有融为一体的感觉。

图片

 

 

❺ 将文字和涂抹图层组合起来,并复制一层进行合并处理,执行高斯模糊效果,选择一个合适的模糊数值,颜色填充为高饱和度的深蓝色,塑造出发光效果,如果觉得不明显是可以复制一层。

图片

 

❻ 文字下沿的发光可以适当减弱一点,由于火焰图层的颜色受蓝色发光影响比较大,可以把火焰图层再复制一层,到这里火焰标题就做完了。

图片

 

注:这个效果跟参考中的效果不大一样,因为我觉得ps中的涂抹工具做出的效果更像火焰,如果想要参考中的效果可以用液化滤镜中的向前变形工具或AI中的变形工具进行涂抹,也可以直接用钢笔工具勾轮廓。

图片

任何技巧都不是万能的,用在合适的地方可以锦上添花,用在错误的地方就是灾难,所以大家对自己的设计需求要有正确的评估,一切以得到好的效果为最终目的。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》5个超酷的标题设计技巧,So easy!

这5大要素让你快速搞定极简设计风格

纯纯

少即是多。极简主义的概念可以用这句足够极简的话进行总结。而且它不仅仅是一种设计理念,更是一种生活理念,甚至于是一种系统的思维方式,而不仅仅视作为一种「更干净」的视觉风格。


在设计当中,极简主义是呈现内容的诸多艺术概念之一,应用范畴非常广。极简主义是使用尽可能少的素材和色彩,以有限的形态和元素,来呈现信息。


在数字产品设计当中,极简主义,是一个相当考验技术的门类,如何从「简单」跨越门槛,走到到「极简」,其实并不容易。


今天的文章,是一篇「相对极简」的「极简主义设计指南」,掌控好下面的 5 大要素,应该就能够很好地拿捏这种风格。


每一个要素下面都有一些颇为具有代表性的设计范例,这些作品的参考价值还是蛮高的 ~


1、留白

有没有听说过「白纸综合症」?当你在画画或者创作的时候,面对着空无一物的白纸,陷入焦虑的情绪的状态,就是「白纸综合症」。


这种状态广泛存在,这种病症很多人都有,尤其是设计师。而当你在设计风格简约的作品的时候,需要你学会拥抱白纸,面对留白,因为「留白」也是一种元素。


相反,在极简主义的设计当中,过多的视觉元素会让整个设计显得不堪重负,降低可用性和易读性。


留白的使用方法很多,但是最主要的方式,是让留白以外的元素,仅保留必须的部分,把留白视作为一个必须的模块,考虑如何保持可见的元素和留白之间的整体平衡。



2、色彩

留白当然不一定是白色,也可以是其他的颜色,你还可以搭配各种不一样的配色方案和组合。


色彩和留白的结合是很自然的选择,两者能够更好地赋予设计以更强的情绪和个性化的视觉,制造整体氛围。


但是值得注意的是,除了留白使用一种颜色之外,其他元素的色彩也尽量不要用得太多太花。简单的色彩搭配更容易营造出对比,在不复杂的配色体系下,制造出出色的视觉效果。


尽量将主要配色控制在 1~2 种,对比色能够营造出更强的戏剧感和视觉张力。



3、图片与插画

「一图胜千言」是被说烂了的老话,但是这句话怎么说都是对的。单张图片能够承载的信息量是巨大的。不过一样的,插画在极简主义设计当中的应用也是相当讲究的。


通常而言,你需要将插画当作重要的视觉焦点来使用,让它周围有足够多的留白,这样能够保持极简设计应有的呼吸感。


这个时候,经典的排版布局方式就可以发挥极大的作用,左右布局、上下布局、中心式布局等等等等,不用复杂的花样,就可以制造出让人惊喜的效果。


当然,记得控制好元素和整体布局之间的空间比例。



4、文本和版式

当然,配色、图片和留白都说了,剩下就是文本的部分了。文本在极简主义设计当中的使用方式也有一些事项值得注意。


文本排版在极简主义设计当中的玩法当然也很多,实验性的文本排版和布局设计是很多设计师提升极简设计的视觉观感的一种有效的方式,结合一些比较独特的配色或者效果,都可以。但是无论哪种,在「想法」上要保持极简——不要想在一个设计中承载过多的排版方式和元素,你最好着力表现一种「理念」,或者一种排版风格,呈现某一种的气质,千万不要掺杂太多的想法。


此外,相对传统的字体设计也同样可行,适当地运用一些个性化的排版技巧,就可以了。



5、图形和图案

从包豪斯和瑞士现代主义设计开始,图形元素就很好地同极简主义设计结合到一起。


你可以充分发挥你的创造力,使用独特的图案来提升极简设计的视觉效果,也可以从其他已有的设计当中汲取灵感,提取元素,应用到你的构图和元素当中。


图形与图案其实可以玩的花样很多,如果不是作为视觉主体的话,其实适当的装饰即可。作为视觉焦点存在,强化形式感就好,不必要弄的太过于繁复。



结语

极简主义设计并不复杂,重点在于你怎么简化整体设计,如何将有限的元素打磨好,控制留白和主次,从而以较少的内容呈现出丰富的效果。当然,在把握的核心要义之后,多研究一下成功的案例,其实你也可以做很好。

原文地址:站酷
作者:大葱设计

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

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

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

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

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




玻璃态射是新拟物风格的“进化”?

纯纯

玻璃拟物风格诞生


UI圈儿刮起了一股势头猛劲的新拟物风(Neumorphism),起因是乌克兰设计师亚历山大·普卢托 (Alexander Plyuto) 在 Dribble 平台发布了一张应用了新拟物风格的UI作品,便引发了圈内的激烈讨论,更一直占据着当时的热点榜首。此风格出现后,也给流行的扁平化设计添加了新的展现形式。


普卢托的《Skeuomorph Mobile Banking》,在Dribble获得了3000多次喜欢


也有一些非常著名的品牌公司在设计上结合了新拟物风格,像三星召开的Galaxy Unpacked活动、MKBHD的介绍视频等,效果都很出彩。当趋势热潮退去,新拟物风格并没有像一部分评论者坚持的那样,“洗牌”式地接管整个设计圈。


三星 Galaxy Unpacked 活动


MKBHD在2020年的简介中使用了这种风格


如何定义Glassmorphism?


复习结束回归正题,我们看到现今又出现了一种新样式—Glassmorphism,字面上由玻璃(glass)和拟物化(skeumorphism)组成,叫法颇多:玻璃拟态、玻璃拟物化设计、玻璃拟物风格,其实意思都对,它比新拟物风格更直观清晰。那么,玻璃拟物风格最具有定义性的特征是什么呢?一起来看:


-透明度,使用背景模糊的磨砂玻璃效果;

-物体漂浮,画面中有多个漂浮层级;

-鲜艳的色彩,在磨砂玻璃后更突出整体效果;

-浅色边框,应用在半透明物体上衬托质感。



玻璃拟物风格特征显著,用户也能快速确定界面的层次结构和深度。画面中清晰显著的则是最迫切想要表达的重点,非常好辨认。



在Drrible的#Glassmorphism#下,大家已经纷纷提交自己的作品了,也让辞典酱发现了一些它独有的「魅力」:


-颜色明艳、欢快,视觉上带来一定的刺激性;


Music Player Apps by Adhiari Subekti


glassmorphism redesign by Frédéric Musso


-icon虚实结合,营造出了一种「小而精」的质感;


MEDIACRAFT ICONS  by Ayo Kid


Glassmorphism Iconography by Hemanth Ravi


-边缘细框,模拟玻璃,带来微妙的「高级感」。


Procreate app icon redesign by Zhenia ievgen


Coffee Shop App by Saud Ali


Glassmorphism的由来


说到由来,那么苹果带来的影响力毋庸置疑。苹果早期的设计系统为拟物风格,从2013年推出的iOS 7开始,系统风格进行了全新尝试,背景模糊也是从那时起进入大众视线,虽然人们褒贬不一,但使用过的用户还是很买账的。



与苹果互为对手的微软也推出了这种类似于毛玻璃质感的Vista系统,但距离真正的玻璃拟物还有一段路程要走。



最新的macOS Big Sur 和 iOS 14系统都已经使用了偏向玻璃拟物化的半透明效果。



通知栏的弹出变成了一件有趣的事,你可以清楚地看到新面板下的图标是如何弹出和消失的。



微软的Fluent设计系统也很重视这种效果,他们称此特殊元素称为「亚克力」,并将其作为设计系统中不可分割的一部分。


Microsoft Fluent设计系统


Glassmorphism的实现


-基本原则

实现玻璃拟物效果需要注意的是,与任何基于卡片的布局一样——物体离我们越近,它吸引的光就越多,也就意味着它会变更加透明,反之亦然。



它依靠3个基础元素来实现,分别是阴影、透明度和背景模糊。还可以使用一个或多个透明层,假设在一个颜色相对复杂的彩色背景中应用,那么至少加两个半的透明层级,要展示的文字或图标的可见性才会最大最突出。


-透明度设置

不要设置对象的透明度,而是调整填充透明度。下图示例中,两种不透明度的数值调整,得到了完全不同的视觉感受。



-背景选择

背景在玻璃拟物效果中至关重要,太单调会导致完全不出效果。这可能就是Apple选择彩色背景作为MacOS Big Sur默认壁纸的原因,背景图片的色调差异大,玻璃拟物的效果越强烈。



-细微边框

别小看了这1px的细微边框,它模拟了玻璃的边缘,将其单独设置透明度,就能让形状从背景中脱颖而出。


半透明边框图形(左)vs 无边框图像(右)


-可访问性

建立一个良性的层次结构同样重要,和新拟物类似,它们都不是Material Design被广大用户熟知与接受的呈现形式,装饰味道会相对浓郁。所以设计师在应用前,最好能确保——元素和各层级在没有花哨背景加持下,一样能被用户以及视力障碍人群轻松识别理解。



下图就是一个很好的例子,卡片具有清晰的结构,即使完全去除玻璃背景。它也能正常使用。



作为人类,我们很容易对各种趋势感到厌倦,所以每隔一段时间就会迸发出新的灵感与创意。但作为设计师,我们需要探索所有可能创新产品的方式。在当下,玻璃拟物的应用的确会使产品看起来更好,对用户更具吸引力。

 

原文地址:站酷
作者:UI辞典

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

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

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

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

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



视觉校验|互联网B端设计不可缺失的一项技能

纯纯


01.  在工作中遇到的状况

设计师常常会遇到这样的问题,在新产品发布之前,都会做一遍线上的UI视觉校验,在这个过程中,前端开发工程师所写的界面总会发生图片变形,文字字号不对,元素与元素之间不对齐的事情发生。


设计师给前端开发工程师标记了页面中错误的地方,但是多数前端开发工程师一听那么多头都大了,在紧张的上线日期限制下更有甚者不予理睬直接上线,用户吐槽设计不严谨,导致设计背锅。


就好比下面这个例子,为什么老板会觉得不好呢?其实是产品在用户体验的本能层次出现的不好的体验。



02.  好产品具备的特征

互联网产品可以利用产品五要素把产品划分为5个层次。全球的认知心理学家(美)诺曼在《情感化设计》这本书中讲产品本能水平的设计——本能层;行为水平的设计——行为层;反思水平的设计——反思层


互联网产品可以用诺曼教授提出的感情感化设计的3个层次联系起来,并把这些情感分为5个纬度进行考察,就可以得到下面这张知识网络图。


从上面这张图我们可以看出用户评判一个产品好坏的标准还是来自产品的表现层、框架层、结构层中的直观体验也就本能层次和行为层次的感受,如果产品的吸引度、完成度、满意度、忠诚度、推荐度的数据很高也就证明产品很好,如果数据表现不好那可以判断产品还是有需要提升的地方。


回到第一张图片,老板觉得有问题的原因就在于产品在本能层次的不合格,那重点来了有什么设计方法可以避免本能层出现问题的情况吗?答案是毋庸置疑的,那就是“设计走查。”



03.  设计走查的意义

一名专业的B端设计师,并不是说你把设计稿做得很完美,把标注和切图完整地交给开发小哥哥之后就完事了,其实在这个阶段设计只是完成设计工作中产出效果图的工作,并没有进行最后验收的环节,如果开发还原出来的产品跟设计稿差距较大的话,设计其实也是要负很大责任的。


就好比工厂的流水线中一台电脑的生产,把电脑从工厂搬到运输车上也算是电脑生产完毕,但是必须要送到客户手里,客户签字确认,工厂才能算是电脑卖出去了,由此可见设计走查是保证用户有高质量体验的不可缺少的一个环节。


设计走查的意义在于3点:

1、确保产品的设计细节的还原度合格,从而保证产品的视觉效果和交互体验能满足用户需求。

2、是衡量设计师是否是一个合格设计师的重要指标。

3、通过细致入微的专业设计素质赢得公司团队内部设计话语权的提升。


既然设计走查这么重要为什么大家还会忽视呢?其实大家对设计走查的看法有一个误区,如果你想成为一名专业的B端设计师,一定要改变以上的错误观念,摆正一个正确的设计观念。


设计师在公司代表着视觉上的最高水准,设计稿则是设计师专业能力的体现,如果一个设计师的能力是100分,设计稿的分值90分,开发实现后的产品分值为50分,在没有进行设计校验的情况下,这时候将产品发布出去,用户或者老板只知道该公司的产品设计只有50分,而不会知道背后设计师最高的水准是100分。


慢慢地设计师就会在开发团队中做设计变得很被动,越被动就会越没有话语权,所以对一名专业的B端设计师来说,除了拥有很强大的效果图设计能力之外,还需要有保证效果图落地能力。







01.  设计走查的种类

设计走查是一种设计层面找寻问题的方法,多数应用在找寻产品问题或者是对项目开发过程中的测试环节。具体的方式归类为3种:


1)体验设计走查:是指人机交互之间的细节体验、比如非力度测试、满意度测试。可用性测试的调查这些方法都是体验走查的一部分。

2)交互设计走查:是指针对产品场景与场景之间的动态交互效果进行走查。

3)视觉设计走查:是指前端开发出来的静态页跟设计师出的效果进行视觉细节的校对和检查,确保开发出来的视觉和设计图保持一致。



02.  制作走查表的三种方法

很多人会纳闷了,公司要是没有这种走查表,那怎么进行这三种设计走查呢?这里告诉大家我的一个工作办法,总共分为3个阶段“寻找·借鉴”——“思考·定制”——“优化·完善”。


a.寻找·借鉴

当大家有一个知识的概念,如果想更深入了解这个概念就需要在网上找一些关于这个概念的信息,这个过程就是寻找。如果大家没有做过类似这种设计走查的经验,那第一时间也是去寻找,寻找设计走差的概念,甚至是做好了的走查表。


可能还会有人问,别的公司和我们公司做的行业不同,那别人公司的走差表我们公司能用吗?大家可以复用70%左右的,那剩下的30%就需要进入下一个步骤“思考·定制”阶段了。


b.思考·定制

当我们完成第一步之后,就需要对自己所处的行业或者产品有一个认知,思考我们的用户类型是什么,他们的使用场景是什么,他们最需要解决的需求是什么等等问题,然后再根据这些问题定制一系列体验、交互、设计的问题,那就成为了自己产品定制的一份设计走查表了。


c.优化·完善

任何工作为了更好地适应当前的工作,都需要持续迭代。假设,在第二阶段定制的问题有些微交互动效果的问题,但是这是前年用户比较在意的,现在很多产品都有了微交互动效了,所以现在、意义就没有那么大了,我们的设计走查表也要根据互联网的大环境不断地进行优化和完善。



03.  产品表现层——视觉校验

设计走查和设计校验并没有大的区分,但是我理解设计走查是一个比较新型的词,设计走查的范围要比设计校验的范围大一些。


有些公司会把设计走查应用于改版之前,当作找寻产品问题的一种方法,也有一些公司会把设计走查应用于项目做完开发在测试环节做测试的一种方法。比如在启动产品改版前可以通过“视觉设计基础自查表”来收集产品目前的视觉体验问题。



04.  视觉校验需要审查哪些纬度

设计校验验收表可以简单地理解为是用于审查产品表现层的形状、色彩、字体、构成、质感、动效这六点问题的记录的表格。其实这六点也是诺曼教授提出的感情感化设计中本能层次和行为层次审查的六点。







再讲如何做之前,大家还是要先了解一下验收流程中的步骤。


01.  视觉校验做什么

这里描述两点,一个是开发阶段,另一个是测试阶段的流程。


在公司的项目开发阶段:是设计师设计完效果图,进行标注(现在大家都是使用第三方标注软件比如蓝湖、摹客、Sketch Measure 等),在交付开发。


在项目测试阶段:一般都是产品经理发起一个项目进入测试阶段的通知把设计师、开发、测试、和产品经理都设置为参与者,之后由测试人员进行产品功能逻辑的测试、设计师进行视觉验收;验收完成后产品经理验收测试结果,如有问题找开发进行修改;修改完毕再找测试、设计、产品进行确认,没问题就封版了,产品经理确认发版日期,如果还有问题就再修改。



02.  视觉校验的验收标准

很多刚入行的设计新手,在校验阶段不知道检验哪些维度信息,以至于很多视觉元素都需要查看,对于c端来说界面的场景、交互比较简单还能应付。


但是对于模块功能复杂、交互场景众多的B端产品来说每个场景都要查看很耗费精力工作效率也不高。


所以我总结以下几个高频出现问题的点供大家参考,大家可以按照以下几个纬度进行视觉走查,提高自己在工作中的效率。


a.检查设计稿的可行性

人无完人,再专业的设计师,也不可能100%保证自己的设计方案就是最好的设计方案,在交付设计稿前期设计师应该自我检查自己的设计稿是否能清晰地传递信息,对于一些重要的模块是否能凸显出来,对于一些比较复杂的交互场景开发是否能够实现,市场上众多的屏幕尺寸,这样的布局方式是否是最为合理的等这些纬度进行思考做设计,保证设计方案的可行性。


这里我举一个我真实的案例,起初我接到的需求就是设计一个模块里面信息排版,如果我采用第一个方案那肯定是不行,因为信息层级区分不够明显,第二个方案把数字标签用颜色进行了区分,但是我又想如果出现文案比较多的场景,对齐方式都是左对齐,那“指标值”的信息就不可能保持左对齐,所以我又出了第四个方案,目前来看第四个方案算是最佳方案。


假设当时我就交付前端开发第一种方案,上线后出现问题,还需要调整到第四种方案,慢慢的前端开发就会质疑设计的专业能力,后续合作也会难以推进了。


b.组件调用是否正确

B端产品的业务复杂,模块交叉设计数量多,所以在设计b端产品起初都是用原子化的思维搭建一个组件库。前端是开发阶段在样式库中写一个标准的控件样式,然后在不同的页面场景中调用公共样式,原理类似于我们在 Sketch 中搭建 Symbol。我们要从两个方面看组件是否调用正确。


1)公共组件是否正确

公共组件调用正确,好处就是公共产品的整体视觉风格是一致的,比如页面的侧边导航,搜索场景、详情页场景布局是否一致,在断网或者报错的场景中出现提醒条样式是否一致。可进行交互的按钮样式、交互状态的按钮是否一致等等。


2)业务组件是否正确

在真实开发场景中,有一些前端开发虽然调用一个样式,但是在设计规范中一个样式可能会有多个尺寸,比如这个按钮,在开发阶段避免不了出现样式虽然是对的,但是尺寸调用错误的情况出现,所以要查看一下组件的样式和尺寸前端开发是否调用正确。


按照这个思路去设计最为重要的就是要检查开发人员调用的组件库的规格是否是我们设计稿的规格,以此类推检查整体的布局、按钮样式,报错样式。


这里需要描述的内容相对较多,以后有机会我可以再补充一份关于《如何搭B端建组件库》的文章,咱们详细聊一聊。



c.空间关系是否一致

空间关系可以简单地理解为模块与模块之间的“间距”关系和组件与组件之间“间距”的关系。


1)模块与模块之间——间距

所有模块(卡片)之间的间距,这里具体指的页面布局包括横向间距和纵向间距,大家可以采用4px(或者8px)的倍数进行删格布局,把删格布局的基础规范梳理出来,以这个规范当作标注来审查横向间距和纵向间距。


2)组件与组件之间——间距

另外一点就是我们在搭建组件阶段,组件与组件之间的间距关系是否一致,不要出现不对齐的情况出现。


3)为什么要用统一间距

大家了解空间关系都要看哪些纬度后,我们再来解答一下大家心中的疑惑,为什么要保持间距一致呢?主要原因有以下三点:


对于如何使用间距,我建议大家可以看一看《写给大家看的设计书》里面关于版式设计四大原则的讲解和有关格式塔原理的文章。


d.文案的显示是否清晰

在UI设计中,我们总避免不了与字体打交道,字体也经常是我们在设计中容易忽视的部分,影响字体的清晰度无非是字体、字号,字重,段间距这几个参数的设计。


1)字体


字体的实现其实是电脑渲染的一个过程,Mac电脑默认字体是苹方,Wids电脑默认字体是微软雅黑。在字体的选择里面行业里是有标准的规范的,比如ont-family:serif、sans-serif、monospace、cursive和fantasy这五种字体,前端在编写代码时候会把这种多个字体名称保存为“字体的回退机制”来定义,意思就是如果展示的设备(浏览器)检索时没有第一款字体就依次顺延使用下一款字体,这个大家只需要了解就好,在字体选择中使用频次最多的还是对数字字体的选择。


对于数字的字体设计要提前查看是否字体有版权。这里分享一个可以免费查询字体的网站:

https://fonts.safe.360.cn/?from=bd


不同的网站对字体排序的方式可能不一样,有兴趣的小伙伴可以用下面的这个方法进行查看。


2)字号/行高

对字体的字号也要进行走查,因为在开发阶段在不同的浏览器中显示的字号会有变形的情况出现。


另外考虑各个浏览器的兼容问题,PC端建议使用最好的字号是12PT,因为12PT可以保证在现在市面上的浏览器中是可以清晰显示的,如果有特殊场景需要用到12PT以下的字号,需要和开发说明并且标注出来。


3)字重

设计区分文案层级的场景使用频率最高、视觉效果最好的设计方法就是给字体加粗的字体样式了。


这里要注意的是初级设计师的眼力可能还没有达到很高的水平,尤其是最小的字体显示加粗或者不加粗的效果视觉在电脑那么大的屏幕上感官并不是很明显,所以最好可以通过从代码的层面进行核对,具体方式可以看图:



e.颜色的选择是否科学

颜色是给用户呈现面积最大的一个元素,对用户来说感官层里表现最为明显的一个元素,所以在校验中“颜色”是最容易造成落地页面与设计稿视觉差异的一个因素。


1)色差

因为大家手机屏幕的技术一般是LG屏幕(屏幕的使用时间越长色彩的还原度越低)。

虽然有的时候在查看代码时候色值设置是正确的,但是也要根据具体的场景进行分析。这里建议大家不要使用具有不透明度的色值(虽然在c端中经常会使用,有不透明度会使颜色比较透亮但是在B端产品中定位是工具,工具就要以效率在第一位,美观在第二位,所以这个场景的颜色使用尽量以清晰展示为第一准则。)


2)颜色种类

b端产品中,柱状图、折线图的样式比较多,在设计这类图标时候尽量避免多种颜色的出现,还是因为B端产品定位的原因,太多的颜色设计势必会干扰用户进行判断。



f.图标的尺寸是否合理

不管是在C端产品还是B端产品中图标都是高频出现的一个元素,图标本身的意思就是简化文字信息,通过图形去高效地传达文案信息。


对于图标的设计走查分为两点:


1)大小

我们在设计图标时候,会根据不同的场景进行图标尺寸的规范输出,但是在真实的开发环境当中,开发在使用我们提供的插件(蓝湖)进行icon下载时候,会提供3种icon的尺寸下载,前端开发在使用切图时候往往会忽视掉图标的尺寸问题,对于图标的设计走查,是否图标使用的尺寸是我们设计使用的规范,所以第一个就要看大小是否能清晰的展示。


2)SVG格式开发

因为PC电脑的屏幕尺寸、分辨率往往是高于移动端的屏幕尺寸、分辨率,图标的切片做得太小上传到屏幕上会出现模糊的展示效果,如果图标不能清晰地展示图标所呈现的图形,那就会造成用户一定的识别障碍,所以一定要保证图标不要有模糊的情况出现,尽量使用SVG格式图标切片给到开发。






设计校验工作不能说难,有耐心有细心的设计师都可以完成的,一次视觉校验需要1——2天的时间,相对来说比较耗费精力。


换个角度思考,如果我们从项目开发的前期就控制设计走查的工作量,那我们可能会减少了走查的工作量。接下来我们就聊一聊怎么减少设计校验的工作量。


01.  了解需要视觉校验的原因

前面我们一直讲的是做视觉校验需要校验的维度,我相信更多的设计师还是希望把精力放在做设计效果图阶段,毕竟知道从哪些维度做只能单纯地提高我们的校验的效率,想要在开发过程中减少对项目的设计校验的工作量 ,就需要我们清楚两个答案,一个是“在开发过程中为啥需要设计走查”和“开发不愿意修改的原因”。


a.谁负责实现样式

开篇我已经讲了设计走查的意义(原因),现在我想从开发流程再聊一聊。


在一个产品开发中,设计师下游需要对接人的人员角色统称为开发工程师。但是在这类角色中其实也是会细分为三种角色:前端工程师、后端工程师、测试工程师。因为做项目多数情况是多人协作共同完成的工作,前端工程师是实现我们效果图样式的主要人员,也是我们主要对接工作内容的对象。


b.前端工程师心里所想

前端工程师的工作内容需要一一查看设计师提供的标注,然后再一一去实现,所以难免不了心里会这样想:好麻烦,不如我自己按照感觉写。


在真实的工作中,前端开发按照规范进行项目开发这种思路是对的,但是设计师强硬地要求前端开发工程师,按照规范进行开发是过于“理想化”的一种表现。


所以我们还是要先从自身出发,循循渐进地要求前端工程师按照我们的设计规范进行开发,这就来到我们下一个话题。


02.  如何避免呢

那么接下来我们来聊一聊身为设计师我们要怎么做,才能避免进入过多的设计校验呢。


a.了解开发实现原理

如果想成为一个高端进阶的设计师,我们要给自己增加筹码,那最为直接增加筹码的方式就是——站在开发者的角度看待问题,了解开发思维。


国内前端写样式的代码基本上是HTML+CSS,Jacascript,注意这不算是编程,只是一个写样式的语言,简单地理解就是盒子模型(CSS语言)


1)盒子模型

CSS盒子模型又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:


举一个图文模块的例子:图(1)是设计师输出的设计稿,图(2)是开发需要的标注信息(我们实际给到开发的标注)开发需要查看的就是色块的尺寸和色块之间的间距。


2)用框架化思维做设计稿

了解完前端制作咱们效果图的原理后,我们就要用这个盒子模型的概念,像是搭建房子的原理去制作效果图,所有的组件之间都是有理有据的,那这个专业术语就叫做框架化UI。


前端开发工程师通过一个个盒子填充来将我们的组件元素放入其中,最终形成前端展示的页面。注意:标准的框架化就像前面的盒子模型是一块一块制作的,考虑到开发同学开发阶段组件的嵌套逻辑。



3)开发者模式

如果还是不太了解盒子模型具体是什么的同学可以在线上使用下图的方法自己去查看。


设计师在视觉校验时使用浏览器就可以看到开发写的盒子,了解盒子也可以方便我们走查时知道问题在哪。具体操作步骤:



b.检查自己的设计稿

在给前端开发工程师提供设计标注阶段需要提前保证自己出的效果图是有效的设计方案,符合基础的视觉需求,都能保证模块设计的可扩展性及规范化,避免定稿后再反复修改设计方案。


比如,当我们设计B端产品中的搜索条件模块时候,应提前需要考虑,在一行展示3个搜索条件、一行展示4个搜索条件、一行展示6个搜索条件等场景。


我们设计完一个场景的设计稿之后,还要考虑不同屏幕尺寸下这套效果图的布局是否能满足产品需求,如果不满足那设计稿需要调整成什么样式的设计稿。



03.  做好标注文档

除了确保设计稿的可行性之外,还要做好设计稿的标准文档。如果项目是小版本的迭代就只需要进行简单的描述即可,如果是组件库升级,那就需要给前端工程师的标注文档,尽量是详细的、准确的。


其中包括设计稿、切图(规范的切图命名、压缩好的图片文件)标注、设计规范以及交互文档(包含字体标注)。


a.描述到什么程度

那细致描述到什么程度呢?这里我简单地说几个点:

·侧边导航栏在正常模式下、缩紧模式下,导航栏的宽度是如何变化的。

·如有图片信息的上传的场景,考虑图片比例是什么,是21:9、16:9、4:3还是1:1。

·如果出现文案超长的场景,不可展示的文案信息用什么样子展示,是文案后面用省略号展示?还是鼠标滑上去有气泡弹窗的样式。


b.图标命名的规范

随着业务增多,团队内对图标的随意命名的习惯也开始凸显出弊端,这种不好的习惯会造成同一类功能的图标会出现不同样式尺寸,所以我们在搭建图标规范时候,就可以把切片的命名规范好。


在图标规范中,图标需要有着单独的后缀,这样可以让公用图标与业务图标更方便地进行溯源。SVG格式的图标可以不用写切片的尺寸,而PNG的图标我建议写上切片的尺寸。


有些公司习惯用icon进行英文的格式命名,左侧是我整理的比较高频使用的命名,文章末尾我会分享出来文字格式,供大家使用。



c.图标的上传

可以在开发前在与前端开发沟通达成共识、图标制作完成确认后,将图标上传到阿里巴巴图标库中,更方便前端调用图标大小和调整颜色。


如果开发需要自己去找到相关图标,也可以给予权限让开发从蓝湖上传图标(前提是得整理好图标到蓝湖上)。




04.  和前端开发工程师的沟通

虽然很多时候项目在发版本时间、验收标准,在团队内部都是有明确的规划和标准,但是有些问题还需要特别分析、特别对待,这里我就列举几点我在项目中几个比较重要的点。


a.进行设计宣讲

设计宣讲最大的意义就是加深大家的印象,提前给大家一个心理预估,把一些容易忽略的问题暴露出来,把关键核心点和规则讲清楚,后面可以减轻设计走查的工作量,开发也轻松一些。


1)用认知对齐,目标一致

如果团队内部四个角色成员大家的认知都是一致的——提升用户体验是我们公共目标。


如果不一致,那就要说服其中一个角色,最好是项目负责人,说明校验影响发版时间,如果大家都按照规范去完成自己工作内容,可提高效率。确保大家理解一致:设计师要和开发、测试确认视觉表现层的验收内容、确保内容大家理解一致。



2)做有效的沟通

认真是前提、尊重是法宝。在部分开发团队中,设计师也不能太过于教条地要求开发还原自己的设计稿,毕竟开发生气、请假了,那就真的没有人可以进行代码的修改了。


所以在开发之前,就要和开发沟通,目前这些界面的效果在技术层面上是否能实现,针对比较复杂的界面场景,实现出来的代价有多少,权衡利弊后再确定是否按照效果图进行开发。


针对复杂的页面需要把标注标记得更加详细,并且明确告知他们,我的删格在哪里说明,布局规范在哪里说明,在这个交涉过程中设计师就需要尊重他人工作成果,明确自己的需要做的事情,把问题描述清楚就好,不可要求开发同学100%还原设计稿、过多地干预别的开发团队的开发步骤和内容。



3)不必焦虑

前端开发工程师找我们沟通他们的疑问点时候我们要积极回应他们,并且和他们一起处理问题,比如某些复杂的页面,避免不了实现效果图不好的情况出现,这时候不要一口咬定就是开发的原因,先沟通具体原因,然后找出解决办法。


开发人员在修改代码的阶段,开发人员的效率是有限的,而且大家都是身兼多条业务线,在这种开发的场景中可以在不影响正常发版日期的阶段,把不太重要的视觉问题,放到下一个版本中再进行修改。



4)规划时间节点

在工作项目中也要注意分配自己的精力,可以把重要的界面优先处理,也可以定期跟程序员沟通,跟他一起制定解决方案和时间。如果时间允许的话,也可以慢一点修改,只要改对了就可以,毕竟完成比完美更加重要。







对于设计校验的工具有一个原则,就是提高设计师在设计走查中的工作效率。对于用什么工具并没有限制,只要顺手就好,工具的最大作用就是提升工作效率,只要你觉得能提升你工作效率,你喜欢用啥就用啥。


我把我使用的工具主要分为两类工具,第一类是发现开发问题和效果图的不符合的工具;第二类是针对问题高效记录、追踪问题的工具。


01.  四发现问题的工具

我在工作中发现很多时候开发不愿意检查自己代码样式的一个原因就是不知道以下四种工具,在很多公司里面前端开发工程师都是多条业务线并行开发的局面,没有更多的工作时间自己做设计审查。这时候我们可以提供工具给予开发,帮助他们提高工作效率。


设计师同学也可以借助以下4款工具进行校验:


前三款都是Google Chrome浏览器的具体操作步骤可以看下面的图片,如果还有不懂的地方可以在评论区给我留言,我看到后会为大家一一解答。


至于“他山石”这款软件大家有兴趣的话可以在网上直接打名称就会出来软件信息,大家下载后自行体验吧。



02.  记录追踪问题的工具

介绍完发现问题的工具后,咱们再聊一聊记录追踪问题的工具,有的人会问了,你前面讲了视觉校验都要看哪里,又推荐了视觉校验的工具,我直接把需要修改的地方告诉前端开发工程师不就可以了吗?为什么还要知道这个记录追踪问题的工具呢?



a.进为什么要使用记录追踪问题的工具

在一些设计团队稍微成熟的公司里面由于项目的规模比较大,涉猎的模块多,参与的人员相对也多。


面对这种体量的项目如果不进行问题的记录的话,这周做项目里面的1号模块,下周做项目里面的2号模块,过了几周再对项目里面的1号模块进行修改,然后自己就会发现1号模块当初的修改问题是什么忘记了,更有甚者都忘记一起协同工作前端开发工程师的名字了。


这时“记录追踪问题的工具”就显得尤其重要了,因为这种工具的出现可以帮助我们回忆起当初具体的修改问题和修改的进度,从而降低上线安全性的风险度。



b.TO DO LIST 思维模式

to do list是一种实际走查阶段使用的一种走查模式。


在设计走查阶段,主要由设计师发现问题、记录汇总递交到前端工程师这里进行修改和跟进,主要的优势是在于协助走查可以顺利地开展,不遗漏掉任何信息。


在制作表格时候,可以关注这三点3点“1、问题需要逐条记录。2、需要截取问题图片及描述修改正确内容。3、相关对接人员的名称和处理进度。”



结语

一个优质的项目落地是各部门协同合作的成果,视觉校验是设计师必须掌握一项技能,我们本着“认真是前提、尊重是法宝”十字真言去校验开发输出的真实页面,希望这篇1万多字的文章可以帮助到你在校验的工作上少走弯路。


原文地址:站酷
作者:斜杆7湿兄

蓝蓝设计建立了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咨询、用户体验公司、软件界面设计公司


日历

链接

个人资料

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

存档