首页

原生js实现移动端touch事件,解决穿透问题

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

四种touch事件

touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发 
每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表

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

targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY: //触摸点相对于页面的位置

screenX / screenY: //触摸点相对于屏幕的位置

identifier: //touch对象的ID

target: //当前的DOM元素

注意

手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

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

2.禁止滚动

preventDefault是阻止默认行为,在touchMove事件中使用可阻止默认行为滚动

event.preventDefault();

3.解决穿透 
在touchStart事件后添加touchMove事件的监听,在touchMove事件里添加touchEnd事件的监听,在touchEnd事件中移除touchMove和touchEnd的事件监听,即可解决穿透问题

4.removeEventListener 
传入的处理事件函数一定是相同的函数,不能是匿名函数

案例

<!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必经之处,一条极美的铁路。铁路下面是个小型的盐沼,淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过,只好继续赶往东乌旗。</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>以上这些作品分别来自两位设计师作为观者,您能否通过设计风格进行区分</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数组对象获得屏幕上所有的touch,取第一个touch startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值 isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动 this.slider.addEventListener('touchmove',this,false); this.slider.addEventListener('touchend',this,false);
        }, //移动 move:function(event){ //当屏幕有多个touch或者页面被缩放过,就不执行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(); //阻止触摸事件的默认行为,即阻止滚屏 this.slider.className = 'cnt'; this.slider.style.left = -this.index*600 + endPos.x + 'px';
            }
        }, //滑动释放 end:function(event){ var duration = +new Date - startPos.time; //滑动的持续时间 if(isScrolling === 0){ //当为水平滚动时 this.icon[this.index].className = ''; if(Number(duration) > 10){ //判断是左移还是右移,当偏移量大于10时执行 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第二个参数可以传一个对象,会调用该对象的handleEvent属性 }
};

slider.init(); </script> </body> </html>
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

间距不会调?掌握这一个点,从此不再迷茫!

雪涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

之前一直觉得色彩,图形,字体是 UI设计的三大构成,任何设计都是从这三大元素开始的,所有的 UI设计都是由这些构成的,但是却忽略了界面中空间的运用,也就是我们常说的间距。今天我想分享下几年前从 Google 的 Material Design 以及 8 pt grid 中学到的关于间距相关的教程,这篇分享有助于我们处理好界面间距一致性问题,让设计更加统一,同时定义规范里面的原子设计方法,能完美融合。


间距无处不在,界面中的边距,距离上边,左边,右边,顶部等各种属性。因此作为一名设计师,我们需要很好的掌握各种间距规律,通过间距规律很好的组织好内容。

一、为什么要统一间距?

是否大家和其他设计师在合作过程中,经常打开一个设计师源文件时候,发现各种间距大小,各种不一致地方,明明同一个页面,已经定义好规范,但是每个人使用的间距大小不一致。可能你们规范已经定义好了,最小单位是5,按照5的倍数去做设计,但是还是会出现各种奇葩的间距,10,12,18等等。或者说有的设计师是按照5来说的,间距会出现10,15,20,25,30,很难解释清楚哪种场景下用什么样间距规则。

不止是设计师,估计研发打开我们标注稿都是崩溃的。所以我们需要去统一间距规则,它的优点是能很好的让设计师之间合理的了解我们间距系统规则,同时开发在做设计开发时候,不需要每次都重复开发不同间距,导致整个 APP 风格混乱,那么我们如何去做呢?

二、它的价值是什么?

对于设计师:效率上,减少决策和思考,当我做一个需求时候,我不需要考虑到底用多大间距,同时能保持元素之间的节奏。

对于团队:设计师和开发之间沟通更加简单,开发人员能很好的按照最小单位按照增量递增去写间距,而不必每次都进行测量。

对于用户:他们信任的品牌有一致性的美感,在设备上没有模糊的像素偏移等,就和微信一样,说不出哪里好,但就是最好的。

三、站在巨人肩膀上思考

△ Material Design 在他的布局中有讲过,他们的间距,所有间距规则都是在8的倍数上进行递增,而且并不是毫无头绪的递增,只定义了几种增量关系,克制的有序的间距弹性,最小的是8,16,24,32,48,56,72。

△ 同样在 iPad端,间距规则也是有序的,克制的间距弹性,而不会出现我们日常设计中经常间距随意任选的使用,毫无规则乱用。

△ 在 Airbnb 的规范中,PC 和无线所有设计间距规范原则只定义了5种,8,16,24,48,64让规则更加简单,更好的统一了整个风格的一致性。

这些原则除了在元素和元素中运用,其实在按钮中,在按钮里面文字和上下左右的距离,都是有序的,我特别喜欢一句话,设计语言只有在有序的遵循和重复使用下才有用。

四、怎么做?

1. 定最小原子单位

这个最小间距规则可以是3的倍数,像蘑菇街、豆瓣一样,如果你希望产品留白比较多,也可以是5的倍数,例如 pinterest、亚马逊等,这个没有绝对的,一切根据你们产品内容丰富程度决定。

△ 亚马逊和 AliExpress 都是按照5为倍数来做间距增量

2. 确认间距弹性

大家都买过衣服或者鞋子,一般鞋子尺码,只会有固定几个(36,37,38,39,40,41,42,43)如果你需要的鞋子特别大,可能需要订制,包括衣服也是同样(XS,S.M.L.XL)。

在定义间距上同理,以往做设计规范的经验,在上一步定义好最小单位就完啦,然后设计师按照增量去设计就 ok,这样只是完成一半,如果按照4的增量(4,8,12,16,20,24,28,32,36,40….)这种带来问题就是任何间距都不可预测,提供的选择过于接近了,在什么情况下使用24,什么情况下使用28,我们很难去决策,如何去做。

之前在团队做过一个调研,我们问了设计师,也看了很多设计源文件,包括国外也有一个类似调查,就是在用4作为设计原子间距做设计时候,设计师使用最多的间距有哪些?结果很有意思,使用16的占一半,8和32的占一半,所以定义太多间距其实毫无意义,只会带来设计时候的不确定元素。

3. 根据业务场景,定义间距

正如前面所说,过多间距规则,只会带来设计师困惑,徒增界面复杂性,对开发,对设计师都是一种负担,所以我们在定义间距时候,一定要少,要让我们间距原则覆盖到绝大多数场景。可以从 XS,S,M,L,XL 为参考,小,中,大为纬度。

△ Airbnb 的间距规则 XS,S,M,L,XL 是最小为8,常用8,16,24,48,64,Airbnb 则更加克制,给设计师选择更少,反而更能保持设计次序。

△ quickbooks 的间距规则 XS,S,M,L,XL 是最小为4,常用8,16,20,40,60能很好满足各种业务场景,包括各种的间距场景都是在此基础上去拓展。

△ 那么界面中所有的间距地方,全部运用8,16,20,40,60这几个原则来做设计,保证页面统一性。

△ 包括页面中的元素高度,比如 banner 高度也是按照间距增量去设计高度,那么整个页面就更加有系统性和科学性。

△ 这也是我们在做系统设计时候经常用到的,通过增量来做设计。

△ 同理,在国外很多优秀产品中,我们不难发现这种规律的使用,更好的提升了设计效率。

总结

统一简化间距规则,通过这些规则,构建一致性界面,所有边距,元素空间都遵循规则时候,对于视觉设计和开发人员来说,都能很好解决一致性和效率问题。

在我们刚开始设计时候,可能会觉得没有真正的好处,但是当项目越来越复杂时候,团队规模越来越大,每天处理各种设计原子和设计分子时候,你会发现,当你使用固定的间距,它会比之前随意的间距规则有更好的效果。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


banner的“分层设计”

分享达人

在话题展开前我想提出一个怪现象:为什么现站酷,简书上这么多人分享板式设计,banner设计,字体设计其中不乏一些工作十年以上的资深前辈,但是还是有很多人当设计页面的时候还是脑袋空空,只能素材网站搬运,然后修修改改草草了事,长此以往。



UI界面超逼真!Magic Leap One曝光2款虚拟现实新应用

蓝蓝

据悉,Magic Leap近日将公布关于Magic Leap One的2D和3D用户界面,有关媒体还在该公司的开发人员文件中发现了包括Landscape和Immersive在内的应用程序。

设计你的设计生涯

蓝蓝

你首先要考虑的问题是:你是否喜欢从事设计工作?这很重要,若果答案是否定的,现在换一种职业还不算晚。因为并不是每一个人都喜欢或者适合做设计,可能是很偶然的原因学习了设计。你过去学习设计的经历并不会浪费,它对于你从事市场、广告、营销或其他管理工作是一种宝贵的财富,也许由于你的放弃,世上少了一个平庸的设计师,多了一个优秀的管理人员。你要知道,一个懂得设计的管理者比一个设计师更加难得。

一看就懂,详解大厂ui设计制作规范步骤

博博

一看就懂!详解大厂UI设计规范制作步骤

小小设计控 2018-07-30 09:34:38

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


小小设计控 2018-07-30 09:34:38
一看就懂!详解大厂UI设计规范制作步骤

一、提取设计原则关键词

一看就懂!详解大厂UI设计规范制作步骤

1. 提取一级关键词

一看就懂!详解大厂UI设计规范制作步骤

第一步,先要去提取出关键词,这个关键词怎么来,有几种方式获取,第一个从整个公司战略出发,任何一个产品一定有他的战略,品牌战略,商业战略。举个例子,假设我们是 eaby,公司今年战略是全球化,高品质,正品,那么这个就是一级核心关键词,所有的设计语言一定要和公司战略结合起来,可以理解为战略关键词是整个设计语言顶部金字塔。

二、运用情绪版提取二级关键词

一看就懂!详解大厂UI设计规范制作步骤

有了一级关键词后,需要去思考,那么什么样的设计能给人全球化的感受呢,什么样的感觉能有高品质,正品应该传递什么样的感觉呢?此刻需要用到第二个方法就是情绪版,通过情绪版去把符合这些关键词感受的图形具体化。

三、高品质特征是什么?

下图是一组日本的花茶设计,那么在这组设计中,设计师是如何体现高品质呢?

一看就懂!详解大厂UI设计规范制作步骤

△ 首先包装很精美耐看,设计简约

一看就懂!详解大厂UI设计规范制作步骤

△ 做工精量,整个产品包装,都是在富士山脚下

一看就懂!详解大厂UI设计规范制作步骤

△ 采摘环境很透明,值得被信任

一看就懂!详解大厂UI设计规范制作步骤

△ 整个品茶的过程也特别让人向往,很有仪式感

一看就懂!详解大厂UI设计规范制作步骤

△ 整个的设计很完整,很有设计感在里面

一看就懂!详解大厂UI设计规范制作步骤

通过以上案例拆解,我们能对这个高品质的关键词有更加进一步的理解,高品质原来在情感层面是一个这么抽象的感觉,但是很多同学会问,那么这二级词汇也很抽象,如何靠这个来做设计,很难去理解及表达,别着急,还有下一步。

1. 高品质设计表现形式?

关于高品质在视觉形式上如何来体现了,哪些设计感觉能代表高品质呢,这个时候就需要我们去寻找一些设计参考,这些案例要能代表高品质。

一看就懂!详解大厂UI设计规范制作步骤

△ 清晰的有品质的图片

一看就懂!详解大厂UI设计规范制作步骤

△ 牛皮癣,不精致不可取

一看就懂!详解大厂UI设计规范制作步骤

△ 优雅的排版和留白,文字清晰,杂志感受

一看就懂!详解大厂UI设计规范制作步骤

△ 图文密集,缺少版式不可取

一看就懂!详解大厂UI设计规范制作步骤

△ 精致的布局,栅格的体系,给人品质感

一看就懂!详解大厂UI设计规范制作步骤

△ 缺乏版式及设计感

一看就懂!详解大厂UI设计规范制作步骤

△ 有设计细节的

一看就懂!详解大厂UI设计规范制作步骤

△ 无细节不可取

一看就懂!详解大厂UI设计规范制作步骤

△ 合理的配色,简单清晰

一看就懂!详解大厂UI设计规范制作步骤

△ 山寨的配色不可取

一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤

△ 设计的延续性和完整性

2. GOOD CASE

一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤

3. BAD CASE

一看就懂!详解大厂UI设计规范制作步骤

四、设计分层

以上就是我们从一个战略关键词逐步推导到一级关键词,到二级关键词,到设计手法,以及对应设计表达,推导的一个全过程。

  • 本能层:清晰的,有设计感的,做工精致
  • 行为层:完善的,值得信任的,用心的
  • 精神层:让人向往的,值得期待的
一看就懂!详解大厂UI设计规范制作步骤

五、总结

以上大概为一个设计关键词的全部推导过程及到设计手法的确定,也是设计语言里面最难的部分,后面的关键词也是类似的思考方法和思路,最终通过推导我们需要得出每个关键词的情绪图,以及对应设计特征,最终需要在界面中展示的形色字构质,一个完整过程。

一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤
一看就懂!详解大厂UI设计规范制作步骤

比如国际化,同样通过前面思路,我们需要去思考国际化如何在设计中体现,去提炼出代表国际化的象征物,如地标,国旗,邮戳,货币等等,包括如何在界面中融于国际化元素,以及人物和节日场景。

结语

希望大家可以通过我这期的分享,能够详细理解到如何从公司战略层提取到核心一级关键词,到二级关键词,以及对应的设计手法,对应到形色字构质,大家可以依据此方法去拿你现在手上的界面去做一次体系化的推导。

最后,依据推导出来的原则,以及对应的设计手法去做概念,去在界面中运用,最终完成设计语言第一步,设计关键词和设计手法定义。

图片素材作者:Tran Mau Tri Tam ✪



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



你为什么觉得交互设计难?

博博

你为什么觉得交互设计难?

原创 康石石 2018-07-30 10:14:24

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

交互设计作为国内当下艺术留学中的一个新兴专业,申请人数逐年增加,甚至已有赶超服装设计、建筑设计这些热门留学专业的趋势。但在专业认知上,申请交互设计的同学却不及其他两个专业。这也使得很多交互学生在专业学习上要比其他人耗费更多时间,很难快速上手进行交互项目的创作。

但这丝毫不能推责于各位同学身上,因为国内基本没有正儿八经的交互设计专业,即便是有,多数也在工业设计与多媒体设计之间存有剪不断理还乱的关系,这使得很多同学对交互设计的认知较为单一,项目创作除了APP设计就是APP设计。但其实交互设计“入门”这件事,找对了方向,往往事半功倍。

今天的文章,康石石将为处于交互“入门”阶段的同学详细梳理两个问题:

1. 交互设计是什么?

2. 入门交互作品集需要从哪些方向入手?

希望大家在通读文章之后,能够尽快跨过“入门”这道门槛,以更稳定专业的心态进入作品集创作。

一、交互设计是什么?


各个百科上对交互设计都有非常明确的定义,但对于没有专业基础的同学们来说,这些定义还是略显弯弯绕绕,康石石简单解释一下:交互设计,其实就像人与人之间的日常交流一样,人与系统之间也是“有问有答”,具有互动性的,而交互设计就是协调人与系统之间的“交流”方式。凡是可以通过五感来达成的信息传递、观念传递、情感传递的互动行为都在“交流”的范围之内。

从具体表现形式上来说,包括但不限于手机APP、传统网站、可穿戴设备以及新兴的VR,各种与非电子类产品的交互关系也属于交互设计的范围。

你为什么觉得交互设计难?

这样一讲,交互设计的范围似乎太过宽泛,但其实简单来说,交互设计大致可以分为三个基础模块:

1. 美学——用户界面设计(User Interface Design)

2. 心理学——用户体验设计(User Experience Design)

3. 计算机&工程学——人机交互设计(Human-Computer Interaction)

你为什么觉得交互设计难?

在这里我们先说UI设计(用户界面设计),大多人似乎都知道UI设计是什么。但其实,UI放在交互系统内,比如众所周知的app、网站,它可以成为交互设计展现的一种媒介,是交互设计中一个难以或缺的组成部分。严格来说,UI设计并不属于交互设计,它实则应该归类于Graphic Design--平面设计。

HCI(人机交互设计),与VR、AR,以及大数据等次时代的前沿科技相关,未来发展前景光明。但需要强调的是,HCI绝大部分学校是按理工科教授,因为它主要研究的是人机如何交互,而不是人机为什么交互,为谁交互,以及交互究竟有何意义。简言之,就是HCI研究人机交互的技术,更简言之,多数是在搞程序、编代码。

最后,重点说一下涉及到心理学的UX设计(用户体验设计)在交互作品集的创作中,UX是尤为关键和重要的,主要原因在于,相较国内对于学术研究和视觉审美的培养,国外院校更看重的是设计出来的物品是否真正解决了用户的需求。

这一点就要求了设计者必须换位思考,设身处地的站在用户的角度上去考虑设计的每一步。这也应证了交互设计的本质——交互设计师设计出来的是用户想要的东西,而不是设计师要做用户想要的东西。

你为什么觉得交互设计难?

二、入门交互作品集需要从哪些方向入手?


一般情况下,对于完全零基础的同学,康石石东家-汉艺国际在其进行作品集创作前通常会先安排2-3周的基础专项课,一系列课程下来,基本就能掌握作品集创作所需的所有知识及能力。这些课程康石石无法在这一篇文章中表述完全,仅为还处于入门阶段的同学就两方面内容作简要解析:

1. 交互项目

这一点是大多同学都非常关心的问题,以下康石石列举五种最常见的交互项目,若有些同学已经具备较为完善的交互专业知识与能力,可以尝试更为高阶的项目:

1)APP、网页

交互设计作品集中,最容易上手的就是单一化的APP或网页项目,几乎每一个同学都会涉及到。而且APP与网页项目的制作过程与方法相似程度高达90%,同学们在创作项目初期可以先尝试这类项目练手,尽快熟悉作品集的创作流程。

Y同学,17届学生,获卡内基梅隆offer

你为什么觉得交互设计难?
你为什么觉得交互设计难?

2)复合APP制作

比上述提到的APP和网页稍复杂的是复合APP,比如产品+APP、传感+APP、装置+APP、手表+APP 、网页+APP等等,简单说,不仅仅是以APP为载体类型的应用都可以称之为复合App。主要也是为了解决形式单一化,以及丰富项目内容创造更多设计点。如果思考维度多元化,专业领域深入探究,也可以发展为一个服务设计项目。

3)交互装置制作

交互装置在交互作品集中属于拔高项目,因为技术方面涉及到了电子化编程和电路板连接传感器等内容,呈现效果体现了交互意识、审美意识以及代码意识。内容方面,交互装置更多是从产品原型开发去研究。由于涉及到代码问题,在创作这类项目之前,专业技能及代码知识都需要系统的了解。

H同学,15届学员,获伦敦传媒学院、爱丁堡大学、拉夫堡大学offer

你为什么觉得交互设计难?

4)游戏制作(普通→AR→VR)

在交互游戏制作过程当中,很多同学会遇到不知道制作流程,不明晰VR和AR是什么概念,或许也会困惑为何我们把AR、VR列入游戏制作等种种问题。事实上,VR、AR也都需要通过游戏引擎搭建,所以从本质上来看,它们都是游戏。

L同学,17届学员,获伦传offer

你为什么觉得交互设计难?
你为什么觉得交互设计难?

2. 创作交互作品集需要具备的“基础能力”

对于申请名校而言,同学们在基础专业知识、作品集创作流程之外,还要具备四种基础能力:基本审美能力、思考和解决问题的能力、创意、以及个人风格。

1)基本审美能力

对于设计师而言,良好的审美能力是必备的创作基础。一般情况下,院校的考官大多会通过项目中各种低保真、高保真的UI原型设计,以及整体作品集的排版等视觉元素来判定,包括排版中每个图标的位置、统计字体大小的一致性、整个项目风格的统一性等等。

你为什么觉得交互设计难?

2)思考和解决问题的能力

设计过程中,设计者的思维方式、逻辑关系是否清晰、有条理,是否通过设计过程解决了前期提出的问题,这些才是海外艺术设计院校的老师们最关注的关键性问题。

需要和同学们强调的是,想要创作一本优秀的作品集,最基础的要求是熟知其创作流程,这是考官的考察点,但仅凭这些自然不够。

无论是前期调研还是后期做原型做测试,正规作品集的流程通常都是一样的。因此,考官在判定申请者个人思考和解决问题能力的高低时取决于不同人在思考过程中每一步的逻辑所在。根据什么现象发现什么问题,根据什么问题设计什么功能,如何通过思考一步步得到解决方案,这些都值得同学们在创作中进行多维度的思考与试验。

3)创意

不拘泥于APP类型的交互设计。一个交互作品集通常需要5个项目,同学们在APP设计之外,必然需要通过更多创新型项目,用以体现自己对专业能力的把控以及创意思维的体现。比如目前还属于创新型拔高项目的VR和AR,尤其是在如今众多艺术作品集表现形式都略显中规中矩的情况下,一个优秀的VR或AR项目会帮助作品集脱颖而出,为整个作品集增加亮点。

比如汉艺16届学员T同学的作品集项目中,将水下AR系统与导航系统相结合,让两种不同的交互题材领域相互融合,展现了自己多维度的创作能力。

T同学,汉艺16届学员,获金史密斯,威斯敏特大学offer

你为什么觉得交互设计难?
你为什么觉得交互设计难?

4)个人风格

在交互作品集中,个人风格的体现,几乎可以算得上能够最快让自己的作品集脱颖而出的有效方式之一。这里说的个人风格并不是指每个人所做的作品集项目的风格,而是你作为设计者,作品集中所包含的个人设计理念和思考风格。

以汉艺16届学员D同学的CUI项目DANA为例,项目主要为已刑满释放重获自由的前犯人们提供重返社会工作的各种服务。首先,可以看出项目题材切入点较为新颖,充分展现了D同学在生活中善于观察的独到之处,此外,D同学还细心的为DANA设计了虚拟形象,细节部分可见一斑,充分体现了设计者的与众不同和强烈的个人风格。

D同学,16届学员,获CCA、SVA、Parsons Offer

你为什么觉得交互设计难?
你为什么觉得交互设计难?

Final: 以上对交互作品集入门阶段的知识要点为同学们做了简要整理,大家需要明确的是,交互设计虽是一个新兴专业,很多人对其认知也确实不够全面,但从零基础到能够创作一个完整的交互项目之间并非难以跨越,甚至只要合理安排好时间,有明确的学习规划,便能很快进入创作期。

最后,上述只是入门交互设计的基础知识,若想要支撑自己创作出更具竞争力的交互作品集,必然需要同学们在交互设计领域中继续学习和探索。康石石与东家汉艺也在一直尝试通过各种课程帮助大家探索更多交互的可能性,这不仅是为了作品集创作,更多的是希望各位在专业能力以及创作思维上都能有更高质的提升。


艺术留学&艺术作品集咨询:

汉艺国际教育--康石石作品集指导团队

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



与原型相关的那些事儿

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

写在前面: 
1、什么是对象? 
对象就是属性的集合; 
2、对象与函数的关系? 
对象都可以看做是由构造函数Object实例化生成的; 
函数都可以看做是由构造函数Function实例化生成的; 
构造函数Object也是由构造函数Function生成的;

1、原型prototype

如果让用简单的几句话说一下什么是原型,或者给原型下个定义,我觉得还是有点困难的,困难之处在于即使说了之后,对于听的人来说,估计也是一头雾水。不过,关于原型的一些基本的东西还是要说明的,这些基本的东西差不多就可以构成一个对原型的理解。首先,原型是函数才有的一个属性;其次,原型就是一个对象,我们可以给它添加属性或方法;最后,原型的作用是实现对象属性的继承

每个对象都有一个隐藏的__proto__属性,__proto__属性指向创建该对象的函数的原型prototype

这里写图片描述

每个函数都有一个prototype属性,其prototype属性值是一个对象;

这里写图片描述

这里写图片描述

对象是没有prototype属性的,函数是没有__proto__属性的;

通过原型prototype,可以实现对象属性的继承,即创建在构造函数原型上的方法和属性可以被所有由该构造函数生成的实例所共享;

2、原型链

什么是原型链? 
原型链描述的是对象的继承图谱(类似于家谱图),当访问一个对象的属性的时候,会在该对象中进行查询,如果在该对象中没有查询到,则会沿着该对象的__proto__线进行查询,直到查询到该属性或者到Object.prototype,这样层层向上查询的线路就是该对象的原型链。

3、instanceof

typeof在判断引用数据类型时只能返回object和function,不能准确判断引用数据类型时数组还是对象。而instanceof可以很好用于判断引用数据类型。

用法: A instanceof B

instanceof是通过判断对象A的原型链上是否存在B的原型来确定A的数据类型;

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

雪涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

看似简单的投影,在高手眼里有千万种变化。不信看看今天这篇文章,让资深设计师教你做投影设计!

在今天的 UI设计中,投影使用的范围和频次越来越高。打开手机APP,或是看追波上的练习稿,都可以看见无数投影使用的案例。

掌握好投影的使用,是必备的 UI 视觉设计基础。投影远没有大家想象的那么简单,即使软件中可以设置的参数并不多,在我的教学过程中,很多学员始终没办法很好的应用投影来提升自己的设计质感。

所以,这篇文章就会详细讲解投影的正确设计方法。

一、投影的基本介绍

在了解投影和设计的关系前,我们要先知道投影是什么。用专业点的方式解释,即:

投影指的是用一组光线将物体的形状投射到一个平面上去,称为「投影」。

有了光源,才有投影。光影是美术和摄影最核心的基础。那么投影有什么特征呢,先看看下面的这张静物摄影。

图中有很清晰的向右延伸的投影。距离主体越远的投影,也就越模糊,越淡。通过这样的投影我们还可以很轻易的分析出,光源在左侧,且物体是放置在地面上的。

投影可以带给我们非常多隐藏的信息,而这些往往被我们所忽略。再看看下方的案例,当背景无法直观的提供物体所处高度时,投影就能起到关键的作用。

在平面画布中,投影的做法直接影响我们对元素的认识。 例如下图中,投影可以让我们了解按钮本身是有厚度(遮挡了光线)或是离开了水平面处于悬浮状态。

当然,投影除了对物理信息的暗示,还涉及到对视觉效果的表现。上面的白鞋投影很重,且轮廓清晰,这样能塑造更强烈的冲突,增加鞋子的立体感。但是不是所有摄影都需要有这样雕刻版的投影效果呢?答案是否定的,例如下面这张图片。

主体物和背景色彩能很好的结合,创造出有趣欢快的视觉氛围,所以只需要柔和的投影即可。在 UI 的设计中,对于阴投影参数的定义,也会直接影响我们画面的视觉效果。

成熟的摄影作品,会根据对投影的需要再去调节打光的方式,这是个非常复杂而且繁琐的过程,需要经年累月的学习。而在设计的过程中,创造投影却非常容易,所以我们更该重视的是,如何正确的设计投影。

即先构思出元素的物理特性,再给予它正确美观投影样式。

二、UI设计中的投影

在进入了扁平化的设计环境后,投影有很长一段时间被抹除,因为大家认为那是拟物的遗毒,就怕设计里用到拟物元素显得不够时髦。

到了 Material Design 发布以后,谷歌在规范中增加了 Z 轴的概念,也就是为平面预设了立体的空间,设计元素可以定义与空间中水平面的距离。

下图中,Z 轴数字越大,代表和水平面的距离越远,上升得越多。而带给我们这种感受的原因,就是投影的暗示,元素本身的坐标并没有任何改变。

既然增加了投影,那么谷歌的专业设计团队,肯定不会很随意的制定其参数。当我们打开谷歌的官方 UI KITS 源文件进行查看时,就能发现其中的不同。

可以看见,元素叠加了多层的投影,这是违反新手对于投影定义的直觉的。原因在与,一般软件中定义的投影,其深浅与元素的距离是线性等比的,而现实世界中,深浅与距离是非线性的函数关系。

在 UI设计师接触的平面类软件中,只有 PS 具备完美复现这种投影的能力,即控制投影的等高线。

而 Sketch、XD 这些软件都不具备这样的功能,且手机系统的投影渲染机制也是线性的,所以谷歌就通过使用 TopShadow、BottomShadow 叠加的方式,去模拟真实的投影效果,让它们看起来更和谐自然,这就是多层投影的奥秘。

上面出现的投影都是黑白灰,但在现在流行的设计作品中,最常见的是应用了彩色的投影,摄影中也经常会应用彩色的投影渲染氛围。

但是,投影中的这些彩色区域,并不完全都是投影,还包含了折射和漫反射的原理等。为了简化,我们可以认为是光线穿透物体从而投射出带有物体本身颜色的投影。就像撑起一把绿色的阳伞,伞下的人头顶也会弥漫着草原的芬芳……

三、投影设计演示

在开始展示具体的设计案例前,我们要先明确一个原则,即:

优雅的投影是让你感受到它的存在,但不会吸引你去关注它!

一般的设计软件中,元素的阴影即是在元素的背后添加了一个相同轮廓的纯色矢量图形,我们可以通过 XY 轴移动它的位置,并使用模糊的参数来设置它的模糊度。

当元素的距离水平面越近,阴影距离元素也就越近,即 XY 轴越小,模糊也越小,如果离得远则相反。

1. 常规投影类型

第一种投影的类型,即光源从元素的上方投射下来,可以参考谷歌提供的投影方案叠加两层投影。第一层是 XY 轴坐标为0,只添加模糊的参数,透明度较低。第二层阴影使用相同的模糊参数,增加 Y 轴坐标,透明度较高。

在非 MD 设计中,它浓郁的投影参数会让整个界面变「脏」,变拥挤。我们要做的是要降低投影的透明度,这样才能让投影的表现更自然舒适。要牢记的是,当使用纯黑色做阴影时,透明度无论如何都不应该高于 20%,正常区间在 5%-15%。

既然知道阴影属性的规律,我们还可以复制个矢量图层做模糊效果也可以得到一样的效果,这种方法可以支持我们设计出更真实的投影。即将 BottomShadow 独立出来,缩小并向下移动。

如果想要得到彩色的投影,那么只要切换投影的色彩即可。值得注意的是,不同色彩的刺激程度不同,我们要凭感觉去调整它们的透明度。

如果感觉不得劲,阴影太少了,那么我们就让元素的 Z 轴上升。

既然前面提到彩色投影是由于光线穿透了元素,那么当使用了渐变色或者是图片的投影,我们在上一步复制出的那层投影,就可以不使用填充色,而是直接用渐变或者是原图进行模糊和透明度调整。

2. 非常规投影类型

光有垂直于平面的关系,那么发挥想象力,我们还可以更改光与面的位置,如下图所示。

在这个场景中,投影就作用在图片下方的地面,只有地面处于透视状态时,才能可以看见它的投影,所以,我们就可以得到下方的效果。

当然,我们还可以结合光源的类型,比如使用聚光灯等,那么阴影的轮廓就会发生变化。

我们甚至可以预设元素本身产生有一定的变形,如边缘翘起,那么就会产生独特的阴影类型。

我们可以从日常生活中的观察将各种不同的投影形式引用进我们的设计中,让我们的设计视觉更丰富有趣。

总结

学会正确的投影设计方式,并不是仅仅让我们局限在对 UI 元素的设计上。它还能给我们带来很多意想不到的帮助,例如做设计的包装。

通过前面讲解的知识点,上方展示案例中应用的阴影方式相信你们已经可以看出端倪了,如果使用基础的阴影设置去创建展示的阴影,就会发现效果远远不如案例的高级,自然也难以带给别人良好的视觉体验。

最后,在项目中,想要将设计出来的阴影交付给开发,真正落地实现出来,无论安卓或是 iOS ,阴影的渲染和设计软件的参数是不一致的,这就需要大家自己钻研了。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

网页设计的色彩心理学

分享达人


在设计的各个方面都被广泛使用,这已不是什么秘密。从日常中使用的颜色,到品牌标识和网站设计,颜色是可以向用户传达特定消息的重要元素。



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档