首页

重复与突变在产品设计中的应用

资深UI设计者

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

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。

一、设计中的重复是什么?

在平面设计中,重复构成是常用的一种构成方法,通过重复可以使画面达到和谐、统一的视觉效果,并能加强给人的印象,也可以达到一种有规律的节奏感和形式美感。

排版的四大原则:对比、对齐、亲密性、重复,重复在排版中也占据了一席之地,可见它在设计中分量是不可小觑的。

格式塔原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同运动,格式塔原理中的对称性就是重复的一种表现方式;格式塔原理中的相似性算是重复中自带的一种突变。

1. 重复

重复是设计中最基本的形式。在同一设计中,相同的形象出现过两次或两次以上就形成了重复。

在产品设计中重复的元素有大小、形状、配色、间距、组件、圆角值;在交互层面重复的元素有位移(方向)、旋转、缩放、不透明度、相同属性交互要一致。

在产品设计的前期设计师需要输出界面设计,为了方便下游前端工程师更好的规范和适配,也要保证产品后期上线产品视觉稿的高度还原,这就要求设计师输出一整套产品的视觉和交互规范。

重复配色

在 app store 的页面中使用了相同的颜色进行提醒,方便用户快速查找和点击,整体的蓝色又给人理性的感觉,看到付费app 的好评数可以看出是因为产品好才推荐你进行理性消费。

重复大小

INS 主页第一排头像相同大小进行重复排列,与内容的人物头像有大小对比之分;INS 搜索页采用了九宫格布局,为了重复中有变化它把右边的四个方格合并成一个内容展示区域,推荐好的热门视频。

重复间距

Airbnb 界面中的间距非常规范,首页大体采用了谷歌里面的8px 原则,每个间距之间的规范很多1:2的比例关系。好的比例规范会给界面带来简洁大气的感觉。

重复组件

(如图标注)INS 界面中用了统一组件,相同的圆角和高度规范又给画面增加了统一性和连贯性。

2. 突变

在相同的形象重复出现时,尝试去改变某一形象的形状、颜色、大小、不透明度等来丰富画面时我们称之为突变。

格式塔原理中的相似性也是重复中突变的一种形式。

在产品设计中我们运用的突变的目的很简单就是为了让其更加突出,多用于区分当前状态、选中状态和默认状态。

banner轮播

banner轮播图上面的提示状态会根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。

导航栏分类

导航栏分类上面的提示状态也是根据当前状态和默认状态进行区分,把当前状态进行变化从而进行凸显出来。

按钮

在登录注册页面中,我们会通过大的色块凸显登录按钮,引导用户快速登录进入到 app 里面。也减少了用户的思考过程,符合大脑的惰性。

但是在很多 windows系统中,卸载软件时会跟你玩文字游戏,会用非、否、不是等诱导你作出错误的判断。

feed流

feed流是产品中持续更新并呈现给用户内容的信息流。feed流在产品展现形式有列表、瀑布流、卡片形式。

站酷首页 feed流里面会把内容分为作品和文章,之前版本中的作品和文章的样式是一样的,新版本中重点是推作品,当文章出现时通过改变文章的排版进行区分,重复里面又带有变化。

3. 节奏感

多少元素排列可以形成节奏感,一般来说是3个或3个以上,两个你不能说是节奏感只能说它是重复。当3个或3个以上整齐的排列就会形成一种节奏感。

左右滑动

(如图来自uistar)界面中三个书籍整齐的排列在一起,可以通过左右滑动来获取更多的书籍。在使用左右滑动效果时,应考虑元素的数量,尽量不要超过10个以上。

列表页

(如图来自uistar)列表页面整齐的排列在一起有一定的节奏感,通过改变 icon 的配色来丰富画面。

4. 韵律

元素在排列的过程中有形状、颜色、大小、不透明度等有规律的变化就形成了一种韵律感。在动效上主要还是通过位移、放大缩小、旋转、不透明等变化来制作界面动画。

最美有物

最美有物app 的画报界面中,通过改变每个界面的大小比例有序的排列在一起,通过上下滑动可以快速浏览标题,进行查找翻阅,整个过程很流畅,整个界面有流动性和韵律感。

图表

图表在设计的时候通过不同颜色来区分不同的时间段,线条错落有致的排列增加了界面的韵律感。

配色

△ 来自Prakhar Neel Sharma和crisssamson

这两个作品都是通过色彩按照红橙黄绿青蓝紫规律运用到界面中的背景和列表中,增加了画面的丰富感和韵律感。

重复在动效中如何运用才会有韵律感?

界面动效中主要分成当前状态动效变化和转场动效变化,界面中的元素a1对b1、a2对b2、a3对b3信息对等,能帮助界面做出很有韵律感的动效。

二、总结

重复可以使画面秩序化、整齐化,形成和谐、富有节奏感的视觉效果,更加有利于人们加强对画面的记忆。

重复、突变、节奏感、韵律几种不同的方式都是存在于产品当中的,几种不同的美感可以同时存在的,只不过它适应不同人群的审美能力,审美能力高一点的更喜欢一些变化,审美能力相对基础更喜欢简单的重复。

所以画面中不断出现同样的元素这叫重复,而在很多重复里面突然出现一个变化这叫突变,相同元素整齐的排列在一起这叫节奏感,而这些元素在排列的过程中有形状、颜色、大小、不透明度等变化就形成了一种韵律感。

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

HTML-图片标签img

seo达人

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

图片标签

图片标签<img src=路径属性 alt:加载失败后显示的文本  width:指定图片宽度  height:指定图片高度>  单位: px

路径属性

绝对路径
        E:\ruanjian\软件\环境\images
相对路径:相对于主文件位置的路径
        引用文件方式:

        同级:直接写文件名.后缀名
        上级:../文件名.后缀名   ../返回上一级文件夹
        下级:文件夹/文件名.后缀名


    
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <h1>这是一个图片</h1>
  9. <!-- 图片标签<img src=路径属性 alt:加载失败后显示的文本 width:指定图片宽度 height:指定图片高度 单位:px>
  10. 路径属性:
  11. 绝对路径
  12. E:\ruanjian\软件\环境\images
  13. 相对路径:相对于主文件位置的路径
  14. 同级:直接写文件名.后缀名
  15. 上级:../文件名.后缀名 ../返回上一级文件夹
  16. 下级:文件夹/文件名.后缀名
  17. -->
  18. <img src="../img/ad.jpg" alt="加载中" width="1000px" height="500px">
  19. <img src="../img/1.jpg" alt="加载中"><br><br><br><br><br><br><br><br><br><br><br>
  20. <img src="../footer.jpg" ><br>
  21. </body>
  22. </html>

<br>标签:换行   <img>标签为内联标签所以不换行,所以添加<br>标签换行。

页面是这样的:

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


2018年Behance 上最值得关注的20个设计趋势...

博博

2018年Behance 上最值得关注的20个设计趋势...


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


对于2018年的设计趋势,众说纷纭。作为大型设计社区的behance终于按耐不住,多名设计师预测了2018年20大设计趋势,下面就和兴元君一起看看到底是哪些吧!

1 未来感

无论何时,我们都对未来充满了幻想与期待。更先进的显示技术、更的出行方式,那些若梦幻离的景象总是令人兴奋,未来感的塑造总会唤起人们心中对科技的无尽渴望。

2018年Behance 上最值得关注的20个设计趋势...

2 简约舒适

少即是多,这是亘古不变的真理。简约意味着简洁,以简约主义的白色为主,优化功能,强调空间感。

2018年Behance 上最值得关注的20个设计趋势...

3 深度感

为传统的平面元素增添厚度,是 2018 年的设计大势。一点阴影,赋予了元素另一个维度,为交互体验打开了一扇窗。空间造就了深度,深度成就了空间。

2018年Behance 上最值得关注的20个设计趋势...

4 响应式图标

在未来,越来越多的面向移动体验,而日渐修长的屏幕让纵横之别不容忽视。无论哪种情况,图标都必须适应新的环境。因此,响应式图标设计对设计师而言至关重要。

2018年Behance 上最值得关注的20个设计趋势...

5 插画设计

任时光奔腾如梭,但历史总是惊人相似。太长时间的同质化,让突出个性的呼声愈喊愈震。这些年尚未发力的插画,在今年一定会得到大家的关注。

2018年Behance 上最值得关注的20个设计趋势...

6 动效设计

雨木林风,荷伴涟漪。我们无时无刻都在被运动吸引,技术的不断革新,为动效的使用铺平了道路,越来越多的产品也随之使用动效。大势所趋,永不停息!

7 微交互

上下拨动,左右平移;点按有悦,长停则变。 优化体验,塑造品牌,微交互无处不在

2018年Behance 上最值得关注的20个设计趋势...

08 演示动效

这种动效只供展示,引导用户使用。特别是在启动页、空状态,演示动效能极大的激发用户使用兴趣,帮助用户完成特定操作。

2018年Behance 上最值得关注的20个设计趋势...

9 明亮渐变

扁平化大行其道多年,多少让人有些审美疲劳,渐变得以重新回归。不同以往的是,鲜艳、明亮、酷炫,是当下渐变的特点。

2018年Behance 上最值得关注的20个设计趋势...

10 三维效果

3D 始终是我们不容忽视的力量,蛰伏多年,一直在寻找爆发的良机。且在这多年的隐忍中,聚集了越来越多的力量,让本就可怕至极的力量变的愈加摧枯拉朽。

2018 年,它不一定会发力,可一旦契机出现,就会势不可挡。

11 金属质感

现实和虚拟的界限愈加模糊,较为容易 “欺骗” 视觉的金属质感重新博得设计师关注。

2018年Behance 上最值得关注的20个设计趋势...

12 上个时代的彩色图案

也许是怀旧情怀的需要,也许是那年的少年已肩扛重担。那些年在玩具和衣着上图案重新焕发出新的活力。

2018年Behance 上最值得关注的20个设计趋势...

13 傻大粗黑

这一点毋庸置疑,在较长的一段时间里它都不会被取代。更令人欣慰的是,无衬线字体也开始展露头脚,让字体的选择进入了一个新世界。

2018年Behance 上最值得关注的20个设计趋势...

14 字体设计

在一切归于冷静之后,那些精雕细琢,能彰显差异性的东西重回王者之地,字体设计也得以荣膺桂冠。

2018年Behance 上最值得关注的20个设计趋势...

15 粒子背景

沉浸体验,是所有设计师的不懈追求。不喧宾夺主突出主体,不太阿倒持取悦用户,正是粒子背景的魅力所在。

16 拆分页面

一分为二,各司其职;化繁为简,相辅相成。划分页面空间,重新定义区域,图像与文字分离,构建信息结构。信息越是爆炸,越需要化繁为简

2018年Behance 上最值得关注的20个设计趋势...

17 艳,更艳

从性冷淡到大胆用色,恍然间抛开了对过度的恐惧。越是过度,愈是讨喜,任何大胆的设计都会被称赞和鼓励。

2018年Behance 上最值得关注的20个设计趋势...

18 单色图标

色彩纷呈,渐幻若璃;界面之中,唯我独素。色彩艳丽的今天,唯有图标坚守其道。不跟风任吹,不随波逐流,这种坚持换来了舒适与愉悦

2018年Behance 上最值得关注的20个设计趋势...

19 混合图标

线与面合,白与艳合;合则一派,不合则灭。在不同风格争相出现的今天,也是一种不错的尝试。

2018年Behance 上最值得关注的20个设计趋势...

20 新造型主义

作为新造型主义的奠基人,皮特·蒙德里安曾这样说过:对自由和平衡(和谐)的渴望是人类天性。通过理想的绘画形式将宇宙真理物质化、几何化

简化,井然有序,色面完美。率真的纯粹原色相互对立与平衡,凭借两种否定,黑与白分割构图。

2018年Behance 上最值得关注的20个设计趋势...

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


美团点评 UED 总监:突破设计边界,互联网变革幸存之道

资深UI设计者


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

美团点评 UED 总监崔颖韧(下文简称崔校长)认为:曾经设计师仅靠一技之长就能在行业内生存,但互联网行业瞬息万变,如今,人工智能的设计水平都可以达到设计助理的级别。在互联网变革下,设计师只有不设限,扩展自己的价值空间,才能在这场持久战中成为最后的赢家。

一、设计师的现状

1. 设计师已经开始被人工智能取代

2018年紧跟2017,是人工智能重点发力的一年,关于「人工智能会完全取代设计师」的话语层出不穷,很多从业者倍感危机。

崔校长表示,AI 时代是真的来了,设计师也开始被人工智能所取代。

现在,很多负责垂直业务的运营设计师已经参与到智能体系建设中,建设素材库、设定配色、排版规则和标准,帮助训练 AI 等。

甚至美团点评也开发了可以做 Banner 的智能设计系统,不光可以做 Banner,今年内还可以自动生成活动主页和简单 H5 页面,而且是多品类覆盖,包括餐饮、休娱、丽人等。

相应的,设计部门原先计划申请的运营设计师人数就减少,甚至不新增了。

尽管 AI 的强势冲击很吓人,但是设计师工作中,例如设计师对目标受众的理解,现阶段是没有机器可以替代的,顶尖设计师的专业技能在冲击之下,反而会更加突出、显眼。

2. 国内设计师普遍话语权不高

在国外,很多优秀的公司都是设计驱动,而国内设计师普遍话语权不高。

针对这个现象,崔校长认为,实际上国外很多「设计驱动」的公司,本质上是 CEO 驱动,有一个重视用户体验的 CEO,那么全公司做事都会重视用户体验。实质上是 CEO 在驱动,设计仅仅是执行。

而在国内,行业环境没有那么舒服,特别是偏传统的公司,高管层对用户体验的价值认知非常弱,所以才会有设计师话语权低的问题。

如果要解决这个「历史难题」:

  • 首先,设计团队本身要对用户体验有清晰正确的认识,不能唯设计、唯用户体验论;
  • 然后,通过专业手段,既保障了用户体验,又良好的解决了商业问题,

那么一定是可以在业务团队那边赢得认可的。

有了实际案例证明价值,下一步就可以做一些跨团队的用户体验概念普及,去提供相关的认知度。

美团点评是一个高管层很重视用户体验的公司。在美团点评,用户体验部的价值是可以得到足够认可的。

在这样的情况下,大家依然会努力拓展自己的价值空间,会突破边界,比如说交互设计师会做一些用户研究和产品分析相关的事情。

项目产品 Leader 只需提供一个产品目标,而在「战略层、范围层、结构层、框架层、表现层」五个层面的分析研究和输出工作,交互设计师都可以完成,产出一个完整的项目提案报告。

由此可见,设计工作者只要有实际案例证明价值,得到 Leader 的认可,加上持之以恒的拓展自身价值,提高自身话语权不是问题。

3. 对产品设计的认识还停留在图形界面

很多刚工作的设计师摆脱不了专业的束缚,认为设计只是图形的搭建,没有更多思考。

对此,工作经验丰富,且阅人无数的崔校长表示,这是一个普遍现象,也是一个正常的现象。

在社会化精细分工的时代,设计师从专业入手,自然而然地,一开始认知会局限在图形界面上。随着专业级别的提升,会扩大认知范畴,看到界面之外的东西。这是基本规律,没有捷径。

古语说:

不谋全局者,不足谋一域。

设计师应该有意识去突破边界,这是正确的方向。现实中有很多人无法突破瓶颈,往往是拒绝突破边界,思维的局限导致了个人价值的局限。

4. 设计的好坏没有绝对的评判标准

大家都知道,设计是有好坏之分的,但却不一定清楚这个评判好坏的标准。

崔校长认为,设计师没有一个绝对标准来评判好坏的。

在商业团体中,一切资源投入都是为了达成商业目的,所以能帮助达成这个目的的设计就是好设计,这是一个评判标准。而具体的标准,根据团队的商业目的差异,有很大区别。

在商业团体中,用户体验是实现商业目的的一种手段,脱离商业目的,讲纯粹的用户体验就是耍流氓。

只有摆正了这个认识,在职场中就更容易获得成功。

二、设计师的突破

1. 保障用户体验是第一标准

现在,很多人都在倡导,设计规范化、组件化,这种趋势是有利有弊的。

针对这个趋势,崔校长建议,不能唯规范唯组件论。虽然规范化、组件化这类比较基本的设计增效手段,可以明显提升基层效率和基础质量,但是规范和组件只能保障底线,无法拉高设计质量的上限。

比如有的设计师会跟产品说,我们的规范如此,所以只能这么设计,这是错的,规范不是一刀切的标准,保障用户体验才是第一标准。

该用规范组件的时候就用,如果场景上不适用也不能硬用。

2. 用户体验设计,不仅仅要把界面做好看

作为用户体验设计师,要有把界面做美观的能力。

除此之外,崔校长还说:

界面好看是最表层的设计体现,真正的用户体验远不止于此。

《用户体验的要素》所描述的「战略层、范围层、结构层、框架层、表现层」五个要素,要做到都充分、专业、逻辑连贯,最终才能获得一个在线产品的良好用户体验。

在构建一个良好的用户体验时,更重要的是表现层背后的商业体系、产品目标、用户心智模型,对设计依据做充分的研究和挖掘才是根本。

3. 方法论为主导,找灵感

遭遇设计瓶颈时,找灵感也是有技巧的,有一部分设计师,凭空想灵感,这是低效的。

崔校长建议,以方法论为主导,找灵感。

崔校长说:

设计的目的是为了解决问题,应该以理性思维为主导,去定义问题,分析问题,解决问题。如果以 Idea 导向,也就是通过试错来验证有效 Idea,这跟碰运气差不多,效率非常低下。

在美团点评上海用户体验部的设计路径中,总体是以方法论来主导,仅在方案的表现层,会运用头脑风暴和素材搜集的方式帮助激发灵感、发散方案。

4. 注重自身和团队的共同成长

在学习、成长上,每个工作者都更注重自我的成长,这是必然的,设计师也不例外。

但工作究其根本,是自我成长、团队成长、产品成长的结合,优秀的团队一定都是非常注重这三方面成长的,美团点评也是如此。

崔校长说,美团点评有涵盖各个专业的互联网+大学,在设计方面设有设计学院,沉淀了很全很丰富的方法论和案例,同时公司还有复盘文化,大家会从每次的项目实践中,总结经验、获得知识。

崔校长建议,设计师应该尝试「跨界」,个人能在其中飞速成长,这是经验之谈。

校长本人是学计算机专业的,做过产品经理,最后在设计领域深耕。

这样的综合角色帮助他更宏观、更完整地去看产品体验搭建的过程;能够更好的理解上游产品角色到底关心什么,下游开发角色需要什么;能够更好的跟相关角色沟通,并让设计发挥更大的价值。

所以设计师不仅要注重外部学习环境,还要注重自身的跨界、不断拓宽边界,自身和团队共同成长,这对你职业生涯的发展产生不可估量的价值。

5. 优秀的设计团队不能没有管理者

设计不是单打独斗。

一个优秀的团队应该注意哪些问题呢 ?

对团队进步起着关键性作用的管理者应该是怎样的呢?

对此,崔校长认为,优秀的设计团队在团队建设上,要有完善的管理制度、完善的专业体系、扎实的人才梯队,在结果上要有优秀的产品案例。

作为 Leader :

  • 首先,要专业过硬、学习能力强、格局大;
  • 然后,要赋能团队,用你的决策力赋能,给团队判断正确的方向,不走错路;
  • 用专业能力赋能,指导团队提升专业高度;
  • 用协调能力赋能,让团队运作更。

刚刚成为 leader 的同学,可能会不适应与设计师完全不同的工作模式。

对此,崔校长建议,此时你最需要注意的是思维转换。思维转换首先需要明确三个角色,崔校长总结为「三位一体管理模型」,分别是教练、裁判、经理,这三者缺一不可。

  • 在项目过程中,要发挥教练角色,进行专业指导,保障设计输出质量,如果教练角色缺失,设计质量难以提高,设计师成长难。
  • 在评审和决策的时候,要发挥裁判角色,给出明确的结论,承担决策责任,如果裁判角色缺失,容易变成甩锅侠,把自己的责任丢给基层设计师,设计质量容易失控,也会导致设计师压力过大,产生流失。
  • 最后是经理角色,去思考团队建设,去选择团队需要的设计师,对设计师的绩效进行判断,识别出哪些应该重点培养,哪些应该淘汰换血。经理角色缺失会导致吃大锅饭的局面,团队能力止步不前,陷于平庸化。

6. 保持沟通

沟通,在设计师的工作内容中占了不小的比例。

跟团队同事进行合理的沟通,在一定程度上,能提高工作效率,专注设计质量,将更多的时间放在设计本身。

对此,美团点评崔校长很有发言权。

美团点评上海用户体验部现在有100多位设计师,对接的产品经理在500人以上,对接的程序员在1000人以上,而且上下游部门都是分散的。

产品部门和研发部门都是多个的,不像 UED ,只有一个部门统一管理,那么沟通方面确实有很大的难度。

崔校长表示,为了团队沟通更,美团点评内部要求 Leader 跟相关部门的 Leader 建立良好的沟通机制,保障信息通畅;然后,用设计流程规范,来要求设计师跟自己的上下游对接方充分沟通;最后,团队风格上推动设计师走出去,深入上下游讨论和协作,跟进产品讨论会,多到开发位置上确认实现的细节。

崔校长还分享了一个关于沟通的小故事:

在搬了办公区之后,产品的座位离设计师只有一个过道之隔,于是设计师开始有了一些「小烦恼」。产品经理一有问题就随时找设计师讨论,设计师的工作总被打断,却不太好意思拒绝产品。

这是一个比较有趣的现象,说明产品跟设计师之间沟通非常紧密,而且很信任设计师的专业度,能够一起有效地解决问题。

这个场景在团队内部时有发生,这个「烦恼」对设计师而言,可以说是不可避免的。

对此,崔校长建议设计师要做好时间管理,掌握好沟通的时间安排,不能影响了总体的设计效率。

总结

设计不设限,是每一个设计师都应该思考的方向。

只有自己不甘现状,勇敢突破,才能以更高的速度进步,才能在互联网高速发展的现在,甚至未来,成为最后的赢家。

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

前端性能优化之Lazyload

seo达人

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

前端性能优化之Lazyload

@(Mob前端-冬晨)[JavaScript|技术分享|懒加载]


Lazyload 简介

前端工作中,界面和效果正在变得越来越狂拽炫酷,与此同时性能也是不得不提的问题。有些项目,页面长,图片多,内容丰富。像商城页面。如果同步加载时一次性加载完毕,那肯定是要等到花都谢了,loading转的人都崩溃~。今天分享的是Lazyload技术 是一种延迟加载技术。让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验。

一、实现思路

页面较长,屏幕的可视区域有限。 
不设置页面中img标签src属性值或者将其指向同一个占位图。 
图片的实际地址存在img标签自定义的一个属性中,如:“data-url”。 
监听scroll,滚动到某个位置时,动态的将url替换成实际的“data-url”。

二、上代码

  • html部分(简单示意下结构)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lazyload</title> <style type="text/css"> .mob-wrap li{list-style: none;width: 100%;height: 345px;} </style> </head> <body> <ul class="mob-wrap"> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sharesdk-logo.jpg"><p>ShareSDK轻松实现社会化功能</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sms-logo.jpg"><p>短信验证码SDK</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/rec-logo.jpg"><p>MobLink实现Web与App的无缝链接</p> </li> </ul> </body> </html>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

简要流程

Start监听滚动事件距顶部高度<scrollTop么?将url替换成data-urlEndyesno
  • js部分
var aImg = [
  {"src":"http://mob.com/public/images/index/sharesdk-logo.jpg","txt":"ShareSDK轻松实现社会化功能"},
  {"src":"http://mob.com/public/images/index/sms-logo.jpg","txt":"短信验证码SDK"},
  {"src":"http://mob.com/public/images/index/rec-logo.jpg","txt":"MobLink实现Web与App的无缝链接"}
]; var sLi = '';
document.getElementsByClassName("mob-wrap")[0].innerHTML=""; for(let i = 0;i<10;i++){
  sLi = document.createElement("li");
  sLi.innerHTML = `<img class="tamp-img" alt="loading" src="./zwt.gif" data-src="${aImg[i%3].src}"><p>${aImg[i%3].txt}</p>`;
  document.getElementsByClassName("mob-wrap")[0].appendChild(sLi);
};

window.onscroll = function () {
  var bodyScrollHeight =  document.documentElement.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('tamp-img');
  for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度 if (imgHeight < windowHeight + bodyScrollHeight - 340) { imgs[i].src = imgs[i].getAttribute('data-src'); imgs[i].className = imgs[i].className.replace('tamp-img','');
    }
  }
};
    
  • 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




谢谢观看,搞定收工0.0~~~这样草草了事总是不好的

三、再优化

不做任何处理直接监听scroll必然导致在滚动鼠标滚轮的时候,过于频繁的触发处理函数。 
如果刚巧在处理函数中有大量的操作dom等消耗性能的行为,引发大量操作,导致页面变卡变慢, 
甚至浏览器崩溃无响应。 
处理这种问题的思路是节流和防抖。 
节流函数的概念有一个很形象的比喻:在接咖啡的时候,按了一次按钮会出咖啡, 
紧跟着再按几次按钮接到的还是那一杯咖啡,相当于后面几次按的没有起作用。


常规的节流在这里就不多说了,下面介绍的是一种每隔least时间内至少执行一次的节流函数。

//节流函数 _throttle = (fn, delay, least) => { var timeout = null,
  startTime = new Date();
    fn(); return function() { var curTime = new Date();
    clearTimeout(timeout); if(curTime - startTime >= least) {
        fn();
        startTime = curTime;
    }else {
        timeout = setTimeout(fn, delay);
    }
    }
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

使用节流函数

function compare () { var bodyScrollHeight =  document.documentElement.scrollTop;// body滚动高度 console.log(bodyScrollHeight+"替换src方法") var windowHeight = window.innerHeight;// 视窗高度 var imgs = document.getElementsByClassName('tamp-img'); for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度  if (imgHeight < windowHeight + bodyScrollHeight - 340) {
       imgs[i].src = imgs[i].getAttribute('data-src');
       imgs[i].className = imgs[i].className.replace('tamp-img','');
    }
  }
}
window.onscroll = _throttle(compare, 350,600);
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

滚动时间least长于600,调用compare,否则延迟350ms执行。 
这样相对于直接onscroll性能得到更进一步提升,在功能上也没有什么问题。 
不同的业务场景调整一下delay和least就可以。


结语:历史潮流浩浩荡荡,前端技术的发展也是日新月异。 
不断通过一个个小的技术点深入探究,以加深自己对js这门语言的理解。 
温故知新,回顾旧的内容,学习新的内容和特性,更好的适应工作中的需求。

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



学会这5个PS小技巧,让工作效率提高5倍!

博博

学会这5个PS小技巧,让工作效率提高5倍!

设计湿兴元君 2018-07-14 09:21:54
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

大家好,我是兴元君

你们是不是有时会很好奇

明明同样身为设计师

做着同样的工作

为什么别人总是能快速完成工作?

而你却只能无穷无尽的加班...

学会这5个PS小技巧,让工作效率提高5倍!

抛开个人能力因素

也许是他们用了你不知道的小技巧

今天兴元君就跟大家分享5个ps小技巧

帮助你们提高工作效率~

从此告别加班

1. 对图层样式如何运用蒙版

我们给图层运用了图层样式以后,经常还会对图层添加蒙版进行修改,但这个时候我们会发现,图层样式运用到所有的可见像素中,而不是直接对图层进行整体擦除,如下图所示:

学会这5个PS小技巧,让工作效率提高5倍!

但这种效果并不是我们想要的,我们不希望蒙版上产生新的效果,原来我们的做法是对该图层建立组,在组上再建立蒙版;或者对该层建立智能对象,再建立蒙版。

其实我们只需要双击图层,打开图层样式-混合选项-勾选-图层蒙版隐藏效果,就可以达到图层样式不对蒙版形成新的样式效果。

学会这5个PS小技巧,让工作效率提高5倍!
学会这5个PS小技巧,让工作效率提高5倍!

如上图所示,勾选以后,再对蒙版进行处理时,不会再产生新的图层样式效果。

2. 不同文件图层原位置的快速复制

童鞋们经常需要把相同位置对象拖到不同的源文件中,每次拖拽不准确就要重新调整,非常浪费时间。兴元君教你2种方法分分钟搞定。

方法1

拖拽时按住shift键就可以复制到原位置。图层、选区、路径等一切可拖动的对象都可以用这个方法哦。(画板之间的复制除外哦)

学会这5个PS小技巧,让工作效率提高5倍!

方法2

还可以单击图层右键-选择复制图层-选择目标文档,就可以原位置复制了。但这个方法仅适用于图层、组对象的原位置复制,不适用于选区和路径复制哦~

学会这5个PS小技巧,让工作效率提高5倍!

方法2也是有优点的,它可以运用在画板上。

学会这5个PS小技巧,让工作效率提高5倍!

这两种方法都有自己的优点,童鞋们选择适合自己的就好。

3. 快速设置图层样式

通常情况下我们在图层面板里调节参数设计阴影。

学会这5个PS小技巧,让工作效率提高5倍!

虽然这种方法也不错,但是还有更便捷的方法呢,只需要用鼠标拖拽画面中的阴影即可。

学会这5个PS小技巧,让工作效率提高5倍!

当然啦,也适用于其他图层样式,比如渐变叠加、内阴影等等。

学会这5个PS小技巧,让工作效率提高5倍!
学会这5个PS小技巧,让工作效率提高5倍!

童鞋们用下就会发现,这个小技巧更简单哦~

4. 利用内阴影给图层批量上材质

我们时常会将蜡笔手绘风格运用到设计中,这种需要添加材质的设计风格,通常图层层级都较多,需要通过笔刷层层叠加,修改起来比较麻烦,并且不适用于批量文件的处理。

学会这5个PS小技巧,让工作效率提高5倍!

然而实际项目中我们需要大量统一风格的文件。

学会这5个PS小技巧,让工作效率提高5倍!

这里给大家推荐使用图层样式-内阴影-杂色,使用图层样式可以保证各文件之间的统一性,并且可以随时修改。

学会这5个PS小技巧,让工作效率提高5倍!
学会这5个PS小技巧,让工作效率提高5倍!
学会这5个PS小技巧,让工作效率提高5倍!

调节内阴影的距离、大小、以及杂色,就可以快速做出上图中的材质效果。

5. 快速修改字体

大家都觉得用ps排版麻烦,其实利用字符样式排版,还是很容易的。

学会这5个PS小技巧,让工作效率提高5倍!

新建字符样式,并设置存储,就可以快速将样式赋予给文本图层。

学会这5个PS小技巧,让工作效率提高5倍!

对于已赋予字符样式的文本图层,修改字符样式,已赋予的图层,均跟着修改。

相信有了这些实用技能

你的工作效率会大大提高的~

来源融360RUX


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

人家互联网公司的UI设计师是如何工作的?

博博

人家互联网公司的UI设计师是如何工作的?


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


设计湿兴元君 2017-08-30 17:31:32

  • 想从事UI设计行业的小伙伴们好奇UI设计的工作流程

  • 小公司的UI设计师好奇大公司大项目的UI设计工作流程

  • 大公司的UI设计师想知道其他大公司的项目中的UI设计师的工作流程

事实上,设计师的工作流程,鉴于不同规模的公司和项目会有所差异,但基本大同小异,必须有的流程还是要执行的,下面即将为大家介绍互联网公司小伙伴们的日常:

产品经理:

  • 初期:需求调研 → 竞品分析 → 产品规划;

  • 前期:思维导图「功能模块」 → 需求文档「流程逻辑」,原型设计「信息架构」→ 评审;

设计师:

  • 中期:准备工作 → UI设计 → 交互原型 → 评审→ 标注切图;

攻城狮

  • 后期:开发跟进 → 用例测试 → 上线;

接下来为大家介绍日常用到的工具:

一、准备工作

产品结构和逻辑梳理阶段:思维导图软件MindNode +流程图软件Viso

人家互联网公司的UI设计师是如何工作的?

逻辑梳理:流程图软件Visio对本次需求的流程进行梳理,这步是很有必要的

很夸张的是,大多数产品团队中,往往只有交互设计师认真从头到尾思考过产品流程;同时大多数产品,直到完成后才发现流程上的 bug,但此时只能假装没看见。

只有设计师明白产品整体的使用流程,才能站在全局的角度去看待本次的设计任务,让设计师也从始至终参项目,这在后面会减少很多沟通成本。

人家互联网公司的UI设计师是如何工作的?

二、UI设计

主力设计工具 Sketch,不用多说,无限尺寸的画布配合快捷键和庞大的第三方模版更利于输出移动产品原型。如果在团队全 Mac 的配置下,还可以无缝衔接设计与前端的项目协作。

人家互联网公司的UI设计师是如何工作的?

三、交互原型

强烈推荐:主力交互工具Flinto,是一个使用图片快速生成移动应用的原型,简单粗暴,只要上传几张设计效果图随便拖拽几下,只需要几分钟就可以部署到手机上查看逼真的交互效果,学习成本极低,最开心的是版本已经有中文版了。

人家互联网公司的UI设计师是如何工作的?

Appstore下载Flinto,可以在手机上实时预览,查看逼真的交互效果,跟成品差别不大,开发再也不用过来问,这个应该跳转到哪个页面,这个怎么操作......

尤其是给老板,客户展示的时候,一来这货够专(zhuang)业(bi),二来千言万语不如真机来体验一下。

人家互联网公司的UI设计师是如何工作的?

四、评审

户体验地图:把根据「问题」和「惊喜」的数量情况,和重要性程度,理性地判断每个行为节点的情感高低,并连线。

1、看看最高点,为它多做一点事情,将它推到。

2、看看点,思考能不能把其它体验值高的步骤,分摊一部分功能到这里,均衡体验情感。

人家互联网公司的UI设计师是如何工作的?

用户体验地图:如果你参加过收费的 workshop 或者看过讲设计方法的书,你一定听过体验地图(Experience Maps)。在一些些台版书籍里也叫使用者旅程图(User Journey Maps)。

使用帮助:以干货开场,如何有效地做用户体验地图

体验地图第一大优势:好看。它以视觉化的方式,将用户与产品或服务进行互动时的体验分阶段呈现出来,让体验地图中的每一个节点都能更直观地识别,评估和改善。不论是电子版还是满墙的便利贴,在效果上已经充满了形式美。

体验地图的第二大优势:非常贴合时下流行的「情感化设计」。体验地图能协助团队精准锁定产品引发强烈情绪反应的时刻,同时找到最适合重新设计与改进的地图节点,这一切都几乎用户使用中的情感需求。

体验地图的第三大优势:能够多人参与,并且让所有人都横向梳理一遍产品流程。很夸张的是,大多数产品团队中,往往只有交互设计师认真从头到尾思考过产品流程;同时大多数产品,直到完成后才发现流程上的 bug,但此时只能假装没看见。

为什么你觉得体验地图无用?因为你不知道:

体验地图并不是一个独立的设计方法,它是产品用户研究过程中重要的一部分。在我做过的案例中,体验地图往往是最终收尾、拿结论的最关键节点——但是不能脱离了前期其它设计方法的材料准备。

转自专栏:理科生是设计师

作者:星玫

五、切图标注

相信大多数设计师只希望做好属于自己的界面设计,不想在切图和标注这上面浪费太多时间,每次一到要标注的时候,心中就万头草泥马在奔腾

劳资是一个设计师,不是切图仔!!!

还是默默地去标注尺寸去了,让本公举切图该多好!心里想如果有一天能不在

切图工具演变路径:马克鳗 → Pxcook→ Zeplin

人家互联网公司的UI设计师是如何工作的?

直到发现了zeplin这个神奇的工具,以后再也不用标注和切图了,使用zeplin有以下好处:

1.标注尺寸那里需要点那里,距离相邻元素的所有尺寸和颜色清晰明了,之前是标注太细致,ui没法看,标太少,相当于没标注

2.支持css/less/saas等css属性,直接粘贴,开发简直不能太爽了

3.支持标注,方便团队协作(可以替代prd文档了)

4.支持色板和字体 导航 ,可以用作使用规范

人家互联网公司的UI设计师是如何工作的?

关于zeplin:

随着sketch的普及,好多团队都陆陆续续把sketch作为设计主力工具,去年zeplin发布1.0版本时候还不支持Photoshop cc,一年过去了,版本已经可以兼容版的ps了,可喜可贺。并且zeplin客户端在Mac和Windows上面都有对应的版本。

再也不需要为了一个zeplin去学习sketch了,ps也支持啦!毕竟再重新学一个软件,本宝宝心好累

人家互联网公司的UI设计师是如何工作的?

安装步骤:zeplin官方安装帮助

步骤一:安装软件+zeplin插件

1.Mac用户:安装sketch;Zeplin.app;zeplin-sketch插件

直接解压安装即可

2.Windows用户:安装Photoshop CC2015;Zeplin.app;zeplin-ps插件&面板

步骤二:注册zeplin迭代帐号,邀请项目人员。

步骤三:把sketch或ps里的文件导出到zeplin

使用姿势:

人家互联网公司的UI设计师是如何工作的?

切图神器二:slicy是经过测过几种辅助切图工具后又回来使用的神器。「把整个 PSD 扔进去,结束。」简洁利落不啰嗦。我爱它的程度已经到了没有它我就不会切图了(哈哈)。

人家互联网公司的UI设计师是如何工作的?

1. PS 图层依规则命名→2. 把档案丢进 Slicy 里→3.完成

人家互联网公司的UI设计师是如何工作的?

人家互联网公司的UI设计师是如何工作的?

够简单无脑了吧?

使用姿势gif:

人家互联网公司的UI设计师是如何工作的?

其他实用工具也分享给你

1.图标管理工具

▌iconjar for Mac:目前支持 SVG、PNG、Gif 三种格式的图片。建议大家去官方下载官方素材库资源时候尽量导入svg格式,这样以,毕竟是矢量的.

人家互联网公司的UI设计师是如何工作的?

选中某个图标,侧边栏会出现名称和标签,当然不需要的右边栏话也可以在菜单栏隐藏.

偷懒姿势:

1)下载图标并安装:官方素材库

2) 把图标拖进sketch或ps 里。

人家互联网公司的UI设计师是如何工作的?

▌Icon8 for Windows:提供客户端(Mac/Windows)来方便用户搜索和直接下载图标,没有付费的用户可以使用客户端程序获取50PX(像素)的 PNG 图标,而且能自定义图标颜色。通常的使用中,这些风格统一、可以定制颜色的小图标就够用了,如果要进一步获得大尺寸的图标或 eps 矢量格式需要付费。

人家互联网公司的UI设计师是如何工作的?

支持:Photoshop, Axure, Visual Studio 等等,如图所示

人家互联网公司的UI设计师是如何工作的?

人家互联网公司的UI设计师是如何工作的?

人家互联网公司的UI设计师是如何工作的?

2.字体管理工具:Rightfont

人家互联网公司的UI设计师是如何工作的?

下面是google自动翻译的,大概意思还是正确的

人家互联网公司的UI设计师是如何工作的?

人家互联网公司的UI设计师是如何工作的?

3.GUI 规范管理与共享(图标/色板):Lingo 

这个可以当做公司内部设计师和开发公用的一套GUI设计规范来用,

  • 团队:收费

  • 个人:完全免费

顶部工具栏可以创建色板,吸取颜色创建完成后,直接Command+c复制 Commandl+v粘贴 进sketch或ps 里,完成取色任务.

最右边支持HEX RGB HSB 颜色的拷贝和粘贴,同时支持css颜色代码快速显示

人家互联网公司的UI设计师是如何工作的?

偷懒姿势:

1) 创建色板

2)把Command+c复制 Commandl+v粘贴 进sketch或ps 里。

4.设计素材收集:Zoommy+Inboard

  • Zoommy (Mac/Windows均可)

每个设计师都有一个习惯,那就是做设计之前先去搜素材,每次找个合适的素材会花很长的时间,百度的图片质量各位都懂,那么问题来了,如何快速的获取到你想要的图片素材呢?

相对来说我们上高中的时候找图片,找半天都找不到中意的素材,现在比之前好多了,免费的素材也要多很多,有些质量还挺棒的,高清无码大图。

所以小公举用的就是一款多图库源管理应用-Zoommy,有了它我们可以很方便的关注40多个图库源,找素材的效率大幅提升。

妈妈再也不担心我找图了,hiahia~

人家互联网公司的UI设计师是如何工作的?

Windows上面也可以用,不多说,上图:

人家互联网公司的UI设计师是如何工作的?

  • Inboard:比Ember更轻盈

如果你用过Ember回头再来使用Inboard,你会发现它在功能上确实会少很多。但带来的好处就是应用足够轻盈,易用。再看看Ember中那些复杂的功能,我会用到的始终只会是它其中的一小部分。

1.文件夹和Tag方式的图片素材管理

2.Chrome、Safari的全屏截图保存

3.Dribbble like的关注两个核心功能 延伸阅读 如何成为 Dribbble 的 Player ?

使用截图

人家互联网公司的UI设计师是如何工作的?

讲到这里,是不是如获至宝

良心推荐,无私分享

有没有讲到你的工作上的痛点呢?

赶紧下载用起来吧!

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

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

博博

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

互联网er的早读课 2018-07-14 18:46:25

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

来源:网易UEDC(ID:NetEase_UEDC)

编辑:Juvae

隐喻设计是一种常用却很少有人提及的概念,人们往往身在其中却不知究竟为何物。

简单说,隐喻设计它可以将现实生活中用户熟悉的事物以多种形式映射到界面中,从而使用户不熟悉的概念、陌生且复杂的操作等变得熟悉与简单。

它不等同拟物设计,隐喻是一个大的概念,界面中充斥着不同的隐喻元素。本文将常见的隐喻元素按照视觉、听觉、触觉三种界面交互类型分类,并整理了四种隐喻设计方法,以供大家参考。

界面隐喻的类型

1. 视觉隐喻 - 静态

1.1 文字隐喻

界面中常见的文字隐喻可以分为两种,一种是功能命名类语言,另一种是产品定义类语言。

常见的功能命名类语言有:“解锁、导航、登录”等等。功能命名类语言主要是运用隐喻的方法对界面中经常使用的功能进行命名,例如“导航”本义是驾驶某种交通工具从某个地方去往另外一个地方,它可以指引人们路线,设计师将界面中“依据地图行走可以到达目的地”这一功能命名为“导航”,可以和现实生活中人们熟悉的导航本义结合起来,方便记忆。

常见的产品定义类语言有:应用市场中的“市场”、文件助手中的“助手”等等。而产品定义类语言,不仅可以准确表达功能要求,还能传递给用户某种情感。例如,文件助手中的“助手”两个字本义是可以帮助他人的人,设计师将手机中的文件夹定义为“文件助手”,意图是这一功能可以为用户整理文件排忧解难,给用户传递一种被感动的情感。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

1.2 色彩与材质隐喻

在界面设计中也有两种形式的色彩隐喻。一种为指示性的设计,运用用户熟悉的某种颜色指示界面中的某种状态,例如QQPC版用绿色icon代表我在线上、红色icon代表忙碌或请勿打扰。另一种为气氛的营造,借用色彩带给用户的某种心理暗示,为产品营造某种氛围,例如支付宝软件整体采用蓝色的风格,可以营造一种安全的氛围。

材质的隐喻可以使界面不再生硬,用户使用起来更加亲切。例如读书APP的阅读界面采用纸质效果,使用户在阅读时更像是阅读一本真正的书。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

1.3 图形隐喻

图形是构成界面的重要元素,具有隐喻特征的图形会让一些繁琐并难以理解的操作行为变得轻松且生活化。所以在设计中,设计师需要有效地构建图形隐喻从而表达事物的含义与特征。

常用的图形隐喻非常多,例如界面中锁可以代表“密码”,火箭可以代表“加速”,调色板可以代表“主题”,齿轮可以代表“设置”,地球可以代表“浏览器”,雨伞可以代表“安全”等等。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

2. 视觉隐喻 - 动态

2.1 人的行为习惯上的隐喻

人的行为习惯上的隐喻是指界面设计中的交互方式模拟用户真实操作生活中的物体时的手势、动作。例如,界面中的手势操作:滑动,放大,缩小,旋转,拖动,抓取等;将垃圾文件放置回收站,将商品放入购物车;手机滑动解锁等等。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

2.2 物体物理属性的隐喻

物体物理属性上的隐喻是指现实生活中,物体被移动、被操作会表现出一种自然的属性,设计师根据这种属性进行界面隐喻设计。常见界面中物体物理属性的隐喻有:读书软件中翻书书页模拟真实的效果;点击或触摸屏幕时视觉水波效果的反馈; 页面转场的加速度,惯性等物理运动曲线效果等等。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

3. 听觉隐喻

听觉隐喻元素是指界面系统反馈给用户的某种能够准确映射出这种交互行为的隐喻性声效。例如,将文件放入回收站的音效(当将一个文件放入回收站后系统会模拟纸张被撕开,扔入垃圾桶的音效);当用户读电子书翻页时,纸张的摩擦声的音效;此外还涉及游戏音效:当用户玩游戏植物大战僵尸游戏的时候存在多种听觉隐喻元素,种下植物时植物与地面结合的音效、植物发射子弹打在僵尸身上的响声、僵尸来临时的营造氛围的恐怖音效、最终失败时主人公大脑被吃掉时的叫声,听觉通道上的隐喻音效让整个游戏更加真实、生动。

4. 触觉隐喻

触觉上的隐喻可以理解为,设计师模拟真实世界用户获得的某种触觉体感,为界面提供适当的仿真反馈,从而提高用户体验的方法。常见触觉上的隐喻,例如:iPhone7的home键并非实体按键,但为了保持用户的使用习惯,仿真设计成实体按键的外形并提供用户实体按键的反馈;iPhone的3DTouch可以理解为设计师为了模拟电脑鼠标的右键,为产品提供更多功能的一种移动端快捷方式;此外,在游戏中,撞车时、飞机被击中时的震动反馈也属于触觉上的隐喻形式。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

界面隐喻的设计方法

界面隐喻设计方法的本质是设计师通过将界面中某元素和现实生活中的某事物联系起来,挖掘二者之间相似的属性,从而使用户接触到界面中的此元素时,就能够认知这个元素所代表的概念或功能等。针对二者之间相似的属性,具体可以分为概念上的属性、特征上的属性、结构上的属性、行为上的属性等。

1. 从概念上进行隐喻设计

例如,现在最普遍的两大电脑操作系统Mac OS系统与Windows系统的“桌面”界面都是由现实生活中的工作桌面的概念映射而来。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

2. 从特征上进行隐喻设计

例如,设计师会使用盾牌的图形来表示安全软件,因为盾牌与安全管家等软件同样具有防护的特征。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

3. 从结构上进行隐喻设计

例如,网易邮箱大师的“邮箱与文件夹”展开结构与现实生活中抽屉被抽开的结构具有一致性。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

4. 从行为上进行隐喻设计

例如,在界面中用户将某文件拖进回收站这一动作模拟了现实生活中人们将废纸扔进垃圾桶。

揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

写在最后

好的隐喻设计可以简单地传达一个功能所代表的意义,或能更加匹配用户心智模型从而引导用户进行正确的操作。

本文归纳的隐喻设计类型和隐喻设计方法,希望可以对大家提供一些设计启发。

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

设计师如何正确的设计好自己的人生?

蓝蓝设计的小编

设计师如何正确的?设计好自己的人生!因为你的时间和生命才是最重要的,这个世界上最大的浪费就是走弯路。

跨浏览器问题

seo达人

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

写在前面的话

关于跨浏览器问题一直是一个大问题, 所以我决定在此做一个记录, 当然不可能把跨浏览器问题一下子都搞定, 所以该文章将是一个长期的过程, 当coding时遇到了, 就会完善该文。

添加事件

var EventUtil = { /*
     *添加事件
    */ addHandler: function(element, type, handler) { if(element.addEventListener){ element.addEventListener(type, handler, false)
        }else if(element.attachEvent){ element.attachEvent('on'+type, handler)
        }else{ element['on'+type] = handler
        }
    }, /*
     *删除事件
    */ removeHandler: function(element, type, handler){ if(element.removeEventListener){ element.removeEventListener(type, handler, false)
        }else if(element.detachEvent){ element.detachEvent('on'+type, handler)
        }else { element['on'+type] = null }
    }, /*
     *获得事件对象
    */ getEvent: function(event){ return event ? event : window.event  //ie浏览器的事件对象是window对象的属性, 所以需要window.event来获取。 }, /*
     *获得事件对象的事件目标(触发事件的事件目标)
    */ getTarget: function(event){ return event.target || event.srcElement //这是||符号的另一种用法, 遇到true就返回。 }, /*
     *阻止默认事件
    */ preventDefault: function(event){ if(event.preventDefault){
            event.preventDefault
        }else{
            event.returnValue = false }
    }, /*
     *阻止事件冒泡
    */ stopPropagation: function(event){ if(event.stopPropagation){
            event.stopPropagation()
        }else {
            event.cancelBubble = true }
    }

}  // stopPropagation()方法既可以阻止事件冒泡,也可以阻止事件捕获,也可以阻止处于目标阶段。
    
  • 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
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61

ajax事件

关于xhr对象, ie7需要之前的需要使用ActiveXObject对象来实现, 而且存在三个不同的版本。 虽然现在已经不用兼容ie7以前的浏览器了, 还是可以了解一下: 
//适用于IE7之前的版本

function createXHR(){ if(typeof arguments.callee.activeXString != 'string'){ var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
        i,
        len; for(i = 0; len = version.length; i++){ try{ new ActiveXObject(veersions[i]); arguments.callee.activeXString = versions[i] break }catch(ex){ //跳过 }
        }
    } return new ActiveXObject(arguments.callee.activeXString)
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

//最终版本

function createXHR(){ if(typeof XMLHttpRequest != 'undefined'){ return new XMLHttpRequest()
    }else if(typeof ActiveXObject != 'undefined'){ if(typeof arguments.callee.activeXString != 'string'){ var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
        i,
        len; for(i = 0; len = version.length; i++){ try{ new ActiveXObject(veersions[i]); arguments.callee.activeXString = versions[i] break }catch(ex){ //跳过 }
        }
    } return new ActiveXObject(arguments.callee.activeXString)
    }else { throw new Error("NO XHR object availabel")
    }
}
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

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

存档