首页

设计方向和优化方向寻找方法

雪涛

做设计、做交互、做产品前都离不开一个目的就是——拆解问题,达到XX预期,从而能提升自己的专业性,让方案更加具有说服力。那么,设计师应该如何找到符合自己的设计方向和优化方向呢?

为什么要去拆解问题?

案例:

  • 背景:某 APP 作为游戏类兴趣社交 APP,个人主页作为了解他人、建立社交关系的核心一环,目前信息丰富度和社交感偏弱,故需要进行优化;
  • 目标:页面改版核心以社交为驱动,丰富页面信息,提升用户建立社交概率。

如果不去拆解问题,你知道后续的该怎么做吗?

想要找到设计方向和优化方向的,收下这篇方法论!

设计拆解:想要找到设计方向和优化方向的,请你一定要看!

想要找到设计方向和优化方向的,收下这篇方法论!

我们知道了最直观的感受信息度和社交能力弱,但是这 2 点并不能作为优化目标和设计策略。

从该截图来看,满足了:

  • 个人属性:照片、语音、标签、星座、ID、性别等等;
  • 商业属性:下单、突出异性优势等等;
  • 社交属性:关注、提示关注、聊天、小游戏场景(右下角人物)、分享等等。

1. 信息是不是很满?

那么如果不去拆解问题,是不是就不知道如何补充信息了,那么也有社交感。用户在主动状态下:漂亮、萌妹、声优也就有社交了,那么用户在被动状态下是什么?

2. 是不是越想越乱,找不到方向了?

这就需要去拆解问题了,可以让你的思路更加清晰,保持在一条线上,形成大纲,可以挖掘更多的价值。

拆解问题的好处是什么?

还是同样的案例:

  • 背景:某 APP 作为游戏类兴趣社交 APP,个人主页作为了解他人、建立社交关系的核心一环,目前信息丰富度和社交感偏弱,故需要进行优化。
  • 目标:页面改版核心以社交为驱动,丰富页面信息,提升用户建立社交概率,那么我们开始拆解问题:(前提是背景已经确认好的情况下)。

想要找到设计方向和优化方向的,收下这篇方法论!

那么背景交代的是需要强化社交关系提升信息丰富度和社交感。经过再一轮的拆解,是不是能感觉到,自己思考的方向也多了?

想要找到设计方向和优化方向的,收下这篇方法论!

我拆解问题后,获得的好处有:

1. 思维的扩展性

举个例子:信息丰富度为什么会让我觉得缺少一点灵活性?信息的展示,会不会又分为外在和内在信息?那么什么是外在信息?与同平台上的大神之间建立的关系转化为信息?

2. 逻辑的严谨性

  • 有逻辑线索可依,从而更容易找到问题所在;
  • 方案和过程都可以假设,但是假设是必须要建立在真实的场景下。

3. 产出结果的可视化

可以根据拆解,将问题变得更加清晰,从而找准发力点。

如何去拆解问题?

前面铺垫了那么久,现在回归正题拆解问题主要分为 2 种(对应着初级和中级水平,可视情况任选一种):

1. 以问题树进行拆解,将问题细化到一个点

还是以这个案例:

  • 背景:某 APP 作为游戏类兴趣社交 APP,个人主页作为了解他人、建立社交关系的核心一环,目前信息丰富度和社交感偏弱,故需要进行优化。
  • 目标:页面改版核心以社交为驱动,丰富页面信息,提升用户建立社交概率。

想要找到设计方向和优化方向的,收下这篇方法论!

△ 这是提升信息度的模块,问题树太长,就只展示部分了

想要找到设计方向和优化方向的,收下这篇方法论!

△ 这是提升社交感的模块,问题树太长,就展示部分了

挖掘到以下功能(列举功能并记录,进行权重分析):

  • 关注模块需要重设计
  • 设计车队模式
  • 匹配度设计
  • 话题引流设计
  • 群设计(包含营销活动设计,展示打赏排名)等等

这是一个很浅的影响因素分析,到了这一步,很多厉害的小伙伴,甚至会更加详细。也就是说我们要将方向点,统统转化为机会点和业务新方向(那些一直抱怨没有发言权的小伙伴可以参考一下)。

想要找到设计方向和优化方向的,收下这篇方法论!

(全局问题树展示-举例就不做详细展开了,理解意思就行)

整合内容进行归类

拆分和定位分为:

  • 开发侧:标记为 K-1 +颜色,比如群内人数限制,开发能不能帮助解决,如果不能,转换至交互侧产品侧:标记为 C-1 +颜色。比如:车队设置,以及后续的商业演化;
  • 运营侧:标记为 Y-1 +颜色。比如:群内,该提供怎么样的营销策略;
  • 设计侧:标记为 S-1 +颜色。比如:交互处理,开发不能满足群内人数的扩张,该怎么做;
  • UI 该处理:如何让页面变得更加“温暖”,根据用户群来进行页面设计;
  • 题外话:交互在我看来,其实承担着衔接与沟通和分析的角色,整合内容看到问题其实对于经验要求很高(比如能看到商业机会),请尽量带着组内专业的人进行归类分析。

整合成一个表单:

想要找到设计方向和优化方向的,收下这篇方法论!

重复确认问题我们找到上级确认:是否与上级规划的方向保持一致,不合适也能及时作出修改。

  • 证明你的专业性
  • 让领导知道你们接下来做的事情是什么,产生了什么数据价值,将有价值的内容规划,融入产品层的大纲中
  • 暗示领导给资源,有些拆解出的目标问题,是不能单方面来解决的

资源规划根据权重比,进行资源规划。适用场景对于刚上手的小伙伴,请耐心的一步步做完,老鸟的话请直接一步到位。

2. 以用户的接触点进行设计

这一块的内容需用到用研部分知识,以数据为主用研为辅的情况下去进行拆解问题。相对来说,流程会更加的长,但是获得的结果更为准确一些或者说更加偏向用户想要什么。

流程漏斗数据图

还是以这个案例:(背景需要改动一些)

背景:某 APP 作为游戏类兴趣社交 APP,个人主页作为了解他人、建立社交关系的核心一环,目前信息丰富度和社交感偏弱,故需要进行优化 。(改为:导致流失率偏高,下单转化极低)

目标:页面改版核心以社交为驱动,丰富页面信息,提升用户建立社交概率。(添加:提升用户建立社交概率,从而能提升用户粘性降低流失率)

第一步:拉取数据(某一时间段,瞎编的基础点击事件埋点数据,看个意思就好)

想要找到设计方向和优化方向的,收下这篇方法论!

△ 假的有点过分了,嘿嘿

第二步:进行梳理

先进行大纲梳理(以业务流程为主,梳理出主要问题)

想要找到设计方向和优化方向的,收下这篇方法论!

△ 以用户直接进入个人主页举例

想要找到设计方向和优化方向的,收下这篇方法论!

第三步:假设驱动即解决复杂问题时尽可能的先找到一个合理的假设。比如:刚进页面就流失,甚至停留时间都很短,那么你立马给出的结论是:

TA 真丑,不符合我的审美,严重 P 图。

想要找到设计方向和优化方向的,收下这篇方法论!

第四步:找到用户做这类测试的时候,当然一定要去找玩游戏的用户且接触过陪玩的。用户找到-约时间-去用户能放松的地方-开始浏览该软件-进行定性测试。

第五步:汇总结果定性的方式有很多种:这里我举例一个「think aloud」:

使用 think aloud 的流程:

  • 提前告知被测用户你需要边操作边思考并且说出来
  • 记录被测用户的说话记录
  • 分析文本,归纳问题分类
  • 将分类嵌套至说话的文本中
  • 计算统计结果
  • 建议使用中位数测量

最后在经过数据分析得出问题的优化重点或改版方向。

补充一句,如果条件允许,使用卡片分类法,让用户自主的搭配,个人主页中功能位置。

小结:熟练分析话术,圈重点,找到核心的发力点。也能让思考过程更加结构化、可视化。不同的话术下,找到不同的方式,帮助快速解决问题,找准切入点和挖掘机会点和后续的跟进(要玩的流畅就取决于你的树结构的清晰程度了)。

拆解后的策略是什么?

策略其实在你分析的时候就已经产生了。

想要找到设计方向和优化方向的,收下这篇方法论!

当然啦,我们是一个 team,当你产生策略的时候,需要和团队内共同讨论方案的可实行性。

如何去验证拆解结果?

1. A/B testing

进行原版和改版数据对比,重点/想改进的数据有没有提升/下降就好了。

AB 测试就是指把少部分用户分成平均的两组,其中一组用户体验网站改版的 A 版本,另外一组用户体验网站改版的 B 版本,分别记录清楚相关的所有用户操作数据以后再进行精确的比对,最后分析得出哪一个版本是用户最喜爱的。

2. 灰度

灰度发布则是指在新的功能上线以及没有上线之间能够保证新的版本可以稳定过渡的一种发布方法,可以在灰度发布的过程当中解决一些问题或者对新版本做出一些可以提高用户体验的调整,这是保证网站可以平稳更新到新版本的有效过程。

拆解流程如何优化?

  • 没有捷径可走,只有通过不断的练习,你才能优化步骤流程;
  • 如果全文看下来,对于词汇和方法没有问题的,你已经具备了优化,差的是熟练度;
  • 这些都只是思路,并不存在百分百正确,在什么样的情况下,就选择什么样的方式。了解理论不代表知道如何实际运用,理论是基石,基石决定上层建筑。

文章来源:优设  作者:七月Xavier 

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



JavaScript实现七种排序:冒泡、简单选择、快速排序

前端达人

冒泡

n 次比较相邻两数并交换找到最值,然后 n-1 次比较找到次值……较小的数字像气泡一样浮出。
这里我引入flag排除,已经有序却一直遍历

function bubbleSort(arr){ const n=arr.length; let flag=1,i,j; for(i=0;i<n-1&&flag;i++){ //最坏的情况需要依次比较出最小值、次小值、次次小值 flag=0;//如果交换了就变 for(j=0;j<n-i-1;j++){ if(arr[j]>arr[j+1]){ const swap=arr[j]; arr[j]=arr[j+1]; arr[j+1]=swap; flag=1; } } } return arr; } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

简单选择排序

和冒泡原理相似,但是少了很多交换,多了一个暂存最值的空间。
n 次比较相邻两数后最多只交换一次将最值放到位置上,然后 n-1 次比较找到次值
冒泡更适合基本有序的序列

function selectSort(arr) { const n=arr.length; let i,j,minIndex; for(i=0;i<n-1;i++){ minIndex=i;//先决定谁最小 for(j=i+1;j<n;j++){ if(arr[j]<arr[minIndex]){ minIndex=j; } } if(minIndex!=i){ const swap=arr[i]; arr[i]=arr[minIndex]; arr[minIndex]=swap; } } return arr; } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

快速排序

平均时间复杂度=O(n logn)

在这里插入图片描述

function quick_part(arr,left,right){ //留下left和right后面递归 var l = left; var r = right; var basic= arr[left]; //arr[left]即basic的原位置 if(left >= right){ //如果数组只有一个元素 return; } while(l!=r){//两者相遇,意味着一直到找到basic的位置 while(arr[r] > basic && l < r){ //l<r随时注意严格控制哨兵不能错过,从右边向左找第一个比key小的数,找到或者两个哨兵相碰,跳出循环 r--; } while(arr[l] <= basic && l < r){ //这里的=号保证在本轮循环结束前,key的位置不变,否则的话跳出循环,交换l和left的位置的时候,left位置的上元素有可能不是key l++; } //1、两个哨兵到找到了目标值。2、j哨兵找到了目标值。3、两个哨兵都没找到(key是当前数组最小值) if(l!=r){ //交换两个元素的位置 const swap = arr[l]; arr[l] = arr[r]; arr[r] = swap; } } arr[left] = arr[l] //arr[left]即basic的原位置 arr[l] = basic; quick_part(arr,left,l-1); quick_part(arr,l+1,right); } function quickSort(arr){ quick_part(arr,0,arr.length-1); }



    

转自:csdn 作者:tututu333


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


Java程序的逻辑控制和方法

前端达人

一、顺序结构

从上往下执行,非常简单,不做过多赘述。

二、分支结构

1.if语句

与c语言不同的是,java的if(布尔表达式)必须是布尔表达式
eg:判断某一年是否是闰年

 public static void main(String[] args) { Scanner scan = new Scanner(System.in); int year = scan.nextInt(); if((year%4==0 && year%100 !=10)||(year%400==0)) System.out.println("闰年!"); else{ System.out.println("不是闰年!"); } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2.switch语句

基础语法:

switch(整数|枚举|字符|字符串){ case 内容1 : { 内容满足时执行语句; [break;] } case 内容2 : { 内容满足时执行语句; [break;] } ... default:{ 内容都不满足时执行语句; [break;] } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

面试问题:
不能做switch参数的类型有哪些?
long float double boolean

三、循环结构

1.while循环

注意事项:

  1. 和 if 类似, while 下面的语句可以不写 { } , 但是不写的时候只能支持一条语句.,建议还是加上 { }
  2. 和 if 类似, while 后面的 { 建议和 while 写在同一行。
  3. 和 if 类似, while 后面不要多写 分号, 否则可能导致循环不能正确执行。
    eg:
 public static void main(String[] args) { int i=1; int ret=1; while(i<=5) { ret *= i; i++; } System.out.println(ret); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2.for循环

  1. 和 if 类似, for 下面的语句可以不写 { } , 但是不写的时候只能支持一条语句,建议还是加上 { }
  2. 和 if 类似, for 后面的 { 建议和 while 写在同一行。
  3. 和 if 类似, for 后面不要多写 分号, 否则可能导致循环不能正确执行。
    求阶乘的和
 public static void main(String[] args) { Scanner scan = new Scanner(System.in); int num = scan.nextInt(); int sum=0; for(int j=1;j<=num;j++){ int ret=1; for(int i=1;i <= j; i++){ ret*=1; } sum+=ret; } } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

3.do-while循环

基本语法:
do{
循环语句;
}while(循环条件)
先执行语句再判断循环条件。
注意事项:

  1. do while 循环最后的分号不要忘记
  2. 一般 do while 很少用到, 更推荐使用 for 和 while.

四、Java的方法

方法就是一个代码片段. 类似于 C 语言中的 "函数“。
方法:功能
public static 返回值 方法名(形式参数列表){
方法体;
}
方法名:要采用小驼峰的形式,maxNum
public static:因为当前所有的方法写完之后会在Main方法中调用。
方法体:就是具体方法的实现。

public static void main(String[] args) { int a = 10; int b = 20; // 方法的调用 int ret = add(a, b); System.out.println("ret = " + ret); } // 方法的定义 public static int add(int x, int y) { return x + y; } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

五、方法的重载

方法的重载:
1.方法名相同
2.返回值可以不同
3.参数列表不同(参数的个数和参数的类型不同)
4.必须要在同一个类当中。
eg:

public static void main(String[] args) { int a = 10; int b = 20; int ret = add(a, b); System.out.println("ret = " + ret); double a2 = 10.5; double b2 = 20.5; double ret2 = add(a2, b2); System.out.println("ret2 = " + ret2); double a3 = 10.5; double b3 = 10.5; double c3 = 20.5; double ret3 = add(a3, b3, c3); System.out.println("ret3 = " + ret3); } public static int add(int x, int y) { return x + y; } public static double add(double x, double y) { return x + y; } public static double add(double x, double y, double z) { return x + y + z; } } 
  • 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

方法的名字都叫 add. 但是有的 add 是计算 int 相加, 有的是 double 相加; 有的计算两个数字相加, 有的是计算三个数字相加.
同一个方法名字, 提供不同版本的实现, 称为方法重载

六、方法的递归

一个方法在执行过程中调用自身, 就称为 “递归”。
递归相当于数学上的 “数学归纳法”, 有一个起始条件, 然后有一个递推公式。
递归:
1.要调用自己本身。
2.要有一个趋近于终止的条件。
3.推导出递归的公式。
eg:求N的阶乘

public static void main(String[] args) { int n = 5; int ret = factor(n); System.out.println("ret = " + ret); } public static int factor(int n) { if (n == 1) { return 1; } return n * factor(n - 1); // factor 调用函数自身 }





    

转自:csdn 作者:flyyyya


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


这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

seo达人


今天彩云跟大家分享的是 Dribbble 上,我一直珍藏的 UI 设计大佬们。优秀的太多,这里仅放 10 位我觉得最值得看的,可谓是精选中的精选,所以我建议你一定要收藏学习。

Paul Flavius Nechita

网站链接:https://dribbble.com/NpaulFlavius

首先,终于可以有机会推荐这位大佬了,他在 Drbbble 上是发起 100 天打卡练习的第一人,在当时带起了一股风潮,人人都开始做打卡练习。这位大佬每天更新一张高质量 UI 界面设计,内容多变,脑洞很大。更厉害的是虽然已经是 5 年前的作品,但依然不过时,品质超高,非常值得借鉴和临摹练习。(作者后面也公开了所有打卡作品源文件,只是现在链接已经失效了。幸运的是,彩云当年收藏到了百度云盘,想要的话,可以在文章结尾处获得)

彩云也是在当时参与到了 100 天的打卡活动才进步飞快,然后跳槽到了 360 设计团队的,这个练习活动也成为了人生中的转折点。这种打卡练习对于技法提升非常有帮助,而且逼自己规律性的大量产出,也能不断给作品集添砖加瓦。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

UI8

网站链接:https://dribbble.com/UI8

这个团队从世界上 30 多万优秀设计师和工作室发布的作品中精挑细选,放出了大量符合现代流行趋势的设计风格作品。每一张图都极其优秀,封面包装也非常值得学习,不管是项目还是作品集都能很好的用上。彩云一直有关注他们,还购买过会员,值得推荐。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Cuberto

网站链接:https://dribbble.com/cuberto

这是一家成立已经有 11 年的设计工作室,他们出品的作品不止是 UI,还包括网页,插画,图标,动效等作品,每一个作品在配色和展示上也都非常精品,偏实际项目,推荐给大家。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Paperpillar

网站链接:https://dribbble.com/paperpillar

2016 年成立的一个 UI 设计工作室,他们擅长界面,插画,图标,品牌和前端开发。其中在 UI 这块的作品以真实项目居多,符合流行趋势,值得借鉴和参考。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Ionut Zamfir

网站链接:https://dribbble.com/ionuss

加入 Dribbble 已经超过 10 年的自由设计师,他的作品我很早就有在关注,这些年也还在保持更新,作品以真实项目展示为主,推荐收藏。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Cosmin Capitanu

网站链接:https://dribbble.com/Radium

这位大佬也是一位加入 Dribbble 超过 10 年的设计师,其作品主要以概念作品为主,最佩服他对作品的包装设计和脑洞。作品量虽然不多,但每一张图都是精品中的精品,大部分都是动效完整的设计方案,非常值得学习。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Fireart Studio

网站链接:https://dribbble.com/Fireart-d

一家专注在设计和软件开发的公司,擅长插画、UI,其中 UI 部分也是以实际项目为主,具有很好的参考价值。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

uixNinja

网站链接:https://dribbble.com/uixninja

因为他的头像是一个忍者,所以我叫他忍者哥,他的 UI 作品视觉效果爆炸。一个很普通的界面,经过他的排版包装之后,总能显得很不一样,擅长界面视觉包装,想要把自己的 UI 作品包装出视觉。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Netguru

网站链接:https://dribbble.com/netguru

这个团队的 UI 作品以 B 端界面为主,界面简洁实用,想找 B 端界面参考的设计师朋友,可以多看看他们的作品了,相信会有不少启发。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

Aurélien Salomon

网站链接:https://dribbble.com/aureliensalomon

这位大佬是开发背景,但不妨碍他把设计做到极致优秀,他的作品以极简概念为主,具备记忆点。他作品中有很多是对苹果,谷歌等大厂界面进行的重设计,改的也非常不错,挑战大厂的界面其实并不容易,相信大家能从他的作品中找到不少面试解题思路。

这10个 Dribbble 顶尖大神的作品,是我每日学习的源泉

总结

文章中列出来的这些是我从关注列表中精心筛选出来的比较有代表性的 UI 设计大神,在我的工作学习过程中,他们给了我很多的灵感。当然,这份推荐名单只是我自己的个人喜好,无关粉丝数量,排名也不分先后。

这篇分享,一定是值得收藏的,不论是找灵感,还是临摹学习,不用到处找,这 10 位大佬的作品就足够你研究了。最后,对于 UI 设计本身,最重要的还是要保持思考,多看多做才是进步阶梯。

文章来源:优设网 作者:彩云译设计

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

 

版式设计没思维?这样做让你事半功倍!

周周


再过几天就又双叒叕到「双十一」了,身边的许多朋友已经开始忙着囤优惠券,找链接了,而做为「设计“狮”」的我却还在连夜赶着各大品牌和公司的「宣传海报」,整天埋在做图—改图—再做图的循环中,不知道各位设计大大们最近的生活是不是也跟我一样呢。

版式设计没思维?这样做让你事半功倍!

好了,在开始今天的干货分享之前,我想先请大家一起来看几张海报:

版式设计没思维?这样做让你事半功倍!

看完之后,大家有没发现这几张海报有什么特点呢?

没错,他们的共同之处就在于,虽有通篇的文字,但画面依旧充满着空间结构感、层次感,而辅助图形的运用更是起到了点睛之笔的作用,给人眼前一亮的感觉。想必有的小伙伴肯定在思考,这是为什么呢?

版式设计,对,就是「版式设计」。

相信大家都曾有过,熬了一整晚,好不容易设计出几个画面的元素,结果看着一大堆的文字和图片,心中顿时思绪万千,脑海中却一片茫然,折腾来折腾去,还是不知道该如何排版才好的经历。

版式设计没思维?这样做让你事半功倍!

在当今这个高速发展的时代,无论是纸质媒体还是新媒体,信息的传播都离不开版式设计,一副好的版式设计作品,可以在有限的页面内,以最快速、最直接、最有效的方式传递出核心的内容和信息,并让读者和受众留下深刻而良好的印象。

所以,今天我就给大家分享一些版式设计知识,希望可以带给你些许灵感,帮助你早日做出爆款的设计作品~

曾在一本版式设计书上看到其对板式设计是这样定义的:“版式设计既版面编排,就是把特定的视觉信息要素,根据主题表达的要求在特定的版面上进行的一种编辑和安排。”

即排版并不是指简单的「东拼西凑」,而是需要经过合理化的对照排列整合,以此传递出高效的信息和特性差异的画面。

对比与突出

对比又称为「对照」,即把具有明显差异和矛盾的视觉元素配置在一起,碰撞出特性差异的现象,从而使主题更加的突出,视觉效果更加跳跃。具体又分为大小对比、粗细对比、虚实对比、主次对比等。通过利用不同方向、大小、粗细的字体重新排列整合,以突显出画面的主次信息,正如下面的几张海报。

版式设计没思维?这样做让你事半功倍!

△ 图一:大小对比

版式设计没思维?这样做让你事半功倍!

△ 图二:虚实对比

版式设计没思维?这样做让你事半功倍!

△ 图三:主次对比

字体的协调与统一

文字作为「语言符号」,无论在何种视觉媒体中都直接影响版式的视觉效果,在提高作品诉求力的同时也赋予了版面审美的价值观。在选用字体时,我们应当依据设计风格来决定,不同风格的作品,选择不同的字体形式。而协调则是指画面内在的东西,元素、字体配合得适度和恰当。即说明他们内在相似的东西或状态,以达到画面相统一的风格。

版式设计没思维?这样做让你事半功倍!

△ 图四:风格统一

版式设计没思维?这样做让你事半功倍!

△ 图五:颜色统一

版式设计没思维?这样做让你事半功倍!

△ 图六:元素统一

构成与比例分配

版式设计有很多种的构成方式和方法,一切美的东西皆有规律,三分法、白银比例、黄金比例就是其中的代表。

三分法(1:2)即「井字构图法」,是日常生活中最常见的一种构图手法,通过将视觉重心或者最吸引人的东西靠近四条线的相交处,使「画面和谐」的同时,也达到了「突显主体」的目的。

版式设计没思维?这样做让你事半功倍!

△ 图七:三分法

白银比例(1:1.414),也是在排版设计中最为常见的比例,给人一种「安稳恬静」,「惬意」的感觉。

版式设计没思维?这样做让你事半功倍!

△ 图八:白银比例

相对于其他比例而言,黄金比例(1:1.618)则显得更加突出,正如它的名字,常常给人一种「恰到好处」、「自然」的感觉、无论是在LOGO设计中、还是排版设计、抑或是摄影中,灵活的运用黄金比例,都能够带来不错的效果。

版式设计没思维?这样做让你事半功倍!

△ 图九:黄金比例

怎么样,看完之后,有没有找到一些灵感呢


文章来源:优设网    作者:艺海拾贝Design


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




既能用于排版还能用在图标的两个小技巧,快来收下!

seo达人

有时候觉得做的图标有点奇怪,但又不知道哪里奇怪,今天就来分析两个原理,看看有谁中招了!

亲密性

排版有四大原则,其中有很重要的一项就是亲密性,举个简单的例子,下图灰色是背景卡片,白色是信息内容:

既能用于排版还能用在图标的两个小技巧,快来收下!

按照亲密性原则,信息内容应该是一个整体,他们之间的关系更加亲密,所以它们之间的内间距(蓝色),应该是小于它们与卡片的外间距(红色):

既能用于排版还能用在图标的两个小技巧,快来收下!

如果,我们把间距颠倒,效果就会变成这样:

既能用于排版还能用在图标的两个小技巧,快来收下!

是不是有点奇怪!

其实在做图标的时候,有时也会用到这个知识点,比如之前看到一位星友做的删除图标,效果如下:

既能用于排版还能用在图标的两个小技巧,快来收下!

中间的两条竖线应该是内部内容,它们的内间距就应该小于外间距:

既能用于排版还能用在图标的两个小技巧,快来收下!

当然,这个间距相同也是 ok 的,咱们就别把内间距大于外间距,然后大的太离谱就好。

如果这个案例不够明显,咱们再整一个更明显的,我们在做“笔记本“、“目录“图标的时候,有时候会做成一个矩形,然后里面加几条线:

既能用于排版还能用在图标的两个小技巧,快来收下!

这几条线的内间距是不是应该小于它们与矩形的外间距,比如这样:

既能用于排版还能用在图标的两个小技巧,快来收下!

如果间距反过来,就会成这样:

既能用于排版还能用在图标的两个小技巧,快来收下!

这回很明显了吧!内部东西太散,导致整体不够精致。

其实仔细观察,这个图标例子和刚才那个排版的例子完全是一回事:

既能用于排版还能用在图标的两个小技巧,快来收下!

一个原理,那就是——亲密性!

很重要,大家一定要多多理解实践!

密集节奏

密集节奏是我们很容易犯的错,比如下面这个图标的原作看起来密集节奏就比较和谐:

既能用于排版还能用在图标的两个小技巧,快来收下!

但是当星友临摹后,效果如下:

既能用于排版还能用在图标的两个小技巧,快来收下!

我们抛开饱满度不谈,就在密集度这一块,这个地方离的太近:

既能用于排版还能用在图标的两个小技巧,快来收下!

导致那里过于密集,两条线快合二为一了。

再比如,下面这图标,我们先看临摹效果:

既能用于排版还能用在图标的两个小技巧,快来收下!

是不是这两个地方都太密集了:

既能用于排版还能用在图标的两个小技巧,快来收下!

也是线条快合二为一了,我们再看看原作:

既能用于排版还能用在图标的两个小技巧,快来收下!

人家这节奏感就好很多。

再举个例子,这组图标:

既能用于排版还能用在图标的两个小技巧,快来收下!

整体临摹优化的还不错,但是就是有一个比较突兀,就是它:

既能用于排版还能用在图标的两个小技巧,快来收下!

我不说,大家应该也都能看出来了,灯泡下面那里太密集了,其他地方都舒服,只有那里有点难受。

这就是大家经常犯的一个密集节奏的问题,大家多多注意。

好了,今天就这么多,大家可以好好消化下,尽量避坑!

文章来源:优设网  编辑:土拨鼠   

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

 

 

 

声音设计的魅力是你想象不到的

分享达人

声音记忆是一种非常普遍存在的现象。声音是基于人类本能的记忆方式,虽然并不代表它是最强的一种记忆形态,但它是最直接、原始的,因为它包含了结构化的图像、符码等特征,所以声音发出时本身就隐藏着巨大的想象力,既有直观又有想象,而且往往是被动接收的。尤其是当我们听到一段熟悉的音乐或是文字、音效,自然而然地就会想到某些事情。我一直认为音乐是记忆的载体,当然声音本身更是如此。


Ototo是一个可以让你使用任何导电物体来演奏音乐的电子套件。主控板上有对应一个八度内的所有黑白键的孔位,通过鳄鱼夹把任何的导电物件(水、水果、植物、金属餐具等等)与这些孔位相连,就能把这些导电物体变成按键。它的核心在于PCB合成器,实际上它是一块袖珍电路板,12个黑点和数个白点组成“琴键”,再加上一个外置的扬声器,只要与可导电的物体相连,摩擦就能发出声音。即便你是不懂乐理知识的人,即便没有专业的设备,也能拿起手边的日常小物创作一段美妙音乐。它还可以外接四种传感器的连接方式来改变声音模式。

Bareconductive的板子我之前在另外一篇文章中介绍过了《聊一聊音乐套件Bare Conductive Touch Board》,它比OTOTO的优势在于它有两种基础连接方式,鳄鱼夹和导电墨水。相对于鳄鱼夹,导电墨水体积更小,更方便。

下面再给大家介绍几个音乐装置项目:

  • + Looks Like Music +

Looks Like Music是Yuri Suzuki在2013年为卢森堡的Mudam艺术博物馆的暑期公共项目创作的互动式音乐装置。Yuri Suzuki设计了一系列几何造型的小型机器,它们可以沿着用马克笔画出的黑色线路前进,参与者可以在黑色线路边上涂色,这些小型机器会在经过这些颜色时把它们“翻译”成为声音。通过试验不同的涂色以及颜色之间的间距,参与者就可以创作出基本的曲调。

下面这个装置是个公共音乐装置,6个高度连小朋友也能够到的声音装置站立在博物馆外的广场上,它们能吞咽、扭曲声音和回声,组成一个音速游乐场。在任意一个喇叭面前,你都可以发出声音,说一句话,唱一句词,声音会通过弯弯曲曲的管道流淌,至于这条声音将从哪一端的喇叭里流出,就要靠你自己去探索了。

  • Synth Play

推动不同充气体的不同位置,随机产生的音乐就会响起。几个朋友共同配合,在推一推的解压氛围中便能创作出一支专属于你们的曲子。这样的创作方式将诞生出无数种组合,每一点微小的变化,都会带来微妙的听觉享受。有点呆萌的白色方块用来设定节拍,两个白色的充气体是创作音乐的主力,黑色充气体则用来控制和调节音效。

  • Face the Music

在名为 ‘ 面对音乐 ‘(Face the Music)的互动性平台上,你可以通过面部识别系统演奏电子音乐:抬抬眉毛敲敲鼓,张大嘴巴调音调,晃晃脑袋调整音长。还有歌剧、科幻小说、蓝调和电子舞曲等四种风格供你自由选择。

声音设计是很大的一个领域,现在还很少有学生专门做一个音乐装置放在作品集中,同学们如果感兴趣,想尝试的话,可以构思构思,为自己的作品集多增加一些色彩。


文章作者:程雅秋
英国皇家艺术学院产品设计硕士
擅长产品服务系统设计、用户体验设计和硬件Arduino交互

文章来源:站酷  作者:马克笔设计留学

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


聊天机器人的用户体验

分享达人

今天的聊天机器人远非“智能”,它们引导用户通过简单的线性流程,我们的用户研究表明,每当用户偏离这些流程时,它们都会遇到困难。

聊天机器人是智能助手的可怜“亲戚”。


定义:聊天机器人是一种特定于基于文本的对话界面,支持用户完成有限的任务。


在其他地方,我们讨论了智能助手的6个特性:语音输入、自然语言处理、语音输出、智能解释、代理和前面所有特性的集成。聊天机器人只需要具备这两种属性:自然语言处理和智能解释。换句话说,聊天机器人应该能够以自然语言接收查询,并正确地理解和解释它们(然后执行它们)。


在当今世界,至少有三个不同的因素推动着聊天机器人的发展和普及。首先,人们希望通过用机器人取代人工代理人来降低客户服务成本。其次,像微信这样的基于对话的系统的成功,提出了聊天机器人作为企业和服务的交互渠道的想法,旨在补充现有的渠道,如移动网络和移动应用程序。最后,Alexa和Google Home等语音智能助手的流行,促使许多企业在较小规模上效仿它们。


这些因素映射到今天可用的两种不同类型的聊天机器人:

在企业与客户之间的聊天交互中,客服机器人会接管部分人工负载。这类机器人的例子包括UPS的Ask UPS和阿拉斯加航空的Ask Jenn。


交互机器人的目的是提供与业务交互的额外通道,而不是用于客户服务。例如,Domino的批萨机器人允许用户订购批萨;来自Progressive公司的Flo可以提供一份汽车保险报价。这种交互机器人可以在各种平台上使用,其中最著名的是Facebook Messenger。(其他平台包括Twitter和Slack。)然而,它们也可以存在于应用程序(美国银行的Erica)中,或者通过短信(Capital One的Eno)提供服务。

UPS.com网站使用聊天机器人来回答客服问题。

Kiehl ‘s Messenger聊天机器人:用户可以通过在“发送消息”文本框中输入文本或选择屏幕上显示的选项之一(发送位置或邮政编码;文本输入框下面的主菜单选项)。


虽然客服机器人通常是纯文本的,但交互机器人将文本与可视化UI元素结合起来作为交互方法。


研究


为了了解聊天机器人的可用性,我们招募了8名美国参与者,让他们在移动设备(5名参与者)和桌面设备(3名参与者)上执行一组与聊天相关的任务。其中一些任务涉及为客户服务而与人或机器人聊天,另一些任务则针对Facebook Messenger或基于短信的聊天机器人。


对机器人的态度


一般来说,人们对机器人的态度从中立到略微积极。互动机器人是一个相当模糊的渠道:在我们的美国研究中,大多数参与者之前从未与此类机器人互动,他们也不知道它的存在。相比之下,微信公众号页面通常是这些机器人的复杂版本,我们的中国参与者对它们很熟悉。我们的一些参与者惊喜地发现了这个互动渠道,其他人则认为与其他传统渠道如网络或移动应用相比,它并没有带来足够的价值。


人们普遍认为客服机器人不如人类代表有帮助,但我们的参与者也认为它们有一些优势。最重要的优势是速度:与人类聊天通常需要很长的等待时间(要么在队列中,要么在对话开始之前,要么在人类为客户的问题寻找解决方案时),而机器人可以是即时的。另一方面,人们觉得与真人接触表明公司关心客户:“真人真的很好。他们卖给你一件昂贵的物品,所以他们必须在代理人身上花更多的钱。”另一个人说:“如果你有一个人(负责客户服务),那意味着你足够关心;如果你有一个机器人,那么·你应该有一个真正好的机器人。”


交互机器人通常很容易被识别为机器人,但客户服务机器人很难识别。有些企业并不总是提前向客户透露他们正在与机器人进行交互。我们认为这是一个错误。我们的研究参与者很高兴看到企业使用机器人是透明的,因为他们可以调整自己的期望和语言。例如,当用户意识到他们是在和机器人说话时,他们往往会更直接,使用基于关键字的语言,并避免礼貌标记。这种类型的语言通常比通常在正常对话中使用的复杂、间接的语言更成功。


用于交互聊天机器人UI


交互样式
文本和链接/按钮都可以用于向交互聊天机器人输入信息。它们的目的略有不同:

  • 预先确定的链接和按钮避免了用户输入。这些通常显示在一个轮播列表中,可以包括图像。人们喜欢有这些选项,甚至希望它们成为常用输入。

  • 文本允许用户在选择他们想问的问题类型方面有一定的灵活性,并允许他们偏离聊天机器人(通常过于严格)的脚本。


这两种输入机制都很重要,应该同时存在。


当机器人不允许用户选择选项,而是要求用户输入时,用户会抱怨。例如,一个参与者被Booking.com的机器人惹恼了,因为它不允许他选择日期,他必须输入日期。在输入“感恩节”之后,他说:“应该有一些明显的东西来预先填充它。选项应该预先填充——手动输入很乏味。我应该可以点击按钮才对。”

人们更喜欢选择一个选项(左边是Domino的聊天机器人),而不是输入冗长的文本(右边是Booking.com)。考虑为最常见的输入创建按钮。


一些机器人完全取消了输入文本的选项,迫使用户选择屏幕上显示的选项之一。这种类型的设计使机器人类似于一个网站,并限制了用户可以在系统内探索的路径。

Car Dealer聊天机器人不允许用户在选择库存选项后输入自由文本。


当链接和按钮被清晰地标记时,它们的效果最好,人们希望能够点击交互机器人显示的几乎所有非文本元素。例如,当eero Messenger机器人展示一组图片来说明eero的行为时,我们的大多数研究参与者都会点击这些图片,希望获得更多信息。

Eero for Messenger(左):为了告诉我更多信息,该机器人显示了一个轮播,上面有几张图片和一组可能的延续(文本在圆形框中)。用户希望能够点击轮播项,但这些并不是链接。Kielh’s for Messenger (右):轮播上的大图片是不可点击的,但是下面的链接是可点击的。


除了常规的按钮和链接,一些交互聊天机器人还有一个菜单元素,当被选中时,它会显示一组可能的任务。菜单有时显示在输入文本框下面,有时显示为旁边的一个小汉堡包图标。

金州勇士队在输入框下面有一个主菜单链接。选择此链接将显示一组可用的任务。当用户开始在输入框中输入时,菜单图标就显示在它旁边。主菜单链接和汉堡包图标做了同样的事情。


其他链接有时显示在消息框下面。这些链接是相当容易发现的:我们的几个用户与它们交互;然而,靠近输入框的图标不太可能被使用。

CNN bot:信息区下面的链接显示了聊天机器人的一些主要任务(头条新闻、主题、设置)。


线性流


交互聊天机器人似乎最像Alexa的技能:它们被设计用来指导用户完成少量任务。机器人支持的任务最好被概念化为具有有限数量分支的线性流,这些分支依赖于可接受的用户答案。机器人提出一个问题,其答案将推动机器人前进到流的右边分支。

一个线性流程的例子,机器人可能通过它来完成一个任务


当用户遵循流程并提供符合系统期望的“合法”答案,而没有跳跃步骤或使用未知的单词时,用户会感到成功和顺利。例如,一些参与者能够成功地与Domino ‘s Pizza、Wingstop、Progressive等公司的聊天机器人进行交互。然而,一旦用户偏离了规定的脚本,问题就出现了。


例如,当Domino ‘s Pizza机器人询问她的位置是公寓还是房子时,一名参与者输入townhome,机器人回答“我很抱歉。我好像听不懂。”另一位寻找巴宝莉腰带的用户在消息框中输入了“腰带”,但是收到了订单取消的信息。当她把它转换成“女式腰带”时,她被告知要从一个链接列表中选择,没有一个链接与她要找的匹配。

巴宝莉的聊天机器人很难理解用户想要完成的任务,并在机器人的指令表中列出了若干任务。


机器人也很难从问题或意外输入中恢复,有时会迫使用户从树的顶部重新开始,并做更多不必要的工作来获得答案。例如,我们的一个用户想知道起亚是否有四轮驱动的电动车型。为了找到匹配的任务,她不得不遍历整个决策树,回答诸如汽车需要容纳的人数和MPG等问题。当她对车辆类型偏好回答“不”而不是选择一个显示选项时,机器人就会停止并强迫她重新开始。


然而,有些机器人更加灵活,能够理解偏离脚本的请求。例如,一个参与者知道Domino ‘s Pizza正在进行促销活动,他可以让机器人将其加到自己的购物车中。在订餐流程的晚期,他还能够改变其中一个比萨饼的外壳。

Domino ‘s Pizza聊天机器人能够对不属于预订披萨的主要线性流的请求做出满意的响应。左图:用户可以在订购前将订单加到他的购物车中。右图:用户更改了正在订购的两个比萨饼中的一个的外壳。


一些机器人很难做出假设并建立查询的上下文。例如,我们的一名参与者试图与Capital one的基于文本消息的机器人Eno进行交互。他碰巧有两张来自Capital One的信用卡,每次他问一个问题,机器人就会强迫他澄清查询涉及的是哪个账户,而不会将上下文从一个交互传递到下一个交互。


当启动新任务时,机器人通常也不能利用之前输入的信息。例如,我们的一名参与者首先决定叫披萨外卖;她输入了自己的地址,但她被告知Domino ‘s不送货上门。她又开始一遍,这次的目标是去商店取货而不是送货。机器人第二次问她的地址,显然完全忘记了她已经输入了地址。

Capital One的机器人Eno要求用户在回答完每个问题后澄清他询问的是哪个账户。左:Eno只识别用户查询中的关键字“transaction”(尽管拼错了),无法回答用户的特定问题;相反,它给出了其指令库中一个匹配任务的答案。右:Eno重复了之前问的问题。


文章来源:站酷  作者:马克笔设计留学

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



vue中处理后台返回的 html 特殊标签(‘\&lt; p style=“xxx“ \&gt;‘)或(\<p>)的三种情况

前端达人

在平时获取后台数据渲染页面的时候可能会出现后台返回的数据是带有 html 特殊标签的
需求是附带的样式也不要, 意思就是直接删掉那些内容
但是在网上找挺久都没有找到现成的方法 最后是自己找了两个方法拼接出来的 所以在这里总结一下 方便以后直接 cv

// 返回数据:  ret : { list: { "introduct": '&lt;p style="color: lightcoral;"&gt;就&nbsp;当文字就是内容吧。&lt;/p&gt;', } } // 或者 ret : { list: { "introduct": '<span style="color: skyblue">就当文字就是内容吧。&nbsp;</p>', } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

返回数据带有html特殊字符(’&nbsp;/&le;p&gt;’) -> 转成 html标签(<p>)

// 返回数据带有html特殊字符的话直接用 v-html 在页面上显示的是 html标签 <body> <div id="app"> <div class="fd"> {{message}} // 如果需要数据中的样式的可以直接 v-html 指令渲染这个字段就能渲染出来了 <div class="box" v-html="'v-html: ' + message"></div> <button class="btn" @click="click1">dianwo</button> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: '&lt;p style="color: lightcoral;"&gt;就&nbsp;当文字就是内容吧。&lt;/p&gt;' }, methods: { click1() { this.message = this.escapeHtml(this.message) }, // 处理方法 escapeHtml(str) { var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' }; return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) { return arrEntities[t]; }); }, } }) </script> 
  • 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

在这里插入图片描述

上面这个方法来自:https://blog.csdn.net/weixin_49186680/article/details/108746341

返回数据带有 html标签(<span>) -> 把 html标签 去掉

// 如果不想要后台返回在数据终的样式的话可以这样处理 <body> <div id="app"> <div class="fd"> {{message}} <div class="box" v-html="'v-html: ' + message"></div> <button class="btn" @click="click1">dianwo</button> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: '<span style="color: skyblue">就当文字就是内容吧。&nbsp;</span>' }, methods: { click1() { this.message = this.delHtmlTag(this.message) }, // 处理方法 delHtmlTag(str) { return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, "") } } }) </script> 
  • 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

在这里插入图片描述

上面的方法来自:https://blog.csdn.net/weixin_44565191/article/details/109716908

返回数据带有html特殊字符(’&nbsp;/&le;p&gt;’) -> 去掉特殊字符

// 如果返回的带有 html特殊字符 都不要 结合上面两个方法 改吧改吧 就能瞒住要求了 <body> <div id="app"> <div class="fd"> {{message}} <div class="box" v-html="'v-html: ' + message"></div> <button class="btn" @click="click1">dianwo</button> </div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: '<span style="color: skyblue">就当文字就是&nbsp;内&nbsp;容吧</span>' }, methods: { click1() { this.message = this.escapeHtml(this.message) }, // 终极 处理方法 escapeHtml(str) { var arrEntities = { 'lt': '<', 'gt': '>', 'amp': '&', 'quot': '"' }; let htmlTag = str.replace(/&(lt|gt|amp|quot);/ig, function(all, t) { return arrEntities[t]; }); // console.log(htmlTag); return htmlTag.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, "") }, } }) </script> 
  • 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

在这里插入图片描述

感谢一下引用的这些大佬的内容
还有附上 样式 要想亲自试试效果的我把样式放这里

.fd { margin: 100px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { margin: 30px 0; display: flex; align-items: center; } .btn { width: 100px; }





    

转自:csdn 作者小王几pl


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


VueRouter的实现原理——封装简易功能的VueRouter

前端达人

Hash模式和History模式的区别

不管哪种模式,前端路由都是客户端路由的实现方式,也就是当路径发生变化时,不会向服务器发送请求,是利用js监视路径的变化。然后根据不同的地址渲染不同的内容,如果需要服务器内容,会发送Ajax请求来获取。

表现形式的区别

  • hash 模式
    https://music.163.com/#/discover/toplist 地址中会存在 # 号
  • history 模式
    https://music.163.com/discover/toplist 地址中没有# 类似于普通的地址,但是需要服务端配置支持

原理的区别

  • hash 模式是基于锚点, 以及onhashchange 事件
  • history 模式是基于 HTML5 中的 History API
    • history.pushState() IE10 以后才支持
    • history.replaceState() \

History 模式的使用

  • History 需要服务器的支持
  • 单页应用中,如果刷新页面,会向服务器发起请求,而服务器不存在这样的地址就会返回找不到该页面从而出现404
  • 在服务端应该除了静态资源外都返回单页应用的 index.html

node 环境下支持 history

在 node 环境下,启用对history模式的支持可以通过 connect-history-api-fallback 这个中间件来完成

// 导入处理 history 模式的模块 const history = require('connect-history-api-fallback') // 导入 express const express = require('express') const app = express() // 注册处理 history 模式的中间件 app.use(history()) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Nginx 下支持 history

  • 从官网下载 nginx 的压缩包
  • 把压缩包解压到 c 盘根目录,c:\nginx-1.18.0 文件夹
  • 修改 conf\nginx.conf 文件

运行nginx服务器基本指令

启动
start nginx
重启
nginx -s reload
停止
nginx -s stop

  • 修改 conf\nginx.conf 文件
location / { root  html; index  index.html index.htm; #新添加内容
     #尝试读取$uri(当前请求的路径),如果读取不到读取$uri/这个文件夹下的首页
     #如果都获取不到返回根目录中的 index.html
     try_files $uri $uri/ /index.html; } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

VueRouter 两种模式的实现原理

Hash 模式

  • URL 中 # 后面的内容作为路径地址
  • 监听 hashchange 事件
  • 根据当前路由地址找到对应组件重新渲染

History 模式

  • 通过 history.pushState() 方法改变地址栏
  • 监听 popstate 事件
  • 根据当前路由地址找到对应组件重新渲染

实现思路

在这里插入图片描述
从上图,可以大致了解一下 VueRouter 这个类中的结构:
上半部分是属性,下半部分是方法,其中+ 是实例方法,- 是静态方法。
install 是用来实现Vue.use 插件机制的方法。

VueRouter-install 方法实现

要实现install方法,首先先分析一下该方法要做的事情:

  1. 判断当前插件是否已经被安装
  2. 把Vue构造函数记录到全局变量
  3. 把创建Vue实例时候传入的router对象注入到所有的Vue实例上
 let _Vue; export default class VueRouter { static install(Vue) { // 1. 判断当前插件是否已经被安装 if(VueRouter.install.installed) return VueRouter.install.installed = true // 2. 把Vue构造函数记录到全局变量 _Vue = Vue // 3. 把创建Vue实例时候传入的router对象注入到所有的Vue实例上 // 利用混入让所有的vue实例加载router _Vue.mixin({ beforeCreate(){ // this.$options.name用来获取vue实例 data以外的属性 // new Vue( { router } ) if(this.$options.router) { _Vue.prototype.$router = this.$options.router } } }) } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

添加 VueRouter 的constructor

VueRouter 的构造函数要初始化三个属性,分别是: options、data、routeMap。

  • options 是路由的构造配置对象
  • data 应该是一个响应式的对象,其中有一个属性 current 用来记录当前我们的路由地址,这里我们该如何才能创建一个响应式的对象呢?可以使用Vue的observable方法
  • routeMap 中记录了 options里的rules,rules解析出来 会以键值对的形式存在 routeMap中 ,key 就是路由地址,value 就是路由组件
constructor(options){ this.options = options this.data = _Vue.observable({ current:'/' }) this.routeMap = {} } 
  • 1
  • 2
  • 3
  • 4
  • 5

createRouterMap

接下来我们来实现VueRouter类中 createRouterMap 这个方法,它的作用就是把 options 中rules 路由规则解析出来以键值对的形式存储在routeMap上。

 createRouterMap() { this.options.rules.forEach(route => this.routeMap[route.path] = route.component) } 
  • 1
  • 2
  • 3

initComponents

下一步,来创建initComponents 方法,这个方法里我们要创建两个组件。分别是:RouterLink 和 RouterView

创建RouterLink 组件

let _Vue; export default class VueRouter { static install(Vue) { // 1. 判断当前插件是否已经被安装 if (VueRouter.install.installed) return VueRouter.install.installed = true // 2. 把Vue构造函数记录到全局变量 _Vue = Vue // 3. 把创建Vue实例时候传入的router对象注入到所有的Vue实例上 // 利用混入让所有的vue实例加载router _Vue.mixin({ beforeCreate() { // this.$options.name用来获取vue实例 data以外的属性 // new Vue( { router } ) if (this.$options.router) { _Vue.prototype.$router = this.$options.router this.$options.router.init() } } }) } constructor(options) { this.options = options this.routeMap = {} this.data = _Vue.observable({ current: '/' }) } createRouterMap() { this.options.routes.forEach(route => this.routeMap[route.path] = route.component) } initComponents(Vue) { // 创建RouterLink组件 Vue.component('router-link', { props: { 'to': { type: String } }, template: `<a :href="to"><slot></slot></a>` }) } init() { this.createRouterMap() this.initComponents(_Vue) } } 
  • 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

用自己的VueRouter 替换掉官方的运行后,发现报错
在这里插入图片描述
报错的意思是,运行时版本的Vue 不支持 tempalte 模板,需要打包的时候提前编译。
如果要让我们的template被支持可以使用完整版的Vue,完整包包含运行时和编译器,体积比运行时版本大10k左右,程序运行的时候把模板转换成render函数
@vue/cli 自动安装的就是 运行时版本

报错的解决

第一种方案——引入完整版Vue,可以在vue.config.js中 加入配置

module.exports = { runtimeCompiler: true } 
  • 1
  • 2
  • 3

第二种方案——使用render函数替换掉tempalte

 render(h) { return h('a', { attrs: { href: this.to } }, [this.$slots.default]) } // template: `<a :href="to"><slot></slot></a>` 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

创建RouterView组件

 // 记录一下this let self = this Vue.component('router-view',{ render(h){ // routeMap以key value形式记录了path和component // data.current 记录了当前页面的path return h(self.routeMap[self.data.current]) } }) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在routerlink中添加点击事件,修改地址

为了能够让链接成功完成跳转展示组件,我们需要对routerlink中的a标签添加点击事件

并且要在点击的时候,把最新的path更新到router实例的current上.

我们借助于history的pushState方法 该方法会修改浏览器地址栏中的地址,但不会向服务器发起请求,并且还可以将新地址记录在历史中

 Vue.component('router-link', { props: { 'to': { type: String } }, render(h) { return h('a', { attrs: { href: this.to }, on: { click: this.clickHandle } }, [this.$slots.default]) }, methods: { clickHandle(e) { history.pushState({}, "", this.to) // 把点击的链接地址 更新到 current 上 this.$router.data.current = this.to
                    e.preventDefault() } } // template: `<a :href="to"><slot></slot></a>` }) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

initEvent

现在功能基本上已经差不多了,但是还存在一个小问题,就是当我们点击浏览器的前进或者后退按钮的时候,组件不能实现切换展示,主要思路就是通过添加popstate监听地址变化,下面我们来完善该功能

 initEvent(){ // window.addEventListener("popstate",()=>{ this.data.current = window.location.pathname }) } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

完整代码

let _Vue; export default class VueRouter { static install(Vue) { // 1. 判断当前插件是否已经被安装 if (VueRouter.install.installed) return VueRouter.install.installed = true // 2. 把Vue构造函数记录到全局变量 _Vue = Vue // 3. 把创建Vue实例时候传入的router对象注入到所有的Vue实例上 // 利用混入让所有的vue实例加载router _Vue.mixin({ beforeCreate() { // this.$options.name用来获取vue实例 data以外的属性 // new Vue( { router } ) if (this.$options.router) { _Vue.prototype.$router = this.$options.router
                    console.log(this.$options.router.init); this.$options.router.init() } } }) } constructor(options) { this.options = options this.routeMap = {} this.data = _Vue.observable({ current: '/' }) } createRouterMap() { this.options.routes.forEach(route => this.routeMap[route.path] = route.component) } initComponents(Vue) { // 创建RouterLink组件 Vue.component('router-link', { props: { 'to': { type: String } }, render(h) { return h('a', { attrs: { href: this.to }, on: { click: this.clickHandle } }, [this.$slots.default]) }, methods: { clickHandle(e) { history.pushState({}, "", this.to) // 把点击的链接地址 更新到 current 上 this.$router.data.current = this.to 

e.preventDefault() } } // template: `<a :href="to"><slot></slot></a>` }) let self = this Vue.component('router-view', { render(h) { // routeMap以key value形式记录了path和component // data.current 记录了当前页面的path return h(self.routeMap[self.data.current]) } }) } init() { this.createRouterMap() this.initComponents(_Vue) this.initEvent() } initEvent() { // window.addEventListener("popstate", () => { this.data.current = window.location.pathname }) } }

转自:csdn 作者:Holyforsaken_FHC


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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档