亚洲国产无线乱码在线观看,成人AV专区,gogo专业大尺度亚洲高清人体

182019-4

2019草莓音樂節(jié)的主視覺設(shè)計(jì)太贊了！

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

2019草莓音樂節(jié)的主題是“循環(huán)世界Circular World”。

摩登天空聯(lián)合世界自然基金會(huì)(WWF)發(fā)起今年的音樂節(jié)主題“循環(huán)世界”，以環(huán)保為核心理念，攜手海內(nèi)外環(huán)保機(jī)構(gòu)對(duì)草莓音樂節(jié)進(jìn)行多方位環(huán)保實(shí)踐，并聚合知乎、摩拜等多平臺(tái)力量影響年輕人，讓環(huán)保成為青年生活方式的一部分。

今年的主視覺海元素是被三個(gè)箭頭環(huán)繞的草莓星球，表達(dá)了“循環(huán)世界”的主題。風(fēng)格延續(xù)了去年的樣式，色彩略有調(diào)整，并加入了太空元素。

今年的主視覺當(dāng)然仍由摩登天空的當(dāng)家工作室——MVM design label_工作室操刀。

這張是今年的主視覺海報(bào)。今年，MVM特地為各城市舉辦的2019草莓音樂節(jié)單獨(dú)設(shè)計(jì)了專門的海報(bào)，一樣的版式，不一樣的內(nèi)容，既統(tǒng)一又包含新意。

2019草莓音樂節(jié)武漢站

2019草莓音樂節(jié)成都站

2019草莓音樂節(jié)西安站

2019草莓音樂節(jié)上海站

2019草莓音樂節(jié)長(zhǎng)沙站

在今年3月30日的“地球一小時(shí)”公益活動(dòng)中，草莓音樂節(jié)把自己的參與定義為“草莓星球一小時(shí)”。

而武漢OYO酒店與摩登天空聯(lián)合主辦的活動(dòng)中，一張以“音樂滿房”為主題的插畫也分外有趣——原來大家為了迎接音樂節(jié)，都關(guān)上門在房間里引吭高歌呀…

音樂節(jié)配套周邊產(chǎn)品的銷售，推廣視覺設(shè)計(jì)也很有意思。

即使不是音樂迷，設(shè)計(jì)師對(duì)這樣的設(shè)計(jì)也無法抗拒吧！

藍(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ì)

評(píng)論(0) 瀏覽(4490)

182019-4

B端產(chǎn)品 — 淺談Atlas設(shè)計(jì)思路

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

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

今天分享一款運(yùn)維相關(guān)的B端產(chǎn)品，主要闡述自身的設(shè)計(jì)思路及產(chǎn)品的優(yōu)化過程。

B端產(chǎn)品功能聚焦、講究效能，對(duì)產(chǎn)品鏈路有著高流暢度與率的訴求。設(shè)計(jì)師在做B端產(chǎn)品的的時(shí)候要有全鏈路和小白用戶視角，以體驗(yàn)及效率為先，我們需要協(xié)調(diào)全局一致性，遵循產(chǎn)品鏈路，在視覺上減少對(duì)于用戶的負(fù)擔(dān)和干擾，避免打斷用戶的使用流程，確保流暢、優(yōu)質(zhì)的用戶體驗(yàn)。

在產(chǎn)品優(yōu)化上，我們?cè)诿總€(gè)版本迭代后，會(huì)對(duì)用戶進(jìn)行訪談及收集意見反饋，建議設(shè)計(jì)師可以制定一套自有的用戶調(diào)研方式去了解用戶的想法和自己產(chǎn)品的不足之處，這樣的好處是可以讓用戶幫助你優(yōu)化產(chǎn)品。

在產(chǎn)品的細(xì)節(jié)上我們可以深度地去挖掘和嘗試更好更優(yōu)的設(shè)計(jì)方式，對(duì)設(shè)計(jì)師來說打磨和優(yōu)化每一個(gè)細(xì)節(jié)正是B端產(chǎ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ù)。

評(píng)論(0) 瀏覽(2911)

172019-4

Vue 全局變量，局部變量

seo達(dá)人

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

全局組件和局部組件
* 1.先定義組件 Vue.component('組件名', { 組件模板對(duì)象 })
* 注意: 組件名不要使用原生的標(biāo)簽名, 若組件名定義時(shí)用的是駝峰命名法, 則調(diào)用時(shí)用中劃線分割后小寫
* 例如: 組件-->mtText 使用時(shí)--> <my-text></my-text>
* 2.配置組件的模板注意: 組件的模板內(nèi)容有且只有一個(gè)根元素
* 3.在視圖層里調(diào)用 ,用雙標(biāo)簽
* 4.組件是一個(gè)獨(dú)立的作用域, 也可以看成一個(gè)特殊的vue實(shí)例, 可以有data, methods,computed等等
* 注意: 組件的data是函數(shù), 函數(shù)中需要返回一個(gè)對(duì)象作為組件的data
全局組件案例

<body>
<div id="app">
<my-component></my-component>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
//全局組件
Vue.component('myComponent',{
//1.組件的內(nèi)容/模板
template: '<div><div>頭部組件</div><h1 @click="fn">呵呵{{msg}}</h1></div>',
data(){
return {
msg:'hello,組件'
}
},
methods:{
fn(){
console.log(this.msg);
}
}
})
let vm = new Vue({
el:"#app",
data:{
},
methods:{

},

})
</script>
</body>
局部組件案例

<body>
<div id="app">
<my-component></my-component>
<my-test></my-test>
</div>
<template id="box1">
<h1>haha</h1>
</template>
<template id="box2">
<div>
<ul>
<li v-for="item in arr">
{{ item }}
</li>
</ul>
</div>
</template>
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
},
methods:{

},
//局部子組件
components:{
// 組件名: {配置項(xiàng)}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
}
},
"myTest":{
template:"#box2",
data(){
return {
arr:[1,2,3,4]
}
}
}
}
})
</script>
</body>
組件切換：法一

<body>
<div id="app">
<a href="" @click.prevent="flag=true">登錄</a>
<a href="" @click.prevent="flag=false">注冊(cè)</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
Vue.component("login",{
template:"<h1>登錄組件</h1>"
})
Vue.component("register",{
template:"<h1>注冊(cè)組件</h1>"
})
let vm = new Vue({
el:"#app",
data:{
flag: false
},
methods:{
},
})
</script>
</body>
組件切換：法二

<style>
.red{
color:red;
}
.v-enter{
opacity:0;
transform: translateX(150px);
}
.v-leave-to{
opacity:0;
transform: translateX(-150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s;
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<a href="" :class="{red: flag=='login'}" @click.prevent="flag='login'">登錄</a>
<a href="" :class="{red: flag=='register'}" @click.prevent="flag='register'">注冊(cè)</a>

<transition>
<component :is="flag"></component>
</transition>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
Vue.component("login",{
template:"<h1>登錄組件</h1>"
})
Vue.component("register",{
template:"<h1>注冊(cè)組件</h1>"
})
let vm = new Vue({
el:"#app",
data:{
flag: "login"
},
methods:{

},
})
</script>
</body>
父組件向子組件傳值

<body>
<div id="app">
<my-component :fromfather="father"></my-component>
</div>
<template id="box1">
<h1 @click="change">
{{ fromfather }}
子組件的數(shù)據(jù)
</h1>
</template>
<template id="grandSon">
<h1>孫子組件的數(shù)據(jù)</h1>
</template>

<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
father:'啊~~這是父組件的數(shù)據(jù)'
},
methods:{
},
//局部子組件
components:{
// 組件名: {配置項(xiàng)}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
},
//在子組件配置項(xiàng)里添加 props: ['傳遞過來的數(shù)據(jù)']
//注意: 組件中所有的props中的數(shù)據(jù), 都是通過父組件傳遞給子組件的, props中的數(shù)據(jù)是只讀, 無法修改
props:['fromfather'],
methods:{
change(){
// this.fromfather = "被修改了"
}
},
//局部子子組件
components:{
'grandSon':{
template:'#grandSon'
}
}
}
}
})
</script>
</body>
藍(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ù)。

評(píng)論(0) 瀏覽(3509)

172019-4

干貨來襲！淘寶設(shè)計(jì)師談動(dòng)效的設(shè)計(jì)與交付

用心設(shè)計(jì)

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

在手機(jī)淘寶中，大至鏈路的銜接，小至一個(gè)按鈕的點(diǎn)擊響應(yīng)，動(dòng)效是體驗(yàn)無處不在的潤(rùn)滑劑，為用戶每一步的操作提供了合理的預(yù)期與過渡。而通過動(dòng)效銜接不同界面或不同響應(yīng)狀態(tài)，無論對(duì)流暢直觀地表達(dá)流程意圖，還是精雕細(xì)琢讓體驗(yàn)更絲滑的微動(dòng)效，動(dòng)效設(shè)計(jì)都是淘寶設(shè)計(jì)師日常工作中非常重要的一環(huán)。

動(dòng)效是體驗(yàn)鏈路散點(diǎn)間的“領(lǐng)路人”

針對(duì)項(xiàng)目不同階段、不同使用需要，針對(duì)性地選用的工具，輔以便于理解的交付方式，是設(shè)計(jì)和落地環(huán)節(jié)溝通提效的關(guān)鍵。

相比提及動(dòng)效首先都會(huì)想到的巨無霸AE而言，F(xiàn)linto、Principle、Kite、Adobe XD等許多專門為體驗(yàn)設(shè)計(jì)量身打造的輕量級(jí)工具，更聚焦在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的高頻功能上，多數(shù)工具都能快速輸出視頻或GIF，以及在移動(dòng)端上進(jìn)行實(shí)際的交互體驗(yàn)。

為體驗(yàn)設(shè)計(jì)量身打造的輕量級(jí)工具

這些工具在原型和動(dòng)效快速表達(dá)方面獨(dú)特的敏捷、的優(yōu)勢(shì)，讓它們逐漸成為迭代頻繁的國(guó)內(nèi)互聯(lián)網(wǎng)行業(yè)許多設(shè)計(jì)團(tuán)隊(duì)的新寵。

上述工具的核心功能都比較接近，各有千秋，差異多在于時(shí)間與屬性之間關(guān)聯(lián)的展現(xiàn)形式上，這里不做過多展開，也不做任何孰優(yōu)孰劣的判斷。畢竟工具只是兵器，提起趁手的兵器快刀斬亂麻，才是設(shè)計(jì)功力的體現(xiàn)。

本文將結(jié)合手機(jī)淘寶的動(dòng)效設(shè)計(jì)實(shí)際案例，介紹淘寶設(shè)計(jì)師們?cè)陧?xiàng)目過程中進(jìn)行動(dòng)效設(shè)計(jì)、并與開發(fā)溝通的經(jīng)驗(yàn)。

針對(duì)不同階段，選把趁手的兵器

淘寶這樣的大型應(yīng)用中，任意提及一個(gè)細(xì)分鏈路都頗具復(fù)雜度，每個(gè)場(chǎng)景或大或小的版本迭代背后，都是設(shè)計(jì)師從交互流程設(shè)計(jì)、具體界面的視覺設(shè)計(jì)，再到最終交付落地，經(jīng)歷層層評(píng)審和修改完善的過程。

產(chǎn)品設(shè)計(jì)的2大不同階段

那么在不同階段，選用怎樣的工具更符合我們對(duì)“”的追求？下面將按階段拆分問題，分別進(jìn)行分析：

1、廣義的動(dòng)效：流程Demo設(shè)計(jì)階段

產(chǎn)品流程、交互行為的設(shè)計(jì)與串聯(lián)，無論是作為可以實(shí)際體驗(yàn)的可交互原型，還是純用作展示，實(shí)際上也是一種最基礎(chǔ)的廣義動(dòng)效。

曾幾何時(shí)，交互流程的設(shè)計(jì)輸出物是用流程箭頭清晰標(biāo)注每個(gè)控件交互行為的交互稿。

但在淘寶內(nèi)各子產(chǎn)品“小步快跑”的版本迭代極度頻繁，每天提案、評(píng)審這類快速碰撞不斷的情況下，即使經(jīng)過了合理的流程拆解、耦合度不是非常高的交互稿，對(duì)設(shè)計(jì)師而言改動(dòng)返工量依然巨大。

更何況無論業(yè)務(wù)方還是設(shè)計(jì)內(nèi)部評(píng)審時(shí)，其實(shí)沒有人有時(shí)間仔細(xì)閱讀你精心撰寫的交互說明。

只適合在交付開發(fā)階段采用的靜態(tài)交互文檔

（鞋類測(cè)碼功能為例）

因此，這類交互稿如今最大的用途只在交付開發(fā)的環(huán)節(jié)。在快速碰撞方案的階段，通過輕量級(jí)的動(dòng)效工具迅速產(chǎn)出可交互原型是目前團(tuán)隊(duì)內(nèi)更同行的做法。在評(píng)審中直接演示，可以幫助團(tuán)隊(duì)成員更好地對(duì)方案實(shí)際效果有一個(gè)更直觀的體驗(yàn)。

在流程設(shè)計(jì)階段，F(xiàn)linto是一個(gè)非常好用的工具。同為體驗(yàn)設(shè)計(jì)專屬的輕量級(jí)設(shè)計(jì)軟件，F(xiàn)linto和Principle有很多共通之處，也經(jīng)常被一起比較，但底層思路都是通過定義元素的各項(xiàng)屬性變化來實(shí)現(xiàn)過渡。不過，兩者在定義方式上卻有比較大的不同，簡(jiǎn)單概括來說，F(xiàn)linto是通過元素的附加事件，而Principle則是通過不同畫板間的屬性差。

Flinto更擅長(zhǎng)流程級(jí)表達(dá)

這點(diǎn)上的不同，決定了Flinto優(yōu)勢(shì)在于流程級(jí)表達(dá)，而Principle更擅長(zhǎng)界面級(jí)（或很短的流程級(jí)）交互細(xì)節(jié)表達(dá)。

以分享寶貝、邀請(qǐng)好友出主意的“幫我選”功能中的新建清單流程為例：

「幫我選」新建清單流程Demo

流程對(duì)應(yīng)的Flinto實(shí)現(xiàn)方式如下：

「幫我選」新建清單流程對(duì)應(yīng)的Flinto工程文件

產(chǎn)出流程Demo時(shí)，只需要表達(dá)基本的頁(yè)面結(jié)構(gòu)與跳轉(zhuǎn)關(guān)系即可。轉(zhuǎn)場(chǎng)無需表達(dá)得很準(zhǔn)確，以不引起誤解為原則即可，時(shí)間有限的情況下，最簡(jiǎn)單的處理方式就是統(tǒng)一用漸隱漸現(xiàn)。

各種與頁(yè)面滾動(dòng)位置有關(guān)的動(dòng)效也暫時(shí)不用表達(dá)，例如下滑時(shí)頂欄的狀態(tài)過渡。同樣，也完全沒有必要讓每個(gè)元素都可點(diǎn)擊，這些交互細(xì)節(jié)以及分支用例，都更建議在交付開發(fā)階段通過交互說明表達(dá)，寥寥數(shù)語(yǔ)可能就足夠準(zhǔn)確傳達(dá)了。

與頁(yè)面滾動(dòng)位置聯(lián)動(dòng)的動(dòng)效，可以在界面級(jí)設(shè)計(jì)中細(xì)化

2、微交互動(dòng)效：界面級(jí)設(shè)計(jì)階段

當(dāng)產(chǎn)品流程確定后，進(jìn)入界面級(jí)設(shè)計(jì)階段，就輪到對(duì)局部微動(dòng)效逐一進(jìn)行細(xì)化。

對(duì)不涉及位置聯(lián)動(dòng)的交互動(dòng)效而言，在Flinto和Principle中的制作成本相差無幾。例如純粹由點(diǎn)擊觸發(fā)的事件：

不涉及位置聯(lián)動(dòng)的動(dòng)效

但對(duì)于涉及位置聯(lián)動(dòng)的動(dòng)效，Principle就比Flinto的表現(xiàn)優(yōu)秀很多了。

Principle更擅長(zhǎng)界面級(jí)動(dòng)效表達(dá)

Principle中，時(shí)間軸和位置聯(lián)動(dòng)的設(shè)置比Flinto自由度更高，可以快速進(jìn)行精細(xì)的設(shè)計(jì)和調(diào)整。例如在頁(yè)面上滑過程中，導(dǎo)航欄跟隨手指上滑動(dòng)作而上移隱藏的動(dòng)效：

導(dǎo)航欄隨手指上滑動(dòng)作而上移隱藏

下面是一些來自淘寶近年已上線項(xiàng)目有趣的動(dòng)效示例：

案例一：手機(jī)淘寶導(dǎo)購(gòu)產(chǎn)品“有好貨”的商品列表中，會(huì)穿插視頻及知識(shí)內(nèi)容，在這些特殊內(nèi)容滑動(dòng)到用戶視線中時(shí)會(huì)動(dòng)態(tài)擴(kuò)展，將內(nèi)容自身特點(diǎn)完全呈現(xiàn)。注意，這些動(dòng)效只能應(yīng)用在特殊內(nèi)容數(shù)量少、質(zhì)量高的場(chǎng)景，否則會(huì)過于干擾。

視頻形態(tài)擴(kuò)展動(dòng)效

知識(shí)形態(tài)擴(kuò)展動(dòng)效

案例二：用戶在手淘中關(guān)注某個(gè)頻道后，手淘首頁(yè)會(huì)提供進(jìn)入該頻道的快捷入口，這個(gè)邏輯通過文案很難清晰的表達(dá)，因而采用了直觀的動(dòng)效呈現(xiàn)。

關(guān)注頻道后的提示

實(shí)際項(xiàng)目中的動(dòng)效產(chǎn)出方法

上文分別介紹了流程級(jí)和界面級(jí)動(dòng)效的設(shè)計(jì)建議，那么在實(shí)際項(xiàng)目設(shè)計(jì)中，我們需要有什么樣的產(chǎn)出呢？

依據(jù)設(shè)計(jì)稿所起的作用，大致分為3種：

3個(gè)階段的不同產(chǎn)出物

1、用于實(shí)操的demo：根據(jù)自己所希望表達(dá)的側(cè)重點(diǎn)（流程還是細(xì)節(jié)？）選用一種工具完成全部設(shè)計(jì)；

2、用于演示的視頻：可以同時(shí)使用兩種工具完成不同部分的設(shè)計(jì)，分別錄制視頻再合并；

3、用于開發(fā)的方案：對(duì)需要?jiǎng)討B(tài)呈現(xiàn)的部分單獨(dú)提供動(dòng)效設(shè)計(jì)稿及說明等產(chǎn)出物，然后再將所有設(shè)計(jì)以Keynote等載體整合起來。

手淘在動(dòng)效設(shè)計(jì)過程中，也摸索出了一套便于與開發(fā)同學(xué)溝通、最優(yōu)最快實(shí)現(xiàn)設(shè)計(jì)效果的設(shè)計(jì)產(chǎn)出方法。產(chǎn)出物包括2部分：

1、效果演示demo和視頻：使開發(fā)同學(xué)快速了解設(shè)計(jì)效果；以寶貝詳情主圖的擴(kuò)容與評(píng)價(jià)聯(lián)動(dòng)氣泡為例：

效果演示和視頻

2、動(dòng)效參數(shù)文檔：將自己在設(shè)計(jì)動(dòng)效時(shí)所設(shè)置的全部參數(shù)，翻譯為開發(fā)可以輕松讀懂的圖形表達(dá)方式。對(duì)于比較復(fù)雜的動(dòng)效，雖在撰寫文檔時(shí)會(huì)多花一些功夫，但能夠讓開發(fā)一次性還原出理想的設(shè)計(jì)效果，免去后期反復(fù)溝通修改的麻煩。

下面以手機(jī)淘寶首頁(yè)的2018年雙11主會(huì)場(chǎng)入口為例，說明動(dòng)效設(shè)計(jì)的輸出方式。

我們選用Principle制作了所有動(dòng)效，整體效果如下：

手機(jī)淘寶首頁(yè)的2018年雙11主會(huì)場(chǎng)入口

可以看出，動(dòng)效包含以下幾個(gè)部分：

1、主會(huì)場(chǎng)入口背景圖旋轉(zhuǎn)

2、主會(huì)場(chǎng)商品圖及按鈕出現(xiàn)

3、“立即搶購(gòu)”按鈕文案切換

我們要分別輸出以上3部分的視頻示意以及具體的動(dòng)效參數(shù)。以其中相對(duì)復(fù)雜的第2部分“主會(huì)場(chǎng)商品圖的出現(xiàn)和切換”為例，提供給開發(fā)的視頻如下。注意在這個(gè)案例中，因?yàn)殚_發(fā)是針對(duì)圖形元素的容器來編寫動(dòng)效，所以我們需要將圖形抽象為容器。

經(jīng)抽象為圖形元素容器的交付版本

同時(shí)需要提供給開發(fā)的是動(dòng)效參數(shù)。下圖是我們使用的參數(shù)圖形化表達(dá)方式，縱向?yàn)楦鱾€(gè)元素，橫向?yàn)閯?dòng)效時(shí)間軸。

動(dòng)效參數(shù)產(chǎn)出物

實(shí)際上，各位同學(xué)也可以根據(jù)自己的實(shí)際情況來繪制，原則是清晰明確即可。

結(jié)語(yǔ)

從合理的工具選型，到嚴(yán)謹(jǐn)清晰的文檔交付，技法層面的干貨就寫到這里。文章的最后，筆者想談的是互聯(lián)網(wǎng)產(chǎn)品中動(dòng)效初心。

動(dòng)效并非炫技的手段，而是實(shí)實(shí)在在用于銜接用戶在各個(gè)體驗(yàn)散點(diǎn)之間的潤(rùn)滑劑，符合用戶心理預(yù)期、不打擾用戶，甚至讓用戶幾乎無所察覺的動(dòng)效，才是真正優(yōu)秀的動(dòng)效。

許多創(chuàng)意網(wǎng)站上初見確實(shí)驚艷的動(dòng)效，如果在用戶實(shí)際使用中過度使用，輕則有拖沓之感，重則引起焦躁。這一原則對(duì)于旨在讓用戶“買買買”更的淘寶而言，尤為重要。

動(dòng)效技法只是基本功，在“不打擾”中體現(xiàn)同理心和精巧的構(gòu)思，是動(dòng)效設(shè)計(jì)更重要的導(dǎo)向。重劍無鋒，大巧不工，與所有Motion designers共勉。

藍(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ì)

評(píng)論(0) 瀏覽(2659)

172019-4

看太多網(wǎng)上的靈感創(chuàng)意素材，也是一種設(shè)計(jì)時(shí)代病？

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

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

互聯(lián)網(wǎng)讓全世界都無線互聯(lián)，大家可以無視距離隨時(shí)瀏覽世界另外一頭的設(shè)計(jì)師所上傳的設(shè)計(jì)作品。無論是 Dribbble、Behance、Pinterest 還是國(guó)內(nèi)的各大社交媒體，想瀏覽別人作品獲取靈感，幾乎是0成本的事情。那么這樣做對(duì)于做設(shè)計(jì)、激發(fā)靈感進(jìn)行創(chuàng)造，真的有好處嗎？它所引發(fā)的抄襲的問題，其實(shí)是最現(xiàn)實(shí)可見的，對(duì)此，昨天所發(fā)布的文章《如何界定借鑒和抄襲？看這7位設(shè)計(jì)大咖怎么說！》里，7位來自世界各地的設(shè)計(jì)師，已經(jīng)對(duì)此發(fā)表了看法，而今天的文章里，99U 邀請(qǐng)了三位頂尖的創(chuàng)意人，闡述他們?nèi)绾慰创@種設(shè)計(jì)師中的「時(shí)代病」。

不斷上網(wǎng)瀏覽別人的作品這種「靈感時(shí)代病」對(duì)于做設(shè)計(jì)激發(fā)創(chuàng)意而言，到底有哪些利弊？在的設(shè)計(jì)辯論中，Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 對(duì)無休止的靈感素材的視覺進(jìn)行了權(quán)衡分析。

插畫師 Nadine Kolodziey

過于關(guān)注在線設(shè)計(jì)靈感類素材，會(huì)讓設(shè)計(jì)思路趨于千篇一律，扼殺創(chuàng)意。這就是為什么我們必須明智地管理我們的個(gè)人信息流?！瀹嫀?nbsp;Nadine Kolodziey

我們每時(shí)每刻都在上網(wǎng)，這意味著我們將會(huì)不斷地接觸到各種各樣的視覺刺激。

如果你總是在公交車上或休息時(shí)關(guān)注別人的設(shè)計(jì)作品，那么你就會(huì)不自覺地把它融入到自己的作品中。很快你就會(huì)意識(shí)到：「糟了，我剛剛做了一些看起來和其他人完全一樣的東西?！鼓銜?huì)發(fā)現(xiàn)，你在不斷地復(fù)制和重復(fù)別人的東西，盡管可能一開始是下意識(shí)的，但最終你會(huì)成為潮流的一部分。你忽略了你個(gè)人獨(dú)特的視角，別人的作品開始影響你的判斷和直覺。

而屬于你自己的那部分最獨(dú)特的東西，才是最有力道的。

我完全理解為什么人們想成為潮流的一部分?？蛻艨赡芟胍恍┤霑r(shí)的東西——在特定的圈子里以特定的方式行事，這樣做是有所幫助的。但最終這種做法所帶來的同質(zhì)化，對(duì)雙方的發(fā)展都會(huì)有所制約。插畫師在他們的作品中沒有個(gè)性，所有的客戶都在購(gòu)買類似的風(fēng)格——這意味著他們的品牌缺乏獨(dú)特性。

如果你想獲得靈感，看其他的創(chuàng)意作品并不是最好的選擇。

看看其他的設(shè)計(jì)作品固然重要，這可以讓你緊跟行業(yè)發(fā)展步伐，但是要適度。如果你想獲得靈感，看其他的創(chuàng)意作品并不是最好的選擇。當(dāng)我在網(wǎng)上關(guān)注其他插畫家的作品時(shí)，我個(gè)人很難受到啟發(fā)。我已經(jīng)使用 Instagram 兩年半了。起初我總是看其他插畫家的作品，這是我的本職工作，我熱愛插畫。但后來我發(fā)現(xiàn)，這阻礙了我的創(chuàng)作潛力。

我開始注意到我的配色方案與其他人的相似。我注意到，看其他的作品降低了自己嘗試新事物所需的勇氣。當(dāng)我看到另一位插畫家的作品時(shí)，我不可能洞悉他的創(chuàng)作潛力。當(dāng)我在模仿他人的時(shí)候，我不可能有屬于自己的獨(dú)特創(chuàng)造力。

但是這個(gè)問題并非是無解的。解決之道就在于有選擇地關(guān)注?？赐碌淖髌泛涂匆话愕膱D片是有區(qū)別的。我對(duì)線上的靈感素材很感興趣，但是我更多地將這些素材視作為一個(gè)個(gè)「小貼士」，因此我注重于管理我的社交媒體所關(guān)注的賬號(hào)。我不再關(guān)注 Instagram 上的其他插畫家，而是關(guān)注那些在審美上吸引人的內(nèi)容。例如，我將關(guān)注那些收集不同尋常的石頭的人，或者為擺放得精美的和風(fēng)食物拍照的人。

我特別喜歡「I’m Google」這個(gè)賬號(hào)，它不是按主題而是按視覺來排列圖片。當(dāng)我看到這樣的圖片時(shí)，尤其是當(dāng)我開始著手準(zhǔn)備新項(xiàng)目的時(shí)候，它們會(huì)立即在我的腦海中激發(fā)出新的概念和全新的思路。這些資源成為我的靈感來源：當(dāng)我滾動(dòng)鼠標(biāo)時(shí)，我將看到來自外太空的巖石圖像，它的形狀將啟發(fā)我如何安排構(gòu)圖。

創(chuàng)意總監(jiān) Thomas Kronbichler

線上靈感素材固然可以鼓勵(lì)國(guó)際交流和對(duì)話，但問題出現(xiàn)在這些圖像在傳播的時(shí)候脫離了相關(guān)語(yǔ)境。——Thomas Kronbichler Mut工作室的創(chuàng)始人創(chuàng)意總監(jiān)

在 Mut 工作室，我們是當(dāng)之無愧的互聯(lián)網(wǎng)擁簇，我們從不害怕靈感素材過載這種問題。我們是阿爾卑斯山脈中部一個(gè)叫做海蒂·蘭德小鎮(zhèn)上的一個(gè)小工作室，互聯(lián)網(wǎng)不僅為我們提供了來自世界各地令人嘆服的靈感，而且提供了一個(gè)展示自己作品的平臺(tái)，這在10年前是不可想象的。

正是因?yàn)閳D片可以在網(wǎng)上廣泛地傳播，我們才能讓歐洲和美國(guó)的用戶看到我們的作品。由于有了在線訂閱和社交媒體，平面設(shè)計(jì)社區(qū)現(xiàn)才有了如今繁榮的模樣。當(dāng)然，這也有負(fù)面影響，很多人說如今平面設(shè)計(jì)在審美上變得太相似了。但積極的一面是，現(xiàn)在有更多的平面設(shè)計(jì)作品涌現(xiàn)出來。任何地方的人都可以進(jìn)入這個(gè)行業(yè)而不再受到地域的限制，平面設(shè)計(jì)行業(yè)變得更具包容性。例如，歐洲各地的小鎮(zhèn)上都會(huì)有人在嘗試更瘋狂的創(chuàng)作，我們能透過網(wǎng)絡(luò)在不同的地方跟進(jìn)觀察，支持彼此。豐富的網(wǎng)絡(luò)靈感圖片的流通，最終有利于平面設(shè)計(jì)作為一種藝術(shù)形式而廣泛存在。

我并不是受到某張?zhí)囟ǖ膱D片啟發(fā)，而是在聽設(shè)計(jì)師講述設(shè)計(jì)思路的過程中獲益良多。

問題是對(duì)此互聯(lián)網(wǎng)并沒有過多關(guān)注。一些博客和自媒體上并沒有關(guān)于圖片來源的解釋。為朋友設(shè)計(jì)的項(xiàng)目和為大公司做的項(xiàng)目都在同一個(gè)空間中流通，這很有趣，但同時(shí)也弱化了應(yīng)有的差異化和環(huán)境。

作品背后的故事，以及設(shè)計(jì)過程中各種問題的解決過程，才是真正重要的內(nèi)容。我并不會(huì)受到某張?zhí)囟▓D片的啟發(fā)，而是在聽設(shè)計(jì)師講述設(shè)計(jì)思路的過程中獲益良多。了解設(shè)計(jì)師的獨(dú)特理念，則更有可能啟發(fā)我，我對(duì)設(shè)計(jì)師處理客戶關(guān)系的部分也很感興趣。當(dāng)然，這一切是不能用一張簡(jiǎn)單的圖像來進(jìn)行概括的。

我已經(jīng)不再瀏覽 Tumblr 和 Pinterest，因?yàn)槲易罡信d趣的點(diǎn)，是了解一個(gè)問題是如何解決的。最終，我在設(shè)計(jì)師會(huì)議上發(fā)言的視頻實(shí)錄中獲得了最多的靈感。聽設(shè)計(jì)師們講述作品誕生的過程是最令人振奮的。我從一個(gè)人如何構(gòu)建一個(gè)項(xiàng)目，以及如何實(shí)現(xiàn)它的過程中學(xué)到了很多。我喜歡聽他們談?wù)摽蛻絷P(guān)系，講述他們遇到的困難以及如何克服它們。確切地說，更能鼓舞人心的是設(shè)計(jì)態(tài)度和思維方式。

在阿爾卑斯山的工作室中足不出戶，我就可以看 Michael 所有的視頻。

例如，就在上周，我狂看了所有 Michael Bierut 在線演講的視頻。我喜歡他展示作品的方式，喜歡他大方地和別人分享成果，我欽佩的是他的工作態(tài)度。在阿爾卑斯山的工作室中足不出戶，我就可以看遍邁克爾所有的演講視頻，這簡(jiǎn)直太棒了。

藝術(shù)總監(jiān) Polina Joffe

對(duì)正在發(fā)生的事情有所知覺是非常重要的，而上網(wǎng)獲取靈感會(huì)簡(jiǎn)化這個(gè)過程?！?a target="_blank" rel="noopener noreferrer" class="external" style="color:#0DA4D3;text-decoration-line:none;transition:none 0s ease 0s;">Polina Joffe，藝術(shù)總監(jiān)和平面設(shè)計(jì)師

如果你知道別人在做什么，你可以選擇參與其中，也可以選擇拒絕。而形成自己的觀點(diǎn)并做出明智決策的前提是你足夠了解。

我一直在關(guān)注其他人在網(wǎng)上會(huì)做什么，我也會(huì)在博客和社交媒體上上傳一些實(shí)用的干貨。當(dāng)涉及到具體的項(xiàng)目時(shí)，我會(huì)做具體的項(xiàng)目研究。我們會(huì)從互聯(lián)網(wǎng)上獲得大量的靈感，這使得研究階段變得非常簡(jiǎn)單和。我經(jīng)常會(huì)想起設(shè)計(jì)師們以前在社交媒體上使用過的概念和想法，然后我會(huì)把這些想法和我自己的想法進(jìn)行重新轉(zhuǎn)化，組合并且更新，這樣它們就可以運(yùn)用在我的設(shè)計(jì)大綱中了。

瀏覽在線靈感素材，然后它們會(huì)形成屬于我自己的一個(gè)巨大的視覺詞典，里面有我腦海中所有的概念和方法，每當(dāng)我開始一項(xiàng)新的任務(wù)時(shí)，我都可以沉浸其中。

我們經(jīng)常談?wù)搧碜詢?nèi)心的創(chuàng)造力，但我不確信我是否真的要相信這一點(diǎn)。萬(wàn)物皆有源頭。

我最近為泰特倫敦美術(shù)館的教育團(tuán)隊(duì)做了一個(gè)項(xiàng)目。這個(gè)項(xiàng)目是針對(duì)年輕人的。首先，如果你的目標(biāo)受眾是年輕人，了解年輕人都在做什么是很重要的事情了，因?yàn)檫@些信息很有參考價(jià)值。你需要運(yùn)用觀眾能夠理解的視覺語(yǔ)言。在項(xiàng)目的研究階段，我看了其他設(shè)計(jì)師是如何處理和學(xué)習(xí)這些屬于年輕人的理念的。最初我想用筆記本和活頁(yè)夾做點(diǎn)什么。然后我想起了我在網(wǎng)上看到的那些用活頁(yè)夾或記事本紙做的項(xiàng)目，然后我回去重新又看了一遍，看了其他人如何處理類似的主題，由此激發(fā)了我的新想法。

我們經(jīng)常談?wù)搧碜詢?nèi)心的創(chuàng)造力，但我不確信我是否真的要相信這一點(diǎn)。萬(wàn)物皆有源頭。我認(rèn)為創(chuàng)造力通常是學(xué)習(xí)前人如何混搭各種想法，然后自己進(jìn)行特定的調(diào)整組合，二次創(chuàng)造。

誠(chéng)然，視覺交流的發(fā)展是一部復(fù)制、更新、轉(zhuǎn)移的歷史。但重復(fù)別人已經(jīng)做了太多遍的東西，并使用類似的元素來直接竊取它們是有危險(xiǎn)的。當(dāng)你在做研究獲取靈感時(shí)，你必須通過多種方式參考海量的資源。如果我們能妥善地使用現(xiàn)有的大量圖像，就能鼓勵(lì)創(chuàng)新，跟上時(shí)代發(fā)展的步伐。

藍(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ù)。

評(píng)論(0) 瀏覽(2783)

162019-4

玩轉(zhuǎn)javascript異步編程

seo達(dá)人

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

一般知道，js腳步語(yǔ)言的執(zhí)行環(huán)境是單線程的，就是它會(huì)等一個(gè)任務(wù)完成，才會(huì)進(jìn)行第二個(gè)任務(wù)，然后一直向下進(jìn)行，這樣的執(zhí)行環(huán)境簡(jiǎn)單，但是處理不了復(fù)雜的運(yùn)用，當(dāng)一個(gè)請(qǐng)求需要非常舊的時(shí)間的時(shí)候，下一個(gè)流程就會(huì)被擱淺，如果長(zhǎng)時(shí)間得不到反饋，進(jìn)程就這樣的奔潰了。

為了解決這個(gè)硬性需求，Javascript語(yǔ)言提出了二種語(yǔ)言模式：同步（Synchronous）和異步（Asynchronous）。

異步的幾種常用方法

回調(diào)函數(shù)

訂閱和發(fā)布模式

Promise

generator

async/await

回調(diào)函數(shù)方法

通過把一個(gè)函數(shù)(callback)作為參數(shù)傳入另一個(gè)函數(shù)，當(dāng)滿足一定條件的時(shí)候，就執(zhí)行callback函數(shù)。

用法：

通過回調(diào)函數(shù)的方式處理異步，是在異步早期的情況，其中jquery中的很多都是通過callback來實(shí)現(xiàn)回調(diào)的。但是這種模式代碼編寫比較耦合，不利于代碼維護(hù)。

發(fā)布訂閱模式

pub/sub模式是js設(shè)計(jì)模式中的一種，本身是借鑒于java的模式，但是在處理異步處理的時(shí)候非常有作用。通過一個(gè)信息中心EventCenter 來處理的監(jiān)聽(on)和觸發(fā)(triggle)。

通過pub/sub模式，我們可以在信息中心清楚的看到有多少信號(hào)來源，方便的集中管理，更加方便于模塊化的管理，但是如果整個(gè)項(xiàng)目都使用pub/sub模式的話，流程就變得不太清晰了，數(shù)據(jù)的得到和數(shù)據(jù)的處理分開，對(duì)于后期的維護(hù)也是一個(gè)很大的問題。

Promise

Promise構(gòu)造函數(shù)成為承諾，它分為三種狀態(tài)resolve, reject, pending ,一旦狀態(tài)從pending改為其它2個(gè)狀態(tài)之后，就不能修改了，就一個(gè)承諾一樣。

Promise接收2個(gè)參數(shù)resolve , reject，分別表示成功后執(zhí)行和失敗后執(zhí)行，可以通過實(shí)例的then()方法傳遞對(duì)于的函數(shù)。

這里看了之后，你可能會(huì)說，這個(gè)和異步處理有什么聯(lián)系嗎？你思考一下，當(dāng)一個(gè)異步操作后，我們可以不去管它什么時(shí)候結(jié)束，什么時(shí)候出錯(cuò)，就像一個(gè)人承諾了，我只需要按照他的承諾去當(dāng)這個(gè)事情已經(jīng)被處理好了，是不是方便很多，下面直接上手一個(gè)例子。

我完全不用擔(dān)心它里面怎么實(shí)現(xiàn)了，反正它已經(jīng)承諾了會(huì)給我結(jié)果，我只需要通過then()方法去接受，我需要得到的值就可以了。

Promise.resolve(value) value可以是三種值

單個(gè)值

一個(gè)promsie實(shí)例

一個(gè)thenable對(duì)象

Promise.resolve(value).then((value) => {})

處理一個(gè)請(qǐng)求依賴另一個(gè)請(qǐng)求的情況

如果一個(gè)請(qǐng)求的結(jié)果是下一個(gè)請(qǐng)求的參數(shù)，如果我們使用原始的請(qǐng)求方法，就是出現(xiàn)一個(gè)像右的箭頭的回調(diào)地獄。

一層層嵌套，非常的恐怖，不利于維護(hù)。那么通過prmise怎么處理回調(diào)地獄呢？

上面處理回調(diào)地獄是不是看著方便很多，代碼也簡(jiǎn)單命令，依賴性也很強(qiáng)，后面我們會(huì)繼續(xù)通過async/await繼續(xù)簡(jiǎn)化。

處理多個(gè)請(qǐng)求并發(fā)的情況（不需要管服務(wù)器的返回順序）

Promise.all(arr) 接受一個(gè)promise實(shí)例的數(shù)組，可以并發(fā)多個(gè)請(qǐng)求給服務(wù)器，但是并不能保證接受到的先后順序，這個(gè)取決于服務(wù)器的處理速度。

處理多個(gè)請(qǐng)求并發(fā)，并且需要保證返回?cái)?shù)據(jù)的順序（運(yùn)用場(chǎng)景比較少）

上面一個(gè)方法并不會(huì)保證請(qǐng)求返回的結(jié)果，按照你發(fā)送的順序返回，如果我想把完整的響應(yīng)的結(jié)果按照我

希望的順序返回給我，那應(yīng)該怎么辦呢？

這樣，會(huì)等待每一個(gè)請(qǐng)求完成后，并把得到的數(shù)據(jù)push到totalData中，就可以按照順序得到我們想要的值了。當(dāng)然使用async/await會(huì)更加的方便。之后我們會(huì)講解。

generator構(gòu)造器

generator是一個(gè)構(gòu)造器，generator函數(shù)執(zhí)行并不會(huì)執(zhí)行函數(shù)體內(nèi)部部分，而是返回一個(gè)構(gòu)造器對(duì)象，通過構(gòu)造器對(duì)象的next()方法調(diào)用函數(shù)主體，并且每當(dāng)遇到y(tǒng)ield都會(huì)暫停執(zhí)行，并返回一個(gè)對(duì)象。

注意yield本身是不會(huì)反悔內(nèi)容的，只是給構(gòu)造器對(duì)象返回了內(nèi)容，如果想yield表達(dá)式也返回內(nèi)容，可以通過給下一個(gè)next()傳遞參數(shù)。

通過next()傳遞參數(shù)，我們可以做到值向內(nèi)部傳遞，對(duì)于后面的異步處理很有幫助。

generator異步運(yùn)用

利用構(gòu)造器的暫停和繼續(xù)的功能，我們可以很好的處理異步請(qǐng)求，得到數(shù)據(jù)后再進(jìn)行其他內(nèi)容。主要是運(yùn)用yield表達(dá)式返回一個(gè)promise對(duì)象的原理。

這樣我們就得到了接口請(qǐng)求的數(shù)據(jù)，相比于之前的promise函數(shù)的書寫是不是要簡(jiǎn)單很多。和同步是一樣的操作。

如果我們想內(nèi)部對(duì)得到的數(shù)據(jù)進(jìn)行進(jìn)一步的處理呢？

簡(jiǎn)單的co模塊處理generator多個(gè)函數(shù)請(qǐng)求

從上面我的調(diào)用方法就可以看出，利用Promise + generator的異步處理不斷地通過then()方法處理數(shù)據(jù)。有沒有一個(gè)方式是我可以直接運(yùn)行一個(gè)函數(shù)，然后就可以得到我想要的值。例如：

網(wǎng)上已經(jīng)封裝了很多的方法，例如常見的run庫(kù)，co函數(shù)就是來處理這樣的處理方式。但是當(dāng)我們發(fā)送多個(gè)請(qǐng)求的時(shí)候，可能你會(huì)這樣寫：

這樣寫是會(huì)發(fā)送請(qǐng)求，但是并不是并發(fā)多個(gè)請(qǐng)求，而是等第一個(gè)請(qǐng)求p1之后，再進(jìn)行第二個(gè)請(qǐng)求p2，在性能優(yōu)化方面是不利的，也不符合我們的要求，怎么做到2個(gè)請(qǐng)求是獨(dú)立的，并且我們還可以通過得到2個(gè)請(qǐng)求的結(jié)果后，進(jìn)行其他請(qǐng)求。或許我們可以這樣：

這樣寫是不是和我們之前寫的Promise.all()很像？所以還可以改成這樣的：

async/await異步處理

ES7出現(xiàn)了async/await進(jìn)行異步的處理，使得異步操作就像同步代碼一樣簡(jiǎn)單，方便了使用，由于async/await內(nèi)部封裝了generator的處理，所有就很少有人用generator來處理異步了，但是在異步的推動(dòng)中g(shù)enerator起到了很大的作用。

await：后面接受一個(gè)promise實(shí)例

**async: 返回一個(gè)promise對(duì)象 **

一個(gè)簡(jiǎn)單的異步請(qǐng)求

上面的例子是不是和generator中的異步請(qǐng)求很像？可以像同步一樣的編寫代碼，但是相比generator，await后面加上promise后直接返回相應(yīng)的數(shù)據(jù)，不像yield還需要從外部傳入。

處理多個(gè)請(qǐng)求并發(fā)的情況（不需要管服務(wù)器的返回順序）

用async/await處理多個(gè)請(qǐng)求并發(fā)，由于await后面需要添加Promise實(shí)例，是不是腦袋里面一下子就想到了一個(gè)Promise.all()

你可能會(huì)很好奇，為什么不需要像generator那樣通過額外的函數(shù)來調(diào)用，因?yàn)閍sync已經(jīng)幫你想好了，內(nèi)部已經(jīng)調(diào)用了，是不是很爽？

處理多個(gè)請(qǐng)求并發(fā)，并且需要保證返回?cái)?shù)據(jù)的順序（運(yùn)用場(chǎng)景比較少）

如果數(shù)據(jù)中沒有相互的聯(lián)系，但是又想一個(gè)個(gè)發(fā)送，可以這樣

藍(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ù)。

評(píng)論(0) 瀏覽(2489)

162019-4

UX七大黃金定律在UI中的運(yùn)用

用心設(shè)計(jì)

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

好的UI設(shè)計(jì)師應(yīng)該是理論結(jié)合實(shí)踐，好的理論是指導(dǎo)實(shí)踐，所以今天我?guī)砹诉@一篇文章。講講什么是黃金ux七大定律以及它們?nèi)绾卧赨I中的運(yùn)用。

1、費(fèi)茲定律

費(fèi)茲定律（fitts’law) 是心理學(xué)家 paul fitts 所提出的人機(jī)界面設(shè)計(jì)法則，主頁(yè)定義了游標(biāo)移動(dòng)到目標(biāo)之間的距離，目標(biāo)的大小和所花費(fèi)的時(shí)間之間的關(guān)系。

定律內(nèi)容是從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來決定，到目標(biāo)的距離和目標(biāo)的大小

用數(shù)學(xué)公式表示為 時(shí)間T=a+blog2(D/W+1)

用這張圖來說明，當(dāng)d(起始點(diǎn)到目標(biāo)之間的距離）越長(zhǎng)，使用者所花費(fèi)的時(shí)間越多；而當(dāng)w（目標(biāo)物平行于運(yùn)動(dòng)軌跡的長(zhǎng)度）越長(zhǎng)，則花費(fèi)的時(shí)間越少，使用的效能也比較好。

我們來看新浪微博的轉(zhuǎn)發(fā)功能，因?yàn)殡S著功能的復(fù)雜性，轉(zhuǎn)發(fā)功能包含了下一層級(jí)三個(gè)子功能，分別為快轉(zhuǎn)，轉(zhuǎn)發(fā)，分享。這個(gè)轉(zhuǎn)發(fā)icon一觸發(fā)，在很近的距離，3個(gè)點(diǎn)擊目標(biāo)也設(shè)計(jì)的很大這樣容易很快的操作，利用費(fèi)茲定律，提升了用戶的效能。

2、席克定律

當(dāng)你走近一家餐廳，你看著琳瑯滿目的菜品是不是無從下手。在生活日常中你會(huì)對(duì)各種各樣的選擇而困擾，其實(shí)有時(shí)候不是你的問題，而是對(duì)方給予你的選擇太多。

Hick’s Law (席克定律)中說道：“一個(gè)人面臨的選擇（n）越多，所花費(fèi)做出決定的時(shí)間（T)就越長(zhǎng)。

用數(shù)學(xué)公式表達(dá)為 RT=a+b log2(N)

RT：反應(yīng)所需時(shí)間
a：與做決定無關(guān)的花費(fèi)時(shí)間（閱讀，操縱花費(fèi)的時(shí)間）
b：根據(jù)對(duì)選項(xiàng)認(rèn)識(shí)的處理時(shí)間
n：具有可能性的相似答案總數(shù)

劃重點(diǎn)

當(dāng)選擇增加時(shí)，我們做決定的時(shí)間就會(huì)相應(yīng)增加

如果在你的服務(wù)，產(chǎn)品中“時(shí)間就是關(guān)鍵”，應(yīng)該將做決定的選項(xiàng)減少到最少，以減少所需反應(yīng)的時(shí)間，降低犯錯(cuò)的概率。也可以對(duì)選項(xiàng)進(jìn)行同類分類和多層次分布，提高用戶的使用效果。

3、奧卡姆剃刀原則

奧卡姆剃刀原則也被稱為：“簡(jiǎn)單有效原理“，由14世紀(jì)哲學(xué)家，圣方濟(jì)修士奧卡姆.威廉（William ofOccam)提出。這個(gè)原理告誡人們“不要浪費(fèi)較多東西去做用較少東西也可以做好的事情?！惫P者認(rèn)為和后來包豪斯密斯.凡德羅提出的：“少就是多”有異曲同工之妙。

一個(gè)簡(jiǎn)潔的網(wǎng)站能讓用戶快速找到他們所找到的東西，當(dāng)你在銷售產(chǎn)品時(shí)候尤為關(guān)鍵。如果你的網(wǎng)站充斥著很多無關(guān)緊要的東西。比如小彈窗，無用鏈接。用戶會(huì)因?yàn)椴荒芸焖僬业阶约合胍臇|西而關(guān)閉網(wǎng)站。

合理的使用奧卡姆剃刀原則，能更好的傳達(dá)你想要表達(dá)的內(nèi)容，更容易吸引廣告投放者，給訪客帶來更好的用戶體驗(yàn)。

4、泰思勒定律

泰思勒定律又被稱為：“復(fù)雜不滅定律”

中心思想是：“每一個(gè)程序都有必然有其與生俱來，無法縮減的復(fù)雜度，唯一的問題，就是誰(shuí)來處理它?！?

泰思勒定律定律認(rèn)為每個(gè)過程都有其固有的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了，你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。

從手機(jī)的演變過程來看，智能手機(jī)簡(jiǎn)化了物理操作按鍵，通過技術(shù)手段降低了手機(jī)操作的復(fù)雜度，尤其是復(fù)雜的交互手勢(shì)操作，雜度的降低是通過大量的技術(shù)和資金投入解決，體現(xiàn)了復(fù)雜守恒定律。

5、神奇數(shù)字7±法則

1956年喬治米勒對(duì)短時(shí)間記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人類大腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊，在記憶里5-9項(xiàng)信息后人的大腦后開始出錯(cuò)。

6、防錯(cuò)法則

防錯(cuò)原則是通過設(shè)計(jì)來將過失降低到最小化。該原則及時(shí)地告訴用戶哪里操作錯(cuò)了。比如在填寫表單時(shí)，系統(tǒng)給出及時(shí)地報(bào)錯(cuò)提示；重要、謹(jǐn)慎的操作，系統(tǒng)通常會(huì)有二次確認(rèn)；為用戶提供撤銷的機(jī)會(huì)；為用戶提供糾錯(cuò)的機(jī)會(huì)

7、接近法則

接近法則是格式塔理論中我們最熟悉的，也最常運(yùn)用的一項(xiàng)法則。當(dāng)對(duì)象離的太近時(shí)候，意識(shí)會(huì)覺得它們是相關(guān)的

我們來看看利用接近法則在移動(dòng)端的案例，相同的模塊這兩款app都用空間間隙來做出了區(qū)分，讓人在移動(dòng)的場(chǎng)景更能快速的尋找想要的信息。

總結(jié)

在UI設(shè)計(jì)中，不僅僅是為了美觀的界面，更要有有理有據(jù)，在設(shè)計(jì)時(shí)應(yīng)該學(xué)會(huì)運(yùn)用這些法則，不僅可以讓你的界面更專業(yè)，同時(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ì)

評(píng)論(0) 瀏覽(2997)

162019-4

作品粗糙不耐看？用實(shí)戰(zhàn)案例教你快速提升作品質(zhì)感！

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

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

質(zhì)感是什么？如何讓畫面擁有更高端的質(zhì)感？本文由質(zhì)感的原理出發(fā)，深入分析質(zhì)感表現(xiàn)所需要的要素，并通過實(shí)例來講解如何在作品中表現(xiàn)高端質(zhì)感。

很多同學(xué)在設(shè)計(jì)完成后，總是會(huì)發(fā)現(xiàn)頁(yè)面很單薄，導(dǎo)致整體看起來很粗糙、不耐看。究其原因，大多數(shù)是因?yàn)轫?yè)面缺乏質(zhì)感。

質(zhì)感，對(duì)于設(shè)計(jì)作品來說，是一個(gè)非常重要的視覺元素。它能夠提升作品的層次，讓整個(gè)作品更高端、更有品質(zhì)。

什么是質(zhì)感？

質(zhì)感，基本釋義為所表現(xiàn)的物體呈現(xiàn)出的物質(zhì)真實(shí)感和細(xì)膩的品質(zhì)感。這是一種視覺的綜合感受，會(huì)觸動(dòng)你的某種本能的綜合感官，讓你感覺非常舒服、非常爽。

我找了幾張比較富有質(zhì)感的圖片，大家可以感受一下這種感覺。

觀察完這些圖片后，你發(fā)現(xiàn)有什么共同點(diǎn)了嗎？我們可以試著來分析一下。

首先，物體本身的型是好看舒服的，并且細(xì)節(jié)足夠精致。

其次，在光的影響下，物體的表面呈現(xiàn)出細(xì)膩的光澤變化，以及通透而舒服的陰影，展現(xiàn)了豐富的層級(jí)關(guān)系。正是光的作用，讓這些視覺元素得以表達(dá)，讓我們沒有觸摸便能感知到這種質(zhì)感。

我們?cè)賮砜匆恍﹥?yōu)秀的擬物作品。大家對(duì)照一下，是否都遵循相同的要素。

觀察這些優(yōu)秀的擬物作品，為什么會(huì)覺得有質(zhì)感呢？首先圖標(biāo)很精致，它的形具有一定的美感。但是這不足以讓它富有質(zhì)感，關(guān)鍵是它也符合了上面所說的幾個(gè)質(zhì)感要素。

最后，我們可以總結(jié)一下，質(zhì)感產(chǎn)生的要素：

整體光感：符合視覺原理的整體光感。
細(xì)膩的漸變：通過色彩漸變所模擬出的真實(shí)的質(zhì)感和豐富的層次感，以及柔和舒服、符合光感的投影。
細(xì)節(jié)/紋理：精致的細(xì)節(jié)/紋理，讓畫面足夠精美和耐看。

所以除了作品本身足夠精美以外，整個(gè)作品的光感需要和諧統(tǒng)一。每個(gè)元素表現(xiàn)的色彩變化規(guī)律（漸變色）、投影大小和投影間的相互影響，都需要與光感嚴(yán)謹(jǐn)?shù)慕y(tǒng)一。

這就要求你在繪制所有元素時(shí)，需要去假定一個(gè)統(tǒng)一的光源，這樣才能讓物體擁有更真實(shí)的質(zhì)感。

我們已經(jīng)了解了質(zhì)感產(chǎn)生的原理，下面就開始實(shí)際案例。每一個(gè)步驟我都會(huì)講解思考的過程和原因，方便大家理解。

案例解析

1. 整體背景和主體框架繪制

建立畫布（1200 x 900）。用矩形工具繪制背景和主體框架（1100 x 700），圖層樣式為漸變疊加，光線方向統(tǒng)一。

漸變是為了模擬背景的質(zhì)感和在光線下的變化，兩層光線方向需要統(tǒng)一。背景顏色稍淺且飽和度低，符合遠(yuǎn)近的視覺規(guī)律。

2. 繪制投影和主體背景

復(fù)制矩形作為投影層，顏色調(diào)整為黑色，轉(zhuǎn)為智能對(duì)象后，加入高斯模糊效果。調(diào)整矩形圖層的模糊度和透明度，移到適當(dāng)位置。具體參數(shù)對(duì)照?qǐng)D中。投影的位置根據(jù)假定光源位置而定，使其符合視覺原理（詳見光線分析圖）。

繪制主體深色背景（1070 x 670），添加漸變疊加模式，漸變方向與前面保持一致。漸變的顏色對(duì)于質(zhì)感非常重要，恰當(dāng)且高級(jí)的漸變色，能夠在本質(zhì)上提升畫面質(zhì)感。而漸變方向則需要根據(jù)假定光源進(jìn)行判定。

為什么要這么繪制漸變與投影的位置呢？我繪制了一張光線分析圖，大家可以從圖中看出假定光源的位置，以此來確定漸變的方向以及投影的位置。

只有整體光感的統(tǒng)一，整個(gè)畫面才能表現(xiàn)出強(qiáng)烈的質(zhì)感。大家在繪制這一步時(shí)，需要用心體會(huì)假定光感的這個(gè)過程。

3. 將人物融入背景，提升發(fā)絲層次和質(zhì)感

放入人物圖片，圖層模式改為正片疊底。調(diào)整圖層透明度，添加蒙版使人物下半部分漸隱，與背景融合。

復(fù)制人物層，取消圖層模式和透明度。用選擇顏色命令提取發(fā)絲高光，添加蒙版抹去不需要的高光，圖層模式改為變亮模式，調(diào)整透明度使其融合進(jìn)人物。

為什么要做這一步呢？單純的人物在畫面中顯得太平了，所以需要豐富細(xì)節(jié)、增加層次。

4. 主體字體和投影繪制

輸入主體文字，圖層模式調(diào)整為漸變疊加，根據(jù)光源調(diào)整顏色漸變。案例中的英文字體為「Monotype Corsiva Regular」。這一步需要反復(fù)的嘗試，大家可以換一些字體嘗試一下。

復(fù)制一層作為投影，文本顏色改為黑色，圖層樣式設(shè)置為正片疊底，轉(zhuǎn)智能對(duì)象后模糊對(duì)象，調(diào)整圖層的透明度和大小，放在字體后面。字體的立體感依靠的仍然是統(tǒng)一的光源，需要想象字體在假定光源下的陰影關(guān)系。

投影能夠模擬真實(shí)感，需要若有若無的感覺，讓文字懸浮在圖層上面，豐富畫面層次。

5. 主體文字細(xì)節(jié)刻畫

根據(jù)字體的結(jié)構(gòu)，用形狀工具繪制出字體的立體關(guān)系。每一個(gè)形狀圖層繪制后需要兩層蒙版，一層為了限制字體范圍，一層為漸變蒙版。讓充滿立體感的文字懸浮于畫面中央，提升視覺中心的細(xì)節(jié)品質(zhì)。

6. 穿插細(xì)文與投影繪制

輸入細(xì)文，并復(fù)制一層作為陰影。不過因?yàn)樽煮w較小，距離拉遠(yuǎn)后投影肯定是看不清細(xì)節(jié)的，所以已經(jīng)模糊的若有若無，但還是需要有的。

表現(xiàn)文字穿插關(guān)系，讓「is an」懸浮于「L」上，并留下近距離投影。讓「attitude」穿過「e」字，遮擋部分文字。豐富的穿插和相互投影，進(jìn)一步增加主體文字的細(xì)節(jié)和層次，讓畫面細(xì)節(jié)豐富且更加耐看。

7. 繪制輔助圖形，增強(qiáng)畫面流動(dòng)感

為了豐富畫面細(xì)節(jié)，增強(qiáng)畫面流動(dòng)感，可以適當(dāng)加一些飄零的輔助元素。

繪制時(shí)需要注意的是，你需要明確整體視覺中心與運(yùn)動(dòng)的方向。輔助圖形沿著整體畫面，水平中心向右運(yùn)動(dòng)，你可以想象圖形散開后的畫面，并反復(fù)調(diào)整元素的合理位置。

如果沒有一定的規(guī)律，所有圖形就不像一個(gè)整體，就會(huì)看起來很亂。大家可以根據(jù)這點(diǎn)來判斷輔助元素是否需要進(jìn)一步調(diào)整。

8. 收尾工作，大功告成

最后，根據(jù)頁(yè)面需要，搭配上合適的元素，讓畫面更完整。

需要注意的一個(gè)細(xì)節(jié)是，由于所處的位置不同，這些元素在光照中呈現(xiàn)的顏色也會(huì)出現(xiàn)深淺變化，所以左邊的元素較淺，而右邊的元素會(huì)深一些。

怎么樣，是不是看起來并不難？

希望大家可以抽空認(rèn)真地跟著教程去嘗試一遍。只要你能夠理解每個(gè)步驟的目的，耐心地繪制每一個(gè)細(xì)節(jié)，相信你也能夠做出這種非常高端的質(zhì)感。

如果你能在制作時(shí)，用心思考和體會(huì)整個(gè)過程。就能在以后的作品中舉一反三，讓這個(gè)技能成為你自己的技能了。

藍(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ù)。

評(píng)論(0) 瀏覽(3681)

152019-4

js獲取video任意時(shí)間的畫面截圖

seo達(dá)人

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

首先就是要把視頻加載出來，然后使用canvas.getContext(‘2d’).drawImage(videoElement, 0, 0, canvas.width, canvas.height);獲取到當(dāng)前視頻時(shí)間的截圖，需要不同時(shí)間的video視頻圖，設(shè)置video的currentTime（單位秒），然后videoElement這個(gè)對(duì)象信息會(huì)實(shí)時(shí)更新。

如果是視頻是在阿里云OSS上就更方便了，poster=“http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4?x-oss-process=video/snapshot,t_6000,m_fast”

如果是要獲取上傳本地視頻預(yù)覽圖，可采用下面的方法，但有兼容性問題，目前測(cè)試移動(dòng)端安卓機(jī)只有Chrome瀏覽器支持，微信和QQ瀏覽器都無法響應(yīng)本地視頻的canplay事件。

<div contenteditable="true" id="in-box" style="width:1000px;margin: 20px auto;"></div>
<div style="width:1000px;margin: 20px auto;">
<input type="file" name="" accept="video/*" id="upload-ipt">
<div class="review" id="out-box"></div>
</div>

function getVideoImage() {
var obj_file = document.getElementById("upload-ipt");
var file = obj_file.files[0];
var blob = new Blob([file]), // 文件轉(zhuǎn)化成二進(jìn)制文件
url = URL.createObjectURL(blob); //轉(zhuǎn)化成url
if (file && /video/g.test(file.type)) {
var $video = $('<div><video controls src="' + url + '"></video></div><div> </div>');
//后面加一個(gè)空格div是為了解決在富文本中按Backspace時(shí)刪除無反應(yīng)的問題
$('#in-box').html($video);
var videoElement = $("video")[0];
videoElement.addEventListener("canplay", function (_event) {
var canvas = document.createElement("canvas");
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
console.log(videoElement.videoWidth)
canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
$("#out-box").html(img);
URL.revokeObjectURL(this.src); // 釋放createObjectURL創(chuàng)建的對(duì)象
console.log("loadedmetadata")
});
}else{
alert("請(qǐng)上傳一個(gè)視頻文件！");
obj_file.value = ""
}
};
藍(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ù)。

評(píng)論(0) 瀏覽(4625)

152019-4

交互設(shè)計(jì)定律-大白話解析席克定律

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

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

席克定律也是交互設(shè)計(jì)中非常重要的一部分

在視覺設(shè)計(jì)中也起到很重要的作用、會(huì)使用戶體驗(yà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ù)。

評(píng)論(0) 瀏覽(3141)

首頁(yè)

針對(duì)不同階段，選把趁手的兵器

1、廣義的動(dòng)效：流程Demo設(shè)計(jì)階段

2、微交互動(dòng)效：界面級(jí)設(shè)計(jì)階段

實(shí)際項(xiàng)目中的動(dòng)效產(chǎn)出方法

結(jié)語(yǔ)

插畫師 Nadine Kolodziey

創(chuàng)意總監(jiān) Thomas Kronbichler

藝術(shù)總監(jiān) Polina Joffe

異步的幾種常用方法

回調(diào)函數(shù)方法

Promise

Promise.resolve(value) value可以是三種值

處理一個(gè)請(qǐng)求依賴另一個(gè)請(qǐng)求的情況

處理多個(gè)請(qǐng)求并發(fā)的情況（不需要管服務(wù)器的返回順序）

generator構(gòu)造器

1、費(fèi)茲定律

2、席克定律

3、奧卡姆剃刀原則

4、泰思勒定律

5、神奇數(shù)字7±法則

6、防錯(cuò)法則

7、接近法則

總結(jié)

什么是質(zhì)感？

案例解析

分類

日歷

鏈接

個(gè)人資料

存檔

針對(duì)不同階段，選把趁手的兵器

1、廣義的動(dòng)效：流程Demo設(shè)計(jì)階段

1、費(fèi)茲定律

2、席克定律

4、泰思勒定律

5、神奇數(shù)字7±法則

7、接近法則

什么是質(zhì)感？