首页

从设计实战中,总结了这份B端产品设计规范

seo达人


色彩规范 

色彩规范一般包含品牌色、辅助色和中性色,在B端产品中,颜色除了迎来传达品牌调性,更多的用来传达一些提示或警告,通过不同的颜色给予用户信息反馈,不同的状态运用不同的颜色展示,比如:

绿色通常代表成功、已发送、已签到等状态;

红色通常代表失败、未发布、未签到等状态。

另外,通过颜色可以对内容进行分层级展示,提高用户阅读信息的效率。

 

品牌主色

一套产品只有一个品牌主色,是界面中出现最多的颜色。在需要用色强调而且没有其他要求时,一般都会选择主色。

网络上很多人说B端产品大部分用蓝色或者偏冷色系作为主色,可以带给用户一种严肃冷静的感觉,但在工作日常中,很多企业会要求颜色必须是公司的品牌色。

例如当前任职的公司品牌色是饱和度较高的紫色,那么在定主色时,我们就不能跳脱这个色彩范围,在这样的情况下,我们可以考虑将品牌色饱和度降低或者用其他暗色系的颜色进行搭配,从而在观感上尽量显得不是那么刺眼,降低用户眼睛疲劳度。

 

辅助色

用于提示其他场景,比如:成功、失败、警告、无效等,辅助色主要是帮助用户高效获得信息。

 

中性色

常用于文本、背景、边框、分割线等。

图片

 

字体规范 

在B端的设计上,文字的字体,字重,字号,行号、颜色用来区分界面信息的层级关系。

 

字体

中文字体一般用苹方体、思源黑体、微软雅黑,英文字体一般为Helvetica Neue、思源黑体、微软雅黑。

 

字号

系统中字体大小为:12px、14px、16px、18px、20px、24px、26px、28px、30px、36px…

在开发中,浏览器最小字体一般为12px,注意设计中不可以低于最小字体设计。

 

行高

行高上,可以采用行高=文字大小+8px,例如14px字体,则14px+8px=22px,则行高为22px。

 

字重

通常采用regular、medium、semibold三个字重。

 

颜色

目前最常用的字体颜色是#333333、#666666、#999999,区分标题、正文、辅助文字,具体可根据设计进行调节。

图片

 

图标规范 

在B端设计中,图标要简洁易懂,用来帮助用户更快导航,提高用户使用产品的效率。

在绘制完图标后,可以存储成svg方式上传至Iconfont,这样方便和开发进行对接,也可以打造自己的图标库,在后续的项目中,方便直接运用或修改。

图片

 

布局栅格 

B端系统的主流分辨率主要为1920、1440和1366,个别系统存在1280的显示设备,通过适配布局来完成在不同分辨率下展示内容。

一般选用24栅格布局,不同栅格结构中栅格区域也会有所不同,固定区域会存在于响应式网格之外,不随着页面的变化而改变大小。

图片

 

组件规范 

B端组件库的建立,常用的组件包括按钮组件、面包屑、导航菜单、分页、下拉控件、上下左右滑条、日期选择框、单选复选框、树形选择、标签页、输入框、表单、上传样式、气泡卡片、表格列表、警告提示、弹窗等。

 

按钮

按钮的五种样式:主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。

按钮的四种状态:常规、悬停、选中、禁用。

图片

 

面包屑

显示当前页面在系统层级结构中的位置,并能向上返回,用于系统拥有超过两层以上的层级结构,同时可以告诉用户当前页面在哪里,并提供导航功能。

图片

 

导航菜单

导航菜单为页面和功能提供导航的菜单功能,用户依赖导航在各个页面中进行跳转。

图片

 

分页

采用分页的形式分隔长列表数据,每次只加载一个页面。当加载/渲染所有数据将花费很多时间时可采用分页。

图片

 

下拉菜单

当选项过多时,使用下拉菜单展示并选择内容。

图片

 

时间日期选择器

用于选择或输入日期,分为固定时间点&范围、任意时间点&范围、选择日/月/年范围。

图片

 

选择框

用于在一组备选项中进行选择,包括单选框和多选框。

图片

 

标签页

通过切换不同的选项标签,查看不同的页面内容。

图片

 

输入框

需要注意输入框在输入前、输入中、输入后三种不同的状态。

图片

 

上传

通过点击或拖拽上传文件。

图片

 

表格

用于展示多条结构类似数据,可对数据进行排序、筛选、对比或其他自定义操作。

图片

 

警告提示

用于页面中展示重要的提示信息。警告提示一般分为四个状态:成功、信息注释、警告、错误(失败)。

图片

 

弹窗

用于消息提示、成功提示、错误提示、询问信息、填写表单。

图片

 

最后 

希望通过这套B端设计规范,能让你对B端系统有一个全面的了解。在之后的文章中,设计夹会持续分享这些设计规范的具体用法。

例如那么多的B端组件,实际上每个组件都值得单独用一篇文章来仔细研究如何使用。

如果你想学习更多关于「B端设计」的知识,记得及时关注文章推送哦~

最后设计夹分享一套简约风格样机模型供大伙包装作品时使用,这套样机包含手机端、Pad端、手表端、PC端等多种尺寸,有PSD、Al、XD三种格式,样机已打包好, 大家后台回复关键词即可领取。

领取方式:关注公众号,后台回复【样机】获取源文件

图片

慢慢来比较快,希望对你有所帮助!

 

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

作者:Fix-

转载请注明:学UI网》从设计实战中,总结了这份B端产品设计规范


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

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

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

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





基于数据的体验洞察与验证—GSM模型

seo达人


我们为什么要使用GSM模型

常规工作中,需求往往由PM发起,UE团队到底如何跟PM、FE等团队成员协同,达成目标共识,是我们值得讨论的。

图片

因此建立一套科学的模型,通过对目标的设定来倒推过程,结合定性和定量研究,与项目组就目标可以达成共识,并且更加准确的反应出产品目标中的用户体验质量,这套模型就是GSM模型。

 

GSM模型的简介与定义

“GSM”是Google提出的一种自上而下度量用户行为的方法,通常用于衡量产品/项目目标的实现程度。通过对目标的设定来倒推过程,精准设定指标体系的一种量化研究方法。适用于产品设计中的各个角色。

图片

  • 目标:需要解决的问题,通过对产品(项目)目标拆解推导出用户体验目标,体验目标辅助产品目标达成;
  • 信号:设计目标实现后所产生出的现象,设计目标是信号的必要条件;
  • 指标:是对用户现象的量化,也就是信号所得出的可衡量的数据化现象。

 

GSM模型的使用场景

GSM模型可适用于产品设计中的各个角色,对交互设计师尤为重要,交互设计师作为连接产品、用户、设计的中间一环,不断在业务和体验之间博弈,寻找平衡点。

图片

通过GSM模型对产品目标进行分析,结合业务目标与用户需求,找到改进机会点,在设计中帮我们斧正设计思路,对方案不断优化,上线后进行方案效果回收。

 

GSM模型带来的价值

综上所述,GSM模型基于项目目标,找出设计目标。并且可以辨别设计的优良。

 

GSM模型的具体实施步骤

图片

通过对目标的设定来倒推过程,并精准设定指标体系。

 

step 1 识别并明确目标(Goal

业务目标、用户目标、设计目标是什么?

用户要完成什么任务?我们希望他们按照什么路线走?希望他们执行什么操作?

图片

这里以手机百度APP智能小程序业务端——创建小程序表单项目改版为例,提高表单审核通过率是整个项目目标,通过拆分项目,设计目标为表单填写更快速和表单填写更准确。通过确定设计目标继续推到用户表现。

 

step 2 推导目标对应的表现(Signal

什么用户行为/态度指示了目标达成?什么样的感受与目标失败/成功相关?

图片

从目标——信号可以是一对多的关系,根据用 户行为在不同的行为阶段会有不同的信号表现,以用户不同阶段观测用户的不同行为表现。

  • 进入 —— 通过各种途径进入页面
  • 发现 —— 在该页面中浏览、查找自己所需要的信息
  • 辨别 —— 然后通过图片、标题等内容以及设计形式来识别有效信息
  • 行动 —— 找到后用户想了解详情,点击链接进入

这里还以手机百度APP智能小程序业务端——创建小程序表单项目改版为例,将设计目标转化为用户行为。

 

图片

 

step 3 找出关键的数据指标(Metric)

依照用户的行为表现,观测对应的数据指标,通过这些可量化、可衡量的数据指标进行数据分析并指导下一步的优化迭代。

1. 进入 —— 作为用户进入的页面,在这一步经常发生的问题是退出,往往会产生两个对应的指标

  • a. 作为用户在网站或APP的着陆页,用户离开为跳出
  • b. 非网站或APP的着陆页,用户离开为退出

往往,在这一行为中“跳出”指标可以衡量页面内容传达与用户目的匹配程度,是否符合用户的心理模型,这也是绝大多数网站首页最重要的数据指标之一。

 

2. 发现 —— 用户来到页面中都要先浏览的过程

在这一步,设计师关注的问题是页面中的用户视觉流,关键信息能否被用户快速锁定。

图片

 

3. 辨别 —— 当用户发现关键信息后,需要通过识别文字或样式来判断当前的信息是否与自己的目的符合,并决定是否要继续采取后面的点击行动。这里设计师关注的是信息的易识别性,来快速帮助用户做出决策。

关于识别性的指标,归纳出3点来进行衡量:

  • a.鼠标悬停时间
  • b.后台报错率
  • c.人均点击次数(适用特殊控件,如筛选器等)

 

4. 行动 —— 用户在站内内容的点击

“点击”数据是用户行为中最重要的一点。不仅仅是单个页面,用户在站内行为路径分析中,点击是作为路径中一个节点的结束,下个节点的开始。所以我们主要针对图中的“站内分流”进行分析。

在首页的分流数据中,作为设计师主要关注两个指标:

a.不同内容的点击占比

b.其后续路径中的目标转化质量

图片

再次回到我们的工作案例中,根据用户行为表现拆分成数据指标。

图片

综上所示,通过表单可视化、精准引导、组件升级的方式,完成项目与设计目标,最终改版成功。

图片

 

结语

GSM模型是一种综合数据验证模型,在使用过程中可以结合头脑风暴、市场调研、可行性测试等方式共同使用。

图片

 

原文地址:百度MEUX(公众号)
 
作者:百度APP用户体验
 
 转载请注明:学UI网》基于数据的体验洞察与验证—GSM模型

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

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

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

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



如何有效提高你的思考能力!

seo达人


1.我们的思考方式

如果想要快速有效的提升我们的思考能力,那么首先需要了解,我们平时在遇到问题时是如何思考的。

比如,领导叫你去负责一个产品的设计语言定义,这时候,出现最多的可能会有以下两种情况(完全不知道的已经排除):

第一种情况:脑袋里面有一些不完整的零散知识,也不知道怎么组织运用。

图片

第二种情况:脑袋里面有完整的零散知识,并且能组织成一套完整的方法论,还能很好的推动实现。

图片

这两种最根本的区别是第二种知识结构已经有了明确的解决方案,第一种非常零散的知识。

可能有人说,第二种都是很资深的设计师了,肯定能做出来,其实大部分人都可以,只要你的知识图书馆里面有相关可组织起来的知识。

任何人都是这样的,在我们在遇到问题时,一般都是从知识图书馆中去搜索解决策略。

这时候,假如你搜索范围有限,知识图书馆存量较少,那么此时就会很难继续下去,没有足够的知识来支撑你完成下一步行动。相反,如果你的知识图书馆非常丰富,涉及到多个领域,那么你给出的解决方案就会更系统,更完整,更具创新性。

说到这里,那么要如何才能拥有丰富的知识图书馆,下面我们来看看,如何在日常工作学习中积累,不断壮大我们的知识图书馆。

 

2.如何丰富知识图书馆

我们解决任何问题时候,其实都在调用我们的知识图书馆里面的知识。有人可能会说是想象力,其实想象力都是基于已有的庞大知识图书馆,然后从里面挑选出来各种排列组合出来的新解决方案。

越是知识图书馆丰富的人,他们给出的解决方案就会越多且丰富,创新度也会很高。

这就是为何,我们身边有些设计师面对一个问题,能有多种解法,甚至有些设计师给出的解法会让你很感叹为何他能这么厉害。

那么如何在短时间丰富强化我们知识图书馆?最有效且最快的方式有以下几种:

1.需要定期,定计划的丰富你专业领域的知识,比如你是一名UI设计师,那么这个领域的知识你都需要了解,并且把最常用的知识多熟练,最好能掌握这个领域的几个牛逼的方法论

2.找一本书籍,这个书籍能覆盖这个领域知识基本介绍80%以上知识,那么你就知道这个领域知识架构,然后逐步去填充,形成你的知识网络。

3.找个可靠的导师,行业专家,跟着练,提升也最快。

保持学习态度,不断训练和丰富我们知识图书馆,这样我们在遇到问题时候,就可以轻松从里面调取来应用,你的思维也会更开窍。

创新思考怎么来的?就是将你的庞大知识图书馆里面的知识,重新拿出来排列组合,就是创新。

如果想要自己在短时间有明显的提高,那么开始定个目标去逐步实现。

 

3.写在最后

今天我们说了一个很重要的关键词:“知识图书馆”,我们在生活中解决任何问题都是在不断调用知识图书馆里面存储的知识。

如果你现在还是遇到问题,脑袋一片空白,不知道怎么解决,那并不是因为你笨,而是因为你的 知识图书馆的存量太少。没关系,就现在,下个决心去丰富。

分享一句话给大家:你要相信看似不起波澜的日复一日,会突然在某一天让人看到坚持的意义。

 

原文地址:功夫UX (公众号)
作者: Tony
转载请注明:学UI网》如何有效提高你的思考能力!

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

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

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

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



设计的魅力既是如此

seo达人


案例一

一串普通数字,
本身并没有什么含义,但设计就是将无意变得有意。 
图片 
 
调整数字内部的明暗,便有了形态感,但要做成一张海报还远远不够。

图片

 

 

将数字放大,调整渐变颜色,利用比例的关系合理构建文字的编排,让原有的简单不在那么随意,这便形成了海报的雏形。

图片

图片

 

 

案例二

还是一串数字,错开放置。

图片

弱化内部让数字形成了抽象化的图形结构。

图片

 

 

加上简单的文字编排,一张很有品牌形象的海报就做出来了。

图片

 

 

案例三

同样的数字,通过透视改变形态。

图片

 

 

利用剪纸的风格将简单的背景塑造出了场景感。

图片

 

 

中心构图的版式结构到中式风格,既体现了过年氛围,又保留了设计的质感。

图片

而海报的设计从头至尾也只用了那一串普通的数字而已。
这便是设计的魅力! 
 

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

作者:修先森

转载请注明:学UI网》设计的魅力既是如此

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

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

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

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




如何在PS、AI、ID中快速绘制“网格”

seo达人


图片

图片

 

构成网格的关键要素:版心、页边距、栏和栏间距

图片

 

页边距与版心

页边距是指版面上下左右留“白”的范围。

版心是指页边距所包裹的区域。目的是为了使内容看上去处于安全范围内,也符合人的视觉习惯

注:所有元素都应该在版心内编排,但并不是绝对不能超出版心,在已有规则下,我们可以将部分重要性低的元素放置到版心之外,从而为画面带来动感与张力

图片

 

栏和栏间距:

“栏”就是放置文字或图片模块的范围,“栏间距”就是栏与栏之间的距离。

在建立好“栏”的标准范围之后,主观将元素和内容进行占比分配,根据实际需要跨栏应用,让排版更具灵活性。

图片

 

在PS中绘制

在PS默认的单位为“像素”,而我们做的海报、画册等印刷品使用的单位为“毫米”。所以要先执行【编辑】—【首选项】—【单位与标尺】,把“标尺”单位改为“毫米”。

图片

再执行【视图】—【新建参考线版面】”,分别设置列、行数、装订线(栏间距)、边距。如本次我们要设置的是5X8,栏间距为5毫米、边距为10毫米的网格:

图片

新建好的网格如下:(快捷键Ctrl+;可以显示或隐藏网格)

图片

 

在AI中绘制

在AI中没有绘制参考线的命令,可以先使用“矩形工具”,绘制矩形边框作为版心。

图片

打开【对象】-【路径】-【分割为网格】。点击“预览”,行的数量选择8,栏的数量选择5,间距选择5,点击确定后按“ctrl+5”,转成参考线。

图片

新建好的网格如下:(快捷键Ctrl+;可以显示或隐藏网格)

图片

 

在ID中绘制

ID为专业的图文排版软件,在进行书籍画册排版时,一般只设置竖向的分栏。在新建文件时,选择“边距和分栏”。

图片

在对话框中分别设置边距、栏间距和栏数即可:

图片

图片

图片

然后执行【版面】—【创建参考线】,

分别设置行数、栏数、栏间距:

图片

设置好的网格如下:(按W键可以隐藏或显示网格)

图片

设计时设置网格是为了帮助你让页面中元素布局更加规范且统一,易于用户理解,灵活运用网格不仅不会限制编排形式,还会使版面变得更加清晰、生动、统一、有条理。

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》如何在PS、AI、ID中快速绘制“网格”

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

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

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

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




对话设计圆桌会-快看漫画

seo达人


 

01 如何做好情感的传递者?

漫画作品资源图往往承载了这个故事的内容、情感关系、又或者是人物性格等…,而设计者的任务就是去制造这个画面赋予它意义使用户能够迅速的得到想要传达的信息以及情感。

图片

我们所有行为的背后其实都是情感的驱动,情感塑造了我们的思维感受,以及回应整个世界的方式。所以当我们的设计激发了用户的回忆以及想象力,也就触发了情感链接。

图片

视觉设计师余肉圆围绕【什么是情感的传递者】,【传递情感的4个要点】以及【如何利用情感传递使画面更有故事性】展开了分享。

图片

她认为设计师不单单需要的是设计技能的提升,更重要的是要捕捉事物本身的情感。再去传递给大家,这才是设计师需要做的。

 

 

02 如何撩拨少年们的心弦?

图片

 

运营设计师路遥,为大家带来超燃的男性作品运营思考,他给我们科普了不同题材作品类型,如热血漫、悬疑漫、搞笑漫。并总结了两招常规应用:烘氛围、埋线索。

图片

图片

图片

图片

 

还向我们展示了一个尝试突破的完整案例-猎爱误杀,探索他们是如何主导视觉走向。

 

 

03 漫画中的字体设计与IP价值

漫画logo设计不单单是字体设计,往往还要结合故事剧情去设计,快看设计师宋宇潇从设计背景、设计原则、品类概览、女频品类分析设计思路、男频品类分析设计思路5个方面去分享他做漫画字形设计的思路和经验。

图片

图片

此外他还分享了字体选择和设计的思维导图,可套用,出错率小,希望对大家有所帮助。

图片

 

 

04 三步提升运营设计

最后MEUX的资深设计师庆爷介绍如何运用环境、信息和行为、三步掌握运营设计理论体系,结合自身参与的设计案例,希望能帮助设计师轻松掌握运营的底层逻辑,彻底解决视觉风格与活动的关系等问题。

图片

 

图片

快看的交流在2个小时激烈讨论中结束,同学们都意犹未尽,表示开拓了自己的思路。

 

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

作者:爱分享交流的

转载请注明:学UI网》对话设计圆桌会-快看漫画

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

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

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

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




好看视频品牌升级运营设计

seo达人


一、理解品牌对产品的重要性

品牌是运营中非常重要的部分,产品是品牌的生存基础,而品牌是产品的认知升华,它代表了产品在用户心中的形象,同时影响着用户自身认知世界的构建。

好看视频是一个为用户提供海量优质短视频内容的专业聚合平台。我们希望通过好看品牌运营升级强化产品调性,提升产品气质。于是针对“如何找到适合好看视频的品牌道路”进行了全面的思考和分析。

 

二、好看视频品牌化的目标

通过对好看视频视觉语言的探索与应用,形成统一品牌感知,深化用户与产品的情感链接。向用户传递产品理念,为产品建立优质形象。

图片

三、好看视频品牌设计框架

在设计初期,我们对同类型产品与用户类型进行了分析,现在很多品牌的活动视觉不只是单纯的画面展示,都开始有更加明确的设计背景和理念,但品牌不是千篇一律的,需要突出产品的特色,明确自身定位。

好看视频在升级后主打“知识传播”的内容,我们从这个角度出发,将“轻松有收获”作为贯穿产品的设计理念,思考如何通过设计来传达品牌感知。

 

图片

 

品牌不是单一样式的体现,包含了多种表现形式。在这个过程中,需要重点考虑通过哪几个维度来支撑整个品牌体系。我们梳理了以知识传播为中心观点,逻辑统一、情感渗透、个性风格、表现手法和知识内容五维一心的传播框架,运用以超级符号提取、辅助图形重构、字体、色彩、排版、动效等设计手段,将产品理念传递给用户,建立好看视频在用户心中的优质视频聚合平台形象。

图片

 

四、好看视频品牌升级

1、好看视频品牌升级海报

图片

 

品牌海报是好看视频品牌升级中最重要的环节之一,我们为好看视频九大垂类设计了九个相对应的概念场景。每个场景的中心主体均与品牌logo形状强关联,强化超级符号在用户群中的记忆度,扩大品牌影响力。

图片

 

我们对九大垂类进行了发散性思考,确认了“以好看视频logo符号为主体,通过材质、元素的结合表现垂类感受”的设计方向,带着这样的思考收集了每个垂类对应的一些情绪图。

图片

 

在测试阶段,以美妆为例,可以看出元素的罗列或许更加直接,但缺乏了想象力,形式上偏向“电商”。经过多次的尝试,最终的设计逻辑我们决定以材质为主要突破口,柔软的皮毛、细腻的膏体等具有想象空间的质感会更加触动人的感官。

图片

图片

 

我们通过质感与元素的组合,形成中心主体画面。在字体设计上,为了适配多垂类海报的应用及后续调整,在版权字库中选择了方正摩登体作为本次设计的通用字体。背景结合趣味贴纸强调轻松有收获的品牌调性。

图片

图片

图片

 

按照同样的思路完成了9张海报设计,我们以品牌logo作为容器承载不同的真实质感,结合拼贴+故障风的排版,体现品牌调性的同时,打破固有思维,注重细节和质感带来的沉浸式视觉体验。

 

2、好看视频品牌升级概念片

在完成9张垂类海报的同时,我们还规划为本次品牌升级做了一支品牌概念片,多维度对好看视频品牌扩大影响力。

如何在保持景别不变的前提下,让整条片子富有趣味性,是本次设计的最大难点。我们通过拆解优秀的动态作品,总结出了一个贯穿全片的动态逻辑。通过“元素动势、摄像机动势、太阳光动势”的相互配合,形成强关联且具备故事性的衔接转场。

[优化输出图像]

例如,利用旅游垂类的摄像机旋转,承接美妆场景。用睫毛刷的动势,衔接杠铃动势的同时,在中间直接加入剪辑的气口。

[优化输出图像]

 

将评测与人文垂类设定为正反桌面,通过翻转进行镜头切换。设定笔筒与咖啡袋同样倒下的动画,加入太阳光方向的延续,同时,将摄像机调配为速率相接。

[优化输出图像]

除了转场,每个场景的细节动画都给予了充分的表达。通过多种动态手法的组合,紧密衔接了每一个场景,保证强化品牌符号感知的同时,提高了视频的动态细节。

[优化输出图像]

 

本次品牌设计在发布会、万象大会中都得到了很好的反馈,我们的设计影响力在内外都有了非常大的提升,为后续设计树立了标杆。

 

总结

在品牌运营越来越重要的今天,成体系的设计打法,不仅规范化了设计侧的执行流程,也统一了整体的品牌感知,使得向用户传递产品理念变得更加直观,向外建立优质形象扩大影响力也变得更加简单。

 

原文地址:百度MEUX(公众号)
 
作者:文娱平台用户体验
 
 

转载请注明:学UI网》好看视频品牌升级运营设计

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

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

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

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




百度文库品牌IP形象设计

seo达人



图片

 

 

百度文库作为行业内的头部品牌持续多年,把创新和开拓为己任,如今开始在品牌IP的领域上探索。市场上有很多著名的高辨识度IP,比如迪士尼的米老鼠、唐老鸭,即时通讯软件LINE的LINEFRIENDS等等。这些IP帮助品牌提高了知名度,同时也为品牌带来了巨额利润,可以说IP形象是品牌的一种资产。

IP形象作为具象化的产物,能够帮助文库在用户心中建立深刻的品牌形象,扩展文库品牌线上线下多场景的影响力。当IP形象能够做到足够惹人喜爱时,它自身就会有超越品牌的个性魅力,从而反哺品牌,为文库吸引更多用户,驱动营销玩法的升级。

 

设计目标推演

图片

 

竞品分析

剖析竞品IP设计底层逻辑,找到切入点成为抓手,建立框架,理清思路后深入设计。

IP形象要与品牌承接,必须契合品牌定位。风格表达要符合时代潮流趋势与消费者的审美视觉契合。

IP形象往往承载着企业对品牌价值观的表达,同时衍生出IP形象本身的性格特点。

好的IP形象本身就带有一定的故事性,这样便于用户了解品牌的价值观。后期还可以进行二次创作,发展IP形象的周边产品,比如手办盲盒等,形成一定的文化氛围。

图片

结论:进一步剖析文库品牌,细化需求。从四点着手支撑设计:

1. 文库价值观:让每个人平等的提升自我;

2. 完善IP形象性格特点;

3. 设定完整的背景故事;

4. 选择适合的风格表达。

四个方面相互呼应,互为支撑。促使IP形象设定有的放矢。

 

形象概念设定

通过探索各种可能性,进行逐个衡量、推演讨论,初步选方向,主推其一,按照设计思路进行不断调整和优化。

图片

概念阐释:首先利用圆润的造型营造亲和力,用文库拼音首字母”W”的造型结合鬃毛设计,在视觉锤的角度上来说剪影的识别度非常有优势,同时也有山或笔架山的造型,寓意书山有路,勇攀高峰。

 

产品端渗透

图片

 

01/会员LOGO

图片

 

02/会员身份卡、挂件

图片

 

运营活动应用

01/会员买赠系列活动开屏

图片

 

02/七夕告白指南系列漫画

图片

 

03/重点垂类个性化形象

图片

 

04/表情包

[优化输出图像]

 

线下推广应用

01/IP周边文具礼盒

图片

图片

图片

 

02/IP软胶手办、毛绒玩具

图片

 

总结

各互联网品牌都有各自的成熟IP。百度文库同样重视IP形象的设计和布局,其作为一个重要的品牌概念,是科技和文化的集合体。作为文库的“代言人”,IP形象可以帮助品牌在产品、市场业务链中,发挥其自身独特的商业价值、增强情感归属和拓展应用场景。在用户体验和文化输出方面给予用户更多的温度和关怀。

 

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

作者:文娱平台用户体验

转载请注明:学UI网》百度文库品牌IP形象设计

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

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

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

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



日期与时间的一点点设计细节

分享达人

绝对时间与相对时间


绝对时间

绝对时间包含:年月日、时刻

绝对时间适用于对时间精确度要求较高的时候,比如说订单创建时间、某项活动开始/结束时间、特定节假日简称等。绝对时间在信息表达上更加精准、正式,给人确定感和安全感;但是内容显示过长,占用的空间较大。


相对时间

相对时间的展示形式:刚刚、XX分钟前/后、XX小时前/后、X天前、昨天、明天、今天等

相对时间适用于对时间精确度要求不高的时候,比如说消息、通知类功能、Feed流。采用相对时间对用户来说理解成本低,不用去往前推算出发布的具体时间点;但是不够精确、并很难衡量两个时间点的临近性。



日期与标点符号


目前主流App上,年月日的常见的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ~ 2022-12-30”,那这些日期格式是否都正确呢,日期的连接应该使用什么标点符号?


《中华人民共和国国家标准GB/T15834-2011标点符号用法》中对于连接号、点号、分隔号的使用场景有明确规定。

连接号(短横线“-”、一字线“—”、波浪号“~”):标示某些相关联成分之间的连接;

点号(.):作用是点断,主要表示停顿和语气;

分隔号(/):标号的一种,标示诗行、节拍及某些相关文字的分隔。


表示具体日期

基于国标对于连接号、点号、分割号的使用场景说明,用阿拉伯数字表示年月日时应采用短横线“-”。在比较正式的文件、公告中,日期一般不用分隔符连接,而是直接采用中文的年月日连接。


表示日期范围

Antdesign规定日期范围需要在日期或时间范围之间显示波浪号 (前后需要空格),这种方式是不符合标点符号的使用规范的。



在标示时间的起止时,应该使用一字线“”,而非波浪号“~”,波浪号主要用于标示数值范围而非日期的起止。日期带有分隔号横短线“-”时,可以采用“至”作为连接符;日期不带有分隔号横短线“-”时,可以采用一字线“—”作为连接符。注意日期与连接符之间用「空格」隔开。



时间

时间计时方法包含十二小时制、二十四小时制。在设计过程中注意区分十二小时制,上/下午和A/PM的位置区别。


日期与时间组合使用

当日期和时间连在一起时,两者之间用「空格」隔开,如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。


涉及到周的时,可以将周放在日期与时刻之间,用「空格」隔开,如:“2022-01-01 周三 16:00:00”、“2022年01月01日  周三 16:00:00”。


涉及到日期和时间范围时,可在表示日期范围的基础上添加时间,如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至  2022-12-30 16:00:00”。



专有名词


以月、日为标志的事件或节日,用汉字数字表示时,只在一、十一和十二月后用间隔号;当直接用阿拉伯数字表示时,月、日之间均用间隔号。




写在最后

设计虽然有很多的表达形式,但还是需要遵循文字规范哦。


原文地址:站酷
作者:吴大只

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

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

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

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



做最小的设计,得最大的价值

分享达人

“我们需要停止快速设计,学会减少设计。”

我们的心态需要从一次性做完全设计转变到进行小规模设计。那么,所谓小规模设计到底要怎样做呢?这篇文章来跟大家分析一下小规模的设计是什么样,它有什么好处呢?


为什么要做小规模设计


在讨论如何做之前,我们先谈谈为什么,为什么在设计、搭建和交付中小规模思维如此重要。这并不像人们想的那样,仅仅是为了让某些设计师和研究人员扫兴,他们出于某些原因喜欢对所设计的东西有一个整体的看法。


通过最小的设计来为客户或用户提供价值,可以给我们带来很多好处。首先,我们可以把一个有潜在价值的东西直接提供给某人,让他立即开始使用,而不是让他等待设计人员开发完其他几十个不相关的功能或更新。一般来说,只需非常小的变化或错误修复就可为用户产品体验带去巨大改善。


当然,有时候,设计上的变化可能不会带去任何影响,甚至是带去负面影响,这些缺陷我们越早发现越好。更频繁地运送小型成果,对我们理念和执行的反馈也能更高效地回输。


通过递交一个小规模版本,你能尽早预测未来会发生的大问题。想象一下,如果你早就知道某些功能鸡肋的表现,你根本就不会创建这些功能!想象一下,如果你不忙于搭建无人问津的庞大版本,你本可以向用户提供多少价值。尽早交付小型的设计,你就能及时获得相关信息,这些信息可以帮助你的团队对剩余的设计部分进行取舍。


通过把设计分解成可交付的小块,我们可以尽早且频繁地向用户提供价值,同时在投入大量资源之前及时获得反馈。这听起来真是美事一桩。


唯一的缺点是,小规模设计很难做得好,如果你做得不好,那还不如一口气把所有东西都设计完。

按理来说,小规模设计不应该比大规模设计难才对,但出于一些原因,许多设计师十分不擅长处理小规模设计思维。


首先,作为设计师,我们常常被教导要从整体上考虑产品和体验。这是件好事,因为我们得了解用户对产品的整个体验。事实上,大家都知道把东西分成几块来设计可能会导致不连贯和不一致的体验。


某位与我们交谈的设计师完美地解释了这一点。她的团队任务是为一个有不同类别内容的大型网站设计信息架构。工程师们想直接开始编写搜索内容的代码,但她觉得只提供一个类别的分类法是不妥的,因为她知道,一旦她评估了系统中其他类型的内容,工程师们会发现还有更多东西同样需要搜索。毕竟,你不会用搜索鞋子或汽车的标准来搜索书籍。她不希望得到一个不完整的模型,以后还得再做改进。


与我们交谈过的许多人都说,一旦设计进入市场,他们就很少有机会进行迭代和改进。当迭代和改进环节缺失时,设计者只能尽可能多地为初代版本添加细节。


当然,对于设计者来说,知道某项不完美的功能面世,且它永远不会被改进,这是非常痛苦的。毕竟这就是我们的工作。我们希望它是完美的。我们希望它能为人们解决问题。我们想让每一项作品都无愧于心。这些都是非常合理的反应。因此当我们确信完整版本会更好时,一般不会考虑交付小规模且不完整的设计。


小规模设计的意义在哪里


小不等于坏

Jobs4Pets.com上一项小型但重要的视图功能


我们经常把某项产品的初代版本称为MVP或最小可行产品。但是,人们往往忽略了”可行”两个字,而这恰恰是最重要的。当你创建一个新功能或产品的初代版本时,尽管规模再小,它也必须是可行的。它不应该存在问题,不应该无法使用,更不应该带去糟糕的用户体验。


请记住,我们进行小规模设计,并把它交付给用户,目的是为了了解关键信息。这就是生产最小可行产品的全部意义。如果我们推出了一个糟糕的、有缺陷的或无法使用的产品,我们所了解到的无非就是人们不喜欢这个糟糕的东西! 以及我们必须弄清楚,人们之所以不使用我们的新功能是因为它不对,还是因为它虽然功能完美,但可操作性太差,以至于没有人能够坚持使用。


小不等于无关功能的混杂


小规模设计、搭建和交付的另一个困难是,我们可能会倾向于一股脑交付大量的小功能,因为这些功能可以为快速构建,所以我们就先将它们做了。


思考一下,你正在构建一个让人们搜索和申请工作的界面。有很多东西需要你来完成,例如,你需要用户能从潜在雇主那里得到带有工作描述的招聘信息;你需要一个要求求职者提交他们个人信息的界面;你需要一个能让雇主审查申请的系统。你还可能会需要某种档案或账户页面,让流程双方都将信息存储进去,这样他们就不必在每次发布或申请工作时都重复输入信息。


上述所有大系统都包含多个小功能在里面。例如,申请系统可能包含暂停功能,求职者可以暂停申请,过一会再来完成。或者,发布系统可以让雇主在需要另雇他人时重新发布工作描述。


现在,作为设计师,你可能认为你需要一次性交付所有功能才能打造一个有力的招聘网站。但事实并非如此。你要做的是,确保你搭建各项功能时采用了正确的设计顺序。比方说,重新提交招聘信息的功能应该推到后面,在此之前,应当设计首次发布招聘信息的界面。同时,应该先设计出令人们查阅各种工作的方法,然后才轮到申请工作界面的开发。


每次你设计和发布的东西都应是有用的,而且应该以合理的方式出现在现有的界面上。


小但有用


最重要的是,你发布的任何东西都应该有益于目标用户。如果你有一个非常大的用户群,你的设计可能不会立即对每个人都有用,但它应该有一定的使用性,至少足以让你得到反馈,并在下一次迭代中完善版本。


对一个招聘网站来说,最小可行产品是什么?要想交付某版本以获得用户反馈,你能做的最小努力有多少?


如何进行小规模设计


小规模设计涉及很多技巧,下面这些技巧十分实用,且可操作性强,并且仍有发展的空间。例如:


理解目标

小规模设计最重要的部分就是理解你正在创建的功能或产品的核心目标。如果你的目标太大或者你对目标理解不透彻,就很容易因为 “有人可能需要它 “而继续增加一个又一个的功能。


例如前面提到的求职网站。如果它是一个普适型的招聘网站,那么你的设计将与针对专门行业的招聘网站有很大的不同。过于宽泛的目标会影响你的搜索选项、你期望显示的工作数量,以及对申请表格的要求等等。


锁定明确的目标用户,你就已经成功了一半。设计一个小型的、有针对性的功能或产品对你来说作用更大,所谓为 “所有人 “设计的大型功能,实际上对任何人都没多大用处。


做好一件事

假设你正为你的求职网站设计信息表。你可能想广泛地构思,试图了解雇主和求职者可能需要的所有不同的报告,然后把它们都设计出来。

Jobs4Pets.com的信息报告案例


花时间研究哪些报告形式最好用是完全合理的,但不妨考虑一次只设计和搭建一种,最好先做研究,找到那些价值最大化的报告形式。为什么要把时间消耗在搭建价值最小的报告形式上呢?这样反而浪费了用户时间。用户可能根本就不需要你手头搭建的那些逊色的报告形式。通过一次只设计和发布一种类型,你会得到更快的反馈,且能定期为用户提供价值。

一次仅设计和搭建一种类型有助于为你的用户提供最大的价值


这种设计思维不只适用于报告。如果你打算发布多种类似的产品,看看是否有可能仅从一个开始,到后期再逐渐增加。


不要从代码开始


设计一个新功能或产品的方式有很多,我们可能会在会议上花大量时间来争论最佳的方式。


理想情况下,我们可以搭建许多不同版本,然后看看哪个版本更受欢迎,但这导致了另一个问题:编程和代码成本不菲。另一方面,原型和实验法可是相当便宜。


与其直接跳到设计完整的功能,让工程师们立即开始工作,不如尝试设计实验。试试礼宾服务测试或绿野仙踪实验。建立一些交互式的原型,与用户一起测试。


没有规定说设计师只能设计像素般完美的界面,我们也可以成为实验设计师。

不要立即面向广大群体


设计师在向人们交付不完美或未完成的设计时,常常很在意的一件事情是,用户可能会感到失望。毕竟,推出半成品最终可能会对产品和公司产生非常不好的影响。


但向一小群用户提供内测产品就完全不一样了。在几十个甚至几百个用户身上测试新的设计,可以为团队提供巨大的价值,即发现关键的见解和潜在的问题,同时不会有让整个用户群失望的风险。


不要再古板地认为,推出新功能必须通过新闻发布和市场推广才能实现。虽然只是在几十个测试者或一些内部人员中提供内测版本,但你仍然在向用户提供价值。如果交付对象的规模较小,你对失败的担心会少很多;如果你先在较小的受众中测试了你的设计,你失败的可能性也会少很多。


接受不完美


除了上述技巧,团队还应学会接受不完美。事实是,世界上不存在完美的产品;此外,在多数情况下,我们甚至不知道什么是完美。显然,我们不应该向人们提供无法使用、有缺陷或不安全的软件。但是我们也不需要花几天或几周的时间去纠结每一个像素和每一点抛光,特别是在连这个功能是否有用都不确定的情况下。


想想看,我们到底把多少时间浪费在所谓华丽的设计上,而对应的产品甚至无人问津。比起纠结细枝末节的完美,如果把时间花在测试想法和找到人们真正想要使用的产品上,我们的收获会更多。


允许迭代


当然,如果你要接受不完美,最好也愿意进行迭代。我们接收到设计师在敏捷软件开发团队工作时最大的抱怨之一是,团队从不进行迭代。团队会非常努力地工作,争取快速交付,然后从不反思或改进功能。有时候部分团队甚至不测试产品效果。


如果你从不回头去改进(或扼杀)你不完美的功能,那么没有人会放心地发布他们认为可能不完美的东西。我们必须致力于向用户学习,不断改进已经投放在外的功能和产品,而不是不停地向用户输送无效产品及功能。

原文地址:站酷
作者:马克笔设计留学

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

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

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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档