首页

数据可视化设计案例实操

博博

什么是Resdesign


Redesign并不是一个简单的美化过程,视觉只是Redesign的一部分而不是全部。如果你做产品重构只是为了视觉更美观,从各种网站获取灵感用样机包装,没有任何产品架构以及交互逻辑,那么你的改版必定不会很完美。


但同时也会有很多人陷入这种误区,产品中过时的设计规范会使你的用户会流失到设计体系更好的竞品那里。重构你的产品设计语言,让他看起来更美观,这当然很好,但是也不能盲目的跟随设计趋势,没有任何逻辑做改版,这样会导致交互逻辑的紊乱以及产品架构不清晰。


今天阿勇就从网上任意摘选了一个产品功能需求有问题的一个页面来进行一个页面改版,一起来看看吧!



产品逻辑分析


1、产品主视觉指意不明,贵州省地质灾害防治指挥平台,地图处资源应集中于贵州省,且全国视角下可以下钻贵州省市区。

 

2、地质灾害防治主视觉应该着重展现崩塌、滑坡、泥石流、地裂缝、等地质现象的展示,并展示预警信息,以及现场地质现象视频反馈,以便于指定指挥方针。

 

3、此平台信息展示包含人员调度,现场指挥,设备数量,数据资源统计,覆盖区域,预警告警,各地区地质灾害排行,综合防治等信息的内容。

 

4、产品布局不合理,各区域所占比重需要重新估量,并且主视觉数据资源匮乏,内容单一。

 

5、业务逻辑没有很好的展现,各区域所要展现的数据信息不明确,业务紊乱。

 

6、画面中对于业务的理解不够深,导致画面空洞,数据展现量不够,产品失职。








如何进行页面分析


根据颜色:颜色不宜太多,对于特殊行业,固定的颜色是有固定的含义的,比如红橙黄蓝四色预警。


根据布局:不合适的布局总是会让人觉得很别扭,并且对于页面整体效果会有很大的影响。 

根据风格:蓝色系风格就尽量选用色相接近的颜色,画面颜色太多,颜色也会失去其本身的美观度以及特殊含义。 


如何发现并解决问题

对于画面不合理的地方需要记录下来,对当前板块的内容进行正确的导向,比如你发现这个字体不合适,你的脑海中一定会有正确的用在此处的字体;比如间距,换行,字号等方面也是如此,心中得有一杆秤,去衡量设计的美感。



了解功能,分析数据之间的关系:

了解本产品的应用领域,以及产品功能,分析画面需要展示的数据有哪些,合理的通过设计展示数据之间的关系。

 

构思主题,围绕主题设计其他元素:

对原来的主题进行产品功能重构,设计新的配色方案,画面内容布局,标题以及主视觉的重新设计,围绕主题进行设计元素的制作。

 

分析数据,合理选用不同样式图表:

对各个数据进行分析,对内容进行编排,选择合适的图表去展示数据,合理的同时,又具有美感。

 

提取共性,结合需求做产品规划:

提取各个模块的设计形式的共性,并结合产品需求进行合理的规划,重构页面。

 

加强技法,了解可视化设计规范:

通过不同的设计技巧来表现画面的美感,制定属于产品的设计规范,并运用这些规范去规范页面布局以及设计,这是要在深度了解可视化设计的前提下。


优化-01


优化了原本单调并无亮点的主视觉区域,通过添加覆盖区域/区域告警/视频监控等信息大量丰富了画面并实现了地质灾害自动化管理,从事件发生到事件解决,真正实现地质防治的自动化。 


优化-02


将原本的区域设备数量排行,换成了各地区地质灾害数量排行,更能反映出地质灾害集中在哪些地域,事发频率以及爆发率进行排序,颜色上通过红橙黄来进行前三的强调,更有层次感。 


优化-03


将原本的区域在线设备,换成了数据资源统计,是为了更清晰的去表达具体日期下的设备数量情况同时可以避免数据表达不清晰的问题。 



更多组件样式

新增告警列表,设备数量,资源调度信息,展示历史告警记录,合计设备数量,总结资源调度数量,真正掌握自动化地质防治指挥。



最终修改成品



设计师应该跳脱出自己狭义的视角重新来审视“设计趋势”,为自己带来更多的可能性。


视觉只是表现层,理解业务,理解数据,合理表述才是核心。道理大家都懂,但真正的理解数据却是很多设计师迈不过去的门槛。


送给大家一句忠告,永远不要迷信产品原型,设计也不应该被原型所制约,要勇于用自己的设计思维去验证产品的合理性,要用商业眼光去对产品进行查漏补缺,要站在用户的立场上去试想产品的可能性。



作者:AYONG_BDR      来源:优设网



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

Vue/Node.js—时间处理器—silly-datetime

前端达人

一、在Vue框架中使用

1、安装插件—时间格式化插件

npm i silly-datetime --save 

2、Main.js文件引用


        
  1. import Time from "silly-datetime"; //时间格式化处理插件
  2. Vue.prototype.$Time = Time; //全局使用

3、页面中使用

this.$Time.format(new Date(), 'YYYY-MM-DD HH:mm:ss'); 

二、在Node框架中使用

1.安装插件

npm i silly-datetime --save 

2.在node中引入

const timeQs = require('silly-datetime'); // 事件格式化控件

3.在后端路由中

obj.time = timeQs.format(new Date(), 'YYYY-MM-DD HH:mm:ss');

4、参数说明

格式 类型 说明 实例
YYYY 年份 YYYY :2019
MM 月份,补0 MM:07
M 月份,不补0 M:7
DD 日,补0 DD:07
D 日,不补0 D:7
HH 小时 24小时,补0 HH:07
H 小时 24小时,不补0 H:7
hh 小时 12小时,补0 hh:07
h 小时 12小时,不补0 h:7
A am 上午 mm:07
a pm 下午 m:7
mm 分钟 分钟,不补00 mm:07
m 分钟 分钟,不补0补0 m:7
s 秒钟 秒钟,不补00 s:07
s 秒钟 秒钟,不补0补0 s:7
文章知识点与官方知识档案匹配,可进一步学习相关知识


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


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


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

如何使用 Node.js 列出目录中的所有文件

前端达人

在 Node.js 中,您可以使用该fs.readdir()方法列出目录中的所有可用文件。.此方法异步工作以读取给定目录的内容,并返回目录中不包括和的文件名数组..

这是一个读取目录中所有可用文件并在控制台上打印它们的名称的示例:


  1. const fs = require('fs');
  2. // directory path
  3. const dir = './node_modules/';
  4. // list all files in the directory
  5. fs.readdir(dir, (err, files) => {
  6. if (err) {
  7. throw err;
  8. }
  9. // files object contains all files names
  10. // log them on console
  11. files.forEach(file => {
  12. console.log(file);
  13. });
  14. });

fs.readdir()如果给定目录不存在,该方法将抛出错误。

fs模块还提供了 call 的同步变体,readdir()readdirSync()同步工作并返回文件名数组:


  1. const fs = require('fs');
  2. // directory path
  3. const dir = './node_modules/';
  4. // list all files in the directory
  5. try {
  6. const files = fs.readdirSync(dir);
  7. // files object contains all files names
  8. // log them on console
  9. files.forEach(file => {
  10. console.log(file);
  11. });
  12. } catch (err) {
  13. console.log(err);
  14. }

查看本指南以了解有关在 Node.js 应用程序中读取和写入文件的更多信息


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


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


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

B端的设计规范和组件库怎么从零开始搭建?

雪涛

这是一篇酝酿了比较久的内容了,来讲解 B 端设计规范和组件库的分享。这几年网上出了不少类似的分享,虽然都写得很全,都还是觉得不够满意,缺了一点点细节。
所以我自己出一版,希望能帮助你们一次性解决这些问题。



1.1 设计规范和组件库

B 端项目设计中,设计规范和组件库是一个绕不过去的槛。作为专业的 B 端设计师,必须有自己完成设计规范和组件库的能力。


所以,首先我们要先理清楚什么是设计规范和组件库


设计规范是项目设计中要遵守的要求、细节、准则,规定了诸如色彩、字体、栅格、间距、圆角等要素的规则,这些内容都是可以在大量设计元素中应用的细节。



换句话说,设计规范就是提取在项目中会广泛使用的要素,并进行统一制定的过程,防止设计师在设计过程中随意发挥,导致项目统一性的崩坏。


组件库,是通过梳理项目中应用到的按钮、开关、滑块、日历、下拉菜单等控件、组件的设计样式、状态、交互规则,再将它们统一复用到项目的不同页面中去。




严格意义上来说也是设计规范的一部分,是基础规范的进一步延伸,但还是单拎出来讲。因为组件库的应用不仅仅是设计统一性的问题,还融合了 ”组件化“ 的编程思路在里面。

组件化:将复杂系统拆分成不同功能独立的模块并重组的过程,且每个模块包含对应的状态和属性。


对于程序员来说,一个项目就是若干功能模块的合集,往往是先开发这些功能模块,再搭建对应的完整页面,而不是看一个页面开发一个页面。


所以制定完善的组件库,除了提升设计质量外,还可以很好的提升开发效率,推进项目进度。


设计规范和组件库的搭建,就是一个由下至上的设计链路,通过对细节的制定来实现最终的项目表现层。可以借助广为流传的分子原理来理解:




任何成熟的 B 端项目都应该具备自己的设计规范和组件库,虽然有很多小团队在前期推进项目时,因为各种问题没有搭建或落地设计规范,但并不代表他们在招人的时候没有要求。


项目规范是一个典型的 “项目团队可以没有,但你不能不会” 的基本招聘要求。

1.2 开源组件库和项目规范


在今天搭建 B 端项目规范时,新手还有一个普遍的问题:

项目规范和开源框架的规范有什么区别,如果选了一套开源框架做设计,设计师不就不用做规范了?


初级设计师会这么想并不奇怪,因为以 AntDesign 为首的开源框架做的实在是太完善了,不仅囊括了整套的 Web 色彩系统,还有各类常用的、不常用的交互组件。




它们不仅仅提供了相关的设计源文件,也给开发提供了对应的代码和接口,方便程序员应用。看起来我们只要拼拼组件就可以和开发无缝衔接了……


这显然是不可能的,正是因为开源框架太全面,可以产生无数种可能,我们才更应该整理自己的项目规范。就像我前面已经提到过的,设计规范是种 ”限制“,而不仅仅是设计风格的简单沉淀。


比如,不管你选了哪套开源框架,它提供了多少种色彩,你的项目都应该有自己的项目主色,适当的辅助色彩,而不可能把它的整套配色都应用进去。所以,即使颜色没有跳出原有色彩系统,也要筛选出你用到的颜色进行记录。




再比如,开源框架的很多控件,都提供了好几种样式和方案,并不是让你全部都用进去,而是选择自己觉得合适的。所以你每个控件中选择的方案,也需要做记录,统一后续的页面设计。




前面只是记录选择,都还比较简单,而最关键的问题在于,开源框架的组件不可能完美符合项目的全部需求。必然要在原有的基础上作出大量细节的优化,或者创建出新的业务组件出来,所以设计师还是要把这些内容整理出来。


开源框架,就是给我们提供了一个比较全面的设计范围,让我们站在别人的肩膀上做选择,提高设计规范的制作效率,而并不是让我们直接躺平,复制黏贴就可以了。


同时,设计规范和组件需要在软件中进行运用,我们也同样不能直接使用官方提供给我们的组件库展开自己的项目设计,要根据自己项目的规范独立进行搭建和使用。




下面,我们就要根据设计规范的内容,来讲解如何结合并使用即时设计、Figma 的相关功能。



2.1 和规范有关的功能解析


之所以 UI 设计软件能取代 PS 独立发展,就是因为 UI 设计中包含大量需要复用和批量修改的功能。而这些功能和设计规范有非常大的联系,也是 UI 设计中项目规范能被落地实践的重要保障。


但因为 Figam 和即时等次时代 UI 设计软件提供了越来越多的功能,用来支持设计规范的实践,且这些功能可以相互交叉、重叠、组合,导致很多人在前期学习中会被软件功能绕晕,导致很多人没有理解这些功能意义和价值,更不知道如何在项目中具体实践。


所以,我们先将这些功能整体理解一遍,再逐一来对它们的使用规则和应用场景进行拓展。




2.1.1 样式功能


样式功能是用来记录图层样式设置的功能。简单点理解,就是记录图层右侧的属性设置的功能。正常我们选择一个基础图层,软件右侧的属性面板会将图层样式拆解成若干的类别,包括填充、描边、字体、阴影、模糊。




而样式功能,就是帮助设计师对不同的样式类别进行记录和复用的过程,它会直接将该分类内的相关参数值记录下来,并进行命名,方便后续的调用。


而每个样式分类独立生成记录的好处,就是可以为了方便让设计师自由进行样式的组合。比如填充制定了红、蓝、绿三种,投影制定了深、浅两种,使用者可以自由搭配这些选项。

2.1.2 响应式功能


响应式功能是让图层随上级编组尺寸变动而自适应的功能,方便我们在修改组件的大小时不用重新调节里面的元素细节。


例如设计一个卡片,可以通过响应式的设置,让头部的元素左右对齐,下方的文本区域自动拓展,保持卡片的内间距不变。




或者页面右下角悬浮按钮,也可以通过响应式设置始终处于页面底部,这样我们在增加页面高度的时候不用重新设置该元素的 Y 轴位置。




软件中的响应式并不等同于广义的网页响应式技术,它不能实现完整的栅格布局和流体响应,只能帮助我们来解决一些最基本的响应需求,这在后面的章节中再具体介绍。
2.1.3 自动布局功能


自动布局功能,是通过前端布局思路来设置元素布局方法自动排版功能,是 Figma 开发的最重要的功能,也是让 Sketch 不再成为 B 端设计首选的核心因素。


它的主要功能如根据内容自动完成尺寸变更,并列排版和顺序的变更等。




自动布局可以极大的提升设计效率,正因为自动布局的出现,才让项目组件库可以真正被运用和落地实践起来。


掌握自动布局是 UI 设计类软件的灵魂,后面我们会解释它的具体功能和应用方法,然后再进入组件的具体使用环节,分析对应的实际应用场景。避免你们无法分清自动布局和组件的功能。

2.1.4 组件功能


组件功能在不同软件有不同的叫法,如 Symbol、Component、Kits 等,主要是将指定的图层或编组生成一个新的编组单位(类似智能对象),在后续设计中进行复用。


例如设计一个按钮、开关,我们只要将它们生成为组件,就可以在后续设计中快速从组件库里拖拽到设计页面中,不用重新画一遍,并且支持批量修改。


在组件应用中,生成的第一个组件也叫父级组件,其它调用它的组件都是它的子组件,这是一个非常清晰的从属关系。如果我们修改父级组件的内容,所有子组件都会被统一修改。




组件的应用除了这种最基础的应用以外,还包含了很多特殊的功能,如将低级组件合并成一个高级组件的嵌套,或者 Figma 前两年发布的变体(Vriants),可以将一个组件的不同状态聚合到一起,通过属性面板来切换相关的状态。



组件功能是 UI 类软件最复杂的功能,它不仅本身设置很丰富,同时也可以结合样式、响应、自动布局,让本来死板的组件变得更灵活可控,应对复杂的设计环境。

2.2 样式功能

在软件中,记录样式就是在对应的属性面板上 “创建” 并 “命名”,就将对应设置数据转化成一个指定名称的记录,方便我们记忆和调用。

比如,填充色中使用了两种色彩相近的色彩和不同透明度,我们就可以使用中文命名来区分,其中 #2B6DCF 80% 叫 辅助色,#2B93CF 90% 叫 主色。



创建完成的填充色记录,就会在对应的属性样式列表中出现,之后就可以在对应图层的属性中关联该记录了。

之后,所有关联到该记录的图层属性,都可以快速应用该记录内的参数。如果我们在样式的列表中修改该记录的数值,那么所有关联到该记录的图层就会一起被修改。

一定要牢记,目前的主流 UI 工具中,样式是根据不同属性类型记录的。比如一个字体图层,它的填充、字体、描边、投影,是可以创建不同的样式记录的,各不影响。



而软件 Sketch 的样式逻辑,则是根据图层类型来记录的,比如矩形和字体,会记录该图层下所有样式属性的参数,且该记录只能应用在同类的图层上(而 XD 只能记录色彩和字体样式…)。



这种做法虽然理解起来容易,但是会导致样式数量大幅度增加。尤其是在字体上,变动填充、描边都要设置一个新的样式,这在实际项目中的灵活性是非常差的。

而即时设计、Figma 则不考虑图层类型,只关注属性类型。类似前端的样式表中 “类(Class)” 的应用,每个类有不同的样式参数,只要定义了类的命名和属性、参数,那么不同 Div (即图层)就可以自由组合这些样式记录了。

比如色彩 color、阴影 shadow、描边 board 各定义了1、2、3 三种样式类,那么就可以像下方案例中自由组合:

<Div Class = “ color2 shadow1 board3 ”> </div>
<Div Class = “ color1 shadow3 board2 ”> </div>

所以,样式功能可以帮助我们在前期快速搭建基础视觉规范内容,将规范中的配色、字体、投影、模糊等参数整理进样式表中,方便我们后续的快速调用和统一修改。

2.3 响应式功能

响应式是我们前面做过很多期分享的课题了,基于 BootStrap 的完整响应式功能确实非常强大,可以通过栅格布局来实现丰富的响应方式。



虽然 UI 软件中也提供了 ”响应式“ 这样的功能,但它可以实现的效果非常有限。用一句话概括就是:

“图层基于父级画板 Frame 的匹配逻辑”

比如我们先创建一个画板,然后再置入相关的图层,那么这些图层就可以启用响应式规则。包含间距固定、居中对齐、等比缩放这三种响应规则。

间距固定的意思,就是图层基于父级画板的某间距数值是固定的,不管画布尺寸怎么变动,图层和画布的对应间距都是保持一致的。比如常规的某一方向间距固定。





比如在模块上的标题栏,就可以将栏目设置成一个 Frame,然后标题相关元素左间距对齐,更多图标右间距对齐,之后变更标题栏的宽,图层的对齐关系就是不变的。



而设置左右、上下间距同时对齐,则是图层会随画布的尺寸变动修改自身的宽高来满足。



居中模式则是图层根据画布的大小进垂直、水平方向的对齐,忽略间距数值。



最后一个缩放的设置,用起来和两侧间距对齐很接近,也是放大缩小画布图层会跟着一起变动,但它响应的逻辑是依据比例,而不是间距。这个设置在实际项目中很难派上用场。



过往的设计软件中,父集尺寸变更,下级元素只能机械的执行缩放效果。而响应式设置就是避免这种僵硬的效果,向真实的网页适配方式看齐。

同时,这种父集对齐的逻辑是可以进行嵌套使用的,比如刚才的标题栏,可以将这个画板再置入到整个卡片画板之下,并对 “标题栏画板” 创建顶部对齐,左右间距对齐,那么该画板本身的尺寸不管怎么变动,头部标题栏顶部位置固定,宽度间距和父集统一,标题栏下方的元素也会左右对齐。



所以,将一个画板中的元素响应方式设置好,可以节省我们很多时间,不用再因为父集元素尺寸修改而一个图层一个图层修改下级元素的尺寸和位置。

在后续生成组件前,我们就要优先完成画板下方的响应设置,这样就能确保该组件支持灵活的调节和布局。比如用上方的卡片,就可以快速搭建一个表盘页面的基本框架,我们要做的就是拖拽画板到一个合适的尺寸即可,无需调节下级图层。



但需要注意的事,即时设计和 Figma 触发响应式的设置是元素需要处于画板 Frame 之下,而不是编组 Group 中, Sketch、XD 因为没有 Frame 的概念,所以使用编组就可以应用响应式设置,这个区别一定要牢记。 同时,响应式虽然可以完成很多高效的适配,但是它的局限性是无法打破的,例如无法实现 3 列以上的卡片列表等间距放大,或者随宽度增加生成新列下方卡片补位。



2.4 自动布局功能

自动布局 Autolayout 作为一个自动排版功能,使用场景包含两类,父子级响应和依序排列。它们有各自的生成条件。

首先需要一个矩形图层作为背景,并将其它下级图层置入到矩形背景中去,全选后点击 “自动布局“ 按钮即可生成父子级响应。如果图层没有完全置入矩形中或没有相交,那么就会生成一个依序排列的自动布局出来。



创建自动布局会生成一个新的 “特殊编组”,用来收纳下级图层,它在图层列表中会有新的图标。



2.4.1 父子级响应布局

父子级响应布局中,背景的矩形图层会被自动移除,样式被继承到自动布局的编组上,针对该编组层的属性设置,就等同于原先的背景矩形设置(和画板 Frame 图层逻辑一样)。

这类布局最常应用于按钮控件上,可以让按钮的宽度随文本宽度变化。



但光靠创建这个效果显然是无法完整解释自动布局的,我们就必须从前端的逻辑,来理解这种包含父子层级的元素如何实现自动布局。

首先就是前端环境中,很多控件、组件本身的尺寸是无法直接写死的,它们是随内容自动调节的。而自动布局右侧的设置面板中的田字格一栏,旁边会有宽度和高度设置,默认都是 “自动 Auto”,这就是说它们会随内容宽高进行响应。



比如上方的按钮,它实现的逻辑就是:

按钮宽 = 元素内容宽 + 左右间距

按钮高 = 元素内容高 + 上下间距

这种情况是父层级基于子层级的响应,应用于无法确定父级图形尺寸的场景,如按钮、标签、单元格、瀑布卡片等。

但前端中的不确定性并不是只有这一种,还可以反过来,子图层大小不确定,需要它们去响应父级图层的尺寸变更。

比如一些文本卡片,会应用在不同的页面中,且根据应用的场景会有宽高的调节,所以需要下级的文本区域可以跟随上级尺寸响应。

我们就需要把父级布局设置成 “固定宽/高”。还要选中子图层,在它的自动布局选项中选择 “自适应”,来满足这个相反的需求。



如果子图层没有设置自适应,那么它就不会直接随着父级图层变更自己的尺寸。但还是有针对子元素的响应设置 —— 对齐模式。



在父级布局设置中,有一个网点模块,可以设置下级图层的对齐模式。当下级图层不处于自适应模式时,则对齐可以修改下级元素的对齐方向,即前面响应式设置中的 “间距固定”。



2.4.2 依序排列布局

前面我们演示的案例都只有一个子图层,如果出现多个子图层的话,自动布局也可以帮我们进行调节,除对齐外还包含子图层排列方式、分布方式,而这就是依序排列的布局模式。



排列方式就是多个子图层横排还是竖排的设置。



分布方式,则是这些子图层布局的位置怎么定,默认包含固定间距和自适应两种。



固定间距即子元素排列的间距保持一致,在右侧的输入框中可以设置间距数值,也可以结合对齐模式来设置整体的对齐方向。



而自适应,则是在父级区域内进行等分,这个等分的逻辑比较特别,需要左右各有一个子图层靠到头,新增的图层在这个基础上进行 “等间距分布”。



依序排列的优势,除了把现有的子图层快速布局以外,还可以用拖拽、键盘调整元素顺序。或者从外部拖动某个图层到该区域中,就可以插入序列,成为下级图层之一。



2.4.3 混合布局模式

前面两种布局模式,可以解决各种 UI 设计中的细节设置问题,理解起来也并不难,只要自己去操作一下就能学会。而真正让人头疼的,是自动布局可以相互嵌套,并混合这两种模式,在复杂的页面设计场景和组件模块中灵活应用。

下面我们通过一个模态对话框 Modal Dialog 案例来进行说明。这个对话框会包含3种不同的宽度规格,且对话内容不确定,可能会字数很多包含很多行的高度。



想要用自动布局实现一个满足需求的对话框,我的建议是先学会拆分里面的下级模块,通过完成下级模块的设置后再进行最终的合并调节。

在这个对话框中, 包含三个模块,顶部标题栏、中间内容区域,底部操作栏。

首先从顶部标题栏开始,我们随意创建个 280px * 44px 的矩形,然后再置入标题和图标到矩形中。之后全选它们创建成自动布局,然后设置父层级内间距,且改成宽度固定、分布自适应,就可以获得一个可以随意修改宽度的标题栏了。



然后就是内容区域,本质上就是一个文本区域,所以我们拖拽一个文本区域出来,设置好对应的参数和填充一点文本即可。

而底部操作栏,则在一开始做好两个按钮(可以使用自动布局做)和背景以后,就可以进行合并,只是父级元素上的设置要改成固定宽度和右对齐,并设置布局间距(按钮间距)。



这三个模块完成以后,我们再选中它们进行自动布局合并,把它们设置成竖排模式,再添加背景色和排列间距,就可以实现出一个正常的对话框效果。



到这一步,如果我们修改对话框整体的宽度,或者输入多行的文本,都无法达到预期的效果,所以还要在这个基础上进一步的调整。

首先是宽度适应,我们要先将最上级的自动布局改成 “固定宽度”,然后将下级图层都改为 “自适应”,这样我们增加组件的宽,下方布局就会立即响应,且推导到更下级的图层中。



为了满足文字宽度随父级响应,高度影响父级高度,就要将顶部的自动布局改成 “高度适配”,再将下级的文本改成 “宽度自适应”、“自动高度”,然后,我们就可以随意拖动这个自动布局的宽,和添加任意的文本内容了。



完成这个基本的版本以后,我们再根据项目需要的三个宽度,直接将它复制成 3 份,每份直接设置对应的宽度出来,就可以作为后续的 “原始组件” 在项目中进行快速引用了。

在这个案例中,我们前后嵌套了若干层的自动布局,每层自动布局的上下级会有各自的响应关系,需要我们逐一进行确认。并且,细心的同学应该也发现,这里面有很多设置似乎和前面的响应式设置非常类似,那把一些下级布局从一开始就做成响应式的编组行不行?

答案是可以的…… 响应式设置和自动布局,本质上都是为了节省我们操作时间而设计的功能,我们要从实际设计的对象出发,选择合理的功能来实现最终的效果。而不是只能使用自动布局,或者只能使用响应式。

也不要因为了解了响应式包含了非常强大的自适应功能,而认为项目中任何组件、页面,都要全由它们组成。在需要频繁优化页面内容、调整设计需求的项目里,过度嵌套的自动布局会让设计文件的 “熵” 值无限增加,会产生更多复杂的、没有效率的问题。

相信引用过 Ant、TDesign 等组件库文件进行设计的同学应该都深有体会……

至于怎么用才好,没有标准的答案,就需要未来大家自己去积累相关经验了。

2.5 组件功能

2.5.1 组件的使用逻辑

有了前面响应式和自动布局的认识,我们就要进入到组件功能的具体应用上了。

组件的创建,首先要选中对应的设计元素,可以是单个图层,也可以是编组、自动布局层,然后点击生成组件按钮就可以创建出一个 “原始” 组件。

在即时设计中,这个组件叫 “引用组件”,从该组件复制、引用出来的副本叫做 “实例组件”。它们具有明确的从属关系。



在这个关系中,引用组件是完全可编辑修改的,只要修改它就可以统一修改关联的所有副本样式。



但由引用组件创建出来的副本,却不能任意编辑,我们不能修改它下级图层的尺寸、位置、顺序。但是,副本的编组大小、图层色彩、文字内容往往会有很多特殊的调节需求,所以目前主流的 UI 软件都支持了副本组件的尺寸修改、色彩编辑和文本内容编辑,让组件的使用更灵活。





以上就是组件使用的最基本逻辑,更进一步,组件作为一个编组,所包含的下级图层的逻辑都会被保留下来,例如样式设置、响应式设置、自动布局逻辑。如果一个编组原本就已经创建好了这些规则,那么当它被创建成组件,不管是引用组件还是副本,都会继承这些设置。

比如上一小节中的通知弹窗案例,设置好自动布局再创建成引用组件以后,生成的副本就可以灵活的进行调整和修改文本内容。



除了样式、响应、自动布局外,组件也可以包含组件。我们前面说过,按原子核的结构来讲,一个复杂的组件是由若干基础元素和控件组合而成。比如上方这个案例,就由多个模块、文本区域和按钮组成。

如果我们提前将按钮、图标等创建成引用组件,那么最终整个大的编组再创建成引用组件也是没有问题的,原来的组件格式并没有被抹消。

但有个细节值得注意,就是一个引用组件下方包含的组件只能是 —— 副本。如果刚才我们将按钮创建成引用组件,那么上级编组再创建的引用组件就会自动将这些按钮转换成副本,并在画布周围生成新的引用组件。

所以这个顺序也预示了,组件的嵌套是由下而上的,我们需要先创建低级的引用组件,再用它的副本逐步去组合更复杂的引用组件。这在后面的章节会进一步做出说明。

2.5.2 组件的文件管理

创建引用组件,除了在画布中它的描边色彩不一样,图层中的图标改变了以外,还会出现在一个新的位置中 —— 组件管理面板。

任何创建的组件都会被生成到左侧的组件栏目面板中,只要从那里拖拽就可以置入当前画布中,方便我们调用和查看。



看起来虽然很简单,但是需要我们管理的细节却很多。首先就是这个列表是一个包含层级关系的树桩结构目录,是允许我们对组件的层级进行结构自定义的。

当我们创建一个引用组件的时候,如果它处于一个画板中,那么创建后它会在组件面板中保留该组件的默认文件路径:

页面 Page / 画板 Frame / 组件 Compoent

如果我们在不同页面和不同画板中创建引用组件,那么该面板的目录一定是特别混乱无序的。所以为了创建出符合正常分类使用习惯的组件目录,就要做出调整。

首先就是建议在项目文件中创建一个独立的页面 Page 用来存放引用组件,任何新增的引用组件我们都需要将它置入到该页面中。且不要将引用组件直接置入到画板中,这样它就不会生产包含画板的层级出来。



然后,我们就可以在文件命名中,使用正斜杠 Slash 符号 “/” 作为层级划分依据。比如下面的案例,包含相同上级结构的组件会被聚合到一个目录层级中:

  • 数据录入/上传/亮色/拖拽上传
  • 数据录入/上传/亮色/上传中
  • 数据录入/上传/亮色/上传成功
  • 数据录入/上传/亮色/上传失败
  • 数据录入/上传/亮色/上传成功悬停
  • 数据录入/上传/亮色/上传失败悬停


这种命名结构带来的另一个好处,就是处于同一个目录层级下的组件,在属性面板中可以进行快速的切换。尤其是一些相近的组件要做替换不用再在树桩列表中重新找一遍,直接通过下拉菜单替换即可。



使用命名方式来梳理组件列表,完成有逻辑性、清晰的组件目录,可以极大地提升组件的利用率和效率。但命名必然不是一边创建组件一边凭感觉命名的,而是一开始就要在外部完成的,例如通过思维导图的方式制定出结构大纲,才能保证最终效果符合预期。



2.5.3 组件中的变体功能

组件的应用中,除了不同组件的引用外,过去最让我们头痛的就是同一个组件的不同状态。比如一个简单的按钮,就包含非常多的类型,默认、悬浮、按压、点过、禁用、读取等等。



为了在项目中可以使用组件的不同状态,就需要我们在命名上下功夫,比如:

  • 控件 / 基础 / 按钮-大 / 默
  • 控件 / 基础 / 按钮-大 / 悬浮
  • 控件 / 基础 / 按钮-大 / 点击
  • 控件 / 基础 / 按钮-大 / 禁用

就是用前面提到的右侧下拉菜单,来完成同一组件的不同状态切换。理论上这么实现是没有问题的,但在实践过程中,不仅组件列表的数量要大大增加,且下拉菜单第一步只改状态显得非常局促……

所以,从 Figma 开始推出了变体 Variants 功能,来更好地应对同一组件不同状态的高效应用。目前该功能已经在线上 UI 设计软件中普及。

在即时设计中,只要创建了引用组件,那么选中它后右侧就会有 “变体” 一栏,点击它就可以针对该组件创建出变体效果。



变体中原来的组件一分为二,并不是完全生成出一个全新的组件,而是在这个组件的概念下创建了一个新的状态出来,在组件列表面板中没有生成任何新的内容。

但是当我们再添加一个该组件的副本以后,就会发现它的右侧多了一个条目和下拉菜单,通过这个下拉菜单就可以切换刚才变体内的不同组件。

比如我们在变体内选中两个组件,在右侧变体的下拉菜单中可以点击修改命名,将它们分别改成 “默认” 和 “选中”,再修改对应的样式。然后再应用同一个副本,就可以看见下拉菜单的内容也替换成了“默认” 和 “选中”,通过选择不同的文字,就可以切换成对应的组件样式。



这个功能可以很方便的切换组件的不同状态,但如果它仅仅支持到这一步,那确实和使用命名编组的方法没有本质区别。真正让变体产生价值的,就在于同一组件的多属性、多状态支持。

还用按钮举例,比如一个按钮包含 3 种样式:纯文字、纯图标和文字加图标,再包含 3 种状态:默认、悬浮、点击,还有浅色和深色模式……

也就意味着,按钮包含样式、状态、色彩三种属性,每个属性中的值可以相互结合,那么总共就要设计出 18 个对应的按钮出来。



如果我们使用变体每个样式命名一个名字,那么下拉菜单有12个选项选起来也是很头疼的。所以,变体允许我们自定义组件属性和值,帮助我们更好的归类和选择组件样式。

所以,在变体面板中,我们可以在更多选项中选择添加分类就添加对应的属性内容,添加出 3 个分类后,通过双击修改它们的名字为 ”样式“、”状态“、”色彩“。



有了属性,变体下方的组件命名就会根本变更。如下图所示,默认一次显示属性值,双击则可以查看对应的属性名和值。



即变体的基本命名语法为 —— 属性1 = 对应类型, 属性2 = 对应类型, 属性3 = 对应类型。

我们就可以通过这种语法方式完成对上方按钮的统一命名,如:

  • 样式 = 图标, 状态 = 默认, 色彩 = 浅色
  • 样式 = 图标, 状态 = 悬浮, 色彩 = 浅色
  • 样式 = 图标, 状态 = 点击, 色彩 = 浅色
  • 样式 = 文字, 状态 = 默认, 色彩 = 浅色
  • 样式 = 文字, 状态 = 悬浮, 色彩 = 浅色
  • ……

然后,将这些组件统一添加到同一个变体下,之后创建的副本,就可以在右侧变体面板中进行多维度的选项操作了。



具体的变体设置,分类、值的设置,可以自己在软件中摸索,我就不演示了。这里再额外提一个功能,就是对值的设置上,还可以应用 “布尔” 的规则,即选项中只包含 “是” 或 ’否“。

如果我们在色彩的值中只使用 ”是,否“、”yes,no“、”开,关“ 等反义词,那么副本变体选项中就会启用开关按钮,来替代原本的下拉菜单,提升操作的效率。



变体的使用可以很好的减少组件面板中组件的数量,提升组件状态切换的效率。如果一个组件创建变态后被嵌套在另一个组件之下,那么这个复合组件也可以快速修改下级组件的变体类型。

虽然变体功能看起来非常强大,但它并不能适用所有场景,因为修改起来影响的要素过多。它更适用于基础的控件和组件类型。如果针对复杂组件,尤其是包含多层组件嵌套的场景,往往使用命名的方式会比使用变体更有效率,这就需要大家自己在项目中积累经验做判断。

2.5.4 组件的发布和共享

通过前面的功能,就可以完成组件库的对应设置了,你可以在这个项目文件中调用这些组件完成项目。

但实际项目中,组件库的使用可不能被局限在一个项目文件里,我们往往会创建很多个项目文件,来设计不同的流程、版本、模块。于是,这些不同的文件都需要调用同一个样式和组件库。



所以,要让包含规范的文件能被其它文件引用,就需要我们在组件面板中,点击设计库按钮,在弹窗中点击 ”发布“,将它创建成一个设计资源库。这样,我们在别的文件中再次打开这个面板,就可以看到这个资源的开关,点击开关后,该文件就能调用里面的样式和组件了。



在项目中,需要先新建团队并邀请相关成员,然后再创建设计资源库,那么其他设计师才可以引用该资源来完成相关页面的设计。

至于每次原文件更新并落实到引用的其它文件这些细节操作,就需要大家自己去实践了。


作者:酸梅干超人
链接:https://www.zcool.com.cn/article/ZMTUwODcxMg==.html
来源:站酷
 

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

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

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

                

度咔-运营视觉语言的定义

雪涛


度咔是百度短视频生态首款面向泛知识创作者的视频剪辑工具,致力于降低泛知识类作者的创作门槛,助力生产优质的作品。

随着产品的功能迭代,体验的逐步更新,产品依势也需要打造更好的运营氛围和品牌印象来建立用户口碑、提升转化。对此,设计侧针对度咔产品进行了全面的思考和分析,通过重新定义度咔运营视觉语言,明确产品调性,帮助用户更新品牌认知。

一、品牌框架搭建


产品的运营视觉不只是单纯的画面展示,其背后都有更加明确的设计理念和手段,但运营视觉语言并不是千篇一律的,首先需要明确自身定位,突出产品独特性。


设计初期,我们针对同类型产品与用户类型进行了大量分析,在用户人群划分上度咔更具有针对性,目标用户是口播自媒体、知识类创作者。但不像专业剪辑软件门槛那么高,度咔更多的是通过特色产品功能帮助作者去降低剪辑门槛,业务主要通过征稿和教程的运营活动来提升用户认知,带动日活。


由此,我们梳理出度咔的品牌框架图。以度咔「专为口播自媒体打造的剪辑工具」产品定位作为切入点,依据其自身定位和度咔区别于同类产品的特色功能,我们提炼出“便捷”、“智能”、“专业”产品核心关键词。

二、定义度咔运营视觉语言


在前期创意阶段,我们通过大量的竞品调研、创意发散、概念嫁接等创意手段,找到时下大字为主导的版式创意。简洁明确的版式结构,适当的画面留白,使各元素在版面中形成具有条理清晰、富有节奏的视觉关系。这种逻辑方式,为运营视觉的高效、科学、严谨性提供了极大的便捷,同时也对应了度咔便捷、智能、专业的品牌感知。

对品牌定位、业务诉求、产品功能进行整合后,我们搭建以构成、配色、元素为主的视觉语言框架。

与时下大字为主导的版式创意相结合,建立以大字排版,强构成感为主的视觉语言基调。通过大量的风格测试不断完善视觉基调并投入到项目中,同时规范运营功能排版,搭建元素库,通过设计手法,达到专业与简洁的平衡,统一的视觉基调和品牌色强化用户对品牌认知。

1、重塑视觉基调:

1)统一风格

度咔以往的运营视觉趋于参差,导致整体视觉有较为强烈的割裂感,焕新后的视觉变得更加直率简约,以简洁的视觉风格保证内容传递的高效性。抛弃了诸多装饰元素,取而代之的是硬网格,保持视觉整体和谐统一感,同时也传递出度咔便捷、智能、专业的产品调性。

我们对运营页面进行了布局重构,采用白色底的背景突出文字信息,使得内容信息传达更加明确,突出核心内容。在各类场景中,我们通过品牌色彩、图形、符号的渗透,强化度咔品牌印记。

2)主题延展

根据业务诉求,保持主题性征稿活动的特色——在强化功能点的运营活动中采用3D元素和弥散渐变背景,如夏日主题将度咔符号与泳圈做3D创意结合,增添活动氛围感。

2、品牌色焕新:

1)建立度咔品牌色应用规范。增强品牌识别性和记忆点。

首先搜集符合产品调性的颜色情绪版,选取整体偏明亮,识别度高的新品牌蓝色。对比原来偏紫的品牌蓝,现在升级后的蓝色更显专业智能,且更具有电子意味。

在一个科学有效的色彩系统里,往往包含至少两种色彩:主色+辅助色,两者互相搭配组合成产品体系的整体色彩感受,减少用户在产品体验中对反复出现的主色的视觉疲劳。

我们将蓝色赋予了统一的品牌认知感受,并且将蓝色加入到橙色里,生成了度咔特有的蓝橙色系。橙色在度咔的色彩系统中起着至关重要的作用,为产品带来积极,活力的感受,同时深黑和灰色创造结构、表达边界、建立信息层次。

以基础征稿活动为主的页面使用度咔标准蓝;在需要强主题和活动氛围的页面加入轻量的弥散渐变色彩。

3、提升效率:

1)元素库搭建

建立度咔元素库,规范化运营活动主视觉图形原创性和创意性,沉淀设计资产。

由于后期运营活动多处用到3D元素,对3D的质感进行了规范统一。轻量化的3D风格更加注重极简主义理性美学。

考虑到运营页面的通用性,避免3D材质的喧宾夺主,材质风格以简单通用为主,颜色以品牌色为基础,采用光感通透的玻璃材质,加入环境光感。明朗,透传度咔的品牌气质。



四、总结


本次通过度咔运营视觉语言的搭建,无论从产品本身还是设计侧,在数据和效率上都有明显的提升。而设计作为和用户最近的一方,在平衡各方诉求后呈现给用户一个全新专业感十足的产品,进一步向用户传达品牌感知,助力创作者发现更多美好。

感谢阅读,以上内容均由百度MEUX团队原创设计,以及百度MEUX版权所有,转载请注明出处,违者必究,谢谢您的合作。申请转载授权后台回复【转载】。也欢迎加入MEUX,视觉/交互/运营设计师,可投简历至MEUX@BAIDU.COM (注明信息获取来源如:站酷)

关于我们:
MEUX,百度移动生态用户体验设计中心,负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念,创造极致用户体验的同时赋能商业,推动设计行业的价值和影响力,让生活因设计而更美好。


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTUxMzc0OA==.html
来源:站酷

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

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

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

                         

小米图标设计背后的思考!

雪涛

借此机会和大家交流一下项目背后的思考,共同进步!



我将从以下几个方面进行讲解:

01 对于理念的思考

02 关于风格的思考

03 关于背景的思考

04 关于材质的思考

01 关于理念的思考-源自生活的灵感来源

对于本次设计,需求方是没有给主题限制的,那作为设计师的我就从自身现阶段的生活去发现主题、寻找灵感。 从深圳到成都创业,将近一年的时间,我发现成都的天气总是阴沉沉的:



充足的阳光变得非常稀缺,对于成都人来说,如果有阳光的时候,都会去外面坐坐,晒晒太阳! 这一年,“光”对我说是一种期盼的事物:



基于这个生活细节,我就把主题定成了“追光空间”而我对于“追光空间”的理解就是:光感、纯净、灵动



后面的执行也是基于这个理念进行思考创新的!

02 关于风格的思考-找到未被发现的切入点

有了主题,就可以基于主题去思考设计风格了。

其实主题图标的设计其实已经有很多年头了,尤其是“app”这个概念流行开始,各大安卓手机品牌就有了自己的主题商店,用户可以根据喜好下载自己喜欢的主题图标。 我们在网上搜索主题图标,可以看到很多作品,其中不乏有非常优秀的主题作品,但是当观察的量到达一定程度后,会发现市面上的主题图标风格还是比较相似,大部分还都是属于二维图标(下图源自网络):



即使是一些质感很强的图标,很多也是鼠绘出来的,也不算是3D风格(下图源自7years):



包括我们去年给小米做的几套主题,也都是偏2维风格的





基于这样的现象,我们是否可以尝试将3d风格与主题图标进行融合呢?虽然不能说是第一个这么做的,但至少在市面上出现的这种结合还是相对较少,所以也可以算是一种小的创新。

在构想风格的时候,我的底层逻辑就是找到未被发现的切入点,如何理解呢?

如果是3d风格与电商活动结合,已经相对常见了(下图源自网络):



如果是3d风格与游戏视觉结合,也经常会看到(下图源自网络):



但是如果是3d风格与主题图标结合并且落地使用,那还是相对比较少的,这就是我在思考风格时候的一点心得:



希望可以给同行们一点启发,抛砖引玉,希望市面上可以看到更多的3d风格的主题图标!

03 关于背景的思考-基础形的美感释放

这次的主题和以往不一样,我们每做一个图标需要延展4个尺寸:



有一些宽的、有一些高的,如果我们只放一个图标,那么会比较空旷,不够饱满,所以我们必须在背景上加一些图案或者纹理,使整体更加饱满精致。

背景纹理怎么做呢?我们希望它有细节但又不能过于抢眼,于是把目光锁定在了基础形状上面,比如方形、圆形、三角形等等:




锁定基础形之后,就需要在基础形之上融入更多的设计思考,比如风格的结合,因为整体是3d风格,所以背景也可以是3d化的基础形白膜:



除此之外,我们需要将图形进行构成设计,以不同的节奏和位置使其产生不同的美感,把基础美多维度的释放出来,比如矩形的基础元素进行构成设计:



这样,就可以做出不同的背景图案,以此来解决需求目标。

设计师一定不要轻视基础,不管是技法层面还是审美层面,往往优秀的设计都是无数个“基础”堆出来的,先掌握基础,才能用“基础”释放更大的能量!

04 关于材质的思考-日光下的玻璃质感结合

其实本次的材质,也不算难,没有用到特殊材质,主要有两个关键点可以分享交流!

关于灯光

灯光我们使用的是日光灯,从软件操作层面没有任何技术含量,但是对于基础审美会有一定的门槛,尤其是对于明暗交界线、光影对比的理解!

灯光的不同位置和大小会导致光影质感的不同:

灯光曝光:



质感太平:



物体与背景区分度不够:



同样的物体,不同的灯光角度和大小就会有不同的质量等级:



只有这种基础审美达标后,我们才能继续往后延伸。

关于材质

对于材质,最初我们尝试用最简单的漫射材质,但是发现缺少光泽度和细节,于是又尝试在外部加一层玻璃材质,形成一圈透明质感和细节:



后面大部分的图标都采用这种形式进行延展!



以上就是这次项目背后的一些思考



共勉!


作者:小脑府设计团队
链接:https://www.zcool.com.cn/article/ZMTUxMzkzMg==.html
来源:站酷

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

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

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

                           

从入门到实战丨C4D自学必备指南

雪涛

导语

近年三维表现已经越来越多的融入到各种商业设计当中,在电商、品牌、UI、影视等各个领域都有广泛的运用。其中一个关键因素是C4D这款软件的出现,大大降低了3D设计的学习门槛。

C4D相对于专业性更强、功能较为复杂的3DMax、Maya、ZBrush等软件,界面更加简洁友好,对于没有接触过3D的的小白,学习成本更低。配合Octane、Redshift等渲染器,可以很快做出强视觉表现力的效果。凭借这种操作友好、易出效果的特性,C4D很快成为了近年最流行的3D设计软件之一。

本文结合作者自身的经验整理了一波自学的思路和技巧,希望能在大家学习C4D的过程中有所帮助。

前言

相信很多没有三维设计基础的小白,刚接触到C4D时会有无从下手的感觉,面对各种形形色色的命令菜单和工具面板,内心是这样的:

其实大可不必担心,不同方向的设计师可以有不同的侧重点,只要掌握自身职业需要的模块,并不需要学会所有的功能。追求大而全反而难度大效率低,容易产生挫败感从而被劝退。

所以这里建议的C4D学习思路是:结合自身的职业方向,先明确要学习的侧重点,集中精力突破,然后再根据新的需要逐步学习更多即可。

学习过程则大体上分为入门、上手、实战三个阶段。

Part 1. 入门

1.1 明确学习方向

C4D大体可以分为建模、渲染、角色、动画、运动图形、动力学这几个模块,每个模块都可以看成是独立的知识体系,往下又有更具体的细分。真要全面仔细钻研的话,需要投入很多的时间精力,这也是让很多初学者无从下手甚至望而却步的原因。

所以除了建模和渲染是绕不开的基本模块,我们可以将另外几个看成是比较具有针对性的模块,具体需要着重学习哪一部分,则需要先明确最适合自己的学习方向:

比如你是电商设计师,平时的工作内容主要是制作各种产品高大上的渲染图以及推广视频,那除了基本的建模与渲染,还可以着重学习运动图形,做出各种酷炫的商业广告视频;

如果你是IP设计师,则需着重学习角色模块,在完成静态角色的建模渲染后,绑骨骼刷权重也是必须掌握的知识点,才能做出丰富的动作和表情,让角色生动起来;

总之,不同职业方向,甚至项目的不同时期,都有不同的学习侧重点,这里需要每个人自己去判断。

建模和渲染则是最常用的两个模块,无需有职业方向的针对性,都应该在前期优先学习,并且做到基本掌握甚至熟练运用。

常规的步骤是先学习建模,再学习渲染;不过建模比较枯燥,渲染则是最出效果也是最提升学习信心的环节,我认为根据个人喜好,先学渲染再学建模,反而是更推荐的学习顺序。

1.2 选择学习资源

选择学习资源方面,目前网络的免费教程十分丰富,依靠教程的学习足以让你初期快速的上手,新手在选择教程方面尽量以体系较为完整,演示时软件版本较好的原则,如英文水平较好建议去外网看看各路大神的教程,原汁原味的学习;另外考虑到外网资源的机翻和获取难度的原因,这里主要推荐一些国内网络能获取自学资源:

建模

建模方面在学习阶段主要注重C4D的工具使用和基础技巧,这里推荐几个免费教程。

1、https://www.bilibili.com/video/BV1Cb411T7Dc?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276

2、https://www.bilibili.com/video/BV1PZ4y1s7vm?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276 

渲染

渲染以OC渲染器为例,这是现网能找到比较完整的免费教程,学习后可以直接上手出图。

1、https://www.bilibili.com/video/BV1ur4y1T72V?p=39&vd_source=018f00780190d4b9c79b5abbdb3be276

2、https://www.bilibili.com/video/BV1f4411V7qh?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276

动力学

动力学可以由浅入深,从基础的常用动态手法及运动原理开始入手,以小实例练习的方式慢慢转向大场景的动态设计学习。

1、https://www.bilibili.com/video/BV17f4y127uv/?spm_id_from=333.788.recommend_more_video.1&vd_source=018f00780190d4b9c79b5abbdb3be276

2、https://www.bilibili.com/video/BV1ZA411w7qC/?spm_id_from=333.337.search-card.all.click&vd_source=018f00780190d4b9c79b5abbdb3be276

更多综合性实战教程

各大网站都能找到不少实战案例的教程,根据需要可以找到更多。

1.https://www.bilibili.com/video/BV177411P7d1?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276

2.https://www.bilibili.com/video/BV1AY4y1G7Nc?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276

1.3 软硬件配置相关

打团下副本之前,还得先准备一下装备;这里简单对于萌新学习前的软硬件要求做一些说明和推荐。

渲染器选择

C4D目前可选主流的渲染器有octane、阿诺德、Redshift、vray、自带渲染器(不推荐)。主流渲染器各有优缺点,综合下来笔者推荐萌新选择OC渲染器,原因是学习资源多,学习难度低,渲染效果优、渲染速度快等优点。

以下是各渲染器的对比,萌新们可权衡自身的情况进行选择:

电脑配置

PC电脑方面,以笔者正版OC4.0渲染器为例,显卡选择N卡,型号以20系列以上最好,显存4G以上(有经费的可以入手今年的40系列显卡);其他配置看自己的经济情况而定,如CPU方面单核性能越强对于渲染效率和c4d默认渲染器的加速越快,内存推荐64G以上,另外在电源上如果已经配备了20系列以上的显卡建议选择900W以上的,除了显卡和CPU这两个核心硬件其他的配置主要看个人情况而定,对电脑不懂的优先看电商平台的整机方案,主要以显卡和cpu为参考依据,其他的配置可浮动选择。

苹果电脑方面,笔者并不推荐以3d工作为主的设计师选择苹果电脑,主要原因是主流渲染器的选择较少,另外C4D插件各方面的支持也远不如PC方便和丰富(如有特殊原因,可以优先选择M1芯片的电脑或者配备N卡独显的苹果电脑)。

软件版本

C4D软件版本推荐使用最新版本或者R23以上版本,随着厂商的更新换代,有些以前只有插件能完成的功能慢慢完善在新版本上,新版本带来的便捷功能可提高萌新的出图效率并免去旧版本没有兼顾的功能导致的学习成本浪费问题。

另外在OC渲染器上的版本问题尽量以当前版本能兼容的最新OC为主,当然,需要你的显卡需要和OC版本是匹配的情况下。

1.4 好记性不如烂笔头

收藏和观看的教程多了,容易看了后面的忘记前面的,或者没有实际上手印象不深。这里我尝试过最好用的方法可以总结为一句话,就是俗话说的“好记性不如烂笔头”。

对于一些关键的知识点,或者很有用的上手练习案例,可以在自己学习或者练习后,将关键步骤以在线笔记的形式自己整理一遍。

这样做有两个好处,一是能大大加深你对知识点的印象,不易遗忘;二是即使真的隔了很长时间有所遗忘,只要调出对应的文字笔记,就能很快重新想起对应知识点,比起重新翻出视频教程,边拖进度条检索再看一遍,效率高得多。

比如我之前在学习渲染体积光效果(丁达尔效应)时,总是掌握的不扎实,学过就忘,下回再用到时,基本相当于又要翻出视频教程再看一遍,效率很低。但是将关键知识点整理成笔记后,不单对这个知识点记得很牢,甚至能在不重新翻看笔记和教程的条件下,熟练的以教程中提到的三种不同方式做出体积光。

笔记链接:https://note.youdao.com/s/Lwt42DsG

以下是我整理的部分笔记库,感觉在笔记库里的知识点才算是比较掌握了的。

1.5 多搜集优秀案例

除了掌握工具,多看优秀案例以提升自己的设计思维和审美也很重要,只有看的优秀案例够多够好,将自己的设计眼光、审美水平、思考方式向大神们的靠拢,才能做出好的作品。

这里推荐几个我觉得的很赞的3D类网站:

Artstation:http://www.artstation.com;

Sketchfab:https://sketchfab.com/feed;

Behance 3D:https://www.behance.net/galleries/3d-art;

Dribbble 3D:https://dribbble.com/search/3d;

Part 2. 上手

2.1 熟能生巧多练习

上手阶段,充分的动手练习是必不可少的。

这里的练习也分为两种,一种是跟随教程案例做出一样的效果,一种则是结合自己感兴趣的题材设定一个主题或场景,将学习的知识点融会贯通,在自己的命题作品里实际应用起来。两种练习的方式也是相辅相成,在积累足够多的教程案例练习后,更推荐按照自己的想法来创作。

比如我会将自己感兴趣的漫画题材,在C4D里作为一个场景练习,融合进平时学的一些知识点。

《头文字D》场景

《海贼王》场景

因为用的是自己感兴趣的内容练习,所以做起来也上手很快,知识点也记得很牢,推荐大家可以试试。

2.2 善用插件提效率

1.Forester-植物生成插件

轻松生成各种类型的植物和部分岩石,各项小参数的调整方便个性化的调整,另外有便捷的动力系统可以轻松制作风吹植物的效果,结合OC渲染器的克隆功能搭建大场景非常轻松,适合在做动态设计的时候快速生成搭建场景。

2.QuadRemesher-四边面重拓补

有时候我们工作中会遇到三角面模型,对于新手来说转换成四角面模型可以选择这款插件轻松转换成你想要的四角面而且还有便捷的参数可以调整。

3.PolyCircle-挖洞插件及Nitro4D NitroCap-封洞插件

在日常建模的工作中经常需要给模型开洞及封洞的操作,虽然靠布线调整也可以实现,但是插件的效率更便捷,所以推荐这两款插件分别对应的模型开洞及模型封洞的功能,另外注意在C4D软件R26之前都是必备的插件,但如果你软件版本是R26以上版本,那么自带整合了这样的工具,不需要额外安装插件了。

4.CodeVonc Proc3durale-镂空腐蚀溶洞效果插件

这是一款风格化的效果插件,可以配合噪波制造出独一无二的风化、镂空、分解动画、甚至是流体动画的效果,在产品设计及品牌动态视频中运用广泛。

(图来源于网络侵删)

5.TerraformFX-地形插件

这块地形插件,可以让你轻易搭建自然环境,制作次时代的虚幻场景,操作简单,可以在Cinema 4D 中生成、动画和逼真的地形。在几秒钟内创建非常详细的山脉、峡谷和沙漠。直观的非破坏性工作流程可以轻松创建和自定义地形。

(图来源于网络侵删)

Part 3. 实战

在入门的学习和上手的练习之后,相信很多人都会对C4D有了初步的掌握。这时更重要的当然是将这些学到的知识点运用到实际项目当中,这样的实战操作才能让你的知识体系更有针对性,并且实际项目命题固定、要求更高,完成后的提升才会更大。

这里分享几个在完成基础的学习与练习后,我们用C4D做的实际项目。

3.1 QQ小游戏-春节会场

小游戏会场是从QQ春节活动的主会场进入,通过限时抽奖以及游戏任务等形式,引导用户参与活动,从而提升业务增长和助力品牌传播。

在前期设计推导阶段,我提炼了三个设计关键词,并对应发散出一些相关元素:

一是游戏:这是凸显平台特色和趣味性的元素;

二是福利:这是强化用户参与活动的动机;

三是春节:春节活动不可少的是体现节日氛围的元素;

根据这些元素画了三个方向的概念草图,分别以游戏机、扭蛋机、街机作为主要载体。

最终我们选择了通过破窗的形式将Q猛虎结合进场景中的方向一,展示游戏和夺宝元素,让用户感知福利的同时,也体现小游戏平台的特色和趣味性。

创意上是参照超级玛丽这种经典的横版过关形式,也将中国传统建筑中的红墙金瓦、松树、福袋这些元素融入在了画面中。

游戏机场景及其他主要元素建模

场景白模及空间构成设定

角色及福袋动态的制作,这里主要用到了角色及动力学模块相关的一些知识点。

渲染完成后的主视觉,Q猛虎在游戏机上往前奔跑,不断获得福袋并蹦出金币、红包实际UI中的应用效果

实际UI中的应用效果

另外将主视觉中的“松树”,延展成了松、竹、梅、兰这四种具有传统中国风的植物,作为辅助元素运用到页面中,保持整体调性的统一。

部分主要页面总览

3.2 QQ红包-节日封皮

节日红包封皮是传递用户关怀的重要手段,作为QQ红包的一部分,我们希望让用户有更新颖的感知和更深刻的共鸣。

相对于常规的插画手绘风格,我们希望尝试用3D的方式做一些新的探索。

在构思中秋节的红包封皮时,首先围绕“中秋”进行关键词发散

再选取其中桂树、玉兔、明月等这几个适合构建场景的元素,构建成一个立体化的场景

将一些元素抽象化,结合3D手法,加入更有意境的表达

最终完成的效果,整体也是塑造一个比较有中国风和意境的场景

新年封皮也是用同样的方式完成,像刚才中秋的桂花树一样,这里也将锦鲤也做了一些抽象化的表达,比如鱼的眼睛是宝石质感,鱼的身体是黄金质感,传递一种新年好运、财运连连的感觉。

最终完成的效果,QQ和banyQ坐在锦鲤背上,手上拿着铜钱串在吊锦鲤,寓意新年大吉大利、锦鲤附体。

新版封皮的使用量对比旧版有了较大提升,可以看出用户对新版封皮的喜爱程度还是很高的,目前的节日封皮也是按照新风格持续延展中。

Part 4. 结语

以上就是本文的全部内容,希望能帮助大家在学习C4D的过程中有所帮助,总结下来就是多看多练多运用。对文中提到的插件感兴趣的朋友,也可以通过附上的链接去官网了解更多详细介绍。若是大家有更好的学习建议,也欢迎在评论区留言一起讨论。



作者:腾讯ISUX

链接:https://www.zcool.com.cn/article/ZMTUxNDU4MA==.html

来源:站酷


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

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

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

如何提高界面信息识别效率?

分享达人

一、为什么要提高界面信息识别效率?(Why)

界面设计的好坏,会直接影响到用户的使用体验,很多时候我们往往会直接拿到竞品的页面搬运到自己产品上,而没有针对自身产品的特点和业务加以思考。

这种做法理论上不会让自己的页面出错。但是很多人往往忽略了一点,就是别人这么设计的出发点是什么,是否匹配自身产品的业务流程,如果不了解这些贸然的去搬运设计,那么时间久了就会养成一个不好的习惯,导致思维不能得到足够的刺激和知识的沉淀。当需要我们专门进行设计构思时,就会遇到诸多困难。

如果是刚入手的领域,前期可以去进行适当的搬运参考,但是一定要了解别人设计思考点,明白其背后的原因,将其沉淀成自己的知识储备在脑海中。

1. 信息大爆炸

过去60年,人类社会的数据发生了爆炸式增长。2008年人类大约创造了近10亿张DVD能存储的数据,这等同于过去5000年的人类创造数据的总和。12年,调研机构预测信息每隔18月会翻一倍20年,调研机构预测信息每隔73天会翻一倍

2. 人类的生理局限

在信息爆炸的年代,人类进化的速度却是缓慢的,我们现在的大脑跟250万年前的原始人并没有太大区别。

我们的大脑每秒钟要接收约4000万次的感官信息输入,但意识一次能注意到其中约40个,其中短期工作记忆能处理的只有4±1个。

正是由于现代信息数据的大爆炸,多数产品日益臃肿的结构,以及人类有限的处理能力,所以呈现什么信息,以何种形式呈现的信息层级设计就非常重要。

作为设计师,我们有必要根据自身产品的业务方向,以及用户的行为和特征,结合信息环境,选择合适的信息,并以适合的方式进行组织和呈现,以便让用户获取并理解信息更容易,完成信息的组织和传达作用。

二、如何提高界面信息识别效率?(How)

1. 信息分类

相关联信息需要进行归类,无论是什么类型的产品模块,我们在设计中应当做好信息分层,当两段内容元素具有关联性时,他们应当作为一个整体给用户展现。

2. 层级区分

(1)层级数量应靠近“3”

信息层级作为影响页面信息传达效率的重要因素之一,那么怎样做好页面的信息层级便尤为重要。网上资料大多都在围绕对比、对齐、亲密、重复四个基本原则讲解。

不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用,并且也是我们非常熟悉的。但其阐述得太过宽泛,在我们实际工作中面对复杂层级排版时,仍会面感到困惑,很难直接有效地利用。

于是我把优秀的案例进行收集并整理分析。

经过线上页面与概念的整体研究发现,他们在遵循排版原则的基础上,都存在着一个简单的规律:主内容的层级控制在三层左右。

如下图所示:

可以发现,三层左右的层级是最容易被用户识别的,且视觉上不易混乱。三层往后,随着层级越多其复杂性会成比增加。

比如我们看下面这两个例子,左边层级方面平铺直叙没有重构区分,使得层级复杂,造成用户识别效率变低。但其实我们只需要对信息加以归类并控制层级数量,瞬间就变得更简单且易懂。

因此,我们需要在着手设计前,首先思考一个逻辑:尽量将我们的内容层级控制在三层左右,且这三层内有比较明显的对比关系。

有朋友看到这肯定要问了,这个道理大家都懂啊,可是在实际工作中大多数拿到的信息都非常多,根本做不到保持在三层以内。别着急,本文的重点当然不是告诉你这么简单的道理,而是在面对复杂层级的时候,我们应该怎样去控制它的层级表现,从而让它在最终呈现上保持在三层左右,让用户获取信息的效率更高。

(2)源头筛选处理

源头筛选的关键在于接手复杂信息时,我们首先需要从源头上进行第一层的判断,了解这些信息是否真实地被需要。这也是我们大多数人容易忽视的一点,当然这也不能完全怪我们,因为通常需求给到我们的时候都是大致的概括,好一点的话还有个交接文档,甚至有时候需求拿到我们手上时,已经转好几手了交接人可能也不知所云,导致很难知晓其底层出因,

源头筛选的本质就是判断我们当前所要呈现的信息是不是必要的。

比如某些时候产品给到了我们很多信息,但我们并不一定会全盘接受,而是通过当前页面的业务场景去进行判断。确定每个信息的合理性,从而可以决定有些元素是否可以删减,提高整体信息设计的一致性。

过程需要我们对以下2点进行思考:

  1. 此信息真的是页面中的必要信息吗,如果去掉是否会产生直接影响:比如当打开高德地图的时候,在你浏览地图时,界面只呈现强关联功能模块。只有当你上划进入二级页面时,其它相关功能才会展现,这些都是按照用户的使用场景来进行对应的呈现。
  2. 当前信息的重要程度是怎样的,对于某些不重要的信息是否可以通过隐藏的方式展现:当你拿到一堆信息,信息的重要程度就决定了我们需要将哪些信息作为主体,哪些信息作为次要辅助信息,哪些信息甚至可以收起或者省略。比如当你使用语雀创建文档时,编辑和浏览永远是最关注的,而跳转入口等都是次要信息,将其隐藏反而提高效率。

上述两个问题的确认,会影响我们对后面的信息排布。因此我们需要在源头,比如去和产品或者业务沟通,弄清楚该信息呈现的缘由以及必要性,这样能够帮助我们最后理清楚信息层级。

(3)在排布上降低复杂度

信息排布的本质是通过我们对信息进行主观的排列上的组织重构,来将复杂的层级控制在三层左右的区间里。从而保证我们页面的简洁性、规律性、识别性。

通过目前的实践总结,合理地安排信息层级的方法大致可以分为:分组、组件、组织、融入、弱化。

① 信息分组

信息分组是大家在设计时都能够想到的形式,分组能够将复杂的信息归组从整,从而降低整体复杂度,清晰线索。

我们常用的分组方式主要有三种:间距、分割线、卡片

那么这三种方式有没有区分呢?

VIVO设计团队曾经就这个问题展开过用户调研,但结果表示,如果纯粹从用户的角度来讲,对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感,因此我们可以根据当前信息的复杂度作出以下规则:

  • 复杂度较低时,优先采用留白分割,视觉清爽五干扰;
  • 当留白分割效果不明显时,可引入线性分割,让层次更清晰且保证屏效;
  • 需要进一步强化信息之间的边界感,可引入卡片样式,强化层次和可操作性。

② 利用组件拆分

组件其实是目前大部分设计师在进行信息排布时必备的部分,因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是,目前这几种组件对于我们信息层级的划分起到了比较重要的作用:树形结构、表格结构、步骤条、选项卡。

  • 树形结构。对于有关联性的多层级非常适合,可以将复杂的层级结构进行收拢,从而能够显著降低信息的复杂度。
  • 表格结构。对于信息多且关联性不大的复杂信息,可以聚合到表格来进行呈现,但表格的呈现方式不宜滥用,需要根据我们场景来进行选择。
  • 步骤条。步骤条则对场景要求非常明确,我们可以将多个场景通过分步的形式进行呈现,从而减少当前页面的复杂度。
  • 选项卡。选项卡更适合与同级的数据,对于同类型的结构可以更好地将页面进行拆分,从而让当前页面更简洁。

③ 灵活组织

通过对组织方式的调整,我们可以将多层结构的样式通过拆分布局来将其控制在三层内。

举个简单的例子:

从图中你可以看出左侧的层级较多,尤其是两层tab的叠加,视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局,从上下结构变为左右结构,达到从视觉上简化层级的作用:

当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时,我们可以通过改变结构使其交互逻辑更清晰,从而减少其复杂度。

④ 巧妙融入

我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式,让其融入到同一个层级中。比如我们看下面这一个例子,产品设计中将button与查询项利用分割排列在一起,从而变为同一层级,通过这种方式有效降低了页面的复杂度。

当我们在进行B端布局时,信息融入这个方法用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间,还能够降低信息层级的复杂度。

但在进行信息融入的过程中,我们需要注意的是:如果放在同一层级会造成理解上的误解时,这个时候不要采用该方案。比如搜索框的位置,放在哪个层级决定了对应的搜索范围。

⑤ 信息弱化

信息弱化的原则是:将某些超出层级的部分进行弱化。

比如图中有5个层级,但其巧妙地将功能筛选融入到了当前的结构中,使得即使超过3层我们也不会觉得其特别复杂。

在很多时候,我们觉得信息混乱的原因,就是页面要素太多太花哨。

比如工作中的一个小卡片,也就是利用信息弱化去减少画面的复杂度:

因此我们需要学会对信息分级,不重要的信息就进行弱化,这样整体的呈现上会好很多。

但不可否认仍会有更复杂的页面,即使缩减也仍有过多层级,那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。

(4)突出热区

当模块具有按钮、文字链、图片入口等需要下一步操作的关键元素,需要进行高亮显示,以此帮助用户快速定位目标。

图中 “Learn more” 使用文字高亮进行处理,通过颜色让用户快速定位入口,且不影响用户正常阅读,若使用色块按钮进行突出,模块会冗余,过于喧宾夺主。

3. 可见性

当产品需要用户进行多步骤完成任务时,应当展示系统进度,让用户了解他们的行为操作在界面中所处于的位置。

比如下图中房屋装修信息填写流程,用户面对这种多流程任务时,耐心往往很低,我们可以在设计时添加系统状态进度条,时刻提示用户当前的节点,此方法应用场景还有注册登录、信息完善等更多场景,目的都是为了让用户达到交互可预测的状态,提升用户体验。

4. 遵循视觉动线

我们在设计内容复杂的网页时,建议根据产品诉求和用户目标,合理的放置元素,以此来达到目标,另一方面符合眼动规律的浏览顺序,可以让用户不会产生视觉疲惫,每个视觉点停顿时看到元素都是不同,提升用户体验。

5. 合理的字体加粗

在设计大面积文字排版时,应当注意字体粗细,它决定着我们的设计是否易读性高。

无论标题还是内容,字体过重或者过轻都会降低文本的基本识别度,而且遇到文字信息过多的情况,长时间专注文本的识别很容易出现视觉疲劳的情况。

在设计UI界面中,无论是长文字体还是模块元素字体,我们都要注意字体的重量,保证基本识别度的同时,优化视觉重心,确保用户在阅读时不容易陷入疲劳。

6. 孰轻孰重

当界面中存在多个入口时,我们可以对这些入口进行优先级处理,以突出核心功能为目的,用户浏览界面的动作是大面积扫读的形式,这就意味着我们需要弱化无关信息,既保证了界面的基本美观性,又能够具备良好的体验。


作者:CKin.记事本
转载请注明:人人都是产品经理

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


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


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


web自动化测试入门篇03——selenium使用教程

前端达人

1. 目的

web自动化测试作为软件自动化测试领域中绕不过去的一个“香饽饽”,通常都会作为广大测试从业者的首选学习对象,相较于C/S架构的自动化来说,B/S有着其无法忽视的诸多优势,从行业发展趋、研发模式特点、测试工具支持,其整体的完整生态已经远远超过了C/S架构方面的测试价值。接上一篇文章,我们将继续深入探讨Selenium的相关使用方法与技巧。

 
 

2. 说明

此篇中所用的技术栈为Selenium+Python,因其本身编程难度不高,总体思想都是基于面向对象的编程理念,故只要大家的编码语言基础不弱,就完全可以做到平替。

 
 

3. 关于解答上一篇的问题

在正式启动浏览器之前,这里还需要说说上一篇没有提及的一个问题,后台有同学私信说在对应驱动网站上完全找不到自己浏览器对应版本的驱动,关于浏览器驱动的版本,大家都知道驱动的版本应该是要与浏览器的版本完全对应上的。但往往日常工作中因为环境或者其他客观因素会导致浏览器的版本五花八门,也会出现驱动网站上完全没有你目前工作环境中对应的浏览器版本,这里我们大可使用中版本号一致的驱动来进行尝试,没有必要将版本进行完全的匹配。比如你的Chrome浏览器的版本号为107.0.5304.107,如果这时对应网站只有107.0.5304.62108.0.5359.22的前后两个版本的驱动比较相近,这里就有两个选择,第一就是卸掉原有的浏览器,安装对应的版本;第二则是选择107.0.5304.62来进行尝试;相信大家在成本耗时的判断下,一般都会选择第二个选项来进行尝试对吧?那么我可以很负责任的告诉你,第二个判断是完全行的通的。不必太过纠结驱动的小版本号是否完全匹配。

 
 

4. 启动

我们将一切准备就绪后就可以开始我们的selenium之旅了,首先我们需要将使用selenium进行浏览器的启动(访问百度)。

from selenium import webdriver

browser = webdriver.Chrome() browser.get('https://www.baidu.com') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

 

如果对应的浏览器驱动没有进行环境变量的设置,可以在代码中直接进行程序的路径指定来进行后续的浏览器操作。

from selenium import webdriver

path = r'C:\Program Files\Google\Chrome\Application\chromedriver.exe' browser = webdriver.Chrome(path) browser.get('https://www.baidu.com') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

 

使用Selenium打开后的浏览器都会标识出正在受到自动化测试软件控制的相关提示。

在这里插入图片描述

 
 

5. 浏览器基础操作

Selenium本身提供给了我们非常多的各类浏览器与页面的操作函数,方便我们根据所需测试业务来进行自由搭配使用甚至是二开。

 

5.1 浏览器窗口操作

对于浏览器窗口的尺寸进行控制与获取,如最大化、最小化、指定窗口大小等。

 

窗口全屏

browser.fullscreen_window() 
  • 1

 
窗口最大化

browser.maximize_window() 
  • 1

 
窗口最小化

browser.minimize_window() 
  • 1

 
自定义窗口大小(宽X高)

browser.set_window_size(1080, 720) 
  • 1

 
自定义窗口坐标位置与大小(x坐标,y坐标,宽X高)

browser.set_window_rect(100, 200, 1080, 720) 
  • 1

 
获取窗口的大小(宽X高)

browser.get_window_size() 
  • 1

 
获取窗口的坐标位置,返回一个字典对象

browser.get_window_position() 
  • 1

 
获取窗口的坐标与大小(x坐标,y坐标,宽X高)

browser.get_window_rect() 
  • 1

 
获取当前窗口的句柄

browser.current_window_handle 
  • 1

 
获取当前所有窗口的句柄

browser.window_handles 
  • 1

 
 

5.2 页面基础操作

对于浏览器当前页面的一些操作,如前进、后退、刷新等。

 
前进(下一页面)

browser.forward() 
  • 1

 
后退(上一页面)

browser.back() 
  • 1

 
刷新(当前页面)

browser.refresh() 
  • 1

 
截图并保存为test.png(当前页面)

browser.save_screenshot('test.png') 
  • 1

 
截图并保存为png文件(当前页面)

browser.get_screenshot_as_file('test_02.png') 
  • 1

 
截图并将信息转为base64编码的字符串

browser.get_screenshot_as_base64() 
  • 1

 
 

5.3 信息操作

对于浏览器当前一些信息的获取与操作。

 
获取页面URL(当前页面)

browser.current_url 
  • 1

 
获取日志类型,会返回一个列表对象

browser.log_types 
  • 1

 
获取浏览器操作日志,注意函数内的参数为固定值类型’browser’

browser.get_log('browser') 
  • 1

 
获取设备操作日志,参数原理同上

browser.get_log('driver') 
  • 1

 
获取当前页面标题

browser.title 
  • 1

 
获取当前浏览器的名字

browser.name 
  • 1

 
 

5.4 元素操作

Selenium中最基础也是最重要的一环,基本上对于页面的业务操作大多数都集中与此。另外需要注意的是元素定位所使用的find_element_by的方法在很早之前就已经被废弃,这里同样也会使用最新的find_element方法进行讲解。
如何查看页面中的元素与其相关属性,这里以Chrome为例,我们只需按F12或者右键页面选择“检查”,再点击调试窗口的左上角的箭头标志或者使用快捷键Ctrl+Shift+C来进行元素的选取,此时Elements标签页中会将焦点对应跳转至该元素的html代码行中,接下来我们就可以针对不同的元素和不同的属性来进行定位操作。

 
在这里插入图片描述

 

5.4.1 name定位

通过一个元素的name属性来进行定位。

 

比如定位百度中的搜索栏,我们通过name属性来进行定位。该元素的html构造如下:

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off"> 
  • 1

 
我们只需将name属性后面的值拿出,赋予给find_element方法即可。新的By方法我们只需要导入selenium.webdriver.common.by下的By方法即可。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.NAME, 'wd') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

 

5.4.2 class name定位

通过一个元素的class属性来进行定位。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CLASS_NAME, 's_ipt') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 

5.4.3 id定位

通过一个元素的id属性来进行定位。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.ID, 'kw') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 

5.4.4 css定位

css selector也被成为选择器定位,它通过页面内的元素的id、name、tag三个属性来进行定位,根据元素属性的重复程度,可以单独属性定位也可组合属性来进行定位。而且相较于xpath定位方式来说,博主更推荐使用此方法来进行定位,无论是易用度还是维护性来说比xpath定位好的多。

 
单属性定位–tag属性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 
单属性定位–id属性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, '#kw') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 
单属性定位–class属性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, '.s_ipt') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 
多属性定位–tag+id属性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input#kw') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 
多属性定位–tag+class属性

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.CSS_SELECTOR, 'input.s_ipt') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 
同样的,其他的组合方式大家可以举一反三,不断尝试,比如模糊匹配input[class ~= "局部关键字"]、层级定位#form > span > input等等等等。

 

5.4.5 link text定位

这种定位方式适用于页面中带有超链接的元素,直接通过超链接标签内的文字进行元素定位。

我们以百度首页为例,可以看到该页面中有很多的超链接标签,如果我们想模拟点击跳转至新闻对应页面的操作,就可以用link text的元素定位方法来进行实现。

在这里插入图片描述
 
使用超链接标签对中的“新闻”一词来进行定位。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.LINK_TEXT, '新闻').click() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 

5.4.6 partial link text定位

这个定位方式与link text定位十分相像,实际上也就是link text的模糊查找定位方式,对象也是超链接内的文字,只不过他匹配的不是全部文字而是局部。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.PARTIAL_LINK_TEXT, '新').click() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 

5.4.7 tag定位

tag定位的效率总体来说不高,也不太推荐单独使用,html页面中一般也是由很多相同或不同的标签对组成。就tag而言标签重复的越多,定位的效率其实也就越低。

比如我们想在百度的搜索栏中输入“selenium”关键字,那么光使用tag其实就很难达到我们的目的,甚至无法准确定位到我们想要的元素。如果运气好,搜索栏的input标签在html页面中排在第一位那还好,只要不是第一位,我们就需要编写其他的代码逻辑来辅助我们继续定位这个元素。
 

所以下面的代码实在是不能称之为高效的执行代码

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.TAG_NAME, 'input').send_keys('selenium') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 

5.4.8 xpath定位

一般来说无法通过以上的这些元素定位方法定位的情况下,我们会使用xpath定位方法。但这里需要特别注意,xpath方法分为绝对路径和相对路径两种定位方式,博主只推荐如果真要使用xpath就使用相对路径+正则表达式的方式来进行元素定位。不推荐绝对路径的原因就不用博主多说了吧,只要你敢用,后期的脚本维护与复用绝对会让你抓狂的。

 

还是老样子,我们使用xpath的相对路径写法来定位百度首页的搜索栏。

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

 
另外与find_element方法相对应的find_elements方法这里就不多做介绍了,该种方法是将当前页面中所有能匹配上对应元素定位方法的元素全部获取。大家可以根据自己的需求来进行选取和使用。

 
 

5.5 延时方式

我们加载页面时通常会因为网络环境等各方面的客观因素而导致元素加载的速度各不相同,如果此时我们没有对业务操作进行一定的延时执行,那么大概率业务操作会出现各类的no such element报错。
那么我们就需要在页面元素加载完成之后再对相应的元素进行业务操作来规避上面说的这个问题。Selenium内可以使用三种延时的函数来进行对应的延时业务操作。

 

5.5.1 隐式等待

隐式等待的作用是在页面加载是隐性的进行特定时长的等待,如果在规定的等待时长内页面加载完毕,则会继续进入下一个业务操作,如果没有加载完毕,则会抛出一个超时的异常。这里其实有两个问题,第一,隐式等待是全局性质的,也就是说一旦你设置了个5秒,那整个程序都会使用这个等待时间类进行配置,灵活性较低;第二,如果碰到了有些页面中的元素是局部加载的话,那整个页面的加载是否完成也就没有了其意义,隐式加载无法针对这样的情况作出调整,智能度较低。所以一般来说只要是对于页面的整体加载要求不高或者元素的加载比较稳定的程序,都可以使用隐式等待来进行延时操作。

 

from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.baidu.com') browser.implicitly_wait(5) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

 

5.5.2 显式等待

显式等待的作用则是使用特定的等待时长来进行某些业务逻辑判断,如果判断(比如元素是或否加被定位)在时间完成那继续执行下一个业务操作,如果判断失败也会抛出no such element的异常,而显式等待的默认检查元素周期为0.5秒。乍一看好像与隐式等待差不多,其实不然,首先显式等待是针对页面中某个或某组特定元素而执行的,隐式则是全局,对所有的元素都生效;其二,显式等待可以通过自定义条件来进行元素的定位和选取,隐式则不行。

 

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.wait import WebDriverWait from selenium.webdriver.support import expected_conditions as EC

browser = webdriver.Chrome() browser.get('https://www.baidu.com') ele = WebDriverWait(browser, 10, 0.5).until(EC.presence_of_element_located((By.XPATH, '//*[@id="kw"]'))) ele.send_keys('selenium') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

 

5.5.3 强制等待

这个应该是平时大家代码中用的最多的等待方式了吧,sleep是针对线程进行挂起的一种等待方式,等待时长根据指定的参数来进行决定。最大的好处就是简单粗暴,无任何逻辑在里面,所以也被称为强制等待。

 

from selenium import webdriver from selenium.webdriver.common.by import By from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') sleep(2) browser.find_element(By.XPATH, '//*[@id="kw"]').send_keys('selenium') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

 
那么以上的三种等待方式其实各有各的特点与缺点,三者之间没有绝对的好用和不好用,而在我们的日常工作场景中也希望大家可以根据实际的情况有选择性的使用。

 
 

5.6 超时等待

元素加载超时我们可以使用以上三种延时方式来进行处理,那么页面超时了又该如何操作呢?selenium也为我们准备了两个函数来对应这样的局面。
 
页面加载超时

browser.set_page_load_timeout(30) 
  • 1

这里推荐将超时的时间有效的拉长,不宜过短。过短的超时时间容易导致整体页面出现未加载html代码情况下直接令驱动无法工作的情况。
 
 
页面异步js或ajax操作超时

browser.set_script_timeout(30) 
  • 1

这个函数是用于execute_async_script()相关的异步js操作超时报错,由于是异步操作,等待时间同理也不易过短。

 
 

5.7 键鼠操作

浏览器中键盘与鼠标的操作也是不可或缺的重要一环,在被测对象的业务要求中往往占有不少的戏份。

 
文字输入

browser.find_element(By.ID, 'kw').send_keys('selenium') 
  • 1

 
点击

browser.find_element(By.ID, 'kw').click() 
  • 1

 
点击并按住不放(左键长按),这些模拟鼠标操作需要导入ActionChains包

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.click_and_hold(ele).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
右键点击

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.context_click(ele).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
双击

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') act.double_click(ele).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
拖拽元素至另一个元素处,ele_a 为source,ele_b 为target

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele_a = browser.find_element(By.ID, 'btn_a') ele_b = browser.find_element(By.ID, 'btn_b') act.drag_and_drop(ele_a, ele_b).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

 
拖拽元素至指定位置后松开,元素后为x,y坐标值

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'btn_a') act.drag_and_drop_by_offset(ele, 200, 100).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

 
鼠标移动至指定元素

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'btn_a') act.move_to_element(ele).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

 
按下指定的键位(示例代码中是回车键)

from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.key_down(Keys.ENTER).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

 
松开指定的键位,这里也可以用链式写法

from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.key_down(Keys.ENTER) act.key_up(Keys.ENTER) # 链式写法 act.key_down(Keys.ENTER).act.key_up(Keys.ENTER).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

 
移动鼠标到指定坐标位置

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.move_by_offset(100, 200).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
移动到距离指定元素多少距离的位置(从左上角0, 0开始计算)

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.move_to_element_with_offset(ele, 100, 200).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
在指定元素位置松开鼠标

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.click_and_hold(ele).release(ele).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
发送指定的键或者内容至指定元素

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.send_keys_to_element(ele, 'selenium').perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
暂停所有操作,默认单位为秒

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw').send_keys('selenium') act.context_click(ele).pause(5).double_click(ele).perform() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
 

5.8 组件操作

页面中也存在着很多不同种类的组件,比如单选框、多选框、下拉列表、选项卡等。这些操作也可以通过selenium提供的函数进行实现。

 
清除指定元素中的内容(输入框等)

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') ele.send_keys('selenium') sleep(2) ele.clear() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

 
提交确认(类似于Keys.ENTER的效果)

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains from time import sleep

browser = webdriver.Chrome() browser.get('https://www.baidu.com') act = ActionChains(browser) ele = browser.find_element(By.ID, 'kw') ele.send_keys('selenium') sleep(2) ele.submit() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

 
下拉列表,我们就可以使用Select方法来实现选取操作
使用Select方法需要从selenium.webdriver.support.select导入该方法
例如下图中某网站的下拉列表对象

在这里插入图片描述

 
html构造如下
在这里插入图片描述

 
select_by_index()方法

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 需要注意下标要从0开始,选择1%那一项 Select(ele).select_by_index('0') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
select_by_value()方法

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 指定元素的value属性值,选择1%那一项 Select(ele).select_by_value('0.01') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
select_by_value()方法

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.select import Select

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') ele = browser.find_element(By.ID, 'input_factor_gj_count') # 指定元素的文本值,选择1%那一项 Select(ele).select_by_visible_text('1%') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
框架切换(Frame)
如果在页面中定位某一个元素失败并检查其属性并没有问题时,就该考虑是否在祖先节点中是否存在frame或者iframe标签。这样的页面就表名存在多层框架嵌套,这时我们就需要进行框架切换的操作,来准确定位到指定元素。

例如某页面存在两层frame嵌套,内部框架的xpath为://*[@id="mainDiv"]/iframe,此时如果定位某个输入框失败之后,我们就应该转而跳入该frame内进行元素定位。
 

from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') # 定位到指定的frame path = browser.find_element(By.XPATH, '//*[@id="mainDiv"]/iframe') # 切换至该frame内 browser.switch_to_frame(path) ele = browser.find_element(By.CLASS_NAME, 'input') ele.send_keys('selenium') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

 
标签页切换
我们浏览器在使用中一般会打开多个浏览窗口,也就是多个标签页。此时我们就可以通过每个标签页的句柄来进行定位和互相切换。

switch_to_window()
我们利用浏览器窗口的句柄来进行标签页的切换

from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 第一个窗口的句柄下标为0,打开第二个就是1 browser.switch_to_window(browser.window_handles[1]) # 此时就会使用第二个标签页去访问淘宝 browser.get('https://www.taobao.com') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

 
弹窗处理
页面中时常也存在着各类的弹窗,比如警告、确认、提示等等,那么对于这些弹窗我们也有着相应的业务处理方法。
 
首先我们需要明确的是每种类型的弹窗中元素也是各不相同,所以我们针对不同的弹窗使用不同的属性来定位和操作。

 
警告弹窗
一般来说就是告知到使用者执行某些操作与页面之后将要注意的事项,这种窗口只需确认。

from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_tg_title').click() sleep(1) # 在警告弹窗中点击确认按钮 browser.switch_to_alert().accept() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
确认弹窗
多用于在用户执行提交操作后的动作确认,有确认和取消两个选项。

from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_submit').click() sleep(1) #确认二选一 browser.switch_to_alert().accept() #取消二选一 browser.switch_to_alert().dismiss() 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

 
提示弹窗
这个通常用来处理用户信息交互的场景,用户可以通过弹窗输入一些文字信息,来传递与进行后续的业务处理。

from time import sleep from selenium import webdriver from selenium.webdriver.common.by import By

browser = webdriver.Chrome() browser.get('https://www.xxxx.com') browser.find_element(By.ID, 'btn_info_inquiry').click() sleep(1) # 这里传递信息到提示弹窗,警告与确认两类弹窗不可使用,会报错 browser.switch_to_alert().send_keys('20100909') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 
 

5.9 鉴权操作

既然是web自动化测试,那我们又怎么能少了Cookie的相关操作呢?用户的状态和业务请求都的需要用他来进行鉴权。在selenium中对Cookie进行操作其实也很简单,首先我们需要手动的登录被测网站一次,待网站Cookie存入本地后即可使用Selenium自带的函数对齐进行业务操作。

 
首先我们获取对应网站的Cookie值

import json from selenium import webdriver

browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 写入保存为文件还是直接打印至控制台,各取所需 with open('cookies.txt', 'w') as f: f.write(json.dumps(browser.get_cookies())) cookies = browser.get_cookies() print(cookies) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

 
接下来我们简单的对获得的Cookie进行处理

# 删除所有的cookies browser.delete_all_cookies() # 循环打印cookie中的name和value for c in cookies: # 查看打印出的cookie对应的键值对 print("%s : %s" % (c['name'], c['value'])) # 根据自己的业务需求进行cookie的增删改 cookie = {"name": "xxxx", "value": "xxxx"} # 最后添加即可 driver.add_cookie(cookie) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

 
 

5.9 js操作

Selenium也为我们提供了可执行js脚本相关的函数,他们的作用是在某些页面中模拟一些业务动作(画面滑动,选择日期等)。在一些仅靠webdriver无法实现的业务场景中,我们就可以依靠此函数来辅助测试目的的达成。

 

js的查找元素方法(ID)

document.getElementById("id") 
  • 1

 
js的查找元素方法(name)

document.getElementsByName('name') 
  • 1

 
js的查找元素方法(class)

document.getElementsByClassName("class_name") 
  • 1

 
js的查找元素方法(tag)

document.getElementsByTagName('tag_name') 
  • 1

 
js的查找元素方法(css)

document.querySelector("css selector") 
  • 1

 
js的查找元素方法(css_list)

document.querySelectorAll("css selector") 
  • 1

 
execute_script()
从上可以看出其实js的定位元素方法和selenium中的差不多,接下来我们就可以将需要执行的js语句放入到执行函数中使用。

from selenium import webdriver

browser = webdriver.Chrome() browser.get('https://www.baidu.com') # 定位后修改指定元素的value属性 js_script_exec = 'document.getElementById("form_motion").value="list_modify";' browser.execute_script(js_script_exec) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

 
 

6. 注意点与小技巧

  1. 对于某些动态div标签(窗口),一般的方法不太奏效的情况下,可以尝试下switch_to_default_content()方法,跳转到最外层;

  2. 使用模拟键鼠操作的时候,无论是单独使用还是链式写法,记得在结尾加上perform()方法进行执行;

  3. 如果元素定位时报错element click intercepted,记得检查界面上是否有其他元素进行覆盖,元素有可能也是具有隐藏属性的;

  4. 元素过期报错element is not attached to the page document,可以尝试重新刷新页面,这里不推荐直接使用refresh方法,还是养成好习惯先怼上try…except…捕捉到异常后在进行刷新或重置操作;

  5. 对于属性值为动态的元素,墙裂推荐使用CSS selector或者xpath方法来进行元素定位,正则表达式也推荐大家最好能掌握;

  6. 如果前期对xpath的相对路径写法比较头疼,推荐使用F12调试工具自带的元素复制功能,在你想要复制的元素所在的标签对这行右键,选择copy —— Copy XPath选项即可;

  7. 输入框默认存在内容想要删除再输入信息的话,不推荐模拟键盘操作Ctrl+A,然后模拟退格键,试试clear()方法吧;

  8. 抓不到元素可以使用延时方法,输入文字也是一样的道理,业务场景中需要大量输入文字的,无论是从文件中还是提取又或者是遍历,出现少字漏字的话,同样也可以使用延时的方法,适当的放慢处理的速度;

  9. 在页面中总会有些不可见的元素,这种情况使用is_displayed()方法即可快速定位找到;

  10. 有些被测页面需要验证码,无论是手机的还是图片验证,和开发同学沟通一下,留个万能的就行了,其本身的功能手工回归一下即可,不必太过纠结;

  11. 三方登录功能也是如此,不推荐直接使用web自动化去搞,三方的一般是不开源的,有这折腾的时间还不如跑跑接口和黑盒,自动化的话绕过去即可;

  12. 自动化测试用例这块的话博主还是推荐不要有依赖,和功能测试用例同理,每次的执行顺序或者数量都会根据需求与业务场景发生变化,一旦依赖了会大大增加测试同学的维护成本,后面有空我会单独出一期自动化测试用例的文章来为大家介绍。




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


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


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

2023年前端开发趋势未来可期

前端达人

目录

一、企业内前端开发比重

        1、目前学校教课的种类多样

        2、目前服务端语言多样

        3、企业中前端开发占比

二、目前业内更受欢迎的开发语言

        1、过去一直到今年的开发语言排名

        2、那么未来呢

三、近期CSDN问答的前端活跃度

        1、近期CSDN问答模块活跃度

        2、活跃度能说明什么

四、前端开发都做什么?

        1、这个问题需要想吗?

        2、日常工作是什么?

        3、还做什么?

        4、想想,还能做什么?

        5、有点理想好不好

五、给初学者的建议

        1、坚定信心

        2、是否要去培训机构

        3、学习之余的巩固

        4、赢在实战

         5、知识点的举一反三


一、企业内前端开发比重

        1、目前学校教课的种类多样

        搞明白前端开发人员在企业中的占比,你才可以在学校或者即将毕业的时候选择出自己将要深入学习的开发语言。很多学校既要教C语言,又教单片机,既教java,也教前端开发知识,但老师的课是有限的,给留了作业,也许都不检查,下一课老师就要继续往下讲,因为这是他的工作,老师们也有生活,不可能围着某些人转,学不会就不往下开课了。

        而搞懂前端开发在企业中的占比呢,能够更好的让你觉得如果自己比较平凡,得到什么等级可以卷得过别人,可以在这么多职位中占有一席之地。

        2、目前服务端语言多样

        很可喜的是,目前传统行业已经信息化改造完成,不管他们是内部系统,或者外部联合系统,都需要前端开发;我们每天看见大街上跑的汽车企业,某些电子企业,手机厂商,都需要前端开发的职位;更别提电商,直播这些我们生活所不可缺少的行业。但你还需要知道的是,如果你想学的一门服务端语言,java phython .net 或者其他,很可能这家公司就不会用,无形中给自己减少了很多工作机会。

        3、企业中前端开发占比

        22461dbde9ea4dc498d3d9891179c32b.png

         0f9b7c29c5c843f1a21abaed4cb8a62d.png

 6d52958d5b544d1b96016c2ff16d461c.png

         以上的图,是从过去几年一直到今年(2022)年的各大公司的占比,毕竟是大厂嘛,对用户体验,前端接触到浏览器,最接近用户的要求肯定会高一些。

        但是通过对多家中小公司的逐步了解发现,出去UI , 项目,产品,DBA, 运维等职位外,服务端开发与前端开发的比例几乎是1:1 ,甚至有的外包性质的公司,他们一旦产品成型后,新的客户换皮肤,更换界面的需求会更多,所以前端开发会需求更多一些。

        

二、目前业内更受欢迎的开发语言

        此前有人戏称,是开发语言受欢迎,并非你受欢迎。但不得不说,某个开发语言受欢迎程度如果更加靠前,说明市场需求更大,更受欢迎,而将来准备从事某一种开发语言,也是非常关键的信息来源。

        1、过去一直到今年的开发语言排名

        e783b4646959444288fc376d85c26ade.png

           5d6915e57ffa4373b9cb338d060d1189.png

                 b43001039ca947cebc1490386fee2d6d.png

                 21f4406245374b54af5292de10b73370.png

 21a7ead82dc844afac42a26d86b44875.png

        通过以上往年到今年的开发语言受欢迎程度发现,javascript这门前端必备的开发语言名列前茅,甚至在众多服务端开发语言中也不甘示弱,当然这之中并没有表明HTML CSS是一门开发语言,如果是的话,HTML CSS 也必将榜上有名,因为各行各业都不要网页对外公式自己的产品,但服务端开发语言五花八门,而前端必备javascript。

        2、那么未来呢

        从web1.0时代,页面简单的只读时代,到web2.0时代,不断的交互,前端开发这个职位也在不断的进步。那么在未来的web3.0时代,很多人疑惑,可能PC的网页用处会越来越少,甚至不客气的说H5的页面也会少很多,据推测APP也会减少,未来将会有更多的数据整合产品出现。那么未来前端还会大有可为吗?

        答案是肯定的,伟大的《红宝书》开头便说:javascript能做所有的事情,如果他能。而且nodejs的流行,也使前端可以更多的渗透到服务端开发,flutter的最新发布,WPA的使用,也使APP得到了更大的挑战,CSS3的不断进步,前端游戏引擎的盛行,也使前端有了更大的发展前景与选择,那么即便未来的元宇宙世界,相信前端javascript也一定能够勇往直前

三、近期CSDN问答的前端活跃度

        1、近期CSDN问答模块活跃度

9f27329550154ebbb6b12739237dad6a.png

be63ffd41bef4ec782c645b847b5fdc4.png

         如果这只是当下技术领域的一个缩影,可见比较活跃的的开发语言有java phython c mysql 然后才是javascript。从开发开发技术职位区分还是服务端和前端,但前端活跃度却比较靠后,不管是提问,回答,数量等维度上

        2、活跃度能说明什么

        说明什么问题呢?从事前端开发人数少吗?前端开发在学习,工作中没有问题吗?前端开发比较懒惰,不愿意上社区来参与活动吗?

        我们知道nodejs可以做服务端开发,但是有多少企业敢于让从开始就搭上node serve的架子,不断让前端同学去尝试,不断在node领域发光发热,为整个行业添砖加瓦呢,很少吧。而几乎大部分公司,还是比较守旧的,从最开始的jSP时代,甚至不需要前端,服务端写完服务端代码,然后开始写JSP。JSP里再套java代码,顺带着添加一些javascript事件,样式怎么办,那个时候extjs jquery还非常盛行,easyui jqueryui 等,可以让服务端开发人员快速生产页面。

        但随着提升用户体验的欲望越来越强烈,《国富论》开篇也讲分工带来的好处,前端才逐渐有了一席之地,甚至在一些大公司,前端的话语权可以超越服务端,他们通过技术驱动业务向前。

        按照比例学可知,一旦某些事物达到一个数量后,某些细节世界也可以大体展现整体的宏观判断。那么我的理解是,在众多开发语言中,尽管javascript那么受欢迎,目前企业中前端占比还算不错,但总的来说,跟其他服务端开发语言总和来比,前端人员还是少。如果服务端语言像前端一样仅有javascript的话,我相信csdn问答模块这个业界缩影将不会是这种状态,甚至会大有不同。

四、前端开发都做什么?

        1、这个问题需要想吗?

         其实很多老师,很多培训机构的老师教前端,大家各有各自的工作,各有各自的生活, 他知道来了一批学生,这是自己分内的工作,其实很多学生也只是停留在前端开发做网页的意识上,未来我想找到一份共走,可以养活自己。这无可厚非

        2、日常工作是什么?

        其实日产工作还真就是做网页,做了C端做B端,做了PC做H5,嵌套到webview里,嵌套的APP的壳子里,这些都是工作。

        小程序,各种各样的小程序;各种手机屏幕尺寸的适配;各种APP内部的嵌套;

        做完了前端,开发点node层的工作吧,卷一卷,棒服务端同学减轻点工作压力;

        3、还做什么?

        再来点代码优化吧,如果将自己的代码调的代码量更少,如何不写注释也可以清晰明了,如何不得不写注释,可以写的更清楚;

        来一点性能优化吧,现在出去面试,没做过性能优化都不好意思说自己做过工作。没办法,整体的需求缠身,但你却很少从中吸取知识,日复一日,到找工作那天发现,自己做的工作,其实都是劳动力。如何驱动自己,再寻求解决方案,再将性能指标不断提升。

        4、想想,还能做什么?

        卷一卷,读书破万卷。将自己的点子,自己的做法不断形成方法论,对内输出,乃至对外输出,提升影响力。

        5、有点理想好不好

          还要啥理想,向公共组件团队渗透,向技术栈所在团队渗透?

       

        小插曲:这里加一个小插曲,promise解决了什么问题?这道题是不是必考题,千篇一律的答案是什么?解决了回调地狱?异步的工作我们当同步的来执行?

        这算不算进步?这算不算创新?那么我就问问你,有回调地狱你的项目跑步起来了?用同步的写法来搞异步的事情降本增效了?

        那么我就问问你,是你把之前的写法用上现在的promise节省的时间多,还是你每天摸鱼的时间多。说白了异步是一个需要花费时间的事情,因为有了异步,有了时间差,才使我们的工作出现了更多的可能性,不确定性。你更应该解决的是不是这个问题。

        个人观点啊,没说promise不好,挺好的。

五、给初学者的建议

        1、坚定信心

        不管是在校或者迷茫的即将离校,一旦决定要学,不管是学哪种开发语言,都要坚定信心,切记不可三天打鱼,两天晒网;

        2、是否要去培训机构

        这要看个人家庭的生活水平,一个家庭攻读出一个大学生实属不易,毕业后念培训班需要一定的资本支持。但对于很多人来说,没有学习方向,念培训班也是个选择,至少可以入个门;但大部分的培训课程对于目前的就业形势掌握不足,就像杨过刚去钟南山一样,练不够基本功,词汇一大堆,实战没多少,最后说啥名词都是666,一干活就挠头;

        其实我根据自己的经验,也在筹备规划一套更卷,更适合入门到守门再到卸门的课程,我的目标就是更实用,更卷,更有助于大多数想学习的同学们,你需要的只是一句:我想学习,我要学习,我能学习,而不是马内。

        3、学习之余的巩固

        现在网络上文章多的是,虽然很多不够系统,但正好够大家巩固当日知识点所用。学一定要用,用后一定要巩固,巩固后一定要举一反三形成自己的知识点,方法论,记录个博客啦,笔记啦,分享到身边的人,这样足可巩固无忧

        4、赢在实战

        知识点掌握的好不叫好,可以把知识点贯穿起来,做出一个市面上的东西,这算超越自我,切记不可自满,学完知识点就说自己精通,那只会在面试或者在工作的时候让自己更加烦恼,掉头发,熬夜。

         5、知识点的举一反三

        做为初级开发,最重要的就是对于解决问题,有自己的一套手段,这样至少可以保证快速的完成需求。但如果想继续往上走,必须得有一些别人所没有的东西。这里说到举一反三,记得当时学习的时候,学完js基础需要写一个99乘法表,当时本来上课就少,硬生生把js的嵌套循环99乘法表写出来。晚上睡觉的时候想,如果纯用HTML CSS 是不是也能写出来,就这样,HTML的倒是好写,但CSS的又憋了很久,总算是写出来了。你就说,这样下去,谁能有我卷。现在我总结出了怎么利用纯HTML CSS JS 写出3版99乘法表,并且总结出了自己的文章,希望可以让初学者能够更快的入门。




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


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


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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档