首页

如何看懂UI效果图

蓝蓝设计的小编

UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。

2018年的20个最佳网站设计启发你!

博博


番茄匠APP 2018-05-18 15:07:48

美丽的获奖网站

1. Feed

奖励:Awwwards当日的场地(6/6/2015)

Feed不仅是一个有趣的概念,它还有一个令人惊叹的执行过程,它挑战了我们对网络上的可能性的理解。通过动画和视频的创意融合,该网站让用户沉浸在非常吸引人的体验中。作为一个非典型的网站,它还包含几个独特的可用性元素,其中包括一个导航,可以作为滚动进度条加倍。

2018年的20个最佳网站设计启发你!

2. crypton.trading

奖项:Awwwards当日的场地(4/3/2018)

认识你的机器人会计师crypton.trading。

Crypton.trading是比特币等加密货币的交易中心,它使用人工智能来预测货币价值的变化并确定关键的购买和销售机会。该网站因其开发和设计而被评为高,因为它逐渐向更多的下游游客滚动,更多地解释了开发者的方法。

这个屡获殊荣的网站让熟悉技术的访问者在主页上出现Crypt的问候时感到宾至如归,每次只有一封信。

2018年的20个最佳网站设计启发你!

3. ETQ

奖励:Awwwards当日的场地(5/19/2015)

ETQ采用非常简约的电子商务方式,在精简的网站上放置大量引人注目的产品视频。简单,平坦,基于颜色的背景伴随着强大的印刷术,有助于将注意力集中在用户到达的地方:鞋子。

2018年的20个最佳网站设计启发你!

4. Mikiya Kobayashi

奖励:Awwwards当日的场地(7/4/2015)

Mikiya是一位产品设计师,拥有简约的作品集,通过强大的摄影和微妙的动画展示了他的作品。他的全部网站最初是用日文创作的,然后翻译成英文,这有助于展示他设计的国际可扩展性。

2018年的20个最佳网站设计启发你!

5. Inside Abbey Road

奖项:最佳音乐网站,2016年威比奖

谷歌通过这个高度互动的网站将它从公园打出来,让用户可以进入Abbey Road Studios。辉煌的声音设计,导航机制以及混合了通常的“Google风格”的视觉效果都有助于吸引访问者访问这个制作精良的网络媒体资源。

2018年的20个最佳网站设计启发你!

6. Citrix: The New Mobile Workforce

奖:每日网站(11/23/2017),最佳网站图库

这个网站致力于红牛与基于云计算软件公司思杰的合作,这是非常了不起的。

新移动员工队是思杰旗下的一个网站,它使用全景摄影技术向观众展示思杰如何支持红牛车队的新赛车。即使你不是赛车爱好者,该网站的巧妙动画也可以解释复杂的汽车技术,这一点很难忽略。

2018年的20个最佳网站设计启发你!

7. The History of Climate Change

奖励:Awwwards当日网站(6/23/2015)

按照Luc Jacquet的脚步,Wild-Touch将带您参观关于全球气候变化历史的视觉和教育之旅。历史媒体和独特动画的混合有助于讲述故事。

2018年的20个最佳网站设计启发你!

8. Beagle

奖:每日网站(4/19/2015),最佳网站图库

比格尔以一种简单易懂的方式在视觉上和逐步地讲述他们产品的故事方面做得非常出色。这对许多创业公司来说是一个重大挑战,特别是当他们将新概念引入现有市场时。人们想知道,“你的产品是什么?它是如何工作的?为什么我在乎?” 比格尔回答所有这些问题,同时展示他们的产品并强制用户购买。另外,他们是实际上正确实施“滚动劫持”的几个网站之一。

2018年的20个最佳网站设计启发你!

9. Southwest: Heart of Travel

奖:最佳视觉设计 - 审美,2018年威比奖

当西南航空想要证明其客户不仅仅是一个美元符号时,该公司创建了一个网站,其设计使用客户航线的形状进行组装。

这个名为“旅行之心 ”的网站甚至允许游客在他们计划参加的旅行中创建自己的作品。这样,西南航空的网站就是他们最忠诚的乘客的产品。

2018年的20个最佳网站设计启发你!

10. Woven Magazine

奖:每日网站(4/4/2015),最佳网站图库

Woven是一个在线刊物,为艺术家,工匠和制作人员提供赞美。对我而言,他们代表了一种确认,即出版物可以(也应该)拥有美观且引人入胜的网站,内容易于阅读。这个网站没有像弹出窗口和突兀的广告这样的分心,而是关于内容本身的体验。

2018年的20个最佳网站设计启发你!

11. JOHO's Bean

奖励:当日FWA(2015年8月8日),网站奖

JOHO's Bean的网站有令人难以置信的图像,交互性,讲故事,视觉设计,最重要的是音响工程。这些都聚集在一起,创造出一个引人入胜,情绪化和引人入胜的网站,讲述咖啡豆之旅的故事。

2018年的20个最佳网站设计启发你!

12. NOWNESS

奖项:最佳文化博客/网站,2017年威比奖

Nowness可能是当今互联网上最酷的众包视频博客。那真是一口......所有这些意味着什么?

NOWNESS的“众包”性质是其获奖者的一部分。这意味着其大部分内容来自独立广告素材 - 这是企业发布内容的一种日益流行的方式。NOWNESS也是一个视频博客,这意味着它的所有博客内容都是视频格式。总之,这些品质有助于使Nowness成为各个品牌努力讲述的故事的迷人中心。

2018年的20个最佳网站设计启发你!

13. Virgin America

奖项:最重要的行业演变,2014 UX奖

在一个已知航空网站充斥着主要可用性问题的世界中,维珍美国公司拥有推动可用性,可访问性和快速响应设计的最佳网站之一。事实上,它被命名为第一个真正快速响应的航空公司网站,这是该行业的一个新的先例。

2018年的20个最佳网站设计启发你!

14. World of SWISS

奖项:最佳用户界面,2015年威比奖

另一家航空公司?发生什么事?!是的,瑞航的航空公司建立了一个令人难以置信的身临其境的网站,讲述他们的故事,并描述与他们一起飞行的感觉 - 而且他们的工作太过繁重,无人理睬。强大的视觉效果和动画将用户介绍到网站的不同部分,这些部分除了通常的销售和市场营销信息外,还包含了今天如此常见的信息。

2018年的20个最佳网站设计启发你!

15. Reductress

奖项:最佳幽默网站,2018年威比奖

在互联网上嘲笑别人并不难,我们在网上阅读和消费的东西很多都是为了娱乐。但是对于大量观众来说,很难一致地做到这一点。Reductress是一本讽刺杂志,其头条和一般阅读体验是幽默部门的 - 使网站本身成为一个高质量的财产。

2018年的20个最佳网站设计启发你!

其他酷网站设计

16. Minimums

Minimums采用非常大胆的方式展示他们的内容,利用基于网格的网站设计,大字体和全幅高质量图像。他们的网站是如何正确执行网格结构,同时在设计中保持良好的视觉层次结构的一个非常好的例子。

2018年的20个最佳网站设计启发你!

17. Guillaume Tomasi

作为蒙特利尔的摄影师,Guillaume Tomasi建立了一个真正适合他的独特而令人敬畏的摄影作品。他超现实的照片风格与简单,平坦,空洞,简约的组合设计并列,将所有的焦点放在作品本身上。

他独特的系列导航加上艺术画廊风格的作品介绍和完美的滚动互动让人联想到真实画廊的体验。

2018年的20个最佳网站设计启发你!

18. The District

这家品牌代理机构认真对待它的形象,它应该 - 为客户处理所有媒体渠道。该地区的网站,是通过一些你见过的最美丽的艺术品和摄影的旅程。

当你探索网站时,这些挑衅性的瓷砖变化很快,而且他们看起来更加奇特,对你学习过去的工作越感兴趣。

2018年的20个最佳网站设计启发你!

19. Tej Chauhan

Tej Chauhan通过这个有趣的网站将印象派艺术品变成了商业模式。该产品开发人员主页上的每张图片都会滑出以覆盖上一张图片,从而为您现在在您面前看到的物体提供很少的背景信息。

但是,是不是缺乏正确的背景知识,让你想了解更多?标语“近期未来的纪念品”表明这些物品是他们产品线的一部分 - 这是您将这些创新物品带入您的生活的机会。

2018年的20个最佳网站设计启发你!

20. Amanda Martocchio Architecture

一家建筑公司可能并不专注于网站开发,但其网站仍应展示其对视觉上令人愉悦的设计的承诺。这个华丽的网站让阿曼达·马托基奥把它放在心上。

Amanda Martocchio Architecture喜欢它的作品并不是什么秘密- 它网站主页上的每张图片都是公司设计的房屋的迷人镜头。该网站标出了每个房屋的滚动条件,以及各种建筑物的各种角度。

2018年的20个最佳网站设计启发你!

Dribbble 界面设计灵感 33

博博


UI设计爱好者 2018-05-03 16:58:07

作者:设计达人(ID:shejidaren888)

这次 Dribbble UI 灵感主要精选网页、APP 以及一些后台管理界面,每个精选出来的界面设计的赞数都是几百+或者几 K ~

PS:当你看中某作品时,你可以点击作者名称来查看该设计师更多作品。(微信公众号不支持外链,只能点「阅读原文」来查看所有链接)

Dribbble 界面设计灵感 #33

Dribbble 界面设计灵感 33

个人主页设计 by Mike

Dribbble 界面设计灵感 33

CRM 管理系统界面设计 by Divan Raj

Dribbble 界面设计灵感 33

EverDo 应用界面 by Jakub Reis

Dribbble 界面设计灵感 33

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

Dribbble 界面设计灵感 33

随机实验 by Nick Franchi

Dribbble 界面设计灵感 33

Coindesk by uixNinja

Dribbble 界面设计灵感 33

一套 UI 素材:Planguru by Patryk Pustol

Dribbble 界面设计灵感 33

酒店 APP 后台(iPhoneX) by Divan Raj

Dribbble 界面设计灵感 33

B3Sound 网站着陆页设计 by Outcrowd

Dribbble 界面设计灵感 33

Smart Security Camera App by Ionut Zamfir

Dribbble 界面设计灵感 33

Iterable 插画草图 by Ramotion

Dribbble 界面设计灵感 33

后台界面 by uixNinja

Dribbble 界面设计灵感 33

Dating 应用项目 by Divan Raj

Dribbble 界面设计灵感 33

Benti by Jakub Dziedzic ♠️

Dribbble 界面设计灵感 33

Surf Guide Mobile Swipe Distort by Nathan Riley

Dribbble 界面设计灵感 33

C / Sen Design Lab by Mike | Creative Mints

Dribbble 界面设计灵感 33

Chripcase 后台界面 by Goutham

Dribbble 界面设计灵感 33

Raika Plant by Nicola Baldo

Dribbble 界面设计灵感 33

网页聊天应用界面 by Michal Parulski

Dribbble 界面设计灵感 33

网页版的音乐 UI by Giga Tamarashvili

Dribbble 界面设计灵感 33

Music UI by Giga Tamarashvili

Dribbble 界面设计灵感 33

Blockсhain revolution by Dmitrii Kharchenko

Dribbble 界面设计灵感 33

USB Types by Gal Shir

Dribbble 界面设计灵感 33


23个使用大背景的全屏网页设计作品

博博


UI设计爱好者 2018-05-07 11:31:09

在2013年的时候使用全屏背景或者大图片的网页开始流行起来,到了今年,还是经常看到这类风格的页面出现,可见这个趋势还是很流行的,值得运用。

一张大图再配合一个优秀的排版布局,这样一个美丽的页面就形成了,比起视差网页、动效网页成本低了很多,但视觉效果还是能令人满意的,下面精选一些优秀的大背景网页设计作品给你欣赏,也行会给你带来更多灵感哦!

这于高清图片素材建议大家去设计导航里面的免费图片素材上查找。

Nike – Geç Kendini

23个使用大背景的全屏网页设计作品

查看网页

Edwin Europe

23个使用大背景的全屏网页设计作品

查看网页

Esprit Cox

23个使用大背景的全屏网页设计作品

查看网页

Feed

23个使用大背景的全屏网页设计作品

查看网页

Truth Labs Portfolio

23个使用大背景的全屏网页设计作品

查看网页

Natural Food & Beverages

23个使用大背景的全屏网页设计作品

查看网页

La Plus GRANDE Cave À Bière Du Monde

23个使用大背景的全屏网页设计作品

查看网页

Ice And Sky : The History Of Climate Change

23个使用大背景的全屏网页设计作品

查看网页

Fivefootsix

23个使用大背景的全屏网页设计作品

查看网页

For Better Coffee

23个使用大背景的全屏网页设计作品

查看网页

Brdr. Krüger

23个使用大背景的全屏网页设计作品

查看网页

The Boat

23个使用大背景的全屏网页设计作品

查看网页

Beagle – Better Proposals

23个使用大背景的全屏网页设计作品

查看网页

Webdesign Agency Weblounge

23个使用大背景的全屏网页设计作品

查看网页

Words Can Save

23个使用大背景的全屏网页设计作品

查看网页

Well Storied

23个使用大背景的全屏网页设计作品

查看网页

Fabrica

23个使用大背景的全屏网页设计作品

查看网页

Alexander Engzell Portfolio

23个使用大背景的全屏网页设计作品

查看网页

Cartelle Amsterdam

23个使用大背景的全屏网页设计作品

查看网页

Printemps Du Polar

23个使用大背景的全屏网页设计作品

查看网页

Ashworth GOLF/MAN

23个使用大背景的全屏网页设计作品

查看网页

HBM FiberSensing

23个使用大背景的全屏网页设计作品

查看网页

The | Marmalade

23个使用大背景的全屏网页设计作品

关于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的总体性能评分与在同行业竞争中所处的位置来不断迭代产品,改进用户体验。

日历

链接

个人资料

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

存档