首页

做设计尽量避免掉的8个错误

分享达人

设计师有三大烦恼,时间不够用,设计方案过稿不容易,开发还原烂,如果你也在这些事情中浪费太多精力,那么证明在工作过程中被你忽略掉了很多细节,有些你不在意的细节,或许就是一个坑,今天和大家分享下设计师最容易忽略的8个细节,如有改之,无则加勉。


1.图层混乱

undefined


不知道大家有没有这种情况,你和一个设计师合作,他源文件给到你的时候,你很崩溃,想找到其中一个元素图层根本不知道在哪里,这个时候你再专业,技术再牛, 这个小细节都会让你口碑下滑。确实是这样,在职场中,你的每个交付物,都是代表你的专业水平。我见过一些优秀的设计师,文件给过来的时候,图层名称,切图,以及设计标注都非常清晰,适配规则都写的很清楚,专业度显而易见。


我之前问过和我合作的开发,最喜欢和什么样设计师合作,其实很多人都说过一个,就是图层干净,标注清晰的设计师。很多设计师抱怨开发还原不给力,但是试问下你自己,今天你交付给开发的每一个样式,对方是否能很清晰的找到。所以,在职场上,一定要注意这个细节,不要被贴上一个专业比较马虎的标签。


2.对上线效果忽略

undefined


很多设计师做设计以为设计源文件交付开发,这个项目就完事了,我之前也这么理解,但是在阿里后我转变了这个观点。要开始对落地页面负责,意味着你做的图,不止是效果图好看,还要上线内容也好看。

以电商设计来说,效果图时候大家都选的很干净的效果,很清爽的背景,但是上线后换上商家的图简直就没法去看。


undefined


你心中的页面效果图上线后,和上图一样很干净,清爽,让人赏心悦目。


undefined


但其实最后上线环境是这样的,页面拥挤不堪,有很多广告和牛皮癣,内容繁杂。所以今天的设计师除了我们要把页面做好看,同时还需要思考,这个效果呈现给用户会是什么样的效果,对内容负责是我们每个人都需要去控制的。


3.喜欢用漂亮照片

undefined


很多设计师作品集和项目喜欢用很漂亮的美女帅哥图片,确实大家都喜欢漂亮的东西,但是有时候太过了,看着就特别的假,很容易看成飞机稿。其实用照片也是有技巧的,这个简单和大家分享几个小技巧:

该放头像时候就不要放风景

undefined


在头像时候该放头像就放头像,不要放照片和插画。另外图片选择时候,也可以选择一些真实点图片,比如可以用朋友微博上照片,或者微信头像,可以挑一些好看的,那样看着会更加自然。


undefined


网站里面照片都可以使用,而且都是比较真实的,你可以选择皮肤颜色,性别等等,发设计稿中,会比我们找的明星帅哥美女要真实。

如果这个产品是中国人别放外国人

undefined


如果你今天做的产品是一个面向国内的产品,那么照片就应该是中国人,就不要出现国外照片。真实很重要,当然这里有一些细节,就是照片不要太完美了这样会产生虚假感,照片的清晰度最好足够,别出现马赛克。


4.不考虑文字极端情况

 

undefined


一般在设计时候,特别是文字我们需要考虑两种极端情况,文字最长的时候,文字最短的时候,如果忽略掉,你只按最佳效果设计,上线后就会出现问题,所以如果你设计文字最长,和文字最短时候,你都兼容到就不会出现太大问题。


undefined


在做金融产品适合,数字最大值和最小值也是容易被设计师忽略的地方,所以同样的需要考虑最长的数字和最短的数字场景。


如想看到更多干货内容分享,可以添加wx:ddm7851,欢迎围观我票友圈~


5.英文大小写不分

 

undefined


可能很多人说,英文大小写这个不是什么大事吧,但是还真是大事,我之前一个同事在内部讲方案述职时候,就因为一个英文单词大小写弄错了,就被领导说粗心,后来领导还经常拿这个事情来说,做设计粗糙,就这么一个下插曲,被贴了一个小标签。但是职场就是这样,你任何一个细微的瑕疵都容易被放大。



6.颜色乱用

 

undefined


做平面设计时候,或者做印刷时候我们都知道要去遵循一定色彩原理,比如潘通印刷色等等,但是在做产品设计时候,很多时候会出现设计师色彩乱用的情况,这个地方红色浅一点,那个按钮深一点,虽然你满足了你当前页面的诉求,但是放到整个APP上来说,就是很乱。


所以,这也是为什么很多团队都会去每年花很大精力做规范,规范的目的其实就是建立一把尺子,这把尺子让今天这个产品设计有一套规则遵守,否则就会出现百花齐放。


undefined


在谷歌材料设计规范中,很清晰的描述了每个颜色的运用场景和使用方式,目的就是保证所有设计的一致性和统一性。


undefined


谷歌材料设计,对于不同产品会给出不同的配色建议,这样的规范会让整体的设计更加合理。所以设计师在做方案时候,一定要去遵循团队设计及规则。


7.行高和尺寸比例随意

 

undefined


文字行高也是被很多设计师忽略的,不知道一堆文字怎么定义行高,一般的做法是行高=文字大小*1.5倍,这是比较通用的一些做法,当然也有很多的阅读软件,行高可能设置更大一些。他们会用到黄金比例来设置行高。


undefined


很多人以为黄金比例就是1.618其实不是,除了黄金比外,其实还有白银比例、铂金比例、青铜比例这些都具有严格的比例性、艺术性、和谐性,并蕴藏着丰富的美学价值,好好利用,将会使你的作品变得更多高大上。


拿行高来说,除了常用的1.5倍,还可以是1.618倍还有1.732倍,这些数值在很多阅读产品中都会大量运用到这种比例。


其实黄金比例除了可以定义这些字体行高以外,在尺寸上也可以去定义。


undefined


如果你设计中比例拿不准的话,也可以通过这样的黄金比例来控制你整个设计的比例尺寸,这样会更加科学。


8.盲目使用设计趋势

 

undefined


关注设计趋势是好事,但是如果盲目的使用趋势,就会让页面特别的乱。很多设计师页面明明是扁平化的,上面都是用插画营造着一个氛围,但是看见最近C4D很火,然后就放了几个C4D元素进去,这样就会让这个设计很混乱。


undefined


我之前天猫的导师,豆爸说过:做设计的时候可以先构思一个世界,世界要和谐就需要有它运转的的规则..


这个世界里面的规则会是什么呢?世界里面可能会有很多规则,字体,透视,光线,颜色,形状 .... 可以拆解成每一个细节对应到设计中就是它整体看起来会是怎样的光线,元素,空间感 ……是立体的,扁平的,魔幻的,安静的……


就像有不同风格的电影 动画一样,扁平的动画,木偶动画、黏土动画.... 为了让这个世界和谐,就会要减少一些冲突。如果立体的变形金刚世界里面出现了一个二维的米老鼠 肯定不和谐,如果小清新的色彩世界里面出现了大红大绿东北大棉袄配色,也会不和谐。

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

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


文章来源:站酷  作者:我们的设计日记

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

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



用 JavaScript + HTML + CSS 实现选项卡操作,点击不同选项就显示出不同的标题栏(并实现其他要求操作)

前端达人

Ⅰ、问题描述:

1、用JavaScript + html + css 实现,选项卡操作;
2、分析:
A、用 html + css 实现布局(盒子的布置,空间的分配等);
B、用 JavaScript 中的 DOM 操作,实现点击不同选项显示不同标题栏的功能;

Ⅱ、实现过程如下:

1、运行软件VScode,亲测可实现;
2、运行代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; font-family: '微软雅黑'; font-size: 14px; } #container { width: 398px; margin: 100px auto; } #container a { display: block; width: 98px; height: 42px; line-height: 42px; text-align: center; float: left; border-top: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; color: #333333; text-decoration: none; } #container a:hover { /* 鼠标放在 a 的标签上,其文字将显示为:红色; */ color: #ff4400; } .content { width: 355px; height: 140px; text-align: center; border-right: solid 1px #ff4400; border-bottom: solid 1px #ff4400; border-left: solid 1px #ff4400; padding: 30px 0 0 40px; display: none; } .clear { clear: left; } #container a.on { /* 对a标签中的类名为:on 的标签进行操作; */ background: #ff4400; color: #fff; } </style> </head> <body> <div id="container"> <a href="#" class="on" >充话费</a> <!-- 类为:on 的 a 标签; --> <a href="#" >充流量</a> <a href="#" >充固话</a> <a href="#" style="border-right: 1px solid #ff4400;">充宽带</a> <!-- style 操作目的:使得显示的盒子最右边有边框; --> <div class="clear"></div> <div class="content" style="display: block;"> <!-- style 操作目的:使第一个图片在初始状态时,能显示出来; --> <img src="images/1.png" width="355px"/> <!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) --> </div> <div class="content"> <img src="images/2.png" width="355px" /> <!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) --> </div> <div class="content"> <img src="images/3.png" width="355px" /> <!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) --> </div> <div class="content"> <img src="images/4.png" width="355px" /> <!-- 该位置存放的是:图片的地址 (即:里面加载的是图片信息) --> </div> </div> <script> var as = document.getElementsByTagName('a'); //通过 DOM 操作,拿到标签为 a 的所有的元素(是个集合); var divs = document.getElementsByClassName('content');//通过 DOM 操作,拿到类为 content 的所有的元素(是个集合); for(var i=0; i<as.length; i++) { as[i].index = i; //给拿到的每个元素对象添加索引属性; (由于通过 DOM 操作拿到的元素是对象,因此可以添加属性值); as[i].onclick = function() { //给 as集合 绑定单击事件; for(var j=0; j<as.length; j++) { as[j].className = ''; //将 as集合 的所有元素的类名全部取消; (此时用的思想为:排他思想;) divs[j].style.display = 'none'; //将 divs集合 的所有元素全设置成不显示状态; } this.className = 'on'; //仅将被单击的元素的类名设置为:on,以便执行在 css 中的相关操作; divs[this.index].style.display = 'block'; //并将被单击的元素的相关图片设置为:block状态;(即:显示出来;) } } </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104

3、结果展示:
A、默认的显示结果:
在这里插入图片描述
B、点击 ‘充流量’ 后的显示结果:
在这里插入图片描述
C、点击 ‘充固话’ 后的显示结果:
在这里插入图片描述

D、点击 ‘充宽带’ 后的显示结果:
在这里插入图片描述
4、可能存在的问题:
A 、如果自己也加载了图片信息,仍然不能显示该结果,可以直接下载我传上去的文档(可能解释的更详细),可以直接在 VScode 等其他软件上加载运行;

地址为:

https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501

Ⅲ、小结:

哪里有不对或不合适的地方,还请大佬们多多指点和交流!


https://download.csdn.net/download/weixin_43405300/19645922?spm=1001.2014.3001.5501





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

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


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

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

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

关于通过v-if渲染的element-ui表单,校验规则不生效的问题

前端达人

记录关于通过v-if渲染的element-ui表单,校验规则不生效的问题

代码

 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="标题1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="标题2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

原因:
因为form-item绑定验证事件是在mounted中进行的,规则变化后没有进行重新绑定验证事件,v-if渲染组件节点diff后被复用了,所以验证也就自然失效了

参考回答:v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )
感兴趣的小伙伴可以学习一下

解决方案:

  1. 给每一个el-form-item添加一个key属性区分
 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="标题1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item key="1" label="标题2" prop="requestData"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

如果v-if渲染的目标是整个表单,则在form标签写入key

  1. 直接在el-form-item中写rules
 <el-form ref="form" :model="form" :rules="rules" label-width="124px"> <template v-if="show1"> <el-form-item label="标题1" prop="requestType"> <el-input size="mini" v-model="form.requestType" /> </el-form-item> </template> <template v-if="show2"> <el-form-item label="标题2" prop="requestData" :rules="{ required: true, message: 'xxx不能为空', trigger: 'blur' }"> <el-input size="mini" v-model="form.requestData" /> </el-form-item> </template> </el-form> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

:rules="{ required: true, message: ‘xxx不能为空’, trigger: ‘blur’ }"

这里需要注意JavaScript中的单引号''与双引号""的使用规范


还有很多方法可以解决这个问题,这里只记录我用过的其中两个方法。有其他解决方法的同学欢迎留言讨论!

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

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


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

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

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

设计体系的响应式设计

雪涛

随着产品生态的多端化进程,越来越多的跨设备和不同屏幕尺寸导致的问题也逐渐暴露,例如:

XX 能力要在手机上使用,不得不单独为移动端开发几个页面甚至一个产品(反之亦然);产品数据量很大,Ant Design 默认字体 / 间距太大了,不够紧凑;版式不够优化,造成空间浪费;

Ant Design 基于如何在小屏幕中解决信息展示问题这样的出发点也在很多组件中提供了响应式设计,但拥有更加完备的环境适应性应该是一个设计体系长期的目标之一,因此在全局性地考虑跨端、跨多屏幕尺寸、信息密度等响应式设计方面还值得我们继续深入研究。

本篇文章横向调研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企业级产品设计体系的响应式设计部分,从设计策略、设计模式、实施模式、设计方案四个层面大致归纳了一些信息,旨在对响应式设计有一个笼统的了解。

关于 Adaptive Design 与 Responsive Design先厘清两个概念,关于响应式设计通常会有两个普遍认识,即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 与 Responsive Web Design (RWD) 概念,它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸,而 RWD 是同一套代码做弹性的适应,本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题,本篇所指的「响应式设计」 概念包含了两者,不做明显区分,关于 Adaptive 与 Responsive 设计怎么界定以及具体的规则本篇也不进行展开。


移动优先设计策略

提响应式设计不得不提「移动优先」设计策略,移动优先的概念最早是 Google 在 2010 年世界移动大会上提出来的一种产品策略,基于 Google 对未来趋势中移动设备将会逐渐拥有核心地位的判断。后来「移动优先」更多被提及是作为一种在响应式设计中应用的设计策略,它认为在响应式设计中优先为屏幕限制更大的移动设备设计,再扩展到大屏幕的 PC 端是一种更有效的设计方法。

例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法,Fiori 尤其指出「移动优先」专注核心功能,专注增强而非降级,提前考虑移动端更多的独特特性以及异常情况,能提供更好的体验。Material Design 可能算是移动优先的最佳实践,它本身就诞生于 Android 平台,而后再通过大量响应式规则扩展到桌面及 Web 端,使得 Material 在多端都拥有一致贯穿的良好体验。

(Material Design 的响应式设计)


「移动优先」本质上是基于一种「增强」的设计思想,一个产品如果要同时适应于不同的设备,一直以来有两种策略:优雅降级 vs. 渐进增强,后者认为先从最小和最受限制的低级设备(移动设备)入手,再为更高级的设备(桌面设备)增强信息和交互,这意味着在更多限制下,迫使设计考虑如何减少、汇总,分组信息,有利于聚焦核心信息以及为更多限制考虑。

然而移动设备已不再是「低级设备」,Fiori 尽管强调「专注增强而非降级」,但它同时提出的「提前考虑移动端更多的独特特性」却与渐进增强的设计思想相悖,让「移动优先」沦为了某种形式化的概念而难以执行。

例如下面这个报告界面的场景里,移动端仅展示汇总的报告图表信息,但汇总图表并没有「扩展」到 Tablet 里而是用明细数据替换图表,而在桌面端同时包含了明细数据与图表两部分信息,这看上去并不像是一个「增强」的设计思路,更像是在全量需求下基于设备限制所采用的「降级」策略。

(Fiori 报告界面的 Adaptive Design)


因此「移动优先」并不一定是形式上优先设计移动端,它被广泛接受和应用的是背后的渐进增强的核心思想。我认为在移动设备高度发展的当下,「移动优先」不再适合作为单独概念提出来,而渐进增强的设计思想应该体现在更细分的场景中,例如在布局、信息排版以及交互反馈中,我们应该优先考虑限制更大的移动端;在一些交互方式上,优先考虑限制更大的鼠标操作。甚至在复杂业务场景里,优先满足核心业务流程顺畅也属于渐进增强的策略范畴。


设计模式

这里讲的设计模式是指设计师在具体业务中针对不同的情况可以采用的通用性设计方案,这些设计模式除了单独应用外,有时候也可以多种模式结合应用。Fluent 归纳了 6 种对应不同情况的响应式设计模式,非常全面地涵盖了其它设计体系中的绝大部分方案,分别是:调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建。

Resize – 调整大小

调整大小是最基础的设计模式,是一个容器默认的响应式模式,通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式,即便在无响应式设计的体系里,容器跟随屏幕尺寸而变化也是一个常见的应用方式。

(Resize)


Reposition – 重新定位

改变 UI 元素的相对位置,以充分利用不同尺寸的空间。重新定位在响应式应用里多见在框架上,或是在组件里对一些特定元素的处理,例如 Material 的全局浮动按钮与浮动的下拉菜单以 Reposition 的形式分别在桌面端与移动端处于不同的位置。


(Reposition)


Reflow – 重新排列

改变 UI 元素的排列方式,这在内容弹性布局里较常见,通常是基于某种排列规则自动向下折行,并结合调整大小与栅格系统应用在响应式布局方面,例如 Carbon 的 Fluid Grid。



(Reflow)

Show / Hide – 显示 / 隐藏

基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素,例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。Material 在组件响应式行为里提到的 Expand 也属于 Show / Hide 的延伸。



(Show / Hide)

Replace – 替换

针对不同尺寸的屏幕采用不同形态的组件,通常应用在对具体的组件做针对性响应式设计中,但需要注意用户面对变化时的认知成本。



(Replace)

Re-architect – 重新构建

折叠或拆分信息架构,这种模式在 Web 端较难实现,通常出现在一些 Native App 的场景。



(Re-architect)

Density – 内容密度

除了上述 6 种模式以外,我把内容密度也归纳为一种设计模式,Fiori、Material Design、 以及 Atlassian 都提出了内容密度的概念。Fiori 基于移动优先在移动端采用默认密度,而针对大屏幕的 Web 端则提供紧凑密度的方案,他们认为移动端手指交互所需的空间要求更高;Material 则是针对很多组件都定制了 Default、Comfortable、Compact 三种密度的视觉表现。通过被动响应式或主动控制内容密度很好的解决了不同尺寸屏幕的信息获取效率问题。

(Material Design 的内容密度示例)


值得一提的是 Atlassian 通过栅格系统的间距来控制密度而非对内容密度本身进行设计,越紧凑的布局栅格间距越小,这看上去很合理,却很容易造成内容密度增加的同时整体信息获取效率反而降低的问题。Material 也有关于栅格空间的定义,但在内容密度的处理上和 Atlassian 恰恰相反,它认为高密度内容适用更宽松的栅格空间,相对是一个更合理的设计。在信息密度的问题上,我们的核心目的其实是提升信息效率而非单纯提高视觉密度,因此解法上需要更完善的考虑。

(Atlassian 与 Material 的栅格密度对比)


实施模式

实施模式是指设计体系为实现具体设计方案而定义的一系列基础规则、解决方案或技术手段,经过整理总结为相对尺寸单位、屏幕断点、弹性布局、栅格系统 4 个方面。

Rem – 相对尺寸单位

几乎所有应用于 Web 的设计体系的技术方案中都采用 rem 相对单位,Material、Fiori、Carbon 和 Lightning 均沿用了浏览器默认的 root 尺寸,即 1rem = 16px,Alta 默认采用是 14px 的规格,并允许基于不同应用选择 12px 或 16px 的规格,默认情况 Alta 采用更小规格的单位会在小屏幕电脑上有更好的表现,这也许和他们的产品特性相关。

相对尺寸单位是非常具有实施价值的,它使产品能在保持信息节奏的情况下根据不同的情况等比例缩放内容,这使得设计能更方便地调整内容密度,或许还可以配合 Media Queries 解决部分跨端的尺寸适配问题,且几乎没有前端成本。

国内的前端业界包括我们自己的前端同学更多将 Rem 运用在移动端,主要为了两个目的:方便计算尺寸、在不同宽度的设备上等比缩放内容,这样的用法是出于前端工程师解决屏幕兼容性的一种技术手段,在使用上本身也存在一定争议,而在响应式设计领域我们还没有发挥出 Rem 应该发挥的作用,甚至很多设计师还并不了解相对尺寸单位的使用方法,广泛应用 Rem 能为我们带来哪些实际价值是接下来需要继续研究的。

Breakpoints – 屏幕断点

屏幕断点是响应式设计的基础依据,它决定了我们要适配到什么样的设备或屏幕规格,并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。一般情况 Breakpoints 都是基于 Phone、Tablet、Desktop 的维度来设计的,包括考虑了移动设备的横评竖屏情况,关于详细的规格设置其实并没有太大参考价值,设计体系都是根据自身定位以及设备覆盖的情况来制订的,例如 Material 的断点在低分辨率范围分得非常细,是因为 Material 主要服务的 Android 平台有着数量繁多的设备分辨率。在满足自己需求的前提下,屏幕端点不需要太多,无论怎样基于数据驱动的屏幕断点设置将会是一个更科学的方法。


(屏幕断点分布)

Fiori 的断点设计比较有意思,在设计文档中仅有基本的布局规则,没有明确的 Breakpoints 规则,Fiori 对于不同的组件会设计不同的 Breakpoints,例如在 Table 这个组件中定义了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的规格,而在 Form 的组件中,Breakpoints 变成了 0 < 600 < 1024 < 1440 < ∞,从这点上看出 Fiori 认为不同的组件有不同的表达模式,因此应该针对性对组件进行优化。

(Fiori 的 Table 组件适配情况)

(Fiori 的 Form 组件适配情况)


Flex Layout – 弹性布局

Flex 布局是 CSS3 提供的强大布局能力,从更自然更具语义化的角度实现界面元素的自适应。应用于 Web 的设计体系基本上都在组件代码里广泛采用了 Flex 布局,Lightning 还将栅格与 Flex 布局结合定义了自己更完善的布局方法。在响应式设计中,Flex 布局通常结合 Breakpoints 使用,在两个 Breakpoints 之间让界面做更平滑的过度。除此之外其它平台也都有类似的弹性布局能力,例如 Fluent 在 windows 采用 XAML 构建布局系统。

无论是 Flex 还是最近兴起的 Grid 布局都是 CSS3 的基本布局能力,响应式设计要解决布局的问题将会深度依赖这些基础技术手段,本篇不进一步展开。

Grid System – 栅格系统

栅格系统是所有设计体系必备的,我们通常将页面横向分为 N 列,定义每一列的尺寸与间距,这为界面布局提供了一致性和成本便利。传统的栅格系统在响应式方面的应用主要是结合 Breakpoints 与一些 Responsive Token 来实现的,通过给 UI 元素指定不同的栅格数来决定他们分别在不同屏幕下占多少列,同时一些设计体系还提供了可见性相关的 token,来控制界面元素在不同屏幕的显示与隐藏。

Fluent、Fiori、Lightning、Material 以及大多数设计体系都采用了 12 栅格系统,因为 12 的因数够多,能满足足够多的布局细分同时又不至于太复杂,Carbon 的做法更加 geek 一些,他们的「2x grid」采用了 16 栅格系统,布局粒度更细但放弃了 3,6 这样的因数。 Ant Design 为了满足复杂的业务情况,采用了 24 栅格系统,24 栅格提供了更高的灵活性的同时,也大大增加了复杂度,面临栅格系统的响应式设计 24 栅格是否适用还有待商榷。

另外 Material、Carbon 还明确提出了「Fluid Grid – 流体栅格」的概念,核心思想是在较小的屏幕上降低栅格数量,将多余的栅格自动折行弹性布局。


(Carbon 的栅格定义)

在屏幕尺寸变化时,栅格主要有两种响应模式:Fluid、Fixed


(Fluid)


(Fixed)


这种将栅格系统与弹性布局相结合的方式基于一些简单的规则设置,在不需要特定响应式的场景中不再需要指定繁琐的 token,且能满足大部分高频且通用的情况,在一定程度上降低了成本。


组件应用

除了通用的响应式规则以外,设计体系在具体组件中的响应式方案还有许多值得挖掘,能为我们的组件设计提供参考价值,本篇不再一一展开,仅提两个典型的应用情况:

框架

(Carbon 的框架设计)


框架算是一个特殊的组件,在不同的设备中界面框架的适用有非常大的差异,几乎提到响应式的所有设计体系都给出了框架响应式方案,例如 Alta 将界面框架分为四块,以 Off-Canvas 和 Reposition 两种方式在不同尺寸的屏幕中显示或隐藏以及通过特定的方式展开或呼出。

通常情况下设计体系的框架组成按形式可以分为:

  • Header – 通常情况下常驻

  • Sidenav – 分为左侧右侧两种情况,一般用于放置导航,在不同设备会有展开,收缩,隐藏三种状态

  • Content – 内容区,通常由 Grid 控制布局

  • Footer – 如有,固定在页面底部

  • Float – 浮动框架,用于临时状态,通知或弹窗等

设计体系通过对框架的定义,以及控制不同部分基于什么样的模式响应屏幕尺寸来实施对框架的响应式设计。


(Material 的响应式框架)


组件

Fluent 或 Material 在设计文档中更多基于基础的网格,布局,设计模式来阐述通用性的响应式规则,因此他们的响应式设计有非常好的延续性,组件的响应式方案基本上都遵循这些规则。

而 Fiori 以及 Lightning 在通用性响应式设计模式上的定义上没有那么全面,他们侧重于在组件层面对所有组件都考虑了针对性的 Responsive 或 Adaptive 的方案。例如 Fiori 在响应式表格的组件里,在桌面端与移动端分别是 table 和 list 的模式,这个方案并不是通过全局抽象规则得出来的,而是基于对组件的针对性设计,正如他们为不同的组件设计了不同的 Breakpoints,这种针对性也适用于特定的 UI 解决方案。

(Fiori 针对 Table 的响应式设计)

在一定程度上抽象规则的同时,如果我们能够为每一个组件都考虑到不同场景的响应式,当然就会提供更精细化的体验。在一个完备的设计体系里,在设计每一个组件资产时都以渐进增强的设计策略,考虑到不同的设备及屏幕适配是非常有必要的。

响应式设计的世界烟波浩渺,书不尽言,言不尽意。Ant Design 目前计划从布局基础规则以及内容密度的解决方案切入,逐步完善响应式设计的体系,这是一个重要且漫长的过程,至于文中挖下的坑还需要深入研究逐一补充,本篇初探先到这里,欢迎大家留言指出问题也很希望大家能留下想法共同探讨。





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

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


文章来源:站酷  作者:Ant_Design

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

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





设计师如何在设计中讲好故事?

雪涛

讲故事也是一种设计能力。

更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。

讲故事也是一种设计能力

undefined


作为设计师,经常需要和产品,技术,老板去沟通设计方案,每次都是向外发出声音表现你的的机会,很可惜,大多数设计师在表达时,对方还无法理解你的意思,更难理解你的设计概念和设计思路,很多设计师也因此害怕去说,其实设计师学会讲故事非常重要,也是专业能力的一种。今天这篇文章,希望可以帮助到你。


undefined


能把设计说成故事是一门艺术,作为设计师,我们必须借助讲故事的方式,将产品功能推导到用户价值层面,在大公司里面,设计师讲故事是一个越来越重要的技能,一个好的故事能够统一大家的建议,获得领导的认可,是将产品价值和功能流程和用户的情感联系在一起的关键!


看看别人怎么讲故事


韩国的设计,韩国很多潮流的娱乐视频都是围绕一个故事开始的,故事灵感也来源于大多数人生活,容易让观众引起共鸣。


undefined

 


这个MV是来自Zion.T的Eat,讲述了一个人在失落沮丧的时候,要照顾好自己,整个故事围绕着我们生活中各种失落,孤单的情节,再配合美妙的旋律,让观众感同深受。
undefined
K.will的Day也是运用电影短片讲述一个故事,讲述了一个单相思男生的故事,虽然故事很浅,但是每个故事的每一步都是来源于我们每个人生活当中的。


undefined


在Airbnb宣传页面,运用故事讲述了一家3口,为了女儿的生日,一同飞往洛杉矶,他们去了迪士尼乐园,在洛杉矶预订了房源,受到了房东的欢迎!这样宣传比广告更加真实打动人。
故事驱动的设计很容易入手,从情节提要开始,回归用户视角给出用户想要的体验。


undefined


allthatisshe一个英文网站,这个网站最初是在博主休产假期间创办的,它原本是一个很简单的时尚博客,但是博主异想天开的自我表达方案,以家庭小孩为主题的家庭故事,吸引了全世界的关注,在ins上关注度极高。


undefined

 


整个网站每篇文章都在描述博主和小朋友的生活故事,他们一家人相处的很多细节,这中间再推荐一些好用的商品,去旅行带着观众一起看风景等!整个网站的故事一般都是从生活细节出发,比如上班的路上,在品尝美食,听着喜欢的音乐时候,然后结合巧妙的内容,吸引用户。


讲好故事的5个步骤

 


那么,作为设计师,平时在述职,总结时候如何去讲故事呢?怎么去把一个合理的项目,通过叙事的方式,让它能和听众引起共鸣呢?


undefined



今天分享给你,一个讲故事的框架,一共有5步:

1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)

我们来拆解下这个思路。


更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。


1.开始(背景)


这个项目是如何开始的,它的整个商业背景是什么,要解决用户的什么问题!在我们演讲或分享时候,尽量在140字以内描述清楚,整个项目的背景和简介,让听众记住你。


undefined


乔布斯著名的演讲家,他分享有个小技巧,就是可以先抛出问题和困惑!一次iPad2发布会时候,乔布斯一上台就抛出几个问题,大家对于iPad销量很担心,iPad被各种抄袭,苹果怎么办?在一开始就通过问题,吸引听众,然后引人入胜!


undefined



来看一个实际案例,来自Facebook相册一个设计改版,在项目开始,设计师就介绍了整个项目背景,Facebook Photos是让用户更方便的分享他们的故事,分享他们的图片,让用户生活丰富多彩!那么如何帮助用户更加便捷,更快的分享照片,是这个项目的设计重点。


2.冲突(问题)


讲一个好的故事很难,一定要有冲突和问题,就像看一部电影,一定要有反派存在,只有冲突明显,观众才会觉得更有趣。那这个环节就需要我们把这次产品改版,最重要几个问题给提炼出来。


undefined


以Facebook为例,Facebook相册遇见的问题是,通过数据研究发现,人们不愿意在Facebook中分享照片有以下几个原因:


1.大家手机中的照片很多,不是为了分享而拍摄的!


2.选择照片很难,比如自拍,一次拍了十几张,选出一个最好的很费时间


3.大家经常忘记了分享

所以,在这个环节,我们需要从生活场景去思考,用浅显易懂的语言去讲述当前产品遇见的问题!


3.情节(解决问题的过程)


针对这些问题,设计师怎么去解决呢,在这个环节,一定要充分把你整个设计过程的思考,详细描述,比如设计师常用的情绪版,竞品分析,设计的形色字构质的思考都可以在这个环节表达清楚。


undefined


Facebook团队,基于用户研究数据,和数据结果,决定先定出一些设计原则,通过设计原则和主张来解决之前发现的问题和冲突!于是这个过程和产品开发一起讨论出来,设计的原则和目标:


1.帮助人们记住他们可以分享的故事


2.轻松快速的分享


3.设计一种新的布局方式,让大家分享时候自豪,能够吸引人!


undefined


然后展示了他们做的竞品分析,情绪板,以及一些设计探索的方向!比如做了十几个原型图,对于相册的展示设计了很多概念方案,包括各个文件类型的展示方案(照片,文字,视频,地图)等等!


4.高潮(设计决策)


基于以上设计过程,就可以得出对应的设计决策,再进行详细的方案设计展示。


undefined


重新设计了页面框架,用户的相册框架图来帮用户更好的分类相册,同时在布局上对各种文件类型进行分类,优化相册的浏览效率。


undefined


视觉设计时候,去掉不需要的设计元素,突出内容,确保每一步都能是一个最佳的解决方案!


undefined


同时在视觉设计上进行了很多创新探索,将相册故事以胶片的形式呈现在顶部,让用户更愿意去分享。


undefined


在设计时,考虑多端的统一性,针对不同端的展示效果,真正的保证设计的落地性!


Facebook这个设计环节就像我们电影的中间高潮部分,怎么去解决冲突的,如何定决策,并逐步去落地整个设计方案的!我们在工作中也需要在这个环节很好阐述你根据设计策略,在设计上怎么去落地的,设计方案是什么样的,最后上线是如何的。


5.行动和结果


undefined


这个环节需要把你故事中遇见的问题抛出来,以及这些问题你是怎么去沟通解决的。

比如Facebook相册问题,就遇见了新版本排期问题,无法一下子改完,那么设计师针对这个问题,设计了中间迭代的方案,一步一步迭代到最终,以及开发测试问题,担心用户情绪反弹比较大,分批次上线等等。


同时,做这个项目你得到了哪些启发和教训,后续如何去避免等,最后的结果和上线后数据可以帮助我们验证设计的正确与否。这些设计过程中的细节问题和决策,是帮助我们丰富故事很重要的因素。


undefined


掌握好了这个框架,生活中很多事情都可以运用这个框架去讲,比如你要去和别人分享【设计师如何做简历】就可以按照这个框架去讲:


1.开始(故事背景和简介)


很多设计师找工作比较难,作品集发出去无人问津,原因是什么?是找工作人太多,还是大环境不好,那么如何提升作品集呢,怎么才能更快的让你作品集脱颖而出。


2.冲突(问题)


通过查阅了几百份设计作品集,发现一些问题,比如:版式同质化,设计风格单一,文字太多,飞机稿太多,这些是影响作品集质量很大的问题,由于这些问题导致很多面试官看作品集时候看见类似基本都跳过了,所以才导致大家找工作难。


3.情节(解决问题的过程)


通过查看大公司的招聘信息,提取重要关键信息,比如设计趋势,数据研究,系统思考这些关键词出现的比较多,同时查看了全球顶级设计师和韩国设计师作品集,发现好的作品集都是简约的,排版舒服的,那针对这些,你决定从这几个问题去优化作品集:


版式上往苹果简约风格去靠。设计风格上贴近主流,优化作品使得作品手法丰富,同时针对飞机稿太多,优化线上案例,重新按照最新手法来做等。


4.高潮(设计策略)


花了一个月时间,去详细设计你的作品集,同时设计完成后对比之前作品发现明显的提升,同时设计的过程也掌握了一些设计趋势,再投递的时候发现获得面试的机会大于之前。


5.行动和结果


最后获得了一个大厂的offer,但是整个过程中是艰苦的,做作品集中间也遇见很多问题,比如没有人指导,不知道最新的趋势是什么,比较焦虑,针对这些现状当时自己是如何调整的。


运用这个框架简单的一个叙事,你会发现这样的体系化思考能让我们表达时候更上一层楼。


运用XYZ公式讲故事

 

undefined


当我们向别人介绍一个新产品时,无法切中要点,明确表达产品用户和概念,很多人会觉得「他们怎么听不懂,一定是他们理解有问题,不是我的问题」很不幸的是,问题就是在于我们的表达上,分享一个XYZ公式给大家。


undefined


分享给大家一个公式,掌握后,你就能轻松的给别人讲清楚:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受


这三个问题,与产品,开发的人都有关系,无论任何项目进展,团队都能想起这个产品愿景,从而让我们对产品轮廓更加清晰,同时这个公式的表达能让团队外的人听的懂。


举个例子


undefined


X:微信一款通讯工具,支持单人、多人参与,通过手机网络发送语音、图片、视频和文字;


Y:它的目标用户是使用手机的用户;


Z:这个产品希望链接用户生活方方面面,是一种新的生活方式。


undefined


X:支付宝一款支付工具,它融合了支付,生活服务,保险,理财公益的生活服务平台 ;


Y:它的目标用户是互联网用户;


Z:这个产品希望给人亲近、安全、可靠的感觉。


上述这个XYZ框架,能够很好帮助你表达一个产品功能和定位,希望在你下次晋升或者述职向别人介绍时,能够用上。


最后

 

undefined


回顾下今天所分享的知识点,如何很好的将你项目讲成故事的5个步骤:


1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)


如何向别人准确表达产品功能和愿景,XYZ公式:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受。




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

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


文章来源:站酷  作者:我们的设计日记

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

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


如何为券商类产品设计流畅、高效的自选股功能?

雪涛

导语:“自选”作为金融类产品的基础功能,迭代至今已经非常成熟了。放眼望去,市面上主流金融产品的自选功能似乎都大同小异,但是体验下来会发现,细分领域下的设计侧重点却有所不同。


一、把握需求

如果我们将“自选”转化为熟悉的C端功能,它类似于“收藏夹”、“关注列表”的概念,是用户管理交易对象的重要阵地。除了常见的管理对象(交易概念中称作“标的”)、管理分组外,“自选”还会存在对数据和使用习惯的管理需求。

  • 站在业务视角:券商的核心优势在于“交易”,所以业务目标自然为“交易”服务。“自选”相当于一张快捷交易导航,我们提供的诸多功能都是在帮助用户快速、便捷的调整这张表,直到它达到“为我所用”的程度。
  • 站在用户视角:不同交易习惯的用户,对自选的操作频率有高有低,在保证效率的同时,还需要让每一类用户都能用的顺手。

二、竞品调研

1. A梯队:美港股券商,富途、长桥

  • 共同的设计侧重点:功能的组织符合用户心理模型,任务专一,功能精炼,不追求全面、追求使用效率。
  • 共同的弊端:“管理分组”的交互设计不够流畅。

富途“管理分组”采用的交互方案,初期学习成本是很高的,它虽然充分考虑了效率问题,却低估了用户理解上的困难。(截止本文发布前,富途最新版对现方案做了视觉样式上的更新,看来设计师也意识到了该方案目前存在着一些不够清晰的地方,期待后续交互上的迭代。)

长桥将分组的“新建、排序、删除、重命名”拆的很散,理解上不困难,操作起来较为繁琐。

2. B梯队:平台类产品,腾讯自选、东方财富

  • 共同的设计侧重点:相关功能尽可能的聚合在一起
  • 共同的弊端:当用户目前仅想完成一项任务时,产品每次都会同时提供多项任务,操作通常很难专注。用户不可避免的会多花些时间和好奇,来理解与本次操作任务无关的信息

3. C梯队:社区类产品,雪球

设计侧重点:管理标的、分组与数据、使用习惯的设置完全分开

一些细节问题:比如“管理本页股票”,在批量操作的场景下,底部栏却存在不能批量操作的选项

小结:对三类产品的竞品调研也验证了我们最初对需求目标的把握,为券商类产品设计“自选功能”,效率和流畅度是最关键的。设计目标明确了,接下来我们看看目前都存在哪些问题,以及对应的解法。

三、问题与解法

1. 当用户精准搜索一个标的,并将其添加至自选后,并不能在当前完成该标的的分组

如图所示,现在如果想完成上述任务,需要4步、且每次仅能将标的添加至1个组。优化后我们可以通过3步完成,且每次可以将标的同时添加至多个组。

(注:Snackbar虽然源于安卓原生的MD设计系统,在IOS并无此原生控件。但是随着二者在设计上日渐趋同,且控件的应用上也早已互通有无,所以Snackbar在IOS的使用,合理即可,不必纠结于平台差异。)

交互关键点:

  • 想提升操作效率,不仅局限于步数、路径的缩短,它还可能是场景的正确连结、重复操作的合并;
  • 使用Snackbar,本质上是给用户选择的余地。在操作a完成后的2-3秒决定是继续进行操作b,还是离开当前场景。

2. A功能和B功能在自选场景分别有两条触达路径,不过多路径的存在不但没有提升功能的使用体验,反而带来了不小的认知负担

关于“冗余路径”应该保留还是去除,一直以来都存在争议。讨论这个争议的前提是:冗余路径虽然不是最优路径,但是满足了特定场景下用户的特定操作习惯。

当“冗余”只是冗余、没有任何增益时,也要敢于做减法;因为同时还需要考虑一点:出发前的选择越多,用户的决策时间越长。

交互关键点:

在业务方提出为同一个功能再添加一条新的路径时,我们必须要弄清楚,这条新路径是为解决什么问题存在的。不解决问题的需求,大部分是对产品的无效堆砌。做好产品的“守门员”,给出专业的判断,是交互设计师的重要职责之一。

3. 关于“自选”的设置功能,这里会讨论到几个典型的“欲速则不达”的交互问题

1)对功能的整理和归类,是我们为用户留下的使用线索。如果推理时间过长,说明线索的指向性出了问题。

  • 问题:将“管理分组”归至“设置”,分类不清晰;“数据项”Tab中的设置项没有根据相关性进行分组;
  • 解法:在“设置”中去掉“分组” ;数据设置项根据相关性进行分组 (指标→显示→排序)。

2)如果层级 1 包含层级 1.x,那么层级 1.x 的操作不应放置在层级 1 的认知区域。

  • 问题:数据项Tab的“默认数据”放在顶部导航栏,功能层级不匹配;
  • 解法:功能层级调整至匹配。

3)如果用户设置了一些项目,无法在预期场景看到对应的效果,应提前给与说明。

  • 问题:完成数据项设置后,无法在竖屏看到全部生成效果;
  • 解法:在数据项设置页顶部进行生成效果的说明提示。

交互关键点:

注重“效率”是没错的,比如上述case中看似有“效率”的Tab结构。但是这里面隐藏着更多的“清晰”问题。如果一个功能设计的让用户用不明白,也就谈不上“效率”的提升。

4. 最后一个case我们看下互联网产品中最常被忽视的细节-文案

场景1:批量管理标的。

文案问题:按钮表意都是“删除”,带来的实际结果是不同的,存在歧义。

场景2:数据项设置。

文案问题:没有进行规范化处理,增加了选项的理解难度。

交互关键点:

很多时候,一套语义清晰、逻辑顺滑的文案,可以等价于某个功能优化的迭代周期。实际功能点不变,只是替换文案,就能让用户用的清爽明白。这样的“好买卖”,却一直被严重低估。

四、总结思考

遇到同质化较高的需求重构时,初期应扔掉“套路”思维,从用户视角、业务视角推导出主要设计思路。带着问题去分析竞品,推敲竞品在此类需求设计上的精细差异。不要对行业top给出的方案习惯性盲从,要经过思考和反复论证,推导出最适合自己所负责产品的交互方案。

当设计深入到细节,出现了可A可B的选择时,回头看看我们经过深思熟虑推导出来的设计目标。重新评估A/B方案是否符合目标、是否有助益于实现目标。没有太多“怎么设计都可以”的方案,从我们的选择中,也透露了决策的倾向。只是我们需要时刻确认这种“倾向”在整体逻辑中是自洽的。

每一份交互输出都应该是有观点的输出,即使最终我们的观点被业务方、协作方的诸多因素所淹没,仍要保持、增进自己提出观点的能力。那些常被用户生动提起的、打造出特色和性格的产品,都是由一个个鲜明观点铸造而成的。




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

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


文章来源:人人都是产品经理  作者:cony的小书包

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

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


如何建立一套设计系统

雪涛

一、项目背景

1. 业务背景

  • 3名设计师协同负责APP的设计工作,设计侧介入时间晚,周期短,由于是v1.0版本,没有可以复用的设计组件,从0-1探索设计风格,定义视觉语言。

  • 前期每天依赖钉钉传输本地设计文件,设计语言不统一,效率低。协作工具不是很理想,后期待优化。


2. 设计背景

  • 当我们开始设计系统的制定时,大部分设计师可能都会先去网上找到大厂现成的设计系统,当拿到他们的成品的时候,会把自己的产品进行拆解和借鉴,这的确能快速解决问题,但是如果不理解其中的组织规则和逻辑,只是借鉴他们现成的设计系统,只能了解个大概,知其然而不知其所以然。

  • 直接复用其他产品的现有组件库并不能完美套用在自己的产品上,不能形成自己的产品调性,甚至有些组件不符合自身产品的使用场景。



二、设计规范的价值

1. 设计层面

  • 随着项目开始成熟,设计也需要一套统一的标准,提升设计质量以及设计的一致性。有了规范及标准,输出才能趋向于稳定,迭代才能有序的进行。

  • 沉淀设计资产,使得设计更加持续地输出价值,减少一次性设计,使设计师不要每天局限在元素样式设计中,而是可以站在更高的层面上来思考业务与体验。


2. 开发、测试层面

  • 与设计规范同步形成研发资产,避免重复造轮子,保证代码质量,降低维护和拓展的成本。

  • 测试避免重复的无意义走查。


3. 产品体验层面

  • 统一产品体验,映射品牌心智。

  • 规范的制定,能有序统一不同页面层级的信息架构,视觉表达。用户在产品终端内,各链路、各阵地的体验是一致的,看到的信息元素,也会有共性的传达。这些共性的元素,组成了品牌的内核,能够帮助用户建立心智。


4. 协作层面

  • 降低不同设计师之间以及设计师与开发工程师之间的沟通成本。

  • 设计师无需再花精力思考定义新的元素样式,既能保证统一性,同时通过复用体系,设计师也可以更高的提升效率,释放一定执行的工作量,可以把更多的精力放在前置思考决策环节,帮助业务、用户提升价值。



三、设计规范的目标

1. 设计风格一致

不同设计师有不同的设计风格、设计手法,项目有多个设计师协作时会出现不同的设计语言,需要统一产出的设计样式。

用户在使用产品时可以感受到统一的设计语言,从而降低用户的理解成本。


2. 提高设计效率

通过组件库高效协同工作


3. 建立稳定迭代机制,完善设计流程

版本迭代时,按照设计规范统一设计语言,有不完善之处,和项目设计师讨论确定方案,补充规范文档。



四、如何搭建设计系统

1. 设计原则

对于设计系统而言,在开始的第一步首先要确定一个标准,一个指导原则,在遇到不确定的设计过程中,依靠设计原则来引导方向。   


  • 其他产品设计原则

  • 有赞:产品原则:产品定义、产品设计、产品研发、产品运营。设计原则:高效、友好、安全

  • TED:追求永恒,而不是追求潮流

  • Pinterest:清晰易懂、充满活力、牢不可破

  • Airbnb:统一、通用、风格化的、对话式的

  • 我们的APP:扁平、亲和、简约


2. 色彩规范

主色

  • 采用品牌色红色,色相根据产品调性有所调整

  • 主色色阶使用扩展色生成器生成,在开源网站上根据自己的需求调整参数,创建色彩体系。  

  • 在制作组件时,将颜色添加 主色、辅助色、中性色为一级分类,例如:01_主色;再添加二级分类,例如:01_主色/red ;三级分类根据颜色饱和度,用x%命名,例如01_主色/red/100%。

  • 命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后,将每个颜色转换成 Symbol,便可统一调用。



辅助色

  • 我们不仅需要品牌色来传递品牌价值,我们还需要辅助色来组成我们产品体系的颜色搭配,实现不同功能点的视觉呈现。目前编程猫APP辅助色暂定为黑色。

  • 对于辅助色的选择,可以选取了同类色、互补色、对比色三种辅助色系。


  • 同类色:

  • 色环上相差15-30度的色彩,非常舒适,色彩过渡自然,温和,给予用户安心,信任的心理预期。并且于品牌色的色相冷暖性质一致,和谐统一。(将品牌色设置为最中间的点,就可以得到两个辅助色)如下图



  • 互补色:

  • 指在色相环上角度为180°的色彩,比如我们最常说到的3组互补色:红和绿、蓝和橙、黄和紫。如下图:



  • 对比色:

  • 没有互补色那么严格,指的是在色相环上角度在120° - 180°之间的色彩,并且理论上来说,互补色应该也是包含于对比色之内的。比如:粉色和绿色就是对比色。如下图:



  • 校正辅助色

  • 校正的原则一:色相差值不能超过15近似色的选取,保证色相不超过15,保持统一的视觉体验。

  • 校正的原则二:尽量保持感官明度一致

中性色

  • 中性色作为辅助色,也是调和颜色视觉的一种。它本身不带情感色彩,可中和其他任何颜色,自然界中没有纯黑或者纯白的颜色,所以将纯黑色降了纯度,使之符合感觉舒适程度。中性色也常用于字体的使用,并且以不透明度的形式落地。

  • 在中性色组件里,由于文字、背景色都属于中性色,分别定义了三大类的二级分类,分别BG、Black、Text


功能色

B端产品多用,此处不过多赘述。


3. 字体规范

字体的命名方式为序号_标题类型/字重/对齐方式/字号的层级结构,例如「01_主文字_标题_按钮文字_正文/加粗/Center/28px」;一级分类定义了五个大类:

  • 主要的文字:主文字、标题、按钮问题、正文;

  • 次要文字:副标题、辅助文字、弱标签字;

  • 禁用文字;

  • 标签文字:文本链接、功能文字;

  • 特殊字体。


4. 栅格系统

我们都知道多数栅格里的间距都采用8/6的倍数,有了8这个基数后其他都很容易定义,但是前期我们2位设计师在设计初期页面时,1个采用6倍栅格,1个采用了8倍栅格,导致设计稿不统一,浪费了时间修改调整

      

那具体应该是用6还是8呢?

  • Web端常见框架Bootstrap用8为基数,响应式布局更灵活

  • 减少出现奇像素偏移造成模糊

  • 开发更容易理解的数字8

  • 能被最多的屏幕尺寸整除适配



5. 图标设计

一级分类分为导航类、功能类、系统类三大类,二级分类根据场景和名称进行细分。前期二级分类用尺寸来进行分类,但是后期讨论用尺寸定义寻找某个图标不够便捷,如果找「返回」,设计师并不知道这个返回是多大尺寸的,寻找起来就比较费力,所以改成了按照场景分类。

 

根据图标形状,按照方形、圆形、横向、纵向输出图标绘制模版,便于用户感知到统一的图标风格,也便于设计师对图标进行绘制和调整。


6. 通用控件

根据原子理论的定义和命名方式,依次完成对其他通用控件的原子、分子和组织的定义,例如:按钮、列表、空状态等,整个过程都是通过 Symbol 的不断嵌套,最终实现组件库的创建。


Diolog 弹窗

  • 满足基本组件需求,跟随文案内容自动适配弹窗高度,按钮颜色可更换,文案字符样式可更换

  • 使用包含具体动作的动词,即使不看上下文也可以通过按钮判断,而不是使用【确定】、【取消】等宽泛的词汇。



Default 缺省页

给用户提供解决方案,而不是让用户自己寻找问题原因

List 列表

  • 符合前端-盒子模型

  • 盒模型是一种描述对象尺寸和间距的方法。它由 4 个组件组成:边框、边距、内边距和元素本身的尺寸。

  • 边框:围绕元素边缘的描边粗细。大多数设计工具不允许这影响整体间距和尺寸。

  • Padding:元素边界与其子元素边界之间的空间

  • 边距:元素边界与相邻对象之间的空间


在做每个模块时,不仅仅只是把默认的文本/元素制作出来,它的热区也要让开发可以理解,按照盒子模型的原理,比如在做List,「单项输入」文本的行高,整个单元格的高度需要用白底画出来,明确padding值;与其他元素/设备之间的边距(Margin)要也表示出来。



五、维护与管理

1. 存储地址

  • sketch cloud云端同步

  • 云端管理会有一些较大的优势。比如更新通知更方便、每次大家访问,都能下载到最新的规范,维护管理起来也会省事一些。


2. 更新同步

规范的改动性不要过于频繁,通常半年及1年左右的时间以上,进行一次较大迭代是比较合适的。每次更新以后,需要邮件或者其它形式,周知所有跟规范可能相关的人员。同步的信息主要有  :

规范本次修改范围及修改原因;

  1. 修改点罗列

  2. 优化后的版本号

  1. 最新的文件同步

  2. 推进变更计划




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

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


    文章来源:站酷  作者:AmberU

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

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



JavaScript对象、内置对象、值类型和引用类型详解

前端达人

对象

JS中的对象是属性行为结合体,其中属性是对象的静态特征,行为又称方法,是对象的动态特征。

JavaScript中的对象主要分为三大类:

  • 内置对象
    由ES标准中定义的对象 在任何的ES的实现中都可以使用,比如Math String Number Boolean Function Object
  • 宿主对象
    由JS的运行环境提供的对象,目前来讲主要是浏览器提供的对象,比如BOM DOM
  • 自定义对象
    由开发人员自己创建的对象

对象的定义

定义非空对象

 // 非空对象: var 对象名 = { 属性名: 值, ... 方法名: function([参数]){ 方法体语句; } ... } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
 var p1 = { color: '黑色',//给对象添加属性 weight: '188g',//属性之间用逗号隔开 screenSize: 6.5, call: function(name){//给对象添加方法 console.log("打出电话:"+name); }, sendMassage: function(msg){ console.log("发出的信息是:"+msg); }, playVideo: function(){ console.log("播放视频"); }, playMusic: function(){ console.log("播放音乐"); } } console.log("手机颜色:"+p1['color']);//也可以使用 对象['属性']来输出属性值 console.log("手机重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("张三");//调用对象的发方法 p1["sendMassage"]("helo"); p1.playVideo(); p1.playMusic(); console.log(p1); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

使用new Object()创建对象

 var p = new Object(); // 创建一个空对象p 
  • 1
 p2.name = '刘备'; p2.sex = '男'; p2.age = 32; p2.sayHello = function(){ console.log('Hello'); } p2.sayHello();//调用对象的方法 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

可以使用构造函数来创建对象:
语法: new 构造函数名( )

 function Student(name,sex,age){ this.name = name;//这里的this指向的是构造函数新创建的对象 this.sex = sex; this.age = age; this.show = function(){ console.log("姓名:"+this.name) console.log("姓别:"+this.sex) console.log("年龄:"+this.age) } } var s1 = new Student('乔峰','男',28);//s1为构造函数创建的新对象 即实例 s1.show(); var s2 = new Student('段誉','男',23); s2.show(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

注意:"构造函数"可以有参数,也可以没有参数,如果没有参数小括号可以省略

遍历对象的成员

遍历对象的属性和方法:使用for…in循环

 for(var 变量名 in 对象名){ 循环语句 } 
  • 1
  • 2
  • 3
 function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.show = function(){ console.log("姓名:"+this.name) console.log("姓别:"+this.sex) console.log("年龄:"+this.age) } } // s2是要遍历的对象 var s2 = new Student('段誉','男',23); for(var k in s2){ console.log(k);//依次输出 name sex age show() console.log(s2[k]);//依次输出 段誉 男 23  } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

in运算符
判断成员(属性)在对象中是否存在,存在返回true;不存在返回false。

JS内置对象

JavaScript提供了很多常用的内置对象,包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。

Math对象

Math对象:用来对数字进行与数学相关的运算,不需要实例化对象,可以直接使用其静态属性和静态方法.

 Math对象:不需要实例化
            Math.PI:算数常量PI Math.abs(x):返回x的绝对值
            Math.max(args...):返回最大数
            Math.min(args...):返回最小数
            Math.pow(x,y):返回x的y次方
            Math.sqrt(x):返回x的算术平方根
            Math.random():返回0.01.0之间的随机数
            Math.round(x):返回最接近x的整数
            Math.floor(x):返回一个小于等于x 并且与它最接近的整数
            Math.ceil(x):返回一个大于等于x 并且与它最接近的整数 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Date对象

Date对象:需要使用new Date()实例化对象才能使用,创建一个对象 Date()是一个构造函数,可以给该构造函数传递参数生成一个日期对象。
在这里插入图片描述
在这里插入图片描述

 // 1.创建一个Date对象 没有参数 var date1 = new Date(); console.log(date1); // 2.传入年 月 日 时 分 秒 创建一个指定日期时间的Date对象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.传入一个日期和时间字符串创建一个Date对象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date对象距离1970年1月1日午夜之间的毫秒数 console.log(date1.toLocaleDateString())//2021/6/14 console.log(date1.toLocaleString())//2021/6/14 下午11:17:36 console.log(date1.getFullYear())//2021 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

数组对象

数组:是一些类型相同的数据的集合,它和普通的对象功能类似,也是用来存储一些值,数组是使用数字来作为索引操作内部的元素。
数组的创建

  • 使用字面量
 var arr=[]//创建一个空数组 
  • 1
  • 使用new Array创建
var arr = new Array();//定义一个空数组 
  • 1

判断一个对象是不是数组的两种方法:

  • isArray(对象名)
  • instanceof: 对象名 instanceof Array
 var arr = []; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false console.log(arr instanceof Array);//trrue 
  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述
关于数组的其他方法之前的文章要有详细介绍,这里不多做解释。

String对象

String对象:字符串对象,必须使用new String()来创建

字符串常用方法

 - charAt(n) 返回n位置上的字符串 - concat(s1,s2,...) 连接多个字符串 - charCodeAt(n) 返回n位置上的ASCII- split('分隔符') 将字符串按给定的分隔符 转换成字符串数组 - substr(start,length) 从start开始提取length个字符构成一个新串 - substring(from,to) 提取from和to之间的字符串构成一个新串 - toLowerCase() 将串中的大写字符转换成小写 不影响原字符串 返回一个新字符串 - toUpperCase() 将串中的所有小写转换成大写 不影响原字符串 返回一个新字符串 - replace(str1,str2) 使用str2替换字符串中的str1 返回替换结果 不影响原字符串 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

字符串对象练习

 // 输入一个由字母组成的字符串,统计串中每个字母出现的次数 var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26个小写字母各自出现的次数 var upper = new Array(26);// 存放26个大写字母各自出现的次数 // 初始化两个数组 for(var i=0;i<lower.length;i++){ lower[i] = 0 upper[i] = 0 } for(var k=0;k<str.length;k++){ if(str.charAt(k)>='a' && str.charAt(k)<='z'){ lower[str.charCodeAt(k)-97]++ }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){ upper[str.charCodeAt(k)-65]++ } } console.log(lower); console.log(upper); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
 /* 输入一个十进制整数和一个数制(2、8、16)将该十进制整数转换成
        对应的数值格式输出
            取余法:
               m=15 k=8
               m%k 将余数存放在数组中
        */ var m = parseInt(prompt('请输入一个整数:')); var k = parseInt(prompt('请输入一个数制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放数制转换的结果 var i = 0; while(m!=0){//对m进行数制转换 将余数放在arr数组里 arr[i] = m%k; m = parseInt(m/k); i++; } var str = ''; if(k==8){ str = '0'; }else if(k==16){ str = '0x'; } for(var i=arr.length-1;i>=0;i--){ str += result[arr[i]]; } console.log('转换的结果为:'+str); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

值类型和引用类型

值类型: 简单的数据类型(字符串,数值型,布尔型,undefined,null)
引用类型: 复杂数据类型(对象) 变量中保存的是引用的地址

注意: 引用类型的特点是,变量中保存的仅仅是一个引用的地址,当对变量进行赋值时,并不是将对象复制了一份,而是将两个变量指向了同一个对象的引用。

下面对内存中的栈和堆进行分析
栈(stack):会自动分配内存空间,会自动释放,简单数据类型存放到栈里面。
堆(heap):动态分配的内存,大小不定也不会自动释放,复杂数据类型存放到堆里面。

在这里插入图片描述
由此可见存放在堆内存中的对象,变量实际保存的是一个指针,这个指针指向另一个位置,通过这个指针来寻找堆中存储的对象的属性和值,并且每个空间大小不一样,要根据情况开进行特定的分配。




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

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


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

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

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

Web前端-JS基础

前端达人

JS的历史和特点简介

JS诞生的背景

1.随着互联网的发展,页面传递给后台有太多需要验证的东西,尽管后端的代码是能够实现对传递过来的数据进行校验和判断的,但是这样的话无疑是加重了后台程序的工作任务量,于是广大互联网工作人员迫切需要有一种新的办法/语言能够实现这样的效果,于是js也就是在这样的一个大的时代背景下诞生的

2.js最开始的时候是不叫js而是叫scrpit语言,他们也想将这个前景光明的明日之星卖给微软,但是微软没有买下,在种种机缘巧合之后被Sun公司收购了,为了让其与java语言走的近点 ,更是改名为JavaScript简称为js

JS的历史

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成

1997年,在ECMA(欧洲计算机制造商协会)的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准:ECMA-262。

JS的特点

1.弱类型语言:在书写的时候不去做明确的数据类型的限定 例如 var a=3.14 var b=“998”

2.运行在浏览器端的解释执行性语言(js—>node.js可以运行在服务器上)

3.基于对象的编程语言

4.跨平台性:JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

5.动态性:JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页(Home Page)中执行了某种操作所产生的动作,就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

可以简单的理解为:只要用户发出动作,js就会产生响应

6.安全性:JavaScript是一种安全性语言,它不直接允许访问本地的硬盘,并不能直接将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

小结:js现在的用途

1)作用于浏览器端帮助提升用户的体验度

2 ) 可以用来编写游戏脚本

3)可以被构建成各种组件(node.js,React.js,vue.js, Jquery)

JS的语法基础

第一个JS例子

<html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> alert("Hello World"); /*弹出对话框*/ </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

在这里插入图片描述

小结:1.js在页面内使用的时候必须要写在<script>标签内

2.js代码书写的时候不用分号标识一行编程语句的结束

3.在js代码中xxx():此时表明这是一个函数

4.alert():以弹窗的形式将括号内的内容展示出来

JavaScript 语法

JavaScript: 是一个脚本语言。它是一个轻量级,但功能强大的编程语言

1.数据类型:虽然JavaScript在书写校验上不去区分数据的类型,但是并不意味着是不区分数据类型,而是通过在浏览器中内置的JS解析器/引擎自动的去判断的

---------------------------------------------------------------------------------------------------------

1.1数字:

var a=12 //整数

var b=2.3 //浮点数或者说是小数型

var c=-0.5

友情提示:1)在js中变量名必须以字母或下划线("_")开头

2)变量可以包含数字、从 A 至 Z 的大小写字母

3)JavaScript 区分大小写,即变量 myVar、 myVAR 和 myvar 是不同的变量

---------------------------------------------------------------------------------------------------------

1.2逻辑型或布尔型:

var a= true

var b=false

alert(a)

alert(b)

---------------------------------------------------------------------------------------------------------

1.3Undefined 和 null

Undefined: 用于存放 JavaScript 的 undefined 值,表示一个未声明的变量,或已声明但没有赋值的变量,或一个并不存在的对象属性

null:可以通过将变量的值设置为 null 来清空变量,其意思为空值

var a=""

var a=null

var a

alert(typeof(a))

---------------------------------------------------------------------------------------------------------

1.4字符串: 可以使用单引号或双引号

var firstName=“biil”

var familyName=‘Gates’

alert(firstName+familyName)

---------------------------------------------------------------------------------------------------------

1.5日期:

var myDate=new Date()

alert(myDate)/默认是格里尼形式的日期格式/

提示:Date是js中的一个内置的类

new:为类Date在内存中创建一个内存空间,进而实现实例化

补充:关键字:就是具有特殊含义的词

---------------------------------------------------------------------------------------------------------

1.6数组:是一种存放数据的容器,其一般可以存放多个,且需要知道其长度

var array=[40, 100, 1, 5, 25, 10]

alert(array[0])

---------------------------------------------------------------------------------------------------------

注释:

单行注释://

多行注释:/**/

扩展:注释的作用:

1)统一规范

2)注解,帮助理解/阅读代码

3)扯淡

---------------------------------------------------------------------------------------------------------

连接字符和转义字符:

连接字符:在js中场用+表示为连接字符

例如: var a=123

alert(‘变量a的值为:’+a)

转义字符:具有特殊含义的字符

\n 换行符 alert(“这是第一局 \n 这是第二句”)

\t 制表符 alert(“这是第一局 \t 这是第二句”)

---------------------------------------------------------------------------------------------------------

2.运算符:

2.1算术运算符: +, -, *, /, %,++,--

++:自动加1 例如 var a=12

alert(a++)

++在前:先计算再输出; ++在后:先输出再计算

–:自动减1,例如 var h=6

alert(a–)

---------------------------------------------------------------------------------------------------------

2.2关系运算符: > ,>=, <,<=, !=, ==,===

---------------------------------------------------------------------------------------------------------

2.3逻辑运算符:

与 :&& :全真为真,只要有一个假则为假

或 :|| :全假为假,只要有一个为真则为真

非 :! :取相反的

JavaScript 输出

JavaScript 可以通过不同的方式来输出数据:

1)使用 window.alert() 弹出警告框。

<html> <body> <h1>使用 window.alert() 弹出警告框</h1> <script> window.alert(5 + 6); </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这里插入图片描述

2)使用 document.write() 方法将内容写到 HTML 文档中。

<html> <body> <h1>我的第一个 Web 页面</h1> <script> document.write(123); </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这里插入图片描述

3)使用 innerHTML 写入到 HTML 元素。

 <html> <body> <h1>使用 innerHTML 写入到 HTML 元素</h1> <p id="demo">我的第一个段落</p> <script type="text/javascript"> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

使用innerHTML方法,将前面定位到的选择器中的标签内容进行更改

在这里插入图片描述

4)使用 console.log() 写入到浏览器的控制台。

<!DOCTYPE html> <html> <body> <h1>使用 console.log() 写入到浏览器的控制台</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

console.log()会将想要输出的数据写到网页的控制台中显示
在这里插入图片描述

基本语句

1)顺序语句:js默认是从上向下自动执行的

2)选择语句:

2.1)二路分支:

if(条件)

{

//JavaScript代码;

}

else

{

//JavaScript代码;

}

2.2)多路决策:

switch (表达式)

{

case 常量1 :

JavaScript语句;

break;

case 常量2 :

JavaScript语句;

break;

default :

JavaScript语句;

}

小结:switch…case…default不仅有多路决策的特性,还有穿透性

或者:

if (time<10) { alert("早上好"); } else if (time>=10 && time<16) { alert("中午好"); } else { alert("晚上好!"); } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

3)循环语句:

for循环语句:

for (var i=0;i<10;i++) { alert("当前i的值为:"+i) } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

while循环语句:

var i =1 while (i>5) { alert("当前i的值为:"+i) i++; } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

do…while循环:

var i=5 do { alert("执行了") i++; } while (i<5); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

备注:for:知道次数的循环

while:>=0次的循环

do…while:>=1次的循环

break:语句用于跳出循环。

continue:用于跳过循环中的一个迭代。

JavaScript 数据类型的转换

1.typeof 操作符:可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

2.将数字转换为字符串

 var a=123 //第一种方法,用String //var castResult=String(a)  //第二种方法,用toString方法 var castResult2=a.toString() alert(typeof(castResult2)) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3.将字符串转换为数字

 var a="123" //用Number转换 var b=Number(a) //用parseInt方法将字符串强行转换为数字 //var b=parseInt(a) alert(typeof(b)) alert(b+998) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

javaScript方法

1.match():匹配字符串可用正则表达式

2.search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置

 var str = "abcderfha"; //返回查找到的下标位置 alert(str.search("er")) //返回 4 //查查找不到的时候返回-1 alert(str.search("zy"))//返回-1 
  • 1
  • 2
  • 3
  • 4
  • 5

3.replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

var str = "Hello World"; alert(str.replace("World","javascript"))//显示结果为Hello javascript 
  • 1
  • 2

javaScript函数

js中的函数定义

语法: function 函数名( ){

}

实例一

<html> <head> <meta charset="UTF-8"> <title>JS函数</title> </head> <script type="text/javascript"> function sum(a,b){ alert(a+b) } </script> <body> <input type="button" value="求和" onclick="sum(3,4)" /> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

定义一个求和函数,当点击求和按钮的时候将计算出传入的两个参数的和

ps:onclick单击事件
在这里插入图片描述

匿名函数定义

var xx =function(x,y){

alert(x+y)

}(23,34);

(function( o ){

alert(o)

})(“你好”)

实例二:

<script type="text/javascript"> var fun=function(a,b){ alert(a+"\n"+b) } fun(12,45); </script> ------------------------- <script type="text/javascript"> (function( o ){ alert(o) })("你好") </script> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在这里插入图片描述在这里插入图片描述

JS对象

数组对象

创建一个数组:三种方式

1:常规方式

<script type="text/javascript"> var myCars=new Array(); myCars[0]="nike" myCars[1]="李宁" myCars[2]="安踏" alert(myCars[1]) </script> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

2:简洁方式

<script type="text/javascript"> var myCars=new Array("nike","李宁","安踏"); alert(myCars[1]) </script> 
  • 1
  • 2
  • 3
  • 4

3:字面方式

<script type="text/javascript"> var myCars=["nike","李宁","安踏"]; alert(myCars[1]) </script> 
  • 1
  • 2
  • 3
  • 4

2:访问数组:通过指定数组名以及索引号码,你可以访问某个特定的元素

例如:var name=myCars[0];

3:数组的方法和属性

数组名.length : 数组 中元素的数量

数组名.indexOf(“abc”):“abc” 值在数组中的索引值

4:数组的排序

数组名.sort(); :将数组按正序排序,但是是按照字符串的排序方式来排序,不管里面是数字还是什么都是按字符串的排序方式来排序

reverse():将一个数组中的元素的顺序反转,(即是将数组中的元素的头变成尾,尾变成了头,不是其他的)

扩展:将数组先用sort()方法进行正序排序,在利用reverse()方法反转,即可达成降序的目的

字符串对象

字符串中常用的属性和方法

str.length:获取字符串的长度

str.match(""):内容匹配

str.replace():替换内容

var str="adsfadsf"; var n=str.replace("adsf","abcx"); var s=str.length; 
  • 1
  • 2
  • 3

JS面向对象编程

1.对象:是属性和/方法的组合

属性:是对象所拥有的一组外观特征,一般为名词

方法:是对象可以执行的功能,一般为动词

例如:对象:汽车

属性:型号:法拉利 颜色:绿色

方法:前进、刹车、倒车

PS:三类已经存在的对象:

浏览器对象:BOM(已经存在于浏览器中的,到时候我们直接调用即可,例如Screen,History,Location,Navigator)

js脚本对象:数组,字符串,日期,Math等(JS语言中已经写好的具有某一些功能的对象,例如Array,Number,Math…)

HTML文档对象:DOM(已经存在于HTML中的,且已经写好了,用的时候可以直接调用即可,例如Document

例如:

<script type="text/javascript"> function Car(name,color) { this.name=name; this.color=color; this.type="轿车"; this.fun=function(){alert("100km/h");} } var car1=new Car("奥迪","蓝色"); var car2=new Car("奔驰","绿色"); alert(car1.type); //轿车 car1.fun();//100km/h </script> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

javaScript选择器

1.id选择器:通过 id 查找 HTML 元素,如果找到该元素,则该方法将以对象的形式返回该元素。

document.getElementById("id1").value //获取id为id1的标签中的value值 
  • 1

2.name选择器:通过name查找到HTML的元素,如果找到元素了,则会返回一个数组

 var arr=document.getElementsByName("like") //将name为like的标签全部存入arr数组中 
  • 1

3.通过标签名找到 HTML 元素:

getElementsByTagName("p"); var habbies=document.getElementsByTagName("input")//其他的都与步骤2一样 
  • 1
  • 2
  • 3

javaScript弹框

确认框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>确认框</title> </head> <body> <p>点击按钮,显示确认框。</p> <button onclick="myFun()">点击</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=confirm("是否提交商品订单");//弹出一个确定框,确定,返回true,取消返回false if(r==true){ x="提交成功,已确定" } else{ x="提交失败,已取消" }//抓取掉id为demo的标签,在屏幕显示x内容 document.getElementById("demo").innerHTML=x; } </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

在这里插入图片描述

点击确定,会在屏幕显示”提交成功,已确定“,点击取消,会在屏幕显示"提交失败,已取消"

对话框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>确认框</title> </head> <body> <p>点击按钮,显示输入框。</p> <button onclick="myFun()">点击</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=prompt("请输入你的名字","Hello"); //弹出对话框,可输入名字 //判断如果输入的不为空或者不是空字符串,则x被赋值 if(r!=null && r!=""){ x="早上好"+r+"今天又是新的开始,加油" } //抓取掉id为demo的标签,在屏幕显示x内容 document.getElementById("demo").innerHTML=x; } </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

在这里插入图片描述

点击确定以后则会将被赋值的x显示在屏幕中



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

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


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

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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档