首页

如何让界面任务流程更清晰 ？向导式设计了解下

涛涛

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

向导式设计属于交互设计的常识，包括步骤条设计，引导标签等。本文从向导式设计的作用、使用场景、设计类型、需要注意的问题等，给你带来全面的基础科普。

一、向导式设计是什么？

软件界面设计中的「向导式界面」这个术语源自英语中的「Wizard」一词。意思为「男巫、奇才」的意思；延伸意为「向导」。向导，顾名思义，就是能带领或指引别人到达目的地的人。在实际使用中，这种交互方式的确像一个向导一样，一步步地引领用户向前，把复杂的任务进行拆解并有步骤地完成。

向导式设计也是流程设计的一种方式，这种方式通常目的性明确。在很多商业领域使用非常广泛，比如购物，酒店预订，银行业务等等，尤其适合新用户第一次体验产品时使用，让用户对产品使用和任务快速上手，节约时间，提升效率。

二、向导式设计的主要作用

1. 引导新手操作

让新用户在最短的时间内了解产品/任务，明白如何快速上手使用。

2. 纵观信息全局

让用户操作时对整体流程可控，心里有底，可以提前预估操作/完成时间。

3. 简化操作任务

对复杂任务进行拆解，提升用户操作的效率，同时也降低出错率。

4. 较少操作决策

固定任务操作路径，节约用户思考&做操作决策时间，快速完成任务。

三、向导式设计的使用场景

一般情况下，标准向导步骤条的使用场景为：2-5 步比较合适。< 2 步，> 10步，使用是不合适的。因为 < 2 步没必要；> 10 步太夸张，会吓到用户，本能认为你的产品使用过于繁琐，拒绝尝试和使用。

四、向导式设计的类型

  • 手风琴向导
  • 标准向导
  • 横向标准向导
  • 纵向标准向导
  • 弹框向导
  • Tab 栏向导
  • 标签向导

五、向导设计类型案例场景分析

1. 手风琴向导

手风琴向导式设计类型，一般适用于 2B 类后台业务数据较多，任务指向性相对明确，流程基本固定。例如用户帮助文档以及 Q&A 的场景； PC 端页面的注册引导；电商网站的购物支付等流程。

手风琴向导，除了可满足任务引导，步骤拆解，直观展示等作用；更主要的是能对大量的数据信息进行收纳整理，凸显信息层级的清晰度，并在收纳信息的同时节约页面空间，让页面更有节奏和呼吸感。

2. 标准向导 – 横向向导

横向标准向导也可以称为横向步骤条，这样表述大家比较容易理解。此类向导式设计是大家最常见的，也是最常规的一种横向向导的设计，主要作用是对复杂的任务进行拆解，按照固定顺序明确步骤，让用户对即将要操作的任务时间和内容有一个可控的心理预期。一般用户可以一目了然总览共有几步，目前每个步骤的状态（例如已完成/进行中/未开始），和自己当前的操作位置。

目前很多行业内的组件库对横向步骤条的 UI 设计基本都采用以下表现形式（图片来源 阿里巴巴 TXD-AISC 组件库），只是在细节上有稍许的差异。

具体差异主要表现在状态色彩的使用和上下图文的布局中。例如阿里-蚂蚁金服的 Ant Design 横向步骤条的设计图文布局为左图右文，这样设计的好处是，如果流程步骤相对较少时，文字也可作横向指向的一部分，避免页面太过空旷。同时 Ant Design 对步骤条的使用场景做了更多细分，除了简单的步骤条，还有迷你版和带图标的步骤条。

除了上面标准的组件库中常有的步骤条样式，还有以下的常用样式，例如电商类购物和支付的场景，除了对已完成的状态进行确认显示，色块箭头的设计，向导指引性更强。

类似上一个案例的 UI 美化升级版，其实功能原理都是相通的。

除了上面相对比较简单场景的步骤条，其实在 2B 业务中还有相对比较复杂的步骤条的设计，具体对应的是复杂的业务场景，例如覆盖多产品线参与，多角色审批，包含父子步骤审批的业务场景，简单常规的标准向导式设计是不能够满足业务场景的，需要对简化版的横向向导继续深入拓展和优化。

上面两种普通常见的横向向导式步骤条，业务场景相对更偏向 2B 中后台，风格相对保守和严谨。其实网上还有很多设计感和趣味性较强的步骤条设计，UI 风格创意十足，但原理都是相通的，具体 UI 样式详解就不再赘述。可参考作者的设计板。整体资料 UI 风格如下：

3. 标准向导 – 纵向向导

纵向标准向导也可称为纵向步骤条向导，主要使用场景为内容数据较多，需要分页/板块展现的场景，B端业务使用的场景较多；纵向向导设计陈列在左侧的目的也为了能对大量数据进行快速筛选和定位，同时此类数据之间无需进行对比查看，如下图：

4. 弹出框向导

弹出框向导设计主要使用的场景为注册页/登录页/轻量任务操作页，都在弹出框内，步骤较少，能够快速完成。如下图：

5. Tab 栏向导

Tab 栏向导其实是Tab栏+步骤条元素，组建成的一个新的横向向导模式，它的主要使用场景相对来说比较灵活，可以用在登录和注册页等轻量页面场景中，也可用在有固定任务流程的详情页面中，不过一般 PC 端的详情页会采用单独的 Tab 和步骤条展示，为让信息层级更清晰明确。

6. 标签向导

标签性向导设计主要使用在移动端居多，较少标明固定的操作顺序，但是基本的操作路径有一定的秩序在，主要使用的场景是对特定事物进行快速引导定位和查找，在众多商品类目中，快速找到自己需要的。例如浏览器的搜索和电商平台的商品分类检索，还有外卖类和旅行类对食物以及景点的查找中，都常常会用到标签向导：

六、向导设计中需要注意的问题

任务流程本身并不复杂的时候，尽量不要使用，避免弄巧成拙，画蛇添足；

每一步骤都需定义清楚，明确用户当前所在的进度节点，清晰展现此刻具体步骤及状态；

颜色不要乱用，避免产生寓意分歧和过度设计，一般情况下「已完成」采用蓝色/绿色都可以，但是需标注「已完成」 icon，「进行中」为蓝色高亮，「未开始」置灰；不过也可根据品牌色做出对应调整，避免采用太多颜色，让用户感觉眼花缭乱，不知所措；

及时对状态进行追踪&反馈，避免用户不知道自己操作是否生效，混淆认知；

任何向导设计中最好是提供随时撤销的选项，让误操作有可逆场景，给任何误操作提供返回和修改的机会。

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

评论(0) 浏览(4547)

小程序----页面兼容h5标签

seo达人

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

有时候当小程序向后台拿数据是一篇html标签的文章时，把它放进小程序会发现很多标签就不兼容，如果要一个个改又很麻烦，有没有方法可以很快地兼容html标签呢？ 
有个工具可以做到：wxParse 
这里写图片描述 
下载了它的压缩包后解压，复制wxParse文件夹放到小程序pages页面里： 
这里写图片描述 
在wxml里引入，这里的路径仅供参考： 

<import src="../../../../wxParse/wxParse.wxml" /> <view> //在需要放置html文本的地方使用wxParse模板 <template is="wxParse" data="{{wxParseData:content.nodes}}" /> </view>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    •

在js里引入： 

let wxparse = require("../../../../wxParse/wxParse.js");
Page({ /**
   * 页面的初始数据
   */ data: {
      content: '' },
   onLoad: function(options) { var that = this;
     ..... /**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/ wxparse.wxParse('content', 'html', result.data.content, that);
   }
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    •

在wxss引入： 

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

评论(0) 浏览(3941)

比尔晴还烦人！用户最讨厌的三种UI设计方式

涛涛

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


阅读之前，温馨提示下，文中提到的 UI设计方式不一定有对错，如果使用得当，它们都有很大的可能性。

一、弹窗

也许你会知道这种感觉，当你打开一个新的网页，阅读到一半时，突然被一个巨大的浮层打断，要求填写电子邮箱。大多数人第一反应是关闭弹窗或关闭整个网页。

这么多网站都会使用这种方式，其用意显而易见。然而，这种方式对用户产生了非常负面的影响——中断了用户正在做的事（对用户来说重要的事）并将注意力集中在另一件事情上（对网站来说重要的事）。在你试图要求获取用户信息之前，最好等用户完成当前的事情（例如，阅读并熟悉内容）。让他们有机会选择是否做某件事情，而不是强迫他们去做。

二、无限滚动

无限滚动是指用户可以通过无限地向下滚动浏览页面大量内容。当您向下滚动页面时，它可以一直刷出新的内容。虽然听起来很好，但这种方式并不适用于所有网站，也不是 APP 的通用解决方案。

△ 图片来源：Geo Law

这种方式的缺点也是它的优势——它是没有终点的。用户访问到网页的某一个位置，他们无法记录当前浏览位置以便于稍后回到同一位置。当用户离开了网站，他们将失去之前访问的所有进度，不得不再次向下滚动页面返回到同一位置。这种方式无法确定用户的滚动位置，不仅会对用户造成烦扰或混淆，而且还会使整体用户体验变差。

2012年，Etsy 花了很多时间实现电商网站的无限滚动界面，但是却发现新界面的体验不如翻页。虽然购买数量没有什么变化，但用户参与度却下降了（人们有目的地使用搜索的次数下降）。

正如 Dmitry Fadeyev 指出：

人们会想回到搜索结果列表中查看刚才看到的内容，并与他们在列表中发现的其他内容进行比较。无限滚动不仅打破了这种对比，也使列表上下移动变得困难，尤其是当你下次回到页面，发现自己又回到了顶部，需要再次向下滚动列表并等待内容加载。在这种情况下，无限滚动界面就比翻页慢多了。

设计师在设计中加入无限滚动之前，应该权衡它的优缺点。选择取决于场景以及内容的传递方式。一般来说，无限滚动适用于像 Twitter、Instagram 这样的产品，用户在消耗无穷无尽的数据流时不会特别寻找特定的内容。

译者注：作者在《UX: Infinite Scrolling vs. Pagination》中提到无限滚动的优缺点：

1. 无限滚动的优点

用户停留的时间更长，提升用户参与度。当用户没有特定寻找的内容时，可以通过浏览海量信息找到自己喜欢的内容（如Pinterest、Facebook）。

滚动比点击操作更快更容易，分页展示每次内容更新都需要额外点击等待加载。无限滚动对于移动设备很友好，移动设备的手势控制让滚动更自然。

2. 无限滚动的缺点

影响页面性能，加载速度慢，用户无限的向下滚动，加载更多的内容，页面的性能会越来越低。

无法定位到上一次浏览的位置，需要重新不断下拉回到同一位置。

网站右侧的滚动条变得无关紧要，反映不出数据量，当你以为快要接近底部，引诱你继续向下滚动，结果更多的内容又呈现出来。

缺少页脚，用户有时候需要查看某些信息，去页脚查看发现没有。这些信息可以展示在别的地方，或者加上「加载更多」的按钮来响应用户对更多内容的需求。

结论：无限滚动适用于用户没有特定目的的原创内容网站（Twitter，Facebook）或者视觉（Pinterest，Instagram）的网站和 app，分页则适用于用户在寻找特定信息的搜索结果列表，以及用户浏览位置重要的地方。谷歌的图片用了无限滚动，相对于文本搜索，用户可以更快地浏览和操作图片，文本搜索则需要花费更长的时间。

3. 使用无限滚动的建议

  • 当你使用无限滚动时，可以保持导航栏可见，以便于快速进入其他页面。
  • 页面需要页脚时，使用「加载更多」的按钮。
  • 为特定项目增加收藏或书签，以便于保存下来。
  • 加载新内容的时候提供视觉反馈，让用户知道发生了什么。

三、推送通知

您是否注意过每天从各种应用收到的通知和提醒消息的数量？其中您真正关心的通知有多少？

每天用户都会被没用的推送轰炸，分散日常活动的注意力，并感到恼火。

恼人的推送通知是人们卸载移动应用程序的首要原因（根据调查受访者的比例为71％）。

当用户开始使用 APP 时，如果推送内容足以让用户「愿意被打断」，他们就不会那么在意收到推送消息，换句话说，这意味着推送消息必须让用户觉得足够有用和有趣。因此，为用户推送有感染力并使之愉悦的定制化内容才是关键。

推送通知是一项特权，因为用户信任你，才允许你直接向他们发送消息，你不能滥用这个特权。

为用户设计有用，相关和及时的通知非常重要。推送通知可以成为企业直接与用户沟通的强大工具，并在适当的时间和地点传递正确的信息，以促进互动。

译者注：作者在《Mobile UX Design: What Makes a Good Notification?》、《How to create effective push notifications》中提到推送通知需要注意几点：

适当的时间。尊重当地的时间，不要在用户睡眠的时候发送通知，比如国际化的 APP 针对不同的地区调整推送时间。Andrew Chen 收集了一些数据显示推送打开率在下午6点后更高，当用户参与度最高的时候，在下午6-8点时发送推送通知。

△ 图片来源：Andrew Chen和 Leanplum

限制次数。设置一个合理的推送次数，一些 APP 只要触发了与你相关的信息就会提醒你，过多的推送可能会引起用户的不适。

个性化定制不同的推送内容给不同的用户，推送对用户有价值的内容。比如根据用户的浏览历史做相关用户感兴趣的推送。

发送消息之前应该确定好目标，跟踪数据，确认推送是否达到了效果。


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

评论(0) 浏览(3438)

JS：获取驱动器的大小和可用空间

seo达人

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

亲测必须将代码放在记事本中，改成html格式，在用IE运行（必须） 




    







    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"





    "http://www.w3.org/TR/html4/loose.dtd">





    <html>





    <head>





    <title>显示指定驱动器的大小及可用空间</title>





    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">





    </head>





    <body>





    <form name="form1" method="post" action="">





    盘符：





    <input type="text" name="text1">





    &nbsp;&nbsp;&nbsp;





    <input type="button" name="Button1" value="磁盘空间" onclick="DriveSize(document.form1.text1)">





    </form>





    <script language="javascript">





    <!--





    function DriveSize(Drivename)





    {





    var fso=new ActiveXObject("Scripting.FileSystemObject");





    var s=fso.GetDrive(Drivename.value);





    if (s.IsReady)





    {





    var str,str1，AllSize=0.0;





    str="当前驱动器的名称为:"+s.DriveLetter+"\n";





    AllSize=s.TotalSize/1024/1024/1024;





    str=str+"当前驱动器的大小为:"+parseInt(AllSize*10)/10+"\n";





    AllSize=s.FreeSpace/1024/1024/1024;





    str=str+"当前驱动器的可用空间为:"+parseInt(AllSize*10)/10;





    alert(str);





    }





    else





    alert("该驱动器无效。")





    }





    //-->





    </script>





    </body>





    </html>





    运行：





    







    结果：单位为g

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


评论(0) 浏览(3209)

7个案例解析：复选框 vs 切换开关

涛涛

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

本文介绍在设计表单体验时，决定这两个控件之间的指导性原则和案例分享。

表单提供了几个可以更轻松收集用户输入的控件。设计表单时，在正确的位置使用正确的控件是一项挑战。


复选框控件有三种状态：unselected（非勾选态）、selected（勾选态）和indeterminate（未确定态）。最后一个状态代表子选项列表在父选项下分组且子选项处于勾选态和未勾选态之间的情况。


切换开关代表允许用户打开或关闭物体的物理开关，如灯的开关。


点击切换开关需要两个操作步骤：选择和执行，但复选框只有一个选项，其执行通常需要另一个控件。


在选中复选框和切换开关控件之间时，最好关注使用的环境而不是其功能。


下面是一些在设计表单体验时决定这两个控件之间的指导性原则和案例分享。



案例1：即时回复


使用切换开关时，


1. 应用设置的立即响应是无需明确操作的。


2. 设置需要打开/关闭或显示/隐藏功能才能显示结果。


3. 用户需要执行不需要审核或确认的即时操作。


Image title

如果需要即时响应的选项最好选择使用切换开关


案例2：设置确认


使用复选框时，


1. 应用设置需要在提交之前由用户确认和审核。


2. 在显示结果前，设置定义需要执行提交、确定、下一步、等应用操作。


3. 用户必须执行其他步骤才能使更改生效。


Image title

如果需要显式操作来应用设置，则首选复选框


案例3：多项选择


使用复选框时，


1. 有多个选项可供使用，用户必须从中选择一个或多个选项。


2. 逐个单击多个切换开关，每次单击后等待查看结果是需要额外的时间。


Image title

在列表中选择多个选项，复选框能提供更好的体验


案例4：不确定状态


使用复选框时，


1. 当多个子选项在父选项下分组时，需要中间选择状态。中间状态表示在列表中选择了多个子选项（但不是全部）。


Image title

使用复选框最好地显示不确定状态


案例5：清晰的视觉状态


使用复选框时，


1. 有可能与切换开关的开/关状态混淆。有时很难理解开关是显示状态还是动作。


2. 需要提供明确的勾选状态或未勾选状态。


Image title

有时切换开关不能清晰地显示它是状态还是动作


案例6：相关项目


使用复选框时，


1. 用户必须从相关项目列表中选择选项。


Image title

用复选框显示要选择列表中的相关项


使用时切换开关时，


1. 用户切换独立的功能或行为。


Image title

独立项目可使用切换开关进行选择


案例7：单选项


使用复选框时，


1. 提供单个二进制是/否选择。


2. 只有选择或取消选择一个显而易见的选项。


Image title

单个是/否选项更适用于复选框


使用切换开关时，


1. 需要单一选择，并且您希望为开/关类型的决策提供两个选项。


Image title

使用切换开关可以最好地理解单个开/关决定


结论


重要的是在表格中的正确位置提供正确的控件使其更加用户友好。由于表单有很多很长的选项，若用户必须进行额外点击才能填写信息，对用户来说会变得枯燥乏味。提供的案例和指南会帮助你决定在表单中添加控件时选择复选框还是切换开关。



参考文献


1. Control and Patterns《控制和模式》


2. When to Use a Switch or Checkbox《何时使用开关或复选框》


3. Selection Controls《选择控制》


4. UX Design: Checkbox and Toggle in Forms《UX设计：表单中的复选框和切换》

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

 

评论(0) 浏览(3903)

牢记这9个排版设计要点，领导都无话可说了（二）

涛涛


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

前几天带大家学习了《牢记这9个排版设计要点，领导都无话可说了…》，今天给大家带来排版设计要点第二弹。



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


评论(0) 浏览(3686)

人才招聘价值观：服务理念、对知识抱有渴望、摒弃自大心理、积极适应变化

蓝蓝设计的小编

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

对于快速发展的初创企业来说，人才招聘至关重要。一方面，要保证人才招聘的速度。另一方面，也要保证人才的质量。因为从长期角度来看，只要是进入公司工作的员工，就必须要顺利适应并且融入企业的文化氛围，而不是指望随着时间的推移来强迫员工去接受企业的文化。

因此，对于一家公司的领导人来说，如何能够在坚持初心的前提条件下，快速且地找到适合自家公司的人才、拓展相关的业务规模，便成了一个相当重要的问题。

Josh Reeves是SaaS薪资管理平台Gusto的联合创始人兼首席执行官，该公司专门提供薪资、福利和人力资源服务，在品牌重建之前名为ZenPayroll。秉承着对自己价值观和创业观的坚持，Reeves成功将最开始只有一间房和三个人的小团队，发展为现如今员工数量超过600人的大公司。在六年的时间里，公司的业务范围已经从当初的帕拉奥图扩大到了旧金山和丹佛。在Gusto，温暖、热情、亲切和个性，一直是自己的企业文化核心。在成长和扩张的道路上，它一直坚持自己的初心和价值理念，并没有因为高速业务增长而摒弃自己的传统。据Reeves介绍，能够取得这些成绩，公司采用的人才招聘政策起到了至关重要的作用。

在这篇文章中，Reeves分享了Gusto如何在上让原本无法拓展升级的人才招聘环节发挥出积极作用，讲述了自己独特的一套人才招聘战略，并且列举了公司在这个问题上所遵循的三大步骤，以保持自己的企业文化和最优传统。

想要公司业务拓展，首先重点关注传统

所谓传统，就是在公司业务发展过程当中形成的一些惯常做法，自然而然也就是企业文化的坚实组成部分。但乍一看，这些传统都是无法实现升级拓展的。因为通常情况下，当公司发展到某一特定规模之后，那些创始之初的传统做法就会逐渐消失。几乎不会再有人记得在刚开始那段时间，大家都如何做事、公司都如何运营。但于Reeves而言，传统就是一家公司的名片。或许它们无法继续发挥太大作用，但尝试着去保留下来，仍然是一个明智的选择。用他的话说：“如果想要让我针对传统给出自己的建议，那我会说切忌过度僵硬或过度强制。只要顺其自然地遵循日常工作中约定俗成的做法，那就已经足够。那些传统，不应该是公司刻意塑造出来的，而是自发、慢慢融入企业血液与灵魂的。通过多年来的自我坚持和自我强化，成为企业文化的一部分。简单说来，传统务必是非常真实的。其对错与否，并没有任何死板的条例与公式。每一家公司和每一支创始团队，都有着自己不同的传统和惯例。”

众所周知，在Gusto，员工不穿鞋在办公室走动，是一件十分常见的事情。在旧金山和丹佛的办公室，连访客都可以使用公司免费提供的袜子和拖鞋。而这一做法，还得追溯到公司创始阶段在帕拉奥图时的情景。Reeves解释说：“其实，无论是我，还是另外两位联合创始人，我们都是在不穿鞋的家庭环境中长大的。鉴于当时我们的办公室也是起居室，因而便形成了这样一个习惯。所以，在公司业务扩张之后，我们在旧金山有了更大的办公室。在和其他同事讨论之后，我们遵循大多数人的意愿，保留了不穿鞋工作的习惯，让大家更为放松自在地完成自己地工作。但还是那句话，这是我们从创业之初保留下来的惯常做法。换个角度想，如果当时我们刻意推出这样一个硬性规定，那么既轻松又的工作环境，可能就无法实现了。”

当然，Reeves也指出，并不是所有于创业初期形成的惯常做法，都能够在公司业务拓展的过程中得到保留。比如说，在发展早期，Gusto团队会在新员工入职之前将其详细的资料介绍发送给公司全员。虽然这确实是值得保留的传统，但随着公司员工数量的大幅增加，想要切实坚持这一点，已经变得相当困难。一般情况下，新员工的详细背景仅仅局限于其直接对接的招聘团队。不过，在公司的全员大会上，仍然会进行一个简单介绍。

对于白手起家的创业者而言，第一件需要做的事情，就是明确自己的价值观，毕竟它们会一路伴随公司的成长，指引着传统惯例的发展演变。Reeves表示：“每一家公司都会经历一个并不短暂的过程，来搞清楚自己真正需要注意的事情。因此，就我个人而言，能够给出的建议就是务必坚持自己的价值观。一家公司的成长可以有很多种不同的方式，并没有一定正确或一定错误之分。你需要做的，就只是跟随自己内心最为真实的想法，坚持公司内部最为真实的工作习惯和文化氛围。而在人才招聘的过程中，也千万不要试图用你的价值观去说服别人。在Gusto，我们也有自己的核心价值观。如果它们与某些员工无法完全契合，那并不能说是员工不合格甚至人品不好。只能说，或许他们在其他公司更能够发挥出自己的优势。这也就是在招聘面试过程中，将公司核心价值观呈现给应聘者，并且借助相关环节反映和强化这些价值观的原因所在。要知道，人才招聘和公司价值观体现，都有着相当重要的地位。”

利用自家公司的惯用招聘策略

Gusto向来以自己的人才招聘理念和策略为豪，它能够很好地将自己的价值观和传统融入到整个应聘面试过程中去。Reeves表示：“我们的指导理念就是，所谓人才招聘，其实就是一个寻找联盟和形成一致的过程。也就是说，公司不需要强制说服应聘者加入公司，而应聘者也不需要强制说服公司雇用自己。与之相反，双方需要达到一致和默契的状态，共同找到一种能够提高工作效率的合作方式。”

针对这个问题，Gusto主要是采用了两种策略。一方面，坚持了公司的传统和惯例。另一方面，也根据不断扩大的业务规模进行了调整。他们主要是采用了一种叫做“西瓜面试”的方法，通过一个集中化的人才招聘委员会来详细审核每一位应聘者的背景资料以及与特定岗位的契合度。

第一种：采用“西瓜面试”方法

最初做法：首席执行官对每一位应聘者进行面试，以便评估其能力品性与特定岗位以及公司核心价值观之间的契合度。

升级做法：借助设计全面的、专为员工准备的面试培训项目，来判断他们的做事风格和效率是否与特定岗位以及公司核心价值观契合。同时，还可以利用评分卡体系来对应聘者进行评估。

Reeves介绍说：“最开始，我面试应聘者的时候，基本上不会关注专业技能或工作经验，而是比较看重他们与特定岗位以及公司核心价值观之间的契合度。所以，与其说是面试，不如说是一段不那么严肃的对话，目的只是想要了解他们的个人兴趣和潜在的工作动力，所讨论的话题也都是比较随意的。”

现在之所以将其称作“西瓜面试”，主要也还是与Gusto的传统有关。Reeves解释道：“每一位新员工加入公司时，都可以在前几个星期拿到西瓜福利。早在创业初期，我们在帕拉奥图的办公室里刚好有房东送来的西瓜，因而就转赠给新员工作为他们的入职礼物。虽然现在已经搬了不同的办公室，但送西瓜作为入职礼物的习惯仍然保持下来了。”

然而，随着公司规模的扩大，Reeves显然不可能与每一位应聘者或是每一位新员工进行交流。因此，他就从公司内部挑选了一些与自己面试风格类似的人来完成这项工作，以保证每一位应聘者都能够经历一个轻松的面试过程。但还是那句话，随着公司规模扩大，这种方法同样无法有效支持业务的高速增长。由此，流程化、专业化的西瓜面试项目便诞生了。

Reeves及其团队成员，针对人才招聘面试制定了非常细致宏伟的目标，希望能够做成世界一流的面试培训项目。他们在公司内部发起了一项问卷调查，号召大家罗列出一些成功必备的品质要素。接着，再将那些要素与公司价值观进行融合，总结出了四点所谓的西瓜品质，即形成服务理念、对知识抱有渴望、摒弃自大心理、积极适应变化，作为西瓜面试项目中的主要参照指标，帮助顺利找到与公司业务类型和发展愿景相契合的优秀人才。当然，这些只是适用于Gusto和Reeves的品质要素。也就是说，每一家公司的创始人都需要从自身情况出发，花时间、花精力去找到对自家公司最为重要的员工技能，从而找到最为真实、最为合适的人才。最后，在品质要素设置完成之后，还需要在公司内部组建一支西瓜面试团队。

第二种：组建招聘委员会以保证一致性和连贯性

最初做法：首席执行官对是否雇用某位应聘者掌握最终决定权。

升级做法：由四人组成的招聘委员会，代表公司不同运营部门，对应聘者进行综合能力评估并且做出是否雇用的终极决定。

在发展早期，公司创始人是会切实参与人才招聘每一环节的。但到后期，这一做法就无法得到保证。

因此，为了保证高质以及整个过程中的一致性和连贯性，快速扩张的初创企业必须要借助合理的办法来解决这个问题，那就是专门组建人才招聘委员会。

对于年增长率达到20%或者50%甚至100%的初创企业来说，建立一套流程化、结构化的人才招聘机制，有着至关重要的作用。因为通常情况下，一家公司可以通过很多种方式和渠道来实现业务增长，这样一来人才招聘可能就会出现多重标准。更为糟糕的是，有时候还涉及到统一公司内的不同文化氛围问题，就会使人才招聘变得异常混乱和低效。

但有了专门的招聘委员会，情况就会得到大大改善。当然，在这里，还是要再强调一点，委员会的成立完全是为了提高自家公司的运作效率，因此还是要以不同公司的实际情况为基础进行考量。

如何避免无法升级拓展的瓶颈要素？

在上文介绍完积极利用正面工具来提高人才招聘效率之后，我们要换一个角度思考，应该如何来避免那些可能会带来消极影响的瓶颈要素。

在公司高速增长的阶段，保持人才招聘过程中的文化传统和发展活力，有着至关重要的作用。首先，正确认识人才招聘流程的作用。它是寻找了解和默契的过程，并非纯粹用来拓展团队规模。其次，顺利找到适合自家公司的人才之后，可以适当进行一些庆祝活动。当然，庆祝的侧重点，是自家公司的各项业务顺利找到了一位默契合拍的合作伙伴。

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

评论(0) 浏览(4599)

构建企业品牌价值

蓝蓝设计的小编

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


品牌价值是一家企业的无形资产，企业一旦建立起品牌价值，就代表了品牌在消费者心中已经有了知名度和美誉度，相比其他品牌更有信任感，品牌影响力也由此诞生。这就是为什么中小企业与大企业重视品牌价值的原因。


如今市场环境快速发展，市场竞争异常激烈，品牌价值对于企业的重要性体现的越来越明显。在构建企业品牌价值的方式多种多样，从文化内涵层面着手是最业内普遍的现象比如咖啡领域的星巴克和雀巢，价格上星巴克的价格更贵，口感方面，网络上也有实验结果表示相差无几，但为什么大众对星巴克这个品牌更感兴趣呢？

从微博可以看出，星巴克的粉丝是雀巢的两倍。

造成这种差距的原因，主要是因为星巴克用大众听得懂的方式讲好咖啡文化的故事，而雀巢更多的是展示产品的口感和作用。前者是无形价值的典范，后者则是强调了有形价值。

其实没有谁的做法是错误的，有的只是更接近标准答案：一个真正意义上的成功品牌，应该是像宗教一样的能代表某种信仰、某种文化、某种精神。

长此以往，聚沙成塔，星巴克更能在发展过程中沉淀品牌价值。

当今，每家大企业都在不遗余力地制造和传播品牌价值，中小企业更应该提前布局规划，那么中小企业究竟该如何提升品牌价值呢？或许我们可以从已经成功打造品牌价值的行业巨头那里汲取经验。

前瞻性品牌定位

菲利普·科特勒提出，营销者想要成功塑造品牌价值，必须具备卓越的战略品牌管理能力。而想要实现这一目标，必须做好四项工作：识别并建立品牌定位、规划并执行品牌营销、测量并解释品牌绩效、增加并维持品牌价值。

其中品牌定位是构建品牌价值的核心内容，关乎企业发展方向、产品布局、及后期营销策略表达，其目标在于使品牌价值最大化。比如苏尚首创“一体四翼”的新型商业模式，是全渠道创新社区商业平台。该品牌的表现称得上现象级，实现了由“吃、喝、玩、乐、购”向“养、乐、学、美、创”的消费转型，被商界誉为“苏商模式”。

苏尚之所以能够如此成功，原因在于互联网孵化平台雄商网始终在谋求前瞻的战略定位，为其定制了执行方案，深耕“共享生活”，定位“轻消费、重服务”打造“苏尚生活广场”，率先提出社区一站式百米生活的解决方案，运用大数据、大流量精准驱动百姓刚需生活。在此基础上，苏尚的市场与与公关策略也势必要紧跟公司战略，并始终保持着坚定性和灵活性。

产品服务创新

产品是构建品牌价值的基础，企业要深耕自己擅长的领域，通过创造新品类或子品类，塑造品牌相关性，最大限度地将对手排除在竞争之外。

作为白酒行业巨头，五粮液以1040亿元的品牌价值入选“2018中国上市公司品牌价值榜100强”，位居第25位，其背后的产品服务战略也值得探索。

今年三月发布了“改革开放四十周年”纪念酒、“新时代 国运昌”纪念酒和“五粮液缘定晶生” 三款产品。同时，担负五粮液新零售模式下创新实践重任的创新型营销平台“五粮液五优购”也在当天宣布测试上线。个性化、差异化服务的创新型产品和创新营销平台的推出，不仅让业界看到了一个与众不同的五粮液，而且也不断为自己打造出新的竞争壁垒。

营销策略表达

品牌价值即为消费者带来功能利益与情感利益。功能利益更理性，包括了商品的用料、工艺，以及针对商品推出的各种服务；情感利益是由拥有、此商品后而产生的心理感受。

对消费者来说，当品牌可以提供高的情感利益时，价格不会成为选购商品的决定因素。因此，企业结合用户洞察、营销场景、文化内涵，与现有产品紧密结合，让产品功效更好的落地感知，是树立品牌价值的捷径。

连续四年成功卫冕“中国最有价值品牌”的腾讯，其品牌价值达到1322亿美元，超过了同为BAT阵营的阿里巴巴和百度的品牌价值总和。在营销策略表达板块，腾讯围绕IP展开，将旗下的游戏、动漫、文学、影视等多个业务板块囊括其中。特别值得关注的是，魔性《穿过故宫来看你》H5刷屏，永乐皇帝唱起了Rap；“长城小兵”的漫画形象也成为了“长城你造不造”计划的形象大使，借助公众号与互动小程序讲述起了长城故事。结合各种文化形态的营销方式，充分发挥了腾讯连接公众，尤其是连接年轻群体的优势，自然也为构建腾讯品牌价值助力不少。

以上为大家分享的品牌战略定位、产品服务创新、营销策略表达是构建品牌价值的一种思路。在中小企业打造品牌价值的过程中，除了多借鉴行业巨头的成功经验，更应结合产品特点、品牌属性在其领域持续制造话题，激发公众想象，最终打造的的品牌价值。

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

评论(0) 浏览(3367)

Bootstrap Table实现定时刷新数据

seo达人

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

Bootstrap Table实现定时刷新数据

推荐第二种方法

  • 令表格的id为realTimeTable

1、毁掉表格，再查询数据后append，如果你查大量的数据（例如：查询很多渠道的信息），而获取服务器数据又太慢，你就会看到表格在一行一行的增加

  • 定时器，多长时间执行一次，自己定义，此处是30S 
setInterval(function() { queryAll();
}, 30000);
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •
  • 先定义一个函数，里面放入查询的方法updateRealTimeData和你所自定义使用的方法 
function queryAll() { updateRealTimeData();
        .
        .
        .
        .
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    •
  • 方法updateRealTimeData 
 function updateRealTimeData() { if(errorFlag || appid == -1) return; //把表格的tbody移除，不然后面会一直添加 $("#realTimeTable").bootstrapTable('removeAll'); //获取数据 $.ajax({
            data: { //向服务器发送的一些参数，像日期，游戏ID什么的 .
                        .
                        .
                        .
                        .
                },
                    type: "post", //url不用说了吧，否则不知道向服务器哪个接口发送并请求 url: *******,
                    async: true, //超时时间 timeout:30000,
                    success: function(msg) { if(msg.code == '1') { //定义的函数实现对表格赋值，自定义想传的参数，但别忘了msg，不然搞个屁 showTableData(msg，……);
                        }

                    }
                });
            }
    
    

        
  • 
            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
        
    •
  • 方法showTableData 
function showTableData(msg，……) { tableData = []; for(var i = 0; i < json.length; i++) {
                tableData.push({ //这里也就是data-field的名称，getDate是服务器返回的字段名 date: json[i].getDate,
                       .
                       .
                       .
                       .
                }) //数组反向排列，看情况使用 tableData.reverse(); //向tbody里面添加数据 $("#realTimeTable").bootstrapTable('append', tableData);
            }
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    •

2、使用updateRow方法

  • 首先，得存在表格，里面有数据，才能更新行，否则没作用。此方法不会像上面的方法表格消失再增加，这个是整体不变，里面的数据会自动更新
  • 定时器，和上面一样，多长时间执行一次，自己定义，此处是30S 
setInterval(function() { queryAll(); for (var j = 0; j < 请求的数据的总条数（也就等于表格的行数）; j++) {
                changeAllChannelRealTime(j, .....);
            } }, 30000);
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

    


function changeAllChannelRealTime(j, .....) {
        $.ajax({
            data: { //向服务器发送的一些参数，像日期，游戏ID什么的 .
                        .
                        .
                        .
                        .
                },
                    type: "post", //url不用说了吧，否则不知道向服务器哪个接口发送并请求 url: *******,
                    async: true, //超时时间 timeout:30000,
                    success: function(msg) { if (msg.code == '1') {
                            changeData(j, msg, .....);
                    }
                },
                error: function () { msgToast.error("查询数据出错");
                }
            });
        }
    
    

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

    


function changeData(i,msg,......){ $('#realTime_Table').bootstrapTable('updateRow', { //i表示第几行，从0开始 index: i,
                row: { //这里也就是data-field的名称,*表示字段名 date: msg.*
                        .
                        .
                        .
                        .
                }
            });         
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    •

大象~ 大象~ 你的鼻子怎么那么长~~ 


其他相关：

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

评论(0) 浏览(5541)

你真的够了解“空状态”吗？

鹤鹤

空状态作为APP中不可或缺的一部分，有着举足轻重的作用。当新用户第一次使用产品的时候空状态的设计就显得尤为重要，据相关调查显示“平均下来，app在被下载之后的头3天时间里，日活跃用户(DAU)数量下降了77个百分点。30天内，下降比例达到80%”。

评论(0) 浏览(3737)

分类

日历

链接

个人资料

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

存档