首页

设计定义

鹤鹤

人类一切创造性活动造物活动都可以称为设计,这是从广义角度去理解设计的定义。从狭义角度理解设计的定义,设计就是构想和解决问题的过程。应以人为本,通过系统化的方法满足消费者的市场需求,进而产生功能价值审美价值


除了广义与狭义的设计定义,处在不同时期不同的人站在的角度和立场均不同,产生的观点是各抒己见,各不相同。在国内考研只用采用其中一种定义就可以了,但知识是要去学习和理解的,这里我研读了近100本书籍,把所有关于设计的定义都整理出来供大家学习与参考。

 


设计的定义


彼得·劳伦斯(美国设计学会创始人):设计是一种手段,通过这种手段可以提高生活质量,并能有效的满足人类的需求


王受之教授:设计是把计划、规划、设想、解决问题的方式,通过视觉化的形式传达出来的过程


《大不列颠百科词典》(1786年 / 工业革命前):设计指的是立体、色彩、结构、轮廓、线条、形状、比例、动态和审美方面的协调

 

《大不列颠百科词典》(1976年 / 工业革命后):设计常指拟定计划的过程,又特指记在心中或者制作成草图的具体计划

6:19 STUDIO - slava balbek / Nata Kurylenko

 


《简明不列颠百科全书》(1985年 / 中美编译):Design包含两个层面,第一个层面指“心理上的计划”,即计划的思考与拟定计划的过程;第二个层面指“艺术计划”,即把计划中的想法制成草图的具体计划。

 

《韦伯斯特大辞典》(名词方面):针对某一目的在脑中形成的规划;根据对象预先所作出的模型;文学、戏剧作品的轮廓;音乐作品的框架;视觉艺术作品的线条、细节、外观等方面的相互关系

 

《韦伯斯特大辞典》(动词方面):头脑中的想象与计划;策划;创造功能;为了达到目的而进行的创造、规划和计算;用商标、符号表达;对物象的描绘;零部件的形状与配置

 

《牛津英文词典》(1588年):设计是由人所设想一种计划,或是为了实现某物而做的纲要

6:19 STUDIO - slava balbek / Nata Kurylenko


《授予博士硕士学位和培养研究生的学科专业简介》(1999年):设计是一门多学科交叉的、实用性的艺术科学,其内涵是按照文化艺术与科学技术相结合的规律,创造人类生活的物质产品和精神产品的一门科学

 

柳冠中教授《工业设计学概论》:设计应该被认为是一种方法论,应提高‘一切人为事物’的角度来认识

 

李砚祖教授:设计是人类改变原有事物,使其变化、增益、更新、发展的创造性活动,设计是构想和解决问题的过程,它涉及人类一切有目的的价值创造活动

 

尹定邦教授:设计其实就是人类把自己的意志加在自然界之上,用以创造人类文明的一种广泛的活动,设计是一种文明

6:19 STUDIO - slava balbek / Nata Kurylenko

  


我国《高级汉语大词典》:按照任务的目的和要求,预先设定好工作方案和计划,绘制出为解决这个问题而设计的图案

 

我国综合字典《辞海》:设计指“按照任务的目的和要求,预先定出工作方案和计划,绘出图样,为解决这个问题而专门设计的图案”

 

赫伯特·西蒙《人工科学》书中的一段话:凡是以现存情形改变成向往情形,为目标而构思行动方案的人都是在搞设计

6:19 STUDIO - slava balbek / Nata Kurylenko  



阿切尔:设计是围绕目标的问题求解的活动

 

路甬祥:设计是在一定的约束条件下,最合理的满足社会的需求


佩齐:设计是从客观现实向未来可能富有想象力的跨越

6:19 STUDIO - slava balbek / Nata Kurylenko

 


保克:设计是获得足够把握前,对未来产品尽可能多地模仿

 

乔尼斯:设计是表达一种精粹信念的活动

 

里斯维克:设计是从无到有的创造,创造新的、有用的事物

 

 


考研知识


国内的知识大多数采用国内教育工作者对设计的定义,例如我们在网上查关于设计的定义,一般都会出现相同的搜索结果,也就是《现代汉语词典》对设计的定义,即“在正式做某件工作之前,根据一定目的的要求,预先制定方法、图样等。

6:19 STUDIO - slava balbek / Nata Kurylenko

 

另外考研的知识点还有设计的核心内容知识,包括以下三个阶段;


第一阶段 计划,构思的形成

第二阶段 将计划、构思、设想、解决问题的方式利用视觉化的传达方式表现出来,如图纸、制作效果图、模型等

第三阶段 将设计的方案实施完成    

 

 

 

附加知识


以上指的设计的定义是不包含工程设计的,工程设计主要解决人造物(机械、设备、交通工具、建筑等等)中的物与物之间的关系,包括产品的内部功能、结构、传动原理、组装条件等。


工程设计主要是研究和实施建筑、城市、景观设计与工业产品(建筑属于工业)、造型设计、功能性设计、结构设计、可靠性设计、生产工艺设计、生产系统集成设计等的工程技术领域,工程设计更注重产品的实施与落地。

6:19 STUDIO - slava balbek / Nata Kurylenko

工业设计就是对工业产品的使用方式、人机关系、外观造型等做设计和定义的过程。他将产品的功能通过有型的方式创造性的体现,使得工业产品和人的适当的、高效的,甚至有情感的交流得以实现。是一种产品与人沟通的语言,是工业产品和人之间的重要纽带,是用户体验的决定性组成部分。


文章中提到的设计是解决物与物关系的同时,更侧重于解决物与人的关系问题,考虑产品对人的生理、心理的作用。因此设计是包含艺术审美同时又有科学技术的人文科学、社会科学相结合的艺术。

文章来源:站酷   作者:罗耀_系列

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

B端Dashboard设计指南系列

鹤鹤

Dashboard的含义

前言

Dashboard在B端设计的工作中是一个绕不开的话题,在此我根据自己工作中实际的一些经验总结给大家归纳出一篇更符合工作场景中Web端的Dashboard设计内容。


什么是Dashboard?

Dashboard的中文直译是仪表盘,最初与dashboard相关在界面出现的是苹果电脑系统Mac OS X v10.4 Tiger操作系统中的应用程序,用作称为“widget”的小型应用程序之运行基础。



B端常见Dashboard

2013年Stephen Few写的《Information Dashboard Design》中指出“仪表盘是为了实现某些特定目标而对重要信息进行的视觉传达,对一屏上的内容进行组织呈现使人一瞥便能掌握其所传达的信息。简单点来说就是:为用户提供全局概览,让用户快速掌握工作进展及进入工作状态并可以访问最重要的数据,功能和控件。



Dashboard设计案例

以下是Dashboard常见4点设计不是很好的案例,现在带大家一个个看下怎么才是更为合理。


案例一:右边Dashboard上的信息做了层级的区分,相对左边更加直观。


案例二:左边Dashboard颜色偏荧光色,色彩语言相对右边不适合长期工作使用。


案例三:设计方案时没有采用格栅格化解决适配对不齐等等问题


案例四:dashboard模块之间间距没有呼吸感。



B端Dashboard的功能分类

设计师需要了解的功能分类

B端设计中,设计师要实时了解哪些是重要内容以及核心数据。Dashboard可以直接传递出:“业务整体状况如何?有哪些关键指标?各指标的运行情况分别如何?哪些指标出现异常?需要用户做些什么?”。由此可知,B端Dashboard产品中大多数都以看为主,辅以功能控制。主要分为监控操作、分析处理两大场景。当业务较为复杂时,可以用战略概览场景提供快速入口。



1.监控操作:

使用户可以一目了然地检查其状态,提供关键指标实时监测并且告知异常状态。更重视实时观看状态。


2.分析处理:

通过数据图表,配合控件进行不同维度的数据分析。以数据为中心,并显示尽可能多的相关数据视图。


数据性Dashboard。数据概览可视化展示为主。帮助用户提供较为直观数据维度,更好分析决策。


综合性Dashboard,既有提供数据全局概览可视化,同时也能快速在页面进行操作完成工作。国内B端产品最常出现的Dashboard功能模式。本篇文章也是着重介绍如何完成这个类型需求


3.战略概览:

在复杂的业务中,可以呈现业务分散的重点信息,用户可以通过提供入口快速跳转至相关模块。



设计前分析

了解Dashboard的用户

B端设计过程中每多了解一个维度分析就更有利于下一步Dashboard框架搭建。因此在对Dashboard有了一些简单了解之后,我们再来了解下用户场景。例如:用户是财务人员审批商户充值申请。工作人员进入dashboard之后先是进行充值打款申请。那么设计时可以考虑在Dashboard中加入常用功能:充值。并且需要给到相应充值数据概览:账户余额。每个B端产品都有自己特定工作场景。因此从用户、场景和任务这三方面考虑,可以做到帮助设计师更清晰设计dashboard布局以及设计自查。

因此以上这些信息都是需要在设计Dashboard时弄清楚的内容。



信息处理

当弄清楚需要呈现信息内容后,需要进一步对信息做处理。从用户的角度,举个例子在FMS财务系统记账中,财务需要查看季度报表。那么数据的单位以默认季度呈现会更为符合使用用户需求,准确且高效。具体可以从以下四个维度来做进一步处理:覆盖范围、时间跨度、粒度、个性定制。一般核心指标不超过7个,确定核心指标的联系及优先级。

合理的信息结构能够帮助用户高效阅读,理解内容。如何将信息碎片有逻辑地组合在一起,合理呈现和布局,选择使用什么结构视内容而定。


举个例子:

对于管理者的角色来说使用Dashboard的诉求是:及时把控业务情况

信息处理内容:

1.掌握重要业务数据:经营数据,订单数据,客户数据;

2.了解员工工作进度;

3.处理急需解决的工作任务。

对于执行者的角色来说使用Dashboard的诉求是:高效完成工作任务

信息处理内容:

1.急需解决的工作任务:待发货订单,待退款,待跟进客户

2.了解自己的工作进度

3.经常使用的功能:发布商品,添加客户,开单

4.查看重要通知公告:公司发布的公告


了解Dashboard的表现设计类型

Dashboard表现结构常见两种类型:卡片型、流程型。


卡片型

最常见就是卡片型。即将有相关联的内容进行分组呈现,让Dashboard内容归类而不杂乱无章。


流程型

内容相互之间具有一定的逻辑关系,如地理位置关系、数字包含关系、对象父子关系等,这种结构可以让对象之间的逻辑关系十分直观。很直观的呈现了资源对象之间的相互关系。



Dashboard的设计

Dashboard的表现构成

国内B端产品一般是由以下这几个部分组成的。全局导航、数据概览、待办事项、常用功能、任务进展、平台推送、数据图表。下面带大家仔细看下具体每个部分具体如何设计。


1.全局导航

在B端Dashboard中,全局导航一般由三个部分组成。平台LOGO、功能入口导航、快捷功能导航。


1.1平台LOGO

一般这里都会放LOGO,对于一些壁垒标准化B端服务,这里通常是给好标准规则,后台自动配不同客户的LOGO。因此要考虑到区域的色彩是否适用各种不同LOGO。如果是OA或是定制化B端服务,那么就可以直接定制设计。


1.2功能入口导航

就是菜单导航,在B端Dashboard一般都是在侧边。建议最多不要超过9个,遵循7±2原则。尽量将同类型归类,好好利用下二级分类。另外入口不要太深,用户容易找不到入口。尽量设计优化合并来减少用户使用负担。


在国内B端产品中,最常就是将功能入口导航放在侧边。适用于更专注功能和快速操作的系统

优点:

拓展性,一级导航的数目可以展示更多;

层级清晰,一二三级导航都可以流畅展示;

操作效率高,用户在操作和浏览中可以快速定位和切换当前位置。

缺点:

视觉动线左右折回,比顶部导航更易疲劳,

内容区的排版空间更小,需要考虑适配问题。


在国内B端结构比较庞大的后台中,通常会将功能入口导航设计为混合模式。混合模式就是将功能入口分为顶部与侧边两边都有。这是因为侧边模式已经无法层级扩展性已经无法很好的满足产品架构了。

优点:

层级拓展性强,可达四、五级导航。

缺点:

操作难度上升、视觉动线更复杂。



还有一种模式:顶部模式,这种模式在国外产品中较多,在国内的B端产品中较为少应用。原因之一是起初最早的国内B端产品就采用这种排版模式,在国内形成了一种用户操作习惯。国外最常见的B端顶部导航:saleforces、hubspot、zoho。

优点:

沉浸感比侧边以及混合都要强,几乎不会对于用户的阅读行为有干扰,因为Web也有顶部浏览器菜单。

缺点:

一级导航栏的栏数及字段内容受限严重。国内B端产品会有很多快捷功能就更不利用采用这种模式



1.3快捷功能导航

一般包含:消息通知、账号信息、帮助中心、设置。在国内B端产品中基本上都是在右上角







2.数据概览

在B端Dashboard中,数据概览通常都是选取最关注的数据指标来展示,而不是全部数据;选取最关注的时间段,而非全部时间段。

构成:数据名称+数字

这个模块在设计表现上最重要就是信息层级的设计处理。如何能够让用户一眼就看到最关注的数据内容指标。设计时注意突出数据才是关键。设计时关键数字上就要字号大一点,甚至可以采用特殊的数字字体,例如DIN系列,来加强对比。



3.待办事项

待办事项模块通常是应用在执行角色的Dashboard中。节省工作人员寻找任务的时间,避免遗漏任务。

构成:待办事项名称+数字+可点击跳转的链接

待办事项的展示方式可以是数据可视化也可以是数据概览。但是有一点,数据必须是要能够点击的,因为待办事项就是要有入口去操作。同时也可以把待办事项平铺出来,平铺几个可以根据具体情况定。如果待办样式本身很多的情况下,可以采用tap切换的样式全部展示出来。



4.常用功能

用户高频操作快捷入口,点击跳转相应操作页面。这个模块每个b端产品都不一样,需要仔细反复斟酌是否是用户需要的高频功能。



5.任务进展

用户当前最关心的任务,常用进度条或者时间轴的形式表示。



6.平台推送

平台用来触达企业的信息,一般有产品更新动态,学习培训,客服,广告推送,活动消息(这个一般比较常出现在平台类的b端产品中)



7.卡片式数据图表

卡片式数据图表可以拆分成图表+辅助两种组成部分


7.1图表

B端设计师需要准确通过图表来表达出用户需要的维度信息。

7.1.1折线图

随时间(连续内容)而变化的连续数据,适合表现趋势。Y 轴刻度值选择要合理,以数据波动要最大化的显示


7.1.2面积图

面积图和折线图比较类似,针对只有单个数据类型有面积区域的表达效果比折线图好。数据类型尽量不要超过2个,有2个数据类型时,注意调整面积区域的透明度以及色系保持统一



7.1.3柱状图

通常用来统计累积叠加数据,数据之间能够非常清晰直观对比。柱状图的单位宽度不要是固定值,单位宽度之间间距在不同分辨率屏幕下的对比要合理。不用大圆角元素,不够严谨,太活泼。最多使用两种颜色,一种默认,一种hover或tap,保持界面统一性



7.1.4扇形图

有共同的上一级层级作为统计总合,数据之间平级且有占比。数据必须是正整数,至少两个以上数据,且用不同颜色表示




7.1.5环形图

与扇形图很相似,但是比扇形图更加直观浏览且不被抢视觉。避免过于太细太粗,控制好留白呼吸感




以上是常用的图形图表,绝不是全部。有兴趣的同学可以到以下两个网站可以利用碎片化时间扩展学习

EChart:

https://echarts.apache.org/examples/zh/index.html

AntV:

https://antv.gitee.io/zh](https://antv.gitee.io/zh




7.2辅助元素

卡片型图表的第二部分也就是辅助元素。辅助元素里面还有很多细节元素组成:标题、轴、提示信息、标签、气泡信息、功能(筛选、导出、保存)。当然在实际设计中,会根据场景去修饰删减一些元素,以此来减少冗余信息,帮助用户快速达成目标,在最少的时间内获取更多的信息。



7.2.1标题

标题是区分卡片信息,迅速让用户了解卡片图表的重要元素。通常需要斟酌严谨不重复,简洁概括。



7.2.2轴

轴上最重要的内容就是单位,将每个数据在同一轴上都是维持同种基准。便于进行数据测量。



7.2.2.1轴的细节

现在知道了轴由哪几部分构成,那么接着了解细节



轴线

轴线细节一般只考虑是否显示,在有网格线的情况下,可以考虑隐藏x/y轴线。通常显示数据的轴作为隐藏,突出视觉重点,减少不必要的线条。


轴刻度

轴刻度是轴线上的间距不宜过密,确保信息可读性以及呼吸感,根据 7±2 法则,在可见的卡片内尽量保持这个规则,可以利用抽样显示的手段来优化轴标签重叠的问题,这种一般是在连续性内容上可以使用。若轴上单位信息确实过多,虽然是连续性内容例如展示30天单位,由于本身卡片信息不是过于最重要层级,设计在相对狭小空间尺寸中,那么建议考虑在轴线上安排滚动条,并将重看单位放置前位。设计特别注意点,将滚动条设计作为辅助元素不宜抢视觉。


网格线

网格线是用来辅助图表数据直观对比的,增加数据更快速的阅读性。举个例子:数据展示轴线在左边。那么离左边最近的数据图形可能不需要网格线就能立即对应到相应数字。但是越靠近右边的数据图形就相对比左边的数据图形就比较难一眼识别。因此网格线也担任了刻度尺的功能。在设计网格线时要注意网格线更多是辅助的角色。表现类型可以选择虚线或是实线。但是要把握好颜色选用不抢视觉重点又能看到。




7.2.3提示信息

以对照的方式来理解可视化对象的项目归类信息,总结图形形状和文本组成内容。



7.2.4标签

在图表中,标签是对当前的一组数据进行的内容标注。根据不同的图表类型选择使用。



7.2.5气泡信息

当标签默认不显示,气泡信息一般是鼠标tap或者hover时,显示该位置的数据。在简洁的页面中,也能让用户直观看到信息对应数据结果



7.2.6功能

这个模块涉及的内容偏多,在表单页面更常出现,以后有机会可以单独说。一般常用功能如筛选、导出、保存。可以让用户控制和友好的体验



确定B端产品的设计风格

首先tob的产品dashboard说到底还是给使用用户所使用,也就是“人”。所以通常情况下dashboard除了传递出用户想要的数据信息,还要传递服务于人。此外最重要的是B端设计师需要理解项目背景。例如某个财务应用平台不属于科技未来感,而是突出一种安全,高效,具有客户亲和力的商业产品特性。那么关键词:服务、轻松、高效、亲和、精致。那么一个干净、相对轻量、统一的Dashboard UI界面就提炼出来。



色彩

常说色彩是一种情绪版,在Dashboard设计中,色彩也是映射关键词的非常重要一个环节



字体

B端产品一般都是以数据为主要信息源,针对一些关键信息指标时,可以采用特殊的数字字体。由于本身数字字体包内存不大,所以也方便调用。例如DIN系列等等



设计稿尺寸

本篇内容都是针对pc端内容,具体移动端以后有机会会分享。大多数B端设计师都知道以1440x900设计,但是在工作中会以埋点数据了解到事实上真实场景还是以1920x1080的尺寸为多数。毕竟时代不一样了。以1440做设计主要还是考虑从上下兼容的角度的。B端与C端不同,C端往往照顾大多数的用户群体或是主要消费力群体。但是B端一般不会放弃任何一个用户,哪怕定制化。这个在C端是不太现实的。因此适配对于B端产品来说也是尤为重要。



设计原则

上面的内容更多是阐述每个部分的内容,实际工作中设计Dashboard时不一定按照那个顺序进行,因此在此再强调下设计Dashboard的设计顺序以及原则。要先弄清楚目标用户以及使用场景,确定好关键的大约7个核心指标。将用户整个流程梳理流畅之后,再开始考虑Dashboard设计执行。


同时在设计执行上也要特别注意几个点:

1.突出核心指标(7个左右)

2.信息层级区分

3.减少用户选择,尽可能默认给到用户需要的数据维度

4.界面简洁严谨

5.避免过多颜色与不统一

6.数据维度正确图表选择



设计的注意事项以及建议

1.tob的设计师要了解业务所处的周期在什么样的阶段。在探索期建议dashboard的设计应用于市面上现成的组件进行搭建,以便与研发团队一起为业务助力。更好更快的发展。

2.在tob的dashboard设计中,设计师要特别注意数据表现的落地效果

3.当dashboard只在设计层面改版,并且改版内容过大时,推荐保留旧版入口,提前进行埋点用户以便应对用户对于大版本适应缓解焦虑。如果有新功能或功能调整要及时加入一些引导设计,以便减少用户的学习成本。关于引导设计的内容欢迎参考我的上一篇文章:《B端必看的引导设计(一)》

4.允许用户定制和共享dashboard,虽然不适用于所有的B端产品,如果类似于团队协作中多种角色共用一套的dashboard平台,可以考虑引入这个功能。几组定制模块可以满足于不同角色的用户需求,并且能够增加dashboard的使用率

5.dashboard关键信息数据尽量设计在一屏以内,作为数据可视化,内容快速浏览获知全局,并且完成任务是比较重要的。

6. 突出统计数据的变化并对异常情况作出反应

7.数字设置不一定要设置为右对齐,但是单位是金额,那么要将金额设置为右对齐,为了使用用户识别方便,快速比较。

8.设计完Dashboard一定要自查一遍,是否真的符合工作人员的使用场景。有没有理解不准确的地方。



最后

为什么b端设计师要懂得Dashboard,在很多b端业务场景中,有个特点,设计师常常会接到大量数据展示要求。如果设计师对dashboard缺乏认知,就有很大的可能性会造成信息杂乱,并且在Dashboard的界面中充斥着一些无关紧要的指标,这就是失去了Dashboard存在的意义。另一方面在b端产品中,Dashboard往往是以首页的形式出现的,是非常重要的。

文章来源:站酷   作者:一九互七

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

目标导向设计介绍

涛涛

前言

设计驱动已经成为 vivo品牌重要的产品和服务理念。作为设计师,这意味着我们在承接日常设计需求外,还要主动发现并解决产品中存在的问题。设计提案,就是针对某个问题或机会点,系统分析产品现状并给出解决方案,以实现设计驱动的重要途径。

除了设计提案外,设计方法复盘、行业分析报告、流程规范建设等也可作为产出对象,受限于篇幅,本文所介绍的方法主要针对设计提案的选题。

合理的选题让设计提案事半功倍

过去的两年里,UED 团队的同学们共输出 40+篇设计提案,我本人也写过几篇,踩过一些坑,也积累了一些经验。总体来说,一份优秀的设计提案当然离不开严谨的分析过程、合理的模型选取和可落地性强的解决方案,但更前置的往往是设计提案的选题。

选题体现了我们是否定位了产品中存在的重要问题或设计机会点,决定了选用什么模型分析问题、产出什么解决方案。

大厂都在用的目标导向设计,快来学会!

△ 图1 设计提案的执行过程

选题不当可能会导致:写了一半才发现设计侧根本无法解决该问题(比如解决问题主要依赖于内容引进),或者产出了方案但因问题优先级低而无法落地。因此本文主要基于 UED 团队的实践经验,对目标导向的选题常用方法进行介绍,以确保我们的提案在“解决正确的问题”。

什么是目标导向的提案选题方法

设计提案的目的是解决问题,但难点在于:要解决的问题并不是每次都显而易见,且不是每个问题都适合用提案的方式去解决,产品有什么体验问题、哪些需要用提案来解决,很多时候需要我们主动去发现和定义。

目标导向的选题方法,就是指从不同的目标出发,通过分析或拆解目标,来定位问题或机会点的选题方法(除此之外,我们还可以通过用户体验地图分析、行业趋势分析等来发现问题,这些本文暂不涉及)。

“设计是围绕目标的求解活动① “L. Bruce Archer

按照双钻模型,确保”做正确的事”需要经历发现到收敛的过程,将其用于选题便是选题收集、选题评估两个阶段。在选题收集阶段,我们从体验设计所针对的不同目标出发,通过对目标的分析和拆解找到待解决问题,初步确定多个选题方向。在选题评估阶段,我们需要对前一阶段得到的若干选题进行价值和提升空间评估,最终定义出合理的选题方向。

大厂都在用的目标导向设计,快来学会!

△ 图2 目标导向的提案选题方法

1. 选题收集阶段

体验设计是用设计的思维和方法达到某种目标,互联网产品的体验设计重点关心的目标主要有商业目标、用户满意度、战略规划。因此,以目标为导向来收集选题,就是指通过分析影响以上 3 个目标达成的关键因素,来收集多个备选选题。

通过拆解商业目标收集选题

通过对留存率、日活数等核心数据指标的拆解来定位关键影响因素、确定提案方向,能够让提案结果更易量化、产出方案更易落地。

Step 1 了解产品当前阶段的主要商业目标

一般来说,产品侧每个季度或每年都制定 OKR 或 KPI(如将 vivo 商城复购率从 x%提升至 y%、将浏览器的日活从 x 万提升至 y 万)。设计师需要明确产品的核心数据指标是什么,尤其关注其中与用户体验相关度高的指标。以信息流产品来说,如果其内容主要来自于合作商,那么我们更应该关注阅读时长和留存等指标,而非资讯内容丰富度指标。

Step 2 对商业目标按多个维度逐层拆解

明确目标后,需要对其进行拆解,才能将结果目标转化为设计可发力的过程目标。目标的拆解需要确保每次拆解都要符合 MECE(同一维度、不重不漏)原则,常用的拆解维度如下所示。

大厂都在用的目标导向设计,快来学会!

△ 图3 商业目标的常用拆解维度

以 vivo 商城为例,假设其 2021 年的目标是:成交转化率提升 47.6%,达到 0.26%(数据已经过脱敏处理)。我们可以对影响目标达成的要素按照行为路径进行如下拆解(本案例也可按公式法进行拆解):

大厂都在用的目标导向设计,快来学会!

△ 图4 成交转化率拆解案例

Step 3 定位影响目标达成的关键因素

结构化拆解目标后,即可结合产品迭代历史和现状,对影响目标达成的关键要素进行定位,进而初步确定提案方向。接上文案例,由于下单→支付环节(即结算页)的体验优化刚进行不久,且通过购物车下单的用户占比较少,因此可将提案方向定位至商品详页下单转化率提升,初步确定选题“商品详页下单转化率提升设计提案”。

通过产品战略规划分析收集选题

如果说商业目标是产品预期达到的结果,那么战略规划就是达到结果所计划采取的路径。从战略规划出发,构建新功能、解决新问题,协助产品达成战略规划,是提案可尝试的重要方向。

方法 1 通过构建新功能帮助产品达成规划

不同于商业目标,战略规划往往已经给出了接下来要重点发力方向、或给出了功能范围。但一些情况下,规划并不会具体到该方向上要做哪些功能以及做成什么样。因此,设计师可以基于战略规划,以提案的形式对设计机会点和方案进行详细分析,以协助产品达成规划。

以 vivo 的一款视频产品为例,为了提升时长,产品侧计划 Q1 季度提升视频内容消费深度,但尚未给出从功能层面具体要做哪些改进。因此我们将提升用户消费深度为提案目标,深入分析了深度消费的现状和场景,提出了若干设计优化建议。

方法 2 通过解决新问题帮助产品达成规划

由于产品功能模块之间存在耦合关系,规划中的新增业务可能使得已有功能体验跟不上业务要求(比如信息流产品发力视频方向,可能会对下载视频的体验带来新要求)。通过分析新增业务涉及的场景和使用链路,发现链路中可能出现的新问题,是从战略规划出发确定选题的方法之一。

以 vivo 帐号业务为例,有个性化头像昵称的帐号一直以来占比都较少,由于之前社交场景较少,这种现状对产品体验影响不大。但随着公司在直播、视频等内容产品投入的增加,社交场景逐渐变多,头像和昵称也逐渐成为用户社交的阻碍因素(比如使得主播与观众无法正常打招呼)。因此我们对现状造成的问题进行了系统摸排,确定了将“提升帐号用户信息完整度”作为提案方向。

通过用户满意度分析收集选题

除帮助产品达成商业目标和战略规划外,提升用户满意度也是体验设计的重要目标。基于产品用户满意度现状和目标分析,我们有望快速定位产品中的低满意度模块,确定提案方向和范围。

方法 1 通过满意度调研数据定位问题

选题前期可广泛阅读相关调研资料和用户反馈,对产品的满意度情况有较为全面的认识。用户满意度可能来自于以下渠道:

  • 用研团队提供的用户调研报告
  • 可用性测试所发现的问题或优化建议
  • 论坛或内部员工的体验问题反馈

由于不同渠道(甚至同一份报告)得到的满意度数据可能较为分散,我们需要将低满因素按功能模块归类,以便更好地定位问题。以 vivo 商城为例,通过阅读商品详页用户满意度报告,并对低满意度反馈进行归类,我们发现低满因素主要集中于以下两个方面:

大厂都在用的目标导向设计,快来学会!

△ 图5 商品详情页评价数据归类

明确了低满模块及问题归因,便可从问题出发得出提案主题。通过对 vivo 商城商详页问题的归因,可确定如下提案主题:“商品详情页信息展示优化设计提案”或“评论发表率提升设计提案”。

方法 2 通过用户情绪曲线分析定位问题

即使没有满意度调研数据,或有整体满意度数据但没有具体到功能,我们仍然可以通过绘制用户体验地图、分析用户情绪曲线,来定位满意度低的模块、确定选题方向。

绘制用户体验地图的方法和传统过程的区别不大:首先明确产品中用户的主要任务或目标,列举出用户的主要行为路径;然后基于用户的目标,考虑用户在每个环节想要的是什么,分析当前行为路径中可能存在的用户痛点或机会点。需要注意的是,由于只是收集提案选题,对场景和问题的分析不必过于深入,只需发现哪个任务或模块体验问题较多即可。

比如通过对 vivo 视频用户观影行为的兴趣曲线分析,我们发现看剧方面的体验问题不大,但找剧(尤其是看剧前的找剧)存在的痛点较多,因此可将找剧行为优化作为提案方向。

大厂都在用的目标导向设计,快来学会!

△ 图6 追剧行为用户体验地图(已简化,仅供参考)

方法 3 通过产品功能竞品分析定位问题

如果说情绪曲线是通过分析用户执行任务的流程来发现问题,那么竞品分析则是通过分析产品所满足的用户需求来发现问题。虽然功能多并不能代表体验好,但基础功能的缺失也可能带来体验问题。因此从功能范围的维度进行竞品分析,定位基础体验较差、或设计机会点较多的模块,也是收集提案选题的方法之一。

为了让我们在做竞品分析时更加聚焦,对于复杂度较高的产品,我们有必要先按照功能模块拆分,复杂度越高拆分粒度越细,反之则越粗。以 vivo 浏览器为例,若只拆分为搜索、信息流模块则粒度太粗,可将某个模块继续拆分,以便进行竞品对比时更加聚焦。

大厂都在用的目标导向设计,快来学会!

△ 图7 浏览器信息流功能模块拆分示例

拆分功能模块后,接下来就是选择竞品了。需要强调的是,针对某个模块做竞品分析,竞品应优先选取该功能模块做的相对成熟的、有特点的竞品,而不是只选择主属性相同的产品。比如要分析浏览器信息流评论功能与竞品的差距,选取的竞品可不局限于浏览器类产品,网易云音乐、今日头条等 APP 都可作为对比对象。

选取竞品后,可从结构层、框架层等方面对本品和竞品间的体验进行对比,以便发现存在明显体验短板的功能模块。为了方便定位问题,可通过模块子功能对照表对完整性进行可视化对比。当然也可以从操作反馈、美观度等维度对比。

大厂都在用的目标导向设计,快来学会!

△ 图8 信息流评论与主流竞品功能对比

找出功能缺失严重、或使用体验明显低于竞品的模块后,可考虑将优化该模块的体验作为选题。比如通过将浏览器信息流评论模块与竞品对比后发现,其整体体验均远低于竞品,因此可考虑将“信息流评论优化设计”作为提案选题方向。

小结

以上是 3 个以目标为导向发现问题、收集提案方向的方法,可根据产品现状选择部分或全部使用。发现问题阶段一般来说需要至少得到 3 个以上待选提案主题,以便进一步评估确定。

2. 选题评估阶段

得到多个备选主题后,接下来我们需要对其进行综合评估,并最终筛选确定一个(如果是多人参与,也可以确定多个)当前阶段重点着手解决的问题。

规范化选题描述

仅仅一行选题题目并不能帮助我们清晰地了解其价值和背景,为了方便评估和对比,我们需要将选题的描述规范化。由于设计提案选题和研究论文选题过程类似,因此可以借用《研究是一门艺术》②中给出的论文选题三段式模板:“我打算写_,因为我想_,这样就能_”来清楚定义选题的题目、要解决的问题、以及期望达成的目标。比如,我们打算以提升商城评价发表率为提案方向,可将其规范化描述如下:

大厂都在用的目标导向设计,快来学会!

△ 图9 提案选题描述模板

对选题的价值和预期结果进行评估

通过模板我们描述了提案要解决什么问题、以及解决该问题给业务带来的价值。接下来需要对备选选题按业务价值和提升空间两个维度进行评估,目的是排除“问题存在但价值较小”或“价值大但设计侧难以解决”的选题。

当备选选题难以决策时,我们也可以绘制一个简单的二维坐标对其进行量化评估。比如,假设选题 1 是优化购物车使用体验,选题 2 是提升商品搜索效率,如果前期预研发现设计侧提升空间差异不大,但优化搜索带来的价值相对较高,那我们就可初步确定选题 2 为提案方向。

大厂都在用的目标导向设计,快来学会!

△ 图10 提案选题评估维度

与设计 leader 或产品经理沟通确认

受限于经验和视野,设计师个人对选题价值的评估和设计 leader、产品经理间可能有所不同。因此正式敲定选题前,最好与设计 leader 及产品经理进行同步,达成一致后方可正式开始提案的撰写。

小结

该阶段的目的是对前期发散得到的选题方向进行评估筛选,以便将个人精力聚焦在提升空间大、价值大的选题上。为此我们首先需要按模板对选题方向进行整理,再对选题按设计侧提升空间、业务价值大小两个维度进行评估,最后与相关方沟通确认,最终敲定选题方向。


文章来源:优设   作者:VMIC UED.Vector

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


辞典精译 | UI组件要点「狙击」:文本栏及表单设计奥秘解析

鹤鹤

文本栏&表单设计 


表单已经存在了很长一段时间,自诞生以来极大地简化了起草申诉和各种法律诉状的任务。随着信息与处理技术的进步,收集数据的手段也在不断发展,而印刷表单已存在多年,我们可以从其设计中学到一些技巧。



文本栏解析

用户可以在文本栏内输入信息,它们通常以表单和对话框的形式出现。文本字段组件的设计应为交互提供清晰的功能支持,使字段在布局中易识别、易填充和可访问。



以下是组成文本栏的关键要素:

容器:可交互的输入区域;

输入框:在文本栏中输入文字;

提示:告诉用户给出的表单字段是什么信息;

占位符:是所需信息的描述或示例,用户输入正确信息内容后被替换;

帮助程序或验证文本(可选):单独出现或以验证消息的形式出现;

头部图标(可选):描述文本字段的输入类型;

尾部图标(可选):输入文本的附加控件,例如清除,隐藏/显示等。


01 文字栏类型

它们大多数都是相对基础的文本字段类型,被修改成了处理特定类型的信息,例如信用卡号。以下是我创建的UI中最常用的一些输入类型示例:



02 对收集数据使用适当的输入类型

为收集的数据提供帮助规避错误,让用户可以正确的输入信息,从而使过程简单高效。



03 文本栏必须根据状态和交互更改外观

文本栏的状态可以通过视觉提示来实现,输入信息时的状态有以下几种:未激活、悬停、禁用、激活,验证、错误。所有状态应清楚地被区分开,并在整个表单和应用中保持一致,简洁明了,不要误导用户。



04 选择最佳的文本栏样式

通常标签定位有三种:顶部、左侧和右侧对齐。最适合的样式将取决于表单的大小、主要目标、组件库和要为其设计的平台,但它们都有各自优点和缺点。



谷歌的“材料设计”指南中,普遍使用的下划线输入并不是最佳选择。有趣的是,在一项研究结果中发现用户更喜欢带圆角的输入框。


05 左对齐标签

当用户不熟悉所请求的数据时,这是一个不错的选择。

优点:易于标签伸缩,充分利用垂直空间;

缺点:标签与对应的文本栏,距离过元,增加用户阅读的时间成本。



06 右对齐标签

与左对齐标签相比,完成时间快了将近两倍。

优点:标签和输入栏靠近,限制了眼睛移动的次数,从而缩短了完成时间;

缺点:难以快速浏览表单并理解所需的所有信息。



07 顶部对齐标签

在移动设备上效果很好,因为它们不需要太多的水平空间。

优点:用户可以快读浏览输入标签和输入文本;

缺点:需要更多垂直空间。



08 文本栏长度应与输入内容呼应

表单中的所有文本栏,若设置相同长度确实会显得非常美观,但实际在操作上,却很难完成。



09 占位符不能替代标签

占位符文本消失会给用户制造紧张感,而去掉标签,用户则无法在提交表单前检查他们提供的信息。如果在设计时需要极简的表单,可以使用“材料设计”的浮动标签法。表单内的占位符文本还会使用户感到困惑,最好在字段外使用提示文本。



10 帮助用户填写表单

使用自动完成功能,填写时会帮助填写及查询。一般在输入时可以看到,对查询内容按Enter或右箭头键就完成了填写;

使用Auto-Suggest搜索关关键字和短语时,下拉列表会显示多个建议;


预填充字段会经常使用智能默认值,比如通过IP或地理位置,就能检测获取到用户所在的国家和城市,或是根据常见的场景,自己定义默认情况下的内容。需要注意的是,电子商务是一个例外,请勿预先设置与购买相关的任何偏好,比如尺寸或颜色;



还有一种应用情境,自动完成功能可以帮助用户做出正确决定或避免错误,比如用户转帐时看到账户余额等,请一定要提供该信息。


11 使用实时在线验证

指的是用户输入信息后,可以实时检查输入内容的有效性,而不是等用户提交表单时一次性检查。正确应用,降低信息出错率:

在输入内容的文字栏下方显示验证消息;

不要突然蹦出严重警告,填写的消息错误时,应告诉用户如何解决,而非责怪。



12 减少字段数量

消除视觉及认知负担,使界面看起来更加简洁。

不要将全名和日期之类的文本分成多个字段;

不要多次询问相同的信息。



13 隐藏不相关的字段

逐步公开,提供必要提示即可,帮助用户管理复杂信息。



14 使用条件逻辑

根据用户回答,条件逻辑允许在表单中自动显示、隐藏字段和跳过页面。这种方法不仅可以减少字段数,而且可以使填写过程更像对话,也更具个性化。



15 把相关领域分组

简化表单的最有效方法,其中之一则是为相关字段进行分组。格式塔心理学里有许多种分组原则,使项目有关联性:接近性、相似性,连续性、闭合性和连通性。在界面中,如果将数十个非结构化字段分组为几个可管理的集合,将显著提高表单的可用性。



16 避免使用多列布局

一栏布局能为用户创建一个清晰的完成路径;使用多列表单布局,会导致用户跳过实际需要输入的字段,将数据填写到其他位置,这会迫使用户停止甚至放弃填写。



17 将复杂的表单分为几个简单的步骤

有时,即使删除了所有不必要的内容后,某些表单还是很庞大。将大型任务分解为一系列的小任务反倒容易得多,也能激励用户坚持到最后。

显示步骤,直观地告诉用户实际进度,这能提高用户满意度并激励他们继续前进;

不要细化表单,太多的步骤非常啰嗦,只会惹恼用户;

对关键信息进行总结以减轻用户焦虑,在最后设置复查步骤,帮助用户检查。



18 最小化导航

如果表单足够大,可以分成多个步骤,那么就应该有一个单独的、重点明确的界面来专门处理它。在导航中用其他链接会破坏正常流程,导致逻辑混乱,而且在小型弹出窗口中也不建议使用多步骤表单。



19 显示合适的键盘类型

Android或iOS提供了几种不同的键盘类型,每种类型的键盘都旨在方便不同类型的输入。为了简化数据输入,在编辑文本字段时显示的键盘应适合该字段中的内容类型,同时也要注意键盘出现的位置。将文本字段放在上方区域,避免滚动展示。



20 停止荒谬的密码创建设计

允许密码取消隐藏来代替多次密码输入,这对于生成密码的应用程序也更有效;

随时显示密码要求,并显示用户满足了哪些条件,方便查看进度;

使用强度表鼓励用户创建更强更安全的密码。



文章来源:站酷   作者:UX辞典

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


用QQ动漫的设计系统案例,帮你掌握组件化思维

鹤鹤

随着项目的不断发展,设计团队在不断壮大,设计师之间的协作也越来越多,相应的沟通和协作成本在不断增加。如何才能更高效的合作,并把设计质量和一致性做的更好,是我们需要去解决的问题。

本文将以 QQ 动漫设计系统为例,分享一些过程中的思考和经验,抛砖引玉,希望对大家有所帮助。

问题之源:本地组件库

在项目初期,团队设计师的协作方式是通过一个本地的 sketch 规范文件,以复制粘贴的方式来复用一些元素和控件。在设计师协作人数不多,UI 控件改动频繁的情况下,这套流程可以比较快速的完成需求。

但随着项目逐渐成熟,协作设计师人数变多、UI 控件逐渐趋于稳定且需要复用的地方逐渐变多时,之前流程的不足就逐渐凸显出来。

用QQ动漫的设计系统案例,帮你掌握组件化思维

1. 更新通知缺乏自动化

文件更新难以做到及时有效的通知到所有设计师,且需要人工在群里发通知,告知大家更新了文件。有些设计师暂时可能没有相应的设计需求,可能会忽略更新后的文件,造成设计的不同步。或者等到需要的时候才去群里找更新的规范文件,版本容易搞错且费时费力。

2. 全局组件更新困难

由于组件样式是通过复制或修改的方式应用到界面设计中,当规范文件更新时,无法智能的自动更新修改相应的组件,需要设计师人工核对哪些地方有修改。这样很难保证大家的设计版本都能得到统一的更新,当大家使用的组件版本不一致时,输出的界面就会出现杂乱无章的情况。

3. 代码复用率低

开发没法全局调用代码样式,有些样式可能需要反复复制使用,耗时费力,并因此产生的代码臃肿,还会直接影响产品性能。

解决之道:云端组件库

鉴于设计师目前多使用 sketch+xshow 的工作流程,而 xshow 正好也具备云端管理的能力,故决定以 xshow 作为桥梁,建立一个基于 sketch+xshow 的云端设计组件库,以非常低的迁移和学习成本完成流程优化。

优化后的流程是把 sketch 本地组件库通过 xshow 上传至云端服务器,设计师通过 xshow 云端功能添加到 sketch 中,并在设计文件中嵌入这些云端组件。

用QQ动漫的设计系统案例,帮你掌握组件化思维

这样做能很好的解决上面说的问题:

1. 更新通知自动化

更新文件不用再靠人工在群里发通知,设计师也不需要去找文件,而是在 sketch 中会自动进行提醒。一旦有更新,会在右上角显示提醒消息,设计师只需要点击提醒,下载最新组件文件即可完成更新。

用QQ动漫的设计系统案例,帮你掌握组件化思维

2. 全局组件一键更新

当更新组件库文件后,界面中所有之前使用过云端组件的控件元素都会自动比对更新前后的差异,方便设计师判断是否更新。这种更新最厉害的地方在于,更新是全局的,也就是一旦你确认了更新后的内容,所有界面都会自动按规范进行更新而无需设计师再逐个筛查。这样做既能保证设计稿的一致性,也能大幅提高设计效率。

用QQ动漫的设计系统案例,帮你掌握组件化思维

3. 开发效率和质量大幅提升

开发通过代码把一些常用的样式进行封装,在一些高度复用的场景中直接调用。一方面可以通过调用的形式减少重复样式代码的复制,精简代码,降低软件包体积,另一方面也可以减少不必要的工作量还能方便后期维护。

实践之行:云端组件库搭建

想要高效解决问题,正确的方法很关键,这里我们用到的方法就是原子设计理论。2013 年前端工程师 Brad Forst 将此理论思想运用在界面设计中,形成一套设计系统,包含 5 个层次:原子、分子、组织、模板、页面,这套理论为组件库的搭建提供了思路和方法。

在实际搭建过程中,因为组件库的搭建工作量往往比较大,需要先明确流程和分工,主要包括以下几个关键步骤:

用QQ动漫的设计系统案例,帮你掌握组件化思维

1. 明确工具流程

因为是搭建云端组件库,所以首先需要有一个云端工具进行管理。针对以 sketch 为基础的云端组件库来说,常用的工具流程包括 sketch cloud,各类云同步盘,第三方云数据库自主部署等等。我们选择的 sketch+xshow 工作流也是基于 xshow 具备云端管理功能,与其他流程本质上是一样的,大家根据项目实际情况合理选择就好。

用QQ动漫的设计系统案例,帮你掌握组件化思维

2. 全面汇总并分类

按原子理论由小到大来对常规控件进行汇总并分类。对于 QQ 动漫项目来说,常见的控件类别包括:颜色、字体、图标、按钮、导航、状态栏、弹窗、列表、标签等等。每个项目所需要整理的组件不尽相同,原则就是对要复用的元素进行整理。

用QQ动漫的设计系统案例,帮你掌握组件化思维

3. 制作样式模板

为了便于维护和提升合作效率,将组件库拆分为几个不同的独立文件,每一个文件由组件库搭建小组成员独立负责,减少混乱。

如果是有多位设计师参与时,因为组件库的元素存在相互调用的情况,会遇到到底谁先做的问题。解决流程分 2 步:

  1. 由一位设计师把组件库的原子级组件(主要包括颜色,字体,图标)先做好,并建立分类组件标准模板,其他设计师在这些模板基础上进行完善,保证组件库在逻辑层级统一。
  2. 如果过程中遇到,自己组件中需要调用对方组件,比如某个图标没有在图标组件文件中,但自己的列表中又需要,可以先用其他组件中的图标代替,等图标组件库更新后,再同步更新这里的组件即可。

QQ 动漫组件库一共分了 5 个不同文件,分别是:基础、操作、导航、反馈和内容。

用QQ动漫的设计系统案例,帮你掌握组件化思维

4. 搭建本地组件库

1️⃣ 确定命名逻辑

提升设计效率,是组件库存在的重要目标之一,而合理的组件命名起到了至关重要的作用。组件的名称要保证通用性,太独立的命名可能不够兼容其他场景,也会让使用的同学产生误解。

对于组件命名,要多与使用的设计师一起探讨,因为每个人的习惯都不同,方不方便因人而异,所以需要做一些平衡。

比如在做图标命名逻辑的时候,纠结于要先按尺寸分(图标/序号类别/尺寸/图标名),还是按功能分(图标 / 序号类别/尺寸/图标名/状态),不断调整多次,这时候就需要找大家一起探讨,怎么才是最方便的。

用QQ动漫的设计系统案例,帮你掌握组件化思维

命名的方法是尽可能按共用属性由多到少的顺序来整理。比如,图标共用的尺寸属性多,就把尺寸归到上层;如果图标功能分类比较集中,那就把功能名称归到上层。根据实际项目和设计师使用情况的不同,会有不同的命名形式,命名确保效率就好。

在梳理组件库结构命名时,先用思维导图描绘一份结构化地图,方便前期讨论及调整。明确层级关系后,用在多人合作时进行参照,从而统一组件库层级。在做这份结构化地图时,需要列好全部分类、层级、具体名称及示例。

用QQ动漫的设计系统案例,帮你掌握组件化思维

2️⃣ 颜色

颜色库的设计,需要将产品中可复用的颜色汇总并分组,比如品牌颜色,按钮颜色,图标颜色,装饰颜色等等,这样可以使得用到颜色属性的组件更加灵活。颜色的命名规范是:序号_功能/浅色 or 深色/序号 _ 属性 / 序号 _ 状态。例如,04 _ 按钮色/浅色/01 _ 常规按钮/04 _不可点

用QQ动漫的设计系统案例,帮你掌握组件化思维

3️⃣ 字体

字体样式需要做全字重、颜色和左中右三种对齐方式,因为按目前 sketch 的组件逻辑,还不能修改嵌套字体的属性。这些属性可以对应到组件的命名上,字体组件的命名规范是:大小/序号对齐方式/属性/用途,例如 42px/1 居左/常规/主文本。

用QQ动漫的设计系统案例,帮你掌握组件化思维

边做边检查。由于文字组件需要的命名特别多,很容易出错,所以建议是最好每做一组,就检查一遍。检查的时候打开组件样式,如果在组件预览中发现重复或者结构不对的地方,及时调整。

多行文本行高要注意。文字的行高要尤其注意,一定要在前期检查好尤其是多行文本的行高。如果行高前期设置不对的话,非常影响后面文本的扩展性,在用到多行文本时会遇到麻烦。想回头修改的话,因为是最底层的原子需要逐个调整,所以代价是巨大的。

所以一定要开始设置字体组件之前就确定好行高,比如 QQ 动漫组件库中的文字行高统一用文字大小的 1.5 倍,并取偶数作为文本的行高。当然,这里的行高也不是完全规定死,有时候也需要视情况而定。

文本的粗细。文字的粗细也是要在一开始的时候就要设置周全,最好是给所有字号的文字都设置好不同粗细的组件,尽管可能开始用不到,但会提升文字的扩展性,不然后面添加就会比较麻烦。

4️⃣ 图标

图标组件最关键的地方在于使用逻辑和图标规范。比如,我现在做的图标逻辑是:图标/类别/使用场景/具体名称/尺寸/不同状态,主要是按使用的频次来整理的。也可以有其他逻辑方式,以方便使用为准。

用QQ动漫的设计系统案例,帮你掌握组件化思维

图标规范也会影响组件库的整理和日常使用,在做图标组件时,需要定义好图标的最大范围和最小范围,嵌套起来使用才不会出错。图标的规范要严谨,同一个尺寸下的图标视觉面积要保持一致。不然在大小这个层级就会出现,虽然是相同尺寸的图标切图范围,但图标的体量看起来却并不一致。

用QQ动漫的设计系统案例,帮你掌握组件化思维

将纯色或渐变图标中的颜色剥离,并使用颜色组件进行嵌套,这样做既方便替换又能减少图标组件库的复杂度。

用QQ动漫的设计系统案例,帮你掌握组件化思维

对于图标的多种状态,建议做在同一个层级中方便选择。

用QQ动漫的设计系统案例,帮你掌握组件化思维

对于图标来说,直接对画板设置切片即可,不需要再加切片框。如果你的组件库之前用了很多切片来导出图标,可以用 Automate 插件直接清理或设置全局的切片,非常方便。

用QQ动漫的设计系统案例,帮你掌握组件化思维

5️⃣ 控件

有了颜色、字体、图标这些基础元素后再来制作组件就会相对简单很多,只需要通过拼装把通用性强的组件做出来即可。这里可能需要注意设置好布局方式,让内容盒子随着内容的变化而变化。新版 sketch 的布局设置相对于老版本的确实会方便很多,理解起来很容易,所以这就不多讨论了。

用QQ动漫的设计系统案例,帮你掌握组件化思维

6️⃣ 代码组件化

在开发侧进行前端 UI 组件库的封装,实现从设计到开发的样式统一,提升效率和质量。

用QQ动漫的设计系统案例,帮你掌握组件化思维

在优先级上,代码组件化跟 UI 组件化可以同步进行,开发先写好框架,然后随着 UI 组件化的逐步确定,代码也进行相应补充。

5. 构建云端组件库

本地组件库构建完成后,即可通过 xshow 上传至云端,再由 xshow 直接添加到本地 sketch 中,完成整个使用流程的搭建。

6. 权限与维护

为了更好的维护云端组件库,避免更新混乱,需要成立组件库小组,只允许组件库小组成员有编辑权限。日常需求中,如有新增组件,需提交给组件库小组成员审核,通过后方可上传至云端组件库。

在制作组件文件的过程中,需遵循先自测后上传的原则,避免在上传后发现一些诸如命名错误、遗漏、嵌套混乱等问题,造成麻烦。

7. 编写规范文档

文档的作用是给相关同事查阅,形成标准化使用流程。一些在组件库中难体现的设计说明、未形成组件元素的使用规则或一些常见问题都可以写在文档里。

用QQ动漫的设计系统案例,帮你掌握组件化思维

8. 问题与技巧

1️⃣善用插件,提高效率

我其实是一个非常喜欢“偷懒”的人,但凡需要重复,批量的工作,我都觉得应该有更聪明的办法。这里我推荐几个我在做组件库中经常用到的小插件。

2️⃣不断测试

组件库的设计过程中,一定要边做边测试,尤其是在前期确立逻辑的时候,要不断检测是否真的好用。

3️⃣内容更新权限与维护需要专人专办

举例:假设我负责字体,那么后续所有的字体更新相关都只找我来修改。若其他人在组件库内找不到相应的组件搭建页面而又特别高频使用,需要向组件库小组提出申请,并由对应组件库管理员进行更新,不可以私自修改组件库内容并上传。

总结

组件化思维不仅仅应用在 UI 领域,甚至在各行各业都需要建立组件化,比如对于一些时效性非常强的新闻产品,就需要针对突发事件内容模板化,以期能第一时间发布;如果想追热点,组件化能够使得产品具备随时跟进热点的能力,提升市场竞争力等等。

组件化是一种思维模式,也是如今设计师必不可少的能力。通过组件库提升效率能够让设计和开发有更多的时间去打磨产品细节,从而打造出对用户更加友好的产品,赋能设计的价值。


文章来源:优设网      作者:腾讯ISUX



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

为什么你刚在淘宝搜完商品,抖音就推荐了?

涛涛

一个你肯定亲身经历过的场景:白天你在淘宝上面搜了笔记本电脑,然后晚上在刷抖音的时候,就刷到了该笔记本电脑的相关广告。

你或许会惊讶:WHAT?难道我的手机是被监控了么?当然不是的,因为监控是违法的。这只是一种技术手段,其专业名词叫做:重定向广告!今天我们就来探究一下其中的奥秘。

重定向广告的形态

想要研究其神,我们得先了解其形。

其实上面,我们已经见过重定向广告的庐山真面目了。我们先提一个概念,你品,你细品:重定向广告又被称作访客找回广告、再营销广告、回头客广告等。

品完了,我们继续往下看。重定向广告的形态分为两种:

1. 搜过内容 A,广告继续推送 A,目标一个字:买!

这是重定向广告的第一层次。

就是我们上面所说的:你在淘宝搜了笔记本,然后晚上刷抖音的时候,就继续给你推送该笔记本的广告。既然你搜索笔记本了,那肯定就是对笔记本有需求的。可能当时是由于某种原因,比如笔记价格或者样式什么的,你在犹豫。然后当这个内容再次出现在你面前的时候,你很容易一激动就下了单,一激动就付了钱~

但值得注意的是,广告一定要克制,最佳的用户体验是:用户感觉不到其存在,对用户起到的只是一个引导的作用!据 GoogleAdwords 提供的数据,在 30 天内为同一个用户展示 7~10 次广告的转化效果最好,做到这个程度的广告收益可以达到三倍以上。

2. 搜过内容 a,广告推送相关 b,目标三个字:买买买!

这是重定向广告的第二层次。

我手贱,在网上搜了棺材板,之后就收到了骨灰盒的相关广告推送。之所以是第二层次,就是因为,这里需要算法工程师设计一个算法模型,根据用户自身的行为数据,以及相关的大数据,推测出来这个相关的 b,到底是什么。

最著名的就是沃尔玛啤酒与尿不湿的经典营销理论:

“男性顾客在购买婴儿尿片时,常常会顺便搭配几瓶啤酒来犒劳自己,于是尝试推出了将啤酒和尿布摆在一起的促销手段。没想到这个举措居然使尿布和啤酒的销量都大幅增加了。”其实这个算法的核心原理,也很简单,我们可以再举一个互联网的段子,你一听就明白咋回事了。

女:“老公,我想买一个包包,才一万块钱~”

男:“好的,没问题!不过我觉得,买个一万块的包包不太够,你还得再买一身三万块的衣服,不然凸显不出来这个包包的气质,再让别人以为是山寨的就麻烦了;这样的话,我们还得买辆车,怎么着也得宝马奥迪吧,不然你这整个人的气质就衬托不出来了;嗯,我们还得换个大房子,就整个别墅吧,带游泳池的那种,不然跟包包、衣服、车子不匹配;这样算的话,我得先去挣 500W,你先等等,我挣够了钱,咱们就去买!”

女:“……”

这个段子,体现的是通过经验主义找到 b,而现在是一个数据主义的时代,一定要有数据的客观依据,才能客观准确地找到 b。但殊途同归,其核心原理是一样一样的~

重定向广告的原理

这几天经过查阅大量的资料,以及跟小伙伴们进行沟通探讨,终于对重定向广告的原理,有了初步认知。这里先感谢给我提供支持的各位老铁。

首先呢,一个完美的重定向广告,理论上应该分为三个步骤:

为什么你刚在淘宝搜完商品,抖音就推荐了?

我们还是拿笔记本电脑的场景来举例子吧~

Step 1:判定

首先我们要达成一样共识:我们没有必要给所有搜索过笔记本的用户都发广告。就比如有些用户只是误触点击了一下笔记本的内容,然后立马就又关掉了,那么就没有必要给这类用户发广告,因为就算是发了,大概率也是没有下文的,纯粹浪费广告费。所以说,重定向广告要做的第一件事,就是判定这个用户的意向程度,找到那些精准的用户,再给他们发广告,以寻求最高的 ROI(投入产出比)。

意向度的判定,就需要依靠埋点技术了:根据埋点,可以追踪到用户的行为记录,然后再设计一个意向度判定的逻辑,就 ok 了。

常见的判定依据如下:

在网页上停留超过 X 分钟;
在网页上访问超过 X 个页面;
已访问结账页面,但未进行交易;
与网页内容互动过,但未消费;
曾多次访问过网站,但未进行消费;

Step 2:识别

第一步找到了那些对笔记本感兴趣的用户,然后我们的目的,是给他们发广告,引导其消费对吧。那么第二步,也是最关键的一步,我们得知道,这些感兴趣的用户,到底是“谁”吧!这里需要依靠的是 IP 追踪技术:只要用户去淘宝搜索笔记本了,那么他必然会留下一个 IP 地址。我们通过 IP 追踪技术,首先可以追踪其使用场景~

To B 场景:

有一定的概率,可以追踪到这个 IP 地址,是某个企业使用的。为什么说是一定概率呢?因为不可能有一家商业公司,拥有所有的 IP 数据,你们懂得…追踪到企业之后呢,可以进一步追踪该企业在网络上面留下的公开联系方式,比如公司法人姓名、电话、邮箱等等。这方面可以跟第三方公司合作,例如企查查,付费调取他们的 API 接口进行查询。

这种具体的联系方式都有了,那么发广告自然也就不是问题~

To C 场景:

我们先要明确一点,对于个人来说,无论如何都是追踪不到其姓名、电话、邮箱这些信息的,因为违反隐私保护法。

但我们可以通过 IP 追踪技术,追踪到这个 IP 地址,是属于某个城市,更精准一些的话,可以追踪到是某个街道,甚至是某个小区。这样的话,也是有助于我们做进一步的广告策略的。

比如我们可以追踪到,搜索这些笔记本电脑的人,大部分都来自于某几个城市的某些街道,那我们是不是可以重点向这几个区域做广告投放了?

但这些似乎还不足以支撑我们精准地发重定向广告到个人,达到最大的 RIO。想要精准地找到某个人,还需要借助两样东西:

cookie

简单来说,就是我们在使用浏览器时,存储在我们本地客户端的文本文件,就是下面这些玩意…

为什么你刚在淘宝搜完商品,抖音就推荐了?

那么 cookie 可以存储一些什么呢?

首先,用户的行为记录是可以存的,就和我们上面埋点所记录的那些类似;然后还可以记录一些特征数据,例如使用的 Web 浏览器、操作系统、屏幕分辨率、时区、语言、插件、字体等。

有了这两样东西,大概率就可以证明,张三是张三了。

imei 值

如果用户是使用手机来进行搜索的,那么这个时候就需要请出另外一个大咖“imei 值”了。imei 值又是个啥东西呢?简单来说,就是手机的身份证!有了身份证,那么找到这个手机,并给他发广告。但值得注意的是,imei 值可没有那么好获取。如果用户只是用手机搜索了浏览器,比如你们的官网商城,那么这个时候是获取不到 imei 值的。必须是用户在你们的 APP 上面进行操作,并且呢,在使用 APP 的时候,同意了一大堆权限,这个时候才能读取到用户的硬件信息,进而获取到 imei 值。

Step 3:召回

最后一步,那就是如何发广告召回啦。这一步就简单啦,找到那些广告平台,例如百度、头条、腾讯、广告联盟等等,跟他们谈价钱就完事了。谈好了价格,那么在这些平台上面的广告位,就能够变成笔记本电脑的广告啦。(例如在抖音上面划拉几条,就看到笔记本电脑的广告了)

这里也提醒一下,并不是所有的广告平台,都有重定向广告业务的,想要发重定向广告,可以搜索“DSP 广告”几个关键字试试。

Step final:自动化

最后呢,还有一点点小问题,怎样能够使整个过程自动化呢?其实也很简单,这就需要广告平台,在我们的 Web 端的官网商城,或者 APP 上面部署一套 SDK 代码,意义呢,就是读取前面我们所说的,判定信息以及识别信息。再直白一点的话,那就是双方约定一个数据接口,实现这些数据互通,这样就能够实现自动发广告啦。

重定向广告的意义

重定向广告存在的意义是什么呢?其实上面我们已经提到过了:很简单,这种广告的 ROI(投入产出比)最高!

每个公司的数字营销人员都有着基本的岗位职责:他们必须评估和优化他们的努力(广告投放费用),以实现增加销售的目标,他们必须证明他们的投入能够带来积极的回报。于是数字营销人员总在寻求最新的技术来帮助他们达成目标。在经过曲折的广告投放尝试后,最终,重定向广告出现了。让我们一起来看一个故事:

重定向广告故事

我在卖 ebay 一种针对新生婴儿的纯天然洗发水,我需要投放广告来倒流到我的 ebay 商品页。

yahoo:

最早我的投放策略是把我的广告放到 yahoo 的首页上去。然后我发现一天下来,yahoo 花掉了我巨额的广告预算却只给我带来了非常少量的点击——1000个人看了只有1个人点击了我的广告。没错,大部分上yahoo首页的人都不会对一款婴儿洗发水感兴趣的。

Ad-Network:

接下来我要考虑优化我的投放策略,于是我想到了 Ad-Network:他们帮我把广告投放给了那些和他们有合作的母婴类网站上去,效果好多了,很显然上母婴网站的人们会对我的产品感兴趣,1000 个人有 10 个人点击了我的广告。

精准定向(targeting):

但是能不能做到更好呢?接下来一家做精准定向(targeting)广告的服务商找到了我,告诉我们他们能够直接把广告推送给那些刚刚生了北鼻的妈妈们,于是我选了这家 vendor 而他们给我的答卷是 1000 个新妈咪有 100 个对我的天然婴儿洗发水感兴趣(她们点击了,还有很多最后选择了购买)。

重定向(retargeting vendor):

好吧,作为一个挑剔的广告主我觉得这还不够,我说,能不能把我所有的媒介预算都花在刀刃上。这时候一家 retargeting vendor 出现了,他们说,交给我们吧,你所有的广告都只会出现在那些刚刚试图找过你的新生婴儿纯天然洗发水的用户——我们不管他是一个人还是一条狗,但cookie显示那位用户确实在找类似的产品。那么对我来说,最后一个方案确实非常有吸引力。

我们可以看到重定向广告能够更精准,可以实现对目标消费者进行一对一的营销效果。而传统的展示广告只能是粗放型大面积的曝光(如对所有网站访问者随机展示广告)。由于不能对准确的目标消费者进行广告传播,可以说在早期的展示广告中,大量广告展示都是无价值的,也就是被浪费掉了。

定向广告

重定向广告从性质上来说是效果广告,是要对交易额负责的;那么与之对应的,还有一种广告叫做定向广告,其性质是品牌广告,这类广告的指标是新用户数。

重定向广告,在营销的环节的里面,是属于“召回”。

也就是说,这些用户,必须是通过某些途径访问了我们的官网商城或者是 APP。但这个过程只能是被动等待啊,如果访问我们官网商城或者 APP 的人少得可怜该怎么办呢?

那么这就涉及到营销的另外一个环节了,那就是“拓新”。拓新环节通常发的都是定向广告,这种广告只是为了拓展品牌的知名度,而对于最终的交易,并不做要求。这种也很常见,就比如我们在看《王牌对王牌》的节目中,天天听他们介绍“vivo x60”的手机,也没有任何购买链接,但这个手机的品牌,却被大众所熟知了。

获客

不管是重定向广告,还是定向广告,在整个营销的过程中,都是获客环节的重要手段。前段时间我们研究过 B 端企业营销困局的破解之道——精准营销。

在这里,我们再来做一下延伸思考,想要解决企业获客成本高的问题该怎么办呢?

下面这张图供参考:

为什么你刚在淘宝搜完商品,抖音就推荐了?

稍微解释一下:

张三搜索了我们的产品内容,并且留下了联系方式等信息,那么这种用户肯定是最精准的用户啦,让销售团队直接跟进;

既然张三是精准用户,那么我们能不能找到一群跟张三差不多的人,进行“拓新”的操作呢?于是可以搜集到的张三的特征,给到这些第三方广告平台,找到跟张三有着类似特征的李四们,给他们发品牌广告,进行拓新。

注:我们前面也提了,to c 场景,直接找到联系方式,是违反隐私保护法的。但巧就巧在,我们虽然不能直接获取联系方式,但却可以间接地利用这些数据,也就是给他们发广告~

结语

商业创造利润的秘密,其实很简单,一言以概之,就是让我们的产品,有更多的“访客”,并且将这些“访客”变成“顾客”,将购买意愿和购买能力变成购买现实。

但纸上得来终觉浅,精准营销何其难。这条道路,已经走了很久,但也只是迈出了一小步,接下来,依旧有很长的道路要走~

文章来源:优设   作者:晓庄同学产品笔记

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


文字动效原来这么简单!?

鹤鹤


AE文字动效预设使用方法 


          在AE的窗口中打开“效果和预设”面板,所有和文字有关的效果都在动画预设中的Text文件夹内,共十七种动效类型

在AE的窗口中打开“效果和预设”面板,所有和文字有关的效果都在动画预设中的Text文件夹内,共十七种动效类型。

          将动效预设拖动到对象上,即可应用动效。

17种动效预设预览


          十七种类型分别为:3D文字动效、入场动效、离场动效、模糊动效、曲线动效、表达式动效、填充与描边动效、图形动效、亮度与透明度动效、机械化动效、多样化动效、多行文案动效、拟态化动效、路径动效、旋转动效、缩放动效以及字间距动效。

预设搭配组合


          有些效果可以相互叠加组合,理论上我们能做出成百上千种不同的效果。 


文章来源:UI设计  作者:设计师深海

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


文具届的“奥斯卡”开奖,2021日本文具大赏出炉啦!

鹤鹤

日本屋文具大赏,又被誉为“文具界的奥斯卡”。从2013年开始,文具大赏今年已经有9届了,每年都在二、三月公布,想在开学季购置文具的小伙伴,千万别错过!



据说,今年的大赏由11位评委参与,他们对参选文具的设计、功能和想法等方面进行打分,共选出40个文具,分别有特等奖、设计奖、功能奖、创意奖。


下面,数艺君带着大家一起来看看吧!(注意捂好钱包)


特等奖

吴竹吸墨空笔


今年获得全场大奖的是吴竹吸墨空笔。这是一支不带墨水的空笔,被称作“彩墨神器”!



整套由四个部分组成:空的笔杆,吸墨水的内芯、笔栓、小贴纸(可以把你制作的墨水涂上去,贴在笔杆上用于区分)。



上墨水的操作非常简单,海绵内芯拆出来,插进墨水里,吸到80%左右再装回笔壳,搞定!


对,除了墨以外,其他所有的东西都有,你可以用内芯吸附上任何喜欢的颜料、墨水,然后你就有了一支自定义的笔。


功能奖

回转印章机


回转印章机也是一个很神奇的产品,可以帮助那些不擅长绘画的朋友印出可爱的图案。



有很多个图案可以选,选完就直接印在纸上,跟手写的简直一模一样,是喜欢做手账的手残党的福音!


印章使用的颜料是油性的,可以拿一支水性笔给图案上色,不用担心颜色混在一起。来看看上色的效果吧,反正不会做手账的数艺君也心动得不行了!


最关键是,可爱俏皮的图案特别多,据说有上百种文字、图案,应用场景广,可以左滑下方图片看看哦~


创意奖

便携便利贴


这款便携便利贴从外观上就担得起创意奖这个头衔了!数艺君第一反应还以为是一支笔,没想到竟然是便利贴!



这款便利贴的创意在于,把一本一本的便利贴变成了卷轴。而且,在硬壳卷轴的保护下,便利贴还不容易破损。


一管里面有两个卷轴哈,就是说可以装两种便利贴,如图,一种红的一种白的。


使用起来也很方便,把便利贴卷轴从保护壳里抽出来,拉出一截,撕下来,就可以贴上做笔记了。



还有一个贴心的设计点就是,这个便利贴中间70%的部分是有粘性的,两边边缘没有粘性。这样就可以拿着两边没有粘性的地方,对准了位置再贴。



种类也很多,共有12种便利贴,有6种搭配供选择,看这个效果,还挺实用的~

设计奖

双层透明笔盒


虽然说透明笔盒已经不是第一次出现,但这款笔盒的特色在于外层是透明,里边放置了一个布袋,更便于收纳了。



相信很多小伙伴,都曾被透明笔袋“一目了然”的功能吸引到,但大部分透明笔袋很难做到分层归类。而这款透明笔盒就将以上两点都兼顾到位了。

便签奖

可剥离荧光贴


这款便利贴从外观上特别是涂改带,但功能上完美解决了荧光笔标记笔记时,画错的尴尬问题。



半透明的荧光贴纸,可以撕下来贴在书上的重点知识处,觉得不合适,或者复习完毕后,还可以不留痕迹地撕下来,图书又恢复了崭新的状态。



不想在图书上写字,也可以写在这个半透明的便利贴上~再也不用担心在书上写错别字啦!



办公文具奖

TEAM-DEMI 文具套装


这套文具包装沿袭了极简风,纯色的小盒子中,包括剪刀、胶带、订书机、美工刀、胶水、直尺、卷尺以及SIM卡取卡针。


配合磁吸设计,包装盒可以作为收纳盒,收纳文具时做到完美嵌入,这种设计真让人难以拒绝,自用和送人都很有档次。



橡皮奖

多边形橡皮


本次大赏中,造型最“古怪”的产品莫过于这款多边形橡皮了。它以折纸艺术为灵感,配合3D技术,造就了多边形橡皮。



橡皮共有45个尖角,使用完一个角之后,会产生新的一角。一块橡皮都花了这么新奇的技术,不愧能获得这一单项奖。



在官方发布的视频中,这块橡皮可以擦除单词中的字母。因此,从功能上来说,这款橡皮更适合那些铅笔绘画等精细作业的人使用。


文章来源:UI设计  作者:数艺设

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

交互设计师如何为业务提供价值?

涛涛

交互设计是什么?

交互设计就是通过设计出完整的界面和用户操作流程,保证其符合用户的认知模型,避免用户在使用过程中任务失败。

交互设计师是承接上游(产品经理)和下游(视觉设计师)的角色。

交互设计师的基础价值来源于两方面:

  • 团队工作流程中的价值;
  • 提升产品的用户体验。

交互设计师的核心价值是将产品业务通过更好的设计,将其更大价值化并落地。

本文大纲如下:

  • 交互设计师如何熟悉业务
  • 交互设计师如何推动设计
  • 如何通过业务优化设计

如何熟悉业务?

将自己作为各种角色的用户,去使用体验,感受整个产品的流程。从而找到可优化的地方。

针对于 B 端产品,产品中会涉及到超级管理员、管理员、普通员工至少三种大类角色,其中普通员工里面可能会细分多类角色。交互设计师要在各个角色中,使用体验产品,梳理清晰的产品业务逻辑。使用使用中,弄清各个角色的权限管理和流程逻辑。

针对于 C 端产品。对产品的分层用户主流程和分支流程进行体验走查,找到使用中不好的地方并加以优化。并对行业竞品进行重度使用体验,了解整个行业产品的特点。

如何推动设计?

我以前写过好多设计师的专业技能方面的文章,我之前一直认为设计师最重要的素质是专业技能。

但是设计师最重要的素质并不是专业技能,因为专业技能可以慢慢培养,任何人都可以学会。

设计师最重要的能力是推动能力。因为推动能力和责任感、性格及天赋有关,而这恰恰会成为设计师进阶的障碍。

想要推动业务之前,先要将自己的职责做好,负责的工作做好,让大家信任,这个时候才能赢得大家的信任,让大家更加相信你。

1. 为什么推动能力最重要?

在实际工作中设计师最基础的能力是解决问题的能力,团队需要能解决工作问题的设计师,这样才不会团队造成负担或者拖团队后腿。

设计师在工作中会遇到形形色色不同性格的对接人。那么肯定会遇到对接难度大的 PM、视觉设计师、交互设计师或者开发,这时候就需要有较强的推动能力,不然很容易使得工作进度受阻,导致设计方案无法快速落地。

拥有较强的推动能力对个人而言有以下好处:

  • 强化个人价值。设计可以推动产品优化,这一过程中,个人价值会得到比较大提升。同时设计师可以深度扩展设计专业知识。例如在推动中总结一些设计方法,对于个人经验提升帮助巨大。
  • 获得成就感。当产品数据或者用户口碑获得提升,设计师可以从工作中获得正向反馈,获得成就感,工作才会更加有激情。
  • 提升设计师的地位,设计师不在只是被动的接受需求、修改设计。设计师主动推动产品的体验上的优化或者需求上的决策,在这一过程中更是对产品负责。
  • 推动团队设计流程或者设计理念改变,这样可以影响更多的设计师,对于个人产生的价值,对团队产生的利益有很大的提升。

2. 怎么做推动?

推动分两方面,一方面是产品上的推动,另一方面是团队里的推动。

针对产品上的推动,设计师需要做一些前期工作和设计方案,然后和团队领导沟通,获得他们的支持,最后和产品经理沟通,让产品经理看到,我们做这个设计方案可以带来哪些价值。

得到了产品的支持后再进行推动设计,推动的事情可以做例如首页改版,设计规范优化,核心流程上提升数据指标,可用性测试等等。

针对团队中的推动,先发现团队缺少哪些东西?针对团队缺失的东西,做一些推动的事情。在此之前需要做大量的准备工作,并得到团队领导的肯定和支持。

例如团队没有做组件化,那么你可以牵头做组件库和设计规范。团队缺少数据分析思维,那么你可以现在团队培训数据分析知识,然后做一系列的数据设计模板,将数据融入到设计师的工作流程中。

团队协同不太顺利,那么你可以和领导商量,做一些团队协同上的工作,例如团队新软件的引入,团队项目协同文档规则制定等。

3. 如何顺利推动?

如果刚进一家公司,那么先要熟悉团队运行模式,每个设计师负责的产品业务和他们的处事风格。

当熟悉产品业务和团队,那么接下来先将自己负责的产品需求做好,后续就可以进行一系列前期推进准备工作。做推动之前,需要先和领导确认,得到领导的肯定后再慢慢在团队推动。

当在团队取得一定的进展,则后续可以尝试产品上的推动。在推动的过程中,要记住不断地迭代优化自己的推动方案,让自己的推动过程中做得万无一失。

如何通过业务优化设计

先熟悉业务运行逻辑,掌握业务后,分析业务流程。

1. 找到业务核心并优化

找到产品中核心是什么?例如资讯类产品,产品的核心是用户通过推荐列表,到达新闻详情页阅读的过程。在这个主流程的过程中,交互设计师可以做的事情就是如何提升推荐列表的点击效率、展示效率和详情页正文展示效果。通过优化结构样式,提升设计价值。

例如电商产品,核心就是如何让用户快速找到想要的商品,并顺利的完成购买。在这一过程中,交互设计师可以做的事情,如何提升用户快速找到商品这一场景和购买支付的流畅度。


文章来源:优设  作者:Echo的设计笔记

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


产品好不好看,真的重要吗?

涛涛

在我过往的一份工作中,曾就“是否需要在优化app的视觉感知上投入更多时间”的话题跟我们的CEO进行过有趣的争论。“他怎么受得了这么过时的设计?!有上百万的用户天天在用我们的产品,优化App的视觉设计是一件多么容易的事啊!”

但我们的CEO并没有动摇,他坚信公司正在优先考虑那些真正驱动商业发展的事项,尤其是聚焦于那些高速增长点上。

对他来说,我的设计技能无足轻重,这让我感到非常沮丧。我非常热爱用户体验和视觉设计,而且我不想在只能发挥我雕虫小技的公司里浪费生命。

尽管如此,我还是能够理解他的观点。我没有办法证明他是错的,公司一直在发展,虽然用户的抱怨很多,但没有一个用户说“我觉得这个页面太丑了”。

 

价值大于美感

Value > Aesthetics

CEO的有些观点是对的。如果产品能够为用户提供足够的价值,就不需要在界面美感上纠结。亚马逊和Reddit这两个公司就是很好的例子。

此外,如果产品设计的非常漂亮,却不能提供足够的价值,也注定会失败。如果功能不完善或缺少某些关键功能,没有人会使用只剩下美感的产品,哪怕其惊艳程度不亚于Dribbble上最热的照片。

但他说得也不全对。好看的产品是有价值的,即使每一个微小决策都可以进行A/B测试,但好看的价值却依然很难识别出来,但这并不影响其对组织的重大影响力。

 

美感代表形象

Aesthetics say who you are

facebook最近的改版

美感之于产品设计,就好比现实生活中的外表之于个人。

日常工作中,我们穿戴整齐、打理发型、喷洒香水,以期给同事留下深刻的印象,让他们在与我们相处的时候感到舒服。

这样做并不会改变我们给予他人的价值。但是,这样做的确能够改变他人对你意见的接纳程度以及后续对你的印象。

这样做也不会改变你说话的内容,但会改变人们对你在说话前后,以及说话过程中的感觉。

 

美感让你的产品与众不同

Aesthetics help you against your competition

想要打造出与亚马逊匹敌的产品很难,但是我们可以另寻出路。很多在相同领域竞争的公司,都是用几乎相同的价格给用户提供几乎无差别的价值。

想想那些已经突出重围的成功公司,如Slack、Medium和Mailchimp。没有一家开拓了新市场。团队协作、博客和电子邮件营销软件早在他们之前就已经存在。

但它们还是设法成为了人们在该市场寻求解决方案时,第一个想到的名字。它们也都创造出了独一无二的、充满个性的视觉语言。

 

美感提升转化率

Aesthetics increase numbers

虽然,价值和信息传递通常是影响公司成长的最关键因素,但是在恰当的时机使用恰当的视觉效果,依然可以说服更多用户购买你的产品。

例如,定价页面就是一个能决定用户是否会购买你产品的触点。一个设计整洁的定价页面能提供内容明确和可读性高的信息,同时显著提升转化效果。

从各种app中找到的拥有优秀视觉展现的购买页面

在我曾经工作的产品团队中,人们最常讨论的事情是开发任务的优先级。很多团队成员(通常是那些有雄心壮志的人)想推广那些他们认为可以帮助公司壮大的想法,但并不清楚哪条路才是对的。

有时候让你的产品更好看是个不错的主意,但在推广这种想法的时候,你需要问问自己“为什么现在这件事情对我们来说如此重要?” 。经验缺乏的设计师常常会给出类似这样回答:

“因为它使我们的产品更加好看!!”

这种说辞没有任何说服力。试着去关注公司的目标,思考如何用伟大的设计引领公司变得更加伟大,这样你才会成功。

唯有美观无法构建一款产品,但是打造一个毫无美感可言的产品往往会让情况变得更加糟糕。


翻译:優越   审校:Celin  |   UXRen翻译组 #364译文
作者:Ariel Verber
原文标题:《The importance of aesthetics in Product Design》

文章来源:UXRen  

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



日历

链接

个人资料

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

存档