亚洲中文字幕永久在线全国-美女张开腿让男生桶进来-久久中文字幕资 ,亚洲乱亚洲乱妇小说网_精品久久综合1区2区3区激情_狼色精品人妻

首頁(yè)

Dribbble 界面設(shè)計(jì)靈感 33

博博


UI設(shè)計(jì)愛(ài)好者 2018-05-03 16:58:07

作者:設(shè)計(jì)達(dá)人(ID:shejidaren888)

這次 Dribbble UI 靈感主要精選網(wǎng)頁(yè)、APP 以及一些后臺(tái)管理界面,每個(gè)精選出來(lái)的界面設(shè)計(jì)的贊數(shù)都是幾百+或者幾 K ~

PS:當(dāng)你看中某作品時(shí),你可以點(diǎn)擊作者名稱來(lái)查看該設(shè)計(jì)師更多作品。(微信公眾號(hào)不支持外鏈,只能點(diǎn)「閱讀原文」來(lái)查看所有鏈接)

Dribbble 界面設(shè)計(jì)靈感 #33

Dribbble 界面設(shè)計(jì)靈感 33

個(gè)人主頁(yè)設(shè)計(jì) by Mike

Dribbble 界面設(shè)計(jì)靈感 33

CRM 管理系統(tǒng)界面設(shè)計(jì) by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

EverDo 應(yīng)用界面 by Jakub Reis

Dribbble 界面設(shè)計(jì)靈感 33

接上,EverDo 界面的一些表單元素 by Balkan Brothers

Dribbble 界面設(shè)計(jì)靈感 33

隨機(jī)實(shí)驗(yàn) by Nick Franchi

Dribbble 界面設(shè)計(jì)靈感 33

Coindesk by uixNinja

Dribbble 界面設(shè)計(jì)靈感 33

一套 UI 素材:Planguru by Patryk Pustol

Dribbble 界面設(shè)計(jì)靈感 33

酒店 APP 后臺(tái)(iPhoneX) by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

B3Sound 網(wǎng)站著陸頁(yè)設(shè)計(jì) by Outcrowd

Dribbble 界面設(shè)計(jì)靈感 33

Smart Security Camera App by Ionut Zamfir

Dribbble 界面設(shè)計(jì)靈感 33

Iterable 插畫(huà)草圖 by Ramotion

Dribbble 界面設(shè)計(jì)靈感 33

后臺(tái)界面 by uixNinja

Dribbble 界面設(shè)計(jì)靈感 33

Dating 應(yīng)用項(xiàng)目 by Divan Raj

Dribbble 界面設(shè)計(jì)靈感 33

Benti by Jakub Dziedzic ??

Dribbble 界面設(shè)計(jì)靈感 33

Surf Guide Mobile Swipe Distort by Nathan Riley

Dribbble 界面設(shè)計(jì)靈感 33

C / Sen Design Lab by Mike | Creative Mints

Dribbble 界面設(shè)計(jì)靈感 33

Chripcase 后臺(tái)界面 by Goutham

Dribbble 界面設(shè)計(jì)靈感 33

Raika Plant by Nicola Baldo

Dribbble 界面設(shè)計(jì)靈感 33

網(wǎng)頁(yè)聊天應(yīng)用界面 by Michal Parulski

Dribbble 界面設(shè)計(jì)靈感 33

網(wǎng)頁(yè)版的音樂(lè) UI by Giga Tamarashvili

Dribbble 界面設(shè)計(jì)靈感 33

Music UI by Giga Tamarashvili

Dribbble 界面設(shè)計(jì)靈感 33

Blockсhain revolution by Dmitrii Kharchenko

Dribbble 界面設(shè)計(jì)靈感 33

USB Types by Gal Shir

Dribbble 界面設(shè)計(jì)靈感 33


23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

博博


UI設(shè)計(jì)愛(ài)好者 2018-05-07 11:31:09

在2013年的時(shí)候使用全屏背景或者大圖片的網(wǎng)頁(yè)開(kāi)始流行起來(lái),到了今年,還是經(jīng)??吹竭@類風(fēng)格的頁(yè)面出現(xiàn),可見(jiàn)這個(gè)趨勢(shì)還是很流行的,值得運(yùn)用。

一張大圖再配合一個(gè)優(yōu)秀的排版布局,這樣一個(gè)美麗的頁(yè)面就形成了,比起視差網(wǎng)頁(yè)、動(dòng)效網(wǎng)頁(yè)成本低了很多,但視覺(jué)效果還是能令人滿意的,下面精選一些優(yōu)秀的大背景網(wǎng)頁(yè)設(shè)計(jì)作品給你欣賞,也行會(huì)給你帶來(lái)更多靈感哦!

這于高清圖片素材建議大家去設(shè)計(jì)導(dǎo)航里面的免費(fèi)圖片素材上查找。

Nike – Ge? Kendini

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Edwin Europe

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Esprit Cox

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Feed

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Truth Labs Portfolio

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Natural Food & Beverages

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

La Plus GRANDE Cave à Bière Du Monde

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Ice And Sky : The History Of Climate Change

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Fivefootsix

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

For Better Coffee

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Brdr. Krüger

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

The Boat

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Beagle – Better Proposals

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Webdesign Agency Weblounge

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Words Can Save

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Well Storied

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Fabrica

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Alexander Engzell Portfolio

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Cartelle Amsterdam

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Printemps Du Polar

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

Ashworth GOLF/MAN

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

HBM FiberSensing

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

查看網(wǎng)頁(yè)

The | Marmalade

23個(gè)使用大背景的全屏網(wǎng)頁(yè)設(shè)計(jì)作品

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

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(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 //阻止在啟動(dòng)時(shí)生成生產(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) //注冊(cè)Vuex // 定義常量  如果訪問(wèn)他的話,就叫訪問(wèn)狀態(tài)對(duì)象 const state = {
  count: 1 } // mutations用來(lái)改變store狀態(tài), 如果訪問(wèn)他的話,就叫訪問(wèn)觸發(fā)狀態(tài) const mutations = { //這里面的方法是用 this.$store.commit('jia') 來(lái)觸發(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只在這個(gè)組件里面生效,為了不影響全局樣式 --> <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訪問(wèn)狀態(tài)對(duì)象

使用computed計(jì)算

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

原生js的ajax請(qǐng)求

周周

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

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

什么是ajax

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

XMLHttpRequest 對(duì)象

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

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

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

下面給大家列出get請(qǐng)求和post請(qǐng)求的例子

get請(qǐng)求:      

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

post請(qǐng)求:

       //創(chuàng)建異步對(duì)象  
       var xhr = new XMLHttpRequest();
       //設(shè)置請(qǐng)求的類型及url
       //post請(qǐng)求一定要添加請(qǐng)求頭才行不然會(huì)報(bào)錯(cuò)
       xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xhr.open('post', '02.post.php' );
       //發(fā)送請(qǐng)求
       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)方法里面,要用的時(shí)候,直接調(diào)用就好了。

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

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

         }      

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

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

            // 需要設(shè)置請(qǐng)求報(bào)文
           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();
            }
         }     

       // 注冊(cè)事件
       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í) 說(shuō)明 數(shù)據(jù)回來(lái)了
              // ajax.responseText;

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

日常APP體驗(yàn)-交互知識(shí)點(diǎn)匯總-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


總結(jié):

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

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

濤濤

在這里先給大家分享一組近期APP使用過(guò)程中發(fā)現(xiàn)的UI&交互知識(shí)點(diǎn),大家可以一起學(xué)習(xí)交流,對(duì)于個(gè)人觀點(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)品即場(chǎng)景】體驗(yàn)先行

濤濤

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

Image title

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

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

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

Image title

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


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


一:自然流量的獲取


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


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


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


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


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


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


1.線上推廣

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


2.線下推廣

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


三:社群自傳播


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


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

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


2.引爆社群

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


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

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


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


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


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


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


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


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


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


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


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


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


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


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

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

博博


聽(tīng)云 2016-04-18 10:49:28

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

1、可見(jiàn)性原則

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

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

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

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

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

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

2、場(chǎng)景貼切原則

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

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

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

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

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

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

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

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

3、可控原則

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

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

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

4、一致性原則:

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

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

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

5、放錯(cuò)原則

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

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

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

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

7、靈活的原則

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

移動(dòng)端的用戶大多數(shù)不是專家級(jí)用戶,也不是小白用戶。對(duì)頁(yè)面的設(shè)計(jì)要更側(cè)重于滿足對(duì)大多數(shù)用戶的需求,不宜復(fù)雜,也不宜過(guò)于簡(jiǎn)單無(wú)提示。

8、易掃原則

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

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

9、容錯(cuò)性

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

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

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

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

10、人性化幫助原則

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

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

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

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

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

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

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

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

博博


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

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

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

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

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

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

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

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

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

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

toast

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

使用場(chǎng)景:

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

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

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

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

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

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

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

alert 警示提示

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

使用場(chǎng)景:

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

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

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

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

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

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

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

dialog對(duì)話框

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

使用場(chǎng)景:

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

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

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

windows系統(tǒng)的確定按鈕一般在左邊,而Mac OS的確定一般在右邊。因?yàn)檫@個(gè)原因,導(dǎo)致我們平時(shí)看到的確定有時(shí)候在左邊,有時(shí)候在右邊。

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

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

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

Notification通知提醒框

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

使用場(chǎng)景:

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

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

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

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

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

tooltip 文字提示

定義:簡(jiǎn)單輕量的的文字提示。

使用場(chǎng)景:

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

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

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

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

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

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


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

博博


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


日歷

鏈接

個(gè)人資料

存檔