我想网 » Design

比如一个404页面如下：

Art从平面视觉角度会给出这种图图：

而前端要把它拆解成需要的盒模型，即结构+表现模块化，拆解后的图应该是这样的：

如果真要做成这样那前端得兴奋得跟磕了药一样，做完页面出去逛逛街买买下午茶，不过我想设计师做鬼都不会放过我的⊙﹏⊙ 上午的视觉规范部门分享会刚好提到这个问题，心里小小滴YY了一下，决定写给Art们和有志做Art的同学看O(∩_∩)O

1. 这个任务的设计稿比较简单，我先拿来做个范例，LSL同学不要想太多，哈哈＾＾
2. 第二张图（箭头版）对前端来说有用的地方没有几处（再次强调：LSL同学不要想太多），比如Ctrip全站行高1.6，内外补丁是不会贴着文字上下基线走的，所以切图的时候要精确到像素还原设计稿还是要自己量一遍；
3. Art和前端对于结构的理解毕竟不在同一范畴，比如什么地方用margin、什么地方用padding就不能写死在设计稿上，如果Art真到了这地步那前端基本就可以直接去6楼了（在Ctrip，6楼是个神奇的地方，可以解决部门内外一切争端，绝无后患－－人事部离职办理专柜╮(╯_╰)╭）；
4. 既然是这样，那我们可以考虑一个折中方案：
a. 前端充分了解业务需求，考虑扩展性，适当灵活一点，毕竟在Firebug里调像素值要比Photoshop快多了。工作的重点不在像素值，而在于需求，我们不是冷酷无情的Coder，而是有情有义有实现能力的艺术家 ♡_♡
b. Art空下来的时候可以关注一下盒模型，尽量使间距对称，行高神马的只在规范里写就好，设计稿就不用量了，只要把模块框出来就可以，其它的全都丢给前端吧 ┭┮﹏┭┮

借用一下豆瓣前端kejun关于UI规格标注里的一句话：Design is about how it works, not just how it looks.

标签：Design, Design, Programmer, 前端开发

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

名片创意设计

seasun — Tue, 27 Jul 2010 14:22:28 +0000

日本Tamiya公司的名片创意设计，可以把它分成小块，可砌成賽車、飞机及飞船。

标签：Design, Design

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

20免费的Web UI元素工具箱和模具

seasun — Sat, 24 Jul 2010 14:35:55 +0000

毫无疑问，每个 Web 设计师都在 UI 设计上费尽了心血，即使这样，资源的匮乏，视野的狭窄，也常常让他们的呕心沥血之作并不为人看好，事实上，UI 设计并不需要闭门造车，很多 UI 元素是通用的。本文收集了 20 套非常前端的 UI 元素库，它们多数是可以后期修改的 PSD 或 SVG 版。

Modern Web UI Set (.psd)

这套 UI 库包括了从按钮，到渐变，到文字各种 UI 元素，非常整齐地存放在不同目录下，由于是 PSD 矢量分格式，里面的任何元素都是可以修改的。

Massive Web UI & Button Set (.psd)

这套 UI 元素库包含3种风格，水晶，渐变色，单色，渐变色还包含7种颜色组合。

Web UI Element Pack (.psd)

包含 19 个 UI 元素，从加载进度条，到按钮，到页码，到滑动条。

Web UI Wireframe Kit (.psd)

这套 UI 库中的元素全部基于 Photoshop 矢量图案。

Browser Form Elements (.psd)

如果你想设计浏览器，会发现这套 UI 很有用（设计浏览器在国内很时髦，是不是）。

Web Page Elements (for Omnigraffle)

这套 UI 库几乎包含了全部常用 Web 元素，Header，表单元素，图标等等。

Wireframe Kit (Google Drawings)

这是一套用于 Google Drawing 的 UI 库。

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

这是一套用于原型草图设计的 UI 库，包含的元素有表单，图标，指示器，反馈消息，工具提示，导航元素，图片框，内嵌视频，滑动条以及广告 Banner，包括 Illustrator 和 SVG 两种矢量格式。

Wireframe Symbols (.ai)

这套 UI 包含一个 Illustrator 符号库和一个 Illustrator 文件，可以用来创建设计原型。

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

Yahoo! 为 Web 设计师们贡献过很多好东西，包括著名的 YUI 框架，还有这套 UI 元素库，包括广告单元，日历，图表，表单，网格，菜单，按钮，导航等等，提供多种矢量和非矢量格式。

Ext JS v3.0 Stencil (for Omnigraffle)

这是一套用于可以著名 JavaScript 框架 Ext JS 的 UI 库。

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

这套来自 Liquidicity 海量图标库包括 5 种不同配色。

Flex 3 Stencil (for Omnigraffle)

这套流程图 UI 包含 Flex 3 风格的面板，表格，按钮，链接，菜单，滚动条，手风琴式菜单，选项卡等等。

Twitter Widget Stencil (for Omnigraffle)

Twitter 相关的 UI 图库。

Web Designer Toolkit (.psd)

这个 PSD 格式的 UI 库包含非常整洁的 Web 元素库。

Facebook GUI (.psd)

大名鼎鼎的 Facebook UI

Facebook Applications (Omnigraffle)

如果你要创建 Facebook 应用，这套 UI 库非常有用。

Web Elements Kit (.psd)

这套 Web 元素库包括 17 个模块，每个模块包含四种配色。

Flex Darkskin UI (.psd)

漂亮的 Flex UI 皮肤。

WEB UI Treasure Chest

非常值得收藏的 Web 元素库，卷边效果很漂亮。

标签：Design, Design, Tool, Tool, Web, WEB

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

40个专业且详细的基于网络布局的PSD模板

seasun — Sat, 24 Jul 2010 13:22:32 +0000

查找高品质且免费的非常有创造性的PSD网页模板资源已经变得越来越难了，而很多优秀的资源都是为那些高级会员而提供的。这是完全正确的，没一个设计师都应该获得他们应有的报酬。话时这么说，但这样以来你就无法搭乘免费获得高品质的列车了…

这也正是我们发布这篇文章的原因，在此，我们收集了40个专业且详细的基于网络布局的PSD模板。

某些免费的模板都有伴随着一个教程，介绍该模板是如何创建的。但是，基于本篇文章的目的所在，我们只关注那些提供有源文件，并且是可自由使用的免费.psd模板。

40个专业且详细的基于网络布局的PSD模板

标签：Design, Design, psd, Translate, Translate, Web, WEB, 素材分享, 翻译

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

美化你的Google阅读器

seasun — Mon, 19 Jul 2010 15:40:02 +0000

是不是喜欢使谷歌阅读器有美丽的外表？现在就下载FeedSquares，然后你就可以以时髦的风格阅读你最喜欢的文章。它美丽、简单易用并且得到了google公司的认可——Google的Chrome团队认为这是最好的扩展之一。如果你不使用谷歌浏览器，那么这里有一个你为什么要使用它的理由。

Google公司已经将谷歌阅读器的默认界面做的相当出色了。但是多年都使用一个界面的你，可能想换一个口味。如果你很在乎视觉体验，或者想看一看“HTML5″能做什么，或者仅仅是想尝试一下新鲜的、漂亮的东西，那么你应该下载 FeedSquares！

FeedSquares和你在谷歌阅读器中的订阅以及条目的读/ 加星标状态完全同步。它给你一种视觉的、个性化的并以图像的方式浏览文章的体验。它还为您给您的订阅者、twitter和其他相关的应用的分享提供了方便。

尽管使用起来很方便，但是我们也提供了一种方式来统计未读条目。下一个版本中将会加入快捷键功能。

因此，新闻和RSS爱好者，请将您的建议和使用体验反馈给我们。并希望FeedSquares能给大家带来愉快的体验。Chrome下的FeedSquares请点击下面的按钮下载：

哦，对了，我们还有一个Android下的测试版本。由于它还处于早期开发阶段，所以请慷慨的将反馈告诉我们，并且还请原谅它的不足。

下载链接：

Chrome 下的FeedSquares

Andooid下的 FeedSquares

标签：Design, Design, Google, Tool, Tool

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

10 款很好看的博客名片

seasun — Mon, 19 Jul 2010 15:17:32 +0000

名片已经成了一种文化，设计千奇百怪，不同行业的人设计不同的名片。

以下是 10 款不同的博客为自己设计的名片，风格迥异，但是又都很好看。
1. 丰富型

这张博客名片的正面不仅包括了图片、头衔、标识，而且还包括了网站地址、邮箱地址以及 Twitter、Facebook 和 LinkedIn 的帐户地址。

名片的背面则附有该博客所经营的网站以及个人通讯地址和联系电话。

名片来源：Davidrisley.com

2. 标签型

这张博客名片的独特之处在于底部列出了一些标签（tag），并且每个标签的颜色或者大小都不一样。

名片来源：Flickr.com

3. 对半型

这张名片的右边是该博客的照片，左边是该博客的文字介绍，包括头衔、电话、邮箱和网址。

名片来源：Flickr.com

4. iPhone 型

该博客大概是一位超级 iPhone 爱好者，连自己的名片都 iPhone 化了。

名片来源：Flickr.com

5. 卡通型

左边的卡通人物和颜色的搭配使得这张名片看起来非常舒服。

名片来源：Tylercruz.com

6. 简约型

这张名片上面一共只有四行字，第一行是名字、第二行是职业、第三行是网址、第四行是邮箱，简约而不简单。

名片来源：Flickr.com

7. 大字型

这是一张对折名片，一边用特大字体印博客名称，另一边用较大自己印博客的标语。

名片来源：Flickr.com

8. Twitter 型

这个博客看来比较喜欢别人通过 Twitter 联系他。

名片来源：Mashable.com

9. 胶卷型

把名片印在胶卷上，很符合该博客是个摄影师的职业。

名片来源：Flickr.com

10. 对称型

这张名片的内容分成三部分，右边是 Logo，左边上半部分是名字和头衔、下半部分是网址和联系方式。

名片来源：Flickr.com

下次设计个人名片的时候，我将会参考以上 10 个博客的名片。

标签：Design, Design

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

33个非常漂亮的游戏网站欣赏

seasun — Sat, 17 Jul 2010 05:11:08 +0000

现在有越来越多的游戏问世，游戏的画面，视觉效果和可玩性也做得越来越好。作为游戏的一个宣传手段，游戏的官方网站起到了一个绝对重要的角色。这里，我们收集了一些非常不错的游戏官方网站，这些收藏包含了各种各样风格的界面。希望会给你带来灵感～

Zac and Wiki

Patapon

View Source
Professor Layton and the Curious Village

Transformers: Revenge of the Fallen

Left 4 Dead

Afro Samurai

Super Mario Galaxy

Star Craft 2

Ragnarok Philippines

Splinter Cell Conviction

God of War

Resident Evil 5

Little Big Planet

Diablo 3

Bioshock

I Am Alive

Star Wars – The Force Unleashed 2

Batman – Arkham

World of Warcraft Wrath of the Lich King

Assassin’s Creed 2

World of Warcraft Catatylsm

Uncharted

Motorstorm Pacific Rift

Bioshock 2

Muonline

Moto GP

Halo

Tekken 6

Guild Wars Franchise

Driver San Francisco

Ghost Recon Future Soldier

Assassin’s Creed Brotherhood

Super Mario Bros. Wii

标签：Design, Design, Game, Website, Website

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

50个令人叫绝的字体排版画像

seasun — Thu, 15 Jul 2010 15:06:56 +0000

现在这种字体拼图创意人像的设计形式出现的很多了，这种形式使得整个画像更具艺术感，体现出作者细腻的功底，更让人叹为观止！

标签：Design, Picture, 娱乐

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

泛泛而谈界面中的斑马纹设计

seasun — Thu, 15 Jul 2010 04:25:54 +0000

大家好，我叫斑马纹

列表中使用两种相同的样式但颜色不同的背景，来间隔显示的内容。
当然这个释义我是借鉴《designing interfaces》来的，略有不同。我肯定承认这是一本神作，不过看了当下很多界面以及自身平时的设计之后，发现实际情况中使用的斑马纹在原来基础上通过视觉的处理有了扩展，不仅仅是一深一浅单纯颜色的配合使用。

图一：最正宗的斑马纹应用

图二：斑马纹的延伸 – 内容高度不一致的应用

图三：斑马纹的延伸 – 增加线条的分割

图四：斑马纹的延伸 – 仅使用分割线

图五：斑马纹的延伸 – 单行颜色渐变形成的错落分割

图六：斑马纹的延伸 – 仅仅使用留空来分割（有一种神交的感觉）

什么时候你该披上我：

斑马纹的使用是当在列表中，各行的内容（每一行中又有多行内容）甚至有多列数据在视觉上很难区分，起到一种规整的作用。从而使用户在阅读每一行的单个甚至多列内容时形成联系。

有时候在带有标题的内容时同样使用深浅颜色作为区分，形成斑马纹的效果。比如picasa的内容区设计。当然这是一种特例，但细心留意，却也在被流行开来。

图七：picasa的斑马纹特殊用法

斑马得皮肤病了

为什么会去尝试对斑马纹做个了解，其实是最近会收到这样的反馈：“斑马纹搞得我文字看不清啊！！！”“啊，这里原来还有颜色啊”“太不舒服了”……我对我的行为深深的陷入了自责，因为设计的结果把大家给激动坏了（当然我的出发点绝不是这样的）。好吧，那怎么办，调一调，调一调。我相信调节结果会有另一部分的人出来说“啊，好深啊，”“啊，好乱啊，看不清内容啦。”对于每一位用户的意见都是应该尊重的，当然通过一定的方式大家就不会对这个结果有太大的异议，也许是习惯，也许是淡忘，也许是出现更加激动的东西，也许还有其他什么我不知道的原因，但作为一名有良心的设计师，我决定对斑马纹的设计做一个泛泛的了解。

斑马你长的好奇怪啊。

我是个务实的人，问题的关键点在于斑马纹的两个颜色之间的色值差异。所以文章也仅仅是对这做一分析。

不同斑马纹从内容表达上都有他自身特定的含义。而从规整每一行的视觉角度出发，斑马纹和线条的分割是一个不错的选择，如果两者同时使用，未尝不可，但两个拳头同时发力，总是看的费力，用的也比较复杂。除非线条被用的很轻，好比两拳同时出击，其中一个虚晃一枪，仅为迷惑用，也其当好处。但在一行之中又有多列的情况，线条形式的缺点就会暴露无遗，显的条条框框局促不安，尤其在某些界面全屏的时候，内容却被用户舍不得用去几行，中国人省吃俭用的一面可见一斑。因此从视觉的简洁上看来斑马纹的深浅搭配是一种首选。

其实包括很多设计师在设计斑马纹的时候，基本是自身的感觉，这个感觉是对整体色调和相关元素色调的分析后的主观感受（包括我）。同时斑马纹的两种颜色基本是两个调性一致，颜色相似的两个颜色。但我认为不管是何种颜色的为基点调节的斑马纹，他们之间的明暗值都会在一定范围值之间。范围值小了，则斑马纹模糊不清起不到应有的作用，范围值大了，则跨越太大从而干扰到用户对内容的阅读。

如何把唐僧的白马画成斑马

寻找斑马纹界面比较费神，首先想寻找各个系统中的界面，其次寻找具有代表性的产品，因为他们具有相对较高素质的设计师，相对成熟的设计观念，及相对完善的设计规范。

发现微软的产品是基本不使用斑马纹的，一般通过感觉和用户进行神交。而win系统中的一些其他软件的斑马纹设计基本来源于对苹果的参考，但是否遵循一定的原则，就不得而知了。而苹果的界面一旦出现列表时就肯定使用分割，但表现的方式略有差异，大界面基本使用双色斑马纹，小屏幕基本使用线条分割，这和google设计的产品思路如出一辙。因此搜寻的案例基本集中在苹果系统下的大屏幕界面。

斑马纹的深浅两种颜色根据整体色调和界面色彩搭配的习惯性给出一个使用的建议：

1．当界面的主色调为浅色的时候，斑马纹的浅色基本使用白色，斑马纹的深色以界面主色调为基准点保证色调的一致并进行调整。（图八左）

2．当界面的主色调为深色的时候，斑马纹的深色基本使用主色调一致的颜色，斑马纹的深色以界面主色调为基准点保持色调的一致并进行调整。（图八右）

图八：界面主色调影响下的斑马纹色彩基本样式

那我们来分析下界面斑马纹深浅两种颜色的范围值：

图九：mac系统界面的斑马纹颜色

Mac系统中本身的界面都采用此种深浅颜色的搭配，无论内容是否复杂，无论高度是否一致，在白色为基准下，两者之间的仅作纯度的变化，相差7% 的间隔。同时每一行的高度和内容相对比较统一，但每一行有多列的现象。

图十：mac系统软件浅色界面的斑马纹颜色一

Mac系统中例如itunes的界面的斑马纹，两者颜色的差异小于系统自身的界面，纯度相差3%，明度相差2%，两者同时混合作用。同时每一行的高度和内容相对比较统一，但每一行也有多列的现象。

图十一：mac系统软件浅色界面的斑马纹颜色二

Mac系统中的其他软件界面中出现的斑马纹分割，两者都是小界面，皆是明度的变化，左图颜色值的明度相差6%，且一行有多列现象，但列数相对大界面要少。中图颜色值的明度相差2%，只有单列，每一行内容相对集中。右图颜色值明度相差7%，纯度相差1%，每一行内容比较内容相对统一。

图十二：mac系统软件深色界面的斑马纹颜色二

Mac系统中斑马纹在深色界面中的表现，为imover与itunes为系统中的同类软件。两者的间隔颜色的差异小于系统自身的界面，纯度相差 3%，明度相差2%，他们的间隔方式和itunes一模一样。每一行比较规整同样有多列现象。

图十三：Ipad app浅色界面的斑马纹颜色

Ipad上itunes播放器的界面，除了深浅颜色的分割，还增加了分割线的使用，两者的间隔颜色所以比较的适中，纯度相差1%，明度相差 4%。每一行很内容统一，且有多列形式，同时每一行之间的底图空隙比较大。

图十四：Ipad app灰色界面的斑马纹颜色

Ipad上nytimes的界面，除了深浅颜色的分割，同样增加了分割线的形式，两者的颜色相差也很适中，纯度相差2%，明度相差2%。单行，每一行内容很多，但内容分布比较统一。

图十五：斑马纹延伸应运的颜色差异

Iphone上的两个特殊斑马纹的应用，在此不做比较，仅作参考。受限于单个底色的渐变形式，势必会出现两个内容之间的线条分割，左图每一行内容比较统一，两者颜色仅为明度变化相差8%。右图的内容和每一行高度并不是绝对的统一，两者颜色比较平缓，纯度相差3%，明度相差4%。

将上述的结果进行总结用一个图标的形式来表达这个概念：

图十六：斑马纹使用参考表格

根据图表中的描述：基本上的界面斑马纹深浅的间隔落在了差别适中的区域（绿色），但也有落在差别弱化区域和差别增强区域（当然适中区域中的点也是有分布倾向的），如果界面面积越大，每一行的内容越多，且越不统一，同时每一行的高度的不一致也更强，每一行的列数也越多，同时又不借助其他的辅助元素，他们界面斑马纹的颜色间隔就越大。反之亦然。

在此复述：斑马纹的作用是将列表中每一行的内容进行区分，起到一种规整的作用。根据上述界面的分析，在一般情况下，仅使用颜色的“适中”间隔能满足这一需求，但在实际情况中根据界面的面积，每一行内容的复杂和统一程度，每一行的高度是否一致，每一行之间的留空多少，是否具有多列情况等诸多条件对这个“适中”进行倾向的调整。同时界面的诸多条件不可能同时作用，存在相互增强和相互抵消的情况，需要通过设计师自身能力和界面本身的实际情况进行判断。

斑马斑马牵出来遛遛

最终把斑马牵出来，对斑马深浅的颜色做了一个分析，两者间隔的点落在了差别适中的区域，同时靠近弱化区域的边际。

图十七：微薄客户端的斑马纹在参考表格中的位置

同时再来看看界面的实际情况，微博客户端的界面应该是一个中等面积的界面，每一行的内容较多，虽然只有单列，但内容非常的不一致，同时导致了每一行的高度非常的不统一。按照先前得出的结论，这样的斑马纹的颜色间隔显然是有点太弱了，间隔的点应该落在适中靠近增强边际的区域。

再回过头来看看用户的反馈，惊叹啊，惊叹啊，群众的眼睛果然是雪亮的。其实对斑马纹的间隔增加3%我想就应该能解决大家的问题，斑马纹也能起到他应有的作用，同时不会干扰到信息被顺利的获取。

好吧，斑马，咱拉回去调一调，调一调。

标签：Color, Color, Design, Design, Product, Product

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

网站导航设计的6大分类

seasun — Mon, 12 Jul 2010 14:15:47 +0000

导航是网页设计的重点，我们在设计一个网站的时候，常常从导航入手，不夸张的说，导航的设计甚至决定了整个网站的风格。这就需要我们平常多留心收集优秀的案例，在需要的时候才能手到擒来。在前文中我们已经为大家介绍了120个非常优秀的CSS水平导航菜单，今天我们汇总了更多优秀的导航设计案例，千万不要错过哦！

1.三维导航设计：

网站导航已经不满足于常见的平面化设计，越来越多的网站喜欢用立体感强的三维导航。折纸是最常用的表现形式。

2. 说话气泡导航设计

把菜单设计成讲话的气泡形状，似乎是另一种流行的趋势。

3.圆角导航设计

圆角经常用来软化规整的矩形，其按钮的外观为是为了吸引用户点击它们。

4.应用图标的导航设计

精致的图标越来越多的应用到导航设计中，因为现在带宽不再令人担心了。由于视觉上的吸引力，人们正越来越多地使用的图标，这种趋势仍在继续。图标不仅能吸引眼球，还有助于用户进行视觉识别。

5.JavaScript 动画

JavaScript 技术使 Web设计人员只用几行代码的网页元素即可容易创建动画，设计师们最近一直在使用功能多用又美观的JavaScript。

6. 不规则形状导航设计

由于大多数网站都用的是直边和尖角，不规则的形状让你有机会摆脱俗套范。

Booma

Kutztown University

Yorkdale

The Crazy Love Campaign

Carnivale du Vin 2009

标签：Design, Design, Menu, Menu, WEB

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

120个非常优秀的CSS水平导航菜单

seasun — Mon, 12 Jul 2010 14:08:45 +0000

导航是一个网站的路标，优秀的导航是网站设计成功地第一步。导航必须是用户友好的，而且要与网站设计风格保持一致，这样才能为用户提供简便的导航。

在这里您将看到120个非常优秀的CSS水平导航菜单。

标签：CSS, CSS, Design, Design, Menu, Menu

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

12个高质量纹理背景下载站

seasun — Mon, 12 Jul 2010 13:27:28 +0000

材质是设计中必不可少的一部分，原来我们都需要把亲自动手拍下来的或者网上收集到的材质精心刻制成光盘，这样寻找和使用材质的时候十分麻烦。

现如今网络上出现了很多不错的材质下载站，而且分类明确目录清晰，需要的时候只要打开网页然后选中再右键保存就可以了，大大提高了设计的效率也节省了磁盘空间。但是如此之多的材质下载站中我们如何能够找到最好最全面的站点呢？今天就为大家精挑细选出了12个高质量纹理背景下载站，而且全部提供免费下载。

1) Texture Lovers

2) urbandirty

3) Lost And Taken

4) 3Dxo

5) Textures Library

6) Texture king

7) Mayang Texture

8 ) cgtextures

9) Texture Warehouse

10) Photoshop Textures

11) Grunge Textures

12) Free Stock Textures

国内类似的资源网站也很多，这里就不一一列出啦，Just Google It！

标签：Backgrond, Background, Design, Design, download

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

漂亮的Logo设计中隐藏的含义

seasun — Sun, 11 Jul 2010 09:05:05 +0000

一个简单的Logo设计往往传递着很多潜在信息，作为一个设计师，我们需要能够察觉到这些隐藏的含义。本文将解释那些伟大的Logo背后的潜在含义，希望这对你的将来的设计有帮助。

我在这里说明一下，老外对名称的首字母和缩写很在意，因此很多Logo都会隐藏的传递这两个信息。

Amazon.com

A和Z下面的箭头暗示着Amazon销售一切可销售的商品，这个箭头同时是个笑脸，让公司形象显得友好和亲切。

Atlanta Falcons

这个Logo是一只隼，同时也像字母F（Falcon的首字母）。

Baskin Robbins

这个Logo中包含了数字“31”，而“31”是他们之前的Logo。

Chick-Fil-A

这个Logo把字母C（Chick-Fil-A的首字母）转化成了一只鸡的形象。

City Direct

这里的隐藏含义比较难发现：如果你注意Logo中的黑色部分，飞机是被字母“CD”（City Direct的缩写）包围着的。

Eighty 20

这个必须要好好解释一下：蓝色方块代表1，灰色代表0。整个logo的第一行其实是二进制数字1010000，转换成十进制就是80。而第二行是 0010100，转换成十进制就是20。

Families / Marriage

在Fammilies的Logo中，字母“ili”看上去就像一家人：爸爸妈妈和孩子。

而在Marriage的Logo中，两个字母R对在一起，像面对面拉着手的两个人，象征了结合的夫妻二人。

Fashion Center

纽扣上的洞组成了字母F。

FedEx

有一个比较难找到的信息：字母E和x中间夹着的空白部分是个箭头，象征着联邦快递的精准与快速。

Forkwire

Forkwire是一家在线食物快递公司。Logo左部的图标是个“@”，代表在线；而这个@则由叉子和线（叉子柄的变形）组成，正好是 Forkwire的缩写。

Formula 1

Logo中间夹着的白色部分是个“1”。

Fort Worth Zoo

“FW”两个字母变形成了一只大象。

Goodwill

Logo的左上部其实是个小写的字母“g”，这不仅是公司名的首字母，而且是个笑脸，让看到的人不知不决中就增加了对公司的好感。

Gotham Books

书本堆成了个摩天大楼。

Hartford Whalers

Logo上部蓝色的部分是鲸鱼的尾巴，中间灰色的是字母“H”，下方绿色部分是“W”。

LG

很多人坚信LG的logo是个变形的吃豆人！

Milwaukee Brewers

这是一直棒球队的Logo。手套其实是由“M”和“b”两个字母组成

Missouri Westen State University

Logo上的鹰是这所大学的吉祥物，另外鹰的轮廓其实就是密苏里州在地图上的形状。

Mosleep

Mosleep是一个研究睡眠问题的医生组织。Logo的上半部是字母“M”，下半部是个床。

NBC

NBC的logo是一只孔雀，而这只孔雀正代表了公司的座右铭：往前看，不要往后看（外表光鲜亮丽，里面一团糟是么⊙﹏⊙）。

Pakuy

由一个打开的盒子形成的字母“P”，同时暗示了公司是做包装行业的。

Piano Forest

远看是钢琴键，近看是树林。

Schizophrenic

schizophrenic是精神分裂的意思，logo往左看是个笑脸，往右看是个哭脸，果然精神分裂。。。

To Beat or Not to Beat?

皮带弯曲成了一个问号，正好代表着：打还是不打？

Toblerone

一只正在爬马特峰的熊。马特峰就是Toblerone巧克力的发源地。

Unilever

“U”中的每一个小图案都代表了联合利华的业务重点，如：衬衫（在右下，心的下面）表示“服装”，代表干净洗涤与穿着整洁。

Via Rail Canada

Logo的中间代表铁路。

WSU

一只美洲狮，同时包含了“WSU”三个字母。

Yoga Australia

如果你仔细看，姑娘腿和手中间的空白正好是澳大利亚大陆的形状。

标签：Design, Design, Logo

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

10个迷你且清爽的免费WordPress主题

seasun — Fri, 09 Jul 2010 15:16:42 +0000

对于网站所有者而言，WordPress无疑已经成为内容管理系统的最佳选择。对于产生这种选择的原因有很多，但有一个因素是肯定的–可使用的主题可以找到很多，而且有许多的功能插件。互联网上有很多该类的主题，但我最喜欢的是简约风格的设计，会使人觉得内容也是可以说话的。如果您也恰好正在寻找简约风格的WordPress主题，那么您很幸运，这里为您找到的是10个免费的WordPress主题。

Un.complicated

The Standard

Lifestreaming White

Clear

The Daily Grind

Blue Bubble

Minimal Press

Foliogrid

Clean Home

Vostok

标签：Design, Design, theme, Translate, Translate, Wordpress, Wordpress, 翻译

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

40个激发灵感的美味餐厅类网站设计

seasun — Fri, 09 Jul 2010 05:14:46 +0000

餐厅类型的网站也是可以找到很多鼓舞人心的设计的好地方，也很能检验当前的设计是否可以以最恰当的方式显示照片的好方法。由于主要内容都是关于餐厅的美食－至少它们的确就是这些－应该没有比显示漂亮的美食更能体现他们的特色的了。因此，在本篇文章中，我们收集了这40个激发灵感的美味餐厅类网站设计。从中你会发现，这些餐厅的网页设计中，他们总是可以将用户的焦点通过不同的方式集中在食物上。无论是一张完整的背景图或者是幻灯片，与图片相关的都是关于食物。嗯，我们开始吧，享受这一时刻美妙的设计所能带来的美丽时刻吧，记住，有时图片比千言万语都要更好。

Marie Catribs

Culinaria

TasteSpotting

The Noodle Box

PizzaExpress

McDonalds

Aqua Italia

San Diego Brewing

Twelve Restaurant

Chez Gerard

Nuevo

Veda

Brooklyn Fare

FIG

Ruby Tuesday

Jake’s

Hoddows

Hunan Gourmet

springhill

Restaurant El Amigo

isle

Le 28Thiers

The Little Cake Parlour

Cannolificio Mongibello

La Masa Mimatta

Pic Fresh

Giraffe

Sesame

Choga NYC

Giannis Steakhouse

Osaki

Alley Pfannekuchen

Back Yard Burgers

MoNkEyNuTs

Olive Garden

Daimu

Charlie Browns

Gibsons Steakhouse

Auberge de lill

Saf Restaurant

参考来源:

About the Author

Gisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS – Brazil. Twitter: @gismullr

标签：Design, Design, Translate, Translate, Website, Website, 翻译

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh

6个超级有用的印刷格式设计速查表

seasun — Thu, 08 Jul 2010 13:47:22 +0000

有些人可能认为，单方面来说，印刷格式设计跟网页设计是最为相似的，但也恰恰因为这个原因导致一些因素常常被忽视和忽略。很多人都从事于印刷排版工作，但要想成为大师级确实相当不易的。其中许多都是通过大量的工作经验、实践及对于尺寸的把握而成就的。虽然如此，很多还是得靠记忆去牢记的。因此，为了提供一些略微的印刷排版帮助，我们收集了这6个超级有用的印刷格式设计速查表。

您可能会感兴趣的其他文章

Feed enhanced by Better Feed from Ozh