可咔酷 | 网络杂货铺

一个页面重构工程师眼中的“用户体验”

直觉 — Mon, 20 Feb 2012 08:08:34 +0000

在工业化设计融入人们生活的现今，用户体验一词就常常出现在人们的视线里，随着互联网web2.0时代的到来，大大小小的网站设计中也都开始关注用户体验的方面，对什么是用户体验（百度这四个字，比我写什么解释都好）就不做详细赘述了，相信大家比我了解的更加丰富。

用户体验从产品设计阶段便开始介入进来，如原型设计中交互模式设计、功能实现方式设计都融入了设计人员对用户的关怀，听过这样的一句话：“具有良好用户体验的产品，不仅仅取决于一个有着丰富交互设计经验的产品设计师，还与产品生产过程中的每一个环节是否都具备良好的用户体验意识有一定的关系”。

今天我想从一个页面重构工程师的角度出发，从两个方面去谈谈在我的工作中，我所理解的用户体验，以及我做了哪些和用户体验有关的事情。

一、从可用到易用的细节处理

1. 按钮、链接、导航菜单的鼠标触发状态、鼠标手型等

随着视觉设计的发展，对按钮、链接、或者导航菜单的表现方式变得异常丰富，比如:

这些图片丰富了对鼠标点击形式的视觉表现力。在基于功能可用的前提下，逐渐通过视觉渲染达到美化的效果，有了精美的设计图后，就需要页面重构工程师们加以切割，在代码化的过程中，通常要做如下考量：

可点击区域大小，例如（下图）尽管风格上似乎按钮只有10*10，但是在实现时，要考虑用户操作起来是不是很容易获取锚点，而不是点来点去找不到
鼠标操作类型的提示，鼠标输入提示、手型提示、文本区域提示、不可点击提示，尽管整个页面的视觉引导更重要，但用户在操作时，人眼一直跟随着鼠标或键盘的操作而转换，如果能伴随着正确的鼠标操作提示，更可增强引导作用。从而提升交互体验。
按钮风格的一致性，按钮当前状态和点击状态的统一，按钮按照功能所作的统一，

设计师天马行空的想象力，赋予了他们创造性，而我们既要保留他们的创造力还要抽象出一些共用特征，在我看来按钮类型有3种，如果能有效区分，对网站的整体风格的建立和强化交互感受方面都会有一定一致性，同时在页面构建过程中会抽离成公用信息，非常便于管理和维护。

1）如确认、取消等，可称之为贯穿型
2）如登录、加关注等，可称之为点睛型，这一型在实际工作中通常从视觉上都略强于贯穿型，所以会建议设计师做一定统一，有时候是风格上，有时候是结构上，再甚者就是大小比例上
3）如发博文、发微博等按钮，可称之为增强型，通常这个类型不会限制设计师按照标准类型去做，即便出来的是个异型，我们还是应该理解的。
4）最后就是无论哪种类型，都要注意是否有鼠标点击的hover状态，即便设计师没有设计，也要做出hover的交互效果，至少是预留，就我而言通常都是在原按钮颜色基础上调整一下颜色深度作为hover状态，大部分按钮我都会考虑做出交互效果，当然也有例外，比如活动专题中的点击区域，通常不会增加点击后的过分明显效果，如果非要做出一点效果，最多是调整一下文字本身的明暗度。（我承认我有些吹毛求疵）

2. 图片的alt解释信息

通常拿到设计需求，我会要求设计师帮助梳理icon，一般会分两类，功能型、注释型。同时要求两种类型图片的像素区间要各自保持一致性，这样一来设计师在整理的过程中就会意识到，有的文字没有必要加注释图片，有的是功能和注释类型的大小、风格可能不一致，梳理过程中设计师会去调整一下，同时也在创意的过程中渗透一些规则。

第一、二行是注释型，第三行是功能型

3. 因设计或排版而没有完全显示出来的文字信息的title提示

产品或用户经常抱怨“后面的文字看不到，这到底是什么内容？”之所以出现这样的情况，主要是没有考虑到文字信息出现的位置和当时这些文字的重要性，如果是图片瀑布流，那文字信息的作用只是索引而已，如果是文章列表页或视频列表页、甚至正文页这样的终极页面，标题名称是务必要全部展示的。所以为了避免折磨用户，一定要给显示不完全的信息增加title，在存在缺陷的情况下也能有让用户有些许安慰，否则你就太伤用户的心了。

4. 网站logo的权重设置H1、网站主要标题、标识的权重设置H2-H6、stong、em、b等(对搜索引擎的友好可读性)

考虑各个层面的用户体验，是为了让用户尽量全方位的感受到网页的无边界浏览，在视觉和交互充分发挥作用的背后，代码标签的选择，也从一定层面决定了用户是否能够更好的使用，目前的一些搜索引擎，如Google、Baidu等，在过滤网页信息的过程中，有一套机制去寻找你网页中的主要内容，那些对搜索引擎比较友好的标签会更有利于页面信息的抓取，在用户搜索的过程中，抛开企业间战略合作不谈，也会相对显示在比较靠前的位置（当然如果搜索引擎的广告效益非常好的时候，或许第一屏还是与你无缘，这……你懂的）

5. 网站字色的一致性，链接色、提示色、内容字色等（降低学习成本，培养用户习惯）

设计一套互动类产品（博客、视频、邮箱）或者用户功能型产品（消费类产品、资讯类产品等）同样面临着一个问题，用户习惯，人其实对规律会更容易产生安全感也更容易增加舒适性。所以在网页的设计过程中，统一视觉感受不仅让用户安心的舒适的去浏览图片文字音乐多媒体等信息，也能培养用户认知。

因此在设计师天马行空的创造力面前，我总是横亘在他们面前的那个规范和逻辑的卫斗士。当设计师天马行空的时候我是不会也不敢去干扰他们，但如果谁告诉我风格确定时，我就会站出来披荆斩棘，要求设计师给出一整套设计规范，例如：

• 链接色分主链接色和辅助链接色，建议不要超过2种，增加类功能区域除外

• 文字色也是主辅都要有，同样不要超过两种（其实有多少种都可以，但你要考虑用户花多长时间适应你的五花八门）

• 提示信息又分普通提示、正确提示、错误提示、空状态提示等

• 什么图标类型分为功能型图标和注释型图标

6. 各种内容读取花较长时间的模块，在内容尚未加载成功时，先显示图片图片列表页、或视频截图列表页面，在图片尚未加载时显示初始图片，并固定位置，防止满屏跑图

7. 提示性文字位置在不干扰用户操作的前提下，交互一致性很重要，如固定在某一提示位置或不影响操作的颜色提示等

在处理表单过程中，会考虑提示信息所在位置，包括默认提示，出错提示，正确提示等，如果提示风格不统一，会中断用户行为，页面表单填写过程中的流畅度非常重要，为什么会提起这一点，因为在实际工作中，如果没有交互设计经验，不论产品还是设计人员都经常会遗漏表单相关的各种提示信息，但这会影响页面构建过程中HTML的结构，因此如果前期发现产品文档，或者设计稿都没有表现出相关内容，不妨提醒他们务必考虑并添加好，减少后期调整页面结构的冗余工作量。

很多人会说这些不是页面范畴，那页面是什么范畴呢，这些知识有产品范畴的、有设计范畴的、有用户研究范畴的、有交互范畴的，在我看来会这些最大的好处是减少你的工作量，我认为这些都是很基础的知识，不是必须掌握的，但最好了解，了解的好处非常显而易见，就是面对不一定靠谱的需求时，可以有的放矢的给出一些意见，从而减少一些返工，或者细碎的体验的增加。

二、从慢慢等待到愉悦点击的变化

1.页面模块的按需加载

由于互联网产品发展愈来愈趋向于规模化和正规化，在早年间采用全站只加载一个公用样式的时代已经过去了，取而代之的是对性能更优的模块化按需加载模式，如上图所示，模块化显而易见的好处就是代码冗余相对较低，代码量也较小。除此之外模块化的好处还包括：结构清晰，易上手；频繁变更产品需求时的快速维护和开发；快速下线局部模块；动态调整页面模块加载优先级时，无需剥离任何代码；便于多人协同开发；降低多人协同开发时，互相覆盖代码；适合开发大型产品等很多优点。不论对用户，还是对维护开发都是非常有利的。

2.页面公用元素复用

所谓公用元素，主要指：: reset类型; 各类文字色; 各类链接色; 浮层框架; 页面主框架; 适用于本站的高复用补丁类型

3.文件调用的层级酌情减小、文件名酌情缩短

如，image/index/module1/limoumou/icon/fabiaopinglun.jpg 酌情优化目录层级

如，fabiaopinglun_default.jpg 、.CommentListContent_linedot{} 酌情优化文件名长度

4. 请求数量和背景大小均衡处理

图片请求数方面，有时候你要考虑CSS Sprite 拼合图片减少背景数，同时还要注意拼合图片K数不要太大，以及拼合图片注意纵横比，建议拼竖图（做过实验，同样内容，横图体积大于竖图）

当背景图片需要平铺时，请酌情考虑背景图片大小，比如1px高的虚线，请不要切一个1*2的小图，比如1*10,1*50，主要考量在于1*2的小图的平铺次数。

影响页面性能的因素还有很多，例如hack的使用、position的使用, table的使用等等……关键是保持技术的新鲜，丰富自己的知识。

以上文章只是沉淀了一下过往我在页面重构工作中所领悟的用户体验。略显肤浅，可能大家会质疑，为什么写页面的还要自己加图标状态或者修改局部效果，要知道在早期的互联网在分工上没有现在这样精专的分工，顶多分个前台、后台、产品。当然在当初这些事情不一定有如今的专业深度，但涉猎面的确较如今是更宽阔的。所以早几年开始从事网页制作的朋友，都不会对设计制作界定的那么明显，在图形图片处理方面也是有一定认知和操作能力的。不是为了显摆什么，只是觉得知识的深度和广度同样重要。

VIA:新浪UED

从 CSS Lint 出发，谈样式优化

直觉 — Mon, 20 Feb 2012 07:55:32 +0000

CSS Lint,lint是线头的意思，大概意思就是说要找出我们写的css代码里的一些线头，help you code better!

CSS Lint的检测规则包括错误的和警告，当选择器或属性书写不正确、漏掉了大括号、多写了分号等时，会提示解析错误，解析错误优先提示。为了让css代码拥有更好性能，更标准，CSS Lint还默认有如下规则：

1.不要使用多个class选择元素，如a.foo.boo，这在ie6及以下不能正确解析
2.移除空的css规则，如a{}
3.正确的使用显示属性，如display:inline不要和width，height，float，margin,padding同时使用，display:inline-block不要和float同时使用等
4.避免过多的浮动，当浮动次数超过十次时，会显示警告
5.避免使用过多的字号，当字号声明超过十种时，显示警告
6.避免使用过多web字体，当使用超过五次时，显示警告
7.避免使用id作为样式选择器
8.标题元素只定义一次
9.使用width:100%时要小心
10.属性值为0时不要写单位
11.各浏览器专属的css属性要有规范，

例如.foo{-moz-border-radius:5px;border-radius:5px}
12.避免使用看起来像正则表达式的css3选择器
13.遵守盒模型规则

在实际项目中很多规则还不是很合理，比如避免IE6的双倍边距bug有时候要用到display:inline;

我测试了最近项目中的两个css文件，警告主要出现在以下方面：

1.width:100%

当宽度设置为100%的时候，CSS Lint会给出警告
2.盒模型错误

好像width和height不能与padding和border同时使用，为什么会这样呢？很怪异
3.多余的标签

比如a.class,CSS Lint会建议你直接使用.class,如果使用了a.class，会警告
4.显示属性错误

比如display:inline与float一起使用时，会警告

看到这里，也许你会说这一款检测工具还不够成熟，的确，它的解析错误检测，空规则检测，属性值为0带单位的检测挺不错，其余的可能有一点差强人意，但它的检测规则一直在不断丰富和完善中，同时你也可以提交规则，并且最重要的是，现在，你已经可以自己设置，关掉一些不需要的规则

这个时候，CSS Lint就会显得好用很多。

假以时日，我相信CSS Lint会越来越强大的。More and more Strong, Smart and Useful!

在线检测地址：http://http://csslint.net/

25个优秀的导航菜单设计

直觉 — Mon, 20 Feb 2012 07:48:13 +0000

大型菜单（或者叫巨型菜单）经常被那些有着相当数量的网页为用户导航的大站所采用。它不只是一个下拉列表，而是一个打开更大区来提供更多选择的超级菜单。虽然大型菜单在网页设计的发展趋势。对于涉及大量的网页和/或产品的网站，一个大型菜单可能能提高导航和可用性。

大型菜单常见的电子商务网站，因为它们通常包括了很多不同的产品类别，这样大型的菜单可以为访客非常有用的。虽然大型菜单能让用户以较少的点击次数进入到网站更深处的页面，但如果不好好规划设计这个大型菜单，也有可能让用户没有头绪。出于这个原因，我们应当十分注重大型菜单的友好性设计。在这篇文章中，将为您带来25个设计优秀的大型菜单案例。

Little Kids Bedrooms

OfficeMax

Office Depot

Action Envelope

ASOS

The Sak

Nike

Adidas

Etnies

Target

REI

House of Fraser

Northern Tool + Equipment

Food Network

Martin + Osa

Quiksilver

Might Leaf Leaf

Lucky Brand Jeans

B&Q

3 Suisses

Like.com

Spread Shirt

Walmart

Rampage

mydeco

VIA:designm

20个优秀实用的 CSS3 和 HTML5 工具

直觉 — Mon, 20 Feb 2012 05:28:53 +0000

1. Sencha Animator

用标准的网页技术打造超炫的动画，Senchar Animator使用CSS3来打造动态的文字和图片，流畅的变换，阴影，渐变等效果。

2. CSS LINT

这个工具可以帮你找出你CSS中的问题。不光是语法错误，它还能指出你的代码写的不合理的地方，或者不高效的地方。

3. Normalize.css

Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。

4. Spritemapper

Spritemapper 是一个组合不同图片并生成 CSS 位置代码的工具。

5. holmes.css

这个CSS可以帮你找出你网页中写的不标准的HTML代码。

6. prefixMyCSS

这个工具可以帮你的CSS代码添加前缀。

7. Sprite Cow

这个工具可以帮助你创建CSS Sprite。

8. Patternizer

这个工具可以帮助你创建复杂条纹图案的CSS。

9. Prefixr

这个工具可以帮助你创建跨浏览器的CSS代码。输入你的CSS代码，然后勾选一些选项，它就会生成各个浏览器兼容的CSS给你。

10. Patternify

这个工具是一个简单的CSS生成器。你可以直接在它的网页上画出你想要的样式，然后它就会生成相应的CSS给你。

11. CSS Shapes

这个工具可以帮你用纯CSS来生成各种图形。

12. Initializr

这个工具可以帮助你生成一个标准的HTML5网页模板，然后你可以基于这个模板完成你的网页。

13. Gury

Gury 可以帮助你创建基于 Canvas 的动画。

14. oCanvas

oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象，并且创建这些对象的动画。

15. Modernizr

Modernizr 是一个利用 JS 和 CSS 来检测浏览器说支持功能的小工具。

16. Response JS

Response JS 是一个轻量级的 jQuery 插件，用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的环境动态替换HTML代码。例如根据屏幕大小，动态的替换img标签的src地址。

17. Mercury Editor

这是一个全功能的 HTML5 编辑器，可以帮助你的团队在浏览器中编辑文档。

18. Sugar

Sugar 是一个JavaScript库。它扩展了现有的JS对象的方法，让你可以用更少的代码做更多的事情。

19. Buzz

Buzz是一个用于操作HTML5音频标签的JavaScript library 。它是一个没有用到其它JavaScript框架独立Library。并拥有丰富的API可以用来管理这个音频标签提供的所有功能。支持的功能包括播放、暂停、停止、循环和音量控、取得音频信息、判断音频类型是否支持、可同时处理多个音频文件。还可以取得播放结束、错误产生或音量变化等事件。

20. Recurly.js

Recurly.js 是另一个 JS 实现的表单美化插件。

VIA:开源中国社区 [http://www.oschina.net]

12款免费的WordPress主题

直觉 — Thu, 16 Feb 2012 07:12:30 +0000

对于WordPress用户来说，想找到一份满意的主题非常困难。是的，网上是有很多WordPress主题，可是很多都是半成品或者收费的。

今天要介绍的是12款免费的WordPress主题，这些主题都来自于site5这个网站，都很不错。

网站地址：http://www.site5.com/wordpress-themes/

可以点击主题缩略图右上方的 Live Preview 进行效果预览。

向Google学习打造灵动的web体验

直觉 — Thu, 16 Feb 2012 06:27:17 +0000

Google的设计一向以简单著称，让页面清爽优雅地呈现，一方面节省了页面载入的时间，减少用户的等待，另一方面也减少了用户在浏览页面时的分心。然而，在这简单的设计背后，并不是设计师偷懒，而是更加灵敏、细致、轻便的交互体验设计。Google+作为社交网络的又一力作，在继承了公司著名的十大设计准则下，在如何更轻、更快速、更人性化方面有了很大的突破。本文主要以社交网络为例，分析总结出了六条让web体验更灵动的设计方法，供大家参考。

1.图形化的导航

社交网的信息十分繁杂，因此导航的引导就显得至关重要。没有公司比Google更大胆了，将导航的tab全部简化成icon，只有鼠标hover上去的时候才会显示这个tab的注释。显然，这对新手用户而言，有一定的学习门槛的，但是我们从中无不从中感受到了简洁的力量，图形化导航让整栏显得干净整洁，功能集中，切换方便。

纵观国内外几大主流社交网的导航，导航大多采用的是文字，虽然从功能上看一目了然，但是由于文字本身不够简洁，排布起来有局限，那么只好在设计的时候，更要考虑功能的归纳分布以及优先级展示，隐藏不常用的功能。

2.使用灰色按钮

经常做设计的人都知道，灰色按钮代表着是被禁用的功能，是不可点击的。然而Google+却大胆的使用了灰色按钮，通过鼠标hover告诉用户这是可点的。仔细想来，这用做以下两个原因：一、平衡了页面的配色。由于Google的logo主题色有四种，如果让按钮们默认展示原有的颜色，页面会看起来很花，没有重点。像这样灰掉的处理，使选中的tab更加突出，也不会带来干扰。二、按钮由灰点变彩色的方式给人一种点亮图标的暗示，增强了用户点击按钮的欲望。

从图标的发展趋势来看，无论颜色还是形态都是朝着简洁方向走的，过去花花绿绿的图标已经失去了它原有的标识感，纯色的图标应用起来会显得更上流，更高端。

3.鼠标所到之处均有反馈

网页上的大多数元素，在鼠标滑过的时候，都应该有其相应的反馈。无论是仅仅发生鼠标指针变化，还是出现下划线，或是结合一些简单功能的操作和注释来显示。设计师在做静态设计稿时，很容易忽略这些设计细节，但这正是一个产品体现良好交互性能的关键时刻。就好比和人交谈，如果他对我的话语没有任何反映，我也会减少对他诉说的兴趣，如果他时而点头，时而微笑，时而赞许，那么我可能会有更多更有意思的事情告诉他。因此，哪怕仅仅是边框的颜色变深了一些，也能表达这个页面对用户是友好的，而不是不理不睬的。

hover态是展示用户在当前页想知道的相关内容的最佳时机。例如鼠标划到头像时，会出现那个人的相关信息等。Hover态还可以对某一模块有强引导的作用，例如Google会强调它的搜索功能。另外，还可以用于隐藏一些不常用的操作，例如删除等。

4.简单任务在当前页完成

这里最值得一提的是Google+加好友和分组的流程优化。原本加好友和分组是两个独立的任务，分组是在对方同意加好友时才能进行，由于Google+推出的是单向关系链，因此将分组可以提前到添加好友这一步做。原本加好友是需要点击按钮，如今只用hover上去就会出现分组框，大大降低了加好友和分组的操作门槛。用户最少只要点击一下即可完成两步步骤。如今Face book等一些双向关系链的社交网也开始学习这种快速加好友和分组的方式。

5.feed实时滚屏更新

Feed就是我们的每天订阅的新消息。相信大家对下面的小黄条都不陌生吧，国内大部分网站都是采用点击小黄条来查看新的消息，而Google+是自动滚屏的方式展示最新消息，并在左侧出现一条蓝竖线，表示是最新更新。Google的设计之所以显得灵动，还有一个重要的原因，在于它的这些状态的改变都伴随着优雅的动画，而不是赤裸裸的出现、消失。包括feed的评论和赞，都是实时更新，配上简单华丽的动画，简直就像在看现场直播。

6.即时的系统反馈

类似上图中的提示条在整个网站都是统一一致的，它们都是自动出现，自动消失，有的还肩负着简单的操作，例如图中的撤消等。有了这样轻便的系统反馈，就不会再出现弹窗等很重的反馈方式，页面的交互就显得轻便流畅许多，无时无刻不在安抚着用户焦躁的情绪。

综上所述，本文从灵敏轻便的角度，对Google+的体验进行分析，总结出以上六点让web更轻便灵敏的设计方法，希望能给大家带来一些参考。

VIA:腾讯CDC

25个优秀的运用彩虹元素的网站设计欣赏

直觉 — Wed, 15 Feb 2012 09:29:58 +0000

彩虹好像很多年没有看见过了，在网站设计中加入彩虹元素大多表现在页面的大背景中，这样的设计会非常的醒目，用户打开页面的第一时间就会被大胆的设计吸引住，或许你可以尝试这样的设计。

25个优秀的彩虹元素在页面设计中使用的案例，希望你会喜欢(猛击网站截图可以直达网站页面)

50个漂亮的手绘风格的网站欣赏

直觉 — Wed, 15 Feb 2012 08:58:59 +0000

手绘风格的网站貌似已经开始流行，这类风格可以让网站变的个性、独特，而且还能从一定程度上显示出设计师的功底。

下面的是50个漂亮的手绘风格的网站，希望你能从中得到一些创作灵感。

25个非常优秀的黑色调网站

直觉 — Mon, 13 Feb 2012 09:26:01 +0000

黑色是一个很强大的色彩。它可以很庄重和高雅，而且可以突出其他颜色。在网站设计中，我们经常会看到黑色的网站作品，而且大都非常引人注目。

黑色是几乎所有颜色的好搭档。它让其它颜色看起来更亮。即便是暗色系的颜色也会和黑色很有效。和白色搭配可以提供很棒的对比。下面是25个非常优秀的黑色调网站，设计的都非常棒，值得一看！

20+免费的电子产品设计相关素材（PSD格式）

直觉 — Fri, 10 Feb 2012 09:32:29 +0000

新年上班这么久了，第一个双休日终于来了。搜集了20多个电子产品设计相关的PSD格式素材，而且这些都是可以免费下载的，包括苹果系列产品以及摩托、三星、sony等的PSP、平板、还有黑莓等等。

您可能也喜欢：
从 CSS Lint 出发，谈样式优化	知名技术站InfoQ2010年前端技术总结	WEB前端常用的十种技术应用	CSS+DIV重构与SEO	设计师攻略：十招让你的作品更具吸引力
无觅

您可能也喜欢：
O 讓Adobe來告訴你CSS3跟HTML5有多酷 (@mydesy)	[工具]15種CSS與HTML語法產生器 (@mydesy)	20个优秀实用的 CSS3 和 HTML5 工具	一个页面重构工程师眼中的“用户体验”	10个强大的免费CSS3工具推荐
无觅

您可能也喜欢：
Mathieu White UI 作品欣赏 (@mydesy)	50个漂亮的手绘风格的网站欣赏	50+优秀的企业网站设计实例	网页设计的对比原则	20+注册表单设计范例
无觅

您可能也喜欢：
O 讓Adobe來告訴你CSS3跟HTML5有多酷 (@mydesy)	[工具]15種CSS與HTML語法產生器 (@mydesy)	23个优秀的HTML5/CSS3教程	从 CSS Lint 出发，谈样式优化	3 款强大的 HTML5 游戏快速开发工具推荐
无觅

您可能也喜欢：
原來月曆可以這樣做 (@mydesy)	蒐，超質感Old Paper．泛黃舊紙張素材15組 (@mydesy)	30款免费的WordPress主题，附下载地址	15个简约不简单的WordPress主题	23个房地产类wordpress皮肤主题
无觅

您可能也喜欢：
Google 的逐格動畫 (@mydesy)	[HTML5]Google 首頁的電吉他解密 (@mydesy)	25个优秀的导航菜单设计	22个木质纹理风格设计的网站	20个优秀的移动(iPhone)网站设计案例
无觅

您可能也喜欢：
城市中的彩虹 (@mydesy)	藍+白+紅 (+黃) = 史上超威配色 (@mydesy)	25个非常优秀的黑色调网站	网页设计中留白与白色的使用范例	25个优秀的导航菜单设计
无觅

您可能也喜欢：
法國設計師們的配色魔法 (@mydesy)	藍+白+紅 (+黃) = 史上超威配色 (@mydesy)	25个优秀的导航菜单设计	25个优秀的运用彩虹元素的网站设计欣赏	50个漂亮的手绘风格的网站欣赏
无觅

您可能也喜欢：
Mathieu White UI 作品欣赏 (@mydesy)	12個常用的icon搜索站點 (@mydesy)	Futurico--一个免费的用户界面设计素材包	30个免费的UI设计资源下载(PSD格式)	Twitter GUI设计包免费下载(PSD格式)
无觅