首頁

312018-7

原生js實現(xiàn)移動端touch事件，解決穿透問題

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

四種touch事件

touchstart: //手指放到屏幕上時觸發(fā)

touchmove: //手指在屏幕上滑動式觸發(fā)

touchend: //手指離開屏幕時觸發(fā)

touchcancel: //系統(tǒng)取消touch事件的時候觸發(fā)
每個觸摸事件被觸發(fā)后，會生成一個event對象，event對象里額外包括以下三個觸摸列表

touches: //當前屏幕上所有手指的列表

targetTouches: //當前dom元素上手指的列表，盡量使用這個代替touches

changedTouches: //涉及當前事件的手指的列表，盡量使用這個代替touches

這些列表里的每次觸摸由touch對象組成，touch對象里包含著觸摸信息，主要屬性如下：

clientX / clientY: //觸摸點相對瀏覽器窗口的位置

pageX / pageY: //觸摸點相對于頁面的位置

screenX / screenY: //觸摸點相對于屏幕的位置

identifier: //touch對象的ID

target: //當前的DOM元素

注意：

手指在滑動整個屏幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調(diào)用touch事件時，要注意禁止縮放和滾動。

1.禁止縮放

通過meta元標簽來設置。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

1

2

2.禁止?jié)L動

preventDefault是阻止默認行為，在touchMove事件中使用可阻止默認行為滾動。

event.preventDefault();

3.解決穿透
在touchStart事件后添加touchMove事件的監(jiān)聽，在touchMove事件里添加touchEnd事件的監(jiān)聽，在touchEnd事件中移除touchMove和touchEnd的事件監(jiān)聽，即可解決穿透問題

4.removeEventListener
傳入的處理事件函數(shù)一定是相同的函數(shù)，不能是匿名函數(shù)

案例

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>移動端觸摸滑動</title> <meta name="author" content="rainna" /> <meta name="keywords" content="rainna's js lib" /> <meta name="description" content="移動端觸摸滑動" /> <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no"> <style> *{margin:0;padding:0;} li{list-style:none;} .m-slider{width:600px;margin:50px 20px;overflow:hidden;} .m-slider .cnt{position:relative;left:0;width:3000px;} .m-slider .cnt li{float:left;width:600px;} .m-slider .cnt img{display:block;width:100%;height:450px;} .m-slider .cnt p{margin:20px 0;} .m-slider .icons{text-align:center;color:#000;} .m-slider .icons span{margin:0 5px;} .m-slider .icons .curr{color:red;} .f-anim{-webkit-transition:left .2s linear;} </style> </head> <body> <div class="m-slider"> <ul class="cnt" id="slider"> <li> <img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg"> <p>20140813鏡面的世界，終究只是倒影?？吹玫侥愕纳碛?，卻觸摸不到你的未來</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>20140812錫林浩特前往東烏旗S101必經(jīng)之處，一條極美的鐵路。鐵路下面是個小型的鹽沼，淡淡的有了一絲天空之境的感覺?？上г诖送媪艘粋€小時也沒有看見一列火車經(jīng)過，只好繼續(xù)趕往東烏旗。</p> </li> <li> <img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg"> <p>20140811水的顏色為什么那么藍，我也納悶，反正自然飽和度和對比度拉完就是這個顏色的</p> </li> <li> <img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg"> <p>海洋星球3重慶天氣熱得我想臥軌自殺</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>以上這些作品分別來自兩位設計師作為觀者，您能否通過設計風格進行區(qū)分</p> </li> </ul> <div class="icons" id="icons"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <script> var slider = { //判斷設備是否支持touch事件 touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch, slider:document.getElementById('slider'), //事件 events:{ index:0, //顯示元素的索引 slider:this.slider, //this為slider對象 icons:document.getElementById('icons'), icon:this.icons.getElementsByTagName('span'), handleEvent:function(event){ var self = this; //this指events對象 if(event.type == 'touchstart'){ self.start(event); }else if(event.type == 'touchmove'){ self.move(event); }else if(event.type == 'touchend'){ self.end(event); } }, //滑動開始 start:function(event){ var touch = event.targetTouches[0]; //touches數(shù)組對象獲得屏幕上所有的touch，取第一個touch startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一個touch的坐標值 isScrolling = 0; //這個參數(shù)判斷是垂直滾動還是水平滾動 this.slider.addEventListener('touchmove',this,false); this.slider.addEventListener('touchend',this,false); }, //移動 move:function(event){ //當屏幕有多個touch或者頁面被縮放過，就不執(zhí)行move操作 if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.targetTouches[0]; endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y}; isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling為1時，表示縱向滑動，0為橫向滑動 if(isScrolling === 0){ event.preventDefault(); //阻止觸摸事件的默認行為，即阻止?jié)L屏 this.slider.className = 'cnt'; this.slider.style.left = -this.index*600 + endPos.x + 'px'; } }, //滑動釋放 end:function(event){ var duration = +new Date - startPos.time; //滑動的持續(xù)時間 if(isScrolling === 0){ //當為水平滾動時 this.icon[this.index].className = ''; if(Number(duration) > 10){ //判斷是左移還是右移，當偏移量大于10時執(zhí)行 if(endPos.x > 10){ if(this.index !== 0) this.index -= 1; }else if(endPos.x < -10){ if(this.index !== this.icon.length-1) this.index += 1; } } this.icon[this.index].className = 'curr'; this.slider.className = 'cnt f-anim'; this.slider.style.left = -this.index*600 + 'px'; } //解綁事件 this.slider.removeEventListener('touchmove',this,false); this.slider.removeEventListener('touchend',this,false); } }, //初始化 init:function(){ var self = this; //this指slider對象 if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener第二個參數(shù)可以傳一個對象，會調(diào)用該對象的handleEvent屬性 } }; slider.init(); </script> </body> </html>
藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網(wǎng)站建設 、平面設計服務。

評論(0) 瀏覽(6623)

312018-7

間距不會調(diào)？掌握這一個點，從此不再迷茫！

濤濤

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

之前一直覺得色彩，圖形，字體是 UI設計的三大構(gòu)成，任何設計都是從這三大元素開始的，所有的 UI設計都是由這些構(gòu)成的，但是卻忽略了界面中空間的運用，也就是我們常說的間距。今天我想分享下幾年前從 Google 的 Material Design 以及 8 pt grid 中學到的關(guān)于間距相關(guān)的教程，這篇分享有助于我們處理好界面間距一致性問題，讓設計更加統(tǒng)一，同時定義規(guī)范里面的原子設計方法，能完美融合。

間距無處不在，界面中的邊距，距離上邊，左邊，右邊，頂部等各種屬性。因此作為一名設計師，我們需要很好的掌握各種間距規(guī)律，通過間距規(guī)律很好的組織好內(nèi)容。

一、為什么要統(tǒng)一間距？

是否大家和其他設計師在合作過程中，經(jīng)常打開一個設計師源文件時候，發(fā)現(xiàn)各種間距大小，各種不一致地方，明明同一個頁面，已經(jīng)定義好規(guī)范，但是每個人使用的間距大小不一致?？赡苣銈円?guī)范已經(jīng)定義好了，最小單位是5，按照5的倍數(shù)去做設計，但是還是會出現(xiàn)各種奇葩的間距，10，12，18等等?；蛘哒f有的設計師是按照5來說的，間距會出現(xiàn)10，15，20，25，30，很難解釋清楚哪種場景下用什么樣間距規(guī)則。

不止是設計師，估計研發(fā)打開我們標注稿都是崩潰的。所以我們需要去統(tǒng)一間距規(guī)則，它的優(yōu)點是能很好的讓設計師之間合理的了解我們間距系統(tǒng)規(guī)則，同時開發(fā)在做設計開發(fā)時候，不需要每次都重復開發(fā)不同間距，導致整個 APP 風格混亂，那么我們?nèi)绾稳プ瞿兀?

二、它的價值是什么？

對于設計師：效率上，減少決策和思考，當我做一個需求時候，我不需要考慮到底用多大間距，同時能保持元素之間的節(jié)奏。

對于團隊：設計師和開發(fā)之間溝通更加簡單，開發(fā)人員能很好的按照最小單位按照增量遞增去寫間距，而不必每次都進行測量。

對于用戶：他們信任的品牌有一致性的美感，在設備上沒有模糊的像素偏移等，就和微信一樣，說不出哪里好，但就是最好的。

三、站在巨人肩膀上思考

△ Material Design 在他的布局中有講過，他們的間距，所有間距規(guī)則都是在8的倍數(shù)上進行遞增，而且并不是毫無頭緒的遞增，只定義了幾種增量關(guān)系，克制的有序的間距彈性，最小的是8，16，24，32，48，56，72。

△ 同樣在 iPad端，間距規(guī)則也是有序的，克制的間距彈性，而不會出現(xiàn)我們?nèi)粘ＴO計中經(jīng)常間距隨意任選的使用，毫無規(guī)則亂用。

△ 在 Airbnb 的規(guī)范中，PC 和無線所有設計間距規(guī)范原則只定義了5種，8，16，24，48，64讓規(guī)則更加簡單，更好的統(tǒng)一了整個風格的一致性。

這些原則除了在元素和元素中運用，其實在按鈕中，在按鈕里面文字和上下左右的距離，都是有序的，我特別喜歡一句話，設計語言只有在有序的遵循和重復使用下才有用。

四、怎么做？

1. 定最小原子單位

這個最小間距規(guī)則可以是3的倍數(shù)，像蘑菇街、豆瓣一樣，如果你希望產(chǎn)品留白比較多，也可以是5的倍數(shù)，例如 pinterest、亞馬遜等，這個沒有絕對的，一切根據(jù)你們產(chǎn)品內(nèi)容豐富程度決定。

△ 亞馬遜和 AliExpress 都是按照5為倍數(shù)來做間距增量

2. 確認間距彈性

大家都買過衣服或者鞋子，一般鞋子尺碼，只會有固定幾個（36，37，38，39，40，41，42，43）如果你需要的鞋子特別大，可能需要訂制，包括衣服也是同樣（XS,S.M.L.XL）。

在定義間距上同理，以往做設計規(guī)范的經(jīng)驗，在上一步定義好最小單位就完啦，然后設計師按照增量去設計就 ok，這樣只是完成一半，如果按照4的增量（4，8，12，16，20，24，28，32，36，40….）這種帶來問題就是任何間距都不可預測，提供的選擇過于接近了，在什么情況下使用24，什么情況下使用28，我們很難去決策，如何去做。

之前在團隊做過一個調(diào)研，我們問了設計師，也看了很多設計源文件，包括國外也有一個類似調(diào)查，就是在用4作為設計原子間距做設計時候，設計師使用最多的間距有哪些？結(jié)果很有意思，使用16的占一半，8和32的占一半，所以定義太多間距其實毫無意義，只會帶來設計時候的不確定元素。

3. 根據(jù)業(yè)務場景，定義間距

正如前面所說，過多間距規(guī)則，只會帶來設計師困惑，徒增界面復雜性，對開發(fā)，對設計師都是一種負擔，所以我們在定義間距時候，一定要少，要讓我們間距原則覆蓋到絕大多數(shù)場景?？梢詮?XS，S，M，L，XL 為參考，小，中，大為緯度。

△ Airbnb 的間距規(guī)則 XS，S，M，L，XL 是最小為8，常用8，16，24，48，64，Airbnb 則更加克制，給設計師選擇更少，反而更能保持設計次序。

△ quickbooks 的間距規(guī)則 XS，S，M，L，XL 是最小為4，常用8，16，20，40，60能很好滿足各種業(yè)務場景，包括各種的間距場景都是在此基礎上去拓展。

△ 那么界面中所有的間距地方，全部運用8，16，20，40，60這幾個原則來做設計，保證頁面統(tǒng)一性。

△ 包括頁面中的元素高度，比如 banner 高度也是按照間距增量去設計高度，那么整個頁面就更加有系統(tǒng)性和科學性。

△ 這也是我們在做系統(tǒng)設計時候經(jīng)常用到的，通過增量來做設計。

△ 同理，在國外很多優(yōu)秀產(chǎn)品中，我們不難發(fā)現(xiàn)這種規(guī)律的使用，更好的提升了設計效率。

總結(jié)

統(tǒng)一簡化間距規(guī)則，通過這些規(guī)則，構(gòu)建一致性界面，所有邊距，元素空間都遵循規(guī)則時候，對于視覺設計和開發(fā)人員來說，都能很好解決一致性和效率問題。

在我們剛開始設計時候，可能會覺得沒有真正的好處，但是當項目越來越復雜時候，團隊規(guī)模越來越大，每天處理各種設計原子和設計分子時候，你會發(fā)現(xiàn)，當你使用固定的間距，它會比之前隨意的間距規(guī)則有更好的效果。

藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網(wǎng)站建設 、平面設計服務。

評論(0) 瀏覽(4859)

312018-7

banner的“分層設計”

鶴鶴

在話題展開前我想提出一個怪現(xiàn)象：為什么現(xiàn)站酷，簡書上這么多人分享板式設計，banner設計，字體設計其中不乏一些工作十年以上的資深前輩，但是還是有很多人當設計頁面的時候還是腦袋空空，只能素材網(wǎng)站搬運，然后修修改改草草了事，長此以往。

評論(0) 瀏覽(4009)

312018-7

UI界面超逼真！Magic Leap One曝光2款虛擬現(xiàn)實新應用

藍藍設計的小編

據(jù)悉，Magic Leap近日將公布關(guān)于Magic Leap One的2D和3D用戶界面，有關(guān)媒體還在該公司的開發(fā)人員文件中發(fā)現(xiàn)了包括Landscape和Immersive在內(nèi)的應用程序。

評論(0) 瀏覽(4539)

302018-7

設計你的設計生涯

藍藍設計的小編

你首先要考慮的問題是：你是否喜歡從事設計工作？這很重要，若果答案是否定的，現(xiàn)在換一種職業(yè)還不算晚。因為并不是每一個人都喜歡或者適合做設計，可能是很偶然的原因?qū)W習了設計。你過去學習設計的經(jīng)歷并不會浪費，它對于你從事市場、廣告、營銷或其他管理工作是一種寶貴的財富，也許由于你的放棄，世上少了一個平庸的設計師，多了一個優(yōu)秀的管理人員。你要知道，一個懂得設計的管理者比一個設計師更加難得。

評論(0) 瀏覽(3810)

302018-7

一看就懂，詳解大廠ui設計制作規(guī)范步驟

博博

一看就懂！詳解大廠UI設計規(guī)范制作步驟

小小設計控 2018-07-30 09:34:38

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

小小設計控 2018-07-30 09:34:38

一、提取設計原則關(guān)鍵詞

1. 提取一級關(guān)鍵詞

第一步，先要去提取出關(guān)鍵詞，這個關(guān)鍵詞怎么來，有幾種方式獲取，第一個從整個公司戰(zhàn)略出發(fā)，任何一個產(chǎn)品一定有他的戰(zhàn)略，品牌戰(zhàn)略，商業(yè)戰(zhàn)略。舉個例子，假設我們是 eaby，公司今年戰(zhàn)略是全球化，高品質(zhì)，正品，那么這個就是一級核心關(guān)鍵詞，所有的設計語言一定要和公司戰(zhàn)略結(jié)合起來，可以理解為戰(zhàn)略關(guān)鍵詞是整個設計語言頂部金字塔。

二、運用情緒版提取二級關(guān)鍵詞

有了一級關(guān)鍵詞后，需要去思考，那么什么樣的設計能給人全球化的感受呢，什么樣的感覺能有高品質(zhì)，正品應該傳遞什么樣的感覺呢？此刻需要用到第二個方法就是情緒版，通過情緒版去把符合這些關(guān)鍵詞感受的圖形具體化。

三、高品質(zhì)特征是什么？

下圖是一組日本的花茶設計，那么在這組設計中，設計師是如何體現(xiàn)高品質(zhì)呢？

△ 首先包裝很精美耐看，設計簡約

△ 做工精量，整個產(chǎn)品包裝，都是在富士山腳下

△ 采摘環(huán)境很透明，值得被信任

△ 整個品茶的過程也特別讓人向往，很有儀式感

△ 整個的設計很完整，很有設計感在里面

通過以上案例拆解，我們能對這個高品質(zhì)的關(guān)鍵詞有更加進一步的理解，高品質(zhì)原來在情感層面是一個這么抽象的感覺，但是很多同學會問，那么這二級詞匯也很抽象，如何靠這個來做設計，很難去理解及表達，別著急，還有下一步。

1. 高品質(zhì)設計表現(xiàn)形式？

關(guān)于高品質(zhì)在視覺形式上如何來體現(xiàn)了，哪些設計感覺能代表高品質(zhì)呢，這個時候就需要我們?nèi)ふ乙恍┰O計參考，這些案例要能代表高品質(zhì)。

△ 清晰的有品質(zhì)的圖片

△ 牛皮癬，不精致不可取

△ 優(yōu)雅的排版和留白，文字清晰，雜志感受

△ 圖文密集，缺少版式不可取

△ 精致的布局，柵格的體系，給人品質(zhì)感

△ 缺乏版式及設計感

△ 有設計細節(jié)的

△ 無細節(jié)不可取

△ 合理的配色，簡單清晰

△ 山寨的配色不可取

△ 設計的延續(xù)性和完整性

2. GOOD CASE

3. BAD CASE

四、設計分層

以上就是我們從一個戰(zhàn)略關(guān)鍵詞逐步推導到一級關(guān)鍵詞，到二級關(guān)鍵詞，到設計手法，以及對應設計表達，推導的一個全過程。

本能層：清晰的，有設計感的，做工精致
行為層：完善的，值得信任的，用心的
精神層：讓人向往的，值得期待的

五、總結(jié)

以上大概為一個設計關(guān)鍵詞的全部推導過程及到設計手法的確定，也是設計語言里面最難的部分，后面的關(guān)鍵詞也是類似的思考方法和思路，最終通過推導我們需要得出每個關(guān)鍵詞的情緒圖，以及對應設計特征，最終需要在界面中展示的形色字構(gòu)質(zhì)，一個完整過程。

比如國際化，同樣通過前面思路，我們需要去思考國際化如何在設計中體現(xiàn)，去提煉出代表國際化的象征物，如地標，國旗，郵戳，貨幣等等，包括如何在界面中融于國際化元素，以及人物和節(jié)日場景。

結(jié)語

希望大家可以通過我這期的分享，能夠詳細理解到如何從公司戰(zhàn)略層提取到核心一級關(guān)鍵詞，到二級關(guān)鍵詞，以及對應的設計手法，對應到形色字構(gòu)質(zhì)，大家可以依據(jù)此方法去拿你現(xiàn)在手上的界面去做一次體系化的推導。

最后，依據(jù)推導出來的原則，以及對應的設計手法去做概念，去在界面中運用，最終完成設計語言第一步，設計關(guān)鍵詞和設計手法定義。

圖片素材作者：Tran Mau Tri Tam ?

藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網(wǎng)站建設、平面設計服務

評論(0) 瀏覽(4330)

302018-7

你為什么覺得交互設計難？

博博

你為什么覺得交互設計難？

原創(chuàng) 康石石 2018-07-30 10:14:24

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

交互設計作為國內(nèi)當下藝術(shù)留學中的一個新興專業(yè)，申請人數(shù)逐年增加，甚至已有趕超服裝設計、建筑設計這些熱門留學專業(yè)的趨勢。但在專業(yè)認知上，申請交互設計的同學卻不及其他兩個專業(yè)。這也使得很多交互學生在專業(yè)學習上要比其他人耗費更多時間，很難快速上手進行交互項目的創(chuàng)作。

但這絲毫不能推責于各位同學身上，因為國內(nèi)基本沒有正兒八經(jīng)的交互設計專業(yè)，即便是有，多數(shù)也在工業(yè)設計與多媒體設計之間存有剪不斷理還亂的關(guān)系，這使得很多同學對交互設計的認知較為單一，項目創(chuàng)作除了APP設計就是APP設計。但其實交互設計“入門”這件事，找對了方向，往往事半功倍。

今天的文章，康石石將為處于交互“入門”階段的同學詳細梳理兩個問題：

1. 交互設計是什么？

2. 入門交互作品集需要從哪些方向入手？

希望大家在通讀文章之后，能夠盡快跨過“入門”這道門檻，以更穩(wěn)定專業(yè)的心態(tài)進入作品集創(chuàng)作。

一、交互設計是什么？

各個百科上對交互設計都有非常明確的定義，但對于沒有專業(yè)基礎的同學們來說，這些定義還是略顯彎彎繞繞，康石石簡單解釋一下：交互設計，其實就像人與人之間的日常交流一樣，人與系統(tǒng)之間也是“有問有答”，具有互動性的，而交互設計就是協(xié)調(diào)人與系統(tǒng)之間的“交流”方式。凡是可以通過五感來達成的信息傳遞、觀念傳遞、情感傳遞的互動行為都在“交流”的范圍之內(nèi)。

從具體表現(xiàn)形式上來說，包括但不限于手機APP、傳統(tǒng)網(wǎng)站、可穿戴設備以及新興的VR，各種與非電子類產(chǎn)品的交互關(guān)系也屬于交互設計的范圍。

這樣一講，交互設計的范圍似乎太過寬泛，但其實簡單來說，交互設計大致可以分為三個基礎模塊：

1. 美學——用戶界面設計（User Interface Design）

2. 心理學——用戶體驗設計（User Experience Design）

3. 計算機&工程學——人機交互設計（Human-Computer Interaction）

在這里我們先說UI設計（用戶界面設計），大多人似乎都知道UI設計是什么。但其實，UI放在交互系統(tǒng)內(nèi)，比如眾所周知的app、網(wǎng)站，它可以成為交互設計展現(xiàn)的一種媒介，是交互設計中一個難以或缺的組成部分。嚴格來說，UI設計并不屬于交互設計，它實則應該歸類于Graphic Design--平面設計。

而HCI（人機交互設計），與VR、AR，以及大數(shù)據(jù)等次時代的前沿科技相關(guān)，未來發(fā)展前景光明。但需要強調(diào)的是，HCI絕大部分學校是按理工科教授，因為它主要研究的是人機如何交互，而不是人機為什么交互，為誰交互，以及交互究竟有何意義。簡言之，就是HCI研究人機交互的技術(shù)，更簡言之，多數(shù)是在搞程序、編代碼。

最后，重點說一下涉及到心理學的UX設計（用戶體驗設計）。在交互作品集的創(chuàng)作中，UX是尤為關(guān)鍵和重要的，主要原因在于，相較國內(nèi)對于學術(shù)研究和視覺審美的培養(yǎng)，國外院校更看重的是設計出來的物品是否真正解決了用戶的需求。

這一點就要求了設計者必須換位思考，設身處地的站在用戶的角度上去考慮設計的每一步。這也應證了交互設計的本質(zhì)——交互設計師設計出來的是用戶想要的東西，而不是設計師要做用戶想要的東西。

二、入門交互作品集需要從哪些方向入手？

一般情況下，對于完全零基礎的同學，康石石東家-漢藝國際在其進行作品集創(chuàng)作前通常會先安排2-3周的基礎專項課，一系列課程下來，基本就能掌握作品集創(chuàng)作所需的所有知識及能力。這些課程康石石無法在這一篇文章中表述完全，僅為還處于入門階段的同學就兩方面內(nèi)容作簡要解析：

1. 交互項目

這一點是大多同學都非常關(guān)心的問題，以下康石石列舉五種最常見的交互項目，若有些同學已經(jīng)具備較為完善的交互專業(yè)知識與能力，可以嘗試更為高階的項目：

1）APP、網(wǎng)頁

交互設計作品集中，最容易上手的就是單一化的APP或網(wǎng)頁項目，幾乎每一個同學都會涉及到。而且APP與網(wǎng)頁項目的制作過程與方法相似程度高達90%，同學們在創(chuàng)作項目初期可以先嘗試這類項目練手，盡快熟悉作品集的創(chuàng)作流程。

Y同學，17屆學生，獲卡內(nèi)基梅隆offer

2）復合APP制作

比上述提到的APP和網(wǎng)頁稍復雜的是復合APP，比如產(chǎn)品+APP、傳感+APP、裝置+APP、手表+APP 、網(wǎng)頁+APP等等，簡單說，不僅僅是以APP為載體類型的應用都可以稱之為復合App。主要也是為了解決形式單一化，以及豐富項目內(nèi)容創(chuàng)造更多設計點。如果思考維度多元化，專業(yè)領域深入探究，也可以發(fā)展為一個服務設計項目。

3）交互裝置制作

交互裝置在交互作品集中屬于拔高項目，因為技術(shù)方面涉及到了電子化編程和電路板連接傳感器等內(nèi)容，呈現(xiàn)效果體現(xiàn)了交互意識、審美意識以及代碼意識。內(nèi)容方面，交互裝置更多是從產(chǎn)品原型開發(fā)去研究。由于涉及到代碼問題，在創(chuàng)作這類項目之前，專業(yè)技能及代碼知識都需要系統(tǒng)的了解。

H同學，15屆學員，獲倫敦傳媒學院、愛丁堡大學、拉夫堡大學offer

4）游戲制作（普通→AR→VR）

在交互游戲制作過程當中，很多同學會遇到不知道制作流程，不明晰VR和AR是什么概念，或許也會困惑為何我們把AR、VR列入游戲制作等種種問題。事實上，VR、AR也都需要通過游戲引擎搭建，所以從本質(zhì)上來看，它們都是游戲。

L同學，17屆學員，獲倫傳offer

2. 創(chuàng)作交互作品集需要具備的“基礎能力”

對于申請名校而言，同學們在基礎專業(yè)知識、作品集創(chuàng)作流程之外，還要具備四種基礎能力：基本審美能力、思考和解決問題的能力、創(chuàng)意、以及個人風格。

1）基本審美能力

對于設計師而言，良好的審美能力是必備的創(chuàng)作基礎。一般情況下，院校的考官大多會通過項目中各種低保真、高保真的UI原型設計，以及整體作品集的排版等視覺元素來判定，包括排版中每個圖標的位置、統(tǒng)計字體大小的一致性、整個項目風格的統(tǒng)一性等等。

2）思考和解決問題的能力

設計過程中，設計者的思維方式、邏輯關(guān)系是否清晰、有條理，是否通過設計過程解決了前期提出的問題，這些才是海外藝術(shù)設計院校的老師們最關(guān)注的關(guān)鍵性問題。

需要和同學們強調(diào)的是，想要創(chuàng)作一本優(yōu)秀的作品集，最基礎的要求是熟知其創(chuàng)作流程，這是考官的考察點，但僅憑這些自然不夠。

無論是前期調(diào)研還是后期做原型做測試，正規(guī)作品集的流程通常都是一樣的。因此，考官在判定申請者個人思考和解決問題能力的高低時取決于不同人在思考過程中每一步的邏輯所在。根據(jù)什么現(xiàn)象發(fā)現(xiàn)什么問題，根據(jù)什么問題設計什么功能，如何通過思考一步步得到解決方案，這些都值得同學們在創(chuàng)作中進行多維度的思考與試驗。

3）創(chuàng)意

不拘泥于APP類型的交互設計。一個交互作品集通常需要5個項目，同學們在APP設計之外，必然需要通過更多創(chuàng)新型項目，用以體現(xiàn)自己對專業(yè)能力的把控以及創(chuàng)意思維的體現(xiàn)。比如目前還屬于創(chuàng)新型拔高項目的VR和AR，尤其是在如今眾多藝術(shù)作品集表現(xiàn)形式都略顯中規(guī)中矩的情況下，一個優(yōu)秀的VR或AR項目會幫助作品集脫穎而出，為整個作品集增加亮點。

比如漢藝16屆學員T同學的作品集項目中，將水下AR系統(tǒng)與導航系統(tǒng)相結(jié)合，讓兩種不同的交互題材領域相互融合，展現(xiàn)了自己多維度的創(chuàng)作能力。

T同學，漢藝16屆學員，獲金史密斯，威斯敏特大學offer

4）個人風格

在交互作品集中，個人風格的體現(xiàn)，幾乎可以算得上能夠最快讓自己的作品集脫穎而出的有效方式之一。這里說的個人風格并不是指每個人所做的作品集項目的風格，而是你作為設計者，作品集中所包含的個人設計理念和思考風格。

以漢藝16屆學員D同學的CUI項目DANA為例，項目主要為已刑滿釋放重獲自由的前犯人們提供重返社會工作的各種服務。首先，可以看出項目題材切入點較為新穎，充分展現(xiàn)了D同學在生活中善于觀察的獨到之處，此外，D同學還細心的為DANA設計了虛擬形象，細節(jié)部分可見一斑，充分體現(xiàn)了設計者的與眾不同和強烈的個人風格。

D同學，16屆學員，獲CCA、SVA、Parsons Offer

Final: 以上對交互作品集入門階段的知識要點為同學們做了簡要整理，大家需要明確的是，交互設計雖是一個新興專業(yè)，很多人對其認知也確實不夠全面，但從零基礎到能夠創(chuàng)作一個完整的交互項目之間并非難以跨越，甚至只要合理安排好時間，有明確的學習規(guī)劃，便能很快進入創(chuàng)作期。

最后，上述只是入門交互設計的基礎知識，若想要支撐自己創(chuàng)作出更具競爭力的交互作品集，必然需要同學們在交互設計領域中繼續(xù)學習和探索。康石石與東家漢藝也在一直嘗試通過各種課程幫助大家探索更多交互的可能性，這不僅是為了作品集創(chuàng)作，更多的是希望各位在專業(yè)能力以及創(chuàng)作思維上都能有更高質(zhì)的提升。

藝術(shù)留學&藝術(shù)作品集咨詢：

漢藝國際教育--康石石作品集指導團隊

評論(0) 瀏覽(4796)

302018-7

與原型相關(guān)的那些事兒

seo達人

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

寫在前面：
1、什么是對象？
對象就是屬性的集合；
2、對象與函數(shù)的關(guān)系？
對象都可以看做是由構(gòu)造函數(shù)Object實例化生成的；
函數(shù)都可以看做是由構(gòu)造函數(shù)Function實例化生成的；
構(gòu)造函數(shù)Object也是由構(gòu)造函數(shù)Function生成的；

1、原型prototype

如果讓用簡單的幾句話說一下什么是原型，或者給原型下個定義，我覺得還是有點困難的，困難之處在于即使說了之后，對于聽的人來說，估計也是一頭霧水。不過，關(guān)于原型的一些基本的東西還是要說明的，這些基本的東西差不多就可以構(gòu)成一個對原型的理解。首先，原型是函數(shù)才有的一個屬性；其次，原型就是一個對象，我們可以給它添加屬性或方法；最后，原型的作用是實現(xiàn)對象屬性的繼承。

每個對象都有一個隱藏的__proto__屬性，__proto__屬性指向創(chuàng)建該對象的函數(shù)的原型prototype；

每個函數(shù)都有一個prototype屬性，其prototype屬性值是一個對象；

對象是沒有prototype屬性的，函數(shù)是沒有__proto__屬性的；

通過原型prototype，可以實現(xiàn)對象屬性的繼承，即創(chuàng)建在構(gòu)造函數(shù)原型上的方法和屬性可以被所有由該構(gòu)造函數(shù)生成的實例所共享；

2、原型鏈

什么是原型鏈？
原型鏈描述的是對象的繼承圖譜（類似于家譜圖），當訪問一個對象的屬性的時候，會在該對象中進行查詢，如果在該對象中沒有查詢到，則會沿著該對象的__proto__線進行查詢，直到查詢到該屬性或者到Object.prototype，這樣層層向上查詢的線路就是該對象的原型鏈。

3、instanceof

typeof在判斷引用數(shù)據(jù)類型時只能返回object和function，不能準確判斷引用數(shù)據(jù)類型時數(shù)組還是對象。而instanceof可以很好用于判斷引用數(shù)據(jù)類型。

用法： A instanceof B

instanceof是通過判斷對象A的原型鏈上是否存在B的原型來確定A的數(shù)據(jù)類型；
藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網(wǎng)站建設、平面設計服務

評論(0) 瀏覽(3973)

302018-7

這篇超詳細的教程，幫你全面掌握 APP 中的投影設計！

濤濤

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

看似簡單的投影，在高手眼里有千萬種變化。不信看看今天這篇文章，讓資深設計師教你做投影設計！

在今天的 UI設計中，投影使用的范圍和頻次越來越高。打開手機APP，或是看追波上的練習稿，都可以看見無數(shù)投影使用的案例。

掌握好投影的使用，是必備的 UI 視覺設計基礎。投影遠沒有大家想象的那么簡單，即使軟件中可以設置的參數(shù)并不多，在我的教學過程中，很多學員始終沒辦法很好的應用投影來提升自己的設計質(zhì)感。

所以，這篇文章就會詳細講解投影的正確設計方法。

一、投影的基本介紹

在了解投影和設計的關(guān)系前，我們要先知道投影是什么。用專業(yè)點的方式解釋，即：

投影指的是用一組光線將物體的形狀投射到一個平面上去，稱為「投影」。

有了光源，才有投影。光影是美術(shù)和攝影最核心的基礎。那么投影有什么特征呢，先看看下面的這張靜物攝影。

圖中有很清晰的向右延伸的投影。距離主體越遠的投影，也就越模糊，越淡。通過這樣的投影我們還可以很輕易的分析出，光源在左側(cè)，且物體是放置在地面上的。

投影可以帶給我們非常多隱藏的信息，而這些往往被我們所忽略。再看看下方的案例，當背景無法直觀的提供物體所處高度時，投影就能起到關(guān)鍵的作用。

在平面畫布中，投影的做法直接影響我們對元素的認識。例如下圖中，投影可以讓我們了解按鈕本身是有厚度（遮擋了光線）或是離開了水平面處于懸浮狀態(tài)。

當然，投影除了對物理信息的暗示，還涉及到對視覺效果的表現(xiàn)。上面的白鞋投影很重，且輪廓清晰，這樣能塑造更強烈的沖突，增加鞋子的立體感。但是不是所有攝影都需要有這樣雕刻版的投影效果呢？答案是否定的，例如下面這張圖片。

主體物和背景色彩能很好的結(jié)合，創(chuàng)造出有趣歡快的視覺氛圍，所以只需要柔和的投影即可。在 UI 的設計中，對于陰投影參數(shù)的定義，也會直接影響我們畫面的視覺效果。

成熟的攝影作品，會根據(jù)對投影的需要再去調(diào)節(jié)打光的方式，這是個非常復雜而且繁瑣的過程，需要經(jīng)年累月的學習。而在設計的過程中，創(chuàng)造投影卻非常容易，所以我們更該重視的是，如何正確的設計投影。

即先構(gòu)思出元素的物理特性，再給予它正確美觀投影樣式。

二、UI設計中的投影

在進入了扁平化的設計環(huán)境后，投影有很長一段時間被抹除，因為大家認為那是擬物的遺毒，就怕設計里用到擬物元素顯得不夠時髦。

到了 Material Design 發(fā)布以后，谷歌在規(guī)范中增加了 Z 軸的概念，也就是為平面預設了立體的空間，設計元素可以定義與空間中水平面的距離。

下圖中，Z 軸數(shù)字越大，代表和水平面的距離越遠，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的坐標并沒有任何改變。

既然增加了投影，那么谷歌的專業(yè)設計團隊，肯定不會很隨意的制定其參數(shù)。當我們打開谷歌的官方 UI KITS 源文件進行查看時，就能發(fā)現(xiàn)其中的不同。

可以看見，元素疊加了多層的投影，這是違反新手對于投影定義的直覺的。原因在與，一般軟件中定義的投影，其深淺與元素的距離是線性等比的，而現(xiàn)實世界中，深淺與距離是非線性的函數(shù)關(guān)系。

在 UI設計師接觸的平面類軟件中，只有 PS 具備完美復現(xiàn)這種投影的能力，即控制投影的等高線。

而 Sketch、XD 這些軟件都不具備這樣的功能，且手機系統(tǒng)的投影渲染機制也是線性的，所以谷歌就通過使用 TopShadow、BottomShadow 疊加的方式，去模擬真實的投影效果，讓它們看起來更和諧自然，這就是多層投影的奧秘。

上面出現(xiàn)的投影都是黑白灰，但在現(xiàn)在流行的設計作品中，最常見的是應用了彩色的投影，攝影中也經(jīng)常會應用彩色的投影渲染氛圍。

但是，投影中的這些彩色區(qū)域，并不完全都是投影，還包含了折射和漫反射的原理等。為了簡化，我們可以認為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘，傘下的人頭頂也會彌漫著草原的芬芳……

三、投影設計演示

在開始展示具體的設計案例前，我們要先明確一個原則，即：

優(yōu)雅的投影是讓你感受到它的存在，但不會吸引你去關(guān)注它！

一般的設計軟件中，元素的陰影即是在元素的背后添加了一個相同輪廓的純色矢量圖形，我們可以通過 XY 軸移動它的位置，并使用模糊的參數(shù)來設置它的模糊度。

當元素的距離水平面越近，陰影距離元素也就越近，即 XY 軸越小，模糊也越小，如果離得遠則相反。

1. 常規(guī)投影類型

第一種投影的類型，即光源從元素的上方投射下來，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標為0，只添加模糊的參數(shù)，透明度較低。第二層陰影使用相同的模糊參數(shù)，增加 Y 軸坐標，透明度較高。

在非 MD 設計中，它濃郁的投影參數(shù)會讓整個界面變「臟」，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現(xiàn)更自然舒適。要牢記的是，當使用純黑色做陰影時，透明度無論如何都不應該高于 20%，正常區(qū)間在 5%-15%。

既然知道陰影屬性的規(guī)律，我們還可以復制個矢量圖層做模糊效果也可以得到一樣的效果，這種方法可以支持我們設計出更真實的投影。即將 BottomShadow 獨立出來，縮小并向下移動。

如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺去調(diào)整它們的透明度。

如果感覺不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。

既然前面提到彩色投影是由于光線穿透了元素，那么當使用了漸變色或者是圖片的投影，我們在上一步復制出的那層投影，就可以不使用填充色，而是直接用漸變或者是原圖進行模糊和透明度調(diào)整。

2. 非常規(guī)投影類型

光有垂直于平面的關(guān)系，那么發(fā)揮想象力，我們還可以更改光與面的位置，如下圖所示。

在這個場景中，投影就作用在圖片下方的地面，只有地面處于透視狀態(tài)時，才能可以看見它的投影，所以，我們就可以得到下方的效果。

當然，我們還可以結(jié)合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會發(fā)生變化。

我們甚至可以預設元素本身產(chǎn)生有一定的變形，如邊緣翹起，那么就會產(chǎn)生獨特的陰影類型。

我們可以從日常生活中的觀察將各種不同的投影形式引用進我們的設計中，讓我們的設計視覺更豐富有趣。

總結(jié)

學會正確的投影設計方式，并不是僅僅讓我們局限在對 UI 元素的設計上。它還能給我們帶來很多意想不到的幫助，例如做設計的包裝。

通過前面講解的知識點，上方展示案例中應用的陰影方式相信你們已經(jīng)可以看出端倪了，如果使用基礎的陰影設置去創(chuàng)建展示的陰影，就會發(fā)現(xiàn)效果遠遠不如案例的高級，自然也難以帶給別人良好的視覺體驗。

最后，在項目中，想要將設計出來的陰影交付給開發(fā)，真正落地實現(xiàn)出來，無論安卓或是 iOS ，陰影的渲染和設計軟件的參數(shù)是不一致的，這就需要大家自己鉆研了。

藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網(wǎng)站建設 、平面設計服務。

評論(0) 瀏覽(3852)

302018-7

網(wǎng)頁設計的色彩心理學

鶴鶴

在設計的各個方面都被廣泛使用，這已不是什么秘密。從日常中使用的顏色，到品牌標識和網(wǎng)站設計，顏色是可以向用戶傳達特定消息的重要元素。

評論(0) 瀏覽(3744)

首頁

原生js實現(xiàn)移動端touch事件，解決穿透問題

四種touch事件

案例

間距不會調(diào)？掌握這一個點，從此不再迷茫！

一、為什么要統(tǒng)一間距？

二、它的價值是什么？

三、站在巨人肩膀上思考

四、怎么做？

總結(jié)

banner的“分層設計”

UI界面超逼真！Magic Leap One曝光2款虛擬現(xiàn)實新應用

設計你的設計生涯

一看就懂，詳解大廠ui設計制作規(guī)范步驟

一看就懂！詳解大廠UI設計規(guī)范制作步驟

你為什么覺得交互設計難？

你為什么覺得交互設計難？

一、交互設計是什么？

二、入門交互作品集需要從哪些方向入手？

與原型相關(guān)的那些事兒

1、原型prototype

2、原型鏈

3、instanceof

這篇超詳細的教程，幫你全面掌握 APP 中的投影設計！

一、投影的基本介紹

二、UI設計中的投影

三、投影設計演示

總結(jié)

網(wǎng)頁設計的色彩心理學

分類

日歷

鏈接

個人資料

存檔

首頁

四種touch事件

案例

一、為什么要統(tǒng)一間距？

二、它的價值是什么？

三、站在巨人肩膀上思考

四、怎么做？

總結(jié)

一看就懂！詳解大廠UI設計規(guī)范制作步驟

你為什么覺得交互設計難？

一、交互設計是什么？

二、入門交互作品集需要從哪些方向入手？

1、原型prototype

2、原型鏈

3、instanceof

一、投影的基本介紹

二、UI設計中的投影

三、投影設計演示

總結(jié)

分類

日歷

鏈接

個人資料

存檔

一、為什么要統(tǒng)一間距？

二、它的價值是什么？

四、怎么做？

一看就懂！詳解大廠UI設計規(guī)范制作步驟

你為什么覺得交互設計難？

一、交互設計是什么？

二、入門交互作品集需要從哪些方向入手？

1、原型prototype

2、原型鏈

3、instanceof

一、投影的基本介紹

二、UI設計中的投影

三、投影設計演示