首页

JavaScript 获取窗口属性

seo达人

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

获取窗口属性

  • 查看滚动条的滚动距离 
    • window.pageXOffset/pageYOffset 
      • IE8及IE8以下不兼容
    • document.body/documentElement.scrollLeft/scrollTop 
      • 兼容性比较混乱,同时取两个值相加,因为不可能存在两个同时有值
    • 封装兼容性方法,求滚动轮滚动离getScrollOffset()

为了解决兼容性的问题,我们来封装一个函数:

<script type="text/javascript">
    function getScrollOffset() {
        if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
        else{
            return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
            }
        }
    }
</script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 查看视口的尺寸 
    • window.innerWidth/innerHeight 
      • IE及IE8以下不兼容
    • document.documentElement.clientWidth/clientHeight 
      • 标准模式下,任意浏览器都兼容
    • document.body.clientWidth/clientHeight 
      • 适用于怪异模式(向后兼容)下的浏览器
    • 封装兼容性方法,返回浏览器视口尺寸getViewportOffset()

为了解决兼容性的问题,我们来封装一个函数:

<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
                w : window.innerWidth,
                h : window.innerHeight
            }
        }else{ if(document.compatMode ==="BackCompat") { return {
                    w : document.body.clienWidth,
                    h : document.body.clientHeight
                }
            }else{ return {
                    w : document.documentElement.clientWidth,
                    h : document.documrntElement.clientHeight
                }
            }
    }
</script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 查看元素的几何尺寸

    • domEle.getBoundingClientRect();
    • 兼容性很好
    • 该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标。
    • height和width属性老版本IE不显示(人为解决:分别相减一下就能得出)
    • 返回的结果并不是”实时的”
  • 让滚动条滚动

    • window上有三个方法
    • scroll(x,y)在x轴、y轴上滚动的位置,scrollTo(x,y) 
      让滚动条滚动到当前位置,而不是累加距离(这两种方法是完全一样的)
    • scrollBy();累加滚动距离
    • 三个方法功能类似,用法都是将x,y坐标传入。即实现让滚动条滚动到当前位置。
    • 区别:scrollBy()会在之前的数据基础之上做累加。
    • eg:利用scroll()页面定位功能。
    • eg:利用scrollBy()快速阅读功能。

练习: 
做一个小阅读器,会自动翻页。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本内容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加锁,防止连续点start产生累加加速 start.onclick = function() { if(key) {
            timer = setInterval(function() { window.scollBy(0,10);
            },100);
            key = false;
        }
    }
    stop.onclick = function() { clearInterval(timer);
        key = true;
    } </script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

浅谈谷歌Circle UI

蓝蓝设计的小编

这段话是我补上的,我是设计师Johnson1949

提到谷歌原生系统UI大家有的人不是很喜欢,有的人可能已接触到安卓手机系统=谷歌系统UI其实,有一些偏颇,2014年的谷歌系统UI还是比较难看,不过自从采用material design风格以来,流畅度和色彩搭配,图标的设计真的不错了,目前小编用的是motonexus6,旨在体验谷歌系统UI。有需要的可以试一下。

UI设计闪屏/启动页/引导页制作技巧

博博

UI设计闪屏/启动页/引导页制作技巧

云和数据西安中心 2018-07-02 14:19:10

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

需要做一个“开屏页”

“哪个开屏页”

“带跳过的哪个”

“带跳过的。是一页的那个还是可以滑动的?”

“滑动的”

上面的对话不知道有没有很熟悉。

我们都知道APP在启动时会有一些页面先行展示,例如这样

UI设计闪屏/启动页/引导页制作技巧

通常来说我们会简单的把它们统称为“开屏页”或者“启动页”

但实际上,这种统称就像是把下面这些都小可爱都叫做“熊”一样不严谨。“熊”宝

宝们表示很委屈。

UI设计闪屏/启动页/引导页制作技巧

其实这些“开屏页”的交互方式其实并不是完全一样的,因此也承载着完全不同的功能,有着不同的名字:闪屏 Splash Screen、启动页 Launch Screen、引导页Onboarding Screen。接下来我们就来走进它们的“内心世界”,了解一下它们的真正用法。

01 闪屏 Splash Screen

定义:闪屏是每次启动过程中展示给用户的一个过渡页面,用于减缓用户在打开应用时等待的焦虑心情。

UI设计闪屏/启动页/引导页制作技巧
UI设计闪屏/启动页/引导页制作技巧

交互方式:闪屏通常是一张背景图片,无法进行交互,无法点击也无法跳转

劣势:无法跳转,只能进行展示作用,无法很好的承载营销需求

优势:展示时间不可控

使用建议:

避免包含太多文字字符(阅读速度慢的话可能还没看完就关闭了)

不用过去吸引用户的注意(干扰用户的本来目的)

不要做广告(干扰,且不能点击)

02 启动页Launch Screen

定义:启动页形式闪屏但拥有交互功能,常用于展示营销活动广告图片并引导用户点击

使用示例:常用与展示营销活动广告图片并引导用户点击

UI设计闪屏/启动页/引导页制作技巧

交互方式:

1、点击页面或按钮进入活动承载页

2、点击跳过,跳过启动页,进入首页,或N秒后自动消失

注:由于加载时间不确定,启动图通常会缓存并存在下次启动时使用

03 引导页Onboarding Screen

定义:用户安装或更新后首次启动时展示数个页面,常用于介绍应用的核心概念,功能玩法,使用场景,核心变更

使用示例:

UI设计闪屏/启动页/引导页制作技巧

交互方式:

1、左右滑动可以切换

2、最后一页页面可点击进入

注:首次打开才出现,之后就不在出现,清除用户数据,再次打开应用可以看到

使用建议:

1.轻易不要使用引导页,以免阻碍用户快速的使用体验

2.为了降低用户反感程度,引导页数通常越少越好(<5)

3.尽量提供“跳过”按钮

4.每页的文案不要超过9个字,如果有更多内容可以用小号文字进行辅助说明

(根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。)

劣势:

增加了用户进入产品的时间,用户翻页过多,可能会失去耐心,降低好感度

04常规的启动流程

通常来说:开屏三兄弟顺序如下:

UI设计闪屏/启动页/引导页制作技巧

流程仅是建议的常规流程,通常来说闪屏是基本都有的,而启动页和引导页,如果产品需要,三个流程都走一遍也不是不可以,不过还是要尽量考虑到用户的忍耐度,不要让用户在漫长的“走流程”中失去了最初的兴趣。

小结

Appe曾经在《iOS人机交互手册》里建议:尽量不要展示闪屏或其它启动流程,避免干扰用户注意力然而,在马桶盖、地板砖甚至是美女身上都能打广告的今天,启动页/闪屏/引导页这三兄弟自带的“广告位”光环,让产品、运营们对其欲罢不能,几乎已经成为APP的启动标配,一起组成了现在常见的启动流程。它们共同承担起展示品牌性格,广告营销入口,功能介绍与引导的大任。

这让我想到最近看的一个段子,放出来给大家看看,仅做娱乐。

UI设计闪屏/启动页/引导页制作技巧

不过,正所谓存在即合理,既然市面上的启动流程都是“全套服务”,说明这么做定是符合特定阶段的市场需求的,所以作为产品设计师的我们在调侃过之后,还是要做好我们的本职工作:用专业知识解决实际问题。看过这篇文章后,相信

你又重新认识了开屏三兄弟,并且能更好地利用他们各自的特性好好服侍各位产品、品牌、运营大佬了~


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



APP中搜索框的样式以及区别

博博

APP中搜索框的样式以及区别

云和数据西安中心 2018-07-09 13:24:29

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



前言

搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能。不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式。

下面就和大家聊聊常见的四种样式:一级tab、顶部搜索、搜索 icon 、隐藏式搜索

01.一级tab

位于屏幕底部的导航,搜索作为一个独立的入口,适用于搜索场景相对重要的 app 。设计的时候通常会使用“放大镜” icon ,简单、识辨度高符合用户已有的认知。

部分 app 会在一级 tab 中设置“发现”入口来承接搜索功能,在“发现”页面中,由于增加其他运营内容导致流量被分摊,搜索相对就会弱一些。

一级 tab 相比其他方式,搜索过程更方便,点击操作更容易。

APP中搜索框的样式以及区别

例如在贝壳找房 app 中,“找”作为该 app 的重要功能单独设立一个入口,用户搜索时无需进入二级页面中去完成条件筛选,搜索过程更方便、一目了然。

在筛选中选择总价、房型、特色、朝向等条件后,点击“开始找房”按钮进入搜索结果页。如果在搜索过程中退出,再次回到该页面后,仍会保留上一次操作的结果,方便下次修改和查找。

贝壳找房和 App Store 搜索入口在底部导航,这个位置符合拇指热力区操作,屏幕偏下的位置单手持握手机的时候更容易点击。

需要注意的是底部导航的数量有限。在底部导航超过5个的时候不建议在底部再增加入口,过于拥挤不适合用户点击。

02.顶部搜索

位于屏幕顶部的导航,让用户打开 app 想要搜索时能快速找到,符合用户期待,适用于当前搜索频率高的页面。当用户浏览的时候,搜索框也会悬停在顶部,不断引导用户进行搜索。

通常以搜索框的形式存在,为了突出搜索框,搜索框会有浅灰色的底/描边/投影、带颜色的导航衬底或者有明显的提示语。

不同类型的 app 搜索功能也不一样,除了文本搜索,淘宝有图片搜索功能,方便拍图找物;虾米音乐还有语音搜索功能,方便查歌找曲。

顶部搜索相比其他方式,搜索入口更显眼,为转化提供更多流量。

APP中搜索框的样式以及区别

例如在天猫 app 中,当用户进入的时候,部分是带着明确的购买意图,这时就需要让他们快速找到搜索功能。所以天猫 app 把搜索框置顶在导航栏上,即使是在上滑的时候,也是在顶部。

在顶部搜索框内推荐了客厅地毯,根据用户的历史搜索行为触发的引导,在用户已经搜索的基础上,转化率会大大的提升。 App 运营还会根据热点、时节更换搜索框的预设关键词,能吸引更多的点击量。

APP中搜索框的样式以及区别

需要注意的是结合场景去使用搜索功能,例如支付宝,刚进入 app 用户可能找不到想要的功能在哪里,这时候搜索框置顶让用户方便去查找。但是当用户在向下浏览的时候,用户想要浏览推荐内容,搜索功能相对减弱,为了减少空间占用,搜索框变搜索 icon 。

03.搜索icon

使用 icon 作为搜索点击区域,减少导航栏占用,弱化了搜索功能,适用于当前搜索频率较低的页面。设计的时候通常也会使用“放大镜” icon 。

搜索 icon 相比其他方式,搜索位置更灵活,可以单独出现,也可以和其他功能组合。

APP中搜索框的样式以及区别

当搜索功能在页面中不再是高频使用功能时,仅通过搜索 icon 让用户知晓有搜索功能存在即可。由于搜索 icon 占用区域少,可与其他功能组合出现,例如 in ;也可单独出现,如猫眼,仅靠图标标红来提示用户此功能。

APP中搜索框的样式以及区别

需要注意的是在同一个 app 的不同页面中,由于对搜索功能的需求不同,有些页面会选择搜索 icon ,有些页面会选择顶部导航。例如天猫 app ,在品牌页面中,对于用户即将浏览的内容都是根据用户行为产生和运营推荐的,自然搜索功能也会弱一些,采用搜索icon 即可。天猫首页强调引导用户去搜索、购买商品,采用顶部搜索框。

04.隐藏式搜索

位于屏幕顶部的导航,以搜索框的形式。只会在用户需要的时候才出现,平时不会打乱用户的行为。微信首页的搜索功能在初始进入时是隐藏的,当用户下拉页面时,顶部搜索框才会出现,这就和使用场景密不可分。

APP中搜索框的样式以及区别

微信首页(iOS端)刚进来的时候主要以处理最近回复为主,搜索功能相对弱化,在用户浏览列表的时候,搜索框也不会悬停在顶部导航。而在第二个 tab 通讯录列表中,主要以查找联系人为主,搜索功能一开始进入就显示在列表顶部。

总结

绝大部分的 app 里带有搜索功能,搜索功能可以帮助用户快速找到所需内容,减少时间成本。搜索也是提高流量的重要入口,吸引用户注意力。

但想要搜索在页面中恰如其分的应用并不那么容易,需要引导用户行为和分析使用场景,这就依赖我们前期大量样式积累,才能输出合理的设计方式。

我们再来回顾文中提及的四种搜索框样式:

1.一级 tab :位于屏幕底部的导航,搜索作为一个独立的入口,适用于搜索场景相对重要的 app 。

2.顶部搜索:位于屏幕顶部的导航,让用户打开 app 想要搜索时能快速找到,符合用户期待,适用于当前搜索频率高的页面。

3.搜索 icon :使用 icon 作为搜索点击区域,减少导航栏占用,弱化了搜索功能,适用于当前搜索频率较低的页面。

4.隐藏式搜索:位于屏幕顶部的导航,以搜索框的形式。只会在用户需要的时候才出现,平时不会打乱用户的行为。


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






UI新手到底先该掌握哪些技能如何入门

博博

UI新手到底先该掌握哪些技能如何入门

云和数据西安中心 2018-08-02 10:21:57

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


深知想做UI这行却不知道如何开始是很多小伙伴们的困扰。虽然很多朋友都问过其他人,或者问过很多大神:“我很喜欢UI,可是我应该怎么开始?很多小伙伴对UI特别感兴趣,就是不知道怎么开始,怎么选择自己的工具,怎么选择公司等等都非常迷茫,希望这篇文章能为小伙伴们解答疑惑。

UI新手到底先该掌握哪些技能如何入门

技能选择

选择什么样的工具,该用什么软件,是大多数小伙伴纠结的一点,学习是需要成本的现在我们熟知的软件大致如下:

UI新手到底先该掌握哪些技能如何入门

熟悉的朋友从图中可以看出,Adobe系列工具仍是最主流的设计工具,下面为大家一一介绍这些技能的优缺点。

UI新手到底先该掌握哪些技能如何入门

Photoshop

优点:最主流的设计工具,处理图片强大,调色功能强大,无论是设计图标还是设计界面一定是最佳选择。无论身居什么职位的设计师,都必须具备的基本技能。运用熟练后,即使绘制3D强质感效果也不是问题

缺点:需根据尺寸设计,无法绘制矢量图形(随意放大缩小),排版功能弱。

UI新手到底先该掌握哪些技能如何入门
UI新手到底先该掌握哪些技能如何入门

Ai

优点:强大的矢量图设计工具,绘制ogo、海报等极为优秀。图标和界面功能同样优秀,而且输出为矢量图,可以根据尺寸不同放大缩小。同样不会第三方草图设计工具,还可以用A来设计交互草图。运用熟练实现3D强质感无压力。排版功能相对也较强大。

缺点:图片处理为零,滤镜效果能力较差,处理高质量界面和图标教PS和其他工具会辛苦很多,从像印刷尺寸变成像素尺寸较痛苦。

UI新手到底先该掌握哪些技能如何入门

AE

优点:强大的视频、交互动效工具,可以轻松实现界面交互动画及,和开发人员沟通成本大大降低,同时可以用视觉图来为自己意愿说话。同时可以通过学AE来做视频,加。国内最早运用并推广的是郁闷的鸡大神。

缺点:无法设计界面、图标、绘制图形,只能做交互动效和视频处理。

UI新手到底先该掌握哪些技能如何入门

Flash

优点:矢量动画的利器,制作矢量动画简单方便。通过学习高级的语言,可以设计非常绚丽的交互网站,早些年最流行的酷炫交互网站都是由 FLash嵌入执行。同时也可以制作动画片。设计卡通类图标简单快捷。

缺点:对Ui设计功能较少,界面设计相对困难,图形处理效果少。语言学起来相对高级,同样不适合设计师们。不建议UI设计师学习。

UI新手到底先该掌握哪些技能如何入门

indesign

优点:排版神器,杂志、书籍、报纸等排版快捷方便,上手简单,可以绘制简单的矢量图形

缺点:主要是平面设计师工具,不建议Ui设计师学习。若不从事大量排版工作不建议学习使用。

UI新手到底先该掌握哪些技能如何入门

Dreamweaver

优点:设计网页工具,同时编写查看代码同时设计网页,嵌入fash、管理网站后台等都方便快捷。也可以进行图形绘制。

缺点:主要是网页设计师工具,不建议UI设计师学习。而且,你真的想学代码么?

UI新手到底先该掌握哪些技能如何入门

Adobe Premiere

优点:视频剪辑工具,针对电影、短片、视频等进行编辑功能强大,早起民间流行用作恶搞软件,重要职责是电影的剪辑。

缺点:纯以视频媒介为主,不是作图工具,果断放弃。

UI新手到底先该掌握哪些技能如何入门

Adobe Firewokes

优点:网页设计工具,早期的网页设计利器、切图神器。对图形绘制和界面绘制也很优秀,网页设计三剑客之一。

缺点:如果不是老用户,不建议学习,它的功能被PS和AI逐步替代,已经淡出这个时代。

UI新手到底先该掌握哪些技能如何入门

Core DRAW

优点:结合了AI和ID,是矢量图设计工具,同时也有强大的排版功能。大部分地区仍然在使用这个工具,运用简单易懂,而且能导入 Adobe公司的各种软件工具。

缺点:这款工具争议较大,中小公司仍有使用,但是大互联网公司是没有的。虽然功能很多,但是多不代表精,所以,自己定的目标高一些,放弃这款软件吧

UI新手到底先该掌握哪些技能如何入门
UI新手到底先该掌握哪些技能如何入门

Sketh

优点:最近尤为火爆的设计工具,各大国内外公司都已经开始试用并融合。对于APP应用界面来说,它绝对是利器,方便快捷功能强大,没有繁多不必要的功能。扁平风格图标更是快捷便利,尤其最近的版本3,功能进一步提升。非常推荐

现在的设计师们学习,相信会成为新一代主流设计软件。

缺点:拟物风格图标界面相对不适应,而且现阶段只有苹果系统,微软系统暂时没有。除了设计APP界面,其他功能基本为零。

UI新手到底先该掌握哪些技能如何入门

手绘

优点:是的,不借助任何软件,只要你有强大的美术功底,运用各种画笔工具也可以“设计”出很多精美的图标界面,通过扫描等方式展现给用户,风格特意且新颖,工业设计师的必备能力之一。要知道,会软件的千千万。

缺点:当然在国内,只有这门手艺而走进互联网UI设计师行列的还是少数,所以还是乖乖地挑起一个工具好好学习吧。

core painter

优点:各种笔刷配合手绘板,让你笔下图标界面优美呈现,尤其对游戏UI设计师来说,是强大与PS的软件,因为他优秀的功能专门为手绘而定制。

缺点:如果并不打算好好磨练自己手绘能力的话,尽量避免学习此软件,因为PS基本上都能实现你想要的功能,不要学的太杂,专精

UI新手到底先该掌握哪些技能如何入门

3D maxS:

优点:一提到这个软件,绝对是有话题的软件。谁都没有想到,用3D做图标可以成为主流,而且不得不说的是,用3D做的图标无论质感还是光影实现起来快捷、方便、强大,也许一个小时的设计已经完全超越10个小时的PS。3DU设计师,可以说是他掀起3D做图标的风潮。

缺点:强大在于拟物化设计,界面设计较差,上手较难,毕竟二维和3D还是两个

UI新手到底先该掌握哪些技能如何入门

技能专修

介绍了这么多软件,小伙伴们也应该有所了解,为了更加清晰明确,采用大家更易懂的以满分10分为划分,高低比重为分值

10分:熟练、掌握、专精

9-6分:掌握、熟练

5-3分:掌握

2-0分:了解即可

UI新手到底先该掌握哪些技能如何入门
UI新手到底先该掌握哪些技能如何入门

所以,小伙伴们,无论是怎么样先从Photoshop学起吧,虽然其他软件都有强大之处,,但是需要团队配合,在未来我们掌握了这些技能,那么再可以研究其他工具,提升自己。


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




如何开始学UI?入学UI的五大问题!

博博

如何开始学UI?入学UI的五大问题!

UI设计七紧 2018-06-26 16:43:55

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


1.我想学UI,请问看什么书啊?

2.我想学UI,请问哪个培训机构比较好?

3.我想学UI,请问如何入手?

4.我不是设计专业,但是我还是想学UI,请问如何系统学习?

5.我不管,我就是要学UI,请您给点儿建议。

.........

上述的问题,我一天能收到好几个,那么今天我就详细的写一写如何开始学UI吧。

如果你连这篇文章都看不完,你还告诉我你有恒心学好UI?

关于作者本人,大学时曾经兼职某培训机构PS讲师,对设计培训行业了解一二。自己是非科班出身纯自学无培训经历工作三年的每个月还完信用卡就感觉身体被掏空的普通UI设计师。

好了言归正传:

一、你为什么想要学UI?

用户界面(User Interface)是指一切可供用户和系统进行交互操作的介质的综合。

在当下这个时间点,一提到UI,大家其实会不由自主的指向移动端app设计而忽略UI的其他形式。网页、手机 app、pad app、车载系统,智能冰箱的控制窗口、智能电视的操作系统界面等等等等,其实都是UI的范畴。

各位现在励志想学UI的同学们,不妨扪心自问一下,你为什么想学UI?

我综合分析了几个周围朋友和私信我的同学的真实案例,答案无非只有以下几种:

1.UI设计工资相对较高。

2.UI设计入门相对容易。

3.自我感觉UI设计还挺有趣的。

郭德纲有个段子说得好,一个人卖盆,结果卖了两个月发现不挣钱,然后就去卖猪肉了,从此以后再也没有卖过盆,这是正常人的择优手段。但是还有一个人卖盆,结果卖了两个月发现不挣钱,于是就去卖肉了,然后用业余时间继续卖盆,那这个人是真的喜欢卖盆,他对卖盆这个事情有着天然的兴趣。

这样吧不然,为了检验你是不是真的喜欢设计,我这里先推荐诺曼的那四本《设计心理学》,这是相对来说不那么枯燥乏味的设计方面专业书了,算是一种科普性质的,什么行业看了都没错。你先去啃下来,如果中途没有打瞌睡并且能够看个大致明白并且觉得还挺有意思的,那说明你可以具备一定的自驱力,可以去开始着手学UI。

自驱力是最重要的一点,为什么今年有一些三年工作经验以上的UI一下子就被淘汰了找不到工作?因为一个人的价值是和你的不可替代性成正比的,自驱力来源于兴趣,本身不是喜欢这个行业的设计不求上进两三年拿不出与工作经验相衬的作品,势必要被淘汰。

二、UI设计师挣得多么?

每个行业都有挣得很多的顶尖人才,还是那句话,一个人的价值是和你的不可替代性成正比的,但是普遍来说中国的互联网行业薪资构成一定是产品≈技术>设计的,但是相对来说技术的行业门槛比较高,产品暂时抛开不论(手动微笑),而且在绝大多数非技术岗位互联网从业者的心目中设计这件事情是一个纯主观的事情,很多人甚至到今天还在说哎呀XXX今天更新好丑,他们公司的UI简直就是一坨屎这样的言论背景下,在前几年UI培训确实是如火如荼的进行。

UI设计师到底挣得多么?答案是:“收入可观”

从腾讯CDC《2016用户体验行业调查报告》中能够可以看出:

如何开始学UI?入学UI的五大问题!

调查结果显示:

用户体验行业从业者税前薪资年收入主要在 5 ~ 15 万;

管理类薪资较高,集中在 10 ~ 25 万;

视觉设计、 交互设计、品牌设计的薪资相对较低,偏向 5-10 万;

用户研究,产品类的薪资居中,倾向于 10-15w。 

从图上可以得知,如果是一个下定决心打算进入UI设计/视觉设计行业的萌新,那请你做好一开始“不到5W一年”和“不到10W一年”的准备。

结论:从数据上来说,培训出来月薪过万这样的例子我承认一定有,但是不多。更多的设计科班出身或者培训行业出身的设计在工作的第一年,工资都不太喜人(一线大城市可能会相对稍微欢喜一些)。

结合上面那个卖盆的段子,不到五万一年,你还想学UI么?(手动微笑+1)

三、学UI,应该选择培训机构么?

我的答案是分两头看,如果你是设计科班出身,并且对互联网UI/视觉设计师的职责有清晰的认知,了解工作流程,那么我的回答是不需要。但如果你是一个学法律的学中文的,对互联网公司和设计本身一窍不通的想学UI有志好青年,并且周围几乎没有互联网从业者圈子,那么,我的回答是需要的。

因为你要明白,市面上绝大多数培训机构能够给予你的是:

0.了解互联网大环境和app产品UI/视觉设计师的作用及工作流程。

1.一到多项工具的使用。(一般是Photoshop、AI、Sketch、Axure等等)

2.一到多次虚拟互联网项目经验。(包括从但不限定为从无到有、模拟迭代等)

至于推荐就业之类的,你爱信信,反正我不信。

我大二的时候因为PS技术比较好,所以兼职在某培训机构教PS,先后带过三个班,一个是摄影后期那个就不说了,其余两个都是UI的基础班,只不过一个侧重移动端app,一个侧重网页设计而已(12年那时候还没sketch)。

我可以拍着胸脯保证我教授的PS知识能够完成市面上所有的app和网页设计,这个按钮是怎么实现的,渐变怎么拉,字行距间距怎么设置,布尔运算怎么操作这些你从我这里一学就会,包学包会,然而这并没有什么卵用。这就好比一个你去学习素描,老师告诉你铅笔分为几种,每一种黑度不一样,你手要怎么拿铅笔,排线要怎么练,面是由线构成的,好了,你画吧。你能画的出来才怪。

很多想入行UI的小白最大的误区在于:我只要PS/sketch用得好,我就是个设计师了。

拜托你们醒醒好吧,你要明白PS也好sketch只是一款工具而已,它本质上和屠夫手里的刀,猎人手里的弓箭,雕塑家手里的钉锤没有任何区别。我现在把罗丹的工具从博物馆偷出来给你再给你一块质地几乎一样的石头,你敲一个思想者出来我看看?

四、Sketch和PS必须熟练掌握一款

好了书归正传,虽然学会软件并不等于可以胜任UI设计的工作,但是学会一门软件是很基础的入门级的事情,市面上能用于UI设计的工具现在几乎淘汰到了只剩三款,PS/Ai/sketch,而其中Ai由于是基于对象的矢量绘制软件,在位图设计当中有着天然的劣势(当然也有很多人用,但是我个人是直接排除的,才不会告诉你我还见过firework流的UI呢)。

在Ps和sketch中,目前在UI设计工作中,我基本上完全会用sketch,Sketch实现不了的功能,偶尔会用PS辅助一下,Sketch实现不了什么功能呢,比如你现在想做一个弥散阴影(自行百度),sketch就实现不了,十分想吐槽sketch没有类似于PS图层“图层样式”的功能,不然基本上做UI就可以完全不打开PS了。

目前我的观点是Sketch可以作为UI设计主打软件,适合新手使用,入门简单,学习成本极低,插件丰富,功能足够强大,唯一美中不足就是只支持苹果系统,但是我认为如果你是决心入行的话,rmbp还是买一个吧。Sketch/PS的教程视频网上一搜一大把,这里我就不赘述了。学习一款软件,最重要的是持之以恒,一两个月绝对可以掌握,这部分外功没啥好说的。

五、UI设计师的自我提升

好,从下文开始,我假设你已经是一个经过三个月努力,熟练掌握设计工具的萌新了。那这时候你该如何修炼自己的内功呢?

UI设计师的自我提升step 1:看(Look)

“看是一个浸淫的过程,也是提高审美和观察力的过程。”我从大二开始,给自己的任务是每天睡前看一小时:

  • https://www.ui.cn/ - UI中国
  • https://www.zcool.com.cn/ - 站酷
  • https://www.pinterest.com/ - Pinterest是我这几年素材收集用得最多的一个网站

那,到底看什么呢?

作为新手来说,第一步应该关心的是:这张设计稿有没有什么技术难点是我实现不了的。

我举个例子:(以下举例图片全部来自Pinterest - my board)

如何开始学UI?入学UI的五大问题!

比如晚上睡觉的时候,无聊翻Pinterest,然后看到这张图,作为新手来说,心路历程大概应该是类似这样的:

如何开始学UI?入学UI的五大问题!

知道一张设计稿里面每个元素是怎么绘制的,这是最初级的阶段。

其次看什么呢?尝试每看一张图的时候不要像刷朋友圈一样一晃而过,看的时候强行试着分析一下这张图的优点和缺点,同样举个例子:

如何开始学UI?入学UI的五大问题!

比如这个UI界面,作为一个新手,自己尝试分析一下这个页面的优缺点,比如:

优点:

1.这个页面给人一种性冷淡风干净清爽的感觉(然后你去baidu/google"性冷淡风",得到关键词“Normcore”,然后再继续dig deep,去详细了解这种设计风格。)

2.信息展现清楚,交互按钮Add和Message也是清晰直接

3.图一上面,用了一些渐变小纹理特别赞。

4.这种斜着切一刀带来的设计形式感特别赞,要学~~~

缺点:

1.这个界面偏概念,隐藏了navigation bar和Status bar,在一般工作中这样设计需要谨慎

2.虽然美观,页面展现信息较少,在工作中一定是不适用了。比如图一,一屏信息只展现了人名+人简介+Add和Message按钮以及下面两个人物列表。图二更屌,只显示了这个人的这么一点信息,换句话说,这个页面所有呈现的信息约等于微博四分之一页面信息,除非这个app功能特别少,只强调美感,不然应该不太会这么设计:

如何开始学UI?入学UI的五大问题!

分析是UI设计的基本功,不管是浏览设计网站看设计作品还是日常使用app和电脑浏览网站,都可以抱着这种分析设计的心态。如果你能根据你的设计分析写一个学习笔记什么的,相信我你会进步得更快。

再然后看什么?尝试找出这张图第一时间吸引你眼球的元素。

如上图的例子,那种斜着切一刀的感觉是不是显得特别利落?

比如这两张图:

如何开始学UI?入学UI的五大问题!

同样是方形构图元素,第一张吸引我的是一种“品质感”,第二张吸引我的是颜色。

包括第一张MARKET IT下面一条线的形式感设计和第二张最下面鞋上的VANS AQUA SHOES的形式感设计,都是可以学习和借鉴的。

总之,“看”是设计师每天都应该做的事情,长期坚持多看多分析有助于设计感的培养,在熟练掌握软件的前提下,眼高手就不会低。

UI设计师的自我提升step 2:临摹(Copy)

提到copy,大家可能会想到那句俗话说 Good designers copy. Great designers steal.

有的人说临摹不就是抄么?咳咳,咱们读书人的事情能叫抄么?叫借鉴。。

其实不太对,大家想这样一句话,我说让你抄同桌的作业和临摹同桌的作业,区别在哪儿?

临摹的意思是,尽自己所能,做到每一个像素分毫不差。

我给大家举个例子,左面这张我自己作品里的一张图,之前还没有Sketch的时候用PS做的,后来学习Sketch的时候我又用Sketch临摹了一遍,放在右边:

如何开始学UI?入学UI的五大问题!

其实仔细看是能看出区别的啦,但是临摹,起码要做到这种效果,每当你去临摹一张设计稿的时候,可能要花大量时间,但是收获巨大。

因为首先临摹第一步是需要测量,测量和临摹一个UI作品给我的帮助太大了,强烈建议每一位新手好好的,临摹一两款市面上很火的app,不管是什么,只要是你觉得界面还可以用着够方便,微信微博也好,美团网易云音乐也好什么都好,找一款app尝试测量和临摹,你会看到很多更深层次很有趣的东西。甚至可以了解这个产品UI当时的心路历程,总之临摹这件事你试试就知道了这方面我就不展开了,以后有机会另起一文。

总之,不断临摹优秀作品是我认为UI设计新手成长最捷径的办法(我认为没有之一),因为很多时候光看是不够的,有些时候你自认为很好实现的效果,到你手上实际去做的时候会发现根本就不是这样的,不信的话,下面这九个图标,你们可以选一两个去临摹一下试试:

如何开始学UI?入学UI的五大问题!

临摹,是将“别人的”转化为“自己的”最优秀的办法。第一步先做到尽量一模一样,然后再去求变和思辨,往这个方向努力一段时间,回过头,你会发现自己的进步,除此之外,你还会发现,咦这些个app这种设计形式我都曾经见过。。。

UI设计师的自我修养step 3: 尝试分析 (Attempt to analysis)

尝试分析一款app,基本上是从app的信息架构入手的,这是一个UI偏UE和产品的工作,但是对UI设计师来说挺重要的,app的信息架构怎么做,说白了就是花时间把整个app点一遍,然后分析app的信息层级,一般我用Xmaind7去做信息架构图,比如我是一个dota2玩家,所以我曾经做过max+的产品架构,放在下面给大家看:

如何开始学UI?入学UI的五大问题!

做信息架构的时候不光光是点完记录下来就结束了,要带着自己的想法去做,比如我图上标绿色的地方是这个app的重点功能模块,黄色的小问号是我初次做信息架构觉得信息展现有问题的地方。

做信息架构能给我们带来什么?

第一,能够让UI设计师迅速了解一款产品。如果说你刚入职一个新公司,那不妨入职第一天先从你公司信息架构入手~

第二,能够让UI设计师在横向对比两款或者多款产品交互的时候提供必要依据。这点不展开了,推荐大家上手做网易云音乐和QQ音乐的信息架构,做了你就知道我在说什么。

第三:方便UI设计师了解行业产品形态。比如你之前是一个旅行类app的UI设计师,现在你即将跳槽去一个互联网金融p2p的创业型新公司,如何入手设计一款新的p2p类app呢?你只需要选择市面上最火的两三款p2p类app做一下信息架构,你就会明白一个大致的方向,因为行业里大家都是这么做的,你就把好的地方继承,不好的地方创新就是了。(心里话:说起来容易,做起来可完全不是这么一回事啊喂!Orz...)

第四:方便设计师做redesign。很多UI设计师都喜欢做作品集,那自己没这么多线上作品怎么办?于是就做redesign,站酷上UI中国上到处都是各种产品的redesign,有一些做得确实很好,在分析一款产品的信息架构之后其实是很容易找出产品一些易用性问题的,那针对这样的易用性问题进行优化的redesign思维一定是有益的。

我在这里提供第二种制作信息架构的方法,这种方法更偏交互,我把他称之为点击类信息架构:

如何开始学UI?入学UI的五大问题!

具体这是一张特别大的图,我就不给大家展示全了,这里我着重想说的是这是另一种偏交互类的信息架构方法,图上那个S0,S1,S2是我自己编的词,S1代表的是一次点击就可以达到的页面,S2表示的是两次点击可以达到的页面,S3表示三次点击可以达到的页面,然后我把S1,S2,S3对齐排列,这样就可以知道这个app的每个功能深度(深度的意思是指你需要通过几次点击才能达到,点击次数越多当然就越深)。

比如分析的时候看到一个特别重要的功能被埋藏得比较深,那就说明这个app是有问题的,下次改版时候从UI方面着手看看能不能把他提前之类的。这当然是产品做的工作,但是UI设计师掌握这个没啥不好。

UI设计师的自我修养step 4:回顾与总结(Review and summary)

看完一本书,听完一个故事,一个项目结束之后,一个版本迭代完成之后,一份工作离职之后,都是需要总结的。总结开发中出现的问题。比如开发和设计稿不一致,是不是设计这边造成的,如果是,那我是怎么造成的,如果不是,那我有没有挽回的余地。总结设计中出现的问题,这些地方是不是还有优化的空间。总结沟通中出现的问题,是不是不该骂产品骂的这么狠。(我承认,我经常和产品撕得天昏地暗2333333 Orz...)

总之,总结是特别重要的一点,尤其是看完一本书之后的总结和踩到坑之后的总结,多和开发成为朋友,他们会教会你很多。(不然我特么作为一个设计怎么知道滑动切换瞬间navigationbar不能变色。。。)

好了感谢大家看到这里,再见~

希望大家一起进步~

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


JavaScript之作用域,作用域链和预解析

seo达人

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

变量包括:全局变量,局部变量

在JAvaScript中,函数中定义的变量是局部变量

作用域:就是变量的使用范围,

分为:局部作用域和全局作用域

js中没有块级作用域---一对括号中定义的变量,这个变量可以在大括号外面使用

作用域链:变量的使用,从里向外,层层的搜索,搜索到了就可以直接使用了


    
  1. var num=10; //作用域链 级别:0
  2. var num2=20;
  3. var str = "abc"
  4. function f1() {
  5. var num2=20;
  6. function f2() {
  7. var num3=30;
  8. console.log(num);
  9. }
  10. f2();
  11. }
  12. f1();

 层层搜索,搜索到0级作用域的时候,如果还是没有找到这个变量,结果就是报错

预解析:就是在浏览器解析代码之前,把变量的声明和函数的声明提前(提升)到该作用域的最上面

(1)变量的提升

下面这种情况,变量的声明被提前了,但是num的值并没有提前,结果为undefined


    
  1. //变量的提升
  2. console.log(num);
  3. var num=100;
  4. //提升之后为:
  5. var num;//变量的声明提前
  6. console.log(num);
  7. var num=100;

 (2)

函数声明被提前,代码仍然可以执行


    
  1. //函数的声明被提前了
  2. f1();
  3. function f1() {
  4. console.log("这个函数,执行了");
  5. }

但是对于下面这种情况,代码报错


    
  1. f2();
  2. var f2=function () {
  3. console.log("小杨好帅哦");
  4. }
  5. //声明提前后:
  6. var f2;//为一个变量,undefind
  7. f2();//undefind加括号是不被认可的,所以报错
  8. var f2=function () {
  9. console.log("小杨好帅哦");
  10. }

 要想不报错,代码可以改为:


    
  1. var f2;
  2. f2=function () {
  3. console.log("小杨好帅哦");
  4. };
  5. f2();

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


这篇字体设计教程,可能让你少赔几万

涛涛

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

没有字库版权?设计字体没参考?这篇教程精细讲解,教你如何在字体设计道路上通关。

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

 

浅谈UI设计师

蓝蓝设计的小编

UI设计师遇到的最大困难就是创新。设计界面时,满足功能很容易,要想在满足功能的同事,界面出新很难。

在这个火热的8月,正在流行这3种网页设计趋势

涛涛

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

设计趋势总会在你迷茫的时候,给你一点灵光。在合适的时候,恰到好处地「跟风」,借助流行的趋势帮你作出更合时宜的好设计。炎热的8月即将到来,我们观察到三个设计的趋势,当下正在流行。

1. 以白色和浅色为主的配色方案

虽然以白色和浅色为主的配色方案似乎哪里都有,但是在最近,这种趋势体现的非常的明显。

色彩的运用一直都是诸多设计趋势当中,最为醒目的组成部分。这种以白色和浅色为主的色彩美学,似乎在和之前所流行的高饱和度霓虹色的流行做对抗,柔和的灰色,相对清冷的色调,甚至是显得没有足够温度的粉色,这些色彩都在力图淡化之前配色方案中浓稠的情感和激荡的氛围。

Verho

以白色和浅色为主的配色方案,相对而言是没有那么醒目的,设计师在采用这种配色方案的时候,常常会结合其他的元素,来丰富整个设计的视觉感,这样就避免了出现「过于普通」的视觉感受。这种配色设计还包括了使用片拍的图片素材,就像 Verho 这个网站。

Omega Yeast

Alexandra Elise

不过图片和色块并不是唯一的实现这种配色的方案,采用视频或者插画元素同样可以做到,比如 Omega Yeast 和 Alexandra Elise 这两个网站,它们同样足够吸引人。

这一设计趋势可以搭配风格相对清爽、情绪比较清浅的网站主题,在炎热的夏季显得尤为有感觉。页面中的文本内容只需要采用相对较深色彩的字体,即可确保良好的可读性。

在按钮和为数不多最为重要的元素上,可以采用明亮的色彩,以示强调,整体风格则可以保持极简。

如果你喜欢极简主义的设计,并且打算运用这一趋势,这篇文章别错过了:

2. 数据可视化

数据可视化将数据的直观性提到了一个全新的层次,它使得跨行业的数据展示和信息呈现变得更加有价值,也更加可靠,而大规模的可视化的数据呈现并不是奇怪的事情。

不过也正是因为数据可视化让数据变得更加亲民,设计师开始更多地将图表和数据加入到日常的设计当中来,结合交互式动画,让数据在整个网页设计当中,开始发挥更多的作用。借助可视化的设计,数据信息更轻松地为用户所理解,整体设计也开始显得更加富有吸引力。

而这种设计趋势需要设计师花费更多的精力来处理数据,尽量多借助现成的数据可视化的工具来进行设计。

在网页设计当中,将数据以可视化的方式嵌入进去有很多不同的方式,而这一趋势最吸引人的地方也是交互式的动态信息展现。

Tree Tree Tree

Tree Tree Tree 这个网站就很好的利用了数据可视化来展示天气,当你输入你感兴趣的地方的时候,它会使用可视化的树木来呈现当地风力大小。此外,你还能和底部的交互式的地图进行互动。

Tomorrow’s World

Tomorrow’s World 这个网站则始于一项调研,而网站最终会将一系列的调查使用可视化的方式呈现出来,帮助用户了解周围的世界。

Qravity

Qravity 在网站中加入了多个数据输入点,用户可以通过滚动交互来调整时间轴,信息的呈现也会随之发生改变(比如日期和事件),这比起简单的列表要好懂得多。

3. 多边形2.0

多边形元素从2017年开始成为设计师们的心头好,作为一种持续流行的、泛用型的设计趋势,一直流行到现在。有意思的是,多边形元素也不再维持以往常见的样子,开始在外观和视觉上发生改变。现如今的多边形不再是以往小巧玲珑、成群结队的样子,设计师开始有意识地挑选一些多边形,赋予它们超大的外观造型,而不再是简单的点缀和堆砌。

这些超大的多边形元素可以在不同的设计风格之下良好地运作,结合不同的样式和色彩,发挥作用。它们可以作为整个设计模式中的一员,作为装饰元素也可以用来作为强调特定内容的容器(比如图片和文本)。

多边形元素的有点在于,它们造型多变,可以区别于常见的原型和矩形,更容易吸引用户的注意力。这种不同的使用方式,我们姑且称之为 多边形 2.0。

The Alan Turing Institute

多边形的特征、角度可以随着你的设计需求来灵活选择,比如 The Alan Turing Institute 这个网站会在右侧露出三角形的一部分,Evoluted 这个网站则将简单的线条和多边形搭配在一起,互相叠加营造出聚合的感觉,而 Iqor 这个网站则更加倾向于使用多边形来承载内容。

Evoluted

iqor

多边形和不同的色彩搭配,所带来的视觉体验和强调效果都是非常突出的。不过要将内容和多边形结合起来,设计师还是得花点心思。

更多多边形元素的玩法看这里:

结语

对于设计趋势而言,它是存在时效性的,它之所以在特定的阶段流行有诸多因素的影响。当你在设计的时候没有想法的时候,设计趋势能够给你的不仅仅是当下设计方向上的选取,也为你提供了一个可供参考的选择。

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

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档