首页

XJ项目关于新增保险时输入各类保险金额后计算总和插入到总费用后查询显示

seo达人

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

第一种情况
新增框内既有各类保险金额,也有保险总费用。当输入一类保险金额时,保险总费用自动累加显示,点击保存之后将所有数据插入数据库。然后查询查询显示在结果列表即可。如下图:

第一种情况可以在前端js中写一个计费方法。获取每个不同类的保险金额,值取到之后在点击保存之前将变量中的值赋值给保险总费用,然后点击保存。代码如下(js中计费的方法写在代码一开始中的method{}中,也就是新增,查询,删除,修改下方即可):

//计费方法
Vehicle_sum:function(){
var sum  = /^[0-9]\d{0,5}$/;
var trafficCompulsoryInsuranceCost=$("#vehicleInsurance_add_trafficCompulsoryInsuranceCost").textbox('getValue');
trafficCompulsoryInsuranceCost=parseInt(trafficCompulsoryInsuranceCost);
if(!trafficCompulsoryInsuranceCost == ''){
if(!sum.test(trafficCompulsoryInsuranceCost)){
Message.error("请输入正确的保险!");
return;
}
}
var commercialInsuranceCost=$("#vehicleInsurance_add_commercialInsuranceCost").textbox('getValue');
commercialInsuranceCost=parseInt(commercialInsuranceCost);
if(!commercialInsuranceCost == ''){
if(!sum.test(commercialInsuranceCost)){
Message.error("请输入正确的保险!");
return;
}
}
var carrierInsuranceCost=$("#vehicleInsurance_add_carrierInsuranceCost").textbox('getValue');
carrierInsuranceCost=parseInt(carrierInsuranceCost);
if(!carrierInsuranceCost == ''){
if(!sum.test(carrierInsuranceCost)){
Message.error("请输入正确的保险!");
return;
}
}
var vehicleAndVesselTaxCost=$("#vehicleInsurance_add_vehicleAndVesselTaxCost").textbox('getValue');
vehicleAndVesselTaxCost=parseInt(vehicleAndVesselTaxCost);
if(!vehicleAndVesselTaxCost == ''){
if(!sum.test(vehicleAndVesselTaxCost)){
Message.error("请输入正确的保险!");
return;
}
}
var total = trafficCompulsoryInsuranceCost+commercialInsuranceCost+carrierInsuranceCost+vehicleAndVesselTaxCost;
$("#vehicleInsurance_add_totalCost").textbox("setValue",total);
},

第二种情况
新增的表单中只有各种类别的保险费用,并没有保险费用合计的字段。意思是在新增时只输入各种类别的保险金额,后台拿到各种类型的保险金额之后,在后台将各类保险金额累加,用set方法给totalcost(保险总费用)赋值,插入数据库中。查询是从数据库查询显示在结果列表即可。如下图


第二种情况可以在后台中写一个计费的累加方法。用BigDecimal的add方法进行累加。首先实例化一个BigDecimal的对象totalCost,赋一个初始值为0,然后用保险的对象insurance的get方法获取各种保险的金额,然后用totalCost.add方法将获取每个不同类的保险金额一次加到totalCost中,然后将totalCost用insurance的set方法set到保险总费用的字段中,然后进行插入操作。代码如下(后台中计费的方法写在Service中的新增方法中):

/**
* 车辆保险新增
* 陈通
* @param insurance
* @param request
* @return
* @throws IOException
*/
public Result insertVehicleInsurance(VehicleInsurance insurance,HttpServletRequest request) throws IOException{
Result result = Result.getInstance();
insurance.setKeyID(IDGenerator.uuid());
//计费方法开始
BigDecimal totalCost = new BigDecimal("0");
        if(insurance.getTrafficCompulsoryInsuranceCost()!=null){
        totalCost=totalCost.add(insurance.getTrafficCompulsoryInsuranceCost());
        }
        if(insurance.getCommercialInsuranceCost()!=null){
        totalCost=totalCost.add(insurance.getCommercialInsuranceCost());
        }
        if(insurance.getCarrierInsuranceCost()!=null){
        totalCost=totalCost.add(insurance.getCarrierInsuranceCost());
        }
        if(insurance.getVehicleAndVesselTaxCost()!=null){
        totalCost=totalCost.add(insurance.getVehicleAndVesselTaxCost());
        }
        insurance.setTotalCost(totalCost);
        //计费方法结束
//插入车辆保险信息,返回受影响的行数
int count=vehicleInsuranceDao.insertVehicleInsurance(insurance);
//插入附件
sysFileService.saveFile(insurance.getKeyID(), Enums.FILE_CATALOG.INSURANCEFILE.getValue(), request);
if (count>0) {
result.setFlag(true);
result.setMessage("车辆保险新增成功!");
}else{
result.setFlag(false);
result.setMessage("车辆保险新增失败!");
}
return result;
}

以上是两种计费方法(前台和后台)。
--------------------- 
作者:ct_?? 
来源:CSDN 
原文:https://blog.csdn.net/weixin_40418595/article/details/94736305 
版权声明:本文为博主原创文章,转载请附上博文链接!

2020 年值得关注的 10 个UI 设计趋势

雪涛

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

创意动画

1. 品牌加载

公众喜欢有趣,可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号,融合到产品设计中,从而提升视觉的一致性,创造富有特有性格的产品界面。

△ Netflix & Airbnb

2. 图标动画

微交互是建立在移动端上微妙视觉效果的小动画,而图标动画是微交互其中的一种。它的目的是吸引用户,让用户感觉顺畅、愉悦。

最近,让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面,这些由产品所包含的一个个小细节,创造出了新颖而有趣的设计。

△ Facebook Website

留白分隔

在 UI 界面中,最常见的分隔方式是用细线对模块进行划分,但随着设计重心趋向简约,注重内容本身,传统的分隔线方式就略显多余。

根据格式塔亲密原则,通过留白控制间距大小,可以清晰地划分模块层级,同时界面看起来也更加透气、富有张力。可以看到 QQ、飞聊、Gmail、Messenger 等应用都采用了留白分隔。

△ Gmail & Messenger

融入插图

1. 品牌形象插画

一个好的插画作品可以为产品带来极佳的辨识度。Snapchat 的页面用了很多情感化设计和品牌形象,包括开启通知引导动画、查找好友 landing page、下拉刷新页、照片回忆等等。

从品牌的个性化设计,寻找一种基于插画的设计语言,把产品塑造成一个高辨识度的 ID。

△ Snapchat

2. 3D插画

随着软件技术的提升,3D 插画在这几年中大受欢迎,很多应用都使用 3D 渲染产品,如:星巴克、Keep、毒App 等等,因为它真实立体,有着更高的转化率。

△ Starbucks by Wojciech

△ Keep & 毒

圆角卡片

圆角代表友好、亲和力,而卡片模块化的布局更为清晰、有效、整洁。

在上周的微信改版《微信 7.0.5 发布:9个细节提升体验》的文章中,我讲到了订阅号的推送文章去掉了标题栏的背景,卡片变得更加简洁。另外,公众号详情页由原先的列表式,改成了圆角卡片式,弹窗也由直角改成圆角。

△ Broadcasting & 微信

视频背景

长期以来,图像在视觉设计中起着至关重要的作用,而视频能够更直观的吸引用户,传达主要的思想。

在移动端中,视频主要用于登录页背景,一般可以是几秒钟的循环剪辑视频,它可以带来一种身临其境的体验感受。

△ Lyft & Nike

轻提示

Toast 是一种轻量级的提示,作为用户操作后的反馈。UI 形态上从居中浮层,慢慢趋向于底部通栏样式。这样设计的好处是不会挡住当前界面的内容。

举一个反例,iOS 的调整音量提示,大范围的遮住了界面,特别是对正在玩游戏的用户非常不友好,直到 iOS 13 这个设计才被修改。

△ Google Earth & Spotify

色彩平铺

随着扁平化设计和 Material Design 进一步占据主流趋势,简约的界面,明亮,大胆的色彩一直都处于增长趋势。色彩平铺已经成为清新、酷炫、数字时代的代名词。

△ Snapchat & Spotify

注重内容

重内容、轻 UI,把注意力引导在重要内容和功能上。像 Facebook、Instagram 这种以图片社交为主的 App 都有一个特点,就是文字都是黑白灰,将彩色交给图片去传达,让用户关注内容即可。

△ Facebook for Android

AR

增强现实的技术,已经出现在很多 Web、App 等领域中。许多平台开发者也将增强现实技术纳入其开发工具里面,可预期到这种类型的 App 将会越来越多。

1. 地图导视界面

地图+AR,让你不再盯着二维平面上那个蓝色的点,而是现实世界中的箭头告诉你在哪个路口转向。

△ Google Map

2. 表情贴纸

Instagram、Snapchat、Messenger 等平台可用 AR 滤镜来创作,表情贴纸可以帮助用户更直白有效地自我表达、获取注意力。

△ Spark AR

车载系统界面

随着 5G、车联网、人工智能、自动驾驶的发展,车载界面也越来越受重视了。

在今年的 Google I/O 开发者大会上,针对车载系统 Android Auto,推出了新的设计语言,它有着更好的可拓展性。在 UI 上,完全重新设计了导航栏,能够更轻松地访问应用、通知,和你的 Google 智能助理,最大限度的帮助驾驶者减少分心,将注意力集中在道路上。

△ Android Auto UI

此外,还开发了新的系统小部件,在使用地图进行导航时,仍然可以一键控制音乐应用,或者正在进行的电话,同时在屏幕上保持地图的完整视图。

总结

UI 设计的趋势除了侧重内容和情感之外,还会根据不同设备载体、新的技术(3D、AR)而变化。但归根结底还是以人为本,借用 Adobe 设计副总裁 Jamie Myrold 的一句话:如今设计师要思考的,绝不仅仅是设计一款 App、网站或设计工具。我们要思考的是人类的需求,用户的需求,打造真正人性化,多元化与包容性的设计。

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


产品设计之「取消按钮」的使用详解 | 细节分析

分享达人



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

通过对「取消按钮」的分析,指导各位正确的进行对于「按钮」的设计。


按钮,无论是在 Web 还是 App 上都被广泛地使用,而很少有设计师会注意到按钮当中的细节,导致在设计过程中出现一些低级的错误,使得用户在完成任务的过程中产生阻碍,无法顺利达成目的。


在许多优秀的产品中,关于按钮的设计已经有了一套相应的规范去执行。作为设计师,应该总结这些规范,并产出一套适用于自家产品的设计规则。这也是我写「按钮规范」系列文章的目的。


今天主要先与各位聊聊「取消按钮」的设计思路。


关于「取消」,大多数人对其理解还停留在 PC 端,认为「取消」的目的就是让用户停止操作上的流程。但时至今日,「取消按钮」的设计已经有许多解法与思路,如果不仔细研究与分析,可能会忽略一些用户行为上的细节。


所以我们从下面三个大点来聊聊「取消按钮」的设计:

  1. 按钮中的「召唤行为」(理清按钮设计的概念)

  2. 其背后的控制权(关于按钮的权重信息)

  3. 「取消按钮」的正确解法(重点)



按钮中的「召唤行为」


通常,我们在产品中会为了达成某种指标,需要在界面上引导用户去完成我们希望其完成的操作。且这类操作是可以达成某种目的的,我们把这类操作称为「召唤行为」,即从元素的角度引导用户完成任务。


这类「召唤行为」最常出现的,是在按钮设计的过程中。


用户如何将元素理解为按钮?就是通过对形状和颜色的控制,使该元素看起来像一个按钮。



它唯一的作用就是让用户点击,并且是主动让用户点击

我们经常在各类设计中见到这样的按钮设计,或许还有更多样式,如:



它们的目的一致,都是召唤用户进行点击,至于类型的选择一般根据功能界面的上下文情况进行判断。


其重要程度也是以此顺序排列:凸起 > 扁平 > 边框 > 文本。


这类设计的结果就是:无需让用户思考要点哪里,而是直接判断下一步是否进行。帮助用户简化一个思考点。


注:因为判断是否进行的操作还取决于功能本身以及文案的提示,与我们今天要聊的不是一回事。所以我们跳过这块,直接聊「召唤行为」与「取消按钮」的关系。


这段内容各位只要记住:按钮的行进与回退,基本遵循「召唤行为」的思路来设计。


这个概念知道了,我们就可以对后面的内容继续进行拆解了。



背后的控制权


接下来我们从多个角度来挖一下「取消按钮」的设计,分析其不同地位。


a. 安全性后退


「取消」在多数情况下,意为安全性地后退,并将界面恢复到原有的内容上,不对界面与功能本身造成破坏,防止对系统进行不必要地更改的「安全措施」。


所以正常来说,「取消按钮」不是「召唤行为」。以至于通常在设计上会被弱化,以表示该按钮在功能的流程中,不是主要的,且是提供给用户作为回退余地的操作。


如:



在这张图里,「登录」是「召唤行为」,所以突出显示。根据风格定义,用了扁平按钮。而取消在这个场景里属于「安全性后退」的操作,于是将其弱化。


这是多数产品采用的设计方式。


比如美团的这个页面:



产品希望用户登录,就会强化「登录」行为的按钮,弱化「回退」行为的按钮。


同样,我们在微信朋友圈的设计里也能见到这样的设计:



我们总是希望用户持续操作下去,但也要给用户提供回退的行为,所以在这些设计中,「取消按钮」会被弱化,「行进按钮」会被强化,因为「取消按钮」在这里不是产品人员期望的「召唤行为」。


这是一直以来的设计共识,但如今也发生了些许变化。「取消按钮」也开始具备「召唤行为」的属性。


b. 强化「取消按钮」


当我们不希望用户退出某个界面,或停止某个流程时,往往会选择将「取消按钮」强化。


如:



或:



通过对字体的加粗,以暗示用户不要轻易退出。在这个流程里,「取消按钮」具备了「召唤行为」属性。


也有产品通过改变「取消按钮」的文案,让其具备「召唤行为」的属性,使得用户在此过程中轻易不要退出该流程:



这里的「继续选座」就是「取消」,因为这里的「取消」成了「召唤行为」,所以通过改变文案的方式,确保用户留下来继续进行流程中的任务。


但是不可取的是,这里的「返回」反而给了用户一种需要思考的压力。返回?是留在这里,还是退出去?思考几秒后,反应过来,是退出去。这样的文案与只有在看到「继续选座」后进行对比,才能反应过来具体是什么意思,除非是用户具备操作习惯,知道「右边」是「行进」操作,才能很快理解。(当然还有个问题,我们在第三各模块来说明)


但是多数用户还是得思考一下,所以要改,最好两者文案都能改了,否则思考的「停顿」会让用户产生厌恶感。


且在一些产品界面里,为了避免用户在流程中终止行为,甚至会转移「取消」与「行进」两者的位置,如:



之前截图了某个产品的界面,写文这天发现已经改回来,这里就没放了。


各位谨记,最好不要这样进行设计,因为用户在 App 的操作上已经习惯左边取消,右边行进,调换位置虽然能暂时解决用户的退出行为,但容易产生误操作,与用户的期望不同,导致在产品体验上会被用户排斥。


所以到这里,先给一个结论,即在 App 的设计上,行进操作在右,回退操作在左,召唤属性根据场景对按钮做突出处理。


但是「取消按钮」真的应该具备召唤属性么?不着急,我们第三模块再细聊。下面我们先聊聊 Web 与 App 的之间的差异。


c. Web 与 App 的位置差异


我们现在见到越来越多的 Web 端产品,也开始遵循 App 产品的设计,把「取消按钮」放在左边,「召唤行为」按钮放在右边。


但在早期,Web 的「取消按钮」基本是放在右边,原因是鼠标的移动路径是根据眼动规则来,我们的视线会首先与文案聚焦到「召唤行为」的按钮上,也就是左边,这时候鼠标轻而易举地随之而来。


而手指行为的操作,会以右为前进导向,且右手手势因为便捷性,也会以右为确认操作。否则单手持机,且行进路径长的话,用户想进行确认操作会相对比较吃力。



这就是 Web 与 App 在按钮位置上的主要区别。


那会有同学问到说 Web 的「取消」到底是放在左边还是右边?这里我说点自己的想法。


如果根据眼动规则与鼠标的操作模式来说,Web 「取消按钮」当然是放在右边更为合适。但如今人们已经习惯了移动产品的「右行进,左取消」属性,且在界面上的视觉终点一般是在右边,能引导用户进行召唤行为。


但这不具备指导性原则,如果要拆开说,里面还有很多说法。


比如 windows 和 macOS 的设计规范里「取消按钮」的位置完全是相反的。win 的取消在右,macOS 的取消在左。



两套体系的按钮位置相互矛盾。这件事本身也说明,只要你在你的 Web 产品里规范好自己的设计体系,就没有对错之分。不要一会儿这个「取消」在左边,一会儿那个「取消」又在右边,给用户造成认知障碍即可。


但是!我更推崇 macOS 的设计规范。原因在于成熟度与一致性。


主观因素:众所周知,苹果是更擅长做设计的公司,体验过 Mac 的朋友应该能理解我说的这句话。一般来说,我只听过从 Win 切换到 Mac 的,没有说从 Mac 切换到 Win 的,除了少部分因为工作需求需要同步使用的。


客观因素:移动产品的普及,已经有相当成熟的设计体系支持行进按钮右侧化设计,统一 Web 或 PC 产品只会让用户的操作行为更方便。


这就是我本小节想聊的,关于 Web 与 App 按钮设计的差异。



「取消按钮」的正确解法


我相信,只要是平时稍微有认真观察的同学,都能知道我上述聊的内容。我个人也不认为这些内容具备任何需要总结的价值。但是如果不写出来,就没办法说明我接下来要聊的内容,也是我这篇文章的重点部分。


通过上述内容,我以不同类型的按钮案例来解释「取消按钮」的控制权。各位可以看出,即使是不同类型的「取消按钮」,在权重上的道理也都是一样的。


但我上面举的所有产品功能的例子,都不是最佳设计方案,包括微信。


那如何设计才是最佳方式呢?取消按钮真的具备召唤行为?


a. 界面层与弹框层


其实严谨点来说,界面层的「取消按钮」与弹框层的「取消按钮」的意义是不同的。


虽然都是安全性后退,但是前者多了一层含义:放弃属性。


还是微信朋友圈的界面:



这里的「取消按钮」有两个状态,一是用户刚点进来,无任何操作,点击取消,解散该页面;二是进来之后,附带操作行为,这时候点击取消,不仅仅是解散当前页面,还包括「放弃当前编辑的状态」。


所以会弹出第二层弹窗:



这时候无论点击「保留」还是「不保留」都是取消,退出当前编辑页面,不对系统产生变更行为,但都属于放弃了当前操作。

无非就是微信通过加粗「保留」来告诉用户,这里的召唤行为是它而已。


所以这层「取消」的含义,不仅仅是取消,还多了一步是否把你放弃的内容保留下来的逻辑。


因此在这层含义上,「取消按钮」也需要特殊处理。


如果说微信这里的「取消按钮」在设计上没有突出其特殊性,那 Twitter 同样的例子,就比微信高明很多:



同样是发布行为,Twitter 在「取消按钮」上选用了品牌色。因为在其编辑状态下点击取消,会出现与微信同样的情况:




而 Twitter 的高明之处不仅仅在其对于「取消按钮」的样式处理,还在于其对是否「保留」做了明确的设计区分:微信的保留等于 Twitter 的保存草稿,不保留等于删除。而在通用型设计规范里,删除内容在样式上应该区别于发布以及取消。


更甚者是,其弹出的这个弹框中,还保留了真正意义上的「取消」,即解散行为。在 Twitter 的这个设计上,两个取消虽然都叫取消,但是通过颜色进行区分,来表示它们之间在逻辑上的差异,这才是我说的高明之处 —— 对每个按钮的处理都恰到好处。


类似的还有微博,但是微博对于「取消按钮」的类型差异没有做出区分,原因在于它为了弱化界面层的取消,与弹框层的取消样式保持了一致。



虽然没什么太大问题,但从严格的逻辑上来说,这两者取消是存在歧义的。只是用户已经习惯且理解了,所以没要造成使用的负担。


微信的弹框虽然避免了这层歧义,但在操作上还是不够直观,我每次发微信朋友圈,点取消弹出「保留」与「不保留」我都要停顿一下谨慎地进行选择,生怕自己点错。


当然,这里面还有关于颜色的说法。


这时候再对比 Twitter 的界面就能看出设计师之间的差距了。


b. 弹框层「取消」颜色的差异


上面提到的许多例子中,还存在一个类似的问题:它们大多选用 iOS 自带的弹框直接做为操作对象。


我始终觉得在 iOS 提供的弹框中,两个操作的按钮颜色保持一致是不对的。


粗细有时候很难被直观感受,而颜色可以在第一时间被感知。


比如前面提到的这个案例:



理想情况下,即使用户知道右边是行进,左边是取消,但弹出这个弹框的时候,不免还是需要再次阅读一遍进行确认。


但如果改个颜色,好像就更好理解(当然文案也是问题,但优先级弱于颜色),毕竟弹框也是设计的一部分:



需要注意的是,用户既然已经选择取消,就尽量明确的告知用户,不要为了留存而留存,以至于模糊化该弹窗的选择结果。

所以召唤行为,并不是强迫用户去做,而是遵循用户的「旨意」去提供选择。这里的「返回」才是真正的召唤行为,而「取消」并不具备召唤属性。硬生生的给「取消」附上召唤属性,只会让用户在操作时摸不着头脑。


包括下图,我常常因为在使用 App 时,弹出这样的弹框,而不能在第一时间进行正确的点击,选择退出当前的 App。



这样例子还有很多。


但是我觉得做得好的,应该是这样的:



或:



这就是刻板印象造成的结果。我们应该学会适当地使用控件,并根据自己的产品对其进行优化。而不是一味跟风。


综上所述:界面层的取消,为了表示其作用性的不同,且界面元素众多,突出颜色是没问题的;但弹框层的取消与确认在颜色上没做区分,直接用不太明显的粗细效果让用户聚焦于这两个内容的选择上,其实是不友好的设计。


如果对 iOS 设计规范有足够的了解的同学就能知道:它们在弹框控件上给出的两个选择都不是真正意义上的召唤行为按钮,只是常规内容,且更适用于产品开发,而不是设计指导。


如果你仔细观察 macOS 的设计,就能发现他们为具备召唤行为的按钮位置与颜色都做了特殊处理,并不是简单的同色系,或用粗细表示。如图:



虽然用 macOS 来反驳 iOS 似乎不太合理,但我只是想说明在设计结果上,我们应该有自己的思考。


就这个问题,我在 Twitter 上咨询了前 Apple,后创办了 UXM 的产品设计师 Anthony。原因是,他曾经也就「取消按钮」的颜色提出过一些个人看法。


在我说了这些内容之后,他跟我说的第一句话是:

Hi Dai — While Apple is very good at design, they are not perfect.(Apple 非常擅长设计,但它们并不完美。) 

接着他继续说道:你这套理论非常棒,所以你完全可以按它去给自己的产品构建一套设计规范,并不一定要遵循 Apple。


借着这个机会,我还跟他聊了许多其他内容。而这件事本身再一次验证了我的想法:越牛逼的人越谦虚,且平易近人。


哦,不是,跑题了,应该是:不存在完美的设计规范,设计师在成长过程中并不一定要循规蹈矩,受到规则的限制,认为设计就该如此。而是学会独立思考,突破屏障,去挖掘更深层次的内容。


看完这篇文章,再去翻一翻 Google Material Design Guidelines,就会有一种「哇哦!原来如此!」的感触了。



小结


所以我这篇文章的内容结论是:

  1. 位置固定,左回退,右行进;

  2. 颜色区分,左浅色,右深色;

  3. 召唤行为不是用户想做的事,而是我们应该要让用户做的事,但不是强迫,所以正常情况下,「取消按钮」通常不具备召唤属性。


可能有人会觉得,这么一个小问题,不至于用这么长一篇文章来说明,不过人么,就是存在这样那样的区别。我认为需要就可以了。


本来这篇文章还有一段关于「手势按钮尺寸」的内容,不过到目前为止,文章内容太长了,所以我暂时去掉了,会在之后的文章里分享给大家。


当然,到此为止,我聊的内容基本适用于通用场景,且适用于大部分的产品设计,但在一些特殊场景下的按钮位置、颜色,也会有不同设计方式,这就要根据具体问题来具体分析。


我这里只是把「取消按钮」的设计差异、细节提供给大家,以便帮助各位在工作中有更深入的思考,而不是想当然的说就是放左边或右边,或者就应该是什么颜色等等。包括对待其他内容也一样。

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


如何用扭曲工具快速强化作品设计感?

雪涛

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

我们在日常工作中几乎离不开扭曲和变形工具,它可以帮助一个设计师校正一个元素的透视关系,或者为设计好的标志贴效果图。除了这些日常的应用以外,扭曲工具还有哪些有趣的应用场景呢?我们今天的内容就会帮你找到答案。

风格特点

从宏观的角度来讲,这种扭曲的手法,它设计出的版面变化方式是非常多的,我们将比较熟悉的文字进行扭曲,是可以呈现出其它的表现形式的。

比如说,最左侧这个海报,我们不光能看出来它的文字信息,还具有楼梯的印象;中间的这个海报,它把文字变换成了晾衣绳的感觉;我们再看最右侧的这个海报,很明显它就是一把扇子对吧。

气质分析

这种表现形式它是比较抽象的,再加上它能够变异成其它的形状,所以,这种版面风格也会传递出一种趣味感。

原理解析

我们在现实生活当中扭曲的图像,它属于一种光学的现象,比方说哈哈镜,它就是利用了这个原理,表面凹凸不平的镜面,反映出人像或者是物体的扭曲面貌,进而产生了幽默感。

生活当中的望远镜放大镜显微镜,也都是利用了这种凹凸的透镜原理来实现的。

我们人类还处于原始的时期,就已经开始运用绘画来记录身边的事物,在经过不断的发展,艺术家它们的绘画技艺也变得越来越逼真,甚至达到了和照片难辨真假的程度。当写实的风格几乎走到的时候,艺术家为了寻找新的艺术发展方向,画风就开始变得扭曲起来,变得抽象起来,从而产生了超现实的艺术流派。

我们将本来是圆形的西瓜和篮球限定在一个圆角矩形的这种做法,也是一种抽象的思维方式。

技巧分类

在这里我们为大家划分了五种常用的表现技巧,这些都是我们日常工作当中经常用到的一个扭曲技巧,我们分别介绍给大家。首先第一个就是液化这个工具,液化这个滤镜应该算是非专业人员都会知道的美颜功能,这个 ps 滤镜被用在了各种美艳的 app 里,这种夸张的艺术创作在漫画里面是经常出现的。

我们来通过网格感受一下液化命令到底是出现了哪些变化,液化的好处就是能够根据实际情况手动调节画面的扭曲幅度。它的自由度比较高,但是它的缺点也是自由度比较高,所以难度会比较大一些。

在设计的过程当中,也可以运用这个功能来刻画主体,产生一种遮挡的效果。我们也可以通过扭曲让文字的部分结构变得不容易认读,这就能达到设置悬念的作用,我们也可以通过其它不同幅度的扭曲变形,达到自己想要的状态。我们看上图是日本TDC 的获奖作品之一,作者是村上雅士,它运用的就是液化功能,将原本很平淡的版面,通过扭曲的变化,达到了吸引眼球的艺术效果。

这个是台湾设计师聂永真,他为2017年金点概念设计奖制作的主视觉海报,这个海报它以不规则的曲线呈现,并且搭上充满想象的文案,有耳目一新的形象。

下面我们来看一下球面化的工具,我们大家都知道,杯子中的水具有扭曲光线的作用,我们插到水里的这个笔它就会产生扭曲的现象,这个就是光的折射。我们在设计当中进行简单的图像合成时,也需要遵守这个物理定律。

我们这里通过网格来看一下这种形态的具体表现,顾名思义球面化的命令就是能够将选区内的画面进行球面的扭曲。它适合用在图像合成或者是还原真实性的场景里面,我们通过调整不同的幅度,产生不同的鱼眼效果。

除了基本的球面化扭曲,我们这个选择里还提供了水平和垂直的变化,形成类似圆柱体的表面效果。我们在产品贴图图像和形象的领域是经常用到这个东西的,我们调整不同的扭曲幅度,能够完美的让图像贴合到柱状的弧形表面上。

这里给大家准备了一个案例,我们给它添加一个气泡,然后再产生一些光影的效果,如果说我想让这个画面变得更真实一些,我们在设计的时候就要考虑到物理定律,这个时候就可以用球面化的命令。我们让圆形下面的文字产生光线折射的感觉,调节选项中的滑块,找到那个最接近真实的反射效果。

这个案例是我们研习设之前教程里提供的一个案例,我们看图中这个玻璃球和文字的衔接部分,用的就是球面化的效果。我们只看右侧这个对比图,你可以明显感觉出来,底部这个经过修改后的细节是更真实的,文字经过玻璃的反射,它一定会产生扭曲的视觉印象。

下一个给大家介绍一下极坐标,极坐标这个词听上去会比较陌生一些,但是你会非常熟悉,比如说这个启动画面,这个是PS cc版本的启动插图,它就是运用极坐标的命令实现的效果。除了能够实现从内部向外旋转的这个洞穴效果,还可以表现成类似于球体的效果。

我们继续通过网格来看一下它的扭曲原理,这里给大家做了一个细节的变化,是为了方便大家观察它的扭曲方向,我们给这个网格添加了颜色,顶部是蓝色,底部是红色,接下来我们为它执行极坐标的命令。

执行极坐标这个命令后可以很明显地看出,原来底部的网格内容被扭曲到了圆形的外侧,就是红色部分,变成了这个球的外侧,内部这个蓝色,就是之前顶部的蓝色部分。

它也提供了另一个额外的扭曲选项,扭曲后的效果就是这样的,这个效果我们不常用。

我们选择这张图来作为演示,让大家明白极坐标是什么原理,我们为它添加极坐标的效果,这个时候需要确定什么?就是图像的朝向问题,因为这个直接决定了最终的扭曲效果。

顶部的区域会在圆的内部出现,底部的区域会在圆的外部,我们根据想要达到的最终效果,来判断图像的具体朝向。这里制作了两种朝向的扭曲画面,左边的是地面在内部的球体效果,右边是地面在外部类似于洞穴效果。

我们在扭曲命令之后,需要手动将画面这个衔接部分处理掉。你可以用图章工具处理掉,这个画面就做完了。

再举一个例子,这个画面我要做的是人物在球体表面的效果,我们要考虑到方向,所以我们要将它旋转180度,然后添加极坐标命令。

使用修补工具来完成这个衔接部分,这个画面就完成了。

我们再来看下一个,下一个就是文字扭曲,也是我们这节课比较重要的一个内容。这个命令跟其它命令不同的地方就在于它不是在滤镜菜单下面,它是在文字编辑栏的右侧,在样式选择里,它提供了很多不同的扭曲方法。

这种方法相对于液化或者是自由变换更方便一些,因为它的这个可操控性很强,顶部提供了两种扭曲方向,底部选择则是调整扭曲的幅度。

这里我们简单地制作了几种文字样式,就是这个命令,它会让文字变得更接近图形化。

下一个我们来给大家介绍一下置换的扭曲风格,它的扭曲原理就是将被置换的元素,再加上需要被扭曲的元素,它们二者相结合,从而达到被置换元素一样的扭曲效果。这个话有点绕,我们通过下面的例子就明白什么是置换了。置换的幅度不同,扭曲的大小也会发生相应的变化。

比方说我们这里被置换的元素可以是任何图像,烟雾、丝绸、水波纹、液态流体或者是火焰,它们都可以当成被置换的元素。

比如说这里我们想让鸽子图案和旗帜结合,这个时候就需要用到置换的扭曲命令。首先第一步要做到的就是确定好鸽子在旗帜里的比例大小,然后要调整透视和倾斜角度来适应旗帜的表面轮廓。

最后执行置换命令,让鸽子的图像加入旗帜的扭曲轮廓,这样就形成了两者的完美结合了。界面里水平与垂直的比例,都是可以用数值来调整的。

我们再看下一个,不光是图形,文字也是一样的,添加置换命令之后,文字就会置入到了这个场景里,它的原理和之前是一模一样的。

我们再来看一下其它使用置换手法设计出来的版面,它们都是在表现原有信息的基础之上,通过置换的扭曲为版面,加入了另一种形态。左侧的飘动丝绸中间的楼梯和右侧的这个有点类似于纸张扭曲的效果,这些都是用置换这个命令来表现出来的。

案例拆解

我们来看一下,同样都是这个扭曲,用扭曲的这个思维,它设计出来的画面应该是什么样的。这个版面里文字信息使用的就是扭曲的变换形式,主体文字周围围绕着不规则的扭曲文字,增加主体形象的形式感。这种手法虽然会减弱文字的识别性,但换来的是视觉吸引力。如果想让选择的文字扭曲的话,这个文字最好是比较大的标题性文字。如果是小文字扭曲之后,它的识别性基本就没有了。

我们再来看下一个版面,大家应该能看出来,它就是运用了我们前面讲到的液化扭曲命令,思路就是重复的文字,它能起到强调作用。但有的时候你每一个细节都完全一样,它就会有单调的感觉,我们通过液化工具在对角线上进行扭曲,这样就会产生变化。

我们再来看下一个,这个效果是比较有趣的,它是用什么方式制作的?它是拍摄的。这个设计有的时候就像拍电影一样,并不是所有场景都必须依赖电脑,有的时候实景拍摄也能够带来更好的真实感。

这个版面用的是置换手法,由于我们没有办法找到相同的幕布,这里我们找了一个类似的作为载体,我们在上方加入文字信息,然后用置换命令,这个就变成了跟海报类似的感觉了。

这个版面和上一个有一些类似,但是不同的是它没有背景,它没有载体。这是因为扭曲的材质背景直接镶嵌在文字的轮廓里了。给大家举一个例子,很简单的思路,我们选择一个具有扭曲表面的背景图片,然后将文字放到这个图片上方,应用置换命令,采用多重曝光的手法。我们将这个材质镶嵌到文字里面就完成了,这样就看不到材质了。

案例演示

那么最后,给大家做一个案例演示,用到的就是扭曲的命令,这是一个活动展览的项目,它的主题叫流动消融。

为了达到宣传的目的,这里寻找一个能够让文案中的概念实体化的载体,就是标题,它的标题很直接了,那么提取主标题作为版面里的视觉元素,让它变得很大,成为本案的主体。然后我们将文字稍微拉长一些,这个拉长是手动拉长的,所以它会出现横粗竖细的现象,这个时候就需要修改了,调整笔画的粗细统一,去掉一些不必要的细节,这样这个主标题就刻画完成了。

然后我们绘制版面的比例关系,这一步的目的就是确定主体在版面里的大小。然后主体的这四个字就放在画面里的上部区域,底部的这个红色区域,我们来安排其它的文字信息。

接下来把其余的文字信息编排到版面的下方,我们所有文字编排好以后,最后一步,为画面添加一个水波纹的细节部分。

采用置换命令让二者结合,然后把水波纹去掉,镶嵌到文字里。

这个版面到这里就完成了,我们来看一下它实际的应用效果。

今天我们一起学习了扭曲技巧在版面里的应用,也知道了这类风格它的五种常用表现技巧,扭曲的这个版面不但可以和其它形状结合,更能为版面带来丰富的形式感,它是我们做主形象非常好用的一个手法。

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

用一篇干货帮你彻底全面掌握「投影」知识点!

雪涛

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

之前我们更新过如何做投影的文章:《投影一直做不好?看这篇文章就搞定!》,主要针对的是投影的原理进行讲解,包括如何用图层样式去做投影,怎样用工具绘制投影,这些都是我们了解投影的一个基础。教程发布之后,很多同学留言,表示没看够,希望针对其他投影形式再进行更深入的讲解,那这次我们就来满足大家要求。其实投影的设计不难,只要符合画面的光影逻辑,然后加上制作投影的方法,基本就能搞定很多基础的投影形式,话不多说,我们开始今天的教程。

其实投影在设计中的应用是非常广泛的,比如这些海报,都运用了投影的形式。

什么情况用投影

在平面设计中,除了合成设计之外,我们在什么情况下会选择用投影?

1. 增加识别性

比如,在颜色比较混乱的背景上添加文字,或者添加图片,为了区分他们之间的主次关系,我们会添加一个投影。

2. 增加空间感和层次感

这两个画面,通过投影与主体的位置关系,产生较强的空间感和层次感。

3. 提升画面格调

反应产品质感的投影形式,会提升画面的格调,这类比较多的是化妆品与品。

4. 增加形式感

如果你的画面缺少创意性,不妨试试这类投影形式,通常来说它们都是用投影作为画面中的主体,以此来传递出很强的形式感与故事性。

5. UI设计

UI 设计中使用投影。

投影的类型

1. 常规投影

常规型投影包含了普通投影,弧形投影,接触投影,弥散投影。

普通投影

普通投影就是我们最常见的一个投影形式,它可以用图层样式来设置,它的特点就是在图像的四周都会有点阴影的感觉,让画面与背景形成前后景的关系,就像这里的案例。

弧形投影

弧形投影,它的投影是在物体的一侧,像翘起的边缘。

接触投影

接触投影,是物体立面与底面的关系,会有一种三维立体的感觉。

弥散投影

弥散投影,与普通投影的区别在于,它更有深度,也是现如今比较流行的投影形式。

2. 长投影

长投影主要分两种,一种是色块投影,一种是在色块的基础上的渐变投影。

比较常用在图标的设计,还有海报的设计。

3. 倒影

倒影,这类型阴影应该是比较难处理的了,想必大家在做设计的时候,大多数情况会规避倒影这种形式,除非是拍好的照片自带倒影,不然很少有同学愿意触碰这块。因为它比较考验大家对图形的认知能力,以及对透视基础的掌握,之前我们有讲过一篇关于素描知识的文章,在里面介绍过关于物体的基本结构,我们所看到的任何一个物体都有一个结构或者形状,比如立方体、圆柱体、圆锥体、球体。任何一个物体都可以视为这四种几何形状中的一种或几种的组合。那在倒影当中,这些基本形状同样适用。

首先来看二维的倒影,二维的倒影比较简单了,也都很好做,复制一个下来,加个蒙版做渐变处理就可以了。

三维物体,最基本的就是这几个形状,或者几种形状的组合,掌握几种形状的倒影,就能应付大部分倒影的形式。

立方体为基础型的倒影。

圆柱体为基础型。

圆锥体为基础型。

球体为基础型。

组合型。

4. 悬空投影

悬空投影,这类投影给人很强的空间感,并且大多数情况,投影都会成为画面中的主角。

分为三种类型,二维的悬空投影,2.5D 的悬空投影,三维悬空投影。

二维的悬空投影

先来看看二维悬空投影,是二维的平面悬空,添加一个弥散投影。

2.5D的悬空投影

2.5D 没有消失点,但是会有立体感,在下方添加一个投影,就会有悬空的感觉。

三维悬空投影

三维悬空投影能有很多创意形式。

5. 创意投影

创意投影,它不会根据物体本身的形态去表现,而是根据文案和设计构思而产生的很有创意的投影形式,这个主要靠大家发散思维的联想了。

最常见的就是电影海报中的投影表现。

6. 场景合成投影

一种情况是接近真实的投影,和实际照片是一样的道理,一种情况是类似于创意投影,合成的投影算是这几种投影当中最难的。

合成中的投影要自己创造一个光源,也就是想象出一个光源,根据光源关系,绘制出投影效果。

投影在这里都是很真实的表现。

合成也可以做创意投影,这三张公益海报的主角是动物的影子,但是形成影子的是前面的物体,这是很有创意的表现方式。

制作投影的方法

制作投影的方法比较多,比如说利用图层样式,用矢量图形做投影,高斯模糊设置投影,手绘投影等,每一种方法都适用不同的投影类型,我们想更有效率的完成工作,就要对这些技法有个较深的了解。下面我就带大家来了解下每种方法。

1. 图层样式

第一个,也是最简单的,用 ps 当中的图层样式来做。

模式一般我们就选择默认正片叠底,这是在正片叠底文章中讲到过,后面的颜色,如果是主体与背景颜色差异比较大的时候,我们可以选择环境色;如果差异不大,我们可以选择主体的相近的颜色,很少有选择纯黑色的投影。

不透明度就是阴影的透明程度,也是很好理解。下面角度,是光线照射的方向。全局光,选择之后,画面中其他元素添加投影,就会默认为一个光源,这样画面中投影会更和谐。

距离,物体和投影之间的距离,数值越大越远。扩展,就是阴影面积的大小。大小,就是阴影的虚化程度。

等高线,可能很多同学不太理解,其实很简单的,我们来看下,纵向,越向上,越实,越向下越虚化。横向,最右侧是投影的中心位置,越向左,离中心越远。根据画面中的等高线,我们来分析下。

这样就好理解了,我们看画面中蓝色圆点的位置,代表中心位置很实,黄色圆点的位置代表远离中心的位置很虚化,最后就得出右侧的投影。

那如果说,我想让投影的周围都变得很实,该怎么调整?

就是把虚的那个点向上调整,这样,就代表外围投影变得相对较实,我们会得到这样一个投影。

如果我想,投影靠近外围的位置,变得比较实,靠近中心的位置,变得比较虚,就可以这样调整。

得到的投影是这样的,我们看到中间白色的区域,就是虚化之后的效果,接近了透明。这个搞懂了,利用图层样式做投影也就基本没什么问题了。

ps 还自带了这么多等高线的样式,大家可以去实验一下。

那什么类型投影,比较适合用图层样式来做?

普通的投影和弥散投影。

画面中人物的投影设置。

2. 矢量图形做投影

画一个矢量图形,之后选择实时形状属性,然后点击蒙版,通过调整羽化值,来调整投影的虚化程度,用这个方法会比较直观的观察到,而且因为是矢量图形,所以还很方便我们随时调整它的形状。

高斯模糊和矢量图形做投影,所适用的投影类型是一样的,同样适用于普通投影,弧形投影,接触投影,弥散投影。

还有悬空投影,它和矢量图形投影的区别就是,矢量图形更方便改颜色和形状,还有虚化程度。

在主体下方加一个小面积的虚化阴影,就会有悬空的感觉。

3. 高斯模糊做投影

添加高斯模糊之前,一定要记得给图层转换为智能对象,因为高斯模糊对图层是有不可逆的破坏性的,所以添加智能对象之后会很方便我们随时去调整它的颜色和模糊程度,动感模糊同理。

高斯模糊做投影,适用的投影类型。

4. 手绘投影

最后一个,用钢笔工具或者画笔工具来绘制投影,这个是比较难的,在投影那篇文章中,我们已经讲过在一个场景中,怎样分析投影的位置,大小,形状,方向,以及如何用钢笔工具去绘制投影,这里我们就不再重复了,如果有不懂的同学,回看之前的文章《投影一直做不好?看这篇文章就搞定!》

那我们来看一下,手绘投影适合什么类型的设计。

第一种就是合成设计,这个要考虑光源的位置,投影的透视,投影的颜色等,一般会采用画笔和钢笔工具的结合。

创意的投影同样适合,因为它和合成投影基本一样,只不过不会根据对象的实际特征去绘制。

倒影适合用钢笔工具和画笔工具来制作,这里就涉及到了透视,我们能看到物体在基面上的倒影,实际上是物体在基面上的投影的倒立映像。

在平时的工作生活中,我们要学会观察,比如积水的路面,反射建筑的倒影是什么样子的,镜子里的自己,或者可以多看看摄影照片,慢慢养成习惯,提高对倒影的敏感度。

倒影的做法

做倒影最重要就是两个字──拆分,我们给这个立方体做倒影,首先要思考的是,它的倒影是由哪几个面产生的,找到物体与承影面接触的线,然后把这两个面提取出来,沿着这个线把所在的面拆分出来。

然后向下镜像,根据实际情况再翻转,要注意,倒影的透视和原本物体的透视要一致,也就是平行原本对象的边线。

然后给倒影添加一个蒙版,做一个渐变,就可以了。

用刚才的方法给魔方做一个倒影

同样把与底边接触的面裁剪出来,可以看到透视关系还是不一样的,我们应该让倒影的面和上面的魔方透视一致。

用调整大小里的斜切,调整倒影的透视。

添加蒙版,然后在与地面接触的位置添加一个闭塞阴影就可以了。

再做一个复杂点的,给包做倒影。

同样,找到底面接触面,然后把相应的面裁切出来。这里注意的是,每个面要单独拆分,这样才方便为每个面设置倒影。

把所有拆分的面复制一个出来上下镜像。

调整透视,就用调整大小工具,斜切,合并倒影的图层。

用蒙版渐变,别忘了闭塞阴影。

倒影规律及特点:

投影在不同材质上的表现

好了,前面介绍了每一种投影形式,以及适合的场景。那接下来,我们来看看在同一光源的前提下,不同承影面,也就是投影在不同的材质上是如何表现的吧。

1. 布面

布面材质是软性材质,在光源下会吸收光的反射,所以投影的边缘会相对模糊,不会过于锋利。

案例演示

我们来看下在布面材质上的投影的做法,首先在物品与布面底部绘制一个闭塞阴影:

然后新建图层,根据光源绘制出阴影的长度与形状:

给长投影做高斯模糊,然后用蒙版把边缘处理得柔和一些:

统一光影,把产品修饰一下:

整体调整下色调,就可以了:

2. 镜面

镜面是光滑的,所以光照射之后,会形成和物体一样的影像,也就是倒影。

设计之前,先参考下带有镜面倒影的照片。

案例演示

第一步,闭塞阴影:

第二步,拆分图像,拿到下方,调整透视,这是之前我们讲过步骤,这里就不重复了。

调整产品的光影与色调:

加点小装饰,烘托氛围:

最后是整体调整下色调和明暗:

3. 水面

水面和镜面类似,但是水面会存在水波纹,所以在做投影时候要注意投影的形态要与水波纹一致。

参考一些带有水面倒影的照片。

案例演示

依然先画闭塞阴影:

绘制出整个投影形态:

高斯模糊处理,因为是水面,所以阴影和倒影要共存:

下面就是倒影了,方法步骤同样。

那么问题来了,是怎么做到弯曲的效果的?其实就是用 PS 当中的置换来做,这是置换的参数与水面素材。

关于置换的教程我们也发布过,《平面高手课堂!如何用扭曲工具快速强化作品设计感?》

最后统一色调和光影就完成了。

4. 底地板

地板有的会打一层蜡,这个时候,就会存在一些倒影,所以在这样的地板上倒影和投影是并存的。

先看一下在不同地板上的投影样貌。

案例演示

这个我们选择大理石材质,首先闭塞阴影:

绘制投影的形态:

给投影高斯模糊,添加蒙版做渐变:

然后,按照光影和环境色,处理产品的明暗和色调:

5. 渐变色/纯色

这也是我们设计中遇到比较多的情况,在纯色或渐变色的背景中,为了让画面具有空间感,我们经常会给物体加投影,这个投影可以是常规投影,也可以是倒影。

案例演示

闭塞阴影:

根据光源绘制投影:

高斯模糊,然后添加蒙版做渐变:

修饰产品的色调和光影:

统一光影色调:

教程到这里就结束啦,估计有的同学会纳闷,为什么我们没有细讲怎样根据光源绘制投影?因为在之前投影文章中已经手把手给大家演示过了,没看过的同学赶紧去补课,可阅读《投影一直做不好?看这篇文章就搞定!》

总结下今天的内容,第一,投影在画面中作用。第二,我们给投影形式做了分类,有常规型,长投影,倒影,悬空投影,合成投影。然后是制作投影的方法,着重介绍了倒影该怎样做,最后是投影在不同材质上的表现。通过关于投影的这两篇教程,相信大家已经能掌握一些原理和技巧了,其实最快速学习投影的方法,就是要学会观察生活中的事物。

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

用一篇干货帮你彻底全面掌握「投影」知识点!

雪涛


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

之前我们更新过如何做投影的文章:《投影一直做不好?看这篇文章就搞定!》,主要针对的是投影的原理进行讲解,包括如何用图层样式去做投影,怎样用工具绘制投影,这些都是我们了解投影的一个基础。教程发布之后,很多同学留言,表示没看够,希望针对其他投影形式再进行更深入的讲解,那这次我们就来满足大家要求。其实投影的设计不难,只要符合画面的光影逻辑,然后加上制作投影的方法,基本就能搞定很多基础的投影形式,话不多说,我们开始今天的教程。


其实投影在设计中的应用是非常广泛的,比如这些海报,都运用了投影的形式。

什么情况用投影

在平面设计中,除了合成设计之外,我们在什么情况下会选择用投影?

1. 增加识别性

比如,在颜色比较混乱的背景上添加文字,或者添加图片,为了区分他们之间的主次关系,我们会添加一个投影。

2. 增加空间感和层次感

这两个画面,通过投影与主体的位置关系,产生较强的空间感和层次感。

3. 提升画面格调

反应产品质感的投影形式,会提升画面的格调,这类比较多的是化妆品与品。

4. 增加形式感

如果你的画面缺少创意性,不妨试试这类投影形式,通常来说它们都是用投影作为画面中的主体,以此来传递出很强的形式感与故事性。

5. UI设计

UI 设计中使用投影。

投影的类型

1. 常规投影

常规型投影包含了普通投影,弧形投影,接触投影,弥散投影。

普通投影

普通投影就是我们最常见的一个投影形式,它可以用图层样式来设置,它的特点就是在图像的四周都会有点阴影的感觉,让画面与背景形成前后景的关系,就像这里的案例。

弧形投影

弧形投影,它的投影是在物体的一侧,像翘起的边缘。

接触投影

接触投影,是物体立面与底面的关系,会有一种三维立体的感觉。

弥散投影

弥散投影,与普通投影的区别在于,它更有深度,也是现如今比较流行的投影形式。

2. 长投影

长投影主要分两种,一种是色块投影,一种是在色块的基础上的渐变投影。

比较常用在图标的设计,还有海报的设计。

3. 倒影

倒影,这类型阴影应该是比较难处理的了,想必大家在做设计的时候,大多数情况会规避倒影这种形式,除非是拍好的照片自带倒影,不然很少有同学愿意触碰这块。因为它比较考验大家对图形的认知能力,以及对透视基础的掌握,之前我们有讲过一篇关于素描知识的文章,在里面介绍过关于物体的基本结构,我们所看到的任何一个物体都有一个结构或者形状,比如立方体、圆柱体、圆锥体、球体。任何一个物体都可以视为这四种几何形状中的一种或几种的组合。那在倒影当中,这些基本形状同样适用。

首先来看二维的倒影,二维的倒影比较简单了,也都很好做,复制一个下来,加个蒙版做渐变处理就可以了。

三维物体,最基本的就是这几个形状,或者几种形状的组合,掌握几种形状的倒影,就能应付大部分倒影的形式。

立方体为基础型的倒影。

圆柱体为基础型。

圆锥体为基础型。

球体为基础型。

组合型。

4. 悬空投影

悬空投影,这类投影给人很强的空间感,并且大多数情况,投影都会成为画面中的主角。

分为三种类型,二维的悬空投影,2.5D 的悬空投影,三维悬空投影。

二维的悬空投影

先来看看二维悬空投影,是二维的平面悬空,添加一个弥散投影。

2.5D的悬空投影

2.5D 没有消失点,但是会有立体感,在下方添加一个投影,就会有悬空的感觉。

三维悬空投影

三维悬空投影能有很多创意形式。

5. 创意投影

创意投影,它不会根据物体本身的形态去表现,而是根据文案和设计构思而产生的很有创意的投影形式,这个主要靠大家发散思维的联想了。

最常见的就是电影海报中的投影表现。

6. 场景合成投影

一种情况是接近真实的投影,和实际照片是一样的道理,一种情况是类似于创意投影,合成的投影算是这几种投影当中最难的。

合成中的投影要自己创造一个光源,也就是想象出一个光源,根据光源关系,绘制出投影效果。

投影在这里都是很真实的表现。

合成也可以做创意投影,这三张公益海报的主角是动物的影子,但是形成影子的是前面的物体,这是很有创意的表现方式。

制作投影的方法

制作投影的方法比较多,比如说利用图层样式,用矢量图形做投影,高斯模糊设置投影,手绘投影等,每一种方法都适用不同的投影类型,我们想更有效率的完成工作,就要对这些技法有个较深的了解。下面我就带大家来了解下每种方法。

1. 图层样式

第一个,也是最简单的,用 ps 当中的图层样式来做。

模式一般我们就选择默认正片叠底,这是在正片叠底文章中讲到过,后面的颜色,如果是主体与背景颜色差异比较大的时候,我们可以选择环境色;如果差异不大,我们可以选择主体的相近的颜色,很少有选择纯黑色的投影。

不透明度就是阴影的透明程度,也是很好理解。下面角度,是光线照射的方向。全局光,选择之后,画面中其他元素添加投影,就会默认为一个光源,这样画面中投影会更和谐。

距离,物体和投影之间的距离,数值越大越远。扩展,就是阴影面积的大小。大小,就是阴影的虚化程度。

等高线,可能很多同学不太理解,其实很简单的,我们来看下,纵向,越向上,越实,越向下越虚化。横向,最右侧是投影的中心位置,越向左,离中心越远。根据画面中的等高线,我们来分析下。

这样就好理解了,我们看画面中蓝色圆点的位置,代表中心位置很实,黄色圆点的位置代表远离中心的位置很虚化,最后就得出右侧的投影。

那如果说,我想让投影的周围都变得很实,该怎么调整?

就是把虚的那个点向上调整,这样,就代表外围投影变得相对较实,我们会得到这样一个投影。

如果我想,投影靠近外围的位置,变得比较实,靠近中心的位置,变得比较虚,就可以这样调整。

得到的投影是这样的,我们看到中间白色的区域,就是虚化之后的效果,接近了透明。这个搞懂了,利用图层样式做投影也就基本没什么问题了。

ps 还自带了这么多等高线的样式,大家可以去实验一下。

那什么类型投影,比较适合用图层样式来做?

普通的投影和弥散投影。

画面中人物的投影设置。

2. 矢量图形做投影

画一个矢量图形,之后选择实时形状属性,然后点击蒙版,通过调整羽化值,来调整投影的虚化程度,用这个方法会比较直观的观察到,而且因为是矢量图形,所以还很方便我们随时调整它的形状。

高斯模糊和矢量图形做投影,所适用的投影类型是一样的,同样适用于普通投影,弧形投影,接触投影,弥散投影。

还有悬空投影,它和矢量图形投影的区别就是,矢量图形更方便改颜色和形状,还有虚化程度。

在主体下方加一个小面积的虚化阴影,就会有悬空的感觉。

3. 高斯模糊做投影

添加高斯模糊之前,一定要记得给图层转换为智能对象,因为高斯模糊对图层是有不可逆的破坏性的,所以添加智能对象之后会很方便我们随时去调整它的颜色和模糊程度,动感模糊同理。

高斯模糊做投影,适用的投影类型。

4. 手绘投影

最后一个,用钢笔工具或者画笔工具来绘制投影,这个是比较难的,在投影那篇文章中,我们已经讲过在一个场景中,怎样分析投影的位置,大小,形状,方向,以及如何用钢笔工具去绘制投影,这里我们就不再重复了,如果有不懂的同学,回看之前的文章《投影一直做不好?看这篇文章就搞定!》

那我们来看一下,手绘投影适合什么类型的设计。

第一种就是合成设计,这个要考虑光源的位置,投影的透视,投影的颜色等,一般会采用画笔和钢笔工具的结合。

创意的投影同样适合,因为它和合成投影基本一样,只不过不会根据对象的实际特征去绘制。

倒影适合用钢笔工具和画笔工具来制作,这里就涉及到了透视,我们能看到物体在基面上的倒影,实际上是物体在基面上的投影的倒立映像。

在平时的工作生活中,我们要学会观察,比如积水的路面,反射建筑的倒影是什么样子的,镜子里的自己,或者可以多看看摄影照片,慢慢养成习惯,提高对倒影的敏感度。

倒影的做法

做倒影最重要就是两个字──拆分,我们给这个立方体做倒影,首先要思考的是,它的倒影是由哪几个面产生的,找到物体与承影面接触的线,然后把这两个面提取出来,沿着这个线把所在的面拆分出来。

然后向下镜像,根据实际情况再翻转,要注意,倒影的透视和原本物体的透视要一致,也就是平行原本对象的边线。

然后给倒影添加一个蒙版,做一个渐变,就可以了。

用刚才的方法给魔方做一个倒影

同样把与底边接触的面裁剪出来,可以看到透视关系还是不一样的,我们应该让倒影的面和上面的魔方透视一致。

用调整大小里的斜切,调整倒影的透视。

添加蒙版,然后在与地面接触的位置添加一个闭塞阴影就可以了。

再做一个复杂点的,给包做倒影。

同样,找到底面接触面,然后把相应的面裁切出来。这里注意的是,每个面要单独拆分,这样才方便为每个面设置倒影。

把所有拆分的面复制一个出来上下镜像。

调整透视,就用调整大小工具,斜切,合并倒影的图层。

用蒙版渐变,别忘了闭塞阴影。

倒影规律及特点:

投影在不同材质上的表现

好了,前面介绍了每一种投影形式,以及适合的场景。那接下来,我们来看看在同一光源的前提下,不同承影面,也就是投影在不同的材质上是如何表现的吧。

1. 布面

布面材质是软性材质,在光源下会吸收光的反射,所以投影的边缘会相对模糊,不会过于锋利。

案例演示

我们来看下在布面材质上的投影的做法,首先在物品与布面底部绘制一个闭塞阴影:

然后新建图层,根据光源绘制出阴影的长度与形状:

给长投影做高斯模糊,然后用蒙版把边缘处理得柔和一些:

统一光影,把产品修饰一下:

整体调整下色调,就可以了:

2. 镜面

镜面是光滑的,所以光照射之后,会形成和物体一样的影像,也就是倒影。

设计之前,先参考下带有镜面倒影的照片。

案例演示

第一步,闭塞阴影:

第二步,拆分图像,拿到下方,调整透视,这是之前我们讲过步骤,这里就不重复了。

调整产品的光影与色调:

加点小装饰,烘托氛围:

最后是整体调整下色调和明暗:

3. 水面

水面和镜面类似,但是水面会存在水波纹,所以在做投影时候要注意投影的形态要与水波纹一致。

参考一些带有水面倒影的照片。

案例演示

依然先画闭塞阴影:

绘制出整个投影形态:

高斯模糊处理,因为是水面,所以阴影和倒影要共存:

下面就是倒影了,方法步骤同样。

那么问题来了,是怎么做到弯曲的效果的?其实就是用 PS 当中的置换来做,这是置换的参数与水面素材。

关于置换的教程我们也发布过,《平面高手课堂!如何用扭曲工具快速强化作品设计感?》

最后统一色调和光影就完成了。

4. 底地板

地板有的会打一层蜡,这个时候,就会存在一些倒影,所以在这样的地板上倒影和投影是并存的。

先看一下在不同地板上的投影样貌。

案例演示

这个我们选择大理石材质,首先闭塞阴影:

绘制投影的形态:

给投影高斯模糊,添加蒙版做渐变:

然后,按照光影和环境色,处理产品的明暗和色调:

5. 渐变色/纯色

这也是我们设计中遇到比较多的情况,在纯色或渐变色的背景中,为了让画面具有空间感,我们经常会给物体加投影,这个投影可以是常规投影,也可以是倒影。

案例演示

闭塞阴影:

根据光源绘制投影:

高斯模糊,然后添加蒙版做渐变:

修饰产品的色调和光影:

统一光影色调:

教程到这里就结束啦,估计有的同学会纳闷,为什么我们没有细讲怎样根据光源绘制投影?因为在之前投影文章中已经手把手给大家演示过了,没看过的同学赶紧去补课,可阅读《投影一直做不好?看这篇文章就搞定!》

总结下今天的内容,第一,投影在画面中作用。第二,我们给投影形式做了分类,有常规型,长投影,倒影,悬空投影,合成投影。然后是制作投影的方法,着重介绍了倒影该怎样做,最后是投影在不同材质上的表现。通过关于投影的这两篇教程,相信大家已经能掌握一些原理和技巧了,其实最快速学习投影的方法,就是要学会观察生活中的事物。

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


用 PST 框架,帮你系统掌握产品的信息引导设计方法

雪涛

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

不知大家有没有和我一样的疑惑:日常产品的信息引导到底该如何设计?

可能有人第一时间会想到浮层、动效、弹窗等等,但这些都只是表层样式而已。背后的引导机制该怎么入手?有没有一个系统性的了解?需要注意些什么?

所以,今天就想聊聊这方面的看法,下面是我对信息引导的理解所提炼、搭建的一个「PST」框架:Performance-表现、Strategy-策略、Target-目标。

目标层:信息不会平白无故去引导用户,都是为了某个确定的目标而展示的。如在首页弹窗展示是为了进行新手教育,以达到让用户使用新功能,进入新页面等运营指标或增长指标。

策略层:目标确定了,需要确定可做信息引导的各种场景和机制。如设置某时间进行信息推送,用户网络不行的情况下怎么解决?

表现层:不同的场景中有各种表现形式,如下拉菜单、弹窗、浮层、视频等等。

这 3 层环环相扣,互相影响。因为每个产品的目标各不相同,所以这篇就先对信息引导的「策略层」进行分析,下篇再讲下引导的形式和适用场景。

信息引导的类型

可能每个人会有自己的分法和定义,我就按照自己的理解概括一下信息引导的基本类型。

1. 新功能引导

向用户展示产品的新功能/页面,对产品的新功能有一个大致的了解,多用于用户首次进入/使用功能的引导,如:各种新手遮罩引导、产品介绍。

2. 指标引导

以提高产品的业务目标/增长目标为导向,按照一定的规律引导用户使用某功能,如:产品的信息 push 和广告。

3. 结果引导

在用户已结束的操作行为、结果页面上,引导商户使用相似功能或内容模块,促进产品的连续消费。

比如:淘宝在订单支付成功后,都会进行店铺、红包、优惠券、相关宝贝的推荐,保证消费者还处于「购物链」上。

4. 异常引导

针对用户可能会犯错的行为进行提示、警告,是一种前置的容错机制。如支付宝,用户在向「异常好友」转账时,以轮播的方式进行信息提示,避免用户转错账。

信息引导从哪方面切入

抛去业务目标和引导样式的局限,信息的引导可以从几个方面切入和思考:产品架构、用户行为、时间、阶段/过程。

1. 利用「产品架构」做引导

像很多同学做信息引导时,一上来就想着浮层、弹窗、动效等各种表现形式,而忽视了最简单、最底层的引导方式:利用产品的架构布局去引导。

这种方式是通过架构布局,来体现内容间的差别与关系,突显出核心内容模块,强调的是「视觉重量」,如:各模块间的面积大小、色彩强弱。像淘宝首页有各种功能入口,通过架构上的布局来进行功能分类和引导。

如何利用架构布局进行信息引导呢?

2 个点可以参考:重组和单拎。

重组:将同一层级、相关联的信息组成一个内容模块,从而使信息更聚焦、减少视觉干扰。

如腾讯动漫的个人中心页面,在老版本中头部信息较为分散、无关联,信息的引导性很差。而在新版本中,则通过「重组」把信息关联在一起,页面更聚焦清晰、引导性更强。

单拎:一种与「重组」相反的引导思路,将信息分解成各个独立的模块进行展示,让信息得到更多的展示。

很多「入口化」的功能,都适用该思路进行信息引导,如:手机淘宝的个人中心,有些功能原本可以和其他模块一样做成入口化的,但出于产品目标、用户诉求等维度的考虑,将部分内容「单拎」出来进行展示效果更好。

2. 利用「时间」做引导

按时间维度去发散的话,则可以分成「用户行为时间」和「网络实时时间」引导。

用户行为时间

根据用户操作的行为时间进行信息引导。如爱奇艺,用户在观看了 30 分钟视频后,会弹出积分领取提示。

这种引导需要注意的是:产品的时间机制。

如爱奇艺的「观看满30分钟」:是观看单个视频时长,还是一天里的总视频时长积累?离线观看视频(有流量联网)时是否也计入时长等等?这些机制都需要在前期,根据产品的平台特性、业务目标、用户习惯等维度去设置好。

网络实时时间

根据当前网络时间进行引导。如百度地图,会在 17 点快接近高峰期时,向用户弹出路况提示。

这类场景的引导,更注重于:产品的推送机制。

如设置了某个时间点推送内容,若用户没网络或者网络较差时,是晚点再推送,还是推送提前预设置好的「静态」内容?这些都是需要考虑的点。

3. 分「阶段/过程」做引导

根据特定的维度,将信息/功能分解成 N 个独立且关联的阶段。分阶段的维度可以是时间、日期、金钱、物品等等。

很多运营活动就会把奖励分成不同的阶段进行发放,如图:

这种引导方式的优势是:可以将全部的信息分解到各个阶段中去,页面的拓展性强,用户理解和操作成本低。劣势在于:周期较长,用户缺乏足够的动力。

因此,很多产品都会把最大奖励、最好的结果放在最后阶段,加上利用消费者的「目标趋近效应」──人们在距离目标越近时,越有动力去完成它,一步步地引导用户消费。

4. 根据「用户行为」做引导

根据用户的当前操作进行引导,如观看视频时,点击屏幕会暂停播放且会弹出广告信息;长按内容列表时,会出现多选、排序、删除等操作。

而根据「用户行为」做引导,需要注意 2 点:引导的返回策略和落地方式。

返回策略

结合用户场景与产品特性,看信息引导后是否需要制定返回策略,相当于一种「逆向引导」。而返回的策略不仅体现在「机制」上,还可以体现在「视觉样式」上。

机制:如爱奇艺在观看视频时最小化产品、跳转到新的页面后,返回观看视频时会自动后退几秒进度,以保证用户的观看记忆不会出错。

样式:如淘宝在支付订单后,会有两种返回形式。一是左上角的「返回」icon,返回到购物车页面;二是中间比较明显的「返回首页」按钮,返回至淘宝首页。

而对于产品来说,「返回首页」的优先级显然更高一点:既可以让用户形成消费闭环,又能浏览、搜索更多的商品,提升产品的 UV、PV、复购率等业务和增长指标。所以,才会把「返回首页」按钮的样式,做得比「返回」icon 重一些。

引导的落地方式

引导的落地方式就是信息引导后,用户跳转到哪里?一种是跳转至新的页面进行落地,页面空间大、可控性强;另一种是停留在当前页面展示,减少用户的操作成本。

如优酷在观看视频时,可以在当前页面进行奖品的引导和获取。

至于最终采用哪种落地方式,则根据产品目标、用户场景、页面形态等特征去抉择。

总结

以上就是个人对信息引导「策略层」的一些心得和看法。

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

Material Design暗色主题设计指南

分享达人


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

本文是我学习Material Design设计规范的学习笔记和个人理解,希望对大家设计暗色主题有所帮助。

undefined


暗色主题是什么?

最近,Material Design中新增了关于暗色主题的设计规范:暗色主题(Dark theme)是指在UI界面中使用大面积的深色来构成界面的一种设计,它是产品默认主题的一种补充。很多朋友可能认为暗色主题就是现在新闻客户端的“夜间模式”,这个说法其实并不正确。因为暗色主题是可以由用户自己选择是否开启的,它的使用场景并不局限于夜晚。很多用户偏爱暗色模式是因为暗色更“酷”。比如前段时间苹果电脑增加了类似的“黑暗模式”(Dark Mode)的设计,大受用户的喜爱。用户沉迷使用暗色主题,而不是以前灰色的默认设计。暗色主题不但颜值高,而且可以在保持色彩对比度的同时降低设备屏幕的亮度,还可以根据当前照明条件自动调节亮度,这有助于改善视觉疲劳。除此之外,暗色主题还可以节省设备的电量,可谓是一举多得。那么,暗色模式都有什么样的规范呢?

 

undefined 

首先,暗色模式用深色视觉元素来构成界面的UI

 

undefined 

使用深灰色进行设计

在设计暗色主题的时候,我们应该使用深灰色来进行界面设计。黑色由于太过于深邃,无法让用户感知当前界面的高度和空间感,而不同级别的灰色就可以暗示给用户这些信息。

 

 undefined

使用强调色彩突出组件

在暗色主题下,我们可以使用少量的强调色彩来凸显一部分功能或者组件,大部分的界面全部为深灰色,所以这些被凸显的部分会更加突出。

 

undefined 

节约能源

在很多带有OLED屏幕的设备中,暗色主题可以通过减少亮色的使用来有效地延长电池寿命。试验表明,使用暗色主题可以让设备的续航时间变长。

 

undefined 

增强可访问性

暗色主题对于色弱及有其他视觉障碍的用户非常友好,可以提升他们使用产品的体验。

 

规则

对比度:深色背景和100%白色正文文本的对比度达15.8:1以上。

信息层级:组件和元素通过较深和较浅的灰色来表达信息层级。

饱和度:界面中主要色彩与文字信息的对比度应该高于4.5:1(根据Web可用性指南的标准)。

设计少量强调色彩:我们在设计时会使用大量深灰色来设计背景,也会用少量强调色彩来表示更重要的信息,与背景产生对比。

 

undefined


关于信息层级

暗色主题的UI界面主要使用深灰色的背景和少量的强调色彩,它们不刺眼但仍然保持着很强的可用性。用户使用起来不会有任何的不舒适。界面按信息层级的重要性依次让用户注意到以下四部分:主强调色、次强调色、较亮的灰色前景、较暗的灰色背景。


undefined

 1 背景(高度:0dp);2 表面(高度:1dp);3 主强调色; 4次强调色;5 在背景上的元素; 6 在层级上的文字色; 7 主强调色上的文字色; 8 次强调色上的图标色

 

undefined


触发暗色主题的开关

我们可以设计控件来让用户打开(或关闭)暗色主题,这个控件可以使用很明显的方式来进行突出强调:比如在明显的位置设计开关图标来让用户切换;也可以使用不太明显的方式:在菜单或者设置界面中放置开关。


undefined

 形式1:顶部应用栏中的暗色主题开关

 

undefined

 形式2:在气泡中切换暗色主题

 

undefined

 形式3:在设置界面中切换暗色主题

 

暗色的属性

暗色主题使用深灰色而非黑色作为组件的主要设计配色。深灰色表面可以表现出更广泛的高度和深度,因为我们仍然可以在深灰色之上设计更重的投影。除此之外,深灰色的设计还可以减少视觉疲劳,因为深灰色表面上的浅色文字与黑色表面上的浅色文字相比对比度更低,对眼睛刺激较小。


undefined

 推荐的深色主题默认颜色为#121212

 

海拔高度

在暗色主题中的组件和在默认主题中的组件可以使用相同的海拔和阴影大小,然而在暗色主题下它们的色彩会根据信息层级的排序而改变,这一点是通过明度不同的灰色来表现的:海拔越高则越亮(暗示接近光源)。我们在这里通过给深灰色上叠加一层不同透明度的白色来改变亮度(不是直接做灰色的形状)。


 元素的海拔越高,颜色就越亮


undefined 

通过使用半透明白色覆盖层来暗示海拔:1.形状 2.带有透明度的白色叠加层

 

undefined 

默认主题使用阴影来表示海拔,而暗色主题则通过表面颜色来表示海拔


undefined 

不同的海拔高度与白色层不同的透明度之间的换算关系(透明度从0%到16%)

 

undefined 

A. 高度为1dp、5%白色叠加的卡片式设计; B. 高度为6dp的FAB按钮,使用了次要强调的颜色 C.高度为8dp的底部应用程序栏,12%白色叠加


undefined 

错误1:辅助色的配色所表示的海拔不应该过高

错误2:阴影的颜色应该暗于界面元素的颜色

 

可访问性和对比度

暗色主题表面必须足够暗才可以显示白色的文本。为保证信息能够被良好的阅读,文本和背景之间的对比度应不少于15.8:1。也就是说,我们不可以用纯白色来设计所有的文本信息,而要根据背景色和文本的对比度来调整。

 

如果需要创建带有品牌色的暗色界面,请在推荐的暗色主题默认颜色(#121212)上叠加带有不透明度的主要品牌色。这个案例中,界面深色#1F1B24是暗色主题默认颜色#121212和8%的品牌紫色叠加的结果。

 

 

 

科普一下,在显示纯黑色的时候,屏幕需要消耗更高的电量。为了节能,某些设备(例如带有OLED屏幕的可穿戴设备)可以关闭所有显示黑色的像素以节省电池电量。

 

 

使用调色板中较少饱和的紫色可以提高在深色背景中的易读性并减少视觉上的突兀

 

辅助色饱和度过高,和背景不融合

 

主体色

主体色是应用里最常显示的颜色。Material Design暗色主题使用原色的200色调(在所有背景和层级上均需通过WCAG的AA标准:文本和背景至少对比度达到4.5:1)。

 

 

暗色主题中的主体色示例:1.主要颜色 2.色调变体

 

主体色变体

在我们设计界面时,某些浅色界面上的组件需要使用主体色的变体。

 

这个暗色主题使用了主体色(紫色200)和主体色的变体(紫色700)

 

辅助色

大多数的时候我们都无法仅仅依靠主体色这一种颜色撑起画面,我们还需要辅助色。辅助色一般来说是主体色的临近色或互补色。在暗色主题中,辅助色可以用来显示用于突出的部分内容。当然,辅助色同样必须满足背景与文本4.5:1的对比度要求。

 

暗色主题中的辅助色调色板1.辅助色指示符2.色调变体

 

 

这个界面中使用了主体色和辅助色变体

强调色

在暗色的主题中,暗色占据了UI的大部分空间。而在暗色之上我们也会运用强调色。强调色通常是浅色或明亮的色彩,这样的颜色能让我们希望突出的元素在暗色中脱颖而出。

 

 

为了提升灵活性和可用性,建议在暗色主题中使用较浅的色调(200-50),而不是默认主题颜色(饱和色调范围为900-500)。1.默认主题原色指示灯2.暗色主题原色

 

选择色彩时要考虑饱和度对界面阅读的影响

 

 

暗色主题下顶部应用栏使用的颜色不可以是主体色

 

品牌色

为了保持品牌的识别性,品牌颜色可以在暗色主题中使用,但应当仅限于一个或两个品牌元素,例如Logo或品牌按钮。界面中的其他部分如文字和次要元素仍然可以使用饱和度低的颜色来设计。

 

 

1. 暗色主题色2.品牌颜色

饱和度很高的品牌色应用于FAB(2),而不饱和的暗主题色应用于文本(1)

 

暗色主题色板

我们设计一个产品的时候需要完成一套专属的色板,它包括:颜色(主体色、辅助色、主体色变体、辅助色变体)、表面(背景和组件)、状态(例如错误状态) 内容(排版和图像)等的色彩选择。

 

暗色主题的色板实例


 

1 Material Design默认主题色板 2 Material Design暗色主题色板


 

错误颜色

错误颜色在产品中用来指示错误状态,当看到这个色彩,用户就知道有些事情出错了。暗色主题的默认错误颜色为#CF6679。

 

这种颜色是通过默认的错误颜色(#B00020)并使用40%白色叠加来创建的,这种颜色通过了AA级对比度标准。


 


文本颜色

当浅色文本出现在深色背景上的时候时,应使用以下不透明度:高度强调的文本(87%)、中等强调的文本(60%)和禁用文本(38%)。

 

 

高度强调的文本、中等强调的文本和禁用文本的颜色

 

状态

通过使用叠加颜色来传达组件或交互元素的状态。在暗色主题中,状态应使用与其默认主题相同的叠加值,并且可以调整它们以通过AA级对比度标准。


 

悬停、聚焦、按下和拖动状态时组件的不同设计

 

使用什么软件设计?

Material Design旨在为设计师设计一套可以应用在所有平台的设计语言。在目前的UI设计界较为通用的软件都可以支持Material Design的设计,比如我们可以行业里比较流行的Adobe XD、Sketch、Figma等UI软件来设计界面。Material Design提供了暗色主题的Sketch文件,大家可以在支持Sketch格式的设计软件如XD、Sketch、Figma中打开它。

 

 

使用Adobe XD打开暗色主题模板

 


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


中后台界面设计流程剖析

分享达人



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

中后台很难设计吗?需求PRD看不懂?或许看完这篇文章后,会有新的体会



拿到PRD的瞬间,你在想什么?

设计一个产品的前提是要先了解这个产品想要解决的是用户什么痛点,核心功能是什么,价值点在哪里等等。


整体需求概览,产品画布

先整体浏览下需求,对需求有个整体的认知,知道大概的框架,功能点是什么



思维导图,梳理需求


用白纸或XMIND将功能点梳理出来,最好是按照用一级菜单/二级菜单/三级菜单的模式,把整体的流程,页面的逻辑都整理出来


这是一个消化过程,从PRD一堆文字,消化成,自己可以理解图画


这一步当中,要把逻辑理顺,不懂的就问,千万不要用猜的,猜一猜,无限可能啊。一不小心,就给自己挖坑了。


如果产品是涉及到流程的,那就要把整个流程画出来。比如要设计审批系统的中后台。



如果PM已经事先画好流程图,可以自己先过一遍,然后用自己的理解再画一遍,然后对照看理解上有没有偏差,这样可以对整个流程流转有更深的理解


草图先行,原型跟上

前面两步完成后,可以说对产品的理解已经没有问题了。现在要把页面串起来,所以我建议先画草稿,不用很细致,要大致规划板块



注意一点,不需要所有页面,都需要画草图,这样时间上太长,把主要页面和流程的草图画出来,把前两步的理解用页面表现出来,验证流程上是不是有漏洞。很多时候可能整体流程看起来是闭环的,等到画页面的时候,会发现有漏洞的地方


关于原型的问题,如果是比较大的项目,建议还是先画原型,因为前期原型交互上修改的次数会比较多,那么设计师可以专注在整体页面流程上的把控,而不把时间放在颜色,icon,插画等视觉上的修饰。一个大项目前期的讨论,评审,修改个5-10次都挺正常的。


每次修改最好都更新下版本号,并在原型里面加个【更新记录】的页面,记录这次更新哪些内容,如果是大的更新,或者是功能的改变,最好写上原因,方便后期可查,因为时间久了,往后翻,真的会忘记。比起相信自己的记忆,还是烂笔头吧。我也碰到几次这样的坑,某次开会,去掉了某个功能,当时觉得不需要。后期又有人提这个需求,追溯到底是谁说不要的,结果怎么也想不起来。所以要做到记录可查。


如果产品前期有做竞品分析,建议把竞品分析的内容也写在原型里面。同时也把产品目标,用户痛点这些都可以写上去,这样让整个原型,可以更加完整,也更有份量。后期如果遇到类似的产品要设计,就可以去回顾下之前做产品的记录,考查的方向。


做原型时,可以对一些要点,进行补充,比如以下几点:


1. 新建页面,新建完成后,是跳转到哪个页面,这个需要说明,不然开发就只能用猜。

比如新建产品完成后,是到产品列表,还是到产品详情页,因为前期没有说明,开发就让页面跳转到产品列表,但是事实上,是要跳到产品详情。因为到详情页面,可以引导用户进行下一步操作。如果到列表页面,其实操作就被中断了,除非产品的需求是,不断建产品,但这种情况比较少


2. 有涉及到状态的列表

要在原型旁边补充说明并列出,所有状态。如果状态还会对应不同的操作,则需要把对应关系都列出来。同时界面中的列表,也需要把状态和操作对应,不要随意填写,以致于开发看漏或者看错了,要保持一致,减少错误发生。


或许你会认为开发在细分的时候,也会讲清楚状态的分类,各自的逻辑关系。但是,建议设计师多做一步,可以帮助设计师更了解产品,还有些特殊状态。而且自己碰到比较多情况是,前端也不清楚逻辑,结果在状态与操作的对应关系上来来回回一直在修改。个人的习惯是,如果设计稿可以呈现的逻辑,那就认真的画出来,减少后期开发的错误和来回沟通的时间。


3. 列表的排列顺序

按什么顺序排序,这也是个关键问题,按创建时间、更新时间,产品序号,优先级等等,不同的需求会不一样,所以不要去假设开发都知道


4. 表单校验

前端校验,还是后台校验?基本上现在都是前端校验,马上给用户反馈,而不是在用户填完一堆的表单后,告诉用户,哪里出错了。后台校验属于偏重的交互,容易给用户产生心理负担。


校验问题,还会涉及到报错文案。这个建议做个文档给开发,特别是刚合作的开发,也不了解对方的习惯,这样减少后期更改文案的时间。也可以做个报错规范,这样后期的报错就根据规范来就可以,不需要每次都来提醒。


5. 输入框提示文案

之前有人提到这个提示文案是非必要的,因为前面已经有说明,当前输入框是要填什么内容


加入提示语后,会让表单更丰富。而看右边的表单,空得让人有点慌...

特殊的字段,会需要特别的文案;比如版本号,业务方希望用户可以遵循某种规则去新建,则可以提示:请输入版本号,例:1.0.0;


视觉稿

原型评审没有问题后,就可以进行视觉的设计了。视觉稿上面,也同样需要一些交互的说明,虽然前期原型上已经有标注。但是对于开发来说,他要看着设计稿,又打开原型对着看,其实也是件挺讨厌的事。而且有些交互,是需要界面。比如下拉菜单样式、搜索框(涉及模糊查询)、进度条(失败和完成)等等。

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



日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档