专题分享

Instagram 速度快的秘密何在?

nstagram 的联合创始人 Mike Krieger 在 Speakerdeck 上有个值得一看的演示片,叫做“闪电般快速的移动设计的秘密”。在这个演示里,他讲到了 Instagram 是如何使用户获得“应用总是很快速”的印象的。

详细阅读>>

原型的构建与设计

怎么去组织页面元素,制作原型Demo;哪些表现层面是交互设计师该重点表达的内容,原型的制作又有哪些章法可循呢?

详细阅读>>

掌控像素的虚实

3月份,Photoshop CS6 Beta版(下文简称PS CS6)发布公测,有着多项惊艳的新特性,工作中整天和像素打交道,感触比较深的特性就是PS CS6支持矢量对象绘制、变换时像素自动对齐网格。

详细阅读>>

16 款非常实用的jQuery导航菜单插件

在任何网站中,导航都是非常重要的,这是Web设计中最关键的环节之一。其中下拉导航最为常用,它扮演了一个重要的角色,使网站显得更加友好、专业。

详细阅读>>

与瀑布模式说“再见”:5 个步骤实现响应式 Web 设计

响应式简介 你可能熟悉典型的“瀑布模式”的开发过程:从系统需求分析开始,然后着手设计,接着开始前后台开发,最后进行评估并且实施。线性性质是瀑布式开发的主要特点:当这一阶段完成,下一阶段紧接开始,两者配合的几乎天衣无缝。 “瀑布模式”开发过程是通过设计一系列阶段顺序展开的,只需朝一个单一的方向推进工作,而不幸的是,随着问题的不断积累,不得不放慢脚步,来应付各种棘手的问题。 “瀑布模式”开发过程演示图: 所谓的“响应式Web设计”,它是指在网站建设过程中,利用同一套代码,使网站内容在PC、平板电脑以及智能手机浏览器上都能正常的显示。那些为了发布同样的内容,而创建PC,mobile等多个版本的日子一去不复返了。现在你可通过构建一个非常灵活的网站去应付所有的运行环境。 “响应式”设计过程如下图所示: 那么,为什么要使用响应式设计而不是采取瀑布模式?瀑布模式只按照标准的桌面浏览器进行设计,除此之外,几乎没有考虑任何其它的设计开发环境,这是它最大的缺点。而敏捷的响应式设计从一开始就考虑到这些跨平台问题,从而进行更详细的前期框架构图、设计和测试,而这些工作恰恰在瀑布模式中被省略了。基于响应式设计的网站一旦完成实施,将正确的呈现在PC、移动设备和平板电脑上。 响应式设计在不同设备上的效果展示图: 既然如此,那么如何在团队中实施响应式Web 设计呢?下面,我们将回顾典型的瀑布模式的开发步骤并且说明如何使他们变为响应式设计模式。 第 1 步:计划 瀑布模式开发 在瀑布模式开发过程中,框架图主要由布局和小部件构成。它们被设定为一个特定的尺寸(通常基于像素),并且几乎没有调整的余地。这些框架图给出了具体的网格/布局的尺寸大小,但是不同的屏幕分辨率会导致布局发生变化,这时一切都变得毫无意义。最终,导航条菜单无法使用,无法进入表单页面,并且界面也会变得凌乱不堪。 响应式Web 设计 解决此问题并不困难。你需要为不同的视图设计不同的部件,并且不要将一个页面当成一整“页”。页面不是最小的组成单元——而是滚动条、文字内容、表单和其他成份是组成整个页面的最小元素。框架图必须考虑不同的屏幕尺寸,因此布局尺寸也是不固定的。布局可以从三列变至两列,在最小的显示设备上(移动智能手机),甚至可将其调整为单列显示。 同时,你也需要改变网站的用户体验——在小尺寸的屏幕上,要求滚动条不仅仅是可以通过鼠标进行操作,而是人们用手指也能够控制它。这样框架图仅仅是一个原型设计工具,而不再是模板,并且需要通过一些开发和测试来确保其能在显示屏上执行。如果在这些初步测试之前开始设计的话,一些未知的开发问题就会接踵而至。不管怎样,项目根本的愿景必须是保持不变的,因此,保持部门之间开放的沟通渠道是必不可少的。 第 2 步:设计 瀑布模式开发 在瀑布模式开发中,接下来将按照框架图来进行设计,并且通过字体、颜色、间距以及其他设计工具、手法使其变得丰富多彩而富有生机。通常情况下,设计会进行来回的修改,并且通过设计的不断更新,来逐步完善品牌和设计的规范。 响应式Web 设计 为了更好的使用分配的项目时间和资源,响应式的Web 设计应该设计不同尺寸的布局和部件。响应式的Web 设计不再使用基于像素的完美设计。我们认为在不固定的网格中设计灵活的部件,设计不同尺寸的布局和部件的工作量是可控的,虽然完成可以兼容桌面浏览器的设计就已经极具挑战性了。 让HTML在所有环境中采用流体布局来提高设计品质。不去专注于用户的总体体验,而考虑每一种浏览器宽度是非常浪费时间的做法。例如,需要确保在小型移动设备上操作rotating banner的原件是快速反应的,并且按照行业推荐的最小的44px作为标准的人类手指尖的尺寸来进行设计。对于用户体验的设计和针对所有屏幕尺寸进行外观设计是同等重要的。 第 3 步:开发 瀑布模式开发 在瀑布式开发方法中,一旦客户确认了设计图,接下来的前端开发中,就会发现在小型屏幕中存在各种问题。不幸的是,由于瀑布模式的线性特征,这些不可预见的问题只能随着项目的推进而出现。 响应式Web 设计 在敏捷的响应式的开发过程中,设计必须以灵活网格为基础。需要由开发者对部件进行规划和原型设计,并且在每一个阶段都进行测试。为了确保部件是可能的最小的组成单元,需要对代码进行优化。因为部件可以容易的加入到布局中和从中移除,所以在最初的设计中并没有规划出来。通过开发者、设计师和策划者之间良好的协作来规避由于必需的修改而引起的各种问题。这样,团队中的成员达成共识,就可以早点发现和解决问题。 第 4 步:耐心的测试 瀑布模式开发 在标准的瀑布模式开发的最后阶段是通过单元测试和功能测试来评估站点。在这个阶段发现的问题,可能会要求重新规划项目最初的设想,甚至有时候一个新上市的设备可能对项目造成沉重的打击。需求分析团队和设计团队不得不重新规划和设计以顾及到这些变化,并且将花费更多的时间来进行修改。 响应式Web 设计 在响应式开发过程中,每一个阶段都会在多种浏览器和不同尺寸屏幕中进行测试,因此问题可尽早发现。这样也可发现某种移动环境与框架图不匹配的问题,以及了解该设计在不同平台上的性能。响应式Web设计会尽早的完成项目原型,让客户更早的检查成果以实现双赢。 第 5 步:尽早发现问题,尽早解决 瀑布模式开发 传统的瀑布式开发过程中,没有通过设计和界面迭代的过程。瀑布式开发忽略项目建设过程中的小细节,从而引起一些问题并与客户期望相冲突。虽然通过不断的及时与客户沟通,最终问题解决了,但是这些糟糕决策的严重性却仍未察觉。 响应式Web 设计 响应式解决方法,在取得同样进展的同时,采用动态代码向客户展示每一步的实现过程。这样,这些早期的工作有利于推动下阶段工作,并且可以在截至日期之前进行关键的修改。 [...]

详细阅读>>

如何做得Banner通情达意

有人觉得做个banner放2张图,排几个字的事,一点技术含量都没有,像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的,其实一个banner可以研究的东西还是很多的,而且做一个banner是不难,难得是在短时间内做一个出彩的banner。

详细阅读>>

7款基于JavaScript/AJAX的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能

详细阅读>>

阿里巴巴UED团队谈“我的阿里”框架升级经验

“我的阿里”作为阿里巴巴用户的操作后台,在前面两年的时间里,从阿里助手,到工作平台,再到“我的阿里”,经过几次信息架构和整体的调整,搭建了现在的基础框架。

详细阅读>>

25款完美的组合色彩网页设计

毫无疑问,色彩是网站设计中一个重要的组成元素,如果你了解Color Theory,或是对颜色有点滴研究,你就知道人们对于色彩的反应相当主观,且各不相同。有些反应基于整体背景色,有些则根据个人的口味或是心理感受。 Color Theory是一门科学有助于我们的设计项目,在网站建设中同样如此。

详细阅读>>

9款超酷的css3&javascript效果展示

不经意间浏览到Mozilla旗下的一个网站DemoStudio,这里整理了很多CSS3 & Javascript效果,我从里面搜集了9个我感觉非常好的效果与大家分享。记得不要是用ie哦。

详细阅读>>

10个简单易用的 jQuery 拖放插件推荐

在这篇文章中,我们将给大家介绍10个使用简单的、基于jQuery的拖放插件,能够帮助你方便快捷的添加拖放功能到你的网站中。

详细阅读>>

炫酷移动应用必备的 6 种动态交互效果

如果想让你的移动应用更活泼更灵动,丰富的动态效果是必不可少的。这里主要为大家介绍六种常用的动态效果——转场、邀请、过渡、反馈、缩放和吸附。

详细阅读>>

10个让人印象深刻的 jQuery 手风琴效果应用

jQuery 是最流行的 JavaScript 开发框架,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。今天这篇文章向大家展示10个非常酷的应用 jQuery 手风琴(according)效果网站,一起欣赏。

详细阅读>>

移动网站设计要点及建站工具

“移动网页”是网站设计中的重要一环,随着能访问互联网的手机逐步普及,因此,大家希望能随时关注自己喜爱的网站。在本文中,我们将着重探讨网站开发/设计人员在设计简洁和专业的移动网站时必须注意的重要方面和技术细节。

详细阅读>>

交互设计是一种思维过程

最近常常收到一些童鞋们的来信,经常询问的问题集中在:如何成为一位交互设计师?应该学习那些软件?

详细阅读>>

移动应用界面设计模式 – 搜索、排序、筛选

很多信息类服务站点都是通过分类的方式来组织相关内容信息的,例如交通工具方面的卡车、货车、SUV等;而Greensheet这样的网站则是直接将售卖信息一股脑的堆在一个又一个的页面中,如果我(英文原文作者)想找点儿什么,真的必须挨个看下去。

详细阅读>>

响应式网页设计(Responsive Web Design)

移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

详细阅读>>

20个超强的jquery图片和多媒体展示插件

随着jquery的流行,一旦需要做图片或多媒体展示效果,前端工程师们首先想到的就是jquery,jquery强大丰富的插件库给各种展示效果的实现提供了方便,我不得不咱们jquery和jquery插件的强大。今天我们收集了20个超强的jquery图片和多媒体展示插件。

详细阅读>>

让产品与用户“心有灵犀”

设计互联网产品时,有时候我们只要细心观察用户的行为,就可以在一定程度上预见这些行为背后的目的。如果在此基础上适当加以设计,往往可以在一些体验细节上获得提升。

详细阅读>>

浅析·平面与网页设计的差异性

平面设计和网页都是设计,但区别又是那么大,那不就与大自然中的猫和老虎一样嘛,它们都属于猫科动物,但又不是同一种生物,有着很大的差别。

详细阅读>>