<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          助力體驗設計的10個方向

          資深UI設計者


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

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          文章來源:網絡某處。
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          漲姿勢!寫給網頁設計師的網頁設計簡史

          周周

          漲姿勢!寫給網頁設計師的網頁設計簡史

          編者按:互聯網的誕生本就是一個奇跡,作為其中最重要的載體之一,網頁就是這個大時代最重要的縮影,相關技術、設計伴隨著信息共享催動著整個時代滾滾向前。這是一段簡短的網頁設計發展史,我們可以看到技術、設計與思想的演進,看到無數有識之士改變世界的剪影。本文作者是網站Froont.com的聯合創始人Sandijs Ruluks。

          當我發現設計網頁有多投機取巧的方法之時,就逐漸開始對手打網頁代碼失去興趣。的確,許多網頁設計的問題并不止一種解決方案,但是很少有方案能解決所有的瀏覽器兼容性問題。最令我納悶的是,為什么會有做設計和寫代碼的分工?隨著技術的發展,許多在過去難以解決的問題現在可以輕松搞定,但為什么與此同時一些簡單的事情反而越來越難以實現?這些問題的答案并不是簡單的是與否,對與錯,也許我們需要從網頁設計的整個發展歷程來尋找答案,找到真正彌合設計與代碼之間隔膜的原因所在。

          溫故歷史之前,不妨看看2014年最優秀的網頁設計:《愛不釋手!2014年最佳的20個優秀網頁設計》

          網頁設計:黎明前的黑暗(1989)

          漲姿勢!寫給網頁設計師的網頁設計簡史

          在互聯網真正開始之時,黑色的顯示屏僅能顯示單色的像素??梢哉f,當互聯網天地初開之時,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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          2021年最新UI設計趨勢!小白也很值得看

          seo達人

           

          此篇趨勢文列舉的一些例子還是挺好的,并且文中提到了很多有用的工具網站(我都一一列舉出來了)不可錯過,值得看一看!

          1、3D插圖(是的,還是?。?/strong>

          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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的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億多元??梢灶A見,如果沒有發生黑天鵝事件,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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          用戶調研實戰經驗分享:如何進行有效的深入訪談

          資深UI設計者

          編輯導語:用戶調研是了解用戶需求的一種有效方式,而深入的用戶訪談可以讓采訪者更直觀地觀察用戶、挖掘用戶的深層需求。本篇文章里,作者結合其自身經驗介紹了用戶調研中、深入訪談應當注意哪些要點,也許讀完會對你有所幫助。


          筆者在去年有幸參與到IBM主導的咨詢項目中,吸收到許多用戶調研的經驗。在后續也將這些經驗應用在工作中,不斷提煉出最有效的內容。本篇內容重點在于剖析如何進行有效的深入訪談,包括訪談的有效形式、步驟、問題設計、以及理解訪談內容的方法。

          一、訪談的有效形式

          訪談,即通過問題,引導用戶能夠圍繞主題表達,從而對我們的工作有所啟發,包括但不限于產品需求的洞察。可見,訪談并不等于聊天,訪談需要你明確主題,需要你集中注意力引導用戶說出你需要的內容,這個過程比聊天有挑戰得多。

          從以上對訪談的認識而言,我們最好采用的方式是一對一訪談。

          這種方式能讓我們的注意力更聚焦,更好地引導用戶,從而使用戶所表達的內容更加深入。

          當然,訪談的方式還包括焦點小組訪談,讓多個類似或者不同的用戶一起接受訪談。

          焦點小組訪談的優勢是能夠在短時間內獲取用戶共性信息,但是這個優勢建立在組內成員的和諧交談中。而經常出現的情況是,小組內多數人沉默不語,少數人爭先表達,難以達到好的效果,聚集多個用戶的成本也相對較高。

          因此深度訪談并不建議采用焦點小組訪談,而側重獲取用戶共性的調研可以考慮。

          二、訪談的步驟

          總體而言,一場訪談所涵蓋的步驟包括:暖場、深入探索、引發用戶思考和收尾。

          以下將逐個步驟講解具體內容。

          1. 暖場

          暖場要達到的目的包括:讓用戶清楚訪談的內容,避免用戶感到迷茫;拉近用戶和你的距離,減少距離感對表達造成的障礙。

          因此在暖場過程中,需要做到以下步驟:

          • 自我介紹:你需要簡單介紹自己的情況,讓用戶對你有初步認識,清楚自己在面對的人是誰;
          • 項目介紹:簡明扼要描述項目目標和訪談的價值,讓用戶感受到自己表達的內容具有價值,從而有動力向你暢所欲言;
          • 建立融洽關系:可以找到你和用戶的共同點,或者從剛發生的小事閑聊一會,給用戶創造輕松的氛圍。

          2. 探索

          探索的過程,也就是和用戶深入訪談的過程。這個階段的目的在于逐步引導用戶圍繞主題表達,讓他們在自己的表達當中自然地表達自己的需求。

          在這個階段,可以進行以下步驟:

          • 經歷:你可以詢問用戶的經歷,了解他們所處的情境,讓他們講出自己的故事,引導他們描述故事的細節,比如:您工作的一天都是什么樣子的?能給我具體描述下嗎?
          • 難題:引導思考在經歷中的所遇到的問題,并詢問他們目前的解決方法,比如:您在剛剛描述的經歷中是否遇到什么問題,可以給我們講述一下遇到問題的經歷嗎?
          • 情感:詢問用戶的感受,了解他們的情感,從中收集他們的反饋。

          3. 思考

          思考的含義是讓用戶自發地對產品進行思考,幫助你了解用戶對產品的期待,在這一環節,你可能有意料不到的收獲。

          在這個階段,可以進行以下步驟:

          • 認知:詢問用戶對產品的理解;
          • 原因:詢問用戶理解產品背后的原因、影響因素,幫助我們有效挖掘需求;
          • 暢想:讓用戶暢想理想狀態下解決問題后的狀態,同步產品真正的用戶價值。

          4. 收尾

          收尾階段的目的包括讓用戶表達疑惑,達到雙向溝通。致謝用戶,最好能夠得到用戶聯系方式,方便下次溝通。

          值得強調的是,以上所述的步驟并不是固定不變的,真實訪談過程中,應該結合具體的情境,靈活操作問題的順序,使訪談流程地進行。

          三、訪談的問題設計

          問題推動著用戶有效表達,是深入訪談的關鍵之一。

          訪談的問題可以總結成以下6種類型,逐步從客觀描述變成主觀判斷、從原因分析轉變到方案建議。

          強調客觀的問題類型包括事實性問題和行為性問題。

          • 事實性問題:詢問已經客觀存在的事實,比如詢問用戶的職位、工作年限等。
          • 行為性問題:詢問用戶經歷,比如銷售彩妝的過程。

          強調用戶主觀判斷的問題包括傾向性問題和原因性問題。

          • 傾向性問題:詢問用戶的偏向,比如你喜歡哪種顏色的行李箱。
          • 原因性問題:詢問用戶背后的原因。

          強調用戶表達觀點的問題類型包括主觀性問題和建議性問題。

          • 主觀性問題:詢問用戶對事情的主觀看法,比如你覺得為什么客戶都喜歡朝南的戶型。
          • 建議性問題:詢問用戶對產品的建議或者問題的解決方案,比如,你對提升活動的吸引力有什么建議。

          以上的問題類型能夠幫我們更好地設計問題的層次,使訪談更加流暢,但是除了問題的層次性,還需要清楚提問的注意事項,如下。

          1. 多問開放性問題,少問封閉性問題

          訪談是希望?戶能夠更充分、更?由地表達,所以在訪談中應該盡量使?開發性的問題,讓?戶能夠按照??的理解和思考進?表達。

          封閉式的問題讓?戶只能回答是或者不是,?個問題你花了30秒解釋和說明,??戶只是回答?個字,信息過少,且被訪者極易處于被動。

          封閉式問題處理方法:在封閉式問題后?要跟上開放式的問題,這樣的引導才能讓?戶闡述更多的原因,提供更多的信息。

          “你喜歡購物嗎?”后面可以提問“能說一下最近一次的購物經歷嗎?”

          2. 多問具體問題,少問抽象問題

          具體的問題詢問的是具體的事件,與之對應的則是抽象的問題,抽象問題需要用戶回答的時候進行總結和概括。

          抽象型問題需要用戶進行再加?后陳述,這可能導致回答的內容偏離事實。

          比如“你?般多?時間發朋友圈?”屬于抽象問題,用戶需要將最近?周或者?個月的經歷進行回憶和整理,可以追問“能舉例最近發朋友圈的時間嗎?”

          3. 多問明確的問題,少問含糊的問題

          含糊的問題是指用戶不能準確理解也不能很好回答的問題,這種問題用戶回答自由度會?較?,給出的回答會比較發散 。

          “你使用這個產品的感覺如何 ?”可以適當追問:“你覺得哪個地?還不錯呢?”

          4. 避免引導性問題

          當你的猜想是,用戶進入首頁后會喜歡歡迎語。

          當你的問題是,用戶喜歡什么形式的歡迎語?

          但是用戶是否喜歡歡迎語?答案并不?定肯定的。

          四、訪談的深入理解

          你需要尋找的是事實,這個事實需要你自己在訪談中去探索。用戶說的話不?定真實的,你需要琢磨用戶的心理,猜測用戶的態度,去偽存真。

          1. 理解用戶意思,再重新復述

          將你的理解和用戶想表達的意思進?步驗證,確保中間的信息沒有斷層,如果存在偏差,也能夠及時糾正。

          2. 不要忽略用戶的弦外之音

          語?蘊含著重要的信息研究顯示,?類全部的信息表達=7%語? +38%聲?+55%身體語?。

          例子,置業顧問說:“哼,客戶總是說我們裝修啊,好!得不得了呢!”不同語氣讀出來表達不同的意思。

          例子,問:你覺得全民營銷小程序用得怎么樣?答:還行,也只能用這個了吧。

          3. 抓住用戶的關鍵詞

          關鍵詞至關重要,你要學會在訪談中抓住關鍵詞,因為這些關鍵詞往往代表著用戶進入了?種新的思維模式。比如,用戶在回答問題的時候,使用了類似于“我通常會考慮……”或者是“基本上每天都會……”

          應該引導用戶跳出總結模式,讓用戶舉出具體的例?,描述自己的相關經驗。

          總結以上,本篇講解的內容包括:

          • 深入訪談的有效形式建議采用一對一訪談;
          • 訪談的步驟包括暖場、深入探索、引發用戶思考和收尾;真實訪談過程中,應該結合具體的情境,靈活操作問題的順序,使訪談流程地進行;
          • 訪談問題的設計應注意循序漸進,并且對封閉性問題、引導性問題、含糊的問題的使用上應該注意;
          • 確保了解用戶所表達的信息,可以采用重新復述、注意行為信息、抓住關鍵詞的方法。



          文章來源:人人都是產品經理  作者:
          DWz

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          js 時間戳轉為日期格式

          前端達人

          什么是Unix時間戳(Unix timestamp): Unix時間戳(Unix timestamp),或稱Unix時間(Unix time)、POSIX時間(POSIX time),是一種時間表示方式,定義為從格林威治時間1970年01月01日00時00分00秒起至現在的總秒數。Unix時間戳不僅被使用在Unix系統、類Unix系統中,也在許多其他操作系統中被廣泛采用。

          目前相當一部分操作系統使用32位二進制數字表示時間。此類系統的Unix時間戳最多可以使用到格林威治時間2038年01月19日03時14分07秒(二進制:01111111 11111111 11111111 11111111)。其后一秒,二進制數字會變為10000000 00000000 00000000 00000000,發生溢出錯誤,造成系統將時間誤解為1901年12月13日20時45分52秒。這很可能會引起軟件故障,甚至是系統癱瘓。使用64位二進制數字表示時間的系統(最多可以使用到格林威治時間292,277,026,596年12月04日15時30分08秒)則基本不會遇到這類溢出問題。

          一.js將時間轉換成時間戳

          1.js獲取當前時間戳的方法

          var timestamp1 = Date.parse(new Date());
          var timestamp2 = (new Date()).valueOf();
          var timestamp3 = new Date().getTime();

          第一種:獲取的時間戳是把毫秒改成000顯示,第二種和第三種是獲取了當前毫秒的時間戳。

          2.js獲取制定時間戳的方法

          var oldTime = (new Date("2015/06/23 08:00:20")).getTime()/1000;

          getTime()返回數值的單位是毫秒。

          演示

          二.js把時間戳轉為為普通日期格式

          1.Date toLocaleStdding方法

          function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleStdding().replace(/:\d{1,2}$/,' ');     
          }

          parseInt() 函數可解析一個字符串,并返回一個整數。

          js中時間操作單位是毫秒。

          toLocaleStdding() 方法可根據本地時間把 Date 對象轉換為字符串,并返回結果。

          replace() 方法用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。

          replace(/:\d{1,2}$/,' ')驗證替換以:開始有一位或二位數字的結束字符串,就是秒;替換為空

          顯示如下:

          image

          演示

          所以我們可以利用正則表達式改變我們想要的日期格式。

          2.Date 屬性方法

          復制代碼
          復制代碼
          function add0(m){return m<10?'0'+m:m } function format(shijianchuo)
          { //shijianchuo是整數,否則要parseInt轉換 var time = new Date(shijianchuo); var y = time.getFullYear(); var m = time.getMonth()+1; var d = time.getddate(); var h = time.getHours(); var mm = time.getMinutes(); var s = time.getSeconds(); return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
          }
          復制代碼
          復制代碼

          image

          演示





          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          文章來源:網絡某處。
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。






          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合