首页

UI设计原则：可视化层次结构（Visual Hierarchy）设计方法介绍

seo达人

 

这篇文章是一篇很实用的文章，与 格式塔心理学有异曲同工之处，而这篇文章是基于当前流行的手机UI体验去写的，对于移动互联网这个时代来说更接地气，更实用，希望对您有用，enjoy！

1.png

随着技术和用户界面的变化，对视觉设计设计技能的需求不断增长。通过每年出现的典型用户界面的新例子，我们对视觉层次，感知和构图的基本理解有所改变吗？

视觉感知的现代概念不仅植根于科学，也植根于心理学。因此，无论用户界面如何不断变化，我们看到和感知视觉信息的方式都将保持不变。考虑到这一点，当代交互设计是否有可能改进图形组合和视觉层次结构的基础？

视觉感知的基本规则对于任何视觉设计都是至关重要的，因为它们指示如何尽可能快地传达具有嵌入意义的信息。然而，由于视觉设计是图形设计的近亲，因此这些标准是针对印刷媒体而建立的，并且尚未被重新定义为数字化。

像“数字包豪斯学校”这样可能建立新设计原则的东西尚未形成。当人们以与印刷完全不同的方式体验 UI 时，视觉层次和组合的规则不仅仅是过时的，而且会在用户界面中崩溃。

在大多数情况下，设计师仍然倾向于将屏幕视为静态的二维对象，而交互设计师面临的挑战是创新，而不仅仅是将打印格式应用于他们的数字媒体项目。但在新设计发展之前，需要重新审视对视觉层次，感知和构图的基本理解。

 2.jpg

 

Web上的大多数设计层次结构最初来自基于印刷的设计，例如报纸布局。

可视化层次结构：对交互式接口的可视化合成的新理解

什么是视觉层次结构，为什么它很重要？视觉层次结构是在组合中布置内容，以便有效地传达信息和传达意义。可视层次结构首先将查看者引导至最重要的信息，然后引导至次要内容。

通过适当使用大小，颜色，形状，距离，比例和方向来建立，通过创造性地使用决定视觉层次的图形元素来传达构图的含义，概念和情绪。

3.png

设计师如何使用尺寸，颜色，形状和方向来传达设计中的意义和情绪？

视觉层次结构对于每种类型的视觉设计都至关重要，无论是需要引导访问者眼睛的登陆页面还是移动UI的导航。用户对每个元素的理解基于组合中的其他元素及其上下文。相应地处理组成元素以形成视觉关系，从而在整个设计中建立视觉层次。

可视层次结构中的颜色

视觉层次结构的许多规则可能看起来非常简单甚至是平庸的，但它们是良好视觉设计的重要基础。例如，颜色是视觉设计中最具影响力的创意元素。

考虑红十字与单色交叉的直接含义。几乎普遍，红十字标志着中立和保护。这样就可以与颜色的使用立即进行沟通。颜色也常用于识别群体，因为当三个单色群体中的一个红色交叉以某种方式突出显示为更重要时。

明亮，丰富的色彩比柔和的色彩更突出，因此具有更大的视觉冲击力。在界面中，颜色可用于呈现结构感并指向可用的交互。单色界面中的单色可以区分选择，甚至可以建议用户悬停在按钮之外的内容。

4.png

 

单色设计元素中的颜色或缺乏颜色可用于概述UI元素并在潜意识层面吸引用户。

颜色也被赋予了意义和情感，可以将明确的信息传递给观众的潜意识。在品牌推广方面，对色彩进行了大量的心理学研究，因为它在消费者与品牌进行任何有意义的互动之前就会产生内心的反应。例如，蓝色通常被认为是可靠的，安全的和平静的，而红色是刺激性的，并且已知会增加人们的心率。然而，取决于培养，颜色可能具有不同的重要性。

在网页设计中有意义的，The Names for Change 网站是结构化的颜色，运用的一个很好的案例。该网站通过使用颜色立即传达其结构; 组织默认是分散的，但可以按主题和/或颜色重新排列。

然而，所选择的音调有助于克服该站点意义的潜在困难之一。为袜子或卫生棉条等日常用品筹款并不足以让自己出售，因此该网站的激进图形基调提高了日常用品的感知价值，同时建立了必要的基础组织结构。

5.jpg

通过“名称更改”站点上的颜色使用视觉层次结构和结构。

可视层次结构中的大小

让我们想象一下坐在三个小鸟旁边的一只大鸟的插图。没有任何进一步的信息，这个简单的图形立即传达其元素之间的关系：父母和孩子，它们共同传达一个家庭。

在传统的图形设计中，典型的策略是使最重要的元素成为最大的元素，然后逐步缩小元素的尺寸。大小建立视觉层次结构，因为最大的元素首先引起注意，因此看起来是最重要的。

在文本主体中也经常使用不同的字体大小来指示显着的差异，例如标题，部分和引号。次要内容（例如图像标题）通常较小，以便不与文本主体竞争。

6.jpg

考虑一些最广泛使用的可视界面，例如Instagram。屏幕上没有任何内容与图像和视频竞争 – 它们占据了大多数屏幕的60％以上。 UI的目的是明确的。

在网页设计中颠覆视觉层次结构的典型结构的一个例子是艺术/设计工作室Ro / Lu的投资组合网站。他们个性的网站可能不是最直观的，但它挑战了典型的在线创意组合的视觉安排。由于各种项目的有意随机化，每次访问者访问该网站时，会有不同的项目在视觉中心展示，这使得每次访问都会有惊喜。

在大多数创意设计工作室的作品集中，作品没有按层次组织，因为每个项目都是独特的，并且被认为同样重要Ro / Lu网站的设计创造了一个动态的构图，每次访问都有不同程度的惊喜，并鼓励观众调查工作室的广泛组合。因此，设计工作室的折衷，跨学科性质由内容的随机显示。

7.jpg

艺术/设计工作室的网站Ro / Lu upgnds设计层次结构以产生巨大的效果。

可视化层次结构的排列

视觉层次中的对齐通过在空间上连接元素来传达秩序感。与非线性小说中的章节一样，想象一个在图形构图中脱颖而出的正方形。当单个元素破坏已建立的结构时，它从组合物中脱颖而出，从而获得相对于其余元素的含义。

除非元件从视觉网格突出，即从有序感中突出，否则刚性构图可能看起来是停滞的并且在视觉上不感兴趣。不对齐或“打破网格”是一种给予图形元素更多视觉权重的机会。这个概念是设计中视觉层次结构的基础。

根据传统视觉设计中的原理，放置在框架中心的元件看起来更重要。例如，主要内容或界面元素可以放在中心，而导航，菜单和其他次要内容通常保持在侧面。

但开创性的设计师喜欢挑战现状。当交互式设计应用基本的视觉层次原则，然后将界限推向创新的视觉组合时，就会产生有趣的新体验。通过使用不同的对齐，在元素之间建立新的关联和含义。

例如，DNA项目是一个使用一系列脱节层次结构来传达音乐家专辑创意结构的网站。该网站的结构很复杂，专辑的结构也是如此。

8.jpg

DNA项目的网站具有不寻常但清晰的视觉层次结构。

可视化层次结构中的图形

谈到形状时，让我们考虑一下简单的心形如何在大多数社交网络UI中传达其对“喜欢”的潜在用途。要确定重要性或群体，请考虑四个圈子中的一个心脏。几何形状就像颜色一样，形状带有某些内涵，赋予元素个性或意义。

在交互式设计中，几何形状对于有效沟通至关重要，因为它们比文本更快速，更普遍地传达意义。代替文本，图标（符号）（通常是简单的几何形状）已成为大多数导航系统和UI的模拟。

“喜欢”图像，下载文件，拨打电话或查看消息背后的目标简单直接地用图标（几何形状）传达。在全球市场中，这种有效的视觉通信形式变得越来越重要，其中数字产品通常为具有多种语言的广大国际受众提供服务

 

9.png

报纸必须迅速调整他们的设计以适应新技术。其他内容产业也纷纷效仿。

要突出传统印刷和数字媒体之间不同的互动模式，请考虑在艺术部分搜索实际报纸和在大多数应用中使用搜索图标之间的区别。直到最近，大多数报纸网站都将它们的页面布局与打印时相同，并且筛选内容的体验是笨拙和迷失方向。

Signes du Quotidien网站打破传统的网页布局，以微妙的方式使用基本的方形和圆形，呈现独特的视觉层次结构，引导访问者浏览内容。菜单位于页面的中心，当访问者点击它时，会出现代表网站四个部分的四个彩色圆点。访客然后将其中一个点拖入正方形以转到该部分。

10.jpg

日常生活的标志网站

可视化层次结构中的动画

移动元素将在一组停滞元素中承载更大的视觉重量，并且视觉层次中的运动是不可能在打印中使用的原则，但是肯定可以包括在视觉设计器的工具箱中。

除了自身的字面翻译之外，运动能够进行什么交流？通常在UI中使用Motion作为元素可以与之交互的线索。是否可以进一步推动运动的使用，并将其作为一种独特的交流方式？如果视觉层次不仅仅是关于沟通的效率，还关乎嵌入的意义，那么运动如何被用作必要的视觉交流工具？

对于I Remember网站，主界面（动画）立即引人注目，因为它邀请互动。虽然动作和界面是功能性导航工具，但视觉设计师利用这些元素的潜在损失作为传达网站潜在使命的方式：阿尔茨海默病。就像组织为其筹集资金的患者的褪色记忆一样，如果没有积极的互动，网站就会慢慢消失。

11.jpg

可视化层次结构中的声音

声音是另一种不可能在印刷媒体中使用的工具，但尚未在等级原则中发展。由于声音完全是非视觉的，因此没有规则可供参考。但声音也可以是一种有效传达内容，情感或意义的设计工具。携带某些声音的设计元素可以相对于彼此进行分组，而最大胆的那些可能看起来是最重要的或者可能表示与该组的分离。

附加到元素的声音质量应该能够快速识别，表征或帮助构建内容。与其相关视觉元素形成对比的声音如何传达新的含义？

声音本身可能非常复杂，以至于在感知到任何视觉之前，它们会建立整个情绪或设计信息。就像彩色背景建立一种情绪一样，声音可以放在背景中，或者在UI中提供反馈，例如响应移动设备上的按钮。该技术的原理是基本的，但它可以采用的创造力是魔法可以发生的地方。

由于其在集体的创造性工作中的重要性，为古根海姆德国艺术家组织ZERO展览创建的网站使用声音作为大气背景，并且作为导航网站时的反馈形式。大胆的铃声建立代表主题开头的部分，而第三级项目则在后台点击。

12.png

位于古根海姆的艺术家团体ZERO的网站，其中声音起着重要作用

可视层次结构的概念

视觉层次结构是一个简单的概念，理解理论实际上比设计者执行结构良好的组合的实际能力更容易。然而，在保持良好设计的同时在新介质中具有创造性是具有挑战性的。

新媒体一直出现，挑战性的情况不会减弱 – 恰恰相反。如今，有超过200种不同的屏幕尺寸在使用中。那只是二维的。首先，它是互联网，桌面浏览器，然后是移动设备和平板电脑，现在我们正在通过互动电视，物联网，可穿戴设备，虚拟和增强现实等技术进入新的领域。

真正推动数字媒体界限的设计仍处于起步阶段。希望视觉层次和良好设计的原则能够跟上技术的快速发展，使我们的数字媒体体验仍然充满意义和乐趣。

原文：Toplal
翻译：云端设计

文章来源：云端网

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

微信图片_20210513163802.png

 

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

 

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

 

评论(0) 浏览(3770)

手把手教你利用js给图片打马赛克

前端达人

文章目录

效果演示

在这里插入图片描述

Canvas简介

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）

不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性

本手册提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等

标记和 SVG 以及 VML 之间的差异：

标记和 SVG 以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。

要从同一图形的一个 标记中移除元素，往往需要擦掉绘图重新绘制它。
在这里插入图片描述

知识点简介

  • 利用js创建图片 
let img = new Image() //可以给图片一个链接 img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg' //或者本地已有图片的路径 //img.src = './download.jpg' //添加到HTML中 document.body.appendChild(img)  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    •
  • canvas.getContext(“2d”)

语法：
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API 

let ctx = Canvas.getContext(contextID)  

    

    
  • 
        1
    
    •
  • ctx.drawImage()

JavaScript 语法 1：
在画布上定位图像： 

context.drawImage(img,x,y);  

    

    
  • 
        1
    
    •

JavaScript 语法 2：
在画布上定位图像，并规定图像的宽度和高度： 

context.drawImage(img,x,y,width,height);  

    

    
  • 
        1
    
    •

JavaScript 语法 3：
剪切图像，并在画布上定位被剪切的部分： 

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);  

    

    
  • 
        1
    
    •
  • ctx.getImageData()

JavaScript 语法
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中 

var imgData=context.getImageData(x,y,width,height);  

    

    
  • 
        1
    
    •
  • ctx.putImageData()

putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

接下来跟着我一步一步做完这个小功能叭~
在这里插入图片描述

step-by-step

准备好我们的图片，并添加上我们的方法 

<body> <img src="./download.jpg"> <button onclick="addCanvas()">生成Canvas</button> <button onclick="generateImg()">生成图片</button> </body>  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

在这里插入图片描述
接下来写addCanvas方法 

function addCanvas() { let bt = document.querySelector('button') let img = new Image(); //1.准备赋值复制一份图片 img.src = './download.jpg'; img.onload = function() { //2.待图片加载完成 let width = this.width let height = this.height let canvas = document.createElement('canvas') //3.创建画布 let ctx = canvas.getContext("2d"); //4.获得该画布的内容 canvas.setAttribute('width', width) //5.为了统一，设置画布的宽高为图片的宽高 canvas.setAttribute('height', height) ctx.drawImage(this, 0, 0, width, height); //5.在画布上绘制该图片 document.body.insertBefore(canvas, bt) //5.把canvas插入到按钮前面 } }  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    •

成功在画布上得到图片：
在这里插入图片描述

嗯，我们已经成功走出了成功的一小步，接下来是干什么呢？…嗯，我们需要利用原生的onmouseup和onmousedown事件，代表我们按下鼠标这个过程，那么这两个事件添加到哪呢？

没错，既然我们要在canvas上进行马赛克操作，那我们必然要给canvas元素添加这两个事件

考虑到我们创建canvas的过程复杂了一点，我们做一个模块封装吧！ 

function addCanvas() { let bt = document.querySelector('button') let img = new Image(); img.src = './download.jpg'; //这里放自己的图片 img.onload = function() { let width = this.width let height = this.height let { canvas, ctx } = createCanvasAndCtx(width, height) //对象解构接收canvas和ctx ctx.drawImage(this, 0, 0, width, height); document.body.insertBefore(canvas, bt) } } function createCanvasAndCtx(width, height) { let canvas = document.createElement('canvas') canvas.setAttribute('width', width) canvas.setAttribute('height', height) canvas.setAttribute('onmouseout', 'end()') //修补鼠标不在canvas上离开的补丁 canvas.setAttribute('onmousedown', 'start()') //添加鼠标按下 canvas.setAttribute('onmouseup', 'end()') //添加鼠标弹起 let ctx = canvas.getContext("2d"); return { canvas, ctx } } function start() { let canvas = document.querySelector('canvas') canvas.onmousemove = () => { console.log('你按下了并移动了鼠标') } } function end() { let canvas = document.querySelector('canvas') canvas.onmousemove = null }  

    

    
  • 
        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
    
    •

测试一下我们的start()和end()是否生效了
在这里插入图片描述
嗯，目前来看，我们的代码依然如我们所愿的正常工作

接下来的挑战更加严峻，我们需要去获取像素和处理像素，让我们再重写start()函数 

 function start() { let img = document.querySelector('img') let canvas = document.querySelector('canvas') let ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); canvas.onmousemove = (e) => { let w = imgData.width; //1.获取图片宽高 let h = imgData.height; //马赛克的程度，数字越大越模糊 let num = 10; //获取鼠标当前所在的像素RGBA let color = getXY(imgData, e.offsetX, e.offsetY); for (let k = 0; k < num; k++) { for (let l = 0; l < num; l++) { //设置imgData上坐标为(e.offsetX + l, e.offsetY + k)的的颜色 setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //更新canvas数据 ctx.putImageData(imgData, 0, 0); } } //这里为你提供了setXY和getXY两个函数，如果你有兴趣，可以去研究获取的原理 function setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } function getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = obj.data[4 * (y * w + x)]; color[1] = obj.data[4 * (y * w + x) + 1]; color[2] = obj.data[4 * (y * w + x) + 2]; color[3] = obj.data[4 * (y * w + x) + 3]; return color; }  

    

    
  • 
        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
    
    •

嗯，我们离成功不远拉，最后一步就是生成图片

好在canavs给我们提供了直接的方法，可以直接将画布导出为Base64编码的图片： 

function generateImg() { let canvas = document.querySelector('canvas') var newImg = new Image(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(newImg, canvas) }  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

最终效果：
在这里插入图片描述

是不是无比轻松呢~，来看看你手写的代码是否和下面一样叭：

完整代码 

<!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> </head> <body> <body> <img src="./download.jpg"> <button onclick="addCanvas()">生成Canvas</button> <button onclick="generateImg()">生成图片</button> </body> <script> function addCanvas() { let bt = document.querySelector('button') let img = new Image(); img.src = './download.jpg'; //这里放自己的图片 img.onload = function() { let width = this.width let height = this.height let { canvas, ctx } = createCanvasAndCtx(width, height) ctx.drawImage(this, 0, 0, width, height); document.body.insertBefore(canvas, bt) } } function createCanvasAndCtx(width, height) { let canvas = document.createElement('canvas') canvas.setAttribute('width', width) canvas.setAttribute('height', height) canvas.setAttribute('onmouseout', 'end()') canvas.setAttribute('onmousedown', 'start()') canvas.setAttribute('onmouseup', 'end()') let ctx = canvas.getContext("2d"); return { canvas, ctx } } function start() { let img = document.querySelector('img') let canvas = document.querySelector('canvas') let ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight); canvas.onmousemove = (e) => { let w = imgData.width; //1.获取图片宽高 let h = imgData.height; //马赛克的程度，数字越大越模糊 let num = 10; //获取鼠标当前所在的像素RGBA let color = getXY(imgData, e.offsetX, e.offsetY); for (let k = 0; k < num; k++) { for (let l = 0; l < num; l++) { //设置imgData上坐标为(e.offsetX + l, e.offsetY + k)的的颜色 setXY(imgData, e.offsetX + l, e.offsetY + k, color); } } //更新canvas数据 ctx.putImageData(imgData, 0, 0); } } function generateImg() { let canvas = document.querySelector('canvas') var newImg = new Image(); newImg.src = canvas.toDataURL("image/png"); document.body.insertBefore(newImg, canvas) } function setXY(obj, x, y, color) { var w = obj.width; var h = obj.height; var d = obj.data; obj.data[4 * (y * w + x)] = color[0]; obj.data[4 * (y * w + x) + 1] = color[1]; obj.data[4 * (y * w + x) + 2] = color[2]; obj.data[4 * (y * w + x) + 3] = color[3]; } function getXY(obj, x, y) { var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = obj.data[4 * (y * w + x)]; color[1] = obj.data[4 * (y * w + x) + 1]; color[2] = obj.data[4 * (y * w + x) + 2]; color[3] = obj.data[4 * (y * w + x) + 3]; return color; } function end() { let canvas = document.querySelector('canvas') canvas.onmousemove = null } </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
    
    • 

    
  • 
        105
    
    • 

    
  • 
        106
    
    • 

    
  • 
        107
    
    • 

    
  • 
        108
    
    • 

    
  • 
        109
    
    • 

    
  • 
        110
    
    • 

    
  • 
        111
    
    • 

    
  • 
        112
    
    • 

    
  • 
        113
    
    • 

    
  • 
        114
    
    • 

    
  • 
        115
    
    • 

    
  • 
        116
    
    •

当然，你可以做更多创作，比如上面打的马赛克是正方形的，你可以利用你的数学知识让其变为圆形，以圆心为鼠标中心扩散

你也可以选择完善一些过程，例如马赛克位置打错了，可以选择将画布清空然后重新开始~
或者做一些善后处理，导出图片后隐藏canvas画布
点个赞吧

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

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


文章来源：csdn   作者： VGtime

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

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


评论(0) 浏览(2431)

设计师必修课：如何最大限度满足顾客设计需求？

seo达人

 

 

这个问题不仅局限于日常的工作需求中，我认为这是一种很有趣的思维方式，我们可以运用这个思维模型，帮你Get“如何成为需求方眼里更受欢迎的设计师”、“如何做好晋级答辩”等问题。

要讲清楚这个问题，首先，我们要回顾一下用户体验的相关概念。

01、什么是以用户为中心的设计

用户体验这个词最早被广泛认知是在上世纪90年代中期，由用户体验设计师唐纳德·诺曼（Donald Norman）所提出和推广的。

用户体验，即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。

UCD即user-centered design译为“以用户为中心的设计”。UCD 的核心思想非常简单：在开发产品的每一个环节，都把用户列入思考范围。通常会关注以下要素：可用性，用户特征，使用场景，用户任务和用户流程。

02、常规的UCD流程

1、确定场景：产品的主要用户是谁，驱动用户使用产品的动力是什么，用户有什么诉求以及用户在什么情况下使用产品；

2、确定需求：明确场景后，就可以确定详细的产品需求；

3、构建设计方案和开发：根据产品目标和用户需求，开始产品设计和开发的迭代过程；

4、评估产品：获得用户反馈是至关重要的一步，是产品迭代优化的主要驱动。

重复上述过程以进一步打磨产品

03、万能钥匙：用户>需求>方案>反馈

基于以上两个概念，我将UCD思维模型简化为：用户>需求>方案>反馈，这也是今天我要探讨的主题，下面，我会通过几个案例，来解释如何运用这个思维模式到我们的工作中。

04、实例与运用

· 场景一：做一名受需求方欢迎的设计师

产品经理：“设计图多久能看啊？这个需求时间我们着急上线，能快速出来看一版吗？”

设计师：“设计也是需要花时间的，那么短时间内完不成啊”

产品经理：“这个设计图设计的有问题啊，这里应该这么改XXX”

设计师：“那样改太丑了”

这个场景经常在我们身边发生，如果你也遇到过这样的情况，我们可以换一个视角想一想：设计师和产品经理是上下游的协同方，要共同去完成一个既定的任务。此时，设计师面对的其实有2类用户：对接的产品经理和该需求的实际用户，大多数设计师都会有意识考虑后者，所以，今天我来谈谈前者。

按照用户>需求>方案>反馈的思维模式，我们把对接过程拆分如下：

1、用户：设计师对接的产品经理PM。

2、需求：PM希望设计师能清晰的理解他的诉求，在技术资源有限且允许的周期内产出设计图，这样，他才能推进到下一个环节以保证上线。

3、方案：PM的诉求是产出和效率，也就是设计师需要高效高质量的完成需求，再次拆分一下。

如何产出高质量设计图呢？需要我们理解产品目标，用户需求进行分析、场景理解等，最后才是执行环节。执行就考验手活了，这里不多赘述。

如何提升效率？减少信息不对称、积极主动沟通是提升效率的关键，在产品目标及用户理解>场景分析>方案执行等环节都需要及时和产品积极沟通，达成共识。

4、反馈：定期找对接的需求方复盘协作问题，要有开放的心态，勇于面对双方的吐槽，做到有问题及时响应及时解决。除此之外，我也建议设计师要争取更多的机会贴近业务，了解各阶段业务的问题和痛点，真正做到帮助产品实现业务目标。

所以当我们把产品经理当做我们的用户，我们的协同流程理解为闭环的用户体验时，很多问题就迎刃而解了。

· 场景二：如何顺利通过晋级？

“我该讲点啥？”
“我做的项目都很散、碎，不知道怎么整合在一起”
“我的能力怎么才能展现给评委”
这是很多设计师面对晋级的困惑。

虽然不能在一篇文章里面一一解答清楚这些问题，但是我们仍然能将晋级过程思考成闭环的用户体验。接下来，我们继续拆解吧。

1、用户：评委 ，这里也可以做用户分层，包含：跨职能的评委，和设计团队的专业线评委。

2、需求：评委要在10-15分钟内，判断你能否达到目标职级的要求。

3、方案：帮助评委认可我真的达到目标职级的要求。大多数评委对答辩人其实都不太了解，我们应该站在不了解自己的角度去讲述。

所以需要我们：摆业绩、讲能力，把评委关心的事情（符合度）呈现出来，给他判断依据和线索。当然所有的讲述素材都是日常工作中，点点滴滴积累和沉淀的。

4、反馈：结合评委、直属leader的反馈，思考述职的表现。

05、总结

一流设计网（yiliusheji.com）提示以用户为中心、做好用户体验是一个很好的思维方式，今天我只是列举了两个常见的例子，我认为还能延伸到工作、生活中的方方面面。

比如做一个项目汇报，当我们面对的汇报对象不同时，我们讲述的内容和方式都要根据汇报对象，也就是用户需求进行设计。

同理，现在大家都在讲产业升级，深入线上线下体验，这其中的每一个环节触点，我们所面对的用户、场景也是多样化的，需要我们用颗粒度更细的视角去思考。

文章来源：搜狐网

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

微信图片_20210513163802.png

 

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

 

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

 

评论(0) 浏览(2133)

Slick.js使用方法——幻灯片

前端达人

  
和Swiper.js一样

简介

slick 是一个基于 jQuery 的响应触摸式幻灯片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特点：

  • 支持响应式
  • 浏览器支持 CSS3 时，则使用 CSS3 过度/动画
  • 支持移动设备滑动
  • 支持桌面浏览器鼠标拖动
  • 支持循环
  • 支持左右控制
  • 支持动态添加、删除、过滤
  • 支持自动播放、圆点、箭头、回调等等

兼容

浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。

jQuery兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件 

  
    

        <link rel="stylesheet" href="style/slick.css">
    


    

        <script src="script/jquery.min.js"></script>
    


    

        <script src="script/slick.min.js"></script>

注意：需jQuery 1.7

2、HTML 

  
    

        <div class="slick">
    


    

            <div><a href="http://www.dowebok.com"><img src="images/1.jpg" alt=""></a></div>
    


    

            <div><a href="http://www.dowebok.com"><img src="images/2.jpg" alt=""></a></div>
    


    

            <div><a href="http://www.dowebok.com"><img src="images/4.jpg" alt=""></a></div>
    


    

            <div><a href="http://www.dowebok.com"><img src="images/3.jpg" alt=""></a></div>
    

    <div><a href="http://www.dowebok.com"><img src="images/5.jpg" alt=""></a></div>
    

        </div>

3、JavaScript 

  
    

        $(function(){
    


    

            $('.slick').slick({
    


    

                dots: true
    


    

        });
    


    

        });

参数

参数 类型 默认值 说明
accessibility 布尔值 true 启用Tab键和箭头键导航
autoplay 布尔值 false 自动播放
autoplaySpeed 整数 3000 自动播放间隔
centerMode 布尔值 false 中心模式
centerPadding 字符串 ’50px’ 中心模式左右内边距
cssEase 字符串 ‘ease’ CSS3 动画
customPaging function n/a 自定义分页
dots 布尔值 false 指示点
draggable 布尔值 true 启用桌面拖动
easing 字符串 ‘linear’ animate() fallback easing
fade 布尔值 false 淡入淡出
arrows 布尔值 true 左右箭头
infinite 布尔值 true 循环播放
lazyLoad 字符串 ‘ondemand’ 延迟加载，可选 ondemand 和 progressive
onBeforeChange(this, index) method null 开始切换前的回调函数
onAfterChange(this, index) method null 切换后的回调函数
onInit(this) method null 第一次初始化后的回调函数
onReInit(this) method null 再次初始化后的回调函数
pauseOnHover 布尔值 true 鼠标悬停暂停自动播放
responsive object null 断点触发设置
slide 字符串 ‘div’ 滑动元素查询
slidesToShow 整数 1 幻灯片每屏显示个数
slidesToScroll 整数 1 幻灯片每次滑动个数
speed 整数 300 滑动时间
swipe 布尔值 true 移动设备滑动事件
touchMove 布尔值 true 触摸滑动
touchThreshold 整数 5 滑动切换阈值，即滑动多少像素后切换
useCSS 布尔值 true 使用 CSS3 过度
vertical 布尔值 false 垂直方向

方法

方法 Argument 说明
slick() options : object 初始化 slick
unslick()   销毁 slick
slickNext()   切换下一张
slickPrev()   切换上一张
slickPause()   暂停自动播放
slickPlay()   开始自动播放
slickGoTo() index : int 切换到第 x 张
slickCurrentSlide()   返回当前幻灯片索引
slickAdd() element : html or DOM object, index: int, addBefore: bool Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String
slideRemove() index: int, removeBefore: bool Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter() filter : selector or function Filters slides using jQuery .filter syntax
slickUnfilter()   Removes applied filter
slickSetOption(option,value,refresh) option : string(option name), value : depends on option, refresh : 布尔值 Sets an option live. Set refresh to true if it is an option that changes the display

演 示 下 载



GitHub：https://github.com/kenwheeler/slick


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

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


文章来源：csdn   作者：cc蒲公英

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

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

评论(0) 浏览(2794)

设计师的数据分析与场景化设计

资深UI设计者

       随着互联网的发展，近这几年设计圈子里大家都在讨论UGD（User Growth Design），要向UGD转型等等，以用户为中心，以增长为导向，这个概念本身并没有问题，而且是对UED的一种非常棒的进化和升级，要求设计团队需要具备更综合的专业能力与视野。本着对团队的升级优化，我也以UGD的思路对团队有了新的更高的要求，然而在这个过程中却发现在很多问题。

       

       随着各种社交平台的传播普及，什么闭环、串联、颗粒度等等这些互联网黑语，满大街飞来飞去，设计师们的PPT、汇报资料是越来越丰富多彩，但项目效果却并不明显。数据、增长的概念确实是铺开了，但却成了PPT里的装饰，并没有真正落地生根。


       经过很长时间的摸索，我们终于有了一套适合团队自己的UGD思路，也一步一步的在不断的优化提升，下面以我们做过的一个项目（用户投资路径优化）为例来说说我们对UGD的思考，以及设计师对数据分析以及场景化设计的思路。


1. U user

       以用户为中心，就是关注用户的行为，串联数据，从点线面结合场景分析，提出问题所在。

 

       作为设计师，最常关注的用户数据就是转化率、点击率、停留时长、跳转路径等等，从单一数据来看，都是一些常见的简单的数据，但要真正能够分析用户，还需要结合实际场景来分析。


案例：

       我们在分析交易线的数据时发现了一些问题，并对数据做了对比分析。



[ 项目列表页 ] 

用户的点击主要集中在前十个投资项目，占据整个页面点击的80%。



[ 项目详情页 ] 

用户通过列表页进入到详情页，详情页的浏览率较高，但转化却很低，另外优惠券的点击率十分高，超过85%，意味着进入到详情页的用户，基本上都进入过优惠券页面，而最终促成成交却很低。


       以上是整个交易环节最初始的两个页面，也是最核心的页面，从单个页面的数据（点）来看都属于正常漏斗数据表现，接下来我们从用户路径（线）的角度来继续分析。

       


       我们从用户当中，抽取了部分最终完成了交易的用户，对整个交易路径的进行分析，结果发现用户在列表页——详情页——优惠券这三个步骤之间反复切换。

 

       不难看出，用户在列表页、详情页、优惠券选择页来回切换，即使最终产生交易，但整个路径耗时长，反复操作，跳转不合理，导致大量流失，这是目前数据所呈现出来的情况，也是问题的核心所在。


2. G growth

       以增长为导向，以数据为依据发现或提出问题所在，确定最终需要增长（优化）的数据指标，并以此为目标展开思考，提出解决思路。

案例：

这是最典型的购物交易场景，通过上面的分析，我们再结合场景化的思路进一步整理思考用户的操作行为目的。

以投资理财的角度，换位思考，其实就是：想投资——挑选——看看优惠——挑挑其他的——再看看优惠——再看看其他的——还看优惠。


       用户为何反复的从列表页进入详情，又跳转回列表页再进入详情页？这就是突破口了，想清楚这一点，解决思路也就清晰了。

我们举一个现实生活中的购物场景来帮助思考分析（灵感来源于生活）。

购物路径1：想买东西-找到对应的货架-使用优惠券并买单；


购物路径2：有优惠券-到超市看看有没有想买的-使用优惠券并买单；



       在现实生活中，除了”有想买的东西”这一主观需求外，对交易产生一定决策作用的，就是优惠。

结合前面对投资用户路径的分析来看，用户交易路径如此反复，实际上就是在同样的资金投入的前提下，对比不同的项目、不同的优惠，如何搭配才能利益最大化，这就是用户的最核心需求。


       如何帮助用户快速完成相关数据的对比，缩短操作路径，降低交易耗时，从而减少流失提升成交率，这就是解决思路，也是我们需要增长（优化）的数据指标。


       基于场景化的分析明确用户的核心需求，确定需要增长（优化）的数据指标，我们提出来了两个解决方向。



[ A方案——详情页的快速切换（优化） ]

       ，在原有的路径上，保持用户的操作习惯，新增详情页左右滑动切换的功能，用户学习成本低，开发成本低，可快速上线，但对于路径优化、数据对比不够直接，治标不治本；



[ B方案—— 设计新的快速路径（创新）]

       结合前面分析的两种现实生活中的购物场景，在原有的路径上，针对平台老客对平台项目的规则详情已经清楚了解的特点，设置多一条快速通道，减少干扰，对比直接，加快老客的决策速度，但用户学习成本高，开发成本高，虽然治本但风险也大。



3. D design

       到此为止，我们就可以进入具体的解决方案的尝试了，设计师的方案，自然就是设计稿了。


案例：

       A方案直接开发上线即可，上线后就可以收集数据进行分析了，经过两周的时间，从数据表现来看，交易总时长稍有所下降但并不明显，约下降了2%，而交易率基本持平。


[ B方案最终UI稿 ]

       在此期间B方案完成设计开发后，协调产品运营推广等业务方，选择确定部分渠道进行ABtest，经过一个多月，持续收集数据反馈优化方案，多轮ABtest后，从数据反馈来看，B方案数据提升明显，有效的降低了用户的决策时长（降低了近20%） ，提升交易成功率（老客转化提升1%），说明方案的可行性强，随即全量更新。


       从随后的数据表现来看（总转化提升0.3%，总时长降低15%），整体方案对平台的整体效益产生了积极推动作用，说证明了设计团队对于产品与企业的价值（我们不是美工）。

       在后续工作过程中，持续根据数据表现，分析，发现并提出问题，提出解决方案，测试验证，不断的循环重复，持续提升用户体验，以数据为依据，以增长（优化）为目标，这就是我们对于UGD的一些思考跟尝试。


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

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



文章来源：站酷   作者：包大佬

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

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



评论(0) 浏览(1618)

按钮的最佳尺寸到底是多少？

资深UI设计者

很多设计师包括我在内对按钮尺寸有着颇多困惑。为什么很多产品甚至苹果本身并没有遵循 44pt 的标准规范？为什么有些场景下的 CTA 按钮那么小？按钮的最佳尺寸到底是多少？按钮规范背后到底是什么样的科学依据？这些依据可否量化？

emmmm，如果你和我一样有着这些困惑，本篇文章应该可以给你很多启发。

按钮尺寸对点击行为的影响

按钮的尺寸具体影响到的依旧是视觉和交互的两种能力。

视觉能力上很好理解。当一个元素尺寸越大，人眼就越容易抓捕到这个元素。所以那些越重要的东西，往往会给予更大的尺寸来强制用户注意到它，这也可以解释为什么甲方总喜欢不停地在背后指指点点嫌弃元素太小，就是因为这些元素对他们来说非常重要，只是他们没有我们那么专业，知道强调一个东西的手法不仅仅是放大一种策略。

因此，相对较大的按钮尺寸从视觉上，可以迅速捕获用户的注意力，对点击行为是有益的。

而在交互能力上，涉及到的依然是前篇提到的菲茨定律——目标尺寸越大，移动至目标所花费的时间就越短。所以，较大的按钮尺寸可以降低用户交互的交互成本，使得目标更加”易点“，对点击行为同样是有益的。

但是，按钮尺寸并非越大越好，一方面是避免视觉上的失衡，另一方面也会受到界面空间限制、以及场景差异等因素的影响。

规范中的定义

我们先来看下 iOS 的。苹果规定的最小点击区域是 44pt，这意味着一旦点击区域低于 44pt，将可能会出现点击失准的情况。当然，一些控件（标签栏图标、文字链）可以在视觉表现上只有 24pt*24pt，但是会在周围加入额外的填充使其达到 44pt。

但是，在实际的 iOS 原生产品界面中，很多按钮并未严格执行 44pt 这个数值。小于 44pt 的按钮比比皆是，比如信息页的发送、App Store 的获取、购买浮层的确认、添加 siri、导航类右上角的工具型按钮，它们的点击区域为按钮本身，但是均未达到 44pt。况且其中有一些还是非常典型的 CTA 按钮，比如 App Store 产品详情页中的获取按钮，它的高度仅仅是 27pt。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

而 Android 中的按钮建议尺寸是 56dp，但是和 iOS 一样存在着大量低于这个尺寸的情况。其中不乏那些 CTA 按钮。

学会CTA 设计方法后，按钮的点击率高了49%！

在绝大多数人的眼里，交互设计师的职责是对产品用户体验负责，毋庸置疑这肯定是正确的。但交互设计师并不是一个独立的个体，我们既服务于用户又服务于团队，服务于产品的商业价值，提升转化率也是交互设计中不得不考虑的重要一环。

阅读文章 >>

按钮的最佳尺寸到底是多少？这篇给你权威答案！

这些情况的发生其实也很好理解，每个按钮所对应的用户场景、业务诉求不同，因此并不能一招鲜用一个尺寸吃遍所有场景。但是，有没有一些科学的依据来可量化地解释按钮尺寸对点击的影响？

从 Apple Music 说起

著名产品设计师斯科特·赫尔夫就曾在他的文章《Using science to make truly tappable user interfaces》中提过，iOS9 的 Apple Music 在锁屏界面下的按钮过小，经常会发生无法准确点击的情况，他需要集中精力精确得点击才能完成任务。

不过苹果在 iOS10 之后，锁屏界面下的三个按钮、乃至进度、音量的控制球全部被显著地增大。这使得歌曲点击操作的错误率明显下降，不论是在什么场景下（你懂得，跑步、挤地铁这些不可控的场景下总是会有听歌的需求）都可以轻松地点击。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

而他为了解释按钮尺寸所带来的变化，引入了历史上著名的两个实验。

第一次实验

2006 年，芬兰 Oulu 大学，Maryland 大学和 Parck 学院的研究人员组成一个研究小组。他们的研究目标是，确定在触摸屏幕上单手使用最容易的按钮尺寸。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

他们进行了两组不同场景的实验。第一组让受试者执行一次性的任务，点击一个 CTA 按钮、复选框或者多选框；第二组让受试者执行多次连续的任务，比如输入电话号码。并且在实验期间，研究人员测试了每一种场景下按钮的尺寸。最终的实验结果表明，单个任务下，按钮尺寸小于 9.2mm 后错误率显著增加，而多次连续任务下，按钮尺寸小于 9.6mm 后的错误率显著增加。

特别的是，对于多次连续任务，9.6mm 到 11.5mm 之间的错误率基本不变。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

看到这，来稍微总结一下，9.2mm 和 9.6mm 是两个关键的尺寸节点。在单次任务和多次连续任务下，按钮尺寸分别小于 9.2mm 和 9.6mm 会导致错误率的攀升。这个结果和 MIT Touch Lab 研究得出的最佳热区尺寸 10mm 很接近。

第二次实验

当然，这还不算完。5 年后，德国两所大学的研究人员又进行了一项类似的研究，目的是确定触摸屏幕按钮的最佳大小。

他们的实验方法相对就很潮了。他们专门开发了一款安卓游戏，游戏玩法也很无脑：玩家必须要精准地点击到屏幕中任何地方飘动的任意尺寸的圆圈，游戏才能继续。并且速度越快，得分也就越高。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

这款游戏在上线之后被下载了 10w 次，并且悄咪咪得暗中记录了用户所有的点击行为，记录总量约为 1.2 亿次。

最后根据统计分析，得出了错误率和圆圈尺寸的图表关系。你可以看到，和 5 年前的实验同样，呈现类似的指数关系。研究人员根据图表发现：

在圆圈尺寸小于 12mm 后，错误率开始逐步提升。在尺寸小于 8mm 之后，错误率高达 40%以上。并且研究还发现，在圆圈尺寸超过 12mm 之后，玩家的正确率并没有得到显著的提升。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

结论

由上述的两个实验，我们可以概括出一些有用的结论。

  • 根据各自的实验，在目标尺寸分别小于 9.2mm、9.6mm 或者 12mm 后，均会导致错误率的攀升；
  • 当目标尺寸增加到一定程度之后，正确率基本保持不变。

那么，按钮的最佳尺寸到底是多少呢？

斯科特将实验得出的关键尺寸与苹果、谷歌和微软三大规范进行结合，发现了一些有意思的现象——

  • iOS 的 44pt 对应到实际尺寸为 6.9mm，约 7mm；
  • Android 的 56pt 对应到实际尺寸为 8.8mm，约 9mm；
  • 而微软的 9mm+两边 2mm 的热区，对应的实际尺寸为 13mm。

可以看到 Android 和微软的尺寸，基本对应到了这两项实验得出的关键尺寸。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

最后，再来看下开头 iTunes 的锁屏界面的按钮。可以看到从 iOS9 到 iOS10，苹果将按钮可点范围由 7mm（44pt）扩大至 12mm（82pt），结果也正好符合了微软的规范。看到这里，你肯定更困惑了——按钮的最佳尺寸到底是多少？

其实，并不存在什么按钮的最佳尺寸。

不论是 iOS 的 44pt，Android 的 56dp，还是微软的 82pt，都需要具体情况具体分析。界面布局、用户场景、业务诉求等等，都属于按钮尺寸的影响因素。

比如下面这些 iOS 端产品的 CTA 按钮，它们的尺寸最小到 26pt，最大到 87pt，而且每个产品内部的 CTA 按钮也存在差异。你能说出这些按钮哪一个是最佳尺寸吗?

按钮的最佳尺寸到底是多少？这篇给你权威答案！

当然，我们起码可以去界定一些相对可控的范围。

这里我简单根据斯科特文章中的结论，结合市面主流产品的情况划分出按钮的几类尺寸：

1. 常规场景、局部模块

比如 App Store 的产品详情页的获取，知乎中个人主页的关注，都属于当前页的局部模块，点击之后通常是状态的变化或者出现新的弹层。这些按钮的尺寸我建议控制在 28pt~40pt 之间。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

2. 常规场景、全局模块、强业务属性

比如微信个人页的添加好友、各大电商商品详情页的加购、登录注册页的登录注册等等。这些页面的 CTA 按钮隶属于页面全局，所以可以给它极高的权重、甚至全局吸底展示（如详情页），以更快地促进点击。通常，这类按钮在常规场景下具备了最大尺寸。我个人的建议是保持在 40pt~60pt 之间。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

3. 不可控场景

不可控场景的意思就是，用户点击按钮时所处的场景可能比较特殊，并且这种特殊的场景很可能给用户带来一系列无法掌控的风险。

比如 keep 在跑步场景下的按钮，就需要充分考虑到跑步时不稳定的状态，如果按钮和常规场景一样，那很容易发生无法准确点击的情况，增加意外事故发生的概率；包括来电场景、地图导航场景、快递取件场景等等，都属于不可控的场景。各位可以自己代入脑补一下，这些场景中无法准确点击时容易产生什么样的后果。

所以这些场景中的按钮就得够大，以尽可能覆盖到那些极端的不可控情况。我个人的建议保持在 60pt~90pt 之间。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

当然，这仅仅是很粗略的参考区间值，如何结合现有业务诉求、用户场景需求等因素去合理地界定才是重中之重。如果为了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。

其实从知乎去年 10 周年的大改版可以看到一些有意思的细节。很多按钮的高度比以往更高了。比如盐选会员的续费按钮，由之前的 36pt 提升到了 40pt。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

个人主页的关注按钮也由 28pt 提升到了 32pt，你仔细看的话，按钮的宽度也发生了变化，从之前的 90pt 提升到了 100pt。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

邀请回答界面中的写回答按钮，也由原本的文字链，提升到了实心按钮，高度则直接复用了关注按钮的尺寸——32pt。哦，不好意思，这应该是按钮设计形式上的改变。

按钮的最佳尺寸到底是多少？这篇给你权威答案！

总之一句话，知乎这次的改版，CTA 按钮的尺寸更大了。我们从尺寸对点击行为的影响可以推导出，这次改版背后更为明确的业务目标——促进UGC内容生产、促进关系链沉淀（一旦沉淀了复杂的关系链，用户也就更难以离开平台）以及会员付费转化。



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

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



文章来源：优设   作者：转行人的设计笔记

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

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




评论(0) 浏览(3048)

如何快速理解客户设计需求？

seo达人

11.jpeg

作为一个设计者，我们再给客户做设计方案的时候，大家会发现客户的需求点，很难去理解。并不是设计的技术水平问题，而是再理解客户的需求点上出现了问题。就算你设计的东西在同行看来已经很好了。但是客户往往不是很满意。客户再要求我们做设计的时候，其实心里已经有了大概的想法，只是自己无法通过设计去实现而已。我们要做的是用自己的专业知识全区完成客户的想法，已达到客户满意的效果。那么我们如何快速理解客户的设计需求呢？

22.jpeg

第一：设计的能力加强提升，拥有过硬的技术：

客户的需求形形色色，运用到的技能要全面，这是最为基础的点。如果连技术都不过关，就算理解了，也做不到。因此作为一个设计者，我自身就要拥有过硬的技能。而不是滥竽充数，忽悠客户，以低标准去做设计。

第二：换位思考，从客户的角度去想问题：

换位思考就是要从客户的角度去思考。只有从客户的角度看问题，我们才能更好去理解客户的需求。多做假设性思考，如果我是客户，我要注意哪些问题。那些会对我有影响，那些会对我更有利。这样才能做出让客户满意的设计，在这竞争激烈的时代客户就是上帝。不能把握号每一个客户，对于我们来说是最大的损失。就算你不是老板，但是你不会老板想问题，你到哪都不受欢迎干不久，就算你技术再好，能力再强。

第三：用自己的专业角度给予意见。

客户他们站在他们的角度就思考，但是他们并不是专业的，有可能惠发生一些致命性的错误，但是他们不知道，也不觉得这是个问题。那么我们作为专业的工作者，我们也要给专业的意见或者是建议。例如，最新的广告法，规定那些用词是违规的、那些字体不用商用、设计那些颜色搭配是不利于展示的等等。

33.jpeg


 

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

微信图片_20210513163802.png

 

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

 

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

 

评论(0) 浏览(2504)

vue电商后台管理系统保姆级教程（八）——角色列表结构功能

前端达人

8、角色列表

8.1 通过路由展示角色列表组件

在power中新建一个roles.vue(角色列表）初始化基本结构：
在这里插入图片描述

在路由中加载导入：
在这里插入图片描述
在这里插入图片描述

8.2 绘制基本布局结构并获取列表数据

效果图：
在这里插入图片描述
面包屑导航：
在这里插入图片描述
卡片视图：
在这里插入图片描述
API：
在这里插入图片描述
渲染数据：
定义数据date：
在这里插入图片描述
生命周期函数：
在这里插入图片描述

8.3 渲染角色列表数据

先渲染索引列：
在这里插入图片描述
优化样式：
在这里插入图片描述

在索列之前加和 展开列：
在这里插入图片描述

8.4 说明角色列表需要完成的功能模块

现在还没有具体的样式，后面会写
角色信息的添加，删除功能前面做了，所以这里就不写了
点击对应按钮出现对应的弹出层，然后执行对应的操作。

8.5 分析角色下权限渲染的思路

在展开行中拿到渲染的数据
在请求数据列表中返回了数据children，通过作用域插槽来拿
在这里插入图片描述
实现效果：
在这里插入图片描述
拿到数据之后通过三层for循环渲染出对应的ui结构

8.6 通过第一层for循环渲染一级权限

先做一下栅格布局，区分出三个区域用来放三层for循环：

scope.row是当前对象的数据。 .children 是一级权限的数据， ：key每次循环绑定一个唯一的key值，通过插值表达式渲染出数据
在这里插入图片描述
放在el-tag标签中美化样式
在这里插入图片描述

8.7 美化一级权限

思路：
每行之间隔开距离，给每行放一个buttom的边框，第一行放一个top边框（这里使用三元表达判断） 加图标
在这里插入图片描述
每行都放buttom，利用三元表达式，如果i1===0.则bdtop否则空
在这里插入图片描述

8.8 通过二层for循环渲染二级权限

使用栅格布局分出2级权限和3级权限，，方法和之前的一样。
在这里插入图片描述
添加边框 线（上边框）第一个不添加，利用三元表达式判断：
在这里插入图片描述
动态绑定class类，然后判断
在这里插入图片描述
最终效果：
在这里插入图片描述

8.9 通过第三层for循环渲染三级权限

栅格布局：
注使用item2的children
在这里插入图片描述
通过作用域插槽拿到数据 children 拿到子组件数据，通过栅格分隔样式，动态绑定边框值。

8.10 美化角色权限下的UI结构

设置最小宽度：
设置body的最小宽度为1366px
在这里插入图片描述

角色列表设置居中：
定义一个类：哪里用到往哪里加
在这里插入图片描述
最后把代码插槽删了

8.11 点击删除权限按钮弹出确认提示框

使用element组件中的可移除标签属性：
在这里插入图片描述
closable属性：
在这里插入图片描述
绑定点击事件：
removeRightById：
在这里插入图片描述
定义事件：
在这里插入图片描述
然后弹框提示用户是否要删除，使用的还是element组件L

在这里插入图片描述
catch捕获错误：在这里插入图片描述
结果判断用户操作：
在这里插入图片描述
这里只是打印了结果，没有向后端发起请求。

8.12 完成删除角色下指定权限的功能

上一节点击了删除按钮后需要向后端发起删除的请求，删除用户在数据库中的权限：
API：
在这里插入图片描述
发起delect请求：
先把item3.id传进去：
在这里插入图片描述
在处理函数的形参中j接收一下：
在这里插入图片描述
然后再发起delect请求的时候用之前的参数字符串拼接
然后进行判断：
在这里插入图片描述
有个缺点：删除之后展开栏就被关闭了 解决办法：
在这里插入图片描述
把close权限赋值给一级标签二级标签
在这里插入图片描述



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

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


文章来源：csdn   作者：十九万里

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

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

评论(0) 浏览(2196)

Jquery选择器中使用变量实现动态选择例子

前端达人

这篇文章主要介绍了Jquery选择器中使用变量实现动态选择例子,这样做的好处我们可以动态选择一些元素,核心思想其实就是用字符串组合,需要的朋友可以参考下


例子一：

例子二：


<table>
  <tr>
    <th>用户名</th>
    <th>状态</th>
  <tr>
  <tr>
    <td>张三</td>
    <td data-uid="10000">正常</td>
  <tr>
  <tr>
    <td>李四</td>
    <td data-uid="10001">冻结</td>
  <tr>
  <tr>
    <td>王二麻子</td>
    <td data-uid=10002>冻结</td>
  <tr>
</table>
 
<script type="text/javascript">
$(document).ready(function(){
  var uid = 1001;
  $("td[data-uid = "+ uid +"]").html('正常');
}
</script>





<script type="text/javascript">
 $(function(){
  alert(123);
  var v=4;
  var test=$("input[type='radio'][value='"+v+"']");//直接拼接字符串就可以了
  console.info(test);
  var testValue=test.attr({"checked":true});
  console.info(testValue);
 });
 </script>
  
 <body>
  This is my JSP page. <br>
  <table>
 <tr>
 <td>性别：</td>
 <td>
  <input name="sex" type="radio" value="0"/>男 0
  <input name="sex" type="radio" value="1"/>女 1
  <input name="sex" type="radio" value="2"/>女 2
  <input name="sex" type="radio" value="3"/>女 3
  <input name="sex" type="radio" value="4"/>女 4
 </td>
 </tr>
  </table>
 </body>




例子三、jQuery中选择器参数使用变量应该注意的问题

这是原来的代码


var li_index = $(this).index();
 
var $content_index = li_index + 2;
 
var $content_progress = $(“div.content:eq(” + $content_index + “)”);
 
var $newavalue = $(this).find(“a”).attr(“name”);
 
var $resource = $(this).find(“a”).html().replace(“首页”,$newavalue);
 
var $afterresource = $resource.replace($newavalue,””);
 
var $afterresource = $newavalue + $afterresource.replace(“首页”,$newavalue);


实现的是关键词替换，不过到第三行时候不执行了，调试啊，替换啊，都不行。 从早上到刚才一直在各种群里面发问，终于 …… 俺们大本营 的Lomu大神一阵见血：

你的写法不对

要连接符

$(“div.content:nth-child($content_index)”);

$(“div.content:nth-child(” + $content_index + “)”);


关键是外面有引号

有引号被当字符串处理了

说真的现在感觉，有些基础的东西出错，光靠自己调试根本找不出问题所在。比如刚才那个 + 号，我看书就没见过。出现这种错误百度也不知道什么关键词。真不知道  选择器 里面用变量 还要用到+号，那个《锋利的jQuery 》也没有明确的说 选择器 里面用变量 还要用到+号，包括我们的w3cschool。





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

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


文章来源：脚本之家   作者：junjie  

分享此文一切功德，皆悉回向给文章原作者及众读者.

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

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



评论(0) 浏览(2494)

网站建设-如何建设一个优质的网站？

seo达人

 

网站建设-如何建设一个优质的网站？

1.jpeg网站建设

互联网时代的到来，作为一个企业你如果还没有属于自己的网站，那么你就真的“out”了，互联网的日流量达到上亿，这些不是简单的点击率，而是一笔真真正正的大钱。如果你还不会互联网，不了解互联网，那么这些都与你毫无关系。而网站建设是企业面向互联的主要窗口之一。也是大家公认渠道之一。

网站建设对于企业来说意义重大，它不仅是企业展示的窗口那么简单。互联网时代下，众多企业纷纷进行互联网转型，那是因为这些企业的领导者拥有者敏锐的嗅觉，具有洞察时代大趋势的能力。网站建设使他们首先要做的事情。那么如何建设一个优质的网站呢？

2.jpeg网站建设

第一：网站建设平台要有强大开发团队

网站建设是一门技术活，没有强大的技术作为支撑，就无法保障网站的安全性和功能的实现。开发团队的强大决定了网站质量与品质。拥有一稳定的后台，才能确保企业网站的一系列工作顺利进行。

第二：网站建设要有专业的设计团队

一个网站就好比一个门面，设计人员就是装修的师傅。门面不好看给客户的第一印象就是不专业，第一印象分就大打折扣，不能引起客户的重视。设计的不合理，就会影响到客户的体验度。一个没有体验度网站，很难留住客户，进行流量的转化。一切设计以客户的体验度为核心。

第三：网站建设要跟上时代的步伐

时代变，网站建设的功能和需求点也在变，只有去适应时代的打造需求，企业才能在竞争激烈的时代下生存。功能的更新换代也要跟上时代的步伐，才能满足客户的体验需求。客户才会为我们买单。

3.jpegSEO优化

第四：网站建设要有利于SEO优化

网站建设只是完成面建设，而我们建设网站的目的是为了，引来流量，转化流量，实现利润转化。一个没有不利于SEO优化的网站，就像埋藏再深山的金山，难以被发现，吸引不到客户。SEO的意义在于打通前往金山的通道。海、陆、空全方位立体打通，让客户络绎不绝前往。金山才得以被发现，被开发。

第五：网站坚持维护更新

这个时代不是大鱼吃小鱼的时代，而是快鱼吃慢鱼的时代。只有不断的去完善更新，才能适应生存。网站也一样，只有不断优化升级才能不被淘汰。

第六：网站建设要符合国家政策

要及时了解国家的相关法律法规以及一些相关的政策，例如最新的广告法，不能只用不符合要求的字眼。例如分销系统，不能越过法律底线。那些文字可以商业，哪些是有版权的等。

以上是一些个人的网站建设个人见解，如有更好的意见也欢迎大家一起探讨，相互学习。

 

 


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

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



文章来源：SEO

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


 

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

评论(0) 浏览(2048)

分类

日历

链接

个人资料

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

存档