關于柵格系統文章不少，但鮮有專門針對柵格系統在后臺設計中相關應用的介紹。本文拋磚引玉，希望引起更多同行的交流與討論

柵格系統的目的

柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本；柵格化提高了頁面布局的一致性跟復用性；避免了設計師與開發者在細節上的反復溝通確認，從而提升了整個設計開發流程的效率、并能幫助開發者實現較為理想的設計還原。

但實際應用中，由于對柵格系統理解的不充分，很多設計師在應用柵格系統的實踐中產生了各種問題，本來幫助設計的工具現在反而成了設計中需要解決的問題。結合我自己后臺設計的經驗，本篇文章跟大家聊聊柵格系統在后臺設計中如何應用。

建立柵格系統的方法與規則

1、第一步：確立柵格系統的原子單位（網格）

如圖，一個比較完整的柵格系統是由許多規格一致的小網格組成，這些網格輔助我們更規范的排版、布局。

后臺系統設計中，由于后臺頁面主要以Web形式呈現，而對于web，用戶已習慣通過鼠標滾輪或滾動條（scrollbar）來縱向瀏覽頁面內容，因此，在不考慮內容優先級的情況下，Web可以實現豎直方向的“無限”加載，即豎直方向可以無限延伸，因此基于Web的后臺頁面，它的柵格系統在水平方向的柵格可以不體現出來，我們在執行設計時只要在豎直方向保持規律的變化就可以了。標準的柵格系統簡化為適用于Web后臺的設計如下圖所示

如上圖，對于后臺設計來講，柵格系統是由欄目（Column）跟水槽（Gutter）交替分布形成的，欄目（Column）是接納網頁內容的容器，水槽（Gutter）用來調節相鄰兩個欄目間距，把控頁面留白；由于欄目跟水槽的寬度是以網格作為基本單位來增加或者減小，所以柵格化的第一步需要先定義好柵格的原子單位“網格”的大小。根據本人的設計實踐以及其它已有規范經驗，目前后臺柵格系統網格大小定義為8是最普適易用的。具體原因有以下幾點：

（1）目前主流桌面設備的屏幕分辨率在豎直與水平方向基本都可以被8整除，使用8作為最小原子足夠普適.

我們選取4、6、8、10、12為柵格的候選原子單位，然后用目前主流屏幕分辨率與其相除，判斷各個分辨率在豎直（Y）與水平 (X)方向能否被候選原子整除，統計結果如圖。

顯然，對于目前市場桌面設備屏幕而言，4是整除率最高的一個原子，接下來依次是8、10、6、12。但4作為基本原子實在過于小了，太小的步進單位將導致我們決策成本的增加，因為我們將元素間間距增加4px或者減小4px視覺感受到的差異并不明顯，這種情況下我們為了找到那個“合適、滿意”的間距，就需要反復調試，這就造成了時間上的浪費，尤其對于沒有經驗的新人，這點會更為突出。但這種調整并不合適，原因是后臺管理系統設計重點在于面向用戶使用的效率與邏輯，其次才是視覺呈現，使用柵格系統的目的之一也是想減少設計師在“細節”上的糾結，希望設計師站在更全局的角度看待設計，合理安排時間，因此我們舍棄4。在剩下的6、8、10、12四個單位中，8的整除率最高（80%），以8像素作為一個步進單位的變化，我們視覺上也是能感受到較為明顯的差異，因此選取整除率最高的8做為柵格系統的原子單位。

（2）以8為單位符合“偶數原則”。偶數原則可以在頁面縮放中的避免類似于0.5、0.75、1.25等次像素的出現，從而使頁面各類元素在大多數場景下都能有比較精致的細節表現

雖然對于后臺設計而言，通常設計師是直接在目標尺寸下進行設計，并在此基礎上標注、切圖給開發實現，并不存在像移動端那樣需要對各種尺寸、各種像素密度的設備進行適配的情況，但對于Web頁面來講，仍存在向上向下適配的可能，因而從頁面的兼容性、可擴展性及可維護性層面來講，我們設計師還是有必要考慮的更加長遠，遵循“偶數原則”可以上避免各種潛在的問題。

（3）開發工程師使用的前端開源組件庫比如Metronic、Antdesign等也是基于8的原子單位來設計，因此如果設計師也使用以8為基本單位的柵格系統，開發與設計師相互對接就會更加方便，開發實現頁面時也能更高品質的去還原我們設計師的稿件

2、第二步：建立基于原子單位的柵格系統

經過第一步討論，我們現已確定后臺設計的原子單位為8，而我們也知道柵格系統是由欄目（Column）跟水槽（Gutter）交替分布形成的，所以接下來我們要利用原子單位確定欄目跟水槽在具體的頁面中如何分布以及它們各自的寬度。

通常，在一套后臺設計系統中，水槽寬度會是幾個比較固定的數值（因為后臺系統的頁面相對于其它類型的Web頁面，表現的更加整齊、規律，所以留白的方式比較固定，加之后臺往往有大量的數據、內容需要呈現，所以要盡可能提高頁面利用率，可以留白的空間也比較有限）；而欄目寬度更加靈活，它可以根據頁面水平方向尺寸的改變而增大或減小以響應頁面的變化（遵循8n的變化規律，此處變化規律在下期文章《柵格化與響應式》里會詳細介紹）。

當我們做后臺設計的時候首先需要確定在什么樣的分辨率下做設計，也就是首先需要確定設計稿的尺寸，當設計稿尺寸確定后，便可建立基于該尺寸的柵格系統。假設頁面內容區域寬度為W，欄目個數為A，水槽個數為B，欄目（Column）寬度為C，水槽（Gutter）寬度為G，則W=A*C+B*G。柵格系統建立初期，由于我們并不確定之后會有什么樣的內容呈現我們的頁面上，所以為了讓柵格更加靈活、普適，我們先假定單個欄目與水槽的寬度是相同的，即C=8n（n=1、2、3、4...）=G，然后以此將頁面內容區域等分，形成初步的柵格，之后再按實際內容需要，按比例調整兩者寬度或者按比例對兩者進行組合，形成承載業務內容的盒子。目前有兩種比較主流的等分方式：12等分與24等分。

12等分的柵格系統在流行的前端開發開源工具庫Bootstrap與Foundation中廣泛使用，適用于業務信息分組較少，單個盒子內信息體積較大的中后臺頁面設計；

24等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計；相對12柵格系統，24柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。

柵格系統的應用

1、頁面布局與版式設計

（1）、了解承載業務內容的盒子模型（Box Model）

建立好柵格系統后，就可以根據自己的實際業務，在柵格系統上安排內容了。頁面上最終承載內容的其實是一個個“盒子（Box）”,這個盒子的高度由盒子要容納的內容與頁面版式設計決定，按8n規律變化；寬度則由欄目與水槽按比例組合得到。

在柵格系統上容納業務內容的容器我們把它稱之為盒子（Box），柵格系統上的盒子其實跟前端工程師寫頁面時用到的盒子是一致的。如圖所示，當我們瀏覽任何一個網頁時，右鍵>檢查元素（審查元素），然后在style菜單下就可以看到這個盒子結構了。其中Padding就是主體內容（Element）距離盒子外側的距離，我把它稱之為內邊距，（Element可以是一個按鈕，一段文本、一張圖片或者一個表格等；）而Margin就是相鄰兩個盒子間的距離，對應在后臺柵格系統中其實就是水槽的大小。了解完柵格系統的盒子模型之后，下一步我們需要根據具體業務內容來確定盒子的寬度，也就是如何利用柵格系統做實際內容的布局與版式設計

（2）、根據業務內容分配頁面比例，確定盒子寬度

以24柵格系統為例，一個24柵格系統可以根據業務需要被2等分、3等分、4等分、6等分、8等分、12等分，還可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不對稱分割，具體采用哪種比例的組合需要我們根據自己業務需求來定，我們此處所說的比例實際上就是盒子的寬度。

上圖展示了盒子在24柵格系統上的分布情況，圖中只列舉了部分比例，實際業務中，同一個頁面上使用一到兩組比例值的組合來布局是比較合適的（如下圖），組合形式過多頁面就會顯得瑣碎、雜亂，不利于閱讀和使用。因為盒子的高度根據內容來定，故下圖中沒有體現高度這一維度的變化規律。

當我們完成上圖規劃后，需要做的便是根據實際內容往每個盒子里安排內容，做視覺與交互的落地了。

2、元素對齊與間距設定

柵格系統大的層面可以幫助設計者更好的進行版式設計與內容布局，而小的方面可以輔助設計師規范頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講，這兩者同等重要，從執行層面來講，我們一般先做版式設計與布局，然后再填充內容、調整細節。

柵格系統輔助對齊的作用類似于各種設計軟件中的參考線，它能讓我們更直觀的安排、調整內容的位置及對齊方式，可以使內容變得規律、有序，方便用戶瀏覽閱讀，幫助用戶提高獲取信息的效率。

柵格系統對于元素間間距設定的幫助是直觀的，當我們定義了柵格原子單位為8時，這意味頁面上各元素間距的變化也應遵循8n的規律，一致的變化規律讓頁面富有節奏感跟韻律感，在提高頁面一致性的同時也減少了設計決策成本。我們知道，柵格系統中水槽與欄目的變化也遵循8n的變化規律，此處n為大于0的正整數，即n=1、2、3...；但是用于規范元素間距的8n，n可以是0.5、1.5這類包含二分之一8的情況，原因是實際工作中，我們面臨的情況是復雜的，這樣處理可以讓間距的設定適應一些特殊的場景，從而使其更靈活普適。

注意事項

1、水槽寬度的設定

確定好內容模塊比例后，我們會發現由于之前等分的緣故，此時水槽較寬，我們需要調整水槽寬度到一個合適的值。

水槽的寬度是8n,也就是水槽可以以8為基本單位去增加或減小。為了減少設計決策成本，我們會事先設定好一系列水槽寬度，并定義好每個寬度對應的使用場景，然后設計中根據每個場景使用對應數值就可以了。我定義了一組水槽的值是8、16、 24、32 、40，為了區分它們的使用場景我們依次為其命名為XS、SM、MD、LG、XL。根據實踐經驗，正常情況下，兩個盒子間距（水槽）的值為24（MD）時，視覺上是最為舒適。

柵格化工具推薦（插件請在附件中下載）

Ps柵格系統工具

1、PS自帶柵格系統設定：新建參考線版面（重點推薦）

Ps有個功能叫做“新建參考線版面”，打開這個面板后，在預設這里可以看到Ps已經預設了8列、12列、16列、24列的柵格系統，選擇對應列數就可以看到頁面上參考線的變化。預設中“裝訂線”的寬度即柵格系統中水槽的寬度。默認均為20px,我們可以根據之前討論的8的倍數原則，將其手動更改為24；

如果預設的柵格系統無法滿足我們工作需要，我們也可以自定義柵格系統，并能將柵格參數保存為預設，這樣就可以重復利用自定義的柵格系統了；柵格系統還可以選擇將其應用在當前畫板或者所有畫板，十分方便易用。由于是Ps自帶的參考線，所以它可以通過快捷鍵靈活的控制顯示或隱藏

2、利用Ps標注工具Assistor Ps 進行柵格系統的建立

Assistor Ps在之前主要是一款頁面標注工具，但是隨著藍湖等自動標注工具的流行，這個小軟件基本沒人用了，但我發現它設置參考線的功能還是很強大的，可以媲美大名鼎鼎的guideguid（這款插件目前對Ps cc 2017及以上版本貌似已經不支持，軟件本身安裝也挺麻煩），所以就介紹給大家。（安裝包在文末下載，Win&Mac，解壓后跟常規裝軟件一樣，正常安裝就行）。但是這個插件由于很多數值都要自己算，實際上沒有Ps自帶的新建參考線面板的功能好用。算是一個工具的補充吧

Sketch柵格系統工具

1、Sketch自帶柵格系統設定：Layout Settings

Sketch端利用sketch自帶的柵格工具Layout Settings即可完成柵格系統的設置，由于sketch的柵格工具是自帶的，與Ps類似，它也可以通過快捷鍵快速顯示或隱藏，點擊左下角“Make Default”還可以將自定義的柵格系統設置為默認的柵格系統，方便以后重復調用，但sketch貌似只能儲存一組柵格系統的數值，而Ps可以儲存多組。

2、Sketch柵格系統插件：BootstrapGrid-maste

BootstrapGrid是一個專門用于建立柵格系統的插件（插件在文末附件中下載），插件可以對柵格系統的基本數據做個性化的設定，可以對多個形狀同時建立柵格系統，還可以通過快捷鍵快速調用。具體用法：先選中要建立柵格的畫板或者畫板里的形狀（可以多選），然后：插件>Bootstrap Grid（Plugins -> Bootstrap Grid）

柵格系統參數設計

單個形狀（畫板）建立柵格系統動圖演示

多個形狀（畫板）建立柵格系統動圖演示

跨平臺的web端柵格工具 http://grid.guide/

GridGuide 最大優點是可以針對一種柵格系統生成4組不同水槽寬度的柵格化方案，能比較直觀的比較不同水槽寬度下各個柵格系統的視覺感受。使用方法：在右上角設置好頁面寬度以及欄目數量，頁面內就會自動生成可以下載為png圖片的柵格。

QAQ(常見問題解答）

（1）當柵格系統中奇數不可避免的出現時，如何處理?

理想狀態下，我們應該調整內容區域的大小，使其盡可能成為可以被8整除的尺寸，但實際應用中，有時會出現無法整除的情況?；趯凶幽Ｐ偷睦斫?，此時我們保持padding、margin的值不變，改變盒子的大小去適應奇數的頁面（元素）即可,因為一致性跟效率才是柵格化要達成的首要目的，偶爾有一些不“完美”的尺寸是完全允許的，因為用戶在實際使用頁面時，并不能看到我們使用的柵格系統，也很難注意到那幾像素的變化，他們能感受到的是頁面整體呈現出來的節奏與韻律感，以及持續、一致的視覺語言帶給他們的嚴謹、可靠的心里感受。

（2）柵格系統必須以8作為原子單位？使用其它數值是否可以

首先需要指出的是使用其它數值當然也可以，柵格系統只是手段，提升設計效率、減少溝通成本、提高頁面一致性才是最終目的，所以如果你所在團隊有其它柵格化習慣，且一直以來效果良好，那么繼續使用它也是沒問題的。但是對于設計新人來講，如果能理解前人的經驗，并能較好的運用，對于他們來講，是會少一些彎路，更好的完成設計工作。

（3）柵格系統建立初期是否必須使欄目寬度與水槽寬相等，并等分內容區域？

建立柵格系統時并不是必須使欄目寬度與水槽寬相等，并等分內容區域。本篇文章介紹柵格系統時采用這種處理方式是為了讓大家更好的理解柵格系統建立的原理與過程，事實上，欄目的寬度在實際應用中往往大于水槽寬度，我們通常會先計劃好水槽的寬度、內容區域總寬度與欄目的數量，這時候欄目的寬度通過計算可得到，對于響應式頁面，欄目的寬度可以是百分比而不是具體的數值（關于響應式的內容下期文章跟大家分享）。

轉自UI中國-BYMD

<view class="gallery">

    <view class="item" wx:for="{{images}}" wx:key="">

        <image src="{{item}}" data-src="{{item}}" bindtap="previewImage" mode="aspectFill" />



        <!-- 刪除按鈕 -->

        <view class="delete" bindtap="delete" data-index="{{index}}">X</view>

    </view>

    <view class="item" bindtap="chooseImage">

        <view class='addIcon'>+</view>

    </view>

</view>

<button type="primary" bindtap="submit">提交</button>

————————————————

/* pages/index/index.wxss */
/*畫廊*/
.gallery {    
  width:630rpx;
  margin: 0 auto;
  display: flex;    
  justify-content: flex-start;    
  flex-wrap: wrap;
}
/*每張圖片所占容器*/
.item {    
  position: relative;    
  margin:10rpx 5rpx;
  width: 200rpx;
  height: 200rpx;
}
.item image{
  width: 100%;
  height: 100%;
}
/*add按鈕*/
.item .addIcon{
  position:relative;
  width:200rpx;
  height:200rpx;
  text-align:center;
  line-height:200rpx;
  font-size:80rpx;
  background: #f2f2f2;
  color: #555;
}
/*刪除按鈕*/
.delete {    
  position:absolute;
  right:0;
  top:0;
  /* background:#ccc; */
  opacity:1;
  height: 36rpx;
  font-size:22rpx;
  font-weight:700;
  padding:0 8rpx 0 10rpx;
}
————————————————


var that;
Page({
  data: {
    images: [],
    uploadedImages: [],
    //imageWidth: getApp().screenWidth / 4 - 10
  },
  onLoad: function (options) {
    that = this; var objectId = options.objectId; console.log(objectId);
  },
  chooseImage: function () {
    // 選擇圖片
    wx.chooseImage({
      count: 3, // 默認9
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);
        that.setData({
          images: that.data.images.concat(tempFilePaths)
        });
      }
    })
  },
  // 圖片預覽
  previewImage: function (e) {
    //console.log(this.data.images);
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.images
    })
  },
  // submit: function () {        
  //   // 提交圖片，事先遍歷圖集數組
  //   that.data.images.forEach(function (tempFilePath) {
  //     new AV.File('file-name', {
  //       blob: {
  //         uri: tempFilePath,
  //       },
  //     }).save().then(                
  //       // file => console.log(file.url())
  //     function (file) {                    
  //       // 先讀取
  //       var uploadedImages = that.data.uploadedImages;
  //       uploadedImages.push(file.url());                    
  //       // 再寫入
  //       that.setData({
  //         uploadedImages: uploadedImages
  //       }); console.log(uploadedImages);
  //     }
  //     ).catch(console.error);
  //   });
  //   wx.showToast({
  //     title: '評價成功', success: function () {
  //       wx.navigateBack();
  //     }
  //   });
  // }, 
  delete: function (e) {
    var index = e.currentTarget.dataset.index; var images = that.data.images;
    images.splice(index, 1);
    that.setData({
      images: images
    });
  }
})
————————————————

<button data-name="shareBtn" open-type="share" plain="true">轉發</button>

添加plain=”true”后button的邊框樣式可自定義 ↓ ↓

button[plain]{ border:0 } 

 //轉發
  onShareAppMessage: function (options) {
    　　var that = this;
    　　// 設置菜單中的轉發按鈕觸發轉發事件時的轉發內容
    　　var shareObj = {
      　　　　title: "這是一個標題！",        // 默認是小程序的名稱(可以寫slogan等)
      　　　　//path: '/page/index/index/user?id=123',        // 默認是當前頁面，必須是以‘/’開頭的完整路徑
          imageUrl: '../../img/xiaochengxu-share.jpg',     //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑，支持PNG及JPG，不傳入 imageUrl 則使用默認截圖。顯示圖片長寬比是 5:4
      　　　　success: function (res) {
        　　　　　　// 轉發成功之后的回調
        　　　　　　if (res.errMsg == 'shareAppMessage:ok') {
        　　　　　　}
      　　　　},
      　　　　fail: function (res) {
        　　　　　　// 轉發失敗之后的回調
        　　　　　　if (res.errMsg == 'shareAppMessage:fail cancel') {
          　　　　　　　　// 用戶取消轉發
                       console.log("用戶取消轉發");
        　　　　　　} else if (res.errMsg == 'shareAppMessage:fail') {
          　　　　　　　　// 轉發失敗，其中 detail message 為詳細失敗信息
        　　　　　　}
      　　　　},
            complete: function(){
        　　　　　　// 轉發結束之后的回調（轉發成不成功都會執行）
      　　　　},
  　　};
  　　// 來自頁面內的按鈕的轉發
  　　if(options.from == 'button') {
    　　　　var eData = options.target.dataset;
    　　　　console.log(eData.name);     // shareBtn
    　　　　// 此處可以修改 shareObj 中的內容
    　　　　//shareObj.path = '/pages/btnname/btnname?btn_name=' + eData.name;
  　　}
// 返回shareObj
return shareObj;
————————————————

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">

  <block wx:for="{{imgUrls}}" wx:key="unique">

    <swiper-item>

      <image src="{{item}}" class="img" bindtap="swipclick" />

    </swiper-item>

  </block>

</swiper>

————————————————

/* swiper {
    height: 421.5rpx;
} */
swiper-item image {
    width: 100%;
    height: 100%;
}
.swiper-container{
  width: 100%;
  position: relative;
}
.swiper-container .swiper{
  height: 300rpx;
}
.swiper-container .swiper .img{
  width: 100%;
  height: 100%;
}
————————————————


const app = getApp()
Page({
  data: {
    swiperCurrent: 0,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,//自動切換時間間隔
    duration: 800,//滑動動畫時長
    circular: true,//是否采用銜接滑動
    imgUrls: [
      '../../img/index/1.jpeg',
      '../../img/index/2.jpeg',
      '../../img/index/3.jpeg'
    ]
  },
  //輪播圖的切換事件
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
    //console.log(e.detail.current);
  },
  //點擊指示點切換
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  },
  //點擊圖片觸發事件
  swipclick: function (e) {
    console.log(this.data.swiperCurrent);
    wx.switchTab({
      url: this.data.links[this.data.swiperCurrent]
    })
  },
})
————————————————

前提：真機和PC端在同一個局域網內。

1、安裝nodejs環境 （node -v 查看版本號）



2、在所在的項目下輸入命令：npm install anywhere -g



3、直接輸入命令：anywhere，這里瀏覽器自動打開所有項目的根目錄，點擊就可以看到，同一網段下，然后手機直接預覽這個地址就可以

————————————————

<view class="gallery">

  <view class='tipTitle'>

    快去上傳自己的照片吧

  </view>

  <view class='item-ot'>

    <view class="item">

      <!-- 添加按鈕 -->

      <view class="addIcon" bindtap="chooseImage" wx:if="{{imgBoolean}}">

          <view class=''>+</view>

      </view>

      <!-- 上傳的圖 -->

      <view class='itemImg' >

        <image src="{{item}}" data-src="{{item}}" bindtap="previewImage"  mode="aspectFill" />

        <!-- 刪除按鈕 -->

        <view class="delete" bindtap="deleteImg" data-index="{{index}}">X</view>

      </view>

      <view class='boxStyle'></view>

    </view>

    <view class='itemTxt'>正面照</view>

  </view>

  <view class='uploadFinish'>

    <a class="uploadFinishBtn" href="javasctipt:;"  bindtap="submit">提  交</a>

  </view> 

</view>

/*畫廊*/
.gallery {    
  width:100%;
  margin: 0 auto;
  display: flex;    
  justify-content: flex-start;    
  flex-wrap: wrap;
  background: #fffaf0;
}
/*每張圖片所占容器*/
.item-ot{
  margin:0 auto;
  width: 100%;
  height: 100%;
}
.item {    
  position:relative;
  margin:0 auto;
  width:370rpx;
  height:490rpx;
  background:#eee;
  border:2rpx solid #f9c4c2;
  /* overflow:hidden; */
}
.itemImg{
  position: absolute;
  left: 0;
  top:0; 
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index:1;
}
.itemImg image{
  width: 100%;
  height: 100%;
}
/*add按鈕*/
 .addIcon{
   position:absolute;
  left: 0;
  top: 0; 
  width: 100%;
  height: 100%;
  text-align:center;
  line-height:490rpx;
  font-size:80rpx;
  background: #fff;
  color: #999;
  z-index:2;
}
/*刪除按鈕*/
.delete {    
  position:absolute;
  right:0;
  top:0;
  /* background:#ccc; */
  opacity:1;
  height: 36rpx;
  font-size:22rpx;
  font-weight:700;
  padding:0 8rpx 0 10rpx;
  color: #999;
}
.itemTxt{
  text-align: center;
  font-size: 30rpx;
  color: #999;
  margin-top: 50rpx;
  margin-bottom:  70rpx;
  font-weight: 700;
}
.uploadFinish{
  width: 100%;
  height: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.uploadFinishBtn{
  background: #ff6666;
  color: #fff;
  display: block;
  width: 100%;
  padding: 26rpx 0;
  text-align: center;
  font-size: 36rpx;
  border-radius: 10rpx;
  margin-bottom: 40rpx;
}
.tipTitle{
  text-align: center;
  font-size: 30rpx;
  color: #f6a29d;
  font-weight: 700;
  width: 100%;
  margin: 50rpx 0;
}
.boxStyle{
  width:300rpx;
  height:100rpx;
  position:absolute;
  bottom:-1rpx;
  border-radius:50%;
  box-shadow:0rpx 10rpx 100rpx #fddbd9;
  margin-left:35rpx;
}

Page({
  data: {
    uploadedImages: [],
    imgBoolean: true,
  },
  onLoad: function (options) {
    var that = this;
  },
  chooseImage: function () {
    var that = this;
    // 選擇圖片
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          item: tempFilePaths[0],
          imgBoolean: false
        });
      }
    })
  },
  // 圖片預覽
  previewImage: function (e) {
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: [current]
    })
    console.log("這是1" + current);
  },
  //刪除圖片
  deleteImg: function (e) {
    var that = this;
    var images = that.data.uploadedImages;
    that.setData({
      uploadedImages: images,
      imgBoolean: true
    });
  },
  // submit: function () {        

  // }, 
})

當我們回顧近20年的手機發展歷程，可以發現2007年iPhone的橫空出世真正改變了手機這個行業。喬布斯在發布會上展示初代iPhone給行業帶來的沖擊力是前所未有的，對人機交互領域也帶來了了深遠的影響。

信息限制

操作與反饋

總結

任何一個新事物的出現，人們總是傾向于從現有的知識體系中尋找類似的事物進行描述與概括，以尋求情感上的歸屬和理性上的辨識。但是過于超前的創新，往往是現有的知識體系無法解釋的。無法解釋，自然無法接受。

文章來源：站酷

踏破鐵鞋無覓處，得來全不費功夫。微信付費閱讀一出，對優質內容創作者來說，無疑從天而降了一條增收渠道。微信為什么在要此時推出付費功能？在付費閱讀最終推出之前，微信做了哪些準備？如何打造一個成功的平臺？

擇時：為什么馬化騰等了三年

微信公眾號付費最早的新聞出現在2017年2月14日，馬化騰在朋友圈回復評論人洪波說，正在加快微信公眾號付費訂閱功能。

轉眼三年過去，付費閱讀才姍姍來遲。這是一個極佳的根據內外環境來演進產品的案例。

首先我們來看微信付費閱讀的要求，前兩條“公眾號注冊超過3個月”和“3個月內無嚴重違規紀錄”，都是對使用權益的基本要求；最后一條“已發表至少3篇原創文章”則是典型用戶的關鍵特征，從此項出發，可以推導出產品功能商業化演進的關鍵路徑點。

內部：產品演進過程

通過商業化關鍵特征“原創性”，找到了關鍵演進路徑的起點：原創。

下面是圍繞原創的各項關鍵事件時間節點：

2017年11月22日正式發布原創功能：

公眾號文章可以使用“原創聲明”和“留言”功能。背后依托的是騰訊在文章重復率檢查的技術。一篇上萬字的文章，點擊“原創聲明”時，幾乎無感知收到檢查的結果。原創聲明的擴展功能包括：打賞、轉載、白名單。

2018年6月6日正式恢復文章打賞功能：

微信最早在2016年就推出了文章贊賞功能，此項功能一波三折，中間經歷了與Apple AppStore平臺的分成博弈，還有作者的所得是否該納個稅的社會輿論；最后在2018年6月6日正式恢復：贊賞的錢直接給到作者。

微信與Apple是競合策略（Coopetition）運用。微信作為Apple App，打賞功能根據AppStore規則應由Apple分羹。而作為擁有9億用戶的微信，又為Apple創造了一個殺手級的App——你能想象同一個打賞，安卓手機上的微信能讓創作者收入更高嗎？那Apple用戶的高價值如何體現？數字化產品中競合策略的發生，取決者兩者既可集成（Integration）又可分離（Separation），并且需要進行商業上的決策。

2019年10月29日原創文章規模達到1.1億：在北京由騰訊主辦的《互聯網社交平臺知識產權保護論壇》上，騰訊宣布，原創聲明標識的文章規模已超過1億。其中騰訊的原創保護貢獻在累計刪除15萬的涉嫌侵權文章、6萬品牌侵權信息，每天主動攔截假冒注冊行為11,000次。

產品內部演進總結：

原創產品的內部演進，經歷了關鍵技術突破、商業規則變革和規模化三個關鍵節點。至此產品市場已經成熟。

市場趨勢發展

知識付費市場是由視頻、音樂用戶付費習慣的不斷成長而帶動的。艾瑞《2018年中國在線知識付費市場研究報告》預測，到2020年，中國知識付費市場規模將達到235.1億人民幣。

艾瑞這份報告偏差在于：價值鏈分析只將微信視為了渠道，在2018年微信已經擁有原創+付費兩大基本要素之后，艾瑞也未在競爭格局將微信視為潛在進入者。

2019年知識付費“風口”過去之時，對行業中依然處于中小規模，無法站穩用戶基礎的創業公司而言，就將成為即將摔下來的豬，而此時市場卻初步成熟，正是巨頭進入的時機了。

市場趨勢發展總結：

初期市場進入容易，因參與者少，供給遠小于需求時，初創公司容易獲得用戶，面對競爭少。但隨著用戶使用、購買習慣的養成，越來越多的競爭者進入，達到供需平衡時刻（即市場均衡）時，新進入者獲客、現有的供給方留客將越來越困難。如果此時市場規模足夠大，達到數百億甚至千億級別，它將成為巨頭們的主戰場。

平臺：價值鏈的顛覆者

艾瑞報告中知識付費產業價值鏈定義了三類參與者，內容提供方和知識付費平臺類又共細分為六個角色。而微信付費閱讀將整個產業價值鏈供應端重塑為了兩個角色：平臺和原創作者。這一重塑極大地簡化了價值創造與交付過程，也提升了價值獲取的份額。對整個產業來說，是一次有效的增值。

在知識付費產業還存在一個潛在進入者，就是工具應用，比如阿里巴巴推出的語雀知識管理平臺，就提供了非常好用的文章編寫和管理工具。但平臺能夠快速替換掉獨立知識付費平臺、頭部知識內容商以及KOL、經紀/孵化公司，是因為平臺的獨特技術（核武器）：生成性。

生成性 Generativity——平臺具備創造新產品的技術能力（Technology supports the creation of novel products.）

正是生成性，使平臺成為了數字化時代最高生產力的代表。僅僅使用微信付費閱讀功能，作者就可以直接創造出讀者可購買的產品，這就是微信作為平臺的核心顛覆能力。而頭部知識內容商的簽約作者、KOL，均可以通過入駐微信公眾號以及運營微信群，完成整個商業模型的閉環。

總結

打造一個平臺，需要根據外部市場趨勢，不斷地進行內部產品演進和內外商業生態治理。

但微信付費閱讀的成功遞進，不僅僅是技術或簡單商業化（變現）的轉變，而是抓住了知識付費產業的第一性原理：知識產權保護。

根據科斯定理，在一個產權清晰的市場中，它的配置將會是最有效的。抓住知識產權生態的微信付費，有可能實現內容創作者與閱讀者之間更有效的資源配置。

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