首頁

移動(dòng)端的導(dǎo)航設(shè)計(jì)模式

資深UI設(shè)計(jì)者

在《用戶體驗(yàn)的要素》一本書中，Jesse James Garrett 將用戶體驗(yàn)分為了五個(gè)層級，戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層。

其中在框架層里面有一個(gè)很重要的概念就是導(dǎo)航設(shè)計(jì)，作者對導(dǎo)航設(shè)計(jì)的定義是：元素的組合，允許用戶在信息架構(gòu)中穿行。

我覺得可以把導(dǎo)航設(shè)計(jì)理解為：我們從用戶的心智模型出發(fā)，結(jié)合業(yè)務(wù)目標(biāo)，對信息架構(gòu)的一個(gè)梳理，來幫助用戶完成目標(biāo)。

通過自己手機(jī)里幾十款 app，總結(jié)了以下六種導(dǎo)航設(shè)計(jì)模式，包括：標(biāo)簽導(dǎo)航，宮格導(dǎo)航，側(cè)邊導(dǎo)航，列表導(dǎo)航，菜單導(dǎo)航，輪播導(dǎo)航……

簡單介紹了它們的優(yōu)缺點(diǎn)，適用場景，以及一些衍生導(dǎo)航與相關(guān)案例……（不過導(dǎo)航設(shè)計(jì)一定是視產(chǎn)品和情況而定的，并沒有確定的依據(jù)與理論）

一、標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航分很多種，有底部標(biāo)簽導(dǎo)航，頂部標(biāo)簽導(dǎo)航，底部標(biāo)簽導(dǎo)航又可以衍生出舵式導(dǎo)航，頂部標(biāo)簽導(dǎo)航又可以分為靜態(tài)或者是動(dòng)態(tài)導(dǎo)航……

底部標(biāo)簽導(dǎo)航是最基本的導(dǎo)航，幾乎絕大部分 app 中都在用，tabbar 位于頁面最底部，一般3-5個(gè) tabbar，有文字+icon，也有純 icon 形式，但大部分是文字+icon 的形式，我想是減少用戶記憶負(fù)擔(dān)吧，如下：

而關(guān)于底部標(biāo)簽導(dǎo)航的優(yōu)點(diǎn)，缺點(diǎn)以及適用場景也簡單整理了：

我發(fā)現(xiàn)很多用戶發(fā)布或者生產(chǎn)內(nèi)容的 app 會(huì)將底部標(biāo)簽導(dǎo)航進(jìn)行變體，很多人把它稱為舵式導(dǎo)航，就像這種：

中間的「+」一般是發(fā)布的意思，并且是 app 里面使用最頻繁的一個(gè)功能，一般都會(huì)重點(diǎn)突出。并且，該標(biāo)簽中很多時(shí)候會(huì)有二級導(dǎo)航，二級導(dǎo)航里可擴(kuò)展性就比較強(qiáng)，如圖：

而頂部標(biāo)簽導(dǎo)航顧名思義就是 tabbar 位于頂部，最早知道它是在 Material Design 里面，因?yàn)?Google Pixel 手機(jī)底部存在物理導(dǎo)航，所以將標(biāo)簽導(dǎo)航置于頂部不會(huì)顯得突兀。它很少用作一級導(dǎo)航，一般是二級導(dǎo)航比較多，而且我發(fā)現(xiàn)頂部標(biāo)簽導(dǎo)航，幾乎都是純文字的形式，比如：

突然想到今天交互設(shè)計(jì)課上的時(shí)候，老師講的人機(jī)交互里，重要的操作放在大拇指可觸達(dá)的范圍內(nèi)。

而頂部標(biāo)簽導(dǎo)航，如果是點(diǎn)擊標(biāo)簽進(jìn)行操作的話，用戶單手操作就十分不方便，所以我發(fā)現(xiàn)體驗(yàn)好的 app 的頂部操作導(dǎo)航都是可以直接通過左右滑動(dòng)屏幕的交互來切換。

而當(dāng)標(biāo)簽類目過多的時(shí)候，可以通過左滑展現(xiàn)更多標(biāo)簽，比如很多新聞閱讀類的 app：

如果是可以滑動(dòng)查看更多的話，一定要通過一些方式告訴用戶可以滑動(dòng)查看更多，比如最后一個(gè)標(biāo)簽隱藏一半的方式等：

關(guān)于頂部標(biāo)簽導(dǎo)航的優(yōu)缺點(diǎn)以及適用場景，如下：

二、宮格導(dǎo)航

宮格導(dǎo)航，也是十分常見的導(dǎo)航形式，除了一些工具類 app 外，大部分是作為二級頁面展示出來，并且以 icon+文字的形式居多。

如果將宮格的 icon 換成 picture 的形式的話，可以衍生出一種新的類似于卡片式導(dǎo)航的形式 ，可以通過垂直滑動(dòng)來切換，比如：

那，如果宮格信息太多，我發(fā)現(xiàn)很多 app 會(huì)采用分類展示的形式，并且通過水平滑動(dòng)的方式來切換，比如：

但是上面兩種可以垂直或者水平滑動(dòng)的形式，一定要讓用戶知道是可以水平或者垂直滑動(dòng)的，采取的是邊界地方信息只展示一半的形式，告訴用戶可以繼續(xù)滑動(dòng)……

除此之外，宮格導(dǎo)航還可以在電商里面運(yùn)用，在首頁的運(yùn)營內(nèi)容塊，它可以根據(jù)內(nèi)容的重要性調(diào)整模塊的大小，比如：

關(guān)于宮格導(dǎo)航的優(yōu)缺點(diǎn)和適用場景，如下：

三、側(cè)邊導(dǎo)航

有些書里面會(huì)把側(cè)邊導(dǎo)航叫做抽屜導(dǎo)航，這類導(dǎo)航其實(shí)比較少了，原本也是從 Google Material Design 里面提取出來的概念，一般會(huì)在首頁呈現(xiàn)一個(gè)主要功能，將其他不常用的功能收納放到側(cè)邊導(dǎo)航里，比如：

而關(guān)于側(cè)邊導(dǎo)航的優(yōu)缺點(diǎn)以及適用場景，如下：

四、列表導(dǎo)航

列表導(dǎo)航也是十分常見，幾乎在每一個(gè) app 里面都會(huì)存在，大部分時(shí)候是作為二級導(dǎo)航存在，但是也會(huì)存在于一級導(dǎo)航的時(shí)候，比如郵箱，iOS系統(tǒng)自帶的設(shè)置等。

一般在列表導(dǎo)航里都會(huì)有下一個(gè)層級，可以通過箭頭來告訴用戶是否有下級菜單。

當(dāng)列表信息比較多的時(shí)候，可以對列表進(jìn)行分類，可以添加小標(biāo)題或者直接分隔開。比如：

而在有些列表導(dǎo)航里，我們還需要展示給用戶一些預(yù)覽信息，比如 iOS系統(tǒng)里的健康，個(gè)人信息里的一些基本數(shù)據(jù)展示，如下：

關(guān)于列表導(dǎo)航的優(yōu)缺點(diǎn)以及適用場景，如下：

五、菜單導(dǎo)航

其實(shí)菜單導(dǎo)航也可以稱為下拉導(dǎo)航。這也是今天上交互設(shè)計(jì)課的時(shí)候，老師以微信的「+」為例子介紹的一種導(dǎo)航形式。最初了解這種導(dǎo)航形式也是來源于 Material Design 里面的 Menu。

Menu 是臨時(shí)的一張紙（paper），由按鈕（button）、動(dòng)作（action）、點(diǎn)（pointer）或者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。

比如：

當(dāng)信息層級變多的時(shí)候，菜單導(dǎo)航里要展示一層或者兩層信息，比如大眾點(diǎn)評采取的形式：

關(guān)于菜單導(dǎo)航的優(yōu)缺點(diǎn)以及適用場景，如下：

六、輪播導(dǎo)航

還有一些導(dǎo)航比如輪播導(dǎo)航，完全的沉浸式體驗(yàn)，高度簡潔的導(dǎo)航，比如天氣，但是這種導(dǎo)航因?yàn)檩啿c(diǎn)的大小不會(huì)很明顯，所以用戶很難快速感知自己所在位置，并且輪播導(dǎo)航輪播的數(shù)量也不宜過多 。

其實(shí)導(dǎo)航的類型應(yīng)該還有很多，并且在一個(gè) app 里面幾乎不可能只使用一種導(dǎo)航，哪怕只是一個(gè)頁面，也會(huì)存在多種導(dǎo)航的組合形式，比如：

總結(jié)

  • 導(dǎo)航的形式一定是根據(jù)你的產(chǎn)品的諸多因素進(jìn)行選取，并不能完全按照我上文的適用場景為依據(jù)；
  • 幾乎每一個(gè) app，每一個(gè) app 的每一個(gè)頁面，都會(huì)涉及到多種導(dǎo)航模式，需要結(jié)合具體場景進(jìn)行組合選??；
  • 導(dǎo)航的具體展現(xiàn)可以通過：文字，icon，文字+icon 的形式；
  • 有些導(dǎo)航比如標(biāo)簽導(dǎo)航在設(shè)計(jì)的時(shí)候有多種狀態(tài)，比如 unselected，selected 等狀態(tài)；
  • 導(dǎo)航在 iOS 和 android 里面的應(yīng)用會(huì)不一樣，比如標(biāo)簽導(dǎo)航適配 iOS系統(tǒng)，側(cè)邊導(dǎo)航適配 android 系統(tǒng)；
  • 導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁面之間的關(guān)系；
  • 能夠引導(dǎo)用戶以很好的體驗(yàn)完成目標(biāo)的導(dǎo)航設(shè)計(jì)都是優(yōu)秀的。
評論(0) 瀏覽(2565)

關(guān)于Vuex的全家桶狀態(tài)管理（二）

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

1：mutations觸發(fā)狀態(tài) （同步狀態(tài)） 

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> </p> </template> <script> import {mapState,mapMutations} from 'vuex' export default{
  name:'hello', //寫上name的作用是，如果你頁面報(bào)錯(cuò)了，他會(huì)提示你是那個(gè)頁面報(bào)的錯(cuò)，很實(shí)用 //方法三 computed: mapState([ 'count' ]),
  methods:{
   ...mapMutations([ 'jia', 'jian' ])
  }
 } </script>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    •

2：getters計(jì)算屬性

getter不能使用箭頭函數(shù)，會(huì)改變this的指向

在store.js添加getters 

 // 計(jì)算 const getters = {
  count(state){ return state.count + 66 }
} export default new Vuex.Store({
  state,
  mutations,
  getters
})
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    •

//count的參數(shù)就是上面定義的state對象 
//getters中定義的方法名稱和組件中使用的時(shí)候一定是一致的,定義的是count方法，使用的時(shí)候也用count，保持一致。 
組件中使用 

<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{
  name:'hello',
  computed: {
   ...mapState([ 'count' ]),
   ...mapGetters([ 'count' ])
  },
  methods:{
   ...mapMutations([ 'jia', 'jian' ])
  }
 } </script>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    •

3：actions (異步狀態(tài))

在store.js添加actions 

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義常量 const state = { count: 1 } // mutations用來改變store狀態(tài) 同步狀態(tài) const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} // 計(jì)算屬性 const getters = {
  count(state){ return state.count + 66 }
} // 異步狀態(tài) const actions = {
  jiaplus(context){
    context.commit('jia') //調(diào)用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被執(zhí)行了，然后兩秒后調(diào)用jian的方法') }, jianplus(context){ context.commit('jian') }
} export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    • 

        
  • 
            31
        
    • 

        
  • 
            32
        
    • 

        
  • 
            33
        
    • 

        
  • 
            34
        
    • 

        
  • 
            35
        
    • 

        
  • 
            36
        
    • 

        
  • 
            37
        
    • 

        
  • 
            38
        
    • 

        
  • 
            39
        
    • 

        
  • 
            40
        
    • 

        
  • 
            41
        
    • 

        
  • 
            42
        
    • 

        
  • 
            43
        
    • 

        
  • 
            44
        
    •

在組件中使用 

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> <p> <button @click="jiaplus">+plus</button> <button @click="jianplus">-plus</button> </p> </p> </template> <script> import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{
  name:'hello',
  computed: {
   ...mapState([ 'count' ]),
   ...mapGetters([ 'count' ])
  },
  methods:{ // 這里是數(shù)組的方式觸發(fā)方法 ...mapMutations([ 'jia', 'jian' ]), // 換一中方式觸發(fā)方法 用對象的方式 ...mapActions({
    jiaplus: 'jiaplus',
    jianplus: 'jianplus' })
  }
 } </script> <style scoped> h5{ font-size: 20px; color: red; } </style>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    • 

        
  • 
            31
        
    • 

        
  • 
            32
        
    • 

        
  • 
            33
        
    • 

        
  • 
            34
        
    • 

        
  • 
            35
        
    • 

        
  • 
            36
        
    • 

        
  • 
            37
        
    • 

        
  • 
            38
        
    • 

        
  • 
            39
        
    • 

        
  • 
            40
        
    • 

        
  • 
            41
        
    • 

        
  • 
            42
        
    • 

        
  • 
            43
        
    • 

        
  • 
            44
        
    • 

        
  • 
            45
        
    • 

        
  • 
            46
        
    • 

        
  • 
            47
        
    • 

        
  • 
            48
        
    •

4：modules 模塊

適用于非常大的項(xiàng)目，且狀態(tài)很多的情況下使用，便于管理

修改store.js 

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} const getters = {
  count(state){ return state.count + 66 }
} const actions = {
  jiaplus(context){
    context.commit('jia') //調(diào)用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被執(zhí)行了，然后兩秒后調(diào)用jian的方法') }, jianplus(context){ context.commit('jian') }
}

//module使用模塊組的方式 moduleA const moduleA = { state, mutations, getters, actions }

// 模塊B moduleB const moduleB = { state: { count:108
  }
} export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

評論(0) 瀏覽(2749)

如何畫好一張描邊插畫？

資深UI設(shè)計(jì)者

描邊插畫：可以簡單理解為眾多線面結(jié)合圖標(biāo)組合在一起，互相呼應(yīng)而組成一個(gè)大畫面。畫面中的元素除了面以外，還具有描邊，因此也叫描邊插畫。

本文內(nèi)容：文章會(huì)詳解如何畫一張描邊插畫，教程素材沒有用我之前的插畫來做步驟分解，而是新畫了一張插畫以作示范，繪畫原理都一樣，理解原理就好。除了具體步驟以外，會(huì)針對一些易犯錯(cuò)誤的地方添加重點(diǎn)標(biāo)記。

一點(diǎn)建議：看完文章后，可以按照我分享的方法來臨摹一遍，但我更趨向于小伙伴們能夠發(fā)揮自己的想象力，做一張屬于自己的原創(chuàng)插畫。畫完后若有不清楚的地方，歡迎在我的公眾號中添加微信并附帶插畫，可給予建議。

一、草圖階段

1. 確立主題，畫草稿

這次插畫的主題源自于我的一個(gè)夢：在草地上，遺落的帆布鞋里面長滿了鮮花，小鳥守在花的旁邊歌唱。

確定主題后，把腦海里的畫面畫出來，可以畫在紙上，也可以用數(shù)位板在 ps 里面畫，按照個(gè)人習(xí)慣就好。我比較喜歡手繪，因此在紙上畫。

2. 打開AI，調(diào)整設(shè)置

新建畫布1600*1200

視圖-勾選對齊點(diǎn)

3. 把草圖拉到畫面中，調(diào)整大小

二、線稿

1. 描邊設(shè)置及要注意的問題

在描邊插畫中，常見的問題之一就是描邊的粗細(xì)問題. 以及描邊間關(guān)系的處理問題。

描邊粗細(xì)問題（下圖以之前的四季插畫為例子）

描邊間關(guān)系處理

描邊設(shè)置

描邊的粗細(xì)是根據(jù)畫布大小而決定的，1600*1200的畫布，我習(xí)慣用 8pt 的粗細(xì)的線條，但是如果畫布是1200*900，8pt 則顯得過粗。具體的粗細(xì)可以根據(jù)情況而調(diào)整。

2. 線稿畫法

布爾運(yùn)算法

形狀斷點(diǎn)重連法

形狀生成器

鋼筆勾勒法

鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個(gè)插畫中，植物的形狀比較隨性，因此用鋼筆直接勾勒比形狀剪切要快。繪制的過程中，注意調(diào)整線條的平滑度. 弧度，使其規(guī)整。在此不作示范。

三、色稿

1. 增加背景色

2. 色稿層的繪制

3. 顏色調(diào)整

4. 高光與暗部

5. 經(jīng)過高光與暗部塑造后的畫面

四、 風(fēng)格塑造與整體調(diào)整

1. 風(fēng)格塑造

最近看到 kit8 大神的畫，突然想到如果白線運(yùn)用在線性插畫會(huì)怎樣，就嘗試了這種風(fēng)格。把線稿復(fù)制一層置于頂上，改成白色，2px 粗細(xì)的線，然后向旁邊移動(dòng)錯(cuò)位，破一下畫面沉悶的感覺。


2. 整體調(diào)整

看到這里，你應(yīng)該也發(fā)現(xiàn)了，畫面是比較灰的，因?yàn)槲叶际沁x擇低飽和度的顏色，如果需要調(diào)整，就在 AI 中把插畫導(dǎo)出 SVG 格式。然后拖到 PS 里面進(jìn)行色相飽和度的調(diào)整。

3. 保存喜歡的配色

在顏色調(diào)整過程中，遇到喜歡的配色就保存下來，這樣一張插畫就完成了。

評論(0) 瀏覽(3829)

聊聊排版中的版面率和留白率

資深UI設(shè)計(jì)者

一、何為版面率

我們都知道一個(gè)版面中必定有版心的概念。何為版心呢？版心就是除去天頭、地腳和左右頁邊距余下的區(qū)域，也是我們頁面內(nèi)容的擺放空間。下圖中灰色塊的區(qū)域就是此頁面的版心。

知道了版心，那么何為版面率呢？版面率就是版心所占頁面的比例，通俗一點(diǎn)講就是版面的利用率。

上面左圖中版心的面積非常大，四周的余白少，版面的利用率高，所以版面率就高。右圖版心面積小，版面利用率比左圖低，所以版面率就低一些。

版面中也有滿版與空版的概念。如上圖，滿版就是沒有天頭地腳與左右頁邊距的，此時(shí)版心即整個(gè)版面，版面利用率為100%?？瞻婢褪前婷胬寐蕿?%的。從滿版到空版之間的版面率是遞減的關(guān)系。

二、版面率對畫面氣質(zhì)的影響

說完版面率的概念我們再來說一說版面率對畫面氣質(zhì)的影響。

一般來說版面率越高，視覺張力就越大，版面也會(huì)更活潑與熱鬧；反之，版面率越小，給人感覺就越典雅與寧靜，版面也會(huì)更有格調(diào)。

上圖中高版面率的海報(bào)相對于低版面率的更熱鬧與活潑；低版面率的則更典雅。

畫冊中也是一樣的，上圖是我早些年做的一個(gè)案例。同樣的內(nèi)容跟圖片，只是版面的利用率不同，我們可以發(fā)現(xiàn)右邊低版面率的作品更安靜和典雅。

版面率的高低能夠影響版面的氣質(zhì)，所以我們實(shí)際工作中也要根據(jù)項(xiàng)目的氣質(zhì)分配合適的版面率。比方說典雅氣質(zhì)的項(xiàng)目我們就要用低版面率版面，如果用高版面率顯然是與項(xiàng)目本身的氣質(zhì)相悖的。

三、留白率

說完版面率我們再來說一下留白，留白的概念大家都懂。而這里所說的留白更多的是指頁面的負(fù)空間。

頁面中去除內(nèi)容后的空間就是負(fù)空間，如下面這個(gè)頁面。

圖中灰色塊代表圖和文字信息等內(nèi)容，除去這些圖片和文字后，頁面中的其他空間都可以看作是負(fù)空間，也就是留白。當(dāng)然，留白并不一定是白色，所有除去頁面內(nèi)容后的空間都是負(fù)空間，如上圖右側(cè)案例，黑色部分即此頁面的留白。

負(fù)空間的多少即是留白的多少。留白的多少我們可以用留白率來表示，如上圖，負(fù)空間小的留白肯定少，留白率就低。負(fù)空間大的的留白肯定多，留白率就高。

留白率就是版面留白的多少，實(shí)際上與版面率的概念差不多，如下。

空版留白最多，滿版留白最少。當(dāng)然這也不是絕對的，有的作品中雖然是滿版，但空間廣闊，比如天空什么的，都可以當(dāng)作留白來看待。

四、留白率對畫面的影響

上面說來留白率跟版面率也有一定的關(guān)聯(lián)，所以他們對畫面氣質(zhì)的影響也是如出一轍的。我們可以先來看一下低留白率與高留白率的幾個(gè)作品。

通過這幾個(gè)作品我們可以看出留白少的信息更豐富，版面更有活力，也更熱鬧，親和力也更強(qiáng)。而留白多的更雅致，更安靜典雅，更有格調(diào)跟品質(zhì)感，但親和力稍弱。

五、案例演示

下面進(jìn)行案例演示吧，首先看一看文案。

這一步我們需要把文案的層級關(guān)系拉開，大中小區(qū)分的明顯一點(diǎn)。這個(gè)文案的層級關(guān)系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是無盡的森林 ＞ 小文字信息的。

首先我們做一個(gè)有張力的版面，那么我們可以想一想什么樣的版面是有張力的呢？

首先版面率要大，其次留白要小，讓版面中的信息緊湊一點(diǎn)。

上圖就是對版面的布局，可以看到圖片是出血版的，沒留天頭與左右頁邊距。這樣做的目的也是使版面率更大。

布局做好之后我們把圖片與編排好的文字放置上去就可以了，如下。

上圖可以看到留白比較少，符合留白率低的理論，雖然具備張力，但不是很明顯。這種情況下我們可以改變一下底色使之感覺留白率更低，如下。

做完了留白少版面率高的，我們再來做一個(gè)典雅一點(diǎn)的。

根據(jù)本篇文章的內(nèi)容思考一下什么典雅與安靜的的排版版面率與留白率分別是什么樣的？

一定是低版面率和較多留白的版面更能體現(xiàn)典雅與安靜感。所以我們在版面安排上要使其留白更多，同時(shí)版面率要小一點(diǎn)。下圖就是一個(gè)基本布局。

最后我們再根據(jù)版面布局置入圖片微調(diào)一下就可以了，如下。

總結(jié)

版面率跟留白率都能夠影響版面的氣質(zhì)，我們做項(xiàng)目的時(shí)候具體問題具體分析，根據(jù)項(xiàng)目氣質(zhì)去設(shè)定版面率跟留白率的大小。

評論(0) 瀏覽(3884)

動(dòng)畫筆記06《文字路徑書寫MG動(dòng)畫》

資深UI設(shè)計(jì)者

推薦一個(gè)做路徑動(dòng)畫的腳本，還不錯(cuò)，看看吧。

undefined

評論(0) 瀏覽(2853)

建立條理- 版式設(shè)計(jì)原理

資深UI設(shè)計(jì)者

大家好，從今天開始我要以大白話且通俗易懂的方式，來與大家分享我的知識和觀點(diǎn)。

主要講解的是平面設(shè)計(jì)基礎(chǔ)理論知識與實(shí)際用法，后期會(huì)講一些高階的設(shè)計(jì)思維。

本章節(jié)適合設(shè)計(jì)小白和需要填補(bǔ)設(shè)計(jì)基礎(chǔ)的設(shè)計(jì)師學(xué)習(xí)閱讀。 


目錄

 

1、理解、提取與布置

2、貼近與遠(yuǎn)離

3、排列與對齊

4、視線移動(dòng)方向

5、組織與重復(fù)

 


 

1、理解、提取與布置

 

理解、提取與布置指的是根據(jù)設(shè)計(jì)的意圖來進(jìn)行信息的整理，然后再將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來，最后再根據(jù)排列好的信息按個(gè)人美感和美學(xué)理念擺放到平面中。undefined



1.1 理解部分


當(dāng)收到一個(gè)海報(bào)設(shè)計(jì)需求時(shí)，我們不是要馬上動(dòng)手去做，而是要去思考需要設(shè)計(jì)的海報(bào)受眾群體是哪些人，具體要怎么展示它，它展示的目的是什么。 undefined

下面我就簡單介紹一下設(shè)計(jì)思維及方法，首先要設(shè)置定一個(gè)需求【現(xiàn)代美術(shù)館，需要設(shè)計(jì)一個(gè)簡潔大方的海報(bào)】。根據(jù)這個(gè)需求在進(jìn)行具體的思維延伸。



1.1.1 海報(bào)的受眾群體


當(dāng)我們收到設(shè)計(jì)需求時(shí)，要考慮海報(bào)的受眾群體，男人/女人，少年/青少年/中年/老年，每種受眾群體接受教育的程度和經(jīng)歷均不同，要根據(jù)不同的受眾做合適的設(shè)計(jì)。當(dāng)我們按照具體需求定義好受眾群體后，就可以考慮推斷用哪種風(fēng)格來展示海報(bào)了。

undefined

對于現(xiàn)代美術(shù)館需要一個(gè)簡潔大方的海報(bào)，這個(gè)需求所涵蓋的年齡區(qū)間比較大，基本上所有人都可以參觀美術(shù)館。那我們只要避免使用“個(gè)性化”的表象特征元素就可以解決這個(gè)問題了。

undefined

意思就是不要加入柔美的線條（除非展品的構(gòu)成是柔美的線條），游戲和女妝這類具有一定代表性的象征元素，不要夾雜太多表現(xiàn)形式，用最容易讓人理解的表象形式來處理就可以了。



1.1.2 怎么展示海報(bào)


現(xiàn)代美術(shù)館，需要設(shè)計(jì)一個(gè)簡潔大方的海報(bào)這個(gè)需求，可以根據(jù)主關(guān)鍵詞“現(xiàn)代”和“美術(shù)館”，次關(guān)鍵字“簡潔”和“大方”來推斷要采用哪種設(shè)計(jì)語言?！艾F(xiàn)代”的表現(xiàn)形式是無襯線體、干練（有棱角）、簡潔、沒有太多情緒。而“美術(shù)館”只要在圖片的處理上讓主題與圖片串聯(lián)共通就可以了。

undefined

簡潔大方的設(shè)計(jì)需求可以采用直線（字有時(shí)也是線）或大留白、配色多些白色、舒適的高純度高明度、整體干凈清爽，同時(shí)也要注意禁止添加太多顏色（如撞色）。



1.1.3 運(yùn)用理解部分生成原型


根據(jù)前面的分析大概有了個(gè)原型，分為上下構(gòu)圖。上部分是美術(shù)館的部分場景圖片，下部分是具體的內(nèi)容信息部分。所有要素均以現(xiàn)代感、簡潔干練、配色不復(fù)雜、線性、整潔、清爽、專業(yè)、無太多情緒為基礎(chǔ)進(jìn)行設(shè)計(jì)的。

undefined

以上就是“信息的整理”中的“理解部分”，當(dāng)設(shè)計(jì)師收到需求時(shí)，不要馬上著手去做。先思考采用哪種表現(xiàn)形式（視覺語言）更適合需求，分析后再去做設(shè)計(jì)，這樣才能準(zhǔn)確表達(dá)具體的需求，也能做出更符合需求的設(shè)計(jì)。




1.2 提取部分


提取部分就很好理解了，顧名思義是將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來。我們只需要根據(jù)優(yōu)先級進(jìn)行排序，并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】這么多種信息，把最重要的【CGIL】提取出來再排列優(yōu)先級【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】這個(gè)過程就叫“提取信息部分”。

undefined




1.3 布置部分 


把提取并排列好優(yōu)先級的信息規(guī)整好，就可以布置在平面上了。用之前設(shè)計(jì)好的原型套用已提取好的信息就可以了。特別要注意重要的內(nèi)容放大，不重要的內(nèi)容弱化。



* 要點(diǎn)


理解：首先要理解作品的受眾群體、要怎么展現(xiàn)、目的是什么。

提?。浩浯我鞔_作品內(nèi)容中什么是最重要的、根據(jù)優(yōu)先級排序。

布置：最后把排列好的信息加以布置，重要的內(nèi)容放大，不重要的內(nèi)容弱化。





2、貼近與遠(yuǎn)離


貼近和遠(yuǎn)離的概念也是比較好理解的。與格式塔視知覺的親密性與遠(yuǎn)離性是一個(gè)道理，初期只講一些通俗易懂的概念，像格式塔視知覺以后會(huì)講。



2.1 貼近和遠(yuǎn)離的 基礎(chǔ)概念


貼近是指同類要素?cái)[放在一起會(huì)呈現(xiàn)出一種共通性或產(chǎn)生某種規(guī)則，而遠(yuǎn)離是指同類要素分開擺放看上去就沒有共通性或不會(huì)感到有某種規(guī)則。

undefined


當(dāng)把同類要素（男人女人）放到一起，會(huì)覺得他們有一定的共通性，而且看上去像一對情侶。相反把同類要素（男人女人）分開來放，會(huì)覺得他們毫無關(guān)系。


我們把這種概念應(yīng)用在平面設(shè)計(jì)上，如下圖所示。

undefined

相同的要素?cái)[放在一起會(huì)有一定的共同性，相反分開擺放則看上去沒有關(guān)聯(lián)。

undefined

貼近與遠(yuǎn)離基礎(chǔ)概念的實(shí)際案例



2.2 貼近和遠(yuǎn)離的 進(jìn)階概念


把同類要素放到一起有種井然有序的感覺。如果要處理較為規(guī)整傳統(tǒng)的版式時(shí)，可以考慮多將要素放到一起形成規(guī)則。另外把同類要素分開擺放，會(huì)感到?jīng)]有共通性和規(guī)律規(guī)則，但是能為平面增加節(jié)奏感和沖擊力。

undefined

貼近與遠(yuǎn)離進(jìn)階概念的實(shí)際案例


其次遠(yuǎn)離能使平面產(chǎn)生留白，通過留白也能使平面具有關(guān)聯(lián)性。

undefined

雖然說遠(yuǎn)離能使要素看上去沒有共同性和規(guī)則，但如果要素處在一個(gè)平面中，利用留白呈現(xiàn)出一種關(guān)聯(lián)性。這就像吵架的夫妻一樣，同在一個(gè)床上，女的偏床左側(cè)，男的偏床右側(cè)，呈現(xiàn)一種遠(yuǎn)離性。但他倆還是處在“床”這個(gè)平面中，也會(huì)呈現(xiàn)一種關(guān)聯(lián)性。

貼近與遠(yuǎn)離進(jìn)階概念的實(shí)際案例



* 要點(diǎn)



同類要素貼近擺放在一起相互關(guān)聯(lián)，同類要素遠(yuǎn)離擺放相互排斥。

同類要素貼近擺放在一起平面有規(guī)則，同類要素遠(yuǎn)離擺放增添節(jié)奏。

留白也能使要素有一定的關(guān)聯(lián)性。




3、排列與對齊


排列與對齊的概念比較簡單，也很容易理解。轉(zhuǎn)化一下思維，把排列比作軍隊(duì)隊(duì)伍中的“集合”，把對齊比作隊(duì)伍中的向前/左看齊，就很好理解了。




3.1 排列


排列是指將要素按照一定的規(guī)則進(jìn)行布置，使平面達(dá)到一種平衡與和諧。道理與收拾屋子一樣，雜亂無章的屋子會(huì)讓人感到不舒服且很壓抑。整理的井然有序的屋子會(huì)讓人心情舒暢很安心。平面中的“排列”就是屋子中的“整理”，目的是使雜亂的屋子變得規(guī)矩整齊。收拾屋子的方法就是“規(guī)則”，用規(guī)則的方法來排列就叫“布置”。

undefined

排列的目的是讓平面變得有序和規(guī)則，當(dāng)平面達(dá)到有序和規(guī)則就會(huì)呈現(xiàn)出一種舒適感，好比自然中的和諧。



3.2 對齊


對齊也可以理解為將要素按照一定的規(guī)則進(jìn)行布置，使平面達(dá)到一種平衡與和諧。對齊與排列的差別在于，對齊是在排列的基礎(chǔ)上進(jìn)行操作的。先將要素按照一定規(guī)則進(jìn)行排列，然后再將要素進(jìn)行對齊。排列是畫一個(gè)大體的框架，而對齊是做框架里的精細(xì)操作。

undefined

排列與對齊的實(shí)際案例



* 要點(diǎn)


排列與對齊的目的是讓平面變得有序和規(guī)則，當(dāng)平面達(dá)到有序和規(guī)則就會(huì)呈現(xiàn)出一種舒適感。

把排列比作軍隊(duì)隊(duì)伍中的“集合”，把對齊比作隊(duì)伍中的向前/左看齊，就很好理解了。





4、視線移動(dòng)方向


設(shè)計(jì)書籍或排版布局時(shí)，要考慮通過設(shè)計(jì)讓讀者以怎樣的順序去閱讀作品，通常情況下人的視線是從上到下移動(dòng)的，所以在設(shè)計(jì)時(shí)要考慮到這一基本原則。閱讀橫排文章時(shí)視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。

視線的移動(dòng)方向分為三個(gè)知識點(diǎn)，橫排閱讀、豎排閱讀、流水式閱讀。流水式閱讀以后會(huì)講。

undefined

隨便補(bǔ)充一下啊，我讀過的設(shè)計(jì)文獻(xiàn)中提到的閱讀方法只有“Z字視線移動(dòng)方向”，而沒有“T字視線移動(dòng)方向”。有一種學(xué)習(xí)方法叫“T型閱讀法”，與視線移動(dòng)方向的“T字視線移動(dòng)方向”不是一個(gè)概念。視線本身就是從上到下從左到右的形式閱讀的，形成了Z字閱讀方式，我覺得是國人是把這些概念給曲解了，如果有說的不對的地方，也請大佬們多多指點(diǎn)。



4.1 橫排閱讀


橫排閱讀是指作品的排版布局是以橫向的排列方式讓讀者來閱讀作品。橫向的排列方式就是文字是橫著的，大家現(xiàn)在讀的這篇文章就是橫向排列的文章。閱讀橫向排列的文章時(shí)視線是從上至下【由左至右】依次閱讀的，如圖所示。

懂得了橫向排列的方式來閱讀文章會(huì)有什么用呢？由于人們的閱讀習(xí)慣，一般情況下閱讀讀物，都會(huì)遵循從左到右閱讀文章的方式，這也就間接影響了文章內(nèi)容的重要性。采用橫向排列的方式進(jìn)行排版布局，重要的內(nèi)容要放在最左面，也就是最方便引導(dǎo)人們視線方向的地方。


如果不把重要的內(nèi)容放在視線方向的地方，讀者不僅閱讀作品時(shí)會(huì)感到很吃力（可讀性），而且會(huì)不理解作品是什么含義，視線也隨之錯(cuò)亂，作品也會(huì)失去原本的含義。

橫排閱讀的實(shí)際案例



4.2 豎排閱讀


橫排閱讀是指作品的排版布局是以豎向的排列方式讓讀者來閱讀作品。閱讀豎向排列的文章時(shí)視線是從上至下【由右至左】依次閱讀的，如圖所示。

一定要注意，豎向排列方式內(nèi)容區(qū)在平面的最右面，與橫向排列方式不同。這個(gè)規(guī)定就像地球?yàn)槭裁词菆A的的道理一樣。


豎排閱讀的實(shí)際案例



* 要點(diǎn)


閱讀橫排文章時(shí)視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。

不要打破規(guī)則，一切以引導(dǎo)讀者視線為主。




5、組織與重復(fù)


按照一定規(guī)則構(gòu)成布局來編排要素，能使種類繁多的要素顯得整潔有序。



5.1 組織


沒有共通性的雜亂圖形匯聚一起會(huì)造成視線混亂，讀者注意力會(huì)被分散，也會(huì)降低理解力。將圖形用框圈起來，按照等距進(jìn)行排列，整體就會(huì)顯得很整潔，也便于找出想要了解的圖形。

組織規(guī)則的實(shí)際案例



5.2 重復(fù)


這里的重復(fù)不是指復(fù)制粘貼，而是元素上的重復(fù)構(gòu)成。例如重復(fù)相同的格式，風(fēng)格、文字、顏色、線、圖案等。為了讓平面具有條理性，用風(fēng)格統(tǒng)一的要素做修飾，讓排版符合流水式，視線清晰自然。


重復(fù)規(guī)則也可以應(yīng)用在平面中、元素中、要素中、形狀中等，靈活運(yùn)用重復(fù)能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對作品的印象。

重復(fù)規(guī)則的實(shí)際案例



* 要點(diǎn)


將圖形用框圈起來，按照等距進(jìn)行排列，整體就會(huì)顯得很整潔，也便于找出想要了解的圖形。

靈活運(yùn)用重復(fù)能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對作品的印象。

評論(0) 瀏覽(2525)

WebVR大潮來襲 ---前端開發(fā)能做些什么？

周周

        去年谷歌和火狐針對WebVR提出了WebVR API的標(biāo)準(zhǔn)，顧名思義，WebVR即web + VR的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的API標(biāo)準(zhǔn)讓我們可以使用js語言來開發(fā)。今天，約克先森將介紹如何開發(fā)一個(gè)WebVR網(wǎng)頁，在此之前，我們有必要了解WebVR的體驗(yàn)方式。

WebVR體驗(yàn)?zāi)Ｊ?/strong>

WebVR的體驗(yàn)方式可以分為VR模式和裸眼模式

一、VR模式

?滑配式HMD + 移動(dòng)端瀏覽器

        如使用cardboard眼鏡來體驗(yàn)手機(jī)瀏覽器的webVR網(wǎng)頁，瀏覽器將根據(jù)水平陀螺儀的參數(shù)來獲取用戶的頭部傾斜和轉(zhuǎn)動(dòng)的朝向，并告知頁面需要渲染哪一個(gè)朝向的場景。

?分離式HMD + PC端瀏覽器

        通過佩戴Oculus Rift的分離式頭顯瀏覽連接在PC主機(jī)端的網(wǎng)頁，現(xiàn)支持WebVR API的瀏覽器主要是火狐的 Firefox Nightly和設(shè)置VR enabled的谷歌chrome beta。

二、裸眼模式

        除了VR模式下的體驗(yàn)方式，這里還考慮了裸眼下的體驗(yàn)瀏覽網(wǎng)頁的方式，在PC端如果探測的用戶選擇進(jìn)入VR模式，應(yīng)讓用戶可以使用鼠標(biāo)拖拽場景，而在智能手機(jī)上則應(yīng)讓用戶可以使用touchmove或旋轉(zhuǎn)傾斜手機(jī)的方式來改變場景視角。

        WebVR的概念大概就如此，這次我們將采用cardboard + mobile的方式來測試我們的WebVR場景，現(xiàn)在踏上我們的開發(fā)之旅。

準(zhǔn)備工作

        技術(shù)和框架：three.js for WebGL

         Three.js是構(gòu)建3d場景的框架，它封裝了WebGL函數(shù)，簡化了創(chuàng)建場景的代碼成本，利用three.js我們可以更優(yōu)雅地創(chuàng)建出三維場景和三維動(dòng)畫。

        測試工具：智能手機(jī) + 滑配式頭顯

        推薦使用cardboard或者某寶上三十塊錢的高仿貨。當(dāng)然，如果你練就了裸眼就能將手機(jī)雙屏畫面看成單屏的能力也可以忽略。

       需要引入的js插件：

  • three.min.js
  • webvr-polyfill.js
  • VRcontrols.js
  • VReffect.js
  • webvr-manager.js

webvr-polyfill.js

        由于WebVR API還沒被各大主流瀏覽器支持，因此需要引入webvr-polyfill.js來支持WebVR網(wǎng)頁，它提供了大量VR相關(guān)的API，比如Navigator.getVRDevices()獲取VR頭顯信息的方法。

VRControls.js

        VR控制器，是three.js的一個(gè)相機(jī)控制器對象，引入VRcontrols.js可以根據(jù)用戶在空間的朝向渲染場景，它通過調(diào)用WebVR API的orientation值控制camera的rotation屬性。

VREffect.js

        VR分屏器，這是three.js的一個(gè)場景分屏的渲染器，提供戴上VR頭顯的顯示方式，VREffect.js重新創(chuàng)建了左右兩個(gè)相機(jī)，對場景做二次渲染，產(chǎn)生雙屏效果。

webvr-manager.js

         這是WebVR的方案適配插件，它提供PC端和移動(dòng)端的兩種適配方式，通過new WebVRManager()可以生成一個(gè)VR圖標(biāo)，提供VR模式和裸眼模式的不同體驗(yàn)，當(dāng)用戶在移動(dòng)端點(diǎn)擊按鈕進(jìn)入VR模式時(shí)，WebVRManager便會(huì)調(diào)用VREffect分屏器進(jìn)行分屏，而退出VR模式時(shí)，WebVRManager便用回renderer渲染器進(jìn)行單屏渲染。

        具體使用方法我們將在下文說明。

        3D場景構(gòu)建

        首先我們創(chuàng)建一個(gè)HTML文件

       <!DOCTYPE html>

       <html lang="en">

       <head> 

              <meta charset="UTF-8">

                  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">

              <title>webVR-helloworld</title>

                   <style type="text/css">

                         * { 

                           margin: 0;

                           padding: 0;

                            }

                     html,body {

                                 height: 100%;

                                overflow: hidden;

                     }

               </style>

         </head>

         <body>

         </body>

        <script src="./vendor/three.min.js"></script>

          <script src="./vendor/webvr-polyfill.js"></script>

          <script src="./vendor/VRControls.js"></script>

       <script src="./vendor/VREffect.js"></script>

       <script src="./vendor/webvr-manager.js"></script>

       <script src="./main.js"></script>

       </html>

         接下來編寫js腳本，開始創(chuàng)建我們的3d場景。

1、創(chuàng)建場景

        Three.js中的scene場景是繪制我們3d對象的整個(gè)容

       1.var scene = new THREE.Scene();

2、添加相機(jī)

Three.js的相機(jī)

Three.js中的camera相機(jī)代表用戶的眼睛，我們通過設(shè)置FOV確定視野范圍，

  • //定義一個(gè)60°的視角，視線范圍在1到1000的透視相機(jī)
  • var camera = new THREE. new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
  • scene.add(camera);

3、添加渲染器

  • Three.js的渲染器用來渲染camera所看到的畫面


  • //初始化渲染器 antialias參數(shù)為ture表示開啟抗鋸齒策略
  • var renderer = new THREE.WebGLRenderer({ antialias: true } );
  • //設(shè)置渲染器渲染尺寸
  • renderer.setSize(window.innerWidth,window.innerHeight);
  • //設(shè)置渲染背景為白色
  • renderer.setClearColor(0xeeeeee);
  • //將渲染場景的canvas放入body標(biāo)簽里
  • document.body.appendChild(renderer.domElement);

  • 添加一個(gè)立方體網(wǎng)格

  • // 創(chuàng)建立方體
  • var geometry = new THREE.CubeGeometry( 10,10,10);
  • var cubematerial = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
  • var cube = new THREE.Mesh( geometry, Cubematerial );
  • cube.position.set(0,100,-50);
  • cube.rotation.set(Math.PI/6,Math.PI/4,0);
  • scene.add(cube);

4、啟動(dòng)動(dòng)畫

  • 產(chǎn)生動(dòng)畫的原理就是讓camera持續(xù)連拍，同時(shí)每一次改變物體的屬性，通過requestAnimationFrame()方法遞歸的方式來持續(xù)更新場景對象屬性，你可以將它理解為setTimeout的優(yōu)化版。相比setTimeout函數(shù)，requestAnimationFrame可以保證動(dòng)畫渲染不會(huì)因?yàn)橹骶€程的阻塞而造成跳幀。


  • function animate() {
  •     //讓立方體旋轉(zhuǎn)
  •     cube.rotation.y += 0.01;
  •     //渲染器渲染場景，等同于給相機(jī)按下快門
  •     renderer.render(scene, camera);
  •     //遞歸運(yùn)行該函數(shù)
  •     requestAnimationFrame( animate );
  • }
  • animate();//啟動(dòng)動(dòng)畫

      至此，我們已經(jīng)繪制了一個(gè)簡單的3d場景并且讓它動(dòng)了起來，接下來，我們需要讓我們的場景可以支持WebVR模式。

WebVR場景開發(fā)

       WebVR網(wǎng)頁的基本原理其實(shí)是通過瀏覽器的WebVR API獲取用戶輸入，進(jìn)而控制相機(jī)的視角，在VR模式下通過VR控制器和VR分屏器以二分屏+gyroscope(使用水平陀螺儀)的方式顯示畫面，裸眼情況下提供全屏+touchmove/gyroscope。

       現(xiàn)在我們開始分別創(chuàng)建上文所說的VR控制器和VR分屏器

  • //初始化VR控制器需要傳入場景相機(jī)
  • var vrControls = new THREE.VRControls(camera);
  • //初始化VR渲染器需要傳入場景渲染器
  • var vrEffect = new THREE.VREffect(renderer);
  • //初始化VR適配器，傳入渲染器和分屏器
  • var vrManager = new WebVRManager(renderer, vrEffect);

      然后在前面創(chuàng)建的場景渲染函數(shù)里調(diào)用

  • function animate() {
  •     cube.rotation.y += 0.01;
  •     //實(shí)時(shí)更新相機(jī)的位置和轉(zhuǎn)角
  •     vrControls.update();
  •     vrManager.render(scene, camera);
  •     //遞歸運(yùn)行該函數(shù)
  •     requestAnimationFrame( animate );
  • }

       至此，我們已經(jīng)完成了一個(gè)基本的webVR網(wǎng)頁，不過少了點(diǎn)交互效果好像，敬請期待Web開發(fā)的新世界---WebVR之交互事件。

  • 完整代碼：在文章基礎(chǔ)上添加了天空和地面相關(guān)代碼，以及下篇文章將講到VR凝視交互事件。
  • demo演示地址 ：手機(jī)瀏覽需設(shè)置允許橫屏。

結(jié)語

        目前，國外的谷歌、火狐、Facebook和國內(nèi)百度已推出支持WebVR瀏覽器的版本，微軟也宣布將推出自己的VR瀏覽器，隨著后期5g網(wǎng)絡(luò)極速時(shí)代的到來以及HMD頭顯的價(jià)格和平臺的成熟，WebVR的體驗(yàn)方式將是革命性的，用戶通過WebVR瀏覽網(wǎng)上商店，線上教學(xué)可進(jìn)行“面對面”師生交流等，基于這種種應(yīng)用場景，我們可以找到一個(gè)更好的動(dòng)力去學(xué)習(xí)WebVR。






評論(0) 瀏覽(3035)

為什么你的設(shè)計(jì)時(shí)間總不夠用

資深UI設(shè)計(jì)者

設(shè)計(jì)工作中，你是否經(jīng)常覺得留給設(shè)計(jì)的時(shí)間不夠用？為什么會(huì)這樣？如何解決？Let’s go～

01 問題背景

設(shè)計(jì)工作中，你是否經(jīng)常覺得留給設(shè)計(jì)的時(shí)間不夠用？是否經(jīng)常遇到這樣的問題：


場景1：總感覺自己的設(shè)計(jì)差了點(diǎn)什么，導(dǎo)致設(shè)計(jì)上反復(fù)嘗試。終于在交稿最后一天感覺ok了，興致勃勃的拿去交工，然后得到這樣的反饋——“這個(gè)不行，這不是我想要的”。

場景2：“多久能設(shè)計(jì)完？盡快？盡快是多久”“這個(gè)需求簡單，隨便搞搞就行了！” “要設(shè)計(jì)5天？啊呀～不用那么精致，差不多就行了！”


02 為什么會(huì)這樣？

類似的事情在設(shè)計(jì)行業(yè)已經(jīng)變成了大家都懂的梗，但是為什么會(huì)這樣？

一.設(shè)計(jì)師自身原因?qū)е?/strong>


1.設(shè)計(jì)缺乏說服力導(dǎo)致無節(jié)操改稿


A.是不是設(shè)計(jì)目的不明確？

設(shè)計(jì)本身是一種解決問題的系統(tǒng)性方法，并不是一個(gè)結(jié)果，不能為了設(shè)計(jì)而設(shè)計(jì)。沒有目的性的設(shè)計(jì)會(huì)導(dǎo)致大方向出錯(cuò)，就好比一把狙擊槍打錯(cuò)了目標(biāo)，即使威力再大也是徒勞。


B.是不是設(shè)計(jì)思路不正確?

很多設(shè)計(jì)師在接到需求的第一時(shí)間打開ps或其他軟件直接開始試錯(cuò)，缺乏目的的設(shè)計(jì)很容易在中途發(fā)現(xiàn)錯(cuò)誤或更好的方法，要么推翻重改，要么將就的給上游看。當(dāng)然，結(jié)果肯定不會(huì)很理想。


C.是不是細(xì)節(jié)經(jīng)不起推敲?

細(xì)節(jié)缺乏考慮的設(shè)計(jì)，無法闡述每一處設(shè)計(jì)的目的。當(dāng)其他人提出疑問的時(shí)候，要么不能應(yīng)對，要么強(qiáng)行應(yīng)對，兩種一定都很負(fù)面。


2.設(shè)計(jì)師估時(shí)不精準(zhǔn)導(dǎo)致時(shí)間不夠用


A.是不是估時(shí)不夠合理？

不能精準(zhǔn)評估設(shè)計(jì)時(shí)間，導(dǎo)致估算的時(shí)間過短或過長，設(shè)計(jì)師看到界面數(shù)量直接估時(shí)。不了解需求目的以及缺少設(shè)計(jì)難點(diǎn)的考慮，導(dǎo)致自己不能在估的時(shí)間內(nèi)按時(shí)完成


B.是不是估時(shí)不夠精細(xì)？

需求模塊估時(shí)不精細(xì)，導(dǎo)致評估的時(shí)間不可信，對于其他崗位來說，大多不了解設(shè)計(jì)過程以及設(shè)計(jì)難點(diǎn)在哪，不能清晰闡述其難點(diǎn)在哪很容易被領(lǐng)導(dǎo)壓時(shí)間或貼上負(fù)面標(biāo)簽。

二.外界原因包括哪些

1.當(dāng)然也有不是設(shè)計(jì)師本身導(dǎo)致，比如需求方向反復(fù)變更。導(dǎo)致設(shè)計(jì)方案的不斷更改

2.需求方出方案時(shí)間過長導(dǎo)致下游全部時(shí)間不夠

3.需求方?jīng)]能全局把控時(shí)間，沒全面考慮其時(shí)間周期


所以，一套有說服力的設(shè)計(jì)以及精準(zhǔn)的設(shè)計(jì)時(shí)間評估是設(shè)計(jì)師提升自身效率的核心，而能夠發(fā)現(xiàn)項(xiàng)目效率問題所在是團(tuán)隊(duì)提升整體效率的核心。



03 怎么辦？

那么如何讓你的設(shè)計(jì)更有說服力和精準(zhǔn)的制定你的設(shè)計(jì)時(shí)間？以及外界原因如何應(yīng)對呢？

一.讓你的設(shè)計(jì)更有說服力


A.明確設(shè)計(jì)目的

核心為提前溝通，提前了解需求。分別包括：

1.需求目的

需求目的并不是說需求方想做什么，而是做這個(gè)需求的目的是為了解決什么問題

2.數(shù)據(jù)

是否有數(shù)據(jù)支撐，證實(shí)問題的客觀存在，盡量避免出現(xiàn)偽需求

3.是否對已有的場景造成不良影響

系統(tǒng)性考慮，避免單獨(dú)需求的產(chǎn)出對系統(tǒng)級的設(shè)計(jì)造成影響，導(dǎo)致體驗(yàn)不統(tǒng)一或開發(fā)難度大以及各種后期改稿問題

4.用戶與場景

需求用戶是誰，在什么場景下用，避免設(shè)計(jì)方向出錯(cuò)

5.明確需求期望和時(shí)間期望

需求方是否有對設(shè)計(jì)的期望形式（包含動(dòng)效期望，插畫期望）以及期望時(shí)間是多少

B.清晰設(shè)計(jì)思路

1圍繞戰(zhàn)略目的，目標(biāo)人群以及使用場景考慮

2通過其三個(gè)維度提取與篩選關(guān)鍵詞

3圍繞關(guān)鍵詞確認(rèn)設(shè)計(jì)調(diào)性

4圍繞設(shè)計(jì)調(diào)性結(jié)合具體場景思考與執(zhí)行

5具體細(xì)節(jié)打磨，基于設(shè)計(jì)調(diào)性以及場景考慮上提升品質(zhì)感與好感度

C.讓細(xì)節(jié)經(jīng)得起推敲


1.細(xì)節(jié)的客觀性

每一處的設(shè)計(jì)元素需有他的作用性，盡量避免可有可無的設(shè)計(jì)元素


2.細(xì)節(jié)服務(wù)于整體

每處細(xì)節(jié)的目的都應(yīng)服務(wù)于整體，避免對整體有負(fù)面影響的細(xì)節(jié)設(shè)計(jì)


以上可以總結(jié)為

1明確的設(shè)計(jì)目的能夠讓你的設(shè)計(jì)和需求建立極強(qiáng)的契合，推翻設(shè)計(jì)就等于推翻需求

2清晰的設(shè)計(jì)思路能夠讓你的設(shè)計(jì)環(huán)環(huán)緊扣

3經(jīng)得起推敲的細(xì)節(jié)能夠讓你的設(shè)計(jì)細(xì)化到每個(gè)元素都缺一不可

一套這樣的設(shè)計(jì)方案就好像一桿槍槍命中要害的“狙擊槍”，還有什么擊不碎的目標(biāo)呢？


二.如何合理的評估設(shè)計(jì)時(shí)間


A.方法時(shí)間評估

如果建立在詳細(xì)評估了需求上來說，設(shè)計(jì)師已經(jīng)能了解需求包含了什么內(nèi)容，也一定有某處在設(shè)計(jì)上很難處理的模塊，如“用戶難理解的功能如何表達(dá)清晰、難適配的功能應(yīng)該采用怎樣的展示方法、狀態(tài)太多的情況如何處理、信息過載的模塊等等等”。分別評估其設(shè)計(jì)時(shí)間。


B.執(zhí)行時(shí)間評估

如界面存在大量圖標(biāo)或需要大量圖標(biāo)、大量插畫、動(dòng)效等需要執(zhí)行時(shí)間長的需求，需增加執(zhí)行時(shí)間


三.如何盡量避免外界因素？


A.提前溝通

盡可能分析需求目的的正確性以及可能遇到的問題盡早提出


B.明確職位責(zé)任

設(shè)計(jì)師沒有辦法把公司的活都干了，該是誰的鍋就該誰來背


C.如何讓其他人理解設(shè)計(jì)時(shí)間

分別闡述這套設(shè)計(jì)的時(shí)間分別耗在哪，各模塊各需要多久。的時(shí)間更有說服力


D.需不需要精細(xì)化設(shè)計(jì)到底應(yīng)該由誰決定

當(dāng)然，理論上每處設(shè)計(jì)都應(yīng)該精細(xì)化，但是由于精細(xì)化是一個(gè)永無止境的事，結(jié)合項(xiàng)目本身考慮，需理性一些。需不需要精細(xì)化應(yīng)該是由場景的重要程度、上線時(shí)間決定。不應(yīng)由各職位一方?jīng)Q定。一個(gè)重要的場景可能讓用戶形成對產(chǎn)品品牌認(rèn)識的第一印象，當(dāng)用戶對產(chǎn)品有了負(fù)面的印象，后期改善這個(gè)的成本會(huì)變的無窮大。作為設(shè)計(jì)師，需要嚴(yán)格把控方案的落地以及評估其體驗(yàn)的風(fēng)險(xiǎn)


04 結(jié)語

一個(gè)合理的設(shè)計(jì)過程可以減少不必要的時(shí)間浪費(fèi)，一個(gè)合理的時(shí)間評估能夠保證設(shè)計(jì)工作的正常進(jìn)行。也希望每個(gè)設(shè)計(jì)師都有一個(gè)更美好的工作環(huán)境。

以上為本人的一些看法，也歡迎不同看法的伙伴相互交流，共同進(jìn)步

評論(0) 瀏覽(2863)

如何看懂UI效果圖

藍(lán)藍(lán)設(shè)計(jì)的小編

客戶（老板／領(lǐng)導(dǎo)）拿到軟件的第一個(gè)意見，幾乎都是關(guān)于UI的。有時(shí)得到的評價(jià)也挺簡潔明了的，一個(gè)字“矬”。

于是惶惶不安的開發(fā)小弟經(jīng)常想到的第一個(gè)解決方案：去問設(shè)計(jì)大神（美眉）要一幅詳細(xì)的標(biāo)注圖。結(jié)果他得到這么一幅標(biāo)注圖：

評論(0) 瀏覽(3104)

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

博博

UI妹兒 2018-02-22 11:13:02

我們平時(shí)做設(shè)計(jì)的時(shí)候，都會(huì)遇到挑選素材這個(gè)難題。

做UI的同學(xué)，會(huì)瀏覽動(dòng)效網(wǎng)站尋找靈感又或者去挑選適合的圖標(biāo)；做平面的同學(xué)，特別是電商廣告的同學(xué)，就會(huì)下載電商banner，還有高質(zhì)量的圖片；另外還有絕大部分的人都會(huì)在做報(bào)告的時(shí)候，下載漂亮的PPT和Word模版。如果剛好那時(shí)候你在找工作，還需要找精美的簡歷模版……

但這些素材到底在什么地方找呢，又在什么地方找到高質(zhì)量又免費(fèi)好用的素材呢？

這次，我早已為大家準(zhǔn)備好。下面是我花費(fèi)大量時(shí)間精力整理而成的素材網(wǎng)站，全部都是親身試用后的精選出來的。希望能幫大家在找素材這條路上節(jié)省更多的時(shí)間，找到更適合自己的那些素材。

懶人福利

如果你覺得這些網(wǎng)站下載太麻煩

可以直接翻到文末

專門為大家整理好的

1000G高質(zhì)量精選設(shè)計(jì)素材

免費(fèi)送！

機(jī)會(huì)就一次，錯(cuò)過可以不用等下年了

因?yàn)榛顒?dòng)就這一次

常用素材

一、免費(fèi)可商用圖片

1、https://pixabay.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

全網(wǎng)共一百多萬張免費(fèi)圖片素材，且質(zhì)量非常高，種類繁多，適合每一個(gè)行業(yè)使用。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：種類很多，質(zhì)量高

缺點(diǎn)：下載需注冊，加載慢

推薦指數(shù)：★★★★★ 4.5

2、https://unsplash.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

全世界的優(yōu)秀圖片網(wǎng)站，所以圖片風(fēng)格很豐富，而且大部分質(zhì)量都很高，分分種可以用來做壁紙！

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：質(zhì)量高且優(yōu)秀，數(shù)量多，風(fēng)格獨(dú)特

缺點(diǎn)：加載慢

推薦指數(shù)：★★★★ 4

3、https://www.pexels.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

每日會(huì)更新100張高質(zhì)量的照片在首頁展示，無論風(fēng)光還是人物，這里應(yīng)有盡有。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：種類多，每日更新，不需注冊

缺點(diǎn)：加載慢

推薦指數(shù)：★★★★ 4

4、http://foter.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

網(wǎng)站開始會(huì)將素材分為商業(yè)、動(dòng)物和風(fēng)景三大類，如果你需要尋找其他圖片，可以直接在搜索欄直接搜索關(guān)鍵詞。

這里的圖片給我的感覺就是有趣，獨(dú)特，有很多圖片都很適合做海報(bào)。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：分類明確，質(zhì)量很高

缺點(diǎn)：加載超慢，種類不多

推薦指數(shù)：★★★★ 4

5、https://burst.shopify.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

網(wǎng)站最大好處在于幫你分成非常多的類別，盡管數(shù)量比不上其他網(wǎng)站那么多，但這里的圖片風(fēng)格都很統(tǒng)一，很有質(zhì)量，感覺看上去就很年輕化。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：風(fēng)格獨(dú)特，質(zhì)量高，分類明確

缺點(diǎn)：數(shù)量不多

推薦指數(shù)：★★★★ 4

6、https://negativespace.co

7、http://superfamous.com

8、http://librestock.com

9、http://www.sozai-page.com（日本食物類網(wǎng)站）

10、https://www.foodiesfeed.com（美食）

11、https://www.sitebuilderreport.com（一次性搜索31多家免費(fèi)可商用圖片的網(wǎng)站）

二、字體

1、https://fontsup.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

提供大量免費(fèi)的英文字體，質(zhì)量很高，也很有特色，每個(gè)字體還有一個(gè)詳情頁，非常用心

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：種類多，質(zhì)量高，免費(fèi)下載

缺點(diǎn)：加載稍慢，廣告有點(diǎn)多

推薦指數(shù)：★★★★ 4.5

2、http://www.myfonts.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

網(wǎng)站提供的商業(yè)字體，質(zhì)量很高很漂亮，數(shù)量也很多。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：種類多，質(zhì)量高

缺點(diǎn)：付費(fèi)

推薦指數(shù)：★★★★ 4

3、http://comicneue.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

免費(fèi)手寫可愛字體下載

優(yōu)點(diǎn)：質(zhì)量高，字體可愛

缺點(diǎn)：數(shù)量較少，下載稍麻煩

推薦指數(shù)：★★★★ 3.5

4、http://www.zhaozi.cn

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

找字網(wǎng)，種類豐富，基本上可以找到市面上的所有字體。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：種類很多，方便查閱

缺點(diǎn)：使用時(shí)注意商用版權(quán)，僅中文字體

推薦指數(shù)：★★★★ 4

5、http://www.17ziti.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

綜合性字體下載網(wǎng)站，里面包括英文字體、中文字體，甚至是手機(jī)字體。數(shù)量很多，唯一不足就是沒有注明版權(quán)范圍，所以商用的時(shí)候要注意。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：覆蓋中英文字體、種類多

缺點(diǎn)：網(wǎng)站廣告稍多，沒有注明版權(quán)范圍

推薦指數(shù)：★★★★ 4

UI設(shè)計(jì)素材

一、圖標(biāo)類

1、http://www.iconfont.cn

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺，內(nèi)含一百多萬個(gè)圖標(biāo)！

設(shè)計(jì)師將圖標(biāo)上傳到Iconfont平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標(biāo)轉(zhuǎn)換為字體，便于前端工程師自由調(diào)整與調(diào)用。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：種類豐富，質(zhì)量超高，免費(fèi)下載，中文界面，阿里旗下

缺點(diǎn)：不能打包下載、需注冊

推薦指數(shù)：★★★★★ 4.5（滿分5星，下同）

2、https://www.flaticon.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

大型圖標(biāo)網(wǎng)站，里面擁有將近50萬個(gè)圖標(biāo)，一萬多個(gè)圖標(biāo)集！種類豐富，質(zhì)量超高，且支持在線編輯。

優(yōu)點(diǎn)：種類豐富，質(zhì)量可靠，免費(fèi)下載

缺點(diǎn)：英文搜索，加載稍慢，打包下載需注冊（科學(xué)上網(wǎng)）

推薦指數(shù)：★★★★★ 4.5

3、http://fontello.com

覆蓋絕大部分網(wǎng)上可能應(yīng)用到的圖標(biāo)，也就是說任何你需要的網(wǎng)站類圖標(biāo)都可以在這里找到。

優(yōu)點(diǎn)：網(wǎng)站圖標(biāo)齊全，質(zhì)量高，免費(fèi)下載

缺點(diǎn)：加載稍慢，僅有黑白圖標(biāo)

推薦指數(shù)：★★★★ 4

4、https://thenounproject.com

擁有一百多萬個(gè)圖標(biāo)的大型圖標(biāo)網(wǎng)站，而且圖標(biāo)都是由全世界各地設(shè)計(jì)師設(shè)計(jì)，質(zhì)量非常高！而且里面有很多有趣的圖標(biāo)，例如下面鳥籠類圖標(biāo)集，非?？ㄍ垡?！

優(yōu)點(diǎn)：種類豐富，質(zhì)量超高，免費(fèi)下載

缺點(diǎn)：英文搜索，加載慢，不能打包下載

推薦指數(shù)：★★★★ 4

5、https://icomoon.io

聚合類圖標(biāo)網(wǎng)站，里面集合了不同網(wǎng)站的不同圖標(biāo)，付費(fèi)免費(fèi)都有，種類超多。

優(yōu)點(diǎn)：種類豐富，質(zhì)量一般，免費(fèi)下載

缺點(diǎn)：英文搜索，加載超慢，操作復(fù)雜

推薦指數(shù)：★★★★ 3.5

6、https://useiconic.com/open

7、http://dryicons.com/free-icons

8、http://www.iconarchive.com

9、http://www.entypo.com

10、http://glyphicons.com

二、其他

1、UIKIT.ME

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

各種免費(fèi)高質(zhì)量UI資源下載，Sketch、PSD甚至AE素材都有！

這個(gè)網(wǎng)站除了提供高質(zhì)量的素材以外，還提供超人性化的下載方式：（百度云）

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：質(zhì)量高，免費(fèi)下載

缺點(diǎn)：種類少，部分素材有重復(fù)

推薦指數(shù)：★★★★ 4

2、TOSKETCH.COM

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

網(wǎng)站給我的感覺就是干凈，高大上！里面提供了工具包，網(wǎng)頁，移動(dòng)，模型和圖標(biāo)等其他素材，而且這些素材都有一個(gè)特點(diǎn)，就是質(zhì)量高且新鮮！所有素材都是上傳的，這個(gè)有點(diǎn)了不起。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：質(zhì)量超高，更新快，中文界面，百度云下載

缺點(diǎn)：只提供Sketch資源

推薦指數(shù)：★★★★ 4

3、UI8.NET

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

U18是設(shè)計(jì)素材圈的網(wǎng)紅，提供大量漂亮的超高質(zhì)量商業(yè)設(shè)計(jì)素材，但并非免費(fèi)，絕大部分都需要付費(fèi)。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：質(zhì)量超高、數(shù)量豐富、界面清爽

缺點(diǎn)：付費(fèi)（充值是個(gè)問題），加載稍慢，下載稍麻煩

推薦指數(shù)：★★★★ 4

4、PRINCIPLEREPO.COM

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

高質(zhì)量Principle原型和動(dòng)效設(shè)計(jì)資源的網(wǎng)站，特別是動(dòng)效，每一個(gè)都非常漂亮，很有參考價(jià)值。

優(yōu)點(diǎn)：質(zhì)量高，數(shù)量豐富，免費(fèi)下載

缺點(diǎn)：加載很慢，只有動(dòng)效資源

推薦指數(shù)：★★★★ 3.5

5、UISHE.CN

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

UI社，網(wǎng)站提供主題包、圖標(biāo)、界面和樣機(jī)素材等素材，屬于綜合性的素材下載網(wǎng)站。因?yàn)閲鴥?nèi)的網(wǎng)站，大家不用擔(dān)心加載慢等問題啦。

優(yōu)點(diǎn)：種類很多，質(zhì)量高，下載方便

缺點(diǎn)：付費(fèi)

推薦指數(shù)：★★★★ 4

6、MOCKUP.ZONE

7、GRAPHBERRY.COM

8、GRAPHICTWISTER.COM

9、SKETCHAPPSOURCES.COM

10、DUNNK.COM

平面設(shè)計(jì)素材

1、千圖網(wǎng)（www.58pic.com）

國內(nèi)大型素材網(wǎng)站，素材幾乎覆蓋所有類目、廣告設(shè)計(jì)、電商設(shè)計(jì)和辦公室素材等。逢節(jié)假日都有提供主題素材提供下載，且質(zhì)量很高！

優(yōu)點(diǎn)：種類超多、質(zhì)量高、免費(fèi)下載、主題分類

缺點(diǎn)：非會(huì)員每日有數(shù)量限制

推薦指數(shù)：★★★★★ 4.5

2、包圖網(wǎng)（http://ibaotu.com）

包圖網(wǎng)，大型素材下載網(wǎng)站。全網(wǎng)站提供原創(chuàng)免費(fèi)可商用的素材下載，種類齊全且質(zhì)量超高，每日更新1000張！

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：種類齊全，質(zhì)量超高，免費(fèi)下載，全站正版可商用

缺點(diǎn)：非會(huì)員每日有數(shù)量限制

推薦指數(shù)：★★★★★ 4.5

3、千庫網(wǎng)（http://588ku.com/）

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

大型素材網(wǎng)站，可能是國內(nèi)唯一一家專業(yè)設(shè)計(jì)師提供免摳圖PNG素材，全站2000萬+高質(zhì)量素材無限下載，推薦！

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn)：種類多，專業(yè)提供免摳PNG源文件

缺點(diǎn)：非會(huì)員每日有數(shù)量限制

推薦指數(shù)：★★★★ 4.5

另外國內(nèi)還有付費(fèi)的昵圖網(wǎng)和我圖網(wǎng)，免費(fèi)的有站長素材等等素材網(wǎng)站，數(shù)量很多這里就不一一舉例了。

評論(0) 瀏覽(3379)

日歷

鏈接

個(gè)人資料

存檔