首页

用 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2032)

关于通过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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(5497)

设计体系的响应式设计

涛涛

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

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务





评论(0) 浏览(2310)

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

涛涛

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

更多设计文章，设计交流，欢迎加入粉丝群 | 微信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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(2070)

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

涛涛

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


一、把握需求

如果我们将“自选”转化为熟悉的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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(2123)

如何建立一套设计系统

涛涛

一、项目背景

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



评论(0) 浏览(2734)

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.0到1.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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(1923)

Web前端-JS基础

前端达人

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(1884)

洞察体验之美｜消费决策场景下的行为设计与体验思维（一）

鹤鹤

体验经济的时代已经到来，无论是实体产业或是虚拟产业越发依赖于服务和体验带来的经济效益，作为互联网从业者，深刻认识到体验的重量，从尊重用户体验到掌握体验思维，于大多数角色而言都是一门必修课。


“附近的火锅店味都差不多，不过A家服务员态度好好，而且还有好多免费小吃，吃完还能做美甲，吃它！

“下班一起去新开那家咖啡馆打卡不？朋友圈看到装修好有格调，甜点看起来也超精致，特别适合拍照呢！

“周末那家密室剧情挺一般的，不过场景氛围还不错，挺刺激的，关键是npc好帅，小姐姐也好美，还想去！

“师傅，麻烦稍微快点我赶时间估计要迟到了，“小伙子放心，坐稳了”，8分钟后，迟到前5分钟，打卡成功。
——仅以此条向重庆全体出租车师傅致敬」

...


很熟悉吧？还有数不清类似的场景充斥在我们的身边，近些年来，消费者对事物的评判标准有了翻天覆地的变化，一家餐厅对于顾客的价值，决定性因素不再是单一的菜品口味；服务员的颜值、装修的格调、菜品是否精致、拍照好不好看、服务态度如何、有无明星打卡经历，甚至是吃饭免费做美甲这样的边际体验都加入了顾客对餐厅的价值评判标准中，餐厅的效益与顾客的粘性甚至取决于这些边际体验；市场的高强度供给和国民经济效益的提升，为消费者带来了更大的选择空间，解决刚需不再是人们的唯一追求，“品质“一词开始走进大众群体的生活，相比果腹而言，服务与体验这类精神消费需求成为了新世代消费者所追逐的对象，同时也成为了评判事物价值的新机制。


当下市场，商家、消费者与互联网平台形成新的内容产业链，消费者通过平台及商家不断收获各类峰值体验，更有甚者还能以此获利，而商家和平台则收获流量和经济效益，在人货场的概念中形成生态闭环，可谓互相成就。而如何满足顾客的精神消费需求以及怎样制造更多更好的边际体验，成为企业的“新基建“，其带来的效应让人着迷，在资本逐利的市场中，不乏企图通过这样的手段筑起高楼的群体。





“在当下这个时代，消费趋势从购买东西转向了购买体验。生产自动化导致东西越来越不值钱，买回家还占地方。很多高级消费在于购买体验，比如旅游、参加音乐会，到现场观看重大比赛。对于商家来说，用户体验就是商机，其带来的最直接的好处就是提升黏性，产生利润。”(《行为设计学》节选)


从刚需到服务，消费趋势如此，用人趋势也如此；在内卷对互联网行业深度渗透的环境下，设计师理应保有危机意识，单向的刚需能力不再满足于企业对设计师的价值认可，如何打造自身对企业的“体验”和“价值”成为大部分人的课题；我个人向来不主张设计师朝着所谓的“高复合性、UXD、全栈“等风尖能力看齐（高阶人才请掠过），窄而精，精而深，深而广，这样的“以单向能力为主的树形扩张则更适用于大多数站在塔尖下的设计师（个人认为），以UI\UX设计师为例，如何以单向核心能力拓展分支技能呢？本文将以我的实际工作案例进行深度剖析，围绕体验思维和行为设计等分支技能如何在设计中实践应用，并以此构建更具广度和深度的设计解题能力。


(一) 被设计的体验

案例：内容电商产品，商品详情页迭代

方法：结合线下购书场景体验，预测用户行为，设计用户行为动线。

路径：寻找症结>场景预测>产出>复盘


第一步，理解购买流程

工欲善其事，必先利其器。第一件事，站在用户视角和平台视角分别对购买流程进行拆分对比，以此加深各个环节所对应业务场景的理解认知。

用户视角购买流程：种草->品类决策->商品决策->购后交流；此流程会随不同的用户类型进行变化，例如带有意向商品进入APP的用户则省去种草、品类决策两个环节；

平台视角购买流程：售前->售中->售后3个阶段，售前对应种草，售中聚焦商品决策。




第二步，场景的本质

商品详情页是用户发起购买行为的重要途径，其本质是售中环节的商品决策工具，是通过人工干预的手段，提高商品与消费者的连接与匹配效率，从而为产品获得更高的收益；在满足用户基础产品体验的同时，也承载着平台流量分发后的关键转化任务。


广义上的消费决策场景，大多聚焦在售中环节的商品决策，场景为用户通过外部场景进入到商品详情页，判断一个意向商品是否值得购买，决策的结果是收藏、加购或立即购买，当然也可能直接离开；由此得出，商详场景的核心体验是通过有效的信息陈列，帮助用户了解商品与价值判断后积极的进行购买决策，而同时也是连接用户与作者以及其他关联商品的流量桥梁。 在理解场景的本质后目标变得清晰起来，为用户设计一个好用的决策工具，为平台设计一个有用的信息容器。


为用户造工具，第一件事是剖析用户：通过线上平台购买商品，用户的消费决策过程是怎样的？(常规）




结论：用户通过对商品的认知了解、价值判断建立相关的购买意愿后进行购买决策。

售中环节的信息构建是用户了解商品与自身匹配率并建立购买意愿的核心途径，场景所具备的信息传达能力对用户的最终决策起到决定性作用；为给用户带来更好的购物体验，我通过还原线下购物场景获取灵感，构建线上购书的行为模型，从而对商详进行优化，力求带给用户一个符合习惯认知的、高效、有效的决策工具，同时思考为用户带来体验效益的情景下，提前洞察可能出现的问题以及对业务场景进一步支撑的同时能否主动推进业务的发展。


第三步，设计行为模型

分析消费者线下购书行为，通常为逛书店-拿起书-翻开书-查和问-做决定等五个阶段。




分析消费者在线下的购物行为，结合业务场景构建具有可行性的行为模型，通过行为模型教育用户进入商详场景后基于动线进行浏览，将信息获取效率最大化，并以此提高商品与用户的匹配效率。


undefined



第四步，行为模型塑造购物体验

现状评估：基于行为模型，从信息关注度、信息传达能力两方面对框架结构进行体验测评。

首屏是用户对场景建立认知的核心方式，当前商详第一屏呈现的信息维度较多且落点分散，用户的注意力被大量分散，无法引导其完成对商品和场景的快速认知。


undefined



归纳前文有效信息，分别站在视觉与交互的视角对存在的问题进行归类并提出对应策略：

1.产品吸引力（氛围、质感、信息传达能力

2.优化信息结构（信息关注度、信息深度）：教育用户行为，降低用户消费决策中的行为阻力，提高商品与用户的匹配效率

3.设计最小可行性方案，将实施资源最小化，在业务规则的限制下得出最优解。


undefined



第五步，方案演示

结论：在新的场景中，基于行为模型对框架的优化，信息结构变得清晰，高效的信息传达能力让用户在最短时间内完成与商品的匹配决断，缩短了用户购买决策的体验路径；同时页面的视觉质感得以提升，用户在决策过程中的愉悦度也得以相对提升，提高了产品吸引力。


详解——信息关注度、传达能力：通过调整首屏信息陈列的亲密度主动对用户注意力进行分配，清晰的信息结构会引导用户的视线按照行为模型获取信息，当用户进入商详场景后，会快速聚焦到头部信息对商品进行基础了解，并完成第一阶段的决策(购买意愿)；


详解——信息深度、行为阻力、降噪：将详情信息字段双行展示调整为7行极限展示，减少了首屏信息维度的数量，以此降低用户首次进入场景后接触到的信息噪音，同时降低了展开收起功能的操作频率，满足了部分用户的阅读需求，为决策中期可能产生的行为阻力做了减法。


详解——产品吸引力：新增彩色背景提高了整体氛围感，加上信息亲密度的调整，界面整体视觉质感的友好度和精致度都有不错的呈现，同时决策按钮的配色调整也企图在调动用户积极心理的能力上得到提升。

展示——设计结果（仅对首屏作展示）：


undefined



衡量指标，设计自证

结合数据表现与体验评估，整体体验诸如商品认知能力、匹配效率等得以提升，但关键转化仍然不理想：


· 信息关注度：对用户完成商品基础了解建立购买意愿后的浏览动机存疑，决策中期的信息构建仍有调整空间
· 信息的质量：现有内容策略缺乏说服力，无法满足用户对商品价值的深度评估，促进用户决策的能力显得不足
· 心智模型：表现力上，新版商详带给用户的心智模型呈现为“类阅读产品”，缺少有关交易属性的信息，且信任力不足，导致了商品的不确定性。


从数据看：1-12s内无法对首屏信息进行有效浏览吸收，表现出用户对此处信息关注度较低，第二阶段的详细信息处字段冗长，满足部分用户阅读需求的同时也引起了其他用户的阅读负担，在一定程度上挑战了用户耐心，信息露出需要平衡。


基于行为模型设计的导航策略过于线性、理想化，在用户实际进行购买决策时心理路径存在线性和非线性两种群体，所关注的信息也不尽相同。


undefined


(二) 消费决策，心理探寻

方法：通过ELM（详尽可能性模型）探索用户的消费决策心理路径，以此对方案进行调整优化。

ELM模型认为，人类被说服的模型有两种，即中央路径和边缘路径：


在中央路径下：当个人的动机和能力比较强的时候，人们会理性思考、仔细评估之后做出决策，知识水平较高或有相对性需求时往往倾向于理性的选择；


在边缘路径下：当个人的动机和能力比较弱的时候，人们满足于当下的认知，通常不愿耗费精力对信息加以分析，且对信息内容的真实性无法判断，只能通过一些信息的外围因素来决定该信息的可信度，从而涵盖了感情因素，更容易被表面因素说服；


举个例子：小明和小黄逛街时看到一家环境老旧却不便宜的冷饮店，本应嗤之以鼻的小明看到门口排起的长龙和精美的饮品包装设计，让他放下顾虑立即拉着小黄参与排队购买饮品，他相信，大家都在买的就是好的；而排队过程中，小黄则仔细观察店内环境卫生以及店员的操作手法，同时上网查询该冷饮店的资料和口碑，经过对收集到的信息和眼前所看到的场景进行评估后，小黄觉得这个饮品不卫生，决定放弃购买。在这个例子中，本应嗤之以鼻的小明受到外在因素（生意好排长龙、他人行为、包装好看）影响，做出了不理智的决策，是典型的快思维（边缘决策路径）。而小黄经过亲身观察和上网查阅的手段对饮品卫生做出的决策，也就是前文提到的慢思维（中央路径）


undefined



两条路径处理的信息不同，在中央路径处理的都是与信息质量相关的线索，而在边缘路径中，处理的则是一些表象信息内容。

结合场景梳理用户决策的思考过程中的关注点：


undefined



依据结论，需完善同时满足两种决策模式下用户所需的信息：

主要体现在信息质量与表象信息两个维度，并且在界面的信息传达中突出商品属性，增加商品感。


内容共建，决策参考：当用户产生购买行为时，首先是需要被说服的，无论是被他人说服，被广告说服，还是被自己说服。讨论区的建设，在交易场景连接了内容侧的业务，同时推动产品内容质与量的发展，并试图通过言论促成“用户说服用户”的决策模式，同时满足了中央路径、边缘路径两种用户的信息供给。


强调心智，情绪体验：将原本处于第二屏的交易信息前置，矫正整体用户对界面认知的心智模型，同时让用户了解商品信息后第一时间感知到购买权益及相关配送体验，完善首屏的信任力、保障确定性，让用户具备“放心买”的心理；界面视觉的质感优化仍然以提高用户愉悦度为主，企图在决策过程中带给用户更好的边际体验，让用户在表象层面提升对产品的好感度，以信任力\好感度\平台和用户的内容共建等方式在人因决策之外发挥促进购买决策的最大因果。


undefined



结语

以上案例部分内容以倒推形式进行复盘，是脱离数据之外的解题思考方式；希望我的文章能够为感兴趣的同学带来新的思考，也期望体验思维与行为设计能够被更多设计师所熟知应用。


设计源于生活，无论是购物、玩游戏或事社交，打破线上线下的场景壁垒进行观察、思考，解题方式不乏在你身边的生活场景中，人的行为始终具有参考价值。

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

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



文章来源：站酷  作者：秋思野

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

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


评论(0) 浏览(3312)

设计体系的响应式设计

鹤鹤

本篇文章横向调研了 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 的响应式设计） 

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

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

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



文章来源：站酷  作者：Ant_Design

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

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


评论(0) 浏览(2747)

分类

日历

链接

个人资料

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

存档