首页

关于Vuex的全家桶状态管理(一)

seo达人

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

1:安装

 npm install vuex --save
    
  • 1

2: 在main.js 主入口js里面引用store.js

import Vue from 'vue' import App from './App' import router from './router' import store from './vuex/store' //引用store.js Vue.config.productionTip = false //阻止在启动时生成生产提示 //vue实例 new Vue({
 el: '#app',
 router,
 store, //把store挂在到vue的实例下面 template: '<App/>',
 components: { App }
})
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

3:在store.js里引用Vuex

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //注册Vuex // 定义常量  如果访问他的话,就叫访问状态对象 const state = {
  count: 1 } // mutations用来改变store状态, 如果访问他的话,就叫访问触发状态 const mutations = { //这里面的方法是用 this.$store.commit('jia') 来触发 jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} //暴露到外面,让其他地方的引用 export default new Vuex.Store({
  state,
  mutations
})
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

4:在vue组件中使用

使用$store.commit(‘jia’)区触发mutations下面的加减方法

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{$store.state.count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <!-- 加上scoped是css只在这个组件里面生效,为了不影响全局样式 --> <style scoped> h5{ font-size: 20px; color: red; } </style>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

这里写图片描述

5:state访问状态对象

使用computed计算

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @click="$store.commit('jian')">-</button> </p> </p> </template> <script> import {mapState} from 'vuex' export default{
  name:'hello', //写上name的作用是,如果你页面报错了,他会提示你是那个页面报的错,很实用 // 方法一 // computed: { //  count(){ //   return this.$store.state.count + 6 //  } // } // 方法二 需要引入外部 mapState computed:mapState({
   count:state => state.count + 10 }) // ECMA5用法 // computed:mapState({ //  count:function(state){ //   return state.count //  } // }) //方法三 // computed: mapState([ //  'count' // ]) } </script>
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

原生js的ajax请求

周周

传统方法的缺点:

      传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

什么是ajax

       ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest 对象

       XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

方法
描述
abort()
停止当前请求
getAllResponseHeaders() 
 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")
返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])
建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数,是否异步,用户名,密码
send(content)
向服务器发送请求
setRequestHeader("header", "value") 
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )
五步使用法:

       1.创建XMLHTTPRequest对象
       2.使用open方法设置和服务器的交互信息
       3.设置发送的数据,开始和服务器端交互
       4.注册事件
       5.更新界面

下面给大家列出get请求和post请求的例子

get请求:      

       //步骤一:创建异步对象
       var ajax = new XMLHttpRequest();
       //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
       ajax.open('get','getStar.php?starName='+name);
       //步骤三:发送请求
        ajax.send();
       //步骤四:注册事件 onreadystatechange 状态改变就会调用
        ajax.onreadystatechange = function () {
       if (ajax.readyState==4 &&ajax.status==200) {
       //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
       console.log(xml.responseText);//输入相应的内容
         }
        } 

post请求:

       //创建异步对象  
       var xhr = new XMLHttpRequest();
       //设置请求的类型及url
       //post请求一定要添加请求头才行不然会报错
       xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xhr.open('post', '02.post.php' );
       //发送请求
       xhr.send('name=fox&age=18');
       xhr.onreadystatechange = function () {
       // 这步为判断服务器是否正确响应
       if (xhr.readyState == 4 && xhr.status == 200) {
              console.log(xhr.responseText);
             }
        };    

为了方便使用,我们可以把他封装进方法里面,要用的时候,直接调用就好了

       function ajax_method(url,data,method,success) {
       // 异步对象
       var ajax = new XMLHttpRequest();

      // get 跟post  需要分别写不同的代码
      if (method=='get') {
          // get请求
          if (data) {
              // 如果有值
              url+='?';
              url+=data;
          }else{

         }      

       // 设置 方法 以及 url
            ajax.open(method,url);

           // send即可
           ajax.send();
        }else{
             // post请求
             // post请求 url 是不需要改变
             ajax.open(method,url);

            // 需要设置请求报文
           ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

           // 判断data send发送数据
          if (data) {
            // 如果有值 从send发送
                ajax.send(data);
          }else{
               // 木有值 直接发送即可
              ajax.send();
            }
         }     

       // 注册事件
       ajax.onreadystatechange = function () {
       // 在事件中 获取数据 并修改界面显示
            if (ajax.readyState==4&&ajax.status==200) {
                // console.log(ajax.responseText);

                // 将 数据 让 外面可以使用
               // return ajax.responseText;

               // 当 onreadystatechange 调用时 说明 数据回来了
              // ajax.responseText;

              // 如果说 外面可以传入一个 function 作为参数 success
              success(ajax.responseText);
             }
         }
      }

日常APP体验-交互知识点汇总-2

雪涛

Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title



Image title


Image title


Image title


Image title


总结:

大家在日常使用APP过程中也可以带有目的性,发现一些好看的UI或是好的交互点可以截图保存和思考:为什么这么设计?目的是什么?分析其优势之处,还可以和竞品的相似交互进行对比,始终相信“不积跬步 无以至千里”,通过在点滴中慢慢积累,今后当你遇到类似的问题时就可以快速回忆起这些知识点,自然就可以运用自如,thanks~

日常APP体验-交互知识点汇总-1

雪涛

在这里先给大家分享一组近期APP使用过程中发现的UI&交互知识点,大家可以一起学习交流,对于个人观点不认同的可以在下面留言探讨,thanks~

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

【产品即场景】体验先行

雪涛

产品即场景,体验又贯穿整个产品~孰重孰轻早已分不清

Image title

产品即场景,而场景化核心要素之一的“体验”,是其中最重要的一项。

本文从体验出发,结合AARRR(用户增长)模型进行阐述,其中我认为该模型的使用必须是在产品搭建的场景下才能运作的。而其中涉及每一步的良好体验刚好又反哺场景的完善。

从获取-激活-留存-转化-传播每一个步骤中都存在内部因素和外部因素。本文只讲内部因素,产品从最开始的外部获客,转向产品内部的使用体验,再转向外部传播的这么一个过程。

Image title

文章不是教案,更不是真理。希望大家带着批判的眼光去看待每一篇文章。毕竟思辨精神才是形成独立思维的法宝。由于文章较长,我会分成上下两部分发布,进入正文:


获取(ACQUISITION)分为三个部分:


一:自然流量的获取


自然流量的获取,我们能干涉其中的体验非常少,只能打磨产品本身。但是自然流入的用户一定是基于以下几个点中的其中一个或多个。我们或许可以干涉体验前~


1.某个社会现象、热点所引发的相关功能性需求(例如前不久滴滴司机杀害空姐事件,引发多少芳龄少女的恐慌。提高了强烈的安全意识,这时候你会发现App Store里面一款app杀了出来“怕怕”(有兴趣的朋友自行下载体验),正是这个社会热点现象引发的自然流量暴增。当然也不排除产品借这个热点营销自己的产品)


2.某个痛点确确实实需要解决(当某类用户存在某个痛点时,会自己通过搜索或者同类产品对比选择一款产品进行使用,如果你的产品刚好能帮助使用者解决痛点,那么你成功吸引了用户。)


3.纯粹进行产品的体验(产品发烧友、同类竞品的体验人员、无意中下载的等)。我们称为无效流量,因为这部分用户一般是不太可能成为产品的忠实粉丝的。他没有明确的目的、没有明确要解决的痛点。


二:运营推广的获取


运营推广这个名词在互联网诞生之前就已经存在了。只是说原来传统的营销手段即产品-价格-渠道-促销开始逐渐失效。转而变为场景化的运营推广。将推广落实到具体的小场景中。


1.线上推广

其中线上推广包含线上营销活动(营销活动又分为已有话题进行营销【可以选择融入当前的热点话题类似节日、娱乐圈大事件等】&【提供话题痛点解决方案进行营销】和制造话题营销【创造业内的话题】【通过深度用户进行制造话题】、优惠活动(包括邀请好友得好礼、会员优惠、某个节日优惠等)。线上推广无非就是通过网络搭建虚拟场景,通过场景边界的不断延伸,覆盖吸引更多的用户参与进来。


2.线下推广

线下推广包含地推(地推不可避免的会带来2部分的人群:被地推活动中的奖品吸引的人;确实被产品的介绍所吸引的人)、海报&代言(同样会有2部分人群:被明星效应所吸引的人;被产品介绍所吸引的人)、门店的互相导流合作。线下推广效率远远没有线上推广来的快。但是对于需要线下场景的产品来说,这又是必不可少的。


三:社群自传播


通过单点击破,这就需要运营团队有很好的洞察能力,找到符合产品调性的社群,通过事件引爆该社群或者社区,让社群成为你产品的拥护者和传播者。


1.通过老带新的模式进行获取用户

当产品与老用户之间建立很好的纽带关系后,老用户自然会以个人为中心,向外帮你宣传产品。


2.引爆社群

通过各类社区,找到符合你产品的目标人群。通过对该社群的研究,运用社群内部语言或者表达,调动整个社群帮你发力。有点及面的扩散,称之为“气球理论(很细的一根针就能戳爆气球)”这同样是能引爆传播性特别重要的一点。


3.参与感(社会关系绑定)

当你周围的人都在转发或者都在使用的时候,如果你不了解或不使用的话,会引起个体的孤独感。也就是说“他们都在玩,我不玩就落伍了”,但是这种情况在产品推广的前期一般不太会出现。当传播势能达到一定程度的时候,才会出现刷爆朋友圈!


激活(ACTIVATION)分为二个部分:


当用户从外部导流进产品后,这时用户的去或留都跟产品&业务有关。如何让用户在进入产品后自然而然的进行使用也就是防呆原则。对,通过引导或者吸引使用者进行下一步操作。(打个比方,你去一家陌生的餐厅,进去后没任何人招呼你,没人告诉你要去选位置或者点菜,是不是有不知所措的感觉,我想你很快就会另寻他家吧)


一:进入产品后的操作引导


1.视觉引导(包括页面元素优先级、页面元素突出强弱进行视觉上的引导,很常见的就是:在你第一次使用某个产品时,会引导使用者进行第一步第二步的操作,降低用户对产品的陌生感)


2.动效引导(通过页面浮层的形式教育用户如何进行操作,这也是在产品设计中,对新用户的一种引导方式)说到底就是为了消除用户对新鲜事物的陌生感和手足无措感。


二:产品本身是否能激起用户的探索欲


当然这个问题本身是建立在是否能真正的帮助用户解决某些方面的痛点。否则再强的探索欲,也跟你产品本身没有关系。如何激起用户的探索欲?


1.产品整体视觉表现、使用流程的体验是不是够吸引人,是不是有属于产品本身吸引人的点。(当年的path效果,直接将它送上全民热潮之巅)


2.产品是否对使用者产生持续的吸引能力,产品前期只有不断的通过各种方式刺激用户。(产品体验优化、活动力度、宣传方式、让惠让利等)但需要注意的是:过度营销不等于有效刺激。


3.产品的任务流程设置是否合理,正常情况都是由简单到复杂的程度设置任务,由于用户的沉默成本,当完成一定任务后,就会沉淀下来慢慢成为产品的忠实用户。(摩拜产品是先让用户填写个人信息,最后才提示充值押金,站在使用者的角度来看,已经把个人信息都出卖给平台了,还在乎那200多块钱吗?不然你让他把流程倒过来试试,先充钱,再填信息。保证没多少人会用)。流程设置就像钩子一样,慢慢慢慢的把用户勾住。


上半部分先到这里,下半部分会从“留存”“转化”“传播”角度进行展开~


多数人能够成为很厉害的设计师,很厉害的产品经理。凡事都会有所谓的套路,当你熟知了解某个行业,或者多个行业的套路时。你会站在更高的视角看待问题,同样你会走的比人家更远更快。所谓的套路,是基于个人而言,可能你有个很好的导师能够告诉你以往的经验。但是我更认为,套路是通过一步步看似笨拙的努力不断总结不断归纳

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

博博


听云 2016-04-18 10:49:28

早在1995年,尼尔森的十大可用性原则就已问世,虽然当时针对的是web交互设计,但易用性对任何拥有用户界面的东西来说都适用。不管是网站,程序,移动页面或其他,具体的规则可能不同,但总的原则都源自人类上万年进化所形成的思维方式。

1、可见性原则

用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。“即时”是指页面响应时间小于用户能忍受的等待时间。保证页面内容的可见性、状态的可见性、状态变化的可见性。

在用户与应用的交互过程中,系统需要即时的给予用户反馈。如果用户在操作过程中,页面出现一片空白,不清楚应用是否给予了用户反馈,这时候用户就会感到焦虑、恐慌,这些都是不符合可见原则的。看起来非常基础的要求,其实很多产品都做不到或者没做好。

有一部分App,在弱网情况下信息未加载完成时,显示空白页,无法给用户任何信息。

现在来看一款可见性做的比较好的App

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

如上图,关掉WIFI在2.5G的网络情况下首次进入这个App,主页面内容虽然迟迟加载不出内容,但是有一个提示能够告诉用户,当前正在做什么,是怎样的进度。并且“内容炼成中”这句有二次元味道的提示,使App的整体感非常好,而且图片一定程度上分散了注意力,使用户对加载的时间不那么的敏感,为弱网环境下内容的加载争取了时间。

2、场景贴切原则

网页的一切表现和表述,应该尽可能贴近用户所在的环境(年龄、学历、文化、时代背景)。此外,还应该使用易懂和约定俗成的表达。

在做产品设计的时候,主要考虑到的是用户使用场景。产品的功能要贴近目标用户的真实使用环境,这一点非常重要。用两款导航类产品举例:

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

还原一下导航时部分使用场景,比如在一个陌生的城市开车,需要使用导航,输入目的地,大部分的情况下手机不是手持状态,观察的模式也是以眼睛扫描为主。

在这个页面上的设计,大部分的信息对我第一诉求导航并没有直接的帮助,如果要输入一个目的地,需要用寻找的方式去使用它。输入框非常窄,不好找到,使用场景下导航并不贴切。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

相比之下看到锤子驾驶的界面,作为一款导航类的应用,它教科书式的讲解了什么是场景贴切原则。在开车的时候只要用眼睛扫一下手机屏幕就可以知道要导航的功能位置,并且可点击区域巨大,非常容易选中。

选中导航后优先用语音搜索目的地,这样可以减少对驾驶的影响。下方巨大的List也让用户比较容易的去点击最近去过的地方。这样就非常符合用户在驾驶中,或者说非手持状态的使用习惯。

3、可控原则

为了避免用户的误用和误击,网页应提供撤销和重做功能。用户对当前的状况很好地控制了解和掌控,并且有足够的自由。

掌握、可控、自由是人类安全感的重要来源,如果使用一款产品的时候提心吊胆的,生怕点击了某个按钮就发生了错误,很难相信这样的一款App有好的用户体验。有一个用户交互的金句:操作前可预知、操作中可有反馈、操作后可撤销。

像iPhone 的出现,为可控原则做了最好的注解,Home键也是教科书式的可控原则的体现。无论你在哪里,遇到了什么问题,一键回到桌面,一切重新开始。

4、一致性原则:

同一用语、功能、操作保持一致。用户需要在同一个产品中,接受同一套规范、逻辑。

这样做的一个好处是可以让用户对App有一个整体的感知,在相同的背景下做相同的操作会有可预期的结果,这样大大的降低了用户的学习成本。如下图这个出行类App,点击了旅行休闲,结果跳转了一个莫名其妙的页面。内容与旅行没有关系,违背了一致性。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

5、放错原则

通过网页的设计、重组或特别提醒或安排,防止用户出错。

这方面很多成熟的实体产品都比较好。App中这种防错设计随处可见,比如订票软件,已经过去的日期显示为灰色,以防订错机票的错误。

6、协助用户记忆原则

在需要记忆某些信息时,产品功能上要帮助用户记忆。尽可能减少用户回忆负担,把需要记忆的内容摆上台面。

7、灵活的原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计,不要低估,也不可轻视,保持灵活。

移动端的用户大多数不是专家级用户,也不是小白用户。对页面的设计要更侧重于满足对大多数用户的需求,不宜复杂,也不宜过于简单无提示。

8、易扫原则

互联网用户浏览网页的动作不是读,不是看,而是扫。易扫,意味着突出重点,弱化和剔除无关信息。

在时候用一款陌生产品的时候,用户绝大多数是使用扫描的方式而不是阅读的方式来理解内容。如果想让用户快速发现想要的信息,就一定要保证页面足够清晰,简约。如果有较多的信息需要展示,那么一定要分清主次,要求界面足够简单,突出重点,内容易读。

9、容错性

帮助用户从错误中恢复,将损失降到。如果无法自动挽回,则提供详尽的说明文字和指导方向,而非代码,比如404。

例如各类应用中要恢复出厂设置,是一个比较重大的操作

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

所以在恢复出场设置前需要输入解锁图案。这就是容错性的一个体现。对于用户正在进行的操作有着明显的提示,避免了误按误点操作造成的损失。

10、人性化帮助原则

帮助性提示最好的方式是:1、无需提示2、一次性提示3、常驻提示4、帮助文档。

一个系统或者是产品,如果不需要文档或是提示是最好的,一切都是自然而然发生的。但是在很多情况下,需要对内容做一个提示或者帮助,来便于用户更好的使用App。

帮助和提示在哪里用的比较多呢?设置。在设置页面里,可以看到无线网络、定位服务等是否打开,而中间遇到比较复杂的操作,用户对此一知半解,这时候就需要有相关的帮助提示。

现在几乎所有的移动端交互设计全部基于用户体验,而在定位准、细分市场准,遵守了尼尔森十大原则的情况下,还有一些问题是每个产品研发团队不能避免且无法解决的。

在每个产品的不同生命周期中,侧重点也会不同。初期注重种子用户的培养与新功能的增加。到了成长期会经历版本的频繁发布,系统不够稳定。这时候就需要用到更加专业的第三方工具去帮助应用发布后的性能问题进行管理。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

在产品真正上线后可以及时进行崩溃分析、网络请求与错误分析,交互分析等等通过App的总体性能评分与在同行业竞争中所处的位置来不断迭代产品,改进用户体验。

设计规范 | Web端设计组件篇-反馈类

博博


企服盒 2018-04-08 10:52:48

本篇讲述的是feedback反馈类;反馈就是用户做了某项操作之后,系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。

设计规范 | Web端设计组件篇-反馈类

设计规范中最重要的部分就是组件规范了,制定组件的规范有哪些好处呢?

  1. 简单:熟悉了解组件的用法之后,在做界面设计时,只需要合理运用组件就可以快速搭建web端界面,无差错。由于有成套的组件规范,所以在交互设计和视觉设计过程中无需每次都重复劳动。

  2. 统一用户体验:由于使用了统一的组件规范,所以保证了的视觉和交互设计统一性,保证整体的用户体验性。

  3. 提升设计综合能力:由于减少了做组件重复性劳动,交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务创新。

根据组件的用途,可以分为六大类:Feedback 反馈、from 表单、basic 基础、data 数据 、navigation 导航、other 其他。

设计规范 | Web端设计组件篇-反馈类

本篇讲述的是feedback反馈类;反馈就是用户做了某项操作之后,系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。

toast

定义:用户产生操作,出现toast提示,一般2-3s消失;通过toast中的提示语告知用户需要了解的信息。让用户的行为在使用过程中得到反馈和帮助。

使用场景:

  1. 可提供成功、警告或错误等反馈信息。

  2. 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。

例如简书在没有上传专题封面时就点击创建专题按钮,出现toast提示,提示用户要先上传专题封面才能创建专题。

设计规范 | Web端设计组件篇-反馈类

toast的消息提示分类一共有三种类型:成功类、失败类、常规类。

组件样式有两种:可以点击操作使其消失、不可点击操作使其消失。

设计规范 | Web端设计组件篇-反馈类

alert 警示提示

定义:当用户进行某种操作时,网站会出现对应的警告信息提示用户,该提示信息的状态不会主动消失。

使用场景:

  1. 当某个页面需要向用户显示警告的信息时。

  2. 非浮层的静态展现形式,始终展现,不会自动消失,有的组件用户可以点击关闭。

例如淘宝购物车,删除之后,会出现alert警示提示,淘宝的例子属于alert的变种,用户可以点击“撤销本次删除 ”进行还原之前的毁灭性操作。

设计规范 | Web端设计组件篇-反馈类

alert警示提示的消息分类一共有三种类型:成功类、失败类、常规类。当然也可以不含有icon操作,含有icon操作的话警示性会更强。

alert警示组件样式有两种:带有删除操作,不带有删除操作。

设计规范 | Web端设计组件篇-反馈类

dialog对话框

定义:用于提示用户当前操作,或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式,也可以是自定义复杂的模式,例如表单的填写。

使用场景:

  1. 用户在进行重要操作的时,需要进行二次确认。

  2. 用于重要的反馈提示,让用户知道信息提示。

  3. 承载少量的表单填写类,减少页面的跳转。

windows系统的确定按钮一般在左边,而Mac OS的确定一般在右边。因为这个原因,导致我们平时看到的确定有时候在左边,有时候在右边。

微博和微信公众号后台的的对话框,确定在左边,而淘宝的对话框在右边。微信公众号的对话框是小浮层弹窗,避免了遮罩出现,同时对话框也出现在操作按钮的附近,对用户的干扰性也是最弱的。

dialog对话框,有三种常见的使用场景。其中表单对话框、提示类、轻量级提示类、表单类样式都是基于二次确认类对话框样式的改变而得到不同的样式。

设计规范 | Web端设计组件篇-反馈类

Notification通知提醒框

定义:悬浮出现在网页右上角,用于全局的提醒式通知。常见于服务器异常、操作失败等

使用场景:

  1. 较为复杂的通知内容。

  2. 带有交互的通知,给出用户下一步的行动点。

  3. 系统主动推送。

Notification通知提醒框出现在网页右上角,一般4-5s消失,也可以点击叉号进行关闭。

设计规范 | Web端设计组件篇-反馈类

tooltip 文字提示

定义:简单轻量的的文字提示。

使用场景:

  1. 鼠标移入则立即显示提示,移出则立即消失,不承载复杂文本和操作。

  2. 常用于解释操作按钮的文字说明。

还有一种tooltip是浏览器自带的,浏览器自带的和本篇的tooltip的区别是:浏览器自带的鼠标移入一般2s才显示,多用于折行打点的文字提示。例如简书,而本篇的tooltip鼠标移入就出现,切组件风格和浏览器自带完全不一样。

设计规范 | Web端设计组件篇-反馈类

tooltip组件按照需要解释说明的对象位置不同,可以有以下不同的样式。

设计规范 | Web端设计组件篇-反馈类


UI设计的4个角度与14点思考

博博


设计师柠檬 2018-04-26 15:22:57

写在前面的话:文章内容源于网络,由柠檬整理发布,如有侵权请联系设计师柠檬删除

都说UI设计是用户看到产品的第一个门,从进入手机应用商店到下载界面再到产品的首页,设计师不考虑一下真的用交互稿和产品直接做么,从图标在应用商店的吸引展示力和用户的软件留存率,这些哪个不是和UI设计师有关系?

本文重点:1.学着像产品经理的角度思考

2.学着像交互设计师的角度思考

3.学着在用户的角度思考

4.学着在自己的角度思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考


2018网页UI设计:轻松搞定视觉层次感

蓝蓝

众所周知,相较于平淡无奇,毫无重点的网页UI设计,具有良好视觉层次结构的网页UI设计更受用户青睐。为什么呢?答案其实很简单。极赋视觉层次感的页面设计不仅极具设计美感,取悦用户身心。而且还建立了清晰直观的视觉层级, 方便用户简单快速的识别和读取需要的页面内容,从而提升用户体验,降低跳出率。

如何利用 “峰终定律” 改善用户体验?

雪涛

一、什么是峰终定律

峰终定律是由诺贝尔奖得主 DanielKahneman 提出的,百度百科上它是属于心理学上的定义。

我把它结合了自己的理解应用在设计学上可以解释为:

用户在使用某个硬件产品,软件产品或者服务系统来完成自己目标的过程中,用户情感地图曲线的波峰(体验最好)、波谷(体验最差)、结束点的体验,决定用户对整个过程的体验评价。

而在过程中体验好与不好体验的比重,好与不好体验的时间长短,对记忆几乎没有影响。

这一定律主要是阐述人对过去体验的记忆由两个因素决定,一个是「高峰」,一个是「结束」。

把用户情感地图曲线和峰终定律结合起来,简单画一张图:

既然用户整体体验与整个过程中好坏综合无关,只跟几个关键点有关,那么可以得到一个公式:

用户整体体验评价(E)=(y1-y2)+y3

y1,y2,y3 可以称为关键时刻 MOT(Moment Of Truth)

二、日常生活中的峰终定律

这两天和包子聊到宜家的峰终定律,突然明白了为什么我们有些课程调研,大家都喜欢去宜家调研了。

虽然它的店员很少,找货物也要自己找椅子搬下来,就算只买一件家具也需要逛完整个商场,但是每次逛完结束的时候都可以吃那个特别好吃的「一元冰淇淋」呀,这就是它的「终」。

而在逛的过程中,就像包子讲的,它的体验模式很棒,把产品作为空间的一部分。曾经有一位宜家的老顾客也说,宜家商品物有所值,展区实用,产品随意试用,大概这就是它的「峰」吧。

扔一个我的学习小伙伴包大佬的分析:

三、互联网产品中的峰终定律

如果说峰终定律怎么影响互联网产品的用户体验的话,可以先举几个体验差的例子。

很多时候,用户在某个平台完成某个任务后,会出现很多引诱用户点击的赞助商的内容。比如问卷星,每次填完,任务结束的时候,它还会打着抽奖的名义接广告……

再举个例子,你有没有过在某些 app 注册账号,登录 or 注册很多次却失败的情况,或者花了很久时间才注册 or 登录成功?原因可能是账号密码错误,可能是注册流程过多跳出率过高,可能是填写信息冗杂……

如果这款产品不是用户刚需的话,最终会导致很多用户卸载它,就算你之后流程的体验再好,用户根本无法体验到最后。

四、利用峰终定律打造「爽点」

一款好的产品不仅能够解决用户的「痛点」,也能刺激用户的「痒点」,更能打造用户的「爽点」。

有一些产品能在用户使用的过程中利用峰终定律打造 「爽点」,提升用户体验。

如果用外卖这个来举例子的话,应该算是一个大的服务系统,它会涉及到很多方,比如消费者,商家,骑手等,而这一整个服务系统的设计,只针对消费者而言,流程也会十分复杂,其中利用峰终定律考虑的就更多了。

那就其中用户(消费者)与饿了么 app 的交互流程来举例的话,用户点外卖这个任务:

从打开 app——选择店——选择美食——付款,用户的任务已经结束了,但是饿了么会在结束的时候,给用户一个分享领取红包的福利,用户会觉得自己获得了很大的优惠,体验会十分好,这也就是利用了峰终定律的「终」。

我发现游戏里面对峰终定律是用得最多的,曾经玩过 lol,王者荣耀,吃鸡手游……

如果问曾经玩 lol 或者王者最爽的时候是什么时候,那大概是:比赛过程中的 First blood,penta kill ,killing spree,legendary,you have slained an enermy 等这些配音和画面的视觉刺激吧。

按照常规的模式是,杀人后系统直接提示「您已经杀灭了一名敌人」,但是它会去强化这种杀人的体验,将杀人的场景分为多种类型,通过视觉上的弹框击杀提示与配音上的激励叠加,把杀人的体验不断深化,做到,另外在推塔和偷掉水晶的时候是不是也是最爽的时候呢?我觉得这里就利用了峰终定律的「峰」。

我记得在游戏结束的时候,比如 lol 里面推掉水晶的时候,游戏画面会停止几秒,然后再出现水晶慢慢破灭,加上大大的「胜利」二字,有的时候回到大厅还需要等几秒的时间。

王者荣耀,吃鸡这类在游戏结束的时候也会给用户很多激励,明明可以在结束后直接回到大厅,但它们会延长这些胜利或者失败的体验,如果胜利,当然是爽,还想再拥有这样的体验,继续打;如果是失败,那再接再厉,想拥有赢的体验,继续打……

总之就是会让用户上瘾。它们会把这些用户体验做到,在游戏结束的时候这些的体验就利用到了峰终定律的「终」。

五、利用峰终定律改善体验步骤

「峰终定律」改善用户体验的步骤:

  • 进行可用性测试;
  • 绘制用户旅程图;
  • 找到「峰」,「终」时刻;
  • 通过用户研究的方法找到用户心中的关键时刻;
  • 将「峰」、「终」,「用户心中关键时刻」的体验优化至。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档