首頁

關(guān)于Vuex的全家桶狀態(tài)管理(一)

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

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 //阻止在啟動時生成生產(chǎn)提示 //vue實(shí)例 new Vue({
 el: '#app',
 router,
 store, //把store掛在到vue的實(shí)例下面 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 // 定義常量  如果訪問他的話,就叫訪問狀態(tài)對象 const state = {
  count: 1 } // mutations用來改變store狀態(tài), 如果訪問他的話,就叫訪問觸發(fā)狀態(tài) const mutations = { //這里面的方法是用 this.$store.commit('jia') 來觸發(fā) 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’)區(qū)觸發(fā)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訪問狀態(tài)對象

使用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的作用是,如果你頁面報錯了,他會提示你是那個頁面報的錯,很實(shí)用 // 方法一 // 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>
藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

原生js的ajax請求

周周

傳統(tǒng)方法的缺點(diǎn):

      傳統(tǒng)的web交互是用戶觸發(fā)一個http請求服務(wù)器,然后服務(wù)器收到之后,在做出響應(yīng)到用戶,并且返回一個新的頁面,,每當(dāng)服務(wù)器處理客戶端提交的請求時,客戶都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務(wù)器端得到很簡單的一個數(shù)據(jù),都要返回一個完整的HTML頁,而用戶每次都要浪費(fèi)時間和帶寬去重新讀取整個頁面。這個做法浪費(fèi)了許多帶寬,由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請求,應(yīng)用的響應(yīng)時間就依賴于服務(wù)器的響應(yīng)時間。這導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用慢得多。

什么是ajax?

       ajax的出現(xiàn),剛好解決了傳統(tǒng)方法的缺陷。AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。

XMLHttpRequest 對象

       XMLHttpRequest對象是ajax的基礎(chǔ),XMLHttpRequest 用于在后臺與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。目前所有瀏覽器都支持XMLHttpRequest。

方法
描述
abort()
停止當(dāng)前請求
getAllResponseHeaders() 
 把HTTP請求的所有響應(yīng)首部作為鍵/值對返回
getResponseHeader("header")
返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])
建立對服務(wù)器的調(diào)用。method參數(shù)可以是GET、POST或PUT。url參數(shù)可以是相對URL或絕對URL。這個方法還包括3個可選的參數(shù),是否異步,用戶名,密碼
send(content)
向服務(wù)器發(fā)送請求
setRequestHeader("header", "value") 
把指定首部設(shè)置為所提供的值。在設(shè)置任何首部之前必須先調(diào)用open()。設(shè)置header并和請求一起發(fā)送 ('post'方法一定要 )
五步使用法:

       1.創(chuàng)建XMLHTTPRequest對象
       2.使用open方法設(shè)置和服務(wù)器的交互信息
       3.設(shè)置發(fā)送的數(shù)據(jù),開始和服務(wù)器端交互
       4.注冊事件
       5.更新界面

下面給大家列出get請求和post請求的例子

get請求:      

       //步驟一:創(chuàng)建異步對象
       var ajax = new XMLHttpRequest();
       //步驟二:設(shè)置請求的url參數(shù),參數(shù)一是請求的類型,參數(shù)二是請求的url,可以帶參數(shù),動態(tài)的傳遞參數(shù)starName到服務(wù)端
       ajax.open('get','getStar.php?starName='+name);
       //步驟三:發(fā)送請求
        ajax.send();
       //步驟四:注冊事件 onreadystatechange 狀態(tài)改變就會調(diào)用
        ajax.onreadystatechange = function () {
       if (ajax.readyState==4 &&ajax.status==200) {
       //步驟五 如果能夠進(jìn)到這個判斷 說明 數(shù)據(jù) 完美的回來了,并且請求的頁面是存在的
       console.log(xml.responseText);//輸入相應(yīng)的內(nèi)容
         }
        } 

post請求:

       //創(chuàng)建異步對象  
       var xhr = new XMLHttpRequest();
       //設(shè)置請求的類型及url
       //post請求一定要添加請求頭才行不然會報錯
       xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xhr.open('post', '02.post.php' );
       //發(fā)送請求
       xhr.send('name=fox&age=18');
       xhr.onreadystatechange = function () {
       // 這步為判斷服務(wù)器是否正確響應(yīng)
       if (xhr.readyState == 4 && xhr.status == 200) {
              console.log(xhr.responseText);
             }
        };    

為了方便使用,我們可以把他封裝進(jìn)方法里面,要用的時候,直接調(diào)用就好了。

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

      // get 跟post  需要分別寫不同的代碼
      if (method=='get') {
          // get請求
          if (data) {
              // 如果有值
              url+='?';
              url+=data;
          }else{

         }      

       // 設(shè)置 方法 以及 url
            ajax.open(method,url);

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

            // 需要設(shè)置請求報文
           ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

           // 判斷data send發(fā)送數(shù)據(jù)
          if (data) {
            // 如果有值 從send發(fā)送
                ajax.send(data);
          }else{
               // 木有值 直接發(fā)送即可
              ajax.send();
            }
         }     

       // 注冊事件
       ajax.onreadystatechange = function () {
       // 在事件中 獲取數(shù)據(jù) 并修改界面顯示
            if (ajax.readyState==4&&ajax.status==200) {
                // console.log(ajax.responseText);

                // 將 數(shù)據(jù) 讓 外面可以使用
               // return ajax.responseText;

               // 當(dāng) onreadystatechange 調(diào)用時 說明 數(shù)據(jù)回來了
              // ajax.responseText;

              // 如果說 外面可以傳入一個 function 作為參數(shù) success
              success(ajax.responseText);
             }
         }
      }

日常APP體驗-交互知識點(diǎn)匯總-2

資深UI設(shè)計者

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


總結(jié):

大家在日常使用APP過程中也可以帶有目的性,發(fā)現(xiàn)一些好看的UI或是好的交互點(diǎn)可以截圖保存和思考:為什么這么設(shè)計?目的是什么?分析其優(yōu)勢之處,還可以和競品的相似交互進(jìn)行對比,始終相信“不積跬步 無以至千里”,通過在點(diǎn)滴中慢慢積累,今后當(dāng)你遇到類似的問題時就可以快速回憶起這些知識點(diǎn),自然就可以運(yùn)用自如,thanks~

日常APP體驗-交互知識點(diǎn)匯總-1

資深UI設(shè)計者

在這里先給大家分享一組近期APP使用過程中發(fā)現(xiàn)的UI&交互知識點(diǎn),大家可以一起學(xué)習(xí)交流,對于個人觀點(diǎn)不認(rèn)同的可以在下面留言探討,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

【產(chǎn)品即場景】體驗先行

資深UI設(shè)計者

產(chǎn)品即場景,體驗又貫穿整個產(chǎn)品~孰重孰輕早已分不清

Image title

產(chǎn)品即場景,而場景化核心要素之一的“體驗”,是其中最重要的一項。

本文從體驗出發(fā),結(jié)合AARRR(用戶增長)模型進(jìn)行闡述,其中我認(rèn)為該模型的使用必須是在產(chǎn)品搭建的場景下才能運(yùn)作的。而其中涉及每一步的良好體驗剛好又反哺場景的完善。

從獲取-激活-留存-轉(zhuǎn)化-傳播每一個步驟中都存在內(nèi)部因素和外部因素。本文只講內(nèi)部因素,產(chǎn)品從最開始的外部獲客,轉(zhuǎn)向產(chǎn)品內(nèi)部的使用體驗,再轉(zhuǎn)向外部傳播的這么一個過程。

Image title

文章不是教案,更不是真理。希望大家?guī)е械难酃馊タ创恳黄恼?。畢竟思辨精神才是形成?dú)立思維的法寶。由于文章較長,我會分成上下兩部分發(fā)布,進(jìn)入正文:


獲?。ˋCQUISITION)分為三個部分:


一:自然流量的獲取


自然流量的獲取,我們能干涉其中的體驗非常少,只能打磨產(chǎn)品本身。但是自然流入的用戶一定是基于以下幾個點(diǎn)中的其中一個或多個。我們或許可以干涉體驗前~


1.某個社會現(xiàn)象、熱點(diǎn)所引發(fā)的相關(guān)功能性需求(例如前不久滴滴司機(jī)殺害空姐事件,引發(fā)多少芳齡少女的恐慌。提高了強(qiáng)烈的安全意識,這時候你會發(fā)現(xiàn)App Store里面一款app殺了出來“怕怕”(有興趣的朋友自行下載體驗),正是這個社會熱點(diǎn)現(xiàn)象引發(fā)的自然流量暴增。當(dāng)然也不排除產(chǎn)品借這個熱點(diǎn)營銷自己的產(chǎn)品)


2.某個痛點(diǎn)確確實(shí)實(shí)需要解決(當(dāng)某類用戶存在某個痛點(diǎn)時,會自己通過搜索或者同類產(chǎn)品對比選擇一款產(chǎn)品進(jìn)行使用,如果你的產(chǎn)品剛好能幫助使用者解決痛點(diǎn),那么你成功吸引了用戶。)


3.純粹進(jìn)行產(chǎn)品的體驗(產(chǎn)品發(fā)燒友、同類競品的體驗人員、無意中下載的等)。我們稱為無效流量,因為這部分用戶一般是不太可能成為產(chǎn)品的忠實(shí)粉絲的。他沒有明確的目的、沒有明確要解決的痛點(diǎn)。


二:運(yùn)營推廣的獲取


運(yùn)營推廣這個名詞在互聯(lián)網(wǎng)誕生之前就已經(jīng)存在了。只是說原來傳統(tǒng)的營銷手段即產(chǎn)品-價格-渠道-促銷開始逐漸失效。轉(zhuǎn)而變?yōu)閳鼍盎倪\(yùn)營推廣。將推廣落實(shí)到具體的小場景中。


1.線上推廣

其中線上推廣包含線上營銷活動(營銷活動又分為已有話題進(jìn)行營銷【可以選擇融入當(dāng)前的熱點(diǎn)話題類似節(jié)日、娛樂圈大事件等】&【提供話題痛點(diǎn)解決方案進(jìn)行營銷】和制造話題營銷【創(chuàng)造業(yè)內(nèi)的話題】【通過深度用戶進(jìn)行制造話題】、優(yōu)惠活動(包括邀請好友得好禮、會員優(yōu)惠、某個節(jié)日優(yōu)惠等)。線上推廣無非就是通過網(wǎng)絡(luò)搭建虛擬場景,通過場景邊界的不斷延伸,覆蓋吸引更多的用戶參與進(jìn)來。


2.線下推廣

線下推廣包含地推(地推不可避免的會帶來2部分的人群:被地推活動中的獎品吸引的人;確實(shí)被產(chǎn)品的介紹所吸引的人)、海報&代言(同樣會有2部分人群:被明星效應(yīng)所吸引的人;被產(chǎn)品介紹所吸引的人)、門店的互相導(dǎo)流合作。線下推廣效率遠(yuǎn)遠(yuǎn)沒有線上推廣來的快。但是對于需要線下場景的產(chǎn)品來說,這又是必不可少的。


三:社群自傳播


通過單點(diǎn)擊破,這就需要運(yùn)營團(tuán)隊有很好的洞察能力,找到符合產(chǎn)品調(diào)性的社群,通過事件引爆該社群或者社區(qū),讓社群成為你產(chǎn)品的擁護(hù)者和傳播者。


1.通過老帶新的模式進(jìn)行獲取用戶

當(dāng)產(chǎn)品與老用戶之間建立很好的紐帶關(guān)系后,老用戶自然會以個人為中心,向外幫你宣傳產(chǎn)品。


2.引爆社群

通過各類社區(qū),找到符合你產(chǎn)品的目標(biāo)人群。通過對該社群的研究,運(yùn)用社群內(nèi)部語言或者表達(dá),調(diào)動整個社群幫你發(fā)力。有點(diǎn)及面的擴(kuò)散,稱之為“氣球理論(很細(xì)的一根針就能戳爆氣球)”這同樣是能引爆傳播性特別重要的一點(diǎn)。


3.參與感(社會關(guān)系綁定)

當(dāng)你周圍的人都在轉(zhuǎn)發(fā)或者都在使用的時候,如果你不了解或不使用的話,會引起個體的孤獨(dú)感。也就是說“他們都在玩,我不玩就落伍了”,但是這種情況在產(chǎn)品推廣的前期一般不太會出現(xiàn)。當(dāng)傳播勢能達(dá)到一定程度的時候,才會出現(xiàn)刷爆朋友圈!


激活(ACTIVATION)分為二個部分:


當(dāng)用戶從外部導(dǎo)流進(jìn)產(chǎn)品后,這時用戶的去或留都跟產(chǎn)品&業(yè)務(wù)有關(guān)。如何讓用戶在進(jìn)入產(chǎn)品后自然而然的進(jìn)行使用也就是防呆原則。對,通過引導(dǎo)或者吸引使用者進(jìn)行下一步操作。(打個比方,你去一家陌生的餐廳,進(jìn)去后沒任何人招呼你,沒人告訴你要去選位置或者點(diǎn)菜,是不是有不知所措的感覺,我想你很快就會另尋他家吧)


一:進(jìn)入產(chǎn)品后的操作引導(dǎo)


1.視覺引導(dǎo)(包括頁面元素優(yōu)先級、頁面元素突出強(qiáng)弱進(jìn)行視覺上的引導(dǎo),很常見的就是:在你第一次使用某個產(chǎn)品時,會引導(dǎo)使用者進(jìn)行第一步第二步的操作,降低用戶對產(chǎn)品的陌生感)


2.動效引導(dǎo)(通過頁面浮層的形式教育用戶如何進(jìn)行操作,這也是在產(chǎn)品設(shè)計中,對新用戶的一種引導(dǎo)方式)說到底就是為了消除用戶對新鮮事物的陌生感和手足無措感。


二:產(chǎn)品本身是否能激起用戶的探索欲


當(dāng)然這個問題本身是建立在是否能真正的幫助用戶解決某些方面的痛點(diǎn)。否則再強(qiáng)的探索欲,也跟你產(chǎn)品本身沒有關(guān)系。如何激起用戶的探索欲?


1.產(chǎn)品整體視覺表現(xiàn)、使用流程的體驗是不是夠吸引人,是不是有屬于產(chǎn)品本身吸引人的點(diǎn)。(當(dāng)年的path效果,直接將它送上全民熱潮之巔)


2.產(chǎn)品是否對使用者產(chǎn)生持續(xù)的吸引能力,產(chǎn)品前期只有不斷的通過各種方式刺激用戶。(產(chǎn)品體驗優(yōu)化、活動力度、宣傳方式、讓惠讓利等)但需要注意的是:過度營銷不等于有效刺激。


3.產(chǎn)品的任務(wù)流程設(shè)置是否合理,正常情況都是由簡單到復(fù)雜的程度設(shè)置任務(wù),由于用戶的沉默成本,當(dāng)完成一定任務(wù)后,就會沉淀下來慢慢成為產(chǎn)品的忠實(shí)用戶。(摩拜產(chǎn)品是先讓用戶填寫個人信息,最后才提示充值押金,站在使用者的角度來看,已經(jīng)把個人信息都出賣給平臺了,還在乎那200多塊錢嗎?不然你讓他把流程倒過來試試,先充錢,再填信息。保證沒多少人會用)。流程設(shè)置就像鉤子一樣,慢慢慢慢的把用戶勾住。


上半部分先到這里,下半部分會從“留存”“轉(zhuǎn)化”“傳播”角度進(jìn)行展開~


多數(shù)人能夠成為很厲害的設(shè)計師,很厲害的產(chǎn)品經(jīng)理。凡事都會有所謂的套路,當(dāng)你熟知了解某個行業(yè),或者多個行業(yè)的套路時。你會站在更高的視角看待問題,同樣你會走的比人家更遠(yuǎn)更快。所謂的套路,是基于個人而言,可能你有個很好的導(dǎo)師能夠告訴你以往的經(jīng)驗。但是我更認(rèn)為,套路是通過一步步看似笨拙的努力不斷總結(jié)不斷歸納

深度解讀尼爾森十大可用性原則 | 如何做好移動端用戶體驗優(yōu)化

博博


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

早在1995年,尼爾森的十大可用性原則就已問世,雖然當(dāng)時針對的是web交互設(shè)計,但易用性對任何擁有用戶界面的東西來說都適用。不管是網(wǎng)站,程序,移動頁面或其他,具體的規(guī)則可能不同,但總的原則都源自人類上萬年進(jìn)化所形成的思維方式。

1、可見性原則

用戶在網(wǎng)頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應(yīng)即時給出反饋?!凹磿r”是指頁面響應(yīng)時間小于用戶能忍受的等待時間。保證頁面內(nèi)容的可見性、狀態(tài)的可見性、狀態(tài)變化的可見性。

在用戶與應(yīng)用的交互過程中,系統(tǒng)需要即時的給予用戶反饋。如果用戶在操作過程中,頁面出現(xiàn)一片空白,不清楚應(yīng)用是否給予了用戶反饋,這時候用戶就會感到焦慮、恐慌,這些都是不符合可見原則的??雌饋矸浅;A(chǔ)的要求,其實(shí)很多產(chǎn)品都做不到或者沒做好。

有一部分App,在弱網(wǎng)情況下信息未加載完成時,顯示空白頁,無法給用戶任何信息。

現(xiàn)在來看一款可見性做的比較好的App

深度解讀尼爾森十大可用性原則 | 如何做好移動端用戶體驗優(yōu)化

如上圖,關(guān)掉WIFI在2.5G的網(wǎng)絡(luò)情況下首次進(jìn)入這個App,主頁面內(nèi)容雖然遲遲加載不出內(nèi)容,但是有一個提示能夠告訴用戶,當(dāng)前正在做什么,是怎樣的進(jìn)度。并且“內(nèi)容煉成中”這句有二次元味道的提示,使App的整體感非常好,而且圖片一定程度上分散了注意力,使用戶對加載的時間不那么的敏感,為弱網(wǎng)環(huán)境下內(nèi)容的加載爭取了時間。

2、場景貼切原則

網(wǎng)頁的一切表現(xiàn)和表述,應(yīng)該盡可能貼近用戶所在的環(huán)境(年齡、學(xué)歷、文化、時代背景)。此外,還應(yīng)該使用易懂和約定俗成的表達(dá)。

在做產(chǎn)品設(shè)計的時候,主要考慮到的是用戶使用場景。產(chǎn)品的功能要貼近目標(biāo)用戶的真實(shí)使用環(huán)境,這一點(diǎn)非常重要。用兩款導(dǎo)航類產(chǎn)品舉例:

深度解讀尼爾森十大可用性原則 | 如何做好移動端用戶體驗優(yōu)化

還原一下導(dǎo)航時部分使用場景,比如在一個陌生的城市開車,需要使用導(dǎo)航,輸入目的地,大部分的情況下手機(jī)不是手持狀態(tài),觀察的模式也是以眼睛掃描為主。

在這個頁面上的設(shè)計,大部分的信息對我第一訴求導(dǎo)航并沒有直接的幫助,如果要輸入一個目的地,需要用尋找的方式去使用它。輸入框非常窄,不好找到,使用場景下導(dǎo)航并不貼切。

深度解讀尼爾森十大可用性原則 | 如何做好移動端用戶體驗優(yōu)化

相比之下看到錘子駕駛的界面,作為一款導(dǎo)航類的應(yīng)用,它教科書式的講解了什么是場景貼切原則。在開車的時候只要用眼睛掃一下手機(jī)屏幕就可以知道要導(dǎo)航的功能位置,并且可點(diǎn)擊區(qū)域巨大,非常容易選中。

選中導(dǎo)航后優(yōu)先用語音搜索目的地,這樣可以減少對駕駛的影響。下方巨大的List也讓用戶比較容易的去點(diǎn)擊最近去過的地方。這樣就非常符合用戶在駕駛中,或者說非手持狀態(tài)的使用習(xí)慣。

3、可控原則

為了避免用戶的誤用和誤擊,網(wǎng)頁應(yīng)提供撤銷和重做功能。用戶對當(dāng)前的狀況很好地控制了解和掌控,并且有足夠的自由。

掌握、可控、自由是人類安全感的重要來源,如果使用一款產(chǎn)品的時候提心吊膽的,生怕點(diǎn)擊了某個按鈕就發(fā)生了錯誤,很難相信這樣的一款A(yù)pp有好的用戶體驗。有一個用戶交互的金句:操作前可預(yù)知、操作中可有反饋、操作后可撤銷。

像iPhone 的出現(xiàn),為可控原則做了最好的注解,Home鍵也是教科書式的可控原則的體現(xiàn)。無論你在哪里,遇到了什么問題,一鍵回到桌面,一切重新開始。

4、一致性原則:

同一用語、功能、操作保持一致。用戶需要在同一個產(chǎn)品中,接受同一套規(guī)范、邏輯。

這樣做的一個好處是可以讓用戶對App有一個整體的感知,在相同的背景下做相同的操作會有可預(yù)期的結(jié)果,這樣大大的降低了用戶的學(xué)習(xí)成本。如下圖這個出行類App,點(diǎn)擊了旅行休閑,結(jié)果跳轉(zhuǎn)了一個莫名其妙的頁面。內(nèi)容與旅行沒有關(guān)系,違背了一致性。

深度解讀尼爾森十大可用性原則 | 如何做好移動端用戶體驗優(yōu)化

5、放錯原則

通過網(wǎng)頁的設(shè)計、重組或特別提醒或安排,防止用戶出錯。

這方面很多成熟的實(shí)體產(chǎn)品都比較好。App中這種防錯設(shè)計隨處可見,比如訂票軟件,已經(jīng)過去的日期顯示為灰色,以防訂錯機(jī)票的錯誤。

6、協(xié)助用戶記憶原則

在需要記憶某些信息時,產(chǎn)品功能上要幫助用戶記憶。盡可能減少用戶回憶負(fù)擔(dān),把需要記憶的內(nèi)容擺上臺面。

7、靈活的原則

中級用戶的數(shù)量遠(yuǎn)高于初級和高級用戶數(shù)。為大多數(shù)用戶設(shè)計,不要低估,也不可輕視,保持靈活。

移動端的用戶大多數(shù)不是專家級用戶,也不是小白用戶。對頁面的設(shè)計要更側(cè)重于滿足對大多數(shù)用戶的需求,不宜復(fù)雜,也不宜過于簡單無提示。

8、易掃原則

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動作不是讀,不是看,而是掃。易掃,意味著突出重點(diǎn),弱化和剔除無關(guān)信息。

在時候用一款陌生產(chǎn)品的時候,用戶絕大多數(shù)是使用掃描的方式而不是閱讀的方式來理解內(nèi)容。如果想讓用戶快速發(fā)現(xiàn)想要的信息,就一定要保證頁面足夠清晰,簡約。如果有較多的信息需要展示,那么一定要分清主次,要求界面足夠簡單,突出重點(diǎn),內(nèi)容易讀。

9、容錯性

幫助用戶從錯誤中恢復(fù),將損失降到。如果無法自動挽回,則提供詳盡的說明文字和指導(dǎo)方向,而非代碼,比如404。

例如各類應(yīng)用中要恢復(fù)出廠設(shè)置,是一個比較重大的操作

深度解讀尼爾森十大可用性原則 | 如何做好移動端用戶體驗優(yōu)化

所以在恢復(fù)出場設(shè)置前需要輸入解鎖圖案。這就是容錯性的一個體現(xiàn)。對于用戶正在進(jìn)行的操作有著明顯的提示,避免了誤按誤點(diǎn)操作造成的損失。

10、人性化幫助原則

幫助性提示最好的方式是:1、無需提示2、一次性提示3、常駐提示4、幫助文檔。

一個系統(tǒng)或者是產(chǎn)品,如果不需要文檔或是提示是最好的,一切都是自然而然發(fā)生的。但是在很多情況下,需要對內(nèi)容做一個提示或者幫助,來便于用戶更好的使用App。

幫助和提示在哪里用的比較多呢?設(shè)置。在設(shè)置頁面里,可以看到無線網(wǎng)絡(luò)、定位服務(wù)等是否打開,而中間遇到比較復(fù)雜的操作,用戶對此一知半解,這時候就需要有相關(guān)的幫助提示。

現(xiàn)在幾乎所有的移動端交互設(shè)計全部基于用戶體驗,而在定位準(zhǔn)、細(xì)分市場準(zhǔn),遵守了尼爾森十大原則的情況下,還有一些問題是每個產(chǎn)品研發(fā)團(tuán)隊不能避免且無法解決的。

在每個產(chǎn)品的不同生命周期中,側(cè)重點(diǎn)也會不同。初期注重種子用戶的培養(yǎng)與新功能的增加。到了成長期會經(jīng)歷版本的頻繁發(fā)布,系統(tǒng)不夠穩(wěn)定。這時候就需要用到更加專業(yè)的第三方工具去幫助應(yīng)用發(fā)布后的性能問題進(jìn)行管理。

深度解讀尼爾森十大可用性原則 | 如何做好移動端用戶體驗優(yōu)化

在產(chǎn)品真正上線后可以及時進(jìn)行崩潰分析、網(wǎng)絡(luò)請求與錯誤分析,交互分析等等通過App的總體性能評分與在同行業(yè)競爭中所處的位置來不斷迭代產(chǎn)品,改進(jìn)用戶體驗。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

博博


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

本篇講述的是feedback反饋類;反饋就是用戶做了某項操作之后,系統(tǒng)給用戶的一個響應(yīng)。這個響應(yīng)根據(jù)場景的不同會有不同的響應(yīng)形式和不同作用。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

設(shè)計規(guī)范中最重要的部分就是組件規(guī)范了,制定組件的規(guī)范有哪些好處呢?

  1. 簡單:熟悉了解組件的用法之后,在做界面設(shè)計時,只需要合理運(yùn)用組件就可以快速搭建web端界面,無差錯。由于有成套的組件規(guī)范,所以在交互設(shè)計和視覺設(shè)計過程中無需每次都重復(fù)勞動。

  2. 統(tǒng)一用戶體驗:由于使用了統(tǒng)一的組件規(guī)范,所以保證了的視覺和交互設(shè)計統(tǒng)一性,保證整體的用戶體驗性。

  3. 提升設(shè)計綜合能力:由于減少了做組件重復(fù)性勞動,交互設(shè)計師/PM 可以將更多時間和精力放在討論業(yè)務(wù)、設(shè)計方法、設(shè)計思維、定義產(chǎn)品等綜合能力方面。從而驅(qū)動業(yè)務(wù)創(chuàng)新。

根據(jù)組件的用途,可以分為六大類:Feedback 反饋、from 表單、basic 基礎(chǔ)、data 數(shù)據(jù) 、navigation 導(dǎo)航、other 其他。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

本篇講述的是feedback反饋類;反饋就是用戶做了某項操作之后,系統(tǒng)給用戶的一個響應(yīng)。這個響應(yīng)根據(jù)場景的不同會有不同的響應(yīng)形式和不同作用。

toast

定義:用戶產(chǎn)生操作,出現(xiàn)toast提示,一般2-3s消失;通過toast中的提示語告知用戶需要了解的信息。讓用戶的行為在使用過程中得到反饋和幫助。

使用場景:

  1. 可提供成功、警告或錯誤等反饋信息。

  2. 頂部居中顯示并自動消失,是一種不打斷用戶操作的輕量級提示方式。

例如簡書在沒有上傳專題封面時就點(diǎn)擊創(chuàng)建專題按鈕,出現(xiàn)toast提示,提示用戶要先上傳專題封面才能創(chuàng)建專題。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

toast的消息提示分類一共有三種類型:成功類、失敗類、常規(guī)類。

組件樣式有兩種:可以點(diǎn)擊操作使其消失、不可點(diǎn)擊操作使其消失。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

alert 警示提示

定義:當(dāng)用戶進(jìn)行某種操作時,網(wǎng)站會出現(xiàn)對應(yīng)的警告信息提示用戶,該提示信息的狀態(tài)不會主動消失。

使用場景:

  1. 當(dāng)某個頁面需要向用戶顯示警告的信息時。

  2. 非浮層的靜態(tài)展現(xiàn)形式,始終展現(xiàn),不會自動消失,有的組件用戶可以點(diǎn)擊關(guān)閉。

例如淘寶購物車,刪除之后,會出現(xiàn)alert警示提示,淘寶的例子屬于alert的變種,用戶可以點(diǎn)擊“撤銷本次刪除 ”進(jìn)行還原之前的毀滅性操作。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

alert警示提示的消息分類一共有三種類型:成功類、失敗類、常規(guī)類。當(dāng)然也可以不含有icon操作,含有icon操作的話警示性會更強(qiáng)。

alert警示組件樣式有兩種:帶有刪除操作,不帶有刪除操作。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

dialog對話框

定義:用于提示用戶當(dāng)前操作,或是完成某個任務(wù)時需要的一些其他額外的信息。對話框可以用確定/取消的簡單的應(yīng)答模式,也可以是自定義復(fù)雜的模式,例如表單的填寫。

使用場景:

  1. 用戶在進(jìn)行重要操作的時,需要進(jìn)行二次確認(rèn)。

  2. 用于重要的反饋提示,讓用戶知道信息提示。

  3. 承載少量的表單填寫類,減少頁面的跳轉(zhuǎn)。

windows系統(tǒng)的確定按鈕一般在左邊,而Mac OS的確定一般在右邊。因為這個原因,導(dǎo)致我們平時看到的確定有時候在左邊,有時候在右邊。

微博和微信公眾號后臺的的對話框,確定在左邊,而淘寶的對話框在右邊。微信公眾號的對話框是小浮層彈窗,避免了遮罩出現(xiàn),同時對話框也出現(xiàn)在操作按鈕的附近,對用戶的干擾性也是最弱的。

dialog對話框,有三種常見的使用場景。其中表單對話框、提示類、輕量級提示類、表單類樣式都是基于二次確認(rèn)類對話框樣式的改變而得到不同的樣式。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

Notification通知提醒框

定義:懸浮出現(xiàn)在網(wǎng)頁右上角,用于全局的提醒式通知。常見于服務(wù)器異常、操作失敗等

使用場景:

  1. 較為復(fù)雜的通知內(nèi)容。

  2. 帶有交互的通知,給出用戶下一步的行動點(diǎn)。

  3. 系統(tǒng)主動推送。

Notification通知提醒框出現(xiàn)在網(wǎng)頁右上角,一般4-5s消失,也可以點(diǎn)擊叉號進(jìn)行關(guān)閉。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

tooltip 文字提示

定義:簡單輕量的的文字提示。

使用場景:

  1. 鼠標(biāo)移入則立即顯示提示,移出則立即消失,不承載復(fù)雜文本和操作。

  2. 常用于解釋操作按鈕的文字說明。

還有一種tooltip是瀏覽器自帶的,瀏覽器自帶的和本篇的tooltip的區(qū)別是:瀏覽器自帶的鼠標(biāo)移入一般2s才顯示,多用于折行打點(diǎn)的文字提示。例如簡書,而本篇的tooltip鼠標(biāo)移入就出現(xiàn),切組件風(fēng)格和瀏覽器自帶完全不一樣。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類

tooltip組件按照需要解釋說明的對象位置不同,可以有以下不同的樣式。

設(shè)計規(guī)范 | Web端設(shè)計組件篇-反饋類


UI設(shè)計的4個角度與14點(diǎn)思考

博博


設(shè)計師檸檬 2018-04-26 15:22:57

寫在前面的話:文章內(nèi)容源于網(wǎng)絡(luò),由檸檬整理發(fā)布,如有侵權(quán)請聯(lián)系設(shè)計師檸檬刪除

都說UI設(shè)計是用戶看到產(chǎn)品的第一個門,從進(jìn)入手機(jī)應(yīng)用商店到下載界面再到產(chǎn)品的首頁,設(shè)計師不考慮一下真的用交互稿和產(chǎn)品直接做么,從圖標(biāo)在應(yīng)用商店的吸引展示力和用戶的軟件留存率,這些哪個不是和UI設(shè)計師有關(guān)系?

本文重點(diǎn):1.學(xué)著像產(chǎn)品經(jīng)理的角度思考

2.學(xué)著像交互設(shè)計師的角度思考

3.學(xué)著在用戶的角度思考

4.學(xué)著在自己的角度思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考

UI設(shè)計的4個角度與14點(diǎn)思考


2018網(wǎng)頁UI設(shè)計:輕松搞定視覺層次感

藍(lán)藍(lán)設(shè)計的小編

眾所周知,相較于平淡無奇,毫無重點(diǎn)的網(wǎng)頁UI設(shè)計,具有良好視覺層次結(jié)構(gòu)的網(wǎng)頁UI設(shè)計更受用戶青睞。為什么呢?答案其實(shí)很簡單。極賦視覺層次感的頁面設(shè)計不僅極具設(shè)計美感,取悅用戶身心。而且還建立了清晰直觀的視覺層級, 方便用戶簡單快速的識別和讀取需要的頁面內(nèi)容,從而提升用戶體驗,降低跳出率。

如何利用 “峰終定律” 改善用戶體驗?

資深UI設(shè)計者

一、什么是峰終定律

峰終定律是由諾貝爾獎得主 DanielKahneman 提出的,百度百科上它是屬于心理學(xué)上的定義。

我把它結(jié)合了自己的理解應(yīng)用在設(shè)計學(xué)上可以解釋為:

用戶在使用某個硬件產(chǎn)品,軟件產(chǎn)品或者服務(wù)系統(tǒng)來完成自己目標(biāo)的過程中,用戶情感地圖曲線的波峰(體驗最好)、波谷(體驗最差)、結(jié)束點(diǎn)的體驗,決定用戶對整個過程的體驗評價。

而在過程中體驗好與不好體驗的比重,好與不好體驗的時間長短,對記憶幾乎沒有影響。

這一定律主要是闡述人對過去體驗的記憶由兩個因素決定,一個是「高峰」,一個是「結(jié)束」。

把用戶情感地圖曲線和峰終定律結(jié)合起來,簡單畫一張圖:

既然用戶整體體驗與整個過程中好壞綜合無關(guān),只跟幾個關(guān)鍵點(diǎn)有關(guān),那么可以得到一個公式:

用戶整體體驗評價(E)=(y1-y2)+y3

y1,y2,y3 可以稱為關(guān)鍵時刻 MOT(Moment Of Truth)

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

這兩天和包子聊到宜家的峰終定律,突然明白了為什么我們有些課程調(diào)研,大家都喜歡去宜家調(diào)研了。

雖然它的店員很少,找貨物也要自己找椅子搬下來,就算只買一件家具也需要逛完整個商場,但是每次逛完結(jié)束的時候都可以吃那個特別好吃的「一元冰淇淋」呀,這就是它的「終」。

而在逛的過程中,就像包子講的,它的體驗?zāi)J胶馨?,把產(chǎn)品作為空間的一部分。曾經(jīng)有一位宜家的老顧客也說,宜家商品物有所值,展區(qū)實(shí)用,產(chǎn)品隨意試用,大概這就是它的「峰」吧。

扔一個我的學(xué)習(xí)小伙伴包大佬的分析:

三、互聯(lián)網(wǎng)產(chǎn)品中的峰終定律

如果說峰終定律怎么影響互聯(lián)網(wǎng)產(chǎn)品的用戶體驗的話,可以先舉幾個體驗差的例子。

很多時候,用戶在某個平臺完成某個任務(wù)后,會出現(xiàn)很多引誘用戶點(diǎn)擊的贊助商的內(nèi)容。比如問卷星,每次填完,任務(wù)結(jié)束的時候,它還會打著抽獎的名義接廣告……

再舉個例子,你有沒有過在某些 app 注冊賬號,登錄 or 注冊很多次卻失敗的情況,或者花了很久時間才注冊 or 登錄成功?原因可能是賬號密碼錯誤,可能是注冊流程過多跳出率過高,可能是填寫信息冗雜……

如果這款產(chǎn)品不是用戶剛需的話,最終會導(dǎo)致很多用戶卸載它,就算你之后流程的體驗再好,用戶根本無法體驗到最后。

四、利用峰終定律打造「爽點(diǎn)」

一款好的產(chǎn)品不僅能夠解決用戶的「痛點(diǎn)」,也能刺激用戶的「癢點(diǎn)」,更能打造用戶的「爽點(diǎn)」。

有一些產(chǎn)品能在用戶使用的過程中利用峰終定律打造 「爽點(diǎn)」,提升用戶體驗。

如果用外賣這個來舉例子的話,應(yīng)該算是一個大的服務(wù)系統(tǒng),它會涉及到很多方,比如消費(fèi)者,商家,騎手等,而這一整個服務(wù)系統(tǒng)的設(shè)計,只針對消費(fèi)者而言,流程也會十分復(fù)雜,其中利用峰終定律考慮的就更多了。

那就其中用戶(消費(fèi)者)與餓了么 app 的交互流程來舉例的話,用戶點(diǎn)外賣這個任務(wù):

從打開 app——選擇店——選擇美食——付款,用戶的任務(wù)已經(jīng)結(jié)束了,但是餓了么會在結(jié)束的時候,給用戶一個分享領(lǐng)取紅包的福利,用戶會覺得自己獲得了很大的優(yōu)惠,體驗會十分好,這也就是利用了峰終定律的「終」。

我發(fā)現(xiàn)游戲里面對峰終定律是用得最多的,曾經(jīng)玩過 lol,王者榮耀,吃雞手游……

如果問曾經(jīng)玩 lol 或者王者最爽的時候是什么時候,那大概是:比賽過程中的 First blood,penta kill ,killing spree,legendary,you have slained an enermy 等這些配音和畫面的視覺刺激吧。

按照常規(guī)的模式是,殺人后系統(tǒng)直接提示「您已經(jīng)殺滅了一名敵人」,但是它會去強(qiáng)化這種殺人的體驗,將殺人的場景分為多種類型,通過視覺上的彈框擊殺提示與配音上的激勵疊加,把殺人的體驗不斷深化,做到,另外在推塔和偷掉水晶的時候是不是也是最爽的時候呢?我覺得這里就利用了峰終定律的「峰」。

我記得在游戲結(jié)束的時候,比如 lol 里面推掉水晶的時候,游戲畫面會停止幾秒,然后再出現(xiàn)水晶慢慢破滅,加上大大的「勝利」二字,有的時候回到大廳還需要等幾秒的時間。

王者榮耀,吃雞這類在游戲結(jié)束的時候也會給用戶很多激勵,明明可以在結(jié)束后直接回到大廳,但它們會延長這些勝利或者失敗的體驗,如果勝利,當(dāng)然是爽,還想再擁有這樣的體驗,繼續(xù)打;如果是失敗,那再接再厲,想擁有贏的體驗,繼續(xù)打……

總之就是會讓用戶上癮。它們會把這些用戶體驗做到,在游戲結(jié)束的時候這些的體驗就利用到了峰終定律的「終」。

五、利用峰終定律改善體驗步驟

「峰終定律」改善用戶體驗的步驟:

  • 進(jìn)行可用性測試;
  • 繪制用戶旅程圖;
  • 找到「峰」,「終」時刻;
  • 通過用戶研究的方法找到用戶心中的關(guān)鍵時刻;
  • 將「峰」、「終」,「用戶心中關(guān)鍵時刻」的體驗優(yōu)化至。

日歷

鏈接

個人資料

存檔