如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
2019草莓音樂節的主題是“循環世界Circular World”。
摩登天空聯合世界自然基金會(WWF)發起今年的音樂節主題“循環世界”，以環保為核心理念，攜手海內外環保機構對草莓音樂節進行多方位環保實踐，并聚合知乎、摩拜等多平臺力量影響年輕人，讓環保成為青年生活方式的一部分。
今年的主視覺海元素是被三個箭頭環繞的草莓星球，表達了“循環世界”的主題。風格延續了去年的樣式，色彩略有調整，并加入了太空元素。
今年的主視覺當然仍由摩登天空的當家工作室——MVM design label_工作室操刀。
這張是今年的主視覺海報。今年，MVM特地為各城市舉辦的2019草莓音樂節單獨設計了專門的海報，一樣的版式，不一樣的內容，既統一又包含新意。
2019草莓音樂節武漢站
2019草莓音樂節成都站
2019草莓音樂節西安站
2019草莓音樂節上海站
2019草莓音樂節長沙站
在今年3月30日的“地球一小時”公益活動中，草莓音樂節把自己的參與定義為“草莓星球一小時”。
而武漢OYO酒店與摩登天空聯合主辦的活動中，一張以“音樂滿房”為主題的插畫也分外有趣——原來大家為了迎接音樂節，都關上門在房間里引吭高歌呀…
音樂節配套周邊產品的銷售，推廣視覺設計也很有意思。
即使不是音樂迷，設計師對這樣的設計也無法抗拒吧！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
今天分享一款運維相關的B端產品，主要闡述自身的設計思路及產品的優化過程。B端產品功能聚焦、講究效能，對產品鏈路有著高流暢度與率的訴求。設計師在做B端產品的的時候要有全鏈路和小白用戶視角，以體驗及效率為先，我們需要協調全局一致性，遵循產品鏈路，在視覺上減少對于用戶的負擔和干擾，避免打斷用戶的使用流程，確保流暢、優質的用戶體驗。
在產品優化上，我們在每個版本迭代后，會對用戶進行訪談及收集意見反饋，建議設計師可以制定一套自有的用戶調研方式去了解用戶的想法和自己產品的不足之處，這樣的好處是可以讓用戶幫助你優化產品。
在產品的細節上我們可以深度地去挖掘和嘗試更好更優的設計方式，對設計師來說打磨和優化每一個細節正是B端產品的魅力所在。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
全局組件和局部組件
* 1.先定義組件 Vue.component('組件名', { 組件模板對象 })
* 注意: 組件名不要使用原生的標簽名, 若組件名定義時用的是駝峰命名法, 則調用時用中劃線分割后小寫
* 例如: 組件-->mtText 使用時--> <my-text></my-text>
* 2.配置組件的模板 注意: 組件的模板內容有且只有一個根元素
* 3.在視圖層里調用 ,用雙標簽
* 4.組件是一個獨立的作用域, 也可以看成一個特殊的vue實例, 可以有data, methods,computed等等
* 注意: 組件的data是函數, 函數中需要返回一個對象作為組件的data
全局組件案例
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
//全局組件
Vue.component('myComponent',{
//1.組件的內容/模板
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:{
// 組件名: {配置項}
"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">注冊</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>注冊組件</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'">注冊</a>
<!-- vue提供了一個標簽 component標簽(理解為一個占位符), 用來展示對應名稱的組件 :is屬性設置指定的組件名 -->
<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>注冊組件</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 }}
子組件的數據
</h1>
</template>
<template id="grandSon">
<h1>孫子組件的數據</h1>
</template>
<!--1.子組件不能訪問父組件的數據
2. 解決辦法: ①在引用子組件時, 通過屬性綁定 v-bind方法, 把需要傳遞給子組件的數據以綁定的形式傳過來
② 在子組件配置項里添加 props: ['傳遞過來的數據']-->
<script src="lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
father:'啊~~這是父組件的數據'
},
methods:{
},
//局部子組件
components:{
// 組件名: {配置項}
"myComponent":{
template:'#box1',
data(){
return {
msg:"哈哈"
}
},
//在子組件配置項里添加 props: ['傳遞過來的數據']
//注意: 組件中所有的props中的數據, 都是通過父組件傳遞給子組件的, props中的數據是只讀, 無法修改
props:['fromfather'],
methods:{
change(){
// this.fromfather = "被修改了"
}
},
//局部子子組件
components:{
'grandSon':{
template:'#grandSon'
}
}
}
}
})
</script>
</body>
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在手機淘寶中，大至鏈路的銜接，小至一個按鈕的點擊響應，動效是體驗無處不在的潤滑劑，為用戶每一步的操作提供了合理的預期與過渡。而通過動效銜接不同界面或不同響應狀態，無論對流暢直觀地表達流程意圖，還是精雕細琢讓體驗更絲滑的微動效，動效設計都是淘寶設計師日常工作中非常重要的一環。
動效是體驗鏈路散點間的“領路人”
針對項目不同階段、不同使用需要，針對性地選用的工具，輔以便于理解的交付方式，是設計和落地環節溝通提效的關鍵。
相比提及動效首先都會想到的巨無霸AE而言，Flinto、Principle、Kite、Adobe XD等許多專門為體驗設計量身打造的輕量級工具，更聚焦在互聯網產品設計的高頻功能上，多數工具都能快速輸出視頻或GIF，以及在移動端上進行實際的交互體驗。
為體驗設計量身打造的輕量級工具
這些工具在原型和動效快速表達方面獨特的敏捷、的優勢，讓它們逐漸成為迭代頻繁的國內互聯網行業許多設計團隊的新寵。
上述工具的核心功能都比較接近，各有千秋，差異多在于時間與屬性之間關聯的展現形式上，這里不做過多展開，也不做任何孰優孰劣的判斷。畢竟工具只是兵器，提起趁手的兵器快刀斬亂麻，才是設計功力的體現。
本文將結合手機淘寶的動效設計實際案例，介紹淘寶設計師們在項目過程中進行動效設計、并與開發溝通的經驗。
淘寶這樣的大型應用中，任意提及一個細分鏈路都頗具復雜度，每個場景或大或小的版本迭代背后，都是設計師從交互流程設計、具體界面的視覺設計，再到最終交付落地，經歷層層評審和修改完善的過程。
產品設計的2大不同階段
那么在不同階段，選用怎樣的工具更符合我們對“”的追求？下面將按階段拆分問題，分別進行分析：
產品流程、交互行為的設計與串聯，無論是作為可以實際體驗的可交互原型，還是純用作展示，實際上也是一種最基礎的廣義動效。
曾幾何時，交互流程的設計輸出物是用流程箭頭清晰標注每個控件交互行為的交互稿。
但在淘寶內各子產品“小步快跑”的版本迭代極度頻繁，每天提案、評審這類快速碰撞不斷的情況下，即使經過了合理的流程拆解、耦合度不是非常高的交互稿，對設計師而言改動返工量依然巨大。
更何況無論業務方還是設計內部評審時，其實沒有人有時間仔細閱讀你精心撰寫的交互說明。
只適合在交付開發階段采用的靜態交互文檔
（鞋類測碼功能為例）
因此，這類交互稿如今最大的用途只在交付開發的環節。在快速碰撞方案的階段，通過輕量級的動效工具迅速產出可交互原型是目前團隊內更同行的做法。在評審中直接演示，可以幫助團隊成員更好地對方案實際效果有一個更直觀的體驗。
在流程設計階段，Flinto是一個非常好用的工具。同為體驗設計專屬的輕量級設計軟件，Flinto和Principle有很多共通之處，也經常被一起比較，但底層思路都是通過定義元素的各項屬性變化來實現過渡。不過，兩者在定義方式上卻有比較大的不同，簡單概括來說，Flinto是通過元素的附加事件，而Principle則是通過不同畫板間的屬性差。
Flinto更擅長流程級表達
這點上的不同，決定了Flinto優勢在于流程級表達，而Principle更擅長界面級（或很短的流程級）交互細節表達。
以分享寶貝、邀請好友出主意的“幫我選”功能中的新建清單流程為例：
「幫我選」新建清單流程Demo
流程對應的Flinto實現方式如下：
「幫我選」新建清單流程對應的Flinto工程文件
產出流程Demo時，只需要表達基本的頁面結構與跳轉關系即可。轉場無需表達得很準確，以不引起誤解為原則即可，時間有限的情況下，最簡單的處理方式就是統一用漸隱漸現。
各種與頁面滾動位置有關的動效也暫時不用表達，例如下滑時頂欄的狀態過渡。同樣，也完全沒有必要讓每個元素都可點擊，這些交互細節以及分支用例，都更建議在交付開發階段通過交互說明表達，寥寥數語可能就足夠準確傳達了。
與頁面滾動位置聯動的動效，可以在界面級設計中細化
當產品流程確定后，進入界面級設計階段，就輪到對局部微動效逐一進行細化。
對不涉及位置聯動的交互動效而言，在Flinto和Principle中的制作成本相差無幾。例如純粹由點擊觸發的事件：
不涉及位置聯動的動效
但對于涉及位置聯動的動效，Principle就比Flinto的表現優秀很多了。
Principle更擅長界面級動效表達
Principle中，時間軸和位置聯動的設置比Flinto自由度更高，可以快速進行精細的設計和調整。例如在頁面上滑過程中，導航欄跟隨手指上滑動作而上移隱藏的動效：
導航欄隨手指上滑動作而上移隱藏
下面是一些來自淘寶近年已上線項目有趣的動效示例：
案例一：手機淘寶導購產品“有好貨”的商品列表中，會穿插視頻及知識內容，在這些特殊內容滑動到用戶視線中時會動態擴展，將內容自身特點完全呈現。注意，這些動效只能應用在特殊內容數量少、質量高的場景，否則會過于干擾。
視頻形態擴展動效
知識形態擴展動效
案例二：用戶在手淘中關注某個頻道后，手淘首頁會提供進入該頻道的快捷入口，這個邏輯通過文案很難清晰的表達，因而采用了直觀的動效呈現。
關注頻道后的提示
上文分別介紹了流程級和界面級動效的設計建議，那么在實際項目設計中，我們需要有什么樣的產出呢？
依據設計稿所起的作用，大致分為3種：
3個階段的不同產出物
1、用于實操的demo：根據自己所希望表達的側重點（流程還是細節？）選用一種工具完成全部設計；
2、用于演示的視頻：可以同時使用兩種工具完成不同部分的設計，分別錄制視頻再合并；
3、用于開發的方案：對需要動態呈現的部分單獨提供動效設計稿及說明等產出物，然后再將所有設計以Keynote等載體整合起來。
手淘在動效設計過程中，也摸索出了一套便于與開發同學溝通、最優最快實現設計效果的設計產出方法。產出物包括2部分：
1、效果演示demo和視頻：使開發同學快速了解設計效果；以寶貝詳情主圖的擴容與評價聯動氣泡為例：
效果演示和視頻
2、動效參數文檔：將自己在設計動效時所設置的全部參數，翻譯為開發可以輕松讀懂的圖形表達方式。對于比較復雜的動效，雖在撰寫文檔時會多花一些功夫，但能夠讓開發一次性還原出理想的設計效果，免去后期反復溝通修改的麻煩。
下面以手機淘寶首頁的2018年雙11主會場入口為例，說明動效設計的輸出方式。
我們選用Principle制作了所有動效，整體效果如下：
手機淘寶首頁的2018年雙11主會場入口
可以看出，動效包含以下幾個部分：
1、主會場入口背景圖旋轉
2、主會場商品圖及按鈕出現
3、“立即搶購”按鈕文案切換
我們要分別輸出以上3部分的視頻示意以及具體的動效參數。以其中相對復雜的第2部分“主會場商品圖的出現和切換”為例，提供給開發的視頻如下。注意在這個案例中，因為開發是針對圖形元素的容器來編寫動效，所以我們需要將圖形抽象為容器。
經抽象為圖形元素容器的交付版本
同時需要提供給開發的是動效參數。下圖是我們使用的參數圖形化表達方式，縱向為各個元素，橫向為動效時間軸。
動效參數產出物
實際上，各位同學也可以根據自己的實際情況來繪制，原則是清晰明確即可。
從合理的工具選型，到嚴謹清晰的文檔交付，技法層面的干貨就寫到這里。文章的最后，筆者想談的是互聯網產品中動效初心。
動效并非炫技的手段，而是實實在在用于銜接用戶在各個體驗散點之間的潤滑劑，符合用戶心理預期、不打擾用戶，甚至讓用戶幾乎無所察覺的動效，才是真正優秀的動效。
許多創意網站上初見確實驚艷的動效，如果在用戶實際使用中過度使用，輕則有拖沓之感，重則引起焦躁。這一原則對于旨在讓用戶“買買買”更的淘寶而言，尤為重要。
動效技法只是基本功，在“不打擾”中體現同理心和精巧的構思，是動效設計更重要的導向。重劍無鋒，大巧不工，與所有Motion designers共勉。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
互聯網讓全世界都無線互聯，大家可以無視距離隨時瀏覽世界另外一頭的設計師所上傳的設計作品。無論是 Dribbble、Behance、Pinterest 還是國內的各大社交媒體，想瀏覽別人作品獲取靈感，幾乎是0成本的事情。那么這樣做對于做設計、激發靈感進行創造，真的有好處嗎？它所引發的抄襲的問題，其實是最現實可見的，對此，昨天所發布的文章《如何界定借鑒和抄襲？看這7位設計大咖怎么說！》里，7位來自世界各地的設計師，已經對此發表了看法，而今天的文章里，99U 邀請了三位頂尖的創意人，闡述他們如何看待這種設計師中的「時代病」。不斷上網瀏覽別人的作品這種「靈感時代病」對于做設計激發創意而言，到底有哪些利弊？在的設計辯論中，Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 對無休止的靈感素材的視覺進行了權衡分析。
過于關注在線設計靈感類素材，會讓設計思路趨于千篇一律，扼殺創意。這就是為什么我們必須明智地管理我們的個人信息流?！瀹嫀?nbsp;Nadine Kolodziey
我們每時每刻都在上網，這意味著我們將會不斷地接觸到各種各樣的視覺刺激。
如果你總是在公交車上或休息時關注別人的設計作品，那么你就會不自覺地把它融入到自己的作品中。很快你就會意識到：「糟了，我剛剛做了一些看起來和其他人完全一樣的東西?！鼓銜l現，你在不斷地復制和重復別人的東西，盡管可能一開始是下意識的，但最終你會成為潮流的一部分。你忽略了你個人獨特的視角，別人的作品開始影響你的判斷和直覺。
而屬于你自己的那部分最獨特的東西，才是最有力道的。
我完全理解為什么人們想成為潮流的一部分?？蛻艨赡芟胍恍┤霑r的東西——在特定的圈子里以特定的方式行事，這樣做是有所幫助的。但最終這種做法所帶來的同質化，對雙方的發展都會有所制約。插畫師在他們的作品中沒有個性，所有的客戶都在購買類似的風格——這意味著他們的品牌缺乏獨特性。
如果你想獲得靈感，看其他的創意作品并不是最好的選擇。
看看其他的設計作品固然重要，這可以讓你緊跟行業發展步伐，但是要適度。如果你想獲得靈感，看其他的創意作品并不是最好的選擇。當我在網上關注其他插畫家的作品時，我個人很難受到啟發。我已經使用 Instagram 兩年半了。起初我總是看其他插畫家的作品，這是我的本職工作，我熱愛插畫。但后來我發現，這阻礙了我的創作潛力。
我開始注意到我的配色方案與其他人的相似。我注意到，看其他的作品降低了自己嘗試新事物所需的勇氣。當我看到另一位插畫家的作品時，我不可能洞悉他的創作潛力。當我在模仿他人的時候，我不可能有屬于自己的獨特創造力。
但是這個問題并非是無解的。解決之道就在于有選擇地關注?？赐碌淖髌泛涂匆话愕膱D片是有區別的。我對線上的靈感素材很感興趣，但是我更多地將這些素材視作為一個個「小貼士」，因此我注重于管理我的社交媒體所關注的賬號。我不再關注 Instagram 上的其他插畫家，而是關注那些在審美上吸引人的內容。例如，我將關注那些收集不同尋常的石頭的人，或者為擺放得精美的和風食物拍照的人。
我特別喜歡「I’m Google」這個賬號，它不是按主題而是按視覺來排列圖片。當我看到這樣的圖片時，尤其是當我開始著手準備新項目的時候，它們會立即在我的腦海中激發出新的概念和全新的思路。這些資源成為我的靈感來源：當我滾動鼠標時，我將看到來自外太空的巖石圖像，它的形狀將啟發我如何安排構圖。
線上靈感素材固然可以鼓勵國際交流和對話，但問題出現在這些圖像在傳播的時候脫離了相關語境?！?a target="_blank" rel="noopener noreferrer" class="external" style="color:#0DA4D3;text-decoration-line:none;transition:none 0s ease 0s;">Thomas Kronbichler Mut工作室的創始人 創意總監
在 Mut 工作室，我們是當之無愧的互聯網擁簇，我們從不害怕靈感素材過載這種問題。我們是阿爾卑斯山脈中部一個叫做海蒂·蘭德小鎮上的一個小工作室，互聯網不僅為我們提供了來自世界各地令人嘆服的靈感，而且提供了一個展示自己作品的平臺，這在10年前是不可想象的。
正是因為圖片可以在網上廣泛地傳播，我們才能讓歐洲和美國的用戶看到我們的作品。由于有了在線訂閱和社交媒體，平面設計社區現才有了如今繁榮的模樣。當然，這也有負面影響，很多人說如今平面設計在審美上變得太相似了。但積極的一面是，現在有更多的平面設計作品涌現出來。任何地方的人都可以進入這個行業而不再受到地域的限制，平面設計行業變得更具包容性。例如，歐洲各地的小鎮上都會有人在嘗試更瘋狂的創作，我們能透過網絡在不同的地方跟進觀察，支持彼此。豐富的網絡靈感圖片的流通，最終有利于平面設計作為一種藝術形式而廣泛存在。
我并不是受到某張特定的圖片啟發，而是在聽設計師講述設計思路的過程中獲益良多。
問題是對此互聯網并沒有過多關注。一些博客和自媒體上并沒有關于圖片來源的解釋。為朋友設計的項目和為大公司做的項目都在同一個空間中流通，這很有趣，但同時也弱化了應有的差異化和環境。
作品背后的故事，以及設計過程中各種問題的解決過程，才是真正重要的內容。我并不會受到某張特定圖片的啟發，而是在聽設計師講述設計思路的過程中獲益良多。了解設計師的獨特理念，則更有可能啟發我，我對設計師處理客戶關系的部分也很感興趣。當然，這一切是不能用一張簡單的圖像來進行概括的。
我已經不再瀏覽 Tumblr 和 Pinterest，因為我最感興趣的點，是了解一個問題是如何解決的。最終，我在設計師會議上發言的視頻實錄中獲得了最多的靈感。聽設計師們講述作品誕生的過程是最令人振奮的。我從一個人如何構建一個項目，以及如何實現它的過程中學到了很多。我喜歡聽他們談論客戶關系，講述他們遇到的困難以及如何克服它們。確切地說，更能鼓舞人心的是設計態度和思維方式。
在阿爾卑斯山的工作室中足不出戶，我就可以看 Michael 所有的視頻。
例如，就在上周，我狂看了所有 Michael Bierut 在線演講的視頻。我喜歡他展示作品的方式，喜歡他大方地和別人分享成果，我欽佩的是他的工作態度。在阿爾卑斯山的工作室中足不出戶，我就可以看遍邁克爾所有的演講視頻，這簡直太棒了。
對正在發生的事情有所知覺是非常重要的，而上網獲取靈感會簡化這個過程。——Polina Joffe，藝術總監和平面設計師
如果你知道別人在做什么，你可以選擇參與其中，也可以選擇拒絕。而形成自己的觀點并做出明智決策的前提是你足夠了解。
我一直在關注其他人在網上會做什么，我也會在博客和社交媒體上上傳一些實用的干貨。當涉及到具體的項目時，我會做具體的項目研究。我們會從互聯網上獲得大量的靈感，這使得研究階段變得非常簡單和。我經常會想起設計師們以前在社交媒體上使用過的概念和想法，然后我會把這些想法和我自己的想法進行重新轉化，組合并且更新，這樣它們就可以運用在我的設計大綱中了。
瀏覽在線靈感素材，然后它們會形成屬于我自己的一個巨大的視覺詞典，里面有我腦海中所有的概念和方法，每當我開始一項新的任務時，我都可以沉浸其中。
我們經常談論來自內心的創造力，但我不確信我是否真的要相信這一點。萬物皆有源頭。
我最近為泰特倫敦美術館的教育團隊做了一個項目。這個項目是針對年輕人的。首先，如果你的目標受眾是年輕人，了解年輕人都在做什么是很重要的事情了，因為這些信息很有參考價值。你需要運用觀眾能夠理解的視覺語言。在項目的研究階段，我看了其他設計師是如何處理和學習這些屬于年輕人的理念的。最初我想用筆記本和活頁夾做點什么。然后我想起了我在網上看到的那些用活頁夾或記事本紙做的項目，然后我回去重新又看了一遍，看了其他人如何處理類似的主題，由此激發了我的新想法。
我們經常談論來自內心的創造力，但我不確信我是否真的要相信這一點。萬物皆有源頭。我認為創造力通常是學習前人如何混搭各種想法，然后自己進行特定的調整組合，二次創造。
誠然，視覺交流的發展是一部復制、更新、轉移的歷史。但重復別人已經做了太多遍的東西，并使用類似的元素來直接竊取它們是有危險的。當你在做研究獲取靈感時，你必須通過多種方式參考海量的資源。如果我們能妥善地使用現有的大量圖像，就能鼓勵創新，跟上時代發展的步伐。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一般知道，js腳步語言的執行環境是單線程的，就是它會等一個任務完成，才會進行第二個任務，然后一直向下進行，這樣的執行環境簡單，但是處理不了復雜的運用，當一個請求需要非常舊的時間的時候，下一個流程就會被擱淺，如果長時間得不到反饋，進程就這樣的奔潰了。
為了解決這個硬性需求，Javascript語言提出了二種語言模式： 同步（Synchronous）和 異步 （Asynchronous）。
回調函數
訂閱和發布模式
Promise
generator
async/await
通過把一個函數(callback)作為參數傳入另一個函數，當滿足一定條件的時候，就執行callback函數。
用法：
通過回調函數的方式處理異步，是在異步早期的情況，其中jquery中的很多都是通過callback來實現回調的。但是這種模式代碼編寫比較耦合，不利于代碼維護。
發布訂閱模式
pub/sub模式是js設計模式中的一種，本身是借鑒于java的模式，但是在處理異步處理的時候非常有作用。通過一個信息中心EventCenter 來處理的監聽(on)和觸發(triggle)。
通過pub/sub模式，我們可以在信息中心清楚的看到有多少信號來源，方便的集中管理，更加方便于模塊化的管理，但是如果整個項目都使用pub/sub模式的話，流程就變得不太清晰了，數據的得到和數據的處理分開，對于后期的維護也是一個很大的問題。
Promise構造函數成為承諾，它分為三種狀態resolve, reject, pending ,一旦狀態從pending改為其它2個狀態之后，就不能修改了，就一個承諾一樣。
Promise接收2個參數resolve , reject，分別表示成功后執行和失敗后執行，可以通過實例的then()方法傳遞對于的函數。
這里看了之后，你可能會說，這個和異步處理有什么聯系嗎？你思考一下，當一個異步操作后，我們可以不去管它什么時候結束，什么時候出錯，就像一個人承諾了，我只需要按照他的承諾去當這個事情已經被處理好了，是不是方便很多，下面直接上手一個例子。
我完全不用擔心它里面怎么實現了，反正它已經承諾了會給我結果，我只需要通過then()方法去接受，我需要得到的值就可以了。
單個值
一個promsie實例
一個thenable對象
Promise.resolve(value).then((value) => {})
如果一個請求的結果是下一個請求的參數，如果我們使用原始的請求方法，就是出現一個像右的箭頭的回調地獄。
一層層嵌套，非常的恐怖，不利于維護。那么通過prmise怎么處理回調地獄呢？
上面處理回調地獄是不是看著方便很多，代碼也簡單命令，依賴性也很強，后面我們會繼續通過async/await繼續簡化。
Promise.all(arr) 接受一個promise實例的數組，可以并發多個請求給服務器，但是并不能保證接受到的先后順序，這個取決于服務器的處理速度。
處理多個請求并發，并且需要保證返回數據的順序（運用場景比較少）
上面一個方法并不會保證請求返回的結果，按照你發送的順序返回，如果我想把完整的響應的結果按照我
希望的順序返回給我，那應該怎么辦呢？
這樣，會等待每一個請求完成后，并把得到的數據push到totalData中，就可以按照順序得到我們想要的值了。當然使用async/await會更加的方便。之后我們會講解。
generator是一個構造器，generator函數執行并不會執行函數體內部部分，而是返回一個構造器對象，通過構造器對象的next()方法調用函數主體，并且每當遇到yield都會暫停執行，并返回一個對象。
注意yield本身是不會反悔內容的，只是給構造器對象返回了內容，如果想yield表達式也返回內容，可以通過給下一個next()傳遞參數。
通過next()傳遞參數，我們可以做到值向內部傳遞，對于后面的異步處理很有幫助。
generator異步運用
利用構造器的暫停和繼續的功能，我們可以很好的處理異步請求，得到數據后再進行其他內容。主要是運用yield表達式返回一個promise對象的原理。
這樣我們就得到了接口請求的數據，相比于之前的promise函數的書寫是不是要簡單很多。和同步是一樣的操作。
如果我們想內部對得到的數據進行進一步的處理呢？
簡單的co模塊處理generator多個函數請求
從上面我的調用方法就可以看出，利用Promise + generator的異步處理不斷地通過then()方法處理數據。有沒有一個方式是我可以直接運行一個函數，然后就可以得到我想要的值。 例如：
網上已經封裝了很多的方法，例如常見的run庫，co函數就是來處理這樣的處理方式。但是當我們發送多個請求的時候，可能你會這樣寫：
這樣寫是會發送請求，但是并不是并發多個請求，而是等第一個請求p1之后，再進行第二個請求p2，在性能優化方面是不利的，也不符合我們的要求，怎么做到2個請求是獨立的，并且我們還可以通過得到2個請求的結果后，進行其他請求?；蛟S我們可以這樣：
這樣寫是不是和我們之前寫的Promise.all()很像？所以還可以改成這樣的：
async/await異步處理
ES7出現了async/await進行異步的處理，使得異步操作就像同步代碼一樣簡單，方便了使用，由于async/await內部封裝了generator的 處理，所有就很少有人用generator來處理異步了，但是在異步的推動中generator起到了很大的作用。
await： 后面接受一個promise實例
**async: 返回一個promise對象 **
一個簡單的異步請求
上面的例子是不是和generator中的異步請求很像？可以像同步一樣的編寫代碼，但是相比generator，await后面加上promise后直接返回相應的數據，不像yield還需要從外部傳入。
處理多個請求并發的情況（不需要管服務器的返回順序）
用async/await處理多個請求并發，由于await后面需要添加Promise實例，是不是腦袋里面一下子就想到了一個Promise.all()
你可能會很好奇，為什么不需要像generator那樣通過額外的函數來調用，因為async已經幫你想好了，內部已經調用了，是不是很爽？
處理多個請求并發，并且需要保證返回數據的順序（運用場景比較少）
如果數據中沒有相互的聯系，但是又想一個個發送，可以這樣
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
好的UI設計師應該是理論結合實踐，好的理論是指導實踐，所以今天我帶來了這一篇文章。講講什么是黃金ux七大定律以及它們如何在UI中的運用。
費茲定律（fitts’law) 是心理學家 paul fitts 所提出的人機界面設計法則，主頁定義了游標移動到目標之間的距離，目標的大小和所花費的時間之間的關系。
定律內容是從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小
用數學公式表示為 時間T=a+blog2(D/W+1)
用這張圖來說明，當d(起始點到目標之間的距離）越長，使用者所花費的時間越多；而當w（目標物平行于運動軌跡的長度）越長，則花費的時間越少，使用的效能也比較好。
我們來看新浪微博的轉發功能，因為隨著功能的復雜性，轉發功能包含了下一層級三個子功能，分別為快轉，轉發，分享。這個轉發icon一觸發，在很近的距離，3個點擊目標也設計的很大這樣容易很快的操作，利用費茲定律，提升了用戶的效能。
當你走近一家餐廳，你看著琳瑯滿目的菜品是不是無從下手。在生活日常中你會對各種各樣的選擇而困擾，其實有時候不是你的問題，而是對方給予你的選擇太多。
Hick’s Law (席克定律)中說道：“一個人面臨的選擇（n）越多，所花費做出決定的時間（T)就越長。
用數學公式表達為 RT=a+b log2(N)
劃重點
當選擇增加時，我們做決定的時間就會相應增加
如果在你的服務，產品中“時間就是關鍵”，應該將做決定的選項減少到最少，以減少所需反應的時間，降低犯錯的概率。也可以對選項進行同類分類和多層次分布，提高用戶的使用效果。
奧卡姆剃刀原則也被稱為：“簡單有效原理“，由14世紀哲學家，圣方濟修士奧卡姆.威廉（William ofOccam)提出。這個原理告誡人們“不要浪費較多東西去做用較少東西也可以做好的事情?！惫P者認為和后來包豪斯密斯.凡德羅提出的：“少就是多”有異曲同工之妙。
一個簡潔的網站能讓用戶快速找到他們所找到的東西，當你在銷售產品時候尤為關鍵。如果你的網站充斥著很多無關緊要的東西。比如小彈窗，無用鏈接。用戶會因為不能快速找到自己想要的東西而關閉網站。
合理的使用奧卡姆剃刀原則，能更好的傳達你想要表達的內容，更容易吸引廣告投放者，給訪客帶來更好的用戶體驗。
泰思勒定律又被稱為：“復雜不滅定律”
中心思想是：“每一個程序都有必然有其與生俱來，無法縮減的復雜度，唯一的問題，就是誰來處理它?！?
泰思勒定律定律認為每個過程都有其固有的復雜性，存在一個臨界點，超過這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。
從手機的演變過程來看，智能手機簡化了物理操作按鍵，通過技術手段降低了手機操作的復雜度，尤其是復雜的交互手勢操作，雜度的降低是通過大量的技術和資金投入解決，體現了復雜守恒定律。
1956年喬治米勒對短時間記憶能力進行了定量研究，他發現人類大腦最好的狀態能記憶含有7（±2）項信息塊，在記憶里5-9項信息后人的大腦后開始出錯。
防錯原則是通過設計來將過失降低到最小化。該原則及時地告訴用戶哪里操作錯了。比如在填寫表單時，系統給出及時地報錯提示；重要、謹慎的操作，系統通常會有二次確認；為用戶提供撤銷的機會；為用戶提供糾錯的機會
接近法則是格式塔理論中我們最熟悉的，也最常運用的一項法則。當對象離的太近時候，意識會覺得它們是相關的
我們來看看利用接近法則在移動端的案例，相同的模塊這兩款app都用空間間隙來做出了區分，讓人在移動的場景更能快速的尋找想要的信息。
在UI設計中，不僅僅是為了美觀的界面，更要有有理有據，在設計時應該學會運用這些法則，不僅可以讓你的界面更專業，同時也更有說服力。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
質感是什么？如何讓畫面擁有更高端的質感？本文由質感的原理出發，深入分析質感表現所需要的要素，并通過實例來講解如何在作品中表現高端質感。很多同學在設計完成后，總是會發現頁面很單薄，導致整體看起來很粗糙、不耐看。究其原因，大多數是因為頁面缺乏質感。
質感，對于設計作品來說，是一個非常重要的視覺元素。它能夠提升作品的層次，讓整個作品更高端、更有品質。
質感，基本釋義為所表現的物體呈現出的物質真實感和細膩的品質感。這是一種視覺的綜合感受，會觸動你的某種本能的綜合感官，讓你感覺非常舒服、非常爽。
我找了幾張比較富有質感的圖片，大家可以感受一下這種感覺。
觀察完這些圖片后，你發現有什么共同點了嗎？我們可以試著來分析一下。
首先，物體本身的型是好看舒服的，并且細節足夠精致。
其次，在光的影響下，物體的表面呈現出細膩的光澤變化，以及通透而舒服的陰影，展現了豐富的層級關系。正是光的作用，讓這些視覺元素得以表達，讓我們沒有觸摸便能感知到這種質感。
我們再來看一些優秀的擬物作品。大家對照一下，是否都遵循相同的要素。
觀察這些優秀的擬物作品，為什么會覺得有質感呢？首先圖標很精致，它的形具有一定的美感。但是這不足以讓它富有質感，關鍵是它也符合了上面所說的幾個質感要素。
最后，我們可以總結一下，質感產生的要素：
所以除了作品本身足夠精美以外，整個作品的光感需要和諧統一。每個元素表現的色彩變化規律（漸變色）、投影大小和投影間的相互影響，都需要與光感嚴謹的統一。
這就要求你在繪制所有元素時，需要去假定一個統一的光源，這樣才能讓物體擁有更真實的質感。
我們已經了解了質感產生的原理，下面就開始實際案例。每一個步驟我都會講解思考的過程和原因，方便大家理解。
1. 整體背景和主體框架繪制
建立畫布（1200 x 900）。用矩形工具繪制背景和主體框架（1100 x 700），圖層樣式為漸變疊加，光線方向統一。
漸變是為了模擬背景的質感和在光線下的變化，兩層光線方向需要統一。背景顏色稍淺且飽和度低，符合遠近的視覺規律。
2. 繪制投影和主體背景
復制矩形作為投影層，顏色調整為黑色，轉為智能對象后，加入高斯模糊效果。調整矩形圖層的模糊度和透明度，移到適當位置。具體參數對照圖中。投影的位置根據假定光源位置而定，使其符合視覺原理（詳見光線分析圖）。
繪制主體深色背景（1070 x 670），添加漸變疊加模式，漸變方向與前面保持一致。漸變的顏色對于質感非常重要，恰當且高級的漸變色，能夠在本質上提升畫面質感。而漸變方向則需要根據假定光源進行判定。
為什么要這么繪制漸變與投影的位置呢？我繪制了一張光線分析圖，大家可以從圖中看出假定光源的位置，以此來確定漸變的方向以及投影的位置。
只有整體光感的統一，整個畫面才能表現出強烈的質感。大家在繪制這一步時，需要用心體會假定光感的這個過程。
3. 將人物融入背景，提升發絲層次和質感
放入人物圖片，圖層模式改為正片疊底。調整圖層透明度，添加蒙版使人物下半部分漸隱，與背景融合。
復制人物層，取消圖層模式和透明度。用選擇顏色命令提取發絲高光，添加蒙版抹去不需要的高光，圖層模式改為變亮模式，調整透明度使其融合進人物。
為什么要做這一步呢？單純的人物在畫面中顯得太平了，所以需要豐富細節、增加層次。
4. 主體字體和投影繪制
輸入主體文字，圖層模式調整為漸變疊加，根據光源調整顏色漸變。案例中的英文字體為「Monotype Corsiva Regular」。這一步需要反復的嘗試，大家可以換一些字體嘗試一下。
復制一層作為投影，文本顏色改為黑色，圖層樣式設置為正片疊底，轉智能對象后模糊對象，調整圖層的透明度和大小，放在字體后面。字體的立體感依靠的仍然是統一的光源，需要想象字體在假定光源下的陰影關系。
投影能夠模擬真實感，需要若有若無的感覺，讓文字懸浮在圖層上面，豐富畫面層次。
5. 主體文字細節刻畫
根據字體的結構，用形狀工具繪制出字體的立體關系。每一個形狀圖層繪制后需要兩層蒙版，一層為了限制字體范圍，一層為漸變蒙版。讓充滿立體感的文字懸浮于畫面中央，提升視覺中心的細節品質。
6. 穿插細文與投影繪制
輸入細文，并復制一層作為陰影。不過因為字體較小，距離拉遠后投影肯定是看不清細節的，所以已經模糊的若有若無，但還是需要有的。
表現文字穿插關系，讓「is an」懸浮于「L」上，并留下近距離投影。讓「attitude」穿過「e」字，遮擋部分文字。豐富的穿插和相互投影，進一步增加主體文字的細節和層次，讓畫面細節豐富且更加耐看。
7. 繪制輔助圖形，增強畫面流動感
為了豐富畫面細節，增強畫面流動感，可以適當加一些飄零的輔助元素。
繪制時需要注意的是，你需要明確整體視覺中心與運動的方向。輔助圖形沿著整體畫面，水平中心向右運動，你可以想象圖形散開后的畫面，并反復調整元素的合理位置。
如果沒有一定的規律，所有圖形就不像一個整體，就會看起來很亂。大家可以根據這點來判斷輔助元素是否需要進一步調整。
8. 收尾工作，大功告成
最后，根據頁面需要，搭配上合適的元素，讓畫面更完整。
需要注意的一個細節是，由于所處的位置不同，這些元素在光照中呈現的顏色也會出現深淺變化，所以左邊的元素較淺，而右邊的元素會深一些。
怎么樣，是不是看起來并不難？
希望大家可以抽空認真地跟著教程去嘗試一遍。只要你能夠理解每個步驟的目的，耐心地繪制每一個細節，相信你也能夠做出這種非常高端的質感。
如果你能在制作時，用心思考和體會整個過程。就能在以后的作品中舉一反三，讓這個技能成為你自己的技能了。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
首先就是要把視頻加載出來，然后使用canvas.getContext(‘2d’).drawImage(videoElement, 0, 0, canvas.width, canvas.height);獲取到當前視頻時間的截圖，需要不同時間的video視頻圖，設置video的currentTime（單位秒），然后videoElement這個對象信息會實時更新。
如果是視頻是在阿里云OSS上就更方便了，poster=“http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4?x-oss-process=video/snapshot,t_6000,m_fast”
如果是要獲取上傳本地視頻預覽圖，可采用下面的方法，但有兼容性問題，目前測試移動端安卓機只有Chrome瀏覽器支持，微信和QQ瀏覽器都無法響應本地視頻的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]), // 文件轉化成二進制文件
url = URL.createObjectURL(blob); //轉化成url
if (file && /video/g.test(file.type)) {
var $video = $('<div><video controls src="' + url + '"></video></div><div> </div>');
//后面加一個空格div是為了解決在富文本中按Backspace時刪除無反應的問題
$('#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創建的對象
console.log("loadedmetadata")
});
}else{
alert("請上傳一個視頻文件！");
obj_file.value = ""
}
};
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
