首页

国风音乐圈 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!

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

seo达人


 

原文地址:Martin_K(站酷)

作者:Martin_K

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

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

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

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

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

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


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

seo达人

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

qiu~

变成了沈腾。

 

图片

看到那根点燃的火柴吗?

qiu~

变成了火腿肠。

图片

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

 

 

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

你想到了什么?

图片

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

图片

图片

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

[优化输出图像]

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

图片

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

[优化输出图像]

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

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

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

 

 

置换同构的商业案例

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

你想到怎么置换吗。

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

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

图片

 

 

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

作者:修先森

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

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

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

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

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

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


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

seo达人


图片 

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

图片
图片 

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

图片
图片 

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

图片
图片
图片
图片 

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

图片
图片 

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

图片 

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

图片
图片 

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

图片 

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

图片 

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

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

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

 

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

作者:黑马青年

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

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

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

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

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

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


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

seo达人


图片

 

  风格

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

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

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

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

图片

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

 

重量

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

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

图片

 

属性

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

图片

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

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

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

 

网格

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

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

图片

 

视觉校正

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

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

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

图片

  

角度

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

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

图片

 

比例

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

图片

 

清晰

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

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

图片

 

细节

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

图片

 

一致性

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

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

图片

 

熟悉感

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

图片

 

最后

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

 

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

作者:Clippp

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

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

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

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

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

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


拿捏8种LOGO设计技法!

seo达人

图片

图片

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

1. 基本形状为字母 D;

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

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

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

 

图片

图片

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

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

 

图片

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

图片

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

图片

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

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

 

图片

图片

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

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

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

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

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

 

图片

图片

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

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

图片

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

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

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

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

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

 

图片

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

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

图片

先简单分析一下:

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

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

图片

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

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

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

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

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

图片

 

图片

图片

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

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

图片

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

图片

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

图片

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

图片

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

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

图片

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

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

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

图片

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

图片

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

 

图片

图片

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

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

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

图片

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

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

图片

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

图片

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

图片

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

图片

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

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

图片

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

图片

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

图片

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

图片

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

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

 


作者: 告白天

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

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

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

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

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

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


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

seo达人


image

 

准备好了吗?

工具:Photoshop、手绘板

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

适合:板绘零基础入门

 

马克笔笔刷的亮点:叠色

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

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

image

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

image

盆,盆栽的盆

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

step 01

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

image

step 02

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

image

画的是植物没错

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

step 03

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

image

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

image

第二幅,来多一点装饰

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

step 04

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

image

step 05

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

image

step 06

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

image

step 07

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

image

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

image

拿去练吧~从简单开始

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

image

长图版更适合临摹:

image

笔刷下载地址

百度网盘下载

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

提取码:aqdb

 

原文地址:飞屋设计

作者:飞屋睿UIdesign

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

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

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

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

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

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


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

seo达人

一、预判设计

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

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

1.历史记录

a.用户操作行为记录

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

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

图片

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

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

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

图片


2.效果预知

a.效果预览

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

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

图片

b.效益预估

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

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

图片


3.智能辅助

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

图片


4.行为惯性

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

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

图片

 

二、表达清晰

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

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

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


1.功能易理解

a.术语转换

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

图片

b.信息有效展示

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

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

图片


2.内容强吸引

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

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

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

图片


3.选择无负担

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

图片

 

三、操作可控

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

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


1.操作一致性

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

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

图片


2.明确指引性

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

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

图片

 

写在最后

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

 

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

作者:商业用户体验部

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

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

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

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

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档