废话少说,直奔主题,各位童鞋请对号入座! 1. 用通栏布局代替多栏布局 2. 给用户些好处,别急着做生意 3. 整合相似的功能,去掉零碎的UI元素 4.利用社会认同效应,别总是自吹自擂 5.主要功能需要多次强化显示 6.区分选中和可点击的状态,不要使用户困惑 7.布局有层次有重点,而非简单罗列 8. 允许用户撤销操作而不是使用弹窗需要用户确认 9. 明确的告知用户适用人群而不是简单的面向所用用户 10.简洁明了,直接了当 11.页面上多使用对比的方法 12.直接标出产地,别总单纯的讲历史 13.使用简洁的表单 14…

2015年03月30日 0条评论 50点热度 0人点赞 阅读全文

大家对于德国人的印象是怎样的呢?印象中,他们理智而严谨,科学技术令我们侧目;他们浪漫也多情,文学艺术使我们难忘。但是今天的德国更加多元化, 充满现代科技感的设计和活力四射的街头涂鸦并存着,来自中世界的阴郁和奢华也并未断绝传承,你依然可以在诸多设计作品中得以窥见,那些真正顶级的德国设计 作品,就是多样化德国的缩影。 当然,多样化并不足以拿来界定德国设计师的精髓。当你打开德国设计师的网页设计作品的时候,你会感受到更多:完备而充满现代质感的解决方案,拥抱主流文化而富有创意,最重要的是,一丝不苟的设计细节配合着高端的技术加…

2015年03月29日 0条评论 50点热度 0人点赞 阅读全文

网页设计既是一门独立学科,也是一种艺术形式。网页设计的工作至少一半是基于坚实的代码和设计知识,而另一半则是对于美感的认知,什么好看,什么不好看。每一个网页设计师都有着坚实的基础知识和他的核心竞争力,这些确保他能脱颖而出。 那么一个设计师的基础应该从哪里开始构建呢?当然,既然称之为基础,那么它必然不可能一蹴而就。经验是没有替代品的,所以系统的设计课程(无论是否 正式教育)还是很有帮助的。另外很重要一点,是你需要不断挑战自己,逼迫自己走出舒适区的边界,只有这样才能拥有更强大的技能,成为更优秀的自己。只有这 样才能留住客…

2015年03月28日 0条评论 38点热度 0人点赞 阅读全文

我曾与一位视觉设计师合作共同开发一款web应用。他提交给我的设计稿看起来非常带感,于是我根据他的设计稿,用HTML和CSS将web应用写了出来。当我以为一切都已完成,并且火急火燎地将产品给他看的时候,知道他说啥了么? “你全做错了。” 的确。我并没有根据他的模型来使用字体,为此他专门把我叫出来并告诉我这是一个非常大的错误。我该如何弥补呢? “我不知道。但是目前它是最大的问题,毫无疑问。” 说起来,在过去的很长一段时间里,我都同不同的网页设计师一起合作开发各种不同的网站,这使得我逐渐开始关注网页设计中的很多细小但重要…

2015年03月28日 0条评论 58点热度 0人点赞 阅读全文

提到设计,运用摄影图是其中一项基本手段,每件设计都或多或少都会用到。本文要剖析的并非摄影图本身,而是网页设计中运用和掌控摄影图的流行趋势。 其中有些显而易见、广为人知,其他则频频使用,却鲜有提及。当我们将同类趋势收集整理成套,对此概念的认识则会超乎我们想象。而且,像这样把各种趋势对比着看,我们似乎会发现当下采用的方法并非最佳,可以找到更好的替代方案。 1. 巨幅背景图 首先考虑一项最盛行的趋势。以下是一系列运用巨大照片作为背景图的网站。毫不夸张地说,这是一种快被消灭掉的方式。但这并不是说就该禁止使用。每种 趋势都有…

2015年03月28日 0条评论 58点热度 0人点赞 阅读全文

用图像创造场景感,增强用户的真实体验,近些年来,图片作为背景填充整个屏幕的设计越来越广泛,曾经只有时尚潮流网站或者摄影类站点才会特别依赖富有冲击力的图像,但是现在几乎任何类型的网站都有可能采用这种大图片作为背景,特别是企业品牌宣传、产品介绍等等。 在设计网页过程中,需要用到大量的图片,而且找到的图片大多风格迥异、无品牌感,那么如何找到合适而又能正确地应用图片呢? 如何正确应用图片 整理了一些经验总结供大家参考: 1 .提炼关键词寻找图片 首先需要提炼产品特性关键词,通过关键词的形式寻找合适的图片。 上图是googl…

2015年03月28日 0条评论 33点热度 0人点赞 阅读全文

在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用ie条件注释,为ie8以及一下单独开一个样式文件 <!--[if lt IE 9]> <link href="lt9.css" rel="stylesheet" type="text/css"> <![endif]--> 2. 一个模块的mq样式整体放在这个模块的样式的之后,符合层叠逻辑,也同时以免被层叠。 3. 祈求在一个…

2015年03月25日 0条评论 53点热度 0人点赞 阅读全文

转自:微博交互设计

2015年03月24日 0条评论 59点热度 0人点赞 阅读全文

  关于字体设计的话题之前已经有很多设计师发表过自己的观点和经验,但是这并不妨碍我们今天再次提起这个话题,每个设计师的工作方法和设计的切入角度都是不同的,今天跟大家着重谈谈创意字体设计的方法和思路 >>> 相比于专业性更强的印刷字体设计来说,创意字体设计只需将特定的某几个字或某几句话进行笔画的重新整合与创新,因此,你的工作量会比做一套字库来得 轻松得多。但不同于印刷字体的是,你需要花更多的时间在你的创意上,如何让文字的震撼力和感染力变得更强,如何让你的创意在短短的几个字中呈现出来,都需 …

2015年03月23日 0条评论 53点热度 0人点赞 阅读全文

从引爆朋友圈的H5小游戏《围住神经猫》,到颠覆传统广告的大众点评H5专题 页《我们之间只有一个字》,从2014下半年起,各种H5游戏和专题页纷纷崭露头角。“H5”,这个由HTML5简化而来的词汇,借由微信这个移动社交平 台,正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计,通过一些案例分析来谈谈设计思路与方法,希望与大家进行交流探讨。 功能与目标 首先从功能与设计目标来看, H5专题页主要有以下4大类型: 1.活动运营型 为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括游戏、邀请函、贺卡…

2015年03月23日 0条评论 50点热度 0人点赞 阅读全文

春暖了花开了  

2015年03月23日 0条评论 45点热度 0人点赞 阅读全文

很多小伙伴们为了提升设计作品的逼格,在设计展示图上打上各种圈圈,让简单的图形,看起来高端上档次。 有的时候,屌丝与高富帅,仅一“圈”之遥。 还有一种普遍的现象,一个标准简洁的logo诞生之初,总会被外行人鄙视嘲笑吐槽,当设计师发布了线框图(手稿之后),又会被一边倒的人评价认真,专业。锤子的logo发布之初亦是如此。 为何辅助线能提升作品档次? 其实这些线线圈圈都是设计的手工作业时代玩剩下的东西,计算机设计时代,无需用笔、圆规、尺,工业及平面师设计用CAD轻松解决。大多互联网设计师非工业\平面设计科班出身,在平时的业…

2015年03月16日 0条评论 42点热度 0人点赞 阅读全文

当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画。并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动: 感谢shirley帮忙录制上面的视频,虽然视频内容是手机上的显示效果,但是,这个“企业新年祝福活动”原本只针对桌面端,移动端是后来辅助增强(增加了相当于活动页面UV 5.7%的点击)。而目前大多数类似页面只针对移动端,例如其他同事实现的QQ空间5.0预约页第二版: 扫码(需登录)或者链接二选一: 访问demo戳这里 因此,需要…

2015年03月16日 0条评论 44点热度 0人点赞 阅读全文

悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现。今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样。 首先,来看下最终的效果: 它的 HTML 结构也很简单,但不是 Single Element:   <div class="spinner"><i></i></div> 外层元素 .spinner 负责显示底部的半透明圆环:   .spinner { font-size: 20px; wid…

2015年03月11日 0条评论 35点热度 0人点赞 阅读全文

1988年,由上海美术电影制片厂拍摄的《山水情》成了中国水墨动画片的绝唱,也成了中国动画彻底商业化之前的最后一部艺术精品。 《山水情》:号称中国近代动画片之最。该片融入了中国的道家师法自然、与世无争思想和禅宗明心见性的灵感。杰出的水墨技法与古琴技艺无不出自大家之手。折服无数中外人士。绝对可以作为划时代的见证。 然后,就没有然后了,这部片子成了绝唱。     这部水墨动画在国际上博得了交口称赞,日本动画界甚至称之为“奇迹”。可是也正因为艺术价值同商业价值的脱离,也使得水墨动画面临着无以为继的尴尬。…

2015年03月07日 0条评论 46点热度 0人点赞 阅读全文

缺省页面,是出现在用户没有提交任何资料或者网络连接不通畅的情况下所展现的页面。通常设计师们习惯用丰富的数据内容把页面设计得美观实用,考虑的都是界 面展现的“理想状态”,往往会忽视没有内容的“缺省状态”。未经过精心设计的缺省页面降低了用户的使用体验,并可能给用户带来困扰,如下图iOS系统邮件 App,无邮件时界面上没有任何有效反馈信息,用户不能明确得知到底是网络问题还是账号同步出错亦或者是收件箱内确实一封邮件都没有。同样的情况也出现在 Pinterest和出发吧的界面里。 那什么内容可以被添加进入缺省页面从而使其“丰…

2015年03月07日 0条评论 58点热度 0人点赞 阅读全文

【译者注】作为一个移动界面设计师,如果你已经细细读过Material Design的设计指引,那么这篇文章是一篇很好的设计案例。如果你还没有读过,那这篇文章一定是个最容易最生动的起点,以小窥大得帮助你进入Material Design的世界。 大家知道,google最近发布了Android的Lollipop系统,系统的一个重大改动是引入了一种新的视觉语言:Material Design。随着新系统的发布,安卓也发布了一个跨平台的视觉、动效、交互设计的全面指引。10月7日,Google的Material Design…

2015年03月07日 0条评论 49点热度 0人点赞 阅读全文

颜色在设计中的地位非常之高,一个好的设计必然会有好的配色,一个好的设计加上差的配色就会等于差的设计。为什么说颜色在设计中很重要呢? BESD:人类是如何认知颜色的 一、颜色的意义 1.色彩能够影响人的心理和生理。 过去英国伦敦的菲里埃大桥的桥身是黑色的,常常有人从桥上跳水自杀。由于每年从桥上跳水自尽的人数太惊人,伦敦市议会敦促皇家科学院的科研人员追查 原因。开始,皇家科学院的医学专家普里森博士提出这与桥身是黑色有关时,不少人还将他的提议当做笑料来议论。在连续三年都没找出好办法的无奈情况下,英国 政府试着将黑色的桥身…

2015年03月07日 1条评论 47点热度 0人点赞 阅读全文

清新、安定、环保,在这三个关键词的遐想画面中一定有绿色。   绿色是一个在网页设计中被广泛运用的颜色,本身就带着一种与生俱来的平静感。绿色在心理学上被认为会产生一定的视觉冲击力,因此,能在网站主页上用绿色元素去突出信息重点是一个不错的选择。   以下是AnyForWeb为大家汇总的比较有代表性的包含绿色成分的网页设计,供大家参考学习。   1.该网站案例很好的证明了绿色独具的引导和提示作用。网站导航的主色对用户的视觉会有很大的影响,亮丽的颜色可能会刺眼;暗淡的颜色有可能太沉闷,因此,温…

2015年03月06日 0条评论 50点热度 0人点赞 阅读全文

编者按:前几天的“蓝黑白金”事件,已经有设计师同学揭秘了误差的原因,木想到今天百度的同学出了升级版的教程,聊聊界面设计过程中,遇到视觉BUG时的处理方法,非常涨姿势的一篇实用文,来收 >>> 最近的“蓝黑白金”事件非常的火,引发了大家对视觉误差的思考。对于做“视觉设计”专业的同学来说,视觉误差同样值得研究研究。俗话说:“耳听为 虚,眼见为实”,不可否认眼睛是人的感觉器官中最直接,最能反映事物原貌的。但眼睛看到的是否就一定反映客观事实呢?其实不一定。人类的眼睛,有它特有的 成像原理和信息处理过程。就…

2015年03月06日 0条评论 69点热度 0人点赞 阅读全文
12