首页

我的 Input框 不可能这么可爱

seo达人

作者:陈大鱼头

github: KRISACHAN

<input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识点。



本篇文章默认大家已经知道 <input /> 标签的基本用法,不会做过多的基础说明~







没想到,这些选择器居然跟 input …

到写文章为止,根据的 drafts 指出,一共有3大类,16种跟 input 相关的选择。其实都挺有用的,善用它们,会让我们的用户体验更加美好。



下面我们来分享一下这3大类选择器的作用:







第一类:控制系(Input Control States)

选择器 作用

:enabled 选择可使用状态的 <input /> 元素

:disabled 选择不可使用状态的 <input /> 元素

:read-only 选择不可编辑状态的元素(不仅仅是 <input /> )

:read-write 选择可编辑状态的元素(不仅仅是 <input /> )

:placeholder-shown 选择 placeholder text 显示时的元素

:default 选择在 <button>,<input type="checkbox" />, <input type="radio" />, 以及 <option> 上的默认状态

第二类:输出系(Input Value States)

选择器 作用

:checked 选择处于选中状态的 <input type="radio" />

:indeterminate 选择状态不确定的表单元素与 <progress>

第三类:侦查系(Input Value-checking)

选择器 作用

:blank 选择处于空值时的 <input>,暂未被浏览器支持

:valid 选择验证通过的表单元素

:invalid 选择验证不通过的表单元素

:in-range 选择处于指定范围内的 <input />

:out-of-range 选择不处于指定范围内的 <input />

:required 选择必填的表单元素

:optional 选择选填的表单元素

:user-invalid 选择用户输入但值非法时的 <input />,暂未被浏览器支持

可怕,除了选择器,居然还跟这些属性有关系

<input> 除了有很多相关的选择器,结合不同的type还有不同的属性可以供使用。他们的作用如下:



属性 作用

maxlength 可输入的最大长度

minlength 可输入的最小长度

size 输入框的长度

readonly 输入框是否只读

required 输入框是否必填

multiple 输入框是否可以多选

pattern 输入框验证规则

min 可输入的最小值

max 可输入的最大值

step 输入框每次的增量

list 输入框绑定的可选值数据

placeholder 输入框预选文字

实战

通过上面的三类说明,我们大致了解了 <input /> 标签的相关信息,但是你们以为我是来列list的吗?



当然不是,还有实操啊~







纯CSS实现表单提交功能

首先我们来看个效果图







上面的效果就是一个纯CSS实现的表单提交功能,这是怎么实现的呢?下面我们直接看源码,然后一步一步地来分拆(不想看的可以直接CV下面的源码自己做测试~)



<style>

    :root {

      --error-color: red;

    }

    .form > input {

      margin-bottom: 10px;

    }

    .form > .f-tips {

      color: var(--error-color);

      display: none;

    }

    input[type="text"]:invalid ~ input[type="submit"],

    input[type="password"]:invalid ~ input[type="submit"] {

      display: none;

    }

    input[required]:focus:invalid + span {

      display: inline;

    }

    input[required]:empty + span {

      display: none;

    }

    input[required]:invalid:not(:placeholder-shown) + span {

      display: inline;

    }

</style>

<form class="form" id="form" method="get" action="/api/form">

    账号:

    <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />

    <span class="f-tips">请输入正确的账号</span>

    <br />

    密码:

    <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />

    <span class="f-tips">请输入正确的密码</span>

    <br />

    <input name="button" type="submit" value="提交" />

</form>



第一步:写好基础结构

首先我们来把基础结构给写好,代码如下:



<style>

    :root {

      --error-color: red;

    }

    .form > input {

      margin-bottom: 10px;

    }

    .form > .f-tips {

      color: var(--error-color);

      display: none;

    }

</style>

<form class="form" id="form" method="get" action="/api/form">

    账号:

    <input data-title="账号" placeholder="请输入正确的账号" pattern="\w{6,10}" name="account" type="text" required />

    <span class="f-tips">请输入正确的账号</span>

    <br />

    密码:

    <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />

    <span class="f-tips">请输入正确的密码</span>

    <br />

    <input name="button" type="submit" value="提交" />

</form>



扫一眼,嗯,挺简单的,都是常用的东西。咦,不对,这个 pattern 是什么东西?



在这里我们重点分享下 pattern 这个属性,这是一个用来验证 input[value] 是否合法的属性,里面的内容就是匹配value的,语法便是正则的语法,例子如下:



<label>

    <!--

当前pattern的内容就是验证input[name="part"]的value的,其规则如同里面的正则一样,匹配input[name="part"]的value是否是一个数字+3个大写字母

-->

    <input pattern="[0-9][A-Z]{3}" name="part" />

</label>



当然,不同的 input[type] 也会默认带有相应的 pattern ,例如 input[type="email"] 就是默认匹配了以下规则:



/^[a-zA-Z0-9.!#$%&'+\/=?^_`{|}~-]+@a-zA-Z0-9?(?:.a-zA-Z0-9?)$/

1

第二步:重点功能

input[type="text"]:invalid ~ input[type="submit"],

input[type="password"]:invalid ~ input[type="submit"] {

    display: none;

}

input[required]:focus:invalid + span {

    display: inline;

}

input[required]:empty + span {

    display: none;

}

input[required]:invalid:not(:placeholder-shown) + span {

    display: inline;

}



上面便是核心交互的实现。



首先第一个class就是保证了在两个输入框不通过的时候隐藏,就是当输入框值为空或者不符合验证规则,则隐藏提交按钮。



第二个,第三个class则是控制当用户在输入框输入内容时,如果不符合验证规则,则显示错误信息,否则则隐藏。



第四个class则是用过 placeholder 是否存在来控制错误信息的显隐,如果 placeholder 不显示,则证明用户正在输入,错误信息则根据用户输入的值来判断是否显隐,否则则隐藏。



状态切换

上面我们有提到一个选择器 :indeterminate ,这个是用于选择状态不确定的表单元素与 <progress> ,玩过扫雷的人都知道,右击除了可以选择红旗,还可以选择问号,就是选中,但不确定;又跟 promise 的 pending 状态类型,介于 resolve 与 reject 之间。



多了 :indeterminate 会给我们带来很多很有趣的体验。



首先我们来看看它的使用案例。



基础使用法

先看效果







代码如下:



<style>

    body {

        background: #333;

        color: #fff;

        padding: 20px;

        text-align: center;

    }

    input {

        margin-right: .25em;

        width: 30px;

        height: 30px;

    }

    label {

        position: relative;

        top: 1px;

        font-size: 30px;

    }

</style>

<form>

    <input type="checkbox" id="checkbox">

    <label for="option">点击左边</label>

</form>

<script>

      'use strict';

      checkbox.addEventListener('click', ev => {

        if (ev.target.readOnly) {

          ev.target.checked = ev.target.readOnly = false;

        } else if (!ev.target.checked) {

          ev.target.readOnly = ev.target.indeterminate = true;

        };

      });

</script>



这里面其实没有什么复杂的实现,只是做了个中间态的判断,就非常轻松的实现了radio的三种状态切换。



秀到头皮发麻法

先看效果







(此天秀效果来自于 Ben Szabo 的 codepen,有兴趣的可以仔细研究下,我何时才能有大佬这么优秀,嘤嘤嘤~)



输入框绑定的可选值

先看效果







其实代码很简单:



<input type="text" list="names" multiple />

<datalist id="names">

    <option value="kris">

    <option value="陈大鱼头">

    <option value="深圳金城武">

</datalist>



<input type="email" list="emails" multiple />

<datalist id="emails">

    <option value="chenjinwen77@foxmail.com" label="kris">

    <option value="chenjinwen77@gmail.com" label="kris">

</datalist>



<input type="date" list="dates" />

<datalist id="dates">

    <option value="2019-09-03">

</datalist>



这里原理就是通过 <input list="dates" /> 来绑定需要下拉显示的数据列表 <datalist id="dates"> 。



那么当我们要实现输入联想的时候,也可以通过修改 <datalist id="dates"> 的子元素来实现,而不是再写一大堆的操作函数来实现。



总结


JS----预编译及变量提升详解

seo达人

JS----预编译及变量提升详解

JS属于解释型语言,在执行过程中顺序执行,但是会分块先预编译然后才执行。因此在JS中存在一种变量提升的现象。搞懂预编译环节,变量提升自然而然也就懂了。本文讲围绕以下几点进行介绍(变量提升会穿插在其中讲解):



预编译执行步骤

示例演示



预编译执行步骤

预编译发生在函数执行的前一刻,过程如下:



创建AO对象,执行期上下文(后面更新关于执行期上下文详解)。

寻找函数的形参和变量声明,将变量和形参名作为AO对象的属性名,值设定为undefined.

将形参和实参相统一,即更改形参后的undefined为具体的形参值。

寻找函数中的函数声明,将函数名作为AO属性名,值为函数体。



至此,预编译环节结束,函数中咯变量按照最终AO对象中的值开始执行。接下来,结合示例演示就会更加清晰。



作者:北海北方

链接:https://juejin.im/post/5aa6693df265da23884cb571

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



示例演示

我们先来看下面这段代码:

function fn(a){

console.log(a);

var a = 123;

console.log(a);



    function a(){};

    console.log(a);

    

    var b = function(){};

    console.log(b);

    

    function d(){};

 }

 

 //调用函数

 fn(1);



作者:北海北方

链接:https://juejin.im/post/5aa6693df265da23884cb571

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

接下来我们来按照前面的步骤详细分析它的预编译执行过程:



创建AO对象



AO{

    //空对象    

}

复制代码

找形参和变量声明



AO{

    a : undefined,

    b : undefined

}

复制代码

形参和实参相统一



AO{

    a : 1,

    b : undefined

}

复制代码

找函数声明



AO{

    a : function a(){},

    b : undefined,

    d : function d(){}

}

复制代码预编译环节就此结束,此时的AO对象已经更新为:

AO{

    a : function a(){},

    b : undefined,

    d : function d(){}

}

复制代码函数开始逐行顺序执行:

 function fn(a){

    console.log(a);// 输出functiona(){}

    var a = 123;//执行到这里重新对a赋,AO对象再一次更新

    console.log(a);// 输出123

    

    function a(){};//预编译环节已经进行了变量提升,故执行时不在看这行代码

    console.log(a);// 输出123

    

    var b = function(){};//这个是函数表达式不是函数声明,故不能提升,会对AO中的b重新赋值

    console.log(b);//输出function(){}

    

    function d(){};

 }

复制代码至此,函数执行完毕,销毁AO对象。

我们再来看几个例子,熟悉函数的预编译过程。

示例一:

function test (a,b){

    console.log(a);

    c = 0;

    var c;

    a = 3;

    b = 2;

    console.log(b);

    function b(){};

    function d(){};

    console.log(b);



//调用函数

test(1);

复制代码它的AO创建过程如下(此处省略创建空AO对象的部分,下文同):

AO1{

    a : undefined,

    b : undefined,

    c : undefined

}



AO2{

    a : 1,

    b : undefined,

    c : undefined

}



AO3{

    a : 1,

    b : function b(){},

    c : undefined,

    d : function d(){}

}

复制代码至此预编译环节完成,开始执行:

function test (a,b){

    console.log(a); //输出1

    c = 0; //给AO对象中的c重新赋值0

    var c;//预编译环节变量提升,不再读此行代码

    a = 3;//给AO对象中的a重新赋值3

    b = 2;//给AO对象中的b重新赋值2

    console.log(b);//输出2

    function b(){};//预编译环节变量提升,执行时不再读这行代码

    function d(){};//预编译环节变量提升,执行时不再读这行代码

    console.log(b);//输出2



//调用函数

test(1);



复制代码示例二:

这个例子中我们引入全局对象GO。GO与AO的过程类似

function test(){

var a = b = 123;

}

test();

复制代码此函数的执行过程:先把123赋给b,再声明a,再把b赋给a。此时变量b未经声明就赋值,为全局变量。预编译环节如下:

GO1{

b : undefined

}

AO1{

a : undefined

}



GO2{

    b : 123;

}

AO2{

    a : 123;

}

复制代码示例三 :

console.log(test);

function test(test){

   console.log(test);

   var test = 234;

   console.log(test);

   function test(){};

}

test(1);

var test = 123;

复制代码我们来看它的预编译过程:

//执行前(页面加载完成时)生成GO对象

GO1{

    test : undefined

}

GO2{

    test : function(){}

}



//输出 function test(){...}



//执行test()前生成它的AO对象

AO1{

    test : undefined

}

AO2{

    test : 1

}

AO3{

    test : function test(){}

}



//预编译结束开始执行test(1);

AO4{

    test : 234

}

//输出234

复制代码示例四:

function demo(){

    console.log(b);

    if(a){

        var b = 100;

    }

    console.log(b);

    c = 234;

    console.log(c);

}

var a;

demo();

a = 10;

console.log(c);

复制代码我们来看它的预编译过程:

//首先是全局对象GO 

GO1{

    a : undefined

}

G02{

    a : undefined,

    demo : function demo(){}

}

//执行demo()前预编译,由于demo中的c未声明就使用故为全局对象



//输出undefined

GO3{

    a : undefined,

    demo : function demo(){}

    c : undefined

}

//此时a还是undefined,故不执行if()代码块

//输出还是undefined

GO4{

    a : undefined,

    demo : function demo(){}

    c : 234;

}

//输出234

GO5{

    a : 10,

    demo : function demo(){}

    c : 234;

}

//输出234


界面设计——视觉层面的三维解析

ui设计分享达人



如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


在我看来,界面设计的视觉层面主要可以分为三个维度来解析:信息传递、视觉美化、创意创新。




界面设计是一个很庞大的体系,具有很多原则,比如轻量、容错、清晰等等,其中包含了交互层面以及视觉层面等,今天我想单独把视觉剥离出来,来讲一讲我对界面设计“视觉层面”的理解与认知。


在我看来,界面设计的视觉层面主要可以分为三个维度来解析:信息传递、视觉美化、创意创新。


信息传递是让用户看的明白,快速清晰的获取信息;

视觉美化是让用户看的舒服,让界面足够美观;

创新创意是让用户看的惊喜,看到一些不一样的创意点。


如下图:



三个维度的目标如何实现呢?我提取了以下三个关键词:



清晰、和谐、独特是我们要达成的目标,达成目标一定会有一些原理所在,而有了原理就会有具体的执行方法,所以后面的每一个知识点,我都会按照“设计目标-执行原理-执行方法”的逻辑给大家讲解,大纲如下:


1 清晰 

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大


2 和谐

2.1 和谐-呼应-颜色呼应

2.2 和谐-节奏-变化对比

2.3 和谐-饱满-负形缩减


3 独特

3.1 独特-品牌延展-IP形象结合

3.2 独特-事物本意-事物图形化



1.清晰 

1.1清晰-降噪-容器整合  

设计目标:清晰

执行原理:信息降噪

执行方法:容器整合



当界面信息过于分散时,会对用户造成不必要的干扰,导致用户产生疑惑甚至直接离开界面。


作为设计师,要做的就是对信息进行整合,我们可以称之为信息减噪,目的就是让页面更加清晰,减少干扰。


这里我经常使用“容器整合法”来让内容更加清晰、聚焦。


当分散的内容装进一个“容器后”,就可以使内容聚焦在容器当中,让信息更加规整。而卡片就是一个很好的“容器”。


实际案例:

在改版腾讯动漫个人中心的时候,头部就存在信息分散不聚焦的问题,四个视觉触点(绿色圈处)分散在四个角落,形成极大干扰。



这里我就采用了”卡片容器“的方法,将信息装进容器中,减少分散信息的干扰,使界面更加清晰、工整,效果如下:


 

现在很多产品都在使用卡片化的布局,尤其是在信息数量、层级较多的时候,更加需要有容器将其规整起来,这样才会让界面保持不乱!



1.2 清晰-聚焦-局部放大  

设计目标:清晰

执行原理:聚焦

执行方法:局部放大




我们在平时做需求的时候,经常会遇到信息特别多,特别乱的时候,如果此时我们选择什么都想突出,最后的结果一定适得其反,什么都突出部不了,这时候就需要我们选择一些内容来进行局部放大,反而可以让整体信息更加聚焦、清晰。


这种方法经常用在有数字展示的页面当中,比如下面这种页面:



再比如,下面这个模块信息,如果”3“没有放大,整体的信息会乱到你眼花缭乱,我们看下对比:



所以,大家在遇到有数字,且信息杂乱的时候,就可以采用局部放大的方式来使整体更加聚焦、清晰。



2.和谐  

2.1 和谐-呼应-颜色呼应 

设计目标:和谐

执行原理:呼应

执行方法:以颜色呼应为例


 

很多时候我们会觉得自己做的东西很不和谐,其中一个很重要的原因就是因为页面中没有贯穿的元素,也就是没有呼应,很常用的一个呼应的方法就是颜色呼应。


例如这个画面总看起来不够和谐,你会觉得绿色很突兀,就是因为颜色上没有呼应:



而一旦你想办法,让绿色“事出有因”,比如取自眼镜的颜色:



那么,突兀的问题解决了,和谐的目标也就实现了。

而刚才那个人中心的界面:



我们会发现,图标的颜色也是取自背景色,所以整体看起来才会如此和谐。


除了颜色呼应,还有很多呼应的方式,比如图形、图标风格等等,这里就不再举例了。



2.2 和谐-节奏感-对比变化 

设计目标:和谐

执行原理:节奏感

执行方法:对比变化



对于音乐,节奏感是非常重要的,如果一段音乐一直是一个频率,那可能也算不上音乐了。


界面也是一样的,节奏感是让页面变得“和谐”很重要的因素之一,如何做到呢?


我们在展示文字列表的时候,你觉得下面两种哪个更舒服些呢?



我猜你会觉得第二个舒服一些,因为它有变化,有节奏感,所以它和谐、舒适。


我们会发现很多产品首页带有封面图的列表都有很多种排法,例如1带多,1x2,2x2,2x3等等:



就是为了防止每个模块过于重复,如果每个模块都是每排两张封面,一直下来:



看起来会非常乏味。


2.3  和谐-饱满-负形缩减 

设计目标:和谐

执行原理:饱满

执行方法:负形缩减



在做图标或者字体的时候,经常要讲一个原则就是“饱满”,界面上每个“不能拆分的元素”都需要尽量做到饱满,比如图标,再比如下面这个信息组件:



正文就属于不能拆分的单一原子,大家可能会问,这种信息不就是方方正正的一个信息块吗,怎么会不饱满呢,比如行间距过大:



再比如,我在优化腾讯动漫信息流的时候,发现正文出现的表情远远大于文字,如下图:



表情一旦出现,就会造成大量空隙(负形过大),导致整体不够饱满、和谐。

我们可以看下其他产品,表情和文字几乎都是一样的大小,他们都会尽量缩小负形空间(也就是空隙小大):



在这样的原则之下,优化后的效果如下:



以上是关于和谐的几点方法。


3.独特 

如果你的界面做到了清晰、和谐,在视觉层面就已经算是及格了,如果还能加上一点小创意,就可以让人眼前一亮。

如何能够做到独特?可以从两方面出发,1是品牌,2是内容本身含义。


3.1独特-品牌延展-吉祥物结合  

设计目标:独特

执行原理:品牌延展

执行方法:IP形象结合



从品牌出发,可以有很多方向,比如logo,图形,品牌吉祥物等,下面以品牌吉祥物为例:

在做小说阅读器的时候,有一个设置选项是选择文字的背景颜色,选择控件是圆形,而品牌形象也偏圆形,此时就可以将圆形控件与形象相互结合:



但是选择控件有两种状态,为了更加生动,就让给形象正面面对你的时候作为选择状态,而转过身作为非选择状态,大概效果如下:



此创意已在腾讯动漫小说落地实现。


3.2 独特-事物本意延展-事物图形化 

设计目标:独特

执行原理:事物本意延展

执行方法:事物图形化



除了品牌,还可以根据事物本身的意思来延展图形,比如日间夜间模式的切换按钮,男女性别的切换按钮,都可以利用事物本身的含义来延展图形设计:



此创意已在腾讯动漫个人中心模块落地。


再比如,弹幕的展示方式,就可以联想到电视机,再把电视机图形化,如下图:



此创意已经在腾讯动漫小说频道页实现。


这里需要注意下,有时候如果图形过于普通,可以配合动效来增加独特性,但一定要注意开发成本。

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


如何写出清晰易懂的交互文档?

ui设计分享达人

在做交互文档之前,我们先要明白什么是交互文档、为什么要做以及做了给谁看。


一、什么是交互文档 


交互文档,即交互设计说明文档。英文 Design Requirement Document ,简称DRD。主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容。


二、为什么需要交互文档          


有些人可能对文档这种东西比较反感,尤其是从事工作不久的朋友。其实工作得越久,越会发现文档的重要性,它可以帮助你理清思路,并记录下来,便于回顾。


工作上而言,有一份规范的文档可以让你的设计更有说服力,也易于工作对接,提高彼此之间的沟通效率。 


三、交互文档给谁看的   
   

交互文档其实要说给谁看,其实具体情况具体分析。有的公司老板也要盯交互文档,以及甲方爸爸、运营部门同事,都有查看的可能。


【产品经理】产品经理与交互设计师可能是沟通最多的人,产品经理主要在文档中确认设计思路和业务流程,然后过一下页面交互模块。


【视觉设计】UI设计师通常最关注的是页面交互模块,有着产品思维和体验思维的设计师也会仔细看一下设计思路和产品背景,以便于自己更了解产品业务逻辑和用户心理。


【开发人员】前端的开发同事和UI设计师一样,最关注页面交互模块,其他的作为提升会辅助了解。而后端开发人员关注更多的是业务逻辑、信息架构、操作流程等,这些都清晰了,他们才能输出一份准确合格的开发文档。


【测试人员】因为测试人员是把关产品上线的一群人,所以各个模块、步骤都应该去了解透彻,才能提出有效的bug。



四、如何撰写交互文档 


本文主要阐述以Axure软件为撰写工具,大家可以根据实际需求决定用什么软件(Sketch、PPT、Word、PS、AI 等)。比如小需求可以用Sketch,快而。如果是要给甲方爸爸/大老板看的,使用PPT会让他们更好理解。



通常,一个比较基础、规范的交互文档(DRD)由:文档封面、更新日志、文档图例、设计背景/思路、业务流程、页面交互、全局通用说明、废纸篓八部分组成。当然,这不是绝对,你可以根据你的实际工作需要进行增减。


比如,如果是C端产品的话,用户调研的结论、用户画像、用户体验地图等等,都可以放进去给看的人一个参考。尤其是在如今这么关注用户体验、产品思维的一个大环境下,这些数据支撑很有力量。同时还可以帮助开发人员、界面设计人员培养产品思维、体验思维,大家一起将产品变得更好。


其次,交互文档的整洁与美观也很有必要。相信在过去几年不少人有遇到过这样的产品经理(兼交互),他们会输出一些有时连他们自己都看不太懂或者直接从其它竞品截图来的线框图。当开发和界面设计的人提出质疑的时候还美其名曰线框不重要,重要的是里面的业务逻辑。。。其实用产品思维想,交互文档就是交互设计师的产品,而看的人就是用户,保持良好的可读性,可谓至关重要。


1、文档封面

交互文档的封面如上图,通常包括产品的名称、Logo、版本号以及版本发布时间、所属部门、对接负责人/对接人。


2、更新日志

我们都知道,在产品的迭代的过程中,需求/功能是会不断调整的。而更新日志,就是为了迭代而生。它一般由修改日期、修改内容、修改人、版本号和备注组成。如果是新增的功能或模块,建议是要加上链接可直接跳转至新增内容的,如上图。

 

版本号也是同理,都应加上对应的版本链接,便于查看者回溯之前的内容,与当前的新版本形成对比。这一点对开发人员来说很重要,其次对于新同事深入理解产品也能起到很大的帮助。

 

修改日期,通常是按时间倒序排列,查看起来会比较方便。



3、文档图例


文档图例,顾名思义就是关于此文档的一些辅助说明,目的是为了让读者更好地理解文档。如上图的:操作/跳转图例、标签图例、流程图例以及手势操作图例。


4、设计背景/思路

设计背景,根据实际工作需要,放置一些关于思路整理、灵感来源的文档。 


比如用研报告、用户画像、竞品分析报告、商业画布等等。增强文档的说服力,尽量让每一个人都能理解到产品的战略目标和业务逻辑。 


因为我今年对接最久的是一个B端产品的项目,所以整理了一个产品画像,仅供参考。


5、业务流程


业务流程图,不是操作流程图也不是页面流程图。它是产品的整体业务流程,直接和业务挂钩,可以说是产品的核心流程。


例如淘宝APP,买家购物由始至终的流程就是它的业务流程。通常用泳道图的形式展示,多数情况下是由产品经理绘制。


以上是我所负责产品的核心业务的流程图。因为是B端产品,涉及角色较多,针对3个代表性角色分别进行了绘制,仅供参考。(涉及到保密协议,所有关键词都去掉了)


6、页面交互


(1)信息架构

信息架构属于用户体验的结构层,是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代,否则不会大改。


(2)权限说明

如果是C端产品,权限这一块相对简单,比较好整理的。B端产品涉及角色众多,可能要单独拎出来分析整理。以上仅供参考,大家具体情况具体分析。若是功能很单一的产品,交互文档中也可省去这个模块。


(3)操作流程图

产品操作流程图就是通过图形化的表达形式,阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时,会产生的一系列操作和反馈的图标。

 

注:不要将所有流程汇总在一个表里,或者展示在同一个页面中,而应跟随具体的操作或者功能模块放置。时刻想着看文档的人的感受,怎么易懂怎么来。 

上图是登录、注册和找回密码的操作流程图。仅供参考。模板源文件下载,后台回复“交互”即可。


(4)页面线框图

页面线框图,是通过图形化的表达形式,阐述产品在页面层面的信息。包括: 


【页面标题】即每一个页面的对应标题,一般就是导航栏标题


【页面内容】以黑白为主,保证信息规整易读


【交互说明】用标签将其对应起来,包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则 等等


【主流程线】只需要画出主流程线即可,千万不可太多太杂,时刻考虑读者的感受

以上是注册/登录的线框图和详细的交互说明。将重点内容用红色标记,可以让查看者一目了然更好理解文档。


7、全局通用说明


全局通用说明,指整个产品可通用或者复用的元素。一般是边做文档边整理出来的,方便自己或者接手该项目的设计师直接调用。其次,对开发及时封装可复用控件也是有参考价值的。 


(1)常用控件

常用控件类似UIKit,通常将极具复用价值的控制整理在一起,方便及时调用。


(2)复用界面

顾名思义就是全局可复用的一些内页,比如选择联系人、独立搜索页等。 


(3)时间规范

在做产品的第一步,就应该约定一个时间规范。不然各个端开发出来,你会发现iOS是斜杠的,Android是横杠的,WEB是圆点的...真到了发现的时候再改,那真是彼此都是无比崩溃的。 


(4)缺省页汇总

缺省页一般包括加载失败、加载中、网络中断和无数据的空页面。为空页可以按照模块整理在一起,方便UI设计师最后一起设计缺省页,保持风格统一。 


8、废纸篓 


废纸篓,被称为是交互文档的“后悔药”。在需求不断变动的情况下,改改改的过程中,请把你改过的稿子,放这里!!!因为很可能最后还是用的第一个方案...(此刻内心有点绝望) 



五、总结


文档、软件只是工具,最重要的还是要落地、实行起来才能对产品有所帮助。所以在撰写文档的每时每刻,都应该站在“读者”的角度思考,他们看的时候感受会是怎样的,会觉得很难理解吗?

转自-站酷

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

全面的图标设计类型和风格总结

ui设计分享达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

图标是 UI 设计中极为重要的一个环节,我们在做每个界面的设计几乎都会涉及到图标的表达,出色的图标设计可以让界面表达更加精致、有趣。图标的设计往往也体现着设计师的基本功,因此除了日常多画提升对图标造型的把控力外,我们也更需要了解和学习图标设计的趋势类型,从而帮助我们提高在设计中的效率。

基于自我学习的目的,平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的 「类型、风格」 进行了整理,以及自己对于每种图标类型的思考。




图标的类型划分

设计网站上的图标可以说是多种多样,不同类型的图标都有着独特的魅力。例如,线性图标简洁轻量、面性图标厚重直接,当然同一种类型的图标也具有很多不同的表现形式。

因此基于本人对图标的理解,大致划分为三类:线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。



线性图标

使用轻量的线条勾勒的图标,整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受,细线轻量、直线硬朗、曲线柔美。

1. 线型图标基础分析及想法

粗细对比

粗细不同,图标的力度和重量感就会有差异。粗线的图标,视觉关注力来说会更加突出,但较于细线的图标也会显得粗壮、厚重。细线的图标,精致、透气、秀美。

但在设计时需要依据 「整体的 UI 风格」 来决定线的粗细,而并非单纯的考虑图标的关注度,反而更需要考虑图标与界面整体的平衡感。

柔度对比

直角与圆角决定了外形的感知和风格的走向,如下图对比中看出,圆角越大图形越趋向于可爱柔美(如下右图),圆角越小则越直接、硬朗和阳刚(如下左图)。因此刚或柔或中间值完全取决于早期对于整体风格的定调。




繁简对比

除了轻量化和简洁之外,图标的识别性也是极为重要。如下左图,「过度简洁」 导致图标失去该有的识别度而出现歧义,而下右图的元素叠加使得图标稍显复杂。在繁与简的平衡中,应该保持在不影响图标识别度的情况下,最大限度的提升图标的简洁程度。




特征的识别度

除了简洁程度,也需要考虑图标该有的特征。例如下图 「评论」 图标的案例,当我把图标中的「三个点」 去掉时,图标依旧具有 「对话/评论」 的表意,而当我把下面的 「箭头」 去掉保留 「三个点」 时,则会出现歧义,它可以被表意为 「更多」 的意思,因此在设计图标时需要对于表意做精准把握,避免歧义出现。




保持图标的特征美感

如下面的 「心形」 图标,下左图是我们具有普识性的图标,与圆形组合之后依然保持着原有的形态美感。但我们不时也会看到第三种设计,整体外形虽然保持着爱心,但为了与整体风格「一致」 强行对外轮廓进行切割,与原图形在美感上则稍微有些出入,这也是我们需要思考的关键点。




组合型比例

组合型的比例会影响到图标的精致程度,准确的 「比例值」 能让整体的造型趋向平衡,更具有美感。如下图案例尝试了两组不同比例的效果,这里以图标窄边作为 「基准值」 进行尝试。当内形为外形的 1 : 2 时(下图2),图标的整体视觉效果较为平衡;当大于 1 : 2 并接近 4 : 3 时,图标内部结构会显得过于饱满。而小于 1 : 2 并接近 4 : 1 时(下图3)则会产生稀疏不紧凑的效果。(这里的比例只是案例需要,实际设计以最终的视觉感知为准)



2. 线性类型拓展

基础的理论,结合延展的应用,可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例,可以看看线型图标设计类型的多样性。

极简风格

整体风格极为简约,没有多余的线条,通过线条还原图形的本质,外形 「简单」 却具有很强的识别性,在视觉感知上轻松、干净。

极简的风格图标在于对图形的把控,多一笔可能显得复杂,少一笔可能影响识别程度。以上图为例,图标的组合元素保持在 2 个左右,整体较为干净。

实际应用:Instagram、Airbnb、Facebook、Twitte




双色

相较于 「纯色的图标」 更具表现力,细节上也会更加丰富,形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。

同色系:同为冷色系、暖色系或同一色系的表达形式。如下图案例,以暗色为主色,亮色点缀提亮,使得图标具有一种高光提亮的感觉。




另一组案例是亮色主色结合暗色,整体图标效果还算可以,但较亮的颜色没有应用在图标的关键特征上,使得图标第一眼的感知稍有减弱。





对比互补色:颜色跨度更大,层次更加分明。如下图案例,红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。





实际案例:腾讯动漫我的页面





透明度变化

本质上与上面一种为一个类型的设计,通过透明度的叠加和变化,提升图标的层次感和空间感,降低图标的压迫性。




实际案例:爱奇艺9宫格图标




渐变层次叠加

渐变带出了图标的质感,结合「不同深度」或「不同饱和度」的变化,让图标更具有细节和层次。





黑白+品牌色

黑白色作为主色调,结合品牌色作为点缀色。与常规的黑白图标相比,既产生了变化,同时兼顾了品牌色的透出。




实际案例:大众点评攻略页面图标





线性渐变

结合渐变的颜色,丰富了整个图标的视觉表达,并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试,白底:粗线比细线的视觉效果相对较好,渐变也能较为清晰地被表达;黑底:细线比粗线的视觉效果显示得更加精致和具有锐度感。





实际案例:网易考拉、NAVER




一笔成形

此类图标在视觉表达上具有较高的线性流畅度和设计感,关注点在于整组图标的 「开口起始点」 设定上需保持一致。例如,「从左到右」或「从右到左」形成一体化的连贯线条,开口起始点不一致会影响整组图标的一致性,应用在页面时也会显得杂乱。



断点图标

与上一种较为类似,但没有连贯度的要求。在线形图标基础上面,寻找一个缺口来打破 「全包边图标」 的沉闷感,使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小,另外需要控制开口个数避免过多导致图标外形过于零碎。




实际案例:腾讯体育、京东



面性图标

面性图标比线性图标更能表达出图标的力量感和重量感,比线性图标会更加容易吸引用户目光。在识别度上,面性图标更加依赖于外轮廓的清晰度,因此在设计时对于外形的打磨是重中之重,清晰的外轮廓可以帮助提高识别度。


  1. 面型图标基础分析及想法

轮廓对比

轮廓的差异会体现出不同的气质,如下图的左边和右边的区别,一个气质较为直接硬朗,另一个则较为柔美可爱。流畅的外形可以让面形图标的整体更加简洁、规整,如下图中间的图标在轮廓的处理上则显得比较碎,整体外轮廓造型的连贯度有所欠缺。





镂空对比

适当的镂空除了补充了图形的识别度之外,还提升了面性图标的设计细节。另外需要控制好镂空部分与整体的外形比例,过小或过大都可能影响图标的平衡感。如下图的中间和右边,镂空过小对图标的辨识度并没有多大作用,没有镂空则少了一些透气感。




形体对比

形态上的差异也会具有不一样的视觉感知。以「星」和「心」为案例,单独形体与组合之后的形体相比视觉感知更直观些,而组合形的图标相对会精致一些,多了一些层次。在日常设计中的经验是:越小的图标形体应该越简单,因此建议单体出现较好;若图标的尺寸足够大时可采用组合型的设计,补充图标的细节。



繁简对比

设计面性图标时,对于多余细节的管理也很重要。随着细节的增加,块面切割过多,会使得整体图标变得过于零碎(如下右图)。保持简约的设计提高图标的识别度,在关键的特征细节上做补充(如下中间图的相机闪光灯)。


2. 面性图标类型拓展

面性图标在设计时也可以结合各种不同的表达方式,来提升图标的质感和创意,而非只是简单的填充颜色。

单色面+点缀色

整体的外形使用统一的颜色,结合图标的属性感知使用不同的颜色进行点缀,通过点缀色提亮了图标的视觉效果,达到既统一又具有差异化。





多彩双色

通过对比色、邻近色的搭配来营造整体的图标氛围,提升了图标的层次和丰富度,双色的表达也增添了图形的趣味性。在日常使用的 APP 中极为常见,简单且容易出效果。




微质感渐变

微弱的渐变提升了图标的质感。渐变的方向会影响整体图标的视觉效果,因此可以根据不同设计的需要进行调整。如下图案例:




实际案例:全民K歌





透明度/灰度变化

透明度/灰度的变化,让原来单色的图标变得更加具有层次感和空间感,设计细节更加丰富,降低了单色面性图标的厚重感。





实际案例:企鹅FM我的页面




透明度变化+渐变

渐变的设计提升了面性图标的质感,从颜色上具有一定的丰富度。在渐变的基础上对组合型做透明度差异化,使得图标具有了层次感。




透明叠加的图标+渐变的背景

此类图标常常被应用在 UI 界面中的列表或者顶部入口的位置。





实际案例:全民K歌点歌页面





颜色叠加穿透

图标透明叠加之后产生了交错的负形,叠加出第三个面。虽然整体设计依然保持着扁平化,但却多了一份层次感,并且增加了图标的细节。




实际案例:百度网盘





渐变层次叠加

整体的效果与透明度变化的图标较为接近,通过渐变的深浅变化,使得形状的衔接处出现了明暗对比,因此图标也具有了厚度感和层次感。





实际案例:NAVER、掌上生活





高斯模糊

此类图标基本没有在 APP 中看到,与「透明度变化」或「颜色叠加」相比都更具层次感和空间感,同时图标也具有较强的设计感。





线面结合

结合了线性和面性的优点,既保持了面性的重量感,同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控,不同比例可以呈现出不同的视觉感知。



  1. 线面结合图标的基础分析及想法

线面比例

线面比例的差异,图形呈现出来的张力也会有不同的感受。基于中间填充的图标形态尝试了三种不同的比例,从下图中可以看出,当填充与外形窄边比为 1 : 3 时(左图)图标呈现往内收的感觉;填充与外形窄边比为 1 : 2 时(中间)图标整体较为平衡;当填充与外形窄边比为 2 : 3(大于1:2)时(右图)整体具有外扩趋势。




组合形式

线面可以通过不同的组合形式进行绘制。基于不同的组合形态可以设计出多种多样的线面图标,不同的组合形式会体现出不同的设计风格,因此在设计时尽量多发散思考,寻找出适合你的组合方式。




繁简对比

线面结合本身就由两种形式组合,因此在设计的时候更需要对整体造型进行把控,单体(线和面)造型必须保持较高的简洁程度,这样最终组合形成的图标才不会过于复杂(左图),若本身形态过于复杂,则会降低图标的辨识度和视觉美观度。


2. 线面结合图标类型拓展

线面结合的图标集合了线性和面性的优点,在设计方式上也继承了两者的优点。设计方式也是基于以上两种的结合,因此可以结合出更多设计的可能性。

黑白线+面性品牌色

与「线性+品牌色」的做法较为接近,统一的线性颜色叠加品牌色的透出。




实际案例:好好住、soul




线面双色

基于线面的基础上,在线和面的颜色上做差异。具体做法与线性或面性的双色接近。




线面结合-阴阳

线和面的结合按 50% 的比例进行设计,依据上下、左右、居中等基础方式的结构化设计,整体图标的视觉效果较为跳跃,非常规。



线面双色+错位

在双色图标的基础上,线和面按照统一的 「百分比」 进行缩放,并进行透视和位移的设计,整体呈现出来的是一种交错叠加的视觉效果,相比普通的线面双色更加丰富。




实际案例:闲鱼底部tab、脸球底部tab




线面错位+渐变

基于上一种风格,对面或者线的颜色进行渐变设计,丰富了图标的质感和颜色更加细腻。




线面透明度变化

与「线面透明度变化」的设计方式大致一样。如下图案例,「弱线强面」的第一识别度较弱,而「弱面强线」 的外形识别度较高,也更符合图标的表达。




实际案例:新浪微博、腾讯新闻

基于三种基础的类型表达,可以拓展出多种多样的设计形式。除了以上的案例之外,还收集了一些其他的设计。





线面结合 – 插画

整体比较偏向插图的感觉,细节和元素较多,常见于一些 APP 的空白页设计。




线面结合 – 卡通插画

整体感觉比较可爱、卡通、二次元,常见于一些二次元或漫画类的 APP。





面性 – 渐变强质感

整体风格的光影质感会比较强烈,常在一些活动运营或小游戏的界面出现。




面性 – 扁平写实

整体感觉比较扁平,细节的丰富度与现实感知接近。





线面+渐变插画

整体风格比较偏向绚丽多彩的颜色风格,质感和细节较为丰富。


写实风格




3D质感图标

由于 C4D 的制作成本相对较高,目前较少在常规的 APP 中看到。但 3D 作为一个主流的设计趋势,在时间和能力允许的情况下需要多做这方面的尝试。




等距的线面结合

等距的设计,让原本线面的图标丰富了层次,并具有立体透视的感觉。




除了以上这些之外,我们在实际场景中也会发现一些较为特别的图标设计。

Facebook 更多页面的列表图标

整体风格偏向插画风+渐变质感。由于更多的页面为纯列表的设计,因此整个页面在图标的设计上做了很大胆的尝试,与常规的单色图标相比更具有吸引力。为了区别不同的业务,系统性质的功能图标做了色调的区分。




APP Store 游戏和新APP界面下的类别列表图标

整体为具象化扁平风格的设计表达,图标的颜色还原了最基本的现实感知。




iOS 系统办公类软件的起始页面图标

整体风格比较偏商务简约,具象的图形表达+轻微的渐变质感。




QQ手机版中延展的功能图标

整体风格偏向轻写实+微弱渐变。每个图标都具有丰富的细节表达,色调方面基于业务属性结合品牌色进行了区分,整体既统一又具有差异化。




大众点评顶部入口的图标

整体风格偏向写实+强渐变+炫光感,每个图标都具有丰富的细节表达。




旅法师营地

游戏、二次元类的 APP,因此在图标的设计上也偏向细节较为丰富的插画风格。




哔哩哔哩动漫

图标风格偏向卡通插画,选中态与默认态的设计较为巧妙。



总结

本文的重点在于透过这些设计类型或者技法的了解,帮助我们在日常设计中提升输出效率。图标虽然作为 UI 设计的基础,却有很深的学问,精致的图标更是可以起到点睛的作用,提升界面的质感和氛围。

图标的种类远远不止本文所提到的这些内容,但是万变不离其宗,都是「线性、面性、线面结合」 再结合 「透明度、渐变、颜色叠加、质感、多维空间」等等的表达方式而设计出来的。

我们除了需要掌握这些内容之外,还需要提升图标设计的造型能力,更需要日积月累的练习和思考,从量到质的变化。

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


解决nodejs koa express以及vue,nuxt项目中使用别名映射vscode不提示的问题,兼容webpack的@和best-require 的:xxx 别名映射

seo达人

nodejs中使用别名映射,兼容webpack的@和best-require 的:xxx 别名映射

项目地址: https://github.com/langyuxiansheng/biu-server-admin



写在前面

研究了很久,找了很多资料发现都没有,只好自己去想办法,查资料.才弄好的,凌晨发布的,转载请注明出处.

在做nodejs项目开发的时候,你是不是也在为

require('./posts');

require('./controllers/posts');

require('../controllers/posts');

require('../../controllers/posts');

require('../../../apis/controllers/posts');



或者



require(ROOT_PATH + '/application/apis/controllers/posts');

// other require()...

require(ROOT_PATH + '/application/apis/controllers/users');

require(ROOT_PATH + '/application/apis/controllers/products');

require(ROOT_PATH + '/application/apis/services/rest');

require(ROOT_PATH + '/application/apis/config');



这样的写法而困扰;



那看完这篇文章,从此之后就可以告别这个烦恼了;



感谢一下 best-require 这个模块包的作者,不然还需要自己去写这个

npmjs 链接 https://www.npmjs.com/package/best-require

github 链接 https://github.com/yuezhihan/best-require



不废话了,进入正题 往下看:

  1. 安装库 best-require 进行别名映射





    npm i best-require --save


  2. 映射别名. 实例在本项目中 server/index.js 中





    const path = require('path');

    const ROOT_PATH = process.cwd();

    const SRC_PATH = path.join(ROOT_PATH, /server/src);

    console.log(ROOT_PATH, SRC_PATH);

    //映射目录别名

    require('best-require')(ROOT_PATH, {

        root: ROOT_PATH,

        src: SRC_PATH,

        controllers: path.join(SRC_PATH, '/controllers'),

        models: path.join(SRC_PATH, '/models'),

        routes: path.join(SRC_PATH, '/routes'),

        crawlers: path.join(SRC_PATH, '/crawlers'),

        services: path.join(SRC_PATH, '/services'),

        middleware: path.join(SRC_PATH, '/middleware'),

        lib: path.join(SRC_PATH, '/lib'),

        config: path.join(SRC_PATH, '/config'),

        logs: path.join(SRC_PATH, '/logs')

    });



    //运行服务

    require('./src/bin/Server').run();


  3. 设置 jsconfig.json





    {

        "compilerOptions": {

            "allowSyntheticDefaultImports": true,

            "baseUrl": "./",

            "paths": {

                "@/": ["client/"],

                ":root/": [""],

                ":config/": ["server/src/config/"],

                ":lib/": ["server/src/lib/"],

                ":services/": ["server/src/services/"],

                ":controllers/":["server/src/controllers/"],

                ":models/": ["server/src/models/"],

                ":routes/": ["server/src/routes/"],

                ":crawlers/": ["server/src/crawlers/"],

                ":middleware/": ["server/src/middleware/"],

                ":logs/": ["server/src/logs/"]

            }

        },

        "include": ["server/*/","client/*/"],

        "exclude": [

            "node_modules",

            "nuxt-dist",

            "server-dist"

        ]

    }


  4. vscode要安装 path-intellisense 插件 并在设置中配置setting.json



    vscode 中的设置,setting.json



    workspaceRoot 是当前的工作空间,就是当前编辑器打开的目录.



    配置如下





    {

        "path-intellisense.mappings": {

            "@": "${workspaceRoot}/client",

            ":root": "${workspaceRoot}",

            ":lib": "${workspaceRoot}/server/src/lib",

            ":controllers": "${workspaceRoot}/server/src/controllers",

            ":models": "${workspaceRoot}/server/src/models",

            ":routes": "${workspaceRoot}/server/src/routes",

            ":crawlers": "${workspaceRoot}/server/src/crawlers",

            ":services": "${workspaceRoot}/server/src/services",

            ":middleware": "${workspaceRoot}/server/src/middleware",

            ":config": "${workspaceRoot}/server/src/config",

            ":logs": "${workspaceRoot}/server/src/logs",

        }

    }


  5. 重启vscode,试试看吧!

    作者的目录结构









    vue中使用







    后续更新

    nodejs中使用sequelize的model映射,这样就解决了没得提示的烦恼了,让你的效率提升2个档次

    写在后面

    如果你遇到难题或者有疑问,有好的建议请留言反馈.

    这种提示以及Ctrl + 鼠标左键的跳转,只针对 .js 的文件, .vue的没试过.这个也只是为了解决 js方法映射后没提示的问题.


vue生命周期过程简单叙述

seo达人

vue 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程。设置数据监听、编译模板、挂载等等。vue生命周期还是不太容易理解,这里就简单地说一下它的整个过程。

1创建一个vue实例



new vue({

data () {

return {

}

    }

})



2 初始化事件和生命周期 beforeCreate 创建实例之前执行的钩子函数

3 初始化·注入和校验 created 实例创建完成后执行的钩子



new vue ({

data () {

return {

a: 1

}

},

created: function () {

console.log('created')

}

})



4 渲染页面 编译 beforeMount 将编译完成的html挂载在虚拟dom时执行的钩子

5 mouted钩子 挂载完毕对数据进行渲染 会做一些ajax情求初始化数据 mounted整个实例过程中只执行一次



new vue ({

data () {

return {

a: 1

}

},

created: function () {

console.log('created')

},

// 一些钩子函数

mouted: function () {

console.log('mounted')

}

})



6 修改数据 beforeUpdate 更新之前的钩子

7 updated 修改完成重新渲染

8 准备解除绑定子组件以及事件监听器 beforeDestroy

9 销毁完成 destroyed


图片切换简易版

seo达人

css:

*{margin:0;padding:0;}

tu{margin: 50px auto;padding: 10px;width: 500px;

background: rgb(201, 230, 128);text-align: center;}



html:



<body>

    <div id="tu">

        <P id="info"></P>

        <img src="jiao.jpg" alt="冰棒">

        <input type="button" id="yi" value="第一张">

        <input type="button" id="er" value="第二张">

    </div>

</body>



javascript:

window.onload = function(){

var yi = document.getElementById(“yi”);

var er = document.getElementById(“er”);

var img = document.getElementsByTagName(“img”)[0];

var imgArr = [ “jiao.jpg”,“san.jpg”,“bao.jpg”,“hua.jpg”,“pei.jpg”,“tu.jpg”,“xin.jpg”,“niu.jpg”]

var index = 0 ;

var info = document.getElementById(“info”);



    info.innerHTML = "一共" + imgArr.length + "张图片,当前第"+(index+1)+"张";

    yi.onclick = function(){

        index--;

        if(index < 0){

            index = imgArr.length - 1; 

        }

        img.src = imgArr[index];

        info.innerHTML = "一共" + imgArr.length + "张图片,当前第"+(index+1)+"张";

    }



    er.onclick = function(){

        index++;

         if(index > imgArr.length - 1){               

            index = 0; 

        }

        img.src = imgArr[index];

        info.innerHTML = "一共" + imgArr.length + "张图片,当前第"+(index+1)+"张";

    }

}


破熵而行-驱动产品增长

ui设计分享达人

本文是基于我对《破茧成蝶2》读后的观点和反思,自己的项目经历跟作者相似,也是为了更好的总结这两年对产品、对设计的心得。

本文篇幅较长,请耐心阅读。主要是总结一个完善的体系,便于大家理清自己的设计思路和自我定位。


阅读本文你可以获得什么?

一、前言——拥抱变化,破熵而行

二、产品设计师的思维转变

三、对设计师的能力模型

四、设计师该关注的数据

五、产品周期影响设计策略

六、设计师顺势而为,自我定位 



一、前言——拥抱变化,破熵而行

在人口红利、流量红利、资本红利逐渐消退的互联网下半场,从“买流量、买用户”为代表的粗放式发展进入了稳扎稳打的精细化时代,需要考虑在有限的资源及能力的基础上精打细算、量入为出,让产品可持续地发展下去。


互联网产品正在从标准化、大众化转向个性化。针对垂直领域或细分用户群体的产品越来越有市场。战略层也需要抽丝剥茧,抛去形式注重产品的本质。比如一些下沉型电商业务,红包和会员都只是一种形式,其实本质还是用户追求“性价比”有利可图,所以一旦用户的“便宜需求”难以达到,还是会引发数据的下降,这就需要大量可持续资本投入维持。见利期的变长,传统电商行业的锋芒也被新零售掩盖,投资人也不断转移更创新可收的项目。所以真正的留存是可持续发展的,且需要根据企业自己的实际情况,在战略上和运营上,有一个人无我有的本质上的创新点(核心竞争力),而非形式上的创新。

Image title


在日新月异,变化百态的互联网下半场,创业者和产品设计工作者都需要改变自己的想法,拥抱变化破熵而行,保持自己战斗力,用更科学客观的方法来提升产品价值。



二、产品设计师的思维转变

产品设计师的重要标志是“以产品为中心”的思维及觉悟,即能打破本位主义,站在产品的角度,从整个项目闭环上协同解决问题,提升产品价值。设计师的角度理解,就是打开自身格局,扩展上下游的知识,通过自己的综合能力助力于业务。在此过程中职能会有跨界,比如我会提出验证数据的方法,比如ABtest,从业务角度推设计可以通过哪些数据进行提升,然后做出不同方案进行评审,推动项目实施落地。


产品设计者可以由产品经理,UX,UI担当或转变,我更倾向是全栈的UX,通过思想认知的转变,职能界线的打破来扮演这个角色。自己也是这样努力的在转型。得益于公司的开放包容,这两年我还是能承担起这样的角色,建立组织,带领团队,通过设计来提升产品价值。对于产品设计师,第一个需要改变的就是产品设计思维。



2.1从“问题驱动”到“价值驱动”

Image title


2.2 始终贯彻精益思维


互联网寒冬,连阿里都要把钱花在刀刃上。阿里8月15日发布的财报上,虽然新零售收入水平同步增速高达134%,高于上一季度132%,成阿里本季营收增长引擎,但是阿里本财季对盒马新零售业务投入仍然十分谨慎。最近两个季度盒马开始由原先的大门店业态转向更多元、成本更低的小业态的转型期,本财季内净增门店仅为15家。所以需要我们始终贯穿精益思维去做产品。


精益思想(Lean Thinking)源于20世纪80年代日本丰田发明的精益生产(Lean Production)方式,精益生产方式造成日本汽车的质量与成本优势,曾经压得美国汽车抬不起头。世界汽车工业重心已向日本倾斜。精益思想的核心就是(消除浪费)以越来越少的投入——较少的人力、较少的设备、较短的时间和较小的场地创造出尽可能多的价值;同时也越来越接近用户,提供他们确实要的东西。


那么要做到产品上的精益思维,一方面要贯彻“以提升产品价值为目标”并用数据验证;另一方面建议先用较小成本在小渠道验证,然后在扩大投入。

Image title



整个产品团队,不管是产品负责人、产品经理、设计、运营、开发都需要紧密联合在一起,为提升产品价值而努力。为什么这么说,其实本质上大家都是为了业务好,但是每个人却扛着不一样的KPI,产品经理有业务指标,运营有运营指标,设计师也有自己的设计价值观。如果大家都只为了自己,产品和运营会唯业务指标做导向,典型的就是引入大量无法留存的流量,耗费资源,最终对整个产品长期发展并没有太多价值。对设计师来说,我见过很多设计都很有偏向性,要么就是一味追求好看,感觉业务挡了自己发挥才能,要么一味分析竞品和交互,却给不出有效、有价值的解决方案。其实都不是站在产品价值上看问题,更希望是自己能交出一份满意的答卷。我自己也在一个电商摸索期犯过类似错误,无法忍受一个没有细节的产品,过多追求设计质量,而其实产品初期,负责人只想着能快速迭代,找到活下去的出路。



2.3以始为终打造数据闭环 


数据闭环就是从你的产品价值目标来拆分你的量化目标,通过设计上线等验证数据,形成闭环,然后循环优化的这个过程。需要从传统的“问题驱动”转变成“价值驱动”,因为解决问题是难以被价值量化的,整个业务发展过程中也会出现很多产品问题需要被优化,我们把“提升产品价值”作为目标就形成了“以终为始”的数据闭环。其实现在大部分企业都是以目标驱动业务的,拆分目标,变成颗粒度目标数据再进行逐步达成,这个过程不是说不去“发现问题-解决问题”,而是需要知道工作要务,“重要紧急”的先做,“重要不紧急”的长期计划实行,至于用户体验上的东西也是要有节奏的去优化。

Image title




三、对设计师的能力模型


对设计师的能力模型一直在提出不同的更高要求,无论是哪个大咖提出来的理论似乎都是非常的正确和所需要的,导致很多设计师的恐慌,我是不是要被淘汰了。

Image title

Image title


其实还是要抓住本质,因人而异看待。设计的能力分布模型,大概分为 “I”型 、“一”型、“T”型。


“I”型为单一型,传统对设计师的定义就是单一的,领域分的比较细。单一型主要看深度,深度达到一定程度可以成为专家,但是如果浅薄又单一很容易被淘汰。


“一”型为广博型,广博型最忌讳的就是成为什么都会却什么都不精的“万金油”,看似什么都懂,结果做起来什么都废。


新型模式“T”型,“T”型既有较深的专业知识,又有广博的知识面,这类是集深与博于一身的人才,也是市面上最有市场的一类。


综合性人才都是需要一个长期由深度到广度,再由广度到深度循环提升的过程,在此过程中也很容易迷失,跟“I”型对比,无法通过有限的时间都提升上去,那么需要掌握一定的方法,认识自我逐步提高。

Image title



3.1、强大扎实的专业能力——知行合一 广而不范


为什么强调专业能力,《破2》里面提到,思维是1,技能是0,话是没有错,但是80%以上的设计师还是靠技能在吃饭。有的东西你想得再好无法落地,也是无济于事。所以一个专业合格的设计师必须有强大扎实的专业能力,当然思维是内驱力,如果你的专业很出色,估计内核也不会差。


首先要有一个专业优势判断,然后强化自己的优势,再根据横向模型去扩展对自己工作最优帮助的继续加强,做到广而不范。比如你是一个ui设计师,你要保证自己的视觉能力,然后去扩展交互能力,其次再去强化动效,体验等等。再比如你是一个交互设计要保证自己对交互的精通,然后提高用研、数分能力,再去扩展其他能力。还有要做到知行合一,其实大部分我们都在通过不同的学习提升自己的能力,但是要把理论性,缥缈性的知识概念落实到自己的工作中去,努力去实践,再复盘总结不断提升自己的实操能力。比如你学了插画,你的项目上能不能用上;你竞品分析了更好的体验,能不要也变相用到自己的项目里;你新学了一些分析原理,能不能用同样的思维来分析自己的项目等等。



3.2、保障基础软实力 —— 一颗强大正能量的心


心力、脑力、体力,都要保障,尤其是互联网年轻化后,体力也非常重要,京东就直接把不能加班的员工全开了,多么痛的领悟。那么对于产品设计师其实更关键的是心力和脑力,越是高阶设计师,思维能力、洞察能力越是重要。无论是ui、ue、还是产品设计师我觉得都需要有强大的自我驱动能力,打破本位主义,不断扩展自己的专业素质,才能更好的融合于业务。阿里提出:人才是聪明的,的确很多人忽略了先天的差距,事实上同样的努力,不一样的天分,总还是有区别的,有的人适合做小兵,有的人适合做将军,但是你可以保证的是心态,心态里我总结了两个我觉得非常重要的点,一个就是皮实、一个就是积极,就是有一颗强大而正能量的心!



3.3、先让自己变得足够优秀再考虑做管理


对于走技能线还是走管理岗,很多人会想的很多。其实先让自己变得足够优秀,不断提升,一切自然水到渠成。领导者或许需要天分,管理者是每个人都可以成为的,且有一些理论和工具可以支撑的,所以很多团队会内部提拔,因为培养起来并不难。只要你足够优秀,还是很有希望做管理,相反过早做管理,自己的基石没打好,管理起来也会比较艰难。有兴趣的人可以去听一下喜马拉雅上的《可复制的领导力》。如果你励志要走向管理层,也可以根据阿里的纵向能力模型对号入座,不断提升,不过很多时候机遇也很重要。



四、设计师该关心的常规数据


想要驱动产品增长必须要对数据有所了解,来帮助我们产出更贴近用户行为的设计,同时需要了解数据产生的过程和基础工具。最基础的就是产品提出数据,让开发进行埋点,此过程中设计也可以提出自己想要关心的数据点。公司有后台可以直接观测数据,现在也像GrowingIO数据分析产品无需在网站或app中埋点,即可获取并分析全面、实时的用户行为数据,需要观察数据可以直接去后台关注,也可以让产品经理或者数据分析师给你拉数据。


页面浏览量(PV)

用户每1次对网站中的每个网页访问(成功访问/进入)均被记录1次。用户对同一页面的多次访问,访问量累计。在一定统计周期内用户每次刷新网页1次也被计算1次。理论上PV与来访者数量成正比,但是它不能精准决定页面的真实访问数,比如同一个IP地址通过不断的刷新页面,也可以制造出非常高的PV。


独立访客人数(UV)

访问网站的一台电脑客户端为一个访客。00:00~24:00内相同的客户端只被计算一次。使用独立用户作为统计量,可以更加精准的了解一个时间段内,实际上有多少个访问者来到了相应的页面。


用户访问次数(VV)

当用户完成浏览并退出所有页面就算完成了一次访问,再次打开浏览时,VV数+1。VV同时也是视频播放次数(Video View)的简称。


跳出率(BR)

表示用户来到网站后,没有进行操作就直接离开的比例,代表着陆页面(访客进入网站的第一个页面)是否对用户有吸引力,常用的计算方式是落地页面的访问量除以总访量。


退出率(GA )

针对网站内某一个特定的页面而言,退出率是衡量从这个页面退出网站的比例,通过一个页面的退出次数除以访问次数。退出率反映了网站对用户的吸引力,如果退出百分比很高,说明用户仅浏览了少量的页面便离开了,因此需要改善网站的内容来吸引用户,解决用户的内容诉求。


平均访问时长(AAT )

指在特定统计时间段内,浏览网站的一个页面或整个网站时,用户所停留的总时间除以该页面或整个网站的访问次数的比例。该数据是分析用户粘性的重要指标之一,也可以侧面反映出网站的用户体验。平均访问时长越短,说明网站对用户的吸引力越差。


转化率(CR )

在一个统计周期内,完成转化行为的次数占推广信息总点击次数的比率。常用的是登录注册的新流量转化率和产生实际支付的转化率。转化率是产品盈利的重要指标之一,它直接反映了产品的盈利能力。提升转化是提升产品价值的重要性指标,一般用A/Btest去检验更优方案来提升转化率。


回购率(RR)

指用户对商品或者服务的重复购买次数(回头客),是针对有购买功能的产品,回购率越高,用户粘性越高。


新增用户

既安装应用后,首次成功启动产品的用户,按照统计跨度不同分为日新增(DNU)、周新增(WNU)、月新增(MNU)。新增用户量指标主要是衡量营销推广渠道效果的最基础指标。新增用户占活跃用户的比例也可以用来用于衡量产品健康程度。如果某产品新用户占比过高,那说明该产品的活跃是靠推广得来,这种情况非常有必要关注,尤其是新增用户的留存率情况,这种情况留存率低对产品来说也非常危险,视为不可持续发展的流量。


活跃用户

既在特定的统计周期内,成功启动过产品的用户。除此之外,我们还可以将活跃用户定义为某统计周期内操作过产品核心功能的用户(按照设备去重统计)。

活跃用户是衡量产品用户规模的重要指标,和新增用户相辅相成。


DAU(日活):某个自然日内成功启动过应用的用户,该日内同一个设备多次启动只记一个活跃用户;

WAU(周活):某个自然周内成功启动过应用的用户,该周内同一个设备多次启动只记一个活跃用户。这个指标是为了查看用户的类型结构,如轻度用户、中度用户、重度用户等;

MAU(月活):某个自然月内成功启动过应用的用户,该月内同一个设备多次启动只记一个活跃用户。这个指标一般用来衡量被服务的用户粘性以及服务的衰退周期。


留存率

留存率是验证用户粘性的关键指标,既在某一统计时段内的新增用户数中再经过一段时间后仍启动该应用的用户比例(留存率=留存用户/新增用户*100%)。统计留存用户的颗粒度有:
自然日:包括1天后、2天后、3天后、4天后、5天后、6天后、7天后、14天后和30天后
自然周:包括1周后、2周后、3周后、4周后、5周后、6周后、7周后、8周后、9周后......
自然月:包括1月后、2月后、3月后、4月后、5月后、6月后、7月后、8月后、9月后......
自然日的留存中主要关注(次日留存、7日留存、30日留存并观察留存率的衰减程度。一般来说,留存率低于20%会是一个比较危险的信号。)

日留存率:快速判断App粘性
日留存率:可以很快的帮助我们判断 App 的粘性到底强不强。我们可以通过日留存率的数值来判断一个 App 的质量,通常这个数字如果达到了 40% 就表示产品非常优秀了。我们可以结合产品的新手引导设计和新用户转化路径来分析用户的流失原因,通过不断的修改和调整来降低用户流失,提升次日留存率。

周留存率:判断App用户忠诚度
周留存率:我们可以通过周留存率来判断一个用户的忠诚度,在一周的时间段里,用户通常会经历一个完整的使用和体验周期,如果在这个阶段用户能够留下来,就有可能成为忠诚度较高的用户。

月留存率:了解App版本迭代效果
月留存率:通常移动 App 的迭代周期为 2 - 4 周一个版本,所以月留存率是能够反映出一个版本的用户留存情况,一个版本的更新,总是会或多或少的影响用户的体验,所以通过比较月留存率能够判断出每个版本更新是否对用户有影响。


流失率

指那些曾经使用过产品或服务,由于各种原因不再使用产品或服务的用户。用户流失率=某段时间内不再启动应用的用户/某段时间内总计的用户量。流失率和留存率有紧密关联,流失率高既留存率低,但活跃度不一定高,因此需要综合分析。也是重点关注次日、7日、30日的流失率。对于流失用户的界定依照产品服务的不同而标准不同。社交类产品用户几乎每天登录查看,可能用户未登录超过1个月,我们就可以认为已经流失了。而电商类产品用户可能3个月未登录或者半年内没有任何购买行为可以被认定是流失了,所以不是每个产品都有固定的流失期限,而是根据产品属性而判断。


一次性用户

既新增日后再也没有启动过应用的用户。一次性用户是关键的营销指标,和判断无效用户的标准,从中把目标用户过滤出来。一般划定的界限是至少超过7天时间才能够定义是否是一次性用户。


使用时长

既统计时间段内,某个设备从启动应用到结束使用的总计时长。一般按照人均使用时长、次均使用时长、单次使用时长进行分析,衡量用户产品着陆的粘性,也是衡量活跃度,产品质量的参考依据。


启动次数

既统计时间段内,用户打开应用的次数。重点关注人均启动次数,结合使用时长可进行分析。用户主动关闭应用或应用进入后台超过30s,再返回或打开应用时,则统计为两次启动,启动次数主要看待频数分布情况。


使用间隔

既用户上次使用应用的时间与再次使用时间的时间差。使用频数分布,观察应用对于用户的粘性,以及运营内容的深度。虽然是使用间隔,但是通过计算同一设备,先后两次启动的时间差,来完成使用间隔统计,充分考虑应用周期性和碎片化使用的特征。


常规数据基本就这些,值得思考的是不同类型的产品,定义每个数据的具体量是不同的,而且产品周期中的不同阶段关注的主要数据指标也会有不同侧重点。



五、产品周期影响设计策略 


产品阶段就是产品生命周期,可分为探索期、成长期、成熟期、衰退期,每个阶段的设计策略和工作权重都有所不同。虽然每个阶段侧重点不同,凡是还是需要辩证看待结合实践,比如大厂的产品初期起点较高,有大流量的引流和背后大数据支撑,所以各种方式都没有太大的限制,根据业务,资源不同来根据产品用方法。

Image title


5.1探索期(产品初创期)


目标:掌控产品方向(活下去)

关注:用户价值

用户:假设用户

策略:最小成本验证产品方向

方法:假设的用户画像、产品故事地图、设计冲刺法、访谈、用户研究(定性分析)

关注数据指标:推荐意愿/新增用户数/满意度

品牌:不急于建立

Image title



5.1.1、通过访谈、调研,初步建立用户画像,抽象假象用户,提炼关键点。


用户画像是在大数据时代背景下,用户信息充斥在网络中,将用户的每个具体信息抽象成标签,利用这些标签将用户形象具体化,从而为用户提供有针对性的服务。


产品摸索期我所定义的目标用户其实并不准确,而是假象用户,此阶段的概念用户一直随着产品方向的改变而改变,所以无法确立明确针对性的用户画像信息,但是我们应该先确定一个大概的目标用户定性的去分析,区分用户角色,挖掘不同角色的痛点,然后找到解决问题的切入点。

Image title


5.1.2、利用用户诊断法建立产品假设,并进行价值评估,明确产品方向。

Image title


5.1.3、利用用户故事地图筛选核心任务及对应功能


用户故事地图可以用小会议的形式展开,就是让所有参与者一起用便签,一张一个动作,从左至右按照时间线,描绘用户在产品使用场景下所发生的所有用户行为。同一时间发生的,就写在同一位置的下方;出现同一场景不同可能的动作时,可能会形成不同的分支动作;直到重回主线或者结束支线。最后关键还是总结用户痛点和产品核心的功能点。

Image title

Image title



5.1.4、贯穿最小成本原则,最小成本试错——MVP和设计冲刺法


最小可行产品(MVP)是指可以产生预期成果的最小产品发布,对于迭代产品来说,又可以讲最小可行方案:最小可行方案是指可以产生预期成果的最小发布方案。


设计冲刺法的本质理念跟MVP还是一致的,只不过所用成本更小。设计冲刺法特点:参与人员较少且有最终决策权;闭关冲刺使用白板随时记录;适用于风险高、时间紧、起步难的情况。


MVP是最小可行方案进行发布验证,而设计冲刺是更短时间产生一个头脑风暴的真实原型,进行真人测试,这个过程并没有真正设计一款产品,而是通过设计方式做了一次早起用户调研,并获得相对有验证性的结果,避免真实上线效果不好对用户造成的负面影响。


其实市面上大部分还是用的MVP,因为实际上用设计冲刺,一个是对设计人员的要求较高,二是验证的结果由于测试范围的限制不一定与市场反应一致。与做一个小产品来说,现在更流行保险的办法可以做一个小程序,或者几个小程序进行方案对比,大流量下好乘凉,小程序的开发成本,用户引入成本更低。



5.1.5、定性为主,不断试错中掌控产品方向


船小才好调头,对于产品来说如果本身战略层出现问题,后续投入越多的资本越难收场,用户量不上不下,用户粘性不高,结果资金不够了,用之鸡肋弃之可惜,再转方向还是比较困难。尤其是用户对产品建立一定认知后,重新调整大方向,基本等于刷新用户流。



5.2成长期(产品高速增长期)


目标:巩固差异化的产品定位(活得好)

关注:产品核心竞争力

用户:目标用户

策略:大胆创新巩固差异化的产品定位

方法:提炼用户画像不断校验、用户体验地图、设计接力法(定性+定量)

关注数据指标:新增用户数/留存率/复购率/活跃度

品牌:建立有创意且能落地的品牌,加深用户认知,占领用户心智

Image title


5.2.1、用户校验,确立产品定位


产品成长期用户大量涌尽,掌握一定数据和掌控产品方向后可以通过数据分析或用户调研,来看实际用户特征和之前假设的用户人群特征是否符合。集中精力服务好最重要的用户群体,定性挖掘、定量验证的思路去完成用户画像。


可针对目标用户进行调研和深度访谈,从用户选择产品最关键因素提炼产品目前的核心吸引点。用户的关心点也要跟产品本身的当前定位做对比,看用户接受到的点是否是产品让他们感受到的点,感受不到又是什么原因,不断提炼核心竞争点的优势。

Image title


成长期需要确认产品的定位,就是差异化的产品方向,即差异化的目标用户群体(价值排序)、差异化的产品及服务(竞争优势)、差异化的产品价值(核心优势)。


价值排序:通过了解用户特征,明确用户分类及相关利益群体,然后明确把谁放在第一位。在实际产品设计过程中,我们也可以用价值排序,来设计产品功能和交互体验,比如平台收费是针对买方还是卖方。


竞争策略:避实就虚地找到竞争对手的盲区或自己的优势所在,为用户提供差异化服务。竞争策略主要依赖高层的洞见和判断,如果你出产品和竞争对手没有本质差异,那就考虑是否可以服务与不同种类的人群或者能提供不一样的价值。比如同样是做电商,你的质量、价格、物流、种类是不是有优势。



5.2.2、确立增长指标


增长指标是对应于产品差异化定位的可量化指标。增长指标要符合:可成长性,客观性,有方向性。避免主观,虚荣的指标,最常见的就是过分关注获客拉新指标,留存不足,及前后导向不一致的情况。至于用户满意度、任务完成度等主观的体验指标可以作为参考,但是不能作为最终的增长指标。核心关注点是转化、留存、复购、活跃度等指标,既侧面体现了良好的用户体验,增加了用户与产品粘性,让产品长期可持续发展。



5.2.3、利用用户体验地图(E-Experience Map),同理心地图,结合增长指标大胆提出假设,排优先级,并根据开发成本等因素通过四象限原则,选择最小成本提升指标   


用户故事地图、用户体验地图、同理心地图的区别:用户故事地图强调用户使用产品/服务的任务流程,用它来筛选当前最重要的任务及对应功能,以完成最小可行产品设计;用户体验地图不仅包括任务流程,还包括与之对应的体验问题,更关注用户的体验情绪,从而找到提升体验的机会点;同理心地图帮助我们在每个不同场景下与用户换位思考、打开思路,挖掘用户选择决定的深层动机。在实际使用场合没有严格界线,可根据实际情况使用核心点进行分析。

Image title

Image title



5.2.4、体验升级——逐步发布验证(设计接力)

大版本迭代的优点就是一旦成功,可以大幅度拉开和竞争对手的差距,但是一旦失败,会影响业务的发展得不偿失。所以为了预防风险,大多数公司会在上线前先进行可用性测试,进行必要的线上验证再发布。通过不断分析增长指标,找选设计方向,进行模块拆分,接力发布,循环验证,提升产品价值。


先验证后发布方法:


a、A/BTest

制作两个(A/B)或多个(A/B/n)版本,在同一时间维度,分别让组成成分相同(相似)的访客群组(目标人群)随机的访问这些版本,收集各群组的用户体验数据和业务数据,最后分析、评估出最好版本,正式采用(消除UX、bug带来的影响数据),并不断迭代进入一下个A/BTest。产品成长期,中小型企业可以用局部变量测试,大型成熟产品可以重叠实验(更多、更好、更快)。

要求:1、随机抽样;2、足够的样本量。

优点:可以在同时段观测效果,受到环境影响因素一致,容易客观验证方案

缺点:需要占用开发资源,完整的一次测验需要花费时间较多


b、灰度测试

先进行一个小范围的尝试工作,然后再慢慢放量,直到这个全新的功能覆盖到所有的系统用户。比如Facebook先发布1%,慢慢推广到全部,现在普遍大厂也会用到这个方法,减少大版本试错带来的损失。灰度测试的同时可以A/Btest,在灰度测试过程中选出最佳方案,然后全部发布。

合适:用户群体较大,否则会因为流量小而导致结果不准确。


c、分时段测试

可以通过不同时段测试,对比数据。为减少对用户过多干扰和负面影响,可以先用夜间或用户量较小时段切换到新版本。

缺点:得到的是环比数据,不像ABtest对比结果明显有参考意义。而且在没有确定方向的摸索阶段,用分段测试,数据指向不明确,通常会存在数据一直不好的情况,频繁换方案, 自乱阵脚。


d、分渠道测试

渠道推广对业务支出也是占比较大,优秀的商业设计也能让渠道转化提高,从而减小获客单价。所以渠道上的设计都会做n版,优化总结,提升最终的数据。


e、新旧版本切换

新版本上线后留出”返回旧版“的入口,这样一旦用户不喜欢新版可以切换到老版本。这样可以很大程度降低风险,还可以监测不同版本数据,还给用户一个缓冲时间让用户逐渐接受新版本。

缺点:如果新版本运行效果不佳,决策者会进退两难,一般在较有把握,或者想教育用户新的体验会局部用这个方法。



5.2.5、寻求差异,扩大竞争优势


A、疯狂联想法

a、横向联想

结合产品定位,先得出核心关键词,再在核心关键词的基础上继续发散。比如一个男士护肤品电商网站,核心关键词是:垂直、B2C、男用户多、护肤品等,可以根据这些关键词找到合适的参考。值得注意的是关键词的选择也可以根据你需要的提升的核心价值点去联想。

Image title


b、纵向联想

纵向联想是从一个关键词出发,纵向不断延展出新的关键词,并找到对应竞品。比如保健品有一个重要的特征就是注重功效,我们可以想到具有同种特征的护肤品。

关于联想,在头脑风暴中并没有特备严格的步骤方法规定,可以根据自己的认知由近至远拓展。思维跟横向纵向也是类似,可以先参考最典型接近的,再利用共同关键特征来扩散,也可以利用不同组合的关键词重新找到相应的竞品。最后根据四象限原则,把相关度高,体验好的,更有参考价值的竞品拿来精细分析。

Image title


B、竞品对比分析法

通过联想发我们也能联想出不同维度的竞品,这师我们需要考虑竞品哪些部分类似可以参考的,哪些部分不同需要注意的,但同时也可以考虑借鉴不同部分的优势转化成自己的优势。比如最早弹幕只出现在视频上,抓住弹幕可以活跃气氛,满足观众发表评论和观看时时评论达到的心里共鸣,增加用户之间的互动性,从而提高用户粘性的核心点后,弹幕也出现在直播、音频、新闻,甚至是炒股软件上。

Image title



5.2.6、做有创意且能落地的品牌设计


品牌的核心点就是让人“记住”,最好能找到目标用户心智中空缺的领域,在这个垂直领域占领优势位置,所以品牌强调差异化。比如一想到打车就想到滴滴,一想到购物就想到万能的淘宝,一遇到问题就上百度。


传统的方法:了解业务——发散关键词——情绪版——视觉方案

精益方法:内外调研——语言钉——个性关键词——视觉锤(快速落地)


成长期的品牌建设更需要突出创新性,让人眼前一亮,记忆犹新。这里展示展示了御膳房网站的品牌三元法示例,御膳房的风格的确做到了主题感强烈,让人眼前一亮,不过个人认为作为科技网站,还是略显了花哨,安全感不足。品牌三元法是也是通过对产品的了解,分别从理性业务层和感性业务层出发,延伸个性创造层,记录关键词展开设计,其本质还是围绕业务拓展价值。成熟的品牌设计者,不仅要从业务出发,更要考虑不同场景的品牌应用,打造统一有个性的全方位品牌。

Image title


5.3成熟期(产品稳定期)


目标:提升产品价值(赚的多)

关注:商业变现

用户:活跃用户

策略:科学严谨提升商业价值

方法:用户体验地图、设计跨栏法(定量为主)

关注数据指标:活跃度/流失率/营收/成本率/现金流

品牌:扩大品牌影响力和品牌价值

Image title


5.3.1、用户分层,寻找核心价值用户


a、核心价值用户是留存用户中最活跃的部分

b、找到核心价值的用户特征


通过RFM模型来筛选核心价值用户

R=Recency最近一次消费

F=Frequency消费频率

M=Monetary消费金额

(RFM,1代表高,0代表低)

(111)重要价值客户:最近消费时间较近、消费频次和消费金额都高,典型的核心价值用户,高留存、高活跃度

(011)重要保持客户:最近消费时间较远,但是消费频次和金额都很高,说明这是一段时间没来的忠实客户,需要与他保持联系,召回

(101)重要发展客户:最近消费时间近、消费金额高,但是频次不高,忠诚度不高,很有潜力的用户,必须重点发展

(001)重要挽留客户:最近消费时间较远、消费频次不高,但消费金额高的,可能是将要流失或者已经流失的用户,应当采用措施挽留


一般公司都会有利用RFM来观测核心用户,针对不同类型来做不同的措施,但是所有数据的利用率都跟产品客观成长度有挂钩,成长期可能还不是那么细分,成熟期就会更精细的分析。最简单粗暴的就是看看最近一次消费,超过多少天就短信消息召回给个优惠券之类的。


c、总结核心规律,改进产品,调整运营策略

找到核心价值的用户特征后,需要探测他们的行为模式与贡献的规律,从而激励更多用户贡献更多价值。比如喜马拉雅,找到订阅节目的用户明显留存度更高,用户活跃度也高于随便听听的用户的规律后,在产品设计时会把订阅放在显眼的位置,并且在首页把用户感兴趣的模块放在优先的位置来提升订阅度。

Image title



5.3.2、商业价值提升


a、以科学创新为代表的产品核心竞争力:数据和技术驱动一切,科技提升效率。

b、用户价值:用户价值是商业变现的基础,没有人会在没有用户转化的平台上投入资金。

c、商业变现:用户付费,广告收入,与用户体验合理价值平衡。


在商业变现阶段,除了要着眼于如何更的赚到钱,也需要平衡用户体验,且不断提高产品本身的价值。百度在成为巨头后,百度贴吧过多不相关的推送导致用户粘性急剧下降,魏则西事件等负面消息,再到陆奇离职,目前市值缩水至365.38亿,被拼多多赶超。而微信和抖音这方面做的较为出色。微信是迫不得已不愿打扰用户,所以广告频率一直不高,广告质量也有所保障,会根据用户的喜好推荐广告。抖音是沉浸式的广告体验,一不留神就进入了广告的坑,而且广告的形式与抖音原生用户的不谋而合,有些有创意的网红视频用户的接受度也很高,从而会极大的提高转化,对用户体验的影响也较少。



5.3.3、增值假设——围绕目标增长(量化设计师的价值)


设计策略:稳定、规范、统一、科学严谨


a、拆分变量科学测试

到了成熟期,设计师在修改设计方案的时候不是改的越多越好,有的时候一个模块的重构,一个按钮的颜色变化都能影响数据转化,所以需要通过科学的方式,调整到合适的颗粒度去测试。  

Image title


b、把AB测试作为一项基本制度

如果想要验证设计效果,那么可以在保持功能不变的情况下,只看设计方案的区别,这样就可以有效的量化设计。


2018 年,中国移动互联网用户增长放缓,上半年仅增长 2 千万。但是头条系却异军突起,超过百度系、阿里系稳居总使用时长第 2 名。头条系的崛起有许多的原因,强大的数据监控系统,成熟的增长引擎,上百组同时进行的AB测试等等都在帮助产品经理和运营们找到最优的方案。


c、用户增长地图

用户增长地图是借用AARRR概念作为骨架的展开的,通过AARRR模型针对没一步提出增值假设,以提升总体价值指标。

Image title


5.3.4、提高整体效率:通过DPL(Design Pattern Library)组件库批量优化;科技力量-人工智能


a、根据长期积累下来的AB测试结果,沉淀规范后,把这些规范内容快速复制到若干条产品线上。从产品周期来说,摸索期需要建立一定的视觉规范,但不合适做细致化的组件,等业务慢慢稳定下来,不会有大方向的改变后,需要慢慢建立细致的组件库,以方便团队合作。每个业务也有其特殊性,to B的业务一般建立组件库会比较早,模式化的东西较多,针对不同的B端也会有定制化的内容,DPL可以大大提高整个业务的效率。

Image title



b、通过智能科技的力量来提升整体的效率。比如阿里的千人千面,通过消费者偏好进行个性化投放,鲁班系统对banner进行简单的合成,大大提高大促期间海报生成的效率。



5.3.5、打造统一的全业务线品牌设计


a、形成统一且独特的品牌印记

成熟期面对繁多支线,先对内树立统一的品牌形象;主品牌与产品调性统一;线上线下风格的统一。


b、品牌印记提取与深化

品牌趋势都是化繁为简,比如苹果、奔驰的logo就越来越简单,利于大众记忆,也利于线下拓展。

提取出logo基因去强调品牌作为拓展延伸,比如天猫和考拉的吉祥物头部图形的简化应用,都比较简约,易记,易拓展


C、成熟期的品牌也不是一成不变的

成熟期,产品在市场中已经有了稳固位置,品牌不宜过度设计,而需要采取保守、稳重、扩展性强的风格。品牌的更新升级,一方面顺应企业的战略方向的改变,一方面顺应整个设计前瞻潮流。比如美团变黄的品牌升级,是为了更好的从外卖这个触点深入用户心智,而OPPO ,vivo等品牌升级感觉更美有特色,其实也是顺应国际化的设计趋势,更有文字辨识度,更国际化。

Image title



5.4衰退期

每个产品都有一个生命周期,这是受市场因素导致的,此时用户会逐渐流失,既被其它新产品的体验模式所吸引,所以这时应该更关注用户流失后使用的产品,分析竞品的商业模式和功能,同时监测流失速度,需尽快拓展产品边界,寻找新的切入点。不过好的产品都是在不断优化,迎合新时代的需求,不断扩大自己的影响力和产品价值。之前文章我也写过关于微信的未雨绸缪,不断优化。微信的用户粘性强大,谁也不好说他能再打几年,像抖音这种迅速崛起的产品是否是现象级的昙花一现,也要看它是否能与时俱进。



六、设计师顺势而为,自我定位

一般来说小公司的大部分项目处于探索期和成长期,而大公司的项目很多处于成熟期,也有一些孵化探索的项目。处于探索期的项目,需要大胆创新同时,有可能变化极快,无法冷静下来根据数据用不同设计方式达成增长目标,我就经历过一个首页一星期全新大改版n次的惨痛经历。反观大公司很多流程复杂,验证方式系统完善,有些设计师感觉没有用武之地,不能施展才华。


根据不同阶段采取适合自己的设计方法,驱动产品提高设计价值,切勿漫无目标、抱怨环境,浪费时间。


如果你思维极其颠覆爱挑战可以选择从0到1的新行业;如果你喜欢创新可以选择成长型的行业及公司,或是成熟公司里的成长型项目;如果你追求科学、严谨、,那么可以选择成熟型的公司、项目。

转自-UI中国

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

详解交易型电商/内容型电商中的消费者行为差异

资深UI设计者

本文列举了交易型电商与内容型电商的对比,以及他们的消费者交易行为的四大区别。

No1  :单独评估vs联合评估

消费者看到一个产品的时候,有两种典型场景:

在内容电商(比如看到新媒体文章推荐)时,用户一般处于单独评估状态。

比如顾爷发过一个软文卖“电表箱挂画”——家里电表箱很丑、不美观,用一副画把它遮住,显得家里美观又有逼格。

当看到这个商品推荐广告的时候,你就进入了“单独评估”状态,只比较眼前的画以及你的现状(没有电表画)。

这个时候你在意的是产品本身好不好,带给你的感觉怎么样,以及价格能不能接受。

很可能的结果是,你看到这幅画200多块钱,也不太贵,所以就买了。

而如果你不是在阅读顾爷公众号的时候看到商品,而是进入淘宝、京东这种交易型电商,心理就不一样了。

在交易型电商中,用户一般处于“联合评估”状态。

比如淘宝搜“电表箱挂画”,你看到的页面是这样的:

这个时候,你进入了“联合评估”状态,你主要的比较点不再是“电表箱挂画”和你的现状(没有电表画),而是众多的电表箱挂画中哪个最好。

如果你仔细盯着上面的淘宝图看,我想你此时的消费者心理已经发生了这些变化:想要看看不同价位的画之间到底有什么区别。

材质?大小?印染工艺?谁画的?急于寻找一些让自己感觉到熟悉的信息。

比如扫一眼看看哪个品牌是你听过的(即使是华为牌的画,此时都更能抓你的眼球)。

赶紧比较哪个店销量大、好评多(咦?刚刚看到顾爷的,怎么不这么关心销量信息?)

开始在意价格,并且重新思考买这个画到底值不值。

然后,你可能不会买电表箱挂画了,甚至会觉得买一幅这样的画很多余,还不如买一箱牛奶补补身体。

表面上看,一样的产品,你仅仅切换了评估方式(单独评估VS联合评估),你选择产品的标准却产生了巨大的变化。

而就像我们前面说的,为了“在竞争中存活”,你不得不了解,“决定用户选择”的因素,到底产生了什么改变:

NO2:感性线索vs理性线索

联合评估环境下,消费者更加注重容易对比的理性线索,比如材质、大小、印染工艺等,这是因为联合评估的时候,我们看的是选择项之间的不同,而不是选择项和现状之间的不同。

而在单独评估的时候,消费者会更加容易受到感性线索的影响,大脑进入的不是“计算模式”而是“感觉模式”,会更容易感觉到增加一个画带来的生活改变、这幅画整体的设计感、流露出的艺术气息等。

所以,如果你是在参数上占优的产品,比如小米或乐视的手机,进入联合评估会非常有利,因为用户非常在意跑分。

如果你是在参数以外的体验上占优的产品,比如设计精美和有情怀的手机,进入单独评估会比较有利,因为你的优势无法被直接计算,难以在联合评估中占优。

有研究发现,假设有两款同等价格的冰激凌,一款是满满地装在小杯子里,总共50毫升;另一款是在200毫升的杯子里装了半满,相当于100毫升。

看到两款冰激凌,消费者却又会选择半满但是量多的冰激凌——废话,大家又不傻,看数据明显这个给的多。

再比如,找工作的时候,如果只看到一个职业选择,大部分人会对那种工作内容激动人心、公司名让人仰慕、发展前景好的工作更满意(而不是单纯的薪水)。

而在联合评估的时候(同时拿到很多offer),大家比较来比较去,最终更容易选择薪酬更高但自己实际上并不喜欢的工作。

因为联合评估的时候,我们更容易忽略主观感受,选择那些“数据”和“参数”上更牛的选项。

所以在淘宝上,你可以直接根据材质、大小等性价比选择一个画,即使这个画买回去后你并没有像买顾爷的画那样惊喜。

这也意味着,在交易型电商环境下,拼参数、拼数据的产品容易获胜,而在设计感、原创性上占优的产品,难以赢得顾客选择。

而在内容型电商中,我们是单独评估,这时候设计师原创设计带来的冲击感,可能直接让我们选择去购买。

这同样意味着,在交易型电商中,我们更容易受到销量领先、知名品牌等信息的影响,因为这也容易比较。

而在内容型电商中,我们则直接感觉对这个产品喜欢不喜欢。

NO3:高端vs低端

  • 联合评估状态下,我们会进入“计算模式”,更加注重价格信息(因为容易比较),所以低价品的销售会非常好。
  • 单独评估状态下,我们会更加注重主观感受,更有可能忽略成本,放纵一下买个自己喜欢的,所以高价品、享乐品的销售会非常好。

之前我遇到一个自媒体卖产品的客户,同样的产品(高端有设计感的杯子)推送给同样的粉丝,一个用淘宝平台,一个直接用微信嵌入的电商平台,结果后者转化率高了十几倍。

其实一个很重要的原因就是:淘宝本质上属于交易型电商,会强迫所有消费者自动进入联合评估的状态。

在这种状态下,用户会更加在意成本信息,价格敏感性增强,从而导致更少人选择高端产品、享乐产品。

所以高端品牌(比如LV)在线下一定是用专卖店,而不会进入卖场,因为后者是联合评估。

总结

在内容电商环境下,更多人会在单独评估状态下购物,出现这些变化:

  • 性价比的作用性降低,而感性因素的影响会升高(比如设计感、悠久历史、情怀、故事等)。
  • 低端产品的销售会降低,原来很难卖出去的高端产品、享乐型产品会更容易卖。

NO4: 主动搜索vs被动搜索

如果在淘宝、京东购物,此时你的心理状态经常是:我要买东西。

你处于“购物”(shopping)心态中,大脑中经常装着某个潜在的任务——比如要看看有没有好看的衣服或者想买一箱牛奶存放到冰箱。

这个时候,我们就说你处于“主动搜寻”的心理,你会对将来可能会购买的产品信息更加敏感,而对无关信息不那么敏感。

而在内容电商环境中,你本身正在专心看网红的直播或者某个自媒体的内容,这个时候突然看到有个产品信息(比如讲健康的播主,推荐了新型智能牙刷),此时,我们说你处于“被动接受”的心理。

这有什么区别呢?

研究发现,在主动搜寻的心理中,我们会更加关心直接与任务相关的信息,而对与任务无关的信息减少关心。

比如你想挑一款面霜,会在大量的面霜相关的商品中进行比较,对面霜相关的信息非常敏感。

而如果此时偶尔看到有个叫做“面部喷剂”的新型产品,你可能压根不会关心(因为你正在找面霜),即使它也可以帮助你改善和保养皮肤。

(ps:这个产品是我编的,用来制造未知感,实际上不存在这个产品)

所以在交易型电商中,各种新奇、未知的产品,其实并不好卖。

有个知名的“看不见的大猩猩”心理实验证明了这一点。

心理学家召集一些志愿者,给他们布置任务:数一下在接下来的视频中,球员一共传了多少次球。

然后在视频一半的时候,有个人穿着大猩猩的衣服进场并且做了欢呼的动作。

实验结束,心理学家问志愿者:球员一共传了多少次球?大部分人答案都对了。

但是接着问:你们有看到一个大猩猩吗?结果超过半数的人声称没有看到大猩猩。

这是因为看视频的时候,大部分人聚焦于“数传球”这个任务中,从而自动忽略了与任务无关的信息(大猩猩)。

这也导致了用户在京东选购面霜的时候,可能更容易关注面霜本身,而不是主动好奇地去寻找除了面霜还有什么新型产品可以替代。

而如果是在内容型电商,用户事先没有觉得要买面霜,而是在看一档教你如何保养面部的节目,就更容易接受一种新型的护理面部的方式(比如XX面部喷剂)。

总结

内容型电商,比交易型电商更适合销售新奇产品。

文章来源:人人都是产品经理

日历

链接

个人资料

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

存档