首页

css的多行省略号处理

周周

      在我们的页面布局的时候，经常会有这样的需求，超过指定行文本的时候会进行（省略号...）的处理，那么我们改怎么设置css呢？如下：

 设置盒子的css为：

  • overflow:hidden;;
  • text-overflow:ellipsis;
  • white-space:nowrap;

       但是这样只能显示一行而不能实现指定行，所以还要其他的方法来实现指定行处理的。



     WebKit浏览器或移动端的页面（大部分移动端都是webkit）

        可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个不规范的属性，它没有出现在 CSS 规范草案中。



        -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
       常见结合属性：
  • display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

     css 代码:

  • overflow：hidden;
  • text-overflow: ellipsis;
  • display: -webkit-box;
  • -webkit-line-clamp:2;/*这里控制着显示多少行*/
  • -webkit-box-orient:vertical;


评论(0) 浏览(4212)

如何看懂UI效果图

蓝蓝设计的小编

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

评论(0) 浏览(5532)

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个最佳网站设计启发你！

评论(0) 浏览(4712)

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


评论(0) 浏览(3677)

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个使用大背景的全屏网页设计作品

评论(0) 浏览(3698)

关于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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(3946)

原生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);
             }
         }
      }

评论(0) 浏览(3802)

日常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~

评论(0) 浏览(2997)

日常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

评论(0) 浏览(3076)

【产品即场景】体验先行

涛涛

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

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多块钱吗？不然你让他把流程倒过来试试，先充钱，再填信息。保证没多少人会用）。流程设置就像钩子一样，慢慢慢慢的把用户勾住。


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


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

评论(0) 浏览(2990)

分类

日历

链接

个人资料

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

存档