92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

損失厭惡心理是如何影響我們的決策

濤濤

損失厭惡心理在設計中的應用以及是怎么影響我們的決策

前言:

前幾天在一篇文章中看到“損失厭惡”這個心理學現象,就上網查閱了一些相關資料,以及它在設計中是如何運用,又是如何影響我們的決策,總結一點自己的觀點。


一、損失厭惡


對于損失厭惡,先來做幾個實驗,來幫助我們更好的理解。

如果我給你一個蘋果,你應該會感到高興吧!現在換一下,我給你兩個蘋果,接著我向你拿回了一個。

請問,你更喜歡哪一個場景?我想多數人的答案是第一個,而不喜歡第二個場景。

這個實驗兩個場景的結果都是一樣的,都得到了一個蘋果,但是在第二個場景中,因為得而復失,損失了一個蘋果,這嚴重影響并拉低了獲得一個蘋果的幸福感。


丹尼爾·卡尼曼(Daniel Kahneman)曾經設計了一個擲質硬幣的實驗,硬幣是均質的。如果是正面,你將得到150美元;如果是背面,你將輸掉100美元。這個賭局對于參與者來說,長期下注的話,肯定是穩賺不賠的,畢竟輸贏概率相同,贏的收益大于輸的損失。

但是實驗結果卻是,大多數人仍然拒絕了這個賭局,因為對于多數人來說,損失100美元的痛苦遠遠大于得到150美元的快樂。最少收益多少,快樂才能彌補普通人是失去100美元的痛苦呢?答案是,200美元。


由上述實驗我們可以看出:


損失厭惡是指人們面對同樣數量的收益和損失時,認為損失更加令他們難以忍受。同量的損失帶來的負效用為同量收益的正效用的2.5倍。損失厭惡反映了人們的風險偏好并不是一致的,當涉及的是收益時,人們表現為風險厭惡;當涉及的是損失時,人們則表現為風險尋求。


二、堅持中庸最好


我們在進行網購的時候,比如看上一件很喜歡的衣服,追求高性價比的用戶會通過圖片在淘寶進行搜索,進行價格的對比,從而選擇一款銷量高、評價好、價格又合理的款式。

“損失厭惡心理”在其中發揮著它的作用,人們害怕價格太低,買到的商品沒有自己預期的好,質量得不到保障,害怕價格太高,買到的商品不值這個價格。感覺自己會買虧,所以我們總是選擇規避這樣的風險,去選擇一個中間價位的作為目標購買, “堅持中庸最好”。   



三、電商中的應用


每逢換季、過節時一些電商平臺經常會搞一些促銷活動,比如

  1. 2件8折,3件7折,預計到手XX元;

  2. 現價99,倒計時x小時恢復199;

  3. 線下店面到期最后一天全場5折的海報(每次路過的時候都是最后一天)

商家都是為了營造現在不買就沒的“稀缺感”對你刺激消費,套路還是老套路,但是一直都很有用。如果我們真喜歡這件物品,即使湊單也要享受7折優惠去購買,因為你會感覺便宜很多,省下了不少錢;


還有一年一次的店慶,淘寶的雙11,京東的618,也以用戶的“損失厭惡”心理為基座。

用戶從第一個角度想,能在這樣的狂歡節中買到如此實惠的產品,一定要抓住機會,熬夜也要買買買!

用戶從第二個角度想,一年一次,要是錯過這個機會,如此實惠的產品可只有明年才有了,越累越多的人有這種心理,所以淘寶雙十一的總額年年都在刷新記錄。


再就是拼團功能的應用,單買價格可能對你來說不貴,但拼團會讓你感覺更劃算,能省則省,中國有14億人,有那么3 4億消費者是不追求高質量、高標準的,對于他們來說便宜就行,也正是因為這樣一撥人,才促使了拼多多的在短短的3 4年就可以做到上市的原因之一。



在二手平臺,有個估價的功能,當我們輸入我們產品的各種信息后,會出現一個大概的市場價,下面會提示我們預計下周跌幅150元、一周后在降低200元等信息,這些細節設計的很到位,都是利用了人們的損失厭倦心理去促成交易。



四、股票市場中的應用


“損失厭惡”心理往往深刻影響這人們的投資決策。例如,你手中有兩只股票,一只漲了100塊,另一只跌了100塊?,F在你因急事需要用錢,必須賣掉一只,那么你會賣掉哪一只?調查顯示,大多數人會選擇賣掉上漲的股票。因為股票上漲是收益,賺了白不賺,一定要先落袋為安,卻沒有考慮它繼續上漲的可能性。而股票下跌是損失,面臨損失大多數人是不可接受的,總希望它能漲回來避免損失,如果賣掉那損失就永遠不可挽回了。事實上正確的操作應該是賣掉跌的股票,及時止損,不然損失越來越大的概率要更高。


作者在支付寶里買了兩支基金,在探索階段,所以少買了一些在試水,第一支波動比較大,會有虧損,第二支,比較平穩基本就是定期的會有收益,即使沒有,也幾乎沒有虧損的情況,而對我這種金融小白來說會賣掉虧損比較大的,用這些錢去買穩定一些的產品。



五、不要被蠅頭小利蒙蔽


養孩子最貴的莫過于尿不濕和奶粉了當然除了學費,對于一個追求高性價比的人來說,孩子的尿不濕我會在閑魚淘一些寶媽們轉賣的全新產品,從下面這個對話來看,我們兩個都會呈現出明顯的“損失厭惡心理”,賣家不愿意放棄自己眼里的利益,認為自己可以減少損失,而我之前因為花了同樣的錢買了同樣數量的同樣的品牌,所以也不想做出讓步,最終也沒完成交易。



六、間斷造成的損失


一些app中的簽到、金幣購買皮膚等這些常見的功能就是利用了用戶的損失厭惡心理來增加用戶粘性,當用戶連續簽到多少天才可以贏得紅包或禮品,中間只要一間斷不僅領不到獎勵還要重新開始簽到,所以一些用戶為了減少自己的損失,就會連續簽到,還有QQ退出時的提示語也是利用了用戶的這種心理,從而能很好的增加留存。



掌上生活app中的積分抽獎活動,1分、9分,一點點的花光都沒抽中你想要的,內心的不服輸,又抱著僥幸的心理再來一次,可能你把積分花光了也不一定能中獎;

像這樣的情況,我們很容易被眼前的利益所蒙蔽,我們不愿意放棄對未來會有更大利益的收獲,所以不斷投入“沉沒成本”,令損失加倍。



七、在產品中的植入


最常見的就是“購物車”功能,我們女生都愛買買買,也常把購物車當作收藏來使用,放進購物車,就感覺這件商品自己的,過兩天在看,已經下架就會感覺自己像失去了一件寶貝似的

還有就是VIP體驗功能,我們通過百度云盤上傳或者下載文件的時候,會有一個免費體驗300秒的極速下載的功能,先讓你體驗了最為VIP的待遇,體驗過后,開始給你限速;


蘇寧易購APP中非會員用戶可以免費享受一個月SUPER VIP,并購買商品時返現2%到個人賬戶中,讓用戶感覺我買東西的同時還可以剩下2%,像是自己賺到的一樣,體驗期過后,你會感覺自己買東西虧了很多;


這些產品都是先讓你免費試用付費的VIP,待你用習慣了,VIP也停了,大部分人都會乖乖付費,這也是損失厭惡的一種應用。



八、不敢輕易嘗試


在生活中我們吃飯、逛街也是一樣,尤其是吃飯,我們通常會選擇口味、價格、服務、環境等都比較熟悉的地方吃飯,對一些不熟悉的飯館,會比較謹慎,這也是損失厭惡心理在“作祟”擔心陌生的餐館飯菜不好吃還貴;


生活中還有很多常見的損失厭惡心理作祟的例子:比如吃自助餐,雖然過食傷胃的道理大家都懂,人們依然覺得已經花了這么多錢,就該敞開肚子吃才算有“賺到”;比如花30塊買了張電影票,但看了20分鐘后覺得無聊至極,但想著已經花了30塊,不看完整場會很“虧”,選擇繼續呆在影院,即使電影帶來的效益為負……有些時候,哪怕是很小的損失。


總結:


我們每個人都有損失厭惡心理,可以說是天性,也是本能,我們要盡可能去找到一些產生損失厭惡的邊界,讓自己坦然面對損失,規避“損失厭惡”。

點擊遮罩層的背景關閉遮罩層

seo達人

開發工具與關鍵技術:Adobe Dreamweaver CC

作者:黃燦

撰寫時間:2019.1.16



在模仿華為官方網頁的練習當中我發現華為官網中有一個遮罩層是隨便點擊遮罩層的背景也能關閉掉遮罩層,但唯獨點擊內容區域不會關閉掉遮罩層。于是我開始模仿這個寫案例,連內容也一模一樣(因為這個練習就是要寫出和華為關一樣的效果或則比它更好的效果),一開始我是這樣子寫的(圖1)



圖1



class=Select_Region_bj 我給了一個灰色半透明的背景樣式,后來在Javascript中寫onclick事件無論這么寫,點擊內容區也是會關閉掉遮罩層。我百思不得其解到底怎么樣寫才能點擊內容區不會關閉遮罩層,后來下課期間我看見我同學他寫的帶能點擊內容區不會關閉遮罩層。我問他你是這么寫的,他告訴我:“把他們分離就可以的了?!蔽宜伎剂艘粫?,腦補:分離?怎么分離?補著補著補著就補出了背景和內容區分離。分離寫(圖2)

圖2



把背景層和內容區分開來寫,不要在背景層中包裹內容,這樣子點擊內容區就不會關閉掉遮罩層了!

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

深入理解vue中的slot與slot-scope

seo達人

寫在前面

vue中關于插槽的文檔說明很短,語言又寫的很凝練,再加上其和methods,data,computed等常用選項使用頻率、使用先后上的差別,這就有可能造成初次接觸插槽的開發者容易產生“算了吧,回頭再學,反正已經可以寫基礎組件了”,于是就關閉了vue說明文檔。

實際上,插槽的概念很簡單,下面通過分三部分來講。這個部分也是按照vue說明文檔的順序來寫的。

進入三部分之前,先讓還沒接觸過插槽的同學對什么是插槽有一個簡單的概念:插槽,也就是slot,是組件的一塊HTML模板,這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。 實際上,一個slot最核心的兩個問題這里就點出來了,是顯示不顯示怎樣顯示。

由于插槽是一塊模板,所以,對于任何一個組件,從模板種類的角度來分,其實都可以分為非插槽模板插槽模板兩大類。
非插槽模板指的是html模板,指的是‘div、span、ul、table’這些,非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制;插槽模板是slot,它是一個空殼子,因為它顯示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件自身決定,slot寫在組件template的哪塊,父組件傳過來的模板將來就顯示在哪塊

單個插槽 | 默認插槽 | 匿名插槽

首先是單個插槽,單個插槽是vue的官方叫法,但是其實也可以叫它默認插槽,或者與具名插槽相對,我們可以叫它匿名插槽。因為它不用設置name屬性。

單個插槽可以放置在組件的任意位置,但是就像它的名字一樣,一個組件中只能有一個該類插槽。相對應的,具名插槽就可以有很多個,只要名字(name屬性)不同就可以了。

下面通過一個例子來展示。

父組件:


  1. <template>
  2. <div class="father">
  3. <h3>這里是父組件</h3>
  4. <child>
  5. <div class="tmpl">
  6. <span>菜單1</span>
  7. <span>菜單2</span>
  8. <span>菜單3</span>
  9. <span>菜單4</span>
  10. <span>菜單5</span>
  11. <span>菜單6</span>
  12. </div>
  13. </child>
  14. </div>
  15. </template>

子組件:


  1. <template>
  2. <div class="child">
  3. <h3>這里是子組件</h3>
  4. <slot></slot>
  5. </div>
  6. </template>

在這個例子里,因為父組件在<child></child>里面寫了html模板,那么子組件的匿名插槽這塊模板就是下面這樣。也就是說,子組件的匿名插槽被使用了,是被下面這塊模板使用了。


  1. <div class="tmpl">
  2. <span>菜單1</span>
  3. <span>菜單2</span>
  4. <span>菜單3</span>
  5. <span>菜單4</span>
  6. <span>菜單5</span>
  7. <span>菜單6</span>
  8. </div>

最終的渲染結果如圖所示:



  1. 注:所有demo都加了樣式,以方便觀察。其中,父組件以灰色背景填充,子組件都以淺藍色填充。

具名插槽

匿名插槽沒有name屬性,所以是匿名插槽,那么,插槽加了name屬性,就變成了具名插槽。具名插槽可以在一個組件中出現N次。出現在不同的位置。下面的例子,就是一個有兩個具名插槽單個插槽的組件,這三個插槽被父組件用同一套css樣式顯示了出來,不同的是內容上略有區別。

父組件:


  1. <template>
  2. <div class="father">
  3. <h3>這里是父組件</h3>
  4. <child>
  5. <div class="tmpl" slot="up">
  6. <span>菜單1</span>
  7. <span>菜單2</span>
  8. <span>菜單3</span>
  9. <span>菜單4</span>
  10. <span>菜單5</span>
  11. <span>菜單6</span>
  12. </div>
  13. <div class="tmpl" slot="down">
  14. <span>菜單-1</span>
  15. <span>菜單-2</span>
  16. <span>菜單-3</span>
  17. <span>菜單-4</span>
  18. <span>菜單-5</span>
  19. <span>菜單-6</span>
  20. </div>
  21. <div class="tmpl">
  22. <span>菜單->1</span>
  23. <span>菜單->2</span>
  24. <span>菜單->3</span>
  25. <span>菜單->4</span>
  26. <span>菜單->5</span>
  27. <span>菜單->6</span>
  28. </div>
  29. </child>
  30. </div>
  31. </template>

子組件:


  1. <template>
  2. <div class="child">
  3. // 具名插槽
  4. <slot name="up"></slot>
  5. <h3>這里是子組件</h3>
  6. // 具名插槽
  7. <slot name="down"></slot>
  8. // 匿名插槽
  9. <slot></slot>
  10. </div>
  11. </template>

顯示結果如圖:


可以看到,父組件通過html模板上的slot屬性關聯具名插槽。沒有slot屬性的html模板默認關聯匿名插槽。

作用域插槽 | 帶數據的插槽

最后,就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽,實際上,對比前面兩種插槽,我們可以叫它帶數據的插槽。什么意思呢,就是前面兩種,都是在組件的template里面寫


  1. 匿名插槽
  2. <slot></slot>
  3. 具名插槽
  4. <slot name="up"></slot>

但是作用域插槽要求,在slot上面綁定數據。也就是你得寫成大概下面這個樣子。


  1. <slot name="up" :data="data"></slot>
  2. export default {
  3. data: function(){
  4. return {
  5. data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  6. }
  7. },
  8. }

我們前面說了,插槽最后顯示不顯示是看父組件有沒有在child下面寫模板,像下面那樣。


  1. <child>
  2. html模板
  3. </child>

寫了,插槽就總得在瀏覽器上顯示點東西,東西就是html該有的模樣,沒寫,插槽就是空殼子,啥都沒有。
OK,我們說有html模板的情況,就是父組件會往子組件插模板的情況,那到底插一套什么樣的樣式呢,這由父組件的html+css共同決定,但是這套樣式里面的內容呢?

正因為作用域插槽綁定了一套數據,父組件可以拿來用。于是,情況就變成了這樣:樣式父組件說了算,但內容可以顯示子組件插槽綁定的。

我們再來對比,作用域插槽和單個插槽和具名插槽的區別,因為單個插槽和具名插槽不綁定數據,所以父組件是提供的模板要既包括樣式由包括內容的,上面的例子中,你看到的文字,“菜單1”,“菜單2”都是父組件自己提供的內容;而作用域插槽,父組件只需要提供一套樣式(在確實用作用域插槽綁定的數據的前提下)。

下面的例子,你就能看到,父組件提供了三種樣式(分別是flex、ul、直接顯示),都沒有提供數據,數據使用的都是子組件插槽自己綁定的那個人名數組。

父組件:


  1. <template>
  2. <div class="father">
  3. <h3>這里是父組件</h3>
  4. <!--第一次使用:用flex展示數據-->
  5. <child>
  6. <template slot-scope="user">
  7. <div class="tmpl">
  8. <span v-for="item in user.data">{{item}}</span>
  9. </div>
  10. </template>
  11. </child>
  12. <!--第二次使用:用列表展示數據-->
  13. <child>
  14. <template slot-scope="user">
  15. <ul>
  16. <li v-for="item in user.data">{{item}}</li>
  17. </ul>
  18. </template>
  19. </child>
  20. <!--第三次使用:直接顯示數據-->
  21. <child>
  22. <template slot-scope="user">
  23. {{user.data}}
  24. </template>
  25. </child>
  26. <!--第四次使用:不使用其提供的數據, 作用域插槽退變成匿名插槽-->
  27. <child>
  28. 我就是模板
  29. </child>
  30. </div>
  31. </template>

子組件:


  1. <template>
  2. <div class="child">
  3. <h3>這里是子組件</h3>
  4. // 作用域插槽
  5. <slot :data="data"></slot>
  6. </div>
  7. </template>
  8. export default {
  9. data: function(){
  10. return {
  11. data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  12. }
  13. }
  14. }

結果如圖所示:

github

以上三個demo就放在GitHub了,有需要的可以去取。使用非常方便,是基于vue-cli搭建工程。

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

開發過程中積累的CSS樣式(持續更新)

seo達人

前言:平時寫頁面的時候有些樣式使用完發現沒過多久就忘記了,這篇文章主要是用來記錄開發過程中容易忘記的CSS樣式,與其總是去網上查,還不如一個一個記錄下來,雖然說之前的都沒有記錄,但是知識的累積不論什么時候開始做都不會晚的。



首先 記錄幾個好用的插件網站:



layDate日期與時間組件: https://www.layui.com/laydate/

Vant移動端插件庫: https://youzan.github.io/vant/#/zh-CN/intro

Element組件庫: https://element.eleme.cn/#/zh-CN/component/installation

Vue.js框架: https://cn.vuejs.org/v2/guide/

Bootstrap框架: https://v2.bootcss.com/index.html

菜鳥教程官網: https://www.runoob.com/

w3school官網: https://www.w3school.com.cn/

下面是遇到的一些想累積的css樣式:(內容會隨時間累積的越來越多)



1、一個 div 中的內容實現上下滑動效果(而不是超出body的高以后上下滑動):overflow:auto;

簡單的描述:body 中的一個 div 內,如果設置了固定的 height,而內容的總 height 超出了 div 的高,則超出的部分就會被覆蓋,而想實現超出的部分變成滑動的效果而不被覆蓋,則用 overflow:auto; 實現。



2、修改 前端框架封裝好的css樣式: border-radius: 20px!important;(注意使用英文的 ! 嘆號)

簡單的描述:在開發過程中經常使用一些前端框架(bootstrap,vue.js,laydate,Vant等等),在使用link導入css文件以后,發現有些css是在標簽內使用內嵌的方式實現的,優先級最高,那么我們怎么修改呢?

比如:css文件中的邊框弧度樣式為10px:border-radius: 10px;

我們想改成20px,則在后面加上 !important 即可:border-radius: 20px!important;



這篇文章主要是以后回頭復習或者忘記了的時候給我自己看的,但是如果恰好也幫助到了你,那是更加的有意義,在以后的開發過程中,該文章的內容一定會累積的越來越多

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

產品設計核心三要素

濤濤

先問一個問題:怎么樣衡量一個設計好與不好?工作中實踐越多次,越會發現華麗的設計稿并不是體現設計師專業能力的唯一標準。普通設計師和高級設計師區別在于,設計方案是否具備完整設計思路;設計對于業務有沒有真正的價值體現;以及設計方案的推動落地的完整性到底有多少。設計越往后走,越考驗產品思維,設計思維,以及設計推動能力。這是產品設計師需要關注的核心三要素。


設計師在工作中接到設計需求會不自覺的第一時間想著如何去進行視覺表達,視覺表達確實非常重要,也是公司對于設計師的核心價值的定位之一,但視覺表達只是其中設計專業本職工作中的一個環節。設計師還要應該能夠站在產品、設計、技術等不同維度去思考設計方案的可行性。產品打磨-視覺呈現-落地執行,在這三個核心點里面設計師分別有不同的定位和價值所在。 


  一. 產品“雙標”滿足   

產品打磨包含產品規劃,內容組成,界面布局,交互梳理等等…所有環節的工作是為了符合產品最終的目標。產品所有的能力會核心圍繞兩個點:1商業變現 2用戶需求滿足。這兩個目標在產品執行的環節有時候會有一些沖突,在產品打磨階段設計師通過怎樣的方式,做到既滿足產品商業目標又滿足用戶體驗需求?可以按照以下幾個步驟進行分析尋求切入點: 


Image title



這里用騰訊動漫付費模塊舉例說明: 項目背景是騰訊動漫產品要做付費體系升級設計,接到需求先有由產品源頭一步步深入,逐步展開設計方案的規劃。 


 01 產品目標確認  

通過對項目背景的解讀和產品方案的深入了解,以及總結當前存在的一些問題,可以明確得到項目中產品核心目是什么。付費升級核心原因是付費轉化低,用戶付費意愿不夠強烈。此次升級的核心目標是促進內容消費,提升付費率。 


Image title



 02 分析用戶路徑  

確認目標之后從哪個模塊兒開始進行首要需要考慮的。對于現有現有功能的升級,建議核心從產品本身著手,可以根據用戶行為分析,獲取用戶常規使用路徑,找到用戶使用場景下的核心目的,從而去挖掘用戶在付費路徑下的訴求點,根據訴求點找到付費升級的觸點。這里我們羅列了用戶閱讀產品的路徑。 

Image title



 03 觀察用戶核心需求是否被滿足 

 用戶在每個場景下都會有“痛點”和“癢點”。比如在閱讀前,核心目是想快點看到漫畫內容;閱讀過程中,想要及時宣泄對漫畫的故事情節的感受;閱讀后,希望找到更多相關內容或者能夠和內容有更多的互動。目前產品在這三個關鍵的路徑節點都存在一些問題,閱讀前對于付費缺乏正向引導,閱讀過程中互相行為較少,閱讀后沒有更多延展內容可供消費等。 


Image title



 04 洞察設計切入點  

根據用戶在閱讀 “前 中 后” 關鍵路徑的節點的不同情緒反饋,我們可以做出找到相應情感滿足切入點,并且制定解決方案 


Image title



 05 制定設計方案  

將之前找到的設計情感切入點用交互和視覺的形式呈現出來,盡可能完整的表達清晰。下面展示是關于付費升級優化的完整視頻DEMO。整個方案采用趣味情感化形式為核心設計思路,逐步去引導用戶付費。讓用戶在趣味互動中完成產品的商業轉化目標。 


https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html


 二. 設計呈現的“差異化”   

視覺呈現是設計師們都比較擅長的工作,但不同專業高度要求下方案最終呈現出的效果是完全不一樣的。好的設計方案,需要在設計上做出明顯的“差異化”,這里的差異化是指要區別于常規輸出一般的水平。差異化的可以從多個點入手:


Image title



優質的設計美感

美感是作為設計師首先需要培養的技能之一,也是在后續職業生涯的一直需要用到的技能。設計師被神職化的很大一個原因就是因為設計師的美感比一般人要好,有懂得欣賞美、鑒別美、以及創造美的能力。單一從視覺層面,設計作品是合格品還是精品,最終取決于畫面的精美程度。項目不分大小,再小的一個項目都可以做出精致品質,這也是體現設計師專業度的核心衡量之一。


Image title



完整設計思路:

設計方案的完整性也能夠很好的設計師專業度的差異化,幾張圖的設計稿和一個有完整設計思路的設計方案在品質上自然是明顯差別的。設計師不光需要將設計呈現出來,更需要有嚴謹的設計思路并且表達出來讓受眾到你的設計想法。設計前期分析、中期執行、后期落地以及迭代優化,能夠讓設計師有意識的鍛煉和提升自己的設計思維,對于設計師能力提升有必然的幫助。 


Image title



獨特創意:

設計差異化呈現上,創意是一個非常好的切入點。行業大趨勢的前提下,現在同類產品越來越趨于同質化,受眾使用產品的時候都會有一些常規認知,關于功能的、交互操作的、內容組成的等等,淘寶和京東、大眾和美團、甚至QQ音樂和網易音樂在產品使用體驗上都有高度重合的地方,這些已經在用戶心智中形成習以為常的認知感受。如果能夠在用戶的常規認知里,用創意手法呈現出超出他們預期的內容使其驚喜,產品設計就會有明顯差異化體現。 


Image title



善用情感化:

具備美感的設計能讓作品看起來有高級感,但更為高級且有效的是能夠引起用戶情感共鳴的設計。設計是主觀的,對于設計每個人都有自己的想法,也正是因為主觀的設計感受,能讓設計在情感化打造方面可以有很多的嘗試方向。能夠引起受眾主觀情感上的共鳴和認同的設計,會形成產品的核心記憶點之一。設計師對于情感化設計往往會有一些誤區,認為圖形可愛,色彩羨慕,動效流暢且能夠形成一套視覺體系,就能夠算情感設計。真正的情感設計是需要從用戶角度出發,挖掘用戶的認知領域和喜歡,從而去進行符合用戶情感訴求的呈現。 


Image title


三. 方案推動的效能管理 

 

設計方案輸出只是整個產品生產流程中的一個核心環節,產品上線后體驗如何最終取決于落地實現的程度。在方案落地支持過程中,效率協調和實現能力是保證設計方案貫徹一致執行的關鍵因素:


 協作  

產品設計師工作協調分為內部協作和外部協作。內部協作即設計師之間的溝通協同,主要內容是如何保持設計語言一致性,除了制定設計規范,還可以建立公共控件庫,線上調用??丶炷軌蚴乖O計師協作無學習成本,設計師輸出設計稿效率也能夠大大提升,同時保一致性。


外部協作主要是和下游的技術同事直接的工作對接,設計方案的交接方式以及開發獲取信息的效率很關鍵。在開發接收設計方案的時候,盡能力降低獲取成本以及理解成本。比如設計稿的標注,在標注上設計師一般會花很長時間,開發也需要逐步查看,偶爾還會有標注遺漏的地方。我們團隊會直接采用插件,設計稿及時同步,并且開發可以自己隨時查看每個元素的標注信息,便捷。


這里推薦兩款協調軟件:一款是InVision可以在sketch里進行控件協同調用,所有想用的元素直接源文件調用,不需要再問同事要源文件!另一款是Zeplin技術同學可以直接查看元素屬性以及間距等,設計師解放雙手不再需要標注!


Image title



官網鏈接: 

https://login.invisionapp.com/auth/sign-in   

https://zeplin.io/


實現能力   

專業技術之間的壁壘,也會成為設計方案實現的阻力。同樣的界面,設計人員用設計軟件實現,技術人員用邏輯代碼實現,實現的方式和成本存在很大的差異性,所以往往設計師認為很簡單的需求在開發層面的確非常難實現。當然,不是所有需求都是無解的,設計師在技術實現層面還是可以做一些事情:


01 方案前置溝通

設計一個新的功能的時候,如果有非常規的設計方案,可以提前和技術人員溝通實現的難易程度,讓技術人員有前期預判和預演的時間。并且,可以將設計做成簡易DEMO方便技術人員快速理解,避免雙方存在信息不對等的情況。


02 搭建開發控件庫

開發控件庫和設計規范一樣,是最基礎但應用最為頻繁的模塊兒。開發控件庫可以將最基礎的元素形成固有規范,所有開發實現都用同一套規范,以確保實現的高度一致性,同時也能夠提升實現效率和設計還原。設計可以輔助開發一起制定開發控件庫,確??丶旌驮O計規格的一致性。


03 尋求技術語言共通性

盡量將設計方案轉化為技術能夠理解和復用的形式進行對接。除了靜態設計稿的標注,設計和技術實現最大的難點在于動態交互的實現上,對于動態設計,將設計方案轉換為代碼文件交付給技術實現,這樣能確保功能的正常實現同時減少后期設計還原性的偏差。


以上初步總結的關于產品設計師在設計過程中從前期產品規劃到中期設計執行再到后期開發落地應該注意的一些核心點:

第一條,設計方案既要滿足產品目標又同時要兼顧用戶體驗;

第二條,優秀的設計師,會保持設計方案的“差異化”;

第三條,設計師職責除了確保設計方案完整性,更重要的是推動設計方案的完整落地。


在產品設計過程中,設計師需要關注還有很多關鍵點,這里也歡迎大家一起補充交流,正是這些關鍵點,將設計師的思維逐步打開,使其成為一個具有全鏈路思維的設計人才。 

文章來源:UI中國

JS--普通數字格式與會計金額格式之間的轉換

seo達人

普通數字轉會計金額格式(保留兩位小數)

我們可以用數字的toLocaleString()方法將普通數字轉為會計金額格式,但是這種方式無法保留兩位小數(四舍五入),如果是整數或者小數長度只有一位的時候無法自動補0



例如:





思路:

利用toLocaleString()以及toFixed()先對數字進行一個轉換得到最多保留了2位小數的金額,然后判斷數字是為整數還是帶有小數,如果帶有小數則進行切割,判斷小數長度為1時自動補0



// 普通數字轉會計金額格式 第一種

    function toThousandsFormates(num) {

        // 判斷傳進來的數字是否為非空數字

       if (!isNaN(parseFloat(num))) {

            var reg = /./g

            var newNum = Number(Number(num).toFixed(2)).toLocaleString()

            // 判斷轉換后的數字是否帶有小數

            if (reg.test(newNum)) {

                var numArr = newNum.split('.')

                // 判斷小數點后數字長度為1,則自動補0

                numArr[1] = numArr[1].length === 1 ? numArr[1] + '0' : numArr[1]

                return numArr.join('.')

            } else {

                // 整數直接在后面補上0.00

                return newNum + '.00'

            }



        } else {

            return ''

        }

    }

    console.log(toThousandsFormates('0')); // 0.00

    console.log(toThousandsFormates('')); // ''

    console.log(toThousandsFormates(966)); // 966.00

    console.log(toThousandsFormates(966.3)); // 966.30

    console.log(toThousandsFormates(9669228.55)); // 9,669,228.55

    console.log(toThousandsFormates(96566.56954)); // 96,566.57



經過查閱資料后,發現toLocaleString()它里面自帶屬性可以檢查到最少保留了幾位小數,不夠自動補0,這樣我們上面的代碼其實可以更加簡單,如下:

// 普通數字轉會計金額格式 第二種

function toThousandsFormates2(num) {

    // 判斷傳進來的數字是否為非空數字

    if (!isNaN(parseFloat(num))) {

        var newNum = Number(Number(num).toFixed(2)).toLocaleString('zh', { minimumFractionDigits: 2 })

        return newNum



    } else {

        return ''

    }

}



console.log(toThousandsFormates2('0')); // 0.00

console.log(toThousandsFormates2('')); // ''

console.log(toThousandsFormates2(966)); // 966.00

console.log(toThousandsFormates2(966.3)); // 966.30

console.log(toThousandsFormates2(9669228.55)); // 9,669,228.55

console.log(toThousandsFormates2(96566.56954)); // 96,566.57



// 結果一模一樣



會計金額格式轉普通數字(利用正則)

// 會計金額格式轉為普通數字

    function rMoney(num) {

        return parseFloat(num.replace(/[^\d\.-]/g, ''))

    }

    console.log(rMoney('96,566.57')); // 96566.57

    console.log(rMoney('966.30')); // 966.3

    console.log(rMoney('9,669,228.55')); // 9669228.55

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

交互手勢的容錯性和邏輯性

濤濤

交互手勢是用戶操作的重要部分,交互手勢的設計好壞非常影響用戶體驗,那么,交互手勢的設計上對于容錯性和邏輯性需要注意什么?

隨著用戶體驗被愈發的重視,更多的 APP 偏向于使用多手勢優化用戶的操作流程,降低使用阻力。

點擊某個確定的按鈕的手勢操作雖然被普遍使用并被用戶熟知,但是增加更快捷的手勢操作可以大大增大操作熱區,提高操作效率,如下圖。

交互手勢的容錯性和邏輯性

然而,我們可以發現由于不同產品的設計師對于用戶體驗的理解不同、交互層面的思考不同,導致設計的交互手勢也不同。

有時同一種操作在不同的 APP 中交互手勢也是不統一的,這無疑增加了用戶的學習成本和記憶成本。

舉個例子,iOS 端的得到和有書的播放頁的打開和關閉方式。

得到有兩種方式打開和關閉頁面,用戶可以通過點擊控件或上滑控件打開播放頁,通過點擊收起按鈕或下拉頁面關閉播放頁。但是有書只有一種方式打開和關閉,用戶只能通過點擊控件打開播放頁,通過點擊返回圖標關閉播放頁。

這讓習慣了使用得到的我去使用有書時,感覺非常別扭,每次都嘗試用得到的手勢去操作但是都失敗了,失敗后我下一次并沒有記住仍然用手勢去操作,如此反復令我相當沮喪。

交互手勢的容錯性和邏輯性

容錯性

容錯性是一個很大的話題,今天我們僅僅在交互手勢層面上討論。

上面的例子中,有書并沒有設計滑動手勢去打開和關閉播放頁,那么我以我的經驗去進行的滑動滑操作在有書這個產品中就是錯誤的和不被產品識別的。但是這種手勢又廣泛存在于大量的音頻播放 APP 中,如喜馬拉雅、荔枝 FM 等。

一旦用戶從這些 APP 遷移到了有書,本來養成的操作習慣在有書就失效了,用戶就會感覺“這個 APP 很難用,用起來很不舒服”,進而可能放棄有書轉而投向其他產品懷抱。

與手勢設計類似,這也是為什么現在的同種類型的 APP 的信息架構設計越來越同質化,當我們打開淘寶、天貓、京東時我們有時感覺就像是同一個 APP ,本質上也是為了降低用戶的遷移、記憶和學習成本。

如下圖所示,提高手勢的容錯性對用戶的意義。

交互手勢的容錯性和邏輯性

很多優秀的產品考慮到了上述問題,設計了多手勢來優化用戶體驗。

舉個例子,在 APP Store 的首頁點擊一個推薦卡片后進入詳情頁,由于詳情頁是直接由卡片放大轉場的,不同于傳統的新頁面右側進入和從底部彈出。

在用戶的使用習慣和認知中新頁面如果從右側進入就可以通過右滑返回,從底部彈出的話就可以下拉返回。因此,當用戶面對卡片放大進入新頁面這種全新交互時可能會疑惑如何返回,對此理解不同的用戶可能會嘗試右滑,也可能嘗試下拉。

APP Store 的設計在此就有很好的容錯性,用戶可以通過三種方式返回首頁,分別是、右滑返回、下拉返回和點擊叉號返回,這不但降低了用戶的記憶和學習成本,也便于不同習慣的用戶使用。

交互手勢的容錯性和邏輯性

針對不同的場景,手勢的使用也會有不同。

一個很好的案例是知乎的評論:知乎的評論的關閉方式有三種,分別是下拉、右滑和點擊叉號。

用戶觀看評論的場景有兩種,第一種是只想看一下精選評論然后關閉,第二種是被評論吸引后一直往下看。當用戶單手操作不方便點擊叉號時,下拉對應的是第一種用戶;右滑對應的是第二種用戶,不管用戶看了多少屏的評論,隨時可以通過右滑關閉評論(因為用戶翻閱了很多屏評論后需要下拉到第一條評論時,下拉關閉評論手勢才會生效,所以第二種用戶一般不使用下拉去關閉評論)。

可能你會心生疑惑:“第一種用戶也可以使用右滑來關閉評論呀”,確實可以,但是對于人的操作習慣來說,上下滑動會比左右滑動更方便。

交互手勢的容錯性和邏輯性

還值得討論的是蘋果自 iPhone 6s 開始加入的新交互方式 3D Touch,它允許用戶通過更大力度的重按呼出情景菜單快捷地使用高頻功能而不用先打開 APP,對于追求效率的用戶來說簡直不要更方便,但是對于不支持 3D Touch 的機型則無法使用情景菜單。

因此,在生活中我發現這樣的現象,很多使用慣了3D Touch 的用戶換到無 3D Touch 的蘋果機型后很不習慣,總是嘗試去重按但是是無效的。

其實在很多安卓手機上也有情景菜單這一功能,它巧妙地將卸載也加到了情景菜單中,因此用戶只需要通過長按就可以獲得所有需要的功能,而不是像蘋果那樣長按是卸載而重按是情景菜單。

我猜測蘋果為了適配所有機型,提高容錯性,從今年的發布會的 iPhone 11 和iPhone 11 pro 開始,取消了 3D Touch,轉而使用 Haptic Touch (有震動反饋的長按)代替。當你長按某個圖標時,感受到震動后松開,即可呼出二級菜單;如果震動后仍不松開,則進入到卸載 APP 時的抖動狀態,使得之后的即使不支持 3D Touch的機型可以使用便捷的情景菜單了。

對于不支持 3D Touch 的老款機型會不會在 iOS 13 更新后也可以使用 Haptic Touch 呢?

如果一致統一的話,容錯性將大大提高,我們將拭目以待。

不僅僅是 iOS ,Android 的版本 Android 10經歷了 6 個測試版迭代后正式發布,我們發現交互手勢是 Android 10 的一個巨大亮點。Android 10 在第三版內測系統開始引入全局手勢操作,用戶啟用后,屏幕底部便不會再出現虛擬按鍵和導航欄,只會剩下一個指示條,上滑返回主屏、側滑返回上一層的操作邏輯也均和 iOS 保持一致。

這可能標志著安卓手機一直以來在國內各家廠商的各種創新手勢的割裂生態中即將重歸統一,并和 iOS 保持一致。

這種妥協將大大提高在用戶使用一款新安卓手機時的容錯性,同時降低了今后用戶在兩大系統之間的遷移成本。

邏輯性

再談談邏輯性,在交互手勢的層面上,如果用戶能夠通過某個手勢進行某個操作后,按照邏輯,用戶也可以通過反向的手勢或對應的手勢進行逆向操作。

比如,在微信首頁下拉調出小程序頁面,之后可以通過上拉返回首頁。點擊加號呼出更多操作,再次點擊加號收起更多操作。

如果違背了用戶的心理模型和邏輯性,用戶就會感覺到混亂和不適。

這里舉一個反例, Uki 的個人主頁可以通過點擊或下拉底部的固定底板收起更多信息,但是收起后只能通過點擊展開更多個人信息而不能上拉,不符合邏輯與用戶的心理模型。

交互手勢的容錯性和邏輯性

如下圖所示,邏輯性對用戶的意義。

交互手勢的容錯性和邏輯性

有的時候,我們會發現為了提高容錯性,我們會犧牲一部分邏輯性。

就像上文提到的知乎關閉評論彈出框,邏輯上它是從底部彈出的,但是不但能夠下拉關閉還可以右滑關閉。盡管右滑關閉有些違背用戶的心理模型,但是確實給用戶帶來了很多操作上的便捷。

如何設計

1. 是否需要加入多手勢操作的考慮因素

我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。

  1. 使用頻率:當一個功能的使用頻率足夠高時,我們加入多手勢操作去提高用戶操作效率才是有意義的。一個低頻的功能的特殊手勢操作很容易被用戶遺忘。
  2. 危險程度:如果一個操作不可撤銷且存在危險性質,我們最好不要加入多手勢操作。此時我們需要用戶更加專注,如果加入多手勢操作可能會增加誤操作的概率。
  3. 特殊體驗:當我們需要加入特殊的模擬體驗時,此時我們可以加入多手勢操作。如探探左滑無感右滑喜歡,給用戶帶來的“翻牌子”感覺是點擊操作無法替代的。QQ 閱讀下拉擬物繩燈進行日間和夜間模式切換,這種存在我們記憶中的交互方式能夠喚起我們的情感。

2. 評估所選手勢的考慮因素

1)考慮不同平臺的硬件系統和操作系統特性

由于硬件與操作系統差異,iOS 系統支持很多手勢,但是安卓系統在手勢支持方面就不如 iOS 豐富。

安卓硬件設備的差異比較大,不同安卓手機廠商會在安卓系統的基礎上自定義系統的手勢操作,因此對于手勢的支持也有較大的差異。對于這種情況我們需要熟悉相應平臺的規范,做到心中有數。

2)考慮所選的手勢的學習成本和記憶成本,用戶是否已經被教育

如下圖所示,盡管設備支持的手勢數量多不勝數,但是日常使用 APP 時,大部分用戶習慣使用的手勢很少,比如單擊、雙擊、滑動、上拉、下拉、雙指擴張和收縮等。除此之外的手勢教育成本和學習成本很高。

一般比較通用的功能是沒有必要在此處創新的,但是如果一些特殊的操作確實需要加入時,我們就需要考慮下面的問題。

交互手勢的容錯性和邏輯性

a. 如果沒有教育成熟,考慮加入教學或搭配簡易的操作方式

對于我們需要加入的手勢操作當前用戶并未被教育成熟時,我們需要考慮加入手勢教學,具體的手勢教學類型下一部分會詳細討論。

然而,大部分情況下用戶的記憶是短期的,教學內容可能會被快速遺忘,下次用戶使用 APP 時仍然不會使用特殊手勢。此時我們應該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。

比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設計,其考慮到了有些用戶在現實生活中并未見過擬物繩燈,并不知道是要進行下拉才能觸發操作。因此,QQ 閱讀貼心地搭配了一個簡單的點擊操作,用戶通過點擊繩燈也可以切換夜間模式,如下圖。

交互手勢的容錯性和邏輯性

b. 考慮所選手勢是否可能導致沖突和誤操作,如果導致了,考慮如何避免和折中

最常見的手勢沖突情況就是 APP 的手勢與操作系統的全局手勢沖突。

解決方案有兩個,一是避免設計與全局手勢一致的手勢操作,例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應用等全局手勢操作;二是仍然設計與全局手勢沖突的操作,但是將全局手勢部分禁用或以其他的方式區分開。

如下圖有書播放頁的案例,由于進度條滑動控件過于靠左,導致使用 iOS 全局右滑返回手勢時有時會產生誤操作,即本來想要右滑返回卻不小心滑動了進度條。

這種情況下我們可以標注一個右滑手勢禁用區域給開發工程師說明情況,將此情況避免掉即可。

交互手勢的容錯性和邏輯性

誤操作指的是,我們設計的手勢操作與 APP 內的其他操作或系統全局手勢操作接近導致用戶觸發了非預期的操作。比如 iOS 端的知乎被吐槽的一個右滑返回手勢操作,經過研究發現,由于 iOS 端的知乎在瀏覽回答的頁面設計的右滑返回的熱區過大,導致用戶上滑瀏覽的時候如果手指的滑動角度變化幅度過大一不小心就觸發了右滑返回,再次進入回答后又需要翻頁很久才能找到之前離開的地方,很影響體驗。

我覺得知乎可以減少熱區,將熱區調整為 iOS 全局的右滑返回區域即可,如下圖所示。

當然,產品設計需要平衡與取舍,如果減少了熱區是否會影響其他用戶的體驗還需要考慮和調研,兩者并無絕對的對錯

交互手勢的容錯性和邏輯性

3. 讓用戶了解并使用新手勢

當新手勢無法直接讓用戶感知時,我們需要加入一些手勢教學幫助用戶快速上手使用。

1)手勢教學方式

a. 浮層和動畫引導使用靜態或動態的手勢圖片或氣泡示例告訴用戶使用哪種手勢進行操作

相比于靜態,動態比靜態更為直觀和易學。

交互手勢的容錯性和邏輯性

b. 內容隱喻通過微妙的視覺線索暗示用戶此處可以通過某種手勢進行操作

由于教學內容難免具有干擾性,對于高級用戶來說是不必要的,但是對于初級用戶又是必要的,因此以這種內容暗示的方式使教學極為輕量化,在低干擾的情況下使得用戶學習了手勢操作。

如下圖,嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架,暗示用戶可以通過左右滑動切換文章。

再比如陌陌在打開點點功能時,會在用戶進入頁面的時候播放一個動畫,暗示有很多卡片疊加在了一起,用戶可以通過滑動切換卡片。

交互手勢的容錯性和邏輯性

2)教學的出現時機

a. 操作前當產品中設計了不容易感知的新手勢,在用戶操作前,通過教學讓用戶了解和學習新的手勢。

b. 錯誤操作后對于一些與用戶的心理模型和習慣不一致的手勢,提前預測用戶可能輸入的錯誤手勢,在用戶錯誤操作后進行提示,規范用戶的操作方式。

如下圖,由于知乎舊版本是通過左右滑動切換回答的,新版本調整為上下滑動后,需要糾正用戶使用習慣。因此,當用戶仍然使用左右滑動時,會出現浮層提示用戶正確的手勢進行教學。

交互手勢的容錯性和邏輯性

結語

以上是日常思考和總結,有不恰當之處歡迎指出。希望本文在大家進行手勢設計的過程中能夠幫助做出合理的決策。

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

nginx配置rewrite的用法詳解

seo達人

文章目錄

rewrite在if中的用法

rewrite中break和last的用法

1.break和last在location{}外部時

2.break和last在location{}內部時

3.break和last用法總結

return的用法

rewrite的語法規則

rewrite應用實例

1.域名跳轉(域名重定向)

2.http跳轉https

3.跳轉二級目錄

4.動靜態請求分離

5.防盜鏈配置

6.偽靜態(將靜態頁面重寫為動態)

7.多個if并用

rewrite在if中的用法

格式:if (條件判斷) { 具體的rewrite規則 }



if條件判斷語句由Nginx內置變量、邏輯判斷符號和目標字符串三部分組成。

其中,內置變量是Nginx固定的非自定義的變量,如,$request_method, $request_uri等。

邏輯判斷符號,有=, !=, ~, ~, !~, !~

!表示相反的意思,~為匹配符號,它右側為正則表達式,區分大小寫,而~為不區分大小寫匹配。

目標字符串可以是正則表達式,通常不用加引號,但表達式中有特殊符號時,比如空格、花括號、分號等,需要用單引號引起來。

1

2

3

4

5

示例1:當http請求方法為post時,返回403狀態碼



if ($request_method = POST)

{

    return 403; 

}

1

2

3

4

示例2:通過瀏覽器標識匹配關鍵字,禁止IE瀏覽器訪問



if ($http_user_agent ~
MSIE) 

{

    return 403;

}

1

2

3

4

限制多個瀏覽器:



if ($http_user_agent ~ "MSIE|firefox|Chrome")

{

    return 403;

}

1

2

3

4

示例3:當請求的文件不存在時,進行重定向或return狀態碼等處理操作



if(!-f $request_filename)

{

    rewrite 語句;

}

1

2

3

4

示例4:判斷uri中某個參數的內容



if($request_uri ~
'gid=\d{6,8}/') 

{

    rewrite 語句;

}

1

2

3

4

\d表示數字,{6,8}表示數字出現的次數是6到8次,當uri中gid參數的值包含6-8個數字那么執行rewrite語句



rewrite中break和last的用法

兩個指令用法相同,但含義不同,需要放到rewrite規則的末尾,用來控制重寫后的鏈接是否繼續被nginx配置執行(主要是rewrite、return指令)。



1.break和last在location{}外部時

測試示例:



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;



    rewrite /1.html /2.html;

    rewrite /2.html /3.html;

}

1

2

3

4

5

6

7

8

請求1.html文件時,會被重定向到2.html,然后被重定向到3.html,最后返回的文件為3.html



示例1:在rewrite 指令后面添加break



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;



    rewrite /1.html /2.html break;

    rewrite /2.html /3.html;

}

1

2

3

4

5

6

7

8

請求1.html文件時,會被重定向到2.html,然后直接返回2.html,break在此處的作用就是當匹配第一個rewrite指令成功時,不執行后面的rewrite指令



示例2:當break后面還有location{}的情況



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;



    rewrite /1.html /2.html break;

    rewrite /2.html /3.html;

    location /2.html {

        return 403;

    }

}

1

2

3

4

5

6

7

8

9

10

11

請求1.html文件時,會返回403狀態碼,當1.html被重定向到2.html時,break不會匹配后面的rewrite規則,但條件2.html匹配location{}定義的文件2.html,所以會執行return 403


以上兩個示例中,將break換成last效果一樣



2.break和last在location{}內部時

測試示例:



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;

    

    location / {

        rewrite /1.html /2.html;

        rewrite /2.html /3.html;

    }

    location /2.html

    {

        rewrite /2.html /a.html;

    }

    location /3.html

    {

        rewrite /3.html /b.html;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

請求1.html,會經過兩次重定向到3.html,3.html又剛好匹配location /3.html{},所以返回b.html,當請求2.html時,會直接返回a.html,因為location /2.html {} 更精準,優先匹配



示例1:在rewrite后面添加break



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;

    

    location / {

        rewrite /1.html /2.html break;

        rewrite /2.html /3.html;

    }

    location /2.html

    {

        rewrite /2.html /a.html;

    }

    location /3.html

    {

        rewrite /3.html /b.html;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

請求1.html,會返回2.html,不會返回a.html,當break再location {} 內部時,遇到break后,當前location{} 以及后面的location{} 的指令都不再執行



示例2:在rewrite后面添加last



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;

    

    location / {

        rewrite /1.html /2.html last;

        rewrite /2.html /3.html;

    }

    location /2.html

    {

        rewrite /2.html /a.html;

    }

    location /3.html

    {

        rewrite /3.html /b.html;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

請求1.html時,會返回a.html,在location {} 內部遇到last,當前location {}中剩下的指令不會再執行,但被重定向的url會重新匹配一遍location {}



3.break和last用法總結

1.當rewrite規則在location{}外,break和last作用一樣,遇到break或last后,其后續的rewrite/return語句不再執行。但后續有location{}的話,還會近一步執行location{}里面的語句,前提是請求能匹配該location

2.當rewrite規則在location{}里,遇到break后,本location{}與其他location{}的所有rewrite/return規則都不再執行

3.當rewrite規則在location{}里,遇到last后,本location{}里后續rewrite/return規則不執行,但重寫后的url再次從頭匹配所有location



return的用法

該指令一般用于對請求的客戶端直接返回響應狀態碼。在該作用域內return后面的所有nginx配置都是無效的,可以使用在server、location以及if配置中,除了支持跟狀態碼,還可以跟字符串或者url鏈接。



示例1:直接返回狀態碼



server{

    listen 80;

    server_name www.test.com;

    return 403;

    rewrite www.test.net;  

}

1

2

3

4

5

6

訪問時,直接返回403狀態碼,return返回內容后,后面的配置rewrite不會執行



示例2:當return在if 判斷中時



server {

.....



if ($request_uri ~ ".password|.bak")

{

    return 404;

    rewrite /(.*) /index.html;  

}

.....

}

1

2

3

4

5

6

7

8

9

10

請求的文件包含.password或.bak時,直接返回404,rewrite不會執行,但if {}外的配置會繼續執行,return只在當前作用域中生效



示例3:返回字符串



server{

    listen 80;

    server_name www.test.com;

    return 200 "hello";

}

1

2

3

4

5

返回字符串必須加上狀態碼,否則會報錯



示例4:返回nginx變量



location /1.html {

    return 200 "$host $request_uri";

}

1

2

3

示例5:返回url



server{

    listen 80;

    server_name www.test.com;

    return http://www.test.com/index2.html;

}

1

2

3

4

5

返回url時,必須以http://或https://開頭



示例6:返回html代碼



if ($http_referer ~ 'baidu.com') 

{

    return 200 "<html><script>window.location.href='//$host$request_uri';</script></html>";

}

1

2

3

4

當網站被黑了的時候,從百度點進網站是鏈接都會跳轉到其他網站,可以使用該方法暫時處理

注意:return http://$host$request_uri; 在瀏覽器中會提示"重定向的次數過多"



rewrite的語法規則

格式:rewrite regex replacement [flag]



rewrite 配置可以在server、location以及if配置段內生效



regex 是用于匹配URI的正則表達式,其不會匹配到$host(域名)



replacement 是目標跳轉的URI,可以以http://或者https://開頭,也可以省略掉$host,直接寫$request_uri部分



flag 用來設置rewrite對URI的處理行為,其中有break、last、rediect、permanent,其中break和last在前面已經介紹過,rediect和permanent的區別在于,前者為臨時重定向(302),而后者是永久重定向(301),對于用戶通過瀏覽器訪問,這兩者的效果是一致的。

但是,對于搜索引擎爬蟲來說就有區別了,使用301更有利于SEO。所以,建議replacemnet是以http://或者https://開頭的,flag使用permanent。



示例1:域名跳轉



location / {

    rewrite /(.*) http://www.test.com/$1 permanent;

}

1

2

3

.*為正則表達式,表示uri,用()括起來,在后面的uri中可以調用它,第一次出現的()用$1調用,第二次出現的()用$2調用,以此類推。



示例2:域名跳轉的第二種寫法



location / {

    rewrite /. http://www.test.com$request_uri permanent;

}

1

2

3

示例3:文件跳轉



server{

    listen 80;

    server_name www.test.com;

    root /data/wwwroot/test.com;

    index index.html;

    if ($request_uri !~ '^/web/')

    {

        rewrite /(.
) /web/$1 redirect;

    }

}

1

2

3

4

5

6

7

8

9

10

將uri請求的文件重定向到web/目錄中去尋找



錯誤寫法1:



server{

    listen 80;

    server_name www.test.com;

    root /data/wwwroot/test.com;

    index index.html;

    rewrite /(.*) /web/$1 redirect;

}

1

2

3

4

5

6

7

這樣寫會反復循環,直到瀏覽器最大循環限制次數,哪怕uri包含web/目錄了,也會繼續重定向/web/web/$1



錯誤寫法2:



server{

    listen 80;

    server_name www.test.com;

    root /data/wwwroot/test.com;

    index index.html;

    rewrite /(.*) /web/$1 break;

}

1

2

3

4

5

6

7

添加break后不會導致循環,但如果uri中包含web/目錄的情況下也會被重定向一次,重定向后的uri就是web/web/$1



rewrite應用實例

1.域名跳轉(域名重定向)

單個域名的情況:



server{

    listen 80;

    server_name www.test.com;

    rewrite /(.) http://www.test.net/$1 permanent;    

}

1

2

3

4

5

多個域名的情況:



server{

    listen 80;

    server_name www.test.com www.test.net;

    if ($host != 'www.test.net')

    {

        rewrite /(.
) http://www.test.net/$1 permanent;

    }

}

1

2

3

4

5

6

7

8

2.http跳轉https

server{

    listen 80;

    server_name www.test.com;

    rewrite /(.) https://www.test.com/$1 permanent;

}

1

2

3

4

5

3.跳轉二級目錄

server{

    listen 80;

    server_name bbs.test.com;

    rewrite /(.
) http://www.test.com/bbs/$1 last;

}

1

2

3

4

5

4.動靜態請求分離

server{

    listen 80;

    server_name www.test.com;

    location ~ ..(jpg|jpeg|gif|css|png|js)$

    {

        rewrite /(.*) http://img.test.com/$1 permanent;

    }

}

1

2

3

4

5

6

7

8

假設www.test.com的服務器在國外,訪問速度較慢,img.test.com的服務器在國內,訪問速度正常,可以將訪問www.test.com靜態文件的請求重定向到img.test.com,提高文件返回速度



第二種寫法:



server{

    listen 80;

    server_name www.test.com;

    if ( $uri ~ 'jpg|jpeg|gif|css|png|js$')

    {

        rewrite /(.
) http://img.test.com/$1 permanent;

    }

}

1

2

3

4

5

6

7

8

5.防盜鏈配置

server{

    listen 80;

    server_name www.test.com;

    location ~ ^.+.(jpg|jpeg|gif|css|png|js|rar|zip|flv)$

    {

        valid_referers none blocked server_names
.test.com

        if ($invalid_referer)

        {

            return 403;

        }

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

配置防盜鏈避免別的網站引用www.test.com不想被引用的圖片等文件



http_referer表示從哪兒點擊進網站的,比如從百度搜索引擎訪問的

valid_referers:白名單

invalid_referer:無效的(未在白名單中定義的)

none:允許referer為空(也就是允許直接訪問,未從其他站點跳轉的請求)

blocked:允許來源地址不含http/https



6.偽靜態(將靜態頁面重寫為動態)

location /  {

    rewrite ^([^.])/topic-(.+).html$ $1/portal.php?mod=topic&topic=$2 last;

    rewrite ^([^.]
)/forum-(\w+)-([0-9]+).html$ $1/forum.php?mod=forumdisplay&fid=$2&page=$3 last;

    rewrite ^([^.])/thread-([0-9]+)-([0-9]+)-([0-9]+).html$ $1/forum.php?mod=viewthread&tid=$2&extra=page%3D$4&page=$3 last;

    rewrite ^([^.]
)/group-([0-9]+)-([0-9]+).html$ $1/forum.php?mod=group&fid=$2&page=$3 last;

    rewrite ^([^.])/space-(username|uid)-(.+).html$ $1/home.php?mod=space&$2=$3 last;

    rewrite ^([^.]
)/(fid|tid)-([0-9]+).html$ $1/index.php?action=$2&value=$3 last;

}

1

2

3

4

5

6

7

8

示例為discuz的偽靜態配置



7.多個if并用

location /{

    set $a 0;

    if ($document_uri !~ '^/abc')

    {

        set $a "${a}1"; #uri不以/abc開頭時,$a的值變為01

    }

    if ($http_user_agent ~ 'ie6|firefox')

    {

       set $a "${a}2"; #瀏覽器標識包含ie6或者Firefox時,$a的值變為012

    }

    if ($a = "012") #當滿足前兩個if判斷時,重寫url

    {

        rewrite /(.
) /abc/$1 redirect;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

nginx配置文件語法不支持if嵌套,需要通過多個if并用判斷時,使用標識變量值的方式處理



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

中臺是什么?聽聽大咖的看法

濤濤

歷史上的每一次變革,都是從一小部分人的率先覺醒開始的?;ヂ摼W時代的變革日新月異,更需要時刻洞察局勢,未雨綢繆。


我們籌辦了【藍湖做東】的線下活動,邀請行業大咖們齊聚論道,碰撞智慧的花火,追尋潮流的軌跡。

本期嘉賓


(按發言順序)



此外,感謝不愿透露姓名的神秘大咖們蒞臨現場!


話題背景


阿里巴巴集團在 2015 年首次提出“大中臺、小前臺”的戰略,此后,騰訊、百度、京東、美團、滴滴等互聯網巨頭紛紛效仿,一時間“中臺”引發互聯網行業的刷屏熱潮。


說到中臺,不得不提到芬蘭的游戲公司 Supercell ,僅有 300 名員工,卻接連推出爆款游戲,成為當時全球最會賺錢的明星游戲公司,馬云帶隊參觀這家公司半年之后,阿里集團開始組建 " 大中臺,小前臺 " 的組織和業務體制。


2015 年年中,馬云帶領阿里巴巴集團高管,拜訪了位于芬蘭赫爾辛基的移動游戲公司 Supercell。


Supercell 當時號稱是世界上最成功的移動游戲公司,Supercell 由 6 名資深游戲開發者在 2010 年創立,旗下擁有《部落沖突》、《皇室戰爭》、《海島奇兵》和《卡通農場》這四款超級現象級產品。Supercell 是一家典型的以小團隊模式進行游戲開發的公司,以 2 到 5 個員工、最多不超過 7 個員工組成獨立的開發團隊,稱之為 Cell ( 細胞 ) ,這也是公司名字 Supercell (超級細胞)的由來。


團隊自己決定做什么樣的產品,然后最快時間推出產品公測版,看看游戲是否受用戶歡迎。如果用戶不歡迎,迅速放棄這個產品,再進行新的嘗試,期間幾乎沒有管理角色的介入。團隊研發的產品失敗后,不但不會受到懲罰,甚至還會舉辦慶祝儀式,以慶祝他們從失敗中學到了東西。


這種模式讓 Supercell 公司成為了年稅前利潤 15 億美金的游戲公司,2016 年 6 月,騰訊以 86 億美元收購了員工數不超過 200 人的 Supercell 公司 84.3% 的股權,每一名員工人均貢獻的估值超過 3.54 億人民幣。


Supercell 的成功很大原因就在于其的 " 部落 " 組織策略。在 supercell 僅有的 100 多人中,被分成若干個小前臺組織,每個小組雖然人不多,但都包含了做一款游戲需要的所有人才。


本來就不大的公司被分成若干個小組,這樣做的好處是可以快速決策,快速研發,快速把產品推向市場,而游戲引擎、服務器等后臺基礎則不需要操心。


Supercell 的模式給參加此次拜訪的阿里高管們很大的震撼,在大家反復的心得交流和討論中,一個非常重要的問題引起了很多人的反思:信息時代的公司架構到底應該是怎樣的?


正是有了這次拜訪才真正讓阿里巴巴的領導層有了足夠的決心要將組織架構進行調整,在此次拜訪的半年后,阿里集團 CEO 逍遙子發出內部郵件,組織架構全面升級,建設整合阿里產品技術和數據能力的強大中臺,組建 " 大中臺,小前臺 " 的組織和業務體制。


阿里中臺
所謂的 " 中臺 ",并不是阿里巴巴首先提出的詞語,從字面意思上理解,中臺是基于前臺和后臺之間。阿里通過多年不懈的努力,在業務的不斷催化滋養下,將自己的技術和業務能力沉淀出一套綜合能力平臺,具備了對于前臺業務變化及創新的快速響應能力。阿里人將 " 中臺戰略 " 形象地比喻成陸??杖娏Ⅲw化協同作戰。


海陸空協同作戰
他們將中臺分為六類,分別對應不同兵種:

業務中臺,提供重用服務,例如用戶中心、訂單中心之類的開箱即用可重用能力,為戰場提供了空軍支援能力,隨叫隨到,威力強大;
數據中臺,提供數據分析能力,幫助從數據中學習改進,調整方向,為戰場提供了海軍支援能力;
算法中臺,提供算法能力,幫助提供更加個性化的服務,增強用戶體驗,為戰場提供了陸軍支援能力,隨機應變,所向披靡;
技術中臺,提供自建系統部分的技術支撐能力,幫助解決基礎設施,分布式數據庫等底層技術問題,為前臺特種兵提供了精良的武器裝備;
研發中臺,提供自建系統部分的管理和技術實踐支撐能力,幫助快速搭建項目、管理進度、測試、持續集成、持續交付,是前臺特種兵的訓練基地;
組織中臺,為項目提供投資管理、風險管理、資源調度等,是戰場的指揮部,戰爭的大腦,指揮前線,調度后方。
2018 年雙 11,阿里又一次實現了一次壯舉,在 2135 億的背后,在令人驕傲的戰績背后,缺少不了阿里中臺鐵軍發揮的巨大力量。
(資料來源于 ZAKER)


活動現場

北京的院子馳名中外,坐落在北京孔廟旁邊的一處小院尤其別致,相對封閉的院子中,坐落著透明的玻璃房子。四面圍合卻有開闊的視野,兼具隱秘性與舒適感?!舅{湖做東】首期聚會在這里悄然開始。


特邀嘉賓們紛至沓來,不約而同地坐到了向陽的落地窗前,伴隨著初秋的清風和暖陽,一場以中臺為主題的討論,徐徐展開。


影響著行業的大咖們,是如何被中臺影響的呢?讓我們拭目以待。


服務過阿里大文娛的高級交互設計專家朱斌,離中臺最近,他率先發言。


在阿里大文娛,我注意到整個內容行業的資源非常依賴于導演和演員。


如果沒有流量明星或知名導演,那這個作品票房十有八
九都不好,所以可以看到中國的電影宣傳幾乎都是明星臉。而國外就截然不同,國外更加依賴于編輯和 IP。并且以一套極為成熟和的生產模式批量化創造出大量優質的影視作品。像流水線一樣生產出不同風格的流量大片。


當內容成為商品的時候,如何判斷一個內容的傳播價值,就成為問題。


我們為此建立了一個團隊,專門來研究注意力管理,讓不同層次的用戶第一時間看到內容就能進行一系列快速判斷,而且這個判斷還要符合人類的思維結構。


簡單來說我們想用體驗的方式去把復雜的內容和故事進行具象化,在第一時間讓用戶看到、看懂,并激發出觀看的興趣。


這個構思在運作的過程中面臨很多問題。


比如,設計師們如何快速從影視作品中提取有效信息,如果有個片子 50 集,要判斷它的價值,要看完 50 集嗎?影視作品體量那么大,沒有那么多設計師把所有內容都過一遍。


最終,我們提出了“中臺”這個設想,我們試圖找到一種即又符合邏輯,同時符合用戶體驗的方式。把內容進行體驗層面的歸類和細分,提取共有特性,預判用戶在不同類別中的興趣和喜好。進而提升內容平臺的商業價值和分發效率。


商業行為的本質就是榨取剩余價值。


榨取剩余價值的基本條件,就是降本增效——用更少的時間、更少的人力成本,做出一樣多的事情。我們使用藍湖這樣的工具就是為了提效,這也是各大企業爭相構建中臺的原因之一。


設計行業比較偏向創意,和其他行業的中臺有所不同,在座各位都是各行各業的大咖,我想借此機會聽聽大家對中臺的理解和運用,大家就自己所面臨的問題找找解決方案。


聚美優品也正在構建“電商中臺”,蘇星就此闡述了自己的觀點:


大家都認為聚美優品是一個電商企業,其實內部已經逐步轉變成了一個類投行的企業,不僅收購一些頗具潛力的項目,也孵化內部的一些項目。


中臺與每個公司的業務形態相關,如果公司是產品驅動的,它的中臺搭建就會側重于更的提供各種功能性服務;如果產品比較單一、功能比較單一、市場比較下沉、類目比較垂直的話,那中臺的概念可能是一個偽命題。


聚美優品近年來致力于尋找新的經濟增長點,這是老牌上市公司必然經歷的一個階段。所以,公司對具有創造力的崗位或團隊給予很多的支持,但很多創意都是天馬行空想出來的,當一個產品或項目到設計部門的時候,我們需要判斷其成功的路徑是什么。我理解的,這就是一個中臺。如果是設計中臺的話,它需要完成一個任務,保證效果。


中臺可能是一個宏觀的狀態概念和一個微觀的具體操作層面的重合,我所說的設計中臺,更偏向于設計管理上的中臺思維,它是一個驅動力,可以靈活地組建很多模塊,然后不斷去自由匹配,從而支持一些功能。




阿里大文娛的朱斌接過話題,補充了一些看法:



產品設計行業具有特殊性,如何把產品設計理念和產品設計原則,通過數據整合,與設計需求靠近,是個難題,也是阿里的中臺一直在努力解決的問題。


關于中臺,我想提出兩個點:中臺的特性,中臺對產品設計行業是好是壞。


朱斌曾服務過的華為提出“讓聽得見炮火的人呼喚炮火”,這就是個人與中臺之間配合的關系。這里“呼喚炮火”的人,就是產品設計師,他們奮戰在一線,接觸不同維度、不同領域的人,有特別強的洞察力,而提供“炮火”的就是中臺能力。


阿里現在在做兩件事,其一就是強大的設計格局,其二就是把所有設計職能進行了升級,把之前的視覺設計師、交互設計師和各種子類的設計師都統一成了三種類型:體驗設計師、創意設計師、用戶研究設計師。其中體驗設計師大概占 60-70%,創意設計師占 20%,用戶研究設計師大約 10%.


阿里的零售板塊非常穩定,服務的幾千萬中小企業每天都會有海量的店鋪、商品設計需求。所以體驗設計團隊制定了詳盡的規范,而這些規范就是中臺,設計師按照規范進行輸出即可,甚至開了鹿班系統自動生產,這就相當于炮兵,指哪打哪,火力兇猛。


同時,我們會拓展第二曲線,通過創意設計師找方向。創意設計師的工作不一定能立即帶來商業價值,但可以通過嘗試,獲取用戶反饋的數據,由此做一些校準和拓展業務邊界的工作。


所以中臺能解決的問題,一定是穩定的,而創意相關的東西一定是變化的。所以,阿里提出“大中臺、小前臺”的戰略。用中臺去做效率實現盈利,用前臺去做變化生成新的規范。


以我開篇提到的內容行業舉例,時下流行的明星是隨時變動的,但這些變化會產生一些規律,比如這些明星都有哪些共同特點,中臺就能總結出這些變動的規律,整合出一套審美規范,當知道受眾需要什么的時候,就可以根據中臺提供的規范,由前臺去尋找符合受眾需求的內容。


這是一個相輔相成的過程,通過前臺不斷刺激用戶去看新內容,后臺可以通過反饋收集整合更多規范,再由這些規范支持前臺更產出符合用戶需求的內容。


阿里的設計中臺大家都知道,就是鹿班智能設計平臺,它是設計中臺最有代表性的一個產品。鹿班誕生的背景,是由于電商平臺得通過 Banner 做宣傳,淘寶量級越做越大,設計師支撐不住巨大的需求,加上同類 Banner 轉化率差別不大。


這就體現了需要做設計中臺的幾個前提:


其一,需求量特別大,不是靠人力能夠解決的,或者靠人力解決的話,成本會特別高。


其二,設計質量要求不高,所要輸出到的信息量較為固定。


其三,存在的生命周期特別短。像淘寶的推廣,你每次打開都是不一樣的東西。


有了這三個前提,就可以考慮做設計中臺。


就此,又產生一個疑問,以前的那么多設計師是不是就沒活干了?


并不是這樣的。


阿里提出“重新定義設計”,設計師是構造一種秩序,這種秩序是機器沒有辦法自動獲得的,它一定來自于設計師的經驗、對用戶的洞察、對品類的把控。最終,建立、優化中臺的任務是由設計師來做的。


用我們的設計團隊舉例,中高級 UX 設計師在迅速增加,設計師的絕對數量沒有大的增長??梢钥闯稣麄€企業設計團隊的能力是在提升的,對業務的支撐也會更有效,不必像以前需要上百上千個初級設計甚至外包團隊來做這件事。這就是中臺在規?;皖l繁迭代上的優勢和效益。


廣聯達印雋講到什么性質的中臺解決什么問題,以及中臺的本質是什么:


阿里的鹿班,在內部和其他系統高度耦合,一張推廣圖從制作到分發,到上架到驗證,系統和系統之間并無太多斷層。


從使用者的角度來說,鹿班系統的最大收益方并不是設計師,而是商戶,本質上是為了提高生產效率,用 AI 來淘汰量產擼圖的低端設計師,但還是可以視做設計中臺,畢竟這是一套“會做設計”,并且由設計師來提供機訓內容的系統。


所以我們談中臺之前,還是先把中臺的邊界劃清楚。


不能把技術中臺、業務中臺、數據中臺、設計中臺混為一談。


中臺概念在支付領域出現的比較早,以支付系統為例,資金管理、財務、風控,屬于后臺,即技術視角的底層服務。


渠道接入、交易、賬戶、收單網關等等,屬于中臺。


中臺承擔的是業務聚合和泛用,中臺不能獨立存在,脫離后臺來談中臺是沒有意義的。



(例圖摘自網絡)


對于設計師來說,切忌盲目跟風,中臺概念的確很火,但僅針對一線大型團隊。團隊和產品體量沒達到一定規模,底層系統都還沒打磨清楚的團隊,談中臺也為時過早。且設計團隊如果還以界面和功能交互設計的執行工作為主,并沒有足夠深入業務和技術的話,也沒有資格談中后臺設計。


至于設計中臺,還是得先看企業業務是否已經處于良性發展期,且技術和業務也已經到了可以有中臺的階段,不然,脫離業務來談設計中臺,又是一紙空文。


所以,從這個視角來看,行業內真正可以算得上是設計中臺的,除了阿里鹿班這個量級的系統之外,少之極少。


但是,除此之外,就沒有別的形式的設計中臺了呢?


我們其實可以換個視角看一下,比如,一個已經達到一定量級的設計團隊,是否有意識的在管理自己的數字和數據資產呢?在什么系統里管理?這樣的系統,是否可以視為設計視角中臺?或只是一個工具?
設計部門需要基于系統的數字資產管理。大部分設計團隊,并沒有從系統視角,把一個設計體系運作所需要的對象管理起來。小到一個圖標,一個文檔,大到你的規范和原則和設計語言,都散落在各個零碎的內、外部系統中,甚至于設計師個人的硬盤里。


一個 Design DAM( Digital Asset Management 設計數字資產管理) 系統或許可以成為一個企業的設計中臺的一部分,而且這個中臺是可以獨立于部分業務而存在的,他能有效累積整個企業在生產過程中的所有客觀過程,包括數據。


一個優秀的設計團隊,需要具備數據驗證和數據驅動能力,而用于分析和驗證的數據,也應該是設計的數字資產的一部分。如果設計團隊自己有能力的話,應該作為設計數字資產的一部分。那么這個數字資產可以是一個設計中臺。換言之,數字資產是建立設計中臺的一個重要核心。


藍湖或許就像是一個 Design DAM 系統的雛形,當然,還有很長的路要走。


團隊的方法論和知識庫也需要一個系統性的沉淀。


企業需要的是依葫蘆畫瓢式的流程,還是化整為零的方法論庫,根據實際項目情況合理的自由的組合運用。從管理視角來看,我們更希望看到的是系統性的管理,而不是完全依賴于人肉的主觀。需要很清楚這些方法論的組合是以何種靈活的狀態去支撐項目,以及輸出的標準在哪里。


路漫漫,其修遠兮。


自如網的賈洪濤對印雋的發言很贊同,但是關于“炮火”,他卻有不同的見解:


關于任總“聽見炮火的聲音”來做決策,我的個人體會不一樣,離炮火最近的人被炸死了,或者被炸殘了,聽得見炮聲的人,也許不是第一線,而是第二線的人,他們才是最適合做決策的人。


我想做的是中臺其中的一種,對內部的數據可視化。企業的相關數據能展現在所有員工面前,像淘寶雙十一那樣,一是激勵團隊,一是告訴團隊產品的現狀。


我們要做的第一步就是先用現有的數據,足夠好、足夠多的數據,展現給員工眼前,但同時也要考慮到,這些數據放出來,外部客戶看到后會不會產生負面影響。


另外一個,項目的數據,如果讓設計做清單是沒有意義的,如果為了做得漂亮虛造數據,就更加沒有意義,不是我想做的初衷。


提到數據,服務過阿里的朱斌補充了自己的看法:


我這兒有兩個故事。


第一個故事是回應賈總的想法。我有一個學妹,正在阿里做一個項目,叫做“數據之美”,就是做雙十一的大屏和各種數據的可視化呈現。比如會通過各種設計的變化來展示數據增長的速度感、體量感。目前做的非常成功,今年也晉升到了更高的職位,足以說明數據可視化的重要性。


第二個是另一個維度的故事。有時候團隊內考核 Review 時,每個細分的 KPI 都完成了,而且看描述都是超額完成,所有的數據都很好。但實際上公司的整體競爭狀態卻在下滑。


這兩個故事告訴我,數據其實就是一個任人打扮的小姑娘,好的打扮會讓數據更易讀易懂,壞的打扮會讓數據具有欺騙性。當講到數據的時候一定需要非常嚴謹的算法,每一個沖鋒陷陣的人都似乎贏了,但最后戰爭卻是輸的,這就需要全面的數據分析,只抓單個的數據,其實特別危險。


廣聯達印雋說得很對,數字資產管理看的是長線、看得是全局,而產品經理往往看的是當下,是短線。由此,我認為直接把數據動態跟設計動態捆綁在一起,是危險的,或者不能叫做中臺。我們的解決方法就是求助于數據分析團隊,一方面通過專家解讀保證正確理解,另一方面我們也自建數據理解的能力,招募了數據方面的專家增加了一條體驗數據支線。


很多人說數據像毒藥,我認為,數據是解藥。那些認為數據有毒的人,大約是沒有真正分清楚哪些才是有效的數據。Netflix、字節跳動等很多新興企業的成功告訴我們,通過數據的分析,做出的決策更有利于目標的達成,而基于平臺層面的數據收集、分析、管理,也就是數字資產管理,正是中臺能力構建的基石。


文章來源:UI中國

使用docbox定制API文檔

seo達人

使用docbox定制API文檔

什么是docbox

docbox的安裝

克隆項目

部署方式

docbox的編寫

定制logo及UI

更換代碼背景色

插入自己的logo

三列改為雙列

其他定制UI



在公司實習了一個月,由于業務需要,我花了大概一周時間對docbox的安裝,編寫,定制化等進行了詳細的研究,下面給大家分享一下我的總結

什么是docbox

Docbox是一個開源的REST API文檔系統。它采用結構化的Markdown文件,并生成帶有導航,固定鏈接的兩列布局。下面是官方example圖片:









docbox的安裝

克隆項目

直接去官網https://github.com/tmcw/docbox,然后克隆即可。



部署方式

在使用npm命令前需要下載Node.js,npm會根據package.json配置文件中的依賴配置下載安裝



接著,在/content下放入.md文件,并使用 npm run build 命令,生成一個包含所需要的js代碼的bundle.js文件,同時創建一個新的index.html文件



重要的就是index.html、bundle.js、/css這三個文件和文件夾



docbox的編寫

在/content下放入.md文件(markdown語法俺就不說了哈……)

對/src/custom/content.js中添加需要引入的.md文件位置和以及標題





注意: /src/custom/content.js中放入的是一級標題、二級和三級標題需要在.md文件中編寫。





定制logo及UI

修改/src/custom/index.js文件

修改對應標簽的屬性即可,定制時修改生成的index.html是沒有用的,因為index.html里的標簽是被動態寫死的。

更換代碼背景色

<div class='round-left pad0y pad1x fill-green code small endpoint-method'>

1





<div class='endpoint dark fill-blue round '>

1





插入自己的logo





修改/src/components/app.js文件



三列改為雙列

docbox默認情況下是顯示三列布局,但我們可以在app.js下進行修改使之默認為雙列布局。將下圖的1改為2即可切換雙列模式







其他定制UI

像下圖一樣,我們可以修改并填寫代碼得到自己想要的頁面樣式,比如說我在最上方加了一個固定位置的區域,然后可以在這個區域添加相應的超鏈接等。







app.js里可以找到圖中對應的標簽和js代碼,docbox支持多種語言切換,我們在需要的地方加入我們想要加入的標簽,并在/css文件夾中對相應的css文件添加樣式就可以定制我們想要的UI啦?。?!



下面給大家列出一些用docbox定制API文檔的網站



Mapbox API文檔

Mapillary的API文檔和Tiles文檔

HYCON 8th

Wall

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

日歷

鏈接

個人資料

藍藍設計的小編 http://www.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
精品久久久久久久久久久久久| 日本精品久久久久久久| 欧美高清第一页| 两个人的视频www国产精品| 狠狠综合久久av一区二区小说| 欧美午夜精品在线| 国产一区二区三区免费视频| 国产精品美女久久久久av超清| 秋霞av国产精品一区| 欧美日韩不卡合集视频| www.亚洲一二| 亚洲精品日产aⅴ| 亚洲影影院av| 亚洲成人中文字幕| 亚洲成人免费在线视频| 亚洲国产天堂久久综合| 国产一区二区欧美日韩| 福利二区91精品bt7086| 欧美一级免费看| 国产a∨精品一区二区三区不卡| 亚洲一区二区自拍| 亚洲国产精品va在线看黑人| 欧美另类精品xxxx孕妇| 日韩av不卡电影| 在线观看精品国产视频| 色老头一区二区三区在线观看| 亚洲欧美国内爽妇网| 中文字幕欧美在线| 国产精品看片资源| 欧美日韩亚洲精品一区二区三区| 少妇高潮 亚洲精品| 亚洲第一福利网| 亚洲在线免费看| 国产一区欧美二区三区| 亚洲成人av资源网| 中文字幕成人精品久久不卡| 亚洲精品美女视频| 欧美极品第一页| 欧美亚洲成人网| 日韩激情av在线免费观看| 色狠狠久久aa北条麻妃| 欧美成人免费观看| 亚洲精品久久久一区二区三区| 精品国产1区2区| 日韩欧美视频一区二区三区| 欧美在线视频在线播放完整版免费观看| 欧美精品第一页在线播放| 成人免费午夜电影| 欧美日韩性视频| 亚洲精品视频在线观看视频| 亚洲视频国产视频| 91亚洲va在线va天堂va国| 亚洲精品日韩丝袜精品| 91精品国产高清| 日韩欧美第一页| 国产精品永久在线| 欧美极品美女视频网站在线观看免费| 精品一区二区亚洲| 欧美男插女视频| 高清欧美一区二区三区| 狠狠躁夜夜躁人人爽天天天天97| 91精品国产高清久久久久久91| 国产精品∨欧美精品v日韩精品| 国产精品va在线| 精品美女国产在线| 欧美电影在线播放| 亚洲视频在线视频| 热久久视久久精品18亚洲精品| 久久亚洲电影天堂| 日韩欧美成人免费视频| 亚洲a∨日韩av高清在线观看| 精品无人区乱码1区2区3区在线| 久久久久久久97| 欧美性资源免费| 亚洲黄色www| 久久999免费视频| 美日韩精品视频免费看| 亚洲视频在线播放| 欧美成人黄色小视频| 国产亚洲精品成人av久久ww| 久久久久久高潮国产精品视| 亚洲第一色中文字幕| 亚洲国产精品久久久久久| 91深夜福利视频| 欧美大片免费观看在线观看网站推荐| 亚洲女同精品视频| 国产一区二区三区在线| 欧美日韩在线视频一区二区| 日韩av电影院| 亚洲国产精品久久久久久| 成人精品一区二区三区电影黑人| 亚洲一区美女视频在线观看免费| 日本成人免费在线| 亚洲成人久久电影| 日韩精品在线播放| 国产精品久久不能| 超薄丝袜一区二区| 久久久免费电影| 国产日韩视频在线观看| 欧美丰满少妇xxxx| 久久久久久综合网天天| 亚洲va欧美va在线观看| 精品视频—区二区三区免费| 2019精品视频| 欧美精品久久久久久久免费观看| 欧美高清视频免费观看| 精品国产电影一区| 欧美一区二区三区……| 国产精品成熟老女人| 国产精品成人观看视频国产奇米| 欧美久久精品一级黑人c片| 日韩电影中文字幕av| 国产精品情侣自拍| 国产成人午夜视频网址| 欧美国产日韩视频| 韩国v欧美v日本v亚洲| 欧美成人精品一区二区| 日韩精品视频免费专区在线播放| 日韩av日韩在线观看| 国产日韩欧美另类| 亚洲国产精品女人久久久| 成人免费视频网址| 亚洲欧美在线免费| 国产精品免费一区| 国产美女精彩久久| 全色精品综合影院| 国产精品欧美亚洲777777| 色综合影院在线| 高清欧美性猛交| 久久精品中文字幕免费mv| 8x海外华人永久免费日韩内陆视频| 国产精品免费在线免费| 日本精品在线视频| 久久精品亚洲国产| 欧美日韩在线视频一区二区| 亚洲www在线| 在线a欧美视频| 色综合色综合网色综合| 国产精品成久久久久三级| 欧美在线性爱视频| 人妖精品videosex性欧美| 久久免费成人精品视频| 亚洲第一级黄色片| 久久精品国产亚洲精品2020| 大桥未久av一区二区三区| 精品国产依人香蕉在线精品| 色综合久久久久久中文网| 欧美日韩亚洲成人| 欧美亚洲国产日本| 国产免费一区视频观看免费| 亚洲级视频在线观看免费1级| 亚洲色图av在线| 日韩中文字幕在线精品| 国产精品成人观看视频国产奇米| 亚洲日本成人网| 欧美裸体xxxx极品少妇软件| 久久精品视频va| 欧美激情a∨在线视频播放| 亚洲一区二区三区香蕉| 色综合久久悠悠| 日韩av综合中文字幕| 97色在线观看免费视频| 狠狠色香婷婷久久亚洲精品| 欧美日韩国产第一页|