首页

5·12汶川地震13周年,这些画面现在看依旧泪目

seo达人

 

5·12汶川地震十三周年

汶川地震十三周年

  

  2008年5月12日

  汶川大地震

  69227人遇难

  374643人受伤

  17923人失踪

  一串串触目惊心的数字

  让我们心疼惋惜

  

  13年

  在人的一生中不可谓不长

  虽然有些事情已经逐渐久远

  但那些感动依旧

  在回忆中熠熠发光

  

  程林祥为让儿子跟家人过最后一夜

  背着儿子程磊的遗体

  徒步25公里回家

  作为父亲

  他用脚步为人们丈量出一份伟大的父爱。

  

  亲爱的宝贝

  如果你能活着

  一定要记住我爱你

  这是妈妈对孩子最后的嘱托

  被发现时母亲离世孩子却安然无恙

  她用肩膀为孩子撑起了生命的蓝天

  

  众志成城

  托举生命

  解放军战士们不畏艰险无惧生死

  与时间赛跑

  同死神抢人

  他们用行动践行着为人民服务的使命

  

  2008年到2021年

  整整十三年

  对全中国来说是沉痛的记忆

  对汶川来说更是艰难的成长

  一路走来

  我们深切感受到了那句

  如果奇迹有颜色

  那一定是中国红

  

  意外来的猝不及防

  但总有些温暖

  让明天依旧光芒万丈

  总有些感动

  伴随着我们岁岁年年

  

  今天

  让我们一起为逝者默哀

  向这些“感动”背后默默付出的他们致敬

  #汶川地震13周年#

文章来源:星耀天平综艺

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

 

面包屑:被忽视的细节

资深UI设计者


文章来源:站酷   作者:
大鱼小鱼虾米

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

助力体验设计的10个方向

资深UI设计者


文章来源:站酷 作者:
再次微笑_

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

SpringBoot + Spring Cloud +Vue 管理系统前端搭建(二、visual studio code开发前端项目)

前端达人

我们打开visual studio code , 选择文件------------->将文件夹添加到工作区,导入我们的项目

 

安装Element

导入后,我们安装以下element

官网:https://element.eleme.cn/#/zh-CN/component/installation

安装命令:npm add element-ui或者也可以用yarn

安装完成后,我们在main.js中引入Element

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

 

/* eslint-disable no-new */

Vue.use(ElementUI)

new Vue({

el: '#app',

router,

components: { App },

template: '<App/>'

})

页面路由

 我们把components改名为views,并在目录下添加3个页面:Login.vue、Home.vue、404.vue。

页面内容类似:

<template>

<div class="page">

<h2>Login Page</h2>

</div>

</template>

 

<script>

export default {

name: 'Login'

}

</script>

配置路由

打开router/index.js,添加3个路由分别对应主页、登录、404页面

import Vue from 'vue'

import Router from 'vue-router'

import Login from '@/views/Login'

import Home from '@/views/Home'

import NotFound from '@/views/404'

 

Vue.use(Router)

 

export default new Router({

routes: [

{

path: '/',

name: 'Home',

component: Home

}, {

path: '/login',

name: 'Login',

component: Login

}, {

path: '/404',

name: 'notFound',

component: NotFound

}

]

})

配置完后启动项目,在浏览器访问测试

http://localhost:8080/#/

http://localhost:8080/#/login

 

http://localhost:8080/#/404

说明我们的配置已经生效了

安装scss

安装依赖:

npm uninstall sass-loader //卸载当前版本) 
npm install sass-loader@7.3.1 --save-dev //卸了重新安装了一个低版本
npm install node-sass@4.14.1 --save-dev //安装node-sass 

安装的时候注意对应版本,版本不对应,启动会报错

安装后修改404页面

<template>

<div class="site-wrapper site-page--not-found">

<div class="site-content__wrapper">

<div class="site-content">

<h2 class="not-found-title">404</h2>

<p class="not-found-desc">抱歉!您访问的页面<em>失联</em>啦 ...</p>

<el-button @click="$router.go(-1)">返回上一页</el-button>

<el-button type="primary" class="not-found-btn-gohome" @click="$router.push('/')">进入首页</el-button>

</div>

</div>

</div>

</template>

 

<script>

export default {

name: '404'

}

</script>

 

<style lang="scss">

.site-wrapper.site-page--not-found {

position: absolute;

top: 60px;

right: 0;

bottom: 0;

left: 0;

overflow: hidden;

.site-content__wrapper {

padding: 0;

margin: 0;

background-color: #fff;

}

.site-content {

position: fixed;

top: 15%;

left: 50%;

z-index: 2;

padding: 30px;

text-align: center;

transform: translate(-50%, 0);

}

.not-found-title {

margin: 20px 0 15px;

font-size: 8em;

font-weight: 500;

color: rgb(55, 71, 79);

}

.not-found-desc {

margin: 0 0 30px;

font-size: 26px;

text-transform: uppercase;

color: rgb(118, 131, 143);

> em {

font-style: normal;

color: #ee8145;

}

}

.not-found-btn-gohome {

margin-left: 30px;

}

}

</style>

再浏览器访问http://localhost:8080/#/404

 

可以看到样式改变了

安装axios

命令:npm install axios

安装完成后修改Home页面,进行一个简单的测试

<template>

<div class="page">

<h2>Home Page</h2>

<el-button type="primary" @click="testAxios()">测试Axios调用</el-button>

</div>

</template>

 

<script>

import axios from 'axios'

import mock from '@/mock/mock.js'

export default {

name: 'Home',

methods: {

testAxios() {

axios.get('http://localhost:8080').then(res => { alert(res.data) })

}

}

}

</script>

可以看到我们的请求已经成功了

安装Mock.js

为了模拟后台接口提供页面需要的数据,引入mock.js

安装依赖:npm install mockjs -dev

安装完成,在src新建一个mock目录,创建mock.js,在里面模拟两个接口,分别拦截用户和菜单的请求并返回相应数据。

import Mock from 'mockjs'

 

Mock.mock('http://localhost:8080/user', {

'name': '@name', // 随机生成姓名

'name': '@email', // 随机生成邮箱

'age|1-12': 7, // 年龄1-12之间

})

Mock.mock('http://localhost:8080/menu', {

'id': '@increment', // id自增

'name': 'menu', // 名称为menu

'order|1-10': 6, // 排序1-10之间

})

修改Home.vue,在页面添加两个按钮,分别触发用户和菜单请求。成功后弹出返回结果

注意:要在页面引入mock    import mock from '@/mock/mock.js'

Home.vue

<template>
  <div class="page">
    <h2>Home Page</h2>
    <el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
    <el-button type="primary" @click="getUser()">获取用户信息</el-button>
    <el-button type="primary" @click="getMenu()">获取菜单信息</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import mock from '@/mock/mock.js'
export default {
  name: 'Home',
  methods: {
    testAxios() {
      axios.get('http://localhost:8080').then(res => { alert(res.data) })
    },
    getUser() {
      axios.get('http://localhost:8080/user').then(res => { alert(JSON.stringify(res.data)) })
    },
    getMenu() {
      axios.get('http://localhost:8080/menu').then(res => { alert(JSON.stringify(res.data)) })
    }
  }
}
</script>

访问http://localhost:8080/#/

点击获取用户信息

点击获取菜单信息

可以看到我们已经得到响应数据,这样mock就集成进来了

看完记得点赞哦


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


文章来源:网络某处。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

PM2托管工具使用详解

前端达人

参考 pm2从入门到精通
服务器上的项目需要保持稳定,即使发生故障项目也要自动重启以提供服务,这时需要托管工具对我们的项目进行托管。PM2正是这样一款工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。

安装pm2
$ npm install -g pm2 
  • 1
启动应用
$ pm2 start app.js  (--watch)  # 加上watch参数后可以实时修改代码 
  • 1
管理进程
$ pm2 list 
  • 1
停止应用
$ pm2 stop <app name> 
  • 1
重启应用
$ pm2 restart <app name> 
  • 1
删除应用
$ pm2 delete <app name> 
  • 1
显示某个应用程序的日志
$ pm2 logs <app name> 
  • 1
显示所有应用程序的日志

$ pm2 logs


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


文章来源:网络某处。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


涨姿势!写给网页设计师的网页设计简史

周周

涨姿势!写给网页设计师的网页设计简史

编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

当我发现设计网页有多投机取巧的方法之时,就逐渐开始对手打网页代码失去兴趣。的确,许多网页设计的问题并不止一种解决方案,但是很少有方案能解决所有的浏览器兼容性问题。最令我纳闷的是,为什么会有做设计和写代码的分工?随着技术的发展,许多在过去难以解决的问题现在可以轻松搞定,但为什么与此同时一些简单的事情反而越来越难以实现?这些问题的答案并不是简单的是与否,对与错,也许我们需要从网页设计的整个发展历程来寻找答案,找到真正弥合设计与代码之间隔膜的原因所在。

温故历史之前,不妨看看2014年最优秀的网页设计:《爱不释手!2014年最佳的20个优秀网页设计》

网页设计:黎明前的黑暗(1989)

涨姿势!写给网页设计师的网页设计简史

在互联网真正开始之时,黑色的显示屏仅能显示单色的像素。可以说,当互联网天地初开之时,Web Design 仅仅意味着字符和空格的排列组合。虽然图形化的界面早在80年代初就有了,但在此时普及率并不高。直到90年代,图形化界面才真正进入千家万户,而那时候,才是属于互联网的狂野西部。

表格(table):网页的兴起(1995)

涨姿势!写给网页设计师的网页设计简史

能够显示图片的浏览器的诞生,是促使网页设计这个行业诞生的重要先决条件。实际上在当时,最接近于信息结构化的概念,是HTML中已有的元素:表格(Table)。所以,David Siegel 在他的网页设计书《Creating Killer Sites》讲述了他设计优秀网站的秘诀:在表格中嵌套表格,将静态的表格和动态的表格以巧妙的方式结合到一起。尽管表格本身是用来承载数据的,用来承载内容和图片有点奇怪,但是在那个时代,这种方法依然显得颇为靠谱,并且大行其道。

网页设计所面临的另外一个问题,就是如何保持网页那脆弱的结构。也正是因为这种需求,切片设计(Slicing Design)逐渐流行了起来。设计师创建出漂亮的网页布局,随后开发者将整个设计稿切片,找出呈现设计的最佳方法。另一方面,表格还有一些炫酷的功能,比如垂直对齐,以像素为单位或者以百分比来控制对齐。在那个时代,表格可是近乎栅格系统一般的灵活的设计神器,也正是因此,那个时代的开发者并不喜欢前端的代码。(表格嵌套表格有多乱?)

来自JavaScript的救援(1995)

涨姿势!写给网页设计师的网页设计简史

JavaScript的出现补足了尚且原始的HTML。举个例子,如果你想写个弹出窗,或者想动态修改某些对象的顺序?HTML不行,但是JS可以!不过此时JS的主要问题在于,它处于整个网页布局的顶层并且需要单独加载。很多时候它仅仅被懒惰的开发者用作一个简单的补丁,但如果使用得当,JS可以非常强大。今天,同样的功能如果CSS能实现,我们会尽量避免使用JS。不可否认的是,JS本身确实很强大,前端常用的jQuery,后端的Node.js都是不可多得的好东西。

Flash:自由的黄金时代(1996)

涨姿势!写给网页设计师的网页设计简史

作为一门新技术,Flash为网页开发者/设计师带来了前所未有的自由,它打破了之前网页设计所固有的限制。借助Flash,设计师可以随心所欲地在网页上展现任何形状、布局、动画和交互,可以使用任何喜欢的字体,他们借助Flash熔于一体。所有的这一切最终会被打包成为一个文件,然后被发送到浏览器端显示出来。这也就意味着,用户只需要拥有最新的Flash插件和些许等待时间,就可以享有一个魔术般的网页。这是启动页面(splash pages)、介绍动画以及各种交互特效的黄金时代。不幸的是,这种设计并不开放,也不利于搜索,还需要消耗计算机大量的运算能力。2007年,当苹果发布他们的第一台iPhone的时候,就决定彻底放弃Flash,也正是在这个时候,Flash开始走下坡路——至少在网页设计领域。

CSS的诞生 (1998)

涨姿势!写给网页设计师的网页设计简史

差不多是在Flash崛起的同时,一种更好的网页结构化设计工具CSS诞生了。CSS的基本概念是将网页内容的样式分离出来,所以网页的外观和格式等属性将会在CSS中被定义,但内容依然保留在HTML中。早期版本的CSS并没有现在那么灵活,和许多新事物一样,它最大的障碍在于许多浏览器还没来得及接纳这一新技术,对于开发者而言,这是一个头疼的事情。需要明确说明的是,CSS并非全新的编程语言,它仅仅只是一种声明性语言。那么网页设计师需要学习编程吗?可能需要。但是网页设计师需要懂得CSS么?当然需要。

栅格与框架:移动端的崛起(2007)

涨姿势!写给网页设计师的网页设计简史

此刻,在手机上浏览网页本就是一种全新的挑战。设计师除了要为不同设备设计不同的布局,还面临着内容控制的问题:小屏幕上展示的内容要和桌面端一样多,还是需要剥离开来?桌面端网页上闪亮精致的小广告要如何在手机上呈现?加载速度也是一个大问题,移动端设备的网络加载速度不够快,而且桌面端网页会消耗大量的流量。网页设计亟待改进。

第一个重大的改进是栅格系统的出现。经过摸索,960栅格系统最终胜出,经典的12栏栅格被设计师们广泛的接纳,甚至成为许多设计师最常用的设计工具。接下来,各种常见的设计元素诸如表格、导航、按钮被标准化,打包成为可复用的套件,这基本上就构成了视觉元素库,其中还纳入了常见的代码。其中最典型的代表就是Bootstrap和Foundation,它们也使得网站和APP之间的界限逐渐模糊。当然,它们也不是没有缺点,借助这些库设计出来的网页往往大同小异,而且网页设计师要想使用它们还得深入了解相关的代码知识。

响应式网页设计(2010)

涨姿势!写给网页设计师的网页设计简史

惊才绝艳的设计师Ethan Marcotte决定挑战传统的网页设计,它让网页在内容不变的前提下,布局随着窗口和屏幕的变化而变化,并且将这种设计命名为响应式网页设计。网页设计师依然只需要HTML和CSS就可以实现这种功能,不得不承认这种设计理念非常超前。不过大家对于响应式设计依然有些许误解。对于设计师而言,响应式设计意味着为设计许多不同的布局。对于用户而言,响应式设计就意味着这个网页可以在手机上完美浏览。对于开发者而言,响应式设计意味着如何控制好网站图片应付移动端和桌面端,在不同情形和语义下,拥有良好的下载速度和呈现效果,等等。简而言之,就是一个网站能在任何情况下良好展现。至少在这一点上,所有人能达成共识。

扁平化的时代(2010)

涨姿势!写给网页设计师的网页设计简史

设计网页布局总会花费大量的时间,好在这个时候我们开始抛弃复杂的光影效果,重新专注于根本的内容呈现。在此之前,网页设计讲求精美的图片和排版效果,漂亮的插画与周到的布局设计,而简化这些视觉元素之后,就是我们说所的“扁平化设计”。将复杂的效果淡化之后,视觉的扁平化,也促使内容和信息层级的扁平化。充满光影特效的按钮被扁平化的图标所替代,矢量图形和图标字体也开始被大范围使用,网页字体和版式设计的结合令网页视觉更加漂亮。有趣的是,这时候的网页设计开始有返璞归真的感觉。

光明的未来(2014)

涨姿势!写给网页设计师的网页设计简史

技术的革新已经开始将网页设计推动到一个全新的境界。在许多设计平台上,设计师只需要在屏幕上移动不同的控件就可以生成整洁可用的代码出来,并且这些代码非常灵活,可控度极高!试想一下,开发者无需担心浏览器兼容性,可以专注于更加实际的问题!

新诞生的概念正在推动网页设计。CSS中新诞生的属性,诸如vh和vw(viewport height 与 width1),就使得网页元素的位置控制更加灵活自由,一次性解决了设计师纠结多年的顽疾。作为CSS一部分的Flexbox则是另一个新事物,它可以快速创建布局,轻松修改属性而无需编写过多代码。

网页设计正在飞速发展,未来还会有越来越多的创新,就让我们拭目以待吧!


文章来源:UI中国    推荐:陈子木


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


2021年最新UI设计趋势!小白也很值得看

seo达人

 

此篇趋势文列举的一些例子还是挺好的,并且文中提到了很多有用的工具网站(我都一一列举出来了)不可错过,值得看一看!

1、3D插图(是的,还是!)

3D图像将继续流行,尤其是当普通UI设计师真正用3D创建一些东西变得越来越容易的时候! (试试名为Spline的3D工具--目前还在测试阶段,但如此惊人且易于使用!)。

Spline

网址:spline.design

3D也被广泛用于全屏动画,作为主要的视觉效果--看看Superlist或者看看Minh Pham的一个惊人的3D教程,如何为你的网站创建一个令人惊叹的3D背景。

Minh Pham的dribbble地址:

dribbble.com/phamduyminh/shots

2、玻璃拟态

你听说过最新的热潮叫玻璃拟态(glassmorphism)吗?(没错,neuomorphism已经不酷了)。这是UI领域的最新潮流,它主要是基于一种叫做背景模糊的效果,它基本上可以在元素上创造出 "透过玻璃 "的外观和感觉。

它是在Windows Vista中引入的,后来又在iOS7中引入,但似乎它以全新的、焕然一新的形式在这里停留了一下! 如果你想仔细了解玻璃变形,可以试试这个玻璃变形生成器(Glassmorphism Generator)在线工具。

Glassmorphism Generator玻璃拟态生成工具:

glassmorphism.com

3、真实的照片

我强烈预测,很快大家就会对产品设计中的插图和3D图形感到厌倦,所以实景照片将大举回归。

正如我在之前的一篇文章中写到的,插图可能并不适合所有人。而有时候,真人和真实的物品能给用户带来更大的影响。Ekokubki的网站就是基于真人摄影的,看起来很不错!

Ekokubki网址:

ekokubki.pl

4、鲜艳的色彩

无论在哪里,我都能看到网站和手机设计上的多彩斑斓。

看看Designcode.io、Sleepiest和Design Talks! 我喜欢那里的色彩如何营造出一种神奇、空灵的氛围。而当我们使用鲜艳的颜色时,我们更容易区分和记住一个产品。

Instagram很早以前就知道这一点(这也是为什么他们的图标发生了令人难忘的变化)。

5、模糊、多彩的背景

和上面那个类似,但混合了一点玻璃变形的效果......由于这种效果的精致,我觉得它让UI看起来就是赏心悦目。使用模糊背景的设计看起来非常有机、温暖和温馨。

看看Stripe(那里也有一些玻璃变形)和My Mind(一个惊人的、简单的自我组织工具)。

6、美学极简主义

可能是我个人最喜欢的一个趋势。没有什么比简单、简约、可读性强的UI更美观的了。

像Revolut(也是简单的3D)、Sketch和Qoals(也是模糊背景)这样的网站就是最好的例子,你不需要花哨的UI,也不需要 "惊艳的效果 "就能让你的产品看起来绝对惊艳(可惜的是,没有多少客户明白这一点)。

7、几何结构

我看到越来越多的设计,视觉结构非常整齐、保守。这让信息看起来真的很有条理!

界面几何结构最漂亮的例子之一是Rituals网站。这样的使用和观看是一种享受(同时,也喜欢那些简单但令人愉快的动画)。

8、大而精的文字排版

在一个产品的设计中,有很多例子表明,一个大而复杂的排版设计在产品的设计中起着主要作用。有的甚至完全是以字体设计为基础--结果往往很有趣。字体的选择往往是相当奢侈的。

看看Whirly Birdie、Dovetail+Afterpay(也是鲜艳的色彩)和Synchronized(也是野蛮主义)。

9、野蛮主义

这是我最反感的一种趋势(老实说,也许没有神经形态主义那么反感)。它被称为野蛮主义,看起来很像名字所暗示的那样--强烈的对比,经常是令人不快的排版,以及许多无障碍和可读性的问题。

但我得到了整体的氛围--它背后的主旨基本上是对我们认为的美丽和有用的东西进行解构。

出乎意料的是,我看到很多网站和应用其实都在追求这种趋势! 其中之一是一个叫Newonce的波兰电台)。

我真的尝试过,但当涉及到用户界面时,我并不喜欢它。我更希望它能留在海报和杂志上。

10、简化用户体验/用户界面流程

与其他趋势不同的趋势--不是视觉上的。

我看到行业内越来越多的人意识到,产品设计背后的很多流程已经变得极其复杂。它来了,而且很糟糕--对产品设计师,对客户,最主要的是--对数字产品本身。

巨大的变革需求。而且,我相信它正在慢慢开始改变。我强烈认为,是时候退后几步了,或者说是时候用全新的眼光来审视整个行业了。

是时候重新思考那些混乱的概念和名称,重建那些困难和耗时的流程,让有抱负的设计师更容易学习产品设计。

文章来源:搜狐网

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

 

2021年UI设计趋势完整版,看这篇就够了

seo达人

 

今天从图形、布局等方面,继续聊聊设计趋势,希望这篇文章帮你弄懂2021的UI设计趋势,一定记得收藏哦。

图形趋势

今年的图形运用上,运用比较多的就是分形,流体,和几何图形的运用,以及在重复图案的运用,比如上图就是运用重复图案形成的效果,画面冲击感强,抓人眼球。

1.分形的运用

很多人可能对这个词比较陌生,或许是第一次听到,维基百科上官方解释大概是:分形也被称为扩展对称或展开对称,形状的重复是完全相同的,形在不同的缩放级别上可以是近似相似的。官方解释比较拗口,简单理解就是一个图形的重复有规律的运动,通过对称,重复,运动方向延展,最知名一个案例就是苹果照片的图标,它是通过一个圆角矩形重复旋转8次得到。

 分形很重要一个特征就是有规律重复,它会围绕一个方向,一个角度去重复,形成一种自然的美感!

 它通过颜色叠加,融合,整体会呈现出更加生动的变化。

 Grabient的网站设计中也是同样运用一组分形的几何图形重叠。然后巧妙的把品牌LOGO运用到背景中去。

 UBER的设计语言中,也同样发现了分形的身影,设计师将每个国家富有代表性的图形提炼处理,然后重复运用平铺,形成一种时尚的几何纹理,运用到闪屏,线上线下的产品中。

 东京造型大学的一组设计,同样运用分形的手法,整体颜色轻盈,冲击力强。

 图标中运用就更为常见,苹果相册,chrome以及谷歌相册都是同样的设计手法。

 这种风格简约,对称,有秩序,所以在很多图标作品中都可以看见,这种图标设计中,一般单个基础形不会重复太多次,一般以对称形式出现,质感上也是采用颜色叠加效果。

2.流体,几何非对称的运用

流体和几何不对称形状,其实在2018,2019都看见了很多同类型的设计,但是在2020年它会比之前更多,流动的形状和大胆的色彩,以及丰富的渐变融合在一起,将会是今年形状这块一个重大的趋势。

 渐变的流体运用,配合动画效果,非常的活泼具有生命力。

 液态的设计,无论在动画视频,还是在广告设计中将会越来越被广大设计师所运用,它呈现出来的视觉效果,以及感染力非常强。

 这组智能家居页面布局就是运用了一个不规则几何形状,像水一样波动,吸引用户去点击。

 电水壶智能页面设计,随着水温的增高,后面的背景形状和颜色开始发生着变化,很好的可视化表达案例。

 这组页面设计,就运用了不规则几何图形,让整个设计很活泼欢快。

 这种流体和液态的设计,比较有生命力的同时也焕发着年轻的视觉感。

3.几何图形的运用

 NaverTV的改版升级中,这种几何大面积图形作为整个背景的运用,抽象的几何图形结合渐变色,让整个设计都变得洋气起来。

 整个几何图形,很好的运用到了线下印刷以及APP和网页设计中去。

 苹果的海报设计,也运用了大量的几何抽象图形作为整个背景使用,非常时尚清爽。

布局趋势

那么在布局上,今年的布局形式有什么特点呢?我们不难发现随着屏幕的变大,布局形式也发生着变化。

1.强调底部空间运用

 随着智能手机的发展,屏幕越来越大,那么对于手指有效范围和功能也可以做更多事情,所以很多产品已经开始尝试将导航搬到屏幕底部,这样让产品的使用更加具有连续性。

 高德地图将导航,搜索都移动到屏幕底部,让用户单手指能更好的操作。

 NBSP旅行APP也是将导航从顶部改为底部,用户在进来时候,就能单手操作这个功能。

2.不对称:打破传统平衡和网格

 打破传统的对称,将文字放置图片上方形成错落关系,运用这种非平衡感,增强页面活跃感和独特感。

 在一些大牌的官网设计中,我们也可以看见这种打破网格和平衡的设计,特别下面的印象设计,破形的印象让整个设计都加分了。

 知名品牌资生堂的官网设计,导航占据页面的三分之二,整体的布局方式新颖活泼,非常有时尚感。

 纪梵希的官网,背景采用2等分的图片分割设计文字和香水形成交错感,这种打破平衡的设计。

 在移动UI中,特别是一些产品的官网介绍中,通过商品,背景和文字形成的交错感,让产品很新颖的同时,也非常的让人过目不忘。

微动效

随着5G时代的来临,用户流量和宽带也越来越快了,那么对于微动画也会越用越广泛,除了在图标中大量使用,在很多产品设计中可能也是一个趋势,说不定未来你打开淘宝想买一个东西,根本无需点进详情页,只需要首页就可以完成商品购买,一键加入购物车,以及付款等行为操作。

1.带交互的动效

 之前负责的项目,在支付宝财富页面,页面中间的大卡片就可以直接完成理财产品的直接购买,通过一张卡片插画股票大盘信息,来决策当天的理财投资行为。相信在未来很多产品中,这种一步式操作会逐步普及起来。

 十字形的导航菜单,能很好的将多个功能融入到底部图标中,最早在path产品最新运用,这种将功能和动效的结合也是值得关注的,动效除了让页面更加欢快流程,同时里面也可以赋予更多的功能体验。

2.动态的插画和C4D

 以前的插画,可能你只需要把画面设计好看,够生动符合场景感,那么在未来插画也需要能动起来,动态插画更像一个简单的动画片,能更好的将画面故事完整的表达出来,相对静态插画更加生动。

 动态的C4D在很多电商设计,品牌营销设计中大量用到,动态的场景更像一个场馆,有故事带入感,未来对3D设计师要求更高了,除了C4D效果要做好,还需要能做的动起来,做设计师真是太难了。

文章来源:搜狐网

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

 

洞察SaaS:中国SaaS的前世今生

资深UI设计者

全球SaaS的起步可以追溯至1960年代兴起的分时系统(Time-Sharing System),20世纪90年代后,全球SaaS市场不断成长,日益走向成熟,其中美国是全球SaaS领域发展最迅速的国家。由于SaaS的概念在国内仍属新兴事物,大多企业对此认知十分有限。基于此,本文作者总结了中国SaaS的前世今生。

SaaS诞生于20世纪末期,与“古老”的企业应用软件行业有着密不可分的联系。很多入行不久的B端产品经理对SaaS的历史不是非常了解,因此经常有人问我“什么是SaaS”之类的问题。

今天,我就通过一篇文章,带你了解中国SaaS的前世今生。并且通过几个关键词的解读,分享我对“中国SaaS”的洞察。最后,我还会用专门的章节回答SaaS群网友提出的几个问题。

当然,受限于个人见识和经验,本文可能存在一些疏漏甚至谬误。所谓的“洞察”,也更多是个人肤浅的见解。因此,我更希望本文能抛砖引玉,引发更多思考。

01 起源:SaaS的前世

1. ERP的黄金时代

20世纪90年代中期,随着Oracle、SAP等国外ERP巨头进入中国,并拿下华为、联想等一流企业,正式宣告了中国ERP黄金时代的到来。作为一个“舶来品”,ERP的崛起有着深刻的时代背景。

  • 其一是当时国内信息化建设刚起步,企业内部存在大量信息孤岛,高层迫切需要一个解决方案,从全局管控、优化企业的信息化建设;
  • 其二是当时中国企业普遍存在大而不强的问题,很多国外产品在中国具有领先的市场地位。为寻找破局思路,中国企业有着强烈的“向欧美先进企业学习”的诉求。因此,“通过ERP进行业务流程再造”的思想,在当时一度非常盛行。

以上背景也在一定程度上导致了:SAP、Oracle牢牢占据了中国市场优势地位,而国产ERP软件用友、金蝶则相对弱势。即便到了“国外企业应用软件在中国逐步式微”的今天,SAP约10000亿元的市值,也远超用友的约1000亿元市值。

ERP时代还有一个明显的特征,即一套软件打天下。不管是SAP的核心ERP产品R3,还是Oracle的主力ERP产品EBS,都是一套软件配置多个行业的解决方案。以我曾任职的Oracle公司为例,EBS系统在中国的标杆客户包括阿里巴巴、中国移动、华为、美的、长安汽车、太平洋保险等。

这些公司分属不同行业,对软件的要求也千差万别,Oracle能满足他们的需求,除了产品本身配置能力强大(EBS软件安装需要200G以上的硬盘空间),以及支持灵活的二次开发,也离不开咨询公司给客户提供贴身的现场实施服务。

这些咨询公司包括国外的IBM、德勤,也包括国内的汉得、赛意等。

2. ERP的困境

传统ERP的交付流程可以简单总结如下:

  1. 通过售前咨询,说服客户高层购买软件以及实施服务;
  2. 客户一次性支付完软件费用,得到软件所有权;
  3. 客户支付现场实施的首付款,咨询公司团队开始驻场实施;
  4. 通过项目制进行交付后,客户宣布ERP成功上线,随后咨询公司可以拿到全部款项;
  5. 如果客户需要,会签订后续软件或运维服务合同,金额约为软件购买或实施合同的20%左右(不同厂商的比例可能不同)。

当然,不同项目的交付流程可能略有差异。比如客户在实施完第一期后,可能还会继续实施第二、三期。但对于大部分企业来说,大规模的实施在几年内基本都会结束。

这种更接近“一锤子买卖”的商业模式,为传统ERP的衰落埋下了隐患,比如:

1)怨声载道的用户

在整个传统ERP的购买决策过程中,普通用户是没有发言权的,他们甚至无法提前深度试用系统以提供反馈意见。因此,ERP厂商会将大部分精力用于“取悦企业决策层”,而忽视普通用户的意见。这就从根本上决定了ERP厂商缺乏改善用户体验的动力。

当然,“存在”就有其“合理性”。传统ERP毕竟是80年代的产物,在那个强调“管理”和“执行”的年代,ERP的商业模式并没有太大问题。

2)昂贵的交付成本

由于是“一套软件打天下”,而各个行业甚至各个企业的管理需求差异很大,这就意味着,传统ERP的交付模式非常依赖现场实施和定制化开发。这无疑会大大增加ERP的交付成本。

以我曾经负责的某个千万级ERP项目为例,“实施费用”是“软件和硬件价格”的4倍左右。

3)难以持续的收入

本质上,传统ERP的商业模式是一次性买断。

首先,软件和硬件费用,是一次性付清的;其次,实施费用在项目上线后,基本也会全部付清。虽然有二期、三期,但一般也就持续几年的时间。虽然部分客户可能会外包运维,但是这部分的金额和实施收入比起来,可能只有20%甚至更低。因此,从一个客户身上获取的收入,是逐年递减的。

当然,以上问题虽然严重,但并不致命。毕竟传统ERP的商业模式,一度非常成功,导致传统ERP衰落的根本原因在于:它已经落后于这个时代。

2010年以后,随着智能手机和4G网络的普及,移动互联网时代正式到来。但基于PC端设计的传统ERP,天生就缺乏移动化、社交化的基因。而作为传统ERP成功的基石之一:厚实的架构和丰富的功能,这次则成为它转型的“绊脚石”—将一个200G的软件重构一次,其工作量并不比重新做一个软件少。

同时,进入互联网时代以来,注重用户赋能和体验、强调MVP和小步快跑是软件开发的灵魂,而部分传统ERP企业,在理念、人才和机制方面的转变,可能还需要一点时间。

02 榜样:Salesforce的神话

1. SaaS的先驱

要洞察SaaS,必须首先了解Salesforce。因为,Salesforce是SaaS领域当之无愧的先驱。

Salesforce创始人贝尼奥夫曾经是Oracle公司的高级副总裁,因为意识到传统ERP的弊端,他在1999年离开了Oracle公司,随之创立了Salesforce,并第一次喊出了“软件已死”的口号(“We believed in the End of Software—that all companies would eventually use the Internet to replace all the software they once installed on PCs. This was our religion”——Benioff)。

作为SaaS领域先驱,Salesforce几乎一直在无人区前进,并一直保持着SaaS行业的领先地位。截止到本文发稿,Salesforce的市值已经超过2000亿美元,远超蓝色巨人IBM,并相比2004年刚上市时增长了200倍左右,是世界当之无愧的“SaaS第一股”。

2. Salesforce的逆袭

了解Salesforce的历史,对我们看清中国SaaS的未来非常重要。实际上,截止到今天,中国SaaS的发展仍没有完全脱离Salesforce发展的基本逻辑。比如从小客户到大客户,从SaaS到PaaS,从传统互联网产品到AI产品等。这从另一个侧面反映了Salesforce的伟大。

Salesforce于2001年推出第一款SaaS版的CRM产品,并且获得了一批中小企业客户。但是,中小企业的付费能力有限,生命周期也相对短,这就使得客户的生命周期总价值LTV(Life Time Value)并不高。因此,到2004年Salesforce上市的时候,它仍然只是一家市值10亿美元的小公司。

但是,Salesforce很快就取得了突破。2008年,Salesforce推出了世界上第一个可以在统一架构上部署应用的PaaS平台——Force.com。通过降低对编程能力的要求,以及提高SaaS开发效率,PaaS平台可以降低SaaS创业者的开发成本,也可以帮助他们快速找到客户。

这使得Salesforce成为一个创业平台,创业者可以通过给各个行业提供更有针对性的产品,来实现自己的SaaS创业梦想。站在Salesforce的角度来说,这也增强了它服务大企业的能力。因为通过SaaS创业者的定制开发,它可以满足更多大企业的个性化需求。

对于大企业来说,软件产品功能的丰富程度是影响其购买决策的关键因素。为快速增强服务大企业的能力,Salesforce开始了疯狂的收购之路。比如2010年收购企业黄页数据库公司Jigsaw,2011年收购云平台社交管理公司Rypple。

Salesforce对时代的变化也非常敏锐,它意识到数字化时代的到来,于是不断通过收购和整合等方式提升自己的数字化解决方案能力。比如在2013年斥资25亿美元收购了数字营销软件公司ExactTarget。

到2015年,Salesforce在营收、企业数、付费用户订阅数、平均订阅规模等关键指标方面,都取得了跨越式进步(见下面的表格),这也标志着Salesforce不再是10年前那家只能服务中小企业的SaaS公司了。

洞察SaaS:中国SaaS的前世今生

数据来源:亿欧智库

完成大企业市场突破的Salesforce,并没有停下前进的脚步,因为,可能没有人比它更明白“时代抛弃你,都不会和你打声招呼”的含义了。

2018年7月,Salesforce收购AI营销平台Datorama;2019年6月,Salesforce宣布157亿美元收购数据分析平台 Tableau;2019年7月,Salesforce宣布与阿里巴巴达成战略合作,以便为大中华区企业提供SaaS服务。毫无疑问,AI+国际化是Salesforce当下的最重要战略。

2020年7月10日,Salesforce迎来了新的里程碑:市值达到了1791亿美元,首次超过了Oracle公司的市值(1761亿美元)。这一历史性的时刻,也宣告了SaaS颠覆传统ERP时代的到来。

参考资料:

  • 亿欧智库《Salesforce系列(一)20年发展史回顾》
  • 亿欧智库《Salesforce系列(二)从财务角度看商业模式》

03 探索:早期的中国SaaS

Salesforce在国外的成功,很早就引起了中国企业的注意。

在Salesforce上市的同年同月,中国的SaaS公司八百客宣告成立。同年,发布了它的第一个SaaS产品:CRM beta版本。

作为第一批吃螃蟹的中国SaaS创业者,八百客也有过高光时刻。比如在2011年,八百客宣布获得来自Salesforce的B轮融资。但是到今天,已经很少再听到八百客的消息了。如今提到知名的SaaS版CRM,我们更多会想到销售易、纷享销客、红圈营销等,而他们多成立于2010年前后。

除了八百客等创业公司,用友和金蝶等老牌ERP厂商也先后尝试了SaaS业务。比如金蝶在2005年收购HK会计在线,随后投入研发力量进行SaaS产品架构的搭建。但是,2010年以前的中国SaaS市场,仍旧波澜不惊。

早期的中国SaaS,从模仿Salesfore开始,艰难地探索着。

04 崛起:中国SaaS元年

2015年,常常被媒体称为中国SaaS元年。

首先是2014~2015年的SaaS融资消息频出。根据IT桔子的数据,2014年SaaS融资74起,是2013年的2.6倍;2015年SaaS融资84起,融资金额估计近40亿,是2013年的10倍,如下图所示。

洞察SaaS:中国SaaS的前世今生

同样在2015年,阿里巴巴发布钉钉1.0版本,正式进入SaaS市场。同年,纷享销客完成1亿美元的融资后,开始疯狂进行广告投放。

而钉钉也不遑多让,一时之间,两家ToB公司的广告占领了腾讯新闻、今日头条等互联网媒体首页,甚至投放到了分众传媒、机场和地铁等。SaaS市场一下子引起了更广泛的关注。

不过,这只是热闹的表象。SaaS崛起的根本原因在于,随着4G网络与智能手机的普及,移动互联网时代已经到来。传统ERP无法满足移动互联网对于体验和效率的要求,天生就具有互联网基因的SaaS则顺势切入了这一块新兴的市场。

比如,曾经有一家国外知名建材厂商主动找到我当时所在的SaaS公司。他们斥资几百万购买了某国际厂商的CRM系统,用于管理分布在全国各地的专卖店。

但是由于很多专卖店位于偏僻的县城,同时也为了节省开店成本和加快开店速度,他们希望能够在手机端进行简单的下单、查询库存等操作。该CRM系统的移动端体验和操作效率存在诸多问题,根本就无法在一线门店推广。迫不得已,他们只能放弃几百万的投资,找到SaaS公司希望购买一套系统。

虽然中国SaaS满足了企业移动办公与管理的需求,但是要颠覆传统软件,“攻占”主流的大企业市场,仍然还有很长的路要走。在这方面Salesfore的发展是一个很好的参考:在推出PaaS平台之前,Salesfore由于无法满足大企业个性化的需求,只能更多服务于中小企业市场。

而即便有了PaaS平台,Salesfore仍然不断通过收购和整合,提高自己产品的丰富度。本质原因在于,获得一个大企业客户很容易——比如你可以向它的某一个部门销售一个小SaaS工具——但要成为大企业的主流供应商,则必须拥有丰富的、有竞争力的产品能力。

05 机遇:趋势加速

2020年,SaaS迎来了重要的机遇。

疫情的发生,让线上化办公、数字化运营的趋势加速。大家都意识到,数字化转型是未来的趋势(从百度指数可以看出来,如下图所示)。拥抱SaaS,是大部分企业的必然选择。

洞察SaaS:中国SaaS的前世今生

“数字化转型”的百度指数趋势

敏锐的资本马上嗅到了市场的变化,越来越多的资本开始涌入SaaS赛道,甚至很多投资人告诉我,他们后续将专注于企业服务赛道的投资。

据B2B内参统计,2020年国内SaaS共发生134起投融资事件,融资总金额超157亿元,是2015年融资总额的4倍左右。到了2021年,热度仍未消退。截至目前,已经有多起过亿的SaaS融资消息。

比如电子签名领域的法大大,宣布融资9亿元;跨境电商领域的Aftership,宣布融资4.3亿元;智能客服领域的智齿科技,宣布融资2亿多元。可以预见,如果没有发生黑天鹅事件,2021年将依旧是一个SaaS融资大年。

2020年的机遇,既是偶然,也是必然。必然性在于,数字化转型是大势所趋,SaaS作为低成本、高效率的数字化转型方案,是大部分企业的必然选择;偶然性则在于,疫情的发生,教育了市场,让这一趋势更加凸显。

06 展望:平台时代

2020年的机遇,虽然带来了更多的资本,但是中国SaaS自身的“效率”问题仍没有被有效解决。所谓效率问题,我简单分为了以下两类:

1. 交易效率

企业去哪里寻找SaaS厂商?如何才能低成本匹配到合适的厂商?

2. 交付效率

如何快速上线?如何低成本满足个性化需求?如何打通多个SaaS系统?

在国外,Salesfore通过自建PaaS平台解决了以上两类问题,从而为万亿市值打下了基础。而在中国,阿里云、腾讯云等互联网巨头则盯上了这一块“肥肉”。

2021年1月14日,阿里云钉钉在6.0版本发布会上,宣布推出宜搭等低代码开发工具,让不懂代码的用户也能快速开发新应用。

同时,全面开放底层能力和1300个API接口。阿里云智能副总裁、钉钉事业部负责人叶军表示:“我们相信,有这样一个全新的应用开发平台的价值,以及充分开放的钉钉底座能力,一定有机会在三年之内在钉钉上长出 1000 万个钉应用。”

有趣的是,钉钉宣布推出低代码开发工具的第二天,腾讯宣布:腾讯云“低代码LowCode平台”正式开启公测。

其实,钉钉6.0发布会一结束,我就断定,微信和飞书一定会跟进。因为,解决大企业的个性化需求是SaaS发展必须迈过的一道门槛,而通过少数几家平台来提供PaaS工具,对于大多数SaaS创业公司来说,是最好的选择。毕竟,PaaS平台的建设周期太长,耗费的成本太高。

毫无疑问,中国SaaS,正在迈入平台时代。

07 洞察中国SaaS

了解了中国SaaS的前世今生,我们对SaaS的认识可能仍然是肤浅的。接下来,我就通过几个关键词的解读,和你分享我对中国SaaS的洞察。需要说明的是,“一千个人眼中有一千个哈姆雷特”,可能你会有不同的观点,也欢迎你留言和我探讨。

1. 互联网

SaaS的本质,其实和传统ERP一样,是企业应用软件,服务于企业经营和管理。但是,SaaS的灵魂,却是互联网。

在互联网时代,通过高效的互联网工具,可以用低成本服务于海量用户,同时还能提供更优质的体验。因此,互联网商业模式的特点,往往都是标准化的产品,以及海量的用户。因为只有产品标准化,才能集中资源做出最优质的产品;而只有服务于海量用户,产品的成本才能被无限摊薄。

中国SaaS崛起于互联网时代,必然需要符合互联网时代的要求。但是在追求标准化产品和海量用户的过程中,SaaS却遇到了障碍:标准功能无法满足大企业个性化的需求。

很多SaaS企业因此选择了定制化,从而变成了“项目型”公司。我想说的是,这样的公司很难有大前途。就像Salesfore,如果它没有“逼迫”自己开发出PaaS平台,而是妥协于客户的定制化需求,“一个项目一个项目的交付”,那就很难有今天的万亿市值。

2. 收入留存率

收入留存率是SaaS公司的生命线。

SaaS采取订阅模式,即每年向企业收取“使用费用”。这种模式既是魔鬼,又是天使。

在传统ERP时代,由于是一次性收费,反而规避了软件厂商和咨询公司的风险,即便客户后续使用情况不佳,也无法把“已经付出去的钱”收回来。而在订阅模式下,一旦客户停止使用,就意味着SaaS公司无法继续向客户收费。

由于相对于第一年的订阅收入,SaaS的获客成本很高,因此如果客户早早停止付费,就意味着SaaS公司会严重亏损。当然,从好的一面来看,由于理论上可以永续收费,而且随着客户使用深度、广度增加等原因,客户可能还会增购。

这就意味着SaaS公司可以获得稳定、可持续增长的收入来源。这就是为什么部分SaaS公司能够获得40倍市销率的原因。

而如何判断一家SaaS公司的客户整体上是在流失,还是在复购?是在增购,还是在减少购买?客户规模是在扩大,还是在萎缩?收入留存率无疑是一个非常好的指标。

那么,收入留存率如何计算?公式如下:

收入留存率=留存客户当前的年费收入/留存客户12个月前的年费收入

可见,首先需要锁定12个月前的留存客户,再计算收入留存率。比如,2019年年底,我们留存了1000个客户,产生的年费收入是2000万元。到了2020年,这批客户只留存了800个,产生的年费收入是1800万元,那么:

收入留存率=1800万元/2000万元=90%

为了方便对比,我们也计算一下客户数量留存率:

客户数量留存率=800个/1000个=80%

前者比后者高了10%,可能是因为已留存客户产生了更多的增购行为。

因此,收入留存率实际上综合评估了客户的流失、增购和减少购买等情况,体现了SaaS公司服务客户和保留客户的能力。在订阅模式下,收入留存率无疑是SaaS公司的生命线。

在这里,我们也简单说一下“收入增长率”。收入增长率是一个比收入留存率更加综合的指标。因为导致“收入增长”的原因,除了客户留存和增购,也有可能是“新客户的获取”。

因此,一家SaaS公司拥有优秀的“收入留存率”很重要,但是拥有优秀的“收入增长率”也同样重要:这意味着SaaS公司可能同时具有很强的客户服务能力和销售能力,因此具有很强的增长潜力。

3. 客户成功

在传统ERP时代,软件公司非常重视交付的满意度,因为这决定了能否成功回款;而在SaaS时代,SaaS公司则更加重视使用的满意度,因为这直接影响到收入留存率,是SaaS公司的生命线。

而如何才能实现较高的客户满意度呢?

其实最直接的办法,就是通过SaaS让客户提高收入、降低成本或者巩固自己的竞争优势,这就是所谓的“客户成功”。很多人一提到“客户成功”,下意识就会想到“客户成功部”。其实我觉得,除了客户成功部,产品经理对SaaS的客户成功也有举足轻重的影响。

比如,再及时、细致的功能解答,都不如让产品更加高可用,避免客户的问题;再巧妙的解决方案文档,如果产品本身没有沉淀“行业最佳实践”,也可能变成“削足适履”。如果你是SaaS产品经理,你一定要记得:客户成功,也是你最重要的责任。

4. PaaS平台

SaaS公司要成为大企业市场的主流供应商,PaaS能力至关重要。其原因在于,大企业业务流程和组织架构复杂,经营和管理都很个性化。因此,除非是办公协同等通用型SaaS,专业型SaaS很难做到100%满足大企业的个性化需求。

同时,大企业特别强调“整体优化大于局部优化”,他们普遍希望打通各个环节的信息系统,这样不管是从流程处理上,还是数据分析上,都能有更高的协同效率,以及全局视角。

大企业的这两个需求特性催生了iPaaS(集成平台即服务)和aPaaS(应用平台即服务)。所谓iPaaS,其实就是提供一个集成平台,帮助SaaS解决相互之间数据同步、流程集成的问题;而所谓aPaaS,则是提供一种低成本的应用搭建方式,方便SaaS公司和客户企业定制应用,以满足个性化需求。

PaaS很昂贵,如果每个SaaS公司都自己做一套,既不经济,也不可行。因此,平台化PaaS是大势所趋。

5. 经营能力溢出

虽然SaaS公司都在竭力追求 “客户成功”,但对于中小企业来说,因为缺乏优秀人才和先进的经营策略,成功应用SaaS工具远不是“成功”的充分条件。

而对于SaaS公司来说,由于SaaS天生的互联网属性——高效率的互通互联、自动化的数据采集与分析——这就意味着,如果SaaS公司具备优秀的数字化经营能力,就能够低成本的把这个能力“溢出”给他们的客户,从而创造更大的价值。因此,我把这个运营思路称为“经营能力溢出”。

当然,“躬身入局,深入经营”对于大部分软件开发出身的SaaS公司来说,无疑是巨大的挑战。因此,深入一个行业或者细分领域,从脏活累活干起,耐心打磨,也许是更务实的选择。

08 回答网友的几个问题

1. 自研产品与SaaS的区别

虽然同属于B端产品,但自研产品与SaaS的差异,还是比较大的。

简单来说,自研产品只服务于一家企业,因此相对于产品标准化,更强调和业务的贴合度,以及需求响应速度;SaaS服务于众多企业,因此产品标准化被放在了最重要的位置,和业务的贴合度、需求响应速度就相对要求低一些。

2. 自研产品如何转SaaS

建议:从0开始,搭建一套全新的SaaS产品。不要试图用同一套产品,既满足自身业务,又满足众多外部客户的业务,长期下去,会两头不讨好。

3. SaaS产品架构怎么搭

搭好棋盘,放好棋子。要做SaaS产品架构,“收集需求再抽象化”不是最佳的架构路径,而是直接学习“最优秀的同类产品”,然后站在全局的视角来梳理客户需求。当然,如果你是所在领域的先驱者,那么可以参考同类传统软件架构。

4. 私有化部署的SaaS,还能称之为SaaS吗?

只要是“把软件作为一种服务”来销售,那就是符合SaaS的基本特征。虽然是私有化部署,但是如果客户仍然是使用标准化产品,厂商仍然持续升级,并每年收取订阅费用,那么就仍然是SaaS模式。



文章来源:人人都是产品经理 作者:
王戴明

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

B端典型表格设计

周周


什么是表格?

表格页是公认为展示数据最为清晰和高效的形式,它的信息密度极高,就像是一个家庭衣柜,里面很多抽屉,我们需要把衣物整洁摆放收纳,提高空间利用率。

表格页由三个部分,如下图所示:

一、数据查看

数据查看可通过四个维度去自检设计是否合理,分别为信息降噪、呼吸适中、高效易读、详情查看。

1、信息降噪-内容

通过对表头内容删减,我们一眼就可以看到表格的重要信息,从而帮助用户能快速进行数据决策。因此,列数控制在7+-2,列表表头展示更为关注的数据,更多信息在详情中展示。

另外,如果不同用户想看到的信息侧重不同,我们还可以做自定义设置项,让用户自己去选择想要看到的表格内容。

用最少字数给表头做精简,精简到少一字不可。

另外,当遇到少一字都不可的长标题,我们可以定义专有名词,并且给一个解释专有名词的icon,便于第一次使用的用户易于理解。

2、 信息降噪-视觉

去掉不必要的分割线和斑马纹,用对齐和间距来区分列和行,可以鼠标滑上去给斑马纹,增强交互体验。

分割线的样式尽量轻盈,不要抢视觉,突出内容。

去掉不必要的装饰和颜色,为了防止视觉负担,少用面性图标,使用颜色保持克制,删除如果不是点击即可删除,可以不用预警色。

不要出现衬线字体,比如宋体,保持字体统一

3、 呼吸适中-单元格

定义单元格高度。字号、行高、上下间距进行规范,这里有一个比较常见的规范,将字号设为N,那文字行高就是

1.5N,上下间距为1.2N,单元格高度=内容高度+上间距+下间距。

4、 呼吸适中-列宽

我们将首列和尾列定义为N1,列与列之间定义为N2,随着页面收缩和拉伸,N1保持不变,N2自适应变宽变窄,这样页面会看起来会更均衡,这样会显得有呼吸感。一般定义一个最小值,当表格宽度大于页面宽度时候,固定首尾列,左右滑动

5、 高效易读-对齐方式

标题和内容一般采用左对齐,更高效的浏览顺序,有长短不一的数字时,右对齐方便比较。操作项一般放在尾列右对齐。

6、高效易读-不做无意义留白

当数据为零时就写上“零”,当没有数据时候就写上“-”。比如开发取不到的后台数据,我们就可以给“-”作为显示,如果得到的数据就是零,我们也要让它显示出来。

7、高效易读-选择合适的翻页器

选择合适的翻页器,利用分页可以缓解服务器的加载压力。无限浏览如果数据过多很容易使页面崩掉,使用功能较为强大的翻页器,每一页默认10行以上,减少翻页次数,增强用户体验,给出默认行数后,可以让用户自定义每页行数,相比跨屏翻页,向下滑动更便利。

8、高效易读-收起低频操作项

超过四项操作项收起来,可以用图标指引下一步操作。关于哪些可以操作项可以折叠起来,可以与产品经理沟通收起低频链接,或者埋点一个月时间查看点击量也可以做出决策。

9、高效易读-默认行数

当单元格内容长度不固定的时候,定义好内容的宽度和行数以及字数,超出显示的字数可以用省略号代替

10、高效易读-行的排序

默认最近创建的在表格中第一行显示,使用户感知最新情况。也可以带排序的表头,让用户自定义排序。

11、详情查看-入口

入口可以在操作里加详情,也可以把发起人做成可以点击样式,跳转详情,并且可以避免视觉干扰,也就是降噪,当鼠标Hover上去时候,发起人才显示出跳转色,提示可点击状态。

12、详情查看-交互方式

第一种是用弹窗的形式。第二种是第一种的延伸,当内容过多时候可以考虑抽屉样式。这些交互的共同有点就是没有脱离原页面。当详情内容较多且需要编辑时候,我们就考虑跳新页面,使用新页面进行承载。(这里有个细节,新开tab页可以打开多个详情页,如果覆盖原页面则只能打开一个详情页,并且不能同时查看原页面和详情页。所以我们要根据具体场景、业务需求去设计)

二、数据过滤

数据过滤由搜索,筛选和标签页构成。

1、搜索

搜索可分为模糊搜索和带标签的搜索。工作中常用的搜索为模糊搜索,优点是只要有相关的内容都会搜索出来,减少了精准搜索带来的记忆负担。缺点是容易把不相关的信息也带出来,例如搜索手机号,把相关编码也匹配了出来。带标签的搜索优点是搜索匹配精准度高。缺点是每次只能对单一条件进行搜索,当用户要搜索的时候都要去切换选择信息,多了一个步骤。另外,在实际工作中,可以通过埋点或者调研,如果搜索框搜索手机号频率较大,我们可以把手机号设置为默认选项。

2、筛选

筛选框可以分为下拉筛选和平铺筛选。下拉筛选的优点是空间利用率高,起到了很好的收纳作用。缺点是无法直观看到所有筛选项。平铺筛选优点是操作效率高,筛选项一目了然,支持输入更多筛选条件,可以自定义输入。缺点是空间利用率低,不适合选项太多的情况。如果用户点击其中一个选项概率最多,我们就可以将点击率高的一项作为默认项,然后选择第一种下拉筛选框。如果用户点击每个选项概率相等,在空间允许情况下我们可以平铺出来。

当筛选项过多时,信息排序应是用户目标优于业务逻辑,即排序应该考虑用户的使用习惯。例如当用户查找订单时候,第一反应都是搜索框输入,而一般通过价格过滤较少的应该放在末尾。

当然,我们还有更多优化空间,当筛选项过多时,我们可以默认折叠低频筛选项。折叠哪些筛选项还是得基于用户习惯,可以通过数据埋点或者用户调研得到用户使用场景。

当通过数据埋点或者用户调研发现绝大多数用户只需要用到搜索项,那么我们就可以只保留搜索框,其他选项全部折叠到高级搜索里面,当点击高级搜索时候出现一个弹窗,既可以保留更多筛选内容,又可以使页面不会看起来很拥挤。

(当弹窗内容选择完毕时候,高级搜索按钮会呈现高亮颜色,未选择更多筛选内容时候则呈现默认态。)

3、标签页

标签页是比较常用的数据过滤方式,切换样式包括基本样式、卡片样式以及胶囊样式。一般和时间、状态的流转有关。

同样我们可以通过数据埋点或者调研,将用户最关注的选项设置为默认选项,减少用户的选择,提高用户体验。例如下图,用户更关注的是销售中的商品,即将到店的客户,以及即将发货的商品,所以我们将这些选项作为默认项。

三、数据操作

数据操作从控制范围可以分为单行操作、批量操作和全局操作。从操作属性可以分为新增数据、编辑数据和删除数据。

当从产品那里拿来一个原型图堆叠很多操作项,我们就可以根据控制范围来区分判断,从而明确摆放位置。单行操作可以放到表格里,批量操作根据亲密性原则放在左上方,这样可以离打勾矩形近一些,如果有利于用户操作,也可以放在左下方。全局操作则可以放单独一行,使得层级更加清晰。

调整后,我们发觉虽然解决了多个操作放一块的行为,但是层级还是不够清晰,我们可以通过割裂板块或者板块颜色不同来调整,使得识别性更强。

后记

B端设计强调的是在好用的基础上让页面变好看,所以更考虑用户体验。所有设计方式不局限与一种,只要操作上是顺手,业务上是合理的,都是优秀的设计。如果一个页面占据半屏都是筛选项,那么我们就得好好反思,因为所有筛选项不可能都是高频操作,接下来就需要去做数据埋点并进行页面优化了。另外,一张只有筛选项和表格的页面,表格数据查看区域建议占整个页面的百分之六十到百分之七十,这个时候浏览起来是比较舒适的。





文章来源:UI中国    推荐:最多三分糖


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

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

存档