首页

时尚 Bootstrap 4 主题:Shards(轻量级)

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

Shards 采用了 Bootstrap 4 前端框架制作的,外观简约而时尚,风格与现代流行的扁平化相当合衬!此外不仅仅拥有 HTML/CSS/SASS 格式模板,还有 Sketch 设计源文件,可见分享者的贴心。

目前从官方介绍来看,UI组件还相当齐全,可用它来快速搭建漂亮、时尚的网页和UI设计作品,下面一起来看看介绍。

bootstrap 4 主题:shards

关于 Shards 这个主题虽然免费,但并不代表它只有「表面」,制作者还为性能性能考虑,压缩版仅12KB大小,实在太好了,以这样的大小,制作出来的网页直接能秒开。

它并不是直接使用 Bootstrap 的设计样式,所有的组件都是重新设计,以便得到统一的风格!

着陆页演示

这是非常不错的UI KIT素材 ,它还包含了10个额外的自定义组件,可以让使用者快事制作着陆页。

演示地址:https://designrevision.com/demo/shards/extra/app-promo.html

演示地址:https://designrevision.com/demo/shards/extra/agency-landing.html

UI 组件演示

Shards 含有丰富的 UI 组件,网页端常用的元素几乎包含了,大方便用户自由定制。

颜色:

字体

图标支持900+ Material icons 和 Font awesome 两大图标库!

表单上的细节,也不容忽视:

还有日期组件的设计:

卡片

按钮

导航菜单

我想这些漂亮的元素,已经足够你设计一般的网页,即使不够,也完全可以自己利用 Sketch 源文件或 HTML 模板再创作。

下载地址

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

如何让一个创意想法落地?阿里设计师告诉你!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

作为一名设计师,在基础业务支持外,大家都会萌生一些很有创意的设计想法,并希望通过自发项目推进其落地。而现实往往是残酷的,即使熬尽心力去推进各方,业务方仍不认可价值、开发资源一度紧缺,外部因素的各种影响最终令项目陷入一度停滞、甚至夭折。今天将 B类全景视图项目中沉淀的一套设计驱动方法分享出来,希望对大家有所裨益。

文章目录

  • 前提一:避免自嗨,紧盯业务问题
  • 前提二:构建独创性解决方案
  • 前提三:让成本可控
  • 完成资源整合、确立多方共建
  • 做好时间规划、节点有效驱动

经过全景项目组一年不懈的努力,全景图像工具已实现从0到1的迭代上线,覆盖了1688及ICBU 两个业务,服务了近30000个商家。顺利完成了设计驱动业务增长、商业价值变现的过程,2.0升级蓄势待发中。

几个自发项目的实战让我明白了一个道理,用设计驱动力去落地一个项目就像建造一幢建筑。一幢建筑的使用离不开地基、骨架结构、设备与装饰,地基可以保证建筑基础的稳固,梁、柱、板等主体性结构可以支撑起整个空间框架,水、电、暖甚至一些功能性家居可以增强空间的使用性。同样,一个自发项目也需要不同的结构来支撑,你需要思考并拆解一下项目的不同阶段,要重点完成项目的预先评估、前期成立、后期执行与落地等环节,以保证项目的基础、骨架及节点内容的阶段性落地。

良好的项目前提可以让你精准地评估、判断设计驱动的机会点,确保项目有一个坚实的基础;链接各方资源组建项目团队,以支撑起整个项目骨架;有效执行项目节奏及时间节点,来确保项目如期上线。

设计驱动的完成不是一蹴而就的,良好的前提会助力项目顺利起航。要学会在业务中挖掘设计驱动的机会点,预先评估好项目的各种可能性。

前提一:避免自嗨,紧盯业务问题

1. 认知设计价值属性

从岗位观层面来讲,设计师作为资源方,是运营及产品的下游环节,除了解决用户痛点,提升用户体验以外,还必须助力业务持续发展,实现商业价值变现。而在做设计方案时,我们有可能只从用户角度考虑,脱离当前业务现状,标榜超前的概念以及的效果,产出各种天马行空的方案,却不考虑数据在哪里采集、内容该如何生成。有些设计价值不能为数据所佐证,导致我们经常沉浸在自我的设计观内,过分夸大设计的能动性,错误地评估设计带来的价值。脱离业务现状的设计,往往不会被业务所采用,合作关系也可能陷入僵局。所以一定要端正好心态,设计在以用户为本的同时,也一定要以业务为基。

2. 收口当前业务问题

很多新人设计师会遇到不知道如何梳理业务问题的情况,在这里给几点建议。首先,这块业务如果之前有人负责过,你可以咨询相应的前辈设计师,以更快地了解业务问题;其次,你还可以主动求教你的老板,对方的经验及阅历会帮助你快速起步;再次,积极链接业务同事,历年报告及规划PPT 先搜罗起来,细读之后将不理解的问题罗列出来,找一个合适的时间向对方求教;当然,用户永远是你最好的沟通对象,邀约几个核心用户做下深度访谈,相信你会收获更多。在此过程中一定要保持谦虚求学的态度,多问、多听、多记,并主动思考业务遇到的问题,在业务与用户之间需建立平衡的关系,探寻能为现在的业务做什么、未来可以做什么。

前提二:构建独创性解决方案

明确了具体的业务问题,又该如何提出独创性解决方案呢?你要基于业务现状深入用户,进行全面且有深度的用户调研,明确核心用户群体、核心使用场景以及切中要害的用户痛点。明晰问题后,可通过内部设计小组头脑风暴的形式来发散思维,从多重角度(如新技术、新工艺、新模式等)来考虑解决方案的多样性及创新性,从中选择具体方向深化创新。

1. 结合新趋势、善用新技术

在日常积累中多关注新鲜及热点资讯,研究行业及设计趋势;分析相关或同类竞品,比对其优势及特色是哪些;随时关注新技术,例如人工智能、AR、VR、语音交互等技术的发展趋势,思考新技术是如何与现有场景融合的。当你的设计方案需要借助某项新技术来实现时,你需要提前调研该技术的可实施性,新技术的应用一般是有一定成本的,某些技术存在的壁垒可能让设计方案付诸东流。而在这一环节中,需要注意无论是设计还是技术都是为了解决用户问题而存在的,不要为了炫酷的效果而盲目在方案中硬潜入某些技术。

2. 线上、线下模式转换

你还可以深挖用户场景,什么人在什么场景下做了什么,他的目标及痛点是什么,并尝试还原用户的原生场景诉求,找寻是否存在将线下模式转换线上、线上模式转换线下的机会点。举个例子,在深度认证报告改版项目中,通过几轮深度用户调研,发现B类买家与C类买家有很大差异,除了商品本身的决策因素外,还会着重考虑卖家的服务质量、供应能力、公司经营信息等内容,聚焦到具体的用户行为,很多B类买家在寻找新的供应商时,经常会去卖家的工厂、公司、店铺进行线下实地考察。而这种行为的背后其实渗透着用户的基础诉求,那就是对卖家企业实力真实情况的渴求。为了将卖家信息更好地可视化,提出了用全景技术来实现线上验厂的设计提案,方案获得了买家及业务方的一致认可。

前提三:让成本可控

有了方案之后,你还要反复校验方案的可实施性。方案的实现势必需要投入各方成本,你需要评估一下设计提案的投入产出比,让业务、设计、技术甚至是三方的成本可控。这里的成本主要有两个层面,一个是运营经费成本,一个是人力成本。对于运营经费的评估,你可以做几套运营方案,从低成本低回报到高成本高回报几个维度来向业务申请运营经费,如果有低成本高回报的方案更有可能获得运营的支持。而对于人力成本而言,往往内部成本是较为可控的,可让各方按照设计提案预估出需要的人力资源。

而三方服务成本则是运营成本及人力成本交叉混合的一种形式,也是最难评估的一种类型。这里举个例子,当全景验厂自发项目起步时,需要同时考虑客户、业务及三方价值,为了让各方利益最大化,需架构出一套商业模式,商家购买全景拍摄服务、服务商上门采集商家的全景图像,平台则通过运营这套服务模式获取利润。在项目初期,为了刺激服务商团队快速增长,提高运营规模,对每个订单补贴了一定的服务经费。而为了提高全景服务的商业变现能力,必须解决一个问题,如何提高该业务模式下的营收利润率。为此,我们需要拆解一下该模式下的利润率模型,发现可以通过提高全年订单数(开源)、减少总成本投入(节流)的方式来提高利润率。因开源涉及因素较多,这里不再详细描述,重点讲一下节流的模式。而节流的关键就是在降低总成本,用全景的方式去采集工厂图像,就需要考虑三方人力拍摄成本;因工厂分布在全国各地,上门拍摄产生的差旅成本也是一笔大支出;而全景拍摄势必离不开设备,设备的投入成本更是难以预估,一台专业设备至少需要近万的价格。

  • 为了合理控制差旅成本预算,必须避免因过长旅途造成的交通成本上扬。为了解决该问题,划分了全国服务的覆盖范围,建立了区域负责制,以不同省市的中心位置来辐射服务半径,可将交通费用限制在一定范围内。
  • 为了降低设备总成本,需要先评估需要的设备数量。是不是每个服务商都必须配备一台设备呢?答案是否定的。通过核算一年的服务订购量,评估出日平均同时作业的订单数,按照合理的供需关系来配置最优资源,按需采购相应的设备数量,减少因非必需设备量带来的支出损耗。
  • 为了降低服务商的拍摄成本,需保证拍摄质量的基础上,降低服务单次时长,为此梳理了多场景下全景设备的采集规范,并组织了大规模服务商培训,以提高服务商工作效能。

所以善用商业模式、建立二方及三方共赢模式,可以撬动更多资源推动自发项目落地。

有了以上前提的铺垫,就可以开始着手项目执行阶段了。在具体推动过程中你会遇到一些问题,其实归根结底就是两类问题:一是前期项目成立的资源问题,二是后期项目执行的时间节点问题。处理好这两大问题,可对项目如期上线起到关键性作用。

完成资源整合、确立多方共建

作为一个设计驱动者,承担着比设计师更深刻的责任,需要从一名需求翻译者转变为项目管理者,你需要学会协同多方业务资源实现项目共建。

1. 驱动业务各方协同

项目的成功是每个项目组成员心血凝结而成的,少不了各个角色的相互配合,而业务角色的配合往往起到核心作用。

多方价值思辨:为了更好地撬动业务资源,你需要主动去游说各方。除了提供一份独创性、有价值的设计方案之外,还需要深入思考对方需要什么。你需要对各个职能的工作内容有一个明晰的了解,需要站在对方视角将各方价值论证清楚,思考用户、平台、业务、技术价值分别是什么,你能给对方带来什么,「思其所想、破其所难」的方式更容易打动对方。

一致的目标导向:当你拿着一份自以为很满意的设计方案,业务却不感冒的时候,多数是因为你们双方的目标不对标。说的更直接一些,大家的职能不同,自然所关注的重点会不一样,利益点也就不同(KPI不一致)。运营会关注自己业务数据是否突出,产品会关注有无商业价值,设计师则更多关注体验、美感。所以要想拉到项目资源,不要总是「纸上谈兵」,要学会走出去主动咨询对方的目标是什么,能否通过一定的抓手让彼此的目标更为契合,可以对不同的对象角色(如产品、运营、技术)提出与之对应的目标方向(如产品化、品牌运营化、技术平台化)。

自身角色转换:当业务各方已经愿意一起共建完成落地,而在实际配合过程中,可能也会因为多项目并行造成对方无暇分身,导致合作推进较为困难。这个时候,你需要摆正心态,切换一下自己的角色,以一个产品、运营的角色主动去承担一些设计以外的工作内容,在设计思维之外培养自己产品、运营的思维,辅助产品及运营完成相应任务,需要考虑如何将自己的设计方案打造成通用性产品,如何通过一些活动或渠道来树立自己产品的品牌影响力,切实推进项目发展。

2. 撬动多技术共建

利用三方技术资源:在很多情况下,即使方案有价值、业务也认可,但受限于业务技术资源,项目排期一拖再拖无法上线,这种时候可以善用三方技术资源,并勇于调动内部开发来把控技术质量,顺利保证项目起航。

联动集团技术资源:而开发一般都会有几种擅长的代码语言,你所对接的技术可能受开发语言的限制,不能完成某些创新性方案的开发,这种情况下要学会利用集团的技术力量。全景视图课题刚起步的时候,内部技术并不熟悉全景实现的代码语言,而学习成本又相当大。多方咨询后了解到集团有专业的技术团队正在研究这块,我们有应用场景,对方有技术储备,几轮沟通后大家很快就明确了合作方向。所以当你最需要的技术资源内部不能满足时,要学会去联动集团其他资源,链接双方价值以实现共赢。

做好时间规划、节点有效驱动

组建好项目组团队之后,又该如何保证项目节点平稳实施、保证项目如期落地呢?主要从计划弹性制定及节点风险控制两个层面来具体执行。

1. 确保计划的弹性制定

计划的弹性:在项目管理中,我们需要全面考虑产品、运营、设计、技术等各方进度,一份详细且合理的进度表有利于将项目拆解成各个节点。为了确保项目有计划地完成,可按照时间或事件等纬度来安排具体节点,并将主要节点进行重点标注,比如上线时间、大型运营活动,可通过主线Action、次线Action有弹性地牵引项目节奏。

计划的可执行性:在做设计提案的时候,我们会全面考虑用户在不同场景下遇到的问题,提出全链路设计。而在一般情况下,项目资源会受到各种因素限制,方案不可能一次性全部上线,往往需要多版本迭代完成。这就需要作为项目管理者的你,设定出合理有序的多版本方案,让每一步都可执行,先推进1.0最小可行性方案落地上线,再来快速校验数据效果,进而优化2.0版本,用不同版本迭代的方式,逐步实现较为理想的效果。

2. 完成项目节点的风险管理

项目在进行过程中,往往会出现一些突发风险,导致项目迟迟得不到进展。而在这些风险处理上,作为一个项目owner 不可避免地要和各方沟通来协调资源、对接需求、催促进度,可以抓住「人」这个关键因素做一些跟进及处理。

建立张弛有度的关系链接:当项目遇到一定问题或阻力时,可根据问题的轻急缓重,采用不同维度的方式来处理与项目组成员的关系。

  • 遇到问题时,不要直接把问题丢给对方,也不要盲目催促对方。要把问题梳理清楚,具体的紧急程度是多少,你需要的 Deadline 是什么时候,想要的效果是什么。这样才能让双方在沟通过程中更好地对焦问题,提高问题解决效率。
  • 在需要对方协助处理一些问题时,还可以通过一些互动形式来积极链接对方,以更了解对方的性格习惯和工作问题。轻松愉悦的环境更利于双方沟通,通过「小恩小惠」的形式请对方喝杯咖啡、吃个饭,倾听对方「吐槽」,了解对方在项目中遇到的难处,并疏导对方情绪,让对方乐于主动去解决问题,避免在合作过程中踩到对方的雷。
  • 在项目中也会遇到一些重大挫折,最终效果不佳影响了用户体验,对方却不能提出较佳的解决方案,甚至会影响产品上线,却碍于对方资源问题无法进行优化。这时候你要勇于找到对方老板,俗话说「擒贼先擒王」,勇于向对方老板说出你对项目的要求,甚至可以带着一份详细的项目规划及价值给到对方老板,搞定对方老板,也就搞定了你需要的项目资源。

善用技巧、让沟通更有效:在实际项目过程中,大部分同事都是多个项目并行的,各方都会有一定的业务压力,在沟通过程中难免会有些摩擦和碰撞。当你与未建立稳定合作关系的同事沟通时,其实是一种黏度很小的社交弱关系的表现。过于强硬的沟通方式可能会造成冒犯之意,甚至对合作关系起到消极作用;而过软的沟通方式会显得不够迫切与急促,可能会造成推进缓慢。你可以根据项目节点不同的紧急程度,采用力度不同的沟通方式,以下排序从弱到强。

  • 给对方分享一些与业务或生活相关的新鲜事,借着话题表达自己的关注点,委婉地提示对方「需求请尽快完成」。
  • 用一定措施来激励对方尽快解决问题,激发对方积极性。为了鼓舞项目组士气,可对项目组成员说:下周项目上线后,就请项目组一起聚个餐。
  • 直接表明自己的立场,敦促对方紧急处理。举个例子:亲,这个问题我说过好几次了,已经严重影响到用户的操作体验,造成了页面跳失率增加,请你务必解决一下。
  • 摆明态度,给对方一个最后期限:周五之前还不能解决问题的话,我要去找一下你们老板了!

除了以上内容,设计驱动项目落地时肯定还会遇到各种不可控因素,务必要保持良好的心态,用韧劲去克服重重困难,随机应变各种情况。全景视图项目行至今日,用设计驱动业务的形式已经赋能了30000个B类商家,其中也是经历了多次业务调整、项目成员几翻变化,我们一直坚守初心,积极探索多业务场景的落地,期待2.0年底与大家再次见面。设计驱动,行在路上,心在远方,与大家共勉。

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

怎样设计体验友好的APP登录表单

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

不要小看一个登录界面,它内里包含很多细微的东西,除去外观视觉,更多要注意的是交互的操作体验,比如一些动画、一些文案提示等细节都要注意,如果你是UI设计师,建议看看这次经验文章,附上了大量案例,也许能助你未来更好的去设计一个用户体验友好的APP登录界面。

下面通过几个关于登录界面的UX策略指南,让你更好的应用和实践。

给文本输入框增加提示

如果用户使用你的服务必须登录,那么信息字段是你必须要做的主要功能(即输入框中的提示语,如:输入手机号码,输入验证码。)

使这些字段清楚可视,并且不要强迫用户到处寻找,或花更多的步骤进到App. 一旦他们进到App, 登录界面是他们所应当见到的第一个事情。

奖励提示:相比于使用常见的“登录”“登陆”的按钮,可以更富有创造性,并要包含可直接输入区域。确保记住用户的数据,这样他们就不需要每次输入信息。

“注册”和“登陆”不应该放在一起。

更多地时候,我们看到注册和登陆按钮被放置的靠近彼此,但是这会对用户产生反作用。

这两个动作都包含了相同的动词,并且看起来也很相似,所以他们会混淆用户的选择。在有限的时间内进入问题,他们可能会感到沮丧并且离开。

基本上,任何界面上不应该有使用户“暂停”和“思考”的元素。

如果你想让他们的体验完美无瑕,分开这注册和登陆两个区域,并且使差别清晰可见。另外,你可以使用不同的动词或者简单解释不同的字段是什么。

在登录和注册部分,增加不同的输入字段。

除了动词“Sign”是事实之外,另一个另用户感到困惑的是,登录和注册部分通常有相同数量的输入框(用户名,密码,和邮箱)。

为了完全地区分,最小化新用户尝试直接登录的机会。用不同的输入字段。

让密码可被看到

当大多数用户的密码由于安保原因被打了马赛克,用户频繁遇见的另一个问题是打错他们的密码。

这甚至会发生在很有经验的打字员身上,特别是当他们在移动设备上登录的时候。

防止这种情况发生的做法是:在密码字符旁边包含一个“显示密码”的单选框或图标。

让他们知道什么是错误的

如果应用监测到一个错误的密码组合,和用户名,但是没有明确的报告给用户问题是什么,用户可能会多次尝试后,很生气的退出应用。

这是为什么你应该考虑通用的回复(例如“你的密码或邮箱不符合”),并且给他们立马回复怎么解决这个问题。

问下邮箱地址或电话号码,而不是唯一的用户名

为什么人们登录时人们很少记住“用户名”?如果使用用户名登录,你会面对很多可避免的困难:用户名必须是一个唯一的,这意味着人们会重复尝试输入一个系统里目前还没有的用户名,或者最终使用其真实姓名。

过了一会儿,用户想出了一个唯一的登录名,但是只过了一小会儿就忘记了,因为这个用户名对他没有任何的意义。

另一个事情可以促进登录,是提供给用户几个登录选项,并且给他们机会来选择和尝试用户名而不会沮丧。在这过程中强迫的一部分是允许他们使用邮箱地址和密码来注册。

需要一个“忘记你的密码”的流程

忘记密码发生在所有人身上,这也是为什么,你急迫的给到用户一个机会来恢复密码,那么就直接在登录界面这么做吧。

所要做的就是,在输入框下增加一个“忘记你的密码”的链接,并让系统能给用户的邮箱或电话号码发送验证码。

不要锁了用户的账号而不告知他们

为了避免强迫进入和暴力攻击,许多网页和应用在一系列的错误尝试之后关闭账户。

安全第一,但是你至少要尝试告诉用户,在多少次尝试后,在关闭账户前,他们必须离开。你也可以分享更多的细节,例如,在试错后的十分钟才可以再次尝试的事实。

登录样式灵感

如果在过去,都是在用相同的无风格和定制化的登录页。现如今,给你的应用,创造一个独特的登录页设计是非常重要的事情,尤其是你想要围绕你的应用和服务来创造品牌。

设计师和开发人员也有承认意识到登录表单的重要性。这是事实,特别对于移动环境下,用户界面相比于“桌面”网站,扮演了更重要的角色。

当为一个应用和移动站设计这个元素的时候,设计师花很多的精力,使它既好用又美观。

在这篇文章里,你会看到很多移动端用户界面设计的案例灵感,关于一个移动端登陆页面应被设计成什么样,给你一些线索。

Roostio Login Screen

Login Screen

Job Board – Company Profile / Login

Shopping app

Tailslife: Login

Moody Sign Up/In Screen

Bandio App Login & Sign Up

Parts – login dark side

Login Screens

ZSSK – login and route detail

DailyUI Day001

Skype Redesign

Sign Up Window – Daily UI #001

结尾思考

对用户来说,登陆已经很困难了,所以,使之变得更复杂,对你的产品来说并不是一个很聪明的决定。避免更大的和不熟悉的形式,并且让输入字符简单可视。这些只是一些为了节省用户时间可以考虑的技巧,并且帮助他们享受你所提供的服务。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

你的配色看起来总是不舒服?用这个策略性配色法则!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

配色并没有所谓的固定方程式,生搬硬套配色理论并不能真正解决问题。本文带你从配色的策略性角度出发,深入分析配色的正确打开方式,让你从本质上解决不同场景的配色问题,并通过配色提升整体的设计品质。

文章目录

  • 明确配色目标
  • 确定主色,精简层级
  • 选择正确的色系
  • 提升品质感

明确配色目标

1. 色彩规律≠配色规律

我们都学习过非常多的色彩知识,也看过很多的配色书籍或文章。然而当我们尝试在设计中运用这些理论时,就会发现:配色的理论往往在实际运用中并不好使,使用后的效果也不是特别明显。为什么会出现这种现象呢?

配色是否就是色彩某种的规律?当我们学习并掌握这种规律以后,就能掌控雷电,呼风唤雨,成为配色大魔王了呢?

答案并非如此。

配色并非单独存在,而是依附于不同的设计载体中。不同的设计载体,所要达到的目标不一样,就决定了配色理论也会存在差别。

我们会发现,虽然有很多书本、文章都在写配色的理论,每个人讲的配色理论有很多相同的地方,但是最核心的理论往往都不是相同的。

因为大家讲的相同部分,大多都是色彩的理论部分,这部分仅仅只是色彩本身的规律;而大家所讲的不同部分,则通常是作者在自己所在领域总结的一套配色规律。

因此,并非每一篇文章的配色理论都适合你,这也是当你学习并使用配色理论后,效果依然不好的原因了。

因此在学习配色时,仅仅学习配色理论是不够的。首先要思考配色的使用场景,以及整个设计所要达到的目标,然后再学习相应领域的配色知识,才能让配色理论发挥最大的作用。

2. 不同的行业,不同的配色目标

虽然设计是相通的,但是在不同的设计领域进行配色时,依然会存在巨大的区别。

比如广告设计的配色理论,放在室内设计上,往往是行不通的。因为广告设计的目标在于传递信息,需要吸引你,而室内设计的目标则是要营造舒适理想的生活氛围。同样的道理,推广设计的配色理论,往往在界面设计时也是行不通的。

不同行业间设计目标的差异,决定了配色目标和理论的差异。

△ 广告设计:准确地传递商品、广告等信息

△ 品牌设计:创造品牌概念,留下品牌印象

△ 工业设计:营造产品氛围,引导产品使用

△ 室内设计:传递生活理念,创造理想的生活氛围

△ 数字产品设计:传递产品信息,引导用户阅读和操作

3. 明确配色目标

对于大部分互联网行业的视觉设计师来说,平时的工作内容大体会分为产品界面设计和推广设计两个大的方向。很多设计师需要同时负责这两块内容,于是就可能会出现将同一个配色理论用在不同地方的情况,导致一些配色问题的出现。比如:推广设计的配色太素,无法吸引用户的注意;而产品页面的配色又过于杂乱刺眼,影响用户阅读和操作体验等。

所以,配色的第一步,首先要明确配色目标。

产品界面设计的配色目标:

  • 信息传递:产品的首要目的是传递用户所需要的信息,这就需要界面有清晰的层级关系,明确、舒适的阅读体验。
  • 引导操作:清晰合理的操作引导,让用户能够准确地根据引导进行下一步操作。
  • 品牌价值:很多同学会忽略这一点,导致产品的界面与品牌关联性差,整体界面没有品牌感。

推广设计的配色目标:

  • 吸引流量:强有力的吸引力,快速抓住眼球,留下深刻印象。
  • 营造氛围:需要营造氛围,让用户通过氛围快速理解和融入到推广内容中,加深印象。
  • 快速传递:在短时间内快速传递信息。这就需要设计时信息表达明确,使内容能够精准快速地传递给用户。

我们将这两种配色目标做一下关键词提炼,产品界面设计的配色关键词:清晰、舒适、引导、品牌感。而推广设计的配色关键词为:吸引力、氛围、快速传递。

我们可以将这些关键词作为衡量目标,以此来寻找正确的配色方向,或者用于检验设计作品的配色问题。

所以当我们接到项目需求后,可以先与需求方一同确定好设计的目标,以此来确定正确的配色方向,提升配色与设计方向的准确性。而这样做的另一个好处是,我们可以在项目之初就与需求方之间取得沟通和信任,达成共识,为后续沟通打好基础。

确定主色,精简层级

当我们确定好配色的目标以后,如何开始配色工作呢?通常情况下,我们首先来确定整个设计的主色,然后再开始进行后续的设计。

1. 主色与副色的定义

什么是主色和副色?

主色是整个色调的核心颜色,通常也是相对占比最多的颜色,它决定了整体的风格和基调。而副色则是画面中占比相对较少的颜色,它通常起到辅助主色、丰富画面的作用。

假如把一个画面看成一部电影,那么主色就是整个电影的主角,而副色则是除了主角以外的其他配角。

2. 确定主色,精简色彩层级

一部好的电影,通常情况下需要有一个明确的主角,它主导了整个电影的走向,对于设计作品来说,也是相同的道理。所以在配色过程中,首要的任务是确定配色的主色,并在整个作品中明确它的地位,让它来主导整个画面。

在产品界面的设计中,主色是传达品牌感的重要元素。明确的主色能够让整个界面产生强烈的品牌感。反之,整体的配色会显的十分混乱,影响品牌感的传达。

我们可以来看两个案例:

这两个案例在配色上有什么问题吗?为什么?

如何更准确地分析配色的问题? 我们可以使用前面讲的目标分析法,从产品界面的配色目标入手,逐一寻找和发现问题。

我们通过三个维度去分析问题:

  • 信息传递的维度:这两个界面的颜色过于繁杂,导致信息层级混乱,没有视觉中心,用户也不知道从何开始阅读。而两个界面中的卡片设计上,也都存在同一个问题:底色的明度过高,导致卡片上的文字阅读性非常差。
  • 引导操作维度:整体核心操作路径不明确,用户进入后无明确的操作引导;按钮的视觉效果也很弱,导致用户无法识别。
  • 品牌价值维度:品牌主色不明确,导致整体品牌感弱。

如何去解决以上的问题?可以用八个字概括:明确主色,精简层级。

我们可以来看一下 Keep 的产品界面设计。同样是健身App,Keep 的配色方式则完全符合了产品界面的配色目标。相比前面案例的两个界面,Keep 的产品界面呈现出优秀的整体品牌感和品质感。

在 Keep 的整体配色中,最核心的思想就是简化色彩层级——明确主色,减少不必要的颜色。从配色的角度来分析,作为品牌的主色,「Keep绿」贯穿了所有的产品界面,使整个产品显得非常统一和整体,凸显了整体的品牌感和品质感。

其次,Keep 的整体界面将除了主色以外的其他颜色精简到了,并将主要的辅助灰以外的所有中性色都控制在三个层级以内;首页的插画运用了同色系来精简色彩层级;视频的封面图风格也经过处理,使色调与整体界面统一。

整个界面的阅读体验非常舒适,字体颜色层级清晰,重点明确。而在操作引导上,Keep 将大量的品牌色用于核心操作路径和按钮上,这使得整个产品的引导逻辑清晰明确。

3. 精简色彩层级的意义

色彩层级越精简,就越容易达到整体色彩平衡,从而提升设计的整体品质感。当我们去看很多大厂的页面设计时,可以感受到很多的相同点:整体而强烈的品牌感,简约而高级的配色,丰富细腻的细节等。

用户在阅读页面时,配色是我们大脑接收到的画面信息。所以精简配色对于产品界面的设计来说至关重要。以品牌色为主色,精简色彩层级,可以让整个页面富有品牌感。

△ 网易云官网

△ 阿里云官网

△ 腾讯云官网

4. 品牌升级时的色彩简化趋势

在品牌Logo 的升级中,简化色彩层级同样是一个大的趋势。简化层级,可以让品牌更加简约和高级,提升品牌的品质感和包容性,使品牌拥有更大延展性和更多的可能性。

星巴克的品牌升级中,除了去掉 Logo 字母和咖啡字母外,更简化了 Logo 的图形和色彩。从而强化了星巴克标志性的人鱼形象和星巴克绿,让品牌更加简洁有力,易于传播。

大麦网在去年也经历了战略性的品牌升级。全新的品牌形象包括新 LOGO 以及新的 Slogan,配色上则重新定义了更具年轻活力的红色作为主色,同时精简了整体的色彩层级。

而宝马在最近官方宣传图中,将蓝白色相间的 Logo 简化为黑白单色,而新 Logo 专为品牌旗下即将推出的高端豪华车型使用。

选择正确的色系

明确配色目标,确定主色以及色彩层级后,如何进行下一步的配色?

这时候我们可以根据不同的配色目标来选择合适的色系,丰富整个画面的配色。需要注意的是,在丰富配色的同时,仍然要严格控制色彩层级,以保证整体色彩层级的精简。

1. 巧用同色系,统一不单调

同色系是指在色环上相距不超过45°的两种颜色,我们可以选择主色的同色系范围内的颜色来丰富整体配色。那么如何选择同色系的颜色呢?

首先在色环中确定颜色的位置,通过色环两边45°延展出我们所需要的同色系。

在主色的同色系范围内,我们可以选出同色系颜色作为延展色,单独使用或者组合成渐变色进行使用。

下面的案例就是运用同色系原理来进行配色的。可以看到,整个页面在保持色彩统一的前提下,增强了画面的层次和丰富性,从而提升了整个页面的层次感和品质感。

同色系的配色特点是整体页面统一而富有层次,从而传递出一种稳定、专业的形象,适合绝大多数的场景使用,是最为简单和有效的配色方式。

我们可以总结一下同色系的配色方法。首先确定主色,主色两边45°以内的同色系色彩范围,在范围中选取合适的单色作为辅助色,或者选取一段渐变色单独使用。

2. 不同场景的对比色用法

对比色是指在色环上相距120°~180°之间的两种颜色(180°时则互为互补色)。处于对比色关系的两种颜色,通常色相差异较大,能够相互产生强烈的对比效果,我们可以利用这种原理来增强画面的吸引力。

在不同的场景中,对比色同样有着不一样的使用方式。在产品设计中,通过小面积的颜色对比,可以加强主色的活力与整体丰富性;而在推广设计中,通常会使用大面积的对比色增强页面的吸引力。

产品界面中的对比色应用

产品界面的配色对于产品来说至关重要,好的配色不仅能够准确地反映产品的调性,还能正确地引导用户阅读并理解产品。

我们可以结合网易七鱼的官网改版案例,来了解如何通过配色来提升官网的设计品质。

下图是七鱼的旧版官网页面,在配色上,产品方认为原来的配色过于单调和沉闷,希望可以让整体更活泼一些。且网站的整体跳出率过高,希望我们能够找到原因并通过改版解决这个问题。

首先第一步,需要找出旧版官网存在的问题。这时候,我们就需要再次运用前面所讲的目标分析法。通过不同维度的目标分析,寻找页面中存在的问题。

我们还是通过三个维度去分析问题:

  • 信息传递维度:整体的配色过于单调,使页面和信息缺少吸引力,导致用户不想阅读;其次插图和 icon 在配色和表现形式上都过于单调,表现力弱。
  • 引导操作维度:核心功能模块逻辑展示混乱且繁杂,导致用户无法正确理解内容。
  • 品牌价值维度:品牌主色沉闷,整体品牌的品质感弱;而且渐变色与品牌色差异过大,不够统一。

由于七鱼首页的修改涉及到整体官网的配色修改,单纯从每个页面入手并不能从根本解决问题,容易造成整体官网配色不统一的情况。这个时候,我们就要从品牌配色入手,通过修改配色并制定新的设计规范,在整体上解决问题。

首先从品牌主色入手。经过严格的讨论,我们重新制定了七鱼的品牌主色。为了解决颜色沉闷的问题,我们选择了接近原有主色,但更鲜亮且富有活力的蓝色作为主色。而辅助色上,为了让七鱼品牌更有温度,我们选择主色的对比色——橙色。

蓝色与橙色在小面积上的互相对比,可以互相衬托,让两种颜色更显活力。

我们以新的配色规范为基础,重新制定了全新的七鱼设计规范。规范中包含了配色的使用比例、不同的icon样式与配色的结合方式等一系列的页面细节,以保证规范可以完整、统一地落实到每个页面和元素中。

运用新的配色规范进行页面设计时,要灵活地将配色与产品内容相结合,让配色更好的融于页面中,而不是生搬硬套地将配色装到页面里。

比如我们在优化首页的主要功能模块时,首先做的便是重新梳理产品功能的展示构架,然后再结合新的设计形式和配色规范,让新的规范发挥最大的作用。

在不同页面的功能icon 上,我们丰富了 icon 的表现形式,同时将新的对比色配色加入到每个 icon 元素中,增强了 icon 的活力和吸引力,让每个 icon 看起来更精致。

而在功能插图中上,我们采用了与 icon 统一的配色和表现形式,让页面中的所有元素具有统一的品牌感。

最终,我们将新的配色规范逐步落实到网易七鱼所有的 Web端和 Mob端页面中,使七鱼的整体官网设计焕然一新。在新的官网页面中,不仅提升了整体的设计品质,同时也解决了前面分析的问题,整体提升了15%的客户留存率。

通过这个案例我们可以发现,整体配色的改变,可以极大的提升官网对于用户的第一印象。用户往往在进来的一瞬间就决定了对官网的印象,并最终影响用户是否进一步阅读,而配色则是其中非常重要的一部分,正确的配色能够让用户更愿意停留并阅读内容。

推广活动页面中的对比色应用

在推广页面的设计中,通常需要用营造强烈的视觉冲击,以达到快速吸引用户并传递信息的目标。这就需要大面积的对比色,来达到强烈的对比效果。而在较大面积使用对比色时,整体色彩的主次和整体平衡至关重要。

我们可以来看一个案例:

可以看到,整个页面主要由橙色和深蓝紫色两个主要对比色构成。大面积的对比色产生了强烈的视觉冲击,让整个页面充满了吸引力。整个画面用最强烈的对比色重点突出了两个主要的人物角色,从而吸引用户注意并进行阅读,最终将用户引导至购买入口。至此,整个页面的任务也算是完成了。

在推广页面中,我们需要注意的是,重点信息并非只能是文字内容,也可以是最吸引用户的画面核心元素。

3. 尝试更多的创新配色

除了掌握以上的几种基本色系的配色方法外,大家可以在此基础上尝试更多的配色风格。比如在同色系、对比色系的基础上,有目的地加入色彩元素丰富色调,在保持整体色彩层级的同时,加入更丰富的变化,从而达到配色目标。

△ 更清新的「同色系」配色

△ 更丰富的「同色系」配色

△ 更多彩的「对比色」配色

△ 复古的平面风配色

而对于很多初学者来说,我建议大家能够首先明确配色的目标,在配色时保持色彩层级的精简明确。在此基础上,循序渐进,逐步去尝试更多地配色风格。只有这样,才能养成良好的配色习惯。

提升品质感

我们按照之前的方法,正确的确定了配色的目标,选择了合适的配色方向,并逐步完成了整体的设计排版。很多同学到这一步之后,就觉得作品已经完成,便停止不继续深入了,而这也是初级设计师经常容易出现的问题。这个时候的作品,从整体上看并没有太多问题。但是当用户被页面吸引,开始仔细欣赏作品时,往往会发现作品没什么看点。

出现这种问题的原因,就是作品缺乏足够的细节和品质,导致作品不够耐看。就像一本书有着精美的封面,但是打开以后却平淡无奇,最终对整本书都非常失望。

想要让作品更优秀,除了基本的版式和配色之外,往往还需要更深入地去雕刻作品,让作品带有一种更高级的「气质」,而这种「气质」就是我们所说的品质感。

1. 什么是品质感?

品质感对于设计作品来说,是一个综合性的评价。我们可以将这个词分为「品」和「质」,「品」代表物体本身的品相和细节,而「质」则代表质感。

怎样的设计才算是有品质感的?如何提升设计的品质感?我们可以先来研究一些优秀的设计案例,寻找其中的共同点。苹果的产品和页面设计,是公认的具有较高品质感的,我们可以来看一下苹果的部分官网页面。

苹果的所有产品和页面,从产品图到页面的设计都非常有质感。为什么这种质感会如此吸引我们,令我们觉得非常舒适?如何才能让设计产生质感?

要了解如何产生质感,首先要了解一下物体产生质感的原理。

当光线照射在富有质感的物体表面时,会产生不同程度的漫反射,最终反射进入我们的眼球后,就会显现出一层富有质感的渐变色。所以想让物体获得质感,渐变是一个关键要素。

我们可以利用这一原理来提升质感。下面的案例,是 FishDesign 组件库官网的一个局部页面。其中就运用了大量的渐变色质感原理,将渐变色融入到 icon 和页面元素中,从而提升了整个页面的质感。

2. 获得品质感的关键要素

渐变只是获得品质感的关键因素之一,苹果官网将渐变这种原理加入到页面和元素中,配合精美的产品图片,让页面保持了非常高的品质感。

那么是否还有其他要素的存在,能够提升质感呢?

仔细观察苹果的所有元素设计,在渐变的同时,还加入了微量的投影和丰富的细节,使所有的元素在简洁中充满了细腻的质感。

我们可以总结一下,让设计获得品质感的几个要点:细腻的渐变+轻微的光影+细节/纹理。

发现这些原理以后,我们可以尝试将这些原理运用到设计中,从而提升设计的品质感。下面的几个案例,就是我在研究时所做的一些练习,在不同的页面细节中都可以看到以上原理的运用效果。

总结

看完前面的内容,大家会发现,其实配色并没有想象中那么复杂。

只要掌握正确的配色策略,并逐渐适应这种方法,就可以应付各种不同的设计类型。最后,我们将前面讲的配色法则做一个简要的总结:明确目标 – 确定主色 – 精简层级 – 选择色系丰富配色 – 提升品质感。

希望大家读完这篇文章以后,能够真正理解和掌握策略性配色法则,在不同的项目中灵活运用,并最终形成自己的优秀配色习惯。


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

 

用一篇超全面的好文,带你了解英国设计史的前世今生

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

文章目录

  • 水晶宫与拉斯金
  • 现代设计之父诞生
  • 工艺美术运动中的平面设计
  • 总结

水晶宫与拉斯金

谈这个运动之前,我们先来交代一下背景,150年前的欧洲版图大致有法国、奥匈帝国、英国、西班牙、荷兰、波兰等国家,由于后来世界大战打来打去相互瓜分,所以对这些国家目前的领土范围、名称等不需要特别较真。

18世纪初期的英国还处于农业经济时代,经济发展取决于劳动力资源的占有和配置。比方你家有100人在干活,理论上经济效益就比隔壁老王10个人干活要强许多。

然后到了18世界中叶,也就是1765年珍妮纺纱机的发明标志了第一次工业革命在英国开始,由此100年间,英国就像被开光加持,走上发展快车道,一下子跃升为世界大国。

这个时候我们横向看看中国的情况,18世纪的中国正处在清朝统治之下,清朝历史上最著名的康乾盛世就是在18世纪中期(乾隆早期)达到顶峰,当时 GDP 占世界总量的三分之一,也很厉害。我们可以从建筑面貌,生活场景,商店来感受一下当时中国的生活水平与设计面貌。

工业革命在英国发展了100年后,正好来到英国著名的维多利亚女皇时代,维多利亚时代前接乔治时代,后启爱德华时代,被认为是英国工业革命和大英帝国的巅峰。它的时限一般定义为1851年~1901年长达50年,这个时期的英帝国走向世界之巅,领土达到3600万平方公里,给大家一个参考数据,咱们大中国目前的领土面积960万平方公里,仅仅是当时的英国领土的四分之一,而经济占了全球的70%,贸易出口更是比全世界其他国家的总和还多上几倍。

所以,现代设计由此时此地发生萌芽,似乎是合情合理。

这个时期英国的设计风格就是鼎鼎大名的「维多利亚风格」,后世对这个风格进行归纳后认为,它属于一种古典艺术复辟整合的风格,因为你可以从维多利亚设计风格的产物中,看到:哥特样式、文艺复兴样式、都铎样式甚至意大利风格样式。维多利亚时期通过融合当代审美元素及使用了新建筑材料等方式,重新演绎及完善这些风格,因为糅合了众多古典风格,所以在视觉上显得矫揉造作,装饰繁琐,色彩丰富细腻,显得唯美主义。

也正是1851年,英国为了向世界炫耀工业革命成果决定搞点事情,于是联合欧洲各大国,举办历史上有名的伦敦世界博览会,而筹办这个博览会的又是历史上有名的阿尔伯特亲王,下面请注意我介绍他和维多利亚女皇之间的关系。

阿尔伯特是德国萨克森-科堡-哥达公爵恩斯特一世的小儿子。比利时国王利奥波德一世是维多利亚的舅舅和阿尔伯特的叔叔。维多利亚的母亲和利奥波德一世是姐弟,所以阿尔伯特是与他的表姐维多利亚女王结婚,是否有点小烧脑,没关系,你只要知道他们是夫妻,然后属于近亲结婚。

他们一共生育了九个孩子,因为近亲结婚的缘故,四个王子中的三个都是血友病患者,所幸的是五位公主个个健康美丽,但也是血友病基因携带者,关于他们更多的故事请自行搜集,因为咱们今天是来聊伦敦世界博览会的。

阿尔伯特一直对设计方面的事务非常感兴趣,所以很积极筹办这次博览会,但期间碰到一个极大的难题,就是当其它国家往英国运送大型工业设计产品时,比方火车头、蒸汽机,建筑模型等东西时,英国暂时没有如此庞大的场地进行安放,并且当发现这个问题时距离对外宣布开展的日期只剩不到半年,按正常流程压根无法完成这样的场馆,问一众大臣无人敢吭声,阿尔伯特心急如焚,某天他在花园里眉头紧皱思考这个问题时,一位皇室花农的儿子忍不住问亲王怎么回事,亲王跟他简单说了情况,没想到这个花农的儿子居然说:如果亲王相信我,不如让我试试看吧。这位花农儿子就是后来英国著名的建筑师:伯克斯顿。

基于花卉种植的技术,伯克斯顿大胆运用了种植花卉的温室结构原理,使用钢铁与玻璃为原料,快捷实用又经济并且采光一流的方式做了这个场馆,那就是后来一开展立刻震惊全世界,历史上著名的「水晶宫」,这个建筑物也被后世视为现代设计拉开帷幕的标志性产物,也被视为「工艺美术运动」的开始。

水晶宫在1854年曾经从伦敦中心迁址南部,无奈在1936年的一场大火中被付之一炬。英国前首相丘吉尔曾表示它的烧毁是「一个时代的终结」。

这个世界知名的博览会所展览的作品以工业产品为主,并且全部都没有一点现代设计风格的影子。那我们不是在聊现代设计的萌芽吗,对的,这个博览会的最大作用是反面刺激,因为展出的产品大部分非常粗陋,原因很多,其一是谁也没经验做工业产品,好比香港第一届特首,前无古人很难做好;其二是工业发展本来就是初期,工艺水准远远没有成熟。

而在一些人看来最要命的是为工业产品强制添加装饰,比方把哥特式的纹样刻到铸铁的蒸汽机体上,在金属椅子上面画个油漆画,在缝纫机上面加一个丘比特造型等等,完全是不实用并且谈不上美观的设计。

这种情况在意见上形成两面派,比方爱国者立场的人大唱颂歌,甚至要写诗来赞美,比方英国大诗人丁尼生就为这个博览会专门创作了颂诗。

而另一派自然就是批评者,批评的角度是博览会大部分产品都缺乏一种从整体出发的设计构思,形式远远大于功能,能够意识到这种问题的人其实已经具备了新设计思想,但很可悲的是他们又多数是机械否定论者,意思就是反对工业,崇尚手工,显然违背了社会发展规律。

这群反对者当中有一位后来非常著名的人,最后成为「工艺美术运动」的理论指导者,他就是约翰·拉斯金。

在博览会现场,32岁的约翰拉斯金已经是英国成名作家,艺术评论家,同时也是教师及业余地质学家,成名作是1843年写作的《现代画家》,他看到水晶宫的展览后,发出感概:艺术家已经脱离了日常生活,只是沉醉在古希腊及意大利的迷梦当中,如果这些产品只能被少数人理解而脱离大众,艺术没什么作用,真正的艺术必须是为人民创作,不然就是一件无聊的东西。

其实按现代的观点,我们补充一下拉斯金这个说法,他提到的艺术严格来说应该就是当代定义的设计,因为160年前不存在设计的说法,设计跟艺术之间的定义非常模糊。

当时会场中的拉斯金可以说是愤怒的,随后几年,他开始通过著书跟演讲来宣传他的设计美学概念,比方他提出设计的实用性目的,他认为:世界上最伟大的作品都要适用于某一特定场合,从属某种目的。这个观点说出设计的功能性问题,属于初步的现代设计思想。

同时拉斯金极力反对精英主义,强调设计的民主特性,强调设计为大众服务,这一点也是后来德国包豪斯非常重要的思想内核之一,拉斯金认为以往的美术都被贵族的利己主义控制,范围一直局限在上层社会,如今不应该再为取悦公爵太太们,而应该更多的关注农村中的劳动人民,为他们生产一些实实在在的东西。

约翰·拉斯金1819年生于伦敦。是个独生子加富二代,因为父亲是成功的苏格兰雪利酒商人,父母对拉斯金要求严格,把所有的希望和理想都寄托在约翰·拉斯金身上。他的父亲一直鼓励他从事绘画和诗歌创作等文艺工作,而母亲却希望他能做一名牧师。年少的他一般在家庭和基督教堂学习。每年夏天随父母游览名山大川,参观古代建筑和名画,培养了对自然和艺术的爱好。

拉斯金在1836年进入牛津大学基督学院,1840年因病退学。此后两年在意大利养病,同时搜集资料从事著述。其实拉斯金本身也做部分艺术创作,比方绘画,但后期专注于理论研究及普及设计思想。但拉斯金的设计思想非常庞杂,也有一部分对时代消极的内容存在,但我们这里基本不谈及。

现代设计之父诞生

生平不识莫里斯,设计十年也枉然。

就在水晶宫诞生的前几年,1848年世界上也发生一件大事,就是德国的卡尔马克思先生发表了他的重要著作《共产党宣言》,因为工业化发展过程中,造成了很多社会问题,比方贫民窟的出现,因为机器代替了人力,大部分工人下岗了,换到我们身处的时代,隐隐感觉人工智能与大数据的迅速发展是一样的,机器人及信息化工具也将取替大量人力,比方无人汽车,无人机送货,餐馆的二维码下单及收款等,都会让一批劳动力被取代。

当时发展工业革命的欧洲国家,资本主义开始产生及成熟化,于是就产生了两个对立阶级,就是著名的无产阶级与资产阶级,无产阶级的生活条件及工作条件随着工业革命发展,逐步恶化得非常恶劣,这就是当时「工艺美术运动」发展的时代背景。

我们第一部分谈及了「工艺美术运动」的理论指导者约翰拉斯金,他在1953年出版了一本书籍叫《威尼斯的石头》,这本书讲述了中世纪设计精华的思想内容,深刻影响了一位年轻人,这位年轻人后来通过自己的努力,掀起工艺美术运动,成为了现代设计的奠基人,他就是大神威廉莫里斯先生,他同时是世界第一所设计事务所的开设人,所以他也被视为现代设计之父。

不过关于这个说法其实存在争议,因为工艺美术运动被后世认为在思想上是倒退的,因为他们的意识形态是反工业,重塑手工艺的,主张从自然和哥德风格中找寻出路,比方「向自然学习」就是工艺美术运动的重要口号之一,而我们回顾当时的诸多作品,我们也发现大量动植物纹样的设计形式,同时这个运动其实也受东方风格的影响,特别是日本的浮世绘,我们后面会论述这块。

1951年的伦敦世界博览会期间,威廉莫里斯也到过现场观看,那时的他年仅17岁,他对于工业化产出的丑陋产品感到非常震惊与厌恶,根据小道消息记录,他在观看时候曾经放声大哭。虽然这种反应未免有夸张之嫌,但是确实在那次经历之后,莫里斯就立志开始学习设计,希望通过自己的努力来扭转这种设计颓败的局面。

跟约翰拉斯金一样,1934年出生的威廉莫里斯也是一名富二代,有一个富足的家庭跟一位经商的父亲,所以起点高一直不是坏事,特别是起点高的同时还有一位重视教育的父亲,莫里斯的父亲对他学习情况非常关心,一直严格要求莫里斯,所以1851年博览会后莫里斯顺利考入牛津大学建筑系。早期的设计师基本都是搞建筑为主,比方德国包豪斯的几位校长都是建筑师。

在牛津大学毕业后的莫里斯去了一所专门从事哥德风格建筑设计的事务所里工作,这个期间他对哥德风格有了实践上的深刻认识,但是莫里斯的内心其实对绘画及诗歌(莫里斯本身也是一位成熟的诗人,曾出版《地上乐园》等诗集)更为热衷,他感觉自己并没有对建筑的热忱,所以他呆了不够8个月就走了,随后参加了著名的「拉斐尔前派兄弟会」。

拉斐尔前派是1848年由3名年轻的英国画家亨特、罗塞蒂和米莱斯在英国伦敦所发起组织的一个艺术团体,目的是为了改变其时的艺术潮流,反对在米开朗基罗和拉斐尔的时代之后偏向机械论的风格主义画家。总的来说,他们的风格偏向传统写实,主张忠于自然,所以跟拉斯金及莫里斯的理念都接近,莫里斯在此期间创作了一些画作,其中比较有代表性的是《冈尼芙皇后》,画风已经明显有设计的装饰性感觉。

参加拉斐尔前派后的莫里斯不久就马上要步入人生另一个阶段——结婚,而对象是下面这位非常擅长配合摄影师摆pose 的美女简·伯顿,深谙现代头疼脚疼肚子疼三大法则,莫里斯第一次见到她时是这样描述的:美艳动人,身材高挑,皮肤黝黑,有一种野性美,留有自然的鬈发,长着细长的脖子、大大的眼睛和性感的双唇,与当时优雅而传统的美女很不相同,有标准的模特风范。

所以拉斐尔前派的成员之一罗塞蒂就经常以她为绘画模特进行创作,后来两人也因此闹出了不少绯闻,导致莫里斯和简伯顿的关系出现裂缝。

另外关注设计史太浓的朋友知道,我们的内容一直不乏美女身影,比方包豪斯创始人格罗皮乌斯的太太,神一样存在的阿尔马·马勒,关于她的传奇故事可以详见《用一篇超全面的好文,带你了解包豪斯的前世与今生》

莫里斯跟简伯顿的婚姻对整个世界的设计发展来说都是一件大事,因为他们的婚姻促使了莫里斯开始从绘画转向设计方向,同时被视为现代设计开端的代表性建筑「红屋」也诞生,事情的经过是这样的:

莫里斯跟简伯顿确立关系后决定在1859年喜结连理,而成家就要立室,说白了就是需要买房子,于是莫里斯开始在伦敦市区及郊区到处寻找合适的住宅,但是经过多轮的折腾,一直没有找到自己满意的住宅,以及对住宅的用品也十分不满,因为当时存在的建筑跟家居用品都充斥维多利亚风格的繁琐,不然就是极度简陋。

于是莫里斯开始产生自己动手建房子的想法,他邀请了一位叫威伯的朋友帮忙,在郊区肯特郡弄了块地,周围是果园,拥有非常开阔的视野与景色,符合莫里斯喜好接近大自然的性格,也符合新婚夫妇对浪漫的诉求,他们开始在这里做自己想要的房子。这个房子一开始的定位就是非常规的套路,比方结构是非对称的,然后表面没有粉饰,并且充分考虑了居住的功能性,其中最突出的特征就是房子全部使用红砖修建,既是材料,又成为装饰动机,所以史称「红屋」,其中也使用了诸多莫里斯喜欢的哥特元素雕饰细节,比方塔楼、尖拱入口等。我们来看看历史上红屋的样子:

其实红屋最特别的部分在于,除了房子本身的建筑外,里面全部家具、灯具、地毯、装饰品、墙纸、挂画都是莫里斯亲手设计的,就是现代俗称的硬装与软装,莫里斯都一手包办,所以风格非常统一协调,而且别具一格,这种风格也被视为工艺美术运动的代表性风格。

时间已经去到1860年,红屋的落成让周边的人好奇与惊讶,纷纷来参观,慢慢在英国设计界开始引发广泛的兴趣与赞誉,好的设计、讲究功能的设计自然会激发大众的热情与需求,越来越多人询问他能否也帮忙设计一些家具用品,他开始萌生为大家提供设计服务这样的想法,此时的他只是跟朋友经营画室搞创作,属于一个没有固定职业的下岗人员,于是他决定破天荒的成立一间独立设计事务所,这是世界上最早由艺术家经营的设计事务所,也就是现在所有设计公司的前身。

刚开始他是跟两位朋友一起合伙经营,几年后奇货可居,业务蒸蒸日上,他果断将另外两位朋友的股份买下,在1864年更名为「莫里斯设计事务所」。其实西方大部分品牌、公司都会以灵魂人物的名称来命名,比方沃尔玛、惠普、戴尔、保时捷、迪斯尼等等,遍及各行各业,这在我看来属于部落文化,也是罗振宇说的人格体,在设计行业其实也越来越多这种现象,中国这种情况较少,但香港已经有诸多成功的示例,比方陈幼坚设计有限公司,香港李永铨设计有限公司等, 内地深圳有韩家英、王粤飞等,老板的气质就是企业的气质,老板的风格就是作品的风格。

莫里斯的设计事务所为顾客提供各种各样的设计服务,范围包括家具、地毯、毛毯、墙纸、书籍、海报、建筑等,涵盖全面而完整,后期莫里斯越来越善于经营,联合工厂直接生产自己设计的产品,包括陶瓷、玻璃、地毯等,再直接销售给客户,所以这也是一个用设计创造财富的典型例子,值得现代设计师借鉴。

莫里斯的设计风格有别于当时的维多利亚风格,独树一帜,后来史称「工艺美术」运动风格,特征包含了以下几点:

  • 强调手工艺,明确反对机械化生产(这算是违背社会发展规律的倒退观念)。
  • 反对矫揉造作、繁琐、装饰过度的维多利亚风格,及其它古典、传统的复兴风格(这是进步的观念)。
  • 提倡哥德风格,讲究简单、朴实,重视功能(这特点具备现代设计思想)。
  • 推崇自然主义、装饰上借鉴东方艺术,比方日本的华年鱼虫。

工艺美术运动中的平面设计

第二部分聊到威廉莫里斯自从跟简伯顿结婚后,亲力亲为修建一间红屋,引发了设计圈轰动,随后他成立了自己的设计事务所后,引领出「工艺美术」运动风格,从1860年到1880年达到运动高峰,带动欧洲各国的同类设计运动,但因为本次的主题是英国设计,所以我们主要先聊英国情况,关于这场运动欧洲其它各国的状况我们将会在其它分享里讲述。

莫里斯初期主要的设计方向是家具、墙纸、家居用品等,墙纸设计是其最具代表性的作品之一,而且风格上特别容易识别,就是使用大量植物纹样,我们通过下面的图片来大致感受一下,现代的产品假设使用这种特征很容易重现莫里斯风格:

但后来英国出版界发生了一些事情,让莫里斯在平面设计范围也开始有极大拓展,并且发展出强大的影响力,进一步深化工艺美术运动的范畴。

事情的起因是19世纪以来,因为工业革命发展,引入机器操作后书籍开始大批量发行出版,导致书籍设计的粗制滥造情况越发严重,开始让当时一批平面设计家感到很焦虑,情况就跟现在区块链的急速发展,产生大量粗制滥造的app、网站平台的情况雷同,让做UI设计的我们也感觉局促不安。

所谓时势造英雄,总有一些人要被历史选中,比方有一位出版家叫威廉帕克林,在24岁时候开设了自己的书店,专门经营善本(泛指刻印较早、流传较少的精美古籍)和古本图书,后来他跟朋友合伙经营出版社,自行设计与出版书籍,多数与散文及诗集为主,他们对书籍有非常严格跟精细的要求,而且也使用了哥德风格结合简单明快的方式进行设计,符合工艺美术运动的特点,给出版界带来一股清流。

在这种风气影响下,慢慢的又出现另一位人物,就是建筑家出身的阿瑟·玛克穆多,他出生于1851年,就是水晶宫面世同一年,在26岁时候他认识了43岁的莫里斯,受到当时已经成大名的莫里斯的思想影响,决心追随他发展工艺美术设计改革,他专注于平面设计,并且体现在书籍设计上。

1882年他成立了自己的设计公司「世纪行会」,然后在1884年出版了一本《玩具马》刊物,这是最早最系统,利用文字方式宣传工艺美术运动主张的出版物。但非常可惜关于这方面的图片资料在互联网上已经无法找到。

这本刊物是工艺美术运动当中平面设计的最典型作品,刊物当中的封面及插图、排版装饰使用了吸收日本浮世绘元素,从植物纹样当中提炼出抽象图案,并采用一些中世纪的装饰动机,流畅、生动,形成一种特别,能代表工艺美术运动的平面设计风格。

做这个刊物时候玛克穆多曾经多次跟莫里斯探讨版面编排、空间布局比例,文字间距、字体风格、纸张材质等具体的设计问题,这个过程让莫里斯很兴奋,因为莫里斯对工艺美术运动风格可以应用到书籍平面设计当中感到很高兴,于是他又决定搞点事情了。

这个时候时间已经去到1888年,莫里斯的事业已经发展很成功,说白了就是通过设计获得了财务自由,一旦财务自由就可以比较任性的做一些事情,比方将精力从家具、墙纸、工业产品方面转移到平面设计,而且本来他就是一名文学爱好者,所以他一转身就成立了个人出版社,雇佣了一批铸字工人及印刷工人,起名为克姆斯各特出版社。

这个出版社一成立,基于莫里斯本人的影响力马上就生产出一本成功的书籍,就是莫里斯与插图画家克莱因合作,设计出版的英国传说故事《呼啸平原的故事》,第一次出版了200册纸张本跟6本羊皮纸本,这本书设计非常精美,而且完全符合工艺美术运动风格,一上市就吸引了英国读者的强烈兴趣,并且将克姆斯各特出版社的名头一炮打响。

莫里斯这个出版社在英国的「工艺美术」运动当中发展起到非常重要的作用,因为在莫里斯的带领下,出版社是这个运动当中平面设计领域最集中的体现,影响了其它出版公司,甚至影响到欧美各国的印刷出版行业。

克姆斯各特出版社无疑是威廉莫里斯的平面设计大本营,他的大部分书籍都是由这家出版社完成,不过他的设计充满了企图恢复古典,中世纪哥特时期的风格特征,版面编排非常拥挤,很多细节也比较繁琐,并且因为对质量的追求,所以产量低,价格高,有经济能力购买的群体不多,于是慢慢引起一些评论家的指责,可见名人做事情是要受社会监督的,比方英国有一位平面设计家刘易斯·戴依就曾经在1899年的《东方杂志》这个期刊中撰文批评威廉莫里斯。

他认为莫里斯后期的书籍设计完成沉溺在复古主义,完全违背了他一贯主张和倡导的设计社会化、民主化、大众化的立场与原则,让书籍无法成为普及大众的读物,而沦落为少数收藏家的藏品。而此时莫里斯其实已经离世,莫里斯是在1896年因为病患去世的,而克姆斯各特出版社从1891年经营到1898年,期间一共出版53种图书,总印刷量达到18000本,这个数量在英国及欧洲都是可观的,在莫里斯离世两年后,因为缺乏灵魂人物,出版社因为经营不善就关闭了。

后来这位批评莫里斯的设计大师戴依联合了插图画家杰西·金及格里那维,三人合作创造出一种以儿童为受众的读物设计风格,设计当中充满了天真风格、色彩浪漫,无论字体、插图风格跟布局排版都轻松可爱,广受当时的儿童欢迎。

他们的目的是希望书籍设计能够真正为广大读者服务,改变书籍长期被少数人掌控的局面,也力图改变莫里斯那种比较凝重的考古味道。这三人都基于为大众的共同立场,但是各自有自身的风格,他们为众人皆知的一些英国童话故事设计书籍,人物、动物、植物跟风景都栩栩如生,生动活泼,是工艺美术运动后期平面设计范围里一个重大的发展与突破。

他们的设计直接影响了下一代的平面设计师及插画家,比方我们在包豪斯那期分享里聊到的比利时设计师亨利·凡德·威尔德。

莫里斯离世之后余威尚在,很多年轻设计师受他的影响,都成立了一些小型出版公司来探索书籍平面设计,被后世称为「私营出版运动」,其中有一个比较突出的机构叫「手工艺行会」,领导人是杰出建筑师查尔斯·阿什比,同时他也从事首饰跟银器设计,他跟三位朋友一起,仅仅使用50英镑成立了这个行会。

手工艺行会的风格在工艺美术风格基础上再次产生了一些突破,比方把古埃及及古罗马的风格也融合平面设计,特别是字体设计上重视书法效果,他们的设计业务和制作业务都发展得很繁荣,订单接踵而来。

另一个比较突出的「私营印刷运动」组织是多佛出版社,他们有一个很具进步性的设计思想观点,认为平面设计的核心并非单纯的视觉美好,而是准确的形象信息传达,在良好的传达前提下,达成设计美观的目的。他们的代表作是1903年的《圣经》,字体和版面编排都非常方便阅读,插图讲究,达到功能与形式的完美平衡,是工艺美术运动后期越发成熟的代表作品之一。

以约翰拉斯金的指导思想为基础,威廉莫里斯设计为代表所发起的英国「工艺美术」运动,虽然思想跟形式上也有倒退的部分,但仍有诸多具备现代设计的先进思想,比方希望设计普及大众、重视功能等,所以对西方各国的设计发展都有促进与推动作用,并且在历史上被视为现代设计的开端。

总结

整个分享我们大致谈了三部分内容。

现代设计的起源发生于英国,伦敦博览会水晶宫的出现刺激了设计理论先驱约翰拉斯金对设计的思考,并发展出具有进步及前瞻性的现代设计思想。

设计师威廉莫里斯建造红屋这件事,拉开现代设计的序幕,并引发出工艺美术运动,该运动风格特征以莫里斯借鉴东方植物纹样的元素,形式简单明快,讲究功能等特点为代表。

工艺美术运动在平面设计上,特别是在书籍上具体体现,莫里斯同样担当领军人物,并由此对欧洲各国的平面设计产生深刻影响。


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


交互设计-设计模型

用心设计

工欲善其事,必先利其器”;作为设计人员来说,设计方法和设计模型就是辅助我们更好做设计的工具。就像厨师做菜时候的菜谱一样;面对新的菜种,能更快指引我们做出味道不错的菜肴。

体系化的设计方法不仅能更好的指导设计师做设计;另一个方面,经过设计方法包装后的设计,能让设计师更坦然面对来自各方的质疑,更专业的讲述自己的设计依据。在做不同菜肴的时候,我们需要不同的菜谱来指引;而在不同的设计阶段,设计师也需要不同的设计模型/方法,让我们更灵活的做设计分析与输出。

下面从接到项目需求 > 体验迭代优化阶段,笔者将为大家详细讲解以下 5 种设计模型,并配出具体实践的案例,希望对大家有所启发。

模型一:SWOT 模型

1. 概念介绍

SWOT分析法(也称 TOWS 分析法、道斯矩阵)即态势分析法,20世纪80年代初由美国旧金山大学的管理学教授韦里克提出,经常被用于企业战略制定、竞争对手分析等场合。

在现在的战略规划报告里,SWOT分析应该算是一个众所周知的工具。来自于麦肯锡咨询公司的SWOT分析,包括分析企业的优势(Strengths)、劣势(Weaknesses)、机会(Opportunities)和威胁(Threats)。

2. 使用场景

主要用在产品前期的战略规划中;用于项目成员知己知彼,同时也能知道在行业领域自己的产品所处的位置和核心竞争力是什么;对于产品方向的定位和全方位分析有复用价值。

3. 计价值

SWOT分析实际上是将对企业内外部条件各方面内容进行综合和概括,进而分析组织的优劣势、面临的机会和威胁的一种方法。

优劣势分析主要是着眼于企业自身的实力及其与竞争对手的比较,而机会和威胁分析将注意力放在外部环境的变化及对企业的可能影响上 。在分析时,应把所有的内部因素(即优劣势)集中在一起,然后用外部的力量来对这些因素进行评估。

4. 具体实践案例说明

下图是笔者曾为的阿里内部某个数据服务平台分析的案例;侧重介绍了为什么要做这个数据平台;以及做这个平台我们项目组的优劣势和机会点分别是什么。在给老板汇报产品来源&方向时是非常有效的。

最后,SWOT 分析模型其实还可以与商业画布相结合,便于更全面对项目/业务进行快速分析和深入了解;深入懂业务的设计师才能真正在团队中进行发声,提出超越 UI 层的建设性意见。

模型二:Google Design Sprint

1. 概念介绍

Design Sprint, 设计冲刺,顾名思义就是要在短时间内做出好设计;是由 Google 提出的设计方法。

2. 使用场景

设计冲刺这个设计方法主要适用于短时间就需要产出设计方案;例如一些 Workshop 的共建, 产品迭代周期很快的新需求/任务,需要系统化分析与输出设计方案。

3. 设计价值

可以在很短的时间内输出一套系统化的设计策略及方案;

通过与不同背景的参与者进行沟通协作,能获取更多看事物的角度和差异化知识;创造更多可能;

作为一种理想的设计教育工具,让非科班的设计人员完整又快速了解产品&设计。

4.  具体实践案例说明

设计冲刺的主要内容包括 6 个阶段:

理解(Understand):理解要为用户解决的问题

定义(Define):明确产品策略(数据分析,用户调研,设计原则制定等)

发散(Diverge):探索实现方案

决定(Decide):确定设计方案

原型(Prototype):构建产品原型

验证(Validate):验证产品原型

模型三:GUCDR 模型

1.概念介绍

相比前一个设计冲刺模型,GUCDR 模型在设计过程中的实用性更强,能让你快速用起来,帮你系统性梳理信息;在实际工作中,只要能够回答画布中的每个点,即可形成完整的设计推演过程,让设计思路逐渐清晰起来。

G:Goal

U:User

C:Condition

D:Design

R:Realize

2. 使用场景

GUCDR 模型很适合用于前期需求调研和整理阶段;特别是在自己不是很熟悉的领域中,把信息按照模型和画布中的点进行归类汇总;最大限度的让自己的设计思维和信息逻辑得到诠释。

3. 设计价值

3.1  对设计的需求来源及设计目标的聚焦定位,非常有价值,能快入深入了解业务背景;

3.2  对设计阶段的目标拆解,从设计目标 > 设计策略 > 设计方案,层层递进,设计方案输出的逻辑性和针对性很强。

4.  具体实践案例说明

GUCDR 模型在具体的使用过程中,可以和 GUCDR 画布结合起来一起使用。信息下钻的更深入具体,从项目目标到设计落地,每个阶段都有具体的节点支撑,在使用过程中只需要把信息直接输入到对应的位置即可。下图为 GUCDR 画布模板,可直接把业务相关信息输入进来。

模型四:双钻模型

1. 概念介绍

双钻设计模型由英国设计协会提出,该设计模型的核心是:发现正确的问题、发现正确的解决方案。

双钻模型是一个结构化的设计方法,被很多设计师喜爱和使用。

探索/调研——透析问题(发散)

定义/合成——聚焦领域(集中)

发展/构思——潜在问题(发散)

传达/实现——实施方案(集中)

2. 使用场景

一般应用在产品开发过程中的需求定义和交互设计阶段;教我们如何对未知的可能的事物进行探索;一步步到达已知的理应的层面。

3. 操作使用说明

双钻模型的四个阶段也许很精简并且合并到两个主要的阶段。

第一阶段——做对的事(菱形1——探索和定义)

第二阶段——把事情做对(菱形2——开发和履行)

4.  具体实践案例说明

下图是对阿里内部一款移动运维产品的分析,分析其从 0-1 的方向探索和从 1-1.5 的发展历程:

下图是曾经在一个设计讲座中,滴滴 CDX 一位设计师的分享,她把双钻模型利用到设计的研究和输出阶段,个人感觉此模型此刻的使用场景也很贴切;不仅仅是在完整的一个项目中,在单一的某个阶段双钻模型也是理念很好的承载容器。

模型五:卡诺模型

1.概念介绍

kano模型是狩野纪昭教授发明的一种工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。

在卡诺模型中,将产品和服务的质量特性分为五种类型:

1> 魅力属性:用户意想不到的,如果不提供此需求,用户满意度不会降低,但当提供此需求,用户满意度会有很大提升;

2> 期望属性:当提供此需求,用户满意度会提升,当不提供此需求,用户满意度会降低;

3> 必备属性:当优化此需求,用户满意度不会提升,当不提供此需求,用户满意度会大幅降低;

4> 无差异因素:无论提供或不提供此需求,用户满意度都不会有改变,用户根本不在意;

5> 反向属性:用户根本都没有此需求,提供后用户满意度反而会下降。

2. 使用场景

卡诺模型的主要使用场景是对用户需求分类;

另一种是对多个功能点进行优先级排序。

3. 具体使用操作

步骤一:设计问卷调查表,实施有效的问卷调查

KANO 模型的问卷问法,是对每个质量特性都由正向和负向两个问题构成,分别测量用户在面对存在或不存在某项质量特性时的反应。问卷中的问题答案采用五级选项分别是:

我很喜欢:让你感到满意、开心、惊喜。

理应如此:你觉得是应该且必备的功能。

无所谓:你不会特别在意,但还可以接受。

勉强接受:你不喜欢,但可以接受。

我很不喜欢:让你感到不满意。

步骤二:问卷结果整理,进行数据分析

根据问卷结果进行 KANO 模型二维属性归属分析,可得出魅力属性、期望属性、必备属性、无差异属性、反向属性与可疑结果的功能属性归类百分比。除了对属性的归属探讨外,并通过百分比计算出 Better-Worse 系数,表示某功能可以增加满意或者消除很不喜欢的影响程度。

增加后的满意系数 Better/SI=(A+O)/(A+O+M+I)

消除后的不满意系数 Worse/DSI=-1*(O+M)/(A+O+M+I)

根据 better-worse 系数值,将散点图划分为四个象限。

第一象限/期望属性:better 与 worse系数成正比;表示产品提供此功能,用户满意度会提升,不提供此功能,用户满意度会降低,这是质量的竞争性属性,应尽力去满足用户的期望型需求。

第二象限/魅力属性:better系数值高,worse 系数绝对值低的情况。表示不提供此功能,用户满意度不会降低,提供此功能,用户满意度和忠诚度会有很大提升;

第三象限/无差异属性:better系数值低,worse系数绝对值也低的情况。即无论提供或不提供这些功能,用户满意度都不会有改变,这些功能点是用户并不在意的功能。

第四象限/必备属性:better系数值低,worse系数绝对值高的情况。当产品提供此功能,用户满意度不会提升,当不提供此功能,用户满意度会大幅降低;此象限的功能是最基本的功能,这些需求是用户认为产品有义务做到的事情。

步骤三:数据解读,将结果落地实施

KANO 模型是对功能需求的优先级进行探索,具体情况还需要和业务方进行讨论,结合实际情况后制定可行的产品功能开发优先级顺序,以将调研结果落地实施。

4. 具体案例实践说明

题目:根据报警内容,“掌上运维”提供运维操作建议(如磁盘满了智能推荐执行日志清理等)

步骤一:设计问卷问题,发放问卷

步骤二:问卷统计,进行 KANO 模型二维属性归属分析

步骤三:根据问卷统计的用户数据;计算出每个区域的百分比;

具体计算方式是全部区域的人数相加作为分母;每个格子中的数字作为分子,即可得出每个格子的百分比出来。

具体百分比得出后,将下表中标 A、O、M、I、R、Q 的格子中百分比相加,即可得到五种属性对应的百分比。本调查结果可以得到A魅力属性占比为42.1%,O期望属性占比9%,M必备属性占比1.2%,I无差异属性占比38.9%,R反向属性占比1.8%,Q可疑结果占比7%。

步骤四:根据 Better-Worse 计算公式,得出 Better-Worse 系数,明确功能落点象限。

步骤五:多个功能需求结果对比进行优先级排序。

模型六:METUX 幸福模型

1. 概念介绍

为了帮助大家更好地进行“幸福设计”,卡里罗教授分享了他的一个模型——Motivation, Engagement and Thriving in theUser Experience (METUX)。

2. 使用场景

产品成熟稳定期,需对产品&用户体验进行提升时;或需综合对产品体验进行评估分析时;提升用户幸福感,希望产品能对用户行为方式及生活质量有所影响时。

3. 主要使用操作

在考虑用户体验时,从4个层次进行考虑:

▪︎  第一层是“界面”体验:用户与产品交互时的体验如何。

▪︎  第二层是“任务”体验:界面之上是用户完成的任务。如利用智能手环计步,用户在完成任务时体验如何。

▪︎  第三层是“行为”体验:任务之上是用户的行为。如用户购买智能手环的目的是运动,此时行为可能是跑步、骑自行车。因此产品在任务之上应该深入关注用户行为上的体验。

▪︎  第四层是“生活”体验:行为会对生活产生影响。如运动过量可能导致身体受损。

在设计过程中,应该关注“胜任力”、“自主性”和“关系”三个关键因素,这些基本心理诉求是动机、投入感和幸福感的根本。

途家APP V7.0改版——交互设计总结

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里



途家网是全球民宿预订平台,与传统酒店住宿不同,致力于为用户提供更个性化、更人性化的出行体验。作为电商类产品,改版最终的目的自然是提升转化率、提升GMV,除了这个简单粗暴的商业目标,设计团队同时需要考虑如何改善产品的用户体验。本文主要围绕途家App中的首页、列表页、详情页三个环节,为大家分享改版的思路和最终的设计方案。




核心流程


核心流程指的是用户进入途家App到完成一单预订所经历的过程,主要包含以下几个环节:搜索&浏览、比较、决策、预订、支付。要提升用户体验,就需要设计师在每一个环节中,思考如何更好的帮助用户达成他们的目标,以促使用户进入下一个环节,最终完成预订。




 

首页


进入App首页的用户,大致会分为两类。一类是需求明确的用户,他们有比较清晰的出行日期和目的地,这类用户大多会直接通过搜索来寻找房源,因此首页上需要有明显的搜索框来引导他们说出出行需求,这样他们就会顺利进入核心流程。另一类进入app的用户则没有明确的出行需求,甚至可能是不太了解产品的新用户,直接使用搜索会让他们感到不知所措,他们需要通过先逛一逛来汲取灵感。那么对于这一部分用户,首页就需要给予一些有吸引力的内容,推荐一些好东西给用户,让他们能随意看看,一方面旨在激发用户消费欲进入核心流程,另一方面能够让用户对产品产生好感和信任感。




列表页


列表页是承载房源卡片集合的搜索结果页,用户通常会经过首页的搜索框,在输入了位置和日期后,进入列表页。当然通过城市、位置和日期搜索得到的结果,只能是一个初步的搜索结果,用户还需要通过入住人数、价格、户型等缩小范围,筛选出更符合自己入住需求的房源,以便于逐一比较和进行查看。所以在用户进入列表页后,如何帮助他们得到符合入住需求的精细化搜索结果,是我们首先需要解决的问题。


详情页


房屋详情页是用户进行购买决策的重要环节。用户在详情页停留时间相对较长且有较强烈的购买意愿,因此,在详情页充分展示房屋优势,吸引用户,是对于提升转化率十分重要的。详情页的信息涵盖了多个维度,比如有关于房屋的描述、关于房东的介绍、还有来自房客的评价、入住须知等,如何将大量的信息合理的分组,突出房屋优势,并以合适的顺序清晰地展示给用户,是详情页的设计难点。


结语


每一次改版都需要公司多个业务方及团队的支持,做为设计师会收到来自各方的需求及关于方案的反馈。面对来自四面八方的观点输入,我们要时刻牢记改版目标,并且明白评判方案的好坏并不能简单地用对与错,而是当下面对此人此情此景,取舍是否合理,是否尽力做到了的权衡。同时,作为可能是唯一能够单纯为用户说话的角色,设计师还是要在考虑商业目标之外,多为用户争取一丝闲暇吧。


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

 

大型医疗管理系统设计:eCare EHR Platform

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

蓝蓝设计

这是一个关于大型医疗管理系统的设计案例,对于这类平台案例的分享我们非常少见,要么没多少设计师能接触得到,要么是禁止分享,所以建议大家有空就看一下,同时感谢设计师 Tusacha 分享管理平台的设计经验,下面大家一看看 eCare EHR Platform 的医疗系统设计。

PS:由于医疗平台针对的用户一半是外国用户,因此用英文版来做页面展示,用中英文做讲解。

医疗管理系统设计

设计师:Tusacha
个人主页:http://i.ui.cn/ucenter/285814.html

产品概述

“全科”

整合看病,防病、病后康复、人文关怀于一体的学科,涵盖了各个器官系统以及各类疾病,解决80%的疾病。

eCare全科诊所管理平台

基于多角色可配置的权限管理平台,融合各科室业务流程医疗形成统一的全科诊所管理系统。以诊疗规范化,管理标准化、决策数据化、营销社交化及办公移动化为产品的运用核心模式。

挑战与机遇,改版大思考

很多初期项目在快速选代开发过程中,大量以功能叠加、业务调整为主,交互及视觉缺乏统一性,整体缺乏美感,对用户使用场景及体验考虑欠佳。因此eCare全科诊所管理平台是站在用户使用场景及体验的角度来做的全新改版(主要是结构层,框架层及表现层),整体设计过程中,要考虑国内外用户的操作习惯,并取之平衡点。这对从未接触过PC端大型平台设计的我来说,就是巨大的挑战与机遇。

结构层与框架层

了解产品:调整信息架构,减化信息层级,简少操作流程,以角色来配置功能界面(分清主次) ,整体布局考虑用户操作习惯及心理感受。

用户操作习惯

关注用户:在设计细节当中考虑用户操作习惯,使用场景(医院/卫生院/其它医疗中心)及心理感受,信息用词统一(减少误解),人性化引导(避免不必要的错误操作) .

表现层

做好设计:规范视觉与交互方式,提高前端与开发效率,突出产品整体特性。

PS: 以下内容由与版式问题,小编无法文字排版,请直接点击图片查看大图,以便更好理解。

请点击图片查看大图:


www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

福报从身体上看出来

蓝蓝设计的小编

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


我们现在追求幸福的方式是错误的。包括很多人学佛,就求福求发财,这只是勾牵你进来的方式,其实道的门都没有进来。要进道的门,确实不容易,不是福报大小的问题,而是阴德厚重的问题。


我们对幸福有个错误的觉知,认为吃得越好,住得越高档舒服,饮食住宿千万般求细腻,认为这是幸福生活。这个是凡夫之见。我现在也在反省,学佛,还是修道,很多人都在追求住得更好,更豪华,吃得更细腻,更有营养。认为这就是福报,那真的如此吗?


其实福报和物质没有关系,可是不知道什么时候,大家把福报和钱财等同起来。导致很多人一学佛,发财了,就说自己福报来了。古人讲,真传一句话,假传万卷书。我们现在看到的佛经,很多名相,都是假传万卷书。我们误解了这些名相,所以越修越错。就单单一个福报这个名词。


人对外界的追求是没有止境的。就像你看速度,我们对速度的追求也没有止境,飞机、火车,导致越来越快。就像人的欲望一样,一旦升腾起来,也没有止境。你会想要越多,尤其是世俗福报越大的人,他欲望就越大。因为向外的追求,是一条不归路,所以你看城市里头,谁活得最幸福。告诉各位,没有的。在城市的欲望里头,每个人都活得很痛苦。

 

所以我们对福报的误解,导致追求的错误。人要怎么修行?人应该要念念归于清净时。所以不管是佛教,还是道家的修行,最基本的要做到清净。很多人钱财,权力很大,为什么那么痛苦?因为他没有得到清净。所以道家修行经典有句话:人神欲清而心扰之,人心欲静而欲牵之。如果能懂这句话,也能开悟。


真修道,就要回归到心神的安宁上来,才能得到真正的幸福。我们现在都在鼓动很多的欲望,包括出家,也希望庙宇越盖越大,甚至超负荷,贷款来盖。导致佛教和经济越来越挂钩,这已经慢慢偏离了道的根本了。因为道是要归于心神的清净。


我用口味来比喻。世俗人吃的,要追求越吃越好,口味越来越重。所以人的吃的欲望永远无法满足。为了满足吃和住的欲望,开始了大面积的造恶业,赚非分钱财、杀生。发展人的欲望,是一条不归路。


那佛教怎么办呢?佛教的方法,就是告诉人舌根要清净,吃的很简单,很粗糙,普通五谷都能得健康。当人的舌根清净时,人可以减少非常多的恶业。同时人不需要那么多的精力,就为了满足自己的口欲。

 

再比如身根清净的问题。人一味地享受,吃的脏,只会让身根更污染。身根一污染,人就要花大批的精力和财力去照顾他。身根脏臭的人,身体有臭味,就会花很多时间去打扮身体,洗澡,甚至用很漂亮的衣服。


身根脏了,就导致人体力下降,免疫力下降,花很多财力去吃药,住的要追求高档,甚至产生洁癖,力气不足,再也无法适应普通的交通工具。对交通工具的要求也越来越高,硬座的火车就承受不了,就要软卧,或者飞机,或者购买更高级的车。然后我们就认为,这个是有福报的表现。


按照佛法来讲,这个是人类身根下劣啦。说实话,比起毛泽东时代,这代人脸上的红润少了,力气也少了,精神也不比他们。倒是疾病增多了,而且对环境越来越挑剔了。动不动就要杀菌消毒,医院总是人满为患。为什么?

 


我组织多次去五台山走五个台,走三天一百多公里。我发现那些福报太大,钱财过多的人,走不动。我就开玩笑地说,你看,都被自己的福报害了吧。


你有好车,却没有好腿脚,有好吃的,却没好胃口,有好房,却没有好睡眠。有些人一换个环境,根本就睡不着。这就是身根下劣。城市人的福报,把健步如飞的腿脚换成车,把好胃口换成冰箱,把好睡眠换成床。


这一块,佛教一定要宣传起来。我发现香客对住宿的地方,越来越挑剔,要求越来越高。要有独立卫生间,床铺要很干净,被子要经常换。很奇怪,我们很害怕被传染。为什么你那么容易被传染?因为身根下劣了。


我们都认为最大的疾病来在外面,却不知道,真正的疾病,是来自嘴巴吃的肉,和鱼,以及不干净的东西。这些是直接污染人的身体内部,而外在的环境,只能污染身体外部而已。


如果真要修道,最起码的一条,食清净食。人的身体清净了,欲望就少了,你根本不要求那么多东西。就有很多时间来修行,学佛了。身体清净后,对环境的要求也不会很高,也没有洁癖。


比如睡觉来讲,最好的床铺是硬硬的木板床,人在硬的木板床上,体内的气就不会被堵住。一直睡的太柔软,弹簧床,会影响人的骨骼发育。椅子也要硬的,人做沙发椅,很软的坐久了,气都堵住了。


现在人为什么那么多的气血淤堵,跟睡的太柔软,以及坐的太柔软有关。这一点估计很少人去提。你看老一辈子的床都是木板的,最好的。睡的姿势最好是佛陀的吉祥卧。向右侧身,右手枕头,左手放在左侧腿上。这个姿势叫吉祥卧。这是最好的睡的姿势。其它姿势都不行。

 

要修道,要把欲望降低,慢慢地回归来。这时多念经就显得很重要了。经文有加持力,能让色身清净。要达到人心清净,天地自归宁。这个是很不容易的。


古人讲,安贫乐道。其实是很高的境界。一个人耐得住清贫,因为他心中有道。永嘉证道歌说的,穷释子,口称贫,实则身贫道不贫。身上穿的百衲衣,心里却怀无价珍。我们一直奔波在外头,因为没有道,所以才会追求外在的物质。 


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

 


设计思维中的十大黄金法则——良好原则在为功能设计系​​统奠定坚实基础的过程中的重要性

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

首先,在这10条原则之上,我只想说对我来说最有帮助的习惯是不断尝试将简单性放在我的选择中,并且永远不要停止学习并发现最适合我的新想法。

但是现在这里是我设计思维中的十条黄金法则:

1)要谦虚

不要认为自己是个天才。这是第一个要避免的大错误。把你的自我放在一边,让你身边的每个人都参与其中。聆听其他人的意见,与您的意见进行比较,并获得新的和不同的解决方案。

2)相互信任和尊重

花点时间了解您正在与之合作的团队及其行为。请注意,整个团队为表格带来了独特的技能。这是建立良好工作关系并建立信任和尊重的坚实基础的良好开端。这是推动团队取得令人敬畏成果的最重要规则之一。

3)用户先到先得

用同理心思考它是非常重要的。设计过程中的良好用户体验使用户能够充分利用产品,提高客户满意度。重要的是要理解并牢记UX设计始终关注客户的情绪以及如何吸引他们的注意力。因此,抓住执行积极和令人印象深刻的UX设计体验的基本方面是至关重要的。此外,在开始使用UI之前,构建一个包含许多正确策略(如研究,信息架构,分析数据和可视化设计)的良好UX基础架构总是更好。最终目标应始终是帮助人们享受愉快的用户体验。

4)打破挑战

通过许多小任务,可以轻松分析和定义每个问题的关键设计元素。这将有助于提出一种最有效且最可靠的设计解决方案。在您确切知道设计的外观之前,切勿开始设计。考虑到这一过程,最终设计始终非常接近原始想法。

5)心理清晰度和焦点。你知道你要去哪里吗?

有时候喝一杯咖啡然后出去散散步是非常好的。在办公桌后面停留太多并不总是很有效率。将注意力从复杂的环境中转移到其他事物上是一种很好的做法,并试图消除思路中的混乱。这是一个很好的练习时间,以获得一些新鲜空气,让你的头脑清醒。一个混乱的头脑会对你的选择产生负面影响,并会带来糟糕的结果。

6)不断重新考虑设计

重新考虑产品,功能和整个架构,这是产品设计中另一个重要的规则,以便创建一个表演产品。删除已经变得不必要的东西而不是总是添加到它(功能随着时间的推移将创建更糟糕的用户体验)。在不断重新评估的整个过程中,将更容易找出哪些领域需要更多的工作和什么不需要。

7)永远不要害怕丢弃设计思路和重构新的解决方案

灵活的思维将有助于实现重构和重新设计过程。在创建新产品的整个过程中,很容易遇到以前不存在的任务。通过牢记整体功能,重新考虑和重构整个结构(或其中很大一部分)是非常重要的。例如,每次向项目添加新任务时都应该这样做。通过这样做,可以更容易地用一个更好的解决方案一次解决新旧问题。因此,更改可以将想法转化为可以创建更好,更简单的用户体验的解决方案。

8)好的设计是自我解释的

每个设计师都应该记住,不需要解释好的设计。有时,最佳和更直观的用户体验具有简单的设计解决方案。用户应该本能地知道如何与产品进行交互。因此,在推动像素之前,必须牢记这一概念。如果一个设计,即使是美丽的不是自我解释,需要重构,考虑重新开始一切。

9)要有创新精神

通常,第一种解决方案并不总是最好的解决方案。允许工作流中的空间发现并迭代您的设计。开箱即用,让自己远离舒适区。即使在第一眼看到它们也无法发展,创造颠覆性的体验。多个设计草图可以相互迭代或合并,以创建最终解决方案,更好地实现项目的最终目标。

10)少即是多

保持尽可能简单是最难应用的行为模式,但一旦它被钉住,将更容易回头没有任何遗憾。听起来很简单,主要是与你自己的一致性和耐心。


结论

每个设计师都应该拥有自己的一套黄金法则,以形成良好的产品设计基础。这肯定有助于更好地处理决策并找到正确的总体方向。

总而言之,我想与大家分享我前一段时间遇到的一个非常有用的网页,我经常检查它,我觉得它非常好,鼓舞人心。有时读这个页面让我的思绪充满动力。

这里是:

https://principles.design

感谢您阅读本文,我希望它对您们中的某些人有任何帮助和灵感。

祝你有美好的一天!


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

 

日历

链接

个人资料

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

存档