作者通過(guò)以進(jìn)度條的設(shè)計(jì)深入淺出的講解關(guān)于FUI的設(shè)計(jì)思路。雖然FUI設(shè)計(jì)看起來(lái)很復(fù)雜，只要找準(zhǔn)規(guī)律，從一些作品中總結(jié)分析細(xì)節(jié)，再運(yùn)用到我們的設(shè)計(jì)中。想要了解的小伙伴可以嘗試一下。

前言

看到上期小伙伴想了解一下 FUI 的設(shè)計(jì)教程，所以這次再次和大家聊一下關(guān)于 FUI 的設(shè)計(jì)風(fēng)格，我們以“進(jìn)度條”的設(shè)計(jì)教程為例，深入淺出的聊一下關(guān)于 FUI 的設(shè)計(jì)思路，因?yàn)橹饕O(shè)計(jì)思路的延展，所以不會(huì)出現(xiàn)具體的數(shù)據(jù)參數(shù)，小伙伴們要諒解啊。

目錄

1.風(fēng)格介紹

2.設(shè)計(jì)思路

3.總結(jié)

1.風(fēng)格介紹

關(guān)于 FUI 的定義，閱讀過(guò)我上一篇文章的小伙伴可能對(duì) FUI 的定義有了一個(gè)較為清晰的定義，即 FUI 是：虛構(gòu)的、未來(lái)的、幻想的用戶界面。

2.機(jī)甲風(fēng)格

機(jī)甲風(fēng)格相對(duì)于軍事風(fēng)格的最大特點(diǎn)就是：“具有一定的裝飾圖形元素，或多或少。”機(jī)甲風(fēng)格最大的特點(diǎn)便是具有機(jī)械或者機(jī)甲風(fēng)格的裝飾元素，其中多為異形元素。其靈感來(lái)源于工業(yè)設(shè)計(jì)，從機(jī)械和機(jī)甲的工業(yè)設(shè)計(jì)語(yǔ)言中提取圖形元素，在運(yùn)用到界面設(shè)計(jì)上。如下圖，異形的機(jī)甲風(fēng)格讓機(jī)器人的頭部設(shè)計(jì)顯得更加統(tǒng)一，如果換成當(dāng)前流行的扁平化設(shè)計(jì)，可能就顯得有點(diǎn)奇怪了。

機(jī)甲風(fēng)格的發(fā)展歸功于科幻題材故事的發(fā)展，為人們打開(kāi)腦洞，暢想更多的可能性。在設(shè)計(jì)上激發(fā)了 FUI 的誕生，無(wú)論是賽博朋克、廢土題材、還是漫威、DC宇宙中的科幻影視作品中我們都能看到機(jī)甲風(fēng)格的界面設(shè)計(jì)。

我們可以放入界面當(dāng)中感受一下視覺(jué)效果：

設(shè)計(jì)樣式 – 機(jī)甲風(fēng)格

我們?cè)賮?lái)進(jìn)階一下，設(shè)計(jì)一個(gè)機(jī)甲元素的的進(jìn)度條。

機(jī)甲風(fēng)格看似裝飾圖形復(fù)雜，設(shè)計(jì)難度復(fù)雜，但其實(shí)我們只需要掌握好 – “提煉元素”這項(xiàng)技能就能完美應(yīng)對(duì)機(jī)甲風(fēng)格的設(shè)計(jì)。

我們?cè)倩仡檶?duì)創(chuàng)意設(shè)計(jì)的定義：是把再簡(jiǎn)單不過(guò)的東西或想法不斷延伸給予的另一種表現(xiàn)方式。這里我們可以理解為將機(jī)甲元素進(jìn)行提煉總結(jié)，延伸到彈框設(shè)計(jì)當(dāng)中。例如下圖，漂亮的小姐姐一秒鐘變機(jī)械美女，就是通過(guò)對(duì)機(jī)械元素延展到模特身上。

第一步，照一張你喜歡的不錯(cuò)的參考，這里你可以找成熟的界面設(shè)計(jì)作品，也可以找一張不錯(cuò)的關(guān)于機(jī)甲風(fēng)格的參考，以便于自己進(jìn)行元素提取。這里我們以大家熟悉的高達(dá)為例：

我們從中提取我們需要的圖形，如下圖：

最后我們我們需要仔細(xì)思考將圖形進(jìn)行組合，多嘗試幾次他們的組合方式。這里我對(duì)提取的元素進(jìn)行了二次加工，將圖形一和圖形四進(jìn)行了結(jié)合，打破固有的組合規(guī)律，讓圖形看起來(lái)更加生動(dòng)。

最后我們可以放入界面當(dāng)中感受一下視覺(jué)效果：

轉(zhuǎn)載自簡(jiǎn)書(shū)

作者：極創(chuàng)設(shè)計(jì)

鏈接：https://www.jianshu.com/p/77665c771153

來(lái)源：簡(jiǎn)書(shū)

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)( paul-jarrel.com )是一家專(zhuān)注而深入的界面設(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ù)

<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 */
/*畫(huà)廊*/
.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, // 默認(rèn)9
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths);
        that.setData({
          images: that.data.images.concat(tempFilePaths)
        });
      }
    })
  },
  // 圖片預(yù)覽
  previewImage: function (e) {
    //console.log(this.data.images);
    var current = e.target.dataset.src
    wx.previewImage({
      current: current,
      urls: this.data.images
    })
  },
  // submit: function () {        
  //   // 提交圖片，事先遍歷圖集數(shù)組
  //   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());                    
  //       // 再寫(xiě)入
  //       that.setData({
  //         uploadedImages: uploadedImages
  //       }); console.log(uploadedImages);
  //     }
  //     ).catch(console.error);
  //   });
  //   wx.showToast({
  //     title: '評(píng)價(jià)成功', 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">轉(zhuǎn)發(fā)</button>

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

button[plain]{ border:0 } 

 //轉(zhuǎn)發(fā)
  onShareAppMessage: function (options) {
    　　var that = this;
    　　// 設(shè)置菜單中的轉(zhuǎn)發(fā)按鈕觸發(fā)轉(zhuǎn)發(fā)事件時(shí)的轉(zhuǎn)發(fā)內(nèi)容
    　　var shareObj = {
      　　　　title: "這是一個(gè)標(biāo)題！",        // 默認(rèn)是小程序的名稱(可以寫(xiě)slogan等)
      　　　　//path: '/page/index/index/user?id=123',        // 默認(rèn)是當(dāng)前頁(yè)面，必須是以‘/’開(kāi)頭的完整路徑
          imageUrl: '../../img/xiaochengxu-share.jpg',     //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑，支持PNG及JPG，不傳入 imageUrl 則使用默認(rèn)截圖。顯示圖片長(zhǎng)寬比是 5:4
      　　　　success: function (res) {
        　　　　　　// 轉(zhuǎn)發(fā)成功之后的回調(diào)
        　　　　　　if (res.errMsg == 'shareAppMessage:ok') {
        　　　　　　}
      　　　　},
      　　　　fail: function (res) {
        　　　　　　// 轉(zhuǎn)發(fā)失敗之后的回調(diào)
        　　　　　　if (res.errMsg == 'shareAppMessage:fail cancel') {
          　　　　　　　　// 用戶取消轉(zhuǎn)發(fā)
                       console.log("用戶取消轉(zhuǎn)發(fā)");
        　　　　　　} else if (res.errMsg == 'shareAppMessage:fail') {
          　　　　　　　　// 轉(zhuǎn)發(fā)失敗，其中 detail message 為詳細(xì)失敗信息
        　　　　　　}
      　　　　},
            complete: function(){
        　　　　　　// 轉(zhuǎn)發(fā)結(jié)束之后的回調(diào)（轉(zhuǎn)發(fā)成不成功都會(huì)執(zhí)行）
      　　　　},
  　　};
  　　// 來(lái)自頁(yè)面內(nèi)的按鈕的轉(zhuǎn)發(fā)
  　　if(options.from == 'button') {
    　　　　var eData = options.target.dataset;
    　　　　console.log(eData.name);     // shareBtn
    　　　　// 此處可以修改 shareObj 中的內(nèi)容
    　　　　//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,//自動(dòng)切換時(shí)間間隔
    duration: 800,//滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)
    circular: true,//是否采用銜接滑動(dòng)
    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);
  },
  //點(diǎn)擊指示點(diǎn)切換
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  },
  //點(diǎn)擊圖片觸發(fā)事件
  swipclick: function (e) {
    console.log(this.data.swiperCurrent);
    wx.switchTab({
      url: this.data.links[this.data.swiperCurrent]
    })
  },
})
————————————————

前提：真機(jī)和PC端在同一個(gè)局域網(wǎng)內(nèi)。

1、安裝nodejs環(huán)境 （node -v 查看版本號(hào)）



2、在所在的項(xiàng)目下輸入命令：npm install anywhere -g



3、直接輸入命令：anywhere，這里瀏覽器自動(dòng)打開(kāi)所有項(xiàng)目的根目錄，點(diǎn)擊就可以看到，同一網(wǎng)段下，然后手機(jī)直接預(yù)覽這個(gè)地址就可以

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

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

/*畫(huà)廊*/
.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, // 默認(rèn)9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
      sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          item: tempFilePaths[0],
          imgBoolean: false
        });
      }
    })
  },
  // 圖片預(yù)覽
  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 () {        

  // }, 
})

VeeValidator

語(yǔ)言設(shè)置

校驗(yàn)消息默認(rèn)是英文的，定義中文或其他語(yǔ)言的錯(cuò)誤提示消息

    


        


            


            

        

        


            

                import VeeValidate from 'vee-validate';
            

        

    

    


        


            


            

        

        


            

                import Vue from 'vue'
            

        

    

    


        


            


            

        

        


            

                Vue.use(VeeValidate)
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var dict = {
            

        

    

    


        


            


            

        

        


            

                zh_CN: {
            

        

    

    


        


            


            

        

        


            

                messages: {
            

        

    

    


        


            


            

        

        


            

                required: function(field){
            

        

    

    


        


            


            

        

        


            

                return field + '不能為空！';
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                between: function(field){
            

        

    

    


        


            


            

        

        


            

                return field + '輸入不符合設(shè)定規(guī)則！';
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                min : function (field,leng) {
            

        

    

    


        


            


            

        

        


            

                return field + '長(zhǎng)度不能小于'+leng+'位';
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
            

        

    

校驗(yàn)的時(shí)候需要設(shè)置語(yǔ)言

this.$validator.localize('zh_CN');

錯(cuò)誤消息顯示

顯示指定字段的第一個(gè)錯(cuò)誤

this.$validator.first('fieldname')

顯示所有字段的第一個(gè)錯(cuò)誤消息

this.$validator.errors.all()

Mock.js

配置

路由攔截配置不需要修改之前的代碼,匹配的url請(qǐng)求會(huì)直接通過(guò)mock而不是請(qǐng)求服務(wù)器

    


        


            


            

        

        


            

                const handler = req => {
            

        

    

    


        


            


            

        

        


            

                return {mock數(shù)據(jù)};
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                Mock.mock('url攔截規(guī)則,正則表達(dá)式',handler)
            

        

    

配置延遲時(shí)間

模擬服務(wù)器請(qǐng)求的異步特性

    


        


            


            

        

        


            

                Mock.setup({
            

        

    

    


        


            


            

        

        


            

                timeout:1000
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

Vuex

模塊化

多人協(xié)作，或者中大型的項(xiàng)目需要把store分為模塊

    


        


            


            

        

        


            

                const a = {
            

        

    

    


        


            


            

        

        


            

                 state : {foo:1},
            

        

    

    


        


            


            

        

        


            

                mutations : {hello(state)=> {}}，
            

        

    

    


        


            


            

        

        


            

                modules : {
            

        

    

    


        


            


            

        

        


            

                 ...嵌套
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                const b = {}
            

        

    

    


        


            


            

        

        


            

                const store = {
            

        

    

    


        


            


            

        

        


            

                 state : {},
            

        

    

    


        


            


            

        

        


            

                mutations : {},
            

        

    

    


        


            


            

        

        


            

                actions : {},
            

        

    

    


        


            


            

        

        


            

                modules : {
            

        

    

    


        


            


            

        

        


            

                 module_name_a:a,
            

        

    

    


        


            


            

        

        


            

                 module_name_b:b
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

在調(diào)用的時(shí)候，state 有命名空間的，而mutation和actions都與父模塊共用同樣的命名空間所以不能定義與父模塊同名的mutation 或 action

獲取模塊的state

 this.$store.state.module_name_a.foo

調(diào)用模塊的mutation

this.$store.commit('hello')

namespace

定義了namespace ,mutations 和 action 會(huì)帶上模塊的命名: module_name/muation

    


        


            


            

        

        


            

                const store = {
            

        

    

    


        


            


            

        

        


            

                modules : {
            

        

    

    


        


            


            

        

        


            

                namespace : true,
            

        

    

    


        


            


            

        

        


            

                a: {
            

        

    

    


        


            


            

        

        


            

                muations : {
            

        

    

    


        


            


            

        

        


            

                test(state) => {...}
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

這時(shí)候調(diào)模塊內(nèi)的mutation

this.$store.commit('a/test')

vuejs-datepicker

日期選擇控件

設(shè)置默認(rèn)值

 <datepicker v-model="mydate" </datepicker> 

日期格式化

<datepicker :format="'yyyy-MM-dd'"> </datepicker> 

語(yǔ)言選擇（默認(rèn)是英文）

導(dǎo)入語(yǔ)言資源文件，然后再設(shè)置:language

設(shè)置成中文