首页

Loading设计思路分享

博博


UI妹儿 2018-05-04 10:44:21

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

Loading设计思路分享

Loading作为一个常见,并且带有排他性的动画,已经被各路大神表现的淋漓尽至。那么如何在众优秀作品下,做出一个性化的Loading动画?

Loading设计思路分享

Loading种类:

1.状态类(进度条):通常数据量很大,客户端已知加载量,并能根据当前加载速度计算出何时加载完成。

状态型的Loading以进度条类为基准,可以为用户提供预期时间,多伴随百分比进度出现。进度条的形式以线性的形式出现,已知总量,降低用户对期待时间的感受。无聊的等待会让人厌烦,作为一个UI设计师需要关注每一个细节,尤其是用户的情绪并将引导到加载后的页面。

By Piotr Adam Kwiatkowski

2.无状态类(菊花):通常数据量比较小,客户端无法预知加载量。

Loading设计思路分享

无状态类的Loaing以菊花为代表,通常都是一组可以无限循环播放的动画。

无状态类的Loaing如有需要可以做的特别一些:https://dribbble.com/search?q=loading

我们的App需要一个无状态的Loading。

我始终相信设计的直觉很重要,抓住直觉的爆发点,是一个成熟设计师必备的素质。于是先按照最初的想法快速做了一版。

Loading设计思路分享

相信很多人对这个Loaing眼熟,当然,这肯定不是我们要的效果,不过在制作这Loading的时候不断的推翻自己的想法,时而清醒时而模糊,感觉突然找到了方向但瞬间也可能烟消云散。这种不断反复的过程中还是收获了很多。

Loading设计思路分享

既然是无限,循环,表现上就不能过于缺乏趣味,这个度很难把握。形式感上面设计要简单,又要通过最直接的方法创造空间感,偶然间发现马戏团的抛球表演。突然间有了灵感,于是就沿着这个思路开始动手设计:

我尝试去直接模仿抛弃的运动,但是效果并不是很好,但是从Demo中可以看出,值得很入研究。

为此我们搜索了一下现实中的扔球效果:

Loading设计思路分享

经过分析我们得出了第一条小球的运动路经是一个无限的符号。

工作路经确定后,导入C4D中进行单球运动轨迹测

由于实例中,小球会受到重力以及加速度的影响,并非匀速运动,但在实际Loading制作过程中,为了视觉效果,我们希望小球做匀速运动

发现问题:小球在中心焦点位置出现明显卡顿

起初我们认为是速度曲线没有调整好所导致的,但我们尝试几版后发现并不是这样,最后我们发现导致这个问题的原因是路经节点问题。

Loading设计思路分享

调整节点

通过调整节点后,不难发现,中心焦点处的卡顿明显不见了

为了加强透视效果,我们将球的大小和颜色进行了关键帧处理,这已处理增加的景深对视觉的冲击,使得空间感更强了。

看起来怪怪的。。。。。

为了使整个运动规律更加精准,我们发现运动的起点距离是关键,不懈的追求完美的情况下,总是会有顿悟的时刻,幸运的是找到了问题的所在

三个球匀速运动的情况下,应该保证每相邻两个球之间路经上的距离是相同的。

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

UI设计 如何让你的配色更加舒服

蓝蓝

色彩作为视觉感知的先觉条件,在很大程度上决定了作品的好坏以及给观者留下什么样的印象,人们感知到的即是通过色彩所传递出的情感,色彩作为一门独立的学科,在基于其理论体系之上衍生出了众多的搭配方法和技巧,在遵循色彩构成的原理之上可以更好的帮助我们对色彩有深入的认知和使用,对于色彩而言,除了要了解基本的构成之外,在使用的过程中更重要的是要对色相,明度,饱和度有敏锐的观察里和视觉感知力,通过三者不断的变化和调整把控使色彩更加具有情感,让视觉感知更加的舒适并满足我们的实际的需求;

【css】背景颜色渐变,文字颜色渐变,边框颜色渐变

seo达人

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

前言:css3的出现使得我们可以通过前端技术,让网页内容变得更丰富,更华丽。今天来玩玩好玩的颜色渐变。

一、背景颜色渐变。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
  4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
  5. }  
  6. </style>  
  7. <div class="content">浅色夏沫,夏末微凉</div>  
  8. </body>  

运行效果


二、文字颜色渐变。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
  4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
  5. -webkit-background-clip:text; -webkit-text-fill-color:transparent; }  
  6. </style>  
  7. <div class="content">浅色夏沫,夏末微凉</div>  
  8. </body>  

运行效果


三、边框颜色渐变。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;   
  4. border:10px solid;  
  5. border-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%) 10; }  
  6. </style>  
  7. <div class="content">浅色夏沫,夏末微凉</div>  
  8. </body>   

运行效果

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


浅谈jQuery之动画

seo达人

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

背景

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑

滑入滑出动画

  1. 滑入动画

    定义:以下拉方式动画效果将html内容显示出来

    使用方式:

    $(selector).slideDown(time,function) 
    $(selector).slideDown(2000) 
    $(selector).slideDown() 
    $(selector).slideDown(fast/normal/slow)

    time代表执行动画的时间,function代表动画执行完之后所要执行的函数

  2. 滑出动画

    定义:以上滑方式动画效果将html内容隐藏出来

    使用方式:

    $(selector).slideUp(time,function) 
    $(selector).slideUp(2000) 
    $(selector).slideUp() 
    $(selector).slideUp(fast/normal/slow)

    time代表执行动画的时间,function代表动画执行完之后所要执行的函数

  3. 滑入滑出切换动画

    定义:在滑入滑出动画间切换

    使用方式:

    $(selector).slideToggle(time,function) 
    $(selector).slideToggle(2000) 
    $(selector).slideToggle() 
    $(selector).slideToggle(fast/normal/slow)

淡入淡出动画

  1. 淡入动画

    作用:让元素以淡淡的进入视线的方式展现出来

    使用方式

    $(selector).fadeIn(time,function) 
    $(selector).fadeIn(2000) 
    $(selector).fadeIn() 
    $(selector).fadeIn(fast/normal/slow)

  2. 淡出动画

    作用:让元素以淡淡的离开视线的方式隐藏起来

    使用方式

    $(selector).fadeOut(time,function) 
    $(selector).fadeOut(2000) 
    $(selector).fadeOut() 
    $(selector).fadeOut(fast/normal/slow)

  3. 淡入淡出切换动画

    作用:让元素在淡入淡出动画切换

    使用方式

    $(Selector).fadeToggle(time,function) 
    $(selector).fadeToggle(2000) 
    $(selector).fadeToggle() 
    $(selector).fadeToggle(fast/normal/slow)

  4. 修改opacity

    作用: 修改opacity的值

    使用方式

    $(Selector).fadeTo(time,opacity,function) 
    time可以是字符串,可以是具体数字 
    也可只有参数一、参数二

显示隐藏动画

  1. 显示动画

    作用: 将Html结构显现出来

    使用方式

    $(Selector).show(time,function) 
    $(selector).show(2000) 
    $(selector).show() 
    $(selector).show(fast/normal/slow)

  2. 隐藏动画

    作用: 将Html结构隐藏起来

    使用方式

    $(Selector).hide(time,function) 
    $(selector).hide(2000) 
    $(selector).hide() 
    $(selector).hide(fast/normal/slow)

停止动画

  • 定义:停止正在执行的动画

  • 使用方式:

    $(selector).stop() 
    stop()中可以有两个参数,参数一:后续动画是否执行,参数二:当前动画是否执行完毕,默认的是(false,false),注意第一个参数,true代表的是后续动画不执行 
    ———————————————————————————— 
    第一种:(false,false) 
    后续动画会执行,当前动画不会执行完 
    第二种:(false,true) 
    后续动画会执行,当前动画会执行完 
    第三种:(true,false) 
    后续动画不会执行,当前动画不会执行完 
    第四种:(true,true) 
    后续动画不会执行,当前动画会执行完

自定义动画

  • 作用:执行一组CSS属性的自定义动画

  • 使用方式:

    $(selector).animate({CSS定义},time,function())

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

基于jQuery的select2下拉框

周周

select2简介】
       select2.js是一个html select美化模拟类jquery插件,但是select2.js又远非简单的模拟美化那么简单,它还具有搜索功能,多选功能(可限制选择数量),ajax方式加载数据,可以设置placeholder……
【引入文件】
      <linkrel="stylesheet" href="./css/select2.css">
      <scriptsrc="./js/jquery-2.1.0.js"></script>
      <scriptsrc="./js/select2.full.js"></script>
select2的简单用法】


  • 设置禁用状态disabled,如:$(".js-example-disabled").prop("disabled",false);
  • 默认值设置:$("#select2").val("1").trigger("change");
  • 多选的默认值可以使用:$("#select2").val(["1","2"]).trigger("change"); 这样传递数组过
  • select2还有丰富的自定义事件

  JavaScript

$("#select2").on("select2:open", function (e) { log("select2:open", e); });
 
$("#select2").on("select2:close", function (e) { log("select2:close", e); });
 
$("#select2").on("select2:select", function (e) { log("select2:select", e); });
 
$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
 
$("#select2").on("change", function (e) { log("change"); });


select2的其他组件】

      一、多选效果
      效果图

161511wc0em4p5ictpk0k6.gif



代码如下
Html代码

<div class="box1 div">

   <p>多选下拉框</p>

<select id="sel_menu1" multiple="multiple" class="form-control">

  <optgroup label="系统设置">

  <option value="1">用户管理</option>

  <option value="2">角色管理</option>

  <option value="3">部门管理</option>

  <option value="4">菜单管理</option>

  </optgroup>

  <optgroup label="订单管理">

  <option value="5">订单查询</option>

  <option value="6">订单导入</option>

  <option value="7">订单删除</option>

  <option value="8">订单撤销</option>

  </optgroup>

  <optgroup label="基础数据">

  <option value="9">基础数据维护</option>

  </optgroup>

  </select>

</div>


JS代码

$("#sel_menu1").select2({[/align]
         tags: true,
         maximumSelectionLength: 3 //最多能够选择的个数

      });


二、图文结合效果
效果图

161544vqrri760rldcbg5d.gif


代码

Html代码

<div class="box2 div">
     <p>图文结合的效果</p>
     <select id="sel_menu2" class="js-example-templating js-states form-control">
          <optgroup label="系统设置">
  <option value="1">用户管理</option>
   <option value="2">角色管理</option>
   <option value="1">部门管理</option>
  <option value="1">菜单管理</option>
  </optgroup>
  <optgroup label="订单管理">
  <option value="1">订单查询</option>
  <option value="1">订单导入</option>
   <option value="1">订单删除</option>
  <option value="1">订单撤销</option>
   </optgroup>
  <optgroup label="基础数据">
  <option value="1">基础数据维护</option>
  </optgroup>
      </select>
</div>

JS代码

$("#sel_menu2").select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        function formatState(state) {
            if (!state.id) {
                return state.text; 
            }
  var $state = $('<span><img src="./image/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        };


从已知探索未知的设计之道

雪涛

从已知探索未知的设计之道
DESIGN
在寻找如何更好的“发现-解决问题”过程中,受到MIT媒体实验室教授Neri Oxman文章《Design and Science - Krebs Cycle of Creativity》一文启发,区别于“点对点”的发现-解决问题,为了从更高角度更好的解决问题,类比克雷布斯循环和创造力的克氏循环(KCC),将“发现-解决”问题/机会点这一过程整体系统化,尝试提出系统性解决问题之思考-行动模型Krebs Cycle of Design,并以空间Feeds信息流产品举例如何实践Krebs Cycle of Design。



从已知探索未知的设计之道 - 系统性解决问题之<思考-行动>模型Krebs Cycle of Design

作为互联网的用户体验实践者-交互设计师,大大小小经历过很多不同种类不同维度的项目,比如成熟期产品的常规迭代项目(如社交指数、校园问答、空间社交周报、Feeds新增礼物等),这时我是哪里需要就在那里的问题解决者;也会和产品一起探索新的产品方向,经历从0到1的探索型项目(如视界、AR相机、ABCmouse等),此时我是主动探索的问题解决者。近两年都在思考用户体验设计师该如何在互联网团队中发挥设计最大价值,最终达到“解决用户问题,创造美好产品体验”的终极目标。结合自己的用户体验设计从业经历,我尝试给设计做个定义:

设计就是从已知探索未知的过程,是一个不断解决问题的过程。

具体来讲,就是从发现问题/机会点后,通过“How”等各种方法手段去解决问题/机会点的整个过程。

而解决问题/机会点的各种方法手段“How”就至关重要,在寻求“How”的过程中,受到MIT媒体实验室教授Neri Oxman文章《Design and Science - Krebs Cycle of Creativity》一文启发,Neri Oxman在《Design and Science - Krebs Cycle of Creativity》中提出的类似克雷布斯循环的创造力的克氏循环(KCC),创造性的将人类的创造力四种模式-科学、工程、设计和艺术,形成创意循环的地图假设并进行了相应解读,阐释了学科之间不再是割裂离散的孤岛这一命题。感兴趣的小伙伴可以使用传送门:

英文版原文:《Age of Entanglement》https://jods.mitpress.mit.edu/pub/ageofentanglement

中文翻译版本之【设计读本】媒体实验室教授Neri Oxman文章《纠缠时代》,揭示创意循环在科学、工程、设计与艺术中深层关系》:https://zhuanlan.zhihu.com/p/27951549

拓展阅读:《Design and Science byJoichi Ito》https://jods.mitpress.mit.edu/pub/designandscience

区别于“点对点”的解决问题,为了从更高角度更好的解决问题,类比克雷布斯循环和创造力的克氏循环(KCC),将“发现-解决”问题/机会点这一过程整体系统化,尝试提出系统性解决问题之 < 思考-行动 > 模型-Krebs Cycle of Design。

系统性解决问题之 < 思考-行动 > 模型主要包含以下8个阶段:发现问题/机会点- 系统性思考- 判断问题/机会点- 挖掘行动- 挖掘出真正的问题/机会点 - 解决行动 - 构建更好的产品(1小步)- 迭代进化思考 - 重新发现问题/机会点。


以空间Feeds为例,解析如何实践Krebs Cycle of Design

前文讲述了系统性解决问题之 < 思考-行动 > 模型-Krebs Cycle of Design,接下来通过具体的项目,说明如何通过“系统性解决问题之 < 思考-行动 > 模型”全局解决问题,这里采用一个从需求引发的未知产品探索,以QQ空间基础Feeds信息流产品为例。


项目背景

作为腾讯典型社交产品,QQ空间已经12年了,那么对于12年的空间Feeds信息流产品日常需求,整体来讲具有以下3个特点:需求量多(面对多个产品不断快速迭代)、需求类型杂、需求内容小。

基于这样一个前提,为了更好的解决问题,仅仅只做需求是不够的,需要设计师发挥产品主人翁意识,这样首先我的角色定位无形中发生了变化,从单纯的设计师(产品需求转换者)转变为产品设计师(产品需求洞察者)。

角色的变化,进一步带来了解决问题思维模式的变化,从之前为单一用户需求而设计的线性解决问题思维模式转变为从点触发的系统性解决问题思维模式。

总的来讲系统性解决问题之 < 思考-行动 > 模型,以空间基础Feeds信息流产品为例。主要有以下几个阶段,并且每一个阶段都是上一个阶段的自然转化。

1. 提出产品需求/机会点。

2. 基于产品需求/机会点,从点触发,通过系统性思考,全面的思考分析。

3. 基于系统性思考,判断需求在系统中是否有价值。

4. 判断有价值后,继续深入挖掘更多的问题和机会点。

5. 综合判断挖掘真正的问题/机会点。

6. 确定真正的问题/机会点后,针对性的进行解决行动。

7. 阶段性的解决行动后,就向构建一个更好的产品迈出了一小步。

8. 构建更好的产品后,为了产品后续更好发展,进入新一轮的迭代进化思考。

9. 迭代进化思考后,就开始了新一轮的系统性解决问题,构建越来越好的产品和更加美好的体验。


1.提出产品需求/机会点

在互联网公司,尤其是互联网产品比较成熟时(如QQ空间Feeds信息流产品),设计师通常扮演者产品需求转换者的角色,在常规迭代项目中面对产品经理一个又一个的小点需求,很多设计师都是基于点对点的需求进行功能细化,有些甚至可以直接开始详细设计;而系统性解决问题思考行动模型则建议“将产品需求直接转换为详细设计”的这一类设计师,在日常常规需求之外,可以跳出点对点的小需求,更加系统的思考需求&探索问题和机会点。


2.系统性思考

从已知的需求、问题和机会点出发,从点触发设计师全局思考产品。通过系统性思考,了解产品整体系统,该部分思考的维度和方法,通常从商业、产品、项目、用户等多角度思考,如商业工具(理解商业的商业模式画布)、产品工具(了解行业位置的SWOT分析法、发散创意的搜寻领域图和思维导图)、产品工具(理解阶段目标的目标分解图)、用户研究工具(量化理解用户的问卷和访谈、定性用户研究的可用性测试&焦点小组、模拟分析场景的体验地图)。而以QQ空间Feeds信息流产品为例,阐述如何更全局的系统性思考产品。

系统性思考第1步:从日常繁琐的小需求中跳出,从资源输入-内容输出维度,全局的了解空间的整体产品体系,比如核心UGC业务、运营相关业务、分支业务、广告业务等。

系统性思考第2步:基于资源输入-内容输出维度全局了解产品体系后,针对Feeds信息流模块,梳理出资源输入类型和各个类型所包含内容,以及触达用户的内容输出Feeds类型以及包含内容信息,分析输入输出不同对象关系,明确空间Feeds信息流的空间枢纽作用,为下一步判断需求/问题/机会点的价值提供依据。


3. 判断问题和机会点在整个系统中是否有价值

基于系统性思考,分析判断需求在系统中是否有价值。对于QQ空间Feeds信息流产品,通过产品的系统性思考,会发现Feeds基于空间的枢纽作用,连接空间各个业务内容,并以Feeds产品形态分发给UGC和PGC用户。因此Feeds信息流的产品设计优化对于整个空间而言,都有极大的商业和用户价值。


4. 深入挖掘行动

判断问题/机会点有价值后,继续纵向深入挖掘更多的问题和机会点,该部分思考的维度和方法可从需求挖掘和设计调研/用户研究两个维度,从产品、用户等多角度思考,如现有问题挖掘的日常积累法、数据定量分析法、用户调研访谈等定性研究、头脑风暴等涌现挖掘法、用户核心行为的全链路分析法等。下面以QQ空间Feeds信息流产品,举例如何深入进行挖掘行动。

挖掘行动第1步:从项目团队内部(产品&开发&设计师)收集现有痛点问题,并将问题梳理归类整理,确定内部收集痛点问题重要程度优先级。

挖掘行动第2步:从用户“发表-浏览-互动”的Feeds信息流相关的核心行为路径切入,收集用户/专家反馈,并分析确定用户核心行为路径哪些问题与Feeds相关。


5. 判断确定真正的问题和机会点

挖掘行动后,就可以从产品内部、用户本身等多维度得到N个问题和机会点,通过对问题和机会点整理判断分析,得出真正的问题和机会点。如针对空间Feeds信息流产品真正的问题点和机会点有2个:Feeds缺失系统化、Feeds关键触点暴露的用户问题。


6. 解决行动

确定真正的问题/机会点后,针对性的进行解决行动。不同的问题和机会点,可根据需要采用适合的解决行动。下面仅以QQ空间Feeds信息流产品,举例如何进行解决行动。

解决行动第1步:针对有多个问题和机会点的情况,首先需要明确解决问题的优先级,这里可以参考评估优先级的方法-知觉图、C-BOX图表(来自代尔夫特设计指南《设计方法与策略》),定义问题管理四象限,从“重要程度+紧急程度”两个维度分析确定解决问题优先级,其中横坐标轴代表紧急程度,从左到右紧急程度降低;纵坐标代表重要程度,从上到下重要程度降低。正所谓建造房子地基很重要,Feeds缺失系统化代表Feeds信息流的地基不稳,在地基打牢之后我们可以有针对性的解决用户关键触点暴露的问题,分优先级逐步推进解决问题。因此形成了以解决“Feeds缺失系统化”为基础,有节奏的探索解决Feeds关键触点暴露问题的解决策略。


解决行动第2步:解决“Feeds缺失系统化”,即Feeds设计系统化,也就是将整个Feeds产品体系化,进行设计的规范化和组件化,并在设计层面和开发层面统一共享资源,并应用到产品的后续迭代中。而设计系统化的典型代表Material Design,就通过从真实世界观察到数字世界模拟,构建了一个数字世界观,包含设计理念、设计原则、设计元素(如输入框、按钮、文字等控件/组件)、设计模式(如空状态、手势、搜索等)、工具等内容。 关于设计系统化(design system感兴趣的小伙伴可以查看《design systems》一书,购买书籍链接:https://www.smashingmagazine.com/design-systems-book/

Feeds设计系统化主要有以下3个阶段:明确设计系统化目标 - 明确设计系统化思路 - 设计系统化过程。

首先是明确设计系统化目标,明确预期目标有助于我们在项目后期更好的评估系统化设计的价值和效果,空间Feeds信息流产品主要从3个维度明确目标:规范化(形成Feeds基础设计体系,保障Feeds整体设计统一性)、提升效率(可以快速复用,保质保量的支撑业务需求的快速迭代)、可持续原则(一句话就是跟得上潮流,不断的迭代进化)。

其次是是明确设计系统化思路,明确了目标之后,需要定义如何进行Feeds设计系统化的思路,主要有以下4个阶段:场景类目梳理- 抽象框架- 填充细节内容 - 建立设计规范。


在明确了设计系统化思路后,依据思路,通过以下4个阶段一步一步构建Feeds设计系统化:场景类目梳理- 抽象框架- 填充细节内容 - 建立设计规范。

设计系统化第1步:场景类目梳理,从场景出发归类所有的Feeds类型。

设计系统化第2步:抽象框架,首先将所有Feeds类型每个的结构模块化,其次通过“类比-分析-聚类”归类同类型框架,最后设定Feeds框架应用策略(不同框架的每个模块可采用LEGO自由组合策略)。

设计系统化第3步:填充细节内容,补充A/B框架类型中的填充元素(控件/组件等内容)。

设计系统化第4步:建立Feeds设计规范,提升产品设计效率,为后续设计夯实基础。

Feeds设计系统化项目,在产品设计内部也得到了广泛好评,一定程度上提升了产品设计效率。


解决行动第3步:有节奏的探索解决Feeds关键触点暴露问题,也就是Feeds设计有亮点。设计有亮点的探索聚焦用户的核心使用路径,在关键触点上发现亮点设计机会点。


首先是聚焦用户核心行为路径,从用户触点切入,深挖不同关键触点,收集用户/专家的反馈,并针对用户的关键触点问题探索出相应的解决方案。


其次在有了这么多的亮点解决方案后,先做哪一个再做哪一个,我们需要明确亮点设计功能实践优先级。此时就需要回归产品目标用户群,深度探索目标用户的特性,比如QQ空间的使用用户群体为95后,他们具有“创造、个性、有趣、表达”等特性,他们爱玩的产品有“弹幕、变声语音、斗图、鬼畜视频”,这些产品都具有“DIY、个性互动、满足成就感”等心理因素,因此针对8个Feeds亮点解决方案,优先在互动层面实践快评表情。


接下来就是如何进行快评表情产品设计,首先明确快评表情产品设计思路,主要有以下4个阶段:定义产品需求-明确产品目标-探索用户趣味表达心智模型-定义具体的解决策略

在明确了产品设计思路后,依据思路,通过以下4个阶段逐步推进快评表情亮点化设计:定义产品需求-明确产品目标-探索用户趣味表达心智模型-定义具体的解决策略。

亮点设计第1步:定义产品需求,需要明确正在设计的产品需求到底是什么?该需求要解决什么问题,或者满足了用户哪一方面的诉求;比如在QQ空间快评表情产品设计中,由于快评表情可能存在空间多个用户场景(如Feeds评论、发表Feeds、直播场景等)。为了快速上线快评表情,验证其可促进用户活跃度,首先确定了快评表情的具体产品需求,将其使用场景缩小为优化Feeds评论表情功能。

亮点设计第2步:明确产品设计目标,确定了产品做什么后,为了更好的评估衡量设计效果,我们需要在具体设计前先定义设计预期目标。如快评表情产品需求中,在具体设计之前,明确了产品设计预期目标,如增加评论趣味性、增强用户互动欲望、提升用户活跃度等。

亮点设计第3步:探索用户趣味表达心智模型,明确了产品设计目标后,我们需要更深层次的挖掘用户使用产品心理动机,从而探索用户的一个使用心智模型,心智模型有助于我们在更高更深层面让用户使用产品过程中超出预期。如快评表情设计中,基于目标用户探索用户互动心智模型,发现了以用户互动诉求为基础,满足用户个性化、专属感、控制感的深层心理动机,从而可以让用户达到最终的成就感,建立起用户与产品的情感联系。

亮点设计第4步:定义具体的解决策略,分析了目标用户特性和动机后,可以尝试定义“如何做”的产品设计策略,搭建/聚焦用户使用核心路径,在核心路径上明确用户关键触点,并基于核心路径形成关键页面,并最后给出用户超越预期的产品体验。如快评表情设计中,由于是原有的评论表情优化,因此在定义解决策略时,首先聚焦评论表情的核心路径,基于核心路径寻求机会点,并且根据机会点搭建全新的快评表情使用路径。


定义了具体的设计解决策略后,就进入详细的交互设计阶段,此处仅由于内容篇幅太长,仅做简要的一些核心点说明。主要有3点:

1. 聚焦用户评论核心路径,找到评论表情关键触点,探索设计机会点。

2. 基于评论核心路径机会点,新增用户关键触点,加强用户与产品、用户与用户之间互动反馈。

3. 搭建用户使用新路径,通过主动触发和被动触发机制,强化推荐互动。


7. 解决行动结果-构建更好的产品体验

阶段性的解决行动后,比如进行了Feeds设计系统化打好根基,探索了快评表情的亮点设计后,已经向构建一个更好的产品迈出了一小步。无论从产品内部评价和上线后数据验证结果来看,均达到当时的一个小小目标。如产品数据验证部分方法感兴趣的,可查看“用户行为数据分析”等方法。


8. 迭代进化思考

正所谓“潮流是在不断发展变化的”,互联网圈的发展更是日新月异,因此为了后续产品发展的更好,需要进入新一轮的迭代进化思考。如果设计师在横向有一个属于自己的设计中心(或者设计团队),可以定期挖掘讨论创意想法,沉淀为创意资源库,从而更好的发挥设计中心横向优势,合力扩大影响力。如QQ空间内部就有Qzone idea的创意小组,定期输出创意想法,讨论,并向上汇报推动产品侧落地。


总的来讲,系统化解决问题<思考-行动>模型可以你“找对事 & 做对事”,“如何做设计的亮点深挖四部曲”具体化做对事的过程,两者相辅相成,合力打造更美好的产品体验。


瀑布流,到敏捷开发,到设计思维,最后到精益创新

雪涛

各公司开发成功产品的方式已经在根本上发生了变化。智能手机、社交网络或云计算等新技术使苹果、谷歌或亚马孙等科技巨头在大约20年内成为最有价值的公司。

这是我的第一篇系列文章“精益创新——如何在今天开发成功的产品”。这是多年来创新的转变和产品开发的方法论。

所有这些变化的发生是由于人们消费产品的方式发生了转变而造成。为了迎合用户行为和对产品期待的变化,科技公司必须将产品方向转变为更灵活、更敏捷、特别是以用户为中心上,即从瀑布流到敏捷设计再到精益设计。

虽然现在仍然有95%的大型组织在用瀑布模型开发新产品,但行业领头公司已经在率先使用精益设计作为方法了。

 

瀑布模型(20世纪70年代)Waterfall 

瀑布模型是序列顺序的处理方法,进程就像瀑布一样稳定地推向目标。它要求项目产出全面的计划并提前开发。

瀑布过程

由于前期设计和分析花费了大量的时间和精力,设计变更会使成本变得更高,尤其是设计后阶段。每个设计节点都有清晰的目标,达成后将进入下一个阶段。这样防止了客户在最后发布前评论和反馈。即使征求了建议,项目在接受反馈方面也不那么灵活。虽然瀑布模型是一种不那么灵活的方法,但它对需要执行“计划”的团队(在预算范围内)更有益。

 

敏捷开发(20世纪90年代)Agile 

随着互联网的兴起,瀑布模型漫长的开发周期已经不再能够提前规划人们的需求。同时,随着电子商务的全球化和新经济模式的到来引发了更多的竞争。公司在开发产品的周期中不得不对市场趋势作出反应,因此,需要一个灵活的产品开发步骤。

“敏捷”指的是由17个软件工程师发布于2001年2月的一份宣言,他们必须就轻量开发方法进行讨论。它基于迭代的方法,而不是像瀑布模型一样在项目之初就进行深入的规划。开发团队为了保证首先完成最重要的任务,他们会不断调整项目的工作范围。

每次迭代的目的是为了实现一个可交付的产品。随着来自终端用户的持续反馈得到鼓励,敏捷开发能对不断变化的需求作出反应,因为随着时间推移它们都是被需要的。因此,在管理和减少需求变化的风险方面,这些方法对项目来说是正确的选择。

 

设计思维(21世纪初)Design Thinking 

我们都知道以人为中心的设计,设计思维作为一个概念已经存在一段时间了,只是名称不同(以用户为中心的设计、服务设计)。设计思维因得益于它解决问题的技巧和科学的方法而成为时尚。设计思维过程和方法的普及与2001年的IDEO有关。

“设计思维是一种以人为本的创新方法,它从设计师工具箱里汲取了灵感,将用户的需求、技术的可能性和商业成功的要求结合起来。”

汤姆布朗,IDEO创始人。

“设计师工具箱”是一个与设计师的方法和过程有关的应用——包括思考创造力、灵活的创意以及对用户行为和需求的清晰理解。设计思维是一个由4个基础阶段组成的结构化流程。

从目标群体的发现阶段开始,所确定的需求和问题将被合成一些主要的见解。这些见解是概念阶段的基础,这个阶段的目标是产出许多想法,而最有希望的想法将被作为原型进行开发。原型测试是最后一个阶段,这个阶段需要确保解决方案满足目标群体的需求。

设计思维之所以产生,是因为大公司缺乏创新能力,无法开发出能满足客户需求和客户问题的创新产品。如今,大多数的公司都使用分析思维来作为运营方式。这种分析思维阻碍了创造性(打破常规)思维的发展,而这种创造性思维是破坏性创新所必需的。

这种创造性,特别是大胆的思考(有些称为“疯狂思考”)与设计概念有关。为了创新,企业必须具备设计能力。为了设计,一个组织需要内部融合设计,以孕育出一种培养创造思维的文化。

设计思维的显著差异在于将用户置于每项活动的中心。此外,以人为本的设计强调体验胜于效率,因为良好的体验是用户与产品互动的动力。

 

精益创新(创业公司——21世纪初)Lean Innovation

2011年,随着Eric Ries《精益创业》这本书的出版,创新和产品开发实践已经向精益方向发展。精益创业的目标是避免开发那些没人需要的产品或服务。精益过程包含用户反馈和产品早期实验。

精益创新以“失败来了成功还会远吗?”的哲学而闻名。开发者接受这种失败,因为他们获得突破性成功前是要需要不断学习的。

精益方法也常被称为“客户开发”。它的目标是在搭建最终产品前,找出用户想要什么。精益的原则是建立你正在试着测试的假设和设想,而你通过在这些实验的学习,将会取得进步。

 

科技推动全球竞争

数字化和巨大的变革速度不再允许公司在不考虑客户需求的情况下简单地生产产品。在过去,向客户提供错误的产品只会导致项目失败。而今天,持续不能交付客户所需的产品,将导致整个商业模式的失败。诺基亚或柯达只是这里提到的两个最著名的失败案例。

智能手机、云计算和开源等技术使得产品的开发速度更快、成本更低。开发产品或进入市场的的门槛比以往任何时候都要低。这意味今天有更多的全球竞争。公司需要专注于了解用户和他们想要什么。客户可以很容易地转向其它产品。品牌忠诚度对消费者决策的影响逐年下降。

 

专注于商业模式,而不仅仅是产品(Focus on business models, not only on products)

精益和设计思维都是以客户为中心、基于迭代的方法。客户参与和反馈是取得进展的动力。精益创新的关键不同之处在于,它在围绕产品考虑整个商业模式时更进一步。

亚马逊成为电子商务的领导者的原因之一是他们对客户服务的坚定承诺。虽然他们没有靠这个挣过一分钱,但是却帮亚马逊获得了客户的信任和忠诚。如今,成功的公司区别于他们的商业模式,而不是他们的产品供应。

 

确保用户持续参与(Engage customers continuously)

在新世界中,成功的公司将有一个共同点:对用户行为和需求的超常理解。随着行为和需求的快速变化,确保建立客户需求的唯一途径就是让用户持续的参与到项目中来。准确的用户理解是长期商业模式成功的基石。

 

结合设计思维、精益设计和敏捷开发

虽然设计思维,精益设计和敏捷开发可以单独使用,但是最好的结果来自这些方法的结合。设计思维有助于深入了解客户的需求和行为,而敏捷开发则有助于地开发和交付解决方案,精益方法的实践帮助我们在用户参与的假设测试中可以获得更直接的验证和学习。

当持续使用“开发–测试–学习”这个模式循环,就可以逐步接近一个成功的产品和有率的商业模式。

UI设计师基础设计规范

蓝蓝

UI设计的基本规范,包括网页设计和APP设计的规范罗列

界面欣赏

博博

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

    万聚制作 2018-05-15 13:30:00

素材源自网络

这是我们收集UI / UX交互的一周时间,以增强您的用户界面灵感。我们专注于酷炫的动画,布局设计,用户体验思考等等。我们正在从静态,动态甚至是现场原型混合它,这可能是一个伟大的每周系列书签!本周,我们对交互/转换的关注较少。本周我们一直在挖掘一些动画,但我们发现的主要是静态的。我们有各种各样的组合,恰到好处地为您提供创意提升。

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

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

袋鼠云:可视化大屏打造智能数据方案全闭环

博博

袋鼠云:可视化大屏打造智能数据方案全闭环

袋鼠云 2018-05-17 15:37:32

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


编者按:距热情似火的618国民年中购物节已经不到两个月时间,去年京东商城最终以累计下单金额高达1199亿元(行业口径)的战绩收官。而记者了解到每年借着“京东618”“双11”这两股全民消费热潮的新零售品牌远远不止淘宝与京东两家,已成为了整个产业链方方面面品牌的推广盛宴。

因此,每年的618购物节参与的企业数量可谓“芸芸之众”,这场一年比一年盛大的狂欢节也对支撑其后的运算资源、网络平台、存储与挖掘大数据提出了更高更严苛的要求。针对各家的技术资源体系、技术运维团队、大数据智能技术水平也成为了企业高管的“第一关注”。

而记者采访了多家新零售企业的CIO,提及如何更好地应对即将到来的今年“618”,他们大多表示:“增加服务器及运算资源、优化技术架构提高冗余、完成即时大数据挖掘分析是今年的三大要务。”的确,在保证全民购物节完美的用户操作体验之外,对自身企业在这场没有硝烟的商战中获得的宝贵数据充分分析并加以利用也成为了CIO们所考量的重点,让精准营销落地同时指导未来的市场规划。

如何更好的挖掘大型项目节点中企业获得的巨量数据?如何将挖掘数据中的信息得以简明有效的呈现,最终迅速指导市场策略?记者在618前夕走访了国内新锐的数据智能解决方案企业——袋鼠云。

袋鼠云:可视化大屏打造智能数据方案全闭环

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司,在今年动作频频,完善提升自身数据智能产品线研发的同时,也在今年大量引入高端人才,全面完善数据智能整体品牌价值。

记者在采访中了解到,袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础,通过袋鼠云的数据内容策划团队的有效建模,配以令人印象深刻的专业视觉设计,通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司,在今年动作频频,完善提升自身数据智能产品线研发的同时,也在今年大量引入高端人才,全面完善数据智能整体品牌价值。

记者在采访中了解到,袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础,通过袋鼠云的数据内容策划团队的有效建模,配以令人印象深刻的专业视觉设计,通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云CEO在采访中向记者介绍了典型客户“中国茅台”可视化大屏项目实施情况,他告诉记者:“世界第一白酒品牌“中国茅台”之所以选择袋鼠云建设数据可视化大屏项目,主要是基于要解决全面打造企业数据中台以及将中国茅台品牌能力直观生动地呈现给领导与参观客户。”

袋鼠云:可视化大屏打造智能数据方案全闭环

“基于此,袋鼠云为他们从数据管理与应用方式方法上改变思路, 有些甚至是全新的角度与理念,目的也是为了让‘中国茅台’的企业数据价值更好的被利用。”他告诉记者:“因为茅台品牌社会面很广,袋鼠云后期基于数据,提供的诸如舆情分析系统、反黄牛数据系统等富有社会成效的定制功能,获得客户的高度认可。”

数据智能(DI)不仅仅是把数据放在一起,而是要聚集产生化学反应。“中国茅台”这个客户应用就很典型,他继续向记者介绍:“我们给客户的数据分析与决策都是动态的,实时监控大屏即时展现茅台酒的交易总额是多少?哪个地区的茅台酒目前是销量最高的?哪些客户最热衷于他们的产品?这些动态的数据分析结果都能实时呈现在展会现场的可视化大屏幕上。另外茅台做的可视化大屏,也直观地体现了茅台用户群体的年轻化趋势,这和我们之前想象中茅台的消费者较高年龄层的情况不一样。这次可视化大屏解决方案帮助茅台更清晰地了解了自己的终端用户,要知道以前客户数据分散在经销商、渠道商那里,到底谁喝了茅台酒,茅台集团是无法获知的。”

袋鼠云:可视化大屏打造智能数据方案全闭环
袋鼠云:可视化大屏打造智能数据方案全闭环
袋鼠云:可视化大屏打造智能数据方案全闭环

而实时采集数据,实时处理分析数据也是袋鼠云口中的“一大门槛”。记者了解到,类似袋鼠云这样的从数据采集--数据存储--数据应用--数据呈现整体打造闭环的数据智能解决方案服务商在行业里具有很大优势。在中国茅台的典型方案中这一点就展露无遗。他向记者介绍:“中国茅台选择过去传统服务商时,手机端与电脑端的开发商是不同的,因此移动端和PC端后台数据没有打通,形成了非即时的数据孤岛。而采用了袋鼠云“全域”智能数据解决方案后,所有的标准制定都是相同的,数据得以深入而全面的加工。而精准营销、反黄牛、打标签、舆情监测、秒杀系统等等富有成效的模型都是基于企业数据的被统一联结并做出实时分析结果。”

记者谈到实时数据可视化这个部分时,袋鼠云CEO显得自信满满。他告诉记者:“数据的实时性采集非常重要,“袋鼠云”实现了TB级别甚至是PB级别的大数据进行实时处理,实现秒级反馈是最基本的要求。”他继续告诉记者:“这得益于袋鼠云的技术团队多数来自于阿里云,针对业务暴增、恶劣环境等极端情况下的峰值保障应急处理的技术与能力具有相当的经验。”记者还了解到,袋鼠云现在的技术团队都曾经历过“天猫双11”等等大型活动,并协助茅台、百草味、秒钱、申通E等多家公司顺利完成了大促护航等工作。

记者观察:一方面基于人才技术优势打造团队“硬气功”,另一方面深化客户项目落地可视化效果的“软实力”,在袋鼠云眼中一个睥睨新业界的发展蓝图已清晰可见。

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档