首页

深入研究场景化体验设计

资深UI设计者



一、前言

场景化设计一词第一次看到还是在前年设计分享大会上,当时懵懵懂懂的我第一次看到这么刁钻的角度,甚是惊讶,后来我也是在不断的研究这个内容,上一篇文章《【干货】设计师的发力点》中,也稍微的提了一些关于场景化设计的内容。


本文章的出发点是因为我在学习的过程中,但很难找到全面分析的文章,因此我打算写一篇更加深入的分析,一方面是对自己学习的总结,另一方面是分享给大家我的心得。


接下来会通过三个维度深入研究场景化体验设计,帮助您快速提升场景设计思维,中间也会并通过大量案例,带你真实感受场景化设计思维在产品设计中的实际运用。



二、场景与体验

我们看到各种形形色色的产品功能,但不能单一的去看待问题,也无法直接的去评判这个功能是否合理,所有的设计都是围绕着某种指定的场景下去完成它的使命,抛开场景谈设计,就是耍流氓。例如疫情期间的健康码,这也是为了响应防控疫情的号召,需要对每个人的行程路径进行把控,而这种产品就是为了满足某种场景下的需求设计。

而在面对产品设计有具体场景的情况下,可以根据场景分析用户的需求,进一步制定设计目标,通过合理的设计方法,提升用户的产品体验。



三、 遇到的问题

在早期的互联网产品设计中,大多数体验优化的设计流程只是对需求进行单一的分析,并且相同的内容采用同一解决方案,整个设计看似基本没有问题,但随着互联网的高速发展与完善,用户群体越来越多,产品功能越来越复杂等一系列的因素,导致出现了一些问题。


2.1   产品复杂化

随着产品功能的完善,功能复杂化,单一的解决方案无法满足多种场景下的使用,需要合理规划,根据不同的场景进行体验设计,才能更好的发挥价值。


2.2   同质化严重

大多数流程可以满足各种不同分类的产品使用,例如传统的购物流程从详情页出发到订单页流程,虽然能满足所有的支付流程,但是缺乏行业设计特性,长期以来也会缺乏竞争力。


2.3   场景体验欠佳

一套设计解决方案、交互流程满足所有的使用情况,虽然在产品中实现了一致性,但面临复杂的场景很难满足,并且用户群体越来越复杂的情况下,每个用户的诉求也会存在偏差,因此我们需要根据不同的场景,制定不同的方案。


四、场景精细化设计

为了更好的理解场景化设计,我们可以通过哲学上著名的三大问题,“你是谁?”“你从哪里来?”“你要到哪里去?”,例如唐僧从东土大唐而来,要到西天取经,从中我们可以发现三个关键的内容,就是人、地、事,这也是场景化设计中必不可少的三个内容。


在互联网产品设计过程中,为了进一步强化体验,我们可以从场景化设计中三个关键内容,人、地、事,这三个角度进行更加深入的精细化设计,区分不同的场景采用不同的设计方法,从而满足更多特点场景下的需求。


五、用户分层设计

场景化设计中,用户是最关键的内容之一,正所谓以用户为中心的设计思维能更好的服务用户。当用户量越来越庞大后,可以对用户进行分层处理,这也是用户运营中常见的一个概念,简单理解就是指将用户分为不同类型。


用户分层是根据不同用户的行为特征划分成不同的用户群,进而制定不同的产品策略来满足其差异化需求,从而充分发挥每个层级用户的价值,达成产品目标,通过用户分层的思维方式结合场景化设计,可以更好的满足不同类型的用户诉求,还能根据不同用户的类型提供差异化的内容和服务。

用户分层的方式是通过标签的形式快速给用户进行分层,在实际的运用中,主要分为基础属性和行为属性。


5.1  基础属性

基础属性包含用户的年龄、性别、身高等,这种用户分类的方式,是最直观简单的。


5.1.1 年龄

大多数产品中会通过年龄来进行用户分层,这种形式可以快速区分用户的基本属性,因为用户的年龄状态对待事物也会存在很大的差异。


例如支付宝的电子社保卡服务,根据用户不同的年龄阶段,展示不同的领卡信息,进一步让用户更快的获取到符合不同年龄段所关注的合适信息,可以直接提升开卡率。


5.1.2 老龄化设计

随着我国即将进入中度老龄化社会,也正是因为老年人的生理和认知障碍的限制,他们使用APP的体验并不是很顺畅,所以大多数互联网产品逐渐向中老年群体渗透,更多的关注起老龄化设计。


在适老化设计中,在不影响老年用户对功能使用的情况下,一般都会采用通过设计降噪的方式,去除所有复杂的次要信息,保留核心内容,并且通过放大来强化关键信息,文案的处理上也会进行内容简化处理,减少老年人的阅读成本。


适老化设计除了视觉上放大和简洁的感知体验外,在交互体验上也会有很多人性化的设计,例如在容器内容上加入行为按钮并描述去向,帮助老年人顺利完成目标行为。


甚至在部分产品中,会强化听觉上的功能体验,例如语音播报、语音提问、电话叫车等功能,既能通过语音的形式弥补老年人视觉能力上的不足,还能减少操作成本。


5.1.3无障碍设计

随着互联网的发展,用户群体逐渐庞大,其中也有部分身体有局限的用户,对于他们来说更加迫切通过互联网获取信息,因此越来越多大公司注重到这一方向,而这也是我们作为一名设计师,更应该去优化的方向。

可以采用无障碍色系,以及颜色的色差处理,针对性的服务于色盲和色弱群体,使得他们可以在信息阅读上更符合他们的习惯,从而进一步打造更人性化的产品体验。


5.1.4 用户身份

而关于用户分层的场景设计中,我们还可以区分用户不同的状态、身份来对界面进行差异化布局,最典型的代表就是用户的会员身份。


会员它分为很多不同的阶段,从开通到到期,用户在不同阶段对于内容的关注上也存在很大的差异的,例如未开通展示更多的价格、权益信息,吸引消费决策。我们可以从这个角度出发,区分用户的会员状态,进一步来进行差异化设计。从而有效的提高不同阶段用户的行为决策。



5.2  行为属性

每一个用户在产品体验过程中,都会有着各式各样的行为操作,例如浏览记录、关注、喜好等,我们也可以通过这种方式来进行分类,可以更加直接的聚焦到关键信息上,既可给予用户惊喜感,也可以达成业务目标。


5.2.1 兴趣标签

标签和上面描述的基础信息还是存在一定差异的,标签相当于是产品根据用户的行为等去定义的不同类型的标签,这种方式可以快速给用户进行分类,常应用于内容型产品以及电商平台,给用户贴上各式各样的标签,其次再根据他们的具体需求进行个性化的内容设计,可以更快的实现千人千面的智能推送。


不同兴趣标签的用户对待内容的诉求也会不同,因此在页面结构设计时,我们需要考虑页面信息的优先级、浏览动线、信息内容的呈现,例如重度用户和路人用户的区别,一个注重商品展现的效率,一个注重氛围和吸引。

除了整体的页面结构内容外,用户对内容诉求也不同,例如优惠型的用户更关注活动和折扣信息,通过用户标签进行分层设计,能更快的达到刺激用户消费的目的。


5.2.2 消费模型 (RFM模型)

  • R:最近一次的消费时间(Recency)

  • F:一段时间内的消费频次(Frequency)

  • M:一段时间内的消费金额(Monetary)


RFM模型是根据用户的消费行为、频率、金额3项指标对用户的价值状况进行级别划分,一共可以分为8种基础用户类型,然后再根据用户的消费金额进行从上往下排序,最后区分不同类型的用户,进行精细化运营。

这也是很多企业都在使用的模型,价值级别较高的用户可以调整资源倾斜力度、定制服务,甚至针对普通用户也可以进行激活消费、挽留措施。


在电商产品中这种方式最为常见,通过模型分类可以快速了解用户消费情况,一般会区分新老用户,活跃用户与沉寂用户,例如创建新人导购,刺激用户的首单转化,而长时间未进行复购的沉寂用户,也会采取一系列的措施吸引用户再次消费,提升用户的复购率。



5.2.3 AIPL模型

  • A:认知 - 新客或不了解产品的用户(Awareness)

  • I: 兴趣 - 对产品有兴趣且关注过的用户(Interest)

  • P:购买 - 刺激用户产生购买行为(Purchase)

  • L:忠诚 - 有过较高复购行为的用户(Loyalty)


这个模型对应的也是用户的成长路径,每个用户都是从认知开始,才慢慢变成购买或者忠诚,所以需要做的,就是引导用户不断往更上一层发展,当然,我们也可以对四种不同类型的用户同时进行,将这四种类型分发到产品中的各个链路中,以下案例来自于淘宝。

通过种草的形式给用户建立认知,培养用户兴趣,而面临消费顾虑并迟迟未下单的用户,可以利用入手分享的方式克服转化阻碍。而对于购买型和忠诚型用户,可以通过优惠、活动等方式,刺激下单并建立长期关系。


5.2.4  行为路径

不同行为表现的用户所触发的关键行为不同,所以在设计路径时,要先对用户有分层,有定义,再针对性的实施,对路径进行合适的分层布局,确保用户去完成某件事的各种行为路径,都能被满足。


下面的案例从上倒下依次为,想快速申请贷款或者快速完成任务获取现金的用户,我们提供了直接操作区域,并且置于头部进行业务属性强化,中间融入了更多的分类与内容引导,进一步激发用户的兴趣,最后可以再通过不同的形式适当的减少用户顾虑,例如优惠券的福利(强化申请贷款),为新用户提供发帖示例(确保社区的内容品质)。

虽然两个界面的内容差异较大,但是结构拆分的方式以及行为路径的规划都是大同小异的,主要还是为了满足不同行为的用户,进一步辅助他们快速完成功能服务。


六、区域化设计

根据不同的地点、位置、空间进行区域化设计,为不同的地域、情景进行差异化设计。在空间设计、园林设计中,我们会常常看到这种设计方式,规划整个区域,进行合理的场景化设计,而在互联网产品设计,主要体现在产品的战略层面,面向不同的区域市场。接下来通过以下三个角度进一步分析。


6.1  下沉市场

下沉市场是前几年比较流行的概念,是新鲜流量的代名词,特别是拼多多的崛起,引起了许多行业关注流量的新区域。简单理解就是产品的战略市场主要面向于3-6线的城市。


下沉市场的用户特征:

1、简单直接,所见即所得;所以在设计的时候应该避免操作路径过深,展现内容太隐晦。

2、对价格和收益比较敏感,愿意花费时间获得金钱上的奖励,例如拼多多其实是个游戏电商。

3、愿意下载一些现金奖励的产品,通过任务或者阅读来获得奖励,例如趣头条。

4、熟人社交影响力较大,可以通过微信生态,快速形成裂变。


6.2  全球化设计

随着本地化市场的成熟,越来越多产品开始面向海外市场,而海外市场与本地相比也会有着很多的差异,例如语言、宗教、审美、文化等等都有着诸多差异,所以这也是无形之中给设计带来了很多的挑战。


6.2.1 本土化策略

一个产品无法满足全球市场的使用,因此全球化设计最好的方法就是本土化策略,深入挖掘当地市场的文化、用户喜好,地域特色等内容,进一步对产品进行单独设计,例如大家比较熟悉的Tiktok,与抖音分开运营,更具有针对性。


大部分产品在进行海外市场的运营设计中,都会充分融合当地市场的喜好或元素,进一步发挥当地特色,激发用户的情感共鸣。


6.2.2 出海规则

由于不同国家的文化差异、行为习惯、认知能力都会存在一定的偏差,因此在产品设计的过程中,我们也有很多规则需要去注意,例如、地区禁忌、语言处理等。接下来我大概列举几个我平时记录的注意事项。


单位规则

度量衡需要满足不同国家的要求,例如公斤/磅、英尺/厘米、公里/英里,而在一些运动产品中如果要表现卡路里,不建议使用一碗米饭作为单位来描述。


形象禁忌

在一些全球化设计中,如果涉及到插画以及人物,需要注意一些姿势和特征,尽可能避免不必要的麻烦。例如人物的手势、 两手交叉、十字交叉、使用左手等等,甚至在中东地区女性暴露都要注意避免。


图形禁忌

图形的表意也需要契合当地文化特点,一些比较含蓄的内容尽可能避免,例如使用话筒代表娱乐,药丸代表健康,虽然在国内市场比较常见,但针对于全球化的设计可能就不是很适合了。


而对于这一点每个国家的宗教文化也会有所不同,例如阿拉伯地区,避免使用星星图标,科威特、埃及、阿拉伯联合酋长国、阿富汗等因宗教原因禁酒,中东地区禁忌女性图像,甚至我们经常看到的ok都是不好的词语,在个别国家里有骂人的意思。


除了图形外,颜色也需要注意,在一些非洲地区尽可能避免颜色鲜艳或者红色。


语言显示

在界面设计过程中,设计师常常会关注字符串的显示宽度,以及换行规则等,而面临全球化设计时,文字需要适配多种语言,而外语的显示长度明显和中文有着很大的区别。为了能更好的进行极限范围的确定,我一般会选用德语进行排版,因为德语是大部分语言中,长度最长的内容了。


除此之外,我们还应该更加关注阿拉伯地区的语言显示,他与我们传统的阅读方式截然不同,用户的阅读顺序是从右往左,甚至交互方式也是如此,所以在设计的过程中,需要对阿拉伯地区的界面设计,进行镜像处理。


镜像处理

除了文本内容的显示顺序改为从右往左之外,界面中的图像、图形、图标也需要进行镜像处理,但需要注意的是,含有明确指示性或方向性的图标需要镜像,例如返回、查看更多。而像刷新、历史、闹钟等统一标准的图标不需要镜像。


6.3  空间设计

听到空间设计这个词,我首先联想到的就是超市,设计师在设计的过程中,会充分考虑人群的动线设计,商品的分布也会大有讲究,入口一般是单价较高的电子产品,手扶梯边和收银台都会放一些零碎小单品,既要考虑短头商品的展示,也要考虑长尾商品的曝光。


6.3.1 线下链接

而这一个特征,在互联网产品设计中,也是可以借鉴的,例如支付宝的电子社保卡,为了能更好的推广电子服务,设计师将线下社保局进行空间设计,用户在不同位置所看到的海报均不同,针对用户不同阶段对需求的不同,进行场景差异化设计,可以更好的传播有价值的信息。


6.3.2 到店体验

到店服务,即用线上互联网服务线下业务,其出现是为了解决传统线下消费固有的问题,为了更好的形成线上和线下的链接,我们也可以采用上述的方法,对整个线下店面进行空间设计。


例如店外主要起到引流的效果,可以让用户扫码进入店铺首页了解店铺具体的信息,而在店门口可以让用户进行扫码排队预约等,当食客就坐后根据桌上的二维码可以进入到店铺的下单页,最后在收银台布置扫码买单,整个流程符合线下体验,并可以将不同的页面准确的传递给用户,促进用户快速完成线下消费。


七、服务差异化设计

场景化设计中第三个关键内容就是事,而在互联网产品设计中,所有的事都是为了能更好的服务用户,但随着互联网成熟,功能越来越丰富化,我们需要更加精细的场景划分,明确用户对于整个服务的操作流程,结合前后场景预判用户目标,通过设计提高用户效率,给予用户惊喜与感动。接下来主要通过目的、行业、内容三个角度深入分析。


7.1 交互流程 - 服务目的

如今随着互联网不断发展,用户的时间被各种产品分割,而面临着用户在产品中的所有体验,做的每一件事情,都是有目的性的,例如打开淘宝的目的是想购物,打开抖音的目的是想放松娱乐,因此只有挖掘出用户的目的,才能更好利用服务完成用户行为。


为了让用户更好的完成任务,可以将操作流程拆分为三步,从开始到结束,结合前后场景预判用户目标,提升交互体验,而关于这个内容,我之前在《交互流程中的三大重点》一文中有详细讲解,感兴趣的可以自行查看。


7.1.1  操作前 - 行为目的

像我们常见的一些产品结构布局中,其实有也着简单的分层布局,我们可以根据用户不同的行为目的结合页面板块的内容呈现来进行结构分层布局。


下面的案例从上到下依次为,目的明确的搜索用户、分类明确的用户以及只想随便看看的用户,这样的话,可以有效的服务与不同用户的目的,也能快速实现流量分发的作用。


7.1.2  操作中 - 操作目的

根据不同的服务以及用户操作目的,判断内容的合适性,例如输入内容时,结合前后场景预判用户目标,针对不同的内容呈现相对应的键盘样式,通过设计提高用户效率,满足用户的操作目的。


操作减负

面对各式各样的数据录入,表单填写是移动端设计中最复杂的一项操作,在设计过程中可以根据用户目的进行场景区分。例如下图的案例,通过自定义的形式为用户提供了兼容不同层级的联动键盘,整个过程都在键盘输入组件中完成,保证了录入的沉浸和任务的聚焦。


场景匹配

在操作过程中,可以针对内容呈现对应的键盘样式,例如系统自带键盘的样式多达8种,我们可以制定各种场景下的使用,从而进行匹配,让用户在输入的过程中更高效。


7.1.3  操作后 - 结果呈现

当体验流程中用户操作后,需进行合理的内容反馈,可以通过场景化设计思维,结合用户目标,呈现合理的内容,提升设计效率。而在结果呈现上,主要可以分为两个方向,结构与内容。


在内容建设方面,主要通过信息架构来构建用户体验,确定各个将要呈现给用户的元素的模式和顺序,例如淘宝搜索结果页,采用了两种不同的局部方式,根据搜索内容来进行区分,例如电器类的产品外观大差不差,因此结构上采用小图模式,主要突出产品信息和卖点,而服装类的商品则采用瀑布流的形式,强化图片的视觉表现。


内容主要是借助价值去找用户,找到用户建立链接,从而产生价值,简单理解互联网产品就是一个链接工具,但为了能更好的让内容和用户进行链接,我们可以将内容进行前置处理,根据服务目的结合内容的呈现,快速建立业务链接。


下图案例来自于百度搜索,用户在搜索时,不同的关键词呈现对应的服务内容,合理运用场景化设计中的服务差异化设计,为不同的事进行设计,既能快速匹配相应的用户,还能缩短用户寻找服务的操作路径。


7.2  框架层 - 行业细分

随着互联网成熟,产品业务形态逐渐完善化,例如餐饮产品,里面会涉及到多种餐饮业态,例如早餐、茶饮、快餐、烧烤等等,而所有销售类的内容都会涉及到人、货、场。人在上面也大致讲过了,这里就不继续赘述,而面临这种行业较多的情况时,我们可以采用场景化设计思维中的分层思维,将行业进行细分,进一步让货物可以对应到符合的场景中。

接下来也会继续使用餐饮产品作为例子,进一步讲解行业细分后的设计细节。


7.2.1 行业特征

餐饮业态较为复杂,但行业之间的差异还是比较明显的,可以将行业特色进行提炼,针对不同的特点进行框架设计。


例如年轻群体较多的甜品茶饮,功能上除了基础点餐也有外卖服务,甚至也会有周边商城,这种类型的商户比较注重服务的呈现。但一些传统的餐饮行业,由于菜品体量较大,页面呈现上可以更偏向于菜品展示。除此之外,还有很多餐饮商户比较注重用户身份以及会员管理,而框架设计上也可以将资产内容前置化,满足商业目的。


7.2.2 导航设计

产品框架中最关键的一个内容自然离不开导航设计,它是专门用于呈现信息的一种界面形式,用户可以在内容结构中自由穿行。在页面设计的过程中,也可以通过不同的导航形式满足需求,例如在在菜品的展现形式上,菜品体量较大的快餐便当,可以采用侧导航形式快速进行内容筛选,而甜品茶饮类的菜品较少,可以利用双行瀑布流的形式强化商品图片的呈现效果。


7.2.3 菜品布局

框架层的关注点几乎全部在组件及相互关系上。框架确定用什么样的功能和形式来实现。作为餐饮类的产品,菜品呈现属于比较关键的内容,而面临不同类型的菜品,也能做出场景差异化的表现,这一点比较像上面案例中提到的搜索后的商品结构呈现。


在上面行业特征分析时,会发现如果从餐饮菜品数量上进行区分的话,布局上可以使用单行列表或双行瀑布流的形式,来区分菜品分发的权重。而像一些套餐的菜品,布局上可以将菜品组合摆放,方便用户对套餐内的单品进行对比与调整。


7.2.4 分层营销

在营销设计中,可以通过各种营销资源位进行宣传展示,为了让营销满足不同商户的使用,可以利用场景分层的形式,将营销表现力分为强、中、弱,三种形式,并根据不同的页面框架布局去进行表现。


7.3  内容形式

内容型产品比较注重用户消费与互动,平台也会对内容、流量、用户进行分析,确保合理的消费场景。随着产品逐渐丰富化,内容分为多种形式,例如视频、音频、直播、资讯,而内容形式也分为娱乐型、工具型、知识型和社交型,为了能更好的匹配消费场景,可以将内容形式进行分层处理,区分不同的事物,采用合适框架形式,满足用户的消费场景。


下图案例来自于淘宝内容优化设计方案,通过场景细分,主要分为三个场景,一是以浏览图片视频为主的富媒体消费场景;二是社交关系为主的消费场景;三是以文字消费为主的阅读场景。三种场景的每一种都对应了多个内容框架以及框架之间的流转链路,按下图从上往下逐渐从重分发到强沉浸的浏览体感。


富媒体消费场景内容的复杂度和数量较大,一般常见的方式是采用分发为主的双列流,满足多种类型的内容合理展示,如果以图片为主要消费内容的情况下,可以采用大卡流,突出图片的展现。甚至也可以利用全屏的形式,强化用户的沉浸体验,这种方式更适合视频内容。


以社交关系为主的内容,可以采用传统的动态流布局,更适合用户的习惯,同时也可以满足多种信息的呈现。文字阅读为主的内容,更加注重信息的阅读,可以使用文本流的形式,通过简单的对比和结构层级简化处理来帮助用户阅读信息。

为了让用户更好的消费内容,整个优化项目的过程,首先通过用户消费内容的梳理,然后结合内容的特点进行核心框架的链路整理、提取抽象化的共性框架,让各个具有相似性的场景进行拉通,最终确认框架形式。


八、总结

场景化分析可以让设计师以用户的角度解决用户痛点,发现问题解决问题,从而更好地服务于用户,不管面临多复杂的产品,都可以通过场景化设计方法,将关键的三大内容进行提炼,进一步分析,确保每个内容点都符合具体的场景。


文章来源:站酷   作者:三石设计丶 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端产品设计分析方法总结

资深UI设计者


做一个完整B端系统项目前,从交互设计的七大定律,B端产品业务调研,用户访谈研究方法,精准推导B端用户画像,到B端产品主风格的设计定调,深度理解B端主流组件库的视觉规范,进而为B端产品设计做充分的准备工作,以下内容较多,大家可以根据上述目录来进行选择性阅读。

1.1 B端组件库的概念及作用


概念:组件库的底层逻辑就是原子理论,类似于我们在拼乐高积木的时候,根据说明书一个模块一个模块来拼凑,先找零件,再拼成部件,然后是成品,这个过程和UI中的组件化是一模一样的,组件化就是原子理论集中得表现,原子(图标、按钮、字体样式等)——分子(标签栏、导航栏、搜索框等)——有机体(图文列表、内容卡片、布局模块、瀑布流图等)——模板(原子、分子组合排列组成了模板,也就是原型图)——界面(最后根据原型图形成视觉设计稿)


作用:一致性:比如在不同得界面中,如果用样的按钮,他的按钮的展现形式,要保持一致性。

高效性:比如所有的按钮不用单独去设计了,从组件库里调用就可以,这样对于设计师来说就是高效的。对用户来说,也会让用户的使用效率提升,比如当用户看到蓝色的按钮就是可以提交的按钮,看到白色得按钮就是次要得按钮,看到不带边框的按钮就是一个危险按钮等等。

组合性:通过调用不同的组件来进行组合可以形成不同的页面。


1.2 如何正确使用组件库


1.2.1 组件库的使用前提

一些主流的组件库,比如AntDesign、Element Design、ZanDesign组件库等,这些框架机构本质都差不太多, 但他们有自己的特点,具体用哪个组件库,通常由公司的架构师来进行架构选型,比如VUE(Element Design)和REACT(Ant Design),这是两种不同的技术选型,(VUE和REACT是一种前端框架的技术架构版本,可帮助前端工程师快速进行开发的前端框架)。从技术角度讲,大部分公司会首选AntDesign(React),因为有很多案例提供,VUE和有赞也可以但用的少。从设计角度,Ant Design得设计组件形式案例很完善。Element Design做起来视觉单一得样式白白得感觉,没有设计层次化,Ant Design更好看一点。所以先选择底层的前端框架,再根据这个选择前端的机构布局。

1.2.2 组件库的使用过程

设计师和前端最终目标是一样的,都是快完成保证设计质量的,原生组件不能达到要求的时候,设计师可以根据原生组件库修改样式来表达到自己的想法。但对前端来说最好什么都别改,就用原生组件库前端工程师直接复制就行,这也是因为我们设计师的要求和前端的要求是不一样的。但修改后样式的组件,底层逻辑还是原来的组件。从Antdesign等组件库里复制出来,经过figma里的各种功能操作后,比如分离组件、改变组件得形状、替换内容等,但这个组件仍然是Antdesign里的组件,组件是否改变取决于,这个图形,这个组件是不是已经代码化,我们设计师设计的组件,只是样式,需要经过前端来形成代码,只有代码化的组件,才是组件,如果没有代码化,那只是一个样式而已。所以,我们用Antdesign里是已经实现代码化了得组件,组件库里有的组件前端一定是可以代码实现的。


1.3 如何设计组件库


1.3.1 每个项目都会分这四个周期


项目初期:在一个B端项目得初期,大家都会有疑问,B端组件库应该什么时候开始建立?是不是先建组件库再开始设计?答案是,如果不是从0开始的项目,组件库在设计之初就应该建立起来,如果项目是从0开始,由于没有业务的案例,组件库组件库也无法建立,但可以建立一些最小元素:原子。比如字体(应该用什么样的字体,在正标题,副标题,大标题,正常情况下应该怎么样使用字体的得明度)、色彩(色彩规范是什么,比如医疗行业,航空行业,交通行业应该用什么色彩,决定主色不是好不好看,而是由企业来决定得,首先了解企业的VI色,通过结合VI色和产品分析出的用户画像特征,来确定主色,辅主色,确定主色后,相应的背景色、深色背景、浅色背景、灰度背景、卡片背景等,也就都可以做出来了)、按钮(通常状态,点击状态,当前焦点状态,不可点状态)、基本控件、布局栅格、图表(图标icon、文本标签、按钮、图表)、图标;通过建立原子组件,完成一些基本典型的页面设计。

项目中期:继续完善基本组件库,应用案例的完善,迭代组件库、样例库、最佳实践案例。然后再次迭代进入基本组件库。


项目后期:形成最终组件库与设计系统的规范建立,根据项目不一样详细程度也可以不一样。


延展期:为项目2.0升级准备根据使用反馈、迭代之前得组件库与规范,预计未来版本中出现的典型案例,并针对性的设计应用组件。通常很少有公司进行到这一步。


1.3.2 组件库的开发流程


1.3.3 B端组件库存在的价值


B端组件库的存在是不是意味着不需要设计师了?其实并不是,组件库可以帮助设计师增进设计效率和沟通效率,和前端沟通告知按照对应的选型组件库规范使用就可以了,同时组件库得一致性、准确性、协同性它的质量有保证。但设计师做完组件库后,继续需要关注的点是:

01、根据业务场景来优化设计组件库:因为组件库是一定会去更新的,如有必要再去更新,那一定会是很复杂得业务场景下去做更新的,这个业务场景是程序员或者以前的组件不能实现的,需要很强的设计技能去做迭代,所以需要设计师继续去做一些结合业务场景的组件来放到组件库里。

02、需要设计师把更多时间精力投入更多设计体验中,而非搬砖:组件库的建立同时解放了设计师的精力,设计师可以把时间投入到设计体验中去,而不是做一些搬砖得工作,比如按钮怎么画,用圆角还是用什么颜色,这些没有技术含量的工作,这样一来,可以投入更多时间来赋能业务更好体验设计工作。


1.3.4 B端主流组件库有哪些

2.1 B端产品的设计过程


2.1.1 用户体验五要素


战略层(属于产品愿景,满足用户的需求,产品的愿景和目标


由于用户有不同的需求进而产生了不同的产品,战略层决定了用户用干什么样的产品,比如,用户需有很多销售客户的线索需要进行管理,用户需要管理客户,那就做一个CRM系统。比如,用户想写日报,想要一个打卡的OA系统,那么产品目标就是要做一个OA系统。比如,电商里面很多商品,牵扯到很多进销存,那就做一个ERP系统。这部分跟设计师相关度没有那么高。


范围层(指功能规划,功能的规格、包括内容的需求)

功能规划:比如要做一个OA系统,其中就包含了打卡、日报、项目管理、报销、人事流转等等都是跟办公相关联的,需要把规格和功能画出来,画成简单的表格并且将它们分类,这里所有的功能都不是详细的,就是简单的分类,将功能简单描述一下,同时做一个简单的用户画像。这部分设计师只需要阅读产品经理给到得PRD需求文档即可,整体看还是偏愿景,没有形成具体的产出。比如OA系统中就总结出重点做一个审批得功能,并不知道什么样的界面,只知道一个大概的范围。


结构层(指原型设计)

这部分,设计师通常就需要参与进来,如果设计师只按产品给的设计好的原型来设计,就显得很被动,这样只能叫做视觉美化,被称之为美工,设计师应该从没有形成原型的时候,可能只是一个简单的PRD需求文档或者草图,设计师就应该参与进去。


设计师对原型进行优化设计,优化的不是业务,因为很多业务内容肯定没有产品经理了解得深刻入,这时,设计师需要优化的其实是它的交互逻辑、交互内容,一旦原型里里产生点击,一旦产生多种状态,那就要去了解它,每种状态产生不一样的界面结果,其实对标的就是设计师设计的界面将产生什么样的变化,换句话说,如果有界面的变化,内容得变化,设计师就需要参与到其中。目前来看,很少公司有专门的交互设计师,要么这部分工作由UI设计师来完成,要么由产品经理来完成,很多企业已经把设计进行前置化,由UI设计师来完成交互的工作。


其中交互设计+信息架构设计是设计原型图的关键,这两个是密不可分的,如何制作原型图,如何在原型图里设置一些交互事件,给大家推荐《信息架构设计》这本书里有专门讲到。再了解原型设计之前,不得不提到一个通用知识点,交互设计的七大定律。(后文有介绍)


框架层(指界面设计、组件设计)

框架层这部分有一些争议,有的设计师认为就直接做界面设计了,其实框架层还不能把它理解成是界面设计,它仅仅是做了一些业务的模块儿的框架而已,更多的其实是将它组件化: 将原型组件化、模块儿化,类似我们直接从Antdesign组件库复制来内容简单改改之类得操作,完成的是组件和界面的设计,这些界面并不是最终完整的交付样式。


表现层(可视化呈现,UI视觉呈现)

这部分和设计师关联度最大的一部分,就是界面中的配色、配色、图标、样式、结构、布局、排版等设计,但是我们设计师需要从范围层了解业务熟悉最初PRD产品需求文档去一点点做起,其中设计师在战略层参与度可能只有2%左右,范围层参与度5%左右,从结构层开始逐步往上参与度越来越高,至少结构层,框架层和表现层的参与度是很深得。



2.1.2 B端产品的设计过程是什么

所以,通过梳理用户体验五要素,不难看出B端UI设计师的工作流程就是,01. 接到项目后,设计师主要阅读产品经理给到的PRD需求文档,同时去参与原型设计,根据最初版PRD输出一份低保真原型图,和其他部门进行初次评审;02. 经过初次评审讨论过后,完善后的功能和页面文案,产品经理补全和输出完善后的产品PRD需求文档,由设计师根据完善后得PRD需求文档经过规范设计输出高保真原型图 ,与其他部门带着初次评审讨论后的问题,进行二次评审。03. 最终再由设计师经过组件化形成视觉图。04. 同时设计师提供切图,与前端紧密沟通,上线前制作设计走查表,进行设计走查。05、最后上线后根据数据、用户反馈等提出交互和视觉可优化得方案建议,进行版本迭代。


2.2 交互设计七大定律


01. 菲茨定律:当设计师需要让用户重点去看到页面中某一个突出点,点击到一个区域时,设计师就需要做到适合的大小,适合的区域,适合的位置,适合的形状,适合的颜色。也就是你想让用户点击的时候就突出重点想显示的,不想让用户点击退出的,就把它设计的的足够小。比如按钮得退出和付款,实心付款按钮为主要按钮,虚线置灰退出按钮为次要按钮,比如常说的海报中字要大,logo要大,这些都属于菲茨定律。


02. 席克定律:用户面对的刺激(或选择)越多,他们做出决定的时间就越长,由于用户的时间很宝贵 ,用户没有义务花更多留在我们的网站上,所以我们需要有选择的地方对选择进行分类。


03. 7土2法则(米勒定律):比如圆周率3.1415926,一般都能记住,而如果再往后加几个数字,大家往往很难记住,原因就是经过大量测试,人脑容易记忆7位数字前后得数字,比如设计银行输入密码的时候就用到了7土2 法则,设置密码过多人脑不易记忆。


04. 接近法则:格式塔接近定律指出“彼此靠近的物体或形状似乎形成了组”。


05. 防错原则:当用户在使用产品中,预判用户本身或产品一定会出错时候,可以告诉用户怎么可以不犯错,或者将风险降低。比如电脑的关闭电源键,就允许电脑司机时允许系统犯错,让用户使用关闭电脑电源键进行重启。比如银行取出钱后,银行卡有忘拔现象,银行完全可以做到像光大银行那样去再取钱流程中改成先拔卡再出钞得交互流程,就可以避免忘记拔卡,但其他银行都没有这么改进,仍然是先出钞后拔卡得原因是允许用户犯错。


06. 奥卡姆剃刀原理:化繁为简,如无必要,勿增实体。比如小米电视遥控器的设计,由原来传统的很多遥控器按键只优化成了保留上下左右为数不多的几个重要按键,原来的遥控器数字按钮如果真正要输入数字的时候通过功能性,调出数字来,这样在遥控器得设计中基本只保留20%主要功能按键。这就是交互上的优化。比如在UI界面中,也会用到这个问题,简化文字,把文字用图标替换,还有各种流程得优化等等。


07. 雅克布定律:以用户习惯的使用模式去设计产品,降低用户学习成本,遵从用户使用习惯。 利用现有的思维模型,用户习惯,我们可以创建出色的用户体验,使用户可以专注于自己的任务而不是学习新的模型习惯。



2.3 B端产品用户画像


2.3.1用户画像概念

用户画像又称用户角色,作为一种勾画目标用户、联系用户诉求与设计方向的有效工具,用户画像在各领域得到了广泛应用。用户画像分为两种,不论C端和B端都会做这样的用户画像。总共可分为两部分,基本信息数据和行为数据。


基本信息数据:当我们去了解用户的基本信息的一些数据时,职业,收入,年龄等等,这些和功能有很多的关联度,比如唯品会用户画像关键词是:女性、折扣、白领 ,唯品会产品定位聚焦女性,这些基础信息数据,就能给产品带来很好的结果,当我们要做一个女性的购物平台的时候,可以先把男性用户抛除掉去考虑设计方向,再比如收入就知道了,大概产品面向的收入群体将是什么收入群体的人,那么我卖货的价格区间、包括设计的风格就是一个什么样群体的设计风格。那些卖奢侈品的不是黑色就是灰色,要不就是棕色,但未必是适合唯品会产品的风格,需要找出这些基本信息去和产品进行关联度,把基本信息放到设计结果中去考虑。


行为数据:指用户的爱好,这部分群体有哪些爱好,是喜欢购物,还是喜欢运动,他/她的消费情况是什么,喜欢旅游还是美食,他/她经常用哪些APP,他常用的设备,是苹果手机呢还是安卓,小米还是华为,等等得到这些数据,也能得到一些用户喜欢什么样的竞品,这些数据就能侧面的在我们的产品中得到反馈,得到功能和设计上的指导和其他产品的区别。这些行为数据,不管我们做C端还是B端,都要获取到,但C端和B端获取到这些行为数据的结论是不一样的。因为C端用户研究方法不一定适用在B端用户研究方法。C端最终抽象成一个人,给他带来的很多属性,这些等等都会成为他的用户画像。

进而找到这个人,将他的社会属性,从抽象的角度慢慢变得具象,C端是他/她的社会属性,把他做成一个普通的人,这个人有他的社会属性,有他的社会价值,有他的社会行为。比如一个女性,一定喜欢美食,一定会买化妆品。


2.3.2 B端用户画像本质

比如做一个和电影相关的管理系统,电影行业包括很多人员管理,设备管理等,这里不能把用户画像抽象成一个男性或者女性了,而应该把它抽象成一个职业,比如抽象成一个导演,导演需要去管理什么东西,它需要哪些资源去整合。导演就又叫做行业属性坐标。B端不以社会属性去做用户画像,一定以行业坐标去做用户画像,我们在整理作品集的时候需注意不要与C端画像整理混淆。


我们要做一个行业可以不用管他/她是谁,也可以不用管他/她有什么样的社会属性,比如做CRM最重要的在里面起到作用的是,客户关系管理和销售等; 比如做OA系统,就是一般的员工,等级,职能等等,可以看出行业属性(职业属性)决定了他的用户画像的精准度,一定把这个人拉到行业里去研究,研究社会属性没有价值。这是C端和B端做用户研究最大的区别。


2.4 B端产品用户调研


2.4.1用户调研的作用/目的/重要性


01. 了解产品业务需求定位:可以帮助了解目标用户的信息,从用户的角度:未来使用你产品的用户,他理不理解你的产品想要表达什么,你的产品讲了哪些功能。因为很多好的产品我们打开它第一眼就知道要干什么,是给我们做什么的。同时站在设计者的角度:怎么可以把这个产品设计清楚,比如做一个CRM客户关系管理系统,具体管理什么我们是不清晰的,想要清晰就需要通过用户调研这个过程给它展开。


02.解决功能信息架构问题:可以帮助设计师更明确需求功能得合理性和优先级,比如页面标题的使用、标题的层级、需要在信息层级清晰得情况下体现出来,而明确信息层级同样需要通过用户研究体现出来。


03.让可用性测试更加准确:可以帮助锁定合适的测试用户,来测试我们的产品使用程度,使用体验是不是好,这时需要要找目标用户去测试,比如小米有品针对群体是米粉,唯品会针对的群体是职场女性,而不像C端找所有的人去测试。


04.解决团队协作沟通问题:确定用研目标可以有理有据的把设计目标和产品经理的意见达成共识,因为未来一定会多次和产品进行PK,像诸如设计师组件化没用好这些理由也不会是pk点,确定用研护镖可以更好的深度去理解原型图,可以把团队协作沟通的问题解决好。


2.4.2 用户调研的方法


01. 确定研究对象:首先拿到一个产品,拿到一个需求的时候,这个需求通常很模糊,比如只告诉做一款CRM客户关系管理系统,但汽车行业,服装电商行业,保险行业,银行金融等等,都有CRM客户管理系统,不同行业的CRM肯定是不一样的,这时候,比如要做金融的CRM,那研究方向就已经确定了,金融CRM就可以确定去研究金融行业的业务链,业务流程,具体找哪些用户群体,可以根据以往的惊经验和产品的目标去确认。


02. 找研究方法 : 研究方法分主动和被动,我们通常用的方法是被动方法,比如自我报告法:当这个产品产生了一些数据,我们从后台可以拉取这些数据的时候,通过这些数据去分析,这是被动的方法,这个被动的方法所有项目都可以用。而主动的方法,就是观察和采访,主动去找用户去找关联度。


03. 获取到数据 : B端和C端区别之一是提高效率,它要产生的结果只有一个结果,就是减少成本,任何B端的系统都是为了实现这个目标,提高效率和减少成本。所以获取数据,研究数据的方向不能偏离搞错,用户研究的方向不要搞错。比如我们以用户为中心来设计,就会认为用户的操作体验感是第一位的,其实不对,放在第一位去考虑的应该是以系统的最优化,提升效率为第一位,而用户也可以为这件事情做一些改变而找到平衡点,数据导向得提高效率,减少成本有时会大于用户的操作体验。


04. 用研行为: 刚才前面提到的这些注意事项,到底应该找什么方法去得到这些数据呢?第一我们可以通过后台数据比如通过百度统计等系统来获得;第二通过问卷法发出一些问卷,用户可能散落在全国不同位置;第三可以通过用户定性访谈来获得;第四可以通过用户旅程图来决定用研行为。


05. 分析调研结果: 研究结果不是为了放到我们的B端作品集里的,而研究结果一定是为了去定性、定量、让数据回归到产品功能本身。同时经常问自己这些问题,去根据研究结果和问题进行匹配思考,比如研究了那么多,用到了用户画像得出的结论了么,用到了哪里?在项目中能举个例子吗?采用什么样的视觉去实现了用户体验要素?


2.4.3 B端用户访谈模板


2.4.3.1 用户访谈概念:


01.确定访谈目标:了解目标用户群体,通过访谈信息来进一步构建所需要的用户画像,从而确定设计方案与功能优先级。02. 定性/定量访谈目标:将这些目标定量、定性,选择不同的访问对象,构建不同的角色画像。比如问销售的用户画像,要找不同的访问对象,销售总监,普通实习生等等,三到四个角色,样本越多,用户画像越准确。03. 访谈过程:提前把问题写出来,拿着问题去聊,用录音设备,记录表格,一个提问,一个记录,分开后记录比较准确。04.访谈结束:要做信息汇总,要做分析建模。分析建模就是将信息最终变得有意义。


B端用户访谈模板有30个问题,这30个问题决定了我们的用户画像的精准度和产品的用户画像的价值。用户访谈会问些什么问题呢?当我们调研的时候把问题写出来的时候,就已经解决了一半的问题了。


2.4.3.2 B端用户访谈30问


01、基础特征


岗位:你是从事什么岗位的?是总监还是普通职员?目的是为了知道不同的权限的使用者,进而就可以在系统中设置这些权限。

职责:需要获取到用户不同的需求,因为每一个岗位有不同的职责,他们的需求点也是不一样的。根据这些不同的需求,我们在界面中得动态仪表盘部分,就可以根据不同职责来显示不同的内容。

姓名:可以让访谈记录得到更加真实的体现,目的是可以获得产品的一些真实的基础字段。

年龄:是用户认知和经验度的体现,用户的年龄可以代表他们对行业的认知,和整个企业流程的认知程度,一般性理解,用户的年龄越大,那么他的经验越丰富。

教育:指用户是什么学历,目的是为了了解用户的经历与熟练程度,通常认为,用户的教育越高的人,他们往往使用软件操作的熟练度会越好。

位置:指用户在什么地方来使用,目的是知道了场景与优先级,用户是在写字楼里还是精英场所来使用我们的产品。因此得出基础特征是要得出这些结论,得出这些结论进而反馈到产品中去。


02、行为接触点


使用频次:不同的岗位用户使用功能的优先级是不一样的,用户使用频次越高的功能,这个功能的优先级就越高。了解之后,那在下次迭代的时候就需要把重要级别的功能放在易操作的区域去体现。比如这个重要功能就是一个icon,那么把它放一个快捷入口。

使用时长:也能代表功能的优先级,用户使用时间最长的功能,代表可这个功能优先级很高。

时间段:用户在什么时间段使用的是最多的,我们就知道了这个功能的活跃度,这个数据指标,主要和技术有关,我们可以从后台数据去获得。

使用设备:用户使用设备兼容的优先级,平时用户用什么设备,再访谈过程中,需要问具体使用电脑的分辨率,屏幕的尺寸,屏幕的比例,都可以去实际的调研一下。在我们做B端界面选择屏幕尺寸的时候,可以采用结合实际情况用户使用的屏幕分辨率尺寸来设计界面。

相关软件:用户平时的操作习惯和流程是什么,还会使用其他软件吗?比如他们还用什么其他的竞品,可以继续问用户其他的竞品哪里比较好,哪里是亮点,那最终得到的目标就是用户的操作习惯和流程,这些也可都可以反馈在我们产品中。


03. 使用环境


碎片化时间:主要解决用户场景的问题,比如汽车4S店销售,当你去买车时,销售人员会问,你会买什么样的车,会记录你的年龄,用车习惯,用车时间,姓名,预算,都会记录,销售通常会用一些碎片化的时间去记录。此时就可以得出两个结论:1.我们在设计的时候是否可以考虑让销售充分利用碎片化来进行这些信息的录入,而且方便他的录入,比如他本来只有电脑端,电脑端是一个完整版的功能,我们能不能给他设计出一个移动端来,让销售不用回到电脑屏幕中就可以去记录这些内容。2. 记录时也有两种记录方式,是客户讲话的时候销售去记录还是这些事情做完之后销售再去记录。通过这样的行为会得到这样不同的设计结果,比如有人问你们公司为什么要做B端的移动端设计?以上就可以有理有据去解决销售的场景问题。


用户的操作环境是什么:主要解决视觉体验问题,用户是白天操作还是晚上操作,是在强光环境操作还是弱光环境操作。这些都应该是考的点。比如B端使用的ATM机,应该设计成白色还是深色模式,我们知道一般都是深色模式,是因为通常是室内,它和光线有关系,如果是室外的取款机,四周又没有遮挡,如果还设计成深色,肯定是看不清楚的。比如HMI车载系统,白天模式开了深色,一定会看不清楚。所以要提前判断使用深色模式还是浅色模式,也需要考虑在设计的时候使用什么样的色彩和色调,在室外使用还是室内使用,如果对色彩不怎么挑,那也可以使用VI色,这样一来视觉的保障色就确定了。还可以确定在使用周期时间,要多长时间完成一个操作,应该使用什么样的方法可以尽快完成一个操作。通过用户的操作环境可以得到以上信息。


是否有平行事件:用户在做这件事情的同时,他是不是需要做其他的事情,要得出至少两种平行事件,得到的结论是,我们的界面是不是需要把某些功能整合在一起,因为用户经常是需要同时做这两种事情,同时去打开这两个功能,通过这样的反馈可以把同时使用的这两个功能结合到一起,通过访谈可以得到这样的依据,来进行功能的整合。


04. 主动询问用户观点


用户的驱动力: 去了解激励因素,就知道了什么功能应该做完善,什么功能并没有那么重要。比如汽车销售为什么要录入信息,因为可以增加汽车的销量,录入越准确的用户信息,他的销售量越高。也就是用户做这件事情,他的原因是什么。


用户遇到最难事件: 在工作中或者用户使用过程中遇见了什么样难的事情,这件难的事情,就是产品的痛点,就明白了当前产品迫切需要什么样的功能去帮我们设计师来解决当前产品痛点的问题。


用户遇到最飒事件:他在使用过程中最满意的是什么事情,就是爽点是什么事情,那些产品中解决了用户很好的问题的部分,去把产品更好的放大,让用户继续使用。也就是通过访谈我们知道了产品的爽点是什么。


用户担心事件:在他们使用过程中担心的是什么,我们也要要了解这些隐藏的问题.


用户期望事件: 用户希望得到什么样的改善,最终的目标是想解决什么样的问题,到这一步其实所有问题目前都没有答案,我们可以继续访问,先做记录,不做最终的答案.


问用户目前状态: 我们可以了解待解决的问题,通过产品想解决什么问题,进行收集需求;用户对于产品升级有什么小期待,进行收集需求;通过用户的反馈目前产品的哪些问题,收集到目前反馈的问题;以往问题是否有效解决;进行收集反馈。觉得不错的同类型产品有哪些,通过了解竞品情报,我们可以竞量多问一些 觉得不错的竞品有哪些;目前产品有哪些地方很好,很好的地方要保持,有的产品升级后,以前特别好的功能突然消失了,改了没必要,好的功能保持就可以;前产品有哪些地方不好,我们去优化不好的地方;以往问题是否有效解决,当有问题需要解决的时候,用户的问题是否是通畅的。通过看用户如何反馈,我们可以了解功能倾向,了解整个流程是否通畅


05. 聊生活

发觉人性闪光点,提升产品差异竞争力,1、问目前的生活状态,婚姻状态,有没有孩子,接送孩子的时间,平时有什么爱好?什么爱好不错?发觉人人性的闪光点,好的不好的产品都有共性,B端产品中视觉的倾向是什么?比如有插画,温馨的语言提示,通过什么样的情感设计可以照顾到每个人的生活。


2.4.4 B端用户访谈得出结论


如何判断功能在用户那里好还是不好?前面所有的都只是在记录,现在才是在做判断,判断的第一件事,是做定量的整理,所有的问题都收集到了,也记录到了,至少需要有两个样本,去做定量整理。

2.4.4.1定量整理:行为


第一步是行为的总结,量级的总结,把记录的问题点、功能点和关键词放到表格里面,经常出现,迫切需要解决的是什么问题,较少的问题是什么,偶尔的行为问题是什么,因此偶尔的优先级就不高了,主要关注经常遇到的问题点、功能点和关键词。


2.4.4.2 定量整理:特征


把每个角色按照以下表格里的的特征进行定量的描述,这时候仍然不能找出它的共性点,但已经把用户的特征进行分类整理了,定量之后再去定性。


2.4.4.3 定量整理:特征/角色/流程


这个角色名称是一个具体的名字,比如王某某。以下这张表:可以看到在我们的系统中有哪些的权限,有哪些的角色,他们的需求是怎么样的,这是一个完整的用户画像。用户画像是一个结果,是通过用户访谈的形式完成了用户画像,并不是被动的接受数据信息得出的,所以通过用户访谈的形式进行定量定性分析得到的结果是最准确的。


3.1 建立情绪版


3.1.1 情绪版的概念及作用

本质是将情绪视觉化,情绪版并不是玄学的东西,它确实可以通过图片找到对应的图形元素,因为图形(照片)是可以表达情绪的,比如看到一张照片会感受什么什么情绪:热、冷、饿、干渴、安静、压抑、神秘、恐怖、失落、沮丧、速度、力量这些都是情绪相关的关键词。


情绪版是一个特别快速能和产品,我们的团队包括设计团队进行沟通的一种方式,比如要设计一个界面,需要几天才能设计出来,但我想提前知道一下未来界面设计成什么样子,那就先做一个情绪版,让大家知道,找的方向是什么,这样适合与大家及时的沟通,大家也会明白产品将会做成什么样子,达成产品的最终设计定调。


3.1.2 怎么建立情绪版


01. 提炼关键词:获取本次产品设计中所要实现的产品3-5个必要的关键字词组,其中包括交互或视觉目标,通常由一些比较抽象的形容词组成。比如:在做的产品是医疗行业,那么医疗相关关键字词组是:生命/健康/安全等。


02.关键词发散:通过获取到的关键词的基础上,发散出来一些新的词语,这种发散词汇,不是简单头脑风暴产生的,而是要有目的性的进行提取,要更加的具体。比如刚才举例医疗行业,生命可以继续发散出血液、器官等衍生关键词。


03. 搜索图形: 对之前总结出的几个关键词在图库中进行查找,也可以在直接在behance里找别人收藏好的情绪版图片直接用,效率可能更高一点。


04. 制作情绪版: 搜索大量图片后,挑出我们需要的进行整理,采用一种拼贴方式进行设计排版,拼贴出来需要得到需要得到的色彩,构图,质感和字体。


05. 得出结论: 在图形、色彩、字体、质感、构图,以上五点,得到合适的设计方案,快速与团队进行沟通,直观表达产品清徐,达成产品的设计定调。产品调性(企业调性)其实就是用企业的方式把故事讲述出来,是一种通过情绪版方法来讲故事的方式。


3.2 品牌三元法


3.2.1 品牌三元法为什么逐渐替代情绪版


品牌三元法是通过品牌三板斧模型得出的一个确定设计主风格的一种新得方法,品牌三板斧模型可以总概为用户调研关键的三个维度,一目标用户是谁?二产品服务是什么?三对于目标用户来说,你的产品服务有什么核心价值。当在回答完这三个问题以后,我们其实就已经清楚我们的品牌定位是什么了,因为它的核心优势是比较明显的,这样我们就知道我们将来会面对什么样的人群,去怎样去宣传它的卖点,同时做出产品的差异化。


通过这几年得工作案例设计实践,在确定设计主风格时,情绪版方法逐渐有被品牌三元法替代得趋势,因为情绪版这种把抽象的词不太好表现的词,翻译成图片的方式,比如刚才提到医疗行业的关键词是生命,健康,安全的,设计师找到很多这种相关的图片,挑出来后从这些图片里面找到一个共同的规律,最后去设计。这里面就有两个问题,一个原因是关键词非常的平,生面,安全,健康,很难更准确的表达衍生关键词。另外一个问题是它非常局限设计师的创意,因为它是从一些现有的图片里面然后去挑,所以很多设计师就反馈现有的方法不是很好用,比如当我们想到安全这个词,可能所有人想到都是特别绿的感觉,或者干净这个词,就会统一联想到白色这个画面,大家从一开始想法就差不多,所以它很难体现出创意。所以由于情绪版严重限制了自己的想象力,没办法把产品核心的气质表现出来,虽然情绪版正确但是是一个平庸的结果,大家没办法记住的结果。


3.2.2 如何应用品牌三元法


01. 理性层面(业务层面),传递产品理念:获取本次产品设计中体现业务层面,可以传达产品理念得5-10个关键词,对应的放在左边。


02. 感性层面(人文层面),营造产品氛围:主要体现这个产品给用户带来什么好处,宣传的角度是什么。获取本次产品设计中体现人文层面,可以传达产品氛围的5-10个关键词,对应的放在右边。


03. 个性层面(气质灵魂),创造独特风格:结合理性的业务层面和感性的人文层面,来创作出什么样的画面,和独特风格的感觉。同样总结出5个左右的关键词,放在下边。


04. 结合以上三个维度,提炼主视觉画面:当出现这三部分词的时候,经过思考或者大家一起头脑风暴,可能一开始想到的比较浅,但最终一定能想到一个最终关键词或者特别符合我们这个产品气质的画面,因为以上三部分得出关键词也都是经过品牌三板斧模型推演出有关联的关键词,想到一个符合产品气质的画面并不难,再得出这个主视觉画面后,这就是最终产品调性的主视觉,既符合产品定位,又具有独特的差异性。


05. 传达产品,用视觉语言讲故事:接下来,当这个主题、主视觉确定了以后,在看怎么样用具体的视觉设计技能,去传达我们的产品,也就是用视觉语言来讲故事,具体注意三个方面,一是表像,元素要符合这个视觉主题,二是关联,元素之间要具有关联。三是隐喻,用视觉的手段含蓄的表达产品的一些特性。比如云计算的一些产品,做得比较复杂每一个图标上都有一些曲线切割的画面,这样做的原因其实不是为了炫技,它是为了表达云计算弹性可扩展的特性,好比拍电影,中国人讲究隐晦。


4.1 色彩规范


4.1.1 选色

在系统色彩中,以Antdedign为例,系统色彩里包含了很多不同的色调,但不可能用到这么多颜色,这时要应用选择几个颜色,选几个我们应用的颜色。第一步要做的就是选色,选出应用色彩,这个应用色彩也就是我们建立得视觉规范中的基础色板,在选色时候需注意,要有有明确的心理预期,比如医疗行业中常用蓝色和绿色,就是符合预期的颜色。在基础色板里选择调色,应选择两个相同级别的蓝色和绿色;基础色板里选不同颜色时不要超过三个级别的跳跃;当选择一个确定的颜色时,可以选择草绿或者青绿色来作为辅助色;在基础色板里,最顶部的颜色最适合做背景色,中间的颜色适合做按钮色,底部的颜色适合做状态色,或者小面积文字的填充色,其余就是搭配过度的作用。再比如零售、比如金融行业的产品,会选择不同的颜色,那这些颜色代表了什么,是不是会和企业的VI色是有相符之处,这些都是我们去要考虑的。


4.1.2 注意色彩的两个特性


01. 注意品牌性:体现特性和传播理念、价值观:比如宜家,我们立刻会想到的是黄色和蓝色。比如京东,我们会想到红色。如果是饿了么,我们会想到蓝色。这些都是标识性的色彩,体现和传递的就是品牌理念和价值观。这些颜色一定不是随便选的,比如,宜家的黄色和蓝色,其实是瑞典的国旗的颜色,代表着宜家的来源地来源于瑞典,因为瑞典是一个很强调简约设计的国家,贯穿始终是在强调它的的价值观。一些关键行动点:比如选中的状态,按钮的颜色,在很重要的地方用主色表达,这就是在体现B端的产品的色彩价值观和企业价值观的地方


02. 注意色彩的功能性:色彩需要体现功能有明确的信息以及状态含义,色彩代表它独特的含义,比如成功色,通常会选择绿色,再系统色板里,青绿草绿都可以选。比如出错/删除/失败用红色,表示警告警示。比如链接要用蓝色。


4.2 图标规范

画图标要注意图标的识别性、统一性和独特性。图标首先要一眼看出来表达的含义,其次是图标设计图标的大小,线宽粗细,圆角大小,图标风格等这些都需要统一,最后最好可以体现出图标的独特性,独特性就是差异化,这也是品牌三远法得核心,塑造产品的差异化,具体分析方法也可应用在图表设计当中,比如根据品牌基因进行延展,也可根据主风格主视觉设计定调,设计出独特风格且符合产品定位得图标应用在产品当中。


4.3 文字规范


4.3.1 字体家族

在B端页面中字体的显示顺序,有固定的一套代码模式,可以理解为,比如有的用户电脑没有平方字体,所以会显示出冬青黑体,来替代平方字体的设计稿,如果没有冬青黑体,就用微软雅黑替代显示,字体家族中,从左到右代表了字体显示的有限顺序,平方、冬青黑体、微软雅黑、黑体、宋体,中英文都是。


4.3.2 主字体

在系统中有中文常用PingFangSC、微软雅黑、思源黑体;英文常用San FranciscoUI(SF字体)、Helvetica Neue、Arial


4.3.3 大小与行高


方法一:在Antdesign中规定的,比如字体大小是14px,行高就是22px。规范里最小字体是14px,但可能有注释字体,字号最小是12px。表格里的内容是按照表格里的行高来约定的,与字体行高无关,这个前提是,不在表格里内。当没有出现文本字体,表格里的字体的时候就需要去设置字体的行高,Figma里默认行高是140%,比如14px字体,行高就设置成22。这是Antdesign里的规范,但不是唯一的规范。需要注意的是,如果使用一个标准就全部使用一个标准,这个需要把选中文字段落进行调整行高。


方法二:是当按倍率去算的行高规范,方法步骤是先调整好行高,去改变字体大小,比如无行高时,1/100%/1倍行高,注意加上%号;紧凑行高,1.3行高/130%;常规行高1.5行高/150%;宽松行高,1.7行高/170%。


4.3.4 文字的层级关系

辅助文字12px、正文(小)13px、正文(常规)14px、小标题(16px,小标题是相对于14号字出现的)、标题18px、主标题20px


4.3.5 字重

比如常用的苹方有6个字重,但在平时的设计中根本用不上。中文环境6个字重在实际显示并没那么好,常用两个字体,萍方常规体400(常规),苹方中黑体500(粗体)。而英文可以用粗体600。


4.3.6 字体颜色

在深色背景下、和浅色背景下不同内容的色彩透明度不同,具体透明度用百分比显示。在彩色背景下或者在不同颜色之下,字体应该使用白色还是黑色,应该按着规范严格使用,难点在颜色相近的时候选择白色还是黑色,也需按照规范执行。


4.3.7 文字对齐关系


文案类对齐:页面的字段、段落较短标题、需正文左对齐


表单类对齐:保证整齐适合阅读,冒号对齐法找到中间的冒号,(左右对齐),如果全部使用左对齐或者右对齐会更乱。左边一般最长字段六个字。前提是中文环境,不是国际化。冒号左右要留多少像素:8px的倍数相关值,4(窄点)、8(正常)、12、16(宽一点)都可以。


数字类对齐:日期,居中对齐;年龄,居中对齐/左对齐;非固定的数字:价格,采用右对齐,因为右对齐很容易看到价格的多少,哪个超出的更多,就越贵的,更容易区分数字的多少。


4.4 层级规范


层级规范得核心是对信息的间隔和区分,信息的区分间隔要用偶数8的倍数。具体可分为同层级的区分,用色块(比如气泡)、边框(栏目之间抖索狂等)、线段来进行区分。错层区分,用弹窗(背景变暗)、边框阴影(阴影的出现是拟物化的出现,当物体离它的光源越近,比如高度越高,它的阴影就越大越宽。离它的底部越近,阴影就越小,比如下拉框、搜索框、日历控件、弹出窗口来区分)。


这里需注意,关于投影,再前端角度考虑尽量不要用太多的特效滤镜来设计,因为在B端网页中,浏览器的兼容性不好,比如用ie浏览器就根本看不到这样的效果,如果用谷歌浏览器能看到,用safri浏览器能看到,但在火狐下等又会看不到,想要都看到就需要兼容很多代码,需要前端加很多代码实现兼容性的效果,很增加前端的工作量,所以在B端很少用非标准型的滤镜代码使用,虽然可以实现,但一般不太用,一般就是变灰、变深、变透明度最简单的方法实现。不同于移动端,因为IOS用的是原生的开发,所以不存在这个问题。


文章来源:站酷   作者:morning_c

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




定量研究进阶:客户满意度模型与卡诺模型

ui设计分享达人

如何提高“数据修养”?

定量研究指的是对用户的某些特性进行数字化测量并进行统计研究。对于定量研究来说,数据的统计以及数据的分析是尤为重要的。

首先,需要说明数据修养,与统计技术的水平无关。

数据修养指的是培养科学的、正确的对待数据的态度,在收集、分析和解读数据的过程中做到求真务实。


1、在研究设计时就考虑到数据分析方法

良好完善的研究设计是正确进行数据分析的前提,如果没有科学的设计,良好的数据质量,那么无论用什么方法和软件都无法获得真实的结果,统计就变成了“数字游戏”。


从预期的研究结果出发,向前逆推数据分析方法和研究设计

Step1 · 要解决什么问题

Step2 · 期望得到的研究结果

Step3 · 需要的统计分析方法

Step4 · 需要的数据类型

Step5 · 对应的调查方法

Step6 · 研究的设计


2、在研究设计时就考虑到数据分析方法

在问卷开始前将问卷框架设计做好


3、数据收集时的注意事项

线上问卷调查是目前我们所用到最主要的调查形式,进行线上问卷调查时,误差的主要来源包括抽样误差和非抽样误差两类。

抽样框误差:抽样框误差产生于目标总体与抽样框的不一致,因抽样框引起的误差主要有样本的代表性问题(如是否能代表网民、是否能代表某类用户总体等)以及抽样框重复(用户重复回答)以及抽样遗漏(如无法包括竞品用户等)。

解决方案:正确界定网络调查的适用范围,网络调查应主要针对以网民为对象的项目。


无回答误差:样本中的部分个体不愿意或是无法完成调查问卷而产生的误差,原因:

(1)激励手段不够,缺乏交流。

(2)技术障碍,如网速不稳,浏览器不兼容。

(3)对隐私的顾虑。

解决方案:网络调查与抽样技术相结合,进行问卷投放跟踪(如提醒用户填写),或者结合有一定激励性质的产品运营手段。


计量误差:计量误差又称登记误差,是指由于各种原因使得调查和计量的结果与真实情况不符而引起的误差,如,问卷歧义,被调查者对调查内容定义和概念误解所造成的误差。

解决方案:科学设计调查问卷,要求调查问卷更易于理解、更加完整、更具有亲和力,保证被调查者做出准确而真实的回答。



顾客满意度模型

是指用户对一种产品或服务进行消费体验后的感知,与其期望值进行比较后,所产生的的一种心理状态。

用户满意度理论的发展

1974年,本田公司就进行了有关客户对汽车评价的调查,但是当时没有“顾客满意”的概念。

1989年,美国密歇根大学商学院质量研究中心的费耐尔博士将计量经济模型引入顾客满意度测评建立了费耐尔逻辑模型,得到广泛的应用。

20世纪90年代后期,CS(顾客满意度)理论已成为在全球工商界开始盛行的一种新型的企业文化和管理哲学。

与此同时,许多国家(地区)先后对顾客满意度指数测评的理论、模型和方法开展了全面深入的研究。


以美国顾客满意度的模型 - 费耐尔模型为例,各模型元素的构成元素参考:


美国顾客满意指数模型主要内容框架:


测评指标体系的量化:李克特量表

对事物的特性变量可以用不同的规则赋值,因此形成了不同测量水平的测量量表。基本的测量量表有四种:类别量表、顺序量表、等距量表和等比量表。顾客满意度指数测评中应用的五级李克特量表就属于其中的顺序量表。一般采用的五级态度是:满意、较满意、一般、较不满意和不满意,相应赋值为5、4、3、2、1。也可为相反的顺序,将五级态度在题目开头给出,然后让被访者根据对每个测评指标满意程度直接在相应的方框上打钩或者画圈。

顾客满意度研究除了通过李克特量表将测评指标体系量化以外,还有一个非常大的特点,即测评指标的权重。

顾客满意度指数测评体系反映测试对象的质量水平状况和特征,而每一测评指标的变化对顾客满意度指数变化的影响程度是有所不同的。反映影响程度的重要尺度是权重,权重的确定与分配是测评指标体系设计中非常关键的一个步骤,对于能否客观、真实的反映顾客满意度起着至关重要的作用。



测评指标权重的赋值方法:

(1)主观赋权法

(2)客观赋权法

(3)直接比较法

即以同级指标集内重要程度最小的指标为基础,其他指标与之比较,作出是其多少倍的重要程度的判断,然后逐一分析,得出各指标的权重。

(4)对偶比较法

我们将重要程度分为非常重要、重要、比较重要和不重要四个等级,把所要比较的指标配成对,然后一对一地对指标的某一特征进行比较,做出重要程度判断:

a、当A与B比较时,A非常重要,B不重要,则A=4,B=0;

b、当A与B比较时,A重要,B比较重要,A=3,B=1;

c、当A与B一样重要,则A与B分别记为2。

(5)德尔菲法

(6)层次分析法

是美国著名运筹学家赛迪给出的1~9标度法,它根据各测评指标的相对重要性来确定权重。层次分析法可以通过测评指标两两比较,使复杂的无序的定性问题能够进行量化处理。

(7)相关分析

(8)回归分析

(9)线性结构方程模型(LISREL)

(10)部分最小二乘法(PLS)

(11)路径系数分析

主要作用是分析顾客满意度指数模型中各结构变量之间的关系,分析顾客满意度指数主要受什么影响,从宏观上如何进行调控才能更有效提升CSI。具体来讲,就是在百分制的计分方式中,因变量变动1分,直接影响到后面结果变量变化的分值。


如图中所示,产品质量提高1分,将直接影响顾客满意度提高0.36分,结构变量除了这种直接影响外,还可以再模型中箭头所指的方向上产生间接的影响。如图中顾客期望除了对顾客满意度的直接影响是-0.11外,还通过顾客对质量的感知和顾客对价值的感知对顾客满意度产生间接影响,间接影响系数的大小可以由所有从顾客期望到顾客满意度的路径上的系数乘积的累加和表示,计算方法为:

(-0.41)x0.94x0.26+(-0.41)x0.36+(-0.01)x0.26=-0.25

顾客期望对顾客满意度的直接影响系数和间接影响系数相加可以得到全部影响系数,即(-0.11)+(-0.25)=-0.36

同理,可以计算出其他结构变量对顾客满意度的直接影响系数、间接影响系数和全部影响系数。

如果能将竞争对手的指标分值也进行路径系数分析,那么多企业的战略决策制定,为推进企业发展将会更具有实际指导意义。


关于路径系数分析结果的应用:

可用于分析顾客特征的类型,例如(1)价值取向型。(2)质量取向型。根据不同顾客的需求和体验,提升其满意程度。更有利于精细化运营。


 “顾客净推介值”理论(NPS理论)

进行顾客满意度研究,其主要目的,就是要不断提升顾客的满意度,从而建立更多的忠诚顾客群,为企业带来更大的利润和收益。通过“顾客净推介值”分析,我们可以进行顾客忠诚度的深入分析、研究,以在这方面能提供更多的数据给企业作为经营的决策参考。


“顾客净推介值”(NPS:Net Promoter Score),顾名思义,“顾客净推介值”指的就是公司现有顾客将公司的产品或服务向其他人推荐的程度如何的测量。这也是预测企业有机增长和区分公司“利润良性”和“不良利润”的一种手段。

分析假设:我们可以把企业的利润分为“不良利润”和“良性利润”两种。


“不良利润”是以损害客户关系为代价换来的利润。如果客户觉得所受到的待遇不周,则产生的利润就是不良的。即不良利润是通过降低客户体验的质量来省钱,是向顾客榨取价值而非创造价值。


“良性利润”则截然不同,如果客户自愿回头购买更多产品与服务,而且还建议其他人购买,这样公司便实现了良性利润。实际上,满意的顾客变成了公司营销部门的一部分,即他们成为了推介型客户,是公司的最佳营销员。


例如:

根据本次调查,我们的问题是“您有多大的可能推荐此产品呢?”这个问题作出评价,并把被访者分成三类,即“推介者”(90分~100分)、“消极满意者”(60分~90分)和“贬低者”(0分~60分)。用推介者所占百分比减去贬低者所占百分比,就得到顾客净推介值。



卡诺模型—理论篇

一、卡诺模型的由来

KANO模型简介

受行为科学家赫茨伯格的双因素理论的启发,东京理工大学教授狩野纪昭(Noriaki Kano)和他的同事Fumio Takahashi于1979年10月发表了《质量的保健因素和激励因素》一文,第一次将满意与不满意标准引入质量管理领域,并于1982年日本质量管理大会第12届年会上宣读了《魅力质量与必备质量》的研究报告。该论文于1984年1月18日正式发表在日本质量管理学会的杂志《质量》上,标志着狩野模式(Kano model)的确立和魅力质量理论的成熟。


双因素理论

双因素理论又称激励 — 保健理论,是美国的行为科学家弗雷德里克·赫茨伯格提出来的。双因素理论认为引起人们工作动机的因素主要有两个:一是保健因素,二是激励因素。只有激励因素才能够给人们带来满意感,而保健因素只能消除人们的不满,但不会带来满意感。

其理论根据是:

第一,不是所有的需要得到满足就能激励起人们的积极性,只有那些被称为激励因素的需要得到满足才能调动人们的积极性。

第二,不具备保健因素时将引起强烈的不满,但具备时并不一定会调动强烈的积极性。

第三,激励因素是以工作为核心的,主要是在职工进行工作时发生的。


保健因素 - 是指造成员工不满的因素。保健因素不能得到满足,则使员工产生不满情绪、消极怠工,甚至引起罢工等对抗行为;但在保健因素得到一定程度改善以后,无论再如何进行改善的努力往往也很难使员工感到满意,因此也就难以再由此激发员工的工作积极性,所以就保健因素来说:“不满意”的对立面应该是“没有不满意”。


激励因素 - 是指能造成员工感到满意的因素。激励因素的改善而使员工感到满意的结果,能够极大地激发员工工作的热情,提高劳动生产效率;但激励因素即使管理层不给予满意满足,往往也不会因此使员工感到不满意,所以就激励因素来说:“满意”的对立面应该是“没有满意”。

二、什么是卡诺模型

 (1)A—魅力质量要素:此质量要素具备时,会让顾客感到满意;反之未具备时,顾客也能接受,同时不会感到不满意。

例如说,海底捞等桌做美甲。

(2)O—一维质量要素:此质量要素具备时,会让顾客感到满意,反之未具备时,则会导致顾客不满意。

例如,火锅店羊肉越便宜越爽,上网的速度越快越爽。

(3)M—必备质量要素:此质量要素具备时,顾客认为这是应该的,反之未具备时,会导致顾客不满意。

例如,火锅店要有牛肉,手机能打电话。

(4)I—无关质量要素:此质量要素无论具备与否,对于顾客,都不会有任何满意或者不满意的感觉。

例如,山寨机可以刮胡子。

(5)R—反向质量要素:此质量要素具备时,会导致顾客不满意,反之不具备时,顾客反而会感到满意。


卡诺模型—实操篇

卡诺模型的两种用途:

1、判断产品的某一质量特性对于顾客而言,属于何种质量要素

“顾客就是上帝,但是用户往往需要的不多,想要的却太多,为了让他们更满意,我们是不是要一一满足他们?”

2、通过满意的敏感性分析来筛选顾客满意度的改进因素

“用户可能根本不知道他们想要什么,而我们能提供的东西很多,但是资源却是有限的,应该怎么利用有限的资源来使用户更加满意”


卡诺模型的研究步骤:总的来说,可以分成以下五个步骤:

Step1,定义质量要素

Step2,构建卡诺问卷

Step3,进行问卷调查

Step4,分析调查结果

Step5,筛选改进因素


Step1,定义和选择质量要素

列出需要使用卡诺模型问卷进行调查的指标,这些指标可以是满意度所涉及的系统指标体系中的所有指标,也可以是关注的部分指标。

“官网中xxx方面的信息”

“产品中的xxx功能”

“线下户外广告宣传”

“......”


Step2,构建卡诺问卷

卡诺问卷的设计思想是从正反两方面进行提问,以便了解顾客对某一改进因素的看法,然后将这些改进因素区分为“魅力质量要素”、“一维质量要素”、“必备质量要素”、“无关质量要素”和“反向质量要素”.


在卡诺问卷中,每个改进因素都由正向和负向两个问题构成。正向问题是测量顾客在具有某项因素时的反应;负向问题则是测量顾客不具有该项改进因素时的反应。卡诺问卷中的问题答案采用五种程度选项,他们分别是“我喜欢这样”、“它必须这样”、“我无所谓”、“我能够忍受”、“我讨厌这样”。无论是正向还是负向问题,都是同样的答案选项。

Step3,进行问卷调查

问卷调查的方法有很多,卡诺问卷并没有限定必须要什么方法调查,例如,入户访问法、拦截访问法、传统访问法、计算机辅助等等。


Step4,分析调查结果

在获得了每个改进因素的卡诺需求分类数据之后,分析调查结果,分析调查结果的目的是为了了解每个改进因素的顾客需求分类状况。需求分类最简单有效的方式是计算每个改进因素在不同需求类型中出现的频率。

将顾客对某项改进因素的正向和负向问题的答案填入卡诺评价表,就可以得到顾客此项因素的需求分类:

如果顾客对正向问题的回答是“我喜欢这样”,对负向问题的回答是“我讨厌这样”,那么在卡诺评价表中,这项改进因素就被分类为“O”,即“一维质量要素”。


如果顾客对某项因素正负向问题的回答结合后,分类是M、A、I或者R,那么该因素就被分别分类为“必备质量要素”、“魅力质量要素”、“无关质量要素”或者“反向质量要素”


另外,卡诺评价表中的分类“Q”,是指有疑问的(questionable)结果,顾客的回答一般不会进入到这个类别,除非这个问题的问法不合理,或者是顾客没有很好的理解这个问题,或者是顾客在填写问卷时出现错误。


Step5,筛选改进因素

对改进因素的顾客需求进行分类,还不能完全说准确的说明这些因素的改进次序,因此,还需要通过满意的敏感性分析来筛选改进因素。

满意敏感性分析是指通过对各种改进因素的满意影响力和不满意影响力的分析,来判断顾客对这些因素满意水平变化的敏感程度,其目的是确定改进哪些因素会更有利于提升顾客满意度。

满意敏感性分析是通过满意影响力(SI)和不满意影响力(DSI)两个方面来测量的,他们的测量公式如下:

满意影响力(SI)

满意影响力SI是以魅力质量要素A与一维质量要素O的频率之和为分子,以魅力质量要素A、一维质量要素O、必备质量要素M、无关质量要素I的评率之和为分母计算得到的,满意影响力的大小显示,如果某项因素得到改进,顾客满意强度会有多大的提升。


不满意影响力(DSI)

不满意影响力DSI是以一维质量要素O与必备质量要素M的频率之和为分子,以魅力质量要素A、一维质量要素O、必备质量要素M、无关质量要素I之和为分母,并乘以(-1)计算得到的,不满意影响力的大小显示,如果某项因素未满足顾客的需求,会对顾客满意的降低产生多大的影响。


例如,对于如下的“改进因素满意敏感性分析表”统计结果:


将各因素以SI值为横坐标、DSI值为纵坐标纳入改进满意因素敏感性比较矩阵中,同时以左上原点为圆点,用半径为0.707的四分之一圆弧将不同的改进因素进行分割,如下图:


在因素选择线右侧的因素就是需要实施改进的因素,并且离圆心越远的因素,顾客的满意敏感性越大。从图中可以看出,A和D因素暂时不需要改进,需要改进的因素为B、C、E和F方面,按照重点次序排列为F、E、B、C。








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

文章来源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




用研方法论:眼动与脑电研究

ui设计分享达人

眼动研究


眼动原理:

眼动追踪

是指通过测量眼睛的注视点的位置或者眼球相对头部的运动而实现对眼球运动的追踪。

眼动仪

是一种能够跟踪测量眼球位置及眼球运动信息的一种设备,在视觉系统、心理学、认知语言学的研究中有广泛的应用。PC/IPHONE/CAR都可使用。


常用指标:

注视

在获取信息时,眼睛停留在所加工的物体上,称之为“注视”,超过100毫秒,认知加工。

眼跳

在转移加工对象时,人眼在两个注视点之间的快速动,称之为“眼跳”,注视点或注视方向发生改变,获取时空信息,无认知加工。

跟随运动

当测试者与眼睛存在相对运动时,为了保证眼睛总注视这个物体,眼球会追随物体移动。眼球追随物体移动,有认知加工。

眼动的本质 = 人注意力资源的主动或被动分配,选择更有用或更有吸引力的信息。


常用分析:

注视轨迹

记录测试者在整个体验过程中的注视轨迹,从而可知测试者首先注视的区域、注视的先后顺序、注视停留时间的长短以及视觉是否流畅等。  

注视热点图

用不同颜色来表示测试者对界面各处的不同关注度,从而可以直观的看到测试者最关注的区域和忽略的区域等。

兴趣区分析

考察测试者在每个兴趣区里的平均注视时间和注视点的个数,以及在各兴趣区之间的注视顺序。

例如:用户视觉顺序


问题:确认按钮位置不符合玩家浏览路径。

分析:图中是玩家的视觉动线,玩家先看见确认按钮再看见选择角色区域,这不符合操作顺序,很可能导致有些玩家忽略了选择角色。

建议:调整一下角色选择的版面布局,可以考虑将确定按钮放在选择角色之下。


例如:眼动注视时间及频率分析(客户管理软件的导航可用性评估)

测试用户的注视时间统计见表1,可以明显发现两个版本在眼动注视时间区别:用户在使用旧版的系统时,注视的时间比较长;

测试用户的注视频率统计见表2,两个版本在眼动注视频率有明显区别:用户在使用旧版系统时,注视次数频率比较高,无规律性;

通过注视时间、注视频率和方案评价等级的对比分析,可以得出评估等级越低(数值越低表示满意度越高),用户眼动注视时间越短,用户在页面搜寻的频率相对越少,用户在较短的时间内能找到想要的功能,页面影响用户的干扰越小。


例如:网站的可用性对比测试

对某网站改版前(图7)和改版后的主页(图8)进行可用性对比测试,通过让用户浏览首页(不做任何点击)判定网站的主旨和类型,来捕捉用户注视点的轨迹图和记录用户在不同位置注视时间,对比网站主页改版前和改版后信息传达的有效性。

经过对采集到的数据进行分析,可发现用户在浏览改版前的页面时,眼动轨迹混乱,扫描路径长且很多相互交叉,注视点序列分散排布,用户注视点变换快,无明显的兴趣点,如图这些数据表明改版前的网站首页布局不够合理,没有重点。

 

眼动研究的局限性:

1、可以让用研工作变得越来越有技术含量,将会在用研工作中扮演越来越重要的角色。

2、但是需要加以辅助测试(如定性访谈)来收集更多的实验数据,并通过结合分析来得出更多、更有效的结论。


眼动研究的价值:

1、眼动研究是可用性测试、问卷调查、后台数据挖掘等研究手段难以企及的,因为是最直接的反馈用户使用情况的手段。

2、通过眼动研究,不但可以完整地还原测试者在各个页面的注视轨迹,还可以通过划分兴趣分析测试者在各区域内容的关注度。

3、眼动研究提供的信息不只是人们是怎样“看”东西这么简单,眼动反映了人脑的信息处理过程,眼动模式的特点与脑部的信息处理都有密切的关系。


 眼动研究的具体价值的体现:

获取用户浏览的行为和习惯

当用户打开一个页面,用户看了些什么,没有看什么。什么东西最先获得用户的关注?这些信息是很重要的,因为很多时候用户关注的东西与设计希望用户看到的是不一样的,这种差别会通过眼动数据直接显示出来。


帮助研究人员分析和澄清问题

在可用性测试中,遇到用户既无动作也不说话时,研究人员是最为迷惑的。此时用户很可能执行任务受阻,而通过实时的眼动记录观测,研究人员可以间接地了解用户的处境 - 用户是在寻找什么东西,还是有什么东西令用户困惑(来回注视),还是用户忽视了相关的重要元素?研究人员可以带着观点假设,开展眼动研究来验证或否决,发现导致问题的真正原因。


 实现研究结果的可视化

呈现眼动研究结果最常用到的是热点图,顾名思义,热点图呈现的是人们视线的热点,颜色越红代表被聚集的越多。作为可视化手段起到了良好的信息传达的作用。



脑电研究


脑电研究基于脑电波,脑电波是大脑在活动时,大量神经元同步发生的突触后电位经总和后形成的,即由脑内亿万神经元引起的头皮表面的电位变化。含有大量的心理信息,测量脑电信号可绘制成脑电图,以不同的波形反映出来。


不同的波形代表着不同的心理信息,比如:

α波

频率为8~13Hz(平均数为10Hz),幅度为20~100μV。它是正常人脑电波的基本节律,如果没有外加的刺激,其频率是相当恒定的。是大脑皮质处于清醒、安静、闭目状态时脑电活动的主要表现,睁开眼睛(受到光刺激)或接受其它刺激时,α波即刻消失。

β波

频率为14~30Hz,幅度为100~150μV。是大脑皮质兴奋的表现,当精神紧张和情绪激动或亢奋时在额叶出现此波,当人从噩梦中惊醒时,原来的慢波节律可立即被该节律所替代。

θ波

频率为4~7Hz,幅度为5~20μV。在成年人意愿受挫、困倦、失望、抑郁等情绪刺激时以及精神病患者中这种波极为显著。但此波为少年(10-17岁)的脑电图中的主要成分。

这些不同的波形反映了测试者所处的心理状态。


脑电研究是什么?

一般来说,原始的脑电波需要一些技术处理才能读懂,借助脑电数据分析工具,我们可以把复杂的大脑波形整理成有一个起点,然后是不同波形分布的杂合:


经过更复杂的技术处理,我们甚至可以得到一条总体的波形图:


脑电波(EEG)在医学领域已经应用了几十年,通过对脑电信号的处理与分析,我们能了解对象的认知过程和情绪反应,目前已经逐步商用化。

近些年,神经营销学、神经电影学楷书走进人们的视野。前者通过脑电波等手段测量消费者观看广告、描述产品时的脑电情况,以此来解释、预测他们的消费行为。后者采用脑成像技术等手段量化恐怖电影的效果,甚至考察观众们神经活动的同步性(群体卷入性)来检查电影控制人们思维和情绪变化的能力。


脑电研究的应用:

360度游戏研究


基于认知神经科学,无需语言,获知他们对产品的情绪、喜好、关注点、兴奋度...因为它研究的是大脑的源头。

除了学术界,全球众多顶尖的游戏公司公认情绪在游戏中的重要性,并致力于打造更加Emotional(情绪化的)游戏。

  • 并不是越积极越好

  • 必须能够唤起强烈的情绪反应

  • 让玩家情绪不断波动,正负情绪互相转化


 一款成功的游戏:必须要让玩家达到沉浸和心流情绪状态。有三种衡量指标:


沉浸感(IMMERSION)

定义:参与、融入、代入感的程度

游戏体现:故事性、技巧性、策略性、画面效果、音效、风格

心理体验:强参与感、脱离现实、忘记时间、很上瘾

情绪体现:强烈的正负情绪的交替


情绪指数EMO.I

游戏引起玩家的情绪反应。积极的情绪反应体现玩家玩的非常开心,而消极情绪反应可能提示游戏让玩家产生了受挫感。

 

心流体验(FLOW)

定义:非常专注,非常有动力的全身投入,并非常享受的精神状态。

游戏体现:游戏机制、难易度平衡、目标性、反馈。

心理体验:持续专注、忘我投入、成就感。

情绪体现:正向情绪为主,正负形拨动;紧张感积累,完成挑战的成就感。


生理指标

游戏带给玩家生理上的紧张程度,SCL值越大,表示游戏越刺激,玩家玩的越紧张,而SCL越低,表示游戏可能给玩家带来了相对无聊的体验。


脑电波和生理指标告诉你玩家的情绪状态




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

文章来源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




干货预警 | 什么样的设计是潮设计?

seo达人


图片

 

这个主题其实我很早就想讲了,因为我发现很多设计师的惯性,经常会去X瓣X站里面找找当下流行的风格直接拿来使用,但却并不了解这些风格的本质和设计含义,抄到最后就是四不像,它不能成为你思维和能力提升,反而会让你对很多设计的见解处在表面停滞不前。

所以这次用时代来切分所有关于潮的风格,一次性全部讲给你们。今天的文章内容较多,记得点赞收藏本篇文章,以后你们会感谢我的。

 

图片

图片图片

 


我们先来讲第一阶段,国风与民族文化

图片

图片

 

其实国风不仅仅是我们中国人对本国民族文化的一种解释,每个国家都有着自己的国风,比如希腊文化、罗马文化、玛雅文化等等。国风我们分为传统、古典、现代。传统对应的是水墨丹青类型,古典对应的是中国历代的朝代与民俗类文化,现代对应的是线条描边和色块涂抹等方式的画面展现。

图片

 

中国传统绘画以笔法为主导,充分发挥墨法的功能。墨的浓淡变化就是色的层次变化,其泼墨与挥洒的笔墨之间流淌着豪迈和情绪化的特质,并且百试不爽,你可以把今年电影海报拿出来看下,10张有5张都是毛笔字体或者水墨类型的。

而丹青,在现代设计时可以使用颜色的透明度的变化来增加画面层次,让整个作品清淡、素雅,更适合展现出一个画面的优雅和细节特质。相比之下水墨粗狂豪迈,丹青更显雅致飘逸。这点你在众多古装剧里看画风、看服饰颜色很容易能感受到其中的意思。

图片

水墨丹青所需组成的部分,毛笔字、水墨、山水、彩绘等。

 

图片

 

在中国传统文化中,国风也是有很多不同领域的范畴,比如中国传统文化+古典+唯美=古风,武侠剧风格和服饰居中,也有江湖快意恩仇!

而中国传统文化+古典+小雅=雅致,更突出中国特有很多元素,被现在大量用到电商和产品包装的设计中。

中国传统文化+古典+大气=国风,大气磅礴,雄浑有力,电影或者大画面毛笔字使用,张艺谋之前的很多古装电影就大量使用的这种。

图片

 

朝代组成的部分,如壁画、宫廷建筑、服侍、花鸟、动物(比如龙、凤、鹤)、祥云等等。这里我要补充的是很多人一说这个宫廷风,就联想到了清朝的紫禁城,这其实不是完全的,只是说清朝整个建筑和图案性的颜色比较鲜艳,更适合现代化的融合,但其实如果你想展现不一样国风的话,应该是将朝代的特质多去了解。

图片

比如我们为什么不用唐朝的元素来做一个唐朝的风格呢,例如还有汉朝的、明朝的、宋朝的等等,这些都是代表着中国不同时期的朝代。

图片

 

当你去设计不同朝代的风格时,搜集他们朝代的服饰、建筑、器具上的图案花纹,然后临摹出来,这些就是最好的素材和设计参考图。

比如我们看上张唐朝图的左右对比下,色彩、服饰上的元素几乎就是直接挪用的。当你参考这些图案时,最好先去了解下这些本身图案的意思,古代的设计图案时就跟我们现在设计LOGO是有故事和含意的。

图片

比如上面的清代文官官服九品练雀,下面的是清代武官九品海马,代表着不同的官品阶位。

 

 

图片

 

除了朝代其实还有各民族的文化都可以为我们的设计吸收出更好的创意来源,而这些图案的设计大部分都是来自于他们的民族象征的图腾、服饰图案、头冠花纹等等,比如之前花西子就有一款产品就是用的民族的文化去设计的,就非常有特征性。

这里我补了小知识,其实这些民族在很早的时候都是国家,只是后来衰落经过迁徙后变成了民族部落,比如傣族,公元1180年左右,现今西双版纳一带的傣族领袖建立了景龙金殿国,简称景龙国, 比如苗族的历史可以追溯到5000年前的蚩尤九黎部落。光一个图案有的时候就能追溯到很多的故事和历史文化中,可见中华民族的瑰宝是一个可以可以源源不断发掘的历史。

图片

 

国风的现代风是舍弃了其他风格中烦琐的图案和形式,因为注重线条和色块拼合的使用,勾描形象而不藻修饰与渲染烘托的画法,配以古朴配色和纹理,呈现出最具中国传统特色的国潮,大量被用到插画与设计融合的海报中。

图片

当然国风里面还有一些民俗文化,比如戏剧、剪纸等等丰富的民俗带来了大量独特的文化象征:中国红、灯笼、福字、年画、锦鲤、红包等等。

图片

新现代是将国风其中的某单个元素放大化,表现极为现代手法,国风中商用化的最常用的风格。

图片

有没有发现国风比你想象中更复杂,也比你想象中有更多文化和元素的挖掘,这些随便融合到现在的设计中都是潮的代表。

 

第二阶段黄金年代

图片

 

黄金年代,其实就是对过去一种怀旧情节与形式主义运动的一种复古文化。但可别小看这个黄金年代,你去各大设计网站上搜索下,就知道没有黄金年代,就没有我们现在的市面上那么多的先锋设计。

图片

 

赛博朋克早80年代中期发展成为的亚文化,甚至一跃成为了主流文化的一部分,包括现在X音经常教调色赛博朋克、或者AE后期做成赛博朋克街道,前段时间赛博朋克2077游戏的流行等。

图片

赛博朋克给人一种虚拟、科技、扭曲、智能的感觉,是因为在上世纪60、70年代,二战后期的冷战和中东战争集中爆发加上工业后科技时代的带来,导致整个世界处在一个黑暗压抑,科技爆炸,环保污染严重、人情社会冷漠的时候,所以这个时候人们渴望科技未来的发展,又对整个世界恐惧,当矛盾和冲突不断是创作科幻艺术绝佳的一个形成因素。

你看到的很多风格,就像每一幅艺术家留下来的遗作,都有着代表那个时代的悲凉和无奈,人们只能通过某种形式是展现出来,于是绘画,音乐、电影成为了人们最主要的情绪宣泄方式。

 

图片

 

赛博朋克在设计上的表现形式往往以蓝紫的暗冷色调为主,搭配霓虹光感的对比色,用错位,拉伸,扭曲等故障感图形体现电子科技的未来感,加街道大厦建筑等,很符合现在年轻人标榜自我的价值观。

图片

 

蒸汽波是赛博朋克文化的一种衍生,风格中充满了故障、古典雕塑、80年代动画形象、马赛克、电子、光碟拼合的一种无实物感形式、蒸汽波平面设计风格,是在网络诞生的流派。

图片

 

蒸汽波的图像,在2010年代初在分享网站已经普遍散播。它宣扬对复古文化,怀旧文物和批量生产的怀念,当然还有对消费资本主义和流行文化的技术,上世纪80年代嬉皮士文化的批评和讽刺。

图片

在商用上,娱乐性产业在这种风格上的使用上尤为明显。

图片

 

Y2K 就是 2000年,俗称千禧风。人们在当时把未来的世界幻想成了一个信息科技极为发达的梦中乌托邦。

图片

 

风格经常出现技术不成熟的科幻场景、复古与未来感。围绕未来元素、夸张亮色、金属、科技、透明、PVC。但是你可以找找2000年的画风,纯画风放到现在其实是不够商业化的,需要我们用现代化的设计和其他风格进行一定的融合才可以。

图片

设计是艺术化的商用呈现,所以涉及领域不能片面化,应该广泛化和吸取百家之长,任何设计的成功都不是一个领域造成的,一定是融合。

图片

 

哥特式(Goth)最早是文艺复兴时期被用来区分中世纪时期(公元5-15世纪)的艺术风格。

图片

 

以死亡、颓废、古堡、吸血鬼、蝙蝠、红玫瑰、十字架、建筑、哥特式等为标志性元素,由于本身存在的黑暗特质,色彩及元素不便于商业化,但其哥特的字体却被大量使用。

图片

哥特式的来源在于禁欲与死亡。人类认为以自由精神来超越对死亡的恐惧和困扰,通过艺术的表现可以将死亡的恐怖转化为美感。蝙蝠侠三部曲就是典型的哥特式风格代表,重金属摇滚人最爱的风格。

 

图片

 

像素风格属于一种形式的数码艺术 ,像素是组成电脑数位影像的最小单位。放大后的这些小方块称之为像素(Pixel),核心在于早期游戏机的画面,是一种图标风格的图像,更强调清晰的轮廓、明快的色彩,几乎不用混叠方法来绘制光滑的线条,同时它的造型比较卡通。

图片

组成部分:像素化,轮廓清晰,卡通,刚结束不久的创造营综艺节目就是用的这样的风格。

图片

 

波普风格是发源于反对高端艺术和精英主义阶层的艺术运动,采用大众更容易接触的信息和画面体现,招贴画风格的一种。

图片

 

比如波点元素、漫画风格、重复图像、手写体、夸张明亮的色块碰撞等。

图片

 

早期奇葩说就是用的这个风格,顺便推荐几个综艺节目的视觉设计,一定要去看看里面不管节目场景还有一些物料和展示的设计,对你真的有帮助《热血街舞团》《奇葩说》《即刻电音》《乐队的夏天》《哈哈哈哈哈哈》等。

图片

 

拼贴风格的英文其实就是胶水的意思,艺术的起源是立体主义绘画运动的创作。

图片

 

模糊了艺术中真实与幻象的区别,企图打破二度平面的绘画,制造空间虚实的视觉效果。拼贴是一种比较随性的一种表现,它可以是不具任何意义的,自己觉得不错就行了。

图片

 

民国风格,20世纪30年代是民国设计最辉煌的时代,商业与文化剧烈碰撞,汉文化与西方文化融汇,创意、美学表现极其丰富。

图片

 

品牌名和产品比例最大,信息类文字较小,文字包围在图案四周;也有一些广告将文字置于画面四周的框框里,色彩不会使用亮色和过饱和性,其版式编排与维多利亚风格非常相似。

图片

第三阶段黄金年代。

图片

 

时代驱使现代,时代变化最大的特征是在于审美与认知的改变,还有一个更重要的原因就是,越来越商业化。

图片

 

极简化平面设计风格的核心是围绕信息内容本身而呈现的,去风格化设计。

图片

 

设计不再作为独立于内容之外的元素存在,而将着眼于内容本身,为用户打造直观的视觉体验。

图片

 

减少干扰,让信息有效传达给用户正是极简化设计所推崇的,负空间、增加留白,极简线条、减少颜色以及不必要的装饰等手段在设计中体现。

图片

 

孟菲斯风格打破正常的配色规律,使用多种鲜艳明亮的色彩,构图上大量运用集合线条图案,运用黑色的描边结合直线、波浪、3D图形。

图片

草莓音乐节连续好几年都是用的这样的风格,其实跟更重要的原因是轻量化,因为现代碎片化的信息,人们越来越没有时间或者不想再去看太复杂太有深度的东西,导致了当下轻量化设计的流行。

 

图片

 

还有关于倍速播放、轻量化设计、图像设计更娱乐化更是折射了当下经济结构、年轻人生活方式、高速互联的普遍、碎片信息,躺平原因等社会时代因素的缩影。

图片

 

MBE风格,标志性的人物就是来自法国巴黎的设计师MBE。

图片

一般是以粗而圆的线条勾勒轮廓,这一点类似于简笔画,也类似于单线条画。越粗的线条在表现力方面会越接近可爱感,线条的转折过渡很圆润,几乎看不到尖锐的直角。

图片

 

填色方面的特点非常明显,填色的色块要偏移原有轮廓一些,以此来塑造高光和阴影效果,其实这个风格跟孟菲斯的手法是非常接近的。

图片

 

立体主义,将物体以不同角度置于同一个画面之中,表现出对象完整的形象。

图片

立体主义创作的主要特征,即在画面上将一切物体形象破坏和肢解,然后再加以主观的拼凑、组合,以求所谓立体地表现出物体的不同侧面。就是在平面上表现出二度和三度空间。

图片

 

毕加索和布拉克就是立体主义的代表性人物。

图片

 

欧普艺术是利用人类视觉上的错视所绘制而成的绘画艺术。因此欧普艺术又被称作“视觉效应艺术”或者“光效应艺术”。

图片

 

是利用人类视觉上的错视所绘制而成的绘画艺术。它主要采用黑白或者彩色几何形体的复杂排列、对比、交错和重叠等手法造成各种形状和色彩的骚动,有节奏的或变化不定的活动的感觉,给人以视觉错乱的印象。

图片

 

欧普平面设计风格就是要通过设计达到一种视知觉的运动感和闪烁感,使视神经在与画面图形的接触过程中产生令人眩晕的光效应现象与视幻效果。

图片

 

极繁主义,平面设计风格繁琐、华丽的设计风格,运用大胆的颜色,尝试各种复杂的图案,构建迷幻主题。

图片

“有序的混乱”是一个绝妙的极繁设计手法。各种色彩和图案的重复组合能够有效吸引观众注意并传达设计信息。但由于极繁设计的前期整理、耗时过长,画面极其杂,商业操作复杂一些,很多设计师都不愿意去做这样的设计。

 

图片

 

新丑风,能在当今浮躁的社会还能坚持去打破设计规则的设计师高田唯。

图片有冲突感的颜色、强制变形的字体,还有故意的印刷偏差和奇怪的排版。

 

图片

这个现在被广泛以及大量的使用,内行看门道,与其他设计技法和设计模式相比,其省时省事的设计方法也迎合这个更加浮躁求速的时代。

 

图片

第四阶段,多样跨界和未来

图片

 

以萨尔瓦多·达利为超现实主义代表,将现实观念与潜意识及梦的经验相融合展现人类深层心理中的形象世界。

图片

可以说梦中的世界,也可以说是一种他认为的心理真实的彼岸世界。这个正是最近想做的一件事情,把梦中的场景绘制或者通过合成的方式放到海报展现出来,生活应该是让设计变得有趣。

 

图片

随着计算机技术的发展推动,C4D的普及带给了广大设计师新的思路,无论是色彩、光影还是质感都更加丝滑。

 

图片酸性视觉的特征就是大杂烩风格,混合了蒸汽波、赛博朋克、超现实主义、科幻未来主义、电子复古、欧普艺术等等的一种融合性设计,组合部分就是镭射金属、霓虹色彩、玻璃质感、哥特字体、锋利的几何图形。

 

图片

由复古迷幻融合到超现实主义的风格,融入了更多“虚无缥缈”和“先进新潮”的超现实主义元素,也是一个在现实中得不到追求的,从梦中获取精神安慰的风格。

 

我们将所有关于潮的时代和风格特征全部讲完,目的不是讲历史和展现风格技巧,而是要明白我们需要学习的其实有很多,未来的设计一定是集风格与领域精华所长融合下的就是潮的设计。

 

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

作者:修先森

转载请注明:学UI网》干货预警 | 什么样的设计是潮设计?

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

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

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

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


撕开B端封印,数字时代下的可视化构建

seo达人


图片

接下来我会从三个方面来讲解如何构建可视化:

  • 灵感需要迸发,更需要积累
  • 从零到一设计驱动
  • 设计度量

图片

 

一、灵感需要迸发,更需要积累

1.1  数字时代下,99%的问题都是旧问题

数字时代下仍有信息不对称的情况,尤其是关键技术和设计上的问题,但是如果你用心寻找,就会发现你的新问题则是别人很久之前的旧问题了。所以要做个有心人。

图片

但是问题又来了,有时候真的不知道该怎么找、去哪找?这是个很常见的问题。因为可视化不比插画、平面等这些成熟的领域,他是比较小众的,所以灵感以及素材的搜寻是一个令新手设计师头疼的事情,再加上对关键词的熟悉程度不够,导致很多设计师只停留在【可视化】这个关键词里,最后感觉搜来搜去都是见过的图,没有新意。

图片

 

1.2  明确目标,知道自己想要找什么
互联网信息太多了,漫无目的的找灵感,只会浪费时间,一会看到这张图好看,一会看到那张图好看。不知不觉几个小时就过去了。

 

1.3  建立关键词词库

确定目标后,就要细化关键词了。怎么建立关键词词库呢?

关键词词库由3部分组成:终端、设计类型、业务类型。

图片

  • 终端:大屏、移动端、web 等等。
  • 设计类型:每个细分的数据可视化类别都是有一些专有名词的,比如最近比较热门的车载HMI系统,那他的类型关键词就是 HMI。通过这些关键词,你会搜到更精准的结果。设计类型关键词比如:AR/VR、HUD、HMI、FUI等等,你要了解你们公司相关类型的关键词,记录下来。以及跟你们有关联的,都记下来,补充自己的词库。
  • 业务类型:智慧城市、生物医疗、监控部署等等。

这三类单独或组合进行搜索,就会看到更多可视化产品了。把关键词词库建立起来后,就可以去常用的网站上搜索了,最好用的还是 behance 和 Pinterest。

 

1.4  除了常用的设计网站,还有哪里可以看?

企业官网:很多做数据可视化的公司,会在官网展示一些能体现自己业务特点、业务实力的案例,而这些案例就是这些企业最好的数据可视化设计作品了, 所以但凡有案例展示的官网,案列基本都是最典型最好的设计,所以从这些案例中找灵感,也是一个有意思且有效的方法和途径。

 

1.5  你看到了别人看不到的,设计才能有所不同

总结一句话:你看到了别人看不到的,设计才能有所不同。如果你和别人看到的是一样的,你怎么比别人做的更优秀?

图片

 

1.6  兴趣推送

经常刷短视频/新闻网站的应该知道,系统会根据你的点赞、收藏、浏览等数据来给你安排后面的内容推送,以保证给你推送更精准的内容。设计网站亦是如此,behance 等网站上也都是千人千面,它会根据你的点赞收藏等来读取你的喜好,进而推送更精准的作品。所以假设你是一个B端数据可视化方向的,你就经常搜、点赞收藏相关作品,之后你的首页出现相关内容的几率也会变大。

图片

 

1.7  定期清理,更新迭代

最后一点,这个也是好多设计师的通病,收藏即学到。

图片

灵感库要求精而不是多,每隔一段时间,回来翻一翻自己之前收藏的作品,会发现有些作品自己已经看不上了,因为在做灵感收集的过程中,我们的审美会自然有所提高,当输入的作品样本越来越多,我们对作品评价的维度也会更多,之前那些觉得好的作品,现在看来也就会有缺陷和不满,这是一个很正向的结果,成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品,添加更符合自己当前审美的作品到灵感库里。

这样慢慢完善你的地基,才能更高的向上走。

 

二、从零到一  设计驱动

讲完第一部分,我们开始搭建产品。

我负责从零到一的项目大大小小的得有10来个了,我认为在产品整个产品周期中设计师的话语权最高的时候就是项目初期,是可以做到设计驱动的。既然设计可以有足够的的话语权,你就得规划好未来的设计走向。

产品初期,经常会有几个争议比较大的问题,我们来聊一下。

 

2.1  设计先行还是调研先行?

这是新项目必须要做的选择题,再讲之前你先想一下,如果是你,你会如何选择?

图片

我的观点是设计先行。(当然设计先行是建立在你至少对这个项目的行业有个简单的了解之后,先设计再用户调研),为什么呢?因为如果用户调研先行的话,用户只会反馈当下最想要的东西,从而有可能给你带来误导。就比如我们经常举的一个例子:汽车出来之前,人们只想要一匹更快的马。

我们要解决的不是用户当下想要的东西,而是痛点背后用户真正需要的东西是什么。在 0-1 的这种创造性的项目,往往设计者才是当下最懂产品的人,你把决策权交给一些不懂产品的人,做到最后只能是迷失了方向,锅还是设计来背。所以一开始设计师要把决策权拿在手中,掌握航向。

 

2.2  设计先行还是规范先行?

这个问题在现在看来相对比较统一,但有的同学还是有疑惑,所以我拿出来再跟大家聊一下。

图片

首先我的观点是设计先行,在设计之前就定好规范的基本都是自己YY的,返工率极高。等你在做具体设计的时候就知道之前做的规范都是白费力气了。一般都会选用在项目完成之后或者主风格及主要页面完成后再输出规范,这样既可以减少规范的改动,也可以保证后面功能延用规范,一举两得。

当然了,设计规范不是所有项目都要有的,它是为了减少工作而不是增加工作,如果是一次性项目,就不需要再额外花费精力去输出规范了,浪费资源~

 

2.3  完成和完美那个更重要?

现在都是争分夺秒的时代,任务是无止境的,没有做完的时候。造成这个局面的无非就是一个问题:时间不够用。通常的做法就是先完成再迭代,做产品久了你就会发现,完成比完美更重要,不完美你还可以再迭代,完不成就有可能错过一个风口,从而失去了变完美的可能~

图片

聊完这三个问题,我们在设计的时候也要有一些注意项,真正的做到设计驱动。

 

2.4  把复杂变得清晰简单而且美

对于设计师来说,我们的任务就是把复杂问题变得清晰简单而且美,所以我们应该成为企业和客户之间沟通的“架桥人”。通过设计的方法,把无形的、复杂的技术,通过有形的、可视化的方式展示出来,让客户更直观、清晰的感受到产品的功能,看得懂其在业务场景中产生的价值。

 

2.5  转换视角,建立共鸣

站在客户视角,聚焦客户关注的核心问题,通过情景把内容有序组织起来,快速与客户建立共鸣,有效降低内容理解难度。

 

2.6  产品架构可以不那么复杂

把复杂的业务/功能简单化、傻瓜化,最大的降低学习成本,能帮用户操作的绝不让用户亲自去操作。你要让用户在1分钟之内了解你的产品是做什么的、有什么功能,你就成功了。

图片

 

2.7  大胆隐藏冗余内容

B 端项目中内容量是巨大的,面对庞杂的信息,去粗取精,提炼各场景的核心内容,避免冗余信息阻碍内容有效传达。话术语言不单要简单易懂,还要严格控制文字长度,保证内容可以被快速扫描和理解。

 

2.8  尊重用户习惯

不要妄想改变用户养成的惯性思维,你要记住惯性思维大于设计思维,他的阅读习惯、操作习惯都是不易改变的,不要为了个性化而尝试去改变,大部分情况下结果不会是那么的理想,除非你有极大的把握。

图片

 

2.9  选用合适的图表

这个是常提到的,我就在这里简单给大家提个醒。比如做数据对比,柱状图更能清晰表达出用户想要的结果,你却非要放个酷炫的雷达图,他的本质目的都没达到,要美观有何用?

每个图表都适合哪些场景使用,像 antv、hicharts 等都有介绍,我就不一一赘述了,我之前也写过一篇关于如何合理利用图表的文章,大家有兴趣的可以去看一下。

 

三、设计度量

产品设计的好与坏我们需要去验证、去度量。我们怎么去验证可视化的好与坏呢?

美与丑也是主观的,没有绝对的美,也没有绝对的丑。一个产品,总会有人喜欢有人不喜欢,但是我们要迎合大多数人的审美。

所以就需要一个方法论来验证产品的好与坏,现在各大厂都在做自己的一套产品验证的方法论,阿里在这方便算是国内做的不错的,我举几个常用的度量模型。

  • 阿里云:UES
  • 蚂蚁金服:PTECH与易用度
  • 1688:五度模型
  • 优酷:DES

图片

UES 目前是国内最好的,在 5 月份的阿里设计周上也正式对外讲解了 UES 模型。我拿阿里云的 UES 简单讲一下吧,这么多度量模型,无论他的方法、维度有多不同,但他们的目的是相同的:通过模型来度量设计成果。

  • 易用性:易操作性、易学性、易见性 …
  • 一致性:整体样式、通用框架、常用场景及组件 …
  • 任务效率:任务完成率、任务完成时间、功能使用率 …
  • 性能:首屏渲染时间、API 请求响应时间、页面请求响应时间 …
  • 满意度:产品满意度 …

UES 分为 5 个模块,这 5 项是整个产品生命周期需要验证的。

关于 UES 我就介绍到这里吧,UES 模型要是展开讲的话,半天都讲不完,感兴趣的话可以去阿里云官方发布的 UES 模型的相关资料中深度研究一下,看看适不适合自己的产品。

上面是度量产品的模型,接下来针对我们 B 端设计师,我们也要有一些指标来度量自己是否合格。

 

3.1  设计效率

现在内卷盛行的时代,各大厂都在讲人效,毕竟时间才是最珍贵的,所以现在都在想方设法的提高人效。而且 B 端相对 C 端来说,可以有更多自动化的工具。

举个我公司的例子,我刚去的时候基本没有自动化工具,每个设计师每天也都在忙碌,谁也没偷懒闲着。但是我发现有很多重复性的体力劳动是不需要多少思考就能完成的,但是却耗费了将近 1/3 的时间。所以我就在想如何提高人效,把一些体力劳动用一些工具来代替,这样就能释放设计资产,去做更重要的事情。

当时就做了第一个自动化的工具:设计系统,现在大家对这个词应该不陌生,但是我们刚开始做的时候比较早,还没有一些比较完善的设计系统供我们参考,所以我们也算是前几批摸索设计系统的团队。设计系统做好后是可以把这1/3 的设计时间节省了下来,而且团队的规范性更加统一。

后面的话我们也是做了一些其他的自动化工具,比如结合一些插件做到 icon、组件等发布的自动化,并且与研发同学打通,有相应的自动化提醒工具,这样也节省了与研发的沟通成本。

在工作中,流程上能减少一步就是成功,慢慢来,万里长征就是一步一步走出来的。

 

3.2  增长设计

增长这个词来源于【增长黑客】这本书,顾名思义这个词的就是通过设计来促进产品增长。

这个词用在 C 端上比较多,因为 C 端可验证的方法比较多,见效快,所以我们常见的一些增长设计的案例都是关于 C 端的,而 B 端的话,受限制的因素较多,设计只是影响增长的一部分,而且见效慢。

但是虽说影响因素多、见效慢,我们还是可以抓住机会、多去尝试一些方法来做到设计增长。我这个方法不行,我就换一种尝试。大家都是在摸索中过河~

 

3.3  为业务赋能

所有的设计都是要为业务赋能、为商业买单。我们设计的本质就是为用户解决问题,让用户以最直观的方式理解产品。不要为了所谓“我认为很美”而与业务背道而驰。

 

3.4  体验创新

用户体验设计师会越来越重要,近两年逐步被重视,而且未来几年会越来越重视。行业内需要更多动脑的人而不是仅仅会动手的人。

现在到了互联网下半场,拼的不仅是功能,用户体验的重视程度已经被提升了上来,在工作中的占比也越来越重。

再加上现在这个超级内卷的时代,你不提升,你的竞争对手就把你干掉了。而且你如果只是一成不变的维护老版本,你去下家面试的时候都没有拿得出手的产品。

 

3.5  善用工具

现在各种办公类工具、软件层出不穷,而且很多工具是比较类似的,有的设计师再选工具的时候就很纠结,我认为完全没必要纠结,首先你要明确我想要达到什么目的,只要某个软件满足着你的需求就可以用。

工具是为人服务的,我们的设计软件从 PS – Sketch – Figma,无论怎么变化总要围绕一个目的:更高效的完成工作。

尤其是一些自动化工具,现在人工智能升级很快,要多关注设计自动化方面的工具,让他来解放我们的双手。

 

总结

最后送给大家一句话:

这时代唯一不变的,就是变化。

图片

无论你现在多么厉害,不变就被淘汰。

 

原文地址:友设青年(公众号)

作者:Luckgg

转载请注明:学UI网》撕开B端封印,数字时代下的可视化构建

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

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

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

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


配色驿站-粉色灵感海报

seo达人


谁心里还没有那一抹粉红呢!

粉红色是暖色系,温暖没有攻击力,比正红稚嫩青涩,比黄橘绿更具女人味,又没有蓝紫的冷峻,是这么多颜色中最温和友好的。对小女孩来说是童真娇柔的,对少女是温婉可爱,情人之间也是一种甜蜜蜜最放松最舒适的状态。
马里兰大学的社会学家Philip Cohen调查了1974个人,男女比例均衡。结果发现,男性和女性都很偏爱蓝色,紫红色系,尤其是粉红色,女性则更偏爱。粉色的确是女性偏爱的颜色。  
 
图片  
 
粉色在中世纪是男人的专属颜色,就像高跟鞋本来是给矮个子国王穿的一样。之前认为红色是血的颜色,而粉色便是稀释的血的颜色,所以粉色在曾经是受男人喜欢的,并且认为粉色高贵。  
 

图片

图片

图片

图片

图片

图片

图片

 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

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

作者:修先森

转载请注明:学UI网》配色驿站-粉色灵感海报

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

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

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

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



轻奢格调|构建百度直播平台设计语言系统

seo达人


什么是设计语言?

设计语言是把设计作为一种“沟通的方式”,在特定的场景中进行内容与信息的传达。设计是介于科学与美学之间的一种艺术,是需要理性的去解决感性的问题。它和艺术之间的差别就在于“解决问题”。

 

设计语言有哪些?

设计语言最底层是项目设计语言,具有典型特征和主题,比如医疗项目凸显专业冷静,节日项目凸显热闹氛围。往上一层是产品设计语言,强调个性品牌,比如小视频的设计深色更沉浸,电商从结构到色彩都凸显热闹。很多产品随着发展,形成一些系列平台服务,平台设计语言确保服务“统一规范”。最顶层是生态设计语言,跨设备跨平台和硬件呈现的设计语言。

 

百度直播业务,从单一业务形成系列平台服务,囊括的不只是B端和C端用户产品,还有8大垂类蓬勃发展,以及跨业务多宿主的呈现。庞大的平台业务,特别需要建设平台设计语言。

图片

 

如何构建设计语言?

所有的设计语言,都是服务于业务顶层战略发展。制定设计策略前,需对业务所在的行业背景、品牌战略、用户群体、流行趋势有充足的认知。当返工无数次还是没方向时,说明以下前四点需要再深入明确。

图片

 

建立设计原则时(设计语言的标准),不妨尝试把品牌战略人格化,由所有人解决所有人问题的愿景,得出产品是一个解决问题的行业专家的身份,Ta传达的气质是简洁大方的仪表,亲和有力的仪态,和专业权威的素养。

图片

 

设计语言以现代轻奢风格为基调,它大简至美、配色和谐、材质考究,以独具特色的现代格调,构筑起一个充满质感又十分舒适的直播间,给用户一致、友好、有品的体验。

图片

 

设计动手前,按照风格基调具象化拆解分析必不可少,每一个元素的表达手法都要定位清晰。

 

图片

 

01 至简 光影艺术图标体系

在图标的设计中,我们基于专业亲和的品牌理念延展出2个不同的方向。方案一以直线折纸与光影为视觉元素,呈现一个用心专业的态度。方案二以曲线雕刻艺术展现专业亲和的魅力。

图片

 

图标体系化,多场景验证一致性,发现方案一不够极致,造型复杂;方案二具备良好的一致性,但破坏了物体固有的结构,影响识别度。

图片

 

在一致性的前提下,尝试简化、提高识别度。巧妙的将光影和结构交汇,极简到2个图层呈现主体;语义清晰识别度高;角度渐变光影带来舒适亲和感,15°x角度的精准把控传达专业的品牌特性。因此总结出图标绘制要遵循的法则为识别性、品牌性、愉悦性、一致性。

图片

图片

图片

图片

图片

 

 

02 和谐 家族感的色彩体系 

 

a)标准色

初期直播品牌色继承百度App品牌色,随着业务逐渐中台化,需要专属直播色。运用色彩心理学传递给人不同的情绪及心理感受,寻找直播的专属色相,而活力、温暖的红色色调,更能体现亲和有力的产品气质。

图片

红色也有冷暖之分,此时提高色相、饱和度的颗粒度,H色相以350°为起点,以2°递增或递减,S饱和度以5°为阶梯,生成更多色阶(保持相同B明度100),在多界面和真机验证,得出直播专属红(H350 S80 B100),冷暖适中符合平台属性。

 

图片

图片

 

b)协调的辅助色
同时,运用色环建立辅助色彩体系。H色相以350°为起点,以15°递增或递减标准,创建24色相色板(保持相同B明度100、S饱和度80);选取柔和与协调的类似色和邻近色作为家族色彩主体,调和互补色与对比色,平衡整体色调。因为不同色相的感官明度并不相同,校正每一个辅助色的HSB,达到色彩感官上一致。

图片

 

C)调色版
一般会有2种方法,一种是使用明度差获得统一性佳的调色板,优点是落地成本低,代码可直接实现;另一种则是微调饱和度和色相,获得鲜明的色板,可使用在插图绘制上。

 

图片

图片

 

03 考究 新颖独特材质

亚克力,这种具有透明质感、光学品质的材质,在设计领域最早应用在家居设计上,被互联网设计师熟知是在微软的概念视频里,随之逐渐应用到icon绘制上,亚克力1.0版本背景和主体层次没拉开,2.0版本更趋向加大不透明度和模糊值,达到清晰舒适又兼具艺术美感。

图片

 

这种量身打造的稀缺材质运用在运营玩法上,如红包雨玩法,即能凸显平台专业用心的态度,又能强化用户消费行为转化,助力变现增长。 

图片

 

用户激励体系,采用3D玉石润泽质感+动态折射光影,体现有内涵不张扬的泛知识调性,凸显用户独特身份感 
图片 

[优化输出图像]

 

写在最后

在每一个小元素的创作中,我们都时刻谨记,无论是项目的主题语言、还是产品的设计语言、甚至是生态的,终点都是传达企业文化以及价值观。从战略层重构业务的认知体系,再将品牌战略人格化,才能够在茫然期产生真正的笃定感,逐步拆解设计目标和构建符合业务气质的设计语言,达到最愉悦的体验。

 

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

作者:文娱平台用户体验

转载请注明:学UI网》轻奢格调|构建百度直播平台设计语言系统

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

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

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

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


2021趋势,Behance大神都在用的弥散光感教程来了!

seo达人


弥散光感也是今年突然间兴起一种流行趋势,国内外很多设计师在项目上运用这种处理手法,下面我们先来回顾一些网上案例。
图片

上面这种是单色弥散效果,而且还带有一些噪点纹理。

图片

这种思路是通过一边往外延伸,然后慢慢消失的过程。

图片
这种是弥散渐变上面叠加点阵纹理,效果细节也很丰富。
图片
多色混色弥散光感,细节非常丰富,不过对色彩把控要求高,稍不留神就会显脏。
图片
杂志卡片应用弥散光感,起到点缀作用,还能形成亮点设计。好了,下面到了案例实操部分,为大家准备了3个案例,尤其是最后一个,我个人最喜欢。

 

案例实操#1

这里快速给大家演示几种思路,基本上实操一次就会了。

第1步:先准备一个基础的版式,因为弥散光感一般都是以背景的形式出现在画面中,能起到氛围渲染作用。

图片

第2步:准备制作弥散渐变,这里以单色来举例。首先制作第一层渐变,具体参数值,大家领取源文件慢慢查看。

图片

第3步:制作第二层泛白渐变效果,目的起到综合的作用,颜色过渡自然。

图片
第4步:基本两层就OK了,最后再叠加一层噪点纹理,效果看起来会更丰富细腻。这里的噪点肌理我在sketch 里面完成的,也是非常方便简单(大家可以拿着源文件去研究下,一看就会)。
图片

 

案例实操#2

第1步:先准备一个基础的版式

图片
第2步:开始制作弥散渐变
图片

由于这里所需要的弥散效果较大一些,因此这里模糊值需要在ps里面处理,首先画一个圆形,然后使用高斯模糊;然后将其复制一层,然后添加杂色,最后两层叠加起来,就得到如下效果。

图片

 

案例实操#3

第1步:先在ps里面绘制两个基础的圆形,一个大圆和一个小圆。

图片

第2步:然后分别将大圆和小圆使用ps模糊画廊里面的移轴模糊效果,再将两者叠加起来,就得到如下效果。

图片

当然还可以叠加很多层,效果也很细腻。

图片

除了圆形,我们还可以玩出其他花样。

图片

今天分享就先到这里,大家下去可以拿着源文件 自己在玩一下 弥散光感,可以研究出不同的效果。


原文地址:功夫UX(公众号)
作者: 功夫UX
转载请注明:学UI网》2021趋势,Behance大神都在用的弥散光感教程来了!

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

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

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

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

这套圣诞节字体,写得实在太好看了

seo达人


01.  字体素材 

图片

图片

图片

@叁月适合圣诞使用的手写英文字体

f

02.  圣诞素材 

图片

图片

图片

@叁月圣诞节设计素材大合集

f

03.  样机素材 

图片

图片

图片

@是莹莹啊~海报拍摄场景样机

w

04.  样机素材 

图片

图片

图片

@耳東VI场景样机

e

05.  字体素材 

图片

图片

图片

@耳東圣诞节字体素材

t

06.  海报素材 

图片

图片

图片

@素笺书酸性渐变元旦跨年3天倒计时海报

e


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

作者:叮当猫

转载请注明:学UI网》这套圣诞节字体,写得实在太好看了

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

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

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

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


日历

链接

个人资料

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

存档