開(kāi)發(fā)工具與關(guān)鍵技術(shù)：Adobe Dreamweaver CC

作者：黃燦

撰寫(xiě)時(shí)間：2019.1.16



在模仿華為官方網(wǎng)頁(yè)的練習(xí)當(dāng)中我發(fā)現(xiàn)華為官網(wǎng)中有一個(gè)遮罩層是隨便點(diǎn)擊遮罩層的背景也能關(guān)閉掉遮罩層，但唯獨(dú)點(diǎn)擊內(nèi)容區(qū)域不會(huì)關(guān)閉掉遮罩層。于是我開(kāi)始模仿這個(gè)寫(xiě)案例，連內(nèi)容也一模一樣（因?yàn)檫@個(gè)練習(xí)就是要寫(xiě)出和華為關(guān)一樣的效果或則比它更好的效果），一開(kāi)始我是這樣子寫(xiě)的（圖1）



圖1



class=Select_Region_bj 我給了一個(gè)灰色半透明的背景樣式，后來(lái)在Javascript中寫(xiě)onclick事件無(wú)論這么寫(xiě)，點(diǎn)擊內(nèi)容區(qū)也是會(huì)關(guān)閉掉遮罩層。我百思不得其解到底怎么樣寫(xiě)才能點(diǎn)擊內(nèi)容區(qū)不會(huì)關(guān)閉遮罩層，后來(lái)下課期間我看見(jiàn)我同學(xué)他寫(xiě)的帶能點(diǎn)擊內(nèi)容區(qū)不會(huì)關(guān)閉遮罩層。我問(wèn)他你是這么寫(xiě)的，他告訴我：“把他們分離就可以的了?！蔽宜伎剂艘粫?huì)，腦補(bǔ)：分離？怎么分離？補(bǔ)著補(bǔ)著補(bǔ)著就補(bǔ)出了背景和內(nèi)容區(qū)分離。分離寫(xiě)（圖2）

圖2



把背景層和內(nèi)容區(qū)分開(kāi)來(lái)寫(xiě)，不要在背景層中包裹內(nèi)容，這樣子點(diǎn)擊內(nèi)容區(qū)就不會(huì)關(guān)閉掉遮罩層了！

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

寫(xiě)在前面

vue中關(guān)于插槽的文檔說(shuō)明很短，語(yǔ)言又寫(xiě)的很凝練，再加上其和methods，data，computed等常用選項(xiàng)使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開(kāi)發(fā)者容易產(chǎn)生“算了吧，回頭再學(xué)，反正已經(jīng)可以寫(xiě)基礎(chǔ)組件了”，于是就關(guān)閉了vue說(shuō)明文檔。

實(shí)際上，插槽的概念很簡(jiǎn)單，下面通過(guò)分三部分來(lái)講。這個(gè)部分也是按照vue說(shuō)明文檔的順序來(lái)寫(xiě)的。

進(jìn)入三部分之前，先讓還沒(méi)接觸過(guò)插槽的同學(xué)對(duì)什么是插槽有一個(gè)簡(jiǎn)單的概念：插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來(lái)決定。 實(shí)際上，一個(gè)slot最核心的兩個(gè)問(wèn)題這里就點(diǎn)出來(lái)了，是顯示不顯示和怎樣顯示。

由于插槽是一塊模板，所以，對(duì)于任何一個(gè)組件，從模板種類的角度來(lái)分，其實(shí)都可以分為非插槽模板和插槽模板兩大類。
非插槽模板指的是html模板，指的是‘div、span、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制；插槽模板是slot，它是一個(gè)空殼子，因?yàn)樗@示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件自身決定，slot寫(xiě)在組件template的哪塊，父組件傳過(guò)來(lái)的模板將來(lái)就顯示在哪塊。

單個(gè)插槽 | 默認(rèn)插槽 | 匿名插槽

首先是單個(gè)插槽，單個(gè)插槽是vue的官方叫法，但是其實(shí)也可以叫它默認(rèn)插槽，或者與具名插槽相對(duì)，我們可以叫它匿名插槽。因?yàn)樗挥迷O(shè)置name屬性。

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

下面通過(guò)一個(gè)例子來(lái)展示。

父組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="father">
            

        

    

    


        


            


            

        

        


            

                <h3>這里是父組件</h3>
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl">
            

        

    

    


        


            


            

        

        


            

                <span>菜單1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

子組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="child">
            

        

    

    


        


            


            

        

        


            

                <h3>這里是子組件</h3>
            

        

    

    


        


            


            

        

        


            

                <slot></slot>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

在這個(gè)例子里，因?yàn)楦附M件在<child></child>里面寫(xiě)了html模板，那么子組件的匿名插槽這塊模板就是下面這樣。也就是說(shuō)，子組件的匿名插槽被使用了，是被下面這塊模板使用了。

    


        


            


            

        

        


            

                <div class="tmpl">
            

        

    

    


        


            


            

        

        


            

                <span>菜單1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

最終的渲染結(jié)果如圖所示：

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍(lán)色填充。
            

        

    

具名插槽

匿名插槽沒(méi)有name屬性，所以是匿名插槽，那么，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個(gè)組件中出現(xiàn)N次。出現(xiàn)在不同的位置。下面的例子，就是一個(gè)有兩個(gè)具名插槽和單個(gè)插槽的組件，這三個(gè)插槽被父組件用同一套css樣式顯示了出來(lái)，不同的是內(nèi)容上略有區(qū)別。

父組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="father">
            

        

    

    


        


            


            

        

        


            

                <h3>這里是父組件</h3>
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl" slot="up">
            

        

    

    


        


            


            

        

        


            

                <span>菜單1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl" slot="down">
            

        

    

    


        


            


            

        

        


            

                <span>菜單-1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl">
            

        

    

    


        


            


            

        

        


            

                <span>菜單->1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

子組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="child">
            

        

    

    


        


            


            

        

        


            

                // 具名插槽
            

        

    

    


        


            


            

        

        


            

                <slot name="up"></slot>
            

        

    

    


        


            


            

        

        


            

                <h3>這里是子組件</h3>
            

        

    

    


        


            


            

        

        


            

                // 具名插槽
            

        

    

    


        


            


            

        

        


            

                <slot name="down"></slot>
            

        

    

    


        


            


            

        

        


            

                // 匿名插槽
            

        

    

    


        


            


            

        

        


            

                <slot></slot>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

顯示結(jié)果如圖：

可以看到，父組件通過(guò)html模板上的slot屬性關(guān)聯(lián)具名插槽。沒(méi)有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名插槽。

作用域插槽 | 帶數(shù)據(jù)的插槽

最后，就是我們的作用域插槽。這個(gè)稍微難理解一點(diǎn)。官方叫它作用域插槽，實(shí)際上，對(duì)比前面兩種插槽，我們可以叫它帶數(shù)據(jù)的插槽。什么意思呢，就是前面兩種，都是在組件的template里面寫(xiě)

    


        


            


            

        

        


            

                匿名插槽
            

        

    

    


        


            


            

        

        


            

                <slot></slot>
            

        

    

    


        


            


            

        

        


            

                具名插槽
            

        

    

    


        


            


            

        

        


            

                <slot name="up"></slot>
            

        

    

但是作用域插槽要求，在slot上面綁定數(shù)據(jù)。也就是你得寫(xiě)成大概下面這個(gè)樣子。

    


        


            


            

        

        


            

                <slot name="up" :data="data"></slot>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data: function(){
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

我們前面說(shuō)了，插槽最后顯示不顯示是看父組件有沒(méi)有在child下面寫(xiě)模板，像下面那樣。

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                html模板
            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

寫(xiě)了，插槽就總得在瀏覽器上顯示點(diǎn)東西，東西就是html該有的模樣，沒(méi)寫(xiě)，插槽就是空殼子，啥都沒(méi)有。
OK，我們說(shuō)有html模板的情況，就是父組件會(huì)往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的html+css共同決定，但是這套樣式里面的內(nèi)容呢？

正因?yàn)樽饔糜虿宀劢壎艘惶讛?shù)據(jù)，父組件可以拿來(lái)用。于是，情況就變成了這樣：樣式父組件說(shuō)了算，但內(nèi)容可以顯示子組件插槽綁定的。

我們?cè)賮?lái)對(duì)比，作用域插槽和單個(gè)插槽和具名插槽的區(qū)別，因?yàn)閱蝹€(gè)插槽和具名插槽不綁定數(shù)據(jù)，所以父組件是提供的模板要既包括樣式由包括內(nèi)容的，上面的例子中，你看到的文字，“菜單1”，“菜單2”都是父組件自己提供的內(nèi)容；而作用域插槽，父組件只需要提供一套樣式（在確實(shí)用作用域插槽綁定的數(shù)據(jù)的前提下）。

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

父組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="father">
            

        

    

    


        


            


            

        

        


            

                <h3>這里是父組件</h3>
            

        

    

    


        


            


            

        

        


            

                <!--第一次使用：用flex展示數(shù)據(jù)-->
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="user">
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl">
            

        

    

    


        


            


            

        

        


            

                <span v-for="item in user.data">{{item}}</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--第二次使用：用列表展示數(shù)據(jù)-->
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="user">
            

        

    

    


        


            


            

        

        


            

                <ul>
            

        

    

    


        


            


            

        

        


            

                <li v-for="item in user.data">{{item}}</li>
            

        

    

    


        


            


            

        

        


            

                </ul>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--第三次使用：直接顯示數(shù)據(jù)-->
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="user">
            

        

    

    


        


            


            

        

        


            

                {{user.data}}
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--第四次使用：不使用其提供的數(shù)據(jù), 作用域插槽退變成匿名插槽-->
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                我就是模板
            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

子組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="child">
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <h3>這里是子組件</h3>
            

        

    

    


        


            


            

        

        


            

                // 作用域插槽
            

        

    

    


        


            


            

        

        


            

                <slot  :data="data"></slot>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data: function(){
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

結(jié)果如圖所示：

github

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

前言：平時(shí)寫(xiě)頁(yè)面的時(shí)候有些樣式使用完發(fā)現(xiàn)沒(méi)過(guò)多久就忘記了，這篇文章主要是用來(lái)記錄開(kāi)發(fā)過(guò)程中容易忘記的CSS樣式，與其總是去網(wǎng)上查，還不如一個(gè)一個(gè)記錄下來(lái)，雖然說(shuō)之前的都沒(méi)有記錄，但是知識(shí)的累積不論什么時(shí)候開(kāi)始做都不會(huì)晚的。



首先 記錄幾個(gè)好用的插件網(wǎng)站：



layDate日期與時(shí)間組件： https://www.layui.com/laydate/

Vant移動(dòng)端插件庫(kù)： https://youzan.github.io/vant/#/zh-CN/intro

Element組件庫(kù)： https://element.eleme.cn/#/zh-CN/component/installation

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

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

菜鳥(niǎo)教程官網(wǎng)： https://www.runoob.com/

w3school官網(wǎng)： https://www.w3school.com.cn/

下面是遇到的一些想累積的css樣式：（內(nèi)容會(huì)隨時(shí)間累積的越來(lái)越多）



1、一個(gè) div 中的內(nèi)容實(shí)現(xiàn)上下滑動(dòng)效果（而不是超出body的高以后上下滑動(dòng)）：overflow:auto;

簡(jiǎn)單的描述：body 中的一個(gè) div 內(nèi)，如果設(shè)置了固定的 height，而內(nèi)容的總 height 超出了 div 的高，則超出的部分就會(huì)被覆蓋，而想實(shí)現(xiàn)超出的部分變成滑動(dòng)的效果而不被覆蓋，則用 overflow:auto; 實(shí)現(xiàn)。



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

簡(jiǎn)單的描述：在開(kāi)發(fā)過(guò)程中經(jīng)常使用一些前端框架（bootstrap，vue.js，laydate，Vant等等），在使用link導(dǎo)入css文件以后，發(fā)現(xiàn)有些css是在標(biāo)簽內(nèi)使用內(nèi)嵌的方式實(shí)現(xiàn)的，優(yōu)先級(jí)最高，那么我們?cè)趺葱薷哪兀?br />
比如：css文件中的邊框弧度樣式為10px：border-radius: 10px;

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



這篇文章主要是以后回頭復(fù)習(xí)或者忘記了的時(shí)候給我自己看的，但是如果恰好也幫助到了你，那是更加的有意義，在以后的開(kāi)發(fā)過(guò)程中，該文章的內(nèi)容一定會(huì)累積的越來(lái)越多

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

先問(wèn)一個(gè)問(wèn)題：怎么樣衡量一個(gè)設(shè)計(jì)好與不好？工作中實(shí)踐越多次，越會(huì)發(fā)現(xiàn)華麗的設(shè)計(jì)稿并不是體現(xiàn)設(shè)計(jì)師專業(yè)能力的唯一標(biāo)準(zhǔn)。普通設(shè)計(jì)師和高級(jí)設(shè)計(jì)師區(qū)別在于，設(shè)計(jì)方案是否具備完整設(shè)計(jì)思路；設(shè)計(jì)對(duì)于業(yè)務(wù)有沒(méi)有真正的價(jià)值體現(xiàn)；以及設(shè)計(jì)方案的推動(dòng)落地的完整性到底有多少。設(shè)計(jì)越往后走，越考驗(yàn)產(chǎn)品思維，設(shè)計(jì)思維，以及設(shè)計(jì)推動(dòng)能力。這是產(chǎn)品設(shè)計(jì)師需要關(guān)注的核心三要素。

設(shè)計(jì)師在工作中接到設(shè)計(jì)需求會(huì)不自覺(jué)的第一時(shí)間想著如何去進(jìn)行視覺(jué)表達(dá)，視覺(jué)表達(dá)確實(shí)非常重要，也是公司對(duì)于設(shè)計(jì)師的核心價(jià)值的定位之一，但視覺(jué)表達(dá)只是其中設(shè)計(jì)專業(yè)本職工作中的一個(gè)環(huán)節(jié)。設(shè)計(jì)師還要應(yīng)該能夠站在產(chǎn)品、設(shè)計(jì)、技術(shù)等不同維度去思考設(shè)計(jì)方案的可行性。產(chǎn)品打磨-視覺(jué)呈現(xiàn)-落地執(zhí)行，在這三個(gè)核心點(diǎn)里面設(shè)計(jì)師分別有不同的定位和價(jià)值所在。 

  一. 產(chǎn)品“雙標(biāo)”滿足   

產(chǎn)品打磨包含產(chǎn)品規(guī)劃，內(nèi)容組成，界面布局，交互梳理等等…所有環(huán)節(jié)的工作是為了符合產(chǎn)品最終的目標(biāo)。產(chǎn)品所有的能力會(huì)核心圍繞兩個(gè)點(diǎn)：1商業(yè)變現(xiàn) 2用戶需求滿足。這兩個(gè)目標(biāo)在產(chǎn)品執(zhí)行的環(huán)節(jié)有時(shí)候會(huì)有一些沖突，在產(chǎn)品打磨階段設(shè)計(jì)師通過(guò)怎樣的方式，做到既滿足產(chǎn)品商業(yè)目標(biāo)又滿足用戶體驗(yàn)需求？可以按照以下幾個(gè)步驟進(jìn)行分析尋求切入點(diǎn)： 

這里用騰訊動(dòng)漫付費(fèi)模塊舉例說(shuō)明： 項(xiàng)目背景是騰訊動(dòng)漫產(chǎn)品要做付費(fèi)體系升級(jí)設(shè)計(jì)，接到需求先有由產(chǎn)品源頭一步步深入，逐步展開(kāi)設(shè)計(jì)方案的規(guī)劃。 

 01 產(chǎn)品目標(biāo)確認(rèn)  

通過(guò)對(duì)項(xiàng)目背景的解讀和產(chǎn)品方案的深入了解，以及總結(jié)當(dāng)前存在的一些問(wèn)題，可以明確得到項(xiàng)目中產(chǎn)品核心目是什么。付費(fèi)升級(jí)核心原因是付費(fèi)轉(zhuǎn)化低，用戶付費(fèi)意愿不夠強(qiáng)烈。此次升級(jí)的核心目標(biāo)是促進(jìn)內(nèi)容消費(fèi)，提升付費(fèi)率。 

 02 分析用戶路徑  

確認(rèn)目標(biāo)之后從哪個(gè)模塊兒開(kāi)始進(jìn)行首要需要考慮的。對(duì)于現(xiàn)有現(xiàn)有功能的升級(jí)，建議核心從產(chǎn)品本身著手，可以根據(jù)用戶行為分析，獲取用戶常規(guī)使用路徑，找到用戶使用場(chǎng)景下的核心目的，從而去挖掘用戶在付費(fèi)路徑下的訴求點(diǎn)，根據(jù)訴求點(diǎn)找到付費(fèi)升級(jí)的觸點(diǎn)。這里我們羅列了用戶閱讀產(chǎn)品的路徑。 

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

 用戶在每個(gè)場(chǎng)景下都會(huì)有“痛點(diǎn)”和“癢點(diǎn)”。比如在閱讀前，核心目是想快點(diǎn)看到漫畫(huà)內(nèi)容；閱讀過(guò)程中，想要及時(shí)宣泄對(duì)漫畫(huà)的故事情節(jié)的感受；閱讀后，希望找到更多相關(guān)內(nèi)容或者能夠和內(nèi)容有更多的互動(dòng)。目前產(chǎn)品在這三個(gè)關(guān)鍵的路徑節(jié)點(diǎn)都存在一些問(wèn)題，閱讀前對(duì)于付費(fèi)缺乏正向引導(dǎo)，閱讀過(guò)程中互相行為較少，閱讀后沒(méi)有更多延展內(nèi)容可供消費(fèi)等。 

 04 洞察設(shè)計(jì)切入點(diǎn)  

根據(jù)用戶在閱讀 “前 中 后” 關(guān)鍵路徑的節(jié)點(diǎn)的不同情緒反饋，我們可以做出找到相應(yīng)情感滿足切入點(diǎn)，并且制定解決方案 

 05 制定設(shè)計(jì)方案  

將之前找到的設(shè)計(jì)情感切入點(diǎn)用交互和視覺(jué)的形式呈現(xiàn)出來(lái)，盡可能完整的表達(dá)清晰。下面展示是關(guān)于付費(fèi)升級(jí)優(yōu)化的完整視頻DEMO。整個(gè)方案采用趣味情感化形式為核心設(shè)計(jì)思路，逐步去引導(dǎo)用戶付費(fèi)。讓用戶在趣味互動(dòng)中完成產(chǎn)品的商業(yè)轉(zhuǎn)化目標(biāo)。 

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

 二. 設(shè)計(jì)呈現(xiàn)的“差異化”   

視覺(jué)呈現(xiàn)是設(shè)計(jì)師們都比較擅長(zhǎng)的工作，但不同專業(yè)高度要求下方案最終呈現(xiàn)出的效果是完全不一樣的。好的設(shè)計(jì)方案，需要在設(shè)計(jì)上做出明顯的“差異化”，這里的差異化是指要區(qū)別于常規(guī)輸出一般的水平。差異化的可以從多個(gè)點(diǎn)入手：

優(yōu)質(zhì)的設(shè)計(jì)美感：

美感是作為設(shè)計(jì)師首先需要培養(yǎng)的技能之一，也是在后續(xù)職業(yè)生涯的一直需要用到的技能。設(shè)計(jì)師被神職化的很大一個(gè)原因就是因?yàn)樵O(shè)計(jì)師的美感比一般人要好，有懂得欣賞美、鑒別美、以及創(chuàng)造美的能力。單一從視覺(jué)層面，設(shè)計(jì)作品是合格品還是精品，最終取決于畫(huà)面的精美程度。項(xiàng)目不分大小，再小的一個(gè)項(xiàng)目都可以做出精致品質(zhì)，這也是體現(xiàn)設(shè)計(jì)師專業(yè)度的核心衡量之一。

完整設(shè)計(jì)思路：

設(shè)計(jì)方案的完整性也能夠很好的設(shè)計(jì)師專業(yè)度的差異化，幾張圖的設(shè)計(jì)稿和一個(gè)有完整設(shè)計(jì)思路的設(shè)計(jì)方案在品質(zhì)上自然是明顯差別的。設(shè)計(jì)師不光需要將設(shè)計(jì)呈現(xiàn)出來(lái)，更需要有嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)思路并且表達(dá)出來(lái)讓受眾到你的設(shè)計(jì)想法。設(shè)計(jì)前期分析、中期執(zhí)行、后期落地以及迭代優(yōu)化，能夠讓設(shè)計(jì)師有意識(shí)的鍛煉和提升自己的設(shè)計(jì)思維，對(duì)于設(shè)計(jì)師能力提升有必然的幫助。 

獨(dú)特創(chuàng)意：

設(shè)計(jì)差異化呈現(xiàn)上，創(chuàng)意是一個(gè)非常好的切入點(diǎn)。行業(yè)大趨勢(shì)的前提下，現(xiàn)在同類產(chǎn)品越來(lái)越趨于同質(zhì)化，受眾使用產(chǎn)品的時(shí)候都會(huì)有一些常規(guī)認(rèn)知，關(guān)于功能的、交互操作的、內(nèi)容組成的等等，淘寶和京東、大眾和美團(tuán)、甚至QQ音樂(lè)和網(wǎng)易音樂(lè)在產(chǎn)品使用體驗(yàn)上都有高度重合的地方，這些已經(jīng)在用戶心智中形成習(xí)以為常的認(rèn)知感受。如果能夠在用戶的常規(guī)認(rèn)知里，用創(chuàng)意手法呈現(xiàn)出超出他們預(yù)期的內(nèi)容使其驚喜，產(chǎn)品設(shè)計(jì)就會(huì)有明顯差異化體現(xiàn)。 

善用情感化：

具備美感的設(shè)計(jì)能讓作品看起來(lái)有高級(jí)感，但更為高級(jí)且有效的是能夠引起用戶情感共鳴的設(shè)計(jì)。設(shè)計(jì)是主觀的，對(duì)于設(shè)計(jì)每個(gè)人都有自己的想法，也正是因?yàn)橹饔^的設(shè)計(jì)感受，能讓設(shè)計(jì)在情感化打造方面可以有很多的嘗試方向。能夠引起受眾主觀情感上的共鳴和認(rèn)同的設(shè)計(jì)，會(huì)形成產(chǎn)品的核心記憶點(diǎn)之一。設(shè)計(jì)師對(duì)于情感化設(shè)計(jì)往往會(huì)有一些誤區(qū)，認(rèn)為圖形可愛(ài)，色彩羨慕，動(dòng)效流暢且能夠形成一套視覺(jué)體系，就能夠算情感設(shè)計(jì)。真正的情感設(shè)計(jì)是需要從用戶角度出發(fā)，挖掘用戶的認(rèn)知領(lǐng)域和喜歡，從而去進(jìn)行符合用戶情感訴求的呈現(xiàn)。 

三. 方案推動(dòng)的效能管理 

設(shè)計(jì)方案輸出只是整個(gè)產(chǎn)品生產(chǎn)流程中的一個(gè)核心環(huán)節(jié)，產(chǎn)品上線后體驗(yàn)如何最終取決于落地實(shí)現(xiàn)的程度。在方案落地支持過(guò)程中，效率協(xié)調(diào)和實(shí)現(xiàn)能力是保證設(shè)計(jì)方案貫徹一致執(zhí)行的關(guān)鍵因素：

 協(xié)作  

產(chǎn)品設(shè)計(jì)師工作協(xié)調(diào)分為內(nèi)部協(xié)作和外部協(xié)作。內(nèi)部協(xié)作即設(shè)計(jì)師之間的溝通協(xié)同，主要內(nèi)容是如何保持設(shè)計(jì)語(yǔ)言一致性，除了制定設(shè)計(jì)規(guī)范，還可以建立公共控件庫(kù)，線上調(diào)用?？丶?kù)能夠使設(shè)計(jì)師協(xié)作無(wú)學(xué)習(xí)成本，設(shè)計(jì)師輸出設(shè)計(jì)稿效率也能夠大大提升，同時(shí)保一致性。

外部協(xié)作主要是和下游的技術(shù)同事直接的工作對(duì)接，設(shè)計(jì)方案的交接方式以及開(kāi)發(fā)獲取信息的效率很關(guān)鍵。在開(kāi)發(fā)接收設(shè)計(jì)方案的時(shí)候，盡能力降低獲取成本以及理解成本。比如設(shè)計(jì)稿的標(biāo)注，在標(biāo)注上設(shè)計(jì)師一般會(huì)花很長(zhǎng)時(shí)間，開(kāi)發(fā)也需要逐步查看，偶爾還會(huì)有標(biāo)注遺漏的地方。我們團(tuán)隊(duì)會(huì)直接采用插件，設(shè)計(jì)稿及時(shí)同步，并且開(kāi)發(fā)可以自己隨時(shí)查看每個(gè)元素的標(biāo)注信息，便捷。

這里推薦兩款協(xié)調(diào)軟件：一款是InVision可以在sketch里進(jìn)行控件協(xié)同調(diào)用，所有想用的元素直接源文件調(diào)用，不需要再問(wèn)同事要源文件！另一款是Zeplin技術(shù)同學(xué)可以直接查看元素屬性以及間距等，設(shè)計(jì)師解放雙手不再需要標(biāo)注！

官網(wǎng)鏈接： 

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

https://zeplin.io/

實(shí)現(xiàn)能力   

專業(yè)技術(shù)之間的壁壘，也會(huì)成為設(shè)計(jì)方案實(shí)現(xiàn)的阻力。同樣的界面，設(shè)計(jì)人員用設(shè)計(jì)軟件實(shí)現(xiàn)，技術(shù)人員用邏輯代碼實(shí)現(xiàn)，實(shí)現(xiàn)的方式和成本存在很大的差異性，所以往往設(shè)計(jì)師認(rèn)為很簡(jiǎn)單的需求在開(kāi)發(fā)層面的確非常難實(shí)現(xiàn)。當(dāng)然，不是所有需求都是無(wú)解的，設(shè)計(jì)師在技術(shù)實(shí)現(xiàn)層面還是可以做一些事情：

01 方案前置溝通

設(shè)計(jì)一個(gè)新的功能的時(shí)候，如果有非常規(guī)的設(shè)計(jì)方案，可以提前和技術(shù)人員溝通實(shí)現(xiàn)的難易程度，讓技術(shù)人員有前期預(yù)判和預(yù)演的時(shí)間。并且，可以將設(shè)計(jì)做成簡(jiǎn)易DEMO方便技術(shù)人員快速理解，避免雙方存在信息不對(duì)等的情況。

02 搭建開(kāi)發(fā)控件庫(kù)

開(kāi)發(fā)控件庫(kù)和設(shè)計(jì)規(guī)范一樣，是最基礎(chǔ)但應(yīng)用最為頻繁的模塊兒。開(kāi)發(fā)控件庫(kù)可以將最基礎(chǔ)的元素形成固有規(guī)范，所有開(kāi)發(fā)實(shí)現(xiàn)都用同一套規(guī)范，以確保實(shí)現(xiàn)的高度一致性，同時(shí)也能夠提升實(shí)現(xiàn)效率和設(shè)計(jì)還原。設(shè)計(jì)可以輔助開(kāi)發(fā)一起制定開(kāi)發(fā)控件庫(kù)，確?？丶?kù)和設(shè)計(jì)規(guī)格的一致性。

03 尋求技術(shù)語(yǔ)言共通性

盡量將設(shè)計(jì)方案轉(zhuǎn)化為技術(shù)能夠理解和復(fù)用的形式進(jìn)行對(duì)接。除了靜態(tài)設(shè)計(jì)稿的標(biāo)注，設(shè)計(jì)和技術(shù)實(shí)現(xiàn)最大的難點(diǎn)在于動(dòng)態(tài)交互的實(shí)現(xiàn)上，對(duì)于動(dòng)態(tài)設(shè)計(jì)，將設(shè)計(jì)方案轉(zhuǎn)換為代碼文件交付給技術(shù)實(shí)現(xiàn)，這樣能確保功能的正常實(shí)現(xiàn)同時(shí)減少后期設(shè)計(jì)還原性的偏差。

以上初步總結(jié)的關(guān)于產(chǎn)品設(shè)計(jì)師在設(shè)計(jì)過(guò)程中從前期產(chǎn)品規(guī)劃到中期設(shè)計(jì)執(zhí)行再到后期開(kāi)發(fā)落地應(yīng)該注意的一些核心點(diǎn)：

第一條，設(shè)計(jì)方案既要滿足產(chǎn)品目標(biāo)又同時(shí)要兼顧用戶體驗(yàn)；

第二條，優(yōu)秀的設(shè)計(jì)師，會(huì)保持設(shè)計(jì)方案的“差異化”；

第三條，設(shè)計(jì)師職責(zé)除了確保設(shè)計(jì)方案完整性，更重要的是推動(dòng)設(shè)計(jì)方案的完整落地。

在產(chǎn)品設(shè)計(jì)過(guò)程中，設(shè)計(jì)師需要關(guān)注還有很多關(guān)鍵點(diǎn)，這里也歡迎大家一起補(bǔ)充交流，正是這些關(guān)鍵點(diǎn)，將設(shè)計(jì)師的思維逐步打開(kāi)，使其成為一個(gè)具有全鏈路思維的設(shè)計(jì)人才。 

文章來(lái)源：UI中國(guó)

普通數(shù)字轉(zhuǎn)會(huì)計(jì)金額格式（保留兩位小數(shù)）

我們可以用數(shù)字的toLocaleString()方法將普通數(shù)字轉(zhuǎn)為會(huì)計(jì)金額格式，但是這種方式無(wú)法保留兩位小數(shù)(四舍五入)，如果是整數(shù)或者小數(shù)長(zhǎng)度只有一位的時(shí)候無(wú)法自動(dòng)補(bǔ)0



例如：





思路：

利用toLocaleString()以及toFixed()先對(duì)數(shù)字進(jìn)行一個(gè)轉(zhuǎn)換得到最多保留了2位小數(shù)的金額，然后判斷數(shù)字是為整數(shù)還是帶有小數(shù)，如果帶有小數(shù)則進(jìn)行切割，判斷小數(shù)長(zhǎng)度為1時(shí)自動(dòng)補(bǔ)0



// 普通數(shù)字轉(zhuǎn)會(huì)計(jì)金額格式 第一種

    function toThousandsFormates(num) {

        // 判斷傳進(jìn)來(lái)的數(shù)字是否為非空數(shù)字

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

            var reg = /./g

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

            // 判斷轉(zhuǎn)換后的數(shù)字是否帶有小數(shù)

            if (reg.test(newNum)) {

                var numArr = newNum.split('.')

                // 判斷小數(shù)點(diǎn)后數(shù)字長(zhǎng)度為1，則自動(dòng)補(bǔ)0

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

                return numArr.join('.')

            } else {

                // 整數(shù)直接在后面補(bǔ)上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



經(jīng)過(guò)查閱資料后，發(fā)現(xiàn)toLocaleString()它里面自帶屬性可以檢查到最少保留了幾位小數(shù)，不夠自動(dòng)補(bǔ)0，這樣我們上面的代碼其實(shí)可以更加簡(jiǎn)單，如下:

// 普通數(shù)字轉(zhuǎn)會(huì)計(jì)金額格式 第二種

function toThousandsFormates2(num) {

    // 判斷傳進(jìn)來(lái)的數(shù)字是否為非空數(shù)字

    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



// 結(jié)果一模一樣



會(huì)計(jì)金額格式轉(zhuǎn)普通數(shù)字（利用正則）

// 會(huì)計(jì)金額格式轉(zhuǎn)為普通數(shù)字

    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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

交互手勢(shì)是用戶操作的重要部分，交互手勢(shì)的設(shè)計(jì)好壞非常影響用戶體驗(yàn)，那么，交互手勢(shì)的設(shè)計(jì)上對(duì)于容錯(cuò)性和邏輯性需要注意什么？

隨著用戶體驗(yàn)被愈發(fā)的重視，更多的 APP 偏向于使用多手勢(shì)優(yōu)化用戶的操作流程，降低使用阻力。

點(diǎn)擊某個(gè)確定的按鈕的手勢(shì)操作雖然被普遍使用并被用戶熟知，但是增加更快捷的手勢(shì)操作可以大大增大操作熱區(qū)，提高操作效率，如下圖。

然而，我們可以發(fā)現(xiàn)由于不同產(chǎn)品的設(shè)計(jì)師對(duì)于用戶體驗(yàn)的理解不同、交互層面的思考不同，導(dǎo)致設(shè)計(jì)的交互手勢(shì)也不同。

有時(shí)同一種操作在不同的 APP 中交互手勢(shì)也是不統(tǒng)一的，這無(wú)疑增加了用戶的學(xué)習(xí)成本和記憶成本。

舉個(gè)例子，iOS 端的得到和有書(shū)的播放頁(yè)的打開(kāi)和關(guān)閉方式。

得到有兩種方式打開(kāi)和關(guān)閉頁(yè)面，用戶可以通過(guò)點(diǎn)擊控件或上滑控件打開(kāi)播放頁(yè)，通過(guò)點(diǎn)擊收起按鈕或下拉頁(yè)面關(guān)閉播放頁(yè)。但是有書(shū)只有一種方式打開(kāi)和關(guān)閉，用戶只能通過(guò)點(diǎn)擊控件打開(kāi)播放頁(yè)，通過(guò)點(diǎn)擊返回圖標(biāo)關(guān)閉播放頁(yè)。

這讓習(xí)慣了使用得到的我去使用有書(shū)時(shí)，感覺(jué)非常別扭，每次都嘗試用得到的手勢(shì)去操作但是都失敗了，失敗后我下一次并沒(méi)有記住仍然用手勢(shì)去操作，如此反復(fù)令我相當(dāng)沮喪。

容錯(cuò)性

容錯(cuò)性是一個(gè)很大的話題，今天我們僅僅在交互手勢(shì)層面上討論。

上面的例子中，有書(shū)并沒(méi)有設(shè)計(jì)滑動(dòng)手勢(shì)去打開(kāi)和關(guān)閉播放頁(yè)，那么我以我的經(jīng)驗(yàn)去進(jìn)行的滑動(dòng)滑操作在有書(shū)這個(gè)產(chǎn)品中就是錯(cuò)誤的和不被產(chǎn)品識(shí)別的。但是這種手勢(shì)又廣泛存在于大量的音頻播放 APP 中，如喜馬拉雅、荔枝 FM 等。

一旦用戶從這些 APP 遷移到了有書(shū)，本來(lái)養(yǎng)成的操作習(xí)慣在有書(shū)就失效了，用戶就會(huì)感覺(jué)“這個(gè) APP 很難用，用起來(lái)很不舒服”，進(jìn)而可能放棄有書(shū)轉(zhuǎn)而投向其他產(chǎn)品懷抱。

與手勢(shì)設(shè)計(jì)類似，這也是為什么現(xiàn)在的同種類型的 APP 的信息架構(gòu)設(shè)計(jì)越來(lái)越同質(zhì)化，當(dāng)我們打開(kāi)淘寶、天貓、京東時(shí)我們有時(shí)感覺(jué)就像是同一個(gè) APP ，本質(zhì)上也是為了降低用戶的遷移、記憶和學(xué)習(xí)成本。

如下圖所示，提高手勢(shì)的容錯(cuò)性對(duì)用戶的意義。

很多優(yōu)秀的產(chǎn)品考慮到了上述問(wèn)題，設(shè)計(jì)了多手勢(shì)來(lái)優(yōu)化用戶體驗(yàn)。

舉個(gè)例子，在 APP Store 的首頁(yè)點(diǎn)擊一個(gè)推薦卡片后進(jìn)入詳情頁(yè)，由于詳情頁(yè)是直接由卡片放大轉(zhuǎn)場(chǎng)的，不同于傳統(tǒng)的新頁(yè)面右側(cè)進(jìn)入和從底部彈出。

在用戶的使用習(xí)慣和認(rèn)知中新頁(yè)面如果從右側(cè)進(jìn)入就可以通過(guò)右滑返回，從底部彈出的話就可以下拉返回。因此，當(dāng)用戶面對(duì)卡片放大進(jìn)入新頁(yè)面這種全新交互時(shí)可能會(huì)疑惑如何返回，對(duì)此理解不同的用戶可能會(huì)嘗試右滑，也可能?chē)L試下拉。

APP Store 的設(shè)計(jì)在此就有很好的容錯(cuò)性，用戶可以通過(guò)三種方式返回首頁(yè)，分別是、右滑返回、下拉返回和點(diǎn)擊叉號(hào)返回，這不但降低了用戶的記憶和學(xué)習(xí)成本，也便于不同習(xí)慣的用戶使用。

針對(duì)不同的場(chǎng)景，手勢(shì)的使用也會(huì)有不同。

一個(gè)很好的案例是知乎的評(píng)論：知乎的評(píng)論的關(guān)閉方式有三種，分別是下拉、右滑和點(diǎn)擊叉號(hào)。

用戶觀看評(píng)論的場(chǎng)景有兩種，第一種是只想看一下精選評(píng)論然后關(guān)閉，第二種是被評(píng)論吸引后一直往下看。當(dāng)用戶單手操作不方便點(diǎn)擊叉號(hào)時(shí)，下拉對(duì)應(yīng)的是第一種用戶；右滑對(duì)應(yīng)的是第二種用戶，不管用戶看了多少屏的評(píng)論，隨時(shí)可以通過(guò)右滑關(guān)閉評(píng)論（因?yàn)橛脩舴喠撕芏嗥猎u(píng)論后需要下拉到第一條評(píng)論時(shí)，下拉關(guān)閉評(píng)論手勢(shì)才會(huì)生效，所以第二種用戶一般不使用下拉去關(guān)閉評(píng)論）。

可能你會(huì)心生疑惑：“第一種用戶也可以使用右滑來(lái)關(guān)閉評(píng)論呀”，確實(shí)可以，但是對(duì)于人的操作習(xí)慣來(lái)說(shuō)，上下滑動(dòng)會(huì)比左右滑動(dòng)更方便。

還值得討論的是蘋(píng)果自 iPhone 6s 開(kāi)始加入的新交互方式 3D Touch，它允許用戶通過(guò)更大力度的重按呼出情景菜單快捷地使用高頻功能而不用先打開(kāi) APP，對(duì)于追求效率的用戶來(lái)說(shuō)簡(jiǎn)直不要更方便，但是對(duì)于不支持 3D Touch 的機(jī)型則無(wú)法使用情景菜單。

因此，在生活中我發(fā)現(xiàn)這樣的現(xiàn)象，很多使用慣了3D Touch 的用戶換到無(wú) 3D Touch 的蘋(píng)果機(jī)型后很不習(xí)慣，總是嘗試去重按但是是無(wú)效的。

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

我猜測(cè)蘋(píng)果為了適配所有機(jī)型，提高容錯(cuò)性，從今年的發(fā)布會(huì)的 iPhone 11 和iPhone 11 pro 開(kāi)始，取消了 3D Touch，轉(zhuǎn)而使用 Haptic Touch （有震動(dòng)反饋的長(zhǎng)按）代替。當(dāng)你長(zhǎng)按某個(gè)圖標(biāo)時(shí)，感受到震動(dòng)后松開(kāi)，即可呼出二級(jí)菜單；如果震動(dòng)后仍不松開(kāi)，則進(jìn)入到卸載 APP 時(shí)的抖動(dòng)狀態(tài)，使得之后的即使不支持 3D Touch的機(jī)型可以使用便捷的情景菜單了。

對(duì)于不支持 3D Touch 的老款機(jī)型會(huì)不會(huì)在 iOS 13 更新后也可以使用 Haptic Touch 呢？

如果一致統(tǒng)一的話，容錯(cuò)性將大大提高，我們將拭目以待。

不僅僅是 iOS ，Android 的版本 Android 10經(jīng)歷了 6 個(gè)測(cè)試版迭代后正式發(fā)布，我們發(fā)現(xiàn)交互手勢(shì)是 Android 10 的一個(gè)巨大亮點(diǎn)。Android 10 在第三版內(nèi)測(cè)系統(tǒng)開(kāi)始引入全局手勢(shì)操作，用戶啟用后，屏幕底部便不會(huì)再出現(xiàn)虛擬按鍵和導(dǎo)航欄，只會(huì)剩下一個(gè)指示條，上滑返回主屏、側(cè)滑返回上一層的操作邏輯也均和 iOS 保持一致。

這可能標(biāo)志著安卓手機(jī)一直以來(lái)在國(guó)內(nèi)各家廠商的各種創(chuàng)新手勢(shì)的割裂生態(tài)中即將重歸統(tǒng)一，并和 iOS 保持一致。

這種妥協(xié)將大大提高在用戶使用一款新安卓手機(jī)時(shí)的容錯(cuò)性，同時(shí)降低了今后用戶在兩大系統(tǒng)之間的遷移成本。

邏輯性

再談?wù)勥壿嬓裕诮换ナ謩?shì)的層面上，如果用戶能夠通過(guò)某個(gè)手勢(shì)進(jìn)行某個(gè)操作后，按照邏輯，用戶也可以通過(guò)反向的手勢(shì)或?qū)?yīng)的手勢(shì)進(jìn)行逆向操作。

比如，在微信首頁(yè)下拉調(diào)出小程序頁(yè)面，之后可以通過(guò)上拉返回首頁(yè)。點(diǎn)擊加號(hào)呼出更多操作，再次點(diǎn)擊加號(hào)收起更多操作。

如果違背了用戶的心理模型和邏輯性，用戶就會(huì)感覺(jué)到混亂和不適。

這里舉一個(gè)反例， Uki 的個(gè)人主頁(yè)可以通過(guò)點(diǎn)擊或下拉底部的固定底板收起更多信息，但是收起后只能通過(guò)點(diǎn)擊展開(kāi)更多個(gè)人信息而不能上拉，不符合邏輯與用戶的心理模型。

如下圖所示，邏輯性對(duì)用戶的意義。

有的時(shí)候，我們會(huì)發(fā)現(xiàn)為了提高容錯(cuò)性，我們會(huì)犧牲一部分邏輯性。

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

如何設(shè)計(jì)

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

我們需要考慮的因素包括使用頻率、危險(xiǎn)程度和特殊體驗(yàn)。

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

2. 評(píng)估所選手勢(shì)的考慮因素

1）考慮不同平臺(tái)的硬件系統(tǒng)和操作系統(tǒng)特性

由于硬件與操作系統(tǒng)差異，iOS 系統(tǒng)支持很多手勢(shì)，但是安卓系統(tǒng)在手勢(shì)支持方面就不如 iOS 豐富。

安卓硬件設(shè)備的差異比較大，不同安卓手機(jī)廠商會(huì)在安卓系統(tǒng)的基礎(chǔ)上自定義系統(tǒng)的手勢(shì)操作，因此對(duì)于手勢(shì)的支持也有較大的差異。對(duì)于這種情況我們需要熟悉相應(yīng)平臺(tái)的規(guī)范，做到心中有數(shù)。

2）考慮所選的手勢(shì)的學(xué)習(xí)成本和記憶成本，用戶是否已經(jīng)被教育

如下圖所示，盡管設(shè)備支持的手勢(shì)數(shù)量多不勝數(shù)，但是日常使用 APP 時(shí)，大部分用戶習(xí)慣使用的手勢(shì)很少，比如單擊、雙擊、滑動(dòng)、上拉、下拉、雙指擴(kuò)張和收縮等。除此之外的手勢(shì)教育成本和學(xué)習(xí)成本很高。

一般比較通用的功能是沒(méi)有必要在此處創(chuàng)新的，但是如果一些特殊的操作確實(shí)需要加入時(shí)，我們就需要考慮下面的問(wèn)題。

a. 如果沒(méi)有教育成熟，考慮加入教學(xué)或搭配簡(jiǎn)易的操作方式

對(duì)于我們需要加入的手勢(shì)操作當(dāng)前用戶并未被教育成熟時(shí)，我們需要考慮加入手勢(shì)教學(xué)，具體的手勢(shì)教學(xué)類型下一部分會(huì)詳細(xì)討論。

然而，大部分情況下用戶的記憶是短期的，教學(xué)內(nèi)容可能會(huì)被快速遺忘，下次用戶使用 APP 時(shí)仍然不會(huì)使用特殊手勢(shì)。此時(shí)我們應(yīng)該將一些比較難以記憶的手勢(shì)操作搭配一個(gè)簡(jiǎn)單的手勢(shì)操作。

比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢(shì)操作設(shè)計(jì)，其考慮到了有些用戶在現(xiàn)實(shí)生活中并未見(jiàn)過(guò)擬物繩燈，并不知道是要進(jìn)行下拉才能觸發(fā)操作。因此，QQ 閱讀貼心地搭配了一個(gè)簡(jiǎn)單的點(diǎn)擊操作，用戶通過(guò)點(diǎn)擊繩燈也可以切換夜間模式，如下圖。

b. 考慮所選手勢(shì)是否可能導(dǎo)致沖突和誤操作，如果導(dǎo)致了，考慮如何避免和折中

最常見(jiàn)的手勢(shì)沖突情況就是 APP 的手勢(shì)與操作系統(tǒng)的全局手勢(shì)沖突。

解決方案有兩個(gè)，一是避免設(shè)計(jì)與全局手勢(shì)一致的手勢(shì)操作，例如 iOS 的在屏幕邊緣右滑返回、全面屏機(jī)型的底部上滑退出應(yīng)用等全局手勢(shì)操作；二是仍然設(shè)計(jì)與全局手勢(shì)沖突的操作，但是將全局手勢(shì)部分禁用或以其他的方式區(qū)分開(kāi)。

如下圖有書(shū)播放頁(yè)的案例，由于進(jìn)度條滑動(dòng)控件過(guò)于靠左，導(dǎo)致使用 iOS 全局右滑返回手勢(shì)時(shí)有時(shí)會(huì)產(chǎn)生誤操作，即本來(lái)想要右滑返回卻不小心滑動(dòng)了進(jìn)度條。

這種情況下我們可以標(biāo)注一個(gè)右滑手勢(shì)禁用區(qū)域給開(kāi)發(fā)工程師說(shuō)明情況，將此情況避免掉即可。

誤操作指的是，我們?cè)O(shè)計(jì)的手勢(shì)操作與 APP 內(nèi)的其他操作或系統(tǒng)全局手勢(shì)操作接近導(dǎo)致用戶觸發(fā)了非預(yù)期的操作。比如 iOS 端的知乎被吐槽的一個(gè)右滑返回手勢(shì)操作，經(jīng)過(guò)研究發(fā)現(xiàn)，由于 iOS 端的知乎在瀏覽回答的頁(yè)面設(shè)計(jì)的右滑返回的熱區(qū)過(guò)大，導(dǎo)致用戶上滑瀏覽的時(shí)候如果手指的滑動(dòng)角度變化幅度過(guò)大一不小心就觸發(fā)了右滑返回，再次進(jìn)入回答后又需要翻頁(yè)很久才能找到之前離開(kāi)的地方，很影響體驗(yàn)。

我覺(jué)得知乎可以減少熱區(qū)，將熱區(qū)調(diào)整為 iOS 全局的右滑返回區(qū)域即可，如下圖所示。

當(dāng)然，產(chǎn)品設(shè)計(jì)需要平衡與取舍，如果減少了熱區(qū)是否會(huì)影響其他用戶的體驗(yàn)還需要考慮和調(diào)研，兩者并無(wú)絕對(duì)的對(duì)錯(cuò)

3. 讓用戶了解并使用新手勢(shì)

當(dāng)新手勢(shì)無(wú)法直接讓用戶感知時(shí)，我們需要加入一些手勢(shì)教學(xué)幫助用戶快速上手使用。

1）手勢(shì)教學(xué)方式

a. 浮層和動(dòng)畫(huà)引導(dǎo)使用靜態(tài)或動(dòng)態(tài)的手勢(shì)圖片或氣泡示例告訴用戶使用哪種手勢(shì)進(jìn)行操作

相比于靜態(tài)，動(dòng)態(tài)比靜態(tài)更為直觀和易學(xué)。

b. 內(nèi)容隱喻通過(guò)微妙的視覺(jué)線索暗示用戶此處可以通過(guò)某種手勢(shì)進(jìn)行操作

由于教學(xué)內(nèi)容難免具有干擾性，對(duì)于高級(jí)用戶來(lái)說(shuō)是不必要的，但是對(duì)于初級(jí)用戶又是必要的，因此以這種內(nèi)容暗示的方式使教學(xué)極為輕量化，在低干擾的情況下使得用戶學(xué)習(xí)了手勢(shì)操作。

如下圖，嗶哩嗶哩在打開(kāi)第一篇文章時(shí)會(huì)平移顯示下一篇文章的框架，暗示用戶可以通過(guò)左右滑動(dòng)切換文章。

再比如陌陌在打開(kāi)點(diǎn)點(diǎn)功能時(shí)，會(huì)在用戶進(jìn)入頁(yè)面的時(shí)候播放一個(gè)動(dòng)畫(huà)，暗示有很多卡片疊加在了一起，用戶可以通過(guò)滑動(dòng)切換卡片。

2）教學(xué)的出現(xiàn)時(shí)機(jī)

a. 操作前當(dāng)產(chǎn)品中設(shè)計(jì)了不容易感知的新手勢(shì)，在用戶操作前，通過(guò)教學(xué)讓用戶了解和學(xué)習(xí)新的手勢(shì)。

b. 錯(cuò)誤操作后對(duì)于一些與用戶的心理模型和習(xí)慣不一致的手勢(shì)，提前預(yù)測(cè)用戶可能輸入的錯(cuò)誤手勢(shì)，在用戶錯(cuò)誤操作后進(jìn)行提示，規(guī)范用戶的操作方式。

如下圖，由于知乎舊版本是通過(guò)左右滑動(dòng)切換回答的，新版本調(diào)整為上下滑動(dòng)后，需要糾正用戶使用習(xí)慣。因此，當(dāng)用戶仍然使用左右滑動(dòng)時(shí)，會(huì)出現(xiàn)浮層提示用戶正確的手勢(shì)進(jìn)行教學(xué)。

結(jié)語(yǔ)

以上是日常思考和總結(jié)，有不恰當(dāng)之處歡迎指出。希望本文在大家進(jìn)行手勢(shì)設(shè)計(jì)的過(guò)程中能夠幫助做出合理的決策。

文章來(lái)源：人人都是產(chǎn)品經(jīng)理 

文章目錄

rewrite在if中的用法

rewrite中break和last的用法

1.break和last在location{}外部時(shí)

2.break和last在location{}內(nèi)部時(shí)

3.break和last用法總結(jié)

return的用法

rewrite的語(yǔ)法規(guī)則

rewrite應(yīng)用實(shí)例

1.域名跳轉(zhuǎn)（域名重定向）

2.http跳轉(zhuǎn)https

3.跳轉(zhuǎn)二級(jí)目錄

4.動(dòng)靜態(tài)請(qǐng)求分離

5.防盜鏈配置

6.偽靜態(tài)（將靜態(tài)頁(yè)面重寫(xiě)為動(dòng)態(tài)）

7.多個(gè)if并用

rewrite在if中的用法

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



if條件判斷語(yǔ)句由Nginx內(nèi)置變量、邏輯判斷符號(hào)和目標(biāo)字符串三部分組成。

其中，內(nèi)置變量是Nginx固定的非自定義的變量，如，$request_method, $request_uri等。

邏輯判斷符號(hào)，有=, !=, ~, ~, !~, !~

!表示相反的意思，~為匹配符號(hào)，它右側(cè)為正則表達(dá)式，區(qū)分大小寫(xiě)，而~為不區(qū)分大小寫(xiě)匹配。

目標(biāo)字符串可以是正則表達(dá)式，通常不用加引號(hào)，但表達(dá)式中有特殊符號(hào)時(shí)，比如空格、花括號(hào)、分號(hào)等，需要用單引號(hào)引起來(lái)。

1

2

3

4

5

示例1：當(dāng)http請(qǐng)求方法為post時(shí)，返回403狀態(tài)碼



if ($request_method = POST)

{

    return 403; 

}

1

2

3

4

示例2：通過(guò)瀏覽器標(biāo)識(shí)匹配關(guān)鍵字，禁止IE瀏覽器訪問(wèn)



if ($http_user_agent ~ MSIE) 

{

    return 403;

}

1

2

3

4

限制多個(gè)瀏覽器：



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

{

    return 403;

}

1

2

3

4

示例3：當(dāng)請(qǐng)求的文件不存在時(shí)，進(jìn)行重定向或return狀態(tài)碼等處理操作



if(!-f $request_filename)

{

    rewrite 語(yǔ)句;

}

1

2

3

4

示例4：判斷uri中某個(gè)參數(shù)的內(nèi)容



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

{

    rewrite 語(yǔ)句;

}

1

2

3

4

\d表示數(shù)字，{6,8}表示數(shù)字出現(xiàn)的次數(shù)是6到8次，當(dāng)uri中g(shù)id參數(shù)的值包含6-8個(gè)數(shù)字那么執(zhí)行rewrite語(yǔ)句

rewrite中break和last的用法

兩個(gè)指令用法相同，但含義不同，需要放到rewrite規(guī)則的末尾，用來(lái)控制重寫(xiě)后的鏈接是否繼續(xù)被nginx配置執(zhí)行(主要是rewrite、return指令)。



1.break和last在location{}外部時(shí)

測(cè)試示例：



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

請(qǐng)求1.html文件時(shí)，會(huì)被重定向到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

請(qǐng)求1.html文件時(shí)，會(huì)被重定向到2.html，然后直接返回2.html，break在此處的作用就是當(dāng)匹配第一個(gè)rewrite指令成功時(shí)，不執(zhí)行后面的rewrite指令

示例2：當(dāng)break后面還有l(wèi)ocation{}的情況



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

請(qǐng)求1.html文件時(shí)，會(huì)返回403狀態(tài)碼，當(dāng)1.html被重定向到2.html時(shí)，break不會(huì)匹配后面的rewrite規(guī)則，但條件2.html匹配location{}定義的文件2.html，所以會(huì)執(zhí)行return 403

以上兩個(gè)示例中，將break換成last效果一樣

2.break和last在location{}內(nèi)部時(shí)

測(cè)試示例：



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

請(qǐng)求1.html，會(huì)經(jīng)過(guò)兩次重定向到3.html，3.html又剛好匹配location /3.html{}，所以返回b.html，當(dāng)請(qǐng)求2.html時(shí)，會(huì)直接返回a.html，因?yàn)閘ocation /2.html {} 更精準(zhǔn)，優(yōu)先匹配

示例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

請(qǐng)求1.html，會(huì)返回2.html，不會(huì)返回a.html，當(dāng)break再location {} 內(nèi)部時(shí)，遇到break后，當(dāng)前l(fā)ocation{} 以及后面的location{} 的指令都不再執(zhí)行

示例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

請(qǐng)求1.html時(shí)，會(huì)返回a.html，在location {} 內(nèi)部遇到last，當(dāng)前l(fā)ocation {}中剩下的指令不會(huì)再執(zhí)行，但被重定向的url會(huì)重新匹配一遍location {}

3.break和last用法總結(jié)

1.當(dāng)rewrite規(guī)則在location{}外，break和last作用一樣，遇到break或last后，其后續(xù)的rewrite/return語(yǔ)句不再執(zhí)行。但后續(xù)有l(wèi)ocation{}的話，還會(huì)近一步執(zhí)行l(wèi)ocation{}里面的語(yǔ)句,前提是請(qǐng)求能匹配該location

2.當(dāng)rewrite規(guī)則在location{}里，遇到break后，本location{}與其他location{}的所有rewrite/return規(guī)則都不再執(zhí)行

3.當(dāng)rewrite規(guī)則在location{}里，遇到last后，本location{}里后續(xù)rewrite/return規(guī)則不執(zhí)行，但重寫(xiě)后的url再次從頭匹配所有l(wèi)ocation



return的用法

該指令一般用于對(duì)請(qǐng)求的客戶端直接返回響應(yīng)狀態(tài)碼。在該作用域內(nèi)return后面的所有nginx配置都是無(wú)效的，可以使用在server、location以及if配置中，除了支持跟狀態(tài)碼，還可以跟字符串或者url鏈接。



示例1：直接返回狀態(tài)碼



server{

    listen 80;

    server_name www.test.com;

    return 403;

    rewrite www.test.net;  

}

1

2

3

4

5

6

訪問(wèn)時(shí)，直接返回403狀態(tài)碼，return返回內(nèi)容后，后面的配置rewrite不會(huì)執(zhí)行

示例2：當(dāng)return在if 判斷中時(shí)



server {

.....



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

{

    return 404;

    rewrite /(.*) /index.html;  

}

.....

}

1

2

3

4

5

6

7

8

9

10

請(qǐng)求的文件包含.password或.bak時(shí)，直接返回404，rewrite不會(huì)執(zhí)行，但if {}外的配置會(huì)繼續(xù)執(zhí)行，return只在當(dāng)前作用域中生效

示例3：返回字符串



server{

    listen 80;

    server_name www.test.com;

    return 200 "hello";

}

1

2

3

4

5

返回字符串必須加上狀態(tài)碼，否則會(huì)報(bào)錯(cuò)

示例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時(shí)，必須以http://或https://開(kāi)頭

示例6：返回html代碼



if ($http_referer ~ 'baidu.com') 

{

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

}

1

2

3

4

當(dāng)網(wǎng)站被黑了的時(shí)候，從百度點(diǎn)進(jìn)網(wǎng)站是鏈接都會(huì)跳轉(zhuǎn)到其他網(wǎng)站，可以使用該方法暫時(shí)處理

注意：return http://$host$request_uri; 在瀏覽器中會(huì)提示"重定向的次數(shù)過(guò)多"

rewrite的語(yǔ)法規(guī)則

格式：rewrite regex replacement [flag]



rewrite 配置可以在server、location以及if配置段內(nèi)生效



regex 是用于匹配URI的正則表達(dá)式，其不會(huì)匹配到$host（域名）



replacement 是目標(biāo)跳轉(zhuǎn)的URI，可以以http://或者h(yuǎn)ttps://開(kāi)頭，也可以省略掉$host，直接寫(xiě)$request_uri部分



flag 用來(lái)設(shè)置rewrite對(duì)URI的處理行為，其中有break、last、rediect、permanent，其中break和last在前面已經(jīng)介紹過(guò)，rediect和permanent的區(qū)別在于，前者為臨時(shí)重定向(302)，而后者是永久重定向(301)，對(duì)于用戶通過(guò)瀏覽器訪問(wèn)，這兩者的效果是一致的。

但是，對(duì)于搜索引擎爬蟲(chóng)來(lái)說(shuō)就有區(qū)別了，使用301更有利于SEO。所以，建議replacemnet是以http://或者h(yuǎn)ttps://開(kāi)頭的，flag使用permanent。



示例1：域名跳轉(zhuǎn)



location / {

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

}

1

2

3

.*為正則表達(dá)式，表示uri，用()括起來(lái)，在后面的uri中可以調(diào)用它，第一次出現(xiàn)的()用$1調(diào)用，第二次出現(xiàn)的()用$2調(diào)用，以此類推。

示例2：域名跳轉(zhuǎn)的第二種寫(xiě)法



location / {

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

}

1

2

3

示例3：文件跳轉(zhuǎn)



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請(qǐng)求的文件重定向到web/目錄中去尋找

錯(cuò)誤寫(xiě)法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

這樣寫(xiě)會(huì)反復(fù)循環(huán)，直到瀏覽器最大循環(huán)限制次數(shù)，哪怕uri包含web/目錄了，也會(huì)繼續(xù)重定向/web/web/$1

錯(cuò)誤寫(xiě)法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后不會(huì)導(dǎo)致循環(huán)，但如果uri中包含web/目錄的情況下也會(huì)被重定向一次，重定向后的uri就是web/web/$1

rewrite應(yīng)用實(shí)例

1.域名跳轉(zhuǎn)（域名重定向）

單個(gè)域名的情況：



server{

    listen 80;

    server_name www.test.com;

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

}

1

2

3

4

5

多個(gè)域名的情況：



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跳轉(zhuǎn)https

server{

    listen 80;

    server_name www.test.com;

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

}

1

2

3

4

5

3.跳轉(zhuǎn)二級(jí)目錄

server{

    listen 80;

    server_name bbs.test.com;

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

}

1

2

3

4

5

4.動(dòng)靜態(tài)請(qǐng)求分離

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

假設(shè)www.test.com的服務(wù)器在國(guó)外，訪問(wèn)速度較慢，img.test.com的服務(wù)器在國(guó)內(nèi)，訪問(wèn)速度正常，可以將訪問(wèn)www.test.com靜態(tài)文件的請(qǐng)求重定向到img.test.com，提高文件返回速度

第二種寫(xiě)法：



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

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

http_referer表示從哪兒點(diǎn)擊進(jìn)網(wǎng)站的，比如從百度搜索引擎訪問(wèn)的

valid_referers：白名單

invalid_referer：無(wú)效的（未在白名單中定義的）

none：允許referer為空（也就是允許直接訪問(wèn)，未從其他站點(diǎn)跳轉(zhuǎn)的請(qǐng)求）

blocked：允許來(lái)源地址不含http/https



6.偽靜態(tài)（將靜態(tài)頁(yè)面重寫(xiě)為動(dòng)態(tài)）

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的偽靜態(tài)配置

7.多個(gè)if并用

location /{

    set $a 0;

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

    {

        set $a "${a}1"; #uri不以/abc開(kāi)頭時(shí)，$a的值變?yōu)?1

    }

    if ($http_user_agent ~ 'ie6|firefox')

    {

       set $a "${a}2"; #瀏覽器標(biāo)識(shí)包含ie6或者Firefox時(shí)，$a的值變?yōu)?12

    }

    if ($a = "012") #當(dāng)滿足前兩個(gè)if判斷時(shí)，重寫(xiě)url

    {

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

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

nginx配置文件語(yǔ)法不支持if嵌套，需要通過(guò)多個(gè)if并用判斷時(shí)，使用標(biāo)識(shí)變量值的方式處理

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

（按發(fā)言順序）

文章來(lái)源：UI中國(guó)

使用docbox定制API文檔

什么是docbox

docbox的安裝

克隆項(xiàng)目

部署方式

docbox的編寫(xiě)

定制logo及UI

更換代碼背景色

插入自己的logo

三列改為雙列

其他定制UI



在公司實(shí)習(xí)了一個(gè)月，由于業(yè)務(wù)需要，我花了大概一周時(shí)間對(duì)docbox的安裝，編寫(xiě)，定制化等進(jìn)行了詳細(xì)的研究，下面給大家分享一下我的總結(jié)

什么是docbox

Docbox是一個(gè)開(kāi)源的REST API文檔系統(tǒng)。它采用結(jié)構(gòu)化的Markdown文件，并生成帶有導(dǎo)航，固定鏈接的兩列布局。下面是官方example圖片：









docbox的安裝

克隆項(xiàng)目

直接去官網(wǎng)https://github.com/tmcw/docbox，然后克隆即可。



部署方式

在使用npm命令前需要下載Node.js，npm會(huì)根據(jù)package.json配置文件中的依賴配置下載安裝



接著，在/content下放入.md文件，并使用 npm run build 命令，生成一個(gè)包含所需要的js代碼的bundle.js文件，同時(shí)創(chuàng)建一個(gè)新的index.html文件



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



docbox的編寫(xiě)

在/content下放入.md文件（markdown語(yǔ)法俺就不說(shuō)了哈……）

對(duì)/src/custom/content.js中添加需要引入的.md文件位置和以及標(biāo)題





注意： /src/custom/content.js中放入的是一級(jí)標(biāo)題、二級(jí)和三級(jí)標(biāo)題需要在.md文件中編寫(xiě)。





定制logo及UI

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

修改對(duì)應(yīng)標(biāo)簽的屬性即可，定制時(shí)修改生成的index.html是沒(méi)有用的，因?yàn)閕ndex.html里的標(biāo)簽是被動(dòng)態(tài)寫(xiě)死的。

更換代碼背景色

<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默認(rèn)情況下是顯示三列布局，但我們可以在app.js下進(jìn)行修改使之默認(rèn)為雙列布局。將下圖的1改為2即可切換雙列模式







其他定制UI

像下圖一樣，我們可以修改并填寫(xiě)代碼得到自己想要的頁(yè)面樣式，比如說(shuō)我在最上方加了一個(gè)固定位置的區(qū)域，然后可以在這個(gè)區(qū)域添加相應(yīng)的超鏈接等。







app.js里可以找到圖中對(duì)應(yīng)的標(biāo)簽和js代碼，docbox支持多種語(yǔ)言切換，我們?cè)谛枰牡胤郊尤胛覀兿胍尤氲臉?biāo)簽，并在/css文件夾中對(duì)相應(yīng)的css文件添加樣式就可以定制我們想要的UI啦?。?！



下面給大家列出一些用docbox定制API文檔的網(wǎng)站



Mapbox API文檔

Mapillary的API文檔和Tiles文檔

HYCON 8th

Wall

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。